1.fix
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>
