ace-front-end 1.0.0

package/ace-app-manager-ui/src/views/home/components/FileRepositoryEditor.vue

@@ -0,0 +1,292 @@
+<template>
+    <el-drawer
+        v-model="visible"
+        :title="title"
+        destroy-on-close
+        @open="init">
+        <el-scrollbar max-height="500px" class="el-form-scrollbar">
+            <ja-form ref="formRef" :validator="validator" :model="state">
+                <ja-form-item label="存储库标识" prop="repositoryKey" required>
+                    <ja-input v-focus/>
+                </ja-form-item>
+                <ja-form-item label="所属备份集" prop="backupSet" required>
+                    <ja-input/>
+                </ja-form-item>
+                <ja-form-item label="启用只读" prop="readonly">
+                    <ja-switch></ja-switch>
+                </ja-form-item>
+                <ja-form-item label="最大容量（单位：MB）" prop="maxSize">
+                    <ja-input type="number" :min="0">
+                        <template #append> M</template>
+                    </ja-input>
+                </ja-form-item>
+                <ja-form-item label="告警阈值（已用容量百分比）" prop="warningPercentage">
+                    <ja-select>
+                        <el-option label="90%" :value="90"/>
+                        <el-option label="80%" :value="80"/>
+                        <el-option label="70%" :value="70"/>
+                        <el-option label="60%" :value="60"/>
+                    </ja-select>
+                </ja-form-item>
+                <ja-form-item label="存储库提供程序" prop="storageProvider" required>
+                    <ja-select @change="providerChangeHandle">
+                        <el-option
+                            v-for="item in state.providers"
+                            :label="item"
+                            :value="item"
+                            :key="item"/>
+                    </ja-select>
+                </ja-form-item>
+                <template
+                    v-if="state.formData.storageProvider && state.providerProperty.length > 0">
+                    <el-form-item
+                        v-for="item in state.providerProperty"
+                        :label="item.caption"
+                        :key="item.name">
+                        <template #label>
+                            <el-text>{{ item.caption }}
+                                <span style="color:red"
+                                      v-if="item.required">*</span>
+                                <el-tooltip
+                                    v-if="item.helpText"
+                                    placement="top">
+                                    <el-icon>
+                                        <question-filled/>
+                                    </el-icon>
+                                    <template #content>
+                                        <div v-html="item.helpText"/>
+                                    </template>
+                                </el-tooltip>
+                            </el-text>
+                        </template>                        <!-- :labelRemark="item.helpText" -->
+                        <el-input v-model="state.formData.providerSettings[item.name]">
+                        </el-input>
+                    </el-form-item>
+                </template>
+            </ja-form>
+        </el-scrollbar>
+        <template #footer>
+            <ja-button size="default" type="primary" @click="handleSubmit" :loading="loading"
+                       shortcut="Alt+Enter">确定
+            </ja-button>
+            <el-button size="default" @click="visible = false">取消</el-button>
+        </template>
+    </el-drawer>
+</template>
+
+<script setup lang="ts">
+// import { InfoFilled } from "@element-plus/icons-vue";
+import {computed, reactive, ref} from "vue";
+import {
+    createAxios, createAxiosWithoutCache,
+    type CreateFileStorageCommand,
+    type RepositoryProviderPropertyMeta,
+    type UpdateFileStorageCommand,
+    useFileStorageApi, useLoading,
+} from "@jari-ace/app-bolts";
+import {
+    JaButton,
+    JaForm,
+    JaFormItem,
+    JaInput,
+    JaSelect,
+    JaSwitch,
+    useBackendValidations
+} from "@jari-ace/element-plus-component";
+import {ElIcon, ElTooltip} from "element-plus";
+import {QuestionFilled} from "@element-plus/icons-vue";
+
+type FormDataType = CreateFileStorageCommand | UpdateFileStorageCommand;
+
+type Props = {
+    modelValue: boolean;
+    type: "create" | "update";
+    id?: string;
+};
+
+const formData: FormDataType = {
+    /**
+     * 存储库标识
+     */
+    repositoryKey: "",
+    /**
+     * 存储库最大容量 (单位T)
+     */
+    maxSize: 1,
+    /**
+     * 是否为只读库
+     */
+    readonly: false,
+    /**
+     * 存储库告警容量
+     */
+    warningPercentage: 90,
+    /**
+     * 所属的备份集
+     */
+    backupSet: "",
+    /**
+     * 存储库提供程序
+     */
+    storageProvider: "",
+
+    /**
+     * 存储库提供程序配置参数
+     */
+    providerSettings: {},
+};
+const props = defineProps<Props>();
+const emit = defineEmits(["update:modelValue", "success"]);
+
+const title = computed<string>(() => {
+    return props.type === "create" ? "创建存储库" : `更改存储库信息`;
+});
+
+const formRef = ref<typeof JaForm>();
+
+const visible = computed({
+    get(): boolean {
+        return props.modelValue;
+    },
+    set(value: boolean) {
+        emit("update:modelValue", value);
+    },
+});
+
+const state = reactive<{
+    providers: string[];
+    formData: FormDataType;
+    providerProperty: RepositoryProviderPropertyMeta[];
+    backupSets: string[];
+    loading: boolean;
+}>({
+    providers: [],
+    formData: {...formData},
+    providerProperty: [],
+    backupSets: [],
+    loading: false,
+});
+const axios = createAxiosWithoutCache()
+const loading = useLoading(axios)
+const validator = useBackendValidations(Object.keys(state.formData), axios);
+const fileStorageApi = useFileStorageApi(axios);
+
+
+/**
+ * 获取所有存储库提供程序名称
+ *
+ */
+const getProviders = () => {
+    fileStorageApi.getProviders().then((data) => {
+        state.providers = data;
+    });
+};
+
+/**
+ * 提供程序发生改变事件
+ */
+const providerChangeHandle = (val: string) => {
+    getProviderPropertyMetadata(val);
+};
+/**
+ * 获取提供程序的扩展属性
+ * @param provider
+ */
+const getProviderPropertyMetadata = (provider: string) => {
+    fileStorageApi.getProviderPropertyMetadata(provider).then((data) => {
+        // console.log("获取指定存储提供程序的扩展属性", data);
+        state.providerProperty = data;
+        const providerProperty: {
+            [p: string]: string;
+        } = {};
+
+        state.providerProperty.forEach((item) => {
+            providerProperty[item.name] = "";
+        });
+        //需要判断是否是新建
+        //如果是新建则不需要回显
+        //如果是编辑操作则需要合并值
+        if (props.type === "create") {
+            state.formData.providerSettings = providerProperty;
+        } else {
+            state.formData.providerSettings = {
+                ...providerProperty, //需要放在前边
+                ...state.formData.providerSettings, //必须放在后面替换前边的属性值
+            };
+        }
+    });
+};
+/**
+ * 获取备份集列表
+ */
+const getBackupSets = () => {
+    fileStorageApi.getBackupSets().then((data) => {
+        state.backupSets = data;
+    });
+};
+
+const getInfoById = (id: string) => {
+    fileStorageApi.getById(id).then((data) => {
+        const {
+            id,
+            dataVersion,
+            repositoryKey,
+            maxSize,
+            warningPercentage,
+            backupSet,
+            readonly,
+            storageProvider,
+            providerSettings,
+        } = data;
+        state.formData = {
+            dataVersion,
+            id,
+            repositoryKey,
+            maxSize,
+            readonly,
+            warningPercentage,
+            backupSet,
+            storageProvider,
+            providerSettings,
+        };
+        getProviderPropertyMetadata(storageProvider);
+    });
+};
+
+const handleSubmit = () => {
+    if (props.type === "create") {
+        formRef.value?.validate(() =>
+            fileStorageApi.create(state.formData).then(() => {
+                emit("success");
+                visible.value = false;
+            }),
+        );
+    } else {
+        formRef.value?.validate(() =>
+            fileStorageApi.update(state.formData as UpdateFileStorageCommand).then(() => {
+                emit("success");
+                visible.value = false;
+            }),
+        );
+    }
+};
+
+/**
+ * 初始化
+ */
+const init = () => {
+    getProviders();
+    getBackupSets();
+    if (props.type === "update") {
+        if (props.id) getInfoById(props.id);
+    } else {
+        state.formData = {
+            ...formData,
+        };
+    }
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>

package/ace-app-manager-ui/src/views/home/components/FileRepositoryManage.vue

@@ -0,0 +1,246 @@
+<template>
+    <div class="file-repository-sfc" v-loading="loading">
+        <el-card style="height: 100%" shadow="hover">
+            <div class="file-repository-box__content">
+                <div class="module-title">
+                    <i class="ri-server-line"></i>
+                    文件存储库
+                </div>
+                <ul class="body">
+                    <li v-for="item in state.list" class="file-repository-item">
+                        <div class="file-repository-item__content">
+                            <div class="title">
+                                <span
+                                >{{ item.repositoryKey }}（备份集：{{ item.backupSet }}）</span>
+                                <i class="ri-edit-box-line" @click="handleEdit(item)"></i>
+                                <i class="ri-delete-bin-6-line" @click="handleDelete(item)"></i>
+                            </div>
+                            <div class="text">
+                                <span>最大容量：{{ item.maxSize }} MB</span>
+                                <!-- <span>50%</span> -->
+                            </div>
+                            <el-tooltip content="已占用空间">
+                                <el-progress
+                                    striped
+                                    striped-flow
+                                    :color="getProgressColors(item)"
+                                    :stroke-width="12"
+                                    :percentage="Math.round((item.usedSize?? 0) / item.maxSize /1024 /1024 * 1000) / 10">
+                                </el-progress>
+                            </el-tooltip>
+                        </div>
+                    </li>
+                    <li class="file-repository-item add-btn" @click="handleAdd">
+                        <i class="ri-add-line"></i>
+                    </li>
+                </ul>
+            </div>
+        </el-card>
+        <FileRepositoryEditor
+            v-model="state.editor.visible"
+            :type="state.editor.type"
+            :id="state.editor.id"
+            @success="handleEditSuccess"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import {useFileStorageApi, useLoading} from "@jari-ace/app-bolts";
+import type {ProjectedFileStorage} from "@jari-ace/app-bolts";
+import {reactive} from "vue";
+import FileRepositoryEditor from "./FileRepositoryEditor.vue";
+import {ElMessageBox} from "element-plus";
+
+const fileStorageApi = useFileStorageApi();
+const loading = useLoading();
+const state = reactive<{
+    list: ProjectedFileStorage[];
+    editor: {
+        visible: boolean;
+        type: "create" | "update";
+        id: string;
+    };
+    progressColors?: {
+        color: string,
+        percentage: number,
+    }[]
+}>({
+    list: [],
+    editor: {
+        visible: false,
+        type: "create",
+        id: '0',
+    }
+});
+
+function getProgressColors(r: ProjectedFileStorage) {
+    return [{
+        color: '#1989fa', percentage: r.warningPercentage
+    }, {
+        color: '#f56c6c', percentage: 100
+    }]
+}
+
+/**
+ * 新建按钮点击事件
+ */
+const handleAdd = () => {
+    state.editor.type = "create";
+    state.editor.visible = true;
+};
+
+/**
+ * 删除事件
+ */
+const handleDelete = (item: ProjectedFileStorage) => {
+    ElMessageBox.prompt("请输入存储库名称以作确认", "存储库删除确认", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        // inputPattern:
+        //     /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
+        inputValidator: (value: string) => {
+            if (value !== item.repositoryKey) {
+                return "请输入正确的存储库名称";
+            }
+            return true;
+        },
+    })
+                .then(() => {
+                    fileStorageApi.delete({
+                        id: item.id,
+                        dataVersion: item.dataVersion,
+                    }).then(() => {
+                        getList()
+                    })
+                })
+};
+
+/**
+ * 编辑事件
+ */
+const handleEdit = (item: ProjectedFileStorage) => {
+    state.editor.type = "update";
+    state.editor.visible = true;
+    state.editor.id = item.id;
+};
+
+const getList = () => {
+    console.log('loading file storage list')
+    fileStorageApi.getAll().then((data) => {
+        state.list = data;
+    });
+};
+
+const handleEditSuccess = () => {
+    getList()
+}
+
+getList();
+</script>
+
+<style lang="scss" scoped>
+.file-repository-sfc {
+    margin-top: 10px;
+
+    .file-repository-box__content {
+        display: flex;
+        flex-direction: column;
+
+        .body {
+            flex: 1;
+            overflow: hidden;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.6%;
+
+            .add-btn {
+                font-size: 40px;
+                color: #9fceff;
+                width: 116px !important;
+                height: 116px;
+            }
+
+            .file-repository-item {
+                margin-bottom: 0.45%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-direction: column;
+                border: 1px solid #dcdfe6;
+                height: 108px;
+                border-radius: 5px;
+                cursor: pointer;
+                width: calc(25% - 0.45%);
+
+                &:hover {
+                    background-color: rgba(0, 0, 0, 0.03);
+                }
+
+                .file-repository-item__content {
+                    padding: 12px 0;
+                    width: 90%;
+
+                    .title,
+                    .text {
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                    }
+
+                    .title {
+                        height: 32px;
+                        flex: 1;
+                        // margin-bottom: 8px;
+
+                        > span {
+                            font-weight: bold;
+                            flex: 1;
+                            color: var(--ace-text-color-2);
+                        }
+
+                        .ri-edit-box-line {
+                            &:hover {
+                                color: #fff;
+
+                                background-color: var(--ace-warning-color);
+                            }
+                        }
+
+                        .ri-delete-bin-6-line {
+                            &:hover {
+                                color: #fff;
+                                background-color: var(--ace-danger-color);
+                            }
+                        }
+
+                        > i {
+                            display: inline-block;
+                            width: 24px;
+                            text-align: center;
+
+                            // &:hover {
+                            //     color: #fff;
+                            //     background-color: rgba(197, 52, 52);
+                            // }
+                        }
+                    }
+
+                    .text {
+                        height: 32px;
+                        font-size: 14px;
+                        color: var(--ace-text-color-2);
+                        // margin-bottom: 12px;
+                    }
+                }
+            }
+        }
+    }
+
+    :deep(.el-card) {
+        .el-card__body {
+            height: 100%;
+        }
+    }
+}
+</style>

