feat: 个人设置

index.html

@@ -8,7 +8,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
-    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4711453_vbf79y4vtuk.css" />
+    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4711453_a5ytfgvaagl.css" />
     <title>Model Link</title>
   </head>
 

src/layout/components/sidebar/sidebar.vue

@@ -2,9 +2,8 @@
 import { computed, h, ref, watchEffect } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { Plus } from '@icon-park/vue-next'
+import { Plus, Logout, Me } from '@icon-park/vue-next'
 import type { MenuOption } from 'naive-ui'
-import CustomIcon from '@/components/custom-icon/custom-icon.vue'
 import { useUserStore } from '@/store/modules/user'
 // import LanguageSetting from '@/components/language-setting/language-setting.vue'
 
@@ -46,12 +45,17 @@ const menuOptions = computed<MenuOption[]>(() => {
   ]
 })
 
-const avatarOptions = computed(() => {
+const userConfigOptions = computed(() => {
   return [
     {
-      label: () => h('div', {}, t('common_module.logout')),
-      key: 'logout',
-      icon: () => h(CustomIcon, { icon: 'teenyicons:logout-solid' }),
+      label: () => h('div', '个人设置'),
+      key: 'PersonalSettings',
+      icon: () => h(Me, { theme: 'outline', size: 14, strokeWidth: 3 }),
+    },
+    {
+      label: () => h('div', t('common_module.logout')),
+      key: 'Logout',
+      icon: () => h(Logout, { theme: 'outline', size: 14, strokeWidth: 3 }),
     },
   ]
 })
@@ -64,8 +68,8 @@ function handleToPersonAppSettingPage() {
   router.push({ name: 'PersonalAppSetting' })
 }
 
-function handleDropdownSelect(key: string) {
-  if (key === 'logout') {
+function handleUserConfigOptionsSelect(key: string) {
+  if (key === 'Logout') {
     userStore.logout().then(() => {
       router.push({ name: 'Login' })
     })
@@ -119,28 +123,28 @@ function handleMenuValueChange(key: string) {
 
     <div class="mb-[20px] mt-6">
       <div>
-        <NDropdown
+        <n-dropdown
           v-if="userStore.isLogin"
           trigger="click"
           placement="top"
-          :options="avatarOptions"
-          @select="handleDropdownSelect"
+          :options="userConfigOptions"
+          @select="handleUserConfigOptionsSelect"
         >
           <div
             class="flex h-full cursor-pointer items-center rounded-[6px] px-[12px] py-[4px] transition hover:bg-[#F3F3F5]"
           >
-            <NAvatar round :size="40" object-fit="cover" :src="userStore.userInfo.avatarUrl || defaultAvatar" />
+            <n-avatar round :size="40" object-fit="cover" :src="userStore.userInfo.avatarUrl || defaultAvatar" />
 
-            <div class="ml-3 line-clamp-1 max-w-[140px] select-none break-all text-base">
+            <div class="ml-3 line-clamp-1 max-w-[140px] flex-1 select-none break-all text-base">
               {{ userStore.userInfo.nickName || t('common_module.not_login_text') }}
             </div>
           </div>
-        </NDropdown>
+        </n-dropdown>
 
         <div v-else>
-          <NButton type="primary" class="w-full! rounded-md!" @click="handleToLogin">
+          <n-button type="primary" class="w-full! rounded-md!" @click="handleToLogin">
             {{ t('common_module.login_now') }}
-          </NButton>
+          </n-button>
         </div>
       </div>
 
@@ -152,16 +156,16 @@ function handleMenuValueChange(key: string) {
 </template>
 
 <style lang="scss">
-.v-binder-follower-container {
-  .n-dropdown-menu {
-    --n-border-radius: 10px !important;
-    --n-box-shadow: -3px 3px 4px 0px #f2f2f2 !important;
-
-    padding: 6px 0 !important;
-  }
-
-  .n-dropdown-menu .n-dropdown-option-body {
-    padding: 0 10px;
-  }
-}
+// .v-binder-follower-container {
+//   .n-dropdown-menu {
+//     --n-border-radius: 10px !important;
+//     --n-box-shadow: -3px 3px 4px 0px #f2f2f2 !important;
+
+//     padding: 6px 0 !important;
+//   }
+
+//   .n-dropdown-menu .n-dropdown-option-body {
+//     padding: 0 10px;
+//   }
+// }
 </style>

src/router/modules/personal-settings.ts

+import { type RouteRecordRaw } from 'vue-router'
+import Layout from '@/layout/index.vue'
+
+export default [
+  {
+    path: '/personal/settings',
+    meta: {
+      rank: 1001,
+      title: '',
+    },
+    component: Layout,
+    children: [
+      {
+        path: '',
+        name: 'PersonalSettings',
+        meta: {
+          rank: 1001,
+          title: 'router_title_module.personal_settings',
+        },
+        component: () => import('@/views/personal-settings/personal-settings.vue'),
+      },
+    ],
+  },
+] as RouteRecordRaw[]

src/store/modules/system-language.ts

@@ -23,10 +23,10 @@ const defaultLanguageOptions = [
     label: '中文繁體',
     key: 'zh-HK',
   },
-  // {
-  //   label: 'English',
-  //   key: 'en',
-  // },
+  {
+    label: 'English',
+    key: 'en',
+  },
 ]
 
 const localeKey = ss.get('i18nextLng') || defaultLocale

src/store/modules/user.ts

@@ -9,6 +9,8 @@ function createDefaultUserInfoFactory(): UserInfo {
     avatarUrl: '',
     nickName: '',
     mobilePhone: '',
+    remark: '',
+    email: '',
   }
 }
 

src/store/types/user.ts

@@ -3,6 +3,8 @@ export interface UserInfo {
   mobilePhone: string
   nickName: string
   avatarUrl: string
+  remark: string
+  email: string
 }
 
 export interface UserState {

src/views/login/login.vue

@@ -93,7 +93,7 @@ const emailLoginFormRules = shallowReadonly<FormRules>({
 const phoneNumberAreaOptions = computed(() => {
   return [
     {
-      label: `+86 ${t('login_module.mainland_china')}`,
+      label: `+86⠀${t('login_module.mainland_china')}`,
       value: '+86',
     },
     {

types/locales.d.ts

@@ -167,6 +167,7 @@ declare namespace I18n {
       multi_model_dialogue: string
       explore: string
       application_square: string
+      personal_settings: string
     }
 
     personal_space_module: {