ace-front-end 1.0.0

package/ace-cloud-shell-ui/src/utils/microApp/index.ts

@@ -0,0 +1,6 @@
+import microApp from "@micro-zoe/micro-app";
+
+microApp.start({
+    "disable-memory-router": true, // 关闭虚拟路由系统
+    "disable-patch-request": true, // 关闭对子应用请求的拦截
+});

package/ace-cloud-shell-ui/src/views/AboutView.vue

@@ -0,0 +1,140 @@
+<template>
+    <el-dialog title="关于软件" draggable v-model="visible" width="560px">
+        <div class="body">
+            <div class="header-line">
+                <div class="logo">
+                    <el-image :src="sysInfo.logo" fit="fill"></el-image>
+                </div>
+                <div class="title">
+                    <div>
+                        <el-text>{{ sysInfo.title }}</el-text>
+                    </div>
+                    <div class="version">
+                        <el-text> 版本 {{ sysInfo.version }}</el-text>
+                    </div>
+                </div>
+            </div>
+            <div>本软件基于杰瑞鲲舟®应用开发平台构建运行。</div>
+            <div>
+                <span style="font-weight: 600">杰瑞鲲舟®</span
+                >是江苏杰瑞信息科技有限公司的注册商标。<br />
+                <span style="font-weight: 600">杰瑞鲲舟®应用开发平台</span
+                >是江苏杰瑞信息科技有限公司的注册软件产品。
+            </div>
+            <div>
+                本软件的版权归<span style="font-weight: 600"> {{ sysInfo.copyright }}</span> 所有。
+            </div>
+            <div>
+                <el-image
+                    src="/res/build/shell/images/public-code.png"
+                    class="public-code"
+                ></el-image>
+            </div>
+            <div>关注鲲舟平台公众号，获取更多讯息</div>
+            <div>
+                <el-space v-if="isAdmin">
+                    <el-text size="large"
+                        >控制台应用开发模式
+                        <el-tooltip placement="bottom">
+                            <el-icon>
+                                <question-filled></question-filled>
+                            </el-icon>
+                            <template #content>
+                                针对平台控制台应用启用本地开发模式。<br />
+                                启用后外框架将使用http://localhost:3000加载应用前端，适用于开发环境，<br />
+                                否则将使用路径“/ace-app-service/ace-app-manage”加载应用前端，适用于生产环境。<br />
+                                此选项开启后只在当前终端有效，不影响其他终端用户。
+                            </template>
+                        </el-tooltip>
+                    </el-text>
+                    <el-tooltip>
+                        <el-switch
+                            v-model="appDevMode.isDev"
+                            size="large"
+                            style="--el-switch-on-color: #67c23a; --el-switch-off-color: #f56c6c"
+                        >
+                        </el-switch>
+                        <template #content>
+                            {{ appDevMode.isDev ? "已启用" : "已禁用" }}
+                        </template>
+                    </el-tooltip>
+                </el-space>
+            </div>
+        </div>
+        <template #footer>
+            <el-button size="default" type="primary" @click="() => (visible = false)"
+                >确定
+            </el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { AceRoles, type SystemInfo, useAceInstallApi, useAppApi } from "@jari-ace/app-bolts";
+import { QuestionFilled } from "@element-plus/icons-vue";
+import { useLocalStorage } from "@vueuse/core";
+import { LOCAL_STORAGE_KEY } from "@/stores/modules/app";
+import { useOidcStore } from "@/stores/modules/oidc";
+
+const visible = ref(false);
+defineExpose({
+    open() {
+        visible.value = true;
+    },
+});
+const api = useAceInstallApi();
+const sysInfo = ref<SystemInfo>(await api.getSystemInfo());
+const appApi = useAppApi();
+const consoleApp = await appApi.getByName("ace-app-manage");
+const appDevMode = useLocalStorage(LOCAL_STORAGE_KEY + consoleApp.id, {
+    id: consoleApp.id,
+    isDev: false,
+});
+
+const loginUser = useOidcStore().loginUser;
+
+const isAdmin = loginUser?.hasRole(AceRoles.CREATE_APP);
+</script>
+
+<style scoped lang="scss">
+.body {
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .header-line {
+        display: flex;
+        width: 100%;
+        gap: 16px;
+
+        .logo {
+            flex: none;
+            display: flex;
+            flex-direction: column;
+
+            .el-image {
+                width: 68px;
+                height: 68px;
+            }
+        }
+
+        .title .el-text {
+            flex: auto;
+            font-size: var(--el-font-size-extra-large);
+            font-weight: 500;
+        }
+
+        .title .version .el-text {
+            color: var(--el-color-info-light-5);
+            font-size: var(--el-font-size-medium);
+        }
+    }
+
+    .public-code {
+        width: 160px;
+        height: 160px;
+    }
+}
+</style>

