diff --git a/ui-vue3/src/base/i18n/en.ts b/ui-vue3/src/base/i18n/en.ts
index f197248..7648d7c 100644
--- a/ui-vue3/src/base/i18n/en.ts
+++ b/ui-vue3/src/base/i18n/en.ts
@@ -28,7 +28,8 @@
   },
   dynamicConfigDomain: {
     YAMLView: 'YAML view',
-    formView: 'Form view'
+    formView: 'Form view',
+    event: 'Event'
   },
   routingRuleDomain: {
     YAMLView: 'YAML view',
diff --git a/ui-vue3/src/base/i18n/zh.ts b/ui-vue3/src/base/i18n/zh.ts
index 28e68a7..39071ca 100644
--- a/ui-vue3/src/base/i18n/zh.ts
+++ b/ui-vue3/src/base/i18n/zh.ts
@@ -28,7 +28,8 @@
   },
   dynamicConfigDomain: {
     YAMLView: 'YAML视图',
-    formView: '表单视图'
+    formView: '表单视图',
+    event: '事件'
   },
   routingRuleDomain: {
     YAMLView: 'YAML视图',
diff --git a/ui-vue3/src/components/SearchTable.vue b/ui-vue3/src/components/SearchTable.vue
index 7a6d4bf..3efdc62 100644
--- a/ui-vue3/src/components/SearchTable.vue
+++ b/ui-vue3/src/components/SearchTable.vue
@@ -18,7 +18,7 @@
   <div class="__container_search_table">
     <div class="search-query-container">
       <a-row>
-        <a-col :span="20">
+        <a-col :span="18">
           <a-form>
             <a-flex wrap="wrap" gap="large">
               <template v-for="q in searchDomain.params">
@@ -67,29 +67,32 @@
             </a-flex>
           </a-form>
         </a-col>
-        <a-col :span="4">
-          <div class="common-tool" @click="commonTool.customColumns = !commonTool.customColumns">
-            <div class="custom-column button">
-              <Icon icon="material-symbols-light:format-list-bulleted-rounded"></Icon>
-            </div>
-            <div class="dropdown" v-show="commonTool.customColumns">
-              <a-card style="max-width: 300px" title="Custom Column">
-                <div class="body">
-                  <div
-                    class="item"
-                    @click.stop="hideColumn(item)"
-                    v-for="(item, i) in searchDomain?.table.columns"
-                  >
-                    <Icon
-                      style="margin-bottom: -4px; font-size: 1rem; margin-right: 2px"
-                      :icon="item.__hide ? 'zondicons:view-hide' : 'zondicons:view-show'"
-                    ></Icon>
-                    {{ item.title }}
+        <a-col :span="6">
+          <a-flex style="justify-content: flex-end;">
+            <slot name="customOperation"></slot>
+            <div class="common-tool" @click="commonTool.customColumns = !commonTool.customColumns">
+              <div class="custom-column button">
+                <Icon icon="material-symbols-light:format-list-bulleted-rounded"></Icon>
+              </div>
+              <div class="dropdown" v-show="commonTool.customColumns">
+                <a-card style="max-width: 300px" title="Custom Column">
+                  <div class="body">
+                    <div
+                      class="item"
+                      @click.stop="hideColumn(item)"
+                      v-for="(item, i) in searchDomain?.table.columns"
+                    >
+                      <Icon
+                        style="margin-bottom: -4px; font-size: 1rem; margin-right: 2px"
+                        :icon="item.__hide ? 'zondicons:view-hide' : 'zondicons:view-show'"
+                      ></Icon>
+                      {{ item.title }}
+                    </div>
                   </div>
-                </div>
-              </a-card>
+                </a-card>
+              </div>
             </div>
-          </div>
+          </a-flex>
         </a-col>
       </a-row>
     </div>
@@ -211,7 +214,7 @@
 
   .common-tool {
     margin-top: 5px;
-    width: 200px;
+    width: 100px;
     cursor: pointer;
     position: relative;
     .button {
diff --git a/ui-vue3/src/router/defaultRoutes.ts b/ui-vue3/src/router/defaultRoutes.ts
index a33feef..6464e6a 100644
--- a/ui-vue3/src/router/defaultRoutes.ts
+++ b/ui-vue3/src/router/defaultRoutes.ts
@@ -398,6 +398,15 @@
                   tab: true,
                   icon: 'oui:app-console'
                 }
+              },
+              {
+                path: '/event/:ruleName',
+                name: 'dynamicConfigDomain.event',
+                component: () => import('../views/traffic/dynamicConfig/tabs/event.vue'),
+                meta: {
+                  tab: true,
+                  icon: 'oui:app-console'
+                }
               }
             ]
           },
