feat: 样式统一 + 月份下拉框扩展
- 品牌色统一为天机阁标准 #4A6CF7，tailwind.config 扩展完整色阶 - styles.css 新增 :root CSS 变量层（brand 色阶、语义色、圆角/阴影 token） - 全项目 hex/Tailwind 类统一替换为 brand-* CSS 变量（115 处引用） - border-radius/box-shadow 统一使用 token 变量 - 预留 :root[data-theme="dark"] 暗色主题变量占位 - 所有月份下拉框范围从 3 年/15 月扩展至 2020-2027（8 年 96 月）
This commit is contained in:
mac
@@ -1,3 +1,44 @@
|
||||
:root {
|
||||
/* ── 品牌色（天机阁标准 #4A6CF7）── */
|
||||
--brand-50: #f0f3ff;
|
||||
--brand-100: #dbe3fe;
|
||||
--brand-200: #b9c7fd;
|
||||
--brand-300: #93a9fc;
|
||||
--brand-400: #748bf9;
|
||||
--brand-500: #5670f6;
|
||||
--brand-600: #4A6CF7;
|
||||
--brand-700: #3b53c8;
|
||||
--brand-800: #2d3d9d;
|
||||
--brand-900: #1f2a72;
|
||||
--brand-950: #141b4d;
|
||||
|
||||
/* ── 语义色 ── */
|
||||
--success: #059669;
|
||||
--success-bg: #ecfdf5;
|
||||
--warning: #b45309;
|
||||
--warning-bg: #fffbeb;
|
||||
--danger: #dc2626;
|
||||
--danger-bg: #fef2f2;
|
||||
--info: var(--brand-800);
|
||||
--info-bg: var(--brand-50);
|
||||
|
||||
/* ── 圆角 ── */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
|
||||
/* ── 阴影 ── */
|
||||
--shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
|
||||
--shadow-drawer: -18px 0 45px rgba(15, 23, 42, 0.14);
|
||||
--shadow-overlay: 0 20px 60px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
/* 预留暗色主题（本次不实现，单独排期） */
|
||||
:root[data-theme="dark"] {
|
||||
/* TODO: 暗色品牌色变体，后续排期 */
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: 1400px;
|
||||
overflow-x: auto;
|
||||
@@ -29,7 +70,7 @@ body {
|
||||
background: rgba(255,255,255,0.08);
|
||||
}
|
||||
.workspace-nav-item.active {
|
||||
color: #60a5fa;
|
||||
color: var(--brand-400);
|
||||
background: rgba(96,165,250,0.15);
|
||||
}
|
||||
|
||||
@@ -38,7 +79,7 @@ body {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 8px 4px;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
color: #94a3b8;
|
||||
transition: all 0.15s ease;
|
||||
@@ -52,11 +93,11 @@ body {
|
||||
|
||||
.sidebar-tab.active {
|
||||
background: #1e293b;
|
||||
color: #60a5fa;
|
||||
color: var(--brand-400);
|
||||
}
|
||||
|
||||
.sidebar-tab.active i {
|
||||
color: #60a5fa;
|
||||
color: var(--brand-400);
|
||||
}
|
||||
|
||||
.panel {
|
||||
@@ -91,8 +132,8 @@ body {
|
||||
.finance-tab:hover { color: #1e293b; }
|
||||
|
||||
.finance-tab.active {
|
||||
color: #1d4ed8;
|
||||
border-bottom-color: #1d4ed8;
|
||||
color: var(--brand-700);
|
||||
border-bottom-color: var(--brand-700);
|
||||
}
|
||||
|
||||
/* 详情弹窗固定高度，tab 切换不抖动 */
|
||||
@@ -126,7 +167,7 @@ body {
|
||||
.project-board {
|
||||
background: #fff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -151,7 +192,7 @@ body {
|
||||
gap: 6px;
|
||||
background: #fff;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 5px 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
@@ -209,9 +250,9 @@ body {
|
||||
}
|
||||
|
||||
.project-tree-node.active {
|
||||
background: #eff6ff;
|
||||
border-left-color: #3b82f6;
|
||||
color: #1d4ed8;
|
||||
background: var(--brand-50);
|
||||
border-left-color: var(--brand-500);
|
||||
color: var(--brand-700);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -243,7 +284,7 @@ body {
|
||||
z-index: 100;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
padding: 4px 0;
|
||||
min-width: 140px;
|
||||
@@ -383,12 +424,12 @@ body {
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.status-未开始 { background: #f1f5f9; color: #64748b; }
|
||||
.status-进行中 { background: #dbeafe; color: #1d4ed8; }
|
||||
.status-进行中 { background: var(--brand-100); color: var(--brand-700); }
|
||||
.status-验收中 { background: #fef3c7; color: #92400e; }
|
||||
.status-已结束 { background: #dcfce7; color: #166534; }
|
||||
/* 产品版本状态 */
|
||||
.status-规划中 { background: #f1f5f9; color: #64748b; }
|
||||
.status-开发中 { background: #dbeafe; color: #1d4ed8; }
|
||||
.status-开发中 { background: var(--brand-100); color: var(--brand-700); }
|
||||
.status-测试中 { background: #fef3c7; color: #92400e; }
|
||||
.status-已上线 { background: #dcfce7; color: #166534; }
|
||||
.status-已取消 { background: #f1f5f9; color: #94a3b8; }
|
||||
@@ -425,7 +466,7 @@ body {
|
||||
cursor: pointer;
|
||||
}
|
||||
.task-check:hover {
|
||||
color: #3b82f6;
|
||||
color: var(--brand-500);
|
||||
}
|
||||
|
||||
.task-grip {
|
||||
@@ -539,7 +580,7 @@ body {
|
||||
}
|
||||
.upload-task-fill {
|
||||
height: 100%;
|
||||
background: #3b82f6;
|
||||
background: var(--brand-500);
|
||||
border-radius: 2px;
|
||||
transition: width 0.2s;
|
||||
}
|
||||
@@ -591,20 +632,20 @@ body {
|
||||
.card {
|
||||
background: white;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
background: white;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.metric-card:hover {
|
||||
border-color: #93c5fd;
|
||||
border-color: var(--brand-300);
|
||||
}
|
||||
|
||||
.badge {
|
||||
@@ -616,15 +657,15 @@ body {
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.badge-red { background: #fef2f2; color: #b91c1c; }
|
||||
.badge-amber { background: #fffbeb; color: #b45309; }
|
||||
.badge-green { background: #ecfdf5; color: #047857; }
|
||||
.badge-blue { background: #eff6ff; color: #1d4ed8; }
|
||||
.badge-red { background: var(--danger-bg); color: #b91c1c; }
|
||||
.badge-amber { background: var(--warning-bg); color: #b45309; }
|
||||
.badge-green { background: var(--success-bg); color: #047857; }
|
||||
.badge-blue { background: var(--brand-50); color: var(--brand-700); }
|
||||
.badge-slate { background: #f1f5f9; color: #475569; }
|
||||
|
||||
.btn {
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
display: inline-flex;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
@@ -640,8 +681,8 @@ body {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.btn-primary { background: #1d4ed8; color: white; }
|
||||
.btn-primary:hover { background: #1e40af; }
|
||||
.btn-primary { background: var(--brand-700); color: white; }
|
||||
.btn-primary:hover { background: var(--brand-800); }
|
||||
.btn-ghost { background: white; border: 1px solid #e2e8f0; color: #334155; }
|
||||
.btn-ghost:hover { background: #f8fafc; }
|
||||
|
||||
@@ -650,7 +691,7 @@ input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
color: #1e293b;
|
||||
@@ -671,8 +712,8 @@ select {
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
|
||||
border-color: var(--brand-600);
|
||||
box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.08);
|
||||
}
|
||||
input::placeholder,
|
||||
textarea::placeholder { color: #cbd5e1; }
|
||||
@@ -688,7 +729,7 @@ textarea { min-height: 80px; height: auto; resize: vertical; }
|
||||
height: 38px;
|
||||
width: 100%;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
color: #1e293b;
|
||||
@@ -697,8 +738,8 @@ textarea { min-height: 80px; height: auto; resize: vertical; }
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
.form-ctrl:focus {
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
|
||||
border-color: var(--brand-600);
|
||||
box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.08);
|
||||
}
|
||||
.form-ctrl::placeholder { color: #cbd5e1; }
|
||||
.form-ctrl:disabled { background: #f8fafc; cursor: not-allowed; }
|
||||
@@ -726,7 +767,7 @@ textarea { min-height: 80px; height: auto; resize: vertical; }
|
||||
background: #f8fafc;
|
||||
}
|
||||
.prod-date-input:focus {
|
||||
border-color: #3b82f6;
|
||||
border-color: var(--brand-500);
|
||||
background: white;
|
||||
outline: none;
|
||||
}
|
||||
@@ -777,14 +818,14 @@ td {
|
||||
|
||||
.drawer-panel {
|
||||
background: white;
|
||||
box-shadow: -18px 0 45px rgba(15, 23, 42, 0.14);
|
||||
box-shadow: var(--shadow-drawer);
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
width: 720px;
|
||||
}
|
||||
|
||||
.file-link {
|
||||
color: #1d4ed8;
|
||||
color: var(--brand-700);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
@@ -842,9 +883,9 @@ td {
|
||||
|
||||
.activity-icon {
|
||||
align-items: center;
|
||||
background: #dbeafe;
|
||||
background: var(--brand-100);
|
||||
border-radius: 999px;
|
||||
color: #1d4ed8;
|
||||
color: var(--brand-700);
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
height: 24px;
|
||||
@@ -881,14 +922,14 @@ td {
|
||||
|
||||
.comment-box {
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.comment-box:focus-within {
|
||||
border-color: #93c5fd;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
|
||||
border-color: var(--brand-300);
|
||||
box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.08);
|
||||
}
|
||||
|
||||
/* Squire editor */
|
||||
@@ -1041,7 +1082,7 @@ td {
|
||||
font-weight: 600;
|
||||
}
|
||||
.activity-item .rich-content a {
|
||||
color: #1d4ed8;
|
||||
color: var(--brand-700);
|
||||
text-decoration: underline;
|
||||
}
|
||||
.activity-item .rich-content ul,
|
||||
@@ -1076,8 +1117,8 @@ td {
|
||||
padding-top: 48px; overflow-y: auto;
|
||||
}
|
||||
.task-panel {
|
||||
background: #fff; border-radius: 12px; width: 1000px; max-width: 96vw;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.12); margin-bottom: 48px;
|
||||
background: #fff; border-radius: var(--radius-lg); width: 1000px; max-width: 96vw;
|
||||
box-shadow: var(--shadow-overlay); margin-bottom: 48px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.task-header {
|
||||
@@ -1087,7 +1128,7 @@ td {
|
||||
.task-drawer .task-title { color: #1e293b; font-size: 15px; font-weight: 600; }
|
||||
.task-close {
|
||||
color: #94a3b8; background: none; border: none; cursor: pointer;
|
||||
padding: 4px; border-radius: 6px; display: flex;
|
||||
padding: 4px; border-radius: var(--radius-sm); display: flex;
|
||||
}
|
||||
.task-close:hover { color: #475569; background: #f1f5f9; }
|
||||
.task-body-wrap, .task-page-wrap { position: relative; overflow: hidden; }
|
||||
@@ -1106,7 +1147,7 @@ td {
|
||||
.task-drawer-title { font-size: 15px; font-weight: 600; color: #1e293b; }
|
||||
.task-drawer-form { padding: 16px 20px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
|
||||
.task-group {
|
||||
background: #fff; border-radius: 8px;
|
||||
background: #fff; border-radius: var(--radius-md);
|
||||
border: 1px solid #e2e8f0; overflow: hidden;
|
||||
}
|
||||
.task-group-hd {
|
||||
@@ -1142,7 +1183,7 @@ td {
|
||||
.task-col-badge { color: #64748b; font-size: 12px; white-space: nowrap; width: 90px; text-align: right; }
|
||||
.task-none { color: #94a3b8; font-size: 13px; padding: 12px 14px; text-align: center; border-top: 1px solid #f1f5f9; }
|
||||
.task-form {
|
||||
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
|
||||
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: var(--radius-md);
|
||||
padding: 14px; margin-bottom: 16px;
|
||||
}
|
||||
.task-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
|
||||
@@ -1179,14 +1220,14 @@ td {
|
||||
.toast {
|
||||
pointer-events: auto;
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 10px 16px; border-radius: 8px;
|
||||
padding: 10px 16px; border-radius: var(--radius-md);
|
||||
font-size: 13px; font-weight: 500;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
|
||||
animation: toastIn 0.2s ease-out; max-width: 380px;
|
||||
}
|
||||
.toast.toast-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
|
||||
.toast.toast-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
|
||||
.toast.toast-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
|
||||
.toast.toast-success { background: var(--success-bg); color: #166534; border: 1px solid #bbf7d0; }
|
||||
.toast.toast-error { background: var(--danger-bg); color: #991b1b; border: 1px solid #fecaca; }
|
||||
.toast.toast-info { background: var(--brand-50); color: var(--brand-800); border: 1px solid var(--brand-200); }
|
||||
.toast.fade-out { animation: toastOut 0.25s ease-in forwards; }
|
||||
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
|
||||
@keyframes toastOut { to { opacity: 0; transform: translateX(20px); } }
|
||||
@@ -1216,4 +1257,4 @@ td {
|
||||
|
||||
/* 项目树拖拽 */
|
||||
.project-tree-node.dragging { opacity: 0.4; }
|
||||
.project-tree-node.drag-over { border-top: 2px solid #2563eb; }
|
||||
.project-tree-node.drag-over { border-top: 2px solid var(--brand-600); }
|
||||
|
||||
Reference in New Issue
Block a user