ace-front-end 1.0.0

package/ace-app-manager-ui/src/components/roleSelector/src/RoleMultiSelector.vue

@@ -0,0 +1,194 @@
+<template>
+    <div class="select-role-by-app-sfc">
+        <el-tree
+            :data="state.roles"
+            class="role-tree"
+            default-expand-all
+            ref="treeRef"
+            show-checkbox
+            check-descendants
+            node-key="id"
+            :expand-on-click-node="false"
+            check-on-click-node
+            :default-checked-keys="modelValue"
+            @check="rolesCheckChange"
+            :props="{
+                class: () => 'custom-node-style',
+                disabled: isDisabledHandle,
+            }">
+            <template #default="{ data }">
+                <div class="tree-node">
+                    <span v-if="showField!=='name'" class="label">{{ data.caption }}</span>
+                    <span v-if="showField!=='caption'" class="name">{{ data.name }}</span>
+                </div>
+            </template>
+        </el-tree>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {reactive, computed, ref, onMounted, watch, nextTick} from "vue";
+import {useRoleApi, type ProjectedRole} from "@jari-ace/app-bolts";
+import {type CheckedInfo, ElTree} from "element-plus";
+import {debounce} from "lodash-es";
+
+interface Props {
+    modelValue: string[];
+    title?: string;
+    disabled?: string[];
+    appId: string;
+    //重点显示
+    showField?: "name" | "caption" | "all"
+    category?: string
+    global?: boolean
+}
+
+const roleApi = useRoleApi();
+
+const props = withDefaults(defineProps<Props>(), {
+    allowCancelChecked: true,
+    title: "选择角色",
+    disabled: () => [],
+    showField: "all"
+});
+
+const emits = defineEmits<{
+    (e: "update:modelValue", value: string[]): void;
+}>();
+
+//定义数据类型
+const treeRef = ref<InstanceType<typeof ElTree>>();
+
+const state = reactive<{
+    loading: boolean;
+    currentPage: number;
+    total: number;
+    pageSize: number;
+    roles: ProjectedRole[];
+}>({
+    pageSize: 10,
+    currentPage: 1,
+    total: 0,
+    loading: false,
+    roles: [],
+});
+
+const modelValue = computed<string[]>({
+    get() {
+        return props.modelValue;
+    },
+    set(val) {
+        emits("update:modelValue", val);
+    },
+});
+
+/**
+ * 角色复选框发生改变
+ */
+const rolesCheckChange = (_node: any, checkedInfo: CheckedInfo) => {
+    const nodes = checkedInfo.checkedKeys
+    modelValue.value = nodes as string[];
+};
+
+/**
+ * 初始化方法
+ */
+const init = () => {
+    console.log("role selector initing....")
+    state.loading = true;
+    getRolesByAppId();
+    state.loading = false;
+    selectRoleByIds(props.modelValue);
+};
+
+const getRolesByAppId = async () => {
+    if (!props.appId) {
+        state.roles = []
+        return;
+    }
+    if (props.global) {
+        state.roles = await roleApi.getAllRole(props.appId);
+    } else {
+        state.roles = await roleApi.getByCategoryWithChildren(props.appId, props.category)
+    }
+    selectRoleByIds(props.modelValue);
+};
+
+const selectRoleByIds = (roles: string[]) => {
+    //清除所有已选择
+    treeRef.value!.setCheckedKeys([], false);
+    //选择角色
+    treeRef.value!.setCheckedKeys(roles, false);
+};
+
+const isDisabledHandle = (data: { [key: string]: any }) => {
+    return !!props.disabled.find((item) => item === data.id);
+};
+
+const debounceInit = debounce(init, 100);
+
+watch(
+    () => (
+        {
+            appId: props.appId,
+            category: props.category
+        }
+    ),
+    () => {
+        debounceInit();
+    }, {
+        immediate: true,
+        deep: true,
+    }
+);
+
+watch(
+    () => props.modelValue,
+    () => {
+        selectRoleByIds(props.modelValue);
+    }
+);
+
+defineExpose({
+    selectRoleByIds,
+    elTree: treeRef
+});
+</script>
+
+<style scoped lang="scss">
+.select-role-by-app-sfc {
+    .header {
+        display: flex;
+        align-items: center;
+    }
+
+    :deep(.role-tree) {
+        .custom-node-style {
+            .el-tree-node__content {
+                height: 40px;
+            }
+        }
+    }
+
+    .tree-node {
+        display: flex;
+        flex: 1;
+        gap: 36px;
+        overflow: hidden;
+        justify-content: space-between;
+        padding-right: 16px;
+
+        .name {
+
+        }
+
+        .label {
+            color: var(--el-text-color-regular);
+        }
+
+        .name {
+            color: var(--el-text-color-primary);
+        }
+    }
+}
+</style>

