ace-front-end 1.0.0

package/ace-install-system-ui/src/components/WebTerminal/MachineTerminals.vue

@@ -0,0 +1,187 @@
+<template>
+    <CustomDialog
+        v-model="visible"
+        destroy-on-close
+        :fullscreen="false"
+        @opened="opendHandle"
+        width="1200px"
+        :title="props.title"
+        bodyPadding="0"
+        :body-height="600"
+    >
+        <div class="sfc-machine-terminals">
+            <div class="left-box">
+                <el-table
+                    :header-cell-style="{
+                        fontWeight: 'bold',
+                        color: 'var(--install-system-color1)',
+                    }"
+                    :data="store.machines"
+                    row-key="id"
+                    ref="tableRef"
+                    class="host-table"
+                    height="100%"
+                    size="small"
+                    default-expand-all
+                    style="width: 100%"
+                    :tree-props="{ children: 'children' }"
+                >
+                    <el-table-column
+                        class-name="custom-first-column-small"
+                        prop="name"
+                        label="分组名称 / 主机IP"
+                        show-overflow-tooltip
+                    >
+                        <template #default="scope">
+                            <!-- style="font-weight:bold;" -->
+                            <span
+                                v-if="scope.row.type === 'group'"
+                                style="color: var(--el-text-color-primary); font-weight: bold"
+                                >{{ scope.row.category }}</span
+                            >
+                            <span v-else>{{ scope.row.ip }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="name" show-overflow-tooltip label="主机名称" />
+
+                    <el-table-column label="操作" width="100">
+                        <template #default="scope">
+                            <template v-if="scope.row.type !== 'group'">
+                                <!-- @click="connectTerminal(scope.row)" -->
+                                <el-button
+                                    size="small"
+                                    type="primary"
+                                    plain
+                                    @click="connectTerminal(scope.row)"
+                                    >连接终端</el-button
+                                >
+                            </template>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+            <div class="right-box">
+                <el-tabs
+                    class="custom-tabs"
+                    v-model="state.tabsValue"
+                    type="card"
+                    closable
+                    @tab-remove="removeTab"
+                >
+                    <el-tab-pane
+                        v-for="item in store.machineTerminals"
+                        :key="item.id"
+                        :label="item.ip"
+                        :name="item.id"
+                    >
+                        <div class="terminal">
+                            <WebTerminal
+                                :machine-id="item.id"
+                                machine-type="DESKTOP"
+                                :is-windows="item.os === 'WINDOWS'"
+                            ></WebTerminal>
+                        </div>
+                    </el-tab-pane>
+                </el-tabs>
+            </div>
+        </div>
+    </CustomDialog>
+</template>
+
+<script setup lang="ts">
+import CustomDialog from "../CustomDialog.vue";
+import { reactive, computed } from "vue";
+import WebTerminal from "./WebTerminal.vue";
+import { CustomDesktopMachineSecured, DesktopMachine } from "@/model/DesktopApp";
+import { useStore } from "@/stores";
+const store = useStore();
+interface Props {
+    modelValue: boolean;
+    title?: string;
+    // machine: DesktopMachine;
+    // machineType: "DESKTOP" | "SERVER";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    title: "终端",
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const visible = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value) {
+        emit("update:modelValue", value);
+    },
+});
+
+// const machine = computed(() => {
+//     return props.machine;
+// });
+
+const state = reactive<{
+    visible: boolean;
+    tabsValue: number;
+}>({
+    visible: false,
+    tabsValue: 0,
+});
+const connectTerminal = (data: DesktopMachine) => {
+    let isHas = store.machineTerminals.find((item) => item.id === data.id);
+    state.tabsValue = data.id;
+    if (isHas) return;
+    store.machineTerminals.push(data);
+};
+const removeTab = (id: number) => {
+    store.machineTerminals = store.machineTerminals.filter((item) => item.id !== id);
+    if (id !== state.tabsValue || store.machineTerminals.length === 0) return;
+    state.tabsValue = store.machineTerminals[0].id;
+};
+const opendHandle = () => {
+    state.tabsValue = store.machineTerminals[0].id;
+};
+defineExpose({});
+</script>
+
+<style scoped lang="scss">
+.sfc-machine-terminals {
+    // height: 450px;
+    height: 600px;
+    width: 100%;
+    :deep(.custom-tabs) {
+        height: 100%;
+        .el-tabs__header {
+            margin-bottom: 0;
+            .is-active {
+                border-bottom: none;
+            }
+        }
+        .el-tabs__content {
+            height: calc(100% - 40px);
+            .el-tab-pane {
+                height: 100%;
+                background-color: #21263e;
+            }
+        }
+        .el-tabs__nav.is-top {
+            border: none;
+        }
+    }
+    > .left-box {
+        height: 100%;
+        width: 400px;
+        background-color: var(--ace-bg-color7);
+        float: left;
+    }
+    > .right-box {
+        float: left;
+        height: 100%;
+        width: calc(100% - 400px);
+        .terminal {
+            padding-left: 16px;
+        }
+    }
+}
+</style>

