From ff5d601bc184f9c42566c124ebfe824a8f43663e Mon Sep 17 00:00:00 2001
From: mcallzbl <mcallzbl@qq.com>
Date: Tue, 18 Mar 2025 18:52:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0ai=E6=A8=A1=E5=9E=8B=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lingtropy-client/docs/package-lock.json       |    7 +-
 lingtropy-client/docs/package.json            |    3 +-
 .../src/renderer/components/InputSection.vue  |  342 ++++++
 .../src/renderer/components/ResultSection.vue |  309 +++++
 .../src/renderer/components/SettingsModal.vue |  339 ++++++
 .../renderer/screens/TextRewritingTool.vue    | 1040 ++++++++++++++---
 6 files changed, 1865 insertions(+), 175 deletions(-)
 create mode 100644 lingtropy-client/src/renderer/components/InputSection.vue
 create mode 100644 lingtropy-client/src/renderer/components/ResultSection.vue
 create mode 100644 lingtropy-client/src/renderer/components/SettingsModal.vue

diff --git a/lingtropy-client/docs/package-lock.json b/lingtropy-client/docs/package-lock.json
index 86ce750..bbf1dff 100644
--- a/lingtropy-client/docs/package-lock.json
+++ b/lingtropy-client/docs/package-lock.json
@@ -12,7 +12,8 @@
         "vitepress": "^1.5.0",
         "vitepress-i18n": "^1.3.1",
         "vitepress-sidebar": "^1.30.2",
-        "vue": "^3.5.13"
+        "vue": "^3.5.13",
+        "vutron-docs": "file:"
       },
       "engines": {
         "node": ">=18.0.0"
@@ -2777,6 +2778,10 @@
         }
       }
     },
+    "node_modules/vutron-docs": {
+      "resolved": "",
+      "link": true
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/lingtropy-client/docs/package.json b/lingtropy-client/docs/package.json
index 67795de..88efa01 100644
--- a/lingtropy-client/docs/package.json
+++ b/lingtropy-client/docs/package.json
@@ -16,6 +16,7 @@
     "vitepress": "^1.5.0",
     "vitepress-i18n": "^1.3.1",
     "vitepress-sidebar": "^1.30.2",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vutron-docs": "file:"
   }
 }
