From aec646b5b08106657a1eaa50e6c080434cc81524 Mon Sep 17 00:00:00 2001 From: MTrun <1262327911@qq.com> Date: Sat, 26 Mar 2022 20:59:20 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=BE=B9=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 + pnpm-lock.yaml | 59 +++++ .../{border_first.png => border01.png} | Bin .../{border_thirteenth.png => border02.png} | Bin .../images/chart/decorates/border03.png | Bin 0 -> 3668 bytes .../images/chart/decorates/border04.png | Bin 0 -> 3735 bytes src/hooks/useTheme.hook.ts | 6 +- .../{BorderFirst => Border01}/config.ts | 8 +- .../{BorderFirst => Border01}/config.vue | 0 .../{BorderFirst => Border01}/index.ts | 10 +- .../{BorderFirst => Border01}/index.vue | 9 +- .../{BorderThirteenth => Border02}/config.ts | 6 +- .../{BorderThirteenth => Border02}/config.vue | 0 .../{BorderThirteenth => Border02}/index.ts | 12 +- .../{BorderThirteenth => Border02}/index.vue | 5 +- .../Decorates/Borders/Border03/config.ts | 14 + .../Decorates/Borders/Border03/config.vue | 42 +++ .../Decorates/Borders/Border03/index.ts | 14 + .../Decorates/Borders/Border03/index.vue | 122 +++++++++ .../Decorates/Borders/Border04/config.ts | 19 ++ .../Decorates/Borders/Border04/config.vue | 42 +++ .../Decorates/Borders/Border04/index.ts | 14 + .../Decorates/Borders/Border04/index.vue | 245 ++++++++++++++++++ .../components/Decorates/Borders/index.ts | 8 +- src/utils/style.ts | 73 ++++-- .../components/EditAlignLine/index.vue | 2 +- 26 files changed, 647 insertions(+), 65 deletions(-) rename src/assets/images/chart/decorates/{border_first.png => border01.png} (100%) rename src/assets/images/chart/decorates/{border_thirteenth.png => border02.png} (100%) create mode 100644 src/assets/images/chart/decorates/border03.png create mode 100644 src/assets/images/chart/decorates/border04.png rename src/packages/components/Decorates/Borders/{BorderFirst => Border01}/config.ts (70%) rename src/packages/components/Decorates/Borders/{BorderFirst => Border01}/config.vue (100%) rename src/packages/components/Decorates/Borders/{BorderFirst => Border01}/index.ts (60%) rename src/packages/components/Decorates/Borders/{BorderFirst => Border01}/index.vue (94%) rename src/packages/components/Decorates/Borders/{BorderThirteenth => Border02}/config.ts (68%) rename src/packages/components/Decorates/Borders/{BorderThirteenth => Border02}/config.vue (100%) rename src/packages/components/Decorates/Borders/{BorderThirteenth => Border02}/index.ts (53%) rename src/packages/components/Decorates/Borders/{BorderThirteenth => Border02}/index.vue (94%) create mode 100644 src/packages/components/Decorates/Borders/Border03/config.ts create mode 100644 src/packages/components/Decorates/Borders/Border03/config.vue create mode 100644 src/packages/components/Decorates/Borders/Border03/index.ts create mode 100644 src/packages/components/Decorates/Borders/Border03/index.vue create mode 100644 src/packages/components/Decorates/Borders/Border04/config.ts create mode 100644 src/packages/components/Decorates/Borders/Border04/config.vue create mode 100644 src/packages/components/Decorates/Borders/Border04/index.ts create mode 100644 src/packages/components/Decorates/Borders/Border04/index.vue diff --git a/package.json b/package.json index 4ac9f680..4395d4d3 100644 --- a/package.json +++ b/package.json @@ -8,8 +8,10 @@ "new": "plop --plopfile ./plop/plopfile.js" }, "dependencies": { + "@types/color": "^3.0.3", "animate.css": "^4.1.1", "axios": "0.23.0", + "color": "^4.2.1", "crypto-ts": "^1.0.2", "highlight.js": "^11.5.0", "naive-ui": "^2.25.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 73ad9aab..7503c719 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,6 +1,7 @@ lockfileVersion: 5.3 specifiers: + '@types/color': ^3.0.3 '@types/node': ^16.11.1 '@typescript-eslint/eslint-plugin': ^5.6.0 '@typescript-eslint/parser': ^5.6.0 @@ -12,6 +13,7 @@ specifiers: '@vueuse/core': ^7.3.0 animate.css: ^4.1.1 axios: 0.23.0 + color: ^4.2.1 crypto-ts: ^1.0.2 default-passive-events: ^2.0.0 echarts: ^5.3.0 @@ -45,8 +47,10 @@ specifiers: vue3-sketch-ruler: ^1.3.3 dependencies: + '@types/color': registry.npmjs.org/@types/color/3.0.3 animate.css: r2.cnpmjs.org/animate.css/4.1.1 axios: rg.cnpmjs.org/axios/0.23.0 + color: registry.npmjs.org/color/4.2.1 crypto-ts: r2.cnpmjs.org/crypto-ts/1.0.2 highlight.js: registry.npmjs.org/highlight.js/11.5.0 naive-ui: registry.npmjs.org/naive-ui/2.25.2_vue@3.2.24 @@ -1764,6 +1768,28 @@ packages: version: 0.8.0 dev: false + registry.npmjs.org/@types/color-convert/2.0.0: + resolution: {integrity: sha512-m7GG7IKKGuJUXvkZ1qqG3ChccdIM/qBBo913z+Xft0nKCX4hAU/IxKwZBU4cpRZ7GS5kV4vOblUkILtSShCPXQ==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.0.tgz} + name: '@types/color-convert' + version: 2.0.0 + dependencies: + '@types/color-name': registry.npmjs.org/@types/color-name/1.1.1 + dev: false + + registry.npmjs.org/@types/color-name/1.1.1: + resolution: {integrity: sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz} + name: '@types/color-name' + version: 1.1.1 + dev: false + + registry.npmjs.org/@types/color/3.0.3: + resolution: {integrity: sha512-X//qzJ3d3Zj82J9sC/C18ZY5f43utPbAJ6PhYt/M7uG6etcF6MRpKdN880KBy43B0BMzSfeT96MzrsNjFI3GbA==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/@types/color/-/color-3.0.3.tgz} + name: '@types/color' + version: 3.0.3 + dependencies: + '@types/color-convert': registry.npmjs.org/@types/color-convert/2.0.0 + dev: false + registry.npmjs.org/@types/jest/27.4.0: resolution: {integrity: sha512-gHl8XuC1RZ8H2j5sHv/JqsaxXkDDM9iDOgu0Wp8sjs4u/snb2PVehyWXJPr+ORA0RPpgw231mnutWI1+0hgjIQ==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/@types/jest/-/jest-27.4.0.tgz} name: '@types/jest' @@ -1870,6 +1896,25 @@ packages: name: color-name version: 1.1.4 + registry.npmjs.org/color-string/1.9.0: + resolution: {integrity: sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/color-string/-/color-string-1.9.0.tgz} + name: color-string + version: 1.9.0 + dependencies: + color-name: registry.npmjs.org/color-name/1.1.4 + simple-swizzle: registry.npmjs.org/simple-swizzle/0.2.2 + dev: false + + registry.npmjs.org/color/4.2.1: + resolution: {integrity: sha512-MFJr0uY4RvTQUKvPq7dh9grVOTYSFeXja2mBXioCGjnjJoXrAp9jJ1NQTDR73c9nwBSAQiNKloKl5zq9WB9UPw==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/color/-/color-4.2.1.tgz} + name: color + version: 4.2.1 + engines: {node: '>=12.5.0'} + dependencies: + color-convert: registry.npmjs.org/color-convert/2.0.1 + color-string: registry.npmjs.org/color-string/1.9.0 + dev: false + registry.npmjs.org/commander/9.1.0: resolution: {integrity: sha512-i0/MaqBtdbnJ4XQs4Pmyb+oFQl+q0lsAmokVUH92SlSw4fkeAcG3bVon+Qt7hmtF+u3Het6o4VgrcY3qAoEB6w==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/commander/-/commander-9.1.0.tgz} name: commander @@ -2163,6 +2208,12 @@ packages: engines: {node: '>=12.0.0'} dev: false + registry.npmjs.org/is-arrayish/0.3.2: + resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz} + name: is-arrayish + version: 0.3.2 + dev: false + registry.npmjs.org/jest-diff/27.5.1: resolution: {integrity: sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/jest-diff/-/jest-diff-27.5.1.tgz} name: jest-diff @@ -2284,6 +2335,14 @@ packages: '@types/jest': registry.npmjs.org/@types/jest/27.4.0 dev: false + registry.npmjs.org/simple-swizzle/0.2.2: + resolution: {integrity: sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz} + name: simple-swizzle + version: 0.2.2 + dependencies: + is-arrayish: registry.npmjs.org/is-arrayish/0.3.2 + dev: false + registry.npmjs.org/supports-color/5.5.0: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz} name: supports-color diff --git a/src/assets/images/chart/decorates/border_first.png b/src/assets/images/chart/decorates/border01.png similarity index 100% rename from src/assets/images/chart/decorates/border_first.png rename to src/assets/images/chart/decorates/border01.png diff --git a/src/assets/images/chart/decorates/border_thirteenth.png b/src/assets/images/chart/decorates/border02.png similarity index 100% rename from src/assets/images/chart/decorates/border_thirteenth.png rename to src/assets/images/chart/decorates/border02.png diff --git a/src/assets/images/chart/decorates/border03.png b/src/assets/images/chart/decorates/border03.png new file mode 100644 index 0000000000000000000000000000000000000000..c548955ed5d72fd541de1dfd3393ab9bae088806 GIT binary patch literal 3668 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 DZs2GS literal 0 HcmV?d00001 diff --git a/src/assets/images/chart/decorates/border04.png b/src/assets/images/chart/decorates/border04.png new file mode 100644 index 0000000000000000000000000000000000000000..c25c44fa1b1d1a031852473d12b88730be1eec5d GIT binary patch literal 3735 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 literal 0 HcmV?d00001 diff --git a/src/hooks/useTheme.hook.ts b/src/hooks/useTheme.hook.ts index 1560ffaa..94d809d9 100644 --- a/src/hooks/useTheme.hook.ts +++ b/src/hooks/useTheme.hook.ts @@ -2,7 +2,7 @@ import { computed, toRefs } from 'vue' import { darkTheme, GlobalThemeOverrides } from 'naive-ui' import { useDesignStore } from '@/store/modules/designStore/designStore' import { borderRadius } from '@/settings/designSetting' -import { toLight } from '@/utils' +import { alpha, lighten } from '@/utils' /** * * 设置全局主题 @@ -16,8 +16,8 @@ export const useThemeOverridesHook = () => { const commonObj = { common: { primaryColor: getAppTheme.value, - primaryColorHover: toLight(getAppTheme.value, 6), - primaryColorPressed: toLight(getAppTheme.value, 6), + primaryColorHover: lighten(alpha(getAppTheme.value), 0.1), + primaryColorPressed: lighten(alpha(getAppTheme.value), 0.1), primaryColorSuppl: getAppTheme.value, borderRadius } diff --git a/src/packages/components/Decorates/Borders/BorderFirst/config.ts b/src/packages/components/Decorates/Borders/Border01/config.ts similarity index 70% rename from src/packages/components/Decorates/Borders/BorderFirst/config.ts rename to src/packages/components/Decorates/Borders/Border01/config.ts index d11fe35b..4a8f9703 100644 --- a/src/packages/components/Decorates/Borders/BorderFirst/config.ts +++ b/src/packages/components/Decorates/Borders/Border01/config.ts @@ -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 } diff --git a/src/packages/components/Decorates/Borders/BorderFirst/config.vue b/src/packages/components/Decorates/Borders/Border01/config.vue similarity index 100% rename from src/packages/components/Decorates/Borders/BorderFirst/config.vue rename to src/packages/components/Decorates/Borders/Border01/config.vue diff --git a/src/packages/components/Decorates/Borders/BorderFirst/index.ts b/src/packages/components/Decorates/Borders/Border01/index.ts similarity index 60% rename from src/packages/components/Decorates/Borders/BorderFirst/index.ts rename to src/packages/components/Decorates/Borders/Border01/index.ts index c6963a91..396caf56 100644 --- a/src/packages/components/Decorates/Borders/BorderFirst/index.ts +++ b/src/packages/components/Decorates/Borders/Border01/index.ts @@ -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, diff --git a/src/packages/components/Decorates/Borders/BorderFirst/index.vue b/src/packages/components/Decorates/Borders/Border01/index.vue similarity index 94% rename from src/packages/components/Decorates/Borders/BorderFirst/index.vue rename to src/packages/components/Decorates/Borders/Border01/index.vue index bcfb310b..b6bdc30c 100644 --- a/src/packages/components/Decorates/Borders/BorderFirst/index.vue +++ b/src/packages/components/Decorates/Borders/Border01/index.vue @@ -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) diff --git a/src/packages/components/Decorates/Borders/Border04/config.ts b/src/packages/components/Decorates/Borders/Border04/config.ts new file mode 100644 index 00000000..74a39fdf --- /dev/null +++ b/src/packages/components/Decorates/Borders/Border04/config.ts @@ -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 +} diff --git a/src/packages/components/Decorates/Borders/Border04/config.vue b/src/packages/components/Decorates/Borders/Border04/config.vue new file mode 100644 index 00000000..5657b6a0 --- /dev/null +++ b/src/packages/components/Decorates/Borders/Border04/config.vue @@ -0,0 +1,42 @@ + + + diff --git a/src/packages/components/Decorates/Borders/Border04/index.ts b/src/packages/components/Decorates/Borders/Border04/index.ts new file mode 100644 index 00000000..2d34e3c5 --- /dev/null +++ b/src/packages/components/Decorates/Borders/Border04/index.ts @@ -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 +} diff --git a/src/packages/components/Decorates/Borders/Border04/index.vue b/src/packages/components/Decorates/Borders/Border04/index.vue new file mode 100644 index 00000000..b8a7d8f2 --- /dev/null +++ b/src/packages/components/Decorates/Borders/Border04/index.vue @@ -0,0 +1,245 @@ + + + + + diff --git a/src/packages/components/Decorates/Borders/index.ts b/src/packages/components/Decorates/Borders/index.ts index 1ec98c3c..4ba231d2 100644 --- a/src/packages/components/Decorates/Borders/index.ts +++ b/src/packages/components/Decorates/Borders/index.ts @@ -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] diff --git a/src/utils/style.ts b/src/utils/style.ts index 43469400..c206c45f 100644 --- a/src/utils/style.ts +++ b/src/utils/style.ts @@ -1,4 +1,48 @@ import { useDesignStore } from '@/store/modules/designStore/designStore' +import Color from 'color' + +/** + * * hsla 转换 + * @param color 颜色 + * @param alpha 默认1 + * @returns + */ +export function alpha(color: string, alpha = 1 ) { + return Color(color).alpha(alpha).toString() +} + +/** + * * 颜色透明 + * rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4) + * @param color 颜色 + * @param concentration 0~1 浓度 + * @returns + */ +export function fade(color: string, fade: number) { + return Color(color).fade(fade).toString() +} + +/** + * * 颜色变亮 + * hsl(100, 50%, 10%) -> hsl(100, 50%, 50%) + * @param color 颜色 + * @param concentration 0~1 浓度 + * @returns + */ +export function lighten(color: string, concentration: number) { + return Color(color).lighten(concentration).toString() +} + +/** + * * 颜色变暗 + * hsl(100, 50%, 50%) -> hsl(100, 50%, 25%) + * @param color 颜色 + * @param concentration 0~1 浓度 + * @returns + */ +export function darken(color: string, concentration: number) { + return Color(color).darken(concentration).toString() +} /** * * 修改主题色 @@ -13,31 +57,4 @@ export const setHtmlTheme = (themeName?: string) => { } const designStore = useDesignStore() e.setAttribute('data-theme', designStore.themeName) -} - -/** - * * 将通过的百分比与十六进制颜色的R、G或B相加 - * @param {string} color - * @param {number} amount - * @returns {string} color - */ -const addLight = (color: string, amount: number): string => { - const cc = parseInt(color, 16) + amount - const c = cc > 255 ? 255 : cc - return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}` -} - -/** - * * 根据通过的百分比点亮6个字符的十六进制颜色 - * @param {string} color - * @param {number} amount - * @returns {string} color - */ -export const toLight = (color: string, amount: number): string => { - color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color - amount = Math.trunc((255 * amount) / 100) - return `#${addLight(color.substring(0, 2), amount)}${addLight( - color.substring(2, 4), - amount - )}${addLight(color.substring(4, 6), amount)}` -} +} \ No newline at end of file diff --git a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue index 36e4d73f..a3165bc7 100644 --- a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue +++ b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue @@ -74,7 +74,7 @@ const selectId = computed(() => chartEditStore.getTargetChart.selectId) const selectTatget = computed( () => chartEditStore.getComponentList[chartEditStore.fetchTargetIndex()] ) -const selectAttr = computed(() => selectTatget.value.attr || {}) +const selectAttr = computed(() => selectTatget.value?.attr || {}) // * 画布坐标 const canvasPositionList = computed(() => {