feat: fronted frame

2 years ago · e29f85ab50
10 changed files with 152 additions and 86 deletions
--- a/Frontend/index.html
+++ b/Frontend/index.html
@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
+    <title>Cis</title>
  </head>
  <body>
    <div id="app"></div>
--- a/Frontend/src/App.vue
+++ b/Frontend/src/App.vue
@ -11,6 +11,7 @@

 <style>
 .app {
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
 }
 </style>
--- a/Frontend/src/main.ts
+++ b/Frontend/src/main.ts
@ -3,8 +3,11 @@ import './style.css';
 import App from './App.vue';
 import router from '@/router';
 import store from '@/store';
+import Antd from 'ant-design-vue';
+import 'ant-design-vue/dist/antd.less'

 createApp(App)
    .use(router)
    .use(store)
+    .use(Antd)
    .mount('#app')
--- a/Frontend/src/router/index.ts
+++ b/Frontend/src/router/index.ts
@ -1,11 +1,10 @@
 import {createRouter, createWebHistory, RouteRecordRaw} from "vue-router";
-import Index from "@/views/index.vue";

 const routes: Array<RouteRecordRaw> = [
    {
        path: "/",
        name: "Index",
-        component: Index,
+        component: () => import('@/views/index.vue')
    },
 ];

--- a/Frontend/src/style.css
+++ b/Frontend/src/style.css
@ -1,81 +1,29 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
+body, html, ul, ol {
+    margin: 0;
+    padding: 0;
 }

 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+    width: 100%;
+    height: 100%;
 }

-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+ul, ol {
+    list-style: none;
 }

-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
+a {
+    text-decoration: none;
+    color: #666;
 }

-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+a,
+img {
+    border: 0;
 }

-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+input {
+    border: none;
+    background: transparent;
+    outline: none;
 }
--- a/Frontend/src/views/index.vue
+++ b/Frontend/src/views/index.vue
@ -1,13 +1,43 @@
 <template>
-  <h1>hello, world.</h1>
+  <a-layout style="height: 100vh;">
+
+    <a-layout-header class="header" style="padding: 0;">
+      <div style="float: left; padding: 0 20px 0 20px;"><img src="@assets/vue.svg" alt=""/></div>
+      <a-menu
+          theme="dark"
+          mode="horizontal"
+          style="line-height: 64px;"
+      >
+        <a-menu-item key="curd" @click="pageName='curd'">Curd</a-menu-item>
+        <a-menu-item key="videoCenter" @click="pageName='videoCenter'">VideoCenter</a-menu-item>
+      </a-menu>
+    </a-layout-header>
+
+    <a-layout class="page-wrapper">
+      <div class="page-tab" v-if="pageName==='curd'">
+        <Curd/>
+      </div>
+      <div class="page-tab" v-else-if="pageName==='videoCenter'">
+        <VideoCenter/>
+      </div>
+    </a-layout>
+
+  </a-layout>
 </template>

-<script>
+<script lang="ts">
+import Curd from '@views/page/Curd.vue';
+import VideoCenter from '@views/page/VideoCenter.vue';
+
 export default {
-  name: "index"
+  components: {VideoCenter, Curd},
+  data() {
+    return {
+      pageName: "curd", //默认选中 curd 页面
+    };
+  }
 }
 </script>

 <style scoped>
-
 </style>
--- a/Frontend/src/views/page/Curd.vue
+++ b/Frontend/src/views/page/Curd.vue
@ -0,0 +1,61 @@
+<template>
+  <a-layout style="position: fixed; height: 100%; width: 100%;">
+
+    <a-layout-sider width="200" style="background: #fff">
+      <a-menu
+          mode="inline"
+          :style="{ height: '100%', borderRight: 0 }"
+      >
+        <a-sub-menu key="CameraBase">
+          <template #title>
+              <span>
+                CameraBase
+              </span>
+          </template>
+          <a-menu-item key="cbCamera">Camera</a-menu-item>
+        </a-sub-menu>
+        <a-sub-menu key="CameraMark">
+          <template #title>
+              <span>
+                CameraMark
+              </span>
+          </template>
+          <a-menu-item key="cmMarkGroup">MarkGroup</a-menu-item>
+          <a-menu-item key="cmMarkLabel">MarkLabel</a-menu-item>
+        </a-sub-menu>
+        <a-sub-menu key="System">
+          <template #title>
+              <span>
+                System
+              </span>
+          </template>
+          <a-menu-item key="SysDict">Dict</a-menu-item>
+        </a-sub-menu>
+      </a-menu>
+    </a-layout-sider>
+
+    <a-layout style="padding: 0 16px 16px;">
+      <a-breadcrumb style="margin: 16px 0;">
+        <a-breadcrumb-item>Home</a-breadcrumb-item>
+        <a-breadcrumb-item>List</a-breadcrumb-item>
+        <a-breadcrumb-item>App</a-breadcrumb-item>
+      </a-breadcrumb>
+      <a-layout-content
+          :style="{ background: '#fff', padding: '16px', margin: 0, minHeight: '280px' }"
+      >
+        Content
+      </a-layout-content>
+    </a-layout>
+
+  </a-layout>
+</template>
+
+<script>
+export default {
+  name: "Curd"
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/Frontend/src/views/page/VideoCenter.vue
+++ b/Frontend/src/views/page/VideoCenter.vue
@ -0,0 +1,17 @@
+<template>
+  <a-layout style="position: fixed; height: 100%; width: 100%;">
+    <div>
+      <h1>This is video center page.</h1>
+    </div>
+  </a-layout>
+</template>
+
+<script>
+export default {
+  name: "VideoCenter"
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/Frontend/tsconfig.json
+++ b/Frontend/tsconfig.json
@ -1,6 +1,5 @@
 {
  "compilerOptions": {
-    "baseUrl": ".",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
@ -13,6 +12,7 @@
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
+    "baseUrl": "./",
    "paths": {
      "@/*":["src/*"]
    }
--- a/Frontend/vite.config.ts
+++ b/Frontend/vite.config.ts
@ -8,17 +8,24 @@ export default defineConfig({
  resolve:{
    alias:{
      '~': resolve(__dirname, './'),
-      "@": resolve(__dirname, "src"),
-      "@assets": resolve(__dirname, "src/assets"),
-      "@components": resolve(__dirname, "src/components"),
-      "@images": resolve(__dirname, "src/assets/images"),
-      "@views": resolve(__dirname, "src/views"),
-      "@store": resolve(__dirname, "src/store"),
+      "@": resolve(__dirname, "./src"),
+      "@assets": resolve(__dirname, "./src/assets"),
+      "@components": resolve(__dirname, "./src/components"),
+      "@images": resolve(__dirname, "./src/assets/images"),
+      "@views": resolve(__dirname, "./src/views"),
+      "@store": resolve(__dirname, "./src/store"),
    }
  },
  server: {
    host: true, // 类型：string | boolean 指定服务器应该监听哪个 IP 地址
    port: 3100, // 类型： number 指定服务器端口
    cors: true, // 类型： boolean | CorsOptions 为开发服务器配置 CORS。默认启用并允许任何源
-  }
+  },
+  css: {
+    preprocessorOptions: {
+      less: {
+        javascriptEnabled: true, // do not remove this line
+      }
+    }
+  },
 })