390 lines
53 KiB
HTML
390 lines
53 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN" class="embedded">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>甄养堂 · 企业微信 AI 自动回复 v2.0</title>
|
||
<script>if(/\bQt/i.test(navigator.userAgent))document.documentElement.classList.add("embedded");</script>
|
||
<style>
|
||
:root{
|
||
--navy:#102554;--ink:#1d315f;--body:#3f527d;--muted:#7b89ab;
|
||
--blue:#2f6fff;--blue2:#5a65ff;--violet:#8a6bff;--cyan:#34c8f3;
|
||
--green:#13b77a;--orange:#ff981d;--red:#ff5358;
|
||
--line:rgba(110,137,201,.17);--line2:rgba(93,126,205,.11);
|
||
--glass:rgba(255,255,255,.72);--glass2:rgba(255,255,255,.88);
|
||
--shadow:0 16px 42px rgba(78,99,162,.09),inset 0 1px 0 rgba(255,255,255,.96);
|
||
--font:"PingFang SC","HarmonyOS Sans SC","MiSans VF","MiSans","Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;
|
||
}
|
||
*{box-sizing:border-box}
|
||
html,body{margin:0;width:100%;height:100%;overflow:hidden}
|
||
body{font-family:var(--font);color:var(--body);font-size:15px;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;background:#f4f8ff}
|
||
button,input,textarea,select{font:inherit;color:inherit}
|
||
button{border:0;outline:none;-webkit-tap-highlight-color:transparent}
|
||
.sprite{position:absolute;width:0;height:0;overflow:hidden}
|
||
.ico{display:inline-block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;flex:0 0 auto;pointer-events:none}
|
||
#stage{position:absolute;left:0;top:0;width:1630px;min-height:965px;height:auto;display:flex;flex-direction:column;transform:scale(var(--scale,1));transform-origin:top left;border:1px solid rgba(112,140,203,.18);overflow:visible;background:
|
||
radial-gradient(circle at 72% 9%,rgba(126,214,255,.18),transparent 29%),
|
||
radial-gradient(circle at 96% 77%,rgba(145,115,255,.17),transparent 30%),
|
||
radial-gradient(circle at 23% 77%,rgba(93,236,216,.09),transparent 25%),
|
||
linear-gradient(134deg,#fcfdff 0%,#f5f9ff 49%,#f7f5ff 100%)}
|
||
.titlebar{height:45px;padding:0 16px;display:flex;align-items:center;gap:11px;border-bottom:1px solid rgba(98,126,193,.14);background:rgba(255,255,255,.64);backdrop-filter:blur(18px);color:#1c2a4b}
|
||
.title-logo,.brand-logo{display:grid;place-items:center;color:#fff;font-weight:700;background:linear-gradient(145deg,#24c4ff,#3569ff 52%,#9068ff);box-shadow:0 8px 20px rgba(64,88,255,.28)}
|
||
.title-logo{width:24px;height:24px;border-radius:6px;font-size:15px}
|
||
.titlebar strong{font-size:14px;letter-spacing:.02em}
|
||
.window-actions{margin-left:auto;display:flex;gap:31px;align-items:center;color:#1b263d;font:17px/1 Arial,sans-serif}
|
||
.window-actions span:nth-child(2){font-size:18px}
|
||
.workspace{flex:1 1 auto;min-height:920px;display:grid;grid-template-columns:112px minmax(0,1fr);gap:58px;padding:3px 36px 16px 24px}
|
||
.rail{height:100%;min-height:902px;border:1px solid rgba(111,137,205,.16);border-radius:37px;background:rgba(255,255,255,.68);box-shadow:0 20px 48px rgba(76,97,162,.10),inset 0 1px 0 #fff;backdrop-filter:blur(24px);padding:30px 10px 17px;display:flex;flex-direction:column;align-items:center;position:relative;z-index:5;overflow:visible}
|
||
.brand-logo{width:52px;height:52px;border-radius:14px;font-size:27px;margin-bottom:28px;box-shadow:0 13px 28px rgba(67,80,255,.33)}
|
||
.nav{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%}
|
||
.nav-btn{position:relative;width:88px;height:71px;border-radius:24px;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#40557e;transition:.2s ease;z-index:1;outline:none}
|
||
.nav-icon{width:51px;height:51px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(228,235,250,.78));box-shadow:0 8px 18px rgba(88,106,166,.08),inset 0 1px 0 #fff;color:#213761;transition:.2s ease;pointer-events:none}
|
||
.nav-icon .ico{width:24px;height:24px;stroke-width:1.9}
|
||
.nav-btn>span{font-size:12px;font-weight:560;white-space:nowrap;line-height:1;pointer-events:none}
|
||
.nav-btn:hover .nav-icon{color:var(--blue);transform:translateY(-1px)}
|
||
.nav-btn:focus,.nav-btn:focus-visible,.nav-btn:active{outline:none}
|
||
.nav-btn.active{width:127px;height:54px;margin:6px 0 8px;flex-direction:row;justify-content:flex-start;gap:7px;padding:2px 13px 2px 7px;color:#2259ee;background:linear-gradient(100deg,rgba(239,245,255,.95),rgba(251,248,255,.94));border:1px solid rgba(101,126,231,.13);box-shadow:0 12px 24px rgba(87,102,227,.15);z-index:3}
|
||
.nav-btn.active .nav-icon{width:50px;height:50px;flex:0 0 50px;color:#fff;background:radial-gradient(circle at 38% 27%,#6ae0ff 0 5%,#3c7dff 35%,#5d63ff 61%,#9669ff 82%);box-shadow:0 0 0 7px rgba(75,107,255,.08),0 8px 19px rgba(79,92,255,.34)}
|
||
.nav-btn.active>span{font-weight:650;color:#2556e9}
|
||
.listener{margin-top:auto;display:grid;place-items:center;gap:11px;color:#00a5b1;font-size:13px;font-weight:650;cursor:pointer;padding:10px 6px;border-radius:16px;user-select:none;transition:background .18s}.listener:hover{background:rgba(0,165,177,.08)}.listener:active{background:rgba(0,165,177,.16)}.listener:focus-visible{outline:2px solid rgba(0,165,177,.55);outline-offset:2px}
|
||
.orb{width:61px;height:61px;border-radius:50%;position:relative;background:radial-gradient(circle at 38% 30%,#fff 0 5%,#8ee8ff 20%,#596aff 45%,#9a73ff 66%,rgba(62,217,228,.45) 75%);box-shadow:0 0 0 7px rgba(42,215,234,.13),0 0 28px rgba(72,106,255,.44)}
|
||
.orb:before,.orb:after{content:"";position:absolute;border-radius:50%;inset:8px;border:1px solid rgba(255,255,255,.72)}
|
||
.orb:after{inset:18px;background:radial-gradient(circle,#f8ffff 0 10%,rgba(255,255,255,.18) 65%,transparent);border:0}
|
||
.orb.paused{filter:grayscale(.7);opacity:.65;box-shadow:none}
|
||
.system-btn{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(228,235,250,.78));box-shadow:0 7px 17px rgba(81,101,168,.08);cursor:pointer;color:#263b64;margin-top:27px}
|
||
.system-btn.active{color:#fff;background:linear-gradient(145deg,#33c9f5,#4c6aff 55%,#8b6cff);box-shadow:0 0 0 7px rgba(72,111,255,.09),0 8px 19px rgba(70,97,255,.3)}
|
||
.main{min-width:0;padding-top:24px;min-height:900px;overflow:visible}
|
||
.screen{min-height:876px;overflow:visible;animation:fade .23s ease both}
|
||
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
|
||
.page-head{height:88px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
|
||
.page-head h1{margin:0;color:var(--navy);font-size:34px;line-height:1.08;font-weight:720;letter-spacing:-.035em}
|
||
.page-head p{margin:9px 0 0;font-size:16px;color:#6e7da1;font-weight:420}
|
||
.head-actions{display:flex;gap:14px;align-items:center;padding-top:4px}
|
||
.btn{height:48px;padding:0 21px;border-radius:25px;border:1px solid rgba(115,140,205,.18);background:rgba(255,255,255,.74);box-shadow:0 9px 21px rgba(73,94,157,.08),inset 0 1px 0 #fff;display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;cursor:pointer;font-size:15px;transition:.18s ease;outline:none}
|
||
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(72,92,160,.13),inset 0 1px 0 #fff}
|
||
.btn.small{height:39px;padding:0 16px;font-size:13px}
|
||
.btn.primary{color:#fff;border-color:transparent;background:linear-gradient(105deg,#2cc7f1,#3976ff 46%,#8a65f5);box-shadow:0 0 0 6px rgba(67,105,255,.06),0 10px 24px rgba(67,91,255,.27)}
|
||
.btn.blue{color:#1662f7}.btn.orange{color:#f38100;background:linear-gradient(135deg,#fff,#fff5e8);border-color:rgba(255,156,43,.23)}
|
||
.btn.danger{color:#f14950;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,239,238,.9));border-color:rgba(255,89,94,.20)}
|
||
.btn .ico{width:21px;height:21px}
|
||
.led{width:12px;height:12px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(19,183,122,.09)}
|
||
.panel{border:1px solid var(--line);background:var(--glass);border-radius:24px;box-shadow:var(--shadow);backdrop-filter:blur(22px)}
|
||
.panel-pad{padding:18px 21px}
|
||
.panel-title{min-height:27px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
|
||
.panel-title h2{margin:0;color:var(--navy);font-size:18px;font-weight:700;letter-spacing:-.02em}
|
||
.panel-title small{color:var(--muted);font-size:12px}
|
||
.badge{height:28px;padding:0 12px;border-radius:15px;display:inline-flex;align-items:center;gap:6px;background:rgba(60,107,255,.075);color:#2c65f4;border:1px solid rgba(67,111,255,.08);font-size:12px;white-space:nowrap}
|
||
.badge.green{background:rgba(15,183,119,.08);color:#0ca56b}.badge.orange{background:rgba(255,151,26,.1);color:#ed8c00}.badge.red{background:rgba(255,77,85,.08);color:#ed4c52}
|
||
.wave-ribbon{height:96px;margin-bottom:16px;padding:0 25px;display:grid;grid-template-columns:1.3fr 1fr 1fr .85fr;align-items:center;position:relative;overflow:hidden}
|
||
.wave-ribbon:after{content:"";position:absolute;left:15%;right:3%;top:28px;height:48px;opacity:.38;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 55'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M0 29 C45 3 83 50 128 26 S214 5 258 30 345 45 392 25 480 4 525 30 615 48 700 22' stroke='%237b83ff' stroke-width='1.1'/%3E%3Cpath d='M0 33 C54 50 90 7 145 29 S247 46 301 24 410 11 463 30 566 43 625 20 672 17 700 26' stroke='%233bcbea' stroke-width='1'/%3E%3Cpath d='M0 22 C50 12 82 42 126 27 S205 9 255 25 344 40 390 29 478 12 525 25 618 38 700 25' stroke='%23a78afa' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat}
|
||
.metric{height:58px;position:relative;z-index:1;display:flex;align-items:center;gap:17px;padding:0 21px;border-right:1px solid rgba(110,135,197,.14)}
|
||
.metric:last-child{border:0}.metric:first-child{padding-left:0}
|
||
.metric-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:var(--blue);background:linear-gradient(145deg,rgba(236,245,255,.9),rgba(232,231,255,.68));box-shadow:0 8px 18px rgba(75,100,180,.07),inset 0 0 0 1px rgba(92,126,216,.08)}
|
||
.metric-icon .ico{width:28px;height:28px}.metric-icon.green{color:var(--green);background:rgba(228,249,241,.72)}.metric-icon.red{color:var(--red);background:rgba(255,235,238,.75)}.metric-icon.orange{color:var(--orange);background:rgba(255,243,228,.77)}
|
||
.metric-copy{display:grid;gap:1px}.metric-copy span{font-size:13px;color:#566589}.metric-copy strong{font-size:26px;line-height:1.05;color:#122653;font-weight:700}.metric-copy strong.green{color:var(--green)}.metric-copy strong.blue{color:#2f62f6}
|
||
.auto-grid{display:grid;grid-template-columns:minmax(0,322fr) minmax(0,586fr) minmax(0,462fr);grid-auto-rows:minmax(358px,auto);gap:14px;margin-bottom:20px}
|
||
.queue-card{grid-row:span 2}.task-card{grid-row:span 2}.journey-card{grid-column:3}.window-card{grid-column:3}
|
||
.queue-list{display:grid;gap:3px}.queue-row{height:71px;display:grid;grid-template-columns:50px minmax(0,1fr) 67px;align-items:center;gap:11px;padding:7px 11px;border-radius:21px;position:relative;cursor:pointer}
|
||
.queue-row+.queue-row{border-top:1px solid rgba(109,135,197,.10);border-radius:0}.queue-row.active{background:linear-gradient(95deg,rgba(241,246,255,.95),rgba(255,255,255,.7));border-radius:22px;box-shadow:inset 4px 0 #3776ff,0 8px 20px rgba(81,103,177,.05);border-top-color:transparent}
|
||
.avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:18px;background:linear-gradient(145deg,#61b8ff,#5269ff);box-shadow:0 6px 14px rgba(72,104,220,.15)}
|
||
.avatar.green{background:linear-gradient(145deg,#80d6ba,#4bbb96)}.avatar.violet{background:linear-gradient(145deg,#a282df,#7353bd)}.avatar.cyan{background:linear-gradient(145deg,#4fd3e5,#1da9c5)}
|
||
.q-copy{min-width:0}.q-copy strong{display:block;color:#1e315c;font-size:14px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px}.q-copy span{font-size:11px;color:#7d8cac}.q-copy span i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#3c79ff;margin-right:6px}.q-copy span i.gray{background:#bec7d9}.q-copy span i.orange{background:var(--orange)}
|
||
.q-meta{text-align:right;display:grid;justify-items:end;gap:6px;color:#7180a2;font-size:11px}.bubble-count{display:inline-flex;gap:5px;align-items:center}
|
||
.queue-footer{display:flex;align-items:center;justify-content:space-between;margin-top:7px;padding:5px 11px;color:#536486;font-size:13px}.round-btn{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.67);border:1px solid rgba(111,139,205,.16);display:grid;place-items:center;cursor:pointer}
|
||
.task-head-meta{display:flex;gap:10px;align-items:center}.copy-block{border-radius:14px;background:linear-gradient(120deg,rgba(243,247,255,.91),rgba(248,248,255,.74));padding:13px 14px;margin-bottom:10px}
|
||
.subhead{font-size:13px;color:#1c2f5a;font-weight:670;margin-bottom:10px}.message-line{display:grid;grid-template-columns:72px 1fr;gap:8px;font-size:13px;line-height:1.75}.message-line time{color:#667698}.message-note{font-size:11px;color:#8b97b1;margin-top:4px}
|
||
.answer-block{border-radius:15px;background:linear-gradient(120deg,rgba(234,243,255,.92),rgba(247,243,255,.75));border:1px solid rgba(79,125,236,.11);padding:12px 14px;color:#263b67;font-size:13px;line-height:1.75;position:relative;overflow:hidden}
|
||
.answer-block:after{content:"";position:absolute;right:-28px;top:-32px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(91,207,249,.20),rgba(135,98,255,.10),transparent 68%)}
|
||
.answer-meta{height:35px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#7684a3}.answer-meta span{display:flex;align-items:center;gap:6px}.answer-meta b{font-size:15px;color:#2e63f4}
|
||
.task-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:10px}
|
||
.journey{position:relative;display:grid;gap:1px}.journey:before{content:"";position:absolute;left:17px;top:18px;bottom:19px;width:2px;background:linear-gradient(var(--green) 0 57%,rgba(172,184,211,.30) 57%)}
|
||
.j-step{height:45px;display:grid;grid-template-columns:36px 1fr 45px;align-items:center;gap:10px;position:relative;padding-right:8px}.j-step.active{height:48px;border-radius:17px;background:linear-gradient(90deg,rgba(70,112,255,.13),rgba(129,104,255,.09))}.j-dot{width:25px;height:25px;margin-left:5px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--green);font-size:12px;position:relative;z-index:1;box-shadow:0 4px 10px rgba(18,177,118,.14)}
|
||
.j-step.active .j-dot{width:37px;height:37px;margin-left:-1px;background:radial-gradient(circle at 35% 28%,#7fe8ff,#4c62ff 54%,#8669ff);box-shadow:0 0 0 7px rgba(73,107,255,.09),0 0 20px rgba(70,95,255,.32);font-size:16px}.j-step.wait .j-dot{background:#e8edf6;color:#7d89a6;box-shadow:none}.j-copy strong{display:block;color:#253861;font-size:13px}.j-copy span{font-size:10px;color:#8391af}.j-step.active .j-copy strong,.j-step.active .j-copy span{color:#2b62f1}.j-time{font-size:11px;color:#7685a5;text-align:right}
|
||
.window-status{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.window-stat{height:72px;border-radius:17px;background:rgba(255,255,255,.58);border:1px solid rgba(109,137,203,.12);display:grid;place-items:center;align-content:center;gap:3px;text-align:center}.window-stat .ico{width:21px;height:21px;color:#263c68}.window-stat strong{font-size:10px;color:#2c3d65}.window-stat span{font-size:10px;color:#0aab71;line-height:1.3}
|
||
.activity-panel{min-height:145px;padding:15px 20px}.activity-panel .panel-title{margin-bottom:8px}.activity-strip{display:grid;grid-template-columns:repeat(4,1fr) 168px;gap:10px}.activity-card{height:82px;border-radius:19px;background:rgba(255,255,255,.62);border:1px solid rgba(111,137,201,.13);padding:11px 14px;display:grid;grid-template-columns:33px 1fr;grid-template-rows:auto auto;column-gap:10px;position:relative}.activity-icon{grid-row:1/3;width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:rgba(32,190,137,.09);color:#10ad76}.activity-icon.blue{color:#3c72ff;background:rgba(60,114,255,.09)}.activity-icon.orange{color:var(--orange);background:rgba(255,152,29,.10)}.activity-card time{font-size:11px;color:#7382a3}.activity-card strong{font-size:13px;color:#263960}.activity-card p{grid-column:2;margin:0;font-size:11px;color:#7281a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-state{position:absolute;right:12px;top:10px;font-size:10px;color:var(--green)}
|
||
.activity-more{height:48px;align-self:center}
|
||
.tabs{height:58px;width:max-content;padding:5px;display:flex;align-items:center;gap:5px;border-radius:30px;background:rgba(255,255,255,.56);border:1px solid var(--line);box-shadow:var(--shadow);margin:-3px 0 18px}.tab{height:46px;padding:0 39px;border-radius:24px;background:transparent;cursor:pointer;color:#354871}.tab.active{background:linear-gradient(105deg,rgba(231,241,255,.95),rgba(239,235,255,.95));color:#225ff1;box-shadow:0 7px 17px rgba(80,101,180,.08)}
|
||
.filter-row{height:64px;padding:9px 14px;margin-bottom:18px;display:flex;align-items:center;gap:13px}.search{height:44px;width:295px;border-radius:23px;background:rgba(255,255,255,.56);border:1px solid rgba(112,139,203,.14);display:flex;align-items:center;gap:9px;padding:0 15px}.search input{border:0;outline:0;background:transparent;width:100%;font-size:13px}.filter-pill{height:44px;padding:0 26px;border-radius:23px;background:rgba(255,255,255,.57);border:1px solid rgba(110,138,201,.14);cursor:pointer}.filter-pill.active{color:#2863f3;background:linear-gradient(100deg,rgba(234,242,255,.93),rgba(242,239,255,.92));border-color:rgba(71,110,241,.14)}
|
||
.soft{border-radius:18px;background:rgba(255,255,255,.56);border:1px solid rgba(109,136,200,.13)}
|
||
.stack{display:grid;gap:12px}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
|
||
.queue-view-grid{display:grid;grid-template-columns:minmax(0,350fr) minmax(0,714fr) minmax(0,301fr);gap:15px;min-height:506px;margin-bottom:18px}.queue-view-grid>.panel{min-height:506px}.queue-view-grid .queue-row{height:71px}.queue-filters{display:flex;gap:9px;margin-bottom:10px}.queue-filters .filter-pill{height:31px;padding:0 17px;font-size:12px}.detail-stats{display:grid;grid-template-columns:1.15fr 1fr 1fr .8fr;gap:12px;margin-bottom:14px}.detail-stat{height:64px;padding:10px 14px;border-radius:18px;background:rgba(255,255,255,.57);border:1px solid rgba(110,137,201,.13);display:grid;align-content:center;gap:4px}.detail-stat span{font-size:11px;color:#7080a2}.detail-stat b{font-size:14px;color:#21355f}.process-title{font-size:14px;color:#215fe9;font-weight:700;display:flex;gap:10px;align-items:center;margin:13px 0}.process-line{display:grid;grid-template-columns:repeat(6,1fr);position:relative;padding-top:6px}.process-line:before{content:"";position:absolute;top:22px;left:7%;right:7%;height:3px;background:linear-gradient(90deg,#26c188 0 55%,#8c72ff 72%,#e6ebf5 72%)}.process-step{text-align:center;position:relative;z-index:1}.process-dot{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;margin:auto;background:#fff;border:1px solid rgba(102,132,206,.17);color:#7382a2}.process-step.done .process-dot{color:#fff;background:var(--green);box-shadow:0 0 0 7px rgba(17,181,119,.07)}.process-step.active .process-dot{width:45px;height:45px;margin-top:-5px;color:#fff;background:radial-gradient(circle at 35% 30%,#6be5ff,#4d61ff 56%,#8f6bff);box-shadow:0 0 0 8px rgba(74,105,255,.08),0 0 19px rgba(75,93,255,.31)}.process-step strong{display:block;font-size:12px;color:#253963;margin-top:9px}.process-step span{display:block;font-size:10px;color:#8190ad;margin-top:3px}.process-step.active strong,.process-step.active span{color:#2861f1}.side-stat{height:90px;padding:17px;border-radius:21px;background:rgba(255,255,255,.58);border:1px solid rgba(111,138,204,.13);display:flex;align-items:center;gap:13px}.side-stat .metric-icon{width:45px;height:45px}.side-stat span{font-size:12px;color:#6d7ca0}.side-stat b{display:block;font-size:15px;color:#243760;margin-top:3px}
|
||
.archive-grid{display:grid;grid-template-columns:minmax(0,333fr) minmax(0,605fr) minmax(0,437fr);gap:14px;min-height:521px;margin-bottom:14px}.archive-grid>.panel{min-height:521px}.conversation-list .queue-row{height:70px}.chat{display:grid;gap:9px;padding:0 5px}.chat-line{display:flex;align-items:flex-end;gap:10px}.chat-line.ai{justify-content:flex-end}.mini-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(108,127,178,.11);color:#66769b}.chat-line.ai .mini-avatar{order:2;color:#2e67f3;background:rgba(55,109,255,.10)}.chat-bubble{max-width:78%;padding:9px 15px;border-radius:16px;background:rgba(255,255,255,.65);border:1px solid rgba(108,136,200,.13);font-size:12px;color:#33466f}.chat-line.ai .chat-bubble{background:linear-gradient(110deg,rgba(239,245,255,.9),rgba(243,241,255,.86))}.chat-bubble time{display:block;font-size:10px;color:#8491ae;margin-bottom:3px}.memory-card{height:286px}.settle-card{height:221px}.tag{height:38px;padding:0 18px;border-radius:19px;display:inline-flex;align-items:center;background:rgba(19,184,123,.08);color:#12a66e;border:1px solid rgba(18,177,117,.09);font-size:13px}.tag.violet{background:rgba(133,105,255,.09);color:#7857e9}.tag.blue{background:rgba(48,108,255,.08);color:#2e64ec}.memory-copy{margin-top:14px;padding:18px;border-radius:19px;background:rgba(255,255,255,.58);border:1px solid rgba(110,138,200,.13);font-size:13px;line-height:1.8;color:#354972}.settle-row{height:56px;padding:8px 12px;display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;border-radius:18px;background:rgba(255,255,255,.56);border:1px solid rgba(109,137,202,.12)}.settle-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#5bd3b1,#24ad7f)}.settle-row strong{font-size:13px;color:#2b3e67}.settle-row small{display:block;color:#8190ac;font-size:10px;margin-top:2px}.archive-bottom{min-height:153px}
|
||
.ai-top{display:grid;grid-template-columns:minmax(0,856fr) minmax(0,536fr);gap:14px;min-height:330px;margin-bottom:14px}.ai-bottom{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;min-height:244px;margin-bottom:14px;align-items:start}
|
||
/* 这一排四块内容长短差很多（「发送模式」带一整段说明）。拉伸成等高时，
|
||
最高那块会被按行高摆布、内容顶出框外；按各自内容高度排，底边参差一点，
|
||
但没有一个字会画到框外。 */.ai-profile{display:grid;grid-template-columns:125px 390px 1fr;gap:18px;align-items:center}.ai-ball{width:108px;height:108px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:33px;font-weight:700;background:radial-gradient(circle at 36% 29%,#fff 0 4%,#82e2ff 18%,#4f67ff 48%,#946fff 67%,rgba(72,214,224,.34) 76%);box-shadow:0 0 0 11px rgba(79,119,255,.06),0 17px 32px rgba(82,95,212,.18)}.field{display:grid;gap:7px}.field label{font-size:13px;color:#34476e}.input,.select,.textarea{width:100%;border:1px solid rgba(108,136,201,.16);background:rgba(255,255,255,.63);border-radius:16px;outline:0;padding:10px 14px}.textarea{height:108px;resize:none;font-size:12px;line-height:1.7}.preview-box{height:205px;padding:18px;border-radius:22px;background:linear-gradient(140deg,rgba(255,255,255,.60),rgba(241,239,255,.68));border:1px solid rgba(108,136,201,.14)}.preview-box p{font-size:13px;line-height:1.75;color:#2f416c}.select.model{height:58px;border-radius:19px;color:#334fe9;font-size:18px;font-weight:650;background:linear-gradient(110deg,rgba(248,249,255,.92),rgba(241,238,255,.88));border-color:rgba(85,99,240,.19)}.form-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.form-grid.two{grid-template-columns:1fr 1fr}.range{accent-color:#416fff;width:100%}.knowledge{display:grid;grid-template-columns:180px 1fr;gap:15px;align-items:center}.donut{width:148px;height:148px;border-radius:50%;background:conic-gradient(#5b7bff 0 34%,#55c9ee 34% 61%,#73dfcd 61% 78%,#e7eef8 78%);display:grid;place-items:center;position:relative;box-shadow:0 10px 26px rgba(73,110,196,.08)}.donut:before{content:"";position:absolute;inset:17px;border-radius:50%;background:rgba(255,255,255,.91)}.donut strong{position:relative;font-size:28px;color:#18305f;text-align:center}.donut small{display:block;font-size:10px;color:#7081a6;font-weight:500}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.tool-card{height:145px;border-radius:20px;background:rgba(255,255,255,.57);border:1px solid rgba(110,138,202,.13);display:grid;place-items:center;align-content:center;gap:9px}.tool-icon{width:53px;height:53px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#5ed2b2,#20aa7d);box-shadow:0 7px 16px rgba(29,177,126,.15)}.tool-card:nth-child(2) .tool-icon{background:linear-gradient(145deg,#68bdff,#4169ff)}.tool-card:nth-child(3) .tool-icon{background:linear-gradient(145deg,#ac83ff,#7657e6)}.switch{width:44px;height:25px;border-radius:13px;background:#dfe6f2;position:relative;cursor:pointer;transition:.2s}.switch:after{content:"";position:absolute;width:19px;height:19px;top:3px;left:3px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(43,57,99,.19);transition:.2s}.switch.on{background:linear-gradient(90deg,#27c79a,#11ad73)}.switch.on:after{transform:translateX(19px)}.setting-line{height:51px;padding:0 15px;border-radius:18px;background:rgba(255,255,255,.57);border:1px solid rgba(109,137,201,.12);display:flex;align-items:center;justify-content:space-between;gap:10px}.config-strip{min-height:110px}
|
||
.automation-top{display:grid;grid-template-columns:minmax(0,880fr) minmax(0,499fr);gap:14px;min-height:278px;margin-bottom:14px}.automation-mid{display:grid;grid-template-columns:minmax(0,350fr) minmax(0,361fr) minmax(0,361fr) minmax(0,293fr);gap:14px;min-height:246px;margin-bottom:14px}.auto-flow{height:145px;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;position:relative}.auto-flow:before{content:"";position:absolute;left:7%;right:7%;top:53px;height:3px;background:linear-gradient(90deg,#37b9ff,#776cff,#a06cf1);opacity:.42}.flow-step{position:relative;z-index:1;text-align:center}.flow-circle{width:58px;height:58px;border-radius:50%;margin:0 auto 10px;display:grid;place-items:center;color:#2d65f2;background:rgba(255,255,255,.87);border:1px solid rgba(91,126,214,.17);box-shadow:0 10px 21px rgba(72,94,163,.08)}.flow-step strong{display:block;color:#263960;font-size:14px}.flow-pill{height:44px;border:1px dashed rgba(80,127,229,.25);border-radius:22px;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:10px;color:#52658e;font-size:12px}.wechat-graphic{display:grid;grid-template-columns:166px 1fr;gap:16px;align-items:center}.fake-window{height:152px;border-radius:18px;background:linear-gradient(#83aefa 0 25px,rgba(255,255,255,.78) 25px);border:1px solid rgba(100,138,215,.17);position:relative;overflow:hidden}.fake-window:before{content:"";position:absolute;left:14px;top:41px;width:27px;height:91px;border-radius:8px;background:#5792f2;box-shadow:41px 0 0 #eef2fb,81px 0 0 #f2f4fb}.fake-check{position:absolute;right:9px;bottom:9px;width:43px;height:43px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--green)}.coexist{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.mouse-orb{height:100px;display:flex;align-items:flex-end;justify-content:center;gap:38px}.mouse-pointer{width:67px;height:67px;border-radius:50%;display:grid;place-items:center;font-size:35px;background:radial-gradient(circle at 35% 30%,#fff,#c8d4ff 38%,#7d73ff 70%);box-shadow:0 0 0 8px rgba(82,116,255,.07),0 0 23px rgba(73,99,255,.26)}.risk-tags{display:grid;gap:9px}.risk-tag{height:42px;padding:0 13px;border-radius:16px;background:rgba(247,244,255,.76);border:1px solid rgba(129,104,239,.13);display:flex;align-items:center;gap:9px;color:#7351e4}.check-strip{min-height:130px}
|
||
.logs-grid{display:grid;grid-template-columns:minmax(0,764fr) minmax(0,616fr);grid-auto-rows:minmax(226px,auto);gap:14px;margin-bottom:14px}.event-flow{grid-row:span 2}.event-list{display:grid;gap:0}.event-row{height:59px;display:grid;grid-template-columns:34px 89px 52px 1fr 62px;gap:9px;align-items:center;border-bottom:1px solid rgba(110,136,199,.11)}.event-node{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--green);border:1px solid rgba(93,137,210,.14);box-shadow:0 5px 12px rgba(68,95,162,.07)}.event-row time{color:#68789d}.event-kind{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--green);background:rgba(19,182,119,.09)}.event-copy strong{display:block;color:#22365f;font-size:14px}.event-copy span{font-size:11px;color:#7785a4}.health-rings{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}.health-ring{width:81px;height:81px;border-radius:50%;margin:auto;display:grid;place-items:center;color:var(--green);background:conic-gradient(#4bc7aa 0 84%,#e6eef7 84%);position:relative}.health-ring:before{content:"";position:absolute;inset:9px;border-radius:50%;background:rgba(255,255,255,.94)}.health-ring .ico{position:relative}.health-rings strong{display:block;font-size:12px;color:#263a63;margin-top:7px}.health-rings span{font-size:11px;color:var(--green)}.chain{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;position:relative}.chain:before{content:"";position:absolute;left:11%;right:11%;top:29px;height:3px;background:linear-gradient(90deg,#45d5c2,#6480ff,#a36ff5);opacity:.35}.chain-step{text-align:center;position:relative;z-index:1}.chain-step .flow-circle{width:45px;height:45px;margin-bottom:4px}.chain-step strong{display:block;font-size:11px;color:#2d416a}.chain-step span{font-size:10px;color:#7484a6}.log-mid{display:grid;grid-template-columns:minmax(0,676fr) minmax(0,704fr);gap:14px;min-height:136px;margin-bottom:14px}.exception-grid{display:grid;grid-template-columns:repeat(3,1fr) 150px;gap:10px}.exception{height:75px;padding:12px;border-radius:19px;background:rgba(255,255,255,.58);border:1px solid rgba(110,137,201,.12);display:flex;align-items:center;gap:12px}.exception b{display:block;font-size:20px;color:#17305f}.recent-activity{min-height:139px}
|
||
.system-top,.system-mid{display:grid;grid-template-columns:minmax(0,457fr) minmax(0,457fr) minmax(0,464fr);gap:14px;min-height:354px;margin-bottom:14px}.system-mid{min-height:244px}.system-line{height:48px;padding:0 15px;border-radius:19px;background:rgba(255,255,255,.57);border:1px solid rgba(109,137,201,.12);display:flex;align-items:center;gap:12px}.system-line>span:first-of-type{flex:1}.system-line .ico{color:#3267ed}.storage-grid{display:grid;grid-template-columns:180px 1fr;align-items:center}.storage-actions{display:flex;gap:8px;margin-top:15px}.notice-preview{height:91px;padding:12px;border-radius:18px;background:rgba(255,255,255,.58);border:1px solid rgba(108,137,201,.13);display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center}.maintenance{display:grid;grid-template-columns:1fr 1fr;gap:11px}.maint-card{height:91px;padding:14px;border-radius:19px;background:rgba(255,255,255,.58);border:1px solid rgba(109,137,201,.13);display:flex;align-items:center;gap:13px}.maint-card .metric-icon{width:48px;height:48px}.maint-card strong{display:block;font-size:13px;color:#263a64}.maint-card small{font-size:10px;color:#8190ac}.system-status{min-height:146px}
|
||
.status-cells{display:grid;grid-template-columns:repeat(4,1fr);gap:0}.status-cell{height:74px;display:grid;grid-template-columns:51px 1fr;gap:12px;align-items:center;padding:5px 25px;border-right:1px solid rgba(109,136,199,.13)}.status-cell:last-child{border:0}.status-cell .metric-icon{width:48px;height:48px;color:var(--green)}.status-cell strong{display:block;font-size:13px;color:#253962}.status-cell span{font-size:10px;color:#7988a7}
|
||
.toast{position:absolute;right:32px;bottom:26px;z-index:100;padding:13px 20px;border-radius:18px;background:rgba(30,43,79,.92);color:#fff;box-shadow:0 17px 34px rgba(30,42,79,.24);opacity:0;transform:translateY(15px);transition:.22s;pointer-events:none}.toast.show{opacity:1;transform:none}
|
||
html.embedded .titlebar{display:none}
|
||
html.embedded #stage{
|
||
left:0;top:0;
|
||
width:1630px;height:920px;
|
||
transform:scale(var(--scale,1));
|
||
transform-origin:top left;
|
||
border:none;box-shadow:none;
|
||
}
|
||
html.embedded .workspace{min-height:920px}
|
||
html.embedded .screen{animation:none}
|
||
/* Qt WebEngine can drop an entire composited surface while rebuilding
|
||
several viewport-sized backdrop filters at a fractional DPI scale.
|
||
Keep the exact panel geometry, translucent fill, border and shadow, but
|
||
render the embedded panels on the normal page surface so the rail and
|
||
lower content cannot disappear during navigation or window restore. */
|
||
html.embedded .panel{-webkit-backdrop-filter:none;backdrop-filter:none}
|
||
/* QWebEngine: keep the reference end states, but avoid animating nav
|
||
width/height/margins inside the blurred rail. Those layout transitions
|
||
repeatedly invalidate the rail's backdrop layer during page switches. */
|
||
html.embedded .rail{-webkit-backdrop-filter:none;backdrop-filter:none}
|
||
html.embedded .nav-btn,html.embedded .nav-icon{transition:none}
|
||
html.embedded .nav-btn:hover .nav-icon{transform:none}
|
||
html.embedded body{background:#f4f8ff;overflow:hidden}
|
||
html.embedded .empty-board{height:240px;display:grid;place-items:center;text-align:center;color:var(--muted);padding:24px}
|
||
button:focus,button:focus-visible,.nav-btn:focus,.nav-btn:focus-visible,.system-btn:focus,.btn:focus,.tab:focus,.filter-pill:focus,.icon-btn:focus,.round-btn:focus{
|
||
outline:none !important;
|
||
}
|
||
.led.off,.led.red{background:var(--red);box-shadow:0 0 0 4px rgba(255,83,88,.10)}
|
||
.flow-pill .num,.idle-num,.retain-num,.ai-num{width:54px;border:0;background:transparent;color:#2d65f0;font-weight:700;text-align:center;outline:none}
|
||
.filter-pill input[type=date]{border:0;background:transparent;color:inherit;font:inherit;width:132px}
|
||
.system-line select{border:0;background:transparent;color:#26365F;outline:0;min-width:88px}
|
||
.ai-pane[hidden]{display:none !important}
|
||
.toolbar .icon-btn{width:32px;height:32px;border:0;border-radius:10px;display:grid;place-items:center;cursor:pointer;color:#5c6d94;background:transparent;padding:0}
|
||
.toolbar .icon-btn:hover{background:rgba(80,110,210,.08);color:#2b62f1}
|
||
.select.action{cursor:pointer;text-align:left}
|
||
.automation-top .flow-pill .num{width:34px;padding:0;border:0;background:transparent;color:#2d65f0;font-weight:700;text-align:center;outline:0;appearance:textfield}
|
||
.automation-top .flow-pill.live-flow-pill{gap:5px}.automation-top .flow-pill.live-flow-pill .num{width:25px}
|
||
.automation-top .flow-pill .num::-webkit-inner-spin-button,.automation-top .flow-pill .num::-webkit-outer-spin-button,.automation-mid .idle-num::-webkit-inner-spin-button,.automation-mid .idle-num::-webkit-outer-spin-button,.automation-mid .ai-num::-webkit-inner-spin-button,.automation-mid .ai-num::-webkit-outer-spin-button{appearance:none;margin:0}
|
||
.automation-mid .idle-num{width:38px;padding:0;border:0;background:transparent;color:#2562ed;font-weight:700;text-align:center;outline:0;appearance:textfield}
|
||
.automation-mid .ai-num{width:25px;padding:0;border:0;background:transparent;color:#2d65f0;font-weight:700;text-align:center;outline:0;appearance:textfield}
|
||
.fake-check.off{background:#9aa8c5}
|
||
.health-ring.bad{color:var(--red);background:conic-gradient(#ff7b80 0 84%,#e6eef7 84%)}
|
||
.system-security-state{white-space:nowrap}.system-security-state.on{color:var(--green)}.system-security-state.off{color:var(--red)}
|
||
.system-top .retention-control{height:39px;min-width:99px;padding:0 13px;gap:4px}
|
||
.system-top .retention-control .retain-num{width:32px;padding:0;border:0;background:transparent;text-align:right;outline:0;appearance:textfield}
|
||
.system-top .retention-control .retain-num::-webkit-inner-spin-button,.system-top .retention-control .retain-num::-webkit-outer-spin-button{appearance:none;margin:0}
|
||
.maintenance .maint-card[data-action]{cursor:pointer}
|
||
/* 由后台下发、本机只读的开关：看得见状态，点不动。
|
||
做成禁用样式而不是直接藏起来——藏了的话，人会以为这个能力没有；
|
||
显示成锁定的，才说得清"有这个能力，但不在这儿配"。 */
|
||
.switch.switch-locked{opacity:.55;cursor:not-allowed;pointer-events:none}
|
||
|
||
/* 审核模式的说明条：告诉人现在为什么没自动发出去，以及怎么放行 */
|
||
.review-hint{margin-top:10px;display:flex;align-items:flex-start;gap:8px;
|
||
padding:10px 12px;border-radius:10px;line-height:1.6;font-size:12.5px;
|
||
color:#8a5a10;background:rgba(255,166,42,.09);border:1px solid rgba(255,166,42,.24)}
|
||
.review-hint svg{flex:none;width:15px;height:15px;margin-top:2px}
|
||
.review-hint b{color:#6f4708}
|
||
|
||
/* ── 面板收口 ─────────────────────────────────────────────────────
|
||
舞台是写死的 1630×965 再整体缩放，所以每块面板的高度也都是写死的。
|
||
写死高度本身没问题，问题是没有一处做收口：面板里一旦装进比设计稿更多
|
||
的真实数据（8 个会话、16 条消息、更长的知识库卡片），多出来的部分不会
|
||
被裁掉，而是原样画到下面那块面板身上——看上去就是"布局全乱了"。
|
||
这里统一兜住：固定高度的容器自己裁剪，真正会变长的那几块改成内部滚动。 */
|
||
.queue-view-grid>*,.archive-grid>*,.ai-top>*,.ai-bottom>*,
|
||
.automation-top>*,.automation-mid>*,.log-mid>*,.system-mid>*,
|
||
.system-top>*,.logs-grid>*,.ai-grid>*{min-height:0}
|
||
|
||
/* 兜底：任何固定高度的面板都不许把内容画到外面 */
|
||
.ai-top>.panel,.ai-bottom>.panel,.automation-top>.panel,
|
||
.automation-mid>.panel,.log-mid>.panel,.system-mid>.panel,
|
||
.system-top>.panel,.logs-grid>.panel,.queue-view-grid>.panel,
|
||
.archive-grid>.panel{overflow:visible}
|
||
|
||
/* 列表型面板：标题和页脚钉住，中间那段自己滚 */
|
||
.archive-grid>.panel,.queue-view-grid>.panel,
|
||
.logs-grid>.panel.event-flow,.memory-card,.settle-card{
|
||
display:flex;flex-direction:column;overflow:visible}
|
||
.archive-grid>.panel>*,.queue-view-grid>.panel>*,
|
||
.logs-grid>.panel.event-flow>*,.memory-card>*,.settle-card>*{flex:0 0 auto}
|
||
.archive-grid>.panel>.queue-list,
|
||
.archive-grid>.panel>.chat,
|
||
.queue-view-grid>.panel>.queue-list,
|
||
.queue-view-grid>.panel>.stack,
|
||
.logs-grid>.panel.event-flow>.event-list,
|
||
.memory-card>.memory-copy,
|
||
.settle-card>.stack{flex:1 1 auto;min-height:0;overflow:visible}
|
||
|
||
/* 活动条：设计稿按 4 张卡排的，真实数据来 6 条就换行、把面板顶穿。
|
||
改成永远一行，多的横向滚——面板高度是写死的，换行必然溢出。 */
|
||
.activity-panel,.archive-bottom{display:flex;flex-direction:column;overflow:visible;
|
||
padding:12px 20px 10px}
|
||
.activity-panel>.panel-title,.archive-bottom>.panel-title{flex:0 0 auto}
|
||
.activity-panel>.activity-strip,.archive-bottom>.activity-strip{
|
||
flex:1 1 auto;min-height:0;
|
||
grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:278px;
|
||
align-content:start;overflow:visible}
|
||
|
||
/* 底部状态条：4 个 74px 的格子塞进 108px 的面板，差 23px。
|
||
压缩这条的内边距和标题间距把它让出来，不动格子本身的尺寸。 */
|
||
.config-strip,.check-strip,.system-status{padding:8px 21px 10px}
|
||
.config-strip>.panel-title,.check-strip>.panel-title,
|
||
.system-status>.panel-title{margin-bottom:4px}
|
||
.config-strip,.check-strip,.system-status{overflow:visible}
|
||
|
||
|
||
|
||
/* 按钮"处理中"态：点下去必须看得出来收到了。
|
||
没有这个的话，慢一点的保存就是一片安静，人只会以为按钮坏了、反复点。 */
|
||
.btn.is-busy{opacity:.72;cursor:progress;pointer-events:none}
|
||
.btn.is-busy .ico{animation:spin .9s linear infinite;transform-origin:50% 50%}
|
||
@keyframes spin{to{transform:rotate(360deg)}}
|
||
|
||
/* 数值文字按 1.05 行高排版，下缘会被裁掉一点 */
|
||
.metric-copy{min-height:0}
|
||
.metric-copy strong{line-height:1.18}
|
||
|
||
/* ── 可输入的地方要看得出来能输入 ───────────────────────────────
|
||
这几个数字原来是 border:0;background:transparent;outline:none——跟旁边
|
||
的粗体蓝字长得一模一样。没人知道它能改，点进去也没有任何反馈，改完更
|
||
不知道有没有生效。统一给一层轻量的"可编辑"外观：静止时一圈浅边框暗示
|
||
可改，悬停浮起底色，聚焦亮出蓝色光环。 */
|
||
.flow-pill .num,.idle-num,.retain-num,.ai-num,
|
||
.automation-top .flow-pill .num,.automation-mid .idle-num,
|
||
.automation-mid .ai-num,.system-top .retention-control .retain-num{
|
||
box-sizing:border-box;appearance:textfield;
|
||
height:30px;padding:0 8px;margin:0 3px;
|
||
border:1px solid rgba(90,126,214,.26);border-radius:10px;
|
||
background:rgba(255,255,255,.92);
|
||
box-shadow:inset 0 1px 2px rgba(76,102,168,.07);
|
||
color:#2d65f0;font-weight:700;text-align:center;cursor:text;
|
||
transition:border-color .16s,box-shadow .16s,background .16s}
|
||
/* 实时版把这几个框压到了 25px：套上边框和内边距后只剩 7px 放数字，
|
||
"300" 根本显示不全。按框的实际用途给回够用的宽度。 */
|
||
.automation-top .flow-pill .num,
|
||
.automation-top .flow-pill.live-flow-pill .num{width:62px}
|
||
.automation-mid .idle-num{width:60px}
|
||
.automation-mid .ai-num{width:50px}
|
||
.system-top .retention-control .retain-num{width:58px;text-align:center}
|
||
.ai-num.select,.select.ai-num{width:auto;min-width:96px}
|
||
|
||
/* 悬停 / 聚焦。这里必须写全限定选择器：上面那几条内联数字框的规则用了
|
||
三层类名，权重比 `.screen input:focus` 高，简写会被它们直接压掉——表现
|
||
就是点进去毫无反应，跟没做一样。 */
|
||
.flow-pill .num:hover,.idle-num:hover,.retain-num:hover,.ai-num:hover,
|
||
.automation-top .flow-pill .num:hover,
|
||
.automation-top .flow-pill.live-flow-pill .num:hover,
|
||
.automation-mid .idle-num:hover,.automation-mid .ai-num:hover,
|
||
.system-top .retention-control .retain-num:hover,
|
||
.input:hover,.select:hover,.textarea:hover,.system-line select:hover{
|
||
border-color:rgba(75,123,245,.5);background:#fff}
|
||
|
||
/* 聚焦：所有可输入控件统一的蓝色光环。原来一律 outline:0 又没给替代，
|
||
用键盘 Tab 过去时完全看不出焦点落在哪一格。 */
|
||
.screen input:focus,.screen select:focus,.screen textarea:focus,
|
||
.flow-pill .num:focus,.idle-num:focus,.retain-num:focus,.ai-num:focus,
|
||
.automation-top .flow-pill .num:focus,
|
||
.automation-top .flow-pill.live-flow-pill .num:focus,
|
||
.automation-mid .idle-num:focus,.automation-mid .ai-num:focus,
|
||
.system-top .retention-control .retain-num:focus{
|
||
border-color:#4b7bf5;background:#fff;
|
||
box-shadow:0 0 0 3px rgba(75,123,245,.2)}
|
||
.search:focus-within{border-color:#4b7bf5;
|
||
box-shadow:0 0 0 3px rgba(75,123,245,.15)}
|
||
|
||
/* 系统设置里两个下拉是裸 select，用的浏览器默认样式，和整体完全不搭 */
|
||
.system-line select{margin-left:auto;min-width:132px;height:34px;
|
||
padding:0 12px;border-radius:14px;cursor:pointer;
|
||
border:1px solid rgba(108,136,201,.22);
|
||
background:rgba(255,255,255,.78);color:#34476e;
|
||
transition:border-color .16s,box-shadow .16s,background .16s}
|
||
|
||
/* 只读的地方要看得出来"不能改"，别让人白点 */
|
||
.textarea[readonly],.input[readonly]{
|
||
background:rgba(242,246,253,.86);color:#5c6c8e;cursor:default;
|
||
box-shadow:none}
|
||
.textarea[readonly]:hover,.input[readonly]:hover{
|
||
border-color:rgba(108,136,201,.16)}
|
||
|
||
/* 下拉一律手型：它是"点开选"，不是"打字填" */
|
||
.screen select,.select{cursor:pointer}
|
||
/* 滑块也要有手感 */
|
||
.range{cursor:pointer}
|
||
|
||
/* 细滚动条，不破坏观感 */
|
||
.screen ::-webkit-scrollbar{width:6px;height:6px}
|
||
.screen ::-webkit-scrollbar-track{background:transparent}
|
||
.screen ::-webkit-scrollbar-thumb{background:rgba(109,137,201,.26);border-radius:3px}
|
||
.screen ::-webkit-scrollbar-thumb:hover{background:rgba(109,137,201,.44)}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<svg class="sprite" aria-hidden="true">
|
||
<symbol id="i-activity" viewBox="0 0 24 24"><path d="M3 12h4l2.2-6 4.3 12 2.1-6H21"/></symbol>
|
||
<symbol id="i-bot" viewBox="0 0 24 24"><rect x="4" y="7" width="16" height="13" rx="4"/><path d="M12 3v4M8 12h.01M16 12h.01M8 16h8"/></symbol>
|
||
<symbol id="i-list" viewBox="0 0 24 24"><path d="M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01"/></symbol>
|
||
<symbol id="i-folder" viewBox="0 0 24 24"><path d="M3 7a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/></symbol>
|
||
<symbol id="i-brain" viewBox="0 0 24 24"><path d="M9 4a3 3 0 0 0-5 2v2a3 3 0 0 0 0 5v2a3 3 0 0 0 5 3M15 4a3 3 0 0 1 5 2v2a3 3 0 0 1 0 5v2a3 3 0 0 1-5 3M9 4v16M15 4v16M9 9h3M12 15h3"/></symbol>
|
||
<symbol id="i-settings" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19 14.5l1.4 1.1-2 3.4-1.7-.7a7 7 0 0 1-2.1 1.2l-.2 1.8h-4l-.2-1.8A7 7 0 0 1 8 18.3l-1.7.7-2-3.4 1.4-1.1A7 7 0 0 1 5.6 12a7 7 0 0 1 .1-2.5L4.3 8.4l2-3.4 1.7.7a7 7 0 0 1 2.1-1.2l.2-1.8h4l.2 1.8a7 7 0 0 1 2.1 1.2l1.7-.7 2 3.4-1.4 1.1A7 7 0 0 1 19 12a7 7 0 0 1 0 2.5Z"/></symbol>
|
||
<symbol id="i-log" viewBox="0 0 24 24"><path d="M6 3h12a2 2 0 0 1 2 2v16l-4-2-4 2-4-2-4 2V5a2 2 0 0 1 2-2Z"/><path d="M8 8h8M8 12h8M8 16h5"/></symbol>
|
||
<symbol id="i-check" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="m8 12 2.5 2.5L16.5 9"/></symbol>
|
||
<symbol id="i-send" viewBox="0 0 24 24"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></symbol>
|
||
<symbol id="i-users" viewBox="0 0 24 24"><circle cx="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0M16 5a4 4 0 0 1 0 7M18 15a6 6 0 0 1 4 6"/></symbol>
|
||
<symbol id="i-user" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></symbol>
|
||
<symbol id="i-message" viewBox="0 0 24 24"><path d="M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4Z"/><path d="M8 10h.01M12 10h.01M16 10h.01"/></symbol>
|
||
<symbol id="i-alert" viewBox="0 0 24 24"><path d="M12 3 2 21h20ZM12 9v5M12 18h.01"/></symbol>
|
||
<symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/></symbol>
|
||
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></symbol>
|
||
<symbol id="i-refresh" viewBox="0 0 24 24"><path d="M20 7h-6V1M4 17h6v6"/><path d="M6.5 6.5A8 8 0 0 1 20 7M4 17a8 8 0 0 0 13.5.5"/></symbol>
|
||
<symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol>
|
||
<symbol id="i-filter" viewBox="0 0 24 24"><path d="M4 5h16l-6 7v5l-4 2v-7Z"/></symbol>
|
||
<symbol id="i-sort" viewBox="0 0 24 24"><path d="M8 5v14m0 0-3-3m3 3 3-3M16 19V5m0 0-3 3m3-3 3 3"/></symbol>
|
||
<symbol id="i-stop" viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" rx="2"/></symbol>
|
||
<symbol id="i-monitor" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></symbol>
|
||
<symbol id="i-eye" viewBox="0 0 24 24"><path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z"/><circle cx="12" cy="12" r="2.5"/></symbol>
|
||
<symbol id="i-copy" viewBox="0 0 24 24"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3"/></symbol>
|
||
<symbol id="i-save" viewBox="0 0 24 24"><path d="M5 3h12l2 2v16H5Z"/><path d="M8 3v6h8V3M8 21v-7h8v7"/></symbol>
|
||
<symbol id="i-download" viewBox="0 0 24 24"><path d="M12 3v12m0 0 4-4m-4 4-4-4M4 21h16"/></symbol>
|
||
<symbol id="i-power" viewBox="0 0 24 24"><path d="M12 2v10M6.3 5.7a8 8 0 1 0 11.4 0"/></symbol>
|
||
<symbol id="i-lock" viewBox="0 0 24 24"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></symbol>
|
||
<symbol id="i-cloud" viewBox="0 0 24 24"><path d="M6 19a4 4 0 0 1-.4-8A7 7 0 0 1 19 9a5 5 0 0 1-1 10Z"/></symbol>
|
||
<symbol id="i-sparkles" viewBox="0 0 24 24"><path d="m12 3 1.4 3.6L17 8l-3.6 1.4L12 13l-1.4-3.6L7 8l3.6-1.4ZM18.5 14l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8ZM5 14l.7 1.8 1.8.7-1.8.7L5 19l-.7-1.8-1.8-.7 1.8-.7Z"/></symbol>
|
||
<symbol id="i-flag" viewBox="0 0 24 24"><path d="M5 21V4m0 0c5-3 8 3 14 0v10c-6 3-9-3-14 0"/></symbol>
|
||
<symbol id="i-calendar" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 10h18"/></symbol>
|
||
<symbol id="i-clipboard" viewBox="0 0 24 24"><rect x="5" y="4" width="14" height="17" rx="2"/><path d="M9 4V2h6v2M8 9h8M8 13h8M8 17h5"/></symbol>
|
||
<symbol id="i-phone" viewBox="0 0 24 24"><path d="M5 3h4l2 5-3 2a15 15 0 0 0 6 6l2-3 5 2v4a2 2 0 0 1-2 2C10 21 3 14 3 5a2 2 0 0 1 2-2Z"/></symbol>
|
||
<symbol id="i-pill" viewBox="0 0 24 24"><path d="m8 16 8-8a4 4 0 0 1 6 6l-8 8a4 4 0 0 1-6-6Z"/><path d="m12 12 4 4"/></symbol>
|
||
<symbol id="i-coins" viewBox="0 0 24 24"><ellipse cx="12" cy="6" rx="7" ry="3"/><path d="M5 6v5c0 1.7 3.1 3 7 3s7-1.3 7-3V6M5 11v5c0 1.7 3.1 3 7 3s7-1.3 7-3v-5"/></symbol>
|
||
<symbol id="i-layers" viewBox="0 0 24 24"><path d="m12 3-9 5 9 5 9-5Z"/><path d="m3 12 9 5 9-5M3 16l9 5 9-5"/></symbol>
|
||
<symbol id="i-hourglass" viewBox="0 0 24 24"><path d="M6 2h12M6 22h12M8 2v5l4 5-4 5v5M16 2v5l-4 5 4 5v5"/></symbol>
|
||
<symbol id="i-globe" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></symbol>
|
||
<symbol id="i-tray" viewBox="0 0 24 24"><path d="M4 4h16l1 7v9H3v-9Z"/><path d="M3 12h5l2 3h4l2-3h5"/></symbol>
|
||
<symbol id="i-wifi" viewBox="0 0 24 24"><path d="M4 9a12 12 0 0 1 16 0M7 13a8 8 0 0 1 10 0M10 17a3 3 0 0 1 4 0M12 21h.01"/></symbol>
|
||
<symbol id="i-bell" viewBox="0 0 24 24"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9ZM10 21h4"/></symbol>
|
||
<symbol id="i-upload" viewBox="0 0 24 24"><path d="M12 16V4m0 0-4 4m4-4 4 4M4 20h16"/></symbol>
|
||
<symbol id="i-link" viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-2 2M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l2-2"/></symbol>
|
||
<symbol id="i-package" viewBox="0 0 24 24"><path d="m12 3 9 5-9 5-9-5Z"/><path d="m3 8 9 5 9-5v9l-9 5-9-5Z"/><path d="M12 13v9"/></symbol>
|
||
<symbol id="i-scan" viewBox="0 0 24 24"><path d="M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5"/><path d="M8 12h8"/></symbol>
|
||
<symbol id="i-play" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="m10 8 6 4-6 4Z"/></symbol>
|
||
<symbol id="i-chevron" viewBox="0 0 24 24"><path d="m8 10 4 4 4-4"/></symbol>
|
||
<symbol id="i-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></symbol>
|
||
<symbol id="i-cursor" viewBox="0 0 24 24"><path d="m5 3 14 10-7 1-4 6Z"/></symbol>
|
||
<symbol id="i-pause" viewBox="0 0 24 24"><path d="M9 6v12M15 6v12"/></symbol>
|
||
</svg>
|
||
<div id="stage">
|
||
<header class="titlebar"><div class="title-logo">甄</div><strong>甄养堂 · 企业微信 AI 自动回复 v2.0</strong><div class="window-actions"><span>—</span><span>□</span><span>×</span></div></header>
|
||
<div class="workspace">
|
||
<aside class="rail">
|
||
<div class="brand-logo">甄</div>
|
||
<nav class="nav" aria-label="主菜单">
|
||
<button class="nav-btn active" data-view="auto"><span class="nav-icon"><svg class="ico"><use href="#i-bot"/></svg></span><span>自动回复</span></button>
|
||
<button class="nav-btn" data-view="queue"><span class="nav-icon"><svg class="ico"><use href="#i-list"/></svg></span><span>任务队列</span></button>
|
||
<button class="nav-btn" data-view="archive"><span class="nav-icon"><svg class="ico"><use href="#i-folder"/></svg></span><span>会话归档</span></button>
|
||
<button class="nav-btn" data-view="ai"><span class="nav-icon"><svg class="ico"><use href="#i-brain"/></svg></span><span>AI 设置</span></button>
|
||
<button class="nav-btn" data-view="automation"><span class="nav-icon"><svg class="ico"><use href="#i-settings"/></svg></span><span>自动化设置</span></button>
|
||
<button class="nav-btn" data-view="logs"><span class="nav-icon"><svg class="ico"><use href="#i-log"/></svg></span><span>运行日志</span></button>
|
||
</nav>
|
||
<div class="listener" id="listener" data-action="toggle-listen" role="button" tabindex="0" title="点击开始监听"><div class="orb paused" id="orb"></div><span id="orb-label">已停止</span></div>
|
||
<button class="system-btn" data-view="system" aria-label="系统设置"><svg class="ico"><use href="#i-settings"/></svg></button>
|
||
</aside>
|
||
<main class="main" id="main"></main>
|
||
</div>
|
||
<div class="toast" id="toast">操作已完成</div>
|
||
</div>
|
||
<script src="qrc:///qtwebchannel/qwebchannel.js"></script>
|
||
<script src="console-app.js?v=src1"></script>
|
||
</body>
|
||
</html>
|