ace-front-end 1.0.0

package/ace-app-manager-ui/src/views/globalManage/userManage/components/PasswordEditor.vue

@@ -0,0 +1,107 @@
+<template>
+    <ElDialog width="30%" title="重置密码" v-model="visible" @open="init" destroy-on-close
+              draggable>
+        <ElForm
+            ref="formRef"
+            :model="formData"
+            label-position="top">
+            <ElFormItem label="新密码" prop="password"
+                        :rules="{required: true, message:'不能为空'}">
+                <ElInput
+                    type="password"
+                    v-model="formData.password"
+                    autocomplete="off"
+                    v-focus
+                />
+            </ElFormItem>
+            <ElFormItem label="确认新密码" prop="password" :rules="confirmPasswordRules">
+                <ElInput v-model="formData.confirmPassword" autocomplete="off" type="password"/>
+            </ElFormItem>
+        </ElForm>
+        <template #footer>
+            <ja-button size="default" type="primary" @click="submit" :loading="loading"
+                       :disabled="loading"
+                       shortcut="Alt+Enter">确定
+            </ja-button>
+            <ElButton size="default" @click="visible = false">取消</ElButton>
+        </template>
+    </ElDialog>
+</template>
+
+<script setup lang="ts">
+import {computed, reactive, ref} from "vue";
+import {useUserApi, useLoading} from "@jari-ace/app-bolts";
+import type {FormInstance} from "element-plus";
+import {JaButton} from "@jari-ace/element-plus-component";
+
+type Props = {
+    modelValue: boolean;
+    users: string[];
+};
+
+const userApi = useUserApi();
+const loading = useLoading();
+const formRef = ref<FormInstance>();
+
+const props = defineProps<Props>();
+
+const emits = defineEmits(["update:modelValue", "success"]);
+
+const confirmPasswordRules = [
+    {required: true, message: "确认密码不能为空"},
+    {
+        // eslint-disable-next-line
+        validator: (_rule: any, _valu: any, callback: any) => {
+            if (formData.password !== formData.confirmPassword) {
+                callback(new Error("密码与确认密码不符"));
+            } else {
+                callback();
+            }
+        },
+        trigger: "blur",
+    },
+];
+
+const formData = reactive<{
+    password: string;
+    confirmPassword: string;
+}>({
+    password: "",
+    confirmPassword: "",
+});
+
+const visible = computed({
+    get(): boolean {
+        return props.modelValue;
+    },
+    set(val: boolean) {
+        emits("update:modelValue", val);
+    },
+});
+
+const submit = () => {
+    formRef.value?.validate((valid) => {
+        if (valid) {
+            userApi
+                .resetPassword(
+                    props.users.map((userId) => (
+                        {
+                            id: userId,
+                            password: formData.password,
+                        }
+                    )))
+                .then(() => {
+                    emits("success");
+                    visible.value = false;
+                });
+        }
+    });
+};
+
+const init = () => {
+    formRef.value?.resetFields();
+    //判断当前组件类型   type 为 update 更新模式，为 create 创建模式
+};
+</script>
+
+<style scoped lang="scss"></style>

package/ace-app-manager-ui/src/views/home/Index.vue

