✨ 添加 Cookie 界面

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

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { Form, Input, Modal } from '@arco-design/web-react';
+
+interface CookieModalProps {
+  visible: boolean;
+  setVisible: (arg0: boolean) => void;
+  siteName: string;
+}
+
+function CookieModal({ visible, setVisible, siteName }: CookieModalProps) {
+  const FormItem = Form.Item;
+  const [content, setContent] = useState<string>('');
+  // const [confirmLoading, setConfirmLoading] = useState(false);
+  const [confirmLoading] = useState(false);
+  return (
+    <Modal
+      title="添加 Cookie"
+      visible={visible}
+      onCancel={() => setVisible(false)}
+      confirmLoading={confirmLoading}
+      onOk={() => setVisible(false)}
+      style={{ maxWidth: '90vw' }}
+    >
+
+      <Form autoComplete="off">
+        <FormItem label="Site Name" required>
+          <Input placeholder="Please enter site name" value={siteName} disabled />
+        </FormItem>
+        <FormItem label="Content" required>
+          <Input.TextArea
+            placeholder="Please enter content"
+            value={content}
+            onChange={setContent}
+          />
+        </FormItem>
+
+      </Form>
+    </Modal>
+  );
+}
+
+export default CookieModal;

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

@@ -0,0 +1,35 @@
+import { createApi } from '@reduxjs/toolkit/query/react';
+import {
+  StatusResp, Cookie, NewCookieParam, DelCookieParam,
+} from '../../utils/type';
+import { baseQueryWithAuth } from '../auth/authQuery';
+
+export const cookieApi = createApi({
+  reducerPath: 'cookie',
+  baseQuery: baseQueryWithAuth,
+  tagTypes: ['Cookie'],
+  endpoints: (builder) => ({
+    getCookies: builder.query<Cookie, void>({
+      query: () => '/cookie',
+      providesTags: ['Cookie'],
+    }),
+    newCookie: builder.mutation<StatusResp, NewCookieParam>({
+      query: ({ siteName, content }) => ({
+        method: 'POST',
+        url: `/cookie?site_name=${siteName}&content=${content}`,
+      }),
+      invalidatesTags: ['Cookie'],
+    }),
+    deleteCookie: builder.mutation<StatusResp, DelCookieParam>({
+      query: ({ siteName, cookieId }) => ({
+        method: 'DELETE',
+        url: `/cookie/${cookieId}?site_name=${siteName}`,
+      }),
+      invalidatesTags: ['Cookie'],
+    }),
+  }),
+});
+
+export const {
+  useGetCookiesQuery, useNewCookieMutation, useDeleteCookieMutation,
+} = cookieApi;

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

@@ -1,5 +1,86 @@
-import React from 'react';
+import React, { useState } from 'react';
+import {
+  Button,
+  Card, Descriptions, Grid, List, 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 CookieModal from './CookieModal';
+
+interface CookieSite {
+    site: SiteConfig;
+    cookies: Cookie[];
+}
 
 export default function CookieManager() {
-  return <div>下个版本再写啦啦啦啦</div>;
+  const siteConf = useAppSelector(selectSiteConf);
+  const { data: cookieDict } = useGetCookiesQuery();
+  const cookiesList = cookieDict ? Object.values(cookieDict) : [];
+  const cookieSite = Object.values(siteConf).filter((site) => site.enable_cookie);
+  const cookieSiteList: CookieSite[] = cookieSite.map((site) => ({
+    site,
+    cookies: cookiesList.filter((cookie) => cookie.site_name === site.name),
+  }));
+  const [showModal, setShowModal] = useState(false);
+  const [siteName, setSiteName] = useState('');
+
+  const handleAddCookie = (newSiteName: string) => () => {
+    console.log(newSiteName);
+    setSiteName(newSiteName);
+    setShowModal(true);
+  };
+  return (
+    <>
+      <Typography.Title heading={4} style={{ margin: '15px' }}>Cookie 管理</Typography.Title>
+
+      <Grid.Row gutter={20}>
+        {cookieSiteList && cookieSiteList.map(({ cookies, site }) => (
+          <Grid.Col xs={24} sm={12} md={8} lg={6} key={site.name} style={{ margin: '1em 0' }}>
+            <Card
+              title={site.name}
+              extra={(
+                <Button
+                  type="primary"
+                  onClick={handleAddCookie(site.name)}
+                >
+                  添加
+                </Button>
+                            )}
+            >
+
+              {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' }}>
+                        {cookie.friendly_name}
+                        <Button type="primary" status="danger">删除</Button>
+                      </div>
+                    </List.Item>
+                  </Popover>
+                </List>
+              ))}
+            </Card>
+          </Grid.Col>
+        ))}
+      </Grid.Row>
+      <CookieModal visible={showModal} setVisible={setShowModal} siteName={siteName} />
+    </>
+  );
 }

admin-frontend/src/features/globalConf/globalConfSlice.ts

@@ -6,6 +6,7 @@ import { globalConfUrl } from '../../utils/urls';
 const initialState = {
   loaded: false,
   platformConf: {},
+  siteConf: {},
 } as GlobalConf;
 
 export const loadGlobalConf = createAsyncThunk(
@@ -24,6 +25,7 @@ export const globalConfSlice = createSlice({
     builder
       .addCase(loadGlobalConf.fulfilled, (state, payload) => {
         state.platformConf = payload.payload.platformConf;
+        state.siteConf = payload.payload.siteConf;
         state.loaded = true;
       });
   },
@@ -33,3 +35,4 @@ export default globalConfSlice.reducer;
 
 export const selectGlobalConfLoaded = (state: RootState) => state.globalConf.loaded;
 export const selectPlatformConf = (state: RootState) => state.globalConf.platformConf;
+export const selectSiteConf = (state: RootState) => state.globalConf.siteConf;