From 7030758ac9ac2de736a616f186b922b8025420a9 Mon Sep 17 00:00:00 2001
From: suyiiyii <suyiiyii@gmail.com>
Date: Fri, 11 Oct 2024 12:05:28 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20(admin)=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4cookie?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{CookieModal.tsx => CookieAddModal.tsx}   |  4 +-
 .../features/cookieManager/CookieManager.tsx  | 46 ++++++++++++++++---
 .../cookieManager/CookieManagerModal.tsx      |  0
 3 files changed, 42 insertions(+), 8 deletions(-)
 rename admin-frontend/src/features/cookieManager/{CookieModal.tsx => CookieAddModal.tsx} (92%)
 create mode 100644 admin-frontend/src/features/cookieManager/CookieManagerModal.tsx

diff --git a/admin-frontend/src/features/cookieManager/CookieModal.tsx b/admin-frontend/src/features/cookieManager/CookieAddModal.tsx
similarity index 92%
rename from admin-frontend/src/features/cookieManager/CookieModal.tsx
rename to admin-frontend/src/features/cookieManager/CookieAddModal.tsx
index a0eff15..0d6f9b9 100644
--- a/admin-frontend/src/features/cookieManager/CookieModal.tsx
+++ b/admin-frontend/src/features/cookieManager/CookieAddModal.tsx
@@ -8,7 +8,7 @@ interface CookieModalProps {
   siteName: string;
 }
 
-function CookieModal({ visible, setVisible, siteName }: CookieModalProps) {
+function CookieAddModal({ visible, setVisible, siteName }: CookieModalProps) {
   const FormItem = Form.Item;
   const [content, setContent] = useState<string>('');
   const [confirmLoading, setConfirmLoading] = useState(false);
@@ -51,4 +51,4 @@ function CookieModal({ visible, setVisible, siteName }: CookieModalProps) {
   );
 }
 
-export default CookieModal;
+export default CookieAddModal;
diff --git a/admin-frontend/src/features/cookieManager/CookieManager.tsx b/admin-frontend/src/features/cookieManager/CookieManager.tsx
index 6da1e6a..8686b6e 100644
--- a/admin-frontend/src/features/cookieManager/CookieManager.tsx
+++ b/admin-frontend/src/features/cookieManager/CookieManager.tsx
@@ -1,15 +1,17 @@
 import React from 'react';
 import {
   Button,
-  Table, TableColumnProps, Typography,
+  Table, TableColumnProps, Typography, Space, Popconfirm,
 } from '@arco-design/web-react';
 import { useParams } from 'react-router-dom';
-import { useAppSelector } from '../../app/hooks'; import { useGetCookiesQuery, useDeleteCookieMutation } from './cookieConfigSlice';
+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 { PlatformConfig } from '../../utils/type';
+import { Cookie, PlatformConfig } from '../../utils/type';
 import CookieTargetModal from '../cookieTargetManager/CookieTargetModal';
-import CookieModal from './CookieModal';
+import CookieAddModal from './CookieAddModal';
 
 export default function CookieManager() {
   const { siteName } = useParams();
@@ -18,11 +20,20 @@ export default function CookieManager() {
   const { data: cookieDict } = useGetCookiesQuery();
   const cookiesList = cookieDict ? Object.values(cookieDict) : [];
 
+  // 添加cookie
   const [showModal, setShowModal] = React.useState(false);
   const handleAddCookie = () => () => {
     setShowModal(true);
   };
 
+  // 删除cookie
+  const [deleteCookie] = useDeleteCookieMutation();
+  const handleDelCookie = (cookieId: string) => () => {
+    deleteCookie({
+      cookieId,
+    });
+  };
+
   let data = [
     {
       id: 3,
@@ -68,6 +79,23 @@ export default function CookieManager() {
     {
       title: 'CD',
       dataIndex: 'cd_milliseconds',
+    }, {
+      title: '操作',
+      dataIndex: 'op',
+      render: (_: null, record: Cookie) => (
+        <Space size="small">
+          <Popconfirm
+            title={`确定删除 Cookie ${record.friendly_name} ？`}
+            onOk={handleDelCookie(record.id.toString())}
+          >
+            <span className="list-actions-icon">
+              {/* <IconDelete /> */}
+              <Button type="text" status="danger">删除</Button>
+            </span>
+          </Popconfirm>
+        </Space>
+      ),
+
     },
 
   ];
@@ -78,11 +106,17 @@ export default function CookieManager() {
 
         <Typography.Title heading={4} style={{ margin: '15px' }}>Cookie 管理</Typography.Title>
 
-        <Button style={{ width: '90px', margin: '20px 10px' }} type="primary" onClick={handleAddCookie()}>添加</Button>
+        <Button
+          style={{ width: '90px', margin: '20px 10px' }}
+          type="primary"
+          onClick={handleAddCookie()}
+        >
+          添加
+        </Button>
       </div>
 
       <Table columns={columns} data={data} />
-      <CookieModal visible={showModal} setVisible={setShowModal} siteName={siteName || ''} />
+      <CookieAddModal visible={showModal} setVisible={setShowModal} siteName={siteName || ''} />
     </>
   );
 }
diff --git a/admin-frontend/src/features/cookieManager/CookieManagerModal.tsx b/admin-frontend/src/features/cookieManager/CookieManagerModal.tsx
new file mode 100644
index 0000000..e69de29