feat:完善discuss主题相关功能及界面

Yi.BBS.Vue3/src/components/AvatarInfo.vue

@@ -1,24 +1,26 @@
 <template >
     <div class="avatar">
+        <div class="avatar-left">
+            <el-avatar :size="props.size" :src="iconUrl" />
 
-        <div class="avatar-left" >      
-            <el-avatar :size="props.size" :src="userInfo.icon ?? '/src/assets/logo.ico'" />
-
-<div v-if="props.isSelf">
-    <div class="nick" > {{userInfo.name}}</div>
-    </div>
+            <div v-if="props.isSelf">
+                <div class="nick"> {{ userInfo.nick }}</div>
+            </div>
 
             <div v-if="!props.isSelf">
-                <div class="nick" :class="{mt_1: props.time!='undefined'}"> {{userInfo.name}}</div>
-                <div class="remarks" v-if="props.time"> {{props.time}}</div>
-                <div class="remarks">  <slot name="bottom" /></div>
+
+                <div class="nick" :class="{ mt_1: props.time != 'undefined' }"> {{ userInfo.nick }}</div>
+                <div class="remarks" v-if="props.time"> {{ props.time }}</div>
+                <div class="remarks">
+                    <slot name="bottom" />
+                </div>
             </div>
             <div class="info" v-if="!props.isSelf">
-                <el-tag class="ml-2" type="warning">V6</el-tag>
-                <el-tag class="ml-2" type="danger">管理员</el-tag>
+                <el-tag class="ml-2" type="warning">V8</el-tag>
+                <el-tag class="ml-2" type="danger">会员</el-tag>
             </div>
         </div>
-        
+
 
         <el-button v-if="props.showWatching" type="primary" size="default" icon="Plus">关注</el-button>
 
@@ -26,57 +28,84 @@
 </template>
 <script setup>
 import useUserStore from '@/stores/user'
-import { reactive, watch ,onMounted  } from 'vue';
+import { reactive, watch, onMounted, computed } from 'vue';
 //userInfo
 //{icon,name,role,id},根据判断userInfo是否等于未定义，来觉得是当前登录用户信息，还是其他人信息
-const props = defineProps(['size','showWatching','time','userInfo','isSelf'])
-const userStore=useUserStore();
-const userInfo=reactive({
-    icon:"",
-    name:"",
-    role:[],
-    id:""
-    });
+const props = defineProps(['size', 'showWatching', 'time', 'userInfo', 'isSelf'])
+const userStore = useUserStore();
+const userInfo = reactive({
+    icon: "",
+    nick: "",
+    role: [],
+    id: ""
+});
+
+const iconUrl = computed(() => {
+    if (userInfo.icon == null || userInfo.icon == undefined || userInfo.icon == '') {
+
+        return '/src/assets/logo.ico';
+    }
+
+    if (userInfo.icon.includes(import.meta.env.VITE_APP_BASEAPI)) {
+        return userInfo.icon;
+    }
+
+
+    return `${import.meta.env.VITE_APP_BASEAPI}/file/${userInfo.icon}`;
+})
+
+watch(userStore, (n) => {
+    if (props.userInfo == undefined) {
+        userInfo.nick = n.name;
+    }
+
+})
+
+watch(() => props, (n) => {
+    Init();
+}, { deep: true })
 
 onMounted(() => {
+    Init();
+})
+
+const Init = () => {
     //使用传入值
-    if(props.userInfo!= undefined)
-    {
-        userInfo.icon=props.userInfo.icon;
-        userInfo.name=props.userInfo.name;
-        userInfo.role=props.userInfo.role;
-        userInfo.id=props.userInfo.id;
+    if (props.userInfo != undefined) {
+        userInfo.icon = props.userInfo.icon;
+        userInfo.nick = props.userInfo.nick;
+        userInfo.role = props.userInfo.role;
+        userInfo.id = props.userInfo.id;
     }
 
     //使用当前登录用户
-    else
-    { 
-        userInfo.icon=userStore.icon;
-        userInfo.name=userStore.name;
-        userInfo.role=userStore.role;
-        userInfo.id=userStore.id;
+    else {
+        userInfo.icon = userStore.icon;
+        userInfo.nick = userStore.name;
+        userInfo.role = userStore.role;
+        userInfo.id = userStore.id;
     }
-})
+}
 
 </script>
 <style scoped>
