feat: 用户信息相关抽取到个人中心

ZvonimirSun · Mar 22, 2024 · 3d9df37 · 3d9df37
1 parent ffd26a8
commit 3d9df37
Show file tree

Hide file tree

Showing 3 changed files with 259 additions and 213 deletions.
diff --git a/src/tools/internal/index.ts b/src/tools/internal/index.ts
@@ -19,4 +19,10 @@ export const internalTools: ToolItem[] = [
       roles: ['superadmin'],
     },
   },
+  {
+    parent: '/settings',
+    name: '个人中心',
+    link: '/personalCenter',
+    requiresAuth: true,
+  },
 ]
diff --git a/src/tools/internal/settings.vue b/src/tools/internal/settings.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { FormInstance, FormRules } from 'element-plus'
-
 const router = useRouter()
 const route = useRoute()
 const styleStore = useGlobalStore()
@@ -11,38 +9,6 @@ const settings = computed(() => {
   return settingStore.general
 })
 
-const editingUser = ref(false)
-const ruleFormRef = ref<FormInstance>()
-const userForm = reactive({
-  nickName: '',
-  email: '',
-  passwd: '',
-  rePasswd: '',
-  oldPasswd: '',
-})
-const rules = reactive<FormRules<typeof userForm>>({
-  rePasswd: [{
-    validator: (rule: any, value: string, callback: (e?: Error) => void) => {
-      if (value && value !== userForm.passwd) {
-        callback(new Error('两次输入的密码不一致'))
-      }
-      else {
-        callback()
-      }
-    },
-  }],
-  oldPasswd: [{
-    validator: (rule: any, value: string, callback: (e?: Error) => void) => {
-      if (!value && (userForm.passwd || userForm.rePasswd)) {
-        callback(new Error('请输入旧密码'))
-      }
-      else {
-        callback()
-      }
-    },
-  }],
-})
-
 const clearOfflineCache = () => useMainStore().clearOfflineCache()
 
 function login() {
@@ -61,185 +27,35 @@ function register() {
 function logout() {
   router.push('/logout')
 }
-
-function editUser() {
-  userForm.nickName = userStore.profile.nickName ?? ''
-  userForm.email = userStore.profile.email ?? ''
-  userForm.passwd = ''
-  userForm.rePasswd = ''
-  userForm.oldPasswd = ''
-  editingUser.value = true
-}
-
-function cancelEditUser() {
-  editingUser.value = false
-}
-
-async function updateUser(formEl: FormInstance | undefined) {
-  if (!formEl) {
-    return
-  }
-  await formEl.validate(async (valid) => {
-    if (valid) {
-      const options: {
-        nickName?: string
-        email?: string
-        passwd?: string
-        oldPasswd?: string
-      } = {
-      }
-      if (userForm.nickName) {
-        options.nickName = userForm.nickName
-      }
-      if (userForm.email) {
-        options.email = userForm.email
-      }
-      if (userForm.passwd) {
-        options.passwd = userForm.passwd
-        options.oldPasswd = userForm.oldPasswd
-      }
-      if (Object.keys(options).length === 0) {
-        ElMessage.warning('没有需要修改的信息')
-        return
-      }
-      try {
-        await userStore.updateUser(options)
-      }
-      catch (e) {
-        ElMessage.error((e as Error).message)
-      }
-      editingUser.value = false
-    }
-    else {
-      ElMessage.warning('请检查输入')
-      return false
-    }
-  })
-}
 </script>
 
 <template>
-  <a-typography-title :level="3">
-    账户信息
+  <a-typography-title v-if="userStore.logged" :level="3">
+    {{ userStore.profile.nickName }} 欢迎你~
   </a-typography-title>
   <div
     v-if="userStore.logged"
-    flex flex-col items-start gap-4 text-7
+    flex items-center gap-4
   >
-    <div flex>
-      <div w-32>
-        昵称:
-      </div>
-      <div>
-        {{ userStore.profile.nickName }}
-      </div>
-    </div>
-    <div flex>
-      <div w-32>
-        邮箱:
-      </div>
-      <div>
-        {{ userStore.profile.email }}
-      </div>
-    </div>
-    <div flex>
-      <div w-32>
-        角色
-      </div>
-      <div>
-        {{ userStore.profile?.roles?.[0]?.alias ?? '注册用户' }}
-      </div>
-    </div>
-    <div
-      flex
-      gap-4
+    <el-button
+      type="primary"
+      @click="logout"
     >
-      <el-button
-        type="primary"
-        @click="logout"
-      >
-        登出
-      </el-button>
-      <HaveAccess
-        v-slot="{ goto }"
-        link="/userManager"
-      >
-        <el-button
-          type="primary"
-          @click="goto"
-        >
-          用户权限中心
-        </el-button>
-      </HaveAccess>
-      <el-button
-        v-if="!editingUser"
-        @click="editUser"
-      >
-        修改信息
+      登出
+    </el-button>
+    <router-link to="/personalCenter">
+      <el-button>
+        个人中心
       </el-button>
-      <template v-else>
-        <el-button
-          type="primary"
-          @click="updateUser(ruleFormRef)"
-        >
-          保存
-        </el-button>
-        <el-button @click="cancelEditUser">
-          取消
-        </el-button>
-      </template>
-    </div>
-    <el-form
-      v-if="editingUser"
-      ref="ruleFormRef"
-      :model="userForm"
-      :rules="rules"
-      label-width="8rem"
-      label-position="left"
+    </router-link>
+    <HaveAccess
+      v-slot="{ goto }"
+      link="/userManager"
     >
-      <el-form-item
-        label="昵称"
-        prop="nickName"
-      >
-        <el-input v-model="userForm.nickName" />
-      </el-form-item>
-      <el-form-item
-        label="邮箱"
-        prop="email"
-      >
-        <el-input v-model="userForm.email" />
-      </el-form-item>
-      <el-form-item
-        label="旧密码"
-        prop="oldPasswd"
-      >
-        <el-input
-          v-model="userForm.oldPasswd"
-          type="password"
-          autocomplete="off"
-        />
-      </el-form-item>
-      <el-form-item
-        label="新密码"
-        prop="passwd"
-      >
-        <el-input
-          v-model="userForm.passwd"
-          type="password"
-          autocomplete="off"
-        />
-      </el-form-item>
-      <el-form-item
-        label="确认密码"
-        prop="rePasswd"
-      >
-        <el-input
-          v-model="userForm.rePasswd"
-          type="password"
-          autocomplete="off"
-        />
-      </el-form-item>
-    </el-form>
+      <el-button @click="goto">
+        用户权限中心
+      </el-button>
+    </HaveAccess>
     <el-popconfirm
       title="您是否确定要清空本地缓存？"
       confirm-button-text="清空"
@@ -255,7 +71,7 @@ async function updateUser(formEl: FormInstance | undefined) {
       </template>
     </el-popconfirm>
   </div>
-  <el-space v-else>
+  <el-space v-else mt-4>
     <el-button
       type="primary"
       @click="login"
@@ -299,15 +115,9 @@ async function updateUser(formEl: FormInstance | undefined) {
           :model-value="settings.theme.mode"
           @change="styleStore.setTheme"
         >
-          <el-radio label="auto">
-            跟随系统
-          </el-radio>
-          <el-radio label="light">
-            浅色
-          </el-radio>
-          <el-radio label="dark">
-            深色
-          </el-radio>
+          <el-radio value="auto" label="跟随系统" />
+          <el-radio value="light" label="浅色" />
+          <el-radio value="dark" label="深色" />
         </el-radio-group>
       </el-space>
       <a-typography-title :level="5">
@@ -391,6 +201,10 @@ h5.ant-typography,
   }
 }
 
+.el-divider {
+  margin: .8rem 0;
+}
+
 .el-button + .el-button {
   margin: 0;
 }