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 00000000..c548955e Binary files /dev/null and b/src/assets/images/chart/decorates/border03.png differ diff --git a/src/assets/images/chart/decorates/border04.png b/src/assets/images/chart/decorates/border04.png new file mode 100644 index 00000000..c25c44fa Binary files /dev/null and b/src/assets/images/chart/decorates/border04.png differ 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(() => {