/* ============ 设计变量 & 全局重置 ============ */ :root { --primary-color: #2563eb; --primary-hover: #1d4ed8; --primary-light: #eff6ff; --primary-border: #bfdbfe; --bg-app: #f8fafc; --bg-card: #ffffff; --text-main: #0f172a; --text-muted: #64748b; --border-color: #e2e8f0; --border-light: #f1f5f9; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02); --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03); --shadow-lg: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; } * { box-sizing: border-box; } html, body, #root { margin: 0; padding: 0; min-height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; background-color: var(--bg-app); color: var(--text-main); -webkit-font-smoothing: antialiased; } a { color: var(--primary-color); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--primary-hover); } /* 优化全局滚动条 */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* ============ 后台主布局与侧边栏 ============ */ .app-shell { min-height: 100vh; background: var(--bg-app); } .app-main { min-width: 0; background: var(--bg-app); display: flex; flex-direction: column; } .app-header { height: 60px !important; padding: 0 24px !important; line-height: 60px !important; background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 99; } .app-header__left { display: flex; align-items: center; gap: 16px; } .app-header__right { display: flex; align-items: center; gap: 16px; } .app-header__collapse { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: #ffffff; color: var(--text-muted); cursor: pointer; transition: all 0.2s ease; } .app-header__collapse:hover { border-color: var(--primary-border); background: var(--primary-light); color: var(--primary-color); } .app-header__user { display: flex; align-items: center; gap: 10px; padding: 4px 10px; border-radius: 20px; border: 1px solid transparent; cursor: pointer; transition: all 0.2s ease; } .app-header__user:hover { background: #f1f5f9; border-color: #e2e8f0; } .app-header__user-avatar { background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important; color: #fff !important; font-weight: 600; } .app-content { min-width: 0; margin: 20px 24px 24px; flex: 1; } .app-content__body { min-height: calc(100vh - 60px - 44px); padding: 24px; background: #ffffff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .app-main--flush .app-content { margin: 0; } .app-main--flush .app-content__body { height: calc(100vh - 60px); min-height: 0; padding: 0; border: 0; border-radius: 0; background: #ffffff; overflow: hidden; } /* 侧边栏样式(浅色固定导航栏) */ .app-sidebar { position: sticky; top: 0; height: 100vh; background: #ffffff !important; border-right: 1px solid #e2e8f0; box-shadow: 2px 0 8px rgba(15, 23, 42, 0.03); z-index: 100; flex-shrink: 0; } .app-sidebar .ant-layout-sider-children { display: flex; flex-direction: column; height: 100%; } .app-sidebar__brand { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 20px; color: #0f172a; font-size: 18px; font-weight: 700; letter-spacing: 0.3px; border-bottom: 1px solid #f1f5f9; } .app-sidebar__brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); color: #ffffff; font-size: 17px; font-weight: 800; } .app-sidebar__brand-text { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #0f172a; font-weight: 700; } .app-sidebar__nav { flex: 1; min-height: 0; padding: 16px 12px 24px; overflow-y: auto; } .app-sidebar__group { margin-bottom: 6px; } .app-sidebar__item, .app-sidebar__child { width: 100%; border: 0; background: transparent; color: #475569; cursor: pointer; font-family: inherit; text-align: left; transition: all 0.2s ease; position: relative; } .app-sidebar__item { display: flex; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; } .app-sidebar__item:hover { color: #2563eb; background: #f1f5f9; } .app-sidebar__item--parent-active { color: #2563eb !important; font-weight: 700; background: transparent !important; } .app-sidebar__item--parent-active .app-sidebar__icon { color: #2563eb !important; } .app-sidebar__item--active { color: #2563eb !important; background: #eff6ff !important; font-weight: 700; } .app-sidebar__item--active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3.5px; border-radius: 0 4px 4px 0; background: #2563eb; } .app-sidebar__item--disabled { color: #94a3b8; cursor: not-allowed; } .app-sidebar__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; margin-right: 12px; font-size: 17px; transition: transform 0.2s ease; } .app-sidebar__item:hover .app-sidebar__icon, .app-sidebar__item--active .app-sidebar__icon { transform: scale(1.08); color: #2563eb; } .app-sidebar__label { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .app-sidebar__arrow { margin-left: 8px; color: #94a3b8; font-size: 11px; transform: rotate(0deg); transition: transform 0.2s ease; } .app-sidebar__arrow--open { transform: rotate(180deg); color: #2563eb; } .app-sidebar__children { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px 22px; padding-left: 10px; border-left: 1.5px solid #e2e8f0; } .app-sidebar__child { min-height: 34px; padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; color: #64748b; } .app-sidebar__child:hover:not(:disabled) { color: #2563eb; background: #f1f5f9; } .app-sidebar__child--active { color: #2563eb !important; background: #eff6ff !important; font-weight: 700; } .app-sidebar--collapsed .app-sidebar__brand { justify-content: center; padding: 0; } .app-sidebar--collapsed .app-sidebar__nav { padding: 16px 8px 24px; } .app-sidebar--collapsed .app-sidebar__item { justify-content: center; padding: 10px 0; } .app-sidebar--collapsed .app-sidebar__icon { margin-right: 0; } /* ============ 通用 PageHeader 组件样式 ============ */ .page-header-wrapper { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border-light); } .page-header-breadcrumb { margin-bottom: 8px !important; font-size: 13px !important; } .page-header-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .page-header-extra { display: flex; align-items: center; gap: 12px; } /* ============ 现代 Dashboard 样式 ============ */ .dash-welcome-card { background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%); border: 1px solid #bfdbfe; border-radius: var(--radius-lg); padding: 24px 28px; color: #0f172a; margin-bottom: 24px; position: relative; overflow: hidden; box-shadow: 0 4px 20px -2px rgba(37, 99, 235, 0.08); } .dash-welcome-card::after { content: ''; position: absolute; top: -40px; right: -40px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, rgba(37, 99, 235, 0) 70%); border-radius: 50%; pointer-events: none; } .dash-welcome-title { font-size: 22px; font-weight: 700; color: #0f172a !important; margin: 0 0 6px 0 !important; } .dash-welcome-sub { font-size: 14px; color: #475569; max-width: 600px; margin: 0; } .dash-quick-launch { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; } .dash-quick-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--radius-md); background: #ffffff; border: 1px solid #cbd5e1; color: #1e293b; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); transition: all 0.2s ease; } .dash-quick-btn:hover { background: #2563eb; border-color: #2563eb; color: #ffffff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3); } /* 高质感 Metric Card */ .metric-card-box { background: #ffffff; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 20px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; box-shadow: var(--shadow-sm); } .metric-card-box:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary-border); } .metric-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .metric-card-title { font-size: 13.5px; font-weight: 600; color: var(--text-muted); } .metric-card-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--primary-light); color: var(--primary-color); } .metric-card-icon--emerald { background: #ecfdf5; color: #10b981; } .metric-card-icon--purple { background: #f3e8ff; color: #a855f7; } .metric-card-icon--amber { background: #fffbeb; color: #f59e0b; } .metric-card-icon--rose { background: #ffe4e6; color: #f43f5e; } .metric-card-value { font-size: 26px; font-weight: 700; color: var(--text-main); line-height: 1.2; } .metric-card-footer { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border-light); display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-muted); } /* 自定义 Status Tag */ .status-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; font-size: 12.5px; font-weight: 600; } .status-dot { width: 6px; height: 6px; border-radius: 50%; } .status-tag--blue { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; } .status-tag--blue .status-dot { background: #2563eb; } .status-tag--cyan { background: #ecfeff; color: #0891b2; border: 1px solid #a5f3fc; } .status-tag--cyan .status-dot { background: #0891b2; } .status-tag--green { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; } .status-tag--green .status-dot { background: #16a34a; } .status-tag--red { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; } .status-tag--red .status-dot { background: #dc2626; } .status-tag--gray { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; } .status-tag--gray .status-dot { background: #64748b; } /* ============ 开发者工具与 API 调试器 CSS ============ */ .debug-console { background: #090d16; border: 1px solid #1e293b; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); } .debug-console-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: #0f172a; border-bottom: 1px solid #1e293b; color: #94a3b8; font-size: 13px; font-weight: 600; } .debug-console-body { padding: 16px; color: #e2e8f0; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 13px; line-height: 1.6; max-height: 520px; overflow: auto; } /* ============ 登录页面 Glassmorphism 样式 ============ */ .login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 15% 15%, #1e1b4b 0%, #0f172a 50%, #020617 100%); position: relative; overflow: hidden; } .login-wrapper::before { content: ''; position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, rgba(59, 130, 246, 0) 70%); top: 10%; left: 15%; border-radius: 50%; pointer-events: none; } .login-wrapper::after { content: ''; position: absolute; width: 450px; height: 450px; background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0) 70%); bottom: 10%; right: 15%; border-radius: 50%; pointer-events: none; } .login-card { width: 420px; padding: 36px 32px; background: rgba(15, 23, 42, 0.75) !important; backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: var(--radius-lg) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important; color: #ffffff; } .login-logo { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4); color: #ffffff; font-size: 24px; font-weight: 800; margin-bottom: 16px; } /* ============ 开放 API 对接文档适配 ============ */ .api-docs { display: flex; align-items: stretch; width: 100%; height: 100%; min-height: 0; background: #ffffff; overflow: hidden; } .api-docs__toc { flex: 0 0 230px; width: 230px; height: 100%; overflow-y: auto; border-right: 1px solid #cbd5e1; background: #f1f5f9; padding: 16px 12px 24px; } .api-docs__toc-header { display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px; margin-bottom: 12px; border-bottom: 1px solid #cbd5e1; font-size: 13px; font-weight: 700; color: #0f172a; letter-spacing: 0.3px; } .api-docs__nav { display: flex; flex-direction: column; gap: 14px; } .api-docs__nav-group { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; border-bottom: 1px dashed #cbd5e1; } .api-docs__nav-group:last-child { border-bottom: 0; padding-bottom: 0; } .api-docs__nav-heading { display: flex; align-items: center; gap: 6px; padding: 4px 8px; margin-bottom: 6px; font-size: 11.5px; font-weight: 700; color: #64748b; letter-spacing: 0.5px; } .api-docs__nav-heading::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #2563eb; } .api-docs__nav-item { display: block; min-height: 32px; padding: 6px 12px; font-size: 13px; font-weight: 500; color: #334155; cursor: pointer; border-radius: 6px; transition: all 0.15s ease; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .api-docs__nav-item:hover { color: #2563eb; background: #eff6ff; } .api-docs__nav-item--active { color: #2563eb !important; background: #eff6ff !important; font-weight: 600; } .api-docs__nav-sub { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 6px 10px; padding-left: 12px; border-left: 1.5px solid #cbd5e1; } .api-docs__nav-sub-item { display: block; min-height: 28px; padding: 4px 10px; font-size: 12px; color: #64748b; cursor: pointer; border-radius: 5px; transition: all 0.15s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; } .api-docs__nav-sub-item:hover { color: #2563eb; background: #f1f5f9; } .api-docs__nav-sub-item--active { color: #2563eb !important; font-weight: 600; background: #eff6ff !important; border-left: 2px solid #2563eb; margin-left: -13.5px; padding-left: 11.5px; } .api-docs__content { flex: 1 1 auto; min-width: 0; height: 100%; overflow-y: auto; scroll-behavior: smooth; background: #ffffff; padding: 0; } .api-docs__inner { width: 100%; max-width: 1600px; min-height: 100%; margin: 0; padding: 32px 48px 64px; } .api-docs__h2 { font-size: 22px; font-weight: 700; color: #0f172a; margin: 0 0 12px; scroll-margin-top: 24px; } .api-docs__summary { width: 100%; margin: 0 0 16px !important; color: #475569 !important; line-height: 1.7; } .api-docs__table .ant-table-cell { word-break: break-word !important; white-space: normal !important; } .api-docs__table .ant-table-thead > tr > th { background: #f8fafc !important; color: #475569 !important; font-weight: 700 !important; border-bottom: 1px solid #e2e8f0 !important; } /* 方法与路径行样式(浅色风格) */ .api-docs__endpoint-line { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; margin: 12px 0; } .api-docs__method-badge { padding: 3px 8px; border-radius: 4px; font-weight: 800; font-size: 12px; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } .api-docs__method-badge--get { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; } .api-docs__method-badge--post { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; } .api-docs__path-text { color: #0f172a; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 13.5px; font-weight: 600; } /* 浅色精致 JSON 代码块 */ .doc-code-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); margin: 12px 0; } .doc-code-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; } .doc-code-title { font-size: 12px; font-weight: 700; color: #475569; letter-spacing: 0.5px; text-transform: uppercase; } .doc-code-copy { border: 1px solid #cbd5e1; background: #ffffff; color: #334155; font-size: 11.5px; padding: 3px 10px; border-radius: 4px; cursor: pointer; font-weight: 500; transition: all 0.15s ease; } .doc-code-copy:hover { background: #2563eb; border-color: #2563eb; color: #ffffff; } .api-docs__code { margin: 0; padding: 14px 18px; background: #f8fafc !important; color: #0f172a; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 13px; line-height: 1.65; overflow-x: auto; white-space: pre; } /* 浅色 JSON 语法高亮专配颜色 */ .json-key { color: #0284c7 !important; font-weight: 700; } .json-string { color: #059669 !important; } .json-number { color: #d97706 !important; } .json-boolean { color: #7c3aed !important; font-weight: 600; } .json-null { color: #64748b !important; } .api-docs__pre { margin: 0; padding: 10px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 12px; line-height: 1.6; color: #0f172a; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } .api-docs__card { margin-top: 16px; border-color: #e2e8f0 !important; border-radius: 8px !important; box-shadow: none !important; } .api-docs__card .ant-card-head { min-height: 42px; border-bottom-color: #e2e8f0; background: #f8fafc; } .api-docs__card .ant-card-head-title { font-size: 14px; font-weight: 700; color: #0f172a; } .api-docs__pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid #e2e8f0; } .api-docs__pager-btn { min-height: 64px; padding: 12px 18px; border: 1px solid #e2e8f0; border-radius: 8px; background: #ffffff; color: #475569; text-align: left; cursor: pointer; transition: all 0.2s ease; } .api-docs__pager-btn:hover:not(:disabled) { border-color: #93c5fd; background: #eff6ff; color: #2563eb; } .api-docs__field { color: #2563eb; font-weight: 700; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 13px; } .api-docs__required { display: inline-flex; align-items: center; justify-content: center; padding: 2px 6px; color: #dc2626; background: #fef2f2; border: 1px solid #fecaca; border-radius: 4px; font-size: 12px; font-weight: 700; }