门户改版代码提交

src/apis/catalogResource.js

@@ -1,7 +1,7 @@
-import httpInstance from '@/utils/http'
+import request from '@/utils/http'
 
 export const getResourceCatalogList = (params = {}) => {
-  return httpInstance({
+  return request({
     url: '/portal/resource/catalog/pageList',
     params
   })
@@ -9,27 +9,27 @@ export const getResourceCatalogList = (params = {}) => {
 
 
 export const getResourceList = (params = {}) => {
-  return httpInstance({
+  return request({
     url: '/portal/resource/list',
     params
   })
 }
 
 export const getTreeList = (params = {}) => {
-  return httpInstance({
+  return request({
     url: '/portal/resource/catalog/tree',
     params
   })
 }
 
 export const getResourceInfo = (id) => {
-  return httpInstance({
+  return request({
     url: `/portal/resource/${id}`,
   })
 }
 
 export function resourcePreview(id) {
-  return httpInstance({
+  return request({
     url: `/portal/resource/preview/${id}`,
     method: 'post',
     // responseType: 'blob'
@@ -37,7 +37,7 @@ export function resourcePreview(id) {
 }
 
 export function resourcePreviewTxt(id) {
-  return httpInstance({
+  return request({
     url: `/portal/resource/preview/${id}`,
     method: 'post',
     responseType: 'blob',

src/apis/category.js

@@ -1,44 +0,0 @@
-import request from '@/utils/http'
-
-
-export function getCategoryAPI (id) {
-  return request({
-    url: '/category',
-    params: {
-      id
-    }
-  })
-}
-
-/**
- * @description: 获取二级分类列表数据
- * @param {*} id 分类id 
- * @return {*}
- */
-
-export const getCategoryFilterAPI = (id) => {
-  return request({
-    url: '/category/sub/filter',
-    params: {
-      id
-    }
-  })
-}
-
-/**
- * @description: 获取导航数据
- * @data { 
-     categoryId: 1005000 ,
-     page: 1,
-     pageSize: 20,
-     sortField: 'publishTime' | 'orderNum' | 'evaluateNum'
-   } 
- * @return {*}
- */
-export const getSubCategoryAPI = (data) => {
-  return request({
-    url: '/category/goods/temporary',
-    method: 'POST',
-    data
-  })
-}

src/apis/home.js

@@ -1,9 +1,8 @@
-import httpInstance from '@/utils/http'
+import request from '@/utils/http'
-
 
 // 查询门户Banner列表
 export function getBannerAPI(params = {}) {
-  return httpInstance({
+  return request({
     url: '/portal/banner/list',
     params
   })
@@ -13,14 +12,14 @@ export function getBannerAPI(params = {}) {
  * 查询学校动态列表
  */
 export const getTrendAPI = (params = {}) => {
-  return httpInstance({
+  return request({
     url: '/portal/trend/list',
     params
   })
 }
 
 export const getTrendInfoAPI = (trendId) => {
-  return httpInstance({
+  return request({
     url: `/portal/trend/${trendId}`
   })
 }
@@ -29,7 +28,7 @@ export const getTrendInfoAPI = (trendId) => {
  *查询学校名师列表
  */
 export const getShowAPI = (params = {}) => {
-  return httpInstance({
+  return request({
     url: '/portal/show/list',
     params
   })
@@ -39,28 +38,33 @@ export const getShowAPI = (params = {}) => {
  *查询目录-同步教材
  */
 export const getTextbookAPI = () => {
-  return httpInstance({
+  return request({
     url: '/portal/textbook/catalog/tree'
   })
 }
 
 // 查询目录-专题资源
 export const getResourceAPI = (params = {}) => {
-  return httpInstance({
+  return request({
     url: '/portal/resource/catalog/pageList',
     params
   })
 }
 
-
 export const getAuthAPI = () => {
-  return httpInstance({
+  return request({
     url: '/auth/tenant/list'
   })
 }
 
 export const getShowInfoAPI = (showId) => {
-  return httpInstance({
+  return request({
     url: `/portal/show/${showId}`
   })
 }
+
+export const getUploadNum = (showId) => {
+  return request({
+    url: `/statistic/upload/num`
+  })
+}

src/apis/layout.js

@@ -1,8 +0,0 @@
-
-import httpInstance from "@/utils/http"
-
-export function getCategoryAPI () {
-  return httpInstance({
-    url: '/home/category/head'
-  })
-}

src/apis/testAPI.js

@@ -1,8 +1,8 @@
-import httpInstance from "@/utils/http"
+import request from "@/utils/http"
 
 
 export function getCategory () {
-  return httpInstance({
+  return request({
     url: 'home/category/head'
   })
 }

src/apis/textbook.js

@@ -1,36 +1,36 @@
-import httpInstance from '@/utils/http'
+import request from '@/utils/http'
 
 /**
  *查询目录-同步教材
  */
 export const getTextbookAPI = () => {
-  return httpInstance({
+  return request({
     url: '/portal/textbook/catalog/list'
   })
 }
 
 export const getTextbookTreeAPI = (params = {}) => {
-  return httpInstance({
+  return request({
     url: '/portal/textbook/catalog/tree',
     params
   })
 }
 
 export const getTextbookList = (params = {}) => {
-  return httpInstance({
+  return request({
     url: '/portal/textbook/list',
     params
   })
 }
 
 export const getTextbookInfoAPI = (id) => {
-  return httpInstance({
+  return request({
     url: `/portal/textbook/${id}`
   })
 }
 
 export function textbookPreview(id) {
-  return httpInstance({
+  return request({
     url: `/portal/textbook/preview/${id}`,
     method: 'post',
     // responseType: 'blob'
@@ -38,7 +38,7 @@ export function textbookPreview(id) {
 }
 
 export function textbookPreviewTxt(id) {
-  return httpInstance({
+  return request({
     url: `/portal/textbook/preview/${id}`,
     method: 'post',
     responseType: 'blob',

src/apis/user.js

@@ -1,23 +1,19 @@
 // 封装所有和用户相关的接口函数
 import request from '@/utils/http'
 
-export const loginAPI = ({ account, password }) => {
+export const loginAPI = (loginBody) => {
   return request({
-    url: '/login',
+    url: '/auth/passwordLogin',
     method: 'POST',
-    data: {
+    headers: {
-      account,
+      isToken: false,
-      password
+      isEncrypt: false
-    }
+    },
+    data: loginBody
   })
 }
-
+export const userInfoAPI = () => {
-
-export const getLikeListAPI = ({ limit = 4 }) => {
   return request({
-    url: '/goods/relevant',
+    url: '/system/user/getInfo'
-    params: {
-      limit
-    }
   })
 }

src/components/MyFooter/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <footer class="app_footer">
+    <div class="extra">
+      <div class="container">
+        <!-- 版权信息 -->
+        <div class="copyright">
+          <p>
+            <a href="javascript:;">关于我们</a>
+            <a href="javascript:;">帮助中心</a>
+            <a href="javascript:;">售后服务</a>
+            <a href="javascript:;">商务合作</a>
+            <a href="javascript:;">搜索推荐</a>
+            <a href="javascript:;">友情链接</a>
+          </p>
+          <p>CopyRight © 江苏省邗江实验学校</p>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped lang='scss'>
+.app_footer {
+  overflow: hidden;
+  background-color: #fff;
+  padding-top: 20px;
+
+
+  .extra {
+    background-color: #1F6682;
+  }
+
+  .slogan {
+    height: 178px;
+    line-height: 58px;
+    padding: 60px 100px;
+    border-bottom: 1px solid #434343;
+    display: flex;
+    justify-content: space-between;
+
+    a {
+      height: 58px;
+      line-height: 58px;
+      color: #fff;
+      font-size: 28px;
+
+      i {
+        font-size: 50px;
+        vertical-align: middle;
+        margin-right: 10px;
+        font-weight: 100;
+      }
+
+      span {
+        vertical-align: middle;
+        text-shadow: 0 0 1px #333;
+      }
+    }
+  }
+
+  .copyright {
+    height: 170px;
+    padding-top: 40px;
+    text-align: center;
+    color: #fff;
+    font-size: 15px;
+
+    p {
+      line-height: 1;
+      margin-bottom: 20px;
+    }
+
+    a {
+      color: #fff;
+      line-height: 1;
+      padding: 0 10px;
+      border-right: 1px solid #999;
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+  }
+}
+</style>

src/components/MyHeader/index.vue

@@ -0,0 +1,159 @@
+<template>
+  <header class='app-header'>
+    <div class="container">
+      <h1 class="logo">
+        <RouterLink to="/">{{ tenantName }}</RouterLink>
+      </h1>
+
+      <ul class="app-header-nav">
+        <li class="home">
+          <RouterLink to="myUpload">我的上传（29）</RouterLink>
+        </li>
+        <li class="home">
+          <RouterLink to="myLike">我的点赞（102）</RouterLink>
+        </li>
+        <li class="home">
+          <RouterLink to="myCollect">我的收藏（1）</RouterLink>
+        </li>
+        <li class="home">
+          <RouterLink to="myRecord">浏览记录</RouterLink>
+        </li>
+        <li class="home">
+          <el-dropdown trigger="hover" @command="handleCommand">
+            <div>
+              <img :src="userStore.userInfo?.user?.avatar" alt="">
+              <span class="nickname">{{ userStore.userInfo?.user?.nickName }}</span>
+            </div>
+
+            <template #dropdown>
+              <el-dropdown-menu>
+                <router-link to="/">
+                  <el-dropdown-item>首页</el-dropdown-item>
+                </router-link>
+
+                <el-dropdown-item divided command="logout">
+                  <span>退出登录</span>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </li>
+      </ul>
+    </div>
+    <div class="bg-img"></div>
+  </header>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useTenantStore } from '@/stores/tenantStore'
+import { useUserStore } from '@/stores/userStore';
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
+
+const tenantStore = useTenantStore()
+const tenantName = ref(tenantStore.tenantInfo.companyName || '校本资源平台')
+
+const userStore = useUserStore()
+
+const logout = async () => {
+  await ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+  await userStore.logout()
+  router.push('/login')
+}
+
+// 定义Command方法对象 通过key直接调用方法
+const commandMap = {
+  logout
+}
+
+const handleCommand = (command) => {
+  // 判断是否存在该方法
+  if (commandMap[command]) {
+    commandMap[command]();
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-header {
+  position: relative;
+
+  .bg-img {
+    position: absolute;
+    height: 800px;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index: -999;
+    background: url('@/assets/images/home-bg.png');
+  }
+
+  .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .logo {
+      width: 320px;
+
+      a {
+        font-size: 32px;
+        color: #fff;
+        display: block;
+        line-height: 150px;
+        height: 150px;
+        width: 100%;
+      }
+    }
+
+    .app-header-nav {
+      display: flex;
+
+      li {
+        margin-right: 15px;
+        width: 140px;
+        text-align: center;
+
+        a,
+        .router-link-active {
+          font-size: 16px;
+          line-height: 40px;
+          height: 40px;
+          display: inline-block;
+          color: #fff;
+          background-color: #055170;
+          width: 140px;
+          border-radius: 5px;
+
+          &:hover {
+            background-color: #4094AC;
+          }
+        }
+
+        .active,
+        .router-link-exact-active {
+          background-color: #4094AC;
+        }
+
+        img {
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+        }
+
+        .nickname {
+          font-size: 16px;
+          color: #fff;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+}
+</style>

src/main.js

@@ -4,6 +4,10 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import App from './App.vue'
 import router from './router'
 
+//引入Elmessage和Elloading的css样式文件
+import 'element-plus/theme-chalk/el-loading.css'
+import 'element-plus/theme-chalk/el-message.css'
+
 // 引入初始化样式文件
 import '@/styles/common.scss'
 

src/router/index.js

@@ -5,7 +5,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import Layout from '@/views/Layout/index.vue'
 import Home from '@/views/Home/index.vue'
 
-import { useTenantStore } from '@/stores/tenantStore'
+import { useUserStore } from '@/stores/userStore'
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -15,6 +15,22 @@ const router = createRouter({
       path: '/login',
       component: () => import('@/views/Login/index.vue')
     },
+    {
+      path: '/myUpload',
+      component: () => import('@/views/MyUpload/index.vue')
+    },
+    {
+      path: '/myLike',
+      component: () => import('@/views/MyLike/index.vue')
+    },
+    {
+      path: '/myCollect',
+      component: () => import('@/views/MyCollect/index.vue')
+    },
+    {
+      path: '/myRecord',
+      component: () => import('@/views/MyRecord/index.vue')
+    },
     {
       path: '/',
       component: Layout,
@@ -75,9 +91,13 @@ const router = createRouter({
 })
 
 router.beforeEach((to, from) => {
-  useTenantStore().getTenantInfo()
+  const store = useUserStore()
+  const whiteList = ['/login']
+
+  if (!store.token && !whiteList.includes(to.path)) {
+    return '/login'
+  }
 
-  return true
 })
 
 export default router

src/stores/tenantStore.js

@@ -5,7 +5,7 @@ import { getAuthAPI } from '@/apis/home'
 export const useTenantStore = defineStore('tenant', () => {
   const tenantInfo = ref({})
 
-  const getTenantInfo = async () => {
+  const setTenantInfo = async () => {
     const res = await getAuthAPI()
     if (res.data.voList.length > 0) {
       tenantInfo.value = res.data.voList[0]
@@ -18,7 +18,7 @@ export const useTenantStore = defineStore('tenant', () => {
 
   return {
     tenantInfo,
-    getTenantInfo,
+    setTenantInfo,
     clearTenantInfo
   }
 }, {

src/stores/userStore.js

@@ -1,40 +1,43 @@
 // 管理用户数据相关
-
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
-import { loginAPI } from '@/apis/user'
+import { loginAPI, userInfoAPI } from '@/apis/user'
-import { useCartStore } from './cartStore'
+
-import { mergeCartAPI } from '@/apis/cart'
 export const useUserStore = defineStore('user', () => {
-  const cartStore = useCartStore()
+  const token = ref('')
-  // 1. 定义管理用户数据的state
   const userInfo = ref({})
-  // 2. 定义获取接口数据的action函数
+
-  const getUserInfo = async ({ account, password }) => {
+  const setToken = async (loginData) => {
-    const res = await loginAPI({ account, password })
+    const res = await loginAPI(loginData)
-    userInfo.value = res.result
+    token.value = res.data.access_token
-    // 合并购物车的操作
+  }
-    await mergeCartAPI(cartStore.cartList.map(item => {
+
-      return {
+  const cleartoken = () => {
-        skuId: item.skuId,
+    token.value = ''
-        selected: item.selected,
+  }
-        count: item.count
+
-      }
+  const setUserInfo = async () => {
-    }))
+    const res = await userInfoAPI()
-    cartStore.updateNewList()
+    userInfo.value = res.data
   }
 
-  // 退出时清除用户信息
   const clearUserInfo = () => {
     userInfo.value = {}
-    // 执行清除购物车的action
-    cartStore.clearCart()
   }
-  // 3. 以对象的格式把state和action return
+
+  const logout = () => {
+    token.value = ''
+    userInfo.value = {}
+  }
+
   return {
+    token,
     userInfo,
-    getUserInfo,
+    setToken,
-    clearUserInfo
+    cleartoken,
+    setUserInfo,
+    clearUserInfo,
+    logout
   }
 }, {
   persist: true,

src/utils/http.js

@@ -3,19 +3,22 @@ import axios from 'axios'
 import { ElMessage } from 'element-plus'
 import { useUserStore } from '@/stores/userStore'
 import { useTenantStore } from '@/stores/tenantStore'
+import router from '@/router'
 
-const httpInstance = axios.create({
+const request = axios.create({
   baseURL: '/api-school',
   timeout: 50000
 })
 
 // 拦截器
 // axios请求拦截器
-httpInstance.interceptors.request.use(config => {
+request.interceptors.request.use(config => {
+  config.headers.clientId = 'e5cd7e4891bf95d1d19206ce24a7b32e'
+
   // 1. 从pinia获取token数据
   const userStore = useUserStore()
   // 2. 按照后端的要求拼接token数据
-  const token = userStore.userInfo.token
+  const token = userStore.token
   if (token) {
     config.headers.Authorization = `Bearer ${token}`
   }
@@ -30,14 +33,35 @@ httpInstance.interceptors.request.use(config => {
 }, e => Promise.reject(e))
 
 // axios响应式拦截器
-httpInstance.interceptors.response.use(res => res.data, e => {
+request.interceptors.response.use(res => {
-  // 统一错误提示
+  if (res.data.code === 401) {
-  ElMessage({
+    // 清除用户信息
-    type: 'warning',
+    const userStore = useUserStore()
-    message: e.response.data.message
+    userStore.logout()
-  })
+    router.push('/login')
+  }
+  // 业务逻辑失败
+  if (res.data.code !== 200) {
+    ElMessage.error(res.data.msg)
+    return Promise.reject(res.data)
+  }
+  // 业务逻辑成功
+  return res.data
+}, e => {
+  if (e.response.status === 401) {
+    // 清除用户信息
+    const userStore = useUserStore()
+    userStore.logout()
+    router.push('/login')
+  } else {
+    // 统一错误提示
+    ElMessage({
+      type: 'warning',
+      message: e.response.data.msg
+    })
+  }
   return Promise.reject(e)
 })
 
 
-export default httpInstance
+export default request

src/views/Home/index.vue

@@ -1,65 +1,66 @@
 <template>
   <div class="container">
     <div class="home-banner">
-      <el-carousel height="500px" arrow="always">
+      <el-card>
-        <el-carousel-item v-for="item in bannerList" :key="item.bannerId">
+        <div class="stat-item-title">图片</div>
-          <img :src="item.coverUrl" :alt="item.title" @click="handleChange(item)">
+        <div class="stat-item-num">今日新增{{ imageNum?.spareValue }}个，共{{ imageNum?.value }}个文件</div>
-        </el-carousel-item>
+        <div class="stat-item-img">
-      </el-carousel>
+          <img src="@/assets/images/picture.png" alt="">
+        </div>
+      </el-card>
+
+      <el-card>
+        <div class="stat-item-title">文档</div>
+        <div class="stat-item-num">今日新增{{ documentNum?.spareValue }}个，共{{ documentNum?.value }}个文件</div>
+        <div class="stat-item-img">
+          <img src="@/assets/images/doc.png" alt="">
+        </div>
+      </el-card>
+
+
+      <el-card>
+        <div class="stat-item-title">视频</div>
+        <div class="stat-item-num">今日新增{{ videoNum?.spareValue }}个，共{{ videoNum?.value }}个文件</div>
+        <div class="stat-item-img">
+          <img src="@/assets/images/home-video.png" alt="">
+        </div>
+      </el-card>
+
+      <el-card>
+        <div class="stat-item-title">其它</div>
+        <div class="stat-item-num">今日新增{{ otherNum?.spareValue }}个，共{{ otherNum?.value }}个文件</div>
+        <div class="stat-item-img">
+          <img src="@/assets/images/other.png" alt="">
+        </div>
+      </el-card>
     </div>
 
     <div class="column">
-      <el-row :gutter="10">
+      <el-card style="height: 290px;">
-        <el-col :span="12">
+        <template #header>
-          <el-card style="height: 290px;">
+          <div class="title">同步教材</div>
-            <template #header>
-              <div class="title">学校动态</div>
 
-              <div class="card-left-header">
+          <div class="card-right-header">
-                <span>校园资讯常看常新</span>
+            <span>数字化教材云平台</span>
-                <span class="more">
+            <span class="more">
-                  <RouterLink to="news">查看更多></RouterLink>
+              <RouterLink to="textBook">查看更多></RouterLink>
-                </span>
+            </span>
-              </div>
+          </div>
-            </template>
+        </template>
 
-            <ul class="card-left-list">
+        <div class="card-right-content">
-              <li v-for="item in trendList" @click="handleTrendClick(item)">
+          <el-radio-group v-model="grade" class="grade-radio" @change="firstChange">
-                <span>{{ item.title }}</span>
+            <el-radio-button v-for="item in firstType" :label="item.label" :value="item.id" :key="item.id" />
-                <span>{{ parseTime(item.createTime, '{y}-{m}-{d}') }}</span>
+          </el-radio-group>
-              </li>
+          <el-tabs v-model="activeName" type="border-card" @tab-click="secondChange">
-            </ul>
+            <el-tab-pane v-for="item in secondType" :label="item.label" :name="item.id" :key="item.id"
-          </el-card>
+              class="class-book">
-        </el-col>
+              <el-tag v-for="item in threeType" :key="item.id" type="info" @click="gotoInfo(item.id)">{{ item.label
-
+                }}</el-tag>
-        <el-col :span="12">
+            </el-tab-pane>
-          <el-card style="height: 290px;">
+          </el-tabs>
-            <template #header>
+        </div>
-              <div class="title">同步教材</div>
+      </el-card>
-
-              <div class="card-right-header">
-                <span>数字化教材云平台</span>
-                <span class="more">
-                  <RouterLink to="textBook">查看更多></RouterLink>
-                </span>
-              </div>
-            </template>
-
-            <div class="card-right-content">
-              <el-radio-group v-model="grade" class="grade-radio" @change="firstChange">
-                <el-radio-button v-for="item in firstType" :label="item.label" :value="item.id" :key="item.id" />
-              </el-radio-group>
-              <el-tabs v-model="activeName" type="border-card" @tab-click="secondChange">
-                <el-tab-pane v-for="item in secondType" :label="item.label" :name="item.id" :key="item.id"
-                  class="class-book">
-                  <el-tag v-for="item in threeType" :key="item.id" type="info" @click="gotoInfo(item.id)">{{ item.label
-                    }}</el-tag>
-                </el-tab-pane>
-              </el-tabs>
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
     </div>
 
     <div class="subject">
@@ -85,63 +86,17 @@
       </el-card>
     </div>
 
-    <div class="teacher">
-      <el-card>
-        <template #header>
-          <div class="title">校园名师</div>
-          <div class="card-teacher-header">
-            <span>教育大计老师为本</span>
-            <RouterLink to="teacher">查看更多></RouterLink>
-          </div>
-        </template>
-
-        <ul class="card-teacher-list">
-          <li class="item" v-for="item in showList">
-            <el-card @click="handleTeacherClick(item)">
-              <img :src="item.avatarUrl" alt="">
-              <p class="teacher-name">{{ item.teacherName }}</p>
-              <p class="teacher-class">{{ item.gradeName }}</p>
-              <p class="teacher-desc" v-html="item.content"></p>
-            </el-card>
-          </li>
-        </ul>
-      </el-card>
-    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { getBannerAPI, getTrendAPI, getTextbookAPI, getShowAPI, getResourceAPI } from '@/apis/home'
+import { getTextbookAPI, getResourceAPI, getUploadNum } from '@/apis/home'
 import { parseTime } from '@/utils/utils'
 
 const router = useRouter()
 
-const bannerList = ref([])
-const getBanner = async () => {
-  const res = await getBannerAPI({
-    pageNum: 1,
-    pageSize: 10,
-  })
-  bannerList.value = res.rows
-}
-
-const handleChange = (val) => {
-  console.log(val.url);
-  goTarget(val.url)
-}
-
-
-const trendList = ref([])
-const getTrendData = async () => {
-  const res = await getTrendAPI({
-    pageNum: 1,
-    pageSize: 5
-  })
-  trendList.value = res.rows
-}
-
 const grade = ref()
 const activeName = ref()
 const textbookList = ref([])
@@ -185,23 +140,33 @@ const getResourceData = async () => {
   resourceList.value = res.rows
 }
 
-const showList = ref([])
+const uploadNumArr = ref([])
-const getShowData = async () => {
+const getUploadNumData = async () => {
-  const res = await getShowAPI({
+  const res = await getUploadNum()
-    pageNum: 1,
+  uploadNumArr.value = res.data
-    pageSize: 4
-  })
-  showList.value = res.rows
 }
 
+const imageNum = computed(() => {
+  return uploadNumArr.value.find(item => item.name == 'image')
+})
+
+const documentNum = computed(() => {
+  return uploadNumArr.value.find(item => item.name == 'document')
+})
+
+const videoNum = computed(() => {
+  return uploadNumArr.value.find(item => item.name == 'video')
+})
+
+const otherNum = computed(() => {
+  return uploadNumArr.value.find(item => item.name == 'other')
+})
 
 onMounted(() => {
 
-  getBanner()
-  getTrendData()
   getTextbookData()
   getResourceData()
-  getShowData()
+  getUploadNumData()
 
 })
 
@@ -209,28 +174,12 @@ const gotoInfo = (id) => {
   router.push(`textBook`)
 }
 
-const goTarget = (url) => {
-  window.open(url, '__blank');
-}
-
-const handleTrendClick = (item) => {
-  if (item.type == 1) {
-    goTarget(item.url)
-  } else {
-    router.push(`news/${item.trendId}`)
-  }
-}
-
 const handleSubjectClick = (item) => {
   router.push({ path: `subSubject`, query: { catalogId: item.catalogId, catalogName: item.catalogName, createTime: item.createTime, resourceNum: item.resourceNum } })
 }
-
-const handleTeacherClick = (item) => {
-  router.push(`teacher/${item.showId}`)
-}
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .container {
   .title {
     font-size: 20px;
@@ -243,13 +192,46 @@ const handleTeacherClick = (item) => {
   }
 
   .home-banner {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
     width: 1240px;
-    height: 500px;
+    height: 300px;
+    background-color: #D7F3EE;
+    border-radius: 10px;
+    padding: 10px;
 
-    img {
+    ::v-deep() {
-      width: 100%;
+      .el-card {
-      height: 500px;
+        background-image: linear-gradient(to bottom, #D3F1ECed, #E9F8F5, #FCFFFE);
-      border-radius: 10px;
+
+        .stat-item-title {
+          font-size: 18px;
+          font-weight: bold;
+          color: #000;
+        }
+
+        .stat-item-num {
+          padding-top: 5px;
+          font-size: 14px;
+          color: #788885;
+        }
+
+        .stat-item-img {
+          border-radius: 10px;
+          background-color: #D4F3ED;
+          height: 180px;
+          margin-top: 20px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          img {
+            width: 100px;
+            height: 100px;
+          }
+        }
+      }
     }
   }
 
@@ -257,6 +239,12 @@ const handleTeacherClick = (item) => {
     height: 290px;
     margin-top: 20px;
 
+    ::v-deep() {
+      .el-card {
+        background-image: linear-gradient(to bottom, #FBEADE, #FDF5EF, #FEFEFE);
+      }
+    }
+
     .card-left-header {
       display: flex;
       justify-content: space-between;
@@ -289,8 +277,9 @@ const handleTeacherClick = (item) => {
       padding: 0;
 
       .class-book {
+        height: 95px;
         display: grid;
-        grid-template-columns: repeat(4, 1fr);
+        grid-template-columns: repeat(12, 1fr);
         gap: 8px;
       }
     }
@@ -299,6 +288,12 @@ const handleTeacherClick = (item) => {
   .subject {
     margin-top: 20px;
 
+    ::v-deep() {
+      .el-card {
+        background-image: linear-gradient(to bottom, #E1F0F6, #EFF8FA, #FFFFFF);
+      }
+    }
+
     .card-subject-header {
       display: flex;
       justify-content: space-between;

src/views/Layout/components/LayoutHeader.vue

@@ -1,11 +1,37 @@
 <script setup>
 import { ref } from 'vue'
 import { useTenantStore } from '@/stores/tenantStore'
-import LayoutHeaderUl from './LayoutHeaderUl.vue'
+import { useUserStore } from '@/stores/userStore';
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
 
 const tenantStore = useTenantStore()
-
 const tenantName = ref(tenantStore.tenantInfo.companyName || '校本资源平台')
+
+const userStore = useUserStore()
+
+const logout = async () => {
+  await ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+  await userStore.logout()
+  router.push('/login')
+}
+
+// 定义Command方法对象 通过key直接调用方法
+const commandMap = {
+  logout
+}
+
+const handleCommand = (command) => {
+  // 判断是否存在该方法
+  if (commandMap[command]) {
+    commandMap[command]();
+  }
+}
 </script>
 
 <template>
@@ -15,7 +41,37 @@ const tenantName = ref(tenantStore.tenantInfo.companyName || '校本资源平台
         <RouterLink to="/">{{ tenantName }}</RouterLink>
       </h1>
 
-      <LayoutHeaderUl />
+      <ul class="app-header-nav">
+        <li class="home">
+          <RouterLink to="/">首页</RouterLink>
+        </li>
+        <li class="home">
+          <RouterLink to="textBook">同步教材</RouterLink>
+        </li>
+        <li class="home">
+          <RouterLink to="subject">专题资源</RouterLink>
+        </li>
+        <li class="home">
+          <el-dropdown trigger="hover" @command="handleCommand">
+            <div>
+              <img :src="userStore.userInfo?.user?.avatar" alt="">
+              <span class="nickname">{{ userStore.userInfo?.user?.nickName }}</span>
+            </div>
+
+            <template #dropdown>
+              <el-dropdown-menu>
+                <router-link to="myUpload">
+                  <el-dropdown-item>个人中心</el-dropdown-item>
+                </router-link>
+
+                <el-dropdown-item divided command="logout">
+                  <span>退出登录</span>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </li>
+      </ul>
     </div>
     <div class="bg-img"></div>
   </header>
@@ -36,16 +92,65 @@ const tenantName = ref(tenantStore.tenantInfo.companyName || '校本资源平台
     background: url('@/assets/images/home-bg.png');
   }
 
-  .logo {
+  .container {
-    width: 400px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 
-    a {
+    .logo {
-      font-size: 32px;
+      width: 400px;
-      color: #fff;
+
-      display: block;
+      a {
-      line-height: 150px;
+        font-size: 32px;
-      height: 150px;
+        color: #fff;
-      width: 100%;
+        display: block;
+        line-height: 150px;
+        height: 150px;
+        width: 100%;
+      }
+    }
+
+    .app-header-nav {
+      display: flex;
+
+      li {
+        margin-right: 15px;
+        width: 140px;
+        text-align: center;
+
+        a,
+        .router-link-active {
+          font-size: 16px;
+          line-height: 40px;
+          height: 40px;
+          display: inline-block;
+          color: #fff;
+          background-color: #055170;
+          width: 140px;
+          border-radius: 5px;
+
+          &:hover {
+            background-color: #4094AC;
+          }
+        }
+
+        .active,
+        .router-link-exact-active {
+          background-color: #4094AC;
+        }
+
+        img {
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+        }
+
+        .nickname {
+          font-size: 16px;
+          color: #fff;
+          margin-left: 10px;
+        }
+      }
     }
   }
 }

src/views/Layout/components/LayoutHeaderUl.vue

@@ -1,55 +0,0 @@
-<script setup>
-
-</script>
-
-
-<template>
-  <ul class="app-header-nav">
-    <li class="home">
-      <RouterLink to="/">首页</RouterLink>
-    </li>
-    <li class="home">
-      <RouterLink to="textBook">同步教材</RouterLink>
-    </li>
-    <li class="home">
-      <RouterLink to="subject">专题资源</RouterLink>
-    </li>
-  </ul>
-</template>
-
-
-<style lang="scss">
-.app-header-nav {
-  margin-top: 120px;
-  margin-bottom: 40px;
-  width: 1000px;
-  display: flex;
-
-  li {
-    margin-right: 40px;
-    width: 120px;
-    text-align: center;
-
-    a,
-    .router-link-active {
-      font-size: 16px;
-      line-height: 40px;
-      height: 40px;
-      display: inline-block;
-      color: #fff;
-      background-color: #025B7F;
-      width: 120px;
-      border-radius: 5px;
-
-      &:hover {
-        background-color: #4094AC;
-      }
-    }
-
-    .active,
-    .router-link-exact-active {
-      background-color: #4094AC;
-    }
-  }
-}
-</style>

src/views/Layout/index.vue

@@ -1,16 +1,6 @@
 <script setup>
-
 import LayoutHeader from './components/LayoutHeader.vue'
 import LayoutFooter from './components/LayoutFooter.vue'
-
-// 触发获取导航列表的action
-
-import { useCategoryStore } from '@/stores/categoryStore'
-import { onMounted } from 'vue'
-
-const categoryStore = useCategoryStore()
-
-onMounted(() => categoryStore.getCategory())
 </script>
 
 <template>

src/views/Login/index.vue

@@ -13,7 +13,8 @@
         </div>
 
         <div class="right">
-          <el-form ref="loginFormRef" :model="loginForm" status-icon :rules="rules" label-width="auto">
+          <el-form ref="loginFormRef" :model="loginForm" v-loading="loading" element-loading-text="登录中..." status-icon
+            :rules="rules" label-width="auto">
             <el-form-item label="" prop="username">
               <el-input v-model.number="loginForm.username" placeholder="请输入用户名" :prefix-icon="User" />
             </el-form-item>
@@ -24,7 +25,7 @@
             </el-form-item>
 
             <el-form-item>
-              <el-button type="primary" @click="submitForm(loginFormRef)">
+              <el-button type="primary" @click="submitForm()">
                 登录
               </el-button>
             </el-form-item>
@@ -37,28 +38,53 @@
 </template>
 
 <script setup>
-import { reactive } from 'vue'
+import { ref, onMounted } from 'vue'
 import { User, Lock } from '@element-plus/icons-vue'
+import { useUserStore } from '@/stores/userStore';
+import { useRouter } from 'vue-router';
+import { useTenantStore } from '@/stores/tenantStore';
 
-const loginForm = reactive({
+const router = useRouter()
+const loading = ref(false)
+
+const loginForm = ref({
   username: '',
-  password: ''
+  password: '',
+  clientId: 'e5cd7e4891bf95d1d19206ce24a7b32e',
+  grantType: 'password'
 })
 
-const rules = reactive({
+const rules = ref({
-
+  username: [
+    { required: true, message: '请输入学号', trigger: 'blur' },
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+  ]
 })
 
-const submitForm = (formEl) => {
+const loginFormRef = ref(null)
-  if (!formEl) return
+const submitForm = async () => {
-  formEl.validate((valid) => {
+  loginFormRef.value.validate(async (valid) => {
     if (valid) {
-      console.log('submit!')
+      try {
-    } else {
+        loading.value = true
-      console.log('error submit!')
+        const userStore = useUserStore()
+        await userStore.setToken(loginForm.value)
+        await userStore.setUserInfo()
+
+        router.push('/')
+      } finally {
+        loading.value = false
+      }
     }
   })
 }
+
+onMounted(() => {
+  const tenantStore = useTenantStore()
+  tenantStore.setTenantInfo()
+})
 </script>
 
 <style scoped lang='scss'>

src/views/MyCollect/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <MyHeader></MyHeader>
+  <div class="container">
+    <el-card>
+      <div class="book-grid">
+        <el-card v-for="item in resourceList" @click="goto(item)">
+          <div class="book-content">
+            <img class="file-type" src="@/assets/images/word.png" alt="">
+            <img src="@/assets/images/book.png" alt="">
+          </div>
+
+          <template #footer>
+            <div class="book-title">{{ item.fileName }}</div>
+            <div class="book-des">
+              <div class="book-teacher">
+                <span>{{ item.createBy }}</span>&nbsp;|&nbsp;<span>{{ item.createDept }}</span>
+              </div>
+              <div class="book-view">
+                <el-space wrap>
+                  <el-icon>
+                    <Star />
+                  </el-icon>
+                  <el-icon>
+                    <Pointer />
+                  </el-icon>
+                </el-space>
+              </div>
+            </div>
+          </template>
+        </el-card>
+      </div>
+      <el-pagination class="book-page" background layout="prev, pager, next, sizes,jumper" :total="total"
+        @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+    </el-card>
+  </div>
+  <MyFooter></MyFooter>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { Star, Pointer } from '@element-plus/icons-vue'
+import { getResourceList } from '@/apis/catalogResource'
+import MyHeader from '@/components/MyHeader/index.vue'
+
+const router = useRouter()
+
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 8
+})
+
+const resourceList = ref([])
+const total = ref(0)
+const getResourceListData = async () => {
+  const res = await getResourceList(queryParams.value)
+  resourceList.value = res.rows
+  total.value = res.total
+}
+
+onMounted(() => {
+  getResourceListData()
+})
+
+const handleCurrentChange = (val) => {
+  queryParams.value.pageNum = val
+  getResourceListData()
+}
+
+const handleSizeChange = (val) => {
+  queryParams.value.pageSize = val
+  getResourceListData()
+}
+
+const goto = (item) => {
+  router.push({ path: 'subjectDetail', query: { id: item.id } })
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  .book-grid {
+    margin-top: 10px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 7px;
+
+    .book-content {
+      position: relative;
+
+      .file-type {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 25px;
+      }
+    }
+
+    .book-title {
+      font-size: 16px;
+      font-weight: bold;
+    }
+
+    .book-des {
+      display: flex;
+      justify-content: space-between;
+      color: #919DA3;
+      padding: 5px 0;
+    }
+  }
+
+  .book-page {
+    margin-top: 20px;
+    display: flex;
+    justify-content: end
+  }
+}
+</style>

src/views/MyLike/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <MyHeader></MyHeader>
+  <div class="container">
+    <el-card>
+      <div class="book-grid">
+        <el-card v-for="item in resourceList" @click="goto(item)">
+          <div class="book-content">
+            <img class="file-type" src="@/assets/images/word.png" alt="">
+            <img src="@/assets/images/book.png" alt="">
+          </div>
+
+          <template #footer>
+            <div class="book-title">{{ item.fileName }}</div>
+            <div class="book-des">
+              <div class="book-teacher">
+                <span>{{ item.createBy }}</span>&nbsp;|&nbsp;<span>{{ item.createDept }}</span>
+              </div>
+              <div class="book-view">
+                <el-space wrap>
+                  <el-icon>
+                    <Star />
+                  </el-icon>
+                  <el-icon>
+                    <Pointer />
+                  </el-icon>
+                </el-space>
+              </div>
+            </div>
+          </template>
+        </el-card>
+      </div>
+      <el-pagination class="book-page" background layout="prev, pager, next, sizes,jumper" :total="total"
+        @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+    </el-card>
+  </div>
+  <MyFooter></MyFooter>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { Star, Pointer } from '@element-plus/icons-vue'
+import { getResourceList } from '@/apis/catalogResource'
+import MyHeader from '@/components/MyHeader/index.vue'
+
+const router = useRouter()
+
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 8
+})
+
+const resourceList = ref([])
+const total = ref(0)
+const getResourceListData = async () => {
+  const res = await getResourceList(queryParams.value)
+  resourceList.value = res.rows
+  total.value = res.total
+}
+
+onMounted(() => {
+  getResourceListData()
+})
+
+const handleCurrentChange = (val) => {
+  queryParams.value.pageNum = val
+  getResourceListData()
+}
+
+const handleSizeChange = (val) => {
+  queryParams.value.pageSize = val
+  getResourceListData()
+}
+
+const goto = (item) => {
+  router.push({ path: 'subjectDetail', query: { id: item.id } })
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  .book-grid {
+    margin-top: 10px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 7px;
+
+    .book-content {
+      position: relative;
+
+      .file-type {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 25px;
+      }
+    }
+
+    .book-title {
+      font-size: 16px;
+      font-weight: bold;
+    }
+
+    .book-des {
+      display: flex;
+      justify-content: space-between;
+      color: #919DA3;
+      padding: 5px 0;
+    }
+  }
+
+  .book-page {
+    margin-top: 20px;
+    display: flex;
+    justify-content: end
+  }
+}
+</style>

src/views/MyRecord/index.vue

@@ -0,0 +1,161 @@
+<template>
+  <MyHeader></MyHeader>
+  <div class="container">
+    <el-card class="news-card">
+      <template #header>
+        <div class="card-header">
+          <div class="header-search">
+            <el-space wrap>
+              <span>名称</span>
+              <el-input v-model="queryParams.title" style="width: 300px" placeholder="请输入关键词" clearable
+                @clear="handleClear" />
+
+              <span>格式</span>
+              <el-select v-model="queryParams.fileSuffix" placeholder="请选择格式" style="width: 300px"
+                @keyup.enter="handleQuery">
+                <el-option v-for="item in formatOptions" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+              <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
+            </el-space>
+          </div>
+        </div>
+      </template>
+
+      <el-table @row-click="handleRowClick" :data="tableData" class="table" stripe>
+        <el-table-column prop="title" label="课件名称" />
+        <el-table-column prop="createTime" label="课件格式" />
+        <el-table-column prop="createTime" label="课件大小" />
+        <el-table-column prop="createTime" label="目录" />
+        <el-table-column prop="createTime" label="创建时间" width="200" />
+      </el-table>
+
+      <template #footer>
+        <el-pagination class="footer" background layout="prev, pager, next, sizes,jumper" :total="total"
+          @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+      </template>
+    </el-card>
+  </div>
+  <MyFooter></MyFooter>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { Search } from '@element-plus/icons-vue'
+import { getTrendAPI } from '@/apis/home'
+
+const router = useRouter()
+
+const formatOptions = [
+  {
+    value: '.doc',
+    label: 'doc',
+  },
+  {
+    value: '.docx',
+    label: 'docx',
+  },
+  {
+    value: '.xls',
+    label: 'xls',
+  },
+  {
+    value: '.xlsx',
+    label: 'xlsx',
+  },
+  {
+    value: '.ppt',
+    label: 'ppt',
+  },
+  {
+    value: '.pptx',
+    label: 'pptx',
+  },
+  {
+    value: '.pdf',
+    label: 'pdf',
+  },
+  {
+    value: '.txt',
+    label: 'txt',
+  }
+]
+
+const queryParams = ref({
+  title: '',
+  fileSuffix: '',
+  pageNum: 1,
+  pageSize: 10
+})
+const tableData = ref([])
+const total = ref(0)
+const getTrendData = async () => {
+  const res = await getTrendAPI(queryParams.value)
+  tableData.value = res.rows
+  total.value = res.total
+}
+
+onMounted(() => {
+  getTrendData()
+})
+
+const handleCurrentChange = (val) => {
+  queryParams.value.pageNum = val
+  getTrendData()
+}
+
+const handleSizeChange = (val) => {
+  queryParams.value.pageSize = val
+  getTrendData()
+}
+
+const handleQuery = () => {
+  if (!queryParams.value.title) {
+    ElMessage.error('请输入查询关键字！')
+    return
+  }
+  getTrendData()
+}
+
+const handleClear = () => {
+  queryParams.value.title = ''
+  getTrendData()
+}
+
+const goTarget = (url) => {
+  window.open(url, '__blank');
+}
+
+const handleRowClick = (row) => {
+  if (row.type == 1) {
+    goTarget(row.url)
+  } else {
+    router.push(`news/${row.trendId}`)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  .news-card {
+    margin-top: 20px;
+
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+
+      .title {
+        font-size: 20px;
+        font-weight: bold;
+        margin-bottom: 5px;
+      }
+    }
+
+    .footer {
+      display: flex;
+      justify-content: end;
+    }
+  }
+
+}
+</style>

src/views/MyUpload/index.vue

@@ -0,0 +1,161 @@
+<template>
+  <MyHeader></MyHeader>
+  <div class="container">
+    <el-card class="news-card">
+      <template #header>
+        <div class="card-header">
+          <div class="header-search">
+            <el-space wrap>
+              <span>名称</span>
+              <el-input v-model="queryParams.title" style="width: 300px" placeholder="请输入关键词" clearable
+                @clear="handleClear" />
+
+              <span>格式</span>
+              <el-select v-model="queryParams.fileSuffix" placeholder="请选择格式" style="width: 300px"
+                @keyup.enter="handleQuery">
+                <el-option v-for="item in formatOptions" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+              <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
+            </el-space>
+          </div>
+        </div>
+      </template>
+
+      <el-table @row-click="handleRowClick" :data="tableData" class="table" stripe>
+        <el-table-column prop="title" label="课件名称" />
+        <el-table-column prop="createTime" label="课件格式" />
+        <el-table-column prop="createTime" label="课件大小" />
+        <el-table-column prop="createTime" label="目录" />
+        <el-table-column prop="createTime" label="创建时间" width="200" />
+      </el-table>
+
+      <template #footer>
+        <el-pagination class="footer" background layout="prev, pager, next, sizes,jumper" :total="total"
+          @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+      </template>
+    </el-card>
+  </div>
+  <MyFooter></MyFooter>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { Search } from '@element-plus/icons-vue'
+import { getTrendAPI } from '@/apis/home'
+
+const router = useRouter()
+
+const formatOptions = [
+  {
+    value: '.doc',
+    label: 'doc',
+  },
+  {
+    value: '.docx',
+    label: 'docx',
+  },
+  {
+    value: '.xls',
+    label: 'xls',
+  },
+  {
+    value: '.xlsx',
+    label: 'xlsx',
+  },
+  {
+    value: '.ppt',
+    label: 'ppt',
+  },
+  {
+    value: '.pptx',
+    label: 'pptx',
+  },
+  {
+    value: '.pdf',
+    label: 'pdf',
+  },
+  {
+    value: '.txt',
+    label: 'txt',
+  }
+]
+
+const queryParams = ref({
+  title: '',
+  fileSuffix: '',
+  pageNum: 1,
+  pageSize: 10
+})
+const tableData = ref([])
+const total = ref(0)
+const getTrendData = async () => {
+  const res = await getTrendAPI(queryParams.value)
+  tableData.value = res.rows
+  total.value = res.total
+}
+
+onMounted(() => {
+  getTrendData()
+})
+
+const handleCurrentChange = (val) => {
+  queryParams.value.pageNum = val
+  getTrendData()
+}
+
+const handleSizeChange = (val) => {
+  queryParams.value.pageSize = val
+  getTrendData()
+}
+
+const handleQuery = () => {
+  if (!queryParams.value.title) {
+    ElMessage.error('请输入查询关键字！')
+    return
+  }
+  getTrendData()
+}
+
+const handleClear = () => {
+  queryParams.value.title = ''
+  getTrendData()
+}
+
+const goTarget = (url) => {
+  window.open(url, '__blank');
+}
+
+const handleRowClick = (row) => {
+  if (row.type == 1) {
+    goTarget(row.url)
+  } else {
+    router.push(`news/${row.trendId}`)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  .news-card {
+    margin-top: 20px;
+
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+
+      .title {
+        font-size: 20px;
+        font-weight: bold;
+        margin-bottom: 5px;
+      }
+    }
+
+    .footer {
+      display: flex;
+      justify-content: end;
+    }
+  }
+
+}
+</style>

src/views/TextBook/index.vue

@@ -7,67 +7,70 @@
       </el-breadcrumb>
     </div>
 
-    <el-card class="card-filter">
+    <el-collapse v-model="activeNames">
-      <el-form label-width="auto">
+      <el-collapse-item title="" name="1">
-        <el-form-item v-if="textbook2List && textbook2List.length" label="学段">
+        <el-form label-width="auto" style="padding-left: 20px;">
-          <el-radio-group v-model="radio2" @change="handle2Change">
+          <el-form-item v-if="textbook2List && textbook2List.length" label="学段">
-            <el-radio-button v-for="item in textbook2List" :label="item.catalogName" :value="item.catalogId"
+            <el-radio-group v-model="radio2" @change="handle2Change">
-              :key="item.catalogId" />
+              <el-radio-button v-for="item in textbook2List" :label="item.catalogName" :value="item.catalogId"
-          </el-radio-group>
+                :key="item.catalogId" />
-        </el-form-item>
+            </el-radio-group>
+          </el-form-item>
 
-        <el-form-item v-if="textbook3List && textbook3List.length" label="年级">
+          <el-form-item v-if="textbook3List && textbook3List.length" label="年级">
-          <el-radio-group v-model="radio3" @change="handle3Change">
+            <el-radio-group v-model="radio3" @change="handle3Change">
-            <el-radio-button v-for="item in textbook3List" :label="item.catalogName" :value="item.catalogId"
+              <el-radio-button v-for="item in textbook3List" :label="item.catalogName" :value="item.catalogId"
-              :key="item.catalogId" />
+                :key="item.catalogId" />
-          </el-radio-group>
+            </el-radio-group>
-        </el-form-item>
+          </el-form-item>
 
-        <el-form-item v-if="textbook4List && textbook4List.length" label="学科">
+          <el-form-item v-if="textbook4List && textbook4List.length" label="学科">
-          <el-radio-group v-model="radio4" @change="handle4Change">
+            <el-radio-group v-model="radio4" @change="handle4Change">
-            <el-radio-button v-for="item in textbook4List" :label="item.catalogName" :value="item.catalogId"
+              <el-radio-button v-for="item in textbook4List" :label="item.catalogName" :value="item.catalogId"
-              :key="item.catalogId" />
+                :key="item.catalogId" />
-          </el-radio-group>
+            </el-radio-group>
-        </el-form-item>
+          </el-form-item>
 
-        <el-form-item v-if="textbook5List && textbook5List.length" label="版本">
+          <el-form-item v-if="textbook5List && textbook5List.length" label="版本">
-          <el-radio-group v-model="radio5" @change="handle5Change">
+            <el-radio-group v-model="radio5" @change="handle5Change">
-            <el-radio-button v-for="item in textbook5List" :label="item.catalogName" :value="item.catalogId"
+              <el-radio-button v-for="item in textbook5List" :label="item.catalogName" :value="item.catalogId"
-              :key="item.catalogId" />
+                :key="item.catalogId" />
-          </el-radio-group>
+            </el-radio-group>
-        </el-form-item>
+          </el-form-item>
 
-        <el-form-item v-if="textbook6List && textbook6List.length" label="教材">
+          <el-form-item v-if="textbook6List && textbook6List.length" label="教材">
-          <el-radio-group v-model="radio6" @change="handle6Change">
+            <el-radio-group v-model="radio6" @change="handle6Change">
-            <el-radio-button v-for="item in textbook6List" :label="item.catalogName" :value="item.catalogId"
+              <el-radio-button v-for="item in textbook6List" :label="item.catalogName" :value="item.catalogId"
-              :key="item.catalogId" />
+                :key="item.catalogId" />
-          </el-radio-group>
+            </el-radio-group>
-        </el-form-item>
+          </el-form-item>
 
-        <el-form-item label="类型">
+          <el-form-item label="类型">
-          <el-radio-group v-model="queryParams.type">
+            <el-radio-group v-model="queryParams.type">
-            <el-radio-button label="全部" value=""></el-radio-button>
+              <el-radio-button label="全部" value=""></el-radio-button>
-            <el-radio-button label="课件" value="1"></el-radio-button>
+              <el-radio-button label="课件" value="1"></el-radio-button>
-            <el-radio-button label="精品课堂" value="2"></el-radio-button>
+              <el-radio-button label="精品课堂" value="2"></el-radio-button>
-            <el-radio-button label="作业" value="3"></el-radio-button>
+              <el-radio-button label="作业" value="3"></el-radio-button>
-            <el-radio-button label="试卷" value="4"></el-radio-button>
+              <el-radio-button label="试卷" value="4"></el-radio-button>
-          </el-radio-group>
+            </el-radio-group>
-        </el-form-item>
+          </el-form-item>
+
+          <el-form-item label="格式">
+            <el-radio-group v-model="queryParams.formatSuffix">
+              <el-radio-button label="全部" value=""></el-radio-button>
+              <el-radio-button label="PPT" value="1"></el-radio-button>
+              <el-radio-button label="WORD" value="2"></el-radio-button>
+              <el-radio-button label="PDF" value="3"></el-radio-button>
+              <el-radio-button label="图片" value="4"></el-radio-button>
+              <el-radio-button label="音频" value="5"></el-radio-button>
+              <el-radio-button label="视频" value="6"></el-radio-button>
+              <el-radio-button label="其它" value="7"></el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+        </el-form>
+      </el-collapse-item>
+    </el-collapse>
 
-        <el-form-item label="格式">
-          <el-radio-group v-model="queryParams.formatSuffix">
-            <el-radio-button label="全部" value=""></el-radio-button>
-            <el-radio-button label="PPT" value="1"></el-radio-button>
-            <el-radio-button label="WORD" value="2"></el-radio-button>
-            <el-radio-button label="PDF" value="3"></el-radio-button>
-            <el-radio-button label="图片" value="4"></el-radio-button>
-            <el-radio-button label="音频" value="5"></el-radio-button>
-            <el-radio-button label="视频" value="6"></el-radio-button>
-            <el-radio-button label="其它" value="7"></el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-      </el-form>
-    </el-card>
 
     <el-row :gutter="10" style="margin-top: 10px">
       <el-col :span="6">
@@ -139,8 +142,6 @@ import { View, Search } from '@element-plus/icons-vue'
 import { getTextbookAPI, getTextbookTreeAPI, getTextbookList } from '@/apis/textbook'
 import JzSort from '@/components/JzSort/index.vue'
 
-const imgSuffix = ['.jpg', '.png', '.jpeg', '.gif', '.bmp']
-
 const router = useRouter()
 const queryParams = ref({
   catalogId: undefined,
@@ -155,6 +156,8 @@ const queryParams = ref({
 const tableData = ref([])
 const total = ref(0)
 
+const activeNames = ref(['1'])
+
 const radio2 = ref()
 const radio3 = ref()
 const radio4 = ref()
@@ -301,7 +304,7 @@ onMounted(() => {
     }
   }
 
-  .card-filter {
+  .el-collapse {
     margin-top: 20px;
   }