fix：增加用户中心，完成Apikey功能页，增加角色工具方法

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

@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+interface NavItem {
+  name: string;
+  label: string;
+  icon?: string;
+}
+
+interface Props {
+  modelValue: boolean;
+  title?: string;
+  width?: string;
+  navItems: NavItem[];
+  defaultActive?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '弹窗标题',
+  width: '800px',
+  defaultActive: '',
+});
+
+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 : ''));
+
+watch(() => props.modelValue, (val) => {
+  visible.value = val;
+});
+
+watch(() => props.defaultActive, (val) => {
+  if (val) {
+    activeNav.value = val;
+  }
+});
+
+function handleNavSelect(index: string) {
+  activeNav.value = index;
+  emit('nav-change', index);
+}
+
+function handleClose() {
+  visible.value = false;
+  emit('update:modelValue', false);
+  emit('close');
+}
+
+function handleConfirm() {
+  emit('confirm', activeNav.value);
+  handleClose();
+}
+</script>
+
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="title"
+    :width="width"
+    :before-close="handleClose"
+    class="nav-dialog"
+  >
+    <div class="dialog-container">
+      <!-- 左侧导航 -->
+      <div class="nav-side">
+        <el-menu
+          :default-active="activeNav"
+          class="nav-menu"
+          @select="handleNavSelect"
+        >
+          <el-menu-item
+            v-for="item in navItems"
+            :key="item.name"
+            :index="item.name"
+          >
+            <template #title>
+              <el-icon v-if="item.icon">
+                <component :is="item.icon" />
+              </el-icon>
+              <span>{{ item.label }}</span>
+            </template>
+          </el-menu-item>
+        </el-menu>
+      </div>
+
+      <!-- 右侧内容 -->
+      <div class="content-main">
+        <slot :name="activeNav" />
+        <div v-if="!$slots[activeNav]" class="empty-content">
+          <el-empty description="暂无内容" />
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" @click="handleConfirm">确定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.dialog-container {
+  display: flex;
+  height: 500px;
+}
+
+.nav-side {
+  width: 200px;
+  border-right: 1px solid #e6e6e6;
+}
+
+.nav-menu {
+  border-right: none;
+}
+
+.content-main {
+  flex: 1;
+  padding: 0 20px;
+  overflow: auto;
+}
+
+.empty-content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+</style>