✨ 添加 Cookie 组件

admin-frontend/src/App.tsx

@@ -9,6 +9,7 @@ import SubscribeManager from './features/subsribeConfigManager/SubscribeManager'
 import WeightConfig from './features/weightConfig/WeightManager';
 import Home from './pages/Home';
 import Unauthed from './pages/Unauthed';
+import CookieManager from './features/cookieManager/CookieManager';
 
 function App() {
   const dispatch = useAppDispatch();
@@ -46,6 +47,14 @@ function App() {
           path: 'weight',
           element: <WeightConfig />,
         },
+        {
+          path: 'cookie',
+          element: <CookieManager />,
+        },
+        {
+          path: 'cookie/:siteName',
+          element: <CookieManager />,
+        },
       ],
     },
   ], { basename: '/bison' });

admin-frontend/src/app/store.ts

@@ -17,13 +17,16 @@ 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, cookieTargetApi } from '../features/cookieManager/cookieConfigSlice';
 
 const rootReducer = combineReducers({
   auth: authReducer,
   globalConf: globalConfReducer,
   [subscribeApi.reducerPath]: subscribeApi.reducer,
   [weightApi.reducerPath]: weightApi.reducer,
   [targetNameApi.reducerPath]: targetNameApi.reducer,
+  [cookieApi.reducerPath]: cookieApi.reducer,
+  [cookieTargetApi.reducerPath]: cookieTargetApi.reducer,
 });
 
 const persistConfig = {
@@ -43,7 +46,10 @@ export const store = configureStore({
   })
     .concat(subscribeApi.middleware)
     .concat(weightApi.middleware)
-    .concat(targetNameApi.middleware),
+    .concat(targetNameApi.middleware)
+    .concat(cookieApi.middleware)
+    .concat(cookieTargetApi.middleware),
+
 });
 
 export const persistor = persistStore(store);

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

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import { Form, Input, Modal } from '@arco-design/web-react';
+import { useNewCookieMutation } from './cookieConfigSlice';
+import { useAppDispatch } from '../../app/hooks';
+import validateCookie from './cookieValidateReq';
+
+interface CookieAddModalProps {
+  visible: boolean;
+  setVisible: (arg0: boolean) => void;
+  siteName: string;
+}
+
+function CookieAddModal({ visible, setVisible, siteName }: CookieAddModalProps) {
+  const FormItem = Form.Item;
+  const [content, setContent] = useState<string>('');
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [newCookie] = useNewCookieMutation();
+  const dispatch = useAppDispatch();
+
+  const onSubmit = () => {
+    const postPromise: ReturnType<typeof newCookie> = newCookie({ siteName, content });
+    setConfirmLoading(true);
+    postPromise.then(() => {
+      setConfirmLoading(false);
+      setVisible(false);
+      setContent('');
+    });
+  };
+
+  return (
+    <Modal
+      title="添加 Cookie"
+      visible={visible}
+      onCancel={() => setVisible(false)}
+      confirmLoading={confirmLoading}
+      onOk={onSubmit}
+      style={{ maxWidth: '90vw' }}
+    >
+
+      <Form autoComplete="off">
+        <FormItem label="站点" required>
+          <Input placeholder="Please enter site name" value={siteName} disabled />
+        </FormItem>
+        <FormItem
+          label="Cookie"
+          required
+          field="content"
+          hasFeedback
+          rules={[
+            {
+              validator: (value, callback) => new Promise<void>((resolve) => {
+                dispatch(validateCookie(siteName, value))
+                  .then((res) => {
+                    if (res) {
+                      callback();
+                    } else {
+                      callback('Cookie 格式错误');
+                    }
+                    resolve();
+                  });
+              }),
+            },
+          ]}
+
+        >
+          <Input.TextArea
+            placeholder="请输入 Cookie"
+            value={content}
+            onChange={setContent}
+          />
+        </FormItem>
+
+      </Form>
+    </Modal>
+  );
+}
+
+export default CookieAddModal;

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

