refactor: standardize code formatting and linting configuration

- Replace .eslintrc.js with .eslintrc.cjs for better ES module compatibility
- Add .prettierrc configuration for consistent code formatting
- Update package.json with new lint and format scripts
- Add nodemon.json for development hot reloading configuration
- Standardize code formatting across all JavaScript and Vue files
- Update web admin SPA with improved linting rules and formatting
- Add prettier configuration to web admin SPA

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

web/admin-spa/src/components/common/AccountSelector.vue

@@ -2,12 +2,15 @@
   <div ref="triggerRef" class="relative">
     <!-- 选择器主体 -->
     <div
-      class="form-input w-full cursor-pointer flex items-center justify-between"
+      class="form-input flex w-full cursor-pointer items-center justify-between"
       :class="{ 'opacity-50': disabled }"
       @click="!disabled && toggleDropdown()"
     >
       <span :class="modelValue ? 'text-gray-900' : 'text-gray-500'">{{ selectedLabel }}</span>
-      <i class="fas fa-chevron-down text-gray-400 transition-transform duration-200" :class="{ 'rotate-180': showDropdown }" />
+      <i
+        class="fas fa-chevron-down text-gray-400 transition-transform duration-200"
+        :class="{ 'rotate-180': showDropdown }"
+      />
     </div>
 
     <!-- 下拉菜单 -->
@@ -23,26 +26,28 @@
         <div
           v-if="showDropdown"
           ref="dropdownRef"
-          class="absolute z-50 bg-white rounded-lg shadow-lg border border-gray-200 flex flex-col"
+          class="absolute z-50 flex flex-col rounded-lg border border-gray-200 bg-white shadow-lg"
           :style="dropdownStyle"
         >
           <!-- 搜索框 -->
-          <div class="p-3 border-b border-gray-200 flex-shrink-0">
+          <div class="flex-shrink-0 border-b border-gray-200 p-3">
             <div class="relative">
               <input
                 ref="searchInput"
                 v-model="searchQuery"
-                type="text"
-                placeholder="搜索账号名称..."
                 class="form-input w-full text-sm"
-                style="padding-left: 40px; padding-right: 36px;"
+                placeholder="搜索账号名称..."
+                style="padding-left: 40px; padding-right: 36px"
+                type="text"
                 @input="handleSearch"
-              >
-              <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none" />
+              />
+              <i
+                class="fas fa-search pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-gray-400"
+              />
               <button
                 v-if="searchQuery"
-                type="button"
                 class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                type="button"
                 @click="clearSearch"
               >
                 <i class="fas fa-times text-sm" />
@@ -51,10 +56,10 @@
           </div>
 
           <!-- 选项列表 -->
-          <div class="flex-1 overflow-y-auto custom-scrollbar">
+          <div class="custom-scrollbar flex-1 overflow-y-auto">
             <!-- 默认选项 -->
             <div
-              class="px-4 py-2 cursor-pointer hover:bg-gray-50 transition-colors"
+              class="cursor-pointer px-4 py-2 transition-colors hover:bg-gray-50"
               :class="{ 'bg-blue-50': !modelValue }"
               @click="selectAccount(null)"
             >
@@ -63,13 +68,11 @@
 
             <!-- 分组选项 -->
             <div v-if="filteredGroups.length > 0">
-              <div class="px-4 py-2 text-xs font-semibold text-gray-500 bg-gray-50">
-                调度分组
-              </div>
+              <div class="bg-gray-50 px-4 py-2 text-xs font-semibold text-gray-500">调度分组</div>
               <div
                 v-for="group in filteredGroups"
                 :key="`group:${group.id}`"
-                class="px-4 py-2 cursor-pointer hover:bg-gray-50 transition-colors"
+                class="cursor-pointer px-4 py-2 transition-colors hover:bg-gray-50"
                 :class="{ 'bg-blue-50': modelValue === `group:${group.id}` }"
                 @click="selectAccount(`group:${group.id}`)"
               >
