完成前端帖子列表样式编写

my-project-backend/src/main/java/com/example/entity/dto/TopicType.java

@@ -12,4 +12,5 @@ public class TopicType implements BaseData {
     String name;
     @TableField("`desc`")
     String desc;
+    String color;
 }

my-project-backend/src/main/java/com/example/entity/vo/response/TopicTypeVO.java

@@ -7,4 +7,5 @@ public class TopicTypeVO {
     int id;
     String name;
     String desc;
+    String color;
 }

my-project-backend/src/main/resources/application-dev.yml

@@ -4,17 +4,20 @@ springdoc:
   swagger-ui:
     operations-sorter: alpha
 spring:
+  data:
+    redis:
+      host: 192.168.0.8
   mail:
     host: smtp.163.com
     username: javastudy111@163.com
     password: QGLYGBVECIASGPWQ
   rabbitmq:
-    addresses: localhost
+    addresses: 192.168.0.8
     username: admin
     password: admin
     virtual-host: /
   datasource:
-    url: jdbc:mysql://localhost:3306/test
+    url: jdbc:mysql://192.168.0.8:3306/test
     username: root
     password: 123456
     driver-class-name: com.mysql.cj.jdbc.Driver
@@ -40,7 +43,7 @@ spring:
       credentials: false
       methods: '*'
   minio:
-    endpoint: 'http://localhost:9000'
+    endpoint: 'http://192.168.0.8:9000'
     username: 'minio'
     password: 'password'
   weather:

my-project-backend/src/main/resources/application.yml

@@ -1,3 +1,7 @@
 spring:
   profiles:
     active: '@environment@'
+  servlet:
+    multipart:
+      max-file-size: 10MB
+      max-request-size: 10MB

my-project-frontend/src/components/TopicEditor.vue

@@ -3,24 +3,25 @@ import {Document} from "@element-plus/icons-vue";
 import {QuillEditor, Quill} from "@vueup/vue-quill";
 import {computed, reactive, ref} from "vue";
 import '@vueup/vue-quill/dist/vue-quill.snow.css';
-import {accessHeader, get, post} from "@/net";
+import {accessHeader, post} from "@/net";
 import axios from "axios";
 import {ElMessage} from "element-plus";
 import ImageResize from "quill-image-resize-vue";
 import { ImageExtend, QuillWatch } from "quill-image-super-solution-module";
+import {useStore} from "@/store";
 
 defineProps({ show: Boolean })
 const emit = defineEmits(['close', 'created'])
 
+const store = useStore()
+
 const refEditor = ref()
 const editor = reactive({
     type: null,
     title: '',
     text: '',
     uploading: false,
-    types: []
 })
-get('/api/forum/types', data => editor.types = data)
 
 function initEditor() {
     refEditor.value.setContents('', 'user')
@@ -132,8 +133,8 @@ const editorOption = {
             </template>
             <div style="display: flex;gap: 10px">
                 <div style="width: 120px">
-                    <el-select placeholder="选择类型..." v-model="editor.type" :disabled="!editor.types.length">
+                    <el-select placeholder="选择类型..." v-model="editor.type" :disabled="!store.forum.types.length">
-                        <el-option v-for="item in editor.types" :value="item.id" :label="item.name"/>
+                        <el-option v-for="item in store.forum.types" :value="item.id" :label="item.name"/>
                     </el-select>
                 </div>
                 <div style="flex: 1">

my-project-frontend/src/store/index.js

@@ -10,6 +10,9 @@ export const useStore = defineStore('general', {
                 role: '',
                 registerTime: null,
                 avatar: null
+            },
+            forum: {
+                types: []
             }
         }
     }, getters: {
@@ -19,5 +22,9 @@ export const useStore = defineStore('general', {
             else
                 return 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
         }
+    }, actions: {
+        findTypeById(id) {
+            return this.forum.types[id - 1]
+        }
     }
 })

my-project-frontend/src/views/forum/TopicList.vue

@@ -6,6 +6,9 @@ import Weather from "@/components/Weather.vue";
 import {get} from "@/net";
 import {ElMessage} from "element-plus";
 import TopicEditor from "@/components/TopicEditor.vue";
