diff --git a/ui-vue3/src/Login.vue b/ui-vue3/src/Login.vue
index 1988b7edf..6a67a5aac 100644
--- a/ui-vue3/src/Login.vue
+++ b/ui-vue3/src/Login.vue
@@ -44,8 +44,8 @@ function loginHandle() {
       updateAuthState(true, userinfo.username)
       const { data } = await meshesSearch()
       // if mesh is not set or old mesh is expired
-      if (!meshStore.mesh || !data.some((x: any) => x.name === meshStore.mesh)) {
-        meshStore.mesh = data[0]?.name
+      if (!meshStore.mesh || !data.some((x: any) => x.id === meshStore.mesh)) {
+        meshStore.mesh = data[0]?.id
       }
       router.replace(redirect)
     })
@@ -63,25 +63,14 @@ function loginHandle() {
       </a-row>
       <a-row>
         <a-form layout="vertical" :model="userinfo" ref="login-form-ref">
-          <a-form-item
-            class="item"
-            :label="$t('loginDomain.username')"
-            name="username"
-            :rules="[{ required: true }]"
-          >
+          <a-form-item class="item" :label="$t('loginDomain.username')" name="username" :rules="[{ required: true }]">
             <a-input type="" v-model:value="userinfo.username"></a-input>
           </a-form-item>
-          <a-form-item
-            class="item"
-            :label="$t('loginDomain.password')"
-            name="password"
-            :rules="[{ required: true }]"
-          >
+          <a-form-item class="item" :label="$t('loginDomain.password')" name="password" :rules="[{ required: true }]">
             <a-input type="password" v-model:value="userinfo.password"></a-input>
           </a-form-item>
           <a-form-item class="item" label="">
-            <a-button @click="loginHandle" size="large" type="primary" class="login-btn"
-              >{{ $t('loginDomain.login') }}
+            <a-button @click="loginHandle" size="large" type="primary" class="login-btn">{{ $t('loginDomain.login') }}
             </a-button>
           </a-form-item>
         </a-form>
diff --git a/ui-vue3/src/base/i18n/en.ts b/ui-vue3/src/base/i18n/en.ts
index 6b52d88d9..503346f98 100644
--- a/ui-vue3/src/base/i18n/en.ts
+++ b/ui-vue3/src/base/i18n/en.ts
@@ -158,6 +158,12 @@ const words: I18nType = {
     opened: 'Opened',
     paramRoute: 'Param Route'
   },
+  servicesDomain: {
+    appName: 'Application Name',
+    instanceCount: 'Instance Count',
+    deployClusters: 'Deploy Clusters',
+    registryClusters: 'Registry Clusters'
+  },
   appServiceTimeout: 'Adjusting the timeout for application service provision',
   enableAppInstanceLogs: 'Enable access logs for all instances of this application',
   appServiceLoadBalance: 'Adjusting the load balancing strategy for application service provision',
@@ -198,6 +204,8 @@ const words: I18nType = {
   service: 'Service',
   versionGroup: 'Version & Group',
   avgQPS: 'last 1min QPS',
+  provider: 'Provider',
+  subset: 'Group',
   avgRT: 'last 1min RT',
   requestTotal: 'last 1min request total',
   serviceSearch: 'Search Service',
@@ -368,6 +376,13 @@ const words: I18nType = {
   placeholders: {
     searchService: 'Search by service name'
   },
+  placeholder: {
+    searchService: 'Search by service name',
+    typeAppName: 'Enter application name',
+    typeDefault: 'Please enter',
+    typeRoutingRules: 'Search routing rules',
+    searchAppNameOrIP: 'Search application, IP'
+  },
   methods: 'Methods',
   testModule: {
     searchServiceHint:
@@ -490,10 +505,6 @@ const words: I18nType = {
   backHome: 'Back Home',
   noPageTip: 'Sorry, the page you visited does not exist.',
   globalSearchTip: 'Search ip, application, instance, service',
-  placeholder: {
-    typeAppName: 'please type appName, support for prefix',
-    typeDefault: 'please type '
-  },
   none: 'No Select',
   debug: 'Debug',
   distribution: 'Distribution',
diff --git a/ui-vue3/src/base/i18n/zh.ts b/ui-vue3/src/base/i18n/zh.ts
index b5968662d..70af37dd8 100644
--- a/ui-vue3/src/base/i18n/zh.ts
+++ b/ui-vue3/src/base/i18n/zh.ts
@@ -175,9 +175,17 @@ const words: I18nType = {
     opened: '开启',
     paramRoute: '参数路由'
   },
+  servicesDomain: {
+    appName: '应用名',
+    instanceCount: '实例数量',
+    deployClusters: '部署集群',
+    registryClusters: '注册集群'
+  },
   service: '服务',
   versionGroup: '版本&分组',
   avgQPS: 'QPS',
+  provider: '提供者',
+  subset: '分组',
   avgRT: 'RT',
   requestTotal: '近1min请求总量',
   serviceSearch: '服务查询',
@@ -478,9 +486,10 @@ const words: I18nType = {
   globalSearchTip: '搜索ip，应用，实例，服务',
 
   placeholder: {
-    typeAppName: '请输入应用名，支持前缀搜索',
+    typeAppName: '请输入应用名',
     typeDefault: '请输入',
-    typeRoutingRules: '搜索路由规则，支持前缀过滤'
+    typeRoutingRules: '搜索路由规则',
+    searchAppNameOrIP: '搜索应用，ip'
   },
   none: '无',
   details: '详情',
diff --git a/ui-vue3/src/layout/header/layout_header.vue b/ui-vue3/src/layout/header/layout_header.vue
index b3ea6fe57..98c32be43 100644
--- a/ui-vue3/src/layout/header/layout_header.vue
+++ b/ui-vue3/src/layout/header/layout_header.vue
@@ -56,7 +56,7 @@
                 :options="
                   meshes.map((x: any) => {
                     return {
-                      value: x.name,
+                      value: x.id,
                       label: x.name
                     }
                   })
diff --git a/ui-vue3/src/utils/SearchUtil.ts b/ui-vue3/src/utils/SearchUtil.ts
index a9915be56..980d45c69 100644
--- a/ui-vue3/src/utils/SearchUtil.ts
+++ b/ui-vue3/src/utils/SearchUtil.ts
@@ -98,9 +98,10 @@ export class SearchDomain {
 
     this.searchApi(queryParams)
       .then((res: any) => {
+
         const {
-          data: { list, pageInfo }
-        } = res
+          data: { list = [], pageInfo }
+        } = res || {}
         this.result = handleResult ? handleResult(list) : list
 
         if (!this.noPaged) {
diff --git a/ui-vue3/src/views/resources/applications/index.vue b/ui-vue3/src/views/resources/applications/index.vue
index 091a2d760..37d977491 100644
--- a/ui-vue3/src/views/resources/applications/index.vue
+++ b/ui-vue3/src/views/resources/applications/index.vue
@@ -30,10 +30,7 @@
           </a-tag>
         </template>
         <template v-else-if="column.dataIndex === 'appName'">
-          <span
-            class="app-link"
-            @click="router.push(`/resources/applications/detail/${record[column.key]}`)"
-          >
+          <span class="app-link" @click="router.push(`/resources/applications/detail/${record[column.key]}`)">
             <b>
               <Icon style="margin-bottom: -2px" icon="material-symbols:attach-file-rounded"></Icon>
               {{ text }}
@@ -70,7 +67,7 @@ let columns = [
     title: 'appName',
     key: 'appName',
     dataIndex: 'appName',
-    sorter: (a: any, b: any) => sortString(a.appName, b.appName),
+    // sorter: (a: any, b: any) => sortString(a.appName, b.appName),
     width: 140,
     ellipsis: true
   },
@@ -79,9 +76,8 @@ let columns = [
     key: 'instanceCount',
     dataIndex: 'instanceCount',
     width: 100,
-    sorter: (a: any, b: any) => sortString(a.instanceCount, b.instanceCount)
+    // sorter: (a: any, b: any) => sortString(a.instanceCount, b.instanceCount)
   },
-
   {
     title: 'applicationDomain.deployClusters',
     key: 'deployClusters',
@@ -131,11 +127,13 @@ watch(route, (a, b) => {
 <style lang="less" scoped>
 .search-table-container {
   min-height: 60vh;
+
   //max-height: 70vh; //overflow: auto;
   .app-link {
     padding: 4px 10px 4px 4px;
     border-radius: 4px;
     color: v-bind('PRIMARY_COLOR');
+
     &:hover {
       cursor: pointer;
       background: rgba(133, 131, 131, 0.13);
diff --git a/ui-vue3/src/views/resources/applications/tabs/instance.vue b/ui-vue3/src/views/resources/applications/tabs/instance.vue
index cb7e0faa2..e976de95b 100644
--- a/ui-vue3/src/views/resources/applications/tabs/instance.vue
+++ b/ui-vue3/src/views/resources/applications/tabs/instance.vue
@@ -113,7 +113,7 @@ const columns = [
     title: 'instanceDomain.ip',
     dataIndex: 'ip',
     key: 'ip',
-    sorter: true,
+    // sorter: true,
     width: 150,
     fixed: 'left'
   },
@@ -121,56 +121,56 @@ const columns = [
     title: 'instanceDomain.name',
     dataIndex: 'name',
     key: 'name',
-    sorter: true,
+    // sorter: true,
     width: 180
   },
   {
     title: 'instanceDomain.deployState',
     dataIndex: 'deployState',
     key: 'deployState',
-    sorter: true,
+    // sorter: true,
     width: 150
   },
   {
     title: 'instanceDomain.deployCluster',
     dataIndex: 'deployClusters',
     key: 'deployClusters',
-    sorter: true,
+    // sorter: true,
     width: 180
   },
   {
     title: 'instanceDomain.registerState',
     dataIndex: 'registerState',
     key: 'registerState',
-    sorter: true,
+    // sorter: true,
     width: 150
   },
   {
     title: 'instanceDomain.registerClusters',
     dataIndex: 'registerCluster',
     key: 'registerCluster',
-    sorter: true,
+    // sorter: true,
     width: 200
   },
   {
     title: 'instanceDomain.cpu',
     dataIndex: 'cpu',
     key: 'cpu',
-    sorter: true,
+    // sorter: true,
     width: 120
   },
   {
     title: 'instanceDomain.memory',
     dataIndex: 'memory',
     key: 'memory',
-    sorter: true,
+    // sorter: true,
     width: 120
   },
   {
     title: 'instanceDomain.startTime',
     dataIndex: 'startTime',
     key: 'startTime',
-    sorter: true,
+    // sorter: true,
     width: 150
   }
   // {
diff --git a/ui-vue3/src/views/resources/applications/tabs/service.vue b/ui-vue3/src/views/resources/applications/tabs/service.vue
index d0c029a73..821c6833e 100644
--- a/ui-vue3/src/views/resources/applications/tabs/service.vue
+++ b/ui-vue3/src/views/resources/applications/tabs/service.vue
@@ -36,17 +36,6 @@
         <template v-if="column.dataIndex === 'serviceName'">
           <a-button type="link" @click="viewDetail(text)">{{ text }}</a-button>
         </template>
-        <template v-else-if="column.dataIndex === 'versionGroupSelect'">
-          <a-select :value="text?.versionGroupValue" :bordered="false" style="width: 80%">
-            <a-select-option
-              v-for="(item, index) in text?.versionGroupArr"
-              :value="item"
-              :key="index"
-            >
-              {{ item }}
-            </a-select-option>
-          </a-select>
-        </template>
       </template>
     </search-table>
   </div>
@@ -108,37 +97,40 @@ const columns = [
   {
     title: 'provideServiceName',
     key: 'service',
-    dataIndex: 'serviceName',
-    sorter: true,
-    width: '30%'
-  },
-  {
-    title: 'versionGroup',
-    key: 'versionGroup',
-    dataIndex: 'versionGroupSelect',
-    width: '25%'
+    dataIndex: 'serviceName'
+    // sorter: true,
   },
   {
-    title: 'avgQPS',
-    key: 'avgQPS',
-    dataIndex: 'avgQPS',
-    sorter: true,
-    width: '15%'
+    title: 'version',
+    key: 'version',
+    dataIndex: 'version'
   },
   {
-    title: 'avgRT',
-    key: 'avgRT',
-    dataIndex: 'avgRT',
-    sorter: true,
-    width: '15%'
-  },
-  {
-    title: 'requestTotal',
-    key: 'requestTotal',
-    dataIndex: 'requestTotal',
-    sorter: true,
-    width: '15%'
+    title: 'subset',
+    key: 'group',
+    dataIndex: 'group'
   }
+  // {
+  //   title: 'avgQPS',
+  //   key: 'avgQPS',
+  //   dataIndex: 'avgQPS',
+  //   // sorter: true,
+  //   width: '15%'
+  // },
+  // {
+  //   title: 'avgRT',
+  //   key: 'avgRT',
+  //   dataIndex: 'avgRT',
+  //   // sorter: true,
+  //   width: '15%'
+  // },
+  // {
+  //   title: 'requestTotal',
+  //   key: 'requestTotal',
+  //   dataIndex: 'requestTotal',
+  //   // sorter: true,
+  //   width: '15%'
+  // }
 ]
 
 const appName = computed(() => {
@@ -213,6 +205,7 @@ provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain)
   .statistic {
     width: 8vw;
   }
+
   :deep(.ant-card-body) {
     padding: 12px;
   }
diff --git a/ui-vue3/src/views/resources/instances/index.vue b/ui-vue3/src/views/resources/instances/index.vue
index 4bb9d7b02..9ed8aed31 100644
--- a/ui-vue3/src/views/resources/instances/index.vue
+++ b/ui-vue3/src/views/resources/instances/index.vue
@@ -19,10 +19,8 @@
     <search-table :search-domain="searchDomain">
       <template #bodyCell="{ text, record, index, column }">
         <template v-if="column.dataIndex === 'ip'">
-          <span
-            class="app-link"
-            @click="router.push(`/resources/instances/detail/${record.name}/${record[column.key]}`)"
-          >
+          <span class="app-link"
+            @click="router.push(`/resources/instances/detail/${record.name}/${record[column.key]}`)">
             <b>
               <Icon style="margin-bottom: -2px" icon="material-symbols:attach-file-rounded"></Icon>
               {{ text }}
@@ -87,14 +85,14 @@ let columns = [
     title: 'instanceDomain.instanceIP',
     key: 'ip',
     dataIndex: 'ip',
-    sorter: (a: any, b: any) => sortString(a.ip, b.ip),
+    // sorter: (a: any, b: any) => sortString(a.ip, b.ip),
     width: 200
   },
   {
     title: 'instanceDomain.instanceName',
     key: 'name',
     dataIndex: 'name',
-    sorter: (a: any, b: any) => sortString(a.name, b.name),
+    // sorter: (a: any, b: any) => sortString(a.name, b.name),
     width: 140
   },
   {
@@ -102,49 +100,49 @@ let columns = [
     key: 'deployState',
     dataIndex: 'deployState',
     width: 120,
-    sorter: (a: any, b: any) => sortString(a.deployState, b.deployState)
+    // sorter: (a: any, b: any) => sortString(a.deployState, b.deployState)
   },
 
   {
     title: 'instanceDomain.deployCluster',
     key: 'deployCluster',
     dataIndex: 'deployCluster',
-    sorter: (a: any, b: any) => sortString(a.deployCluster, b.deployCluster),
+    // sorter: (a: any, b: any) => sortString(a.deployCluster, b.deployCluster),
     width: 120
   },
   {
     title: 'instanceDomain.registerState',
     key: 'registerState',
     dataIndex: 'registerState',
-    sorter: (a: any, b: any) => sortString(a.registerState, b.registerState),
+    // sorter: (a: any, b: any) => sortString(a.registerState, b.registerState),
     width: 120
   },
   {
     title: 'instanceDomain.registerCluster',
     key: 'registerClusters',
     dataIndex: 'registerClusters',
-    sorter: (a: any, b: any) => sortString(a.registerClusters, b.registerClusters),
+    // sorter: (a: any, b: any) => sortString(a.registerClusters, b.registerClusters),
     width: 140
   },
   {
     title: 'instanceDomain.CPU',
     key: 'cpu',
     dataIndex: 'cpu',
-    sorter: (a: any, b: any) => sortString(a.cpu, b.cpu),
+    // sorter: (a: any, b: any) => sortString(a.cpu, b.cpu),
     width: 140
   },
   {
     title: 'instanceDomain.memory',
     key: 'memory',
     dataIndex: 'memory',
-    sorter: (a: any, b: any) => sortString(a.memory, b.memory),
+    // sorter: (a: any, b: any) => sortString(a.memory, b.memory),
     width: 100
   },
   {
     title: 'instanceDomain.startTime_k8s',
     key: 'startTime_k8s',
     dataIndex: 'startTime',
-    sorter: (a: any, b: any) => sortString(a.startTime, b.startTime),
+    // sorter: (a: any, b: any) => sortString(a.startTime, b.startTime),
     width: 200
   }
   // {
diff --git a/ui-vue3/src/views/resources/services/search.vue b/ui-vue3/src/views/resources/services/search.vue
index 19dda2d14..96e648324 100644
--- a/ui-vue3/src/views/resources/services/search.vue
+++ b/ui-vue3/src/views/resources/services/search.vue
@@ -17,29 +17,15 @@
 <template>
   <div class="__container_services_index">
     <search-table :search-domain="searchDomain">
-      <template #bodyCell="{ column, record, text, index: tableRowIndex }">
+      <template #bodyCell="{ column, record, text }">
         <template v-if="column.dataIndex === 'serviceName'">
-          {{ record.versionGroup }}
-          <span class="service-link" @click="viewDistribution(text, tableRowIndex)">
+          <span class="service-link" @click="viewDistribution(text, record.group, record.version)">
             <b>
               <Icon style="margin-bottom: -2px" icon="material-symbols:attach-file-rounded"></Icon>
               {{ text }}
             </b>
           </span>
         </template>
-
-        <template v-else-if="column.dataIndex === 'versionGroupSelect'">
-          <a-select :value="text?.versionGroupValue" :bordered="false" style="width: 80%">
-            <a-select-option
-              v-for="(item, index) in text?.versionGroupArr"
-              :value="item"
-              @click="selectedVersionAndGroup(tableRowIndex, index, item)"
-              :key="index"
-            >
-              {{ item }}
-            </a-select-option>
-          </a-select>
-        </template>
       </template>
     </search-table>
   </div>
@@ -66,62 +52,49 @@ const columns = [
     title: 'service',
     key: 'service',
     dataIndex: 'serviceName',
-    sorter: true,
-    width: '30%',
+    // sorter: true,
     ellipsis: true
   },
   {
-    title: 'versionGroup',
-    key: 'versionGroup',
-    dataIndex: 'versionGroupSelect',
-    width: '25%'
-  },
-  {
-    title: 'avgQPS',
-    key: 'avgQPS',
-    dataIndex: 'avgQPS',
-    sorter: true,
-    width: '15%'
+    title: 'version',
+    key: 'version',
+    dataIndex: 'version'
   },
   {
-    title: 'avgRT',
-    key: 'avgRT',
-    dataIndex: 'avgRT',
-    sorter: true,
-    width: '15%'
+    title: 'subset',
+    key: 'group',
+    dataIndex: 'group'
   },
   {
-    title: 'requestTotal',
-    key: 'requestTotal',
-    dataIndex: 'requestTotal',
-    sorter: true,
-    width: '15%'
+    title: 'provider',
+    key: 'provider',
+    dataIndex: 'providerAppName'
   }
+  // {
+  //   title: 'avgQPS',
+  //   key: 'avgQPS',
+  //   dataIndex: 'avgQPS',
+  //   // sorter: true,
+  //   width: '15%'
+  // },
+  // {
+  //   title: 'avgRT',
+  //   key: 'avgRT',
+  //   dataIndex: 'avgRT',
+  //   // sorter: true,
+  //   width: '15%'
+  // },
+  // {
+  //   title: 'requestTotal',
+  //   key: 'requestTotal',
+  //   dataIndex: 'requestTotal',
+  //   // sorter: true,
+  //   width: '15%'
+  // }
 ]
 
-const tempServiceList = ref([])
-
-const handleResult = (result: any) => {
-  return result.map((service: any) => {
-    service.versionGroupSelect = {}
-    service.versionGroupSelect.versionGroupArr = service.versionGroups.map((item: any) => {
-      return (item.versionGroup =
-        (item.version ? 'version: ' + item.version + ', ' : '') +
-          (item.group ? 'group: ' + item.group : '') || '无')
-    })
-    service.versionGroupSelect.versionGroupValue = service.versionGroupSelect.versionGroupArr[0]
-    return service
-  })
-}
-
 function serviceInfo(params: any, table: any) {
   return searchService(params).then(async (res) => {
-    tempServiceList.value = res.data?.list
-    tempServiceList.value.forEach((service: any) => {
-      service.selectedIndex = -1
-    })
-
-    console.log(tempServiceList.value)
     return promQueryList(res, ['avgQPS', 'avgRT', 'requestTotal'], async (service: any) => {
       service.avgQPS = await queryMetrics(
         `sum (dubbo_provider_qps_total{interface='${service.serviceName}'}) by (interface)`
@@ -152,33 +125,17 @@ const searchDomain = reactive(
     serviceInfo,
     columns,
     undefined,
-    undefined,
-    handleResult
+    undefined
   )
 )
 
-searchDomain.onSearch(handleResult)
+searchDomain.onSearch()
 searchDomain.tableStyle = {
   scrollX: '100',
   scrollY: '367px'
 }
 
-const selectedVersionAndGroup = (
-  tableRowIndex: number,
-  versionAndGroupIndex: number,
-  versionAndGroupText: string
-) => {
-  if (versionAndGroupText === '无') {
-    tempServiceList.value[tableRowIndex].selectedIndex = -1
-  } else {
-    tempServiceList.value[tableRowIndex].selectedIndex = versionAndGroupIndex
-  }
-}
-
-const viewDistribution = (serviceName: string, tableRowIndex: number) => {
-  const selectedIndex = tempServiceList.value[tableRowIndex]?.selectedIndex
-  const group = tempServiceList.value[tableRowIndex].versionGroups[selectedIndex]?.group || ''
-  const version = tempServiceList.value[tableRowIndex].versionGroups[selectedIndex]?.version || ''
+const viewDistribution = (serviceName: string, group: string, version: string) => {
   router.push({ name: 'distribution', params: { pathId: serviceName, group, version } })
 }
 
diff --git a/ui-vue3/src/views/resources/services/tabs/distribution.vue b/ui-vue3/src/views/resources/services/tabs/distribution.vue
index 0d10a015f..96f3adee3 100644
--- a/ui-vue3/src/views/resources/services/tabs/distribution.vue
+++ b/ui-vue3/src/views/resources/services/tabs/distribution.vue
@@ -16,219 +16,113 @@
 -->
 <template>
   <div class="__container_services_tabs_distribution">
-    <a-flex vertical>
-      <a-flex class="service-filter">
-        <a-radio-group v-model:value="type" button-style="solid" @click="debounceSearch">
-          <a-radio-button value="provider">生产者</a-radio-button>
-          <a-radio-button value="consumer">消费者</a-radio-button>
-        </a-radio-group>
-        <a-input-search
-          v-model:value="searchValue"
-          placeholder="搜索应用，ip，支持前缀搜索"
-          class="service-filter-input"
-          @search="debounceSearch"
-          enter-button
-        />
-      </a-flex>
-      <a-table
-        :columns="tableColumns"
-        :data-source="tableData"
-        :scroll="{ y: '45vh' }"
-        :pagination="pagination"
-        @change="onTablePageChange"
-      >
-        <template #bodyCell="{ column, text }">
-          <template v-if="column.dataIndex === 'appName'">
-            <span class="link" @click="router.push('/resources/applications/detail/' + text)">
-              <b>
-                <Icon
-                  style="margin-bottom: -2px"
-                  icon="material-symbols:attach-file-rounded"
-                ></Icon>
-                {{ text }}
-              </b>
-            </span>
-          </template>
+    <search-table :search-domain="searchDomain">
+      <template #bodyCell="{ column, text }">
+        <template v-if="column.dataIndex === 'appName'">
+          <span class="link" @click="router.push('/resources/applications/detail/' + text)">
+            <b>
+              <Icon style="margin-bottom: -2px" icon="material-symbols:attach-file-rounded"></Icon>
+              {{ text }}
+            </b>
+          </span>
+        </template>
 
-          <template v-if="column.dataIndex === 'instanceName'">
-            <span class="link" @click="router.push('/resources/instances/detail/' + text)">
-              <b>
-                <Icon
-                  style="margin-bottom: -2px"
-                  icon="material-symbols:attach-file-rounded"
-                ></Icon>
-                {{ text }}
-              </b>
-            </span>
-          </template>
+        <template v-if="column.dataIndex === 'instanceName'">
+          <span class="link" @click="router.push('/resources/instances/detail/' + text)">
+            <b>
+              <Icon style="margin-bottom: -2px" icon="material-symbols:attach-file-rounded"></Icon>
+              {{ text }}
+            </b>
+          </span>
+        </template>
 
-          <template v-if="column.dataIndex === 'timeOut'">
-            {{ formattedDate(text) }}
-          </template>
-          <template v-if="column.dataIndex === 'label'">
-            <a-tag :color="PRIMARY_COLOR">{{ text }}</a-tag>
-          </template>
+        <template v-if="column.dataIndex === 'timeOut'">
+          {{ formattedDate(text) }}
         </template>
-      </a-table>
-    </a-flex>
+        <template v-if="column.dataIndex === 'label'">
+          <a-tag :color="PRIMARY_COLOR">{{ text }}</a-tag>
+        </template>
+      </template>
+    </search-table>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { ComponentInternalInstance } from 'vue'
-import { ref, reactive, getCurrentInstance } from 'vue'
+import { ref, reactive, provide } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { getServiceDistribution } from '@/api/service/service'
-import { debounce } from 'lodash'
 import { PRIMARY_COLOR } from '@/base/constants'
 import { Icon } from '@iconify/vue'
 import { formattedDate } from '@/utils/DateUtil'
+import SearchTable from '@/components/SearchTable.vue'
+import { SearchDomain } from '@/utils/SearchUtil'
+import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
 
 let __null = PRIMARY_COLOR
 const router = useRouter()
 const route = useRoute()
-const {
-  appContext: {
-    config: { globalProperties }
-  }
-} = <ComponentInternalInstance>getCurrentInstance()
-
-const searchValue = ref('')
-const versionAndGroupOptions = reactive([
-  {
-    label: '不指定',
-    value: ''
-  },
-  {
-    label: 'version=1.0.0',
-    value: 'version=1.0.0'
-  },
-  {
-    label: 'group=group1',
-    value: 'group=group1'
-  },
-  {
-    label: 'version=1.0.0,group=group1',
-    value: 'version=1.0.0,group=group1'
-  }
-])
-const versionAndGroup = ref(versionAndGroupOptions[0].value)
-const type = ref('provider')
 
 const tableColumns = [
   {
-    title: '应用名',
+    title: 'servicesDomain.appName',
+    key: 'appName',
     dataIndex: 'appName',
-    width: '20%',
-    customCell: (_, index) => {
-      const currentAppName = tableData.value[index].appName
-      if (index === 0 || tableData.value[index - 1].appName !== currentAppName) {
-        const sameAppCount = tableData.value.filter(
-          (item: any) => item.appName === currentAppName
-        ).length
-        return {
-          rowSpan: sameAppCount
-        }
-      } else {
-        return {
-          rowSpan: 0
-        }
-      }
-    }
-  },
-  {
-    title: '实例数',
-    dataIndex: 'instanceNum',
-    width: '15%',
-    customRender: ({ record }) => {
-      const appName = record.appName
-      const instanceNum = tableData.value.filter((item: any) => item.appName === appName).length
-      return instanceNum ?? 0
-    },
-    customCell: (_, index) => {
-      const currentAppName = tableData.value[index].appName
-      if (index === 0 || tableData.value[index - 1].appName !== currentAppName) {
-        const sameAppCount = tableData.value.filter(
-          (item: any) => item.appName === currentAppName
-        ).length
-        return {
-          rowSpan: sameAppCount
-        }
-      } else {
-        return {
-          rowSpan: 0
-        }
-      }
-    }
-  },
-  {
-    title: '实例名',
-    dataIndex: 'instanceName',
-    width: '25%',
+    width: 140,
     ellipsis: true
   },
   {
-    title: 'RPC端口',
-    dataIndex: 'rpcPort',
-    width: '8%'
+    title: 'servicesDomain.instanceCount',
+    key: 'instanceCount',
+    dataIndex: 'instanceCount',
+    width: 100
   },
   {
-    title: '超时时间',
-    dataIndex: 'timeOut',
-    width: '10%'
+    title: 'servicesDomain.deployClusters',
+    key: 'deployClusters',
+    dataIndex: 'deployClusters',
+    width: 120
   },
   {
-    title: '重试次数',
-    dataIndex: 'retryNum',
-    width: '10%'
+    title: 'servicesDomain.registryClusters',
+    key: 'registryClusters',
+    dataIndex: 'registryClusters',
+    width: 200
   }
-  // {
-  //   title: '标签',
-  //   dataIndex: 'label',
-  //   width: '15%'
-  // }
 ]
 
-const tableData = ref([])
-
-const pagination = reactive({
-  total: 0,
-  pageSize: 10,
-  current: 1,
-  pageOffset: 0,
-  showTotal: (v: any) =>
-    globalProperties.$t('searchDomain.total') +
-    ': ' +
-    v +
-    ' ' +
-    globalProperties.$t('searchDomain.unit')
-})
-
-const onSearch = async () => {
-  let params = {
+function getDistribution(params: any) {
+  return getServiceDistribution({
     serviceName: route.params?.pathId,
-    side: type.value,
+    side: 'consumer',
     version: route.params?.version || '',
     group: route.params?.group || '',
-    pageOffset: pagination.pageOffset,
-    pageSize: pagination.pageSize
-  }
-  const {
-    data: { list, pageInfo }
-  } = await getServiceDistribution(params)
-  tableData.value = list
-  pagination.total = pageInfo.Total
+    ...params
+  })
 }
-onSearch()
 
-const debounceSearch = debounce(onSearch, 300)
-
-const onTablePageChange = (pageInfo: any) => {
-  pagination.pageSize = pageInfo.pageSize || 10
-  pagination.current = pageInfo.current || 1
-  pagination.pageOffset = (pagination.current - 1) * pagination.pageSize
-  debounceSearch()
+const searchDomain = reactive(
+  new SearchDomain(
+    [
+      {
+        label: 'placeholder.searchAppNameOrIP',
+        param: 'keywords',
+        style: {
+          width: '300px'
+        }
+      }
+    ],
+    getDistribution,
+    tableColumns
+  )
+)
+
+searchDomain.onSearch()
+searchDomain.tableStyle = {
+  scrollX: '100',
+  scrollY: '367px'
 }
+
+provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain)
 </script>
 
 <style lang="less" scoped>
diff --git a/ui-vue3/src/views/traffic/destinationRule/index.vue b/ui-vue3/src/views/traffic/destinationRule/index.vue
index dc1fb1012..8af1baa5c 100644
--- a/ui-vue3/src/views/traffic/destinationRule/index.vue
+++ b/ui-vue3/src/views/traffic/destinationRule/index.vue
@@ -29,12 +29,7 @@
         <template v-if="column.dataIndex === 'operation'">
           <a-button type="link">查看</a-button>
           <a-button type="link">修改</a-button>
-          <a-popconfirm
-            title="确认删除该动态配置？"
-            ok-text="Yes"
-            cancel-text="No"
-            @confirm="confirm"
-          >
+          <a-popconfirm title="确认删除该动态配置？" ok-text="Yes" cancel-text="No" @confirm="confirm">
             <a-button type="link">删除</a-button>
           </a-popconfirm>
         </template>
@@ -56,7 +51,7 @@ let columns = [
     title: 'ruleName',
     key: 'ruleName',
     dataIndex: 'ruleName',
-    sorter: (a: any, b: any) => sortString(a.appName, b.appName),
+    // sorter: (a: any, b: any) => sortString(a.appName, b.appName),
     width: 140
   },
   {
@@ -64,7 +59,7 @@ let columns = [
     key: 'createTime',
     dataIndex: 'createTime',
     width: 120,
-    sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
+    // sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
   },
   {
     title: 'operation',
@@ -94,7 +89,7 @@ onMounted(() => {
   searchDomain.onSearch()
 })
 
-const confirm = () => {}
+const confirm = () => { }
 
 provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain)
 </script>
diff --git a/ui-vue3/src/views/traffic/dynamicConfig/index.vue b/ui-vue3/src/views/traffic/dynamicConfig/index.vue
index c82dc6dcb..c530f92ca 100644
--- a/ui-vue3/src/views/traffic/dynamicConfig/index.vue
+++ b/ui-vue3/src/views/traffic/dynamicConfig/index.vue
@@ -22,10 +22,7 @@
       </template>
       <template #bodyCell="{ text, column, record }">
         <template v-if="column.dataIndex === 'ruleName'">
-          <span
-            class="config-link"
-            @click="router.push(`/traffic/dynamicConfig/formview/${record.ruleName}/0`)"
-          >
+          <span class="config-link" @click="router.push(`/traffic/dynamicConfig/formview/${record.ruleName}/0`)">
             <b>
               <Icon style="margin-bottom: -2px" icon="material-symbols:attach-file-rounded"></Icon>
               {{ text }}
@@ -39,23 +36,12 @@
           {{ text ? '启用' : '禁用' }}
         </template>
         <template v-if="column.dataIndex === 'operation'">
-          <a-button
-            type="link"
-            @click="router.push(`/traffic/dynamicConfig/formview/${record.ruleName}/0`)"
-            >查看</a-button
-          >
-          <a-button
-            type="link"
-            @click="router.push(`/traffic/dynamicConfig/formview/${record.ruleName}/1`)"
-          >
+          <a-button type="link"
+            @click="router.push(`/traffic/dynamicConfig/formview/${record.ruleName}/0`)">查看</a-button>
+          <a-button type="link" @click="router.push(`/traffic/dynamicConfig/formview/${record.ruleName}/1`)">
             修改
           </a-button>
-          <a-popconfirm
-            title="确认删除该动态配置？"
-            ok-text="Yes"
-            cancel-text="No"
-            @confirm="delDynamicConfig(record)"
-          >
+          <a-popconfirm title="确认删除该动态配置？" ok-text="Yes" cancel-text="No" @confirm="delDynamicConfig(record)">
             <a-button type="link">删除</a-button>
           </a-popconfirm>
         </template>
@@ -84,7 +70,7 @@ let columns = [
     title: 'ruleName',
     key: 'ruleName',
     dataIndex: 'ruleName',
-    sorter: (a: any, b: any) => sortString(a.appName, b.appName),
+    // sorter: (a: any, b: any) => sortString(a.appName, b.appName),
     width: 200,
     ellipsis: true
   },
@@ -94,14 +80,14 @@ let columns = [
     dataIndex: 'ruleGranularity',
     render: (text, record) => (record.isService ? '服务' : '应用'),
     width: 100,
-    sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
+    // sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
   },
   {
     title: 'createTime',
     key: 'createTime',
     dataIndex: 'createTime',
     width: 200,
-    sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
+    // sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
   },
   {
     title: 'enabled',
@@ -109,7 +95,7 @@ let columns = [
     dataIndex: 'enabled',
     render: (text, record) => (record.enabled ? '是' : '否'),
     width: 120,
-    sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
+    // sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
   },
   {
     title: 'operation',
@@ -152,10 +138,12 @@ provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain)
 <style lang="less" scoped>
 .__container_traffic_config_index {
   min-height: 60vh;
+
   .config-link {
     padding: 4px 10px 4px 4px;
     border-radius: 4px;
     color: v-bind('PRIMARY_COLOR');
+
     &:hover {
       cursor: pointer;
       background: rgba(133, 131, 131, 0.13);
diff --git a/ui-vue3/src/views/traffic/routingRule/index.vue b/ui-vue3/src/views/traffic/routingRule/index.vue
index 4c72c9f60..d5e62c747 100644
--- a/ui-vue3/src/views/traffic/routingRule/index.vue
+++ b/ui-vue3/src/views/traffic/routingRule/index.vue
@@ -18,8 +18,7 @@
   <div class="routing-rule-container">
     <search-table :search-domain="searchDomain">
       <template #customOperation>
-        <a-button type="primary" @click="router.push(`/traffic/addRoutingRule/addByFormView`)"
-          >新增条件路由规则
+        <a-button type="primary" @click="router.push(`/traffic/addRoutingRule/addByFormView`)">新增条件路由规则
         </a-button>
       </template>
       <template #bodyCell="{ text, column, record }">
@@ -45,18 +44,10 @@
           <a-button type="link" @click="router.push(`formview/${record.ruleName}`)">
             查看
           </a-button>
-          <a-button
-            type="link"
-            @click="router.push(`/traffic/updateRoutingRule/updateByFormView/${record.ruleName}`)"
-          >
+          <a-button type="link" @click="router.push(`/traffic/updateRoutingRule/updateByFormView/${record.ruleName}`)">
             修改
           </a-button>
-          <a-popconfirm
-            title="确认删除该条件路由规则？"
-            ok-text="Yes"
-            cancel-text="No"
-            @confirm="confirm(record.ruleName)"
-          >
+          <a-popconfirm title="确认删除该条件路由规则？" ok-text="Yes" cancel-text="No" @confirm="confirm(record.ruleName)">
             <a-button type="link"> 删除</a-button>
           </a-popconfirm>
         </template>
@@ -81,7 +72,7 @@ let columns = [
     title: 'ruleName',
     key: 'ruleName',
     dataIndex: 'ruleName',
-    sorter: (a: any, b: any) => sortString(a.appName, b.appName),
+    // sorter: (a: any, b: any) => sortString(a.appName, b.appName),
     width: 140
   },
   {
@@ -90,21 +81,21 @@ let columns = [
     dataIndex: 'ruleGranularity',
     render: (text, record) => (record.isService ? '服务' : '应用'),
     width: 100,
-    sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
+    // sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
   },
   {
     title: 'createTime',
     key: 'createTime',
     dataIndex: 'createTime',
     width: 120,
-    sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
+    // sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
   },
   {
     title: 'enabled',
     key: 'enabled',
     dataIndex: 'enabled',
     width: 120,
-    sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
+    // sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
   },
   {
     title: 'operation',
@@ -157,6 +148,7 @@ provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain)
 <style lang="less" scoped>
 .routing-rule-container {
   height: 100%;
+
   .search-table-container {
     height: 100%;
     //min-height: 60vh;
diff --git a/ui-vue3/src/views/traffic/tagRule/index.vue b/ui-vue3/src/views/traffic/tagRule/index.vue
index fcbe1a56b..7e72a3370 100644
--- a/ui-vue3/src/views/traffic/tagRule/index.vue
+++ b/ui-vue3/src/views/traffic/tagRule/index.vue
@@ -24,10 +24,7 @@
       </template>
       <template #bodyCell="{ text, column, record }">
         <template v-if="column.dataIndex === 'ruleName'">
-          <span
-            class="rule-link"
-            @click="router.push(`/traffic/tagRule/formview/${record[column.key]}`)"
-          >
+          <span class="rule-link" @click="router.push(`/traffic/tagRule/formview/${record[column.key]}`)">
             <b>
               <Icon style="margin-bottom: -2px" icon="material-symbols:attach-file-rounded"></Icon>
               {{ text }}
@@ -44,18 +41,10 @@
           <a-button type="link" @click="router.push(`formview/${record.ruleName}`)">
             查看
           </a-button>
-          <a-button
-            @click="router.push(`/traffic/updateTagRule/updateByFormView/${record.ruleName}`)"
-            type="link"
-          >
+          <a-button @click="router.push(`/traffic/updateTagRule/updateByFormView/${record.ruleName}`)" type="link">
             修改
           </a-button>
-          <a-popconfirm
-            title="确认删除该标签路由规则？"
-            ok-text="Yes"
-            cancel-text="No"
-            @confirm="confirm(record.ruleName)"
-          >
+          <a-popconfirm title="确认删除该标签路由规则？" ok-text="Yes" cancel-text="No" @confirm="confirm(record.ruleName)">
             <a-button type="link"> 删除 </a-button>
           </a-popconfirm>
         </template>
@@ -86,7 +75,7 @@ let columns = [
     title: 'ruleName',
     key: 'ruleName',
     dataIndex: 'ruleName',
-    sorter: (a: any, b: any) => sortString(a.appName, b.appName),
+    // sorter: (a: any, b: any) => sortString(a.appName, b.appName),
     width: 140
   },
   {
@@ -94,7 +83,7 @@ let columns = [
     key: 'createTime',
     dataIndex: 'createTime',
     width: 120,
-    sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
+    // sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
   },
   {
     title: 'enable',
@@ -102,7 +91,7 @@ let columns = [
     dataIndex: 'enabled',
     // render: (text, record) => (record.enable ? '是' : '否'),
     width: 120,
-    sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
+    // sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
   },
   {
     title: 'operation',
@@ -153,6 +142,7 @@ provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain)
 <style lang="less" scoped>
 .tag-rule-container {
   height: 100%;
+
   .search-table-container {
     min-height: 60vh;
     //max-height: 70vh; //overflow: auto;
diff --git a/ui-vue3/src/views/traffic/virtualService/index.vue b/ui-vue3/src/views/traffic/virtualService/index.vue
index d75a4fc0a..f8e5b2647 100644
--- a/ui-vue3/src/views/traffic/virtualService/index.vue
+++ b/ui-vue3/src/views/traffic/virtualService/index.vue
@@ -24,17 +24,12 @@
         <template v-if="column.dataIndex === 'ruleName'">
           <a-button type="link" @click="router.replace(`formview/${record[column.key]}`)">{{
             text
-          }}</a-button>
+            }}</a-button>
         </template>
         <template v-if="column.dataIndex === 'operation'">
           <a-button type="link">查看</a-button>
           <a-button type="link">修改</a-button>
-          <a-popconfirm
-            title="确认删除该动态配置？"
-            ok-text="Yes"
-            cancel-text="No"
-            @confirm="confirm"
-          >
+          <a-popconfirm title="确认删除该动态配置？" ok-text="Yes" cancel-text="No" @confirm="confirm">
             <a-button type="link">删除</a-button>
           </a-popconfirm>
         </template>
@@ -56,7 +51,7 @@ let columns = [
     title: 'ruleName',
     key: 'ruleName',
     dataIndex: 'ruleName',
-    sorter: (a: any, b: any) => sortString(a.appName, b.appName),
+    // sorter: (a: any, b: any) => sortString(a.appName, b.appName),
     width: 140
   },
   {
@@ -64,14 +59,14 @@ let columns = [
     key: 'createTime',
     dataIndex: 'createTime',
     width: 120,
-    sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
+    // sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
   },
   {
     title: 'lastModifiedTime',
     key: 'lastModifiedTime',
     dataIndex: 'lastModifiedTime',
     width: 120,
-    sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
+    // sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
   },
   {
     title: 'operation',
@@ -101,7 +96,7 @@ onMounted(() => {
   searchDomain.onSearch()
 })
 
-const confirm = () => {}
+const confirm = () => { }
 
 provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain)
 </script>