html/client-web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
ouyangxq
2026-09-15 18:17:21 +08:00
parent 9a8a72b1bd
commit 056f9ef073
6 changed files with 147 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/client-ui.css
+56
View File
@@ -0,0 +1,56 @@
/* Client content standard. Sidebar and brand navigation are intentionally outside this scope. */
:root {
--client-action: #1777ff;
--client-action-hover: #0958d9;
--client-text: #344054;
--client-muted: #667085;
--client-border: #e4e7ec;
--client-surface: #fff;
--client-header-bg: #f8fafc;
--client-hover-bg: #f5f8ff;
--client-success: #067647;
--client-success-bg: #ecfdf3;
--client-warning: #b54708;
--client-warning-bg: #fffaeb;
--client-danger: #b42318;
--client-danger-bg: #fef3f2;
--client-info: #475467;
--client-info-bg: #f2f4f7;
--client-progress: #175cd3;
--client-progress-bg: #eff8ff;
--client-font-size: 13px;
--client-control-height: 32px;
--client-row-action-height: 28px;
--client-table-header-height: 44px;
--client-table-row-height: 48px;
--client-toolbar-padding: 8px 16px;
--client-pagination-padding: 12px 16px;
--client-query-padding: 16px;
--client-gap: 8px;
--client-section-gap: 16px;
--client-radius: 6px;
}
.client-ui { color: var(--client-text); font-size: var(--client-font-size); }
.client-ui .el-button {
--el-button-text-color: var(--client-action);
--el-button-border-color: var(--client-border);
--el-button-hover-text-color: var(--client-action-hover);
--el-button-hover-border-color: #b2ccff;
--el-button-hover-bg-color: var(--client-hover-bg);
height: var(--client-control-height); border-radius: var(--client-radius); font-size: var(--client-font-size);
}
.client-ui .el-button--primary { --el-button-bg-color: var(--client-action); --el-button-border-color: var(--client-action); --el-button-text-color: #fff; --el-button-hover-bg-color: var(--client-action-hover); --el-button-hover-border-color: var(--client-action-hover); --el-button-hover-text-color: #fff; --el-button-active-bg-color: var(--client-action-hover); --el-button-active-border-color: var(--client-action-hover); }
.client-ui .el-button--success { --el-button-text-color: var(--client-success); --el-button-bg-color: var(--client-success-bg); --el-button-border-color: #abefc6; --el-button-hover-text-color: var(--client-success); --el-button-hover-bg-color: #dcfae6; }
.client-ui .el-button--warning { --el-button-text-color: var(--client-warning); --el-button-bg-color: var(--client-warning-bg); --el-button-border-color: #fedf89; --el-button-hover-text-color: var(--client-warning); --el-button-hover-bg-color: #fef0c7; }
.client-ui .el-button--danger { --el-button-text-color: var(--client-danger); --el-button-bg-color: var(--client-danger-bg); --el-button-border-color: #fecdca; --el-button-hover-text-color: var(--client-danger); --el-button-hover-bg-color: #fee4e2; }
.client-ui .el-button.is-link, .client-ui .el-button.is-text { --el-button-text-color: var(--client-action); --el-button-hover-text-color: var(--client-action-hover); }
.client-ui .el-button.is-disabled { color: #98a2b3; background: #f9fafb; border-color: var(--client-border); }
.client-ui .el-button > span { gap: 4px; }
.client-ui .el-input__wrapper, .client-ui .el-select__wrapper { min-height: var(--client-control-height); font-size: var(--client-font-size); }
.client-ui .el-button:focus-visible { outline: 2px solid var(--client-action); outline-offset: 2px; }
.client-status { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 10px; border-radius: 999px; color: var(--client-info); background: var(--client-info-bg); font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap; }
.client-status::before { content: ''; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.client-status[data-tone="primary"] { color: var(--client-progress); background: var(--client-progress-bg); }
.client-status[data-tone="success"] { color: var(--client-success); background: var(--client-success-bg); }
.client-status[data-tone="warning"] { color: var(--client-warning); background: var(--client-warning-bg); }
.client-status[data-tone="danger"] { color: var(--client-danger); background: var(--client-danger-bg); }
src/styles/index.css
+1
View File
@@ -1,4 +1,5 @@
@import './foundation.css';
@import './client-ui.css';
@import './shell.css';
@import './workspace-tabs.css';