update: 话术列表调整

src/views/ai/list.vue

@@ -17,7 +17,7 @@ import manage from './manage.vue';
 export default {
   data() {
     return {
-      activeName: 'first'
+      activeName: 'second'
     };
   },
   components: {

src/views/ai/manage.vue

@@ -9,7 +9,13 @@
     </div>
     <div class="temp-list">
       <div class="temp-item" v-for="el in tempList" :key="el.aiTemplateId">
-        <div class="temp-title">{{ el.name }}</div>
+        <div class="temp-title">
+          <el-tooltip placement="top" v-if="el.overflow">
+            <p style="max-width: 400px" slot="content">{{ el.name }}</p>
+            <p class="temp-title-text">{{ el.name }}</p>
+          </el-tooltip>
+          <template v-else>{{ el.name }}</template>
+        </div>
         <div class="temp-info">
           <p class="temp-info-text">话术ID：{{ el.aiTemplateId }}</p>
           <p class="temp-info-text">更新时间：{{ formatDateTimeByType(el.updateTime) || '--' }}</p>
@@ -106,7 +112,16 @@ export default {
     getTempList() {
       tempPageStatistics(this.search).then(res => {
         const { list, pageNum, total } = res.result || {};
-        this.tempList = list;
+        const textDom = document.createElement('span');
+        textDom.style.opacity = 0;
+        textDom.style.visibility = 'hidden';
+        document.body.appendChild(textDom);
+        this.tempList = list.map(el => {
+          textDom.innerHTML = el.name;
+          el.overflow = textDom.offsetWidth > 230;
+          return el;
+        });
+        document.body.removeChild(textDom);
         this.search.pageNum = pageNum;
         this.total = total;
       });
@@ -199,21 +214,27 @@ export default {
       margin-right: 20px;
       margin-bottom: 10px;
       width: 276px;
-      height: 150px;
-      background: #ebecf0;
-      border-radius: 4px;
+      background: #f2f3f5;
+      border-radius: 8px;
+      overflow: hidden;
       .temp-title {
         display: flex;
         justify-content: flex-start;
         align-items: center;
-        height: 48px;
         padding: 0 16px;
-        background: rgba(47, 84, 235, 0.9);
-        border-radius: 4px 4px 0px 0px;
-        font-size: 16px;
+        height: 60px;
+        font-size: 15px;
         font-weight: 500;
-        color: #fff;
-        line-height: 22px;
+        color: #ffffff;
+        line-height: 21px;
+        background: linear-gradient(319deg, #5e50ea 0%, #2f54eb 100%);
+        opacity: 0.9;
+        .temp-title-text {
+          width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
       }
       .temp-info {
         padding: 10px 16px 14px;