fix:页面细节调整

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

@@ -1,28 +1,32 @@
 <template>
-	<el-dialog
-		:title="type === 'Edit' ? '修改域名' : '添加域名'"
-		width="600"
-		v-model="props.open"
-		:close-on-click-modal="false"
-		:destroy-on-close="true"
-        @close="onCancel"
-		draggable
-	>
-		<el-form ref="menuDialogFormRef" :rules="dataRules" :model="state.ruleForm" v-loading="loading">
-			<el-segmented v-model="activeName" :options="[t('marketingConfig.grouping'), t('marketingConfig.domain')]" size="default" />
+	<el-dialog :title="type === 'Edit' ? '修改域名' : '添加域名'" width="600" v-model="props.open" :close-on-click-modal="false"
+		:destroy-on-close="true" @close="onCancel" draggable>
+		<el-form style="height: 80px;" ref="dialogFormRef" :rules="dataRules" :model="state.ruleForm"
+			v-loading="loading">
+			<div class="custom-style">
+				<el-segmented v-model="activeName"
+					:options="[t('marketingConfig.grouping'), t('marketingConfig.domain')]" size="default">
+					<template #default="scope">
+						<div style="min-width: 50px; line-height: 32px;">{{ scope.item }}</div>
+					</template>
+				</el-segmented>
+			</div>
 			<el-form-item label="" prop="grouping" v-if="activeName === t('marketingConfig.grouping')">
-				<el-select v-model="state.ruleForm.groupingTip" :placeholder="t('marketingConfig.groupingTip')" clearable>
+				<el-select v-model="state.ruleForm.groupingTip" :placeholder="t('marketingConfig.groupingTip')"
+					clearable>
 					<el-option v-for="item in listSelect" :key="item.value" :label="item.label" :value="item.value" />
 				</el-select>
 			</el-form-item>
-			<el-form-item label="" prop="domain" v-else> 
-				<el-input v-model="state.ruleForm.domain" type="text" :placeholder="t('marketingConfig.domainTip')"></el-input>
+			<el-form-item label="" prop="domain" v-else>
+				<el-input v-model="state.ruleForm.domain" type="text"
+					:placeholder="t('marketingConfig.domainTip')"></el-input>
 			</el-form-item>
 		</el-form>
 		<template #footer>
 			<span class="dialog-footer">
 				<el-button @click="onCancel">{{ t('common.cancelButtonText') }}</el-button>
-				<el-button type="primary" @click="onSubmit" :disabled="loading">{{ t('common.confirmButtonText') }}</el-button>
+				<el-button type="primary" @click="onSubmit" :disabled="loading">{{ t('common.confirmButtonText')
+					}}</el-button>
 			</span>
 		</template>
 	</el-dialog>
@@ -34,14 +38,14 @@ import { info, getAppList, save } from '/@/api/marketing/config';
 import { useMessage } from '/@/hooks/message';
 
 // 定义子组件向父组件传值/事件
-const emit = defineEmits(['update:open','onsuccess']);
+const emit = defineEmits(['update:open', 'onsuccess']);
 const { t } = useI18n();
 
 // 定义变量内容
 const loading = ref(false);
 const type = ref('add'); // 'add' or 'edit'
 const activeName = ref(t('marketingConfig.grouping'));
