howard
/
Agent


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395
							<!doctype html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1"
    />
    <title>mode_workflow · 解构工作台</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <link
      rel="preconnect"
      href="https://fonts.googleapis.com"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;900&family=Noto+Sans+SC:wght@400;500;700&family=IBM+Plex+Mono:wght@500;700&display=swap"
      rel="stylesheet"
    />
    <style>
      /* ── 主题:净白工作台 + 墨蓝/朱砂点缀 ─────────────────────────────────────── */
      :root {
        --bg: #f4f4f1;
        --card: #ffffff;
        --ink: #1c2433;
        --ink-soft: #5a6577;
        --ink-faint: #9aa3b0;
        --line: #e8e6e0;
        --line-dark: #d4d1c8;
        --navy: #1e3a5f;
        --navy-deep: #13243a; /* 需求区 / 品牌 */
        --blue: #2563eb;
        --blue-bg: #eef3fe; /* 评分/交互强调 */
        --amber: #b45309;
        --amber-bg: #fff7e8; /* 输入区 */
        --teal: #0f6b5c;
        --teal-bg: #eef8f3; /* 实现区 */
        --green: #15803d;
        --green-bg: #effaf1; /* 输出区 / 采纳 */
        --seal: #bb3a22; /* 朱砂印 */
        --infer: #fdf0d2;
        --infer-edge: #d97706;
        --shadow: 0 1px 2px rgba(20, 30, 46, 0.04), 0 8px 24px -12px rgba(20, 30, 46, 0.12);
        --shadow-lg: 0 4px 10px rgba(20, 30, 46, 0.06), 0 24px 60px -20px rgba(20, 30, 46, 0.25);
      }
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        font-size: 14px;
      }
      body {
        font-family: "Noto Sans SC", sans-serif;
        color: var(--ink);
        background: var(--bg);
        background-image: radial-gradient(900px 360px at 90% -8%, rgba(37, 99, 235, 0.045), transparent 60%);
        min-height: 100vh;
      }
      .num {
        font-family: "IBM Plex Mono", monospace;
      }
      h1,
      h2,
      .serif {
        font-family: "Noto Serif SC", serif;
      }
      a {
        color: var(--blue);
      }
      button {
        font-family: inherit;
        cursor: pointer;
      }

      /* ── 顶部 ── */
      header {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 0 30px;
        height: 60px;
        background: linear-gradient(135deg, #13243a, #1c3552);
        color: #eef2f8;
        position: sticky;
        top: 0;
        z-index: 40;
        box-shadow: 0 2px 14px rgba(19, 36, 58, 0.28);
      }
      .logo {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .logo .seal {
        width: 33px;
        height: 33px;
        background: var(--seal);
        color: #fff;
        display: grid;
        place-items: center;
        font-family: "Noto Serif SC", serif;
        font-weight: 900;
        font-size: 17px;
        border-radius: 7px;
        box-shadow:
          inset 0 0 0 2px rgba(255, 255, 255, 0.22),
          0 3px 8px rgba(187, 58, 34, 0.35);
        transform: rotate(-4deg);
      }
      .logo b {
        font-family: "Noto Serif SC", serif;
        font-weight: 900;
        font-size: 16px;
        letter-spacing: 1px;
      }
      .logo small {
        display: block;
        font-size: 10px;
        color: #93a7c0;
        letter-spacing: 3px;
      }
      nav {
        display: flex;
        gap: 6px;
        margin-left: 26px;
      }
      nav a {
        display: flex;
        align-items: center;
        padding: 7px 18px;
        color: #a8b9cd;
        text-decoration: none;
        font-weight: 500;
        letter-spacing: 0.5px;
        border-radius: 99px;
        transition: 0.15s;
        font-size: 13px;
      }
      nav a:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.07);
      }
      nav a.on {
        color: #fff;
        background: rgba(255, 255, 255, 0.13);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
      }
      header .spacer {
        flex: 1;
      }
      header .hint {
        font-size: 11px;
        color: #6e83a0;
        letter-spacing: 2px;
      }

      main {
        display: none;
        padding: 24px 30px 80px;
        max-width: 1920px;
        margin: 0 auto;
      }
      main.on {
        display: block;
      }
      /* 数据集视图:整体定高占满视口,左侧列表与右侧解构各自独立滚动 */
      #view-dataset {
        padding-bottom: 20px;
      }
      #view-dataset.on {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 60px);
        overflow: hidden;
      }
      /* 聚类库:内嵌知识检索页,占满视口、无内边距 */
      #view-cluster {
        padding: 0;
        max-width: none;
      }
      #view-cluster.on {
        display: flex;
      }
      #cluster-frame {
        border: 0;
        width: 100%;
        height: calc(100vh - 60px);
        display: block;
      }

      /* ── 通用卡片/标签/按钮 ── */
      .card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: var(--shadow);
      }
      .pill {
        display: inline-block;
        padding: 1px 9px;
        border-radius: 99px;
        font-size: 11px;
        font-weight: 500;
        border: 1px solid var(--line-dark);
        background: #f7f6f2;
        color: var(--ink-soft);
        white-space: nowrap;
      }
      .pill.navy {
        background: #e8eef6;
        border-color: #bccbde;
        color: var(--navy);
      }
      .pill.amber {
        background: var(--amber-bg);
        border-color: #ecc88a;
        color: var(--amber);
      }
      .pill.teal {
        background: var(--teal-bg);
        border-color: #a9d6c8;
        color: var(--teal);
      }
      .pill.red {
        background: #fbeae5;
        border-color: #e4ab9c;
        color: var(--seal);
      }
      .pill.green {
        background: var(--green-bg);
        border-color: #a7d9b4;
        color: var(--green);
      }
      .btn {
        border: 1px solid var(--line-dark);
        background: var(--card);
        color: var(--ink);
        padding: 6px 14px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        transition: 0.15s;
      }
      .btn:hover {
        border-color: var(--blue);
        color: var(--blue);
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
      }
      .btn.primary {
        background: var(--blue);
        border-color: var(--blue);
        color: #fff;
      }
      .btn.primary:hover {
        background: #1d4fc4;
        color: #fff;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
      }
      .btn.seal {
        background: var(--seal);
        border-color: var(--seal);
        color: #fff;
      }
      .btn.seal:hover {
        background: #a02f1a;
        color: #fff;
        box-shadow: 0 4px 12px rgba(187, 58, 34, 0.3);
      }
      .btn.sm {
        padding: 3px 11px;
        font-size: 12px;
      }
      .btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        box-shadow: none;
      }
      select,
      input[type="text"],
      input[type="number"] {
        font-family: inherit;
        font-size: 13px;
        padding: 6px 10px;
        border: 1px solid var(--line-dark);
        border-radius: 8px;
        background: #fff;
        color: var(--ink);
        outline: none;
        transition: 0.15s;
      }
      select:focus,
      input:focus {
        border-color: var(--blue);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
      }
      .empty {
        text-align: center;
        color: var(--ink-faint);
        padding: 48px 20px;
        font-size: 13px;
        line-height: 2;
      }
      .empty .glyph {
        font-family: "Noto Serif SC", serif;
        font-size: 42px;
        color: var(--line-dark);
        display: block;
      }

      /* ── Dashboard ── */
      .dash-section {
        margin-bottom: 14px;
        display: flex;
        align-items: baseline;
        gap: 10px;
      }
      .dash-section h2 {
        font-size: 16px;
        font-weight: 900;
        letter-spacing: 2px;
      }
      .dash-section .rule {
        flex: 1;
        border-top: 1px dashed var(--line-dark);
      }
      .dash-section .tag {
        font-size: 10px;
        letter-spacing: 2px;
        color: var(--ink-faint);
      }
      .cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 14px;
        margin-bottom: 26px;
      }
      .stat {
        padding: 16px 18px 14px;
        position: relative;
        overflow: hidden;
      }
      .stat::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--navy);
      }
      .stat.a::after {
        background: var(--amber);
      }
      .stat.t::after {
        background: var(--teal);
      }
      .stat.r::after {
        background: var(--seal);
      }
      .stat .lbl {
        font-size: 11px;
        letter-spacing: 2px;
        color: var(--ink-soft);
        margin-bottom: 8px;
      }
      .stat .val {
        font-size: 30px;
        font-weight: 700;
        line-height: 1;
      }
      .stat .sub {
        font-size: 11px;
        color: var(--ink-faint);
        margin-top: 7px;
      }
      .stat .sub.plat-break {
        margin-top: 5px;
        color: var(--ink-soft);
        font-weight: 600;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 12px;
      }
      .stat .sub.plat-break .pb-item {
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }
      .stat .sub.plat-break .pb-item b {
        font-size: 12px;
        color: var(--ink);
      }
      .ring-row {
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .ring {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        flex: none;
        background: conic-gradient(var(--teal) calc(var(--p) * 1%), #e9e7e0 0);
      }
      .ring > div {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--card);
        display: grid;
        place-items: center;
        font-size: 12px;
        font-weight: 700;
      }
      .charts {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 16px;
      }
      .chart-card {
        padding: 14px 16px 8px;
      }
      .chart-card h3 {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1px;
        color: var(--ink-soft);
        margin-bottom: 4px;
        display: flex;
        align-items: baseline;
        gap: 8px;
      }
      .chart-card h3 .num {
        color: var(--seal);
        font-size: 12px;
      }
      .chart {
        width: 100%;
      }
      .span12 {
        grid-column: span 12;
      }
      .span6 {
        grid-column: span 6;
      }
      .span4 {
        grid-column: span 4;
      }
      @media (max-width: 1100px) {
        .span6,
        .span4 {
          grid-column: span 12;
        }
      }

      /* ── Dataset 三栏 ── */
      .ds-top {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
      }
      .mode-switch {
        display: flex;
        border: 1px solid var(--line-dark);
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
      }
      .mode-switch button {
        border: 0;
        background: transparent;
        padding: 7px 24px;
        font-size: 13px;
        font-weight: 700;
        color: var(--ink-soft);
        transition: 0.15s;
      }
      .mode-switch button.on {
        background: var(--navy);
        color: #fff;
      }
      .ds-grid {
        display: grid;
        grid-template-columns: 235px 350px minmax(0, 1fr);
        gap: 16px;
        align-items: stretch;
        flex: 1;
        min-height: 0;
      }
      @media (max-width: 1280px) {
        .ds-grid {
          grid-template-columns: 200px 320px minmax(0, 1fr);
        }
      }
      /* 每一列卡片纵向铺满网格高度,内部滚动区独立滚动 */
      .ds-grid > .card {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
      }
      .col-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 11px 14px;
        border-bottom: 1px solid var(--line);
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 1px;
      }
      .col-head .n {
        font-size: 11px;
        color: var(--ink-faint);
        font-weight: 500;
      }

      .qlist {
        flex: 1;
        min-height: 0;
        overflow: auto;
      }
      .qitem {
        padding: 12px 14px;
        border-bottom: 1px solid var(--line);
        cursor: pointer;
        transition: 0.12s;
      }
      .qitem:hover {
        background: #f8f8f4;
      }
      .qitem.on {
        background: var(--blue-bg);
        box-shadow: inset 3px 0 0 var(--blue);
      }
      .qitem .qid {
        font-size: 10px;
        letter-spacing: 1px;
        color: var(--ink-faint);
        display: flex;
        gap: 6px;
        align-items: center;
      }
      .qitem .qt {
        font-weight: 500;
        margin: 4px 0 7px;
        line-height: 1.45;
      }
      .qitem .qm {
        font-size: 11px;
        color: var(--ink-soft);
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
      }
      .qitem .qm b.hit {
        color: var(--blue);
        font-size: 13px;
      }

      /* 渠道 tab */
      .plat-tabs {
        display: flex;
        gap: 4px;
        padding: 8px 10px;
        border-bottom: 1px solid var(--line);
        overflow-x: auto;
        background: #fbfbf8;
        border-radius: 0;
      }
      .plat-tabs button {
        border: 1px solid transparent;
        background: transparent;
        color: var(--ink-soft);
        padding: 3px 11px;
        border-radius: 99px;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        transition: 0.15s;
      }
      .plat-tabs button:hover {
        background: #efeee8;
        color: var(--ink);
      }
      .plat-tabs button.on {
        background: var(--navy);
        color: #fff;
        font-weight: 700;
      }
      .plat-tabs button .c {
        font-size: 10px;
        opacity: 0.75;
        margin-left: 3px;
      }
      /* 已解构筛选按钮:靠右,激活态用 teal 呼应「已解构」 */
      .plat-tabs .done-filter {
        margin-left: auto;
        flex: none;
        border: 1px solid var(--line);
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--ink-soft);
      }
      .plat-tabs .done-filter:hover {
        background: #efeee8;
        color: var(--ink);
      }
      .plat-tabs .done-filter.on {
        background: var(--teal-bg, #e3f1ec);
        border-color: #a9d6c8;
        color: var(--teal);
        font-weight: 700;
      }
      .plat-tabs .done-filter .dot {
        font-size: 8px;
      }

      .plist {
        flex: 1;
        min-height: 0;
        overflow: auto;
      }
      .post {
        padding: 12px 13px;
        border-bottom: 1px solid var(--line);
        cursor: pointer;
        display: flex;
        gap: 10px;
        transition: 0.12s;
        align-items: flex-start;
      }
      .post:hover {
        background: #f8f8f4;
      }
      .post.on {
        background: var(--blue-bg);
        box-shadow: inset 3px 0 0 var(--blue);
      }
      .post input {
        margin-top: 4px;
        accent-color: var(--blue);
      }
      .post .pt {
        font-weight: 500;
        line-height: 1.45;
        font-size: 13px;
      }
      .post .pm {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 7px;
        align-items: center;
      }
      .plat {
        display: inline-block;
        padding: 1px 7px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 700;
        color: #fff;
      }
      .plat.xhs {
        background: #d63a2f;
      }
      .plat.gzh {
        background: #2e9939;
      }
      .plat.zhihu {
        background: #1772f6;
      }
      .plat.douyin {
        background: #170b1a;
      }
      .plat.sph {
        background: #fa6d20;
      }
      .plat.youtube {
        background: #c00;
      }
      .plat.x {
        background: #15202b;
      }
      .plat.other {
        background: #777;
      }
      .plat-logo {
        display: inline-flex;
        line-height: 0;
        flex: none;
      }
      .plat-logo svg,
      .plat-logo img {
        display: block;
      }
      .done-dot {
        font-size: 10px;
        color: var(--teal);
        font-weight: 700;
      }

      /* 评分徽章:大、亮、可点 */
      .score-badge {
        flex: none;
        position: relative;
        font-family: "IBM Plex Mono", monospace;
        font-weight: 700;
        font-size: 16.5px;
        line-height: 1;
        padding: 8px 10px;
        border-radius: 9px;
        cursor: pointer;
        transition: 0.15s;
        align-self: center;
        border: 1px solid transparent;
      }
      .score-badge.s9 {
        color: #fff;
        background: linear-gradient(135deg, #16a34a, #15803d);
        box-shadow: 0 3px 10px rgba(22, 163, 74, 0.35);
      }
      .score-badge.s8 {
        color: #fff;
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
      }
      .score-badge.s6 {
        color: #fff;
        background: linear-gradient(135deg, #f59e0b, #d97706);
        box-shadow: 0 3px 10px rgba(217, 119, 6, 0.32);
      }
      .score-badge.s0 {
        color: var(--ink-soft);
        background: #eceae4;
        border-color: var(--line-dark);
      }
      .score-badge:hover {
        transform: translateY(-2px) scale(1.06);
      }
      .score-badge::after {
        content: "查看详情";
        position: absolute;
        left: 50%;
        bottom: calc(100% + 6px);
        transform: translateX(-50%) scale(0.92);
        background: var(--ink);
        color: #fff;
        font-family: "Noto Sans SC", sans-serif;
        font-size: 10px;
        font-weight: 500;
        padding: 3px 8px;
        border-radius: 5px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: 0.15s;
        z-index: 5;
      }
      .score-badge:hover::after {
        opacity: 1;
        transform: translateX(-50%) scale(1);
      }

      .xp {
        min-height: 60vh;
      }
      .xp-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--line);
        flex-wrap: wrap;
      }
      .xp-head .st {
        font-family: "Noto Serif SC", serif;
        font-weight: 900;
        font-size: 15px;
      }
      .xp-head .st em {
        color: var(--seal);
        font-style: normal;
      }
      .xp-head .spacer {
        flex: 1;
      }
      .xp-body {
        padding: 16px;
        flex: 1;
        min-height: 0;
        overflow: auto;
      }

      /* 工序卡 */
      .proc {
        border: 1px solid var(--line);
        border-radius: 10px;
        margin-bottom: 22px;
        overflow: hidden;
        background: #fff;
        box-shadow: var(--shadow);
      }
      .proc-head {
        padding: 14px 16px;
        border-bottom: 1px solid var(--line);
        background: #fafaf6;
      }
      .proc-head .nm {
        font-family: "Noto Serif SC", serif;
        font-weight: 900;
        font-size: 15px;
      }
      .proc-head .nm .pid {
        color: var(--seal);
        margin-right: 6px;
        font-size: 13px;
      }
      .proc-head .pp {
        font-size: 12px;
        color: var(--ink-soft);
        margin-top: 5px;
        line-height: 1.6;
      }
      .proc-head .meta {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-top: 8px;
      }
      .decl {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border-bottom: 1px solid var(--line);
      }
      .decl > div {
        padding: 10px 16px;
      }
      .decl > div + div {
        border-left: 1px solid var(--line);
      }
      .decl .dl {
        font-size: 10px;
        letter-spacing: 2px;
        color: var(--ink-faint);
        margin-bottom: 6px;
      }
      .decl .di {
        font-size: 12px;
        line-height: 1.7;
      }
      .decl .di b {
        font-weight: 700;
      }
      /* 步骤表:固定列宽撑开,宿主容器 overflow-x 滚动 */
      .steps {
        width: 100%;
        min-width: 1760px;
        table-layout: fixed;
        border-collapse: collapse;
        font-size: 12px;
      }
      .steps th {
        padding: 6px 8px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        color: #fff;
        text-align: left;
      }
      .steps thead tr:first-child th {
        text-align: center;
        font-size: 12px;
        letter-spacing: 4px;
        padding: 7px 4px;
      }
      .steps .h-req {
        background: var(--navy);
      }
      .steps .h-req2 {
        background: #33547a;
      }
      .steps .h-in {
        background: var(--amber);
      }
      .steps .h-in2 {
        background: #cd7522;
      }
      .steps .h-im {
        background: var(--teal);
      }
      .steps .h-im2 {
        background: #2d8273;
      }
      .steps .h-out {
        background: var(--green);
      }
      .steps .h-out2 {
        background: #2e6b45;
      }
      .steps td {
        padding: 8px 9px;
        border: 1px solid var(--line);
        vertical-align: top;
        line-height: 1.6;
      }
      .steps tbody tr:nth-child(odd) td {
        background: #fdfdf9;
      }
      .steps td.c-in {
        background: var(--amber-bg) !important;
      }
      .steps td.c-out {
        background: var(--green-bg) !important;
      }
      .steps .sid {
        font-family: "IBM Plex Mono", monospace;
        font-weight: 700;
        color: var(--navy);
        white-space: nowrap;
      }
      .steps .vtxt {
        color: var(--ink-soft);
        font-size: 11.5px;
        word-break: break-all;
      }
      .inf {
        background: var(--infer) !important;
        position: relative;
        outline: 1px dashed var(--infer-edge);
        outline-offset: -2px;
      }
      .inf .ib {
        position: absolute;
        top: -1px;
        right: -1px;
        background: var(--infer-edge);
        color: #fff;
        font-size: 9px;
        padding: 0 4px;
        border-radius: 0 0 0 4px;
        font-weight: 700;
      }
      .anchor {
        font-family: "IBM Plex Mono", monospace;
        font-size: 10.5px;
        color: var(--ink-faint);
        word-break: break-all;
      }
      /* 输入/输出「值」单元格:超过 4 行加蒙版,点击展开/收起 */
      .clamp-val {
        position: relative;
      }
      .clamp-val.clampable {
        max-height: 6.6em;
        overflow: hidden;
        cursor: zoom-in;
      }
      .clamp-val.clampable::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2.4em;
        pointer-events: none;
      }
      .steps td.c-in .clamp-val.clampable::after {
        background: linear-gradient(180deg, rgba(255, 247, 232, 0), rgba(255, 247, 232, 1));
      }
      .steps td.c-out .clamp-val.clampable::after {
        background: linear-gradient(180deg, rgba(239, 250, 241, 0), rgba(239, 250, 241, 1));
      }
      .clamp-val.open {
        max-height: none;
        overflow: visible;
        cursor: zoom-out;
      }
      .clamp-val.open::after {
        display: none;
      }

      /* 工具表格(移植自 fixed_query_eval:案例逐行 rowspan + 限高展开) */
      .mw-ttwrap {
        overflow-x: auto;
        border: 1px solid var(--line);
        border-radius: 10px;
        box-shadow: var(--shadow);
      }
      .mw-tt {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        min-width: 1180px;
        background: #fff;
        font-size: 12.5px;
      }
      .mw-tt thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        text-align: left;
        white-space: nowrap;
        background: linear-gradient(180deg, #2aa79b, #1c8076);
        color: #fff;
        font-weight: 700;
        padding: 10px 12px;
        letter-spacing: 0.3px;
        border-right: 1px solid rgba(255, 255, 255, 0.18);
      }
      .mw-tt thead th:last-child {
        border-right: none;
      }
      .mw-tt thead tr:first-child th {
        top: 0;
      }
      .mw-tt thead tr:nth-child(2) th {
        top: 38px;
      }
      .mw-tt .th-group {
        text-align: center;
      }
      .mw-tt .th-sub {
        background: linear-gradient(180deg, #36bdb0, #23897f);
        font-weight: 600;
      }
      .mw-tt tbody td {
        padding: 9px 12px;
        vertical-align: top;
        line-height: 1.6;
        border-bottom: 1px solid #f0eee8;
        border-right: 1px solid #f5f3ee;
        color: #3a3a3a;
      }
      .mw-tt tbody td:last-child {
        border-right: none;
      }
      .mw-tt td.col-case {
        background: #fafdfc;
      }
      .mw-tt tbody tr.tr-b td {
        background: #fbfaf6;
      }
      .mw-tt tbody tr.tr-b td.col-case {
        background: #f6fbfa;
      }
      .mw-tt tbody td.col-tool {
        font-weight: 700;
        color: #176d64;
        white-space: nowrap;
        border-left: 3px solid #2aa79b;
        background: #f3faf8;
      }
      .mw-tt tbody tr:hover td.col-tool {
        background: #e3f4f0;
      }
      .mw-tt ul {
        margin: 0;
        padding-left: 17px;
      }
      .mw-tt ul li {
        margin: 3px 0;
      }
      .mw-tt ul li::marker {
        color: #2aa79b;
      }
      .mw-tt .layer-badge {
        display: inline-block;
        font-weight: 700;
        font-size: 11px;
        padding: 2px 10px;
        border-radius: 20px;
        white-space: nowrap;
      }
      .mw-tt .layer-badge.make {
        color: #0e7490;
        background: #d6f0ee;
      }
      .mw-tt .layer-badge.create {
        color: #b8731a;
        background: #fef0db;
      }
      .mw-tt .dash {
        color: #c9c2b6;
      }
      .mw-tt .tcell {
        position: relative;
        max-height: 7.8em;
        overflow: hidden;
        transition: max-height 0.15s;
      }
      .mw-tt .tcell.clamped {
        cursor: zoom-in;
      }
      .mw-tt .tcell.clamped::after {
        content: "▾ 展开";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2.6em;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding-bottom: 2px;
        font-size: 11px;
        font-weight: 700;
        color: #176d64;
        background: linear-gradient(rgba(255, 255, 255, 0), #fff 72%);
        pointer-events: none;
      }
      .mw-tt tbody tr.tr-b .tcell.clamped::after {
        background: linear-gradient(rgba(251, 250, 246, 0), #fbfaf6 72%);
      }
      .mw-tt td.col-case .tcell.clamped::after {
        background: linear-gradient(rgba(250, 253, 252, 0), #fafdfc 72%);
      }
      .mw-tt tbody tr.tr-b td.col-case .tcell.clamped::after {
        background: linear-gradient(rgba(246, 251, 250, 0), #f6fbfa 72%);
      }
      .mw-tt .tcell.open {
        max-height: none;
        cursor: zoom-out;
      }
      .mw-tt .tcell.open::after {
        content: "";
        height: 0;
      }

      /* ── 帖子详情弹层 ── */
      dialog#post-dialog {
        width: min(1100px, 94vw);
        max-height: calc(100vh - 40px);
        border: none;
        border-radius: 14px;
        padding: 0;
        box-shadow: var(--shadow-lg);
        overflow: hidden;
        margin: auto; /* 全局 reset 清掉了 dialog 默认 margin:auto,这里补回才能居中 */
      }
      dialog#post-dialog::backdrop {
        background: rgba(19, 30, 46, 0.5);
        backdrop-filter: blur(2px);
      }
      .pd-wrap {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 40px);
      }
      .pd-head {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        align-items: flex-start;
        padding: 16px 20px;
        border-bottom: 1px solid var(--line);
        background: #fff;
        flex: none;
      }
      .pd-head h3 {
        font-family: "Noto Serif SC", serif;
        font-size: 18px;
        line-height: 1.35;
        margin-top: 6px;
      }
      .pd-meta {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
        font-size: 12px;
        color: var(--ink-soft);
      }
      .pd-close {
        border: none;
        background: #f1f0ea;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: 14px;
        color: var(--ink-soft);
        flex: none;
        transition: 0.15s;
      }
      .pd-close:hover {
        background: var(--seal);
        color: #fff;
      }
      .pd-body {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 20px;
        padding: 18px 20px;
        overflow: auto;
      }
      @media (max-width: 920px) {
        .pd-body {
          grid-template-columns: 1fr;
        }
      }
      .pd-body > section,
      .pd-body > aside {
        min-width: 0;
      }
      .pd-sec-title {
        font-weight: 800;
        margin: 16px 0 8px;
        font-size: 13px;
      }
      .pd-sec-title:first-child {
        margin-top: 0;
      }
      .pd-verdict {
        background: #eaf6fb;
        border-left: 4px solid #2c9ec7;
        padding: 10px 12px;
        color: #22566b;
        border-radius: 6px;
        font-size: 13px;
        line-height: 1.6;
      }
      .pd-raw {
        white-space: pre-wrap;
        background: #faf9f5;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 12px;
        max-height: 320px;
        overflow: auto;
        color: #3d3f44;
        font-size: 13px;
        line-height: 1.7;
      }
      .pd-images {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .pd-images img {
        width: 100%;
        max-height: 250px;
        object-fit: contain;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #f3f2ed;
        cursor: zoom-in;
      }
      /* ── 图片预览灯箱 ── */
      dialog.lightbox {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        margin: 0;
        padding: 40px 72px;
        border: none;
        gap: 18px;
        align-items: center;
        justify-content: center;
        background: rgba(20, 20, 22, 0.86);
        backdrop-filter: blur(2px);
        overflow: hidden;
      }
      dialog.lightbox[open] {
        display: flex;
      }
      dialog.lightbox::backdrop {
        background: rgba(20, 20, 22, 0.5);
      }
      .lb-stage {
        margin: 0;
        max-width: 100%;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }
      .lb-stage img {
        max-width: min(1100px, 86vw);
        max-height: 82vh;
        object-fit: contain;
        border-radius: 8px;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
        background: #2a2a2c;
      }
      .lb-stage figcaption {
        color: rgba(255, 255, 255, 0.78);
        font-size: 13px;
        letter-spacing: 0.5px;
      }
      .lb-nav {
        flex: 0 0 auto;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
        transition: 0.15s;
      }
      .lb-nav:hover {
        background: rgba(255, 255, 255, 0.26);
      }
      .lb-close {
        position: absolute;
        top: 20px;
        right: 24px;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        transition: 0.15s;
      }
      .lb-close:hover {
        background: rgba(255, 255, 255, 0.26);
      }
      /* ── 帖子列表缩略图 ── */
      .post .thumb {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        border-radius: 7px;
        object-fit: cover;
        background: #f0efe9;
        border: 1px solid var(--line);
      }
      .post .thumb-ph {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        border-radius: 7px;
        background: #f0efe9;
        border: 1px solid var(--line);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ink-faint);
        font-size: 16px;
      }
      /* ── 原文卡片(可整体展开/收起;含标题、图片缩略图、正文) ── */
      .src-block {
        border: 1px solid var(--line);
        border-radius: 10px;
        margin-bottom: 14px;
        background: #faf9f5;
        overflow: hidden;
      }
      .src-head {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 12px;
        cursor: pointer;
        user-select: none;
      }
      .src-head:hover {
        background: #f3f2ed;
      }
      .src-caret {
        flex: 0 0 auto;
        color: var(--ink-faint);
        font-size: 11px;
        transition: transform 0.15s;
      }
      .src-block.open .src-caret {
        transform: rotate(90deg);
      }
      .src-label {
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 700;
        color: var(--blue);
        background: var(--blue-bg);
        padding: 1px 7px;
        border-radius: 4px;
      }
      .src-title {
        flex: 1;
        min-width: 0;
        font-weight: 600;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .src-link {
        flex: 0 0 auto;
        font-size: 12px;
        color: var(--blue);
        text-decoration: none;
      }
      .src-body {
        padding: 0 12px 12px;
      }
      .src-block:not(.open) .src-body {
        display: none;
      }
      .src-thumbs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 4px 2px 10px;
        scrollbar-width: thin;
      }
      .src-thumbs img {
        flex: 0 0 auto;
        height: 96px;
        width: auto;
        max-width: 150px;
        border-radius: 8px;
        border: 1px solid var(--line);
        object-fit: cover;
        background: #f0efe9;
        cursor: zoom-in;
      }
      .src-text {
        font-size: 13px;
        line-height: 1.7;
        color: #3d3f44;
        white-space: pre-wrap;
      }
      .src-text.clamp {
        max-height: 88px;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
        mask-image: linear-gradient(180deg, #000 62%, transparent);
      }
      .src-text-toggle {
        margin-top: 4px;
        background: none;
        border: none;
        color: var(--blue);
        cursor: pointer;
        font-size: 12px;
        padding: 2px 0;
      }
      .pd-tags {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-top: 12px;
      }
      .pd-score-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }
      .pd-score-head .t {
        font-weight: 800;
        font-size: 14px;
      }
      .pd-overall {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--ink-soft);
        background: #faf9f5;
        border: 1px solid var(--line);
        padding: 4px 12px;
        border-radius: 8px;
      }
      .pd-overall b {
        font-size: 20px;
        color: var(--blue);
        font-weight: 900;
        line-height: 1;
      }
      .sc-card {
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #fff;
        overflow: hidden;
        margin-bottom: 12px;
      }
      .sc-card-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: #faf9f5;
        border-bottom: 1px solid var(--line);
        font-size: 13px;
        font-weight: 800;
      }
      .sc-card-head .badge {
        display: inline-grid;
        place-items: center;
        width: 20px;
        height: 20px;
        border-radius: 5px;
        background: var(--navy);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        margin-right: 7px;
      }
      .sc-card-head .avg {
        font-size: 12px;
        color: var(--ink-faint);
        font-weight: 600;
      }
      .sc-card-head .avg b {
        font-size: 17px;
        color: var(--blue);
        font-weight: 900;
      }
      .sc-card-body {
        display: grid;
        gap: 8px;
        padding: 11px 12px;
      }
      /* 维度分组小标题:参考 mode_procedure —— 一级虚线大写,二级点线常规 */
      .sc-sub {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.8px;
        color: var(--ink-faint);
        text-transform: uppercase;
        margin: 14px 0 8px;
        padding-bottom: 5px;
        border-bottom: 1px dashed var(--line-dark);
      }
      .sc-card-body > .sc-sub:first-child {
        margin-top: 2px;
      }
      .sc-sub.lv2 {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.3px;
        text-transform: none;
        color: var(--ink-soft);
        margin: 11px 0 6px;
        padding-bottom: 4px;
        border-bottom: 1px dotted var(--line);
      }
      .sc-row {
        display: grid;
        grid-template-columns: 118px 1fr 30px 16px;
        gap: 9px;
        align-items: center;
        font-size: 12.5px;
      }
      .sc-row .meter {
        height: 8px;
        border-radius: 99px;
        background: #edebe4;
        overflow: hidden;
      }
      .sc-row .meter span {
        display: block;
        height: 100%;
        border-radius: 99px;
        background: linear-gradient(90deg, #60a5fa, #2563eb);
      }
      .sc-row b {
        font-weight: 700;
        text-align: right;
      }
      .sc-row .info {
        color: var(--ink-faint);
        cursor: pointer;
        font-size: 12px;
        opacity: 0.75;
        user-select: none;
      }
      .sc-row .info:hover {
        color: var(--blue);
        opacity: 1;
      }
      /* 判定理由弹层:点击 ⓘ 时浮现,挂在 dialog 顶层 */
      .score-pop {
        position: fixed;
        z-index: 90;
        width: 288px;
        max-width: calc(100vw - 24px);
        background: var(--card);
        border: 1px solid var(--line-dark);
        border-radius: 10px;
        box-shadow: var(--shadow-lg);
        padding: 12px 14px;
        font-size: 12.5px;
        line-height: 1.65;
        color: var(--ink-soft);
        animation: popIn 0.12s ease;
      }
      .score-pop .sp-head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--line);
      }
      .score-pop .sp-tag {
        font-size: 9px;
        letter-spacing: 1.5px;
        color: var(--ink-faint);
        font-weight: 700;
        border: 1px solid var(--line-dark);
        border-radius: 5px;
        padding: 2px 6px;
        white-space: nowrap;
      }
      .score-pop .sp-name {
        font-weight: 800;
        font-size: 13px;
        color: var(--ink);
      }
      .score-pop .sp-score {
        margin-left: auto;
        font-size: 16px;
        font-weight: 900;
        color: var(--blue);
      }
      .score-pop .sp-body {
        white-space: pre-wrap;
      }
      @keyframes popIn {
        from {
          opacity: 0;
          transform: translateY(-4px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      /* 任务面板 */
      #task-panel {
        position: fixed;
        right: 22px;
        bottom: 22px;
        width: 440px;
        max-height: 55vh;
        z-index: 60;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--line-dark);
        border-radius: 12px;
        background: var(--card);
        box-shadow: var(--shadow-lg);
        overflow: hidden;
      }
      #task-panel header {
        all: unset;
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 11px 14px;
        background: var(--navy-deep);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
      }
      #task-panel header .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #f5b942;
        animation: blink 1s infinite;
      }
      #task-panel header .dot.done {
        background: #3fb27f;
        animation: none;
      }
      #task-panel header .dot.failed {
        background: #e0492f;
        animation: none;
      }
      @keyframes blink {
        50% {
          opacity: 0.3;
        }
      }
      #task-panel header button {
        margin-left: auto;
        background: none;
        border: 0;
        color: #9eb0c5;
        font-size: 15px;
      }
      #task-panel header button:hover {
        color: #fff;
      }
      #task-log {
        font-family: "IBM Plex Mono", monospace;
        font-size: 11px;
        line-height: 1.65;
        color: var(--ink-soft);
        white-space: pre-wrap;
        overflow: auto;
        padding: 12px 14px;
        background: #fafaf6;
        flex: 1;
      }

      /* 弹窗(新建搜索) */
      .modal-bg {
        position: fixed;
        inset: 0;
        background: rgba(19, 30, 46, 0.5);
        z-index: 70;
        display: grid;
        place-items: center;
        backdrop-filter: blur(2px);
      }
      /* 不能 overflow:hidden,否则渠道下拉面板会被裁掉 */
      .modal {
        width: 460px;
        background: var(--card);
        border-radius: 14px;
        box-shadow: var(--shadow-lg);
      }
      .modal h2 {
        padding: 14px 18px;
        background: var(--navy-deep);
        color: #fff;
        font-size: 15px;
        letter-spacing: 2px;
        border-radius: 14px 14px 0 0;
      }
      .modal .mb {
        padding: 18px;
        display: grid;
        gap: 12px;
      }
      .modal label {
        font-size: 12px;
        color: var(--ink-soft);
        display: grid;
        gap: 5px;
      }
      .modal .mf {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        padding: 0 18px 18px;
      }
      /* 渠道下拉多选 */
      .dd {
        position: relative;
      }
      .dd-btn {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        text-align: left;
        padding: 7px 10px;
        border: 1px solid var(--line-dark);
        border-radius: 8px;
        background: #fff;
        font-size: 13px;
        color: var(--ink);
      }
      .dd-btn .dd-arrow {
        color: var(--ink-faint);
        flex: none;
      }
      .dd-btn:focus {
        border-color: var(--blue);
      }
      .dd-panel {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 4px);
        z-index: 10;
        background: #fff;
        border: 1px solid var(--line-dark);
        border-radius: 10px;
        box-shadow: var(--shadow-lg);
        padding: 6px;
        max-height: 220px;
        overflow: auto;
      }
      .modal label.dd-opt {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 7px 9px;
        border-radius: 6px;
        font-size: 13px;
        color: var(--ink);
        cursor: pointer;
      }
      .dd-opt:hover {
        background: #f4f3ee;
      }
      .dd-opt input {
        accent-color: var(--blue);
        margin: 0;
        cursor: pointer;
      }
      .dd-opt.sel {
        background: var(--blue-bg);
        font-weight: 500;
      }

      /* 聚类库占位 */
      .cluster-empty {
        display: grid;
        place-items: center;
        min-height: 60vh;
      }
      .cluster-empty .inner {
        text-align: center;
        color: var(--ink-faint);
      }
      .cluster-empty .stamp {
        width: 120px;
        height: 120px;
        margin: 0 auto 18px;
        border: 3px solid var(--line-dark);
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-family: "Noto Serif SC", serif;
        font-size: 30px;
        font-weight: 900;
        color: var(--line-dark);
        transform: rotate(-8deg);
        letter-spacing: 4px;
      }
      [hidden] {
        display: none !important;
      }

      /* ── 页内提示(替代浏览器原生 alert) ── */
      #toast-wrap {
        position: fixed;
        top: 18px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 120;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        pointer-events: none;
      }
      .toast {
        pointer-events: auto;
        display: flex;
        align-items: flex-start;
        gap: 10px;
        min-width: 240px;
        max-width: min(440px, calc(100vw - 32px));
        padding: 12px 14px 12px 13px;
        background: var(--card);
        color: var(--ink);
        border: 1px solid var(--line-dark);
        border-left: 4px solid var(--navy);
        border-radius: 10px;
        box-shadow: var(--shadow-lg);
        font-size: 13px;
        line-height: 1.55;
        animation: toastIn 0.18s ease;
      }
      .toast.out {
        animation: toastOut 0.16s ease forwards;
      }
      .toast .ic {
        flex: none;
        width: 18px;
        height: 18px;
        margin-top: 1px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        font-size: 12px;
        font-weight: 900;
        color: #fff;
        background: var(--navy);
      }
      .toast .msg {
        flex: 1;
        word-break: break-word;
      }
      .toast.error {
        border-left-color: var(--seal);
      }
      .toast.error .ic {
        background: var(--seal);
      }
      .toast.success {
        border-left-color: var(--green);
      }
      .toast.success .ic {
        background: var(--green);
      }
      .toast.warn {
        border-left-color: var(--amber);
      }
      .toast.warn .ic {
        background: var(--amber);
      }
      @keyframes toastIn {
        from {
          opacity: 0;
          transform: translateY(-10px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      @keyframes toastOut {
        to {
          opacity: 0;
          transform: translateY(-8px);
        }
      }
    </style>
  </head>
  <body>
    <div id="toast-wrap" aria-live="polite"></div>
    <header>
      <div class="logo">
        <div class="seal">解</div>
        <div><b>mode_workflow</b><small>解构工作台 · MODE WORKBENCH</small></div>
      </div>
      <nav id="nav">
        <a
          href="#dashboard"
          data-tab="dashboard"
          >Dashboard</a
        >
        <a
          href="#dataset"
          data-tab="dataset"
          >Dataset</a
        >
        <a
          href="#cluster"
          data-tab="cluster"
          >知识库</a
        >
      </nav>
      <div class="spacer"></div>
      <div class="hint">SEARCH · EXTRACT · ARCHIVE</div>
    </header>

    <main id="view-dashboard"></main>

    <main id="view-dataset">
      <div class="ds-top">
        <div class="mode-switch">
          <button
            id="m-process"
            class="on"
          >
            工序
          </button>
          <button id="m-tools">工具</button>
        </div>
        <div style="flex: 1"></div>
        <button
          class="btn seal"
          id="btn-new-search"
        >
          ＋ 新建搜索
        </button>
      </div>
      <div class="ds-grid">
        <div class="card">
          <div class="col-head">
            QUERY
            <span
              class="n"
              id="q-count"
            ></span>
          </div>
          <div
            class="qlist"
            id="query-list"
          >
            <div class="empty">暂无 query</div>
          </div>
        </div>
        <div class="card">
          <div class="col-head">
            帖子
            <span style="display: flex; gap: 8px; align-items: center">
              <span
                class="n"
                id="p-count"
              ></span>
              <button
                class="btn sm"
                id="btn-batch"
                disabled
                hidden
              >
                批量解构
              </button>
            </span>
          </div>
          <div
            class="plat-tabs"
            id="plat-tabs"
            hidden
          ></div>
          <div
            class="plist"
            id="post-list"
          >
            <div class="empty"><span class="glyph">←</span>先选择左侧 query</div>
          </div>
        </div>
        <div class="card xp">
          <div
            class="xp-head"
            id="xp-head"
          >
            <span class="st">解构结果</span>
          </div>
          <div
            class="xp-body"
            id="xp-body"
          >
            <div class="empty"><span class="glyph">←</span>选择一个帖子查看解构结果</div>
          </div>
        </div>
      </div>
    </main>

    <main id="view-cluster">
      <iframe
        id="cluster-frame"
        title="知识检索"
        loading="lazy"
      ></iframe>
    </main>

    <div
      id="task-panel"
      hidden
    >
      <header>
        <span
          class="dot"
          id="task-dot"
        ></span
        ><span id="task-title">任务</span> <button onclick="hideTask()">✕</button>
      </header>
      <div id="task-log"></div>
    </div>

    <!-- 帖子详情弹层(评分详情参考 fixed_query_eval) -->
    <dialog id="post-dialog">
      <div class="pd-wrap">
        <div class="pd-head">
          <div style="min-width: 0">
            <div
              class="pd-meta"
              id="pd-meta"
            ></div>
            <h3 id="pd-title"></h3>
          </div>
          <button
            class="pd-close"
            onclick="document.getElementById('post-dialog').close()"
          >
            ✕
          </button>
        </div>
        <div class="pd-body">
          <section>
            <div id="pd-verdict"></div>
            <div class="pd-sec-title">抓取文本节选</div>
            <div
              class="pd-raw"
              id="pd-text"
            ></div>
            <div class="pd-sec-title">图片预览</div>
            <div
              class="pd-images"
              id="pd-images"
            ></div>
            <div
              class="pd-tags"
              id="pd-tags"
            ></div>
          </section>
          <aside>
            <div class="pd-score-head">
              <span class="t">评分详情</span>
              <span class="pd-overall">综合评分 <b id="pd-overall">—</b></span>
            </div>
            <div id="pd-scores"></div>
          </aside>
        </div>
      </div>
    </dialog>

    <!-- 图片预览灯箱(支持左右切换) -->
    <dialog
      class="lightbox"
      id="lightbox"
      onclick="if (event.target === this) closeLightbox();"
    >
      <button
        class="lb-close"
        onclick="closeLightbox()"
        title="关闭 (Esc)"
      >
        ✕
      </button>
      <button
        class="lb-nav lb-prev"
        onclick="lbStep(-1)"
        title="上一张 (←)"
      >
        ‹
      </button>
      <figure class="lb-stage">
        <img
          id="lb-img"
          src=""
          alt=""
        />
        <figcaption id="lb-count"></figcaption>
      </figure>
      <button
        class="lb-nav lb-next"
        onclick="lbStep(1)"
        title="下一张 (→)"
      >
        ›
      </button>
    </dialog>

    <div
      class="modal-bg"
      id="search-modal"
      hidden
    >
      <div class="modal">
        <h2>新建搜索</h2>
        <div class="mb">
          <label
            >Query(评估锚点,必填)<input
              type="text"
              id="s-query"
              placeholder="如:AI 人像 图片 生成 怎么做"
          /></label>
          <label
            >解构方向<select id="s-mode">
              <option value="工序">工序</option>
              <option value="工具">工具</option>
            </select></label
          >
          <label
            >同义措辞(可选,逗号分隔)<input
              type="text"
              id="s-syn"
              placeholder="如:AI 人像生成 教程,AI 写真 怎么做"
          /></label>
          <label
            >检索渠道(下拉多选)
            <div
              class="dd"
              id="s-plat-dd"
            >
              <button
                type="button"
                class="dd-btn"
                id="s-plat-btn"
              >
                选择渠道 ▾
              </button>
              <div
                class="dd-panel"
                id="s-plat-panel"
                hidden
              ></div>
            </div>
          </label>
          <label
            >每措辞每渠道上限<input
              type="number"
              id="s-max"
              value="10"
              min="1"
              max="50"
          /></label>
        </div>
        <div class="mf">
          <button
            class="btn"
            onclick="document.getElementById('search-modal').hidden = true"
          >
            取消
          </button>
          <button
            class="btn primary"
            id="s-go"
          >
            开始搜索
          </button>
        </div>
      </div>
    </div>

    <script>
      /* ════ 基础 ════ */
      const $ = (s) => document.querySelector(s);
      /* 页内提示,替代浏览器原生 alert();type: info|error|success|warn */
      function toast(msg, type = "info", ms = 3200) {
        const wrap = $("#toast-wrap");
        if (!wrap) return;
        const ic = { info: "i", error: "!", success: "✓", warn: "!" }[type] || "i";
        const el = document.createElement("div");
        el.className = "toast " + type;
        el.innerHTML = `<span class="ic">${ic}</span><span class="msg">${esc(msg)}</span>`;
        const dismiss = () => {
          el.classList.add("out");
          el.addEventListener("animationend", () => el.remove(), { once: true });
        };
        el.addEventListener("click", dismiss);
        wrap.appendChild(el);
        setTimeout(dismiss, ms);
      }
      const api = (p, opt) =>
        fetch(p, opt).then(async (r) => {
          if (!r.ok)
            throw Object.assign(new Error("api"), { status: r.status, body: await r.json().catch(() => ({})) });
          return r.json();
        });
      const esc = (s) =>
        String(s ?? "").replace(
          /[&<>"']/g,
          (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c],
        );
      /* 外链图片走本服务同源反代,绕过公众号(mmbiz.qpic.cn)等防盗链 */
      const imgProxy = (u) => (/^https?:\/\//.test(u || "") ? "/api/img?u=" + encodeURIComponent(u) : u || "");
      const state = {
        tab: "dashboard",
        mode: "process",
        queryId: null,
        caseId: null,
        post: null,
        version: null,
        platFilter: "all",
        doneFilter: true,
        selected: new Set(),
        queries: [],
        posts: [],
      };
      const PLAT_CLS = (p) =>
        ({ xhs: "xhs", gzh: "gzh", zhihu: "zhihu", douyin: "douyin", sph: "sph", youtube: "youtube", x: "x" })[p] ||
        "other";
      const PLAT_NAME = (p) =>
        ({
          xhs: "小红书",
          gzh: "公众号",
          sph: "视频号",
          github: "GitHub",
          toutiao: "头条",
          douyin: "抖音",
          bili: "哔哩哔哩",
          zhihu: "知乎",
          weibo: "微博",
          youtube: "YouTube",
          x: "X",
        })[p] ||
        p ||
        "?";
      /* 渠道 logo 徽标(品牌色圆角方块,hover 显示渠道名) */
      /* 有对应 SVG 图标的渠道(文件位于 /icons/<key>.svg) */
      const PLAT_ICONS = new Set(["xhs", "gzh", "sph", "github", "douyin", "bili", "zhihu", "weibo", "youtube"]);
      const PLAT_LOGO = (p, size = 18) =>
        PLAT_ICONS.has(p)
          ? `<span class="plat-logo" title="${PLAT_NAME(p)}"><img src="/icons/${p}.svg" width="${size}" height="${size}" alt="${PLAT_NAME(p)}" loading="lazy"></span>`
          : `<span class="plat other">${esc(PLAT_NAME(p))}</span>`;
      const MODELS_PROC = ["anthropic/claude-sonnet-4-6", "google/gemini-3.1-flash-lite"];
      const MODELS_TOOL = ["google/gemini-3.1-flash-lite", "anthropic/claude-sonnet-4-6"];
      const scoreCls = (v) => (v == null ? "s0" : v >= 9 ? "s9" : v >= 8 ? "s8" : v >= 6 ? "s6" : "s0");

      /* ════ 路由 ════ */
      function route() {
        state.tab = (location.hash || "#dashboard").slice(1);
        if (!["dashboard", "dataset", "cluster"].includes(state.tab)) state.tab = "dashboard";
        document.querySelectorAll("nav a").forEach((a) => a.classList.toggle("on", a.dataset.tab === state.tab));
        document.querySelectorAll("main").forEach((m) => m.classList.toggle("on", m.id === "view-" + state.tab));
        if (state.tab === "dashboard") renderDashboard();
        if (state.tab === "dataset" && !state.queries.length) loadQueries();
        if (state.tab === "cluster") {
          // 首次打开聚类库才加载内嵌检索页
          const f = $("#cluster-frame");
          if (f && !f.src) f.src = "/search.html";
        }
      }
      window.addEventListener("hashchange", route);

      /* ════ Dashboard ════ */
      let chartRefs = [];
      async function renderDashboard() {
        const v = $("#view-dashboard");
        let d;
        try {
          d = await api("/api/dashboard");
        } catch (e) {
          v.innerHTML = `<div class="card empty"><span class="glyph">!</span>Dashboard 加载失败:${esc(e.body?.error || e.status)}</div>`;
          return;
        }
        const r = d.result,
          p = d.process_data;
        // 进度百分比向下取整:200/201=99.5% 显示 99%,未真正做完不会显示 100%
        const pct = (a, b) => (b ? Math.floor((a / b) * 100) : 0);
        const platBreak = (arr) =>
          (arr || [])
            .map(
              ([k, n]) =>
                `<span class="pb-item">${PLAT_LOGO(k, 15)}<b class="num">${n}</b></span>`,
            )
            .join("") || "—";
        v.innerHTML = `
  <div class="dash-section"><h2>结果数据</h2><div class="rule"></div><span class="tag">RESULTS</span></div>
  <div class="cards">
    <div class="card stat"><div class="lbl">采集帖子数量</div><div class="val num">${r.post_count}</div><div class="sub plat-break">${platBreak(r.collected_by_platform)}</div></div>
    <div class="card stat t"><div class="lbl">解构帖子数量</div><div class="val num">${r.extracted_post_count}</div><div class="sub plat-break">${platBreak(r.extracted_by_platform)}</div></div>
    <div class="card stat a"><div class="lbl">工具数量</div><div class="val num">${r.tool_count}</div><div class="sub">mode_tools 去重工具名</div></div>
    <div class="card stat r"><div class="lbl">内容树覆盖节点</div><div class="val num">0</div>
      <div class="sub">0%</div></div>
    <div class="card stat"><div class="lbl">实质数量</div><div class="val num">${r.substance_count}</div><div class="sub">去重实质条目数</div></div>
    <div class="card stat"><div class="lbl">形式数量</div><div class="val num">${r.form_count}</div><div class="sub">去重形式条目数</div></div>
  </div>
  <div class="dash-section"><h2>过程数据</h2><div class="rule"></div><span class="tag">PROCESS</span></div>
  <div class="cards">
    <div class="card stat a"><div class="lbl">解构成本</div><div class="val num">$${p.total_cost}</div><div class="sub">单条均值 $${p.avg_cost} · 共 ${p.run_count} 次</div></div>
    <div class="card stat a"><div class="lbl">解构耗时</div><div class="val num">${(p.total_duration / 3600).toFixed(1)}<span style="font-size:14px">h</span></div><div class="sub">平均 ${p.avg_duration}s / 次</div></div>
    <div class="card stat t"><div class="ring-row"><div class="ring" style="--p:${pct(p.process_progress.done, p.process_progress.total)}"><div>${pct(p.process_progress.done, p.process_progress.total)}%</div></div>
      <div><div class="lbl">工序进度</div><div class="num" style="font-weight:700">${p.process_progress.done} / ${p.process_progress.total}</div><div class="sub">已解构 / 需解构</div></div></div></div>
    <div class="card stat t"><div class="ring-row"><div class="ring" style="--p:${pct(p.tools_progress.done, p.tools_progress.total)}"><div>${pct(p.tools_progress.done, p.tools_progress.total)}%</div></div>
      <div><div class="lbl">工具进度</div><div class="num" style="font-weight:700">${p.tools_progress.done} / ${p.tools_progress.total}</div><div class="sub">已解构 / 需解构</div></div></div></div>
  </div>
  <div class="charts">
    <div class="card chart-card span6"><h3>工序提及工具 TOP10</h3><div class="chart" id="ch-via" style="height:300px"></div></div>
    <div class="card chart-card span6"><h3>解构成本趋势</h3><div class="chart" id="ch-cost" style="height:300px"></div></div>
    <div class="card chart-card span6"><h3>实质覆盖分布 <span class="num">${r.substance_count}</span></h3><div class="chart" id="ch-sub" style="height:320px"></div></div>
    <div class="card chart-card span6"><h3>形式覆盖分布 <span class="num">${r.form_count}</span></h3><div class="chart" id="ch-form" style="height:320px"></div></div>
    <div class="card chart-card span12"><h3>内容树覆盖热力图 <span class="num">${r.matrix_covered}/${r.matrix_valid}</span><span style="font-weight:400;color:var(--ink-faint)">· 27 动作 × 50 类型</span></h3><div class="chart" id="ch-matrix" style="height:560px"></div></div>
  </div>`;
        chartRefs.forEach((c) => c.dispose());
        chartRefs = [];
        const mk = (id, opt) => {
          const c = echarts.init($(id));
          c.setOption(opt);
          chartRefs.push(c);
          return c;
        };
        const ink = "#1c2433",
          faint = "#9aa3b0",
          grid = { left: 8, right: 16, top: 8, bottom: 8, containLabel: true };
        /* 热力图 */
        mk("#ch-matrix", {
          tooltip: { formatter: (pr) => `${r.matrix_actions[pr.value[1]]} × ${r.matrix_types[pr.value[0]]}` },
          grid: { left: 8, right: 16, top: 8, bottom: 60, containLabel: true },
          xAxis: {
            type: "category",
            data: r.matrix_types,
            axisLabel: { rotate: 60, fontSize: 9, color: faint },
            splitArea: { show: true, areaStyle: { color: ["#fcfcf9", "#f5f4ef"] } },
          },
          yAxis: {
            type: "category",
            data: r.matrix_actions,
            axisLabel: { fontSize: 10, color: ink },
            splitArea: { show: true },
          },
          visualMap: { show: false, min: 0, max: 1, inRange: { color: ["#f0efe8", "#bb3a22"] } },
          series: [
            {
              type: "heatmap",
              data: r.matrix_cells.map(([a, t]) => [t, a, 1]),
              itemStyle: { borderColor: "#fff", borderWidth: 1 },
            },
          ],
        });
        const bar = (data, color) => ({
          tooltip: {},
          grid,
          xAxis: { type: "value", axisLabel: { color: faint } },
          yAxis: {
            type: "category",
            data: data.map((x) => x[0]).reverse(),
            axisLabel: { color: ink, fontSize: 11, width: 130, overflow: "truncate" },
          },
          series: [
            {
              type: "bar",
              data: data.map((x) => x[1]).reverse(),
              itemStyle: { color, borderRadius: [0, 3, 3, 0] },
              barMaxWidth: 16,
              label: { show: true, position: "right", color: faint, fontSize: 10 },
            },
          ],
        });
        mk("#ch-via", r.via_top10.length ? bar(r.via_top10, "#1e3a5f") : emptyOpt());
        mk("#ch-sub", r.substance_top.length ? bar(r.substance_top, "#b45309") : emptyOpt());
        mk("#ch-form", r.form_top.length ? bar(r.form_top, "#0f6b5c") : emptyOpt());
        mk(
          "#ch-cost",
          p.cost_trend.length
            ? {
                tooltip: { trigger: "axis" },
                grid,
                xAxis: { type: "category", data: p.cost_trend.map((x) => x.date), axisLabel: { color: faint } },
                yAxis: { type: "value", axisLabel: { color: faint, formatter: "${value}" } },
                series: [
                  {
                    type: "line",
                    data: p.cost_trend.map((x) => x.cost),
                    smooth: true,
                    symbolSize: 7,
                    lineStyle: { color: "#bb3a22", width: 2.5 },
                    itemStyle: { color: "#bb3a22" },
                    areaStyle: { color: "rgba(187,58,34,.08)" },
                  },
                ],
              }
            : emptyOpt(),
        );
        function emptyOpt() {
          return {
            title: {
              text: "暂无数据",
              left: "center",
              top: "middle",
              textStyle: { color: faint, fontSize: 12, fontWeight: 400 },
            },
            xAxis: { show: false },
            yAxis: { show: false },
          };
        }
      }

      /* ════ Dataset:query 列表 ════ */
      async function loadQueries() {
        /* 工序/工具各自一张搜索表,query 列表按当前子模式拉取 */
        try {
          state.queries = await api("/api/queries?mode=" + state.mode);
        } catch (e) {
          state.queries = [];
        }
        renderQueries();
        /* 进入/切换子模式时默认选中第一个 query(进而联动第一帖与解构结果) */
        if (!state.queryId && state.queries.length) await selectQuery(state.queries[0].query_id);
      }
      function renderQueries() {
        const list = state.queries;
        $("#q-count").textContent = list.length ? list.length + " 组" : "";
        if (!list.length) {
          $("#query-list").innerHTML = '<div class="empty">暂无 query<br>点右上「新建搜索」开始</div>';
          return;
        }
        $("#query-list").innerHTML = list
          .map((q) => {
            const done = state.mode === "process" ? q.process_done : q.tools_done;
            return `<div class="qitem ${q.query_id === state.queryId ? "on" : ""}" onclick="selectQuery('${q.query_id}')">
      <div class="qid">${q.query_id}</div>
      <div class="qt">${esc(q.query_text || "(未命名)")}</div>
      <div class="qm">
        <span>采纳/命中 <b class="num hit">${q.hit_count ?? 0}</b></span>
        <span>总帖数 <b class="num">${q.post_count}</b></span>
        <span>已解构 <b class="num">${done}</b></span>
      </div>
    </div>`;
          })
          .join("");
      }
      async function selectQuery(qid) {
        state.queryId = qid;
        state.caseId = null;
        state.post = null;
        state.platFilter = "all";
        state.selected.clear();
        renderQueries();
        renderExtractEmpty();
        $("#post-list").innerHTML = '<div class="empty">加载中…</div>';
        try {
          state.posts = await api("/api/posts?mode=" + state.mode + "&query_id=" + encodeURIComponent(qid));
        } catch (e) {
          state.posts = [];
        }
        renderPosts();
        /* 默认选中「可见列表」第一帖(已解构筛选下即第一个已解构帖),无可见帖则退回全部第一帖 */
        if (state.posts.length) {
          const vis = visiblePosts();
          await selectPost((vis[0] || state.posts[0]).case_id);
        }
      }

      /* ════ Dataset:帖子列表(按渠道分 tab)════ */
      function setPlatFilter(p) {
        state.platFilter = p;
        renderPosts();
      }
      function toggleDoneFilter() {
        state.doneFilter = !state.doneFilter;
        renderPosts();
        renderPostsAutoSelect();
      }
      /* 当前可见帖(渠道 + 已解构筛选后),供列表渲染与「默认选中」共用 */
      function visiblePosts() {
        const isDone = (p) => (state.mode === "process" ? p.has_process : p.has_tools);
        let list =
          state.platFilter === "all"
            ? state.posts
            : state.posts.filter((p) => (p.platform || "other") === state.platFilter);
        if (state.doneFilter) list = list.filter(isDone);
        return list;
      }
      /* 切换筛选后,若当前选中帖已被筛掉,则改选可见列表的第一帖 */
      async function renderPostsAutoSelect() {
        const vis = visiblePosts();
        if (vis.length && !vis.some((p) => p.case_id === state.caseId)) await selectPost(vis[0].case_id);
      }
      function renderPosts() {
        const all = state.posts;
        updateBatchBtn();
        /* 渠道 tab + 已解构筛选 */
        const counts = {};
        all.forEach((p) => {
          const k = p.platform || "other";
          counts[k] = (counts[k] || 0) + 1;
        });
        const plats = Object.keys(counts);
        if (state.platFilter !== "all" && !counts[state.platFilter]) state.platFilter = "all";
        const isDone = (p) => (state.mode === "process" ? p.has_process : p.has_tools);
        const platScoped =
          state.platFilter === "all" ? all : all.filter((p) => (p.platform || "other") === state.platFilter);
        const doneN = platScoped.filter(isDone).length;
        const tabs = $("#plat-tabs");
        if (all.length) {
          tabs.hidden = false;
          const btns =
            plats.length > 1
              ? [
                  `<button class="${state.platFilter === "all" ? "on" : ""}" onclick="setPlatFilter('all')">全部<span class="c">${all.length}</span></button>`,
                ].concat(
                  plats.map(
                    (k) =>
                      `<button class="${state.platFilter === k ? "on" : ""}" onclick="setPlatFilter('${esc(k)}')">${PLAT_NAME(k)}<span class="c">${counts[k]}</span></button>`,
                  ),
                )
              : [];
          btns.push(`<button class="done-filter ${state.doneFilter ? "on" : ""}" onclick="toggleDoneFilter()"
        title="${state.doneFilter ? "当前只看已解构,点击显示全部" : "点击只看已解构"}"><span class="dot">●</span>已解构<span class="c">${doneN}</span></button>`);
          tabs.innerHTML = btns.join("");
        } else {
          tabs.hidden = true;
        }

        const list = visiblePosts();
        $("#p-count").textContent = all.length
          ? state.platFilter === "all" && !state.doneFilter
            ? `${all.length} 帖`
            : `${list.length} / ${all.length} 帖`
          : "";
        if (!all.length) {
          $("#post-list").innerHTML = '<div class="empty">该 query 暂无帖子</div>';
          return;
        }
        if (!list.length) {
          $("#post-list").innerHTML =
            `<div class="empty">${state.doneFilter ? "该筛选下暂无已解构帖子" : "该渠道暂无帖子"}</div>`;
          return;
        }
        $("#post-list").innerHTML = list
          .map((p) => {
            const done = state.mode === "process" ? p.has_process : p.has_tools;
            const kt = (p.knowledge_type || []).map((k) => `<span class="pill">${esc(k)}</span>`).join("");
            const sb =
              p.overall_score != null
                ? `<span class="score-badge ${scoreCls(p.overall_score)} num"
              onclick="event.stopPropagation();openPostDetail('${esc(p.case_id)}')">${p.overall_score}</span>`
                : "";
            const thumbSrc = (p.images || []).filter(Boolean)[0];
            const thumb = thumbSrc
              ? `<img class="thumb" src="${esc(imgProxy(thumbSrc))}" loading="lazy"
              onerror="this.outerHTML='<div class=\\'thumb-ph\\'>🖼️</div>'">`
              : `<div class="thumb-ph" title="暂无图片">🖼️</div>`;
            return `<div class="post ${p.case_id === state.caseId ? "on" : ""}" onclick="selectPost('${esc(p.case_id)}')">
      ${thumb}
      <div style="flex:1;min-width:0">
        <div class="pt">${esc(p.title || "(无标题)")}</div>
        <div class="pm">
          ${PLAT_LOGO(p.platform)}
          ${p.adopted ? '<span class="pill green">采纳</span>' : ""}
          ${kt}
          ${done ? '<span class="done-dot">● 已解构</span>' : ""}
        </div>
      </div>
      ${sb}
    </div>`;
          })
          .join("");
      }
      function toggleSel(cid, on) {
        on ? state.selected.add(cid) : state.selected.delete(cid);
        updateBatchBtn();
      }
      function updateBatchBtn() {
        const b = $("#btn-batch");
        b.disabled = !state.selected.size;
        b.textContent = state.selected.size ? `批量解构(${state.selected.size})` : "批量解构";
      }
      $("#btn-batch").onclick = () => state.selected.size && startExtract([...state.selected]);

      /* ════ 帖子详情弹层 ════ */
      /* 得分可能是字符串("1")或数字(10),统一解析;非数值返回 null */
      const scoreNum = (v) => {
        const n = typeof v === "number" || (typeof v === "string" && v.trim() !== "") ? Number(v) : NaN;
        return Number.isFinite(n) ? n : null;
      };
      function collectScores(node) {
        let out = [];
        if (Array.isArray(node)) node.forEach((v) => (out = out.concat(collectScores(v))));
        else if (node && typeof node === "object") {
          for (const [k, v] of Object.entries(node)) {
            if (k === "得分") {
              const n = scoreNum(v);
              if (n !== null) out.push(n);
            } else out = out.concat(collectScores(v));
          }
        }
        return out;
      }
      function scRow(label, v, reason) {
        const n = scoreNum(v);
        const has = n !== null;
        return `<div class="sc-row">
    <span style="color:${has ? "inherit" : "var(--ink-faint)"}">${esc(label)}</span>
    <div class="meter"><span style="width:${has ? Math.min(n, 10) * 10 : 0}%"></span></div>
    <b class="num">${has ? n : "—"}</b>
    ${reason ? `<span class="info" data-label="${esc(label)}" data-reason="${esc(reason)}" data-score="${has ? n : ""}" onclick="showScorePop(this)">ⓘ</span>` : "<span></span>"}
  </div>`;
      }
      /* 递归渲染评分;depth>0 的分组标题用二级样式,形成层级 */
      function walkScores(node, depth) {
        depth = depth || 0;
        let html = "";
        for (const [k, v] of Object.entries(node || {})) {
          if (v && typeof v === "object" && !Array.isArray(v) && "得分" in v) {
            html += scRow(k, v["得分"], v["理由"]);
          } else if (scoreNum(v) !== null) {
            html += scRow(k, v);
          } else if (v && typeof v === "object" && !Array.isArray(v)) {
            const inner = walkScores(v, depth + 1);
            if (inner) html += `<div class="sc-sub${depth > 0 ? " lv2" : ""}">${esc(k)}</div>` + inner;
          }
        }
        return html;
      }

      /* ── 质量评分:不跟随原始 JSON 嵌套,改用 mode_procedure 的规范分组与顺序 ──
   固定维度 → 用例 → 工序 → 能力 → 工具;丢弃「字段完整性」「动态维度」等中间表头 */
      const QUALITY_ORDER = {
        工序: ["流程完整性", "输入完整性", "实现完整性", "输出完整性", "泛化性"],
        能力: ["输入完整性", "实现完整性", "输出完整性", "泛化性"],
        工具: ["能力边界覆盖", "有效比较", "参数/接口具体性", "实操示例", "版本&限制"],
      };
      /* DFS 找到名为 name 的容器节点(工序/能力/工具) */
      function findScoreNode(n, name) {
        if (!n || typeof n !== "object" || Array.isArray(n)) return null;
        if (name in n && n[name] && typeof n[name] === "object" && !Array.isArray(n[name])) return n[name];
        for (const v of Object.values(n)) {
          if (v && typeof v === "object" && !Array.isArray(v)) {
            const r = findScoreNode(v, name);
            if (r) return r;
          }
        }
        return null;
      }
      /* 递归收集子树叶子评分 [name,{得分,理由}],打平中间分组头 */
      function collectLeaves(node) {
        let out = [];
        for (const [k, v] of Object.entries(node || {})) {
          if (v && typeof v === "object" && !Array.isArray(v) && "得分" in v) out.push([k, v]);
          else if (scoreNum(v) !== null) out.push([k, { 得分: v }]);
          else if (v && typeof v === "object" && !Array.isArray(v)) out = out.concat(collectLeaves(v));
        }
        return out;
      }
      function renderQuality(qnode) {
        /* 固定维度/用例 的维度名全局唯一,扁平索引即可取 */
        const flat = {};
        (function collect(n) {
          for (const [k, v] of Object.entries(n || {})) {
            if (v && typeof v === "object" && !Array.isArray(v)) {
              if ("得分" in v) flat[k] = v;
              else collect(v);
            } else if (scoreNum(v) !== null) flat[k] = { 得分: v };
          }
        })(qnode);
        const sub = (t) => `<div class="sc-sub">${esc(t)}</div>`;
        const rows = (pairs) => pairs.map(([n, o]) => scRow(n, o["得分"], o["理由"])).join("");
        const pick = (names) => names.filter((n) => flat[n]).map((n) => [n, flat[n]]);

        let html = "";
        let p = pick(["时效性", "热度性", "评论反馈"]); // ① 固定维度(置顶)
        if (p.length) html += sub("固定维度") + rows(p);
        p = pick(["真实感", "真实感 (非AI)", "真实感(非AI)", "表现力"]); // ② 用例
        if (p.length) html += sub("用例") + rows(p);
        for (const name of ["工序", "能力", "工具"]) {
          // ③ 动态维度(按方向命名,内部规范排序)
          const node = findScoreNode(qnode, name);
          if (!node) continue;
          const leaves = collectLeaves(node);
          if (!leaves.length) continue;
          const order = QUALITY_ORDER[name] || [];
          leaves.sort((a, b) => (order.indexOf(a[0]) + 1 || 99) - (order.indexOf(b[0]) + 1 || 99));
          html += sub(name) + rows(leaves);
        }
        return html || '<span style="color:var(--ink-faint)">无评分</span>';
      }

      /* ── 判定理由弹层:点击 ⓘ 浮现,符合当前页面样式 ── */
      let _scorePop = null;
      function closeScorePop() {
        if (_scorePop) {
          _scorePop.remove();
          _scorePop = null;
        }
        document.removeEventListener("mousedown", _scorePopOutside, true);
      }
      function _scorePopOutside(e) {
        if (_scorePop && !_scorePop.contains(e.target) && !e.target.classList.contains("info")) closeScorePop();
      }
      function showScorePop(el) {
        const reopen = _scorePop && _scorePop._anchor === el;
        closeScorePop();
        if (reopen) return; // 再次点击同一图标 → 收起
        const score = el.dataset.score;
        const pop = document.createElement("div");
        pop.className = "score-pop";
        pop._anchor = el;
        pop.innerHTML = `<div class="sp-head">
      <span class="sp-tag">判定理由</span>
      <span class="sp-name">${esc(el.dataset.label || "")}</span>
      ${score !== "" && score != null ? `<span class="sp-score">${esc(score)}</span>` : ""}
    </div>
    <div class="sp-body">${esc(el.dataset.reason || "")}</div>`;
        // 挂在 dialog 内,确保位于 showModal 顶层之上
        (document.getElementById("post-dialog") || document.body).appendChild(pop);
        _scorePop = pop;
        // 定位:图标下方右对齐;越界则上翻 / 收边
        const r = el.getBoundingClientRect();
        let top = r.bottom + 8,
          left = r.right - pop.offsetWidth;
        if (left < 12) left = 12;
        if (top + pop.offsetHeight > window.innerHeight - 12) top = r.top - pop.offsetHeight - 8;
        if (top < 12) top = 12;
        pop.style.top = top + "px";
        pop.style.left = left + "px";
        setTimeout(() => document.addEventListener("mousedown", _scorePopOutside, true), 0);
      }
      document.getElementById("post-dialog")?.addEventListener("close", closeScorePop);
      /* ── 图片预览灯箱 ── */
      const lb = { imgs: [], i: 0 };
      function openLightbox(i) {
        if (!lb.imgs.length) return;
        lb.i = (i + lb.imgs.length) % lb.imgs.length;
        renderLightbox();
        const d = $("#lightbox");
        if (!d.open) d.showModal();
      }
      function closeLightbox() {
        const d = $("#lightbox");
        if (d.open) d.close();
      }
      function lbStep(d) {
        if (!lb.imgs.length) return;
        lb.i = (lb.i + d + lb.imgs.length) % lb.imgs.length;
        renderLightbox();
      }
      function renderLightbox() {
        $("#lb-img").src = imgProxy(lb.imgs[lb.i]);
        $("#lb-count").textContent = `${lb.i + 1} / ${lb.imgs.length}`;
        const multi = lb.imgs.length > 1;
        document.querySelector(".lb-prev").style.visibility = multi ? "visible" : "hidden";
        document.querySelector(".lb-next").style.visibility = multi ? "visible" : "hidden";
      }
      document.addEventListener("keydown", (e) => {
        if (!$("#lightbox").open) return;
        if (e.key === "ArrowLeft") lbStep(-1);
        else if (e.key === "ArrowRight") lbStep(1);
        // Esc 由 <dialog> 原生处理(触发 close)
      });

      function openPostDetail(cid) {
        const p = state.posts.find((x) => x.case_id === cid);
        if (!p) return;
        const e = p.llm_evaluation || {};
        const meta = [];
        meta.push(`${PLAT_LOGO(p.platform)}<span style="font-weight:600">${esc(PLAT_NAME(p.platform))}</span>`);
        meta.push(p.adopted ? '<span class="pill green">采纳/命中</span>' : '<span class="pill">未采纳</span>');
        if (p.publish_time) meta.push(`<span>${esc(String(p.publish_time).slice(0, 16))}</span>`);
        if (p.like_count != null) meta.push(`<span>👍 ${p.like_count}</span>`);
        if (p.quality_grade) meta.push(`<span>质量 ${esc(p.quality_grade)} ${p.quality_score ?? ""}</span>`);
        if (p.url) meta.push(`<a href="${esc(p.url)}" target="_blank">原文 ↗</a>`);
        $("#pd-meta").innerHTML = meta.join("");
        $("#pd-title").textContent = p.title || "(无标题)";
        const verdict = e["判定理由"] || e["理由"] || "";
        $("#pd-verdict").innerHTML = verdict ? `<div class="pd-verdict">${esc(verdict)}</div>` : "";
        $("#pd-text").textContent = p.body || "(无正文)";
        const imgs = (p.images || []).filter(Boolean);
        $("#pd-images").innerHTML = imgs.length
          ? imgs
              .map(
                (s, i) => `<img src="${esc(imgProxy(s))}" loading="lazy"
        onclick="openLightbox(${i})" onerror="this.style.opacity=.25">`,
              )
              .join("")
          : '<p style="color:var(--ink-faint);font-size:12px">搜索详情未返回图片。</p>';
        lb.imgs = imgs;
        $("#pd-tags").innerHTML = [
          ...(p.knowledge_type || []).map((t) => "类型:" + t),
          ...(p.found_by || []).map((q) => "命中:" + q),
        ]
          .map((t) => `<span class="pill">${esc(t)}</span>`)
          .join("");
        $("#pd-overall").innerHTML =
          p.overall_score != null
            ? `${p.overall_score}<span style="font-size:11px;color:var(--ink-faint);font-weight:500"> /10</span>`
            : "—";
        /* 评分卡:相关性 + 质量(均分 + 各维度,ⓘ hover 看理由) */
        $("#pd-scores").innerHTML =
          [
            ["01", "相关性"],
            ["02", "质量"],
          ]
            .map(([no, key], i) => {
              const node = e[key];
              if (!node) return "";
              const vs = collectScores(node);
              const avg = vs.length ? (vs.reduce((a, b) => a + b, 0) / vs.length).toFixed(1) : "N/A";
              return `<div class="sc-card">
      <div class="sc-card-head">
        <span><span class="badge">${no}</span>${esc(key)}</span>
        <span class="avg">均分 <b>${avg}</b>/10</span>
      </div>
      <div class="sc-card-body">${(key === "质量" ? renderQuality(node) : walkScores(node)) || '<span style="color:var(--ink-faint)">无评分</span>'}</div>
    </div>`;
            })
            .join("") || '<div class="empty">无评估数据</div>';
        $("#post-dialog").showModal();
      }

      /* ════ Dataset:右栏解构结果 ════ */
      function renderExtractEmpty() {
        $("#xp-head").innerHTML = '<span class="st">解构结果</span>';
        $("#xp-body").innerHTML = '<div class="empty"><span class="glyph">←</span>选择一个帖子查看解构结果</div>';
      }
      async function selectPost(cid) {
        state.caseId = cid;
        state.version = null;
        state.post = state.posts.find((p) => p.case_id === cid) || null;
        renderPosts();
        await loadExtract();
      }
      async function loadExtract() {
        if (!state.caseId) return renderExtractEmpty();
        const isProc = state.mode === "process";
        const vURL = `/api/${isProc ? "process" : "tools"}_versions?case_id=` + encodeURIComponent(state.caseId);
        const dURL =
          `/api/${isProc ? "process" : "tools"}?case_id=` +
          encodeURIComponent(state.caseId) +
          (state.version ? "&version=" + encodeURIComponent(state.version) : "");
        let versions = [],
          data = null,
          missing = false;
        try {
          versions = await api(vURL);
        } catch (e) {}
        try {
          data = await api(dURL);
        } catch (e) {
          if (e.status === 404) missing = true;
          else throw e;
        }
        renderExtractHead(versions, data, missing);
        const body = $("#xp-body");
        if (missing || !data) {
          body.innerHTML = `<div class="empty">该帖暂无${isProc ? "工序" : "工具"}解构<br><br>
      <button class="btn primary" onclick="startExtract(['${esc(state.caseId)}'])">开始解构</button></div>`;
          return;
        }
        state.version = data.version;
        syncVersionSelect();
        body.innerHTML = isProc ? renderProcedures(data) : renderTools(data);
        requestAnimationFrame(markSrcTextClamp);
        if (isProc) requestAnimationFrame(markStepClamps);
        else requestAnimationFrame(markClampedCells);
      }
      function renderExtractHead(versions, data, missing) {
        const isProc = state.mode === "process";
        const title = state.post ? esc(state.post.title || state.caseId) : esc(state.caseId || "");
        const opts = versions
          .map(
            (v, i) =>
              `<option value="${esc(v.version)}">${esc(v.version)}${i === 0 ? " (最新)" : ""} · ${v.n}${isProc ? "工序" : "工具"}</option>`,
          )
          .join("");
        const models = (isProc ? MODELS_PROC : MODELS_TOOL).map((m) => `<option>${m}</option>`).join("");
        $("#xp-head").innerHTML = `
    <span class="st">大模型${isProc ? "工序" : "工具"}:<em>${missing ? "未提取" : "已提取"}</em></span>
    <span style="font-size:12px;color:var(--ink-faint);max-width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${title}">${title}</span>
    <span class="spacer"></span>
    ${versions.length ? `<select id="ver-sel">${opts}</select>` : ""}
    <select id="model-sel" title="解构模型">${models}</select>
    <button class="btn sm primary" onclick="startExtract(['${esc(state.caseId || "")}'])">${missing ? "提取" : "♻ 重新生成"}</button>
    <button class="btn sm" onclick="showTaskPanel()" title="重新打开任务日志面板">📋 操作日志</button>`;
        const vs = $("#ver-sel");
        if (vs)
          vs.onchange = () => {
            state.version = vs.value;
            loadExtract();
          };
      }
      function syncVersionSelect() {
        const vs = $("#ver-sel");
        if (vs && state.version) vs.value = state.version;
      }

      /* ── 原文卡片:标题 + 图片缩略图(横滑、可灯箱预览)+ 正文(定高可展开),整体可收起 ── */
      let srcOpen = true,
        srcTextOpen = false;
      function renderSourceBlock() {
        const p = state.post;
        if (!p || !(p.title || (p.images || []).length || p.body)) return "";
        const imgs = (p.images || []).filter(Boolean);
        const thumbs = imgs.length
          ? `<div class="src-thumbs">${imgs
              .map(
                (s, i) =>
                  `<img src="${esc(imgProxy(s))}" loading="lazy" onclick="openSrcLightbox(${i})" onerror="this.style.opacity=.25">`,
              )
              .join("")}</div>`
          : "";
        const body = p.body
          ? `<div class="src-text${srcTextOpen ? "" : " clamp"}" id="src-text">${esc(p.body)}</div>
        <button class="src-text-toggle" id="src-text-toggle" onclick="toggleSrcText()" hidden>${srcTextOpen ? "收起 ▲" : "展开 ▼"}</button>`
          : "";
        const link = p.url
          ? `<a class="src-link" href="${esc(p.url)}" target="_blank" rel="noreferrer" onclick="event.stopPropagation()">原文 ↗</a>`
          : "";
        return `<div class="src-block${srcOpen ? " open" : ""}" id="src-block">
      <div class="src-head" onclick="toggleSrc()">
        <span class="src-caret">▸</span>
        <span class="src-label">原文</span>
        <span class="src-title">${esc(p.title || "(无标题)")}</span>
        ${link}
      </div>
      <div class="src-body">${thumbs}${body}</div>
    </div>`;
      }
      function toggleSrc() {
        srcOpen = !srcOpen;
        const b = $("#src-block");
        if (b) b.classList.toggle("open", srcOpen);
        requestAnimationFrame(markSrcTextClamp);
      }
      function toggleSrcText() {
        srcTextOpen = !srcTextOpen;
        const t = $("#src-text"),
          btn = $("#src-text-toggle");
        if (t) t.classList.toggle("clamp", !srcTextOpen);
        if (btn) btn.textContent = srcTextOpen ? "收起 ▲" : "展开 ▼";
      }
      function openSrcLightbox(i) {
        lb.imgs = ((state.post && state.post.images) || []).filter(Boolean);
        openLightbox(i);
      }
      /* 仅当正文在定高下溢出时才显示「展开」按钮(需在可见、未展开态测量) */
      function markSrcTextClamp() {
        const t = $("#src-text"),
          btn = $("#src-text-toggle");
        if (!t || !btn) return;
        if (srcTextOpen) {
          btn.hidden = false;
          return;
        }
        btn.hidden = !(t.scrollHeight > t.clientHeight + 2);
      }

      /* ── 工序渲染 ── */
      function renderProcedures(data) {
        const src = data.source || {};
        return (
          renderSourceBlock() +
            (data.procedures || [])
              .map((p) => {
                const d = p.declarations || {};
                const ins =
                  (d.inputs || [])
                    .map(
                      (x) =>
                        `<span class="pill amber">${esc(x.type || "")}</span> ${x.name ? `<b>${esc(x.name)}</b>` : ""} ${x.desc ? `<span style="color:var(--ink-faint)">— ${esc(x.desc)}</span>` : ""}`,
                    )
                    .join("<br>") || '<span style="color:var(--ink-faint)">无</span>';
                const ret = d.returns
                  ? `<span class="pill teal">${esc(d.returns.type || "")}</span>`
                  : '<span style="color:var(--ink-faint)">无</span>';
                return `<div class="proc">
      <div class="proc-head">
        <div class="nm"><span class="pid">工序 ${esc(p.id || "")}</span>${esc(p.name || "")}</div>
        ${p.purpose ? `<div class="pp">#目的:${esc(p.purpose)}</div>` : ""}
        <div class="meta">
          ${p.category ? `<span class="pill red">类别:${esc(p.category)}</span>` : ""}
          ${src.platform ? `<span class="pill">#平台:${esc(src.platform)}</span>` : ""}
          ${src.author ? `<span class="pill">#作者:${esc(src.author)}</span>` : ""}
          <span class="pill">case:${esc(data.case_id)}</span>
          ${(p.tools_used || []).map((t) => `<span class="pill teal">${esc(t)}</span>`).join("")}
        </div>
      </div>
      <div class="decl">
        <div><div class="dl">输入</div><div class="di">${ins}</div></div>
        <div><div class="dl">返回</div><div class="di">${ret}</div></div>
      </div>
      ${renderSteps(p.steps || [])}
    </div>`;
              })
              .join("") || '<div class="empty">本版本无工序</div>'
        );
      }
      function renderSteps(steps) {
        if (!steps.length) return '<div class="empty">无步骤</div>';
        let rows = "";
        for (const s of steps) {
          const ins = s.inputs && s.inputs.length ? s.inputs : [null];
          const outs = s.outputs && s.outputs.length ? s.outputs : [null];
          const n = Math.max(ins.length, outs.length);
          for (let i = 0; i < n; i++) {
            rows += "<tr>";
            if (i === 0) {
              rows += `<td rowspan="${n}" class="sid">${esc(s.id || "")}</td>
          <td rowspan="${n}">${esc(s.directive || s.intent || "")}</td>
          <td rowspan="${n}">${s.effect ? `<span class="pill navy">${esc(s.effect)}</span>` : ""}</td>
          <td rowspan="${n}">${esc(fmtSF(s.substance))}</td>
          <td rowspan="${n}">${esc(fmtSF(s.form))}</td>`;
            }
            rows += ioCell(ins[i], "in");
            if (i === 0) {
              rows += `<td rowspan="${n}">${s.via ? `<span class="pill teal">${esc(s.via)}</span>` : ""}</td>
          <td rowspan="${n}" class="vtxt">${esc(s.action || "")}</td>`;
            }
            rows += ioCell(outs[i], "out");
            rows += "</tr>";
          }
        }
        return `<div style="overflow-x:auto"><table class="steps">
    <colgroup>
      <col style="width:44px"><col style="width:200px"><col style="width:92px">
      <col style="width:112px"><col style="width:100px">
      <col style="width:112px"><col style="width:330px"><col style="width:92px">
      <col style="width:118px"><col style="width:130px">
      <col style="width:112px"><col style="width:360px"><col style="width:110px">
    </colgroup>
    <thead>
      <tr><th class="h-req" colspan="5">需 求</th><th class="h-in" colspan="3">输 入</th><th class="h-im" colspan="2">实 现</th><th class="h-out" colspan="3">输 出</th></tr>
      <tr>
        <th class="h-req2">#</th><th class="h-req2">目的</th><th class="h-req2">作用</th><th class="h-req2">实质</th><th class="h-req2">形式</th>
        <th class="h-in2">类型</th><th class="h-in2">值</th><th class="h-in2">来源</th>
        <th class="h-im2">外部工具</th><th class="h-im2">动作</th>
        <th class="h-out2">类型</th><th class="h-out2">值</th><th class="h-out2">去处</th>
      </tr>
    </thead><tbody>${rows}</tbody></table></div>`;
      }
      function fmtSF(v) {
        return v == null ? "" : Array.isArray(v) ? v.join("、") : v;
      }
      function ioCell(x, kind) {
        const cls = kind === "in" ? "c-in" : "c-out";
        if (!x) return `<td class="${cls}"></td><td class="${cls}"></td><td class="${cls}"></td>`;
        const inf = x.inferred ? ` inf" title="推断理由:${esc(x.inferred_reason || "模型推断补全")}` : "";
        const badge = x.inferred ? '<span class="ib">推</span>' : "";
        return `<td class="${cls}"><span class="pill ${kind === "in" ? "amber" : "teal"}">${esc(x.type || "")}</span></td>
    <td class="${cls}${inf}">${badge}<div class="clamp-val" onclick="toggleClampVal(this)"><span class="vtxt">${esc(x.value || "")}</span></div></td>
    <td class="${cls}"><span class="anchor">${esc(x.anchor || "")}</span></td>`;
      }
      /* 点击「值」单元格展开/收起(仅在内容溢出、已标记 clampable 时生效) */
      function toggleClampVal(el) {
        if (!el.classList.contains("clampable") && !el.classList.contains("open")) return;
        el.classList.toggle("open");
      }
      /* 渲染后标记真正溢出 4 行的「值」单元格:先套限高再测量,溢出才保留 clampable */
      function markStepClamps() {
        document.querySelectorAll("#xp-body .steps .clamp-val").forEach((el) => {
          if (el.classList.contains("open")) return;
          el.classList.add("clampable");
          if (el.scrollHeight <= el.clientHeight + 2) el.classList.remove("clampable");
        });
      }

      /* ── 工具渲染(表格,移植自 fixed_query_eval renderToolTable)── */
      const DASH = '<span class="dash">—</span>';
      function _toolCell(v) {
        if (v === null || v === undefined || v === "" || (Array.isArray(v) && !v.length)) return DASH;
        if (Array.isArray(v)) return "<ul>" + v.map((x) => `<li>${esc(String(x))}</li>`).join("") + "</ul>";
        return esc(String(v));
      }
      function _scopeCell(v) {
        /* 作用域是 JSON 数组:按「、」拼接成短语,不出列表 */
        if (v === null || v === undefined || (Array.isArray(v) && !v.length) || v === "") return DASH;
        return esc(Array.isArray(v) ? v.join("、") : String(v));
      }
      function _ttCell(inner, clampable) {
        return clampable ? `<div class="tcell" onclick="this.classList.toggle('open')">${inner}</div>` : inner;
      }
      function _toolCellContent(c, t) {
        let inner,
          cls = "",
          clampable = true,
          style = "";
        if (c === "工具名称") {
          cls = "col-tool";
          clampable = false;
          inner = `🔧 ${esc(t[c] || "(未命名)")}`;
        } else if (c === "来源链接") {
          clampable = false;
          inner = t[c]
            ? `<a href="${esc(t[c])}" target="_blank" style="color:#176d64;font-weight:600;">🔗 打开</a>`
            : DASH;
        } else if (c === "创作层级") {
          clampable = false;
          inner = t[c]
            ? `<span class="layer-badge ${t[c] === "制作层" ? "make" : "create"}">${esc(t[c])}</span>`
            : DASH;
        } else if (c === "实质作用域" || c === "形式作用域") {
          inner = _scopeCell(t[c]);
        } else {
          inner = _toolCell(t[c]);
        }
        if (["输入", "输出", "用法", "缺点"].includes(c)) style = "max-width:240px;";
        else if (c === "实质作用域" || c === "形式作用域") style = "max-width:170px;";
        else if (!clampable) style = "white-space:nowrap;";
        return { inner, cls, clampable, style };
      }
      function _td(c, t, rowspan) {
        const { inner, cls, clampable, style } = _toolCellContent(c, t);
        const rs = rowspan > 1 ? ` rowspan="${rowspan}"` : "";
        return `<td class="${cls}" style="${style}"${rs}>${_ttCell(inner, clampable)}</td>`;
      }
      function _caseTd(cse, key) {
        const v = cse && cse[key] != null && cse[key] !== "" ? esc(String(cse[key])) : DASH;
        return `<td class="col-case" style="max-width:210px;">${_ttCell(v, true)}</td>`;
      }
      function renderTools(data) {
        const tools = data.tools || [];
        if (!tools.length) return renderSourceBlock() + '<div class="empty">本版本无工具</div>';
        /* 案例 group(输入/输出/效果)放在 用法 后、缺点 前;用 colspan/rowspan 做两层表头 */
        const before = ["工具名称", "创作层级", "实质作用域", "形式作用域", "输入", "输出", "用法"];
        const after = ["缺点", "来源链接", "最新更新时间"];
        const thead = `<thead>
    <tr>
      ${before.map((c) => `<th rowspan="2">${c}</th>`).join("")}
      <th colspan="3" class="th-group">案例</th>
      ${after.map((c) => `<th rowspan="2">${c}</th>`).join("")}
    </tr>
    <tr>${["输入", "输出", "效果"].map((c) => `<th class="th-sub">${c}</th>`).join("")}</tr>
  </thead>`;
        const rows = tools
          .map((t, ti) => {
            const cases = Array.isArray(t["案例"]) && t["案例"].length ? t["案例"] : [null];
            const K = cases.length;
            const par = ti % 2 ? "tr-b" : "tr-a";
            return cases
              .map((cse, i) => {
                const caseTds = `${_caseTd(cse, "输入")}${_caseTd(cse, "输出")}${_caseTd(cse, "效果")}`;
                if (i === 0) {
                  return `<tr class="${par}">${before.map((c) => _td(c, t, K)).join("")}${caseTds}${after.map((c) => _td(c, t, K)).join("")}</tr>`;
                }
                return `<tr class="${par}">${caseTds}</tr>`;
              })
              .join("");
          })
          .join("");
        return (
          renderSourceBlock() +
          `<div class="mw-ttwrap"><table class="mw-tt">${thead}<tbody>${rows}</tbody></table></div>`
        );
      }
      /* 渲染后标记真正溢出的单元格(才显示蒙版+可点击) */
      function markClampedCells() {
        document.querySelectorAll("#xp-body .mw-tt .tcell").forEach((el) => {
          if (!el.classList.contains("open") && el.scrollHeight > el.clientHeight + 2) el.classList.add("clamped");
          else if (el.scrollHeight <= el.clientHeight + 2) el.classList.remove("clamped");
        });
      }

      /* ════ 解构任务 ════ */
      async function startExtract(caseIds) {
        if (!state.queryId || !caseIds.length) return;
        const isProc = state.mode === "process";
        const model = $("#model-sel")?.value || (isProc ? MODELS_PROC[0] : MODELS_TOOL[0]);
        try {
          const r = await api(`/api/extract_${isProc ? "process" : "tools"}`, {
            method: "POST",
            body: JSON.stringify({ query_id: state.queryId, case_ids: caseIds, model }),
          });
          showTask(`${isProc ? "工序" : "工具"}解构 · ${caseIds.length} 帖`, r.task_id, async () => {
            state.selected.clear();
            await selectQuery(state.queryId);
            if (caseIds.includes(state.caseId)) {
              /* selectQuery 清了 caseId,恢复选中 */
            }
            if (caseIds.length === 1) {
              state.caseId = caseIds[0];
              state.version = null;
              renderPosts();
              await loadExtract();
            }
          });
        } catch (e) {
          toast("任务启动失败:" + (e.body?.error || e.status), "error");
        }
      }

      /* ════ 任务面板(✕ 只隐藏;「操作日志」按钮可随时唤回)════ */
      let pollTimer = null,
        hasTask = false;
      function showTask(title, taskId, onDone) {
        hasTask = true;
        $("#task-panel").hidden = false;
        $("#task-title").textContent = title;
        $("#task-dot").className = "dot";
        $("#task-log").textContent = "启动中…";
        clearTimeout(pollTimer);
        const poll = async () => {
          let t;
          try {
            t = await api("/api/task_status?task_id=" + encodeURIComponent(taskId));
          } catch (e) {
            $("#task-log").textContent = "状态查询失败";
            return;
          }
          const log = $("#task-log");
          log.textContent = t.log_tail || "(暂无日志)";
          log.scrollTop = log.scrollHeight;
          if (t.status === "running") {
            pollTimer = setTimeout(poll, 2000);
            return;
          }
          $("#task-dot").className = "dot " + t.status;
          $("#task-title").textContent = title + (t.status === "done" ? " · 完成" : " · 失败");
          if (t.status === "done" && onDone) onDone();
        };
        poll();
      }
      /* ✕ 只隐藏面板,轮询照跑(任务完成后回调依然触发) */
      function hideTask() {
        $("#task-panel").hidden = true;
      }
      function showTaskPanel() {
        if (!hasTask) return toast("本次会话还没有任务日志", "warn");
        $("#task-panel").hidden = false;
        const log = $("#task-log");
        log.scrollTop = log.scrollHeight;
      }

      /* ════ 新建搜索 ════ */
      /* 渠道下拉多选(选项同 search_eval:小红书/知乎/公众号/抖音/视频号/YouTube) */
      const CHANNELS = [
        { key: "xhs", name: "小红书", on: true },
        { key: "zhihu", name: "知乎", on: true },
        { key: "gzh", name: "公众号" },
        { key: "douyin", name: "抖音" },
        { key: "sph", name: "视频号" },
        { key: "youtube", name: "YouTube" },
      ];
      $("#s-plat-panel").innerHTML = CHANNELS.map(
        (c) => `
  <label class="dd-opt ${c.on ? "sel" : ""}">
    <input type="checkbox" value="${c.key}" ${c.on ? "checked" : ""}>${c.name}
  </label>`,
      ).join("");
      function selectedPlatforms() {
        return [...document.querySelectorAll("#s-plat-panel input:checked")].map((x) => x.value);
      }
      function syncPlatBtn() {
        const names = [...document.querySelectorAll("#s-plat-panel input:checked")].map(
          (x) => CHANNELS.find((c) => c.key === x.value).name,
        );
        $("#s-plat-btn").innerHTML =
          `<span>${names.length ? esc(names.join("、")) : "选择渠道"}</span><span class="dd-arrow">▾</span>`;
      }
      $("#s-plat-btn").onclick = (e) => {
        e.stopPropagation();
        $("#s-plat-panel").hidden = !$("#s-plat-panel").hidden;
      };
      $("#s-plat-panel").onclick = (e) => e.stopPropagation();
      $("#s-plat-panel").addEventListener("change", (e) => {
        e.target.closest(".dd-opt").classList.toggle("sel", e.target.checked);
        syncPlatBtn();
      });
      document.addEventListener("click", () => {
        $("#s-plat-panel").hidden = true;
      });
      syncPlatBtn();
      $("#btn-new-search").onclick = () => {
        $("#s-mode").value = state.mode === "process" ? "工序" : "工具"; // 默认跟随当前子模式
        $("#search-modal").hidden = false;
        $("#s-query").focus();
      };
      $("#search-modal").onclick = (e) => {
        if (e.target === $("#search-modal")) $("#search-modal").hidden = true;
      };
      $("#s-go").onclick = async () => {
        const query = $("#s-query").value.trim();
        if (!query) return toast("请填写 query", "warn");
        const plats = selectedPlatforms();
        if (!plats.length) return toast("请至少选择一个检索渠道", "warn");
        const body = {
          query,
          synonyms: $("#s-syn").value.trim(),
          mode_type: $("#s-mode").value,
          platforms: plats.join(","),
          max_count: parseInt($("#s-max").value) || 10,
        };
        try {
          const r = await api("/api/run_search", { method: "POST", body: JSON.stringify(body) });
          $("#search-modal").hidden = true;
          showTask(`搜索 · ${r.query_id} ${query}`, r.task_id, async () => {
            /* 搜索结果落在 s-mode 对应的表,完成后切到对应子模式再选中 */
            const m = body.mode_type === "工具" ? "tools" : "process";
            if (state.mode !== m) {
              state.mode = m;
              $("#m-process").classList.toggle("on", m === "process");
              $("#m-tools").classList.toggle("on", m === "tools");
            }
            await loadQueries();
            selectQuery(r.query_id);
          });
        } catch (e) {
          toast("搜索启动失败:" + (e.body?.error || e.status), "error");
        }
      };

      /* ════ 工序/工具子模式 ════ */
      $("#m-process").onclick = () => setMode("process");
      $("#m-tools").onclick = () => setMode("tools");
      function setMode(m) {
        if (state.mode === m) return;
        state.mode = m;
        state.version = null;
        /* 工序/工具是两张独立搜索表,切换时整体重置三栏 */
        state.queryId = null;
        state.caseId = null;
        state.post = null;
        state.posts = [];
        state.selected.clear();
        state.platFilter = "all";
        $("#m-process").classList.toggle("on", m === "process");
        $("#m-tools").classList.toggle("on", m === "tools");
        $("#plat-tabs").hidden = true;
        $("#p-count").textContent = "";
        $("#post-list").innerHTML = '<div class="empty"><span class="glyph">←</span>先选择左侧 query</div>';
        renderExtractEmpty();
        loadQueries();
      }

      window.addEventListener("resize", () => chartRefs.forEach((c) => c.resize()));
      route();
    </script>
  </body>
</html>