refactor: replace ant-design components with shadcn/ui and update toast notifications

This commit migrates from Ant Design Vue components to Shadcn/Vue components across multiple files in the web-gold frontend application. Key changes include:

- Replaced ant-design-vue imports with shadcn/ui components (Dialog, Button, Input, etc.)
- Swapped ant-design-vue message/toast system for vue-sonner toast notifications
- Updated icon usage from ant-design icons to lucide icons via @iconify/vue
- Removed unused token refresh logic that was incorrectly implemented client-side
- Applied consistent styling updates to match new component library

The token refresh functionality was removed since it should be handled server-side through axios interceptors rather than client-side intervals.

frontend/app/web-gold/src/components/agents/MyFavoritesModal.vue

@@ -1,15 +1,24 @@
 <script setup>
 import { ref, computed, watch } from 'vue'
-import { message } from 'ant-design-vue'
-import {
-  StarFilled,
-  CloseOutlined,
-  EditOutlined,
-  DeleteOutlined,
-  PlusOutlined
-} from '@ant-design/icons-vue'
+import { toast } from 'vue-sonner'
+import { Icon } from '@iconify/vue'
 import { UserPromptApi } from '@/api/userPrompt'
 
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from '@/components/ui/alert-dialog'
+
 import SavePromptModal from '@/components/SavePromptModal.vue'
 
 // Props
@@ -63,7 +72,7 @@ async function loadList() {
     }
   } catch (error) {
     console.error('加载风格列表失败:', error)
-    message.error('加载风格列表失败')
+    toast.error('加载风格列表失败')
   } finally {
     loading.value = false
   }
@@ -91,11 +100,11 @@ async function handleDelete(id) {
     if (index !== -1) {
       promptList.value.splice(index, 1)
     }
-    message.success('删除成功')
+    toast.success('删除成功')
     emit('refresh')
   } catch (error) {
     console.error('删除失败:', error)
-    message.error('删除失败')
+    toast.error('删除失败')
   }
 }
 
