perf: 样式调整

package.json

@@ -19,6 +19,7 @@
     "dayjs": "^1.11.7",
     "dompurify": "^3.2.6",
     "echarts": "^5.6.0",
+    "element-resize-detector": "^1.2.4",
     "html2canvas": "^1.4.1",
     "jspdf": "^3.0.1",
     "lodash-es": "^4.17.21",

pnpm-lock.yaml

@@ -32,6 +32,9 @@ importers:
       echarts:
         specifier: ^5.6.0
         version: 5.6.0
+      element-resize-detector:
+        specifier: ^1.2.4
+        version: 1.2.4
       html2canvas:
         specifier: ^1.4.1
         version: 1.4.1
@@ -1462,6 +1465,9 @@ packages:
     resolution: {integrity: sha512-hCEtSWF9Xin1mVIrgCAwJhIJxURWOu3odjKsv+9TXofdJly0vO9Di87hnkChwi44v0+LPzHtNOjoCUYb36fBhg==}
     engines: {node: '>=0.10.0'}
 
+  batch-processor@1.0.0:
+    resolution: {integrity: sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==}
+
   big.js@5.2.2:
     resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
 
@@ -2005,6 +2011,9 @@ packages:
   electron-to-chromium@1.4.284:
     resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==}
 
+  element-resize-detector@1.2.4:
+    resolution: {integrity: sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==}
+
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
@@ -7270,6 +7279,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  batch-processor@1.0.0: {}
+
   big.js@5.2.2: {}
 
   binary-extensions@2.2.0: {}
@@ -7910,6 +7921,10 @@ snapshots:
 
   electron-to-chromium@1.4.284: {}
 
+  element-resize-detector@1.2.4:
+    dependencies:
+      batch-processor: 1.0.0
+
   emoji-regex@8.0.0: {}
 
   emoji-regex@9.2.2: {}

src/components/text-over-tips/index.vue

@@ -0,0 +1,141 @@
+<template>
+  <a-tooltip :disabled="isShowBtn || (!isShowBtn && disabled)" :placement="props.placement">
+    <template #content>
+      <div :style="contentStyle" class="tip-content">{{ props.context }}</div>
+    </template>
+    <div class="overflow-hidden">
+      <div v-bind="$attrs" ref="Text" :class="`${isShow ? '' : `line-${props.line}`} `" class="overflow-text">
+        {{ props.context }}
+      </div>
+      <div
+        v-if="isShowBtn && !disabled"
+        class="color-#8C8C8C flex items-center cursor-pointer mt-2px"
+        @click="
+          () => {
+            isShow = !isShow;
+          }
+        "
+      >
+        {{ isShow ? '收起' : '展开' }}
+        <icon-up size="16" :class="{ active: isShow }" class="ml-2px color-#8C8C8C" />
+      </div>
+    </div>
+  </a-tooltip>
+</template>
+
+<script setup>
+import { ref, reactive, toRefs, onBeforeMount, onMounted, watchEffect, computed, watch, nextTick, defineProps } from 'vue';
+import elementResizeDetectorMaker from 'element-resize-detector';
+
+const props = defineProps({
+  context: {
+    type: String,
+    default: '',
+  },
+  placement: {
+    type: String,
+    default: 'bottom',
+  },
+  line: {
+    type: Number,
+    default: 1,
+  },
+  maxHeight: {
+    type: [String, Number],
+    default: '',
+  },
+  maxWidth: {
+    type: [String, Number],
+    default: '',
+  },
+  isShowBtn: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const data = reactive({});
+const isShow = ref(false);
+const contentStyle = computed(() => {
+  let style = {
+    'max-height': props.maxHeight + 'px',
+    'max-width': props.maxWidth + 'px',
+    overflow: 'auto',
+    padding: '1px 0',
+  };
+  return props.maxHeight || props.maxWidth ? style : {};
+});
+const disabled = ref(true);
+const Text = ref(null);
+const textWidth = ref();
+watch(
+  [() => props.context, textWidth],
+  async () => {
+    if (props.context) {
+      await nextTick();
+      nextTick(() => {
+        if (props.line < 2) {
+          if (Text.value?.clientWidth < Text.value?.scrollWidth) {
+            disabled.value = false;
+          } else {
+            disabled.value = true;
+          }
+        } else {
+          if (Text.value?.clientHeight < Text.value?.scrollHeight) {
+            disabled.value = false;
+          } else {
+            disabled.value = true;
+          }
+        }
+      });
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+onBeforeMount(() => {});
+onMounted(async () => {
+  await nextTick();
+  const erd = elementResizeDetectorMaker();
+  if (Text.value) {
+    erd.listenTo(Text.value, () => {
+      const _width = Text.value.getBoundingClientRect().width;
+      textWidth.value = _width;
+    });
+  }
+});
+watchEffect(() => {});
+defineExpose({
+  ...toRefs(data),
+});
+</script>
+<style scoped lang="scss">
+.overflow-text {
+  display: inline-block;
+  font-family: $font-family-regular;
+  width: 100%;
+  vertical-align: middle;
+  font-style: normal;
+  box-sizing: border-box;
+  white-space: pre-line;
+  &.line-1 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &.line-2 {
+    @include multi-ellipsis(2);
+  }
+  &.line-3 {
+    @include multi-ellipsis(3);
+  }
+}
+.tip-content {
+  white-space: pre-line;
+}
+.active {
+  transform: rotate(-180deg);
+}
+</style>

src/router/routes/modules/agent.ts

@@ -39,7 +39,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           requireLogin: true,
           hideFooter: true,
           id: MENU_GROUP_IDS.AGENT,
-          isAgentRoute: true
+          isAgentRoute: true,
+          hideInMenu: true,
         },
       },
           
@@ -53,7 +54,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
         requireLogin: true,
         hideFooter: true,
         id: MENU_GROUP_IDS.AGENT,
-        isAgentRoute: true
+        isAgentRoute: true,
+                  hideInMenu: true,
       },
     },
     ],

src/views/agent/index/index.vue

@@ -22,14 +22,14 @@
                 :xl="6"
                 :xxl="4"
                 v-for="(product, k) in item.agent_products">
-          <div class="card-container cursor-pointer" @click="goDetail(product?.type, product?.id)">
+          <div class="card-container cursor-pointer !h-252px" @click="goDetail(product?.type, product?.id)">
               <img
                 class="card-image h-120px object-contain w-100% mb-8px bg-#F0EDFF"
                 :src="product?.icon_url"
               />
             <div class="card-content">
               <div class="card-title mb-4px">{{ product?.name }}</div>
-              <div class="card-description mb-8px">{{ product?.description }}</div>
+              <TextoverTips :context="product.description" class="card-description mb-8px color-#737478 text-14px lh-22px font-400" :line="2" />
             </div>
 
             <div class="card-footer">
@@ -64,7 +64,8 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
 import { getAgentList } from '@/api/all/agent';
-import { formatNumberShow } from "@/utils/tools"
+import { formatNumberShow } from "@/utils/tools";
+import TextoverTips from "@/components/text-over-tips";
 
 const router = useRouter();
 

src/views/agent/index/style.scss

@@ -42,22 +42,13 @@
 
   .card-content {
     flex: 1;
-    overflow: hidden;
+    // overflow: hidden;
 
     .card-title {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
-
-    .card-description {
-      height: 40px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-    }
   }
 
 
@@ -87,7 +78,7 @@
 
   .card-footer {
     width: 100%;
-    height: 100%;
+    // height: 100%;
     display: inline-flex;
     justify-content: space-between;
     align-items: center;