ace-front-end 1.0.0

package/ace-app-manager-ui/src/views/appManage/roleDefine/components/RoleSelector.vue

@@ -0,0 +1,135 @@
+<template>
+    <div class="app-role-select-sfc">
+        <ElDialog
+            draggable
+            v-model="visible"
+            class="user-picker-dialog"
+            width="480"
+            :title="props.title"
+            destroy-on-close
+            :close-on-click-modal="false">
+            <div class="header">
+                选择角色所属应用：
+                <AppSelector
+                    :apps="state.allApps"
+                    style="flex: 1"
+                    v-model="state.currentAppId"/>
+            </div>
+            <div class="body">
+                <ElScrollbar height="480px" v-loading="loading">
+                    <el-tree :data="state.roles" :props="treeProps" node-key="id"
+                             default-expand-all
+                             show-checkbox
+                             ref="treeRoles"
+                             check-on-click-node
+                             :expand-on-click-node="false"
+                             check-strictly
+                             class="role-tree">
+                    </el-tree>
+                </ElScrollbar>
+            </div>
+            <template #footer>
+                <ElButton type="primary" @click="confirm">确定</ElButton>
+                <ElButton @click="visible = false">取消</ElButton>
+            </template>
+        </ElDialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {reactive, ref, watch} from "vue";
+import {
+    useRoleApi,
+    type ProjectedRole,
+    type AppInstance,
+    useAppApi,
+    useLoading
+} from "@jari-ace/app-bolts";
+import AppSelector from "@/components/appSelector/Index.vue";
+import type {ElTree} from "element-plus";
+
+interface Props {
+    title?: string;
+    disabled?: string[];
+}
+
+const treeProps = {
+    children: 'children',
+    label: 'caption'
+}
+const roleApi = useRoleApi();
+
+const props = withDefaults(defineProps<Props>(), {
+    title: "选择角色",
+    disabled: () => [],
+});
+const appApi = useAppApi();
+
+const emits = defineEmits<{
+    (e: "selected", roles: ProjectedRole[]): void
+}>();
+const loading = useLoading();
+const visible = ref(false);
+const state = reactive<{
+    currentPage: number;
+    total: number;
+    pageSize: number;
+    roles: ProjectedRole[];
+    currentAppId: string;
+    checkedRoles: string[];
+    allApps: AppInstance[],
+}>({
+    pageSize: 10,
+    currentPage: 1,
+    total: 0,
+    roles: [],
+    currentAppId: '-1',
+    checkedRoles: [],
+    allApps: []
+});
+const treeRoles = ref<InstanceType<typeof ElTree>>();
+
+appApi.getAll(true).then(apps => {
+    state.allApps = apps;
+    state.currentAppId = apps[0].id;
+});
+
+watch(() => state.currentAppId, () => {
+    if (state.currentAppId) {
+        roleApi.getAllRole(state.currentAppId).then(roles => state.roles = roles);
+    }
+})
+
+const confirm = () => {
+    emits("selected", treeRoles.value?.getCheckedNodes() as ProjectedRole[]);
+    visible.value = false;
+};
+
+defineExpose({
+    show() {
+        visible.value = true
+    }
+})
+
+</script>
+
+<style scoped lang="scss">
+.app-role-select-sfc {
+    .header {
+        display: flex;
+        align-items: center;
+    }
+
+    .body {
+        margin-top: 8px;
+        padding: 5px 0px 5px 0;
+        border: 1px solid var(--el-border-color);
+    }
+}
+
+:deep(.role-tree) {
+    .el-tree-node__content {
+        height: 36px;
+    }
+}
+</style>

package/ace-app-manager-ui/src/views/appManage/serviceManage/AppServiceManage.vue

