update frontend

admin-frontend/src/features/subsribeConfigManager/GroupManager.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+  Card, Typography, Grid, Button,
+} from '@arco-design/web-react';
+import { Link } from 'react-router-dom';
+import { useGetSubsQuery } from './subscribeConfigSlice';
+
+export default function GroupManager() {
+  const { data: subs } = useGetSubsQuery();
+  return (
+    <>
+      <Typography.Title heading={4} style={{ margin: '15px' }}>群管理</Typography.Title>
+      <div>
+        { subs && (
+          <Grid.Row gutter={20}>
+            { Object.keys(subs).map(
+              (groupNumber: string) => (
+                <Grid.Col span={6} key={groupNumber}>
+                  <Card
+                    title={subs[groupNumber].name}
+                    actions={[
+                      <Link to={`/home/groups/${groupNumber}`}><Button>详情</Button></Link>,
+                      <Button type="primary">添加</Button>,
+                    ]}
+                  >
+                    <div>{groupNumber}</div>
+                  </Card>
+                </Grid.Col>
+              ),
+            )}
+          </Grid.Row>
+        )}
+      </div>
+    </>
+  );
+}

admin-frontend/src/features/subsribeConfigManager/SubscribeManager.tsx

@@ -1,13 +1,87 @@
 import React from 'react';
+import {
+  Button, Empty, Space, Table, Tag,
+} from '@arco-design/web-react';
+import { useParams } from 'react-router-dom';
 import { useGetSubsQuery } from './subscribeConfigSlice';
+import { useAppSelector } from '../../app/hooks';
+import { selectPlatformConf } from '../globalConf/globalConfSlice';
+import { SubscribeConfig } from '../../utils/type';
 
 export default function SubscribeManager() {
   const { data: subs } = useGetSubsQuery();
+  const { groupNumber } = useParams();
+  const platformConf = useAppSelector(selectPlatformConf);
 
-  return (
-    <>
-      <div>{ subs && JSON.stringify(subs) }</div>
-      <div>1</div>
-    </>
-  );
+  const columns = [
+    {
+      title: '平台名称',
+      dataIndex: 'platformName',
+      render: (col: any, record: SubscribeConfig) => (
+        <span>{platformConf[record.platformName].name}</span>
+      ),
+    },
+    { title: '帐号名称', dataIndex: 'targetName' },
+    { title: '订阅帐号', dataIndex: 'target' },
+    {
+      title: '订阅分类',
+      dataIndex: 'cats',
+      render: (col: any, record: SubscribeConfig) => (
+        <span>
+          <Space>
+            {
+            record.cats.map((catNumber: number) => (
+              <Tag>{platformConf[record.platformName].categories[catNumber]}</Tag>
+            ))
+            }
+          </Space>
+        </span>
+      ),
+    },
+    {
+      title: '订阅标签',
+      dataIndex: 'tags',
+      render: (col: any, record: SubscribeConfig) => (
+        <span>
+          <Space>
+            {
+              record.tags.length === 0 ? <Tag color="green">全部标签</Tag>
+                : record.tags.map((tag: string) => (
+                  <Tag color="blue">{tag}</Tag>
+                ))
+            }
+          </Space>
+        </span>
+      ),
+    },
+    {
+      title: '操作',
+      dataIndex: 'op',
+      render: (_: any, record: SubscribeConfig) => (
+        <Space>
+          <Button type="text">编辑</Button>
+          <Button type="text" status="success">复制</Button>
+          <Button type="text" status="danger" onClick={() => { console.log(record); }}>删除</Button>
+        </Space>
+      ),
+    },
+  ];
+
+  if (subs && groupNumber) {
+    return (
+      <>
+        <span>
+          {subs[groupNumber].name}
+          {groupNumber}
+        </span>
+        <Button style={{ width: '90px', margin: '20px' }} type="primary">添加</Button>
+        <Table
+          columns={columns}
+          data={subs[groupNumber].subscribes}
+          rowKey={(record: SubscribeConfig) => `${record.platformName}-${record.target}`}
+        />
+      </>
+    );
+  }
+  return <Empty />;
 }