ace-front-end 1.0.0

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

@@ -0,0 +1,208 @@
+<template>
+    <div>
+        <el-drawer v-model="visible"
+                   :title="state.title"
+                   width="420px"
+                   @open="init"
+                   :destroy-on-close="true">
+            <el-scrollbar class="el-form-scrollbar">
+                <!-- ja-form的model属性必须绑定state，即formData的上级Ref对象-->
+                <ja-form ref="formRef"
+                         :validator="validator"
+                         :model="state">
+                    <ja-form-item prop="name" label="应用名" v-focus required>
+                        <ja-input/>
+                    </ja-form-item>
+                    <ja-form-item label="应用简称" prop="caption" required>
+                        <ja-input-i18n-raw :app-id="manageApp.id" size="small"
+                                           v-model="state.formData.caption"></ja-input-i18n-raw>
+                    </ja-form-item>
+                    <!-- <el-form-item label="序号" prop="caption">
+                        <el-input />
+                    </el-form-item> -->
+                    <ja-form-item label="主服务名称" prop="mainServiceName" required>
+                        <ja-input/>
+                    </ja-form-item>
+                    <ja-form-item label="主服务基础包名" prop="basePackage" required>
+                        <ja-input/>
+                    </ja-form-item>
+                    <ja-form-item label="应用图标" prop="icon" required>
+                        <IconColorPicker
+                            @change="clearValidations('icon')"
+                            v-model:color="state.formData.iconColor"
+                            v-model:icon="state.formData.icon"/>
+                    </ja-form-item>
+                    <ja-form-item label="Maven坐标组" required
+                                  label-remark="应用构建生成的JAR包所属的Maven坐标组"
+                                  prop="artifactGroup">
+                        <ja-input/>
+                    </ja-form-item>
+                    <ja-form-item label="前端开发服务URL" prop="devServerUrl" required>
+                        <ja-input/>
+                    </ja-form-item>
+                    <ja-form-item label="前端沙箱模式" prop="sandboxMode"
+                                  label-remark="设置MicroApp框架加载此应用前端所使用的沙箱模式。<br/>Vue3+Vite开发应选择IFrame模式，其他建议选择With模式。"
+                                  required>
+                        <ja-select>
+                            <el-option value="WITH" label="With"></el-option>
+                            <el-option value="IFRAME" label="IFrame"></el-option>
+                        </ja-select>
+                    </ja-form-item>
+                    <ja-form-item label="Git远程URL"
+                                  label-remark="用于提交生成的应用代码"
+                                  prop="gitRemoteUrl">
+                        <ja-input/>
+                    </ja-form-item>
+                    <ja-form-item label="Git分支"
+                                  label-remark="用于提交生成的应用代码"
+                                  prop="gitBranch">
+                        <ja-input/>
+                    </ja-form-item>
+                    <ja-form-item label="Git用户名"
+                                  label-remark="用于提交生成的应用代码"
+                                  prop="gitUsername">
+                        <ja-input/>
+                    </ja-form-item>
+                    <ja-form-item label="Git密码"
+                                  label-remark="用于提交生成的应用代码"
+                                  prop="gitPassword">
+                        <ja-input type="password"/>
+                    </ja-form-item>
+                    <ja-form-item label="支持语言" prop="supportedLocales">
+                        <el-checkbox-group v-model="state.formData.supportedLocales">
+                            <el-checkbox v-for="locale in localeList"
+                                         :key="locale.event"
+                                         :label="locale.event">
+                                {{ locale.text }}
+                            </el-checkbox>
+                        </el-checkbox-group>
+                    </ja-form-item>
+                    <ja-form-item label="开发商" prop="vendor">
+                        <ja-input/>
+                    </ja-form-item>
+                    <ja-form-item label="所属类别" prop="category">
+                        <ja-input/>
+                    </ja-form-item>
+                    <ja-form-item label="所属行业" prop="industry">
+                        <ja-input/>
+                    </ja-form-item>
+                    <ja-form-item label="备注" prop="description">
+                        <ja-input type="textarea"/>
+                    </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>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {IconColorPicker} from "@/components/iconColorPicker"
+import {computed, ref} from "vue"
+import {
+    type CreateAppInstanceCommand,
+    localeList,
+    LocaleType,
+    useAppApi,
+    useLoading
+} from "@jari-ace/app-bolts"
+import {
+    JaButton,
+    JaForm,
+    JaFormItem,
+    JaInput, JaInputI18nRaw,
+    JaSelect, useAppInstances,
+    useBackendValidations
+} from "@jari-ace/element-plus-component"
+import {ElMessage} from "element-plus";
+
+type Props = {
+    modelValue: boolean;
+}
+
+const formRef = ref<typeof JaForm>({} as typeof JaForm)
+
+const props = defineProps<Props>()
+const emit = defineEmits(["update:modelValue", "success"])
+const visible = computed({
+    get(): boolean {
+        return props.modelValue;
+    },
+    set(value: boolean) {
+        emit("update:modelValue", value)
+    },
+})
+const apps = useAppInstances()
+const manageApp = await apps.getByName("ace-app-manage");
+
+function initData(): CreateAppInstanceCommand {
+    return {
+        gitBranch: "",
+        gitPassword: "",
+        gitRemoteUrl: "",
+        gitUsername: "",
+        artifactGroup: "",
+        sandboxMode: "WITH",
+        basePackage: "",
+        caption: "",
+        category: "",
+        description: "",
+        devServerUrl: "",
+        icon: "",
+        iconColor: "linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%)",
+        industry: "",
+        locked: false,
+        mainServiceName: "",
+        name: "",
+        sortIndex: 0,
+        supportedLocales: [LocaleType.ZH_CN, LocaleType.EN],
+        vendor: "",
+    }
+}
+
+const formData: CreateAppInstanceCommand = initData()
+
+const state = ref({
+    title: "",
+    formData: formData //必须命名为formData
+})
+const validator = useBackendValidations(Object.keys(formData))
+const appApi = useAppApi(validator.axios)
+const loading = useLoading(validator.axios)
+
+const init = () => {
+    //创建模式重置表单
+    state.value.formData = {...formData}
+    state.value.title = "创建应用"
+    state.value.formData = initData()
+}
+
+async function submit() {
+    await formRef.value?.validate(() => {
+        return appApi
+            .create(state.value.formData)
+            .then(() => {
+                apps.refresh()
+                visible.value = false;
+                ElMessage.success('创建成功')
+                emit("success");
+            })
+    })
+}
+
+const clearValidations = (prop: string) => {
+    validator.removeFieldError(prop);
+    if (prop === "icon") {
+        formRef.value?.elForm.clearValidate(prop)
+    }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -0,0 +1,252 @@
+<template>
+    <el-card shadow="hover">
+        <div class="module-title">
+            <i class="ri-apps-line"></i>
+            应用管理
+        </div>
+        <ul class="app-manage-sfc">
+            <li class="app-box" v-for="app in apps" :key="app.id" @click="gotoAppManage(app)">
+                <!-- <div class="config-box">
+                    <div class="update item" @click.stop="updateApp(app)">
+                        <el-icon size="14px"><Edit /></el-icon>
+                        <span style="margin-left: 4px">编辑</span>
+                    </div>
+                    <div class="delete item" @click.stop="deleteApp(app)">
+                        <el-icon size="14px"><Close /></el-icon>
+                        <span style="margin-left: 4px">删除</span>
+                    </div>
+                </div> -->
+                <div
+                    class="icon-box"
+                    :style="{
+                        background: app.iconColor,
+                    }">
+                    <i :class="app.icon"></i>
+                </div>
+                <div class="app-name">
+                    {{ app.caption }}
+                </div>
+            </li>
+            <li class="add-app-box" @click="createApp" v-auth="AceRoles.CREATE_APP">
+                <i class="ri-add-line"></i>
+            </li>
+        </ul>
+    </el-card>
+    <AppEditor
+        v-model="state.editorVisible"
+        @success="editSuccess"
+    />
+    <ElDialog
+        v-model="state.deleteVisible"
+        width="24%"
+        :title="`删除${
+            state.deleteAppInfo !== null ? `【${state.deleteAppInfo.caption}】` : ''
+        }应用`">
+        <el-alert type="warning" show-icon :closable="false">
+            <div class="delete-info">
+                <h3>警告</h3>
+                <p>删除应用同时将删除应用相关配置数据，请输入应用名以确认继续操作。</p>
+            </div>
+        </el-alert>
+        <ElForm label-position="left" size="default" style="margin-top: 12px" :model="state">
+            <ElFormItem label="应用名" prop="deleteConfirmField" :rules="deleteFormRules">
+                <ElInput v-model="state.deleteConfirmField"></ElInput>
+            </ElFormItem>
+        </ElForm>
+        <template #footer>
+            <ElButton size="default" @click="state.deleteVisible = false">取消</ElButton>
+            <ElButton
+                size="default"
+                :disabled="state.deleteConfirmField !== state.deleteAppInfo?.name"
+                type="danger"
+                @click="confirmDelete">
+                确定
+            </ElButton>
+        </template>
+    </ElDialog>
+</template>
+
+<script setup lang="ts">
+import {useAppApi, type AppInstance, AceRoles} from "@jari-ace/app-bolts";
+import {reactive} from "vue";
+import AppEditor from "./AppEditor.vue";
+import router from "@/router";
+import {useAppInstances} from "@jari-ace/element-plus-component";
+
+type State = {
+    editorVisible: boolean;
+    // apps: AppInstance[];
+    deleteVisible: boolean;
+    deleteConfirmField: string;
+    editorType: "create" | "update";
+    upDateApp?: AppInstance;
+    deleteAppInfo: AppInstance | null;
+};
+
+const appApi = useAppApi();
+const {getAll: getAllApps, getManageable, getAccessible} = useAppInstances();
+
+const apps = await getAllApps();
+
+const state = reactive<State>({
+    editorVisible: false,
+    deleteVisible: false,
+    deleteConfirmField: "",
+    deleteAppInfo: null,
+    editorType: "create",
+});
+// eslint-disable-next-line
+const deleteValidatePass = (_rule: unknown, value: string, callback: any) => {
+    if (value === state.deleteAppInfo?.name) {
+        callback();
+    } else {
+        callback(new Error("输入的应用名错误"));
+    }
+};
+
+const deleteFormRules = [{validator: deleteValidatePass, trigger: "blur"}];
+
+const createApp = () => {
+    state.editorType = "create";
+    state.editorVisible = true;
+};
+
+const deleteApp = (app: AppInstance) => {
+    state.deleteAppInfo = app;
+    state.deleteVisible = true;
+};
+const confirmDelete = () => {
+    if (state.deleteConfirmField !== state.deleteAppInfo?.name) return;
+    appApi.delete(state.deleteAppInfo.id, state.deleteAppInfo?.dataVersion).then(() => {
+        state.deleteVisible = false;
+        refreshAppLists();
+    });
+};
+const updateApp = (app: AppInstance) => {
+    state.editorType = "update";
+    state.editorVisible = true;
+    state.upDateApp = app;
+};
+const editSuccess = () => {
+    //刷新应用列表
+    refreshAppLists();
+};
+
+function refreshAppLists() {
+    getManageable();
+    getAllApps();
+    getAccessible();
+}
+
+const gotoAppManage = (app: AppInstance) => {
+    router.push({
+        name: "appManage",
+        params: {
+            appId: app.id,
+            menuType: "manage",
+        },
+    });
+};
+</script>
+
+<style lang="scss" scoped>
+.module-title {
+    font-size: 16px;
+    color: #555f6d;
+}
+
+// .delete-info {
+// }
+.app-manage-sfc {
+    display: flex;
+    padding: 10px 0 10px 0;
+    flex-wrap: wrap;
+
+    > li {
+        width: 148px;
+        height: 148px;
+        margin-right: 10px;
+        margin-bottom: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        border: 1px solid #dcdfe6;
+        border-radius: 5px;
+        cursor: pointer;
+
+        &:hover {
+            box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
+        }
+    }
+
+    .add-app-box {
+        font-size: 40px;
+        color: #9fceff;
+    }
+
+    .app-box {
+        position: relative;
+
+        .config-box {
+            position: absolute;
+            z-index: 101;
+            right: 0;
+            bottom: 0;
+            visibility: hidden;
+            width: 100%;
+            display: flex;
+            height: 32px;
+            background-color: rgba(0, 0, 0, 0.7);
+            overflow: hidden;
+            border-radius: 0 0 5px 5px;
+            // border-bottom: 1px solid #dcdfe6;
+            .item {
+                color: #fff;
+                height: 100%;
+                flex: 1;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 2px;
+                font-size: 14px;
+
+                &:hover {
+                    background-color: rgba(0, 0, 0, 0.1);
+                }
+            }
+
+            // .update {
+            //     // color: #f59638;
+            // }
+            .delete {
+                color: #f26464;
+            }
+        }
+
+        &:hover {
+            .config-box {
+                visibility: visible;
+            }
+        }
+
+        .app-name {
+            width: 80%;
+            text-align: center;
+            margin-top: 8px;
+            font-size: 14px;
+        }
+
+        .icon-box {
+            width: 80px;
+            height: 80px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #fff;
+            font-size: 40px;
+            border-radius: 5px;
+        }
+    }
+}
+</style>