+import {useStore} from "@/store";
+
+const store = useStore()
 
 const weather = reactive({
     now: {},
@@ -20,7 +23,13 @@ const today = computed(() => {
     const date = new Date()
     return `${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日`
 })
-get('/api/forum/list-topic?page=0&type=0', data => list.value = data)
+
+function updateList() {
+    get('/api/forum/list-topic?page=0&type=0', data => list.value = data)
+}
+
+updateList()
+get('/api/forum/types', data => store.forum.types = data)
 
 navigator.geolocation.getCurrentPosition(position => {
     const latitude = position.coords.latitude
@@ -47,19 +56,37 @@ navigator.geolocation.getCurrentPosition(position => {
         <div style="flex: 1">
             <light-card>
                 <div class="edit-topic">
-                    <div @click="editor = true"><el-icon><EditPen/></el-icon> 点击发表主题...</div>
+                    <div @click="editor = true">
+                        <el-icon>
+                            <EditPen/>
+                        </el-icon>
+                        点击发表主题...
+                    </div>
                 </div>
             </light-card>
-            <light-card v-for="item in list" style="margin-top: 10px">
+            <light-card v-for="item in list" class="topic-card">
-                <div>{{item.title}}</div>
+                <div>
-                <div>{{item.text}}</div>
+                    <div class="topic-type"
+                         :style="{color: store.findTypeById(item.type)?.color+'EE',
+                         'border-color': store.findTypeById(item.type)?.color+'EE',
+                         'background-color': store.findTypeById(item.type)?.color+'22'}">
+                        {{ store.findTypeById(item.type)?.name }}
+                    </div>
+                    <span style="margin-left: 7px;font-weight: bold">{{ item.title }}</span>
+                </div>
+                <div class="topic-preview-content">{{ item.text }}</div>
+                <div style="display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10px">
+                    <el-image v-for="img in item.images" :src="img" class="topic-image"></el-image>
+                </div>
             </light-card>
         </div>
         <div style="width: 280px">
             <div style="position: sticky;top: 20px">
                 <light-card>
                     <div style="font-weight: bold;">
-                        <el-icon><CollectionTag/></el-icon>
+                        <el-icon>
+                            <CollectionTag/>
+                        </el-icon>
                         论坛公告
                     </div>
                     <el-divider style="margin: 10px 0"/>
@@ -70,7 +97,9 @@ navigator.geolocation.getCurrentPosition(position => {
                 </light-card>
                 <light-card style="margin-top: 10px">
                     <div style="font-weight: bold;">
-                        <el-icon><Calendar /></el-icon>
+                        <el-icon>
+                            <Calendar/>
+                        </el-icon>
                         天气信息
                     </div>
                     <el-divider style="margin: 10px 0"/>
@@ -79,7 +108,7 @@ navigator.geolocation.getCurrentPosition(position => {
                 <light-card style="margin-top: 10px">
                     <div style="display: flex;justify-content: space-between;color: grey;font-size: 14px">
                         <div>当前日期</div>
-                        <div>{{today}}</div>
+                        <div>{{ today }}</div>
                     </div>
                     <div style="display: flex;justify-content: space-between;color: grey;font-size: 14px">
                         <div>当前IP地址</div>
@@ -87,28 +116,61 @@ navigator.geolocation.getCurrentPosition(position => {
                     </div>
                 </light-card>
                 <div style="margin-top: 10px;color: grey;font-size: 14px">
-                    <el-icon><Link /></el-icon>
+                    <el-icon>
+                        <Link/>
+                    </el-icon>
                     友情链接
                     <el-divider style="margin: 10px 0"/>
                 </div>
                 <div style="display: grid;grid-template-columns: repeat(2, 1fr);grid-gap: 10px;margin-top: 10px">
                     <div class="friend-link">
-                        <el-image style="height: 100%" src="https://element-plus.org/images/js-design-banner.jpg"/>
+                        <el-image src="https://element-plus.org/images/js-design-banner.jpg" style="height: 100%"/>
                     </div>
                     <div class="friend-link">
-                        <el-image style="height: 100%" src="https://element-plus.org/images/vform-banner.png"/>
+                        <el-image src="https://element-plus.org/images/vform-banner.png" style="height: 100%"/>
                     </div>
                     <div class="friend-link">
-                        <el-image style="height: 100%" src="https://element-plus.org/images/sponsors/jnpfsoft.jpg"/>
+                        <el-image src="https://element-plus.org/images/sponsors/jnpfsoft.jpg" style="height: 100%"/>
                     </div>
                 </div>
             </div>
         </div>
-        <topic-editor :show="editor" @close="editor = false" @created="editor = false"/>
+        <topic-editor :show="editor" @close="editor = false" @created="editor = false;updateList()"/>
     </div>
 </template>
 
 <style lang="less" scoped>
+.topic-card {
+    margin-top: 10px;
+    transition: scale .3s;
+
+    &:hover {
+        scale: 1.02;
+        cursor: pointer;
+    }
+
+    .topic-type {
+        display: inline-block;
+        border: solid 1px grey;
+        border-radius: 5px;
+        font-size: 12px;
+        padding: 0 5px;
+        height: 18px;
+    }
+
+    .topic-preview-content {
+        font-size: 13px;
+        color: grey;
+        margin: 10px;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+
 .friend-link {
     border-radius: 5px;
     overflow: hidden;
@@ -128,7 +190,7 @@ navigator.geolocation.getCurrentPosition(position => {
     }
 }
 
-.dark .edit-topic{
+.dark .edit-topic {
     background-color: #282828;
 }
 </style>