黑暗模式fix
This commit is contained in:
@@ -202,13 +202,13 @@ export default function ChatAIDrawer({ open, onClose, onExport }) {
|
||||
placeholder="请输入您的问题..."
|
||||
onChange={handleInputChange}
|
||||
disabled={isLoading}
|
||||
className="flex-1 rounded-lg border-gray-300 hover:border-blue-400 focus:border-blue-600 focus:shadow-blue-100"
|
||||
className="flex-1 rounded-md "
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
loading={isLoading}
|
||||
className="rounded-lg bg-blue-600 hover:bg-blue-700"
|
||||
className="rounded-md"
|
||||
>
|
||||
发送
|
||||
</Button>
|
||||
|
||||
@@ -44,7 +44,7 @@ const Sidebar = ({ collapsed }) => {
|
||||
theme={isDarkMode ? "dark" : "light"}
|
||||
width={256}
|
||||
collapsedWidth={80}
|
||||
className={`app-sidebar ${collapsed ? "collapsed" : ""}`}
|
||||
className={`app-sidebar ${collapsed ? "collapsed" : ""} overflow-auto`}
|
||||
>
|
||||
<Logo collapsed={collapsed} isDarkMode={isDarkMode} />
|
||||
<Menu
|
||||
@@ -54,7 +54,6 @@ const Sidebar = ({ collapsed }) => {
|
||||
defaultOpenKeys={defaultOpenKeys}
|
||||
items={menuClient}
|
||||
onClick={handleMenuClick}
|
||||
style={{ overflow: 'auto' }}
|
||||
/>
|
||||
</Sider>
|
||||
);
|
||||
|
||||
@@ -187,50 +187,44 @@ const SectionList = ({
|
||||
{availableSections.map((section) => (
|
||||
<div
|
||||
key={section.id}
|
||||
className="group relative bg-white rounded-lg shadow-sm border border-gray-200 hover:shadow-lg transition-all duration-300 cursor-pointer"
|
||||
className="group relative bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-all duration-300 cursor-pointer"
|
||||
onClick={() => handleUseTemplate(section, add)}
|
||||
>
|
||||
<div className="p-6">
|
||||
<div className="text-center mb-4">
|
||||
<h3 className="text-lg font-medium group-hover:text-blue-500 transition-colors">
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 group-hover:text-blue-500 transition-colors">
|
||||
{section.attributes.name}
|
||||
</h3>
|
||||
<div className="text-sm text-gray-500 mt-1">
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
{section.attributes.items?.length || 0} 个项目
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 mt-4 border-t pt-4">
|
||||
{(section.attributes.items || [])
|
||||
.slice(0, 3)
|
||||
.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex justify-between items-center"
|
||||
>
|
||||
<span className="text-sm text-gray-600 truncate flex-1">
|
||||
<div className="space-y-2 mt-4 border-t dark:border-gray-700 pt-4">
|
||||
{(section.attributes.items || []).slice(0, 3).map((item, index) => (
|
||||
<div key={index} className="flex justify-between items-center">
|
||||
<span className="text-sm text-gray-600 dark:text-gray-300 truncate flex-1">
|
||||
{item.name}
|
||||
</span>
|
||||
<span className="text-sm text-gray-500 ml-2">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400 ml-2">
|
||||
{formatExchangeRate(currentCurrency, item.price)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{(section.attributes.items || []).length > 3 && (
|
||||
<div className="text-sm text-gray-500 text-center">
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 text-center">
|
||||
还有 {section.attributes.items.length - 3} 个项目...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 pt-4 border-t flex justify-between items-center">
|
||||
<span className="text-sm text-gray-600">总金额</span>
|
||||
<span className="text-base font-medium text-blue-500">
|
||||
<div className="mt-4 pt-4 border-t dark:border-gray-700 flex justify-between items-center">
|
||||
<span className="text-sm text-gray-600 dark:text-gray-300">总金额</span>
|
||||
<span className="text-base font-medium text-blue-500 dark:text-blue-400">
|
||||
{formatExchangeRate(
|
||||
currentCurrency,
|
||||
(section.attributes.items || []).reduce(
|
||||
(sum, item) =>
|
||||
sum + (item.price * (item.quantity || 1) || 0),
|
||||
(sum, item) => sum + (item.price * (item.quantity || 1) || 0),
|
||||
0
|
||||
)
|
||||
)}
|
||||
@@ -241,12 +235,12 @@ const SectionList = ({
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<div className="flex justify-center mt-6">
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => handleCreateCustom(add, fieldsLength)}
|
||||
className="bg-blue-600 hover:bg-blue-700 border-0 shadow-md hover:shadow-lg transition-all duration-200 h-10 px-6 rounded-lg flex items-center gap-2"
|
||||
className="bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-600 border-0 shadow-md hover:shadow-lg transition-all duration-200 h-10 px-6 rounded-lg flex items-center gap-2"
|
||||
>
|
||||
<span className="font-medium">自定义模块</span>
|
||||
</Button>
|
||||
@@ -256,7 +250,7 @@ const SectionList = ({
|
||||
<div className="flex flex-col items-center justify-center py-16 px-4">
|
||||
<div className="w-48 h-48 mb-8">
|
||||
<svg
|
||||
className="w-full h-full text-gray-200"
|
||||
className="w-full h-full text-gray-200 dark:text-gray-700"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
@@ -270,10 +264,10 @@ const SectionList = ({
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-medium text-gray-900 mb-2">
|
||||
<h3 className="text-xl font-medium text-gray-900 dark:text-gray-100 mb-2">
|
||||
暂无可用模板
|
||||
</h3>
|
||||
<p className="text-gray-500 text-center max-w-sm mb-8">
|
||||
<p className="text-gray-500 dark:text-gray-400 text-center max-w-sm mb-8">
|
||||
您可以选择创建一个自定义模块开始使用
|
||||
</p>
|
||||
<Button
|
||||
@@ -281,7 +275,7 @@ const SectionList = ({
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => handleCreateCustom(add, fieldsLength)}
|
||||
size="large"
|
||||
className="shadow-md hover:shadow-lg transition-shadow"
|
||||
className="shadow-md hover:shadow-lg transition-shadow dark:bg-blue-500 dark:hover:bg-blue-600"
|
||||
>
|
||||
创建自定义模块
|
||||
</Button>
|
||||
|
||||
@@ -199,7 +199,7 @@ const SectionList = ({ form, isView, formValues, type }) => {
|
||||
{availableSections.map((section) => (
|
||||
<div
|
||||
key={section.id}
|
||||
className="group relative bg-white rounded-lg shadow-sm border border-gray-200 hover:shadow-lg transition-all duration-300 cursor-pointer"
|
||||
className="group relative bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-all duration-300 cursor-pointer"
|
||||
onClick={() => handleUseTemplate(section, add)}
|
||||
>
|
||||
<div className="p-6">
|
||||
@@ -241,7 +241,7 @@ const SectionList = ({ form, isView, formValues, type }) => {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<div className="flex justify-center mt-6">
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
|
||||
@@ -215,20 +215,20 @@ export default function DifyChatDrawer({ open, onClose, onExport }) {
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
<div className="border-t dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
|
||||
<div className="border-t dark:border-gray-700 p-4">
|
||||
<form onSubmit={handleSendMessage} className="flex gap-2">
|
||||
<Input
|
||||
value={input}
|
||||
placeholder="请输入您的问题..."
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
disabled={isLoading}
|
||||
className="flex-1 rounded-lg border-gray-300 dark:border-gray-600 hover:border-blue-400 dark:hover:border-blue-500 focus:border-blue-600 dark:focus:border-blue-500 focus:shadow-blue-100 dark:focus:shadow-blue-900 dark:bg-gray-700 dark:text-gray-200"
|
||||
className="flex-1 rounded-md "
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
loading={isLoading}
|
||||
className="rounded-lg bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800"
|
||||
className="rounded-md "
|
||||
>
|
||||
发送
|
||||
</Button>
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
|
||||
|
||||
|
||||
@@ -158,7 +158,7 @@ const CustomerPage = () => {
|
||||
columns={columns}
|
||||
dataSource={customers}
|
||||
rowKey="id"
|
||||
scroll={{ x: true }}
|
||||
scroll={{ x: true}}
|
||||
loading={loading}
|
||||
onChange={handleTableChange}
|
||||
pagination={{
|
||||
|
||||
@@ -256,7 +256,7 @@ export default function ProjectDetail() {
|
||||
}, [id, templateId]);
|
||||
|
||||
return (
|
||||
<div className="bg-gradient-to-b from-gray-50 to-white dark:from-gray-800 dark:to-gray-900/90 min-h-screen p-2">
|
||||
<div className="bg-gradient-to-b min-h-screen p-2">
|
||||
<Card
|
||||
className="shadow-lg rounded-lg border-0"
|
||||
title={
|
||||
|
||||
@@ -338,7 +338,7 @@ const ProjectPage = () => {
|
||||
columns={columns}
|
||||
dataSource={projects}
|
||||
rowKey="id"
|
||||
scroll={{ x: true }}
|
||||
scroll={{ x: true}}
|
||||
loading={loadingProjects}
|
||||
onChange={handleTableChange}
|
||||
pagination={{
|
||||
|
||||
@@ -362,7 +362,7 @@ const QuotationForm = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-gradient-to-b from-gray-50 to-white dark:from-gray-800 dark:to-gray-900/90 min-h-screen p-2">
|
||||
<div className="bg-gradient-to-b min-h-screen p-2">
|
||||
<Card
|
||||
className="shadow-lg rounded-lg border-0"
|
||||
title={
|
||||
|
||||
@@ -381,7 +381,7 @@ useEffect(()=>{
|
||||
columns={columns}
|
||||
dataSource={quotations}
|
||||
rowKey="id"
|
||||
scroll={{ x: true }}
|
||||
scroll={{ x: true}}
|
||||
loading={loadingQuotations}
|
||||
onChange={handleTableChange}
|
||||
pagination={{
|
||||
@@ -405,7 +405,7 @@ useEffect(()=>{
|
||||
<Button
|
||||
key="custom"
|
||||
onClick={() => handleConfirm()}
|
||||
className=" gap-2 px-6 rounded-full hover:bg-gray-100"
|
||||
className="gap-2 px-6 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200"
|
||||
>
|
||||
<FileAddOutlined /> 自定义创建
|
||||
</Button>,
|
||||
@@ -414,28 +414,28 @@ useEffect(()=>{
|
||||
type="primary"
|
||||
disabled={!selectedTemplateId}
|
||||
onClick={handleConfirm}
|
||||
className="gap-2 px-6 rounded-full bg-blue-600 hover:bg-blue-700"
|
||||
className="gap-2 px-6 rounded-full "
|
||||
>
|
||||
<AppstoreOutlined /> 使用选中模板
|
||||
</Button>,
|
||||
]}
|
||||
width={900}
|
||||
className="template-modal"
|
||||
className="template-modal "
|
||||
>
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-[400px]">
|
||||
<div className="flex justify-center items-center h-[400px] ">
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
) : templates.length === 0 ? (
|
||||
<Empty description="暂无可用模板" />
|
||||
<Empty description={<span className="dark:text-gray-400">暂无可用模板</span>} />
|
||||
) : (
|
||||
<div className="max-h-[600px] overflow-y-auto px-4">
|
||||
<div className="max-h-[600px] overflow-y-auto px-4 ">
|
||||
{getTemplatesByCategory().map((group, groupIndex) => (
|
||||
<div key={groupIndex} className="mb-10 last:mb-2">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<h3 className="text-xl font-medium text-gray-900">
|
||||
<h3 className="text-xl font-medium text-gray-900 dark:text-gray-100">
|
||||
{group.name}
|
||||
<span className="ml-2 text-sm text-gray-500">
|
||||
<span className="ml-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
({group.templates.length})
|
||||
</span>
|
||||
</h3>
|
||||
@@ -450,18 +450,18 @@ useEffect(()=>{
|
||||
relative p-6 rounded-xl cursor-pointer transition-all duration-200
|
||||
${
|
||||
selectedTemplateId === template.id
|
||||
? "ring-2 ring-blue-500 bg-blue-50/40"
|
||||
: "hover:shadow-lg border border-gray-200 hover:border-blue-200"
|
||||
? "ring-2 ring-blue-500 dark:ring-blue-400 bg-blue-50/40 dark:bg-blue-900/30"
|
||||
: "hover:shadow-lg border border-gray-200 dark:border-gray-700 hover:border-blue-200 dark:hover:border-blue-700"
|
||||
}
|
||||
transform hover:-translate-y-1
|
||||
transform hover:-translate-y-1 dark:bg-gray-800
|
||||
`}
|
||||
>
|
||||
<div className="flex justify-between items-start gap-3 mb-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="text-lg font-medium text-gray-900 truncate">
|
||||
<h4 className="text-lg font-medium text-gray-900 dark:text-gray-100 truncate">
|
||||
{template.attributes.templateName}
|
||||
</h4>
|
||||
<p className="text-sm text-gray-600 mt-2 line-clamp-2">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mt-2 line-clamp-2">
|
||||
{template.attributes.description || "暂无描述"}
|
||||
</p>
|
||||
</div>
|
||||
@@ -475,16 +475,16 @@ useEffect(()=>{
|
||||
rounded-lg p-3 text-sm border
|
||||
${
|
||||
selectedTemplateId === template.id
|
||||
? "bg-white border-blue-200"
|
||||
: "bg-gray-50 border-gray-100"
|
||||
? "bg-white dark:bg-gray-700 border-blue-200 dark:border-blue-600"
|
||||
: "bg-gray-50 dark:bg-gray-800 border-gray-100 dark:border-gray-700"
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="font-medium text-gray-700 truncate flex-1">
|
||||
<span className="font-medium text-gray-700 dark:text-gray-200 truncate flex-1">
|
||||
{section.sectionName}
|
||||
</span>
|
||||
<span className="text-gray-500 ml-2 text-xs px-2 py-0.5 bg-gray-100 rounded-full">
|
||||
<span className="text-gray-500 dark:text-gray-400 ml-2 text-xs px-2 py-0.5 bg-gray-100 dark:bg-gray-600 rounded-full">
|
||||
{section.items.length}项
|
||||
</span>
|
||||
</div>
|
||||
@@ -494,7 +494,7 @@ useEffect(()=>{
|
||||
|
||||
{selectedTemplateId === template.id && (
|
||||
<div className="absolute top-4 right-4">
|
||||
<div className="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center shadow-md">
|
||||
<div className="w-6 h-6 bg-blue-600 dark:bg-blue-500 rounded-full flex items-center justify-center shadow-md">
|
||||
<svg
|
||||
className="w-4 h-4 text-white"
|
||||
fill="currentColor"
|
||||
|
||||
@@ -36,7 +36,7 @@ const ServiceForm = () => {
|
||||
return <div>无效的模板类型</div>;
|
||||
}
|
||||
return (
|
||||
<div className="bg-gradient-to-b from-gray-50 to-white dark:from-gray-800 dark:to-gray-900/90 min-h-screen p-2" >
|
||||
<div className="bg-gradient-to-b min-h-screen p-2" >
|
||||
<Card
|
||||
className="shadow-lg rounded-lg border-0"
|
||||
title={
|
||||
|
||||
@@ -263,7 +263,6 @@ const ServicePage = () => {
|
||||
title: "名称",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "15%",
|
||||
render: (text, item, index) => {
|
||||
const isEditing =
|
||||
editingKey === `${record.id}-${section.key}-${index}`;
|
||||
@@ -286,7 +285,6 @@ const ServicePage = () => {
|
||||
title: "单位",
|
||||
dataIndex: "unit",
|
||||
key: "unit",
|
||||
width: "10%",
|
||||
render: (text, item, index) => {
|
||||
const isEditing =
|
||||
editingKey === `${record.id}-${section.key}-${index}`;
|
||||
@@ -320,7 +318,6 @@ const ServicePage = () => {
|
||||
title: "单价",
|
||||
dataIndex: "price",
|
||||
key: "price",
|
||||
width: "10%",
|
||||
render: (text, item, index) => {
|
||||
const isEditing =
|
||||
editingKey === `${record.id}-${section.key}-${index}`;
|
||||
@@ -343,7 +340,6 @@ const ServicePage = () => {
|
||||
title: "数量",
|
||||
dataIndex: "quantity",
|
||||
key: "quantity",
|
||||
width: "10%",
|
||||
render: (text, item, index) => {
|
||||
const isEditing =
|
||||
editingKey === `${record.id}-${section.key}-${index}`;
|
||||
@@ -677,7 +673,7 @@ const ServicePage = () => {
|
||||
</Popconfirm>
|
||||
</div>
|
||||
<Table
|
||||
scroll={{ x: true }}
|
||||
scroll={{ x: true}}
|
||||
dataSource={section.items}
|
||||
pagination={false}
|
||||
size="small"
|
||||
@@ -714,7 +710,6 @@ const ServicePage = () => {
|
||||
title: "模板名称",
|
||||
dataIndex: ["attributes", "templateName"],
|
||||
key: "templateName",
|
||||
className: "min-w-[200px]",
|
||||
},
|
||||
{
|
||||
title: "模板类型",
|
||||
@@ -766,6 +761,7 @@ const ServicePage = () => {
|
||||
title: "创建时间",
|
||||
dataIndex: "created_at",
|
||||
key: "created_at",
|
||||
width: 220,
|
||||
render: (text) => new Date(text).toLocaleString(),
|
||||
sorter: (a, b) => new Date(a.created_at) - new Date(b.created_at),
|
||||
},
|
||||
@@ -858,7 +854,7 @@ const ServicePage = () => {
|
||||
<Card className="shadow-lg rounded-lg">
|
||||
<TableHeader />
|
||||
<Table
|
||||
scroll={{ x: true }}
|
||||
scroll={{ x: true}}
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
rowKey="id"
|
||||
|
||||
@@ -267,7 +267,7 @@ const Classify = ({activeType,typeList}) => {
|
||||
<div className="rounded-lg shadow-sm">
|
||||
<Form form={form}>
|
||||
<Table
|
||||
scroll={{ x: true }}
|
||||
scroll={{ x: true}}
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
rowKey="id"
|
||||
|
||||
@@ -263,7 +263,7 @@ const UnitManagement = ({ activeType, typeList }) => {
|
||||
<div className="rounded-lg shadow-sm">
|
||||
<Form form={form}>
|
||||
<Table
|
||||
scroll={{ x: true }}
|
||||
scroll={{ x: true}}
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
rowKey="id"
|
||||
|
||||
@@ -144,7 +144,7 @@ const SupplierPage = () => {
|
||||
}
|
||||
>
|
||||
<Table
|
||||
scroll={{ x: true }}
|
||||
scroll={{ x: true}}
|
||||
columns={columns}
|
||||
dataSource={suppliers}
|
||||
rowKey="id"
|
||||
|
||||
@@ -264,7 +264,7 @@ export default function TaskForm() {
|
||||
}, [id, templateId]);
|
||||
|
||||
return (
|
||||
<div className="bg-gradient-to-b from-gray-50 to-white dark:from-gray-800 dark:to-gray-900/90 min-h-screen p-2">
|
||||
<div className="bg-gradient-to-b min-h-screen p-2">
|
||||
<Card
|
||||
className="shadow-lg rounded-lg border-0"
|
||||
title={
|
||||
|
||||
@@ -344,7 +344,7 @@ const TaskPage = () => {
|
||||
</Tag>
|
||||
</Space>
|
||||
}
|
||||
className="h-full w-full overflow-auto dark:bg-gray-800 dark:border-gray-700"
|
||||
className="h-full w-full overflow-auto "
|
||||
extra={
|
||||
<Space>
|
||||
<Select
|
||||
@@ -385,7 +385,7 @@ const TaskPage = () => {
|
||||
columns={columns}
|
||||
dataSource={tasks}
|
||||
rowKey="id"
|
||||
scroll={{ x: true }}
|
||||
scroll={{ x: true}}
|
||||
loading={loadingTasks}
|
||||
onChange={handleTableChange}
|
||||
pagination={{
|
||||
@@ -423,7 +423,7 @@ const TaskPage = () => {
|
||||
type="primary"
|
||||
disabled={!selectedTemplateId}
|
||||
onClick={handleConfirm}
|
||||
className="gap-2 px-6 rounded-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700"
|
||||
className="gap-2 px-6 rounded-full "
|
||||
>
|
||||
<AppstoreOutlined /> 使用选中模板
|
||||
</Button>,
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
|
||||
const MarketingCampaign = () => {
|
||||
return <Outlet />;
|
||||
};
|
||||
|
||||
export default MarketingCampaign;
|
||||
@@ -1,34 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card, DatePicker } from 'antd';
|
||||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
|
||||
|
||||
const CampaignPerformance = () => {
|
||||
const data = [
|
||||
{ name: '1月', 点击率: 400, 转化率: 240 },
|
||||
{ name: '2月', 点击率: 300, 转化率: 139 },
|
||||
{ name: '3月', 点击率: 200, 转化率: 980 },
|
||||
];
|
||||
|
||||
return (
|
||||
<Card title="活动成效分析">
|
||||
<div className="mb-4">
|
||||
<DatePicker.RangePicker />
|
||||
</div>
|
||||
<div style={{ width: '100%', height: 400 }}>
|
||||
<ResponsiveContainer>
|
||||
<LineChart data={data}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Line type="monotone" dataKey="点击率" stroke="#8884d8" />
|
||||
<Line type="monotone" dataKey="转化率" stroke="#82ca9d" />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default CampaignPerformance;
|
||||
@@ -1,48 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card, Table, Button, Tag } from 'antd';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
|
||||
const CampaignPlan = () => {
|
||||
const columns = [
|
||||
{
|
||||
title: '计划名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '开始时间',
|
||||
dataIndex: 'startTime',
|
||||
key: 'startTime',
|
||||
},
|
||||
{
|
||||
title: '结束时间',
|
||||
dataIndex: 'endTime',
|
||||
key: 'endTime',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
render: status => (
|
||||
<Tag color={status === '进行中' ? 'green' : 'default'}>
|
||||
{status}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Card
|
||||
title="活动计划"
|
||||
extra={
|
||||
<Button type="primary" icon={<PlusOutlined />}>
|
||||
新增计划
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Table columns={columns} dataSource={[]} rowKey="id" />
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default CampaignPlan;
|
||||
@@ -1,45 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Form, Input, DatePicker, Select } from 'antd';
|
||||
import { STATUS } from '@/constants/status';
|
||||
|
||||
export const ProjectForm = ({ form }) => (
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item
|
||||
name="name"
|
||||
label="专案名称"
|
||||
rules={[{ required: true, message: '请输入专案名称' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="manager"
|
||||
label="负责人"
|
||||
rules={[{ required: true, message: '请选择负责人' }]}
|
||||
>
|
||||
<Select placeholder="请选择负责人" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="startDate"
|
||||
label="开始日期"
|
||||
rules={[{ required: true, message: '请选择开始日期' }]}
|
||||
>
|
||||
<DatePicker />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="status"
|
||||
label="状态"
|
||||
rules={[{ required: true, message: '请选择状态' }]}
|
||||
>
|
||||
<Select>
|
||||
{Object.values(STATUS).map(status => (
|
||||
<Select.Option key={status} value={status}>
|
||||
{status}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
@@ -1,71 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Card, Modal, Form } from 'antd';
|
||||
import { PageHeader } from '@/components/common/PageHeader';
|
||||
import { BaseTable } from '@/components/common/BaseTable';
|
||||
import { ProjectForm } from './components/ProjectForm';
|
||||
import { useProjectData } from './hooks/useProjectData';
|
||||
import { getStatusColumn, getDateColumn } from '@/utils/tableColumns';
|
||||
|
||||
const CampaignProject = () => {
|
||||
const [form] = Form.useForm();
|
||||
const [visible, setVisible] = useState(false);
|
||||
const { loading, data, pagination, loadData } = useProjectData();
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '专案名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '负责人',
|
||||
dataIndex: 'manager',
|
||||
key: 'manager',
|
||||
},
|
||||
getDateColumn('开始日期', 'startDate'),
|
||||
getStatusColumn(),
|
||||
];
|
||||
|
||||
const handleAdd = () => {
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
console.log('Success:', values);
|
||||
setVisible(false);
|
||||
form.resetFields();
|
||||
loadData();
|
||||
} catch (error) {
|
||||
console.error('Failed:', error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<PageHeader
|
||||
title="行销活动专案"
|
||||
onAdd={handleAdd}
|
||||
addButtonText="新增专案"
|
||||
/>
|
||||
<BaseTable
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
loading={loading}
|
||||
pagination={pagination}
|
||||
onChange={loadData}
|
||||
/>
|
||||
<Modal
|
||||
title="新增专案"
|
||||
open={visible}
|
||||
onOk={handleSubmit}
|
||||
onCancel={() => setVisible(false)}
|
||||
>
|
||||
<ProjectForm form={form} />
|
||||
</Modal>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default CampaignProject;
|
||||
@@ -1,8 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
|
||||
const Communication = () => {
|
||||
return <Outlet />;
|
||||
};
|
||||
|
||||
export default Communication;
|
||||
@@ -1,40 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card, Timeline, Button } from 'antd';
|
||||
import { ClockCircleOutlined } from '@ant-design/icons';
|
||||
|
||||
const CommunicationJourney = () => {
|
||||
return (
|
||||
<Card
|
||||
title="沟通历程"
|
||||
extra={
|
||||
<Button type="primary">导出记录</Button>
|
||||
}
|
||||
>
|
||||
<Timeline
|
||||
mode="alternate"
|
||||
items={[
|
||||
{
|
||||
children: '创建营销活动 2023-10-25 10:00:00',
|
||||
},
|
||||
{
|
||||
children: '发送邮件通知 2023-10-25 10:30:00',
|
||||
color: 'green',
|
||||
},
|
||||
{
|
||||
dot: <ClockCircleOutlined style={{ fontSize: '16px' }} />,
|
||||
children: '客户查看邮件 2023-10-25 11:00:00',
|
||||
},
|
||||
{
|
||||
color: 'red',
|
||||
children: '系统提醒跟进 2023-10-25 14:00:00',
|
||||
},
|
||||
{
|
||||
children: '完成跟进 2023-10-25 16:00:00',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default CommunicationJourney;
|
||||
@@ -1,48 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card, Table, Button, Input } from 'antd';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Search } = Input;
|
||||
|
||||
const CommunicationList = () => {
|
||||
const columns = [
|
||||
{
|
||||
title: '名单名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '联系人数量',
|
||||
dataIndex: 'contactCount',
|
||||
key: 'contactCount',
|
||||
},
|
||||
{
|
||||
title: '创建日期',
|
||||
dataIndex: 'createdAt',
|
||||
key: 'createdAt',
|
||||
},
|
||||
{
|
||||
title: '更新日期',
|
||||
dataIndex: 'updatedAt',
|
||||
key: 'updatedAt',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Card
|
||||
title="名单管理"
|
||||
extra={
|
||||
<Button type="primary" icon={<PlusOutlined />}>
|
||||
新增名单
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<div className="mb-4">
|
||||
<Search placeholder="搜索名单" allowClear enterButton />
|
||||
</div>
|
||||
<Table columns={columns} dataSource={[]} rowKey="id" />
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default CommunicationList;
|
||||
@@ -1,42 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card, Tabs, Button } from 'antd';
|
||||
import { SendOutlined } from '@ant-design/icons';
|
||||
|
||||
const CommunicationPreview = () => {
|
||||
const items = [
|
||||
{
|
||||
key: '1',
|
||||
label: '邮件预览',
|
||||
children: (
|
||||
<div className="p-4 border rounded">
|
||||
<h2>邮件主题</h2>
|
||||
<div className="mt-4">邮件内容预览区域</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: '短信预览',
|
||||
children: (
|
||||
<div className="p-4 border rounded">
|
||||
<div className="mt-4">短信内容预览区域</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Card
|
||||
title="消息预览"
|
||||
extra={
|
||||
<Button type="primary" icon={<SendOutlined />}>
|
||||
发送测试
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Tabs items={items} />
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default CommunicationPreview;
|
||||
@@ -1,8 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
|
||||
const MarketingCenter = () => {
|
||||
return <Outlet />;
|
||||
};
|
||||
|
||||
export default MarketingCenter;
|
||||
@@ -1,43 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card, Table, Button } from 'antd';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
|
||||
const TemplatePage = () => {
|
||||
const columns = [
|
||||
{
|
||||
title: '模版名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
},
|
||||
{
|
||||
title: '创建日期',
|
||||
dataIndex: 'createdAt',
|
||||
key: 'createdAt',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Card
|
||||
title="模版管理"
|
||||
extra={
|
||||
<Button type="primary" icon={<PlusOutlined />}>
|
||||
新增模版
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Table columns={columns} dataSource={[]} rowKey="id" />
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default TemplatePage;
|
||||
@@ -261,7 +261,7 @@ const ResourceTaskForm = () => {
|
||||
bordered={false}
|
||||
>
|
||||
<Table
|
||||
scroll={{ x: true }}
|
||||
scroll={{ x: true}}
|
||||
dataSource={dataSource}
|
||||
columns={columns}
|
||||
pagination={false}
|
||||
|
||||
@@ -148,7 +148,7 @@ const ResourceTask = () => {
|
||||
}
|
||||
>
|
||||
<Table
|
||||
scroll={{ x: true }}
|
||||
scroll={{ x: true}}
|
||||
columns={columns}
|
||||
dataSource={quotations}
|
||||
rowKey="id"
|
||||
|
||||
@@ -366,17 +366,18 @@ export default function PermissionManagement() {
|
||||
{
|
||||
title: '操作',
|
||||
key: 'operation',
|
||||
fixed: 'right',
|
||||
render: (_, record) => (
|
||||
<div className="space-x-2">
|
||||
<Button
|
||||
type="text"
|
||||
type="link"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => {
|
||||
setModalType('edit');
|
||||
form.setFieldsValue(record);
|
||||
setModalVisible(true);
|
||||
}}
|
||||
/>
|
||||
>编辑</Button>
|
||||
<Popconfirm
|
||||
title="确认删除"
|
||||
description="确定要删除这条权限记录吗?"
|
||||
@@ -385,10 +386,10 @@ export default function PermissionManagement() {
|
||||
onConfirm={() => handleDelete(record.id)}
|
||||
>
|
||||
<Button
|
||||
type="text"
|
||||
type="link"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
/>
|
||||
>删除</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
),
|
||||
@@ -522,7 +523,7 @@ export default function PermissionManagement() {
|
||||
|
||||
return (
|
||||
<App>
|
||||
<Card title="权限管理" bordered={false}>
|
||||
<Card title="权限管理" >
|
||||
<RoleHeader
|
||||
onAdd={() => {
|
||||
setModalType('add');
|
||||
@@ -538,12 +539,14 @@ export default function PermissionManagement() {
|
||||
/>
|
||||
|
||||
<Table
|
||||
scroll={{ x: true}}
|
||||
columns={columns}
|
||||
dataSource={permissions}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={pagination}
|
||||
onChange={handleTableChange}
|
||||
className='w-full'
|
||||
/>
|
||||
|
||||
<Modal
|
||||
|
||||
@@ -212,7 +212,7 @@ export const MembershipTable = ({ memberships, onUpdate, onDelete, onAdd }) => {
|
||||
</Button>
|
||||
<Form form={form} component={false}>
|
||||
<Table
|
||||
scroll={{ x: true }}
|
||||
scroll={{ x: true}}
|
||||
components={{
|
||||
body: {
|
||||
cell: EditableMembershipCell,
|
||||
|
||||
@@ -106,6 +106,7 @@ export const TeamTable = ({ tableLoading,pagination,dataSource, onTableChange,on
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
render: (_, record) => {
|
||||
const editable = isEditing(record);
|
||||
return editable ? (
|
||||
@@ -180,7 +181,7 @@ export const TeamTable = ({ tableLoading,pagination,dataSource, onTableChange,on
|
||||
return (
|
||||
<Form form={form} component={false}>
|
||||
<Table
|
||||
scroll={{ x: true }}
|
||||
scroll={{ x: true}}
|
||||
pagination={pagination}
|
||||
loading={loading||tableLoading}
|
||||
components={{
|
||||
|
||||
@@ -183,7 +183,7 @@ const TeamManagement = () => {
|
||||
|
||||
return (
|
||||
<App>
|
||||
<Card title="团队管理" bordered={false}>
|
||||
<Card title="团队管理" >
|
||||
<TeamHeader onSearch={handleSearch} onAdd={handleAdd} />
|
||||
<TeamTable
|
||||
loading={loading}
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
|
||||
|
||||
:root {
|
||||
// Light mode colors
|
||||
--primary-color: #1677ff;
|
||||
--primary-gradient: linear-gradient(45deg, #1677ff, #36cff0);
|
||||
--success-color: #52c41a;
|
||||
@@ -12,6 +13,25 @@
|
||||
--error-color: #ff4d4f;
|
||||
--font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||||
'Noto Sans', sans-serif;
|
||||
|
||||
// Google-style scrollbar colors (Light mode)
|
||||
--scrollbar-thumb: rgba(0, 0, 0, .2);
|
||||
--scrollbar-thumb-hover: rgba(0, 0, 0, .4);
|
||||
--scrollbar-track: transparent;
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
// Dark mode colors
|
||||
--primary-color: #4f9eff; // 更亮的蓝色适配暗色模式
|
||||
--primary-gradient: linear-gradient(45deg, #4f9eff, #60deff);
|
||||
--success-color: #6ede3b;
|
||||
--warning-color: #ffc53d;
|
||||
--error-color: #ff7875;
|
||||
|
||||
// Google-style scrollbar colors (Dark mode)
|
||||
--scrollbar-thumb: rgba(255, 255, 255, .2);
|
||||
--scrollbar-thumb-hover: rgba(255, 255, 255, .4);
|
||||
--scrollbar-track: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -152,42 +172,36 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
/* 滚动条基础样式 */
|
||||
/* 自定义滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
/* 垂直滚动条宽度 */
|
||||
height: 8px;
|
||||
/* 水平滚动条高度 */
|
||||
}
|
||||
|
||||
/* 亮色模式滚动条样式 */
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-gray-100;
|
||||
/* 轨道背景色 */
|
||||
background: var(--scrollbar-track);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-gray-300 rounded-full hover:bg-gray-400 transition-colors;
|
||||
/* 滑块样式 */
|
||||
background-color: var(--scrollbar-thumb);
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
/* 暗色模式滚动条样式 */
|
||||
.dark {
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-gray-800;
|
||||
/* 暗色模式轨道背景 */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-gray-600 hover:bg-gray-500;
|
||||
/* 暗色模式滑块样式 */
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--scrollbar-thumb-hover);
|
||||
}
|
||||
|
||||
/* Firefox 滚动条样式 */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: theme('colors.gray.300') theme('colors.gray.100');
|
||||
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
* {
|
||||
scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.dark * {
|
||||
|
||||
Reference in New Issue
Block a user