@@ -82,13 +85,13 @@
 
             <!-- OAuth 账号 -->
             <div v-if="filteredOAuthAccounts.length > 0">
-              <div class="px-4 py-2 text-xs font-semibold text-gray-500 bg-gray-50">
+              <div class="bg-gray-50 px-4 py-2 text-xs font-semibold text-gray-500">
                 {{ platform === 'claude' ? 'Claude OAuth 专属账号' : 'OAuth 专属账号' }}
               </div>
               <div
                 v-for="account in filteredOAuthAccounts"
                 :key="account.id"
-                class="px-4 py-2 cursor-pointer hover:bg-gray-50 transition-colors"
+                class="cursor-pointer px-4 py-2 transition-colors hover:bg-gray-50"
                 :class="{ 'bg-blue-50': modelValue === account.id }"
                 @click="selectAccount(account.id)"
               >
@@ -96,8 +99,12 @@
                   <div>
                     <span class="text-gray-700">{{ account.name }}</span>
                     <span
-                      class="ml-2 text-xs px-2 py-0.5 rounded-full"
-                      :class="account.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'"
+                      class="ml-2 rounded-full px-2 py-0.5 text-xs"
+                      :class="
+                        account.status === 'active'
+                          ? 'bg-green-100 text-green-700'
+                          : 'bg-red-100 text-red-700'
+                      "
                     >
                       {{ account.status === 'active' ? '正常' : '异常' }}
                     </span>
@@ -111,13 +118,13 @@
 
             <!-- Console 账号（仅 Claude） -->
             <div v-if="platform === 'claude' && filteredConsoleAccounts.length > 0">
-              <div class="px-4 py-2 text-xs font-semibold text-gray-500 bg-gray-50">
+              <div class="bg-gray-50 px-4 py-2 text-xs font-semibold text-gray-500">
                 Claude Console 专属账号
               </div>
               <div
                 v-for="account in filteredConsoleAccounts"
                 :key="account.id"
-                class="px-4 py-2 cursor-pointer hover:bg-gray-50 transition-colors"
+                class="cursor-pointer px-4 py-2 transition-colors hover:bg-gray-50"
                 :class="{ 'bg-blue-50': modelValue === `console:${account.id}` }"
                 @click="selectAccount(`console:${account.id}`)"
               >
@@ -125,8 +132,12 @@
                   <div>
                     <span class="text-gray-700">{{ account.name }}</span>
                     <span
-                      class="ml-2 text-xs px-2 py-0.5 rounded-full"
-                      :class="account.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'"
+                      class="ml-2 rounded-full px-2 py-0.5 text-xs"
+                      :class="
+                        account.status === 'active'
+                          ? 'bg-green-100 text-green-700'
+                          : 'bg-red-100 text-red-700'
+                      "
                     >
                       {{ account.status === 'active' ? '正常' : '异常' }}
                     </span>
@@ -140,7 +151,7 @@
 
             <!-- 无搜索结果 -->
             <div v-if="searchQuery && !hasResults" class="px-4 py-8 text-center text-gray-500">
-              <i class="fas fa-search text-2xl mb-2" />
+              <i class="fas fa-search mb-2 text-2xl" />
               <p class="text-sm">没有找到匹配的账号</p>
             </div>
           </div>
@@ -199,23 +210,25 @@ const lastDirection = ref('') // 记住上次的显示方向
 const selectedLabel = computed(() => {
   // 如果没有选中值，显示默认选项文本
   if (!props.modelValue) return props.defaultOptionText
-  
+
   // 分组
   if (props.modelValue.startsWith('group:')) {
     const groupId = props.modelValue.substring(6)
-    const group = props.groups.find(g => g.id === groupId)
+    const group = props.groups.find((g) => g.id === groupId)
     return group ? `${group.name} (${group.memberCount || 0} 个成员)` : ''
   }
-  
+
   // Console 账号
   if (props.modelValue.startsWith('console:')) {
     const accountId = props.modelValue.substring(8)
-    const account = props.accounts.find(a => a.id === accountId && a.platform === 'claude-console')
+    const account = props.accounts.find(
+      (a) => a.id === accountId && a.platform === 'claude-console'
+    )
     return account ? `${account.name} (${account.status === 'active' ? '正常' : '异常'})` : ''
   }
-  
+
   // OAuth 账号
-  const account = props.accounts.find(a => a.id === props.modelValue)
+  const account = props.accounts.find((a) => a.id === props.modelValue)
   return account ? `${account.name} (${account.status === 'active' ? '正常' : '异常'})` : ''
 })
 
