From b29c31369a6e949c13ed77fe3af1be04c1c8656e Mon Sep 17 00:00:00 2001
From: wherewhere <qq2518766683@outlook.com>
Date: Wed, 10 Jul 2024 22:19:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=AE=BE=E7=BD=AE=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E5=92=8C=E8=AE=BE=E7=BD=AE=E6=8A=98=E5=8F=A0=E6=8E=A7?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/tools/index.md          | 150 +++++++++++++++++++--------------
 source/tools/markdown/index.md |   9 +-
 2 files changed, 92 insertions(+), 67 deletions(-)

diff --git a/source/tools/index.md b/source/tools/index.md
index 3ee30d1..7fc95b1 100644
--- a/source/tools/index.md
+++ b/source/tools/index.md
@@ -39,58 +39,47 @@ sitemap: false
 {% raw %}
 <div id="vue-app">
   <div class="stack-vertical" style="row-gap: 0.3rem;">
-    <fluent-accordion style="width: 100%;">
-      <fluent-accordion-item>
-        <div slot="heading">
-          <settings-presenter style="padding: var(--settings-expander-header-padding);">
-            <template #icon>
-              <svg-host
-                src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons/icons/calendar_date_20_regular.svg"></svg-host>
-            </template>
-            <template #header>
-              <h4 class="unset">时间戳转换</h4>
-            </template>
-            <template #description>
-              转换 Unix 时间戳与时间字符串。
-            </template>
-          </settings-presenter>
-        </div>
-        <div class="setting-expander-content-grid">
-          <div class="stack-vertical">
-            <div class="stack-horizontal">
-              <fluent-number-field v-model="timeStamp" style="flex: 1;"></fluent-number-field>
-              <fluent-button @click="convertTimeStamp">转换时间戳</fluent-button>
-            </div>
-            <div class="stack-horizontal">
-              <fluent-text-field v-model="timeString" style="flex: 1;"></fluent-text-field>
-              <fluent-button @click="convertTimeString">转换时间</fluent-button>
-            </div>
-            <div class="stack-horizontal" style="justify-content: space-between;">
-              <fluent-button @click="setDateTimeNow">当前时间</fluent-button>
-              <fluent-switch ref="isMillisecond">时间戳是否为毫秒</fluent-switch>
-            </div>
+    <settings-expander>
+      <template #icon>
+        <svg-host src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons/icons/calendar_date_20_regular.svg"></svg-host>
+      </template>
+      <template #header>
+        <h4 class="unset">时间戳转换</h4>
+      </template>
+      <template #description>
+        转换 Unix 时间戳与时间字符串。
+      </template>
+      <div class="setting-expander-content-grid">
+        <div class="stack-vertical">
+          <div class="stack-horizontal">
+            <fluent-number-field v-model="timeStamp" style="flex: 1;"></fluent-number-field>
+            <fluent-button @click="convertTimeStamp">转换时间戳</fluent-button>
+          </div>
+          <div class="stack-horizontal">
+            <fluent-text-field v-model="timeString" style="flex: 1;"></fluent-text-field>
+            <fluent-button @click="convertTimeString">转换时间</fluent-button>
+          </div>
+          <div class="stack-horizontal" style="justify-content: space-between;">
+            <fluent-button @click="setDateTimeNow">当前时间</fluent-button>
+            <fluent-switch ref="isMillisecond">时间戳是否为毫秒</fluent-switch>
           </div>
-        </div>
-      </fluent-accordion-item>
-    </fluent-accordion>
-    <fluent-card class="settings-button" @click="() => navigate('./markdown')" style="cursor: pointer;">
-      <div class="content-grid">
-        <settings-presenter style="padding: var(--settings-button-padding);">
-          <template #icon>
-            <svg-host src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons/icons/markdown_20_regular.svg"></svg-host>
-          </template>
-          <template #header>
-            <h4 class="unset">Markdown 预览</h4>
-          </template>
-          <template #description>
-            使用 Marked.JS 解析并预览 Markdown 文本。
-          </template>
-        </settings-presenter>
-        <div class="action-icon-holder">
-          <svg-host src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons/icons/chevron_right_12_regular.svg"></svg-host>
         </div>
       </div>
-    </fluent-card>
+    </settings-expander>
+    <settings-button @click="() => navigate('./markdown')">
+      <template #icon>
+        <svg-host src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons/icons/markdown_20_regular.svg"></svg-host>
+      </template>
+      <template #header>
+        <h4 class="unset">Markdown 预览</h4>
+      </template>
+      <template #description>
+        使用 Marked.JS 解析并预览 Markdown 文本。
+      </template>
+      <template #action-icon>
+        <svg-host src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons/icons/chevron_right_12_regular.svg"></svg-host>
+      </template>
+    </settings-button>
   </div>
 </div>
 
