ace-front-end 1.0.0

package/ace-app-manager-ui/src/views/appManage/registerUpload/components/Editor.vue

@@ -0,0 +1,425 @@
+<script setup lang="ts">
+import {ref, computed} from 'vue'
+import {
+    JaButton,
+    JaForm,
+    useBackendValidations,
+    JaRolePicker, useFileConfigurations
+} from "@jari-ace/element-plus-component";
+import {
+    CountOverflowStrategy,
+    createAxiosWithoutCache,
+    type CreateFileConfigurationCommand, type FileConfiguration,
+    type ProjectedFileConfiguration,
+    type UpdateFileConfigurationCommand,
+    useFileConfigurationApi,
+    useFileStorageApi,
+    useLoading
+} from "@jari-ace/app-bolts";
+
+const visible = defineModel<boolean>({
+    required: true,
+    default: false
+});
+const axios = createAxiosWithoutCache();
+const loading = useLoading(axios)
+const {refreshFileConfigurationCache} = useFileConfigurations()
+
+function newFileConfiguration() {
+    return {
+        /**
+         * 应用名
+         */
+        appName: "",
+
+        /**
+         * 服务名
+         */
+        appServiceName: "",
+        /**
+         * 配置标识
+         */
+        configKey: "",
+        /**
+         * 允许上传的文件类型
+         */
+        accept: '',
+        /**
+         * 最大文件数，默认0表示不限制
+         */
+        maxFileCount: 0,
+        /**
+         * 文件数量溢出处理策略
+         */
+        countOverflowStrategy: CountOverflowStrategy.REPLACE_FIRST,
+        /**
+         * 最大单个文件大小，默认0表示不限制
+         */
+        maxSingleFileSize: 0,
+        /**
+         * 所有文件总大小，默认0表示不限制
+         */
+        maxTotalFileSize: 0,
+        /**
+         * 是否加密存储
+         */
+        enableEncrypt: 0,
+        /**
+         * 加密算法
+         */
+        encAlgorithm: "AES",
+        /**
+         * 允许最大加密文件大小，超出此大小的文件将不再加密
+         */
+        maxEncryptSize: 0,
+        /**
+         * 上传说明
+         */
+        uploadNote: undefined,
+        /**
+         * 文件切片大小
+         */
+        chunkSize: undefined,
+        /**
+         * 禁止上传文件夹（禁止用户选择本地文件夹上传）
+         */
+        disableDirUpload: false,
+        /**
+         * 禁止上传文件（禁止用户选择本机文件上传）
+         */
+        disableFileUpload: false,
+        /**
+         * 启用摄像头作为文件输入源(上传拍摄的照片或录像)
+         */
+        enableWebcam: false,
+        /**
+         * 工作模式
+         */
+        allowedWebcamModes: [],
+        /**
+         * 启用录音机（上传录音文件）
+         */
+        enableAudio: false,
+        /**
+         * 启用截屏（上传截屏文件或录屏视频）
+         */
+        enableScreenCapture: false,
+        /**
+         * 启用密级
+         */
+        enableClassifiedLevel: false,
+        /**
+         * 允许上传
+         */
+        disallowUpload: false,
+        /**
+         * 允许删除
+         */
+        disallowDelete: false,
+        /**
+         * 允许下载
+         */
+        disallowDownload: false,
+        /**
+         * 上传权限名
+         */
+        uploadAuthCode: '',
+        /**
+         * 允许删除权限名
+         */
+        deleteAuthCode: '',
+        /**
+         * 允许下载权限名
+         */
+        downloadAuthCode: '',
+        /**
+         * 允许删除他人上传的文件
+         */
+        allowDeleteOthersFile: false,
+        /**
+         * 设置要存储备份集
+         */
+        backupSet: "default-set",
+        /**
+         * 路径格式
+         */
+        subDirFormat: '',
+        /**
+         * 禁用预览
+         */
+        disablePreview: 0,
+        /**
+         * 是否启用预览水印
+         */
+        enablePreviewWatermark: 0,
+        /**
+         * 水印文本，支持使用el表达式
+         */
+        watermark: "",
+        /**
+         * 每个用户的默认配额，为空或0表示无限配额
+         */
+        defaultQuota: '0',
+        /**
+         * 是否公共文件，无需登录即可下载
+         */
+        isPublic: false
+    } as CreateFileConfigurationCommand;
+}
+
+const props = defineProps<{
+    appName?: string;
+    appServiceName?: string,
+    mode?: 'create' | 'update',
+    data?: ProjectedFileConfiguration,
+    menuType: 'develop' | 'manage'
+}>()
+
+const title = computed(() => props.mode === 'create' ? "创建文件配置" : "修改文件配置")
+const state = ref<{
+    formData: CreateFileConfigurationCommand | UpdateFileConfigurationCommand
+}>({formData: newFileConfiguration()});
+const validator = useBackendValidations(Object.keys(state.value.formData), axios);
+const api = useFileConfigurationApi(axios);
+const backupSets = ref<string[]>();
+const repoApi = useFileStorageApi(axios);
+const emits = defineEmits(['success']);
+const form = ref<InstanceType<typeof JaForm>>();
+const accepts = ref<string[]>([]);
+
+function zeroAsUndefined(d: any) {
+    return d === 0 ? undefined : d;
+}
+
+function undefinedAsZero(d: any) {
+    return d === undefined || d === null ? 0 : d;
+}
+
+async function submit() {
+    if (props.mode == 'create') {
+        form.value?.validate(() => {
+                return api.create({
+                    ...state.value.formData,
+                    appName: props.appName!,
+                    appServiceName: props.appServiceName!,
+                    enableEncrypt: zeroAsUndefined(state.value.formData.enableEncrypt),
+                    disablePreview: zeroAsUndefined(state.value.formData.disablePreview),
+                    enablePreviewWatermark: zeroAsUndefined(state.value.formData.enablePreviewWatermark),
+                    accept: accepts.value.join(',')
+                }).then((r: FileConfiguration) => {
+                    refreshFileConfigurationCache(props.appServiceName!)
+                    emits('success', r);
+                    visible.value = false;
+                });
+            }
+        );
+    } else {
+        form.value?.validate(() =>
+            api.update({
+                ...state.value.formData as UpdateFileConfigurationCommand,
+                enableEncrypt: zeroAsUndefined(state.value.formData.enableEncrypt),
+                disablePreview: zeroAsUndefined(state.value.formData.disablePreview),
+                enablePreviewWatermark: zeroAsUndefined(state.value.formData.enablePreviewWatermark),
+                accept: accepts.value.join(',')
+            }).then((r: FileConfiguration) => {
+                refreshFileConfigurationCache(props.appServiceName!)
+                emits('success', r);
+                visible.value = false;
+            })
+        );
+    }
+}
+
+async function init() {
+    if (props.mode === 'create') {
+        state.value.formData = newFileConfiguration();
+    } else {
+        state.value.formData = await api.getById(props.data!.id) as UpdateFileConfigurationCommand;
+        state.value.formData = {
+            ...state.value.formData,
+            enableEncrypt: undefinedAsZero(state.value.formData.enableEncrypt),
+            disablePreview: undefinedAsZero(state.value.formData.disablePreview),
+            enablePreviewWatermark: undefinedAsZero(state.value.formData.enablePreviewWatermark),
+        }
+        accepts.value = state.value.formData.accept?.split(',') ?? [];
+    }
+    backupSets.value = await repoApi.getBackupSets();
+}
+</script>
+
+<template>
+    <el-drawer v-model="visible" destroy-on-close append-to-body :title="title"
+               @open="init">
+        <el-scrollbar class="el-form-scrollbar">
+            <ja-form :model="state" :validator="validator" ref="form">
+                <ja-form-item label="配置标识" prop="configKey" required>
+                    <ja-input v-focus :disabled="props.menuType === 'manage'"></ja-input>
+                </ja-form-item>
+                <ja-form-item label="存储备份集" prop="backupSet" required>
+                    <ja-select>
+                        <el-option v-for="b in backupSets" :key="b" :label="b"
+                                   :value="b"></el-option>
+                    </ja-select>
+                </ja-form-item>
+                <ja-form-item label="存储路径格式" prop="subDirFormat" label-remark="存储路径可以帮助分类存储附件文件，使用EL表达式生成，<br/>
+表达式中可以使用#user, #timestamp, #year, #month, #date变量，<br/>
+其中#user为用户信息对象，可以获取用户属性数据，#timestamp为LocalDateTime类型变量，<br/>
+#year、#month和#date均为字符串类型变量。" required>
+                    <ja-input placeholder="请输入EL表达式，例如：'/email/' + #year"></ja-input>
+                </ja-form-item>
+                <ja-form-item label="允许上传的文件类型" prop="accept">
+                    <el-select filterable allow-create multiple tag-type="primary" v-model="accepts"
+                               placeholder="请选择或填写文件类型，例如 .png .jpg，置空表示允许任意类型">
+                        <el-option label="任意类型" value="*/*"></el-option>
+                        <el-option label="图片类型"
+                                   value=".jpg .jpeg .png .gif .bmp .tiff .svg .webp .heif"/>
+                        <el-option label="文本文档"
+                                   value=".doc .docx .odt .rtf .wps .pages"></el-option>
+                        <el-option label="电子表格"
+                                   value=".xls .xlsx .xlsm .ods .csv .tsv .numbers .et"></el-option>
+                        <el-option label="演示文档"
+                                   value=".ppt .pptx .odp .dps"/>
+                        <el-option label="视频文件"
+                                   value="mp4 avi mkv webm mov flv wmv mpeg mpg 3gp ogg"></el-option>
+                        <el-option label="音频文件"
+                                   value=".mp3 .wav .ogg .flac .aac .m4a .wma .alac .opus .aiff .pcm"></el-option>
+                        <el-option label="压缩文件"
+                                   value=".zip .rar .7z .tar .gz .xz .bz2 .cab .iso .dmg .pkg"></el-option>
+                        <el-option label="PDF文件" value=".pdf"></el-option>
+                    </el-select>
+                </ja-form-item>
+                <ja-form-item label="文件切片大小" prop="chunkSize"
+                              label-remark="当有代理或应用服务限制请求大小时，需要配置此选项将文件切片上传。<br/>置零表示不切片上传，置空表示继承全局配置。<br/>如无必要，应劲量避免切片上传，因为会降低上传速度。">
+                    <ja-input-number></ja-input-number>
+                </ja-form-item>
+                <ja-form-item label="允许上传文件的最大数量" prop="maxFileCount"
+                              label-remark="置零表示不限制">
+                    <ja-input-number></ja-input-number>
+                </ja-form-item>
+                <ja-form-item label="文件数量溢出的处理策略"
+                              prop="countOverflowStrategy">
+                    <ja-select>
+                        <el-option label="替换第一个" value="REPLACE_FIRST"></el-option>
+                        <el-option label="替换最后一个" value="REPLACE_LAST"></el-option>
+                        <el-option label="抛出异常" value="THROW_ERROR"></el-option>
+                    </ja-select>
+                </ja-form-item>
+                <ja-form-item label="单个文件最大大小(单位:KB)" prop="maxSingleFileSize"
+                              label-remark="置零表示不限制，置空表示继承全局配置">
+                    <ja-input-number></ja-input-number>
+                </ja-form-item>
+                <ja-form-item label="文件总计最大大小(单位:KB)" prop="maxSingleFileSize"
+                              label-remark="置零表示不限制，置空表示继承全局配置">
+                    <ja-input-number></ja-input-number>
+                </ja-form-item>
+                <ja-form-item label="用户默认存储配额(单位:MB)"
+                              label-remark="置空或置零表示不限制"
+                              prop="defaultQuota">
+                    <ja-input-number></ja-input-number>
+                </ja-form-item>
+                <ja-form-item label="是否加密存储" prop="enableEncrypt">
+                    <ja-radio-group>
+                        <el-radio-button label="继承" :value="0"></el-radio-button>
+                        <el-radio-button label="是" :value="true"></el-radio-button>
+                        <el-radio-button label="否" :value="false"></el-radio-button>
+                    </ja-radio-group>
+                </ja-form-item>
+                <ja-form-item label="加密算法" label-remark="可以选择硬件平台提供的性能加速的算法"
+                              prop="encAlgorithm">
+                    <ja-select>
+                        <el-option label="AES" value="AES"></el-option>
+                        <el-option label="SM4" value="SM4"></el-option>
+                    </ja-select>
+                </ja-form-item>
+                <ja-form-item label="不加密超过以下大小的文件(单位:MB)"
+                              label-remark="置零表示不限制，置空表示继承全局或应用配置"
+                              prop="maxEncryptSize">
+                    <ja-input-number></ja-input-number>
+                </ja-form-item>
+                <ja-form-item label="是否需要设置文件密级" prop="enableClassifiedLevel">
+                    <ja-switch></ja-switch>
+                </ja-form-item>
+                <ja-form-item label="是否公开文件" label-remark="不需要登录即可下载查看文件"
+                              prop="isPublic">
+                    <ja-switch></ja-switch>
+                </ja-form-item>
+                <ja-form-item label="是否禁止上传" prop="disallowUpload">
+                    <ja-switch></ja-switch>
+                </ja-form-item>
+                <ja-form-item label="是否禁止下载" prop="disallowDownload">
+                    <ja-switch></ja-switch>
+                </ja-form-item>
+                <ja-form-item label="是否禁止删除" prop="disallowDelete">
+                    <ja-switch></ja-switch>
+                </ja-form-item>
+                <ja-form-item label="是否允许删除他人上传的文件" prop="allowDeleteOthersFile">
+                    <ja-switch></ja-switch>
+                </ja-form-item>
+                <ja-form-item label="是否禁止预览" prop="disablePreview">
+                    <ja-radio-group>
+                        <el-radio-button label="继承" :value="0"></el-radio-button>
+                        <el-radio-button label="是" :value="true"></el-radio-button>
+                        <el-radio-button label="否" :value="false"></el-radio-button>
+                    </ja-radio-group>
+                </ja-form-item>
+                <ja-form-item label="是否在预览时添加水印" prop="enablePreviewWatermark">
+                    <ja-radio-group>
+                        <el-radio-button label="继承" :value="0"></el-radio-button>
+                        <el-radio-button label="是" :value="true"></el-radio-button>
+                        <el-radio-button label="否" :value="false"></el-radio-button>
+                    </ja-radio-group>
+                </ja-form-item>
+                <ja-form-item label="水印内容" label-remark="置空表示继承全局或应用配置"
+                              prop="watermark">
+                    <ja-input></ja-input>
+                </ja-form-item>
+                <ja-form-item label="禁止选择本地文件上传" prop="disableFileUpload">
+                    <ja-switch></ja-switch>
+                </ja-form-item>
+                <ja-form-item label="禁止选择本地文件夹上传" prop="disableDirUpload">
+                    <ja-switch></ja-switch>
+                </ja-form-item>
+                <ja-form-item label="启用摄像头录制上传" prop="enableWebcam">
+                    <ja-switch></ja-switch>
+                </ja-form-item>
+                <ja-form-item label="摄像头工作模式" prop="allowedWebcamModes"
+                              v-if="state.formData.enableWebcam">
+                    <ja-select multiple>
+                        <el-option label="视频+音频" value="VIDEO_AUDIO"></el-option>
+                        <el-option label="仅视频" value="VIDEO_ONLY"></el-option>
+                        <el-option label="拍照片" value="PICTURE"></el-option>
+                    </ja-select>
+                </ja-form-item>
+                <ja-form-item label="启用音频录制上传" prop="enableAudio">
+                    <ja-switch></ja-switch>
+                </ja-form-item>
+                <ja-form-item label="启用截屏录屏上传" prop="enableScreenCapture">
+                    <ja-switch></ja-switch>
+                </ja-form-item>
+                <ja-form-item label="上传说明" label-remark="要显示在上传对话框的一段说明文字" prop="uploadNote">
+                    <ja-input></ja-input>
+                </ja-form-item>
+                <ja-form-item label="上传文件需要拥有角色" prop="uploadAuthCode">
+                    <ja-role-picker :app-name="props.appName"></ja-role-picker>
+                </ja-form-item>
+                <ja-form-item label="下载文件需要拥有角色" prop="downloadAuthCode">
+                    <ja-role-picker :app-name="props.appName"></ja-role-picker>
+                </ja-form-item>
+                <ja-form-item label="删除文件需要拥有角色" prop="deleteAuthCode">
+                    <ja-role-picker :app-name="props.appName"></ja-role-picker>
+                </ja-form-item>
+            </ja-form>
+        </el-scrollbar>
+        <template #footer>
+            <ja-button size="default" type="primary" @click="submit" :loading="loading"
+                       :disabled="loading"
+                       shortcut="Alt+Enter">确定
+            </ja-button>
+            <el-button size="default" @click="visible = false">取消</el-button>
+        </template>
+    </el-drawer>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/ace-app-manager-ui/src/views/appManage/registerUpload/components/QuotaEditor.vue

