hicccc77/WeFlow
1
0
Fork 0
mirror of https://github.com/hicccc77/WeFlow.git synced 2026-04-03 23:15:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 样式对齐

Browse Source
This commit is contained in:
H3CoF6
2026-04-03 05:20:58 +08:00
parent 17b8af4bc4
commit 510b956649
5 changed files with 193 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
src/pages/BizPage.scss
View File

@@ -1,13 +1,13 @@
.biz-account-list {
flex: 1;
overflow-y: auto;
background-color: var(--bg-primary);
background-color: var(--bg-secondary); // 对齐会话列表背景
.biz-loading {
padding: 20px;
text-align: center;
font-size: 12px;
color: var(--text-muted);
color: var(--text-tertiary);
}
.biz-account-item {
@@ -16,25 +16,31 @@
gap: 12px;
padding: 12px 16px;
cursor: pointer;
transition: background-color 0.2s;
border-bottom: 1px solid var(--border-subtle);
transition: all 0.2s;
border-bottom: 1px solid var(--border-color);
&:hover {
background-color: var(--bg-tertiary);
background-color: var(--bg-hover);
}
&.active {
background-color: var(--bg-active) !important;
background-color: var(--primary-light) !important;
border-left: 3px solid var(--primary);
padding-left: 13px; // 补偿 border-left
}
&.pay-account {
background-color: var(--bg-soft);
background-color: var(--bg-primary);
&.active {
background-color: var(--primary-light) !important;
border-left: 3px solid var(--primary);
}
}
.biz-avatar {
width: 40px;
height: 40px;
border-radius: 4px;
width: 48px;
height: 48px;
border-radius: 8px; // 对齐会话列表头像圆角
object-fit: cover;
flex-shrink: 0;
background-color: var(--bg-tertiary);
@@ -55,7 +61,7 @@
.biz-name {
font-size: 14px;
font-weight: 500;
color: var(--text-main);
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -63,7 +69,7 @@
.biz-time {
font-size: 11px;
color: var(--text-muted);
color: var(--text-tertiary);
flex-shrink: 0;
}
}
@@ -75,10 +81,10 @@
width: fit-content;
margin-top: 2px;
&.type-service { color: #03C160; background: rgba(3, 193, 96, 0.1); }
&.type-sub { color: #108ee9; background: rgba(16, 142, 233, 0.1); }
&.type-service { color: #07c160; background: rgba(7, 193, 96, 0.1); }
&.type-sub { color: var(--primary); background: var(--primary-light); }
&.type-enterprise { color: #f5222d; background: rgba(245, 34, 45, 0.1); }
&.type-unknown { color: #8c8c8c; background: rgba(140, 140, 140, 0.1); }
&.type-unknown { color: var(--text-tertiary); background: var(--bg-tertiary); }
}
}
}
@@ -88,21 +94,21 @@
height: 100%;
display: flex;
flex-direction: column;
background-color: var(--bg-tertiary);
background-color: var(--bg-secondary); // 对齐聊天页背景
.main-header {
height: 56px;
padding: 0 20px;
display: flex;
align-items: center;
border-bottom: 1px solid var(--border-dim);
background-color: var(--bg-primary);
border-bottom: 1px solid var(--border-color);
background-color: var(--card-bg);
flex-shrink: 0;
h2 {
font-size: 16px;
font-weight: 600;
color: var(--text-main);
color: var(--text-primary);
}
}
@@ -110,6 +116,8 @@
flex: 1;
overflow-y: auto;
padding: 24px 16px;
background: var(--chat-pattern);
background-color: var(--bg-tertiary); // 对齐聊天背景色
.messages-wrapper {
width: 100%;
@@ -121,16 +129,57 @@
}
}
// 占位状态：对齐 Chat 页面风格
.biz-no-record-container {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
text-align: center;
background: var(--bg-tertiary);
.no-record-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background-color: var(--bg-secondary);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
color: var(--text-tertiary);
opacity: 0.5;
svg { width: 32px; height: 32px; }
}
h3 {
font-size: 16px;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 8px;
}
p {
font-size: 13px;
color: var(--text-secondary);
max-width: 280px;
line-height: 1.5;
}
}
.biz-loading-more {
text-align: center;
padding: 20px;
font-size: 12px;
color: var(--text-muted);
color: var(--text-tertiary);
}
.pay-card {
background-color: var(--bg-primary);
border: 1px solid var(--border-dim);
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
@@ -140,7 +189,7 @@
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text-muted);
color: var(--text-tertiary);
margin-bottom: 20px;
.pay-icon {
@@ -148,14 +197,17 @@
height: 24px;
border-radius: 50%;
object-fit: cover;
&.placeholder {
background-color: #03C160;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
}
.pay-icon-placeholder {
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #07c160;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
}
@@ -163,30 +215,30 @@
text-align: center;
font-size: 22px;
font-weight: 500;
color: var(--text-main);
color: var(--text-primary);
margin-bottom: 24px;
}
.pay-desc {
font-size: 13px;
line-height: 1.6;
color: var(--text-muted);
color: var(--text-secondary);
white-space: pre-wrap;
}
.pay-footer {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--border-subtle);
border-top: 1px solid var(--border-color);
font-size: 12px;
color: var(--text-muted);
color: var(--text-tertiary);
text-align: right;
}
}
.article-card {
background-color: var(--bg-primary);
border: 1px solid var(--border-dim);
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
@@ -226,8 +278,8 @@
.article-digest {
padding: 12px 16px;
font-size: 14px;
color: var(--text-muted);
border-bottom: 1px solid var(--border-subtle);
color: var(--text-secondary);
border-bottom: 1px solid var(--border-color);
}
.sub-articles {
@@ -236,15 +288,15 @@
align-items: center;
justify-content: space-between;
padding: 16px;
border-top: 1px solid var(--border-subtle);
border-top: 1px solid var(--border-color);
cursor: pointer;
&:hover { background-color: var(--bg-secondary); }
&:hover { background-color: var(--bg-hover); }
.sub-title {
flex: 1;
font-size: 15px;
color: var(--text-main);
color: var(--text-primary);
padding-right: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
@@ -258,7 +310,7 @@
border-radius: 4px;
object-fit: cover;
flex-shrink: 0;
border: 1px solid var(--border-subtle);
border: 1px solid var(--border-color);
}
}
}
@@ -273,6 +325,7 @@
justify-content: center;
text-align: center;
height: 100%;
background: var(--bg-tertiary); // 对齐 Chat 页面空白背景
.empty-icon {
width: 80px;
@@ -288,6 +341,5 @@
svg { width: 40px; height: 40px; }
}
p { color: var(--text-muted); font-size: 14px; }
p { color: var(--text-tertiary); font-size: 14px; }
}