frontend/chart-view
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: 大屏

Browse Source
This commit is contained in:
ygx
2025-12-20 17:39:32 +08:00
commit 593e7d90e5
1005 changed files with 93645 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
src/components/Pages/ChartItemSetting/StylesSetting.vue Normal file
View File

@@ -0,0 +1,240 @@
<template>
<div v-show="isGroup">
<n-divider n-divider style="margin: 10px 0"></n-divider>
<n-tag type="warning"> 解散分组「 {{ isCanvas ? '滤镜' : '滤镜 / 变换' }} 」也将消失!</n-tag>
</div>
<collapse-item :name="isCanvas ? '滤镜' : '滤镜 / 变换'">
<template #header>
<n-switch v-model:value="chartStyles.filterShow" size="small"></n-switch>
</template>
<setting-item-box name="色相" :alone="true">
<setting-item :name="`值：${chartStyles.hueRotate}deg`">
<!-- 透明度 -->
<n-slider
v-model:value="chartStyles.hueRotate"
:step="3"
:min="0"
:max="360"
:format-tooltip="degFormatTooltip"
></n-slider>
</setting-item>
</setting-item-box>
<setting-item-box name="饱和度" :alone="true">
<setting-item :name="`值：${(parseFloat(String(chartStyles.saturate)) * 100).toFixed(0)}%`">
<!-- 透明度 -->
<n-slider
v-model:value="chartStyles.saturate"
:step="0.1"
:min="0"
:max="2"
:format-tooltip="sliderFormatTooltip"
></n-slider>
</setting-item>
</setting-item-box>
<setting-item-box name="对比度" :alone="true">
<setting-item :name="`值：${(parseFloat(String(chartStyles.contrast)) * 100).toFixed(0)}%`">
<!-- 透明度 -->
<n-slider
v-model:value="chartStyles.contrast"
:step="0.1"
:min="0"
:max="2"
:format-tooltip="sliderFormatTooltip"
></n-slider>
</setting-item>
</setting-item-box>
<setting-item-box name="亮度" :alone="true">
<setting-item :name="`值：${(parseFloat(String(chartStyles.brightness)) * 100).toFixed(0)}%`">
<!-- 透明度 -->
<n-slider
v-model:value="chartStyles.brightness"
:step="0.1"
:min="0"
:max="2"
:format-tooltip="sliderFormatTooltip"
></n-slider>
</setting-item>
</setting-item-box>
<setting-item-box name="透明度" :alone="true">
<setting-item :name="`值：${(parseFloat(String(chartStyles.opacity)) * 100).toFixed(0)}%`">
<!-- 透明度 -->
<n-slider
v-model:value="chartStyles.opacity"
:step="0.1"
:min="0"
:max="1"
:format-tooltip="sliderFormatTooltip"
></n-slider>
</setting-item>
</setting-item-box>
<!-- 预设滤镜 -->
<div v-if="presetImageList.length" class="preset-filter">
<n-image
class="preset-img"
width="46"
preview-disabled
object-fit="scale-down"
v-for="(item, index) in presetImageList"
:key="index"
:class="{ 'active-preset': item.hueRotate === chartStyles.hueRotate }"
:style="{ filter: `hue-rotate(${item.hueRotate}deg)` }"
:src="item.src"
@click="() => (chartStyles.hueRotate = item.hueRotate)"
></n-image>
</div>
<!-- 混合模式 -->
<setting-item-box v-if="!isCanvas" :alone="true">
<template #name>
<n-text>混合</n-text>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon size="21" :depth="3">
<help-outline-icon></help-outline-icon>
</n-icon>
</template>
<n-text>视频组件需要底色透明一般选中滤色</n-text>
</n-tooltip>
</template>
<setting-item>
<n-select v-model:value="chartStyles.blendMode" size="small" filterable :options="BlendModeEnumList"></n-select>
</setting-item>
</setting-item-box>
<!-- 变换 -->
<setting-item-box v-if="!isCanvas" name="旋转°">
<setting-item name="Z轴(平面) - 旋转">
<!-- 透明度 -->
<n-input-number
v-model:value="chartStyles.rotateZ"
:min="0"
:max="360"
size="small"
placeholder="角度"
></n-input-number>
</setting-item>
<setting-item name="X轴 - 旋转">
<!-- 透明度 -->
<n-input-number
v-model:value="chartStyles.rotateX"
:min="0"
:max="360"
size="small"
placeholder="角度"
></n-input-number>
</setting-item>
<setting-item name="Y轴 - 旋转">
<!-- 透明度 -->
<n-input-number
v-model:value="chartStyles.rotateY"
:min="0"
:max="360"
size="small"
placeholder="角度"
></n-input-number>
</setting-item>
</setting-item-box>
<!-- 倾斜 -->
<setting-item-box v-if="!isCanvas" name="倾斜°">
<setting-item name="X轴 - 倾斜">
<n-input-number
v-model:value="chartStyles.skewX"
:min="0"
:max="360"
size="small"
placeholder="角度"
></n-input-number>
</setting-item>
<setting-item name="Y轴 - 倾斜">
<n-input-number
v-model:value="chartStyles.skewY"
:min="0"
:max="360"
size="small"
placeholder="角度"
></n-input-number>
</setting-item>
</setting-item-box>
<!-- 提示 -->
<n-tag type="warning"> 若预览时大屏模糊，可以尝试关闭滤镜进行修复 </n-tag>
</collapse-item>
</template>
<script setup lang="ts">
import { ref, PropType } from 'vue'
import { PickCreateComponentType, BlendModeEnumList } from '@/packages/index.d'
import { SettingItemBox, SettingItem, CollapseItem } from '@/components/Pages/ChartItemSetting'
import { icon } from '@/plugins'
import logoImg from '@/assets/logo.png'
import { useDesignStore } from '@/store/modules/designStore/designStore'
const props = defineProps({
isGroup: {
type: Boolean,
required: false
},
isCanvas: {
type: Boolean,
default: false
},
chartStyles: {
type: Object as PropType<Omit<PickCreateComponentType<'styles'>, 'animations'>>,
required: true
}
})
const { HelpOutlineIcon } = icon.ionicons5
// 百分比格式化 person
const sliderFormatTooltip = (v: string) => {
return `${(parseFloat(v) * 100).toFixed(0)}%`
}
// 角度格式化
const degFormatTooltip = (v: string) => {
return `${v}deg`
}
// 预设滤镜
interface presetImageData {
index: number
src: string
hueRotate: number
}
const presetImageList = ref([] as presetImageData[])
for (let i = 1; i <= 12; i++) {
presetImageList.value.push({
index: i,
src: logoImg,
hueRotate: i * 30
})
}
</script>
<style lang="scss" scoped>
// 预设滤镜
.preset-filter {
margin: 20px 0 10px 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.preset-img {
margin-bottom: 10px;
padding: 2px;
border-radius: 6px;
transition: 0.2s all;
cursor: pointer;
&:hover {
box-shadow: 0 0 0 2px #66a9c9;
}
}
.active-preset {
box-shadow: 0 0 0 2px #66a9c9;
}
}
</style>