diff --git a/UI2.0/.editorconfig b/UI2.0/.editorconfig
new file mode 100644
index 0000000000000000000000000000000000000000..9d08a1a828a3bd2d60de3952744df29f9add27fa
--- /dev/null
+++ b/UI2.0/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/UI2.0/.gitignore b/UI2.0/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..eda972c4db1c5ae573adf8bd12512918e4e193a9
--- /dev/null
+++ b/UI2.0/.gitignore
@@ -0,0 +1,36 @@
+package-lock.json
+.vscode
+.DS_Store
+.thumbs.db
+node_modules
+
+
+# Quasar core related directories
+.quasar
+/dist
+
+# Cordova related directories and files
+/src-cordova/node_modules
+/src-cordova/platforms
+/src-cordova/plugins
+/src-cordova/www
+
+# Capacitor related directories and files
+/src-capacitor/www
+/src-capacitor/node_modules
+
+# BEX related directories and files
+/src-bex/www
+/src-bex/js/core
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
diff --git a/UI2.0/.postcssrc.js b/UI2.0/.postcssrc.js
new file mode 100644
index 0000000000000000000000000000000000000000..1174fe52b74b2c8f3cb52da36e85b19ccd0e6c02
--- /dev/null
+++ b/UI2.0/.postcssrc.js
@@ -0,0 +1,8 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  plugins: [
+    // to edit target browsers: use "browserslist" field in package.json
+    require('autoprefixer')
+  ]
+}
diff --git a/UI2.0/README.md b/UI2.0/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..8463df3981d4b7a2dc835be29cf9d45eb11d6810
--- /dev/null
+++ b/UI2.0/README.md
@@ -0,0 +1,24 @@
+# Quasar App (a-tune-ui-todo)
+
+A Quasar Framework app
+
+## Install the dependencies
+```bash
+npm install
+```
+
+### Start the app in development mode (hot-code reloading, error reporting, etc.)
+```bash
+quasar dev
+```
+
+### The result of the diagram
+![Image](./img/sample.JPG)
+
+### Build the app for production
+```bash
+quasar build
+```
+
+### Customize the configuration
+See [Configuring quasar.conf.js](https://quasar.dev/quasar-cli/quasar-conf-js).
diff --git a/UI2.0/babel.config.js b/UI2.0/babel.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..c51e84dbd871fb55f8579f200501e4395188ceff
--- /dev/null
+++ b/UI2.0/babel.config.js
@@ -0,0 +1,15 @@
+
+
+module.exports = api => {
+  return {
+    presets: [
+      [
+        '@quasar/babel-preset-app',
+        api.caller(caller => caller && caller.target === 'node')
+          ? { targets: { node: 'current' } }
+          : {}
+      ]
+    ]
+  }
+}
+
diff --git a/UI2.0/img/sample.JPG b/UI2.0/img/sample.JPG
new file mode 100644
index 0000000000000000000000000000000000000000..bb7c5b8a721f6f8b800450c8b9e4104cbde8ebcd
Binary files /dev/null and b/UI2.0/img/sample.JPG differ
diff --git a/UI2.0/jsconfig.json b/UI2.0/jsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..6318e483235be4da1931c1f17a0e0f68703bcabf
--- /dev/null
+++ b/UI2.0/jsconfig.json
@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "src/*": [
+        "src/*"
+      ],
+      "app/*": [
+        "*"
+      ],
+      "components/*": [
+        "src/components/*"
+      ],
+      "layouts/*": [
+        "src/layouts/*"
+      ],
+      "pages/*": [
+        "src/pages/*"
+      ],
+      "assets/*": [
+        "src/assets/*"
+      ],
+      "boot/*": [
+        "src/boot/*"
+      ],
+      "vue$": [
+        "node_modules/vue/dist/vue.runtime.esm-bundler.js"
+      ]
+    }
+  },
+  "exclude": [
+    "dist",
+    ".quasar",
+    "node_modules"
+  ]
+}
diff --git a/UI2.0/package.json b/UI2.0/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..f850cd8eaae1a4accd8a3569603c39c830b46588
--- /dev/null
+++ b/UI2.0/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "a-tune-ui-todo",
+  "version": "0.0.1",
+  "description": "A Quasar Framework app",
+  "productName": "Quasar App",
+  "author": "yang-ting-chen <bellahchate@qq.com>",
+  "private": true,
+  "scripts": {
+    "test": "echo \"No test specified\" && exit 0"
+  },
+  "dependencies": {
+    "@quasar/extras": "^1.0.0",
+    "core-js": "^3.6.5",
+    "echarts": "^5.3.0",
+    "quasar": "^2.0.0",
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0",
+    "vuex": "^4.0.1"
+  },
+  "devDependencies": {
+    "@quasar/app": "^3.0.0"
+  },
+  "browserslist": [
+    "last 10 Chrome versions",
+    "last 10 Firefox versions",
+    "last 4 Edge versions",
+    "last 7 Safari versions",
+    "last 8 Android versions",
+    "last 8 ChromeAndroid versions",
+    "last 8 FirefoxAndroid versions",
+    "last 10 iOS versions",
+    "last 5 Opera versions"
+  ],
+  "engines": {
+    "node": ">= 12.22.1",
+    "npm": ">= 6.13.4",
+    "yarn": ">= 1.21.1"
+  }
+}
diff --git a/UI2.0/public/favicon.ico b/UI2.0/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..ae7bbdb712f8ce9fe49761b68ef3a2d4c51606f9
Binary files /dev/null and b/UI2.0/public/favicon.ico differ
diff --git a/UI2.0/public/icons/favicon-128x128.png b/UI2.0/public/icons/favicon-128x128.png
new file mode 100644
index 0000000000000000000000000000000000000000..14011761929f4ffbef81be318a347c0032eb6f42
Binary files /dev/null and b/UI2.0/public/icons/favicon-128x128.png differ
diff --git a/UI2.0/public/icons/favicon-16x16.png b/UI2.0/public/icons/favicon-16x16.png
new file mode 100644
index 0000000000000000000000000000000000000000..679063a314fd3c64d24ce2d10fa28996381e65ef
Binary files /dev/null and b/UI2.0/public/icons/favicon-16x16.png differ
diff --git a/UI2.0/public/icons/favicon-32x32.png b/UI2.0/public/icons/favicon-32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..fd1fbc6f1b21f4513d47cc7e2e40699fb731b15f
Binary files /dev/null and b/UI2.0/public/icons/favicon-32x32.png differ
diff --git a/UI2.0/public/icons/favicon-96x96.png b/UI2.0/public/icons/favicon-96x96.png
new file mode 100644
index 0000000000000000000000000000000000000000..e93b80a09c82e1c1a0be4dfd7fdd032e76f77096
Binary files /dev/null and b/UI2.0/public/icons/favicon-96x96.png differ
diff --git a/UI2.0/quasar.conf.js b/UI2.0/quasar.conf.js
new file mode 100644
index 0000000000000000000000000000000000000000..e3f1fb6c49b28ac127a095329ea6cc0259b88f4c
--- /dev/null
+++ b/UI2.0/quasar.conf.js
@@ -0,0 +1,221 @@
+/*
+ * This file runs in a Node context (it's NOT transpiled by Babel), so use only
+ * the ES6 features that are supported by your Node version. https://node.green/
+ */
+
+// Configuration for your app
+// https://quasar.dev/quasar-cli/quasar-conf-js
+
+const { configure } = require('quasar/wrappers');
+
+module.exports = configure(function (ctx) {
+  return {
+    // https://quasar.dev/quasar-cli/supporting-ts
+    supportTS: false,
+
+    // https://quasar.dev/quasar-cli/prefetch-feature
+    // preFetch: true,
+
+    // app boot file (/src/boot)
+    // --> boot files are part of "main.js"
+    // https://quasar.dev/quasar-cli/boot-files
+    boot: [
+    ],
+
+    // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
+    css: [
+      'app.scss'
+    ],
+
+    // https://github.com/quasarframework/quasar/tree/dev/extras
+    extras: [
+      // 'ionicons-v4',
+      // 'mdi-v5',
+      // 'fontawesome-v5',
+      // 'eva-icons',
+      // 'themify',
+      // 'line-awesome',
+      // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
+
+      'roboto-font', // optional, you are not bound to it
+      'material-icons', // optional, you are not bound to it
+    ],
+
+    // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
+    build: {
+      vueRouterMode: 'hash', // available values: 'hash', 'history'
+
+      // transpile: false,
+      // publicPath: '/',
+
+      // Add dependencies for transpiling with Babel (Array of string/regex)
+      // (from node_modules, which are by default not transpiled).
+      // Applies only if "transpile" is set to true.
+      // transpileDependencies: [],
+
+      // rtl: true, // https://quasar.dev/options/rtl-support
+      // preloadChunks: true,
+      // showProgress: false,
+      // gzip: true,
+      // analyze: true,
+
+      // Options below are automatically set depending on the env, set them if you want to override
+      // extractCSS: false,
+
+      // https://quasar.dev/quasar-cli/handling-webpack
+      // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
+      chainWebpack (/* chain */) {
+        //
+      },
+    },
+
+    // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
+    devServer: {
+      server: {
+        type: 'http'
+      },
+      port: 8080,
+      open: true // opens browser window automatically
+    },
+
+    // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
+    framework: {
+      config: {},
+
+      // iconSet: 'material-icons', // Quasar icon set
+      // lang: 'en-US', // Quasar language pack
+
+      // For special cases outside of where the auto-import strategy can have an impact
+      // (like functional components as one of the examples),
+      // you can manually specify Quasar components/directives to be available everywhere:
+      //
+      // components: [],
+      // directives: [],
+
+      // Quasar plugins
+      plugins: []
+    },
+
+    // animations: 'all', // --- includes all animations
+    // https://quasar.dev/options/animations
+    animations: [],
+
+    // https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr
+    ssr: {
+      pwa: false,
+
+      // manualStoreHydration: true,
+      // manualPostHydrationTrigger: true,
+
+      prodPort: 3000, // The default port that the production server should use
+                      // (gets superseded if process.env.PORT is specified at runtime)
+
+      maxAge: 1000 * 60 * 60 * 24 * 30,
+        // Tell browser when a file from the server should expire from cache (in ms)
+
+      chainWebpackWebserver (/* chain */) {
+        //
+      },
+
+      middlewares: [
+        ctx.prod ? 'compression' : '',
+        'render' // keep this as last one
+      ]
+    },
+
+    // https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa
+    pwa: {
+      workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
+      workboxOptions: {}, // only for GenerateSW
+
+      // for the custom service worker ONLY (/src-pwa/custom-service-worker.[js|ts])
+      // if using workbox in InjectManifest mode
+      chainWebpackCustomSW (/* chain */) {
+        //
+      },
+
+      manifest: {
+        name: `Quasar App`,
+        short_name: `Quasar App`,
+        description: `A Quasar Framework app`,
+        display: 'standalone',
+        orientation: 'portrait',
+        background_color: '#ffffff',
+        theme_color: '#027be3',
+        icons: [
+          {
+            src: 'icons/icon-128x128.png',
+            sizes: '128x128',
+            type: 'image/png'
+          },
+          {
+            src: 'icons/icon-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: 'icons/icon-256x256.png',
+            sizes: '256x256',
+            type: 'image/png'
+          },
+          {
+            src: 'icons/icon-384x384.png',
+            sizes: '384x384',
+            type: 'image/png'
+          },
+          {
+            src: 'icons/icon-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          }
+        ]
+      }
+    },
+
+    // Full list of options: https://quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova
+    cordova: {
+      // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
+    },
+
+    // Full list of options: https://quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor
+    capacitor: {
+      hideSplashscreen: true
+    },
+
+    // Full list of options: https://quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
+    electron: {
+      bundler: 'packager', // 'packager' or 'builder'
+
+      packager: {
+        // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
+
+        // OS X / Mac App Store
+        // appBundleId: '',
+        // appCategoryType: '',
+        // osxSign: '',
+        // protocol: 'myapp://path',
+
+        // Windows only
+        // win32metadata: { ... }
+      },
+
+      builder: {
+        // https://www.electron.build/configuration/configuration
+
+        appId: 'a-tune-ui-todo'
+      },
+
+      // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
+      chainWebpackMain (/* chain */) {
+        // do something with the Electron main process Webpack cfg
+        // extendWebpackMain also available besides this chainWebpackMain
+      },
+
+      // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
+      chainWebpackPreload (/* chain */) {
+        // do something with the Electron main process Webpack cfg
+        // extendWebpackPreload also available besides this chainWebpackPreload
+      },
+    }
+  }
+});
diff --git a/UI2.0/src/App.vue b/UI2.0/src/App.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f391960091a7141b2653185ea2485ce5e2f7b6af
--- /dev/null
+++ b/UI2.0/src/App.vue
@@ -0,0 +1,10 @@
+<template>
+  <router-view />
+</template>
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'App'
+})
+</script>
diff --git a/UI2.0/src/README.md b/UI2.0/src/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..950c7fad14a395684a94647f6499af5c9a0e5bb0
--- /dev/null
+++ b/UI2.0/src/README.md
@@ -0,0 +1,6 @@
+# 当前存在问题：
+1. “支持14大类50款应用调优”模块的图片下方的“56px”的距离无法实现，因为超过了这一模块的整体界面
+2. 字体问题
+3. 执行命令界面的textbox点击后全屏还未实现
+4. 控制面板的表格分页还未实现
+5. 控制面板添加卡片动作设置有问题
\ No newline at end of file
diff --git a/UI2.0/src/assets/contact-us/close-default.png b/UI2.0/src/assets/contact-us/close-default.png
new file mode 100644
index 0000000000000000000000000000000000000000..661020565789f4622408485f38dc8d02da366701
Binary files /dev/null and b/UI2.0/src/assets/contact-us/close-default.png differ
diff --git a/UI2.0/src/assets/contact-us/close-highlight.png b/UI2.0/src/assets/contact-us/close-highlight.png
new file mode 100644
index 0000000000000000000000000000000000000000..6985c68f7a38bb4a6635f19da5aeed7fe5798c9b
Binary files /dev/null and b/UI2.0/src/assets/contact-us/close-highlight.png differ
diff --git a/UI2.0/src/assets/control-panel/1.png b/UI2.0/src/assets/control-panel/1.png
new file mode 100644
index 0000000000000000000000000000000000000000..c06e7b51cdaaa06e4c321f797f2003014ea429d4
Binary files /dev/null and b/UI2.0/src/assets/control-panel/1.png differ
diff --git a/UI2.0/src/assets/control-panel/10.png b/UI2.0/src/assets/control-panel/10.png
new file mode 100644
index 0000000000000000000000000000000000000000..941e3c0354525a16effe16fe46d66845c8110d47
Binary files /dev/null and b/UI2.0/src/assets/control-panel/10.png differ
diff --git a/UI2.0/src/assets/control-panel/2.png b/UI2.0/src/assets/control-panel/2.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ca38108150217df25bb5c5600c87012e188d13a
Binary files /dev/null and b/UI2.0/src/assets/control-panel/2.png differ
diff --git a/UI2.0/src/assets/control-panel/3.png b/UI2.0/src/assets/control-panel/3.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5406261c42905ee449207f588e0d2243db372c7
Binary files /dev/null and b/UI2.0/src/assets/control-panel/3.png differ
diff --git a/UI2.0/src/assets/control-panel/4.png b/UI2.0/src/assets/control-panel/4.png
new file mode 100644
index 0000000000000000000000000000000000000000..bfab6674ef16376cbc28ace00301c0d30292bd1e
Binary files /dev/null and b/UI2.0/src/assets/control-panel/4.png differ
diff --git a/UI2.0/src/assets/control-panel/5.png b/UI2.0/src/assets/control-panel/5.png
new file mode 100644
index 0000000000000000000000000000000000000000..1bc5aabb62fbdaf691e35692fd75980400b968a0
Binary files /dev/null and b/UI2.0/src/assets/control-panel/5.png differ
diff --git a/UI2.0/src/assets/control-panel/6.png b/UI2.0/src/assets/control-panel/6.png
new file mode 100644
index 0000000000000000000000000000000000000000..fc1c0c4311e7b174d6549076c00ccf2f433bf426
Binary files /dev/null and b/UI2.0/src/assets/control-panel/6.png differ
diff --git a/UI2.0/src/assets/control-panel/7.png b/UI2.0/src/assets/control-panel/7.png
new file mode 100644
index 0000000000000000000000000000000000000000..6dae8554f59d1cbfd3d9716d1ff303886dd04cf0
Binary files /dev/null and b/UI2.0/src/assets/control-panel/7.png differ
diff --git a/UI2.0/src/assets/control-panel/8.png b/UI2.0/src/assets/control-panel/8.png
new file mode 100644
index 0000000000000000000000000000000000000000..692d496489dda73d71f727ccdb687d6e2c6b5e0e
Binary files /dev/null and b/UI2.0/src/assets/control-panel/8.png differ
diff --git a/UI2.0/src/assets/control-panel/9.png b/UI2.0/src/assets/control-panel/9.png
new file mode 100644
index 0000000000000000000000000000000000000000..a448adc78201d899c3f36451042b194180148d0b
Binary files /dev/null and b/UI2.0/src/assets/control-panel/9.png differ
diff --git a/UI2.0/src/assets/control-panel/add-default.png b/UI2.0/src/assets/control-panel/add-default.png
new file mode 100644
index 0000000000000000000000000000000000000000..e6871fbf841168649cc4525a1c32ffe4a084513e
Binary files /dev/null and b/UI2.0/src/assets/control-panel/add-default.png differ
diff --git a/UI2.0/src/assets/control-panel/add-highlight.png b/UI2.0/src/assets/control-panel/add-highlight.png
new file mode 100644
index 0000000000000000000000000000000000000000..e3630e39cd07e754859e113908d7bc9877fe5d95
Binary files /dev/null and b/UI2.0/src/assets/control-panel/add-highlight.png differ
diff --git a/UI2.0/src/assets/control-panel/card.png b/UI2.0/src/assets/control-panel/card.png
new file mode 100644
index 0000000000000000000000000000000000000000..de94341e31771874cb0af68b083df03afa7b0480
Binary files /dev/null and b/UI2.0/src/assets/control-panel/card.png differ
diff --git a/UI2.0/src/assets/control-panel/close-default.png b/UI2.0/src/assets/control-panel/close-default.png
new file mode 100644
index 0000000000000000000000000000000000000000..661020565789f4622408485f38dc8d02da366701
Binary files /dev/null and b/UI2.0/src/assets/control-panel/close-default.png differ
diff --git a/UI2.0/src/assets/control-panel/close-highlight.png b/UI2.0/src/assets/control-panel/close-highlight.png
new file mode 100644
index 0000000000000000000000000000000000000000..6985c68f7a38bb4a6635f19da5aeed7fe5798c9b
Binary files /dev/null and b/UI2.0/src/assets/control-panel/close-highlight.png differ
diff --git a/UI2.0/src/assets/control-panel/delete-default.png b/UI2.0/src/assets/control-panel/delete-default.png
new file mode 100644
index 0000000000000000000000000000000000000000..f693e2900142cc32dbc46a106e679c7f68a60719
Binary files /dev/null and b/UI2.0/src/assets/control-panel/delete-default.png differ
diff --git a/UI2.0/src/assets/control-panel/delete-highlight.png b/UI2.0/src/assets/control-panel/delete-highlight.png
new file mode 100644
index 0000000000000000000000000000000000000000..5426904472e8900c5d1b06981958125ef6c6ccff
Binary files /dev/null and b/UI2.0/src/assets/control-panel/delete-highlight.png differ
diff --git a/UI2.0/src/assets/control-panel/filter-default.png b/UI2.0/src/assets/control-panel/filter-default.png
new file mode 100644
index 0000000000000000000000000000000000000000..f648fea631ef58161bf237ec34bfe7414eb4021b
Binary files /dev/null and b/UI2.0/src/assets/control-panel/filter-default.png differ
diff --git a/UI2.0/src/assets/control-panel/filter-highlight.png b/UI2.0/src/assets/control-panel/filter-highlight.png
new file mode 100644
index 0000000000000000000000000000000000000000..2c30e865bd0a499a9515b02a2b0839ee3f184d1c
Binary files /dev/null and b/UI2.0/src/assets/control-panel/filter-highlight.png differ
diff --git a/UI2.0/src/assets/execute-command/help-default.png b/UI2.0/src/assets/execute-command/help-default.png
new file mode 100644
index 0000000000000000000000000000000000000000..0daa2f5b92eed6a321f0ecc350c103cbf0b70ef4
Binary files /dev/null and b/UI2.0/src/assets/execute-command/help-default.png differ
diff --git a/UI2.0/src/assets/execute-command/help-highlight.png b/UI2.0/src/assets/execute-command/help-highlight.png
new file mode 100644
index 0000000000000000000000000000000000000000..10ecb6b39fe5bd01b2aefb1c90124a20cd96fb9f
Binary files /dev/null and b/UI2.0/src/assets/execute-command/help-highlight.png differ
diff --git a/UI2.0/src/assets/home/14-categories-and-50-applications.png b/UI2.0/src/assets/home/14-categories-and-50-applications.png
new file mode 100644
index 0000000000000000000000000000000000000000..6a87e4b52a517f1e48b6a3be1b28b4af49edab8f
Binary files /dev/null and b/UI2.0/src/assets/home/14-categories-and-50-applications.png differ
diff --git a/UI2.0/src/assets/home/AI-algorithm.png b/UI2.0/src/assets/home/AI-algorithm.png
new file mode 100644
index 0000000000000000000000000000000000000000..9501db7481339e4c831f8c80e458e7addbcb703c
Binary files /dev/null and b/UI2.0/src/assets/home/AI-algorithm.png differ
diff --git a/UI2.0/src/assets/home/automation.png b/UI2.0/src/assets/home/automation.png
new file mode 100644
index 0000000000000000000000000000000000000000..612d57c2f023846607695f2cc71fc2594ac30f66
Binary files /dev/null and b/UI2.0/src/assets/home/automation.png differ
diff --git a/UI2.0/src/assets/home/background.png b/UI2.0/src/assets/home/background.png
new file mode 100644
index 0000000000000000000000000000000000000000..b8364b427b7d5e4339043e6c4b2d63684b70110c
Binary files /dev/null and b/UI2.0/src/assets/home/background.png differ
diff --git a/UI2.0/src/assets/home/banner-background.png b/UI2.0/src/assets/home/banner-background.png
new file mode 100644
index 0000000000000000000000000000000000000000..3c59db291d3b6b299b000e6c3324ecbd71db0c35
Binary files /dev/null and b/UI2.0/src/assets/home/banner-background.png differ
diff --git a/UI2.0/src/assets/home/banner-picture.png b/UI2.0/src/assets/home/banner-picture.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b72a8098a0e4ea379172829238b339fb6882209
Binary files /dev/null and b/UI2.0/src/assets/home/banner-picture.png differ
diff --git a/UI2.0/src/assets/home/card-background.png b/UI2.0/src/assets/home/card-background.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8f43fdca68a31c44b4e2f7a4c5aa2c45540b164
Binary files /dev/null and b/UI2.0/src/assets/home/card-background.png differ
diff --git a/UI2.0/src/assets/home/offline-dynamic-tuning.png b/UI2.0/src/assets/home/offline-dynamic-tuning.png
new file mode 100644
index 0000000000000000000000000000000000000000..08b501db766b8af7e53507cf66e74d8de3744e94
Binary files /dev/null and b/UI2.0/src/assets/home/offline-dynamic-tuning.png differ
diff --git a/UI2.0/src/assets/home/online-static-tuning.png b/UI2.0/src/assets/home/online-static-tuning.png
new file mode 100644
index 0000000000000000000000000000000000000000..c9bb9806e661c106864c58584458bbfbe1df3948
Binary files /dev/null and b/UI2.0/src/assets/home/online-static-tuning.png differ
diff --git a/UI2.0/src/assets/home/performance-optimizing.png b/UI2.0/src/assets/home/performance-optimizing.png
new file mode 100644
index 0000000000000000000000000000000000000000..f41f7f544c94f69411f97b68e8dd783310cb07a8
Binary files /dev/null and b/UI2.0/src/assets/home/performance-optimizing.png differ
diff --git a/UI2.0/src/assets/layout/logo_03.png b/UI2.0/src/assets/layout/logo_03.png
new file mode 100644
index 0000000000000000000000000000000000000000..a6ddf0e9b7063c5572e5fd6997fe685f6f24ec4a
Binary files /dev/null and b/UI2.0/src/assets/layout/logo_03.png differ
diff --git a/UI2.0/src/assets/layout/search-1.png b/UI2.0/src/assets/layout/search-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..355b88698eedcaddfdf354f895ac0fff18d7f4df
Binary files /dev/null and b/UI2.0/src/assets/layout/search-1.png differ
diff --git a/UI2.0/src/assets/layout/search-2.png b/UI2.0/src/assets/layout/search-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..f1f71d47d3883b696d22a8f9cad9f93fba4c9315
Binary files /dev/null and b/UI2.0/src/assets/layout/search-2.png differ
diff --git a/UI2.0/src/assets/login-picture.JPG b/UI2.0/src/assets/login-picture.JPG
new file mode 100644
index 0000000000000000000000000000000000000000..fe4aa961f94bc054d18ceb636207fd89fd5caad2
Binary files /dev/null and b/UI2.0/src/assets/login-picture.JPG differ
diff --git a/UI2.0/src/assets/quasar-logo-vertical.svg b/UI2.0/src/assets/quasar-logo-vertical.svg
new file mode 100644
index 0000000000000000000000000000000000000000..821083104a8da969f6ebe021813312e24fe820ca
--- /dev/null
+++ b/UI2.0/src/assets/quasar-logo-vertical.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356 360">
+	<path
+		d="M43.4 303.4c0 3.8-2.3 6.3-7.1 6.3h-15v-22h14.4c4.3 0 6.2 2.2 6.2 5.2 0 2.6-1.5 4.4-3.4 5 2.8.4 4.9 2.5 4.9 5.5zm-8-13H24.1v6.9H35c2.1 0 4-1.3 4-3.8 0-2.2-1.3-3.1-3.7-3.1zm5.1 12.6c0-2.3-1.8-3.7-4-3.7H24.2v7.7h11.7c3.4 0 4.6-1.8 4.6-4zm36.3 4v2.7H56v-22h20.6v2.7H58.9v6.8h14.6v2.3H58.9v7.5h17.9zm23-5.8v8.5H97v-8.5l-11-13.4h3.4l8.9 11 8.8-11h3.4l-10.8 13.4zm19.1-1.8V298c0-7.9 5.2-10.7 12.7-10.7 7.5 0 13 2.8 13 10.7v1.4c0 7.9-5.5 10.8-13 10.8s-12.7-3-12.7-10.8zm22.7 0V298c0-5.7-3.9-8-10-8-6 0-9.8 2.3-9.8 8v1.4c0 5.8 3.8 8.1 9.8 8.1 6 0 10-2.3 10-8.1zm37.2-11.6v21.9h-2.9l-15.8-17.9v17.9h-2.8v-22h3l15.6 18v-18h2.9zm37.9 10.2v1.3c0 7.8-5.2 10.4-12.4 10.4H193v-22h11.2c7.2 0 12.4 2.8 12.4 10.3zm-3 0c0-5.3-3.3-7.6-9.4-7.6h-8.4V307h8.4c6 0 9.5-2 9.5-7.7V298zm50.8-7.6h-9.7v19.3h-3v-19.3h-9.7v-2.6h22.4v2.6zm34.4-2.6v21.9h-3v-10.1h-16.8v10h-2.8v-21.8h2.8v9.2H296v-9.2h2.9zm34.9 19.2v2.7h-20.7v-22h20.6v2.7H316v6.8h14.5v2.3H316v7.5h17.8zM24 340.2v7.3h13.9v2.4h-14v9.6H21v-22h20v2.7H24zm41.5 11.4h-9.8v7.9H53v-22h13.3c5.1 0 8 1.9 8 6.8 0 3.7-2 6.3-5.6 7l6 8.2h-3.3l-5.8-8zm-9.8-2.6H66c3.1 0 5.3-1.5 5.3-4.7 0-3.3-2.2-4.1-5.3-4.1H55.7v8.8zm47.9 6.2H89l-2 4.3h-3.2l10.7-22.2H98l10.7 22.2h-3.2l-2-4.3zm-1-2.3l-6.3-13-6 13h12.2zm46.3-15.3v21.9H146v-17.2L135.7 358h-2.1l-10.2-15.6v17h-2.8v-21.8h3l11 16.9 11.3-17h3zm35 19.3v2.6h-20.7v-22h20.6v2.7H166v6.8h14.5v2.3H166v7.6h17.8zm47-19.3l-8.3 22h-3l-7.1-18.6-7 18.6h-3l-8.2-22h3.3L204 356l6.8-18.5h3.4L221 356l6.6-18.5h3.3zm10 11.6v-1.4c0-7.8 5.2-10.7 12.7-10.7 7.6 0 13 2.9 13 10.7v1.4c0 7.9-5.4 10.8-13 10.8-7.5 0-12.7-3-12.7-10.8zm22.8 0v-1.4c0-5.7-4-8-10-8s-9.9 2.3-9.9 8v1.4c0 5.8 3.8 8.2 9.8 8.2 6.1 0 10-2.4 10-8.2zm28.3 2.4h-9.8v7.9h-2.8v-22h13.2c5.2 0 8 1.9 8 6.8 0 3.7-2 6.3-5.6 7l6 8.2h-3.3l-5.8-8zm-9.8-2.6h10.2c3 0 5.2-1.5 5.2-4.7 0-3.3-2.1-4.1-5.2-4.1h-10.2v8.8zm40.3-1.5l-6.8 5.6v6.4h-2.9v-22h2.9v12.3l15.2-12.2h3.7l-9.9 8.1 10.3 13.8h-3.6l-8.9-12z" />
+	<path fill="#050A14"
+		d="M188.4 71.7a10.4 10.4 0 01-20.8 0 10.4 10.4 0 1120.8 0zM224.2 45c-2.2-3.9-5-7.5-8.2-10.7l-12 7c-3.7-3.2-8-5.7-12.6-7.3a49.4 49.4 0 00-9.7 13.9 59 59 0 0140.1 14l7.6-4.4a57 57 0 00-5.2-12.5zM178 125.1c4.5 0 9-.6 13.4-1.7v-14a40 40 0 0012.5-7.2 47.7 47.7 0 00-7.1-15.3 59 59 0 01-32.2 27.7v8.7c4.4 1.2 8.9 1.8 13.4 1.8zM131.8 45c-2.3 4-4 8.1-5.2 12.5l12 7a40 40 0 000 14.4c5.7 1.5 11.3 2 16.9 1.5a59 59 0 01-8-41.7l-7.5-4.3c-3.2 3.2-6 6.7-8.2 10.6z" />
+	<path fill="#00B4FF"
+		d="M224.2 98.4c2.3-3.9 4-8 5.2-12.4l-12-7a40 40 0 000-14.5c-5.7-1.5-11.3-2-16.9-1.5a59 59 0 018 41.7l7.5 4.4c3.2-3.2 6-6.8 8.2-10.7zm-92.4 0c2.2 4 5 7.5 8.2 10.7l12-7a40 40 0 0012.6 7.3c4-4.1 7.3-8.8 9.7-13.8a59 59 0 01-40-14l-7.7 4.4c1.2 4.3 3 8.5 5.2 12.4zm46.2-80c-4.5 0-9 .5-13.4 1.7V34a40 40 0 00-12.5 7.2c1.5 5.7 4 10.8 7.1 15.4a59 59 0 0132.2-27.7V20a53.3 53.3 0 00-13.4-1.8z" />
+	<path fill="#00B4FF"
+		d="M178 9.2a62.6 62.6 0 11-.1 125.2A62.6 62.6 0 01178 9.2m0-9.2a71.7 71.7 0 100 143.5A71.7 71.7 0 00178 0z" />
+	<path fill="#050A14"
+		d="M96.6 212v4.3c-9.2-.8-15.4-5.8-15.4-17.8V180h4.6v18.4c0 8.6 4 12.6 10.8 13.5zm16-31.9v18.4c0 8.9-4.3 12.8-10.9 13.5v4.4c9.2-.7 15.5-5.6 15.5-18v-18.3h-4.7zM62.2 199v-2.2c0-12.7-8.8-17.4-21-17.4-12.1 0-20.7 4.7-20.7 17.4v2.2c0 12.8 8.6 17.6 20.7 17.6 1.5 0 3-.1 4.4-.3l11.8 6.2 2-3.3-8.2-4-6.4-3.1a32 32 0 01-3.6.2c-9.8 0-16-3.9-16-13.3v-2.2c0-9.3 6.2-13.1 16-13.1 9.9 0 16.3 3.8 16.3 13.1v2.2c0 5.3-2.1 8.7-5.6 10.8l4.8 2.4c3.4-2.8 5.5-7 5.5-13.2zM168 215.6h5.1L156 179.7h-4.8l17 36zM143 205l7.4-15.7-2.4-5-15.1 31.4h5.1l3.3-7h18.3l-1.8-3.7H143zm133.7 10.7h5.2l-17.3-35.9h-4.8l17 36zm-25-10.7l7.4-15.7-2.4-5-15.1 31.4h5.1l3.3-7h18.3l-1.7-3.7h-14.8zm73.8-2.5c6-1.2 9-5.4 9-11.4 0-8-4.5-10.9-12.9-10.9h-21.4v35.5h4.6v-31.3h16.5c5 0 8.5 1.4 8.5 6.7 0 5.2-3.5 7.7-8.5 7.7h-11.4v4.1h10.7l9.3 12.8h5.5l-9.9-13.2zm-117.4 9.9c-9.7 0-14.7-2.5-18.6-6.3l-2.2 3.8c5.1 5 11 6.7 21 6.7 1.6 0 3.1-.1 4.6-.3l-1.9-4h-3zm18.4-7c0-6.4-4.7-8.6-13.8-9.4l-10.1-1c-6.7-.7-9.3-2.2-9.3-5.6 0-2.5 1.4-4 4.6-5l-1.8-3.8c-4.7 1.4-7.5 4.2-7.5 8.9 0 5.2 3.4 8.7 13 9.6l11.3 1.2c6.4.6 8.9 2 8.9 5.4 0 2.7-2.1 4.7-6 5.8l1.8 3.9c5.3-1.6 8.9-4.7 8.9-10zm-20.3-21.9c7.9 0 13.3 1.8 18.1 5.7l1.8-3.9a30 30 0 00-19.6-5.9c-2 0-4 .1-5.7.3l1.9 4 3.5-.2z" />
+	<path fill="#00B4FF"
+		d="M.5 251.9c29.6-.5 59.2-.8 88.8-1l88.7-.3 88.7.3 44.4.4 44.4.6-44.4.6-44.4.4-88.7.3-88.7-.3a7981 7981 0 01-88.8-1z" />
+	<path fill="none" d="M-565.2 324H-252v15.8h-313.2z" />
+</svg>
\ No newline at end of file
diff --git a/UI2.0/src/boot/.gitkeep b/UI2.0/src/boot/.gitkeep
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/UI2.0/src/components/EssentialLink.vue b/UI2.0/src/components/EssentialLink.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c2899650e4e96888ab8ce946cb548327e4096f15
--- /dev/null
+++ b/UI2.0/src/components/EssentialLink.vue
@@ -0,0 +1,51 @@
+<template>
+  <q-item
+    clickable
+    tag="a"
+    target="_blank"
+    :href="link"
+  >
+    <q-item-section
+      v-if="icon"
+      avatar
+    >
+      <q-icon :name="icon" />
+    </q-item-section>
+
+    <q-item-section>
+      <q-item-label>{{ title }}</q-item-label>
+      <q-item-label caption>
+        {{ caption }}
+      </q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'EssentialLink',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+
+    caption: {
+      type: String,
+      default: ''
+    },
+
+    link: {
+      type: String,
+      default: '#'
+    },
+
+    icon: {
+      type: String,
+      default: ''
+    }
+  }
+})
+</script>
diff --git a/UI2.0/src/css/app.scss b/UI2.0/src/css/app.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ecac98f346a997239ea8d62f6d9404c4a0389444
--- /dev/null
+++ b/UI2.0/src/css/app.scss
@@ -0,0 +1 @@
+// app global css in SCSS form
diff --git a/UI2.0/src/css/command-record.css b/UI2.0/src/css/command-record.css
new file mode 100644
index 0000000000000000000000000000000000000000..d31a477d4df0b297448d7fb4cb8fec942de502af
--- /dev/null
+++ b/UI2.0/src/css/command-record.css
@@ -0,0 +1,55 @@
+.btn-grp button {
+  background-color: #fff;
+  border: 1px solid #cccccc;
+  padding: 0px;
+  height: 32px;
+  width: 85px;
+  border-radius: 0px;
+  cursor: pointer;
+  margin: 32px 0px 32px 0px;
+}
+
+.btn-grp:after {
+  content: "";
+  clear: both;
+  display: table;
+}
+.btn-grp button:not(:last-child) {
+  border-right: none;
+}
+
+.btn-grp button:hover {
+  background-color: #3781de;
+  color: #fff;
+  border: 1px solid #3781de;
+}
+.container {
+  height: 70px;
+  width: 300px;
+  margin-top: 32px;
+  margin-right: 32px;
+}
+.parent {
+  position: absolute;
+}
+.search {
+  width: 300px;
+  height: 32px;
+  border-radius: 18px;
+  outline: none;
+  border: 1px solid #ccc;
+  padding-left: 20px;
+}
+.btn {
+  height: 35px;
+  width: 35px;
+  position: absolute;
+  background: url("../assets/layout/search-1.png") no-repeat;
+  top: 4px;
+  left: 265px;
+  border: none;
+  cursor: pointer;
+}
+.btn:hover{
+  background: url("../assets/layout/search-2.png") no-repeat;
+}
diff --git a/UI2.0/src/css/control-panel.css b/UI2.0/src/css/control-panel.css
new file mode 100644
index 0000000000000000000000000000000000000000..5fb4a7689784191327e7a6ba35e7a1eaea4e4544
--- /dev/null
+++ b/UI2.0/src/css/control-panel.css
@@ -0,0 +1,246 @@
+.col-mod-a {
+  width: 1856px;
+  height: 108px;
+  margin-left: 32px;
+  margin-top: 16px;
+  margin-bottom: 16px;
+  background: url(../assets/control-panel/card.png) no-repeat;
+}
+.col-mod {
+  background-color: #f1f2f6;
+}
+.control-add-a {
+  background: url(../assets/control-panel/add-default.png) no-repeat;
+  width: 24px;
+  height: 24px;
+  margin-top: 134px;
+  margin-left: 214px;
+  cursor: pointer;
+}
+.control-add-b {
+  background: url(../assets/control-panel/add-default.png) no-repeat;
+  width: 24px;
+  height: 24px;
+  float: left;
+  cursor: pointer;
+}
+.control-add-a:hover,
+.control-add-b:hover {
+  background: url(../assets/control-panel/add-highlight.png) no-repeat;
+  /* background-color: antiquewhite; */
+}
+.control-delete {
+  background: url(../assets/control-panel/delete-default.png) no-repeat;
+  width: 24px;
+  height: 24px;
+  margin: 39px 32px 0px 0px;
+}
+.control-delete:hover {
+  background: url(../assets/control-panel/delete-highlight.png) no-repeat;
+}
+.new-command-btn {
+  background: #3781de;
+  color: white;
+  font-size: 14px;
+  margin-right: 32px;
+  margin-bottom: 16px;
+  margin-top: 32px;
+  height: 32px;
+  width: 90px;
+  border: none;
+  border-radius: 4px;
+  padding: 0;
+}
+
+.task-list {
+  width: 1310px;
+  margin: 0px 32px;
+  border-collapse: collapse;
+}
+.task-list td {
+  font-size: 14px;
+  border-bottom: 1px solid #cfcfcf;
+  height: 48px;
+  padding-left: 24px;
+}
+.task-list th {
+  font-size: 14px;
+  text-align: left;
+  background-color: #f5f5f5;
+  color: #bcbcbc;
+  height: 32px;
+}
+.task-list img {
+  margin-left: 8px;
+}
+.table-button {
+  background-color: #fff;
+  border: none;
+  color: #3781de;
+  font-size: 14px;
+  padding: 1px 0px;
+  margin: 0px 16px 0px 0px;
+}
+
+.rate-table {
+  margin: 0px 32px;
+  width: 388px;
+  border-collapse: collapse;
+}
+.rate-table th {
+  font-size: 14px;
+  text-align: left;
+  background-color: #f5f5f5;
+  color: #bcbcbc;
+  height: 32px;
+  width: 129px;
+}
+.rate-table td {
+  font-size: 14px;
+  height: 40px;
+  padding-left: 24px;
+}
+.rate-table img {
+  margin: 7px 0px;
+}
+.rate-column {
+  padding-right: 24px;
+  text-align: right;
+}
+.pop-win {
+  display: none;
+  position: absolute;
+  top: 35%;
+  left: 30%;
+  width: 472px;
+  height: 440px;
+  border: 1px solid #fff;
+  background-color: white;
+  overflow: auto;
+  border-radius: 4px;
+}
+.black_overlay {
+  display: none;
+  position: absolute;
+  top: 0%;
+  left: 0%;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(185, 184, 184);
+  opacity: 0.5;
+}
+.select-model {
+  margin-left: 32px;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+.select-tip {
+  color: #222222;
+  font-size: 14px;
+  padding-top: 6px;
+}
+.select_type {
+  width: 316px;
+  height: 32px;
+  float: right;
+  margin-right: 32px;
+  border: 1px solid #e6e6e6;
+  border-radius: 4px;
+}
+.select_page {
+  width: 90px;
+  height: 32px;
+  margin-right: 32px;
+  border: 1px solid #e6e6e6;
+  border-radius: 4px;
+  outline: none;
+}
+ul.pagination {
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+}
+
+ul.pagination li {
+  display: inline;
+}
+
+ul.pagination li a {
+  color: black;
+  float: left;
+  padding: 5px 12px;
+  text-decoration: none;
+  border-radius: 4px;
+}
+
+ul.pagination li a.active {
+  background-color: #3781de;
+  color: white;
+}
+
+ul.pagination li a:hover:not(.active) {
+  background-color: #ddd;
+}
+.button-add-chart-no {
+  background: #fff;
+  font-size: 14px;
+  border-radius: 4px;
+  border: 1px solid #cfcfcf;
+  width: 96px;
+  height: 32px;
+  margin: 8px 8px 24px 0px;
+}
+.button-add-chart-yes {
+  background: #3781de;
+  color: white;
+  font-size: 14px;
+  border: 0;
+  border-radius: 4px;
+  width: 96px;
+  height: 32px;
+  margin: 8px 0px 24px 0px;
+}
+.close-card {
+  height: 24px;
+  width: 24px;
+  margin-top: 18px;
+  background: url(../assets/control-panel/close-default.png) no-repeat;
+}
+.close-card:hover {
+  background: url(../assets/control-panel/close-highlight.png) no-repeat;
+}
+.card-button {
+  border: 0;
+  background-color: #fff;
+  padding: 0;
+}
+.card-button:hover {
+  color: #3781de;
+}
+.input-Taskname::-webkit-input-placeholder {
+  color: #cccccc;
+}
+.add-chart {
+  color: #999999;
+  font-size: 14px;
+  margin: 16px 198px 0px 190px;
+  background-color: #fff;
+  border: 0;
+  width: 70px;
+  cursor: pointer;
+}
+/* 设置滚动条的样式 */
+::-webkit-scrollbar {
+  width: 12px;
+  padding-right: 8px;
+}
+/* 滚动槽 */
+::-webkit-scrollbar-track {
+  border-radius: 10px;
+  padding-right: 8px;
+}
+/* 滚动条滑块 */
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: #cccccc;
+}
\ No newline at end of file
diff --git a/UI2.0/src/css/execute-command.css b/UI2.0/src/css/execute-command.css
new file mode 100644
index 0000000000000000000000000000000000000000..8bae597e7c354d1ca1a7322980eddbbb15321b51
--- /dev/null
+++ b/UI2.0/src/css/execute-command.css
@@ -0,0 +1,132 @@
+.btn-group button {
+  background-color: #fff;
+  border: 1px solid #cccccc;
+  padding: 0px;
+  height: 32px;
+  width: 85px;
+  border-radius: 0px;
+  cursor: pointer;
+  margin-bottom: 24px;
+}
+
+.btn-group:after {
+  content: "";
+  clear: both;
+  display: table;
+}
+.btn-group button:not(:last-child) {
+  border-right: none;
+}
+
+.btn-group button:hover {
+  background-color: #3781de;
+  color: #fff;
+  border: 1px solid #3781de;
+}
+.select-first {
+  margin: 0px 32px 40px 8px;
+  padding: 0px 16px;
+  height: 32px;
+  width: 210px;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  color: #222222;
+  font-size: 14px;
+  outline: none;
+}
+.btn-atune-adm {
+  border-radius: 4px;
+  margin-left: 128px;
+  margin-right: 8px;
+  height: 32px;
+  width: 110px;
+  background-color: #e6e6e6;
+  color: #999999;
+  font-size: 14px;
+  border: 1px solid #999999;
+  cursor: pointer;
+}
+.btn-add-parameter {
+  border-radius: 4px;
+  height: 32px;
+  width: 110px;
+  background-color: #3781de;
+  color: #ffffff;
+  font-size: 14px;
+  border: 1px solid #3781de;
+  cursor: pointer;
+}
+.please-input {
+  border: none;
+  border-bottom: 1px solid #cccccc;
+  width: 170px;
+  margin-right: 32px;
+  margin-bottom: 40px;
+}
+.please-input:focus {
+  outline: none;
+}
+.please-input::-webkit-input-placeholder {
+  color: #cccccc;
+}
+.table-button {
+  background-color: #fff;
+  border: none;
+  color: #3781de;
+  font-size: 14px;
+  padding: 1px 0px;
+  margin: 0px 16px 0px 0px;
+}
+.selectfile-table {
+  border-collapse: collapse;
+  margin-left: 248px;
+  width: 883px;
+  text-align: left;
+  border: none;
+}
+.selectfile-table th {
+  background-color: #f5f5f5;
+  height: 32px;
+  color: #999999;
+}
+.selectfile-table td {
+  height: 48px;
+  padding-left: 11.54px;
+  border-bottom: 1px solid #e6e6e6;
+}
+.command-textbox {
+  width: 1544px;
+  height: 212px;
+  margin: 16px 8px 16px 16px;
+  overflow: auto;
+  border: none;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  padding: 0px;
+  outline: none;
+}
+.textbox-div {
+  margin-left: 248px;
+  margin-bottom: 80px;
+  width: 1576px;
+  height: 236px;
+  background-color: #f5f5f5;
+  border: none;
+  border-radius: 4px;
+}
+
+/* 设置滚动条的样式 */
+::-webkit-scrollbar {
+  width: 12px;
+  padding-right: 8px;
+}
+/* 滚动槽 */
+::-webkit-scrollbar-track {
+  border-radius: 10px;
+  padding-right: 8px;
+}
+/* 滚动条滑块 */
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: #cccccc;
+}
\ No newline at end of file
diff --git a/UI2.0/src/css/home.css b/UI2.0/src/css/home.css
new file mode 100644
index 0000000000000000000000000000000000000000..3c68c1a06a251b966f7a7ce0e48f02aa40191ed8
--- /dev/null
+++ b/UI2.0/src/css/home.css
@@ -0,0 +1,28 @@
+.col-module-a {
+  background: url(../assets/home/banner-background.png) no-repeat;
+}
+.col-module-b {
+  background-color: #f5f6f8;
+}
+.col-module-c {
+  background: url(../assets/home/background.png) no-repeat;
+}
+.col-module-d {
+  background-color: #2c3554;
+}
+.row .introduce {
+  margin: 43px 7px;
+  background: #fff;
+  border: 1px solid #fff;
+  border-radius: 3px;
+  box-shadow: 1px 4px 6px 5px #dae2f0;
+  background: url(../assets/home/card-background.png) no-repeat;
+}
+.introduce-text {
+  font-size: 14px;
+  color: #222222;
+}
+.q-table th,
+.q-table td {
+  padding: 7px 10px;
+}
\ No newline at end of file
diff --git a/UI2.0/src/css/mainlayout.css b/UI2.0/src/css/mainlayout.css
new file mode 100644
index 0000000000000000000000000000000000000000..5caac489b99d0d48b3c5db1a54cb9e2d6b0724d6
--- /dev/null
+++ b/UI2.0/src/css/mainlayout.css
@@ -0,0 +1,26 @@
+.q-toolbar {
+  padding: 16px 0px;
+}
+.button-group {
+  position: absolute;
+  right: 0%;
+  /* background-color: antiquewhite; */
+}
+.search-input {
+  border-radius: 20px;
+  height: 32px;
+  border: 1px solid #cccccc;
+  padding-left: 10px;
+  display: none;
+  outline: none;
+}
+.search-img {
+  background: url(../assets/layout/search-1.png) no-repeat;
+  width: 24px;
+  height: 24px;
+  margin-right: 24px;
+  margin-top: 5px;
+}
+.search-img:hover {
+  background: url(../assets/layout/search-2.png) no-repeat;
+}
\ No newline at end of file
diff --git a/UI2.0/src/css/quasar.variables.scss b/UI2.0/src/css/quasar.variables.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2dea8f0da0250a8bda72b75dc959590f2d1038c9
--- /dev/null
+++ b/UI2.0/src/css/quasar.variables.scss
@@ -0,0 +1,24 @@
+// Quasar SCSS (& Sass) Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.
+
+// Check documentation for full list of Quasar variables
+
+// Your own variables (that are declared here) and Quasar's own
+// ones will be available out of the box in your .vue/.scss/.sass files
+
+// It's highly recommended to change the default colors
+// to match your app's branding.
+// Tip: Use the "Theme Builder" on Quasar's documentation website.
+
+$primary   : #ffffff;
+$secondary : #26A69A;
+$accent    : #9C27B0;
+
+$dark      : #1D1D1D;
+
+$positive  : #21BA45;
+$negative  : #C10015;
+$info      : #31CCEC;
+$warning   : #F2C037;
diff --git a/UI2.0/src/css/userlayout.css b/UI2.0/src/css/userlayout.css
new file mode 100644
index 0000000000000000000000000000000000000000..952abd49d6cef8a8620785bb6a24a6a8b46bb160
--- /dev/null
+++ b/UI2.0/src/css/userlayout.css
@@ -0,0 +1,39 @@
+.q-toolbar {
+    padding: 16px 0px;
+  }
+  .menu-group {
+    text-align: center;
+  }
+  .menu-btn {
+    color: #222222;
+    font-size: 16px;
+    margin: 0px 24px;
+    padding: 0px;
+    height: 48px;
+    border: 0px;
+    background-color: #ffffff;
+    border-radius: 0px;
+  }
+  .menu-btn:hover {
+    color: #3781de;
+    background-color: #ffffff;
+    border-bottom: 2px solid #3781de;
+  }
+  .search-input {
+    border-radius: 20px;
+    height: 32px;
+    border: 1px solid #cccccc;
+    padding-left: 10px;
+    display: none;
+    outline: none;
+  }
+  .search-img {
+    background: url(../assets/layout/search-1.png) no-repeat;
+    width: 24px;
+    height: 24px;
+    margin-right: 24px;
+    margin-top: 3px;
+  }
+  .search-img:hover {
+    background: url(../assets/layout/search-2.png) no-repeat;
+  }
\ No newline at end of file
diff --git a/UI2.0/src/index.template.html b/UI2.0/src/index.template.html
new file mode 100644
index 0000000000000000000000000000000000000000..8157cbfff400514fca2f4224f67e54f1c704d07f
--- /dev/null
+++ b/UI2.0/src/index.template.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= productName %></title>
+
+    <meta charset="utf-8">
+    <meta name="description" content="<%= productDescription %>">
+    <meta name="format-detection" content="telephone=no">
+    <meta name="msapplication-tap-highlight" content="no">
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
+
+    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
+    <link rel="icon" type="image/ico" href="favicon.ico">
+  </head>
+  <body>
+    <!-- DO NOT touch the following DIV -->
+    <div id="q-app"></div>
+  </body>
+</html>
diff --git a/UI2.0/src/js/command-record.js b/UI2.0/src/js/command-record.js
new file mode 100644
index 0000000000000000000000000000000000000000..747587adb3aba3b7ac741c708d096391f26af3bf
--- /dev/null
+++ b/UI2.0/src/js/command-record.js
@@ -0,0 +1,126 @@
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  data() {
+    return {
+      columns: [
+        {
+          name: "order",
+          required: true,
+          label: "序号",
+          align: "left",
+          field: (row) => row.order,
+          format: (val) => `${val}`,
+          sortable: true,
+        },
+        {
+          name: "name",
+          align: "center",
+          label: "任务名称",
+          field: "name",
+        },
+        { name: "IP", label: "IP地址", field: "IP" },
+        { name: "command", label: "命令", field: "command" },
+        { name: "state", label: "任务状态", field: "state" },
+        { name: "time", label: "开始时间", field: "time" },
+        {
+          name: "operation",
+          label: "操作",
+          field: "operation",
+        },
+      ],
+      data: [
+        {
+          order: 1,
+          name: "Test1",
+          IP: "9.10.33.13",
+          command: "在线调优",
+          state: "运行中",
+          time: 87,
+          operation: "14%",
+        },
+        {
+          order: 2,
+          name: "Test2",
+          IP: "9.10.33.13",
+          command: "离线调优",
+          state: "运行中",
+          time: 129,
+          operation: "8%",
+        },
+        {
+          order: 3,
+          name: "Test3",
+          IP: "9.10.33.13",
+          command: "在线调优",
+          state: "已完成",
+          time: 337,
+          operation: "6%",
+        },
+        {
+          order: 4,
+          name: "Test4",
+          IP: "9.10.33.13",
+          command: "离线调优",
+          state: "运行中",
+          time: 413,
+          operation: "3%",
+        },
+        {
+          order: 5,
+          name: "Test5",
+          IP: "9.10.33.13",
+          command: "离线调优",
+          state: "已完成",
+          time: 327,
+          operation: "7%",
+        },
+        {
+          order: 6,
+          name: "Test6",
+          IP: "9.10.33.13",
+          command: "在线调优",
+          state: "已完成",
+          time: 50,
+          operation: "0%",
+        },
+        {
+          order: 7,
+          name: "Test7",
+          IP: "9.10.33.13",
+          command: "在线调优",
+          state: "运行中",
+          time: 38,
+          operation: "0%",
+        },
+        {
+          order: 8,
+          name: "Test8",
+          IP: "9.10.33.13",
+          command: "离线调优",
+          state: "运行中",
+          time: 562,
+          operation: "0%",
+        },
+        {
+          order: 9,
+          name: "Test9",
+          IP: "9.10.33.13",
+          command: "在线调优",
+          state: "失败",
+          time: 326,
+          operation: "2%",
+        },
+        {
+          order: 10,
+          name: "Test10",
+          IP: "9.10.33.13",
+          command: "在线调优",
+          state: "已完成",
+          time: 54,
+          operation: "12%",
+        },
+      ],
+    };
+  },
+});
\ No newline at end of file
diff --git a/UI2.0/src/js/control-panel.js b/UI2.0/src/js/control-panel.js
new file mode 100644
index 0000000000000000000000000000000000000000..6004166988ee75c0879af46bde3d3341b54d6c57
--- /dev/null
+++ b/UI2.0/src/js/control-panel.js
@@ -0,0 +1,263 @@
+{/* <script> */}
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "PageIndex",
+  methods: {
+    popWin() {
+      document.getElementById("light").style.display = "block";
+      document.getElementById("fade").style.display = "block";
+    },
+    closeWin() {
+      document.getElementById("light").style.display = "none";
+      document.getElementById("fade").style.display = "none";
+    },
+    showRealtime() {
+      document.getElementById("realtime").style.display = "block";
+      document.getElementById("history").style.display = "none";
+    },
+    showHistory() {
+      document.getElementById("realtime").style.display = "none";
+      document.getElementById("history").style.display = "block";
+    },
+    addCardColumn() {
+      document.getElementById("add-cardcolumn").style.display = "block";  
+    },
+  },
+  mounted() {
+    var echarts = require("echarts");
+    var myChart1 = echarts.init(document.getElementById("main1"));
+    var myChart2 = echarts.init(document.getElementById("main2"));
+    var myChart3 = echarts.init(document.getElementById("main3"));
+    // 指定图表的配置项和数据
+    var option1 = {
+      grid: {
+        left: "32",
+        right: "32",
+        bottom: "32",
+        top: "30%",
+        containLabel: true,
+      },
+      xAxis: {
+        type: "category",
+        data: ["10:00", "10:10", "10:20", "10:30", "10:40", "10:50", "10:60"],
+        axisLine: {
+          lineStyle: {
+            color: "#999999",
+          },
+        },
+      },
+      yAxis: {
+        name: "kb/s",
+        nameLocation: "end",
+        nameTextStyle: {
+          color: "#999999",
+          padding: [0, 0, 0, -21],
+        },
+        nameGap: 15, //kb/s与坐标轴的距离
+        type: "value",
+        max: 60,
+        min: 0,
+        minInterval: 15,
+        interval: 15, //每次增加几个
+        axisLine: {
+          lineStyle: {
+            color: "#999999",
+          },
+        },
+      },
+      series: [
+        {
+          data: [25, 35, 22, 32, 50, 40, 20],
+          type: "line",
+          symbol: "none", //拐点样式
+          // symbolSize: 8,//拐点大小
+          itemStyle: {
+            normal: {
+              lineStyle: {
+                // width:3,//折线宽度
+                color: "#559ff8", //折线颜色
+              },
+            },
+          },
+        },
+      ],
+    };
+
+    var option2 = {
+      color: ["#5ce59d", "#559ff8"],
+      grid: {
+        left: "32",
+        right: "32",
+        bottom: "32",
+        // top: "30%",
+        containLabel: true,
+      },
+      tooltip: {
+        trigger: "axis",
+      },
+      legend: {
+        itemWidth: 10,
+        itemHeight: 10,
+        itemGap: 10,
+        data: [
+          { name: "Test1", icon: "circle" },
+          { name: "Test2", icon: "circle" },
+        ],
+        right: "32",
+        top: "25",
+        // bottom: "12",
+        textStyle: {
+          fontSize: 14,
+          color: "#999999",
+        },
+      },
+      toolbox: {
+        show: false,
+        feature: {
+          dataView: { show: true, readOnly: false },
+          magicType: { show: true, type: ["line", "bar"] },
+          restore: { show: true },
+          saveAsImage: { show: true },
+        },
+      },
+      calculable: true,
+      xAxis: [
+        {
+          type: "category",
+          data: ["10:00", "10:10", "10:20", "10:30", "10:40", "10:50", "10:60"],
+          axisLine: {
+            lineStyle: {
+              color: "#999999",
+            },
+          },
+        },
+      ],
+      yAxis: [
+        {
+          name: "kb/s",
+          nameLocation: "end",
+          nameTextStyle: {
+            color: "#999999",
+            padding: [0, 0, 0, -21],
+          },
+          nameGap: 15, //kb/s与坐标轴的距离
+          type: "value",
+          max: 60,
+          min: 0,
+          minInterval: 15,
+          interval: 15, //每次增加几个
+          axisLine: {
+            lineStyle: {
+              color: "#999999",
+            },
+          },
+          // text:'kb/s',
+        },
+      ],
+      series: [
+        {
+          name: "Test1",
+          type: "bar",
+          data: [40.0, 48.0, 37.0, 23.0, 25.6, 46.7, 35.6],
+          barWidth: 10, //柱图宽度
+          barGap: "50%" /*多个并排柱子设置柱子之间的间距*/,
+          itemStyle: {
+            normal: {
+              barBorderRadius: [10, 10, 10, 10], //柱形图圆角，初始化效果
+            },
+          },
+        },
+        {
+          name: "Test2",
+          type: "bar",
+          data: [32.0, 40.0, 35.0, 26.4, 28.7, 30.7, 45.6],
+          barWidth: 10, //柱图宽度
+          barGap: "50%" /*多个并排柱子设置柱子之间的间距*/,
+          itemStyle: {
+            normal: {
+              barBorderRadius: [10, 10, 10, 10], //柱形图圆角，初始化效果
+            },
+          },
+        },
+      ],
+    };
+
+    var option3 = {
+      title: [
+        {
+          text: "2530",
+          subtext: "总计(G)",
+          x: "center",
+          y: "center",
+          top: "40%",
+          itemGap: 8,
+          textStyle: {
+            fontSize: 30,
+            color: "#222222",
+            align: "center",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 14,
+            color: "#222222",
+          },
+        },
+      ],
+      color: ["#6766ff", "#559ff8", "#5ce59d", "#f8a758"],
+      tooltip: {
+        trigger: "item",
+      },
+      legend: {
+        left: "center",
+        bottom: "32",
+        itemWidth: 10,
+        itemHeight: 10,
+        itemGap: 20,
+        icon: "circle",
+        textStyle: {
+          fontSize: 14,
+          color: "#999999",
+        },
+      },
+      series: [
+        {
+          name: "Access From",
+          type: "pie",
+          radius: ["40%", "46%"],
+          itemStyle: {
+            borderColor: "#ffffff",
+            borderWidth: 2,
+            borderType: "solid",
+          },
+
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            position: "outside",
+            formatter: " {@name}({d}%) ",
+            fontSize: 14,
+            color: "#222222",
+            // padding: [32, 0, 0, -30],
+          },
+          labelLine: {
+            show: false, //数据显示地方的引线
+            length: 1,
+            length2: 3,
+          },
+          data: [
+            { value: 1000, name: "Test1" },
+            { value: 900, name: "Test2" },
+            { value: 490, name: "Test3" },
+            { value: 140, name: "Test4" },
+          ],
+        },
+      ],
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    myChart1.setOption(option1);
+    myChart2.setOption(option2);
+    myChart3.setOption(option3);
+  },
+});
+// </script>
\ No newline at end of file
diff --git a/UI2.0/src/js/execute-command.js b/UI2.0/src/js/execute-command.js
new file mode 100644
index 0000000000000000000000000000000000000000..07bcf271a2fe937c98190ac4a5192acf918ef8aa
--- /dev/null
+++ b/UI2.0/src/js/execute-command.js
@@ -0,0 +1,33 @@
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  methods: {
+    showClickmode() {
+      document.getElementById("click-mode").style.display = "block";
+      document.getElementById("node-mode").style.display = "none";
+      document.getElementById("cluster-mode").style.display = "none";
+    },
+    showNodemode() {
+      document.getElementById("click-mode").style.display = "none";
+      document.getElementById("node-mode").style.display = "block";
+      document.getElementById("cluster-mode").style.display = "none";
+    },
+    showClustermode() {
+      document.getElementById("click-mode").style.display = "none";
+      document.getElementById("node-mode").style.display = "none";
+      document.getElementById("cluster-mode").style.display = "block";
+    },
+    showAddparameter() {
+      document.getElementById("add-parameter-1").style.display = "block";
+      document.getElementById("tunning-select").style.display = "none";
+    },
+    closeAddparameter() {
+      document.getElementById("add-parameter-1").style.display = "none";
+      document.getElementById("tunning-select").style.display = "none";
+    },
+    showTunningselect() {
+      document.getElementById("tunning-select").style.display = "block";
+      document.getElementById("add-parameter-1").style.display = "none";
+    },
+  },
+});
\ No newline at end of file
diff --git a/UI2.0/src/js/home.js b/UI2.0/src/js/home.js
new file mode 100644
index 0000000000000000000000000000000000000000..b3a4d9ee0778364723607eb4b2ad4e05cecacc77
--- /dev/null
+++ b/UI2.0/src/js/home.js
@@ -0,0 +1,5 @@
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "PageIndex",
+});
\ No newline at end of file
diff --git a/UI2.0/src/js/mainlayout.js b/UI2.0/src/js/mainlayout.js
new file mode 100644
index 0000000000000000000000000000000000000000..e234da2346a0d3c5c60aff0b2b7ebb76d6b89c09
--- /dev/null
+++ b/UI2.0/src/js/mainlayout.js
@@ -0,0 +1,97 @@
+import EssentialLink from "components/EssentialLink.vue";
+
+const linksList = [
+  {
+    title: "Docs",
+    caption: "quasar.dev",
+    icon: "school",
+    link: "https://quasar.dev",
+  },
+//   {
+//     title: "Github",
+//     caption: "github.com/quasarframework",
+//     icon: "code",
+//     link: "https://github.com/quasarframework",
+//   },
+//   {
+//     title: "Discord Chat Channel",
+//     caption: "chat.quasar.dev",
+//     icon: "chat",
+//     link: "https://chat.quasar.dev",
+//   },
+//   {
+//     title: "Forum",
+//     caption: "forum.quasar.dev",
+//     icon: "record_voice_over",
+//     link: "https://forum.quasar.dev",
+//   },
+//   {
+//     title: "Twitter",
+//     caption: "@quasarframework",
+//     icon: "rss_feed",
+//     link: "https://twitter.quasar.dev",
+//   },
+//   {
+//     title: "Facebook",
+//     caption: "@QuasarFramework",
+//     icon: "public",
+//     link: "https://facebook.quasar.dev",
+//   },
+//   {
+//     title: "Quasar Awesome",
+//     caption: "Community Quasar projects",
+//     icon: "favorite",
+//     link: "https://awesome.quasar.dev",
+//   },
+];
+
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  name: "MainLayout",
+
+  components: {
+    EssentialLink,
+  },
+
+  methods: {
+    onItemClick() {
+      console.log("Clicked.");
+    },
+    onMainClick() {
+      this.$router.push({
+        path: "/",
+      });
+    },
+    onLoginClick() {
+      this.$router.push({
+        path: "/login",
+      });
+    },
+    onRegisterClick() {
+      this.$router.push({
+        path: "/register",
+      });
+    },
+    onUserClick() {
+      this.$router.push({
+        path: "/user",
+      });
+    },
+    showSearchInput() {
+      document.getElementById("search-input").style.display = "block";
+    },
+  },
+
+  setup() {
+    const leftDrawerOpen = ref(false);
+
+    return {
+      essentialLinks: linksList,
+      leftDrawerOpen,
+      toggleLeftDrawer() {
+        leftDrawerOpen.value = !leftDrawerOpen.value;
+      },
+    };
+  },
+});
\ No newline at end of file
diff --git a/UI2.0/src/js/userlayout.js b/UI2.0/src/js/userlayout.js
new file mode 100644
index 0000000000000000000000000000000000000000..81da730a01242869a7814f8747222627448e296b
--- /dev/null
+++ b/UI2.0/src/js/userlayout.js
@@ -0,0 +1,63 @@
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  name: "MainLayout",
+
+  components: {},
+
+  methods: {
+    onItemClick() {
+      console.log("Clicked.");
+    },
+    onMainClick() {
+      this.$router.push({
+        path: "/",
+      });
+    },
+    onContactClick() {
+      this.$router.push({
+        path: "/contact",
+      });
+    },
+    onRecordClick() {
+      this.$router.push({
+        path: "/record",
+      });
+    },
+    onInformationClick(){
+      this.$router.push({
+        path: "/information",
+      });
+    },
+    onCommandClick() {
+      this.$router.push({
+        path: "/command",
+      });
+    },
+    onUserClick() {
+      this.$router.push({
+        path: "/user",
+      });
+    },
+    onLoginClick() {
+      this.$router.push({
+        path: "/login",
+      });
+    },
+    showSearchInput() {
+      document.getElementById("search-input").style.display = "block";
+    },
+  },
+
+  setup() {
+    // const leftDrawerOpen = ref(false);
+
+    return {
+      // essentialLinks: linksList,
+      // leftDrawerOpen,
+      // toggleLeftDrawer() {
+      //   leftDrawerOpen.value = !leftDrawerOpen.value;
+      // },
+    };
+  },
+});
\ No newline at end of file
diff --git a/UI2.0/src/layouts/LoginLayout.vue b/UI2.0/src/layouts/LoginLayout.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8e364bf2cc3739611c42877e8b07217c4bb070b3
--- /dev/null
+++ b/UI2.0/src/layouts/LoginLayout.vue
@@ -0,0 +1,77 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header style="height: 64px; width: 1920px">
+      <q-toolbar>
+        <img
+          alt="A-Tune logo"
+          src="~assets/layout/logo_03.png"
+          style="padding-left: 32px"
+          @click="onMainClick"
+        />
+        <!-- <q-toolbar-title class="text-dark"> A-Tune </q-toolbar-title> -->
+        <div class="button-group">
+          <q-btn
+            flat
+            style="color: #222222; font-size: 14px; margin: 0px; padding: 0px 24px; height: 32px"
+            label="首页"
+            size="sm"
+            @click="onMainClick"
+          ></q-btn>
+          <q-btn-dropdown
+            flat
+            round
+            style="color: #222222; font-size: 14px; padding: 0px; margin: 0px 32px 0px 0px"
+            label="简体中文"
+          >
+            <q-list>
+              <q-item clickable v-close-popup @click="onItemClick">
+                <q-item-section>
+                  <q-item-label style="font-size: 12px">简体中文</q-item-label>
+                </q-item-section>
+              </q-item>
+
+              <q-item clickable v-close-popup @click="onItemClick">
+                <q-item-section>
+                  <q-item-label style="font-size: 12px">英文</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-btn-dropdown>
+        </div>
+      </q-toolbar>
+    </q-header>
+    <q-page-container>
+      <router-view></router-view>
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script>
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  name: "LoginLayout",
+
+  components: {},
+
+  methods: {
+    onItemClick() {
+      // console.log('Clicked on an Item')
+    },
+    onMainClick() {
+      this.$router.push({
+        path: "/",
+      });
+    },
+  },
+
+  setup() {},
+});
+</script>
+
+<style>
+.button-group {
+  position: absolute;
+  right: 0%;
+}
+</style>
diff --git a/UI2.0/src/layouts/MainLayout.vue b/UI2.0/src/layouts/MainLayout.vue
new file mode 100644
index 0000000000000000000000000000000000000000..882475f6faf85693ff021238b726ec8cf7f4b8dc
--- /dev/null
+++ b/UI2.0/src/layouts/MainLayout.vue
@@ -0,0 +1,74 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header style="height: 64px; width: 1920px">
+      <q-toolbar class="row" style="justify-content:space-between;">
+        <img
+          alt="A-Tune logo"
+          src="~assets/layout/logo_03.png"
+          style="padding-left: 32px"
+        />
+
+        <div class="button-group row">
+          <input
+            id="search-input"
+            class="search-input"
+            type="text"
+            placeholder="请输入..."
+          />
+          <div class="search-img" @click="showSearchInput"></div>
+
+          <q-btn-dropdown
+            flat
+            round
+            style="color: #000000; font-size: 12px; padding: 0px"
+            label="简体中文"
+          >
+            <q-list>
+              <q-item clickable v-close-popup @click="onItemClick">
+                <q-item-section>
+                  <q-item-label style="font-size: 12px">简体中文</q-item-label>
+                </q-item-section>
+              </q-item>
+
+              <q-item clickable v-close-popup @click="onItemClick">
+                <q-item-section>
+                  <q-item-label style="font-size: 12px">英文</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-btn-dropdown>
+
+          <q-btn
+            flat
+            style="color: #000000; margin: 0px; padding: 0px 24px; height: 32px"
+            label="登录"
+            size="sm"
+            @click="onLoginClick"
+          ></q-btn>
+          <q-btn
+            flat
+            style="
+              background: #3681de;
+              color: white;
+              margin-right: 32px;
+              height: 32px;
+              width: 64px;
+            "
+            label="注册"
+            size="sm"
+            @click="onRegisterClick"
+          ></q-btn>
+        </div>
+      </q-toolbar>
+    </q-header>
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script src="../js/mainlayout.js" language="JavaScript" type="text/javascript"></script>
+
+<style scoped>
+@import "../css/userlayout.css";
+</style>
\ No newline at end of file
diff --git a/UI2.0/src/layouts/UserLayout.vue b/UI2.0/src/layouts/UserLayout.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f040cbff59b860a227d5e72044c3ea96684367fd
--- /dev/null
+++ b/UI2.0/src/layouts/UserLayout.vue
@@ -0,0 +1,104 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header style="height: 64px; width: 1920px">
+      <q-toolbar class="row" style="justify-content: space-between">
+        <div>
+          <img
+            alt="A-Tune logo"
+            src="~assets/layout/logo_03.png"
+            style="padding-left: 32px"
+          />
+        </div>
+        <div class="menu-group">
+          <!-- style="margin-left: 306.5px" -->
+          <button class="menu-btn" label="控制面板" @click="onUserClick">
+            控制面板
+          </button>
+          <button class="menu-btn" label="执行命令" @click="onCommandClick">
+            执行命令
+          </button>
+          <button class="menu-btn" label="实时信息" @click="onInformationClick">
+            实时信息
+          </button>
+          <button class="menu-btn" label="命令记录" @click="onRecordClick">命令记录</button>
+          <button class="menu-btn" label="联系我们" @click="onContactClick">联系我们</button>
+          <button class="menu-btn" label="关于A-Tune">关于A-Tune</button>
+        </div>
+        <div>
+        <div class="row">
+          <input
+            id="search-input"
+            class="search-input"
+            type="text"
+            placeholder="请输入..."
+          />
+          <div class="search-img" @click="showSearchInput"></div>
+
+          <q-btn-dropdown
+            flat
+            round
+            style="color: #222222; font-size: 16px; padding: 0px"
+            label="简体中文"
+          >
+            <q-list>
+              <q-item clickable v-close-popup @click="onItemClick">
+                <q-item-section>
+                  <q-item-label style="font-size: 12px">简体中文</q-item-label>
+                </q-item-section>
+              </q-item>
+
+              <q-item clickable v-close-popup @click="onItemClick">
+                <q-item-section>
+                  <q-item-label style="font-size: 12px">英文</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-btn-dropdown>
+
+          <q-avatar size="26px" style="margin: 5px 8px 0px 24px">
+            <img src="https://cdn.quasar.dev/img/avatar.png" />
+          </q-avatar>
+
+          <q-btn-dropdown
+            flat
+            round
+            style="
+              color: #222222;
+              font-size: 16px;
+              padding: 0px;
+              padding-right: 32px;
+            "
+            label="zhangsan"
+          >
+            <q-list>
+              <q-item clickable v-close-popup @click="onItemClick">
+                <q-item-section>
+                  <q-item-label style="font-size: 12px">个人中心</q-item-label>
+                </q-item-section>
+              </q-item>
+
+              <q-item clickable v-close-popup @click="onItemClick">
+                <q-item-section>
+                  <q-item-label style="font-size: 12px" @click="onMainClick"
+                    >退出登录</q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-btn-dropdown>
+        </div>
+        </div>
+      </q-toolbar>
+    </q-header>
+
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script src="../js/userlayout.js" language="JavaScript" type="text/javascript"></script>
+
+<style scoped>
+@import "../css/userlayout.css";
+</style>
\ No newline at end of file
diff --git a/UI2.0/src/pages/Command-record.vue b/UI2.0/src/pages/Command-record.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8bfefaacaadf3429732a11082d58a30dfb372b29
--- /dev/null
+++ b/UI2.0/src/pages/Command-record.vue
@@ -0,0 +1,69 @@
+<template>
+  <q-page>
+    <div
+      class="row"
+      style="
+        justify-content: flex-start;
+        width: 1920px;
+        background-color: #f1f2f6;
+      "
+    >
+      <a
+        style="
+          color: #222222;
+          font-size: 20px;
+          margin: 24px 0px 16px 32px;
+          font-weight: bold;
+        "
+        >命令记录</a
+      >
+      <div
+        class="col-12 col-module"
+        style="
+          width: 1856px;
+          height: 1000px;
+          margin: 0px 32px 32px 32px;
+          background-color: #ffffff;
+        "
+      >
+        <div class="row" style="justify-content:space-between;">
+          <div class="btn-grp">
+            <button
+              style="
+                border-top-left-radius: 4px;
+                border-bottom-left-radius: 4px;
+                margin-left: 32px;
+              "
+            >
+              全部
+            </button>
+            <button style="width: 95px">离线调优</button>
+            <button
+              style="
+                border-top-right-radius: 4px;
+                border-bottom-right-radius: 4px;
+              "
+            >
+              在线调优
+            </button>
+          </div>
+          <div class="container">
+            <form action="" class="parent">
+              <input type="text" class="search" placeholder="请输入" />
+              <input type="button" name="" id="" class="btn" />
+            </form>
+          </div>
+        </div>
+        <div class="q-pa-md" style="width: 1856px">
+          <q-table :rows="data" :columns="columns" row-key="name"></q-table>
+        </div>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script src="../js/command-record.js" language="JavaScript" type="text/javascript"></script>
+
+<style scoped>
+@import "../css/command-record.css";
+</style>
\ No newline at end of file
diff --git a/UI2.0/src/pages/Contact-us.vue b/UI2.0/src/pages/Contact-us.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f7dfa3e07c0677ca5aa5de7a9460786f6027ec6f
--- /dev/null
+++ b/UI2.0/src/pages/Contact-us.vue
@@ -0,0 +1,224 @@
+<template>
+  <q-page>
+    <div
+      class="row"
+      style="
+        justify-content: flex-start;
+        width: 1920px;
+        background-color: #f1f2f6;
+      "
+    >
+      <a
+        style="
+          color: #222222;
+          font-size: 20px;
+          margin: 24px 0px 16px 32px;
+          font-weight: bold;
+        "
+        >数据实时监控</a
+      >
+      <div
+        class="col-12 col-module"
+        style="
+          width: 1856px;
+          height: 1000px;
+          margin: 0px 32px 32px 32px;
+          background-color: #ffffff;
+        "
+      >
+        <div style="margin-top: 32px">
+          <a
+            style="
+              color: #222222;
+              font-size: 20px;
+              margin: 24px 0px 16px 32px;
+              font-weight: bold;
+            "
+            >问题反馈提交表</a
+          >
+          <div style="margin-left: 32px">
+            <div>
+              <a style="color: red">*</a>
+              <a>用户名</a>
+              <input
+                class="contact-input"
+                type="text"
+                placeholder="请输入用户名"
+              />
+            </div>
+            <div>
+              <a style="color: red">*</a>
+              <a>邮箱</a>
+              <input
+                class="contact-input"
+                type="text"
+                placeholder="请输入邮箱"
+                style="margin-left: 110px"
+              />
+            </div>
+            <div class="row">
+              <a style="color: red; margin-top: 32px">*</a>
+              <a style="margin-top: 32px">问题描述</a>
+              <textarea
+                class="contact-textbox"
+                maxlength="490"
+                onchange="this.value=this.value.substring(0, 490)"
+                onkeydown="this.value=this.value.substring(0, 490)"
+                onkeyup="this.value=this.value.substring(0, 490)"
+                @input="descInput"
+                v-model="desc"
+              ></textarea>
+              <span class="numLimit">{{ num }}/490</span>
+            </div>
+            <button class="btn-submit" @click="openAlert">提交</button>
+          </div>
+          <!-- 弹窗 -->
+          <q-card id="submit-alert" class="submit-alert">
+            <q-card-section class="row" style="justify-content: space-between">
+              <div
+                style="
+                  color: #222222;
+                  font-size: 20px;
+                  padding: 14px 0px 8px 14px;
+                "
+              ><q-icon name="check_circle" style="color:green;font-size: 26px"></q-icon>
+                提交成功
+              </div>
+              <div class="close-card" @click="closeAlert"></div>
+            </q-card-section>
+            <a style="margin-left:32px">我们将以邮件的形式，对您提交的问题进行反馈。</a>
+            <!-- --------------------------- -->
+            <div class="row" style="position: absolute; bottom: 0px; left: 30%">
+              <button class="button-submit-no" @click="closeAlert">
+                取消
+              </button>
+              <button class="button-submit-yes">确定</button>
+            </div>
+          </q-card>
+        </div>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  data() {
+    return {
+      num: 0,
+    };
+  },
+
+  methods: {
+    descInput() {
+      var txtVal = this.desc.length;
+      this.num = 0 + txtVal;
+    },
+    openAlert() {
+      document.getElementById("submit-alert").style.display = "block";
+    },
+    closeAlert() {
+      document.getElementById("submit-alert").style.display = "none";
+    },
+  },
+});
+</script>
+
+<style scoped>
+.col-module {
+  background-color: #f1f2f6;
+}
+.contact-input {
+  margin: 32px 0px 0px 96px;
+  border-radius: 4px;
+  outline: none;
+  border: 1px solid #ccc;
+  padding-left: 8px;
+  height: 32px;
+}
+.contact-input::-webkit-input-placeholder {
+  color: #cccccc;
+}
+.contact-textbox {
+  margin: 32px 0px 0px 82px;
+  overflow: auto;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  width: 500px;
+  height: 100px;
+  outline: none;
+}
+.numLimit {
+  margin-left: -90px;
+  margin-top: 140px;
+}
+.btn-submit {
+  margin: 32px 0px 0px 144.04px;
+  border-radius: 4px;
+  height: 32px;
+  width: 110px;
+  background-color: #3781de;
+  color: #ffffff;
+  font-size: 14px;
+  border: 1px solid #3781de;
+  cursor: pointer;
+}
+.submit-alert {
+  display: none;
+  position: absolute;
+  top: 30%;
+  left: 35%;
+  width: 472px;
+  height: 240px;
+  border: 1px solid #fff;
+  background-color: white;
+  overflow: auto;
+  border-radius: 4px;
+}
+.close-card {
+  height: 24px;
+  width: 24px;
+  margin-top: 18px;
+  background: url(../assets/contact-us/close-default.png) no-repeat;
+}
+.close-card:hover {
+  background: url(../assets/contact-us/close-highlight.png) no-repeat;
+}
+.button-submit-no {
+  background: #fff;
+  font-size: 14px;
+  border-radius: 4px;
+  border: 1px solid #cfcfcf;
+  width: 96px;
+  height: 32px;
+  margin: 8px 8px 24px 0px;
+}
+.button-submit-yes {
+  background: #3781de;
+  color: white;
+  font-size: 14px;
+  border: 0;
+  border-radius: 4px;
+  width: 96px;
+  height: 32px;
+  margin: 8px 0px 24px 0px;
+}
+/* 设置滚动条的样式 */
+::-webkit-scrollbar {
+  width: 12px;
+  padding-right: 8px;
+}
+/* 滚动槽 */
+::-webkit-scrollbar-track {
+  border-radius: 10px;
+  padding-right: 8px;
+}
+/* 滚动条滑块 */
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: #cccccc;
+}
+</style>
+    
\ No newline at end of file
diff --git a/UI2.0/src/pages/Control-panel.vue b/UI2.0/src/pages/Control-panel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..22bdb0236fbdf011f0d70ef856f71f0240d36fb2
--- /dev/null
+++ b/UI2.0/src/pages/Control-panel.vue
@@ -0,0 +1,948 @@
+<template>
+  <q-page>
+    <div class="row" style="width: 1920px; background-color: #f1f2f6">
+      <div class="col-12 col-mod-a" style="width: 1920px; height:108px;">
+        <div style="padding-left: 204px; float: left">
+          <div
+            style="
+              color: #1d68c4;
+              font-size: 20px;
+              margin-bottom: 8px;
+              padding-top: 32px;
+            "
+          >
+            上午好，张三jWX1084983愿您事事顺心，快乐相随！
+          </div>
+          <div style="color: #1d68c4; font-size: 14px; padding-bottom: 32px">
+            长风破浪会有时，直挂云帆济沧海
+          </div>
+        </div>
+        <div style="float: right; margin: 32px 64px">
+          <div style="float: left">
+            <div
+              class="text-right"
+              style="
+                color: #e6e6e6;
+                font-size: 14px;
+                margin-bottom: 8px;
+                margin-right: 48px;
+              "
+            >
+              IP数量
+            </div>
+            <div
+              class="text-right"
+              style="color: #ffffff; font-size: 24px; margin-right: 48px"
+            >
+              14711
+            </div>
+          </div>
+          <div style="float: left">
+            <div
+              class="text-right"
+              style="
+                color: #e6e6e6;
+                font-size: 14px;
+                margin-bottom: 8px;
+                margin-right: 48px;
+              "
+            >
+              analysis数量
+            </div>
+            <div
+              class="text-right"
+              style="color: #ffffff; font-size: 24px; margin-right: 48px"
+            >
+              200
+            </div>
+          </div>
+          <div style="float: left">
+            <div
+              class="text-right"
+              style="
+                color: #e6e6e6;
+                font-size: 14px;
+                margin-bottom: 8px;
+                margin-right: 48px;
+              "
+            >
+              tuning数量
+            </div>
+            <div
+              class="text-right"
+              style="color: #ffffff; font-size: 24px; margin-right: 48px"
+            >
+              0
+            </div>
+          </div>
+          <div style="float: left">
+            <div
+              class="text-right"
+              style="
+                color: #e6e6e6;
+                font-size: 14px;
+                margin-bottom: 8px;
+                margin-right: 48px;
+              "
+            >
+              tuning数量
+            </div>
+            <div
+              class="text-right"
+              style="color: #ffffff; font-size: 24px; margin-right: 48px"
+            >
+              0
+            </div>
+          </div>
+          <div style="float: left">
+            <div
+              class="text-right"
+              style="
+                color: #e6e6e6;
+                font-size: 14px;
+                margin-bottom: 8px;
+                margin-right: 32px;
+              "
+            >
+              tuning数量
+            </div>
+            <div
+              class="text-right"
+              style="color: #ffffff; font-size: 24px; margin-right: 32px"
+            >
+              0
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 第二栏 -->
+      <div
+        class="col-12 col-mod row"
+        style="height: 580px; width: 1856px; margin: 0px 32px 16px 32px"
+      >
+        <div
+          class="col"
+          style="margin-right: 16px; background-color: #ffffff; width: 1388px"
+        >
+          <div>
+            <div
+              style="
+                color: #222222;
+                font-size: 20px;
+                margin-left: 32px;
+                margin-top: 32px;
+                margin-bottom: 24px;
+                width: 1234px;
+                float: left;
+                font-weight: bold;
+              "
+            >
+              近7天任务列表
+            </div>
+            <div style="float: left">
+              <button class="new-command-btn">新建命令</button>
+            </div>
+            <div style="overflow: auto; width: 1356px; height: 400px">
+              <table class="task-list">
+                <tr>
+                  <th style="padding-left: 24px">序号</th>
+                  <th style="padding-left: 13px">
+                    <a style="margin-right: 8px">|</a>任务名称
+                  </th>
+                  <th style="padding-left: 13px">
+                    <a style="margin-right: 8px">|</a>IP地址
+                  </th>
+                  <th style="padding-left: 13px">
+                    <a style="margin-right: 8px">|</a>命令
+                    <q-icon
+                      name="help"
+                      style="font-size: 17px; margin-left: 2px"
+                    >
+                      <q-tooltip
+                        anchor="top middle"
+                        self="bottom middle"
+                        :offset="[10, 10]"
+                      >
+                        点击命令可直接跳转到历史命令
+                      </q-tooltip>
+                    </q-icon>
+                    <!-- <img src="../assets/默认-帮助.png" /> -->
+                  </th>
+                  <th style="padding-left: 13px">
+                    <a style="margin-right: 8px">|</a>任务状态
+                    <img src="../assets/control-panel/filter-default.png" />
+                  </th>
+                  <th style="padding-left: 13px">
+                    <a style="margin-right: 8px">|</a>开始时间
+                    <q-icon
+                      name="unfold_more"
+                      style="font-size: 17px; margin-left: 2px"
+                    ></q-icon>
+                  </th>
+                  <th style="padding-left: 13px; width: 150px">
+                    <a style="margin-right: 8px">|</a>操作
+                  </th>
+                </tr>
+                <tr>
+                  <td>1</td>
+                  <td>
+                    <q-icon name="edit"></q-icon>Test1
+                    <!-- <input
+                      class="input-Taskname"
+                      type="text"
+                      placeholder="输入任务名称"
+                      style="
+                        outline: none;
+                        border-radius: 4px;
+                        border: 1px solid #cccccc;
+                        padding-left: 16px;
+                        height:32px;
+                      "
+                    /> -->
+                  </td>
+                  <td>9.10.33.13</td>
+                  <td style="color: #559ff8">在线调优</td>
+                  <td>
+                    <div class="row">
+                      <div
+                        style="
+                          border-radius: 4px;
+                          margin-right: 8px;
+                          margin-top: 6px;
+                          width: 8px;
+                          height: 8px;
+                          background-color: #3781de;
+                        "
+                      ></div>
+                      <div>运行中</div>
+                    </div>
+                  </td>
+                  <td>2021-11-22 11:23:00</td>
+                  <td>
+                    <button class="table-button">详情</button>
+                    <button class="table-button">删除</button>
+                  </td>
+                </tr>
+                <tr class="alt">
+                  <td>2</td>
+                  <td><q-icon name="edit"></q-icon>Test2</td>
+                  <td>9.10.33.13</td>
+                  <td style="color: #559ff8">在线调优</td>
+                  <td>
+                    <div class="row">
+                      <div
+                        style="
+                          border-radius: 4px;
+                          margin-right: 8px;
+                          margin-top: 6px;
+                          width: 8px;
+                          height: 8px;
+                          background-color: #5ce59d;
+                        "
+                      ></div>
+                      <div>已完成</div>
+                    </div>
+                  </td>
+                  <td>2021-11-22 11:23:00</td>
+                  <td>
+                    <button class="table-button">详情</button>
+                    <button class="table-button">删除</button>
+                  </td>
+                </tr>
+                <tr>
+                  <td>3</td>
+                  <td><q-icon name="edit"></q-icon>Test3</td>
+                  <td>9.10.33.13</td>
+                  <td style="color: #559ff8">在线调优</td>
+                  <td>
+                    <div class="row">
+                      <div
+                        style="
+                          border-radius: 4px;
+                          margin-right: 8px;
+                          margin-top: 6px;
+                          width: 8px;
+                          height: 8px;
+                          background-color: #f8a758;
+                        "
+                      ></div>
+                      <div>失败</div>
+                    </div>
+                  </td>
+                  <td>2021-11-22 11:23:00</td>
+                  <td>
+                    <button class="table-button">详情</button>
+                    <button class="table-button">删除</button>
+                  </td>
+                </tr>
+                <tr>
+                  <td>4</td>
+                  <td><q-icon name="edit"></q-icon>Test4</td>
+                  <td>9.10.33.13</td>
+                  <td style="color: #559ff8">在线调优</td>
+                  <td>
+                    <div class="row">
+                      <div
+                        style="
+                          border-radius: 4px;
+                          margin-right: 8px;
+                          margin-top: 6px;
+                          width: 8px;
+                          height: 8px;
+                          background-color: #3781de;
+                        "
+                      ></div>
+                      <div>运行中</div>
+                    </div>
+                  </td>
+                  <td>2021-11-22 11:23:00</td>
+                  <td>
+                    <button class="table-button">详情</button>
+                    <button class="table-button">删除</button>
+                  </td>
+                </tr>
+                <tr>
+                  <td>5</td>
+                  <td><q-icon name="edit"></q-icon>Test5</td>
+                  <td>9.10.33.13</td>
+                  <td style="color: #559ff8">在线调优</td>
+                  <td>
+                    <div class="row">
+                      <div
+                        style="
+                          border-radius: 4px;
+                          margin-right: 8px;
+                          margin-top: 6px;
+                          width: 8px;
+                          height: 8px;
+                          background-color: #5ce59d;
+                        "
+                      ></div>
+                      <div>已完成</div>
+                    </div>
+                  </td>
+                  <td>2021-11-22 11:23:00</td>
+                  <td>
+                    <button class="table-button">详情</button>
+                    <button class="table-button">删除</button>
+                  </td>
+                </tr>
+                <tr>
+                  <td>6</td>
+                  <td><q-icon name="edit"></q-icon>Test6</td>
+                  <td>9.10.33.13</td>
+                  <td style="color: #559ff8">在线调优</td>
+                  <td>
+                    <div class="row">
+                      <div
+                        style="
+                          border-radius: 4px;
+                          margin-right: 8px;
+                          margin-top: 6px;
+                          width: 8px;
+                          height: 8px;
+                          background-color: #f8a758;
+                        "
+                      ></div>
+                      <div>失败</div>
+                    </div>
+                  </td>
+                  <td>2021-11-22 11:23:00</td>
+                  <td>
+                    <button class="table-button">详情</button>
+                    <button class="table-button">删除</button>
+                  </td>
+                </tr>
+                <tr>
+                  <td>7</td>
+                  <td><q-icon name="edit"></q-icon>Test7</td>
+                  <td>9.10.33.13</td>
+                  <td style="color: #559ff8">在线调优</td>
+                  <td>
+                    <div class="row">
+                      <div
+                        style="
+                          border-radius: 4px;
+                          margin-right: 8px;
+                          margin-top: 6px;
+                          width: 8px;
+                          height: 8px;
+                          background-color: #3781de;
+                        "
+                      ></div>
+                      <div>运行中</div>
+                    </div>
+                  </td>
+                  <td>2021-11-22 11:23:00</td>
+                  <td>
+                    <button class="table-button">详情</button>
+                    <button class="table-button">删除</button>
+                  </td>
+                </tr>
+                <tr class="alt">
+                  <td>8</td>
+                  <td><q-icon name="edit"></q-icon>Test8</td>
+                  <td>9.10.33.13</td>
+                  <td style="color: #559ff8">在线调优</td>
+                  <td>
+                    <div class="row">
+                      <div
+                        style="
+                          border-radius: 4px;
+                          margin-right: 8px;
+                          margin-top: 6px;
+                          width: 8px;
+                          height: 8px;
+                          background-color: #5ce59d;
+                        "
+                      ></div>
+                      <div>已完成</div>
+                    </div>
+                  </td>
+                  <td>2021-11-22 11:23:00</td>
+                  <td>
+                    <button class="table-button">详情</button>
+                    <button class="table-button">删除</button>
+                  </td>
+                </tr>
+                <tr>
+                  <td>9</td>
+                  <td><q-icon name="edit"></q-icon>Test9</td>
+                  <td>9.10.33.13</td>
+                  <td style="color: #559ff8">在线调优</td>
+                  <td>
+                    <div class="row">
+                      <div
+                        style="
+                          border-radius: 4px;
+                          margin-right: 8px;
+                          margin-top: 6px;
+                          width: 8px;
+                          height: 8px;
+                          background-color: #f8a758;
+                        "
+                      ></div>
+                      <div>失败</div>
+                    </div>
+                  </td>
+                  <td>2021-11-22 11:23:00</td>
+                  <td>
+                    <button class="table-button">详情</button>
+                    <button class="table-button">删除</button>
+                  </td>
+                </tr>
+                <tr>
+                  <td>10</td>
+                  <td><q-icon name="edit"></q-icon>Test10</td>
+                  <td>9.10.33.13</td>
+                  <td style="color: #559ff8">在线调优</td>
+                  <td>
+                    <div class="row">
+                      <div
+                        style="
+                          border-radius: 4px;
+                          margin-right: 8px;
+                          margin-top: 6px;
+                          width: 8px;
+                          height: 8px;
+                          background-color: #3781de;
+                        "
+                      ></div>
+                      <div>运行中</div>
+                    </div>
+                  </td>
+                  <td>2021-11-22 11:23:00</td>
+                  <td>
+                    <button class="table-button">详情</button>
+                    <button class="table-button">删除</button>
+                  </td>
+                </tr>
+                <tr class="alt">
+                  <td>11</td>
+                  <td><q-icon name="edit"></q-icon>Test11</td>
+                  <td>9.10.33.13</td>
+                  <td style="color: #559ff8">在线调优</td>
+                  <td>
+                    <div class="row">
+                      <div
+                        style="
+                          border-radius: 4px;
+                          margin-right: 8px;
+                          margin-top: 6px;
+                          width: 8px;
+                          height: 8px;
+                          background-color: #5ce59d;
+                        "
+                      ></div>
+                      <div>已完成</div>
+                    </div>
+                  </td>
+                  <td>2021-11-22 11:23:00</td>
+                  <td>
+                    <button class="table-button">详情</button>
+                    <button class="table-button">删除</button>
+                  </td>
+                </tr>
+                <tr>
+                  <td>12</td>
+                  <td><q-icon name="edit"></q-icon>Test12</td>
+                  <td>9.10.33.13</td>
+                  <td style="color: #559ff8">在线调优</td>
+                  <td>
+                    <div class="row">
+                      <div
+                        style="
+                          border-radius: 4px;
+                          margin-right: 8px;
+                          margin-top: 6px;
+                          width: 8px;
+                          height: 8px;
+                          background-color: #f8a758;
+                        "
+                      ></div>
+                      <div>失败</div>
+                    </div>
+                  </td>
+                  <td>2021-11-22 11:23:00</td>
+                  <td>
+                    <button class="table-button">详情</button>
+                    <button class="table-button">删除</button>
+                  </td>
+                </tr>
+              </table>
+            </div>
+            <div
+              class="row"
+              style="
+                justify-content: space-between;
+                margin: 24px 32px 32px 32px;
+              "
+            >
+              <div style="padding-top: 12px">共100条数据</div>
+              <div>
+                <div style="float: left">
+                  <select class="select_page">
+                    <option selected>10条/页</option>
+                    <option>20条/页</option>
+                  </select>
+                </div>
+                <div style="float: left">
+                  <ul class="pagination">
+                    <li>
+                      <a href=""><q-icon name="chevron_left"></q-icon></a>
+                    </li>
+                    <li><a class="active" href="">1</a></li>
+                    <li><a href="">2</a></li>
+                    <li><a href="">3</a></li>
+                    <li><a href="">4</a></li>
+                    <li><a href="">5</a></li>
+                    <li>
+                      <a href=""><q-icon name="chevron_right"></q-icon></a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-3" style="background-color: #ffffff; width: 452px">
+          <div
+            style="
+              color: #222222;
+              font-size: 20px;
+              margin-left: 32px;
+              margin-top: 32px;
+              margin-bottom: 24px;
+              font-weight: bold;
+            "
+          >
+            使用频率排行榜
+          </div>
+          <div>
+            <table class="rate-table" border="0">
+              <tr>
+                <th style="padding-left: 24px">排名</th>
+                <th style="padding-left: 13px">
+                  <a style="margin-right: 8px">|</a>参数名称
+                </th>
+                <th
+                  style="
+                    padding-left: 13px;
+                    padding-right: 24px;
+                    text-align: right;
+                  "
+                >
+                  <a style="margin-right: 8px">|</a>使用频率
+                </th>
+              </tr>
+              <tr>
+                <td><img src="../assets/control-panel/1.png" /></td>
+                <td>CPU</td>
+                <td class="rate-column">15</td>
+              </tr>
+              <tr class="alt">
+                <td><img src="../assets/control-panel/2.png" /></td>
+                <td>Mem</td>
+                <td class="rate-column">14</td>
+              </tr>
+              <tr>
+                <td><img src="../assets/control-panel/3.png" /></td>
+                <td>主硬盘</td>
+                <td class="rate-column">13</td>
+              </tr>
+              <tr>
+                <td><img src="../assets/control-panel/4.png" /></td>
+                <td>显示器</td>
+                <td class="rate-column">12</td>
+              </tr>
+              <tr>
+                <td><img src="../assets/control-panel/5.png" /></td>
+                <td>网卡</td>
+                <td class="rate-column">11</td>
+              </tr>
+              <tr>
+                <td><img src="../assets/control-panel/6.png" /></td>
+                <td>声卡</td>
+                <td class="rate-column">10</td>
+              </tr>
+              <tr>
+                <td><img src="../assets/control-panel/7.png" /></td>
+                <td>光驱</td>
+                <td class="rate-column">9</td>
+              </tr>
+              <tr>
+                <td><img src="../assets/control-panel/8.png" /></td>
+                <td>网卡</td>
+                <td class="rate-column">8</td>
+              </tr>
+              <tr>
+                <td><img src="../assets/control-panel/9.png" /></td>
+                <td>声卡</td>
+                <td class="rate-column">7</td>
+              </tr>
+              <tr>
+                <td><img src="../assets/control-panel/10.png" /></td>
+                <td>光驱</td>
+                <td class="rate-column">6</td>
+              </tr>
+            </table>
+          </div>
+        </div>
+      </div>
+      <!------ 第三栏 ------>
+      <div
+        class="col-12 col-module row"
+        style="height: 300px; width: 1856px; margin: 0px 32px 16px 32px"
+      >
+        <div
+          class="col"
+          style="margin-right: 16px; background-color: #ffffff; width: 452px"
+        >
+          <div>
+            <div class="control-add-a" @click="popWin"></div>
+            <button class="add-chart" @click="popWin">新增图表</button>
+          </div>
+        </div>
+        <div
+          style="
+            margin-right: 16px;
+            background-color: #ffffff;
+            width: 452px;
+            height: 300px;
+          "
+        >
+          <div class="row" style="justify-content: space-between">
+            <div
+              style="
+                color: #222222;
+                font-size: 20px;
+                margin-left: 32px;
+                margin-top: 32px;
+                margin-bottom: 24px;
+                font-weight: bold;
+              "
+            >
+              运行中的任务列表
+            </div>
+            <div class="control-delete"></div>
+          </div>
+          <div
+            id="main1"
+            class="col"
+            style="
+              margin-right: 16px;
+              margin-top: -74px;
+              background-color: #ffffff;
+              width: 452px;
+              height: 288px;
+            "
+          ></div>
+        </div>
+        <div
+          style="
+            margin-right: 16px;
+            background-color: #ffffff;
+            width: 452px;
+            height: 300px;
+          "
+        >
+          <div class="row" style="justify-content: space-between">
+            <div
+              style="
+                color: #222222;
+                font-size: 20px;
+                margin-left: 32px;
+                margin-top: 32px;
+                font-weight: bold;
+              "
+            >
+              Test1XX使用对比情况
+            </div>
+            <div class="control-delete"></div>
+          </div>
+          <div
+            id="main2"
+            class="col"
+            style="
+              margin-right: 16px;
+              width: 452px;
+              height: 262px;
+              margin-top: -24px;
+            "
+          ></div>
+        </div>
+        <div style="background-color: #ffffff; width: 452px; height: 300px">
+          <div class="row" style="justify-content: space-between">
+            <div
+              style="
+                color: #222222;
+                font-size: 20px;
+                margin-left: 32px;
+                margin-top: 32px;
+                font-weight: bold;
+              "
+            >
+              Test1XX占比情况
+            </div>
+            <div class="control-delete"></div>
+          </div>
+          <div
+            id="main3"
+            class="col"
+            style="width: 452px; height: 288px; margin-top: -55px"
+          ></div>
+        </div>
+      </div>
+      <!-- ---添加卡片 ----->
+      <div id="add-cardcolumn" style="display: none">
+        <div
+          class="col-12 col-module row"
+          style="height: 300px; width: 1856px; margin: 0px 32px 16px 32px"
+        >
+          <div
+            class="col"
+            style="margin-right: 16px; background-color: #ffffff; width: 452px"
+          >
+            <div>
+              <div class="control-add-a" @click="popWin"></div>
+              <button class="add-chart" @click="popWin">新增图表</button>
+            </div>
+          </div>
+          <div
+            class="col"
+            style="margin-right: 16px; background-color: #ffffff; width: 452px"
+          >
+            <div>
+              <div class="control-add-a" @click="popWin"></div>
+              <button class="add-chart" @click="popWin">新增图表</button>
+            </div>
+          </div>
+          <div
+            class="col"
+            style="margin-right: 16px; background-color: #ffffff; width: 452px"
+          >
+            <div>
+              <div class="control-add-a" @click="popWin"></div>
+              <button class="add-chart" @click="popWin">新增图表</button>
+            </div>
+          </div>
+          <div style="background-color: #ffffff; width: 452px; height: 300px">
+            <div>
+              <div class="control-add-a" @click="popWin"></div>
+              <button class="add-chart" @click="popWin">新增图表</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 第四栏 -->
+      <div
+        class="col-12 col-module row"
+        style="height: 80px; width: 1856px; margin: 0px 32px 16px 32px"
+      >
+        <div class="col" style="background-color: #ffffff">
+          <div style="margin: 28px 0px 0px 916px">
+            <div class="control-add-b" @click="addCardColumn"></div>
+            <button
+              style="
+                float: left;
+                color: #999999;
+                font-size: 14px;
+                margin-top: 3px;
+                margin-left: 16px;
+                border: 0;
+                padding: 0px;
+                background-color: #fff;
+                cursor: pointer;
+              "
+              @click="addCardColumn"
+            >
+              添加卡片
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-page>
+  <div id="fade" class="black_overlay"></div>
+  <div>
+    <q-card id="light" class="pop-win">
+      <q-card-section class="row" style="justify-content: space-between">
+        <div
+          style="color: #222222; font-size: 20px; padding: 14px 0px 8px 14px"
+        >
+          新增图表
+        </div>
+        <div class="close-card" @click="closeWin"></div>
+      </q-card-section>
+      <div class="row">
+        <button
+          class="card-button"
+          style="margin: 0px 24px 24px 32px"
+          @click="showHistory"
+        >
+          历史记录图表
+        </button>
+        <a>|</a>
+        <button
+          class="card-button"
+          style="margin: 0px 0px 24px 24px"
+          @click="showRealtime"
+        >
+          实时监控图表
+        </button>
+      </div>
+      <div id="history" style="display: block">
+        <div class="row select-model">
+          <a class="select-tip">选项功能</a>
+          <div>
+            <select class="select_type">
+              <option class="option-tip" disabled selected hidden>
+                --请选择--
+              </option>
+              <option class="option-tip">选项1</option>
+              <option>选项2</option>
+            </select>
+          </div>
+        </div>
+        <div class="row select-model">
+          <a class="select-tip">任务名称</a>
+          <div>
+            <select class="select_type">
+              <option class="option-tip" disabled selected hidden>
+                --请选择--
+              </option>
+              <option>选项1</option>
+              <option>选项2</option>
+            </select>
+          </div>
+        </div>
+        <div class="row select-model">
+          <a class="select-tip">选项图表</a>
+          <div>
+            <select class="select_type">
+              <option class="option-tip" disabled selected hidden>
+                --请选择--
+              </option>
+              <option>选项1</option>
+              <option>选项2</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div id="realtime" style="display: none">
+        <div class="row select-model">
+          <a class="select-tip">分类</a>
+          <div>
+            <select class="select_type">
+              <option class="option-tip" disabled selected hidden>
+                --请选择--
+              </option>
+              <option class="option-tip">选项1</option>
+              <option>选项2</option>
+            </select>
+          </div>
+        </div>
+        <div class="row select-model">
+          <a class="select-tip">参数</a>
+          <div>
+            <select class="select_type">
+              <option class="option-tip" disabled selected hidden>
+                --请选择--
+              </option>
+              <option>选项1</option>
+              <option>选项2</option>
+            </select>
+          </div>
+        </div>
+        <div class="row select-model">
+          <a class="select-tip">区间</a>
+          <div>
+            <select class="select_type">
+              <option class="option-tip" disabled selected hidden>
+                --请选择--
+              </option>
+              <option>选项1</option>
+              <option>选项2</option>
+            </select>
+          </div>
+        </div>
+        <div class="row select-model">
+          <a class="select-tip">周期</a>
+          <div>
+            <select class="select_type">
+              <option class="option-tip" disabled selected hidden>
+                --请选择--
+              </option>
+              <option>选项1</option>
+              <option>选项2</option>
+            </select>
+          </div>
+        </div>
+        <div class="row select-model">
+          <a class="select-tip">图表样式</a>
+          <div>
+            <select class="select_type">
+              <option class="option-tip" disabled selected hidden>
+                --请选择--
+              </option>
+              <option>选项1</option>
+              <option>选项2</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <!-- --------------------------- -->
+      <div class="row" style="position: absolute; bottom: 0px; left: 30%">
+        <button class="button-add-chart-no" @click="closeWin">取消</button>
+        <button class="button-add-chart-yes">确定</button>
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<script src="../js/control-panel.js" language="JavaScript" type="text/javascript"></script>
+
+<style scoped>
+@import "../css/control-panel.css";
+</style>
\ No newline at end of file
diff --git a/UI2.0/src/pages/Error404.vue b/UI2.0/src/pages/Error404.vue
new file mode 100644
index 0000000000000000000000000000000000000000..de8bedfb36222776cb3342606175dee08387d48d
--- /dev/null
+++ b/UI2.0/src/pages/Error404.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
+    <div>
+      <div style="font-size: 30vh">
+        404
+      </div>
+
+      <div class="text-h2" style="opacity:.4">
+        Oops. Nothing here...
+      </div>
+
+      <q-btn
+        class="q-mt-xl"
+        color="white"
+        text-color="blue"
+        unelevated
+        to="/"
+        label="Go Home"
+        no-caps
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'Error404'
+})
+</script>
diff --git a/UI2.0/src/pages/Execute-command.vue b/UI2.0/src/pages/Execute-command.vue
new file mode 100644
index 0000000000000000000000000000000000000000..449139d2868df0ac6c2df7d87fd112e84ee8f15e
--- /dev/null
+++ b/UI2.0/src/pages/Execute-command.vue
@@ -0,0 +1,377 @@
+<template>
+  <q-page>
+    <div
+      class="row"
+      style="
+        justify-content: flex-start;
+        width: 1920px;
+        background-color: #f1f2f6;
+      "
+    >
+      <a
+        style="
+          color: #222222;
+          font-size: 20px;
+          margin: 24px 0px 16px 32px;
+          font-weight: bold;
+        "
+        >执行命令</a
+      >
+      <div
+        class="col-12"
+        style="
+          width: 1856px;
+          margin: 0px 32px 32px 32px;
+          background-color: #ffffff;
+        "
+      >
+        <div style="margin-top: 32px">
+          <!-- 第一行 -->
+          <div class="row">
+            <a
+              style="
+                color: #222222;
+                font-size: 16px;
+                margin-left: 32px;
+                margin-top: 4px;
+                margin-bottom: 24px;
+                float: left;
+                font-weight: bold;
+              "
+            >
+              选择运行模式
+            </a>
+            <img
+              style="
+                height: 16px;
+                width: 16px;
+                margin-top: 8px;
+                margin-left: 8px;
+              "
+              src="../assets/execute-command/help-default.png"
+            />
+            <div class="btn-group">
+              <button
+                style="
+                  border-top-left-radius: 4px;
+                  border-bottom-left-radius: 4px;
+                  margin-left: 96px;
+                "
+                @click="showClickmode"
+              >
+                单机模式
+              </button>
+              <button style="width: 95px" @click="showNodemode">
+                分节点模式
+              </button>
+              <button
+                style="
+                  border-top-right-radius: 4px;
+                  border-bottom-right-radius: 4px;
+                "
+                @click="showClustermode"
+              >
+                集群模式
+              </button>
+            </div>
+          </div>
+
+          <!-- 第二行 -->
+          <div id="click-mode" style="display: block">
+            <div class="row" style="margin-left: 248px">
+              <div>
+                <a>Client IP</a>
+                <select class="select-first">
+                  <option disabled selected hidden>--请选择--</option>
+                  <option>选项1</option>
+                  <option>选项2</option>
+                  <option>选项3</option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div id="node-mode" style="display: none">
+            <div class="row" style="margin-left: 248px">
+              <div>
+                <a>Client IP</a>
+                <select class="select-first">
+                  <option disabled selected hidden>--请选择--</option>
+                  <option>选项1</option>
+                  <option>选项2</option>
+                  <option>选项3</option>
+                </select>
+              </div>
+              <div>
+                <a>atuned IP</a>
+                <select class="select-first">
+                  <option disabled selected hidden>--请选择--</option>
+                  <option>选项1</option>
+                  <option>选项2</option>
+                  <option>选项3</option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div id="cluster-mode" style="display: none">
+            <div class="row" style="margin-left: 248px">
+              <div>
+                <a>Client IP</a>
+                <select class="select-first">
+                  <option disabled selected hidden>--请选择--</option>
+                  <option>选项1</option>
+                  <option>选项2</option>
+                  <option>选项3</option>
+                </select>
+              </div>
+              <div>
+                <a>atuned IP</a>
+                <select class="select-first">
+                  <option disabled selected hidden>--请选择--</option>
+                  <option>选项1</option>
+                  <option>选项2</option>
+                  <option>选项3</option>
+                </select>
+              </div>
+              <div>
+                <a>atuned IP</a>
+                <select class="select-first">
+                  <option disabled selected hidden>--请选择--</option>
+                  <option>选项1</option>
+                  <option>选项2</option>
+                  <option>选项3</option>
+                </select>
+              </div>
+            </div>
+          </div>
+
+          <!-- 第三行 -->
+          <div class="row">
+            <a
+              style="
+                color: #222222;
+                font-size: 16px;
+                margin-left: 32px;
+                margin-bottom: 24px;
+                float: left;
+                font-weight: bold;
+              "
+            >
+              发起命令
+            </a>
+            <img
+              style="
+                height: 16px;
+                width: 16px;
+                margin-top: 5px;
+                margin-left: 8px;
+              "
+              src="../assets/execute-command/help-default.png"
+            />
+            <button class="btn-atune-adm" @click="closeAddparameter">
+              atune-adm
+            </button>
+            <button class="btn-add-parameter" @click="showAddparameter">
+              <q-icon
+                name="add"
+                style="font-size: 22px; padding-right: 6px"
+              ></q-icon
+              >添加参数
+            </button>
+            <select
+              id="select-tunning"
+              class="select-first"
+              style="width: 120px; margin-bottom: 24px"
+              @click="showTunningselect"
+            >
+              <option hidden>Tunning</option>
+              <option grade="1" value="a">选项1</option>
+              <option grade="2" value="b">选项2</option>
+              <option grade="3" value="c">选项3</option>
+            </select>
+          </div>
+          <div id="add-parameter-1" style="display: none">
+            <!-- 第四行  -->
+            <div class="row">
+              <input
+                style="margin: 4px 8px 0px 248px; padding-top: 5px"
+                type="checkbox"
+                value=""
+              /><a style="margin-right: 8px">--address</a>
+              <input class="please-input" type="text" placeholder="请输入" />
+              <input
+                style="margin: 4px 8px 0px 0px; padding-top: 5px"
+                type="checkbox"
+                value=""
+              /><a style="margin-right: 8px">--port</a>
+              <input class="please-input" type="text" placeholder="请输入" />
+              <input
+                style="margin: 4px 8px 0px 0px; padding-top: 5px"
+                type="checkbox"
+                value=""
+              /><a style="margin-right: 32px">--help</a>
+              <input
+                style="margin: 4px 8px 0px 0px; padding-top: 5px"
+                type="checkbox"
+                value=""
+              /><a style="margin-right: 8px">--Version</a>
+            </div>
+          </div>
+          <div id="tunning-select" style="display: none">
+            <!-- 第五行 -->
+            <div class="row">
+              <input
+                style="margin: 4px 8px 0px 248px; padding-top: 5px"
+                type="radio"
+                value=""
+              /><a style="margin-right: 18.87px">--profile</a>
+              <input
+                class="please-input"
+                style="margin-bottom: 24px"
+                type="text"
+                placeholder="请输入"
+              />
+            </div>
+
+            <!-- 第六行 -->
+            <div class="row">
+              <input
+                style="margin: 8px 8px 0px 248px; padding-top: 5px"
+                type="radio"
+                value=""
+              /><a style="margin-right: 18.87px; margin-top: 5px"
+                >勾选下列文件</a
+              >
+              <button
+                class="btn-add-parameter"
+                style="margin-bottom: 8px; margin-left: 650px; cursor: pointer"
+              >
+                <q-icon
+                  name="add"
+                  style="font-size: 22px; padding-right: 6px"
+                ></q-icon
+                >添加参数
+              </button>
+            </div>
+            <!-- 第七行 -->
+            <table class="selectfile-table">
+              <tr>
+                <th style="text-align: center; padding-left: 0px; width: 102px">
+                  <input type="checkbox" value="" />
+                </th>
+                <th style="width: 320px">
+                  <a style="margin-right: 8px">|</a>文件名称
+                </th>
+                <th style="width: 320px">
+                  <a style="margin-right: 8px">|</a>命令
+                </th>
+                <th><a style="margin-right: 8px">|</a>操作</th>
+              </tr>
+              <tr>
+                <td style="text-align: center; padding-left: 0px">
+                  <input type="checkbox" value="" />
+                </td>
+                <td>D:\Ccde\mkcert</td>
+                <td>UTF-8</td>
+                <td><button class="table-button">删除</button></td>
+              </tr>
+              <tr>
+                <td style="text-align: center; padding-left: 0px">
+                  <input type="checkbox" value="" />
+                </td>
+                <td>D:\Ccde\python3</td>
+                <td>UTF-8</td>
+                <td><button class="table-button">删除</button></td>
+              </tr>
+            </table>
+            <!-- 第八行 -->
+            <button
+              style="
+                height: 48px;
+                width: 883.44px;
+                background-color: #fff;
+                margin-left: 248px;
+                border: 1px dashed #cccccc;
+                color: #999999;
+                margin-bottom: 20px;
+                cursor: pointer;
+              "
+            >
+              <q-icon name="add" style="margin-right: 8px"></q-icon>添加文件
+            </button>
+            <!-- 第九行 -->
+            <div class="row">
+              <input
+                style="margin: 4px 8px 0px 248px; padding-top: 5px"
+                type="checkbox"
+                value=""
+              /><a style="margin-right: 32px">--help</a>
+              <input
+                style="margin: 4px 8px 0px 0px; padding-top: 5px"
+                type="checkbox"
+                value=""
+              /><a style="margin-right: 8px">--address</a>
+              <input
+                class="please-input"
+                type="text"
+                placeholder="请输入"
+                style="margin-bottom: 32px"
+              />
+              <input
+                style="margin: 4px 8px 0px 0px; padding-top: 5px"
+                type="checkbox"
+                value=""
+              />
+              <input
+                class="please-input"
+                type="text"
+                placeholder="请输入"
+                style="margin-bottom: 32px"
+              />
+            </div>
+          </div>
+          <!-- 第十行 -->
+          <div style="z-index: auto; position: absolute; margin-top: 10px">
+            <button
+              style="
+                height: 32px;
+                width: 32px;
+                padding: 0px;
+                margin: 5px 20px 0px 1760px;
+                background-color: #fff;
+                box-shadow: 4px 4px 3px #e6e6e6;
+                border: none;
+                border-radius: 4px;
+              "
+            >
+              <q-icon
+                name="fullscreen"
+                style="font-size: 28px; color: #999999"
+              ></q-icon>
+            </button>
+          </div>
+          <div class="textbox-div">
+            <textarea class="command-textbox" readonly="readonly">
+Iroot@localhost   atuned-adm-info
+Inco rrect Isage
+NAME
+atuned-adm info-display p rofile info ℃ 0 rresponding to specified profile
+USAGE
+atune-adm info [profile]
+DESCRIPTION:
+diaplay p rofile into ℃ 0 rresponding to profile
+atund-adm:"info" re ulres exactl 1 argument (s)
+Iroot@localhost~] #atune-adm list
+            </textarea>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script src="../js/execute-command.js" language="JavaScript" type="text/javascript"></script>
+
+<style scoped>
+@import "../css/execute-command.css";
+</style>
+    
\ No newline at end of file
diff --git a/UI2.0/src/pages/Home.vue b/UI2.0/src/pages/Home.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0c9cf299a80c138c2f50809ae958ad58ce0fec26
--- /dev/null
+++ b/UI2.0/src/pages/Home.vue
@@ -0,0 +1,232 @@
+<template>
+  <q-page>
+    <div class="row">
+      <!-- 首页第一栏 -->
+      <div class="col-12 col-module-a row" style="height: 600px; width: 1920px">
+        <div
+          class="float-left"
+          style="margin-left: 188px; padding: 0px; float: left"
+        >
+          <p
+            class="text-left text-h5 text-weight-bold"
+            style="
+              margin-top: 220px;
+              margin-bottom: 32px;
+              font-size: 40px;
+              color: #222222;
+            "
+          >
+            A-Tune介绍
+          </p>
+          <p
+            class="q-pt-sm introduce-text"
+            style="
+              font-size: 18px;
+              color: #222222;
+              padding: 0px;
+              margin-bottom: 262px;
+            "
+          >
+            A-Tune是一款基于AI的操作系统性能调优引擎。A-Tune利用AI技术，
+            <br />使操作系统“懂”业务，简化IT系统调优工作的同时，让应用程序发挥出色性能。
+          </p>
+        </div>
+        <div>
+          <img
+            alt=""
+            src="~assets/home/banner-picture.png"
+            style="background-size: contain|cover; width: auto; height: 100%"
+          />
+        </div>
+      </div>
+      <!-- 首页第二栏 -->
+      <div class="col-12 col-module" style="height: 280px; width: 1920px">
+        <div class="row" style="justify-content: center">
+          <!-- 第二栏——AI算法 -->
+          <div class="col introduce" style="margin-left: 188px">
+            <img
+              alt="A-Tune piciure"
+              src="~assets/home/AI-algorithm.png"
+              style="float: left; width: 43%"
+            />
+            <div style="float: left">
+              <p
+                class="text-left text-weight-medium"
+                style="
+                  font-size: 20px;
+                  color: #222222;
+                  margin-bottom: 16px;
+                  margin-top: 56px;
+                "
+              >
+                AI算法
+              </p>
+              <p style="margin-bottom: 54px">利用人工智能技术推理出具体应用</p>
+            </div>
+          </div>
+          <!-- 第二栏——自动化 -->
+          <div class="col introduce">
+            <img
+              alt="A-Tune piciure"
+              src="~assets/home/automation.png"
+              style="float: left; width: 43%"
+            />
+            <div style="float: left">
+              <p
+                class="text-left text-weight-medium"
+                style="
+                  font-size: 20px;
+                  color: #222222;
+                  margin-bottom: 16px;
+                  margin-top: 56px;
+                "
+              >
+                自动化
+              </p>
+              <p style="margin-bottom: 54px">
+                根据业务负载给出最佳参数配置组合
+              </p>
+            </div>
+          </div>
+          <!-- 第二栏——性能调优 -->
+          <div class="col introduce" style="margin-right: 188px">
+            <img
+              alt="A-Tune piciure"
+              src="~assets/home/performance-optimizing.png"
+              style="float: left; width: 43%"
+            />
+            <div style="float: left">
+              <p
+                class="text-left text-weight-medium"
+                style="
+                  font-size: 20px;
+                  color: #222222;
+                  margin-bottom: 16px;
+                  margin-top: 56px;
+                "
+              >
+                性能调优
+              </p>
+              <p style="margin-bottom: 54px">可使业务运行于最佳系统性能状态</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 首页第三栏——离线动态调优-->
+      <div
+        class="col-12 col-module-b row"
+        style="height: 680px; width: 1920px; justify-content: center"
+      >
+        <div class="col" style="margin: 250px 210px 270px 188px">
+          <p
+            class="text-left text-weight-bold"
+            style="font-size: 30px; color: #222222; margin-bottom: 32px"
+          >
+            离线动态调优
+          </p>
+          <p class="introduce-text">
+            A-Tune提供了最佳配置的自动搜索能力，免去人工反复做参数调整、性能评价的调优过程，极大地提升最优配置的搜寻效率。
+          </p>
+          <p class="introduce-text" style="margin-top: 24px">
+            要在被调优系统或应用闲置时使用，使用AI算法对用户提供的参数进行反复调优，从而达到性能较好的结果。同时提供重要参数选择功能，即在用户提供的参数中筛选出对当前场景性能影响更高的参数。
+          </p>
+        </div>
+        <img
+          alt="A-Tune piciure"
+          src="~assets/home/offline-dynamic-tuning.png"
+          style="width: 452px; height: 442px; margin: 119px 428px 119px 0px"
+        />
+      </div>
+      <!-- 首页第四栏——在线静态调优-->
+      <div
+        class="col-12 col-module row"
+        style="height: 680px; width: 1920px; justify-content: center"
+      >
+        <img
+          alt="A-Tune piciure"
+          src="~assets/home/online-static-tuning.png"
+          style="width: 452px; height: 442px; margin: 119px 0px 119px 376px"
+        />
+        <div class="col" style="margin: 250px 188px 294px 258px">
+          <p
+            class="text-left text-h6 text-weight-bold"
+            style="font-size: 30px; color: #222222; margin-bottom: 32px"
+          >
+            在线静态调优
+          </p>
+          <p class="introduce-text">
+            采集系统的实时统计数据进行负载类型识别，并进行自动优化。
+          </p>
+          <p class="introduce-text" style="margin-top: 24px">
+            需要在被调优系统或应用运行时使用，使用A-Tune采集功能对当前操作系统各项指标数据进行采集，并将采集结果进行建模分析，与已有模型对比，识别出当前系统运行的应用。随后将应用的调优参数下发。
+          </p>
+        </div>
+      </div>
+      <!-- 首页第五栏 -->
+      <div class="col-12 col-module-c" style="height: 680px; width: 1920px">
+        <p
+          class="text-center text-weight-bolder"
+          style="
+            margin: 56px 0px;
+            font-size: 30px;
+            font-family: SimHei;
+            color: #222222;
+          "
+        >
+          支持14大类50款应用调优
+        </p>
+        <div style="text-align: center">
+          <img
+            alt="14大类50款应用"
+            src="~assets/home/14-categories-and-50-applications.png"
+            style="margin-bottom: 56px"
+          />
+        </div>
+      </div>
+      <!-- 首页第六栏 -->
+      <div class="col-12 col-module-d" style="height: 220px; width: 1920px">
+        <div class="text-center" style="padding: 56px 0px">
+          <span
+            style="
+              font-size: 24px;
+              color: #ffffff;
+              display: inline-block;
+              padding-bottom: 24px;
+            "
+            >A-Tune安装部署</span
+          >
+          <br />
+          <span style="font-size: 14px; color: #cccccc"
+            >A-Tune整体应用可以分为三部分：atune-client,atuned,atune-engine。三部分功能可以作为整体部署在同一节点上，也可以拆分或两两组合，分别部署在二到三个节点上。</span
+          >
+          <br />
+          <span
+            style="
+              font-size: 14px;
+              color: #ffffff;
+              display: inline-block;
+              padding: 12px 16px 0px 16px;
+            "
+            >具体部署方法请参考</span
+          >
+          <a href="http://gitee.com/openeuler/A-Tune/blob/master/README.md"
+            style="
+              font-size: 14px;
+              color: #3781de;
+              font-family: HuaweiSans;
+              padding-left: 16px;
+              padding-right: 16px;
+            "
+            >http://gitee.com/openeuler/A-Tune/blob/master/README.md</a
+          >
+        </div>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script src="../js/home.js" language="JavaScript" type="text/javascript"></script>
+
+<style scoped>
+@import "../css/home.css";
+</style>
diff --git a/UI2.0/src/pages/Login.vue b/UI2.0/src/pages/Login.vue
new file mode 100644
index 0000000000000000000000000000000000000000..238948a7159b3a684093e72eac121cc2e572de42
--- /dev/null
+++ b/UI2.0/src/pages/Login.vue
@@ -0,0 +1,117 @@
+<template>
+  <q-page>
+    <div class="row">
+      <!-- style="height: 150px" -->
+      <div class="col-12 col-modu-a row" style="height: 800px; width: 1920px">
+        <div class="col">
+          <img
+            alt="A-Tune piciure"
+            src="~assets/login-picture.jpg"
+            style="width: 800px; height: 700px; margin-top: 60px; margin-left: 200px"
+          />
+        </div>
+
+
+        <q-card class="login-card">
+          <q-card-section>
+            <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
+              <div class="text-center text-h5 q-py-md">登录</div>
+              <q-input outlined placeholder="请输入账号" />
+              <q-input outlined placeholder="请输入密码" />
+              <!-- lazy-rules :rules="[(val) => (val && val.length > 0) || '请输入密码']" -->
+              <div class="row" style="justify-content: flex-end">
+                <!-- <q-checkbox
+                  size="xs"
+                  class="login-tips"
+                  val="xs"
+                  label="记住密码"
+                /> -->
+                <input style="margin: 3px 8px" type="checkbox" value="" />记住密码
+                <div
+                  class="login-tips"
+                  style="
+                    padding-top: 5px;
+                    margin-left: 212px;
+                    color: #3781de;
+                    font-size: 14px;
+                  "
+                >
+                  忘记密码？
+                </div>
+              </div>
+              <div>
+                <q-btn
+                  unelevated
+                  style="
+                    background-color: #5fa1f8;
+                    color: white;
+                    width: 368px;
+                    height: 46px;
+                  "
+                  label="登录"
+                  @click="onUserClick"
+                />
+                <div
+                  class="text-right row"
+                  style="margin-top: 50px; justify-content: flex-end"
+                >
+                  <div style="font-size: 14px">还没账号？</div>
+                  <div style="color: #3781de; font-size: 14px" @click="onRegisterClick">点击注册</div>
+                </div>
+                <!-- <q-btn
+                  label="Reset"
+                  type="reset"
+                  color="primary"
+                  flat
+                  class="q-ml-sm"
+                /> -->
+              </div>
+            </q-form>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  methods: {
+    onSubmit() {},
+    onUserClick() {
+      this.$router.push({
+        path: "/user",
+      });
+    },
+    onRegisterClick() {
+      this.$router.push({
+        path: "/register",
+      });
+    },
+  },
+});
+</script>
+
+<style>
+.col-modu-a {
+  background-color: #f1f2f6;
+  /* #F3F4F8 */
+}
+.login-Interface {
+  height: 300px;
+  width: 200px;
+  background-color: #fff;
+  border-radius: 3px;
+  box-shadow: 2px 2px 5px 2px #c2d9f8;
+  margin: 40px 80px;
+}
+.login-card {
+  width: 400px;
+  height: 440px;
+  margin: 180px 250px;
+}
+</style>
+          
+    
\ No newline at end of file
diff --git a/UI2.0/src/pages/Realtime-information.vue b/UI2.0/src/pages/Realtime-information.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d6f42407b1c82e32759a146605e0f2b20b15e3e6
--- /dev/null
+++ b/UI2.0/src/pages/Realtime-information.vue
@@ -0,0 +1,125 @@
+<template>
+  <q-page>
+    <div
+      class="row"
+      style="
+        justify-content: flex-start;
+        width: 1920px;
+        background-color: #f1f2f6;
+      "
+    >
+      <a
+        style="
+          color: #222222;
+          font-size: 20px;
+          margin: 24px 0px 16px 32px;
+          font-weight: bold;
+        "
+        >数据实时监控</a
+      >
+      <div
+        class="col-12 col-module"
+        style="
+          width: 1856px;
+          height: 108px;
+          margin: 0px 32px 32px 32px;
+          background-color: #ffffff;
+        "
+      >
+        <div class="row" style="margin-top: 32px;justify-content:space-between;">
+          <div class="row" style="margin-left: 32px">
+            <div>
+              <a>分类:</a>
+              <select class="select-first">
+                <option disabled selected hidden>--请选择--</option>
+                <option>选项1</option>
+                <option>选项2</option>
+                <option>选项3</option>
+              </select>
+            </div>
+            <div>
+              <a>参数:</a>
+              <select class="select-first">
+                <option disabled selected hidden>--请选择--</option>
+                <option>选项1</option>
+                <option>选项2</option>
+                <option>选项3</option>
+              </select>
+            </div>
+            <div>
+              <a>区间:</a>
+              <select class="select-first">
+                <option disabled selected hidden>--请选择--</option>
+                <option>选项1</option>
+                <option>选项2</option>
+                <option>选项3</option>
+              </select>
+            </div>
+            <div>
+              <a>周期:</a>
+              <select class="select-first">
+                <option disabled selected hidden>--请选择--</option>
+                <option>选项1</option>
+                <option>选项2</option>
+                <option>选项3</option>
+              </select>
+            </div>
+            <div>
+              <a>图表样式:</a>
+              <select class="select-first">
+                <option disabled selected hidden>--请选择--</option>
+                <option>选项1</option>
+                <option>选项2</option>
+                <option>选项3</option>
+              </select>
+            </div>
+          </div>
+          <button class="btn-submit">提交</button>
+        </div>
+      </div>
+      <div
+        class="col-12 col-module"
+        style="
+          width: 1856px;
+          height: 900px;
+          margin: 0px 32px 32px 32px;
+          background-color: #ffffff;
+        "
+      >
+        <div style="margin-top: 32px">暂无数据</div>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+</script>
+
+<style scoped>
+.col-module {
+  background-color: #f1f2f6;
+}
+.select-first {
+  margin: 0px 32px 0px 8px;
+  padding: 0px 16px;
+  height: 32px;
+  width: 210px;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  color: #222222;
+  font-size: 14px;
+  outline: none;
+}
+.btn-submit {
+  border-radius: 4px;
+  margin-right: 32px;
+  height: 32px;
+  width: 110px;
+  background-color: #3781de;
+  color: #ffffff;
+  font-size: 14px;
+  border: 1px solid #3781de;
+  cursor: pointer;
+}
+</style>
+    
\ No newline at end of file
diff --git a/UI2.0/src/pages/Register.vue b/UI2.0/src/pages/Register.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6cfe74b85649b237ca0239052f5e11cdd87959d7
--- /dev/null
+++ b/UI2.0/src/pages/Register.vue
@@ -0,0 +1,94 @@
+<template>
+  <q-page>
+    <div class="row">
+      <!-- style="height: 150px" -->
+      <div class="col-12 col-mod-a row" style="height: 800px; width: 1920px">
+        <div class="col">
+          <img
+            alt="A-Tune piciure"
+            src="~assets/login-picture.jpg"
+            style="width: 800px; height: 700px; margin-top: 60px; margin-left: 200px"
+          />
+        </div>
+
+        <q-card class="login-card">
+          <q-card-section>
+            <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
+              <div class="text-center text-h5 q-py-md">注册</div>
+              <q-input outlined placeholder="请输入邮箱" />
+              <q-input outlined placeholder="请输入用户名" />
+              <q-input outlined placeholder="请输入密码" />
+              <!-- lazy-rules :rules="[(val) => (val && val.length > 0) || '请输入密码']" -->
+              
+              <div>
+                <q-btn
+                  unelevated
+                  style="
+                    background-color: #5fa1f8;
+                    color: white;
+                    width: 368px;
+                    height: 46px;
+                    margin-top: 20px;
+                  "
+                  label="立即注册"
+                />
+                <div
+                  class="text-right row"
+                  style="margin-top: 20px; justify-content: flex-end"
+                >
+                  <div style="font-size: 14px">已有账号？</div>
+                  <div style="color: #3781de; font-size: 14px" @click="onLoginClick">点击登录</div>
+                </div>
+                <!-- <q-btn
+                  label="Reset"
+                  type="reset"
+                  color="primary"
+                  flat
+                  class="q-ml-sm"
+                /> -->
+              </div>
+            </q-form>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  methods: {
+    onSubmit() {},
+    onLoginClick() {
+      this.$router.push({
+        path: "/login",
+      });
+    },
+    
+  },
+});
+</script>
+
+<style>
+.col-mod-a {
+  background-color: #f1f2f6;
+  /* #F3F4F8 */
+}
+.login-Interface {
+  height: 300px;
+  width: 200px;
+  background-color: #fff;
+  border-radius: 3px;
+  box-shadow: 2px 2px 5px 2px #c2d9f8;
+  margin: 40px 80px;
+}
+.login-card {
+  width: 400px;
+  height: 440px;
+  margin: 180px 250px;
+}
+</style>
+          
+    
\ No newline at end of file
diff --git a/UI2.0/src/quasar.d.ts b/UI2.0/src/quasar.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e9a276aded6b5566c0f7168f6e74f1f35a1dc0b7
--- /dev/null
+++ b/UI2.0/src/quasar.d.ts
@@ -0,0 +1,7 @@
+// Forces TS to apply `@quasar/app` augmentations of `quasar` package
+// Removing this would break `quasar/wrappers` imports as those typings are declared
+//  into `@quasar/app`
+// As a side effect, since `@quasar/app` reference `quasar` to augment it,
+//  this declaration also apply `quasar` own
+//  augmentations (eg. adds `$q` into Vue component context)
+/// <reference types="@quasar/app" />
diff --git a/UI2.0/src/router/index.js b/UI2.0/src/router/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..c2e623525ca0b7875f1fc16023ef39d678b3c345
--- /dev/null
+++ b/UI2.0/src/router/index.js
@@ -0,0 +1,30 @@
+import { route } from 'quasar/wrappers'
+import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'
+import routes from './routes'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Router instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Router instance.
+ */
+
+export default route(function (/* { store, ssrContext } */) {
+  const createHistory = process.env.SERVER
+    ? createMemoryHistory
+    : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory)
+
+  const Router = createRouter({
+    scrollBehavior: () => ({ left: 0, top: 0 }),
+    routes,
+
+    // Leave this as is and make changes in quasar.conf.js instead!
+    // quasar.conf.js -> build -> vueRouterMode
+    // quasar.conf.js -> build -> publicPath
+    history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE)
+  })
+
+  return Router
+})
diff --git a/UI2.0/src/router/routes.js b/UI2.0/src/router/routes.js
new file mode 100644
index 0000000000000000000000000000000000000000..71d6ab3622fb195c54b0bef23db0956f633d1bed
--- /dev/null
+++ b/UI2.0/src/router/routes.js
@@ -0,0 +1,68 @@
+
+const routes = [
+  {
+    path: '/',
+    component: () => import('layouts/MainLayout.vue'),
+    children: [
+      { path: '', component: () => import('pages/Home.vue') }
+    ]
+  },
+  {
+    path: '/login',
+    component: () => import('layouts/LoginLayout.vue'),
+    children: [
+      { path: '', component: () => import('pages/Login.vue') }
+    ]
+  },
+  {
+    path: '/register',
+    component: () => import('layouts/LoginLayout.vue'),
+    children: [
+      { path: '', component: () => import('pages/Register.vue') }
+    ]
+  },
+  {
+    path: '/user',
+    component: () => import('layouts/UserLayout.vue'),
+    children: [
+      { path: '', component: () => import('pages/Control-panel.vue') }
+    ]
+  },
+  {
+    path: '/command',
+    component: () => import('layouts/UserLayout.vue'),
+    children: [
+      { path: '', component: () => import('pages/Execute-command.vue') }
+    ]
+  },
+  {
+    path: '/information',
+    component: () => import('layouts/UserLayout.vue'),
+    children: [
+      { path: '', component: () => import('pages/Realtime-information.vue') }
+    ]
+  },
+  {
+    path: '/record',
+    component: () => import('layouts/UserLayout.vue'),
+    children: [
+      { path: '', component: () => import('pages/Command-record.vue') }
+    ]
+  },
+  {
+    path: '/contact',
+    component: () => import('layouts/UserLayout.vue'),
+    children: [
+      { path: '', component: () => import('pages/Contact-us.vue') }
+    ]
+  },
+
+  // Always leave this as last one,
+  // but you can also remove it
+  {
+    path: '/:catchAll(.*)*',
+    component: () => import('pages/Error404.vue')
+  }
+]
+
+export default routes
diff --git a/UI2.0/src/store/index.js b/UI2.0/src/store/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f4ce543a85b3cbed66bc1f99f63249d9ac8d2768
--- /dev/null
+++ b/UI2.0/src/store/index.js
@@ -0,0 +1,27 @@
+import { store } from 'quasar/wrappers'
+import { createStore } from 'vuex'
+
+// import example from './module-example'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default store(function (/* { ssrContext } */) {
+  const Store = createStore({
+    modules: {
+      // example
+    },
+
+    // enable strict mode (adds overhead!)
+    // for dev mode and --debug builds only
+    strict: process.env.DEBUGGING
+  })
+
+  return Store
+})
diff --git a/UI2.0/src/store/module-example/actions.js b/UI2.0/src/store/module-example/actions.js
new file mode 100644
index 0000000000000000000000000000000000000000..cf42235248229bf14f04e77a9ca239f0caae6fae
--- /dev/null
+++ b/UI2.0/src/store/module-example/actions.js
@@ -0,0 +1,2 @@
+export function someAction (/* context */) {
+}
diff --git a/UI2.0/src/store/module-example/getters.js b/UI2.0/src/store/module-example/getters.js
new file mode 100644
index 0000000000000000000000000000000000000000..ce8aa1f26bffc2d952395192050c4b27643d599c
--- /dev/null
+++ b/UI2.0/src/store/module-example/getters.js
@@ -0,0 +1,2 @@
+export function someGetter (/* state */) {
+}
diff --git a/UI2.0/src/store/module-example/index.js b/UI2.0/src/store/module-example/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..babab8ec520e34a51ac8ece7387024dd41ba4079
--- /dev/null
+++ b/UI2.0/src/store/module-example/index.js
@@ -0,0 +1,12 @@
+import state from './state'
+import * as getters from './getters'
+import * as mutations from './mutations'
+import * as actions from './actions'
+
+export default {
+  namespaced: true,
+  getters,
+  mutations,
+  actions,
+  state
+}
diff --git a/UI2.0/src/store/module-example/mutations.js b/UI2.0/src/store/module-example/mutations.js
new file mode 100644
index 0000000000000000000000000000000000000000..ce57bfbced558dc936316f8918421bcab16952cc
--- /dev/null
+++ b/UI2.0/src/store/module-example/mutations.js
@@ -0,0 +1,2 @@
+export function someMutation (/* state */) {
+}
diff --git a/UI2.0/src/store/module-example/state.js b/UI2.0/src/store/module-example/state.js
new file mode 100644
index 0000000000000000000000000000000000000000..6fd747ceba9f63969a407a2904027a0edb9cbe5c
--- /dev/null
+++ b/UI2.0/src/store/module-example/state.js
@@ -0,0 +1,5 @@
+export default function () {
+  return {
+    //
+  }
+}
diff --git a/UI2.0/src/store/store-flag.d.ts b/UI2.0/src/store/store-flag.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7677175b003245a3d07a7608d33d8e501042d52d
--- /dev/null
+++ b/UI2.0/src/store/store-flag.d.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import "quasar/dist/types/feature-flag";
+
+declare module "quasar/dist/types/feature-flag" {
+  interface QuasarFeatureFlags {
+    store: true;
+  }
+}