test/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2024-12-11 09:44:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf: 去除组件默认滤镜和变换，避免模糊问题

Browse Source
This commit is contained in:
奔跑的面条 2022-09-26 19:40:46 +08:00
parent 18d83f161e
commit 960f3aa3cf
13 changed files with 26 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Pages/ChartItemSetting/StylesSetting.vue
View File

@ -6,7 +6,7 @@
<collapse-item :name="isCanvas ? '滤镜' : '滤镜 / 变换'">
<template #header>
<n-switch v-if="isCanvas" v-model:value="chartStyles.filterShow" size="small"></n-switch>
<n-switch v-model:value="chartStyles.filterShow" size="small"></n-switch>
</template>
<setting-item-box name="色相" :alone="true">
<setting-item :name="`值：${chartStyles.hueRotate}deg`">
@ -126,7 +126,7 @@
</setting-item-box>
<!-- 提示 -->
<n-tag v-show="isCanvas" type="warning"> 若预览时大屏模糊，可以尝试关闭滤镜进行修复 </n-tag>
<n-tag type="warning"> 若预览时大屏模糊，可以尝试关闭滤镜进行修复 </n-tag>
</collapse-item>
</template>

1
src/packages/components/Informations/Mores/Video/index.vue
View File

@ -60,7 +60,6 @@ watch(
<style lang="scss" scoped>
@include go('video') {
display: block;
mix-blend-mode: screen;
object-fit: v-bind('option.fit');
border-radius: v-bind('option.borderRadius');
}

6
src/packages/index.d.ts vendored
View File

@ -83,7 +83,11 @@ export interface PublicConfigType {
[FilterEnum.SKEW_Y]: number
// 动画
animations: string[]
}
},
status: {
lock: boolean,
hide: boolean,
},
filter?: string
setPosition: Function
}

7
src/packages/public/publicConfig.ts
View File

