From 5efe05af24fc32047d638084f693549511d52664 Mon Sep 17 00:00:00 2001
From: Xwen <929716663@qq.com>
Date: Tue, 12 Dec 2023 18:10:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E9=A6=96=E9=A1=B5=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Yi.BBS.Vue3/src/views/Discuss.vue | 345 +++++++++++++++---------------
 Yi.BBS.Vue3/src/views/Index.vue   | 130 +++++------
 2 files changed, 239 insertions(+), 236 deletions(-)

diff --git a/Yi.BBS.Vue3/src/views/Discuss.vue b/Yi.BBS.Vue3/src/views/Discuss.vue
index 03bc6733..4ed7b6e8 100644
--- a/Yi.BBS.Vue3/src/views/Discuss.vue
+++ b/Yi.BBS.Vue3/src/views/Discuss.vue
@@ -1,221 +1,224 @@
 <template>
-    <div style="width: 1200px;" class="body-div">
-<div class="header">
-    <el-form :inline="true" >
-            <el-form-item label="标题：" >
-      <el-input  v-model="query.title"        placeholder="请输入标题"
-      ></el-input>
-    </el-form-item>
-      
-    <el-form-item label="标签：">
-        <el-input
-        placeholder="搜索当下分类下的标签"
+  <div style="width: 1200px" class="body-div">
+    <div class="header">
+      <el-form :inline="true">
+        <el-form-item label="标题：">
+          <el-input v-model="query.title" placeholder="请输入标题"></el-input>
+        </el-form-item>
 
-      />
-    </el-form-item>
-    <div class="form-right">
- 
-            <el-button>重置</el-button>
-             <el-button type="primary" @click="async()=>{ await loadDiscussList();}">查询</el-button>
-             <el-button @click="enterEditArticle" type="primary"     v-hasPer="['bbs:discuss:add']">分享</el-button>    
-             <el-dropdown>
-    <span class="el-dropdown-link">
-      展开
-      <el-icon class="el-icon--right">
-        <arrow-down />
-      </el-icon>
-    </span>
+        <el-form-item label="标签：">
+          <el-input placeholder="搜索当下分类下的标签" />
+        </el-form-item>
+        <div class="form-right">
+          <el-button>重置</el-button>
+          <el-button
+            type="primary"
+            @click="
+              async () => {
+                await loadDiscussList();
+              }
+            "
+            >查询</el-button
+          >
+          <el-button
+            @click="enterEditArticle"
+            type="primary"
+            v-hasPer="['bbs:discuss:add']"
+            >分享</el-button
+          >
+          <el-dropdown>
+            <span class="el-dropdown-link">
+              展开
+              <el-icon class="el-icon--right">
+                <arrow-down />
+              </el-icon>
+            </span>
 
