Merge remote-tracking branch 'origin/dev' into dev

2024-07-16 10:03:25 +08:00
parent 8086387c8e c83b9fa6b6
commit 89e6c9fd61
13 changed files with 1867 additions and 1237 deletions
--- a/package.json
+++ b/package.json
@@ -11,10 +11,14 @@
    "start": "npm run dev"
  },
  "dependencies": {
+    "@ant-design/charts": "^2.1.1",
    "@ant-design/icons": "^5.0.1",
-    "@ant-design/pro-components": "^2.4.4",
+    "@ant-design/pro-components": "^2.7.10",
    "@umijs/max": "^4.3.1",
    "antd": "^5.4.0",
+    "echarts": "^5.5.1",
+    "echarts-for-react": "^3.0.2",
+    "react-calendar-heatmap": "^1.9.0",
    "yarn": "^1.22.22"
  },
  "devDependencies": {
--- a/src/pages/Ali/index.tsx
+++ b/src/pages/Ali/index.tsx
@@ -109,21 +109,6 @@ const User: React.FC<unknown> = () => {
      dataIndex: 'endpoint',
      valueType: 'text',
    },
-    {
-      title: 'access_key_id',
-      dataIndex: 'AccessKey ID',
-      valueType: 'text',
-    },
-    {
-      title: 'access_key_secret',
-      dataIndex: 'AccessKey Secret',
-      valueType: 'text',
-    },
-    {
-      title: 'security_token',
-      dataIndex: 'security Token',
-      valueType: 'text',
-    },
    {
      title: 'Bucket名称',
      dataIndex: 'bucket_name',
@@ -139,15 +124,9 @@ const User: React.FC<unknown> = () => {
      dataIndex: 'user_agent',
      valueType: 'text',
    },
+
    {
-      title: '失败后最大重试次数',
-      dataIndex: 'max_error_retry',
-      default: '3',
-      tip: '请求失败后最大的重试次数。默认3次。',
-      valueType: 'text',
-    },
-    {
-      title: '注册时间',
+      title: '创建时间',
      dataIndex: 'create_time',
      valueType: 'dateTime',
    },
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,19 +1,319 @@
-import Guide from '@/components/Guide';
-import { trim } from '@/utils/format';
-import { PageContainer } from '@ant-design/pro-components';
-import { useModel } from '@umijs/max';
-import React from 'react';
-import styles from './index.less';
+/** @format */
+import { ProCard, ProList } from '@ant-design/pro-components';
+import { Avatar, Card, Skeleton, Space, Tag } from 'antd';
+import Meta from 'antd/es/card/Meta';
+import ReactECharts from 'echarts-for-react';
+import { FunctionComponent, useEffect, useState } from 'react';
+import styles from './index.module.less';

-const HomePage: React.FC = () => {
-  const { name } = useModel('global');
+import aliyun from '@/assets/icons/aliyun.svg';
+import eye from '@/assets/icons/eye-outline.svg';
+import share from '@/assets/icons/share.svg';
+import standard_directory from '@/assets/icons/standard_directory.svg';
+import userInfo from '@/assets/icons/userInfo.svg';
+// import * as echarts from "echarts/core";
+
+import 'react-calendar-heatmap/dist/styles.css';
+const defaultData = [
+  {
+    id: '1',
+    name: '管理员1',
+    content: '2024-07-01',
+    image: aliyun,
+    desc: 'IP:255.255.255',
+  },
+  {
+    id: '2',
+    name: '管理员2',
+    content: '2024-06-01',
+    image:
+      'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
+    desc: 'IP:255.255.255',
+  },
+  {
+    id: '3',
+    name: '管理员3',
+    content: '2024-05-01',
+    image:
+      'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
+    desc: 'IP:255.255.255',
+  },
+  {
+    id: '4',
+    name: '管理员4',
+    content: '2024-04-01',
+    image:
+      'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
+    desc: 'IP:255.255.255',
+  },
+];
+
+type DataItem = (typeof defaultData)[number];
+const MainHome: FunctionComponent = () => {
+  const [loading, setLoading] = useState(true);
+  const [dataSource, setDataSource] = useState<DataItem[]>(defaultData);
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {
+      color: ['#F58080', '#47D8BE', '#F9A589'],
+      data: ['活跃用户数量', '新增分享圈数量'],
+      left: 'center',
+      bottom: 'bottom',
+    },
+    grid: {
+      top: 'middle',
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      height: '80%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      data: [
+        '2024-02-01',
+        '2024-03-01',
+        '2024-04-01',
+        '2024-05-01',
+        '2024-06-01',
+        '2024-07-01',
+      ],
+      axisLine: {
+        lineStyle: {
+          color: '#999',
+        },
+      },
+    },
+    yAxis: {
+      type: 'value',
+
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          color: '#DDD',
+        },
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      nameTextStyle: {
+        color: '#999',
+      },
+      splitArea: {
+        show: false,
+      },
+    },
+    series: [
+      {
+        name: '活跃用户数量',
+        type: 'line',
+        data: [800, 900, 220, 130, 660, 289],
+        color: '#F58080',
+        lineStyle: {
+          width: 5,
+          color: {
+            type: 'linear',
+
+            colorStops: [
+              {
+                offset: 0,
+                color: '#FFCAD4', // 0% 处的颜色
+              },
+              {
+                offset: 0.4,
+                color: '#F58080', // 100% 处的颜色
+              },
+              {
+                offset: 1,
+                color: '#F58080', // 100% 处的颜色
+              },
+            ],
+            globalCoord: false, // 缺省为 false
+          },
+          shadowColor: 'rgba(245,128,128, 0.5)',
+          shadowBlur: 10,
+          shadowOffsetY: 7,
+        },
+        itemStyle: {
+          color: '#F58080',
+          borderWidth: 10,
+          /*shadowColor: 'rgba(72,216,191, 0.3)',
+           shadowBlur: 100,*/
+          borderColor: '#F58080',
+        },
+        smooth: true,
+      },
+      {
+        name: '新增分享圈数量',
+        type: 'line',
+        data: [123, 568, 111, 222, 123, 56],
+        lineStyle: {
+          width: 5,
+          color: {
+            type: 'linear',
+
+            colorStops: [
+              {
+                offset: 0,
+                color: '#AAF487', // 0% 处的颜色
+              },
+              {
+                offset: 0.4,
+                color: '#47D8BE', // 100% 处的颜色
+              },
+              {
+                offset: 1,
+                color: '#47D8BE', // 100% 处的颜色
+              },
+            ],
+            globalCoord: false, // 缺省为 false
+          },
+          shadowColor: 'rgba(71,216,190, 0.5)',
+          shadowBlur: 10,
+          shadowOffsetY: 7,
+        },
+        itemStyle: {
+          color: '#AAF487',
+          borderWidth: 10,
+          /*shadowColor: 'rgba(72,216,191, 0.3)',
+             shadowBlur: 100,*/
+          borderColor: '#AAF487',
+        },
+        smooth: true,
+      },
+    ],
+  };
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+  }, []);
  return (
-    <PageContainer ghost>
-      <div className={styles.container}>
-        <Guide name={trim(name)} />
+    <>
+      <div className={styles.home_content_main}>
+        <div className={styles.home_content_head}>
+          <div className={styles.home_content_head_left}>
+            <Card
+              style={{ width: '13.5vw', height: '21vh' }}
+              loading={false}
+              bordered
+              hoverable
+            >
+              <Skeleton loading={loading} active avatar>
+                <Meta
+                  avatar={<Avatar shape="square" size="large" src={userInfo} />}
+                  title="用户数量"
+                  description="This is the description"
+                />
+              </Skeleton>
+            </Card>
+            <Card
+              style={{ width: '13.5vw', height: '21vh' }}
+              loading={false}
+              bordered
+              hoverable
+            >
+              <Skeleton loading={loading} active avatar>
+                <Meta
+                  avatar={<Avatar shape="square" size="large" src={share} />}
+                  title="分享圈数量"
+                  description="This is the description"
+                />
+              </Skeleton>
+            </Card>
+            <Card
+              style={{ width: '13.5vw', height: '21vh' }}
+              loading={false}
+              bordered
+              hoverable
+            >
+              <Skeleton loading={loading} active avatar>
+                <Meta
+                  avatar={
+                    <Avatar
+                      shape="square"
+                      size="large"
+                      src={standard_directory}
+                    />
+                  }
+                  title="文件总数"
+                  description="This is the description"
+                />
+              </Skeleton>
+            </Card>
+            <Card
+              style={{ width: '13.5vw', height: '21vh' }}
+              loading={false}
+              bordered
+              hoverable
+            >
+              <Skeleton loading={loading} active avatar>
+                <Meta
+                  avatar={<Avatar shape="square" size="large" src={eye} />}
+                  title="浏览总量"
+                  description="This is the description"
+                />
+              </Skeleton>
+            </Card>
+          </div>
+          <div style={{ width: '55%' }}>
+            <ProCard bordered boxShadow>
+              <Skeleton loading={loading} active>
+                <ReactECharts option={option} />
+              </Skeleton>
+            </ProCard>
+          </div>
+        </div>
+        <div className={styles.home_content_list}>
+          <ProCard bordered boxShadow style={{ width: '49%' }}>
+            <ProList<DataItem>
+              rowKey="id"
+              headerTitle="管理员日志"
+              dataSource={dataSource}
+              showActions="hover"
+              editable={{
+                onSave: async (key, record, originRow) => {
+                  console.log(key, record, originRow);
+                  return true;
+                },
+              }}
+              onDataSourceChange={setDataSource}
+              metas={{
+                title: {
+                  dataIndex: 'name',
+                },
+                avatar: {
+                  dataIndex: 'image',
+                  editable: false,
+                },
+                content: {
+                  dataIndex: 'content',
+                },
+                description: {
+                  dataIndex: 'desc',
+                },
+                subTitle: {
+                  render: () => {
+                    return (
+                      <Space size={0}>
+                        <Tag color="blue">Ant Design</Tag>
+                        <Tag color="#5BD8A6">TechUI</Tag>
+                      </Space>
+                    );
+                  },
+                },
+              }}
+            />
+          </ProCard>
+        </div>
      </div>
-    </PageContainer>
+    </>
  );
 };
