调整存储页面布局

This commit is contained in:
宇阳
2025-01-03 23:27:30 +08:00
parent 19e1fc6e9e
commit 6d0f8e15e4

View File

@@ -1,9 +1,10 @@
import { useState, useEffect } from 'react';
import { Table, Button, Form, Input, Popconfirm, message, Card, Modal, Tag } from 'antd';
import { addOssDataAPI, delOssDataAPI, editOssDataAPI, getOssListAPI, enableOssDataAPI, disableOssDataAPI } from '@/api/Oss';
import { addOssDataAPI, delOssDataAPI, editOssDataAPI, getOssListAPI, enableOssDataAPI, disableOssDataAPI, getOssDataAPI } from '@/api/Oss';
import type { Oss } from '@/types/app/oss';
import Title from '@/components/Title';
import type { ColumnsType } from 'antd/es/table';
import { titleSty } from '@/styles/sty';
const StoragePage = () => {
const [loading, setLoading] = useState<boolean>(false);
@@ -15,14 +16,9 @@ const StoragePage = () => {
const columns: ColumnsType<Oss> = [
{ title: 'ID', dataIndex: 'id', key: 'id', align: 'center', width: 80 },
{ title: '平台', dataIndex: 'platform', key: 'platform', align: 'center', width: 120 },
{ title: 'Access Key', dataIndex: 'accessKey', key: 'accessKey' },
{ title: '地域', dataIndex: 'endPoint', key: 'endPoint' },
{ title: '存储桶', dataIndex: 'bucketName', key: 'bucketName' },
{ title: '域名', dataIndex: 'domain', key: 'domain' },
{ title: '根目录', dataIndex: 'basePath', key: 'basePath', align: 'center', width: 120 },
{
title: '状态',
fixed: 'left',
dataIndex: 'isEnable',
key: 'isEnable',
align: 'center',
@@ -34,6 +30,22 @@ const StoragePage = () => {
</div>
)
},
{
title: '平台',
dataIndex: 'platform',
key: 'platform',
align: 'center',
width: 120,
render: (text: string) => (
<div>{text}</div>
)
},
// { title: 'Access Key', dataIndex: 'accessKey', key: 'accessKey' },
// { title: 'Secret Key', dataIndex: 'secretKey', key: 'secretKey' },
{ title: '地域', dataIndex: 'endPoint', key: 'endPoint' },
{ title: '存储桶', dataIndex: 'bucketName', key: 'bucketName' },
{ title: '域名', dataIndex: 'domain', key: 'domain' },
{ title: '根目录', dataIndex: 'basePath', key: 'basePath', align: 'center', width: 120 },
{
title: '操作',
key: 'action',
@@ -81,9 +93,10 @@ const StoragePage = () => {
getOssList();
};
const editOssData = (record: Oss) => {
const editOssData = async (record: Oss) => {
setOss(record);
form.setFieldsValue(record);
const { data } = await getOssDataAPI(record.id)
form.setFieldsValue(data);
setIsModalOpen(true);
};
@@ -135,7 +148,7 @@ const StoragePage = () => {
<Button type="primary" size='large' onClick={handleAdd}></Button>
</Title>
<Card className="mt-2 min-h-[calc(100vh-180px)]">
<Card className={`${titleSty} min-h-[calc(100vh-180px)]`}>
<Table
rowKey="id"
dataSource={ossList}
@@ -175,7 +188,10 @@ const StoragePage = () => {
<Form.Item
label="Access Key"
name="accessKey"
rules={[{ required: true, message: 'AccessKey不能为空' }]}
rules={[
{ required: true, message: 'Access Key 不能为空' },
{ min: 10, max: 50, message: 'Access Key 限制在10~50个字符' }
]}
>
<Input placeholder="请输入Access Key" />
</Form.Item>