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

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

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

@@ -180,7 +180,7 @@ watch(() => props.visible, (val) => {
 
 <template>
   <Sheet :open="visible" @update:open="handleClose">
-    <SheetContent side="right" class="w-full sm:w-[560px] p-0 flex flex-col bg-background">
+    <SheetContent side="right" class="w-full sm:w-[420px] md:w-[560px] lg:w-[640px] p-0 flex flex-col bg-background">
       <!-- Header -->
       <SheetHeader class="shrink-0">
         <ChatDrawerHeader :agent="agent" @history="openHistory" />

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>

frontend/app/web-gold/src/views/trends/Forecast.vue

@@ -350,17 +350,17 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="forecast-page">
+  <div class="forecast-page lg:grid-cols-[1fr_400px] grid-cols-1 gap-4 lg:gap-4 md:gap-3 gap-2">
     <!-- 左侧：热点搜索 -->
     <section class="search-panel">
-      <div class="panel-header">
-        <h2 class="panel-title">热点预测</h2>
+      <div class="panel-header p-3 lg:p-3 md:p-2 p-2">
+        <h2 class="panel-title text-base lg:text-base md:text-base text-sm">热点预测</h2>
       </div>
 
       <!-- 搜索栏 -->
-      <div class="search-bar">
-        <div class="search-input-wrap">
-          <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <div class="search-bar flex lg:flex-row flex-col gap-2 lg:gap-2 md:gap-2 p-2 lg:p-3 md:p-2 p-2">
+        <div class="search-input-wrap flex-1 relative w-full">
+          <svg class="search-icon absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <circle cx="11" cy="11" r="8"/>
             <path d="M21 21l-4.35-4.35"/>
           </svg>
@@ -368,7 +368,7 @@ onMounted(() => {
             v-model="searchKeyword"
             type="text"
             placeholder="搜索热门内容..."
-            class="search-input"
+            class="search-input w-full h-10 lg:h-[38px] md:h-9 h-10 text-base lg:text-base md:text-sm text-base"
             :disabled="isLoading"
             @keypress="handleSearchKeypress"
           />
@@ -376,7 +376,7 @@ onMounted(() => {
         <button
           @click="handleSearch"
           :disabled="isLoading || !searchKeyword.trim()"
-          class="search-btn"
+          class="search-btn w-full lg:w-auto lg:px-[18px] md:px-3.5 px-0 h-10 lg:h-[38px] md:h-9 h-10"
         >
           <span v-if="isLoading" class="btn-spinner"></span>
           <span v-else>搜索</span>
@@ -384,11 +384,11 @@ onMounted(() => {
       </div>
 
       <!-- 筛选器 -->
-      <div class="filters-row">
-        <div class="filter-item">
-          <span class="filter-label">排序</span>
+      <div class="filters-row flex lg:flex-row md:flex-wrap flex-col gap-2 lg:gap-3 md:gap-2 p-0 lg:px-4 md:px-3 px-2 pb-2 lg:pb-3 md:pb-2 pb-2">
+        <div class="filter-item flex items-center gap-2 lg:flex-1 lg:min-w-[140px] md:flex-1 md:min-w-[140px] w-full">
+          <span class="filter-label text-xs text-gray-400 hidden sm:inline">排序</span>
           <Select v-model="searchParams.sort_type">
-            <SelectTrigger class="h-[26px] w-[160px]">
+            <SelectTrigger class="h-[26px] w-full min-[481px]:w-[160px]">
               <SelectValue placeholder="综合" />
             </SelectTrigger>
             <SelectContent>
@@ -398,10 +398,10 @@ onMounted(() => {
             </SelectContent>
           </Select>
         </div>
-        <div class="filter-item">
-          <span class="filter-label">时间</span>
+        <div class="filter-item flex items-center gap-2 lg:flex-1 lg:min-w-[140px] md:flex-1 md:min-w-[140px] w-full">
+          <span class="filter-label text-xs text-gray-400 hidden sm:inline">时间</span>
           <Select v-model="searchParams.publish_time">
-            <SelectTrigger class="h-[26px] w-[160px]">
+            <SelectTrigger class="h-[26px] w-full min-[481px]:w-[160px]">
               <SelectValue placeholder="不限" />
             </SelectTrigger>
             <SelectContent>
@@ -412,10 +412,10 @@ onMounted(() => {
             </SelectContent>
           </Select>
         </div>
-        <div class="filter-item">
-          <span class="filter-label">时长</span>
+        <div class="filter-item flex items-center gap-2 lg:flex-1 lg:min-w-[140px] md:flex-1 md:min-w-[140px] w-full">
+          <span class="filter-label text-xs text-gray-400 hidden sm:inline">时长</span>
           <Select v-model="searchParams.filter_duration">
-            <SelectTrigger class="h-[26px] w-[160px]">
+            <SelectTrigger class="h-[26px] w-full min-[481px]:w-[160px]">
               <SelectValue placeholder="不限" />
             </SelectTrigger>
             <SelectContent>
@@ -446,15 +446,15 @@ onMounted(() => {
         </div>
 
         <!-- 结果卡片 -->
-        <div v-else class="topic-list">
+        <div v-else class="topic-list flex flex-col gap-2">
           <div
             v-for="topic in hotTopics"
             :key="topic.id"
             @click="handleSelectTopic(topic)"
-            class="topic-card"
+            class="topic-card flex items-start gap-3 lg:gap-3 md:gap-2 gap-2 p-3 lg:p-3 md:p-2 p-2"
             :class="{ selected: selectedTopic === topic.id }"
           >
-            <div class="topic-cover">
+            <div class="topic-cover relative shrink-0 w-[88px] lg:w-[88px] md:w-[76px] w-[64px] h-[50px] lg:h-[50px] md:h-[44px] h-[38px]">
               <img
                 v-if="topic.cover"
                 :src="topic.cover"
@@ -466,31 +466,31 @@ onMounted(() => {
                   <path d="M4 4h16a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2zm0 2v12h16V6H4zm6 2l5 4-5 4V8z"/>
                 </svg>
               </div>
-              <span class="topic-num">{{ topic.id }}</span>
+              <span class="topic-num min-w-4 h-4 text-[10px]">{{ topic.id }}</span>
             </div>
 
-            <div class="topic-content">
-              <h3 class="topic-title" @click.stop="openVideo(topic, $event)" :title="topic.title">
+            <div class="topic-content flex-1 min-w-0 flex flex-col gap-1">
+              <h3 class="topic-title text-sm lg:text-sm md:text-xs text-xs" @click.stop="openVideo(topic, $event)" :title="topic.title">
                 {{ truncateTitle(topic.title, 32) }}
               </h3>
-              <div class="topic-meta">
-                <img v-if="topic.authorAvatar" :src="topic.authorAvatar" alt="" class="author-avatar" @error="handleImageError"/>
-                <span class="author-name">{{ topic.author }}</span>
+              <div class="topic-meta flex items-center gap-2">
+                <img v-if="topic.authorAvatar" :src="topic.authorAvatar" alt="" class="author-avatar w-3.5 h-3.5" @error="handleImageError"/>
+                <span class="author-name text-[11px] md:text-[10px] text-[10px]">{{ topic.author }}</span>
               </div>
-              <div class="topic-stats">
-                <span class="stat-item">
-                  <svg viewBox="0 0 20 20" fill="currentColor"><path d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"/></svg>
+              <div class="topic-stats flex gap-2.5">
+                <span class="stat-item inline-flex items-center gap-0.5 text-[11px] md:text-[10px] text-[10px]">
+                  <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor"><path d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"/></svg>
                   {{ formatNumber(topic.playCount) }}
                 </span>
-                <span class="stat-item">
-                  <svg viewBox="0 0 20 20" fill="currentColor"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.834a1 1 0 001.555.832L12 13.202a5 5 0 001.196-.599l.707-.707a1 1 0 00.293-.707V8.465a1 1 0 00-1.707-.707L12 8.465V5a2 2 0 00-2-2H7a1 1 0 000 2h3v3z"/></svg>
+                <span class="stat-item inline-flex items-center gap-0.5 text-[11px] md:text-[10px] text-[10px]">
+                  <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.834a1 1 0 001.555.832L12 13.202a5 5 0 001.196-.599l.707-.707a1 1 0 00.293-.707V8.465a1 1 0 00-1.707-.707L12 8.465V5a2 2 0 00-2-2H7a1 1 0 000 2h3v3z"/></svg>
                   {{ formatNumber(topic.diggCount) }}
                 </span>
               </div>
             </div>
 
-            <button class="action-btn" @click.stop="handleCreate(topic)" title="提取文案">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <button class="action-btn shrink-0 w-7 lg:w-7 md:w-6 w-6 h-7 lg:h-7 md:h-6 h-6" @click.stop="handleCreate(topic)" title="提取文案">
+              <svg class="w-4 lg:w-4 md:w-3.5 w-3.5 h-4 lg:h-4 md:h-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <path d="M12 5v14M5 12h14"/>
               </svg>
             </button>
@@ -500,16 +500,16 @@ onMounted(() => {
     </section>
 
     <!-- 右侧：创作工具 -->
-    <section class="create-panel">
-      <div class="panel-header">
-        <h2 class="panel-title">创作工具</h2>
+    <section class="create-panel lg:min-h-0 min-h-[400px]">
+      <div class="panel-header p-3 lg:p-3 md:p-2 p-2">
+        <h2 class="panel-title text-base lg:text-base md:text-base text-sm">创作工具</h2>
       </div>
 
-      <div class="create-form">
+      <div class="create-form flex flex-col gap-4 lg:gap-4 md:gap-3 gap-3 p-4 lg:p-4 md:p-3 p-2 overflow-y-auto">
         <!-- 文案输入 -->
-        <div class="form-block">
-          <div class="block-header">
-            <label>文案内容</label>
+        <div class="form-block flex flex-col gap-2">
+          <div class="block-header flex justify-between items-center">
+            <label class="text-xs font-medium text-gray-600">文案内容</label>
             <span v-if="isAnalyzing" class="status-tag analyzing">
               <span class="tag-dot"></span>
               分析中
@@ -520,13 +520,13 @@ onMounted(() => {
             :rows="5"
             placeholder="输入文案或点击热点卡片自动提取..."
             :disabled="isAnalyzing"
-            class="content-input min-h-[120px]"
+            class="content-input min-h-[120px] lg:min-h-[120px] md:min-h-[100px] min-h-[100px] text-sm lg:text-sm md:text-xs text-xs"
           />
         </div>
 
         <!-- 风格选择 -->
-        <div class="form-block">
-          <label>文案风格</label>
+        <div class="form-block flex flex-col gap-2">
+          <label class="text-xs font-medium text-gray-600">文案风格</label>
           <StyleSelector
             v-model="topicDetails.selectedAgentId"
             placeholder="选择风格"
@@ -536,24 +536,24 @@ onMounted(() => {
         </div>
 
         <!-- 模式 & 幅度 -->
-        <div class="form-row">
-          <div class="form-block half">
-            <label>生成模式</label>
-            <div class="mode-switch">
+        <div class="form-row flex lg:flex-row flex-col gap-4 lg:gap-3 md:gap-3 gap-3">
+          <div class="form-block half flex-1 lg:flex-1 flex-none flex flex-col gap-2">
+            <label class="text-xs font-medium text-gray-600">生成模式</label>
+            <div class="mode-switch flex gap-2">
               <button
-                :class="['mode-btn', { active: topicDetails.modelType === 'forecast_standard' }]"
+                :class="['mode-btn flex-1 h-9 lg:h-9 md:h-8 h-8 text-sm lg:text-sm md:text-xs text-xs', { active: topicDetails.modelType === 'forecast_standard' }]"
                 @click="topicDetails.modelType = 'forecast_standard'"
               >标准</button>
               <button
-                :class="['mode-btn', { active: topicDetails.modelType === 'forecast_pro' }]"
+                :class="['mode-btn flex-1 h-9 lg:h-9 md:h-8 h-8 text-sm lg:text-sm md:text-xs text-xs', { active: topicDetails.modelType === 'forecast_pro' }]"
                 @click="topicDetails.modelType = 'forecast_pro'"
               >PRO</button>
             </div>
           </div>
-          <div class="form-block half">
-            <div class="block-header">
-              <label>改写幅度</label>
-              <span class="level-num">{{ topicDetails.level }}%</span>
+          <div class="form-block half flex-1 lg:flex-1 flex-none flex flex-col gap-2">
+            <div class="block-header flex justify-between items-center">
+              <label class="text-xs font-medium text-gray-600">改写幅度</label>
+              <span class="level-num text-xs font-semibold text-primary-500">{{ topicDetails.level }}%</span>
             </div>
             <input
               type="range"
@@ -568,7 +568,7 @@ onMounted(() => {
 
         <!-- 生成按钮 -->
         <button
-          class="generate-btn"
+          class="generate-btn w-full h-11 lg:h-11 md:h-10 h-10 text-base lg:text-base md:text-sm text-sm mt-auto"
           :class="{ loading: isGenerating }"
           :disabled="!topicDetails.copywriting?.trim() || !topicDetails.selectedAgentId || isGenerating"
           @click="handleGenerate"
@@ -578,28 +578,28 @@ onMounted(() => {
             <span>生成中</span>
           </template>
           <template v-else>
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
             </svg>
             <span>生成爆款</span>
           </template>
         </button>
-        <p class="points-hint">生成爆款文案将消耗积分</p>
+        <p class="points-hint text-center text-xs lg:text-xs md:text-[10px] text-[10px] text-gray-500 mt-2">生成爆款文案将消耗积分</p>
 
         <!-- 生成结果 -->
         <Transition name="slide-up">
-          <div v-if="generatedContent" class="result-block">
-            <div class="result-header">
-              <span class="result-title">生成结果</span>
-              <button class="copy-btn" @click="copyContent">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <div v-if="generatedContent" class="result-block pt-4 lg:pt-4 md:pt-3 pt-3 border-t border-gray-200">
+            <div class="result-header flex justify-between items-center mb-2.5 lg:mb-2.5 md:mb-2 mb-2">
+              <span class="result-title text-xs lg:text-xs md:text-[10px] text-[10px] font-medium text-gray-600">生成结果</span>
+              <button class="copy-btn inline-flex items-center gap-1 px-2.5 lg:px-2.5 md:px-2 px-2 py-1 lg:py-1 md:py-0.5 py-0.5 text-xs lg:text-xs md:text-[10px] text-[10px]" @click="copyContent">
+                <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <rect x="9" y="9" width="13" height="13" rx="2"/>
                   <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
                 </svg>
                 复制
               </button>
             </div>
-            <div class="result-content">{{ generatedContent }}</div>
+            <div class="result-content p-3.5 lg:p-3.5 md:p-3 p-2 text-sm lg:text-sm md:text-xs text-xs leading-relaxed max-h-60 lg:max-h-60 md:max-h-52 max-h-44">{{ generatedContent }}</div>
           </div>
         </Transition>
       </div>
@@ -1186,15 +1186,4 @@ onMounted(() => {
   opacity: 0;
   transform: translateY(-8px);
 }
-
-// 响应式
-@media (max-width: 900px) {
-  .forecast-page {
-    grid-template-columns: 1fr;
-  }
-
-  .create-panel {
-    min-height: 400px;
-  }
-}
 </style>

yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue

@@ -82,7 +82,7 @@
         v-if="loginData.captchaEnable === 'true'"
         ref="verify"
         :captchaType="captchaType"
-        :imgSize="{ width: '400px', height: '200px' }"
+        :imgSize="{ width: '310px', height: '155px' }"
         mode="pop"
         @success="handleLogin"
       />