Merge pull request #1 from yb6b/dev

custom style via CSS vars
yb6b · Mar 13, 2024 · 054b288 · 054b288
2 parents 8d842b7 + 61d1362
commit 054b288
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 62 deletions.
diff --git a/components/search/Card.vue b/components/search/Card.vue
@@ -24,7 +24,7 @@ const unicode = computed(() => p.hanzi.charCodeAt(0).toString(16).toUpperCase())
 </script>
 
 <template>
-    <div class="group border p-3 m-2 rounded-3xl bg-base-100 shadow-md kaiti-font text-center dark:bg-gray-800">
+    <div class="group border p-3 m-2 rounded-3xl shadow-md font-serif text-center bg-gray-100 dark:bg-slate-800">
         <div class="text-4xl text-blue-800 dark:text-blue-400">{{ hanzi }}</div>
         <div class="text-xl mt-2">
             <ruby v-for="(c, index) in comp" :key="c">
@@ -38,7 +38,7 @@ const unicode = computed(() => p.hanzi.charCodeAt(0).toString(16).toUpperCase())
             </ruby>
         </div>
         <div class="invisible justify-center group-hover:visible">
-            <div class="flex justify-around">
+            <div class="flex justify-around dark:opacity-55 opacity-100">
                 <a :href="'https://zi.tools/zi/' + uriText" class="" target="_blank" rel="noreferrer" title="字统网查询">
                     <img :src=ZitongLogo alt="字统网" width="22" />
                 </a>

diff --git a/components/search/Search.vue b/components/search/Search.vue
@@ -4,6 +4,7 @@ import { shallowRef } from "vue";
 import { watchThrottled, useUrlSearchParams } from "@vueuse/core";
 import SearchAsync from "./SearchAsync.vue";
 import SearchHanzi from "./SearchHanzi.vue";
