ace-front-end 1.0.0

package/ace-install-system-ui/public/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 215.43 53.86"><defs><style>.cls-1{fill:#00428e;}</style></defs><title>资源 1</title><g id="图层_2" data-name="图层 2"><g id="logo"><path class="cls-1" d="M41.66,43.07H36.79c-8,0-13.55-4.92-12.27-15.87C25.94,15.06,31.81,8.09,38.44,8.09c3,0,4.66,2.33,4.28,6.22a25.77,25.77,0,0,1-1,5.1h6.16a3.12,3.12,0,0,0,3.1-2.72C51.13,15.18,52,8,52.42,5s-2-5-4.75-5H16.06A2.4,2.4,0,0,0,14,1.17L4.72,16.79A9.07,9.07,0,0,0,3.5,20.31C2.74,26.31.41,44.78.05,47.64a5.34,5.34,0,0,0,5.34,6.22h35a6.55,6.55,0,0,0,6.59-5.48c.49-3.1,1-6.39,1-6.39a14.08,14.08,0,0,1-6.28,1.08"/><path class="cls-1" d="M204.63,43.07h-4.87c-8,0-13.55-4.92-12.27-15.87,1.42-12.14,7.29-19.11,13.92-19.11,3,0,4.65,2.33,4.28,6.22a25.77,25.77,0,0,1-1,5.1h6.15a3.12,3.12,0,0,0,3.11-2.72C214.1,15.18,215,8,215.39,5s-1.95-5-4.75-5H179A2.4,2.4,0,0,0,177,1.17l-9.26,15.62a9.07,9.07,0,0,0-1.22,3.52c-.76,6-3.09,24.47-3.45,27.33a5.34,5.34,0,0,0,5.34,6.22h35a6.55,6.55,0,0,0,6.59-5.48c.49-3.1,1-6.39,1-6.39a14.08,14.08,0,0,1-6.28,1.08"/><path class="cls-1" d="M102,0H70.51a2.4,2.4,0,0,0-2.08,1.17L59.16,16.79A9.22,9.22,0,0,0,58,20.31c-.36,2.83-1,8.17-1.23,9.74-.28,2.28,1.23,3.74,3.49,3.74H77.79c3.3,0,4.66,1.24,4.2,4.93-.42,3.28-2,4.4-5.43,4.4H63.18c-4,0-6.28-.27-8-1.17,0,0-.3,2.29-.7,5.5-.47,3.7,1.54,6.41,5.32,6.41H95.28a6.28,6.28,0,0,0,6-5.47s2.2-16.54,2.47-18.79a3.28,3.28,0,0,0-3.48-3.88l-13.79,0c-3.9,0-7.11-1-6.42-6.31.81-6.26,5.11-11.34,10.44-11.34,4.25,0,6.3,3,5.81,7.19a21.3,21.3,0,0,1-.9,4.13h6.71a3.25,3.25,0,0,0,3.25-2.74L106.87,5C107.22,2.17,105.12,0,102,0"/><path class="cls-1" d="M156.21,0H124.76a2.4,2.4,0,0,0-2.07,1.17l-9.27,15.62a9.22,9.22,0,0,0-1.21,3.52c-.36,2.83-1,8.17-1.23,9.74-.28,2.28,1.23,3.74,3.49,3.74H132c3.31,0,4.67,1.24,4.2,4.93-.41,3.28-2,4.4-5.42,4.4H117.44c-4.06,0-6.28-.27-8-1.17,0,0-.31,2.29-.71,5.5-.46,3.7,1.54,6.41,5.33,6.41h35.43a6.29,6.29,0,0,0,6-5.47s2.2-16.54,2.47-18.79a3.28,3.28,0,0,0-3.48-3.88l-13.79,0c-3.9,0-7.11-1-6.42-6.31.81-6.26,5.11-11.34,10.43-11.34,4.26,0,6.31,3,5.82,7.19a21.3,21.3,0,0,1-.9,4.13h6.71a3.26,3.26,0,0,0,3.25-2.74L161.12,5c.36-2.78-1.74-4.95-4.91-4.95"/></g></g></svg>

