From 004cf1d5c03306ff7d72e7ca75ded5f9723013f8 Mon Sep 17 00:00:00 2001
From: Xwen <929716663@qq.com>
Date: Sat, 23 Dec 2023 15:02:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=B8=AA=E4=BA=BA=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=96=B0=E5=A2=9E=E7=AD=89=E7=BA=A7=E9=99=90?=
 =?UTF-8?q?=E5=88=B6=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Yi.Bbs.Vue3/src/components/AvatarInfo.vue   |  44 ++-
 Yi.Bbs.Vue3/src/components/DisscussCard.vue | 285 ++++++++++----------
 2 files changed, 187 insertions(+), 142 deletions(-)

diff --git a/Yi.Bbs.Vue3/src/components/AvatarInfo.vue b/Yi.Bbs.Vue3/src/components/AvatarInfo.vue
index 2d1aa2bb..1f5a565b 100644
--- a/Yi.Bbs.Vue3/src/components/AvatarInfo.vue
+++ b/Yi.Bbs.Vue3/src/components/AvatarInfo.vue
@@ -9,7 +9,17 @@
 
       <div v-if="!props.isSelf">
         <div class="nick" :class="{ mt_1: props.time != 'undefined' }">
-          {{ userInfo.nick }}
+          <div class="text">{{ userInfo.nick }}</div>
+          <div class="level">
+            <el-tag round effect="light" type="success">{{
+              userInfo.level
+            }}</el-tag>
+          </div>
+          <div class="status">
+            <el-tag round effect="light" :type="userInfo.userLimit.type">
+              {{ userInfo.userLimit.label }}
+            </el-tag>
+          </div>
         </div>
         <div class="remarks" v-if="props.time">{{ props.time }}</div>
         <div class="remarks">
@@ -48,6 +58,8 @@ const userInfo = reactive({
   nick: "",
   role: [],
   id: "",
+  level: 1,
+  userLimit: 0,
 });
 const iconUrl = ref("/favicon.ico");
 const iconUrlHandler = () => {
@@ -86,6 +98,8 @@ const Init = () => {
     userInfo.nick = props.userInfo.nick;
     userInfo.role = props.userInfo.role;
     userInfo.id = props.userInfo.id;
+    userInfo.level = "等级" + props.userInfo.level;
+    userInfo.userLimit = getStatusInfo(1);
     iconUrl.value = iconUrlHandler(userInfo.icon);
   }
 
@@ -98,6 +112,28 @@ const Init = () => {
     iconUrl.value = userInfo.icon;
   }
 };