diff --git a/lingtropy-client/src/renderer/components/InputSection.vue b/lingtropy-client/src/renderer/components/InputSection.vue
new file mode 100644
index 0000000..0fdfa65
--- /dev/null
+++ b/lingtropy-client/src/renderer/components/InputSection.vue
@@ -0,0 +1,342 @@
+<template>
+    <div class="input-section">
+      <div class="header-section">
+        <div class="logo-container">
+          <div class="logo-icon">AI</div>
+        </div>
+        <div class="header-content">
+          <h1 class="title">文案生成工具</h1>
+          <p class="subtitle">智能改写，提升文案质量</p>
+        </div>
+        <button @click="$emit('toggle-settings')" class="settings-button">
+          <span class="settings-icon">⚙️</span>
+        </button>
+      </div>
+      
+      <ModelSelector 
+        :selectedModel="selectedModel"
+        :availableModels="availableModels"
+        @update:selectedModel="$emit('update:selectedModel', $event)"
+      />
+      
+      <RewriteMode 
+        :mode="mode"
+        :generationCount="generationCount"
+        @update:mode="$emit('update:mode', $event)"
+        @update:generationCount="$emit('update:generationCount', $event)"
+      />
+      
+      <div class="original-text-section">
+        <h2 class="section-title">
+          <span class="section-icon">📝</span>
+          原始文案
+          <span v-if="originalText" class="char-count">{{ originalText.length }} 字</span>
+        </h2>
+        <textarea 
+          :value="originalText"
+          @input="$emit('update:originalText', $event.target.value)"
+          class="text-input"
+          placeholder="请在此输入需要改写的文本..."
+        ></textarea>
+      </div>
+      
+      <button 
+        :disabled="isGenerating"
+        @click="$emit('rewrite')"
+        class="rewrite-button"
+      >
+        <span v-if="isGenerating" class="loading-spinner"></span>
+        <span v-else>{{ mode === 'single' ? '生成改写' : '批量生成' }}</span>
+      </button>
+    </div>
+  </template>
+  
+  <script setup>
+  import ModelSelector from './ModelSelector.vue'
+  import RewriteMode from './RewriteMode.vue'
+  
+  defineProps({
+    mode: String,
+    originalText: String,
+    generationCount: Number,
+    selectedModel: String,
+    availableModels: Array,
+    isGenerating: Boolean
+  })
+  
+  defineEmits([
+    'update:mode',
+    'update:originalText',
+    'update:generationCount',
+    'update:selectedModel',
+    'rewrite',
+    'toggle-settings'
+  ])
+  </script>
+  
+  <style scoped>
+  .input-section {
+    flex: 0 0 40%;
+    max-width: 600px;
+    min-width: 320px;
+    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-y: auto;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+    background-color: rgba(255, 255, 255, 0.9);
+  }
+  
+  :deep(.dark-mode) .input-section {
+    background-color: rgba(30, 30, 46, 0.9);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  }
+  
+  /* Logo 样式 */
+  .header-section {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 28px;
+    position: relative;
+  }
+  
+  .header-content {
+    flex: 1;
+  }
+  
+  .logo-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .logo-icon {
+    width: 48px;
+    height: 48px;
+    background: linear-gradient(135deg, #2ecc71, #27ae60);
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: bold;
+    font-size: 20px;
+    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
+  }
+  
+  /* 设置按钮 */
+  .settings-button {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    background-color: #f5f5f5;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+  
+  .settings-button:hover {
+    background-color: #e0e0e0;
+    transform: rotate(30deg);
+  }
+  
+  .settings-icon {
+    font-size: 20px;
+  }
+  
+  :deep(.dark-mode) .settings-button {
+    background-color: #2d2d3a;
+    color: #f0f0f0;
+  }
+  
+  :deep(.dark-mode) .settings-button:hover {
+    background-color: #3d3d4a;
+  }
+  
+  /* 标题样式 */
+  .title {
+    font-size: 24px;
+    font-weight: 700;
+    margin: 0 0 4px 0;
+    background: linear-gradient(90deg, #2ecc71, #27ae60);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-fill-color: transparent;
+  }
+  
+  .subtitle {
+    color: #666;
+    margin: 0;
+    font-size: 14px;
+  }
+  
+  :deep(.dark-mode) .subtitle {
+    color: #aaa;
+  }
+  
+  .section-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0 0 16px 0;
+    color: #333;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  :deep(.dark-mode) .section-title {
+    color: #f0f0f0;
+  }
+  
+  .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;
+  }
+  
+  :deep(.dark-mode) .char-count {
+    background-color: #2d2d3a;
+    color: #aaa;
+  }
+  
+  /* 输入区域样式 */
+  .original-text-section {
+    margin-bottom: 24px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .text-input {
+    border: 1px solid #e0e0e0;
+    border-radius: 10px;
+    font-family: inherit;
+    font-size: 16px;
+    padding: 16px;
+    resize: none;
+    width: 100%;
+    flex-grow: 1;
+    min-height: 150px;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    transition: border-color 0.3s, box-shadow 0.3s;
+    background-color: #f9f9f9;
+  }
+  
+  .text-input:focus {
+    outline: none;
+    border-color: #2ecc71;
+    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);
+    background-color: white;
+  }
+  
+  :deep(.dark-mode) .text-input {
+    background-color: #2d2d3a;
+    border-color: #3d3d4a;
+    color: #f0f0f0;
+  }
+  
+  :deep(.dark-mode) .text-input:focus {
+    border-color: #2ecc71;
+    background-color: #252533;
+  }
+  
+  /* 按钮样式 */
+  .rewrite-button {
+    background: linear-gradient(135deg, #2ecc71, #27ae60);
+    border: none;
+    border-radius: 10px;
+    color: white;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: 600;
+    margin-top: 16px;
+    padding: 16px;
+    transition: all 0.3s ease;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
+  }
+  
+  .rewrite-button:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(46, 204, 113, 0.4);
+  }
+  
+  .rewrite-button:active:not(:disabled) {
+    transform: translateY(1px);
+    box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
+  }
+  
+  .rewrite-button:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+  
+  /* 加载动画 */
+  .loading-spinner {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border: 3px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    border-top-color: white;
+    animation: spin 1s ease-in-out infinite;
+  }
+  
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+  
+  @media (max-width: 1200px) {
+    .input-section {
+      flex: none;
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+  
+  @media (max-width: 768px) {
+    .input-section {
+      padding: 20px;
+      border-radius: 12px;
+    }
+    
+    .header-section {
+      flex-direction: column;
+      text-align: center;
+    }
+    
+    .settings-button {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  }
+  
+  @media (max-width: 480px) {
+    .input-section {
+      padding: 16px;
+    }
+  }
+  </style>
\ No newline at end of file
diff --git a/lingtropy-client/src/renderer/components/ResultSection.vue b/lingtropy-client/src/renderer/components/ResultSection.vue
new file mode 100644
index 0000000..0dc21da
--- /dev/null
+++ b/lingtropy-client/src/renderer/components/ResultSection.vue
@@ -0,0 +1,309 @@
+<template>
+    <div class="result-section">
+      <div class="result-header-bar">
+        <h2 class="section-title">
+          <span class="section-icon">✨</span>
+          改写结果
+        </h2>
+        <div class="result-actions">
+          <div class="display-mode-toggle">
+            <button 
+              :class="{ active: displayMode === 'list' }"
+              @click="$emit('change-display-mode', 'list')"
+              class="display-mode-button"
+              title="列表视图"
+            >
+              <span class="mode-icon">📃</span>
+            </button>
+            <button 
+              :class="{ active: displayMode === 'grid' }"
+              @click="$emit('change-display-mode', 'grid')"
+              class="display-mode-button"
+              title="网格视图"
+            >
+              <span class="mode-icon">📊</span>
+            </button>
+          </div>
+          <div class="result-stats">
+            <span class="model-badge">{{ selectedModel }}</span>
+            <span class="count-badge">{{ rewrittenText.length }} 个结果</span>
+          </div>
+        </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>正在使用 {{ selectedModel }} 生成改写结果...</p>
+      </div>
+      
+      <div v-else class="results-container">
+        <div :class="['results-wrapper', `display-${displayMode}`]">
+          <ResultItem 
+            v-for="(text, index) in rewrittenText"
+            :key="index"
+            :text="text"
+            :index="index"
+            :isExpanded="expandedResults[index]"
+            :isCopied="copiedIndex === index"
+            @toggle-expand="$emit('toggle-expand', index)"
+            @copy-text="$emit('copy-text', text, index)"
+          />
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import ResultItem from './ResultItem.vue'
+  
+  defineProps({
+    rewrittenText: Array,
+    selectedModel: String,
+    isGenerating: Boolean,
+    expandedResults: Object,
+    copiedIndex: Number,
+    displayMode: String
+  })
+  
+  defineEmits(['toggle-expand', 'copy-text', 'change-display-mode'])
+  </script>
+  
+  <style scoped>
+  .result-section {
+    flex: 1;
+    background-color: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    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;
+  }
+  
+  :deep(.dark-mode) .result-section {
+    background-color: rgba(30, 30, 46, 0.9);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  }
+  
+  .result-header-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  
+  :deep(.dark-mode) .result-header-bar {
+    border-bottom-color: #3d3d4a;
+  }
+  
+  .section-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0;
+    color: #333;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  :deep(.dark-mode) .section-title {
+    color: #f0f0f0;
+  }
+  
+  .section-icon {
+    font-size: 20px;
+  }
+  
+  .result-actions {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+  
+  .display-mode-toggle {
+    display: flex;
+    background-color: #f0f0f0;
+    border-radius: 8px;
+    padding: 2px;
+  }
+  
+  :deep(.dark-mode) .display-mode-toggle {
+    background-color: #2d2d3a;
+  }
+  
+  .display-mode-button {
+    background: none;
+    border: none;
+    padding: 6px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  
+  .display-mode-button.active {
+    background-color: white;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+  
+  :deep(.dark-mode) .display-mode-button.active {
+    background-color: #3d3d4a;
+  }
+  
+  .mode-icon {
+    font-size: 16px;
+  }
+  
+  .result-stats {
+    display: flex;
+    gap: 12px;
+  }
+  
+  .model-badge, .count-badge {
+    padding: 6px 12px;
+    border-radius: 20px;
+    font-size: 14px;
+    font-weight: 500;
+  }
+  
+  .model-badge {
+    background-color: #e8f5e9;
+    color: #2e7d32;
+  }
+  
+  :deep(.dark-mode) .model-badge {
+    background-color: #2e7d32;
+    color: #e8f5e9;
+  }
+  
+  .count-badge {
+    background-color: #e3f2fd;
+    color: #1565c0;
+  }
+  
+  :deep(.dark-mode) .count-badge {
+    background-color: #1565c0;
+    color: #e3f2fd;
+  }
+  
+  /* 结果区域样式 */
+  .results-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 4px;
+  }
+  
+  .results-wrapper {
+    padding: 4px;
+  }
+  
+  .display-list {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+  
+  .display-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+  }
+  
+  /* 生成中占位符 */
+  .generating-placeholder {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    text-align: center;
+    color: #666;
+  }
+  
+  :deep(.dark-mode) .generating-placeholder {
+    color: #aaa;
+  }
+  
+  .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;
+  }
+  
+  @keyframes bounce {
+    0%, 80%, 100% { 
+      transform: scale(0);
+    } 
+    40% { 
+      transform: scale(1.0);
+    }
+  }
+  
+  @media (max-width: 1200px) {
+    .result-section {
+      width: 100%;
+    }
+  }
+  
+  @media (max-width: 768px) {
+    .result-section {
+      padding: 20px;
+      border-radius: 12px;
+    }
+    
+    .result-header-bar {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 12px;
+    }
+    
+    .result-actions {
+      width: 100%;
+      justify-content: space-between;
+    }
+    
+    .display-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+  
+  @media (max-width: 480px) {
+    .result-section {
+      padding: 16px;
+    }
+    
+    .result-stats {
+      flex-direction: column;
+      gap: 8px;
+    }
+  }
+  </style>
\ No newline at end of file
diff --git a/lingtropy-client/src/renderer/components/SettingsModal.vue b/lingtropy-client/src/renderer/components/SettingsModal.vue
new file mode 100644
index 0000000..56517af
--- /dev/null
+++ b/lingtropy-client/src/renderer/components/SettingsModal.vue
@@ -0,0 +1,339 @@
+<template>
+    <div @click="$emit('close')" class="modal-overlay">
+      <div @click.stop class="settings-modal">
+        <div class="modal-header">
+          <h2>设置</h2>
+          <button @click="$emit('close')" class="close-button">×</button>
+        </div>
+        <div class="modal-content">
+          <div class="settings-section">
+            <h3>界面设置</h3>
+            <div class="setting-item">
+              <label class="setting-label">
+                <input v-model="localSettings.darkMode" type="checkbox">
+                深色模式
+              </label>
+            </div>
+            <div class="setting-item">
+              <label class="setting-label">
+                <input v-model="localSettings.compactMode" type="checkbox">
+                紧凑视图
+              </label>
+            </div>
+          </div>
+          
+          <div class="settings-section">
+            <h3>生成设置</h3>
+            <div class="setting-item">
+              <label class="setting-label">温度值</label>
+              <div class="slider-container">
+                <input 
+                  v-model="localSettings.temperature"
+                  min="0"
+                  max="100"
+                  type="range"
+                  class="slider"
+                >
+                <span class="slider-value">{{ localSettings.temperature / 100 }}</span>
+              </div>
+            </div>
+            <div class="setting-item">
+              <label class="setting-label">最大长度</label>
+              <select v-model="localSettings.maxLength" class="select-input">
+                <option value="500">500 字</option>
+                <option value="1000">1000 字</option>
+                <option value="2000">2000 字</option>
+                <option value="3000">3000 字</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button @click="$emit('close')" class="cancel-button">取消</button>
+          <button @click="saveSettings" class="save-button">保存设置</button>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { reactive, onMounted } from 'vue'
+  
+  const props = defineProps({
+    settings: Object
+  })
+  
+  const emit = defineEmits(['close', 'save'])
+  
+  const localSettings = reactive({
+    darkMode: false,
+    compactMode: false,
+    temperature: 70,
+    maxLength: '2000'
+  })
+  
+  onMounted(() => {
+    // 复制设置到本地状态
+    Object.assign(localSettings, props.settings)
+  })
+  
+  const saveSettings = () => {
+    emit('save', localSettings)
+  }
+  </script>
+  
+<style scoped>
+  /* 设置弹窗 */
+  .modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    animation: fadeIn 0.3s ease;
+    backdrop-filter: blur(5px);
+  }
+  
+  .settings-modal {
+    background-color: white;
+    border-radius: 16px;
+    width: 90%;
+    max-width: 500px;
+    max-height: 90vh;
+    overflow-y: auto;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    animation: slideUp 0.3s ease;
+  }
+  
+  :deep(.dark-mode) .settings-modal {
+    background-color: #2d2d3a;
+    color: #f0f0f0;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+  }
+  
+  .modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  
+  :deep(.dark-mode) .modal-header {
+    border-bottom-color: #3d3d4a;
+  }
+  
+  .modal-header h2 {
+    margin: 0;
+    font-size: 20px;
+    color: #333;
+  }
+  
+  :deep(.dark-mode) .modal-header h2 {
+    color: #f0f0f0;
+  }
+  
+  .close-button {
+    background: none;
+    border: none;
+    font-size: 24px;
+    color: #666;
+    cursor: pointer;
+    transition: color 0.2s;
+  }
+  
+  .close-button:hover {
+    color: #333;
+  }
+  
+  :deep(.dark-mode) .close-button {
+    color: #aaa;
+  }
+  
+  :deep(.dark-mode) .close-button:hover {
+    color: #f0f0f0;
+  }
+  
+  .modal-content {
+    padding: 20px;
+  }
+  
+  .settings-section {
+    margin-bottom: 24px;
+  }
+  
+  .settings-section h3 {
+    font-size: 18px;
+    margin: 0 0 16px 0;
+    color: #333;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  
+  :deep(.dark-mode) .settings-section h3 {
+    color: #f0f0f0;
+    border-bottom-color: #3d3d4a;
+  }
+  
+  .setting-item {
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .setting-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 16px;
+    color: #333;
+  }
+  
+  :deep(.dark-mode) .setting-label {
+    color: #f0f0f0;
+  }
+  
+  .slider-container {
+    display: flex;
+    align-  .setting-label {
+    color: #f0f0f0;
+        }
+    }
+  
+  .slider-container {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex: 1;
+    max-width: 200px;
+  }
+  
+  .slider {
+    flex: 1;
+    height: 6px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: #e0e0e0;
+    border-radius: 3px;
+    outline: none;
+  }
+  
+  :deep(.dark-mode) .slider {
+    background: #3d3d4a;
+  }
+  
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: #2ecc71;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  
+  .slider::-webkit-slider-thumb:hover {
+    transform: scale(1.2);
+  }
+  
+  .slider-value {
+    min-width: 40px;
+    text-align: center;
+    font-size: 14px;
+    color: #666;
+  }
+  
+  :deep(.dark-mode) .slider-value {
+    color: #aaa;
+  }
+  
+  .select-input {
+    padding: 8px 12px;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    font-size: 14px;
+    background-color: white;
+    min-width: 120px;
+  }
+  
+  :deep(.dark-mode) .select-input {
+    background-color: #252533;
+    border-color: #3d3d4a;
+    color: #f0f0f0;
+  }
+  
+  .modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    padding: 16px 20px;
+    border-top: 1px solid #f0f0f0;
+  }
+  
+  :deep(.dark-mode) .modal-footer {
+    border-top-color: #3d3d4a;
+  }
+  
+  .cancel-button, .save-button {
+    padding: 10px 20px;
+    border-radius: 8px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  
+  .cancel-button {
+    background-color: #f5f5f5;
+    border: 1px solid #e0e0e0;
+    color: #666;
+  }
+  
+  :deep(.dark-mode) .cancel-button {
+    background-color: #3d3d4a;
+    border-color: #4d4d5a;
+    color: #f0f0f0;
+  }
+  
+  .cancel-button:hover {
+    background-color: #e0e0e0;
+  }
+  
+  :deep(.dark-mode) .cancel-button:hover {
+    background-color: #4d4d5a;
+  }
+  
+  .save-button {
+    background-color: #2ecc71;
+    border: none;
+    color: white;
+  }
+  
+  .save-button:hover {
+    background-color: #27ae60;
+  }
+  
+  @keyframes slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(40px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  @keyframes fadeIn {
+    to {
+      opacity: 1;
+    }
+  }
+
+  </style>
\ No newline at end of file
diff --git a/lingtropy-client/src/renderer/screens/TextRewritingTool.vue b/lingtropy-client/src/renderer/screens/TextRewritingTool.vue
index fc32582..f1fab79 100644
--- a/lingtropy-client/src/renderer/screens/TextRewritingTool.vue
+++ b/lingtropy-client/src/renderer/screens/TextRewritingTool.vue
@@ -1,132 +1,356 @@
 <template>
   <div class="text-rewriter-container">
-    <div class="text-rewriter-card">
-      <div class="fixed-content">
+    <div class="text-rewriter-layout">
+      <!-- 左侧输入区域 -->
+      <div class="input-section">
         <div class="header-section">
-          <h1 class="title">文案生成工具</h1>
-          <p class="subtitle">输入原始文案，点击改写按钮进行改写</p>
+          <div class="logo-container">
+            <div class="logo-icon">AI</div>
+          </div>
+          <div class="header-content">
+            <h1 class="title">文案生成工具</h1>
+            <p class="subtitle">智能改写，提升文案质量</p>
+          </div>
+          <button @click="toggleSettings" class="settings-button">
+            <span class="settings-icon">⚙️</span>
+          </button>
         </div>
-
+        
+        <div class="model-selection-section">
+          <h2 class="section-title">
+            <span class="section-icon">🤖</span>
+            AI 模型选择
+          </h2>
+          <div class="model-input-group">
+            <div ref="modelDropdown" @click="toggleModelList" class="model-dropdown">
+              <input 
+                v-model="selectedModel"
+                type="text"
+                class="model-input"
+                placeholder="选择或输入模型名称"
+                @input="onModelInput"
+              />
+              <span :class="{ 'arrow-up': showModelList }" class="dropdown-arrow">▼</span>
+              
+              <!-- 模型列表下拉框 -->
+              <div v-show="showModelList" class="model-list">
+                <div 
+                  v-for="model in filteredModels"
+                  :key="model.name"
+                  :class="{ active: model.name === selectedModel }"
+                  @click="selectModel(model)"
+                  class="model-item"
+                >
+                  <span class="model-name">{{ model.name }}</span>
+                  <span class="model-description">{{ model.description }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        
         <div class="rewrite-mode-section">
-          <h2 class="section-title">改写模式</h2>
+          <h2 class="section-title">
+            <span class="section-icon">⚙️</span>
+            改写模式
+          </h2>
           <div class="mode-tabs">
-            <button
-              class="mode-tab"
+            <button 
               :class="{ active: mode === 'single' }"
               @click="switchMode('single')"
+              class="mode-tab"
             >
               <span class="mode-icon">🔄</span>
               单次改写
             </button>
-            <button
-              class="mode-tab"
+            <button 
               :class="{ active: mode === 'batch' }"
               @click="switchMode('batch')"
+              class="mode-tab"
             >
               <span class="mode-icon">🔀</span>
               批量改写
             </button>
           </div>
-
-          <!-- 添加生成数量选择器（仅批量模式显示） -->
+          
           <transition name="fade">
             <div v-if="mode === 'batch'" class="generation-count">
               <label for="count-input">生成数量:</label>
               <div class="count-control">
-                <button
-                  class="count-button"
-                  @click="decrementCount"
+                <button 
                   :disabled="generationCount <= 1"
-                  >-</button
-                >
-                <input
+                  @click="decrementCount"
+                  class="count-button"
+                >-</button>
+                <input 
                   id="count-input"
                   v-model="generationCount"
-                  type="number"
                   min="1"
                   max="10"
+                  type="number"
                   class="count-input"
                 />
-                <button
-                  class="count-button"
-                  @click="incrementCount"
+                <button 
                   :disabled="generationCount >= 10"
-                  >+</button
-                >
+                  @click="incrementCount"
+                  class="count-button"
+                >+</button>
               </div>
             </div>
           </transition>
         </div>
-
+        
         <div class="original-text-section">
-          <h2 class="section-title">原始文案</h2>
-          <textarea
-            class="text-input"
+          <h2 class="section-title">
+            <span class="section-icon">📝</span>
+            原始文案
+            <span v-if="originalText" class="char-count">{{ originalText.length }} 字</span>
+          </h2>
+          <textarea 
             v-model="originalText"
+            class="text-input"
             placeholder="请在此输入需要改写的文本..."
           ></textarea>
         </div>
-
-        <button class="rewrite-button" @click="rewriteText" :disabled="isGenerating">
+        
+        <button 
+          :disabled="isGenerating"
+          @click="rewriteText"
+          class="rewrite-button"
+        >
           <span v-if="isGenerating" class="loading-spinner"></span>
           <span v-else>{{ mode === 'single' ? '生成改写' : '批量生成' }}</span>
         </button>
       </div>
 
+      <!-- 右侧结果区域 -->
       <transition name="fade">
-        <div v-if="rewrittenText.length > 0" class="result-section">
-          <h2 class="section-title">改写结果</h2>
-          <div class="results-container">
-            <transition-group name="list" tag="div">
-              <div
+        <div v-if="rewrittenText.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">
+              <span class="model-badge">{{ selectedModel }}</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>正在使用 {{ selectedModel }} 生成改写结果...</p>
+          </div>
+          
+          <div v-else class="results-container">
+            <div class="results-list">
+              <div 
                 v-for="(text, index) in rewrittenText"
                 :key="index"
-                class="result-block"
+                :class="{ 'expanded-result': expandedResults[index] }"
                 :style="{ animationDelay: `${index * 0.1}s` }"
+                class="result-block"
               >
                 <div class="result-header">
-                  <div class="result-number">结果 #{{ index + 1 }}</div>
+                  <div class="result-number">
+                    结果 #{{ index + 1 }}
+                    <span class="char-count">{{ text.length }} 字</span>
+                  </div>
                   <div class="result-actions">
-                    <button class="action-button copy-button" @click="copyText(text, index)">
-                      <span v-if="copiedIndex === index" class="copied-text">已复制!</span>
+                    <button @click="copyText(text, index)" class="action-button copy-button">
+                      <span v-if="copiedIndex === index">已复制!</span>
                       <span v-else>复制</span>
                     </button>
-                    <button class="action-button expand-button" @click="toggleExpand(index)">
+                    <button 
+                      @click="toggleExpand(index)"
+                      class="action-button expand-button"
+                    >
                       {{ expandedResults[index] ? '收起' : '展开' }}
                     </button>
                   </div>
                 </div>
-                <div class="result-content" :class="{ expanded: expandedResults[index] }">
+                <div 
+                  :class="{ 'expanded': expandedResults[index] }"
+                  class="result-content"
+                >
                   {{ text }}
                 </div>
               </div>
-            </transition-group>
+            </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>
+    
+    <!-- 设置弹窗 -->
+    <div v-if="showSettings" @click="closeSettingsModal" class="modal-overlay">
+      <div @click.stop class="settings-modal">
+        <div class="modal-header">
+          <h2>设置</h2>
+          <button @click="toggleSettings" class="close-button">×</button>
+        </div>
+        <div class="modal-content">
+          <div class="settings-section">
+            <h3>界面设置</h3>
+            <div class="setting-item">
+              <label class="setting-label">
+                <input v-model="settings.darkMode" type="checkbox">
+                深色模式
+              </label>
+            </div>
+            <div class="setting-item">
+              <label class="setting-label">
+                <input v-model="settings.compactMode" type="checkbox">
+                紧凑视图
+              </label>
+            </div>
+          </div>
+          
+          <div class="settings-section">
+            <h3>生成设置</h3>
+            <div class="setting-item">
+              <label class="setting-label">温度值</label>
+              <div class="slider-container">
+                <input 
+                  v-model="settings.temperature"
+                  min="0"
+                  max="100"
+                  type="range"
+                  class="slider"
+                >
+                <span class="slider-value">{{ settings.temperature / 100 }}</span>
+              </div>
+            </div>
+            <div class="setting-item">
+              <label class="setting-label">最大长度</label>
+              <select v-model="settings.maxLength" class="select-input">
+                <option value="500">500 字</option>
+                <option value="1000">1000 字</option>
+                <option value="2000">2000 字</option>
+                <option value="3000">3000 字</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button @click="toggleSettings" class="cancel-button">取消</button>
+          <button @click="saveSettings" class="save-button">保存设置</button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
 
+// AI 模型列表
+const availableModels = [
+  { name: 'gpt-4o', description: '最新的 GPT-4o 模型，支持更复杂的任务' },
+  { name: 'gpt-4', description: '强大的 GPT-4 模型，适合高质量内容生成' },
+  { name: 'gpt-3.5-turbo', description: '高效的 GPT-3.5 模型，适合一般任务' },
+  { name: 'claude-3-opus', description: 'Claude 3 Opus 模型，擅长长文本处理' },
+  { name: 'claude-3-sonnet', description: 'Claude 3 Sonnet 模型，平衡性能与效率' },
+  { name: 'gemini-pro', description: 'Google Gemini Pro 模型' },
+  { name: 'llama-3', description: 'Meta 最新开源大模型' },
+]
+
+// 基础状态
 const mode = ref('single')
 const originalText = ref('')
-const rewrittenText = ref([]) // 改为数组存储多个结果
-const generationCount = ref(3) // 默认生成3个结果
-const expandedResults = reactive({}) // 跟踪每个结果的展开状态
-const isGenerating = ref(false) // 生成中状态
-const copiedIndex = ref(null) // 跟踪哪个结果被复制了
+const rewrittenText = ref([])
+const generationCount = ref(3)
+const expandedResults = reactive({})
+const isGenerating = ref(false)
+const copiedIndex = ref(null)
 
-// 切换模式
+// 模型选择相关
+const selectedModel = ref('gpt-3.5-turbo')
+const showModelList = ref(false)
+const modelDropdown = ref(null)
+const filteredModels = computed(() => {
+  if (!selectedModel.value) return availableModels
+  const searchTerm = selectedModel.value.toLowerCase()
+  return availableModels.filter(model => 
+    model.name.toLowerCase().includes(searchTerm)
+  )
+})
+
+// 设置相关
+const showSettings = ref(false)
+const settings = reactive({
+  darkMode: false,
+  compactMode: false,
+  temperature: 70, // 0.7
+  maxLength: '2000'
+})
+
+// 监听点击事件，关闭模型列表
+const handleClickOutside = (event) => {
+  if (modelDropdown.value && !modelDropdown.value.contains(event.target)) {
+    showModelList.value = false
+  }
+}
+
+// 设置弹窗相关
+const toggleSettings = () => {
+  showSettings.value = !showSettings.value
+}
+
+const closeSettingsModal = (event) => {
+  if (event.target.classList.contains('modal-overlay')) {
+    showSettings.value = false
+  }
+}
+
+const saveSettings = () => {
+  // 这里可以添加保存设置的逻辑，例如存储到 localStorage
+  showToast('设置已保存')
+  showSettings.value = false
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+
+// 切换模型列表显示
+const toggleModelList = () => {
+  showModelList.value = !showModelList.value
+}
+
+// 选择模型
+const selectModel = (model) => {
+  selectedModel.value = model.name
+  showModelList.value = false
+}
+
+// 模型输入过滤 - 已移至计算属性
+const onModelInput = () => {
+  // 过滤逻辑已移至计算属性
+}
+
+// 其他方法
 const switchMode = (newMode) => {
   if (mode.value !== newMode) {
     mode.value = newMode
   }
 }
 
-// 增减生成数量
 const incrementCount = () => {
   if (generationCount.value < 10) {
     generationCount.value++
@@ -139,34 +363,27 @@ const decrementCount = () => {
   }
 }
 
-// 生成文本
 const rewriteText = () => {
   if (!originalText.value.trim()) {
     showToast('请输入需要改写的文本')
     return
   }
-
-  // 清空之前的展开状态
-  Object.keys(expandedResults).forEach((key) => {
+  
+  Object.keys(expandedResults).forEach(key => {
     delete expandedResults[key]
   })
-
-  // 设置生成中状态
+  
   isGenerating.value = true
   rewrittenText.value = []
-
-  // 模拟异步生成过程
+  
   setTimeout(() => {
     if (mode.value === 'single') {
-      // 单次改写，只生成一个结果
-      const longText = `${originalText.value}\n\n这是改写后的内容，保留了原文的核心信息，同时进行了适当的润色和优化。这个版本更加流畅自然，同时保持了专业性和可读性。\n\n我们对句式结构进行了调整，使表达更加清晰。同时，我们也优化了用词，使整体风格更加一致和专业。`
+      const longText = `使用 ${selectedModel.value} 模型改写：\n\n${originalText.value}\n\n这是改写后的内容，保留了原文的核心信息，同时进行了适当的润色和优化。这个版本更加流畅自然，同时保持了专业性和可读性。\n\n我们对句式结构进行了调整，使表达更加清晰。同时，我们也优化了用词，使整体风格更加一致和专业。`
       rewrittenText.value = [longText]
     } else {
-      // 批量改写，生成多个结果
       const count = parseInt(generationCount.value) || 1
-
+      
       for (let i = 1; i <= count; i++) {
-        // 生成不同风格的改写结果
         let style = ''
         switch (i % 3) {
           case 1:
@@ -179,45 +396,40 @@ const rewriteText = () => {
             style = '生动活泼风格'
             break
         }
-
-        const longText = `【${style}】\n${originalText.value}\n\n这是第 ${i} 个改写版本，采用了${style}。我们对原文进行了重新组织和表达，使其更符合目标风格和受众需求。\n\n这个版本保留了原文的核心信息，同时进行了适当的润色和优化，使表达更加自然流畅。`
+        
+        const longText = `使用 ${selectedModel.value} 模型改写：\n【${style}】\n${originalText.value}\n\n这是第 ${i} 个改写版本，采用了${style}。我们对原文进行了重新组织和表达，使其更符合目标风格和受众需求。\n\n这个版本保留了原文的核心信息，同时进行了适当的润色和优化，使表达更加自然流畅。`
         rewrittenText.value.push(longText)
       }
     }
-
-    // 关闭生成中状态
+    
     isGenerating.value = false
-  }, 1500) // 模拟1.5秒的生成时间
+  }, 1500)
 }
 
-// 复制文本
 const copyText = (text, index) => {
-  navigator.clipboard
-    .writeText(text)
+  navigator.clipboard.writeText(text)
     .then(() => {
       copiedIndex.value = index
       setTimeout(() => {
         copiedIndex.value = null
       }, 2000)
     })
-    .catch((err) => {
+    .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(() => {
@@ -231,72 +443,151 @@ const showToast = (message) => {
 </script>
 
 <style scoped>
-/* 基础样式 */
+/* 基础布局 */
 .text-rewriter-container {
-  font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   display: flex;
   justify-content: center;
   align-items: flex-start;
   padding: 20px;
-  height: 100vh;
-  overflow: hidden;
+  min-height: 100vh;
   background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
+  overflow: hidden;
 }
 
-.text-rewriter-card {
+.text-rewriter-layout {
+  display: flex;
+  gap: 24px;
+  width: 100%;
+  max-width: 1800px;
+  height: calc(100vh - 40px);
+}
+
+/* 左侧输入区域 */
+.input-section {
+  flex: 0 0 40%;
+  max-width: 600px;
+  min-width: 320px;
   background-color: white;
   border-radius: 16px;
-  box-shadow:
-    0 10px 30px rgba(0, 0, 0, 0.1),
-    0 1px 8px rgba(0, 0, 0, 0.07);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   padding: 28px;
-  width: 100%;
-  max-width: 800px;
   display: flex;
   flex-direction: column;
-  height: calc(100vh - 40px);
+  overflow-y: auto;
   transition: all 0.3s ease;
 }
 
-.text-rewriter-card:hover {
-  box-shadow:
-    0 15px 35px rgba(0, 0, 0, 0.15),
-    0 3px 10px rgba(0, 0, 0, 0.1);
+/* 右侧结果区域 */
+.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;
 }
 
-.fixed-content {
-  flex-shrink: 0;
+.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;
+}
+
+.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;
+}
+
+/* Logo 样式 */
 .header-section {
-  margin-bottom: 24px;
-  text-align: center;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 28px;
   position: relative;
 }
 
-.header-section::after {
-  content: '';
-  position: absolute;
-  bottom: -12px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 60px;
-  height: 4px;
-  background: linear-gradient(90deg, #2ecc71, #27ae60);
-  border-radius: 2px;
+.header-content {
+  flex: 1;
 }
 
+.logo-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo-icon {
+  width: 48px;
+  height: 48px;
+  background: linear-gradient(135deg, #2ecc71, #27ae60);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: bold;
+  font-size: 20px;
+  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
+}
+
+/* 设置按钮 */
+.settings-button {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background-color: #f5f5f5;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.settings-button:hover {
+  background-color: #e0e0e0;
+  transform: rotate(30deg);
+}
+
+.settings-icon {
+  font-size: 20px;
+}
+
+/* 标题样式 */
 .title {
-  font-size: 28px;
+  font-size: 24px;
   font-weight: 700;
-  margin: 0 0 8px 0;
+  margin: 0 0 4px 0;
   background: linear-gradient(90deg, #2ecc71, #27ae60);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -307,7 +598,7 @@ const showToast = (message) => {
 .subtitle {
   color: #666;
   margin: 0;
-  font-size: 16px;
+  font-size: 14px;
 }
 
 .section-title {
@@ -315,6 +606,117 @@ const showToast = (message) => {
   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;
+}
+
+/* 模型选择样式 */
+.model-selection-section {
+  margin-bottom: 24px;
+}
+
+.model-input-group {
+  position: relative;
+}
+
+.model-dropdown {
+  position: relative;
+  width: 100%;
+}
+
+.model-input {
+  width: 100%;
+  padding: 12px 16px;
+  padding-right: 36px;
+  border: 1px solid #e0e0e0;
+  border-radius: 10px;
+  font-size: 16px;
+  transition: all 0.3s ease;
+  background-color: #f9f9f9;
+}
+
+.model-input:focus {
+  outline: none;
+  border-color: #2ecc71;
+  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);
+  background-color: white;
+}
+
+.dropdown-arrow {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #666;
+  pointer-events: none;
+  transition: transform 0.3s ease;
+}
+
+.arrow-up {
+  transform: translateY(-50%) rotate(180deg);
+}
+
+.model-list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background-color: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 10px;
+  margin-top: 8px;
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 1000;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
+.model-item {
+  padding: 14px 16px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  transition: all 0.2s ease;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.model-item:last-child {
+  border-bottom: none;
+}
+
+.model-item:hover {
+  background-color: #f5f5f5;
+}
+
+.model-item.active {
+  background-color: #e8f5e9;
+}
+
+.model-name {
+  font-weight: 600;
+  color: #333;
+}
+
+.model-description {
+  font-size: 14px;
+  color: #666;
 }
 
 /* 模式选择样式 */
@@ -331,12 +733,12 @@ const showToast = (message) => {
 .mode-tab {
   background-color: white;
   border: 1px solid #e0e0e0;
-  border-radius: 8px;
+  border-radius: 10px;
   color: #333;
   cursor: pointer;
   flex: 1;
   font-size: 16px;
-  padding: 12px;
+  padding: 14px;
   text-align: center;
   transition: all 0.3s ease;
   display: flex;
@@ -371,7 +773,7 @@ const showToast = (message) => {
   gap: 16px;
   padding: 16px;
   background-color: #f9f9f9;
-  border-radius: 8px;
+  border-radius: 10px;
   border-left: 4px solid #2ecc71;
 }
 
@@ -395,11 +797,11 @@ const showToast = (message) => {
 }
 
 .count-button:first-child {
-  border-radius: 4px 0 0 4px;
+  border-radius: 8px 0 0 8px;
 }
 
 .count-button:last-child {
-  border-radius: 0 4px 4px 0;
+  border-radius: 0 8px 8px 0;
 }
 
 .count-button:hover:not(:disabled) {
@@ -425,43 +827,46 @@ const showToast = (message) => {
 /* 输入区域样式 */
 .original-text-section {
   margin-bottom: 24px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .text-input {
   border: 1px solid #e0e0e0;
-  border-radius: 8px;
+  border-radius: 10px;
   font-family: inherit;
   font-size: 16px;
-  height: 120px;
   padding: 16px;
-  resize: vertical;
+  resize: none;
   width: 100%;
+  flex-grow: 1;
+  min-height: 150px;
   white-space: pre-wrap;
   word-wrap: break-word;
   overflow-wrap: break-word;
-  transition:
-    border-color 0.3s,
-    box-shadow 0.3s;
+  transition: border-color 0.3s, box-shadow 0.3s;
+  background-color: #f9f9f9;
 }
 
 .text-input:focus {
   outline: none;
   border-color: #2ecc71;
   box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);
+  background-color: white;
 }
 
 /* 按钮样式 */
 .rewrite-button {
   background: linear-gradient(135deg, #2ecc71, #27ae60);
   border: none;
-  border-radius: 8px;
+  border-radius: 10px;
   color: white;
   cursor: pointer;
   font-size: 16px;
   font-weight: 600;
   margin-top: 16px;
-  margin-bottom: 24px;
-  padding: 14px;
+  padding: 16px;
   transition: all 0.3s ease;
   width: 100%;
   position: relative;
@@ -496,27 +901,21 @@ const showToast = (message) => {
 }
 
 @keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
+  to { transform: rotate(360deg); }
 }
 
 /* 结果区域样式 */
-.result-section {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
 .results-container {
   flex: 1;
   overflow-y: auto;
-  padding: 8px;
+  padding: 4px;
+}
+
+.results-list {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 20px;
+  padding: 4px;
 }
 
 .result-block {
@@ -525,13 +924,13 @@ const showToast = (message) => {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   overflow: hidden;
   border: 1px solid #e8e8e8;
-  flex-shrink: 0;
   width: 100%;
   transition: all 0.3s ease;
   animation: fadeIn 0.5s ease forwards;
   opacity: 0;
   transform: translateY(20px);
-  margin-bottom: 10px;
+  display: flex;
+  flex-direction: column;
 }
 
 .result-block:hover {
@@ -553,7 +952,7 @@ const showToast = (message) => {
   color: #2ecc71;
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 10px;
 }
 
 .result-number::before {
@@ -579,6 +978,8 @@ const showToast = (message) => {
   cursor: pointer;
   transition: all 0.2s;
   position: relative;
+  min-width: 60px;
+  text-align: center;
 }
 
 .action-button:hover {
@@ -600,32 +1001,19 @@ const showToast = (message) => {
   color: #666;
 }
 
-.copied-text {
-  position: absolute;
-  top: -30px;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: rgba(0, 0, 0, 0.7);
-  color: white;
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  white-space: nowrap;
-  animation: fadeInOut 2s ease;
-}
-
 .result-content {
   padding: 16px;
   white-space: pre-wrap;
   word-wrap: break-word;
   overflow-wrap: break-word;
   line-height: 1.6;
-  max-height: 100px;
+  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 {
@@ -644,6 +1032,264 @@ const showToast = (message) => {
   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;
+}
+
+@keyframes bounce {
+  0%, 80%, 100% { 
+    transform: scale(0);
+  } 
+  40% { 
+    transform: scale(1.0);
+  }
+}
+
+/* 空状态 */
+.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;
+}
+
+/* 设置弹窗 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.3s ease;
+}
+
+.settings-modal {
+  background-color: white;
+  border-radius: 16px;
+  width: 90%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  animation: slideUp 0.3s ease;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.modal-header h2 {
+  margin: 0;
+  font-size: 20px;
+  color: #333;
+}
+
+.close-button {
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: #666;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.close-button:hover {
+  color: #333;
+}
+
+.modal-content {
+  padding: 20px;
+}
+
+.settings-section {
+  margin-bottom: 24px;
+}
+
+.settings-section h3 {
+  font-size: 18px;
+  margin: 0 0 16px 0;
+  color: #333;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.setting-item {
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.setting-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  color: #333;
+}
+
+.slider-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  max-width: 200px;
+}
+
+.slider {
+  flex: 1;
+  height: 6px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: #e0e0e0;
+  border-radius: 3px;
+  outline: none;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #2ecc71;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.slider::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+}
+
+.slider-value {
+  min-width: 40px;
+  text-align: center;
+  font-size: 14px;
+  color: #666;
+}
+
+.select-input {
+  padding: 8px 12px;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  font-size: 14px;
+  background-color: white;
+  min-width: 120px;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px 20px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.cancel-button, .save-button {
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.cancel-button {
+  background-color: #f5f5f5;
+  border: 1px solid #e0e0e0;
+  color: #666;
+}
+
+.cancel-button:hover {
+  background-color: #e0e0e0;
+}
+
+.save-button {
+  background-color: #2ecc71;
+  border: none;
+  color: white;
+}
+
+.save-button:hover {
+  background-color: #27ae60;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 /* 动画效果 */
 @keyframes fadeIn {
   to {
@@ -653,25 +1299,15 @@ const showToast = (message) => {
 }
 
 @keyframes fadeInOut {
-  0% {
-    opacity: 0;
-  }
-  20% {
-    opacity: 1;
-  }
-  80% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
+  0% { opacity: 0; }
+  20% { opacity: 1; }
+  80% { opacity: 1; }
+  100% { opacity: 0; }
 }
 
 .fade-enter-active,
 .fade-leave-active {
-  transition:
-    opacity 0.3s,
-    transform 0.3s;
+  transition: opacity 0.3s, transform 0.3s;
 }
 
 .fade-enter-from,
@@ -715,19 +1351,77 @@ const showToast = (message) => {
 }
 
 /* 响应式设计 */
-@media (max-width: 600px) {
-  .text-rewriter-card {
-    padding: 20px;
+@media (max-width: 1200px) {
+  .text-rewriter-layout {
+    flex-direction: column;
   }
+  
+  .input-section {
+    flex: none;
+    width: 100%;
+    max-width: 100%;
+  }
+  
+  .result-section, .empty-result-section {
+    width: 100%;
+  }
+}
 
+@media (max-width: 768px) {
+  .text-rewriter-container {
+    padding: 12px;
+  }
+  
+  .text-rewriter-layout {
+    gap: 16px;
+  }
+  
+  .input-section, .result-section, .empty-result-section {
+    padding: 20px;
+    border-radius: 12px;
+  }
+  
   .mode-tabs {
     flex-direction: column;
   }
-
+  
   .generation-count {
     flex-direction: column;
     align-items: flex-start;
     gap: 12px;
   }
+  
+  .header-section {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .settings-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}
+
+@media (max-width: 480px) {
+  .text-rewriter-container {
+    padding: 8px;
+  }
+  
+  .input-section, .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;
+  }
 }
 </style>
+