Datart 二开, 增加 边框 媒体组件
2024-05-11 22:36:51
背景:
之前在davinci 上有二开过这一部分, 现在要用datart就直接搬过来了;
基于 datart 的 β1.0.0 (20220218 master) 进行;
边框基于 http://datav-react.jiaminghi.com/ 实现;
效果如下:
datart 二开, 增加边框媒体组件
功能实现:
// 增加依赖
// 文件路径 package.json
"@jiaminghi/data-view-react": "^1.2.5",
// 新增边框组件
// 文件路径frontend/src/app/pages/DashBoardPage/components/WidgetCore/MediaWidget/BorderWidget/index.tsx
/*** Datart** Copyright 2021** Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at** http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/
import { Form, Select } from 'antd';
import * as datav from '@jiaminghi/data-view-react'
import { BoardActionContext } from 'app/pages/DashBoardPage/contexts/BoardActionContext';
import { WidgetContext } from 'app/pages/DashBoardPage/contexts/WidgetContext';
import { WidgetInfoContext } from 'app/pages/DashBoardPage/contexts/WidgetInfoContext';
import produce from 'immer';
import React, { useContext, useEffect, useState } from 'react';
import styled from 'styled-components/macro';
import { G20 } from 'styles/StyleConstants';
import { MediaWidgetContent } from '../../../../pages/Board/slice/types';
import { ColorPickerPopover } from 'app/components/ColorPicker';const BorderWidget: React.FC<{}> = () => {const widget = useContext(WidgetContext);const { editing } = useContext(WidgetInfoContext);const { widgetUpdate } = useContext(BoardActionContext);const type = (widget.config.content as MediaWidgetContent).borderConfig?.type;const firstColor = (widget.config.content as MediaWidgetContent).borderConfig?.firstColor;const secondColor = (widget.config.content as MediaWidgetContent).borderConfig?.secondColor;const [curType, setCurType] = useState<number | undefined>(1);const [curFirstColor, setCurColor1] = useState<string | undefined>('#4fd2dd');const [curSecondColor, setCurColor2] = useState<string | undefined>('#235fa7');useEffect(() => {setCurType(type);setCurColor1(firstColor);setCurColor2(secondColor);}, [type, firstColor, secondColor]);const onChange = (value, type) => {const nextWidget = produce(widget, draft => {(draft.config.content as MediaWidgetContent).borderConfig = {type: type === 'border' ? value : curType,firstColor: type === 'firstColor' ? value : curFirstColor,secondColor: type === 'secondColor' ? value : curSecondColor,};});widgetUpdate(nextWidget);};const COLORS = ['#B80000','#DB3E00','#FCCB00','#008B02','#006B76','#1273DE','#004DCF','#5300EB','#EB9694','#FAD0C3','#FEF3BD','#C1E1C5','#BEDADC','#C4DEF6','#BED3F3','#D4C4FB',];const setter = (<div className="wrap-form"><ForminitialValues={{ type: type }}layout="inline"autoComplete="off"><Form.Itemlabel="样式"name="type"><SelectdropdownMatchSelectWidthonChange={value => onChange(value, 'border')}>{[...new Array(13).keys()].map(o => (<Select.Option key={o} value={o}>样式{o+1}</Select.Option>))}</Select></Form.Item><Form.Itemlabel="主颜色"name="mainColor"><ColorPickerPopovercolors={COLORS}size={6}defaultValue={ curFirstColor }onChange={value => onChange(value, 'firstColor')}></ColorPickerPopover></Form.Item><Form.Itemlabel="副颜色"name="secondColor"><ColorPickerPopovercolors={COLORS}size={6}defaultValue={ curSecondColor }onChange={value => onChange(value, 'secondColor')}></ColorPickerPopover></Form.Item></Form></div>);return (<Wrap>{editing && setter}{(() => {switch (curType) {case 0:return <datav.BorderBox1 color={[curFirstColor, curSecondColor]} key={ 1 + new Date().getTime() }/>case 1:return <datav.BorderBox2 color={[curFirstColor, curSecondColor]} key={ 2 + new Date().getTime() }/>case 2:return <datav.BorderBox3 color={[curFirstColor, curSecondColor]} key={ 3 + new Date().getTime() }/>case 3:return <datav.BorderBox4 color={[curFirstColor, curSecondColor]} key={ 4 + new Date().getTime() }/>case 4:return <datav.BorderBox5 color={[curFirstColor, curSecondColor]} key={ 5 + new Date().getTime() }/>case 5:return <datav.BorderBox6 color={[curFirstColor, curSecondColor]} key={ 6 + new Date().getTime() }/>case 6:return <datav.BorderBox7 color={[curFirstColor, curSecondColor]} key={ 7 + new Date().getTime() }/>case 7:return <datav.BorderBox8 color={[curFirstColor, curSecondColor]} key={ 8 + new Date().getTime() }/>case 8:return <datav.BorderBox9 color={[curFirstColor, curSecondColor]} key={ 9 + new Date().getTime() }/>case 9:return <datav.BorderBox10 color={[curFirstColor, curSecondColor]} key={ 10 + new Date().getTime() }/>case 10:return <datav.BorderBox11 color={[curFirstColor, curSecondColor]} key={ 11 + new Date().getTime() }/>case 11:return <datav.BorderBox12 color={[curFirstColor, curSecondColor]} key={ 12 + new Date().getTime()} />case 12:return <datav.BorderBox13 color={[curFirstColor, curSecondColor]} key={ 13 + new Date().getTime() }/>default:return <datav.BorderBox1 color={[curFirstColor, curSecondColor]} key={ 1 + new Date().getTime() }/>}})()}</Wrap>);
};
export default BorderWidget;
const Wrap = styled.div`display: flex;flex-direction: column;width: 100%;.wrap-form {padding: 4px;margin-bottom: 4px;background-color:${G20};}`;// 媒体组件主页增加边框类型
// 文件路径 frontend/src/app/pages/DashBoardPage/components/WidgetCore/MediaWidget/index.tsx
import RichTextWidget from './RichTextWidget';
import TimerWidget from './TimerWidget';
import VideoWidget from './VideoWidget';
import BorderWidget from './BorderWidget';.....return <IframeWidget />;case 'timer':return <TimerWidget />;case 'border':return <BorderWidget />;default:return <div>default media</div>;}// 增加边框相关配置
// 文件路径 frontend/src/app/pages/DashBoardPage/pages/Board/slice/types.tsiframeConfig?: {src: string | undefined;};borderConfig?: {type: number | undefined;firstColor: string | undefined;secondColor: string | undefined;};
};...'image','video','iframe','border',
];
// 增加边框类型配置项
// 文件路径 frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/BoardToolBar/AddMedia/AddMedia.tsxicon: '',type: 'video',},{name: t('border'),icon: '',type: 'border',},];const mediaWidgetItems = (<Menu onClick={onSelectMediaWidget}>// 增加边框配置默认值
// 文件路径 frontend/src/app/pages/DashBoardPage/utils/widget.tssrc: '',};break;case 'border':content.borderConfig = {type: 1,firstColor: '#4fd2dd',secondColor: '#235fa7',};break;default:break;}// 增加国际化相关配置
// 文件路径 frontend/src/locales/zh/translation.json"delete": "删除","copy": "复制","paste": "粘贴",
- "deviceSwitch": "设备切换"
+ "deviceSwitch": "设备切换",
+ "border": "边框",
+ "border_stype": "边框样式"},"controlTypes": {"common": "常规",
..."timer": "时间器","iframe": "iframe","video": "视频",
- "tab": "Tab"
+ "tab": "Tab",
+ "border": "边框"},"action": {"refresh": "同步数据",Datart 二开, 增加 边框 媒体组件相关推荐
- datart 二开环境搭建
下载源码, 地址: https://github.com/running-elephant/datart, dev 分支; 解压后使用 idea 打开; 服务端: 3.1 安装依赖, idea会自动安 ...
- ＜datart二开＞翻牌器侧（纵）轴对齐方式
config.ts 配置信息 {label: '主对齐方式',key: 'xAlignment',default: 'start',comType: 'select',options: {transl ...
- V免签PHP二开版源码兼容所有易支付接口系统
<h3>网站设置</h3> 1.网站目录->运行目录 设置为public并保存 2.伪静态 设置为thinkphp并保存 3.打开网站目录 config/database ...
- 米酷影视直播二开全修复版增加在线充值影视资源网站源码
[亲测修复版]十月最新米酷影视直播二开全修复版增加在线充值影视资源网站源码自带采集无需手动更新+视频搭建教程 米酷影视这个前两天和大家发过一个版本,当时也说给大家录教程,不过那个没有接在线充值,有会员 ...
- Android开发之旅：组件生命周期（二）
引言 应用程序组件有一个生命周期--一开始Android实例化他们响应意图,直到结束实例被销毁.在这期间,他们有时候处于激活状态,有时候处于非激活状态:对于活动,对用户有时候可见,有时候不可见.组件生 ...
- Bootstrap组件福利篇：十二款好用的组件推荐
阅读目录 一.时间组件 1.效果展示 2.源码说明 3.代码示例 二.自增器组件 1.效果展示 2.源码说明 3.代码示例 三.加载效果 一.实用型 二.炫酷型 四.流程图小插件 1.效果展示 2.源 ...
- 二开免公众号盲盒源码
简介: 二开免公众号盲盒来了,多了不说,介绍介绍功能,本次增加了联系方式,比如快手号,抖音号,电话号,毕竟现在有不少朋友玩快手抖音,电话号就算了,只是提供功能但是提醒一下那东西挺坑人的.源码只提供学习 ...
- 微信小程序：二开版优化新紫色UI云开发新款壁纸小程序源码
这是一款由旧版https://airymz.com/3387.html进行优化二开的一个新版本 本壁纸表情包头像小程序采用(dcloud云开发)所以无需服务器与域名 无需服务器.无需域名.云开发直接上 ...
- 小飞鱼通达二开 小飞鱼OA开发案例集锦目录（持续更新）
工作流二次开发 小飞鱼通达二开 <小飞鱼工作流超级管理中心>助你流程管理效率轻松提升十倍+! 小飞鱼通达二开 通达OA工作流超时自动转交程序,让工作流加速到360迈!(图文) 小飞鱼软件 ...
最新文章
- 使用Mask-RCNN在实例分割应用中克服过拟合
- java应用menchac_java之JUC
- 在人工智能时代的影响下“UI与AI结合”成为必然趋势
- linux服务 ssh
- java.lang.String_自己写的java.lang.String可以让jvm加载到吗？
- ActiveReports 9 新功能：借助目录(TOC)控件为报表添加目录功能
- 数学有多震撼？！我真的没有在开车！
- html一个空格多少像素,一个空格占几个字符？
- Java和C++在细节上的差异(转)
- 大家有什么n刷的小说，可以推荐一下吗？
- 基于云端的通用权限管理系统，SAAS服务，基于SAAS的权限管理，基于SAAS的单点登录SSO，企业单点登录，企业系统监控，企业授权认证中心...
- PKU/POJ 2054 Color a Tree
- 真是搞不懂原始套接字SOCK_RAW和AF_PACKET
- Android Srt和Ass字幕解析器
- 用Python做一个连连看游戏辅助脚本，完整编程思路分享
- QT项目--简易音乐播放器
- 魔兽世界 - 宏命令
- ERROR security.UserGroupInformation: Priviledge...
- 非常全面的贝叶斯网络介绍 非常多的例子说明
- 独家专访英特尔AI布道师 | 通信工程到人工智能的高质量转型