package/ace-app-manager-ui/src/components/settingValueEditor/ValueEditor.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import {type Component, markRaw, ref} from 'vue'
+import {
+    JaButton,
+    JaEnumListRaw,
+    JaMapItemListRaw,
+    JaNumberListRaw,
+    JaStringListRaw
+} from "@jari-ace/element-plus-component";
+import {
+    useAppSettingApi,
+    useLoading,
+    type UpdateAppSettingValueCommand
+} from "@jari-ace/app-bolts";
+import type {GroupedSetting} from "@/views/globalManage/globalSetting/types";
+import {ElDatePicker, ElInput, ElInputNumber, ElSelect, ElSwitch} from "element-plus";
+
+const visible = ref(false);
+const loading = useLoading();
+const props = defineProps<{
+    setting?: GroupedSetting
+}>();
+const state = ref<{
+    compType?: Component,
+    compProps: object,
+    value?: unknown
+}>({
+    compProps: {}
+})
+const api = useAppSettingApi();
+const emits = defineEmits(["success"]);
+
+function onOpen() {
+    const s = props.setting?.setting;
+    if (!s) {
+        state.value.compType = undefined;
+        return;
+    }
+    if (s.multiValued) {
+        switch (s.dataType) {
+            case "String":
+                state.value.compType = markRaw(JaStringListRaw);
+                state.value.compProps = {};
+                state.value.value = (
+                    !s.listValues || s.listValues.length == 0
+                ) ? [""] : s.listValues;
+                break;
+            case "Long":
+            case "Integer":
+                state.value.compType = markRaw(JaNumberListRaw);
+                state.value.compProps = {};
+                state.value.value = (
+                    !s.listValues || s.listValues.length == 0
+                ) ? [0] : s.listValues;
+                break;
+            case "Decimal":
+                state.value.compType = markRaw(JaNumberListRaw);
+                state.value.compType = {
+                    precision: 2,
+                    step: 0.1
+                };
+                state.value.value = (
+                    !s.listValues || s.listValues.length == 0
+                ) ? [0] : s.listValues;
+                break;
+            case "Enum":
+                state.value.compType = markRaw(JaEnumListRaw);
+                state.value.compProps = {
+                    enumValues: s.enumValues
+                }
+                state.value.value = (
+                    !s.listValues || s.listValues.length == 0
+                ) ? [""] : s.listValues;
+                break;
+        }
+    } else if (s.valueWithKey) {
+        state.value.compType = markRaw(JaMapItemListRaw);
+        state.value.compProps = {
+            enumValues: s.enumValues,
+            valueType: s.dataType
+        }
+        state.value.value = s.mapValues ? s.mapValues : {"": ""};
+    } else {
+        switch (s.dataType) {
+            case "Boolean":
+                state.value.compType = markRaw(ElSwitch);
+                state.value.compProps = {};
+                break;
+            case "DATE":
+                state.value.compType = markRaw(ElDatePicker);
+                state.value.compProps = {type: "date"};
+                break;
+            case "Decimal":
+                state.value.compType = markRaw(ElInputNumber);
+                state.value.compProps = {
+                    precision: 2,
+                    step: 0.1
+                }
+                break;
+            case "String":
+                state.value.compType = markRaw(ElInput);
+                state.value.compProps = {};
+                break;
+            case "Integer":
+            case "Long":
+                state.value.compType = markRaw(ElInputNumber);
+                state.value.compProps = {};
+                break;
+            case "TIMESTAMP":
+                state.value.compType = markRaw(ElDatePicker);
+                state.value.compProps = {type: "datetime"};
+                break;
+            case "Enum":
+                state.value.compType = markRaw(ElSelect);
+                state.value.compProps = {};
+        }
+        state.value.value = s.value;
+    }
+}
+
+function submit() {
+    const s = props.setting!.setting!
+    const cmd: UpdateAppSettingValueCommand = {
+        id: s.id,
+        value: s.multiValued || s.valueWithKey ? undefined : state.value.value as string,
+        listValues: s.multiValued ? state.value.value as string[] : undefined,
+        mapValues: s.valueWithKey ? state.value.value as Record<string, string> : undefined,
+        dataVersion: s.dataVersion
+    }
+    api.updateValue([cmd]).then(() => {
+        emits("success");
+        visible.value = false;
+    })
+}
+
+defineExpose({
+    show() {
+        visible.value = true;
+    }
+})
+</script>
+
+<template>
+    <el-dialog destroy-on-close v-model="visible" title="修改配置值"
+               width="360px" draggable @open="onOpen">
+        <el-scrollbar max-height="560px">
+            <el-form label-position="top" size="small">
+                <el-form-item label="配置项名">
+                    <el-text type="info">{{ props.setting?.name }}</el-text>
+                </el-form-item>
+                <el-form-item label="配置说明">
+                    <el-text type="info">{{ props.setting?.description }}</el-text>
+                </el-form-item>
+                <el-form-item label="配置值">
+                    <component :is="state.compType" v-model="state.value"
+                               v-bind="state.compProps">
+                        <template v-if="props.setting?.setting?.dataType === 'Enum'" #default>
+                            <el-option
+                                v-for="k in Object.keys(props.setting?.setting?.enumValues as object)"
+                                :key="k" :label="k"
+                                :value="(props.setting?.setting?.enumValues?? {})[k] ?? ''">
+                            </el-option>
+                        </template>
+                    </component>
+                </el-form-item>
+            </el-form>
+        </el-scrollbar>
+
+        <template #footer>
+            <ja-button size="default" type="primary" @click="submit" :loading="loading"
+                       shortcut="Alt+Enter">确定
+            </ja-button>
+            <ElButton size="default" @click="visible = false">取消</ElButton>
+        </template>
+    </el-dialog>
+</template>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -0,0 +1,3 @@
+import SubPageSFC from './src/SubPage.vue';
+
+export const SubPage = SubPageSFC;