-    <template #dropdown>
-      <el-dropdown-menu>
-        <el-dropdown-item>Action 1</el-dropdown-item>
-        <el-dropdown-item>Action 2</el-dropdown-item>
-        <el-dropdown-item>Action 3</el-dropdown-item>
-        <el-dropdown-item disabled>Action 4</el-dropdown-item>
-        <el-dropdown-item divided>Action 5</el-dropdown-item>
-      </el-dropdown-menu>
-    </template>
-  </el-dropdown>
-</div>
-
-</el-form>
-</div>
-
-
-<el-tabs v-model="activeName"  @tab-change="handleClick">
-    <el-tab-pane label="最新" name="new">    </el-tab-pane>
-    <el-tab-pane label="推荐" name="suggest">   </el-tab-pane>
-    <el-tab-pane label="最热" name="host">   </el-tab-pane>
-  </el-tabs>
-
-  <el-collapse class="collapse-list" style="background-color: #F0F2F5;" >
-      <el-collapse-item >
-        <template #title>
-          <div class="collapse-top">
-          已置顶主题<el-icon class="header-icon">
-            <info-filled />
-          </el-icon>
-          </div>
-        </template>
-<div class="div-item" v-for="i in topDiscussList" >
-  <DisscussCard :discuss="i" badge="置顶"/>
-</div>
-</el-collapse-item>
-</el-collapse>
-<el-divider v-show="topDiscussList.length>0" />
-  
-<div class="div-item" v-for="i in discussList" >
-  <DisscussCard :discuss="i"/>
-</div>
-<div>
-    <el-pagination
-      v-model:current-page="query.pageNum"
-      v-model:page-size="query.pageSize"
-      :page-sizes="[10, 20, 30, 50]"
-      :background="true"
-      layout="total, sizes, prev, pager, next, jumper"
-      :total="total"
-      @size-change="async(val)=>{ await loadDiscussList();}"
-      @current-change="async(val)=>{ await loadDiscussList();}"
-    />
-  </div>
-
-<el-empty v-if="discussList.length==0" description="空空如也" />
-<BottomInfo/>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>Action 1</el-dropdown-item>
+                <el-dropdown-item>Action 2</el-dropdown-item>
+                <el-dropdown-item>Action 3</el-dropdown-item>
+                <el-dropdown-item disabled>Action 4</el-dropdown-item>
+                <el-dropdown-item divided>Action 5</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </el-form>
     </div>
 
+    <el-tabs v-model="activeName" @tab-change="handleClick">
+      <el-tab-pane label="最新" name="new"> </el-tab-pane>
+      <el-tab-pane label="推荐" name="suggest"> </el-tab-pane>
+      <el-tab-pane label="最热" name="host"> </el-tab-pane>
+    </el-tabs>
 
+    <el-collapse class="collapse-list" style="background-color: #f0f2f5">
+      <el-collapse-item>
+        <template #title>
+          <div class="collapse-top">
+            已置顶主题<el-icon class="header-icon">
+              <info-filled />
+            </el-icon>
+          </div>
+        </template>
+        <div class="div-item" v-for="i in topDiscussList">
+          <DisscussCard :discuss="i" badge="置顶" />
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+    <el-divider v-show="topDiscussList.length > 0" />
 
-    
+    <div class="div-item" v-for="i in discussList">
+      <DisscussCard :discuss="i" />
+    </div>
+    <div>
+      <el-pagination
+        v-model:current-page="query.skipCount"
+        v-model:page-size="query.maxResultCount"
+        :page-sizes="[10, 20, 30, 50]"
+        :background="true"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="
+          async (val) => {
+            await loadDiscussList();
+          }
+        "
+        @current-change="
+          async (val) => {
+            await loadDiscussList();
+          }
+        "
+      />
+    </div>
+
+    <el-empty v-if="discussList.length == 0" description="空空如也" />
+    <BottomInfo />
+  </div>
 </template>
 
-
 <script setup>
-import DisscussCard from '@/components/DisscussCard.vue'
-import {getList,getTopList} from '@/apis/discussApi.js'
-import { onMounted, ref,reactive  } from 'vue'
-import { useRoute,useRouter } from 'vue-router'
-import BottomInfo from '@/components/BottomInfo.vue'
+import DisscussCard from "@/components/DisscussCard.vue";
+import { getList, getTopList } from "@/apis/discussApi.js";
+import { onMounted, ref, reactive } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import BottomInfo from "@/components/BottomInfo.vue";
 //数据定义
-const route=useRoute()
-const router=useRouter()
-const activeName = ref('new')
+const route = useRoute();
+const router = useRouter();
+const activeName = ref("new");
 //主题内容
-const discussList=ref([]);
+const discussList = ref([]);
 //置顶主题内容
 const topDiscussList = ref([]);
-const total=ref(100)
-const query=reactive({
-  pageNum:1,
-  pageSize:10,
-  title:'',
-  plateId:route.params.plateId,
-  type:activeName.value
-})
+const total = ref(100);
+const query = reactive({
+  skipCount: 1,
+  maxResultCount: 10,
+  title: "",
+  plateId: route.params.plateId,
+  type: activeName.value,
+});
 
