From 7fe259299eef1bd7a2dcfdab32c06b7a61e5b244 Mon Sep 17 00:00:00 2001
From: wangqiao <wangqiao@kailinjt.com>
Date: Fri, 29 Aug 2025 17:40:54 +0800
Subject: [PATCH] Refactor drawing query pages and routing structure

---
 .../drawe-components/RecommendedColumnsV2.vue |   2 +-
 components/kl-wallpaper-category/index.vue    | 226 +++++-----
 .../[pageSize]/[[editions]]/[[source]].vue}   |  40 +-
 pages/drawe/index.vue                         |  28 +-
 .../query-v2/[projectType]-[editions].vue     | 110 -----
 .../[projectType]-[editions]-[source].vue     | 110 -----
 pages/home/components/SideMenu.vue            | 394 +++++++++---------
 7 files changed, 345 insertions(+), 565 deletions(-)
 rename pages/drawe/{query-v1/[projectType].vue => [projectType]/[pageNo]/[pageSize]/[[editions]]/[[source]].vue} (62%)
 delete mode 100644 pages/drawe/query-v2/[projectType]-[editions].vue
 delete mode 100644 pages/drawe/query-v3/[projectType]-[editions]-[source].vue

diff --git a/components/drawe-components/RecommendedColumnsV2.vue b/components/drawe-components/RecommendedColumnsV2.vue
index 2488b2c..2aebacb 100644
--- a/components/drawe-components/RecommendedColumnsV2.vue
+++ b/components/drawe-components/RecommendedColumnsV2.vue
@@ -34,7 +34,7 @@
   const tabBar = ref([
     {
       label: '图纸推荐',
-      value: '',
+      value: -1,
     },
     {
       label: '原创图纸',
diff --git a/components/kl-wallpaper-category/index.vue b/components/kl-wallpaper-category/index.vue
index 9e55b88..38a92e2 100644
--- a/components/kl-wallpaper-category/index.vue
+++ b/components/kl-wallpaper-category/index.vue
@@ -2,29 +2,37 @@
   <!-- 面包屑 -->
   <div v-if="level.length > 1" class="mb-[-10px] mt-[20px] pl-[20px]">
     <el-breadcrumb :separator-icon="ArrowRight">
-      <el-breadcrumb-item v-for="(item, index) in level" :key="item.name" class="cursor-pointer"
-        @click="handleClickBread(item, index)">{{
-          item.name
-        }}</el-breadcrumb-item>
+      <el-breadcrumb-item v-for="(item, index) in level" :key="item.name" class="cursor-pointer" @click="handleClickBread(item, index)">{{
+        item.name
+      }}</el-breadcrumb-item>
     </el-breadcrumb>
   </div>
   <div class="mt-[30px] box-border w-[100%] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[20px] py-[26px]">
     <div class="mb-[14px] flex items-start">
       <div class="flex-shrink-0 text-[15px] text-[#333333] font-normal">{{ computType }}分类</div>
       <div class="ml-[30px] mt-[-6px] flex flex-wrap">
-        <div v-for="(item, index) in projectTypeList" :key="index"
+        <div
+          v-for="(item, index) in projectTypeList"
+          :key="index"
           class="mb-[8px] mr-[26px] cursor-pointer rounded-[15px] px-[15px] py-[6px] text-[14px] text-[#666666] font-normal"
-          :class="item.id === query.projectType ? '!bg-[#ebeefe] !text-[#1A65FF]' : ''" @click="handleClick(item)">{{
-            item.name }}</div>
+          :class="item.id === query.projectType ? '!bg-[#ebeefe] !text-[#1A65FF]' : ''"
+          @click="handleClick(item)"
+          >{{ item.name }}</div
+        >
       </div>
     </div>
     <div class="flex items-start">
       <div class="flex-shrink-0 text-[15px] text-[#333333] font-normal">软件分类</div>
       <div class="ml-[30px] mt-[-6px] flex flex-wrap">
-        <div v-for="(item, index) in editionsList" :key="index"
+        <div
+          v-for="(item, index) in editionsList"
+          :key="index"
           class="mb-[8px] mr-[26px] cursor-pointer rounded-[15px] px-[15px] py-[6px] text-[14px] text-[#666666] font-normal"
-          :class="item.id === query.editions ? '!bg-[#ebeefe] !text-[#1A65FF]' : ''" @click="query.editions = item.id">
-          {{ item.name }}</div>
+          :class="item.id === query.editions ? '!bg-[#ebeefe] !text-[#1A65FF]' : ''"
+          @click="query.editions = item.id"
+        >
+          {{ item.name }}</div
+        >
       </div>
     </div>
     <!-- <div class="mb-14px flex items-start">
@@ -43,123 +51,115 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { parent } from '~/api/upnew/index'
-import type { pageReq } from '~/api/upnew/types'
-import { ArrowRight } from '@element-plus/icons-vue'
+  import { computed, ref } from 'vue'
+  import { parent } from '~/api/upnew/index'
+  import type { pageReq } from '~/api/upnew/types'
+  import { ArrowRight } from '@element-plus/icons-vue'
 
-const props = defineProps({
-  type: {
-    type: Number,
-    default: 1,
-  },
-  id: {
-    type: String,
-    default: '',
-  },
-  groundId: {
-    type: String,
-    default: '',
-  },
-})
+  const props = defineProps({
+    type: {
+      type: Number,
+      default: 1,
+    },
+    id: {
+      type: String,
+      default: '',
+    },
+    groundId: {
+      type: String,
+      default: '',
+    },
+  })
 
-const query = defineModel<pageReq>('modelValue', {
-  required: true,
-})
-const level = defineModel<{ id: string; name: string; isChildren?: boolean }[]>('level', {
-  required: true,
-})
+  const query = defineModel<pageReq>('modelValue', {
+    required: true,
+  })
+  const level = defineModel<{ id: string; name: string; isChildren?: boolean }[]>('level', {
+    required: true,
+  })
 
-const computType = computed(() => {
-  return props.type === 1 ? '图纸' : props.type === 3 ? '模型' : '文本'
-})
+  const computType = computed(() => {
+    return props.type === 1 ? '图纸' : props.type === 3 ? '模型' : '文本'
+  })
 
-
-
-
-
-
-
-const handleParentId = (type?: string) => {
-  if (level?.value?.length > 1) {
-    if (type === 'init' && level.value.find((c: any) => c.isChildren)) {
-      return level.value[level.value.length - 2].id || '' // 获取最后一个元素的 id 或 defaul
+  const handleParentId = (type?: string) => {
+    if (level?.value?.length > 1) {
+      if (type === 'init' && level.value.find((c: any) => c.isChildren)) {
+        return level.value[level.value.length - 2].id || '' // 获取最后一个元素的 id 或 defaul
+      }
+      return level.value[level.value.length - 1].id || '' // 获取最后一个元素的 id 或 defaul
     }
-    return level.value[level.value.length - 1].id || '' // 获取最后一个元素的 id 或 defaul
+    return '0'
   }
-  return '0'
-}
 
-// const projectTypeList = ref<any>([])
-/** 获取分类下拉框 */
-// const getParent = (type?: string) => {
-//   parent({
-//     type: 1,
-//     parentId: handleParentId(type),
-//   }).then((res) => {
-//     if (Array.isArray(res.data)) {
-//       // projectTypeList.value = [...[{ id: handleParentId(type), name: '全部' }], ...res.data]
-//     }
-//   })
-// }
-// getParent('init')
+  // const projectTypeList = ref<any>([])
+  /** 获取分类下拉框 */
+  // const getParent = (type?: string) => {
+  //   parent({
+  //     type: 1,
+  //     parentId: handleParentId(type),
+  //   }).then((res) => {
+  //     if (Array.isArray(res.data)) {
+  //       // projectTypeList.value = [...[{ id: handleParentId(type), name: '全部' }], ...res.data]
+  //     }
+  //   })
+  // }
+  // getParent('init')
 
-/** 版本 */
-// const editionsList = ref<any>([])
-// const getEditionsList = () => {
-//   parent({
-//     type: 2,
-//     parentId: 0,
-//   }).then((res) => {
-//     if (Array.isArray(res.data)) {
-//       // editionsList.value = [...[{ id: '', name: '全部' }], ...res.data]
-//     }
-//   })
-// }
-// getEditionsList()
+  /** 版本 */
+  // const editionsList = ref<any>([])
+  // const getEditionsList = () => {
+  //   parent({
+  //     type: 2,
+  //     parentId: 0,
+  //   }).then((res) => {
+  //     if (Array.isArray(res.data)) {
+  //       // editionsList.value = [...[{ id: '', name: '全部' }], ...res.data]
+  //     }
+  //   })
+  // }
+  // getEditionsList()
 
+  /** 是否是初始化 */
+  const queryType = ref('init')
+  /**获取分类下拉框 */
+  const { data: projectTypeList, refresh } = useAsyncData(`projectType-draw-${props.type}-${Date.now()}`, async () => {
+    const res = await parent({ type: 1, parentId: handleParentId(queryType.value) })
+    const all = [{ id: '-1', name: '全部' }]
+    return [...all, ...res.data]
+  })
 
+  /** 版本 */
+  const { data: editionsList } = useAsyncData(`editionsList-${props.type}-${Date.now()}`, async () => {
+    const res = await parent({ type: 2, parentId: 0 })
+    const all = [{ id: '-1', name: '全部' }]
+    return [...all, ...res.data]
+  })
 
-/** 是否是初始化 */
-const queryType = ref('init')
-/**获取分类下拉框 */
-const { data: projectTypeList, refresh } = useAsyncData(`projectType-draw-${props.type}-${Date.now()}`, async () => {
-   const res = await parent({ type: 1, parentId: handleParentId(queryType.value) })
-   const all= [{ id: handleParentId(queryType.value), name: '全部' }]
-   return [...all, ...res.data]
-})
+  const handleClick = (row: any) => {
+    query.value.title = ''
+    query.value.projectType = row.id
+    if (row.name === '全部') return
+    const isChildren = level.value.find((c: any) => c.isChildren)
+    if (!row.isChildren && isChildren) {
+      const index = level.value.length - 1
+      level.value[index] = { id: row.id, name: row.name, isChildren: true }
+    } else if (!row.isChildren && !isChildren) {
+      level.value.push({ id: row.id, name: row.name, isChildren: true })
+    } else {
+      level.value.push({ id: row.id, name: row.name })
+      // getParent()
+      queryType.value = ''
+      refresh()
+    }
+  }
 
-/** 版本 */
-const { data: editionsList } = useAsyncData(`editionsList-${props.type}-${Date.now()}`, async () => {
-  const res = await parent({ type: 2, parentId: 0 })
-  const all = [{ id: '', name: '全部' }]
-  return [...all, ...res.data]
-})
-
-const handleClick = (row: any) => {
-  query.value.title = ''
-  query.value.projectType = row.id
-  if (row.name === '全部') return
-  const isChildren = level.value.find((c: any) => c.isChildren)
-  if (!row.isChildren && isChildren) {
-    const index = level.value.length - 1
-    level.value[index] = { id: row.id, name: row.name, isChildren: true }
-  } else if (!row.isChildren && !isChildren) {
-    level.value.push({ id: row.id, name: row.name, isChildren: true })
-  } else {
-    level.value.push({ id: row.id, name: row.name })
+  const handleClickBread = (row: any, index: number) => {
+    level.value.splice(index + 1)
+    query.value.title = ''
+    query.value.projectType = row.id
     // getParent()
     queryType.value = ''
     refresh()
   }
-}
-
-const handleClickBread = (row: any, index: number) => {
-  level.value.splice(index + 1)
-  query.value.title = ''
-  query.value.projectType = row.id
-  // getParent()
-  queryType.value = ''
-  refresh()
-}
 </script>
diff --git a/pages/drawe/query-v1/[projectType].vue b/pages/drawe/[projectType]/[pageNo]/[pageSize]/[[editions]]/[[source]].vue
similarity index 62%
rename from pages/drawe/query-v1/[projectType].vue
rename to pages/drawe/[projectType]/[pageNo]/[pageSize]/[[editions]]/[[source]].vue
index a408bcd..29bb249 100644
--- a/pages/drawe/query-v1/[projectType].vue
+++ b/pages/drawe/[projectType]/[pageNo]/[pageSize]/[[editions]]/[[source]].vue
@@ -33,13 +33,20 @@
   import { getDictTree } from '~/api/home/index'
   import type { pageRes, pageReq } from '~/api/upnew/types'
   const route = useRoute()
-  const projectType = computed(() => route.query?.projectType as string)
+  const projectType = computed(() => (route.params?.projectType ? route.params?.projectType : ''))
+  const pageNo = computed(() => Number(route.params?.pageNo))
+  const pageSize = computed(() => Number(route.params?.pageSize))
+  const editions = computed(() => (route.params?.editions ? route.params?.editions : ''))
+  const source = computed(() => (route.params?.source ? Number(route.params?.source) : ''))
+
+  console.log('route.params----', route.params)
+
   const level = ref(
     route.query?.valuelevel
       ? JSON.parse(route.query.valuelevel as string)
       : [
           {
-            id: '0',
+            id: -1,
             name: '图纸库',
             isChildren: false,
           },
@@ -48,11 +55,11 @@
   const keywords = ref((route.query?.valuekeywords as string) || '')
 
   const query = ref<pageReq>({
-    pageNo: 1,
-    pageSize: 12,
-    projectType: projectType.value,
-    editions: '',
-    source: '',
+    pageNo: pageNo.value || 1,
+    pageSize: pageSize.value || 12,
+    projectType: projectType.value || '-1',
+    editions: editions.value || '-1',
+    source: source.value || -1,
     type: 1,
     title: keywords.value,
   })
@@ -63,23 +70,30 @@
 
   // 如果id存在，则设置projectType
   if (level.value.length) {
-    query.value.projectType = level.value[level.value.length - 1].id || ''
+    // query.value.projectType = level.value[level.value.length - 1].id || ''
   }
 
   const handleClickSize = (val: number) => {
     query.value.pageSize = val
-    getPage()
+    // getPage()
+    navigateTo(`/drawe/${query.value.projectType}/${query.value.pageNo}/${val}/${query.value.editions}/${query.value.source}`)
   }
 
   const handeClickCurrent = (val: number) => {
     query.value.pageNo = val
-    getPage()
+    // getPage()
+    navigateTo(`/drawe/${query.value.projectType}/${val}/${query.value.pageSize}/${query.value.editions}/${query.value.source}`)
   }
 
   const { data: result, refresh: getPage } = useAsyncData(
-    `draw-page-list-${Date.now()}`,
+    `draw-page-list-${query.value.projectType}-${query.value.editions}-${query.value.source}-${query.value.pageNo}-${query.value.pageSize}-${query.value.title}`,
     async () => {
-      const res = await page(query.value)
+      const res = await page({
+        ...query.value,
+        editions: query.value.editions === '-1' ? '' : query.value.editions,
+        source: query.value.source === -1 ? '' : query.value.source,
+        projectType: query.value.projectType === '-1' ? '' : query.value.projectType,
+      })
       return res.data
     },
     {
@@ -98,7 +112,7 @@
 
   watch([() => query.value.projectType, () => query.value.editions, () => query.value.source], (val) => {
     if (val) {
-      getPage()
+      navigateTo(`/drawe/${query.value.projectType}/1/${query.value.pageSize}/${query.value.editions}/${query.value.source}`)
     }
   })
 </script>
diff --git a/pages/drawe/index.vue b/pages/drawe/index.vue
index 0dacc54..5a35a7c 100644
--- a/pages/drawe/index.vue
+++ b/pages/drawe/index.vue
@@ -33,12 +33,13 @@
   import { getDictTree } from '~/api/home/index'
   import type { pageRes, pageReq } from '~/api/upnew/types'
   const route = useRoute()
+
   const level = ref(
     route.query?.valuelevel
       ? JSON.parse(route.query.valuelevel as string)
       : [
           {
-            id: '0',
+            id: -1,
             name: '图纸库',
             isChildren: false,
           },
@@ -49,9 +50,9 @@
   const query = ref<pageReq>({
     pageNo: 1,
     pageSize: 12,
-    projectType: '',
-    editions: '',
-    source: '',
+    projectType: '-1',
+    editions: '-1',
+    source: -1,
     type: 1,
     title: keywords.value,
   })
@@ -62,23 +63,30 @@
 
   // 如果id存在，则设置projectType
   if (level.value.length) {
-    query.value.projectType = level.value[level.value.length - 1].id || ''
+    // query.value.projectType = level.value[level.value.length - 1].id || ''
   }
 
   const handleClickSize = (val: number) => {
     query.value.pageSize = val
-    getPage()
+    // getPage()
+    navigateTo(`/drawe/${query.value.projectType}/${query.value.pageNo}/${val}/${query.value.editions}/${query.value.source}`)
   }
 
   const handeClickCurrent = (val: number) => {
     query.value.pageNo = val
-    getPage()
+    // getPage()
+    navigateTo(`/drawe/${query.value.projectType}/${val}/${query.value.pageSize}/${query.value.editions}/${query.value.source}`)
   }
 
   const { data: result, refresh: getPage } = useAsyncData(
-    `draw-page-list-${Date.now()}`,
+    `draw-page-list-${query.value.projectType}-${query.value.editions}-${query.value.source}-${query.value.pageNo}-${query.value.pageSize}-${query.value.title}`,
     async () => {
-      const res = await page(query.value)
+      const res = await page({
+        ...query.value,
+        editions: query.value.editions === '-1' ? '' : query.value.editions,
+        source: query.value.source === -1 ? '' : query.value.source,
+        projectType: query.value.projectType === '-1' ? '' : query.value.projectType,
+      })
       return res.data
     },
     {
@@ -97,7 +105,7 @@
 
   watch([() => query.value.projectType, () => query.value.editions, () => query.value.source], (val) => {
     if (val) {
-      getPage()
+      navigateTo(`/drawe/${query.value.projectType}/1/${query.value.pageSize}/${query.value.editions}/${query.value.source}`)
     }
   })
 </script>
diff --git a/pages/drawe/query-v2/[projectType]-[editions].vue b/pages/drawe/query-v2/[projectType]-[editions].vue
deleted file mode 100644
index 0dacc54..0000000
--- a/pages/drawe/query-v2/[projectType]-[editions].vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-  <!-- 导航 -->
-  <KlNavTab active="图纸" :type="1" />
-  <div class="ma-auto w-[1440px]">
-    <!-- 图纸分类 -->
-    <KlWallpaperCategory v-model="query" v-model:level="level" :type="1" />
-    <!-- 推荐栏目 -->
-    <RecommendedColumnsV2 v-model="query" v-model:result="result"></RecommendedColumnsV2>
-    <!-- 精选专题 -->
-    <!-- <FeaturedSpecials></FeaturedSpecials> -->
-    <!-- 分页 -->
-    <div class="mt-[10px] flex justify-center">
-      <el-pagination
-        v-model:current-page="query.pageNo"
-        v-model:page-size="query.pageSize"
-        :page-sizes="[12, 24, 48]"
-        :total="result?.total"
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="handleClickSize"
-        @current-change="handeClickCurrent"
-      />
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-  import KlNavTab from '~/components/kl-nav-tab/index.vue'
-  import KlWallpaperCategory from '~/components/kl-wallpaper-category/index.vue'
-  import RecommendedColumnsV2 from '~/components/drawe-components/RecommendedColumnsV2.vue'
-  // import FeaturedSpecials from './components/FeaturedSpecials.vue'
-  import { useRoute } from 'vue-router'
-  import { reactive, watch, ref } from 'vue'
-  import { page } from '~/api/upnew/index'
-  import { getDictTree } from '~/api/home/index'
-  import type { pageRes, pageReq } from '~/api/upnew/types'
-  const route = useRoute()
-  const level = ref(
-    route.query?.valuelevel
-      ? JSON.parse(route.query.valuelevel as string)
-      : [
-          {
-            id: '0',
-            name: '图纸库',
-            isChildren: false,
-          },
-        ]
-  )
-  const keywords = ref((route.query?.valuekeywords as string) || '')
-
-  const query = ref<pageReq>({
-    pageNo: 1,
-    pageSize: 12,
-    projectType: '',
-    editions: '',
-    source: '',
-    type: 1,
-    title: keywords.value,
-  })
-  // const result = reactive<pageRes>({
-  //   list: [],
-  //   total: 0,
-  // })
-
-  // 如果id存在，则设置projectType
-  if (level.value.length) {
-    query.value.projectType = level.value[level.value.length - 1].id || ''
-  }
-
-  const handleClickSize = (val: number) => {
-    query.value.pageSize = val
-    getPage()
-  }
-
-  const handeClickCurrent = (val: number) => {
-    query.value.pageNo = val
-    getPage()
-  }
-
-  const { data: result, refresh: getPage } = useAsyncData(
-    `draw-page-list-${Date.now()}`,
-    async () => {
-      const res = await page(query.value)
-      return res.data
-    },
-    {
-      immediate: true,
-    }
-  )
-  // const getPage = () => {
-  //   page(query).then((res) => {
-  //     const { data, code } = res
-  //     if (code === 0) {
-  //       result.list = data.list
-  //       result.total = data.total
-  //     }
-  //   })
-  // }
-
-  watch([() => query.value.projectType, () => query.value.editions, () => query.value.source], (val) => {
-    if (val) {
-      getPage()
-    }
-  })
-</script>
-<style lang="scss" scoped>
-  :deep(.el-pagination) {
-    .el-input__inner {
-      text-align: center !important;
-    }
-  }
-</style>
diff --git a/pages/drawe/query-v3/[projectType]-[editions]-[source].vue b/pages/drawe/query-v3/[projectType]-[editions]-[source].vue
deleted file mode 100644
index 0dacc54..0000000
--- a/pages/drawe/query-v3/[projectType]-[editions]-[source].vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-  <!-- 导航 -->
-  <KlNavTab active="图纸" :type="1" />
-  <div class="ma-auto w-[1440px]">
-    <!-- 图纸分类 -->
-    <KlWallpaperCategory v-model="query" v-model:level="level" :type="1" />
-    <!-- 推荐栏目 -->
-    <RecommendedColumnsV2 v-model="query" v-model:result="result"></RecommendedColumnsV2>
-    <!-- 精选专题 -->
-    <!-- <FeaturedSpecials></FeaturedSpecials> -->
-    <!-- 分页 -->
-    <div class="mt-[10px] flex justify-center">
-      <el-pagination
-        v-model:current-page="query.pageNo"
-        v-model:page-size="query.pageSize"
-        :page-sizes="[12, 24, 48]"
-        :total="result?.total"
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="handleClickSize"
-        @current-change="handeClickCurrent"
-      />
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-  import KlNavTab from '~/components/kl-nav-tab/index.vue'
-  import KlWallpaperCategory from '~/components/kl-wallpaper-category/index.vue'
-  import RecommendedColumnsV2 from '~/components/drawe-components/RecommendedColumnsV2.vue'
-  // import FeaturedSpecials from './components/FeaturedSpecials.vue'
-  import { useRoute } from 'vue-router'
-  import { reactive, watch, ref } from 'vue'
-  import { page } from '~/api/upnew/index'
-  import { getDictTree } from '~/api/home/index'
-  import type { pageRes, pageReq } from '~/api/upnew/types'
-  const route = useRoute()
-  const level = ref(
-    route.query?.valuelevel
-      ? JSON.parse(route.query.valuelevel as string)
-      : [
-          {
-            id: '0',
-            name: '图纸库',
-            isChildren: false,
-          },
-        ]
-  )
-  const keywords = ref((route.query?.valuekeywords as string) || '')
-
-  const query = ref<pageReq>({
-    pageNo: 1,
-    pageSize: 12,
-    projectType: '',
-    editions: '',
-    source: '',
-    type: 1,
-    title: keywords.value,
-  })
-  // const result = reactive<pageRes>({
-  //   list: [],
-  //   total: 0,
-  // })
-
-  // 如果id存在，则设置projectType
-  if (level.value.length) {
-    query.value.projectType = level.value[level.value.length - 1].id || ''
-  }
-
-  const handleClickSize = (val: number) => {
-    query.value.pageSize = val
-    getPage()
-  }
-
-  const handeClickCurrent = (val: number) => {
-    query.value.pageNo = val
-    getPage()
-  }
-
-  const { data: result, refresh: getPage } = useAsyncData(
-    `draw-page-list-${Date.now()}`,
-    async () => {
-      const res = await page(query.value)
-      return res.data
-    },
-    {
-      immediate: true,
-    }
-  )
-  // const getPage = () => {
-  //   page(query).then((res) => {
-  //     const { data, code } = res
-  //     if (code === 0) {
-  //       result.list = data.list
-  //       result.total = data.total
-  //     }
-  //   })
-  // }
-
-  watch([() => query.value.projectType, () => query.value.editions, () => query.value.source], (val) => {
-    if (val) {
-      getPage()
-    }
-  })
-</script>
-<style lang="scss" scoped>
-  :deep(.el-pagination) {
-    .el-input__inner {
-      text-align: center !important;
-    }
-  }
-</style>
diff --git a/pages/home/components/SideMenu.vue b/pages/home/components/SideMenu.vue
index e953ec1..0003988 100644
--- a/pages/home/components/SideMenu.vue
+++ b/pages/home/components/SideMenu.vue
@@ -11,30 +11,16 @@
       <!-- @click="handleSubmenuClick(item)" -->
       {{ item.name }}
       <!-- 悬浮浮窗 -->
-      <div
-        v-if="activeIndex === index"
-        class="submenu-panel"
-        :style="{ top: submenuTop + 'px' }"
-        @mouseenter="keepSubmenuVisible"
-        @mouseleave="hideSubMenu"
-      >
+      <div v-if="activeIndex === index" class="submenu-panel" :style="{ top: submenuTop + 'px' }" @mouseenter="keepSubmenuVisible" @mouseleave="hideSubMenu">
         <div class="submenu-content">
           <!-- <div class="text-right">更多</div> -->
           <div class="submenu-group">
             <template v-for="group in item.children" :key="group.id">
-              <div
-                class="submenu-group-title"
-                @click.stop="handleSubmenuClick(group)"
-              >
+              <div class="submenu-group-title" @click.stop="handleSubmenuClick(group)">
                 {{ group.name }}
               </div>
               <div class="submenu-group-items">
-                <div
-                  v-for="sub in group.children"
-                  :key="sub.id"
-                  class="submenu-item"
-                  @click.stop="handleSubmenuClick(group, sub)"
-                >
+                <div v-for="sub in group.children" :key="sub.id" class="submenu-item" @click.stop="handleSubmenuClick(sub)">
                   {{ sub.name }}
                 </div>
               </div>
@@ -47,134 +33,126 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import type { ComponentPublicInstance } from "vue";
-import { tab2 } from "~/api/home/index";
-import type { ProjectDictNodeVO } from "~/api/home/type";
+  import { ref, onMounted } from 'vue'
+  import type { ComponentPublicInstance } from 'vue'
+  import { tab2 } from '~/api/home/index'
+  import type { ProjectDictNodeVO } from '~/api/home/type'
 
-const activeIndex = ref(-1);
-const submenuTop = ref(0);
-// const submenuLeft = ref(0)
-const sideMenu = ref();
-const menuItemRefs = ref<HTMLElement[]>([]);
+  const activeIndex = ref(-1)
+  const submenuTop = ref(0)
+  // const submenuLeft = ref(0)
+  const sideMenu = ref()
+  const menuItemRefs = ref<HTMLElement[]>([])
 
-// const menuItems = ref<ProjectDictNodeVO[]>([]);
+  // const menuItems = ref<ProjectDictNodeVO[]>([]);
 
-// 等待数据加载完成再进行渲染 :courseData 对data进行别名赋值
-const { data: menuItems, pending, error } = useAsyncData(
-  'tab2-list',
-  async () => {
+  // 等待数据加载完成再进行渲染 :courseData 对data进行别名赋值
+  const {
+    data: menuItems,
+    pending,
+    error,
+  } = useAsyncData('tab2-list', async () => {
     const res = await tab2()
-      const arr = [];
-      for (let i = 0; i < res.data?.length; i += 2) {
-        arr.push({
-          children: res.data.slice(i, i + 2),
-          name: getName(res.data.slice(i, i + 2)),
-        });
-      }
+    const arr = []
+    for (let i = 0; i < res.data?.length; i += 2) {
+      arr.push({
+        children: res.data.slice(i, i + 2),
+        name: getName(res.data.slice(i, i + 2)),
+      })
+    }
     return arr
-  }
-)
+  })
 
-
-
-
-const showSubMenu = (index: number) => {
-  // if (menuItems.value.length === index + 1) {
-  //   return
-  // }
-  activeIndex.value = index;
-  const dom = menuItemRefs.value[index].getBoundingClientRect();
-  console.log(dom);
-  // submenuTop.value = window.scrollY
-};
-
-const hideSubMenu = () => {
-  activeIndex.value = -1;
-};
-
-const handleSubmenuClick = (
-  primary?: ProjectDictNodeVO,
-  secondary?: ProjectDictNodeVO,
-  tertiary?: ProjectDictNodeVO
-) => {
-  const normal = { id: "0", name: "图纸库", isChildren: false };
-  const level = [primary, secondary, tertiary]
-    .filter(Boolean)
-    .map((item) => ({
-      id: item?.id,
-      name: item?.name,
-      isChildren: item?.children?.length ? false : true,
-    }));
-  if (primary?.id === "0") {
-    level[0].name = "图纸库";
-  } else {
-    level.unshift(normal);
+  const showSubMenu = (index: number) => {
+    // if (menuItems.value.length === index + 1) {
+    //   return
+    // }
+    activeIndex.value = index
+    const dom = menuItemRefs.value[index].getBoundingClientRect()
+    console.log(dom)
+    // submenuTop.value = window.scrollY
   }
 
-  navigateTo(`/drawe?level=${JSON.stringify(level)}`);
-};
-
-const keepSubmenuVisible = () => {
-  // activeIndex.value = activeIndex.value // 保持当前索引
-};
-
-const setMenuItemRef = (
-  el: Element | ComponentPublicInstance | null,
-  index: number
-) => {
-  if (el && "offsetTop" in el) {
-    menuItemRefs.value[index] = el as HTMLElement;
+  const hideSubMenu = () => {
+    activeIndex.value = -1
   }
-};
 
-const getName = (arr: any[]) => {
-  if (arr.length === 1) {
-    return arr[0].name;
-  } else {
-    return arr[0].name + " / " + arr[1].name;
+  const handleSubmenuClick = (primary: ProjectDictNodeVO) => {
+    // const normal = { id: "0", name: "图纸库", isChildren: false };
+    // const level = [primary, secondary, tertiary]
+    //   .filter(Boolean)
+    //   .map((item) => ({
+    //     id: item?.id,
+    //     name: item?.name,
+    //     isChildren: item?.children?.length ? false : true,
+    //   }));
+    // if (primary?.id === "0") {
+    //   level[0].name = "图纸库";
+    // } else {
+    //   level.unshift(normal);
+    // }
+
+    // navigateTo(`/drawe?level=${JSON.stringify(level)}`)
+    navigateTo(`/drawe/${primary.id}/1/12/-1`)
   }
-};
 
-const init = () => {
-  // 获取标签
-  // getLabel()
-};
+  const keepSubmenuVisible = () => {
+    // activeIndex.value = activeIndex.value // 保持当前索引
+  }
 
-onMounted(() => {
-  // init();
-});
+  const setMenuItemRef = (el: Element | ComponentPublicInstance | null, index: number) => {
+    if (el && 'offsetTop' in el) {
+      menuItemRefs.value[index] = el as HTMLElement
+    }
+  }
+
+  const getName = (arr: any[]) => {
+    if (arr.length === 1) {
+      return arr[0].name
+    } else {
+      return arr[0].name + ' / ' + arr[1].name
+    }
+  }
+
+  const init = () => {
+    // 获取标签
+    // getLabel()
+  }
+
+  onMounted(() => {
+    // init();
+  })
 </script>
 
 <style scoped>
-.side-menu {
-  width: 221px;
-  background-color: #fff;
-  /* padding: 10px 0; */
-  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
-  /* overflow: visible; */
-  box-sizing: border-box;
-  position: relative; /* 添加定位上下文 */
-  /* overflow-y: auto; */
-  /* 隐藏滚动条 */
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-  z-index: 9;
-  /* padding-top: 10px; */
-}
+  .side-menu {
+    width: 221px;
+    background-color: #fff;
+    /* padding: 10px 0; */
+    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
+    /* overflow: visible; */
+    box-sizing: border-box;
+    position: relative; /* 添加定位上下文 */
+    /* overflow-y: auto; */
+    /* 隐藏滚动条 */
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+    z-index: 9;
+    /* padding-top: 10px; */
+  }
 
-/* 隐藏 Webkit 浏览器的滚动条 */
-.side-menu::-webkit-scrollbar {
-  display: none;
-}
+  /* 隐藏 Webkit 浏览器的滚动条 */
+  .side-menu::-webkit-scrollbar {
+    display: none;
+  }
 
-/* 鼠标悬停时显示滚动条 */
-.side-menu:hover {
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-}
+  /* 鼠标悬停时显示滚动条 */
+  .side-menu:hover {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+  }
 
-/* .side-menu:hover::-webkit-scrollbar {
+  /* .side-menu:hover::-webkit-scrollbar {
     display: block;
     width: 8px !important;
   }
@@ -188,44 +166,44 @@ onMounted(() => {
     background-color: #fff;
   } */
 
-.menu-item {
-  /* position: relative; */
-  text-align: center;
-  padding: 11px 24px;
-  cursor: pointer;
-  /* transition: all 0.3s ease; */
-  color: #333;
-  font-size: 14px;
-  border: 1px solid transparent;
-  z-index: 9;
-}
+  .menu-item {
+    /* position: relative; */
+    text-align: center;
+    padding: 11px 24px;
+    cursor: pointer;
+    /* transition: all 0.3s ease; */
+    color: #333;
+    font-size: 14px;
+    border: 1px solid transparent;
+    z-index: 9;
+  }
 
-.menu-item:hover {
-  background-color: #fff;
-  color: #1890ff;
-  border: 1px solid #1890ff;
-  border-right: transparent !important;
-}
+  .menu-item:hover {
+    background-color: #fff;
+    color: #1890ff;
+    border: 1px solid #1890ff;
+    border-right: transparent !important;
+  }
 
-.submenu-panel {
-  position: absolute;
-  left: 220px;
-  top: 0;
-  width: 957px;
-  background: #fff;
-  /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
-  border: 1px solid #1890ff;
-  /* border-radius: 4px; */
-  display: flex;
-  padding: 20px;
-  z-index: -1;
-  box-sizing: border-box;
-  min-height: 480px;
-  overflow-y: auto;
-}
+  .submenu-panel {
+    position: absolute;
+    left: 220px;
+    top: 0;
+    width: 957px;
+    background: #fff;
+    /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
+    border: 1px solid #1890ff;
+    /* border-radius: 4px; */
+    display: flex;
+    padding: 20px;
+    z-index: -1;
+    box-sizing: border-box;
+    min-height: 480px;
+    overflow-y: auto;
+  }
 
-.submenu-panel::before {
-  /* content: '';
+  .submenu-panel::before {
+    /* content: '';
     position: absolute;
     left: -6px;
     top: 50%;
@@ -236,61 +214,61 @@ onMounted(() => {
     border-bottom: 8px solid transparent;
     border-right: 8px solid #fff;
     filter: drop-shadow(-2px 0 2px rgba(0, 0, 0, 0.1)); */
-}
+  }
 
-.submenu-content {
-  /* flex: 1; */
-  /* display: grid; */
-  /* grid-template-columns: repeat(3, 1fr); */
-  /* gap: 15px; */
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  .submenu-group {
+  .submenu-content {
+    /* flex: 1; */
+    /* display: grid; */
+    /* grid-template-columns: repeat(3, 1fr); */
+    /* gap: 15px; */
+    width: 100%;
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
-    flex-wrap: wrap;
-    -webkit-column-break-inside: avoid; /* 兼容webkit内核 */
-    /* border: 1px solid #e6e8eb; */
-    .submenu-group-title {
-      font-size: 15px;
-      /* font-weight: 700; */
-      padding: 10px 16px;
-      color: #000;
-      font-weight: 600;
-      transition: all 0.2s;
-      /* border-bottom: 1px solid #e6e8eb; */
-    }
-    .submenu-group-title:hover {
-      color: #1890ff;
-      /* border-bottom: 1px solid #e6e8eb; */
-    }
-    .submenu-group-items {
-      display: flex !important;
-      flex-direction: row;
+    .submenu-group {
+      display: flex;
+      flex-direction: column;
       align-items: flex-start;
       flex-wrap: wrap;
-      color: #666;
-      padding: 0px 16px;
-      gap: 10px;
-      .submenu-item {
-        cursor: pointer;
+      -webkit-column-break-inside: avoid; /* 兼容webkit内核 */
+      /* border: 1px solid #e6e8eb; */
+      .submenu-group-title {
+        font-size: 15px;
+        /* font-weight: 700; */
+        padding: 10px 16px;
+        color: #000;
+        font-weight: 600;
+        transition: all 0.2s;
+        /* border-bottom: 1px solid #e6e8eb; */
+      }
+      .submenu-group-title:hover {
+        color: #1890ff;
+        /* border-bottom: 1px solid #e6e8eb; */
+      }
+      .submenu-group-items {
+        display: flex !important;
+        flex-direction: row;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        color: #666;
+        padding: 0px 16px;
+        gap: 10px;
+        .submenu-item {
+          cursor: pointer;
+        }
       }
     }
   }
-}
 
-.submenu-item {
-  cursor: pointer;
-  transition: all 0.2s;
-  display: inline-block; /* 改为行内块元素 */
-  /* padding: 8px 12px; */
-  padding-right: 12px;
-  /* padding-bottom: 8px; */
-}
+  .submenu-item {
+    cursor: pointer;
+    transition: all 0.2s;
+    display: inline-block; /* 改为行内块元素 */
+    /* padding: 8px 12px; */
+    padding-right: 12px;
+    /* padding-bottom: 8px; */
+  }
 
-.submenu-item:hover {
-  color: #1890ff;
-}
+  .submenu-item:hover {
+    color: #1890ff;
+  }
 </style>