ace-front-end 1.0.0

package/ace-app-manager-ui/src/components/pages/PageEnter.vue

@@ -0,0 +1,227 @@
+<template>
+    <div>
+        <el-container>
+            <el-header style="margin-top: -60px">
+                <div class="header">
+                    <div class="left-box">
+                        <img
+                            src="/image/pageEnter/four.png"
+                            style="height: 24px; width: 24px; margin-right: 10px"
+                        />
+                        <div class="left-font">
+                            <span>应用名称</span>
+                        </div>
+                    </div>
+                    <div class="right-box">
+                        <img
+                            src="/image/pageEnter/text.png"
+                            style="height: 18px; width: 21px; margin-right: 20px"
+                        />
+                        <img
+                            src="/image/pageEnter/set.png"
+                            style="height: 19px; width: 17px; margin-right: 20px"
+                        />
+                        <img
+                            src="/image/pageEnter/popularize.png"
+                            style="height: 18px; width: 18px; margin-right: 20px"
+                        />
+                        <img
+                            src="/image/pageEnter/name.png"
+                            style="height: 30px; width: 30px; vertical-align: -8%"
+                        />
+                    </div>
+                </div>
+            </el-header>
+            <el-main>
+                <div class="body">
+                    <el-row :gutter="24">
+                        <el-col :span="6">
+                            <el-card shadow="always" style="width: 330px; height: 720px">
+                                <div class="first-line">
+                                    <img
+                                        src="/image/pageEnter/develop.png"
+                                        style="height: 45px; width: 45px"
+                                    />
+                                    <div class="first-text">
+                                        <span style="margin-top: 20px">开发</span>
+                                    </div>
+                                </div>
+                                <div class="second-line">
+                                    <span>包含角色管理、数据源管理、低代码等模块...</span>
+                                </div>
+                                <div class="third-line">
+                                    <el-button style="width: 282px; height: 48px; color: black">
+                                        <img
+                                            src="/image/pageEnter/back.png"
+                                            style="height: 16px; width: 17px"
+                                        />
+                                        进入管理页面</el-button
+                                    >
+                                </div>
+                            </el-card>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-card shadow="always" style="width: 330px; height: 720px">
+                                <div class="first-line">
+                                    <img
+                                        src="/image/pageEnter/application.png"
+                                        style="height: 47px; width: 44px"
+                                    />
+                                    <div class="first-text">
+                                        <span style="margin-top: 20px">应用</span>
+                                    </div>
+                                </div>
+                                <div class="second-line">
+                                    <span>包含用户组管理、应用授权、工作流等模块...</span>
+                                </div>
+                                <div class="third-line">
+                                    <el-button style="width: 282px; height: 48px; color: black">
+                                        <img
+                                            src="/image/pageEnter/back.png"
+                                            style="height: 16px; width: 17px"
+                                        />
+                                        进入管理页面</el-button
+                                    >
+                                </div>
+                            </el-card>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-card shadow="always" style="width: 330px; height: 720px">
+                                <div class="first-line">
+                                    <img
+                                        src="/image/pageEnter/organization.png"
+                                        style="height: 48px; width: 46px"
+                                    />
+                                    <div class="first-text">
+                                        <span style="margin-top: 20px">组织</span>
+                                    </div>
+                                </div>
+                                <div class="second-line">
+                                    <span
+                                        >包含用户管理、部门管理、角色管理、用户组织管理、客户端管理、会话管理、工作台管理等模块...</span
+                                    >
+                                </div>
+                                <div class="third-line">
+                                    <el-button
+                                        style="
+                                            width: 282px;
+                                            height: 48px;
+                                            color: black;
+                                            margin-top: -25px;
+                                        "
+                                    >
+                                        <img
+                                            src="/image/pageEnter/back.png"
+                                            style="height: 16px; width: 17px"
+                                        />
+                                        进入管理页面</el-button
+                                    >
+                                </div>
+                            </el-card>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-card shadow="always" style="width: 330px; height: 720px">
+                                <div class="first-line">
+                                    <img
+                                        src="/image/pageEnter/audit.png"
+                                        style="height: 48px; width: 48px"
+                                    />
+                                    <div class="first-text">
+                                        <span style="margin-top: 20px">审计</span>
+                                    </div>
+                                </div>
+                                <div class="second-line">
+                                    <span>包含日志查看等模块...</span>
+                                </div>
+                                <div class="third-line">
+                                    <el-button
+                                        style="
+                                            width: 282px;
+                                            height: 48px;
+                                            color: black;
+                                            margin-top: 10px;
+                                        "
+                                    >
+                                        <img
+                                            src="/image/pageEnter/back.png"
+                                            style="height: 16px; width: 17px"
+                                        />
+                                        进入管理页面</el-button
+                                    >
+                                </div>
+                            </el-card>
+                        </el-col>
+                    </el-row>
+                </div>
+            </el-main>
+        </el-container>
+    </div>
+</template>
+<script lang="ts">
+import { ElCard } from "element-plus";
+import { defineComponent } from "vue";
+// import topBar from "./components/topBar.vue";
+export default defineComponent({
+    name: "pageEnter",
+    // components: {
+    //     topBar,
+    // },
+    setup() {
+        return {};
+    },
+    // components: { Menu },
+});
+</script>
+<style>
+.el-header {
+    /* background-color: #B3C0D1; */
+    /* color: #333; */
+    text-align: center;
+    line-height: 60px;
+    box-shadow: 2px 2px 15px rgb(208, 220, 241);
+}
+.el-main {
+    margin-left: 100px;
+}
+.header {
+    /* background-color: aqua; */
+    display: flex;
+    justify-content: space-between;
+    font-size: 16px;
+    font-weight: bold;
+
+    /* margin-top: 18px; */
+}
+.left-box {
+    line-height: 60px;
+}
+.left-font {
+    /* background-color: blue; */
+    line-height: 20px;
+    display: inline-block;
+    margin-top: 20px;
+    vertical-align: 30%;
+}
+.first-line {
+    /* display: inline-block; */
+    font-size: 28px;
+    font-weight: bold;
+    margin-top: 42px;
+    margin-left: -160px;
+    margin-bottom: 10px;
+}
+.first-text {
+    display: inline-block;
+    margin-left: 15px;
+    vertical-align: 30%;
+}
+.second-line {
+    text-align: left;
+    font-size: 15px;
+    font-weight: bold;
+}
+.third-line {
+    margin-top: 476px;
+    color: black;
+}
+</style>