@@ -0,0 +1,204 @@
+<template>
+    <app-manage-layout :body-scrollbar="false">
+        <template #title>
+            应用服务
+            <el-tooltip content="注册和管理应用下辖的子服务">
+                <el-icon>
+                    <question-filled/>
+                </el-icon>
+            </el-tooltip>
+        </template>
+        <template #toolbar>
+            <el-space>
+                <ja-button type="success"
+                           :icon="Plus"
+                           tooltip="创建应用服务"
+                           @click="createService"
+                           shortcut="Alt+N">新建
+                </ja-button>
+                <ja-button plain
+                           :icon="Refresh"
+                           @click="refreshData"
+                           :loading="loading"
+                           tooltip="重新加载数据"
+                           shortcut="Alt+R">刷新
+                </ja-button>
+            </el-space>
+        </template>
+        <template #body>
+            <vxe-table
+                :loading="loading"
+                size="small"
+                stripe
+                height="100%"
+                ref="tableRef"
+                :column-config="{resizable: true}"
+                :row-config="{ isHover: true }"
+                :data="state.services"
+                class="vxe-table--scrollbar">
+                <vxe-column fixed="left" field="name" title="服务名称"
+                            width="240px"></vxe-column>
+                <vxe-column field="description" title="服务说明"
+                            width="240"></vxe-column>
+                <vxe-column field="basePackage" title="服务基础包名">
+                </vxe-column>
+                <vxe-column title="是否主服务">
+                    <template #default="{row}">
+                        <el-tag v-if="state.app?.mainService?.name === row.name" type="success">
+                            主服务
+                        </el-tag>
+                    </template>
+                </vxe-column>
+                <vxe-column title="操作" fixed="right" width="280px">
+                    <template #default="{ row }">
+                        <!-- row.disabled -->
+                        <el-button link type="warning" :icon="Edit" @click="updateService(row)"
+                        >编辑
+                        </el-button>
+                        <el-button link type="info" :icon="Star" @click="setAsMain(row)"
+                                   v-if="state.app?.mainService?.name !== row.name">
+                            置为主服务
+                        </el-button>
+                        <el-button link type="danger" :icon="Delete"
+                                   v-if="state.app?.mainService?.name !== row.name"
+                                   @click="deleteService(null,row)">删除
+                        </el-button>
+                    </template>
+                </vxe-column>
+                <template #empty>
+                    <el-empty/>
+                </template>
+            </vxe-table>
+        </template>
+    </app-manage-layout>
+    <editor :app-id="props.appId"
+            v-model="state.editorVisible"
+            :data="state.editorData"
+            :type="state.editorType"
+            @success="editorSuccess"/>
+</template>
+
+<script setup lang="ts">
+import {Delete, Edit, Help, Plus, QuestionFilled, Refresh, Star} from "@element-plus/icons-vue";
+import {JaButton} from "@jari-ace/element-plus-component";
+import ManageHeader from "@/components/header/ManageHeader.vue";
+import {VxeColumn, VxeTable} from "vxe-table";
+import {
+    type AppService, useAppApi, type AppInstance,
+    useAppServiceApi,
+    useLoading
+} from "@jari-ace/app-bolts";
+import {reactive, watch} from "vue";
+import Editor from './components/Editor.vue'
+import AppManageLayout from "@/views/appManage/components/AppManageLayout.vue";
+import {ElMessageBox} from "element-plus";
+
+const loading = useLoading();
+const state = reactive<{
+    editorVisible: boolean;
+    editorType: "create" | "update";
+    editorData: AppService | null;
+    services: AppService[];
+    nameQuery?: string,
+    app?: AppInstance
+}>({
+    editorType: "create",
+    editorVisible: false,
+    editorData: null,
+    services: []
+});
+const api = useAppServiceApi();
+const appApi = useAppApi();
+
+const props = defineProps<{
+    appId: string;
+}>();
+
+function loadData() {
+    if (!props.appId) return;
+    api.getByApp(props.appId)
+       .then(res => {
+           state.services = res;
+       })
+    appApi.getById(props.appId).then(a => state.app = a);
+}
+
+function refreshData() {
+    loadData()
+}
+
+watch(
+    () => props.appId,
+    () => {
+        refreshData();
+    }, {
+        immediate: true
+    }
+);
+
+const createService = () => {
+    state.editorType = "create";
+    state.editorVisible = true;
+};
+
+const updateService = (data: AppService) => {
+    state.editorType = "update";
+    state.editorData = data;
+    state.editorVisible = true;
+};
+
+const deleteService = (event: Event | null, data: AppService) => {
+    ElMessageBox.confirm(`您确认要删除此应用服务吗？`, "删除应用服务", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "warning",
+    })
+                .then(() => {
+                    api.delete(data.id, data.dataVersion).then(() => {
+                        loadData();
+                    });
+                });
+};
+
+const editorSuccess = () => {
+    loadData();
+};
+
+function setAsMain(service: AppService) {
+    useAppApi().setMainService(props.appId, service.id)
+               .then(() => refreshData());
+}
+</script>
+
+<style scoped>
+.app-service-page {
+    height: 100%;
+
+    .app-service-page__body {
+        height: calc(100% - 56px);
+        display: flex;
+        flex-direction: column;
+
+        .user-list {
+            float: left;
+            width: 100%;
+            height: 100%;
+            overflow-y: auto;
+        }
+
+        .table-tools {
+            padding: 12px 16px;
+            display: flex;
+            flex-direction: row-reverse;
+        }
+    }
+
+    h3 {
+        margin: 0;
+    }
+}
+
+:deep(.vxe-table--border-line) {
+    border: 0 none !important;
+}
+</style>

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