+
+const statusTypeList = [
+  {
+    label: "正常",
+    value: 0,
+    type: "success",
+  },
+  {
+    label: "危险",
+    value: 1,
+    type: "warning",
+  },
+  {
+    label: "已禁止",
+    value: 2,
+    type: "danger",
+  },
+];
+
+const getStatusInfo = (type) => {
+  return statusTypeList.filter((item) => item.value === type)[0];
+};
 </script>
 <style scoped>
 .mt_1 {
@@ -105,7 +141,13 @@ const Init = () => {
 }
 
 .nick {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   font-weight: bold;
+  > div {
+    margin-right: 10px;
+  }
 }
 
 .info {
diff --git a/Yi.Bbs.Vue3/src/components/DisscussCard.vue b/Yi.Bbs.Vue3/src/components/DisscussCard.vue
index f2e96544..33b2b534 100644
--- a/Yi.Bbs.Vue3/src/components/DisscussCard.vue
+++ b/Yi.Bbs.Vue3/src/components/DisscussCard.vue
@@ -1,48 +1,57 @@
 <template>
-    <el-badge :value="props.badge ?? ''" class="box-card">
-        <el-card shadow="never" :style="{ 'border-color': discuss.color }">
-            <el-row>
+  <el-badge :value="props.badge ?? ''" class="box-card">
+    <el-card shadow="never" :style="{ 'border-color': discuss.color }">
+      <el-row>
+        <!-- 头部 -->
+        <el-col :span="24" class="card-header">
+          <AvatarInfo :userInfo="discuss.user" :time="discuss.creationTime" />
+        </el-col>
 
-            <!-- 头部 -->
-                <el-col :span=24 class="card-header">
-                    <AvatarInfo :userInfo="discuss.user" :time="discuss.creationTime" />
-                </el-col>
+        <!-- 身体 -->
 
+        <el-col :span="18">
+          <el-row>
+            <el-col v-if="discuss.isBan" :span="24" class="item item-title">
+              <el-link size="100" :underline="false" style="color: #f56c6c">{{
+                discuss.title
+              }}</el-link></el-col
+            >
 
-                <!-- 身体 -->
+            <el-col v-else :span="24" class="item item-title">
+              <el-link
+                size="100"
+                :underline="false"
+                @click="enterDiscuss(discuss.id)"
+                >{{ discuss.title }}</el-link
+              ></el-col
+            >
 
-                <el-col :span=18 >
-                    <el-row>
-                        
-                        <el-col v-if="discuss.isBan" :span=24 class=" item item-title "> <el-link size="100" :underline="false"
-                        style="color:#F56C6C;" >{{ discuss.title }}</el-link></el-col>
+            <el-col :span="24" class="item item-description">{{
+              discuss.introduction
+            }}</el-col>
+            <el-col :span="24" class="item item-tag"
+              ><el-tag v-for="i in 4" :key="i">教程</el-tag></el-col
+            >
+          </el-row>
+        </el-col>
 
-                    <el-col v-else :span=24 class=" item item-title "> <el-link size="100" :underline="false"
-                        @click="enterDiscuss(discuss.id)">{{ discuss.title }}</el-link></el-col>
+        <el-col :span="6" style="display: flex; justify-content: center">
+          <el-image
+            :preview-src-list="[getUrl(discuss.cover)]"
+            v-if="discuss.cover"
+            :src="getUrl(discuss.cover)"
+            style="width: 100px; height: 100px"
+          />
+        </el-col>
 
-                      
-
-                <el-col :span=24 class=" item item-description">{{ discuss.introduction }}</el-col>
-                <el-col :span=24 class=" item item-tag"><el-tag v-for="i in 4" :key="i">教程</el-tag></el-col>
-            </el-row>
-                </el-col>
-         
-
-                <el-col :span=6 style="    display: flex;justify-content: center;">
-                    <el-image  :preview-src-list="[getUrl(discuss.cover)]" v-if="discuss.cover" :src="getUrl(discuss.cover)"  style="width: 100px;height: 100px;"  />
-                </el-col>
-
-
-
-                
-                <!-- 底部 -->
-                <el-col :span=24 class=" item item-bottom " style="    margin-bottom: 0;">
-                    <el-space :size="10" :spacer="spacer">
-                        <div class="item-description">
-                            {{ discuss.creationTime }}
-                        </div>
-<AgreeInfo  :data="discuss"/>
-<!-- 
+        <!-- 底部 -->
+        <el-col :span="24" class="item item-bottom" style="margin-bottom: 0">
+          <el-space :size="10" :spacer="spacer">
+            <div class="item-description">
+              {{ discuss.creationTime }}
+            </div>
+            <AgreeInfo :data="discuss" />
+            <!-- 
                         <el-button text @click="agree">
                             <el-icon v-if="discuss.isAgree" color="#409EFF">
                                 <CircleCheckFilled />
@@ -53,145 +62,139 @@
                         <el-button icon="Star" text>
                             收藏</el-button> -->
 
-                        <el-button icon="View" text>
-                            浏览数:{{ discuss.seeNum ?? 0 }}</el-button>
-
-
-                    </el-space>
-                </el-col>
-
-            </el-row>
-
-        </el-card>
-    </el-badge>
+            <el-button icon="View" text>
+              浏览数:{{ discuss.seeNum ?? 0 }}</el-button
+            >
+          </el-space>
+        </el-col>
+      </el-row>
+    </el-card>
+  </el-badge>
 </template>
 <script setup>
-import { h, ref, toRef, onMounted ,reactive} from 'vue'
-import { useRouter } from 'vue-router'
-import AvatarInfo from './AvatarInfo.vue';
-import AgreeInfo from './AgreeInfo.vue'
-import { operate } from '@/apis/agreeApi'
+import { h, ref, toRef, onMounted, reactive } from "vue";
+import { useRouter } from "vue-router";
+import AvatarInfo from "./AvatarInfo.vue";
+import AgreeInfo from "./AgreeInfo.vue";
+import { operate } from "@/apis/agreeApi";
 
-const props = defineProps(['discuss','badge'])
-const discuss=reactive({
-    id:'',
-    title:"",
-    introduction:"",
-    creationTime:"",
-    user:{},
-    color:"",
-    seeNum:0,
-    agreeNum:0,
-    isAgree:false,
-    cover:"",
-    isBan:false,
-    isAgree:false,
-    agreeNum:0
-})
-const router = useRouter()
-const spacer = h(ElDivider, { direction: 'vertical' })
+const props = defineProps(["discuss", "badge"]);
+const discuss = reactive({
+  id: "",
+  title: "",
+  introduction: "",
+  creationTime: "",
+  user: {},
+  color: "",
+  seeNum: 0,
+  agreeNum: 0,
+  isAgree: false,
+  cover: "",
+  isBan: false,
+  isAgree: false,
+  agreeNum: 0,
+});
+const router = useRouter();
+const spacer = h(ElDivider, { direction: "vertical" });
 const enterDiscuss = (id) => {
-    router.push(`/article/${id}`)
-}
-const getUrl= (str)=>{
-return `${import.meta.env.VITE_APP_BASEAPI}/file/${str}`
-}
+  router.push(`/article/${id}`);
+};
+const getUrl = (str) => {
+  return `${import.meta.env.VITE_APP_BASEAPI}/file/${str}`;
+};
 
 //点赞操作
 const agree = async () => {
-    const response = await operate(discuss.id)
-    const res = response.data;
-    //提示框，颜色区分
-    if (res.isAgree) {
-        discuss.isAgree = true;
-        discuss.agreeNum += 1;
-        ElMessage({
-            message: res.message,
-            type: 'success',
-        })
-    }
-    else {
-        discuss.isAgree = false;
-        discuss.agreeNum-= 1;
-        ElMessage({
-            message: res.message,
-            type: 'warning',
-        })
-    }
-}
+  const response = await operate(discuss.id);
+  const res = response.data;
+  //提示框，颜色区分
+  if (res.isAgree) {
+    discuss.isAgree = true;
+    discuss.agreeNum += 1;
+    ElMessage({
+      message: res.message,
+      type: "success",
+    });
+  } else {
+    discuss.isAgree = false;
+    discuss.agreeNum -= 1;
+    ElMessage({
+      message: res.message,
+      type: "warning",
+    });
+  }
+};
 onMounted(() => {
-
-    // id:'',
-    // title:"",
-    // introduction:"",
-    // creationTime:"",
-    // user:{},
-    // color:"",
-    // seeNum:0,
-    // agreeNum:0,
-    // isAgree:""
-    discuss.id=props.discuss.id;
-    discuss.title=props.discuss.title;
-    discuss.introduction=props.discuss.introduction;
-    discuss.creationTime=props.discuss.creationTime;
-    discuss.user=props.discuss.user;
-    discuss.color=props.discuss.color;
-    discuss.seeNum=props.discuss.seeNum;
-    discuss.isAgree=props.discuss.isAgree;
-    discuss.agreeNum=props.discuss.agreeNum;
-    discuss.isBan=props.discuss.isBan;
-    discuss.cover=props.discuss.cover;
-    discuss.value = props.isAgree;
-    discuss.value = props.agreeNum;
-})
+  // id:'',
+  // title:"",
+  // introduction:"",
+  // creationTime:"",
+  // user:{},
+  // color:"",
+  // seeNum:0,
+  // agreeNum:0,
+  // isAgree:""
+  discuss.id = props.discuss.id;
+  discuss.title = props.discuss.title;
+  discuss.introduction = props.discuss.introduction;
+  discuss.creationTime = props.discuss.creationTime;
+  discuss.user = props.discuss.user;
+  discuss.color = props.discuss.color;
+  discuss.seeNum = props.discuss.seeNum;
+  discuss.isAgree = props.discuss.isAgree;
+  discuss.agreeNum = props.discuss.agreeNum;
+  discuss.isBan = props.discuss.isBan;
+  discuss.cover = props.discuss.cover;
+  discuss.value = props.isAgree;
+  discuss.value = props.agreeNum;
+});
 </script>
 <style scoped>
 .el-card {
-    border: 2px solid white
+  border: 2px solid white;
 }
 
 .item-bottom .el-icon {
-    margin-right: 0.4rem;
+  margin-right: 0.4rem;
 }
 
 .card-header {
-    display: flex;
-    margin-bottom: 1.5rem;
-    align-items: center;
+  display: flex;
+  margin-bottom: 1.5rem;
+  align-items: center;
 }
 
 .item {
-    font-size: 14px;
-    margin-bottom: 18px;
+  font-size: 14px;
+  margin-bottom: 18px;
 }
 
 .box-card {
-    width: 100%;
-    min-height: 15rem;
-    /* right: calc(1px + var(--el-badge-size)/ 2) !important; */
-    /* top: 0 !important;  */
-
+  width: 100%;
+  min-height: 15rem;
+  /* right: calc(1px + var(--el-badge-size)/ 2) !important; */
+  /* top: 0 !important;  */
 }
 
 .item-title {
-    /* font-size: var(--el-font-size-large); */
+  /* font-size: var(--el-font-size-large); */
 }
 
 .item-description {
-    font-size: var(--el-font-size-small);
-    color: #8C8C8C;
+  font-size: var(--el-font-size-small);
+  color: #8c8c8c;
 }
 
 .item .el-tag {
-    margin-right: 1rem;
+  margin-right: 1rem;
 }
 
 .ml-2 {
-    margin-left: 1.2rem;
+  margin-left: 1.2rem;
 }
 
 .el-link {
-    font-size: initial;
-    font-weight: 700;
+  font-size: initial;
+  font-weight: 700;
 }
-</style>
\ No newline at end of file
+</style>