/* ============================================================ AI Scheduler 设计系统 — 深空科技风 仅依赖原生 CSS,无构建步骤。所有页面共用本文件。 ============================================================ */ :root { /* 背景层级 */ --bg-0: #05080f; --bg-1: #0a0f1e; --bg-2: #0e1526; --bg-card: rgba(17, 25, 46, 0.66); --bg-card-solid: #111a2e; --bg-input: rgba(9, 14, 28, 0.72); --bg-hover: rgba(90, 120, 255, 0.08); /* 边框 */ --border: rgba(105, 135, 255, 0.14); --border-strong: rgba(105, 135, 255, 0.38); /* 文字 */ --text-0: #eef2ff; --text-1: #a9b4d8; --text-2: #67719a; /* 品牌色 */ --primary: #4f7cff; --primary-2: #7c5cff; --cyan: #2de0ff; --grad: linear-gradient(135deg, #4f7cff 0%, #7c5cff 55%, #2de0ff 120%); --grad-soft: linear-gradient(135deg, rgba(79, 124, 255, 0.16), rgba(124, 92, 255, 0.14)); /* 状态色 */ --success: #2fd08c; --warn: #ffb74d; --danger: #ff5d7a; --info: #47b8ff; /* 尺寸与效果 */ --radius: 14px; --radius-sm: 9px; --radius-xs: 6px; --shadow: 0 18px 48px rgba(2, 6, 20, 0.6); --glow: 0 0 0 1px rgba(92, 132, 255, 0.22), 0 10px 36px rgba(63, 94, 255, 0.22); --font: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif; --mono: "Cascadia Code", "JetBrains Mono", Consolas, "Courier New", monospace; --sidebar-w: 224px; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font); font-size: 14px; line-height: 1.55; color: var(--text-0); background: radial-gradient(1000px 620px at 12% -8%, rgba(79, 124, 255, 0.14), transparent 60%), radial-gradient(900px 560px at 105% 8%, rgba(124, 92, 255, 0.12), transparent 60%), radial-gradient(760px 520px at 55% 118%, rgba(45, 224, 255, 0.07), transparent 62%), var(--bg-0); background-attachment: fixed; -webkit-font-smoothing: antialiased; } body::before { content: ""; position: fixed; inset: 0; background-image: linear-gradient(rgba(120, 150, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 150, 255, 0.035) 1px, transparent 1px); background-size: 42px 42px; pointer-events: none; z-index: 0; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(110, 140, 255, 0.22); border-radius: 9px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(110, 140, 255, 0.42); } a { color: var(--cyan); text-decoration: none; } a:hover { opacity: 0.85; } /* ============ 布局骨架 ============ */ .layout { display: flex; min-height: 100vh; position: relative; z-index: 1; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: linear-gradient(180deg, rgba(14, 21, 40, 0.92), rgba(9, 14, 28, 0.92)); border-right: 1px solid var(--border); backdrop-filter: blur(18px); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .brand { display: flex; align-items: center; gap: 11px; padding: 20px 18px 16px; border-bottom: 1px solid var(--border); } .brand .logo { width: 38px; height: 38px; border-radius: 11px; background: var(--grad); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; color: #fff; box-shadow: var(--glow); letter-spacing: -0.5px; } .brand .brand-name { font-size: 15px; font-weight: 700; letter-spacing: 0.3px; } .brand .brand-sub { font-size: 11px; color: var(--text-2); letter-spacing: 1.5px; text-transform: uppercase; } .nav { flex: 1; padding: 14px 10px; overflow-y: auto; } .nav-group { margin-bottom: 16px; } .nav-group-title { font-size: 11px; color: var(--text-2); padding: 0 10px 7px; letter-spacing: 1.4px; text-transform: uppercase; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 3px; border-radius: var(--radius-sm); color: var(--text-1); cursor: pointer; transition: all 0.16s ease; border: 1px solid transparent; font-size: 13.5px; user-select: none; } .nav-item:hover { background: var(--bg-hover); color: var(--text-0); } .nav-item.active { background: var(--grad-soft); border-color: var(--border-strong); color: var(--text-0); box-shadow: inset 0 0 24px rgba(79, 124, 255, 0.12); } .nav-item .ico { width: 17px; text-align: center; opacity: 0.9; font-size: 14px; } .nav-item.disabled { opacity: 0.38; pointer-events: none; } .sidebar-foot { padding: 12px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-2); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: 14px; padding: 12px 24px; border-bottom: 1px solid var(--border); background: rgba(10, 15, 30, 0.6); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 20; } .topbar .page-title { font-size: 16px; font-weight: 700; } .topbar .page-sub { font-size: 12px; color: var(--text-2); margin-top: 1px; } .topbar .spacer { flex: 1; } .content { padding: 22px 24px 40px; flex: 1; max-width: 1520px; width: 100%; } /* ============ 卡片 ============ */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(14px); box-shadow: var(--shadow); padding: 18px 20px; position: relative; overflow: hidden; } .card + .card { margin-top: 16px; } .card.glow::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); padding: 1px; pointer-events: none; background: linear-gradient(135deg, rgba(79,124,255,.4), transparent 40%, transparent 60%, rgba(45,224,255,.3)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .card-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; margin-bottom: 14px; } .card-title .bar { width: 4px; height: 16px; border-radius: 2px; background: var(--grad); } .card-title .spacer { flex: 1; } .card-sub { font-size: 12px; color: var(--text-2); margin-top: -10px; margin-bottom: 14px; } .grid { display: grid; gap: 14px; } .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid.cols-auto { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } @media (max-width: 1100px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } } .row { display: flex; align-items: center; gap: 10px; } .row.wrap { flex-wrap: wrap; } .row .spacer { flex: 1; } /* ============ 按钮 ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: rgba(79, 124, 255, 0.12); color: var(--text-0); font-size: 13px; font-family: var(--font); cursor: pointer; transition: all 0.16s ease; white-space: nowrap; user-select: none; } .btn:hover { background: rgba(79, 124, 255, 0.22); border-color: rgba(105, 135, 255, 0.6); transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .btn.primary { background: var(--grad); border: none; color: #fff; font-weight: 600; box-shadow: 0 6px 20px rgba(79, 124, 255, 0.35); } .btn.primary:hover { box-shadow: 0 10px 28px rgba(79, 124, 255, 0.5); filter: brightness(1.06); } .btn.ghost { background: transparent; border-color: var(--border); color: var(--text-1); } .btn.ghost:hover { color: var(--text-0); border-color: var(--border-strong); background: var(--bg-hover); } .btn.danger { background: rgba(255, 93, 122, 0.12); border-color: rgba(255, 93, 122, 0.45); color: #ff8ba0; } .btn.danger:hover { background: rgba(255, 93, 122, 0.22); } .btn.success { background: rgba(47, 208, 140, 0.13); border-color: rgba(47, 208, 140, 0.45); color: #6fe6b4; } .btn.success:hover { background: rgba(47, 208, 140, 0.22); } .btn.sm { padding: 5px 11px; font-size: 12px; border-radius: var(--radius-xs); } /* ============ Switch 滑动开关 ============ */ .switch { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; vertical-align: middle; } .switch input { opacity: 0; width: 0; height: 0; position: absolute; } .switch .slider { position: absolute; inset: 0; background: rgba(120, 140, 180, 0.25); border-radius: 22px; transition: background 0.2s ease; } .switch .slider::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; bottom: 3px; background: #b0b8cc; border-radius: 50%; transition: transform 0.2s ease, background 0.2s ease; } .switch input:checked + .slider { background: rgba(47, 208, 140, 0.45); } .switch input:checked + .slider::before { transform: translateX(18px); background: #6fe6b4; } .switch input:disabled + .slider { opacity: 0.45; cursor: not-allowed; } .btn.lg { padding: 11px 26px; font-size: 14.5px; } .btn.block { width: 100%; } /* ============ 表单 ============ */ .field { margin-bottom: 13px; } .field .label { display: block; font-size: 12.5px; color: var(--text-1); margin-bottom: 6px; letter-spacing: 0.3px; } .field .label .req { color: var(--danger); margin-left: 3px; } .field .hint { font-size: 11.5px; color: var(--text-2); margin-top: 5px; } .input, .select, .textarea { width: 100%; padding: 9px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-0); font-size: 13.5px; font-family: var(--font); transition: border-color 0.16s ease, box-shadow 0.16s ease; outline: none; } .input:focus, .select:focus, .textarea:focus { border-color: var(--border-strong); box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.14); } .input::placeholder, .textarea::placeholder { color: var(--text-2); } .textarea { resize: vertical; min-height: 76px; line-height: 1.6; } .textarea.json { font-family: var(--mono); font-size: 12.5px; min-height: 130px; color: #9fe8ff; background: rgba(5, 10, 22, 0.9); } .select option { background: var(--bg-card-solid); color: var(--text-0); } .input.sm, .select.sm { padding: 6px 10px; font-size: 12.5px; } .checkbox-row { display: flex; align-items: center; gap: 8px; color: var(--text-1); font-size: 13px; cursor: pointer; } .checkbox-row input { accent-color: var(--primary); width: 15px; height: 15px; cursor: pointer; } .search-box { position: relative; flex: 1; max-width: 320px; } .search-box .input { padding-left: 32px; } .search-box::before { content: "⌕"; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-2); font-size: 15px; pointer-events: none; } /* ============ 表格 ============ */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); } table.table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; } table.table th { text-align: left; padding: 11px 14px; background: rgba(13, 20, 38, 0.85); color: var(--text-2); font-weight: 600; font-size: 12px; letter-spacing: 0.6px; border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; } table.table td { padding: 11px 14px; border-bottom: 1px solid rgba(105, 135, 255, 0.07); color: var(--text-1); vertical-align: middle; } table.table tr:last-child td { border-bottom: none; } table.table tbody tr { transition: background 0.14s ease; } table.table tbody tr:hover { background: var(--bg-hover); } table.table td .name { color: var(--text-0); font-weight: 600; } table.table td .name.pj-enter-link { cursor: pointer; transition: color 0.14s ease; } table.table td .name.pj-enter-link:hover { color: var(--cyan); text-decoration: underline; } table.table td.ops { white-space: nowrap; } table.table td.ops .btn { margin-right: 6px; } table.table td.ops .btn:last-child { margin-right: 0; } .cell-clip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============ 徽章 / 标签 ============ */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; border: 1px solid transparent; white-space: nowrap; } .badge.blue { background: rgba(79, 124, 255, 0.14); border-color: rgba(79, 124, 255, 0.4); color: #9db8ff; } .badge.green { background: rgba(47, 208, 140, 0.12); border-color: rgba(47, 208, 140, 0.4); color: #6fe6b4; } .badge.red { background: rgba(255, 93, 122, 0.12); border-color: rgba(255, 93, 122, 0.4); color: #ff8ba0; } .badge.yellow { background: rgba(255, 183, 77, 0.12); border-color: rgba(255, 183, 77, 0.4); color: #ffcf87; } .badge.gray { background: rgba(120, 140, 180, 0.12); border-color: rgba(120, 140, 180, 0.35); color: var(--text-1); } .badge.purple { background: rgba(124, 92, 255, 0.14); border-color: rgba(124, 92, 255, 0.42); color: #b8a3ff; } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge .dot.live { animation: pulse 1.6s ease infinite; } .tag { display: inline-block; padding: 2px 9px; margin: 2px 4px 2px 0; border-radius: var(--radius-xs); background: rgba(79, 124, 255, 0.1); border: 1px solid var(--border); color: var(--text-1); font-size: 12px; } .pill { padding: 3px 12px; border-radius: 20px; font-size: 12px; border: 1px solid var(--border); color: var(--text-1); background: rgba(9, 14, 28, 0.5); } /* ============ 标签页 ============ */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; } .tab { padding: 9px 16px; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; font-size: 13.5px; white-space: nowrap; transition: all 0.16s ease; user-select: none; } .tab:hover { color: var(--text-0); } .tab.active { color: var(--text-0); border-bottom-color: var(--primary); font-weight: 600; } /* 子标签页(维度切换) */ .sub-tabs { margin-top: 4px; margin-bottom: 14px; gap: 2px; } .sub-tabs .tab { padding: 6px 13px; font-size: 12.5px; border-bottom-width: 1.5px; } /* Flatpickr 日历输入框样式 */ .dp-date, .dp-datetime { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; padding-right: 32px !important; } .seg { display: inline-flex; background: rgba(9, 14, 28, 0.62); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; gap: 3px; } .seg .seg-item { padding: 5px 14px; border-radius: var(--radius-xs); color: var(--text-2); cursor: pointer; font-size: 12.5px; transition: all 0.15s ease; user-select: none; } .seg .seg-item.active { background: var(--grad-soft); color: var(--text-0); border: 1px solid var(--border-strong); } /* ============ 空状态 / 加载 ============ */ .empty { text-align: center; padding: 46px 20px; color: var(--text-2); font-size: 13px; } .empty .big { font-size: 34px; margin-bottom: 10px; opacity: 0.6; } .spin { width: 18px; height: 18px; border: 2px solid rgba(120, 150, 255, 0.25); border-top-color: var(--cyan); border-radius: 50%; animation: rot 0.8s linear infinite; display: inline-block; vertical-align: middle; } .spin.lg { width: 30px; height: 30px; border-width: 3px; } .loading-mask { position: fixed; inset: 0; z-index: 400; background: rgba(4, 7, 15, 0.55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: var(--text-1); font-size: 13px; } @keyframes rot { to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .anim-up { animation: fadeUp 0.28s ease both; } /* ============ 弹窗 ============ */ .modal-mask { position: fixed; inset: 0; z-index: 300; background: rgba(3, 6, 14, 0.68); backdrop-filter: blur(6px); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 18px 30px; overflow-y: auto; animation: fadeIn 0.18s ease; } .modal { width: 560px; max-width: 100%; background: linear-gradient(180deg, rgba(20, 29, 52, 0.97), rgba(13, 19, 36, 0.97)); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow), 0 0 60px rgba(79, 124, 255, 0.14); animation: fadeUp 0.22s ease; overflow: hidden; } .modal.wide { width: 820px; } .modal.xwide { width: 1050px; } .modal-head { display: flex; align-items: center; gap: 10px; padding: 15px 20px; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 700; } .modal-head .spacer { flex: 1; } .modal-head .x { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-2); font-size: 16px; transition: all 0.15s ease; } .modal-head .x:hover { background: rgba(255, 93, 122, 0.14); color: var(--danger); } .modal-body { padding: 18px 20px; max-height: 66vh; overflow-y: auto; } .modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 13px 20px; border-top: 1px solid var(--border); background: rgba(8, 12, 24, 0.5); } /* ============ 提示 ============ */ .toast-wrap { position: fixed; top: 20px; right: 20px; z-index: 500; display: flex; flex-direction: column; gap: 9px; pointer-events: none; } .toast { min-width: 220px; max-width: 380px; padding: 11px 16px; border-radius: var(--radius-sm); background: rgba(17, 26, 48, 0.96); border: 1px solid var(--border-strong); box-shadow: var(--shadow); font-size: 13px; color: var(--text-0); display: flex; align-items: flex-start; gap: 9px; animation: fadeUp 0.22s ease; pointer-events: auto; } .toast.ok { border-color: rgba(47, 208, 140, 0.5); } .toast.ok .ico { color: var(--success); } .toast.err { border-color: rgba(255, 93, 122, 0.55); } .toast.err .ico { color: var(--danger); } .toast.info { border-color: rgba(71, 184, 255, 0.5); } .toast.info .ico { color: var(--info); } .toast .ico { flex-shrink: 0; font-size: 14px; margin-top: 1px; } /* ============ 文件上传区 ============ */ .drop-zone { border: 1.5px dashed var(--border-strong); border-radius: var(--radius); padding: 30px 20px; text-align: center; cursor: pointer; transition: all 0.18s ease; background: rgba(79, 124, 255, 0.04); } .drop-zone:hover, .drop-zone.drag { background: rgba(79, 124, 255, 0.1); border-color: var(--cyan); } .drop-zone .dz-ico { font-size: 30px; margin-bottom: 8px; opacity: 0.85; } .drop-zone .dz-main { font-size: 13.5px; color: var(--text-1); } .drop-zone .dz-sub { font-size: 11.5px; color: var(--text-2); margin-top: 5px; } .file-chip { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: var(--radius-sm); background: rgba(47, 208, 140, 0.08); border: 1px solid rgba(47, 208, 140, 0.3); font-size: 12.5px; color: var(--text-1); } .file-chip .fname { color: var(--text-0); font-weight: 600; } /* ============ 登录页 ============ */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; z-index: 1; } .login-card { width: 400px; max-width: 100%; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 18px; backdrop-filter: blur(20px); box-shadow: var(--shadow), 0 0 80px rgba(79, 124, 255, 0.16); padding: 34px 32px 30px; animation: fadeUp 0.3s ease; } .login-card .lc-logo { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px; background: var(--grad); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: #fff; box-shadow: var(--glow); } .login-card h2 { text-align: center; font-size: 19px; margin-bottom: 4px; } .login-card .lc-sub { text-align: center; font-size: 12px; color: var(--text-2); margin-bottom: 24px; letter-spacing: 0.4px; } /* ============ 统计卡 ============ */ .stat-card { padding: 15px 17px; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border); position: relative; overflow: hidden; } .stat-card .sv { font-size: 23px; font-weight: 800; letter-spacing: -0.5px; } .stat-card .sl { font-size: 12px; color: var(--text-2); margin-top: 3px; } .stat-card .si { position: absolute; right: 14px; top: 12px; font-size: 21px; opacity: 0.4; } .stat-card.blue .sv { color: #9db8ff; } .stat-card.green .sv { color: #6fe6b4; } .stat-card.purple .sv { color: #b8a3ff; } .stat-card.cyan .sv { color: #7feaff; } /* ============ 键值展示 ============ */ .kv { display: grid; grid-template-columns: 96px 1fr; gap: 6px 14px; font-size: 12.8px; } .kv .k { color: var(--text-2); } .kv .v { color: var(--text-0); word-break: break-all; white-space: pre-wrap; } /* ============ 微信工作台 ============ */ .wx-shell { display: grid; grid-template-columns: 300px 1fr; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-card); box-shadow: var(--shadow); height: calc(100vh - 160px); min-height: 520px; } .wx-left { border-right: 1px solid var(--border); display: flex; flex-direction: column; background: rgba(10, 15, 30, 0.72); min-width: 0; min-height: 0; overflow: hidden; } .wx-right { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: rgba(8, 12, 24, 0.42); } .wx-login-card { padding: 13px 14px; border-bottom: 1px solid var(--border); } .wx-user-row { display: flex; align-items: center; gap: 10px; } .wx-avatar { width: 40px; height: 40px; border-radius: 10px; background: var(--grad-soft); border: 1px solid var(--border); object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .wx-qr-box { text-align: center; padding: 10px 0 4px; } .wx-qr-box img { width: 168px; height: 168px; border-radius: 12px; border: 5px solid #fff; display: block; margin: 0 auto; background: #fff; } .wx-qr-box .qrs { font-size: 12.5px; color: var(--text-1); margin-top: 9px; } .wx-search { padding: 10px 12px; border-bottom: 1px solid var(--border); display: flex; gap: 8px; } .wx-contacts { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(105,135,255,0.25) transparent; } .wx-contacts::-webkit-scrollbar { width: 5px; } .wx-contacts::-webkit-scrollbar-track { background: transparent; } .wx-contacts::-webkit-scrollbar-thumb { background: rgba(105,135,255,0.25); border-radius: 3px; } .wx-contacts::-webkit-scrollbar-thumb:hover { background: rgba(105,135,255,0.45); } .contact-item { display: flex; align-items: center; gap: 10px; padding: 9px 13px; cursor: pointer; border-bottom: 1px solid rgba(105, 135, 255, 0.05); transition: background 0.13s ease; position: relative; } .contact-item:hover { background: var(--bg-hover); } .contact-item.active { background: var(--grad-soft); border-right: 2px solid var(--primary); } .contact-item .ci-main { min-width: 0; flex: 1; } .contact-item .ci-name { font-size: 13px; color: var(--text-0); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .contact-item .ci-sub { font-size: 11px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 联系人标签展示 */ .ci-labels { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; } .ci-label { font-size: 9px; padding: 0 5px; border-radius: 3px; line-height: 1.6; background: rgba(105, 135, 255, 0.1); color: var(--primary); border: 1px solid rgba(105, 135, 255, 0.18); white-space: nowrap; } /* 会话列表项样式 */ .conv-item .ci-main { min-width: 0; flex: 1; } .ci-name-row { display: flex; align-items: center; gap: 6px; } .ci-name-row .ci-name { flex: 1; min-width: 0; } .ci-tag { font-size: 9px; padding: 0 4px; border-radius: 3px; background: rgba(45, 224, 255, 0.12); color: var(--cyan); border: 1px solid rgba(45, 224, 255, 0.3); flex-shrink: 0; line-height: 1.5; } .ci-time { font-size: 10px; color: var(--text-2); flex-shrink: 0; } /* 会话聊天日期分割线 */ .conv-date { text-align: center; font-size: 11px; color: var(--text-2); padding: 6px 16px; margin: 4px 0; } .conv-date span { display: inline-block; background: rgba(105, 135, 255, 0.1); padding: 2px 12px; border-radius: 10px; } /* 会话系统消息 */ .conv-sys { text-align: center; font-size: 11px; color: var(--text-2); padding: 4px 16px; font-style: italic; } /* 会话消息气泡微调 */ .conv-msg-other { background: rgba(22, 32, 58, 0.92); border: 1px solid var(--border); } .conv-msg-self { background: linear-gradient(135deg, rgba(79, 124, 255, 0.88), rgba(124, 92, 255, 0.88)); border-color: transparent; color: #fff; } /* 会话头像包装(含未读徽章) */ .conv-avatar-wrap { position: relative; flex-shrink: 0; width: 36px; height: 36px; } .conv-avatar-wrap .wx-avatar { width: 36px !important; height: 36px !important; } .conv-unread { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; border-radius: 8px; background: #ff3b30; color: #fff; font-size: 10px; font-weight: 700; text-align: center; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,0.3); z-index: 2; } /* 标签列表 */ .label-row { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid rgba(105, 135, 255, 0.06); font-size: 13px; font-weight: 600; color: var(--text-0); transition: background 0.13s ease; } .label-row:hover { background: var(--bg-hover); } .label-arrow { font-size: 11px; color: var(--text-2); width: 14px; text-align: center; flex-shrink: 0; } .label-row .spacer { flex: 1; } .label-hosting-btn { font-size: 11px; padding: 2px 10px; border-radius: 10px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-2); cursor: pointer; transition: all 0.16s ease; white-space: nowrap; flex-shrink: 0; } .label-hosting-btn:hover { background: var(--bg-hover); color: var(--text-0); } .label-hosting-btn.hosting { background: linear-gradient(135deg, rgba(45, 224, 255, 0.18), rgba(79, 124, 255, 0.18)); border-color: rgba(45, 224, 255, 0.5); color: var(--cyan); } .label-hosting-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* 已托管标签小标签(青绿色调区分) */ .ci-label-hosting { background: linear-gradient(135deg, rgba(45, 224, 255, 0.15), rgba(47, 208, 140, 0.15)); border-color: rgba(45, 224, 255, 0.4); color: var(--cyan); } /* 编辑标签按钮(好友/会话列表项右下角) */ .ci-edit-label-btn { position: absolute; right: 6px; bottom: 4px; font-size: 10px; padding: 1px 7px; border-radius: 8px; border: 1px solid var(--border); background: rgba(14, 21, 40, 0.7); color: var(--text-2); cursor: pointer; transition: all 0.15s ease; opacity: 0; z-index: 2; } .contact-item:hover .ci-edit-label-btn { opacity: 1; } .ci-edit-label-btn:hover { background: var(--bg-hover); color: var(--text-0); border-color: var(--border-strong); } /* 标签编辑弹窗 */ .wx-label-editor-popup { width: 260px; max-height: 380px; background: rgba(14, 22, 44, 0.97); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(105, 135, 255, 0.12); backdrop-filter: blur(20px); animation: fadeIn 0.15s ease; display: flex; flex-direction: column; overflow: hidden; } .wx-le-head { padding: 10px 14px; font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--border); color: var(--text-0); } .wx-le-body { flex: 1; overflow-y: auto; padding: 6px 0; max-height: 260px; } .wx-le-item { display: flex; align-items: center; gap: 8px; padding: 7px 14px; cursor: pointer; transition: background 0.12s ease; font-size: 12.5px; color: var(--text-1); } .wx-le-item:hover { background: var(--bg-hover); } .wx-le-item.wx-le-checked { color: var(--text-0); background: rgba(79, 124, 255, 0.08); } .wx-le-item input[type="checkbox"] { accent-color: var(--primary); width: 14px; height: 14px; flex-shrink: 0; } .wx-le-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wx-le-hosting-tag { font-size: 9px; padding: 1px 5px; border-radius: 6px; background: rgba(45, 224, 255, 0.15); color: var(--cyan); border: 1px solid rgba(45, 224, 255, 0.3); flex-shrink: 0; } .wx-le-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--border); } .label-friend { padding-left: 36px; } .label-friend .wx-avatar { width: 32px !important; height: 32px !important; } .label-loading { text-align: center; padding: 10px 16px; } /* 群聊消息发送人昵称 */ .msg-sender-name { font-size: 11px; color: var(--text-2); margin-bottom: 2px; font-weight: 600; } .msg-row.self .msg-sender-name { text-align: right; } /* 会话消息中的图片 */ .conv-img { max-width: 200px; max-height: 200px; border-radius: 8px; display: block; cursor: pointer; } /* 会话消息中的媒体占位符 */ .conv-media { display: inline-block; font-size: 12px; color: var(--text-2); font-style: italic; } /* 联系人详情悬浮气泡 */ .wx-detail-popup { width: 280px; background: rgba(16, 24, 48, 0.96); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(105, 135, 255, 0.1); backdrop-filter: blur(20px); animation: fadeIn 0.18s ease; pointer-events: none; } @keyframes fadeIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } } .wx-detail-loading { padding: 18px; text-align: center; color: var(--text-2); font-size: 12px; } .wx-detail-empty { padding: 18px; text-align: center; color: var(--text-2); font-size: 12px; } .wx-detail-card { padding: 14px; } .wx-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .wx-detail-avatar { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--grad-soft); border: 1px solid var(--border); } .wx-detail-avatar-text { display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--text-0); } .wx-detail-info { flex: 1; min-width: 0; } .wx-detail-name { font-size: 14px; font-weight: 700; color: var(--text-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wx-detail-wxid { font-size: 11px; color: var(--text-2); font-family: var(--mono); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wx-detail-sex { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: rgba(105, 135, 255, 0.1); color: var(--text-2); } .wx-detail-sex.male { background: rgba(59, 130, 246, 0.15); color: #60a5fa; } .wx-detail-sex.female { background: rgba(236, 72, 153, 0.15); color: #f472b6; } .wx-detail-body { display: flex; flex-direction: column; gap: 8px; } .wx-detail-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; } .wx-detail-label { color: var(--text-2); flex-shrink: 0; width: 36px; } .wx-detail-value { color: var(--text-0); word-break: break-all; flex: 1; } .wx-detail-signature { color: var(--text-1); font-style: italic; } .wx-chat-head { flex-shrink: 0; display: flex; align-items: center; gap: 11px; padding: 12px 17px; border-bottom: 1px solid var(--border); background: rgba(12, 18, 35, 0.66); backdrop-filter: blur(10px); } .wx-chat-head .wx-title { font-size: 14.5px; font-weight: 700; } .wx-chat-head .wx-sub { font-size: 11.5px; color: var(--text-2); } .wx-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 17px; display: flex; flex-direction: column; gap: 13px; background-image: radial-gradient(rgba(105, 135, 255, 0.05) 1px, transparent 1px); background-size: 26px 26px; } .msg-row { display: flex; gap: 9px; max-width: 78%; } .msg-row.self { align-self: flex-end; flex-direction: row-reverse; } .msg-avatar { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; background: var(--grad-soft); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 13px; object-fit: cover; } .msg-bubble { padding: 9px 13px; border-radius: 12px; background: rgba(22, 32, 58, 0.92); border: 1px solid var(--border); color: var(--text-0); font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; position: relative; } .msg-row.self .msg-bubble { background: linear-gradient(135deg, rgba(79, 124, 255, 0.88), rgba(124, 92, 255, 0.88)); border-color: transparent; color: #fff; } .msg-time { font-size: 10.5px; color: var(--text-2); margin-top: 4px; } .msg-row.self .msg-time { text-align: right; } .msg-bubble.fail { border-color: rgba(255, 93, 122, 0.6); background: rgba(255, 93, 122, 0.12); } .wx-input-area { flex-shrink: 0; border-top: 1px solid var(--border); background: rgba(12, 18, 35, 0.72); padding: 11px 15px 14px; } .wx-tools { display: flex; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; } .wx-textarea { width: 100%; min-height: 74px; max-height: 170px; background: rgba(6, 10, 22, 0.8); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-0); padding: 10px 12px; font-family: var(--font); font-size: 13.5px; resize: none; outline: none; line-height: 1.6; } .wx-textarea:focus { border-color: var(--border-strong); box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.12); } .wx-send-row { display: flex; align-items: center; gap: 10px; margin-top: 9px; } .wx-send-row .spacer { flex: 1; } .wx-hint { font-size: 11.5px; color: var(--text-2); } /* AI 建议气泡 */ .ai-tip { margin: 0 15px 10px; padding: 12px 15px; border-radius: var(--radius-sm); background: linear-gradient(135deg, rgba(45, 224, 255, 0.08), rgba(124, 92, 255, 0.1)); border: 1px solid rgba(45, 224, 255, 0.32); animation: fadeUp 0.25s ease; } .ai-tip .ai-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--cyan); margin-bottom: 7px; font-weight: 700; letter-spacing: 0.5px; } .ai-tip .ai-body { font-size: 13px; color: var(--text-0); white-space: pre-wrap; line-height: 1.65; } .ai-tip .ai-foot { display: flex; gap: 8px; margin-top: 10px; } /* ============ 分析结果 ============ */ .role-card { border-top: 3px solid var(--primary); } .role-card.advicer { border-top-color: #4f7cff; } .role-card.project { border-top-color: #2de0ff; } .role-card.skill { border-top-color: #7c5cff; } .role-card.client { border-top-color: #2fd08c; } .role-card .rc-body { max-height: 380px; overflow-y: auto; } .data-item { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; overflow: hidden; background: rgba(8, 12, 24, 0.5); } .data-item .di-head { display: flex; align-items: center; gap: 9px; padding: 8px 12px; background: rgba(13, 20, 38, 0.8); cursor: pointer; font-size: 12.5px; } .data-item .di-head .di-name { color: var(--text-0); font-weight: 600; font-family: var(--mono); font-size: 12px; } .data-item .di-head .spacer { flex: 1; } .data-item .di-body { padding: 10px 12px; display: none; } .data-item.open .di-body { display: block; } .data-item .di-body .textarea { min-height: 110px; } /* ============ 演练页 ============ */ .drill-grid { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; } @media (max-width: 1000px) { .drill-grid { grid-template-columns: 1fr; } } .drill-chat { display: flex; flex-direction: column; height: calc(100vh - 220px); min-height: 460px; } .drill-chat .wx-msgs { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 12px; } .status-line { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); padding: 6px 2px 0; } /* ============ 入口页 ============ */ .home-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 22px; position: relative; z-index: 1; } .home-hero { text-align: center; margin-bottom: 42px; } .home-hero .hh-logo { width: 74px; height: 74px; margin: 0 auto 20px; border-radius: 20px; background: var(--grad); display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; color: #fff; box-shadow: 0 20px 60px rgba(79, 124, 255, 0.45); } .home-hero h1 { font-size: 30px; letter-spacing: -0.5px; margin-bottom: 10px; } .home-hero h1 span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .home-hero p { color: var(--text-1); font-size: 14px; max-width: 560px; margin: 0 auto; } .entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 760px; width: 100%; } @media (max-width: 700px) { .entry-grid { grid-template-columns: 1fr; } } .entry-card { padding: 26px 24px; border-radius: 18px; background: var(--bg-card); border: 1px solid var(--border); backdrop-filter: blur(16px); transition: all 0.22s ease; cursor: pointer; position: relative; overflow: hidden; display: block; color: var(--text-0); } .entry-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--glow); color: var(--text-0); } .entry-card .ec-ico { width: 46px; height: 46px; border-radius: 13px; background: var(--grad-soft); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 21px; margin-bottom: 15px; } .entry-card h3 { font-size: 17px; margin-bottom: 7px; } .entry-card p { font-size: 12.5px; color: var(--text-2); line-height: 1.65; margin-bottom: 14px; } .entry-card .ec-go { font-size: 12.5px; color: var(--cyan); font-weight: 600; } .home-foot { margin-top: 40px; color: var(--text-2); font-size: 12px; display: flex; gap: 18px; align-items: center; } /* ============ 工具类 ============ */ .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .flex1 { flex: 1; } .mono { font-family: var(--mono); font-size: 12.5px; } .fs-12 { font-size: 12px; } .fs-13 { font-size: 13px; } .c-dim { color: var(--text-2) !important; } .c-main { color: var(--text-0) !important; } .c-cyan { color: var(--cyan) !important; } .c-green { color: var(--success) !important; } .c-red { color: var(--danger) !important; } .c-warn { color: var(--warn) !important; } .nowrap { white-space: nowrap; } .hidden { display: none !important; } .text-center { text-align: center; } .divider { height: 1px; background: var(--border); margin: 14px 0; } .scroll-y { overflow-y: auto; } /* ============ 维度结构化编辑器 ============ */ .dim-editor { margin-bottom: 16px; } .dim-row-wrap { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; } .dim-row { border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(8, 12, 24, 0.5); overflow: hidden; transition: border-color 0.15s ease; } .dim-row:hover { border-color: var(--border-strong); } .dim-row-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(13, 20, 38, 0.7); } .dim-row-idx { font-size: 11px; color: var(--text-2); font-family: var(--mono); min-width: 24px; } .dim-row-head .dr-name { flex: 1; font-weight: 600; } .dim-row-body { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 6px; } .dim-row-field { display: flex; align-items: center; gap: 8px; } .dim-row-label { font-size: 12px; color: var(--text-2); min-width: 42px; letter-spacing: 0.3px; white-space: nowrap; } .dim-example-field { align-items: flex-start; padding-top: 2px; } .dim-example-field .dim-row-label { margin-top: 4px; } .dim-row-field .input { flex: 1; } /* 多行示例编辑器 (array 类型) */ .dr-example-multi { flex: 1; display: flex; flex-direction: column; gap: 5px; } .dr-example-row { display: flex; align-items: center; gap: 6px; } .dr-example-row .input { flex: 1; } .dr-example-add { align-self: flex-start; margin-top: 2px; } /* KV 编辑器 (object 类型) */ .dr-kv-editor { flex: 1; display: flex; flex-direction: column; gap: 5px; } .dr-kv-row { display: flex; align-items: center; gap: 6px; } .dr-kv-row .dr-kv-key { flex: 0 0 38%; font-weight: 600; } .dr-kv-row .dr-kv-val { flex: 1; } .dr-kv-add { align-self: flex-start; margin-top: 2px; } /* 列表编辑器 (list 类型) */ .dr-list-editor { flex: 1; display: flex; flex-direction: column; gap: 8px; } .dr-list-entry { border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(13, 20, 38, 0.4); padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; } .dr-list-entry-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; } .dr-list-entry-idx { font-size: 11px; color: var(--text-2); font-family: var(--mono); flex: 1; } .dr-list-entry-add { align-self: flex-start; margin-top: 2px; } .dim-empty { text-align: center; padding: 20px; color: var(--text-2); font-size: 12.5px; border: 1px dashed var(--border); border-radius: var(--radius-sm); } /* ============ 项目资料栏目卡片(维度格式) ============ */ .pji-section-card { border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(8, 12, 24, 0.4); margin-bottom: 12px; overflow: hidden; } .pji-section-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(13, 20, 38, 0.7); border-bottom: 1px solid var(--border); } .pji-section-label { font-weight: 600; font-size: 13.5px; cursor: pointer; } .pji-section-label:hover { color: var(--cyan); } .pji-type-select { width: 110px !important; padding: 3px 8px !important; font-size: 12px !important; } .pji-section-body { padding: 12px 14px; } /* 隐藏销售版本 tab(通过数字人管理按钮访问) */ #data-tabs .tab[data-tab="versions"] { display: none; } /* ============ 项目选择下拉框 ============ */ .pj-dropdown { position: absolute; top: 100%; right: 0; z-index: 200; width: 280px; margin-top: 6px; background: linear-gradient(180deg, rgba(20, 29, 52, 0.98), rgba(13, 19, 36, 0.98)); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow), 0 8px 32px rgba(0,0,0,0.4); animation: fadeUp 0.15s ease; overflow: hidden; } .pj-dd-search { padding: 10px 12px; border-bottom: 1px solid var(--border); } .pj-dd-list { max-height: 260px; overflow-y: auto; } .pj-dd-item { display: flex; align-items: center; gap: 4px; padding: 9px 14px; cursor: pointer; font-size: 13px; color: var(--text-1); transition: background 0.12s; } .pj-dd-item:hover { background: rgba(79, 124, 255, 0.08); } .pj-dd-item.active { background: rgba(47, 208, 140, 0.06); color: var(--text-0); } .pj-dd-foot { padding: 10px 12px; border-top: 1px solid var(--border); }