公众号管理

src/App.tsx

@@ -11,7 +11,7 @@ const App: React.FC = () => {
   // TODO: refactor this logic
   if (window.location.pathname === '/') {
     setTimeout(() => {
-      navigate('/demo/table')
+      navigate('/cooperationAccount/gzh')
     })
   }
 

src/components/layout/headerbar.tsx

@@ -29,10 +29,10 @@ const Headerbar = (props: { colorBgContainer: string }) => {
         <div className='flex items-center gap-[10px] cursor-pointer'>
           <Switch checkedChildren="Light" unCheckedChildren="Dark" defaultChecked onChange={(checked) => setAlgorithm(checked ? 'default' : 'dark')} />
 					<Dropdown trigger={['hover']} menu={{items: [{label: (<Button type="primary" onClick={logoutHandle}>退出账号</Button>), key: 'logout'}]}}>
-						<view className='flex items-center gap-[10px]'>
-							<view>Yujian Xue</view>
+						<div className='flex items-center gap-[10px]'>
+							<div>Yujian Xue</div>
 							<img src="https://avatars.githubusercontent.com/u/48818060?s=48&v=4" alt="avatar" style={{ width: 40, height: 40 }} />
-						</view>
+						</div>
 					</Dropdown>
         </div>
       </div>

src/views/cooperationAccount/cooperationAccount.router.tsx

@@ -0,0 +1,30 @@
+import { TeamOutlined } from '@ant-design/icons'
+import { AdminRouterItem } from "../../router";
+import { Outlet } from "react-router-dom";
+import GZH from './gzh';
+
+const demoRoutes: AdminRouterItem[] = [
+  {
+    path: 'cooperationAccount',
+    element: <Outlet />,
+		meta: {
+			label: "合作账号管理",
+			title: "合作账号管理",
+			key: "/cooperationAccount",
+			icon: <TeamOutlined />,
+		},
+		children: [
+			{
+				path: 'gzh',
+				element: <GZH />,
+				meta: {
+					label: "公众号管理",
+					title: "公众号管理",
+					key: "/cooperationAccount/gzh",
+				},
+			},
+		]
+  }
+]
+
+export default demoRoutes;

src/views/cooperationAccount/gzh/index.tsx

@@ -0,0 +1,76 @@
+import { Button, Table, Modal } from "antd";
+import type { TableProps } from 'antd';
+import { useState } from "react";
+
+interface DataType {
+  key: string;
+  name: string;
+  age: number;
+  address: string;
+}
+
+const columns: TableProps<DataType>['columns'] = [
+  {
+    title: '账号名称',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '账号id',
+    dataIndex: 'id',
+    key: 'id',
+  },
+  {
+    title: '内容类别',
+    dataIndex: 'qrcode',
+    key: 'qrcode',
+  },
+	{
+		title: '新增时间',
+		dataIndex: 'status',
+		key: 'status',
+	},
+  {
+    title: '操作',
+  }
+]
+
+const data: DataType[] = [
+]
+
+export default function Gzh() {
+	const [isModalOpen, setIsModalOpen] = useState(false);
+	const [modalTitle, setModalTitle] = useState('');
+
+	const newAccount = () => {
+    setIsModalOpen(true);
+		setModalTitle('新建账号');
+  };
+
+	// const modifyAccount = () => {
+  //   setIsModalOpen(true);
+  //   setModalTitle('修改账号');
+  // };
+
+  const handleOk = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <>
+      <div className={"flex mb-[10px]"}>
+				<div className={"flex-1 leading-[32px]"}>公众号管理</div>
+				<Button type="primary" onClick={newAccount}>+ 新建账号</Button>
+			</div>
+			<Table columns={columns} dataSource={data} />
+
+			<Modal title={modalTitle} cancelText="取消" okText="确定" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
+				
+			</Modal>
+    </>
+  )
+}

src/views/demo/chart/index.tsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import { Line, Pie } from '@ant-design/charts';
-import { Card, Space } from 'antd';
-
-const DemoChart: React.FC = () => {
-  // Mock data for line chart
-  const lineData = [
-    { year: '2019', value: 3 },
-    { year: '2020', value: 4 },
-    { year: '2021', value: 3.5 },
-    { year: '2022', value: 5 },
-    { year: '2023', value: 4.9 },
-  ];
-
-  // Mock data for pie chart
-  const pieData = [
-    { type: 'Category A', value: 27 },
-    { type: 'Category B', value: 25 },
-    { type: 'Category C', value: 18 },
-    { type: 'Category D', value: 15 },
-    { type: 'Category E', value: 15 },
-  ];
-
-  const lineConfig = {
-    data: lineData,
-    xField: 'year',
-    yField: 'value',
-    point: {
-      shapeField: 'square',
-      sizeField: 4,
-    },
-    interaction: {
-      tooltip: {
-        marker: false,
-      },
-    },
-    style: {
-      lineWidth: 2,
-    },
-  };
-
-  const pieConfig = {
-    data: pieData,
-    angleField: 'value',
-    colorField: 'type',
-    label: {
-      text: 'value',
-      style: {
-        fontWeight: 'bold',
-      },
-    },
-    legend: {
-      color: {
-        title: false,
-        position: 'right',
-        rowPadding: 5,
-      },
-    },
-  };
-
-  return (
-    <div className="p-4" style={{ width: '100%' }}>
-      <Space direction="vertical" size="large" style={{ display: 'flex', width: '100%' }}>
-        <Card title="Line Chart Demo" style={{ width: '100%' }}>
-          <div style={{ width: '100%', minHeight: '300px' }}>
-            <Line {...lineConfig} />
-          </div>
-        </Card>
-        <Card title="Pie Chart Demo" style={{ width: '100%' }}>
-          <div style={{ width: '100%', minHeight: '300px' }}>
-            <Pie {...pieConfig} />
-          </div>
-        </Card>
-      </Space>
-    </div>
-  );
-};
-
-export default DemoChart;

src/views/demo/demo.router.tsx

@@ -1,59 +0,0 @@
-import DemoPage from "./index";
-import { DesktopOutlined } from '@ant-design/icons'
-import { AdminRouterItem } from "../../router";
-import DemoChart from "./chart";
-import DemoTable from "./table";
-import { Outlet } from "react-router-dom";
-
-const demoRoutes: AdminRouterItem[] = [
-  {
-    path: 'demo',
-    element: <DemoPage />,
-    meta: {
-      label: "Demo",
-      title: "Demo",
-      key: "/demo",
-      icon: <DesktopOutlined />,
-    },
-    children: [{
-      path: 'chart',
-      element: <DemoChart />,
-      meta: {
-        label: "chart",
-        title: "chart",
-        key: "/demo/chart",
-        icon: <DesktopOutlined />,
-      }
-    }, {
-      path: 'table',
-      element: <DemoTable />,
-      meta: {
-        label: "table",
-        title: "table",
-        key: "/demo/table",
-        icon: <DesktopOutlined />,
-      }
-    }, {
-      path: 'nested',
-      element: <Outlet />,
-      meta: {
-        label: "nested",
-        title: "nested",
-        key: "/demo/nested",
-        icon: <DesktopOutlined />,
-      },
-      children: [{
-        path: 'table',
-        element: <DemoTable />,
-        meta: {
-          label: "table",
-          title: "table",
-          key: "/demo/nested/table",
-          icon: <DesktopOutlined />,
-        }
-      }]
-    }]
-  },
-]
-
-export default demoRoutes

src/views/demo/form/components/calendar.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { Calendar } from 'antd';
-import type { CalendarProps } from 'antd';
-import type { Dayjs } from 'dayjs';
-
-const CallendarCmp: React.FC = () => {
-  const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {
-    console.log(value.format('YYYY-MM-DD'), mode);
-  };
-
-  return <Calendar onPanelChange={onPanelChange} />;
-};
-
-export default CallendarCmp;

src/views/demo/form/form.router.tsx

@@ -1,40 +0,0 @@
-import { FormOutlined, TeamOutlined } from '@ant-design/icons'
-import { AdminRouterItem } from '../../../router'
-import FormPage from '.'
-import { Outlet } from 'react-router-dom'
-import CallendarCmp from './components/calendar'
-
-const demoRoutes: AdminRouterItem[] = [
-  {
-    path: 'form',
-    element: <FormPage />,
-    meta: {
-      label: "Form",
-      title: "Form",
-      key: "/form",
-      icon: <FormOutlined />,
-    },
-  },
-  {
-    path: 'form2',
-    element: <Outlet />,
-    meta: {
-      label: "Form2",
-      title: "Form2",
-      key: "/form2",
-      icon: <FormOutlined />,
-    },
-    children: [{
-      path: 'callendar',
-      element: <CallendarCmp />,
-      meta: {
-        label: "Callendar",
-        title: "Callendar",
-        key: "/form2/callendar",
-        icon: <TeamOutlined />,
-      }
-    }]
-  }
-]
-
-export default demoRoutes

src/views/demo/form/index.tsx

@@ -1,54 +0,0 @@
-import React, { useState } from 'react';
-import { InfoCircleOutlined } from '@ant-design/icons';
-import { Button, Form, Input, Radio, Tag } from 'antd';
-
-type RequiredMark = boolean | 'optional' | 'customize';
-
-const customizeRequiredMark = (label: React.ReactNode, { required }: { required: boolean }) => (
-  <>
-    {required ? <Tag color="error">Required</Tag> : <Tag color="warning">optional</Tag>}
-    {label}
-  </>
-);
-
-const FormPage: React.FC = () => {
-  const [form] = Form.useForm();
-  const [requiredMark, setRequiredMarkType] = useState<RequiredMark>('optional');
-
-  const onRequiredTypeChange = ({ requiredMarkValue }: { requiredMarkValue: RequiredMark }) => {
-    setRequiredMarkType(requiredMarkValue);
-  };
-
-  return (
-    <Form
-      form={form}
-      layout="vertical"
-      initialValues={{ requiredMarkValue: requiredMark }}
-      onValuesChange={onRequiredTypeChange}
-      requiredMark={requiredMark === 'customize' ? customizeRequiredMark : requiredMark}
-    >
-      <Form.Item label="Required Mark" name="requiredMarkValue">
-        <Radio.Group>
-          <Radio.Button value>Default</Radio.Button>
-          <Radio.Button value="optional">Optional</Radio.Button>
-          <Radio.Button value={false}>Hidden</Radio.Button>
-          <Radio.Button value="customize">Customize</Radio.Button>
-        </Radio.Group>
-      </Form.Item>
-      <Form.Item label="Field A" required tooltip="This is a required field">
-        <Input placeholder="input placeholder" />
-      </Form.Item>
-      <Form.Item
-        label="Field B"
-        tooltip={{ title: 'Tooltip with customize icon', icon: <InfoCircleOutlined /> }}
-      >
-        <Input placeholder="input placeholder" />
-      </Form.Item>
-      <Form.Item>
-        <Button type="primary">Submit</Button>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default FormPage;

src/views/demo/index.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import { Outlet } from 'react-router-dom';
-
-const DemoPage: React.FC = () => {
-  return <Outlet />
-};
-
-export default DemoPage;

src/views/demo/table/index.tsx

@@ -1,88 +0,0 @@
-import React from 'react';
-import { Space, Table, Tag } from 'antd';
-import type { TableProps } from 'antd';
-
-interface DataType {
-  key: string;
-  name: string;
-  age: number;
-  address: string;
-  tags: string[];
-}
-
-const columns: TableProps<DataType>['columns'] = [
-  {
-    title: 'Name',
-    dataIndex: 'name',
-    key: 'name',
-    render: (text) => <a>{text}</a>,
-  },
-  {
-    title: 'Age',
-    dataIndex: 'age',
-    key: 'age',
-  },
-  {
-    title: 'Address',
-    dataIndex: 'address',
-    key: 'address',
-  },
-  {
-    title: 'Tags',
-    key: 'tags',
-    dataIndex: 'tags',
-    render: (_, { tags }) => (
-      <>
-        {tags.map((tag) => {
-          let color = tag.length > 5 ? 'geekblue' : 'green';
-          if (tag === 'loser') {
-            color = 'volcano';
-          }
-          return (
-            <Tag color={color} key={tag}>
-              {tag.toUpperCase()}
-            </Tag>
-          );
-        })}
-      </>
-    ),
-  },
-  {
-    title: 'Action',
-    key: 'action',
-    render: (_, record) => (
-      <Space size="middle">
-        <a>Invite {record.name}</a>
-        <a>Delete</a>
-      </Space>
-    ),
-  },
-];
-
-const data: DataType[] = [
-  {
-    key: '1',
-    name: 'John Brown',
-    age: 32,
-    address: 'New York No. 1 Lake Park',
-    tags: ['nice', 'developer'],
-  },
-  {
-    key: '2',
-    name: 'Jim Green',
-    age: 42,
-    address: 'London No. 1 Lake Park',
-    tags: ['loser'],
-  },
-  {
-    key: '3',
-    name: 'Joe Black',
-    age: 32,
-    address: 'Sydney No. 1 Lake Park',
-    tags: ['cool', 'teacher'],
-  },
-];
-
-const DemoTable: React.FC = () => <Table columns={columns} dataSource={data} />;
-
-export default DemoTable;

src/views/test/index.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-const TestPage: React.FC = () => {
-  return (
-    <div>
-      <h1>Test Page</h1>
-    </div>
-  );
-};
-
-export default TestPage;
-