package/ace-cloud-shell-ui/src/views/DlgUpdatePassword.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import {ref, nextTick} from "vue";
+import {useOidcStore} from "@/stores/modules/oidc";
+import {store, useLoading, useUserApi} from "@jari-ace/app-bolts";
+import {useI18n} from "vue-i18n";
+import {useBackendValidations} from "@jari-ace/element-plus-component";
+import {ElButton, ElMessage} from "element-plus";
+import {JaForm} from "@jari-ace/element-plus-component";
+import {JaInput} from "@jari-ace/element-plus-component";
+import {JaFormItem, JaButton} from "@jari-ace/element-plus-component";
+
+const authStore = useOidcStore(store);
+const inputOldPsw = ref<typeof ElButton>({} as typeof ElButton);
+const visible = ref(false);
+const {t} = useI18n();
+
+const formData = {
+    id: "",
+    oldPassword: "",
+    password: "",
+    confirmPassword: "",
+};
+
+const validator = useBackendValidations(Object.keys(formData));
+const userApi = useUserApi(validator.axios);
+const form = ref<typeof JaForm>({} as typeof JaForm);
+
+const data = ref({
+    latestUpdateTime: t("updatePsw.notModified"),
+    formData: formData,
+});
+
+const init = async () => {
+    data.value.latestUpdateTime = await userApi.getLatestPasswordModifiedTime(
+        authStore.loginUser!.id!,
+    );
+};
+
+function clearForm() {
+    data.value.formData.password = "";
+    data.value.formData.oldPassword = "";
+    data.value.formData.confirmPassword = "";
+}
+
+async function submit() {
+    data.value.formData.id = authStore.loginUser!.id;
+    form.value!.validate(
+        () =>
+            userApi.updatePassword(data.value.formData).then(() => {
+                ElMessage.success(t("updatePsw.success"));
+                visible.value = false;
+            }),
+        () => nextTick(inputOldPsw.value?.focus),
+    ).finally(() => clearForm());
+}
+
+function onOpened() {
+    nextTick(() => {
+        inputOldPsw.value!.focus();
+    });
+    clearForm();
+}
+
+const loading = useLoading(validator.axios);
+
+defineExpose({
+    show: () => {
+        visible.value = true;
+    },
+    close: () => (
+        visible.value = false
+    ),
+});
+</script>
+
+<template>
+    <el-dialog
+        :title="$t('updatePsw.title')"
+        :show-close="true"
+        :draggable="true"
+        :modal="true"
+        :align-center="true"
+        @opened="onOpened"
+        append-to-body
+        width="480px"
+        v-model="visible"
+        @open="init"
+        :destroy-on-close="true"
+    >
+        <ja-form :validator="validator" :model="data" ref="form">
+            <ja-form-item>
+                <span>{{ $t("updatePsw.latestUpdateTime") + " " + data.latestUpdateTime }}</span>
+            </ja-form-item>
+            <ja-form-item :label="$t('updatePsw.password')" prop="oldPassword">
+                <ja-input :show-password="true" ref="inputOldPsw"></ja-input>
+            </ja-form-item>
+            <ja-form-item :label="$t('updatePsw.newPassword')" prop="password">
+                <ja-input :show-password="true"></ja-input>
+            </ja-form-item>
+            <ja-form-item :label="$t('updatePsw.confirmPsw')" prop="confirmPassword">
+                <ja-input :show-password="true" @keyup.enter="submit"></ja-input>
+            </ja-form-item>
+        </ja-form>
+        <template #footer>
+            <ja-button
+                type="primary"
+                size="default"
+                :loading="loading"
+                @click="submit"
+                shortcut="Alt+Enter"
+            >
+                {{ $t("common.okText") }}
+            </ja-button>
+            <el-button @click="visible = false" size="default"
+            >{{ $t("common.cancelText") }}
+            </el-button>
+        </template>
+    </el-dialog>
+</template>
+<style scoped lang="scss"></style>

package/ace-cloud-shell-ui/src/views/ExtendedAttrRender.vue

