From 8284e5f552bd8c862cb5f44010b8c2ff2dcdaffe Mon Sep 17 00:00:00 2001
From: kieranwv <kieranwme@gmail.com>
Date: Fri, 1 Nov 2024 15:14:40 +0800
Subject: [PATCH] feat: update ui design

---
 .vscode/settings.json |  3 ++-
 src/layouts/page.vue  |  6 +++---
 src/locales/en.json   |  3 +--
 src/locales/zh.json   |  1 -
 src/pages/about.vue   |  7 +------
 src/pages/index.vue   | 30 ++++++++++++++----------------
 6 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 705021c..d977cf6 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -86,5 +86,6 @@
   // Enable the i18n-ally extension
   "i18n-ally.localesPaths": [
     "src/locales"
-  ]
+  ],
+  "i18n-ally.keystyle": "nested"
 }
diff --git a/src/layouts/page.vue b/src/layouts/page.vue
index 464401d..a3ba320 100644
--- a/src/layouts/page.vue
+++ b/src/layouts/page.vue
@@ -22,7 +22,7 @@ function openGithub() {
 
 <template>
   <main w-full h-full>
-    <header py-10 px-6 text-center>
+    <header py-10 px-4 text-center>
       <img v-if="headerLogo" alt="Logo Image" src="/logo.png" w-20 m-auto>
       <p text-6 font-bold my-5>
         <span mr-2 font-800>{{ t('app.title') }}</span>
@@ -49,10 +49,10 @@ function openGithub() {
         </TheButton>
       </p>
     </header>
-    <main m-auto border-1.5 border-color rd-1.5 p-5 min-h-32 max-w-xs sm:max-w-2xl>
+    <main m-auto min-h-32 max-w-full px-4 sm:max-w-2xl>
       <RouterView />
     </main>
-    <footer py-10 px-6 text-center>
+    <footer py-10 px-4 text-center>
       <a :href="LICENSE_URL" target="_blank">MIT License</a> © {{ new Date().getFullYear() }} <a
         href="https://github.com/kieranwv" target="_blank"
       >Kieran Wang</a>
diff --git a/src/locales/en.json b/src/locales/en.json
index 8ba3b3b..45082b4 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -19,8 +19,7 @@
     "back": "Back",
     "index-page": "Index Page",
     "about-page": "About Page",
-    "toggle-dark": "Toggle dark mode",
-    "toggle-locale": "Change languages",
+    "toggle-locale": "Toggle languages",
     "show-logo": "Show Logo",
     "hide-logo": "Hide Logo",
     "request": "Request"
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 7c292d2..105cbbd 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -20,7 +20,6 @@
     "back": "返回",
     "index-page": "首页",
     "about-page": "关于页面",
-    "toggle-dark": "切换暗色模式",
     "toggle-locale": "切换语言",
     "show-logo": "显示 Logo",
     "hide-logo": "隐藏 Logo",
diff --git a/src/pages/about.vue b/src/pages/about.vue
index 95b71e7..de0d0d8 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -10,16 +10,11 @@
 </route>
 
 <script lang="ts" setup>
-const route = useRoute()
-
 const { t } = useI18n()
 </script>
 
 <template>
   <h1 text-center text-lg font-bold mb-5>
-    {{ route.meta.title }}
+    {{ t('page.about.title') }}
   </h1>
-  <div flex justify-center items-center my-5>
-    {{ t('app.description') }}
-  </div>
 </template>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 1156ff1..ff59990 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -12,8 +12,6 @@
 <script lang="ts" setup>
 import type { TodoList } from '@/apis/todo'
 
-const route = useRoute()
-
 const { t } = useI18n()
 
 const todoList = ref<TodoList>([])
@@ -37,21 +35,21 @@ function fetchData() {
 </script>
 
 <template>
-  <h1 text-center text-lg font-bold mb-5>
-    {{ route.meta.title }}
-  </h1>
-  <div flex justify-center items-center my-5>
-    <TheButton :loading lh-4 @click="fetchData">
+  <div my-6 border-1 rd-1 border-color p-6>
+    {{ t('app.description') }}
+  </div>
+  <div border-1 rd-1 border-color p-6>
+    <TheButton mx-auto :loading @click="fetchData">
       {{ t('button.request') }}
     </TheButton>
+    <ul v-if="todoList && todoList.length > 0" my-5 h-30 overflow-y-auto>
+      <li v-for="item in todoList" :key="item.id" text-base lh-normal>
+        <input type="checkbox" accent-primary>
+        {{ item.title }}
+      </li>
+    </ul>
+    <p v-if="todoList.length === 0" text-center my-5 op-75>
+      {{ emptyText || t('empty') }}
+    </p>
   </div>
-  <ul v-if="todoList && todoList.length > 0" my-5 h-50 overflow-y-auto>
-    <li v-for="item in todoList" :key="item.id" text-base lh-normal>
-      <input type="checkbox" accent-primary>
-      {{ item.title }}
-    </li>
-  </ul>
-  <p v-if="todoList.length === 0" my-5 text-center op-75>
-    {{ emptyText || t('empty') }}
-  </p>
 </template>