package/ace-app-manager-ui/src/components/pages/components/topBar.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="top">
+        <div class="top-box" style="margin-bottom: 20px">
+            <div class="left-four">
+                <img
+                    src="/image/appEnter/four.png"
+                    style="height: 30px; width: 30px; margin: 10px 0 0 15px"
+                />
+                <img
+                    src="/image/appEnter/GotoCenter.png"
+                    style="height: 25px; width: 25px; margin-left: 15px"
+                />
+                <div class="text"><h4>工作台</h4></div>
+                <span></span>
+                <img
+                    src="/image/appEnter/right.png"
+                    style="height: 25px; width: 25px; margin-left: 15px"
+                />
+                <div class="text">
+                    <h4>应用名称</h4>
+                </div>
+            </div>
+            <div class="right-bar">
+                <img
+                    src="/image/appEnter/set.png"
+                    style="height: 25px; width: 25px; margin: 10px 0 0 15px"
+                />
+                <img
+                    src="/image/appEnter/popularize.png"
+                    style="height: 25px; width: 25px; margin-left: 15px"
+                />
+                <!-- <img src="/image/appEnter/GotoCenter.png" style="height: 25px; width: 25px" /> -->
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
+    name: "topBar",
+});
+</script>
+<style>
+.el-header {
+    /* background-color: #B3C0D1; */
+    /* color: #333; */
+    text-align: center;
+    line-height: 60px;
+    box-shadow: 2px 2px 15px rgb(208, 220, 241);
+}
+.el-main {
+    margin-left: 100px;
+}
+.header {
+    /* background-color: aqua; */
+    display: flex;
+    justify-content: space-between;
+    font-size: 16px;
+    font-weight: bold;
+
+    /* margin-top: 18px; */
+}
+.left-box {
+    line-height: 60px;
+}
+.left-font {
+    /* background-color: blue; */
+    line-height: 20px;
+    display: inline-block;
+    margin-top: 20px;
+    vertical-align: 30%;
+}
+.top-box {
+    height: 50px;
+    display: flex;
+    justify-content: space-between;
+    margin-top: -50px;
+    /* border-bottom: 1px solid black; */
+    box-shadow: 2px 2px 15px rgb(208, 220, 241);
+}
+
+.text {
+    /* background-color: aquamarine; */
+    height: 50px;
+    display: inline-block;
+    font-size: 18px;
+    align-items: center;
+    /* margin: 0 auto; */
+    /* vertical-align: top; */
+    margin-left: 10px;
+    margin-bottom: 100px;
+}
+</style>

