Skip to content

Commit 0fb82fa

Browse files
cxymdscxymds
committed
feat : add tiers page
1 parent 08c5f68 commit 0fb82fa

File tree

3 files changed

+286
-1
lines changed

3 files changed

+286
-1
lines changed

‎components/tiers/new-form.vue‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<template>
2+
<n-modal
3+
v-model:show="visible"
4+
:mask-closable="false"
5+
preset="card"
6+
title="添加分层"
7+
class="max-w-screen-md"
8+
:segmented="{
9+
content: true,
10+
action: true,
11+
}">
12+
<n-card>
13+
<n-form ref="formRef" :model="formData" :rules="rules">
14+
<!-- 规则类型 -->
15+
<n-form-item label="分层类型" path="type">
16+
<n-select
17+
v-model:value="formData.type"
18+
:options="typeOptions"
19+
placeholder="选择规则类型"
20+
/>
21+
</n-form-item>
22+
23+
<n-form-item label="名称">
24+
<n-input v-model="formData.name" placeholder="请输入名称" />
25+
</n-form-item>
26+
<n-form-item label="Endpoint">
27+
<n-input v-model="formData.endpoint" placeholder="请输入资endpoint" />
28+
</n-form-item>
29+
<n-form-item label="Access Key ">
30+
<n-input v-model="formData.accesskey" placeholder="请输入Access Key" />
31+
</n-form-item>
32+
<n-form-item label="Secret Key ">
33+
<n-input v-model="formData.secretkey" placeholder="请输入Secret Key" />
34+
</n-form-item>
35+
<n-form-item label="存储空间">
36+
<n-input v-model="formData.bucket" placeholder="请输入存储空间" />
37+
</n-form-item>
38+
<n-form-item label="前缀">
39+
<n-input v-model="formData.prefix" placeholder="请输入前缀" />
40+
</n-form-item>
41+
<n-form-item label="地区">
42+
<n-input v-model="formData.regio" placeholder="请输入地区" />
43+
</n-form-item>
44+
<n-space justify="center">
45+
<n-button @click="handleCancel">取消</n-button>
46+
<n-button type="primary" @click="handleSave">保存</n-button>
47+
</n-space>
48+
</n-form>
49+
</n-card>
50+
</n-modal>
51+
</template>
52+
53+
<script setup>
54+
import { ref } from 'vue'
55+
import {
56+
NForm,
57+
NFormItem,
58+
NInput,
59+
NSelect,
60+
NButton,
61+
} from 'naive-ui'
62+
63+
const formRef = ref(null)
64+
const formData = ref({
65+
type:'',
66+
name: '',
67+
endpoint: '',
68+
accesskey: '',
69+
secretkey: '',
70+
bucket: '',
71+
prefix: '',
72+
regio: '',
73+
})
74+
const typeOptions = [
75+
{ label: 'Minio', value: 'minio' },
76+
{ label: 'Google Cloue Storage', value: 'google' },
77+
{ label: 'AWS S3', value: 'AWS' },
78+
{ label: 'Azure', value: 'azure' },
79+
]
80+
81+
82+
const rules = {
83+
ruleName: { required: true, message: '请输入规则名称' },
84+
type: { required: true, message: '请选择规则类型' },
85+
versionType: { required: true, message: '请选择版本类型' }
86+
}
87+
88+
89+
const visible = ref(false)
90+
91+
const open = () => {
92+
visible.value = true
93+
}
94+
95+
defineExpose({
96+
open
97+
})
98+
const handleSave = () => {
99+
formRef.value?.validate((errors) => {
100+
if (!errors) {
101+
console.log('提交数据:', formData.value)
102+
// 调用保存接口
103+
}
104+
})
105+
}
106+
107+
const handleCancel = () => {
108+
// 取消逻辑
109+
}
110+
</script>

‎config/navs.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default [
2121
icon: 'ri:file-user-line'
2222
},
2323
{
24-
label: '事件',
24+
label: '桶事件',
2525
to: '/events',
2626
icon: 'ri:broadcast-line',
2727
},
@@ -30,10 +30,20 @@ export default [
3030
to: '/replication',
3131
icon: 'ri:file-copy-line',
3232
},
33+
{
34+
label: '分层存储',
35+
to: '/tiers',
36+
icon: 'ri:stack-line',
37+
},
3338
{
3439
label: '生命周期',
3540
to: '/lifecycle',
3641
icon: 'ri:exchange-2-line',
42+
},
43+
{
44+
label: '站点复制',
45+
to: '/site-replication',
46+
icon: 'ri:upload-cloud-2-line',
3747
},
3848
// {
3949
// label: '配置',

