Browse Source

feat: fronted frame

master
fajiao 2 years ago
parent
commit
e29f85ab50
  1. 2
      Frontend/index.html
  2. 3
      Frontend/src/App.vue
  3. 3
      Frontend/src/main.ts
  4. 3
      Frontend/src/router/index.ts
  5. 86
      Frontend/src/style.css
  6. 38
      Frontend/src/views/index.vue
  7. 61
      Frontend/src/views/page/Curd.vue
  8. 17
      Frontend/src/views/page/VideoCenter.vue
  9. 2
      Frontend/tsconfig.json
  10. 21
      Frontend/vite.config.ts

2
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>

3
Frontend/src/App.vue

@ -11,6 +11,7 @@
<style>
.app {
height: 100%;
width: 100vw;
height: 100vh;
}
</style>

3
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')

3
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')
},
];

86
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;
}

38
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>

61
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>

17
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>

2
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/*"]
}

21
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
}
}
},
})

Loading…
Cancel
Save