refactor(ckbox): 重构导航组件并优化路由配置

将导航菜单数据抽离到独立文件,简化路由配置
移除未使用的NavCommon组件属性,优化微信管理页面结构
This commit is contained in:
超级老白兔
2025-09-08 18:52:06 +08:00
parent 2b48dd8722
commit eb073b04ac
5 changed files with 106 additions and 45 deletions

View File

@@ -90,7 +90,7 @@ const Mine: React.FC = () => {
description: "触客宝",
icon: <PhoneOutlined />,
count: 0,
path: "/mine/ckbox",
path: "/ckbox/weChat",
bgColor: "#fff7e6",
iconColor: "#fa8c16",
},

View File

@@ -0,0 +1,44 @@
// 菜单项接口
export interface MenuItem {
id: string;
title: string;
icon: string;
path?: string;
}
// 菜单列表数据
export const menuList: MenuItem[] = [
{
id: "dashboard",
title: "数据面板",
icon: "📊",
path: "/ckbox/dashboard",
},
{
id: "wechat",
title: "微信管理",
icon: "💬",
path: "/ckbox/weChat",
},
];
// 抽屉菜单配置数据
export const drawerMenuData = {
header: {
logoIcon: "✨",
appName: "触客宝",
appDesc: "AI智能营销系统",
},
primaryButton: {
title: "AI智能客服",
icon: "🔒",
},
footer: {
balanceIcon: "⚡",
balanceLabel: "算力余额",
balanceValue: "9307.423",
},
};
// 导出默认配置
export default drawerMenuData;

View File

@@ -9,6 +9,7 @@ import {
import type { MenuProps } from "antd";
import { useCkChatStore } from "@/store/module/ckchat/ckchat";
import { useNavigate } from "react-router-dom";
import { drawerMenuData, menuList } from "./index.data";
import styles from "./index.module.scss";
const { Header } = Layout;
@@ -16,16 +17,14 @@ const { Header } = Layout;
interface NavCommonProps {
title?: string;
onMenuClick?: () => void;
drawerContent?: React.ReactNode;
}
const NavCommon: React.FC<NavCommonProps> = ({
title = "触客宝",
onMenuClick,
drawerContent,
}) => {
const [drawerVisible, setDrawerVisible] = useState(false);
const navigate = useNavigate();
const { userInfo } = useCkChatStore();
// 处理菜单图标点击
@@ -44,31 +43,55 @@ const NavCommon: React.FC<NavCommonProps> = ({
<div className={styles.drawerContent}>
<div className={styles.drawerHeader}>
<div className={styles.logoSection}>
<div className={styles.logoIcon}></div>
<div className={styles.logoIcon}>
{drawerMenuData.header.logoIcon}
</div>
<div className={styles.logoText}>
<div className={styles.appName}></div>
<div className={styles.appDesc}>AI智能营销系统</div>
<div className={styles.appName}>
{drawerMenuData.header.appName}
</div>
<div className={styles.appDesc}>
{drawerMenuData.header.appDesc}
</div>
</div>
</div>
</div>
<div className={styles.drawerBody}>
<div className={styles.primaryButton}>
<div className={styles.buttonIcon}>🔒</div>
<span>AI智能客服</span>
<div className={styles.buttonIcon}>
{drawerMenuData.primaryButton.icon}
</div>
<span>{drawerMenuData.primaryButton.title}</span>
</div>
<div className={styles.menuSection}>
<div className={styles.menuItem}>
<div className={styles.menuIcon}>📊</div>
<span></span>
</div>
{menuList.map((item, index) => (
<div
key={index}
className={styles.menuItem}
onClick={() => {
if (item.path) {
navigate(item.path);
setDrawerVisible(false);
}
}}
>
<div className={styles.menuIcon}>{item.icon}</div>
<span>{item.title}</span>
</div>
))}
</div>
</div>
<div className={styles.drawerFooter}>
<div className={styles.balanceSection}>
<div className={styles.balanceIcon}>
<span className={styles.suanliIcon}></span>
<span className={styles.suanliIcon}>
{drawerMenuData.footer.balanceIcon}
</span>
{drawerMenuData.footer.balanceLabel}
</div>
<div className={styles.balanceText}>
{drawerMenuData.footer.balanceValue}
</div>
<div className={styles.balanceText}>9307.423</div>
</div>
</div>
</div>
@@ -111,7 +134,7 @@ const NavCommon: React.FC<NavCommonProps> = ({
width={300}
className={styles.drawer}
>
{drawerContent || defaultDrawerContent}
{defaultDrawerContent}
</Drawer>
</>
);

View File

@@ -1,12 +1,10 @@
import React, { useState, useEffect } from "react";
import { Layout, Button, Space, message, Tooltip } from "antd";
import { InfoCircleOutlined, MessageOutlined } from "@ant-design/icons";
import dayjs from "dayjs";
import { Layout } from "antd";
import { MessageOutlined } from "@ant-design/icons";
import ChatWindow from "./components/ChatWindow/index";
import SidebarMenu from "./components/SidebarMenu/index";
import VerticalUserList from "./components/VerticalUserList";
import PageSkeleton from "./components/Skeleton";
import NavCommon from "./components/NavCommon";
import styles from "./index.module.scss";
import { addChatSession } from "@/store/module/ckchat/ckchat";
const { Content, Sider } = Layout;
@@ -54,7 +52,6 @@ const CkboxPage: React.FC = () => {
return (
<PageSkeleton loading={loading}>
<Layout className={styles.ckboxLayout}>
<NavCommon title="AI自动聊天懂业务会引导客户不停地聊不停" />
<Layout>
{/* 垂直侧边栏 */}

View File

@@ -1,30 +1,27 @@
import type { RouteObject } from "react-router-dom";
import CkboxPage from "@/pages/pc/ckbox";
import WeChatPage from "@/pages/pc/ckbox/weChat";
import Dashboard from "@/pages/pc/ckbox/dashboard";
const ckboxRoutes: (RouteObject & { auth?: boolean; requiredRole?: string })[] =
[
{
path: "/ckbox",
element: <CkboxPage />,
auth: true,
requiredRole: "user",
children: [
{
path: "",
element: <Dashboard />,
},
{
path: "dashboard",
element: <Dashboard />,
},
{
path: "weChat",
element: <WeChatPage />,
},
],
},
];
const ckboxRoutes = [
{
path: "/ckbox",
element: <CkboxPage />,
auth: true,
children: [
{
path: "",
element: <Dashboard />,
},
{
path: "dashboard",
element: <Dashboard />,
},
{
path: "weChat",
element: <WeChatPage />,
},
],
},
];
export default ckboxRoutes;