package/ace-app-manager-ui/src/vite-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="vite/client" />
+declare module 'element-plus/dist/locale/zh-cn.mjs'
+declare module 'element-plus/dist/locale/en.mjs'
+declare module 'splitpanes'

package/ace-app-manager-ui/tsconfig.json

@@ -0,0 +1,41 @@
+{
+    "extends": "@vue/tsconfig/tsconfig.dom.json",
+    "compilerOptions": {
+        "target": "es2017",
+        //解决await等新语法报错问题
+        "useDefineForClassFields": true,
+        "skipLibCheck": true,
+        /* Bundler mode */
+        //        "moduleResolution": "bundler",
+        //        "allowImportingTsExtensions": true,
+        //        "resolveJsonModule": true,
+        //        "noEmit": true,
+        "jsx": "preserve",
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": false,
+        "noUnusedParameters": false,
+        "noFallthroughCasesInSwitch": true,
+        /* 自定义 */
+        "paths": {
+            "@/*": [
+                "./src/*"
+            ],
+            "#/*": [
+                "./types/*"
+            ]
+        }
+    },
+    "include": [
+        "**/*.ts",
+        "src/**/*.tsx",
+        "src/**/*.vue",
+        "src/**/*.js",
+        "package.json"
+    ],
+    "references": [
+        {
+            "path": "./tsconfig.node.json"
+        }
+    ]
+}

package/ace-app-manager-ui/tsconfig.node.json

@@ -0,0 +1,15 @@
+{
+    "extends": "@tsconfig/node20/tsconfig.json",
+    "compilerOptions": {
+        "composite": true,
+        "skipLibCheck": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "allowSyntheticDefaultImports": true,
+        "jsx": "preserve"
+    },
+    "include": [
+        "vite.config.ts",
+        "customVitePlugin.ts"
+    ]
+}