1.add animation for editor
2.add Icon for tabs of FlowControl module
diff --git a/ui-vue3/src/router/defaultRoutes.ts b/ui-vue3/src/router/defaultRoutes.ts
index e1e5028..977fe70 100644
--- a/ui-vue3/src/router/defaultRoutes.ts
+++ b/ui-vue3/src/router/defaultRoutes.ts
@@ -300,7 +300,8 @@
name: 'routingRuleDomain.formView',
component: () => import('../views/traffic/routingRule/tabs/formView.vue'),
meta: {
- tab: true
+ tab: true,
+ icon: 'oui:apm-trace'
}
},
{
@@ -308,7 +309,8 @@
name: 'routingRuleDomain.YAMLView',
component: () => import('../views/traffic/routingRule/tabs/YAMLView.vue'),
meta: {
- tab: true
+ tab: true,
+ icon: 'oui:app-console'
}
}
]
@@ -335,7 +337,8 @@
name: 'tagRuleDomain.formView',
component: () => import('../views/traffic/tagRule/tabs/formView.vue'),
meta: {
- tab: true
+ tab: true,
+ icon: 'oui:apm-trace'
}
},
{
@@ -343,7 +346,8 @@
name: 'tagRuleDomain.YAMLView',
component: () => import('../views/traffic/tagRule/tabs/YAMLView.vue'),
meta: {
- tab: true
+ tab: true,
+ icon: 'oui:app-console'
}
}
]
@@ -370,7 +374,8 @@
name: 'dynamicConfigDomain.formView',
component: () => import('../views/traffic/dynamicConfig/tabs/formView.vue'),
meta: {
- tab: true
+ tab: true,
+ icon: 'oui:apm-trace'
}
},
{
@@ -378,7 +383,8 @@
name: 'dynamicConfigDomain.YAMLView',
component: () => import('../views/traffic/dynamicConfig/tabs/YAMLView.vue'),
meta: {
- tab: true
+ tab: true,
+ icon: 'oui:app-console'
}
}
]
@@ -409,7 +415,8 @@
name: 'virtualServiceDomain.formView',
component: () => import('../views/traffic/virtualService/tabs/formView.vue'),
meta: {
- tab: true
+ tab: true,
+ icon: 'oui:apm-trace'
}
},
{
@@ -417,7 +424,8 @@
name: 'virtualServiceDomain.YAMLView',
component: () => import('../views/traffic/virtualService/tabs/YAMLView.vue'),
meta: {
- tab: true
+ tab: true,
+ icon: 'oui:app-console'
}
}
]
@@ -444,7 +452,8 @@
name: 'destinationRuleDomain.formView',
component: () => import('../views/traffic/destinationRule/tabs/formView.vue'),
meta: {
- tab: true
+ tab: true,
+ icon: 'oui:apm-trace'
}
},
{
@@ -452,7 +461,8 @@
name: 'destinationRuleDomain.YAMLView',
component: () => import('../views/traffic/destinationRule/tabs/YAMLView.vue'),
meta: {
- tab: true
+ tab: true,
+ icon: 'oui:app-console'
}
}
]
diff --git a/ui-vue3/src/views/traffic/destinationRule/tabs/YAMLView.vue b/ui-vue3/src/views/traffic/destinationRule/tabs/YAMLView.vue
index 05f141c..785fa05 100644
--- a/ui-vue3/src/views/traffic/destinationRule/tabs/YAMLView.vue
+++ b/ui-vue3/src/views/traffic/destinationRule/tabs/YAMLView.vue
@@ -16,10 +16,9 @@
-->
<template>
- <!-- editor-->
<a-card>
<a-flex style="width: 100%">
- <a-col :span="isDrawerOpened ? 16 : 24">
+ <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') }}
@@ -27,19 +26,21 @@
<DoubleRightOutlined v-else />
</a-button>
- <MonacoEditor
- :modelValue="YAMLValue"
- theme="vs-dark"
- :height="280"
- language="yaml"
- :readonly="isReadonly"
- />
+ <div class="editorBox">
+ <MonacoEditor
+ :modelValue="YAMLValue"
+ theme="vs-dark"
+ :height="500"
+ language="yaml"
+ :readonly="isReadonly"
+ />
+ </div>
</a-flex>
</a-col>
- <a-col :span="isDrawerOpened ? 8 : 0">
- <a-card v-show="isDrawerOpened">
- <a-card>
+ <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>
@@ -63,6 +64,8 @@
const isDrawerOpened = ref(false)
+const sliderSpan = ref(8)
+
const YAMLValue = ref(
'configVersion: v3.0\n' +
'force: true\n' +
@@ -77,4 +80,24 @@
)
</script>
-<style scoped lang="less"></style>
+<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/YAMLView.vue b/ui-vue3/src/views/traffic/dynamicConfig/tabs/YAMLView.vue
index 05f141c..785fa05 100644
--- a/ui-vue3/src/views/traffic/dynamicConfig/tabs/YAMLView.vue
+++ b/ui-vue3/src/views/traffic/dynamicConfig/tabs/YAMLView.vue
@@ -16,10 +16,9 @@
-->
<template>
- <!-- editor-->
<a-card>
<a-flex style="width: 100%">
- <a-col :span="isDrawerOpened ? 16 : 24">
+ <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') }}
@@ -27,19 +26,21 @@
<DoubleRightOutlined v-else />
</a-button>
- <MonacoEditor
- :modelValue="YAMLValue"
- theme="vs-dark"
- :height="280"
- language="yaml"
- :readonly="isReadonly"
- />
+ <div class="editorBox">
+ <MonacoEditor
+ :modelValue="YAMLValue"
+ theme="vs-dark"
+ :height="500"
+ language="yaml"
+ :readonly="isReadonly"
+ />
+ </div>
</a-flex>
</a-col>
- <a-col :span="isDrawerOpened ? 8 : 0">
- <a-card v-show="isDrawerOpened">
- <a-card>
+ <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>
@@ -63,6 +64,8 @@
const isDrawerOpened = ref(false)
+const sliderSpan = ref(8)
+
const YAMLValue = ref(
'configVersion: v3.0\n' +
'force: true\n' +
@@ -77,4 +80,24 @@
)
</script>
-<style scoped lang="less"></style>
+<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/YAMLView.vue b/ui-vue3/src/views/traffic/routingRule/tabs/YAMLView.vue
index 05f141c..785fa05 100644
--- a/ui-vue3/src/views/traffic/routingRule/tabs/YAMLView.vue
+++ b/ui-vue3/src/views/traffic/routingRule/tabs/YAMLView.vue
@@ -16,10 +16,9 @@
-->
<template>
- <!-- editor-->
<a-card>
<a-flex style="width: 100%">
- <a-col :span="isDrawerOpened ? 16 : 24">
+ <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') }}
@@ -27,19 +26,21 @@
<DoubleRightOutlined v-else />
</a-button>
- <MonacoEditor
- :modelValue="YAMLValue"
- theme="vs-dark"
- :height="280"
- language="yaml"
- :readonly="isReadonly"
- />
+ <div class="editorBox">
+ <MonacoEditor
+ :modelValue="YAMLValue"
+ theme="vs-dark"
+ :height="500"
+ language="yaml"
+ :readonly="isReadonly"
+ />
+ </div>
</a-flex>
</a-col>
- <a-col :span="isDrawerOpened ? 8 : 0">
- <a-card v-show="isDrawerOpened">
- <a-card>
+ <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>
@@ -63,6 +64,8 @@
const isDrawerOpened = ref(false)
+const sliderSpan = ref(8)
+
const YAMLValue = ref(
'configVersion: v3.0\n' +
'force: true\n' +
@@ -77,4 +80,24 @@
)
</script>
-<style scoped lang="less"></style>
+<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/YAMLView.vue b/ui-vue3/src/views/traffic/tagRule/tabs/YAMLView.vue
index 05f141c..785fa05 100644
--- a/ui-vue3/src/views/traffic/tagRule/tabs/YAMLView.vue
+++ b/ui-vue3/src/views/traffic/tagRule/tabs/YAMLView.vue
@@ -16,10 +16,9 @@
-->
<template>
- <!-- editor-->
<a-card>
<a-flex style="width: 100%">
- <a-col :span="isDrawerOpened ? 16 : 24">
+ <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') }}
@@ -27,19 +26,21 @@
<DoubleRightOutlined v-else />
</a-button>
- <MonacoEditor
- :modelValue="YAMLValue"
- theme="vs-dark"
- :height="280"
- language="yaml"
- :readonly="isReadonly"
- />
+ <div class="editorBox">
+ <MonacoEditor
+ :modelValue="YAMLValue"
+ theme="vs-dark"
+ :height="500"
+ language="yaml"
+ :readonly="isReadonly"
+ />
+ </div>
</a-flex>
</a-col>
- <a-col :span="isDrawerOpened ? 8 : 0">
- <a-card v-show="isDrawerOpened">
- <a-card>
+ <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>
@@ -63,6 +64,8 @@
const isDrawerOpened = ref(false)
+const sliderSpan = ref(8)
+
const YAMLValue = ref(
'configVersion: v3.0\n' +
'force: true\n' +
@@ -77,4 +80,24 @@
)
</script>
-<style scoped lang="less"></style>
+<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/YAMLView.vue b/ui-vue3/src/views/traffic/virtualService/tabs/YAMLView.vue
index 05f141c..785fa05 100644
--- a/ui-vue3/src/views/traffic/virtualService/tabs/YAMLView.vue
+++ b/ui-vue3/src/views/traffic/virtualService/tabs/YAMLView.vue
@@ -16,10 +16,9 @@
-->
<template>
- <!-- editor-->
<a-card>
<a-flex style="width: 100%">
- <a-col :span="isDrawerOpened ? 16 : 24">
+ <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') }}
@@ -27,19 +26,21 @@
<DoubleRightOutlined v-else />
</a-button>
- <MonacoEditor
- :modelValue="YAMLValue"
- theme="vs-dark"
- :height="280"
- language="yaml"
- :readonly="isReadonly"
- />
+ <div class="editorBox">
+ <MonacoEditor
+ :modelValue="YAMLValue"
+ theme="vs-dark"
+ :height="500"
+ language="yaml"
+ :readonly="isReadonly"
+ />
+ </div>
</a-flex>
</a-col>
- <a-col :span="isDrawerOpened ? 8 : 0">
- <a-card v-show="isDrawerOpened">
- <a-card>
+ <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>
@@ -63,6 +64,8 @@
const isDrawerOpened = ref(false)
+const sliderSpan = ref(8)
+
const YAMLValue = ref(
'configVersion: v3.0\n' +
'force: true\n' +
@@ -77,4 +80,24 @@
)
</script>
-<style scoped lang="less"></style>
+<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>
