From ddb00879f499d586e62ac5f66581f156758b069b Mon Sep 17 00:00:00 2001
From: Gsh <15170702455@163.com>
Date: Sat, 29 Nov 2025 16:43:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=A4=9Atoken?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Yi.Ai.Vue3/src/api/model/index.ts             |   76 +-
 .../components/APIKeyManagement.vue           | 1369 +++++++++++------
 .../components/TokenFormDialog.vue            |  352 +++++
 Yi.Ai.Vue3/types/components.d.ts              |    3 +
 Yi.Ai.Vue3/types/import_meta.d.ts             |    1 -
 5 files changed, 1292 insertions(+), 509 deletions(-)
 create mode 100644 Yi.Ai.Vue3/src/components/userPersonalCenter/components/TokenFormDialog.vue

diff --git a/Yi.Ai.Vue3/src/api/model/index.ts b/Yi.Ai.Vue3/src/api/model/index.ts
index e6da3f77..c3e9fff4 100644
--- a/Yi.Ai.Vue3/src/api/model/index.ts
+++ b/Yi.Ai.Vue3/src/api/model/index.ts
@@ -1,5 +1,5 @@
 import type { GetSessionListVO } from './types';
-import { get, post } from '@/utils/request';
+import { del, get, post, put } from '@/utils/request';
 
 // 获取当前用户的模型列表
 export function getModelList() {
@@ -28,3 +28,77 @@ export function getLast7DaysTokenUsage() {
 export function getModelTokenUsage() {
   return get<any>('/usage-statistics/model-token-usage').json();
 }
+
+// 以下为新增接口
+
+// 获取当前用户得token列表
+export function getTokenList() {
+  return get<any>('/token/list').json();
+}
+/*
+返回数据：
+[
+  {
+    "id": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+    "name": "string",
+    "apiKey": "string",
+    "expireTime": "2025-11-29T07:34:23.850Z",
+    "premiumQuotaLimit": 0,
+    "premiumUsedQuota": 0,
+    "isDisabled": true,
+    "creationTime": "2025-11-29T07:34:23.850Z"
+  }
+] */
+
+// 创建token
+export function createToken(data: any) {
+  return post<any>('/token', data).json();
+}
+/*
+data:
+{
+  "name": "string",
+  "expireTime": "2025-11-29T07:35:10.458Z",
+  "premiumQuotaLimit": 0
+} */
+/*
+返回：
+{
+  "id": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+  "name": "string",
+  "apiKey": "string",
+  "expireTime": "2025-11-29T07:35:10.459Z",
+  "premiumQuotaLimit": 0,
+  "premiumUsedQuota": 0,
+  "isDisabled": true,
+  "creationTime": "2025-11-29T07:35:10.459Z"
+} */
+
+// 编辑token
+export function editToken(data: any) {
+  return put('/token', data).json();
+}
+/*
+data:
+{
+  "id": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+  "name": "string",
+  "expireTime": "2025-11-29T07:36:49.589Z",
+  "premiumQuotaLimit": 0
+}
+*/
+
+// 删除token
+export function deleteToken(id: string) {
+  return del(`/token/${id}`).json();
+}
+
+// 启用token
+export function enableToken(id: string) {
+  return post(`/token/${id}/enable`).json();
+}
+
+// 禁用token
+export function disableToken(id: string) {
+  return post(`/token/${id}/disable`).json();
+}
diff --git a/Yi.Ai.Vue3/src/components/userPersonalCenter/components/APIKeyManagement.vue b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/APIKeyManagement.vue
index d229c51d..69222db2 100644
--- a/Yi.Ai.Vue3/src/components/userPersonalCenter/components/APIKeyManagement.vue
+++ b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/APIKeyManagement.vue
@@ -1,46 +1,75 @@
-<script lang="ts" setup xmlns="http://www.w3.org/1999/html">
-import { CircleCheck } from '@element-plus/icons-vue';
+<script lang="ts" setup>
+import { Plus, Refresh, Delete, Edit, View, Hide, DocumentCopy, Check, Close, Key } from '@element-plus/icons-vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { useRouter } from 'vue-router';
-import { applyApiKey, getApiKey } from '@/api/model/index.ts';
+import {
+  getTokenList,
+  createToken,
+  editToken,
+  deleteToken,
+  enableToken,
+  disableToken
+} from '@/api/model/index.ts';
 import { isUserVip } from '@/utils/user';
+import TokenFormDialog from './TokenFormDialog.vue';
 
-const apiKey = ref('');
-const showKey = ref(false);
-const loading = ref(true);
-const displayedKey = ref('');
-const showSuccessDialog = ref(false);
-const svg = `
-        <path class="path" d="
-          M 30 15
-          L 28 17
-          M 25.61 25.61
-          A 15 15, 0, 0, 1, 15 30
-          A 15 15, 0, 1, 1, 27.99 7.5
-          L 15 15
-        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
-      `;
-const isOpening = ref(false);
-const confettis = ref<any[]>([]);
+interface TokenItem {
+  id: string;
+  name: string;
+  apiKey: string;
+  expireTime: string | null;
+  premiumQuotaLimit: number | null;
+  premiumUsedQuota: number | null;
+  isDisabled: boolean;
+  creationTime: string | null;
+  showKey?: boolean;
+}
+
+interface TokenFormData {
+  id?: string;
+  name: string;
+  expireTime: string;
+  premiumQuotaLimit: number;
+  quotaUnit: string;
+}
+
+const tokenList = ref<TokenItem[]>([]);
+const loading = ref(false);
+const showFormDialog = ref(false);
+const formMode = ref<'create' | 'edit'>('create');
+const currentFormData = ref<TokenFormData>({
+  name: '',
+  expireTime: '',
+  premiumQuotaLimit: 0,
+  quotaUnit: '万'
+});
 const router = useRouter();
 
-// 获取API密钥
-async function fetchApiKey() {
+// 防抖和节流控制
+const operatingTokenId = ref<string>('');
+
+// 获取Token列表
+async function fetchTokenList() {
   try {
-    const res = await getApiKey();
-    if (res.data?.apiKey) {
-      apiKey.value = res.data.apiKey;
-      displayedKey.value = res.data.apiKey;
+    loading.value = true;
+    const res = await getTokenList();
+    if (res.data) {
+      tokenList.value = res.data.map((item: TokenItem) => ({
+        ...item,
+        showKey: false
+      }));
     }
-  }
-  catch (error) {
-    console.error('获取API密钥失败:', error);
+  } catch (error) {
+    console.error('获取Token列表失败:', error);
+    ElMessage.error('获取Token列表失败');
+  } finally {
+    loading.value = false;
   }
 }
 
-// 领取密钥
-async function handleClaim() {
+// 显示新增对话框
+function showCreateDialog() {
   if (!isUserVip()) {
     ElMessageBox.confirm(
       `
@@ -64,594 +93,920 @@ async function handleClaim() {
     )
       .then(() => {
         router.push({
-          name: 'products', // 使用命名路由
-          query: { from: 'user' }, // 可选：添加来源标识
+          name: 'products',
+          query: { from: 'user' },
         });
       })
-      .catch(() => {
-        // 点击右上角关闭或“关闭”按钮，不执行任何操作
-      });
+      .catch(() => {});
     return;
   }
-  if (isOpening.value)
-    return;
+
+  formMode.value = 'create';
+  currentFormData.value = {
+    name: '',
+    expireTime: '',
+    premiumQuotaLimit: 0,
+    quotaUnit: '万'
+  };
+  showFormDialog.value = true;
+}
+
+// 显示编辑对话框
+function showEditDialog(token: TokenItem) {
+  formMode.value = 'edit';
+  currentFormData.value = {
+    id: token.id,
+    name: token.name,
+    expireTime: token.expireTime,
+    premiumQuotaLimit: token.premiumQuotaLimit,
+    quotaUnit: '万'
+  };
+  showFormDialog.value = true;
+}
+
+// 处理表单提交（带防抖）
+async function handleFormSubmit(data: TokenFormData) {
+  if (loading.value) return;
 
   try {
-    isOpening.value = true;
-    generateConfetti();
-
     loading.value = true;
-    await applyApiKey();
-    await fetchApiKey();
+    const submitData = {
+      id: data.id,
+      name: data.name,
+      expireTime: data.expireTime || null,
+      premiumQuotaLimit: data.premiumQuotaLimit || 0
+    };
 
-    showSuccessDialog.value = true;
-  }
-  catch (error) {
-    console.error('领取失败:', error);
-    ElMessage.error('领取失败，请稍后重试');
-  }
-  finally {
+    if (formMode.value === 'create') {
+      await createToken(submitData);
+      ElMessage.success('Token创建成功');
+    } else {
+      await editToken(submitData);
+      ElMessage.success('Token更新成功');
+    }
+
+    showFormDialog.value = false;
+    await fetchTokenList();
+  } catch (error) {
+    console.error('操作失败:', error);
+    ElMessage.error(formMode.value === 'create' ? '创建Token失败' : '编辑Token失败');
+  } finally {
     loading.value = false;
-    setTimeout(() => isOpening.value = false, 1000);
   }
 }
 
-// 重置密钥
-async function handleReset() {
+// 删除Token（带防抖）
+async function handleDelete(row: TokenItem) {
+  if (operatingTokenId.value === row.id) return;
+
   try {
-    await ElMessageBox.confirm('确定要重置API密钥吗？原密钥将立即失效', '提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    });
-    loading.value = true;
-    await applyApiKey(); // 使用相同的申请接口重置
-    await fetchApiKey();
-    ElMessage.success('API密钥已重置');
-  }
-  catch (error) {
+    await ElMessageBox.confirm(
+      `确定要删除 Token "${row.name}" 吗？删除后将无法恢复`,
+      '删除确认',
+      {
+        confirmButtonText: '确定删除',
+        cancelButtonText: '取消',
+        type: 'warning',
+        confirmButtonClass: 'el-button--danger'
+      }
+    );
+
+    operatingTokenId.value = row.id;
+    await deleteToken(row.id);
+    ElMessage.success('Token已删除');
+    await fetchTokenList();
+  } catch (error) {
     if (error !== 'cancel') {
-      ElMessage.error('重置失败');
+      ElMessage.error('删除失败');
     }
+  } finally {
+    operatingTokenId.value = '';
   }
-  finally {
-    loading.value = false;
+}
+
+// 启用/禁用Token（带防抖）
+async function handleToggle(row: TokenItem) {
+  if (operatingTokenId.value === row.id) return;
+
+  try {
+    operatingTokenId.value = row.id;
+    if (row.isDisabled) {
+      await enableToken(row.id);
+      ElMessage.success(`Token "${row.name}" 已启用`);
+    } else {
+      await disableToken(row.id);
+      ElMessage.success(`Token "${row.name}" 已禁用`);
+    }
+    await fetchTokenList();
+  } catch (error) {
+    console.error('操作失败:', error);
+    ElMessage.error('操作失败');
+  } finally {
+    operatingTokenId.value = '';
   }
 }
 
 // 切换密钥显示状态
-function toggleKeyVisibility() {
-  showKey.value = !showKey.value;
+function toggleKeyVisibility(row: TokenItem) {
+  row.showKey = !row.showKey;
 }
 
 // 复制API密钥
-function copyApiKey() {
-  navigator.clipboard.writeText(apiKey.value || '')
-    .then(() => ElMessage.success('已复制到剪贴板'))
+function copyApiKey(apiKey: string, name: string) {
+  navigator.clipboard.writeText(apiKey)
+    .then(() => ElMessage.success(`已复制 "${name}" 的API密钥`))
     .catch(() => ElMessage.error('复制失败'));
 }
 
-// 生成随机彩带
-function generateConfetti() {
-  const colors = ['#ff9a9e', '#fad0c4', '#fbc2eb', '#a6c1ee', '#a18cd1', '#fdcbf1'];
-  const newConfettis = [];
+// 格式化日期
+function formatDateTime(dateStr: string | null | undefined) {
+  if (!dateStr) return '-';
+  const date = new Date(dateStr);
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+}
 
-  for (let i = 0; i < 30; i++) {
-    newConfettis.push({
-      style: {
-        left: `${50 + (Math.random() - 0.5) * 30}%`,
-        backgroundColor: colors[Math.floor(Math.random() * colors.length)],
-        width: `${6 + Math.random() * 6}px`,
-        height: `${6 + Math.random() * 6}px`,
-        transform: `rotate(${Math.random() * 360}deg)`,
-        animationDuration: `${1 + Math.random() * 2}s`,
-        animationDelay: `${Math.random() * 0.5}s`,
-      },
-    });
+// 格式化配额数字
+function formatQuota(num: number | null | undefined): string {
+  if (num == null || num === 0) return '0';
+  if (num >= 100000000) {
+    return `${(num / 100000000).toFixed(2).replace(/\.?0+$/, '')} 亿`;
   }
+  if (num >= 10000) {
+    return `${(num / 10000).toFixed(2).replace(/\.?0+$/, '')} 万`;
+  }
+  if (num >= 1000) {
+    return `${(num / 1000).toFixed(2).replace(/\.?0+$/, '')} 千`;
+  }
+  return num.toString();
+}
 
-  confettis.value = newConfettis;
-  setTimeout(() => confettis.value = [], 2000);
+// 计算配额使用百分比
+function getQuotaPercentage(used: number | null | undefined, limit: number | null | undefined) {
+  if (limit == null || limit === 0 || used == null) return 0;
+  return Math.min((used / limit) * 100, 100);
+}
+
+// 获取配额状态颜色
+function getQuotaColor(percentage: number) {
+  if (percentage >= 90) return '#f56c6c';
+  if (percentage >= 70) return '#e6a23c';
+  return '#67c23a';
+}
+
+// 处理排序
+function handleSortChange({ prop, order }: { prop: string; order: string | null }) {
+  // 这里可以根据需要实现客户端排序或服务端排序
+}
+
+// 是否有Token
+const hasTokens = computed(() => tokenList.value.length > 0);
+const totalCount = computed(() => tokenList.value.length);
+
+// 检查按钮是否正在操作
+function isOperating(tokenId: string) {
+  return operatingTokenId.value === tokenId;
 }
 
 onMounted(async () => {
-  await fetchApiKey();
-  loading.value = false;
+  await fetchTokenList();
 });
 </script>
 
 <template>
-  <div
-    v-loading="loading"
-    class="api-key-management"
-    element-loading-text="Loading..."
-    :element-loading-spinner="svg"
-    element-loading-svg-view-box="-10, -10, 50, 50"
-    element-loading-background="rgba(122, 122, 122, 0.8)"
-  >
-    <!-- 未领取状态 -->
-    <div v-if="!apiKey" class="unclaimed-state">
-      <div class="gift-container" @click="handleClaim">
-        <div class="gift-box" :class="{ opening: isOpening }">
-          <div class="gift-lid" />
-          <div class="gift-body">
-            <div class="ribbon-horizontal" />
-            <div class="ribbon-vertical" />
-            <div class="ribbon-bow">
-              <div class="bow-left" />
-              <div class="bow-right" />
-              <div class="bow-center" />
-            </div>
+  <el-card v-loading="loading" class="token-management-card" shadow="never">
+    <template #header>
+      <div class="card-header">
+        <div class="header-left">
+          <div class="header-icon-wrapper">
+            <el-icon class="header-icon">
+              <Key />
+            </el-icon>
+          </div>
+          <div class="header-text">
+            <span class="header-title">API Token 管理中心</span>
+            <span class="header-subtitle">管理您的 API 访问密钥，每个 Token 拥有独立的配额和使用统计</span>
           </div>
         </div>
-        <div
-          v-for="(confetti, index) in confettis" :key="index" class="confetti"
-          :style="confetti.style"
-        />
+        <div class="header-right">
+          <el-tag v-if="totalCount > 0" type="primary" size="large" class="count-tag" effect="light">
+            <el-icon><i-ep-files /></el-icon>
+            共 <span class="count-number">{{ totalCount }}</span> 个
+          </el-tag>
+        </div>
       </div>
-      <div class="claim-text">
-        <h3>🎁 尊享会员专属福利 🎁</h3>
-        <h3>
-          YiXinAi重磅推出专属Api接入服务
-        </h3>
-        <h3>YiXinAI-Vip 限时免费领取</h3>
-        <p>点击礼盒领取您的专属API密钥</p>
-      </div>
-    </div>
-    <!-- 已领取状态 -->
-    <div v-else-if="apiKey" class="claimed-state">
-      <h3 class="key-title">
-        🎉 恭喜您已获得专属API密钥 🎉
-      </h3>
+    </template>
 
-      <div class="key-display">
-        <el-input
-          v-model="displayedKey"
-          :type="showKey ? 'text' : 'password'"
-          readonly
-          class="key-input"
-        >
-          <template #append>
-            <el-button-group>
-              <el-button
-                :icon="showKey ? 'Hide' : 'View'"
-                @click="toggleKeyVisibility"
-              />
-              <el-button
-                icon="DocumentCopy"
-                @click="copyApiKey"
-              />
-            </el-button-group>
-          </template>
-        </el-input>
-      </div>
-
-      <div class="key-actions">
-        <el-button type="warning" @click="handleReset">
-          重置密钥
+    <!-- 工具栏 -->
+    <div class="toolbar">
+      <div class="toolbar-left">
+        <el-button type="primary" :icon="Plus" size="default" @click="showCreateDialog">
+          新增 Token
+        </el-button>
+      </div>
+      <div class="toolbar-right">
+        <el-button :icon="Refresh" size="default" @click="fetchTokenList">
+          刷新列表
         </el-button>
-        <p class="key-hint">
-          重置后原密钥将立即失效
-        </p>
       </div>
     </div>
-  </div>
-  <!-- 使用说明 -->
-  <div v-if="apiKey" class="usage-guide">
-    <el-divider />
 
-    <div class="max-w-4xl mx-auto p-4 space-y-4">
-      <!-- 标题链接 -->
-      <h1 class="text-2xl font-bold text-gray-800 hover:text-blue-600 transition-colors">
+    <!-- Token列表 -->
+    <div v-if="hasTokens" class="token-table-wrapper">
+      <el-table
+        :data="tokenList"
+        stripe
+        border
+        class="token-table"
+        empty-text="暂无数据"
+        :header-cell-style="{ background: '#fafafa', color: '#262626', fontWeight: '600' }"
+        @sort-change="handleSortChange"
+      >
+        <el-table-column
+          prop="name"
+          label="Token 名称"
+          min-width="180"
+          sortable
+          show-overflow-tooltip
+          align="left"
+          header-align="left"
+          resizable
+        >
+          <template #default="{ row }">
+            <div class="name-cell">
+              <div class="name-icon-bg">
+                <el-icon class="name-icon">
+                  <i-ep-price-tag />
+                </el-icon>
+              </div>
+              <span class="name-text">{{ row.name }}</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="API 密钥"
+          min-width="300"
+          align="left"
+          header-align="left"
+          resizable
+        >
+          <template #default="{ row }">
+            <div class="key-cell">
+              <div class="key-content">
+                <el-icon class="key-icon"><i-ep-key /></el-icon>
+                <span class="key-text">
+                  {{ row.showKey ? row.apiKey : '••••••••••••••••••••••••••••••••' }}
+                </span>
+              </div>
+              <div class="key-actions">
+                <el-button
+                  :icon="row.showKey ? Hide : View"
+                  size="small"
+                  text
+                  @click="toggleKeyVisibility(row)"
+                >
+                  {{ row.showKey ? '隐藏' : '查看' }}
+                </el-button>
+                <el-button
+                  :icon="DocumentCopy"
+                  size="small"
+                  type="primary"
+                  text
+                  @click="copyApiKey(row.apiKey, row.name)"
+                >
+                  复制
+                </el-button>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="配额使用情况"
+          min-width="220"
+          align="center"
+          header-align="center"
+          resizable
+        >
+          <template #default="{ row }">
+            <div class="quota-cell">
+              <div class="quota-info">
+                <span class="quota-used">{{ formatQuota(row.premiumUsedQuota) }}</span>
+                <span class="quota-separator">/</span>
+                <span class="quota-total">
+                  {{ (row.premiumQuotaLimit == null || row.premiumQuotaLimit === 0) ? '∞ 无限' : formatQuota(row.premiumQuotaLimit) }}
+                </span>
+              </div>
+              <el-progress
+                v-if="row.premiumQuotaLimit != null && row.premiumQuotaLimit > 0"
+                :percentage="getQuotaPercentage(row.premiumUsedQuota, row.premiumQuotaLimit)"
+                :color="getQuotaColor(getQuotaPercentage(row.premiumUsedQuota, row.premiumQuotaLimit))"
+                :stroke-width="6"
+                :show-text="true"
+                class="quota-progress"
+              />
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="过期时间"
+          min-width="180"
+          prop="expireTime"
+          sortable
+          align="center"
+          header-align="center"
+          resizable
+        >
+          <template #default="{ row }">
+            <div v-if="row.expireTime" class="time-cell">
+              <el-icon class="time-icon"><i-ep-timer /></el-icon>
+              <span>{{ formatDateTime(row.expireTime) }}</span>
+            </div>
+            <el-tag v-else type="success" size="default" effect="light" class="never-expire-tag">
+              <el-icon><i-ep-circle-check /></el-icon>
+              永不过期
+            </el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="状态"
+          width="110"
+          prop="isDisabled"
+          sortable
+          align="center"
+          header-align="center"
+          resizable
+        >
+          <template #default="{ row }">
+            <el-tag
+              :type="row.isDisabled ? 'danger' : 'success'"
+              effect="light"
+              size="default"
+              class="status-tag"
+            >
+              <el-icon>
+                <i-ep-circle-close v-if="row.isDisabled" />
+                <i-ep-circle-check v-else />
+              </el-icon>
+              {{ row.isDisabled ? '已禁用' : '已启用' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="创建时间"
+          min-width="180"
+          prop="creationTime"
+          sortable
+          align="center"
+          header-align="center"
+          resizable
+        >
+          <template #default="{ row }">
+            <div class="time-cell">
+              <el-icon class="time-icon"><i-ep-clock /></el-icon>
+              <span>{{ formatDateTime(row.creationTime) }}</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="操作"
+          width="300"
+          fixed="right"
+          align="center"
+          header-align="center"
+        >
+          <template #default="{ row }">
+            <div class="action-buttons">
+              <el-button
+                size="small"
+                :icon="Edit"
+                @click="showEditDialog(row)"
+              >
+                编辑
+              </el-button>
+              <el-button
+                size="small"
+                :type="row.isDisabled ? 'success' : 'warning'"
+                :icon="row.isDisabled ? Check : Close"
+                :loading="isOperating(row.id)"
+                @click="handleToggle(row)"
+              >
+                {{ row.isDisabled ? '启用' : '禁用' }}
+              </el-button>
+              <el-button
+                size="small"
+                type="danger"
+                :icon="Delete"
+                :loading="isOperating(row.id)"
+                @click="handleDelete(row)"
+              >
+                删除
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 空状态 -->
+    <div v-else-if="!loading" class="empty-container">
+      <el-empty description="暂无Token，点击下方按钮创建您的第一个 API Token">
+        <el-button type="primary" size="large" :icon="Plus" @click="showCreateDialog">
+          创建第一个 Token
+        </el-button>
+      </el-empty>
+    </div>
+  </el-card>
+
+  <!-- 使用说明 -->
+  <el-card v-if="hasTokens" class="usage-guide-card" shadow="never">
+    <template #header>
+      <div class="guide-header">
+        <div class="guide-icon-wrapper">
+          <el-icon class="guide-icon">
+            <i-ep-reading />
+          </el-icon>
+        </div>
+        <span class="guide-title">使用说明</span>
+      </div>
+    </template>
+
+    <div class="guide-content">
+      <h1 class="guide-main-title">
         <a
           href="https://ccnetcore.com/article/3a1bc4d1-6a7d-751d-91cc-2817eb2ddcde"
           target="_blank"
-          class="flex items-center gap-2 group"
-          style="color: #E6A23C;"
-          title="点击跳转玩法指南专栏"
+          class="guide-link"
         >
           【意心Ai】AI工具玩法指南
-          <span class="text-sm text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity">
-            → 点击查看完整指南
-          </span>
+          <el-icon class="link-icon"><i-ep-top-right /></el-icon>
         </a>
       </h1>
 
-      <!-- iframe 容器（关键修复部分） -->
-      <div class="relative w-full overflow-auto rounded-xl shadow-lg border border-gray-200 bg-gray-50">
-        <!-- 自适应缩放 iframe -->
+      <div class="iframe-container">
         <iframe
           src="https://ccnetcore.com/article/3a1bc4d1-6a7d-751d-91cc-2817eb2ddcde"
-          class="min-w-full iframe-responsive scale-100  duration-300"
+          class="guide-iframe"
           loading="lazy"
           sandbox="allow-scripts allow-same-origin allow-popups"
-          @load="document.querySelector('.iframe-loading')?.remove()"
         />
       </div>
     </div>
+  </el-card>
 
-    <div v-if="false" class="guide-content">
-      <p><strong>API地址：</strong>https://ai.ccnetcore.com</p>
-      <p><strong>密钥：</strong>上面申请的token</p>
-      <p><strong>模型：</strong>聊天界面显示的模型名称</p>
-    </div>
-
-    <div v-if="false" class="guide-images">
-      <el-image
-        style="max-width: 100%; margin: 10px 0;"
-        src="/images/api_usage_instructions.png"
-        fit="contain"
-      />
-    </div>
-  </div>
-
-  <!-- 领取成功弹窗 -->
-  <el-dialog
-    v-model="showSuccessDialog"
-    title="领取成功"
-    width="400px"
-    :show-close="false"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-  >
-    <div class="success-dialog">
-      <el-icon color="#67C23A" :size="60">
-        <CircleCheck />
-      </el-icon>
-      <p class="success-message">
-        恭喜您成功领取API密钥！
-      </p>
-      <p class="success-tip">
-        请妥善保管您的密钥
-      </p>
-    </div>
-    <template #footer>
-      <el-button type="primary" @click="showSuccessDialog = false">
-        确定
-      </el-button>
-    </template>
-  </el-dialog>
+  <!-- Token表单对话框 -->
+  <TokenFormDialog
+    v-model:visible="showFormDialog"
+    :mode="formMode"
+    :form-data="currentFormData"
+    @confirm="handleFormSubmit"
+  />
 </template>
 
-<style scoped>
-.api-key-management {
-  padding:5px 20px;
-  max-width: 800px;
-  margin: 0 auto;
-  min-height: 200px;
+<style scoped lang="scss">
+/* 卡片样式 - 现代化设计 */
+.token-management-card {
+  border-radius: 12px;
+  border: 1px solid #e8e8e8;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  margin-bottom: 24px;
+  overflow: hidden;
+
+  &:hover {
+    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
+  }
+
+  :deep(.el-card__header) {
+    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+    border-bottom: 1px solid #e8e8e8;
+    padding: 24px 28px;
+  }
+
+  :deep(.el-card__body) {
+    padding: 28px;
+  }
 }
 
-/* iframe 响应式高度 */
-.iframe-responsive {
-  height: 60vh;
-  min-height: 400px;
-  max-height: 800px;
-}
-
-/* 未领取状态样式 */
-.unclaimed-state {
-  text-align: center;
-  margin: 40px 0;
-}
-
-.gift-box {
-  position: relative;
-  width: 180px;
-  height: 180px;
-  margin: 0 auto 30px;
-  cursor: pointer;
-  transition: transform 0.3s;
-}
-
-.gift-box:hover {
-  transform: scale(1.05);
-}
-
-.gift-lid {
-  position: absolute;
-  width: 180px;
-  height: 40px;
-  background: #E74C3C;
-  top: -20px;
-  left: 0;
-  border-radius: 4px 4px 0 0;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-}
-
-.gift-body {
-  position: absolute;
-  width: 180px;
-  height: 140px;
-  background: #C0392B;
-  top: 20px;
-  left: 0;
-  border-radius: 0 0 4px 4px;
-  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
-}
-
-.ribbon {
-  position: absolute;
-  width: 40px;
-  height: 100%;
-  background: #F1C40F;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.gift-label {
-  position: absolute;
-  bottom: -30px;
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   width: 100%;
-  text-align: center;
-  font-weight: bold;
-  color: #E74C3C;
 }
 
-.claim-hint {
-  margin-top: 20px;
-  font-size: 16px;
-  color: #E74C3C;
-  font-weight: bold;
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
 }
 
-/* 已领取状态样式 */
-.claimed-state {
-  margin: 30px 0;
-  padding: 30px;
-  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-  border-radius: 16px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-}
-
-.key-title {
-  text-align: center;
-  color: #333;
-  margin-bottom: 30px;
-  font-size: 22px;
-  font-weight: 600;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.key-display {
-  margin: 20px 0;
-  padding: 20px;
-  background: white;
+.header-icon-wrapper {
+  width: 48px;
+  height: 48px;
   border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
 }
 
-.key-input {
-  font-family: 'Courier New', monospace;
-  font-size: 14px;
+.header-icon {
+  font-size: 24px;
+  color: #ffffff;
 }
 
-.key-input :deep(.el-input__inner) {
-  font-weight: 600;
-  letter-spacing: 1px;
+.header-text {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
-/* 添加按钮间距 */
-.action-btn {
-  margin-left: 4px;
-}
-
-/* 或者直接设置最后一个按钮的左边距 */
-.key-input :deep(.el-input-group__append .el-button + .el-button) {
-  margin-left: 4px;
-}
-
-.key-actions {
-  text-align: center;
-  margin-top: 30px;
-  padding: 20px;
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}
-
-.key-hint {
-  color: #999;
-  font-size: 14px;
-  margin-top: 12px;
-  font-style: italic;
-}
-
-/* 使用说明样式 */
-.usage-guide {
-  margin-top: 10px;
-  padding: 10px 20px;
-  background: white;
-  border-radius: 16px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-}
-
-.guide-content {
-  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
-  padding: 20px;
-  border-radius: 8px;
-  line-height: 1.8;
-  border-left: 4px solid #409eff;
-}
-
-/* 成功弹窗样式 */
-.success-dialog {
-  text-align: center;
-  padding: 30px 0;
-}
-
-.success-message {
+.header-title {
   font-size: 20px;
+  font-weight: 700;
+  color: #262626;
+  letter-spacing: -0.5px;
+}
+
+.header-subtitle {
+  font-size: 13px;
+  color: #8c8c8c;
+  line-height: 1.5;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.count-tag {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 20px;
   font-weight: 600;
-  color: #333;
-  margin: 20px 0 10px;
+  font-size: 14px;
+  border-radius: 24px;
+  border: 2px solid #e6f4ff;
+
+  .el-icon {
+    font-size: 16px;
+  }
+
+  .count-number {
+    font-size: 18px;
+    font-weight: 700;
+    color: #1890ff;
+  }
 }
 
-.success-tip {
-  color: #666;
-  font-size: 15px;
-  margin-top: 8px;
+/* 工具栏 */
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding: 16px 20px;
+  background: #fafafa;
+  border-radius: 8px;
+  border: 1px solid #f0f0f0;
 }
 
-/* 未领取状态样式 */
-.unclaimed-state {
-  text-align: center;
-  margin: 40px 0;
-  padding: 40px;
-  perspective: 600px;
-  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
-  border-radius: 20px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+.toolbar-left,
+.toolbar-right {
+  display: flex;
+  gap: 12px;
 }
 
-.gift-container {
-  position: relative;
-  width: 180px;
-  height: 180px;
-  margin: 0 auto 30px;
-  cursor: pointer;
-  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
+/* 表格样式 */
+.token-table-wrapper {
+  margin-bottom: 0;
+  border-radius: 8px;
+  overflow: hidden;
 }
 
-.gift-box {
-  position: relative;
+.token-table {
   width: 100%;
-  height: 100%;
-  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-  transform-style: preserve-3d;
+
+  :deep(.el-table__body) {
+    tr {
+      transition: all 0.2s;
+
+      &:hover {
+        background-color: #fafafa !important;
+      }
+    }
+  }
 }
 
-.gift-box:hover:not(.opening) {
-  transform: translateY(-10px) scale(1.05);
+.name-cell {
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
-.gift-box.opening .gift-lid {
-  transform: rotateX(180deg) translateY(-30px);
-  opacity: 0;
+.name-icon-bg {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #e6f4ff 0%, #bae0ff 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
-.gift-lid {
-  position: absolute;
-  width: 150px;
-  height: 30px;
-  background: linear-gradient(135deg, #ff7676, #e74c3c);
-  top: -15px;
-  left: 0;
-  border-radius: 8px 8px 0 0;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  transform-origin: bottom;
-  z-index: 2;
+.name-icon {
+  font-size: 16px;
+  color: #1890ff;
 }
 
-.gift-body {
-  position: absolute;
-  width: 150px;
-  height: 120px;
-  background: linear-gradient(135deg, #e74c3c, #c0392b);
-  top: 15px;
-  left: 0;
-  border-radius: 0 0 8px 8px;
-  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
-  z-index: 1;
+.name-text {
+  font-weight: 600;
+  color: #262626;
+  font-size: 14px;
 }
 
-.ribbon-horizontal {
-  position: absolute;
-  width: 100%;
-  height: 12px;
-  background: rgba(255,255,255,0.3);
-  top: 50%;
-  transform: translateY(-50%);
+.key-cell {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 0 8px;
 }
 
-.ribbon-vertical {
-  position: absolute;
-  width: 12px;
-  height: 100%;
-  background: rgba(255,255,255,0.3);
-  left: 50%;
-  transform: translateX(-50%);
+.key-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
 }
 
-.ribbon-bow {
-  position: absolute;
-  top: -10px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 3;
+.key-icon {
+  font-size: 16px;
+  color: #8c8c8c;
+  flex-shrink: 0;
 }
 
-.bow-left, .bow-right {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  background: linear-gradient(135deg, #f1c40f, #f39c12);
-  border-radius: 50%;
-}
-
-.bow-left {
-  left: -25px;
-  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
-}
-
-.bow-right {
-  left: 5px;
-  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
-}
-
-.bow-center {
-  position: absolute;
-  width: 12px;
-  height: 30px;
-  background: linear-gradient(135deg, #f1c40f, #f39c12);
-  left: -6px;
-  top: 10px;
+.key-text {
+  flex: 1;
+  font-family: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+  font-size: 13px;
+  color: #595959;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: #fafafa;
+  padding: 6px 12px;
   border-radius: 6px;
 }
 
-.confetti {
-  position: absolute;
-  width: 8px;
-  height: 8px;
-  background: #f1c40f;
-  top: 50%;
-  left: 50%;
-  opacity: 0;
-  animation: confetti-fall 2s ease-out forwards;
-  z-index: 10;
+.key-actions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
 }
 
-@keyframes confetti-fall {
-  0% {
-    transform: translate(0, 0) rotate(0deg);
-    opacity: 1;
-  }
-  100% {
-    transform: translate(var(--tx), 200px) rotate(360deg);
-    opacity: 0;
-    --tx: calc((var(--random) - 0.5) * 200px);
-  }
+.quota-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 8px 0;
 }
 
-.claim-text {
-  margin-top: 30px;
-  padding: 20px;
-  background: rgba(255, 255, 255, 0.9);
-  border-radius: 12px;
-  backdrop-filter: blur(10px);
+.quota-info {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  justify-content: center;
+  font-size: 14px;
 }
 
-.claim-text h3 {
-  color: #e74c3c;
-  margin-bottom: 15px;
-  font-size: 20px;
-  font-weight: 600;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.claim-text p {
-  color: #555;
+.quota-used {
+  font-weight: 700;
+  color: #1890ff;
   font-size: 15px;
+}
+
+.quota-separator {
+  color: #bfbfbf;
+}
+
+.quota-total {
+  color: #595959;
   font-weight: 500;
 }
+
+.quota-progress {
+  width: 100%;
+
+  :deep(.el-progress__text) {
+    font-size: 12px !important;
+    font-weight: 700;
+  }
+}
+
+.time-cell {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  justify-content: center;
+  color: #595959;
+  font-size: 13px;
+}
+
+.time-icon {
+  font-size: 14px;
+  color: #8c8c8c;
+  flex-shrink: 0;
+}
+
+.never-expire-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 600;
+}
+
+.status-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 600;
+  padding: 4px 12px;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+/* 空状态 */
+.empty-container {
+  padding: 80px 0;
+  text-align: center;
+
+  :deep(.el-empty__description) {
+    color: #8c8c8c;
+    font-size: 14px;
+  }
+}
+
+/* 使用说明卡片 */
+.usage-guide-card {
+  border-radius: 12px;
+  border: 1px solid #e8e8e8;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+
+  &:hover {
+    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
+  }
+
+  :deep(.el-card__header) {
+    background: linear-gradient(135deg, #fff7e6 0%, #ffffff 100%);
+    border-bottom: 1px solid #e8e8e8;
+    padding: 20px 28px;
+  }
+
+  :deep(.el-card__body) {
+    padding: 24px 28px;
+  }
+}
+
+.guide-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.guide-icon-wrapper {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #ffc069 0%, #fa8c16 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(250, 140, 22, 0.3);
+}
+
+.guide-icon {
+  font-size: 20px;
+  color: #ffffff;
+}
+
+.guide-title {
+  font-size: 17px;
+  font-weight: 700;
+  color: #262626;
+}
+
+.guide-content {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.guide-main-title {
+  margin: 0;
+}
+
+.guide-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #fa8c16;
+  text-decoration: none;
+  transition: all 0.3s;
+  padding: 8px 0;
+
+  &:hover {
+    color: #fa541c;
+
+    .link-icon {
+      transform: translate(3px, -3px);
+    }
+  }
+}
+
+.link-icon {
+  font-size: 18px;
+  transition: transform 0.3s;
+}
+
+.iframe-container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 8px;
+  border: 1px solid #f0f0f0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.guide-iframe {
+  width: 100%;
+  height: 60vh;
+  min-height: 400px;
+  max-height: 800px;
+  border: none;
+}
+
+/* 响应式布局 */
+@media (max-width: 768px) {
+  .card-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+
+  .header-right {
+    width: 100%;
+  }
+
+  .count-tag {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .toolbar {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .toolbar-left,
+  .toolbar-right {
+    width: 100%;
+
+    .el-button {
+      flex: 1;
+    }
+  }
+
+  .action-buttons {
+    flex-direction: column;
+
+    .el-button {
+      width: 100%;
+    }
+  }
+}
 </style>
diff --git a/Yi.Ai.Vue3/src/components/userPersonalCenter/components/TokenFormDialog.vue b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/TokenFormDialog.vue
new file mode 100644
index 00000000..d65c549c
--- /dev/null
+++ b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/TokenFormDialog.vue
@@ -0,0 +1,352 @@
+<script lang="ts" setup>
+import { ref, watch, computed } from 'vue';
+import { ElMessage } from 'element-plus';
+
+interface TokenFormData {
+  id?: string;
+  name: string;
+  expireTime: string;
+  premiumQuotaLimit: number;
+  quotaUnit: string;
+}
+
+interface Props {
+  visible: boolean;
+  mode: 'create' | 'edit';
+  formData?: TokenFormData;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  mode: 'create',
+  formData: () => ({
+    name: '',
+    expireTime: '',
+    premiumQuotaLimit: 0,
+    quotaUnit: '万'
+  })
+});
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean];
+  'confirm': [data: TokenFormData];
+}>();
+
+const localFormData = ref<TokenFormData>({
+  name: '',
+  expireTime: '',
+  premiumQuotaLimit: 0,
+  quotaUnit: '万'
+});
+
+const submitting = ref(false);
+const neverExpire = ref(false); // 永不过期开关
+const unlimitedQuota = ref(false); // 无限制额度开关
+
+const quotaUnitOptions = [
+  { label: '个', value: '个', multiplier: 1 },
+  { label: '十', value: '十', multiplier: 10 },
+  { label: '百', value: '百', multiplier: 100 },
+  { label: '千', value: '千', multiplier: 1000 },
+  { label: '万', value: '万', multiplier: 10000 },
+  { label: '亿', value: '亿', multiplier: 100000000 }
+];
+
+// 监听visible变化，重置表单
+watch(() => props.visible, (newVal) => {
+  if (newVal) {
+    if (props.mode === 'edit' && props.formData) {
+      // 编辑模式：转换后端数据为展示数据
+      const quota = props.formData.premiumQuotaLimit || 0;
+      let displayValue = quota;
+      let unit = '个';
+
+      // 判断是否无限制
+      unlimitedQuota.value = quota === 0;
+
+      if (!unlimitedQuota.value) {
+        // 自动选择合适的单位
+        if (quota >= 100000000 && quota % 100000000 === 0) {
+          displayValue = quota / 100000000;
+          unit = '亿';
+        } else if (quota >= 10000 && quota % 10000 === 0) {
+          displayValue = quota / 10000;
+          unit = '万';
+        } else if (quota >= 1000 && quota % 1000 === 0) {
+          displayValue = quota / 1000;
+          unit = '千';
+        } else if (quota >= 100 && quota % 100 === 0) {
+          displayValue = quota / 100;
+          unit = '百';
+        } else if (quota >= 10 && quota % 10 === 0) {
+          displayValue = quota / 10;
+          unit = '十';
+        }
+      }
+
+      // 判断是否永不过期
+      neverExpire.value = !props.formData.expireTime;
+
+      localFormData.value = {
+        ...props.formData,
+        premiumQuotaLimit: displayValue,
+        quotaUnit: unit
+      };
+    } else {
+      // 新增模式：重置表单
+      localFormData.value = {
+        name: '',
+        expireTime: '',
+        premiumQuotaLimit: 1,
+        quotaUnit: '万'
+      };
+      neverExpire.value = false;
+      unlimitedQuota.value = false;
+    }
+    submitting.value = false;
+  }
+});
+
+// 监听永不过期开关
+watch(neverExpire, (newVal) => {
+  if (newVal) {
+    localFormData.value.expireTime = '';
+  }
+});
+
+// 监听无限制开关
+watch(unlimitedQuota, (newVal) => {
+  if (newVal) {
+    localFormData.value.premiumQuotaLimit = 0;
+  }
+});
+
+// 关闭对话框
+function handleClose() {
+  if (submitting.value) return;
+  emit('update:visible', false);
+}
+
+// 确认提交
+async function handleConfirm() {
+  if (!localFormData.value.name.trim()) {
+    ElMessage.warning('请输入Token名称');
+    return;
+  }
+
+  if (!neverExpire.value && !localFormData.value.expireTime) {
+    ElMessage.warning('请选择过期时间');
+    return;
+  }
+
+  if (!unlimitedQuota.value && localFormData.value.premiumQuotaLimit <= 0) {
+    ElMessage.warning('请输入有效的配额限制');
+    return;
+  }
+
+  submitting.value = true;
+
+  try {
+    // 将展示值转换为实际值
+    let actualQuota = 0;
+    if (!unlimitedQuota.value) {
+      const unit = quotaUnitOptions.find(u => u.value === localFormData.value.quotaUnit);
+      actualQuota = localFormData.value.premiumQuotaLimit * (unit?.multiplier || 1);
+    }
+
+    const submitData: TokenFormData = {
+      ...localFormData.value,
+      expireTime: neverExpire.value ? '' : localFormData.value.expireTime,
+      premiumQuotaLimit: actualQuota
+    };
+
+    emit('confirm', submitData);
+  } finally {
+    // 注意：这里不设置 submitting.value = false
+    // 因为父组件会关闭对话框，watch会重置状态
+  }
+}
+
+const dialogTitle = computed(() => props.mode === 'create' ? '新增 Token' : '编辑 Token');
+</script>
+
+<template>
+  <el-dialog
+    :model-value="visible"
+    :title="dialogTitle"
+    width="540px"
+    :close-on-click-modal="false"
+    :show-close="!submitting"
+    @close="handleClose"
+  >
+    <el-form :model="localFormData" label-width="110px" label-position="right">
+      <el-form-item label="Token名称" required>
+        <el-input
+          v-model="localFormData.name"
+          placeholder="例如：生产环境、测试环境、开发环境"
+          maxlength="50"
+          show-word-limit
+          clearable
+          :disabled="submitting"
+        >
+          <template #prefix>
+            <el-icon><i-ep-collection-tag /></el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="过期时间">
+        <div class="form-item-with-switch">
+          <el-switch
+            v-model="neverExpire"
+            active-text="永不过期"
+            :disabled="submitting"
+            class="expire-switch"
+          />
+          <el-date-picker
+            v-if="!neverExpire"
+            v-model="localFormData.expireTime"
+            type="datetime"
+            placeholder="选择过期时间"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DDTHH:mm:ss"
+            style="width: 100%"
+            clearable
+            :disabled="submitting"
+            :disabled-date="(time: Date) => time.getTime() < Date.now()"
+          >
+            <template #prefix>
+              <el-icon><i-ep-clock /></el-icon>
+            </template>
+          </el-date-picker>
+        </div>
+        <div v-if="!neverExpire" class="form-hint">
+          <el-icon><i-ep-warning /></el-icon>
+          Token将在过期时间后自动失效
+        </div>
+      </el-form-item>
+
+      <el-form-item label="配额限制">
+        <div class="form-item-with-switch">
+          <el-switch
+            v-model="unlimitedQuota"
+            active-text="无限制"
+            :disabled="submitting"
+            class="quota-switch"
+          />
+          <div v-if="!unlimitedQuota" class="quota-input-group">
+            <el-input-number
+              v-model="localFormData.premiumQuotaLimit"
+              :min="1"
+              :precision="0"
+              :controls="true"
+              controls-position="right"
+              placeholder="请输入配额"
+              class="quota-number"
+              :disabled="submitting"
+            />
+            <el-select
+              v-model="localFormData.quotaUnit"
+              class="quota-unit"
+              placeholder="单位"
+              :disabled="submitting"
+            >
+              <el-option
+                v-for="option in quotaUnitOptions"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              />
+            </el-select>
+          </div>
+        </div>
+        <div v-if="!unlimitedQuota" class="form-hint">
+          <el-icon><i-ep-info-filled /></el-icon>
+          超出配额后Token将无法继续使用
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleClose" :disabled="submitting">
+          取消
+        </el-button>
+        <el-button
+          type="primary"
+          @click="handleConfirm"
+          :loading="submitting"
+          :disabled="submitting"
+        >
+          {{ mode === 'create' ? '创建' : '保存' }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped lang="scss">
+.form-item-with-switch {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.expire-switch,
+.quota-switch {
+  --el-switch-on-color: #67c23a;
+}
+
+.quota-input-group {
+  display: flex;
+  gap: 10px;
+  width: 100%;
+}
+
+.quota-number {
+  flex: 1;
+
+  :deep(.el-input__wrapper) {
+    width: 100%;
+  }
+}
+
+.quota-unit {
+  width: 100px;
+}
+
+.form-hint {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+  padding: 8px 12px;
+  font-size: 13px;
+  color: #606266;
+  background: #f4f4f5;
+  border-radius: 6px;
+  border-left: 3px solid #409eff;
+
+  .el-icon {
+    font-size: 14px;
+    color: #409eff;
+    flex-shrink: 0;
+  }
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 600;
+  color: #303133;
+}
+
+:deep(.el-input__prefix) {
+  color: #909399;
+}
+</style>
diff --git a/Yi.Ai.Vue3/types/components.d.ts b/Yi.Ai.Vue3/types/components.d.ts
index ecb90f84..fb2be6a1 100644
--- a/Yi.Ai.Vue3/types/components.d.ts
+++ b/Yi.Ai.Vue3/types/components.d.ts
@@ -34,6 +34,7 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
@@ -41,6 +42,7 @@ declare module 'vue' {
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
@@ -69,6 +71,7 @@ declare module 'vue' {
     SupportModelList: typeof import('./../src/components/userPersonalCenter/components/SupportModelList.vue')['default']
     SvgIcon: typeof import('./../src/components/SvgIcon/index.vue')['default']
     SystemAnnouncementDialog: typeof import('./../src/components/SystemAnnouncementDialog/index.vue')['default']
+    TokenFormDialog: typeof import('./../src/components/userPersonalCenter/components/TokenFormDialog.vue')['default']
     UsageStatistics: typeof import('./../src/components/userPersonalCenter/components/UsageStatistics.vue')['default']
     UserManagement: typeof import('./../src/components/userPersonalCenter/components/UserManagement.vue')['default']
     VerificationCode: typeof import('./../src/components/LoginDialog/components/FormLogin/VerificationCode.vue')['default']
diff --git a/Yi.Ai.Vue3/types/import_meta.d.ts b/Yi.Ai.Vue3/types/import_meta.d.ts
index d8a60d41..b3e9d275 100644
--- a/Yi.Ai.Vue3/types/import_meta.d.ts
+++ b/Yi.Ai.Vue3/types/import_meta.d.ts
@@ -6,7 +6,6 @@ interface ImportMetaEnv {
   readonly VITE_WEB_ENV: string;
   readonly VITE_WEB_BASE_API: string;
   readonly VITE_API_URL: string;
-  readonly VITE_BUILD_COMPRESS: string;
   readonly VITE_SSO_SEVER_URL: string;
   readonly VITE_APP_VERSION: string;
 }