Translate the Settings page

src/components/Button/index.vue

@@ -74,6 +74,11 @@ const handleClick = () => {
   .button-icon + .button-text {
     margin-left: 4px;
   }
+
+  .button-text {
+    // 不换行
+    white-space: nowrap;
+  }
 }
 
 // 设置背景色

src/i18n/en.json

@@ -20,5 +20,16 @@
       "Keynote": "Keynote",
       "CompatibleApps": "Compatible Apps"
     }
+  },
+  "settings": {
+    "title": "Settings",
+    "subtitle": "System settings items",
+    "menuList": {
+      "DeveloperProfile": "Developer Profile",
+      "Language": "Language",
+      "Environments": "Environments",
+      "About": "About",
+      "Reward": "Reward"
+    }
   }
 }

src/i18n/zh.json

@@ -20,5 +20,16 @@
       "Keynote": "Keynote",
       "CompatibleApps": "兼容App"
     }
+  },
+  "settings": {
+    "title": "设置",
+    "subtitle": "系统设置项",
+    "menuList": {
+      "DeveloperProfile": "开发者",
+      "Language": "语言",
+      "Environments": "环境",
+      "About": "关于",
+      "Reward": "赞助"
+    }
   }
 }

src/router/index.ts

@@ -40,9 +40,9 @@ const router = createRouter({
           component: () => import('@/views/settings/profile.vue')
         },
         {
-          path: 'environment',
-          name: 'environment',
-          component: () => import('@/views/settings/environment.vue')
+          path: 'environments',
+          name: 'environments',
+          component: () => import('@/views/settings/environments.vue')
         }
       ]
     },

src/utils/getTime.ts

@@ -24,10 +24,10 @@ export function getLocalTime(zone: number) {
  */
 export function formatDate(date: Date) {
   const year = date.getFullYear()
-  const month = date.getMonth() + 1
-  const day = date.getDate()
-  const hour = date.getHours()
-  const minute = date.getMinutes()
-  const second = date.getSeconds()
+  const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
+  const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
+  const hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
+  const minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
+  const second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
   return `${year}-${month}-${day} ${hour}:${minute}:${second}`
 }

src/views/music/index.vue

@@ -144,9 +144,9 @@ defineOptions({
 // 定义标签项
 const tabs: Tab[] = [
   {
-    icon: 'play_circle_line',
-    name: 'Play',
-    path: '/music',
+    icon: 'home_3_fill',
+    name: 'Home',
+    path: '/home',
     active: false
   },
   {

src/views/photos/index.vue

@@ -7,6 +7,17 @@
           <div class="album-name ellipsis">{{ album.name }}</div>
         </div>
       </div>
+
+      <template v-slot:ornaments>
+        <Ornaments>
+          <div class="button-group">
+            <Button size="large" bg>Years</Button>
+            <Button size="large">Months</Button>
+            <Button size="large">Days</Button>
+            <Button size="large">All Photos</Button>
+          </div>
+        </Ornaments>
+      </template>
     </Window>
 
     <TabBar :tabs="tabs" />
@@ -17,6 +28,8 @@
 import { type Tab } from '@/types/tabBar'
 import Window from '@/components/Window/index.vue'
 import TabBar from '@/components/TabBar/index.vue'
+import Ornaments from '@/components/Ornaments/index.vue'
+import Button from '@/components/Button/index.vue'
 
 defineOptions({
   name: 'PhotosView'
@@ -174,4 +187,12 @@ const albums = [
     }
   }
 }
+
+.button-group {
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 4px;
+}
 </style>

src/views/safari/index.vue

@@ -51,7 +51,7 @@ defineOptions({
 
 // 这里暂时将 inputValue 设置为字符串，因为 ref 值的变动会导致 iframe 重新加载过于频繁
 // let inputValue = ref('https://barry-flynn.github.io/')
-const inputValue = 'https://barry-flynn.github.io/'
+let inputValue = 'https://barry-flynn.github.io/'
 </script>
 
 <style scoped lang="scss">

src/views/settings/index.vue

@@ -5,8 +5,8 @@
         <Side>
           <div class="top">
             <div class="left">
-              <div class="title">Settings</div>
-              <div class="desc">System settings items</div>
+              <div class="title">{{ t('settings.title') }}</div>
+              <div class="desc">{{ t('settings.subtitle') }}</div>
             </div>
             <div class="right">
               <Button icon="more_1_fill" bg />
@@ -35,32 +35,35 @@ import Main from '@/components/Container/Main.vue'
 import Menu from '@/components/Menu/index.vue'
 import Button from '@/components/Button/index.vue'
 import { RouterView } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
 // 菜单列表
 const menuList = [
   {
     icon: 'user_heart_line',
-    name: 'Developer Profile',
+    name: t('settings.menuList.DeveloperProfile'),
     path: '/settings/profile'
   },
   {
     icon: 'translate_2_line',
-    name: 'Language',
+    name: t('settings.menuList.Language'),
     path: '/settings'
   },
   {
     icon: 'pic_line',
-    name: 'Environment',
-    path: '/settings/environment'
+    name: t('settings.menuList.Environments'),
+    path: '/settings/environments'
   },
   {
     icon: 'alert_octagon_line',
-    name: 'About',
+    name: t('settings.menuList.About'),
     path: '/settings'
   },
   {
     icon: 'currency_dollar_line',
-    name: 'Reward',
+    name: t('settings.menuList.Reward'),
     path: '/settings'
   }
 ]