feat: 优化前端用户限制组件

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>
 

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>

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}`);

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>

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"