package/ace-install-system-ui/src/components/WebTerminal/WebTerminal.vue

@@ -0,0 +1,136 @@
+<template>
+    <div id="terminal" ref="terminal"></div>
+</template>
+<script lang="ts" setup>
+import SockJS from "sockjs-client";
+import webstomp from "webstomp-client";
+import { onMounted, ref, nextTick, onBeforeUnmount } from "vue";
+import { Terminal } from "xterm";
+import { FitAddon } from "xterm-addon-fit";
+import "xterm/css/xterm.css";
+import { v4 as uuid } from "uuid";
+import { Client } from "webstomp-client";
+import { Jari } from "@jari-ace/app-bolts";
+const terminal = ref(null);
+
+const props = defineProps<{
+    machineType: "DESKTOP" | "SERVER";
+    machineId: number;
+    isWindows: boolean;
+}>();
+
+const xtermTheme = {
+    foreground: "#F8F8F8",
+    background: "#21263E",
+    selectionBackground: "#5DA5D5",
+    black: "#1E1E1D",
+    brightBlack: "#262625",
+    red: "#CE5C5C",
+    brightRed: "#FF7272",
+    green: "#5BCC5B",
+    brightGreen: "#72FF72",
+    yellow: "#CCCC5B",
+    brightYellow: "#FFFF72",
+    blue: "#5D5DD3",
+    brightBlue: "#7279FF",
+    magenta: "#BC5ED1",
+    brightMagenta: "#E572FF",
+    cyan: "#5DA5D5",
+    brightCyan: "#72F0FF",
+    white: "#F8F8F8",
+    brightWhite: "#FFFFFF",
+};
+
+let term: Terminal;
+let socket: WebSocket;
+let stompClient: Client;
+
+onMounted(async () => {
+    await nextTick();
+    initXterm();
+});
+
+onBeforeUnmount(() => {
+    stompClient.disconnect();
+    socket.close();
+    term.dispose();
+});
+
+function initXterm() {
+    term = new Terminal({
+        convertEol: true, //启用时，光标将设置为下一行的开头
+        disableStdin: false, //是否应禁用输入
+        cursorStyle: "underline",
+        cursorBlink: true,
+        theme: xtermTheme,
+        windowsMode: props.isWindows,
+        screenReaderMode: true,
+        rows: 33,
+        windowOptions: {
+            fullscreenWin: true,
+            setWinSizePixels: true,
+            getWinSizePixels: true,
+        },
+    });
+
+    // canvas背景全屏
+    const fitAddon = new FitAddon();
+    term.loadAddon(fitAddon);
+    fitAddon.fit();
+    // 创建terminal实例
+    term.open(terminal.value as unknown as HTMLElement);
+
+    window.addEventListener("resize", resizeScreen);
+    function resizeScreen() {
+        try {
+            fitAddon.fit();
+        } catch (e) {
+            console.log(e);
+        }
+    }
+    const subscriberId = uuid();
+    var url = import.meta.env.DEV ? "/ace/ssh-proxy" : "/ssh-proxy";
+    socket = new SockJS(url, undefined, {
+        sessionId: () => subscriberId,
+    });
+    stompClient = webstomp.over(socket, {
+        debug: false,
+    });
+    const encPubKey = document.cookie
+        .split(";")
+        .find((cookie) => cookie.trim().startsWith("JARI-ACE-ENC-PUB-KEY="))
+        ?.split("=")[1];
+    const msgHeader = {
+        "X-SUBSCRIBER-ID": subscriberId,
+    };
+    stompClient.connect(
+        {
+            "X-MACHINE-ID": props.machineId.toString(),
+            "X-MACHINE-TYPE": props.machineType,
+            "X-SUBSCRIBER-ID": subscriberId,
+            "X-SESSION-PUB-KEY": encPubKey,
+        },
+        function () {
+            stompClient.subscribe(
+                `/ssh-stream/${subscriberId}`,
+                (msg) => {
+                    term.write(msg.body);
+                },
+                msgHeader
+            );
+            term.onData((key) => {
+                stompClient.send("/web-ssh/run", key, msgHeader);
+            });
+            term.focus();
+        },
+        function (err) {
+            console.error(err);
+        }
+    );
+}
+</script>
+<style lang="scss" scoped>
+#terminal {
+    height: 600px;
+}
+</style>

