diff --git a/ui-vue3/src/api/mock/mockInstance.ts b/ui-vue3/src/api/mock/mockInstance.ts
index 7c723f3..54b5e5f 100644
--- a/ui-vue3/src/api/mock/mockInstance.ts
+++ b/ui-vue3/src/api/mock/mockInstance.ts
@@ -17,87 +17,101 @@
 
 import Mock from 'mockjs'
 
-Mock.mock('/mock/instance/search', 'get', {
-  code: 200,
-  message: 'laborum qui',
-  data: {
-    total: 66,
-    curPage: 82,
-    pageSize: 31,
-    data: [
-      {
-        ip: '205.216.185.96',
-        name: '用省中际解理',
-        deployState: {
-          label: 'dolor',
-          value: 'in amet',
-          level: 'amet nisi incididunt',
-          tip: '133.16.55.40'
-        },
-        deployCluster: 'veniam elit irure',
-        registerStates: [
-          {
-            label: 'in consequat est',
-            value: 'esse non Lorem',
-            level: 'sit',
-            tip: '122.249.164.252'
-          }
-        ],
-        registerClusters: ['cupidatat'],
-        cpu: 'officia cupidatat reprehenderit magna ex',
-        memory: 'mollit',
-        startTime: '2016-07-31 19:20:31',
-        registerTime: '2014-02-09 04:02:41',
-        labels: ['cupidat']
-      },
-      {
-        ip: '117.23.142.162',
-        name: '之受力即此',
-        deployState: {
-          label: 'sint culpa elit quis id',
-          value: 'amet',
-          level: 'adipisicing do',
-          tip: '112.176.231.68'
-        },
-        deployCluster: 'esse sit',
-        registerStates: [
-          {
-            label: 'ut',
-            value: 'eu sit',
-            level: 'in eiusmod ullamco',
-            tip: '220.153.108.236'
-          }
-        ],
-        registerClusters: ['ea consectetur'],
-        cpu: 'dolor sint deserunt',
-        memory: 'sint eu commodo proident',
-        startTime: '1994-12-22 18:24:57',
-        registerTime: '1986-07-24 03:18:24'
-      },
-      {
-        ip: '41.215.196.61',
-        name: '值青给值',
-        deployState: {
-          label: 'sunt',
-          value: 'consectetur in',
-          level: 'culpa dolore',
-          tip: '142.182.249.124'
-        },
-        deployCluster: 'cupidatat eu nostrud',
-        registerStates: [
-          {
-            label: 'ad quis',
-            value: 'Excepteur esse dolore Ut dolore',
-            level: 'ipsum ad quis',
-            tip: '220.55.203.4'
-          }
-        ],
-        registerClusters: ['Excepteur sit laboris'],
-        cpu: 'fugiat pariatur laborum ut',
-        memory: 'Lorem adipisicing sunt',
-        startTime: '1984-04-25 12:22:51',
-        registerTime: '1976-06-06 19:58:58'
+Mock.mock('/mock/instance/search', 'get', () => {
+  let total = Mock.mock('@integer(8, 1000)')
+  let list = []
+  for (let i = 0; i < total; i++) {
+    list.push({
+      ip: '121.90.211.162',
+      name: 'shop-user',
+      deployState: Mock.Random.pick(['Running', 'Pending', 'Terminating', 'Crashing']),
+      deployCluster: 'tx-shanghai-1',
+      registerStates: [
+        {
+          label: 'Registed',
+          value: 'Registed',
+          level: 'healthy'
+        }
+      ],
+      registerClusters: ['ali-hangzhou-1', 'ali-hangzhou-2'],
+      cpu: '1.2c',
+      memory: '2349MB',
+      startTime: '2023-06-09 03:47:10',
+      registerTime: '2023-06-09 03:48:20',
+      labels: {
+        region: 'beijing',
+        version: 'v1'
       }
-    ]
+    })
+  }
+  return {
+    code: 200,
+    message: 'success',
+    data: Mock.mock({
+      total: total,
+      curPage: 1,
+      pageSize: 10,
+      data: list
+    })
+  }
+})
+
+Mock.mock('/mock/instance/detail', 'get', () => {
+  return {
+    code: 200,
+    message: 'success',
+    data: {
+      deployState: {
+        label: 'pariatur do nulla',
+        value: 'ut',
+        level: 'ullamco veniam laboris ex',
+        tip: '246.179.217.170'
+      },
+      registerStates: [
+        {
+          label: 'magna Duis non',
+          value: 'laboris',
+          level: 'et dolore pariatur ipsum adipisicing',
+          tip: '204.174.144.51'
+        }
+      ],
+      dubboPort: 35,
+      ip: '15.1.144.52',
+      appName: '式团划',
+      workload: 'in labore enim',
+      labels: [null],
+      createTime: '2000-11-12 05:59:48',
+      startTime: '1986-03-29 11:48:17',
+      registerTime: '2000-01-26 19:09:48',
+      registerCluster: 'qui commodo dolore',
+      deployCluster: 'dolore laborum',
+      node: 'aliquip',
+      image: 'http://dummyimage.com/400x400',
+      probes: {
+        startupProbe: {
+          type: 'pariatur in quis',
+          port: 92,
+          open: false
+        },
+        readinessProbe: {
+          type: 'aute',
+          port: 52,
+          open: false
+        },
+        livenessPronbe: {
+          type: 'reprehenderit aute nostrud',
+          port: 66,
+          open: false
+        }
+      }
+    }
+  }
+})
+
+Mock.mock('/mock/instance/metrics', 'get', () => {
+  return {
+    code: 200,
+    message: 'success',
+    data: 'http://8.147.104.101:3000/d/dcf5defe-d198-4704-9edf-6520838880e9/instance?orgId=1&refresh=1m&from=1710644821536&to=1710731221536&theme=light'
   }
 })
diff --git a/ui-vue3/src/api/service/instance.ts b/ui-vue3/src/api/service/instance.ts
index c07ef80..e133c4a 100644
--- a/ui-vue3/src/api/service/instance.ts
+++ b/ui-vue3/src/api/service/instance.ts
@@ -24,3 +24,19 @@
     params
   })
 }
+
+export const getInstanceDetail = (params: any): Promise<any> => {
+  return request({
+    url: '/instance/detail',
+    method: 'get',
+    params
+  })
+}
+
+export const getInstanceMetricsInfo = (params: any): Promise<any> => {
+  return request({
+    url: '/instance/metrics',
+    method: 'get',
+    params
+  })
+}
diff --git a/ui-vue3/src/base/i18n/en.ts b/ui-vue3/src/base/i18n/en.ts
index 697a47f..f197248 100644
--- a/ui-vue3/src/base/i18n/en.ts
+++ b/ui-vue3/src/base/i18n/en.ts
@@ -18,7 +18,68 @@
 import type { I18nType } from './type.ts'
 
 const words: I18nType = {
+  destinationRuleDomain: {
+    YAMLView: 'YAML view',
+    formView: 'Form view'
+  },
+  virtualServiceDomain: {
+    YAMLView: 'YAML view',
+    formView: 'Form view'
+  },
+  dynamicConfigDomain: {
+    YAMLView: 'YAML view',
+    formView: 'Form view'
+  },
+  routingRuleDomain: {
+    YAMLView: 'YAML view',
+    formView: 'Form view'
+  },
+  tagRuleDomain: {
+    YAMLView: 'YAML view',
+    formView: 'Form view'
+  },
+  flowControlDomain: {
+    actuatingRange: 'Actuating range',
+    notSet: 'Not set',
+    versionRecords: 'Version records',
+    YAMLView: 'YAML View',
+    addConfiguration: 'Add configuration',
+    addConfigurationItem: 'Add configurationItem',
+    addFilter: 'Add filter',
+    configurationItem: 'Configuration item',
+    scopeScreening: 'Scope screening',
+    endOfAction: 'End of action',
+    addLabel: 'Add label',
+    actions: 'Actions',
+    filterType: 'Filter type',
+    labelName: 'Label name',
+    formView: 'Form view',
+    addMatch: 'Add match',
+    addRouter: 'Add router',
+    addressSubsetMatching: 'Address subset matching',
+    value: 'Value',
+    relation: 'Relation',
+    parameter: 'Parameter',
+    matchingDimension: 'Matching dimension',
+    requestParameterMatching: 'Request parameter matching',
+    ruleName: 'Rule name',
+    actionObject: 'Action object',
+    faultTolerantProtection: 'Fault-tolerant protection',
+    runTimeEffective: 'Run time effective',
+    ruleGranularity: 'Rule granularity',
+    timeOfTakingEffect: 'Time of taking effect',
+    enabledStatus: 'Enabled status',
+    priority: 'Priority',
+    off: 'off',
+    on: 'on',
+    opened: 'Opened',
+    closed: 'Closed',
+    enabled: 'Enabled',
+    disabled: 'Disabled'
+  },
   instanceDomain: {
+    flowDisabled: 'Flow disabled',
+    operatorLog: 'Operator log',
     enableAppInstanceLogs: 'Enable access logs for all instances of this application',
     appServiceRetries: 'Adjust the number of retries for the service provided by this application',
     appServiceLoadBalance:
diff --git a/ui-vue3/src/base/i18n/zh.ts b/ui-vue3/src/base/i18n/zh.ts
index 6215763..28e68a7 100644
--- a/ui-vue3/src/base/i18n/zh.ts
+++ b/ui-vue3/src/base/i18n/zh.ts
@@ -18,7 +18,68 @@
 import type { I18nType } from './type.ts'
 
 const words: I18nType = {
+  destinationRuleDomain: {
+    YAMLView: 'YAML视图',
+    formView: '表单视图'
+  },
+  virtualServiceDomain: {
+    YAMLView: 'YAML视图',
+    formView: '表单视图'
+  },
+  dynamicConfigDomain: {
+    YAMLView: 'YAML视图',
+    formView: '表单视图'
+  },
+  routingRuleDomain: {
+    YAMLView: 'YAML视图',
+    formView: '表单视图'
+  },
+  tagRuleDomain: {
+    YAMLView: 'YAML视图',
+    formView: '表单视图'
+  },
+  flowControlDomain: {
+    notSet: '未设置',
+    versionRecords: '版本记录',
+    YAMLView: 'YAML视图',
+    addConfiguration: '增加配置',
+    addConfigurationItem: '增加配置项',
+    addFilter: '增加筛选',
+    configurationItem: '配置项',
+    actuatingRange: '作用范围',
+    scopeScreening: '作用范围筛选',
+    endOfAction: '作用端',
+    actions: '操作',
+    filterType: '筛选类型',
+    labelName: '标签名',
+    formView: '表单视图',
+    addMatch: '增加匹配',
+    addRouter: '增加路由',
+    addLabel: '增加标签',
+    addressSubsetMatching: '地址子集匹配',
+    value: '值',
+    relation: '关系',
+    requestParameterMatching: '请求参数匹配',
+    matchingDimension: '匹配维度',
+    parameter: '参数',
+    ruleName: '规则名',
+    actionObject: '作用对象',
+    faultTolerantProtection: '容错保护',
+    runTimeEffective: '运行时生效',
+    ruleGranularity: '规则粒度',
+    timeOfTakingEffect: '生效时间',
+    enabledStatus: '启用状态',
+    priority: '优先级',
+    off: '关',
+    on: '开',
+    opened: '开启',
+    closed: '关闭',
+    enabled: '启用',
+    disabled: '禁用'
+  },
   instanceDomain: {
+    flowDisabled: '流量禁用',
+    operatorLog: '执行日志',
     CPU: 'CPU',
     enableAppInstanceLogs: '开启该应用所有实例的访问日志',
     appServiceLoadBalance: '调整应用提供服务的负载均衡策略',
@@ -35,7 +96,7 @@
     loadBalance: '负载均衡',
     monitor: '监控',
     linkTracking: '链路追踪',
-    configuration: '配置',
+    configuration: '场景配置',
     event: '事件',
     healthExamination_k8s: '健康检查(k8s)',
     instanceLabel: '实例标签',
diff --git a/ui-vue3/src/router/defaultRoutes.ts b/ui-vue3/src/router/defaultRoutes.ts
index d3ebc54..a33feef 100644
--- a/ui-vue3/src/router/defaultRoutes.ts
+++ b/ui-vue3/src/router/defaultRoutes.ts
@@ -293,19 +293,113 @@
           {
             path: '/routingRule',
             name: 'routingRule',
-            component: () => import('../views/traffic/routingRule/index.vue')
+            redirect: 'index',
+            component: LayoutTab,
+            meta: {
+              tab_parent: true
+            },
+            children: [
+              {
+                path: '/index',
+                name: 'routingRuleIndex',
+                component: () => import('../views/traffic/routingRule/index.vue'),
+                meta: {
+                  hidden: true
+                }
+              },
+              {
+                path: '/formview/:ruleName',
+                name: 'routingRuleDomain.formView',
+                component: () => import('../views/traffic/routingRule/tabs/formView.vue'),
+                meta: {
+                  tab: true,
+                  icon: 'oui:apm-trace'
+                }
+              },
+              {
+                path: '/yamlview/:ruleName',
+                name: 'routingRuleDomain.YAMLView',
+                component: () => import('../views/traffic/routingRule/tabs/YAMLView.vue'),
+                meta: {
+                  tab: true,
+                  icon: 'oui:app-console'
+                }
+              }
+            ]
           },
           {
             path: '/tagRule',
             name: 'tagRule',
-            component: () => import('../views/traffic/tagRule/index.vue'),
-            meta: {}
+            redirect: 'index',
+            component: LayoutTab,
+            meta: {
+              tab_parent: true
+            },
+            children: [
+              {
+                path: '/index',
+                name: 'tagRuleIndex',
+                component: () => import('../views/traffic/tagRule/index.vue'),
+                meta: {
+                  hidden: true
+                }
+              },
+              {
+                path: '/formview/:ruleName',
+                name: 'tagRuleDomain.formView',
+                component: () => import('../views/traffic/tagRule/tabs/formView.vue'),
+                meta: {
+                  tab: true,
+                  icon: 'oui:apm-trace'
+                }
+              },
+              {
+                path: '/yamlview/:ruleName',
+                name: 'tagRuleDomain.YAMLView',
+                component: () => import('../views/traffic/tagRule/tabs/YAMLView.vue'),
+                meta: {
+                  tab: true,
+                  icon: 'oui:app-console'
+                }
+              }
+            ]
           },
           {
             path: '/dynamicConfig',
             name: 'dynamicConfig',
-            component: () => import('../views/traffic/dynamicConfig/index.vue'),
-            meta: {}
+            redirect: 'index',
+            component: LayoutTab,
+            meta: {
+              tab_parent: true
+            },
+            children: [
+              {
+                path: '/index',
+                name: 'dynamicConfigIndex',
+                component: () => import('../views/traffic/dynamicConfig/index.vue'),
+                meta: {
+                  hidden: true
+                }
+              },
+              {
+                path: '/formview/:ruleName',
+                name: 'dynamicConfigDomain.formView',
+                component: () => import('../views/traffic/dynamicConfig/tabs/formView.vue'),
+                meta: {
+                  tab: true,
+                  icon: 'oui:apm-trace'
+                }
+              },
+              {
+                path: '/yamlview/:ruleName',
+                name: 'dynamicConfigDomain.YAMLView',
+                component: () => import('../views/traffic/dynamicConfig/tabs/YAMLView.vue'),
+                meta: {
+                  tab: true,
+                  icon: 'oui:app-console'
+                }
+              }
+            ]
           },
           {
             path: '/meshRule',
@@ -314,12 +408,76 @@
               {
                 path: '/virtualService',
                 name: 'virtualService',
-                component: () => import('../views/traffic/virtualService/index.vue')
+                redirect: 'index',
+                component: LayoutTab,
+                meta: {
+                  tab_parent: true
+                },
+                children: [
+                  {
+                    path: '/index',
+                    name: 'virtualServiceIndex',
+                    component: () => import('../views/traffic/virtualService/index.vue'),
+                    meta: {
+                      hidden: true
+                    }
+                  },
+                  {
+                    path: '/formview/:ruleName',
+                    name: 'virtualServiceDomain.formView',
+                    component: () => import('../views/traffic/virtualService/tabs/formView.vue'),
+                    meta: {
+                      tab: true,
+                      icon: 'oui:apm-trace'
+                    }
+                  },
+                  {
+                    path: '/yamlview/:ruleName',
+                    name: 'virtualServiceDomain.YAMLView',
+                    component: () => import('../views/traffic/virtualService/tabs/YAMLView.vue'),
+                    meta: {
+                      tab: true,
+                      icon: 'oui:app-console'
+                    }
+                  }
+                ]
               },
               {
                 path: '/destinationRule',
                 name: 'destinationRule',
-                component: () => import('../views/traffic/destinationRule/index.vue')
+                redirect: 'index',
+                component: LayoutTab,
+                meta: {
+                  tab_parent: true
+                },
+                children: [
+                  {
+                    path: '/index',
+                    name: 'destinationRuleIndex',
+                    component: () => import('../views/traffic/destinationRule/index.vue'),
+                    meta: {
+                      hidden: true
+                    }
+                  },
+                  {
+                    path: '/formview/:ruleName',
+                    name: 'destinationRuleDomain.formView',
+                    component: () => import('../views/traffic/destinationRule/tabs/formView.vue'),
+                    meta: {
+                      tab: true,
+                      icon: 'oui:apm-trace'
+                    }
+                  },
+                  {
+                    path: '/yamlview/:ruleName',
+                    name: 'destinationRuleDomain.YAMLView',
+                    component: () => import('../views/traffic/destinationRule/tabs/YAMLView.vue'),
+                    meta: {
+                      tab: true,
+                      icon: 'oui:app-console'
+                    }
+                  }
+                ]
               }
             ]
           }
diff --git a/ui-vue3/src/views/resources/instances/index.vue b/ui-vue3/src/views/resources/instances/index.vue
index cf6e201..b4fdac8 100644
--- a/ui-vue3/src/views/resources/instances/index.vue
+++ b/ui-vue3/src/views/resources/instances/index.vue
@@ -23,31 +23,40 @@
         </template>
 
         <template v-if="column.dataIndex === 'deployCluster'">
-          <a-tag color="success">
+          <a-tag color="grey">
             {{ text }}
           </a-tag>
         </template>
 
+        <template v-if="column.dataIndex === 'deployState'">
+          <a-tag :color="INSTANCE_DEPLOY_COLOR[text.toUpperCase()]">{{ text }}</a-tag>
+        </template>
+
         <template v-if="column.dataIndex === 'registerStates'">
-          <a-typography-text type="success" v-for="t in text">{{ t.label }}</a-typography-text>
+          <a-tag :color="INSTANCE_REGISTER_COLOR[t.level.toUpperCase()]" v-for="t in text">
+            {{ t.label }}
+          </a-tag>
         </template>
 
         <template v-if="column.dataIndex === 'registerClusters'">
-          <a-tag v-for="t in text" color="warning">
+          <a-tag v-for="t in text" color="grey">
             {{ t }}
           </a-tag>
         </template>
 
         <template v-if="column.dataIndex === 'labels'">
-          <a-tag v-for="t in text" color="warning">
+          <a-tag v-for="t in text" color="grey">
             {{ t }}
           </a-tag>
         </template>
-        <template v-if="column.dataIndex === 'name'">
-          <router-link :to="`detail/${record[column.key]}`">{{ text }}</router-link>
-        </template>
+
         <template v-if="column.dataIndex === 'ip'">
-          <router-link :to="`detail/${record[column.key]}`">{{ text }}</router-link>
+          <span class="app-link" @click="router.replace(`detail/${record[column.key]}`)">
+            <b>
+              <Icon style="margin-bottom: -2px" icon="material-symbols:attach-file-rounded"></Icon>
+              {{ text }}
+            </b>
+          </span>
         </template>
       </template>
     </search-table>
@@ -60,14 +69,19 @@
 import SearchTable from '@/components/SearchTable.vue'
 import { SearchDomain, sortString } from '@/utils/SearchUtil'
 import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
+import { INSTANCE_DEPLOY_COLOR, INSTANCE_REGISTER_COLOR } from '@/base/constants'
+import router from '@/router'
+import { Icon } from '@iconify/vue'
+import { PRIMARY_COLOR } from '@/base/constants'
 
+let __null = PRIMARY_COLOR
 let columns = [
   {
     title: 'instanceDomain.instanceIP',
     key: 'ip',
     dataIndex: 'ip',
     sorter: (a: any, b: any) => sortString(a.ip, b.ip),
-    width: 140
+    width: 200
   },
   {
     title: 'instanceDomain.instanceName',
@@ -169,5 +183,15 @@
 <style lang="less" scoped>
 .search-table-container {
   min-height: 60vh;
+
+  .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);
+    }
+  }
 }
 </style>
diff --git a/ui-vue3/src/views/resources/instances/tabs/configuration.vue b/ui-vue3/src/views/resources/instances/tabs/configuration.vue
index 26e4c98..b590e61 100644
--- a/ui-vue3/src/views/resources/instances/tabs/configuration.vue
+++ b/ui-vue3/src/views/resources/instances/tabs/configuration.vue
@@ -16,105 +16,71 @@
 -->
 
 <template>
-  <a-descriptions title="" layout="vertical" :column="2">
-    <!-- execution log -->
-    <a-descriptions-item :labelStyle="{ fontWeight: 'bold' }">
-      <template v-slot:label>
-        {{ $t('instanceDomain.executionLog') }}
-        <a-tooltip placement="topLeft">
-          <template #title>
-            {{ $t('instanceDomain.enableAppInstanceLogs') }}(provider.accesslog)
-          </template>
-          <Icon icon="bitcoin-icons:info-circle-outline" class="iconStyle" />
-        </a-tooltip>
+  <div class="__container_app_config">
+    <config-page :options="options">
+      <template v-slot:form_log="{ current }">
+        <a-form-item :label="$t('instanceDomain.operatorLog')" name="logFlag">
+          <a-switch v-model:checked="current.form.logFlag"></a-switch>
+        </a-form-item>
       </template>
 
-      <span :class="{ active: !state }" :style="{ color: 'black' }">
-        {{ $t('instanceDomain.close') }}
-      </span>
-      <a-switch v-model:checked="state" :loading="loading" />
-      <span :class="{ active: state }" :style="{ color: state ? PRIMARY_COLOR : 'black' }">
-        {{ $t('instanceDomain.enable') }}
-      </span>
-    </a-descriptions-item>
-
-    <!-- retry count -->
-    <a-descriptions-item :labelStyle="{ fontWeight: 'bold' }">
-      <template v-slot:label>
-        {{ $t('instanceDomain.retryCount') }}
-        <a-tooltip placement="topLeft">
-          <template #title>{{ $t('instanceDomain.appServiceRetries') }}</template>
-          <Icon icon="bitcoin-icons:info-circle-outline" class="iconStyle" />
-        </a-tooltip>
+      <template v-slot:form_flowDisabled="{ current }">
+        <a-form-item :label="$t('instanceDomain.flowDisabled')" name="flowDisabledFlag">
+          <a-switch v-model:checked="current.form.flowDisabledFlag"></a-switch>
+        </a-form-item>
       </template>
-      <a-typography-paragraph editable v-model:content="retryCount"> </a-typography-paragraph>
-    </a-descriptions-item>
-
-    <!-- Load Balance -->
-    <a-descriptions-item :labelStyle="{ fontWeight: 'bold' }">
-      <template v-slot:label>
-        {{ $t('instanceDomain.loadBalance') }}
-        <a-tooltip placement="topLeft">
-          <template #title
-            >{{ $t('instanceDomain.appServiceLoadBalance') }}(provider.loadbalance)</template
-          >
-          <Icon icon="bitcoin-icons:info-circle-outline" class="iconStyle" />
-        </a-tooltip>
-      </template>
-      <a-typography-paragraph editable v-model:content="loadBalance"> </a-typography-paragraph>
-    </a-descriptions-item>
-
-    <!-- timeout -->
-    <a-descriptions-item :labelStyle="{ fontWeight: 'bold' }">
-      <template v-slot:label>
-        {{ $t('instanceDomain.timeout_ms') }}
-        <a-tooltip placement="topLeft">
-          <template #title>
-            {{ $t('instanceDomain.appServiceTimeout') }}(provider.timeout)
-          </template>
-          <Icon icon="bitcoin-icons:info-circle-outline" class="iconStyle" />
-        </a-tooltip>
-      </template>
-
-      <a-typography-paragraph editable v-model:content="timeout"> </a-typography-paragraph>
-    </a-descriptions-item>
-
-    <!-- Cluster approach -->
-    <a-descriptions-item :labelStyle="{ fontWeight: 'bold' }">
-      <template v-slot:label>
-        {{ $t('instanceDomain.clusterApproach') }}
-        <a-tooltip placement="topLeft">
-          <template #title>{{ $t('instanceDomain.appServiceNegativeClusteringMethod') }}</template>
-          <Icon icon="bitcoin-icons:info-circle-outline" class="iconStyle" />
-        </a-tooltip>
-      </template>
-
-      <a-typography-paragraph editable v-model:content="clusterApproach"> </a-typography-paragraph>
-    </a-descriptions-item>
-  </a-descriptions>
+    </config-page>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
-import { Icon } from '@iconify/vue'
-import { PRIMARY_COLOR } from '@/base/constants'
-
-// 执行日志开关
-const state = ref('')
-const loading = ref(false)
-const loadBalance = ref('random')
-const clusterApproach = ref('failover')
-const retryCount = ref('2次')
-const timeout = ref('1000 ms')
+import { onMounted, reactive, ref } from 'vue'
+import ConfigPage from '@/components/ConfigPage.vue'
+let options: any = reactive({
+  list: [
+    {
+      title: 'instanceDomain.operatorLog',
+      key: 'log',
+      form: {
+        logFlag: false
+      },
+      submit: (form: {}) => {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve(1)
+          }, 1000)
+        })
+      },
+      reset(form: any) {
+        form.logFlag = false
+      }
+    },
+    {
+      title: 'instanceDomain.flowDisabled',
+      form: {
+        flowDisabledFlag: false
+      },
+      key: 'flowDisabled',
+      submit: (form: {}) => {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve(1)
+          }, 1000)
+        })
+      },
+      reset(form: any) {
+        form.logFlag = false
+      }
+    }
+  ],
+  current: [0]
+})
+onMounted(() => {
+  console.log(333)
+})
 </script>
 
 <style lang="less" scoped>
