/* wild-work 管理面板 — 现代浅色风格，响应式，无外部依赖 */ :root { --bg: #f5f6f8; --card: #ffffff; --border: #e4e7ec; --text: #1f2329; --muted: #8a919f; --primary: #2563eb; --primary-hover: #1d4ed8; --danger: #dc2626; --ok: #16a34a; --warn: #d97706; --radius: 10px; --shadow: 0 1px 3px rgba(0,0,0,.06); /* —— 渠道识别色：徽章 / 费率表头 / 按钮 / 折线图 series 四处共用同一变量，改这里一处全局生效 —— 变量名 = CH_CLASS 短类名（app.js chColor() 按 --ch-<类名> 读取）； 调色原则：① 贴合各大品牌官方标志色；② 色相环拉开距离消除重叠；③ 告别脏暗色，通透明朗。 */ --ch-wb: #2563eb; /* WorkBuddyCN 蓝（经典科技蓝） */ --ch-wbai: #0f766e; /* WorkBuddyAI 极光青绿（深邃清爽，与科技蓝呼应） */ --ch-trae: #047857; /* TraeWork 智能翠绿（Trae 官方核心色 Intelligent Green） */ --ch-traecode: #0284c7; /* TraeCode 电光海青（Trae 2.0 渐变海天青，彻底摆脱旧深紫，与 sgproxy 彻底拉开） */ --ch-qoder: #db2777; /* Qoder 腾讯桃红 */ --ch-qodercn: #c026d3; /* QoderCN 极光品红 */ --ch-qodercom: #7e22ce; /* QoderCOM 紫罗兰（告别旧深棕） */ --ch-qwenwork: #4f46e5; /* 千问办公 通义紫（阿里通义千问官方极光紫，告别暗青蓝） */ --ch-glm: #1e3a8a; /* 智谱清言 深海宝蓝（智谱官方科技深蓝，告别黑夜般的深暗） */ --ch-monkeycode: #4d7c0f; /* MonkeyCode 生机草绿 */ --ch-raccoon: #8e6bf2; /* 小浣熊 浅紫罗兰（商汤小浣熊客户端品牌色） */ --ch-loomy: #b45309; /* Loomy 暖金琥珀 */ --ch-officeace: #dc2626; /* OfficeAce 华为中国红 */ --ch-oczen: #475569; /* OpenCodeZen 禅意石板灰 */ --ch-cline: #15803d; /* Cline 机器人深绿 */ --ch-custom: #6366f1; /* 自定义渠道兜底色（走黄金角自适应色，见 chColor） */ --ch-kilo: #164e63; /* Kilo 深冷松蓝 */ --ch-minimax: #c2410c; /* MiniMax 活力暖橙（海螺 AI 官方品牌橙，告别橄榄屎黄） */ --ch-lobsterai: #e11d48; /* LobsterAI 龙虾珊瑚红 */ --ch-zcode: #581c87; /* ZCode 极客深紫檀 */ --ch-gemini: #88117c; /* Gemini 官方星云品紫 */ --ch-codearts: #991b1b; /* CodeArts 华为云深绯红 */ } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; } #app { max-width: 960px; margin: 0 auto; padding: 20px 16px 60px; } /* 顶部 */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 16px; gap: 12px; } .brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .logo { width: 40px; height: 40px; border-radius: 8px; } .brand-text .title { font-size: 18px; font-weight: 700; line-height: 1.2; } .brand-text .ver { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 4px; } .brand-text .sub { font-size: 11px; color: var(--muted); } .top-info { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; flex: 1; max-width: 480px; } .info-cell { display: flex; align-items: center; gap: 8px; } .info-label { font-size: 11px; color: var(--muted); white-space: nowrap; } .info-value { font-size: 12px; color: var(--muted); background: #f0f2f5; padding: 4px 10px; border-radius: 6px; font-family: ui-monospace, monospace; cursor: pointer; display: inline-flex; align-items: center; overflow: hidden; min-width: 0; flex: 1; } .info-value:hover { color: var(--primary); background: #e0e7ff; } .info-value .val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; flex-shrink: 1; } .top-icons { display: flex; gap: 8px; flex-shrink: 0; } .icon-link.gear { font-size: 18px; } .icon-link { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--muted); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; cursor: pointer; transition: all .15s; } .icon-link:hover { border-color: var(--primary); color: var(--primary); } /* 面板区块 */ .panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--shadow); } .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; } .panel-head h2 { font-size: 16px; font-weight: 600; } /* 账号管理按钮区：外层 wrap 分三段 —— 左组(刷新/签到) + 弹性空白 + 右组(渠道三列 grid)。 左组整体靠左、右组整体靠右，中间空白自动伸缩；左组窄时 wrap 换行不溢出。 */ .panel-actions-wrap { display: flex; align-items: center; flex: 1; min-width: 0; } .pa-spacer { flex: 1; } .pa-left { display: flex; flex-direction: column; gap: 8px; } .pa-left .btn { white-space: nowrap; align-self: flex-start; } .pa-right { display: grid; grid-template-columns: repeat(6, auto); gap: 8px 10px; } .pa-right .btn { justify-self: stretch; white-space: nowrap; } /* 摆位与列配对由 DOM 顺序（行主序）决定：同列上下 = 同渠道的国内/国际版 （WorkBuddyCN/WorkBuddyAI、QoderCN/QoderCOM），Cline 占第一行末位； 行数随渠道数增长（当前 18 渠道 + 自定义 = 3 行满格），不做固定行数限制。 列数/顺序断言见 scripts/ui-static-check.mjs 与 index.html 内注释。 */ /* 紧凑档：比标准按钮小两号（14px/8px14px → 12px/6px10px）， PC 默认宽度下一行能放下 6 个渠道按钮（实测阈值见下方媒体查询注释）。 */ .panel-actions-wrap .btn { font-size: 12px; padding: 6px 10px; } /* 按钮 */ .btn { border: 1px solid var(--border); background: var(--card); color: var(--text); padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 14px; transition: all .15s; } .btn:hover { background: #f0f2f5; } .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; } .btn.primary:hover { background: var(--primary-hover); } /* 默认兜底色：中性石板灰。原先写死 #0891b2，与 qwenwork/zcode 的渠道色 完全相同，导致「TraeWork」「自定义模型」等未带修饰类的按钮和它们撞色。 */ .btn.primary.alt { background: var(--ch-custom); border-color: var(--ch-custom); } /* 悬停效果对全部渠道按钮生效：逐渠道再写一遍 :hover 只会多出 22 条重复规则。 */ .btn.primary.alt:hover { filter: brightness(0.88); } /* 渠道按钮配色：类名 = CH_CLASS 短类名，颜色一律取 --ch-*（与徽章/折线图同源）。 集中在此处维护：原先散在文件各处（跟 qwenwork 的媒体查询、cline 的响应式段混在 一起），漏改一处就会静默落在兜底色上。新增渠道时这里补一行即可。 */ .btn.primary.alt.wb { background: var(--ch-wb); border-color: var(--ch-wb); } .btn.primary.alt.wbai { background: var(--ch-wbai); border-color: var(--ch-wbai); } .btn.primary.alt.trae { background: var(--ch-trae); border-color: var(--ch-trae); } .btn.primary.alt.traecode { background: var(--ch-traecode); border-color: var(--ch-traecode); } .btn.primary.alt.qoder { background: var(--ch-qoder); border-color: var(--ch-qoder); } .btn.primary.alt.qodercn { background: var(--ch-qodercn); border-color: var(--ch-qodercn); } .btn.primary.alt.qodercom { background: var(--ch-qodercom); border-color: var(--ch-qodercom); } .btn.primary.alt.qwenwork { background: var(--ch-qwenwork); border-color: var(--ch-qwenwork); } .btn.primary.alt.glm { background: var(--ch-glm); border-color: var(--ch-glm); } .btn.primary.alt.monkeycode { background: var(--ch-monkeycode); border-color: var(--ch-monkeycode); } .btn.primary.alt.raccoon { background: var(--ch-raccoon); border-color: var(--ch-raccoon); } .btn.primary.alt.loomy { background: var(--ch-loomy); border-color: var(--ch-loomy); } .btn.primary.alt.officeace { background: var(--ch-officeace); border-color: var(--ch-officeace); } .btn.primary.alt.oczen { background: var(--ch-oczen); border-color: var(--ch-oczen); } .btn.primary.alt.kilo { background: var(--ch-kilo); border-color: var(--ch-kilo); } .btn.primary.alt.minimax { background: var(--ch-minimax); border-color: var(--ch-minimax); } .btn.primary.alt.lobsterai { background: var(--ch-lobsterai); border-color: var(--ch-lobsterai); } .btn.primary.alt.zcode { background: var(--ch-zcode); border-color: var(--ch-zcode); } .btn.primary.alt.gemini { background: var(--ch-gemini); border-color: var(--ch-gemini); } .btn.primary.alt.codearts { background: var(--ch-codearts); border-color: var(--ch-codearts); } .btn.primary.alt.cline { background: var(--ch-cline); border-color: var(--ch-cline); } .btn.primary.alt.custom { background: var(--ch-custom); border-color: var(--ch-custom); } /* 智谱清言登录弹层步骤列表 */ .glm-steps { margin: 4px 0 8px; padding-left: 20px; font-size: 13px; line-height: 1.9; } .glm-steps code { background: #f0f2f5; padding: 1px 5px; border-radius: 4px; font-size: 12px; } .glm-steps a { color: var(--primary); } .btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn.danger:hover { background: #b91c1c; } .btn.small { padding: 5px 10px; font-size: 13px; } .btn.tiny { padding: 2px 8px; font-size: 11px; border-radius: 6px; color: var(--primary); } .btn.tiny:hover { background: #eef2ff; border-color: var(--primary); } .panel-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* 模型映射编辑器 */ .map-editor { margin-top: 8px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: #fafbfc; } .map-text { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 12px; line-height: 1.6; padding: 6px 8px; resize: vertical; box-sizing: border-box; } .map-editor .preset { display: inline-block; margin: 0 4px 4px 0; } /* 渠道积分汇总条（账号卡片上方，数据与卡片同源） */ .credit-summary { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 12px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); } .cs-title { font-size: 12px; color: var(--muted); font-weight: 600; margin-right: 2px; } .cs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); font-size: 12px; white-space: nowrap; } .cs-chip .badge { font-size: 10px; } .cs-n { color: var(--muted); font-size: 11px; } .cs-num { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .cs-exp { color: var(--danger); font-weight: 600; font-size: 11px; } /* Token 计量渠道的量纲标签（与积分的「分」区分开，明示单位是 token） */ .cs-tok { color: var(--primary); font-size: 11px; font-weight: 600; margin-left: 2px; } .cs-unu { color: var(--muted); font-size: 11px; } .cs-stale { color: var(--warn); font-size: 11px; } .cs-total { background: #eef4ff; border-color: #c7d9ff; } .cs-total .cs-title { color: var(--primary); } /* 渠道 chip 可点击筛选账号：整条作为按钮，选中态加边高亮 */ .cs-chip.clickable { cursor: pointer; } .cs-chip.clickable:hover { border-color: var(--primary); } .cs-chip.clickable:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } .cs-chip.clickable.on { border-color: var(--primary); background: #eff6ff; } .cs-chip.cs-all { padding: 3px 10px; } .cs-chip.cs-all .cs-n { color: var(--primary); } /* 「不适用」开关 chip：默认收起态用虚线边框与弱色，表明它是开关而不是一个渠道； 展开后（.on）转实线 + 主题色，与渠道筛选选中态同源。 */ .cs-chip.cs-na { border-style: dashed; } .cs-chip.cs-na .cs-n { color: var(--muted); } .cs-chip.cs-na.on { border-style: solid; } .cs-chip.cs-na.on .cs-n { color: var(--primary); } /* 账号筛选后隐藏的卡片（applyAcctFilter 控制） */ .acct-grid .acct-card.hidden { display: none; } /* 账号卡片网格 */ .acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .acct-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--card); } .acct-card.disabled { opacity: 0.5; background: #f9fafb; } .acct-card .acct-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; } .acct-card .acct-name { font-weight: 600; font-size: 14px; } .acct-card .acct-uid { font-size: 11px; color: var(--muted); } .acct-card .acct-mid { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .acct-card .acct-credits { font-size: 18px; font-weight: 700; cursor: pointer; white-space: nowrap; } /* 可用/不可用/临期拆分：主数字黑色正常字号，不可用降级为次要色，临期红色醒目提示优先消耗。 */ .acct-card .acct-credits span { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 2px; } .acct-card .acct-credits .credit-num { font-size: 18px; font-weight: 700; color: var(--text); margin-left: 0; } .acct-card .acct-credits .credit-sep { margin: 0 3px; color: var(--border); } .acct-card .acct-credits .credit-unusable { font-size: 13px; font-weight: 600; color: var(--muted); } .acct-card .acct-credits .credit-expiring { font-size: 13px; font-weight: 600; color: var(--danger); } /* 旧版 state 文件读入后余额口径不可信：显示待刷新而非旧值 */ .acct-card .acct-credits .credit-stale { font-size: 13px; font-weight: 600; color: var(--muted); animation: stale-pulse 1.6s ease-in-out infinite; } @keyframes stale-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } } .acct-card .acct-checkin { font-size: 11px; } .acct-card .acct-ops { display: flex; gap: 4px; justify-content: flex-end; } .badge { font-size: 10px; padding: 2px 7px; border-radius: 10px; color: #fff; white-space: nowrap; } /* 渠道徽章配色：类名 = CH_CLASS 短类名，颜色一律取 --ch-*。 这里只是「无 JS 兜底」：真正渲染走 app.js 的 chBadge()（内联 background = chColor()）， 自定义渠道的徽章底色由 chBadge 内联覆盖，故 .badge.custom 仅是兜底值。 集中在此维护，新增渠道时这里补一行即可（散在各处时曾出现同一规则被写两遍、 后一条 hex 静默覆盖变量版的情况）。 */ .badge.wb { background: var(--ch-wb); } .badge.wbai { background: var(--ch-wbai); } .badge.trae { background: var(--ch-trae); } /* TraeCode 与 TraeWork 共用账号但模型集不同，配色刻意区分以免混淆 */ .badge.traecode { background: var(--ch-traecode); } .badge.qoder { background: var(--ch-qoder); } .badge.qodercn { background: var(--ch-qodercn); } .badge.qodercom { background: var(--ch-qodercom); } .badge.qwenwork { background: var(--ch-qwenwork); } .badge.glm { background: var(--ch-glm); } .badge.monkeycode { background: var(--ch-monkeycode); } .badge.raccoon { background: var(--ch-raccoon); } .badge.loomy { background: var(--ch-loomy); } .badge.officeace { background: var(--ch-officeace); } .badge.oczen { background: var(--ch-oczen); } .badge.kilo { background: var(--ch-kilo); } .badge.minimax { background: var(--ch-minimax); } .badge.lobsterai { background: var(--ch-lobsterai); } .badge.zcode { background: var(--ch-zcode); } .badge.gemini { background: var(--ch-gemini); } .badge.codearts { background: var(--ch-codearts); } .badge.cline { background: var(--ch-cline); } .badge.custom { background: var(--ch-custom); } .tag { font-size: 10px; padding: 2px 7px; border-radius: 10px; white-space: nowrap; } .tag.bad { background: #fee2e2; color: var(--danger); } .tag.ok { background: #dcfce7; color: var(--ok); } .tag.neutral { background: #f0f2f5; color: var(--muted); } /* 图标操作按钮 */ .icon-op { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--muted); cursor: pointer; font-size: 14px; transition: all .15s; margin: 0 1px; } .icon-op:hover { color: var(--primary); border-color: var(--primary); background: #eff6ff; } .icon-op.danger:hover { color: var(--danger); border-color: var(--danger); background: #fef2f2; } .icon-op.warn:hover { color: var(--warn); border-color: var(--warn); background: #fffbeb; } .icon-op.off { cursor: not-allowed; color: #cbd5e1; opacity: .55; } .icon-op.off:hover { color: #cbd5e1; border-color: var(--border); background: var(--card); } /* 帮助图标：正常亮度可 hover，不可点击（无 onclick），tooltip 展示说明 */ .icon-op.help { cursor: help; color: var(--muted); font-weight: 600; } .icon-op.help:hover { color: var(--primary); border-color: var(--primary); background: #eff6ff; } /* 冷却标签 + 冷却卡片（账号被挑号跳过时给出可见提示，避免"积分很多却报错"的困惑） */ .tag.warn { background: #fef3c7; color: var(--warn); } .acct-card.cooling { border-left: 3px solid var(--warn); } /* 智谱清言弹层顶部风险告知（体验渠道） */ .glm-warn { border: 1px solid #fde68a; background: #fffbeb; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; } .glm-warn-title { font-size: 13px; font-weight: 700; color: var(--warn); margin-bottom: 4px; } .glm-warn ol { margin: 0; padding-left: 18px; } .glm-warn li { font-size: 12.5px; color: #92400e; line-height: 1.7; } .empty { color: var(--muted); text-align: center; padding: 24px 0; font-size: 14px; } .hidden { display: none !important; } /* 配置网格（签到 + 开机自启左右布局） */ .config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .config-right { padding-left: 20px; border-left: 1px solid var(--border); } /* 表单行 */ .row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .row.wrap { flex-wrap: wrap; } .lbl { font-size: 13px; color: var(--muted); width: 44px; } .input { border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 14px; outline: none; } .input:focus { border-color: var(--primary); } .input.port { width: 80px; } /* 通用弹性自适应容器与包装层 */ .grow { flex: 1 1 auto; min-width: 0; } .row > .pk-wrap.grow { flex: 1 1 auto; min-width: 0; } .input.grow { flex: 1; min-width: 120px; } /* 弹层里独立成行的输入框（不套在 .row 弹性容器里）：.grow 的 flex:1 不生效， 浏览器会按默认 size 属性渲染成一个窄框（就是 Cline 的 API-Key 输入框过短的原因）。 凡是直接位于 .cfg-section 下的 .input.grow 一律撑满宽度。 */ .cfg-section > .input.grow { flex: none; width: 100%; box-sizing: border-box; } .select { border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 14px; background: var(--card); outline: none; } /* 下拉框统一自绘箭头（原生箭头在 Chrome 上是又小又贴边的灰色三角，和圆角边框不搭）。 做法：appearance:none 去掉原生控件，再画一个 CSS 三角贴在右侧。 为什么用 background-image 而不是 ::after：