feat: 添加存储商配置表单框架
This commit is contained in:
landaiqing
10
src/App.tsx
10
src/App.tsx
@@ -1,10 +0,0 @@
|
|||||||
/** @format */
|
|
||||||
|
|
||||||
import routes from "@/router/routes.ts";
|
|
||||||
import { RouterGuard } from "@/router/guard.ts";
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
return <div className="App">{RouterGuard(routes)}</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
@@ -1,8 +1,224 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
|
import React, { useRef, useState } from "react";
|
||||||
|
|
||||||
|
type AliOssConfigItem = {
|
||||||
|
id: number;
|
||||||
|
userId: number;
|
||||||
|
endpoint: string;
|
||||||
|
accessKeyId: string;
|
||||||
|
accessKeySecret: string;
|
||||||
|
createdTime: string;
|
||||||
|
updatedTime: string;
|
||||||
|
status: string;
|
||||||
|
};
|
||||||
|
const data: AliOssConfigItem[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
userId: 1,
|
||||||
|
endpoint: "https://oss.aliyuncs.com",
|
||||||
|
accessKeyId: "LTAI5tG3",
|
||||||
|
accessKeySecret: "G3",
|
||||||
|
createdTime: "2024-06-28 10:51:59",
|
||||||
|
updatedTime: "2024-06-29 10:51:59",
|
||||||
|
status: "正常",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const columns: ProColumns<AliOssConfigItem>[] = [
|
||||||
|
{
|
||||||
|
dataIndex: "index",
|
||||||
|
valueType: "indexBorder",
|
||||||
|
width: 48,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ID",
|
||||||
|
dataIndex: "id",
|
||||||
|
copyable: true,
|
||||||
|
ellipsis: true,
|
||||||
|
tooltip: "Id",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "服务地址",
|
||||||
|
dataIndex: "endpoint",
|
||||||
|
tooltip: "endpoint",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥ID",
|
||||||
|
dataIndex: "accessKeyId",
|
||||||
|
tooltip: "access key id",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥值",
|
||||||
|
dataIndex: "accessKeySecret",
|
||||||
|
tooltip: "access key secret",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "状态",
|
||||||
|
dataIndex: "status",
|
||||||
|
search: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "创建时间",
|
||||||
|
dataIndex: "createdTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "更新时间",
|
||||||
|
dataIndex: "updatedTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
valueType: "option",
|
||||||
|
key: "option",
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-expect-error
|
||||||
|
render: (text, record, _, action) => [
|
||||||
|
<a
|
||||||
|
key="editable"
|
||||||
|
onClick={() => {
|
||||||
|
action?.startEditable?.(record.id);
|
||||||
|
}}>
|
||||||
|
编辑
|
||||||
|
</a>,
|
||||||
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
|
查看
|
||||||
|
</a>,
|
||||||
|
<TableDropdown
|
||||||
|
key="actionGroup"
|
||||||
|
onSelect={() => action?.reload()}
|
||||||
|
menus={[
|
||||||
|
{ key: "copy", name: "复制" },
|
||||||
|
{ key: "delete", name: "删除" },
|
||||||
|
]}
|
||||||
|
/>,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
const AliSettings: React.FC = () => {
|
const AliSettings: React.FC = () => {
|
||||||
return <>阿里云OSs设置</>;
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const showDrawer = () => {
|
||||||
|
setOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClose = () => {
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
const AddAliOssConfigDrawer = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Drawer
|
||||||
|
title="创建连接配置"
|
||||||
|
width={720}
|
||||||
|
onClose={onClose}
|
||||||
|
open={open}
|
||||||
|
styles={{
|
||||||
|
body: {
|
||||||
|
paddingBottom: 80,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
extra={
|
||||||
|
<Space>
|
||||||
|
<Button onClick={onClose}>取消</Button>
|
||||||
|
<Button onClick={onClose} type="primary">
|
||||||
|
提交
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
}>
|
||||||
|
<Form layout="vertical">
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="endpoint"
|
||||||
|
label="服务地址"
|
||||||
|
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
||||||
|
<Input placeholder="请输入服务地址！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="accessKeyId"
|
||||||
|
label="密钥ID"
|
||||||
|
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
||||||
|
<Input placeholder="请输入密钥ID！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="accessKeySecret"
|
||||||
|
label="密钥值"
|
||||||
|
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
||||||
|
<Input placeholder="请输入密钥值！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</Drawer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ProTable<AliOssConfigItem>
|
||||||
|
columns={columns}
|
||||||
|
dataSource={data}
|
||||||
|
actionRef={actionRef}
|
||||||
|
cardBordered={true}
|
||||||
|
editable={{
|
||||||
|
type: "multiple",
|
||||||
|
}}
|
||||||
|
columnsState={{
|
||||||
|
persistenceKey: "pro-table-singe-demos",
|
||||||
|
persistenceType: "localStorage",
|
||||||
|
defaultValue: {
|
||||||
|
option: { fixed: "right", disable: true },
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
search={false}
|
||||||
|
options={{
|
||||||
|
setting: {
|
||||||
|
listsHeight: 400,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
pagination={{
|
||||||
|
pageSize: 5,
|
||||||
|
}}
|
||||||
|
dateFormatter="string"
|
||||||
|
headerTitle="阿里云OSS配置"
|
||||||
|
bordered={false}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="button"
|
||||||
|
icon={<PlusOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
showDrawer();
|
||||||
|
}}
|
||||||
|
type="primary">
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<AddAliOssConfigDrawer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AliSettings;
|
export default AliSettings;
|
||||||
|
|||||||
@@ -1,8 +1,261 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
|
import React, { useRef, useState } from "react";
|
||||||
|
|
||||||
|
type AliOssConfigItem = {
|
||||||
|
id: number;
|
||||||
|
userId: number;
|
||||||
|
bucketName: string;
|
||||||
|
accessKeyId: string;
|
||||||
|
secretAccessKey: string;
|
||||||
|
region: string;
|
||||||
|
mode: string;
|
||||||
|
createdTime: string;
|
||||||
|
updatedTime: string;
|
||||||
|
status: string;
|
||||||
|
};
|
||||||
|
const data: AliOssConfigItem[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
userId: 1,
|
||||||
|
bucketName: "https://oss.aliyuncs.com",
|
||||||
|
accessKeyId: "LTAI5tG3",
|
||||||
|
secretAccessKey: "G3",
|
||||||
|
region: "2024-06-28 10:51:59",
|
||||||
|
mode: "2024-06-29 10:51:59",
|
||||||
|
createdTime: "2024-06-28 10:51:59",
|
||||||
|
updatedTime: "2024-06-29 10:51:59",
|
||||||
|
status: "正常",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const columns: ProColumns<AliOssConfigItem>[] = [
|
||||||
|
{
|
||||||
|
dataIndex: "index",
|
||||||
|
valueType: "indexBorder",
|
||||||
|
width: 48,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ID",
|
||||||
|
dataIndex: "id",
|
||||||
|
copyable: true,
|
||||||
|
ellipsis: true,
|
||||||
|
tooltip: "Id",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "存储桶",
|
||||||
|
dataIndex: "bucketName",
|
||||||
|
tooltip: "bucket",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥ID",
|
||||||
|
dataIndex: "accessKeyId",
|
||||||
|
tooltip: "access key id",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥值",
|
||||||
|
dataIndex: "secretAccessKey",
|
||||||
|
tooltip: "secret access key",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "地区",
|
||||||
|
dataIndex: "region",
|
||||||
|
tooltip: "region",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "模式",
|
||||||
|
dataIndex: "mode",
|
||||||
|
tooltip: "mode",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "状态",
|
||||||
|
dataIndex: "status",
|
||||||
|
search: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "创建时间",
|
||||||
|
dataIndex: "createdTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "更新时间",
|
||||||
|
dataIndex: "updatedTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
valueType: "option",
|
||||||
|
key: "option",
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-expect-error
|
||||||
|
render: (text, record, _, action) => [
|
||||||
|
<a
|
||||||
|
key="editable"
|
||||||
|
onClick={() => {
|
||||||
|
action?.startEditable?.(record.id);
|
||||||
|
}}>
|
||||||
|
编辑
|
||||||
|
</a>,
|
||||||
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
|
查看
|
||||||
|
</a>,
|
||||||
|
<TableDropdown
|
||||||
|
key="actionGroup"
|
||||||
|
onSelect={() => action?.reload()}
|
||||||
|
menus={[
|
||||||
|
{ key: "copy", name: "复制" },
|
||||||
|
{ key: "delete", name: "删除" },
|
||||||
|
]}
|
||||||
|
/>,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
const AwsSettings: React.FC = () => {
|
const AwsSettings: React.FC = () => {
|
||||||
return <>AWS设置</>;
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const showDrawer = () => {
|
||||||
|
setOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClose = () => {
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
const AddAwsOssConfigDrawer = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Drawer
|
||||||
|
title="创建连接配置"
|
||||||
|
width={720}
|
||||||
|
onClose={onClose}
|
||||||
|
open={open}
|
||||||
|
styles={{
|
||||||
|
body: {
|
||||||
|
paddingBottom: 80,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
extra={
|
||||||
|
<Space>
|
||||||
|
<Button onClick={onClose}>取消</Button>
|
||||||
|
<Button onClick={onClose} type="primary">
|
||||||
|
提交
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
}>
|
||||||
|
<Form layout="vertical">
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="bucketName"
|
||||||
|
label="存储桶"
|
||||||
|
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
||||||
|
<Input placeholder="请输入存储桶！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="region"
|
||||||
|
label="地区"
|
||||||
|
rules={[{ required: true, message: "请输入地区！" }]}>
|
||||||
|
<Input placeholder="请输入地区！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="accessKeyId"
|
||||||
|
label="密钥ID"
|
||||||
|
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
||||||
|
<Input placeholder="请输入密钥ID！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="secretAccessKey"
|
||||||
|
label="密钥值"
|
||||||
|
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
||||||
|
<Input placeholder="请输入密钥值！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="mode"
|
||||||
|
label="模式"
|
||||||
|
rules={[{ required: true, message: "请输入模式!" }]}>
|
||||||
|
<Input placeholder="请输入模式！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</Drawer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ProTable<AliOssConfigItem>
|
||||||
|
columns={columns}
|
||||||
|
dataSource={data}
|
||||||
|
actionRef={actionRef}
|
||||||
|
cardBordered={true}
|
||||||
|
editable={{
|
||||||
|
type: "multiple",
|
||||||
|
}}
|
||||||
|
columnsState={{
|
||||||
|
persistenceKey: "pro-table-singe-demos",
|
||||||
|
persistenceType: "localStorage",
|
||||||
|
defaultValue: {
|
||||||
|
option: { fixed: "right", disable: true },
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
search={false}
|
||||||
|
options={{
|
||||||
|
setting: {
|
||||||
|
listsHeight: 400,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
pagination={{
|
||||||
|
pageSize: 5,
|
||||||
|
}}
|
||||||
|
dateFormatter="string"
|
||||||
|
headerTitle="亚马逊S3配置"
|
||||||
|
bordered={false}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="button"
|
||||||
|
icon={<PlusOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
showDrawer();
|
||||||
|
}}
|
||||||
|
type="primary">
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<AddAwsOssConfigDrawer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AwsSettings;
|
export default AwsSettings;
|
||||||
|
|||||||
@@ -1,8 +1,290 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
|
import { Button, Col, DatePicker, Drawer, Form, Input, Row, Select, Space } from "antd";
|
||||||
|
import React, { useRef, useState } from "react";
|
||||||
|
|
||||||
|
type AliOssConfigItem = {
|
||||||
|
id: number;
|
||||||
|
userId: number;
|
||||||
|
endpoint: string;
|
||||||
|
accessKeyId: string;
|
||||||
|
accessKeySecret: string;
|
||||||
|
created_time: string;
|
||||||
|
updated_time: string;
|
||||||
|
status: string;
|
||||||
|
};
|
||||||
|
const data: AliOssConfigItem[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
userId: 1,
|
||||||
|
endpoint: "https://oss.aliyuncs.com",
|
||||||
|
accessKeyId: "LTAI5tG3",
|
||||||
|
accessKeySecret: "G3",
|
||||||
|
created_time: "2022-01-01",
|
||||||
|
updated_time: "2022-01-01",
|
||||||
|
status: "正常",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const columns: ProColumns<AliOssConfigItem>[] = [
|
||||||
|
{
|
||||||
|
dataIndex: "index",
|
||||||
|
valueType: "indexBorder",
|
||||||
|
width: 48,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ID",
|
||||||
|
dataIndex: "id",
|
||||||
|
copyable: true,
|
||||||
|
ellipsis: true,
|
||||||
|
tooltip: "Id",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "服务地址",
|
||||||
|
dataIndex: "endpoint",
|
||||||
|
tooltip: "endpoint",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥ID",
|
||||||
|
dataIndex: "accessKeyId",
|
||||||
|
tooltip: "access key id",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥值",
|
||||||
|
dataIndex: "accessKeySecret",
|
||||||
|
tooltip: "access key secret",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "状态",
|
||||||
|
dataIndex: "status",
|
||||||
|
search: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "创建时间",
|
||||||
|
dataIndex: "createdTime",
|
||||||
|
valueType: "date",
|
||||||
|
sorter: true,
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "更新时间",
|
||||||
|
dataIndex: "updateTime",
|
||||||
|
valueType: "date",
|
||||||
|
sorter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
valueType: "option",
|
||||||
|
key: "option",
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-expect-error
|
||||||
|
render: (text, record, _, action) => [
|
||||||
|
<a
|
||||||
|
key="editable"
|
||||||
|
onClick={() => {
|
||||||
|
action?.startEditable?.(record.id);
|
||||||
|
}}>
|
||||||
|
编辑
|
||||||
|
</a>,
|
||||||
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
|
查看
|
||||||
|
</a>,
|
||||||
|
<TableDropdown
|
||||||
|
key="actionGroup"
|
||||||
|
onSelect={() => action?.reload()}
|
||||||
|
menus={[
|
||||||
|
{ key: "copy", name: "复制" },
|
||||||
|
{ key: "delete", name: "删除" },
|
||||||
|
]}
|
||||||
|
/>,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
const BaiduSettings: React.FC = () => {
|
const BaiduSettings: React.FC = () => {
|
||||||
return <>百度OBS设置</>;
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const showDrawer = () => {
|
||||||
|
setOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClose = () => {
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
const AddBaiduOssConfigDrawer = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Drawer
|
||||||
|
title="Create a new account"
|
||||||
|
width={720}
|
||||||
|
onClose={onClose}
|
||||||
|
open={open}
|
||||||
|
styles={{
|
||||||
|
body: {
|
||||||
|
paddingBottom: 80,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
extra={
|
||||||
|
<Space>
|
||||||
|
<Button onClick={onClose}>Cancel</Button>
|
||||||
|
<Button onClick={onClose} type="primary">
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
}>
|
||||||
|
<Form layout="vertical" hideRequiredMark>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="name"
|
||||||
|
label="Name"
|
||||||
|
rules={[{ required: true, message: "Please enter user name" }]}>
|
||||||
|
<Input placeholder="Please enter user name" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="url"
|
||||||
|
label="Url"
|
||||||
|
rules={[{ required: true, message: "Please enter url" }]}>
|
||||||
|
<Input
|
||||||
|
style={{ width: "100%" }}
|
||||||
|
addonBefore="http://"
|
||||||
|
addonAfter=".com"
|
||||||
|
placeholder="Please enter url"
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="owner"
|
||||||
|
label="Owner"
|
||||||
|
rules={[{ required: true, message: "Please select an owner" }]}>
|
||||||
|
<Select placeholder="Please select an owner">
|
||||||
|
<Select.Option value="xiao">Xiaoxiao Fu</Select.Option>
|
||||||
|
<Select.Option value="mao">Maomao Zhou</Select.Option>
|
||||||
|
</Select>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="type"
|
||||||
|
label="Type"
|
||||||
|
rules={[{ required: true, message: "Please choose the type" }]}>
|
||||||
|
<Select placeholder="Please choose the type">
|
||||||
|
<Select.Option value="private">Private</Select.Option>
|
||||||
|
<Select.Option value="public">Public</Select.Option>
|
||||||
|
</Select>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="approver"
|
||||||
|
label="Approver"
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: "Please choose the approver" },
|
||||||
|
]}>
|
||||||
|
<Select placeholder="Please choose the approver">
|
||||||
|
<Select.Option value="jack">Jack Ma</Select.Option>
|
||||||
|
<Select.Option value="tom">Tom Liu</Select.Option>
|
||||||
|
</Select>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="dateTime"
|
||||||
|
label="DateTime"
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: "Please choose the dateTime" },
|
||||||
|
]}>
|
||||||
|
<DatePicker.RangePicker
|
||||||
|
style={{ width: "100%" }}
|
||||||
|
getPopupContainer={(trigger) => trigger.parentElement!}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={24}>
|
||||||
|
<Form.Item
|
||||||
|
name="description"
|
||||||
|
label="Description"
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "please enter url description",
|
||||||
|
},
|
||||||
|
]}>
|
||||||
|
<Input.TextArea
|
||||||
|
rows={4}
|
||||||
|
placeholder="please enter url description"
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</Drawer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ProTable<AliOssConfigItem>
|
||||||
|
columns={columns}
|
||||||
|
dataSource={data}
|
||||||
|
actionRef={actionRef}
|
||||||
|
cardBordered={true}
|
||||||
|
editable={{
|
||||||
|
type: "multiple",
|
||||||
|
}}
|
||||||
|
columnsState={{
|
||||||
|
persistenceKey: "pro-table-singe-demos",
|
||||||
|
persistenceType: "localStorage",
|
||||||
|
defaultValue: {
|
||||||
|
option: { fixed: "right", disable: true },
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
search={false}
|
||||||
|
options={{
|
||||||
|
setting: {
|
||||||
|
listsHeight: 400,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
pagination={{
|
||||||
|
pageSize: 5,
|
||||||
|
}}
|
||||||
|
dateFormatter="string"
|
||||||
|
headerTitle="百度云BOS配置"
|
||||||
|
bordered={false}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="button"
|
||||||
|
icon={<PlusOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
showDrawer();
|
||||||
|
}}
|
||||||
|
type="primary">
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<AddBaiduOssConfigDrawer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default BaiduSettings;
|
export default BaiduSettings;
|
||||||
|
|||||||
@@ -1,8 +1,242 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
|
import React, { useRef, useState } from "react";
|
||||||
|
|
||||||
import React from "react";
|
type AliOssConfigItem = {
|
||||||
const HuaweiSettings: React.FC = () => {
|
id: number;
|
||||||
return <>华为COS设置</>;
|
userId: number;
|
||||||
|
bucketName: string;
|
||||||
|
endpoint: string;
|
||||||
|
accessKey: string;
|
||||||
|
secretKey: string;
|
||||||
|
createdTime: string;
|
||||||
|
updatedTime: string;
|
||||||
|
status: string;
|
||||||
|
};
|
||||||
|
const data: AliOssConfigItem[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
userId: 1,
|
||||||
|
bucketName: "666",
|
||||||
|
endpoint: "https://oss.aliyuncs.com",
|
||||||
|
accessKey: "LTAI5tG3",
|
||||||
|
secretKey: "G3",
|
||||||
|
createdTime: "2022-01-01",
|
||||||
|
updatedTime: "2022-01-01",
|
||||||
|
status: "正常",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const columns: ProColumns<AliOssConfigItem>[] = [
|
||||||
|
{
|
||||||
|
dataIndex: "index",
|
||||||
|
valueType: "indexBorder",
|
||||||
|
width: 48,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ID",
|
||||||
|
dataIndex: "id",
|
||||||
|
copyable: true,
|
||||||
|
ellipsis: true,
|
||||||
|
tooltip: "Id",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "存储桶",
|
||||||
|
dataIndex: "bucketName",
|
||||||
|
tooltip: "bucketName",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "服务地址",
|
||||||
|
dataIndex: "endpoint",
|
||||||
|
tooltip: "endpoint",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥ID",
|
||||||
|
dataIndex: "accessKey",
|
||||||
|
tooltip: "access key",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥值",
|
||||||
|
dataIndex: "secretKey",
|
||||||
|
tooltip: "secret key",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "状态",
|
||||||
|
dataIndex: "status",
|
||||||
|
search: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "创建时间",
|
||||||
|
dataIndex: "createdTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "更新时间",
|
||||||
|
dataIndex: "updatedTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
valueType: "option",
|
||||||
|
key: "option",
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-expect-error
|
||||||
|
render: (text, record, _, action) => [
|
||||||
|
<a
|
||||||
|
key="editable"
|
||||||
|
onClick={() => {
|
||||||
|
action?.startEditable?.(record.id);
|
||||||
|
}}>
|
||||||
|
编辑
|
||||||
|
</a>,
|
||||||
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
|
查看
|
||||||
|
</a>,
|
||||||
|
<TableDropdown
|
||||||
|
key="actionGroup"
|
||||||
|
onSelect={() => action?.reload()}
|
||||||
|
menus={[
|
||||||
|
{ key: "copy", name: "复制" },
|
||||||
|
{ key: "delete", name: "删除" },
|
||||||
|
]}
|
||||||
|
/>,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const HuawaiSettings: React.FC = () => {
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const showDrawer = () => {
|
||||||
|
setOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClose = () => {
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
const AddHuaweiOssConfigDrawer = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Drawer
|
||||||
|
title="创建连接配置"
|
||||||
|
width={720}
|
||||||
|
onClose={onClose}
|
||||||
|
open={open}
|
||||||
|
styles={{
|
||||||
|
body: {
|
||||||
|
paddingBottom: 80,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
extra={
|
||||||
|
<Space>
|
||||||
|
<Button onClick={onClose}>取消</Button>
|
||||||
|
<Button onClick={onClose} type="primary">
|
||||||
|
提交
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
}>
|
||||||
|
<Form layout="vertical">
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="endpoint"
|
||||||
|
label="服务地址"
|
||||||
|
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
||||||
|
<Input placeholder="请输入服务地址！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="bucketName"
|
||||||
|
label="存储桶"
|
||||||
|
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
||||||
|
<Input placeholder="请输入存储桶！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="accessKeyId"
|
||||||
|
label="密钥ID"
|
||||||
|
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
||||||
|
<Input placeholder="请输入密钥ID！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="accessKeySecret"
|
||||||
|
label="密钥值"
|
||||||
|
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
||||||
|
<Input placeholder="请输入密钥值！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</Drawer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ProTable<AliOssConfigItem>
|
||||||
|
columns={columns}
|
||||||
|
dataSource={data}
|
||||||
|
actionRef={actionRef}
|
||||||
|
cardBordered={true}
|
||||||
|
editable={{
|
||||||
|
type: "multiple",
|
||||||
|
}}
|
||||||
|
columnsState={{
|
||||||
|
persistenceKey: "pro-table-singe-demos",
|
||||||
|
persistenceType: "localStorage",
|
||||||
|
defaultValue: {
|
||||||
|
option: { fixed: "right", disable: true },
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
search={false}
|
||||||
|
options={{
|
||||||
|
setting: {
|
||||||
|
listsHeight: 400,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
pagination={{
|
||||||
|
pageSize: 5,
|
||||||
|
}}
|
||||||
|
dateFormatter="string"
|
||||||
|
headerTitle="华为云OBS配置"
|
||||||
|
bordered={false}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="button"
|
||||||
|
icon={<PlusOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
showDrawer();
|
||||||
|
}}
|
||||||
|
type="primary">
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<AddHuaweiOssConfigDrawer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default HuaweiSettings;
|
export default HuawaiSettings;
|
||||||
|
|||||||
@@ -1,8 +1,244 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
|
import React, { useRef, useState } from "react";
|
||||||
|
|
||||||
|
type AliOssConfigItem = {
|
||||||
|
id: number;
|
||||||
|
userId: number;
|
||||||
|
bucketName: number;
|
||||||
|
endpoint: string;
|
||||||
|
accessKey: string;
|
||||||
|
secretKey: string;
|
||||||
|
region: string;
|
||||||
|
createdTime: string;
|
||||||
|
updatedTime: string;
|
||||||
|
status: string;
|
||||||
|
};
|
||||||
|
const data: AliOssConfigItem[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
userId: 1,
|
||||||
|
bucketName: 666,
|
||||||
|
endpoint: "https://oss.aliyuncs.com",
|
||||||
|
accessKey: "LTAI5tG3",
|
||||||
|
secretKey: "G3",
|
||||||
|
region: "G3",
|
||||||
|
createdTime: "2022-01-01",
|
||||||
|
updatedTime: "2022-01-01",
|
||||||
|
status: "正常",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const columns: ProColumns<AliOssConfigItem>[] = [
|
||||||
|
{
|
||||||
|
dataIndex: "index",
|
||||||
|
valueType: "indexBorder",
|
||||||
|
width: 48,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ID",
|
||||||
|
dataIndex: "id",
|
||||||
|
copyable: true,
|
||||||
|
ellipsis: true,
|
||||||
|
tooltip: "Id",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "服务地址",
|
||||||
|
dataIndex: "endpoint",
|
||||||
|
tooltip: "endpoint",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥ID",
|
||||||
|
dataIndex: "accessKey",
|
||||||
|
tooltip: "access key",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥值",
|
||||||
|
dataIndex: "secretKey",
|
||||||
|
tooltip: "secret key",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "地区",
|
||||||
|
dataIndex: "region",
|
||||||
|
tooltip: "region",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "状态",
|
||||||
|
dataIndex: "status",
|
||||||
|
search: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "创建时间",
|
||||||
|
dataIndex: "createdTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "更新时间",
|
||||||
|
dataIndex: "updatedTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
valueType: "option",
|
||||||
|
key: "option",
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-expect-error
|
||||||
|
render: (text, record, _, action) => [
|
||||||
|
<a
|
||||||
|
key="editable"
|
||||||
|
onClick={() => {
|
||||||
|
action?.startEditable?.(record.id);
|
||||||
|
}}>
|
||||||
|
编辑
|
||||||
|
</a>,
|
||||||
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
|
查看
|
||||||
|
</a>,
|
||||||
|
<TableDropdown
|
||||||
|
key="actionGroup"
|
||||||
|
onSelect={() => action?.reload()}
|
||||||
|
menus={[
|
||||||
|
{ key: "copy", name: "复制" },
|
||||||
|
{ key: "delete", name: "删除" },
|
||||||
|
]}
|
||||||
|
/>,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
const JdSettings: React.FC = () => {
|
const JdSettings: React.FC = () => {
|
||||||
return <>AWS设置</>;
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const showDrawer = () => {
|
||||||
|
setOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClose = () => {
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
const AddJdOssConfigDrawer = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Drawer
|
||||||
|
title="创建连接配置"
|
||||||
|
width={720}
|
||||||
|
onClose={onClose}
|
||||||
|
open={open}
|
||||||
|
styles={{
|
||||||
|
body: {
|
||||||
|
paddingBottom: 80,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
extra={
|
||||||
|
<Space>
|
||||||
|
<Button onClick={onClose}>取消</Button>
|
||||||
|
<Button onClick={onClose} type="primary">
|
||||||
|
提交
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
}>
|
||||||
|
<Form layout="vertical">
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="endpoint"
|
||||||
|
label="服务地址"
|
||||||
|
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
||||||
|
<Input placeholder="请输入服务地址！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="region"
|
||||||
|
label="地区"
|
||||||
|
rules={[{ required: true, message: "请输入地区！" }]}>
|
||||||
|
<Input placeholder="请输入地区！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="accessKey"
|
||||||
|
label="密钥ID"
|
||||||
|
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
||||||
|
<Input placeholder="请输入密钥ID！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="secretKey"
|
||||||
|
label="密钥值"
|
||||||
|
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
||||||
|
<Input placeholder="请输入密钥值！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</Drawer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ProTable<AliOssConfigItem>
|
||||||
|
columns={columns}
|
||||||
|
dataSource={data}
|
||||||
|
actionRef={actionRef}
|
||||||
|
cardBordered={true}
|
||||||
|
editable={{
|
||||||
|
type: "multiple",
|
||||||
|
}}
|
||||||
|
columnsState={{
|
||||||
|
persistenceKey: "pro-table-singe-demos",
|
||||||
|
persistenceType: "localStorage",
|
||||||
|
defaultValue: {
|
||||||
|
option: { fixed: "right", disable: true },
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
search={false}
|
||||||
|
options={{
|
||||||
|
setting: {
|
||||||
|
listsHeight: 400,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
pagination={{
|
||||||
|
pageSize: 5,
|
||||||
|
}}
|
||||||
|
dateFormatter="string"
|
||||||
|
headerTitle="京东云OSS配置"
|
||||||
|
bordered={false}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="button"
|
||||||
|
icon={<PlusOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
showDrawer();
|
||||||
|
}}
|
||||||
|
type="primary">
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<AddJdOssConfigDrawer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default JdSettings;
|
export default JdSettings;
|
||||||
|
|||||||
@@ -1,8 +1,278 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
|
import React, { useRef, useState } from "react";
|
||||||
|
|
||||||
|
type AliOssConfigItem = {
|
||||||
|
id: number;
|
||||||
|
userId: number;
|
||||||
|
endpoint: string;
|
||||||
|
bucketName: string;
|
||||||
|
accessKeyId: string;
|
||||||
|
accessKeySecret: string;
|
||||||
|
region: string;
|
||||||
|
securityToken: string;
|
||||||
|
createdTime: string;
|
||||||
|
updatedTime: string;
|
||||||
|
status: string;
|
||||||
|
};
|
||||||
|
const data: AliOssConfigItem[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
userId: 1,
|
||||||
|
bucketName: "6666",
|
||||||
|
endpoint: "https://oss.aliyuncs.com",
|
||||||
|
accessKeyId: "LTAI5tG3",
|
||||||
|
accessKeySecret: "G3",
|
||||||
|
region: "G3",
|
||||||
|
securityToken: "G3",
|
||||||
|
createdTime: "2022-01-01",
|
||||||
|
updatedTime: "2022-01-01",
|
||||||
|
status: "正常",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const columns: ProColumns<AliOssConfigItem>[] = [
|
||||||
|
{
|
||||||
|
dataIndex: "index",
|
||||||
|
valueType: "indexBorder",
|
||||||
|
width: 48,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ID",
|
||||||
|
dataIndex: "id",
|
||||||
|
copyable: true,
|
||||||
|
ellipsis: true,
|
||||||
|
tooltip: "Id",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "存储桶",
|
||||||
|
dataIndex: "bucketName",
|
||||||
|
tooltip: "bucketName",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "服务地址",
|
||||||
|
dataIndex: "endpoint",
|
||||||
|
tooltip: "endpoint",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥ID",
|
||||||
|
dataIndex: "accessKeyId",
|
||||||
|
tooltip: "access key id",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥值",
|
||||||
|
dataIndex: "accessKeySecret",
|
||||||
|
tooltip: "access key secret",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "地区",
|
||||||
|
dataIndex: "region",
|
||||||
|
tooltip: "region",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "令牌",
|
||||||
|
dataIndex: "securityToken",
|
||||||
|
tooltip: "security token",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "状态",
|
||||||
|
dataIndex: "status",
|
||||||
|
search: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "创建时间",
|
||||||
|
dataIndex: "createdTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "更新时间",
|
||||||
|
dataIndex: "updatedTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
valueType: "option",
|
||||||
|
key: "option",
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-expect-error
|
||||||
|
render: (text, record, _, action) => [
|
||||||
|
<a
|
||||||
|
key="editable"
|
||||||
|
onClick={() => {
|
||||||
|
action?.startEditable?.(record.id);
|
||||||
|
}}>
|
||||||
|
编辑
|
||||||
|
</a>,
|
||||||
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
|
查看
|
||||||
|
</a>,
|
||||||
|
<TableDropdown
|
||||||
|
key="actionGroup"
|
||||||
|
onSelect={() => action?.reload()}
|
||||||
|
menus={[
|
||||||
|
{ key: "copy", name: "复制" },
|
||||||
|
{ key: "delete", name: "删除" },
|
||||||
|
]}
|
||||||
|
/>,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
const JinshanSettings: React.FC = () => {
|
const JinshanSettings: React.FC = () => {
|
||||||
return <>金山设置</>;
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const showDrawer = () => {
|
||||||
|
setOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClose = () => {
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
const AddJinshanOssConfigDrawer = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Drawer
|
||||||
|
title="创建连接配置"
|
||||||
|
width={720}
|
||||||
|
onClose={onClose}
|
||||||
|
open={open}
|
||||||
|
styles={{
|
||||||
|
body: {
|
||||||
|
paddingBottom: 80,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
extra={
|
||||||
|
<Space>
|
||||||
|
<Button onClick={onClose}>取消</Button>
|
||||||
|
<Button onClick={onClose} type="primary">
|
||||||
|
提交
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
}>
|
||||||
|
<Form layout="vertical">
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="endpoint"
|
||||||
|
label="服务地址"
|
||||||
|
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
||||||
|
<Input placeholder="请输入服务地址！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="bucketName"
|
||||||
|
label="存储桶"
|
||||||
|
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
||||||
|
<Input placeholder="请输入存储桶！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="accessKeyId"
|
||||||
|
label="密钥ID"
|
||||||
|
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
||||||
|
<Input placeholder="请输入密钥ID！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="accessKeySecret"
|
||||||
|
label="密钥值"
|
||||||
|
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
||||||
|
<Input placeholder="请输入密钥值！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="securityToken"
|
||||||
|
label="令牌Token"
|
||||||
|
rules={[{ required: true, message: "请输入令牌Token!" }]}>
|
||||||
|
<Input placeholder="请输入令牌Token！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="region"
|
||||||
|
label="地区"
|
||||||
|
rules={[{ required: true, message: "请输入地区!" }]}>
|
||||||
|
<Input placeholder="请输入地区！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</Drawer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ProTable<AliOssConfigItem>
|
||||||
|
columns={columns}
|
||||||
|
dataSource={data}
|
||||||
|
actionRef={actionRef}
|
||||||
|
cardBordered={true}
|
||||||
|
editable={{
|
||||||
|
type: "multiple",
|
||||||
|
}}
|
||||||
|
columnsState={{
|
||||||
|
persistenceKey: "pro-table-singe-demos",
|
||||||
|
persistenceType: "localStorage",
|
||||||
|
defaultValue: {
|
||||||
|
option: { fixed: "right", disable: true },
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
search={false}
|
||||||
|
options={{
|
||||||
|
setting: {
|
||||||
|
listsHeight: 400,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
pagination={{
|
||||||
|
pageSize: 5,
|
||||||
|
}}
|
||||||
|
dateFormatter="string"
|
||||||
|
headerTitle="金山OBS配置"
|
||||||
|
bordered={false}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="button"
|
||||||
|
icon={<PlusOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
showDrawer();
|
||||||
|
}}
|
||||||
|
type="primary">
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<AddJinshanOssConfigDrawer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default JinshanSettings;
|
export default JinshanSettings;
|
||||||
|
|||||||
@@ -1,8 +1,225 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
|
import React, { useRef, useState } from "react";
|
||||||
|
|
||||||
|
type AliOssConfigItem = {
|
||||||
|
id: number;
|
||||||
|
userId: number;
|
||||||
|
endpoint: string;
|
||||||
|
accessKey: string;
|
||||||
|
secretKey: string;
|
||||||
|
createdTime: string;
|
||||||
|
updatedTime: string;
|
||||||
|
status: string;
|
||||||
|
};
|
||||||
|
const data: AliOssConfigItem[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
userId: 1,
|
||||||
|
endpoint: "https://oss.aliyuncs.com",
|
||||||
|
accessKey: "LTAI5tG3",
|
||||||
|
secretKey: "G3",
|
||||||
|
createdTime: "2022-01-01",
|
||||||
|
updatedTime: "2022-01-01",
|
||||||
|
status: "正常",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const columns: ProColumns<AliOssConfigItem>[] = [
|
||||||
|
{
|
||||||
|
dataIndex: "index",
|
||||||
|
valueType: "indexBorder",
|
||||||
|
width: 48,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ID",
|
||||||
|
dataIndex: "id",
|
||||||
|
copyable: true,
|
||||||
|
ellipsis: true,
|
||||||
|
tooltip: "Id",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "服务地址",
|
||||||
|
dataIndex: "endpoint",
|
||||||
|
tooltip: "endpoint",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥ID",
|
||||||
|
dataIndex: "accessKey",
|
||||||
|
tooltip: "access key",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥值",
|
||||||
|
dataIndex: "secretKey",
|
||||||
|
tooltip: "secret key",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "状态",
|
||||||
|
dataIndex: "status",
|
||||||
|
search: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "创建时间",
|
||||||
|
dataIndex: "createdTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "更新时间",
|
||||||
|
dataIndex: "updatedTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
valueType: "option",
|
||||||
|
key: "option",
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-expect-error
|
||||||
|
render: (text, record, _, action) => [
|
||||||
|
<a
|
||||||
|
key="editable"
|
||||||
|
onClick={() => {
|
||||||
|
action?.startEditable?.(record.id);
|
||||||
|
}}>
|
||||||
|
编辑
|
||||||
|
</a>,
|
||||||
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
|
查看
|
||||||
|
</a>,
|
||||||
|
<TableDropdown
|
||||||
|
key="actionGroup"
|
||||||
|
onSelect={() => action?.reload()}
|
||||||
|
menus={[
|
||||||
|
{ key: "copy", name: "复制" },
|
||||||
|
{ key: "delete", name: "删除" },
|
||||||
|
]}
|
||||||
|
/>,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
const MinioSettings: React.FC = () => {
|
const MinioSettings: React.FC = () => {
|
||||||
return <>Minio设置</>;
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const showDrawer = () => {
|
||||||
|
setOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClose = () => {
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
const AddMinioOssConfigDrawer = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Drawer
|
||||||
|
title="创建连接配置"
|
||||||
|
width={720}
|
||||||
|
onClose={onClose}
|
||||||
|
open={open}
|
||||||
|
styles={{
|
||||||
|
body: {
|
||||||
|
paddingBottom: 80,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
extra={
|
||||||
|
<Space>
|
||||||
|
<Button onClick={onClose}>取消</Button>
|
||||||
|
<Button onClick={onClose} type="primary">
|
||||||
|
提交
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
}>
|
||||||
|
<Form layout="vertical">
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="endpoint"
|
||||||
|
label="服务地址"
|
||||||
|
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
||||||
|
<Input placeholder="请输入服务地址！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="accessKey"
|
||||||
|
label="密钥ID"
|
||||||
|
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
||||||
|
<Input placeholder="请输入密钥ID！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="secretKey"
|
||||||
|
label="密钥值"
|
||||||
|
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
||||||
|
<Input placeholder="请输入密钥值！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</Drawer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ProTable<AliOssConfigItem>
|
||||||
|
columns={columns}
|
||||||
|
dataSource={data}
|
||||||
|
actionRef={actionRef}
|
||||||
|
cardBordered={true}
|
||||||
|
editable={{
|
||||||
|
type: "multiple",
|
||||||
|
}}
|
||||||
|
columnsState={{
|
||||||
|
persistenceKey: "pro-table-singe-demos",
|
||||||
|
persistenceType: "localStorage",
|
||||||
|
defaultValue: {
|
||||||
|
option: { fixed: "right", disable: true },
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
search={false}
|
||||||
|
options={{
|
||||||
|
setting: {
|
||||||
|
listsHeight: 400,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
pagination={{
|
||||||
|
pageSize: 5,
|
||||||
|
}}
|
||||||
|
dateFormatter="string"
|
||||||
|
headerTitle="MinIO配置"
|
||||||
|
bordered={false}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="button"
|
||||||
|
icon={<PlusOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
showDrawer();
|
||||||
|
}}
|
||||||
|
type="primary">
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<AddMinioOssConfigDrawer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default MinioSettings;
|
export default MinioSettings;
|
||||||
|
|||||||
@@ -1,8 +1,225 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
|
import React, { useRef, useState } from "react";
|
||||||
|
|
||||||
|
type AliOssConfigItem = {
|
||||||
|
id: number;
|
||||||
|
userId: number;
|
||||||
|
endpoint: string;
|
||||||
|
accessKeyId: string;
|
||||||
|
accessKeySecret: string;
|
||||||
|
created_time: string;
|
||||||
|
updated_time: string;
|
||||||
|
status: string;
|
||||||
|
};
|
||||||
|
const data: AliOssConfigItem[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
userId: 1,
|
||||||
|
endpoint: "https://oss.aliyuncs.com",
|
||||||
|
accessKeyId: "LTAI5tG3",
|
||||||
|
accessKeySecret: "G3",
|
||||||
|
created_time: "2022-01-01",
|
||||||
|
updated_time: "2022-01-01",
|
||||||
|
status: "正常",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const columns: ProColumns<AliOssConfigItem>[] = [
|
||||||
|
{
|
||||||
|
dataIndex: "index",
|
||||||
|
valueType: "indexBorder",
|
||||||
|
width: 48,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ID",
|
||||||
|
dataIndex: "id",
|
||||||
|
copyable: true,
|
||||||
|
ellipsis: true,
|
||||||
|
tooltip: "Id",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "服务地址",
|
||||||
|
dataIndex: "endpoint",
|
||||||
|
tooltip: "endpoint",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥ID",
|
||||||
|
dataIndex: "accessKeyId",
|
||||||
|
tooltip: "access key id",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥值",
|
||||||
|
dataIndex: "accessKeySecret",
|
||||||
|
tooltip: "access key secret",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "状态",
|
||||||
|
dataIndex: "status",
|
||||||
|
search: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "创建时间",
|
||||||
|
dataIndex: "createdTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "更新时间",
|
||||||
|
dataIndex: "updateTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
valueType: "option",
|
||||||
|
key: "option",
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-expect-error
|
||||||
|
render: (text, record, _, action) => [
|
||||||
|
<a
|
||||||
|
key="editable"
|
||||||
|
onClick={() => {
|
||||||
|
action?.startEditable?.(record.id);
|
||||||
|
}}>
|
||||||
|
编辑
|
||||||
|
</a>,
|
||||||
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
|
查看
|
||||||
|
</a>,
|
||||||
|
<TableDropdown
|
||||||
|
key="actionGroup"
|
||||||
|
onSelect={() => action?.reload()}
|
||||||
|
menus={[
|
||||||
|
{ key: "copy", name: "复制" },
|
||||||
|
{ key: "delete", name: "删除" },
|
||||||
|
]}
|
||||||
|
/>,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
const PinanSettings: React.FC = () => {
|
const PinanSettings: React.FC = () => {
|
||||||
return <>平安云设置</>;
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const showDrawer = () => {
|
||||||
|
setOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClose = () => {
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
const AddPinanOssConfigDrawer = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Drawer
|
||||||
|
title="创建连接配置"
|
||||||
|
width={720}
|
||||||
|
onClose={onClose}
|
||||||
|
open={open}
|
||||||
|
styles={{
|
||||||
|
body: {
|
||||||
|
paddingBottom: 80,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
extra={
|
||||||
|
<Space>
|
||||||
|
<Button onClick={onClose}>取消</Button>
|
||||||
|
<Button onClick={onClose} type="primary">
|
||||||
|
提交
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
}>
|
||||||
|
<Form layout="vertical">
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="endpoint"
|
||||||
|
label="服务地址"
|
||||||
|
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
||||||
|
<Input placeholder="请输入服务地址！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="accessKeyId"
|
||||||
|
label="密钥ID"
|
||||||
|
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
||||||
|
<Input placeholder="请输入密钥ID！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="accessKeySecret"
|
||||||
|
label="密钥值"
|
||||||
|
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
||||||
|
<Input placeholder="请输入密钥值！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</Drawer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ProTable<AliOssConfigItem>
|
||||||
|
columns={columns}
|
||||||
|
dataSource={data}
|
||||||
|
actionRef={actionRef}
|
||||||
|
cardBordered={true}
|
||||||
|
editable={{
|
||||||
|
type: "multiple",
|
||||||
|
}}
|
||||||
|
columnsState={{
|
||||||
|
persistenceKey: "pro-table-singe-demos",
|
||||||
|
persistenceType: "localStorage",
|
||||||
|
defaultValue: {
|
||||||
|
option: { fixed: "right", disable: true },
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
search={false}
|
||||||
|
options={{
|
||||||
|
setting: {
|
||||||
|
listsHeight: 400,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
pagination={{
|
||||||
|
pageSize: 5,
|
||||||
|
}}
|
||||||
|
dateFormatter="string"
|
||||||
|
headerTitle="平安云OSS配置"
|
||||||
|
bordered={false}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="button"
|
||||||
|
icon={<PlusOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
showDrawer();
|
||||||
|
}}
|
||||||
|
type="primary">
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<AddPinanOssConfigDrawer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default PinanSettings;
|
export default PinanSettings;
|
||||||
|
|||||||
@@ -1,8 +1,254 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
|
import React, { useRef, useState } from "react";
|
||||||
|
|
||||||
|
type AliOssConfigItem = {
|
||||||
|
id: number;
|
||||||
|
userId: number;
|
||||||
|
zone: string;
|
||||||
|
endpoint: string;
|
||||||
|
accessKey: string;
|
||||||
|
bucketName: string;
|
||||||
|
accessSecret: string;
|
||||||
|
createdTime: string;
|
||||||
|
updatedTime: string;
|
||||||
|
status: string;
|
||||||
|
};
|
||||||
|
const data: AliOssConfigItem[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
userId: 1,
|
||||||
|
bucketName: "1",
|
||||||
|
zone: "1",
|
||||||
|
endpoint: "https://oss.aliyuncs.com",
|
||||||
|
accessKey: "LTAI5tG3",
|
||||||
|
accessSecret: "G3",
|
||||||
|
createdTime: "2022-01-01",
|
||||||
|
updatedTime: "2022-01-01",
|
||||||
|
status: "正常",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const columns: ProColumns<AliOssConfigItem>[] = [
|
||||||
|
{
|
||||||
|
dataIndex: "index",
|
||||||
|
valueType: "indexBorder",
|
||||||
|
width: 48,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ID",
|
||||||
|
dataIndex: "id",
|
||||||
|
copyable: true,
|
||||||
|
ellipsis: true,
|
||||||
|
tooltip: "Id",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "地区",
|
||||||
|
dataIndex: "zone",
|
||||||
|
tooltip: "zone",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "服务地址",
|
||||||
|
dataIndex: "endpoint",
|
||||||
|
tooltip: "endpoint",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥ID",
|
||||||
|
dataIndex: "accessKey",
|
||||||
|
tooltip: "access Key",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥值",
|
||||||
|
dataIndex: "accessSecret",
|
||||||
|
tooltip: "access Secret",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "状态",
|
||||||
|
dataIndex: "status",
|
||||||
|
search: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "创建时间",
|
||||||
|
dataIndex: "createdTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "更新时间",
|
||||||
|
dataIndex: "updatedTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
valueType: "option",
|
||||||
|
key: "option",
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-expect-error
|
||||||
|
render: (text, record, _, action) => [
|
||||||
|
<a
|
||||||
|
key="editable"
|
||||||
|
onClick={() => {
|
||||||
|
action?.startEditable?.(record.id);
|
||||||
|
}}>
|
||||||
|
编辑
|
||||||
|
</a>,
|
||||||
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
|
查看
|
||||||
|
</a>,
|
||||||
|
<TableDropdown
|
||||||
|
key="actionGroup"
|
||||||
|
onSelect={() => action?.reload()}
|
||||||
|
menus={[
|
||||||
|
{ key: "copy", name: "复制" },
|
||||||
|
{ key: "delete", name: "删除" },
|
||||||
|
]}
|
||||||
|
/>,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
const QingyunSettings: React.FC = () => {
|
const QingyunSettings: React.FC = () => {
|
||||||
return <>青云设置</>;
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const showDrawer = () => {
|
||||||
|
setOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClose = () => {
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
const AddQingyunOssConfigDrawer = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Drawer
|
||||||
|
title="创建连接配置"
|
||||||
|
width={720}
|
||||||
|
onClose={onClose}
|
||||||
|
open={open}
|
||||||
|
styles={{
|
||||||
|
body: {
|
||||||
|
paddingBottom: 80,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
extra={
|
||||||
|
<Space>
|
||||||
|
<Button onClick={onClose}>取消</Button>
|
||||||
|
<Button onClick={onClose} type="primary">
|
||||||
|
提交
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
}>
|
||||||
|
<Form layout="vertical">
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="endpoint"
|
||||||
|
label="服务地址"
|
||||||
|
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
||||||
|
<Input placeholder="请输入服务地址！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="bucketName"
|
||||||
|
label="存储桶"
|
||||||
|
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
||||||
|
<Input placeholder="请输入存储桶！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="accessKey"
|
||||||
|
label="密钥ID"
|
||||||
|
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
||||||
|
<Input placeholder="请输入密钥ID！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="accessSecret"
|
||||||
|
label="密钥值"
|
||||||
|
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
||||||
|
<Input placeholder="请输入密钥值！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="zone"
|
||||||
|
label="地区"
|
||||||
|
rules={[{ required: true, message: "请输入地区!" }]}>
|
||||||
|
<Input placeholder="请输入地区！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</Drawer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ProTable<AliOssConfigItem>
|
||||||
|
columns={columns}
|
||||||
|
dataSource={data}
|
||||||
|
actionRef={actionRef}
|
||||||
|
cardBordered={true}
|
||||||
|
editable={{
|
||||||
|
type: "multiple",
|
||||||
|
}}
|
||||||
|
columnsState={{
|
||||||
|
persistenceKey: "pro-table-singe-demos",
|
||||||
|
persistenceType: "localStorage",
|
||||||
|
defaultValue: {
|
||||||
|
option: { fixed: "right", disable: true },
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
search={false}
|
||||||
|
options={{
|
||||||
|
setting: {
|
||||||
|
listsHeight: 400,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
pagination={{
|
||||||
|
pageSize: 5,
|
||||||
|
}}
|
||||||
|
dateFormatter="string"
|
||||||
|
headerTitle="青云OSS配置"
|
||||||
|
bordered={false}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="button"
|
||||||
|
icon={<PlusOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
showDrawer();
|
||||||
|
}}
|
||||||
|
type="primary">
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<AddQingyunOssConfigDrawer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default QingyunSettings;
|
export default QingyunSettings;
|
||||||
|
|||||||
@@ -1,8 +1,225 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
|
import React, { useRef, useState } from "react";
|
||||||
|
|
||||||
import React from "react";
|
type AliOssConfigItem = {
|
||||||
const AliSettings: React.FC = () => {
|
id: number;
|
||||||
return <>七牛设置</>;
|
userId: number;
|
||||||
|
bucketName: string;
|
||||||
|
accessKey: string;
|
||||||
|
secretKey: string;
|
||||||
|
createdTime: string;
|
||||||
|
updatedTime: string;
|
||||||
|
status: string;
|
||||||
|
};
|
||||||
|
const data: AliOssConfigItem[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
userId: 1,
|
||||||
|
bucketName: "https://oss.aliyuncs.com",
|
||||||
|
accessKey: "LTAI5tG3",
|
||||||
|
secretKey: "G3",
|
||||||
|
createdTime: "2022-01-01",
|
||||||
|
updatedTime: "2022-01-01",
|
||||||
|
status: "正常",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const columns: ProColumns<AliOssConfigItem>[] = [
|
||||||
|
{
|
||||||
|
dataIndex: "index",
|
||||||
|
valueType: "indexBorder",
|
||||||
|
width: 48,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ID",
|
||||||
|
dataIndex: "id",
|
||||||
|
copyable: true,
|
||||||
|
ellipsis: true,
|
||||||
|
tooltip: "Id",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "服务地址",
|
||||||
|
dataIndex: "endpoint",
|
||||||
|
tooltip: "endpoint",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥ID",
|
||||||
|
dataIndex: "accessKeyId",
|
||||||
|
tooltip: "access key id",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥值",
|
||||||
|
dataIndex: "accessKeySecret",
|
||||||
|
tooltip: "access key secret",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "状态",
|
||||||
|
dataIndex: "status",
|
||||||
|
search: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "创建时间",
|
||||||
|
dataIndex: "createdTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "更新时间",
|
||||||
|
dataIndex: "updatedTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
valueType: "option",
|
||||||
|
key: "option",
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-expect-error
|
||||||
|
render: (text, record, _, action) => [
|
||||||
|
<a
|
||||||
|
key="editable"
|
||||||
|
onClick={() => {
|
||||||
|
action?.startEditable?.(record.id);
|
||||||
|
}}>
|
||||||
|
编辑
|
||||||
|
</a>,
|
||||||
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
|
查看
|
||||||
|
</a>,
|
||||||
|
<TableDropdown
|
||||||
|
key="actionGroup"
|
||||||
|
onSelect={() => action?.reload()}
|
||||||
|
menus={[
|
||||||
|
{ key: "copy", name: "复制" },
|
||||||
|
{ key: "delete", name: "删除" },
|
||||||
|
]}
|
||||||
|
/>,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const QiniuSettings: React.FC = () => {
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const showDrawer = () => {
|
||||||
|
setOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClose = () => {
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
const AddQiniuOssConfigDrawer = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Drawer
|
||||||
|
title="创建连接配置"
|
||||||
|
width={720}
|
||||||
|
onClose={onClose}
|
||||||
|
open={open}
|
||||||
|
styles={{
|
||||||
|
body: {
|
||||||
|
paddingBottom: 80,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
extra={
|
||||||
|
<Space>
|
||||||
|
<Button onClick={onClose}>取消</Button>
|
||||||
|
<Button onClick={onClose} type="primary">
|
||||||
|
提交
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
}>
|
||||||
|
<Form layout="vertical">
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="bucketName"
|
||||||
|
label="存储桶"
|
||||||
|
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
||||||
|
<Input placeholder="请输入存储桶！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="accessKey"
|
||||||
|
label="密钥ID"
|
||||||
|
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
||||||
|
<Input placeholder="请输入密钥ID！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="secretKey"
|
||||||
|
label="密钥值"
|
||||||
|
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
||||||
|
<Input placeholder="请输入密钥值！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</Drawer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ProTable<AliOssConfigItem>
|
||||||
|
columns={columns}
|
||||||
|
dataSource={data}
|
||||||
|
actionRef={actionRef}
|
||||||
|
cardBordered={true}
|
||||||
|
editable={{
|
||||||
|
type: "multiple",
|
||||||
|
}}
|
||||||
|
columnsState={{
|
||||||
|
persistenceKey: "pro-table-singe-demos",
|
||||||
|
persistenceType: "localStorage",
|
||||||
|
defaultValue: {
|
||||||
|
option: { fixed: "right", disable: true },
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
search={false}
|
||||||
|
options={{
|
||||||
|
setting: {
|
||||||
|
listsHeight: 400,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
pagination={{
|
||||||
|
pageSize: 5,
|
||||||
|
}}
|
||||||
|
dateFormatter="string"
|
||||||
|
headerTitle="七牛Kodo配置"
|
||||||
|
bordered={false}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="button"
|
||||||
|
icon={<PlusOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
showDrawer();
|
||||||
|
}}
|
||||||
|
type="primary">
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<AddQiniuOssConfigDrawer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AliSettings;
|
export default QiniuSettings;
|
||||||
|
|||||||
@@ -1,8 +1,215 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
|
import React, { useRef, useState } from "react";
|
||||||
|
|
||||||
|
type AliOssConfigItem = {
|
||||||
|
id: number;
|
||||||
|
userId: number;
|
||||||
|
bucketName: string;
|
||||||
|
secretId: string;
|
||||||
|
secretKey: string;
|
||||||
|
createdTime: string;
|
||||||
|
updatedTime: string;
|
||||||
|
status: string;
|
||||||
|
};
|
||||||
|
const data: AliOssConfigItem[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
userId: 1,
|
||||||
|
bucketName: "https://oss.aliyuncs.com",
|
||||||
|
secretId: "LTAI5tG3",
|
||||||
|
secretKey: "G3",
|
||||||
|
createdTime: "2022-01-01",
|
||||||
|
updatedTime: "2022-01-01",
|
||||||
|
status: "正常",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const columns: ProColumns<AliOssConfigItem>[] = [
|
||||||
|
{
|
||||||
|
dataIndex: "index",
|
||||||
|
valueType: "indexBorder",
|
||||||
|
width: 48,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ID",
|
||||||
|
dataIndex: "id",
|
||||||
|
copyable: true,
|
||||||
|
ellipsis: true,
|
||||||
|
tooltip: "Id",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "存储桶",
|
||||||
|
dataIndex: "bucketName",
|
||||||
|
tooltip: "bucketName",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥ID",
|
||||||
|
dataIndex: "secretId",
|
||||||
|
tooltip: "secret Id",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥值",
|
||||||
|
dataIndex: "secretKey",
|
||||||
|
tooltip: "secret Key",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "状态",
|
||||||
|
dataIndex: "status",
|
||||||
|
search: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "创建时间",
|
||||||
|
dataIndex: "createdTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "更新时间",
|
||||||
|
dataIndex: "updatedTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
valueType: "option",
|
||||||
|
key: "option",
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-expect-error
|
||||||
|
render: (text, record, _, action) => [
|
||||||
|
<a
|
||||||
|
key="editable"
|
||||||
|
onClick={() => {
|
||||||
|
action?.startEditable?.(record.id);
|
||||||
|
}}>
|
||||||
|
编辑
|
||||||
|
</a>,
|
||||||
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
|
查看
|
||||||
|
</a>,
|
||||||
|
<TableDropdown
|
||||||
|
key="actionGroup"
|
||||||
|
onSelect={() => action?.reload()}
|
||||||
|
menus={[
|
||||||
|
{ key: "copy", name: "复制" },
|
||||||
|
{ key: "delete", name: "删除" },
|
||||||
|
]}
|
||||||
|
/>,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
const TencentSettings: React.FC = () => {
|
const TencentSettings: React.FC = () => {
|
||||||
return <>腾讯云COS设置</>;
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const showDrawer = () => {
|
||||||
|
setOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClose = () => {
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
const AddTencentOssConfigDrawer = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Drawer
|
||||||
|
title="创建连接配置"
|
||||||
|
width={720}
|
||||||
|
onClose={onClose}
|
||||||
|
open={open}
|
||||||
|
styles={{
|
||||||
|
body: {
|
||||||
|
paddingBottom: 80,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
extra={
|
||||||
|
<Space>
|
||||||
|
<Button onClick={onClose}>取消</Button>
|
||||||
|
<Button onClick={onClose} type="primary">
|
||||||
|
提交
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
}>
|
||||||
|
<Form layout="vertical">
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="secretId"
|
||||||
|
label="密钥ID"
|
||||||
|
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
||||||
|
<Input placeholder="请输入密钥ID！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="secretKey"
|
||||||
|
label="密钥值"
|
||||||
|
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
||||||
|
<Input placeholder="请输入密钥值！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</Drawer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ProTable<AliOssConfigItem>
|
||||||
|
columns={columns}
|
||||||
|
dataSource={data}
|
||||||
|
actionRef={actionRef}
|
||||||
|
cardBordered={true}
|
||||||
|
editable={{
|
||||||
|
type: "multiple",
|
||||||
|
}}
|
||||||
|
columnsState={{
|
||||||
|
persistenceKey: "pro-table-singe-demos",
|
||||||
|
persistenceType: "localStorage",
|
||||||
|
defaultValue: {
|
||||||
|
option: { fixed: "right", disable: true },
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
search={false}
|
||||||
|
options={{
|
||||||
|
setting: {
|
||||||
|
listsHeight: 400,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
pagination={{
|
||||||
|
pageSize: 5,
|
||||||
|
}}
|
||||||
|
dateFormatter="string"
|
||||||
|
headerTitle="腾讯云COS配置"
|
||||||
|
bordered={false}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="button"
|
||||||
|
icon={<PlusOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
showDrawer();
|
||||||
|
}}
|
||||||
|
type="primary">
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<AddTencentOssConfigDrawer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default TencentSettings;
|
export default TencentSettings;
|
||||||
|
|||||||
@@ -1,8 +1,242 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
|
import React, { useRef, useState } from "react";
|
||||||
|
|
||||||
|
type AliOssConfigItem = {
|
||||||
|
id: number;
|
||||||
|
userId: number;
|
||||||
|
bucketName: string;
|
||||||
|
publicKey: string;
|
||||||
|
privateKey: string;
|
||||||
|
customHost: string;
|
||||||
|
createdTime: string;
|
||||||
|
updatedTime: string;
|
||||||
|
status: string;
|
||||||
|
};
|
||||||
|
const data: AliOssConfigItem[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
userId: 1,
|
||||||
|
bucketName: "https://oss.aliyuncs.com",
|
||||||
|
publicKey: "LTAI5tG3",
|
||||||
|
privateKey: "G3",
|
||||||
|
customHost: "G3",
|
||||||
|
createdTime: "2022-01-01",
|
||||||
|
updatedTime: "2022-01-01",
|
||||||
|
status: "正常",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const columns: ProColumns<AliOssConfigItem>[] = [
|
||||||
|
{
|
||||||
|
dataIndex: "index",
|
||||||
|
valueType: "indexBorder",
|
||||||
|
width: 48,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ID",
|
||||||
|
dataIndex: "id",
|
||||||
|
copyable: true,
|
||||||
|
ellipsis: true,
|
||||||
|
tooltip: "Id",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "存储桶",
|
||||||
|
dataIndex: "bucketName",
|
||||||
|
tooltip: "bucketName",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "公钥",
|
||||||
|
dataIndex: "publicKey",
|
||||||
|
tooltip: "publicKey",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "私钥",
|
||||||
|
dataIndex: "privateKey",
|
||||||
|
tooltip: "privateKey",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "服务地址",
|
||||||
|
dataIndex: "customHost",
|
||||||
|
tooltip: "customHost",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "状态",
|
||||||
|
dataIndex: "status",
|
||||||
|
search: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "创建时间",
|
||||||
|
dataIndex: "createdTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "更新时间",
|
||||||
|
dataIndex: "updatedTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
valueType: "option",
|
||||||
|
key: "option",
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-expect-error
|
||||||
|
render: (text, record, _, action) => [
|
||||||
|
<a
|
||||||
|
key="editable"
|
||||||
|
onClick={() => {
|
||||||
|
action?.startEditable?.(record.id);
|
||||||
|
}}>
|
||||||
|
编辑
|
||||||
|
</a>,
|
||||||
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
|
查看
|
||||||
|
</a>,
|
||||||
|
<TableDropdown
|
||||||
|
key="actionGroup"
|
||||||
|
onSelect={() => action?.reload()}
|
||||||
|
menus={[
|
||||||
|
{ key: "copy", name: "复制" },
|
||||||
|
{ key: "delete", name: "删除" },
|
||||||
|
]}
|
||||||
|
/>,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
const UcloudSettings: React.FC = () => {
|
const UcloudSettings: React.FC = () => {
|
||||||
return <>Ucloud设置</>;
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const showDrawer = () => {
|
||||||
|
setOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClose = () => {
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
const AddUcloudOssConfigDrawer = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Drawer
|
||||||
|
title="创建连接配置"
|
||||||
|
width={720}
|
||||||
|
onClose={onClose}
|
||||||
|
open={open}
|
||||||
|
styles={{
|
||||||
|
body: {
|
||||||
|
paddingBottom: 80,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
extra={
|
||||||
|
<Space>
|
||||||
|
<Button onClick={onClose}>取消</Button>
|
||||||
|
<Button onClick={onClose} type="primary">
|
||||||
|
提交
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
}>
|
||||||
|
<Form layout="vertical">
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="customHost"
|
||||||
|
label="服务地址"
|
||||||
|
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
||||||
|
<Input placeholder="请输入服务地址！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="bucketName"
|
||||||
|
label="存储桶"
|
||||||
|
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
||||||
|
<Input placeholder="请输入存储桶！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="publicKey"
|
||||||
|
label="公钥"
|
||||||
|
rules={[{ required: true, message: "请输入公钥!" }]}>
|
||||||
|
<Input placeholder="请输入公钥！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="privateKey"
|
||||||
|
label="私钥"
|
||||||
|
rules={[{ required: true, message: "请输入私钥!" }]}>
|
||||||
|
<Input placeholder="请输入私钥！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</Drawer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ProTable<AliOssConfigItem>
|
||||||
|
columns={columns}
|
||||||
|
dataSource={data}
|
||||||
|
actionRef={actionRef}
|
||||||
|
cardBordered={true}
|
||||||
|
editable={{
|
||||||
|
type: "multiple",
|
||||||
|
}}
|
||||||
|
columnsState={{
|
||||||
|
persistenceKey: "pro-table-singe-demos",
|
||||||
|
persistenceType: "localStorage",
|
||||||
|
defaultValue: {
|
||||||
|
option: { fixed: "right", disable: true },
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
search={false}
|
||||||
|
options={{
|
||||||
|
setting: {
|
||||||
|
listsHeight: 400,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
pagination={{
|
||||||
|
pageSize: 5,
|
||||||
|
}}
|
||||||
|
dateFormatter="string"
|
||||||
|
headerTitle="UCloud US3配置"
|
||||||
|
bordered={false}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="button"
|
||||||
|
icon={<PlusOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
showDrawer();
|
||||||
|
}}
|
||||||
|
type="primary">
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<AddUcloudOssConfigDrawer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default UcloudSettings;
|
export default UcloudSettings;
|
||||||
|
|||||||
@@ -1,8 +1,225 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
|
import React, { useRef, useState } from "react";
|
||||||
|
|
||||||
|
type AliOssConfigItem = {
|
||||||
|
id: number;
|
||||||
|
userId: number;
|
||||||
|
bucketName: string;
|
||||||
|
userName: string;
|
||||||
|
password: string;
|
||||||
|
createdTime: string;
|
||||||
|
updatedTime: string;
|
||||||
|
status: string;
|
||||||
|
};
|
||||||
|
const data: AliOssConfigItem[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
userId: 1,
|
||||||
|
bucketName: "https://oss.aliyuncs.com",
|
||||||
|
userName: "LTAI5tG3",
|
||||||
|
password: "G3",
|
||||||
|
createdTime: "2022-01-01",
|
||||||
|
updatedTime: "2022-01-01",
|
||||||
|
status: "正常",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const columns: ProColumns<AliOssConfigItem>[] = [
|
||||||
|
{
|
||||||
|
dataIndex: "index",
|
||||||
|
valueType: "indexBorder",
|
||||||
|
width: 48,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ID",
|
||||||
|
dataIndex: "id",
|
||||||
|
copyable: true,
|
||||||
|
ellipsis: true,
|
||||||
|
tooltip: "Id",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "存储桶",
|
||||||
|
dataIndex: "bucketName",
|
||||||
|
tooltip: "bucketName",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "用户名",
|
||||||
|
dataIndex: "userName",
|
||||||
|
tooltip: "userName",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密码",
|
||||||
|
dataIndex: "password",
|
||||||
|
tooltip: "password",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "状态",
|
||||||
|
dataIndex: "status",
|
||||||
|
search: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "创建时间",
|
||||||
|
dataIndex: "createdTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "更新时间",
|
||||||
|
dataIndex: "updatedTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
valueType: "option",
|
||||||
|
key: "option",
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-expect-error
|
||||||
|
render: (text, record, _, action) => [
|
||||||
|
<a
|
||||||
|
key="editable"
|
||||||
|
onClick={() => {
|
||||||
|
action?.startEditable?.(record.id);
|
||||||
|
}}>
|
||||||
|
编辑
|
||||||
|
</a>,
|
||||||
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
|
查看
|
||||||
|
</a>,
|
||||||
|
<TableDropdown
|
||||||
|
key="actionGroup"
|
||||||
|
onSelect={() => action?.reload()}
|
||||||
|
menus={[
|
||||||
|
{ key: "copy", name: "复制" },
|
||||||
|
{ key: "delete", name: "删除" },
|
||||||
|
]}
|
||||||
|
/>,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
const UpSettings: React.FC = () => {
|
const UpSettings: React.FC = () => {
|
||||||
return <>又拍云设置</>;
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const showDrawer = () => {
|
||||||
|
setOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClose = () => {
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
const AddUpOssConfigDrawer = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Drawer
|
||||||
|
title="创建连接配置"
|
||||||
|
width={720}
|
||||||
|
onClose={onClose}
|
||||||
|
open={open}
|
||||||
|
styles={{
|
||||||
|
body: {
|
||||||
|
paddingBottom: 80,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
extra={
|
||||||
|
<Space>
|
||||||
|
<Button onClick={onClose}>取消</Button>
|
||||||
|
<Button onClick={onClose} type="primary">
|
||||||
|
提交
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
}>
|
||||||
|
<Form layout="vertical">
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="bucketName"
|
||||||
|
label="存储桶"
|
||||||
|
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
||||||
|
<Input placeholder="请输入存储桶！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="userName"
|
||||||
|
label="用户名"
|
||||||
|
rules={[{ required: true, message: "请输入用户名!" }]}>
|
||||||
|
<Input placeholder="请输入用户名！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="password"
|
||||||
|
label="密码"
|
||||||
|
rules={[{ required: true, message: "请输入密码!" }]}>
|
||||||
|
<Input placeholder="请输入密码！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</Drawer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ProTable<AliOssConfigItem>
|
||||||
|
columns={columns}
|
||||||
|
dataSource={data}
|
||||||
|
actionRef={actionRef}
|
||||||
|
cardBordered={true}
|
||||||
|
editable={{
|
||||||
|
type: "multiple",
|
||||||
|
}}
|
||||||
|
columnsState={{
|
||||||
|
persistenceKey: "pro-table-singe-demos",
|
||||||
|
persistenceType: "localStorage",
|
||||||
|
defaultValue: {
|
||||||
|
option: { fixed: "right", disable: true },
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
search={false}
|
||||||
|
options={{
|
||||||
|
setting: {
|
||||||
|
listsHeight: 400,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
pagination={{
|
||||||
|
pageSize: 5,
|
||||||
|
}}
|
||||||
|
dateFormatter="string"
|
||||||
|
headerTitle="又拍云USS配置"
|
||||||
|
bordered={false}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="button"
|
||||||
|
icon={<PlusOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
showDrawer();
|
||||||
|
}}
|
||||||
|
type="primary">
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<AddUpOssConfigDrawer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default UpSettings;
|
export default UpSettings;
|
||||||
|
|||||||
@@ -1,8 +1,242 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
|
import React, { useRef, useState } from "react";
|
||||||
|
|
||||||
|
type AliOssConfigItem = {
|
||||||
|
id: number;
|
||||||
|
userId: number;
|
||||||
|
endpoint: string;
|
||||||
|
bucketName: string;
|
||||||
|
accessKey: string;
|
||||||
|
secretKey: string;
|
||||||
|
createdTime: string;
|
||||||
|
updatedTime: string;
|
||||||
|
status: string;
|
||||||
|
};
|
||||||
|
const data: AliOssConfigItem[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
userId: 1,
|
||||||
|
endpoint: "https://oss.aliyuncs.com",
|
||||||
|
bucketName: "https://oss.aliyuncs.com",
|
||||||
|
accessKey: "LTAI5tG3",
|
||||||
|
secretKey: "G3",
|
||||||
|
createdTime: "2022-01-01",
|
||||||
|
updatedTime: "2022-01-01",
|
||||||
|
status: "正常",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const columns: ProColumns<AliOssConfigItem>[] = [
|
||||||
|
{
|
||||||
|
dataIndex: "index",
|
||||||
|
valueType: "indexBorder",
|
||||||
|
width: 48,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ID",
|
||||||
|
dataIndex: "id",
|
||||||
|
copyable: true,
|
||||||
|
ellipsis: true,
|
||||||
|
tooltip: "Id",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "服务地址",
|
||||||
|
dataIndex: "endpoint",
|
||||||
|
tooltip: "endpoint",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "存储桶",
|
||||||
|
dataIndex: "bucketName",
|
||||||
|
tooltip: "bucketName",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥ID",
|
||||||
|
dataIndex: "accessKey",
|
||||||
|
tooltip: "accessKey",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "密钥值",
|
||||||
|
dataIndex: "secretKey",
|
||||||
|
tooltip: "secretKey",
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
disable: true,
|
||||||
|
title: "状态",
|
||||||
|
dataIndex: "status",
|
||||||
|
search: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "创建时间",
|
||||||
|
dataIndex: "createdTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "更新时间",
|
||||||
|
dataIndex: "updatedTime",
|
||||||
|
valueType: "dateTime",
|
||||||
|
sorter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
valueType: "option",
|
||||||
|
key: "option",
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-expect-error
|
||||||
|
render: (text, record, _, action) => [
|
||||||
|
<a
|
||||||
|
key="editable"
|
||||||
|
onClick={() => {
|
||||||
|
action?.startEditable?.(record.id);
|
||||||
|
}}>
|
||||||
|
编辑
|
||||||
|
</a>,
|
||||||
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
|
查看
|
||||||
|
</a>,
|
||||||
|
<TableDropdown
|
||||||
|
key="actionGroup"
|
||||||
|
onSelect={() => action?.reload()}
|
||||||
|
menus={[
|
||||||
|
{ key: "copy", name: "复制" },
|
||||||
|
{ key: "delete", name: "删除" },
|
||||||
|
]}
|
||||||
|
/>,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
const WangyiSettings: React.FC = () => {
|
const WangyiSettings: React.FC = () => {
|
||||||
return <>网易云设置</>;
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const showDrawer = () => {
|
||||||
|
setOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClose = () => {
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
const AddWangyiOssConfigDrawer = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Drawer
|
||||||
|
title="创建连接配置"
|
||||||
|
width={720}
|
||||||
|
onClose={onClose}
|
||||||
|
open={open}
|
||||||
|
styles={{
|
||||||
|
body: {
|
||||||
|
paddingBottom: 80,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
extra={
|
||||||
|
<Space>
|
||||||
|
<Button onClick={onClose}>取消</Button>
|
||||||
|
<Button onClick={onClose} type="primary">
|
||||||
|
提交
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
}>
|
||||||
|
<Form layout="vertical">
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="endpoint"
|
||||||
|
label="服务地址"
|
||||||
|
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
||||||
|
<Input placeholder="请输入服务地址！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="bucketName"
|
||||||
|
label="存储桶"
|
||||||
|
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
||||||
|
<Input placeholder="请输入存储桶！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="accessKey"
|
||||||
|
label="密钥ID"
|
||||||
|
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
||||||
|
<Input placeholder="请输入密钥ID！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
name="secretKey"
|
||||||
|
label="密钥值"
|
||||||
|
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
||||||
|
<Input placeholder="请输入密钥值！" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</Drawer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ProTable<AliOssConfigItem>
|
||||||
|
columns={columns}
|
||||||
|
dataSource={data}
|
||||||
|
actionRef={actionRef}
|
||||||
|
cardBordered={true}
|
||||||
|
editable={{
|
||||||
|
type: "multiple",
|
||||||
|
}}
|
||||||
|
columnsState={{
|
||||||
|
persistenceKey: "pro-table-singe-demos",
|
||||||
|
persistenceType: "localStorage",
|
||||||
|
defaultValue: {
|
||||||
|
option: { fixed: "right", disable: true },
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
search={false}
|
||||||
|
options={{
|
||||||
|
setting: {
|
||||||
|
listsHeight: 400,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
pagination={{
|
||||||
|
pageSize: 5,
|
||||||
|
}}
|
||||||
|
dateFormatter="string"
|
||||||
|
headerTitle="阿里云OSS配置"
|
||||||
|
bordered={false}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="button"
|
||||||
|
icon={<PlusOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
showDrawer();
|
||||||
|
}}
|
||||||
|
type="primary">
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<AddWangyiOssConfigDrawer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default WangyiSettings;
|
export default WangyiSettings;
|
||||||
|
|||||||
@@ -1,3 +1,7 @@
|
|||||||
|
|
||||||
|
.settings_container{
|
||||||
|
height: 75vh;
|
||||||
|
}
|
||||||
.settings_header{
|
.settings_header{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|||||||
@@ -11,8 +11,8 @@ export default () => {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
return (
|
return (
|
||||||
<>
|
<div className={styles.settings_container}>
|
||||||
<ProCard bordered={false}>
|
<ProCard bordered={false} boxShadow>
|
||||||
<div className={styles.settings_header}>
|
<div className={styles.settings_header}>
|
||||||
<Select
|
<Select
|
||||||
size="large"
|
size="large"
|
||||||
@@ -55,10 +55,10 @@ export default () => {
|
|||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
</ProCard>
|
</ProCard>
|
||||||
<Card style={{ marginTop: 20 }}>
|
<ProCard style={{ marginTop: 20, height: "60vh" }} bordered boxShadow>
|
||||||
{location.pathname === "/main/setting" || location.pathname === "/main/setting/" ? (
|
{location.pathname === "/main/setting" || location.pathname === "/main/setting/" ? (
|
||||||
<>
|
<>
|
||||||
<Empty />
|
<Empty description={"请选择存储商"} />
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
@@ -67,7 +67,7 @@ export default () => {
|
|||||||
</Suspense>
|
</Suspense>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</Card>
|
</ProCard>
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -34,7 +34,7 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "main/setting",
|
path: "main/setting",
|
||||||
name: "配置",
|
name: "存储商",
|
||||||
icon: storage_setting,
|
icon: storage_setting,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -31,7 +31,7 @@ export default function Layout() {
|
|||||||
defaultOpenAll: false,
|
defaultOpenAll: false,
|
||||||
hideMenuWhenCollapsed: false,
|
hideMenuWhenCollapsed: false,
|
||||||
type: "group",
|
type: "group",
|
||||||
collapsedShowTitle: true,
|
collapsedShowTitle: false,
|
||||||
}}
|
}}
|
||||||
title={"五味子云存储"}
|
title={"五味子云存储"}
|
||||||
siderWidth={216}
|
siderWidth={216}
|
||||||
|
|||||||
Reference in New Issue
Block a user