opensource/rustfs-console
3
0
Fork 0
mirror of https://github.com/rustfs/console.git synced 2026-09-19 09:52:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat : site replication

Browse Source
This commit is contained in:
cxymds
2025-04-01 15:41:03 +08:00
parent e712e2acf8
commit d8212b90cc
3 changed files with 180 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components.d.ts
Vendored
+4
View File
@@ -29,18 +29,22 @@ declare module 'vue' {
NDrawer: typeof import('naive-ui')['NDrawer']
NDrawerContent: typeof import('naive-ui')['NDrawerContent']
NDropdown: typeof import('naive-ui')['NDropdown']
NDynamicInput: typeof import('naive-ui')['NDynamicInput']
NEmpty: typeof import('naive-ui')['NEmpty']
NFlex: typeof import('naive-ui')['NFlex']
NForm: typeof import('naive-ui')['NForm']
NFormItem: typeof import('naive-ui')['NFormItem']
NFormItemGi: typeof import('naive-ui')['NFormItemGi']
NFormItemGridItem: typeof import('naive-ui')['NFormItemGridItem']
NGi: typeof import('naive-ui')['NGi']
NGrid: typeof import('naive-ui')['NGrid']
NH3: typeof import('naive-ui')['NH3']
NH4: typeof import('naive-ui')['NH4']
NInput: typeof import('naive-ui')['NInput']
NInputGroup: typeof import('naive-ui')['NInputGroup']
NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
NInputNumber: typeof import('naive-ui')['NInputNumber']
NInputPassword: typeof import('naive-ui')['NInputPassword']
NLayout: typeof import('naive-ui')['NLayout']
NLayoutSider: typeof import('naive-ui')['NLayoutSider']
NLi: typeof import('naive-ui')['NLi']
components/site-replication/new-form.vue
+141
View File
@@ -0,0 +1,141 @@
<template>
<n-modal
v-model:show="visible"
:mask-closable="false"
preset="card"
title="添加站点复制"
class="max-w-screen-lg"
:segmented="{
content: true,
action: true,
}">
<n-card title="添加复制站点">
<p>注意：添加或编辑对等站点时，每个站点的 AccessKey 和 SecretKey 值都是必需的</p>
<n-form ref="currentFormRef" :model="currentSite" :rules="rules">
<!-- 当前站点 -->
<n-flex style="margin-top: 16px;">
<n-card title="当前站点" >
<n-space direction="vertical" >
<n-form-item label="站点名称" path="name">
<n-input v-model:value="currentSite.name" placeholder="站点名称" />
</n-form-item>
<n-form-item label="Endpoint *" path="endpoint">
<n-input v-model:value="currentSite.endpoint" placeholder="Endpoint" />
</n-form-item>
<n-form-item label="Access Key *" path="accessKey">
<n-input v-model:value="currentSite.accessKey" placeholder="Access Key" />
</n-form-item>
<n-form-item label="Secret Key *" path="secretKey">
<n-input type="password" v-model:value="currentSite.secretKey" placeholder="Secret Key" />
</n-form-item>
</n-space>
</n-card>
</n-flex>
<!-- 远程站点 -->
<n-flex direction="vertical" style="margin-top: 16px;">
<n-card title="远程站点">
<n-space direction="vertical">
<n-dynamic-input :min='1' v-model:value="remoteSite" :on-create="onCreate">
<template #default="{ value }" >
<n-grid x-gap="12" :cols="4">
<n-gi>
<n-form-item label="站点名称" path="name">
<n-input v-model:value="value.name" placeholder="站点名称" />
</n-form-item>
</n-gi>
<n-gi>
<n-form-item label="Endpoint *" path="endpoint">
<n-input v-model:value="value.endpoint" placeholder="Endpoint" />
</n-form-item>
</n-gi>
<n-gi>
<n-form-item label="Access Key *" path="accessKey">
<n-input v-model:value="value.accessKey" placeholder="Access Key" />
</n-form-item>
</n-gi>
<n-gi>
<n-form-item label="Secret Key *" path="secretKey">
<n-input type="password" v-model:value="value.secretKey" placeholder="Secret Key" />
</n-form-item>
</n-gi>
</n-grid>
</template>
</n-dynamic-input>
</n-space>
</n-card>
</n-flex>
</n-form>
<!-- 按钮 -->
<n-space justify="center" style="margin-top: 16px;">
<n-button type="primary" @click="save">保存</n-button>
<n-button @click="cancel">取消</n-button>
</n-space>
</n-card>
</n-modal>
</template>
<script setup>
import { ref } from 'vue';
const currentSite = ref({
name: '',
endpoint: 'http://127.0.0.1:9000',
accessKey: 'rustfsadmin',
secretKey: ''
});
const remoteSite = ref([{
name: '',
endpoint: '',
accessKey: '',
secretKey: ''
}]);
const onCreate = () => {
return {
name: '',
endpoint: '',
accessKey: '',
secretKey: ''
};
};
const rules = {
endpoint: [
{ required: true, message: 'Endpoint 必须提供', trigger: 'blur' }
],
accessKey: [
{ required: true, message: 'Access Key 必须提供', trigger: 'blur' }
],
secretKey: [
{ required: true, message: 'Secret Key 必须提供', trigger: 'blur' }
]
};
const currentFormRef = ref(null);
const save = () => {
// Save logic here
console.log('Current Site:', currentSite.value);
console.log('Remote Site:', remoteSite.value);
};
const cancel = () => {
// Cancel logic here
};
const visible = ref(false);
const open = () => {
visible.value = true
}
defineExpose({
open
})
</script>
<style scoped >
:deep(.n-dynamic-input-item__action){
align-self: center !important;
}
</style>
pages/site-replication/index.vue
+35
View File
@@ -0,0 +1,35 @@
<template>
<div>
<page-header>
<template #title>
<h1 class="text-2xl font-bold">站点复制</h1>
</template>
</page-header>
<page-content class="flex flex-col gap-4">
<n-flex justify="end" >
<n-button @click="() => openForm()">
<Icon name="ri:add-line" class="mr-2" />
<span>添加站点</span>
</n-button>
</n-flex>
<n-card class="flex flex-center" style="height:400px">
<n-empty description="空空如也" ></n-empty>
</n-card>
<!-- <n-data-table class="border dark:border-neutral-700 rounded overflow-hidden" :columns="columns" :data="pageData" :pagination="false" :bordered="false" /> -->
<site-replication-new-form ref="addFormRef"></site-replication-new-form>
</page-content>
</div>
</template>
<script lang="ts" setup>
import { Icon } from '#components'
import { NButton } from 'naive-ui'
const addFormRef = ref()
const openForm = ()=>{
addFormRef.value.open()
}
</script>