Skip to content

Commit

Permalink
1.improve virtualServicePage ui details
Browse files Browse the repository at this point in the history
  • Loading branch information
@ikun-Lg
ikun-Lg committed Apr 2, 2024
1 parent dfc94b2 commit bcfe9ae
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 17 deletions.
40 changes: 36 additions & 4 deletions ui-vue3/src/views/traffic/destinationRule/tabs/formView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,13 @@
<a-col :span="12">
<a-descriptions title="" layout="vertical" :column="1">
<a-descriptions-item label="规则名" :labelStyle="{ fontWeight: 'bold', width: '100px' }">
shop-user/StandardRouter
<p
@click="copyIt('shop-user/StandardRouter')"
class="description-item-content with-card"
>
shop-user/StandardRouter
<CopyOutlined />
</p>
</a-descriptions-item>
<a-descriptions-item
label="作用对象"
Expand Down Expand Up @@ -120,11 +126,37 @@
</a-card>
</template>

<script setup lang="ts"></script>
<script setup lang="ts">
import { CopyOutlined } from '@ant-design/icons-vue'
import { type ComponentInternalInstance, getCurrentInstance } from 'vue'
import { PRIMARY_COLOR, PRIMARY_COLOR_T } from '@/base/constants'
import useClipboard from 'vue-clipboard3'
import { message } from 'ant-design-vue'
const {
appContext: {
config: { globalProperties }
}
} = <ComponentInternalInstance>getCurrentInstance()
let __ = PRIMARY_COLOR
let PRIMARY_COLOR_20 = PRIMARY_COLOR_T('20')
const toClipboard = useClipboard().toClipboard
function copyIt(v: string) {
message.success(globalProperties.$t('messageDomain.success.copy'))
toClipboard(v)
}
</script>

<style scoped lang="less">
.description-item-content {
margin-left: 20px;
width: 90%;
&.no-card {
padding-left: 20px;
}
&.with-card:hover {
color: v-bind('PRIMARY_COLOR');
}
}
</style>
118 changes: 105 additions & 13 deletions ui-vue3/src/views/traffic/virtualService/tabs/formView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,22 @@
<a-col :span="12">
<a-descriptions title="" layout="vertical" :column="1">
<a-descriptions-item label="规则名" :labelStyle="{ fontWeight: 'bold', width: '100px' }">
shop-user/StandardRouter
<p
@click="copyIt('shop-user/StandardRouter')"
class="description-item-content with-card"
>
shop-user/StandardRouter
<CopyOutlined />
</p>
</a-descriptions-item>
<a-descriptions-item
label="作用对象"
:labelStyle="{ fontWeight: 'bold', width: '100px' }"
>
shop-user
<p @click="copyIt('shop-user')" class="description-item-content with-card">
shop-user
<CopyOutlined />
</p>
</a-descriptions-item>
</a-descriptions>
</a-col>
Expand All @@ -53,20 +62,76 @@
<span>名称：未指定</span>
<a-space size="small">
<span>服务生效范围:</span>
<a-space>
<a-space-compact direction="horizontal">
<a-button type="primary">exact</a-button>
<a-button type="primary">org.apache.dubbo.samples.UserService</a-button>
</a-space-compact>
</a-space>
<a-tooltip>
<template #title>服务精确匹配org.apache.dubbo.samples.UserService</template>
<a-space>
<a-space-compact direction="horizontal">
<a-button type="primary">service</a-button>
<a-button type="primary">exact</a-button>
<a-button type="primary">org.apache.dubbo.samples.UserService</a-button>
</a-space-compact>
</a-space>
</a-tooltip>
</a-space>
<a-space size="middle">
<span>路由:</span>
<a-card style="min-width: 400px">
<a-space direction="vertical" size="middle">
<span>名称：未指定</span>
<a-space size="middle">
<span>匹配条件:</span>
<span>名称</span>
<span>未指定</span>
</a-space>

<a-space size="middle" align="start">
<span>匹配条件</span>
<a-space size="middle" direction="vertical">
<a-space size="middle" v-for="i in 3">
{{ i + '.' }}
<a-tooltip>
<template #title>方法前缀匹配get</template>
<a-space>
<a-space-compact direction="horizontal">
<a-button type="primary">method</a-button>
<a-button type="primary">prefix</a-button>
<a-button type="primary">get</a-button>
</a-space-compact>
</a-space>
</a-tooltip>
<a-tooltip>
<template #title>参数范围匹配1-100</template>
<a-space>
<a-space-compact direction="horizontal">
<a-button type="primary">arg[1]</a-button>
<a-button type="primary">range</a-button>
<a-button type="primary"> 1-100</a-button>
</a-space-compact>
</a-space>
</a-tooltip>
</a-space>
</a-space>
</a-space>
<a-space size="middle">
<span>路由分发</span>
<a-tooltip>
<template #title>subset=-v1的地址子集赋予权重70</template>
<a-space>
<a-space>
<a-space-compact direction="horizontal">
<a-button type="primary">subset=v1</a-button>
<a-button type="primary">weight=70</a-button>
</a-space-compact>
</a-space>
</a-space>
</a-tooltip>
<a-tooltip>
<template #title>subset=-v2的地址子集赋予权重30</template>
<a-space>
<a-space-compact direction="horizontal">
<a-button type="primary">subset=v2</a-button>
<a-button type="primary">weight=30</a-button>
</a-space-compact>
</a-space>
</a-tooltip>
</a-space>
</a-space>
</a-card>
Expand All @@ -76,11 +141,38 @@
</a-card>
</template>

<script setup lang="ts"></script>
<script setup lang="ts">
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, PRIMARY_COLOR_T } from '@/base/constants'
const {
appContext: {
config: { globalProperties }
}
} = <ComponentInternalInstance>getCurrentInstance()
let __ = PRIMARY_COLOR
let PRIMARY_COLOR_20 = PRIMARY_COLOR_T('20')
const toClipboard = useClipboard().toClipboard
function copyIt(v: string) {
message.success(globalProperties.$t('messageDomain.success.copy'))
toClipboard(v)
}
</script>

<style scoped lang="less">
.description-item-content {
margin-left: 20px;
width: 90%;
&.no-card {
padding-left: 20px;
}
&.with-card:hover {
color: v-bind('PRIMARY_COLOR');
}
}
</style>

0 comments on commit bcfe9ae

Please sign in to comment.