From b6d35a88dbdbc237f53ef19c8b80f4842c51c903 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=B7=B3?= <454313500@qq.com>
Date: Sat, 27 Jan 2024 10:55:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E9=99=90=E5=88=B6=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ArticleContentInfo.vue     |  2 +-
 Yi.Bbs.Vue3/src/components/AvatarInfo.vue     | 33 ++++--------------
 .../src/components/UserInfoCard/index.vue     | 23 ++-----------
 Yi.Bbs.Vue3/src/components/UserLimitTag.vue   | 31 +++++++++++++++++
 .../src/components/yi-table/TableColumn.vue   |  1 -
 .../home/components/PointsRanking/index.vue   | 32 +++--------------
 .../home/components/RecommendFriend/index.vue | 34 ++++---------------
 Yi.Bbs.Vue3/src/views/profile/Index.vue       |  5 ++-
 8 files changed, 53 insertions(+), 108 deletions(-)
 create mode 100644 Yi.Bbs.Vue3/src/components/UserLimitTag.vue

diff --git a/Yi.Bbs.Vue3/src/components/ArticleContentInfo.vue b/Yi.Bbs.Vue3/src/components/ArticleContentInfo.vue
index f9342a0b..2dd7ab06 100644
--- a/Yi.Bbs.Vue3/src/components/ArticleContentInfo.vue
+++ b/Yi.Bbs.Vue3/src/components/ArticleContentInfo.vue
@@ -37,7 +37,7 @@ watch(props,(n,o)=>{
     );
     //需要注意代码块样式
     outputHtml.value = marked(n.code).replace(/<pre>/g, "<pre class='hljs'>")
-})
+},{immediate:true,deep:true})
 
 </script>
 
diff --git a/Yi.Bbs.Vue3/src/components/AvatarInfo.vue b/Yi.Bbs.Vue3/src/components/AvatarInfo.vue
index 2eeeb495..de44fa09 100644
--- a/Yi.Bbs.Vue3/src/components/AvatarInfo.vue
+++ b/Yi.Bbs.Vue3/src/components/AvatarInfo.vue
@@ -17,13 +17,9 @@
               >
             </div>
             <div class="status" v-if="userInfo.userLimit">
-              <el-tag
-                round
-                effect="light"
-                :type="getStatusInfo(userInfo.userLimit)?.type"
-              >
-                {{ getStatusInfo(userInfo.userLimit)?.label }}
-              </el-tag>
+
+<UserLimitTag :userLimit="userInfo.userLimit"/>
+              
             </div>
           </div>
           <div class="remarks" v-if="props.time">{{ props.time }}</div>
@@ -52,6 +48,8 @@ import { reactive, watch, onMounted, computed, ref } from "vue";
 import { upload } from "@/apis/fileApi";
 import useAuths from "@/hooks/useAuths";
 import UserInfoCard from "./UserInfoCard/index.vue";
+import UserLimitTag from "./UserLimitTag.vue";
+
 
 const { getToken } = useAuths();
 const isHasToken = getToken();
@@ -128,27 +126,8 @@ const Init = () => {
   }
 };
 
-const statusTypeList = [
-  {
-    label: "正常",
-    value: "Normal",
-    type: "success",
-  },
-  {
-    label: "危险",
-    value: "Dangerous",
-    type: "warning",
-  },
-  {
-    label: "已禁止",
-    value: "Ban",
-    type: "danger",
-  },
-];
 
-const getStatusInfo = (type) => {
-  return statusTypeList.filter((item) => item.value === type)[0];
-};
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/Yi.Bbs.Vue3/src/components/UserInfoCard/index.vue b/Yi.Bbs.Vue3/src/components/UserInfoCard/index.vue
index 05376950..f7151033 100644
--- a/Yi.Bbs.Vue3/src/components/UserInfoCard/index.vue
+++ b/Yi.Bbs.Vue3/src/components/UserInfoCard/index.vue
@@ -48,7 +48,7 @@
         <div class="score">钱钱：{{ userInfo.money }}</div>
         <div class="status">
           <span>状态：</span>
