mcallzbl/LingTropy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

列表和表格模式切换

Browse Source
This commit is contained in:
mcallzbl 2025-03-18 19:09:42 +08:00
parent ff5d601bc1
commit 209a2403ac
1 changed files with 153 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
lingtropy-client/src/renderer/screens/TextRewritingTool.vue
View File

@ -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>