ace-front-end 1.0.0

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

@@ -0,0 +1,321 @@
+<template>
+    <el-form
+        v-loading="state.loading"
+        ref="formRef"
+        :model="modelValue"
+        :rules="rules"
+        element-loading-text="正在保存，请稍候.."
+        label-position="top"
+        label-width="120px"
+        style="width: 100%"
+    >
+        <el-row :gutter="16" v-loading="state.loading">
+            <el-col :span="12"
+                ><el-form-item label="应用名称" prop="name">
+                    <el-input
+                        v-model="modelValue.name"
+                        placeholder="请填写应用名称，名称中不能包含/\\:*?<>&#34;|和空格。"
+                    ></el-input> </el-form-item
+            ></el-col>
+            <el-col :span="12">
+                <el-form-item label="版本号" prop="version">
+                    <el-input
+                        v-model="modelValue.version"
+                        placeholder="请填写版本号，必须采用类似2.3.0的格式。"
+                    ></el-input>
+                </el-form-item>
+            </el-col>
+
+            <el-col :span="12">
+                <el-form-item label="支持的系统类型">
+                    <el-select v-model="modelValue.os" style="width: 100%">
+                        <el-option label="LINUX" value="LINUX"></el-option>
+                        <el-option label="WINDOWS" value="WINDOWS"></el-option>
+                    </el-select>
+                </el-form-item>
+            </el-col>
+            <el-col :span="12">
+                <el-form-item label="支持的cpu类型" prop="cpu">
+                    <el-select v-model="modelValue.cpu" placeholder="请选择" style="width: 100%">
+                        <el-option label="ARM64" value="ARM64"></el-option>
+                        <el-option label="AMD64" value="AMD64"></el-option>
+                    </el-select>
+                </el-form-item>
+            </el-col>
+
+            <el-col :span="12">
+                <el-form-item label="应用类别" prop="category">
+                    <el-select
+                        v-model="modelValue.category"
+                        placeholder="请选择"
+                        style="width: 100%"
+                    >
+                        <el-option label="可执行应用" value="EXECUTABLE"></el-option>
+                        <el-option label="插件" value="PLUGIN"></el-option>
+                    </el-select>
+                </el-form-item>
+            </el-col>
+            <el-col :span="12"></el-col>
+            <el-col :span="12">
+                <el-form-item
+                    v-if="modelValue.category === 'EXECUTABLE'"
+                    label="桌面快捷方式名称"
+                    prop="shortcutName"
+                >
+                    <el-input v-model="modelValue.shortcutName" placeholder=""></el-input>
+                </el-form-item>
+            </el-col>
+            <el-col :span="12">
+                <el-form-item
+                    v-if="modelValue.category === 'EXECUTABLE'"
+                    label="可执行文件路径"
+                    prop="exePath"
+                >
+                    <el-select
+                        v-model="modelValue.exePath"
+                        placeholder="请选择可执行文件路径"
+                        style="width: 100%"
+                    >
+                        <el-option
+                            v-for="item in props.zipEntries"
+                            :key="item"
+                            :label="item"
+                            :value="item"
+                        />
+                    </el-select>
+                    <!-- <el-input
+                        v-model="modelValue.exePath"
+                        placeholder="如果应用类别是可执行应用，此项为必填项"
+                    ></el-input> -->
+                </el-form-item>
+            </el-col>
+            <el-col :span="12">
+                <el-form-item label="应用图标文件路径" prop="icoPath">
+                    <el-select
+                        v-model="modelValue.icoPath"
+                        placeholder="请选择应用图标文件路径"
+                        style="width: 100%"
+                    >
+                        <el-option
+                            v-for="item in props.zipEntries"
+                            :key="item"
+                            :label="item"
+                            :value="item"
+                        />
+                    </el-select>
+                    <!-- <el-input v-model="modelValue.icoPath" placeholder=""></el-input> -->
+                </el-form-item>
+            </el-col>
+            <el-col :span="12">
+                <el-form-item label="ini文件路径" prop="iniPath">
+                    <el-input v-model="modelValue.iniPath" placeholder=""></el-input>
+                </el-form-item>
+            </el-col>
+            <el-col :span="12">
+                <el-form-item label="注册表导出文件路径" prop="regPath">
+                    <el-select
+                        v-model="modelValue.regPath"
+                        placeholder="请选择注册表导出文件路径"
+                        style="width: 100%"
+                    >
+                        <el-option
+                            v-for="item in props.zipEntries"
+                            :key="item"
+                            :label="item"
+                            :value="item"
+                        />
+                    </el-select>
+                    <!-- <el-input v-model="modelValue.regPath" placeholder=""></el-input> -->
+                </el-form-item>
+            </el-col>
+            <el-col :span="12">
+                <el-form-item label="依赖应用" prop="dependencies">
+                    <el-select
+                        v-model="modelValue.dependencies"
+                        multiple
+                        collapse-tags
+                        collapse-tags-tooltip
+                        allow-create
+                        filterable
+                        :max-collapse-tags="3"
+                        placeholder="选择依赖的应用"
+                        style="width: 100%"
+                    >
+                        <el-option
+                            v-for="item in apps"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.name"
+                        />
+                    </el-select>
+                </el-form-item>
+            </el-col>
+
+            <el-col :span="24">
+                <el-form-item label="发布说明" prop="releaseNote">
+                    <el-input v-model="modelValue.releaseNote" placeholder=""></el-input>
+                </el-form-item>
+            </el-col>
+
+            <el-col :span="24">
+                <el-form-item label="环境变量" prop="env">
+                    <EnvForm v-model="modelValue.env"></EnvForm>
+                </el-form-item>
+            </el-col>
+            <el-col :span="24">
+                <el-form-item label="ini配置区域" prop="env">
+                    <IniForm v-model="modelValue.iniSections" />
+                </el-form-item>
+            </el-col>
+        </el-row>
+    </el-form>
+</template>
+
+<script setup lang="ts">
+import EnvForm from "./EnvForm.vue";
+import IniForm from "./IniForm.vue";
+
+import { useDeskTopAppApi } from "@/api/desktopAppApi";
+import { reactive, onMounted, ref, getCurrentInstance, computed } from "vue";
+
+import { App, DesktopAppMetadata, EnvironmentVariableDescriptor } from "@/model/DesktopApp";
+import type { FormInstance } from "element-plus";
+
+const { saveAppMeta } = useDeskTopAppApi();
+
+const internalInstance = getCurrentInstance()!;
+
+const formRef = ref<FormInstance | null>(null);
+
+const props = defineProps<{
+    modelValue: DesktopAppMetadata;
+    fileName: string;
+    dependencies: string[];
+    apps: App[];
+    zipEntries: string[];
+}>();
+
+const modelValue = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value) {
+        emit("update:modelValue", value);
+    },
+});
+
+const rules = {
+    name: [
+        { required: true, message: "请填写应用名称", trigger: "blur" },
+        {
+            validator: validateName,
+            trigger: "blur",
+        },
+    ],
+    version: [
+        { required: true, message: "请填写版本号", trigger: "blur" },
+        {
+            validator: validateVersion,
+            trigger: "blur",
+        },
+    ],
+    category: [{ required: true, message: "请选择应用类别", trigger: "blur" }],
+    exePath: [
+        {
+            validator: validateExePath,
+            trigger: "change",
+        },
+    ],
+};
+function validateVersion(rule: any, value: string, callback: any) {
+    let length = value.split(".").length;
+    if (length !== 3) {
+        callback(new Error("必须采用类似2.3.0的格式"));
+    }
+    callback();
+}
+function validateName(rule: any, value: any, callback: any) {
+    if (/[/\\:*?<>\\"|\s]+/.test(value)) {
+        callback(new Error('不能包含/\\:*?<>"|和空格'));
+    }
+    callback();
+}
+function validateExePath(rule: any, value: any, callback: any) {
+    if (modelValue.value.category === "PLUGIN") {
+        callback();
+    } else {
+        if (value) {
+            callback();
+        } else {
+            callback(new Error("请填写可执行文件路径"));
+        }
+    }
+}
+
+const state = reactive<{
+    loading: boolean;
+}>({
+    loading: false,
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const submit = () => {
+    return new Promise((resolve, reject) => {
+        if (!formRef.value) return;
+        formRef.value.validate((validateRes, invalidFields) => {
+            console.log("--------", invalidFields);
+            if (validateRes) {
+                saveAppMeta(props.fileName, props.modelValue)
+                    .then((res) => {
+                        resolve({
+                            type: "success",
+                            msg: "提交成功",
+                            data: res,
+                        });
+                    })
+                    .catch((err) => {
+                        reject(err);
+                    });
+            } else {
+                reject(new Error("验证未通过"));
+            }
+        });
+    });
+};
+
+defineExpose({
+    submit,
+});
+</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>

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

@@ -0,0 +1,164 @@
+<template>
+    <el-drawer
+        modal-class="device-manage-drawer"
+        :model-value="modelValue"
+        :close-on-click-modal="false"
+        :append-to-body="false"
+        size="1100"
+        :with-header="false"
+    >
+        <div class="sfc-device-manage-drawer">
+            <div class="header">
+                <div class="close-btn" @click="modelValue = false">
+                    <i class="aceicon icon-Rightarrow"></i>
+                </div>
+                <div class="title">应用管理</div>
+            </div>
+            <div class="body">
+                <el-tabs type="border-card" class="device-manage-tabs">
+                    <el-tab-pane label="桌面应用管理">
+                        <div class="tab-content">
+                            <AppsManage :apps="[]" mode="manage"></AppsManage>
+                        </div>
+                    </el-tab-pane>
+                    <el-tab-pane label="服务管理" disabled></el-tab-pane>
+                </el-tabs>
+            </div>
+        </div>
+    </el-drawer>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import AppsManage from "./AppsManage.vue";
+
+const props = defineProps<{
+    modelValue: boolean;
+}>();
+
+const emit = defineEmits(["update:modelValue"]);
+/**
+ * 初始化组件
+ * @param show 是否显示
+ */
+function init(show: boolean): void {}
+const modelValue = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(val) {
+        emit("update:modelValue", val);
+    },
+});
+/**
+ * 关闭事件
+ */
+// function handleClose() {
+//     emit("close:modelValue");
+// }
+
+defineExpose({
+    init,
+});
+</script>
+<style lang="scss" scoped>
+.dark-theme {
+    .sfc-device-manage-drawer {
+        > .header {
+            background-color: var(--ace-bg-color8);
+            .title {
+                color: #fff;
+            }
+            .close-btn {
+                border-color: rgba(0, 0, 0, 0.2);
+                &:hover {
+                    background-color: var(--ace-fill-color3);
+                }
+                > .aceicon {
+                    color: #fff;
+                }
+            }
+        }
+        > .body {
+            // :deep(.el-tabs.device-manage-tabs) {
+            //     background: unset !important;
+            //     border: unset;
+            //     .el-tabs__header {
+            //         background: unset;
+            //         border-color: rgba(0, 0, 0, 0.2) !important;
+            //     }
+            // }
+        }
+    }
+}
+.sfc-device-manage-drawer {
+    height: 100%;
+    flex-direction: column;
+    overflow: hidden;
+    :deep(.device-manage-tabs) {
+        height: 100%;
+        .el-tabs__content {
+            padding: 0;
+            height: 100%;
+            overflow: hidden;
+            .el-tab-pane {
+                height: 100%;
+                overflow: hidden;
+            }
+        }
+    }
+    .header {
+        display: flex;
+        flex-direction: row;
+        height: 48px;
+        align-items: center;
+        gap: 16px;
+
+        // border-bottom: 1px solid var(--el-border-color);
+        .title {
+            font-size: 18px;
+            font-weight: bold;
+            color: var(--el-text-color-primary);
+        }
+
+        .close-btn {
+            cursor: pointer;
+            width: 48px;
+            height: 100%;
+            border-right: 1px solid var(--el-border-color);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transition: background-color var(--el-transition-duration);
+
+            &:hover {
+                background-color: var(--el-color-primary-light-9);
+            }
+
+            > .aceicon {
+                font-size: 20px;
+                color: var(--el-text-color-regular);
+            }
+        }
+    }
+    .body {
+        height: calc(100% - 48px);
+        .tab-content {
+            height: 100%;
+        }
+    }
+}
+</style>
+<style lang="scss" scoped>
+.device-manage-drawer {
+    position: absolute !important;
+    z-index: 999 !important;
+    display: flex;
+    .header {
+        display: flex;
+        flex-direction: row;
+    }
+    .el-drawer__body {
+        padding: 0;
+    }
+}
+</style>

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

@@ -0,0 +1,93 @@
+<template>
+    <custom-dialog v-model="visible" width="60%" title="选择应用" @opend="init">
+        <div class="sfc-app-selector">
+            <AppsManage
+                ref="appManageRef"
+                title="请选择应用"
+                :apps="apps"
+                mode="select"
+                @app-selection="appSelection"
+            />
+        </div>
+
+        <template #footer>
+            <el-button @click="visible = false">取消</el-button>
+            <el-button type="primary" @click="submitHandle">确定</el-button>
+        </template>
+    </custom-dialog>
+</template>
+
+<script setup lang="ts">
+import CustomDialog from "../CustomDialog.vue";
+import AppsManage from "./AppsManage.vue";
+import { computed, reactive, ref, ComponentInternalInstance } from "vue";
+import { App, CustomDesktopApp } from "@/model/DesktopApp";
+
+const appManageRef = ref<InstanceType<typeof AppsManage> | null>(null);
+
+interface Props {
+    modelValue: boolean;
+    apps?: CustomDesktopApp[];
+}
+const props = withDefaults(defineProps<Props>(), {
+    apps: () => [],
+});
+
+const emit = defineEmits(["update:modelValue", "update:apps", "submit"]);
+
+const state = reactive<{
+    visible: boolean;
+    currentApp: CustomDesktopApp | null;
+}>({
+    visible: false,
+    currentApp: null,
+});
+
+const selectedApps = computed({
+    get() {
+        return props.apps;
+    },
+    set(value: CustomDesktopApp[]) {
+        emit("update:apps", value);
+    },
+});
+
+const visible = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value: boolean) {
+        emit("update:modelValue", value);
+    },
+});
+const submitHandle = () => {
+    emit("submit", state.currentApp);
+};
+const appSelection = (selection: CustomDesktopApp[]) => {
+    console.log("selection", selection);
+    if (selection.length === 0) {
+        state.currentApp = null;
+    } else {
+        state.currentApp = selection[0];
+    }
+
+    // console.log("---", selection);
+    // selectedApps.value = selection;
+};
+const getApps = (): App[] => {
+    if (appManageRef.value === null) return [];
+    return appManageRef.value.getApps();
+};
+const init = () => {
+    appManageRef.value?.getAllApp();
+};
+defineExpose({
+    getApps,
+});
+</script>
+
+<style lang="scss" scoped>
+.sfc-app-selector {
+    height: 600px;
+}
+</style>