-
-export default HomePage;
+export default MainHome;
--- a/src/pages/Minio/index.tsx
+++ b/src/pages/Minio/index.tsx
@@ -130,17 +130,7 @@ const User: React.FC<unknown> = () => {
      valueType: 'text',
    },
    {
-      title: 'file_host',
-      dataIndex: 'file_host',
-      valueType: 'text',
-    },
-    {
-      title: 'download_host',
-      dataIndex: 'download_host',
-      valueType: 'text',
-    },
-    {
-      title: '注册时间',
+      title: '创建时间',
      dataIndex: 'create_time',
      valueType: 'dateTime',
    },
--- a/src/pages/Permission/index.tsx
+++ b/src/pages/Permission/index.tsx
@@ -127,7 +127,7 @@ const User: React.FC<unknown> = () => {
      valueType: 'text',
    },
    {
-      title: '注册时间',
+      title: '创建时间',
      dataIndex: 'create_time',
      valueType: 'dateTime',
    },
--- a/src/pages/Qiniu/index.tsx
+++ b/src/pages/Qiniu/index.tsx
@@ -130,26 +130,7 @@ const User: React.FC<unknown> = () => {
      valueType: 'text',
    },
    {
-      title: '使用的Region',
-      dataIndex: 'region',
-      valueType: 'text',
-    },
-    {
-      title: '是否使用https',
-      tip: '空间相关上传管理操作是否使用 https , 默认 是',
-      default: '1',
-      dataIndex: 'use_https_domains',
-      valueType: 'text',
-    },
-    {
-      title: '是否使用代理加速上传',
-      tip: '空间相关上传管理操作是否使用代理加速上传，默认 是',
-      default: '1',
-      dataIndex: 'acc_up_host_first',
-      valueType: 'text',
-    },
-    {
-      title: '注册时间',
+      title: '创建时间',
      dataIndex: 'create_time',
      valueType: 'dateTime',
    },
