feat:增加校验及优化超长展示效果

src/views/marketing/apps/components/domainCollapse.vue

@@ -10,7 +10,7 @@
             <el-tag v-if="item.sourceType == 2" @click="getDomainList(item)" effect="light" :closable="domainDeletable"
             @close="handleDeleteDomain(item, 'domain')" color="#f4f4f4" round class="ml-1 cursor-pointer"
             style="margin-bottom: 4px;">
-            {{ item.domain }}
+              <span class="ellipsis">{{ item.domain }}</span>
           </el-tag>
           <!-- 分组域名 -->
           <el-popover v-else width="200" trigger="hover" placement="top">
@@ -21,7 +21,7 @@
               <el-tag @click="getDomainList(item)" effect="light" :closable="domainDeletable"
                 @close="handleDeleteDomain(item, 'group')" color="#f4f4f4" round class="ml-1 cursor-pointer"
                 style="margin-bottom: 4px;">
-                {{ item.groupName }}
+                <span class="ellipsis">{{ item.groupName }}</span>
               </el-tag>
             </template>
           </el-popover>
@@ -167,4 +167,13 @@ const addDomain = (data: DomianItem[], type: 'group' | 'domain') => {
 .el-collapse-item__content {
   padding: 0;
 }
+.ellipsis {
+  max-width: 780px;
+  display: -webkit-box;          /* 使用弹性盒子布局 */
+  -webkit-box-orient: vertical;  /* 垂直方向排列 */
+  -webkit-line-clamp: 1;         /* 限制显示的行数 */
+  overflow: hidden;              /* 隐藏超出部分 */
+  text-overflow: ellipsis;       /* 超出时显示省略号 */
+  word-break: break-word;        /* 允许单词断行（可选） */
+}
 </style>

src/views/marketing/apps/components/domainEdit.vue

@@ -84,6 +84,7 @@ const dataRules = reactive({
 	domain: [
 		{ required: true, message: '域名不能为空', trigger: 'blur' },
 		{ validator: rule.domain, trigger: 'blur' },
+		{ validator: rule.overLength, trigger: 'blur' },
 	],
 });
 const onCancel = () => {

src/views/marketing/apps/components/ipCollapse.vue

@@ -11,6 +11,7 @@
             <el-tag v-if="item.sourceType == 2" effect="light" :closable="ipDeletable" @close="handleDeleteIp(item)"
               color="#f4f4f4" round class="ml-1 cursor-pointer" style="margin-bottom: 4px;">
               {{ item.startIp }}{{ item.ipMode == 2 && item.endIp ? (' / ' + item.endIp.split('.').pop()) : '' }}
+              <span class="ellipsis">{{ item.startIp }}{{ item.ipMode == 2 && item.endIp ? (' / ' + item.endIp.split('.').pop()) : '' }}</span>
             </el-tag>
             <el-popover v-else width="200" trigger="hover" placement="top" @show="onLoadDetail(item)">
               <div v-if="item.list.length > 0" class="flex flex-wrap break-all">
@@ -20,7 +21,7 @@
               <template #reference>
                 <el-tag effect="light" :closable="ipDeletable" @close="handleDeleteIp(item)" color="#f4f4f4" round
                   class="ml-1 cursor-pointer" style="margin-bottom: 4px;">
-                  {{ item.groupName.length > 30 ? item.groupName.substring(0, 30) + '...' : item.groupName }}
+                <span class="ellipsis">{{ item.groupName.length > 30 ? item.groupName.substring(0, 30) + '...' : item.groupName }}</span>
                 </el-tag>
               </template>
             </el-popover>
@@ -181,4 +182,13 @@ const addIp = (data: IpItem[], sourceType: 1 | 2, ipType: '1' | '2') => {
 .el-collapse-item__content {
   padding: 0;
 }
+.ellipsis {
+  max-width: 780px;
+  display: -webkit-box;          /* 使用弹性盒子布局 */
+  -webkit-box-orient: vertical;  /* 垂直方向排列 */
+  -webkit-line-clamp: 1;         /* 限制显示的行数 */
+  overflow: hidden;              /* 隐藏超出部分 */
+  text-overflow: ellipsis;       /* 超出时显示省略号 */
+  word-break: break-word;        /* 允许单词断行（可选） */
+}
 </style>

src/views/marketing/apps/index.vue

@@ -46,7 +46,7 @@
         <el-table-column fixed="left" :label="t('marketingApps.id')" prop="id" width="80" show-overflow-tooltip>
           <template #default="{ row }">{{ row.id }}</template>
         </el-table-column>
-        <el-table-column :label="t('marketingApps.appId')" prop="appId" width="120" show-overflow-tooltip>
+        <el-table-column :label="t('marketingApps.appId')" prop="appId" width="220" show-overflow-tooltip>
           <template #default="{ row }">{{ row.appId }}</template>
         </el-table-column>
         <el-table-column :label="t('marketingApps.appImg')" prop="appImg" width="150" show-overflow-tooltip>
@@ -78,7 +78,7 @@
               :inactive-value="false" @change="handleChange(row)" />
           </template>
         </el-table-column>
-        <el-table-column :label="'域名集合'" prop="domains" width="280" show-overflow-tooltip>
+        <el-table-column :label="'域名集合'" prop="domains" width="280">
           <template #default="{ row }">
             <DomainCell :domainList="row.domains" :rowData="row" @refresh="getDataList()" />
           </template>
@@ -88,7 +88,7 @@
             <IpCell :ipList="row.ips" :rowData="row" @refresh="getDataList()" />
           </template>
         </el-table-column>
-        <el-table-column :label="'触发频率'" prop="triggerNum" width="150" show-overflow-tooltip>
+        <el-table-column :label="'触发频率'" prop="triggerNum" width="120" show-overflow-tooltip>
           <template #default="{ row }">
             <!-- <el-input-number v-model="row.triggerNum" :max=20 /> -->
              {{ row.triggerNum }}