-const menuDialogFormRef = ref();
+const dialogFormRef = ref();
 const listSelect = ref([
 	{
 		value: 'group1',
@@ -95,7 +99,7 @@ const onSubmit = async () => {
 		// await save(state.ruleForm);
 		useMessage().success(t(state.ruleForm.id ? 'common.editSuccessText' : 'common.addSuccessText'));
 		emit('onsuccess');
-        onCancel();
+		onCancel();
 	} catch (err) {
 		useMessage().error(err.msg);
 	} finally {
@@ -103,8 +107,30 @@ const onSubmit = async () => {
 	}
 };
 </script>
-<style>
+<style scoped>
 .apps-loadmore.el-select-dropdown .el-scrollbar__wrap {
 	height: 330px !important;
 }
+
+.custom-style {
+	margin-top: 14px;
+
+	.el-segmented__item {
+		border-right: 1px solid rgba(230, 230, 230, 1);
+		min-width: 72px;
+		flex: unset;
+	}
+
+	.el-segmented {
+		border: 1px solid rgba(230, 230, 230, 1);
+		border-bottom: unset;
+		--el-segmented-bg-color: #ffffff;
+		--el-segmented-item-hover-bg-color: rgba(22, 122, 240, 0.1);
+		--el-segmented-item-selected-color: rgba(22, 122, 240, 1);
+		--el-segmented-item-hover-color: rgba(22, 122, 240, 1);
+		--el-segmented-item-selected-bg-color: rgba(22, 122, 240, 0.1);
+		--el-border-radius-base: 4px 4px 0 0;
+		--el-segmented-padding: 0;
+	}
+}
 </style>

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

@@ -2,15 +2,15 @@
   <div class="apps-form">
     <el-dialog :title="'修改营销配置'" width="880" v-model="visible" :close-on-click-modal="false" :destroy-on-close="true"
       draggable>
-      <el-form ref="menuDialogFormRef" :model="state.ruleForm" class="demo-form-inline" v-loading="loading">
+      <el-form ref="appDialogFormRef" :model="state.ruleForm" class="demo-form-inline" v-loading="loading">
         <el-form-item :label="'应用名称'" prop="appName">
           <el-input style="width: 200px;" v-model="state.ruleForm.appName" disabled />
         </el-form-item>
         <el-row :gutter="20" style="margin-bottom: 15px;">
           <el-col :span="12">
-            <el-form-item :label="'营销开关'" prop="isMarketing">
-              <el-switch v-model="state.ruleForm.isMarketing" style="--el-switch-on-color: rgb(48, 185, 113);"
-                inline-prompt :active-value="1" :inactive-value="0" />
+            <el-form-item :label="'营销开关'" prop="launch">
+              <el-switch v-model="state.ruleForm.launch" style="--el-switch-on-color: rgb(48, 185, 113);"
+                inline-prompt :active-value="true" :inactive-value="false" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -34,60 +34,88 @@
             </el-form-item>
           </el-col>
         </el-row>
-      </el-form>
-      <JCollapse :data="[
-        { title: 'IP集合', id: '1' },
-      ]" @update="(item: any) => listEditOpen = true" @delete="(item: any) => ipDeletable = !ipDeletable"
-        :deleteText="ipDeletable ? '取消' : t('marketingConfig.deleteText')" :updateText="'新增'" style="margin-top: 30px;"
-        :activeNames="['1']">
-        <template #default>
-          <div class="border-b p-2 items-center flex flex-wrap collapse-group">
-            <div class="collapse-group-name">白名单：</div>
-            <div class="tag-content">
-              <template v-for="item in ips.whitelist" :key="item.id">
-                <!-- 具体IP(段) -->
-                <el-tag v-if="item.sourceType == 2" @click="getIpList(item)" effect="light" :closable="ipDeletable"
-                  @close="handleDelectIp(item)" color="#f4f4f4" round class="ml-1 cursor-pointer"
-                  style="margin-bottom: 4px;">
-                  {{ item.startIp }}{{ item.ipMode == 2 ? (' / ' + item.endIp.split('.').pop()) : '' }}
-                </el-tag>
-                <!-- 分组 -->
-                <el-popover v-else width="200" trigger="hover" placement="top">
-                  <div class="flex flex-wrap">
-                    {{ item.groupName }}
-                  </div>
-                  <template #reference>
-                    <el-tag @click="getIpList(item)" effect="light" :closable="ipDeletable"
-                      @close="handleDelectIp(item)" color="#f4f4f4" round class="ml-1 cursor-pointer"
-                      style="margin-bottom: 4px;">
+        <JCollapse :data="[
+          { title: 'IP集合', id: '1' },
+        ]" @update="(item: any) => listEditOpen = true" @delete="(item: any) => ipDeletable = !ipDeletable"
+          :deleteText="ipDeletable ? '取消' : t('marketingConfig.deleteText')" :updateText="'新增'"
+          style="margin-top: 25px;" :activeNames="['1']">
+          <template #default>
+            <div class="border-b p-2 items-center flex flex-wrap collapse-group">
+              <div class="collapse-group-name">白名单：</div>
+              <div class="tag-content">
+                <template v-for="item in ips.whitelist" :key="item.id">
+                  <!-- 具体IP(段) -->
+                  <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.split('.').pop()) : '' }}
+                  </el-tag>
+                  <!-- 分组 -->
+                  <el-popover v-else width="200" trigger="hover" placement="top">
+                    <div class="flex flex-wrap">
                       {{ item.groupName }}