--- a/src/pages/Role/index.tsx
+++ b/src/pages/Role/index.tsx
@@ -119,7 +119,7 @@ const User: React.FC<unknown> = () => {
      },
    },
    {
-      title: '注册时间',
+      title: '创建时间',
      dataIndex: 'create_time',
      valueType: 'dateTime',
    },
--- a/src/pages/Sftp/index.tsx
+++ b/src/pages/Sftp/index.tsx
@@ -136,22 +136,7 @@ const User: React.FC<unknown> = () => {
      valueType: 'text',
    },
    {
-      title: '连接超时时长，单位毫秒',
-      dataIndex: 'connection_timeout',
-      valueType: 'text',
-    },
-    {
-      title: 'Socket连接超时时长，单位毫秒',
-      dataIndex: 'so_timeout',
-      valueType: 'text',
-    },
-    {
-      title: '设置服务器语言',
-      dataIndex: 'server_language_code',
-      valueType: 'text',
-    },
-    {
-      title: '注册时间',
+      title: '创建时间',
      dataIndex: 'create_time',
      valueType: 'dateTime',
    },
--- a/src/pages/Tencent/index.tsx
+++ b/src/pages/Tencent/index.tsx
@@ -132,28 +132,7 @@ const User: React.FC<unknown> = () => {
      valueType: 'text',
    },
    {
-      title: '使用的Region',
-      dataIndex: 'region',
-      valueType: 'text',
-    },
-    {
-      title: '域名后缀',
-      dataIndex: 'end_point_suffix',
-      valueType: 'text',
-    },
-    {
-      title: 'http proxy代理',
-      tip: 'http proxy代理，如果使用http proxy代理，需要设置IP与端口',
-      dataIndex: 'http_proxy_Ip',
-      valueType: 'text',
-    },
-    {
-      title: '代理服务器端口',
-      dataIndex: 'http_proxy_port',
-      valueType: 'text',
-    },
-    {
-      title: '注册时间',
+      title: '创建时间',
      dataIndex: 'create_time',
      valueType: 'dateTime',
    },