package/ace-app-manager-ui/src/components/realmPicker/index.ts

@@ -0,0 +1,3 @@
+import RealmPickerSFC from "./src/RealmPicker.vue";
+
+export const RealmPicker = RealmPickerSFC;

package/ace-app-manager-ui/src/components/realmPicker/src/RealmPicker.vue

@@ -0,0 +1,194 @@
+<template>
+    <div class="realm-picker-sfc">
+        <el-select
+            size="default"
+            :multiple="props.multiple"
+            :loading="loading"
+            style="margin-right: 8px; flex: 1"
+            value-key="id"
+            v-model="realmId">
+            <el-option
+                v-for="realm in realms"
+                :key="realm.id"
+                :value="realm.id"
+                :label="((realm.caption && realm.caption.length > 0) ? realm.caption : realm.name)"
+            ></el-option>
+        </el-select>
+        <el-dropdown v-if="!props.multiple" size="default" @command="menuItemClick">
+            <el-button size="default" :icon="MoreFilled"></el-button>
+            <template #dropdown>
+                <el-dropdown-menu>
+                    <el-dropdown-item v-for="(value, key) in menuList" :key="key" :command="key">
+                        {{ value }}
+                    </el-dropdown-item>
+                </el-dropdown-menu>
+            </template>
+        </el-dropdown>
+        <Editor
+            v-model="state.editorVisible"
+            @success="editorSuccess"
+            :type="state.editorType"
+            :data="currentRealm"
+        />
+        <ElDialog v-model="state.deleteVisible"
+                  width="24%"
+                  @opened="onOpenDelDialog"
+                  title="删除用户域">
+            <el-alert type="warning" show-icon :closable="false">
+                <div class="delete-info">
+                    <h3>警告</h3>
+                    <p>删除用户域同时将删除所有用户域的关联数据，请输入用户域名以确认继续操作。</p>
+                </div>
+            </el-alert>
+            <ElForm label-position="top"
+                    style="margin-top: 12px"
+                    :model="state"
+                    @submit.prevent
+                    size="small">
+                <ElFormItem :label="`用户域名（${currentRealm?.name}）`" prop="deleteConfirmField"
+                            :rules="deleteFormRules">
+                    <ElInput v-model="state.deleteConfirmField" ref="inputConfirmDel"></ElInput>
+                </ElFormItem>
+            </ElForm>
+            <template #footer>
+                <ElButton
+                    size="default"
+                    :disabled="state.deleteConfirmField !== currentRealm?.name"
+                    type="danger"
+                    :loading="loading"
+                    @click="confirmDelete">
+                    确定
+                </ElButton>
+                <ElButton size="default" @click="state.deleteVisible = false">取消</ElButton>
+            </template>
+        </ElDialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {computed, reactive, ref} from "vue";
+import {type Realm, useLoading} from "@jari-ace/app-bolts";
+import {MoreFilled} from "@element-plus/icons-vue";
+import {useRealmApi} from "@jari-ace/app-bolts";
+import {useRealms} from "@/hooks/useRealms";
+import Editor from "./components/RealmEditor.vue";
+import {ElInput, ElNotification} from "element-plus";
+
+type MenuType = "create" | "update" | "delete";
+
+const menuList: { [K in MenuType]: string } = {
+    create: "新建用户域",
+    update: "修改用户域",
+    delete: "删除用户域",
+};
+const inputConfirmDel = ref<typeof ElInput>()
+const realmApi = useRealmApi();
+const { realms, getAllRealms } = useRealms();
+const props = withDefaults(
+    defineProps<{
+        modelValue?: string | string[];
+        multiple?: boolean;
+    }>(),
+    {
+        modelValue: ({multiple}) => {
+            return multiple ? [] : ''
+        },
+        multiple: false,
+    }
+);
+const loading = useLoading()
+const emits = defineEmits(["update:modelValue"]);
+const state = reactive<{
+    // realmList: Realm[];
+    editorVisible: boolean;
+    editorType: "create" | "update";
+    updateRealm: Realm | null;
+    deleteVisible: boolean;
+    deleteConfirmField: string;
+}>({
+    // realmList: [],
+    editorVisible: false,
+    editorType: "create",
+    updateRealm: null,
+    deleteVisible: false,
+    deleteConfirmField: "",
+});
+//vue3 computed get 返回的 ts 数据类型可能是两种
+const realmId = computed<string | string[]>({
+    get() {
+        return props.modelValue;
+    },
+    set(val: string | string[]) {
+        emits("update:modelValue", val);
+    },
+});
+
+const currentRealm = computed(() => {
+    return realms.value.find((realm) => realm.id === realmId.value);
+});
+
+// eslint-disable-next-line
+const deleteValidatePass = (rule: any, value: string, callback: any) => {
+    if (value === currentRealm.value?.name) {
+        callback();
+    } else {
+        callback(new Error("输入的用户域名不正确"));
+    }
+};
+
+const deleteFormRules = [{validator: deleteValidatePass, trigger: "blur"}];
+
+const menuItemClick = (command: MenuType) => {
+    if (command === "create") {
+        //新建
+        state.editorType = command;
+        state.editorVisible = true;
+    } else if (command === "update") {
+        //修改
+        state.editorType = command;
+        state.editorVisible = true;
+    } else {
+        //删除
+        if (currentRealm.value) {
+            state.deleteVisible = true;
+            state.deleteConfirmField = "";
+        }
+    }
+};
+
+const editorSuccess = () => {
+    getAllRealms();
+};
+
+const confirmDelete = () => {
+    if (currentRealm.value === undefined) return;
+    realmApi
+        .delete(currentRealm.value)
+        .then(() => {
+            state.deleteVisible = false;
+            ElNotification({
+                type: "success",
+                message: "用户域删除成功",
+            });
+            reloadAndFocusDefaultRealm()
+        });
+};
+
+async function reloadAndFocusDefaultRealm() {
+    await getAllRealms()
+    emits("update:modelValue", realms.value[0].id)
+}
+
+reloadAndFocusDefaultRealm()
+
+function onOpenDelDialog() {
+    inputConfirmDel.value?.focus()
+}
+</script>
+
+<style scoped lang="scss">
+.realm-picker-sfc {
+    width: 100%;
+    display: flex;
+}
+</style>

