优化页面布局和显示效果

Super12138 · Dec 27, 2024 · 7ab58da · 7ab58da
1 parent bd09dd1
commit 7ab58da
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
         <mdui-navigation-bar id="navigationBar"></mdui-navigation-bar>
         <mdui-navigation-rail id="navigationRail"></mdui-navigation-rail>
         <mdui-layout-main id="container"></mdui-layout-main>
-        <mdui-top-app-bar>
+        <mdui-top-app-bar scroll-behavior="elevate" scroll-target="#container">
             <mdui-top-app-bar-title id="appTitle">问心</mdui-top-app-bar-title>
         </mdui-top-app-bar>
     </mdui-layout>

diff --git a/package.json b/package.json
@@ -22,10 +22,10 @@
         "@mdui/icons": "^1.0.2",
         "@types/node": "^22.10.1",
         "@vite-pwa/assets-generator": "^0.2.6",
-        "typedoc": "^0.27.2",
-        "typedoc-plugin-markdown": "^4.3.0",
+        "typedoc": "^0.27.5",
+        "typedoc-plugin-markdown": "^4.3.3",
         "typescript": "^5.7.2",
-        "vite": "^6.0.1",
+        "vite": "^6.0.6",
         "vite-plugin-html": "^3.2.2",
         "vite-plugin-pwa": "^0.21.1",
         "workbox-core": "^7.3.0",

diff --git a/pwa-assets.config.ts b/pwa-assets.config.ts
@@ -9,4 +9,4 @@ export default defineConfig({
     },
     preset,
     images: ['public/icon-512.png'],
-})
+});
diff --git a/settings.html b/settings.html
@@ -2,7 +2,7 @@
     <mdui-list-item headline="深色模式">
         <mdui-icon-mode-night--outlined slot="icon"></mdui-icon-mode-night--outlined>
         <mdui-segmented-button-group selects="single" slot="end-icon" value="auto" id="darkMode">
-            <mdui-segmented-button value="auto">跟随系统设置</mdui-segmented-button>
+            <mdui-segmented-button value="auto">跟随系统</mdui-segmented-button>
             <mdui-segmented-button value="light">关闭</mdui-segmented-button>
             <mdui-segmented-button value="dark">开启</mdui-segmented-button>
         </mdui-segmented-button-group>
@@ -25,7 +25,7 @@
     <p>本项目所有的量表均为收集互联网上的信息并整理，不对网站内任何量表具有版权。如侵权请联系我，我会及时删除。</p>
     <strong class="red">所有量表的测量结果仅供参考，不作为任何医学诊断的依据。</strong>
 
-    <mdui-divider style="margin-top: 15px;"></mdui-divider>
+    <mdui-divider></mdui-divider>
 
     <p class="center" style="margin-bottom: 0;">由 Super12138 开发，网站本体遵循 GPL 3.0 协议在 <a target="_blank" href="https://github.com/Super12138/Ask-Yourself">GitHub</a> 上开源</p>
     <p class="center" style="margin-top: 5px; margin-bottom: 0;">量表内容的版权归研究者所有</p>

diff --git a/src/index.css b/src/index.css
@@ -2,7 +2,7 @@
 body {
     opacity: 0;
     height: 100%;
-    margin: 8px;
+    margin: 0;
 }
 
 body.ready {
@@ -15,6 +15,7 @@ h5 {
     font-size: var(--mdui-typescale-headline-medium-size);
     letter-spacing: var(--mdui-typescale-headline-medium-tracking);
     font-weight: var(--mdui-typescale-headline-medium-weight);
+    margin: 0;
 }
 
 p {
@@ -74,7 +75,7 @@ mdui-list-subheader {
 
 /* 充满页面 */
 mdui-layout {
-    height: calc(100vh - 17px);
+    height: 100vh;
 }
 
 mdui-list-item {
@@ -91,6 +92,14 @@ mdui-radio {
     width: 100%;
 }
 
+mdui-top-app-bar {
+    padding: 1rem 0.9rem;
+}
+
+mdui-navigation-rail {
+    padding: 1rem 0.9rem;
+}
+
 .items-container {
     display: flex;
     flex-wrap: wrap;
@@ -115,9 +124,8 @@ mdui-radio {
 }
 
 /* 页面描述 */
-.questionnaire-description {
-    /*  */
-    margin-bottom: 2px;
+#questionnaireDescription {
+    margin: 1rem 0 1rem 0;
 }
 
 /* 页面提示 */
@@ -141,15 +149,15 @@ mdui-radio {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 10px;
+    margin-bottom: 1rem;
 }
 
 .progress-bar {
     margin-left: 10px;
 }
 
 .tip-card {
-    margin-bottom: 15px;
+    margin-bottom: 1rem;
     padding: 15px;
     display: flex;
     align-items: center;
@@ -165,6 +173,10 @@ mdui-radio {
     letter-spacing: var(--mdui-typescale-body-large-tracking);
 }
 
+mdui-divider {
+    margin: 1rem 0 1rem 0;
+}
+
 .red {
     color: #B10000;
 }
@@ -195,7 +207,7 @@ mdui-radio {
 }
 
 #controlArea {
-    margin: 5% 2% 22% 2%;
+    margin: 3rem 1rem 5rem 1rem;
 }
 
 #loadingTip {
@@ -209,6 +221,11 @@ mdui-radio {
     transition: 0.1s opacity;
 }
 
+#searchBar {
+    width: calc(100% - 16px);
+    margin: 8px 8px 0 8px;
+}
+
 #nullTip {
     display: none;
     width: 100%;

diff --git a/src/test/index.ts b/src/test/index.ts
@@ -251,7 +251,7 @@ document.addEventListener('testPageLoaded', async () => {
                         });
 
                         if (json.resultTips !== undefined) {
-                            document.querySelector<HTMLElement>('.result-tips')!.innerHTML = `结果解读说明（仅供参考，不作为诊断依据）<br>${json.resultTips}`;
+                            document.querySelector<HTMLElement>('.result-tips')!.innerHTML = `结果解读说明（仅供参考，不作为诊断依据）<br><mdui-divider></mdui-divider>${json.resultTips}`;
                         }
                         // 展示结果区域
                         show(resultArea);

diff --git a/test.html b/test.html
@@ -11,9 +11,9 @@
             <br>
             <strong id="questionnaireTips" class="red"></strong>
         </div>
-        <mdui-divider style="margin: 3% 0 3% 0;"></mdui-divider>
+        <mdui-divider></mdui-divider>
         <div id="references">
-            <h5 style="margin: 0 0 20px 0;">参考信息</h5>
+            <h5 style="margin-bottom: 1rem;">参考信息</h5>
         </div>
     </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,4 +9,4 @@ export default defineConfig({ @@
         },
         preset,
         images: ['public/icon-512.png'],
-    })
+    });