-                    </el-tag>
-                  </template>
-                </el-popover>
-              </template>
+                    </div>
+                    <template #reference>
+                      <el-tag @click="getIpList(item)" effect="light" :closable="ipDeletable"
+                        @close="handleDeleteIp(item)" color="#f4f4f4" round class="ml-1 cursor-pointer"
+                        style="margin-bottom: 4px;">
+                        {{ item.groupName }}
+                      </el-tag>
+                    </template>
+                  </el-popover>
+                </template>
+              </div>
             </div>
-          </div>
-          <div class="p-2 items-center flex flex-wrap collapse-group">
-            <div class="collapse-group-name">黑名单：</div>
-            <div class="tag-content">
-              <template v-for="item in ips.blacklist" :key="item.id">
-                <!-- 具体IP(段) -->
-                <el-tag v-if="item.sourceType == 2" @click="getIpList(item)" effect="light" :closable="ipDeletable"
-                  @close="handleDelectIp(item)" color="#f4f4f4" round class="ml-1 cursor-pointer"
+            <div class="p-2 items-center flex flex-wrap collapse-group">
+              <div class="collapse-group-name">黑名单：</div>
+              <div class="tag-content">
+                <template v-for="item in ips.blacklist" :key="item.id">
+                  <!-- 具体IP(段) -->
+                  <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.split('.').pop()) : '' }}
+                  </el-tag>
+                  <!-- 分组 -->
+                  <el-popover v-else width="200" trigger="hover" placement="top">
+                    <div class="flex flex-wrap">
+                      {{ item.groupName }}
+                    </div>
+                    <template #reference>
+                      <el-tag @click="getIpList(item)" effect="light" :closable="ipDeletable"
+                        @close="handleDeleteIp(item)" color="#f4f4f4" round class="ml-1 cursor-pointer"
+                        style="margin-bottom: 4px;">
+                        {{ item.groupName }}
+                      </el-tag>
+                    </template>
+                  </el-popover>
+                </template>
+              </div>
+            </div>
+          </template>
+        </JCollapse>
+        <JCollapse :data="[
+          { title: '域名集合', id: '1' },
+        ]" @update="(item) => domainEditOpen = true" @delete="(item) => domainDeletable = !domainDeletable"
+          :deleteText="domainDeletable ? '取消' : t('marketingConfig.deleteText')" :updateText="'新增'"
+          style="margin-top: 25px;" :activeNames="['1']">
+          <template #default>
+            <div class="p-2 items-center flex flex-wrap">
+              <template v-for="item in domains" :key="item.id">
+                <!-- 具体域名 -->
+                <el-tag v-if="item.sourceType == 2" @click="getIpList(item)" effect="light" :closable="domainDeletable"
+                  @close="handleDeleteDomain(item)" color="#f4f4f4" round class="ml-1 cursor-pointer"
                   style="margin-bottom: 4px;">
-                  {{ item.startIp }}{{ item.ipMode == 2 ? (' / ' + item.endIp.split('.').pop()) : '' }}
+                  {{ item.domain }}
                 </el-tag>
-                <!-- 分组 -->
+                <!-- 分组域名 -->
                 <el-popover v-else width="200" trigger="hover" placement="top">
                   <div class="flex flex-wrap">
-                    <!-- <span v-for="ip in item.ips" :key="ip" class="ml-2">
-                      {{ ip }}
-                    </span> -->
                     {{ item.groupName }}
                   </div>
                   <template #reference>
