Merge branch 'feature_first_pages' of https://git.yishihui.com/Web/contentCooper into feature_first_pages

.env.development

@@ -1 +1 @@
-VITE_API_URL = https://testapi.piaoquantv.com
+VITE_API_URL = http://test-tp-open.piaoquantv.com

.env.production

@@ -1 +1 @@
-VITE_API_URL = https://api.piaoquantv.com
+VITE_API_URL = http://tp-open.piaoquantv.com

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/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,123 @@
+import { Button, Table, Image, Modal } from "antd";
+import type { TableProps } from 'antd';
+import { useState } from "react";
+
+interface DataType {
+  id: number;
+  name: string;
+  ghId: string;
+  contentType: string;
+  createTimestamp: number;
+}
+
+const AccountDialog = ({ title, isOpen, handleOk, handleCancel }) => {
+  return (
+    <Modal
+      width="400px"
+      title={title}
+      open={isOpen}
+      cancelText="取消"
+      okText="确定"
+      onOk={handleOk}
+      onCancel={handleCancel}>
+      <div className={"p-[20px] text-[#333] text-center"}>
+        <Image
+          width={140}
+          preview={false}
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <div className={"mt-[10px]"}>
+          <p className={"text-[16px]"}>请用微信扫码授权</p>
+          <p className={"text-[12px]"}>二维码将在1小时内失效</p>
+        </div>
+      </div>
+      <div className={"flex mb-[20px]"}>
+        <div className={"w-[100px]"}>公众号名称</div>
+        <div className={"flex-1"}>a</div>
+      </div>
+      <div className={"flex mb-[20px]"}>
+        <div className={"w-[100px]"}>公众号ID</div>
+        <div className={"flex-1"}>a</div>
+      </div>
+      <div className={"flex mb-[20px]"}>
+        <div className={"w-[100px]"}>内容类别</div>
+        <div className={"flex-1"}>a</div>
+      </div>
+    </Modal>
+  )
+}
+
+const Gzh: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [title, setTitle]	=	useState('');
+
+  const columns: TableProps<DataType>['columns'] = [
+    {
+      title: '账号名称',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '账号id',
+      dataIndex: 'ghId',
+      key: 'ghId',
+    },
+    {
+      title: '内容类别',
+      dataIndex: 'contentType',
+      key: 'contentType',
+    },
+    {
+      title: '新增时间',
+      dataIndex: 'createTimestamp',
+      key: 'createTimestamp',
+      render: (timestamp) => {
+        return new Date(timestamp).toLocaleString();
+      }
+    },
+    {
+      key: 'action',
+      render: () => (
+        <>
+          <Button type="link" onClick={modifyAccount}>编辑</Button>
+          <Button type="link" danger>删除</Button>
+        </>
+      ),
+    }
+  ]
+
+  const data: DataType[] = [
+    {id: 1, name: '账号1', ghId: 'gh_1234567890', contentType: '图文', createTimestamp: 1744184445467},
+  ]
+
+  const addAccount = () => {
+    setTitle('新建公众号');
+    setIsOpen(true);
+  }
+
+  const modifyAccount = () => {
+    setTitle('编辑公众号');
+    setIsOpen(true);
+  }
+
+  const handleOk = () => {
+    setIsOpen(false);
+  }
+
+  const handleCancel = () => {
+    setIsOpen(false);
+  }
+
+  return (
+    <>
+      <div className={"flex mb-[10px]"}>
+        <div className={"flex-1 leading-[32px]"}>公众号管理</div>
+        <Button type="primary" onClick={addAccount}>+ 新建账号</Button>
+      </div>
+      <Table columns={columns} dataSource={data} rowKey="id" pagination={{position: ['bottomRight']}} />
+      <AccountDialog title={title} isOpen={isOpen} handleOk={handleOk} handleCancel={handleCancel}></AccountDialog>
+    </>
+  )
+}
+
+export default Gzh;

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;
-