--- a/src/pages/Up/index.tsx
+++ b/src/pages/Up/index.tsx
@@ -129,28 +129,8 @@ const User: React.FC<unknown> = () => {
      dataIndex: 'base_path',
      valueType: 'text',
    },
-
    {
-      title: '分片大小',
-      default: '5',
-      dataIndex: 'part_size',
-      valueType: 'text',
-    },
-    {
-      title: '超时时间',
-      tip: '默认的超时时间：30秒',
-      default: '30',
-      dataIndex: 'timeout',
-      valueType: 'text',
-    },
-    {
-      title: '接入点',
-      tip: '默认为自动识别接入点',
-      dataIndex: 'api_domain',
-      valueType: 'text',
-    },
-    {
-      title: '注册时间',
+      title: '创建时间',
      dataIndex: 'create_time',
      valueType: 'dateTime',
    },
--- a/src/pages/Users/components/UpdateForm.tsx
+++ b/src/pages/Users/components/UpdateForm.tsx
@@ -1,26 +1,138 @@
+import {
+  ProFormDateTimePicker,
+  ProFormRadio,
+  ProFormSelect,
+  ProFormText,
+  ProFormTextArea,
+  StepsForm,
+} from '@ant-design/pro-components';
 import { Modal } from 'antd';
-import React, { PropsWithChildren } from 'react';
+import React from 'react';