@@ -0,0 +1,153 @@
+<template>
+    <el-drawer
+        :title="state.title"
+        v-model="visible"
+        :draggable="true"
+        :destroy-on-close="true"
+        @open="init"
+        @opened="openedHandle"
+        @close="onClose">
+        <el-scrollbar>
+            <ja-form
+                ref="formRef"
+                :validator="validator"
+                :model="state">
+                <ja-form-item label="服务名称" prop="name" required>
+                    <ja-input v-focus :disabled="props.type==='update'"/>
+                </ja-form-item>
+                <ja-form-item label="服务说明" prop="description">
+                    <ja-input/>
+                </ja-form-item>
+                <ja-form-item label="服务基础包名" prop="basePackage" required
+                              label-remark="设置此服务的基础Java包名，用于代码生成">
+                    <ja-input/>
+                </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>
+
+<script setup lang="ts">
+import {computed, ref} from "vue";
+import {
+    type AceAxiosRequestConfig,
+    type AppService,
+    type CreateAppServiceCommand,
+    type UpdateAppServiceCommand,
+    useAppServiceApi,
+    useLoading,
+} from "@jari-ace/app-bolts";
+import {
+    JaForm,
+    JaFormItem,
+    JaInput,
+    JaButton,
+    useBackendValidations
+} from "@jari-ace/element-plus-component";
+
+type editorType = "create" | "update";
+const requestOption: AceAxiosRequestConfig = {}
+type Props = {
+    modelValue: boolean;
+    type: editorType;
+    appId: string;
+    data?: AppService | null;
+};
+
+// const systemStore = useSystemStore();
+const formRef = ref<typeof JaForm>();
+const props = defineProps<Props>();
+const emits = defineEmits(["update:modelValue", "success", "opened"]);
+const initData = (): CreateAppServiceCommand & UpdateAppServiceCommand => {
+    return {
+        appInstance: {id: props.appId},
+        basePackage: "",
+        dataVersion: 0,
+        description: "",
+        id: '0',
+        name: ""
+    }
+}
+const state = ref<{
+    formData: CreateAppServiceCommand & UpdateAppServiceCommand;
+    title: string;
+}>({
+    formData: {...initData()},
+    title: "",
+});
+
+const visible = computed({
+    get(): boolean {
+        return props.modelValue;
+    },
+    set(val: boolean) {
+        emits("update:modelValue", val);
+    },
+});
+
+const validator = useBackendValidations(Object.keys(initData()));
+const api = useAppServiceApi(validator.axios);
+const loading = useLoading(validator.axios)
+const submit = () => {
+    //判断当前组件类型   type 为 update 更新模式，为 create 创建模式
+    if (props.type === "update") {
+        formRef.value?.validate(() =>
+            api.update(state.value.formData as UpdateAppServiceCommand, requestOption)
+               .then(() => {
+                   emits("success");
+                   visible.value = false;
+               })
+        )
+    } else {
+        formRef.value?.validate(() =>
+            api.create(state.value.formData as CreateAppServiceCommand, requestOption)
+               .then(() => {
+                   emits("success");
+                   visible.value = false;
+               })
+        )
+    }
+}
+
+const init = () => {
+    //判断当前组件类型   type 为 update 更新模式，为 create 创建模式
+    if (props.type === "update") {
+        if (!props.data) {
+            throw new Error("未传入参数【data】");
+        }
+        //更新模式需要将数据回显
+        state.value.title = "修改应用服务";
+        api.getById(props.data.id)
+           .then(res => {
+               state.value.formData = {
+                   ...res,
+                   appInstance: {
+                       id: res.appInstance.id
+                   }
+               };
+           })
+    } else {
+        state.value.title = `创建应用服务`;
+        //创建模式重置表单
+        state.value.formData = initData();
+    }
+};
+
+const openedHandle = () => {
+    emits("opened");
+};
+
+function onClose() {
+    validator.axios.cancel(requestOption)
+}
+
+</script>
+
+<style scoped lang="scss">
+</style>

package/ace-app-manager-ui/src/views/appManage/thirdPartyAppAuth/ThirdPartyAppAuth.vue

