diff --git a/src/routes/admin.js b/src/routes/admin.js
index fe1ffd8b..49000f8f 100644
--- a/src/routes/admin.js
+++ b/src/routes/admin.js
@@ -534,7 +534,8 @@ router.post('/api-keys', authenticateAdmin, async (req, res) => {
       weeklyOpusCostLimit,
       tags,
       activationDays, // 新增：激活后有效天数
-      expirationMode // 新增：过期模式
+      expirationMode, // 新增：过期模式
+      icon // 新增：图标（base64编码）
     } = req.body
 
     // 输入验证
@@ -660,7 +661,8 @@ router.post('/api-keys', authenticateAdmin, async (req, res) => {
       weeklyOpusCostLimit,
       tags,
       activationDays,
-      expirationMode
+      expirationMode,
+      icon
     })
 
     logger.success(`🔑 Admin created new API key: ${name}`)
@@ -696,7 +698,8 @@ router.post('/api-keys/batch', authenticateAdmin, async (req, res) => {
       weeklyOpusCostLimit,
       tags,
       activationDays,
-      expirationMode
+      expirationMode,
+      icon
     } = req.body
 
     // 输入验证
@@ -742,7 +745,8 @@ router.post('/api-keys/batch', authenticateAdmin, async (req, res) => {
           weeklyOpusCostLimit,
           tags,
           activationDays,
-          expirationMode
+          expirationMode,
+          icon
         })
 
         // 保留原始 API Key 供返回
@@ -985,7 +989,8 @@ router.put('/api-keys/:keyId', authenticateAdmin, async (req, res) => {
       dailyCostLimit,
       weeklyOpusCostLimit,
       tags,
-      ownerId // 新增：所有者ID字段
+      ownerId, // 新增：所有者ID字段
+      icon // 新增：图标（base64编码）
     } = req.body
 
     // 只允许更新指定字段
@@ -1159,6 +1164,19 @@ router.put('/api-keys/:keyId', authenticateAdmin, async (req, res) => {
       updates.tags = tags
     }
 
+    // 处理图标
+    if (icon !== undefined) {
+      // icon 可以是空字符串（清除图标）或 base64 编码的字符串
+      if (icon !== '' && typeof icon !== 'string') {
+        return res.status(400).json({ error: 'Icon must be a string' })
+      }
+      // 简单验证 base64 格式（如果不为空）
+      if (icon && !icon.startsWith('data:image/')) {
+        return res.status(400).json({ error: 'Icon must be a valid base64 image' })
+      }
+      updates.icon = icon
+    }
+
     // 处理活跃/禁用状态状态, 放在过期处理后，以确保后续增加禁用key功能
     if (isActive !== undefined) {
       if (typeof isActive !== 'boolean') {
diff --git a/src/services/apiKeyService.js b/src/services/apiKeyService.js
index 8ee94337..4291d51d 100644
--- a/src/services/apiKeyService.js
+++ b/src/services/apiKeyService.js
@@ -36,7 +36,8 @@ class ApiKeyService {
       weeklyOpusCostLimit = 0,
       tags = [],
       activationDays = 0, // 新增：激活后有效天数（0表示不使用此功能）
-      expirationMode = 'fixed' // 新增：过期模式 'fixed'(固定时间) 或 'activation'(首次使用后激活)
+      expirationMode = 'fixed', // 新增：过期模式 'fixed'(固定时间) 或 'activation'(首次使用后激活)
+      icon = '' // 新增：图标（base64编码）
     } = options
 
     // 生成简单的API Key (64字符十六进制)
@@ -78,7 +79,8 @@ class ApiKeyService {
       expiresAt: expirationMode === 'fixed' ? expiresAt || '' : '', // 固定模式才设置过期时间
       createdBy: options.createdBy || 'admin',
       userId: options.userId || '',
-      userUsername: options.userUsername || ''
+      userUsername: options.userUsername || '',
+      icon: icon || '' // 新增：图标（base64编码）
     }
 
     // 保存API Key数据并建立哈希映射
@@ -410,7 +412,8 @@ class ApiKeyService {
         'tags',
         'userId', // 新增：用户ID（所有者变更）
         'userUsername', // 新增：用户名（所有者变更）
-        'createdBy' // 新增：创建者（所有者变更）
+        'createdBy', // 新增：创建者（所有者变更）
+        'icon' // 新增：图标（base64编码）
       ]
       const updatedData = { ...keyData }
 
diff --git a/web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue b/web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue
index 7c19cdfc..340ac507 100644
--- a/web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue
+++ b/web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue
@@ -110,19 +110,23 @@
               class="mb-1.5 block text-xs font-semibold text-gray-700 dark:text-gray-300 sm:mb-2 sm:text-sm"
               >名称 <span class="text-red-500">*</span></label
             >
-            <input
-              v-model="form.name"
-              class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
-              :class="{ 'border-red-500': errors.name }"
-              :placeholder="
-                form.createType === 'batch'
-                  ? '输入基础名称（将自动添加序号）'
-                  : '为您的 API Key 取一个名称'
-              "
-              required
-              type="text"
-              @input="errors.name = ''"
-            />
+            <div class="flex items-center gap-2">
+              <!-- 图标选择器 -->
+              <IconPicker v-model="form.icon" size="medium" />
+              <input
+                v-model="form.name"
+                class="form-input flex-1 border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
+                :class="{ 'border-red-500': errors.name }"
+                :placeholder="
+                  form.createType === 'batch'
+                    ? '输入基础名称（将自动添加序号）'
+                    : '为您的 API Key 取一个名称'
+                "
+                required
+                type="text"
+                @input="errors.name = ''"
+              />
+            </div>
             <p v-if="errors.name" class="mt-1 text-xs text-red-500 dark:text-red-400">
               {{ errors.name }}
             </p>
@@ -807,6 +811,7 @@ import { useClientsStore } from '@/stores/clients'
 import { useApiKeysStore } from '@/stores/apiKeys'
 import { apiClient } from '@/config/api'
 import AccountSelector from '@/components/common/AccountSelector.vue'
+import IconPicker from '@/components/common/IconPicker.vue'
 
 const props = defineProps({
   accounts: {
@@ -853,6 +858,7 @@ const form = reactive({
   createType: 'single',
   batchCount: 10,
   name: '',
+  icon: '',
   description: '',
   rateLimitWindow: '',
   rateLimitRequests: '',
@@ -1198,7 +1204,8 @@ const createApiKey = async () => {
       // 单个创建
       const data = {
         ...baseData,
-        name: form.name
+        name: form.name,
+        icon: form.icon || ''
       }
 
       const result = await apiClient.post('/admin/api-keys', data)
@@ -1216,7 +1223,8 @@ const createApiKey = async () => {
         ...baseData,
         createType: 'batch',
         baseName: form.name,
-        count: form.batchCount
+        count: form.batchCount,
+        icon: form.icon || ''
       }
 
       const result = await apiClient.post('/admin/api-keys/batch', data)
diff --git a/web/admin-spa/src/components/apikeys/EditApiKeyModal.vue b/web/admin-spa/src/components/apikeys/EditApiKeyModal.vue
index 07d9eaa5..1bada0a5 100644
--- a/web/admin-spa/src/components/apikeys/EditApiKeyModal.vue
+++ b/web/admin-spa/src/components/apikeys/EditApiKeyModal.vue
@@ -32,14 +32,18 @@
               class="mb-1.5 block text-xs font-semibold text-gray-700 dark:text-gray-300 sm:mb-3 sm:text-sm"
               >名称</label
             >
-            <input
-              v-model="form.name"
-              class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
-              maxlength="100"
-              placeholder="请输入API Key名称"
-              required
-              type="text"
-            />
+            <div class="flex items-center gap-2">
+              <!-- 图标选择器 -->
+              <IconPicker v-model="form.icon" size="medium" />
+              <input
+                v-model="form.name"
+                class="form-input flex-1 border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
+                maxlength="100"
+                placeholder="请输入API Key名称"
+                required
+                type="text"
+              />
+            </div>
             <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 sm:mt-2">
               用于识别此 API Key 的用途
             </p>
@@ -658,6 +662,7 @@ import { useClientsStore } from '@/stores/clients'
 import { useApiKeysStore } from '@/stores/apiKeys'
 import { apiClient } from '@/config/api'
 import AccountSelector from '@/components/common/AccountSelector.vue'
+import IconPicker from '@/components/common/IconPicker.vue'
 
 const props = defineProps({
   apiKey: {
@@ -705,6 +710,7 @@ const unselectedTags = computed(() => {
 // 表单数据
 const form = reactive({
   name: '',
+  icon: '',
   tokenLimit: '', // 保留用于检测历史数据
   rateLimitWindow: '',
   rateLimitRequests: '',
@@ -803,6 +809,7 @@ const updateApiKey = async () => {
     // 准备提交的数据
     const data = {
       name: form.name, // 添加名称字段
+      icon: form.icon || '', // 添加图标字段
       tokenLimit: 0, // 清除历史token限制
       rateLimitWindow:
         form.rateLimitWindow !== '' && form.rateLimitWindow !== null
@@ -1035,6 +1042,7 @@ onMounted(async () => {
   }
 
   form.name = props.apiKey.name
+  form.icon = props.apiKey.icon || ''
 
   // 处理速率限制迁移：如果有tokenLimit且没有rateLimitCost，提示用户
   form.tokenLimit = props.apiKey.tokenLimit || ''
diff --git a/web/admin-spa/src/components/common/IconPicker.vue b/web/admin-spa/src/components/common/IconPicker.vue
new file mode 100644
index 00000000..253f2fe2
--- /dev/null
+++ b/web/admin-spa/src/components/common/IconPicker.vue
@@ -0,0 +1,1024 @@
+<template>
+  <div class="icon-picker">
+    <!-- 当前图标显示 -->
+    <div
+      class="icon-display"
+      :class="{ 'has-icon': currentIcon }"
+      :title="currentIcon ? '点击更换图标' : '点击选择图标'"
+      @click="showPicker = true"
+    >
+      <img v-if="currentIcon" alt="icon" class="current-icon" :src="currentIcon" />
+      <div
+        v-else
+        class="flex h-full w-full items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-blue-600"
+      >
+        <i class="fas fa-key text-[14px] text-white"></i>
+      </div>
+    </div>
+
+    <!-- 图标选择器弹窗 -->
+    <Teleport to="body">
+      <div v-if="showPicker" class="picker-overlay">
+        <div class="picker-modal" @click.stop>
+          <div class="picker-header">
+            <h3 class="picker-title">选择图标</h3>
+            <button class="close-btn" @click="closePicker">
+              <i class="fas fa-times"></i>
+            </button>
+          </div>
+
+          <div class="picker-tabs">
+            <button
+              class="tab-btn"
+              :class="{ active: activeTab === 'emoji' }"
+              @click="activeTab = 'emoji'"
+            >
+              <i class="fas fa-smile mr-1"></i>
+              表情符号
+            </button>
+            <button
+              class="tab-btn"
+              :class="{ active: activeTab === 'upload' }"
+              @click="activeTab = 'upload'"
+            >
+              <i class="fas fa-upload mr-1"></i>
+              上传图片
+            </button>
+          </div>
+
+          <div class="picker-content">
+            <!-- 表情符号选择 -->
+            <div v-if="activeTab === 'emoji'" class="emoji-grid">
+              <div
+                v-for="emoji in emojis"
+                :key="emoji"
+                class="emoji-item"
+                :title="emoji"
+                @click="selectEmoji(emoji)"
+              >
+                {{ emoji }}
+              </div>
+            </div>
+
+            <!-- 图片上传 -->
+            <div v-else-if="activeTab === 'upload'" class="upload-section">
+              <!-- 上传区域 -->
+              <div
+                v-if="!originalImage"
+                class="upload-area"
+                @click="triggerFileInput"
+                @dragover.prevent
+                @drop.prevent="handleDrop"
+              >
+                <input
+                  ref="fileInput"
+                  accept="image/*"
+                  class="hidden"
+                  type="file"
+                  @change="handleFileSelect"
+                />
+                <i class="fas fa-cloud-upload-alt mb-2 text-4xl text-gray-400"></i>
+                <p class="text-gray-600 dark:text-gray-400">点击或拖拽图片到此处</p>
+                <p class="mt-1 text-xs text-gray-500 dark:text-gray-500">
+                  支持 JPG, PNG, GIF - 可裁剪选择区域
+                </p>
+              </div>
+
+              <!-- 裁剪区域 -->
+              <div v-if="originalImage" class="crop-container">
+                <div class="crop-canvas-wrapper">
+                  <canvas
+                    ref="cropCanvas"
+                    class="crop-canvas"
+                    @mousedown="startCrop"
+                    @mouseleave="endCrop"
+                    @mousemove="moveCrop"
+                    @mouseup="endCrop"
+                    @touchend="endCrop"
+                    @touchmove="moveCrop"
+                    @touchstart="startCrop"
+                  ></canvas>
+                  <div class="crop-info">
+                    <span class="text-xs text-gray-500">拖动方框调整裁剪位置</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="picker-footer">
+            <div class="footer-actions">
+              <button class="btn-cancel-modal" @click="closePicker">取消</button>
+              <button v-if="currentIcon || originalImage" class="btn-save" @click="saveAndClose">
+                <i class="fas fa-save mr-1"></i>
+                保存
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, nextTick } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  size: {
+    type: String,
+    default: 'medium' // small, medium, large
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const showPicker = ref(false)
+const activeTab = ref('emoji')
+const currentIcon = ref(props.modelValue)
+const fileInput = ref(null)
+const cropCanvas = ref(null)
+const originalImage = ref(null)
+const cropData = ref({
+  x: 0,
+  y: 0,
+  size: 0,
+  isDragging: false,
+  dragStartX: 0,
+  dragStartY: 0,
+  initialX: 0,
+  initialY: 0,
+  scale: 1
+})
+
+// 常用表情符号
+const emojis = [
+  // AI平台图标
+  '🤖', // 通用AI/机器人
+  '🧠', // 大脑/智能
+  '🎓', // 学术/知识
+  '📚', // 知识库
+  '🔮', // 预测/魔法
+  '🌐', // 全球/网络
+  '💬', // 对话/聊天
+  '🗨️', // 对话框
+  '💭', // 思考
+  '🎤', // 语音
+  '🎧', // 音频
+  '📝', // 文本/写作
+  '✍️', // 书写
+  '🖋️', // 钢笔
+  '📖', // 阅读
+  '👁️', // 视觉
+  '🔍', // 搜索
+  '🔎', // 放大镜
+  '🧮', // 计算
+  '🎛️', // 控制
+
+  // 安全和密钥
+  '🔑',
+  '🔐',
+  '🔒',
+  '🔓',
+  '🗝️',
+  '🛡️',
+
+  // 性能和速度
+  '⚡',
+  '🚀',
+  '💫',
+  '⚙️',
+  '🔧',
+  '🔨',
+
+  // 星级和等级
+  '💎',
+  '🌟',
+  '⭐',
+  '✨',
+  '🏆',
+  '🥇',
+  '🥈',
+  '🥉',
+  '🏅',
+
+  // 颜色标识（可用于区分不同账户）
+  '🔴',
+  '🟠',
+  '🟡',
+  '🟢',
+  '🔵',
+  '🟣',
+  '⚫',
+  '⚪',
+  '🟤',
+
+  // 状态指示
+  '✅',
+  '❌',
+  '⚠️',
+  '❗',
+  '❓',
+  '💡',
+  '🔥',
+  '❄️',
+  '🌈',
+
+  // 数据和分析
+  '📊',
+  '📈',
+  '📉',
+  '💹',
+  '📋',
+  '📑',
+  '📄',
+  '📃',
+
+  // 科技相关
+  '💻',
+  '🖥️',
+  '📱',
+  '⌨️',
+  '🖱️',
+  '💾',
+  '💿',
+  '📀',
+  '🗄️',
+  '🗂️',
+  '📁',
+  '📂',
+
+  // 网络和连接
+  '🔗',
+  '📡',
+  '📶',
+  '📡',
+  '🛰️',
+  '🌍',
+  '🌎',
+  '🌏',
+
+  // 实验和研究
+  '🧪',
+  '🧬',
+  '🔬',
+  '🔭',
+  '⚗️',
+  '🥼',
+
+  // 金融相关
+  '💰',
+  '💵',
+  '💴',
+  '💶',
+  '💷',
+  '💳',
+  '🏦',
+  '💸',
+
+  // 游戏和娱乐
+  '🎮',
+  '🎯',
+  '🎲',
+  '🎨',
+  '🎭',
+  '🎪',
+
+  // 其他实用图标
+  '📌',
+  '📍',
+  '🔖',
+  '🏷️',
+  '⏰',
+  '⏱️',
+  '⏳',
+  '📅',
+  '🗓️'
+]
+
+// 监听属性变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    currentIcon.value = newVal
+  }
+)
+
+// 关闭选择器
+const closePicker = () => {
+  showPicker.value = false
+  resetImage()
+}
+
+// 选择表情
+const selectEmoji = (emoji) => {
+  // 将表情转换为base64 - 使用48x48获得更好的显示效果
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')
+  canvas.width = 48
+  canvas.height = 48
+
+  // 使用更大的字体尺寸以获得更清晰的渲染
+  ctx.font = '36px sans-serif'
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  ctx.fillText(emoji, 24, 24)
+
+  const dataUrl = canvas.toDataURL('image/png')
+  currentIcon.value = dataUrl
+  emit('update:modelValue', dataUrl)
+  closePicker()
+}
+
+// 触发文件选择
+const triggerFileInput = () => {
+  fileInput.value?.click()
+}
+
+// 处理文件选择
+const handleFileSelect = (event) => {
+  const file = event.target.files?.[0]
+  if (file) {
+    processFile(file)
+  }
+}
+
+// 处理拖拽
+const handleDrop = (event) => {
+  const file = event.dataTransfer.files?.[0]
+  if (file) {
+    processFile(file)
+  }
+}
+
+// 处理文件
+const processFile = async (file) => {
+  // 检查文件大小 - 允许最大10MB的原始文件
+  if (file.size > 10 * 1024 * 1024) {
+    alert('图片大小不能超过 10MB')
+    return
+  }
+
+  // 检查文件类型
+  if (!file.type.startsWith('image/')) {
+    alert('请选择图片文件')
+    return
+  }
+
+  // 读取图片准备裁剪
+  const reader = new FileReader()
+  reader.onload = async (e) => {
+    const img = new Image()
+    img.onload = () => {
+      originalImage.value = img
+      // 等待DOM更新后初始化裁剪画布
+      nextTick(() => {
+        initCropCanvas(img)
+      })
+    }
+    img.src = e.target.result
+  }
+  reader.readAsDataURL(file)
+}
+
+// 初始化裁剪画布
+const initCropCanvas = (img) => {
+  if (!cropCanvas.value) return
+
+  const canvas = cropCanvas.value
+
+  // 设置画布大小
+  const maxSize = 400
+  let width = img.width
+  let height = img.height
+
+  if (width > height) {
+    if (width > maxSize) {
+      height = (height * maxSize) / width
+      width = maxSize
+    }
+  } else {
+    if (height > maxSize) {
+      width = (width * maxSize) / height
+      height = maxSize
+    }
+  }
+
+  canvas.width = width
+  canvas.height = height
+
+  // 保存缩放比例
+  cropData.value.scale = img.width / width
+
+  // 初始化固定大小的裁剪框（居中）
+  const cropSize = Math.min(width, height) * 0.8 // 裁剪框大小为较小边的80%
+  const x = (width - cropSize) / 2
+  const y = (height - cropSize) / 2
+
+  cropData.value = {
+    x: x,
+    y: y,
+    size: cropSize,
+    isDragging: false,
+    dragStartX: 0,
+    dragStartY: 0,
+    initialX: 0,
+    initialY: 0,
+    scale: img.width / width
+  }
+
+  drawCropBox()
+}
+
+// 绘制裁剪框
+const drawCropBox = () => {
+  if (!cropCanvas.value || !originalImage.value) return
+
+  const canvas = cropCanvas.value
+  const ctx = canvas.getContext('2d')
+  const img = originalImage.value
+
+  // 重绘图片
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
+  ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+
+  // 半透明遮罩层
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'
+  ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+  // 清除裁剪区域，让其显示原图
+  const { x, y, size } = cropData.value
+
+  // 保存当前状态
+  ctx.save()
+
+  // 创建裁剪路径
+  ctx.beginPath()
+  ctx.rect(x, y, size, size)
+  ctx.clip()
+
+  // 在裁剪区域内重新绘制原图
+  ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+
+  // 恢复状态
+  ctx.restore()
+
+  // 绘制裁剪框边框
+  ctx.strokeStyle = '#3b82f6'
+  ctx.lineWidth = 3
+  ctx.strokeRect(x, y, size, size)
+
+  // 绘制内边框（白色）
+  ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)'
+  ctx.lineWidth = 1
+  ctx.strokeRect(x + 1, y + 1, size - 2, size - 2)
+
+  // 绘制网格线（九宫格）
+  ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)'
+  ctx.lineWidth = 1
+  const thirdSize = size / 3
+  // 垂直线
+  ctx.beginPath()
+  ctx.moveTo(x + thirdSize, y)
+  ctx.lineTo(x + thirdSize, y + size)
+  ctx.moveTo(x + thirdSize * 2, y)
+  ctx.lineTo(x + thirdSize * 2, y + size)
+  // 水平线
+  ctx.moveTo(x, y + thirdSize)
+  ctx.lineTo(x + size, y + thirdSize)
+  ctx.moveTo(x, y + thirdSize * 2)
+  ctx.lineTo(x + size, y + thirdSize * 2)
+  ctx.stroke()
+
+  // 绘制角标
+  const cornerLength = 20
+  ctx.strokeStyle = '#3b82f6'
+  ctx.lineWidth = 3
+
+  // 左上角
+  ctx.beginPath()
+  ctx.moveTo(x, y + cornerLength)
+  ctx.lineTo(x, y)
+  ctx.lineTo(x + cornerLength, y)
+  ctx.stroke()
+
+  // 右上角
+  ctx.beginPath()
+  ctx.moveTo(x + size - cornerLength, y)
+  ctx.lineTo(x + size, y)
+  ctx.lineTo(x + size, y + cornerLength)
+  ctx.stroke()
+
+  // 左下角
+  ctx.beginPath()
+  ctx.moveTo(x, y + size - cornerLength)
+  ctx.lineTo(x, y + size)
+  ctx.lineTo(x + cornerLength, y + size)
+  ctx.stroke()
+
+  // 右下角
+  ctx.beginPath()
+  ctx.moveTo(x + size - cornerLength, y + size)
+  ctx.lineTo(x + size, y + size)
+  ctx.lineTo(x + size, y + size - cornerLength)
+  ctx.stroke()
+}
+
+// 开始拖动
+const startCrop = (e) => {
+  if (!cropCanvas.value) return
+
+  const rect = cropCanvas.value.getBoundingClientRect()
+  const mouseX = (e.clientX || e.touches?.[0]?.clientX) - rect.left
+  const mouseY = (e.clientY || e.touches?.[0]?.clientY) - rect.top
+
+  // 检查是否在裁剪框内
+  const { x, y, size } = cropData.value
+  if (mouseX >= x && mouseX <= x + size && mouseY >= y && mouseY <= y + size) {
+    cropData.value.isDragging = true
+    cropData.value.dragStartX = mouseX
+    cropData.value.dragStartY = mouseY
+    cropData.value.initialX = x
+    cropData.value.initialY = y
+  }
+}
+
+// 移动裁剪框
+const moveCrop = (e) => {
+  if (!cropData.value.isDragging || !cropCanvas.value) return
+
+  const rect = cropCanvas.value.getBoundingClientRect()
+  const mouseX = (e.clientX || e.touches?.[0]?.clientX) - rect.left
+  const mouseY = (e.clientY || e.touches?.[0]?.clientY) - rect.top
+
+  // 计算移动距离
+  const deltaX = mouseX - cropData.value.dragStartX
+  const deltaY = mouseY - cropData.value.dragStartY
+
+  // 计算新位置
+  let newX = cropData.value.initialX + deltaX
+  let newY = cropData.value.initialY + deltaY
+
+  // 限制在画布内
+  const canvas = cropCanvas.value
+  const maxX = canvas.width - cropData.value.size
+  const maxY = canvas.height - cropData.value.size
+
+  newX = Math.max(0, Math.min(newX, maxX))
+  newY = Math.max(0, Math.min(newY, maxY))
+
+  cropData.value.x = newX
+  cropData.value.y = newY
+
+  drawCropBox()
+}
+
+// 结束拖动
+const endCrop = () => {
+  cropData.value.isDragging = false
+}
+
+// 重置图片
+const resetImage = () => {
+  originalImage.value = null
+  cropData.value = {
+    x: 0,
+    y: 0,
+    size: 0,
+    isDragging: false,
+    dragStartX: 0,
+    dragStartY: 0,
+    initialX: 0,
+    initialY: 0,
+    scale: 1
+  }
+  if (fileInput.value) {
+    fileInput.value.value = ''
+  }
+}
+
+// 智能压缩图片
+const compressImage = (img) => {
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')
+
+  // 设置目标尺寸 - 因为是图标，48x48对高DPI屏幕更友好
+  const targetSize = 48
+  let width = img.width
+  let height = img.height
+
+  // 计算缩放比例，保持宽高比
+  const scale = Math.min(targetSize / width, targetSize / height)
+  if (scale < 1) {
+    width = Math.round(width * scale)
+    height = Math.round(height * scale)
+  }
+
+  canvas.width = width
+  canvas.height = height
+
+  // 设置高质量的图像渲染
+  ctx.imageSmoothingEnabled = true
+  ctx.imageSmoothingQuality = 'high'
+
+  // 检测是否有透明背景（通过绘制一次并检查alpha通道）
+  ctx.drawImage(img, 0, 0, width, height)
+  const imageData = ctx.getImageData(0, 0, width, height)
+  const hasTransparency = Array.from(imageData.data).some(
+    (_, i) => i % 4 === 3 && imageData.data[i] < 255
+  )
+
+  // 目标大小：60KB（对于图标来说足够了）
+  const targetBytes = 60 * 1024
+  let compressedDataUrl
+
+  if (hasTransparency) {
+    // 如果有透明背景，使用PNG格式
+    compressedDataUrl = canvas.toDataURL('image/png')
+
+    // 如果PNG太大，尝试缩小尺寸
+    if (compressedDataUrl.length > targetBytes * 1.37) {
+      const smallerSize = 36
+      const smallerScale = Math.min(smallerSize / img.width, smallerSize / img.height)
+      width = Math.round(img.width * smallerScale)
+      height = Math.round(img.height * smallerScale)
+
+      canvas.width = width
+      canvas.height = height
+      ctx.imageSmoothingEnabled = true
+      ctx.imageSmoothingQuality = 'high'
+      ctx.drawImage(img, 0, 0, width, height)
+      compressedDataUrl = canvas.toDataURL('image/png')
+    }
+  } else {
+    // 没有透明背景，使用JPEG格式获得更好的压缩
+    let quality = 0.92
+    compressedDataUrl = canvas.toDataURL('image/jpeg', quality)
+
+    // 逐步降低质量直到达到目标大小
+    while (compressedDataUrl.length > targetBytes * 1.37 && quality > 0.3) {
+      quality -= 0.1
+      compressedDataUrl = canvas.toDataURL('image/jpeg', quality)
+    }
+
+    // 如果还是太大，缩小尺寸
+    if (compressedDataUrl.length > targetBytes * 1.37) {
+      const smallerSize = 36
+      const smallerScale = Math.min(smallerSize / img.width, smallerSize / img.height)
+      width = Math.round(img.width * smallerScale)
+      height = Math.round(img.height * smallerScale)
+
+      canvas.width = width
+      canvas.height = height
+      ctx.imageSmoothingEnabled = true
+      ctx.imageSmoothingQuality = 'high'
+      ctx.drawImage(img, 0, 0, width, height)
+
+      compressedDataUrl = canvas.toDataURL('image/jpeg', 0.7)
+    }
+  }
+
+  // 输出压缩信息到控制台（开发时可用）
+  console.log(
+    `图片压缩完成: ${width}x${height}, 大小: ${Math.round(compressedDataUrl.length / 1024)}KB`
+  )
+
+  return compressedDataUrl
+}
+
+// 保存并关闭
+const saveAndClose = () => {
+  // 如果有原始图片（正在裁剪），先应用裁剪
+  if (originalImage.value) {
+    applyCropAndSave()
+  } else if (currentIcon.value) {
+    // 直接保存已选择的图标（表情）
+    emit('update:modelValue', currentIcon.value)
+    closePicker()
+  } else {
+    // 没有选择任何图标时，关闭弹窗
+    closePicker()
+  }
+}
+
+// 应用裁剪并保存
+const applyCropAndSave = () => {
+  if (!cropCanvas.value || !originalImage.value) return
+
+  const { x, y, size, scale } = cropData.value
+
+  // 计算原始图片上的裁剪区域
+  const cropX = x * scale
+  const cropY = y * scale
+  const cropSize = size * scale
+
+  // 创建裁剪后的图片
+  const tempCanvas = document.createElement('canvas')
+  const tempCtx = tempCanvas.getContext('2d')
+
+  // 设置为正方形
+  tempCanvas.width = cropSize
+  tempCanvas.height = cropSize
+
+  // 绘制裁剪的图片
+  tempCtx.drawImage(originalImage.value, cropX, cropY, cropSize, cropSize, 0, 0, cropSize, cropSize)
+
+  // 压缩并保存
+  const tempImg = new Image()
+  tempImg.onload = () => {
+    const compressedDataUrl = compressImage(tempImg)
+    emit('update:modelValue', compressedDataUrl)
+    closePicker()
+  }
+  tempImg.src = tempCanvas.toDataURL('image/png')
+}
+</script>
+
+<style scoped>
+.icon-picker {
+  display: inline-block;
+}
+
+.icon-display {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  overflow: hidden;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f3f4f6;
+  border: 2px solid transparent;
+  transition: all 0.2s;
+}
+
+.dark .icon-display {
+  background: #374151;
+}
+
+.icon-display:hover {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.icon-display.has-icon {
+  background: white;
+}
+
+.dark .icon-display.has-icon {
+  background: #1f2937;
+}
+
+.current-icon {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.picker-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.picker-modal {
+  background: white;
+  border-radius: 12px;
+  width: 100%;
+  max-width: 500px;
+  max-height: 600px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+}
+
+.dark .picker-modal {
+  background: #1f2937;
+}
+
+.picker-header {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dark .picker-header {
+  border-bottom-color: #374151;
+}
+
+.picker-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #111827;
+}
+
+.dark .picker-title {
+  color: #f3f4f6;
+}
+
+.close-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #6b7280;
+  transition: all 0.2s;
+}
+
+.close-btn:hover {
+  background: #f3f4f6;
+  color: #111827;
+}
+
+.dark .close-btn:hover {
+  background: #374151;
+  color: #f3f4f6;
+}
+
+.picker-tabs {
+  padding: 0.5rem 1.5rem;
+  display: flex;
+  gap: 0.5rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.dark .picker-tabs {
+  border-bottom-color: #374151;
+}
+
+.tab-btn {
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #6b7280;
+  transition: all 0.2s;
+}
+
+.tab-btn:hover {
+  background: #f3f4f6;
+  color: #111827;
+}
+
+.dark .tab-btn:hover {
+  background: #374151;
+  color: #f3f4f6;
+}
+
+.tab-btn.active {
+  background: #3b82f6;
+  color: white;
+}
+
+.picker-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+}
+
+.emoji-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+  gap: 0.5rem;
+}
+
+.emoji-item {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.emoji-item:hover {
+  background: #f3f4f6;
+  transform: scale(1.1);
+}
+
+.dark .emoji-item:hover {
+  background: #374151;
+}
+
+.upload-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.upload-area {
+  border: 2px dashed #d1d5db;
+  border-radius: 8px;
+  padding: 2rem;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.dark .upload-area {
+  border-color: #4b5563;
+}
+
+.upload-area:hover {
+  border-color: #3b82f6;
+  background: #eff6ff;
+}
+
+.dark .upload-area:hover {
+  background: #1e3a5f;
+}
+
+.crop-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.crop-canvas-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.crop-canvas {
+  max-width: 100%;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  cursor: move;
+}
+
+.dark .crop-canvas {
+  border-color: #374151;
+}
+
+.crop-info {
+  text-align: center;
+}
+
+.picker-footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid #e5e7eb;
+}
+
+.dark .picker-footer {
+  border-top-color: #374151;
+}
+
+.footer-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.btn-cancel-modal {
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  background: #6b7280;
+  color: white;
+  transition: all 0.2s;
+}
+
+.btn-cancel-modal:hover {
+  background: #4b5563;
+}
+
+.btn-save {
+  padding: 0.5rem 1.25rem;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  background: #10b981;
+  color: white;
+  transition: all 0.2s;
+}
+
+.btn-save:hover {
+  background: #059669;
+}
+
+.hidden {
+  display: none;
+}
+</style>
diff --git a/web/admin-spa/src/views/ApiKeysView.vue b/web/admin-spa/src/views/ApiKeysView.vue
index 08e3853b..0628fe82 100644
--- a/web/admin-spa/src/views/ApiKeysView.vue
+++ b/web/admin-spa/src/views/ApiKeysView.vue
@@ -125,7 +125,7 @@
                 <div class="relative flex items-center">
                   <input
                     v-model="searchKeyword"
-                    class="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 pl-9 text-sm text-gray-700 placeholder-gray-400 shadow-sm transition-all duration-200 hover:border-gray-300 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 dark:hover:border-gray-500"
+                    class="w-full rounded-lg border border-gray-200 bg-white px-3 py-1.5 pl-9 text-sm text-gray-700 placeholder-gray-400 shadow-sm transition-all duration-200 hover:border-gray-300 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 dark:hover:border-gray-500"
                     :placeholder="isLdapEnabled ? '搜索名称或所有者...' : '搜索名称...'"
                     type="text"
                     @input="currentPage = 1"
@@ -209,7 +209,7 @@
 
             <!-- 创建按钮 - 独立在右侧 -->
             <button
-              class="flex w-full items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 px-5 py-2.5 text-sm font-medium text-white shadow-md transition-all duration-200 hover:from-blue-600 hover:to-blue-700 hover:shadow-lg sm:w-auto"
+              class="flex w-full items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 px-5 py-2 text-sm font-medium text-white shadow-md transition-all duration-200 hover:from-blue-600 hover:to-blue-700 hover:shadow-lg sm:w-auto"
               @click.stop="openCreateApiKeyModal"
             >
               <i class="fas fa-plus"></i>
@@ -250,7 +250,7 @@
                       </div>
                     </th>
                     <th
-                      class="w-[20%] min-w-[160px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
+                      class="w-[18%] min-w-[140px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
                       @click="sortApiKeys('name')"
                     >
                       名称
@@ -264,11 +264,6 @@
                       />
                       <i v-else class="fas fa-sort ml-1 text-gray-400" />
                     </th>
-                    <th
-                      class="w-[10%] min-w-[90px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
-                    >
-                      账号
-                    </th>
                     <th
                       class="w-[10%] min-w-[80px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
                     >
@@ -323,7 +318,7 @@
                       class="w-[7%] min-w-[70px] cursor-pointer px-3 py-4 text-right text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
                       @click="sortApiKeys('periodTokens')"
                     >
-                      Token数量
+                      Token数
                       <i
                         v-if="apiKeysSortBy === 'periodTokens'"
                         :class="[
@@ -390,7 +385,7 @@
                   <template v-for="key in paginatedApiKeys" :key="key.id">
                     <!-- API Key 主行 -->
                     <tr class="table-row">
-                      <td v-if="shouldShowCheckboxes" class="px-3 py-2.5">
+                      <td v-if="shouldShowCheckboxes" class="px-3 py-1.5">
                         <div class="flex items-center">
                           <input
                             v-model="selectedApiKeys"
@@ -401,16 +396,149 @@
                           />
                         </div>
                       </td>
-                      <td class="px-3 py-2.5">
+                      <td class="px-3 py-1.5">
                         <div class="min-w-0">
-                          <div
-                            class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100"
-                            :title="key.name"
-                          >
-                            {{ key.name }}
+                          <div class="flex items-start gap-2.5">
+                            <!-- API Key 图标 -->
+                            <IconPicker
+                              v-model="key.icon"
+                              class="mt-0.5"
+                              size="small"
+                              @update:model-value="(val) => updateApiKeyIcon(key.id, val)"
+                            />
+                            <div class="min-w-0 flex-1">
+                              <!-- 名称 -->
+                              <div
+                                class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100"
+                                :title="key.name"
+                              >
+                                {{ key.name }}
+                              </div>
+                              <!-- 次要信息显示：所属账号 -->
+                              <div class="mt-0.5 text-[11px] text-gray-500 dark:text-gray-400">
+                                <!-- Claude OAuth 账号 -->
+                                <span
+                                  v-if="
+                                    key.claudeAccountId && !key.claudeAccountId.startsWith('group:')
+                                  "
+                                  class="inline-flex items-center gap-1"
+                                >
+                                  <i class="fas fa-robot text-[9px] text-blue-500" />
+                                  <span>{{
+                                    getClaudeBindingInfo(key)
+                                      .replace(/^🔒\s*专属-/, '')
+                                      .replace(/^⚠️\s*/, '')
+                                  }}</span>
+                                </span>
+                                <!-- Claude Console 账号 -->
+                                <span
+                                  v-else-if="key.claudeConsoleAccountId"
+                                  class="inline-flex items-center gap-1"
+                                >
+                                  <i class="fas fa-terminal text-[9px] text-purple-500" />
+                                  <span>{{
+                                    getClaudeBindingInfo(key)
+                                      .replace(/^🔒\s*专属-/, '')
+                                      .replace(/^⚠️\s*/, '')
+                                  }}</span>
+                                </span>
+                                <!-- Claude 分组 -->
+                                <span
+                                  v-else-if="
+                                    key.claudeAccountId && key.claudeAccountId.startsWith('group:')
+                                  "
+                                  class="inline-flex items-center gap-1"
+                                >
+                                  <i class="fas fa-layer-group text-[9px] text-blue-500" />
+                                  <span>{{ getClaudeBindingInfo(key) }}</span>
+                                </span>
+                                <!-- Gemini 账号 -->
+                                <span
+                                  v-else-if="
+                                    key.geminiAccountId && !key.geminiAccountId.startsWith('group:')
+                                  "
+                                  class="inline-flex items-center gap-1"
+                                >
+                                  <i class="fas fa-gem text-[9px] text-green-500" />
+                                  <span>{{
+                                    getGeminiBindingInfo(key)
+                                      .replace(/^🔒\s*专属-/, '')
+                                      .replace(/^⚠️\s*/, '')
+                                  }}</span>
+                                </span>
+                                <!-- Gemini 分组 -->
+                                <span
+                                  v-else-if="
+                                    key.geminiAccountId && key.geminiAccountId.startsWith('group:')
+                                  "
+                                  class="inline-flex items-center gap-1"
+                                >
+                                  <i class="fas fa-layer-group text-[9px] text-green-500" />
+                                  <span>{{ getGeminiBindingInfo(key) }}</span>
+                                </span>
+                                <!-- OpenAI 账号 -->
+                                <span
+                                  v-else-if="
+                                    key.openaiAccountId && !key.openaiAccountId.startsWith('group:')
+                                  "
+                                  class="inline-flex items-center gap-1"
+                                >
+                                  <i class="fas fa-brain text-[9px] text-orange-500" />
+                                  <span>{{
+                                    getOpenAIBindingInfo(key)
+                                      .replace(/^🔒\s*专属-/, '')
+                                      .replace(/^⚠️\s*/, '')
+                                  }}</span>
+                                </span>
+                                <!-- OpenAI 分组 -->
+                                <span
+                                  v-else-if="
+                                    key.openaiAccountId && key.openaiAccountId.startsWith('group:')
+                                  "
+                                  class="inline-flex items-center gap-1"
+                                >
+                                  <i class="fas fa-layer-group text-[9px] text-orange-500" />
+                                  <span>{{ getOpenAIBindingInfo(key) }}</span>
+                                </span>
+                                <!-- Bedrock 账号 -->
+                                <span
+                                  v-else-if="
+                                    key.bedrockAccountId &&
+                                    !key.bedrockAccountId.startsWith('group:')
+                                  "
+                                  class="inline-flex items-center gap-1"
+                                >
+                                  <i class="fas fa-cube text-[9px] text-indigo-500" />
+                                  <span>{{
+                                    getBedrockBindingInfo(key)
+                                      .replace(/^🔒\s*专属-/, '')
+                                      .replace(/^⚠️\s*/, '')
+                                  }}</span>
+                                </span>
+                                <!-- Bedrock 分组 -->
+                                <span
+                                  v-else-if="
+                                    key.bedrockAccountId &&
+                                    key.bedrockAccountId.startsWith('group:')
+                                  "
+                                  class="inline-flex items-center gap-1"
+                                >
+                                  <i class="fas fa-layer-group text-[9px] text-indigo-500" />
+                                  <span>{{ getBedrockBindingInfo(key) }}</span>
+                                </span>
+                                <!-- 共享池 -->
+                                <span
+                                  v-else
+                                  class="inline-flex items-center gap-1 text-gray-400 dark:text-gray-500"
+                                >
+                                  <i class="fas fa-share-alt text-[9px]" />
+                                  <span>共享池</span>
+                                </span>
+                              </div>
+                            </div>
                           </div>
                           <!-- 账户绑定信息 -->
-                          <div class="mt-1.5 space-y-1">
+                          <div class="mt-1.5 space-y-1 pl-12">
                             <!-- Claude 绑定 -->
                             <div
                               v-if="key.claudeAccountId || key.claudeConsoleAccountId"
@@ -469,65 +597,14 @@
                           <!-- 显示所有者信息 -->
                           <div
                             v-if="isLdapEnabled && key.ownerDisplayName"
-                            class="mt-1 text-xs text-red-600"
+                            class="mt-1 pl-12 text-xs text-red-600"
                           >
                             <i class="fas fa-user mr-1" />
                             {{ key.ownerDisplayName }}
                           </div>
                         </div>
                       </td>
-                      <!-- 账号 -->
-                      <td class="whitespace-nowrap px-3 py-2.5 text-sm">
-                        <div class="text-gray-700 dark:text-gray-300">
-                          <!-- Claude 账号 -->
-                          <span v-if="key.claudeAccountId" class="inline-flex items-center">
-                            <i class="fas fa-robot mr-1 text-xs text-blue-500" />
-                            <span class="text-xs">{{
-                              getClaudeAccountName(key.claudeAccountId)
-                            }}</span>
-                          </span>
-                          <!-- Claude Console 账号 -->
-                          <span
-                            v-else-if="key.claudeConsoleAccountId"
-                            class="inline-flex items-center"
-                          >
-                            <i class="fas fa-terminal mr-1 text-xs text-purple-500" />
-                            <span class="text-xs">{{
-                              getClaudeConsoleAccountName(key.claudeConsoleAccountId)
-                            }}</span>
-                          </span>
-                          <!-- Gemini 账号 -->
-                          <span v-else-if="key.geminiAccountId" class="inline-flex items-center">
-                            <i class="fas fa-gem mr-1 text-xs text-green-500" />
-                            <span class="text-xs">{{
-                              getGeminiAccountName(key.geminiAccountId)
-                            }}</span>
-                          </span>
-                          <!-- OpenAI 账号 -->
-                          <span v-else-if="key.openaiAccountId" class="inline-flex items-center">
-                            <i class="fas fa-brain mr-1 text-xs text-orange-500" />
-                            <span class="text-xs">{{
-                              getOpenAIAccountName(key.openaiAccountId)
-                            }}</span>
-                          </span>
-                          <!-- Bedrock 账号 -->
-                          <span v-else-if="key.bedrockAccountId" class="inline-flex items-center">
-                            <i class="fas fa-layer-group mr-1 text-xs text-indigo-500" />
-                            <span class="text-xs">{{
-                              getBedrockAccountName(key.bedrockAccountId)
-                            }}</span>
-                          </span>
-                          <!-- 共享池 -->
-                          <span
-                            v-else
-                            class="inline-flex items-center text-gray-500 dark:text-gray-400"
-                          >
-                            <i class="fas fa-share-alt mr-1 text-xs" />
-                            <span class="text-xs">共享池</span>
-                          </span>
-                        </div>
-                      </td>
-                      <td class="px-3 py-2.5">
+                      <td class="px-3 py-1.5">
                         <div class="flex flex-wrap gap-1">
                           <span
                             v-for="tag in key.tags || []"
@@ -543,7 +620,7 @@
                           >
                         </div>
                       </td>
-                      <td class="whitespace-nowrap px-3 py-2.5">
+                      <td class="whitespace-nowrap px-3 py-1.5">
                         <span
                           :class="[
                             'inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold',
@@ -562,7 +639,7 @@
                         </span>
                       </td>
                       <!-- 请求数 -->
-                      <td class="whitespace-nowrap px-3 py-2.5 text-right text-sm">
+                      <td class="whitespace-nowrap px-3 py-1.5 text-right text-sm">
                         <div class="flex items-center justify-end gap-1">
                           <span class="font-medium text-gray-900 dark:text-gray-100">
                             {{ formatNumber(getPeriodRequests(key)) }}
@@ -571,7 +648,7 @@
                         </div>
                       </td>
                       <!-- 费用 -->
-                      <td class="whitespace-nowrap px-3 py-2.5 text-right text-sm">
+                      <td class="whitespace-nowrap px-3 py-1.5 text-right text-sm">
                         <div class="space-y-2">
                           <span class="font-medium text-blue-600 dark:text-blue-400">
                             ${{ getPeriodCost(key).toFixed(4) }}
@@ -634,7 +711,7 @@
                         </div>
                       </td>
                       <!-- Token数量 -->
-                      <td class="whitespace-nowrap px-3 py-2.5 text-right text-sm">
+                      <td class="whitespace-nowrap px-3 py-1.5 text-right text-sm">
                         <div class="flex items-center justify-end gap-1">
                           <span class="font-medium text-purple-600 dark:text-purple-400">
                             {{ formatTokenCount(getPeriodTokens(key)) }}
@@ -643,17 +720,24 @@
                       </td>
                       <!-- 最后使用 -->
                       <td
-                        class="whitespace-nowrap px-3 py-2.5 text-sm text-gray-700 dark:text-gray-300"
+                        class="whitespace-nowrap px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300"
                       >
-                        {{ formatLastUsed(key.lastUsedAt) }}
+                        <span
+                          v-if="key.lastUsedAt"
+                          class="cursor-help"
+                          :title="new Date(key.lastUsedAt).toLocaleString('zh-CN')"
+                        >
+                          {{ formatLastUsed(key.lastUsedAt) }}
+                        </span>
+                        <span v-else class="text-gray-400">从未使用</span>
                       </td>
                       <!-- 创建时间 -->
                       <td
-                        class="whitespace-nowrap px-3 py-2.5 text-sm text-gray-500 dark:text-gray-400"
+                        class="whitespace-nowrap px-3 py-1.5 text-sm text-gray-500 dark:text-gray-400"
                       >
                         {{ new Date(key.createdAt).toLocaleDateString() }}
                       </td>
-                      <td class="whitespace-nowrap px-3 py-2.5 text-sm">
+                      <td class="whitespace-nowrap px-3 py-1.5 text-sm">
                         <div class="inline-flex items-center gap-1.5">
                           <!-- 未激活状态 -->
                           <span
@@ -667,52 +751,40 @@
                           <span v-else-if="key.expiresAt">
                             <span
                               v-if="isApiKeyExpired(key.expiresAt)"
-                              class="inline-flex items-center text-red-600"
+                              class="inline-flex cursor-pointer items-center text-red-600 hover:underline"
+                              @click.stop="startEditExpiry(key)"
                             >
                               <i class="fas fa-exclamation-circle mr-1" />
                               已过期
                             </span>
                             <span
                               v-else-if="isApiKeyExpiringSoon(key.expiresAt)"
-                              class="inline-flex items-center text-orange-600"
+                              class="inline-flex cursor-pointer items-center text-orange-600 hover:underline"
+                              @click.stop="startEditExpiry(key)"
                             >
                               <i class="fas fa-clock mr-1" />
                               {{ formatExpireDate(key.expiresAt) }}
                             </span>
-                            <span v-else class="text-gray-600 dark:text-gray-400">
+                            <span
+                              v-else
+                              class="cursor-pointer text-gray-600 hover:underline dark:text-gray-400"
+                              @click.stop="startEditExpiry(key)"
+                            >
                               {{ formatExpireDate(key.expiresAt) }}
                             </span>
                           </span>
                           <!-- 永不过期 -->
                           <span
                             v-else
-                            class="inline-flex items-center text-gray-400 dark:text-gray-500"
+                            class="inline-flex cursor-pointer items-center text-gray-400 hover:underline dark:text-gray-500"
+                            @click.stop="startEditExpiry(key)"
                           >
                             <i class="fas fa-infinity mr-1" />
                             永不过期
                           </span>
-                          <button
-                            class="inline-flex h-6 w-6 items-center justify-center rounded-md text-gray-300 transition-all duration-200 hover:bg-blue-50 hover:text-blue-500 dark:hover:bg-blue-900/20"
-                            title="编辑过期时间"
-                            @click.stop="startEditExpiry(key)"
-                          >
-                            <svg
-                              class="h-3 w-3"
-                              fill="none"
-                              stroke="currentColor"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                              ></path>
-                            </svg>
-                          </button>
                         </div>
                       </td>
-                      <td class="whitespace-nowrap px-3 py-2.5 text-sm">
+                      <td class="whitespace-nowrap px-3 py-1.5 text-sm">
                         <div class="flex gap-1">
                           <button
                             class="rounded px-2 py-1 text-xs font-medium text-purple-600 transition-colors hover:bg-purple-50 hover:text-purple-900 dark:hover:bg-purple-900/20"
@@ -1065,11 +1137,12 @@
                     :value="key.id"
                     @change="updateSelectAllState"
                   />
-                  <div
-                    class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-blue-600"
-                  >
-                    <i class="fas fa-key text-sm text-white" />
-                  </div>
+                  <!-- API Key 图标 -->
+                  <IconPicker
+                    v-model="key.icon"
+                    size="medium"
+                    @update:model-value="(val) => updateApiKeyIcon(key.id, val)"
+                  />
                   <div>
                     <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                       {{ key.name }}
@@ -1294,14 +1367,14 @@
               <!-- 操作按钮 -->
               <div class="mt-3 flex gap-2 border-t border-gray-100 pt-3 dark:border-gray-600">
                 <button
-                  class="flex flex-1 items-center justify-center gap-1 rounded-lg bg-blue-50 px-3 py-2 text-xs text-blue-600 transition-colors hover:bg-blue-100 dark:bg-blue-900/30 dark:hover:bg-blue-900/50"
+                  class="flex flex-1 items-center justify-center gap-1 rounded-lg bg-blue-50 px-3 py-1.5 text-xs text-blue-600 transition-colors hover:bg-blue-100 dark:bg-blue-900/30 dark:hover:bg-blue-900/50"
                   @click="showUsageDetails(key)"
                 >
                   <i class="fas fa-chart-line" />
                   查看详情
                 </button>
                 <button
-                  class="flex-1 rounded-lg bg-gray-50 px-3 py-2 text-xs text-gray-600 transition-colors hover:bg-gray-100 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+                  class="flex-1 rounded-lg bg-gray-50 px-3 py-1.5 text-xs text-gray-600 transition-colors hover:bg-gray-100 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
                   @click="openEditApiKeyModal(key)"
                 >
                   <i class="fas fa-edit mr-1" />
@@ -1312,7 +1385,7 @@
                     key.expiresAt &&
                     (isApiKeyExpired(key.expiresAt) || isApiKeyExpiringSoon(key.expiresAt))
                   "
-                  class="flex-1 rounded-lg bg-orange-50 px-3 py-2 text-xs text-orange-600 transition-colors hover:bg-orange-100 dark:bg-orange-900/30 dark:hover:bg-orange-900/50"
+                  class="flex-1 rounded-lg bg-orange-50 px-3 py-1.5 text-xs text-orange-600 transition-colors hover:bg-orange-100 dark:bg-orange-900/30 dark:hover:bg-orange-900/50"
                   @click="openRenewApiKeyModal(key)"
                 >
                   <i class="fas fa-clock mr-1" />
@@ -1323,7 +1396,7 @@
                     key.isActive
                       ? 'bg-orange-50 text-orange-600 hover:bg-orange-100 dark:bg-orange-900/30 dark:hover:bg-orange-900/50'
                       : 'bg-green-50 text-green-600 hover:bg-green-100 dark:bg-green-900/30 dark:hover:bg-green-900/50',
-                    'rounded-lg px-3 py-2 text-xs transition-colors'
+                    'rounded-lg px-3 py-1.5 text-xs transition-colors'
                   ]"
                   @click="toggleApiKeyStatus(key)"
                 >
@@ -1331,7 +1404,7 @@
                   {{ key.isActive ? '禁用' : '激活' }}
                 </button>
                 <button
-                  class="rounded-lg bg-red-50 px-3 py-2 text-xs text-red-600 transition-colors hover:bg-red-100 dark:bg-red-900/30 dark:hover:bg-red-900/50"
+                  class="rounded-lg bg-red-50 px-3 py-1.5 text-xs text-red-600 transition-colors hover:bg-red-100 dark:bg-red-900/30 dark:hover:bg-red-900/50"
                   @click="deleteApiKey(key.id)"
                 >
                   <i class="fas fa-trash" />
@@ -1512,7 +1585,7 @@
                       <th
                         class="w-[7%] min-w-[70px] px-3 py-4 text-right text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
                       >
-                        Token数量
+                        Token数
                       </th>
                       <th
                         class="w-[9%] min-w-[80px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
@@ -1528,7 +1601,7 @@
                   </thead>
                   <tbody class="divide-y divide-gray-200/50 dark:divide-gray-600/50">
                     <tr v-for="key in deletedApiKeys" :key="key.id" class="table-row">
-                      <td class="px-3 py-2.5">
+                      <td class="px-3 py-1.5">
                         <div class="flex items-center">
                           <div
                             class="mr-2 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-red-500 to-red-600"
@@ -1545,58 +1618,7 @@
                           </div>
                         </div>
                       </td>
-                      <!-- 账号 -->
-                      <td class="whitespace-nowrap px-3 py-2.5 text-sm">
-                        <div class="text-gray-700 dark:text-gray-300">
-                          <!-- Claude 账号 -->
-                          <span v-if="key.claudeAccountId" class="inline-flex items-center">
-                            <i class="fas fa-robot mr-1 text-xs text-blue-500" />
-                            <span class="text-xs">{{
-                              getClaudeAccountName(key.claudeAccountId)
-                            }}</span>
-                          </span>
-                          <!-- Claude Console 账号 -->
-                          <span
-                            v-else-if="key.claudeConsoleAccountId"
-                            class="inline-flex items-center"
-                          >
-                            <i class="fas fa-terminal mr-1 text-xs text-purple-500" />
-                            <span class="text-xs">{{
-                              getClaudeConsoleAccountName(key.claudeConsoleAccountId)
-                            }}</span>
-                          </span>
-                          <!-- Gemini 账号 -->
-                          <span v-else-if="key.geminiAccountId" class="inline-flex items-center">
-                            <i class="fas fa-gem mr-1 text-xs text-green-500" />
-                            <span class="text-xs">{{
-                              getGeminiAccountName(key.geminiAccountId)
-                            }}</span>
-                          </span>
-                          <!-- OpenAI 账号 -->
-                          <span v-else-if="key.openaiAccountId" class="inline-flex items-center">
-                            <i class="fas fa-brain mr-1 text-xs text-orange-500" />
-                            <span class="text-xs">{{
-                              getOpenAIAccountName(key.openaiAccountId)
-                            }}</span>
-                          </span>
-                          <!-- Bedrock 账号 -->
-                          <span v-else-if="key.bedrockAccountId" class="inline-flex items-center">
-                            <i class="fas fa-layer-group mr-1 text-xs text-indigo-500" />
-                            <span class="text-xs">{{
-                              getBedrockAccountName(key.bedrockAccountId)
-                            }}</span>
-                          </span>
-                          <!-- 共享池 -->
-                          <span
-                            v-else
-                            class="inline-flex items-center text-gray-500 dark:text-gray-400"
-                          >
-                            <i class="fas fa-share-alt mr-1 text-xs" />
-                            <span class="text-xs">共享池</span>
-                          </span>
-                        </div>
-                      </td>
-                      <td v-if="isLdapEnabled" class="px-3 py-2.5">
+                      <td v-if="isLdapEnabled" class="px-3 py-1.5">
                         <div class="text-sm">
                           <span v-if="key.createdBy === 'admin'" class="text-blue-600">
                             <i class="fas fa-user-shield mr-1" />
@@ -1613,11 +1635,11 @@
                         </div>
                       </td>
                       <td
-                        class="whitespace-nowrap px-3 py-2.5 text-sm text-gray-500 dark:text-gray-400"
+                        class="whitespace-nowrap px-3 py-1.5 text-sm text-gray-500 dark:text-gray-400"
                       >
                         {{ formatDate(key.createdAt) }}
                       </td>
-                      <td class="px-3 py-2.5">
+                      <td class="px-3 py-1.5">
                         <div class="text-sm">
                           <span v-if="key.deletedByType === 'admin'" class="text-blue-600">
                             <i class="fas fa-user-shield mr-1" />
@@ -1634,12 +1656,12 @@
                         </div>
                       </td>
                       <td
-                        class="whitespace-nowrap px-3 py-2.5 text-sm text-gray-500 dark:text-gray-400"
+                        class="whitespace-nowrap px-3 py-1.5 text-sm text-gray-500 dark:text-gray-400"
                       >
                         {{ formatDate(key.deletedAt) }}
                       </td>
                       <!-- 请求数 -->
-                      <td class="whitespace-nowrap px-3 py-2.5 text-right text-sm">
+                      <td class="whitespace-nowrap px-3 py-1.5 text-right text-sm">
                         <div class="flex items-center justify-end gap-1">
                           <span class="font-medium text-gray-900 dark:text-gray-100">
                             {{ formatNumber(key.usage?.total?.requests || 0) }}
@@ -1648,26 +1670,26 @@
                         </div>
                       </td>
                       <!-- 费用 -->
-                      <td class="whitespace-nowrap px-3 py-2.5 text-right text-sm">
+                      <td class="whitespace-nowrap px-3 py-1.5 text-right text-sm">
                         <span class="font-medium text-green-600 dark:text-green-400">
                           ${{ (key.usage?.total?.cost || 0).toFixed(4) }}
                         </span>
                       </td>
                       <!-- Token数量 -->
-                      <td class="whitespace-nowrap px-3 py-2.5 text-right text-sm">
+                      <td class="whitespace-nowrap px-3 py-1.5 text-right text-sm">
                         <span class="font-medium text-purple-600 dark:text-purple-400">
                           {{ formatTokenCount(key.usage?.total?.tokens || 0) }}
                         </span>
                       </td>
                       <td
-                        class="whitespace-nowrap px-3 py-2.5 text-sm text-gray-700 dark:text-gray-300"
+                        class="whitespace-nowrap px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300"
                       >
                         <span v-if="key.lastUsedAt">
                           {{ formatLastUsed(key.lastUsedAt) }}
                         </span>
                         <span v-else class="text-gray-400">从未使用</span>
                       </td>
-                      <td class="px-3 py-2.5">
+                      <td class="px-3 py-1.5">
                         <div class="flex items-center gap-2">
                           <button
                             v-if="key.canRestore"
@@ -1767,6 +1789,7 @@ import { apiClient } from '@/config/api'
 import { useClientsStore } from '@/stores/clients'
 import { useAuthStore } from '@/stores/auth'
 import * as XLSX from 'xlsx-js-style'
+import IconPicker from '@/components/common/IconPicker.vue'
 import CreateApiKeyModal from '@/components/apikeys/CreateApiKeyModal.vue'
 import EditApiKeyModal from '@/components/apikeys/EditApiKeyModal.vue'
 import RenewApiKeyModal from '@/components/apikeys/RenewApiKeyModal.vue'
@@ -2980,6 +3003,29 @@ const toggleApiKeyStatus = async (key) => {
   }
 }
 
+// 更新API Key图标
+const updateApiKeyIcon = async (keyId, icon) => {
+  try {
+    const data = await apiClient.put(`/admin/api-keys/${keyId}`, {
+      icon: icon
+    })
+
+    if (data.success) {
+      // 更新本地数据
+      const localKey = apiKeys.value.find((k) => k.id === keyId)
+      if (localKey) {
+        localKey.icon = icon
+      }
+      showToast('图标已更新', 'success')
+    } else {
+      showToast(data.message || '更新图标失败', 'error')
+    }
+  } catch (error) {
+    console.error('更新图标失败:', error)
+    showToast('更新图标失败，请重试', 'error')
+  }
+}
+
 // 删除API Key
 const deleteApiKey = async (keyId) => {
   let confirmed = false
@@ -3592,7 +3638,7 @@ onMounted(async () => {
 }
 
 .table-container {
-  overflow-x: auto;
+  overflow-x: hidden;
   overflow-y: hidden;
   margin: 0;
   padding: 0;
@@ -3625,7 +3671,6 @@ onMounted(async () => {
 
 .table-row {
   transition: background-color 0.2s ease;
-  position: relative;
 }
 
 .table-row:hover {