package/ace-install-system-ui/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/ace-install-system-ui/src/App.vue

@@ -0,0 +1,7 @@
+<template>
+    <suspense>
+        <router-view style="height: 100%"></router-view>
+    </suspense>
+</template>
+<script setup lang="ts"></script>
+<style scoped lang="scss"></style>

package/ace-install-system-ui/src/api/apiCache.ts

@@ -0,0 +1,25 @@
+import { createAxios } from "../utils/axios";
+import type { IAceAxios } from "@jari-ace/app-bolts";
+import { useAxiosCache } from "./cache";
+type FuncApiCreator = (axios: IAceAxios) => any;
+
+// const creatorCache = new Map<FuncApiCreator, Map<IAceAxios | "_", any>>();
+
+export function createApiWithCache<T extends FuncApiCreator>(
+    apiCreator: T,
+    axios?: IAceAxios
+): ReturnType<T> {
+    const creatorCache = useAxiosCache();
+    let cache;
+    if (creatorCache.has(apiCreator)) {
+        cache = creatorCache.get(apiCreator)!;
+    } else {
+        cache = new Map<IAceAxios | "_", any>();
+        creatorCache.set(apiCreator, cache);
+    }
+    const key = axios ?? "_";
+    if (!cache.has(key)) {
+        cache.set(key, apiCreator(axios ?? createAxios()));
+    }
+    return cache.get(key);
+}

package/ace-install-system-ui/src/api/cache.ts

@@ -0,0 +1,9 @@
+import type { IAceAxios } from "@jari-ace/app-bolts";
+type FuncApiCreator = (axios: IAceAxios) => any;
+export const useAxiosCache = (function () {
+    let cache: Map<FuncApiCreator, Map<IAceAxios | "_", any>> | null = null;
+    return function createCache() {
+        if (cache == null) cache = new Map<FuncApiCreator, Map<IAceAxios | "_", any>>();
+        return cache;
+    };
+})();

package/ace-install-system-ui/src/api/desktopAppApi.ts