diff --git a/ui-vue3/src/views/traffic/dynamicConfig/index.vue b/ui-vue3/src/views/traffic/dynamicConfig/index.vue
index 31cfe98..8b1ba4a 100644
--- a/ui-vue3/src/views/traffic/dynamicConfig/index.vue
+++ b/ui-vue3/src/views/traffic/dynamicConfig/index.vue
@@ -15,17 +15,19 @@
   ~ limitations under the License.
 -->
 <template>
-  <div class="__container_resources_application_index">
+  <div class="__container_traffic_config_index">
     <search-table :search-domain="searchDomain">
       <template #customOperation>
         <a-button type="primary">新增动态配置</a-button>
-        <a-button type="primary" style="margin-left: 10px">从模版创建</a-button>
       </template>
       <template #bodyCell="{ text, column, record }">
         <template v-if="column.dataIndex === 'ruleName'">
-          <a-button type="link" @click="router.replace(`formview/${record[column.key]}`)">{{
-            text
-          }}</a-button>
+          <span class="config-link" @click="router.replace(`formview/${record[column.key]}`)">
+            <b>
+              <Icon style="margin-bottom: -2px" icon="material-symbols:attach-file-rounded"></Icon>
+              {{ text }}
+            </b>
+          </span>
         </template>
         <template v-if="column.dataIndex === 'ruleGranularity'">
           {{ text ? '服务' : '应用' }}
@@ -34,7 +36,7 @@
           {{ text ? '启用' : '禁用' }}
         </template>
         <template v-if="column.dataIndex === 'operation'">
-          <a-button type="link">查看</a-button>
+          <a-button type="link" @click="router.replace(`formview/${record[column.key]}`)">查看</a-button>
           <a-button type="link">修改</a-button>
           <a-popconfirm
             title="确认删除该动态配置？"
@@ -57,7 +59,10 @@
 import { SearchDomain, sortString } from '@/utils/SearchUtil'
 import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
 import router from '@/router'
+import { PRIMARY_COLOR } from '@/base/constants'
+import { Icon } from '@iconify/vue'
 
+let __null = PRIMARY_COLOR
 let columns = [
   {
     title: 'ruleName',
@@ -122,8 +127,16 @@
 provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain)
 </script>
 <style lang="less" scoped>
-.search-table-container {
+.__container_traffic_config_index {
   min-height: 60vh;
-  //max-height: 70vh; //overflow: auto;
+  .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);
+    }
+  }
 }
 </style>
diff --git a/ui-vue3/src/views/traffic/dynamicConfig/tabs/event.vue b/ui-vue3/src/views/traffic/dynamicConfig/tabs/event.vue
new file mode 100644
index 0000000..a3cf4d1
--- /dev/null
+++ b/ui-vue3/src/views/traffic/dynamicConfig/tabs/event.vue
@@ -0,0 +1,26 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one or more
+  ~ contributor license agreements.  See the NOTICE file distributed with
+  ~ this work for additional information regarding copyright ownership.
+  ~ The ASF licenses this file to You under the Apache License, Version 2.0
+  ~ (the "License"); you may not use this file except in compliance with
+  ~ the License.  You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+-->
+
+<template>
+  <div>event todo</div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+</script>
+
+<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/traffic/dynamicConfig/tabs/formView.vue b/ui-vue3/src/views/traffic/dynamicConfig/tabs/formView.vue
index 77185b5..82cb5b2 100644
--- a/ui-vue3/src/views/traffic/dynamicConfig/tabs/formView.vue
+++ b/ui-vue3/src/views/traffic/dynamicConfig/tabs/formView.vue
@@ -16,97 +16,102 @@
 -->
 
 <template>
