zhouchengcheng/ctms
1
1
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

UI界面模拟shadcn admin效果

Browse Source
This commit is contained in:
Cheng Zhou
2025-12-25 15:47:47 +08:00
parent 148fa6ad9a
commit a1a4964cd2
25 changed files with 1061 additions and 636 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/main.css
+231 -55
View File
@@ -1,32 +1,35 @@
/**
* CTMS 全局样式系统
* 基于 8px 网格系统与医疗专业色板
* 参考 shadcn-admin 的轻量、中性、分层风格
*/
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");
:root {
/* 品牌色 - 医疗蓝 */
--ctms-primary: #2f54eb;
--ctms-primary-hover: #597ef7;
--ctms-primary-active: #1d39c4;
--ctms-primary-light: #f0f5ff;
/* 品牌色 - 低饱和蓝灰 */
--ctms-primary: #3f5d75;
--ctms-primary-hover: #365067;
--ctms-primary-active: #2b4356;
--ctms-primary-light: #e6edf2;
/* 语义色 */
--ctms-success: #52c41a;
--ctms-warning: #faad14;
--ctms-danger: #ff4d4f;
--ctms-info: #8c8c8c;
--ctms-success: #3f8f6b;
--ctms-warning: #c58b2a;
--ctms-danger: #c24b4b;
--ctms-info: #64748b;
/* 文字颜色 - 高层级到低层级 */
--ctms-text-main: #262626;
--ctms-text-regular: #595959;
--ctms-text-secondary: #8c8c8c;
--ctms-text-disabled: #bfbfbf;
--ctms-text-main: #0f172a;
--ctms-text-regular: #334155;
--ctms-text-secondary: #64748b;
--ctms-text-disabled: #94a3b8;
/* 中性色 & 背景 */
--ctms-bg-base: #f0f2f5;
--ctms-bg-base: #f9fafb;
--ctms-bg-card: #ffffff;
--ctms-border-color: #f0f0f0;
--ctms-border-color-hover: #d9d9d9;
--ctms-bg-muted: #f3f4f6;
--ctms-border-color: #e5e7eb;
--ctms-border-color-hover: #cbd5e1;
/* 间距 - 8px 网格 */
--ctms-spacing-xs: 4px;
@@ -35,19 +38,31 @@
--ctms-spacing-lg: 24px;
--ctms-spacing-xl: 32px;
/* 圆角 & 阴影 - 升级为更多层级 */
--ctms-radius-sm: 4px;
--ctms-radius: 8px;
/* 圆角 & 阴影 */
--ctms-radius-sm: 6px;
--ctms-radius: 10px;
--ctms-radius-lg: 12px;
--ctms-radius-round: 50%;
--ctms-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
--ctms-shadow: 0 8px 24px rgba(149, 157, 165, 0.1);
--ctms-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.08);
--ctms-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
--ctms-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
--ctms-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
--ctms-shadow-md: 0 12px 26px rgba(15, 23, 42, 0.08);
--ctms-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.1);
/* 动画 */
--ctms-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--ctms-transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
/* Element Plus 主色适配 */
--el-color-primary: var(--ctms-primary);
--el-color-primary-light-3: #9bb1c2;
--el-color-primary-light-5: #c0cdd7;
--el-color-primary-light-7: #dde5ec;
--el-color-primary-light-8: #eef2f6;
--el-color-primary-dark-2: #2b4356;
--el-border-radius-base: var(--ctms-radius);
--el-border-color: var(--ctms-border-color);
--el-text-color-primary: var(--ctms-text-main);
--el-text-color-regular: var(--ctms-text-regular);
}
/* 现代滚动条 */
@@ -72,8 +87,8 @@
/* 全局重置 */
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background-color: var(--ctms-bg-base);
font-family: "Manrope", "Segoe UI", sans-serif;
background: var(--ctms-bg-base);
color: var(--ctms-text-main);
-webkit-font-smoothing: antialiased;
}
@@ -83,8 +98,8 @@ body {
/* 按钮美化 */
.el-button {
border-radius: var(--ctms-radius);
font-weight: 500;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
font-weight: 600;
transition: var(--ctms-transition);
}
.el-button--primary {
@@ -97,11 +112,50 @@ body {
border-color: var(--ctms-primary-hover);
}
.el-button--default {
background-color: #fff;
border-color: var(--ctms-border-color);
color: var(--ctms-text-regular);
}
.el-button--default:hover {
border-color: var(--ctms-border-color-hover);
color: var(--ctms-text-main);
}
.el-button--danger.is-plain {
color: var(--ctms-danger);
border-color: rgba(194, 75, 75, 0.4);
background-color: rgba(194, 75, 75, 0.04);
}
.el-button--default,
.el-button--primary,
.el-button--danger,
.el-button--success,
.el-button--warning {
height: 34px;
padding: 0 14px;
font-size: 13px;
}
.el-button--small {
height: 28px;
padding: 0 10px;
font-size: 12px;
}
.el-button--large {
height: 40px;
padding: 0 18px;
font-size: 14px;
}
/* 卡片美化 */
.el-card {
border: none;
box-shadow: var(--ctms-shadow-sm) !important;
border-radius: var(--ctms-radius);
border: 1px solid var(--ctms-border-color);
box-shadow: none !important;
border-radius: var(--ctms-radius-lg);
margin-bottom: var(--ctms-spacing-md);
}
@@ -122,18 +176,18 @@ body {
}
.el-table th.el-table__cell {
background-color: #fafafa;
background-color: #f6f7f9;
color: var(--ctms-text-main);
font-weight: 600;
height: 48px;
height: 44px;
}
.el-table td.el-table__cell {
padding: 12px 0; /* 增加行高 */
padding: 10px 0;
}
.el-table--enable-row-hover .el-table__row:hover > td.el-table__cell {
background-color: var(--ctms-primary-light);
background-color: #f2f5f8;
}
/* 表单美化 */
@@ -146,40 +200,162 @@ body {
border-radius: var(--ctms-radius);
}
.el-input__wrapper {
border-radius: var(--ctms-radius);
background-color: #ffffff;
min-height: 34px;
}
.el-select .el-input__wrapper {
background-color: #ffffff;
}
.el-input--small .el-input__wrapper,
.el-select--small .el-input__wrapper {
min-height: 30px;
}
.el-input--large .el-input__wrapper,
.el-select--large .el-input__wrapper {
min-height: 40px;
}
.el-form-item {
margin-bottom: 16px;
}
.ctms-form--dense .el-form-item {
margin-bottom: 12px;
}
.el-form-item__error {
color: #b45309;
font-size: 12px;
}
/* 标签美化 */
.el-tag {
border-radius: 2px;
border-radius: 999px;
border: none;
}
.el-tag--info { background-color: #f5f5f5; color: var(--ctms-text-secondary); }
.el-tag--success { background-color: #f6ffed; color: var(--ctms-success); border: 1px solid #b7eb8f; }
.el-tag--warning { background-color: #fffbe6; color: var(--ctms-warning); border: 1px solid #ffe58f; }
.el-tag--danger { background-color: #fff1f0; color: var(--ctms-danger); border: 1px solid #ffa39e; }
.el-tag--success { background-color: rgba(63, 143, 107, 0.12); color: var(--ctms-success); border: 1px solid rgba(63, 143, 107, 0.2); }
.el-tag--warning { background-color: rgba(197, 139, 42, 0.12); color: var(--ctms-warning); border: 1px solid rgba(197, 139, 42, 0.2); }
.el-tag--danger { background-color: rgba(194, 75, 75, 0.12); color: var(--ctms-danger); border: 1px solid rgba(194, 75, 75, 0.2); }
/* 列表整合工具栏 (Table Toolbar) */
.ctms-table-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
gap: 16px;
flex-wrap: wrap;
.el-alert {
border: 1px solid var(--ctms-border-color);
background-color: #ffffff;
}
.ctms-filter-group {
.el-alert__title {
font-size: 13px;
color: var(--ctms-text-regular);
}
.el-alert--warning .el-alert__icon {
color: var(--ctms-warning);
}
.el-alert--success .el-alert__icon {
color: var(--ctms-success);
}
.el-alert--error .el-alert__icon {
color: var(--ctms-danger);
}
.el-button.is-disabled,
.el-input.is-disabled .el-input__wrapper,
.el-select.is-disabled .el-input__wrapper {
opacity: 0.6;
}
.el-empty__description {
color: var(--ctms-text-secondary);
}
.el-skeleton__item {
background: linear-gradient(90deg, #f2f3f5 25%, #eceef1 37%, #f2f3f5 63%);
}
/* 页面结构与筛选区域 */
.ctms-page {
display: flex;
flex-direction: column;
gap: var(--ctms-spacing-lg);
}
.ctms-page-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
}
.ctms-page-title {
font-size: 22px;
font-weight: 600;
color: var(--ctms-text-main);
margin: 0;
}
.ctms-page-actions {
display: flex;
gap: 12px;
align-items: center;
gap: 12px;
}
.ctms-filter-card {
margin-bottom: 0;
}
.ctms-filter-row {
display: flex;
align-items: flex-end;
gap: 20px;
flex-wrap: wrap;
}
.ctms-filter-item {
width: 160px;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 160px;
}
.ctms-action-group {
display: flex;
gap: 12px;
align-items: center;
.ctms-filter-label {
font-size: 12px;
font-weight: 600;
color: var(--ctms-text-regular);
}
.ctms-filter-spacer {
flex: 1;
}
.ctms-table-card {
margin-bottom: 0;
}
.ctms-table .el-table__row {
cursor: pointer;
}
.ctms-pagination {
margin-top: 16px;
display: flex;
justify-content: flex-end;
}
.ctms-section-card {
border: 1px solid var(--ctms-border-color);
}
.ctms-section-title {
font-size: 15px;
font-weight: 600;
color: var(--ctms-text-main);
}