列表和表格模式切换

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

@@ -134,6 +134,14 @@
             <div class="result-stats">
               <span class="model-badge">{{ selectedModel }}</span>
               <span class="count-badge">{{ rewrittenText.length }} 个结果</span>
+              <button 
+                @click="toggleLayout" 
+                class="layout-toggle-button"
+                :title="settings.layoutMode === 'list' ? '切换到网格视图' : '切换到列表视图'"
+              >
+                <span v-if="settings.layoutMode === 'list'" >▦</span>
+                <span v-else>☰</span>
+              </button>
             </div>
           </div>
           
@@ -147,11 +155,19 @@
           </div>
           
           <div v-else class="results-container">
-            <div class="results-list">
+            <div 
+              :class="{ 
+                'results-list': settings.layoutMode === 'list',
+                'results-grid': settings.layoutMode === 'grid'
+              }"
+            >
               <div 
                 v-for="(text, index) in rewrittenText"
                 :key="index"
-                :class="{ 'expanded-result': expandedResults[index] }"
+                :class="{ 
+                  'expanded-result': expandedResults[index],
+                  'grid-item': settings.layoutMode === 'grid'
+                }"
                 :style="{ animationDelay: `${index * 0.1}s` }"
                 class="result-block"
               >
@@ -215,6 +231,13 @@
                 紧凑视图
               </label>
             </div>
+            <div class="setting-item">
+              <label class="setting-label">结果布局</label>
+              <select v-model="settings.layoutMode" class="select-input">
+                <option value="list">列表视图</option>
+                <option value="grid">网格视图</option>
+              </select>
+            </div>
           </div>
           
           <div class="settings-section">
@@ -249,6 +272,14 @@
         </div>
       </div>
     </div>
+    
+    <!-- 背景装饰元素 -->
+    <div class="background-decoration">
+      <div class="bg-circle bg-circle-1"></div>
+      <div class="bg-circle bg-circle-2"></div>
+      <div class="bg-circle bg-circle-3"></div>
+      <div class="bg-dots"></div>
+    </div>
   </div>
 </template>
 
@@ -293,9 +324,15 @@ const settings = reactive({
   darkMode: false,
   compactMode: false,
   temperature: 70, // 0.7
-  maxLength: '2000'
+  maxLength: '2000',
+  layoutMode: 'list'
 })
 
+// 切换布局模式
+const toggleLayout = () => {
+  settings.layoutMode = settings.layoutMode === 'list' ? 'grid' : 'list'
+}
+
 // 监听点击事件，关闭模型列表
 const handleClickOutside = (event) => {
   if (modelDropdown.value && !modelDropdown.value.contains(event.target)) {
@@ -460,12 +497,80 @@ const showToast = (message) => {
   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 - 40px);
+  position: relative;
+  z-index: 1;
 }
 
 /* 左侧输入区域 */
@@ -481,6 +586,8 @@ const showToast = (message) => {
   flex-direction: column;
   overflow-y: auto;
   transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+  background-color: rgba(255, 255, 255, 0.95);
 }
 
 /* 右侧结果区域 */
@@ -494,6 +601,8 @@ const showToast = (message) => {
   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 {
@@ -508,6 +617,7 @@ const showToast = (message) => {
 .result-stats {
   display: flex;
   gap: 12px;
+  align-items: center;
 }
 
 .model-badge, .count-badge {
@@ -918,6 +1028,19 @@ const showToast = (message) => {
   padding: 4px;
 }
 
+.results-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 20px;
+  padding: 4px;
+}
+
+.grid-item {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
 .result-block {
   background-color: white;
   border-radius: 12px;
@@ -1350,6 +1473,25 @@ const showToast = (message) => {
   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 {
@@ -1401,6 +1543,10 @@ const showToast = (message) => {
     top: 0;
     right: 0;
   }
+
+  .results-grid {
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  }
 }
 
 @media (max-width: 480px) {
@@ -1422,6 +1568,10 @@ const showToast = (message) => {
     width: 100%;
     justify-content: space-between;
   }
+
+  .results-grid {
+    grid-template-columns: 1fr;
+  }
 }
 </style>