Merge 59d42531a3c0eb2a93d124b82bc8c14219f469ab into cf6b7fcd6dbc453af2cf5f2e98247afebd7b00d3

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

@@ -4,11 +4,13 @@ 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;
@@ -59,9 +61,14 @@ export default function CookieManager() {
             >
 
               {cookies.map((cookie) => (
-                <List>
+                <List
+                  bordered={false}
+                >
 
-                  <List.Item key={cookie.id}>
+                  <List.Item
+                    key={cookie.id}
+                    style={{ padding: '20px 0', borderBottom: '1px solid var(--color-fill-3)' }}
+                  >
                     <div style={{ display: 'flex', justifyContent: 'space-between' }}>
 
                       <Popover
@@ -82,22 +89,20 @@ export default function CookieManager() {
 
                       </Popover>
 
-                      <div>
+                      <div style={{ display: 'flex' }}>
 
                         <Link to={`/home/cookie/${cookie.id}`}>
-                          <Button
-                            type="primary"
-                            style={{ marginRight: '10px' }}
-                          >
-                            关联详情
-                          </Button>
+                          <span className="list-actions-icon">
+                            <IconEdit />
+                          </span>
                         </Link>
                         <Popconfirm
                           title={`确定删除 Cookie ${cookie.friendly_name} ？`}
                           onOk={handleDelCookie(cookie.id.toString())}
                         >
-
-                          <Button type="primary" status="danger">删除</Button>
+                          <span className="list-actions-icon">
+                            <IconDelete />
+                          </span>
                         </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, Empty, Space, Table, Typography,
+  Button, Space, Table, Typography,
 } from '@arco-design/web-react';
 import { useDeleteCookieTargetMutation, useGetCookieTargetsQuery } from '../cookieManager/cookieConfigSlice';
 import { CookieTarget } from '../../utils/type';
@@ -11,15 +11,16 @@ 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,
+      cookieId: record.cookieId,
       target: record.target.target,
       platformName: record.target.platform_name,
     });
@@ -49,7 +50,7 @@ export default function () {
 
     },
   ];
-  if (cookieId) {
+
   return (
     <>
       <span>
@@ -62,18 +63,12 @@ export default function () {
         rowKey={(record: CookieTarget) => `${record.target.platform_name}-${record.target.target}`}
         scroll={{ x: true }}
       />
-        {
-          cookieTargets && cookieTargets.length > 0
-        && (
       <CookieTargetModal
+        key={cookieId}
         visible={showModal}
         setVisible={setShowModal}
         cookieId={cookieId}
       />
-        )
-        }
     </>
   );
-  }
-  return <Empty />;
 }

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

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

admin-frontend/src/pages/Home.tsx

@@ -1,8 +1,9 @@
 import React, { ReactNode, useEffect, useState } from 'react';
 import { Breadcrumb, Layout, Menu } from '@arco-design/web-react';
-import { IconRobot, IconDashboard, IconUser } from '@arco-design/web-react/icon';
+import {
+  IconRobot, IconDashboard, IconIdcard,
+} 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';
@@ -95,7 +96,7 @@ export default function Home() {
       <Breadcrumb style={{ margin: '16px 0' }}>
         <Breadcrumb.Item>
           <Link to="/home/cookie">
-            <IconUser />
+            <IconIdcard />
             Cookie 管理
           </Link>
         </Breadcrumb.Item>
@@ -116,25 +117,28 @@ 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>