@@ -0,0 +1,178 @@
+<template>
+    <app-manage-layout :body-scrollbar="false">
+        <template #title>
+            外部应用授权
+            <el-tooltip content="给外部应用服务账户授权">
+                <el-icon>
+                    <question-filled></question-filled>
+                </el-icon>
+            </el-tooltip>
+            <el-divider direction="vertical"/>
+            <select-realm-for-app v-model="realmId" :app-id="props.appId" style="width: 200px"></select-realm-for-app>
+        </template>
+        <template #body>
+            <div class="body">
+                <div class="left-pane">
+                    <el-table height="100%" :data="apps" highlight-current-row
+                              :header-row-style="{height: '48px'}"
+                              @current-change="onCurrentAppChange" ref="appTable">
+                        <el-table-column prop="name">
+                            <template #header>
+                                <el-text type="info">
+                                    <el-icon>
+                                        <CaretBottom></CaretBottom>
+                                    </el-icon>
+                                    外部应用
+                                </el-text>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </div>
+                <div class="right-pane">
+                    <div class="tools">
+                        <ja-button type="success" :icon="SaveOutlined" @click="onSaveClick"
+                                   tooltip="保存" :loading="loading" :disabled="loading"
+                                   shortcut="Alt+Enter">保存
+                        </ja-button>
+                        <div style="flex:auto">
+                            <el-text type="info">
+                                <el-icon>
+                                    <CaretBottom></CaretBottom>
+                                </el-icon>
+                                外部应用"{{ currentApp?.name }}"拥有的角色：
+                            </el-text>
+                        </div>
+                    </div>
+                    <RoleMultiSelector
+                        ref="roleTree"
+                        v-model="roles"
+                        :app-id="props.appId??'0'"
+                    />
+                </div>
+            </div>
+        </template>
+    </app-manage-layout>
+</template>
+
+<script setup lang="ts">
+import AppManageLayout from "@/views/appManage/components/AppManageLayout.vue";
+import SelectRealmForApp from "@/views/appManage/components/SelectRealmForApp.vue";
+import {CaretBottom, QuestionFilled} from "@element-plus/icons-vue";
+import {ref, watch} from "vue";
+import {
+    createAxiosWithoutCache,
+    type ProjectedExternalApp, type RoleReference,
+    useExternalAppApi, useLoading
+} from "@jari-ace/app-bolts";
+import {ElMessage, ElTable} from "element-plus";
+import {RoleMultiSelector} from "@/components/roleSelector";
+import {SaveOutlined} from "@ant-design/icons-vue";
+import {JaButton} from "@jari-ace/element-plus-component";
+
+const realmId = ref<string>();
+const axios = createAxiosWithoutCache();
+const api = useExternalAppApi(axios);
+const loading = useLoading(axios)
+const apps = ref<ProjectedExternalApp[]>([]);
+const currentApp = ref<ProjectedExternalApp>();
+const appTable = ref<InstanceType<typeof ElTable>>();
+const roles = ref<string[]>([]);
+let originalRoles: string[] = [];
+const roleTree = ref<InstanceType<typeof RoleMultiSelector>>();
+const props = defineProps<{
+    appId?: string
+}>()
+
+async function loadApps() {
+    if (!realmId.value) return;
+    apps.value = await api.getAllByRealm(realmId.value);
+    if (apps.value.length > 0) {
+        appTable.value?.setCurrentRow(apps.value[0]);
+    }
+}
+
+async function loadRoles() {
+    if (!props.appId || !currentApp.value) return;
+    roles.value = (
+        await api.getGrantedRoles(currentApp.value.id, props.appId)
+    ).map(r => r.id);
+    originalRoles = [...roles.value];
+}
+
+function onCurrentAppChange(val: ProjectedExternalApp | undefined) {
+    currentApp.value = val
+}
+
+async function onSaveClick() {
+    if (!currentApp.value || !roleTree.value) return;
+    const added = roles.value.filter(s => !originalRoles.some(r => r === s));
+    const removed = originalRoles.filter(r => !roles.value.some(s => r === s));
+    if (added.length == 0 && removed.length == 0) {
+        ElMessage.warning("外部应用授予的角色没有变化")
+        return;
+    }
+    if (added.length > 0) {
+        currentApp.value = await api.grantRole({
+            id: currentApp.value?.id,
+            roles: added,
+            dataVersion: currentApp.value.dataVersion
+        }, {
+            showSuccessMessage: false
+        })
+    }
+    if (removed.length > 0) {
+        currentApp.value = await api.revokeRole({
+            id: currentApp.value?.id,
+            roles: removed,
+            dataVersion: currentApp.value.dataVersion
+        }, {
+            showSuccessMessage: false
+        })
+    }
+    loadRoles();
+    ElMessage.success("保存成功");
+}
+
+watch(realmId, loadApps)
+
+watch(() => props.appId, loadRoles, {
+    immediate: true
+});
+
+watch(currentApp, loadRoles);
+</script>
+
+<style scoped>
+.body {
+    display: flex;
+    height: 100%;
+
+    .left-pane {
+        flex: 2 1;
+        border-right: solid 1px var(--el-border-color-light);
+        height: 100%;
+    }
+
+    .right-pane {
+        flex: 8 1;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .tools {
+        padding: 8px 8px;
+        width: 100%;
+        display: flex;
+        flex-direction: row-reverse;
+        gap: 8px;
+        border-bottom: solid 1px var(--el-border-color-light);
+
+        .el-button {
+            margin: 0 !important;
+        }
+    }
+}
+
+
+</style>

package/ace-app-manager-ui/src/views/appManage/types.ts

@@ -0,0 +1 @@
+export declare type EditorMode = 'create' | 'update';