feat: 界面调整
This commit is contained in:
landaiqing
@@ -44,6 +44,12 @@ module.exports = {
|
||||
"@typescript-eslint/explicit-function-return-type": 0, // 禁止函数必须要定义返回类型
|
||||
"react/display-name": "off",
|
||||
"@typescript-eslint/no-explicit-any": ["off"],
|
||||
"@typescript-eslint/no-var-requires": ["off"],
|
||||
"@typescript-eslint/no-use-before-define": ["off"],
|
||||
"@typescript-eslint/no-empty-function": ["off"],
|
||||
"@typescript-eslint/no-empty-interface": ["off"],
|
||||
"@typescript-eslint/no-unused-vars": ["off"],
|
||||
"@typescript-eslint/no-non-null-assertion": ["off"],
|
||||
"no-control-regex": "off",
|
||||
"no-eval": 0
|
||||
}
|
||||
|
||||
40
pnpm-lock.yaml
generated
40
pnpm-lock.yaml
generated
@@ -11,6 +11,9 @@ dependencies:
|
||||
'@ant-design/pro-components':
|
||||
specifier: ^2.7.10
|
||||
version: 2.7.10(antd@5.19.1)(rc-field-form@1.44.0)(react-dom@18.3.1)(react@18.3.1)
|
||||
'@ant-design/pro-provider':
|
||||
specifier: ^2.14.7
|
||||
version: 2.14.7(antd@5.19.1)(react-dom@18.3.1)(react@18.3.1)
|
||||
'@ant-design/use-emotion-css':
|
||||
specifier: ^1.0.4
|
||||
version: 1.0.4(antd@5.19.1)(react-dom@18.3.1)(react@18.3.1)
|
||||
@@ -191,23 +194,6 @@ packages:
|
||||
'@ctrl/tinycolor': 3.6.1
|
||||
dev: false
|
||||
|
||||
/@ant-design/cssinjs@1.20.0(react-dom@18.3.1)(react@18.3.1):
|
||||
resolution: {integrity: sha512-uG3iWzJxgNkADdZmc6W0Ci3iQAUOvLMcM8SnnmWq3r6JeocACft4ChnY/YWvI2Y+rG/68QBla/O+udke1yH3vg==}
|
||||
peerDependencies:
|
||||
react: '>=16.0.0'
|
||||
react-dom: '>=16.0.0'
|
||||
dependencies:
|
||||
'@babel/runtime': 7.24.6
|
||||
'@emotion/hash': 0.8.0
|
||||
'@emotion/unitless': 0.7.5
|
||||
classnames: 2.5.1
|
||||
csstype: 3.1.3
|
||||
rc-util: 5.41.0(react-dom@18.3.1)(react@18.3.1)
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
stylis: 4.3.2
|
||||
dev: false
|
||||
|
||||
/@ant-design/cssinjs@1.21.0(react-dom@18.3.1)(react@18.3.1):
|
||||
resolution: {integrity: sha512-gIilraPl+9EoKdYxnupxjHB/Q6IHNRjEXszKbDxZdsgv4sAZ9pjkCq8yanDWNvyfjp4leir2OVAJm0vxwKK8YA==}
|
||||
peerDependencies:
|
||||
@@ -425,11 +411,11 @@ packages:
|
||||
react: '>=17.0.0'
|
||||
react-dom: '>=17.0.0'
|
||||
dependencies:
|
||||
'@ant-design/cssinjs': 1.20.0(react-dom@18.3.1)(react@18.3.1)
|
||||
'@babel/runtime': 7.24.6
|
||||
'@ant-design/cssinjs': 1.21.0(react-dom@18.3.1)(react@18.3.1)
|
||||
'@babel/runtime': 7.24.7
|
||||
'@ctrl/tinycolor': 3.6.1
|
||||
antd: 5.19.1(react-dom@18.3.1)(react@18.3.1)
|
||||
rc-util: 5.41.0(react-dom@18.3.1)(react@18.3.1)
|
||||
rc-util: 5.43.0(react-dom@18.3.1)(react@18.3.1)
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
swr: 2.2.5(react@18.3.1)
|
||||
@@ -2493,7 +2479,7 @@ packages:
|
||||
resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
|
||||
dependencies:
|
||||
'@babel/helper-module-imports': 7.24.6
|
||||
'@babel/runtime': 7.24.6
|
||||
'@babel/runtime': 7.24.7
|
||||
'@emotion/hash': 0.9.1
|
||||
'@emotion/memoize': 0.8.1
|
||||
'@emotion/serialize': 1.1.4
|
||||
@@ -4315,7 +4301,7 @@ packages:
|
||||
resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
|
||||
engines: {node: '>=10', npm: '>=6'}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.24.6
|
||||
'@babel/runtime': 7.24.7
|
||||
cosmiconfig: 7.1.0
|
||||
resolve: 1.22.8
|
||||
dev: false
|
||||
@@ -5869,7 +5855,7 @@ packages:
|
||||
/i18next@23.11.5:
|
||||
resolution: {integrity: sha512-41pvpVbW9rhZPk5xjCX2TPJi2861LEig/YRhUkY+1FQ2IQPS0bKUDYnEqY8XPPbB48h1uIwLnP9iiEfuSl20CA==}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.24.6
|
||||
'@babel/runtime': 7.24.7
|
||||
dev: false
|
||||
|
||||
/iconv-lite@0.6.3:
|
||||
@@ -7838,9 +7824,9 @@ packages:
|
||||
react: '>=16.9.0'
|
||||
react-dom: '>=16.9.0'
|
||||
dependencies:
|
||||
'@babel/runtime': 7.24.6
|
||||
'@babel/runtime': 7.24.7
|
||||
classnames: 2.5.1
|
||||
rc-util: 5.41.0(react-dom@18.3.1)(react@18.3.1)
|
||||
rc-util: 5.43.0(react-dom@18.3.1)(react@18.3.1)
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
resize-observer-polyfill: 1.5.1
|
||||
@@ -8056,7 +8042,7 @@ packages:
|
||||
react: '>=16.9.0'
|
||||
react-dom: '>=16.9.0'
|
||||
dependencies:
|
||||
'@babel/runtime': 7.24.6
|
||||
'@babel/runtime': 7.24.7
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
react-is: 18.3.1
|
||||
@@ -8229,7 +8215,7 @@ packages:
|
||||
/regenerator-transform@0.15.2:
|
||||
resolution: {integrity: sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.24.6
|
||||
'@babel/runtime': 7.24.7
|
||||
dev: false
|
||||
|
||||
/regexp.prototype.flags@1.5.2:
|
||||
|
||||
BIN
src/assets/images/favorites.png
Normal file
BIN
src/assets/images/favorites.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
@@ -1,33 +1,40 @@
|
||||
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
|
||||
// 滚动条整体部分
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
// 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
|
||||
&::-webkit-scrollbar-button {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(144, 147, 153, 0.3);
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
// 边角，即两个滚动条的交汇处
|
||||
&::-webkit-scrollbar-corner {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
|
||||
&::-webkit-resizer {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: url("@/assets/images/background.png");
|
||||
background-size: cover;
|
||||
}
|
||||
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
|
||||
// 滚动条整体部分
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
// 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
|
||||
&::-webkit-scrollbar-button {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(144, 147, 153, 0.3);
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
// 边角，即两个滚动条的交汇处
|
||||
&::-webkit-scrollbar-corner {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
|
||||
&::-webkit-resizer {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: url("@/assets/images/background.png");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.ant-pro-page-container-children-container-no-header {
|
||||
padding-block-start: 10px !important;
|
||||
}
|
||||
.ant-pro-page-container-children-container {
|
||||
padding-inline: 10px !important;
|
||||
}
|
||||
|
||||
@@ -14,8 +14,8 @@
|
||||
|
||||
}
|
||||
.div_checkCardArea{
|
||||
height: 65vh;
|
||||
max-height: 65vh;
|
||||
height: 68vh;
|
||||
max-height: 68vh;
|
||||
overflow-y:scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@@ -1,13 +1,17 @@
|
||||
/** @format */
|
||||
|
||||
import React from "react";
|
||||
import { message, Upload } from "antd";
|
||||
import { InboxOutlined } from "@ant-design/icons";
|
||||
import { Avatar, Card, Flex, Input, message, Select, Upload } from "antd";
|
||||
import { CloudUploadOutlined } from "@ant-design/icons";
|
||||
import { ProCard } from "@ant-design/pro-components";
|
||||
import selectOptions from "@/components/Main/Settings/settings.ts";
|
||||
import StorageIcon from "@/constant/stroage-icon.ts";
|
||||
|
||||
const { Dragger } = Upload;
|
||||
const props: any = {
|
||||
name: "file",
|
||||
multiple: true,
|
||||
directory: true,
|
||||
action: "https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload",
|
||||
onChange(info) {
|
||||
const { status } = info.file;
|
||||
@@ -27,13 +31,106 @@ const props: any = {
|
||||
const FileUpload: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<Dragger {...props}>
|
||||
<p className="ant-upload-drag-icon">
|
||||
<InboxOutlined />
|
||||
</p>
|
||||
<p className="ant-upload-text">单击或拖动文件到此区域进行上传</p>
|
||||
<p className="ant-upload-hint">支持单次或批量上传。</p>
|
||||
</Dragger>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<ProCard bordered={false} boxShadow={false}>
|
||||
<Flex vertical={false}>
|
||||
<Select
|
||||
size="large"
|
||||
status="warning"
|
||||
style={{
|
||||
width: "30%",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
}}
|
||||
showSearch={true}
|
||||
allowClear={true}
|
||||
notFoundContent={"未找到，请先配置存储商"}
|
||||
placeholder={"请选择存储商"}>
|
||||
{selectOptions.map((storage: any, index: any) => {
|
||||
return (
|
||||
<Select.Option value={storage.value} key={index}>
|
||||
<Card
|
||||
bordered={false}
|
||||
style={{
|
||||
height: 35,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
flexDirection: "row",
|
||||
}}
|
||||
size={"small"}>
|
||||
<Avatar
|
||||
src={StorageIcon[storage.value]}
|
||||
size={"small"}
|
||||
/>{" "}
|
||||
<span
|
||||
style={{
|
||||
marginLeft: "10px",
|
||||
fontWeight: "bolder",
|
||||
}}>
|
||||
{storage.name}
|
||||
</span>
|
||||
</Card>
|
||||
</Select.Option>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
<Select
|
||||
size="large"
|
||||
status="warning"
|
||||
style={{
|
||||
width: "30%",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginLeft: "10px",
|
||||
}}
|
||||
showSearch={true}
|
||||
allowClear={true}
|
||||
notFoundContent={"未找到，请先配置存储商"}
|
||||
placeholder={"请选择存储桶"}>
|
||||
{selectOptions.map((storage: any, index: any) => {
|
||||
return (
|
||||
<Select.Option value={storage.value} key={index}>
|
||||
<Card
|
||||
bordered={false}
|
||||
style={{
|
||||
height: 35,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
flexDirection: "row",
|
||||
}}
|
||||
size={"small"}>
|
||||
<Avatar
|
||||
src={StorageIcon["bucket"]}
|
||||
size={"small"}
|
||||
shape={"square"}
|
||||
/>{" "}
|
||||
<span
|
||||
style={{
|
||||
marginLeft: "10px",
|
||||
fontWeight: "bolder",
|
||||
}}>
|
||||
{storage.name}
|
||||
</span>
|
||||
</Card>
|
||||
</Select.Option>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
<Input placeholder={"请输入路径/默认当前打开的路径"} style={{ marginLeft: 10,width: "40%" }}></Input>
|
||||
</Flex>
|
||||
</ProCard>
|
||||
</Flex>
|
||||
<ProCard>
|
||||
<Dragger {...props}>
|
||||
<p className="ant-upload-drag-icon">
|
||||
<CloudUploadOutlined />
|
||||
</p>
|
||||
<p className="ant-upload-text">单击或拖动文件到此区域进行上传</p>
|
||||
<p className="ant-upload-hint">支持单次或批量上传。</p>
|
||||
</Dragger>
|
||||
</ProCard>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,48 +1,47 @@
|
||||
.file_main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.file_content_left {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.file_content_right {
|
||||
width: 73%;
|
||||
height: 75vh;
|
||||
|
||||
.file_right_content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
margin-top: 20px;
|
||||
|
||||
.file_card:hover {
|
||||
background-color: rgba(16, 15, 15, 0.08);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.file_right_header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file_name {
|
||||
width: 65px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
-o-text-overflow: ellipsis;
|
||||
}
|
||||
.file_main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.file_content_left {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.file_content_right {
|
||||
width: 73%;
|
||||
height: 75vh;
|
||||
|
||||
.file_right_content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
margin-top: 10px;
|
||||
|
||||
.file_card:hover {
|
||||
background-color: rgba(16, 15, 15, 0.08);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.file_right_header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file_name {
|
||||
width: 65px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
-o-text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@@ -4,12 +4,13 @@ import { CheckCard, ProCard } from "@ant-design/pro-components";
|
||||
import styles from "./index.module.less";
|
||||
import {
|
||||
Avatar,
|
||||
Breadcrumb,
|
||||
Button,
|
||||
Card,
|
||||
Divider,
|
||||
Dropdown,
|
||||
Flex,
|
||||
FloatButton,
|
||||
Input,
|
||||
message,
|
||||
Modal,
|
||||
Select,
|
||||
@@ -18,7 +19,20 @@ import {
|
||||
import ali from "@/assets/icons/aliyun.svg";
|
||||
import bucket from "@/assets/icons/bucket.svg";
|
||||
import tencent from "@/assets/icons/tencent.svg";
|
||||
import { CloudUploadOutlined, EllipsisOutlined, LeftOutlined } from "@ant-design/icons";
|
||||
import {
|
||||
CloudUploadOutlined,
|
||||
CopyOutlined,
|
||||
DeleteOutlined,
|
||||
DownloadOutlined,
|
||||
EllipsisOutlined,
|
||||
EyeOutlined,
|
||||
LeftOutlined,
|
||||
QrcodeOutlined,
|
||||
RedoOutlined,
|
||||
ScissorOutlined,
|
||||
SearchOutlined,
|
||||
SnippetsOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import standard_dir from "@/assets/icons/standard_directory.svg";
|
||||
import useStore from "@/utils/store/useStore.tsx";
|
||||
import { observer } from "mobx-react";
|
||||
@@ -103,11 +117,16 @@ const File: FunctionComponent = () => {
|
||||
<>
|
||||
<div className={styles.file_main}>
|
||||
<div className={styles.file_content_left}>
|
||||
<ProCard bordered boxShadow style={{ height: "75vh" }}>
|
||||
<ProCard bordered boxShadow style={{ height: "83vh" }}>
|
||||
<Select
|
||||
size="large"
|
||||
status="warning"
|
||||
style={{ width: "100%" }}
|
||||
style={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
}}
|
||||
showSearch={true}
|
||||
allowClear={true}
|
||||
notFoundContent={"未找到，请先配置存储商"}
|
||||
@@ -220,17 +239,87 @@ const File: FunctionComponent = () => {
|
||||
</ProCard>
|
||||
</div>
|
||||
<div className={styles.file_content_right}>
|
||||
<ProCard bordered boxShadow style={{ height: "75vh" }}>
|
||||
<ProCard bordered boxShadow style={{ height: "83vh" }}>
|
||||
<div className={styles.file_right_header}>
|
||||
<Button
|
||||
shape="circle"
|
||||
icon={<LeftOutlined />}
|
||||
onClick={() => {
|
||||
setFiles(dataList);
|
||||
store.clearFilePath();
|
||||
}}
|
||||
/>
|
||||
<Breadcrumb items={store.getFilePath()} style={{ marginLeft: 15 }} />
|
||||
<Flex vertical={false} align={"center"} justify={"flex-start"}>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<Button
|
||||
shape="circle"
|
||||
icon={<LeftOutlined />}
|
||||
onClick={() => {
|
||||
setFiles(dataList);
|
||||
store.clearFilePath();
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
style={{ marginLeft: 20 }}
|
||||
shape="circle"
|
||||
icon={<RedoOutlined />}
|
||||
/>
|
||||
</Flex>
|
||||
<Input
|
||||
value={store.getFilePath().join("/")}
|
||||
style={{ marginLeft: 15}}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex
|
||||
vertical={false}
|
||||
align={"center"}
|
||||
justify={"flex-start"}
|
||||
style={{ marginTop: 10 }}>
|
||||
<Tooltip title="删除" placement={"bottom"}>
|
||||
<Button shape="circle" icon={<DeleteOutlined />} />
|
||||
</Tooltip>
|
||||
<Tooltip title="下载" placement={"bottom"}>
|
||||
<Button
|
||||
style={{ marginLeft: 20 }}
|
||||
shape="circle"
|
||||
icon={<DownloadOutlined />}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="预览" placement={"bottom"}>
|
||||
<Button
|
||||
style={{ marginLeft: 20 }}
|
||||
shape="circle"
|
||||
icon={<EyeOutlined />}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="扫码下载" placement={"bottom"}>
|
||||
<Button
|
||||
style={{ marginLeft: 20 }}
|
||||
shape="circle"
|
||||
icon={<QrcodeOutlined />}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="粘贴" placement={"bottom"}>
|
||||
<Button
|
||||
style={{ marginLeft: 20 }}
|
||||
shape="circle"
|
||||
icon={<SnippetsOutlined />}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="剪切" placement={"bottom"}>
|
||||
<Button
|
||||
style={{ marginLeft: 20 }}
|
||||
shape="circle"
|
||||
icon={<ScissorOutlined />}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="复制" placement={"bottom"}>
|
||||
<Button
|
||||
style={{ marginLeft: 20 }}
|
||||
shape="circle"
|
||||
icon={<CopyOutlined />}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="搜索" placement={"bottom"}>
|
||||
<Button
|
||||
style={{ marginLeft: 20 }}
|
||||
shape="circle"
|
||||
icon={<SearchOutlined />}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
</div>
|
||||
|
||||
<div className={styles.file_right_content}>
|
||||
@@ -259,9 +348,7 @@ const File: FunctionComponent = () => {
|
||||
<div
|
||||
style={{ marginLeft: 10 }}
|
||||
onDoubleClick={() => {
|
||||
store.setFilePath({
|
||||
title: file.name,
|
||||
});
|
||||
store.setFilePath(file.name);
|
||||
setFiles(fileList);
|
||||
}}>
|
||||
<CheckCard
|
||||
|
||||
@@ -1,224 +1,228 @@
|
||||
/** @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: "删除" },
|
||||
]}
|
||||
/>,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const AliSettings: React.FC = () => {
|
||||
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;
|
||||
/** @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: any, record: any, _, action: any) => [
|
||||
<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 AliSettings: React.FC = () => {
|
||||
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 (
|
||||
<>
|
||||
<div style={{ height: "65vh" }}>
|
||||
<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,
|
||||
} as any
|
||||
}
|
||||
dateFormatter="string"
|
||||
headerTitle="阿里云OSS配置"
|
||||
bordered={false}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="button"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
showDrawer();
|
||||
}}
|
||||
type="primary">
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
<AddAliOssConfigDrawer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AliSettings;
|
||||
|
||||
@@ -1,261 +1,263 @@
|
||||
/** @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: "删除" },
|
||||
]}
|
||||
/>,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const AwsSettings: React.FC = () => {
|
||||
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;
|
||||
/** @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, { ReactNode, useRef, useState } from "react";
|
||||
|
||||
type AwsOssConfigItem = {
|
||||
id: number;
|
||||
userId: number;
|
||||
bucketName: string;
|
||||
accessKeyId: string;
|
||||
secretAccessKey: string;
|
||||
region: string;
|
||||
mode: string;
|
||||
createdTime: string;
|
||||
updatedTime: string;
|
||||
status: string;
|
||||
};
|
||||
const data: AwsOssConfigItem[] = [
|
||||
{
|
||||
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<AwsOssConfigItem>[] = [
|
||||
{
|
||||
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",
|
||||
render: (text: ReactNode, record: AwsOssConfigItem, _, action: any) => [
|
||||
<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 AwsSettings: React.FC = () => {
|
||||
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 (
|
||||
<>
|
||||
<div style={{ height: "65vh" }}>
|
||||
<ProTable<AwsOssConfigItem>
|
||||
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,
|
||||
} as any
|
||||
}
|
||||
dateFormatter="string"
|
||||
headerTitle="亚马逊S3配置"
|
||||
bordered={false}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="button"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
showDrawer();
|
||||
}}
|
||||
type="primary">
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
<AddAwsOssConfigDrawer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AwsSettings;
|
||||
|
||||
@@ -1,290 +1,292 @@
|
||||
/** @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: "删除" },
|
||||
]}
|
||||
/>,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const BaiduSettings: React.FC = () => {
|
||||
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;
|
||||
/** @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, { ReactNode, useRef, useState } from "react";
|
||||
|
||||
type BaiduOssConfigItem = {
|
||||
id: number;
|
||||
userId: number;
|
||||
endpoint: string;
|
||||
accessKeyId: string;
|
||||
accessKeySecret: string;
|
||||
created_time: string;
|
||||
updated_time: string;
|
||||
status: string;
|
||||
};
|
||||
const data: BaiduOssConfigItem[] = [
|
||||
{
|
||||
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<BaiduOssConfigItem>[] = [
|
||||
{
|
||||
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",
|
||||
render: (text: ReactNode, record: BaiduOssConfigItem, _, action: any) => [
|
||||
<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 BaiduSettings: React.FC = () => {
|
||||
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 (
|
||||
<>
|
||||
<div style={{ height: "65vh" }}>
|
||||
<ProTable<BaiduOssConfigItem>
|
||||
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,
|
||||
} as any
|
||||
}
|
||||
dateFormatter="string"
|
||||
headerTitle="百度云BOS配置"
|
||||
bordered={false}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="button"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
showDrawer();
|
||||
}}
|
||||
type="primary">
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
<AddBaiduOssConfigDrawer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BaiduSettings;
|
||||
|
||||
@@ -1,242 +1,246 @@
|
||||
/** @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;
|
||||
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 HuawaiSettings;
|
||||
/** @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, { ReactNode, useRef, useState } from "react";
|
||||
|
||||
type HuaweiOssConfigItem = {
|
||||
id: number;
|
||||
userId: number;
|
||||
bucketName: string;
|
||||
endpoint: string;
|
||||
accessKey: string;
|
||||
secretKey: string;
|
||||
createdTime: string;
|
||||
updatedTime: string;
|
||||
status: string;
|
||||
};
|
||||
const data: HuaweiOssConfigItem[] = [
|
||||
{
|
||||
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<HuaweiOssConfigItem>[] = [
|
||||
{
|
||||
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: ReactNode, record: HuaweiOssConfigItem, _: number, action: any) => [
|
||||
<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 (
|
||||
<>
|
||||
<div style={{ height: "65vh" }}>
|
||||
<ProTable<HuaweiOssConfigItem>
|
||||
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,
|
||||
} as any
|
||||
}
|
||||
dateFormatter="string"
|
||||
headerTitle="华为云OBS配置"
|
||||
bordered={false}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="button"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
showDrawer();
|
||||
}}
|
||||
type="primary">
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
<AddHuaweiOssConfigDrawer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HuawaiSettings;
|
||||
|
||||
@@ -1,244 +1,248 @@
|
||||
/** @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: "删除" },
|
||||
]}
|
||||
/>,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const JdSettings: React.FC = () => {
|
||||
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;
|
||||
/** @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, { ReactNode, useRef, useState } from "react";
|
||||
|
||||
type JdOssConfigItem = {
|
||||
id: number;
|
||||
userId: number;
|
||||
bucketName: number;
|
||||
endpoint: string;
|
||||
accessKey: string;
|
||||
secretKey: string;
|
||||
region: string;
|
||||
createdTime: string;
|
||||
updatedTime: string;
|
||||
status: string;
|
||||
};
|
||||
const data: JdOssConfigItem[] = [
|
||||
{
|
||||
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<JdOssConfigItem>[] = [
|
||||
{
|
||||
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: ReactNode, record: JdOssConfigItem, _: number, action: any) => [
|
||||
<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 JdSettings: React.FC = () => {
|
||||
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 (
|
||||
<>
|
||||
<div style={{ height: "65vh" }}>
|
||||
<ProTable<JdOssConfigItem>
|
||||
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,
|
||||
} as any
|
||||
}
|
||||
dateFormatter="string"
|
||||
headerTitle="京东云OSS配置"
|
||||
bordered={false}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="button"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
showDrawer();
|
||||
}}
|
||||
type="primary">
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
<AddJdOssConfigDrawer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default JdSettings;
|
||||
|
||||
@@ -1,278 +1,282 @@
|
||||
/** @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: "删除" },
|
||||
]}
|
||||
/>,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const JinshanSettings: React.FC = () => {
|
||||
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;
|
||||
/** @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, { ReactNode, useRef, useState } from "react";
|
||||
|
||||
type JinshanOssConfigItem = {
|
||||
id: number;
|
||||
userId: number;
|
||||
endpoint: string;
|
||||
bucketName: string;
|
||||
accessKeyId: string;
|
||||
accessKeySecret: string;
|
||||
region: string;
|
||||
securityToken: string;
|
||||
createdTime: string;
|
||||
updatedTime: string;
|
||||
status: string;
|
||||
};
|
||||
const data: JinshanOssConfigItem[] = [
|
||||
{
|
||||
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<JinshanOssConfigItem>[] = [
|
||||
{
|
||||
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: ReactNode, record: JinshanOssConfigItem, _: number, action: any) => [
|
||||
<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 JinshanSettings: React.FC = () => {
|
||||
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 (
|
||||
<>
|
||||
<div style={{ height: "65vh" }}>
|
||||
<ProTable<JinshanOssConfigItem>
|
||||
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,
|
||||
} as any
|
||||
}
|
||||
dateFormatter="string"
|
||||
headerTitle="金山OBS配置"
|
||||
bordered={false}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="button"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
showDrawer();
|
||||
}}
|
||||
type="primary">
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
<AddJinshanOssConfigDrawer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default JinshanSettings;
|
||||
|
||||
@@ -1,225 +1,229 @@
|
||||
/** @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: "删除" },
|
||||
]}
|
||||
/>,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const MinioSettings: React.FC = () => {
|
||||
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;
|
||||
/** @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, { ReactNode, useRef, useState } from "react";
|
||||
|
||||
type MinioOssConfigItem = {
|
||||
id: number;
|
||||
userId: number;
|
||||
endpoint: string;
|
||||
accessKey: string;
|
||||
secretKey: string;
|
||||
createdTime: string;
|
||||
updatedTime: string;
|
||||
status: string;
|
||||
};
|
||||
const data: MinioOssConfigItem[] = [
|
||||
{
|
||||
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<MinioOssConfigItem>[] = [
|
||||
{
|
||||
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: ReactNode, record: MinioOssConfigItem, _: number, action: any) => [
|
||||
<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 MinioSettings: React.FC = () => {
|
||||
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 (
|
||||
<>
|
||||
<div style={{ height: "65vh" }}>
|
||||
<ProTable<MinioOssConfigItem>
|
||||
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,
|
||||
} as any
|
||||
}
|
||||
dateFormatter="string"
|
||||
headerTitle="MinIO配置"
|
||||
bordered={false}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="button"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
showDrawer();
|
||||
}}
|
||||
type="primary">
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
<AddMinioOssConfigDrawer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MinioSettings;
|
||||
|
||||
@@ -1,225 +1,229 @@
|
||||
/** @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: "删除" },
|
||||
]}
|
||||
/>,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const PinanSettings: React.FC = () => {
|
||||
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;
|
||||
/** @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, { ReactNode, useRef, useState } from "react";
|
||||
|
||||
type PinanOssConfigItem = {
|
||||
id: number;
|
||||
userId: number;
|
||||
endpoint: string;
|
||||
accessKeyId: string;
|
||||
accessKeySecret: string;
|
||||
created_time: string;
|
||||
updated_time: string;
|
||||
status: string;
|
||||
};
|
||||
const data: PinanOssConfigItem[] = [
|
||||
{
|
||||
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<PinanOssConfigItem>[] = [
|
||||
{
|
||||
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: ReactNode, record: PinanOssConfigItem, _: number, action: any) => [
|
||||
<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 PinanSettings: React.FC = () => {
|
||||
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 (
|
||||
<>
|
||||
<div style={{ height: "65vh" }}>
|
||||
<ProTable<PinanOssConfigItem>
|
||||
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,
|
||||
} as any
|
||||
}
|
||||
dateFormatter="string"
|
||||
headerTitle="平安云OSS配置"
|
||||
bordered={false}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="button"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
showDrawer();
|
||||
}}
|
||||
type="primary">
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
<AddPinanOssConfigDrawer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PinanSettings;
|
||||
|
||||
@@ -1,254 +1,258 @@
|
||||
/** @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: "删除" },
|
||||
]}
|
||||
/>,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const QingyunSettings: React.FC = () => {
|
||||
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;
|
||||
/** @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, { ReactNode, useRef, useState } from "react";
|
||||
|
||||
type QingyunOssConfigItem = {
|
||||
id: number;
|
||||
userId: number;
|
||||
zone: string;
|
||||
endpoint: string;
|
||||
accessKey: string;
|
||||
bucketName: string;
|
||||
accessSecret: string;
|
||||
createdTime: string;
|
||||
updatedTime: string;
|
||||
status: string;
|
||||
};
|
||||
const data: QingyunOssConfigItem[] = [
|
||||
{
|
||||
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<QingyunOssConfigItem>[] = [
|
||||
{
|
||||
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: ReactNode, record: QingyunOssConfigItem, _: number, action: any) => [
|
||||
<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 QingyunSettings: React.FC = () => {
|
||||
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 (
|
||||
<>
|
||||
<div style={{ height: "65vh" }}>
|
||||
<ProTable<QingyunOssConfigItem>
|
||||
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,
|
||||
} as any
|
||||
}
|
||||
dateFormatter="string"
|
||||
headerTitle="青云OSS配置"
|
||||
bordered={false}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="button"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
showDrawer();
|
||||
}}
|
||||
type="primary">
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
<AddQingyunOssConfigDrawer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default QingyunSettings;
|
||||
|
||||
@@ -1,225 +1,229 @@
|
||||
/** @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;
|
||||
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 QiniuSettings;
|
||||
/** @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, { ReactNode, useRef, useState } from "react";
|
||||
|
||||
type QiniuOssConfigItem = {
|
||||
id: number;
|
||||
userId: number;
|
||||
bucketName: string;
|
||||
accessKey: string;
|
||||
secretKey: string;
|
||||
createdTime: string;
|
||||
updatedTime: string;
|
||||
status: string;
|
||||
};
|
||||
const data: QiniuOssConfigItem[] = [
|
||||
{
|
||||
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<QiniuOssConfigItem>[] = [
|
||||
{
|
||||
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: ReactNode, record: QiniuOssConfigItem, _: number, action: any) => [
|
||||
<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 (
|
||||
<>
|
||||
<div style={{ height: "65vh" }}>
|
||||
<ProTable<QiniuOssConfigItem>
|
||||
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,
|
||||
} as any
|
||||
}
|
||||
dateFormatter="string"
|
||||
headerTitle="七牛Kodo配置"
|
||||
bordered={false}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="button"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
showDrawer();
|
||||
}}
|
||||
type="primary">
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
<AddQiniuOssConfigDrawer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default QiniuSettings;
|
||||
|
||||
@@ -1,215 +1,219 @@
|
||||
/** @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: "删除" },
|
||||
]}
|
||||
/>,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const TencentSettings: React.FC = () => {
|
||||
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;
|
||||
/** @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, { ReactNode, useRef, useState } from "react";
|
||||
|
||||
type TencentOssConfigItem = {
|
||||
id: number;
|
||||
userId: number;
|
||||
bucketName: string;
|
||||
secretId: string;
|
||||
secretKey: string;
|
||||
createdTime: string;
|
||||
updatedTime: string;
|
||||
status: string;
|
||||
};
|
||||
const data: TencentOssConfigItem[] = [
|
||||
{
|
||||
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<TencentOssConfigItem>[] = [
|
||||
{
|
||||
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: ReactNode, record: TencentOssConfigItem, _: number, action: any) => [
|
||||
<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 TencentSettings: React.FC = () => {
|
||||
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 (
|
||||
<>
|
||||
<div style={{ height: "65vh" }}>
|
||||
<ProTable<TencentOssConfigItem>
|
||||
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,
|
||||
} as any
|
||||
}
|
||||
dateFormatter="string"
|
||||
headerTitle="腾讯云COS配置"
|
||||
bordered={false}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="button"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
showDrawer();
|
||||
}}
|
||||
type="primary">
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
<AddTencentOssConfigDrawer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TencentSettings;
|
||||
|
||||
@@ -1,242 +1,246 @@
|
||||
/** @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: "删除" },
|
||||
]}
|
||||
/>,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const UcloudSettings: React.FC = () => {
|
||||
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;
|
||||
/** @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, { ReactNode, useRef, useState } from "react";
|
||||
|
||||
type UcloudOssConfigItem = {
|
||||
id: number;
|
||||
userId: number;
|
||||
bucketName: string;
|
||||
publicKey: string;
|
||||
privateKey: string;
|
||||
customHost: string;
|
||||
createdTime: string;
|
||||
updatedTime: string;
|
||||
status: string;
|
||||
};
|
||||
const data: UcloudOssConfigItem[] = [
|
||||
{
|
||||
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<UcloudOssConfigItem>[] = [
|
||||
{
|
||||
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: ReactNode, record: UcloudOssConfigItem, _: number, action: any) => [
|
||||
<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 UcloudSettings: React.FC = () => {
|
||||
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 (
|
||||
<>
|
||||
<div style={{ height: "65vh" }}>
|
||||
<ProTable<UcloudOssConfigItem>
|
||||
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,
|
||||
} as any
|
||||
}
|
||||
dateFormatter="string"
|
||||
headerTitle="UCloud US3配置"
|
||||
bordered={false}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="button"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
showDrawer();
|
||||
}}
|
||||
type="primary">
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
<AddUcloudOssConfigDrawer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default UcloudSettings;
|
||||
|
||||
@@ -1,225 +1,229 @@
|
||||
/** @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: "删除" },
|
||||
]}
|
||||
/>,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const UpSettings: React.FC = () => {
|
||||
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;
|
||||
/** @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, { ReactNode, useRef, useState } from "react";
|
||||
|
||||
type UpOssConfigItem = {
|
||||
id: number;
|
||||
userId: number;
|
||||
bucketName: string;
|
||||
userName: string;
|
||||
password: string;
|
||||
createdTime: string;
|
||||
updatedTime: string;
|
||||
status: string;
|
||||
};
|
||||
const data: UpOssConfigItem[] = [
|
||||
{
|
||||
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<UpOssConfigItem>[] = [
|
||||
{
|
||||
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: ReactNode, record: UpOssConfigItem, _: number, action: any) => [
|
||||
<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 UpSettings: React.FC = () => {
|
||||
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 (
|
||||
<>
|
||||
<div style={{ height: "65vh" }}>
|
||||
<ProTable<UpOssConfigItem>
|
||||
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,
|
||||
} as any
|
||||
}
|
||||
dateFormatter="string"
|
||||
headerTitle="又拍云USS配置"
|
||||
bordered={false}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="button"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
showDrawer();
|
||||
}}
|
||||
type="primary">
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
<AddUpOssConfigDrawer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpSettings;
|
||||
|
||||
@@ -1,242 +1,246 @@
|
||||
/** @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: "删除" },
|
||||
]}
|
||||
/>,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const WangyiSettings: React.FC = () => {
|
||||
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;
|
||||
/** @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, { ReactNode, useRef, useState } from "react";
|
||||
|
||||
type WangyiOssConfigItem = {
|
||||
id: number;
|
||||
userId: number;
|
||||
endpoint: string;
|
||||
bucketName: string;
|
||||
accessKey: string;
|
||||
secretKey: string;
|
||||
createdTime: string;
|
||||
updatedTime: string;
|
||||
status: string;
|
||||
};
|
||||
const data: WangyiOssConfigItem[] = [
|
||||
{
|
||||
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<WangyiOssConfigItem>[] = [
|
||||
{
|
||||
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: ReactNode, record: WangyiOssConfigItem, _: number, action: any) => [
|
||||
<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 WangyiSettings: React.FC = () => {
|
||||
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 (
|
||||
<>
|
||||
<div style={{ height: "65vh" }}>
|
||||
<ProTable<WangyiOssConfigItem>
|
||||
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,
|
||||
} as any
|
||||
}
|
||||
dateFormatter="string"
|
||||
headerTitle="阿里云OSS配置"
|
||||
bordered={false}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="button"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
showDrawer();
|
||||
}}
|
||||
type="primary">
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
<AddWangyiOssConfigDrawer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WangyiSettings;
|
||||
|
||||
@@ -58,7 +58,7 @@ export default () => {
|
||||
<ProCard style={{ marginTop: 20, height: "100%" }} bordered boxShadow>
|
||||
{location.pathname === "/main/setting" || location.pathname === "/main/setting/" ? (
|
||||
<>
|
||||
<Empty description={"请选择存储商"} />
|
||||
<Empty description={"请选择存储商"} style={{ height: "65vh" }} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
|
||||
@@ -6,7 +6,7 @@ import { useNavigate } from "react-router-dom";
|
||||
import "aieditor/dist/style.css";
|
||||
import styles from "./index.module.less";
|
||||
import { ProCard } from "@ant-design/pro-components";
|
||||
import { Button, Card, Form, FormListFieldData, FormProps, Input, Select } from "antd";
|
||||
import { Button, Card, Flex, Form, FormListFieldData, FormProps, Input, Select } from "antd";
|
||||
import { CloseOutlined, LeftOutlined, MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
|
||||
import selectOptions from "@/components/Main/Settings/settings.ts";
|
||||
|
||||
@@ -34,7 +34,7 @@ const ShareAdd: React.FunctionComponent = () => {
|
||||
content: value.getHtml(),
|
||||
});
|
||||
},
|
||||
});
|
||||
} as any);
|
||||
return () => {
|
||||
aiEditor.destroy();
|
||||
};
|
||||
@@ -44,38 +44,66 @@ const ShareAdd: React.FunctionComponent = () => {
|
||||
<>
|
||||
<div className={styles.share_add_main}>
|
||||
<ProCard bordered={true}>
|
||||
<Button
|
||||
shape="circle"
|
||||
icon={<LeftOutlined />}
|
||||
onClick={() => {
|
||||
navigate("/main/share/list/1");
|
||||
}}
|
||||
/>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<Button
|
||||
shape="circle"
|
||||
icon={<LeftOutlined />}
|
||||
onClick={() => {
|
||||
navigate("/main/share/list/1");
|
||||
}}
|
||||
/>
|
||||
<Flex
|
||||
vertical={false}
|
||||
align={"center"}
|
||||
justify={"center"}
|
||||
style={{ width: "90%" }}>
|
||||
<h3>新增分享</h3>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</ProCard>
|
||||
<div className={styles.share_add_content}>
|
||||
<Form onFinish={onFinish} autoComplete="off" ref={fromRef}>
|
||||
<Form.Item
|
||||
label={"标题"}
|
||||
label={
|
||||
<>
|
||||
<h4>标题</h4>
|
||||
</>
|
||||
}
|
||||
name="title"
|
||||
id={"title"}
|
||||
rules={[{ required: true, message: "请输入标题" }]}>
|
||||
<Input name="title" maxLength={50} showCount></Input>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={"图标"}
|
||||
label={
|
||||
<>
|
||||
<h4>图标</h4>
|
||||
</>
|
||||
}
|
||||
id={"icon"}
|
||||
name="icon"
|
||||
rules={[{ required: true, message: "请输入图标" }]}>
|
||||
<Input name="icon"></Input>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={"摘要"}
|
||||
label={
|
||||
<>
|
||||
<h4>摘要</h4>
|
||||
</>
|
||||
}
|
||||
id={"description"}
|
||||
name="description"
|
||||
rules={[{ required: true, message: "请输入摘要" }]}>
|
||||
<Input name="description" maxLength={100} showCount></Input>
|
||||
</Form.Item>
|
||||
<Form.Item label={"介绍"} name={"content"} id={"content"}>
|
||||
<Form.Item
|
||||
label={
|
||||
<>
|
||||
<h4>介绍</h4>
|
||||
</>
|
||||
}
|
||||
name="content"
|
||||
id={"content"}>
|
||||
<div
|
||||
ref={divRef}
|
||||
style={{ height: "300px", maxWidth: "100%", minWidth: "100%" }}
|
||||
@@ -92,7 +120,7 @@ const ShareAdd: React.FunctionComponent = () => {
|
||||
if (tags.length >= 3) {
|
||||
setIsDisabled(true);
|
||||
return Promise.reject(
|
||||
new Error("最多只能添加五个标签"),
|
||||
new Error("最多只能添加三个标签"),
|
||||
);
|
||||
}
|
||||
},
|
||||
@@ -102,7 +130,11 @@ const ShareAdd: React.FunctionComponent = () => {
|
||||
<>
|
||||
{fields.map((field: FormListFieldData, index: number) => (
|
||||
<Form.Item
|
||||
label={"标签" + (index + 1)}
|
||||
label={
|
||||
<>
|
||||
<h4>{"标签" + (index + 1)}</h4>
|
||||
</>
|
||||
}
|
||||
key={index}
|
||||
id={"tags"}>
|
||||
<Form.Item
|
||||
@@ -129,7 +161,7 @@ const ShareAdd: React.FunctionComponent = () => {
|
||||
))}
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
type="default"
|
||||
disabled={isDisabled}
|
||||
onClick={() => add()}
|
||||
style={{ width: "100%" }}
|
||||
@@ -153,8 +185,14 @@ const ShareAdd: React.FunctionComponent = () => {
|
||||
{fields.map((field: FormListFieldData, index: number) => (
|
||||
<Card
|
||||
size="small"
|
||||
title={`链接 ${index + 1}`}
|
||||
title={
|
||||
<>
|
||||
<h4>{`链接 ${index + 1}`}</h4>
|
||||
</>
|
||||
}
|
||||
key={index}
|
||||
bordered
|
||||
hoverable
|
||||
extra={
|
||||
<CloseOutlined
|
||||
onClick={() => {
|
||||
@@ -199,7 +237,7 @@ const ShareAdd: React.FunctionComponent = () => {
|
||||
</Card>
|
||||
))}
|
||||
|
||||
<Button type="dashed" onClick={() => add()} block>
|
||||
<Button type="default" onClick={() => add()} block>
|
||||
+ 添加分享链接
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,16 @@
|
||||
/** @format */
|
||||
import React from "react";
|
||||
import { Avatar, Button, Card, Divider, Flex, Tooltip } from "antd";
|
||||
import { Avatar, Button, Card, Divider, Flex, Tag, Tooltip } from "antd";
|
||||
import {
|
||||
CommentOutlined,
|
||||
ExportOutlined,
|
||||
EyeOutlined,
|
||||
HeartOutlined,
|
||||
InfoCircleOutlined,
|
||||
LeftOutlined,
|
||||
LikeOutlined,
|
||||
StarOutlined,
|
||||
TagsOutlined,
|
||||
WarningOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
@@ -13,7 +19,8 @@ import { ProCard } from "@ant-design/pro-components";
|
||||
import styles from "./index.module.less";
|
||||
import logo from "@/assets/icons/baiduyun.svg";
|
||||
import { Typography } from "antd";
|
||||
|
||||
import Comment from "@/components/Main/Share/components/ShareDetail/components/Comment";
|
||||
import getRandomColor from "@/constant/random-color.ts";
|
||||
const { Paragraph } = Typography;
|
||||
const ShareDetail: React.FunctionComponent = () => {
|
||||
const navigate = useNavigate();
|
||||
@@ -21,19 +28,69 @@ const ShareDetail: React.FunctionComponent = () => {
|
||||
<>
|
||||
<div>
|
||||
<ProCard bordered={true}>
|
||||
<Button
|
||||
shape="circle"
|
||||
icon={<LeftOutlined />}
|
||||
onClick={() => {
|
||||
navigate("/main/share/list/1");
|
||||
}}
|
||||
/>
|
||||
<Flex vertical={false} align={"center"} justify={"space-between"}>
|
||||
<Button
|
||||
shape="circle"
|
||||
icon={<LeftOutlined />}
|
||||
onClick={() => {
|
||||
navigate("/main/share/list/1");
|
||||
}}
|
||||
/>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<h3>办公软件分享</h3>
|
||||
</Flex>
|
||||
<Flex
|
||||
vertical={false}
|
||||
align={"center"}
|
||||
justify={"space-between"}
|
||||
style={{ width: "20%" }}>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<Avatar src={logo as any} size={"small"} />
|
||||
<span
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: "gray",
|
||||
overflow: "hidden",
|
||||
}}>
|
||||
landaiqing
|
||||
</span>
|
||||
</Flex>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<HeartOutlined />
|
||||
<span
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: "gray",
|
||||
}}>
|
||||
1024
|
||||
</span>
|
||||
</Flex>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<CommentOutlined />
|
||||
<span
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: "gray",
|
||||
}}>
|
||||
1024
|
||||
</span>
|
||||
</Flex>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<EyeOutlined style={{ color: "gray" }} />{" "}
|
||||
<span
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: "gray",
|
||||
}}>
|
||||
1024
|
||||
</span>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</ProCard>
|
||||
<div className={styles.share_detail_container}>
|
||||
<ProCard bordered={true}>
|
||||
<div style={{ height: 500 }}>
|
||||
资源描述
|
||||
</div>
|
||||
<div style={{ height: 500 }}>资源描述</div>
|
||||
|
||||
<Card style={{ borderRadius: "10px", borderColor: "#1677FF" }}>
|
||||
<Flex vertical={false} align={"center"} justify={"space-between"}>
|
||||
@@ -124,8 +181,30 @@ const ShareDetail: React.FunctionComponent = () => {
|
||||
</span>
|
||||
</Flex>
|
||||
</Card>
|
||||
|
||||
<Flex vertical={false} align={"center"} style={{ marginTop: 20 }}>
|
||||
<TagsOutlined style={{ fontSize: 30, color: "#1677FF" }} />
|
||||
<Flex vertical={false} align={"center"} style={{ marginLeft: 10 }}>
|
||||
<Tag bordered={false} color={getRandomColor()}>
|
||||
测试标签
|
||||
</Tag>
|
||||
<Tag bordered={false} color={getRandomColor()}>
|
||||
测试标签
|
||||
</Tag>
|
||||
<Tag bordered={false} color={getRandomColor()}>
|
||||
测试标签
|
||||
</Tag>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex vertical={false} align={"center"} justify={"center"}>
|
||||
<LikeOutlined style={{ fontSize: 30, color: "red" }} />
|
||||
<StarOutlined
|
||||
style={{ fontSize: 30, marginLeft: 20, color: "orange" }}
|
||||
/>
|
||||
</Flex>
|
||||
</ProCard>
|
||||
</div>
|
||||
<Comment />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
/** @format */
|
||||
import { ProCard } from "@ant-design/pro-components";
|
||||
import { Avatar, Button, Flex, Input, Segmented } from "antd";
|
||||
import logo from "@/assets/icons/gitee.svg";
|
||||
import {
|
||||
BarsOutlined,
|
||||
FireOutlined,
|
||||
PictureOutlined,
|
||||
SendOutlined,
|
||||
SmileOutlined,
|
||||
} from "@ant-design/icons";
|
||||
const Comment = () => {
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<ProCard title={"评论 5"}>
|
||||
<Flex vertical={false}>
|
||||
<Flex vertical={true} justify={"flex-start"}>
|
||||
<Avatar src={logo as any} size={"large"} />
|
||||
</Flex>
|
||||
<Flex vertical={true} style={{ width: "100%" }}>
|
||||
<Input.TextArea
|
||||
style={{ marginLeft: 10 }}
|
||||
rows={5}
|
||||
maxLength={500}
|
||||
showCount
|
||||
placeholder={"平等表达，友善交流"}></Input.TextArea>
|
||||
<Flex
|
||||
vertical={false}
|
||||
align={"center"}
|
||||
style={{ marginTop: 10, marginLeft: 10 }}>
|
||||
<SmileOutlined style={{ fontSize: 20, color: "grey" }} />
|
||||
<PictureOutlined
|
||||
style={{ marginLeft: 20, fontSize: 20, color: "grey" }}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex vertical={false} align={"center"} justify={"flex-end"}>
|
||||
<Button icon={<SendOutlined />} type={"primary"}>
|
||||
发表
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex vertical={true}>
|
||||
<Segmented
|
||||
block={false}
|
||||
style={{ width: 145 }}
|
||||
size={"middle"}
|
||||
options={[
|
||||
{ label: "最新", value: "List", icon: <BarsOutlined /> },
|
||||
{ label: "最热", value: "Kanban", icon: <FireOutlined /> },
|
||||
]}
|
||||
/>
|
||||
</Flex>
|
||||
</ProCard>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Comment;
|
||||
@@ -1,13 +1,18 @@
|
||||
/** @format */
|
||||
|
||||
import { ProCard } from "@ant-design/pro-components";
|
||||
import { Avatar, Button, Divider, Flex, List, Skeleton, Tag } from "antd";
|
||||
import { Avatar, Button, Divider, Flex, Input, List, Skeleton, Tag } from "antd";
|
||||
import { useEffect, useState } from "react";
|
||||
import styles from "./index.module.less";
|
||||
import Search from "antd/es/input/Search";
|
||||
import InfiniteScroll from "react-infinite-scroll-component";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { CommentOutlined, EyeOutlined, HeartOutlined, LeftOutlined } from "@ant-design/icons";
|
||||
import {
|
||||
CommentOutlined,
|
||||
EyeOutlined,
|
||||
HeartOutlined,
|
||||
LeftOutlined,
|
||||
ShareAltOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import logo from "@/assets/icons/aliyun.svg";
|
||||
interface DataType {
|
||||
gender: string;
|
||||
@@ -51,7 +56,7 @@ export default () => {
|
||||
return (
|
||||
<>
|
||||
<div className={styles.share_list_main}>
|
||||
<ProCard bordered={true} boxShadow={true}>
|
||||
<ProCard bordered={false} boxShadow={false}>
|
||||
<div className={styles.share_list_header}>
|
||||
<div>
|
||||
<Button
|
||||
@@ -61,10 +66,15 @@ export default () => {
|
||||
navigate("/main/share");
|
||||
}}
|
||||
/>
|
||||
<Search placeholder="搜索" style={{ width: 500, marginLeft: 20 }} />
|
||||
<Input
|
||||
placeholder="搜索"
|
||||
style={{ borderRadius: 20, width: 500, marginLeft: 20 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
icon={<ShareAltOutlined />}
|
||||
type={"primary"}
|
||||
onClick={() => {
|
||||
navigate("/main/share/add");
|
||||
}}>
|
||||
@@ -72,7 +82,7 @@ export default () => {
|
||||
</Button>
|
||||
</div>
|
||||
</ProCard>
|
||||
<ProCard bordered={true} boxShadow={true} style={{ marginTop: 20 }}>
|
||||
<ProCard bordered={false} boxShadow={false}>
|
||||
<InfiniteScroll
|
||||
dataLength={data.length}
|
||||
next={loadMoreData}
|
||||
@@ -82,6 +92,11 @@ export default () => {
|
||||
scrollableTarget="scrollableDiv">
|
||||
<List
|
||||
dataSource={data}
|
||||
header={
|
||||
<>
|
||||
<h4>分享列表</h4>
|
||||
</>
|
||||
}
|
||||
renderItem={(item) => (
|
||||
<List.Item key={item.email}>
|
||||
<List.Item.Meta
|
||||
@@ -113,30 +128,53 @@ export default () => {
|
||||
vertical={false}
|
||||
align={"center"}
|
||||
justify={"space-between"}
|
||||
style={{ width: "250px" }}>
|
||||
<Avatar src={logo} size={"small"} />
|
||||
<span
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: "gray",
|
||||
}}>
|
||||
landaiqing
|
||||
</span>
|
||||
<HeartOutlined />
|
||||
<span
|
||||
style={{ fontSize: 12, color: "gray" }}>
|
||||
1024
|
||||
</span>
|
||||
<CommentOutlined />
|
||||
<span
|
||||
style={{ fontSize: 12, color: "gray" }}>
|
||||
1024
|
||||
</span>
|
||||
<EyeOutlined style={{ color: "gray" }} />{" "}
|
||||
<span
|
||||
style={{ fontSize: 12, color: "gray" }}>
|
||||
1024
|
||||
</span>
|
||||
style={{ width: "25%" }}>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<Avatar
|
||||
src={logo as any}
|
||||
size={"small"}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: "gray",
|
||||
overflow: "hidden",
|
||||
}}>
|
||||
landaiqing
|
||||
</span>
|
||||
</Flex>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<HeartOutlined />
|
||||
<span
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: "gray",
|
||||
}}>
|
||||
1024
|
||||
</span>
|
||||
</Flex>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<CommentOutlined />
|
||||
<span
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: "gray",
|
||||
}}>
|
||||
1024
|
||||
</span>
|
||||
</Flex>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<EyeOutlined
|
||||
style={{ color: "gray" }}
|
||||
/>{" "}
|
||||
<span
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: "gray",
|
||||
}}>
|
||||
1024
|
||||
</span>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
.share_list_main{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 83vh;
|
||||
.share_list_header{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
.share_main{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.share_header{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.share_main{
|
||||
min-height: 83vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.share_header{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,14 +2,15 @@
|
||||
import { FunctionComponent, useState } from "react";
|
||||
import { ProCard } from "@ant-design/pro-components";
|
||||
import styles from "./index.module.less";
|
||||
import { Avatar, Button, Card, Drawer, Flex, Form, Image, Input, Space } from "antd";
|
||||
import { Avatar, Button, Card, Drawer, Flex, FloatButton, Form, Image, Input, Space } from "antd";
|
||||
|
||||
import Search from "antd/es/input/Search";
|
||||
import Meta from "antd/es/card/Meta";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import background from "@/assets/images/background.png";
|
||||
import TextArea from "antd/es/input/TextArea";
|
||||
import { EyeOutlined, UnorderedListOutlined } from "@ant-design/icons";
|
||||
import { EyeOutlined, PlusOutlined, UnorderedListOutlined } from "@ant-design/icons";
|
||||
import pic from "@/assets/images/background.png";
|
||||
import pic2 from "@/assets/images/setting.png";
|
||||
|
||||
import Meta from "antd/es/card/Meta";
|
||||
const MainShare: FunctionComponent = () => {
|
||||
const navigate = useNavigate();
|
||||
const [open, setOpen] = useState(false);
|
||||
@@ -23,91 +24,90 @@ const MainShare: FunctionComponent = () => {
|
||||
return (
|
||||
<>
|
||||
<div className={styles.share_main}>
|
||||
<ProCard bordered={true} boxShadow={true}>
|
||||
<ProCard bordered={false} boxShadow={false}>
|
||||
<div className={styles.share_header}>
|
||||
<Search placeholder="搜索圈子" style={{ width: 500 }} />
|
||||
<Button onClick={showDrawer}>创建圈子</Button>
|
||||
<Input
|
||||
size={"large"}
|
||||
placeholder="搜索圈子"
|
||||
style={{ width: 500, borderRadius: 20 }}
|
||||
/>
|
||||
</div>
|
||||
</ProCard>
|
||||
<ProCard bordered={true} boxShadow={true} style={{ marginTop: 20 }}>
|
||||
<ProCard title={<h3>文件分享圈</h3>} bordered={false} boxShadow={false}>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<Card
|
||||
hoverable
|
||||
style={{ width: "250px" }}
|
||||
style={{
|
||||
width: "250px",
|
||||
boxShadow: " 0 0 10px rgba(0, 0, 0, 0.1)",
|
||||
borderRadius: 20,
|
||||
// backgroundColor: "rgba(79,68,68,0.11)",
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate("/main/share/list/1");
|
||||
}}
|
||||
cover={
|
||||
<Image
|
||||
alt="example"
|
||||
src={background}
|
||||
style={{ height: 200 }}
|
||||
src={pic as any}
|
||||
style={{
|
||||
height: 180,
|
||||
borderTopLeftRadius: 20,
|
||||
borderTopRightRadius: 20,
|
||||
}}
|
||||
preview={false}
|
||||
width={"100%"}
|
||||
fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg=="
|
||||
/>
|
||||
}>
|
||||
<Meta title="工具软件分享" description="分享一些常用的办公软件" />
|
||||
{/*<Avatar*/}
|
||||
{/* src={pic2 as any}*/}
|
||||
{/* shape={"circle"}*/}
|
||||
{/* style={{*/}
|
||||
{/* position: "absolute",*/}
|
||||
{/* top: 160,*/}
|
||||
{/* left: 10,*/}
|
||||
{/* width: 60,*/}
|
||||
{/* height: 60,*/}
|
||||
{/* zIndex: 9999,*/}
|
||||
{/* }}></Avatar>*/}
|
||||
<Flex
|
||||
vertical={false}
|
||||
style={{ marginTop: 10 }}
|
||||
align={"center"}
|
||||
justify={"space-between"}>
|
||||
<Avatar src={background} size={"small"} />{" "}
|
||||
<span style={{ fontSize: 12, color: "gray" }}>landaiqing</span>
|
||||
<Flex
|
||||
vertical={false}
|
||||
align={"center"}
|
||||
style={{ width: 100 }}
|
||||
justify={"space-between"}>
|
||||
<EyeOutlined style={{ color: "gray" }} />{" "}
|
||||
<span style={{ fontSize: 12, color: "gray" }}>1024</span>
|
||||
<UnorderedListOutlined style={{ color: "gray" }} />{" "}
|
||||
<span style={{ fontSize: 12, color: "gray" }}>999</span>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<Avatar src={pic as any} size={"small"} />{" "}
|
||||
<span style={{ fontSize: 12, color: "gray", marginLeft: 5 }}>
|
||||
landaiqing
|
||||
</span>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
hoverable
|
||||
style={{ width: "250px", marginLeft: 20 }}
|
||||
onClick={() => {
|
||||
navigate("/main/share/list/1");
|
||||
}}
|
||||
cover={
|
||||
<Image
|
||||
alt="example"
|
||||
src={background}
|
||||
style={{ height: 200 }}
|
||||
preview={false}
|
||||
width={"100%"}
|
||||
fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg=="
|
||||
/>
|
||||
}>
|
||||
<Meta title="工具软件分享" description="分享一些常用的办公软件" />
|
||||
<Flex
|
||||
vertical={false}
|
||||
style={{ marginTop: 10 }}
|
||||
align={"center"}
|
||||
justify={"space-between"}>
|
||||
<Avatar src={background} size={"small"} />{" "}
|
||||
<span style={{ fontSize: 12, color: "gray" }}>landaiqing</span>
|
||||
<Flex
|
||||
vertical={false}
|
||||
align={"center"}
|
||||
style={{ width: 100 }}
|
||||
justify={"space-between"}>
|
||||
<EyeOutlined style={{ color: "gray" }} />{" "}
|
||||
<span style={{ fontSize: 12, color: "gray" }}>1024</span>
|
||||
<UnorderedListOutlined style={{ color: "gray" }} />{" "}
|
||||
<span style={{ fontSize: 12, color: "gray" }}>999</span>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<EyeOutlined style={{ color: "gray" }} />{" "}
|
||||
<span
|
||||
style={{ fontSize: 12, color: "gray", marginLeft: 5 }}>
|
||||
1024
|
||||
</span>
|
||||
</Flex>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<UnorderedListOutlined style={{ color: "gray" }} />{" "}
|
||||
<span
|
||||
style={{ fontSize: 12, color: "gray", marginLeft: 5 }}>
|
||||
999
|
||||
</span>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Flex>
|
||||
</ProCard>
|
||||
</div>
|
||||
|
||||
<Drawer
|
||||
title="创建圈子"
|
||||
width={"40%"}
|
||||
@@ -149,6 +149,13 @@ const MainShare: FunctionComponent = () => {
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Drawer>
|
||||
<FloatButton
|
||||
trigger="click"
|
||||
type="primary"
|
||||
style={{ right: "5%", width: 50, height: 50 }}
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => setOpen(true)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
131
src/components/Main/User/MyFavorites/index.tsx
Normal file
131
src/components/Main/User/MyFavorites/index.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
/** @format */
|
||||
|
||||
import { ProCard } from "@ant-design/pro-components";
|
||||
import { Avatar, Divider, Flex, List, Skeleton, Tag } from "antd";
|
||||
import { useEffect, useState } from "react";
|
||||
import InfiniteScroll from "react-infinite-scroll-component";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { CommentOutlined, EyeOutlined, HeartOutlined } from "@ant-design/icons";
|
||||
import logo from "@/assets/icons/aliyun.svg";
|
||||
interface DataType {
|
||||
gender: string;
|
||||
name: {
|
||||
title: string;
|
||||
first: string;
|
||||
last: string;
|
||||
};
|
||||
email: string;
|
||||
picture: {
|
||||
large: string;
|
||||
medium: string;
|
||||
thumbnail: string;
|
||||
};
|
||||
nat: string;
|
||||
}
|
||||
|
||||
export default () => {
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [data, setData] = useState<DataType[]>([]);
|
||||
const loadMoreData = () => {
|
||||
if (loading) {
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
fetch("https://randomuser.me/api/?results=10&inc=name,gender,email,nat,picture&noinfo")
|
||||
.then((res) => res.json())
|
||||
.then((body) => {
|
||||
setData([...data, ...body.results]);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadMoreData();
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<ProCard bordered={true} boxShadow={true}>
|
||||
<InfiniteScroll
|
||||
dataLength={data.length}
|
||||
next={loadMoreData}
|
||||
hasMore={data.length < 50}
|
||||
loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
|
||||
endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
|
||||
scrollableTarget="scrollableDiv">
|
||||
<List
|
||||
dataSource={data}
|
||||
renderItem={(item) => (
|
||||
<List.Item key={item.email}>
|
||||
<List.Item.Meta
|
||||
avatar={<Avatar src={item.picture.large} />}
|
||||
title={
|
||||
<>
|
||||
<a
|
||||
onClick={() => {
|
||||
navigate("/main/share/detail/1");
|
||||
}}>
|
||||
{item.name.last}
|
||||
</a>
|
||||
<Tag
|
||||
bordered={false}
|
||||
color="processing"
|
||||
style={{ marginLeft: 10 }}>
|
||||
IDM
|
||||
</Tag>
|
||||
</>
|
||||
}
|
||||
description={
|
||||
<>
|
||||
<Flex
|
||||
vertical={false}
|
||||
justify={"space-between"}
|
||||
align={"center"}>
|
||||
{item.email}
|
||||
<Flex
|
||||
vertical={false}
|
||||
align={"center"}
|
||||
justify={"space-between"}
|
||||
style={{ width: "250px" }}>
|
||||
<Avatar src={logo} size={"small"} />
|
||||
<span
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: "gray",
|
||||
}}>
|
||||
landaiqing
|
||||
</span>
|
||||
<HeartOutlined />
|
||||
<span
|
||||
style={{ fontSize: 12, color: "gray" }}>
|
||||
1024
|
||||
</span>
|
||||
<CommentOutlined />
|
||||
<span
|
||||
style={{ fontSize: 12, color: "gray" }}>
|
||||
1024
|
||||
</span>
|
||||
<EyeOutlined style={{ color: "gray" }} />{" "}
|
||||
<span
|
||||
style={{ fontSize: 12, color: "gray" }}>
|
||||
1024
|
||||
</span>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
{/*<div>Content</div>*/}
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</InfiniteScroll>
|
||||
</ProCard>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
24
src/constant/random-color.ts
Normal file
24
src/constant/random-color.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
/** @format */
|
||||
|
||||
const RandomColor: any = [
|
||||
"processing",
|
||||
"success",
|
||||
"error",
|
||||
"warning",
|
||||
"magenta",
|
||||
"blue",
|
||||
"geekblue",
|
||||
"purple",
|
||||
"#f50",
|
||||
"#2db7f5",
|
||||
"#87d068",
|
||||
"#108ee9",
|
||||
"red",
|
||||
"volcano",
|
||||
"orange",
|
||||
"gold",
|
||||
"lime",
|
||||
"green",
|
||||
];
|
||||
const getRandomColor = () => RandomColor[Math.floor(Math.random() * RandomColor.length)];
|
||||
export default getRandomColor;
|
||||
@@ -14,6 +14,7 @@ import pinanyun from "@/assets/icons/pinanyun.svg";
|
||||
import qingyun from "@/assets/icons/qingyun.svg";
|
||||
import ucloud from "@/assets/icons/ucloud.svg";
|
||||
import jinshan from "@/assets/icons/jinshan.svg";
|
||||
import bucket from "@/assets/icons/bucket.svg";
|
||||
|
||||
const StorageIcon: any = {
|
||||
ali: aliyun,
|
||||
@@ -30,5 +31,6 @@ const StorageIcon: any = {
|
||||
qingyun: qingyun,
|
||||
ucloud: ucloud,
|
||||
jinshan: jinshan,
|
||||
bucket:bucket,
|
||||
};
|
||||
export default StorageIcon;
|
||||
|
||||
11
src/router/modules/main/user/myFavorites/index.ts
Normal file
11
src/router/modules/main/user/myFavorites/index.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
/** @format */
|
||||
|
||||
import { lazy } from "react";
|
||||
|
||||
const MyFavorites = lazy(
|
||||
() =>
|
||||
new Promise((resolve: any) => {
|
||||
resolve(import("@/components/Main/User/MyFavorites/index.tsx"));
|
||||
}),
|
||||
);
|
||||
export default MyFavorites;
|
||||
@@ -48,6 +48,7 @@ import upBucket from "@/router/modules/main/bucket/createBuckets/up.ts";
|
||||
import wangyiBucket from "@/router/modules/main/bucket/createBuckets/wangyi.ts";
|
||||
import ShareAdd from "@/router/modules/main/share/modules/shareAdd.tsx";
|
||||
import MyShare from "@/router/modules/main/user/myShare";
|
||||
import MyFavorites from "@/router/modules/main/user/myFavorites";
|
||||
|
||||
const routes: RouteObject[] = [
|
||||
{
|
||||
@@ -161,6 +162,11 @@ const routes: RouteObject[] = [
|
||||
path: "/main/user/myshare",
|
||||
Component: MyShare,
|
||||
},
|
||||
{
|
||||
path: "/main/user/favorites",
|
||||
Component: MyFavorites,
|
||||
},
|
||||
|
||||
{
|
||||
path: "/main/share",
|
||||
Component: MainShare,
|
||||
|
||||
@@ -1,69 +1,65 @@
|
||||
/** @format */
|
||||
|
||||
import { action, makeObservable, observable } from "mobx";
|
||||
import { isHydrated, makePersistable } from "mobx-persist-store";
|
||||
import { handleLocalforage } from "@/utils/localforage";
|
||||
|
||||
export class useFileStore {
|
||||
filePath: [any] = [
|
||||
{
|
||||
title: "/ root",
|
||||
},
|
||||
];
|
||||
|
||||
constructor() {
|
||||
makeObservable(this, {
|
||||
filePath: observable,
|
||||
setFilePath: action,
|
||||
getFilePath: action,
|
||||
clearFilePath: action,
|
||||
getFilePathSecondLast: action,
|
||||
isHydrated: action,
|
||||
});
|
||||
makePersistable(
|
||||
this,
|
||||
{
|
||||
// 在构造函数内使用 makePersistable
|
||||
name: "file", // 保存的name，用于在storage中的名称标识，只要不和storage中其他名称重复就可以
|
||||
properties: ["filePath"], // 要保存的字段，这些字段会被保存在name对应的storage中，注意：不写在这里面的字段将不会被保存，刷新页面也将丢失：get字段例外。get数据会在数据返回后再自动计算
|
||||
storage: handleLocalforage, // 保存的位置：可以是localStorage，sessionstorage
|
||||
removeOnExpiration: true, //如果 expireIn 具有值且已过期，则在调用 getItem 时将自动删除存储中的数据。默认值为 true。
|
||||
stringify: false, //如果为 true，则数据在传递给 setItem 之前将是 JSON.stringify。默认值为 true。
|
||||
expireIn: 2592000000, // 一个以毫秒为单位的值，用于确定 getItem 何时不应检索存储中的数据。默认情况下永不过期。
|
||||
debugMode: false, // 如果为 true，将为多个 mobx-persist-store 项调用 console.info。默认值为 false。
|
||||
},
|
||||
{
|
||||
delay: 0, // 允许您设置一个 delay 选项来限制 write 函数的调用次数。默认情况下没有延迟。
|
||||
fireImmediately: false, // 确定是应立即保留存储数据，还是等到存储中的属性发生更改。 false 默认情况下。
|
||||
},
|
||||
).then(
|
||||
action(() => {
|
||||
// persist 完成的回调，在这里可以执行一些拿到数据后需要执行的操作，如果在页面上要判断是否完成persist，使用 isHydrated
|
||||
// console.log(persistStore)
|
||||
}),
|
||||
);
|
||||
}
|
||||
// 获取文件路径
|
||||
getFilePath() {
|
||||
return this.filePath ? this.filePath : [];
|
||||
}
|
||||
// 设置文件路径
|
||||
setFilePath(path: any) {
|
||||
this.filePath.push(path);
|
||||
}
|
||||
// 删除文件路径最后一个
|
||||
clearFilePath() {
|
||||
if (this.filePath.length === 1) {
|
||||
return;
|
||||
}
|
||||
this.filePath.pop();
|
||||
}
|
||||
// 获取文件路径倒数第二个
|
||||
getFilePathSecondLast() {
|
||||
return this.filePath.slice(0, -1).pop();
|
||||
}
|
||||
|
||||
isHydrated() {
|
||||
return isHydrated(this);
|
||||
}
|
||||
}
|
||||
/** @format */
|
||||
|
||||
import { action, makeObservable, observable } from "mobx";
|
||||
import { isHydrated, makePersistable } from "mobx-persist-store";
|
||||
import { handleLocalforage } from "@/utils/localforage";
|
||||
|
||||
export class useFileStore {
|
||||
filePath: [any] = ["/root"];
|
||||
|
||||
constructor() {
|
||||
makeObservable(this, {
|
||||
filePath: observable,
|
||||
setFilePath: action,
|
||||
getFilePath: action,
|
||||
clearFilePath: action,
|
||||
getFilePathSecondLast: action,
|
||||
isHydrated: action,
|
||||
});
|
||||
makePersistable(
|
||||
this,
|
||||
{
|
||||
// 在构造函数内使用 makePersistable
|
||||
name: "file", // 保存的name，用于在storage中的名称标识，只要不和storage中其他名称重复就可以
|
||||
properties: ["filePath"], // 要保存的字段，这些字段会被保存在name对应的storage中，注意：不写在这里面的字段将不会被保存，刷新页面也将丢失：get字段例外。get数据会在数据返回后再自动计算
|
||||
storage: handleLocalforage, // 保存的位置：可以是localStorage，sessionstorage
|
||||
removeOnExpiration: true, //如果 expireIn 具有值且已过期，则在调用 getItem 时将自动删除存储中的数据。默认值为 true。
|
||||
stringify: false, //如果为 true，则数据在传递给 setItem 之前将是 JSON.stringify。默认值为 true。
|
||||
expireIn: 2592000000, // 一个以毫秒为单位的值，用于确定 getItem 何时不应检索存储中的数据。默认情况下永不过期。
|
||||
debugMode: false, // 如果为 true，将为多个 mobx-persist-store 项调用 console.info。默认值为 false。
|
||||
},
|
||||
{
|
||||
delay: 0, // 允许您设置一个 delay 选项来限制 write 函数的调用次数。默认情况下没有延迟。
|
||||
fireImmediately: false, // 确定是应立即保留存储数据，还是等到存储中的属性发生更改。 false 默认情况下。
|
||||
},
|
||||
).then(
|
||||
action(() => {
|
||||
// persist 完成的回调，在这里可以执行一些拿到数据后需要执行的操作，如果在页面上要判断是否完成persist，使用 isHydrated
|
||||
// console.log(persistStore)
|
||||
}),
|
||||
);
|
||||
}
|
||||
// 获取文件路径
|
||||
getFilePath() {
|
||||
return this.filePath ? this.filePath : [];
|
||||
}
|
||||
// 设置文件路径
|
||||
setFilePath(path: any) {
|
||||
this.filePath.push(path);
|
||||
}
|
||||
// 删除文件路径最后一个
|
||||
clearFilePath() {
|
||||
if (this.filePath.length === 1) {
|
||||
return;
|
||||
}
|
||||
this.filePath.pop();
|
||||
}
|
||||
// 获取文件路径倒数第二个
|
||||
getFilePathSecondLast() {
|
||||
return this.filePath.slice(0, -1).pop();
|
||||
}
|
||||
|
||||
isHydrated() {
|
||||
return isHydrated(this);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,12 +6,7 @@ import {
|
||||
LogoutOutlined,
|
||||
QuestionCircleFilled,
|
||||
} from "@ant-design/icons";
|
||||
import {
|
||||
DefaultFooter,
|
||||
PageContainer,
|
||||
ProCard,
|
||||
ProLayout,
|
||||
} from "@ant-design/pro-components";
|
||||
import { DefaultFooter, PageContainer, ProCard, ProLayout } from "@ant-design/pro-components";
|
||||
import { Link, Outlet, useLocation } from "react-router-dom";
|
||||
import logo from "@/assets/images/logo.png";
|
||||
import { Suspense } from "react";
|
||||
@@ -28,8 +23,9 @@ export default function Layout() {
|
||||
height: "100vh",
|
||||
}}>
|
||||
<ProLayout
|
||||
logo={logo}
|
||||
logo={logo as any}
|
||||
layout={"mix"}
|
||||
splitMenus={false}
|
||||
pure={false}
|
||||
loading={false}
|
||||
contentWidth={"Fluid"}
|
||||
@@ -56,29 +52,34 @@ export default function Layout() {
|
||||
location={{
|
||||
pathname: location.pathname,
|
||||
}}
|
||||
avatarProps={{
|
||||
src: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
|
||||
title: "七妮妮",
|
||||
size: "large",
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
render: (props, dom) => {
|
||||
return (
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
key: "logout",
|
||||
icon: <LogoutOutlined />,
|
||||
label: "退出登录",
|
||||
},
|
||||
],
|
||||
}}>
|
||||
{dom}
|
||||
</Dropdown>
|
||||
);
|
||||
},
|
||||
}}
|
||||
avatarProps={
|
||||
{
|
||||
src: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
|
||||
title: "七妮妮",
|
||||
size: "large",
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
render: (props, dom) => {
|
||||
return (
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
key: "logout",
|
||||
icon: <LogoutOutlined />,
|
||||
label: "退出登录",
|
||||
onClick: () => {
|
||||
console.log("推出");
|
||||
},
|
||||
},
|
||||
],
|
||||
}}>
|
||||
{dom}
|
||||
</Dropdown>
|
||||
);
|
||||
},
|
||||
} as any
|
||||
}
|
||||
actionsRender={(props: any) => {
|
||||
// eslint-disable-next-line react/prop-types
|
||||
if (props.isMobile) return [];
|
||||
@@ -99,15 +100,20 @@ export default function Layout() {
|
||||
<DefaultFooter
|
||||
links={[
|
||||
{
|
||||
key: "schisandra",
|
||||
title: "schisandra",
|
||||
key: "schisandra-1",
|
||||
title: "五味子云存储",
|
||||
href: "https://landaiqing.cn",
|
||||
},
|
||||
{
|
||||
key: "schisandra-2",
|
||||
title: "schisandra cloud storage",
|
||||
href: "https://landaiqing.cn",
|
||||
},
|
||||
]}
|
||||
copyright="2024"
|
||||
copyright="2024 by schisandra"
|
||||
/>
|
||||
)}>
|
||||
<PageContainer title={false}>
|
||||
<PageContainer title={false} breadcrumb={false as any} ghost={true}>
|
||||
<ProCard>
|
||||
<div>
|
||||
<Suspense>
|
||||
|
||||
@@ -73,6 +73,11 @@ export default {
|
||||
name: "我的分享",
|
||||
icon: "https://pic.imgdb.cn/item/668f8e5fd9c307b7e9f079bf.png",
|
||||
},
|
||||
{
|
||||
path: "main/user/favorites",
|
||||
name: "我的收藏",
|
||||
icon: "https://pic.imgdb.cn/item/6690e7c0d9c307b7e9738f02.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user