feat: 界面调整
This commit is contained in:
landaiqing
@@ -44,6 +44,12 @@ module.exports = {
|
|||||||
"@typescript-eslint/explicit-function-return-type": 0, // 禁止函数必须要定义返回类型
|
"@typescript-eslint/explicit-function-return-type": 0, // 禁止函数必须要定义返回类型
|
||||||
"react/display-name": "off",
|
"react/display-name": "off",
|
||||||
"@typescript-eslint/no-explicit-any": ["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-control-regex": "off",
|
||||||
"no-eval": 0
|
"no-eval": 0
|
||||||
}
|
}
|
||||||
|
|||||||
40
pnpm-lock.yaml
generated
40
pnpm-lock.yaml
generated
@@ -11,6 +11,9 @@ dependencies:
|
|||||||
'@ant-design/pro-components':
|
'@ant-design/pro-components':
|
||||||
specifier: ^2.7.10
|
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)
|
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':
|
'@ant-design/use-emotion-css':
|
||||||
specifier: ^1.0.4
|
specifier: ^1.0.4
|
||||||
version: 1.0.4(antd@5.19.1)(react-dom@18.3.1)(react@18.3.1)
|
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
|
'@ctrl/tinycolor': 3.6.1
|
||||||
dev: false
|
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):
|
/@ant-design/cssinjs@1.21.0(react-dom@18.3.1)(react@18.3.1):
|
||||||
resolution: {integrity: sha512-gIilraPl+9EoKdYxnupxjHB/Q6IHNRjEXszKbDxZdsgv4sAZ9pjkCq8yanDWNvyfjp4leir2OVAJm0vxwKK8YA==}
|
resolution: {integrity: sha512-gIilraPl+9EoKdYxnupxjHB/Q6IHNRjEXszKbDxZdsgv4sAZ9pjkCq8yanDWNvyfjp4leir2OVAJm0vxwKK8YA==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
@@ -425,11 +411,11 @@ packages:
|
|||||||
react: '>=17.0.0'
|
react: '>=17.0.0'
|
||||||
react-dom: '>=17.0.0'
|
react-dom: '>=17.0.0'
|
||||||
dependencies:
|
dependencies:
|
||||||
'@ant-design/cssinjs': 1.20.0(react-dom@18.3.1)(react@18.3.1)
|
'@ant-design/cssinjs': 1.21.0(react-dom@18.3.1)(react@18.3.1)
|
||||||
'@babel/runtime': 7.24.6
|
'@babel/runtime': 7.24.7
|
||||||
'@ctrl/tinycolor': 3.6.1
|
'@ctrl/tinycolor': 3.6.1
|
||||||
antd: 5.19.1(react-dom@18.3.1)(react@18.3.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: 18.3.1
|
||||||
react-dom: 18.3.1(react@18.3.1)
|
react-dom: 18.3.1(react@18.3.1)
|
||||||
swr: 2.2.5(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==}
|
resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/helper-module-imports': 7.24.6
|
'@babel/helper-module-imports': 7.24.6
|
||||||
'@babel/runtime': 7.24.6
|
'@babel/runtime': 7.24.7
|
||||||
'@emotion/hash': 0.9.1
|
'@emotion/hash': 0.9.1
|
||||||
'@emotion/memoize': 0.8.1
|
'@emotion/memoize': 0.8.1
|
||||||
'@emotion/serialize': 1.1.4
|
'@emotion/serialize': 1.1.4
|
||||||
@@ -4315,7 +4301,7 @@ packages:
|
|||||||
resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
|
resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
|
||||||
engines: {node: '>=10', npm: '>=6'}
|
engines: {node: '>=10', npm: '>=6'}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/runtime': 7.24.6
|
'@babel/runtime': 7.24.7
|
||||||
cosmiconfig: 7.1.0
|
cosmiconfig: 7.1.0
|
||||||
resolve: 1.22.8
|
resolve: 1.22.8
|
||||||
dev: false
|
dev: false
|
||||||
@@ -5869,7 +5855,7 @@ packages:
|
|||||||
/i18next@23.11.5:
|
/i18next@23.11.5:
|
||||||
resolution: {integrity: sha512-41pvpVbW9rhZPk5xjCX2TPJi2861LEig/YRhUkY+1FQ2IQPS0bKUDYnEqY8XPPbB48h1uIwLnP9iiEfuSl20CA==}
|
resolution: {integrity: sha512-41pvpVbW9rhZPk5xjCX2TPJi2861LEig/YRhUkY+1FQ2IQPS0bKUDYnEqY8XPPbB48h1uIwLnP9iiEfuSl20CA==}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/runtime': 7.24.6
|
'@babel/runtime': 7.24.7
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/iconv-lite@0.6.3:
|
/iconv-lite@0.6.3:
|
||||||
@@ -7838,9 +7824,9 @@ packages:
|
|||||||
react: '>=16.9.0'
|
react: '>=16.9.0'
|
||||||
react-dom: '>=16.9.0'
|
react-dom: '>=16.9.0'
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/runtime': 7.24.6
|
'@babel/runtime': 7.24.7
|
||||||
classnames: 2.5.1
|
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: 18.3.1
|
||||||
react-dom: 18.3.1(react@18.3.1)
|
react-dom: 18.3.1(react@18.3.1)
|
||||||
resize-observer-polyfill: 1.5.1
|
resize-observer-polyfill: 1.5.1
|
||||||
@@ -8056,7 +8042,7 @@ packages:
|
|||||||
react: '>=16.9.0'
|
react: '>=16.9.0'
|
||||||
react-dom: '>=16.9.0'
|
react-dom: '>=16.9.0'
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/runtime': 7.24.6
|
'@babel/runtime': 7.24.7
|
||||||
react: 18.3.1
|
react: 18.3.1
|
||||||
react-dom: 18.3.1(react@18.3.1)
|
react-dom: 18.3.1(react@18.3.1)
|
||||||
react-is: 18.3.1
|
react-is: 18.3.1
|
||||||
@@ -8229,7 +8215,7 @@ packages:
|
|||||||
/regenerator-transform@0.15.2:
|
/regenerator-transform@0.15.2:
|
||||||
resolution: {integrity: sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==}
|
resolution: {integrity: sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/runtime': 7.24.6
|
'@babel/runtime': 7.24.7
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/regexp.prototype.flags@1.5.2:
|
/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 {
|
&::-webkit-scrollbar {
|
||||||
width: 6px;
|
width: 6px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
|
// 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
|
||||||
&::-webkit-scrollbar-button {
|
&::-webkit-scrollbar-button {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
|
// 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
background: rgba(144, 147, 153, 0.3);
|
background: rgba(144, 147, 153, 0.3);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 边角，即两个滚动条的交汇处
|
// 边角，即两个滚动条的交汇处
|
||||||
&::-webkit-scrollbar-corner {
|
&::-webkit-scrollbar-corner {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
|
// 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
|
||||||
&::-webkit-resizer {
|
&::-webkit-resizer {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-image: url("@/assets/images/background.png");
|
background-image: url("@/assets/images/background.png");
|
||||||
background-size: cover;
|
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{
|
.div_checkCardArea{
|
||||||
height: 65vh;
|
height: 68vh;
|
||||||
max-height: 65vh;
|
max-height: 68vh;
|
||||||
overflow-y:scroll;
|
overflow-y:scroll;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,13 +1,17 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { message, Upload } from "antd";
|
import { Avatar, Card, Flex, Input, message, Select, Upload } from "antd";
|
||||||
import { InboxOutlined } from "@ant-design/icons";
|
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 { Dragger } = Upload;
|
||||||
const props: any = {
|
const props: any = {
|
||||||
name: "file",
|
name: "file",
|
||||||
multiple: true,
|
multiple: true,
|
||||||
|
directory: true,
|
||||||
action: "https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload",
|
action: "https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload",
|
||||||
onChange(info) {
|
onChange(info) {
|
||||||
const { status } = info.file;
|
const { status } = info.file;
|
||||||
@@ -27,13 +31,106 @@ const props: any = {
|
|||||||
const FileUpload: React.FC = () => {
|
const FileUpload: React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Dragger {...props}>
|
<Flex vertical={false} align={"center"}>
|
||||||
<p className="ant-upload-drag-icon">
|
<ProCard bordered={false} boxShadow={false}>
|
||||||
<InboxOutlined />
|
<Flex vertical={false}>
|
||||||
</p>
|
<Select
|
||||||
<p className="ant-upload-text">单击或拖动文件到此区域进行上传</p>
|
size="large"
|
||||||
<p className="ant-upload-hint">支持单次或批量上传。</p>
|
status="warning"
|
||||||
</Dragger>
|
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 {
|
.file_main {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.file_content_left {
|
.file_content_left {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.file_content_right {
|
.file_content_right {
|
||||||
width: 73%;
|
width: 73%;
|
||||||
height: 75vh;
|
height: 75vh;
|
||||||
|
|
||||||
.file_right_content {
|
.file_right_content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
margin-top: 20px;
|
margin-top: 10px;
|
||||||
|
|
||||||
.file_card:hover {
|
.file_card:hover {
|
||||||
background-color: rgba(16, 15, 15, 0.08);
|
background-color: rgba(16, 15, 15, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.file_right_header {
|
.file_right_header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: column;
|
||||||
align-items: center;
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
.file_name {
|
||||||
.file_name {
|
width: 65px;
|
||||||
width: 65px;
|
text-align: center;
|
||||||
text-align: center;
|
font-size: 12px;
|
||||||
font-size: 12px;
|
margin-top: 5px;
|
||||||
margin-top: 5px;
|
overflow: hidden;
|
||||||
overflow: hidden;
|
text-overflow: ellipsis;
|
||||||
text-overflow: ellipsis;
|
white-space: nowrap;
|
||||||
white-space: nowrap;
|
display: inline-block;
|
||||||
display: inline-block;
|
-o-text-overflow: ellipsis;
|
||||||
-o-text-overflow: ellipsis;
|
}
|
||||||
}
|
|
||||||
|
|||||||
@@ -4,12 +4,13 @@ import { CheckCard, ProCard } from "@ant-design/pro-components";
|
|||||||
import styles from "./index.module.less";
|
import styles from "./index.module.less";
|
||||||
import {
|
import {
|
||||||
Avatar,
|
Avatar,
|
||||||
Breadcrumb,
|
|
||||||
Button,
|
Button,
|
||||||
Card,
|
Card,
|
||||||
Divider,
|
Divider,
|
||||||
Dropdown,
|
Dropdown,
|
||||||
|
Flex,
|
||||||
FloatButton,
|
FloatButton,
|
||||||
|
Input,
|
||||||
message,
|
message,
|
||||||
Modal,
|
Modal,
|
||||||
Select,
|
Select,
|
||||||
@@ -18,7 +19,20 @@ import {
|
|||||||
import ali from "@/assets/icons/aliyun.svg";
|
import ali from "@/assets/icons/aliyun.svg";
|
||||||
import bucket from "@/assets/icons/bucket.svg";
|
import bucket from "@/assets/icons/bucket.svg";
|
||||||
import tencent from "@/assets/icons/tencent.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 standard_dir from "@/assets/icons/standard_directory.svg";
|
||||||
import useStore from "@/utils/store/useStore.tsx";
|
import useStore from "@/utils/store/useStore.tsx";
|
||||||
import { observer } from "mobx-react";
|
import { observer } from "mobx-react";
|
||||||
@@ -103,11 +117,16 @@ const File: FunctionComponent = () => {
|
|||||||
<>
|
<>
|
||||||
<div className={styles.file_main}>
|
<div className={styles.file_main}>
|
||||||
<div className={styles.file_content_left}>
|
<div className={styles.file_content_left}>
|
||||||
<ProCard bordered boxShadow style={{ height: "75vh" }}>
|
<ProCard bordered boxShadow style={{ height: "83vh" }}>
|
||||||
<Select
|
<Select
|
||||||
size="large"
|
size="large"
|
||||||
status="warning"
|
status="warning"
|
||||||
style={{ width: "100%" }}
|
style={{
|
||||||
|
width: "100%",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
showSearch={true}
|
showSearch={true}
|
||||||
allowClear={true}
|
allowClear={true}
|
||||||
notFoundContent={"未找到，请先配置存储商"}
|
notFoundContent={"未找到，请先配置存储商"}
|
||||||
@@ -220,17 +239,87 @@ const File: FunctionComponent = () => {
|
|||||||
</ProCard>
|
</ProCard>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.file_content_right}>
|
<div className={styles.file_content_right}>
|
||||||
<ProCard bordered boxShadow style={{ height: "75vh" }}>
|
<ProCard bordered boxShadow style={{ height: "83vh" }}>
|
||||||
<div className={styles.file_right_header}>
|
<div className={styles.file_right_header}>
|
||||||
<Button
|
<Flex vertical={false} align={"center"} justify={"flex-start"}>
|
||||||
shape="circle"
|
<Flex vertical={false} align={"center"}>
|
||||||
icon={<LeftOutlined />}
|
<Button
|
||||||
onClick={() => {
|
shape="circle"
|
||||||
setFiles(dataList);
|
icon={<LeftOutlined />}
|
||||||
store.clearFilePath();
|
onClick={() => {
|
||||||
}}
|
setFiles(dataList);
|
||||||
/>
|
store.clearFilePath();
|
||||||
<Breadcrumb items={store.getFilePath()} style={{ marginLeft: 15 }} />
|
}}
|
||||||
|
/>
|
||||||
|
<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>
|
||||||
|
|
||||||
<div className={styles.file_right_content}>
|
<div className={styles.file_right_content}>
|
||||||
@@ -259,9 +348,7 @@ const File: FunctionComponent = () => {
|
|||||||
<div
|
<div
|
||||||
style={{ marginLeft: 10 }}
|
style={{ marginLeft: 10 }}
|
||||||
onDoubleClick={() => {
|
onDoubleClick={() => {
|
||||||
store.setFilePath({
|
store.setFilePath(file.name);
|
||||||
title: file.name,
|
|
||||||
});
|
|
||||||
setFiles(fileList);
|
setFiles(fileList);
|
||||||
}}>
|
}}>
|
||||||
<CheckCard
|
<CheckCard
|
||||||
|
|||||||
@@ -1,224 +1,228 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
import { PlusOutlined } from "@ant-design/icons";
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
import React, { useRef, useState } from "react";
|
import React, { useRef, useState } from "react";
|
||||||
|
|
||||||
type AliOssConfigItem = {
|
type AliOssConfigItem = {
|
||||||
id: number;
|
id: number;
|
||||||
userId: number;
|
userId: number;
|
||||||
endpoint: string;
|
endpoint: string;
|
||||||
accessKeyId: string;
|
accessKeyId: string;
|
||||||
accessKeySecret: string;
|
accessKeySecret: string;
|
||||||
createdTime: string;
|
createdTime: string;
|
||||||
updatedTime: string;
|
updatedTime: string;
|
||||||
status: string;
|
status: string;
|
||||||
};
|
};
|
||||||
const data: AliOssConfigItem[] = [
|
const data: AliOssConfigItem[] = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
userId: 1,
|
userId: 1,
|
||||||
endpoint: "https://oss.aliyuncs.com",
|
endpoint: "https://oss.aliyuncs.com",
|
||||||
accessKeyId: "LTAI5tG3",
|
accessKeyId: "LTAI5tG3",
|
||||||
accessKeySecret: "G3",
|
accessKeySecret: "G3",
|
||||||
createdTime: "2024-06-28 10:51:59",
|
createdTime: "2024-06-28 10:51:59",
|
||||||
updatedTime: "2024-06-29 10:51:59",
|
updatedTime: "2024-06-29 10:51:59",
|
||||||
status: "正常",
|
status: "正常",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const columns: ProColumns<AliOssConfigItem>[] = [
|
const columns: ProColumns<AliOssConfigItem>[] = [
|
||||||
{
|
{
|
||||||
dataIndex: "index",
|
dataIndex: "index",
|
||||||
valueType: "indexBorder",
|
valueType: "indexBorder",
|
||||||
width: 48,
|
width: 48,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ID",
|
title: "ID",
|
||||||
dataIndex: "id",
|
dataIndex: "id",
|
||||||
copyable: true,
|
copyable: true,
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
tooltip: "Id",
|
tooltip: "Id",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "服务地址",
|
title: "服务地址",
|
||||||
dataIndex: "endpoint",
|
dataIndex: "endpoint",
|
||||||
tooltip: "endpoint",
|
tooltip: "endpoint",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥ID",
|
title: "密钥ID",
|
||||||
dataIndex: "accessKeyId",
|
dataIndex: "accessKeyId",
|
||||||
tooltip: "access key id",
|
tooltip: "access key id",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥值",
|
title: "密钥值",
|
||||||
dataIndex: "accessKeySecret",
|
dataIndex: "accessKeySecret",
|
||||||
tooltip: "access key secret",
|
tooltip: "access key secret",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "状态",
|
title: "状态",
|
||||||
dataIndex: "status",
|
dataIndex: "status",
|
||||||
search: true,
|
search: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "创建时间",
|
title: "创建时间",
|
||||||
dataIndex: "createdTime",
|
dataIndex: "createdTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "更新时间",
|
title: "更新时间",
|
||||||
dataIndex: "updatedTime",
|
dataIndex: "updatedTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "操作",
|
title: "操作",
|
||||||
valueType: "option",
|
valueType: "option",
|
||||||
key: "option",
|
key: "option",
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
render: (text, record, _, action) => [
|
render: (text: any, record: any, _, action: any) => [
|
||||||
<a
|
<a
|
||||||
key="editable"
|
key="editable"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
action?.startEditable?.(record.id);
|
action?.startEditable?.(record.id);
|
||||||
}}>
|
}}>
|
||||||
编辑
|
编辑
|
||||||
</a>,
|
</a>,
|
||||||
<a target="_blank" rel="noopener noreferrer" key="view">
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
查看
|
查看
|
||||||
</a>,
|
</a>,
|
||||||
<TableDropdown
|
<TableDropdown
|
||||||
key="actionGroup"
|
key="actionGroup"
|
||||||
onSelect={() => action?.reload()}
|
onSelect={() => action?.reload()}
|
||||||
menus={[
|
menus={[
|
||||||
{ key: "copy", name: "复制" },
|
{ key: "copy", name: "复制" },
|
||||||
{ key: "delete", name: "删除" },
|
{ key: "delete", name: "删除" },
|
||||||
]}
|
]}
|
||||||
/>,
|
/>,
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const AliSettings: React.FC = () => {
|
const AliSettings: React.FC = () => {
|
||||||
const actionRef = useRef<ActionType>();
|
const actionRef = useRef<ActionType>();
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const showDrawer = () => {
|
const showDrawer = () => {
|
||||||
setOpen(true);
|
setOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClose = () => {
|
const onClose = () => {
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
};
|
};
|
||||||
const AddAliOssConfigDrawer = () => {
|
const AddAliOssConfigDrawer = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Drawer
|
<Drawer
|
||||||
title="创建连接配置"
|
title="创建连接配置"
|
||||||
width={720}
|
width={720}
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
open={open}
|
open={open}
|
||||||
styles={{
|
styles={{
|
||||||
body: {
|
body: {
|
||||||
paddingBottom: 80,
|
paddingBottom: 80,
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
extra={
|
extra={
|
||||||
<Space>
|
<Space>
|
||||||
<Button onClick={onClose}>取消</Button>
|
<Button onClick={onClose}>取消</Button>
|
||||||
<Button onClick={onClose} type="primary">
|
<Button onClick={onClose} type="primary">
|
||||||
提交
|
提交
|
||||||
</Button>
|
</Button>
|
||||||
</Space>
|
</Space>
|
||||||
}>
|
}>
|
||||||
<Form layout="vertical">
|
<Form layout="vertical">
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="endpoint"
|
name="endpoint"
|
||||||
label="服务地址"
|
label="服务地址"
|
||||||
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
||||||
<Input placeholder="请输入服务地址！" />
|
<Input placeholder="请输入服务地址！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="accessKeyId"
|
name="accessKeyId"
|
||||||
label="密钥ID"
|
label="密钥ID"
|
||||||
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
||||||
<Input placeholder="请输入密钥ID！" />
|
<Input placeholder="请输入密钥ID！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="accessKeySecret"
|
name="accessKeySecret"
|
||||||
label="密钥值"
|
label="密钥值"
|
||||||
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
||||||
<Input placeholder="请输入密钥值！" />
|
<Input placeholder="请输入密钥值！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</Form>
|
</Form>
|
||||||
</Drawer>
|
</Drawer>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ProTable<AliOssConfigItem>
|
<div style={{ height: "65vh" }}>
|
||||||
columns={columns}
|
<ProTable<AliOssConfigItem>
|
||||||
dataSource={data}
|
columns={columns}
|
||||||
actionRef={actionRef}
|
dataSource={data}
|
||||||
cardBordered={true}
|
actionRef={actionRef}
|
||||||
editable={{
|
cardBordered={true}
|
||||||
type: "multiple",
|
editable={{
|
||||||
}}
|
type: "multiple",
|
||||||
columnsState={{
|
}}
|
||||||
persistenceKey: "pro-table-singe-demos",
|
columnsState={{
|
||||||
persistenceType: "localStorage",
|
persistenceKey: "pro-table-singe-demos",
|
||||||
defaultValue: {
|
persistenceType: "localStorage",
|
||||||
option: { fixed: "right", disable: true },
|
defaultValue: {
|
||||||
},
|
option: { fixed: "right", disable: true },
|
||||||
}}
|
},
|
||||||
rowKey="id"
|
}}
|
||||||
search={false}
|
rowKey="id"
|
||||||
options={{
|
search={false}
|
||||||
setting: {
|
options={{
|
||||||
listsHeight: 400,
|
setting: {
|
||||||
},
|
listsHeight: 400,
|
||||||
}}
|
},
|
||||||
pagination={{
|
}}
|
||||||
pageSize: 5,
|
pagination={
|
||||||
}}
|
{
|
||||||
dateFormatter="string"
|
pageSize: 5,
|
||||||
headerTitle="阿里云OSS配置"
|
} as any
|
||||||
bordered={false}
|
}
|
||||||
toolBarRender={() => [
|
dateFormatter="string"
|
||||||
<Button
|
headerTitle="阿里云OSS配置"
|
||||||
key="button"
|
bordered={false}
|
||||||
icon={<PlusOutlined />}
|
toolBarRender={() => [
|
||||||
onClick={() => {
|
<Button
|
||||||
showDrawer();
|
key="button"
|
||||||
}}
|
icon={<PlusOutlined />}
|
||||||
type="primary">
|
onClick={() => {
|
||||||
新建
|
showDrawer();
|
||||||
</Button>,
|
}}
|
||||||
]}
|
type="primary">
|
||||||
/>
|
新建
|
||||||
<AddAliOssConfigDrawer />
|
</Button>,
|
||||||
</>
|
]}
|
||||||
);
|
/>
|
||||||
};
|
<AddAliOssConfigDrawer />
|
||||||
|
</div>
|
||||||
export default AliSettings;
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AliSettings;
|
||||||
|
|||||||
@@ -1,261 +1,263 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
import { PlusOutlined } from "@ant-design/icons";
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
import React, { useRef, useState } from "react";
|
import React, { ReactNode, useRef, useState } from "react";
|
||||||
|
|
||||||
type AliOssConfigItem = {
|
type AwsOssConfigItem = {
|
||||||
id: number;
|
id: number;
|
||||||
userId: number;
|
userId: number;
|
||||||
bucketName: string;
|
bucketName: string;
|
||||||
accessKeyId: string;
|
accessKeyId: string;
|
||||||
secretAccessKey: string;
|
secretAccessKey: string;
|
||||||
region: string;
|
region: string;
|
||||||
mode: string;
|
mode: string;
|
||||||
createdTime: string;
|
createdTime: string;
|
||||||
updatedTime: string;
|
updatedTime: string;
|
||||||
status: string;
|
status: string;
|
||||||
};
|
};
|
||||||
const data: AliOssConfigItem[] = [
|
const data: AwsOssConfigItem[] = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
userId: 1,
|
userId: 1,
|
||||||
bucketName: "https://oss.aliyuncs.com",
|
bucketName: "https://oss.aliyuncs.com",
|
||||||
accessKeyId: "LTAI5tG3",
|
accessKeyId: "LTAI5tG3",
|
||||||
secretAccessKey: "G3",
|
secretAccessKey: "G3",
|
||||||
region: "2024-06-28 10:51:59",
|
region: "2024-06-28 10:51:59",
|
||||||
mode: "2024-06-29 10:51:59",
|
mode: "2024-06-29 10:51:59",
|
||||||
createdTime: "2024-06-28 10:51:59",
|
createdTime: "2024-06-28 10:51:59",
|
||||||
updatedTime: "2024-06-29 10:51:59",
|
updatedTime: "2024-06-29 10:51:59",
|
||||||
status: "正常",
|
status: "正常",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const columns: ProColumns<AliOssConfigItem>[] = [
|
const columns: ProColumns<AwsOssConfigItem>[] = [
|
||||||
{
|
{
|
||||||
dataIndex: "index",
|
dataIndex: "index",
|
||||||
valueType: "indexBorder",
|
valueType: "indexBorder",
|
||||||
width: 48,
|
width: 48,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ID",
|
title: "ID",
|
||||||
dataIndex: "id",
|
dataIndex: "id",
|
||||||
copyable: true,
|
copyable: true,
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
tooltip: "Id",
|
tooltip: "Id",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "存储桶",
|
title: "存储桶",
|
||||||
dataIndex: "bucketName",
|
dataIndex: "bucketName",
|
||||||
tooltip: "bucket",
|
tooltip: "bucket",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥ID",
|
title: "密钥ID",
|
||||||
dataIndex: "accessKeyId",
|
dataIndex: "accessKeyId",
|
||||||
tooltip: "access key id",
|
tooltip: "access key id",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥值",
|
title: "密钥值",
|
||||||
dataIndex: "secretAccessKey",
|
dataIndex: "secretAccessKey",
|
||||||
tooltip: "secret access key",
|
tooltip: "secret access key",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "地区",
|
title: "地区",
|
||||||
dataIndex: "region",
|
dataIndex: "region",
|
||||||
tooltip: "region",
|
tooltip: "region",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "模式",
|
title: "模式",
|
||||||
dataIndex: "mode",
|
dataIndex: "mode",
|
||||||
tooltip: "mode",
|
tooltip: "mode",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "状态",
|
title: "状态",
|
||||||
dataIndex: "status",
|
dataIndex: "status",
|
||||||
search: true,
|
search: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "创建时间",
|
title: "创建时间",
|
||||||
dataIndex: "createdTime",
|
dataIndex: "createdTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
hideInSearch: true,
|
hideInSearch: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "更新时间",
|
title: "更新时间",
|
||||||
dataIndex: "updatedTime",
|
dataIndex: "updatedTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "操作",
|
title: "操作",
|
||||||
valueType: "option",
|
valueType: "option",
|
||||||
key: "option",
|
key: "option",
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
render: (text: ReactNode, record: AwsOssConfigItem, _, action: any) => [
|
||||||
// @ts-expect-error
|
<a
|
||||||
render: (text, record, _, action) => [
|
key="editable"
|
||||||
<a
|
onClick={() => {
|
||||||
key="editable"
|
action?.startEditable?.(record.id);
|
||||||
onClick={() => {
|
}}>
|
||||||
action?.startEditable?.(record.id);
|
编辑
|
||||||
}}>
|
</a>,
|
||||||
编辑
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
</a>,
|
查看
|
||||||
<a target="_blank" rel="noopener noreferrer" key="view">
|
</a>,
|
||||||
查看
|
<TableDropdown
|
||||||
</a>,
|
key="actionGroup"
|
||||||
<TableDropdown
|
onSelect={() => action?.reload()}
|
||||||
key="actionGroup"
|
menus={[
|
||||||
onSelect={() => action?.reload()}
|
{ key: "copy", name: "复制" },
|
||||||
menus={[
|
{ key: "delete", name: "删除" },
|
||||||
{ key: "copy", name: "复制" },
|
]}
|
||||||
{ key: "delete", name: "删除" },
|
/>,
|
||||||
]}
|
],
|
||||||
/>,
|
},
|
||||||
],
|
];
|
||||||
},
|
|
||||||
];
|
const AwsSettings: React.FC = () => {
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
const AwsSettings: React.FC = () => {
|
const [open, setOpen] = useState(false);
|
||||||
const actionRef = useRef<ActionType>();
|
const showDrawer = () => {
|
||||||
const [open, setOpen] = useState(false);
|
setOpen(true);
|
||||||
const showDrawer = () => {
|
};
|
||||||
setOpen(true);
|
|
||||||
};
|
const onClose = () => {
|
||||||
|
setOpen(false);
|
||||||
const onClose = () => {
|
};
|
||||||
setOpen(false);
|
const AddAwsOssConfigDrawer = () => {
|
||||||
};
|
return (
|
||||||
const AddAwsOssConfigDrawer = () => {
|
<>
|
||||||
return (
|
<Drawer
|
||||||
<>
|
title="创建连接配置"
|
||||||
<Drawer
|
width={720}
|
||||||
title="创建连接配置"
|
onClose={onClose}
|
||||||
width={720}
|
open={open}
|
||||||
onClose={onClose}
|
styles={{
|
||||||
open={open}
|
body: {
|
||||||
styles={{
|
paddingBottom: 80,
|
||||||
body: {
|
},
|
||||||
paddingBottom: 80,
|
}}
|
||||||
},
|
extra={
|
||||||
}}
|
<Space>
|
||||||
extra={
|
<Button onClick={onClose}>取消</Button>
|
||||||
<Space>
|
<Button onClick={onClose} type="primary">
|
||||||
<Button onClick={onClose}>取消</Button>
|
提交
|
||||||
<Button onClick={onClose} type="primary">
|
</Button>
|
||||||
提交
|
</Space>
|
||||||
</Button>
|
}>
|
||||||
</Space>
|
<Form layout="vertical">
|
||||||
}>
|
<Row gutter={16}>
|
||||||
<Form layout="vertical">
|
<Col span={12}>
|
||||||
<Row gutter={16}>
|
<Form.Item
|
||||||
<Col span={12}>
|
name="bucketName"
|
||||||
<Form.Item
|
label="存储桶"
|
||||||
name="bucketName"
|
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
||||||
label="存储桶"
|
<Input placeholder="请输入存储桶！" />
|
||||||
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
</Form.Item>
|
||||||
<Input placeholder="请输入存储桶！" />
|
</Col>
|
||||||
</Form.Item>
|
<Col span={12}>
|
||||||
</Col>
|
<Form.Item
|
||||||
<Col span={12}>
|
name="region"
|
||||||
<Form.Item
|
label="地区"
|
||||||
name="region"
|
rules={[{ required: true, message: "请输入地区！" }]}>
|
||||||
label="地区"
|
<Input placeholder="请输入地区！" />
|
||||||
rules={[{ required: true, message: "请输入地区！" }]}>
|
</Form.Item>
|
||||||
<Input placeholder="请输入地区！" />
|
</Col>
|
||||||
</Form.Item>
|
</Row>
|
||||||
</Col>
|
<Row gutter={16}>
|
||||||
</Row>
|
<Col span={12}>
|
||||||
<Row gutter={16}>
|
<Form.Item
|
||||||
<Col span={12}>
|
name="accessKeyId"
|
||||||
<Form.Item
|
label="密钥ID"
|
||||||
name="accessKeyId"
|
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
||||||
label="密钥ID"
|
<Input placeholder="请输入密钥ID！" />
|
||||||
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
</Form.Item>
|
||||||
<Input placeholder="请输入密钥ID！" />
|
</Col>
|
||||||
</Form.Item>
|
<Col span={12}>
|
||||||
</Col>
|
<Form.Item
|
||||||
<Col span={12}>
|
name="secretAccessKey"
|
||||||
<Form.Item
|
label="密钥值"
|
||||||
name="secretAccessKey"
|
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
||||||
label="密钥值"
|
<Input placeholder="请输入密钥值！" />
|
||||||
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
</Form.Item>
|
||||||
<Input placeholder="请输入密钥值！" />
|
</Col>
|
||||||
</Form.Item>
|
</Row>
|
||||||
</Col>
|
<Row gutter={16}>
|
||||||
</Row>
|
<Col span={12}>
|
||||||
<Row gutter={16}>
|
<Form.Item
|
||||||
<Col span={12}>
|
name="mode"
|
||||||
<Form.Item
|
label="模式"
|
||||||
name="mode"
|
rules={[{ required: true, message: "请输入模式!" }]}>
|
||||||
label="模式"
|
<Input placeholder="请输入模式！" />
|
||||||
rules={[{ required: true, message: "请输入模式!" }]}>
|
</Form.Item>
|
||||||
<Input placeholder="请输入模式！" />
|
</Col>
|
||||||
</Form.Item>
|
</Row>
|
||||||
</Col>
|
</Form>
|
||||||
</Row>
|
</Drawer>
|
||||||
</Form>
|
</>
|
||||||
</Drawer>
|
);
|
||||||
</>
|
};
|
||||||
);
|
return (
|
||||||
};
|
<>
|
||||||
return (
|
<div style={{ height: "65vh" }}>
|
||||||
<>
|
<ProTable<AwsOssConfigItem>
|
||||||
<ProTable<AliOssConfigItem>
|
columns={columns}
|
||||||
columns={columns}
|
dataSource={data}
|
||||||
dataSource={data}
|
actionRef={actionRef}
|
||||||
actionRef={actionRef}
|
cardBordered={true}
|
||||||
cardBordered={true}
|
editable={{
|
||||||
editable={{
|
type: "multiple",
|
||||||
type: "multiple",
|
}}
|
||||||
}}
|
columnsState={{
|
||||||
columnsState={{
|
persistenceKey: "pro-table-singe-demos",
|
||||||
persistenceKey: "pro-table-singe-demos",
|
persistenceType: "localStorage",
|
||||||
persistenceType: "localStorage",
|
defaultValue: {
|
||||||
defaultValue: {
|
option: { fixed: "right", disable: true },
|
||||||
option: { fixed: "right", disable: true },
|
},
|
||||||
},
|
}}
|
||||||
}}
|
rowKey="id"
|
||||||
rowKey="id"
|
search={false}
|
||||||
search={false}
|
options={{
|
||||||
options={{
|
setting: {
|
||||||
setting: {
|
listsHeight: 400,
|
||||||
listsHeight: 400,
|
},
|
||||||
},
|
}}
|
||||||
}}
|
pagination={
|
||||||
pagination={{
|
{
|
||||||
pageSize: 5,
|
pageSize: 5,
|
||||||
}}
|
} as any
|
||||||
dateFormatter="string"
|
}
|
||||||
headerTitle="亚马逊S3配置"
|
dateFormatter="string"
|
||||||
bordered={false}
|
headerTitle="亚马逊S3配置"
|
||||||
toolBarRender={() => [
|
bordered={false}
|
||||||
<Button
|
toolBarRender={() => [
|
||||||
key="button"
|
<Button
|
||||||
icon={<PlusOutlined />}
|
key="button"
|
||||||
onClick={() => {
|
icon={<PlusOutlined />}
|
||||||
showDrawer();
|
onClick={() => {
|
||||||
}}
|
showDrawer();
|
||||||
type="primary">
|
}}
|
||||||
新建
|
type="primary">
|
||||||
</Button>,
|
新建
|
||||||
]}
|
</Button>,
|
||||||
/>
|
]}
|
||||||
<AddAwsOssConfigDrawer />
|
/>
|
||||||
</>
|
<AddAwsOssConfigDrawer />
|
||||||
);
|
</div>
|
||||||
};
|
</>
|
||||||
|
);
|
||||||
export default AwsSettings;
|
};
|
||||||
|
|
||||||
|
export default AwsSettings;
|
||||||
|
|||||||
@@ -1,290 +1,292 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
import { PlusOutlined } from "@ant-design/icons";
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
import { ProTable, TableDropdown } 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 { Button, Col, DatePicker, Drawer, Form, Input, Row, Select, Space } from "antd";
|
||||||
import React, { useRef, useState } from "react";
|
import React, { ReactNode, useRef, useState } from "react";
|
||||||
|
|
||||||
type AliOssConfigItem = {
|
type BaiduOssConfigItem = {
|
||||||
id: number;
|
id: number;
|
||||||
userId: number;
|
userId: number;
|
||||||
endpoint: string;
|
endpoint: string;
|
||||||
accessKeyId: string;
|
accessKeyId: string;
|
||||||
accessKeySecret: string;
|
accessKeySecret: string;
|
||||||
created_time: string;
|
created_time: string;
|
||||||
updated_time: string;
|
updated_time: string;
|
||||||
status: string;
|
status: string;
|
||||||
};
|
};
|
||||||
const data: AliOssConfigItem[] = [
|
const data: BaiduOssConfigItem[] = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
userId: 1,
|
userId: 1,
|
||||||
endpoint: "https://oss.aliyuncs.com",
|
endpoint: "https://oss.aliyuncs.com",
|
||||||
accessKeyId: "LTAI5tG3",
|
accessKeyId: "LTAI5tG3",
|
||||||
accessKeySecret: "G3",
|
accessKeySecret: "G3",
|
||||||
created_time: "2022-01-01",
|
created_time: "2022-01-01",
|
||||||
updated_time: "2022-01-01",
|
updated_time: "2022-01-01",
|
||||||
status: "正常",
|
status: "正常",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const columns: ProColumns<AliOssConfigItem>[] = [
|
const columns: ProColumns<BaiduOssConfigItem>[] = [
|
||||||
{
|
{
|
||||||
dataIndex: "index",
|
dataIndex: "index",
|
||||||
valueType: "indexBorder",
|
valueType: "indexBorder",
|
||||||
width: 48,
|
width: 48,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ID",
|
title: "ID",
|
||||||
dataIndex: "id",
|
dataIndex: "id",
|
||||||
copyable: true,
|
copyable: true,
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
tooltip: "Id",
|
tooltip: "Id",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "服务地址",
|
title: "服务地址",
|
||||||
dataIndex: "endpoint",
|
dataIndex: "endpoint",
|
||||||
tooltip: "endpoint",
|
tooltip: "endpoint",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥ID",
|
title: "密钥ID",
|
||||||
dataIndex: "accessKeyId",
|
dataIndex: "accessKeyId",
|
||||||
tooltip: "access key id",
|
tooltip: "access key id",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥值",
|
title: "密钥值",
|
||||||
dataIndex: "accessKeySecret",
|
dataIndex: "accessKeySecret",
|
||||||
tooltip: "access key secret",
|
tooltip: "access key secret",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "状态",
|
title: "状态",
|
||||||
dataIndex: "status",
|
dataIndex: "status",
|
||||||
search: true,
|
search: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "创建时间",
|
title: "创建时间",
|
||||||
dataIndex: "createdTime",
|
dataIndex: "createdTime",
|
||||||
valueType: "date",
|
valueType: "date",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
hideInSearch: true,
|
hideInSearch: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "更新时间",
|
title: "更新时间",
|
||||||
dataIndex: "updateTime",
|
dataIndex: "updateTime",
|
||||||
valueType: "date",
|
valueType: "date",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "操作",
|
title: "操作",
|
||||||
valueType: "option",
|
valueType: "option",
|
||||||
key: "option",
|
key: "option",
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
render: (text: ReactNode, record: BaiduOssConfigItem, _, action: any) => [
|
||||||
// @ts-expect-error
|
<a
|
||||||
render: (text, record, _, action) => [
|
key="editable"
|
||||||
<a
|
onClick={() => {
|
||||||
key="editable"
|
action?.startEditable?.(record.id);
|
||||||
onClick={() => {
|
}}>
|
||||||
action?.startEditable?.(record.id);
|
编辑
|
||||||
}}>
|
</a>,
|
||||||
编辑
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
</a>,
|
查看
|
||||||
<a target="_blank" rel="noopener noreferrer" key="view">
|
</a>,
|
||||||
查看
|
<TableDropdown
|
||||||
</a>,
|
key="actionGroup"
|
||||||
<TableDropdown
|
onSelect={() => action?.reload()}
|
||||||
key="actionGroup"
|
menus={[
|
||||||
onSelect={() => action?.reload()}
|
{ key: "copy", name: "复制" },
|
||||||
menus={[
|
{ key: "delete", name: "删除" },
|
||||||
{ key: "copy", name: "复制" },
|
]}
|
||||||
{ key: "delete", name: "删除" },
|
/>,
|
||||||
]}
|
],
|
||||||
/>,
|
},
|
||||||
],
|
];
|
||||||
},
|
|
||||||
];
|
const BaiduSettings: React.FC = () => {
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
const BaiduSettings: React.FC = () => {
|
const [open, setOpen] = useState(false);
|
||||||
const actionRef = useRef<ActionType>();
|
const showDrawer = () => {
|
||||||
const [open, setOpen] = useState(false);
|
setOpen(true);
|
||||||
const showDrawer = () => {
|
};
|
||||||
setOpen(true);
|
|
||||||
};
|
const onClose = () => {
|
||||||
|
setOpen(false);
|
||||||
const onClose = () => {
|
};
|
||||||
setOpen(false);
|
const AddBaiduOssConfigDrawer = () => {
|
||||||
};
|
return (
|
||||||
const AddBaiduOssConfigDrawer = () => {
|
<>
|
||||||
return (
|
<Drawer
|
||||||
<>
|
title="Create a new account"
|
||||||
<Drawer
|
width={720}
|
||||||
title="Create a new account"
|
onClose={onClose}
|
||||||
width={720}
|
open={open}
|
||||||
onClose={onClose}
|
styles={{
|
||||||
open={open}
|
body: {
|
||||||
styles={{
|
paddingBottom: 80,
|
||||||
body: {
|
},
|
||||||
paddingBottom: 80,
|
}}
|
||||||
},
|
extra={
|
||||||
}}
|
<Space>
|
||||||
extra={
|
<Button onClick={onClose}>Cancel</Button>
|
||||||
<Space>
|
<Button onClick={onClose} type="primary">
|
||||||
<Button onClick={onClose}>Cancel</Button>
|
Submit
|
||||||
<Button onClick={onClose} type="primary">
|
</Button>
|
||||||
Submit
|
</Space>
|
||||||
</Button>
|
}>
|
||||||
</Space>
|
<Form layout="vertical" hideRequiredMark>
|
||||||
}>
|
<Row gutter={16}>
|
||||||
<Form layout="vertical" hideRequiredMark>
|
<Col span={12}>
|
||||||
<Row gutter={16}>
|
<Form.Item
|
||||||
<Col span={12}>
|
name="name"
|
||||||
<Form.Item
|
label="Name"
|
||||||
name="name"
|
rules={[{ required: true, message: "Please enter user name" }]}>
|
||||||
label="Name"
|
<Input placeholder="Please enter user name" />
|
||||||
rules={[{ required: true, message: "Please enter user name" }]}>
|
</Form.Item>
|
||||||
<Input placeholder="Please enter user name" />
|
</Col>
|
||||||
</Form.Item>
|
<Col span={12}>
|
||||||
</Col>
|
<Form.Item
|
||||||
<Col span={12}>
|
name="url"
|
||||||
<Form.Item
|
label="Url"
|
||||||
name="url"
|
rules={[{ required: true, message: "Please enter url" }]}>
|
||||||
label="Url"
|
<Input
|
||||||
rules={[{ required: true, message: "Please enter url" }]}>
|
style={{ width: "100%" }}
|
||||||
<Input
|
addonBefore="http://"
|
||||||
style={{ width: "100%" }}
|
addonAfter=".com"
|
||||||
addonBefore="http://"
|
placeholder="Please enter url"
|
||||||
addonAfter=".com"
|
/>
|
||||||
placeholder="Please enter url"
|
</Form.Item>
|
||||||
/>
|
</Col>
|
||||||
</Form.Item>
|
</Row>
|
||||||
</Col>
|
<Row gutter={16}>
|
||||||
</Row>
|
<Col span={12}>
|
||||||
<Row gutter={16}>
|
<Form.Item
|
||||||
<Col span={12}>
|
name="owner"
|
||||||
<Form.Item
|
label="Owner"
|
||||||
name="owner"
|
rules={[{ required: true, message: "Please select an owner" }]}>
|
||||||
label="Owner"
|
<Select placeholder="Please select an owner">
|
||||||
rules={[{ required: true, message: "Please select an owner" }]}>
|
<Select.Option value="xiao">Xiaoxiao Fu</Select.Option>
|
||||||
<Select placeholder="Please select an owner">
|
<Select.Option value="mao">Maomao Zhou</Select.Option>
|
||||||
<Select.Option value="xiao">Xiaoxiao Fu</Select.Option>
|
</Select>
|
||||||
<Select.Option value="mao">Maomao Zhou</Select.Option>
|
</Form.Item>
|
||||||
</Select>
|
</Col>
|
||||||
</Form.Item>
|
<Col span={12}>
|
||||||
</Col>
|
<Form.Item
|
||||||
<Col span={12}>
|
name="type"
|
||||||
<Form.Item
|
label="Type"
|
||||||
name="type"
|
rules={[{ required: true, message: "Please choose the type" }]}>
|
||||||
label="Type"
|
<Select placeholder="Please choose the type">
|
||||||
rules={[{ required: true, message: "Please choose the type" }]}>
|
<Select.Option value="private">Private</Select.Option>
|
||||||
<Select placeholder="Please choose the type">
|
<Select.Option value="public">Public</Select.Option>
|
||||||
<Select.Option value="private">Private</Select.Option>
|
</Select>
|
||||||
<Select.Option value="public">Public</Select.Option>
|
</Form.Item>
|
||||||
</Select>
|
</Col>
|
||||||
</Form.Item>
|
</Row>
|
||||||
</Col>
|
<Row gutter={16}>
|
||||||
</Row>
|
<Col span={12}>
|
||||||
<Row gutter={16}>
|
<Form.Item
|
||||||
<Col span={12}>
|
name="approver"
|
||||||
<Form.Item
|
label="Approver"
|
||||||
name="approver"
|
rules={[
|
||||||
label="Approver"
|
{ required: true, message: "Please choose the approver" },
|
||||||
rules={[
|
]}>
|
||||||
{ required: true, message: "Please choose the approver" },
|
<Select placeholder="Please choose the approver">
|
||||||
]}>
|
<Select.Option value="jack">Jack Ma</Select.Option>
|
||||||
<Select placeholder="Please choose the approver">
|
<Select.Option value="tom">Tom Liu</Select.Option>
|
||||||
<Select.Option value="jack">Jack Ma</Select.Option>
|
</Select>
|
||||||
<Select.Option value="tom">Tom Liu</Select.Option>
|
</Form.Item>
|
||||||
</Select>
|
</Col>
|
||||||
</Form.Item>
|
<Col span={12}>
|
||||||
</Col>
|
<Form.Item
|
||||||
<Col span={12}>
|
name="dateTime"
|
||||||
<Form.Item
|
label="DateTime"
|
||||||
name="dateTime"
|
rules={[
|
||||||
label="DateTime"
|
{ required: true, message: "Please choose the dateTime" },
|
||||||
rules={[
|
]}>
|
||||||
{ required: true, message: "Please choose the dateTime" },
|
<DatePicker.RangePicker
|
||||||
]}>
|
style={{ width: "100%" }}
|
||||||
<DatePicker.RangePicker
|
getPopupContainer={(trigger) => trigger.parentElement!}
|
||||||
style={{ width: "100%" }}
|
/>
|
||||||
getPopupContainer={(trigger) => trigger.parentElement!}
|
</Form.Item>
|
||||||
/>
|
</Col>
|
||||||
</Form.Item>
|
</Row>
|
||||||
</Col>
|
<Row gutter={16}>
|
||||||
</Row>
|
<Col span={24}>
|
||||||
<Row gutter={16}>
|
<Form.Item
|
||||||
<Col span={24}>
|
name="description"
|
||||||
<Form.Item
|
label="Description"
|
||||||
name="description"
|
rules={[
|
||||||
label="Description"
|
{
|
||||||
rules={[
|
required: true,
|
||||||
{
|
message: "please enter url description",
|
||||||
required: true,
|
},
|
||||||
message: "please enter url description",
|
]}>
|
||||||
},
|
<Input.TextArea
|
||||||
]}>
|
rows={4}
|
||||||
<Input.TextArea
|
placeholder="please enter url description"
|
||||||
rows={4}
|
/>
|
||||||
placeholder="please enter url description"
|
</Form.Item>
|
||||||
/>
|
</Col>
|
||||||
</Form.Item>
|
</Row>
|
||||||
</Col>
|
</Form>
|
||||||
</Row>
|
</Drawer>
|
||||||
</Form>
|
</>
|
||||||
</Drawer>
|
);
|
||||||
</>
|
};
|
||||||
);
|
return (
|
||||||
};
|
<>
|
||||||
return (
|
<div style={{ height: "65vh" }}>
|
||||||
<>
|
<ProTable<BaiduOssConfigItem>
|
||||||
<ProTable<AliOssConfigItem>
|
columns={columns}
|
||||||
columns={columns}
|
dataSource={data}
|
||||||
dataSource={data}
|
actionRef={actionRef}
|
||||||
actionRef={actionRef}
|
cardBordered={true}
|
||||||
cardBordered={true}
|
editable={{
|
||||||
editable={{
|
type: "multiple",
|
||||||
type: "multiple",
|
}}
|
||||||
}}
|
columnsState={{
|
||||||
columnsState={{
|
persistenceKey: "pro-table-singe-demos",
|
||||||
persistenceKey: "pro-table-singe-demos",
|
persistenceType: "localStorage",
|
||||||
persistenceType: "localStorage",
|
defaultValue: {
|
||||||
defaultValue: {
|
option: { fixed: "right", disable: true },
|
||||||
option: { fixed: "right", disable: true },
|
},
|
||||||
},
|
}}
|
||||||
}}
|
rowKey="id"
|
||||||
rowKey="id"
|
search={false}
|
||||||
search={false}
|
options={{
|
||||||
options={{
|
setting: {
|
||||||
setting: {
|
listsHeight: 400,
|
||||||
listsHeight: 400,
|
},
|
||||||
},
|
}}
|
||||||
}}
|
pagination={
|
||||||
pagination={{
|
{
|
||||||
pageSize: 5,
|
pageSize: 5,
|
||||||
}}
|
} as any
|
||||||
dateFormatter="string"
|
}
|
||||||
headerTitle="百度云BOS配置"
|
dateFormatter="string"
|
||||||
bordered={false}
|
headerTitle="百度云BOS配置"
|
||||||
toolBarRender={() => [
|
bordered={false}
|
||||||
<Button
|
toolBarRender={() => [
|
||||||
key="button"
|
<Button
|
||||||
icon={<PlusOutlined />}
|
key="button"
|
||||||
onClick={() => {
|
icon={<PlusOutlined />}
|
||||||
showDrawer();
|
onClick={() => {
|
||||||
}}
|
showDrawer();
|
||||||
type="primary">
|
}}
|
||||||
新建
|
type="primary">
|
||||||
</Button>,
|
新建
|
||||||
]}
|
</Button>,
|
||||||
/>
|
]}
|
||||||
<AddBaiduOssConfigDrawer />
|
/>
|
||||||
</>
|
<AddBaiduOssConfigDrawer />
|
||||||
);
|
</div>
|
||||||
};
|
</>
|
||||||
|
);
|
||||||
export default BaiduSettings;
|
};
|
||||||
|
|
||||||
|
export default BaiduSettings;
|
||||||
|
|||||||
@@ -1,242 +1,246 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
import { PlusOutlined } from "@ant-design/icons";
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
import React, { useRef, useState } from "react";
|
import React, { ReactNode, useRef, useState } from "react";
|
||||||
|
|
||||||
type AliOssConfigItem = {
|
type HuaweiOssConfigItem = {
|
||||||
id: number;
|
id: number;
|
||||||
userId: number;
|
userId: number;
|
||||||
bucketName: string;
|
bucketName: string;
|
||||||
endpoint: string;
|
endpoint: string;
|
||||||
accessKey: string;
|
accessKey: string;
|
||||||
secretKey: string;
|
secretKey: string;
|
||||||
createdTime: string;
|
createdTime: string;
|
||||||
updatedTime: string;
|
updatedTime: string;
|
||||||
status: string;
|
status: string;
|
||||||
};
|
};
|
||||||
const data: AliOssConfigItem[] = [
|
const data: HuaweiOssConfigItem[] = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
userId: 1,
|
userId: 1,
|
||||||
bucketName: "666",
|
bucketName: "666",
|
||||||
endpoint: "https://oss.aliyuncs.com",
|
endpoint: "https://oss.aliyuncs.com",
|
||||||
accessKey: "LTAI5tG3",
|
accessKey: "LTAI5tG3",
|
||||||
secretKey: "G3",
|
secretKey: "G3",
|
||||||
createdTime: "2022-01-01",
|
createdTime: "2022-01-01",
|
||||||
updatedTime: "2022-01-01",
|
updatedTime: "2022-01-01",
|
||||||
status: "正常",
|
status: "正常",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const columns: ProColumns<AliOssConfigItem>[] = [
|
const columns: ProColumns<HuaweiOssConfigItem>[] = [
|
||||||
{
|
{
|
||||||
dataIndex: "index",
|
dataIndex: "index",
|
||||||
valueType: "indexBorder",
|
valueType: "indexBorder",
|
||||||
width: 48,
|
width: 48,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ID",
|
title: "ID",
|
||||||
dataIndex: "id",
|
dataIndex: "id",
|
||||||
copyable: true,
|
copyable: true,
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
tooltip: "Id",
|
tooltip: "Id",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "存储桶",
|
title: "存储桶",
|
||||||
dataIndex: "bucketName",
|
dataIndex: "bucketName",
|
||||||
tooltip: "bucketName",
|
tooltip: "bucketName",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "服务地址",
|
title: "服务地址",
|
||||||
dataIndex: "endpoint",
|
dataIndex: "endpoint",
|
||||||
tooltip: "endpoint",
|
tooltip: "endpoint",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥ID",
|
title: "密钥ID",
|
||||||
dataIndex: "accessKey",
|
dataIndex: "accessKey",
|
||||||
tooltip: "access key",
|
tooltip: "access key",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥值",
|
title: "密钥值",
|
||||||
dataIndex: "secretKey",
|
dataIndex: "secretKey",
|
||||||
tooltip: "secret key",
|
tooltip: "secret key",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "状态",
|
title: "状态",
|
||||||
dataIndex: "status",
|
dataIndex: "status",
|
||||||
search: true,
|
search: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "创建时间",
|
title: "创建时间",
|
||||||
dataIndex: "createdTime",
|
dataIndex: "createdTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
hideInSearch: true,
|
hideInSearch: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "更新时间",
|
title: "更新时间",
|
||||||
dataIndex: "updatedTime",
|
dataIndex: "updatedTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "操作",
|
title: "操作",
|
||||||
valueType: "option",
|
valueType: "option",
|
||||||
key: "option",
|
key: "option",
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
render: (text, record, _, action) => [
|
render: (text: ReactNode, record: HuaweiOssConfigItem, _: number, action: any) => [
|
||||||
<a
|
<a
|
||||||
key="editable"
|
key="editable"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
action?.startEditable?.(record.id);
|
action?.startEditable?.(record.id);
|
||||||
}}>
|
}}>
|
||||||
编辑
|
编辑
|
||||||
</a>,
|
</a>,
|
||||||
<a target="_blank" rel="noopener noreferrer" key="view">
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
查看
|
查看
|
||||||
</a>,
|
</a>,
|
||||||
<TableDropdown
|
<TableDropdown
|
||||||
key="actionGroup"
|
key="actionGroup"
|
||||||
onSelect={() => action?.reload()}
|
onSelect={() => action?.reload()}
|
||||||
menus={[
|
menus={[
|
||||||
{ key: "copy", name: "复制" },
|
{ key: "copy", name: "复制" },
|
||||||
{ key: "delete", name: "删除" },
|
{ key: "delete", name: "删除" },
|
||||||
]}
|
]}
|
||||||
/>,
|
/>,
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const HuawaiSettings: React.FC = () => {
|
const HuawaiSettings: React.FC = () => {
|
||||||
const actionRef = useRef<ActionType>();
|
const actionRef = useRef<ActionType>();
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const showDrawer = () => {
|
const showDrawer = () => {
|
||||||
setOpen(true);
|
setOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClose = () => {
|
const onClose = () => {
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
};
|
};
|
||||||
const AddHuaweiOssConfigDrawer = () => {
|
const AddHuaweiOssConfigDrawer = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Drawer
|
<Drawer
|
||||||
title="创建连接配置"
|
title="创建连接配置"
|
||||||
width={720}
|
width={720}
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
open={open}
|
open={open}
|
||||||
styles={{
|
styles={{
|
||||||
body: {
|
body: {
|
||||||
paddingBottom: 80,
|
paddingBottom: 80,
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
extra={
|
extra={
|
||||||
<Space>
|
<Space>
|
||||||
<Button onClick={onClose}>取消</Button>
|
<Button onClick={onClose}>取消</Button>
|
||||||
<Button onClick={onClose} type="primary">
|
<Button onClick={onClose} type="primary">
|
||||||
提交
|
提交
|
||||||
</Button>
|
</Button>
|
||||||
</Space>
|
</Space>
|
||||||
}>
|
}>
|
||||||
<Form layout="vertical">
|
<Form layout="vertical">
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="endpoint"
|
name="endpoint"
|
||||||
label="服务地址"
|
label="服务地址"
|
||||||
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
||||||
<Input placeholder="请输入服务地址！" />
|
<Input placeholder="请输入服务地址！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="bucketName"
|
name="bucketName"
|
||||||
label="存储桶"
|
label="存储桶"
|
||||||
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
||||||
<Input placeholder="请输入存储桶！" />
|
<Input placeholder="请输入存储桶！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="accessKeyId"
|
name="accessKeyId"
|
||||||
label="密钥ID"
|
label="密钥ID"
|
||||||
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
||||||
<Input placeholder="请输入密钥ID！" />
|
<Input placeholder="请输入密钥ID！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="accessKeySecret"
|
name="accessKeySecret"
|
||||||
label="密钥值"
|
label="密钥值"
|
||||||
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
||||||
<Input placeholder="请输入密钥值！" />
|
<Input placeholder="请输入密钥值！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</Form>
|
</Form>
|
||||||
</Drawer>
|
</Drawer>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ProTable<AliOssConfigItem>
|
<div style={{ height: "65vh" }}>
|
||||||
columns={columns}
|
<ProTable<HuaweiOssConfigItem>
|
||||||
dataSource={data}
|
columns={columns}
|
||||||
actionRef={actionRef}
|
dataSource={data}
|
||||||
cardBordered={true}
|
actionRef={actionRef}
|
||||||
editable={{
|
cardBordered={true}
|
||||||
type: "multiple",
|
editable={{
|
||||||
}}
|
type: "multiple",
|
||||||
columnsState={{
|
}}
|
||||||
persistenceKey: "pro-table-singe-demos",
|
columnsState={{
|
||||||
persistenceType: "localStorage",
|
persistenceKey: "pro-table-singe-demos",
|
||||||
defaultValue: {
|
persistenceType: "localStorage",
|
||||||
option: { fixed: "right", disable: true },
|
defaultValue: {
|
||||||
},
|
option: { fixed: "right", disable: true },
|
||||||
}}
|
},
|
||||||
rowKey="id"
|
}}
|
||||||
search={false}
|
rowKey="id"
|
||||||
options={{
|
search={false}
|
||||||
setting: {
|
options={{
|
||||||
listsHeight: 400,
|
setting: {
|
||||||
},
|
listsHeight: 400,
|
||||||
}}
|
},
|
||||||
pagination={{
|
}}
|
||||||
pageSize: 5,
|
pagination={
|
||||||
}}
|
{
|
||||||
dateFormatter="string"
|
pageSize: 5,
|
||||||
headerTitle="华为云OBS配置"
|
} as any
|
||||||
bordered={false}
|
}
|
||||||
toolBarRender={() => [
|
dateFormatter="string"
|
||||||
<Button
|
headerTitle="华为云OBS配置"
|
||||||
key="button"
|
bordered={false}
|
||||||
icon={<PlusOutlined />}
|
toolBarRender={() => [
|
||||||
onClick={() => {
|
<Button
|
||||||
showDrawer();
|
key="button"
|
||||||
}}
|
icon={<PlusOutlined />}
|
||||||
type="primary">
|
onClick={() => {
|
||||||
新建
|
showDrawer();
|
||||||
</Button>,
|
}}
|
||||||
]}
|
type="primary">
|
||||||
/>
|
新建
|
||||||
<AddHuaweiOssConfigDrawer />
|
</Button>,
|
||||||
</>
|
]}
|
||||||
);
|
/>
|
||||||
};
|
<AddHuaweiOssConfigDrawer />
|
||||||
|
</div>
|
||||||
export default HuawaiSettings;
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HuawaiSettings;
|
||||||
|
|||||||
@@ -1,244 +1,248 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
import { PlusOutlined } from "@ant-design/icons";
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
import React, { useRef, useState } from "react";
|
import React, { ReactNode, useRef, useState } from "react";
|
||||||
|
|
||||||
type AliOssConfigItem = {
|
type JdOssConfigItem = {
|
||||||
id: number;
|
id: number;
|
||||||
userId: number;
|
userId: number;
|
||||||
bucketName: number;
|
bucketName: number;
|
||||||
endpoint: string;
|
endpoint: string;
|
||||||
accessKey: string;
|
accessKey: string;
|
||||||
secretKey: string;
|
secretKey: string;
|
||||||
region: string;
|
region: string;
|
||||||
createdTime: string;
|
createdTime: string;
|
||||||
updatedTime: string;
|
updatedTime: string;
|
||||||
status: string;
|
status: string;
|
||||||
};
|
};
|
||||||
const data: AliOssConfigItem[] = [
|
const data: JdOssConfigItem[] = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
userId: 1,
|
userId: 1,
|
||||||
bucketName: 666,
|
bucketName: 666,
|
||||||
endpoint: "https://oss.aliyuncs.com",
|
endpoint: "https://oss.aliyuncs.com",
|
||||||
accessKey: "LTAI5tG3",
|
accessKey: "LTAI5tG3",
|
||||||
secretKey: "G3",
|
secretKey: "G3",
|
||||||
region: "G3",
|
region: "G3",
|
||||||
createdTime: "2022-01-01",
|
createdTime: "2022-01-01",
|
||||||
updatedTime: "2022-01-01",
|
updatedTime: "2022-01-01",
|
||||||
status: "正常",
|
status: "正常",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const columns: ProColumns<AliOssConfigItem>[] = [
|
const columns: ProColumns<JdOssConfigItem>[] = [
|
||||||
{
|
{
|
||||||
dataIndex: "index",
|
dataIndex: "index",
|
||||||
valueType: "indexBorder",
|
valueType: "indexBorder",
|
||||||
width: 48,
|
width: 48,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ID",
|
title: "ID",
|
||||||
dataIndex: "id",
|
dataIndex: "id",
|
||||||
copyable: true,
|
copyable: true,
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
tooltip: "Id",
|
tooltip: "Id",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "服务地址",
|
title: "服务地址",
|
||||||
dataIndex: "endpoint",
|
dataIndex: "endpoint",
|
||||||
tooltip: "endpoint",
|
tooltip: "endpoint",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥ID",
|
title: "密钥ID",
|
||||||
dataIndex: "accessKey",
|
dataIndex: "accessKey",
|
||||||
tooltip: "access key",
|
tooltip: "access key",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥值",
|
title: "密钥值",
|
||||||
dataIndex: "secretKey",
|
dataIndex: "secretKey",
|
||||||
tooltip: "secret key",
|
tooltip: "secret key",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "地区",
|
title: "地区",
|
||||||
dataIndex: "region",
|
dataIndex: "region",
|
||||||
tooltip: "region",
|
tooltip: "region",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "状态",
|
title: "状态",
|
||||||
dataIndex: "status",
|
dataIndex: "status",
|
||||||
search: true,
|
search: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "创建时间",
|
title: "创建时间",
|
||||||
dataIndex: "createdTime",
|
dataIndex: "createdTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
hideInSearch: true,
|
hideInSearch: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "更新时间",
|
title: "更新时间",
|
||||||
dataIndex: "updatedTime",
|
dataIndex: "updatedTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "操作",
|
title: "操作",
|
||||||
valueType: "option",
|
valueType: "option",
|
||||||
key: "option",
|
key: "option",
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
render: (text, record, _, action) => [
|
render: (text: ReactNode, record: JdOssConfigItem, _: number, action: any) => [
|
||||||
<a
|
<a
|
||||||
key="editable"
|
key="editable"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
action?.startEditable?.(record.id);
|
action?.startEditable?.(record.id);
|
||||||
}}>
|
}}>
|
||||||
编辑
|
编辑
|
||||||
</a>,
|
</a>,
|
||||||
<a target="_blank" rel="noopener noreferrer" key="view">
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
查看
|
查看
|
||||||
</a>,
|
</a>,
|
||||||
<TableDropdown
|
<TableDropdown
|
||||||
key="actionGroup"
|
key="actionGroup"
|
||||||
onSelect={() => action?.reload()}
|
onSelect={() => action?.reload()}
|
||||||
menus={[
|
menus={[
|
||||||
{ key: "copy", name: "复制" },
|
{ key: "copy", name: "复制" },
|
||||||
{ key: "delete", name: "删除" },
|
{ key: "delete", name: "删除" },
|
||||||
]}
|
]}
|
||||||
/>,
|
/>,
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const JdSettings: React.FC = () => {
|
const JdSettings: React.FC = () => {
|
||||||
const actionRef = useRef<ActionType>();
|
const actionRef = useRef<ActionType>();
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const showDrawer = () => {
|
const showDrawer = () => {
|
||||||
setOpen(true);
|
setOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClose = () => {
|
const onClose = () => {
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
};
|
};
|
||||||
const AddJdOssConfigDrawer = () => {
|
const AddJdOssConfigDrawer = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Drawer
|
<Drawer
|
||||||
title="创建连接配置"
|
title="创建连接配置"
|
||||||
width={720}
|
width={720}
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
open={open}
|
open={open}
|
||||||
styles={{
|
styles={{
|
||||||
body: {
|
body: {
|
||||||
paddingBottom: 80,
|
paddingBottom: 80,
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
extra={
|
extra={
|
||||||
<Space>
|
<Space>
|
||||||
<Button onClick={onClose}>取消</Button>
|
<Button onClick={onClose}>取消</Button>
|
||||||
<Button onClick={onClose} type="primary">
|
<Button onClick={onClose} type="primary">
|
||||||
提交
|
提交
|
||||||
</Button>
|
</Button>
|
||||||
</Space>
|
</Space>
|
||||||
}>
|
}>
|
||||||
<Form layout="vertical">
|
<Form layout="vertical">
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="endpoint"
|
name="endpoint"
|
||||||
label="服务地址"
|
label="服务地址"
|
||||||
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
||||||
<Input placeholder="请输入服务地址！" />
|
<Input placeholder="请输入服务地址！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="region"
|
name="region"
|
||||||
label="地区"
|
label="地区"
|
||||||
rules={[{ required: true, message: "请输入地区！" }]}>
|
rules={[{ required: true, message: "请输入地区！" }]}>
|
||||||
<Input placeholder="请输入地区！" />
|
<Input placeholder="请输入地区！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="accessKey"
|
name="accessKey"
|
||||||
label="密钥ID"
|
label="密钥ID"
|
||||||
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
||||||
<Input placeholder="请输入密钥ID！" />
|
<Input placeholder="请输入密钥ID！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="secretKey"
|
name="secretKey"
|
||||||
label="密钥值"
|
label="密钥值"
|
||||||
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
||||||
<Input placeholder="请输入密钥值！" />
|
<Input placeholder="请输入密钥值！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</Form>
|
</Form>
|
||||||
</Drawer>
|
</Drawer>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ProTable<AliOssConfigItem>
|
<div style={{ height: "65vh" }}>
|
||||||
columns={columns}
|
<ProTable<JdOssConfigItem>
|
||||||
dataSource={data}
|
columns={columns}
|
||||||
actionRef={actionRef}
|
dataSource={data}
|
||||||
cardBordered={true}
|
actionRef={actionRef}
|
||||||
editable={{
|
cardBordered={true}
|
||||||
type: "multiple",
|
editable={{
|
||||||
}}
|
type: "multiple",
|
||||||
columnsState={{
|
}}
|
||||||
persistenceKey: "pro-table-singe-demos",
|
columnsState={{
|
||||||
persistenceType: "localStorage",
|
persistenceKey: "pro-table-singe-demos",
|
||||||
defaultValue: {
|
persistenceType: "localStorage",
|
||||||
option: { fixed: "right", disable: true },
|
defaultValue: {
|
||||||
},
|
option: { fixed: "right", disable: true },
|
||||||
}}
|
},
|
||||||
rowKey="id"
|
}}
|
||||||
search={false}
|
rowKey="id"
|
||||||
options={{
|
search={false}
|
||||||
setting: {
|
options={{
|
||||||
listsHeight: 400,
|
setting: {
|
||||||
},
|
listsHeight: 400,
|
||||||
}}
|
},
|
||||||
pagination={{
|
}}
|
||||||
pageSize: 5,
|
pagination={
|
||||||
}}
|
{
|
||||||
dateFormatter="string"
|
pageSize: 5,
|
||||||
headerTitle="京东云OSS配置"
|
} as any
|
||||||
bordered={false}
|
}
|
||||||
toolBarRender={() => [
|
dateFormatter="string"
|
||||||
<Button
|
headerTitle="京东云OSS配置"
|
||||||
key="button"
|
bordered={false}
|
||||||
icon={<PlusOutlined />}
|
toolBarRender={() => [
|
||||||
onClick={() => {
|
<Button
|
||||||
showDrawer();
|
key="button"
|
||||||
}}
|
icon={<PlusOutlined />}
|
||||||
type="primary">
|
onClick={() => {
|
||||||
新建
|
showDrawer();
|
||||||
</Button>,
|
}}
|
||||||
]}
|
type="primary">
|
||||||
/>
|
新建
|
||||||
<AddJdOssConfigDrawer />
|
</Button>,
|
||||||
</>
|
]}
|
||||||
);
|
/>
|
||||||
};
|
<AddJdOssConfigDrawer />
|
||||||
|
</div>
|
||||||
export default JdSettings;
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default JdSettings;
|
||||||
|
|||||||
@@ -1,278 +1,282 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
import { PlusOutlined } from "@ant-design/icons";
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
import React, { useRef, useState } from "react";
|
import React, { ReactNode, useRef, useState } from "react";
|
||||||
|
|
||||||
type AliOssConfigItem = {
|
type JinshanOssConfigItem = {
|
||||||
id: number;
|
id: number;
|
||||||
userId: number;
|
userId: number;
|
||||||
endpoint: string;
|
endpoint: string;
|
||||||
bucketName: string;
|
bucketName: string;
|
||||||
accessKeyId: string;
|
accessKeyId: string;
|
||||||
accessKeySecret: string;
|
accessKeySecret: string;
|
||||||
region: string;
|
region: string;
|
||||||
securityToken: string;
|
securityToken: string;
|
||||||
createdTime: string;
|
createdTime: string;
|
||||||
updatedTime: string;
|
updatedTime: string;
|
||||||
status: string;
|
status: string;
|
||||||
};
|
};
|
||||||
const data: AliOssConfigItem[] = [
|
const data: JinshanOssConfigItem[] = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
userId: 1,
|
userId: 1,
|
||||||
bucketName: "6666",
|
bucketName: "6666",
|
||||||
endpoint: "https://oss.aliyuncs.com",
|
endpoint: "https://oss.aliyuncs.com",
|
||||||
accessKeyId: "LTAI5tG3",
|
accessKeyId: "LTAI5tG3",
|
||||||
accessKeySecret: "G3",
|
accessKeySecret: "G3",
|
||||||
region: "G3",
|
region: "G3",
|
||||||
securityToken: "G3",
|
securityToken: "G3",
|
||||||
createdTime: "2022-01-01",
|
createdTime: "2022-01-01",
|
||||||
updatedTime: "2022-01-01",
|
updatedTime: "2022-01-01",
|
||||||
status: "正常",
|
status: "正常",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const columns: ProColumns<AliOssConfigItem>[] = [
|
const columns: ProColumns<JinshanOssConfigItem>[] = [
|
||||||
{
|
{
|
||||||
dataIndex: "index",
|
dataIndex: "index",
|
||||||
valueType: "indexBorder",
|
valueType: "indexBorder",
|
||||||
width: 48,
|
width: 48,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ID",
|
title: "ID",
|
||||||
dataIndex: "id",
|
dataIndex: "id",
|
||||||
copyable: true,
|
copyable: true,
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
tooltip: "Id",
|
tooltip: "Id",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "存储桶",
|
title: "存储桶",
|
||||||
dataIndex: "bucketName",
|
dataIndex: "bucketName",
|
||||||
tooltip: "bucketName",
|
tooltip: "bucketName",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "服务地址",
|
title: "服务地址",
|
||||||
dataIndex: "endpoint",
|
dataIndex: "endpoint",
|
||||||
tooltip: "endpoint",
|
tooltip: "endpoint",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥ID",
|
title: "密钥ID",
|
||||||
dataIndex: "accessKeyId",
|
dataIndex: "accessKeyId",
|
||||||
tooltip: "access key id",
|
tooltip: "access key id",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥值",
|
title: "密钥值",
|
||||||
dataIndex: "accessKeySecret",
|
dataIndex: "accessKeySecret",
|
||||||
tooltip: "access key secret",
|
tooltip: "access key secret",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "地区",
|
title: "地区",
|
||||||
dataIndex: "region",
|
dataIndex: "region",
|
||||||
tooltip: "region",
|
tooltip: "region",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "令牌",
|
title: "令牌",
|
||||||
dataIndex: "securityToken",
|
dataIndex: "securityToken",
|
||||||
tooltip: "security token",
|
tooltip: "security token",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "状态",
|
title: "状态",
|
||||||
dataIndex: "status",
|
dataIndex: "status",
|
||||||
search: true,
|
search: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "创建时间",
|
title: "创建时间",
|
||||||
dataIndex: "createdTime",
|
dataIndex: "createdTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
hideInSearch: true,
|
hideInSearch: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "更新时间",
|
title: "更新时间",
|
||||||
dataIndex: "updatedTime",
|
dataIndex: "updatedTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "操作",
|
title: "操作",
|
||||||
valueType: "option",
|
valueType: "option",
|
||||||
key: "option",
|
key: "option",
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
render: (text, record, _, action) => [
|
render: (text: ReactNode, record: JinshanOssConfigItem, _: number, action: any) => [
|
||||||
<a
|
<a
|
||||||
key="editable"
|
key="editable"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
action?.startEditable?.(record.id);
|
action?.startEditable?.(record.id);
|
||||||
}}>
|
}}>
|
||||||
编辑
|
编辑
|
||||||
</a>,
|
</a>,
|
||||||
<a target="_blank" rel="noopener noreferrer" key="view">
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
查看
|
查看
|
||||||
</a>,
|
</a>,
|
||||||
<TableDropdown
|
<TableDropdown
|
||||||
key="actionGroup"
|
key="actionGroup"
|
||||||
onSelect={() => action?.reload()}
|
onSelect={() => action?.reload()}
|
||||||
menus={[
|
menus={[
|
||||||
{ key: "copy", name: "复制" },
|
{ key: "copy", name: "复制" },
|
||||||
{ key: "delete", name: "删除" },
|
{ key: "delete", name: "删除" },
|
||||||
]}
|
]}
|
||||||
/>,
|
/>,
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const JinshanSettings: React.FC = () => {
|
const JinshanSettings: React.FC = () => {
|
||||||
const actionRef = useRef<ActionType>();
|
const actionRef = useRef<ActionType>();
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const showDrawer = () => {
|
const showDrawer = () => {
|
||||||
setOpen(true);
|
setOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClose = () => {
|
const onClose = () => {
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
};
|
};
|
||||||
const AddJinshanOssConfigDrawer = () => {
|
const AddJinshanOssConfigDrawer = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Drawer
|
<Drawer
|
||||||
title="创建连接配置"
|
title="创建连接配置"
|
||||||
width={720}
|
width={720}
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
open={open}
|
open={open}
|
||||||
styles={{
|
styles={{
|
||||||
body: {
|
body: {
|
||||||
paddingBottom: 80,
|
paddingBottom: 80,
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
extra={
|
extra={
|
||||||
<Space>
|
<Space>
|
||||||
<Button onClick={onClose}>取消</Button>
|
<Button onClick={onClose}>取消</Button>
|
||||||
<Button onClick={onClose} type="primary">
|
<Button onClick={onClose} type="primary">
|
||||||
提交
|
提交
|
||||||
</Button>
|
</Button>
|
||||||
</Space>
|
</Space>
|
||||||
}>
|
}>
|
||||||
<Form layout="vertical">
|
<Form layout="vertical">
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="endpoint"
|
name="endpoint"
|
||||||
label="服务地址"
|
label="服务地址"
|
||||||
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
||||||
<Input placeholder="请输入服务地址！" />
|
<Input placeholder="请输入服务地址！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="bucketName"
|
name="bucketName"
|
||||||
label="存储桶"
|
label="存储桶"
|
||||||
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
||||||
<Input placeholder="请输入存储桶！" />
|
<Input placeholder="请输入存储桶！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="accessKeyId"
|
name="accessKeyId"
|
||||||
label="密钥ID"
|
label="密钥ID"
|
||||||
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
||||||
<Input placeholder="请输入密钥ID！" />
|
<Input placeholder="请输入密钥ID！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="accessKeySecret"
|
name="accessKeySecret"
|
||||||
label="密钥值"
|
label="密钥值"
|
||||||
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
||||||
<Input placeholder="请输入密钥值！" />
|
<Input placeholder="请输入密钥值！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="securityToken"
|
name="securityToken"
|
||||||
label="令牌Token"
|
label="令牌Token"
|
||||||
rules={[{ required: true, message: "请输入令牌Token!" }]}>
|
rules={[{ required: true, message: "请输入令牌Token!" }]}>
|
||||||
<Input placeholder="请输入令牌Token！" />
|
<Input placeholder="请输入令牌Token！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="region"
|
name="region"
|
||||||
label="地区"
|
label="地区"
|
||||||
rules={[{ required: true, message: "请输入地区!" }]}>
|
rules={[{ required: true, message: "请输入地区!" }]}>
|
||||||
<Input placeholder="请输入地区！" />
|
<Input placeholder="请输入地区！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</Form>
|
</Form>
|
||||||
</Drawer>
|
</Drawer>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ProTable<AliOssConfigItem>
|
<div style={{ height: "65vh" }}>
|
||||||
columns={columns}
|
<ProTable<JinshanOssConfigItem>
|
||||||
dataSource={data}
|
columns={columns}
|
||||||
actionRef={actionRef}
|
dataSource={data}
|
||||||
cardBordered={true}
|
actionRef={actionRef}
|
||||||
editable={{
|
cardBordered={true}
|
||||||
type: "multiple",
|
editable={{
|
||||||
}}
|
type: "multiple",
|
||||||
columnsState={{
|
}}
|
||||||
persistenceKey: "pro-table-singe-demos",
|
columnsState={{
|
||||||
persistenceType: "localStorage",
|
persistenceKey: "pro-table-singe-demos",
|
||||||
defaultValue: {
|
persistenceType: "localStorage",
|
||||||
option: { fixed: "right", disable: true },
|
defaultValue: {
|
||||||
},
|
option: { fixed: "right", disable: true },
|
||||||
}}
|
},
|
||||||
rowKey="id"
|
}}
|
||||||
search={false}
|
rowKey="id"
|
||||||
options={{
|
search={false}
|
||||||
setting: {
|
options={{
|
||||||
listsHeight: 400,
|
setting: {
|
||||||
},
|
listsHeight: 400,
|
||||||
}}
|
},
|
||||||
pagination={{
|
}}
|
||||||
pageSize: 5,
|
pagination={
|
||||||
}}
|
{
|
||||||
dateFormatter="string"
|
pageSize: 5,
|
||||||
headerTitle="金山OBS配置"
|
} as any
|
||||||
bordered={false}
|
}
|
||||||
toolBarRender={() => [
|
dateFormatter="string"
|
||||||
<Button
|
headerTitle="金山OBS配置"
|
||||||
key="button"
|
bordered={false}
|
||||||
icon={<PlusOutlined />}
|
toolBarRender={() => [
|
||||||
onClick={() => {
|
<Button
|
||||||
showDrawer();
|
key="button"
|
||||||
}}
|
icon={<PlusOutlined />}
|
||||||
type="primary">
|
onClick={() => {
|
||||||
新建
|
showDrawer();
|
||||||
</Button>,
|
}}
|
||||||
]}
|
type="primary">
|
||||||
/>
|
新建
|
||||||
<AddJinshanOssConfigDrawer />
|
</Button>,
|
||||||
</>
|
]}
|
||||||
);
|
/>
|
||||||
};
|
<AddJinshanOssConfigDrawer />
|
||||||
|
</div>
|
||||||
export default JinshanSettings;
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default JinshanSettings;
|
||||||
|
|||||||
@@ -1,225 +1,229 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
import { PlusOutlined } from "@ant-design/icons";
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
import React, { useRef, useState } from "react";
|
import React, { ReactNode, useRef, useState } from "react";
|
||||||
|
|
||||||
type AliOssConfigItem = {
|
type MinioOssConfigItem = {
|
||||||
id: number;
|
id: number;
|
||||||
userId: number;
|
userId: number;
|
||||||
endpoint: string;
|
endpoint: string;
|
||||||
accessKey: string;
|
accessKey: string;
|
||||||
secretKey: string;
|
secretKey: string;
|
||||||
createdTime: string;
|
createdTime: string;
|
||||||
updatedTime: string;
|
updatedTime: string;
|
||||||
status: string;
|
status: string;
|
||||||
};
|
};
|
||||||
const data: AliOssConfigItem[] = [
|
const data: MinioOssConfigItem[] = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
userId: 1,
|
userId: 1,
|
||||||
endpoint: "https://oss.aliyuncs.com",
|
endpoint: "https://oss.aliyuncs.com",
|
||||||
accessKey: "LTAI5tG3",
|
accessKey: "LTAI5tG3",
|
||||||
secretKey: "G3",
|
secretKey: "G3",
|
||||||
createdTime: "2022-01-01",
|
createdTime: "2022-01-01",
|
||||||
updatedTime: "2022-01-01",
|
updatedTime: "2022-01-01",
|
||||||
status: "正常",
|
status: "正常",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const columns: ProColumns<AliOssConfigItem>[] = [
|
const columns: ProColumns<MinioOssConfigItem>[] = [
|
||||||
{
|
{
|
||||||
dataIndex: "index",
|
dataIndex: "index",
|
||||||
valueType: "indexBorder",
|
valueType: "indexBorder",
|
||||||
width: 48,
|
width: 48,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ID",
|
title: "ID",
|
||||||
dataIndex: "id",
|
dataIndex: "id",
|
||||||
copyable: true,
|
copyable: true,
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
tooltip: "Id",
|
tooltip: "Id",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "服务地址",
|
title: "服务地址",
|
||||||
dataIndex: "endpoint",
|
dataIndex: "endpoint",
|
||||||
tooltip: "endpoint",
|
tooltip: "endpoint",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥ID",
|
title: "密钥ID",
|
||||||
dataIndex: "accessKey",
|
dataIndex: "accessKey",
|
||||||
tooltip: "access key",
|
tooltip: "access key",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥值",
|
title: "密钥值",
|
||||||
dataIndex: "secretKey",
|
dataIndex: "secretKey",
|
||||||
tooltip: "secret key",
|
tooltip: "secret key",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "状态",
|
title: "状态",
|
||||||
dataIndex: "status",
|
dataIndex: "status",
|
||||||
search: true,
|
search: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "创建时间",
|
title: "创建时间",
|
||||||
dataIndex: "createdTime",
|
dataIndex: "createdTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
hideInSearch: true,
|
hideInSearch: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "更新时间",
|
title: "更新时间",
|
||||||
dataIndex: "updatedTime",
|
dataIndex: "updatedTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "操作",
|
title: "操作",
|
||||||
valueType: "option",
|
valueType: "option",
|
||||||
key: "option",
|
key: "option",
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
render: (text, record, _, action) => [
|
render: (text: ReactNode, record: MinioOssConfigItem, _: number, action: any) => [
|
||||||
<a
|
<a
|
||||||
key="editable"
|
key="editable"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
action?.startEditable?.(record.id);
|
action?.startEditable?.(record.id);
|
||||||
}}>
|
}}>
|
||||||
编辑
|
编辑
|
||||||
</a>,
|
</a>,
|
||||||
<a target="_blank" rel="noopener noreferrer" key="view">
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
查看
|
查看
|
||||||
</a>,
|
</a>,
|
||||||
<TableDropdown
|
<TableDropdown
|
||||||
key="actionGroup"
|
key="actionGroup"
|
||||||
onSelect={() => action?.reload()}
|
onSelect={() => action?.reload()}
|
||||||
menus={[
|
menus={[
|
||||||
{ key: "copy", name: "复制" },
|
{ key: "copy", name: "复制" },
|
||||||
{ key: "delete", name: "删除" },
|
{ key: "delete", name: "删除" },
|
||||||
]}
|
]}
|
||||||
/>,
|
/>,
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const MinioSettings: React.FC = () => {
|
const MinioSettings: React.FC = () => {
|
||||||
const actionRef = useRef<ActionType>();
|
const actionRef = useRef<ActionType>();
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const showDrawer = () => {
|
const showDrawer = () => {
|
||||||
setOpen(true);
|
setOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClose = () => {
|
const onClose = () => {
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
};
|
};
|
||||||
const AddMinioOssConfigDrawer = () => {
|
const AddMinioOssConfigDrawer = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Drawer
|
<Drawer
|
||||||
title="创建连接配置"
|
title="创建连接配置"
|
||||||
width={720}
|
width={720}
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
open={open}
|
open={open}
|
||||||
styles={{
|
styles={{
|
||||||
body: {
|
body: {
|
||||||
paddingBottom: 80,
|
paddingBottom: 80,
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
extra={
|
extra={
|
||||||
<Space>
|
<Space>
|
||||||
<Button onClick={onClose}>取消</Button>
|
<Button onClick={onClose}>取消</Button>
|
||||||
<Button onClick={onClose} type="primary">
|
<Button onClick={onClose} type="primary">
|
||||||
提交
|
提交
|
||||||
</Button>
|
</Button>
|
||||||
</Space>
|
</Space>
|
||||||
}>
|
}>
|
||||||
<Form layout="vertical">
|
<Form layout="vertical">
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="endpoint"
|
name="endpoint"
|
||||||
label="服务地址"
|
label="服务地址"
|
||||||
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
||||||
<Input placeholder="请输入服务地址！" />
|
<Input placeholder="请输入服务地址！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="accessKey"
|
name="accessKey"
|
||||||
label="密钥ID"
|
label="密钥ID"
|
||||||
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
||||||
<Input placeholder="请输入密钥ID！" />
|
<Input placeholder="请输入密钥ID！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="secretKey"
|
name="secretKey"
|
||||||
label="密钥值"
|
label="密钥值"
|
||||||
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
||||||
<Input placeholder="请输入密钥值！" />
|
<Input placeholder="请输入密钥值！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</Form>
|
</Form>
|
||||||
</Drawer>
|
</Drawer>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ProTable<AliOssConfigItem>
|
<div style={{ height: "65vh" }}>
|
||||||
columns={columns}
|
<ProTable<MinioOssConfigItem>
|
||||||
dataSource={data}
|
columns={columns}
|
||||||
actionRef={actionRef}
|
dataSource={data}
|
||||||
cardBordered={true}
|
actionRef={actionRef}
|
||||||
editable={{
|
cardBordered={true}
|
||||||
type: "multiple",
|
editable={{
|
||||||
}}
|
type: "multiple",
|
||||||
columnsState={{
|
}}
|
||||||
persistenceKey: "pro-table-singe-demos",
|
columnsState={{
|
||||||
persistenceType: "localStorage",
|
persistenceKey: "pro-table-singe-demos",
|
||||||
defaultValue: {
|
persistenceType: "localStorage",
|
||||||
option: { fixed: "right", disable: true },
|
defaultValue: {
|
||||||
},
|
option: { fixed: "right", disable: true },
|
||||||
}}
|
},
|
||||||
rowKey="id"
|
}}
|
||||||
search={false}
|
rowKey="id"
|
||||||
options={{
|
search={false}
|
||||||
setting: {
|
options={{
|
||||||
listsHeight: 400,
|
setting: {
|
||||||
},
|
listsHeight: 400,
|
||||||
}}
|
},
|
||||||
pagination={{
|
}}
|
||||||
pageSize: 5,
|
pagination={
|
||||||
}}
|
{
|
||||||
dateFormatter="string"
|
pageSize: 5,
|
||||||
headerTitle="MinIO配置"
|
} as any
|
||||||
bordered={false}
|
}
|
||||||
toolBarRender={() => [
|
dateFormatter="string"
|
||||||
<Button
|
headerTitle="MinIO配置"
|
||||||
key="button"
|
bordered={false}
|
||||||
icon={<PlusOutlined />}
|
toolBarRender={() => [
|
||||||
onClick={() => {
|
<Button
|
||||||
showDrawer();
|
key="button"
|
||||||
}}
|
icon={<PlusOutlined />}
|
||||||
type="primary">
|
onClick={() => {
|
||||||
新建
|
showDrawer();
|
||||||
</Button>,
|
}}
|
||||||
]}
|
type="primary">
|
||||||
/>
|
新建
|
||||||
<AddMinioOssConfigDrawer />
|
</Button>,
|
||||||
</>
|
]}
|
||||||
);
|
/>
|
||||||
};
|
<AddMinioOssConfigDrawer />
|
||||||
|
</div>
|
||||||
export default MinioSettings;
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MinioSettings;
|
||||||
|
|||||||
@@ -1,225 +1,229 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
import { PlusOutlined } from "@ant-design/icons";
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
import React, { useRef, useState } from "react";
|
import React, { ReactNode, useRef, useState } from "react";
|
||||||
|
|
||||||
type AliOssConfigItem = {
|
type PinanOssConfigItem = {
|
||||||
id: number;
|
id: number;
|
||||||
userId: number;
|
userId: number;
|
||||||
endpoint: string;
|
endpoint: string;
|
||||||
accessKeyId: string;
|
accessKeyId: string;
|
||||||
accessKeySecret: string;
|
accessKeySecret: string;
|
||||||
created_time: string;
|
created_time: string;
|
||||||
updated_time: string;
|
updated_time: string;
|
||||||
status: string;
|
status: string;
|
||||||
};
|
};
|
||||||
const data: AliOssConfigItem[] = [
|
const data: PinanOssConfigItem[] = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
userId: 1,
|
userId: 1,
|
||||||
endpoint: "https://oss.aliyuncs.com",
|
endpoint: "https://oss.aliyuncs.com",
|
||||||
accessKeyId: "LTAI5tG3",
|
accessKeyId: "LTAI5tG3",
|
||||||
accessKeySecret: "G3",
|
accessKeySecret: "G3",
|
||||||
created_time: "2022-01-01",
|
created_time: "2022-01-01",
|
||||||
updated_time: "2022-01-01",
|
updated_time: "2022-01-01",
|
||||||
status: "正常",
|
status: "正常",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const columns: ProColumns<AliOssConfigItem>[] = [
|
const columns: ProColumns<PinanOssConfigItem>[] = [
|
||||||
{
|
{
|
||||||
dataIndex: "index",
|
dataIndex: "index",
|
||||||
valueType: "indexBorder",
|
valueType: "indexBorder",
|
||||||
width: 48,
|
width: 48,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ID",
|
title: "ID",
|
||||||
dataIndex: "id",
|
dataIndex: "id",
|
||||||
copyable: true,
|
copyable: true,
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
tooltip: "Id",
|
tooltip: "Id",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "服务地址",
|
title: "服务地址",
|
||||||
dataIndex: "endpoint",
|
dataIndex: "endpoint",
|
||||||
tooltip: "endpoint",
|
tooltip: "endpoint",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥ID",
|
title: "密钥ID",
|
||||||
dataIndex: "accessKeyId",
|
dataIndex: "accessKeyId",
|
||||||
tooltip: "access key id",
|
tooltip: "access key id",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥值",
|
title: "密钥值",
|
||||||
dataIndex: "accessKeySecret",
|
dataIndex: "accessKeySecret",
|
||||||
tooltip: "access key secret",
|
tooltip: "access key secret",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "状态",
|
title: "状态",
|
||||||
dataIndex: "status",
|
dataIndex: "status",
|
||||||
search: true,
|
search: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "创建时间",
|
title: "创建时间",
|
||||||
dataIndex: "createdTime",
|
dataIndex: "createdTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
hideInSearch: true,
|
hideInSearch: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "更新时间",
|
title: "更新时间",
|
||||||
dataIndex: "updateTime",
|
dataIndex: "updateTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "操作",
|
title: "操作",
|
||||||
valueType: "option",
|
valueType: "option",
|
||||||
key: "option",
|
key: "option",
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
render: (text, record, _, action) => [
|
render: (text: ReactNode, record: PinanOssConfigItem, _: number, action: any) => [
|
||||||
<a
|
<a
|
||||||
key="editable"
|
key="editable"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
action?.startEditable?.(record.id);
|
action?.startEditable?.(record.id);
|
||||||
}}>
|
}}>
|
||||||
编辑
|
编辑
|
||||||
</a>,
|
</a>,
|
||||||
<a target="_blank" rel="noopener noreferrer" key="view">
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
查看
|
查看
|
||||||
</a>,
|
</a>,
|
||||||
<TableDropdown
|
<TableDropdown
|
||||||
key="actionGroup"
|
key="actionGroup"
|
||||||
onSelect={() => action?.reload()}
|
onSelect={() => action?.reload()}
|
||||||
menus={[
|
menus={[
|
||||||
{ key: "copy", name: "复制" },
|
{ key: "copy", name: "复制" },
|
||||||
{ key: "delete", name: "删除" },
|
{ key: "delete", name: "删除" },
|
||||||
]}
|
]}
|
||||||
/>,
|
/>,
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const PinanSettings: React.FC = () => {
|
const PinanSettings: React.FC = () => {
|
||||||
const actionRef = useRef<ActionType>();
|
const actionRef = useRef<ActionType>();
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const showDrawer = () => {
|
const showDrawer = () => {
|
||||||
setOpen(true);
|
setOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClose = () => {
|
const onClose = () => {
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
};
|
};
|
||||||
const AddPinanOssConfigDrawer = () => {
|
const AddPinanOssConfigDrawer = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Drawer
|
<Drawer
|
||||||
title="创建连接配置"
|
title="创建连接配置"
|
||||||
width={720}
|
width={720}
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
open={open}
|
open={open}
|
||||||
styles={{
|
styles={{
|
||||||
body: {
|
body: {
|
||||||
paddingBottom: 80,
|
paddingBottom: 80,
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
extra={
|
extra={
|
||||||
<Space>
|
<Space>
|
||||||
<Button onClick={onClose}>取消</Button>
|
<Button onClick={onClose}>取消</Button>
|
||||||
<Button onClick={onClose} type="primary">
|
<Button onClick={onClose} type="primary">
|
||||||
提交
|
提交
|
||||||
</Button>
|
</Button>
|
||||||
</Space>
|
</Space>
|
||||||
}>
|
}>
|
||||||
<Form layout="vertical">
|
<Form layout="vertical">
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="endpoint"
|
name="endpoint"
|
||||||
label="服务地址"
|
label="服务地址"
|
||||||
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
||||||
<Input placeholder="请输入服务地址！" />
|
<Input placeholder="请输入服务地址！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="accessKeyId"
|
name="accessKeyId"
|
||||||
label="密钥ID"
|
label="密钥ID"
|
||||||
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
||||||
<Input placeholder="请输入密钥ID！" />
|
<Input placeholder="请输入密钥ID！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="accessKeySecret"
|
name="accessKeySecret"
|
||||||
label="密钥值"
|
label="密钥值"
|
||||||
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
||||||
<Input placeholder="请输入密钥值！" />
|
<Input placeholder="请输入密钥值！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</Form>
|
</Form>
|
||||||
</Drawer>
|
</Drawer>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ProTable<AliOssConfigItem>
|
<div style={{ height: "65vh" }}>
|
||||||
columns={columns}
|
<ProTable<PinanOssConfigItem>
|
||||||
dataSource={data}
|
columns={columns}
|
||||||
actionRef={actionRef}
|
dataSource={data}
|
||||||
cardBordered={true}
|
actionRef={actionRef}
|
||||||
editable={{
|
cardBordered={true}
|
||||||
type: "multiple",
|
editable={{
|
||||||
}}
|
type: "multiple",
|
||||||
columnsState={{
|
}}
|
||||||
persistenceKey: "pro-table-singe-demos",
|
columnsState={{
|
||||||
persistenceType: "localStorage",
|
persistenceKey: "pro-table-singe-demos",
|
||||||
defaultValue: {
|
persistenceType: "localStorage",
|
||||||
option: { fixed: "right", disable: true },
|
defaultValue: {
|
||||||
},
|
option: { fixed: "right", disable: true },
|
||||||
}}
|
},
|
||||||
rowKey="id"
|
}}
|
||||||
search={false}
|
rowKey="id"
|
||||||
options={{
|
search={false}
|
||||||
setting: {
|
options={{
|
||||||
listsHeight: 400,
|
setting: {
|
||||||
},
|
listsHeight: 400,
|
||||||
}}
|
},
|
||||||
pagination={{
|
}}
|
||||||
pageSize: 5,
|
pagination={
|
||||||
}}
|
{
|
||||||
dateFormatter="string"
|
pageSize: 5,
|
||||||
headerTitle="平安云OSS配置"
|
} as any
|
||||||
bordered={false}
|
}
|
||||||
toolBarRender={() => [
|
dateFormatter="string"
|
||||||
<Button
|
headerTitle="平安云OSS配置"
|
||||||
key="button"
|
bordered={false}
|
||||||
icon={<PlusOutlined />}
|
toolBarRender={() => [
|
||||||
onClick={() => {
|
<Button
|
||||||
showDrawer();
|
key="button"
|
||||||
}}
|
icon={<PlusOutlined />}
|
||||||
type="primary">
|
onClick={() => {
|
||||||
新建
|
showDrawer();
|
||||||
</Button>,
|
}}
|
||||||
]}
|
type="primary">
|
||||||
/>
|
新建
|
||||||
<AddPinanOssConfigDrawer />
|
</Button>,
|
||||||
</>
|
]}
|
||||||
);
|
/>
|
||||||
};
|
<AddPinanOssConfigDrawer />
|
||||||
|
</div>
|
||||||
export default PinanSettings;
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PinanSettings;
|
||||||
|
|||||||
@@ -1,254 +1,258 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
import { PlusOutlined } from "@ant-design/icons";
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
import React, { useRef, useState } from "react";
|
import React, { ReactNode, useRef, useState } from "react";
|
||||||
|
|
||||||
type AliOssConfigItem = {
|
type QingyunOssConfigItem = {
|
||||||
id: number;
|
id: number;
|
||||||
userId: number;
|
userId: number;
|
||||||
zone: string;
|
zone: string;
|
||||||
endpoint: string;
|
endpoint: string;
|
||||||
accessKey: string;
|
accessKey: string;
|
||||||
bucketName: string;
|
bucketName: string;
|
||||||
accessSecret: string;
|
accessSecret: string;
|
||||||
createdTime: string;
|
createdTime: string;
|
||||||
updatedTime: string;
|
updatedTime: string;
|
||||||
status: string;
|
status: string;
|
||||||
};
|
};
|
||||||
const data: AliOssConfigItem[] = [
|
const data: QingyunOssConfigItem[] = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
userId: 1,
|
userId: 1,
|
||||||
bucketName: "1",
|
bucketName: "1",
|
||||||
zone: "1",
|
zone: "1",
|
||||||
endpoint: "https://oss.aliyuncs.com",
|
endpoint: "https://oss.aliyuncs.com",
|
||||||
accessKey: "LTAI5tG3",
|
accessKey: "LTAI5tG3",
|
||||||
accessSecret: "G3",
|
accessSecret: "G3",
|
||||||
createdTime: "2022-01-01",
|
createdTime: "2022-01-01",
|
||||||
updatedTime: "2022-01-01",
|
updatedTime: "2022-01-01",
|
||||||
status: "正常",
|
status: "正常",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const columns: ProColumns<AliOssConfigItem>[] = [
|
const columns: ProColumns<QingyunOssConfigItem>[] = [
|
||||||
{
|
{
|
||||||
dataIndex: "index",
|
dataIndex: "index",
|
||||||
valueType: "indexBorder",
|
valueType: "indexBorder",
|
||||||
width: 48,
|
width: 48,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ID",
|
title: "ID",
|
||||||
dataIndex: "id",
|
dataIndex: "id",
|
||||||
copyable: true,
|
copyable: true,
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
tooltip: "Id",
|
tooltip: "Id",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "地区",
|
title: "地区",
|
||||||
dataIndex: "zone",
|
dataIndex: "zone",
|
||||||
tooltip: "zone",
|
tooltip: "zone",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "服务地址",
|
title: "服务地址",
|
||||||
dataIndex: "endpoint",
|
dataIndex: "endpoint",
|
||||||
tooltip: "endpoint",
|
tooltip: "endpoint",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥ID",
|
title: "密钥ID",
|
||||||
dataIndex: "accessKey",
|
dataIndex: "accessKey",
|
||||||
tooltip: "access Key",
|
tooltip: "access Key",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥值",
|
title: "密钥值",
|
||||||
dataIndex: "accessSecret",
|
dataIndex: "accessSecret",
|
||||||
tooltip: "access Secret",
|
tooltip: "access Secret",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "状态",
|
title: "状态",
|
||||||
dataIndex: "status",
|
dataIndex: "status",
|
||||||
search: true,
|
search: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "创建时间",
|
title: "创建时间",
|
||||||
dataIndex: "createdTime",
|
dataIndex: "createdTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
hideInSearch: true,
|
hideInSearch: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "更新时间",
|
title: "更新时间",
|
||||||
dataIndex: "updatedTime",
|
dataIndex: "updatedTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "操作",
|
title: "操作",
|
||||||
valueType: "option",
|
valueType: "option",
|
||||||
key: "option",
|
key: "option",
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
render: (text, record, _, action) => [
|
render: (text: ReactNode, record: QingyunOssConfigItem, _: number, action: any) => [
|
||||||
<a
|
<a
|
||||||
key="editable"
|
key="editable"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
action?.startEditable?.(record.id);
|
action?.startEditable?.(record.id);
|
||||||
}}>
|
}}>
|
||||||
编辑
|
编辑
|
||||||
</a>,
|
</a>,
|
||||||
<a target="_blank" rel="noopener noreferrer" key="view">
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
查看
|
查看
|
||||||
</a>,
|
</a>,
|
||||||
<TableDropdown
|
<TableDropdown
|
||||||
key="actionGroup"
|
key="actionGroup"
|
||||||
onSelect={() => action?.reload()}
|
onSelect={() => action?.reload()}
|
||||||
menus={[
|
menus={[
|
||||||
{ key: "copy", name: "复制" },
|
{ key: "copy", name: "复制" },
|
||||||
{ key: "delete", name: "删除" },
|
{ key: "delete", name: "删除" },
|
||||||
]}
|
]}
|
||||||
/>,
|
/>,
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const QingyunSettings: React.FC = () => {
|
const QingyunSettings: React.FC = () => {
|
||||||
const actionRef = useRef<ActionType>();
|
const actionRef = useRef<ActionType>();
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const showDrawer = () => {
|
const showDrawer = () => {
|
||||||
setOpen(true);
|
setOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClose = () => {
|
const onClose = () => {
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
};
|
};
|
||||||
const AddQingyunOssConfigDrawer = () => {
|
const AddQingyunOssConfigDrawer = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Drawer
|
<Drawer
|
||||||
title="创建连接配置"
|
title="创建连接配置"
|
||||||
width={720}
|
width={720}
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
open={open}
|
open={open}
|
||||||
styles={{
|
styles={{
|
||||||
body: {
|
body: {
|
||||||
paddingBottom: 80,
|
paddingBottom: 80,
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
extra={
|
extra={
|
||||||
<Space>
|
<Space>
|
||||||
<Button onClick={onClose}>取消</Button>
|
<Button onClick={onClose}>取消</Button>
|
||||||
<Button onClick={onClose} type="primary">
|
<Button onClick={onClose} type="primary">
|
||||||
提交
|
提交
|
||||||
</Button>
|
</Button>
|
||||||
</Space>
|
</Space>
|
||||||
}>
|
}>
|
||||||
<Form layout="vertical">
|
<Form layout="vertical">
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="endpoint"
|
name="endpoint"
|
||||||
label="服务地址"
|
label="服务地址"
|
||||||
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
||||||
<Input placeholder="请输入服务地址！" />
|
<Input placeholder="请输入服务地址！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="bucketName"
|
name="bucketName"
|
||||||
label="存储桶"
|
label="存储桶"
|
||||||
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
||||||
<Input placeholder="请输入存储桶！" />
|
<Input placeholder="请输入存储桶！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="accessKey"
|
name="accessKey"
|
||||||
label="密钥ID"
|
label="密钥ID"
|
||||||
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
||||||
<Input placeholder="请输入密钥ID！" />
|
<Input placeholder="请输入密钥ID！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="accessSecret"
|
name="accessSecret"
|
||||||
label="密钥值"
|
label="密钥值"
|
||||||
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
||||||
<Input placeholder="请输入密钥值！" />
|
<Input placeholder="请输入密钥值！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="zone"
|
name="zone"
|
||||||
label="地区"
|
label="地区"
|
||||||
rules={[{ required: true, message: "请输入地区!" }]}>
|
rules={[{ required: true, message: "请输入地区!" }]}>
|
||||||
<Input placeholder="请输入地区！" />
|
<Input placeholder="请输入地区！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</Form>
|
</Form>
|
||||||
</Drawer>
|
</Drawer>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ProTable<AliOssConfigItem>
|
<div style={{ height: "65vh" }}>
|
||||||
columns={columns}
|
<ProTable<QingyunOssConfigItem>
|
||||||
dataSource={data}
|
columns={columns}
|
||||||
actionRef={actionRef}
|
dataSource={data}
|
||||||
cardBordered={true}
|
actionRef={actionRef}
|
||||||
editable={{
|
cardBordered={true}
|
||||||
type: "multiple",
|
editable={{
|
||||||
}}
|
type: "multiple",
|
||||||
columnsState={{
|
}}
|
||||||
persistenceKey: "pro-table-singe-demos",
|
columnsState={{
|
||||||
persistenceType: "localStorage",
|
persistenceKey: "pro-table-singe-demos",
|
||||||
defaultValue: {
|
persistenceType: "localStorage",
|
||||||
option: { fixed: "right", disable: true },
|
defaultValue: {
|
||||||
},
|
option: { fixed: "right", disable: true },
|
||||||
}}
|
},
|
||||||
rowKey="id"
|
}}
|
||||||
search={false}
|
rowKey="id"
|
||||||
options={{
|
search={false}
|
||||||
setting: {
|
options={{
|
||||||
listsHeight: 400,
|
setting: {
|
||||||
},
|
listsHeight: 400,
|
||||||
}}
|
},
|
||||||
pagination={{
|
}}
|
||||||
pageSize: 5,
|
pagination={
|
||||||
}}
|
{
|
||||||
dateFormatter="string"
|
pageSize: 5,
|
||||||
headerTitle="青云OSS配置"
|
} as any
|
||||||
bordered={false}
|
}
|
||||||
toolBarRender={() => [
|
dateFormatter="string"
|
||||||
<Button
|
headerTitle="青云OSS配置"
|
||||||
key="button"
|
bordered={false}
|
||||||
icon={<PlusOutlined />}
|
toolBarRender={() => [
|
||||||
onClick={() => {
|
<Button
|
||||||
showDrawer();
|
key="button"
|
||||||
}}
|
icon={<PlusOutlined />}
|
||||||
type="primary">
|
onClick={() => {
|
||||||
新建
|
showDrawer();
|
||||||
</Button>,
|
}}
|
||||||
]}
|
type="primary">
|
||||||
/>
|
新建
|
||||||
<AddQingyunOssConfigDrawer />
|
</Button>,
|
||||||
</>
|
]}
|
||||||
);
|
/>
|
||||||
};
|
<AddQingyunOssConfigDrawer />
|
||||||
|
</div>
|
||||||
export default QingyunSettings;
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default QingyunSettings;
|
||||||
|
|||||||
@@ -1,225 +1,229 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
import { PlusOutlined } from "@ant-design/icons";
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
import React, { useRef, useState } from "react";
|
import React, { ReactNode, useRef, useState } from "react";
|
||||||
|
|
||||||
type AliOssConfigItem = {
|
type QiniuOssConfigItem = {
|
||||||
id: number;
|
id: number;
|
||||||
userId: number;
|
userId: number;
|
||||||
bucketName: string;
|
bucketName: string;
|
||||||
accessKey: string;
|
accessKey: string;
|
||||||
secretKey: string;
|
secretKey: string;
|
||||||
createdTime: string;
|
createdTime: string;
|
||||||
updatedTime: string;
|
updatedTime: string;
|
||||||
status: string;
|
status: string;
|
||||||
};
|
};
|
||||||
const data: AliOssConfigItem[] = [
|
const data: QiniuOssConfigItem[] = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
userId: 1,
|
userId: 1,
|
||||||
bucketName: "https://oss.aliyuncs.com",
|
bucketName: "https://oss.aliyuncs.com",
|
||||||
accessKey: "LTAI5tG3",
|
accessKey: "LTAI5tG3",
|
||||||
secretKey: "G3",
|
secretKey: "G3",
|
||||||
createdTime: "2022-01-01",
|
createdTime: "2022-01-01",
|
||||||
updatedTime: "2022-01-01",
|
updatedTime: "2022-01-01",
|
||||||
status: "正常",
|
status: "正常",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const columns: ProColumns<AliOssConfigItem>[] = [
|
const columns: ProColumns<QiniuOssConfigItem>[] = [
|
||||||
{
|
{
|
||||||
dataIndex: "index",
|
dataIndex: "index",
|
||||||
valueType: "indexBorder",
|
valueType: "indexBorder",
|
||||||
width: 48,
|
width: 48,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ID",
|
title: "ID",
|
||||||
dataIndex: "id",
|
dataIndex: "id",
|
||||||
copyable: true,
|
copyable: true,
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
tooltip: "Id",
|
tooltip: "Id",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "服务地址",
|
title: "服务地址",
|
||||||
dataIndex: "endpoint",
|
dataIndex: "endpoint",
|
||||||
tooltip: "endpoint",
|
tooltip: "endpoint",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥ID",
|
title: "密钥ID",
|
||||||
dataIndex: "accessKeyId",
|
dataIndex: "accessKeyId",
|
||||||
tooltip: "access key id",
|
tooltip: "access key id",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥值",
|
title: "密钥值",
|
||||||
dataIndex: "accessKeySecret",
|
dataIndex: "accessKeySecret",
|
||||||
tooltip: "access key secret",
|
tooltip: "access key secret",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "状态",
|
title: "状态",
|
||||||
dataIndex: "status",
|
dataIndex: "status",
|
||||||
search: true,
|
search: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "创建时间",
|
title: "创建时间",
|
||||||
dataIndex: "createdTime",
|
dataIndex: "createdTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
hideInSearch: true,
|
hideInSearch: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "更新时间",
|
title: "更新时间",
|
||||||
dataIndex: "updatedTime",
|
dataIndex: "updatedTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "操作",
|
title: "操作",
|
||||||
valueType: "option",
|
valueType: "option",
|
||||||
key: "option",
|
key: "option",
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
render: (text, record, _, action) => [
|
render: (text: ReactNode, record: QiniuOssConfigItem, _: number, action: any) => [
|
||||||
<a
|
<a
|
||||||
key="editable"
|
key="editable"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
action?.startEditable?.(record.id);
|
action?.startEditable?.(record.id);
|
||||||
}}>
|
}}>
|
||||||
编辑
|
编辑
|
||||||
</a>,
|
</a>,
|
||||||
<a target="_blank" rel="noopener noreferrer" key="view">
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
查看
|
查看
|
||||||
</a>,
|
</a>,
|
||||||
<TableDropdown
|
<TableDropdown
|
||||||
key="actionGroup"
|
key="actionGroup"
|
||||||
onSelect={() => action?.reload()}
|
onSelect={() => action?.reload()}
|
||||||
menus={[
|
menus={[
|
||||||
{ key: "copy", name: "复制" },
|
{ key: "copy", name: "复制" },
|
||||||
{ key: "delete", name: "删除" },
|
{ key: "delete", name: "删除" },
|
||||||
]}
|
]}
|
||||||
/>,
|
/>,
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const QiniuSettings: React.FC = () => {
|
const QiniuSettings: React.FC = () => {
|
||||||
const actionRef = useRef<ActionType>();
|
const actionRef = useRef<ActionType>();
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const showDrawer = () => {
|
const showDrawer = () => {
|
||||||
setOpen(true);
|
setOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClose = () => {
|
const onClose = () => {
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
};
|
};
|
||||||
const AddQiniuOssConfigDrawer = () => {
|
const AddQiniuOssConfigDrawer = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Drawer
|
<Drawer
|
||||||
title="创建连接配置"
|
title="创建连接配置"
|
||||||
width={720}
|
width={720}
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
open={open}
|
open={open}
|
||||||
styles={{
|
styles={{
|
||||||
body: {
|
body: {
|
||||||
paddingBottom: 80,
|
paddingBottom: 80,
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
extra={
|
extra={
|
||||||
<Space>
|
<Space>
|
||||||
<Button onClick={onClose}>取消</Button>
|
<Button onClick={onClose}>取消</Button>
|
||||||
<Button onClick={onClose} type="primary">
|
<Button onClick={onClose} type="primary">
|
||||||
提交
|
提交
|
||||||
</Button>
|
</Button>
|
||||||
</Space>
|
</Space>
|
||||||
}>
|
}>
|
||||||
<Form layout="vertical">
|
<Form layout="vertical">
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="bucketName"
|
name="bucketName"
|
||||||
label="存储桶"
|
label="存储桶"
|
||||||
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
||||||
<Input placeholder="请输入存储桶！" />
|
<Input placeholder="请输入存储桶！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="accessKey"
|
name="accessKey"
|
||||||
label="密钥ID"
|
label="密钥ID"
|
||||||
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
||||||
<Input placeholder="请输入密钥ID！" />
|
<Input placeholder="请输入密钥ID！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="secretKey"
|
name="secretKey"
|
||||||
label="密钥值"
|
label="密钥值"
|
||||||
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
||||||
<Input placeholder="请输入密钥值！" />
|
<Input placeholder="请输入密钥值！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</Form>
|
</Form>
|
||||||
</Drawer>
|
</Drawer>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ProTable<AliOssConfigItem>
|
<div style={{ height: "65vh" }}>
|
||||||
columns={columns}
|
<ProTable<QiniuOssConfigItem>
|
||||||
dataSource={data}
|
columns={columns}
|
||||||
actionRef={actionRef}
|
dataSource={data}
|
||||||
cardBordered={true}
|
actionRef={actionRef}
|
||||||
editable={{
|
cardBordered={true}
|
||||||
type: "multiple",
|
editable={{
|
||||||
}}
|
type: "multiple",
|
||||||
columnsState={{
|
}}
|
||||||
persistenceKey: "pro-table-singe-demos",
|
columnsState={{
|
||||||
persistenceType: "localStorage",
|
persistenceKey: "pro-table-singe-demos",
|
||||||
defaultValue: {
|
persistenceType: "localStorage",
|
||||||
option: { fixed: "right", disable: true },
|
defaultValue: {
|
||||||
},
|
option: { fixed: "right", disable: true },
|
||||||
}}
|
},
|
||||||
rowKey="id"
|
}}
|
||||||
search={false}
|
rowKey="id"
|
||||||
options={{
|
search={false}
|
||||||
setting: {
|
options={{
|
||||||
listsHeight: 400,
|
setting: {
|
||||||
},
|
listsHeight: 400,
|
||||||
}}
|
},
|
||||||
pagination={{
|
}}
|
||||||
pageSize: 5,
|
pagination={
|
||||||
}}
|
{
|
||||||
dateFormatter="string"
|
pageSize: 5,
|
||||||
headerTitle="七牛Kodo配置"
|
} as any
|
||||||
bordered={false}
|
}
|
||||||
toolBarRender={() => [
|
dateFormatter="string"
|
||||||
<Button
|
headerTitle="七牛Kodo配置"
|
||||||
key="button"
|
bordered={false}
|
||||||
icon={<PlusOutlined />}
|
toolBarRender={() => [
|
||||||
onClick={() => {
|
<Button
|
||||||
showDrawer();
|
key="button"
|
||||||
}}
|
icon={<PlusOutlined />}
|
||||||
type="primary">
|
onClick={() => {
|
||||||
新建
|
showDrawer();
|
||||||
</Button>,
|
}}
|
||||||
]}
|
type="primary">
|
||||||
/>
|
新建
|
||||||
<AddQiniuOssConfigDrawer />
|
</Button>,
|
||||||
</>
|
]}
|
||||||
);
|
/>
|
||||||
};
|
<AddQiniuOssConfigDrawer />
|
||||||
|
</div>
|
||||||
export default QiniuSettings;
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default QiniuSettings;
|
||||||
|
|||||||
@@ -1,215 +1,219 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
import { PlusOutlined } from "@ant-design/icons";
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
import React, { useRef, useState } from "react";
|
import React, { ReactNode, useRef, useState } from "react";
|
||||||
|
|
||||||
type AliOssConfigItem = {
|
type TencentOssConfigItem = {
|
||||||
id: number;
|
id: number;
|
||||||
userId: number;
|
userId: number;
|
||||||
bucketName: string;
|
bucketName: string;
|
||||||
secretId: string;
|
secretId: string;
|
||||||
secretKey: string;
|
secretKey: string;
|
||||||
createdTime: string;
|
createdTime: string;
|
||||||
updatedTime: string;
|
updatedTime: string;
|
||||||
status: string;
|
status: string;
|
||||||
};
|
};
|
||||||
const data: AliOssConfigItem[] = [
|
const data: TencentOssConfigItem[] = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
userId: 1,
|
userId: 1,
|
||||||
bucketName: "https://oss.aliyuncs.com",
|
bucketName: "https://oss.aliyuncs.com",
|
||||||
secretId: "LTAI5tG3",
|
secretId: "LTAI5tG3",
|
||||||
secretKey: "G3",
|
secretKey: "G3",
|
||||||
createdTime: "2022-01-01",
|
createdTime: "2022-01-01",
|
||||||
updatedTime: "2022-01-01",
|
updatedTime: "2022-01-01",
|
||||||
status: "正常",
|
status: "正常",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const columns: ProColumns<AliOssConfigItem>[] = [
|
const columns: ProColumns<TencentOssConfigItem>[] = [
|
||||||
{
|
{
|
||||||
dataIndex: "index",
|
dataIndex: "index",
|
||||||
valueType: "indexBorder",
|
valueType: "indexBorder",
|
||||||
width: 48,
|
width: 48,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ID",
|
title: "ID",
|
||||||
dataIndex: "id",
|
dataIndex: "id",
|
||||||
copyable: true,
|
copyable: true,
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
tooltip: "Id",
|
tooltip: "Id",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "存储桶",
|
title: "存储桶",
|
||||||
dataIndex: "bucketName",
|
dataIndex: "bucketName",
|
||||||
tooltip: "bucketName",
|
tooltip: "bucketName",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥ID",
|
title: "密钥ID",
|
||||||
dataIndex: "secretId",
|
dataIndex: "secretId",
|
||||||
tooltip: "secret Id",
|
tooltip: "secret Id",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥值",
|
title: "密钥值",
|
||||||
dataIndex: "secretKey",
|
dataIndex: "secretKey",
|
||||||
tooltip: "secret Key",
|
tooltip: "secret Key",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "状态",
|
title: "状态",
|
||||||
dataIndex: "status",
|
dataIndex: "status",
|
||||||
search: true,
|
search: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "创建时间",
|
title: "创建时间",
|
||||||
dataIndex: "createdTime",
|
dataIndex: "createdTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
hideInSearch: true,
|
hideInSearch: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "更新时间",
|
title: "更新时间",
|
||||||
dataIndex: "updatedTime",
|
dataIndex: "updatedTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "操作",
|
title: "操作",
|
||||||
valueType: "option",
|
valueType: "option",
|
||||||
key: "option",
|
key: "option",
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
render: (text, record, _, action) => [
|
render: (text: ReactNode, record: TencentOssConfigItem, _: number, action: any) => [
|
||||||
<a
|
<a
|
||||||
key="editable"
|
key="editable"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
action?.startEditable?.(record.id);
|
action?.startEditable?.(record.id);
|
||||||
}}>
|
}}>
|
||||||
编辑
|
编辑
|
||||||
</a>,
|
</a>,
|
||||||
<a target="_blank" rel="noopener noreferrer" key="view">
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
查看
|
查看
|
||||||
</a>,
|
</a>,
|
||||||
<TableDropdown
|
<TableDropdown
|
||||||
key="actionGroup"
|
key="actionGroup"
|
||||||
onSelect={() => action?.reload()}
|
onSelect={() => action?.reload()}
|
||||||
menus={[
|
menus={[
|
||||||
{ key: "copy", name: "复制" },
|
{ key: "copy", name: "复制" },
|
||||||
{ key: "delete", name: "删除" },
|
{ key: "delete", name: "删除" },
|
||||||
]}
|
]}
|
||||||
/>,
|
/>,
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const TencentSettings: React.FC = () => {
|
const TencentSettings: React.FC = () => {
|
||||||
const actionRef = useRef<ActionType>();
|
const actionRef = useRef<ActionType>();
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const showDrawer = () => {
|
const showDrawer = () => {
|
||||||
setOpen(true);
|
setOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClose = () => {
|
const onClose = () => {
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
};
|
};
|
||||||
const AddTencentOssConfigDrawer = () => {
|
const AddTencentOssConfigDrawer = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Drawer
|
<Drawer
|
||||||
title="创建连接配置"
|
title="创建连接配置"
|
||||||
width={720}
|
width={720}
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
open={open}
|
open={open}
|
||||||
styles={{
|
styles={{
|
||||||
body: {
|
body: {
|
||||||
paddingBottom: 80,
|
paddingBottom: 80,
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
extra={
|
extra={
|
||||||
<Space>
|
<Space>
|
||||||
<Button onClick={onClose}>取消</Button>
|
<Button onClick={onClose}>取消</Button>
|
||||||
<Button onClick={onClose} type="primary">
|
<Button onClick={onClose} type="primary">
|
||||||
提交
|
提交
|
||||||
</Button>
|
</Button>
|
||||||
</Space>
|
</Space>
|
||||||
}>
|
}>
|
||||||
<Form layout="vertical">
|
<Form layout="vertical">
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="secretId"
|
name="secretId"
|
||||||
label="密钥ID"
|
label="密钥ID"
|
||||||
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
||||||
<Input placeholder="请输入密钥ID！" />
|
<Input placeholder="请输入密钥ID！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="secretKey"
|
name="secretKey"
|
||||||
label="密钥值"
|
label="密钥值"
|
||||||
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
||||||
<Input placeholder="请输入密钥值！" />
|
<Input placeholder="请输入密钥值！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</Form>
|
</Form>
|
||||||
</Drawer>
|
</Drawer>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ProTable<AliOssConfigItem>
|
<div style={{ height: "65vh" }}>
|
||||||
columns={columns}
|
<ProTable<TencentOssConfigItem>
|
||||||
dataSource={data}
|
columns={columns}
|
||||||
actionRef={actionRef}
|
dataSource={data}
|
||||||
cardBordered={true}
|
actionRef={actionRef}
|
||||||
editable={{
|
cardBordered={true}
|
||||||
type: "multiple",
|
editable={{
|
||||||
}}
|
type: "multiple",
|
||||||
columnsState={{
|
}}
|
||||||
persistenceKey: "pro-table-singe-demos",
|
columnsState={{
|
||||||
persistenceType: "localStorage",
|
persistenceKey: "pro-table-singe-demos",
|
||||||
defaultValue: {
|
persistenceType: "localStorage",
|
||||||
option: { fixed: "right", disable: true },
|
defaultValue: {
|
||||||
},
|
option: { fixed: "right", disable: true },
|
||||||
}}
|
},
|
||||||
rowKey="id"
|
}}
|
||||||
search={false}
|
rowKey="id"
|
||||||
options={{
|
search={false}
|
||||||
setting: {
|
options={{
|
||||||
listsHeight: 400,
|
setting: {
|
||||||
},
|
listsHeight: 400,
|
||||||
}}
|
},
|
||||||
pagination={{
|
}}
|
||||||
pageSize: 5,
|
pagination={
|
||||||
}}
|
{
|
||||||
dateFormatter="string"
|
pageSize: 5,
|
||||||
headerTitle="腾讯云COS配置"
|
} as any
|
||||||
bordered={false}
|
}
|
||||||
toolBarRender={() => [
|
dateFormatter="string"
|
||||||
<Button
|
headerTitle="腾讯云COS配置"
|
||||||
key="button"
|
bordered={false}
|
||||||
icon={<PlusOutlined />}
|
toolBarRender={() => [
|
||||||
onClick={() => {
|
<Button
|
||||||
showDrawer();
|
key="button"
|
||||||
}}
|
icon={<PlusOutlined />}
|
||||||
type="primary">
|
onClick={() => {
|
||||||
新建
|
showDrawer();
|
||||||
</Button>,
|
}}
|
||||||
]}
|
type="primary">
|
||||||
/>
|
新建
|
||||||
<AddTencentOssConfigDrawer />
|
</Button>,
|
||||||
</>
|
]}
|
||||||
);
|
/>
|
||||||
};
|
<AddTencentOssConfigDrawer />
|
||||||
|
</div>
|
||||||
export default TencentSettings;
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TencentSettings;
|
||||||
|
|||||||
@@ -1,242 +1,246 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
import { PlusOutlined } from "@ant-design/icons";
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
import React, { useRef, useState } from "react";
|
import React, { ReactNode, useRef, useState } from "react";
|
||||||
|
|
||||||
type AliOssConfigItem = {
|
type UcloudOssConfigItem = {
|
||||||
id: number;
|
id: number;
|
||||||
userId: number;
|
userId: number;
|
||||||
bucketName: string;
|
bucketName: string;
|
||||||
publicKey: string;
|
publicKey: string;
|
||||||
privateKey: string;
|
privateKey: string;
|
||||||
customHost: string;
|
customHost: string;
|
||||||
createdTime: string;
|
createdTime: string;
|
||||||
updatedTime: string;
|
updatedTime: string;
|
||||||
status: string;
|
status: string;
|
||||||
};
|
};
|
||||||
const data: AliOssConfigItem[] = [
|
const data: UcloudOssConfigItem[] = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
userId: 1,
|
userId: 1,
|
||||||
bucketName: "https://oss.aliyuncs.com",
|
bucketName: "https://oss.aliyuncs.com",
|
||||||
publicKey: "LTAI5tG3",
|
publicKey: "LTAI5tG3",
|
||||||
privateKey: "G3",
|
privateKey: "G3",
|
||||||
customHost: "G3",
|
customHost: "G3",
|
||||||
createdTime: "2022-01-01",
|
createdTime: "2022-01-01",
|
||||||
updatedTime: "2022-01-01",
|
updatedTime: "2022-01-01",
|
||||||
status: "正常",
|
status: "正常",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const columns: ProColumns<AliOssConfigItem>[] = [
|
const columns: ProColumns<UcloudOssConfigItem>[] = [
|
||||||
{
|
{
|
||||||
dataIndex: "index",
|
dataIndex: "index",
|
||||||
valueType: "indexBorder",
|
valueType: "indexBorder",
|
||||||
width: 48,
|
width: 48,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ID",
|
title: "ID",
|
||||||
dataIndex: "id",
|
dataIndex: "id",
|
||||||
copyable: true,
|
copyable: true,
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
tooltip: "Id",
|
tooltip: "Id",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "存储桶",
|
title: "存储桶",
|
||||||
dataIndex: "bucketName",
|
dataIndex: "bucketName",
|
||||||
tooltip: "bucketName",
|
tooltip: "bucketName",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "公钥",
|
title: "公钥",
|
||||||
dataIndex: "publicKey",
|
dataIndex: "publicKey",
|
||||||
tooltip: "publicKey",
|
tooltip: "publicKey",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "私钥",
|
title: "私钥",
|
||||||
dataIndex: "privateKey",
|
dataIndex: "privateKey",
|
||||||
tooltip: "privateKey",
|
tooltip: "privateKey",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "服务地址",
|
title: "服务地址",
|
||||||
dataIndex: "customHost",
|
dataIndex: "customHost",
|
||||||
tooltip: "customHost",
|
tooltip: "customHost",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "状态",
|
title: "状态",
|
||||||
dataIndex: "status",
|
dataIndex: "status",
|
||||||
search: true,
|
search: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "创建时间",
|
title: "创建时间",
|
||||||
dataIndex: "createdTime",
|
dataIndex: "createdTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
hideInSearch: true,
|
hideInSearch: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "更新时间",
|
title: "更新时间",
|
||||||
dataIndex: "updatedTime",
|
dataIndex: "updatedTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "操作",
|
title: "操作",
|
||||||
valueType: "option",
|
valueType: "option",
|
||||||
key: "option",
|
key: "option",
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
render: (text, record, _, action) => [
|
render: (text: ReactNode, record: UcloudOssConfigItem, _: number, action: any) => [
|
||||||
<a
|
<a
|
||||||
key="editable"
|
key="editable"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
action?.startEditable?.(record.id);
|
action?.startEditable?.(record.id);
|
||||||
}}>
|
}}>
|
||||||
编辑
|
编辑
|
||||||
</a>,
|
</a>,
|
||||||
<a target="_blank" rel="noopener noreferrer" key="view">
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
查看
|
查看
|
||||||
</a>,
|
</a>,
|
||||||
<TableDropdown
|
<TableDropdown
|
||||||
key="actionGroup"
|
key="actionGroup"
|
||||||
onSelect={() => action?.reload()}
|
onSelect={() => action?.reload()}
|
||||||
menus={[
|
menus={[
|
||||||
{ key: "copy", name: "复制" },
|
{ key: "copy", name: "复制" },
|
||||||
{ key: "delete", name: "删除" },
|
{ key: "delete", name: "删除" },
|
||||||
]}
|
]}
|
||||||
/>,
|
/>,
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const UcloudSettings: React.FC = () => {
|
const UcloudSettings: React.FC = () => {
|
||||||
const actionRef = useRef<ActionType>();
|
const actionRef = useRef<ActionType>();
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const showDrawer = () => {
|
const showDrawer = () => {
|
||||||
setOpen(true);
|
setOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClose = () => {
|
const onClose = () => {
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
};
|
};
|
||||||
const AddUcloudOssConfigDrawer = () => {
|
const AddUcloudOssConfigDrawer = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Drawer
|
<Drawer
|
||||||
title="创建连接配置"
|
title="创建连接配置"
|
||||||
width={720}
|
width={720}
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
open={open}
|
open={open}
|
||||||
styles={{
|
styles={{
|
||||||
body: {
|
body: {
|
||||||
paddingBottom: 80,
|
paddingBottom: 80,
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
extra={
|
extra={
|
||||||
<Space>
|
<Space>
|
||||||
<Button onClick={onClose}>取消</Button>
|
<Button onClick={onClose}>取消</Button>
|
||||||
<Button onClick={onClose} type="primary">
|
<Button onClick={onClose} type="primary">
|
||||||
提交
|
提交
|
||||||
</Button>
|
</Button>
|
||||||
</Space>
|
</Space>
|
||||||
}>
|
}>
|
||||||
<Form layout="vertical">
|
<Form layout="vertical">
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="customHost"
|
name="customHost"
|
||||||
label="服务地址"
|
label="服务地址"
|
||||||
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
||||||
<Input placeholder="请输入服务地址！" />
|
<Input placeholder="请输入服务地址！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="bucketName"
|
name="bucketName"
|
||||||
label="存储桶"
|
label="存储桶"
|
||||||
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
||||||
<Input placeholder="请输入存储桶！" />
|
<Input placeholder="请输入存储桶！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="publicKey"
|
name="publicKey"
|
||||||
label="公钥"
|
label="公钥"
|
||||||
rules={[{ required: true, message: "请输入公钥!" }]}>
|
rules={[{ required: true, message: "请输入公钥!" }]}>
|
||||||
<Input placeholder="请输入公钥！" />
|
<Input placeholder="请输入公钥！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="privateKey"
|
name="privateKey"
|
||||||
label="私钥"
|
label="私钥"
|
||||||
rules={[{ required: true, message: "请输入私钥!" }]}>
|
rules={[{ required: true, message: "请输入私钥!" }]}>
|
||||||
<Input placeholder="请输入私钥！" />
|
<Input placeholder="请输入私钥！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</Form>
|
</Form>
|
||||||
</Drawer>
|
</Drawer>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ProTable<AliOssConfigItem>
|
<div style={{ height: "65vh" }}>
|
||||||
columns={columns}
|
<ProTable<UcloudOssConfigItem>
|
||||||
dataSource={data}
|
columns={columns}
|
||||||
actionRef={actionRef}
|
dataSource={data}
|
||||||
cardBordered={true}
|
actionRef={actionRef}
|
||||||
editable={{
|
cardBordered={true}
|
||||||
type: "multiple",
|
editable={{
|
||||||
}}
|
type: "multiple",
|
||||||
columnsState={{
|
}}
|
||||||
persistenceKey: "pro-table-singe-demos",
|
columnsState={{
|
||||||
persistenceType: "localStorage",
|
persistenceKey: "pro-table-singe-demos",
|
||||||
defaultValue: {
|
persistenceType: "localStorage",
|
||||||
option: { fixed: "right", disable: true },
|
defaultValue: {
|
||||||
},
|
option: { fixed: "right", disable: true },
|
||||||
}}
|
},
|
||||||
rowKey="id"
|
}}
|
||||||
search={false}
|
rowKey="id"
|
||||||
options={{
|
search={false}
|
||||||
setting: {
|
options={{
|
||||||
listsHeight: 400,
|
setting: {
|
||||||
},
|
listsHeight: 400,
|
||||||
}}
|
},
|
||||||
pagination={{
|
}}
|
||||||
pageSize: 5,
|
pagination={
|
||||||
}}
|
{
|
||||||
dateFormatter="string"
|
pageSize: 5,
|
||||||
headerTitle="UCloud US3配置"
|
} as any
|
||||||
bordered={false}
|
}
|
||||||
toolBarRender={() => [
|
dateFormatter="string"
|
||||||
<Button
|
headerTitle="UCloud US3配置"
|
||||||
key="button"
|
bordered={false}
|
||||||
icon={<PlusOutlined />}
|
toolBarRender={() => [
|
||||||
onClick={() => {
|
<Button
|
||||||
showDrawer();
|
key="button"
|
||||||
}}
|
icon={<PlusOutlined />}
|
||||||
type="primary">
|
onClick={() => {
|
||||||
新建
|
showDrawer();
|
||||||
</Button>,
|
}}
|
||||||
]}
|
type="primary">
|
||||||
/>
|
新建
|
||||||
<AddUcloudOssConfigDrawer />
|
</Button>,
|
||||||
</>
|
]}
|
||||||
);
|
/>
|
||||||
};
|
<AddUcloudOssConfigDrawer />
|
||||||
|
</div>
|
||||||
export default UcloudSettings;
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UcloudSettings;
|
||||||
|
|||||||
@@ -1,225 +1,229 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
import { PlusOutlined } from "@ant-design/icons";
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
import React, { useRef, useState } from "react";
|
import React, { ReactNode, useRef, useState } from "react";
|
||||||
|
|
||||||
type AliOssConfigItem = {
|
type UpOssConfigItem = {
|
||||||
id: number;
|
id: number;
|
||||||
userId: number;
|
userId: number;
|
||||||
bucketName: string;
|
bucketName: string;
|
||||||
userName: string;
|
userName: string;
|
||||||
password: string;
|
password: string;
|
||||||
createdTime: string;
|
createdTime: string;
|
||||||
updatedTime: string;
|
updatedTime: string;
|
||||||
status: string;
|
status: string;
|
||||||
};
|
};
|
||||||
const data: AliOssConfigItem[] = [
|
const data: UpOssConfigItem[] = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
userId: 1,
|
userId: 1,
|
||||||
bucketName: "https://oss.aliyuncs.com",
|
bucketName: "https://oss.aliyuncs.com",
|
||||||
userName: "LTAI5tG3",
|
userName: "LTAI5tG3",
|
||||||
password: "G3",
|
password: "G3",
|
||||||
createdTime: "2022-01-01",
|
createdTime: "2022-01-01",
|
||||||
updatedTime: "2022-01-01",
|
updatedTime: "2022-01-01",
|
||||||
status: "正常",
|
status: "正常",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const columns: ProColumns<AliOssConfigItem>[] = [
|
const columns: ProColumns<UpOssConfigItem>[] = [
|
||||||
{
|
{
|
||||||
dataIndex: "index",
|
dataIndex: "index",
|
||||||
valueType: "indexBorder",
|
valueType: "indexBorder",
|
||||||
width: 48,
|
width: 48,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ID",
|
title: "ID",
|
||||||
dataIndex: "id",
|
dataIndex: "id",
|
||||||
copyable: true,
|
copyable: true,
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
tooltip: "Id",
|
tooltip: "Id",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "存储桶",
|
title: "存储桶",
|
||||||
dataIndex: "bucketName",
|
dataIndex: "bucketName",
|
||||||
tooltip: "bucketName",
|
tooltip: "bucketName",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "用户名",
|
title: "用户名",
|
||||||
dataIndex: "userName",
|
dataIndex: "userName",
|
||||||
tooltip: "userName",
|
tooltip: "userName",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密码",
|
title: "密码",
|
||||||
dataIndex: "password",
|
dataIndex: "password",
|
||||||
tooltip: "password",
|
tooltip: "password",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "状态",
|
title: "状态",
|
||||||
dataIndex: "status",
|
dataIndex: "status",
|
||||||
search: true,
|
search: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "创建时间",
|
title: "创建时间",
|
||||||
dataIndex: "createdTime",
|
dataIndex: "createdTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
hideInSearch: true,
|
hideInSearch: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "更新时间",
|
title: "更新时间",
|
||||||
dataIndex: "updatedTime",
|
dataIndex: "updatedTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "操作",
|
title: "操作",
|
||||||
valueType: "option",
|
valueType: "option",
|
||||||
key: "option",
|
key: "option",
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
render: (text, record, _, action) => [
|
render: (text: ReactNode, record: UpOssConfigItem, _: number, action: any) => [
|
||||||
<a
|
<a
|
||||||
key="editable"
|
key="editable"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
action?.startEditable?.(record.id);
|
action?.startEditable?.(record.id);
|
||||||
}}>
|
}}>
|
||||||
编辑
|
编辑
|
||||||
</a>,
|
</a>,
|
||||||
<a target="_blank" rel="noopener noreferrer" key="view">
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
查看
|
查看
|
||||||
</a>,
|
</a>,
|
||||||
<TableDropdown
|
<TableDropdown
|
||||||
key="actionGroup"
|
key="actionGroup"
|
||||||
onSelect={() => action?.reload()}
|
onSelect={() => action?.reload()}
|
||||||
menus={[
|
menus={[
|
||||||
{ key: "copy", name: "复制" },
|
{ key: "copy", name: "复制" },
|
||||||
{ key: "delete", name: "删除" },
|
{ key: "delete", name: "删除" },
|
||||||
]}
|
]}
|
||||||
/>,
|
/>,
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const UpSettings: React.FC = () => {
|
const UpSettings: React.FC = () => {
|
||||||
const actionRef = useRef<ActionType>();
|
const actionRef = useRef<ActionType>();
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const showDrawer = () => {
|
const showDrawer = () => {
|
||||||
setOpen(true);
|
setOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClose = () => {
|
const onClose = () => {
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
};
|
};
|
||||||
const AddUpOssConfigDrawer = () => {
|
const AddUpOssConfigDrawer = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Drawer
|
<Drawer
|
||||||
title="创建连接配置"
|
title="创建连接配置"
|
||||||
width={720}
|
width={720}
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
open={open}
|
open={open}
|
||||||
styles={{
|
styles={{
|
||||||
body: {
|
body: {
|
||||||
paddingBottom: 80,
|
paddingBottom: 80,
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
extra={
|
extra={
|
||||||
<Space>
|
<Space>
|
||||||
<Button onClick={onClose}>取消</Button>
|
<Button onClick={onClose}>取消</Button>
|
||||||
<Button onClick={onClose} type="primary">
|
<Button onClick={onClose} type="primary">
|
||||||
提交
|
提交
|
||||||
</Button>
|
</Button>
|
||||||
</Space>
|
</Space>
|
||||||
}>
|
}>
|
||||||
<Form layout="vertical">
|
<Form layout="vertical">
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="bucketName"
|
name="bucketName"
|
||||||
label="存储桶"
|
label="存储桶"
|
||||||
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
||||||
<Input placeholder="请输入存储桶！" />
|
<Input placeholder="请输入存储桶！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="userName"
|
name="userName"
|
||||||
label="用户名"
|
label="用户名"
|
||||||
rules={[{ required: true, message: "请输入用户名!" }]}>
|
rules={[{ required: true, message: "请输入用户名!" }]}>
|
||||||
<Input placeholder="请输入用户名！" />
|
<Input placeholder="请输入用户名！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="password"
|
name="password"
|
||||||
label="密码"
|
label="密码"
|
||||||
rules={[{ required: true, message: "请输入密码!" }]}>
|
rules={[{ required: true, message: "请输入密码!" }]}>
|
||||||
<Input placeholder="请输入密码！" />
|
<Input placeholder="请输入密码！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</Form>
|
</Form>
|
||||||
</Drawer>
|
</Drawer>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ProTable<AliOssConfigItem>
|
<div style={{ height: "65vh" }}>
|
||||||
columns={columns}
|
<ProTable<UpOssConfigItem>
|
||||||
dataSource={data}
|
columns={columns}
|
||||||
actionRef={actionRef}
|
dataSource={data}
|
||||||
cardBordered={true}
|
actionRef={actionRef}
|
||||||
editable={{
|
cardBordered={true}
|
||||||
type: "multiple",
|
editable={{
|
||||||
}}
|
type: "multiple",
|
||||||
columnsState={{
|
}}
|
||||||
persistenceKey: "pro-table-singe-demos",
|
columnsState={{
|
||||||
persistenceType: "localStorage",
|
persistenceKey: "pro-table-singe-demos",
|
||||||
defaultValue: {
|
persistenceType: "localStorage",
|
||||||
option: { fixed: "right", disable: true },
|
defaultValue: {
|
||||||
},
|
option: { fixed: "right", disable: true },
|
||||||
}}
|
},
|
||||||
rowKey="id"
|
}}
|
||||||
search={false}
|
rowKey="id"
|
||||||
options={{
|
search={false}
|
||||||
setting: {
|
options={{
|
||||||
listsHeight: 400,
|
setting: {
|
||||||
},
|
listsHeight: 400,
|
||||||
}}
|
},
|
||||||
pagination={{
|
}}
|
||||||
pageSize: 5,
|
pagination={
|
||||||
}}
|
{
|
||||||
dateFormatter="string"
|
pageSize: 5,
|
||||||
headerTitle="又拍云USS配置"
|
} as any
|
||||||
bordered={false}
|
}
|
||||||
toolBarRender={() => [
|
dateFormatter="string"
|
||||||
<Button
|
headerTitle="又拍云USS配置"
|
||||||
key="button"
|
bordered={false}
|
||||||
icon={<PlusOutlined />}
|
toolBarRender={() => [
|
||||||
onClick={() => {
|
<Button
|
||||||
showDrawer();
|
key="button"
|
||||||
}}
|
icon={<PlusOutlined />}
|
||||||
type="primary">
|
onClick={() => {
|
||||||
新建
|
showDrawer();
|
||||||
</Button>,
|
}}
|
||||||
]}
|
type="primary">
|
||||||
/>
|
新建
|
||||||
<AddUpOssConfigDrawer />
|
</Button>,
|
||||||
</>
|
]}
|
||||||
);
|
/>
|
||||||
};
|
<AddUpOssConfigDrawer />
|
||||||
|
</div>
|
||||||
export default UpSettings;
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UpSettings;
|
||||||
|
|||||||
@@ -1,242 +1,246 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
import { PlusOutlined } from "@ant-design/icons";
|
import { PlusOutlined } from "@ant-design/icons";
|
||||||
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
import type { ActionType, ProColumns } from "@ant-design/pro-components";
|
||||||
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
import { ProTable, TableDropdown } from "@ant-design/pro-components";
|
||||||
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
|
||||||
import React, { useRef, useState } from "react";
|
import React, { ReactNode, useRef, useState } from "react";
|
||||||
|
|
||||||
type AliOssConfigItem = {
|
type WangyiOssConfigItem = {
|
||||||
id: number;
|
id: number;
|
||||||
userId: number;
|
userId: number;
|
||||||
endpoint: string;
|
endpoint: string;
|
||||||
bucketName: string;
|
bucketName: string;
|
||||||
accessKey: string;
|
accessKey: string;
|
||||||
secretKey: string;
|
secretKey: string;
|
||||||
createdTime: string;
|
createdTime: string;
|
||||||
updatedTime: string;
|
updatedTime: string;
|
||||||
status: string;
|
status: string;
|
||||||
};
|
};
|
||||||
const data: AliOssConfigItem[] = [
|
const data: WangyiOssConfigItem[] = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
userId: 1,
|
userId: 1,
|
||||||
endpoint: "https://oss.aliyuncs.com",
|
endpoint: "https://oss.aliyuncs.com",
|
||||||
bucketName: "https://oss.aliyuncs.com",
|
bucketName: "https://oss.aliyuncs.com",
|
||||||
accessKey: "LTAI5tG3",
|
accessKey: "LTAI5tG3",
|
||||||
secretKey: "G3",
|
secretKey: "G3",
|
||||||
createdTime: "2022-01-01",
|
createdTime: "2022-01-01",
|
||||||
updatedTime: "2022-01-01",
|
updatedTime: "2022-01-01",
|
||||||
status: "正常",
|
status: "正常",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const columns: ProColumns<AliOssConfigItem>[] = [
|
const columns: ProColumns<WangyiOssConfigItem>[] = [
|
||||||
{
|
{
|
||||||
dataIndex: "index",
|
dataIndex: "index",
|
||||||
valueType: "indexBorder",
|
valueType: "indexBorder",
|
||||||
width: 48,
|
width: 48,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ID",
|
title: "ID",
|
||||||
dataIndex: "id",
|
dataIndex: "id",
|
||||||
copyable: true,
|
copyable: true,
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
tooltip: "Id",
|
tooltip: "Id",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "服务地址",
|
title: "服务地址",
|
||||||
dataIndex: "endpoint",
|
dataIndex: "endpoint",
|
||||||
tooltip: "endpoint",
|
tooltip: "endpoint",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "存储桶",
|
title: "存储桶",
|
||||||
dataIndex: "bucketName",
|
dataIndex: "bucketName",
|
||||||
tooltip: "bucketName",
|
tooltip: "bucketName",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥ID",
|
title: "密钥ID",
|
||||||
dataIndex: "accessKey",
|
dataIndex: "accessKey",
|
||||||
tooltip: "accessKey",
|
tooltip: "accessKey",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "密钥值",
|
title: "密钥值",
|
||||||
dataIndex: "secretKey",
|
dataIndex: "secretKey",
|
||||||
tooltip: "secretKey",
|
tooltip: "secretKey",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disable: true,
|
disable: true,
|
||||||
title: "状态",
|
title: "状态",
|
||||||
dataIndex: "status",
|
dataIndex: "status",
|
||||||
search: true,
|
search: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "创建时间",
|
title: "创建时间",
|
||||||
dataIndex: "createdTime",
|
dataIndex: "createdTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
hideInSearch: true,
|
hideInSearch: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "更新时间",
|
title: "更新时间",
|
||||||
dataIndex: "updatedTime",
|
dataIndex: "updatedTime",
|
||||||
valueType: "dateTime",
|
valueType: "dateTime",
|
||||||
sorter: true,
|
sorter: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "操作",
|
title: "操作",
|
||||||
valueType: "option",
|
valueType: "option",
|
||||||
key: "option",
|
key: "option",
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
render: (text, record, _, action) => [
|
render: (text: ReactNode, record: WangyiOssConfigItem, _: number, action: any) => [
|
||||||
<a
|
<a
|
||||||
key="editable"
|
key="editable"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
action?.startEditable?.(record.id);
|
action?.startEditable?.(record.id);
|
||||||
}}>
|
}}>
|
||||||
编辑
|
编辑
|
||||||
</a>,
|
</a>,
|
||||||
<a target="_blank" rel="noopener noreferrer" key="view">
|
<a target="_blank" rel="noopener noreferrer" key="view">
|
||||||
查看
|
查看
|
||||||
</a>,
|
</a>,
|
||||||
<TableDropdown
|
<TableDropdown
|
||||||
key="actionGroup"
|
key="actionGroup"
|
||||||
onSelect={() => action?.reload()}
|
onSelect={() => action?.reload()}
|
||||||
menus={[
|
menus={[
|
||||||
{ key: "copy", name: "复制" },
|
{ key: "copy", name: "复制" },
|
||||||
{ key: "delete", name: "删除" },
|
{ key: "delete", name: "删除" },
|
||||||
]}
|
]}
|
||||||
/>,
|
/>,
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const WangyiSettings: React.FC = () => {
|
const WangyiSettings: React.FC = () => {
|
||||||
const actionRef = useRef<ActionType>();
|
const actionRef = useRef<ActionType>();
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const showDrawer = () => {
|
const showDrawer = () => {
|
||||||
setOpen(true);
|
setOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClose = () => {
|
const onClose = () => {
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
};
|
};
|
||||||
const AddWangyiOssConfigDrawer = () => {
|
const AddWangyiOssConfigDrawer = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Drawer
|
<Drawer
|
||||||
title="创建连接配置"
|
title="创建连接配置"
|
||||||
width={720}
|
width={720}
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
open={open}
|
open={open}
|
||||||
styles={{
|
styles={{
|
||||||
body: {
|
body: {
|
||||||
paddingBottom: 80,
|
paddingBottom: 80,
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
extra={
|
extra={
|
||||||
<Space>
|
<Space>
|
||||||
<Button onClick={onClose}>取消</Button>
|
<Button onClick={onClose}>取消</Button>
|
||||||
<Button onClick={onClose} type="primary">
|
<Button onClick={onClose} type="primary">
|
||||||
提交
|
提交
|
||||||
</Button>
|
</Button>
|
||||||
</Space>
|
</Space>
|
||||||
}>
|
}>
|
||||||
<Form layout="vertical">
|
<Form layout="vertical">
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="endpoint"
|
name="endpoint"
|
||||||
label="服务地址"
|
label="服务地址"
|
||||||
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
rules={[{ required: true, message: "请输入服务地址！" }]}>
|
||||||
<Input placeholder="请输入服务地址！" />
|
<Input placeholder="请输入服务地址！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="bucketName"
|
name="bucketName"
|
||||||
label="存储桶"
|
label="存储桶"
|
||||||
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
rules={[{ required: true, message: "请输入存储桶！" }]}>
|
||||||
<Input placeholder="请输入存储桶！" />
|
<Input placeholder="请输入存储桶！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="accessKey"
|
name="accessKey"
|
||||||
label="密钥ID"
|
label="密钥ID"
|
||||||
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
rules={[{ required: true, message: "请输入密钥ID!" }]}>
|
||||||
<Input placeholder="请输入密钥ID！" />
|
<Input placeholder="请输入密钥ID！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="secretKey"
|
name="secretKey"
|
||||||
label="密钥值"
|
label="密钥值"
|
||||||
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
rules={[{ required: true, message: "请输入密钥值!" }]}>
|
||||||
<Input placeholder="请输入密钥值！" />
|
<Input placeholder="请输入密钥值！" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</Form>
|
</Form>
|
||||||
</Drawer>
|
</Drawer>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ProTable<AliOssConfigItem>
|
<div style={{ height: "65vh" }}>
|
||||||
columns={columns}
|
<ProTable<WangyiOssConfigItem>
|
||||||
dataSource={data}
|
columns={columns}
|
||||||
actionRef={actionRef}
|
dataSource={data}
|
||||||
cardBordered={true}
|
actionRef={actionRef}
|
||||||
editable={{
|
cardBordered={true}
|
||||||
type: "multiple",
|
editable={{
|
||||||
}}
|
type: "multiple",
|
||||||
columnsState={{
|
}}
|
||||||
persistenceKey: "pro-table-singe-demos",
|
columnsState={{
|
||||||
persistenceType: "localStorage",
|
persistenceKey: "pro-table-singe-demos",
|
||||||
defaultValue: {
|
persistenceType: "localStorage",
|
||||||
option: { fixed: "right", disable: true },
|
defaultValue: {
|
||||||
},
|
option: { fixed: "right", disable: true },
|
||||||
}}
|
},
|
||||||
rowKey="id"
|
}}
|
||||||
search={false}
|
rowKey="id"
|
||||||
options={{
|
search={false}
|
||||||
setting: {
|
options={{
|
||||||
listsHeight: 400,
|
setting: {
|
||||||
},
|
listsHeight: 400,
|
||||||
}}
|
},
|
||||||
pagination={{
|
}}
|
||||||
pageSize: 5,
|
pagination={
|
||||||
}}
|
{
|
||||||
dateFormatter="string"
|
pageSize: 5,
|
||||||
headerTitle="阿里云OSS配置"
|
} as any
|
||||||
bordered={false}
|
}
|
||||||
toolBarRender={() => [
|
dateFormatter="string"
|
||||||
<Button
|
headerTitle="阿里云OSS配置"
|
||||||
key="button"
|
bordered={false}
|
||||||
icon={<PlusOutlined />}
|
toolBarRender={() => [
|
||||||
onClick={() => {
|
<Button
|
||||||
showDrawer();
|
key="button"
|
||||||
}}
|
icon={<PlusOutlined />}
|
||||||
type="primary">
|
onClick={() => {
|
||||||
新建
|
showDrawer();
|
||||||
</Button>,
|
}}
|
||||||
]}
|
type="primary">
|
||||||
/>
|
新建
|
||||||
<AddWangyiOssConfigDrawer />
|
</Button>,
|
||||||
</>
|
]}
|
||||||
);
|
/>
|
||||||
};
|
<AddWangyiOssConfigDrawer />
|
||||||
|
</div>
|
||||||
export default WangyiSettings;
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WangyiSettings;
|
||||||
|
|||||||
@@ -58,7 +58,7 @@ export default () => {
|
|||||||
<ProCard style={{ marginTop: 20, height: "100%" }} bordered boxShadow>
|
<ProCard style={{ marginTop: 20, height: "100%" }} bordered boxShadow>
|
||||||
{location.pathname === "/main/setting" || location.pathname === "/main/setting/" ? (
|
{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 "aieditor/dist/style.css";
|
||||||
import styles from "./index.module.less";
|
import styles from "./index.module.less";
|
||||||
import { ProCard } from "@ant-design/pro-components";
|
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 { CloseOutlined, LeftOutlined, MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
|
||||||
import selectOptions from "@/components/Main/Settings/settings.ts";
|
import selectOptions from "@/components/Main/Settings/settings.ts";
|
||||||
|
|
||||||
@@ -34,7 +34,7 @@ const ShareAdd: React.FunctionComponent = () => {
|
|||||||
content: value.getHtml(),
|
content: value.getHtml(),
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
});
|
} as any);
|
||||||
return () => {
|
return () => {
|
||||||
aiEditor.destroy();
|
aiEditor.destroy();
|
||||||
};
|
};
|
||||||
@@ -44,38 +44,66 @@ const ShareAdd: React.FunctionComponent = () => {
|
|||||||
<>
|
<>
|
||||||
<div className={styles.share_add_main}>
|
<div className={styles.share_add_main}>
|
||||||
<ProCard bordered={true}>
|
<ProCard bordered={true}>
|
||||||
<Button
|
<Flex vertical={false} align={"center"}>
|
||||||
shape="circle"
|
<Button
|
||||||
icon={<LeftOutlined />}
|
shape="circle"
|
||||||
onClick={() => {
|
icon={<LeftOutlined />}
|
||||||
navigate("/main/share/list/1");
|
onClick={() => {
|
||||||
}}
|
navigate("/main/share/list/1");
|
||||||
/>
|
}}
|
||||||
|
/>
|
||||||
|
<Flex
|
||||||
|
vertical={false}
|
||||||
|
align={"center"}
|
||||||
|
justify={"center"}
|
||||||
|
style={{ width: "90%" }}>
|
||||||
|
<h3>新增分享</h3>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
</ProCard>
|
</ProCard>
|
||||||
<div className={styles.share_add_content}>
|
<div className={styles.share_add_content}>
|
||||||
<Form onFinish={onFinish} autoComplete="off" ref={fromRef}>
|
<Form onFinish={onFinish} autoComplete="off" ref={fromRef}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label={"标题"}
|
label={
|
||||||
|
<>
|
||||||
|
<h4>标题</h4>
|
||||||
|
</>
|
||||||
|
}
|
||||||
name="title"
|
name="title"
|
||||||
id={"title"}
|
id={"title"}
|
||||||
rules={[{ required: true, message: "请输入标题" }]}>
|
rules={[{ required: true, message: "请输入标题" }]}>
|
||||||
<Input name="title" maxLength={50} showCount></Input>
|
<Input name="title" maxLength={50} showCount></Input>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label={"图标"}
|
label={
|
||||||
|
<>
|
||||||
|
<h4>图标</h4>
|
||||||
|
</>
|
||||||
|
}
|
||||||
id={"icon"}
|
id={"icon"}
|
||||||
name="icon"
|
name="icon"
|
||||||
rules={[{ required: true, message: "请输入图标" }]}>
|
rules={[{ required: true, message: "请输入图标" }]}>
|
||||||
<Input name="icon"></Input>
|
<Input name="icon"></Input>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label={"摘要"}
|
label={
|
||||||
|
<>
|
||||||
|
<h4>摘要</h4>
|
||||||
|
</>
|
||||||
|
}
|
||||||
id={"description"}
|
id={"description"}
|
||||||
name="description"
|
name="description"
|
||||||
rules={[{ required: true, message: "请输入摘要" }]}>
|
rules={[{ required: true, message: "请输入摘要" }]}>
|
||||||
<Input name="description" maxLength={100} showCount></Input>
|
<Input name="description" maxLength={100} showCount></Input>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label={"介绍"} name={"content"} id={"content"}>
|
<Form.Item
|
||||||
|
label={
|
||||||
|
<>
|
||||||
|
<h4>介绍</h4>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
name="content"
|
||||||
|
id={"content"}>
|
||||||
<div
|
<div
|
||||||
ref={divRef}
|
ref={divRef}
|
||||||
style={{ height: "300px", maxWidth: "100%", minWidth: "100%" }}
|
style={{ height: "300px", maxWidth: "100%", minWidth: "100%" }}
|
||||||
@@ -92,7 +120,7 @@ const ShareAdd: React.FunctionComponent = () => {
|
|||||||
if (tags.length >= 3) {
|
if (tags.length >= 3) {
|
||||||
setIsDisabled(true);
|
setIsDisabled(true);
|
||||||
return Promise.reject(
|
return Promise.reject(
|
||||||
new Error("最多只能添加五个标签"),
|
new Error("最多只能添加三个标签"),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -102,7 +130,11 @@ const ShareAdd: React.FunctionComponent = () => {
|
|||||||
<>
|
<>
|
||||||
{fields.map((field: FormListFieldData, index: number) => (
|
{fields.map((field: FormListFieldData, index: number) => (
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label={"标签" + (index + 1)}
|
label={
|
||||||
|
<>
|
||||||
|
<h4>{"标签" + (index + 1)}</h4>
|
||||||
|
</>
|
||||||
|
}
|
||||||
key={index}
|
key={index}
|
||||||
id={"tags"}>
|
id={"tags"}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
@@ -129,7 +161,7 @@ const ShareAdd: React.FunctionComponent = () => {
|
|||||||
))}
|
))}
|
||||||
<Form.Item>
|
<Form.Item>
|
||||||
<Button
|
<Button
|
||||||
type="dashed"
|
type="default"
|
||||||
disabled={isDisabled}
|
disabled={isDisabled}
|
||||||
onClick={() => add()}
|
onClick={() => add()}
|
||||||
style={{ width: "100%" }}
|
style={{ width: "100%" }}
|
||||||
@@ -153,8 +185,14 @@ const ShareAdd: React.FunctionComponent = () => {
|
|||||||
{fields.map((field: FormListFieldData, index: number) => (
|
{fields.map((field: FormListFieldData, index: number) => (
|
||||||
<Card
|
<Card
|
||||||
size="small"
|
size="small"
|
||||||
title={`链接 ${index + 1}`}
|
title={
|
||||||
|
<>
|
||||||
|
<h4>{`链接 ${index + 1}`}</h4>
|
||||||
|
</>
|
||||||
|
}
|
||||||
key={index}
|
key={index}
|
||||||
|
bordered
|
||||||
|
hoverable
|
||||||
extra={
|
extra={
|
||||||
<CloseOutlined
|
<CloseOutlined
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
@@ -199,7 +237,7 @@ const ShareAdd: React.FunctionComponent = () => {
|
|||||||
</Card>
|
</Card>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
<Button type="dashed" onClick={() => add()} block>
|
<Button type="default" onClick={() => add()} block>
|
||||||
+ 添加分享链接
|
+ 添加分享链接
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,10 +1,16 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { Avatar, Button, Card, Divider, Flex, Tooltip } from "antd";
|
import { Avatar, Button, Card, Divider, Flex, Tag, Tooltip } from "antd";
|
||||||
import {
|
import {
|
||||||
|
CommentOutlined,
|
||||||
ExportOutlined,
|
ExportOutlined,
|
||||||
|
EyeOutlined,
|
||||||
|
HeartOutlined,
|
||||||
InfoCircleOutlined,
|
InfoCircleOutlined,
|
||||||
LeftOutlined,
|
LeftOutlined,
|
||||||
|
LikeOutlined,
|
||||||
|
StarOutlined,
|
||||||
|
TagsOutlined,
|
||||||
WarningOutlined,
|
WarningOutlined,
|
||||||
} from "@ant-design/icons";
|
} from "@ant-design/icons";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
@@ -13,7 +19,8 @@ import { ProCard } from "@ant-design/pro-components";
|
|||||||
import styles from "./index.module.less";
|
import styles from "./index.module.less";
|
||||||
import logo from "@/assets/icons/baiduyun.svg";
|
import logo from "@/assets/icons/baiduyun.svg";
|
||||||
import { Typography } from "antd";
|
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 { Paragraph } = Typography;
|
||||||
const ShareDetail: React.FunctionComponent = () => {
|
const ShareDetail: React.FunctionComponent = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
@@ -21,19 +28,69 @@ const ShareDetail: React.FunctionComponent = () => {
|
|||||||
<>
|
<>
|
||||||
<div>
|
<div>
|
||||||
<ProCard bordered={true}>
|
<ProCard bordered={true}>
|
||||||
<Button
|
<Flex vertical={false} align={"center"} justify={"space-between"}>
|
||||||
shape="circle"
|
<Button
|
||||||
icon={<LeftOutlined />}
|
shape="circle"
|
||||||
onClick={() => {
|
icon={<LeftOutlined />}
|
||||||
navigate("/main/share/list/1");
|
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>
|
</ProCard>
|
||||||
<div className={styles.share_detail_container}>
|
<div className={styles.share_detail_container}>
|
||||||
<ProCard bordered={true}>
|
<ProCard bordered={true}>
|
||||||
<div style={{ height: 500 }}>
|
<div style={{ height: 500 }}>资源描述</div>
|
||||||
资源描述
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Card style={{ borderRadius: "10px", borderColor: "#1677FF" }}>
|
<Card style={{ borderRadius: "10px", borderColor: "#1677FF" }}>
|
||||||
<Flex vertical={false} align={"center"} justify={"space-between"}>
|
<Flex vertical={false} align={"center"} justify={"space-between"}>
|
||||||
@@ -124,8 +181,30 @@ const ShareDetail: React.FunctionComponent = () => {
|
|||||||
</span>
|
</span>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Card>
|
</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>
|
</ProCard>
|
||||||
</div>
|
</div>
|
||||||
|
<Comment />
|
||||||
</div>
|
</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 */
|
/** @format */
|
||||||
|
|
||||||
import { ProCard } from "@ant-design/pro-components";
|
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 { useEffect, useState } from "react";
|
||||||
import styles from "./index.module.less";
|
import styles from "./index.module.less";
|
||||||
import Search from "antd/es/input/Search";
|
|
||||||
import InfiniteScroll from "react-infinite-scroll-component";
|
import InfiniteScroll from "react-infinite-scroll-component";
|
||||||
import { useNavigate } from "react-router-dom";
|
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";
|
import logo from "@/assets/icons/aliyun.svg";
|
||||||
interface DataType {
|
interface DataType {
|
||||||
gender: string;
|
gender: string;
|
||||||
@@ -51,7 +56,7 @@ export default () => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className={styles.share_list_main}>
|
<div className={styles.share_list_main}>
|
||||||
<ProCard bordered={true} boxShadow={true}>
|
<ProCard bordered={false} boxShadow={false}>
|
||||||
<div className={styles.share_list_header}>
|
<div className={styles.share_list_header}>
|
||||||
<div>
|
<div>
|
||||||
<Button
|
<Button
|
||||||
@@ -61,10 +66,15 @@ export default () => {
|
|||||||
navigate("/main/share");
|
navigate("/main/share");
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Search placeholder="搜索" style={{ width: 500, marginLeft: 20 }} />
|
<Input
|
||||||
|
placeholder="搜索"
|
||||||
|
style={{ borderRadius: 20, width: 500, marginLeft: 20 }}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
|
icon={<ShareAltOutlined />}
|
||||||
|
type={"primary"}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
navigate("/main/share/add");
|
navigate("/main/share/add");
|
||||||
}}>
|
}}>
|
||||||
@@ -72,7 +82,7 @@ export default () => {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</ProCard>
|
</ProCard>
|
||||||
<ProCard bordered={true} boxShadow={true} style={{ marginTop: 20 }}>
|
<ProCard bordered={false} boxShadow={false}>
|
||||||
<InfiniteScroll
|
<InfiniteScroll
|
||||||
dataLength={data.length}
|
dataLength={data.length}
|
||||||
next={loadMoreData}
|
next={loadMoreData}
|
||||||
@@ -82,6 +92,11 @@ export default () => {
|
|||||||
scrollableTarget="scrollableDiv">
|
scrollableTarget="scrollableDiv">
|
||||||
<List
|
<List
|
||||||
dataSource={data}
|
dataSource={data}
|
||||||
|
header={
|
||||||
|
<>
|
||||||
|
<h4>分享列表</h4>
|
||||||
|
</>
|
||||||
|
}
|
||||||
renderItem={(item) => (
|
renderItem={(item) => (
|
||||||
<List.Item key={item.email}>
|
<List.Item key={item.email}>
|
||||||
<List.Item.Meta
|
<List.Item.Meta
|
||||||
@@ -113,30 +128,53 @@ export default () => {
|
|||||||
vertical={false}
|
vertical={false}
|
||||||
align={"center"}
|
align={"center"}
|
||||||
justify={"space-between"}
|
justify={"space-between"}
|
||||||
style={{ width: "250px" }}>
|
style={{ width: "25%" }}>
|
||||||
<Avatar src={logo} size={"small"} />
|
<Flex vertical={false} align={"center"}>
|
||||||
<span
|
<Avatar
|
||||||
style={{
|
src={logo as any}
|
||||||
fontSize: 12,
|
size={"small"}
|
||||||
color: "gray",
|
/>
|
||||||
}}>
|
<span
|
||||||
landaiqing
|
style={{
|
||||||
</span>
|
fontSize: 12,
|
||||||
<HeartOutlined />
|
color: "gray",
|
||||||
<span
|
overflow: "hidden",
|
||||||
style={{ fontSize: 12, color: "gray" }}>
|
}}>
|
||||||
1024
|
landaiqing
|
||||||
</span>
|
</span>
|
||||||
<CommentOutlined />
|
</Flex>
|
||||||
<span
|
<Flex vertical={false} align={"center"}>
|
||||||
style={{ fontSize: 12, color: "gray" }}>
|
<HeartOutlined />
|
||||||
1024
|
<span
|
||||||
</span>
|
style={{
|
||||||
<EyeOutlined style={{ color: "gray" }} />{" "}
|
fontSize: 12,
|
||||||
<span
|
color: "gray",
|
||||||
style={{ fontSize: 12, color: "gray" }}>
|
}}>
|
||||||
1024
|
1024
|
||||||
</span>
|
</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>
|
||||||
</Flex>
|
</Flex>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
.share_list_main{
|
.share_list_main{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
min-height: 83vh;
|
||||||
.share_list_header{
|
.share_list_header{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|||||||
@@ -1,10 +1,11 @@
|
|||||||
.share_main{
|
.share_main{
|
||||||
display: flex;
|
min-height: 83vh;
|
||||||
flex-direction: column;
|
display: flex;
|
||||||
.share_header{
|
flex-direction: column;
|
||||||
display: flex;
|
.share_header{
|
||||||
flex-direction: row;
|
display: flex;
|
||||||
justify-content: space-between;
|
flex-direction: row;
|
||||||
align-items: center;
|
justify-content: center;
|
||||||
}
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -2,14 +2,15 @@
|
|||||||
import { FunctionComponent, useState } from "react";
|
import { FunctionComponent, useState } from "react";
|
||||||
import { ProCard } from "@ant-design/pro-components";
|
import { ProCard } from "@ant-design/pro-components";
|
||||||
import styles from "./index.module.less";
|
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 { useNavigate } from "react-router-dom";
|
||||||
import background from "@/assets/images/background.png";
|
|
||||||
import TextArea from "antd/es/input/TextArea";
|
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 MainShare: FunctionComponent = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
@@ -23,91 +24,90 @@ const MainShare: FunctionComponent = () => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className={styles.share_main}>
|
<div className={styles.share_main}>
|
||||||
<ProCard bordered={true} boxShadow={true}>
|
<ProCard bordered={false} boxShadow={false}>
|
||||||
<div className={styles.share_header}>
|
<div className={styles.share_header}>
|
||||||
<Search placeholder="搜索圈子" style={{ width: 500 }} />
|
<Input
|
||||||
<Button onClick={showDrawer}>创建圈子</Button>
|
size={"large"}
|
||||||
|
placeholder="搜索圈子"
|
||||||
|
style={{ width: 500, borderRadius: 20 }}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</ProCard>
|
</ProCard>
|
||||||
<ProCard bordered={true} boxShadow={true} style={{ marginTop: 20 }}>
|
<ProCard title={<h3>文件分享圈</h3>} bordered={false} boxShadow={false}>
|
||||||
<Flex vertical={false} align={"center"}>
|
<Flex vertical={false} align={"center"}>
|
||||||
<Card
|
<Card
|
||||||
hoverable
|
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={() => {
|
onClick={() => {
|
||||||
navigate("/main/share/list/1");
|
navigate("/main/share/list/1");
|
||||||
}}
|
}}
|
||||||
cover={
|
cover={
|
||||||
<Image
|
<Image
|
||||||
alt="example"
|
alt="example"
|
||||||
src={background}
|
src={pic as any}
|
||||||
style={{ height: 200 }}
|
style={{
|
||||||
|
height: 180,
|
||||||
|
borderTopLeftRadius: 20,
|
||||||
|
borderTopRightRadius: 20,
|
||||||
|
}}
|
||||||
preview={false}
|
preview={false}
|
||||||
width={"100%"}
|
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=="
|
fallback="data:image/png;base64,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"
|
||||||
/>
|
/>
|
||||||
}>
|
}>
|
||||||
<Meta title="工具软件分享" description="分享一些常用的办公软件" />
|
<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
|
<Flex
|
||||||
vertical={false}
|
vertical={false}
|
||||||
style={{ marginTop: 10 }}
|
style={{ marginTop: 10 }}
|
||||||
align={"center"}
|
align={"center"}
|
||||||
justify={"space-between"}>
|
justify={"space-between"}>
|
||||||
<Avatar src={background} size={"small"} />{" "}
|
<Flex vertical={false} align={"center"}>
|
||||||
<span style={{ fontSize: 12, color: "gray" }}>landaiqing</span>
|
<Avatar src={pic as any} size={"small"} />{" "}
|
||||||
<Flex
|
<span style={{ fontSize: 12, color: "gray", marginLeft: 5 }}>
|
||||||
vertical={false}
|
landaiqing
|
||||||
align={"center"}
|
</span>
|
||||||
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>
|
</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,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"
|
|
||||||
/>
|
|
||||||
}>
|
|
||||||
<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
|
<Flex
|
||||||
vertical={false}
|
vertical={false}
|
||||||
align={"center"}
|
align={"center"}
|
||||||
style={{ width: 100 }}
|
style={{ width: 100 }}
|
||||||
justify={"space-between"}>
|
justify={"space-between"}>
|
||||||
<EyeOutlined style={{ color: "gray" }} />{" "}
|
<Flex vertical={false} align={"center"}>
|
||||||
<span style={{ fontSize: 12, color: "gray" }}>1024</span>
|
<EyeOutlined style={{ color: "gray" }} />{" "}
|
||||||
<UnorderedListOutlined style={{ color: "gray" }} />{" "}
|
<span
|
||||||
<span style={{ fontSize: 12, color: "gray" }}>999</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>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Card>
|
</Card>
|
||||||
</Flex>
|
</Flex>
|
||||||
</ProCard>
|
</ProCard>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Drawer
|
<Drawer
|
||||||
title="创建圈子"
|
title="创建圈子"
|
||||||
width={"40%"}
|
width={"40%"}
|
||||||
@@ -149,6 +149,13 @@ const MainShare: FunctionComponent = () => {
|
|||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Form>
|
</Form>
|
||||||
</Drawer>
|
</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 qingyun from "@/assets/icons/qingyun.svg";
|
||||||
import ucloud from "@/assets/icons/ucloud.svg";
|
import ucloud from "@/assets/icons/ucloud.svg";
|
||||||
import jinshan from "@/assets/icons/jinshan.svg";
|
import jinshan from "@/assets/icons/jinshan.svg";
|
||||||
|
import bucket from "@/assets/icons/bucket.svg";
|
||||||
|
|
||||||
const StorageIcon: any = {
|
const StorageIcon: any = {
|
||||||
ali: aliyun,
|
ali: aliyun,
|
||||||
@@ -30,5 +31,6 @@ const StorageIcon: any = {
|
|||||||
qingyun: qingyun,
|
qingyun: qingyun,
|
||||||
ucloud: ucloud,
|
ucloud: ucloud,
|
||||||
jinshan: jinshan,
|
jinshan: jinshan,
|
||||||
|
bucket:bucket,
|
||||||
};
|
};
|
||||||
export default StorageIcon;
|
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 wangyiBucket from "@/router/modules/main/bucket/createBuckets/wangyi.ts";
|
||||||
import ShareAdd from "@/router/modules/main/share/modules/shareAdd.tsx";
|
import ShareAdd from "@/router/modules/main/share/modules/shareAdd.tsx";
|
||||||
import MyShare from "@/router/modules/main/user/myShare";
|
import MyShare from "@/router/modules/main/user/myShare";
|
||||||
|
import MyFavorites from "@/router/modules/main/user/myFavorites";
|
||||||
|
|
||||||
const routes: RouteObject[] = [
|
const routes: RouteObject[] = [
|
||||||
{
|
{
|
||||||
@@ -161,6 +162,11 @@ const routes: RouteObject[] = [
|
|||||||
path: "/main/user/myshare",
|
path: "/main/user/myshare",
|
||||||
Component: MyShare,
|
Component: MyShare,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/main/user/favorites",
|
||||||
|
Component: MyFavorites,
|
||||||
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
path: "/main/share",
|
path: "/main/share",
|
||||||
Component: MainShare,
|
Component: MainShare,
|
||||||
|
|||||||
@@ -1,69 +1,65 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
|
|
||||||
import { action, makeObservable, observable } from "mobx";
|
import { action, makeObservable, observable } from "mobx";
|
||||||
import { isHydrated, makePersistable } from "mobx-persist-store";
|
import { isHydrated, makePersistable } from "mobx-persist-store";
|
||||||
import { handleLocalforage } from "@/utils/localforage";
|
import { handleLocalforage } from "@/utils/localforage";
|
||||||
|
|
||||||
export class useFileStore {
|
export class useFileStore {
|
||||||
filePath: [any] = [
|
filePath: [any] = ["/root"];
|
||||||
{
|
|
||||||
title: "/ root",
|
constructor() {
|
||||||
},
|
makeObservable(this, {
|
||||||
];
|
filePath: observable,
|
||||||
|
setFilePath: action,
|
||||||
constructor() {
|
getFilePath: action,
|
||||||
makeObservable(this, {
|
clearFilePath: action,
|
||||||
filePath: observable,
|
getFilePathSecondLast: action,
|
||||||
setFilePath: action,
|
isHydrated: action,
|
||||||
getFilePath: action,
|
});
|
||||||
clearFilePath: action,
|
makePersistable(
|
||||||
getFilePathSecondLast: action,
|
this,
|
||||||
isHydrated: action,
|
{
|
||||||
});
|
// 在构造函数内使用 makePersistable
|
||||||
makePersistable(
|
name: "file", // 保存的name，用于在storage中的名称标识，只要不和storage中其他名称重复就可以
|
||||||
this,
|
properties: ["filePath"], // 要保存的字段，这些字段会被保存在name对应的storage中，注意：不写在这里面的字段将不会被保存，刷新页面也将丢失：get字段例外。get数据会在数据返回后再自动计算
|
||||||
{
|
storage: handleLocalforage, // 保存的位置：可以是localStorage，sessionstorage
|
||||||
// 在构造函数内使用 makePersistable
|
removeOnExpiration: true, //如果 expireIn 具有值且已过期，则在调用 getItem 时将自动删除存储中的数据。默认值为 true。
|
||||||
name: "file", // 保存的name，用于在storage中的名称标识，只要不和storage中其他名称重复就可以
|
stringify: false, //如果为 true，则数据在传递给 setItem 之前将是 JSON.stringify。默认值为 true。
|
||||||
properties: ["filePath"], // 要保存的字段，这些字段会被保存在name对应的storage中，注意：不写在这里面的字段将不会被保存，刷新页面也将丢失：get字段例外。get数据会在数据返回后再自动计算
|
expireIn: 2592000000, // 一个以毫秒为单位的值，用于确定 getItem 何时不应检索存储中的数据。默认情况下永不过期。
|
||||||
storage: handleLocalforage, // 保存的位置：可以是localStorage，sessionstorage
|
debugMode: false, // 如果为 true，将为多个 mobx-persist-store 项调用 console.info。默认值为 false。
|
||||||
removeOnExpiration: true, //如果 expireIn 具有值且已过期，则在调用 getItem 时将自动删除存储中的数据。默认值为 true。
|
},
|
||||||
stringify: false, //如果为 true，则数据在传递给 setItem 之前将是 JSON.stringify。默认值为 true。
|
{
|
||||||
expireIn: 2592000000, // 一个以毫秒为单位的值，用于确定 getItem 何时不应检索存储中的数据。默认情况下永不过期。
|
delay: 0, // 允许您设置一个 delay 选项来限制 write 函数的调用次数。默认情况下没有延迟。
|
||||||
debugMode: false, // 如果为 true，将为多个 mobx-persist-store 项调用 console.info。默认值为 false。
|
fireImmediately: false, // 确定是应立即保留存储数据，还是等到存储中的属性发生更改。 false 默认情况下。
|
||||||
},
|
},
|
||||||
{
|
).then(
|
||||||
delay: 0, // 允许您设置一个 delay 选项来限制 write 函数的调用次数。默认情况下没有延迟。
|
action(() => {
|
||||||
fireImmediately: false, // 确定是应立即保留存储数据，还是等到存储中的属性发生更改。 false 默认情况下。
|
// persist 完成的回调，在这里可以执行一些拿到数据后需要执行的操作，如果在页面上要判断是否完成persist，使用 isHydrated
|
||||||
},
|
// console.log(persistStore)
|
||||||
).then(
|
}),
|
||||||
action(() => {
|
);
|
||||||
// persist 完成的回调，在这里可以执行一些拿到数据后需要执行的操作，如果在页面上要判断是否完成persist，使用 isHydrated
|
}
|
||||||
// console.log(persistStore)
|
// 获取文件路径
|
||||||
}),
|
getFilePath() {
|
||||||
);
|
return this.filePath ? this.filePath : [];
|
||||||
}
|
}
|
||||||
// 获取文件路径
|
// 设置文件路径
|
||||||
getFilePath() {
|
setFilePath(path: any) {
|
||||||
return this.filePath ? this.filePath : [];
|
this.filePath.push(path);
|
||||||
}
|
}
|
||||||
// 设置文件路径
|
// 删除文件路径最后一个
|
||||||
setFilePath(path: any) {
|
clearFilePath() {
|
||||||
this.filePath.push(path);
|
if (this.filePath.length === 1) {
|
||||||
}
|
return;
|
||||||
// 删除文件路径最后一个
|
}
|
||||||
clearFilePath() {
|
this.filePath.pop();
|
||||||
if (this.filePath.length === 1) {
|
}
|
||||||
return;
|
// 获取文件路径倒数第二个
|
||||||
}
|
getFilePathSecondLast() {
|
||||||
this.filePath.pop();
|
return this.filePath.slice(0, -1).pop();
|
||||||
}
|
}
|
||||||
// 获取文件路径倒数第二个
|
|
||||||
getFilePathSecondLast() {
|
isHydrated() {
|
||||||
return this.filePath.slice(0, -1).pop();
|
return isHydrated(this);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
isHydrated() {
|
|
||||||
return isHydrated(this);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -6,12 +6,7 @@ import {
|
|||||||
LogoutOutlined,
|
LogoutOutlined,
|
||||||
QuestionCircleFilled,
|
QuestionCircleFilled,
|
||||||
} from "@ant-design/icons";
|
} from "@ant-design/icons";
|
||||||
import {
|
import { DefaultFooter, PageContainer, ProCard, ProLayout } from "@ant-design/pro-components";
|
||||||
DefaultFooter,
|
|
||||||
PageContainer,
|
|
||||||
ProCard,
|
|
||||||
ProLayout,
|
|
||||||
} from "@ant-design/pro-components";
|
|
||||||
import { Link, Outlet, useLocation } from "react-router-dom";
|
import { Link, Outlet, useLocation } from "react-router-dom";
|
||||||
import logo from "@/assets/images/logo.png";
|
import logo from "@/assets/images/logo.png";
|
||||||
import { Suspense } from "react";
|
import { Suspense } from "react";
|
||||||
@@ -28,8 +23,9 @@ export default function Layout() {
|
|||||||
height: "100vh",
|
height: "100vh",
|
||||||
}}>
|
}}>
|
||||||
<ProLayout
|
<ProLayout
|
||||||
logo={logo}
|
logo={logo as any}
|
||||||
layout={"mix"}
|
layout={"mix"}
|
||||||
|
splitMenus={false}
|
||||||
pure={false}
|
pure={false}
|
||||||
loading={false}
|
loading={false}
|
||||||
contentWidth={"Fluid"}
|
contentWidth={"Fluid"}
|
||||||
@@ -56,29 +52,34 @@ export default function Layout() {
|
|||||||
location={{
|
location={{
|
||||||
pathname: location.pathname,
|
pathname: location.pathname,
|
||||||
}}
|
}}
|
||||||
avatarProps={{
|
avatarProps={
|
||||||
src: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
|
{
|
||||||
title: "七妮妮",
|
src: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
|
||||||
size: "large",
|
title: "七妮妮",
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
size: "large",
|
||||||
// @ts-expect-error
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
render: (props, dom) => {
|
// @ts-expect-error
|
||||||
return (
|
render: (props, dom) => {
|
||||||
<Dropdown
|
return (
|
||||||
menu={{
|
<Dropdown
|
||||||
items: [
|
menu={{
|
||||||
{
|
items: [
|
||||||
key: "logout",
|
{
|
||||||
icon: <LogoutOutlined />,
|
key: "logout",
|
||||||
label: "退出登录",
|
icon: <LogoutOutlined />,
|
||||||
},
|
label: "退出登录",
|
||||||
],
|
onClick: () => {
|
||||||
}}>
|
console.log("推出");
|
||||||
{dom}
|
},
|
||||||
</Dropdown>
|
},
|
||||||
);
|
],
|
||||||
},
|
}}>
|
||||||
}}
|
{dom}
|
||||||
|
</Dropdown>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
} as any
|
||||||
|
}
|
||||||
actionsRender={(props: any) => {
|
actionsRender={(props: any) => {
|
||||||
// eslint-disable-next-line react/prop-types
|
// eslint-disable-next-line react/prop-types
|
||||||
if (props.isMobile) return [];
|
if (props.isMobile) return [];
|
||||||
@@ -99,15 +100,20 @@ export default function Layout() {
|
|||||||
<DefaultFooter
|
<DefaultFooter
|
||||||
links={[
|
links={[
|
||||||
{
|
{
|
||||||
key: "schisandra",
|
key: "schisandra-1",
|
||||||
title: "schisandra",
|
title: "五味子云存储",
|
||||||
|
href: "https://landaiqing.cn",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "schisandra-2",
|
||||||
|
title: "schisandra cloud storage",
|
||||||
href: "https://landaiqing.cn",
|
href: "https://landaiqing.cn",
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
copyright="2024"
|
copyright="2024 by schisandra"
|
||||||
/>
|
/>
|
||||||
)}>
|
)}>
|
||||||
<PageContainer title={false}>
|
<PageContainer title={false} breadcrumb={false as any} ghost={true}>
|
||||||
<ProCard>
|
<ProCard>
|
||||||
<div>
|
<div>
|
||||||
<Suspense>
|
<Suspense>
|
||||||
|
|||||||
@@ -73,6 +73,11 @@ export default {
|
|||||||
name: "我的分享",
|
name: "我的分享",
|
||||||
icon: "https://pic.imgdb.cn/item/668f8e5fd9c307b7e9f079bf.png",
|
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