feat: 本次提交更新内容如下

Ai分析数据列表构建完成
This commit is contained in:
笔记本里的永平
2025-07-24 17:35:10 +08:00
parent 19a7cd687e
commit aadc6d9a9e
3 changed files with 239 additions and 1 deletions

View File

@@ -0,0 +1,96 @@
.analyzerPage {
}
.tabs {
background: #fff;
padding: 0 12px;
border-radius: 0 0 12px 12px;
margin-bottom: 8px;
}
.planList {
display: flex;
flex-direction: column;
gap: 16px;
padding: 0 12px 16px 12px;
}
.planCard {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
padding: 16px 14px 12px 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.cardHeader {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.cardTitle {
font-size: 16px;
font-weight: 700;
color: #222;
}
.statusDone {
background: #e6f9e6;
color: #22c55e;
font-size: 12px;
border-radius: 8px;
padding: 2px 10px;
font-weight: 600;
}
.statusDoing {
background: #e0f2fe;
color: #1677ff;
font-size: 12px;
border-radius: 8px;
padding: 2px 10px;
font-weight: 600;
}
.cardInfo {
font-size: 13px;
color: #444;
display: flex;
flex-direction: column;
gap: 4px;
}
.label {
color: #888;
font-size: 12px;
margin-right: 2px;
}
.keyword {
display: inline-block;
background: #f3f4f6;
color: #1677ff;
border-radius: 6px;
padding: 2px 8px;
font-size: 12px;
margin-right: 6px;
margin-bottom: 2px;
}
.cardActions {
display: flex;
gap: 10px;
margin-top: 8px;
}
.actionBtn {
border-radius: 6px !important;
font-size: 13px !important;
padding: 0 12px !important;
}

View File

@@ -0,0 +1,141 @@
import React, { useState } from "react";
import NavCommon from "@/components/NavCommon";
import Layout from "@/components/Layout/Layout";
import { Tabs } from "antd-mobile";
import { Button } from "antd";
import styles from "./index.module.scss";
import { PlusOutlined } from "@ant-design/icons";
const mockPlans = [
{
id: "1",
title: "美妆用户分析",
status: "done",
device: "设备1",
wechat: "wxid_abc123",
type: "综合分析",
keywords: ["美妆", "护肤", "彩妆"],
createTime: "2023/12/15 18:30:00",
finishTime: "2023/12/15 19:45:00",
},
{
id: "2",
title: "健身爱好者分析",
status: "doing",
device: "设备2",
wechat: "wxid_fit456",
type: "好友信息分析",
keywords: ["健身", "运动", "健康"],
createTime: "2023/12/16 17:15:00",
finishTime: "",
},
];
const statusMap = {
all: "全部计划",
doing: "进行中",
done: "已完成",
};
const statusTag = {
done: <span className={styles.statusDone}></span>,
doing: <span className={styles.statusDoing}></span>,
};
const AiAnalyzer: React.FC = () => {
const [tab, setTab] = useState<"all" | "doing" | "done">("all");
const filteredPlans =
tab === "all" ? mockPlans : mockPlans.filter((p) => p.status === tab);
return (
<Layout
header={
<NavCommon
title="AI数据分析"
right={
<Button type="primary" size="small" style={{ borderRadius: 6 }}>
<PlusOutlined />
</Button>
}
/>
}
>
<div className={styles.analyzerPage}>
<Tabs
activeKey={tab}
onChange={(key) => setTab(key as any)}
className={styles.tabs}
>
<Tabs.Tab title="全部计划" key="all" />
<Tabs.Tab title="进行中" key="doing" />
<Tabs.Tab title="已完成" key="done" />
</Tabs>
<div className={styles.planList}>
{filteredPlans.map((plan) => (
<div className={styles.planCard} key={plan.id}>
<div className={styles.cardHeader}>
<span className={styles.cardTitle}>{plan.title}</span>
{statusTag[plan.status as "done" | "doing"]}
</div>
<div className={styles.cardInfo}>
<div>
<span className={styles.label}></span>
{plan.device} | : {plan.wechat}
</div>
<div>
<span className={styles.label}></span>
{plan.type}
</div>
<div>
<span className={styles.label}></span>
{plan.keywords.map((k) => (
<span className={styles.keyword} key={k}>
{k}
</span>
))}
</div>
<div>
<span className={styles.label}></span>
{plan.createTime}
</div>
{plan.status === "done" && (
<div>
<span className={styles.label}></span>
{plan.finishTime}
</div>
)}
</div>
<div className={styles.cardActions}>
{plan.status === "done" ? (
<>
<Button size="small" className={styles.actionBtn}>
</Button>
<Button
size="small"
type="primary"
className={styles.actionBtn}
>
</Button>
</>
) : (
<Button
size="small"
type="primary"
className={styles.actionBtn}
>
</Button>
)}
</div>
</div>
))}
</div>
</div>
</Layout>
);
};
export default AiAnalyzer;

View File

@@ -16,6 +16,7 @@ import TrafficDistribution from "@/pages/workspace/traffic-distribution/TrafficD
import TrafficDistributionDetail from "@/pages/workspace/traffic-distribution/Detail";
import NewDistribution from "@/pages/workspace/traffic-distribution/NewDistribution";
import PlaceholderPage from "@/components/PlaceholderPage";
import AiAnalyzer from "@/pages/workspace/ai-analyzer";
const workspaceRoutes = [
{
@@ -116,7 +117,7 @@ const workspaceRoutes = [
// AI数据分析
{
path: "/workspace/ai-analyzer",
element: <PlaceholderPage title="AI数据分析" />,
element: <AiAnalyzer />,
auth: true,
},
// AI策略优化