From 9ff2ce2b88484d3ec8d30eca5c57f4e59d8f9981 Mon Sep 17 00:00:00 2001
From: CharleeWa <18888351756@163.com>
Date: Mon, 26 Aug 2024 16:20:12 +0800
Subject: [PATCH] feat: Add settings page (#121)

---
 src/locales/en-US.json       |  1 +
 src/locales/zh-CN.json       |  1 +
 src/pages/profile/index.vue  |  2 +-
 src/pages/settings/index.vue | 48 ++++++++++++++++++++++++++++++++++++
 src/styles/var.less          |  6 +++++
 src/typed-router.d.ts        |  1 +
 tsconfig.json                |  3 ++-
 vite.config.ts               |  1 +
 8 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/settings/index.vue

diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index becaeaa..74b7a2e 100644
--- a/src/locales/en-US.json
+++ b/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"
   },
diff --git a/src/locales/zh-CN.json b/src/locales/zh-CN.json
index 3069826..9111213 100644
--- a/src/locales/zh-CN.json
+++ b/src/locales/zh-CN.json
@@ -11,6 +11,7 @@
     "unocssExample": "🎨 Unocss 示例",
     "keepAlive": "🧡 KeepAlive 演示",
     "login": "🔒 用户登录",
+    "settings": "设置",
     "basicSettings": "基本设置",
     "exampleComponents": "示例组件"
   },
diff --git a/src/pages/profile/index.vue b/src/pages/profile/index.vue
index ea355e5..cee74dd 100644
--- a/src/pages/profile/index.vue
+++ b/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>
diff --git a/src/pages/settings/index.vue b/src/pages/settings/index.vue
new file mode 100644
index 0000000..0cc1ab0
--- /dev/null
+++ b/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>
diff --git a/src/styles/var.less b/src/styles/var.less
index 7a47fbb..2210dd1 100644
--- a/src/styles/var.less
+++ b/src/styles/var.less
@@ -1,3 +1,9 @@
+/**
+  注意：为什么要写两个重复的 :root？
+  由于 vant 中的主题变量也是在 :root 下声明的，所以在有些情况下会由于优先级的问题无法成功覆盖。
+  通过 :root:root 可以显式地让你所写内容的优先级更高一些，从而确保主题变量的成功覆盖。
+**/
+
 :root:root {
   // van-cell-group
   --van-cell-group-inset-padding: 0;
diff --git a/src/typed-router.d.ts b/src/typed-router.d.ts
index 68fb779..2bca44d 100644
--- a/src/typed-router.d.ts
+++ b/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>>,
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
index f10db3f..d4c5b40 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,7 +8,8 @@
     "module": "esnext",
     "moduleResolution": "Bundler",
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": ["src/*"],
+      "~root/*": ["./*"]
     },
     "types": [
       "node",
diff --git a/vite.config.ts b/vite.config.ts
index 8f2190c..8b5b7c1 100644
--- a/vite.config.ts
+++ b/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, '.'),
       },
     },