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

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">
-          {{ 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");