-                    <el-tag @click="getIpList(item)" effect="light" :closable="ipDeletable"
-                      @close="handleDelectIp(item)" color="#f4f4f4" round class="ml-1 cursor-pointer"
+                    <el-tag @click="getIpList(item)" effect="light" :closable="domainDeletable"
+                      @close="handleDeleteDomain(item)" color="#f4f4f4" round class="ml-1 cursor-pointer"
                       style="margin-bottom: 4px;">
                       {{ item.groupName }}
                     </el-tag>
@@ -95,30 +123,18 @@
                 </el-popover>
               </template>
             </div>
-          </div>
-        </template>
-      </JCollapse>
-      <JCollapse :data="[
-        { title: '域名集合', id: '1' },
-      ]" @update="(item: any) => domainEditOpen = true" @delete="(item: any) => domainDeletable = !domainDeletable"
-        :deleteText="domainDeletable ? '取消' : t('marketingConfig.deleteText')" :updateText="'新增'"
-        style="margin-top: 30px;" :activeNames="['1']">
-        <template #default>
-          <div class="p-2 items-center flex flex-wrap">
-            <el-tag v-for="item in domains" :key="item" @close="handleDelectDomain(item)" effect="light"
-              :closable="domainDeletable" style="margin-bottom: 4px;" color="#f4f4f4" round class="ml-1 cursor-pointer">
-              {{ item.sourceType == 2 ? item.domain : item.groupName }}
-            </el-tag>
-          </div>
-        </template>
-      </JCollapse>
-      <div class="title">备注</div>
-      <el-input :rows="4" v-model="state.ruleForm.remark" type="textarea" placeholder="请输入备注"></el-input>
+          </template>
+        </JCollapse>
+        <div class="title">备注</div>
+        <el-form-item prop="triggerRule">
+          <el-input :rows="4" v-model="state.ruleForm.remark" type="textarea" placeholder="请输入备注"></el-input>
+        </el-form-item>
+      </el-form>
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="visible = false">{{ t('common.cancelButtonText') }}</el-button>
           <el-button type="primary" @click="onSubmit" :disabled="loading">{{ t('common.confirmButtonText')
-            }}</el-button>
+          }}</el-button>
         </span>
       </template>
     </el-dialog>
@@ -158,6 +174,23 @@ interface DomianItem {
   groupName: String;
 }
 
+interface Form {
+  id: String;
+  appId: String;
+  appName: String;
+  appImg: String;
+  appUrl: String;
+  backUpUrl: String;
+  domainType: String;
+  domainLimit: Boolean;
+  launch: Boolean;
+  triggerRule: Number;
+  triggerNum: Number;
+  remark: String;
+  ips: IpItem[];
+  domains: DomianItem[];
+}
+
 // 定义子组件向父组件传值/事件
 const emit = defineEmits(['refresh']);
 const { t } = useI18n();
@@ -165,8 +198,7 @@ const { t } = useI18n();
 // 定义变量内容
 const visible = ref(false);
 const loading = ref(false);
