| | |
| | | <template> |
| | | <div class="width-100 flex-row flex-justify-between flex-align-center" style="height: 60px;"> |
| | | <div class="width-100 flex-row flex-justify-between flex-align-center" style="height: 58px;"> |
| | | <div class="height-100"> |
| | | <!-- <a-avatar :size="40" shape="square" :src="cloudapi" /> --> |
| | | <span class="ml10 fontBold">{{ workspaceName }}</span> |
| | | <!-- <span class="ml10 fontBold">{{ workspaceName }}</span> --> |
| | | </div> |
| | | |
| | | <a-space class="fz16 height-100" size="large"> |
| | | <router-link |
| | | <router-link |
| | | v-for="item in options" |
| | | :key="item.key" |
| | | :to="item.path" |
| | | :class="{ |
| | | 'menu-item': true, |
| | | }"> |
| | | <span @click="selectedRoute(item.path)" :style="selected === item.path ? 'color: #2d8cf0;' : 'color: white'">{{ item.label }}</span> |
| | | </router-link> |
| | | }" |
| | | > |
| | | <span |
| | | @click="selectedRoute(item.path)" |
| | | :style="selected === item.path ? 'color: #2d8cf0;' : 'color: white'" |
| | | >{{ item.label }}</span> |
| | | </router-link> |
| | | </a-space> |
| | | |
| | | <div class="height-100 fz16 flex-row flex-justify-between flex-align-center"> |
| | | <a-dropdown> |
| | | <div class="height-100"> |
| | | <span class="fz20 mt20" style="border: 2px solid white; border-radius: 50%; display: inline-flex;"><UserOutlined /></span> |
| | | <span class="ml10 mr10" style="float: right;">{{ username }}</span> |
| | | <div class="height-100 flex-display flex-align-center" style="height:58px;"> |
| | | <span |
| | | class="fz18" |
| | | style="border: 2px solid white; border-radius: 50%; display: inline-flex;" |
| | | > |
| | | <UserOutlined /> |
| | | </span> |
| | | <span class="ml5 mr5 fz14" style="float: right;">{{ username }}</span> |
| | | </div> |
| | | <template #overlay> |
| | | <a-menu theme="dark" class="flex-column flex-justify-between flex-align-center"> |
| | | <a-menu |
| | | theme="dark" |
| | | class="flex-column flex-justify-between flex-align-center" |
| | | style="margin-top:-15px;background:black" |
| | | > |
| | | <a-menu-item> |
| | | <span class="mr10" style="font-size: 16px;"><ExportOutlined /></span> |
| | | <span class="mr10" style="font-size: 16px;"> |
| | | <ExportOutlined /> |
| | | </span> |
| | | <span @click="logout">退出登录</span> |
| | | </a-menu-item> |
| | | </a-menu> |
| | |
| | | const root = getRoot() |
| | | const selected = ref<string>(root.$route.path) |
| | | const route = useRoute() |
| | | watch(route, (newVal) => { |
| | | if (newVal) { |
| | | selected.value = newVal.path |
| | | console.log(selected.value, '+++++') |
| | | } |
| | | }, { |
| | | immediate: true, |
| | | }) |
| | | watch( |
| | | route, |
| | | (newVal) => { |
| | | if (newVal) { |
| | | selected.value = newVal.path |
| | | } |
| | | }, |
| | | { |
| | | immediate: true, |
| | | }, |
| | | ) |
| | | interface IOptions { |
| | | key: number |
| | | label: string |
| | |
| | | const options = [ |
| | | { key: 0, label: '项目', path: '/' + ERouterName.PROJECT_LIST }, |
| | | { key: 1, label: '人员管理', path: '/' + ERouterName.MEMBERS }, |
| | | { key: 2, label: '设备管理', path: '/' + ERouterName.DEVICES }, |
| | | // { key: 2, label: '设备管理', path: '/' + ERouterName.DEVICES }, |
| | | // { key: 3, label: ERouterName.FIRMWARES.charAt(0).toUpperCase() + ERouterName.FIRMWARES.substr(1), path: '/' + ERouterName.FIRMWARES }, |
| | | ] |
| | | |
| | |
| | | font-weight: 500; |
| | | font-size: 18px; |
| | | } |
| | | |
| | | </style> |