feat: update ui design

starter-collective · Nov 1, 2024 · 8284e5f · 8284e5f
1 parent c6a598d
commit 8284e5f
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>