@@ -0,0 +1,457 @@
+<template>
+    <div class="home-page">
+        <div class="header">
+            <div class="left">欢迎使用杰瑞鲲舟应用开发平台</div>
+            <div class="right">
+                <ul class="menu">
+                    <li
+                        v-for="(menuitem, index) in menuList"
+                        :key="index"
+                        v-auth.any="menuitem.auth"
+                        @click="onMenuClick(menuitem)">
+                        <i :class="menuitem.icon"></i>
+                        {{ menuitem.name }}
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <el-scrollbar class="body">
+            <el-row>
+                <el-col>
+                    <AppManage/>
+                </el-col>
+            </el-row>
+            <ul class="count-box">
+                <li>
+                    <el-card style="height: 100%" @click="forwardToSessionManage" shadow="hover"
+                             class=" redirect">
+                        <div class="count-item">
+                            <div class="module-title">
+                                <i class="ri-group-line"></i>
+                                <span>会话数/总用户数</span>
+                                <ja-button link :icon="Refresh" :loading="sessionLoading"
+                                           tooltip="刷新"
+                                           @click.prevent="loadUserSessionCount"></ja-button>
+                            </div>
+                            <div class="content">{{ state.sessionCount }} / {{ state.userCount }}
+                                人
+                            </div>
+                        </div>
+                    </el-card>
+                </li>
+                <li>
+                    <el-card style="height: 100%" shadow="hover">
+                        <div class="count-item">
+                            <div class="module-title">
+                                <i class="ri-instance-line"></i>
+                                <span>在线服务实例数/服务总数</span>
+                                <ja-button link :icon="Refresh" :loading="serviceLoading"
+                                           tooltip="刷新"
+                                           @click.prevent="loadOnlineServiceCount"></ja-button>
+                            </div>
+                            <div class="content">{{ state.onlineServiceInstanceCount }} /
+                                {{ state.serviceCount }} 个
+                            </div>
+                        </div>
+                    </el-card>
+                </li>
+                <li>
+                    <el-card style="height: 100%" shadow="hover">
+                        <div class="count-item">
+                            <div class="module-title">
+                                <i class="ri-organization-chart"></i>
+                                在用部门
+                            </div>
+                            <div class="content">35 个</div>
+                        </div>
+                    </el-card>
+                </li>
+                <li>
+                    <el-card style="height: 100%" shadow="hover">
+                        <div class="count-item">
+                            <div class="module-title">
+                                <i class="ri-global-line"></i>
+                                全局用户组
+                            </div>
+                            <div class="content">25 个</div>
+                        </div>
+                    </el-card>
+                </li>
+                <li>
+                    <el-card style="height: 100%" shadow="hover">
+                        <div class="count-item">
+                            <div class="module-title">
+                                <i class="ri-git-repository-commits-line"></i>
+                                库存文件
+                            </div>
+                            <div class="content">1655万+ / 1.6T</div>
+                        </div>
+                    </el-card>
+                </li>
+            </ul>
+            <ul class="count-box">
+                <li class="log-count count-item" style="width: calc(20% - 8px)">
+                    <el-card style="height: 100%" shadow="hover" class=" redirect">
+                        <div class="count-item">
+                            <div class="module-title">
+                                <i class="ri-hard-drive-2-line"></i>
+                                <span>日志容量</span>
+                                <ja-button link :icon="Refresh" :loading="auditLogLoading"
+                                           tooltip="刷新"
+                                           @click.prevent="loadLogCount"></ja-button>
+                            </div>
+                            <div class="content">
+                                <el-progress type="dashboard"
+                                             :color="getProgressColors()"
+                                             :percentage="state.logUsedPercent">
+                                    <template #default="{ percentage }">
+                                        <div
+                                            style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
+                                            <span class="percentage-value">{{ percentage }}%</span>
+                                            <span class="percentage-label">{{
+                                                    state.logCount
+                                                }}条</span>
+                                        </div>
+                                    </template>
+                                </el-progress>
+                            </div>
+                        </div>
+                    </el-card>
+                </li>
+                <li class="audit-count count-item" style="flex: 1">
+                    <el-card style="height: 100%" shadow="hover">
+                        <div class="count-item">
+                            <div class="module-title">
+                                <i class="ri-menu-search-line"></i>
+                                审计事件统计
+                                <el-dropdown split-button style="margin-left: 12px">
+                                    本周
+                                    <template #dropdown>
+                                        <el-dropdown-menu>
+                                            <el-dropdown-item>本周</el-dropdown-item>
+                                            <el-dropdown-item>本月</el-dropdown-item>
+                                            <el-dropdown-item>近三月</el-dropdown-item>
+                                            <el-dropdown-item>半年</el-dropdown-item>
+                                        </el-dropdown-menu>
+                                    </template>
+                                </el-dropdown>
+                            </div>
+                            <div class="content">
+                                <div style="width: 100%">
+                                    <el-row :gutter="8">
+                                        <el-col :span="8">
+                                            <el-alert type="error" show-icon :closable="false">
+                                                <div class="audit-text-box">
+                                                    <span>异常</span>
+                                                    10条
+                                                </div>
+                                            </el-alert>
+                                        </el-col>
+                                        <el-col :span="8">
+                                            <el-alert type="warning" show-icon
+                                                      :closable="false">
+                                                <div class="audit-text-box">
+                                                    <span>异常</span>
+                                                    658条
+                                                </div>
+                                            </el-alert>
+                                        </el-col>
+                                        <el-col :span="8">
+                                            <el-alert type="info" show-icon :closable="false">
+                                                <div class="audit-text-box">
+                                                    <span>信息</span>
+                                                    2000356条
+                                                </div>
+                                            </el-alert>
+                                        </el-col>
+                                    </el-row>
+                                </div>
+                            </div>
+                        </div>
+                    </el-card>
+                </li>
+            </ul>
+            <FileRepositoryManage/>
+        </el-scrollbar>
+
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {useRouter} from "vue-router";
+import AppManage from "./components/AppManage.vue";
+import FileRepositoryManage from "./components/FileRepositoryManage.vue";
+import {menuList, type MenuItem} from "@/assets/baseData/GlobalManageMenu";
+import {useRealms} from "@/hooks/useRealms";
+import {computed, onMounted, onUnmounted, ref} from "vue";
+import {JaButton} from "@jari-ace/element-plus-component";
+import {
+    createAxiosWithoutCache, type ProjectedFileStorage,
+    useAppServiceApi, useAuditLogApi,
+    useLoading,
+    useSessionApi,
+    useUserApi
+} from "@jari-ace/app-bolts";
+import {Refresh} from "@element-plus/icons-vue";
+
+const router = useRouter();
+const {realms, getAllRealms} = useRealms();
+const onMenuClick = async (menuInfo: MenuItem) => {
+    //判断用户域是否获取
+    if (realms.value.length === 0) {
+        await getAllRealms();
+    }
+
+    console.log(realms.value)
+    await router.push({
+        name: menuInfo.path,
+        params: {
+            realmId: realms.value[0].id,
+        },
+    });
+    // router.push(menuInfo.path);
+};
+
+function forwardToSessionManage() {
+    onMenuClick(menuList[5]);
+}
+
+const state = ref({
+    userCount: 0,
+    sessionCount: 0,
+    onlineServiceInstanceCount: 0,
+    serviceCount: 0,
+    logCount: 0,
+    maxLogCount: 100,
+    logUsedPercent: 0,
+})
+
+const sessionAxios = createAxiosWithoutCache();
+const userApi = useUserApi(sessionAxios);
+const sessionApi = useSessionApi(sessionAxios);
+const sessionLoading = useLoading(sessionAxios);
+
+const serviceAxios = createAxiosWithoutCache();
+const serviceApi = useAppServiceApi(serviceAxios);
+const serviceLoading = useLoading(serviceAxios);
+
+const logAxios = createAxiosWithoutCache();
+const auditLogApi = useAuditLogApi(logAxios);
+const auditLogLoading = useLoading(logAxios);
+
+const axiosOptions = {
+    showSuccessMessage: false,
+    showApiErrorMessage: false
+}
+
+function loadUserSessionCount(evt?: Event) {
+    userApi.getTotalCount(axiosOptions).then(c => state.value.userCount = c);
+    sessionApi.getCount(axiosOptions).then(c => state.value.sessionCount = c);
+    if (evt) evt.stopPropagation();
+}
+
+function loadOnlineServiceCount(evt?: Event) {
+    serviceApi.getCount(axiosOptions).then(c => {
+        state.value.onlineServiceInstanceCount = c[0];
+        state.value.serviceCount = c[1];
+    });
+    if (evt) evt.stopPropagation();
+}
+
+function loadLogCount(evt?: Event) {
+    auditLogApi.getCount(axiosOptions).then(c => {
+        state.value.logCount = c[0];
+        state.value.maxLogCount = c[1];
+        state.value.logUsedPercent = Math.round(c[0] / c[1] * 1000) / 10
+    })
+}
+
+function getProgressColors() {
+    return [{
+        color: 'var(--el-color-success)', percentage: 70
+    }, {
+        color: 'var(--el-color-warning)', percentage: 90
+    }, {
+        color: 'var(--el-color-danger)', percentage: 100
+    }]
+}
+
+function updateViewModel() {
+    loadUserSessionCount();
+    loadOnlineServiceCount();
+    loadLogCount();
+}
+
+let intervalHandle: NodeJS.Timeout;
+
+onMounted(() => {
+    updateViewModel();
+
+    intervalHandle = setInterval(() => {
+        updateViewModel();
+    }, 20000)
+})
+
+onUnmounted(() => {
+    clearInterval(intervalHandle)
+})
+</script>
+
+<style lang="scss" scoped>
+.home-page {
+    padding: 0 16px 16px 16px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .audit-count {
+        .audit-text-box {
+            height: 40px;
+            display: flex;
+            align-items: center;
+            color: #3a424a;
+            font-size: 18px;
+            font-weight: bold;
+
+            > span {
+                margin-right: 16px;
+                color: #7e8b99;
+                font-size: 14px;
+            }
+        }
+    }
+
+    :deep(.el-card) {
+        //box-shadow: var(--el-box-shadow-lighter) !important;
+
+        .el-card__body {
+            padding: 10px 16px;
+
+            .module-title {
+                display: flex;
+                height: 44px;
+                font-size: 15px;
+                align-items: center;
+                color: #555f6d;
+                font-weight: 600;
+
+                > span {
+                    flex: auto;
+                    font-weight: 600;
+                }
+
+                > i {
+                    display: inline-block;
+                    width: 20px;
+                    flex: none;
+                    font-weight: normal;
+                    text-align: center;
+                    font-size: 20px;
+                    color: #6792f4;
+                    margin-right: 6px;
+                }
+
+                .el-button {
+                    flex: none;
+                }
+            }
+        }
+    }
+
+    .header {
+        height: 50px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+
+        .left {
+            flex: 1;
+            color: #606266;
+            font-size: 20px;
+            font-weight: bold;
+        }
+
+        .right {
+            width: auto;
+
+            .menu {
+                display: flex;
+
+                > li {
+                    padding: 0 8px;
+                    font-size: 14px;
+                    line-height: 21px;
+                    cursor: pointer;
+                    color: #555f6d;
+
+                    &:hover {
+                        color: #1b242c;
+                    }
+
+                    > i {
+                        display: inline-block;
+                        width: 16px;
+                        font-size: 16px;
+                        text-align: center;
+                    }
+                }
+            }
+        }
+    }
+
+    .body {
+        flex: 1;
+
+        .count-box {
+            margin-top: 10px;
+            width: 100%;
+            display: flex;
+
+            > li {
+                margin-right: 10px;
+                width: calc(20% - 8px);
+                height: 100%;
+
+
+                &:hover {
+                    .redirect {
+                        //background-color: var(--el-fill-color-extra-light);
+                        cursor: pointer;
+                    }
+                }
+
+                &:last-child {
+                    margin-right: 0;
+                }
+
+                .count-item {
+                    height: 150px;
+                    flex-direction: column;
+
+                    .content {
+                        color: #1b242c;
+                        font-size: 24px;
+                        height: 88px;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.percentage-value {
+    display: block;
+    margin-top: 10px;
+    font-size: 28px;
+}
+
+.percentage-label {
+    display: block;
+    margin-top: 10px;
+    font-size: 12px;
+}
+</style>