@@ -107,96 +116,100 @@ function handleSaveSuccess() {
 </script>
 
 <template>
-  <a-modal
-    :open="visible"
-    title="我创建的"
-    :width="700"
-    :footer="null"
-    @cancel="handleClose"
-  >
-    <!-- 操作栏 -->
-    <div class="action-bar">
-      <a-button type="primary" @click="handleCreate">
-        <template #icon><PlusOutlined /></template>
-        新建风格
-      </a-button>
-      <a-button @click="loadList" :loading="loading">
-        刷新
-      </a-button>
-    </div>
+  <Dialog :open="visible" @update:open="$emit('update:visible', $event)">
+    <DialogContent class="sm:max-w-[700px]">
+      <DialogHeader>
+        <DialogTitle>我创建的</DialogTitle>
+      </DialogHeader>
 
-    <!-- 搜索框 -->
-    <div class="search-bar">
-      <a-input
-        v-model:value="searchKeyword"
-        placeholder="搜索风格..."
-        allow-clear
-      />
-    </div>
+      <!-- 操作栏 -->
+      <div class="flex gap-3 mb-4">
+        <Button @click="handleCreate">
+          <Icon icon="lucide:plus" class="size-4" />
+          新建风格
+        </Button>
+        <Button variant="outline" @click="loadList" :disabled="loading">
+          <Icon v-if="loading" icon="lucide:loader-2" class="size-4 animate-spin" />
+          <Icon v-else icon="lucide:refresh-cw" class="size-4" />
+          刷新
+        </Button>
+      </div>
 
-    <!-- 列表 -->
-    <div class="prompt-list" v-if="!loading && filteredList.length > 0">
-      <div
-        v-for="item in filteredList"
-        :key="item.id"
-        class="prompt-card"
-      >
-        <div class="card-header">
-          <span class="card-name">{{ item.name }}</span>
-          <div class="card-actions">
-            <a-button type="link" size="small" @click="handleEdit(item)">
-              <EditOutlined /> 编辑
-            </a-button>
-            <a-popconfirm
-              title="确定删除此风格？"
-              @confirm="handleDelete(item.id)"
-            >
-              <a-button type="link" size="small" danger>
-                <DeleteOutlined /> 删除
-              </a-button>
-            </a-popconfirm>
+      <!-- 搜索框 -->
+      <div class="mb-4">
+        <Input
+          v-model="searchKeyword"
+          placeholder="搜索风格..."
+        />
+      </div>
+
+      <!-- 加载状态 -->
+      <div v-if="loading" class="flex items-center justify-center py-12">
+        <Icon icon="lucide:loader-2" class="size-8 animate-spin text-primary" />
+      </div>
+
+      <!-- 列表 -->
+      <div class="prompt-list" v-else-if="filteredList.length > 0">
+        <div
+          v-for="item in filteredList"
+          :key="item.id"
+          class="prompt-card"
+        >
+          <div class="card-header">
+            <span class="card-name">{{ item.name }}</span>
+            <div class="flex gap-2">
+              <Button variant="link" size="sm" class="h-auto p-0" @click="handleEdit(item)">
+                <Icon icon="lucide:pencil" class="size-4" />
+                编辑
+              </Button>
+              <AlertDialog>
+                <AlertDialogTrigger as-child>
+                  <Button variant="link" size="sm" class="h-auto p-0 text-destructive">
+                    <Icon icon="lucide:trash-2" class="size-4" />
+                    删除
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>确认删除</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      确定要删除此风格吗？此操作无法撤销。
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>取消</AlertDialogCancel>
+                    <AlertDialogAction @click="handleDelete(item.id)">确认删除</AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </div>
+          </div>
+          <div class="card-content">{{ item.content }}</div>
+          <div class="card-footer">
+            <span class="card-category" v-if="item.category">{{ item.category }}</span>
+            <span class="text-xs text-muted-foreground">使用 {{ item.useCount || 0 }} 次</span>
           </div>
         </div>
-        <div class="card-content">{{ item.content }}</div>
-        <div class="card-footer">
-          <span class="card-category" v-if="item.category">{{ item.category }}</span>
-          <span class="card-use-count">使用 {{ item.useCount || 0 }} 次</span>
-        </div>
       </div>
-    </div>
 
-    <!-- 空状态 -->
-    <div class="empty-state" v-else-if="!loading">
-      <StarFilled class="empty-icon" />
-      <p class="empty-title">暂无收藏的风格</p>
-      <p class="empty-desc">点击"新建风格"创建您的第一个风格</p>
-    </div>
+      <!-- 空状态 -->
+      <div class="empty-state" v-else>
+        <Icon icon="lucide:star" class="empty-icon" />
+        <p class="empty-title">暂无收藏的风格</p>
+        <p class="empty-desc">点击"新建风格"创建您的第一个风格</p>
+      </div>
 
-    <!-- 加载状态 -->
-    <div class="loading-state" v-if="loading">
-      <a-spin />
-    </div>
-
-    <!-- 保存弹窗 -->
-    <SavePromptModal
-      v-model:visible="showSaveModal"
-      :prompt="editingPrompt"
-      @success="handleSaveSuccess"
-    />
-  </a-modal>
+      <!-- 保存弹窗 -->
+      <SavePromptModal
+        v-model:visible="showSaveModal"
+        :prompt="editingPrompt"
+        @success="handleSaveSuccess"
+      />
+    </DialogContent>
+  </Dialog>
 </template>
 
 <style scoped lang="less">
-.action-bar {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.search-bar {
-  margin-bottom: 16px;
-}
-
 .prompt-list {
   display: flex;
   flex-direction: column;
@@ -207,13 +220,13 @@ function handleSaveSuccess() {
 
 .prompt-card {
   padding: 16px;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-gray-200);
   border-radius: 8px;
-  background: var(--color-surface);
+  background: var(--color-bg-card);
   transition: all 0.2s ease;
 
   &:hover {
-    border-color: var(--color-primary);
+    border-color: var(--color-primary-300);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   }
 }
@@ -228,17 +241,12 @@ function handleSaveSuccess() {
 .card-name {
   font-weight: 600;
   font-size: 14px;
-  color: var(--color-text);
-}
-
-.card-actions {
-  display: flex;
-  gap: 8px;
+  color: var(--color-gray-900);
 }
 
 .card-content {
   font-size: 13px;
-  color: var(--color-text-secondary);
+  color: var(--color-gray-600);
   line-height: 1.5;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -256,15 +264,11 @@ function handleSaveSuccess() {
 
 .card-category {
   padding: 2px 8px;
-  background: rgba(24, 144, 255, 0.1);
-  color: #1890ff;
+  background: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
   border-radius: 10px;
 }
 
-.card-use-count {
-  color: var(--color-text-tertiary);
-}
-
 .empty-state {
   display: flex;
   flex-direction: column;
@@ -284,20 +288,13 @@ function handleSaveSuccess() {
 .empty-title {
   font-size: 15px;
   font-weight: 500;
-  color: var(--color-text);
+  color: var(--color-gray-900);
   margin: 0 0 8px 0;
 }
 
 .empty-desc {
   font-size: 13px;
-  color: var(--color-text-secondary);
+  color: var(--color-gray-500);
   margin: 0;
 }
-
-.loading-state {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 48px;
-}
 </style>