refactor(ckbox): 重构导航组件并优化路由配置
将导航菜单数据抽离到独立文件,简化路由配置 移除未使用的NavCommon组件属性,优化微信管理页面结构
This commit is contained in:
@@ -90,7 +90,7 @@ const Mine: React.FC = () => {
|
||||
description: "触客宝",
|
||||
icon: <PhoneOutlined />,
|
||||
count: 0,
|
||||
path: "/mine/ckbox",
|
||||
path: "/ckbox/weChat",
|
||||
bgColor: "#fff7e6",
|
||||
iconColor: "#fa8c16",
|
||||
},
|
||||
|
||||
@@ -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;
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
{/* 垂直侧边栏 */}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user