映射数据库文件改为使用 js 提供

TakWolf · TakWolf · commit 023ad3f7ce3f · 2025-01-31T03:26:30.000+08:00
diff --git a/tools/build_db.py b/tools/build_db.py
@@ -80,8 +80,8 @@ def main():
 
     db = _build_db()
 
-    file_path = www_data_dir.joinpath('db.json')
-    file_path.write_text(json.dumps(db), 'utf-8')
+    file_path = www_data_dir.joinpath('db.js')
+    file_path.write_text(f'export default {json.dumps(db)}', 'utf-8')
     print(f"Build: '{file_path}'")
 
 
diff --git a/www/css/index.css b/www/css/index.css
@@ -8,6 +8,10 @@ body {
     font-family: sans-serif;
 }
 
+[v-cloak] {
+    display: none;
+}
+
 .nav {
     background-color: deepskyblue;
     box-shadow: 0 0 8px gray;
diff --git a/www/data/db.js b/www/data/db.js
diff --git a/www/data/db.json b/www/data/db.json
diff --git a/www/index.html b/www/index.html
@@ -9,43 +9,35 @@
 </head>
 <body>
 
-<div id="app">
+<div id="app" v-cloak>
     <nav class="nav">
         <h1 class="title">思源映射查看器</h1>
     </nav>
     <main class="main">
-        <template v-if="dbLoadFailed">
-            <div class="error-tip">映射数据加载失败，请刷新浏览器重试</div>
-        </template>
-        <template v-else-if="!db">
-            <div class="loading-tip">正在加载映射数据，请稍后</div>
-        </template>
-        <template v-if="db">
-            <label class="input">
-                <input type="text" placeholder="请在此输入字符" v-model="input">
+        <label class="input">
+            <input type="text" placeholder="请在此输入字符" v-model="input">
+        </label>
+        <div class="option-line">
+            <label class="checkbox">
+                <input type="checkbox" v-model="displaySans">
+                <span class="name">思源黑体</span>
             </label>
-            <div class="option-line">
-                <label class="checkbox">
-                    <input type="checkbox" v-model="displaySans">
-                    <span class="name">思源黑体</span>
-                </label>
-                <label class="checkbox">
-                    <input type="checkbox" v-model="displaySerif">
-                    <span class="name">思源宋体</span>
-                </label>
-            </div>
-            <div class="option-line">
-                <label class="range">
-                    <span class="name">字体尺寸: {{ fontSize }}px</span>
-                    <input type="range" min="100" max="400" step="10" v-model="fontSize">
-                </label>
-                <label class="range">
-                    <span class="name">字体粗细: {{ fontWeight }}</span>
-                    <input type="range" min="200" max="900" step="50" v-model="fontWeight">
-                </label>
-                <button @click="onResetOptionsClick">重置参数</button>
-            </div>
-        </template>
+            <label class="checkbox">
+                <input type="checkbox" v-model="displaySerif">
+                <span class="name">思源宋体</span>
+            </label>
+        </div>
+        <div class="option-line">
+            <label class="range">
+                <span class="name">字体尺寸: {{ fontSize }}px</span>
+                <input type="range" min="100" max="400" step="10" v-model="fontSize">
+            </label>
+            <label class="range">
+                <span class="name">字体粗细: {{ fontWeight }}</span>
+                <input type="range" min="200" max="900" step="50" v-model="fontWeight">
+            </label>
+            <button @click="onResetOptionsClick">重置参数</button>
+        </div>
         <div class="search-result">
             <div class="item" v-for="codePoint in searchQuery" :key="codePoint" :set="c = String.fromCodePoint(codePoint)">
                 <div class="title">
diff --git a/www/js/app.js b/www/js/app.js
@@ -1,4 +1,5 @@
 import { createApp } from './vue.esm-browser.prod.js'
+import db from '../data/db.js'
 
 createApp({
     data() {
@@ -10,8 +11,7 @@ createApp({
                 'jp',
                 'kr',
             ],
-            db: null,
-            dbLoadFailed: false,
+            db: db,
             input: '',
             displaySans: true,
             displaySerif: true,
@@ -50,21 +50,6 @@ createApp({
         },
     },
     async created() {
-        try {
-            const response = await fetch('data/db.json')
-            if (response.ok) {
-                const db = await response.json()
-                console.log('加载映射：', db)
-                this.db = db
-            } else {
-                this.dbLoadFailed = true
-                return
-            }
-        } catch (e) {
-            this.dbLoadFailed = true
-            return
-        }
-
         const json = localStorage.getItem('source-han-mapping-viewer')
         if (json) {
             const settings = JSON.parse(json)
