fix ui
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>
