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

@@ -1,13 +0,0 @@
-.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

@@ -4,13 +4,11 @@ import {
   Card, Descriptions, Grid, List, Popconfirm, Popover, Typography,
 } from '@arco-design/web-react';
 import { Link } from 'react-router-dom';
-import { IconDelete, IconEdit } from '@arco-design/web-react/icon';
 import { selectSiteConf } from '../globalConf/globalConfSlice';
 import { useAppSelector } from '../../app/hooks';
 import { Cookie, SiteConfig } from '../../utils/type';
 import { useGetCookiesQuery, useDeleteCookieMutation } from './cookieConfigSlice';
 import CookieModal from './CookieModal';
-import './CookieManager.css';
 
 interface CookieSite {
   site: SiteConfig;
@@ -61,14 +59,9 @@ export default function CookieManager() {
             >
 
               {cookies.map((cookie) => (
-                <List
-                  bordered={false}
-                >
+                <List>
 
-                  <List.Item
-                    key={cookie.id}
-                    style={{ padding: '20px 0', borderBottom: '1px solid var(--color-fill-3)' }}
-                  >
+                  <List.Item key={cookie.id}>
                     <div style={{ display: 'flex', justifyContent: 'space-between' }}>
 
                       <Popover
@@ -89,20 +82,22 @@ export default function CookieManager() {
 
                       </Popover>
 
-                      <div style={{ display: 'flex' }}>
+                      <div>
 
                         <Link to={`/home/cookie/${cookie.id}`}>
-                          <span className="list-actions-icon">
-                            <IconEdit />
-                          </span>
+                          <Button
+                            type="primary"
+                            style={{ marginRight: '10px' }}
+                          >
+                            关联详情
+                          </Button>
                         </Link>
                         <Popconfirm
                           title={`确定删除 Cookie ${cookie.friendly_name} ？`}
                           onOk={handleDelCookie(cookie.id.toString())}
                         >
-                          <span className="list-actions-icon">
-                            <IconDelete />
-                          </span>
+
+                          <Button type="primary" status="danger">删除</Button>
                         </Popconfirm>
                       </div>
 

admin-frontend/src/features/cookieTargetManager/CookieTargetManager.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import {
-  Button, Space, Table, Typography,
+  Button, Empty, Space, Table, Typography,
 } from '@arco-design/web-react';
 import { useDeleteCookieTargetMutation, useGetCookieTargetsQuery } from '../cookieManager/cookieConfigSlice';
 import { CookieTarget } from '../../utils/type';
@@ -11,16 +11,15 @@ export default function () {
   const { cookieId } = useParams();
   const { data: cookieTargets } = useGetCookieTargetsQuery(cookieId);
 
+  console.log(cookieTargets);
   const [showModal, setShowModal] = useState(false);
   const [deleteCookieTarget] = useDeleteCookieTargetMutation();
   const handleAdd = () => {
-    console.log('before', showModal);
     setShowModal(true);
-    console.log('after', showModal);
   };
   const handleDelete = (record: CookieTarget) => () => {
     deleteCookieTarget({
-      cookieId: record.cookieId,
+      cookieId,
       target: record.target.target,
       platformName: record.target.platform_name,
     });
@@ -50,25 +49,31 @@ export default function () {
 
     },
   ];
-
-  return (
-    <>
-      <span>
-        <Typography.Title heading={3}>{`Cookie ${cookieId}`}</Typography.Title>
-      </span>
-      <Button style={{ width: '90px', margin: '20px 10px' }} type="primary" onClick={handleAdd}>添加</Button>
-      <Table
-        columns={columns}
-        data={cookieTargets}
-        rowKey={(record: CookieTarget) => `${record.target.platform_name}-${record.target.target}`}
-        scroll={{ x: true }}
-      />
-      <CookieTargetModal
-        key={cookieId}
-        visible={showModal}
-        setVisible={setShowModal}
-        cookieId={cookieId}
-      />
-    </>
-  );
+  if (cookieId) {
+    return (
+      <>
+        <span>
+          <Typography.Title heading={3}>{`Cookie ${cookieId}`}</Typography.Title>
+        </span>
+        <Button style={{ width: '90px', margin: '20px 10px' }} type="primary" onClick={handleAdd}>添加</Button>
+        <Table
+          columns={columns}
+          data={cookieTargets}
+          rowKey={(record: CookieTarget) => `${record.target.platform_name}-${record.target.target}`}
+          scroll={{ x: true }}
+        />
+        {
+          cookieTargets && cookieTargets.length > 0
+        && (
+        <CookieTargetModal
+          visible={showModal}
+          setVisible={setShowModal}
+          cookieId={cookieId}
+        />
+        )
+        }
+      </>
+    );
+  }
+  return <Empty />;
 }

admin-frontend/src/features/cookieTargetManager/CookieTargetModal.tsx

@@ -1,25 +1,22 @@
 import React
   from 'react';
 import { Modal, Select } from '@arco-design/web-react';
-import { SubscribeConfig, SubscribeGroupDetail } from '../../utils/type';
+import { SubscribeGroupDetail } from '../../utils/type';
 import { useNewCookieTargetMutation } from '../cookieManager/cookieConfigSlice';
 import { useGetSubsQuery } from '../subsribeConfigManager/subscribeConfigSlice';
 
 interface SubscribeModalProp {
-  cookieId: number;
   visible: boolean;
   setVisible: (arg0: boolean) => void;
+  cookieId: number;
 }
 
-export default function ({ cookieId, visible, setVisible }: SubscribeModalProp) {
+export default function ({ visible, setVisible, cookieId }: SubscribeModalProp) {
   const [newCookieTarget] = useNewCookieTargetMutation();
 
   const { data: subs } = useGetSubsQuery();
-  const pureSubs:SubscribeConfig[] = subs ? Object.values(subs)
-    .reduce((
-      pv:Array<SubscribeConfig>,
-      cv:SubscribeGroupDetail,
-    ) => pv.concat(cv.subscribes), []) : [];
+  const pureSubs = subs ? Object.values(subs)
+    .reduce((pv:Array, cv:SubscribeGroupDetail) => pv.concat(cv.subscribes), []) : [];
   const [index, setIndex] = React.useState(-1);
   const handleSubmit = (idx:number) => {
     const postPromise: ReturnType<typeof newCookieTarget> = newCookieTarget({
@@ -43,16 +40,18 @@ export default function ({ cookieId, visible, setVisible }: SubscribeModalProp)
         placeholder="选择要关联的 target"
         style={{ width: '100%' }}
         onChange={setIndex}
+
       >
-        {pureSubs.length
-          && pureSubs.map((sub, idx) => (
+        {
+          pureSubs.map((sub, idx) => (
             <Option
               key={JSON.stringify(sub)}
               value={idx}
             >
               {JSON.stringify(sub)}
             </Option>
-          ))}
+          ))
+        }
       </Select>
 
     </Modal>

admin-frontend/src/pages/Home.tsx

@@ -1,9 +1,8 @@
 import React, { ReactNode, useEffect, useState } from 'react';
 import { Breadcrumb, Layout, Menu } from '@arco-design/web-react';
-import {
-  IconRobot, IconDashboard, IconIdcard,
-} from '@arco-design/web-react/icon';
+import { IconRobot, IconDashboard, IconUser } from '@arco-design/web-react/icon';
 import './Home.css';
+// import SubscribeManager from '../features/subsribeConfigManager/SubscribeManager';
 import {
   Link, Navigate, Outlet, useLocation, useNavigate,
 } from 'react-router-dom';
@@ -96,7 +95,7 @@ export default function Home() {
       <Breadcrumb style={{ margin: '16px 0' }}>
         <Breadcrumb.Item>
           <Link to="/home/cookie">
-            <IconIdcard />
+            <IconUser />
             Cookie 管理
           </Link>
         </Breadcrumb.Item>
@@ -117,28 +116,25 @@ export default function Home() {
         >
           <Menu
             defaultSelectedKeys={[selectedTab]}
-            onClickMenuItem={(key) => {
-              handleTabSelect(key);
-            }}
+            onClickMenuItem={(key) => { handleTabSelect(key); }}
           >
             <Menu.Item key="groups">
               <IconRobot />
               订阅管理
             </Menu.Item>
-            <Menu.Item key="cookie">
-              <IconIdcard />
-              Cookie 管理
-            </Menu.Item>
             <Menu.Item key="weight">
               <IconDashboard />
               调度权重
             </Menu.Item>
-
+            <Menu.Item key="cookie">
+              <IconUser />
+              Cookie 管理
+            </Menu.Item>
           </Menu>
         </Layout.Sider>
         <Layout.Content style={{ padding: '0 1em' }}>
           <Layout style={{ height: '100%' }}>
-            {breadcrumbContent}
+            { breadcrumbContent }
             <Layout.Content style={{ margin: '0.5em', padding: '2em' }}>
               <Outlet />
             </Layout.Content>