-  <div class="__container_app_detail">
-    <a-flex>
-      <a-card>
-        <a-descriptions :column="2" layout="vertical" title="">
-          <!-- ruleName -->
-          <a-descriptions-item
-            :label="$t('flowControlDomain.ruleName')"
-            :labelStyle="{ fontWeight: 'bold' }"
+  <div class="__container_traffic_config_form">
+    <a-card title="基础信息" class="dynamic-config-card">
+      <a-descriptions :column="2" layout="vertical">
+        <!-- ruleName -->
+        <a-descriptions-item
+          :label="$t('flowControlDomain.ruleName')"
+          :labelStyle="{ fontWeight: 'bold' }"
+        >
+          <p
+            @click="copyIt('org.apache.dubbo.samples.UserService::.condition-router')"
+            class="description-item-content with-card"
           >
-            <p
-              @click="copyIt('org.apache.dubbo.samples.UserService::.condition-router')"
-              class="description-item-content with-card"
-            >
-              org.apache.dubbo.samples.UserService::.condition-router
-              <CopyOutlined />
-            </p>
-          </a-descriptions-item>
+            org.apache.dubbo.samples.UserService::.condition-router
+            <CopyOutlined />
+          </p>
+        </a-descriptions-item>
 
-          <!-- ruleGranularity -->
-          <a-descriptions-item
-            :label="$t('flowControlDomain.ruleGranularity')"
-            :labelStyle="{ fontWeight: 'bold' }"
+        <!-- ruleGranularity -->
+        <a-descriptions-item
+          :label="$t('flowControlDomain.ruleGranularity')"
+          :labelStyle="{ fontWeight: 'bold' }"
+        >
+          <a-typography-paragraph>服务</a-typography-paragraph>
+        </a-descriptions-item>
+
+        <!-- actionObject -->
+        <a-descriptions-item
+          :label="$t('flowControlDomain.actionObject')"
+          :labelStyle="{ fontWeight: 'bold' }"
+        >
+          <p
+            @click="copyIt('org.apache.dubbo.samples.UserService')"
+            class="description-item-content with-card"
           >
-            <a-typography-paragraph> 服务 </a-typography-paragraph>
-          </a-descriptions-item>
+            org.apache.dubbo.samples.UserService
+            <CopyOutlined />
+          </p>
+        </a-descriptions-item>
 
-          <!-- actionObject -->
-          <a-descriptions-item
-            :label="$t('flowControlDomain.actionObject')"
-            :labelStyle="{ fontWeight: 'bold' }"
-          >
-            <p
-              @click="copyIt('org.apache.dubbo.samples.UserService')"
-              class="description-item-content with-card"
-            >
-              org.apache.dubbo.samples.UserService
-              <CopyOutlined />
-            </p>
-          </a-descriptions-item>
+        <!-- timeOfTakingEffect -->
+        <a-descriptions-item
+          :label="$t('flowControlDomain.timeOfTakingEffect')"
+          :labelStyle="{ fontWeight: 'bold' }"
+        >
+          <a-typography-paragraph> 20230/12/19 22:09:34</a-typography-paragraph>
+        </a-descriptions-item>
 