-const handleClick =async (tab, event) => {
-  query.type=activeName.value ;
+const handleClick = async (tab, event) => {
+  query.type = activeName.value;
   await loadDiscussList();
-}
+};
 
-onMounted(async()=>{
-
-  if(route.query.q !=undefined)
-  {
-    query.title=route.query.q??''
-    router.push("/discuss")
+onMounted(async () => {
+  if (route.query.q != undefined) {
+    query.title = route.query.q ?? "";
+    router.push("/discuss");
   }
- await loadDiscussList();
-})
+  await loadDiscussList();
+});
 
 //加载discuss
-const loadDiscussList=async()=>{
-  const response= await getList(query);
- discussList.value=response.data.items;
- total.value=Number( response.data.total);
+const loadDiscussList = async () => {
+  const response = await getList(query);
+  discussList.value = response.data.items;
+  total.value = Number(response.data.total);
 
- //全查，无需参数
-const topResponse=await getTopList();
-topDiscussList.value=topResponse.data.items;
-}
+  //全查，无需参数
+  const topResponse = await getTopList();
+  topDiscussList.value = topResponse.data.items;
+};
 
 //进入添加主题页面
-const enterEditArticle=()=>{
+const enterEditArticle = () => {
   //跳转路由
-var routerPer= { path: '/editArt', query: {
-     operType: 'create',
-     artType:'discuss',
-     plateId:route.params.plateId,
-     }}
-router.push(routerPer);
-}
+  var routerPer = {
+    path: "/editArt",
+    query: {
+      operType: "create",
+      artType: "discuss",
+      plateId: route.params.plateId,
+    },
+  };
+  router.push(routerPer);
+};
 </script>
 <style scoped>
-.el-pagination
-{margin: 2rem 0rem 2rem 0rem;justify-content: right;}
-.body-div{
-min-height: 1000px;
+.el-pagination {
+  margin: 2rem 0rem 2rem 0rem;
+  justify-content: right;
 }
- .el-dropdown-link {
+.body-div {
+  min-height: 1000px;
+}
+.el-dropdown-link {
   cursor: pointer;
   color: var(--el-color-primary);
   display: flex;
   align-items: center;
 }
-.header{
-background-color: #FFFFFF;
-padding: 1rem;
-margin: 1rem 0rem ;
+.header {
+  background-color: #ffffff;
+  padding: 1rem;
+  margin: 1rem 0rem;
 }
-.collapse-top
-{
+.collapse-top {
   padding-left: 2rem;
 }
-.header .el-input
-{
- 
+.header .el-input {
 }
-.el-tabs
-{
-    background-color: #FFFFFF;
- padding-left: 2rem;
+.el-tabs {
+  background-color: #ffffff;
+  padding-left: 2rem;
 }
-.el-tabs >>> .el-tabs__header
-{
-    margin-bottom: 0;
+.el-tabs >>> .el-tabs__header {
+  margin-bottom: 0;
 }
-.div-item
-{
-margin-bottom: 1rem;
+.div-item {
+  margin-bottom: 1rem;
 }
 
 .el-form {
-    --el-form-label-font-size: var(--el-font-size-base);
-    display: flex;
-    align-items: center;
+  --el-form-label-font-size: var(--el-font-size-base);
+  display: flex;
+  align-items: center;
 }
-.el-form-item
-{padding-top: 0.8rem;}
-.form-right
-{
-    align-items: center;
-display: flex;
-    margin-left: auto;
+.el-form-item {
+  padding-top: 0.8rem;
 }
-.form-right .el-button
-{
-    margin-right: 0.6rem;
+.form-right {
+  align-items: center;
+  display: flex;
+  margin-left: auto;
 }
-.header .el-input
-{
-    width:20rem;
+.form-right .el-button {
+  margin-right: 0.6rem;
+}
+.header .el-input {
+  width: 20rem;
 }
 .collapse-list >>> .el-collapse-item__header {
-border-bottom-color: #F0F2F5 !important;
+  border-bottom-color: #f0f2f5 !important;
 }
 
-.el-divider
-{
+.el-divider {
   margin: 0.5rem 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/Yi.BBS.Vue3/src/views/Index.vue b/Yi.BBS.Vue3/src/views/Index.vue
index 38c75a39..b05d0710 100644
--- a/Yi.BBS.Vue3/src/views/Index.vue
+++ b/Yi.BBS.Vue3/src/views/Index.vue
@@ -1,91 +1,95 @@
-<template >
-  <div style="width: 1200px;">
+<template>
+  <div style="width: 1200px">
     <el-row :gutter="20" class="top-div">
-
       <el-col :span="17">
         <div class="scrollbar">
           <ScrollbarInfo />
         </div>
-
-
         <el-row class="left-div">
-          <el-col :span="8" v-for="i in plateList" class="plate"
-            :style="{ 'padding-left': i % 3 == 1 ? 0 : 0.2 + 'rem', 'padding-right': i % 3 == 0 ? 0 : 0.2 + 'rem' }">
-            <PlateCard :name="i.name" :introduction="i.introduction" :id="i.id" />
+          <el-col
+            :span="8"
+            v-for="i in plateList"
+            class="plate"
+            :style="{
+              'padding-left': i % 3 == 1 ? 0 : 0.2 + 'rem',
+              'padding-right': i % 3 == 0 ? 0 : 0.2 + 'rem',
+            }"
+          >
+            <PlateCard
+              :name="i.name"
+              :introduction="i.introduction"
+              :id="i.id"
+            />
           </el-col>
 
           <el-col :span="24" v-for="i in discussList">
             <DisscussCard :discuss="i" />
-
           </el-col>
           <el-col :span="24">
-            <el-empty v-show="discussList.length <= 0" description="推荐位置，空空如也" />
+            <el-empty
+              v-show="discussList.length <= 0"
+              description="推荐位置，空空如也"
+            />
           </el-col>
         </el-row>
-
       </el-col>
 
       <el-col :span="7">
         <el-row class="right-div">
           <el-col :span="24">
-
-
             <el-carousel trigger="click" height="150px">
               <el-carousel-item v-for="item in bannerList">
-                <div class="carousel-font" :style="{ color: item.color }">{{ item.name }}</div>
-                <el-image style="width: 100%; height: 100%" :src="item.logo" fit="cover" />
+                <div class="carousel-font" :style="{ color: item.color }">
+                  {{ item.name }}
+                </div>
+                <el-image
+                  style="width: 100%; height: 100%"
+                  :src="item.logo"
+                  fit="cover"
+                />
               </el-carousel-item>
             </el-carousel>
-
           </el-col>
 
-          <el-col :span="24" >
+          <el-col :span="24">
             <InfoCard header="访问统计" class="VisitsLineChart" text="详情">
               <template #content>
                 <VisitsLineChart />
-
               </template>
             </InfoCard>
           </el-col>
 
-
-
           <el-col :span="24">
             <InfoCard header="简介" text="详情">
               <template #content>
                 <div class="introduce">
-
-                  没有什么能够阻挡，人类对代码<span style="color: #1890ff;">优雅</span>的追求
+                  没有什么能够阻挡，人类对代码<span style="color: #1890ff"
+                    >优雅</span
+                  >的追求
                 </div>
-
               </template>
             </InfoCard>
           </el-col>
 
           <el-col :span="24">
-            <InfoCard :items=items header="本月排行" text="更多">
+            <InfoCard :items="items" header="本月排行" text="更多">
               <template #item="temp">
                 <AvatarInfo>
-                  <template #bottom>
-                    本月积分：290
-                  </template>
-
+                  <template #bottom> 本月积分：290 </template>
                 </AvatarInfo>
               </template>
             </InfoCard>
           </el-col>
 
-
           <el-col :span="24">
-            <InfoCard :items=items header="推荐好友" text="更多">
+            <InfoCard :items="items" header="推荐好友" text="更多">
               <template #item="temp">
                 <AvatarInfo />
               </template>
             </InfoCard>
           </el-col>
 
-
-          <el-col :span="24" style=" background: transparent;">
+          <el-col :span="24" style="background: transparent">
             <BottomInfo />
           </el-col>
         </el-row>
@@ -95,60 +99,60 @@
 </template>
 
 <script setup>
-import DisscussCard from '@/components/DisscussCard.vue'
-import InfoCard from '@/components/InfoCard.vue'
-import PlateCard from '@/components/PlateCard.vue'
-import ScrollbarInfo from '@/components/ScrollbarInfo.vue'
-import AvatarInfo from '@/components/AvatarInfo.vue'
-import BottomInfo from '@/components/BottomInfo.vue'
-import VisitsLineChart from '@/components/echars/VisitsLineChart.vue'
+import { onMounted, ref, reactive } from "vue";
+import DisscussCard from "@/components/DisscussCard.vue";
+import InfoCard from "@/components/InfoCard.vue";
+import PlateCard from "@/components/PlateCard.vue";
+import ScrollbarInfo from "@/components/ScrollbarInfo.vue";
+import AvatarInfo from "@/components/AvatarInfo.vue";
+import BottomInfo from "@/components/BottomInfo.vue";
+import VisitsLineChart from "@/components/echars/VisitsLineChart.vue";
 
-import { access } from '@/apis/accessApi.js'
-import { getList } from '@/apis/plateApi.js'
-import { getList as bannerGetList } from '@/apis/bannerApi.js'
-import { getList as discussGetList } from '@/apis/discussApi.js'
-import { onMounted, ref, reactive } from 'vue'
+import { access } from "@/apis/accessApi.js";
+import { getList } from "@/apis/plateApi.js";
+import { getList as bannerGetList } from "@/apis/bannerApi.js";
+import { getList as discussGetList } from "@/apis/discussApi.js";
 var plateList = ref([]);
 var discussList = ref([]);
 var bannerList = ref([]);
 
-const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }]
-//主题查询参数 
+const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }];
+//主题查询参数
 const query = reactive({
-  pageNum: 1,
-  pageSize: 10,
-  isTop: true
+  skipCount: 1,
+  maxResultCount: 10,
+  isTop: true,
 });
 
 //初始化
 onMounted(async () => {
-  await access();
-  plateList.value = (await getList()).data.items;
-  discussList.value = (await discussGetList(query)).data.items;
-  bannerList.value = (await bannerGetList()).data.items
+  access();
+  const { data: plateData } = await getList();
+  plateList.value = plateData.items;
+  const { data: discussData } = await discussGetList(query);
+  discussList.value = discussData.items;
+  const { data: bannerData } = await bannerGetList();
+  bannerList.value = bannerData.items;
 });
-
-
 </script>
-<style scoped >
+<style scoped>
 .introduce {
-  color: rgba(0, 0, 0, .45);
+  color: rgba(0, 0, 0, 0.45);
   font-size: small;
 }
 
 .plate {
   background: transparent !important;
-
 }
 
 .left-div .el-col {
-  background-color: #FFFFFF;
+  background-color: #ffffff;
 
   margin-bottom: 1rem;
 }
 
 .right-div .el-col {
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   margin-bottom: 1rem;
 }
 
@@ -159,9 +163,7 @@ onMounted(async () => {
   left: 10%;
 }
 
-
 .top-div {
-
   padding-top: 0.5rem;
 }
 
@@ -169,9 +171,7 @@ onMounted(async () => {
   display: block;
   margin-bottom: 0.5rem;
 }
-.VisitsLineChart >>> .el-card__body
-{
-
+.VisitsLineChart >>> .el-card__body {
   padding: 0.5rem;
 }
 </style>