|
|
@@ -3,9 +3,11 @@ import { fetchMethods, fetchQueries, fetchSearchSummary } from '../api.js'
|
|
|
import Pager from '../components/Pager.jsx'
|
|
|
|
|
|
const SIZE = 30
|
|
|
+// 三种 query 生成方法的展示顺序（① 实质 ② 形式 ④ 多轴）
|
|
|
+const ORDER = ['实质 × 创作阶段 × 需求', '形式 + 载体位置', '多轴正交组合']
|
|
|
|
|
|
-// 生成的 query 列表（按打法筛 + 分页）。每条 query 末列挂「真实搜索结果」按钮：
|
|
|
-// 搜到结果 → 可跳转进详情；搜过没结果 / 没搜过 → 灰色不可点，状态如实标注。
|
|
|
+// 生成的 query 列表（按打法筛 + 分页）。打法 = 横向三按钮，点击切面板。每条 query 末列挂
|
|
|
+// 「真实搜索结果」按钮：搜到结果 → 可跳转进详情；搜过没结果 / 没搜过 → 灰色不可点。
|
|
|
export default function QueriesPage() {
|
|
|
const [methods, setMethods] = useState([])
|
|
|
const [method, setMethod] = useState('')
|
|
|
@@ -13,19 +15,26 @@ export default function QueriesPage() {
|
|
|
const [data, setData] = useState({ total: 0, page: 1, size: SIZE, items: [] })
|
|
|
const [summary, setSummary] = useState({})
|
|
|
|
|
|
- useEffect(() => { fetchMethods('queries').then(setMethods) }, [])
|
|
|
+ useEffect(() => {
|
|
|
+ fetchMethods('queries').then((ms) => {
|
|
|
+ const ordered = [...ms].sort((a, b) => (ORDER.indexOf(a) + 1 || 99) - (ORDER.indexOf(b) + 1 || 99))
|
|
|
+ setMethods(ordered)
|
|
|
+ if (ordered.length) setMethod((m) => m || ordered[0]) // 默认选第一个面板
|
|
|
+ })
|
|
|
+ }, [])
|
|
|
useEffect(() => { fetchSearchSummary().then(setSummary) }, [])
|
|
|
- useEffect(() => { fetchQueries({ method, page, size: SIZE }).then(setData) }, [method, page])
|
|
|
+ useEffect(() => { if (method) fetchQueries({ method, page, size: SIZE }).then(setData) }, [method, page])
|
|
|
|
|
|
- const onMethod = (m) => { setMethod(m); setPage(1) }
|
|
|
+ const pick = (m) => { setMethod(m); setPage(1) }
|
|
|
|
|
|
return (
|
|
|
<div>
|
|
|
+ <div className="nav">
|
|
|
+ {methods.map((m) => (
|
|
|
+ <button key={m} className={method === m ? 'on' : ''} onClick={() => pick(m)}>{m}</button>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
<div className="filters">
|
|
|
- <select value={method} onChange={(e) => onMethod(e.target.value)}>
|
|
|
- <option value="">query生成方法</option>
|
|
|
- {methods.map((m) => <option key={m} value={m}>{m}</option>)}
|
|
|
- </select>
|
|
|
<span className="count">共 {data.total} 条 query</span>
|
|
|
</div>
|
|
|
|
|
|
@@ -34,12 +43,11 @@ export default function QueriesPage() {
|
|
|
) : (
|
|
|
<table>
|
|
|
<thead>
|
|
|
- <tr><th>打法</th><th>正交轴</th><th>query</th><th>真实搜索结果</th></tr>
|
|
|
+ <tr><th>正交轴</th><th>query</th><th>真实搜索结果</th></tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
{data.items.map((it) => (
|
|
|
<tr key={it.id}>
|
|
|
- <td><span className="tag">{it.method}</span></td>
|
|
|
<td>{Object.entries(it.axes || {}).map(([k, v]) => (
|
|
|
<span className="tag k" key={k}>{k}:{v}</span>
|
|
|
))}</td>
|
SamLee