refactor: web界面添加

.gitignore

@@ -31,4 +31,6 @@ build/
 !**/src/test/**/build/
 
 ### VS Code ###
-.vscode/
+**/.vscode/
+!**/.vscode/extensions.json
+!**/.vscode/settings.json

web/.gitignore

@@ -16,6 +16,7 @@ dist-ssr
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
+!.vscode/settings.json
 .idea
 .DS_Store
 *.suo

web/.vscode/extensions.json

@@ -0,0 +1,19 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "Vue.vscode-typescript-vue-plugin",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "usernamehw.errorlens",
+    "editorconfig.editorconfig",
+    "lihuiwang.vue-alias-skip",
+    "DavidAnson.vscode-markdownlint",
+    "formulahendry.auto-close-tag",
+    "formulahendry.auto-complete-tag",
+    "formulahendry.auto-rename-tag",
+    "lokalise.i18n-ally",
+    "sdras.vue-vscode-snippets",
+    "mrmlnc.vscode-less",
+    "zxh404.vscode-proto3"
+  ]
+}

web/.vscode/settings.json

@@ -0,0 +1,79 @@
+{
+  "editor.detectIndentation": false,
+  "editor.insertSpaces": true,
+  "editor.tabSize": 2,
+  "editor.formatOnType": true,
+  "editor.formatOnSave": true,
+  "editor.lineHeight": 23,
+  "files.encoding": "utf8",
+  "files.eol": "\n",
+  "files.trimFinalNewlines": true,
+  "files.trimTrailingWhitespace": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true,
+    "source.fixAll.eslint": true
+  },
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue", "json"],
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[less]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "i18n-ally.localesPaths": ["src/languages/modules"],
+  "i18n-ally.sourceLanguage": "ZH",
+  "i18n-ally.displayLanguage": "ZH",
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.sortKeys": true,
+  "i18n-ally.namespace": true,
+  "i18n-ally.extract.keygenStrategy": "random",
+  "i18n-ally.extract.keygenStyle": "camelCase",
+  "i18n-ally.enabledParsers": ["json", "yaml", "js"],
+  "i18n-ally.enabledFrameworks": ["vue", "react"],
+  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/bower_components": true,
+    "**/target": true,
+    "**/logs": true,
+    "**/dist": true,
+    "**/*.log*": true,
+    "**/.git": true,
+    "**/.gitignore": true,
+    "**/.svn": true,
+    "**/.DS_Store": true,
+    "**/.idea": true,
+    "**/.vscode": false,
+    "**/yarn.lock": true,
+    "**/tmp": true
+  },
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/*.js": {
+      "when": "$(basename).ts"
+    },
+    "node_modules": true
+  }
+}

web/src/components/DistributePost.vue

@@ -0,0 +1,63 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :span="10"><el-input v-model="bodyStr" :rows="2" type="textarea" placeholder="Please input" /></el-col>
+    <el-col :span="4"><el-button type="primary">Primary</el-button></el-col>
+    <el-col :span="10">
+      <pre style="border: 1px solid #42b883aa">{{ bodyJson }}</pre>
+      <pre style="border: 1px solid #42b883aa">{{ resultStr }}</pre>
+    </el-col>
+  </el-row>
+  <div class="distribute-box">
+    <div><el-input v-model="bodyStr" :rows="2" type="textarea" placeholder="Please input" /></div>
+    <div><el-button type="primary">Primary</el-button></div>
+    <div>
+      <pre style="border: 1px solid #42b883aa">{{ bodyJson }}</pre>
+      <pre style="border: 1px solid #42b883aa">{{ resultStr }}</pre>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+const pops = defineProps({
+  url: {
+    type: String,
+    require: true,
+    default: "",
+  },
+  body: {
+    type: Object,
+    require: true,
+    default: {},
+  },
+});
+const bodyStr = ref(JSON.stringify(pops.body));
+const resultStr = ref("");
+const bodyJson = computed(() => {
+  try {
+    return JSON.parse(bodyStr);
+  } catch (error) {
+    console.log(error);
+    return "不是Json格式，请检查！！！";
+  }
+});
+</script>
+<style scoped lang="scss">
+.distribute-box {
+  height: 100%;
+  border: 1px solid #9c8b8b57;
+  border-radius: 6px;
+  // display: flex;
+  // flex-direction: row;
+  // justify-content: center;
+  // align-items: center;
+  // padding: 20px;
+  // > div {
+  //   height: 100%;
+  // }
+  // :first-child {
+  //   flex: 1;
+  // }
+  // :last-child {
+  //   flex: 1;
+  // }
+}
+</style>

web/src/pages/GatherPolicy.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Policy</div>
+</template>

web/src/pages/TaskCommand.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Command</div>
+</template>

web/src/pages/TaskConfig.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Conifg</div>
+</template>

web/src/pages/TaskStatus.vue

@@ -0,0 +1,13 @@
+<template>
+  <distribute-post url="config/api/v1/taskStatus" :body="body"></distribute-post>
+</template>
+<script setup lang="ts">
+const body = {
+  taskId: "518BB5B8-7551-418A-BFDD-A90C1CC66F03",
+  subtaskId: "9480300E-7BDF-4D7A-BA64-7A059880A694",
+  xdschemaId: "C4552850-3D50-4934-9C4A-580CD447CECE",
+  instanceId: "7e1cb874-ed07-4d10-a980-taskStatus",
+  ident: "典型轨道交通运行控制网拓扑网络场景",
+  status: 0,
+};
+</script>

web/src/pages/login.vue

@@ -1,8 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div>登录界面</div>
-  <HelloWorld></HelloWorld>
-</template>
-
-<style scoped></style>

web/src/router/index.ts

@@ -10,12 +10,27 @@ const routes = [
       {
         path: "/home",
         name: "首页",
-        component: () => import("@/pages/home.vue"),
+        component: () => import("@/pages/HomeIndex.vue"),
       },
       {
-        path: "/task",
-        name: "任务状态下发",
-        component: () => import("@/pages/home.vue"),
+        path: "/task/status",
+        name: "任务状态",
+        component: () => import("@/pages/TaskStatus.vue"),
+      },
+      {
+        path: "/task/command",
+        name: "控制命令",
+        component: () => import("@/pages/TaskCommand.vue"),
+      },
+      {
+        path: "/task/config",
+        name: "配置参数",
+        component: () => import("@/pages/TaskConfig.vue"),
+      },
+      {
+        path: "/gather/policy",
+        name: "采集配置",
+        component: () => import("@/pages/GatherPolicy.vue"),
       },
     ],
   },

web/types/auto-imports.d.ts

@@ -297,7 +297,7 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
 }
 // for vue template auto import
 import { UnwrapRef } from 'vue'

web/types/components.d.ts

@@ -7,15 +7,21 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    DistributePost: typeof import('./../src/components/DistributePost.vue')['default']
+    ElAside: typeof import('element-plus/es')['ElAside']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCol: typeof import('element-plus/es')['ElCol']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElMain: typeof import('element-plus/es')['ElMain']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElRow: typeof import('element-plus/es')['ElRow']
     HelloWorld: typeof import('./../src/components/HelloWorld.vue')['default']
-    IconEpInfoFilled: typeof import('~icons/ep/info-filled')['default']
     IconEpSuccessFilled: typeof import('~icons/ep/success-filled')['default']
-    IconEpWarningFilled: typeof import('~icons/ep/warning-filled')['default']
-    IconEpWarnTriangleFilled: typeof import('~icons/ep/warn-triangle-filled')['default']
     IconSvg: typeof import('./../src/components/icon-svg/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    Svg: typeof import('./../src/components/icon/svg.vue')['default']
   }
 }