feta

src/components/navbar/index.vue

@@ -81,7 +81,7 @@
           </a-button>
         </a-tooltip>
       </li>
-      <li>
+      <!-- <li>
         <a-tooltip :content="t('settings.title')">
           <a-button class="nav-btn" type="outline" :shape="'circle'" @click="setVisible">
             <template #icon>
@@ -89,13 +89,25 @@
             </template>
           </a-button>
         </a-tooltip>
-      </li>
+      </li> -->
       <li>
         <a-dropdown trigger="click">
           <a-avatar :size="32" :style="{ marginRight: '8px' }">
             <img alt="avatar" :src="avatar" />
           </a-avatar>
           <template #content>
+            <a-doption>
+              <a-space @click="handleOpenProfileChange">
+                <icon-user />
+                <span>个人资料</span>
+              </a-space>
+            </a-doption>
+            <a-doption>
+              <a-space @click="handleOpenPasswordChange">
+                <icon-lock />
+                <span>修改密码</span>
+              </a-space>
+            </a-doption>
             <a-doption>
               <a-space @click="handleLogout">
                 <icon-export />
@@ -108,6 +120,8 @@
         </a-dropdown>
       </li>
     </ul>
+    <PasswordChange v-model:open="passwordChangeVisible" />
+    <ProfileChange v-model:open="profileChangeVisible" />
   </div>
 </template>
 