@@ -0,0 +1,149 @@
+import type { IAceAxios } from "@jari-ace/app-bolts";
+import { createApiWithCache } from "./apiCache";
+import {
+    DesktopApp,
+    DesktopAppInstallCommand,
+    DesktopAppInstallInfo,
+    DesktopAppMetadata,
+    UninstallAppInfo,
+} from "@/model/DesktopApp";
+
+function useDesktopAppApiInternal(axios: IAceAxios) {
+    const baseUrl = "/desktop-apps";
+    return {
+        /**
+         * 获取所有桌面应用列表。
+         */
+        getAll() {
+            return axios.get<DesktopApp[]>(`${baseUrl}/all`);
+        },
+        /**
+         * 根据ID获取桌面应用信息。
+         * @param id 应用ID
+         */
+        getById(id: number) {
+            return axios.get<DesktopApp>(`${baseUrl}/by-id/${id}`);
+        },
+        /**
+         * 获取指定应用的所有版本
+         * @param appName 应用名
+         */
+        getByName(appName: string) {
+            return axios.get<DesktopApp[]>(`${baseUrl}/${appName}`);
+        },
+        /**
+         * 获取所有已安装应用和主机信息
+         */
+        getInstallInfos() {
+            return axios.get<DesktopAppInstallInfo[]>(`${baseUrl}/install-infos`);
+        },
+        /**
+         * 获取已上传到服务器上的zip压缩包的文件名列表，可用于在填写包自述信息时供选择路径
+         * @param fileName zip文件名
+         */
+        getZipEntries(fileName: string) {
+            return axios.get<string[]>(`${baseUrl}/zip-entries/${fileName}`);
+        },
+        /**
+         * 保存应用自述信息
+         * @param fileName 压缩包文件名
+         * @param meta 自述信息
+         */
+        saveAppMeta(fileName: string, meta: DesktopAppMetadata) {
+            return axios.post<void>(`${baseUrl}/pkg/${fileName}`, meta);
+        },
+        /**
+         * 获取应用自述信息。
+         * 应用包上传完成后应调用此接口判断包内是否含有合规的自述信息，
+         * 如果此接口抛出任何api异常，都应该转到自述信息填写页面，要求用户填写
+         *
+         * @param fileName 应用压缩包文件名
+         */
+        getAppMeta(fileName: string) {
+            return axios.get<void>(
+                `${baseUrl}/pkg/${fileName}`,
+                {},
+                {
+                    showApiErrorMessage: false,
+                    showUnexpectedErrorDetail: false,
+                }
+            );
+        },
+        /**
+         * 根据应用ID获取应用自述信息
+         * @param id 应用ID
+         */
+        getAppMetaById(id: number) {
+            return axios.get<void>(`${baseUrl}/pkg-by-id/${id}`);
+        },
+        /**
+         * 根据历史安装记录创建新安装命令
+         * @param appIds 应用ID列表
+         *
+         */
+        buildInstallCommand(appIds: number[]) {
+            return axios.post<DesktopAppInstallCommand>(`${baseUrl}/build-command`, {
+                appIds,
+            });
+        },
+        /**
+         * 安装应用
+         * @param command 安装应用命令
+         */
+        install(command: DesktopAppInstallCommand) {
+            return axios.post<number>(`${baseUrl}/install`, command);
+        },
+        /**
+         * 卸载应用
+         * @param command 卸载命令，Map对象的key是应用ID，值是主机ID
+         */
+        uninstall(uninstallList: UninstallAppInfo[]) {
+            return axios.post<number>(`${baseUrl}/uninstall`, {
+                uninstallMachineApps: uninstallList,
+            });
+        },
+        /**
+         * 指定安装任务发现目标主机已安装了应用时，可以调用此接口再次强制安装
+         * @param taskId 任务Id
+         * @param taskItemId 任务项Id
+         */
+        forceInstall(taskId: number, taskItemId: number) {
+            return axios.get<void>(`${baseUrl}/force-install/${taskId}/${taskItemId}`);
+        },
+        /**
+         * 准备下载，在每次下载应用安装包之前必须调用此接口上传安装命令
+         * @param command 安装命令
+         * @returns 返回一个随机的文本类型下载令牌，此令牌将作为下载请求参数
+         */
+        prepareDownload(command: DesktopAppInstallCommand) {
+            return axios.post<string>(`${baseUrl}/prepare-download`, command);
+        },
+        /**
+         * 开始扫描应用
+         */
+        startScan() {
+            return axios.get<void>(`${baseUrl}/scan`);
+        },
+        /**
+         * 删除应用
+         * @param ids 应用Id列表
+         */
+        deleteByIds(ids: number[]) {
+            return axios.delete<void>(`${baseUrl}`, ids);
+        },
+        /**
+         * 删除无效的文件
+         */
+        deleteFile(fileName: string) {
+            return axios.delete<void>(`${baseUrl}/files/${fileName}`);
+        },
+    };
+}
+
+/**
+ * 应用管理API
+ * @param axios axios对象
+ */
+export function useDeskTopAppApi(axios?: IAceAxios) {
+    return createApiWithCache(useDesktopAppApiInternal, axios);
+}

package/ace-install-system-ui/src/api/desktopMachineApi.ts