@@ -0,0 +1,128 @@
+import React, { useState } from 'react';
+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;
+  setVisible: (arg0: boolean) => void;
+  cookie: Cookie | null
+}
+
+function CookieEditModal({ visible, setVisible, cookie }: CookieEditModalProps) {
+  if (!cookie) {
+    return <Empty />;
+  }
+  const FormItem = Form.Item;
+  // 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.cookie_id,
+      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}
+        onOk={() => setVisible(false)}
+        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.cookie_name} disabled />
+          </FormItem>
+          <FormItem label="所属站点">
+            <Input value={cookie.site_name} disabled />
+          </FormItem>
+          <FormItem label="内容">
+            <Input.TextArea
+              value={cookie.content}
+              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>
+
+        </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}
+      />
+    </>
+  );
+}
+
+export default CookieEditModal;

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

@@ -0,0 +1,13 @@
+.list-actions-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  transition: all 0.1s;
+}
+
+.list-actions-icon:hover {
+  background-color: var(--color-fill-3);
+}

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

@@ -0,0 +1,111 @@
+import React from 'react';
+import {
+  Button,
+  Table, TableColumnProps, Typography, Space, Popconfirm,
+} from '@arco-design/web-react';
+import { useParams } from 'react-router-dom';
+import { useGetCookiesQuery, useDeleteCookieMutation } from './cookieConfigSlice';
+import './CookieManager.css';
+import { Cookie } from '../../utils/type';
+import CookieAddModal from './CookieAddModal';
+import CookieEditModal from './CookieEditModal';
+
+export default function CookieManager() {
+  const { siteName } = useParams();
+  const { data: cookieDict } = useGetCookiesQuery();
+  const cookiesList = cookieDict ? Object.values(cookieDict) : [];
+
+  // 添加cookie
+  const [showAddModal, setShowAddModal] = React.useState(false);
+  const handleAddCookie = () => () => {
+    setShowAddModal(true);
+  };
+
+  // 删除cookie
+  const [deleteCookie] = useDeleteCookieMutation();
+  const handleDelCookie = (cookieId: string) => () => {
+    deleteCookie({
+      cookieId,
+    });
+  };
+
+  // 编辑cookie
+  const [showEditModal, setShowEditModal] = React.useState(false);
+  const [editCookie, setEditCookie] = React.useState<Cookie | null>(null);
+  const handleEditCookie = (cookie: Cookie) => () => {
+    setEditCookie(cookie);
+    setShowEditModal(true);
+  };
+
+  let data = [];
+  if (siteName) {
+    data = cookiesList.filter((tSite) => tSite.site_name === siteName);
+  }
+
+  const columns: TableColumnProps[] = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+    },
+    {
+      title: 'Cookie 名称',
+      dataIndex: 'cookie_name',
+    },
+    {
+      title: '所属站点',
+      dataIndex: 'site_name',
+    },
+    {
+      title: '最后使用时间',
+      dataIndex: 'last_usage',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+    },
+    {
+      title: 'CD',
+      dataIndex: 'cd_milliseconds',
+    }, {
+      title: '操作',
+      dataIndex: 'op',
+      render: (_: null, record: Cookie) => (
+        <Space size="small">
+          <Popconfirm
+            title={`确定删除 Cookie ${record.cookie_name} ？`}
+            onOk={handleDelCookie(record.id.toString())}
+          >
+            <span className="list-actions-icon">
+              {/* <IconDelete /> */}
+              <Button type="text" status="danger">删除</Button>
+            </span>
+          </Popconfirm>
+          <Button type="text" onClick={handleEditCookie(record)}>编辑</Button>
+        </Space>
+      ),
+
+    },
+
+  ];
+
+  return (
+    <>
+      <div>
+
+        <Typography.Title heading={4} style={{ margin: '15px' }}>Cookie 管理</Typography.Title>
+
+        <Button
+          style={{ width: '90px', margin: '20px 10px' }}
+          type="primary"
+          onClick={handleAddCookie()}
+        >
+          添加
+        </Button>
+      </div>
+
+      <Table columns={columns} data={data} />
+      <CookieAddModal visible={showAddModal} setVisible={setShowAddModal} siteName={siteName || ''} />
+      <CookieEditModal visible={showEditModal} setVisible={setShowEditModal} cookie={editCookie} />
+    </>
+  );
+}