refactor: 预览页树结构ui优化

src/router/index.ts

@@ -2,10 +2,10 @@ import type { RouteRecordRaw } from 'vue-router'
 import type { App } from 'vue'
 
 import { createRouter, createWebHashHistory } from 'vue-router'
-import { basicRoutes, LoginRoute } from './routes'
+import { basicRoutes, LoginRoute, PreviewRoute } from './routes'
 import { REDIRECT_NAME } from './constant'
 
-const WHITE_NAME_LIST = [LoginRoute.name, REDIRECT_NAME]
+const WHITE_NAME_LIST = [LoginRoute.name, REDIRECT_NAME, PreviewRoute.name]
 
 // app router
 const router = createRouter({

src/store/modules/user.ts

@@ -17,7 +17,7 @@ import { loginApi, getUserInfoById } from '/@/api/sys/user'
 
 import { useI18n } from '/@/hooks/web/useI18n'
 import { ErrorMessageMode } from '/@/utils/http/axios/types'
-import { getAuthCache, removeAuthCache, setAuthCache } from '/@/utils/auth/index'
+import { getAuthCache, getToken, removeAuthCache, setAuthCache } from '/@/utils/auth/index'
 import { mainOutRoutes } from '/@/router/routes/mainOut'
 import { PreviewRoute } from '/@/router/routes'
 
@@ -117,9 +117,9 @@ class User extends VuexModule {
   @Action
   async logout(goLogin = false) {
     goLogin && router.push(PageEnum.BASE_LOGIN)
-    if (!goLogin && !router.hasRoute('Preview')) {
-      router.addRoute('', PreviewRoute)
-    }
+    // if (!goLogin && !router.hasRoute('Preview')) {
+    //   router.addRoute('', PreviewRoute)
+    // }
     !goLogin && router.push(PageEnum.BASE_HOME)
   }
 

src/utils/http/axios/index.ts

@@ -20,6 +20,7 @@ import { errorStore } from '/@/store/modules/error'
 import { errorResult } from './const'
 import { useI18n } from '/@/hooks/web/useI18n'
 import { createNow, formatRequestDate } from './helper'
+import router from '/@/router'
 
 const globSetting = useGlobSetting()
 const prefix = globSetting.urlPrefix
@@ -141,6 +142,9 @@ const transform: AxiosTransform = {
     if (token) {
       // jwt token
       config.headers.Authorization = `bearer ${token}`
+    } else {
+      // createMessage.error('用户信息过期，请重新登录')
+      // router.replace('/login')
     }
     return config
   },

src/views/sys/preview/index.vue

@@ -1,64 +1,142 @@
 <template>
   <div :class="prefixCls" class="w-full h-full">
-    <div
-      class="w-full py-4 sm:max-w-540px md:max-w-720px lg:max-w-960px xl:max-w-1140px 2xl:max-w-1600px mx-auto"
-    >
-      <nav class="flex justify-between items-center">
-        <span
-          ><h2 class="text-3xl text-white m-0">{{ title }}</h2></span
-        >
-        <a-button @click="$router.push('/login')" ghost>登录</a-button>
-      </nav>
-    </div>
-    <div
-      class="container w-full py-4 sm:max-w-540px md:max-w-720px lg:max-w-960px xl:max-w-1140px 2xl:max-w-1600px mx-auto"
-    >
-      <div class="flex flex-col h-full">
-        <section class="content flex h-full">
-          <div class="rounded-md bg-white h-full left-menu">
-            <Tree
-              v-if="treeData && treeData.length"
-              :tree-data="treeData"
-              :replace-fields="replaceFields"
-              :default-expand-all="true"
-              @select="onSelect"
-            />
-          </div>
-          <div class="rounded-md bg-white h-full right-menu">
-            <header class="border-b">
-              <div class="flex justify-between p-4">
-                <div>
-                  <span class="text-xl">{{ detail.name }}</span>
-                  <span class="text-xl ml-3 font-medium">{{ detail.code2 }}</span>
+    <div class="container mx-auto w-full h-full">
+      <div class="w-full py-4">
+        <nav class="flex justify-between items-center">
+          <span
+            ><h2 class="text-3xl text-white m-0">{{ title }}</h2></span
+          >
+          <a-button @click="$router.push('/login')" ghost>登录</a-button>
+        </nav>
+      </div>
+      <div class="section w-full py-4">
+        <div class="flex flex-col h-full">
+          <section class="content flex h-full">
+            <div class="rounded-md bg-white h-full left-menu">
+              <ul class="list-none p-0 m-0" v-if="treeData && treeData.length">
+                <li
+                  class="p-4 rounded-md main"
+                  :class="{ active: treeData[0] && treeData[0].id === activeId }"
+                >
+                  <div class="flex justify-between items-center relative">
+                    <span>{{ treeData[0] && treeData[0].name }}</span>
+                    <span
+                      class="flex items-center"
+                      :class="treeData[0] && treeData[0].id === activeId ? 'fade-down' : 'fade-up'"
+                    >
+                      <Icon
+                        icon="fluent:chevron-up-20-filled"
+                        :size="18"
+                        @click="changeActiveId(treeData[0].id)"
+                      />
+                    </span>
+                  </div>
+                </li>
+                <div class="ml-2 active-content">
+                  <Tree
+                    v-if="treeData[0] && treeData[0].id === activeId"
+                    :tree-data="treeData[0].children || []"
+                    :replace-fields="replaceFields"
+                    :default-expand-all="true"
+                    @select="onSelect"
+                  />
                 </div>
-                <a-button type="success" pre-icon="ic:outline-file-download" @click="uploadExecl"
-                  >下载</a-button
+                <li
+                  class="p-4 rounded-md main"
+                  :class="{ active: treeData[1] && treeData[1].id === activeId }"
                 >
-              </div>
-            </header>
-            <section class="pdf-content">
-              <iframe
-                v-if="showPdf"
-                :src="pdfUrl"
-                frameborder="0"
-                width="100%"
-                height="100%"
-                class="rounded-b-md"
-              ></iframe>
-              <div
-                v-if="detail.name && !detail.pdfData.fid"
-                class="h-full flex justify-center items-center text-2xl"
-                >暂未上传可供预览的pdf文件</div
-              >
-            </section>
-          </div>
-        </section>
-        <footer class="relative">
-          <p class="m-0 p-0 text-right text-light-blue-50 footer-content"
-            >主办单位：广东省交通运输工程造价事务中心<span class="px-2">|</span
-            >技术支持：珠海纵横创新软件有限公司</p
-          >
-        </footer>
+                  <div class="flex justify-between items-center relative">
+                    <span>{{ treeData[1] && treeData[1].name }}</span>
+                    <span
+                      class="flex items-center"
+                      :class="treeData[1] && treeData[1].id === activeId ? 'fade-down' : 'fade-up'"
+                    >
+                      <Icon
+                        icon="fluent:chevron-up-20-filled"
+                        :size="18"
+                        @click="changeActiveId(treeData[1].id)"
+                      />
+                    </span>
+                  </div>
+                </li>
+                <div class="ml-2 active-content">
+                  <Tree
+                    v-if="treeData[1] && treeData[1].id === activeId"
+                    :tree-data="treeData[1].children || []"
+                    :replace-fields="replaceFields"
+                    :default-expand-all="true"
+                    @select="onSelect"
+                  />
+                </div>
+                <li
+                  class="p-4 rounded-md main"
+                  :class="{ active: treeData[2] && treeData[2].id === activeId }"
+                >
+                  <div class="flex justify-between items-center relative">
+                    <span>{{ treeData[2] && treeData[2].name }}</span>
+                    <span
+                      class="flex items-center"
+                      :class="treeData[2] && treeData[2].id === activeId ? 'fade-down' : 'fade-up'"
+                    >
+                      <Icon
+                        icon="fluent:chevron-up-20-filled"
+                        :size="18"
+                        @click="changeActiveId(treeData[2].id)"
+                      />
+                    </span>
+                  </div>
+                </li>
+                <div class="ml-2 active-content">
+                  <Tree
+                    v-if="treeData[2] && treeData[2].id === activeId"
+                    :tree-data="treeData[2].children || []"
+                    :replace-fields="replaceFields"
+                    :default-expand-all="true"
+                    @select="onSelect"
+                  />
+                </div>
+              </ul>
+            </div>
+            <div class="rounded-md bg-white h-full right-menu">
+              <header class="border-b">
+                <div class="flex justify-between p-4">
+                  <div>
+                    <span class="text-xl">{{ detail.name }}</span>
+                    <span class="text-xl ml-3 font-medium">{{ detail.code2 }}</span>
+                  </div>
+                  <a-button
+                    v-show="showExcelDownload"
+                    type="success"
+                    pre-icon="ic:outline-file-download"
+                    @click="uploadExecl"
+                    >下载</a-button
+                  >
+                </div>
+              </header>
+              <section class="pdf-content">
+                <iframe
+                  v-if="showPdf"
+                  :src="pdfUrl"
+                  frameborder="0"
+                  width="100%"
+                  height="100%"
+                  class="rounded-b-md"
+                ></iframe>
+                <div
+                  v-if="detail.name && !detail.pdfData.fid"
+                  class="h-full flex justify-center items-center text-2xl"
+                  >暂未上传可供预览的pdf文件</div
+                >
+              </section>
+            </div>
+          </section>
+          <footer class="relative">
+            <p class="m-0 p-0 text-right text-light-blue-50 footer-content"
+              >主办单位：广东省交通运输工程造价事务中心<span class="px-2">|</span
+              >技术支持：珠海纵横创新软件有限公司</p
+            >
+          </footer>
+        </div>
       </div>
     </div>
   </div>
@@ -72,6 +150,7 @@
   import { TreeRow } from '/#/tree'
   import { Tree } from 'ant-design-vue'
   import { downloadByUrl } from '/@/utils/file/download'
+  import { Icon } from '/@/components/Icon'
   import { useGlobSetting } from '/@/hooks/setting'
   interface ATreeRow extends TreeRow {
     showUpload: boolean
@@ -79,11 +158,13 @@
   export default {
     name: 'Preview',
     components: {
-      Tree
+      Tree,
+      Icon
     },
     setup() {
       const globSetting = useGlobSetting()
       const treeData = ref<TreeResultModel[]>([])
+      const activeId = ref('')
       const row = ref<ATreeRow>({
         id: '',
         parentId: '',
@@ -170,6 +251,13 @@
         () => 'http://sj.6jlzf.cn/static' + detail.value.pdfData.filepath
       )
 
+      const changeActiveId = (id: string) => {
+        if (id === activeId.value) {
+          activeId.value = ''
+        } else {
+          activeId.value = id
+        }
+      }
       const { prefixCls } = useDesign('preview')
       const replaceFields = { children: 'children', title: 'name', key: 'id' }
       return {
@@ -182,7 +270,9 @@
         uploadExecl,
         title: computed(() => globSetting?.title ?? ''),
         showExcelDownload,
-        detail
+        detail,
+        activeId,
+        changeActiveId
       }
     }
   }
@@ -193,7 +283,7 @@
 
   .@{prefix-cls} {
     background: url('../../../assets/images/bg.png');
-    .container {
+    .section {
       height: calc(100% - 4.25rem);
       .content {
         height: calc(100% - 22px);
@@ -201,6 +291,24 @@
           flex: 0 0 25%;
           max-width: 25%;
           overflow: auto auto;
+          .main.active {
+            background-color: #e6eefe;
+          }
+          .main:hover {
+            background-color: #e3ebfa;
+          }
+          .active-content {
+            max-height: calc(100vh - 14rem - 36px - 24px);
+            overflow: auto;
+          }
+          .fade-up {
+            transform: rotate(0);
+            transition: all 0.5s;
+          }
+          .fade-down {
+            transform: rotate(180deg);
+            transition: all 0.5s;
+          }
         }
         .right-menu {
           flex: 0 0 75%;