‎pages/tiers/index.vue‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
<template>
2+
<div>
3+
<page-header>
4+
<template #title>
5+
<h1 class="text-2xl font-bold">分层</h1>
6+
</template>
7+
</page-header>
8+
<page-content class="flex flex-col gap-4">
9+
<div class="flex items-center justify-between">
10+
<div class="flex items-center justify-between">
11+
<n-input v-model:value="searchTerm" placeholder="搜索">
12+
<template #prefix>
13+
<Icon name="ri:search-2-line" />
14+
</template>
15+
</n-input>
16+
</div>
17+
18+
<div class="flex items-center gap-4">
19+
<n-button @click="() => addForm()">
20+
<Icon name="ri:add-line" class="mr-2" />
21+
<span>添加分层</span>
22+
</n-button>
23+
<n-button @click="async () => refresh()">
24+
<Icon name="ri:refresh-line" class="mr-2" />
25+
<span>刷新</span>
26+
</n-button>
27+
</div>
28+
</div>
29+
<n-data-table class="border dark:border-neutral-700 rounded overflow-hidden" :columns="columns" :data="filteredData" :pagination="false" :bordered="false" />
30+
<tiers-new-form ref='newFormRef'></tiers-new-form>
31+
</page-content>
32+
</div>
33+
</template>
34+
35+
<script lang="ts" setup>
36+
import { Icon } from '#components'
37+
import dayjs from 'dayjs'
38+
import { NButton, NSpace, type DataTableColumns ,NPopconfirm} from 'naive-ui'
39+
40+
const searchTerm = ref('');
41+
42+
interface RowData {
43+
Name: string;
44+
CreationDate: string;
45+
}
46+
47+
const columns: DataTableColumns<RowData> = [
48+
{
49+
title: '分层类型',
50+
// dataIndex: 'name',
51+
key: 'Name',
52+
},
53+
{
54+
title: 'Endpoint',
55+
// dataIndex: 'name',
56+
key: 'Endpoint',
57+
},
58+
{
59+
title: '存储空间',
60+
// dataIndex: 'name',
61+
key: 'Bucket',
62+
},
63+
{
64+
title: '创建时间',
65+
// dataIndex: 'creationDate',
66+
key: 'CreationDate',
67+
render: (row: RowData) => {
68+
return dayjs(row.CreationDate).format('YYYY-MM-DD HH:mm:ss');
69+
},
70+
},
71+
{
72+
title: '操作',
73+
key: 'actions',
74+
align: 'center',
75+
width: 140,
76+
render: (row: RowData) => {
77+
return h(
78+
NSpace,
79+
{
80+
justify: 'center',
81+
},
82+
{
83+
default: () => [
84+
h(
85+
NPopconfirm,
86+
{ onPositiveClick: () => deleteItem(row) },
87+
{
88+
default: () => "确认删除",
89+
trigger: () =>
90+
h(
91+
NButton,
92+
{ size: "small", secondary: true },
93+
{
94+
default: () => "",
95+
icon: () => h(Icon, { name: "ri:delete-bin-5-line" }),
96+
}
97+
),
98+
}
99+
),
100+
h(
101+
NButton,
102+
{
103+
size: 'small',
104+
secondary: true,
105+
onClick: (e) => handleRowClick(row,e),
106+
},
107+
{
108+
default: () => '',
109+
icon: () => h(Icon, { name: 'ri:settings-5-line' }),
110+
}
111+
),
112+
113+
],
114+
}
115+
);
116+
},
117+
},
118+
];
119+
120+
const { data, refresh } = await useAsyncData(
121+
'tiers',
122+
async () => {
123+
// const response = await listBuckets();
124+
// return response
125+
return []
126+
},
127+
{ default: () => [] }
128+
);
129+
130+
const filteredData = computed(() => {
131+
if (!searchTerm.value) {
132+
return data.value;
133+
}
134+
135+
const term = searchTerm.value.toLowerCase();
136+
return data.value.filter(bucket =>
137+
bucket
138+
);
139+
});
140+
141+
const infoRef = ref();
142+
const handleRowClick = (row: RowData,e: Event) => {
143+
e.stopPropagation();
144+
infoRef.value.openDrawer(row.Name);
145+
};
146+
147+
const message = useMessage();
148+
const deleteItem = async (row: RowData) => {
149+
150+
// delete(row.Name).then(()=>{
151+
// message.success("删除成功")
152+
// refresh();
153+
154+
// }).catch((error)=>{
155+
// message.error("删除失败")
156+
// })
157+
158+
};
159+
160+
const newFormRef = ref();
161+
const addForm = async () => {
162+
newFormRef.value.open();
163+
};
164+
165+
</script>

0 commit comments

Comments
 (0)