✨ (admin) 支持添加cookieTarget

admin-frontend/src/features/cookieManager/CookieEditModal.tsx

@@ -1,7 +1,10 @@
 import React, { useState } from 'react';
-import { Form, Input, Modal } from '@arco-design/web-react';
-import { useNewCookieMutation } from './cookieConfigSlice';
-import { Cookie } from '../../utils/type';
+import {
+  Button, Empty, Form, Input, Modal, Space, Table,
+} from '@arco-design/web-react';
+import { useDeleteCookieTargetMutation, useGetCookieTargetsQuery } from './cookieConfigSlice';
+import { Cookie, CookieTarget } from '../../utils/type';
+import CookieTargetModal from '../cookieTargetManager/CookieTargetModal';
 
 interface CookieEditModalProps {
   visible: boolean;
@@ -10,51 +13,109 @@ interface CookieEditModalProps {
 }
 
 function CookieEditModal({ visible, setVisible, cookie }: CookieEditModalProps) {
+  if (!cookie) {
+    return <Empty />;
+  }
   const FormItem = Form.Item;
-  const [confirmLoading, setConfirmLoading] = useState(false);
+  // const [confirmLoading, setConfirmLoading] = useState(false);
+  const [deleteCookieTarget] = useDeleteCookieTargetMutation();
+  // 获取 Cookie Target
+  const { data: cookieTargets } = useGetCookieTargetsQuery({ cookieId: cookie.id });
+
+  // 添加 Cookie Target
+  const [showAddCookieTargetModal, setShowAddCookieTargetModal] = useState(false);
+  const handleAddCookieTarget = () => () => {
+    setShowAddCookieTargetModal(true);
+  };
+
+  // 删除 Cookie Target
+  const handleDelete = (record: CookieTarget) => () => {
+    deleteCookieTarget({
+      cookieId: record.cookieId,
+      target: record.target.target,
+      platformName: record.target.platform_name,
+    });
+  };
+  const columns = [
+    {
+      title: '平台名称',
+      dataIndex: 'target.platform_name',
+    },
+    {
+      title: '订阅名称',
+      dataIndex: 'target.target_name',
+
+    },
+    {
+      title: 'Cookie ID',
+      dataIndex: 'cookie_id',
+    },
+    {
+      title: '操作',
+      dataIndex: 'op',
+      render: (_: null, record: CookieTarget) => (
+        <Space size="small">
+          <Button type="text" status="danger" onClick={handleDelete(record)}>删除</Button>
+        </Space>
+      ),
+    },
+  ];
 
   return (
-    <Modal
-      title="编辑 Cookie"
-      visible={visible}
-      onCancel={() => setVisible(false)}
-      confirmLoading={confirmLoading}
+    <>
+      <Modal
+        title="编辑 Cookie"
+        visible={visible}
+        onCancel={() => setVisible(false)}
+        // confirmLoading={confirmLoading}
       // onOk={onSubmit}
-      style={{ maxWidth: '90vw', minWidth: '50vw' }}
-    >
-      {cookie
-      && (
-      <Form autoComplete="off">
-        <FormItem label="Cookie ID">
-          <Input disabled value={cookie.id.toString()} />
-        </FormItem>
-        <FormItem label="Cookie 名称">
-          <Input value={cookie.friendly_name} disabled />
-        </FormItem>
-        <FormItem label="所属站点">
-          <Input value={cookie.site_name} disabled />
-        </FormItem>
+        style={{ maxWidth: '90vw', minWidth: '50vw' }}
+      >
+        <Form autoComplete="off">
+          <FormItem label="Cookie ID">
+            <Input disabled value={cookie.id.toString()} />
+          </FormItem>
+          <FormItem label="Cookie 名称">
+            <Input value={cookie.friendly_name} disabled />
+          </FormItem>
+          <FormItem label="所属站点">
+            <Input value={cookie.site_name} disabled />
+          </FormItem>
 
-        <FormItem label="标签">
-          <Input.TextArea
-            value={JSON.stringify(cookie.tags)}
-            disabled
-          />
-        </FormItem>
+          <FormItem label="标签">
+            <Input.TextArea
+              value={JSON.stringify(cookie.tags)}
+              disabled
+            />
+          </FormItem>
 
-        <FormItem label="最后使用时间">
-          <Input value={cookie.last_usage.toString()} disabled />
-        </FormItem>
-        <FormItem label="状态">
-          <Input value={cookie.status} disabled />
-        </FormItem>
-        <FormItem label="冷却时间（毫秒）">
-          <Input value={cookie.cd_milliseconds.toString()} disabled />
-        </FormItem>
+          <FormItem label="最后使用时间">
+            <Input value={cookie.last_usage.toString()} disabled />
+          </FormItem>
+          <FormItem label="状态">
+            <Input value={cookie.status} disabled />
+          </FormItem>
+          <FormItem label="冷却时间（毫秒）">
+            <Input value={cookie.cd_milliseconds.toString()} disabled />
+          </FormItem>
 
-      </Form>
-      )}
-    </Modal>
+        </Form>
+
+        <Button type="primary" onClick={handleAddCookieTarget()}>关联 Cookie</Button>
+        <Table
+          columns={columns}
+          data={cookieTargets}
+          rowKey={(record: CookieTarget) => `${record.target.platform_name}-${record.target.target}`}
+          scroll={{ x: true }}
+        />
+      </Modal>
+
+      <CookieTargetModal
+        cookie={cookie}
+        visible={showAddCookieTargetModal}
+        setVisible={setShowAddCookieTargetModal}
+      />
+    </>
   );
 }
 

admin-frontend/src/features/cookieManager/CookieManager.tsx

@@ -4,20 +4,14 @@ import {
   Table, TableColumnProps, Typography, Space, Popconfirm,
 } from '@arco-design/web-react';
 import { useParams } from 'react-router-dom';
-import { IconDelete, IconEdit } from '@arco-design/web-react/icon';
-import { useAppSelector } from '../../app/hooks';
 import { useGetCookiesQuery, useDeleteCookieMutation } from './cookieConfigSlice';
 import './CookieManager.css';
-import { selectPlatformConf, selectSiteConf } from '../globalConf/globalConfSlice';
-import { Cookie, PlatformConfig } from '../../utils/type';
-import CookieTargetModal from '../cookieTargetManager/CookieTargetModal';
+import { Cookie } from '../../utils/type';
 import CookieAddModal from './CookieAddModal';
 import CookieEditModal from './CookieEditModal';
 
 export default function CookieManager() {
   const { siteName } = useParams();
-  const siteConf = useAppSelector(selectSiteConf);
-  const platformConf = useAppSelector(selectPlatformConf);
   const { data: cookieDict } = useGetCookiesQuery();
   const cookiesList = cookieDict ? Object.values(cookieDict) : [];
 
@@ -59,10 +53,7 @@ export default function CookieManager() {
   if (siteName) {
     data = cookiesList.filter((tSite) => tSite.site_name === siteName);
   }
-  const platformThatSiteSupport: Record<string, string> = Object.values(platformConf).reduce((p, c) => {
-    p[c.siteName] = c.platformName;
-    return p;
-  }, {} as Record<string, string>);
+
   const columns: TableColumnProps[] = [
     {
       title: 'ID',

admin-frontend/src/features/cookieManager/cookieConfigSlice.ts

@@ -41,7 +41,7 @@ export const cookieTargetApi = createApi({
   tagTypes: ['CookieTarget'],
   endpoints: (builder) => ({
     getCookieTargets: builder.query<CookieTarget[], {cookieId: number }>({
-      query: (cookieId) => `/cookie_target?cookie_id=${cookieId}`,
+      query: ({ cookieId }) => `/cookie_target?cookie_id=${cookieId}`,
       providesTags: ['CookieTarget'],
     }),
     newCookieTarget: builder.mutation<StatusResp, NewCookieTargetParam>({

admin-frontend/src/features/cookieTargetManager/CookieTargetModal.tsx

@@ -1,18 +1,40 @@
 import React
   from 'react';
-import { Modal, Select } from '@arco-design/web-react';
-import { SubscribeConfig, SubscribeGroupDetail } from '../../utils/type';
+import {
+  Empty, Form, Modal, Select,
+} from '@arco-design/web-react';
+import { Cookie, SubscribeConfig, SubscribeGroupDetail } from '../../utils/type';
 import { useNewCookieTargetMutation } from '../cookieManager/cookieConfigSlice';
 import { useGetSubsQuery } from '../subsribeConfigManager/subscribeConfigSlice';
+import { useAppSelector } from '../../app/hooks';
+import { selectPlatformConf } from '../globalConf/globalConfSlice';
 
 interface SubscribeModalProp {
-  cookieId: number;
+  cookie:Cookie| null
   visible: boolean;
   setVisible: (arg0: boolean) => void;
 }
 
-export default function CookieTargetModal({ cookieId, visible, setVisible }: SubscribeModalProp) {
+export default function CookieTargetModal({
+  cookie, visible, setVisible,
+}: SubscribeModalProp) {
+  if (!cookie) {
+    return <Empty />;
+  }
   const [newCookieTarget] = useNewCookieTargetMutation();
+  const FormItem = Form.Item;
+
+  // 筛选出当前Cookie支持的平台
+  const platformConf = useAppSelector(selectPlatformConf);
+  const platformThatSiteSupport = Object.values(platformConf).reduce((p, c) => {
+    if (c.siteName in p) {
+      p[c.siteName].push(c.platformName);
+    } else {
+      p[c.siteName] = [c.platformName];
+    }
+    return p;
+  }, {} as Record<string, string[]>);
+  const supportedPlatform = platformThatSiteSupport[cookie.site_name];
 
   const { data: subs } = useGetSubsQuery();
   const pureSubs:SubscribeConfig[] = subs ? Object.values(subs)
@@ -20,18 +42,21 @@ export default function CookieTargetModal({ cookieId, visible, setVisible }: Sub
       pv:Array<SubscribeConfig>,
       cv:SubscribeGroupDetail,
     ) => pv.concat(cv.subscribes), []) : [];
+  const filteredSubs = pureSubs.filter((sub) => supportedPlatform.includes(sub.platformName));
   const [index, setIndex] = React.useState(-1);
+
   const handleSubmit = (idx:number) => {
     const postPromise: ReturnType<typeof newCookieTarget> = newCookieTarget({
-      cookieId,
-      platformName: pureSubs[idx].platformName,
-      target: pureSubs[idx].target,
+      cookieId: cookie.id,
+      platformName: filteredSubs[idx].platformName,
+      target: filteredSubs[idx].target,
     });
     postPromise.then(() => {
       setVisible(false);
     });
   };
   const { Option } = Select;
+
   return (
     <Modal
       title="关联 Cookie"
@@ -39,22 +64,46 @@ export default function CookieTargetModal({ cookieId, visible, setVisible }: Sub
       onCancel={() => setVisible(false)}
       onOk={() => handleSubmit(index)}
     >
-      <Select
-        placeholder="选择要关联的 target"
-        style={{ width: '100%' }}
-        onChange={setIndex}
-      >
-        {pureSubs.length
-          && pureSubs.map((sub, idx) => (
+
+      <Form>
+        <FormItem label="平台" required>
+
+          <Select
+            placeholder="选择要关联的平台"
+            style={{ width: '100%' }}
+            onChange={setIndex}
+          >
+            {supportedPlatform.length
+          && supportedPlatform.map((sub, idx) => (
             <Option
               key={JSON.stringify(sub)}
               value={idx}
             >
-              {JSON.stringify(sub)}
+              {sub}
             </Option>
           ))}
-      </Select>
+          </Select>
 
+        </FormItem>
+        <FormItem label="订阅目标" required>
+          <Select
+            placeholder="选择要关联的订阅目标"
+            style={{ width: '100%' }}
+            onChange={setIndex}
+          >
+            {filteredSubs.length
+          && filteredSubs.map((sub, idx) => (
+            <Option
+              key={JSON.stringify(sub)}
+              value={idx}
+            >
+              {sub.targetName}
+            </Option>
+          ))}
+          </Select>
+        </FormItem>
+
+      </Form>
     </Modal>
   );
 }