@@ -121,6 +135,8 @@ import { useDark, useFullscreen, useToggle } from '@vueuse/core'
 import { computed, inject, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import MessageBox from '../message-box/index.vue'
+import PasswordChange from '../password-change/index.vue'
+import ProfileChange from '../profile-change/index.vue'
 
 const { t } = useI18n()
 
@@ -157,6 +173,8 @@ const setVisible = () => {
 }
 const refBtn = ref()
 const triggerBtn = ref()
+const passwordChangeVisible = ref(false)
+const profileChangeVisible = ref(false)
 const setPopoverVisible = () => {
   const event = new MouseEvent('click', {
     view: window,
@@ -168,6 +186,12 @@ const setPopoverVisible = () => {
 const handleLogout = () => {
   logout()
 }
+const handleOpenPasswordChange = () => {
+  passwordChangeVisible.value = true
+}
+const handleOpenProfileChange = () => {
+  profileChangeVisible.value = true
+}
 const setDropDownVisible = () => {
   const event = new MouseEvent('click', {
     view: window,

src/components/password-change/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="'修改密码'"
+    :width="400"
+    @cancel="handleClose"
+    @ok="handleSavePassword"
+    :ok-text="'保存'"
+    :cancel-text="'取消'"
+    :confirm-loading="loading"
+  >
+    <a-form :model="form" layout="vertical">
+      <a-form-item :label="'新密码'" field="newPassword" :required="true">
+        <a-input-password
+          v-model="form.newPassword"
+          :placeholder="'请输入新密码'"
+          allow-clear
+        />
+      </a-form-item>
+      
+      <a-form-item :label="'确认密码'" field="confirmPassword" :required="true">
+        <a-input-password
+          v-model="form.confirmPassword"
+          :placeholder="'请再次输入新密码'"
+          allow-clear
+        />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import { Message } from '@arco-design/web-vue';
+import { resetUserPassword } from '@/api/module/user';
+import SafeStorage, { AppStorageKey } from '@/utils/safeStorage';
+
+interface Props {
+  open: boolean;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void;
+}>();
+
+const loading = ref(false);
+const visible = ref(props.open);
+
+const form = ref({
+  newPassword: '',
+  confirmPassword: ''
+});
+
+// 监听 props.open 变化
+watch(() => props.open, (val) => {
+  visible.value = val;
+});
+
+// 监听 visible 变化，同步到父组件
+watch(visible, (val) => {
+  emit('update:open', val);
+});
+
+// 保存密码
+const handleSavePassword = async () => {
+  // 表单验证
+  if (!form.value.newPassword || !form.value.confirmPassword) {
+    Message.error('请填写新密码和确认密码');
+    return;
+  }
+  
+  if (form.value.newPassword.length < 6) {
+    Message.error('密码至少需要6个字符');
+    return;
+  }
+  
+  if (form.value.newPassword !== form.value.confirmPassword) {
+    Message.error('两次输入的密码不一致');
+    return;
+  }
+  
+  loading.value = true;
+  
+  try {
+    // 从 SafeStorage 获取登录用户信息
+    const userInfo = SafeStorage.get(AppStorageKey.USER_INFO) || {};
+    const res = await resetUserPassword({
+      account: userInfo.account || '',
+      code: '123456', // 暂时没校验，随便传
+      password: form.value.newPassword,
+      phone: userInfo.phone || '13800138000' // 暂时没校验，随便传
+    });
+    
+    if (res.code === 0) {
+      Message.success('密码修改成功');
+      handleClose();
+    } else {
+      Message.error(res.message || '密码修改失败');
+    }
+  } catch (error) {
+    console.error('修改密码失败:', error);
+    Message.error('密码修改失败，请稍后重试');
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 关闭弹窗
+const handleClose = () => {
+  form.value = {
+    newPassword: '',
+    confirmPassword: ''
+  };
+  visible.value = false;
+};
+</script>

src/components/profile-change/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="'个人资料'"
+    :width="400"
+    @cancel="handleClose"
+    @ok="handleSaveProfile"
+    :ok-text="'保存'"
+    :cancel-text="'取消'"
+    :confirm-loading="loading"
+  >
+    <a-form :model="form" layout="vertical">
+      <a-form-item :label="'账号'" field="account">
+        <a-input
+          v-model="form.account"
+          :placeholder="'账号'"
+          disabled
+        />
+      </a-form-item>
+      
+      <a-form-item :label="'姓名'" field="name">
+        <a-input
+          v-model="form.name"
+          :placeholder="'请输入姓名'"
+          allow-clear
+        />
+      </a-form-item>
+      
+      <a-form-item :label="'邮箱'" field="email">
+        <a-input
+          v-model="form.email"
+          :placeholder="'请输入邮箱'"
+          allow-clear
+        />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import { Message } from '@arco-design/web-vue';
+import { modifyUser } from '@/api/module/user';
+import SafeStorage, { AppStorageKey } from '@/utils/safeStorage';
+
+interface Props {
+  open: boolean;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void;
+}>();
+
+const loading = ref(false);
+const visible = ref(props.open);
+
+const form = ref({
+  account: '',
+  name: '',
+  email: ''
+});
+
+// 监听 props.open 变化
+watch(() => props.open, (val) => {
+  visible.value = val;
+  if (val) {
+    // 打开时从存储中获取用户信息
+    const userInfo = SafeStorage.get(AppStorageKey.USER_INFO) || {};
+    form.value = {
+      account: userInfo.account || '',
+      name: userInfo.name || '',
+      email: userInfo.email || ''
+    };
+  }
+});
+
+// 监听 visible 变化，同步到父组件
+watch(visible, (val) => {
+  emit('update:open', val);
+});
+
+// 保存个人资料
+const handleSaveProfile = async () => {
+  loading.value = true;
+  
+  try {
+    const userInfo = SafeStorage.get(AppStorageKey.USER_INFO) || {};
+    const updatedUserInfo = {
+      ...userInfo,
+      ...form.value,
+      id: userInfo.user_id
+    };
+    
+    const res = await modifyUser(updatedUserInfo);
+    
+    if (res.code === 0) {
+      Message.success('个人资料修改成功');
+      SafeStorage.set(AppStorageKey.USER_INFO, updatedUserInfo);
+      handleClose();
+    } else {
+      Message.error(res.message || '个人资料修改失败');
+    }
+  } catch (error) {
+    console.error('个人资料修改失败:', error);
+    Message.error('个人资料修改失败，请稍后重试');
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 关闭弹窗
+const handleClose = () => {
+  form.value = {
+    account: '',
+    name: '',
+    email: ''
+  };
+  visible.value = false;
+};
+</script>