-interface CreateFormProps {
-  modalVisible: boolean;
-  onCancel: () => void;
+export interface FormValueType extends Partial<API.UserInfo> {
+  target?: string;
+  template?: string;
+  type?: string;
+  time?: string;
+  frequency?: string;
 }

-const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
-  const { modalVisible, onCancel } = props;
+export interface UpdateFormProps {
+  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
+  onSubmit: (values: FormValueType) => Promise<void>;
+  updateModalVisible: boolean;
+  values: Partial<API.UserInfo>;
+}

-  return (
-    <Modal
-      destroyOnClose
-      title="新建"
-      width={420}
-      open={modalVisible}
-      onCancel={() => onCancel()}
-      footer={null}
+const UpdateForm: React.FC<UpdateFormProps> = (props) => (
+  <StepsForm
+    stepsProps={{
+      size: 'small',
+    }}
+    stepsFormRender={(dom, submitter) => {
+      return (
+        <Modal
+          width={640}
+          bodyStyle={{ padding: '32px 40px 48px' }}
+          destroyOnClose
+          title="规则配置"
+          open={props.updateModalVisible}
+          footer={submitter}
+          onCancel={() => props.onCancel()}
+        >
+          {dom}
+        </Modal>
+      );
+    }}
+    onFinish={props.onSubmit}
+  >
+    <StepsForm.StepForm
+      initialValues={{
+        name: props.values.name,
+        nickName: props.values.nickName,
+      }}
+      title="基本信息"
    >
-      {props.children}
-    </Modal>
-  );
-};
+      <ProFormText
+        width="md"
+        name="name"
+        label="规则名称"
+        rules={[{ required: true, message: '请输入规则名称！' }]}
+      />
+      <ProFormTextArea
+        name="desc"
+        width="md"
+        label="规则描述"
+        placeholder="请输入至少五个字符"
+        rules={[
+          { required: true, message: '请输入至少五个字符的规则描述！', min: 5 },
+        ]}
+      />
+    </StepsForm.StepForm>
+    <StepsForm.StepForm
+      initialValues={{
+        target: '0',
+        template: '0',
+      }}
+      title="配置规则属性"
+    >
+      <ProFormSelect
+        width="md"
+        name="target"
+        label="监控对象"
+        valueEnum={{
+          0: '表一',
+          1: '表二',
+        }}
+      />
+      <ProFormSelect
+        width="md"
+        name="template"
+        label="规则模板"
+        valueEnum={{
+          0: '规则模板一',
+          1: '规则模板二',
+        }}
+      />
+      <ProFormRadio.Group
+        name="type"
+        width="md"
+        label="规则类型"
+        options={[
+          {
+            value: '0',
+            label: '强',
+          },
+          {
+            value: '1',
+            label: '弱',
+          },
+        ]}
+      />
+    </StepsForm.StepForm>
+    <StepsForm.StepForm
+      initialValues={{
+        type: '1',
+        frequency: 'month',
+      }}
+      title="设定调度周期"
+    >
+      <ProFormDateTimePicker
+        name="time"
+        label="开始时间"
+        rules={[{ required: true, message: '请选择开始时间！' }]}
+      />
+      <ProFormSelect
+        name="frequency"
+        label="监控对象"
+        width="xs"
+        valueEnum={{
+          month: '月',
+          week: '周',
+        }}
+      />
+    </StepsForm.StepForm>
+  </StepsForm>
+);

-export default CreateForm;
+export default UpdateForm;
--- a/src/pages/Users/index.tsx
+++ b/src/pages/Users/index.tsx
@@ -10,7 +10,7 @@ import {
 import { Button, Divider, Drawer, message } from 'antd';
 import React, { useRef, useState } from 'react';
 import CreateForm from './components/CreateForm';
-//import UpdateForm, { FormValueType } from './components/UpdateForm';
+import UpdateForm, { FormValueType } from './components/UpdateForm';

 const { addUser, queryUserList, deleteUser, modifyUser } =
  services.UserController;
--- a/yarn.lock
+++ b/yarn.lock