Sfoglia il codice sorgente

feat(mode_workflow): 新建搜索渠道改为下拉多选(小红书/知乎/公众号/抖音/视频号/YouTube)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
刘文武 4 giorni fa
parent
commit
de666bc4f4
1 ha cambiato i file con 50 aggiunte e 4 eliminazioni
  1. 50 4
      examples/mode_workflow/index.html

+ 50 - 4
examples/mode_workflow/index.html

@@ -243,11 +243,24 @@ select:focus,input:focus{border-color:var(--navy)}
 
 
 /* 弹窗 */
 /* 弹窗 */
 .modal-bg{position:fixed;inset:0;background:rgba(20,30,40,.45);z-index:70;display:grid;place-items:center}
 .modal-bg{position:fixed;inset:0;background:rgba(20,30,40,.45);z-index:70;display:grid;place-items:center}
-.modal{width:460px;background:var(--card);border-radius:10px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.4)}
-.modal h2{padding:14px 18px;background:var(--navy-deep);color:#fff;font-size:15px;letter-spacing:2px}
+.modal{width:460px;background:var(--card);border-radius:10px;box-shadow:0 24px 80px rgba(0,0,0,.4)}
+.modal h2{padding:14px 18px;background:var(--navy-deep);color:#fff;font-size:15px;letter-spacing:2px;border-radius:10px 10px 0 0}
 .modal .mb{padding:18px;display:grid;gap:12px}
 .modal .mb{padding:18px;display:grid;gap:12px}
 .modal label{font-size:12px;color:var(--ink-soft);display:grid;gap:5px}
 .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}
 .modal .mf{display:flex;justify-content:flex-end;gap:10px;padding:0 18px 18px}
+/* 渠道下拉多选 */
+.dd{position:relative}
+.dd-btn{width:100%;text-align:left;padding:7px 10px;border:1px solid var(--line-dark);border-radius:6px;
+  background:#fff;font-size:13px;color:var(--ink)}
+.dd-btn:focus{border-color:var(--navy)}
+.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:8px;
+  box-shadow:0 10px 30px rgba(20,41,64,.18);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:5px;font-size:13px;color:var(--ink);cursor:pointer}
+.dd-opt:hover{background:#f3f0e6}
+.dd-opt input{accent-color:var(--navy);margin:0;cursor:pointer}
+.dd-opt.sel{background:#eef2f8;font-weight:500}
 
 
 /* 聚类库占位 */
 /* 聚类库占位 */
 .cluster-empty{display:grid;place-items:center;min-height:60vh}
 .cluster-empty{display:grid;place-items:center;min-height:60vh}
@@ -329,7 +342,12 @@ select:focus,input:focus{border-color:var(--navy)}
       <label>Query(评估锚点,必填)<input type="text" id="s-query" placeholder="如:AI 人像 图片 生成 怎么做"></label>
       <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>解构方向<select id="s-mode"><option value="工序">工序</option><option value="工具">工具</option></select></label>
       <label>同义措辞(可选,逗号分隔)<input type="text" id="s-syn" placeholder="如:AI 人像生成 教程,AI 写真 怎么做"></label>
       <label>同义措辞(可选,逗号分隔)<input type="text" id="s-syn" placeholder="如:AI 人像生成 教程,AI 写真 怎么做"></label>
-      <label>渠道<input type="text" id="s-plat" value="xhs,gzh"></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>
       <label>每措辞每渠道上限<input type="number" id="s-max" value="10" min="1" max="50"></label>
     </div>
     </div>
     <div class="mf">
     <div class="mf">
@@ -747,6 +765,32 @@ function showTask(title, taskId, onDone){
 function hideTask(){ $('#task-panel').hidden = true; clearTimeout(pollTimer); }
 function hideTask(){ $('#task-panel').hidden = true; clearTimeout(pollTimer); }
 
 
 /* ════ 新建搜索 ════ */
 /* ════ 新建搜索 ════ */
+/* 渠道下拉多选(选项同 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').textContent = names.length ? names.join('、') + ' ▾' : '选择渠道 ▾';
+}
+$('#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 = () => {
 $('#btn-new-search').onclick = () => {
   $('#s-mode').value = state.mode === 'process' ? '工序' : '工具';   // 默认跟随当前子模式
   $('#s-mode').value = state.mode === 'process' ? '工序' : '工具';   // 默认跟随当前子模式
   $('#search-modal').hidden = false; $('#s-query').focus();
   $('#search-modal').hidden = false; $('#s-query').focus();
@@ -755,9 +799,11 @@ $('#search-modal').onclick = e => { if (e.target === $('#search-modal')) $('#sea
 $('#s-go').onclick = async () => {
 $('#s-go').onclick = async () => {
   const query = $('#s-query').value.trim();
   const query = $('#s-query').value.trim();
   if (!query) return alert('请填写 query');
   if (!query) return alert('请填写 query');
+  const plats = selectedPlatforms();
+  if (!plats.length) return alert('请至少选择一个检索渠道');
   const body = {query, synonyms: $('#s-syn').value.trim(),
   const body = {query, synonyms: $('#s-syn').value.trim(),
                 mode_type: $('#s-mode').value,
                 mode_type: $('#s-mode').value,
-                platforms: $('#s-plat').value.trim() || 'xhs,gzh',
+                platforms: plats.join(','),
                 max_count: parseInt($('#s-max').value) || 10};
                 max_count: parseInt($('#s-max').value) || 10};
   try {
   try {
     const r = await api('/api/run_search', {method:'POST', body: JSON.stringify(body)});
     const r = await api('/api/run_search', {method:'POST', body: JSON.stringify(body)});