feat(ui): 优化响应式布局和样式调整

- 调整 ChatDrawer 组件宽度为响应式设计
- 重构 MyFavoritesModal 组件，移除保存功能，优化搜索和样式
- 优化 Forecast 页面的响应式布局和样式
- 调整登录页验证码组件尺寸适配移动端
- 修复 Verify 组件在移动端的宽度问题

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

@@ -19,8 +19,6 @@ import {
   AlertDialogTrigger
 } from '@/components/ui/alert-dialog'
 
-import SavePromptModal from '@/components/SavePromptModal.vue'
-
 // Props
 const props = defineProps({
   visible: {
@@ -30,22 +28,19 @@ const props = defineProps({
 })
 
 // Emits
-const emit = defineEmits(['update:visible', 'refresh'])
+const emit = defineEmits(['update:visible', 'refresh', 'chat'])
 
 // State
 const loading = ref(false)
 const promptList = ref([])
 const searchKeyword = ref('')
-const showSaveModal = ref(false)
-const editingPrompt = ref(null)
 
-// Computed
+// Computed - 只搜索名称
 const filteredList = computed(() => {
   if (!searchKeyword.value.trim()) return promptList.value
   const keyword = searchKeyword.value.trim().toLowerCase()
   return promptList.value.filter(item =>
-    item.name.toLowerCase().includes(keyword) ||
-    (item.content && item.content.toLowerCase().includes(keyword))
+    item.name.toLowerCase().includes(keyword)
   )
 })
 
@@ -65,7 +60,6 @@ async function loadList() {
       promptList.value = res.data.map(item => ({
         id: item.id,
         name: item.name,
-        content: item.content,
         category: item.category,
         useCount: item.useCount || 0
       }))
@@ -82,20 +76,9 @@ function handleClose() {
   emit('update:visible', false)
 }
 
-function handleCreate() {
-  editingPrompt.value = null
-  showSaveModal.value = true
-}
-
-function handleEdit(item) {
-  editingPrompt.value = { ...item }
-  showSaveModal.value = true
-}
-
 async function handleDelete(id) {
   try {
     await UserPromptApi.deleteUserPrompt(id)
-    // 从列表中移除
     const index = promptList.value.findIndex(p => p.id === id)
     if (index !== -1) {
       promptList.value.splice(index, 1)
@@ -108,26 +91,25 @@ async function handleDelete(id) {
   }
 }
 
-function handleSaveSuccess() {
-  showSaveModal.value = false
-  loadList()
-  emit('refresh')
+function handleUse(item) {
+  emit('chat', {
+    id: item.id,
+    name: item.name,
+    categoryName: item.category || '我的风格'
+  })
+  handleClose()
 }
 </script>
 
 <template>
   <Dialog :open="visible" @update:open="$emit('update:visible', $event)">
-    <DialogContent class="sm:max-w-[700px]">
+    <DialogContent class="sm:max-w-[500px]">
       <DialogHeader>
-        <DialogTitle>我创建的</DialogTitle>
+        <DialogTitle>我创建的风格</DialogTitle>
       </DialogHeader>
 
       <!-- 操作栏 -->
       <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" />
@@ -139,7 +121,7 @@ function handleSaveSuccess() {
       <div class="mb-4">
         <Input
           v-model="searchKeyword"
-          placeholder="搜索风格..."
+          placeholder="搜索风格名称..."
         />
       </div>
 
@@ -156,24 +138,26 @@ function handleSaveSuccess() {
           class="prompt-card"
         >
           <div class="card-header">
-            <span class="card-name">{{ item.name }}</span>
+            <div class="card-info">
+              <span class="card-name">{{ item.name }}</span>
+              <span class="card-category" v-if="item.category">{{ item.category }}</span>
+            </div>
             <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 variant="default" size="sm" @click="handleUse(item)">
+                <Icon icon="lucide:message-circle" class="size-4" />
+                使用
               </Button>
               <AlertDialog>
                 <AlertDialogTrigger as-child>
-                  <Button variant="link" size="sm" class="h-auto p-0 text-destructive">
+                  <Button variant="ghost" size="sm" class="text-muted-foreground hover:text-destructive">
                     <Icon icon="lucide:trash-2" class="size-4" />
-                    删除
                   </Button>
                 </AlertDialogTrigger>
                 <AlertDialogContent>
                   <AlertDialogHeader>
                     <AlertDialogTitle>确认删除</AlertDialogTitle>
                     <AlertDialogDescription>
-                      确定要删除此风格吗？此操作无法撤销。
+                      确定要删除"{{ item.name }}"吗？此操作无法撤销。
                     </AlertDialogDescription>
                   </AlertDialogHeader>
                   <AlertDialogFooter>
@@ -184,9 +168,7 @@ function handleSaveSuccess() {
               </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>
@@ -194,17 +176,10 @@ function handleSaveSuccess() {
 
       <!-- 空状态 -->
       <div class="empty-state" v-else>
-        <Icon icon="lucide:star" class="empty-icon" />
-        <p class="empty-title">暂无收藏的风格</p>
-        <p class="empty-desc">点击"新建风格"创建您的第一个风格</p>
+        <Icon icon="lucide:sparkles" class="empty-icon" />
+        <p class="empty-title">暂无创建的风格</p>
+        <p class="empty-desc">在对话中可保存生成的内容为风格</p>
       </div>
-
-      <!-- 保存弹窗 -->
-      <SavePromptModal
-        v-model:visible="showSaveModal"
-        :prompt="editingPrompt"
-        @success="handleSaveSuccess"
-      />
     </DialogContent>
   </Dialog>
 </template>
@@ -213,21 +188,21 @@ function handleSaveSuccess() {
 .prompt-list {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
   max-height: 400px;
   overflow-y: auto;
 }
 
 .prompt-card {
-  padding: 16px;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 8px;
-  background: var(--color-bg-card);
+  padding: 14px 16px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--card);
   transition: all 0.2s ease;
 
   &:hover {
-    border-color: var(--color-primary-300);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    border-color: var(--primary);
+    box-shadow: 0 2px 8px oklch(0.55 0.14 270 / 0.1);
   }
 }
 
@@ -235,38 +210,41 @@ function handleSaveSuccess() {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 8px;
+}
+
+.card-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  min-width: 0;
 }
 
 .card-name {
   font-weight: 600;
   font-size: 14px;
-  color: var(--color-gray-900);
+  color: var(--foreground);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.card-content {
-  font-size: 13px;
-  color: var(--color-gray-600);
-  line-height: 1.5;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  margin-bottom: 8px;
+.card-category {
+  font-size: 11px;
+  padding: 2px 8px;
+  background: var(--muted);
+  color: var(--muted-foreground);
+  border-radius: 6px;
+  flex-shrink: 0;
 }
 
 .card-footer {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
-  font-size: 12px;
-}
-
-.card-category {
-  padding: 2px 8px;
-  background: rgba(59, 130, 246, 0.1);
-  color: #3b82f6;
-  border-radius: 10px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
 }
 
 .empty-state {
@@ -279,8 +257,8 @@ function handleSaveSuccess() {
 }
 
 .empty-icon {
-  font-size: 48px;
-  color: #f59e0b;
+  font-size: 40px;
+  color: var(--primary);
   margin-bottom: 16px;
   opacity: 0.5;
 }
@@ -288,13 +266,13 @@ function handleSaveSuccess() {
 .empty-title {
   font-size: 15px;
   font-weight: 500;
-  color: var(--color-gray-900);
+  color: var(--foreground);
   margin: 0 0 8px 0;
 }
 
 .empty-desc {
   font-size: 13px;
-  color: var(--color-gray-500);
+  color: var(--muted-foreground);
   margin: 0;
 }
 </style>