-const add = ref(false);
-const menuDialogFormRef = ref();
+const appDialogFormRef = ref();
 const ips = ref<Ips>({
   blacklist: [],
   whitelist: []
@@ -174,8 +206,6 @@ const ips = ref<Ips>({
 const domains = ref<DomianItem[]>([]);
 const ipDeletable = ref(false);// 控制 IP 列表项是否可删除
 const domainDeletable = ref(false);// 控制域名列表项是否可删除
-const ipAdd = ref(false);
-const domainAdd = ref(false);
 const listEditOpen = ref(false);
 const domainEditOpen = ref(false);
 
@@ -192,57 +222,34 @@ const triggerRules = [
 
 // 定义需要的数据
 const state = reactive({
-  ruleForm: {
-    marketingEnabled: false,
-    domainRestriction: false,
-    ipSets: [''], // ip集合
-    domainSets: [''], // ip集合
-    remark: '',
-  },
-  domainSets: [] as any[], // 应用下拉框列表
+  ruleForm: {} as Form,
 });
 
-const handleDelect = () => {
-  console.log('delect')
-}
-
-const getIpList = (detail) => {
+const getIpList = (detail: IpItem) => {
   if (detail.sourceType == 1) {
     // 获取ip组
     console.log(detail.groupId);
-
   }
 }
 
 // 删除ip
-const handleDelectIp = (deleteItem: IpItem) => {
+const handleDeleteIp = (deleteItem: IpItem) => {
   ips.value.whitelist = ips.value.whitelist.filter((item: any) => item.id != deleteItem.id);
   ips.value.blacklist = ips.value.blacklist.filter((item: any) => item.id != deleteItem.id);
 }
 
 // 删除域名
-const handleDelectDomain = (deleteItem: DomianItem) => {
-  console.log('delectDomain')
+const handleDeleteDomain = (deleteItem: DomianItem) => {
   domains.value = domains.value.filter((item: any) => item.id != deleteItem.id);
 }
 
 // 打开弹窗
 const openDialog = async (type: string, row: any, str: string = 'domain') => {
-  state.ruleForm = {
-    marketingEnabled: false,
-    domainRestriction: false,
-    ipSets: [''],
-    domainSets: [''],
-    remark: '',
-  };
   visible.value = true;
-
   state.ruleForm = row;
   console.log(row);
   ips.value.blacklist = row.ips.filter((item: any) => item.ipType == '1');
   ips.value.whitelist = row.ips.filter((item: any) => item.ipType == '2');
-  console.log(ips.value);
-
   domains.value = row.domains;
 };
 
@@ -270,27 +277,6 @@ defineExpose({
 });
 </script>
 <style lang="scss">
-.config-container {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-  font-size: 14px;
-  font-weight: 400;
-  width: 100%;
-  justify-content: start;
-}
-
-.config-actions {
-  width: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.apps-loadmore.el-select-dropdown .el-scrollbar__wrap {
-  height: 330px !important;
-}
-
 .apps-form {
   .collapse-group {
     display: flex;
@@ -298,10 +284,6 @@ defineExpose({
     align-items: first baseline;
   }
 
-  .collapse-group-name {
-    // width: 100px;
-  }
-
   .tag-content {
     flex: 1;
   }
@@ -316,16 +298,12 @@ defineExpose({
     }
   }
 
-  .demo-form-inline .el-switch {
-    margin-right: 50px;
-  }
-
   .title {
     line-height: 20px;
     font-family: Source Han Sans SC;
     font-size: 14px;
     color: rgba(18, 18, 18, 1);
-    margin: 30px 0 12px;
+    margin: 25px 0 12px;
   }
 
   .el-collapse-item__content {

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

@@ -1,31 +1,35 @@
 <template>
 	<el-dialog :title="type === 'Edit' ? '修改IP' : '添加IP'" width="600" v-model="props.open" :close-on-click-modal="false"
 		:destroy-on-close="true" @close="onCancel" draggable>
-		<el-form ref="menuDialogFormRef" :rules="dataRules" :model="state.ruleForm" v-loading="loading">
+		<el-form style="height: 128px;" ref="menuDialogFormRef" :rules="dataRules" :model="state.ruleForm" v-loading="loading">
 			<el-form-item label="" prop="listType">
 				<el-radio-group v-model="state.ruleForm.listType">
 					<el-radio value="1">白名单</el-radio>
 					<el-radio value="2">黑名单</el-radio>
 				</el-radio-group>
 			</el-form-item>
-			<el-segmented v-model="activeName" :options="[t('marketingConfig.grouping'), t('marketingConfig.ipSegment')]"
-				size="default">
-				<template #default="scope">
-					<span>{{ scope.item }}</span>
-					<el-icon v-if="scope.item === t('marketingConfig.ipSegment')" size="12" style="margin-left: 5px;">
-						<el-tooltip effect="light" content="输入127.0.0.1/24格式代表网段" placement="top">
-							<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
-								<path d="M7 14C8.93298 14 10.683 13.2165 11.9497 11.9497C13.2165 10.683 14 8.93298 14 7C14 5.06702 13.2165 3.31702 11.9497 2.05025C10.683 0.783503 8.93298 0 7 0C5.06702 0 3.31702 0.783503 2.05025 2.05025C0.783503 3.31702 0 5.06702 0 7C0 8.93298 0.783503 10.683 2.05025 11.9497C3.31702 13.2165 5.06702 14 7 14Z" fill="#1B4D88" fill-opacity="0.4"/>
-								<path fill-rule="evenodd" clip-rule="evenodd" d="M6.99957 1.94434C7.5365 1.94434 7.97179 2.37962 7.97179 2.91656C7.97179 3.4535 7.5365 3.88878 6.99957 3.88878C6.46263 3.88878 6.02734 3.4535 6.02734 2.91656C6.02734 2.37962 6.46263 1.94434 6.99957 1.94434Z" fill="white"/>
-								<path d="M6.99957 1.94434C7.5365 1.94434 7.97179 2.37962 7.97179 2.91656C7.97179 3.4535 7.5365 3.88878 6.99957 3.88878C6.46263 3.88878 6.02734 3.4535 6.02734 2.91656C6.02734 2.37962 6.46263 1.94434 6.99957 1.94434ZM6.99957 2.33322C6.6774 2.33322 6.41623 2.5944 6.41623 2.91656C6.41623 3.23872 6.6774 3.49989 6.99957 3.49989C7.32173 3.49989 7.5829 3.23872 7.5829 2.91656C7.5829 2.5944 7.32173 2.33322 6.99957 2.33322Z" fill="white"/>
-								<path d="M7.19477 10.8888V5.44434H6.80588H6.41699" fill="white"/>
-								<path d="M6.41645 10.8887V6.22206C5.98689 6.22206 5.63867 5.87384 5.63867 5.44428C5.63867 5.01473 5.98689 4.6665 6.41645 4.6665H7.19423L7.27398 4.6703C7.66608 4.71023 7.97201 5.04164 7.97201 5.44428V10.8887C7.97201 11.3183 7.70354 11.3447 7.27398 11.3447C6.84443 11.3447 6.41645 11.3183 6.41645 10.8887Z" fill="white"/>
-								<path d="M8.55566 10C8.98522 10 9.33344 10.3482 9.33344 10.7778C9.33344 11.2073 8.98522 11.5556 8.55566 11.5556H5.83344C5.40389 11.5556 5.05566 11.2073 5.05566 10.7778C5.05566 10.3482 5.40389 10 5.83344 10H8.55566Z" fill="white"/>
-							</svg>
-						</el-tooltip>
-					</el-icon>
-				</template>
-			</el-segmented>
+			<div class="custom-style">
+				<el-segmented v-model="activeName" :options="[t('marketingConfig.grouping'), t('marketingConfig.ipSegment')]"
+					size="default">
+					<template #default="scope">
+						<div style="min-width: 50px; line-height: 32px;">
+							{{ scope.item }}
+							<el-icon v-if="scope.item === t('marketingConfig.ipSegment')" size="12" style="vertical-align: middle;">
+								<el-tooltip effect="light" content="输入127.0.0.1/24格式代表网段" placement="top">
+									<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+										<path d="M7 14C8.93298 14 10.683 13.2165 11.9497 11.9497C13.2165 10.683 14 8.93298 14 7C14 5.06702 13.2165 3.31702 11.9497 2.05025C10.683 0.783503 8.93298 0 7 0C5.06702 0 3.31702 0.783503 2.05025 2.05025C0.783503 3.31702 0 5.06702 0 7C0 8.93298 0.783503 10.683 2.05025 11.9497C3.31702 13.2165 5.06702 14 7 14Z" fill="#1B4D88" fill-opacity="0.4"/>
+										<path fill-rule="evenodd" clip-rule="evenodd" d="M6.99957 1.94434C7.5365 1.94434 7.97179 2.37962 7.97179 2.91656C7.97179 3.4535 7.5365 3.88878 6.99957 3.88878C6.46263 3.88878 6.02734 3.4535 6.02734 2.91656C6.02734 2.37962 6.46263 1.94434 6.99957 1.94434Z" fill="white"/>
+										<path d="M6.99957 1.94434C7.5365 1.94434 7.97179 2.37962 7.97179 2.91656C7.97179 3.4535 7.5365 3.88878 6.99957 3.88878C6.46263 3.88878 6.02734 3.4535 6.02734 2.91656C6.02734 2.37962 6.46263 1.94434 6.99957 1.94434ZM6.99957 2.33322C6.6774 2.33322 6.41623 2.5944 6.41623 2.91656C6.41623 3.23872 6.6774 3.49989 6.99957 3.49989C7.32173 3.49989 7.5829 3.23872 7.5829 2.91656C7.5829 2.5944 7.32173 2.33322 6.99957 2.33322Z" fill="white"/>
+										<path d="M7.19477 10.8888V5.44434H6.80588H6.41699" fill="white"/>
+										<path d="M6.41645 10.8887V6.22206C5.98689 6.22206 5.63867 5.87384 5.63867 5.44428C5.63867 5.01473 5.98689 4.6665 6.41645 4.6665H7.19423L7.27398 4.6703C7.66608 4.71023 7.97201 5.04164 7.97201 5.44428V10.8887C7.97201 11.3183 7.70354 11.3447 7.27398 11.3447C6.84443 11.3447 6.41645 11.3183 6.41645 10.8887Z" fill="white"/>
+										<path d="M8.55566 10C8.98522 10 9.33344 10.3482 9.33344 10.7778C9.33344 11.2073 8.98522 11.5556 8.55566 11.5556H5.83344C5.40389 11.5556 5.05566 11.2073 5.05566 10.7778C5.05566 10.3482 5.40389 10 5.83344 10H8.55566Z" fill="white"/>
+									</svg>
+								</el-tooltip>
+							</el-icon>
+						</div>
+					</template>
+				</el-segmented>
+			</div>
 			<el-form-item label="" prop="grouping" v-if="activeName === t('marketingConfig.grouping')">
 				<el-select v-model="state.ruleForm.groupingTip" :placeholder="t('marketingConfig.groupingTip')"
 					clearable>
@@ -124,4 +128,26 @@ const onSubmit = async () => {
 .apps-loadmore.el-select-dropdown .el-scrollbar__wrap {
 	height: 330px !important;
 }
+
+.custom-style {
+	margin-top: 14px;
+
+	.el-segmented__item {
+		border-right: 1px solid rgba(230, 230, 230, 1);
+		min-width: 72px;
+		flex: unset;
+	}
+
+	.el-segmented {
+		border: 1px solid rgba(230, 230, 230, 1);
+		border-bottom: unset;
+		--el-segmented-bg-color: #ffffff;
+		--el-segmented-item-hover-bg-color: rgba(22, 122, 240, 0.1);
+		--el-segmented-item-selected-color: rgba(22, 122, 240, 1);
+		--el-segmented-item-hover-color: rgba(22, 122, 240, 1);
+		--el-segmented-item-selected-bg-color: rgba(22, 122, 240, 0.1);
+		--el-border-radius-base: 4px 4px 0 0;
+		--el-segmented-padding: 0;
+	}
+}
 </style>

src/views/marketing/apps/index.vue

@@ -81,12 +81,12 @@
         </el-table-column>
         <el-table-column :label="'域名集合'" prop="domains" width="280" show-overflow-tooltip>
           <template #default="{ row }">
-            <DomainList :domainList="row.domains" />
+            <DomainCell :domainList="row.domains" />
           </template>
         </el-table-column>
         <el-table-column :label="'IP集合'" prop="ips" width="320">
           <template #default="{ row }">
-            <IpList :ipList="row.ips" />
+            <IpCell :ipList="row.ips" />
           </template>
         </el-table-column>
         <el-table-column :label="'触发频率'" prop="triggerRule" width="150" show-overflow-tooltip>
@@ -167,8 +167,8 @@ import { fetchItemList } from '/@/api/admin/dict';
 import { ref } from 'vue'
 const EditDialog = defineAsyncComponent(() => import('./components/form.vue'));
 const StatisticalDialog = defineAsyncComponent(() => import('./components/statistical.vue'));
-const IpList = defineAsyncComponent(() => import('./components/ipList.vue'));
-const DomainList = defineAsyncComponent(() => import('./components/domainList.vue'));
+const IpCell = defineAsyncComponent(() => import('./components/ipCell.vue'));
+const DomainCell = defineAsyncComponent(() => import('./components/domainCell.vue'));
 
 import { ElMessage, type TabsPaneContext } from 'element-plus'