暂存

src/api/marketing/apps.ts

@@ -2,8 +2,8 @@ import request from '/@/utils/request';
 
 export const getDetail = (params?: Object) => {
 	return request({
-		// url: '/admin/marketing/config/page',
-		url: 'https://m1.apifoxmock.com/m1/6687089-6396408-default/marketing/apps/edit',
+		url: '/marketing/apps/edit',
+		// url: 'https://m1.apifoxmock.com/m1/6687089-6396408-default/marketing/apps/edit',
 		method: 'get',
 		params,
 	});
@@ -11,8 +11,8 @@ export const getDetail = (params?: Object) => {
 
 export const pageList = (params?: Object) => {
 	return request({
-		// url: '/app/page',
-		url: 'https://m1.apifoxmock.com/m1/6687089-6396408-default/app/page',
+		url: '/marketing/app/page',
+		// url: 'https://m1.apifoxmock.com/m1/6687089-6396408-default/app/page',
 		method: 'get',
 		params,
 	});

src/layout/navMenu/subItem.vue

@@ -2,7 +2,7 @@
 	<template v-for="val in chils">
 		<el-sub-menu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
 			<template #title>
-				<SvgIcon :name="val.meta.icon" />
+				<!-- <SvgIcon :name="val.meta.icon" /> -->
 				<span>{{ other.setMenuI18n(val) }}</span>
 			</template>
 			<sub-item :chil="val.children" />
@@ -10,12 +10,12 @@
 		<template v-else>
 			<el-menu-item :index="val.path" :key="val.path">
 				<template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
-					<SvgIcon :name="val.meta.icon" />
+					<!-- <SvgIcon :name="val.meta.icon" /> -->
 					<span>{{ other.setMenuI18n(val) }}</span>
 				</template>
 				<template v-else>
 					<a class="w100" @click.prevent="onALinkClick(val)">
-						<SvgIcon :name="val.meta.icon" />
+						<!-- <SvgIcon :name="val.meta.icon" /> -->
 						{{ other.setMenuI18n(val) }}
 					</a>
 				</template>

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

@@ -0,0 +1,43 @@
+<template>
+  <div class="flex">
+    <div class="item" v-for="item in list.slice(0, 4)" :key="item">{{item}};</div>
+    <el-link type="info">查看详情</el-link>
+  </div>
+</template>
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps(['domainList']);
+const list = ref([]);
+
+watch(
+  () => props.domainList,
+  (newVal) => {
+    list.value = [];
+    let temp = '';
+    (newVal || []).forEach(item => {
+      if (item.sourceType == '2') {
+        temp = item.domain;
+      } else {
+        temp = item.groupName;
+      }
+      list.value.push(temp);
+    });
+  },
+  { immediate: true }
+);
+</script>
+<style scoped>
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+.item {
+  box-sizing: border-box;
+  padding: 4px 0;
+  text-align: left;
+  margin-right: 20px;
+  color: #666666;
+  line-height: 18px;
+}
+</style>

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

@@ -1,41 +1,45 @@
 <template>
   <div class="apps-form">
-    <el-dialog :title="'修改营销配置'" width="880" v-model="visible" :close-on-click-modal="false" :destroy-on-close="true" draggable>
+    <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-item :label="'应用名称'" prop="appName">
           <el-input style="width: 200px;" v-model="state.ruleForm.appName" disabled />
         </el-form-item>
-        <el-form ref="menuDialogFormRef"
-          :model="state.ruleForm"
-          class="demo-form-inline"
-          v-loading="loading">
-        <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>
-        <el-form-item :label="'域名限制'" prop="domainLimit">
-          <el-switch v-model="state.ruleForm.domainLimit" style="--el-switch-on-color: rgb(48, 185, 113);" 
-            inline-prompt :active-value="true" :inactive-value="false" />
-        </el-form-item>
-        <el-form-item :label="'触发频率'" prop="triggerNum">
-          <el-input style="width: 200px;" v-model="state.ruleForm.triggerNum" :placeholder="'请输入触发频率'" clearable />
-        </el-form-item>
-        <el-form-item :label="'触发规则'" prop="triggerRule">
-          <el-select style="width: 200px;" v-model="state.ruleForm.triggerRule" placeholder="">
-            <el-option v-for="item in triggerRules" :key="item.value" :label="item.label" :value="item.value" />
-          </el-select>
-        </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>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="'域名限制'" prop="domainLimit">
+              <el-switch v-model="state.ruleForm.domainLimit" style="--el-switch-on-color: rgb(48, 185, 113);"
+                inline-prompt :active-value="true" :inactive-value="false" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="'触发频率'" prop="triggerNum">
+              <el-input style="width: 200px;" v-model="state.ruleForm.triggerNum" :placeholder="'请输入触发频率'" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="'触发规则'" prop="triggerRule">
+              <el-select style="width: 200px;" v-model="state.ruleForm.triggerRule" placeholder="">
+                <el-option v-for="item in triggerRules" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </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="t('marketingConfig.deleteText')"
-        :updateText="'新增'"
-        style="margin-top: 30px;"
-        :activeNames="['1']"
-      >
+      <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>
@@ -43,22 +47,19 @@
               <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;">
+                  @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">
-                    <!-- <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" style="margin-bottom: 4px;">
+                      @close="handleDelectIp(item)" color="#f4f4f4" round class="ml-1 cursor-pointer"
+                      style="margin-bottom: 4px;">
                       {{ item.groupName }}
                     </el-tag>
                   </template>
@@ -72,8 +73,8 @@
               <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" style="margin-bottom: 4px;">
+                  @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>
                 <!-- 分组 -->
@@ -86,8 +87,8 @@
                   </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;">
+                      @close="handleDelectIp(item)" color="#f4f4f4" round class="ml-1 cursor-pointer"
+                      style="margin-bottom: 4px;">
                       {{ item.groupName }}
                     </el-tag>
                   </template>
@@ -97,49 +98,38 @@
           </div>
         </template>
       </JCollapse>
-      <JCollapse
-        :data="[
-          { title: '域名集合', id: '1'},
-        ]"
-        @update="(item: any) => domainEditOpen = true"
-				@delete="(item: any) => domainDeletable = !domainDeletable"
-        :deleteText="t('marketingConfig.deleteText')"
-        :updateText="'新增'"
-        style="margin-top: 30px;"
-        :activeNames="['1']"
-      >
+      <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.domain }}
+            <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>
+      <el-input :rows="4" v-model="state.ruleForm.remark" type="textarea" placeholder="请输入备注"></el-input>
       <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 type="primary" @click="onSubmit" :disabled="loading">{{ t('common.confirmButtonText')
+            }}</el-button>
         </span>
       </template>
     </el-dialog>
     <ListEdit v-model:open="listEditOpen" />