-.active {
-  font-size: 13px;
-  font-weight: bold;
-}
-
-.iconStyle {
-  font-size: 17px;
+.__container_app_config {
 }
 </style>
diff --git a/ui-vue3/src/views/resources/instances/tabs/details.vue b/ui-vue3/src/views/resources/instances/tabs/details.vue
index dbac10f..179ad36 100644
--- a/ui-vue3/src/views/resources/instances/tabs/details.vue
+++ b/ui-vue3/src/views/resources/instances/tabs/details.vue
@@ -18,161 +18,237 @@
 <template>
   <div class="__container_app_detail">
     <a-flex>
-      <a-descriptions title="" layout="vertical" :column="2">
-        <!-- instanceName -->
-        <a-descriptions-item
-          :label="$t('instanceDomain.instanceName')"
-          :labelStyle="{ fontWeight: 'bold' }"
-        >
-          <a-typography-paragraph copyable>
-            {{ instanceName }}
-          </a-typography-paragraph>
-        </a-descriptions-item>
+      <a-card-grid>
+        <a-row :gutter="10">
+          <a-col :span="12">
+            <a-card class="_detail">
+              <a-descriptions class="description-column" :column="1">
+                <!-- instanceName -->
+                <a-descriptions-item
+                  :label="$t('instanceDomain.instanceName')"
+                  :labelStyle="{ fontWeight: 'bold' }"
+                >
+                  <p @click="copyIt(instanceName)" class="description-item-content with-card">
+                    {{ instanceName }}
+                    <CopyOutlined />
+                  </p>
+                </a-descriptions-item>
 
-        <!-- Creation time -->
-        <a-descriptions-item
-          :label="$t('instanceDomain.creationTime_k8s')"
-          :labelStyle="{ fontWeight: 'bold' }"
-        >
-          <a-typography-paragraph> 20230/12/19 22:09:34 </a-typography-paragraph>
-        </a-descriptions-item>
+                <!-- Creation time -->
+                <a-descriptions-item
+                  :label="$t('instanceDomain.creationTime_k8s')"
+                  :labelStyle="{ fontWeight: 'bold' }"
+                >
+                  <a-typography-paragraph> 20230/12/19 22:09:34</a-typography-paragraph>
+                </a-descriptions-item>
 
-        <!-- deployState -->
-        <a-descriptions-item
-          :label="$t('instanceDomain.deployState')"
-          :labelStyle="{ fontWeight: 'bold' }"
-        >
-          <a-typography-paragraph type="success"> Running </a-typography-paragraph>
-          <a-typography-paragraph type="danger"> Stop </a-typography-paragraph>
-        </a-descriptions-item>
+                <!-- deployState -->
+                <a-descriptions-item
+                  :label="$t('instanceDomain.deployState')"
+                  :labelStyle="{ fontWeight: 'bold' }"
+                >
+                  <a-typography-paragraph type="success"> Running</a-typography-paragraph>
+                  <a-typography-paragraph type="danger"> Stop</a-typography-paragraph>
+                </a-descriptions-item>
+              </a-descriptions>
+            </a-card>
+          </a-col>
 
-        <!-- Start time -->
-        <a-descriptions-item
-          :label="$t('instanceDomain.startTime_k8s')"
-          :labelStyle="{ fontWeight: 'bold' }"
-        >
-          <a-typography-paragraph> 20230/12/19 22:09:34 </a-typography-paragraph>
-        </a-descriptions-item>
+          <a-col :span="12">
+            <a-card class="_detail">
+              <a-descriptions class="description-column" :column="1">
+                <!-- Start time -->
+                <a-descriptions-item
+                  :label="$t('instanceDomain.startTime_k8s')"
+                  :labelStyle="{ fontWeight: 'bold' }"
+                >
+                  <a-typography-paragraph> 20230/12/19 22:09:34</a-typography-paragraph>
+                </a-descriptions-item>
 
-        <!-- registerStates -->
-        <a-descriptions-item
-          :label="$t('instanceDomain.registerStates')"
-          :labelStyle="{ fontWeight: 'bold' }"
-        >
-          <a-typography-paragraph type="success"> Registed </a-typography-paragraph>
-          <a-typography-paragraph type="danger"> UnRegisted </a-typography-paragraph>
-        </a-descriptions-item>
+                <!-- registerStates -->
+                <a-descriptions-item
+                  :label="$t('instanceDomain.registerStates')"
+                  :labelStyle="{ fontWeight: 'bold' }"
+                >
+                  <a-typography-paragraph type="success"> Registed</a-typography-paragraph>
+                  <a-typography-paragraph type="danger"> UnRegisted</a-typography-paragraph>
+                </a-descriptions-item>
 
-        <!-- Register Time -->
-        <a-descriptions-item
-          :label="$t('instanceDomain.registerTime')"
-          :labelStyle="{ fontWeight: 'bold' }"
-        >
-          <a-typography-paragraph> 20230/12/19 22:09:34 </a-typography-paragraph>
-        </a-descriptions-item>
+                <!-- Register Time -->
+                <a-descriptions-item
+                  :label="$t('instanceDomain.registerTime')"
+                  :labelStyle="{ fontWeight: 'bold' }"
+                >
+                  <a-typography-paragraph> 20230/12/19 22:09:34</a-typography-paragraph>
+                </a-descriptions-item>
+              </a-descriptions>
+            </a-card>
+          </a-col>
+        </a-row>
 
-        <!-- instanceIP -->
-        <a-descriptions-item
-          :label="$t('instanceDomain.instanceIP')"
-          :labelStyle="{ fontWeight: 'bold' }"
-        >
-          <a-typography-paragraph copyable> 192.168.0.1 </a-typography-paragraph>
-        </a-descriptions-item>
+        <a-card style="margin-top: 10px" class="_detail">
+          <a-descriptions class="description-column" :column="1">
+            <!-- instanceIP -->
+            <a-descriptions-item
+              :label="$t('instanceDomain.instanceIP')"
+              :labelStyle="{ fontWeight: 'bold' }"
+            >
+              <p @click="copyIt('192.168.0.1')" class="description-item-content with-card">
+                192.168.0.1
+                <CopyOutlined />
+              </p>
+            </a-descriptions-item>
 
-        <!-- deploy cluster -->
-        <a-descriptions-item
-          :label="$t('instanceDomain.deployCluster')"
-          :labelStyle="{ fontWeight: 'bold' }"
-        >
-          <a-typography-paragraph> sz-ali-zk-f8otyo4r </a-typography-paragraph>
-        </a-descriptions-item>
+            <!-- deploy cluster -->
+            <a-descriptions-item
+              :label="$t('instanceDomain.deployCluster')"
+              :labelStyle="{ fontWeight: 'bold' }"
+            >
+              <a-typography-paragraph> sz-ali-zk-f8otyo4r</a-typography-paragraph>
+            </a-descriptions-item>
 
-        <!-- Dubbo Port -->
-        <a-descriptions-item
-          :label="$t('instanceDomain.dubboPort')"
-          :labelStyle="{ fontWeight: 'bold' }"
-        >
-          <a-typography-paragraph copyable> 2088 </a-typography-paragraph>
-        </a-descriptions-item>
+            <!-- Dubbo Port -->
+            <a-descriptions-item
+              :label="$t('instanceDomain.dubboPort')"
+              :labelStyle="{ fontWeight: 'bold' }"
+            >
+              <p @click="copyIt('2088')" class="description-item-content with-card">
+                2088
+                <CopyOutlined />
+              </p>
+            </a-descriptions-item>
 
-        <!-- Register cluster -->
-        <a-descriptions-item
-          :label="$t('instanceDomain.registerCluster')"
-          :labelStyle="{ fontWeight: 'bold' }"
-        >
-          <a-typography-paragraph> sz-ali-zk-f8otyo4r </a-typography-paragraph>
-        </a-descriptions-item>
+            <!-- Register cluster -->
+            <a-descriptions-item
+              :label="$t('instanceDomain.registerCluster')"
+              :labelStyle="{ fontWeight: 'bold' }"
+            >
+              <a-typography-paragraph> sz-ali-zk-f8otyo4r</a-typography-paragraph>
+            </a-descriptions-item>
 
-        <!-- whichApplication -->
-        <a-descriptions-item
-          :label="$t('instanceDomain.whichApplication')"
-          :labelStyle="{ fontWeight: 'bold' }"
-        >
-          <a-typography-link @click="checkApplication()"> shop-b </a-typography-link>
-        </a-descriptions-item>
+            <!-- whichApplication -->
+            <a-descriptions-item
+              :label="$t('instanceDomain.whichApplication')"
+              :labelStyle="{ fontWeight: 'bold' }"
+            >
+              <a-typography-link @click="checkApplication()"> shop-b</a-typography-link>
+            </a-descriptions-item>
 
-        <!-- Node IP -->
-        <a-descriptions-item
-          :label="$t('instanceDomain.node')"
-          :labelStyle="{ fontWeight: 'bold' }"
-        >
-          <a-typography-paragraph copyable> 30.33.0.1 </a-typography-paragraph>
-        </a-descriptions-item>
+            <!-- Node IP -->
+            <a-descriptions-item
+              :label="$t('instanceDomain.node')"
+              :labelStyle="{ fontWeight: 'bold' }"
+            >
+              <p @click="copyIt('30.33.0.1')" class="description-item-content with-card">
+                30.33.0.1
+                <CopyOutlined />
+              </p>
+            </a-descriptions-item>
 
-        <!-- Owning workload(k8s) -->
-        <a-descriptions-item
-          :label="$t('instanceDomain.owningWorkload_k8s')"
-          :labelStyle="{ fontWeight: 'bold' }"
-        >
-          <a-typography-paragraph> shop-user-base </a-typography-paragraph>
-        </a-descriptions-item>
+            <!-- Owning workload(k8s) -->
+            <a-descriptions-item
+              :label="$t('instanceDomain.owningWorkload_k8s')"
+              :labelStyle="{ fontWeight: 'bold' }"
+            >
+              <a-typography-paragraph> shop-user-base</a-typography-paragraph>
+            </a-descriptions-item>
 
-        <!-- image -->
-        <a-descriptions-item
-          :label="$t('instanceDomain.instanceImage_k8s')"
-          :labelStyle="{ fontWeight: 'bold' }"
-        >
-          <a-typography-paragraph copyable>
-            apache/org.apahce.dubbo.samples.shop-user:v1
-          </a-typography-paragraph>
-        </a-descriptions-item>
+            <!-- image -->
+            <a-descriptions-item
+              :label="$t('instanceDomain.instanceImage_k8s')"
+              :labelStyle="{ fontWeight: 'bold' }"
+            >
+              <a-card class="description-item-card">
+                <p
+                  @click="copyIt(' apache/org.apahce.dubbo.samples.shop-user:v1')"
+                  class="description-item-content with-card"
+                >
+                  apache/org.apahce.dubbo.samples.shop-user:v1
+                  <CopyOutlined />
+                </p>
+              </a-card>
+            </a-descriptions-item>
 
-        <!-- instanceLabel -->
-        <a-descriptions-item
-          :label="$t('instanceDomain.instanceLabel')"
-          :labelStyle="{ fontWeight: 'bold' }"
-        >
-          <a-card class="description-item-card">
-            <a-tag>app=shop-user</a-tag>
-            <a-tag>version=v1</a-tag>
-            <a-tag>region=shenzhen</a-tag>
-          </a-card>
-        </a-descriptions-item>
+            <!-- instanceLabel -->
+            <a-descriptions-item
+              :label="$t('instanceDomain.instanceLabel')"
+              :labelStyle="{ fontWeight: 'bold' }"
+            >
+              <a-card class="description-item-card">
+                <a-tag>app=shop-user</a-tag>
+                <a-tag>version=v1</a-tag>
+                <a-tag>region=shenzhen</a-tag>
+              </a-card>
+            </a-descriptions-item>
 
-        <!-- health examination -->
-        <a-descriptions-item
-          :label="$t('instanceDomain.healthExamination_k8s')"
-          :labelStyle="{ fontWeight: 'bold' }"
-        >
-          <a-card class="description-item-card">
-            <p class="white_space">启动探针(StartupProbe):关闭</p>
-            <p class="white_space">就绪探针(ReadinessProbe):开启 类型: Http 端口:22222</p>
-            <p class="white_space">存活探针(LivenessProbe):开启 类型: Http 端口:22222</p>
-          </a-card>
-        </a-descriptions-item>
-      </a-descriptions>
+            <!-- health examination -->
+            <a-descriptions-item
+              :label="$t('instanceDomain.healthExamination_k8s')"
+              :labelStyle="{ fontWeight: 'bold' }"
+            >
+              <a-card class="description-item-card">
+                <p class="white_space">启动探针(StartupProbe):关闭</p>
+                <p class="white_space">就绪探针(ReadinessProbe):开启 类型: Http 端口:22222</p>
+                <p class="white_space">存活探针(LivenessProbe):开启 类型: Http 端口:22222</p>
+              </a-card>
+            </a-descriptions-item>
+          </a-descriptions>
+        </a-card>
+      </a-card-grid>
     </a-flex>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { type ComponentInternalInstance, getCurrentInstance, ref } from 'vue'
+import { CopyOutlined } from '@ant-design/icons-vue'
+import useClipboard from 'vue-clipboard3'
+import { message } from 'ant-design-vue'
+import { PRIMARY_COLOR, PRIMARY_COLOR_T } from '@/base/constants'
+
+const {
+  appContext: {
+    config: { globalProperties }
+  }
+} = <ComponentInternalInstance>getCurrentInstance()
+
+let __ = PRIMARY_COLOR
+let PRIMARY_COLOR_20 = PRIMARY_COLOR_T('20')
 
 // instance name
 const instanceName = ref('shop-user-base-7e33f1e')
 
 // Click on the application name to view the application
 const checkApplication = () => {}
+
+const toClipboard = useClipboard().toClipboard
+
+function copyIt(v: string) {
+  message.success(globalProperties.$t('messageDomain.success.copy'))
+  toClipboard(v)
+}
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.__container_app_detail {
+  ._detail {
+    box-shadow: 8px 8px 4px rgba(162, 162, 162, 0.19);
+  }
+  .description-item-content {
+    &.no-card {
+      padding-left: 20px;
+    }
+    &.with-card:hover {
+      color: v-bind('PRIMARY_COLOR');
+    }
+  }
+  .description-item-card {
+    :deep(.ant-card-body) {
+      padding: 10px;
+    }
+    width: 80%;
+    margin-left: 20px;
+    border: 1px dashed rgba(162, 162, 162, 0.19);
+  }
+}
+</style>
diff --git a/ui-vue3/src/views/resources/instances/tabs/monitor.vue b/ui-vue3/src/views/resources/instances/tabs/monitor.vue
index bd1abc2..66cd44a 100644
--- a/ui-vue3/src/views/resources/instances/tabs/monitor.vue
+++ b/ui-vue3/src/views/resources/instances/tabs/monitor.vue
@@ -16,11 +16,66 @@
 -->
 
 <template>
-  <div>monitor todo</div>
+  <div class="__container_tabDemo3">
+    <div class="option">
+      <a-button class="btn" @click="refresh"> refresh </a-button>
+      <a-button class="btn" @click="newPageForGrafana"> grafana </a-button>
+    </div>
+    <a-spin class="spin" :spinning="!showIframe">
+      <div class="__container_iframe_container">
+        <iframe v-if="showIframe" id="grafanaIframe" :src="grafanaUrl" frameborder="0"></iframe>
+      </div>
+    </a-spin>
+  </div>
 </template>
 
-<script lang="ts" setup>
-import { ref } from 'vue'
-</script>
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { getInstanceMetricsInfo } from '@/api/service/instance'
 
-<style lang="less" scoped></style>
+let grafanaUrl = ref('')
+let showIframe = ref(true)
+onMounted(async () => {
+  let res = await getInstanceMetricsInfo({})
+  grafanaUrl.value = res.data
+})
+
+function refresh() {
+  showIframe.value = false
+  setTimeout(() => {
+    showIframe.value = true
+  }, 200)
+}
+
+function newPageForGrafana() {
+  window.open(grafanaUrl.value, '_blank')
+}
+</script>
+<style lang="less" scoped>
+.__container_tabDemo3 {
+  .option {
+    padding-left: 16px;
+    .btn {
+      margin-right: 10px;
+    }
+  }
+  :deep(.spin) {
+    margin-top: 30px;
+  }
+  .__container_iframe_container {
+    z-index: 1;
+    position: relative;
+    width: calc(100vw - 332px);
+    height: calc(100vh - 200px);
+    clip-path: inset(20px 10px);
+
+    #grafanaIframe {
+      z-index: 0;
+      top: -112px;
+      position: absolute;
+      width: calc(100vw - 332px);
+      height: calc(100vh - 200px);
+    }
+  }
+}
+</style>
diff --git a/ui-vue3/src/views/traffic/destinationRule/index.vue b/ui-vue3/src/views/traffic/destinationRule/index.vue
index 05b92be..dc1fb10 100644
--- a/ui-vue3/src/views/traffic/destinationRule/index.vue
+++ b/ui-vue3/src/views/traffic/destinationRule/index.vue
@@ -20,9 +20,11 @@
       <template #customOperation>
         <a-button type="primary">新增 Destination Rule</a-button>
       </template>