@@ -114,6 +103,50 @@ sitemap: false
     </div>
   </div>
 </template>
+
+<template id="settings-button-template">
+  <fluent-card class="settings-button" style="cursor: pointer;">
+    <div class="content-grid">
+      <settings-presenter style="padding: var(--settings-button-padding);">
+        <template #icon>
+          <slot name="icon"></slot>
+        </template>
+        <template #header>
+          <slot name="header"></slot>
+        </template>
+        <template #description>
+          <slot name="description"></slot>
+        </template>
+        <slot></slot>
+      </settings-presenter>
+      <div class="action-icon-holder">
+        <slot name="action-icon"></slot>
+      </div>
+    </div>
+  </fluent-card>
+</template>
+
+<template id="settings-expander-template">
+  <fluent-accordion class="settings-expander" style="width: 100%;">
+    <fluent-accordion-item>
+      <div slot="heading">
+        <settings-presenter style="padding: var(--settings-expander-header-padding);">
+          <template #icon>
+            <slot name="icon"></slot>
+          </template>
+          <template #header>
+            <slot name="header"></slot>
+          </template>
+          <template #description>
+            <slot name="description"></slot>
+          </template>
+          <slot name="action-content"></slot>
+        </settings-presenter>
+      </div>
+      <slot></slot>
+    </fluent-accordion-item>
+  </fluent-accordion>
+</template>
 {% endraw %}
 
 <script type="module" data-pjax>
@@ -151,6 +184,10 @@ sitemap: false
     }
   }).component("settings-presenter", {
     template: "#settings-presenter-template"
+  }).component("settings-button", {
+    template: "#settings-button-template"
+  }).component("settings-expander", {
+    template: "#settings-expander-template"
   }).mount("#vue-app");
   if (!customElements.get("svg-host")) {
     async function getSVG(src) {
@@ -215,19 +252,6 @@ sitemap: false
     display: flex;
   }
 
-  #vue-app .card {
-    display: block;
-    contain: content;
-    height: var(--card-height, 100%);
-    width: var(--card-width, 100%);
-    box-sizing: border-box;
-    background: var(--fill-color);
-    color: var(--neutral-foreground-rest);
-    border: calc(var(--stroke-width)* 1px) solid var(--neutral-stroke-layer-rest);
-    border-radius: calc(var(--layer-corner-radius)* 1px);
-    box-shadow: var(--elevation-shadow-card-rest);
-  }
-
   #vue-app .stack-vertical {
     display: flex;
     flex-direction: column;
@@ -354,7 +378,7 @@ sitemap: false
     fill: currentColor;
   }
 
-  div.setting-expander-content-grid {
+  .settings-expander div.setting-expander-content-grid {
     padding: var(--settings-expander-item-padding);
   }
 </style>
\ No newline at end of file
diff --git a/source/tools/markdown/index.md b/source/tools/markdown/index.md
index 30afa12..e566f4c 100644
--- a/source/tools/markdown/index.md
+++ b/source/tools/markdown/index.md
@@ -4,7 +4,7 @@ sitemap: false
 ---
 <div class="split-view">
   <div id="container"></div>
-  <fluent-card class="perview-card markdown-body">
+  <fluent-card class="perview-card markdown-body monaco-component">
     <div id="perview"></div>
   </fluent-card>
 </div>
@@ -43,9 +43,9 @@ sitemap: false
   if (typeof matchMedia === "function") {
     const scheme = window.matchMedia("(prefers-color-scheme: dark)");
     if (typeof scheme !== "undefined") {
-      scheme.addListener(e =>{
-         monaco.editor.setTheme(e.matches ? "vs-dark" : "vs");
-         baseLayerLuminance.withDefault(e.matches ? StandardLuminance.DarkMode : StandardLuminance.LightMode)
+      scheme.addListener(e => {
+        monaco.editor.setTheme(e.matches ? "vs-dark" : "vs");
+        baseLayerLuminance.withDefault(e.matches ? StandardLuminance.DarkMode : StandardLuminance.LightMode)
       });
       if (scheme.matches) {
         monaco.editor.setTheme("vs-dark");
@@ -95,6 +95,7 @@ sitemap: false
     flex: 1;
     height: auto;
     padding: 16px;
+    background: var(--vscode-editor-background);
   }
 
   @media (max-width: 767px) {