@@ -0,0 +1,311 @@
+<template>
+    <el-form :model="attrValues" inline size="small" scroll-to-error label-position="top"
+             require-asterisk-position="right"
+             style="width:100%" v-if="groupedAttributes.size > 0 || ungroupedAttributes.length > 0">
+        <el-form-item v-for="a in ungroupedAttributes" :key="a.name"
+                      label-position="top" style="width: 100%; margin: 0; padding:  0"
+                      :inline-message="true"
+                      size="small"
+                      :prop="a.name">
+            <template #label>
+                <el-text class="el-form-item__label" style="flex-grow: 0">
+                    {{ a.caption }}
+                    <span style="color:red" v-if="a.required">*</span>
+                    <el-tooltip
+                        v-if="a.helpText && a.helpText.length > 0"
+                        placement="top">
+                        <el-icon>
+                            <question-filled/>
+                        </el-icon>
+                        <template #content>
+                            <div v-html="a.helpText"/>
+                        </template>
+                    </el-tooltip>
+                </el-text>
+            </template>
+            <component :is="getInputType(a)" v-model="attrValues[a.name]"
+                       v-bind="getInputProps(a)" style="width: 100%">
+                <template v-if="a.dataType == 'ENUM'">
+                    <el-option v-for="k in Object.keys(a.enumOptions?? {})" :key="k"
+                               :label="k" :value="a.enumOptions ? a.enumOptions[k]: ''"
+                    ></el-option>
+                </template>
+            </component>
+        </el-form-item>
+        <el-collapse :accordion="false" style="width: 100%" v-model="expand"
+                     v-if="groupedAttributes.size > 0"
+                     class="grouped-properties">
+            <el-collapse-item v-for="k in groupedAttributes.keys()" :key="k"
+                              :name="k">
+                <template #title>
+                    <el-text class="el-text--info" size="default">{{ k }}</el-text>
+                </template>
+                <el-form-item v-for="a in groupedAttributes.get(k)"
+                              label-position="top"
+                              :inline-message="true"
+                              style="width: 100%; margin: 0; padding:  0"
+                              size="small"
+                              :key="a.name"
+                              :prop="a.name">
+                    <template #label>
+                        <el-text class="el-form-item__label">
+                            {{ a.caption }}
+                            <span style="color:red" v-if="a.required">*</span>
+                            <el-tooltip
+                                v-if="a.helpText && a.helpText.length > 0"
+                                placement="top">
+                                <el-icon>
+                                    <question-filled/>
+                                </el-icon>
+                                <template #content>
+                                    <div v-html="a.helpText"/>
+                                </template>
+                            </el-tooltip>
+                        </el-text>
+                    </template>
+                    <component :is="getInputType(a)" v-model="attrValues[a.name]"
+                               v-bind="getInputProps(a)">
+                        <template v-if="a.dataType == 'ENUM'">
+                            <el-option v-for="k in Object.keys(a.enumOptions?? {})" :key="k"
+                                       :label="k" :value="a.enumOptions ? a.enumOptions[k]: ''"
+                            ></el-option>
+                        </template>
+                    </component>
+                </el-form-item>
+            </el-collapse-item>
+        </el-collapse>
+    </el-form>
+</template>
+
+<script setup lang="ts">
+import {
+    ElDatePicker, ElIcon,
+    ElInput,
+    ElInputNumber,
+    ElSelect,
+    ElSwitch,
+    ElText,
+    ElTimePicker, ElTooltip
+} from "element-plus";
+import {QuestionFilled} from "@element-plus/icons-vue";
+import {AceRoles, type AttributeDefBase, useLoginUser} from "@jari-ace/app-bolts";
+import {ref, watch} from "vue";
+
+interface AttributeDef extends AttributeDefBase {
+    /**
+     * 管理员能否查看
+     */
+    adminCanView?: boolean;
+    /**
+     * 用户自己能否查看
+     */
+    userCanView?: boolean;
+    /**
+     * 管理员能否编辑
+     */
+    adminCanEdit?: boolean;
+    /**
+     * 用户自己能否编辑
+     */
+    userCanEdit?: boolean;
+}
+
+interface Props {
+    modelValue: Record<string, never>;
+    attrDefs?: AttributeDef[]
+}
+
+const props = defineProps<Props>();
+
+const emits = defineEmits<{
+    (e: "update:modelValue", value: object): void;
+}>();
+
+const loginUser = useLoginUser();
+
+const groupedAttributes = ref<Map<string, AttributeDef[]>>(new Map<string, AttributeDef[]>());
+const ungroupedAttributes = ref<AttributeDef[]>([]);
+const attrValues = ref<Record<string, never>>(props.modelValue);
+const expand = ref<string[]>([]);
+const convertedAttrValues = ref<Record<string, never>>();
+
+const isAdmin = loginUser.hasRole(AceRoles.CREATE_APP);
+
+function getInputType(a: AttributeDef) {
+    switch (a.dataType) {
+        case "STRING":
+            return ElInput;
+        case "DATETIME":
+            return ElDatePicker;
+        case "DATE":
+            return ElDatePicker;
+        case "NUMBER":
+            return ElInputNumber;
+        case "TIME":
+            return ElTimePicker;
+        case "BOOL":
+            return ElSwitch;
+        case "ENUM":
+            return ElSelect;
+    }
+}
+
+function getInputProps(a: AttributeDef) {
+    const disabled = !((isAdmin && (a.adminCanEdit ?? true)) || (!isAdmin && a.userCanEdit));
+    if (a.dataType == "NUMBER") {
+        return {
+            precision: a.numberPrecision,
+            step: a.numberPrecision ? 1 / (10 * a.numberPrecision) : 1,
+            disabled: disabled
+        }
+    } else if (a.dataType == "DATE") {
+        return {
+            type: "date",
+            format: "YYYY-MM-DD",
+            valueFormat: "YYYY-MM-DD",
+            disabled: disabled
+        }
+    } else if (a.dataType == "DATETIME") {
+        return {
+            type: "datetime",
+            format: "YYYY-MM-DD HH:mm:ss",
+            valueFormat: "YYYY-MM-DD HH:mm:ss",
+            disabled: disabled
+        }
+    } else if (a.dataType == "ENUM") {
+        return {
+            multiple: a.enableMultiSel,
+            allowCreate: a.enableInput,
+            filterable: a.enableInput,
+            defaultFirstOption: true,
+            disabled: disabled
+        }
+    } else {
+        return {
+            disabled
+        }
+    }
+}
+
+function initAttrDefs() {
+    ungroupedAttributes.value = [];
+    expand.value = [];
+    const map = new Map<string, AttributeDef[]>();
+    groupedAttributes.value = map;
+    if (!props.attrDefs) return;
+    const defs = [...props.attrDefs];
+    defs.sort(
+        (a1, a2) => a1.sortIndex === a2.sortIndex
+            ? 0 : (a1.sortIndex > a2.sortIndex ? 1 : -1))
+        .forEach(a => {
+            if ((isAdmin && (a.adminCanView ?? true)) || (!isAdmin && a.userCanView)) {
+                if (a.group) {
+                    let l = map.get(a.group);
+                    if (!l) {
+                        l = [];
+                    }
+                    l.push(a);
+                    map.set(a.group, l);
+                } else {
+                    ungroupedAttributes.value.push(a);
+                }
+            }
+        })
+    groupedAttributes.value = map;
+    expand.value.push(...groupedAttributes.value.keys())
+    if (Object.keys(attrValues).length !== defs.length) {
+        initAttrValues();
+    }
+}
+
+watch(() => props.attrDefs, () => initAttrDefs())
+
+function initAttrValues() {
+    if (convertedAttrValues.value == props.modelValue) {
+        return;
+    }
+    attrValues.value = {};
+    if (!props.modelValue) return;
+    Object.keys(props.modelValue).forEach(k => {
+        const def = props.attrDefs?.find(d => d.name === k);
+        if (def) {
+            switch (def.dataType) {
+                case "NUMBER":
+                    if (def.numberPrecision && def.numberPrecision > 0) {
+                        attrValues.value[k] = parseFloat(props.modelValue[k]) as never;
+                    } else {
+                        attrValues.value[k] = parseInt(props.modelValue[k]) as never;
+                    }
+                    break;
+                case "BOOL":
+                    attrValues.value[k] = JSON.parse(props.modelValue[k]) as never;
+                    break;
+                case "STRING":
+                case "DATETIME":
+                case "DATE":
+                case "TIME":
+                    attrValues.value[k] = props.modelValue[k];
+                    break;
+                case "ENUM":
+                    if (def.enableMultiSel) {
+                        if (typeof props.modelValue[k] === 'string') {
+                            attrValues.value[k] = ((props.modelValue[k] as string)?.split(',,') ?? []) as never;
+                        } else {
+                            attrValues.value[k] = [] as never;
+                        }
+                    } else {
+                        attrValues.value[k] = props.modelValue[k];
+                    }
+                    break;
+            }
+        }
+    })
+}
+
+watch(() => props.modelValue, () => {
+    initAttrValues();
+})
+watch(() => attrValues, () => {
+    if (props.attrDefs && attrValues.value) {
+        if (!convertedAttrValues.value) {
+            convertedAttrValues.value = {
+                ...attrValues.value
+            };
+        } else {
+            Object.assign(convertedAttrValues.value, attrValues.value);
+        }
+        const values = convertedAttrValues.value;
+        props.attrDefs.forEach(a => {
+            if (a.dataType === 'ENUM' && a.enableMultiSel) {
+                if (attrValues.value[a.name]) {
+                    values[a.name] = (attrValues.value[a.name] as string[]).join(',,') as never;
+                } else {
+                    values[a.name] = "" as never;
+                }
+            }
+        })
+        emits("update:modelValue", convertedAttrValues);
+    }
+}, {
+    deep: true,
+})
+initAttrDefs();
+initAttrValues();
+
+</script>
+
+<style scoped>
+.grouped-properties {
+    margin-top: 16px;
+    width: 100%;
+}
+
+:deep(.el-collapse-item__content) {
+    padding-bottom: 16px !important;
+}
+
+:deep(.el-collapse-item__header .el-text) {
+    font-weight: 600 !important;
+    font-size: var(--el-font-size-medium);
+}
+</style>