diff --git a/lingtropy-client/src/renderer/screens/TextRewritingTool.vue b/lingtropy-client/src/renderer/screens/TextRewritingTool.vue index fc305a1..12eeae9 100644 --- a/lingtropy-client/src/renderer/screens/TextRewritingTool.vue +++ b/lingtropy-client/src/renderer/screens/TextRewritingTool.vue @@ -104,6 +104,14 @@ {{ currentModel }} {{ rewrittenText.length }} 个结果 + @@ -362,12 +370,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; } /* 左侧输入区域 */ @@ -383,6 +459,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); } /* 右侧结果区域 */ @@ -397,6 +475,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 { @@ -932,6 +1012,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 {