EasyFlow-Tech-Dev/EasyFlow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 统一管理端弹窗与内容区交互样式

Browse Source 
- 收敛管理端公共 Modal 链路，新增表单弹窗与普通内容弹窗包装\n- 迁移 Bot、知识库、插件、工作流、资源、MCP、数据中枢与系统管理页面级弹窗\n- 统一内容区工具栏、列表容器、导航与顶部按钮的视觉密度和交互节奏
This commit is contained in:
陈子默
2026-03-06 19:58:26 +08:00
parent 76c2954a70
commit b191d1aaed
99 changed files with 3148 additions and 1623 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
easyflow-ui-admin/packages/@core/base/design/src/css/global.css
View File

@@ -149,6 +149,109 @@
.card-box {
@apply bg-card text-card-foreground border-border rounded-xl border;
}
.easyflow-modal-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.easyflow-modal-form--compact {
gap: 10px;
}
.easyflow-modal-section {
background: hsl(var(--modal-content-surface-strong));
border: 1px solid hsl(var(--modal-divider));
border-radius: 14px;
box-shadow: none;
padding: 14px;
}
.easyflow-modal-grid {
display: grid;
gap: 14px 16px;
}
.easyflow-modal-grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.easyflow-modal-field-tip {
color: hsl(var(--text-muted));
font-size: 11px;
line-height: 1.5;
margin-top: 4px;
}
.easyflow-modal-form .el-form-item {
margin-bottom: 0;
}
.easyflow-modal-form .el-form-item__label {
color: hsl(var(--text-strong));
font-size: 12px;
font-weight: 600;
line-height: 1.4;
padding-bottom: 6px;
}
.easyflow-modal-form .el-input__wrapper,
.easyflow-modal-form .el-select__wrapper,
.easyflow-modal-form .el-textarea__inner,
.easyflow-modal-form .el-date-editor.el-input__wrapper {
background: hsl(var(--input-background));
border-radius: 12px;
box-shadow: inset 0 0 0 1px hsl(var(--input) / 0.92);
transition:
box-shadow 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease;
}
.easyflow-modal-form .el-input__wrapper,
.easyflow-modal-form .el-select__wrapper,
.easyflow-modal-form .el-date-editor.el-input__wrapper {
min-height: 42px;
}
.easyflow-modal-form .el-textarea__inner {
min-height: 96px;
padding: 10px 12px;
}
.easyflow-modal-form .el-input__wrapper:hover,
.easyflow-modal-form .el-select__wrapper:hover,
.easyflow-modal-form .el-textarea__inner:hover,
.easyflow-modal-form .el-date-editor.el-input__wrapper:hover {
box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.18);
}
.easyflow-modal-form .el-input__wrapper.is-focus,
.easyflow-modal-form .el-select__wrapper.is-focused,
.easyflow-modal-form .el-textarea__inner:focus,
.easyflow-modal-form .el-date-editor.el-input__wrapper.is-focus {
box-shadow:
inset 0 0 0 1px hsl(var(--primary) / 0.72),
0 0 0 4px hsl(var(--primary) / 0.12);
}
.easyflow-modal-form .el-form-item.is-error .el-input__wrapper,
.easyflow-modal-form .el-form-item.is-error .el-select__wrapper,
.easyflow-modal-form .el-form-item.is-error .el-textarea__inner,
.easyflow-modal-form
.el-form-item.is-error
.el-date-editor.el-input__wrapper {
box-shadow:
inset 0 0 0 1px hsl(var(--destructive) / 0.8),
0 0 0 4px hsl(var(--destructive) / 0.08);
}
@media (max-width: 768px) {
.easyflow-modal-grid--2 {
grid-template-columns: 1fr;
}
}
}
html.invert-mode {

81
easyflow-ui-admin/packages/@core/base/design/src/design-tokens/dark.css
View File

@@ -2,11 +2,11 @@
.dark[data-theme='custom'],
.dark[data-theme='default'] {
/* Default background color of <body />...etc */
--background: 222.34deg 10.43% 12.27%;
--background: 222 16% 10.5%;
/* 主体区域背景色 */
--background-deep: 220deg 13.06% 9%;
--foreground: 0 0% 95%;
--background-deep: 220 18% 8.6%;
--foreground: 210 18% 95%;
/* Background color for <Card /> */
--card: 222.34deg 10.43% 12.27%;
@@ -73,12 +73,12 @@
--heavy-foreground: var(--accent-foreground);
/* Default border color */
--border: 240 3.7% 22%;
--border: 220 10% 21%;
/* Border color for inputs such as <Input />, <Select />, <Textarea /> */
--input: 0deg 0% 100% / 10%;
--input-placeholder: 218deg 11% 65%;
--input-background: 0deg 0% 100% / 5%;
--input: 220 10% 22%;
--input-placeholder: 218 10% 66%;
--input-background: 220 10% 16%;
/* Used for focus ring */
--ring: 222.2 84% 4.9%;
@@ -97,20 +97,75 @@
/* =============component & UI============= */
--sidebar: 222.34deg 10.43% 12.27%;
--sidebar-deep: 220deg 13.06% 9%;
--sidebar: 220 14% 12%;
--sidebar-deep: 220 18% 9.5%;
--menu: var(--sidebar);
/* header */
--header: 222.34deg 10.43% 12.27%;
--header: 220 18% 12.5%;
--nav-surface: 220 18% 12.5%;
--nav-surface-subtle: 219 18% 15.4%;
--nav-border: 217 18% 23%;
--nav-item-hover: 217 28% 18.8%;
--nav-item-active: 216 46% 24%;
--nav-item-active-foreground: 210 96% 92%;
--nav-item-muted-foreground: 218 15% 78%;
--nav-indicator: var(--primary);
--nav-tool-bg: 217 34% 17%;
--nav-tool-hover: 216 42% 21%;
--breadcrumb-muted: 218 12% 72%;
--breadcrumb-current: 210 96% 92%;
--surface-canvas: 220 18% 9%;
--surface-panel: 220 14% 12.8%;
--surface-subtle: 220 11% 15.8%;
--surface-elevated: 220 14% 14.5%;
--surface-glass: 218 24% 16.2%;
--surface-contrast-soft: 220 11% 17.2%;
--line-subtle: 220 9% 21%;
--divider-faint: 220 10% 23%;
--table-row-hover: 218 16% 18%;
--table-row-border: 220 9% 22%;
--table-header-bg: 220 11% 15.5%;
--toolbar-bg: 220 16% 14%;
--toolbar-border: 220 9% 23%;
--text-strong: 0 0% 96%;
--text-muted: 218 10% 70%;
--glass-tint: 218 26% 16.2%;
--glass-border: 210 100% 98%;
--glass-blur: 22px;
--radius-modal: 20px;
--modal-surface: 220 14% 13%;
--modal-surface-strong: 220 14% 13%;
--modal-content-surface: 220 14% 13%;
--modal-content-surface-strong: 220 14% 13%;
--modal-footer-surface: 220 13% 12%;
--modal-border: 218 16% 24%;
--modal-divider: 218 18% 24%;
--modal-shadow: 0 24px 60px -30px hsl(212 60% 2% / 0.58);
--modal-shell-highlight: 0 0% 100% / 0;
--modal-shell-border-soft: 218 16% 24% / 0.96;
--modal-shell-shadow-near: 212 50% 2% / 0.38;
--modal-shell-shadow-far: 212 46% 2% / 0.42;
--modal-overlay: 220 18% 10%;
--modal-overlay-opacity: 0.48;
--modal-preview-surface: 217 28% 18.5%;
--modal-preview-surface-strong: 219 23% 14.5%;
--modal-preview-border: 214 44% 31%;
--modal-preview-glow: 211 100% 62%;
--nav-ambient: 214 100% 44%;
--nav-ambient-secondary: 194 82% 40%;
--nav-sheen: 210 100% 96%;
--shadow-subtle: 0 18px 42px -30px hsl(212 100% 5% / 0.48);
--shadow-toolbar: 0 28px 54px -36px hsl(212 100% 4% / 0.58);
--shadow-float: 0 34px 70px -38px hsl(212 100% 3% / 0.68);
--bot-back-item: hsl(0deg 0% 91.76%);
--bot-collapse-itme-back: hsl(var(--background-deep));
--bot-chat-message-container: hsl(var(--background-deep));
--bot-chat-message-item-back: hsl(0deg 0% 100%);
--common-font-placeholder-color: hsl(220deg 1.45% 59.41%);
--table-header-text-color: hsl(0deg 0% 91.76%);
--table-header-bg-color: hsl(231.43, 7.87%, 17.45%);
--table-cell-shadow-color: hsl(231.43, 7.87%, 17.45%);
--table-header-text-color: hsl(var(--text-strong));
--table-header-bg-color: hsl(var(--table-header-bg));
--table-cell-shadow-color: hsl(var(--table-row-border));
--bot-select-data-item-back: hsl(0deg 0% 98.04%);
color-scheme: dark;
}

81
easyflow-ui-admin/packages/@core/base/design/src/design-tokens/default.css
View File

@@ -10,8 +10,8 @@
--background: 0 0% 100%;
/* 主体区域背景色 */
--background-deep: 220 33.33% 98.24%;
--foreground: 210 6% 21%;
--background-deep: 220 32% 96.9%;
--foreground: 215 20% 18%;
/* Background color for <Card /> */
--card: 0 0% 100%;
@@ -31,7 +31,7 @@
/* 主题颜色 */
--primary: 216 100% 50%;
--primary: 211 100% 50%;
--primary-foreground: 0 0% 98%;
/* Used for destructive actions such as <Button variant="destructive"> */
@@ -72,12 +72,12 @@
--heavy-foreground: var(--accent-foreground);
/* Default border color */
--border: 0 0% 94.12%;
--border: 216 18% 90%;
/* Border color for inputs such as <Input />, <Select />, <Textarea /> */
--input: 240deg 5.88% 90%;
--input-placeholder: 217 10.6% 65%;
--input-background: 0 0% 100%;
--input: 216 18% 90%;
--input-placeholder: 215 12% 58%;
--input-background: 210 33% 98.4%;
/* Used for focus ring */
--ring: 222.2 84% 4.9%;
@@ -97,12 +97,67 @@
/* =============component & UI============= */
/* menu */
--sidebar: 0 0% 100%;
--sidebar-deep: 0 0% 100%;
--sidebar: 210 33% 99.4%;
--sidebar-deep: 210 28% 98%;
--menu: var(--sidebar);
/* header */
--header: 0 0% 100%;
--header: 212 100% 98.7%;
--nav-surface: 212 100% 98.7%;
--nav-surface-subtle: 211 84% 97.3%;
--nav-border: 214 34% 89%;
--nav-item-hover: 211 100% 96.3%;
--nav-item-active: 211 100% 93.8%;
--nav-item-active-foreground: 213 78% 41%;
--nav-item-muted-foreground: 215 18% 34%;
--nav-indicator: var(--primary);
--nav-tool-bg: 212 88% 96.1%;
--nav-tool-hover: 211 100% 94%;
--breadcrumb-muted: 215 12% 48%;
--breadcrumb-current: 213 78% 41%;
--surface-canvas: 216 32% 97%;
--surface-panel: 0 0% 100%;
--surface-subtle: 210 24% 98.4%;
--surface-elevated: 210 33% 99.5%;
--surface-glass: 212 100% 98.9%;
--surface-contrast-soft: 210 26% 95.8%;
--line-subtle: 214 18% 91%;
--divider-faint: 215 22% 90%;
--table-row-hover: 212 55% 97%;
--table-row-border: 214 16% 92%;
--table-header-bg: 210 28% 97%;
--toolbar-bg: 210 36% 98.5%;
--toolbar-border: 214 18% 90%;
--text-strong: 216 22% 19%;
--text-muted: 215 10% 49%;
--glass-tint: 212 100% 98.9%;
--glass-border: 0 0% 100%;
--glass-blur: 20px;
--radius-modal: 20px;
--modal-surface: 0 0% 100%;
--modal-surface-strong: 0 0% 100%;
--modal-content-surface: 0 0% 100%;
--modal-content-surface-strong: 0 0% 100%;
--modal-footer-surface: 210 20% 98.4%;
--modal-border: 214 22% 86%;
--modal-divider: 214 22% 89%;
--modal-shadow: 0 22px 54px -28px hsl(215 28% 18% / 0.18);
--modal-shell-highlight: 0 0% 100% / 0;
--modal-shell-border-soft: 214 22% 86% / 0.94;
--modal-shell-shadow-near: 216 30% 18% / 0.08;
--modal-shell-shadow-far: 216 34% 18% / 0.12;
--modal-overlay: 220 18% 8%;
--modal-overlay-opacity: 0.24;
--modal-preview-surface: 211 100% 97.3%;
--modal-preview-surface-strong: 0 0% 100%;
--modal-preview-border: 212 84% 88%;
--modal-preview-glow: 211 100% 56%;
--nav-ambient: 212 100% 84%;
--nav-ambient-secondary: 194 93% 82%;
--nav-sheen: 0 0% 100%;
--shadow-subtle: 0 18px 42px -30px hsl(211 78% 48% / 0.16);
--shadow-toolbar: 0 28px 54px -34px hsl(211 78% 48% / 0.2);
--shadow-float: 0 34px 68px -38px hsl(211 78% 48% / 0.24);
accent-color: var(--primary);
color-scheme: light;
@@ -112,9 +167,9 @@
--bot-chat-message-container: hsl(228deg 33.33% 97.06%);
--bot-chat-message-item-back: hsl(0deg 0% 100%);
--common-font-placeholder-color: hsl(220deg 1.45% 59.41%);
--table-header-text-color: hsl(240, 0.99%, 19.8%);
--table-header-bg-color: hsl(220 60% 98.04%);
--table-cell-shadow-color: hsl(225, 18.18%, 95.69%);
--table-header-text-color: hsl(var(--text-strong));
--table-header-bg-color: hsl(var(--table-header-bg));
--table-cell-shadow-color: hsl(var(--table-row-border));
--bot-select-data-item-back: hsl(0deg 0% 98.04%);
}