diff --git a/core/core-frontend/public/dynamic-background/dynamic_background1.gif b/core/core-frontend/public/dynamic-background/dynamic_background1.gif new file mode 100644 index 0000000000..09e16646ee Binary files /dev/null and b/core/core-frontend/public/dynamic-background/dynamic_background1.gif differ diff --git a/core/core-frontend/public/dynamic-background/dynamic_background2.gif b/core/core-frontend/public/dynamic-background/dynamic_background2.gif new file mode 100644 index 0000000000..34e29036b6 Binary files /dev/null and b/core/core-frontend/public/dynamic-background/dynamic_background2.gif differ diff --git a/core/core-frontend/public/dynamic-background/dynamic_background3.gif b/core/core-frontend/public/dynamic-background/dynamic_background3.gif new file mode 100644 index 0000000000..b5de1cffef Binary files /dev/null and b/core/core-frontend/public/dynamic-background/dynamic_background3.gif differ diff --git a/core/core-frontend/public/dynamic-background/dynamic_background4.gif b/core/core-frontend/public/dynamic-background/dynamic_background4.gif new file mode 100644 index 0000000000..e29580de5e Binary files /dev/null and b/core/core-frontend/public/dynamic-background/dynamic_background4.gif differ diff --git a/core/core-frontend/src/assets/svg/dv_dynamic_background.svg b/core/core-frontend/src/assets/svg/dv_dynamic_background.svg new file mode 100644 index 0000000000..26dd606d52 --- /dev/null +++ b/core/core-frontend/src/assets/svg/dv_dynamic_background.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue index 34f501d463..fe5f1f8bfd 100644 --- a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue +++ b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue @@ -10,6 +10,7 @@ import iconVideo from '@/assets/svg/icon-video.svg' import icon_graphical from '@/assets/svg/icon_graphical.svg' import icon_search from '@/assets/svg/icon_search.svg' import other_material_board from '@/assets/svg/other_material_board.svg' +import dv_dynamic_background from '@/assets/svg/dv_dynamic_background.svg' import other_material_icon from '@/assets/svg/other_material_icon.svg' import scrollText from '@/assets/svg/scroll-text.svg' import areaOrigin from '@/assets/svg/area-origin.svg' @@ -288,6 +289,7 @@ const iconMap = { icon_graphical: icon_graphical, icon_search: icon_search, other_material_board: other_material_board, + dv_dynamic_background: dv_dynamic_background, other_material_icon: other_material_icon, 'scroll-text': scrollText, 'area-origin': areaOrigin, diff --git a/core/core-frontend/src/custom-component/common/CommonAttr.vue b/core/core-frontend/src/custom-component/common/CommonAttr.vue index 86d5d7a90a..ea53f93b1a 100644 --- a/core/core-frontend/src/custom-component/common/CommonAttr.vue +++ b/core/core-frontend/src/custom-component/common/CommonAttr.vue @@ -77,7 +77,9 @@ const containerRef = ref() const containerWidth = ref() const borderSettingShow = computed(() => { - return !!element.value.style['borderStyle'] + return ( + !!element.value.style['borderStyle'] && !['DynamicBackground'].includes(element.value.component) + ) }) // 暂时关闭 @@ -113,7 +115,7 @@ const styleShow = computed(() => { return ( element.value && element.value.style && - element.value.component !== 'DeTabs' && + !['DynamicBackground', 'DeTabs'].includes(element.value.component) && Object.keys(element.value.style).length > 0 ) }) diff --git a/core/core-frontend/src/custom-component/common/ComponentConfig.ts b/core/core-frontend/src/custom-component/common/ComponentConfig.ts index 685cc0ba3a..0084237b8c 100644 --- a/core/core-frontend/src/custom-component/common/ComponentConfig.ts +++ b/core/core-frontend/src/custom-component/common/ComponentConfig.ts @@ -74,6 +74,37 @@ export const CANVAS_MATERIAL = [ } ] }, + { + category: 'DynamicBackground', + title: t('visualization.dynamic_background'), + span: 8, + details: [ + { + value: 'dynamic_background1.gif', + type: 'dynamic_background', + title: t('visualization.dynamic_background_name', [1]), + icon: 'dynamic_background1.gif' + }, + { + value: 'dynamic_background2.gif', + type: 'dynamic_background', + title: t('visualization.dynamic_background_name', [2]), + icon: 'dynamic_background2.gif' + }, + { + value: 'dynamic_background3.gif', + type: 'dynamic_background', + title: t('visualization.dynamic_background_name', [2]), + icon: 'dynamic_background3.gif' + }, + { + value: 'dynamic_background4.gif', + type: 'dynamic_background', + title: t('visualization.dynamic_background_name', [2]), + icon: 'dynamic_background4.gif' + } + ] + }, { category: 'DeGraphical', title: t('visualization.graphic'), diff --git a/core/core-frontend/src/custom-component/component-group/CommonGroup.vue b/core/core-frontend/src/custom-component/component-group/CommonGroup.vue index 4cb03deb1e..eeab72f7ce 100644 --- a/core/core-frontend/src/custom-component/component-group/CommonGroup.vue +++ b/core/core-frontend/src/custom-component/component-group/CommonGroup.vue @@ -91,6 +91,12 @@ const groupActiveChange = category => { class-name="item-top-icon" > +
diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts index 5c7769d9fb..82b0168715 100644 --- a/core/core-frontend/src/custom-component/component-list.ts +++ b/core/core-frontend/src/custom-component/component-list.ts @@ -492,6 +492,20 @@ const list = [ backdropFilter: 'blur(0px)' } }, + { + component: 'DynamicBackground', + name: t('visualization.dynamic_background'), + label: t('visualization.dynamic_background'), + propValue: ' ', + icon: 'dv_dynamic_background', + style: { + width: 400, + height: 300, + backgroundColor: 'rgba(236,231,231,0.1)', + borderActive: false, + backdropFilter: 'blur(0px)' + } + }, { component: 'RectShape', name: t('visualization.rect_shape'), diff --git a/core/core-frontend/src/custom-component/dynamic_background/Attr.vue b/core/core-frontend/src/custom-component/dynamic_background/Attr.vue new file mode 100644 index 0000000000..50031ca63e --- /dev/null +++ b/core/core-frontend/src/custom-component/dynamic_background/Attr.vue @@ -0,0 +1,13 @@ + + + diff --git a/core/core-frontend/src/custom-component/dynamic_background/Component.vue b/core/core-frontend/src/custom-component/dynamic_background/Component.vue new file mode 100644 index 0000000000..7f9309cf22 --- /dev/null +++ b/core/core-frontend/src/custom-component/dynamic_background/Component.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/core/core-frontend/src/locales/en.ts b/core/core-frontend/src/locales/en.ts index 1b6e39aca0..e673480c4b 100644 --- a/core/core-frontend/src/locales/en.ts +++ b/core/core-frontend/src/locales/en.ts @@ -2906,6 +2906,8 @@ export default { column_name: 'Field name' }, visualization: { + dynamic_background_name: 'Animated {0}', + dynamic_background: 'Animated Image', support_query: 'Only query components can be added', publish_update_tips: 'Update available', filter_freeze_tips: diff --git a/core/core-frontend/src/locales/tw.ts b/core/core-frontend/src/locales/tw.ts index 4cebc8a59f..8f1242b1d8 100644 --- a/core/core-frontend/src/locales/tw.ts +++ b/core/core-frontend/src/locales/tw.ts @@ -2825,6 +2825,8 @@ export default { column_name: '欄位名稱' }, visualization: { + dynamic_background_name: '動圖{0}', + dynamic_background: '動圖', support_query: '僅可新增查詢元件', publish_update_tips: '有更新', filter_freeze_tips: '已存在置頂查詢組件，確定切換該組件？', diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts index 4835a0e46e..cda797786c 100644 --- a/core/core-frontend/src/locales/zh-CN.ts +++ b/core/core-frontend/src/locales/zh-CN.ts @@ -2831,6 +2831,8 @@ export default { column_name: '字段名称' }, visualization: { + dynamic_background_name: '背景{0}', + dynamic_background: '动图', support_query: '仅支持添加查询组件', publish_update_tips: '有更新', filter_freeze_tips: '已存在置顶查询组件,确定切换该组件？', diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts index a0bb381872..067fc55692 100644 --- a/core/core-frontend/src/utils/canvasUtils.ts +++ b/core/core-frontend/src/utils/canvasUtils.ts @@ -96,6 +96,8 @@ export function findNewComponent(componentName, innerType, staticMap?) { if (newComponent.isPlugin) { newComponent.staticMap = staticMap } + } else if (componentName === 'DynamicBackground') { + newComponent.style.borderWidth = 0 } return newComponent } diff --git a/core/core-frontend/src/utils/components.ts b/core/core-frontend/src/utils/components.ts index e12329c4ac..c773594d8d 100644 --- a/core/core-frontend/src/utils/components.ts +++ b/core/core-frontend/src/utils/components.ts @@ -7,6 +7,8 @@ import UserView from '@/custom-component/user-view/Component.vue' import UserViewAttr from '@/custom-component/user-view/Attr.vue' import Picture from '@/custom-component/picture/Component.vue' import PictureAttr from '@/custom-component/picture/Attr.vue' +import DynamicBackground from '@/custom-component/dynamic_background/Component.vue' +import DynamicBackgroundAttr from '@/custom-component/dynamic_background/Attr.vue' import CanvasBoard from '@/custom-component/canvas-board/Component.vue' import CanvasBoardAttr from '@/custom-component/canvas-board/Attr.vue' import CanvasIcon from '@/custom-component/canvas-icon/Component.vue' @@ -47,6 +49,8 @@ export const componentsMap = { UserViewAttr: UserViewAttr, Picture: Picture, PictureAttr: PictureAttr, + DynamicBackground: DynamicBackground, + DynamicBackgroundAttr: DynamicBackgroundAttr, CanvasBoard: CanvasBoard, CanvasBoardAttr: CanvasBoardAttr, CanvasIcon: CanvasIcon,