@@ -0,0 +1,75 @@
+import type { IAceAxios } from "@jari-ace/app-bolts";
+import { createApiWithCache } from "./apiCache";
+import {
+    CpuArchType,
+    CustomDesktopMachineSecured,
+    DesktopMachine,
+    DesktopMachineSecured,
+    DesktopOS,
+} from "@/model/DesktopApp";
+
+function useDesktopMachineApiInternal(axios: IAceAxios) {
+    const baseUrl = "/desktop-machines";
+    return {
+        /**
+         * 获取所有桌面主机列表。
+         */
+        getAll() {
+            return axios.get<DesktopMachineSecured[]>(`${baseUrl}/all`);
+        },
+        /**
+         * 根据ID获取桌面主机信息。
+         * @param id 主机ID
+         */
+        getById(id: number) {
+            return axios.get<DesktopMachineSecured>(`${baseUrl}/by-id/${id}`);
+        },
+        /**
+         * 获取指定系统和cpu类型的桌面主机
+         * @param os
+         * @param cpu
+         */
+        getByCpuAndOs(
+            appId: number | undefined,
+            os: DesktopOS | undefined,
+            cpu: CpuArchType | undefined
+        ) {
+            if (!appId || !os || !cpu) {
+                return new Promise<DesktopMachineSecured[]>((resolve, reject) => {
+                    reject(new Error("请传入正确的appId、os或cpu"));
+                });
+            }
+
+            return axios.get<DesktopMachineSecured[]>(`${baseUrl}/by-os-cpu/${os}/${cpu}/${appId}`);
+        },
+        /**
+         * 创建桌面主机
+         * @param machine 主机信息
+         */
+        create(machine: DesktopMachineSecured) {
+            return axios.post<DesktopMachineSecured>(`${baseUrl}`, machine);
+        },
+        /**
+         * 修改桌面主机
+         * @param machine 主机信息
+         */
+        update(machine: DesktopMachine) {
+            return axios.put<DesktopMachineSecured>(`${baseUrl}`, machine);
+        },
+        /**
+         * 删除桌面主机
+         * @param ids 主机Id列表
+         */
+        deleteByIds(ids: number[]) {
+            return axios.delete<void>(`${baseUrl}`, ids);
+        },
+    };
+}
+
+/**
+ * 桌面主机管理API
+ * @param axios axios对象
+ */
+export function useDesktopMachineApi(axios?: IAceAxios) {
+    return createApiWithCache(useDesktopMachineApiInternal, axios);
+}

package/ace-install-system-ui/src/api/loginApi.ts

@@ -0,0 +1,46 @@
+import type { IAceAxios, UniformResponse } from "@jari-ace/app-bolts";
+import { createApiWithCache } from "./apiCache";
+import { createAxios } from "../utils/axios";
+
+const axios = createAxios();
+const baseUrl = "/auth";
+
+function useLoginApiInternal(axios: IAceAxios) {
+    return {
+        /**
+         * 获取是否首次运行
+         */
+        isFirstTimeRun() {
+            return axios.get<boolean>(`${baseUrl}/ftr`);
+        },
+        /**
+         * 登录系统，无论是否首次登录，都是调用此接口。
+         * 如果登录成功，返回状态码200和“登录成功”消息，否则返回401状态码。
+         * @param password 登录密码
+         */
+        login(password: string) {
+            return axios.postForm<UniformResponse<void>>(
+                `/login`,
+                {
+                    userName: "root",
+                    password,
+                },
+                null,
+                {
+                    isUniformResponse: false,
+                }
+            );
+        },
+        logout() {
+            return axios.post<UniformResponse<void>>(`/logout`);
+        },
+    };
+}
+
+/**
+ * 登录接口
+ * @param axios axios对象
+ */
+export function useLunchApi(axios?: IAceAxios) {
+    return createApiWithCache(useLoginApiInternal, axios);
+}

package/ace-install-system-ui/src/api/taskReportApi.ts

@@ -0,0 +1,46 @@
+import type { IAceAxios } from "@jari-ace/app-bolts";
+import { createApiWithCache } from "./apiCache";
+import { TaskReport } from "@/model/TaskReport";
+import { Paging, TaskLog } from "@/model/TaskLog";
+
+function useTaskReportApiInternal(axios: IAceAxios) {
+    const baseUrl = "/task-reports";
+    return {
+        /**
+         * 获取当前所有任务的执行情况报告
+         */
+        getTaskReport() {
+            return axios.get<TaskReport>(`${baseUrl}`);
+        },
+        /**
+         * 根据log id获取ssh命令执行记录。
+         * @param logId 任务日志id
+         */
+        getTaskSshLog(logId: string) {
+            return axios.get<string>(`${baseUrl}/ssh-log/${logId}`);
+        },
+        /**
+         * 分页获取任务日志
+         * @param page 页码
+         * @param size 每页记录数
+         */
+        getTaskLogs(page: number, size: number) {
+            return axios.get<Paging<TaskLog>>(`${baseUrl}/logs`, { page, size });
+        },
+        /**
+         * 停止（如果没有停止的话）并删除任务
+         * @param taskId 任务ID
+         */
+        terminateAndDeleteTask(taskId: number) {
+            return axios.delete<void>(`${baseUrl}/${taskId}`);
+        },
+    };
+}
+
+/**
+ * 任务执行情况报告API
+ * @param axios axios对象
+ */
+export function useTaskReportApi(axios?: IAceAxios) {
+    return createApiWithCache(useTaskReportApiInternal, axios);
+}

