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..57f7ed3
--- /dev/null
+++ b/ui-vue3/src/views/traffic/dynamicConfig/tabs/YAMLView.vue
@@ -0,0 +1,101 @@
+<!--
+  ~ 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>
+  <!--  editor-->
+  <a-flex style="width: 100%">
+    <a-col :span="isDrawerOpened ? 16 : 24">
+      <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>
+
+        <MonacoEditor
+          :modelValue="YAMLValue"
+          theme="vs-dark"
+          :height="280"
+          language="yaml"
+          :readonly="isReadonly"
+        />
+      </a-flex>
+    </a-col>
+
+    <a-col :span="isDrawerOpened ? 8 : 0">
+      <a-card v-show="isDrawerOpened">
+        <a-card>
+          <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>
+</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 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'
+)
+
+const editorWidth = computed(() => {
+  if (isDrawerOpened.value) {
+    return 900 - 250
+  } else {
+    return 900
+  }
+})
+</script>
+
+<style scoped lang="less">
+.editor {
+  width: fit-content;
+}
+
+.drawer {
+  width: 0px;
+  min-height: 300px;
+  max-height: 100%;
+  transition: all 0.3s ease-in-out;
+}
+
+.drawerOpened {
+  width: 250px;
+}
+</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/tagRule/tabs/YAMLView.vue b/ui-vue3/src/views/traffic/tagRule/tabs/YAMLView.vue
new file mode 100644
index 0000000..57f7ed3
--- /dev/null
+++ b/ui-vue3/src/views/traffic/tagRule/tabs/YAMLView.vue
@@ -0,0 +1,101 @@
+<!--
+  ~ 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>
+  <!--  editor-->
+  <a-flex style="width: 100%">
+    <a-col :span="isDrawerOpened ? 16 : 24">
+      <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>
+
+        <MonacoEditor
+          :modelValue="YAMLValue"
+          theme="vs-dark"
+          :height="280"
+          language="yaml"
+          :readonly="isReadonly"
+        />
+      </a-flex>
+    </a-col>
+
+    <a-col :span="isDrawerOpened ? 8 : 0">
+      <a-card v-show="isDrawerOpened">
+        <a-card>
+          <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>
+</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 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'
+)
+
+const editorWidth = computed(() => {
+  if (isDrawerOpened.value) {
+    return 900 - 250
+  } else {
+    return 900
+  }
+})
+</script>
+
+<style scoped lang="less">
+.editor {
+  width: fit-content;
+}
+
+.drawer {
+  width: 0px;
+  min-height: 300px;
+  max-height: 100%;
+  transition: all 0.3s ease-in-out;
+}
+
+.drawerOpened {
+  width: 250px;
+}
+</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>