Browse Source

fix: navbar兼容移动端

lvkun996 2 years ago
parent
commit
09fa0d1ead

+ 1 - 1
src/api/iot/data.ts

@@ -10,7 +10,7 @@ export const getHistoryDataPage = (params: IOT.API.DATA.QueryParams) => {
 }
 }
 
 
 export const getDataApiPage = (params: {page: number, pageSize: number, apiLabel: string}) => {
 export const getDataApiPage = (params: {page: number, pageSize: number, apiLabel: string}) => {
-  return request<IOT.API.DATA.OpenApi[]>({
+  return request<IOT.API.DATA.OpenApi>({
     url: '/dataApi/page',
     url: '/dataApi/page',
     method: 'GET',
     method: 'GET',
     params
     params

+ 1 - 0
src/layout/components/Sidebar/index.vue

@@ -1,5 +1,6 @@
 <template>
 <template>
   <a-button
   <a-button
+    v-if="isMobile"
     class="open-icon"
     class="open-icon"
     type="primary"
     type="primary"
     @click="openDrawer"
     @click="openDrawer"

+ 1 - 4
src/layout/layout.vue

@@ -2,7 +2,7 @@
     <a-layout class="a-layout" >
     <a-layout class="a-layout" >
       <SiderBar />
       <SiderBar />
       <a-layout >
       <a-layout >
-        <Navbar v-if="!isMobile" />
+        <Navbar />
         <span style="padding: 0 24px 24px;margin-top: 24px;overflow: hidden;overflow-y: scroll" >
         <span style="padding: 0 24px 24px;margin-top: 24px;overflow: hidden;overflow-y: scroll" >
           <RouterView></RouterView>
           <RouterView></RouterView>
         </span>
         </span>
@@ -13,9 +13,6 @@
 <script  lang="ts" setup >
 <script  lang="ts" setup >
 import Navbar from './navbar.vue'
 import Navbar from './navbar.vue'
 import SiderBar from './components/Sidebar/index.vue'
 import SiderBar from './components/Sidebar/index.vue'
-import { useDeviceType } from '@/hooks'
-
-const isMobile = useDeviceType()
 
 
 </script>
 </script>
 
 

+ 19 - 4
src/layout/navbar.vue

@@ -1,7 +1,19 @@
 <template>
 <template>
-  <a-layout-header class="header" :style="{backgroundColor: headerBgColor}">
-      <a-row   >
-        <a-col :span="18" >
+   <a-layout-header class="header" v-if="isMobile" :style="{backgroundColor: headerBgColor}">
+      <a-row>
+        <a-col :span="8" >
+        </a-col>
+        <a-col :span="8" class="df-center">
+          <a-button type="text" @click="changeTheme" > <IconTsx :name="iconName" /></a-button>
+        </a-col>
+        <a-col class="df-center" span="8" >
+          <user />
+        </a-col>
+      </a-row>
+  </a-layout-header>
+  <a-layout-header class="header" v-else :style="{backgroundColor: headerBgColor}">
+      <a-row>
+        <a-col :span="15" >
         <a-menu
         <a-menu
           mode="horizontal"
           mode="horizontal"
           :style="{ lineHeight: '64px', border: 'none' }"
           :style="{ lineHeight: '64px', border: 'none' }"
@@ -16,7 +28,7 @@
           </a-menu-item>
           </a-menu-item>
         </a-menu>
         </a-menu>
         </a-col>
         </a-col>
-        <a-col :span="4" >
+        <a-col :span="9" >
           <a-row :gutter="[8, 8]" justify="end" >
           <a-row :gutter="[8, 8]" justify="end" >
             <a-col class="df-center" >
             <a-col class="df-center" >
               <a-button type="text" @click="changeTheme" > <IconTsx :name="iconName" /></a-button>
               <a-button type="text" @click="changeTheme" > <IconTsx :name="iconName" /></a-button>
@@ -37,6 +49,7 @@ import user from './user.vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
 import { IconTsx } from '@/components/MicroComponents/index'
 import { IconTsx } from '@/components/MicroComponents/index'
 import { useDesignStore } from '@/store'
 import { useDesignStore } from '@/store'
+import { useDeviceType } from '@/hooks'
 
 
 const route = useRoute()
 const route = useRoute()
 
 
@@ -52,6 +65,8 @@ const iconName = computed(() => designStore.theme ? 'sun' : 'moon')
 
 
 const headerBgColor = computed(() => designStore.theme ? '#141414' : '#fff')
 const headerBgColor = computed(() => designStore.theme ? '#141414' : '#fff')
 
 
+const isMobile = useDeviceType()
+
 const changeTheme = () => {
 const changeTheme = () => {
   designStore.changeModeltheme()
   designStore.changeModeltheme()
 }
 }

+ 0 - 1
src/service/request.ts

@@ -1,6 +1,5 @@
 import { message } from 'ant-design-vue'
 import { message } from 'ant-design-vue'
 import axios, { AxiosInstance, AxiosResponse } from 'axios'
 import axios, { AxiosInstance, AxiosResponse } from 'axios'
-import { useRoute, useRouter } from 'vue-router'
 
 
 const instance = axios.create({
 const instance = axios.create({
   baseURL: '',
   baseURL: '',