Просмотр исходного кода

feat(mode_workflow): Query 规则 顶栏按钮 + 弹层骨架 + 维度常量

刘文武 1 неделя назад
Родитель
Сommit
008bdbd6b1
1 измененных файлов с 40 добавлено и 0 удалено
  1. 40 0
      examples/mode_workflow/index.html

+ 40 - 0
examples/mode_workflow/index.html

@@ -2118,6 +2118,7 @@
         >
           + 新建搜索
         </button>
+        <button class="btn" id="btn-query-rule" style="margin-left:8px">Query 规则</button>
       </div>
       <div class="ds-grid">
         <div class="card">
@@ -2415,6 +2416,22 @@
       </div>
     </div>
 
+    <!-- Query 规则组织器 弹层 -->
+    <div class="modal-bg" id="qr-modal" hidden>
+      <div class="modal" style="max-width:1180px;width:96vw;max-height:92vh;display:flex;flex-direction:column">
+        <h2>Query 词组织器</h2>
+        <div id="qr-dims" style="margin:6px 0 10px"></div>
+        <div style="display:flex;gap:8px;align-items:center;margin:6px 0 10px">
+          <button class="btn seal" id="qr-score">生成正交表 &amp; 评估高亮</button>
+          <button class="btn" id="qr-search-all" hidden>搜全部达标</button>
+          <span id="qr-hint" style="color:#888;font-size:12px"></span>
+          <div style="flex:1"></div>
+          <button class="btn" id="qr-close">关闭</button>
+        </div>
+        <div id="qr-table-wrap" style="overflow:auto;flex:1;border:1px solid #eee;border-radius:8px"></div>
+      </div>
+    </div>
+
     <script>
       /* ════ 基础 ════ */
       const $ = (s) => document.querySelector(s);
@@ -3617,6 +3634,25 @@
         log.scrollTop = log.scrollHeight;
       }
 
+      /* ════ Query 规则组织器 ════ */
+      // 扁平维度词表(移植自 query-builder.html DIMS);实质/形式 改为接口下钻,不在此。
+      const QR_FLAT = [
+        { id: "tool_type", label: "工具类型", items: ["AI", "桌面 APP", "云端 Web", "API·CLI", "插件扩展"] },
+        { id: "modality", label: "模态", items: ["图片", "视频"] },
+        { id: "suffix", label: "后缀", items: ["怎么做"] },
+      ];
+      const QR_TREE = [
+        { id: "substance", label: "实质", source: "实质" },
+        { id: "form", label: "形式", source: "形式" },
+      ];
+      const qrState = {
+        flat: { tool_type: null, modality: null, suffix: null },
+        treePath: { substance: [], form: [] },   // 选中节点的祖先+自身 name 路径
+        treeData: { substance: null, form: null }, // 接口返回的 {tree:[...]}
+        matrix: null,                              // /api/query_matrix
+        scores: null,                              // 最近一次评分结果 cells
+      };
+
       /* ════ 新建搜索 ════ */
       /* 渠道下拉多选(选项同 search_eval:小红书/知乎/公众号/抖音/视频号/YouTube) */
       const CHANNELS = [
@@ -3718,6 +3754,10 @@
         loadQueries();
       }
 
+      $("#btn-query-rule").onclick = () => { $("#qr-modal").hidden = false; qrOpen(); };
+      $("#qr-close").onclick = () => { $("#qr-modal").hidden = true; };
+      $("#qr-modal").onclick = (e) => { if (e.target === $("#qr-modal")) $("#qr-modal").hidden = true; };
+
       window.addEventListener("resize", () => chartRefs.forEach((c) => c.resize()));
       route();
     </script>