/* * Dalaran IoT Cloud 管理后台样式。 * * 设计稿（claude.ai/design）把样式全写成了行内 style，这里原样搬成类： * 颜色变量、圆角、行高、字号一律照抄，改动只在于结构化。 * * 主题：data-theme="dark" 挂在 上，由 core/layout.js 写入 localStorage。 * 密度：--rowh 控制表格行高，紧凑 32 / 标准 40 / 宽松 48。 */ :root { --bg: #f4f5f7; --panel: #ffffff; --panel-2: #f8f9fa; --panel-3: #f1f3f5; --border: #e4e7eb; --border-strong: #d3d8de; --text: #191d22; --text-2: #5d656e; --text-3: #8d959e; --accent: #2a5fd0; --accent-bg: rgba(42, 95, 208, .10); --accent-soft: #eaf0fc; --ok: #0f7a3d; --ok-bg: rgba(15, 122, 61, .11); --err: #c62828; --err-bg: rgba(198, 40, 40, .10); --warn: #a35c00; --warn-bg: rgba(196, 120, 0, .13); --info: #1f5fbf; --info-bg: rgba(31, 95, 191, .10); --mute: #6b737c; --mute-bg: rgba(107, 115, 124, .11); --violet: #6b39b6; --violet-bg: rgba(107, 57, 182, .11); --grid: #e9ecef; --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .05); --rowh: 40px; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } :root[data-theme="dark"] { --bg: #101317; --panel: #181c21; --panel-2: #1e232a; --panel-3: #232931; --border: #2a3038; --border-strong: #39414b; --text: #e6e9ee; --text-2: #9aa3ad; --text-3: #6e7781; --accent: #5b8cf5; --accent-bg: rgba(91, 140, 245, .16); --accent-soft: #1c2536; --ok: #4ec97e; --ok-bg: rgba(78, 201, 126, .14); --err: #f6685e; --err-bg: rgba(246, 104, 94, .14); --warn: #e5a13a; --warn-bg: rgba(229, 161, 58, .15); --info: #6fa8ff; --info-bg: rgba(111, 168, 255, .14); --mute: #8b949e; --mute-bg: rgba(139, 148, 158, .14); --violet: #b18bf0; --violet-bg: rgba(177, 139, 240, .15); --grid: #262c34; --shadow: 0 1px 2px rgba(0, 0, 0, .4); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--bg); color: var(--text); font-family: 'Noto Sans SC', -apple-system, 'PingFang SC', 'Hiragino Sans', 'Microsoft YaHei', system-ui, sans-serif; font-size: 13px; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } input, select, button, textarea { font-family: inherit; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-track { background: transparent; } .mono { font-family: var(--mono); } .muted { color: var(--text-2); } .dim { color: var(--text-3); } .nowrap { white-space: nowrap; } .grow { flex: 1; min-width: 0; } .right { text-align: right; } .hidden { display: none !important; } /* ==================================================== 整体骨架 */ .app { display: flex; height: 100vh; overflow: hidden; } .sidebar { width: 224px; flex: none; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; } .sidebar-brand { height: 56px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--border); } .brand-logo { width: 26px; height: 26px; flex: none; border-radius: 7px; background: var(--accent); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: -.5px; } .brand-name { font-size: 13px; font-weight: 600; letter-spacing: .2px; } .brand-sub { font-size: 10px; color: var(--text-3); font-family: var(--mono); } .sidebar-nav { flex: 1; overflow-y: auto; padding: 10px 8px 20px; } .nav-group { margin-bottom: 14px; } .nav-group-title { padding: 6px 10px 5px; font-size: 10.5px; font-weight: 500; letter-spacing: 1.4px; color: var(--text-3); text-transform: uppercase; } .nav-item { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 10px; border-radius: 6px; cursor: pointer; color: var(--text-2); margin-bottom: 1px; font-size: 12.5px; text-decoration: none; } .nav-item:hover { background: var(--panel-3); text-decoration: none; } .nav-item.on { background: var(--accent-bg); color: var(--accent); font-weight: 500; } .nav-dot { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--border-strong); } .nav-item.on .nav-dot { background: var(--accent); } .sidebar-user { flex: none; padding: 10px 12px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 9px; } .avatar-circle { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--violet-bg); color: var(--violet); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; } .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { height: 56px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 20px; background: var(--panel); border-bottom: 1px solid var(--border); } .crumbs { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1; } .crumb { font-size: 12.5px; color: var(--text-2); white-space: nowrap; } .crumb:last-child { font-size: 14px; font-weight: 600; color: var(--text); } .crumb-sep { color: var(--text-3); font-size: 11px; } .topbar-tools { display: flex; align-items: center; gap: 8px; } .topbar-divider { width: 1px; height: 22px; background: var(--border); } .content { flex: 1; overflow: auto; padding: 20px 22px 40px; } .page { display: flex; flex-direction: column; gap: 14px; max-width: 1700px; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .page-title { font-size: 18px; font-weight: 600; letter-spacing: .2px; } .page-desc { margin-top: 5px; font-size: 12px; color: var(--text-2); } .page-actions { display: flex; gap: 8px; flex: none; } /* ==================================================== 基础控件 */ .btn { height: 32px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--panel); color: var(--text); font-size: 13px; cursor: pointer; white-space: nowrap; } .btn:hover { border-color: var(--accent); color: var(--accent); } .btn-primary { border-color: var(--accent); background: var(--accent); color: #fff; } .btn-primary:hover { color: #fff; opacity: .9; } .btn-danger { border-color: var(--err); color: var(--err); } .btn-danger:hover { background: var(--err-bg); color: var(--err); } .btn-sm { height: 28px; padding: 0 10px; font-size: 12px; } .btn:disabled { opacity: .5; cursor: not-allowed; } .input, .select, .textarea { height: 32px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--panel); color: var(--text); font-size: 13px; } .select { padding: 0 8px; } .textarea { height: auto; padding: 8px 10px; line-height: 1.6; resize: vertical; } .input[readonly], .input:disabled { background: var(--panel-3); color: var(--text-3); cursor: not-allowed; } .input.mono, .textarea.mono { font-family: var(--mono); } .link { color: var(--accent); cursor: pointer; } .link:hover { text-decoration: underline; } .link-danger { color: var(--err); cursor: pointer; } .link-danger:hover { text-decoration: underline; } .tag { display: inline-block; height: 22px; line-height: 22px; padding: 0 8px; border-radius: 4px; font-size: 11.5px; white-space: nowrap; background: var(--mute-bg); color: var(--mute); } .tag-ok { background: var(--ok-bg); color: var(--ok); } .tag-err { background: var(--err-bg); color: var(--err); } .tag-warn { background: var(--warn-bg); color: var(--warn); } .tag-info { background: var(--info-bg); color: var(--info); } .tag-accent { background: var(--accent-bg); color: var(--accent); } .tag-violet { background: var(--violet-bg); color: var(--violet); } .tag-mute { background: var(--mute-bg); color: var(--mute); } .dot-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); flex: none; } .dot-ok { background: var(--ok); } .dot-mute { background: var(--mute); } .dot-hollow { background: transparent; border: 1.5px solid var(--border-strong); } .switch { width: 34px; height: 19px; border-radius: 10px; background: var(--border-strong); position: relative; cursor: pointer; flex: none; transition: background .15s; } .switch.on { background: var(--accent); } .switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .15s; } .switch.on::after { transform: translateX(15px); } .checkbox { width: 15px; height: 15px; border-radius: 3px; flex: none; border: 1px solid var(--border-strong); background: var(--panel); display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; cursor: pointer; line-height: 1; } .checkbox.on { background: var(--accent); border-color: var(--accent); } .checkbox.half { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); } /* ==================================================== 卡片与面板 */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: 9px; box-shadow: var(--shadow); } .card-pad { padding: 15px 16px; } .card-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--border); } .card-title { font-size: 13.5px; font-weight: 600; } .card-hint { margin-left: 8px; font-size: 11.5px; font-weight: 400; color: var(--text-3); } .stat-label { font-size: 12px; color: var(--text-2); margin-bottom: 9px; } .stat-value { font-size: 28px; font-weight: 600; letter-spacing: -.5px; font-family: var(--mono); } .stat-foot { margin-top: 10px; font-size: 11.5px; color: var(--text-2); } .grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)); gap: 14px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .grid-1-2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; } /* 图表容器：canvas 没有 CSS 尺寸时会退回 300x150 的固有尺寸， setup() 写 canvas.width 又反过来撑大元素，每次重画都翻倍。这里把显示尺寸钉死。 */ .chart-box { height: 224px; padding: 12px 14px 6px; } .chart-box > canvas { display: block; width: 100%; height: 100%; } .section-title { font-size: 12.5px; font-weight: 600; color: var(--accent); margin-bottom: 12px; letter-spacing: .3px; } /* ==================================================== 表格 */ .table-card { overflow: hidden; } .filters { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; padding: 13px 14px; border-bottom: 1px solid var(--border); background: var(--panel-2); } .filters .input { width: 230px; } /* 选项文案长短不一，不加约束时一个下拉能把整行撑开 */ .filters .select { max-width: 210px; } .table-scroll { overflow: auto; } table.grid { width: 100%; border-collapse: collapse; } table.grid th { text-align: left; padding: 0 12px; height: 38px; font-weight: 500; font-size: 12px; color: var(--text-2); background: var(--panel-2); border-bottom: 1px solid var(--border); white-space: nowrap; } table.grid td { padding: 0 12px; height: var(--rowh); border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; } table.grid tbody tr:hover { background: var(--panel-2); } table.grid tbody tr.sub { background: var(--panel-2); } table.grid tbody tr.sub:hover { background: var(--panel-3); } table.grid th.ops, table.grid td.ops { text-align: right; padding: 0 14px; position: sticky; right: 0; background: var(--panel); } table.grid th.ops { background: var(--panel-2); } table.grid tbody tr:hover td.ops { background: var(--panel-2); } .ops-inline { display: inline-flex; gap: 11px; font-size: 12.5px; } .cell-strong { font-weight: 500; } .cell-mono { font-family: var(--mono); font-size: 12px; } .caret { display: inline-block; width: 12px; color: var(--text-3); cursor: pointer; user-select: none; } .row-expand td { padding: 0; background: var(--panel-2); } .expand-body { padding: 12px 16px 14px; border-bottom: 1px solid var(--border); } .table-foot { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); } .pager { display: flex; align-items: center; gap: 6px; } .pager-btn { min-width: 28px; height: 28px; padding: 0 6px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 5px; color: var(--text-3); cursor: pointer; background: var(--panel); font-size: 12px; } .pager-btn:hover { border-color: var(--accent); color: var(--accent); } .pager-btn.on { border-color: var(--accent); background: var(--accent); color: #fff; } .pager-btn.off { opacity: .45; cursor: not-allowed; } .empty { padding: 46px 16px; text-align: center; color: var(--text-3); font-size: 12.5px; } .loading { padding: 46px 16px; text-align: center; color: var(--text-3); font-size: 12.5px; } /* ==================================================== 页签 */ .tabs { display: flex; gap: 20px; padding: 0 16px; border-bottom: 1px solid var(--border); } .tab { padding: 11px 0 9px; font-size: 13px; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 6px; } .tab.on { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); } .tab-badge { font-size: 10.5px; padding: 1px 5px; border-radius: 3px; background: var(--panel-3); color: var(--text-3); font-family: var(--mono); } .tab.on .tab-badge { background: var(--accent-bg); color: var(--accent); } /* ==================================================== 描述列表 */ .desc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 24px; padding: 4px 16px 14px; } .desc-row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; } .desc-key { width: 128px; flex: none; color: var(--text-2); } .desc-val { flex: 1; min-width: 0; word-break: break-all; } /* ==================================================== 抽屉与弹窗 */ .mask { position: fixed; inset: 0; background: rgba(10, 14, 20, .42); z-index: 50; display: flex; justify-content: flex-end; } .mask-fill { flex: 1; } .drawer { width: 620px; max-width: 94vw; background: var(--bg); border-left: 1px solid var(--border); display: flex; flex-direction: column; box-shadow: -12px 0 40px rgba(0, 0, 0, .18); } .drawer-head { height: 54px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; background: var(--panel); border-bottom: 1px solid var(--border); } .drawer-title { font-size: 14.5px; font-weight: 600; } .drawer-close { font-size: 18px; color: var(--text-3); cursor: pointer; line-height: 1; } .drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px 24px; display: flex; flex-direction: column; gap: 16px; } .drawer-foot { flex: none; display: flex; justify-content: flex-end; gap: 9px; padding: 12px 18px; background: var(--panel); border-top: 1px solid var(--border); } .modal-center { justify-content: center; align-items: center; } .modal { width: 560px; max-width: 94vw; max-height: 86vh; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; box-shadow: 0 18px 60px rgba(0, 0, 0, .28); } /* 产品表单（core/product-form.js）的外层：抽屉里和详情页里都是一摞区块 */ .form-stack { display: flex; flex-direction: column; gap: 16px; } .form-block { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; } .form-col { display: flex; flex-direction: column; gap: 13px; } .field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-2); } .field-span2 { grid-column: span 2; } .field .req { color: var(--err); } .field-hint { font-size: 11px; color: var(--text-3); line-height: 1.55; } .field-row { display: flex; gap: 8px; } .notice { display: flex; gap: 6px; padding: 8px 10px; border-radius: 6px; font-size: 11px; line-height: 1.55; background: var(--warn-bg); color: var(--warn); } .notice-info { background: var(--info-bg); color: var(--info); } /* ==================================================== 代码块 */ .code { font-family: var(--mono); font-size: 11.5px; line-height: 1.65; background: var(--panel-3); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; white-space: pre-wrap; word-break: break-all; color: var(--text-2); max-height: 320px; overflow: auto; } /* ==================================================== diff 对比 */ .diff-table { width: 100%; border-collapse: collapse; font-size: 12px; } .diff-table th { text-align: left; padding: 6px 10px; font-weight: 500; color: var(--text-3); border-bottom: 1px solid var(--border); } .diff-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); } .diff-before { color: var(--err); background: var(--err-bg); border-radius: 3px; padding: 1px 5px; } .diff-after { color: var(--ok); background: var(--ok-bg); border-radius: 3px; padding: 1px 5px; } /* ==================================================== 场景流程图 */ .flow { display: flex; flex-direction: column; gap: 10px; } .flow-stage { border: 1px solid var(--border); border-radius: 9px; background: var(--panel); overflow: hidden; } .flow-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--panel-2); border-bottom: 1px solid var(--border); } .flow-badge { font-family: var(--mono); font-size: 11px; padding: 2px 7px; border-radius: 4px; background: var(--accent-bg); color: var(--accent); } .flow-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .flow-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel-2); font-size: 12.5px; } .flow-index { width: 20px; height: 20px; flex: none; border-radius: 5px; background: var(--panel-3); color: var(--text-3); display: flex; align-items: center; justify-content: center; font-size: 11px; font-family: var(--mono); } .flow-arrow { text-align: center; color: var(--text-3); font-size: 14px; line-height: 1; } /* ==================================================== 物模型编辑器 */ .tm-table { width: 100%; border-collapse: collapse; min-width: 1180px; } .tm-table th { text-align: left; padding: 0 10px; height: 36px; font-weight: 500; font-size: 12px; color: var(--text-2); background: var(--panel-2); border-bottom: 1px solid var(--border); white-space: nowrap; } .tm-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; } .tm-input { width: 100%; height: 28px; padding: 0 8px; border-radius: 5px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 12.5px; } .tm-input.mono { font-family: var(--mono); } .tm-select { height: 28px; padding: 0 6px; border-radius: 5px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 12.5px; width: 100%; } .tm-range { display: flex; align-items: center; gap: 5px; } .tm-range .tm-input { width: 62px; } .tm-enum { display: flex; flex-direction: column; gap: 5px; } .tm-enum-row { display: flex; align-items: center; gap: 5px; } .tm-enum-row .tm-input { width: 74px; } .tm-enum-del { color: var(--text-3); cursor: pointer; font-size: 13px; line-height: 1; } .tm-enum-del:hover { color: var(--err); } .tm-add { font-size: 11.5px; color: var(--accent); cursor: pointer; } /* ==================================================== 属性控制卡片 */ .prop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; padding: 14px 16px; } .prop-card { border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); padding: 12px 13px; display: flex; flex-direction: column; gap: 10px; } .prop-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .prop-name { font-size: 13px; font-weight: 500; } .prop-code { font-family: var(--mono); font-size: 11px; color: var(--text-3); } .prop-value { font-family: var(--mono); font-size: 20px; font-weight: 600; } .prop-foot { font-size: 11px; color: var(--text-3); font-family: var(--mono); } .slider { flex: 1; accent-color: var(--accent); } /* ==================================================== 登录页 */ .login-wrap { height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); } .login-card { width: 380px; max-width: 92vw; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 16px; } .login-brand { display: flex; align-items: center; gap: 11px; } .login-title { font-size: 17px; font-weight: 600; } .login-sub { font-size: 11.5px; color: var(--text-3); font-family: var(--mono); } .login-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-2); } .login-field .input { height: 38px; font-size: 13.5px; } .login-btn { height: 38px; font-size: 14px; } .login-error { font-size: 12px; color: var(--err); background: var(--err-bg); border-radius: 6px; padding: 8px 10px; line-height: 1.5; } /* ==================================================== 全局提示 */ .toast-wrap { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; } .toast { padding: 9px 16px; border-radius: 7px; font-size: 12.5px; background: var(--panel); border: 1px solid var(--border); box-shadow: 0 6px 24px rgba(0, 0, 0, .16); color: var(--text); animation: toast-in .16s ease-out; } .toast.ok { border-color: var(--ok); color: var(--ok); } .toast.err { border-color: var(--err); color: var(--err); } @keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } } @media (max-width: 1100px) { .grid-2, .grid-1-2 { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .field-span2 { grid-column: span 1; } }