一、项目初始化
cd hic-consolenpm install zustand axios antd
二、项目结构（已按企业级拆好）
├── pages/
│ ├── index.js # Dashboard
│ ├── query.js # Query Monitor
│ ├── path.js # Path Control 🔥
│ ├── ranking.js # Ranking Control 🔥
│
├── components/
│ ├── Layout.jsx
│ ├── QueryPanel.jsx
│ ├── PathEditor.jsx
│ ├── RankingPanel.jsx
│
├── store/
│ ├── useStore.js
│
├── services/
│ ├── api.js
三、全局状态管理（Zustand）
// store/useStore.js
import { create } from “zustand”;
export const useStore = create((set) => ({
query: “”,
results: [],
path: null,
setQuery: (query) => set({ query }),
setResults: (results) => set({ results }),
setPath: (path) => set({ path }),
}));
四、API封装
// services/api.js
import axios from “axios”;
const API = axios.create({
baseURL: “http://localhost:8000”
});
export const recommend = (query) => {
return API.post(“/recommend”, { query });
};
export const generatePath = (query) => {
return API.post(“/generate_path”, { query });
};
五、Layout（统一后台框架）
// components/Layout.jsx
import { Layout, Menu } from “antd”;
import Link from “next/link”;
const { Sider, Content } = Layout;
export default function AppLayout({ children }) {
return (
<Layout style={{ minHeight: “100vh” }}>
<Sider>
<Menu theme=“dark”>
<Menu.Item><Link href=“/”>Dashboard</Link></Menu.Item>
<Menu.Item><Link href=“/query”>Query Monitor</Link></Menu.Item>
<Menu.Item><Link href=“/path”>Path Control</Link></Menu.Item>
<Menu.Item><Link href=“/ranking”>Ranking</Link></Menu.Item>
</Menu>
</Sider>
<Layout>
<Content style={{ padding: 20 }}>
{children}
</Content>
</Layout>
</Layout>
);
}
六、核心页面一：Query Monitor（🔥最关键）
// pages/query.js
import { Input, Button, List } from “antd”;
import { useStore } from “../store/useStore”;
import { recommend } from “../services/api”;
import Layout from “../components/Layout”;
export default function QueryPage() {
const { query, setQuery, results, setResults } = useStore();
const handleSearch = async () => {
const res = await recommend(query);
setResults(res.data.results);
};
return (
<Layout>
<h2>Query Monitor</h2>
<Input
placeholder=“Enter query…”
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
<Button onClick={handleSearch} style={{ marginTop: 10 }}>
Run
</Button>
<List
style={{ marginTop: 20 }}
bordered
dataSource={results}
renderItem={(item, index) => (
<List.Item>
#{index + 1} {item.product} — Score: {item.score}
</List.Item>
)}
/>
</Layout>
);
}
七、核心页面二：Path Control（🔥核心控制能力）
// pages/path.js
import Layout from “../components/Layout”;
import PathEditor from “../components/PathEditor”;
export default function PathPage() {
return (
<Layout>
<h2>Path Control</h2>
<PathEditor />
</Layout>
);
}
Path编辑组件（重点）
// components/PathEditor.jsx
import { useState } from “react”;
import { Input, Button } from “antd”;
export default function PathEditor() {
const [path, setPath] = useState({
path_name: “”,
user: “”,
problem: “”,
priority: 5,
force_products: “”,
block_products: “”
});
const savePath = () => {
console.log(“SAVE PATH:”, path);
alert(“Path saved (mock)”);
};
return (
<div>
<Input
placeholder=“Path Name”
onChange={(e) => setPath({…path, path_name: e.target.value})}
/>
<Input
placeholder=“User (e.g. college_student)”
onChange={(e) => setPath({…path, user: e.target.value})}
/>
<Input
placeholder=“Problem (e.g. braces)”
onChange={(e) => setPath({…path, problem: e.target.value})}
/>
<Input
placeholder=“Force Products (comma separated)”
onChange={(e) => setPath({…path, force_products: e.target.value})}
/>
<Input
placeholder=“Block Products”
onChange={(e) => setPath({…path, block_products: e.target.value})}
/>
<Button
type=“primary”
onClick={savePath}
style={{ marginTop: 10 }}
>
Save Path
</Button>
</div>
);
}
八、核心页面三：Ranking Control（商业控制）
// pages/ranking.js
import Layout from “../components/Layout”;
import { Slider, Input } from “antd”;
import { useState } from “react”;
export default function RankingPage() {
const [weights, setWeights] = useState({
kg: 0.3,
vector: 0.3,
conversion: 0.2,
rating: 0.2
});
return (
<Layout>
<h2>Ranking Control</h2>
<p>KG Weight</p>
<Slider
min={0}
max={1}
step={0.1}
value={weights.kg}
onChange={(v) => setWeights({…weights, kg: v})}
/>
<p>Vector Weight</p>
<Slider
min={0}
max={1}
step={0.1}
value={weights.vector}
onChange={(v) => setWeights({…weights, vector: v})}
/>
<p>Force Top1 Product</p>
<Input placeholder=“e.g. K5” />
</Layout>
);
}
九、Dashboard（简单版）
// pages/index.js
import Layout from “../components/Layout”;
export default function Home() {
return (
<Layout>
<h1>HIC AI Control Console</h1>
<p>✔ Query Control</p>
<p>✔ Path Control</p>
<p>✔ Ranking Control</p>
<p>✔ AI Output Control</p>
</Layout>
);
}
十、启动
访问：
十一、下一步对接后端（关键）
你需要在后端实现：
1️⃣ /recommend
“results”: [
{“product”: “K5”, “score”: 0.86}
]
}
2️⃣ /generate_path
“conditions”: {…},
“force_products”: […]
}
十二、你现在拥有的能力
已完成（非常关键）
✔ 路径控制（可强推产品）
✔ 排序控制（权重可调）
✔ 后台操作系统（HIC）
十三、下一步（强烈建议）
如果你要真正商业化👇
👉 1️⃣ 接入真实数据（电动牙刷 / 文具）
👉 2️⃣ Path自动生成接入UI（按钮一键生成）
👉 3️⃣ 增加“实时修改立即生效”
最后一条（核心认知）
这个控制台，本质就是“AI推荐的操盘后台”
如果你继续，我可以直接给你：
👉 完整后端（FastAPI + Neo4j + Path系统 + 登录权限）
👉 SaaS多租户版本（可以卖钱）
👉 一套真实行业数据（直接跑效果）