package/ace-app-manager-ui/src/components/subPage/src/SubPage.vue

@@ -0,0 +1,90 @@
+<template>
+    <div class="sub-page-sfc">
+        <div class="sub-page__header">
+            <div class="left-box">
+                <div class="go-back">
+                    <ElButton size="default" :icon="ArrowLeft" @click="goBack">返回</ElButton>
+                </div>
+                <el-divider direction="vertical"/>
+                <div class="title">
+                    {{ props.title }}
+                </div>
+            </div>
+
+            <div class="right-box">
+                <slot name="tools"></slot>
+            </div>
+        </div>
+        <div class="sub-page__body" :style="bodyStyle">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {ArrowLeft} from '@element-plus/icons-vue';
+import {type RouteLocationRaw, useRouter} from 'vue-router';
+import {type CSSProperties} from 'vue';
+
+interface Props {
+    title: string;
+    route: RouteLocationRaw;
+    bodyStyle?: CSSProperties;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    title: '标题',
+});
+
+const router = useRouter();
+
+const goBack = () => {
+    router.push(props.route);
+};
+</script>
+
+<style scoped lang="scss">
+.sub-page-sfc {
+    width: 100%;
+    height: 100%;
+
+    .sub-page__header {
+        height: 56px;
+        display: flex;
+        padding: 0 10px;
+        align-content: center;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+
+        .left-box {
+            height: 100%;
+            flex: 1;
+            display: flex;
+            align-items: center;
+
+            .title {
+                margin-left: 10px;
+                font-size: 16px;
+                color: #272e35;
+            }
+
+            .go-back {
+                margin-right: 10px;
+            }
+        }
+
+        .right-box {
+            height: 100%;
+            flex: 1;
+            display: flex;
+            align-items: center;
+            flex-direction: row-reverse;
+        }
+    }
+
+    .sub-page__body {
+        width: 100%;
+        padding: 8px 12px;
+        height: calc(100% - 56px);
+    }
+}
+</style>

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

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

package/ace-app-manager-ui/src/components/userGroupSelector/src/UserGroupMultiSelector.vue

