From 4dccbb68399da2d46943b8d613585afb49aa5455 Mon Sep 17 00:00:00 2001
From: sean.zhou <sean.zhou@dji.com>
Date: Fri, 22 Jul 2022 20:48:54 +0800
Subject: [PATCH] V1.1.0 for dock
---
src/pages/project-app/sidebar.vue | 50 +++++++++++++++++++++++++++++++++++---------------
1 files changed, 35 insertions(+), 15 deletions(-)
diff --git a/src/pages/project-app/sidebar.vue b/src/pages/project-app/sidebar.vue
index 023a6d0..c042e6e 100644
--- a/src/pages/project-app/sidebar.vue
+++ b/src/pages/project-app/sidebar.vue
@@ -1,5 +1,6 @@
<template>
- <div class="demo-project-sidebar-wrapper">
+ <div class="demo-project-sidebar-wrapper flex-justify-between">
+ <div>
<router-link
v-for="item in options"
:key="item.key"
@@ -7,19 +8,28 @@
:class="{
'menu-item': true,
selected: selectedRoute(item),
- disabled: item.key > 6
}"
>
<a-tooltip :title="item.label" placement="right">
- <span>{{ item.label }}</span>
+ <Icon class="fz20" style="width: 50px;" :icon="item.icon"/>
</a-tooltip>
</router-link>
+ </div>
+ <div class="mb20 flex-display flex-column flex-align-center flex-justify-between">
+ <a-tooltip title="Back to home" placement="right">
+ <a @click="goHome"> <Icon icon="ImportOutlined" style="font-size: 22px; color: white"/></a>
+ </a-tooltip>
+ </div>
</div>
</template>
<script lang="ts">
-import { defineComponent } from 'vue'
+import { createVNode, defineComponent } from 'vue'
import { getRoot } from '/@/root'
+import * as icons from '@ant-design/icons-vue'
+import { ERouterName } from '/@/types'
+import websocket from '/@/api/websocket'
+
interface IOptions {
key: number
label: string
@@ -32,26 +42,38 @@
icon: string
}
+const Icon = (props: {icon: string}) => {
+ return createVNode((icons as any)[props.icon])
+}
+
export default defineComponent({
+ components: {
+ Icon,
+ },
name: 'Sidebar',
setup () {
const root = getRoot()
const options = [
- { key: 0, label: 'livestream', path: '/livestream', icon: 'livestream' },
- { key: 1, label: 'tsa', path: '/tsa', icon: 'tsa' },
- { key: 2, label: 'layer', path: '/layer', icon: 'layer' },
- { key: 3, label: 'media', path: '/media', icon: 'media' },
- { key: 4, label: 'wayline', path: '/wayline', icon: 'wayline' }
+ { key: 0, label: 'Tsa', path: '/' + ERouterName.TSA, icon: 'TeamOutlined' },
+ { key: 1, label: 'Livestream', path: '/' + ERouterName.LIVESTREAM, icon: 'VideoCameraOutlined' },
+ { key: 2, label: 'Annotations', path: '/' + ERouterName.LAYER, icon: 'EnvironmentOutlined' },
+ { key: 3, label: 'Media Files', path: '/' + ERouterName.MEDIA, icon: 'PictureOutlined' },
+ { key: 4, label: 'Fligth Route Library', path: '/' + ERouterName.WAYLINE, icon: 'NodeIndexOutlined' },
+ { key: 5, label: 'Task Plan Library', path: '/' + ERouterName.TASK, icon: 'CalendarOutlined' }
]
function selectedRoute (item: IOptions) {
const path = typeof item.path === 'string' ? item.path : item.path.path
return root.$route.path?.indexOf(path) === 0
}
-
+ function goHome () {
+ root.$router.push('/' + ERouterName.MEMBERS)
+ websocket.close()
+ }
return {
options,
- selectedRoute
+ selectedRoute,
+ goHome,
}
}
})
@@ -62,7 +84,7 @@
display: flex;
flex-direction: column;
align-items: center;
- width: 80px;
+ width: 50px;
border-right: 1px solid #4f4f4f;
color: $text-white-basic;
// flex: 1;
@@ -76,7 +98,7 @@
color: $text-white-basic;
cursor: pointer;
&.selected {
- background-color: $dark-highlight;
+ background-color: #101010;
color: $primary;
}
&.disabled {
@@ -95,8 +117,6 @@
}
}
-</style>
-<style>
.ant-tooltip-open {
border: 0;
}
--
Gitblit v1.9.3