diff --git a/ui-vue3/src/views/traffic/destinationRule/tabs/YAMLView.vue b/ui-vue3/src/views/traffic/destinationRule/tabs/YAMLView.vue
index d9dd702..3ec091b 100644
--- a/ui-vue3/src/views/traffic/destinationRule/tabs/YAMLView.vue
+++ b/ui-vue3/src/views/traffic/destinationRule/tabs/YAMLView.vue
@@ -17,45 +17,47 @@
 
 <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>
+  <a-card>
+    <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>
+          <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-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-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-card>
-    </a-col>
-  </a-flex>
+      </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 { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 const isReadonly = ref(true)
 
@@ -63,31 +65,19 @@
 
 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'
+  '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">
-.editor {
-  width: fit-content;
-}
 
-.drawer {
-  width: 0;
-  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/YAMLView.vue b/ui-vue3/src/views/traffic/dynamicConfig/tabs/YAMLView.vue
index 57f7ed3..3ec091b 100644
--- a/ui-vue3/src/views/traffic/dynamicConfig/tabs/YAMLView.vue
+++ b/ui-vue3/src/views/traffic/dynamicConfig/tabs/YAMLView.vue
@@ -17,39 +17,41 @@
 
 <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>
+  <a-card>
+    <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>
+          <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-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-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-card>
-    </a-col>
-  </a-flex>
+      </a-col>
+    </a-flex>
+  </a-card>
 </template>
 
 <script setup lang="ts">
@@ -63,39 +65,19 @@
 
 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'
+  '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/routingRule/index.vue b/ui-vue3/src/views/traffic/routingRule/index.vue
index eff75f8..0a11f80 100644
--- a/ui-vue3/src/views/traffic/routingRule/index.vue
+++ b/ui-vue3/src/views/traffic/routingRule/index.vue
@@ -17,18 +17,30 @@
 <template>
   <div class="__container_resources_application_index">
     <search-table :search-domain="searchDomain">
-      <template #bodyCell="{ text, record, index, column }">
+      <template #customOperation>
+        <a-button type="primary">新增条件路由规则</a-button>
+      </template>
+      <template #bodyCell="{ text, column,record }">
         <template v-if="column.dataIndex === 'ruleName'">
-          <a-button type="link" @click="router.replace(`formview/${record.ruleName}`)">{{
-            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 ? '服务' : '应用' }}
+        </template>
         <template v-if="column.dataIndex === 'enable'">
-          {{ text ? '是' : '否' }}
+          {{ text ? '启用' : '禁用' }}
         </template>
-        <template v-if="column.dataIndex === 'protection'">
-          {{ text ? '是' : '否' }}
+        <template v-if="column.dataIndex === 'operation'">
+          <a-button type="link">查看</a-button>
+          <a-button type="link">修改</a-button>
+          <a-popconfirm
+            title="确认删除该条件路由规则？"
+            ok-text="Yes"
+            cancel-text="No"
+            @confirm="confirm"
+          >
+            <a-button type="link">删除</a-button>
+          </a-popconfirm>
         </template>
       </template>
     </search-table>
@@ -42,10 +54,7 @@
 import { SearchDomain, sortString } from '@/utils/SearchUtil'
 import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
 import router from '@/router'
-import { Icon } from '@iconify/vue'
-import { PRIMARY_COLOR } from '@/base/constants'
 
-let __null = PRIMARY_COLOR
 let columns = [
   {
     title: 'ruleName',
@@ -58,27 +67,29 @@
     title: 'ruleGranularity',
     key: 'ruleGranularity',
     dataIndex: 'ruleGranularity',
+    render: (text, record) => (record.isService ? '服务' : '应用'),
     width: 100,
     sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
   },
   {
+    title: 'createTime',
+    key: 'createTime',
+    dataIndex: 'createTime',
+    width: 120,
+    sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
+  },
+  {
     title: 'enable',
     key: 'enable',
     dataIndex: 'enable',
     render: (text, record) => (record.enable ? '是' : '否'),
-    width: 120
+    width: 120,
+    sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
   },
   {
-    title: 'effectiveTime',
-    key: 'effectiveTime',
-    dataIndex: 'effectiveTime',
-    width: 120
-  },
-  {
-    title: 'protection',
-    key: 'protection',
-    dataIndex: 'protection',
-    render: (text, record) => (record.protection ? '是' : '否'),
+    title: 'operation',
+    key: 'operation',
+    dataIndex: 'operation',
     width: 200
   }
 ]
@@ -103,20 +114,13 @@
   searchDomain.onSearch()
 })
 
