fix: 个人中心优化

Yi.Ai.Vue3/src/components/userPersonalCenter/NavDialog.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { FullScreen } from '@element-plus/icons-vue';
 import { ref, watch } from 'vue';
 
 interface NavItem {
@@ -17,7 +18,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   title: '弹窗标题',
-  width: '1000px',
+  width: '75%',
   defaultActive: '',
 });
 
@@ -25,9 +26,13 @@ const emit = defineEmits(['update:modelValue', 'confirm', 'close', 'nav-change']
 
 const visible = ref(false);
 const activeNav = ref(props.defaultActive || (props.navItems.length > 0 ? props.navItems[0].name : ''));
+const isFullscreen = ref(false);
 
 watch(() => props.modelValue, (val) => {
   visible.value = val;
+  if (!val) {
+    isFullscreen.value = false; // 关闭时重置全屏状态
+  }
 });
 
 watch(() => props.defaultActive, (val) => {
@@ -51,17 +56,46 @@ function handleConfirm() {
   emit('confirm', activeNav.value);
   handleClose();
 }
+
+function toggleFullscreen() {
+  isFullscreen.value = !isFullscreen.value;
+}
 </script>
 
 <template>
   <el-dialog
-
     v-model="visible"
     :title="title"
-    :width="width"
+    :width="isFullscreen ? '100%' : width"
     :before-close="handleClose"
+    :fullscreen="isFullscreen"
+    :top="isFullscreen ? '0' : '5vh'"
     class="nav-dialog"
   >
+    <template #header="{ titleId, titleClass }">
+      <div class="dialog-header">
+        <h4 :id="titleId" :class="titleClass">
+          {{ title }}
+        </h4>
+        <!--        全屏按钮暂不做 -->
+        <div v-if="false" class="header-actions">
+          <slot name="extra-actions" />
+          <el-button
+            circle
+            plain
+            size="small"
+            class="fullscreen-btn"
+            :title="isFullscreen ? '退出全屏' : '全屏'"
+            @click="toggleFullscreen"
+          >
+            <el-icon>
+              <FullScreen />
+            </el-icon>
+          </el-button>
+        </div>
+      </div>
+    </template>
+
     <div class="dialog-container">
       <!-- 左侧导航 -->
       <div class="nav-side">
@@ -104,24 +138,52 @@ function handleConfirm() {
 </template>
 
 <style scoped>
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.fullscreen-btn {
+  transition: all 0.3s;
+}
+
+.fullscreen-btn:hover {
+  transform: scale(1.1);
+}
+
 .dialog-container {
   display: flex;
-  height: 500px;
+  height: 70vh;
+  min-height: 500px;
+}
+
+:deep(.el-dialog.is-fullscreen) .dialog-container {
+  height: calc(100vh - 120px);
 }
 
 .nav-side {
   width: 200px;
   border-right: 1px solid #e6e6e6;
+  flex-shrink: 0;
 }
 
 .nav-menu {
   border-right: none;
+  height: 100%;
 }
 
 .content-main {
   flex: 1;
   padding: 0 20px;
   overflow: auto;
+  min-width: 0;
 }
 
 .empty-content {