@@ -0,0 +1,202 @@
+<script setup lang="ts">
+import {ref, computed, onUnmounted} from 'vue';
+import {
+    type AppInstance,
+    createAxiosWithoutCache,
+    type FileQuota,
+    type ProjectedFileConfiguration, type UpdateFileQuotaCommand, useLoading,
+    type UserReference
+} from "@jari-ace/app-bolts";
+import {useFileStorageApi} from "@jari-ace/app-bolts";
+import {pageSizes} from "@/hooks/usePageSize";
+import {ElMessage, ElTableColumn} from "element-plus";
+import {CaretBottom, Plus, QuestionFilled} from "@element-plus/icons-vue";
+import {debounce} from "lodash-es";
+import {JaUserPickerRaw, useAppInstances} from "@jari-ace/element-plus-component"
+import SelectRealmForApp from "@/views/appManage/components/SelectRealmForApp.vue";
+
+const visible = defineModel<boolean>({
+    default: false,
+    required: true
+});
+const editorVisible = ref(false);
+const axios = createAxiosWithoutCache();
+const api = useFileStorageApi(axios);
+const loading = useLoading(axios)
+const page = ref(1);
+const total = ref(0);
+const pageSize = ref(50);
+const props = defineProps<{
+    config?: ProjectedFileConfiguration
+}>();
+const quotas = ref<FileQuota[]>();
+const queryUserName = ref<string>("");
+const debounceLoadData = debounce(loadData, 500);
+const users = ref<UserReference[]>([]);
+const quota = ref<number>(0);
+const realmId = ref<string>('0');
+const quotaInMB = computed({
+    get: () => {
+        return Math.round(quota.value / 1024 / 1024);
+    },
+    set: (value) => {
+        quota.value = value * 1024 * 1024;
+    }
+})
+const {getByName: getAppByName} = useAppInstances()
+const app = ref<AppInstance>()
+
+async function loadData() {
+    if (!props.config) return;
+    app.value = await getAppByName(props.config.appName)
+    if (queryUserName.value && queryUserName.value.length > 0) {
+        const res = await api.getQuotaListByName(
+            props.config.id,
+            queryUserName.value,
+            page.value - 1,
+            pageSize.value);
+        total.value = res.totalElements;
+        quotas.value = res.content;
+    } else {
+        const res = await api.getQuotaList(props.config.id, page.value - 1, pageSize.value);
+        total.value = res.totalElements;
+        quotas.value = res.content;
+    }
+}
+
+function onCreateQuota() {
+    users.value = [];
+    editorVisible.value = true;
+}
+
+function onEditQuota(q: FileQuota) {
+    users.value = [{
+        id: q.userId,
+        username: q.username,
+        fullName: q.userFullName
+    }];
+    quota.value = q.quotaSize;
+    editorVisible.value = true;
+}
+
+async function onSubmit() {
+    if (!props.config) return;
+    if (users.value.length === 0) {
+        ElMessage.warning("请选择要分配存储配额的用户");
+        return;
+    }
+    await api.updateQuota(users.value.map(u => (
+        {
+            userId: u.id,
+            fileConfigId: props.config?.id,
+            quota: quota.value.toString()
+        } as UpdateFileQuotaCommand
+    )));
+    loadData();
+    editorVisible.value = false;
+}
+
+loadData();
+
+onUnmounted(() => {
+    debounceLoadData.cancel()
+})
+</script>
+
+<template>
+    <el-drawer v-model="visible" append-to-body title="配额管理" @open="loadData"
+               size="720px">
+        <div style="display:flex; flex-direction:column; gap:8px;">
+            <div style="display:flex;">
+                <el-text style="flex: auto;">
+                    <el-icon>
+                        <caret-bottom></caret-bottom>
+                    </el-icon>
+                    附件{{ props.config?.configKey }}已配置的用户存储配额
+                    <el-tooltip content="没有在这里明确设置配额的用户，将拥有附件配置中的默认配额">
+                        <el-icon>
+                            <question-filled></question-filled>
+                        </el-icon>
+                    </el-tooltip>
+                </el-text>
+                <div style="flex:none; gap:8px; display:flex;">
+                    <el-input style="width: 200px;" placeholder="输入用户姓名查询" v-focus
+                              v-model="queryUserName" @input="debounceLoadData"></el-input>
+                    <el-button :icon="Plus" plain type="success" @click="onCreateQuota">
+                        添加用户配额
+                    </el-button>
+                </div>
+            </div>
+            <el-table :data="quotas" style="flex: auto" height="400">
+                <el-table-column label="用户" width="120">
+                    <template #default="scope">
+                        <ja-user-info-tag :user-id="scope.row.userId"
+                                          :full-name="scope.row.userFullName"></ja-user-info-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column label="配额" width="80">
+                    <template #default="scope">
+                        {{ Math.round(scope.row.quotaSize / 1024 / 1024) }}MB
+                    </template>
+                </el-table-column>
+                <el-table-column label="已使用" width="80">
+                    <template #default="scope">
+                        {{ Math.round(scope.row.usedSize / 1024 / 1024) }}MB
+                    </template>
+                </el-table-column>
+                <el-table-column label="百分比">
+                    <template #default="scope">
+                        <el-progress
+                            :percentage="Math.round(scope.row.usedSize / scope.row.quotaSize * 10) / 1000">
+                        </el-progress>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" width="100">
+                    <template #default="scope">
+                        <el-button link type="primary" @click="onEditQuota(scope.row)">修改配额
+                        </el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div style="flex:none;">
+                <el-pagination
+                    background
+                    :page-sizes="pageSizes"
+                    @current-change="loadData"
+                    @size-change="loadData"
+                    layout="total, sizes, prev, pager, next"
+                    v-model:page-size="pageSize"
+                    v-model:current-page="page"
+                    :total="total"/>
+            </div>
+        </div>
+        <template #footer>
+            <el-button type="primary" @click="visible=false">确定</el-button>
+        </template>
+    </el-drawer>
+    <el-dialog draggable v-model="editorVisible" append-to-body width="480"
+               title="配置用户存储配额">
+        <el-form label-position="top" size="small" style="height:300px">
+            <el-form-item label="用户域">
+                <select-realm-for-app v-model="realmId" :app-id="app?.name"></select-realm-for-app>
+            </el-form-item>
+            <el-form-item label="配额用户">
+                <ja-user-picker-raw v-model="users" :realm-id="realmId" style="flex: auto;"
+                                    multiple></ja-user-picker-raw>
+            </el-form-item>
+            <el-form-item required label="存储配额(单位:MB)">
+                <el-input-number v-model="quotaInMB" style="width:200px"></el-input-number>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button type="primary" @click="onSubmit" :loading="loading" :disabled="loading">
+                确定
+            </el-button>
+            <el-button plain @click="editorVisible=false">取消</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<style scoped lang="scss">
+
+</style>