package/ace-install-system-ui/src/components/WebTerminal/WebTerminalDialog.vue

@@ -0,0 +1,80 @@
+<template>
+    <CustomDialog
+        v-model="visible"
+        :fullscreen="false"
+        :modal="false"
+        width="1000px"
+        :showFooter="false"
+        :title="props.title"
+        bodyPadding="0"
+        :body-height="632"
+    >
+        <!-- <el-scrollbar ref="scrollbarRef" height="540" always v-loading="state.loading">
+        </el-scrollbar> -->
+        <div class="sfc-web-therminal-dialog">
+            <WebTerminal
+                :machine-id="machine.id"
+                machine-type="DESKTOP"
+                :is-windows="machine.os === 'WINDOWS'"
+            ></WebTerminal>
+        </div>
+
+        <!-- <template #footer>
+            <el-button @click="visible = false">取消</el-button>
+        </template> -->
+    </CustomDialog>
+</template>
+
+<script setup lang="ts">
+import CustomDialog from "../CustomDialog.vue";
+import { reactive, onMounted, ref, getCurrentInstance, computed } from "vue";
+import WebTerminal from "./WebTerminal.vue";
+import { DesktopMachine } from "@/model/DesktopApp";
+// import { ElScrollbar } from "element-plus";
+// import { clone } from "lodash-es";
+// import { App } from "@/model/DesktopApp";
+// import { ElNotification } from "element-plus";
+
+interface Props {
+    modelValue: boolean;
+    title?: string;
+    machine: DesktopMachine;
+    machineType: "DESKTOP" | "SERVER";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    title: "终端",
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const visible = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value) {
+        emit("update:modelValue", value);
+    },
+});
+
+const machine = computed(() => {
+    return props.machine;
+});
+
+const state = reactive<{
+    visible: boolean;
+}>({
+    visible: false,
+});
+const submitHandle = () => {};
+defineExpose({});
+</script>
+
+<style scoped lang="scss">
+.sfc-web-therminal-dialog {
+    padding: 0 0 0 16px;
+    background-color: #21263e;
+    height: 100%;
+    min-height: 400px;
+}
+</style>

package/ace-install-system-ui/src/env.d.ts

