github/go-view
4
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2026-04-23 00:00:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 新增边框

Browse Source
This commit is contained in:
MTrun
2022-03-26 20:59:20 +08:00
parent a6c750f877
commit f3ef1a4022
26 changed files with 647 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/packages/components/Decorates/Borders/BorderFirst/config.ts → src/packages/components/Decorates/Borders/Border01/config.ts
+4 -4
View File
@@ -1,15 +1,15 @@
import { publicConfig } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import {BorderFirstConfig} from './index'
import { Border01Config } from './index'
import cloneDeep from 'lodash/cloneDeep'
export const option = {
dur: 0.5,
colors: ['#4fd2dd', '#235fa7']
}
}
export default class Config extends publicConfig implements CreateComponentType {
public key = BorderFirstConfig.key
public chartConfig = cloneDeep(BorderFirstConfig)
public key = Border01Config.key
public chartConfig = cloneDeep(Border01Config)
public option = option
}
src/packages/components/Decorates/Borders/BorderFirst/config.vue → src/packages/components/Decorates/Borders/Border01/config.vue
View File
src/packages/components/Decorates/Borders/BorderFirst/index.ts → src/packages/components/Decorates/Borders/Border01/index.ts
+5 -5
View File
@@ -1,11 +1,11 @@
import image from '@/assets/images/chart/decorates/border_first.png'
import image from '@/assets/images/chart/decorates/border01.png'
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const BorderFirstConfig: ConfigType = {
key: 'BorderFirst',
chartKey: 'VBorderFirst',
conKey: 'VCBorderFirst',
export const Border01Config: ConfigType = {
key: 'Border01',
chartKey: 'VBorder01',
conKey: 'VCBorder01',
title: '边框-01',
category: ChatCategoryEnum.BORDER,
categoryName: ChatCategoryEnumName.BORDER,
src/packages/components/Decorates/Borders/BorderFirst/index.vue → src/packages/components/Decorates/Borders/Border01/index.vue
+1 -8
View File
@@ -72,14 +72,7 @@ const props = defineProps({
const borders = ['left-top', 'right-top', 'left-bottom', 'right-bottom']
const { w, h } = toRefs(props.chartConfig.attr)
const colors = computed(() => {
return props.chartConfig.option.colors
})
const dur = computed(() => {
return props.chartConfig.option.dur
})
const { colors, dur } = toRefs(props.chartConfig.option)
</script>
<style lang="scss" scoped>
src/packages/components/Decorates/Borders/BorderThirteenth/config.ts → src/packages/components/Decorates/Borders/Border02/config.ts
+3 -3
View File
@@ -1,6 +1,6 @@
import { publicConfig } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { BorderThirteenthConfig } from './index'
import { Border02Config } from './index'
import cloneDeep from 'lodash/cloneDeep'
export const option = {
@@ -9,7 +9,7 @@ export const option = {
export default class Config extends publicConfig
implements CreateComponentType {
public key = BorderThirteenthConfig.key
public chartConfig = cloneDeep(BorderThirteenthConfig)
public key = Border02Config.key
public chartConfig = cloneDeep(Border02Config)
public option = option
}
src/packages/components/Decorates/Borders/BorderThirteenth/config.vue → src/packages/components/Decorates/Borders/Border02/config.vue
View File
src/packages/components/Decorates/Borders/BorderThirteenth/index.ts → src/packages/components/Decorates/Borders/Border02/index.ts
+6 -6
View File
@@ -1,12 +1,12 @@
import image from '@/assets/images/chart/decorates/border_thirteenth.png'
import image from '@/assets/images/chart/decorates/border02.png'
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const BorderThirteenthConfig: ConfigType = {
key: 'BorderThirteenth',
chartKey: 'VBorderThirteenth',
conKey: 'VCBorderThirteenth',
title: '边框-13',
export const Border02Config: ConfigType = {
key: 'Border02',
chartKey: 'VBorder02',
conKey: 'VCBorder02',
title: '边框-02',
category: ChatCategoryEnum.BORDER,
categoryName: ChatCategoryEnumName.BORDER,
package: PackagesCategoryEnum.DECORATES,
src/packages/components/Decorates/Borders/BorderThirteenth/index.vue → src/packages/components/Decorates/Borders/Border02/index.vue
+1 -4
View File
@@ -48,10 +48,7 @@ const props = defineProps({
})
const { w, h } = toRefs(props.chartConfig.attr)
const colors = computed(() => {
return props.chartConfig.option.colors
})
const { colors } = toRefs(props.chartConfig.option)
</script>
<style lang="scss" scoped>
src/packages/components/Decorates/Borders/Border03/config.ts
+14
View File
@@ -0,0 +1,14 @@
import { publicConfig } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { Border03Config } from './index'
import cloneDeep from 'lodash/cloneDeep'
export const option = {
colors: ['#6586ec', '#2cf7fe']
}
export default class Config extends publicConfig implements CreateComponentType {
public key = Border03Config.key
public chartConfig = cloneDeep(Border03Config)
public option = option
}
src/packages/components/Decorates/Borders/Border03/config.vue
+42
View File
@@ -0,0 +1,42 @@
<template>
<CollapseItem name="边框" :expanded="true">
<SettingItemBox
:name="`颜色-${index + 1}`"
v-for="(item, index) in optionData.colors"
:key="index"
>
<SettingItem name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.colors[index]"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="optionData.colors[index] = option.colors[index]"
>
恢复默认
</n-button>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import {
CollapseItem,
SettingItemBox,
SettingItem
} from '@/components/ChartItemSetting/index'
import { option } from './config'
const props = defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
</script>
src/packages/components/Decorates/Borders/Border03/index.ts
+14
View File
@@ -0,0 +1,14 @@
import image from '@/assets/images/chart/decorates/border03.png'
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const Border03Config: ConfigType = {
key: 'Border03',
chartKey: 'VBorder03',
conKey: 'VCBorder03',
title: '边框-03',
category: ChatCategoryEnum.BORDER,
categoryName: ChatCategoryEnumName.BORDER,
package: PackagesCategoryEnum.DECORATES,
image
}
src/packages/components/Decorates/Borders/Border03/index.vue
+122
View File
@@ -0,0 +1,122 @@
<template>
<div class="go-border-box">
<svg :width="w" :height="h">
<defs>
<filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
<feMorphology
operator="dilate"
radius="1"
in="SourceAlpha"
result="thicken"
/>
<feGaussianBlur in="thicken" stdDeviation="2" result="blurred" />
<feFlood :flood-color="alpha(colors[1], 0.7)" result="glowColor">
<animate
attributeName="flood-color"
:values="`
${alpha(colors[1], 0.7)};
${alpha(colors[1], 0.3)};
${alpha(colors[1], 0.7)};
`"
dur="3s"
begin="0s"
repeatCount="indefinite"
/>
</feFlood>
<feComposite
in="glowColor"
in2="blurred"
operator="in"
result="softGlowColored"
/>
<feMerge>
<feMergeNode in="softGlowColored" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<path
v-if="w && h"
fill="transparent"
stroke-width="2"
:stroke="colors[0]"
:d="`
M15 5 L ${w - 15} 5 Q ${w - 5} 5, ${w - 5} 15
L ${w - 5} ${h - 15} Q ${w - 5} ${h - 5}, ${w - 15} ${h - 5}
L 15, ${h - 5} Q 5 ${h - 5} 5 ${h - 15} L 5 15
Q 5 5 15 5
`"
/>
<path
stroke-width="2"
fill="transparent"
stroke-linecap="round"
:filter="`url(#${filterId})`"
:stroke="colors[1]"
:d="`M 20 5 L 15 5 Q 5 5 5 15 L 5 20`"
/>
<path
stroke-width="2"
fill="transparent"
stroke-linecap="round"
:filter="`url(#${filterId})`"
:stroke="colors[1]"
:d="`M ${w - 20} 5 L ${w - 15} 5 Q ${w - 5} 5 ${w - 5} 15 L ${
w - 5
} 20`"
/>
<path
stroke-width="2"
fill="transparent"
stroke-linecap="round"
:filter="`url(#${filterId})`"
:stroke="colors[1]"
:d="`
M ${w - 20} ${h - 5} L ${w - 15} ${h - 5}
Q ${w - 5} ${h - 5} ${w - 5} ${h - 15}
L ${w - 5} ${h - 20}
`"
/>
<path
stroke-width="2"
fill="transparent"
stroke-linecap="round"
:filter="`url(#${filterId})`"
:stroke="colors[1]"
:d="`
M 20 ${h - 5} L 15 ${h - 5}
Q 5 ${h - 5} 5 ${h - 15}
L 5 ${h - 20}
`"
/>
</svg>
</div>
</template>
<script setup lang="ts">
import { PropType, toRefs, computed } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { getUUID, alpha } from '@/utils'
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true
}
})
const filterId = `border-box-03-filterId-${getUUID()}`
const { w, h } = toRefs(props.chartConfig.attr)
const { colors } = toRefs(props.chartConfig.option)
</script>
<style lang="scss" scoped>
@include go('border-box') {
}
</style>
src/packages/components/Decorates/Borders/Border04/config.ts
+19
View File
@@ -0,0 +1,19 @@
import { publicConfig } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { Border04Config } from './index'
import cloneDeep from 'lodash/cloneDeep'
export const option = {
borderTitle: '边框-04',
borderTitleWidth: 250,
borderTitleHeight: 32,
borderTitleSize: 18,
borderTitleColor: '#fff',
colors: ['#8aaafb', '#1f33a2']
}
export default class Config extends publicConfig implements CreateComponentType {
public key = Border04Config.key
public chartConfig = cloneDeep(Border04Config)
public option = option
}
src/packages/components/Decorates/Borders/Border04/config.vue
+42
View File
@@ -0,0 +1,42 @@
<template>
<CollapseItem name="边框" :expanded="true">
<SettingItemBox
:name="`颜色-${index + 1}`"
v-for="(item, index) in optionData.colors"
:key="index"
>
<SettingItem name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.colors[index]"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="optionData.colors[index] = option.colors[index]"
>
恢复默认
</n-button>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import {
CollapseItem,
SettingItemBox,
SettingItem
} from '@/components/ChartItemSetting/index'
import { option } from './config'
const props = defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
</script>
src/packages/components/Decorates/Borders/Border04/index.ts
+14
View File
@@ -0,0 +1,14 @@
import image from '@/assets/images/chart/decorates/border04.png'
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const Border04Config: ConfigType = {
key: 'Border04',
chartKey: 'VBorder04',
conKey: 'VCBorder04',
title: '边框-04',
category: ChatCategoryEnum.BORDER,
categoryName: ChatCategoryEnumName.BORDER,
package: PackagesCategoryEnum.DECORATES,
image
}
src/packages/components/Decorates/Borders/Border04/index.vue
+245
View File
@@ -0,0 +1,245 @@
<template>
<div class="go-border-box">
<svg :width="w" :height="h">
<defs>
<filter :id="filterId" h="150%" width="150%" x="-25%" y="-25%">
<feMorphology
operator="dilate"
radius="2"
in="SourceAlpha"
result="thicken"
/>
<feGaussianBlur in="thicken" stdDeviation="3" result="blurred" />
<feFlood :flood-color="colors[1]" result="glowColor" />
<feComposite
in="glowColor"
in2="blurred"
operator="in"
result="softGlowColored"
/>
<feMerge>
<feMergeNode in="softGlowColored" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<polygon
fill="transparent"
:points="`
20, 32 ${w * 0.5 - borderTitleWidth / 2}, 32 ${w * 0.5 - borderTitleWidth / 2 + 20}, 53
${w * 0.5 + borderTitleWidth / 2 - 20}, 53 ${w * 0.5 + borderTitleWidth / 2}, 32
${w - 20}, 32 ${w - 8}, 48 ${w - 8}, ${h - 25} ${w - 20}, ${h - 8}
20, ${h - 8} 8, ${h - 25} 8, 50
`"
/>
<polyline
fill="transparent"
:stroke="colors[0]"
:filter="`url(#${filterId})`"
:points="`
${(w - borderTitleWidth) / 2}, 30
20, 30 7, 50 7, ${50 + (h - 167) / 2}
13, ${55 + (h - 167) / 2} 13, ${135 + (h - 167) / 2}
7, ${140 + (h - 167) / 2} 7, ${h - 27}
20, ${h - 7} ${w - 20}, ${h - 7} ${w - 7}, ${h - 27}
${w - 7}, ${140 + (h - 167) / 2} ${w - 13}, ${135 + (h - 167) / 2}
${w - 13}, ${55 + (h - 167) / 2} ${w - 7}, ${50 + (h - 167) / 2}
${w - 7}, 50 ${w - 20}, 30 ${(w + borderTitleWidth) / 2}, 30
${(w + borderTitleWidth) / 2 - 20}, 7 ${(w - borderTitleWidth) / 2 + 20}, 7
${(w - borderTitleWidth) / 2}, 30 ${(w - borderTitleWidth) / 2 + 20}, 52
${(w + borderTitleWidth) / 2 - 20}, 52 ${(w + borderTitleWidth) / 2}, 30
`"
/>
<polygon
:stroke="colors[0]"
fill="transparent"
:points="`
${(w + borderTitleWidth) / 2 - 5}, 30 ${(w + borderTitleWidth) / 2 - 21}, 11
${(w + borderTitleWidth) / 2 - 27}, 11 ${(w + borderTitleWidth) / 2 - 8}, 34
`"
/>
<polygon
:stroke="colors[0]"
fill="transparent"
:points="`
${(w - borderTitleWidth) / 2 + 5}, 30 ${(w - borderTitleWidth) / 2 + 22}, 49
${(w - borderTitleWidth) / 2 + 28}, 49 ${(w - borderTitleWidth) / 2 + 8}, 26
`"
/>
<polygon
:stroke="colors[0]"
:fill="colors[1]"
:filter="`url(#${filterId})`"
:points="`
${(w + borderTitleWidth) / 2 - 11}, 37 ${(w + borderTitleWidth) / 2 - 32}, 11
${(w - borderTitleWidth) / 2 + 23}, 11 ${(w - borderTitleWidth) / 2 + 11}, 23
${(w - borderTitleWidth) / 2 + 33}, 49 ${(w + borderTitleWidth) / 2 - 22}, 49
`"
/>
<polygon
:filter="`url(#${filterId})`"
:fill="colors[0]"
opacity="1"
:points="`
${(w - borderTitleWidth) / 2 - 10}, 37 ${(w - borderTitleWidth) / 2 - 31}, 37
${(w - borderTitleWidth) / 2 - 25}, 46 ${(w - borderTitleWidth) / 2 - 4}, 46
`"
>
<animate
attributeName="opacity"
values="1;0.7;1"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
:filter="`url(#${filterId})`"
:fill="colors[0]"
opacity="0.7"
:points="`
${(w - borderTitleWidth) / 2 - 40}, 37 ${(w - borderTitleWidth) / 2 - 61}, 37
${(w - borderTitleWidth) / 2 - 55}, 46 ${(w - borderTitleWidth) / 2 - 34}, 46
`"
>
<animate
attributeName="opacity"
values="0.7;0.4;0.7"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
:filter="`url(#${filterId})`"
:fill="colors[0]"
opacity="0.5"
:points="`
${(w - borderTitleWidth) / 2 - 70}, 37 ${(w - borderTitleWidth) / 2 - 91}, 37
${(w - borderTitleWidth) / 2 - 85}, 46 ${(w - borderTitleWidth) / 2 - 64}, 46
`"
>
<animate
attributeName="opacity"
values="0.5;0.2;0.5"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
:filter="`url(#${filterId})`"
:fill="colors[0]"
opacity="1"
:points="`
${(w + borderTitleWidth) / 2 + 30}, 37 ${(w + borderTitleWidth) / 2 + 9}, 37
${(w + borderTitleWidth) / 2 + 3}, 46 ${(w + borderTitleWidth) / 2 + 24}, 46
`"
>
<animate
attributeName="opacity"
values="1;0.7;1"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
:filter="`url(#${filterId})`"
:fill="colors[0]"
opacity="0.7"
:points="`
${(w + borderTitleWidth) / 2 + 60}, 37 ${(w + borderTitleWidth) / 2 + 39}, 37
${(w + borderTitleWidth) / 2 + 33}, 46 ${(w + borderTitleWidth) / 2 + 54}, 46
`"
>
<animate
attributeName="opacity"
values="0.7;0.4;0.7"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
:filter="`url(#${filterId})`"
:fill="colors[0]"
opacity="0.5"
:points="`
${(w + borderTitleWidth) / 2 + 90}, 37 ${(w + borderTitleWidth) / 2 + 69}, 37
${(w + borderTitleWidth) / 2 + 63}, 46 ${(w + borderTitleWidth) / 2 + 84}, 46
`"
>
<animate
attributeName="opacity"
values="0.5;0.2;0.5"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<text
:x="`${w / 2}`"
:y="borderTitleHeight"
:fill="borderTitleColor"
:font-size="borderTitleSize"
text-anchor="middle"
dominant-baseline="middle"
>
{{ borderTitle }}
</text>
<polygon
:fill="colors[0]"
:filter="`url(#${filterId})`"
:points="`
7, ${53 + (h - 167) / 2} 11, ${57 + (h - 167) / 2}
11, ${133 + (h - 167) / 2} 7, ${137 + (h - 167) / 2}
`"
/>
<polygon
:fill="colors[0]"
:filter="`url(#${filterId})`"
:points="`
${w - 7}, ${53 + (h - 167) / 2} ${w - 11}, ${57 + (h - 167) / 2}
${w - 11}, ${133 + (h - 167) / 2} ${w - 7}, ${137 + (h - 167) / 2}
`"
/>
</svg>
</div>
</template>
<script setup lang="ts">
import { PropType, toRefs, computed } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { getUUID } from '@/utils'
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true
}
})
const filterId = `border-box-04-filterId-${getUUID()}`
const { w, h } = toRefs(props.chartConfig.attr)
const { colors, borderTitle, borderTitleColor, borderTitleSize, borderTitleHeight, borderTitleWidth} = toRefs(props.chartConfig.option)
</script>
<style lang="scss" scoped>
@include go('border-box') {
}
</style>
src/packages/components/Decorates/Borders/index.ts
+5 -3
View File
@@ -1,4 +1,6 @@
import { BorderThirteenthConfig } from './BorderThirteenth/index'
import { BorderFirstConfig } from './BorderFirst/index'
import { Border01Config } from './Border01/index'
import { Border02Config } from './Border02/index'
import { Border03Config } from './Border03/index'
import { Border04Config } from './Border04/index'
export default [BorderFirstConfig, BorderThirteenthConfig]
export default [Border01Config, Border02Config, Border03Config, Border04Config]