输出区调整完成

lingtropy-client/src/renderer/components/ResultSection.vue

@@ -0,0 +1,529 @@
+<template>
+  <transition name="fade">
+    <div v-if="results.length > 0 || isGenerating" class="result-section">
+      <div class="result-header-bar">
+        <h2 class="section-title">
+          <span class="section-icon">✨</span>
+          改写结果
+        </h2>
+        <div class="result-stats">
+          <div class="layout-toggle">
+            <button
+              @click="$emit('update:layout', 'list')"
+              :class="{ active: layoutMode === 'list' }"
+              class="layout-button"
+            >
+              <span class="layout-icon">📋</span>
+            </button>
+            <button
+              @click="$emit('update:layout', 'grid')"
+              :class="{ active: layoutMode === 'grid' }"
+              class="layout-button"
+            >
+              <span class="layout-icon">📊</span>
+            </button>
+          </div>
+          <span class="model-badge">{{ model }}</span>
+          <span class="count-badge">{{ results.length }} 个结果</span>
+        </div>
+      </div>
+
+      <div v-if="isGenerating && results.length === 0" class="generating-placeholder">
+        <div class="generating-animation">
+          <div class="dot"></div>
+          <div class="dot"></div>
+          <div class="dot"></div>
+        </div>
+        <p>正在使用 {{ model }} 生成改写结果...</p>
+      </div>
+
+      <div v-else class="results-container">
+        <div :class="['results-list', layoutMode === 'grid' ? 'grid-layout' : '']">
+          <div
+            v-for="(text, index) in results"
+            :key="index"
+            :class="{
+              'expanded-result': expandedResults[index],
+              'grid-item': layoutMode === 'grid'
+            }"
+            :style="{ animationDelay: `${index * 0.1}s` }"
+            class="result-block"
+          >
+            <div class="result-header">
+              <div class="result-number">
+                结果 #{{ index + 1 }}
+                <span class="char-count">{{ text.length }} 字</span>
+              </div>
+              <div class="result-actions">
+                <button @click="handleCopy(text, index)" class="action-button copy-button">
+                  <span v-if="copiedIndex === index">已复制!</span>
+                  <span v-else>复制</span>
+                </button>
+                <button @click="toggleExpand(index)" class="action-button expand-button">
+                  {{ expandedResults[index] ? '收起' : '展开' }}
+                </button>
+              </div>
+            </div>
+            <div :class="{ expanded: expandedResults[index] }" class="result-content">
+              {{ text }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else class="empty-result-section">
+      <div class="empty-state">
+        <div class="empty-icon">✨</div>
+        <h3>等待生成结果</h3>
+        <p>请在左侧输入文本并点击生成按钮</p>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+const { results, isGenerating, model, layoutMode } = defineProps({
+  results: {
+    type: Array,
+    default: () => []
+  },
+  isGenerating: {
+    type: Boolean,
+    default: false
+  },
+  model: {
+    type: String,
+    required: true
+  },
+  layoutMode: {
+    type: String,
+    default: 'list'
+  }
+})
+
+defineEmits(['update:layout'])
+
+const expandedResults = reactive({})
+const copiedIndex = ref(null)
+
+const handleCopy = (text, index) => {
+  navigator.clipboard
+    .writeText(text)
+    .then(() => {
+      copiedIndex.value = index
+      setTimeout(() => {
+        copiedIndex.value = null
+      }, 2000)
+    })
+    .catch((err) => {
+      console.error('复制失败:', err)
+      showToast('复制失败，请重试')
+    })
+}
+
+const toggleExpand = (index) => {
+  expandedResults[index] = !expandedResults[index]
+}
+
+const showToast = (message) => {
+  const toast = document.createElement('div')
+  toast.className = 'toast-message'
+  toast.textContent = message
+  document.body.appendChild(toast)
+
+  setTimeout(() => {
+    toast.classList.add('show')
+    setTimeout(() => {
+      toast.classList.remove('show')
+      setTimeout(() => {
+        document.body.removeChild(toast)
+      }, 300)
+    }, 2000)
+  }, 10)
+}
+</script>
+
+<style scoped>
+/* 右侧结果区域 */
+.result-section,
+.empty-result-section {
+  flex: 1;
+  background-color: white;
+  border-radius: 16px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  padding: 28px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+  background-color: rgba(255, 255, 255, 0.95);
+}
+
+.result-header-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.result-stats {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.model-badge,
+.count-badge {
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.model-badge {
+  background-color: #e8f5e9;
+  color: #2e7d32;
+}
+
+.count-badge {
+  background-color: #e3f2fd;
+  color: #1565c0;
+}
+
+.layout-toggle {
+  display: flex;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #e0e0e0;
+}
+
+.layout-button {
+  background-color: white;
+  border: none;
+  padding: 6px 10px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.layout-button.active {
+  background-color: #f0f0f0;
+}
+
+.layout-icon {
+  font-size: 16px;
+}
+
+.results-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px;
+}
+
+.results-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 4px;
+}
+
+.results-list.grid-layout {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.result-block {
+  background-color: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  border: 1px solid #e8e8e8;
+  width: 100%;
+  transition: all 0.3s ease;
+  animation: fadeIn 0.5s ease forwards;
+  opacity: 0;
+  transform: translateY(20px);
+  display: flex;
+  flex-direction: column;
+}
+
+.result-block.grid-item {
+  height: 250px;
+  transition: height 0.5s ease;
+}
+
+.result-block.grid-item.expanded-result {
+  height: auto;
+  min-height: 250px;
+}
+
+.result-block:hover {
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
+  transform: translateY(-2px);
+}
+
+.result-header {
+  background-color: #f9f9f9;
+  padding: 14px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.result-number {
+  font-weight: 600;
+  color: #2ecc71;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.result-number::before {
+  content: '';
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  background-color: #2ecc71;
+  border-radius: 50%;
+}
+
+.result-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.action-button {
+  background-color: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  padding: 6px 12px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+  position: relative;
+  min-width: 60px;
+  text-align: center;
+}
+
+.action-button:hover {
+  background-color: #f0f0f0;
+  border-color: #ccc;
+}
+
+.copy-button {
+  color: #2ecc71;
+  border-color: #2ecc71;
+}
+
+.copy-button:hover {
+  background-color: rgba(46, 204, 113, 0.1);
+  border-color: #2ecc71;
+}
+
+.expand-button {
+  color: #666;
+}
+
+.result-content {
+  padding: 16px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  line-height: 1.6;
+  max-height: 200px;
+  overflow: hidden;
+  position: relative;
+  text-align: justify;
+  hyphens: auto;
+  transition: max-height 0.5s ease;
+  flex: 1;
+}
+
+.result-content:not(.expanded)::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 60px;
+  background: linear-gradient(transparent, white);
+  pointer-events: none;
+  transition: opacity 0.3s;
+}
+
+.result-content.expanded {
+  max-height: none;
+}
+
+/* 生成中占位符 */
+.generating-placeholder {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  text-align: center;
+  color: #666;
+}
+
+.generating-placeholder p {
+  margin-top: 20px;
+  font-size: 16px;
+}
+
+.generating-animation {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.dot {
+  width: 12px;
+  height: 12px;
+  background-color: #2ecc71;
+  border-radius: 50%;
+  animation: bounce 1.4s infinite ease-in-out both;
+}
+
+.dot:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+/* 空状态 */
+.empty-state {
+  text-align: center;
+  padding: 40px;
+  color: #666;
+}
+
+.empty-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  color: #ccc;
+}
+
+.empty-state h3 {
+  font-size: 20px;
+  margin-bottom: 8px;
+  color: #333;
+}
+
+.empty-state p {
+  font-size: 16px;
+  color: #666;
+}
+
+/* 标题样式 */
+.section-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0 0 16px 0;
+  color: #333;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.section-icon {
+  font-size: 20px;
+}
+
+/* 字数统计 */
+.char-count {
+  font-size: 14px;
+  color: #666;
+  font-weight: normal;
+  margin-left: auto;
+  background-color: #f0f0f0;
+  padding: 2px 8px;
+  border-radius: 12px;
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes bounce {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s, transform 0.3s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .result-section,
+  .empty-result-section {
+    width: 100%;
+  }
+
+  .results-list.grid-layout {
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .result-section,
+  .empty-result-section {
+    padding: 20px;
+    border-radius: 12px;
+  }
+}
+
+@media (max-width: 480px) {
+  .result-section,
+  .empty-result-section {
+    padding: 16px;
+  }
+
+  .result-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .result-actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .results-list.grid-layout {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .result-block.grid-item {
+    height: auto;
+  }
+}
+</style> 

lingtropy-client/src/renderer/screens/TextRewritingTool.vue

@@ -7,113 +7,28 @@
         v-model:model="currentModel"
         @rewrite="handleRewrite"
       />
-      <!-- 右侧结果区域 -->
+      <ResultSection
-      <transition name="fade">
+        :results="rewrittenText"
-        <div v-if="rewrittenText.length > 0 || isGenerating" class="result-section">
+        :is-generating="isGenerating"
-          <div class="result-header-bar">
+        :model="currentModel"
-            <h2 class="section-title">
+        :layout-mode="layoutMode"
-              <span class="section-icon">✨</span>
+        @update:layout="(newLayout) => layoutMode = newLayout"
-              改写结果
+      />
-            </h2>
-            <div class="result-stats">
-              <div class="layout-toggle">
-                <button
-                  @click="toggleLayout('list')"
-                  :class="{ active: layoutMode === 'list' }"
-                  class="layout-button"
-                >
-                  <span class="layout-icon">📋</span>
-                </button>
-                <button
-                  @click="toggleLayout('grid')"
-                  :class="{ active: layoutMode === 'grid' }"
-                  class="layout-button"
-                >
-                  <span class="layout-icon">📊</span>
-                </button>
-              </div>
-              <span class="model-badge">{{ currentModel }}</span>
-              <span class="count-badge">{{ rewrittenText.length }} 个结果</span>
-            </div>
-          </div>
-
-          <div v-if="isGenerating && rewrittenText.length === 0" class="generating-placeholder">
-            <div class="generating-animation">
-              <div class="dot"></div>
-              <div class="dot"></div>
-              <div class="dot"></div>
-            </div>
-            <p>正在使用 {{ currentModel }} 生成改写结果...</p>
-          </div>
-
-          <div v-else class="results-container">
-            <div :class="['results-list', layoutMode === 'grid' ? 'grid-layout' : '']">
-              <div
-                v-for="(text, index) in rewrittenText"
-                :key="index"
-                :class="{
-                  'expanded-result': expandedResults[index],
-                  'grid-item': layoutMode === 'grid'
-                }"
-                :style="{ animationDelay: `${index * 0.1}s` }"
-                class="result-block"
-              >
-                <div class="result-header">
-                  <div class="result-number">
-                    结果 #{{ index + 1 }}
-                    <span class="char-count">{{ text.length }} 字</span>
-                  </div>
-                  <div class="result-actions">
-                    <button @click="copyText(text, index)" class="action-button copy-button">
-                      <span v-if="copiedIndex === index">已复制!</span>
-                      <span v-else>复制</span>
-                    </button>
-                    <button @click="toggleExpand(index)" class="action-button expand-button">
-                      {{ expandedResults[index] ? '收起' : '展开' }}
-                    </button>
-                  </div>
-                </div>
-                <div :class="{ expanded: expandedResults[index] }" class="result-content">
-                  {{ text }}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div v-else class="empty-result-section">
-          <div class="empty-state">
-            <div class="empty-icon">✨</div>
-            <h3>等待生成结果</h3>
-            <p>请在左侧输入文本并点击生成按钮</p>
-          </div>
-        </div>
-      </transition>
-   
     </div>
+    <h1></h1>
     <FooterComponent />
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, defineComponent } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import DisclaimerComponent from '../components/DisclaimerComponent.vue'
 import InputSection from '../components/InputSection.vue'
+import ResultSection from '../components/ResultSection.vue'
 import FooterComponent from '../components/FooterComponent.vue'
 
-// 使用 defineComponent 包装组件
-defineComponent({
-  name: 'TextRewritingTool',
-  components: {
-    DisclaimerComponent,
-    InputSection,
-    FooterComponent
-  }
-})
-
 const rewrittenText = ref([])
-const expandedResults = reactive({})
 const isGenerating = ref(false)
-const copiedIndex = ref(null)
 const layoutMode = ref('list')
 const currentModel = ref('gpt-4o')
 
@@ -128,67 +43,6 @@ onMounted(async () => {
   }
 })
 
-const handleRewrite = async ({ mode, text, count, model, key }) => {
-  // 清空之前的改写结果
-  Object.keys(expandedResults).forEach((key) => {
-    delete expandedResults[key]
-  })
-  
-  isGenerating.value = true
-  rewrittenText.value = []
-
-  try {
-    // 获取 baseUrl
-    const baseUrl = await window.mainApi.invoke('getBaseUrl')
-    
-    // 监听部分结果
-    window.mainApi.on('openai-partial-response', (_, { index, content }) => {
-      if (!rewrittenText.value[index]) {
-        rewrittenText.value[index] = ''
-      }
-      rewrittenText.value[index] += content
-    })
-
-    // 调用 API
-    const results = await window.mainApi.invoke(
-      'call-openai',
-      baseUrl,  // 使用获取到的 baseUrl
-      key,
-      model,
-      count,
-      text
-    )
-
-    results.forEach(({ index, response }) => {
-      rewrittenText.value[index] = response
-    })
-  } catch (error) {
-    console.error('调用 API 失败:', error)
-    showToast('调用 API 失败，请稍后重试')
-  } finally {
-    isGenerating.value = false
-  }
-}
-
-const copyText = (text, index) => {
-  navigator.clipboard
-    .writeText(text)
-    .then(() => {
-      copiedIndex.value = index
-      setTimeout(() => {
-        copiedIndex.value = null
-      }, 2000)
-    })
-    .catch((err) => {
-      console.error('复制失败:', err)
-      showToast('复制失败，请重试')
-    })
-}
-
-const toggleExpand = (index) => {
-  expandedResults[index] = !expandedResults[index]
-}
-
 const showToast = (message) => {
   const toast = document.createElement('div')
   toast.className = 'toast-message'
@@ -206,18 +60,48 @@ const showToast = (message) => {
   }, 10)
 }
 
-// 新增：切换布局模式
+const handleRewrite = async ({ mode, text, count, model, key }) => {
-const toggleLayout = (newLayout) => {
+  isGenerating.value = true
-  layoutMode.value = newLayout
+  rewrittenText.value = []
-  // 可选：保存用户偏好
+
+  try {
+    const baseUrl = await window.mainApi.invoke('getBaseUrl')
+    
+    window.mainApi.on('openai-partial-response', (_, { index, content }) => {
+      if (!rewrittenText.value[index]) {
+        rewrittenText.value[index] = ''
+      }
+      rewrittenText.value[index] += content
+    })
+
+    const results = await window.mainApi.invoke(
+      'call-openai',
+      baseUrl,
+      key,
+      model,
+      count,
+      text
+    )
+
+    results.forEach(({ index, response }) => {
+      rewrittenText.value[index] = response
+    })
+  } catch (error) {
+    console.error('调用 API 失败:', error)
+    showToast('调用 API 失败，请稍后重试')
+  } finally {
+    isGenerating.value = false
+  }
+}
+
+watch(layoutMode, (newLayout) => {
   window.mainApi.invoke('store-set', 'layoutMode', newLayout).catch((err) => {
     console.error('保存布局偏好失败:', err)
   })
-}
+})
 </script>
 
 <style scoped>
-/* 基础布局 */
 .text-rewriter-container {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   display: flex;
@@ -245,322 +129,6 @@ const toggleLayout = (newLayout) => {
   margin-bottom: 10px;
 }
 
-/* 右侧结果区域 */
-.result-section,
-.empty-result-section {
-  flex: 1;
-  background-color: white;
-  border-radius: 16px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-  padding: 28px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  transition: all 0.3s ease;
-  backdrop-filter: blur(10px);
-  background-color: rgba(255, 255, 255, 0.95);
-}
-
-.result-header-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.result-stats {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-}
-
-.model-badge,
-.count-badge {
-  padding: 6px 12px;
-  border-radius: 20px;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.model-badge {
-  background-color: #e8f5e9;
-  color: #2e7d32;
-}
-
-.count-badge {
-  background-color: #e3f2fd;
-  color: #1565c0;
-}
-
-/* 布局切换按钮样式 */
-.layout-toggle {
-  display: flex;
-  border-radius: 8px;
-  overflow: hidden;
-  border: 1px solid #e0e0e0;
-}
-
-.layout-button {
-  background-color: white;
-  border: none;
-  padding: 6px 10px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.layout-button.active {
-  background-color: #f0f0f0;
-}
-
-.layout-icon {
-  font-size: 16px;
-}
-
-/* 结果区域样式 */
-.results-container {
-  flex: 1;
-  overflow-y: auto;
-  padding: 4px;
-}
-
-.results-list {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  padding: 4px;
-}
-
-.results-list.grid-layout {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 20px;
-}
-
-.result-block {
-  background-color: white;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  overflow: hidden;
-  border: 1px solid #e8e8e8;
-  width: 100%;
-  transition: all 0.3s ease;
-  animation: fadeIn 0.5s ease forwards;
-  opacity: 0;
-  transform: translateY(20px);
-  display: flex;
-  flex-direction: column;
-}
-
-.result-block.grid-item {
-  height: 250px;
-  transition: height 0.5s ease;
-}
-
-.result-block.grid-item.expanded-result {
-  height: auto;
-  min-height: 250px;
-}
-
-.result-block:hover {
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
-  transform: translateY(-2px);
-}
-
-.result-header {
-  background-color: #f9f9f9;
-  padding: 14px 16px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #e8e8e8;
-}
-
-.result-number {
-  font-weight: 600;
-  color: #2ecc71;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.result-number::before {
-  content: '';
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  background-color: #2ecc71;
-  border-radius: 50%;
-}
-
-.result-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.action-button {
-  background-color: white;
-  border: 1px solid #e0e0e0;
-  border-radius: 6px;
-  padding: 6px 12px;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.2s;
-  position: relative;
-  min-width: 60px;
-  text-align: center;
-}
-
-.action-button:hover {
-  background-color: #f0f0f0;
-  border-color: #ccc;
-}
-
-.copy-button {
-  color: #2ecc71;
-  border-color: #2ecc71;
-}
-
-.copy-button:hover {
-  background-color: rgba(46, 204, 113, 0.1);
-  border-color: #2ecc71;
-}
-
-.expand-button {
-  color: #666;
-}
-
-.result-content {
-  padding: 16px;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  line-height: 1.6;
-  max-height: 200px;
-  overflow: hidden;
-  position: relative;
-  text-align: justify;
-  hyphens: auto;
-  transition: max-height 0.5s ease;
-  flex: 1;
-}
-
-.result-content:not(.expanded)::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 60px;
-  background: linear-gradient(transparent, white);
-  pointer-events: none;
-  transition: opacity 0.3s;
-}
-
-.result-content.expanded {
-  max-height: none;
-}
-
-/* 生成中占位符 */
-.generating-placeholder {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px;
-  text-align: center;
-  color: #666;
-}
-
-.generating-placeholder p {
-  margin-top: 20px;
-  font-size: 16px;
-}
-
-.generating-animation {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 16px;
-}
-
-.dot {
-  width: 12px;
-  height: 12px;
-  background-color: #2ecc71;
-  border-radius: 50%;
-  animation: bounce 1.4s infinite ease-in-out both;
-}
-
-.dot:nth-child(1) {
-  animation-delay: -0.32s;
-}
-
-.dot:nth-child(2) {
-  animation-delay: -0.16s;
-}
-
-/* 空状态 */
-.empty-result-section {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.empty-state {
-  text-align: center;
-  padding: 40px;
-  color: #666;
-}
-
-.empty-icon {
-  font-size: 48px;
-  margin-bottom: 16px;
-  color: #ccc;
-}
-
-.empty-state h3 {
-  font-size: 20px;
-  margin-bottom: 8px;
-  color: #333;
-}
-
-.empty-state p {
-  font-size: 16px;
-  color: #666;
-}
-
-/* 动画效果 */
-@keyframes fadeIn {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes bounce {
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-  }
-  40% {
-    transform: scale(1);
-  }
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s, transform 0.3s;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-  transform: translateY(20px);
-}
-
 /* Toast 样式 */
 :global(.toast-message) {
   position: fixed;
@@ -585,15 +153,6 @@ const toggleLayout = (newLayout) => {
   .text-rewriter-layout {
     flex-direction: column;
   }
-
-  .result-section,
-  .empty-result-section {
-    width: 100%;
-  }
-
-  .results-list.grid-layout {
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  }
 }
 
 @media (max-width: 768px) {
@@ -604,42 +163,11 @@ const toggleLayout = (newLayout) => {
   .text-rewriter-layout {
     gap: 16px;
   }
-
-  .result-section,
-  .empty-result-section {
-    padding: 20px;
-    border-radius: 12px;
-  }
 }
 
 @media (max-width: 480px) {
   .text-rewriter-container {
     padding: 8px;
   }
-
-  .result-section,
-  .empty-result-section {
-    padding: 16px;
-  }
-
-  .result-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-  }
-
-  .result-actions {
-    width: 100%;
-    justify-content: space-between;
-  }
-
-  .results-list.grid-layout {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .result-block.grid-item {
-    height: auto;
-  }
 }
 </style>