ace-front-end 1.0.0

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

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+// import useEventBus from '@/common/EventBus'
+// import notFound from "@/assets/not_found.svg";
+import { computed, onMounted, reactive } from "vue";
+import { Jari, store } from "@jari-ace/app-bolts";
+// import { useAccessibleApps } from "@/stores/modules/accessibleApps";
+import useAppStore from "@/stores/modules/app";
+import { useRoute } from "vue-router";
+import { useOidcStore } from "@/stores/modules/oidc";
+// import { router } from "@/router";
+const appStore = useAppStore();
+const { loginUser } = useOidcStore(store);
+const emits = defineEmits(["created", "beforemount", "mounted", "unmount", "error", "datachange"]);
+
+interface Props {
+    appName: string | string[];
+}
+
+const route = useRoute();
+
+const props = defineProps<Props>();
+
+if (!props.appName) {
+    throw new Error("appName 为空");
+}
+
+const appUrl = computed(() => {
+    //开发模式下使用devServerUrl，生产环境下使用主服务路径访问
+    return appStore.currentApp?.isDev
+        ? appStore.currentApp?.devServerUrl
+        : "/" + appStore.currentApp?.mainService?.name + "/" + appStore.currentApp?.name;
+});
+
+const appName = computed((): string => {
+    return typeof props.appName === "string" ? props.appName : props.appName[0];
+});
+
+const baseData = reactive({
+    // oidc:oidcStore.loginUser
+    loginUser,
+});
+
+onMounted(() => {
+    //这里要发出消息路由变化切换了应用，microAppSFC已经加载完毕
+    // eventBus.emit('appSwitched', props.appId)
+});
+
+/**
+ * 因为所有的应用都复用了本组件，只能用过监听路由地址的变化来确认应用跳转
+ */
+
+const handleCreate = (e: any) => {
+    emits("created", e);
+};
+const handleBeforeMount = (e: any) => {
+    emits("beforemount", e);
+};
+const handleMount = (e: any) => {
+    emits("mounted", e);
+};
+const handleUnmount = (e: any) => {
+    emits("unmount", e);
+};
+const handleError = (e: any) => {
+    emits("error", e);
+};
+const handleDataChange = (e: unknown) => {
+    emits("datachange", e);
+    listenSubAppNotify(e);
+};
+
+const listenSubAppNotify = (e: any) => {
+    //如果事件名是 'appMounted' 说明子应用装载完毕，需要修改子应用列表里的“isMounted”状态
+    if (e.detail.data.eventName === "appMounted") {
+        console.log("==> 子应用告知已加载完毕");
+        // appStore.setAppIsMountedById(props.appId)
+        //触发appMounted事件
+        // eventBus.emit('appMounted', props.appId)
+    }
+};
+</script>
+
+<template>
+    <div class="ace-micro-app-sfc">
+        <div class="prompt-box" v-show="appStore.currentApp?.appLoadStatus !== 'complete'">
+            <div class="state-loading" v-if="appStore.currentApp?.appLoadStatus === 'loading'">
+                <div class="dots">
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                </div>
+                <span class="loading-text"
+                    >{{ appStore.currentApp?.name }}正在加载中，请稍等...</span
+                >
+            </div>
+            <div class="state-error" v-if="appStore.currentApp?.appLoadStatus === 'error'">
+                <!-- <ElImage style="width: 300px; height: 300px" :src="notFound"></ElImage> -->
+                {{ appStore.currentApp?.name }}加载失败
+            </div>
+        </div>
+        <!-- <RouterView /> -->
+        <!-- :baseroute="'/app/' + $router.currentRoute.value.params.app" -->
+        <!--  -->
+        <micro-app
+            keep-alive
+            @created="handleCreate"
+            @beforemount="handleBeforeMount"
+            @mounted="handleMount"
+            @unmount="handleUnmount"
+            @error="handleError"
+            @datachange="handleDataChange"
+            style="height: 100%; width: 100%"
+            :iframe="appStore.currentApp?.sandboxMode === 'IFRAME'"
+            :name="appStore.currentApp?.name"
+            :app-name="appStore.currentApp?.name as string"
+            :data="baseData"
+            :baseroute="'/app/' + appStore.currentApp?.name"
+            :appId="appName"
+            :url="appUrl"
+        >
+        </micro-app>
+    </div>
+</template>
+<style lang="scss" scoped>
+.ace-micro-app-sfc {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    .prompt-box {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        // background-color: azure;
+        // top: 50%;
+        // margin-top: -250px;
+        // left: 50%;
+        // margin-left: -250px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        // background-image: url('/app-shell/assets/images/');
+        .state-error {
+            color: #7e8b99;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .state-loading {
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            position: relative;
+
+            &::after {
+                content: " ";
+                position: absolute;
+                z-index: 1;
+                width: 100%;
+                height: 100%;
+                background-color: rgba(255, 255, 255, 0.9);
+            }
+
+            .loading-text {
+                margin-top: 24px;
+                font-size: 14px;
+                color: #555f6d;
+                position: relative;
+                z-index: 2;
+                font-weight: bold;
+            }
+
+            .dots {
+                position: relative;
+                z-index: 2;
+                width: 42px;
+                height: 42px;
+                display: grid;
+                grid-template-rows: repeat(3, 1fr);
+                grid-template-columns: repeat(3, 1fr);
+                justify-items: center;
+                align-items: center;
+            }
+
+            .dots > div {
+                width: 7px;
+                height: 7px;
+                background-color: #555f6d;
+                border-radius: 50%;
+                animation: fade 1s alternate ease-in-out infinite;
+            }
+
+            .dots > div:nth-of-type(2),
+            .dots > div:nth-of-type(4) {
+                animation-delay: 0.25s;
+            }
+
+            .dots > div:nth-of-type(3),
+            .dots > div:nth-of-type(5),
+            .dots > div:nth-of-type(7) {
+                animation-delay: 0.5s;
+            }
+
+            .dots > div:nth-of-type(6),
+            .dots > div:nth-of-type(8) {
+                animation-delay: 0.75s;
+            }
+
+            .dots > div:nth-of-type(9) {
+                animation-delay: 1s;
+            }
+
+            @keyframes fade {
+                to {
+                    opacity: 0.2;
+                }
+            }
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,303 @@
+<template>
+    <el-drawer
+        title="更新个人资料"
+        v-model="visible"
+        :draggable="true"
+        :destroy-on-close="true"
+        append-to-body
+        @opened="init"
+        @close="onClose">
+        <el-scrollbar>
+            <ja-form
+                ref="formRef"
+                :validator="validator" style="width: 95%"
+                :model="state">
+                <div style="display:flex; flex-direction: row; gap: 24px;margin: 16px 0">
+                    <div class="avatar-container">
+                        <el-tooltip content="点击更换头像">
+                            <div class="avatar-border shadow-on-hover">
+                                <ja-avatar :size="110" style="cursor: pointer;" has-avatar
+                                           :user-id="login.id" @click="onAvatarClick()">
+                                </ja-avatar>
+                            </div>
+                        </el-tooltip>
+                        <el-icon class="delete-icon" @click="deleteAvatar" v-if="hasAvatar">
+                            <Close></Close>
+                        </el-icon>
+                        <my-upload v-model="state.showUpload" :url="state.uploadUrl"
+                                   noSquare noRotate withCredentials field="file"
+                                   @cropUploadSuccess="onUploaded()"></my-upload>
+                    </div>
+                    <div style="width: 100%; flex: auto">
+                        <ja-form-item label="用户名" prop="username" required>
+                            <ja-input :disabled="!(state.settings?.allowUpdateUsername ?? false)"
+                                      auto-complete="off" v-focus/>
+                        </ja-form-item>
+                        <el-row :gutter="12">
+                            <el-col :span="12">
+                                <ja-form-item label="姓" prop="familyName" required>
+                                    <ja-input
+                                        :disabled="!(state.settings?.allowUpdateFullName ?? false)"/>
+                                </ja-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <ja-form-item label="名" prop="firstName" required>
+                                    <ja-input
+                                        :disabled="!(state.settings?.allowUpdateFullName ?? false)"/>
+                                </ja-form-item>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </div>
+
+                <ja-form-item label="姓名全拼" prop="pinYinName">
+                    <ja-input :disabled="!(state.settings?.allowUpdateFullName ?? false)"/>
+                </ja-form-item>
+                <ja-form-item label="所属部门" prop="departmentId">
+                    <ja-department-picker
+                        :multiple="false"
+                        size="small"
+                        :disabled="!(state.settings?.allowUpdateDepartment ?? false)"
+                        :realm-id="state.realmId"
+                        v-model="state.formData.departmentId"/>
+                </ja-form-item>
+                <ja-form-item label="手机号" prop="mobile"
+                              :required="state.settings?.mobileNotNullable">
+                    <ja-input :disabled="!(state.settings?.allowUpdateContact ?? false)"/>
+                </ja-form-item>
+                <ja-form-item label="Email" prop="email"
+                              :required="state.settings?.emailNotNullable">
+                    <ja-input/>
+                </ja-form-item>
+                <ja-form-item label="语言" prop="locale">
+                    <ja-select
+                        placeholder="语言">
+                        <el-option
+                            v-for="item in localeList"
+                            :key="item.event"
+                            :label="item.text"
+                            :value="item.event"/>
+                    </ja-select>
+                </ja-form-item>
+
+            </ja-form>
+            <extended-attr-render v-model="state.formData.attributes as Record<string,never>"
+                                  :attr-defs="state.attrDefs"></extended-attr-render>
+        </el-scrollbar>
+        <template #footer>
+            <ja-button size="default" type="primary" @click="submit" :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 {computed, ref} from "vue";
+import {
+    JaDepartmentPicker,
+    JaAvatar,
+    JaButton,
+    JaForm,
+    JaFormItem,
+    JaInput,
+    JaSelect,
+    updateAvatarToken,
+    useBackendValidations, type TreeNodeType
+} from "@jari-ace/element-plus-component";
+import {
+    type AceAxiosRequestConfig,
+    localeList,
+    type ProfileSettings,
+    type UpdateUserProfileCommand,
+    useLoading,
+    useLoginUser,
+    type UserAttributeDef,
+    useUserApi,
+    useUserAttrDefApi, useUserAvatarApi,
+} from "@jari-ace/app-bolts";
+import myUpload from 'vue-image-crop-upload';
+import ExtendedAttrRender from "./ExtendedAttrRender.vue";
+import {useOidcStore} from "@/stores/modules/oidc";
+import {createAxiosWithoutCache} from "@/utils/axios";
+import {ElMessage} from "element-plus";
+import {Close} from "@element-plus/icons-vue";
+
+const requestOption: AceAxiosRequestConfig = {}
+const initData: UpdateUserProfileCommand = {
+    attributes: {},
+    dataVersion: 0,
+    departmentId: '0',
+    email: "",
+    familyName: "",
+    firstName: "",
+    id: "",
+    locale: "",
+    mobile: "",
+    pinYinName: "",
+    username: ""
+}
+
+type Props = {
+    modelValue: boolean;
+};
+
+// const systemStore = useSystemStore();
+const formRef = ref<typeof JaForm>();
+
+const props = defineProps<Props>();
+
+const emits = defineEmits(["update:modelValue", "success", "opened"]);
+const login = useLoginUser()
+const state = ref<{
+    realmId?: string;
+    formData: UpdateUserProfileCommand;
+    attrDefs?: UserAttributeDef[],
+    settings?: ProfileSettings,
+    showUpload?: boolean,
+    uploadUrl?: string
+}>({
+    formData: {...initData},
+    showUpload: false
+});
+
+const visible = computed({
+    get(): boolean {
+        return props.modelValue;
+    },
+    set(val: boolean) {
+        emits("update:modelValue", val);
+    },
+});
+const loginUser = useOidcStore().loginUser;
+const axios = createAxiosWithoutCache();
+const validator = useBackendValidations(Object.keys(initData), axios);
+const userApi = useUserApi(axios);
+const userAttrApi = useUserAttrDefApi(axios);
+const loading = useLoading(axios);
+const avatarApi = useUserAvatarApi(axios);
+const hasAvatar = ref(false);
+
+const submit = () => {
+    //判断当前组件类型   type 为 update 更新模式，为 create 创建模式
+    formRef.value?.validate(() =>
+        userApi
+            .updateOwnProfile(state.value.formData, requestOption)
+            .then(() => {
+                emits("success");
+                visible.value = false;
+            })
+    )
+}
+
+const init = () => {
+    userApi.getById(loginUser?.id ?? "").then(r => {
+        state.value.realmId = r.realmId
+        state.value.formData = {
+            attributes: r.attributes,
+            dataVersion: r.dataVersion,
+            departmentId: r.department?.id,
+            email: r.email,
+            familyName: r.familyName,
+            firstName: r.firstName,
+            id: r.id,
+            locale: r.locale,
+            mobile: r.mobile,
+            pinYinName: r.pinYinName,
+            username: r.username
+        }
+        const path = '/ace-app-service/avatar/' + r.id
+        state.value.uploadUrl = window.appDescriptor.env.isDevMode()
+            ? new URL("/ace" + path, location.origin).toString() //开发模式下使用vite代理，添加ace前缀，由vite代理修改路由
+            : new URL(path, location.origin).toString()
+        hasAvatar.value = r.hasAvatar;
+    })
+    userAttrApi.getAll().then(res => {
+        state.value.attrDefs = res;
+    })
+    userApi.getProfileSettings().then(c => state.value.settings = c)
+};
+
+function onClose() {
+    validator.axios.cancel(requestOption)
+}
+
+function onUploaded() {
+    hasAvatar.value = true;
+    updateAvatarToken();
+    userApi.getById(loginUser?.id ?? "")
+           .then(res => state.value.formData.dataVersion = res.dataVersion)
+}
+
+function onAvatarClick() {
+    if (state.value.settings?.allowUpdateAvatar) {
+        state.value.showUpload = true;
+    } else {
+        ElMessage.warning("管理员已禁止修改个人头像")
+    }
+}
+
+function deleteAvatar() {
+    if (hasAvatar.value) {
+        avatarApi.delete(login.id).then(() => {
+            updateAvatarToken();
+            hasAvatar.value = false;
+            userApi.getById(loginUser?.id ?? "")
+                   .then(res => state.value.formData.dataVersion = res.dataVersion)
+        })
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.shadow-on-hover {
+    box-sizing: border-box;
+    margin-left: 8px;
+    transition: box-shadow 0.3s ease-in-out;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 主阴影 */
+}
+
+.shadow-on-hover:hover {
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), /* 主阴影 */
+    0 6px 8px rgba(0, 0, 0, 0.25); /* 额外的柔和阴影 */
+}
+
+.avatar-border {
+    border: solid 1px var(--el-border-color);
+    border-radius: 50%;
+    padding: 2px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.avatar-container {
+    position: relative; /* 设置父容器为相对定位 */
+    .delete-icon {
+        position: absolute; /* 设置图标为绝对定位 */
+        top: 5px; /* 根据需要调整顶部距离 */
+        right: -5px; /* 根据需要调整右侧距离 */
+        cursor: pointer; /* 设置鼠标悬停时的样式 */
+        background-color: var(--el-color-danger-light-9); /* 可选：设置背景以便更好地看到图标 */
+        border-radius: 50%; /* 可选：设置圆形背景 */
+        padding: 2px; /* 可选：增加一些内边距 */
+        opacity: 0; /* 默认透明 */
+        transition: opacity 0.3s ease, transform 0.3s ease; /* 过渡效果 */
+        &.el-icon {
+            color: var(--el-color-danger-light-5) !important;
+
+            &:hover {
+                background-color: var(--el-color-danger-light-7);
+                color: var(--el-color-danger-light-3) !important;
+            }
+        }
+    }
+
+    &:hover {
+        .delete-icon {
+            opacity: 1; /* 鼠标悬停时变为不透明 */
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,10 @@
+<!--
+  - 版权所有 (c) 2023 江苏杰瑞信息科技有限公司
+  -
+  - 此文件属于JARI.ACE平台项目，修改、分发必须遵守杰瑞信科商业软件许可协议
+  -->
+
+<template>
+    <el-header>this is workbench</el-header>
+</template>
+<script lang="ts" setup></script>

package/ace-cloud-shell-ui/src/views/errors/HttpState404.vue

@@ -0,0 +1,136 @@
+<!--
+  - 版权所有 (c) 2023 江苏杰瑞信息科技有限公司
+  -
+  - 此文件属于JARI.ACE平台项目，修改、分发必须遵守杰瑞信科商业软件许可协议
+  -->
+
+<template>
+    <div class="page">
+        <div class="container">
+            <div class="font-h1">:(</div>
+            <div class="tip">{{ $t("errors.http404-tip") }}</div>
+            <div class="complete">
+                {{ $t("errors.complete") }} <span class="percentage">{{ complete }}</span
+                >%
+            </div>
+            <div class="details">
+                <div class="stopcode">
+                    <div class="stopcode-text">
+                        {{ $t("errors.http404-stop-code") }}
+                    </div>
+                    <div class="stopcode-text">
+                        <router-link class="stopcode-a" to="">
+                            <span @click="$router.back()"> {{ $t("errors.return-to-prev") }}</span>
+                        </router-link>
+                        <router-link class="stopcode-a" to="/"
+                            >{{ $t("errors.return-home") }}
+                        </router-link>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onBeforeUnmount, onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const complete = ref(0);
+var timer: any = null;
+
+function process() {
+    complete.value += Math.floor(Math.random() * 50);
+    if (complete.value >= 100) {
+        complete.value = 100;
+        router.back();
+    } else {
+        processInterval();
+    }
+}
+
+function processInterval() {
+    timer = setTimeout(process, Math.random() * (1000 - 500) + 500);
+}
+
+onMounted(() => {
+    processInterval();
+});
+onBeforeUnmount(() => {
+    clearTimeout(timer);
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    width: 100vw;
+    background: #0078d7;
+    color: var(--ba-bg-color-overlay);
+
+    .container {
+        width: 50vw;
+
+        .font-h1 {
+            font-size: 120px;
+        }
+
+        .tip {
+            font-size: 30px;
+            padding-top: 20px;
+        }
+
+        .complete {
+            font-size: 30px;
+            padding: 30px 0;
+        }
+
+        .details {
+            display: flex;
+            align-items: center;
+
+            .qr-image img {
+                height: 80px;
+                width: 80px;
+            }
+
+            .stopcode {
+                padding-left: 10px;
+
+                .stopcode-text {
+                    display: block;
+                    padding: 4px 0;
+                    font-size: 16px;
+                }
+            }
+        }
+    }
+}
+
+.stopcode-a {
+    font-size: 16px;
+    color: var(--ba-bg-color-overlay);
+    padding-right: 16px;
+}
+
+@media screen and (max-width: 720px) {
+    .container {
+        width: 90vw !important;
+    }
+    .tip {
+        font-size: 20px !important;
+        padding-top: 20px;
+    }
+    .complete {
+        font-size: 20px !important;
+        padding: 30px 0;
+    }
+    .stopcode-text {
+        font-size: 15px !important;
+    }
+}
+</style>

package/ace-cloud-shell-ui/src/views/errors/NoAppAvailable.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import {useOidcStore} from "@/stores/modules/oidc";
+import {store} from '@jari-ace/app-bolts'
+
+const auth = useOidcStore(store)
+</script>
+
+<template>
+    <el-empty description="暂无可用应用，请联系系统管理员为您开通">
+        <el-button size="large" type="primary" plain @click="auth.logout()">已知晓，退出登录
+        </el-button>
+    </el-empty>
+</template>
+
+<style scoped lang="scss">
+</style>