✨ (admin) 支持查看cookie详情

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

@@ -2,13 +2,13 @@ import React, { useState } from 'react';
 import { Form, Input, Modal } from '@arco-design/web-react';
 import { useNewCookieMutation } from './cookieConfigSlice';
 
-interface CookieModalProps {
+interface CookieAddModalProps {
   visible: boolean;
   setVisible: (arg0: boolean) => void;
   siteName: string;
 }
 
-function CookieAddModal({ visible, setVisible, siteName }: CookieModalProps) {
+function CookieAddModal({ visible, setVisible, siteName }: CookieAddModalProps) {
   const FormItem = Form.Item;
   const [content, setContent] = useState<string>('');
   const [confirmLoading, setConfirmLoading] = useState(false);

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

@@ -1,28 +1,17 @@
 import React, { useState } from 'react';
 import { Form, Input, Modal } from '@arco-design/web-react';
 import { useNewCookieMutation } from './cookieConfigSlice';
+import { Cookie } from '../../utils/type';
 
-interface CookieModalProps {
+interface CookieEditModalProps {
   visible: boolean;
   setVisible: (arg0: boolean) => void;
-  siteName: string;
+  cookie: Cookie | null
 }
 
-function CookieEditModal({ visible, setVisible, siteName }: CookieModalProps) {
+function CookieEditModal({ visible, setVisible, cookie }: CookieEditModalProps) {
   const FormItem = Form.Item;
-  const [content, setContent] = useState<string>('');
   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
@@ -30,23 +19,41 @@ function CookieEditModal({ visible, setVisible, siteName }: CookieModalProps) {
       visible={visible}
       onCancel={() => setVisible(false)}
       confirmLoading={confirmLoading}
-      onOk={onSubmit}
+      // onOk={onSubmit}
-      style={{ maxWidth: '90vw' }}
+      style={{ maxWidth: '90vw', minWidth: '50vw' }}
     >
-
+      {cookie
+      && (
       <Form autoComplete="off">
-        <FormItem label="Site Name" required>
+        <FormItem label="Cookie ID">
-          <Input placeholder="Please enter site name" value={siteName} disabled />
+          <Input disabled value={cookie.id.toString()} />
         </FormItem>
-        <FormItem label="Content" required>
+        <FormItem label="Cookie 名称">
+          <Input value={cookie.friendly_name} disabled />
+        </FormItem>
+        <FormItem label="所属站点">
+          <Input value={cookie.site_name} disabled />
+        </FormItem>
+
+        <FormItem label="标签">
           <Input.TextArea
-            placeholder="Please enter content"
+            value={JSON.stringify(cookie.tags)}
-            value={content}
+            disabled
-            onChange={setContent}
           />
         </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>
+      )}
     </Modal>
   );
 }

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

@@ -12,6 +12,7 @@ import { selectPlatformConf, selectSiteConf } from '../globalConf/globalConfSlic
 import { Cookie, PlatformConfig } from '../../utils/type';
 import CookieTargetModal from '../cookieTargetManager/CookieTargetModal';
 import CookieAddModal from './CookieAddModal';
+import CookieEditModal from './CookieEditModal';
 
 export default function CookieManager() {
   const { siteName } = useParams();
@@ -21,9 +22,9 @@ export default function CookieManager() {
   const cookiesList = cookieDict ? Object.values(cookieDict) : [];
 
   // 添加cookie
-  const [showModal, setShowModal] = React.useState(false);
+  const [showAddModal, setShowAddModal] = React.useState(false);
   const handleAddCookie = () => () => {
-    setShowModal(true);
+    setShowAddModal(true);
   };
 
   // 删除cookie
@@ -34,6 +35,14 @@ export default function CookieManager() {
     });
   };
 
+  // 编辑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 = [
     {
       id: 3,
@@ -50,7 +59,6 @@ export default function CookieManager() {
   if (siteName) {
     data = cookiesList.filter((tSite) => tSite.site_name === siteName);
   }
-  console.log(Object.values(platformConf));
   const platformThatSiteSupport: Record<string, string> = Object.values(platformConf).reduce((p, c) => {
     p[c.siteName] = c.platformName;
     return p;
@@ -93,6 +101,7 @@ export default function CookieManager() {
               <Button type="text" status="danger">删除</Button>
             </span>
           </Popconfirm>
+          <Button type="text" onClick={handleEditCookie(record)}>编辑</Button>
         </Space>
       ),
 
@@ -116,7 +125,8 @@ export default function CookieManager() {
       </div>
 
       <Table columns={columns} data={data} />
-      <CookieAddModal visible={showModal} setVisible={setShowModal} siteName={siteName || ''} />
+      <CookieAddModal visible={showAddModal} setVisible={setShowAddModal} siteName={siteName || ''} />
+      <CookieEditModal visible={showEditModal} setVisible={setShowEditModal} cookie={editCookie} />
     </>
   );
 }