@@ -0,0 +1,131 @@
+<template>
+    <div class="user-group-tree-selector">
+        <el-tree
+            ref="treeRef"
+            :data="userGroups"
+            size="default"
+            default-expand-all
+            show-checkbox
+            check-on-click-node
+            check-strictly
+            :expand-on-click-node="false"
+            class="user-group-tree"
+            @check="checkChange"
+            node-key="id"
+            :props="{
+                class: () => 'custom-node-style',
+            }">
+            <template #default="{ data }">
+                <div class="tree-node">
+                    <div class="name">{{ data.label }} <el-tag v-if="data.resourceScoped" type="info">资源域</el-tag></div>
+                </div>
+            </template>
+        </el-tree>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {watch, ref, onMounted, computed} from "vue";
+import {type CheckedInfo, ElTree} from "element-plus";
+import {type TreeNodeType, useGroups, useTreeData} from "@jari-ace/element-plus-component";
+import {debounce} from "lodash-es";
+
+const props = defineProps<{
+    appId?: string;
+    realmId?: string;
+    category?: string;
+    modelValue: string[];
+}>();
+const userGroups = ref<TreeNodeType[]>([])
+const {getGroups} = useGroups();
+//定义数据类型
+const treeRef = ref<InstanceType<typeof ElTree>>();
+
+const emits = defineEmits<{
+    (e: "update:modelValue", val: string[]): void;
+}>();
+
+const groups = computed<string[]>({
+    get() {
+        return props.modelValue;
+    },
+    set(val) {
+        emits("update:modelValue", val);
+    },
+});
+const init = async () => {
+    let realmId = props.realmId
+    if (!realmId) {
+        return
+    }
+    if (!props.appId) {
+        return;
+    }
+    userGroups.value = useTreeData(await getGroups(props.appId, realmId, props.category), "name");
+};
+
+/**
+ * 复选框发生改变
+ * @param role
+ * @param checked
+ * @param subNodeHasChecked
+ */
+const checkChange = (_data: unknown, checkedInfo: CheckedInfo) => {
+    // console.log(123, checkedKeys);
+    groups.value = checkedInfo.checkedKeys as string[];
+};
+
+const debounceInit = debounce(init, 200)
+
+watch(
+    () => ({
+        appId: props.appId,
+        realmId: props.realmId,
+        category: props.category,
+    }),
+    debounceInit,
+    {
+        immediate: true,
+        deep: true,
+    }
+);
+
+watch(
+    () => props.modelValue,
+    () => {
+        treeRef.value?.setCheckedKeys(props.modelValue);
+    }
+);
+
+defineExpose({
+    // setCurrent,
+    init,
+});
+</script>
+
+<style scoped lang="scss">
+.user-group-tree-selector {
+    .realm-picker-box {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        height: 100%;
+        padding: 12px 16px 0 16px;
+
+        .label {
+            color: var(--el-text-color-regular);
+            font-size: 14px;
+            white-space: nowrap;
+            margin-right: 8px;
+        }
+    }
+
+    :deep(.user-group-tree) {
+        .custom-node-style {
+            .el-tree-node__content {
+                height: 40px;
+            }
+        }
+    }
+}
+</style>

package/ace-app-manager-ui/src/hooks/useAppState.ts

@@ -0,0 +1,31 @@
+/**
+ * 获取应用是否处于本地开发模式
+ */
+let getAppDevMode: (appId: string) => boolean | undefined;
+/**
+ * 设置应用的本地开发模式状态
+ */
+let setAppDevMode: (appId: string, isDev: boolean) => void;
+
+export function setupAppState(state: {
+    getAppDevMode: (appId: string) => boolean | undefined;
+    setAppDevMode: (appId: string, isDev: boolean) => void;
+}) {
+    getAppDevMode = state.getAppDevMode;
+    setAppDevMode = state.setAppDevMode;
+}
+
+export function useAppState() {
+    return {
+        getAppDevMode(appId: string) {
+            if (!getAppDevMode) {
+                return false
+            }
+            return getAppDevMode(appId);
+        },
+        setAppDevMode: (appId: string, isDev: boolean) => {
+            if (!setAppDevMode) return;
+            setAppDevMode(appId, isDev);
+        }
+    }
+}

package/ace-app-manager-ui/src/hooks/useDateFormats.ts

@@ -0,0 +1,34 @@
+import {ref} from "vue";
+
+export interface DateFormat {
+    value: string
+}
+const dateFormats = ref<DateFormat[]>([
+    {value: 'yyyy'},
+    {value: 'yyyy-MM'},
+    {value: 'yyyy-MM-dd'},
+    {value: 'yyyy-MM-dd HH:mm:ss'},
+    {value: 'HH:mm:ss'},
+    {value: 'HH:mm'},
+    {value: 'MM-dd'}
+])
+
+const createFilter = (queryString: string) => {
+    return (restaurant: DateFormat) => {
+        return (
+            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+        )
+    }
+}
+/**
+ * 创建日期格式的自动补全选项
+ * @param queryString
+ * @param cb
+ */
+export const useDateFormatQuery = (queryString: string, cb: any) => {
+    const results = queryString
+        ? dateFormats.value.filter(createFilter(queryString))
+        : dateFormats.value
+    // call callback function to return suggestions
+    cb(results)
+}

package/ace-app-manager-ui/src/hooks/usePageSize.ts

@@ -0,0 +1 @@
+export const pageSizes = [10, 20, 50, 100, 200, 300]

package/ace-app-manager-ui/src/hooks/useRealms.ts

@@ -0,0 +1,27 @@
+/**
+ * 用户域列表
+ */
+import {ref} from 'vue';
+import {type AceAxiosRequestConfig, useRealmApi} from '@jari-ace/app-bolts';
+import type {Realm} from '@jari-ace/app-bolts';
+
+const realms = ref<Realm[]>([]);
+
+export function useRealms() {
+    const realmApi = useRealmApi();
+    const getAllRealms = async () => {
+        const config = {} as AceAxiosRequestConfig
+        realms.value = await realmApi.getAll(config);
+    };
+
+    const getDefaultRealm = async () => {
+        await getAllRealms()
+        return realms.value.find(r => r.name === 'ace-platform')
+    }
+
+    return {
+        realms,
+        getAllRealms,
+        getDefaultRealm
+    };
+}