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 */
|
||||
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 = () => {
|
||||
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;
|
||||
|
||||
@@ -1,8 +1,261 @@
|
||||
/** @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 = () => {
|
||||
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;
|
||||
|
||||
@@ -1,8 +1,290 @@
|
||||
/** @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 = () => {
|
||||
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;
|
||||
|
||||
@@ -1,8 +1,242 @@
|
||||
/** @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";
|
||||
const HuaweiSettings: React.FC = () => {
|
||||
return <>华为COS设置</>;
|
||||
type AliOssConfigItem = {
|
||||
id: number;
|
||||
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 */
|
||||
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 = () => {
|
||||
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;
|
||||
|
||||
@@ -1,8 +1,278 @@
|
||||
/** @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 = () => {
|
||||
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;
|
||||
|
||||
@@ -1,8 +1,225 @@
|
||||
/** @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 = () => {
|
||||
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;
|
||||
|
||||
@@ -1,8 +1,225 @@
|
||||
/** @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 = () => {
|
||||
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;
|
||||
|
||||
@@ -1,8 +1,254 @@
|
||||
/** @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 = () => {
|
||||
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;
|
||||
|
||||
@@ -1,8 +1,225 @@
|
||||
/** @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";
|
||||
const AliSettings: React.FC = () => {
|
||||
return <>七牛设置</>;
|
||||
type AliOssConfigItem = {
|
||||
id: number;
|
||||
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 */
|
||||
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 = () => {
|
||||
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;
|
||||
|
||||
@@ -1,8 +1,242 @@
|
||||
/** @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 = () => {
|
||||
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;
|
||||
|
||||
@@ -1,8 +1,225 @@
|
||||
/** @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 = () => {
|
||||
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;
|
||||
|
||||
@@ -1,8 +1,242 @@
|
||||
/** @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 = () => {
|
||||
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;
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
|
||||
.settings_container{
|
||||
height: 75vh;
|
||||
}
|
||||
.settings_header{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@@ -11,8 +11,8 @@ export default () => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
return (
|
||||
<>
|
||||
<ProCard bordered={false}>
|
||||
<div className={styles.settings_container}>
|
||||
<ProCard bordered={false} boxShadow>
|
||||
<div className={styles.settings_header}>
|
||||
<Select
|
||||
size="large"
|
||||
@@ -55,10 +55,10 @@ export default () => {
|
||||
</Select>
|
||||
</div>
|
||||
</ProCard>
|
||||
<Card style={{ marginTop: 20 }}>
|
||||
<ProCard style={{ marginTop: 20, height: "60vh" }} bordered boxShadow>
|
||||
{location.pathname === "/main/setting" || location.pathname === "/main/setting/" ? (
|
||||
<>
|
||||
<Empty />
|
||||
<Empty description={"请选择存储商"} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
@@ -67,7 +67,7 @@ export default () => {
|
||||
</Suspense>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
</>
|
||||
</ProCard>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -34,7 +34,7 @@ export default {
|
||||
},
|
||||
{
|
||||
path: "main/setting",
|
||||
name: "配置",
|
||||
name: "存储商",
|
||||
icon: storage_setting,
|
||||
},
|
||||
{
|
||||
|
||||
@@ -31,7 +31,7 @@ export default function Layout() {
|
||||
defaultOpenAll: false,
|
||||
hideMenuWhenCollapsed: false,
|
||||
type: "group",
|
||||
collapsedShowTitle: true,
|
||||
collapsedShowTitle: false,
|
||||
}}
|
||||
title={"五味子云存储"}
|
||||
siderWidth={216}
|
||||
|
||||
Reference in New Issue
Block a user