@ -45,7 +45,7 @@ export class PublicConfigClass implements PublicConfigType {
// 基本样式
public styles = {
// 使用滤镜
filterShow: true,
filterShow: false,
// 色相
hueRotate: 0,
// 饱和度
@ -69,6 +69,11 @@ export class PublicConfigClass implements PublicConfigType {
// 动画
animations: []
}
// 状态
public status = {
lock: false,
hide: false
}
// 请求
public request = cloneDeep(requestConfig)
// 数据过滤

1
src/styles/common/format.scss
View File

@ -8,6 +8,7 @@ body {
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {

2
src/utils/style.ts
View File

@ -16,7 +16,7 @@ export const animationsClass = (animations: string[]) => {
// * 滤镜
export const getFilterStyle = (styles?: StylesType | EditCanvasConfigType) => {
if(!styles) return {}
if(!styles || !styles.filterShow) return {}
const { opacity, saturate, contrast, hueRotate, brightness } = styles
return {
opacity: opacity,

3
src/views/chart/ContentEdit/components/EditShapeBox/index.vue
View File

@ -70,9 +70,6 @@ const select = computed(() => {
position: absolute;
cursor: move;
// 混合模式
mix-blend-mode: screen;
/* 锚点 */
.shape-point {
z-index: 1;

5
src/views/chart/ContentEdit/components/EditTools/index.vue
View File

@ -163,7 +163,6 @@ $asideBottom: 70px;
align-items: center;
border-radius: 25px;
border: 1px solid;
mix-blend-mode: luminosity;
@include fetch-border-color('hover-border-color-shallow');
&.aside {
flex-direction: column-reverse;
@ -248,14 +247,12 @@ $asideBottom: 70px;
height: 0;
padding: 5px;
bottom: $dockMiniBottom;
mix-blend-mode: screen;
}
100% {
height: $dockHeight;
padding: 8px 30px;
bottom: $dockBottom;
border-radius: 25px;
mix-blend-mode: none;
}
}
}
@ -268,7 +265,6 @@ $asideBottom: 70px;
border-radius: 8px;
cursor: pointer;
border: 0px;
mix-blend-mode: screen;
animation: dock-mini-in 1s ease forwards;
@keyframes dock-mini-in {
0% {
@ -291,7 +287,6 @@ $asideBottom: 70px;
height: 0;
padding: 5px;
bottom: $dockMiniBottom;
mix-blend-mode: screen;
}
}
.btn-item {

4
src/views/chart/ContentEdit/index.vue
View File

@ -19,7 +19,7 @@
<!-- 滤镜预览 -->
<div
:style="{
...getFilterStyle(filterShow ? chartEditStore.getEditCanvasConfig : undefined),
...getFilterStyle(chartEditStore.getEditCanvasConfig),
...rangeStyle
}"
>
@ -54,7 +54,7 @@
:themeColor="themeColor"
:style="{
...useSizeStyle(item.attr),
...getFilterStyle(filterShow ? item.styles : undefined),
...getFilterStyle(item.styles),
...getTransformStyle(item.styles)
}"
></component>

15
src/views/chart/hooks/useSync.hook.ts
View File

@ -5,6 +5,7 @@ import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHis
import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index'
import { CreateComponentType, CreateComponentGroupType, ConfigType } from '@/packages/index.d'
import { PublicGroupConfigClass } from '@/packages/public/publicConfig'
import merge from 'lodash/merge'
// 请求处理
export const useSync = () => {
@ -56,19 +57,19 @@ export const useSync = () => {
let newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig)
if (callBack) {
if (changeId) {
callBack(Object.assign(newComponent, { ..._componentInstance, id: getUUID() }))
callBack(merge(newComponent, { ..._componentInstance, id: getUUID() }))
} else {
callBack(Object.assign(newComponent, _componentInstance))
callBack(merge(newComponent, _componentInstance))
}
} else {
if (changeId) {
chartEditStore.addComponentList(
Object.assign(newComponent, { ..._componentInstance, id: getUUID() }),
merge(newComponent, { ..._componentInstance, id: getUUID() }),
false,
true
)
} else {
chartEditStore.addComponentList(Object.assign(newComponent, _componentInstance), false, true)
chartEditStore.addComponentList(merge(newComponent, _componentInstance), false, true)
}
}
}
@ -77,9 +78,9 @@ export const useSync = () => {
// 创建分组
let groupClass = new PublicGroupConfigClass()
if (changeId) {
groupClass = Object.assign(groupClass, { ...comItem, id: getUUID() })
groupClass = merge(groupClass, { ...comItem, id: getUUID() })
} else {
groupClass = Object.assign(groupClass, comItem)
groupClass = merge(groupClass, comItem)
}
// 注册子应用
@ -100,7 +101,7 @@ export const useSync = () => {
} else {
// 非组件(顺便排除脏数据)
if (key !== 'editCanvasConfig' && key !== 'requestGlobalConfig') return
Object.assign(chartEditStore[key], projectData[key])
merge(chartEditStore[key], projectData[key])
}
}
}

1
src/views/preview/components/PreviewRenderGroup/index.vue
View File

@ -49,6 +49,5 @@ const props = defineProps({
<style lang="scss" scoped>
.chart-item {
position: absolute;
mix-blend-mode: screen;
}
</style>

1
src/views/preview/components/PreviewRenderList/index.vue
View File

@ -63,6 +63,5 @@ const themeColor = computed(() => {
<style lang="scss" scoped>
.chart-item {
position: absolute;
mix-blend-mode: screen;
}
</style>

2
src/views/preview/index.vue
View File

@ -42,7 +42,7 @@ const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartE
const previewRefStyle = computed(() => {
return {
...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig),
...getFilterStyle(localStorageInfo.editCanvasConfig.filterShow ? localStorageInfo.editCanvasConfig : undefined)
...getFilterStyle(localStorageInfo.editCanvasConfig)
}
})