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
+<UserLimitTag :userLimit="userInfo.userLimit"/>
-                effect="light"
+              
-                :type="getStatusInfo(userInfo.userLimit)?.type"
-              >
-                {{ getStatusInfo(userInfo.userLimit)?.label }}
-              </el-tag>
             </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"

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;

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;

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">
+        <UserLimitTag :userLimit="state.user.userLimit"/>
-          {{ state.user.userLimit }} 限制
-        </el-tag>
 
         <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");