✨ 支持添加 CookieTarget

admin-frontend/src/app/store.ts

@@ -17,7 +17,7 @@ import globalConfReducer from '../features/globalConf/globalConfSlice';
 import { subscribeApi } from '../features/subsribeConfigManager/subscribeConfigSlice';
 import { targetNameApi } from '../features/targetName/targetNameSlice';
 import { weightApi } from '../features/weightConfig/weightConfigSlice';
-import { cookieApi } from '../features/cookieManager/cookieConfigSlice';
+import { cookieApi, cookieTargetApi } from '../features/cookieManager/cookieConfigSlice';
 
 const rootReducer = combineReducers({
   auth: authReducer,
@@ -26,6 +26,7 @@ const rootReducer = combineReducers({
   [weightApi.reducerPath]: weightApi.reducer,
   [targetNameApi.reducerPath]: targetNameApi.reducer,
   [cookieApi.reducerPath]: cookieApi.reducer,
+  [cookieTargetApi.reducerPath]: cookieTargetApi.reducer,
 });
 
 const persistConfig = {
@@ -46,7 +47,9 @@ export const store = configureStore({
     .concat(subscribeApi.middleware)
     .concat(weightApi.middleware)
     .concat(targetNameApi.middleware)
-    .concat(cookieApi.middleware),
+    .concat(cookieApi.middleware)
+    .concat(cookieTargetApi.middleware),
+
 });
 
 export const persistor = persistStore(store);

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

@@ -40,23 +40,21 @@ export const cookieTargetApi = createApi({
   baseQuery: baseQueryWithAuth,
   tagTypes: ['CookieTarget'],
   endpoints: (builder) => ({
-    getCookieTargets: builder.query<CookieTarget, { site_name: string, cookie_id: number }>({
+    getCookieTargets: builder.query<CookieTarget[], {cookieId: number }>({
-      query: () => '/cookie_target?site_name=site_name&cookie_id=cookie_id',
+      query: (cookieId) => `/cookie_target?cookie_id=${cookieId}`,
       providesTags: ['CookieTarget'],
     }),
     newCookieTarget: builder.mutation<StatusResp, NewCookieTargetParam>({
       query: ({ platformName, target, cookieId }) => ({
         method: 'POST',
-        url: '/cookie_target',
+        url: `/cookie_target?platform_name=${platformName}&target=${encodeURIComponent(target)}&cookie_id=${cookieId}`,
-        body: { platform_name: platformName, target, cookie_id: cookieId },
       }),
       invalidatesTags: ['CookieTarget'],
     }),
     deleteCookieTarget: builder.mutation<StatusResp, DelCookieTargetParam>({
       query: ({ platformName, target, cookieId }) => ({
         method: 'DELETE',
-        url: '/cookie_target',
+        url: `/cookie_target?platform_name=${platformName}&target=${encodeURIComponent(target)}&cookie_id=${cookieId}`,
-        body: { platform_name: platformName, target, cookie_id: cookieId },
       }),
       invalidatesTags: ['CookieTarget'],
     }),

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

@@ -1,7 +1,65 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import {
+  Button, Empty, Table, Typography,
+} from '@arco-design/web-react';
+import { useGetCookieTargetsQuery } from '../cookieManager/cookieConfigSlice';
+import { SubscribeConfig } from '../../utils/type';
+import { useDeleteSubMutation } from '../subsribeConfigManager/subscribeConfigSlice';
+import CookieTargetModal from './CookieTargetModal';
 
 export default function () {
-  return (
+  const { cookieId } = useParams();
-    <h1>再等等</h1>
+  const { data: cookieTargets } = useGetCookieTargetsQuery(cookieId);
-  );
+
+  console.log(cookieTargets);
+  const [{ isLoading: deleteIsLoading }] = useDeleteSubMutation();
+  const isLoading = deleteIsLoading;
+  const [showModal, setShowModal] = useState(false);
+  const handleAdd = () => {
+    setShowModal(true);
+  };
+  const columns = [
+    {
+      title: '平台名称',
+      dataIndex: 'target.platform_name',
+    },
+    {
+      title: '订阅名称',
+      dataIndex: 'target.target_name',
+
+    },
+    {
+      title: 'Cookie ID',
+      dataIndex: 'cookie_id',
+    },
+  ];
+  if (cookieId) {
+    return (
+      <>
+        <span>
+          <Typography.Title heading={3}>{`Cookie ${cookieId}`}</Typography.Title>
+        </span>
+        <Button style={{ width: '90px', margin: '20px 10px' }} type="primary" onClick={handleAdd}>添加</Button>
+        <Table
+          columns={columns}
+          data={cookieTargets}
+          rowKey={(record: SubscribeConfig) => `${record.platformName}-${record.target}`}
+          loading={isLoading}
+          scroll={{ x: true }}
+        />
+        {
+          cookieTargets && cookieTargets.length > 0
+        && (
+        <CookieTargetModal
+          visible={showModal}
+          setVisible={setShowModal}
+          cookieId={cookieId}
+        />
+        )
+        }
+      </>
+    );
+  }
+  return <Empty />;
 }

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

@@ -0,0 +1,59 @@
+import React
+  from 'react';
+import { Modal, Select } from '@arco-design/web-react';
+import { SubscribeGroupDetail } from '../../utils/type';
+import { useNewCookieTargetMutation } from '../cookieManager/cookieConfigSlice';
+import { useGetSubsQuery } from '../subsribeConfigManager/subscribeConfigSlice';
+
+interface SubscribeModalProp {
+  visible: boolean;
+  setVisible: (arg0: boolean) => void;
+  cookieId: number;
+}
+
+export default function ({ visible, setVisible, cookieId }: SubscribeModalProp) {
+  const [newCookieTarget] = useNewCookieTargetMutation();
+
+  const { data: subs } = useGetSubsQuery();
+  const pureSubs = subs ? Object.values(subs)
+    .reduce((pv:Array, cv:SubscribeGroupDetail) => pv.concat(cv.subscribes), []) : [];
+  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,
+    });
+    postPromise.then(() => {
+      setVisible(false);
+    });
+  };
+  const { Option } = Select;
+  return (
+    <Modal
+      title="关联 Cookie"
+      visible={visible}
+      onCancel={() => setVisible(false)}
+      onOk={() => handleSubmit(index)}
+    >
+      <Select
+        placeholder="选择要关联的 target"
+        style={{ width: '100%' }}
+        onChange={setIndex}
+
+      >
+        {
+          pureSubs.map((sub, idx) => (
+            <Option
+              key={JSON.stringify(sub)}
+              value={idx}
+            >
+              {JSON.stringify(sub)}
+            </Option>
+          ))
+        }
+      </Select>
+
+    </Modal>
+  );
+}