@@ -0,0 +1,15 @@
+/*
+ * 版权所有 (c) 2022 江苏杰瑞信息科技有限公司
+ *
+ * 此文件属于JARI.ACE平台项目，修改、分发必须遵守杰瑞信科商业软件许可协议
+ */
+
+/// <reference types="vite/client" />
+interface ImportMetaEnv {
+    readonly VITE_PORT: number;
+    readonly VITE_HOST: string;
+    readonly VITE_APP_SHORT_NAME: string;
+    readonly VITE_LOG_LEVEL: string;
+    readonly VITE_SERVER_URL: string;
+    readonly VITE_REALM_ID: string;
+}

package/ace-install-system-ui/src/init.ts

@@ -0,0 +1,22 @@
+/*
+ * 版权所有 (c) 2022 江苏杰瑞信息科技有限公司
+ *
+ * 此文件属于JARI.ACE平台项目，修改、分发必须遵守杰瑞信科商业软件许可协议
+ */
+
+import * as pkg from "../package.json";
+import { Jari } from "@jari-ace/app-bolts";
+
+Jari.Ace.appDescriptor = {
+    getShortName: () => import.meta.env.VITE_APP_SHORT_NAME,
+    getVersion: () => pkg.version,
+    getRealmName: () => import.meta.env.VITE_REALM_ID,
+    env: {
+        getEnv: () => import.meta.env.MODE as Jari.Ace.EnvironmentMode,
+        isDevMode: () => import.meta.env.MODE === Jari.Ace.ENV_DEV_MODE,
+    },
+};
+
+if (typeof (window as any).global === "undefined") {
+    (window as any).global = window;
+}

package/ace-install-system-ui/src/locales/lang/en/common.json

@@ -0,0 +1,17 @@
+{
+    "closeText": "close",
+    "delText": "delete",
+    "light": "Bright color theme",
+    "loadingText": "Loading",
+    "okText": "confirm",
+    "queryText": "query",
+    "redo": "Refresh",
+    "resetText": "Reset",
+    "saveText": "preservation",
+    "searchText": "search",
+    "cancelText": "cancel",
+    "dark": "Dark theme",
+    "inputText": "Please enter",
+    "chooseText": "Please select",
+    "back": "return"
+}

package/ace-install-system-ui/src/locales/lang/en/errors.json

@@ -0,0 +1,40 @@
+{
+  "connFailed": "Unable to connect to server",
+  "errorClass": "Exception Type",
+  "http413": "The payload content of the request is too large (Http 413)",
+  "http502": "The gateway cannot connect to the specified service resource (Http 502)",
+  "http400": "Bad request (Http 400)",
+  "http401": "You are not logged in or the access token obtained after the last login has expired. Please log in again",
+  "http403": "Insufficient permission, access denied (Http 403)",
+  "http404": "The requested resource was not found (Http 404)",
+  "http405": "The server is used to disallow method requests (Http 405)",
+  "http406": "The server does not accept the requested data (Http 406)",
+  "http408": "Service closed idle timeout connection (Http 408)",
+  "http409": "Resource version conflict (Http 409)",
+  "http410": "The resource has been permanently migrated (Http 410)",
+  "http411": "Missing content length request header (Http 411)",
+  "http412": "Prerequisites not met (Http 412)",
+  "http414": "URI too long (Http 414)",
+  "http415": "The requested payload content format is not supported (Http 415)",
+  "http416": "The requested content is out of range. Incorrect Range request header (Http 416)",
+  "http422": "Unable to process request data (Http 422)",
+  "http425": "The request may be replayed, and the server refuses to process it (Http 425)",
+  "http429": "Too many requests were sent in a certain period of time (Http 429)",
+  "http431": "The request header is too large (Http 431)",
+  "http501": "The server does not support the method of responding to requests (Http 501)",
+  "http503": "The requested service does not accept new requests (Http 503)",
+  "http504": "Gateway timeout waiting for service response (Http 504)",
+  "http505": "Unsupported Http version (Http 505)",
+  "position": "Throw position",
+  "rootErrorClass": "Root Exception Type",
+  "rootErrorMsg": "Root Exception Message",
+  "rootPosition": "Root Exception Location",
+  "unknown": "Unknown network exception occurred",
+  "unknownApiError": "Unknown exception occurred on the server. Details have been saved to the log file",
+  "complete": "Completed",
+  "http404-stop-code": "404, will automatically return to the previous page at the end",
+  "http404-tip": "Your website has encountered some problems. The system is optimizing and reporting fault information. We will improve and reduce this situation in the future",
+  "return-home": "Back to Home",
+  "return-to-prev": "Back to previous page",
+  "errors.http404-stop-code": ""
+}

