diff --git a/admin-frontend/src/features/cookieManager/CookieEditModal.tsx b/admin-frontend/src/features/cookieManager/CookieEditModal.tsx
index f3e659a..49f1e37 100644
--- a/admin-frontend/src/features/cookieManager/CookieEditModal.tsx
+++ b/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 ;
+ }
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) => (
+
+
+
+ ),
+ },
+ ];
return (
- setVisible(false)}
- confirmLoading={confirmLoading}
+ <>
+ setVisible(false)}
+ // confirmLoading={confirmLoading}
// onOk={onSubmit}
- style={{ maxWidth: '90vw', minWidth: '50vw' }}
- >
- {cookie
- && (
-
- )}
-
+
+
+
+ `${record.target.platform_name}-${record.target.target}`}
+ scroll={{ x: true }}
+ />
+
+
+
+ >
);
}
diff --git a/admin-frontend/src/features/cookieManager/CookieManager.tsx b/admin-frontend/src/features/cookieManager/CookieManager.tsx
index 19fa397..5990881 100644
--- a/admin-frontend/src/features/cookieManager/CookieManager.tsx
+++ b/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 = Object.values(platformConf).reduce((p, c) => {
- p[c.siteName] = c.platformName;
- return p;
- }, {} as Record);
+
const columns: TableColumnProps[] = [
{
title: 'ID',
diff --git a/admin-frontend/src/features/cookieManager/cookieConfigSlice.ts b/admin-frontend/src/features/cookieManager/cookieConfigSlice.ts
index c4a8e85..683d7cc 100644
--- a/admin-frontend/src/features/cookieManager/cookieConfigSlice.ts
+++ b/admin-frontend/src/features/cookieManager/cookieConfigSlice.ts
@@ -41,7 +41,7 @@ export const cookieTargetApi = createApi({
tagTypes: ['CookieTarget'],
endpoints: (builder) => ({
getCookieTargets: builder.query({
- query: (cookieId) => `/cookie_target?cookie_id=${cookieId}`,
+ query: ({ cookieId }) => `/cookie_target?cookie_id=${cookieId}`,
providesTags: ['CookieTarget'],
}),
newCookieTarget: builder.mutation({
diff --git a/admin-frontend/src/features/cookieTargetManager/CookieTargetModal.tsx b/admin-frontend/src/features/cookieTargetManager/CookieTargetModal.tsx
index 64b804f..611c321 100644
--- a/admin-frontend/src/features/cookieTargetManager/CookieTargetModal.tsx
+++ b/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 ;
+ }
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);
+ 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,
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 = 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 (
setVisible(false)}
onOk={() => handleSubmit(index)}
>
-
+
+
+
+
+
+
);
}