使用控件对象挂载 Vue

SVG 控件居中 SVG
wherewhere · Nov 22, 2024 · c65ba2c · c65ba2c
1 parent f7ced1d
commit c65ba2c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/source/tools/bopo/index.md b/source/tools/bopo/index.md
@@ -1,5 +1,7 @@
 ---
 title: 注音
+description: 使用 <fluent-anchor appearance="hypertext" href="http://cheonhyeong.com/Tools/Times.html#9"
+  target="_blank">TH-Times</fluent-anchor> 字体显示注音文本
 sitemap: false
 ---
 <script type="module" data-pjax>
@@ -24,9 +26,9 @@ sitemap: false
   accentBaseColor.withDefault(SwatchRGB.create(0xFC / 0xFF, 0x64 / 0xFF, 0x23 / 0xFF));
   fillColor.withDefault(neutralLayerFloating);
   if (typeof matchMedia === "function") {
-    const scheme = window.matchMedia("(prefers-color-scheme: dark)");
+    const scheme = matchMedia("(prefers-color-scheme: dark)");
     if (typeof scheme !== "undefined") {
-      scheme.addListener(e => baseLayerLuminance.withDefault(e.matches ? StandardLuminance.DarkMode : StandardLuminance.LightMode));
+      scheme.addEventListener("change", e => baseLayerLuminance.withDefault(e.matches ? StandardLuminance.DarkMode : StandardLuminance.LightMode));
       if (scheme.matches) {
         baseLayerLuminance.withDefault(StandardLuminance.DarkMode);
       }
@@ -134,7 +136,7 @@ sitemap: false
 </template>
 
 <template id="svg-host-template">
-  <div v-html="innerHTML"></div>
+  <div class="svg-host" v-html="innerHTML"></div>
 </template>
 
 <template id="input-label-template">
@@ -449,7 +451,7 @@ sitemap: false
         neutralFillInputRest: designTokens.neutralFillInputRest
       }
     }
-  }).mount("#vue-app");
+  }).mount(root);
 </script>
 
 <style>
@@ -534,6 +536,10 @@ sitemap: false
     background: var(--neutral-fill-stealth-active-on-neutral-fill-layer-rest);
   }
 
+  .svg-host {
+    display: flex;
+  }
+
   .input-label .fluent-input-label {
     display: flex;
     justify-content: space-between;

diff --git a/source/tools/index.md b/source/tools/index.md
@@ -1,5 +1,6 @@
 ---
 title: 小工具
+description: 各种各样的实用小工具
 ---
 <script type="module" data-pjax>
   import {
@@ -31,9 +32,9 @@ title: 小工具
   accentBaseColor.withDefault(SwatchRGB.create(0xFC / 0xFF, 0x64 / 0xFF, 0x23 / 0xFF));
   fillColor.withDefault(neutralLayerFloating);
   if (typeof matchMedia === "function") {
-    const scheme = window.matchMedia("(prefers-color-scheme: dark)");
+    const scheme = matchMedia("(prefers-color-scheme: dark)");
     if (typeof scheme !== "undefined") {
-      scheme.addListener(e => baseLayerLuminance.withDefault(e.matches ? StandardLuminance.DarkMode : StandardLuminance.LightMode));
+      scheme.addEventListener("change", e => baseLayerLuminance.withDefault(e.matches ? StandardLuminance.DarkMode : StandardLuminance.LightMode));
       if (scheme.matches) {
         baseLayerLuminance.withDefault(StandardLuminance.DarkMode);
       }
@@ -182,7 +183,7 @@ title: 小工具
         <svg-host src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons/icons/shield_lock_20_regular.svg"></svg-host>
       </template>
       <template #header>
-        <h4 id="generate-base-x" class="unset">Hash 加密</h4>
+        <h4 id="generate-crypto" class="unset">Hash 加密</h4>
       </template>
       <template #description>
         使用 <fluent-anchor appearance="hypertext" href="https://github.com/Daninet/hash-wasm/"
@@ -231,7 +232,7 @@ title: 小工具
 </template>
 
 <template id="svg-host-template">
-  <div v-html="innerHTML"></div>
+  <div class="svg-host" v-html="innerHTML"></div>
 </template>
 
 <template id="settings-presenter-template">
@@ -535,7 +536,7 @@ title: 小工具
         return this.$slots[name];
       }
     }
-  }).mount("#vue-app");
+  }).mount(root);
 </script>
 
 <style>
@@ -572,6 +573,10 @@ title: 小工具
     line-height: unset;
   }
 
+  .svg-host {
+    display: flex;
+  }
+
   .settings-presenter {
     display: flex;
     justify-content: space-between;