-          <!-- timeOfTakingEffect -->
-          <a-descriptions-item
-            :label="$t('flowControlDomain.timeOfTakingEffect')"
-            :labelStyle="{ fontWeight: 'bold' }"
-          >
-            <a-typography-paragraph> 20230/12/19 22:09:34</a-typography-paragraph>
-          </a-descriptions-item>
-
-          <!-- enabledStatus -->
-          <a-descriptions-item
-            :label="$t('flowControlDomain.enabledStatus')"
-            :labelStyle="{ fontWeight: 'bold' }"
-          >
-            <a-typography-paragraph>
-              {{ $t('flowControlDomain.enabled') }}
-            </a-typography-paragraph>
-          </a-descriptions-item>
-        </a-descriptions>
-      </a-card>
-    </a-flex>
-
-    <a-card title="配置【1】">
-      <a-space align="center" size="large">
-        <!--        enabledStatus-->
-        <a-typography-title :level="5">
-          {{ $t('flowControlDomain.enabledStatus') }}:
-          <a-typography-text>
+        <!-- enabledStatus -->
+        <a-descriptions-item
+          :label="$t('flowControlDomain.enabledStatus')"
+          :labelStyle="{ fontWeight: 'bold' }"
+        >
+          <a-typography-paragraph>
             {{ $t('flowControlDomain.enabled') }}
-          </a-typography-text>
-        </a-typography-title>
-        <!--endOfAction-->
-        <a-typography-title :level="5">
-          {{ $t('flowControlDomain.endOfAction') }}:
-          <a-typography-text>
-            {{ 'provider' }}
-          </a-typography-text>
-        </a-typography-title>
-      </a-space>
-      <a-space align="start" style="width: 100%">
-        <a-typography-title :level="5"
-          >{{ $t('flowControlDomain.actuatingRange') }}:</a-typography-title
-        >
-        <a-tag color="#2db7f5">address=10.255.10.11</a-tag>
-      </a-space>
+          </a-typography-paragraph>
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-card>
 
-      <a-space align="start" style="width: 100%">
-        <a-typography-title :level="5"
-          >{{ $t('flowControlDomain.configurationItem') }}:</a-typography-title
+    <a-card title="配置【1】" class="dynamic-config-card">
+      <a-descriptions :column="2">
+        <a-descriptions-item
+          :label="$t('flowControlDomain.enabledStatus')"
+          :labelStyle="{ fontWeight: 'bold' }"
         >
-        <a-tag color="#87d068">retries=3</a-tag>
-      </a-space>
+          {{ $t('flowControlDomain.enabled') }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          :label="$t('flowControlDomain.endOfAction')"
+          :labelStyle="{ fontWeight: 'bold' }"
+        >
+          {{ 'provider' }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          :label="$t('flowControlDomain.actuatingRange')"
+          :labelStyle="{ fontWeight: 'bold' }"
+          :span="2"
+        >
+          <a-input-group compact>
+            <a-input disabled value="address" style="width: 200px" />
+            <a-input disabled value="=" style="width: 50px" />
+            <a-input disabled value="10.255.10.11" style="width: 200px" />
+          </a-input-group>
+        </a-descriptions-item>
+        <a-descriptions-item
+          :label="$t('flowControlDomain.configurationItem')"
+          :labelStyle="{ fontWeight: 'bold' }"
+          :span="2"
+        >
+          <a-input-group compact>
+            <a-input disabled value="retries" style="width: 200px" />
+            <a-input disabled value="=" style="width: 50px" />
+            <a-input disabled value="3" style="width: 200px" />
+          </a-input-group>
+        </a-descriptions-item>
+      </a-descriptions>
     </a-card>
   </div>
 </template>
@@ -134,13 +139,19 @@
 </script>
 
 <style lang="less" scoped>
-.description-item-content {
-  &.no-card {
-    padding-left: 20px;
-  }
+.__container_traffic_config_form {
+  .dynamic-config-card {
+    margin-bottom: 20px;
+    .description-item-content {
+      &.no-card {
+        padding-left: 20px;
+      }
 
-  &.with-card:hover {
-    color: v-bind('PRIMARY_COLOR');
+      &.with-card:hover {
+        color: v-bind('PRIMARY_COLOR');
+      }
+    }
   }
+  
 }
 </style>