+const confirm = () => {}
+
 provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain)
 </script>
 <style lang="less" scoped>
 .search-table-container {
   min-height: 60vh;
   //max-height: 70vh; //overflow: auto;
-  .app-link {
-    padding: 4px 10px 4px 4px;
-    border-radius: 4px;
-    color: v-bind('PRIMARY_COLOR');
-    &:hover {
-      cursor: pointer;
-      background: rgba(133, 131, 131, 0.13);
-    }
-  }
 }
 </style>
diff --git a/ui-vue3/src/views/traffic/routingRule/tabs/YAMLView.vue b/ui-vue3/src/views/traffic/routingRule/tabs/YAMLView.vue
index 57f7ed3..3ec091b 100644
--- a/ui-vue3/src/views/traffic/routingRule/tabs/YAMLView.vue
+++ b/ui-vue3/src/views/traffic/routingRule/tabs/YAMLView.vue
@@ -17,39 +17,41 @@
 
 <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>
+  <a-card>
+    <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>
+          <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-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-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-card>
-    </a-col>
-  </a-flex>
+      </a-col>
+    </a-flex>
+  </a-card>
 </template>
 
 <script setup lang="ts">
@@ -63,39 +65,19 @@
 
 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'
+  '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/index.vue b/ui-vue3/src/views/traffic/tagRule/index.vue
index c25bc59..4bafe16 100644
--- a/ui-vue3/src/views/traffic/tagRule/index.vue
+++ b/ui-vue3/src/views/traffic/tagRule/index.vue
@@ -20,11 +20,9 @@
       <template #customOperation>
         <a-button type="primary">新增标签路由规则</a-button>
       </template>
-      <template #bodyCell="{ text, record, column }">
+      <template #bodyCell="{ text, column,record }">
         <template v-if="column.dataIndex === 'ruleName'">
-          <a-button type="link" @click="router.replace(`formview/${record[column.key]}`)">{{
-            text
-          }}</a-button>
+          <a-button type="link" @click="router.replace(`formview/${record[column.key]}`)">{{ text }}</a-button>
         </template>
         <template v-if="column.dataIndex === 'enable'">
           {{ text ? '启用' : '禁用' }}
diff --git a/ui-vue3/src/views/traffic/tagRule/tabs/YAMLView.vue b/ui-vue3/src/views/traffic/tagRule/tabs/YAMLView.vue
index 57f7ed3..3ec091b 100644
--- a/ui-vue3/src/views/traffic/tagRule/tabs/YAMLView.vue
+++ b/ui-vue3/src/views/traffic/tagRule/tabs/YAMLView.vue
@@ -17,39 +17,41 @@
 
 <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>
+  <a-card>
+    <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>
+          <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-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-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-card>
-    </a-col>
-  </a-flex>
+      </a-col>
+    </a-flex>
+  </a-card>
 </template>
 
 <script setup lang="ts">
@@ -63,39 +65,19 @@
 
 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'
+  '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/virtualService/index.vue b/ui-vue3/src/views/traffic/virtualService/index.vue
index d75a4fc..e0e258f 100644
--- a/ui-vue3/src/views/traffic/virtualService/index.vue
+++ b/ui-vue3/src/views/traffic/virtualService/index.vue
@@ -20,11 +20,9 @@
       <template #customOperation>
         <a-button type="primary">新增路由规则</a-button>
       </template>
-      <template #bodyCell="{ text, column, record }">
+      <template #bodyCell="{ text, column,record }">
         <template v-if="column.dataIndex === 'ruleName'">
-          <a-button type="link" @click="router.replace(`formview/${record[column.key]}`)">{{
-            text
-          }}</a-button>
+          <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>
diff --git a/ui-vue3/src/views/traffic/virtualService/tabs/YAMLView.vue b/ui-vue3/src/views/traffic/virtualService/tabs/YAMLView.vue
index 57f7ed3..3ec091b 100644
--- a/ui-vue3/src/views/traffic/virtualService/tabs/YAMLView.vue
+++ b/ui-vue3/src/views/traffic/virtualService/tabs/YAMLView.vue
@@ -17,39 +17,41 @@
 
 <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>
+  <a-card>
+    <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>
+          <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-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-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-card>
-    </a-col>
-  </a-flex>
+      </a-col>
+    </a-flex>
+  </a-card>
 </template>
 
 <script setup lang="ts">
@@ -63,39 +65,19 @@
 
 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'
+  '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>