✨ 添加 Cookie 增删查 功能

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

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Form, Input, Modal } from '@arco-design/web-react';
+import { useNewCookieMutation } from './cookieConfigSlice';
 
 interface CookieModalProps {
   visible: boolean;
@@ -10,15 +11,26 @@ interface CookieModalProps {
 function CookieModal({ visible, setVisible, siteName }: CookieModalProps) {
   const FormItem = Form.Item;
   const [content, setContent] = useState<string>('');
-  // const [confirmLoading, setConfirmLoading] = useState(false);
-  const [confirmLoading] = useState(false);
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [newCoookie] = useNewCookieMutation();
+
+  const onSubmit = () => {
+    const postPromise: ReturnType<typeof newCoookie> = newCoookie({ siteName, content });
+    setConfirmLoading(true);
+    postPromise.then(() => {
+      setConfirmLoading(false);
+      setVisible(false);
+      setContent('');
+    });
+  };
+
   return (
     <Modal
       title="添加 Cookie"
       visible={visible}
       onCancel={() => setVisible(false)}
       confirmLoading={confirmLoading}
-      onOk={() => setVisible(false)}
+      onOk={onSubmit}
       style={{ maxWidth: '90vw' }}
     >
 

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

@@ -21,9 +21,9 @@ export const cookieApi = createApi({
       invalidatesTags: ['Cookie'],
     }),
     deleteCookie: builder.mutation<StatusResp, DelCookieParam>({
-      query: ({ siteName, cookieId }) => ({
+      query: ({ cookieId }) => ({
         method: 'DELETE',
-        url: `/cookie/${cookieId}?site_name=${siteName}`,
+        url: `/cookie/${cookieId}`,
       }),
       invalidatesTags: ['Cookie'],
     }),

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

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 import {
   Button,
-  Card, Descriptions, Grid, List, Popover, Typography,
+  Card, Descriptions, Grid, List, Popconfirm, Popover, Typography,
 } from '@arco-design/web-react';
 import { selectSiteConf } from '../globalConf/globalConfSlice';
 import { useAppSelector } from '../../app/hooks';
 import { Cookie, SiteConfig } from '../../utils/type';
-import { useGetCookiesQuery } from './cookieConfigSlice';
+import { useGetCookiesQuery, useDeleteCookieMutation } from './cookieConfigSlice';
 import CookieModal from './CookieModal';
 
 interface CookieSite {
@@ -25,12 +25,19 @@ export default function CookieManager() {
   }));
   const [showModal, setShowModal] = useState(false);
   const [siteName, setSiteName] = useState('');
+  const [deleteCookie] = useDeleteCookieMutation();
 
   const handleAddCookie = (newSiteName: string) => () => {
     console.log(newSiteName);
     setSiteName(newSiteName);
     setShowModal(true);
   };
+  const handleDelCookie = (cookieId: string) => () => {
+    console.log(cookieId);
+    deleteCookie({
+      cookieId,
+    });
+  };
   return (
     <>
       <Typography.Title heading={4} style={{ margin: '15px' }}>Cookie 管理</Typography.Title>
@@ -53,27 +60,34 @@ export default function CookieManager() {
               {cookies.map((cookie) => (
                 <List>
 
-                  <Popover
-                    key={cookie.id}
-                    title={cookie.friendly_name}
-                    content={(
-                      <Descriptions
-                        column={1}
-                        title="Cookie 详情"
-                        data={Object.entries(cookie).map((entry) => ({
-                          label: entry[0].toString(),
-                          value: entry[1].toString(),
-                        }))}
-                      />
-                                        )}
-                  >
-                    <List.Item key={cookie.id}>
-                      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <List.Item key={cookie.id}>
+                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+
+                      <Popover
+                        key={cookie.id}
+                        title={cookie.friendly_name}
+                        content={(
+                          <Descriptions
+                            column={1}
+                            title="Cookie 详情"
+                            data={Object.entries(cookie).map((entry) => ({
+                              label: entry[0].toString(),
+                              value: typeof (entry[1]) === 'object' ? JSON.stringify(entry[1]) : entry[1].toString(),
+                            }))}
+                          />
+                                                )}
+                      >
                         {cookie.friendly_name}
+                      </Popover>
+                      <Popconfirm
+                        title={`确定删除 Cookie ${cookie.friendly_name} ？`}
+                        onOk={handleDelCookie(cookie.id.toString())}
+                      >
+
                         <Button type="primary" status="danger">删除</Button>
-                      </div>
-                    </List.Item>
-                  </Popover>
+                      </Popconfirm>
+                    </div>
+                  </List.Item>
                 </List>
               ))}
             </Card>

admin-frontend/src/utils/type.ts

@@ -109,6 +109,5 @@ export interface NewCookieParam {
 }
 
 export interface DelCookieParam {
-  siteName: string
   cookieId: string
 }