+import SearchHelp from "./SearchHelp.vue";
 import { type Result } from "./share";
 const p = defineProps<{
     /** 汉字到拆分表的映射 */
@@ -69,7 +70,9 @@ function prehandleJson(json: object) {
 </script>
 
 <template>
-    <label class="input input-bordered dark:bg-slate-800 flex items-center gap-2">
+
+
+    <label class="input input-bordered bg-gray-100 dark:bg-slate-800 flex items-center gap-2 mt-8">
         <input type="text" class="grow" placeholder="查询的文本 / 全拼 / 四角号码 / 笔画" v-model="userInput" />
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4 opacity-70">
             <path fill-rule="evenodd"
@@ -78,11 +81,17 @@ function prehandleJson(json: object) {
         </svg>
     </label>
 
+    <div class="flex justify-center py-2">
+        <SearchHelp />
+    </div>
+
     <div v-if="kind === ''" class="opacity-40 text-center p-9 tracking-widest">从上方搜索条开始反查吧!</div>
     <SearchHanzi v-else-if="kind === 'z'" :result="searchHanziHandler()" />
     <SearchAsync v-else-if="kind === 'p'" title="拼音" json="/data/pinyin.json" :handler :text="searchPatterns" />
     <template v-else>
         <SearchAsync title="笔划" json="/data/bihua.json" :handler :text="searchPatterns" />
         <SearchAsync title="四角" json="/data/sijiao.json" :handler :text="searchPatterns" :prehandleJson />
     </template>
+
+
 </template>
diff --git a/components/search/SearchHelp.vue b/components/search/SearchHelp.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <!-- Open the modal using ID.showModal() method -->
+    <button class="btn btn-ghost btn-sm text-slate-500 font-normal" onclick="my_modal_2.showModal()">
+        <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m0 26a12 12 0 1 1 12-12a12 12 0 0 1-12 12"/><circle cx="16" cy="23.5" r="1.5" fill="currentColor"/><path fill="currentColor" d="M17 8h-1.5a4.49 4.49 0 0 0-4.5 4.5v.5h2v-.5a2.5 2.5 0 0 1 2.5-2.5H17a2.5 2.5 0 0 1 0 5h-2v4.5h2V17a4.5 4.5 0 0 0 0-9"/></svg>
+        查询功能说明
+    </button>
+    <dialog id="my_modal_2" class="modal">
+        <div class="modal-box bg-slate-100 dark:bg-slate-800">
+            <form method="dialog">
+                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+            </form>
+            <p>
+                这个网页可以方便地查询逸码的拆分，可以链接到
+                <a href="https://zi.tools/" target="_blank" rel="noreferrer">
+                    字统网
+                </a>
+                、
+                <a href="http://yedict.com/" target="_blank" rel="noreferrer">
+                    叶典网
+                </a>
+                、
+                <a href="https://hanyu.baidu.com/" target="_blank" rel="noreferrer">
+                    百度汉语
+                </a>
+                、
+                <a href="https://www.zdic.net/" target="_blank" rel="noreferrer">
+                    汉典网
+                </a>
+                。本网页会过滤码表之外的字符。
+            <p>网页在第一次查询拼音、四角、笔画时，需要下载相应的数据，请稍后。</p>
+
+            </p>
+            <h4>① 查询汉字</h4>
+            <p>
+                输入要查询的文字（可多个汉字），程序会显示每个汉字的拆分。
+            </p>
+            <h4>② 拼音反查</h4>
+            <p>
+                输入全拼（例如：<code>hao</code>），返回所有相关汉字的拆分。
+            </p>
+            <h4>③ 笔画反查</h4>
+            <p>
+                连续输入 12345
+                这五个数字，分别表示“横竖撇点折”。复杂汉字，输入完 <b>6</b>
+                个笔画后，再输入汉字的 <b>最后一笔</b>。
+            </p>
+            <h4>④ 四角反查</h4>
+            <p>
+                输入
+                <a href="https://baike.baidu.com/item/%E5%9B%9B%E8%A7%92%E5%8F%B7%E7%A0%81/1217626" target="_blank"
+                    rel="noreferrer">
+                    四角号码
+                </a>{" "}
+                反查相关汉字。填入4个数字或5个数字。
+            </p>
+        </div>
+
+        <form method="dialog" class="modal-backdrop">
+            <button>关闭对话框</button>
+        </form>
+    </dialog>
+</template>
diff --git a/components/train/Train.vue b/components/train/Train.vue
@@ -77,7 +77,7 @@ function checkNextItem(answer: string) {
         </div>
         <div class="flex justify-center p-5">
             <input id="input_el" type="text" placeholder="输入字根编码" v-model="userKeys"
-                :class="['input w-half max-w-xs input-bordered text-center input-sm dark:bg-slate-600', { 'input-error': !isCorrect }]" />
+                :class="['input w-half max-w-xs input-bordered text-center input-sm dark:bg-slate-800 bg-white', { 'input-error': !isCorrect }]" />
         </div>
         <div :class="['text-center', { 'opacity-0': !isFirstLearn }]">答案是 <b class="font-mono">{{ card.key }}</b></div>
     </div>

diff --git a/src/.vitepress/config.mts b/src/.vitepress/config.mts
@@ -20,7 +20,7 @@ export default defineConfig({
     },
   },
   head: [
-    ['link', { rel: 'icon', href: base + 'icon.svg', type: 'image/svg+xml' }],
+    ['link', { rel: 'icon', href: 'icon.svg', type: 'image/svg+xml' }],
   ],
   vite: {
     css: {

diff --git a/src/.vitepress/theme/fonts.css b/src/.vitepress/theme/fonts.css
@@ -14,4 +14,23 @@
 
 .outi-font {
     font-family: "outi-yima", "欧体楷书", "楷体", fantasy, system-ui;
-}
+}
+
+:root {
+
+    --vp-c-brand-1: var(--vp-c-red-1);
+    --vp-c-brand-2: var(--vp-c-red-2);
+    --vp-c-brand-3: var(--vp-c-red-3);
+    --vp-c-brand-soft: var(--vp-c-red-soft);
+
+    --vp-home-hero-name-color: transparent;
+    --vp-home-hero-name-background:  -webkit-linear-gradient(
+        120deg,
+        var(--vp-c-brand-1),
+        var(--vp-c-brand-3) 
+      );;
+
+    --vp-home-hero-image-background-image: none;
+    --vp-home-hero-image-filter: none;
+    --vp-nav-bg-color: var(--vp-c-bg-soft);
+  }
diff --git a/src/easy-code/search.md b/src/easy-code/search.md
@@ -8,23 +8,3 @@ aside: false
 # 易码拆分反查
 
 <Search hanziJson="/easy-code/chaifen.json"  compJson="/easy-code/zigen.json" compFont="outi-font" id="easy-code"/>
-:::details 拆分查询使用帮助
-这个网页可以方便地查询逸码的拆分，可以链接到 [字统网](https://zi.tools/)、[叶典网](http://yedict.com/)、[百度汉语](https://hanyu.baidu.com/)、[汉典网](https://www.zdic.net/)。本网页会无视逸码码表以外的生僻字。
-网页在第一次查询拼音、四角、笔画时，需要下载相应的数据，请稍后。
-
-1. **查询汉字**
-    - 输入要查询的文字（可多个汉字），程序会显示每个汉字的逸码的拆分。
-
-2. **拼音反查**
-
-    - 输入全拼（例如：`hao`），返回所有相关汉字的拆分。
-
-3. **笔画反查**
-
-    - 连续输入 12345 这五个数字，分别表示“横竖撇点折”。复杂汉字，输入完 **6**
-个笔画后，再输入汉字的 **最后一笔**。
-
-4. **四角反查**
-
-    - 输入[四角号码](https://baike.baidu.com/item/%E5%9B%9B%E8%A7%92%E5%8F%B7%E7%A0%81/1217626)反查相关汉字。共4个数字或5个数字。
-:::
diff --git a/src/graceful-code/v20/search.md b/src/graceful-code/v20/search.md
@@ -8,21 +8,3 @@ aside: false
 # 逸码V20 拆分反查
 
 <Search hanziJson="/v20/chaifen.json" compJson="/v20/zigen.json" compFont="kaiti-font" id="v20"/>
-
-:::details 拆分查询使用帮助
-这个网页可以方便地查询逸码V20的拆分，可以链接到 [字统网](https://zi.tools/)、[叶典网](http://yedict.com/)、[百度汉语](https://hanyu.baidu.com/)、[汉典网](https://www.zdic.net/)。本网页会无视逸码码表以外的生僻字。
-网页在第一次查询拼音、四角、笔画时，需要下载相应的数据，请稍后。
-
-1. **查询汉字**
-    - 输入要查询的文字（可多个汉字），程序会显示每个汉字的逸码的拆分。
-
-2. **拼音反查**
-    - 输入全拼（例如：`hao`），返回所有相关汉字的拆分。
-
-3. **笔画反查**
-    - 连续输入 12345 这五个数字，分别表示“横竖撇点折”。复杂汉字，输入完 **6**
-个笔画后，再输入汉字的 **最后一笔**。
-
-4. **四角反查**
-    - 输入[四角号码](https://baike.baidu.com/item/%E5%9B%9B%E8%A7%92%E5%8F%B7%E7%A0%81/1217626)反查相关汉字。共4个数字或5个数字。
-:::
diff --git a/src/graceful-code/vv9-26/search.md b/src/graceful-code/vv9-26/search.md
@@ -8,21 +8,3 @@ aside: false
 # 逸码VV9 · 26键 拆分反查
 
 <Search hanziJson="/vv9-26/chaifen.json" compJson="/vv9-26/zigen.json" compFont="kaiti-font" id="vv9-26"/>
-
-:::details 拆分查询使用帮助
-这个网页可以方便地查询逸码VV9 · 26键的拆分，可以链接到 [字统网](https://zi.tools/)、[叶典网](http://yedict.com/)、[百度汉语](https://hanyu.baidu.com/)、[汉典网](https://www.zdic.net/)。本网页会无视逸码码表以外的生僻字。
-网页在第一次查询拼音、四角、笔画时，需要下载相应的数据，请稍后。
-
-1. **查询汉字**
-    - 输入要查询的文字（可多个汉字），程序会显示每个汉字的逸码的拆分。
-
-2. **拼音反查**
-    - 输入全拼（例如：`hao`），返回所有相关汉字的拆分。
-
-3. **笔画反查**
-    - 连续输入 12345 这五个数字，分别表示“横竖撇点折”。复杂汉字，输入完 **6**
-个笔画后，再输入汉字的 **最后一笔**。
-
-4. **四角反查**
-    - 输入[四角号码](https://baike.baidu.com/item/%E5%9B%9B%E8%A7%92%E5%8F%B7%E7%A0%81/1217626)反查相关汉字。共4个数字或5个数字。
-:::
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,7 +20,7 @@ export default defineConfig({ @@
         },
       },
       head: [
-        ['link', { rel: 'icon', href: base + 'icon.svg', type: 'image/svg+xml' }],
+        ['link', { rel: 'icon', href: 'icon.svg', type: 'image/svg+xml' }],
       ],
       vite: {
         css: {
@@ Expand Down @@