package/ace-install-system-ui/src/locales/lang/en/layout.json

@@ -0,0 +1,7 @@
+{
+    "work-bench": "workbench",
+    "edit-profile": "personal data",
+    "logout": "Log out",
+    "modify-psw": "Change Password",
+    "age": "Age and sex"
+}

package/ace-install-system-ui/src/locales/lang/en.ts

@@ -0,0 +1,14 @@
+/*
+ * 版权所有 (c) 2022 江苏杰瑞信息科技有限公司
+ *
+ * 此文件属于JARI.ACE平台项目，修改、分发必须遵守杰瑞信科商业软件许可协议
+ */
+
+import { genMessage } from "@jari-ace/app-bolts";
+
+const modules = import.meta.glob("./en/**/*.json", { eager: true });
+export default {
+    message: {
+        ...genMessage(modules as Record<string, Record<string, any>>),
+    },
+};

package/ace-install-system-ui/src/locales/lang/zh-CN/common.json

@@ -0,0 +1,17 @@
+{
+    "okText": "确认",
+    "closeText": "关闭",
+    "cancelText": "取消",
+    "loadingText": "加载中...",
+    "saveText": "保存",
+    "delText": "删除",
+    "resetText": "重置",
+    "searchText": "搜索",
+    "queryText": "查询",
+    "inputText": "请输入",
+    "chooseText": "请选择",
+    "redo": "刷新",
+    "back": "返回",
+    "light": "亮色主题",
+    "dark": "黑暗主题"
+}

package/ace-install-system-ui/src/locales/lang/zh-CN/errors.json

@@ -0,0 +1,42 @@
+{
+    "http400": "错误的请求(Http 400)",
+    "http401": "未登录或者上次登录后获取的访问令牌已过期，请重新登录",
+    "http403": "权限不足，拒绝访问(Http 403)",
+    "http404": "未找到请求的资源(Http 404)",
+    "http405": "使用了服务器不允许方法请求(Http 405)",
+    "http406": "服务器不接受请求的数据(Http 406)",
+    "http408": "服务已关闭空闲超时连接(Http 408)",
+    "http409": "资源版本冲突(Http 409)",
+    "http410": "资源已永久迁移(Http 410)",
+    "http411": "缺少content-length请求头(Http 411)",
+    "http412": "先决条件不满足(Http 412)",
+    "http413": "请求负载(payload)内容过大(Http 413)",
+    "http414": "URI过长(Http 414)",
+    "http415": "不支持请求的负载内容格式(Http 415)",
+    "http416": "请求的内容超出范围，不正确的Range请求头(Http 416)",
+    "http422": "无法处理请求数据(Http 422)",
+    "http425": "请求可能被重放，服务器拒绝处理(Http 425)",
+    "http429": "一定时间内发送了过多的请求(Http 429)",
+    "http431": "请求头过大(Http 431)",
+    "http500": "服务器内部错误",
+    "http501": "服务器不支持响应请求的方法(Http 501)",
+    "http502": "网关无法连接到指定服务资源(Http 502)",
+    "http503": "请求的服务不接受新的请求(Http 503)",
+    "http504": "网关等待服务响应超时(Http 504)",
+    "http505": "不支持的Http版本(Http 505)",
+    "requestTimeout": "请求超时，请检查网络",
+    "unknown": "发生HTTP异常",
+    "connFailed": "连接失败，请检查网络",
+    "unknownApiError": "服务器发生未知异常，详细信息已保存到日志文件中",
+    "errorClass": "异常类型",
+    "position": "抛出位置",
+    "rootErrorMsg": "根异常消息",
+    "rootErrorClass": "根异常类型",
+    "rootPosition": "根异常位置",
+    "http404-tip": "你的网页遇到了一些问题，系统正在优化和上报故障信息，我们在未来将改善和减少这种情况的发生.",
+    "http404-stop-code": "404，结束时会自动返回前一页面",
+    "return-to-prev": "返回上一页",
+    "return-home": "返回首页",
+    "complete": "已完成",
+    "requestError": "请求发生异常："
+}