package/ace-install-system-ui/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/ace-install-system-ui/src/components/AppsManage/AddApp.vue

@@ -0,0 +1,283 @@
+<template>
+    <CustomDialog v-model="state.visible" width="1000px" title="新建桌面应用" @close="closeHandle">
+        <div class="sfc-add-app">
+            <el-form v-if="state.showUpload" lable-width="120px" style="width: 100%">
+                <el-form-item lable="上传应用安装包">
+                    <Upload
+                        target="/desktop-apps/upload"
+                        tips-text="请按要求上传 .zip 类型文件"
+                        single-file
+                        accept=".zip"
+                        :allow-upload="state.allowUpload"
+                        :process-params="processParams"
+                        :chunk-size="9 * 1024 * 1024"
+                        @file-success="fileSuccess"
+                    />
+                </el-form-item>
+                <el-alert
+                    v-if="state.uploadMsg.visible"
+                    show-icon
+                    :title="state.uploadMsg.msg"
+                    style="margin-bottom: 16px"
+                    :type="state.uploadMsg.type"
+                    :closable="false"
+                    effect="dark"
+                />
+            </el-form>
+            <AppForm
+                v-if="state.appFormVisible"
+                :fileName="state.fileName"
+                :dependencies="state.dependencies"
+                :apps="props.apps"
+                :zipEntries="state.zipEntries"
+                ref="appFormRef"
+                v-model="state.formData"
+            />
+        </div>
+        <template v-if="state.appFormVisible" #footer>
+            <el-button @click="state.visible = false">取消</el-button>
+            <el-button :loading="state.loading" type="primary" @click="submitHandle"
+            >提交
+            </el-button
+            >
+        </template>
+    </CustomDialog>
+</template>
+
+<script setup lang="ts">
+import AppForm from "./AppForm.vue";
+import CustomDialog from "../CustomDialog.vue";
+import Upload from "../Uploader/Uploader.vue";
+import {useDeskTopAppApi} from "@/api/desktopAppApi";
+import {reactive, onMounted, ref, getCurrentInstance} from "vue";
+
+import {clone} from "lodash-es";
+import {
+    App,
+    CustomDesktopApp,
+    DesktopAppMetadata,
+    EnvironmentVariableDescriptor,
+} from "@/model/DesktopApp";
+import {ElNotification} from "element-plus";
+import {dataType} from "element-plus/es/components/table-v2/src/common";
+
+const appFormRef = ref<InstanceType<typeof AppForm> | null>(null);
+const {getAppMeta, getZipEntries, getById} = useDeskTopAppApi();
+
+const formData: DesktopAppMetadata = {
+    name: "",
+    /**
+     * 应用说明
+     */
+    caption: "",
+    version: "",
+    /**
+     * 支持的cpu类型，必填
+     */
+    cpu: "AMD64",
+    /**
+     * 支持的系统类型，必填
+     */
+    os: "LINUX",
+    /**
+     * 应用类别，必填
+     */
+    category: "EXECUTABLE",
+    /**
+     * 可执行文件路径，如果类别是EXECUTABLE就必填
+     */
+    exePath: "",
+    /**
+     * 应用图标文件路径，非必填
+     */
+    icoPath: "",
+    /**
+     * ini文件路径，非必填
+     */
+    iniPath: "",
+    /**
+     * 注册表导出文件路径，非必填
+     */
+    regPath: "",
+    /**
+     * 桌面快捷方式名称，非必填，如果类别是PLUGIN就是一定不能填
+     */
+    shortcutName: "",
+    /**
+     * 发布说明
+     */
+    releaseNote: "",
+    /**
+     * 依赖应用Id列表
+     */
+    dependencies: [],
+    /**
+     * 环境变量定义
+     */
+    env: [],
+    /**
+     * ini配置区域定义
+     */
+    iniSections: [],
+};
+const props = defineProps<{
+    apps: App[];
+}>();
+const state = reactive<{
+    showUpload: boolean;
+    visible: boolean;
+    loading: boolean;
+    appFormVisible: boolean;
+    formData: DesktopAppMetadata;
+    fileName: string;
+    dependencies: string[];
+    zipEntries: string[];
+    currentFile: object | null;
+    allowUpload: boolean;
+    uploadMsg: {
+        msg: string;
+        visible: boolean;
+        type: "warning" | "success";
+    };
+}>({
+    showUpload: true,
+    allowUpload: true,
+    visible: false,
+    appFormVisible: false,
+    loading: false,
+    uploadMsg: {
+        msg: "",
+        visible: false,
+        type: "warning",
+    },
+    formData: formData,
+    fileName: "",
+    dependencies: [],
+    zipEntries: [],
+    currentFile: null,
+});
+
+const emit = defineEmits(["addSuccess"]);
+
+function processParams(params: any) {
+    return {
+        fileName: params.filename,
+        chunks: params.totalChunks,
+        chunk: params.chunkNumber,
+    };
+}
+
+function init() {
+    state.currentFile = null;
+    state.showUpload = true;
+    state.allowUpload = true;
+    state.visible = true;
+    state.appFormVisible = false;
+    state.loading = false;
+    state.uploadMsg = {
+        visible: false,
+        msg: "",
+        type: "warning",
+    };
+    state.formData = clone(formData);
+}
+
+function submitHandle() {
+    state.loading = true;
+    appFormRef
+        .value!.submit()
+               .then((res) => {
+                   state.loading = false;
+                   state.visible = false;
+                   ElNotification({
+                       type: "success",
+                       title: "新建应用成功",
+                   });
+                   emit("addSuccess");
+               })
+               .catch((err) => {
+                   state.loading = false;
+                   console.error("【新建应用提交】", err);
+                   if (err.status) return;
+                   ElNotification({
+                       type: "error",
+                       title: err,
+                   });
+               });
+}
+
+function closeHandle() {
+    state.formData = formData;
+}
+
+function fileSuccess(file: any) {
+    state.currentFile = file;
+    state.fileName = file.name;
+    state.allowUpload = false;
+    state.loading = true;
+    getAppMeta(file.name)
+        .then((res: any) => {
+            state.formData = {
+                ...formData,
+                ...res,
+            };
+            state.uploadMsg = {
+                type: "success",
+                msg: `文件上传成功，请校验下方应用信息，确认后点击提交按钮。`,
+                visible: true,
+            };
+            return getZipEntries(state.fileName);
+        })
+        .catch((err) => {
+            state.uploadMsg = {
+                type: "warning",
+                msg: `${err.message}。需要完善下方应用的自述信息表单，或按照提示完善自述文件后再次上传。`,
+                visible: true,
+            };
+            return getZipEntries(state.fileName);
+        })
+        .then((res) => {
+            //获取zip内文件信息
+            state.zipEntries = res;
+            state.appFormVisible = true;
+            state.loading = false;
+        });
+}
+
+defineExpose({
+    init,
+});
+</script>
+
+<style scoped lang="scss">
+.sfc-add-app {
+    .env-box {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        gap: 16px;
+        padding: 0 16px;
+        align-items: center;
+        border-radius: 3px;
+        overflow: hidden;
+        // border-bottom: 1px solid var(--el-border-color);
+        &:hover {
+            background-color: var(--el-color-primary-light-9);
+        }
+
+        .env-item {
+            display: flex;
+            flex: 1;
+            gap: 8px;
+            padding: 8px 0;
+
+            .env-item-content {
+                flex: 1;
+
+                .env-item-label {
+                }
+            }
+        }
+    }
+}
+</style>