feat: 本次提交更新内容如下
Ai分析数据列表构建完成
This commit is contained in:
96
nkebao/src/pages/workspace/ai-analyzer/index.module.scss
Normal file
96
nkebao/src/pages/workspace/ai-analyzer/index.module.scss
Normal 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;
|
||||||
|
}
|
||||||
141
nkebao/src/pages/workspace/ai-analyzer/index.tsx
Normal file
141
nkebao/src/pages/workspace/ai-analyzer/index.tsx
Normal 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;
|
||||||
@@ -16,6 +16,7 @@ import TrafficDistribution from "@/pages/workspace/traffic-distribution/TrafficD
|
|||||||
import TrafficDistributionDetail from "@/pages/workspace/traffic-distribution/Detail";
|
import TrafficDistributionDetail from "@/pages/workspace/traffic-distribution/Detail";
|
||||||
import NewDistribution from "@/pages/workspace/traffic-distribution/NewDistribution";
|
import NewDistribution from "@/pages/workspace/traffic-distribution/NewDistribution";
|
||||||
import PlaceholderPage from "@/components/PlaceholderPage";
|
import PlaceholderPage from "@/components/PlaceholderPage";
|
||||||
|
import AiAnalyzer from "@/pages/workspace/ai-analyzer";
|
||||||
|
|
||||||
const workspaceRoutes = [
|
const workspaceRoutes = [
|
||||||
{
|
{
|
||||||
@@ -116,7 +117,7 @@ const workspaceRoutes = [
|
|||||||
// AI数据分析
|
// AI数据分析
|
||||||
{
|
{
|
||||||
path: "/workspace/ai-analyzer",
|
path: "/workspace/ai-analyzer",
|
||||||
element: <PlaceholderPage title="AI数据分析" />,
|
element: <AiAnalyzer />,
|
||||||
auth: true,
|
auth: true,
|
||||||
},
|
},
|
||||||
// AI策略优化
|
// AI策略优化
|
||||||
|
|||||||
Reference in New Issue
Block a user