package/ace-install-system-ui/src/locales/lang/zh-CN/layout.json

@@ -0,0 +1,7 @@
+{
+    "work-bench": "工作台",
+    "modify-psw": "修改密码",
+    "edit-profile": "个人资料",
+    "logout": "退出登录",
+    "age": "年龄性别"
+}

package/ace-install-system-ui/src/locales/lang/zh-CN.ts

@@ -0,0 +1,15 @@
+/*
+ * 版权所有 (c) 2022 江苏杰瑞信息科技有限公司
+ *
+ * 此文件属于JARI.ACE平台项目，修改、分发必须遵守杰瑞信科商业软件许可协议
+ */
+
+import { genMessage } from "@jari-ace/app-bolts";
+
+const modules = import.meta.glob("./zh-CN/**/*.json", { eager: true });
+console.log(modules);
+export default {
+    message: {
+        ...genMessage(modules as Record<string, Record<string, any>>),
+    },
+};

package/ace-install-system-ui/src/locales/setupI18n.ts

@@ -0,0 +1,14 @@
+/*
+ * 版权所有 (c) 2022 江苏杰瑞信息科技有限公司
+ *
+ * 此文件属于JARI.ACE平台项目，修改、分发必须遵守杰瑞信科商业软件许可协议
+ */
+
+import { LocaleType, setupI18n as setup } from "@jari-ace/app-bolts";
+import type { App } from "vue";
+import { useLocaleStoreWithOut } from "@/stores/modules/locale";
+
+export async function setupI18n(app: App, locale?: LocaleType): Promise<ReturnType<typeof setup>> {
+    const messages = await import(`./lang/${locale}.ts`);
+    return setup(app, messages, useLocaleStoreWithOut(), locale);
+}

package/ace-install-system-ui/src/main.ts

@@ -0,0 +1,28 @@
+import "./init";
+import {createApp} from "vue";
+import App from "./App.vue";
+import router from "./router";
+import {createPinia} from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+import "./styles/main.scss";
+import "vue-simple-uploader/dist/style.css";
+import uploader from "vue-simple-uploader";
+import AceVueComponent from "@jari-ace/element-plus-component/index";
+
+import ElementPlus from "element-plus";
+import {setupI18n} from "@/locales/setupI18n";
+import {setupStore} from "@jari-ace/app-bolts";
+import {useLocaleStore} from "@/stores/modules/locale";
+
+const app = createApp(App);
+const store = setupStore(app);
+
+const localeStore = useLocaleStore(store);
+setupI18n(app, localeStore.getLocale).then(() => {
+    app.use(router);
+    app.use(createPinia().use(piniaPluginPersistedstate));
+    app.use(uploader);
+    app.use(AceVueComponent);
+    app.use(ElementPlus);
+    app.mount("#app");
+});

package/ace-install-system-ui/src/model/Common.ts

@@ -0,0 +1,8 @@
+export type ComponentMode = "select" | "manage";
+
+export type HeaderMenuItemType = "deviceManage" | "taskList" | "uploader" | "logout" | "appManage";
+
+export enum MachineType {
+    DESKTOP,
+    SERVER,
+}