GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-05-26 10:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化 WorkflowSidebar 组件的样式，使用 VCard 替代 div 以提升视觉效果，调整背景颜色和文本颜色以支持主题切换，增强用户体验。

Browse Source
This commit is contained in:
jxxghp
2025-04-19 13:20:13 +08:00
parent dc9c08ed30
commit 174b2b9fa3
1 changed files with 17 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/layouts/components/WorkflowSidebar.vue
View File

@@ -136,7 +136,7 @@ onMounted(() => {
@dragstart="!display.smAndDown.value && onDragStart($event, action)"
@click="display.smAndDown.value && handleComponentClick(action)"
>
<div class="component-card">
<VCard class="component-card">
<VAvatar size="36" class="component-avatar">
<VIcon :icon="getActionIcon(action.type)" size="18" />
</VAvatar>
@@ -144,7 +144,7 @@ onMounted(() => {
<div class="component-name">{{ action.name }}</div>
<div class="component-desc">{{ display.smAndDown.value ? '点击添加' : '拖动到画布' }}</div>
</div>
</div>
</VCard>
</div>
</div>
@@ -171,7 +171,7 @@ onMounted(() => {
position: absolute;
z-index: 100;
overflow: hidden;
background-color: #f5f5f7;
background-color: rgb(var(--v-theme-background));
box-shadow: 0 0 15px rgba(0, 0, 0, 8%);
inline-size: 280px;
inset-block: 0;
@@ -201,8 +201,8 @@ onMounted(() => {
.sidebar-header {
flex-shrink: 0;
padding: 16px;
background-color: #fff;
border-block-end: 1px solid rgba(0, 0, 0, 6%);
background-color: rgb(var(--v-theme-background));
border-block-end: 1px solid rgba(var(--v-theme-on-background), 0.06);
.header-content {
position: relative;
@@ -211,20 +211,20 @@ onMounted(() => {
}
.workflow-logo {
background-color: #8c58f5;
background-color: rgb(var(--v-theme-primary));
color: white;
margin-inline-end: 10px;
}
.header-title {
color: #1a1a1a;
color: rgb(var(--v-theme-on-background));
font-size: 18px;
font-weight: 600;
}
.collapse-btn {
position: absolute;
color: #8c58f5;
color: rgb(var(--v-theme-primary));
inset-block-start: 0;
inset-inline-end: 0;
}
@@ -245,7 +245,7 @@ onMounted(() => {
&::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: rgba(140, 88, 245, 30%);
background-color: rgba(var(--v-theme-primary), 0.3);
}
}
@@ -263,18 +263,18 @@ onMounted(() => {
align-items: center;
padding: 10px;
border-radius: 12px;
background-color: #e4e4e7;
background-color: rgb(var(--v-theme-surface-variant));
transition: all 0.2s ease;
&:hover {
background-color: #d4d4d8;
background-color: rgb(var(--v-theme-surface-variant));
transform: translateY(-2px);
}
}
.component-avatar {
flex-shrink: 0;
background-color: #8c58f5;
background-color: rgb(var(--v-theme-primary));
color: white;
margin-inline-end: 12px;
@@ -291,7 +291,7 @@ onMounted(() => {
.component-name {
overflow: hidden;
color: #1a1a1a;
color: rgb(var(--v-theme-on-background));
font-size: 14px;
font-weight: 500;
text-overflow: ellipsis;
@@ -309,21 +309,17 @@ onMounted(() => {
.sidebar-footer {
flex-shrink: 0;
padding: 12px;
background-color: #fff;
background-color: rgb(var(--v-theme-background));
border-block-start: 1px solid rgba(0, 0, 0, 6%);
.drag-btn {
background-color: #8c58f5;
background-color: rgb(var(--v-theme-primary));
block-size: 44px;
color: white;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
&:hover {
background-color: color.adjust(#8c58f5, $lightness: -5%);
}
.btn-content {
display: flex;
align-items: center;
@@ -344,8 +340,8 @@ onMounted(() => {
}
.workflow-sidebar-fab {
background-color: #8c58f5;
box-shadow: 0 4px 10px rgba(140, 88, 245, 40%);
background-color: rgb(var(--v-theme-primary));
box-shadow: 0 4px 10px rgba(var(--v-theme-primary), 40%);
color: white;
&:hover {