search.html 49 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>知识检索 — 知识检索中心</title>
  7. <style>
  8. *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  9. :root {
  10. --primary: #2563EB;
  11. --primary-light: #EFF6FF;
  12. --primary-hover: #1D4ED8;
  13. --bg: #F1F5F9;
  14. --surface: #FFFFFF;
  15. --border: #E2E8F0;
  16. --border-focus: #A5B4FC;
  17. --text: #0F172A;
  18. --text-sub: #475569;
  19. --text-muted: #94A3B8;
  20. --radius: 8px;
  21. --substance-bg: #EFF6FF; --substance: #1D4ED8;
  22. --form-bg: #F5F3FF; --form: #6D28D9;
  23. --intent-bg: #F0FDF4; --intent: #15803D;
  24. --effect-bg: #FFF7ED; --effect: #C2410C;
  25. --feeling-bg: #FDF2F8; --feeling: #BE185D;
  26. --dim-bg: #F8FAFC; --dim: #64748B;
  27. }
  28. body {
  29. font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  30. background: var(--bg);
  31. color: var(--text);
  32. font-size: 14px;
  33. line-height: 1.5;
  34. }
  35. /* ── 搜索栏 ───────────────────────────────────────────────────── */
  36. .search-section {
  37. position: sticky; top: 0; z-index: 199;
  38. background: var(--surface);
  39. border-bottom: 1px solid var(--border);
  40. padding: 11px 16px;
  41. }
  42. .search-inner { max-width: 1400px; margin: 0 auto; display: flex; gap: 8px; }
  43. .search-input-wrap { flex: 0 1 680px; min-width: 240px; position: relative; }
  44. .search-icon {
  45. position: absolute; left: 10px; top: 50%;
  46. transform: translateY(-50%);
  47. color: var(--text-muted); pointer-events: none;
  48. display: flex; align-items: center;
  49. }
  50. .search-input {
  51. width: 100%; height: 38px;
  52. padding: 0 12px 0 34px;
  53. border: 1.5px solid var(--border); border-radius: 6px;
  54. font-size: 14px; outline: none;
  55. background: var(--bg); color: var(--text);
  56. transition: border-color .15s, background .15s;
  57. }
  58. .search-input:focus { border-color: var(--border-focus); background: #fff; }
  59. .btn-primary {
  60. height: 38px; padding: 0 18px;
  61. background: var(--primary); color: #fff;
  62. border: none; border-radius: 6px;
  63. font-size: 14px; font-weight: 500; cursor: pointer;
  64. transition: background .15s; white-space: nowrap;
  65. }
  66. .btn-primary:hover { background: var(--primary-hover); }
  67. /* ── 布局 ─────────────────────────────────────────────────────── */
  68. .layout {
  69. display: flex;
  70. max-width: 1400px; margin: 0 auto;
  71. padding: 16px; gap: 14px;
  72. align-items: flex-start;
  73. }
  74. /* ── 侧栏 ─────────────────────────────────────────────────────── */
  75. .sidebar {
  76. width: 232px; flex-shrink: 0;
  77. position: sticky; top: 126px;
  78. max-height: calc(100vh - 132px);
  79. overflow-y: auto;
  80. }
  81. .sidebar::-webkit-scrollbar { width: 3px; }
  82. .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
  83. .filter-card {
  84. background: var(--surface);
  85. border: 1px solid var(--border); border-radius: var(--radius);
  86. overflow: hidden;
  87. }
  88. .filter-section { border-bottom: 1px solid var(--border); }
  89. .filter-section:last-child { border-bottom: none; }
  90. .section-hd {
  91. display: flex; align-items: center; justify-content: space-between;
  92. padding: 10px 13px; cursor: pointer; user-select: none;
  93. font-size: 13px; font-weight: 600; color: var(--text);
  94. transition: background .1s;
  95. }
  96. .section-hd:hover { background: var(--bg); }
  97. .section-hd .chevron { color: var(--text-muted); font-size: 10px; transition: transform .2s; }
  98. .section-hd.open .chevron { transform: rotate(180deg); }
  99. .section-bd { display: none; padding: 2px 13px 10px; }
  100. .section-bd.open { display: block; }
  101. .sub-group { margin-bottom: 10px; }
  102. .sub-label {
  103. font-size: 10px; font-weight: 700; letter-spacing: .6px;
  104. text-transform: uppercase; color: var(--text-muted);
  105. padding: 5px 0 3px;
  106. }
  107. .semantic-input {
  108. width: 100%; height: 26px; padding: 0 8px;
  109. border: 1px solid var(--border); border-radius: 4px;
  110. font-size: 12px; outline: none; color: var(--text);
  111. background: var(--bg); margin-bottom: 5px;
  112. transition: border-color .15s;
  113. }
  114. .semantic-input:focus { border-color: var(--border-focus); background: #fff; }
  115. .semantic-input::placeholder { color: var(--text-muted); }
  116. .opt {
  117. display: flex; align-items: center; gap: 6px;
  118. padding: 3px 0; cursor: pointer;
  119. font-size: 13px; color: var(--text-sub);
  120. }
  121. .opt:hover { color: var(--primary); }
  122. .opt input[type="checkbox"] {
  123. accent-color: var(--primary);
  124. width: 13px; height: 13px; cursor: pointer; flex-shrink: 0;
  125. }
  126. .opt-text { flex: 1; }
  127. .opt-count {
  128. font-size: 11px; color: var(--text-muted);
  129. background: var(--bg); border-radius: 8px;
  130. padding: 0 5px; min-width: 20px; text-align: center;
  131. }
  132. .range-row { display: flex; align-items: center; gap: 5px; margin-top: 5px; }
  133. .range-inp {
  134. flex: 1; height: 28px; padding: 0 7px;
  135. border: 1px solid var(--border); border-radius: 4px;
  136. font-size: 12px; outline: none; color: var(--text); min-width: 0;
  137. }
  138. .range-inp:focus { border-color: var(--border-focus); }
  139. .range-sep { color: var(--text-muted); font-size: 12px; }
  140. /* ── 建议下拉(portal,fixed 定位到 body)──────────────────────── */
  141. .suggest-dropdown {
  142. background: var(--surface);
  143. border: 1px solid var(--border); border-radius: 4px;
  144. overflow: hidden;
  145. box-shadow: 0 6px 16px rgba(0,0,0,.12);
  146. max-height: 220px; overflow-y: auto;
  147. }
  148. .suggest-item {
  149. padding: 6px 10px; font-size: 12px;
  150. color: var(--text-sub); cursor: pointer;
  151. transition: background .1s;
  152. }
  153. .suggest-item:hover { background: var(--primary-light); color: var(--primary); }
  154. /* ── 结果区域 ─────────────────────────────────────────────────── */
  155. .results-area { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
  156. .chips-bar {
  157. display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  158. padding: 9px 13px;
  159. background: var(--surface);
  160. border: 1px solid var(--border); border-radius: var(--radius);
  161. }
  162. .chips-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
  163. .chip {
  164. display: inline-flex; align-items: center; gap: 3px;
  165. padding: 2px 8px; border-radius: 4px;
  166. background: var(--primary-light); color: var(--primary);
  167. font-size: 12px; font-weight: 500; cursor: pointer;
  168. }
  169. .chip-x { font-size: 13px; opacity: .55; margin-left: 1px; }
  170. .chip:hover .chip-x { opacity: 1; }
  171. .chip-clear { margin-left: auto; font-size: 12px; color: var(--text-muted); cursor: pointer; }
  172. .chip-clear:hover { color: #EF4444; }
  173. .results-bar {
  174. display: flex; align-items: center; justify-content: space-between;
  175. }
  176. .results-count { font-size: 13px; color: var(--text-sub); }
  177. .results-count strong { color: var(--text); font-weight: 600; }
  178. .sort-label { font-size: 12px; color: var(--text-muted); }
  179. /* ── 卡片 ─────────────────────────────────────────────────────── */
  180. .card {
  181. background: var(--surface);
  182. border: 1px solid var(--border); border-radius: var(--radius);
  183. padding: 15px 16px; cursor: pointer;
  184. transition: border-color .15s, box-shadow .15s;
  185. }
  186. .card:hover { border-color: #C7D2FE; box-shadow: 0 3px 12px rgba(79,70,229,.08); }
  187. .card-top {
  188. display: flex; align-items: flex-start;
  189. justify-content: space-between; gap: 10px; margin-bottom: 6px;
  190. }
  191. .card-title {
  192. font-size: 15px; font-weight: 600; color: var(--text);
  193. line-height: 1.4; flex: 1;
  194. }
  195. .card-title em {
  196. font-style: normal; color: var(--primary);
  197. background: var(--primary-light); padding: 0 2px; border-radius: 2px;
  198. }
  199. .score-badge {
  200. flex-shrink: 0; font-size: 11px; font-weight: 600;
  201. color: #15803D; background: #F0FDF4;
  202. padding: 2px 7px; border-radius: 10px; white-space: nowrap;
  203. }
  204. .card-meta {
  205. display: flex; align-items: center; flex-wrap: wrap;
  206. gap: 3px 10px; font-size: 12px; color: var(--text-muted); margin-bottom: 9px;
  207. }
  208. .source-badge {
  209. display: inline-flex; align-items: center;
  210. padding: 1px 6px;
  211. background: var(--bg); border: 1px solid var(--border);
  212. border-radius: 4px; font-size: 11px; color: var(--text-sub);
  213. }
  214. .meta-dot { color: var(--border); }
  215. .tag-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
  216. .tag {
  217. display: inline-flex; align-items: center; gap: 2px;
  218. padding: 2px 7px; border-radius: 4px;
  219. font-size: 11px; font-weight: 500; line-height: 1.6;
  220. }
  221. .tag-pre { opacity: .65; font-size: 10px; }
  222. .tag.s { background: var(--substance-bg); color: var(--substance); }
  223. .tag.fo { background: var(--form-bg); color: var(--form); }
  224. .tag.i { background: var(--intent-bg); color: var(--intent); }
  225. .tag.e { background: var(--effect-bg); color: var(--effect); }
  226. .tag.fe { background: var(--feeling-bg); color: var(--feeling); }
  227. .tag.d { background: var(--dim-bg); color: var(--dim); border: 1px solid var(--border); }
  228. .tag.hit { box-shadow: 0 0 0 1.5px currentColor; font-weight: 700; }
  229. .tag.d.hit { border-color: var(--dim); }
  230. .ext-item.hit .ext-key { color: var(--text-sub); }
  231. .ext-item.hit .ext-val { color: var(--primary); font-weight: 700; }
  232. .card-foot {
  233. display: flex; align-items: center; justify-content: space-between;
  234. padding-top: 9px; border-top: 1px solid var(--bg);
  235. }
  236. .ext-row { display: flex; flex-wrap: wrap; gap: 10px; }
  237. .ext-item { font-size: 11px; }
  238. .ext-key { color: var(--text-muted); }
  239. .ext-val { color: var(--text-sub); font-weight: 500; }
  240. .card-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
  241. /* ── 分页 ─────────────────────────────────────────────────────── */
  242. .pagination {
  243. display: flex; justify-content: center; align-items: center;
  244. gap: 3px; padding: 6px 0 4px;
  245. }
  246. .pg-btn {
  247. min-width: 32px; height: 32px; padding: 0 8px;
  248. display: inline-flex; align-items: center; justify-content: center;
  249. border: 1px solid var(--border); border-radius: 4px;
  250. background: var(--surface); color: var(--text-sub);
  251. font-size: 13px; cursor: pointer; transition: all .15s; user-select: none;
  252. }
  253. .pg-btn:hover:not(.active):not([disabled]) { border-color: var(--primary); color: var(--primary); }
  254. .pg-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
  255. .pg-btn[disabled] { color: var(--text-muted); cursor: default; }
  256. .pg-dots { font-size: 13px; color: var(--text-muted); padding: 0 2px; }
  257. /* ── 空/加载/错误状态 ─────────────────────────────────────────── */
  258. .state-box {
  259. text-align: center; padding: 60px 20px;
  260. color: var(--text-muted); font-size: 14px;
  261. background: var(--surface);
  262. border: 1px solid var(--border); border-radius: var(--radius);
  263. }
  264. .state-box.error { color: #EF4444; }
  265. .state-box .state-icon { font-size: 32px; margin-bottom: 10px; }
  266. .state-box p { margin-top: 6px; font-size: 13px; }
  267. /* ── 侧栏骨架 ─────────────────────────────────────────────────── */
  268. .sidebar-loading {
  269. padding: 20px 13px;
  270. display: flex; flex-direction: column; gap: 8px;
  271. }
  272. .skel {
  273. height: 12px; border-radius: 4px;
  274. background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
  275. background-size: 200% 100%;
  276. animation: shimmer 1.4s infinite;
  277. }
  278. @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
  279. /* ── 语义输入框 loading 圈 ────────────────────────────────────────── */
  280. .sem-wrap { position: relative; }
  281. .sem-wrap .semantic-input { padding-right: 26px; }
  282. .sem-spinner {
  283. position: absolute; right: 7px; top: 50%;
  284. transform: translateY(-50%);
  285. width: 11px; height: 11px;
  286. border: 2px solid var(--border);
  287. border-top-color: var(--primary);
  288. border-radius: 50%;
  289. animation: sem-spin .65s linear infinite;
  290. display: none; pointer-events: none;
  291. }
  292. .sem-spinner.show { display: block; }
  293. @keyframes sem-spin { to { transform: translateY(-50%) rotate(360deg); } }
  294. /* ── 正文展开 ─────────────────────────────────────────────────── */
  295. .content-toggle {
  296. display: flex; align-items: center; gap: 5px;
  297. padding: 7px 0 2px;
  298. font-size: 12px; color: var(--text-muted);
  299. cursor: pointer; user-select: none;
  300. border-top: 1px solid var(--bg); margin-top: 8px;
  301. }
  302. .content-toggle:hover { color: var(--primary); }
  303. .content-caret {
  304. font-size: 9px; display: inline-block;
  305. transition: transform .2s; margin-left: auto;
  306. }
  307. .content-toggle.open .content-caret { transform: rotate(180deg); }
  308. .content-body { display: none; }
  309. .content-body.open { display: block; padding-top: 6px; }
  310. .content-pre {
  311. margin: 0; padding: 10px 12px;
  312. background: var(--bg); border: 1px solid var(--border); border-radius: 5px;
  313. font-family: 'Courier New', Consolas, monospace;
  314. font-size: 11px; line-height: 1.65; color: var(--text-sub);
  315. max-height: 300px; overflow-y: auto;
  316. white-space: pre-wrap; word-break: break-all;
  317. }
  318. </style>
  319. </head>
  320. <body>
  321. <div class="search-section">
  322. <div class="search-inner">
  323. <div class="search-input-wrap">
  324. <span class="search-icon">
  325. <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
  326. <circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
  327. </svg>
  328. </span>
  329. <input id="search-input" class="search-input" type="text" placeholder="搜索知识标题、正文内容…">
  330. </div>
  331. <button id="search-btn" class="btn-primary">搜索</button>
  332. </div>
  333. </div>
  334. <div class="layout">
  335. <aside class="sidebar">
  336. <div class="filter-card" id="sidebar-card">
  337. <div class="sidebar-loading">
  338. <div class="skel" style="width:60%"></div>
  339. <div class="skel" style="width:90%"></div>
  340. <div class="skel" style="width:75%"></div>
  341. <div class="skel" style="width:80%"></div>
  342. <div class="skel" style="width:55%"></div>
  343. </div>
  344. </div>
  345. </aside>
  346. <div class="results-area">
  347. <div class="chips-bar" id="chips-bar" style="display:none"></div>
  348. <div class="results-bar">
  349. <div class="results-count" id="results-count">加载中…</div>
  350. <div class="sort-label" id="sort-label"></div>
  351. </div>
  352. <div id="results-list">
  353. <div class="state-box"><div class="state-icon">🔍</div><p>正在加载…</p></div>
  354. </div>
  355. <div class="pagination" id="pagination"></div>
  356. </div>
  357. </div>
  358. <script>
  359. const API = '/api/v1/knowledge';
  360. const SCOPE_TYPES = ['substance','form','intent','effect','feeling'];
  361. const SCOPE_LABELS = {substance:'实质', form:'形式', intent:'意图', effect:'作用', feeling:'感受'};
  362. const SCOPE_TAGS = {substance:'s', form:'fo', intent:'i', effect:'e', feeling:'fe'};
  363. // ── 转义工具 ──────────────────────────────────────────────────────────
  364. const esc = s => String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  365. function debounce(fn, ms) {
  366. let t; return (...a) => { clearTimeout(t); t = setTimeout(() => fn(...a), ms); };
  367. }
  368. // ── 全局状态 ──────────────────────────────────────────────────────────
  369. let dims = null;
  370. let _portalDropdown = null;
  371. function clearPortalDropdown() {
  372. if (_portalDropdown) { _portalDropdown.remove(); _portalDropdown = null; }
  373. }
  374. document.addEventListener('mousedown', e => {
  375. if (_portalDropdown && !_portalDropdown.contains(e.target)) clearPortalDropdown();
  376. });
  377. const sel = {
  378. query: '',
  379. scopes: {substance: new Set(), form: new Set(), intent: new Set(), effect: new Set(), feeling: new Set()},
  380. scopeSemantic: {substance: '', form: '', intent: '', effect: '', feeling: ''},
  381. dimAttr: new Set(),
  382. dimCreate: new Set(),
  383. customValues: {}, // key → Set<string>
  384. customSemantics:{}, // key → string
  385. customRanges: {}, // key → {gte, lte}
  386. page: 1,
  387. };
  388. let _chips = [];
  389. // ── 初始化 ────────────────────────────────────────────────────────────
  390. async function init() {
  391. document.getElementById('search-btn').addEventListener('click', triggerSearch);
  392. document.getElementById('search-input').addEventListener('keydown', e => {
  393. if (e.key === 'Enter') triggerSearch();
  394. });
  395. try {
  396. const r = await fetch(API + '/dimensions');
  397. if (r.ok) {
  398. dims = await r.json();
  399. renderSidebar();
  400. }
  401. } catch(e) {
  402. console.warn('Failed to load dimensions', e);
  403. document.getElementById('sidebar-card').innerHTML =
  404. '<div class="sidebar-loading" style="color:var(--text-muted);font-size:12px;padding:16px 13px">筛选项加载失败</div>';
  405. }
  406. doSearch();
  407. }
  408. function triggerSearch() {
  409. sel.query = document.getElementById('search-input').value.trim();
  410. sel.page = 1;
  411. doSearch();
  412. }
  413. // ── 侧栏渲染 ──────────────────────────────────────────────────────────
  414. function renderSidebar() {
  415. const card = document.getElementById('sidebar-card');
  416. let html = '';
  417. // 作用域
  418. html += `<div class="filter-section">
  419. <div class="section-hd open" onclick="toggleSection(this)">作用域 <span class="chevron">▼</span></div>
  420. <div class="section-bd open" id="scope-bd">`;
  421. for (const sg of (dims?.scope_groups || [])) {
  422. html += renderScopeGroup(sg);
  423. }
  424. html += `</div></div>`;
  425. // 属性维度(从 facets 动态注入)
  426. html += `<div class="filter-section" id="dim-attr-section" style="display:none">
  427. <div class="section-hd open" onclick="toggleSection(this)">属性维度 <span class="chevron">▼</span></div>
  428. <div class="section-bd open" id="dim-attr-bd"></div>
  429. </div>`;
  430. // 创作维度(从 facets 动态注入)
  431. html += `<div class="filter-section" id="dim-create-section" style="display:none">
  432. <div class="section-hd open" onclick="toggleSection(this)">创作维度 <span class="chevron">▼</span></div>
  433. <div class="section-bd open" id="dim-create-bd"></div>
  434. </div>`;
  435. // 自定义字段(section 默认隐藏,有 facets 数据时才显示)
  436. if (dims?.custom_fields?.length) {
  437. html += `<div class="filter-section" id="custom-section" style="display:none">
  438. <div class="section-hd open" onclick="toggleSection(this)">自定义索引 <span class="chevron">▼</span></div>
  439. <div class="section-bd open" id="custom-bd">`;
  440. for (const cf of dims.custom_fields) {
  441. html += renderCustomField(cf);
  442. }
  443. html += `</div></div>`;
  444. }
  445. card.innerHTML = html;
  446. bindSidebarEvents();
  447. }
  448. function renderScopeGroup(sg) {
  449. const st = sg.scope_type;
  450. const label = SCOPE_LABELS[st] || st;
  451. return `<div class="sub-group" id="sg-${st}">
  452. <div class="sub-label">${label}</div>
  453. <div class="sem-wrap">
  454. <input class="semantic-input" type="text" id="sem-${st}" placeholder="语义搜索${label}标签…">
  455. <span class="sem-spinner" id="sem-${st}-sp"></span>
  456. </div>
  457. <div class="suggest-list" id="sug-${st}"></div>
  458. </div>`;
  459. }
  460. function renderCustomField(cf) {
  461. const label = esc(cf.description || cf.key);
  462. let html = `<div class="sub-group" id="cf-${esc(cf.key)}"><div class="sub-label">${label}</div>`;
  463. if (cf.value_type === 'str') {
  464. if (cf.semantic_enabled) {
  465. html += `<div class="sem-wrap">
  466. <input class="semantic-input" type="text" id="csem-${esc(cf.key)}" placeholder="语义搜索${label}…">
  467. <span class="sem-spinner" id="csem-${esc(cf.key)}-sp"></span>
  468. </div>`;
  469. }
  470. html += `<div class="suggest-list" id="csug-${esc(cf.key)}"></div>`;
  471. } else if (cf.value_type === 'num') {
  472. html += `<div class="range-row">
  473. <input class="range-inp" type="number" id="cgte-${esc(cf.key)}" placeholder="最小">
  474. <span class="range-sep">—</span>
  475. <input class="range-inp" type="number" id="clte-${esc(cf.key)}" placeholder="最大">
  476. </div>`;
  477. } else if (cf.value_type === 'date') {
  478. html += `<div class="range-row">
  479. <input class="range-inp" type="date" id="cgte-${esc(cf.key)}">
  480. <span class="range-sep">—</span>
  481. <input class="range-inp" type="date" id="clte-${esc(cf.key)}">
  482. </div>`;
  483. }
  484. html += `</div>`;
  485. return html;
  486. }
  487. function bindSidebarEvents() {
  488. // 作用域复选框
  489. document.querySelectorAll('input[data-scope]').forEach(cb => {
  490. cb.addEventListener('change', () => {
  491. const st = cb.dataset.scope, val = cb.dataset.val;
  492. if (cb.checked) sel.scopes[st].add(val); else sel.scopes[st].delete(val);
  493. sel.page = 1; doSearch();
  494. });
  495. });
  496. // 作用域语义输入
  497. const debouncedSuggestScope = debounce((st, q) => {
  498. if (q) suggestScope(st, q);
  499. else clearPortalDropdown();
  500. }, 300);
  501. for (const sg of (dims?.scope_groups || [])) {
  502. const st = sg.scope_type;
  503. const inp = document.getElementById('sem-' + st);
  504. if (!inp) continue;
  505. inp.addEventListener('input', () => {
  506. sel.scopeSemantic[st] = inp.value.trim();
  507. debouncedSuggestScope(st, inp.value.trim());
  508. });
  509. inp.addEventListener('keydown', e => { if (e.key === 'Enter') { sel.page = 1; doSearch(); } });
  510. inp.addEventListener('blur', clearPortalDropdown);
  511. }
  512. // 自定义字段复选框
  513. document.querySelectorAll('input[data-ckey]').forEach(cb => {
  514. cb.addEventListener('change', () => {
  515. const key = cb.dataset.ckey, val = cb.dataset.val;
  516. if (!sel.customValues[key]) sel.customValues[key] = new Set();
  517. if (cb.checked) sel.customValues[key].add(val); else sel.customValues[key].delete(val);
  518. sel.page = 1; doSearch();
  519. });
  520. });
  521. // 自定义语义输入
  522. const debouncedSuggestCustom = debounce((key, q) => {
  523. if (q) suggestCustom(key, q);
  524. else clearPortalDropdown();
  525. }, 300);
  526. for (const cf of (dims?.custom_fields || [])) {
  527. if (cf.value_type !== 'str' || !cf.semantic_enabled) continue;
  528. const inp = document.getElementById('csem-' + cf.key);
  529. if (!inp) continue;
  530. inp.addEventListener('input', () => {
  531. sel.customSemantics[cf.key] = inp.value.trim();
  532. debouncedSuggestCustom(cf.key, inp.value.trim());
  533. });
  534. inp.addEventListener('keydown', e => { if (e.key === 'Enter') { sel.page = 1; doSearch(); } });
  535. inp.addEventListener('blur', clearPortalDropdown);
  536. }
  537. // 自定义范围输入
  538. for (const cf of (dims?.custom_fields || [])) {
  539. if (cf.value_type !== 'num' && cf.value_type !== 'date') continue;
  540. const gteEl = document.getElementById('cgte-' + cf.key);
  541. const lteEl = document.getElementById('clte-' + cf.key);
  542. const onChange = debounce(() => {
  543. if (!sel.customRanges[cf.key]) sel.customRanges[cf.key] = {};
  544. if (cf.value_type === 'num') {
  545. sel.customRanges[cf.key].gte = gteEl?.value !== '' ? parseFloat(gteEl.value) : null;
  546. sel.customRanges[cf.key].lte = lteEl?.value !== '' ? parseFloat(lteEl.value) : null;
  547. } else {
  548. sel.customRanges[cf.key].gte = gteEl?.value ? new Date(gteEl.value).getTime() : null;
  549. sel.customRanges[cf.key].lte = lteEl?.value ? new Date(lteEl.value + 'T23:59:59').getTime() : null;
  550. }
  551. sel.page = 1; doSearch();
  552. }, 500);
  553. gteEl?.addEventListener('input', onChange);
  554. lteEl?.addEventListener('input', onChange);
  555. }
  556. }
  557. // ── 建议 API ──────────────────────────────────────────────────────────
  558. async function suggestScope(scopeType, q) {
  559. const inputEl = document.getElementById('sem-' + scopeType);
  560. const sp = document.getElementById('sem-' + scopeType + '-sp');
  561. if (!inputEl) return;
  562. if (sp) sp.classList.add('show');
  563. try {
  564. const r = await fetch(`${API}/scope-tags/suggest?scope_type=${encodeURIComponent(scopeType)}&q=${encodeURIComponent(q)}`);
  565. if (!r.ok) return;
  566. const data = await r.json();
  567. renderSuggestDropdown(inputEl, data.tags || [], val => {
  568. sel.scopes[scopeType].add(val);
  569. inputEl.value = '';
  570. sel.scopeSemantic[scopeType] = '';
  571. addInlineScopeTag(scopeType, val);
  572. sel.page = 1; doSearch();
  573. });
  574. } catch(e) {
  575. } finally {
  576. if (sp) sp.classList.remove('show');
  577. }
  578. }
  579. async function suggestCustom(key, q) {
  580. const inputEl = document.getElementById('csem-' + key);
  581. const sp = document.getElementById('csem-' + key + '-sp');
  582. if (!inputEl) return;
  583. if (sp) sp.classList.add('show');
  584. try {
  585. const r = await fetch(`${API}/custom-values/suggest?key=${encodeURIComponent(key)}&q=${encodeURIComponent(q)}`);
  586. if (!r.ok) return;
  587. const data = await r.json();
  588. renderSuggestDropdown(inputEl, data.values || [], val => {
  589. if (!sel.customValues[key]) sel.customValues[key] = new Set();
  590. sel.customValues[key].add(val);
  591. inputEl.value = '';
  592. sel.customSemantics[key] = '';
  593. addInlineCustomValue(key, val);
  594. sel.page = 1; doSearch();
  595. });
  596. } catch(e) {
  597. } finally {
  598. if (sp) sp.classList.remove('show');
  599. }
  600. }
  601. function renderSuggestDropdown(inputEl, items, onSelect) {
  602. clearPortalDropdown();
  603. if (!items.length) return;
  604. const rect = inputEl.getBoundingClientRect();
  605. const div = document.createElement('div');
  606. div.className = 'suggest-dropdown';
  607. div.style.cssText = `position:fixed;z-index:9999;top:${rect.bottom + 2}px;left:${rect.left}px;width:${rect.width}px;`;
  608. items.forEach(item => {
  609. const el = document.createElement('div');
  610. el.className = 'suggest-item';
  611. el.textContent = item;
  612. el.addEventListener('mousedown', e => e.preventDefault());
  613. el.addEventListener('click', () => { onSelect(item); clearPortalDropdown(); });
  614. div.appendChild(el);
  615. });
  616. document.body.appendChild(div);
  617. _portalDropdown = div;
  618. }
  619. function addInlineScopeTag(scopeType, val) {
  620. const container = document.getElementById('sg-' + scopeType);
  621. if (!container) return;
  622. const existing = container.querySelector(`input[data-val="${CSS.escape(val)}"]`);
  623. if (existing) { existing.checked = true; return; }
  624. const label = document.createElement('label');
  625. label.className = 'opt';
  626. label.innerHTML = `<input type="checkbox" checked data-scope="${esc(scopeType)}" data-val="${esc(val)}"><span class="opt-text">${esc(val)}</span>`;
  627. label.querySelector('input').addEventListener('change', function() {
  628. if (this.checked) sel.scopes[scopeType].add(val); else sel.scopes[scopeType].delete(val);
  629. sel.page = 1; doSearch();
  630. });
  631. const sugEl = container.querySelector('.suggest-list');
  632. if (sugEl) container.insertBefore(label, sugEl); else container.appendChild(label);
  633. }
  634. function addInlineCustomValue(key, val) {
  635. const container = document.getElementById('cf-' + key);
  636. if (!container) return;
  637. const existing = container.querySelector(`input[data-val="${CSS.escape(val)}"]`);
  638. if (existing) { existing.checked = true; return; }
  639. const label = document.createElement('label');
  640. label.className = 'opt';
  641. label.innerHTML = `<input type="checkbox" checked data-ckey="${esc(key)}" data-val="${esc(val)}"><span class="opt-text">${esc(val)}</span>`;
  642. label.querySelector('input').addEventListener('change', function() {
  643. if (!sel.customValues[key]) sel.customValues[key] = new Set();
  644. if (this.checked) sel.customValues[key].add(val); else sel.customValues[key].delete(val);
  645. sel.page = 1; doSearch();
  646. });
  647. const sugEl = container.querySelector('.suggest-list');
  648. if (sugEl) container.insertBefore(label, sugEl); else container.appendChild(label);
  649. }
  650. // ── 搜索请求 ──────────────────────────────────────────────────────────
  651. function buildRequest() {
  652. const req = {
  653. page: sel.page,
  654. page_size: 20,
  655. include_facets: true,
  656. highlight: !!sel.query,
  657. include_content: true,
  658. include_matched_conditions: true,
  659. };
  660. if (sel.query) req.query = sel.query;
  661. const scopes = [];
  662. for (const st of SCOPE_TYPES) {
  663. const values = [...sel.scopes[st]];
  664. const semantic = sel.scopeSemantic[st];
  665. if (values.length || semantic) {
  666. const sf = {scope_type: st};
  667. if (values.length) sf.values = values;
  668. if (semantic) sf.semantic_query = semantic;
  669. scopes.push(sf);
  670. }
  671. }
  672. if (scopes.length) req.scopes = scopes;
  673. if (sel.dimAttr.size) req.dim_attributes = [...sel.dimAttr];
  674. if (sel.dimCreate.size) req.dim_creations = [...sel.dimCreate];
  675. const customFilters = [];
  676. const allKeys = new Set([
  677. ...Object.keys(sel.customValues),
  678. ...Object.keys(sel.customSemantics),
  679. ...Object.keys(sel.customRanges),
  680. ]);
  681. for (const key of allKeys) {
  682. const cf = {key};
  683. const vals = [...(sel.customValues[key] || [])];
  684. const sem = sel.customSemantics[key];
  685. const rng = sel.customRanges[key];
  686. if (vals.length) cf.values = vals;
  687. if (sem) cf.semantic_query = sem;
  688. if (rng?.gte != null) cf.gte = rng.gte;
  689. if (rng?.lte != null) cf.lte = rng.lte;
  690. if (Object.keys(cf).length > 1) customFilters.push(cf);
  691. }
  692. if (customFilters.length) req.custom_filters = customFilters;
  693. return req;
  694. }
  695. async function doSearch() {
  696. renderChips();
  697. document.getElementById('results-list').innerHTML =
  698. '<div class="state-box"><div class="state-icon">⏳</div><p>搜索中…</p></div>';
  699. let resp;
  700. try {
  701. const r = await fetch(API + '/search', {
  702. method: 'POST',
  703. headers: {'Content-Type': 'application/json'},
  704. body: JSON.stringify(buildRequest()),
  705. });
  706. if (!r.ok) {
  707. const msg = (await r.json().catch(() => ({}))).detail || r.statusText;
  708. throw new Error(msg);
  709. }
  710. resp = await r.json();
  711. } catch(e) {
  712. document.getElementById('results-count').textContent = '';
  713. document.getElementById('results-list').innerHTML =
  714. `<div class="state-box error"><div class="state-icon">⚠️</div><p>搜索出错:${esc(e.message)}</p></div>`;
  715. return;
  716. }
  717. renderResults(resp);
  718. if (resp.facets) updateSidebarFacets(resp.facets);
  719. }
  720. // ── 渲染结果 ──────────────────────────────────────────────────────────
  721. function renderResults(data) {
  722. document.getElementById('results-count').innerHTML =
  723. `找到 <strong>${data.total.toLocaleString()}</strong> 条相关知识`;
  724. document.getElementById('sort-label').textContent =
  725. sel.query ? '按相关度排序' : '按最新更新排序';
  726. const list = document.getElementById('results-list');
  727. if (!data.hits.length) {
  728. list.innerHTML = '<div class="state-box"><div class="state-icon">📭</div><p>未找到匹配的知识条目,请调整搜索条件</p></div>';
  729. } else {
  730. list.innerHTML = data.hits.map(renderCard).join('');
  731. }
  732. renderPagination(data.total, data.page, data.page_size);
  733. }
  734. function renderCard(hit) {
  735. let titleHtml = esc(hit.title || '(无标题)');
  736. if (hit.highlight?.title?.[0]) titleHtml = hit.highlight.title[0];
  737. const score = hit.score != null
  738. ? `<span class="score-badge">相关度 ${hit.score.toFixed(2)}</span>` : '';
  739. let meta = '';
  740. if (hit.source_type) meta += `<span class="source-badge">${esc(hit.source_type)}</span>`;
  741. if (hit.author) meta += `<span>${esc(hit.author)}</span>`;
  742. if (hit.author && hit.source_title) meta += '<span class="meta-dot">·</span>';
  743. if (hit.source_title) meta += `<span>${esc(hit.source_title)}</span>`;
  744. // 从 matched_conditions 构建命中查找表
  745. const mc = hit.matched_conditions;
  746. const hitScopes = {}; // scope_type → Set<string>
  747. const hitCustom = {}; // key → Set<string>(str 类型)
  748. const hitRange = {}; // key → bool(num/date 类型)
  749. const hitDimAttr = new Set(mc?.dim_attributes || []);
  750. const hitDimCreate = new Set(mc?.dim_creations || []);
  751. for (const ms of (mc?.scopes || [])) hitScopes[ms.scope_type] = new Set(ms.matched_values);
  752. for (const cm of (mc?.custom || [])) {
  753. if (cm.matched_values != null) hitCustom[cm.key] = new Set(cm.matched_values);
  754. if (cm.in_range != null) hitRange[cm.key] = cm.in_range;
  755. }
  756. let tags = '';
  757. const scopeDefs = [
  758. ['s','scope_substance','substance','实质'],
  759. ['fo','scope_form','form','形式'],
  760. ['i','scope_intent','intent','意图'],
  761. ['e','scope_effect','effect','作用'],
  762. ['fe','scope_feeling','feeling','感受'],
  763. ];
  764. for (const [cls, field, st, label] of scopeDefs) {
  765. const hitSet = hitScopes[st] || new Set();
  766. for (const t of (hit[field] || [])) {
  767. const h = hitSet.has(t) ? ' hit' : '';
  768. tags += `<span class="tag ${cls}${h}" title="${h ? '命中筛选条件' : ''}"><span class="tag-pre">${label}</span>${esc(t)}</span>`;
  769. }
  770. }
  771. for (const d of (hit.dim_attributes || [])) {
  772. const h = hitDimAttr.has(d) ? ' hit' : '';
  773. tags += `<span class="tag d${h}" title="${h ? '命中筛选条件' : ''}">${esc(d)}</span>`;
  774. }
  775. for (const d of (hit.dim_creations || [])) {
  776. const h = hitDimCreate.has(d) ? ' hit' : '';
  777. tags += `<span class="tag d${h}" title="${h ? '命中筛选条件' : ''}">${esc(d)}</span>`;
  778. }
  779. let extHtml = '';
  780. for (const item of (hit.custom_ext || [])) {
  781. let val = item.value;
  782. if (item.type === 'date' && typeof val === 'number') {
  783. val = new Date(val).toLocaleDateString('zh-CN');
  784. }
  785. const isHit = item.type === 'str'
  786. ? hitCustom[item.key]?.has(String(item.value ?? ''))
  787. : hitRange[item.key] === true;
  788. const h = isHit ? ' hit' : '';
  789. extHtml += `<span class="ext-item${h}" title="${h ? '命中筛选条件' : ''}"><span class="ext-key">${esc(item.key)}:</span><span class="ext-val">${esc(String(val ?? ''))}</span></span>`;
  790. }
  791. const updatedAt = hit.updated_at
  792. ? new Date(hit.updated_at).toLocaleDateString('zh-CN') : '';
  793. // 正文展开区:尝试格式化 JSON,否则原样展示
  794. let contentSection = '';
  795. if (hit.content) {
  796. let display = hit.content;
  797. try { display = JSON.stringify(JSON.parse(hit.content), null, 2); } catch {}
  798. contentSection = `
  799. <div class="content-toggle" onclick="this.classList.toggle('open');this.nextElementSibling.classList.toggle('open')">
  800. <span>正文</span><span class="content-caret">▾</span>
  801. </div>
  802. <div class="content-body">
  803. <pre class="content-pre">${esc(display)}</pre>
  804. </div>`;
  805. }
  806. return `<div class="card">
  807. <div class="card-top"><div class="card-title">${titleHtml}</div>${score}</div>
  808. ${meta ? `<div class="card-meta">${meta}</div>` : ''}
  809. ${tags ? `<div class="tag-row">${tags}</div>` : ''}
  810. ${contentSection}
  811. <div class="card-foot">
  812. <div class="ext-row">${extHtml}</div>
  813. <span class="card-time">${updatedAt ? updatedAt + ' 更新' : ''}</span>
  814. </div>
  815. </div>`;
  816. }
  817. // ── 分页 ──────────────────────────────────────────────────────────────
  818. function renderPagination(total, page, pageSize) {
  819. const totalPages = Math.ceil(total / pageSize);
  820. const pg = document.getElementById('pagination');
  821. if (totalPages <= 1) { pg.innerHTML = ''; return; }
  822. let html = `<button class="pg-btn" onclick="goPage(${page-1})" ${page<=1?'disabled':''}>‹</button>`;
  823. const pages = buildPageList(page, totalPages);
  824. let prev = null;
  825. for (const p of pages) {
  826. if (prev !== null && p - prev > 1) html += '<span class="pg-dots">…</span>';
  827. html += `<button class="pg-btn ${p===page?'active':''}" onclick="goPage(${p})">${p}</button>`;
  828. prev = p;
  829. }
  830. html += `<button class="pg-btn" onclick="goPage(${page+1})" ${page>=totalPages?'disabled':''}>›</button>`;
  831. pg.innerHTML = html;
  832. }
  833. function buildPageList(cur, total) {
  834. const s = new Set([1, total]);
  835. for (let p = Math.max(1, cur-1); p <= Math.min(total, cur+1); p++) s.add(p);
  836. return [...s].sort((a,b) => a-b);
  837. }
  838. function goPage(p) {
  839. sel.page = p;
  840. doSearch();
  841. window.scrollTo({top: 0, behavior: 'smooth'});
  842. }
  843. // ── Facets → 侧栏 ─────────────────────────────────────────────────────
  844. function updateSidebarFacets(facets) {
  845. // 属性维度 / 创作维度:整体替换
  846. updateFacetSection(
  847. 'dim-attr-section', 'dim-attr-bd',
  848. facets.dim_attributes || [],
  849. sel.dimAttr, 'data-dim-attr',
  850. cb => { const v = cb.dataset.dimAttr; cb.checked ? sel.dimAttr.add(v) : sel.dimAttr.delete(v); sel.page=1; doSearch(); }
  851. );
  852. updateFacetSection(
  853. 'dim-create-section', 'dim-create-bd',
  854. facets.dim_creations || [],
  855. sel.dimCreate, 'data-dim-create',
  856. cb => { const v = cb.dataset.dimCreate; cb.checked ? sel.dimCreate.add(v) : sel.dimCreate.delete(v); sel.page=1; doSearch(); }
  857. );
  858. // 作用域标签:完全由 facets 驱动,移除消失的项、补充新出现的项
  859. const scopeMap = Object.fromEntries((facets.scopes || []).map(s => [s.scope_type, s.buckets || []]));
  860. for (const st of SCOPE_TYPES) {
  861. const buckets = scopeMap[st] || [];
  862. const bucketMap = Object.fromEntries(buckets.map(b => [b.value, b.count]));
  863. const sgContainer = document.getElementById('sg-' + st);
  864. if (!sgContainer) continue;
  865. // 移除不在当前 facets 且未被选中的项
  866. sgContainer.querySelectorAll('label[data-facet-src]').forEach(label => {
  867. const val = label.querySelector('input')?.dataset.val;
  868. if (val && bucketMap[val] == null && !(sel.scopes[st]?.has(val))) label.remove();
  869. });
  870. // 更新已存在项的计数,补充 facets 中新出现的项
  871. const sugEl = sgContainer.querySelector('.suggest-list');
  872. for (const b of buckets) {
  873. const existing = sgContainer.querySelector(`input[data-val="${CSS.escape(b.value)}"]`);
  874. if (existing) {
  875. syncCountBadge(existing.closest('.opt'), b.count);
  876. continue;
  877. }
  878. const label = document.createElement('label');
  879. label.className = 'opt';
  880. label.dataset.facetSrc = 'true';
  881. const chk = sel.scopes[st]?.has(b.value) ? 'checked' : '';
  882. label.innerHTML = `<input type="checkbox" ${chk} data-scope="${esc(st)}" data-val="${esc(b.value)}"><span class="opt-text">${esc(b.value)}</span><span class="opt-count">${b.count}</span>`;
  883. label.querySelector('input').addEventListener('change', function() {
  884. if (this.checked) sel.scopes[st].add(b.value); else sel.scopes[st].delete(b.value);
  885. sel.page = 1; doSearch();
  886. });
  887. if (sugEl) sgContainer.insertBefore(label, sugEl); else sgContainer.appendChild(label);
  888. }
  889. }
  890. // 自定义字段
  891. updateCustomExtFacets(facets.custom_ext || []);
  892. }
  893. function updateFacetSection(sectionId, bdId, buckets, selSet, dataAttr, onChange) {
  894. const section = document.getElementById(sectionId);
  895. const bd = document.getElementById(bdId);
  896. if (!section || !bd) return;
  897. if (!buckets.length) { section.style.display = 'none'; return; }
  898. section.style.display = '';
  899. let html = '';
  900. for (const b of buckets) {
  901. const checked = selSet.has(b.value) ? 'checked' : '';
  902. html += `<label class="opt">
  903. <input type="checkbox" ${checked} ${dataAttr}="${esc(b.value)}">
  904. <span class="opt-text">${esc(b.value)}</span>
  905. <span class="opt-count">${b.count}</span>
  906. </label>`;
  907. }
  908. bd.innerHTML = html;
  909. bd.querySelectorAll(`input[${dataAttr}]`).forEach(cb => {
  910. cb.addEventListener('change', () => onChange(cb));
  911. });
  912. }
  913. // 自定义字段 facets 处理:key 本身的显隐也由 facets 驱动
  914. function updateCustomExtFacets(customExtFacets) {
  915. if (!dims?.custom_fields?.length) return;
  916. const facetMap = Object.fromEntries(customExtFacets.map(f => [f.key, f]));
  917. let anyVisible = false;
  918. for (const cf of dims.custom_fields) {
  919. const container = document.getElementById('cf-' + cf.key);
  920. if (!container) continue;
  921. const facet = facetMap[cf.key];
  922. // 有活跃筛选时即使 facets 无数据也保留显示
  923. const hasActiveFilter =
  924. (cf.value_type === 'str' &&
  925. (sel.customValues[cf.key]?.size > 0 || !!sel.customSemantics[cf.key])) ||
  926. ((cf.value_type === 'num' || cf.value_type === 'date') &&
  927. (sel.customRanges[cf.key]?.gte != null || sel.customRanges[cf.key]?.lte != null));
  928. const hasFacetData =
  929. (cf.value_type === 'str' && facet?.buckets?.length > 0) ||
  930. ((cf.value_type === 'num' || cf.value_type === 'date') && facet?.stats?.count > 0);
  931. if (!hasFacetData && !hasActiveFilter) {
  932. container.style.display = 'none';
  933. continue;
  934. }
  935. container.style.display = '';
  936. anyVisible = true;
  937. if (cf.value_type === 'str') {
  938. updateCustomStrCounts(cf.key, container, facet?.buckets || []);
  939. } else if (cf.value_type === 'num' && facet?.stats?.count > 0) {
  940. const s = facet.stats;
  941. const gteEl = document.getElementById('cgte-' + cf.key);
  942. const lteEl = document.getElementById('clte-' + cf.key);
  943. if (gteEl && s.min != null) gteEl.placeholder = `最小 (${parseFloat(s.min.toFixed(2))})`;
  944. if (lteEl && s.max != null) lteEl.placeholder = `最大 (${parseFloat(s.max.toFixed(2))})`;
  945. }
  946. // date 类型:range input 不显示 placeholder,仅控制可见性
  947. }
  948. // 整个"自定义索引"区块:有可见 key 才展示
  949. const section = document.getElementById('custom-section');
  950. if (section) section.style.display = anyVisible ? '' : 'none';
  951. }
  952. function updateCustomStrCounts(key, container, buckets) {
  953. const bucketMap = Object.fromEntries(buckets.map(b => [b.value, b.count]));
  954. // 移除不在当前 facets 且未被选中的项
  955. container.querySelectorAll('label[data-facet-src]').forEach(label => {
  956. const val = label.querySelector('input')?.dataset.val;
  957. if (val && bucketMap[val] == null && !(sel.customValues[key]?.has(val))) label.remove();
  958. });
  959. // 更新已存在项的计数,补充 facets 中新出现的项
  960. const sugEl = container.querySelector('.suggest-list');
  961. for (const b of buckets) {
  962. const existing = container.querySelector(`input[data-val="${CSS.escape(b.value)}"]`);
  963. if (existing) {
  964. syncCountBadge(existing.closest('.opt'), b.count);
  965. continue;
  966. }
  967. const label = document.createElement('label');
  968. label.className = 'opt';
  969. label.dataset.facetSrc = 'true';
  970. const chk = sel.customValues[key]?.has(b.value) ? 'checked' : '';
  971. label.innerHTML = `<input type="checkbox" ${chk} data-ckey="${esc(key)}" data-val="${esc(b.value)}"><span class="opt-text">${esc(b.value)}</span><span class="opt-count">${b.count}</span>`;
  972. label.querySelector('input').addEventListener('change', function() {
  973. if (!sel.customValues[key]) sel.customValues[key] = new Set();
  974. if (this.checked) sel.customValues[key].add(b.value); else sel.customValues[key].delete(b.value);
  975. sel.page = 1; doSearch();
  976. });
  977. if (sugEl) container.insertBefore(label, sugEl); else container.appendChild(label);
  978. }
  979. }
  980. // 在 .opt 元素上同步 .opt-count 徽章;count 为 undefined 时清除徽章
  981. function syncCountBadge(optEl, count) {
  982. if (!optEl) return;
  983. let el = optEl.querySelector('.opt-count');
  984. if (count != null) {
  985. if (!el) { el = document.createElement('span'); el.className = 'opt-count'; optEl.appendChild(el); }
  986. el.textContent = count;
  987. } else if (el) {
  988. el.remove();
  989. }
  990. }
  991. // ── Chips 栏 ──────────────────────────────────────────────────────────
  992. function renderChips() {
  993. _chips = [];
  994. for (const st of SCOPE_TYPES) {
  995. for (const val of sel.scopes[st]) {
  996. _chips.push({
  997. label: `${SCOPE_LABELS[st]}:${val}`,
  998. remove: () => { sel.scopes[st].delete(val); uncheckInput(`input[data-scope="${CSS.escape(st)}"][data-val="${CSS.escape(val)}"]`); sel.page=1; doSearch(); }
  999. });
  1000. }
  1001. if (sel.scopeSemantic[st]) {
  1002. _chips.push({
  1003. label: `${SCOPE_LABELS[st]} 语义:${sel.scopeSemantic[st]}`,
  1004. remove: () => {
  1005. sel.scopeSemantic[st] = '';
  1006. const inp = document.getElementById('sem-' + st);
  1007. if (inp) inp.value = '';
  1008. sel.page = 1; doSearch();
  1009. }
  1010. });
  1011. }
  1012. }
  1013. for (const val of sel.dimAttr) _chips.push({label:`属性:${val}`, remove:()=>{sel.dimAttr.delete(val); uncheckInput(`input[data-dim-attr="${CSS.escape(val)}"]`); sel.page=1; doSearch();}});
  1014. for (const val of sel.dimCreate) _chips.push({label:`创作:${val}`, remove:()=>{sel.dimCreate.delete(val); uncheckInput(`input[data-dim-create="${CSS.escape(val)}"]`); sel.page=1; doSearch();}});
  1015. for (const [key, vals] of Object.entries(sel.customValues)) {
  1016. for (const val of vals) {
  1017. _chips.push({
  1018. label: `${key}:${val}`,
  1019. remove: () => { sel.customValues[key].delete(val); uncheckInput(`input[data-ckey="${CSS.escape(key)}"][data-val="${CSS.escape(val)}"]`); sel.page=1; doSearch(); }
  1020. });
  1021. }
  1022. }
  1023. for (const [key, sem] of Object.entries(sel.customSemantics)) {
  1024. if (!sem) continue;
  1025. _chips.push({
  1026. label: `${key} 语义:${sem}`,
  1027. remove: () => { sel.customSemantics[key]=''; const i=document.getElementById('csem-'+key); if(i)i.value=''; sel.page=1; doSearch(); }
  1028. });
  1029. }
  1030. for (const [key, rng] of Object.entries(sel.customRanges)) {
  1031. if (rng.gte == null && rng.lte == null) continue;
  1032. const parts = [];
  1033. if (rng.gte != null) parts.push(`≥ ${rng.gte}`);
  1034. if (rng.lte != null) parts.push(`≤ ${rng.lte}`);
  1035. _chips.push({
  1036. label: `${key}:${parts.join(' ')}`,
  1037. remove: () => {
  1038. sel.customRanges[key] = {};
  1039. const g = document.getElementById('cgte-'+key), l = document.getElementById('clte-'+key);
  1040. if(g) g.value=''; if(l) l.value='';
  1041. sel.page=1; doSearch();
  1042. }
  1043. });
  1044. }
  1045. const bar = document.getElementById('chips-bar');
  1046. if (!_chips.length) { bar.style.display = 'none'; return; }
  1047. bar.style.display = '';
  1048. let html = '<span class="chips-label">已选筛选:</span>';
  1049. _chips.forEach((c, i) => {
  1050. html += `<span class="chip" data-chip="${i}">${esc(c.label)}<span class="chip-x">×</span></span>`;
  1051. });
  1052. html += '<span class="chip-clear" id="chip-clear-all">清空全部</span>';
  1053. bar.innerHTML = html;
  1054. bar.querySelectorAll('[data-chip]').forEach(el => {
  1055. el.addEventListener('click', () => { _chips[+el.dataset.chip].remove(); });
  1056. });
  1057. document.getElementById('chip-clear-all')?.addEventListener('click', clearAllFilters);
  1058. }
  1059. function uncheckInput(selector) {
  1060. const el = document.querySelector(selector);
  1061. if (el) el.checked = false;
  1062. }
  1063. function clearAllFilters() {
  1064. SCOPE_TYPES.forEach(st => { sel.scopes[st].clear(); sel.scopeSemantic[st] = ''; const i=document.getElementById('sem-'+st); if(i)i.value=''; });
  1065. sel.dimAttr.clear();
  1066. sel.dimCreate.clear();
  1067. sel.customValues = {};
  1068. sel.customSemantics= {};
  1069. sel.customRanges = {};
  1070. document.querySelectorAll('input[data-scope],input[data-ckey],input[data-dim-attr],input[data-dim-create]').forEach(cb => cb.checked = false);
  1071. document.querySelectorAll('.range-inp').forEach(inp => inp.value = '');
  1072. sel.page = 1;
  1073. doSearch();
  1074. }
  1075. // ── 折叠展开 ──────────────────────────────────────────────────────────
  1076. function toggleSection(hd) {
  1077. hd.classList.toggle('open');
  1078. hd.nextElementSibling.classList.toggle('open');
  1079. }
  1080. document.addEventListener('DOMContentLoaded', init);
  1081. </script>
  1082. </body>
  1083. </html>