-          <span> {{ getStatusInfo(userInfo.userLimit) }}</span>
+          <UserLimitTag :userLimit="userInfo.userLimit"/>
         </div>
       </div>
       <div class="hobby">
@@ -65,6 +65,7 @@
 <script setup name="UserInfoCard">
 import { computed, defineProps } from "vue";
 import { useRouter } from "vue-router";
+import UserLimitTag from "../UserLimitTag.vue";
 const props = defineProps({
   // 用户信息
   userInfo: {
@@ -79,26 +80,6 @@ const props = defineProps({
 });
 const router = useRouter();
 const userInfo = computed(() => props.userInfo);
-const statusTypeList = [
-  {
-    label: "正常",
-    value: "Normal",
-    type: "success",
-  },
-  {
-    label: "危险",
-    value: "Dangerous",
-    type: "warning",
-  },
-  {
-    label: "已禁止",
-    value: "Ban",
-    type: "danger",
-  },
-];
-const getStatusInfo = (type) => {
-  return statusTypeList.filter((item) => item.value === type)[0]?.label;
-};
 
 const gotoProfile=(userName)=>{
   router.push(`/profile/${userName}`);
diff --git a/Yi.Bbs.Vue3/src/components/UserLimitTag.vue b/Yi.Bbs.Vue3/src/components/UserLimitTag.vue
new file mode 100644
index 00000000..31cf3800
--- /dev/null
+++ b/Yi.Bbs.Vue3/src/components/UserLimitTag.vue
@@ -0,0 +1,31 @@
+<template>
+  <el-tag round effect="light" :type="limitItem?.type">
+    {{ limitItem?.label }}
+  </el-tag>
+</template>
+<script setup>
+import {  ref, watch } from "vue";
+const props = defineProps(["userLimit"]);
+const limitItem=ref({}) ;
+const statusTypeList = [
+  {
+    label: "正常",
+    value: "Normal",
+    type: "success",
+  },
+  {
+    label: "危险",
+    value: "Dangerous",
+    type: "warning",
+  },
+  {
+    label: "已禁止",
+    value: "Ban",
+    type: "danger",
+  },
+];
+
+watch(()=>props,()=>{
+    limitItem.value = statusTypeList.filter((item) => item.value === props.userLimit)[0];
+},  {immediate:true,deep:true});
+</script>
\ No newline at end of file
diff --git a/Yi.Bbs.Vue3/src/components/yi-table/TableColumn.vue b/Yi.Bbs.Vue3/src/components/yi-table/TableColumn.vue
index 3c468770..0080f303 100644
--- a/Yi.Bbs.Vue3/src/components/yi-table/TableColumn.vue
+++ b/Yi.Bbs.Vue3/src/components/yi-table/TableColumn.vue
@@ -31,7 +31,6 @@ const handleAction = (command, scope) => {
       />
     </el-table-column>
   </template>
-  <!-- 其他正常列 -->
   <el-table-column
     v-else
     :show-overflow-tooltip="col.showOverflowTooltip"
diff --git a/Yi.Bbs.Vue3/src/views/home/components/PointsRanking/index.vue b/Yi.Bbs.Vue3/src/views/home/components/PointsRanking/index.vue
index d61f17f6..0f13206e 100644
--- a/Yi.Bbs.Vue3/src/views/home/components/PointsRanking/index.vue
+++ b/Yi.Bbs.Vue3/src/views/home/components/PointsRanking/index.vue
@@ -5,13 +5,12 @@
     </div>
     <div class="center">
       <div class="top">
-    
-        <!-- <el-tag effect="light" :type="userLimit.type">
-          {{ userLimit.label }}
-        </el-tag> -->
         <el-tag effect="light" type="success"
           >{{pointsData.money }} 钱钱</el-tag
         >
+
+        
+        <UserLimitTag :userLimit="pointsData.userLimit" />
       </div>
       <div class="bottom">
         <div class="name">
@@ -38,7 +37,7 @@
 <script setup name="PointsRanking">
 import { defineProps, computed } from "vue";
 import UserInfoCard from "@/components/UserInfoCard/index.vue";
-
+import UserLimitTag from "@/components/UserLimitTag.vue";
 const props = defineProps({
   pointsData: {
     type: Array,
@@ -48,29 +47,6 @@ const props = defineProps({
 
 const pointsData = computed(() => props.pointsData);
 
-const statusTypeList = [
-  {
-    label: "正常",
-    value: "Normal",
-    type: "success",
-  },
-  {
-    label: "危险",
-    value: "Dangerous",
-    type: "warning",
-  },
-  {
-    label: "已禁止",
-    value: "Ban",
-    type: "danger",
-  },
-];
-
-const getStatusInfo = (type) => {
-  return statusTypeList.filter((item) => item.value === type)[0];
-};
-
-const userLimit = computed(() => getStatusInfo(pointsData.value.userLimit));
 const userImageSrc = computed(() => {
   if (pointsData.value.icon) {
     return import.meta.env.VITE_APP_BASEAPI + "/file/" + pointsData.value.icon;
diff --git a/Yi.Bbs.Vue3/src/views/home/components/RecommendFriend/index.vue b/Yi.Bbs.Vue3/src/views/home/components/RecommendFriend/index.vue
index 706a01f8..5d65bdc4 100644
--- a/Yi.Bbs.Vue3/src/views/home/components/RecommendFriend/index.vue
+++ b/Yi.Bbs.Vue3/src/views/home/components/RecommendFriend/index.vue
@@ -15,12 +15,15 @@
             {{ friendData.userName }}
           </el-tooltip>
         </div>
-        <el-tag effect="light" :type="userLimit.type">
-          {{ userLimit.label }}
-        </el-tag>
+
+
+
+
         <el-tag effect="light" type="success"
           >等级{{ friendData.level }}</el-tag
         >
+
+        <UserLimitTag :userLimit="friendData.userLimit" />
       </div>
     </div>
     <div class="right">
@@ -35,7 +38,7 @@
 <script setup name="RecommendFriend">
 import { defineProps, computed } from "vue";
 import UserInfoCard from "@/components/UserInfoCard/index.vue";
-
+import UserLimitTag from "@/components/UserLimitTag.vue";
 const props = defineProps({
   friendData: {
     type: Array,
@@ -43,29 +46,6 @@ const props = defineProps({
   },
 });
 
-const statusTypeList = [
-  {
-    label: "正常",
-    value: "Normal",
-    type: "success",
-  },
-  {
-    label: "危险",
-    value: "Dangerous",
-    type: "warning",
-  },
-  {
-    label: "已禁止",
-    value: "Ban",
-    type: "danger",
-  },
-];
-
-const getStatusInfo = (type) => {
-  return statusTypeList.filter((item) => item.value === type)[0];
-};
-
-const userLimit = computed(() => getStatusInfo(props.friendData.userLimit));
 const userImageSrc = computed(() => {
   if (props.friendData.icon) {
     return import.meta.env.VITE_APP_BASEAPI + "/file/" + props.friendData.icon;
diff --git a/Yi.Bbs.Vue3/src/views/profile/Index.vue b/Yi.Bbs.Vue3/src/views/profile/Index.vue
index 8302663e..20abf36a 100644
--- a/Yi.Bbs.Vue3/src/views/profile/Index.vue
+++ b/Yi.Bbs.Vue3/src/views/profile/Index.vue
@@ -80,9 +80,7 @@
                   <el-tag effect="light" type="success"
           >{{state.user.level }} 等级</el-tag
         >
-        <el-tag effect="light" type="success">
-          {{ state.user.userLimit }} 限制
-        </el-tag>
+        <UserLimitTag :userLimit="state.user.userLimit"/>
 
         <el-tag effect="light" type="success"
           >{{state.user.money }} 钱钱</el-tag
@@ -204,6 +202,7 @@ import { useRoute } from "vue-router";
 import useAuths from "@/hooks/useAuths";
 const { isLogin } = useAuths();
 import useUserStore from "@/stores/user";
+import UserLimitTag from "@/components/UserLimitTag.vue";
 const route = useRoute();
 const userStore=useUserStore();
 const activeTab = ref("userinfo");