@@ -232,51 +245,50 @@ const sortedAccounts = computed(() => {
 const filteredGroups = computed(() => {
   if (!searchQuery.value) return props.groups
   const query = searchQuery.value.toLowerCase()
-  return props.groups.filter(group => 
-    group.name.toLowerCase().includes(query)
-  )
+  return props.groups.filter((group) => group.name.toLowerCase().includes(query))
 })
 
 // 过滤的 OAuth 账号
 const filteredOAuthAccounts = computed(() => {
-  let accounts = sortedAccounts.value.filter(a => 
-    a.accountType === 'dedicated' && 
-    (props.platform === 'claude' ? a.platform === 'claude-oauth' : a.platform !== 'claude-console')
+  let accounts = sortedAccounts.value.filter(
+    (a) =>
+      a.accountType === 'dedicated' &&
+      (props.platform === 'claude'
+        ? a.platform === 'claude-oauth'
+        : a.platform !== 'claude-console')
   )
-  
+
   if (searchQuery.value) {
     const query = searchQuery.value.toLowerCase()
-    accounts = accounts.filter(account => 
-      account.name.toLowerCase().includes(query)
-    )
+    accounts = accounts.filter((account) => account.name.toLowerCase().includes(query))
   }
-  
+
   return accounts
 })
 
 // 过滤的 Console 账号
 const filteredConsoleAccounts = computed(() => {
   if (props.platform !== 'claude') return []
-  
-  let accounts = sortedAccounts.value.filter(a => 
-    a.accountType === 'dedicated' && a.platform === 'claude-console'
+
+  let accounts = sortedAccounts.value.filter(
+    (a) => a.accountType === 'dedicated' && a.platform === 'claude-console'
   )
-  
+
   if (searchQuery.value) {
     const query = searchQuery.value.toLowerCase()
-    accounts = accounts.filter(account => 
-      account.name.toLowerCase().includes(query)
-    )
+    accounts = accounts.filter((account) => account.name.toLowerCase().includes(query))
   }
-  
+
   return accounts
 })
 
 // 是否有搜索结果
 const hasResults = computed(() => {
-  return filteredGroups.value.length > 0 || 
-         filteredOAuthAccounts.value.length > 0 || 
-         filteredConsoleAccounts.value.length > 0
+  return (
+    filteredGroups.value.length > 0 ||
+    filteredOAuthAccounts.value.length > 0 ||
+    filteredConsoleAccounts.value.length > 0
+  )
 })
 
 // 格式化日期
@@ -285,12 +297,13 @@ const formatDate = (dateString) => {
   const date = new Date(dateString)
   const now = new Date()
   const diffInHours = (now - date) / (1000 * 60 * 60)
-  
+
   if (diffInHours < 24) {
     return '今天创建'
   } else if (diffInHours < 48) {
     return '昨天创建'
-  } else if (diffInHours < 168) { // 7天内
+  } else if (diffInHours < 168) {
+    // 7天内
     return `${Math.floor(diffInHours / 24)} 天前`
   } else {
     return date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' })
@@ -300,28 +313,28 @@ const formatDate = (dateString) => {
 // 更新下拉菜单位置
 const updateDropdownPosition = () => {
   if (!showDropdown.value || !dropdownRef.value || !triggerRef.value) return
-  
+
   const trigger = triggerRef.value
   if (!trigger) return
-  
+
   const rect = trigger.getBoundingClientRect()
   const windowHeight = window.innerHeight
   const windowWidth = window.innerWidth
   const spaceBelow = windowHeight - rect.bottom
   const spaceAbove = rect.top
   const margin = 8 // 边距
-  
+
   // 获取下拉框的高度
-  const dropdownHeight = dropdownRef.value.offsetHeight
-  
+  // const dropdownHeight = dropdownRef.value.offsetHeight
+
   // 计算最大可用高度
   const maxHeightBelow = spaceBelow - margin
   const maxHeightAbove = spaceAbove - margin
-  
+
   // 决定显示方向和最大高度
   let showAbove = false
   let maxHeight = maxHeightBelow
-  
+
   // 优先使用上次的方向，除非空间不足
   if (lastDirection.value === 'above' && maxHeightAbove >= 150) {
     showAbove = true
@@ -336,10 +349,10 @@ const updateDropdownPosition = () => {
       maxHeight = maxHeightAbove
     }
   }
-  
+
   // 记住这次的方向
   lastDirection.value = showAbove ? 'above' : 'below'
-  
+
   // 确保下拉框不超出视窗左右边界
   let left = rect.left
   const dropdownWidth = rect.width
@@ -349,16 +362,13 @@ const updateDropdownPosition = () => {
   if (left < margin) {
     left = margin
   }
-  
+
   dropdownStyle.value = {
     position: 'fixed',
     left: `${left}px`,
     width: `${rect.width}px`,
     maxHeight: `${Math.min(maxHeight, 400)}px`, // 限制最大高度为400px
-    ...(showAbove
-      ? { bottom: `${windowHeight - rect.top}px` }
-      : { top: `${rect.bottom}px` }
-    )
+    ...(showAbove ? { bottom: `${windowHeight - rect.top}px` } : { top: `${rect.bottom}px` })
   }
 }
 
@@ -370,7 +380,7 @@ const toggleDropdown = () => {
     const windowHeight = window.innerHeight
     const spaceBelow = windowHeight - rect.bottom
     const margin = 8
-    
+
     // 预先设置一个合理的初始位置
     dropdownStyle.value = {
       position: 'fixed',
@@ -465,4 +475,4 @@ watch(showDropdown, (newVal) => {
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
   background-color: #a0aec0;
 }
-</style>
+</style>

web/admin-spa/src/components/common/ConfirmDialog.vue

@@ -1,47 +1,43 @@
 <template>
   <Teleport to="body">
-    <Transition
-      name="modal"
-      appear
-    >
-      <div 
+    <Transition appear name="modal">
+      <div
         v-if="isVisible"
-        class="fixed inset-0 modal z-[100] flex items-center justify-center p-4"
+        class="modal fixed inset-0 z-[100] flex items-center justify-center p-4"
         @click.self="handleCancel"
       >
-        <div class="modal-content w-full max-w-md p-6 mx-auto">
-          <div class="flex items-start gap-4 mb-6">
-            <div class="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-amber-500 to-amber-600 rounded-xl flex items-center justify-center">
-              <i class="fas fa-exclamation-triangle text-white text-lg" />
+        <div class="modal-content mx-auto w-full max-w-md p-6">
+          <div class="mb-6 flex items-start gap-4">
+            <div
+              class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-amber-500 to-amber-600"
+            >
+              <i class="fas fa-exclamation-triangle text-lg text-white" />
             </div>
             <div class="flex-1">
-              <h3 class="text-lg font-semibold text-gray-900 mb-2">
+              <h3 class="mb-2 text-lg font-semibold text-gray-900">
                 {{ title }}
               </h3>
-              <div class="text-gray-600 leading-relaxed whitespace-pre-line">
+              <div class="whitespace-pre-line leading-relaxed text-gray-600">
                 {{ message }}
               </div>
             </div>
           </div>
-          
+
           <div class="flex items-center justify-end gap-3">
-            <button 
-              class="btn bg-gray-100 text-gray-700 hover:bg-gray-200 px-6 py-3"
+            <button
+              class="btn bg-gray-100 px-6 py-3 text-gray-700 hover:bg-gray-200"
               :disabled="isProcessing"
               @click="handleCancel"
             >
               {{ cancelText }}
             </button>
-            <button 
+            <button
               class="btn btn-warning px-6 py-3"
-              :class="{ 'opacity-50 cursor-not-allowed': isProcessing }"
+              :class="{ 'cursor-not-allowed opacity-50': isProcessing }"
               :disabled="isProcessing"
               @click="handleConfirm"
             >
-              <div
-                v-if="isProcessing"
-                class="loading-spinner mr-2"
-              />
+              <div v-if="isProcessing" class="loading-spinner mr-2" />
               {{ confirmText }}
             </button>
           </div>
@@ -64,7 +60,12 @@ const cancelText = ref('取消')
 let resolvePromise = null
 
 // 显示确认对话框
-const showConfirm = (titleText, messageText, confirmTextParam = '确认', cancelTextParam = '取消') => {
+const showConfirm = (
+  titleText,
+  messageText,
+  confirmTextParam = '确认',
+  cancelTextParam = '取消'
+) => {
   return new Promise((resolve) => {
     title.value = titleText
     message.value = messageText
@@ -79,9 +80,9 @@ const showConfirm = (titleText, messageText, confirmTextParam = '确认', cancel
 // 处理确认
 const handleConfirm = () => {
   if (isProcessing.value) return
-  
+
   isProcessing.value = true
-  
+
   // 延迟一点时间以显示loading状态
   setTimeout(() => {
     isVisible.value = false
@@ -96,7 +97,7 @@ const handleConfirm = () => {
 // 处理取消
 const handleCancel = () => {
   if (isProcessing.value) return
-  
+
   isVisible.value = false
   if (resolvePromise) {
     resolvePromise(false)
@@ -107,7 +108,7 @@ const handleCancel = () => {
 // 键盘事件处理
 const handleKeydown = (event) => {
   if (!isVisible.value) return
-  
+
   if (event.key === 'Escape') {
     handleCancel()
   } else if (event.key === 'Enter' && !event.shiftKey && !event.ctrlKey && !event.altKey) {
@@ -150,7 +151,7 @@ defineExpose({
 }
 
 .btn {
-  @apply inline-flex items-center justify-center px-4 py-2 text-sm font-semibold rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
+  @apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
 }
 
 .btn-danger {
@@ -162,7 +163,7 @@ defineExpose({
 }
 
 .loading-spinner {
-  @apply w-4 h-4 border-2 border-gray-300 border-t-white rounded-full animate-spin;
+  @apply h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-white;
 }
 
 /* Modal transitions */
@@ -204,4 +205,4 @@ defineExpose({
 .modal-content::-webkit-scrollbar-thumb:hover {
   background: #94a3b8;
 }
-</style>
+</style>

web/admin-spa/src/components/common/ConfirmModal.vue

@@ -1,33 +1,32 @@
 <template>
   <Teleport to="body">
-    <div
-      v-if="show"
-      class="fixed inset-0 modal z-50 flex items-center justify-center p-4"
-    >
-      <div class="modal-content w-full max-w-md p-6 mx-auto">
-        <div class="flex items-start gap-4 mb-6">
-          <div class="w-12 h-12 bg-gradient-to-br from-yellow-400 to-yellow-500 rounded-full flex items-center justify-center flex-shrink-0">
-            <i class="fas fa-exclamation text-white text-xl" />
+    <div v-if="show" class="modal fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div class="modal-content mx-auto w-full max-w-md p-6">
+        <div class="mb-6 flex items-start gap-4">
+          <div
+            class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-yellow-400 to-yellow-500"
+          >
+            <i class="fas fa-exclamation text-xl text-white" />
           </div>
           <div class="flex-1">
-            <h3 class="text-lg font-bold text-gray-900 mb-2">
+            <h3 class="mb-2 text-lg font-bold text-gray-900">
               {{ title }}
             </h3>
-            <p class="text-gray-600 text-sm leading-relaxed whitespace-pre-line">
+            <p class="whitespace-pre-line text-sm leading-relaxed text-gray-600">
               {{ message }}
             </p>
           </div>
         </div>
-        
+
         <div class="flex gap-3">
-          <button 
-            class="flex-1 px-4 py-2.5 bg-gray-100 text-gray-700 rounded-xl font-medium hover:bg-gray-200 transition-colors"
+          <button
+            class="flex-1 rounded-xl bg-gray-100 px-4 py-2.5 font-medium text-gray-700 transition-colors hover:bg-gray-200"
             @click="$emit('cancel')"
           >
             {{ cancelText }}
           </button>
-          <button 
-            class="flex-1 px-4 py-2.5 bg-gradient-to-r from-yellow-500 to-orange-500 text-white rounded-xl font-medium hover:from-yellow-600 hover:to-orange-600 transition-colors shadow-sm"
+          <button
+            class="flex-1 rounded-xl bg-gradient-to-r from-yellow-500 to-orange-500 px-4 py-2.5 font-medium text-white shadow-sm transition-colors hover:from-yellow-600 hover:to-orange-600"
             @click="$emit('confirm')"
           >
             {{ confirmText }}
@@ -63,4 +62,4 @@ defineProps({
 })
 
 defineEmits(['confirm', 'cancel'])
-</script>
+</script>

web/admin-spa/src/components/common/LogoTitle.vue

@@ -1,45 +1,35 @@
 <template>
   <div class="flex items-center gap-4">
     <!-- Logo区域 -->
-    <div class="w-12 h-12 bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-gray-300/30 rounded-xl flex items-center justify-center backdrop-blur-sm flex-shrink-0 overflow-hidden">
+    <div
+      class="flex h-12 w-12 flex-shrink-0 items-center justify-center overflow-hidden rounded-xl border border-gray-300/30 bg-gradient-to-br from-blue-500/20 to-purple-500/20 backdrop-blur-sm"
+    >
       <template v-if="!loading">
         <img
-          v-if="logoSrc" 
-          :src="logoSrc" 
+          v-if="logoSrc"
           alt="Logo"
-          class="w-8 h-8 object-contain"
+          class="h-8 w-8 object-contain"
+          :src="logoSrc"
           @error="handleLogoError"
-        >
-        <i
-          v-else
-          class="fas fa-cloud text-xl text-gray-700"
         />
+        <i v-else class="fas fa-cloud text-xl text-gray-700" />
       </template>
-      <div
-        v-else
-        class="w-8 h-8 bg-gray-300/50 rounded animate-pulse"
-      />
+      <div v-else class="h-8 w-8 animate-pulse rounded bg-gray-300/50" />
     </div>
-    
+
     <!-- 标题区域 -->
-    <div class="flex flex-col justify-center min-h-[48px]">
+    <div class="flex min-h-[48px] flex-col justify-center">
       <div class="flex items-center gap-3">
         <template v-if="!loading && title">
-          <h1 :class="['text-2xl font-bold header-title leading-tight', titleClass]">
+          <h1 :class="['header-title text-2xl font-bold leading-tight', titleClass]">
             {{ title }}
           </h1>
         </template>
-        <div
-          v-else-if="loading"
-          class="h-8 w-64 bg-gray-300/50 rounded animate-pulse"
-        />
+        <div v-else-if="loading" class="h-8 w-64 animate-pulse rounded bg-gray-300/50" />
         <!-- 插槽用于版本信息等额外内容 -->
         <slot name="after-title" />
       </div>
-      <p
-        v-if="subtitle"
-        class="text-gray-600 text-sm leading-tight mt-0.5"
-      >
+      <p v-if="subtitle" class="mt-0.5 text-sm leading-tight text-gray-600">
         {{ subtitle }}
       </p>
     </div>
@@ -98,4 +88,4 @@ const handleLogoError = (e) => {
 .header-title {
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
-</style>
+</style>

web/admin-spa/src/components/common/StatCard.vue

@@ -2,16 +2,13 @@
   <div class="stat-card">
     <div class="flex items-start justify-between">
       <div class="flex-1">
-        <p class="text-xs sm:text-sm font-medium text-gray-600 mb-1">
+        <p class="mb-1 text-xs font-medium text-gray-600 sm:text-sm">
           {{ title }}
         </p>
-        <p class="text-2xl sm:text-3xl font-bold text-gray-800">
+        <p class="text-2xl font-bold text-gray-800 sm:text-3xl">
           {{ value }}
         </p>
-        <p
-          v-if="subtitle"
-          class="text-xs sm:text-sm text-gray-500 mt-1.5 sm:mt-2"
-        >
+        <p v-if="subtitle" class="mt-1.5 text-xs text-gray-500 sm:mt-2 sm:text-sm">
           {{ subtitle }}
         </p>
       </div>
@@ -62,4 +59,4 @@ const iconBgClass = computed(() => {
 
 <style scoped>
 /* 使用全局样式中定义的 .stat-card 和 .stat-icon 类 */
-</style>
+</style>

web/admin-spa/src/components/common/ToastNotification.vue

@@ -4,11 +4,7 @@
       <div
         v-for="toast in toasts"
         :key="toast.id"
-        :class="[
-          'toast',
-          `toast-${toast.type}`,
-          toast.isVisible ? 'toast-show' : 'toast-hide'
-        ]"
+        :class="['toast', `toast-${toast.type}`, toast.isVisible ? 'toast-show' : 'toast-hide']"
         @click="removeToast(toast.id)"
       >
         <div class="toast-content">
@@ -16,24 +12,18 @@
             <i :class="getIconClass(toast.type)" />
           </div>
           <div class="toast-body">
-            <div
-              v-if="toast.title"
-              class="toast-title"
-            >
+            <div v-if="toast.title" class="toast-title">
               {{ toast.title }}
             </div>
             <div class="toast-message">
               {{ toast.message }}
             </div>
           </div>
-          <button 
-            class="toast-close"
-            @click.stop="removeToast(toast.id)"
-          >
+          <button class="toast-close" @click.stop="removeToast(toast.id)">
             <i class="fas fa-times" />
           </button>
         </div>
-        <div 
+        <div
           v-if="toast.duration > 0"
           class="toast-progress"
           :style="{ animationDuration: `${toast.duration}ms` }"
@@ -72,34 +62,34 @@ const addToast = (message, type = 'info', title = null, duration = 5000) => {
     duration,
     isVisible: false
   }
-  
+
   toasts.value.push(toast)
-  
+
   // 下一帧显示动画
   setTimeout(() => {
     toast.isVisible = true
   }, 10)
-  
+
   // 自动移除
   if (duration > 0) {
     setTimeout(() => {
       removeToast(id)
     }, duration)
   }
-  
+
   return id
 }
 
 // 移除Toast
 const removeToast = (id) => {
-  const index = toasts.value.findIndex(toast => toast.id === id)
+  const index = toasts.value.findIndex((toast) => toast.id === id)
   if (index > -1) {
     const toast = toasts.value[index]
     toast.isVisible = false
-    
+
     // 等待动画完成后移除
     setTimeout(() => {
-      const currentIndex = toasts.value.findIndex(t => t.id === id)
+      const currentIndex = toasts.value.findIndex((t) => t.id === id)
       if (currentIndex > -1) {
         toasts.value.splice(currentIndex, 1)
       }
@@ -109,10 +99,10 @@ const removeToast = (id) => {
 
 // 清除所有Toast
 const clearAllToasts = () => {
-  toasts.value.forEach(toast => {
+  toasts.value.forEach((toast) => {
     toast.isVisible = false
   })
-  
+
   setTimeout(() => {
     toasts.value.length = 0
   }, 300)
@@ -351,7 +341,7 @@ defineExpose({
     right: 10px;
     left: 10px;
   }
-  
+
   .toast {
     min-width: auto;
     max-width: none;
@@ -377,4 +367,4 @@ defineExpose({
 .toast-list-move {
   transition: transform 0.3s ease;
 }
-</style>
+</style>