From 7181da5b7b5aefbc7394c20080ccd77d27ba612e Mon Sep 17 00:00:00 2001
From: mcallzbl <mcallzbl@qq.com>
Date: Wed, 2 Apr 2025 18:51:45 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BE=93=E5=85=A5=E5=8C=BA=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=AE=8C=E6=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/renderer/components/InputSection.vue  | 206 ++++++++-
 .../renderer/screens/TextRewritingTool.vue    | 417 ++----------------
 2 files changed, 234 insertions(+), 389 deletions(-)

diff --git a/lingtropy-client/src/renderer/components/InputSection.vue b/lingtropy-client/src/renderer/components/InputSection.vue
index 1d76085..75e6df2 100644
--- a/lingtropy-client/src/renderer/components/InputSection.vue
+++ b/lingtropy-client/src/renderer/components/InputSection.vue
@@ -74,11 +74,12 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { ARTICLE_MAX_COUNT } from '../constants/constants'
 import HeaderComponent from './HeaderComponent.vue'
 import SelectModel from './SelectModelComponent.vue'
 
+// 使用解构直接获取 isGenerating
 const { isGenerating } = defineProps({
   isGenerating: {
     type: Boolean,
@@ -86,7 +87,7 @@ const { isGenerating } = defineProps({
   }
 })
 
-const emit = defineEmits(['rewrite'])
+const emit = defineEmits(['rewrite', 'update:model'])
 
 const mode = ref('single')
 const originalText = ref('')
@@ -102,6 +103,10 @@ onMounted(async () => {
   }
 })
 
+watch(currentModel, (newValue) => {
+  emit('update:model', newValue)
+})
+
 const validateInput = () => {
   if (generationCount.value < 1) {
     setGenerationCount(1)
@@ -166,7 +171,20 @@ const handleRewrite = () => {
   background-color: rgba(255, 255, 255, 0.95);
 }
 
-/* 其他样式从 TextRewritingTool.vue 复制相关的部分 */
+.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;
+}
+
 .rewrite-mode-section {
   margin-bottom: 24px;
 }
@@ -177,7 +195,187 @@ const handleRewrite = () => {
   margin-bottom: 16px;
 }
 
-/* ... 复制其他相关样式 ... */
+.mode-tab {
+  background-color: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 10px;
+  color: #333;
+  cursor: pointer;
+  flex: 1;
+  font-size: 16px;
+  padding: 14px;
+  text-align: center;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.mode-tab:hover {
+  border-color: #2ecc71;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.mode-tab.active {
+  background: linear-gradient(135deg, #2ecc71, #27ae60);
+  border-color: transparent;
+  color: white;
+  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
+}
+
+.mode-icon {
+  font-size: 18px;
+}
+
+.generation-count {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24px;
+  gap: 16px;
+  padding: 16px;
+  background-color: #f9f9f9;
+  border-radius: 10px;
+  border-left: 4px solid #2ecc71;
+}
+
+.count-control {
+  display: flex;
+  align-items: center;
+}
+
+.count-button {
+  width: 36px;
+  height: 36px;
+  border: 1px solid #e0e0e0;
+  background-color: white;
+  color: #333;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.count-button:first-child {
+  border-radius: 8px 0 0 8px;
+}
+
+.count-button:last-child {
+  border-radius: 0 8px 8px 0;
+}
+
+.count-button:hover:not(:disabled) {
+  background-color: #f0f0f0;
+}
+
+.count-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.count-input {
+  border: 1px solid #e0e0e0;
+  border-left: none;
+  border-right: none;
+  padding: 8px 0;
+  width: 50px;
+  font-size: 16px;
+  text-align: center;
+  height: 36px;
+}
+
+.original-text-section {
+  margin-bottom: 24px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.char-count {
+  font-size: 14px;
+  color: #666;
+  font-weight: normal;
+  margin-left: auto;
+  background-color: #f0f0f0;
+  padding: 2px 8px;
+  border-radius: 12px;
+}
+
+.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;
+}
+
+.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 {
diff --git a/lingtropy-client/src/renderer/screens/TextRewritingTool.vue b/lingtropy-client/src/renderer/screens/TextRewritingTool.vue
index e45dc3e..0b3e940 100644
--- a/lingtropy-client/src/renderer/screens/TextRewritingTool.vue
+++ b/lingtropy-client/src/renderer/screens/TextRewritingTool.vue
@@ -4,6 +4,7 @@
       <DisclaimerComponent />
       <InputSection 
         :is-generating="isGenerating"
+        v-model:model="currentModel"
         @rewrite="handleRewrite"
       />
       <!-- 右侧结果区域 -->
@@ -87,22 +88,34 @@
           </div>
         </div>
       </transition>
+   
     </div>
     <FooterComponent />
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, defineComponent } from 'vue'
 import DisclaimerComponent from '../components/DisclaimerComponent.vue'
 import InputSection from '../components/InputSection.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')
 
 onMounted(async () => {
   try {
@@ -206,14 +219,12 @@ const toggleLayout = (newLayout) => {
 <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;
   min-height: 100vh;
-  /* background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); */
   background: linear-gradient(135deg, #f0f4fd 0%, #d4e0f7 100%);
   position: fixed;
   top: 0;
@@ -223,82 +234,15 @@ const toggleLayout = (newLayout) => {
   overflow: hidden;
 }
 
-/* 背景装饰 */
-.background-decoration {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-  z-index: -1;
-  overflow: hidden;
-}
-
-.bg-circle {
-  position: absolute;
-  border-radius: 50%;
-  opacity: 0.5;
-  filter: blur(60px);
-}
-
-.bg-circle-1 {
-  width: 400px;
-  height: 400px;
-  background: linear-gradient(45deg, rgba(46, 204, 113, 0.3), rgba(52, 152, 219, 0.3));
-  top: -100px;
-  left: -100px;
-  animation: float 15s ease-in-out infinite alternate;
-}
-
-.bg-circle-2 {
-  width: 600px;
-  height: 600px;
-  background: linear-gradient(45deg, rgba(155, 89, 182, 0.2), rgba(41, 128, 185, 0.2));
-  bottom: -200px;
-  right: -200px;
-  animation: float 20s ease-in-out infinite alternate-reverse;
-}
-
-.bg-circle-3 {
-  width: 300px;
-  height: 300px;
-  background: linear-gradient(45deg, rgba(241, 196, 15, 0.2), rgba(231, 76, 60, 0.2));
-  top: 40%;
-  left: 60%;
-  animation: float 18s ease-in-out infinite alternate;
-}
-
-.bg-dots {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-image: radial-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
-  background-size: 30px 30px;
-  opacity: 0.3;
-}
-
-@keyframes float {
-  0% {
-    transform: translate(0, 0);
-  }
-  100% {
-    transform: translate(50px, 50px);
-  }
-}
-
 .text-rewriter-layout {
   display: flex;
   gap: 24px;
   width: 100%;
   max-width: 1800px;
-  height: calc(100vh - 80px); /* Reduced height to make room for footer */
+  height: calc(100vh - 80px);
   position: relative;
   z-index: 1;
-  margin-bottom: 10px; /* Add margin to avoid content being hidden by footer */
-  /* padding-bottom: 10px;  */
+  margin-bottom: 10px;
 }
 
 /* 右侧结果区域 */
@@ -345,7 +289,12 @@ const toggleLayout = (newLayout) => {
   color: #2e7d32;
 }
 
-/* 新增：布局切换按钮样式 */
+.count-badge {
+  background-color: #e3f2fd;
+  color: #1565c0;
+}
+
+/* 布局切换按钮样式 */
 .layout-toggle {
   display: flex;
   border-radius: 8px;
@@ -369,197 +318,6 @@ const toggleLayout = (newLayout) => {
   font-size: 16px;
 }
 
-.count-badge {
-  background-color: #e3f2fd;
-  color: #1565c0;
-}
-
-/* 标题样式 */
-.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;
-}
-
-.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;
-}
-
-/* 生成数量控制样式 */
-.generation-count {
-  display: flex;
-  align-items: center;
-  margin-bottom: 24px;
-  gap: 16px;
-  padding: 16px;
-  background-color: #f9f9f9;
-  border-radius: 10px;
-  border-left: 4px solid #2ecc71;
-}
-
-.count-control {
-  display: flex;
-  align-items: center;
-}
-
-.count-button {
-  width: 36px;
-  height: 36px;
-  border: 1px solid #e0e0e0;
-  background-color: white;
-  color: #333;
-  font-size: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.count-button:first-child {
-  border-radius: 8px 0 0 8px;
-}
-
-.count-button:last-child {
-  border-radius: 0 8px 8px 0;
-}
-
-.count-button:hover:not(:disabled) {
-  background-color: #f0f0f0;
-}
-
-.count-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.count-input {
-  border: 1px solid #e0e0e0;
-  border-left: none;
-  border-right: none;
-  padding: 8px 0;
-  width: 50px;
-  font-size: 16px;
-  text-align: center;
-  height: 36px;
-}
-
-/* 输入区域样式 */
-.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;
-}
-
-/* 按钮样式 */
-.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);
-  }
-}
-
 /* 结果区域样式 */
 .results-container {
   flex: 1;
@@ -574,7 +332,6 @@ const toggleLayout = (newLayout) => {
   padding: 4px;
 }
 
-/* 新增：网格布局样式 */
 .results-list.grid-layout {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
@@ -596,7 +353,6 @@ const toggleLayout = (newLayout) => {
   flex-direction: column;
 }
 
-/* 新增：网格布局中的项目样式 */
 .result-block.grid-item {
   height: 250px;
   transition: height 0.5s ease;
@@ -745,17 +501,6 @@ const toggleLayout = (newLayout) => {
   animation-delay: -0.16s;
 }
 
-@keyframes bounce {
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-  }
-  40% {
-    transform: scale(1);
-  }
-}
-
 /* 空状态 */
 .empty-result-section {
   display: flex;
@@ -794,26 +539,20 @@ const toggleLayout = (newLayout) => {
   }
 }
 
-@keyframes fadeInOut {
-  0% {
-    opacity: 0;
-  }
-  20% {
-    opacity: 1;
-  }
-  80% {
-    opacity: 1;
-  }
+@keyframes bounce {
+  0%,
+  80%,
   100% {
-    opacity: 0;
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
   }
 }
 
 .fade-enter-active,
 .fade-leave-active {
-  transition:
-    opacity 0.3s,
-    transform 0.3s;
+  transition: opacity 0.3s, transform 0.3s;
 }
 
 .fade-enter-from,
@@ -822,22 +561,7 @@ const toggleLayout = (newLayout) => {
   transform: translateY(20px);
 }
 
-.list-enter-active,
-.list-leave-active {
-  transition: all 0.5s ease;
-}
-
-.list-enter-from {
-  opacity: 0;
-  transform: translateY(30px);
-}
-
-.list-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
-}
-
-/* 提示框样式 */
+/* Toast 样式 */
 :global(.toast-message) {
   position: fixed;
   bottom: 30px;
@@ -856,25 +580,6 @@ const toggleLayout = (newLayout) => {
   transform: translateX(-50%) translateY(0);
 }
 
-/* 布局切换按钮 */
-.layout-toggle-button {
-  background-color: #f0f0f0;
-  border: none;
-  border-radius: 50%;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.layout-toggle-button:hover {
-  background-color: #e0e0e0;
-  transform: scale(1.1);
-}
-
 /* 响应式设计 */
 @media (max-width: 1200px) {
   .text-rewriter-layout {
@@ -886,7 +591,6 @@ const toggleLayout = (newLayout) => {
     width: 100%;
   }
 
-  /* 网格布局在小屏幕上调整 */
   .results-list.grid-layout {
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   }
@@ -906,16 +610,6 @@ const toggleLayout = (newLayout) => {
     padding: 20px;
     border-radius: 12px;
   }
-
-  .mode-tabs {
-    flex-direction: column;
-  }
-
-  .generation-count {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 12px;
-  }
 }
 
 @media (max-width: 480px) {
@@ -939,7 +633,6 @@ const toggleLayout = (newLayout) => {
     justify-content: space-between;
   }
 
-  /* 在手机上强制使用列表布局 */
   .results-list.grid-layout {
     display: flex;
     flex-direction: column;
@@ -949,50 +642,4 @@ const toggleLayout = (newLayout) => {
     height: auto;
   }
 }
-
-/* 模式选择样式 */
-.rewrite-mode-section {
-  margin-bottom: 24px;
-}
-
-.mode-tabs {
-  display: flex;
-  gap: 16px;
-  margin-bottom: 16px;
-}
-
-.mode-tab {
-  background-color: white;
-  border: 1px solid #e0e0e0;
-  border-radius: 10px;
-  color: #333;
-  cursor: pointer;
-  flex: 1;
-  font-size: 16px;
-  padding: 14px;
-  text-align: center;
-  transition: all 0.3s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.mode-tab:hover {
-  border-color: #2ecc71;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.mode-tab.active {
-  background: linear-gradient(135deg, #2ecc71, #27ae60);
-  border-color: transparent;
-  color: white;
-  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
-}
-
-.mode-icon {
-  font-size: 18px;
-}
 </style>