package/ace-app-manager-ui/src/components/realmPicker/src/components/RealmEditor.vue

@@ -0,0 +1,149 @@
+<template>
+    <ElDialog
+        width="25%"
+        class="realm-editor-sfc"
+        :title="state.title"
+        v-model="visible"
+        :draggable="true"
+        :destroy-on-close="true"
+        @close="onClosing"
+        @open="init">
+        <template #default>
+            <el-alert
+                type="info"
+                show-icon
+                :closable="false"
+                v-if="props.type === 'create'"
+                class="message-info">
+                <div class="delete-info">
+                    <p>用户域是用户管理的隔离单元，允许针对不同的用户群体实施不同的安全策略。</p>
+                </div>
+            </el-alert>
+            <ja-form
+                ref="formRef"
+                :validator="validator"
+                :model="state"
+                style="margin-top: 12px">
+                <ja-form-item label="名称" prop="name">
+                    <ja-input :disabled="props.type !== 'create'" v-focus/>
+                </ja-form-item>
+                <ja-form-item label="标题" prop="caption">
+                    <ja-input/>
+                </ja-form-item>
+            </ja-form>
+        </template>
+        <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>
+    </ElDialog>
+</template>
+
+<script setup lang="ts">
+import {computed, ref} from "vue";
+import {
+    type AceAxiosRequestConfig,
+    type CreateRealmCommand,
+    type UpdateRealmCommand,
+    useLoading,
+    useRealmApi
+} from "@jari-ace/app-bolts";
+import {useBackendValidations} from "@jari-ace/element-plus-component";
+import {onMounted} from "vue";
+import {JaForm, JaFormItem, JaInput, JaButton} from "@jari-ace/element-plus-component";
+import {ElInput} from "element-plus";
+
+type editorType = "create" | "update";
+
+type Props = {
+    modelValue: boolean;
+    type: editorType;
+    data?: CreateRealmCommand & UpdateRealmCommand;
+};
+const formRef = ref<typeof JaForm>();
+const props = defineProps<Props>();
+const emits = defineEmits(["update:modelValue", "success"]);
+const formData: CreateRealmCommand & UpdateRealmCommand = {
+    id: '0',
+    name: "",
+    caption: "",
+    dataVersion: 0
+};
+const state = ref<{
+    formData: CreateRealmCommand & UpdateRealmCommand
+    title: string
+}>({
+    formData: formData,
+    title: "",
+});
+const validator = useBackendValidations(Object.keys(formData));
+const realmApi = useRealmApi(validator.axios);
+const loading = useLoading(validator.axios);
+const visible = computed({
+    get(): boolean {
+        return props.modelValue;
+    },
+    set(val: boolean) {
+        emits("update:modelValue", val);
+    },
+});
+let requestConfig: AceAxiosRequestConfig
+
+onMounted(() => {
+    formRef.value?.elForm?.resetFields();
+});
+
+const submit = () => {
+    requestConfig = {}
+    //判断当前组件类型   type 为 update 更新模式，为 create 创建模式
+    if (props.type === "create") {
+        formRef.value?.validate(() => {
+            return realmApi
+                .create({
+                    caption: state.value.formData.caption,
+                    name: state.value.formData.name,
+                }, requestConfig)
+                .then(() => {
+                    emits("success");
+                    visible.value = false;
+                })
+        })
+    } else {
+        formRef.value?.validate(() => {
+            return realmApi
+                .update({
+                    caption: state.value.formData.caption,
+                    id: state.value.formData.id,
+                    dataVersion: state.value.formData.dataVersion,
+                }, requestConfig)
+                .then(() => {
+                    emits("success");
+                    visible.value = false;
+                })
+        })
+    }
+};
+
+function onClosing() {
+    validator.axios.cancel(requestConfig)
+}
+
+const init = () => {
+    //判断当前组件类型   type 为 update 更新模式，为 create 创建模式
+    if (props.type === "create") {
+        //创建模式重置表单
+        state.value.formData = {...formData};
+        state.value.title = "创建用户域";
+    } else {
+        //更新模式需要将数据回显
+        state.value.title = `修改用户域`;
+        if (props.data) {
+            state.value.formData = {...props.data};
+        }
+    }
+};
+</script>
+
+<style scoped lang="scss"></style>

package/ace-app-manager-ui/src/components/roleSelector/index.ts

@@ -0,0 +1,3 @@
+import RoleMultiSelectorVue from "./src/RoleMultiSelector.vue";
+
+export const RoleMultiSelector = RoleMultiSelectorVue;