-		<DomainEdit v-model:open="domainEditOpen" />
+    <DomainEdit v-model:open="domainEditOpen" />
   </div>
 </template>
 
 <script setup lang="ts" name="systemMenuDialog">
 import { ElMessage } from 'element-plus';
-import {useI18n} from 'vue-i18n';
+import { useI18n } from 'vue-i18n';
 const JCollapse = defineAsyncComponent(() => import('/@/components/JCollapse/index.vue'));
 const ListEdit = defineAsyncComponent(() => import('./listEdit.vue'));
 const DomainEdit = defineAsyncComponent(() => import('./domainEdit.vue'));
@@ -170,7 +160,7 @@ interface DomianItem {
 
 // 定义子组件向父组件传值/事件
 const emit = defineEmits(['refresh']);
-const {t} = useI18n();
+const { t } = useI18n();
 
 // 定义变量内容
 const visible = ref(false);
@@ -203,7 +193,7 @@ const triggerRules = [
 // 定义需要的数据
 const state = reactive({
   ruleForm: {
-    marketingEnabled: false, 
+    marketingEnabled: false,
     domainRestriction: false,
     ipSets: [''], // ip集合
     domainSets: [''], // ip集合
@@ -212,12 +202,12 @@ const state = reactive({
   domainSets: [] as any[], // 应用下拉框列表
 });
 
-const handleDelect = ()=>{
+const handleDelect = () => {
   console.log('delect')
 }
 
 const getIpList = (detail) => {
-  if(detail.sourceType == 1) {
+  if (detail.sourceType == 1) {
     // 获取ip组
     console.log(detail.groupId);
 
@@ -225,13 +215,13 @@ const getIpList = (detail) => {
 }
 
 // 删除ip
-const handleDelectIp = (deleteItem: IpItem)=>{
+const handleDelectIp = (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)=>{
+const handleDelectDomain = (deleteItem: DomianItem) => {
   console.log('delectDomain')
   domains.value = domains.value.filter((item: any) => item.id != deleteItem.id);
 }
@@ -239,20 +229,20 @@ const handleDelectDomain = (deleteItem: DomianItem)=>{
 // 打开弹窗
 const openDialog = async (type: string, row: any, str: string = 'domain') => {
   state.ruleForm = {
-    marketingEnabled: false, 
+    marketingEnabled: false,
     domainRestriction: false,
     ipSets: [''],
     domainSets: [''],
     remark: '',
   };
   visible.value = true;
-  
+
   state.ruleForm = row;
   console.log(row);
-  ips.value.whitelist = row.ips.filter((item: any) => item.ipType == '1');
-  ips.value.blacklist = row.ips.filter((item: any) => item.ipType == '2');
+  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;
 };
 
@@ -289,6 +279,7 @@ defineExpose({
   width: 100%;
   justify-content: start;
 }
+
 .config-actions {
   width: 50px;
   display: flex;
@@ -299,18 +290,22 @@ defineExpose({
 .apps-loadmore.el-select-dropdown .el-scrollbar__wrap {
   height: 330px !important;
 }
+
 .apps-form {
   .collapse-group {
     display: flex;
     justify-content: start;
-    align-items:first baseline;
+    align-items: first baseline;
   }
+
   .collapse-group-name {
     // width: 100px;
   }
+
   .tag-content {
     flex: 1;
   }
+
   .el-overlay {
     .el-overlay-dialog {
       .el-dialog {
@@ -320,9 +315,11 @@ defineExpose({
       }
     }
   }
+
   .demo-form-inline .el-switch {
     margin-right: 50px;
   }
+
   .title {
     line-height: 20px;
     font-family: Source Han Sans SC;

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

@@ -0,0 +1,55 @@
+<template>
+  <div style="text-align: left;">白名单:</div>
+  <div class="flex">
+    <div class="item" v-for="item in whitelist.slice(0, 4)" :key="item">{{item}};</div>
+    <el-link type="info">查看详情</el-link>
+  </div>
+  <div style="text-align: left; margin-top: 10px;">黑名单:</div>
+  <div class="flex">
+    <div class="item" v-for="item in blacklist.slice(0, 4)" :key="item">{{item}};</div>
+    <el-link type="info">查看详情</el-link>
+  </div>
+</template>
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps(['ipList']);
+
+const blacklist = ref([]);
+const whitelist = ref([]);
+
+watch(
+  () => props.ipList,
+  (newVal) => {
+    blacklist.value = [];
+    whitelist.value = [];
+    let temp = '';
+    (newVal || []).forEach(item => {
+      if (item.sourceType == 2) {
+        temp = item.startIp + (item.endIp ? '/' + item.endIp.split('.').pop() : '');
+      } else {
+        temp = item.groupName;
+      }
+      item.ipType == 1 ? blacklist.value.push(temp) : whitelist.value.push(temp);
+    });
+    console.log(blacklist);
+    console.log(whitelist);
+  },
+  { immediate: true }
+);
+</script>
+<style scoped>
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+.item {
+  width: auto;
+  box-sizing: border-box;
+  padding: 4px 0;
+  text-align: left;
+  margin-right: 20px;
+  color: #666666;
+  line-height: 18px;
+}
+</style>

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

@@ -14,7 +14,14 @@
 					<span>{{ scope.item }}</span>
 					<el-icon v-if="scope.item === t('marketingConfig.ip')" size="12" style="margin-left: 5px;">
 						<el-tooltip effect="light" content="输入127.0.0.1/24格式代表网段" placement="top">
-							<Warning />
+							<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>

src/views/marketing/apps/index.vue

@@ -3,8 +3,8 @@
     <div class="layout-padding-auto layout-padding-view">
       <el-row shadow="hover" v-show="showSearch" class="ml10">
         <el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
-          <el-form-item :label="$t('marketingApps.name')" prop="domain">
-            <el-input :placeholder="$t('marketingApps.inputNameTip')" clearable
+          <el-form-item :label="t('marketingApps.name')" prop="domain">
+            <el-input :placeholder="t('marketingApps.inputNameTip')" clearable
               v-model="state.queryForm.domain" />
           </el-form-item>
           <el-form-item :label="'应用ID'" prop="appId">
@@ -21,10 +21,10 @@
           </el-form-item>
           <el-form-item>
             <el-button @click="query" class="ml10" icon="search" type="primary">
-              {{ $t('common.queryBtn') }}
+              {{ t('common.queryBtn') }}
             </el-button>
-            <el-button @click="resetQuery" icon="Refresh">{{ $t('common.resetBtn') }}</el-button>
-            <el-button @click="handleEdit" icon="EditPen">{{ $t('common.editBtn') }}</el-button>
+            <el-button @click="resetQuery" icon="Refresh">{{ t('common.resetBtn') }}</el-button>
+            <el-button @click="handleEdit" icon="EditPen" :disabled="activeName === 'tab2'">{{ t('common.editBtn') }}</el-button>
           </el-form-item>
         </el-form>
       </el-row>
@@ -35,7 +35,7 @@
         </div>
       </el-row> -->
 
-      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+      <el-tabs v-model="activeName" class="table-tabs" @tab-click="handleClick">
           <el-tab-pane label="使用中" name="tab1"></el-tab-pane>
           <el-tab-pane label="回收站" name="tab2"></el-tab-pane>
       </el-tabs>
@@ -43,114 +43,50 @@
       <el-table @selection-change="handleSelectionChange" ref="tableRef" :data="state.dataList" row-key="path"
         style="width: 100%" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
         :header-cell-style="tableStyle?.headerCellStyle">
-        <el-table-column type="selection" fixed="left" width="55" />
-        <el-table-column fixed="left" :label="$t('marketingApps.id')" prop="id" width="80" show-overflow-tooltip>
+        <el-table-column type="selection" fixed="left" width="55" v-if="activeName == 'tab1'" />
+        <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="120" 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>
+        <el-table-column :label="t('marketingApps.appImg')" prop="appImg" width="150" show-overflow-tooltip>
           <template #default="{ row }" style="display: flex; align-self: center;">
-            <el-image style="width: 100px; height: 100px" :src="row.appImg" :fit="fit" />
+            <el-image style="width: 80px; height: 80px" :src="row.appImg" :fit="fit" />
           </template>
         </el-table-column>
-        <el-table-column :label="$t('marketingApps.name')" prop="appName" width="150" show-overflow-tooltip>
+        <el-table-column :label="t('marketingApps.name')" prop="appName" width="150" show-overflow-tooltip>
           <template #default="{ row }">
             <el-link :href="row.url">{{ row.appName }}</el-link>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('marketingApps.appType')" prop="appType" width="110" show-overflow-tooltip>
+        <el-table-column :label="t('marketingApps.appType')" prop="domainType" width="110" show-overflow-tooltip>
           <template #default="{ row }">
-            <el-select v-model="row.appType" placeholder="" style="width: 80px">
+            <el-select :disabled="activeName === 'tab2'" v-model="row.domainType" placeholder="" style="width: 80px">
               <el-option v-for="item in appTypes" :key="item.value" :label="item.description" :value="item.value" />
             </el-select>
           </template>
         </el-table-column>
-        <el-table-column label="营销投放" prop="isMarketing" width="120">
+        <el-table-column label="营销投放" prop="launch" width="120">
           <template #default="{ row }">
-            <el-switch v-model="row.isMarketing" inline-prompt :active-value="1"
-              :inactive-value="0" @change="handleChange(row)" />
-              <!--  active-text="开启" inactive-text="关闭" -->
+            <el-switch :disabled="activeName === 'tab2'" v-model="row.launch" inline-prompt :active-value="true"
+              :inactive-value="false" @change="handleChange(row)" />
           </template>
         </el-table-column>
-        <el-table-column label="域名限制" prop="isHttp" width="120">
+        <el-table-column label="域名限制" prop="domainLimit" width="120">
           <template #default="{ row }">
-            <el-switch v-model="row.isHttp" inline-prompt :active-value="1"
-              :inactive-value="0" @change="handleChange(row)" />
-              <!--  active-text="开启" inactive-text="关闭" -->
+            <el-switch :disabled="activeName === 'tab2'" v-model="row.domainLimit" inline-prompt :active-value="true"
+              :inactive-value="false" @change="handleChange(row)" />
           </template>
         </el-table-column>
-        <el-table-column prop="domains" width="240" show-overflow-tooltip>
-          <template #header>
-            <span style="display: inline-block; align-items: center;">
-              域名集合
-              <el-tooltip effect="light" content="鼠标悬浮查看域名分组详情" placement="top">
-                <el-icon><Warning /></el-icon>
-              </el-tooltip>
-            </span>
-          </template>
+        <el-table-column :label="'域名集合'" prop="domains" width="280" show-overflow-tooltip>
           <template #default="{ row }">
-            <div style="
-                  padding: 0 20px;
-                  text-wrap: auto;
-                  text-align: left;
-                ">
-              <el-tooltip effect="light">
-                <template #content>
-                  <div v-for="(item, index) in row.domains" :key="index">{{ item.domain }};</div>
-                </template>
-                <el-text line-clamp="6">
-                  <template v-for="(item, index) in row.domains" :key="index">
-                    <div>{{ item.domain }};</div>
-                  </template>
-                </el-text>
-              </el-tooltip>
-            </div>
+            <DomainList :domainList="row.domains" />
           </template>
         </el-table-column>
-        <el-table-column prop="ips" width="300">
-          <template #header>
-            <span style="display: inline-block; align-items: center;">
-              IP集合
-              <el-tooltip effect="light" content="鼠标悬浮查看ip分组详情" placement="top">
-                <el-icon><Warning /></el-icon>
-              </el-tooltip>
-            </span>
-          </template>
+        <el-table-column :label="'IP集合'" prop="ips" width="320">
           <template #default="{ row }">
-            <div style="
-                  padding: 0 20px;
-                  text-wrap: auto;
-                  text-align: left;
-                ">
-              <div style="text-align: left;">白名单:</div>
-              <el-tooltip effect="light">
-                <template #content>
-                  <div v-for="(item, index) in row.ips" :key="index">
-                    {{ item.ipType == 1 ? item.startIp + ';' : '' }}
-                  </div>
-                </template>
-                <el-text line-clamp="4">
-                  <template v-for="(item, index) in row.ips" :key="index">
-                    <div>{{ item.ipType == 1 ? item.startIp + ';' : '' }}</div>
-                  </template>
-                </el-text>
-              </el-tooltip>
-              <div style="text-align: left;">黑名单:</div>
-              <el-tooltip effect="light">
-                <template #content>
-                  <div v-for="(item, index) in row.ips" :key="index">
-                    {{ item.ipType == 2 ? item.startIp + ';' : '' }}
-                  </div>
-                </template>
-                <el-text line-clamp="4">
-                  <template v-for="(item, index) in row.ips" :key="index">
-                    <div>{{ item.ipType == 2 ? item.startIp + ';' : '' }}</div>
-                  </template>
-                </el-text>
-              </el-tooltip>
-            </div>
+            <IpList :ipList="row.ips" />
           </template>
         </el-table-column>
         <el-table-column :label="'触发频率'" prop="triggerRule" width="150" show-overflow-tooltip>
@@ -159,37 +95,65 @@
              {{ row.triggerNum }}
           </template>
         </el-table-column>
-        <el-table-column :label="$t('marketingApps.triggerRule')" width="200" prop="triggerRule" show-overflow-tooltip>
+        <el-table-column :label="t('marketingApps.triggerRule')" width="140" prop="triggerRule" show-overflow-tooltip>
           <template #default="{ row }">
-            <el-select v-model="row.triggerRule" placeholder="" style="width: 160px">
+            <el-select :disabled="activeName === 'tab2'" v-model="row.triggerRule" placeholder="" style="width: 100px">
               <el-option v-for="item in triggerRules" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </template>
         </el-table-column>
-        <el-table-column fixed="right" :label="$t('common.action')" width="80">
+        <el-table-column fixed="right" :label="t('common.action')" width="200">
           <template #default="scope">
             <div class="action" style="text-align: left;">
-              <el-button style="margin-left: 0;" icon="edit-pen" @click="onOpenEditMenu('edit', scope.row)" text type="primary"
-                v-auth="'sys_menu_edit'">修改
-              </el-button>
-              <el-button style="margin-left: 0;" icon="TrendCharts" @click="onOpenStatistical(scope.row)" text type="primary"
-                v-auth="'sys_menu_edit'">统计
-              </el-button>
-              <el-button
-                :type="activeName == 'tab1' ? 'danger' : 'success'"
-                style="margin-left: 0;"
-                :icon="activeName == 'tab1' ? 'delete' : 'refresh'"
-                @click="handleDelete(scope.row)" text
+              <el-button :disabled="activeName == 'tab2'" style="margin-right: 0px;" @click="onOpenEditMenu('edit', scope.row)" text type="primary"
+                v-auth="'sys_menu_edit'">
+                <svg style="margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                  <mask id="mask0_362_1714" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+                  <rect width="16" height="16" fill="#D9D9D9"/>
+                  </mask>
+                  <g mask="url(#mask0_362_1714)">
+                  <path d="M4.60017 12.2954L5.97782 12.2954C6.50827 12.2955 7.017 12.0847 7.39208 11.7097L13.7925 5.30925C14.4017 4.70003 14.4017 3.71229 13.7925 3.10308V3.10308C13.1833 2.49386 12.1955 2.49387 11.5863 3.10308L5.18591 9.5035C4.81082 9.87859 4.60011 10.3873 4.60012 10.9178L4.60017 12.2954Z" stroke="#167AF0" stroke-linejoin="round"/>
+                  <path d="M10.4832 4.20593L12.6893 6.41211" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path d="M8.5 2H4C2.89543 2 2 2.89543 2 4V13C2 14.1046 2.89543 15 4 15H13C14.1046 15 15 14.1046 15 13V8.5" stroke="#167AF0" stroke-linecap="round"/>
+                  </g>
+                </svg>
+                修改</el-button>
+              <el-button style="margin-right: 0px;" @click="onOpenStatistical(scope.row)" text type="primary"
                 v-auth="'sys_menu_edit'">
-                  {{ activeName == 'tab1' ? '拉黑' : '还原' }}
-              </el-button>
+                <svg style="margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                  <path d="M2 6V3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V6" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path d="M10.6667 8V10.3333" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path d="M8 5V10.3333" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path d="M5.33325 6.33334V10.3333" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path d="M2 10V13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V10" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                统计</el-button>
+              <el-button v-if="activeName == 'tab1'" style="margin-right: 0px;" @click="handleDelete(scope.row)" text type="danger"
+                v-auth="'sys_menu_edit'">
+                <svg style="margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                  <g clip-path="url(#clip0_35_722)">
+                  <path d="M3 3.33334V12.6667C3 13.7712 3.89543 14.6667 5 14.6667H11C12.1046 14.6667 13 13.7712 13 12.6667V3.33334H3Z" stroke="#E64242" stroke-linejoin="round"/>
+                  <path d="M6.66675 6.66666V11" stroke="#E64242" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path d="M9.33325 6.66666V11" stroke="#E64242" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path d="M1.33325 3.33334H14.6666" stroke="#E64242" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path d="M5.33325 3.33334L6.42959 1.33334H9.59229L10.6666 3.33334H5.33325Z" stroke="#E64242" stroke-linejoin="round"/>
+                  </g>
+                  <defs>
+                  <clipPath id="clip0_35_722">
+                  <rect width="16" height="16" fill="white"/>
+                  </clipPath>
+                  </defs>
+                </svg>
+                拉黑</el-button>
+              <el-button v-if="activeName == 'tab2'" style="margin-right: 0px;" icon="refresh" @click="handleDelete(scope.row)" text type="success"
+                v-auth="'sys_menu_edit'">还原</el-button>
             </div>
           </template>
         </el-table-column>
       </el-table>
       <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
     </div>
-    <MenuDialog @refresh="getDataList()" ref="menuDialogRef" />
+    <EditDialog @refresh="getDataList()" ref="EditDialogRef" />
     <StatisticalDialog @refresh="getDataList()" ref="statisticalDialogRef" />
   </div>
 </template>
@@ -201,13 +165,14 @@ import { useMessage, useMessageBox } from '/@/hooks/message';
 import { useI18n } from 'vue-i18n';
 import { fetchItemList } from '/@/api/admin/dict';
 import { ref } from 'vue'
-const MenuDialog = defineAsyncComponent(() => import('./components/form.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'));
 
-import { ElMessage, ElNotification, messageConfig, type TabsPaneContext } from 'element-plus'
+import { ElMessage, type TabsPaneContext } from 'element-plus'
 
 const activeName = ref('tab1')
-
 const handleClick = (tab: TabsPaneContext, event: Event) => {
   console.log(tab, event);
   query();
@@ -216,7 +181,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
 const { t } = useI18n();
 // 定义变量内容
 const tableRef = ref();
-const menuDialogRef = ref();
+const EditDialogRef = ref();
 const statisticalDialogRef = ref();
 const queryRef = ref();
 const showSearch = ref(true);
@@ -225,7 +190,7 @@ const selectObjs = ref([]) as any;
 // 是否可以多选
 const multiple = ref(true);
 const state: BasicTableProps = reactive<BasicTableProps>({
-  pageList: pageList, // H
+  pageList: pageList,
   queryForm: {
     domain: '',
     appType: '',
@@ -270,6 +235,7 @@ const handleChange = (row: any) => {
   // }).catch((err: any) => {
   //   useMessage().error(err.msg);
   // });
+  useMessage().success('修改成功');
 };
 
 // 清空搜索条件
@@ -285,8 +251,8 @@ const handleEdit = () => {
     useMessage().warning('请选择要修改的项');
     return;
   }
-  menuDialogRef.value.openDialog('', {});
-  // menuDialogRef.value.openDialog('edit', selectObjs.value);
+  EditDialogRef.value.openDialog('', {});
+  // EditDialogRef.value.openDialog('edit', selectObjs.value);
 };
 
 // 多选
@@ -296,7 +262,7 @@ const handleSelectionChange = (selection: any) => {
 
 // 打开编辑菜单弹窗
 const onOpenEditMenu = (type: string, row: any) => {
-  menuDialogRef.value.openDialog(type, row);
+  EditDialogRef.value.openDialog(type, row);
 };
 
 // 打开统计弹窗
@@ -337,4 +303,8 @@ const handleDelete = async (row: any) => {
 :deep(.el-link.is-underline:hover:after) {
   display: none;
 }
+
+.table-tabs {
+  margin-bottom: 10px;
+}
 </style>