-.mt_1
-{
-  margin-top: 0.5rem;  
+.mt_1 {
+    margin-top: 0.5rem;
 }
-.nick
-{
-    font-weight:bold;
+
+.nick {
+    font-weight: bold;
 }
-.info
-{
+
+.info {
     margin-top: 0.6rem;
     margin-left: 1rem;
 }
-.info .el-tag
-{
-    margin-right:1rem;
+
+.info .el-tag {
+    margin-right: 1rem;
 }
+
 .el-icon {
     color: white;
 

Yi.BBS.Vue3/src/components/DisscussCard.vue

@@ -1,8 +1,10 @@
 <template>
-    <el-card class="box-card" shadow="never">
+    
+      <el-badge  :value="props.badge??''" class="box-card"  >
+    <el-card shadow="never" :style="{'border-color':props.color}" >
 
         <div class="card-header">
-          <AvatarInfo src="asdsadas" :userInfo="{name:'大白子'}" />
+          <AvatarInfo  :userInfo="props.user" :time="props.creationTime"/>
         </div>
 
 
@@ -13,7 +15,7 @@
         <div class=" item item-bottom">
             <el-space :size="10" :spacer="spacer">
                 <div class="item-description">
-                   {{ props.createTime }}
+                   {{ props.creationTime }}
                 </div>
 
 
@@ -21,21 +23,22 @@
                     点赞</el-button>
                 <el-button icon="Star" text>
                     收藏</el-button>
-
-                <el-button icon="ChatDotRound" text>
-                    评论</el-button>
+               
+                    <el-button icon="View" text>
+                    浏览数:{{ props.seeNum??0 }}</el-button>
 
 
             </el-space>
         </div>
     </el-card>
+</el-badge>
 </template>
 <script setup>
 import { h, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import AvatarInfo from './AvatarInfo.vue';
 
-const props = defineProps(['title','introduction','createTime','id'])
+const props = defineProps(['title','introduction','creationTime','id','user','badge',"color","seeNum"])
 
 const router = useRouter()
 const spacer = h(ElDivider, { direction: 'vertical' })
@@ -44,6 +47,9 @@ const enterDiscuss = (id) => {
 }
 </script>
 <style scoped>
+.el-card{
+    border: 2px solid white 
+}
 
 .item-bottom .el-icon {
     margin-right: 0.4rem;
@@ -63,6 +69,9 @@ const enterDiscuss = (id) => {
 .box-card {
     width: 100%;
     min-height: 15rem;
+    /* right: calc(1px + var(--el-badge-size)/ 2) !important; */
+    /* top: 0 !important;  */
+
 }
 
 .item-title {
@@ -86,4 +95,5 @@ const enterDiscuss = (id) => {
     font-size: initial;
     font-weight: 700;
 }
+
 </style>

Yi.BBS.Vue3/src/components/MavonEdit.vue

@@ -1,10 +1,17 @@
 <template>
   <mavon-editor ref='md' v-model="text" :subfield="true" :codeStyle="props.codeStyle" :ishljs="true"
     :style="{ minHeight: props.height, maxHeight: '100%' }" class="edit" @imgAdd="imgAdd">
+ 
     <!-- 引用视频链接的自定义按钮 -->
     <template v-slot:left-toolbar-after>
       <!--点击按钮触发的事件是打开表单对话框-->
 
+
+      <el-button @click="fileDialogVisible=true" aria-hidden="true" class="op-icon fa" title="上传文件">
+          <el-icon ><FolderChecked /></el-icon>
+        </el-button>
+
+
       <el-dropdown :hide-on-click='false'>
         <el-button aria-hidden="true" class="op-icon fa" title="表情包">
           😊
@@ -37,9 +44,45 @@
       </el-dropdown>
 
 
+      <el-dialog
+      :modal=false
+      :draggable=true
+   
+    v-model="fileDialogVisible"
+    title="文件上传"
+    width="30%"
+    :before-close="fileHandleClose"
+  >
+    <span>选择你的文件：</span>
 
+    <el-upload
+    class="upload-demo"
+    drag
+    :action="fileUploadUrl"
+    multiple
+    :on-success="onSuccess"
+  >
+    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+    <div class="el-upload__text">
+      可将文件拖拽到这里 <em>点击上传</em>
+    </div>
+    <template #tip>
+      <div class="el-upload__tip">
+        文件需小于100MB以内
+      </div>
+    </template>
+  </el-upload>
+<p v-for="(item,i) in fileUrlList" :key="i">{{` ${i+1}: ${getUrl(item)}` }} <el-button></el-button></p>
 
-
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="fileDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">
+         确认
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
     </template>
 
   </mavon-editor>
@@ -51,10 +94,16 @@ import { mavonEditor } from 'mavon-editor'
 import 'mavon-editor/dist/css/index.css'
 import { ref, computed, watch, onMounted } from 'vue';
 import { upload } from '@/apis/fileApi'
+
 const md = ref(null);
 const props = defineProps(['height', 'modelValue', "codeStyle"])
 const emit = defineEmits(['update:modelValue'])
+const fileDialogVisible=ref(false)
 
+//已经上传好的文件列表url
+const fileUrlList=ref([])
+
+const fileUploadUrl=`${import.meta.env.VITE_APP_BASEAPI}/file`
 // //v-model传值出去
 const text = computed({
   get() {
@@ -65,6 +114,18 @@ const text = computed({
   }
 })
 
+const getUrl= (str)=>{
+return `${import.meta.env.VITE_APP_BASEAPI}/file/${str}`
+}
+
+//关闭文件上传弹窗
+const fileHandleClose=()=>{
+fileDialogVisible=false;
+}
+//文件上传成功后
+const onSuccess=(response)=>{
+  fileUrlList.value.push(response[0].id)
+}
 //图片上传
 const imgAdd = async (pos, $file) => {
   // 第一步.将图片上传到服务器.
@@ -77,9 +138,13 @@ const imgAdd = async (pos, $file) => {
 
 }
 </script>
-<style scoped>
+
+
+<style  scoped>
 .edit {
 
-  width: 100%;
+width: 100%;
 }
+
+
 </style>

Yi.BBS.Vue3/src/components/TreeArticleInfo.vue

@@ -1,7 +1,7 @@
 <template>
       <el-tree
-                  :data="data"
-                  :props="props.defaultProps"
+                  :data="props.data==''?[]:props.data"
+                  :props="defaultProps"
                   @node-click="handleNodeClick"
                   :expand-on-click-node="false"
                   node-key="id"