-      <template #bodyCell="{ text, column }">
+      <template #bodyCell="{ text, column, record }">
         <template v-if="column.dataIndex === 'ruleName'">
-          <a-button type="link">{{ text }}</a-button>
+          <a-button type="link" @click="router.replace(`formview/${record[column.key]}`)">{{
+            text
+          }}</a-button>
         </template>
         <template v-if="column.dataIndex === 'operation'">
           <a-button type="link">查看</a-button>
@@ -47,6 +49,7 @@
 import SearchTable from '@/components/SearchTable.vue'
 import { SearchDomain, sortString } from '@/utils/SearchUtil'
 import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
+import router from '@/router'
 
 let columns = [
   {
diff --git a/ui-vue3/src/views/traffic/destinationRule/tabs/YAMLView.vue b/ui-vue3/src/views/traffic/destinationRule/tabs/YAMLView.vue
new file mode 100644
index 0000000..785fa05
--- /dev/null
+++ b/ui-vue3/src/views/traffic/destinationRule/tabs/YAMLView.vue
@@ -0,0 +1,103 @@
+<!--
+  ~ 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>
+  <a-card>
+    <a-flex style="width: 100%">
+      <a-col :span="isDrawerOpened ? 24 - sliderSpan : 24" class="left">
+        <a-flex vertical align="end">
+          <a-button type="text" style="color: #0a90d5" @click="isDrawerOpened = !isDrawerOpened">
+            {{ $t('flowControlDomain.versionRecords') }}
+            <DoubleLeftOutlined v-if="!isDrawerOpened" />
+            <DoubleRightOutlined v-else />
+          </a-button>
+
+          <div class="editorBox">
+            <MonacoEditor
+              :modelValue="YAMLValue"
+              theme="vs-dark"
+              :height="500"
+              language="yaml"
+              :readonly="isReadonly"
+            />
+          </div>
+        </a-flex>
+      </a-col>
+
+      <a-col :span="isDrawerOpened ? sliderSpan : 0" class="right">
+        <a-card v-if="isDrawerOpened" class="sliderBox">
+          <a-card v-for="i in 2" :key="i">
+            <p>修改时间: 2024/3/20 15:20:31</p>
+            <p>版本号: xo842xqpx834</p>
+
+            <a-flex justify="flex-end">
+              <a-button type="text" style="color: #0a90d5">查看</a-button>
+              <a-button type="text" style="color: #0a90d5">回滚</a-button>
+            </a-flex>
+          </a-card>
+        </a-card>
+      </a-col>
+    </a-flex>
+  </a-card>
+</template>
+
+<script setup lang="ts">
+import MonacoEditor from '@/components/editor/MonacoEditor.vue'
+import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue'
+import { computed, ref } from 'vue'
+
+const isReadonly = ref(true)
+
+const isDrawerOpened = ref(false)
+
+const sliderSpan = ref(8)
+
+const YAMLValue = ref(
+  'configVersion: v3.0\n' +
+    'force: true\n' +
+    'enabled: true\n' +
+    'key: shop-detail\n' +
+    'tags:\n' +
+    '  - name: gray\n' +
+    '    match:\n' +
+    '      - key: env\n' +
+    '        value:\n' +
+    '          exact: gray'
+)
+</script>
+
+<style scoped lang="less">
+.editorBox {
+  border-radius: 0.3rem;
+  overflow: hidden;
+  width: 100%;
+}
+
+.sliderBox {
+  margin-left: 5px;
+  max-height: 530px;
+  overflow: auto;
+}
+
+&:deep(.left.ant-col) {
+  transition: all 0.5s ease;
+}
+
+&:deep(.right.ant-col) {
+  transition: all 0.5s ease;
+}
+</style>
diff --git a/ui-vue3/src/views/traffic/destinationRule/tabs/formView.vue b/ui-vue3/src/views/traffic/destinationRule/tabs/formView.vue
new file mode 100644
index 0000000..83ad05b
--- /dev/null
+++ b/ui-vue3/src/views/traffic/destinationRule/tabs/formView.vue
@@ -0,0 +1,162 @@
+<!--
+  ~ 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>
+  <a-card>
+    <a-row>
+      <a-descriptions title="基础信息" />
+      <a-col :span="12">
+        <a-descriptions title="" layout="vertical" :column="1">
+          <a-descriptions-item label="规则名" :labelStyle="{ fontWeight: 'bold', width: '100px' }">
+            <p
+              @click="copyIt('shop-user/StandardRouter')"
+              class="description-item-content with-card"
+            >
+              shop-user/StandardRouter
+              <CopyOutlined />
+            </p>
+          </a-descriptions-item>
+          <a-descriptions-item
+            label="作用对象"
+            :labelStyle="{ fontWeight: 'bold', width: '100px' }"
+          >
+            shop-user
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-col>
+      <a-col :span="12">
+        <a-descriptions title="" layout="vertical" :column="1">
+          <a-descriptions-item
+            label="创建时间"
+            :labelStyle="{ fontWeight: 'bold', width: '100px' }"
+          >
+            2024/2/19/ 11:38:21
+          </a-descriptions-item>
+          <a-descriptions-item
+            label="最近修改时间"
+            :labelStyle="{ fontWeight: 'bold', width: '100px' }"
+          >
+            2024/3/20 15:20:31
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-col>
+    </a-row>
+
+    <a-row>
+      <a-descriptions title="流量策略" />
+      <a-col :span="12">
+        <a-descriptions title="" layout="vertical" :column="1">
+          <a-descriptions-item
+            label="负载均衡"
+            :labelStyle="{ fontWeight: 'bold', width: '100px' }"
+          >
+            不指定
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-col>
+    </a-row>
+  </a-card>
+
+  <a-card>
+    <a-descriptions title="地址子集" />
+
+    <a-card title="地址子集【1】">
+      <a-space size="middle" direction="vertical">
+        <a-descriptions :column="1">
+          <a-descriptions-item
+            label="子集名称"
+            :labelStyle="{ fontWeight: 'bold', width: '100px' }"
+          >
+            v1-beijing
+          </a-descriptions-item>
+        </a-descriptions>
+
+        <a-descriptions :column="1">
+          <a-descriptions-item
+            label="标签匹配"
+            :labelStyle="{ fontWeight: 'bold', width: '100px' }"
+          >
+            <a-space>
+              <a-tag color="#2db7f5">version=v1</a-tag>
+              <a-tag color="#2db7f5">region=beijing</a-tag>
+            </a-space>
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-space>
+    </a-card>
+
+    <a-card title="地址子集【2】">
+      <a-space size="middle" direction="vertical">
+        <a-descriptions :column="1">
+          <a-descriptions-item
+            label="子集名称"
+            :labelStyle="{ fontWeight: 'bold', width: '100px' }"
+          >
+            v1-beijing
+          </a-descriptions-item>
+        </a-descriptions>
+
+        <a-descriptions :column="1">
+          <a-descriptions-item
+            label="标签匹配"
+            :labelStyle="{ fontWeight: 'bold', width: '100px' }"
+          >
+            <a-space>
+              <a-tag color="#2db7f5">version=v1</a-tag>
+              <a-tag color="#2db7f5">region=beijing</a-tag>
+            </a-space>
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-space>
+    </a-card>
+  </a-card>
+</template>
+
+<script setup lang="ts">
+import { CopyOutlined } from '@ant-design/icons-vue'
+import { type ComponentInternalInstance, getCurrentInstance } from 'vue'
+import { PRIMARY_COLOR, PRIMARY_COLOR_T } from '@/base/constants'
+import useClipboard from 'vue-clipboard3'
+import { message } from 'ant-design-vue'
+
+const {
+  appContext: {
+    config: { globalProperties }
+  }
+} = <ComponentInternalInstance>getCurrentInstance()
+
+let __ = PRIMARY_COLOR
+let PRIMARY_COLOR_20 = PRIMARY_COLOR_T('20')
+
+const toClipboard = useClipboard().toClipboard
+
+function copyIt(v: string) {
+  message.success(globalProperties.$t('messageDomain.success.copy'))
+  toClipboard(v)
+}
+</script>
+
+<style scoped lang="less">
+.description-item-content {
+  &.no-card {
+    padding-left: 20px;
+  }
+  &.with-card:hover {
+    color: v-bind('PRIMARY_COLOR');
+  }
+}
+</style>
diff --git a/ui-vue3/src/views/traffic/dynamicConfig/index.vue b/ui-vue3/src/views/traffic/dynamicConfig/index.vue
index fbef790..31cfe98 100644
--- a/ui-vue3/src/views/traffic/dynamicConfig/index.vue
+++ b/ui-vue3/src/views/traffic/dynamicConfig/index.vue
@@ -21,9 +21,11 @@
         <a-button type="primary">新增动态配置</a-button>
         <a-button type="primary" style="margin-left: 10px">从模版创建</a-button>
       </template>
-      <template #bodyCell="{ text, column }">
+      <template #bodyCell="{ text, column, record }">
         <template v-if="column.dataIndex === 'ruleName'">
-          <a-button type="link">{{ text }}</a-button>
+          <a-button type="link" @click="router.replace(`formview/${record[column.key]}`)">{{
+            text
+          }}</a-button>
         </template>
         <template v-if="column.dataIndex === 'ruleGranularity'">
           {{ text ? '服务' : '应用' }}
@@ -54,6 +56,7 @@
 import SearchTable from '@/components/SearchTable.vue'
 import { SearchDomain, sortString } from '@/utils/SearchUtil'
 import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
+import router from '@/router'
 
 let columns = [
   {
diff --git a/ui-vue3/src/views/traffic/dynamicConfig/tabs/YAMLView.vue b/ui-vue3/src/views/traffic/dynamicConfig/tabs/YAMLView.vue
new file mode 100644
index 0000000..785fa05
--- /dev/null
+++ b/ui-vue3/src/views/traffic/dynamicConfig/tabs/YAMLView.vue
@@ -0,0 +1,103 @@
+<!--
+  ~ 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>
+  <a-card>
+    <a-flex style="width: 100%">
+      <a-col :span="isDrawerOpened ? 24 - sliderSpan : 24" class="left">
+        <a-flex vertical align="end">
+          <a-button type="text" style="color: #0a90d5" @click="isDrawerOpened = !isDrawerOpened">
+            {{ $t('flowControlDomain.versionRecords') }}
+            <DoubleLeftOutlined v-if="!isDrawerOpened" />
+            <DoubleRightOutlined v-else />
+          </a-button>
+
+          <div class="editorBox">
+            <MonacoEditor
+              :modelValue="YAMLValue"
+              theme="vs-dark"
+              :height="500"
+              language="yaml"
+              :readonly="isReadonly"
+            />
+          </div>
+        </a-flex>
+      </a-col>
+
+      <a-col :span="isDrawerOpened ? sliderSpan : 0" class="right">
+        <a-card v-if="isDrawerOpened" class="sliderBox">
+          <a-card v-for="i in 2" :key="i">
+            <p>修改时间: 2024/3/20 15:20:31</p>
+            <p>版本号: xo842xqpx834</p>
+
+            <a-flex justify="flex-end">
+              <a-button type="text" style="color: #0a90d5">查看</a-button>
+              <a-button type="text" style="color: #0a90d5">回滚</a-button>
+            </a-flex>
+          </a-card>
+        </a-card>
+      </a-col>
+    </a-flex>
+  </a-card>
+</template>
+
+<script setup lang="ts">
+import MonacoEditor from '@/components/editor/MonacoEditor.vue'
+import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue'
+import { computed, ref } from 'vue'
+
+const isReadonly = ref(true)
+
+const isDrawerOpened = ref(false)
+
+const sliderSpan = ref(8)
+
+const YAMLValue = ref(
+  'configVersion: v3.0\n' +
+    'force: true\n' +
+    'enabled: true\n' +
+    'key: shop-detail\n' +
+    'tags:\n' +
+    '  - name: gray\n' +
+    '    match:\n' +
+    '      - key: env\n' +
+    '        value:\n' +
+    '          exact: gray'
+)
+</script>
+
+<style scoped lang="less">
+.editorBox {
+  border-radius: 0.3rem;
+  overflow: hidden;
+  width: 100%;
+}
+
+.sliderBox {
+  margin-left: 5px;
+  max-height: 530px;
+  overflow: auto;
+}
+
+&:deep(.left.ant-col) {
+  transition: all 0.5s ease;
+}
+
+&:deep(.right.ant-col) {
+  transition: all 0.5s ease;
+}
+</style>
diff --git a/ui-vue3/src/views/traffic/dynamicConfig/tabs/formView.vue b/ui-vue3/src/views/traffic/dynamicConfig/tabs/formView.vue
new file mode 100644
index 0000000..77185b5
--- /dev/null
+++ b/ui-vue3/src/views/traffic/dynamicConfig/tabs/formView.vue
@@ -0,0 +1,146 @@
+<!--
+  ~ 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 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' }"
+          >
+            <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>
+
+          <!-- 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"
+            >
+              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>
+
+          <!-- 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>
+            {{ $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-space align="start" style="width: 100%">
+        <a-typography-title :level="5"
+          >{{ $t('flowControlDomain.configurationItem') }}:</a-typography-title
+        >
+        <a-tag color="#87d068">retries=3</a-tag>
+      </a-space>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type ComponentInternalInstance, getCurrentInstance } from 'vue'
+import { CopyOutlined } from '@ant-design/icons-vue'
+import { PRIMARY_COLOR } from '@/base/constants'
+import useClipboard from 'vue-clipboard3'
+import { message } from 'ant-design-vue'
+
+const {
+  appContext: {
+    config: { globalProperties }
+  }
+} = <ComponentInternalInstance>getCurrentInstance()
+
+let __ = PRIMARY_COLOR
+const toClipboard = useClipboard().toClipboard
+
+function copyIt(v: string) {
+  message.success(globalProperties.$t('messageDomain.success.copy'))
+  toClipboard(v)
+}
+</script>
+
+<style lang="less" scoped>
+.description-item-content {
+  &.no-card {
+    padding-left: 20px;
+  }
+
+  &.with-card:hover {
+    color: v-bind('PRIMARY_COLOR');
+  }
+}
+</style>
diff --git a/ui-vue3/src/views/traffic/routingRule/index.vue b/ui-vue3/src/views/traffic/routingRule/index.vue
index 14e82ed..1942c0b 100644
--- a/ui-vue3/src/views/traffic/routingRule/index.vue
+++ b/ui-vue3/src/views/traffic/routingRule/index.vue
@@ -20,9 +20,11 @@
       <template #customOperation>
         <a-button type="primary">新增条件路由规则</a-button>
       </template>
-      <template #bodyCell="{ text, column }">
+      <template #bodyCell="{ text, column, record }">
         <template v-if="column.dataIndex === 'ruleName'">
-          <a-button type="link">{{ text }}</a-button>
+          <a-button type="link" @click="router.replace(`formview/${record[column.key]}`)">{{
+            text
+          }}</a-button>
         </template>
         <template v-if="column.dataIndex === 'ruleGranularity'">
           {{ text ? '服务' : '应用' }}
@@ -53,6 +55,7 @@
 import SearchTable from '@/components/SearchTable.vue'
 import { SearchDomain, sortString } from '@/utils/SearchUtil'
 import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
+import router from '@/router'
 
 let columns = [
   {
diff --git a/ui-vue3/src/views/traffic/routingRule/tabs/YAMLView.vue b/ui-vue3/src/views/traffic/routingRule/tabs/YAMLView.vue
new file mode 100644
index 0000000..785fa05
--- /dev/null
+++ b/ui-vue3/src/views/traffic/routingRule/tabs/YAMLView.vue
@@ -0,0 +1,103 @@
+<!--
+  ~ 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>
+  <a-card>
+    <a-flex style="width: 100%">
+      <a-col :span="isDrawerOpened ? 24 - sliderSpan : 24" class="left">
+        <a-flex vertical align="end">
+          <a-button type="text" style="color: #0a90d5" @click="isDrawerOpened = !isDrawerOpened">
+            {{ $t('flowControlDomain.versionRecords') }}
+            <DoubleLeftOutlined v-if="!isDrawerOpened" />
+            <DoubleRightOutlined v-else />
+          </a-button>
+
+          <div class="editorBox">
+            <MonacoEditor
+              :modelValue="YAMLValue"
+              theme="vs-dark"
+              :height="500"
+              language="yaml"
+              :readonly="isReadonly"
+            />
+          </div>
+        </a-flex>
+      </a-col>
+
+      <a-col :span="isDrawerOpened ? sliderSpan : 0" class="right">
+        <a-card v-if="isDrawerOpened" class="sliderBox">
+          <a-card v-for="i in 2" :key="i">
+            <p>修改时间: 2024/3/20 15:20:31</p>
+            <p>版本号: xo842xqpx834</p>
+
+            <a-flex justify="flex-end">
+              <a-button type="text" style="color: #0a90d5">查看</a-button>
+              <a-button type="text" style="color: #0a90d5">回滚</a-button>
+            </a-flex>
+          </a-card>
+        </a-card>
+      </a-col>
+    </a-flex>
+  </a-card>
+</template>
+
+<script setup lang="ts">
+import MonacoEditor from '@/components/editor/MonacoEditor.vue'
+import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue'
+import { computed, ref } from 'vue'
+
+const isReadonly = ref(true)
+
+const isDrawerOpened = ref(false)
+
+const sliderSpan = ref(8)
+
+const YAMLValue = ref(
+  'configVersion: v3.0\n' +
+    'force: true\n' +
+    'enabled: true\n' +
+    'key: shop-detail\n' +
+    'tags:\n' +
+    '  - name: gray\n' +
+    '    match:\n' +
+    '      - key: env\n' +
+    '        value:\n' +
+    '          exact: gray'
+)
+</script>
+
+<style scoped lang="less">
+.editorBox {
+  border-radius: 0.3rem;
+  overflow: hidden;
+  width: 100%;
+}
+
+.sliderBox {
+  margin-left: 5px;
+  max-height: 530px;
+  overflow: auto;
+}
+
+&:deep(.left.ant-col) {
+  transition: all 0.5s ease;
+}
+
+&:deep(.right.ant-col) {
+  transition: all 0.5s ease;
+}
+</style>
diff --git a/ui-vue3/src/views/traffic/routingRule/tabs/formView.vue b/ui-vue3/src/views/traffic/routingRule/tabs/formView.vue
new file mode 100644
index 0000000..e6ef312
--- /dev/null
+++ b/ui-vue3/src/views/traffic/routingRule/tabs/formView.vue
@@ -0,0 +1,165 @@
+<!--
+  ~ 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 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' }"
+          >
+            <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>
+
+          <!-- 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"
+            >
+              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>
+
+          <!-- faultTolerantProtection -->
+          <a-descriptions-item
+            :label="$t('flowControlDomain.faultTolerantProtection')"
+            :labelStyle="{ fontWeight: 'bold' }"
+          >
+            <a-typography-paragraph>
+              {{ $t('flowControlDomain.opened') }}
+            </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>
+
+          <!-- runTimeEffective -->
+          <a-descriptions-item
+            :label="$t('flowControlDomain.runTimeEffective')"
+            :labelStyle="{ fontWeight: 'bold' }"
+          >
+            <a-typography-paragraph>
+              {{ $t('flowControlDomain.opened') }}
+            </a-typography-paragraph>
+          </a-descriptions-item>
+
+          <!-- priority -->
+          <a-descriptions-item
+            :label="$t('flowControlDomain.priority')"
+            :labelStyle="{ fontWeight: 'bold' }"
+          >
+            <a-typography-paragraph>
+              {{ $t('flowControlDomain.notSet') }}
+            </a-typography-paragraph>
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-card>
+    </a-flex>
+
+    <a-card title="路由【1】">
+      <a-space align="start" style="width: 100%">
+        <a-typography-title :level="5"
+          >{{ $t('flowControlDomain.requestParameterMatching') }}:</a-typography-title
+        >
+
+        <a-space align="center" direction="horizontal" size="middle">
+          <a-tag color="#2db7f5">method=login</a-tag>
+          <a-tag color="#2db7f5">arguments[0]=dubbo</a-tag>
+        </a-space>
+      </a-space>
+
+      <a-space align="start" style="width: 100%">
+        <a-typography-title :level="5"
+          >{{ $t('flowControlDomain.addressSubsetMatching') }}:</a-typography-title
+        >
+        <a-tag color="#87d068">version=v1</a-tag>
+      </a-space>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type ComponentInternalInstance, getCurrentInstance, ref } from 'vue'
+import { CopyOutlined } from '@ant-design/icons-vue'
+import useClipboard from 'vue-clipboard3'
+import { message } from 'ant-design-vue'
+import { PRIMARY_COLOR } from '@/base/constants'
+
+const {
+  appContext: {
+    config: { globalProperties }
+  }
+} = <ComponentInternalInstance>getCurrentInstance()
+
+let __ = PRIMARY_COLOR
+
+const toClipboard = useClipboard().toClipboard
+
+function copyIt(v: string) {
+  message.success(globalProperties.$t('messageDomain.success.copy'))
+  toClipboard(v)
+}
+</script>
+
+<style lang="less" scoped>
+.description-item-content {
+  &.no-card {
+    padding-left: 20px;
+  }
+
+  &.with-card:hover {
+    color: v-bind('PRIMARY_COLOR');
+  }
+}
+</style>
diff --git a/ui-vue3/src/views/traffic/tagRule/index.vue b/ui-vue3/src/views/traffic/tagRule/index.vue
index d72618b..5532e04 100644
--- a/ui-vue3/src/views/traffic/tagRule/index.vue
+++ b/ui-vue3/src/views/traffic/tagRule/index.vue
@@ -20,9 +20,11 @@
       <template #customOperation>
         <a-button type="primary">新增标签路由规则</a-button>
       </template>
-      <template #bodyCell="{ text, column }">
+      <template #bodyCell="{ text, column, record }">
         <template v-if="column.dataIndex === 'ruleName'">
-          <a-button type="link">{{ text }}</a-button>
+          <a-button type="link" @click="router.replace(`formview/${record[column.key]}`)">{{
+            text
+          }}</a-button>
         </template>
         <template v-if="column.dataIndex === 'enable'">
           {{ text ? '启用' : '禁用' }}
@@ -50,6 +52,7 @@
 import SearchTable from '@/components/SearchTable.vue'
 import { SearchDomain, sortString } from '@/utils/SearchUtil'
 import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
+import router from '@/router'
 
 let columns = [
   {
diff --git a/ui-vue3/src/views/traffic/tagRule/tabs/YAMLView.vue b/ui-vue3/src/views/traffic/tagRule/tabs/YAMLView.vue
new file mode 100644
index 0000000..785fa05
--- /dev/null
+++ b/ui-vue3/src/views/traffic/tagRule/tabs/YAMLView.vue
@@ -0,0 +1,103 @@
+<!--
+  ~ 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>
+  <a-card>
+    <a-flex style="width: 100%">
+      <a-col :span="isDrawerOpened ? 24 - sliderSpan : 24" class="left">
+        <a-flex vertical align="end">
+          <a-button type="text" style="color: #0a90d5" @click="isDrawerOpened = !isDrawerOpened">
+            {{ $t('flowControlDomain.versionRecords') }}
+            <DoubleLeftOutlined v-if="!isDrawerOpened" />
+            <DoubleRightOutlined v-else />
+          </a-button>
+
+          <div class="editorBox">
+            <MonacoEditor
+              :modelValue="YAMLValue"
+              theme="vs-dark"
+              :height="500"
+              language="yaml"
+              :readonly="isReadonly"
+            />
+          </div>
+        </a-flex>
+      </a-col>
+
+      <a-col :span="isDrawerOpened ? sliderSpan : 0" class="right">
+        <a-card v-if="isDrawerOpened" class="sliderBox">
+          <a-card v-for="i in 2" :key="i">
+            <p>修改时间: 2024/3/20 15:20:31</p>
+            <p>版本号: xo842xqpx834</p>
+
+            <a-flex justify="flex-end">
+              <a-button type="text" style="color: #0a90d5">查看</a-button>
+              <a-button type="text" style="color: #0a90d5">回滚</a-button>
+            </a-flex>
+          </a-card>
+        </a-card>
+      </a-col>
+    </a-flex>
+  </a-card>
+</template>
+
+<script setup lang="ts">
+import MonacoEditor from '@/components/editor/MonacoEditor.vue'
+import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue'
+import { computed, ref } from 'vue'
+
+const isReadonly = ref(true)
+
+const isDrawerOpened = ref(false)
+
+const sliderSpan = ref(8)
+
+const YAMLValue = ref(
+  'configVersion: v3.0\n' +
+    'force: true\n' +
+    'enabled: true\n' +
+    'key: shop-detail\n' +
+    'tags:\n' +
+    '  - name: gray\n' +
+    '    match:\n' +
+    '      - key: env\n' +
+    '        value:\n' +
+    '          exact: gray'
+)
+</script>
+
+<style scoped lang="less">
+.editorBox {
+  border-radius: 0.3rem;
+  overflow: hidden;
+  width: 100%;
+}
+
+.sliderBox {
+  margin-left: 5px;
+  max-height: 530px;
+  overflow: auto;
+}
+
+&:deep(.left.ant-col) {
+  transition: all 0.5s ease;
+}
+
+&:deep(.right.ant-col) {
+  transition: all 0.5s ease;
+}
+</style>
diff --git a/ui-vue3/src/views/traffic/tagRule/tabs/formView.vue b/ui-vue3/src/views/traffic/tagRule/tabs/formView.vue
new file mode 100644
index 0000000..618e2b7
--- /dev/null
+++ b/ui-vue3/src/views/traffic/tagRule/tabs/formView.vue
@@ -0,0 +1,156 @@
+<!--
+  ~ 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 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' }"
+          >
+            <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>
+
+          <!-- 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('shop-user')" class="description-item-content with-card">
+              shop-user
+              <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>
+
+          <!-- faultTolerantProtection -->
+          <a-descriptions-item
+            :label="$t('flowControlDomain.faultTolerantProtection')"
+            :labelStyle="{ fontWeight: 'bold' }"
+          >
+            <a-typography-paragraph>
+              {{ $t('flowControlDomain.opened') }}
+            </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>
+
+          <!-- runTimeEffective -->
+          <a-descriptions-item
+            :label="$t('flowControlDomain.runTimeEffective')"
+            :labelStyle="{ fontWeight: 'bold' }"
+          >
+            <a-typography-paragraph>
+              {{ $t('flowControlDomain.opened') }}
+            </a-typography-paragraph>
+          </a-descriptions-item>
+
+          <!-- priority -->
+          <a-descriptions-item
+            :label="$t('flowControlDomain.priority')"
+            :labelStyle="{ fontWeight: 'bold' }"
+          >
+            <a-typography-paragraph>
+              {{ '未设置' }}
+            </a-typography-paragraph>
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-card>
+    </a-flex>
+
+    <a-card title="标签【1】">
+      <a-space align="center">
+        <a-typography-title :level="5">
+          {{ $t('flowControlDomain.labelName') }}:
+          <a-typography-text class="labelName">gray</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">version=v1</a-tag>
+      </a-space>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { CopyOutlined } from '@ant-design/icons-vue'
+import useClipboard from 'vue-clipboard3'
+import { message } from 'ant-design-vue'
+import { type ComponentInternalInstance, getCurrentInstance } from 'vue'
+import { PRIMARY_COLOR } from '@/base/constants'
+
+const {
+  appContext: {
+    config: { globalProperties }
+  }
+} = <ComponentInternalInstance>getCurrentInstance()
+
+let __ = PRIMARY_COLOR
+const toClipboard = useClipboard().toClipboard
+
+function copyIt(v: string) {
+  message.success(globalProperties.$t('messageDomain.success.copy'))
+  toClipboard(v)
+}
+</script>
+
+<style lang="less" scoped>
+.description-item-content {
+  &.no-card {
+    padding-left: 20px;
+  }
+
+  &.with-card:hover {
+    color: v-bind('PRIMARY_COLOR');
+  }
+}
+</style>
diff --git a/ui-vue3/src/views/traffic/virtualService/index.vue b/ui-vue3/src/views/traffic/virtualService/index.vue
index 4e1f049..d75a4fc 100644
--- a/ui-vue3/src/views/traffic/virtualService/index.vue
+++ b/ui-vue3/src/views/traffic/virtualService/index.vue
@@ -20,9 +20,11 @@
       <template #customOperation>
         <a-button type="primary">新增路由规则</a-button>
       </template>
-      <template #bodyCell="{ text, column }">
+      <template #bodyCell="{ text, column, record }">
         <template v-if="column.dataIndex === 'ruleName'">
-          <a-button type="link">{{ text }}</a-button>
+          <a-button type="link" @click="router.replace(`formview/${record[column.key]}`)">{{
+            text
+          }}</a-button>
         </template>
         <template v-if="column.dataIndex === 'operation'">
           <a-button type="link">查看</a-button>
@@ -47,6 +49,7 @@
 import SearchTable from '@/components/SearchTable.vue'
 import { SearchDomain, sortString } from '@/utils/SearchUtil'
 import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
+import router from '@/router'
 
 let columns = [
   {
diff --git a/ui-vue3/src/views/traffic/virtualService/tabs/YAMLView.vue b/ui-vue3/src/views/traffic/virtualService/tabs/YAMLView.vue
new file mode 100644
index 0000000..785fa05
--- /dev/null
+++ b/ui-vue3/src/views/traffic/virtualService/tabs/YAMLView.vue
@@ -0,0 +1,103 @@
+<!--
+  ~ 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>
+  <a-card>
+    <a-flex style="width: 100%">
+      <a-col :span="isDrawerOpened ? 24 - sliderSpan : 24" class="left">
+        <a-flex vertical align="end">
+          <a-button type="text" style="color: #0a90d5" @click="isDrawerOpened = !isDrawerOpened">
+            {{ $t('flowControlDomain.versionRecords') }}
+            <DoubleLeftOutlined v-if="!isDrawerOpened" />
+            <DoubleRightOutlined v-else />
+          </a-button>
+
+          <div class="editorBox">
+            <MonacoEditor
+              :modelValue="YAMLValue"
+              theme="vs-dark"
+              :height="500"
+              language="yaml"
+              :readonly="isReadonly"
+            />
+          </div>
+        </a-flex>
+      </a-col>
+
+      <a-col :span="isDrawerOpened ? sliderSpan : 0" class="right">
+        <a-card v-if="isDrawerOpened" class="sliderBox">
+          <a-card v-for="i in 2" :key="i">
+            <p>修改时间: 2024/3/20 15:20:31</p>
+            <p>版本号: xo842xqpx834</p>
+
+            <a-flex justify="flex-end">
+              <a-button type="text" style="color: #0a90d5">查看</a-button>
+              <a-button type="text" style="color: #0a90d5">回滚</a-button>
+            </a-flex>
+          </a-card>
+        </a-card>
+      </a-col>
+    </a-flex>
+  </a-card>
+</template>
+
+<script setup lang="ts">
+import MonacoEditor from '@/components/editor/MonacoEditor.vue'
+import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue'
+import { computed, ref } from 'vue'
+
+const isReadonly = ref(true)
+
+const isDrawerOpened = ref(false)
+
+const sliderSpan = ref(8)
+
+const YAMLValue = ref(
+  'configVersion: v3.0\n' +
+    'force: true\n' +
+    'enabled: true\n' +
+    'key: shop-detail\n' +
+    'tags:\n' +
+    '  - name: gray\n' +
+    '    match:\n' +
+    '      - key: env\n' +
+    '        value:\n' +
+    '          exact: gray'
+)
+</script>
+
+<style scoped lang="less">
+.editorBox {
+  border-radius: 0.3rem;
+  overflow: hidden;
+  width: 100%;
+}
+
+.sliderBox {
+  margin-left: 5px;
+  max-height: 530px;
+  overflow: auto;
+}
+
+&:deep(.left.ant-col) {
+  transition: all 0.5s ease;
+}
+
+&:deep(.right.ant-col) {
+  transition: all 0.5s ease;
+}
+</style>
diff --git a/ui-vue3/src/views/traffic/virtualService/tabs/formView.vue b/ui-vue3/src/views/traffic/virtualService/tabs/formView.vue
new file mode 100644
index 0000000..67b5644
--- /dev/null
+++ b/ui-vue3/src/views/traffic/virtualService/tabs/formView.vue
@@ -0,0 +1,178 @@
+<!--
+  ~ 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>
+  <a-card>
+    <a-row>
+      <a-descriptions title="基础信息" />
+      <a-col :span="12">
+        <a-descriptions title="" layout="vertical" :column="1">
+          <a-descriptions-item label="规则名" :labelStyle="{ fontWeight: 'bold', width: '100px' }">
+            <p
+              @click="copyIt('shop-user/StandardRouter')"
+              class="description-item-content with-card"
+            >
+              shop-user/StandardRouter
+              <CopyOutlined />
+            </p>
+          </a-descriptions-item>
+          <a-descriptions-item
+            label="作用对象"
+            :labelStyle="{ fontWeight: 'bold', width: '100px' }"
+          >
+            <p @click="copyIt('shop-user')" class="description-item-content with-card">
+              shop-user
+              <CopyOutlined />
+            </p>
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-col>
+      <a-col :span="12">
+        <a-descriptions title="" layout="vertical" :column="1">
+          <a-descriptions-item
+            label="创建时间"
+            :labelStyle="{ fontWeight: 'bold', width: '100px' }"
+          >
+            2024/2/19/ 11:38:21
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-col>
+    </a-row>
+  </a-card>
+
+  <a-card>
+    <a-descriptions title="路由列表" />
+
+    <a-card title="路由【1】">
+      <a-space size="middle" direction="vertical">
+        <span>名称：未指定</span>
+        <a-space size="small">
+          <span>服务生效范围:</span>
+          <a-tooltip>
+            <template #title>服务精确匹配org.apache.dubbo.samples.UserService</template>
+            <a-space>
+              <a-space-compact direction="horizontal">
+                <a-button type="primary">service</a-button>
+                <a-button type="primary">exact</a-button>
+                <a-button type="primary">org.apache.dubbo.samples.UserService</a-button>
+              </a-space-compact>
+            </a-space>
+          </a-tooltip>
+        </a-space>
+        <a-space size="middle">
+          <span>路由:</span>
+          <a-card style="min-width: 400px">
+            <a-space direction="vertical" size="middle">
+              <a-space size="middle">
+                <span>名称</span>
+                <span>未指定</span>
+              </a-space>
+
+              <a-space size="middle" align="start">
+                <span>匹配条件</span>
+                <a-space size="middle" direction="vertical">
+                  <a-space size="middle" v-for="i in 3">
+                    {{ i + '.' }}
+                    <a-tooltip>
+                      <template #title>方法前缀匹配get</template>
+                      <a-space>
+                        <a-space-compact direction="horizontal">
+                          <a-button type="primary">method</a-button>
+                          <a-button type="primary">prefix</a-button>
+                          <a-button type="primary">get</a-button>
+                        </a-space-compact>
+                      </a-space>
+                    </a-tooltip>
+                    <a-tooltip>
+                      <template #title>参数范围匹配1-100</template>
+                      <a-space>
+                        <a-space-compact direction="horizontal">
+                          <a-button type="primary">arg[1]</a-button>
+                          <a-button type="primary">range</a-button>
+                          <a-button type="primary"> 1-100</a-button>
+                        </a-space-compact>
+                      </a-space>
+                    </a-tooltip>
+                  </a-space>
+                </a-space>
+              </a-space>
+              <a-space size="middle">
+                <span>路由分发</span>
+                <a-tooltip>
+                  <template #title>subset=-v1的地址子集赋予权重70</template>
+                  <a-space>
+                    <a-space>
+                      <a-space-compact direction="horizontal">
+                        <a-button type="primary">subset=v1</a-button>
+                        <a-button type="primary">weight=70</a-button>
+                      </a-space-compact>
+                    </a-space>
+                  </a-space>
+                </a-tooltip>
+                <a-tooltip>
+                  <template #title>subset=-v2的地址子集赋予权重30</template>
+                  <a-space>
+                    <a-space-compact direction="horizontal">
+                      <a-button type="primary">subset=v2</a-button>
+                      <a-button type="primary">weight=30</a-button>
+                    </a-space-compact>
+                  </a-space>
+                </a-tooltip>
+              </a-space>
+            </a-space>
+          </a-card>
+        </a-space>
+      </a-space>
+    </a-card>
+  </a-card>
+</template>
+
+<script setup lang="ts">
+import { CopyOutlined } from '@ant-design/icons-vue'
+import useClipboard from 'vue-clipboard3'
+import { message } from 'ant-design-vue'
+import { type ComponentInternalInstance, getCurrentInstance } from 'vue'
+import { PRIMARY_COLOR, PRIMARY_COLOR_T } from '@/base/constants'
+
+const {
+  appContext: {
+    config: { globalProperties }
+  }
+} = <ComponentInternalInstance>getCurrentInstance()
+
+let __ = PRIMARY_COLOR
+let PRIMARY_COLOR_20 = PRIMARY_COLOR_T('20')
+
+const toClipboard = useClipboard().toClipboard
+
+function copyIt(v: string) {
+  message.success(globalProperties.$t('messageDomain.success.copy'))
+  toClipboard(v)
+}
+</script>
+
+<style scoped lang="less">
+.description-item-content {
+  &.no-card {
+    padding-left: 20px;
+  }
+
+  &.with-card:hover {
+    color: v-bind('PRIMARY_COLOR');
+  }
+}
+</style>