feat: Add settings page (#121)

src/locales/en-US.json

@@ -11,6 +11,7 @@
     "unocssExample": "🎨 Unocss example",
     "keepAlive": "🧡 KeepAlive Demo",
     "login": "🔒 Login",
+    "settings": "Settings",
     "basicSettings": "Basic Settings",
     "exampleComponents": "Example components"
   },

src/locales/zh-CN.json

@@ -11,6 +11,7 @@
     "unocssExample": "🎨 Unocss 示例",
     "keepAlive": "🧡 KeepAlive 演示",
     "login": "🔒 用户登录",
+    "settings": "设置",
     "basicSettings": "基本设置",
     "exampleComponents": "示例组件"
   },

src/pages/profile/index.vue

@@ -31,7 +31,7 @@ function login() {
     </VanCellGroup>
 
     <VanCellGroup :inset="true" class="!mt-16">
-      <van-cell :title="$t('profile.settings')" icon="setting-o" is-link to="" />
+      <van-cell :title="$t('profile.settings')" icon="setting-o" is-link to="/settings" />
     </VanCellGroup>
   </div>
 </template>

src/pages/settings/index.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { showConfirmDialog } from 'vant'
+import router from '@/router'
+import { useUserStore } from '@/stores'
+import { version } from '~root/package.json'
+
+const userStore = useUserStore()
+const userInfo = computed(() => userStore.userInfo)
+
+function Logout() {
+  showConfirmDialog({
+    title: '确认退出？',
+  })
+    .then(() => {
+      userStore.logout()
+      router.push({ name: 'home' })
+    })
+    .catch(() => {})
+}
+</script>
+
+<template>
+  <div class="text-center">
+    <VanCellGroup :inset="true">
+      <van-cell v-if="userInfo.uid" title="退出登录" clickable class="van-text-color" @click="Logout" />
+    </VanCellGroup>
+
+    <div class="mt-10 text-gray">
+      当前版本: v{{ version }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.van-text-color {
+  --van-cell-text-color: var(--van-red);
+}
+</style>
+
+<route lang="json">
+{
+  "name": "settings",
+  "meta": {
+    "title": "我的设置",
+    "i18n": "menus.settings"
+  }
+}
+</route>

src/styles/var.less

@@ -1,3 +1,9 @@
+/**
+  注意：为什么要写两个重复的 :root？
+  由于 vant 中的主题变量也是在 :root 下声明的，所以在有些情况下会由于优先级的问题无法成功覆盖。
+  通过 :root:root 可以显式地让你所写内容的优先级更高一些，从而确保主题变量的成功覆盖。
+**/
+
 :root:root {
   // van-cell-group
   --van-cell-group-inset-padding: 0;

src/typed-router.d.ts

@@ -26,6 +26,7 @@ declare module 'vue-router/auto-routes' {
     'login': RouteRecordInfo<'login', '/login', Record<never, never>, Record<never, never>>,
     'mock': RouteRecordInfo<'mock', '/mock', Record<never, never>, Record<never, never>>,
     'profile': RouteRecordInfo<'profile', '/profile', Record<never, never>, Record<never, never>>,
+    'settings': RouteRecordInfo<'settings', '/settings', Record<never, never>, Record<never, never>>,
     'unocss': RouteRecordInfo<'unocss', '/unocss', Record<never, never>, Record<never, never>>,
   }
 }

tsconfig.json

@@ -8,7 +8,8 @@
     "module": "esnext",
     "moduleResolution": "Bundler",
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": ["src/*"],
+      "~root/*": ["./*"]
     },
     "types": [
       "node",

vite.config.ts

@@ -32,6 +32,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
         '~@': path.join(__dirname, './src'),
         '@': path.join(__dirname, './src'),
         '~': path.join(__dirname, './src/assets'),
+        '~root': path.join(__dirname, '.'),
       },
     },