diff --git a/Cunkebao/dist/.vite/manifest.json b/Cunkebao/dist/.vite/manifest.json index 426614a4..2289b6a9 100644 --- a/Cunkebao/dist/.vite/manifest.json +++ b/Cunkebao/dist/.vite/manifest.json @@ -1,14 +1,18 @@ { - "_charts-DN1cefc8.js": { - "file": "assets/charts-DN1cefc8.js", + "_charts-aNYyX7D2.js": { + "file": "assets/charts-aNYyX7D2.js", "name": "charts", "imports": [ - "_ui-5V-xZWkf.js", + "_ui-DZwp85UP.js", "_vendor-Bq99rrm8.js" ] }, - "_ui-5V-xZWkf.js": { - "file": "assets/ui-5V-xZWkf.js", + "_ui-D0C0OGrH.css": { + "file": "assets/ui-D0C0OGrH.css", + "src": "_ui-D0C0OGrH.css" + }, + "_ui-DZwp85UP.js": { + "file": "assets/ui-DZwp85UP.js", "name": "ui", "imports": [ "_vendor-Bq99rrm8.js" @@ -17,10 +21,6 @@ "assets/ui-D0C0OGrH.css" ] }, - "_ui-D0C0OGrH.css": { - "file": "assets/ui-D0C0OGrH.css", - "src": "_ui-D0C0OGrH.css" - }, "_utils-Ft3ushmX.js": { "file": "assets/utils-Ft3ushmX.js", "name": "utils", @@ -33,18 +33,18 @@ "name": "vendor" }, "index.html": { - "file": "assets/index-9Clf2a7g.js", + "file": "assets/index-CCIZs36L.js", "name": "index", "src": "index.html", "isEntry": true, "imports": [ "_vendor-Bq99rrm8.js", - "_ui-5V-xZWkf.js", + "_ui-DZwp85UP.js", "_utils-Ft3ushmX.js", - "_charts-DN1cefc8.js" + "_charts-aNYyX7D2.js" ], "css": [ - "assets/index-CK1wd128.css" + "assets/index-DRrzDMi4.css" ] } } \ No newline at end of file diff --git a/Cunkebao/dist/index.html b/Cunkebao/dist/index.html index 408e052b..9b257a9d 100644 --- a/Cunkebao/dist/index.html +++ b/Cunkebao/dist/index.html @@ -11,13 +11,13 @@ - + - + - + - +
diff --git a/Cunkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss b/Cunkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss index 75333cfb..6bf58b79 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss +++ b/Cunkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss @@ -43,33 +43,91 @@ .headerRight { display: flex; align-items: center; + gap: 16px; } .userInfo { - cursor: pointer; - padding: 8px 12px; - border-radius: 6px; - transition: all 0.3s; + display: flex; + align-items: center; + gap: 16px; + padding: 8px 0; - &:hover { - background-color: #f5f5f5; - } .suanli { - font-size: 16px; + display: flex; + align-items: center; + gap: 4px; + font-size: 14px; color: #666; + font-weight: 500; + padding: 6px 12px; + background: #f8f9fa; + border-radius: 20px; + border: 1px solid #e9ecef; + .suanliIcon { - font-size: 24px; + font-size: 16px; + color: #ffc107; } } } -.avatar { - border: 2px solid #f0f0f0; +.messageButton { + display: flex; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + border-radius: 50%; transition: all 0.3s; + border: 1px solid #e9ecef; + background: #fff; &:hover { + background-color: #f8f9fa; border-color: #1890ff; + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15); } + + .anticon { + font-size: 18px; + color: #666; + } +} + +.userSection { + display: flex; + align-items: center; + gap: 12px; + cursor: pointer; + padding: 8px 16px; + border-radius: 24px; + transition: all 0.3s; + border: 1px solid #e9ecef; + background: #fff; + + &:hover { + background-color: #f8f9fa; + border-color: #1890ff; + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15); + } +} + +.userNickname { + font-size: 14px; + color: #333; + font-weight: 600; + max-width: 100px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.avatar { + border: 2px solid #e9ecef; + transition: all 0.3s; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .username { diff --git a/Touchkebao/src/pages/login/Login.tsx b/Touchkebao/src/pages/login/Login.tsx index 70af8136..2e83787f 100644 --- a/Touchkebao/src/pages/login/Login.tsx +++ b/Touchkebao/src/pages/login/Login.tsx @@ -28,10 +28,10 @@ const Login: React.FC = () => { const { login, login2 } = useUserStore(); const [verify, setVerify] = useState<{ verifyCodeImage: string; - verifyCode: string; + verifySessionId: string; }>({ verifyCodeImage: "", - verifyCode: "", + verifySessionId: "", }); // 倒计时效果 useEffect(() => { @@ -45,7 +45,7 @@ const Login: React.FC = () => { const res = await getVerifyCode(); setVerify({ verifyCodeImage: res.verifyCodeImage, - verifyCode: res.verifyCode, + verifySessionId: res.verifySessionId, }); }; @@ -88,7 +88,7 @@ const Login: React.FC = () => { // 添加typeId参数 const loginParams = { ...values, - typeId: activeTab as number, + verifySessionId: verify.verifySessionId, }; const response = @@ -98,10 +98,10 @@ const Login: React.FC = () => { response .then(res => { - const { member, kefuData, deviceTotal } = res; + const { member, kefuData } = res; // 清空WebSocket连接状态 useWebSocketStore.getState().clearConnectionState(); - login(res.token, member, deviceTotal); + login(res.token, member); const { self, token } = kefuData; login2(token.access_token); setUserInfo(self); @@ -218,7 +218,7 @@ const Login: React.FC = () => { )} {activeTab == 1 && verify.verifyCodeImage && ( diff --git a/Touchkebao/src/pages/login/api.ts b/Touchkebao/src/pages/login/api.ts index 1203407a..50b918f4 100644 --- a/Touchkebao/src/pages/login/api.ts +++ b/Touchkebao/src/pages/login/api.ts @@ -3,7 +3,7 @@ import request2 from "@/api/request2"; // 密码登录 export function loginWithPassword(params: any) { - return request("/v1/auth/login", params, "POST"); + return request("/v1/kefu/login", params, "POST"); } // 验证码登录 diff --git a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.data.ts b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.data.tsx similarity index 63% rename from Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.data.ts rename to Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.data.tsx index bdc0fb8b..94ae6d0e 100644 --- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.data.ts +++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.data.tsx @@ -1,24 +1,25 @@ +import { BarChartOutlined, RobotOutlined } from "@ant-design/icons"; // 菜单项接口 export interface MenuItem { id: string; title: string; - icon: string; + icon: React.ReactNode; path?: string; } // 菜单列表数据 export const menuList: MenuItem[] = [ { - id: "dashboard", - title: "数据面板", - icon: "📊", - path: "/pc/dashboard", + id: "wechat", + title: "AI智能客服", + icon: , + path: "/pc/weChat", }, { - id: "wechat", - title: "微信管理", - icon: "💬", - path: "/pc/weChat", + id: "powerCenter", + title: "功能中心", + icon: , + path: "/pc/powerCenter", }, ]; @@ -29,10 +30,6 @@ export const drawerMenuData = { appName: "触客宝", appDesc: "AI智能营销系统", }, - primaryButton: { - title: "AI智能客服", - icon: "🔒", - }, footer: { balanceIcon: "⚡", balanceLabel: "算力余额", diff --git a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss index 75333cfb..b76f5a60 100644 --- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss +++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss @@ -1,3 +1,32 @@ +/** + * NavCommon 组件样式文件 + * + * 文件结构说明： + * 1. Header 区域样式 - 顶部导航栏相关样式 + * - headerLeft: 左侧菜单按钮和标题 + * - headerRight: 右侧用户信息、算力显示、消息按钮等 + * + * 2. Drawer 抽屉区域样式 - 左侧菜单抽屉相关样式 + * - drawerContent: 抽屉内容容器 + * - drawerHeader: 抽屉头部（Logo区域） + * - drawerBody: 抽屉主体（主要按钮和菜单项） + * - drawerFooter: 抽屉底部（余额显示） + * + * 3. 消息抽屉区域样式 - 右侧消息中心抽屉相关样式 + * - messageContent: 消息列表容器 + * - messageItem: 单个消息项样式 + * + * 4. 兼容样式 - 保持向后兼容的独立样式类 + * + * 5. 响应式设计 - 移动端适配样式 + * + * 样式组织原则： + * - 按照 tsx 文件中的嵌套结构组织样式 + * - 使用 SCSS 嵌套语法体现 DOM 层级关系 + * - 相关样式就近放置，便于维护 + */ + +// ===== Header 区域样式 ===== .header { background: #fff; padding: 0 16px; @@ -7,69 +36,124 @@ justify-content: space-between; height: 64px; border-bottom: 1px solid #f0f0f0; -} -.headerLeft { - display: flex; - align-items: center; - gap: 12px; -} + // Header 左侧区域 + .headerLeft { + display: flex; + align-items: center; + gap: 12px; -.menuButton { - display: flex; - align-items: center; - justify-content: center; - width: 40px; - height: 40px; - border-radius: 6px; - transition: all 0.3s; + .menuButton { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: 6px; + transition: all 0.3s; - &:hover { - background-color: #f5f5f5; + &:hover { + background-color: #f5f5f5; + } + + .anticon { + font-size: 18px; + color: #666; + } + } + + .title { + font-size: 18px; + color: #333; + margin: 0; + } } - .anticon { - font-size: 18px; - color: #666; - } -} + // Header 右侧区域 + .headerRight { + display: flex; + align-items: center; + padding-right: 10px; -.title { - font-size: 18px; - color: #333; - margin: 0; -} + .userInfo { + display: flex; + align-items: center; + padding: 8px 0; + .suanli { + display: flex; + align-items: center; + gap: 4px; + font-size: 16px; + color: #666; + font-weight: 500; + cursor: pointer; -.headerRight { - display: flex; - align-items: center; -} + .suanliIcon { + font-size: 20px; + color: #ffc107; + } -.userInfo { - cursor: pointer; - padding: 8px 12px; - border-radius: 6px; - transition: all 0.3s; + &:hover { + color: #52c41a; + transition: all 0.3s; + } + } - &:hover { - background-color: #f5f5f5; - } - .suanli { - font-size: 16px; - color: #666; - .suanliIcon { - font-size: 24px; + .avatar { + border: 2px solid #e9ecef; + transition: all 0.3s; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + } + } + + .messageButton { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: 80px; + transition: all 0.3s; + background: #fff; + cursor: pointer; + border: 1px solid #e9ecef; + &:hover { + background-color: #f8f9fa; + border-color: #1890ff; + box-shadow: 0 0px 12px rgba(24, 144, 255, 0.15); + border: 1px solid #e9ecef; + } + + .anticon { + font-size: 18px; + color: #666; + } + } + + .userSection { + display: flex; + align-items: center; + gap: 12px; + cursor: pointer; + padding: 8px 16px; + } + + .userNickname { + font-size: 14px; + color: #333; + font-weight: 600; + max-width: 100px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } } } -.avatar { - border: 2px solid #f0f0f0; - transition: all 0.3s; - - &:hover { - border-color: #1890ff; - } +// 兼容旧样式（避免破坏性更改） +.bell { + cursor: pointer; + background: #f5f5f5; } .username { @@ -79,7 +163,8 @@ margin-left: 8px; } -// 抽屉样式 +// ===== Drawer 抽屉区域样式 ===== +// 左侧菜单抽屉 .drawer { :global(.ant-drawer-header) { background: #fafafa; @@ -89,142 +174,264 @@ :global(.ant-drawer-body) { padding: 0; } -} - -.drawerContent { - height: 100%; - display: flex; - flex-direction: column; - background: #f8f9fa; -} - -.drawerHeader { - padding: 20px; - background: #fff; - border-bottom: none; -} - -.logoSection { - display: flex; - align-items: center; - gap: 12px; -} - -.logoIcon { - width: 48px; - height: 48px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-radius: 12px; - display: flex; - align-items: center; - justify-content: center; - font-size: 24px; - color: white; -} - -.logoText { - display: flex; - flex-direction: column; -} - -.appName { - font-size: 18px; - font-weight: 600; - color: #333; - margin: 0; -} - -.appDesc { - font-size: 12px; - color: #999; - margin: 2px 0 0 0; -} - -.drawerBody { - flex: 1; - padding: 20px; - display: flex; - flex-direction: column; - gap: 16px; -} - -.primaryButton { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-radius: 12px; - padding: 16px 20px; - display: flex; - align-items: center; - gap: 12px; - cursor: pointer; - transition: all 0.3s; - - &:hover { - transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); - } - - .buttonIcon { - font-size: 20px; - } - - span { - font-size: 16px; - font-weight: 600; - color: white; - } -} - -.menuSection { - margin-top: 8px; -} - -.menuItem { - display: flex; - align-items: center; - padding: 16px 20px; - cursor: pointer; - transition: all 0.3s; - border-radius: 8px; - - &:hover { - background-color: #f0f0f0; - } - - span { - font-size: 16px; - color: #333; - font-weight: 500; - } -} - -.menuIcon { - font-size: 20px; - margin-right: 12px; - width: 20px; - text-align: center; -} - -.drawerFooter { - padding: 20px; - background: #fff; - border-top: 1px solid #f0f0f0; - .balanceSection { + // 抽屉头部 + .drawerHeader { + padding: 20px; + background: #fff; + border-bottom: none; display: flex; justify-content: space-between; align-items: center; - .balanceIcon { - color: #666; - .suanliIcon { - font-size: 20px; + + .logoSection { + display: flex; + align-items: center; + gap: 12px; + + .logoIcon { + width: 40px; + height: 40px; + background: linear-gradient(135deg, #3b81f6 0%, #9035ea 100%); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + color: white; + } + + .logoText { + display: flex; + flex-direction: column; + + .appName { + font-size: 16px; + font-weight: 600; + color: #333; + margin: 0; + } + + .appDesc { + font-size: 12px; + color: #999; + margin: 2px 0 0 0; + } + } + } + .anticon { + cursor: pointer; + } + } + + // 抽屉内容容器 + .drawerContent { + height: 100%; + display: flex; + flex-direction: column; + background: #f8f9fa; + + // 抽屉主体内容 + .drawerBody { + flex: 1; + display: flex; + flex-direction: column; + gap: 16px; + + .primaryButton { + background: linear-gradient(135deg, #3d80f6 0%, #764ba2 100%); + border-radius: 12px; + padding: 16px 20px; + display: flex; + align-items: center; + gap: 12px; + cursor: pointer; + transition: all 0.3s; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); + } + + .buttonIcon { + font-size: 20px; + } + + span { + font-size: 16px; + font-weight: 600; + color: white; + } + } + + // 菜单区域 + .menuSection { + padding: 0px 20px; + .menuItem { + display: flex; + align-items: center; + padding: 8px 20px; + cursor: pointer; + transition: all 0.3s; + border-radius: 8px; + margin: 4px 0; + + &:hover { + background-color: #f0f0f0; + } + + .menuIcon { + font-size: 20px; + margin-right: 12px; + width: 20px; + text-align: center; + } + + span { + font-size: 16px; + color: #333; + font-weight: 500; + } + + &.menuItemActive { + background: linear-gradient(to right, #3b82f6, #9333ea); + color: white; + box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); + + span { + color: white; + font-weight: 600; + } + + .menuIcon { + color: white; + } + + &:hover { + background: linear-gradient(to right, #3b82f6, #9333ea); + box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4); + } + } + } } } - .balanceText { - color: #3d9c0d; + // 抽屉底部 + .drawerFooter { + padding: 20px; + background: #fff; + border-top: 1px solid #f0f0f0; + + .balanceSection { + display: flex; + justify-content: space-between; + align-items: center; + + .balanceIcon { + color: #666; + + .suanliIcon { + font-size: 20px; + } + } + + .balanceText { + color: #3d9c0d; + } + } } } } +// ===== 消息抽屉区域样式 ===== +.messageDrawer { + :global(.ant-drawer-header) { + border-bottom: 1px solid #f0f0f0; + } + + :global(.ant-drawer-body) { + padding: 0; + } + + .messageContent { + height: 100%; + overflow-y: auto; + + .messageItem { + display: flex; + padding: 16px; + border-bottom: 1px solid #f5f5f5; + transition: background-color 0.2s; + + &:hover { + background-color: #fafafa; + } + + &:last-child { + border-bottom: none; + } + + .messageAvatar { + margin-right: 12px; + flex-shrink: 0; + } + + .messageInfo { + flex: 1; + min-width: 0; + + .messageTitle { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 8px; + + .messageType { + font-size: 14px; + font-weight: 500; + color: #262626; + } + + .messageStatus { + width: 8px; + height: 8px; + border-radius: 50%; + background-color: #1890ff; + } + } + + .messageText { + font-size: 13px; + color: #595959; + line-height: 1.4; + margin-bottom: 8px; + word-break: break-word; + } + + .messageTime { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 12px; + color: #8c8c8c; + } + + .messageActions { + display: flex; + gap: 8px; + margin-top: 8px; + + :global(.ant-btn) { + height: 24px; + padding: 0 8px; + font-size: 12px; + } + } + } + } + } +} + +// ===== 兼容样式 ===== .balanceLabel { font-size: 12px; color: #999; @@ -237,22 +444,3 @@ color: #52c41a; margin: 2px 0 0 0; } - -// 响应式设计 -@media (max-width: 768px) { - .header { - padding: 0 12px; - } - - .title { - font-size: 16px; - } - - .username { - display: none; - } - - .drawer { - width: 280px !important; - } -} diff --git a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx index e959e9b2..dcef7c34 100644 --- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx @@ -1,9 +1,17 @@ import React, { useState } from "react"; -import { Layout, Drawer, Avatar, Space, Button } from "antd"; -import { MenuOutlined, UserOutlined } from "@ant-design/icons"; +import { Layout, Drawer, Avatar, Space, Button, Badge, Dropdown } from "antd"; +import { + MenuOutlined, + UserOutlined, + BellOutlined, + CloseOutlined, + LogoutOutlined, + UserSwitchOutlined, +} from "@ant-design/icons"; + import { useUserStore } from "@/store/module/user"; -import { useCkChatStore } from "@/store/module/ckchat/ckchat"; -import { useNavigate } from "react-router-dom"; +// import { useCkChatStore } from "@/store/module/ckchat/ckchat"; +import { useNavigate, useLocation } from "react-router-dom"; import { drawerMenuData, menuList } from "./index.data"; import styles from "./index.module.scss"; @@ -19,10 +27,12 @@ const NavCommon: React.FC = ({ onMenuClick, }) => { const [drawerVisible, setDrawerVisible] = useState(false); + const [messageDrawerVisible, setMessageDrawerVisible] = useState(false); + const [messageCount] = useState(3); // 模拟消息数量 const navigate = useNavigate(); - const { userInfo } = useCkChatStore(); - const { user } = useUserStore(); - console.log(user); + const location = useLocation(); + // const { userInfo } = useCkChatStore(); + const { user, logout } = useUserStore(); // 处理菜单图标点击 const handleMenuClick = () => { @@ -35,6 +45,49 @@ const NavCommon: React.FC = ({ setDrawerVisible(false); }; + // 处理消息中心点击 + const handleMessageClick = () => { + setMessageDrawerVisible(true); + }; + + // 处理消息抽屉关闭 + const handleMessageDrawerClose = () => { + setMessageDrawerVisible(false); + }; + + // 处理退出登录 + const handleLogout = () => { + logout(); // 清除localStorage中的token和用户状态 + navigate("/login"); // 跳转到登录页面 + }; + + // 用户菜单项 + const userMenuItems = [ + { + key: "userInfo", + label: ( +
+ {user.username}（{user.account}） +
+ ), + }, + { + key: "profile", + icon: , + label: "个人资料", + onClick: () => { + console.log("个人资料点击"); + // TODO: 跳转到个人资料页面 + }, + }, + { + key: "logout", + icon: , + label: "退出登录", + onClick: handleLogout, + }, + ]; + // 默认抽屉内容 const defaultDrawerContent = (
@@ -52,30 +105,30 @@ const NavCommon: React.FC = ({
+ + +
-
-
- {drawerMenuData.primaryButton.icon} -
- {drawerMenuData.primaryButton.title} -
- {menuList.map((item, index) => ( -
{ - if (item.path) { - navigate(item.path); - setDrawerVisible(false); - } - }} - > -
{item.icon}
- {item.title} -
- ))} + {menuList.map((item, index) => { + const isActive = location.pathname === item.path; + return ( +
{ + if (item.path) { + navigate(item.path); + setDrawerVisible(false); + } + }} + > +
{item.icon}
+ {item.title} +
+ ); + })}
@@ -113,26 +166,119 @@ const NavCommon: React.FC = ({ ⚡ 9307.423 - } - src={user?.avatar} - className={styles.avatar} - /> + +
+ } + src={user?.avatar} + className={styles.avatar} + /> +
+ +
+ + + +
{defaultDrawerContent} + + + + + } + > +
+
+
+ + 林 + +
+
+
+ 新消息 +
+
+
+ 林秀杰：关于自由主时间特惠，原价1999元，现在只需1699元 +
+
+ 03-05 + +
+
+
+ +
+
+ + E + +
+
+
+ 群提醒 +
+
+
+ Eric在「云归营私域银行项目群」中@了您 +
+
03-05
+
+
+ +
+
+ + 李 + +
+
+
+ 好友申请 +
+
李翔想请求添加您为好友
+
03-04
+
+ + +
+
+
+
+ ); }; diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/ai-training/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/ai-training/index.module.scss new file mode 100644 index 00000000..bf1ac1e6 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/ai-training/index.module.scss @@ -0,0 +1,43 @@ +.container { + padding: 24px; + background: #fff; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.header { + margin-bottom: 24px; + + h1 { + font-size: 24px; + font-weight: 600; + color: #262626; + margin: 0 0 8px 0; + } + + p { + font-size: 14px; + color: #8c8c8c; + margin: 0; + } +} + +.content { + min-height: 400px; +} + +.placeholder { + display: flex; + align-items: center; + justify-content: center; + height: 300px; + background: #fafafa; + border: 1px dashed #d9d9d9; + border-radius: 6px; + + p { + font-size: 16px; + color: #8c8c8c; + margin: 0; + } +} \ No newline at end of file diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/ai-training/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/ai-training/index.tsx new file mode 100644 index 00000000..9bf0dde5 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/ai-training/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import styles from "./index.module.scss"; + +const AiTraining: React.FC = () => { + return ( +
+
+

AI模型训练

+

自定义AI模型训练，打造专属智能客服助手

+
+
+ {/* 功能内容待开发 */} +
+

AI模型训练功能正在开发中...

+
+
+
+ ); +}; + +export default AiTraining; diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.module.scss new file mode 100644 index 00000000..bf1ac1e6 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.module.scss @@ -0,0 +1,43 @@ +.container { + padding: 24px; + background: #fff; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.header { + margin-bottom: 24px; + + h1 { + font-size: 24px; + font-weight: 600; + color: #262626; + margin: 0 0 8px 0; + } + + p { + font-size: 14px; + color: #8c8c8c; + margin: 0; + } +} + +.content { + min-height: 400px; +} + +.placeholder { + display: flex; + align-items: center; + justify-content: center; + height: 300px; + background: #fafafa; + border: 1px dashed #d9d9d9; + border-radius: 6px; + + p { + font-size: 16px; + color: #8c8c8c; + margin: 0; + } +} \ No newline at end of file diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.tsx new file mode 100644 index 00000000..f9506e96 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import styles from "./index.module.scss"; + +const AutoGreeting: React.FC = () => { + return ( +
+
+

自动打招呼

+

智能识别新好友，自动发送个性化欢迎消息

+
+
+ {/* 功能内容待开发 */} +
+

自动打招呼功能正在开发中...

+
+
+
+ ); +}; + +export default AutoGreeting; diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/communication-record/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/communication-record/index.module.scss new file mode 100644 index 00000000..bf1ac1e6 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/communication-record/index.module.scss @@ -0,0 +1,43 @@ +.container { + padding: 24px; + background: #fff; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.header { + margin-bottom: 24px; + + h1 { + font-size: 24px; + font-weight: 600; + color: #262626; + margin: 0 0 8px 0; + } + + p { + font-size: 14px; + color: #8c8c8c; + margin: 0; + } +} + +.content { + min-height: 400px; +} + +.placeholder { + display: flex; + align-items: center; + justify-content: center; + height: 300px; + background: #fafafa; + border: 1px dashed #d9d9d9; + border-radius: 6px; + + p { + font-size: 16px; + color: #8c8c8c; + margin: 0; + } +} \ No newline at end of file diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/communication-record/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/communication-record/index.tsx new file mode 100644 index 00000000..cf17b811 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/communication-record/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import styles from "./index.module.scss"; + +const CommunicationRecord: React.FC = () => { + return ( +
+
+

沟通记录

+

完整记录客户沟通历史，支持多维度查询分析

+
+
+ {/* 功能内容待开发 */} +
+

沟通记录功能正在开发中...

+
+
+
+ ); +}; + +export default CommunicationRecord; diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/index.module.scss new file mode 100644 index 00000000..bf1ac1e6 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/index.module.scss @@ -0,0 +1,43 @@ +.container { + padding: 24px; + background: #fff; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.header { + margin-bottom: 24px; + + h1 { + font-size: 24px; + font-weight: 600; + color: #262626; + margin: 0 0 8px 0; + } + + p { + font-size: 14px; + color: #8c8c8c; + margin: 0; + } +} + +.content { + min-height: 400px; +} + +.placeholder { + display: flex; + align-items: center; + justify-content: center; + height: 300px; + background: #fafafa; + border: 1px dashed #d9d9d9; + border-radius: 6px; + + p { + font-size: 16px; + color: #8c8c8c; + margin: 0; + } +} \ No newline at end of file diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/index.tsx new file mode 100644 index 00000000..f2b33d1f --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import styles from "./index.module.scss"; + +const ContentManagement: React.FC = () => { + return ( +
+
+

内容管理

+

素材管理、数据词汇库、关键词自动回复

+
+
+ {/* 功能内容待开发 */} +
+

内容管理功能正在开发中...

+
+
+
+ ); +}; + +export default ContentManagement; diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.module.scss new file mode 100644 index 00000000..bf1ac1e6 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.module.scss @@ -0,0 +1,43 @@ +.container { + padding: 24px; + background: #fff; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.header { + margin-bottom: 24px; + + h1 { + font-size: 24px; + font-weight: 600; + color: #262626; + margin: 0 0 8px 0; + } + + p { + font-size: 14px; + color: #8c8c8c; + margin: 0; + } +} + +.content { + min-height: 400px; +} + +.placeholder { + display: flex; + align-items: center; + justify-content: center; + height: 300px; + background: #fafafa; + border: 1px dashed #d9d9d9; + border-radius: 6px; + + p { + font-size: 16px; + color: #8c8c8c; + margin: 0; + } +} \ No newline at end of file diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx new file mode 100644 index 00000000..ad171fa8 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import styles from "./index.module.scss"; + +const CustomerManagement: React.FC = () => { + return ( +
+
+

客户好友管理

+

统一管理客户信息和好友关系，提升服务效率

+
+
+ {/* 功能内容待开发 */} +
+

客户好友管理功能正在开发中...

+
+
+
+ ); +}; + +export default CustomerManagement; diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx new file mode 100644 index 00000000..52e84e89 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx @@ -0,0 +1,119 @@ +import React from "react"; +import { + AimOutlined, + SendOutlined, + CalendarOutlined, + TagsOutlined, + UserOutlined, + MessageOutlined, + FileTextOutlined, + RobotOutlined, + UserAddOutlined, + AppstoreOutlined, + SoundOutlined, + TeamOutlined, + FolderOutlined, + BarChartOutlined, +} from "@ant-design/icons"; + +export interface FeatureCard { + id: string; + title: string; + description: string; + icon: React.ReactNode; + color: string; + path?: string; + isNew?: boolean; +} + +export interface TabItem { + key: string; + label: string; + icon?: React.ReactNode; + active?: boolean; +} + +export const featureCards: FeatureCard[] = [ + { + id: "precision-send", + title: "精准群发", + description: "基于客户标签和行为数据进行精准群发", + icon: , + color: "#ff6b35", + path: "/pc/powerCenter/precision-send", + }, + { + id: "sop-send", + title: "SOP群发", + description: "使用触客宝SOP标准化流程进行批量消息发送", + icon: , + color: "#4285f4", + path: "/pc/powerCenter/sop-send", + }, + { + id: "moments-marketing", + title: "朋友圈营销", + description: "AI智能生成朋友圈内容，提升品牌曝光度", + icon: , + color: "#34a853", + path: "/pc/powerCenter/moments-marketing", + }, + { + id: "tag-management", + title: "标签管理", + description: "智能客户标签分类，精准用户画像分析", + icon: , + color: "#9c27b0", + path: "/pc/powerCenter/tag-management", + }, + { + id: "customer-management", + title: "客户好友管理", + description: "统一管理客户信息和好友关系，提升服务效率", + icon: , + color: "#6366f1", + path: "/pc/powerCenter/customer-management", + }, + { + id: "communication-record", + title: "沟通记录", + description: "完整记录客户沟通历史，支持多维度查询分析", + icon: , + color: "#06b6d4", + path: "/pc/powerCenter/communication-record", + }, + { + id: "content-management", + title: "内容管理", + description: "素材管理、数据词汇库、关键词自动回复", + icon: , + color: "#f59e0b", + path: "/pc/powerCenter/content-management", + }, + { + id: "ai-training", + title: "AI模型训练", + description: "自定义AI模型训练，打造专属智能客服助手", + icon: , + color: "#ec4899", + path: "/pc/powerCenter/ai-training", + isNew: true, + }, + { + id: "auto-greeting", + title: "自动打招呼", + description: "智能识别新好友，自动发送个性化欢迎消息", + icon: , + color: "#10b981", + path: "/pc/powerCenter/auto-greeting", + }, +]; + +export const tabItems: TabItem[] = [ + { key: "all", label: "全部功能", icon: }, + { key: "marketing", label: "营销推广", icon: }, + { key: "customer", label: "客户管理", icon: }, + { key: "ai", label: "AI智能", icon: }, + { key: "content", label: "内容管理", icon: }, + { key: "data", label: "数据分析", icon: }, +]; diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss new file mode 100644 index 00000000..2eb34c95 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss @@ -0,0 +1,237 @@ +.powerCenter { + padding: 24px; + background-color: #f5f5f5; + min-height: 100vh; + + .header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 32px; + background: white; + padding: 24px; + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + + .headerLeft { + .title { + font-size: 28px; + font-weight: 600; + color: #1a1a1a; + margin: 0 0 8px 0; + } + + .subtitle { + font-size: 14px; + color: #666; + margin: 0; + } + } + + .headerRight { + .tabs { + .tab { + border-radius: 8px; + border: 1px solid #e0e0e0; + color: #666; + + &:hover { + color: #1890ff; + border-color: #1890ff; + } + } + + .activeTab { + border-radius: 8px; + background: #1890ff; + border-color: #1890ff; + box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2); + } + } + } + } + + .cardGrid { + .featureCard { + border-radius: 16px; + border: none; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); + transition: all 0.3s ease; + height: 200px; + cursor: pointer; + + &:hover { + transform: translateY(-4px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); + } + + .cardContent { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + height: 100%; + justify-content: center; + + .iconWrapper { + width: 64px; + height: 64px; + border-radius: 16px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 16px; + position: relative; + + .icon { + font-size: 28px; + color: white; + } + } + + .cardInfo { + .cardTitle { + font-size: 16px; + font-weight: 600; + color: #1a1a1a; + margin: 0 0 8px 0; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + + .newBadge { + background: linear-gradient(135deg, #ff6b6b, #ee5a24); + color: white; + font-size: 10px; + padding: 2px 6px; + border-radius: 8px; + font-weight: 500; + } + } + + .cardDescription { + font-size: 12px; + color: #666; + line-height: 1.4; + margin: 0; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + } + } + } + } + } +} + +// 响应式设计 +@media (max-width: 1200px) { + .powerCenter { + .header { + flex-direction: column; + gap: 16px; + align-items: flex-start; + + .headerRight { + width: 100%; + + .tabs { + flex-wrap: wrap; + } + } + } + } +} + +@media (max-width: 768px) { + .powerCenter { + padding: 16px; + + .header { + padding: 16px; + + .headerLeft { + .title { + font-size: 24px; + } + } + } + + .cardGrid { + .featureCard { + height: 160px; + + .cardContent { + .iconWrapper { + width: 48px; + height: 48px; + + .icon { + font-size: 20px; + } + } + + .cardInfo { + .cardTitle { + font-size: 14px; + } + + .cardDescription { + font-size: 11px; + } + } + } + } + } + } +} + +// 卡片颜色主题 +.featureCard { + // 精准群发 - 橙色 + &[data-color="#ff6b35"] .iconWrapper { + background: linear-gradient(135deg, #ff6b35, #f7931e); + } + + // SOP群发 - 蓝色 + &[data-color="#4285f4"] .iconWrapper { + background: linear-gradient(135deg, #4285f4, #1a73e8); + } + + // 朋友圈营销 - 绿色 + &[data-color="#34a853"] .iconWrapper { + background: linear-gradient(135deg, #34a853, #137333); + } + + // 标签管理 - 紫色 + &[data-color="#9c27b0"] .iconWrapper { + background: linear-gradient(135deg, #9c27b0, #7b1fa2); + } + + // 客户管理 - 靛蓝 + &[data-color="#6366f1"] .iconWrapper { + background: linear-gradient(135deg, #6366f1, #4f46e5); + } + + // 沟通记录 - 青色 + &[data-color="#06b6d4"] .iconWrapper { + background: linear-gradient(135deg, #06b6d4, #0891b2); + } + + // 内容管理 - 黄色 + &[data-color="#f59e0b"] .iconWrapper { + background: linear-gradient(135deg, #f59e0b, #d97706); + } + + // AI训练 - 粉色 + &[data-color="#ec4899"] .iconWrapper { + background: linear-gradient(135deg, #ec4899, #db2777); + } + + // 自动打招呼 - 翠绿 + &[data-color="#10b981"] .iconWrapper { + background: linear-gradient(135deg, #10b981, #059669); + } +} diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx new file mode 100644 index 00000000..6a409e2b --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx @@ -0,0 +1,103 @@ +import React, { useState, useMemo } from "react"; +import { Card, Row, Col, Button, Space } from "antd"; +import { useNavigate } from "react-router-dom"; +import { featureCards, tabItems, FeatureCard } from "./index.data"; +import styles from "./index.module.scss"; + +const PowerCenter: React.FC = () => { + const navigate = useNavigate(); + const [activeTab, setActiveTab] = useState("all"); + + const handleCardClick = (card: FeatureCard) => { + if (card.path) { + navigate(card.path); + } + }; + + const handleTabClick = (tabKey: string) => { + setActiveTab(tabKey); + }; + + // 根据选中的标签过滤功能卡片 + const filteredCards = useMemo(() => { + if (activeTab === "all") { + return featureCards; + } + + const categoryMap: { [key: string]: string[] } = { + marketing: ["precision-send", "sop-send", "moments-marketing"], + customer: ["customer-management", "tag-management"], + ai: ["ai-training", "auto-greeting"], + content: ["content-management"], + data: ["communication-record"], + }; + + const categoryIds = categoryMap[activeTab] || []; + return featureCards.filter(card => categoryIds.includes(card.id)); + }, [activeTab]); + + return ( +
+ {/* 页面头部 */} +
+
+

功能中心

+

触客宝AI私域营销系统 - 所有功能一览

+
+
+ + {tabItems.map(item => ( + + ))} + +
+
+ + {/* 功能卡片网格 */} +
+ + {filteredCards.map(card => ( + + handleCardClick(card)} + bodyStyle={{ padding: "24px" }} + > +
+
+
{card.icon}
+
+
+

+ {card.title} + {card.isNew && ( + 新功能 + )} +

+

{card.description}

+
+
+ + + ))} + +
+
+ ); +}; + +export default PowerCenter; diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/moments-marketing/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/moments-marketing/index.module.scss new file mode 100644 index 00000000..bf1ac1e6 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/moments-marketing/index.module.scss @@ -0,0 +1,43 @@ +.container { + padding: 24px; + background: #fff; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.header { + margin-bottom: 24px; + + h1 { + font-size: 24px; + font-weight: 600; + color: #262626; + margin: 0 0 8px 0; + } + + p { + font-size: 14px; + color: #8c8c8c; + margin: 0; + } +} + +.content { + min-height: 400px; +} + +.placeholder { + display: flex; + align-items: center; + justify-content: center; + height: 300px; + background: #fafafa; + border: 1px dashed #d9d9d9; + border-radius: 6px; + + p { + font-size: 16px; + color: #8c8c8c; + margin: 0; + } +} \ No newline at end of file diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/moments-marketing/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/moments-marketing/index.tsx new file mode 100644 index 00000000..27b8a419 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/moments-marketing/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import styles from "./index.module.scss"; + +const MomentsMarketing: React.FC = () => { + return ( +
+
+

朋友圈营销

+

AI智能生成朋友圈内容，提升品牌曝光度

+
+
+ {/* 功能内容待开发 */} +
+

朋友圈营销功能正在开发中...

+
+
+
+ ); +}; + +export default MomentsMarketing; diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.module.scss new file mode 100644 index 00000000..bf1ac1e6 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.module.scss @@ -0,0 +1,43 @@ +.container { + padding: 24px; + background: #fff; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.header { + margin-bottom: 24px; + + h1 { + font-size: 24px; + font-weight: 600; + color: #262626; + margin: 0 0 8px 0; + } + + p { + font-size: 14px; + color: #8c8c8c; + margin: 0; + } +} + +.content { + min-height: 400px; +} + +.placeholder { + display: flex; + align-items: center; + justify-content: center; + height: 300px; + background: #fafafa; + border: 1px dashed #d9d9d9; + border-radius: 6px; + + p { + font-size: 16px; + color: #8c8c8c; + margin: 0; + } +} \ No newline at end of file diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.tsx new file mode 100644 index 00000000..c350739a --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import styles from "./index.module.scss"; + +const PrecisionSend: React.FC = () => { + return ( +
+
+

精准群发

+

基于客户标签和行为数据进行精准群发

+
+
+ {/* 功能内容待开发 */} +
+

精准群发功能正在开发中...

+
+
+
+ ); +}; + +export default PrecisionSend; diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.module.scss new file mode 100644 index 00000000..bf1ac1e6 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.module.scss @@ -0,0 +1,43 @@ +.container { + padding: 24px; + background: #fff; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.header { + margin-bottom: 24px; + + h1 { + font-size: 24px; + font-weight: 600; + color: #262626; + margin: 0 0 8px 0; + } + + p { + font-size: 14px; + color: #8c8c8c; + margin: 0; + } +} + +.content { + min-height: 400px; +} + +.placeholder { + display: flex; + align-items: center; + justify-content: center; + height: 300px; + background: #fafafa; + border: 1px dashed #d9d9d9; + border-radius: 6px; + + p { + font-size: 16px; + color: #8c8c8c; + margin: 0; + } +} \ No newline at end of file diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.tsx new file mode 100644 index 00000000..05039d06 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import styles from "./index.module.scss"; + +const SopSend: React.FC = () => { + return ( +
+
+

SOP群发

+

使用触客宝SOP标准化流程进行批量消息发送

+
+
+ {/* 功能内容待开发 */} +
+

SOP群发功能正在开发中...

+
+
+
+ ); +}; + +export default SopSend; diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/tag-management/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/tag-management/index.module.scss new file mode 100644 index 00000000..bf1ac1e6 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/tag-management/index.module.scss @@ -0,0 +1,43 @@ +.container { + padding: 24px; + background: #fff; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.header { + margin-bottom: 24px; + + h1 { + font-size: 24px; + font-weight: 600; + color: #262626; + margin: 0 0 8px 0; + } + + p { + font-size: 14px; + color: #8c8c8c; + margin: 0; + } +} + +.content { + min-height: 400px; +} + +.placeholder { + display: flex; + align-items: center; + justify-content: center; + height: 300px; + background: #fafafa; + border: 1px dashed #d9d9d9; + border-radius: 6px; + + p { + font-size: 16px; + color: #8c8c8c; + margin: 0; + } +} \ No newline at end of file diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/tag-management/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/tag-management/index.tsx new file mode 100644 index 00000000..5c9b3077 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/tag-management/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import styles from "./index.module.scss"; + +const TagManagement: React.FC = () => { + return ( +
+
+

标签管理

+

智能客户标签分类，精准用户画像分析

+
+
+ {/* 功能内容待开发 */} +
+

标签管理功能正在开发中...

+
+
+
+ ); +}; + +export default TagManagement; diff --git a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/index.tsx b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/index.tsx index 143198f6..6077ff79 100644 --- a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/index.tsx @@ -26,26 +26,6 @@ const ChatWindow: React.FC = ({ contract }) => { const onToggleProfile = () => { setShowProfile(!showProfile); }; - const chatMenu = ( - - }> - 查看资料 - - }> - 语音通话 - - }> - 视频通话 - - - 置顶聊天 - 消息免打扰 - - - 清空聊天记录 - - - ); return ( @@ -76,13 +56,6 @@ const ChatWindow: React.FC = ({ contract }) => { className={styles.headerButton} /> - -