parent
							
								
									43b6361515
								
							
						
					
					
						commit
						240a0bd779
					
				| @ -0,0 +1,44 @@ | ||||
| /* | ||||
|  * @Author: 卜启缘 | ||||
|  * @Date: 2021-06-14 12:24:12 | ||||
|  * @LastEditTime: 2021-06-14 12:38:02 | ||||
|  * @LastEditors: 卜启缘 | ||||
|  * @Description: | ||||
|  * @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\notice-bar\createFieldProps.ts | ||||
|  */ | ||||
| import { | ||||
|   createEditorInputProp, | ||||
|   createEditorSelectProp, | ||||
|   createEditorSwitchProp | ||||
| } from '@/visual-editor/visual-editor.props' | ||||
| 
 | ||||
| export const createFieldProps = () => ({ | ||||
|   background: createEditorInputProp({ label: '滚动条背景' }), | ||||
|   color: createEditorInputProp({ label: '通知文本颜色' }), | ||||
|   delay: createEditorInputProp({ label: '动画延迟时间 (s)' }), | ||||
|   leftIcon: createEditorInputProp({ label: '左侧图标名称或图片链接', defaultValue: 'volume-o' }), | ||||
|   mode: createEditorSelectProp({ | ||||
|     label: '通知栏模式', | ||||
|     options: [ | ||||
|       { | ||||
|         label: '默认', | ||||
|         value: '' | ||||
|       }, | ||||
|       { | ||||
|         label: '可关闭', | ||||
|         value: 'closeable' | ||||
|       }, | ||||
|       { | ||||
|         label: '链接', | ||||
|         value: 'link' | ||||
|       } | ||||
|     ] | ||||
|   }), | ||||
|   scrollable: createEditorSwitchProp({ label: '是否开启滚动播放,内容长度溢出时默认开启' }), | ||||
|   speed: createEditorInputProp({ label: '滚动速率 (px/s)' }), | ||||
|   text: createEditorInputProp({ | ||||
|     label: '通知文本内容', | ||||
|     defaultValue: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。' | ||||
|   }), | ||||
|   wrapable: createEditorSwitchProp({ label: '是否开启文本换行,只在禁用滚动时生效' }) | ||||
| }) | ||||
| @ -0,0 +1,37 @@ | ||||
| /* | ||||
|  * @Author: 卜启缘 | ||||
|  * @Date: 2021-06-14 12:24:12 | ||||
|  * @LastEditTime: 2021-06-14 12:56:23 | ||||
|  * @LastEditors: 卜启缘 | ||||
|  * @Description: | ||||
|  * @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\notice-bar\index.tsx | ||||
|  */ | ||||
| import { NoticeBar } from 'vant' | ||||
| import { VisualEditorComponent } from '@/visual-editor/visual-editor.utils' | ||||
| import { createFieldProps } from './createFieldProps' | ||||
| import { useGlobalProperties } from '@/hooks/useGlobalProperties' | ||||
| 
 | ||||
| export default { | ||||
|   key: 'NoticeBar', | ||||
|   moduleName: 'baseWidgets', | ||||
|   label: '通知栏', | ||||
|   preview: () => ( | ||||
|     <NoticeBar | ||||
|       style={{ width: '180px' }} | ||||
|       leftIcon={'volume-o'} | ||||
|       text={'在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。'} | ||||
|     /> | ||||
|   ), | ||||
|   render: ({ block, props }) => { | ||||
|     const { registerRef } = useGlobalProperties() | ||||
| 
 | ||||
|     return <NoticeBar ref={(el) => registerRef(el, block._vid)} {...props} /> | ||||
|   }, | ||||
|   props: createFieldProps(), | ||||
|   resize: { | ||||
|     width: true | ||||
|   }, | ||||
|   model: { | ||||
|     default: '绑定字段' | ||||
|   } | ||||
| } as VisualEditorComponent | ||||
| @ -0,0 +1,33 @@ | ||||
| /* | ||||
|  * @Author: 卜启缘 | ||||
|  * @Date: 2021-06-14 12:24:12 | ||||
|  * @LastEditTime: 2021-06-14 18:43:21 | ||||
|  * @LastEditors: 卜启缘 | ||||
|  * @Description: | ||||
|  * @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\swipe\createFieldProps.ts | ||||
|  */ | ||||
| import { | ||||
|   createEditorInputProp, | ||||
|   createEditorSwitchProp, | ||||
|   createEditorCrossSortableProp | ||||
| } from '@/visual-editor/visual-editor.props' | ||||
| 
 | ||||
| export const createFieldProps = () => ({ | ||||
|   images: createEditorCrossSortableProp({ | ||||
|     label: '图片列表', | ||||
|     labelPosition: 'top', | ||||
|     defaultValue: ['https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-2.jpg'] | ||||
|   }), | ||||
|   width: createEditorInputProp({ label: '滑块宽度,单位为 px', defaultValue: 'auto' }), | ||||
|   height: createEditorInputProp({ label: '滑块高度,单位为 px', defaultValue: '200' }), | ||||
|   autoplay: createEditorInputProp({ label: '自动轮播间隔,单位为 ms', defaultValue: '' }), | ||||
|   duration: createEditorInputProp({ label: '动画时长,单位为 ms', defaultValue: '500' }), | ||||
|   indicatorColor: createEditorInputProp({ label: '指示器颜色', defaultValue: '#1989fa' }), | ||||
|   initialSwipe: createEditorInputProp({ label: '初始位置索引值', defaultValue: '0' }), | ||||
|   lazyRender: createEditorSwitchProp({ label: '是否延迟渲染未展示的轮播', defaultValue: false }), | ||||
|   loop: createEditorSwitchProp({ label: '是否开启循环播放', defaultValue: true }), | ||||
|   showIndicators: createEditorSwitchProp({ label: '是否显示指示器', defaultValue: true }), | ||||
|   stopPropagation: createEditorSwitchProp({ label: '是否阻止滑动事件冒泡', defaultValue: true }), | ||||
|   touchable: createEditorSwitchProp({ label: '是否可以通过手势滑动', defaultValue: true }), | ||||
|   vertical: createEditorSwitchProp({ label: '是否为纵向滚动', defaultValue: false }) | ||||
| }) | ||||
| @ -0,0 +1,54 @@ | ||||
| /* | ||||
|  * @Author: 卜启缘 | ||||
|  * @Date: 2021-06-14 12:24:12 | ||||
|  * @LastEditTime: 2021-06-14 18:48:44 | ||||
|  * @LastEditors: 卜启缘 | ||||
|  * @Description: | ||||
|  * @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\swipe\index.tsx | ||||
|  */ | ||||
| import { Swipe, SwipeItem } from 'vant' | ||||
| import { VisualEditorComponent } from '@/visual-editor/visual-editor.utils' | ||||
| import { createFieldProps } from './createFieldProps' | ||||
| import { useGlobalProperties } from '@/hooks/useGlobalProperties' | ||||
| 
 | ||||
| const swipeItemStyle = `color: #fff;
 | ||||
| font-size: 20px; | ||||
| line-height: 150px; | ||||
| text-align: center; | ||||
| background-color: #39a9ed;` | ||||
| 
 | ||||
| export default { | ||||
|   key: 'swipe', | ||||
|   moduleName: 'baseWidgets', | ||||
|   label: '轮播图', | ||||
|   preview: () => ( | ||||
|     <Swipe style={{ width: '180px', height: '80%' }} indicatorColor={'white'}> | ||||
|       <SwipeItem style={swipeItemStyle}>1</SwipeItem> | ||||
|       <SwipeItem style={swipeItemStyle}>2</SwipeItem> | ||||
|       <SwipeItem style={swipeItemStyle}>3</SwipeItem> | ||||
|       <SwipeItem style={swipeItemStyle}>4</SwipeItem> | ||||
|     </Swipe> | ||||
|   ), | ||||
|   render: ({ block, props }) => { | ||||
|     const { registerRef } = useGlobalProperties() | ||||
| 
 | ||||
|     return ( | ||||
|       <Swipe ref={(el) => registerRef(el, block._vid)} {...props}> | ||||
|         {props.images?.map((item) => ( | ||||
|           <> | ||||
|             <SwipeItem key={item}> | ||||
|               <img src={item} /> | ||||
|             </SwipeItem> | ||||
|           </> | ||||
|         ))} | ||||
|       </Swipe> | ||||
|     ) | ||||
|   }, | ||||
|   props: createFieldProps(), | ||||
|   resize: { | ||||
|     width: true | ||||
|   }, | ||||
|   model: { | ||||
|     default: '绑定字段' | ||||
|   } | ||||
| } as VisualEditorComponent | ||||
| @ -0,0 +1,54 @@ | ||||
| /* | ||||
|  * @Author: 卜启缘 | ||||
|  * @Date: 2021-06-14 00:53:21 | ||||
|  * @LastEditTime: 2021-06-14 00:55:55 | ||||
|  * @LastEditors: 卜启缘 | ||||
|  * @Description: 可用字体集 | ||||
|  * @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\text\fontArr.ts | ||||
|  */ | ||||
| export const fontArr = [ | ||||
|   { label: '宋体', value: 'SimSun' }, | ||||
|   { label: '黑体', value: 'SimHei' }, | ||||
|   { label: '微软雅黑', value: 'Microsoft Yahei' }, | ||||
|   { label: '微软正黑体', value: 'Microsoft JhengHei' }, | ||||
|   { label: '楷体', value: 'KaiTi' }, | ||||
|   { label: '新宋体', value: 'NSimSun' }, | ||||
|   { label: '仿宋', value: 'FangSong' }, | ||||
|   { label: '苹方', value: 'PingFang SC' }, | ||||
|   { label: '华文黑体', value: 'STHeiti' }, | ||||
|   { label: '华文楷体', value: 'STKaiti' }, | ||||
|   { label: '华文宋体', value: 'STSong' }, | ||||
|   { label: '华文仿宋', value: 'STFangsong' }, | ||||
|   { label: '华文中宋', value: 'STZhongsong' }, | ||||
|   { label: '华文琥珀', value: 'STHupo' }, | ||||
|   { label: '华文新魏', value: 'STXinwei' }, | ||||
|   { label: '华文隶书', value: 'STLiti' }, | ||||
|   { label: '华文行楷', value: 'STXingkai' }, | ||||
|   { label: '冬青黑体简', value: 'Hiragino Sans GB' }, | ||||
|   { label: '兰亭黑-简', value: 'Lantinghei SC' }, | ||||
|   { label: '翩翩体-简', value: 'Hanzipen SC' }, | ||||
|   { label: '手札体-简', value: 'Hannotate SC' }, | ||||
|   { label: '宋体-简', value: 'Songti SC' }, | ||||
|   { label: '娃娃体-简', value: 'Wawati SC' }, | ||||
|   { label: '魏碑-简', value: 'Weibei SC' }, | ||||
|   { label: '行楷-简', value: 'Xingkai SC' }, | ||||
|   { label: '雅痞-简', value: 'Yapi SC' }, | ||||
|   { label: '圆体-简', value: 'Yuanti SC' }, | ||||
|   { label: '幼圆', value: 'YouYuan' }, | ||||
|   { label: '隶书', value: 'LiSu' }, | ||||
|   { label: '华文细黑', value: 'STXihei' }, | ||||
|   { label: '华文楷体', value: 'STKaiti' }, | ||||
|   { label: '华文宋体', value: 'STSong' }, | ||||
|   { label: '华文仿宋', value: 'STFangsong' }, | ||||
|   { label: '华文中宋', value: 'STZhongsong' }, | ||||
|   { label: '华文彩云', value: 'STCaiyun' }, | ||||
|   { label: '华文琥珀', value: 'STHupo' }, | ||||
|   { label: '华文新魏', value: 'STXinwei' }, | ||||
|   { label: '华文隶书', value: 'STLiti' }, | ||||
|   { label: '华文行楷', value: 'STXingkai' }, | ||||
|   { label: '方正舒体', value: 'FZShuTi' }, | ||||
|   { label: '方正姚体', value: 'FZYaoti' }, | ||||
|   { label: '思源黑体', value: 'Source Han Sans CN' }, | ||||
|   { label: '思源宋体', value: 'Source Han Serif SC' }, | ||||
|   { label: '文泉驿微米黑', value: 'WenQuanYi Micro Hei' } | ||||
| ] | ||||
| @ -0,0 +1,72 @@ | ||||
| /* | ||||
|  * @Author: 卜启缘 | ||||
|  * @Date: 2021-06-14 15:00:45 | ||||
|  * @LastEditTime: 2021-06-14 17:41:14 | ||||
|  * @LastEditors: 卜启缘 | ||||
|  * @Description: 可以拖拽排序的选项列表 | ||||
|  * @FilePath: \vite-vue3-lowcode\src\visual-editor\components\right-attribute-panel\components\cross-sortable-options\cross-sortable-options.tsx | ||||
|  */ | ||||
| 
 | ||||
| import { defineComponent, reactive, computed, PropType } from 'vue' | ||||
| import Draggable from 'vuedraggable' | ||||
| import { ElInput } from 'element-plus' | ||||
| import { useVModel } from '@vueuse/core' | ||||
| 
 | ||||
| export const CrossSortableOptionsEditor = defineComponent({ | ||||
|   props: { | ||||
|     modelValue: { | ||||
|       type: Array as PropType<string[]>, | ||||
|       default: () => [] | ||||
|     } | ||||
|   }, | ||||
|   setup(props, { emit }) { | ||||
|     const state = reactive({ | ||||
|       list: useVModel(props, 'modelValue', emit), | ||||
|       drag: false | ||||
|     }) | ||||
| 
 | ||||
|     const dragOptions = computed(() => { | ||||
|       return { | ||||
|         animation: 200, | ||||
|         group: 'description', | ||||
|         disabled: false, | ||||
|         ghostClass: 'ghost' | ||||
|       } | ||||
|     }) | ||||
| 
 | ||||
|     return () => ( | ||||
|       <Draggable | ||||
|         tag="ul" | ||||
|         list={state.list} | ||||
|         class="list-group" | ||||
|         component-data={{ | ||||
|           tag: 'ul', | ||||
|           type: 'transition-group', | ||||
|           name: !state.drag ? 'flip-list' : null | ||||
|         }} | ||||
|         handle=".handle" | ||||
|         {...dragOptions.value} | ||||
|         itemKey={''} | ||||
|         onStart={() => (state.drag = true)} | ||||
|         onEnd={() => (state.drag = false)} | ||||
|       > | ||||
|         {{ | ||||
|           item: ({ element, index }) => ( | ||||
|             <div class={'flex items-center justify-between'}> | ||||
|               <i class={'el-icon-s-grid handle'}></i> | ||||
|               <ElInput | ||||
|                 v-model={state.list[index]} | ||||
|                 class={'m-12px'} | ||||
|                 style={{ width: '270px' }} | ||||
|               ></ElInput> | ||||
|               <div class={'flex flex-col'}> | ||||
|                 <i class={'el-icon-circle-plus-outline'} onClick={() => state.list.push('')}></i> | ||||
|                 <i class={'el-icon-remove-outline'} onClick={() => state.list.splice(index, 1)}></i> | ||||
|               </div> | ||||
|             </div> | ||||
|           ) | ||||
|         }} | ||||
|       </Draggable> | ||||
|     ) | ||||
|   } | ||||
| }) | ||||
| @ -1,10 +1,13 @@ | ||||
| /** | ||||
|  * @name: index | ||||
|  * @author: 卜启缘 | ||||
|  * @date: 2021/5/30 10:57 | ||||
|  * @description:index | ||||
|  * @update: 2021/5/30 10:57 | ||||
| /* | ||||
|  * @Author: 卜启缘 | ||||
|  * @Date: 2021-06-12 22:18:48 | ||||
|  * @LastEditTime: 2021-06-14 16:58:34 | ||||
|  * @LastEditors: 卜启缘 | ||||
|  * @Description: | ||||
|  * @FilePath: \vite-vue3-lowcode\src\visual-editor\components\right-attribute-panel\components\index.ts | ||||
|  */ | ||||
| 
 | ||||
| export { TablePropEditor } from './table-prop-editor/table-prop-editor' | ||||
| export { AttrEditor } from './attr-editor/AttrEditor' | ||||
| export { Animate } from './animate/Animate' | ||||
| export { CrossSortableOptionsEditor } from './cross-sortable-options/cross-sortable-options' | ||||
|  | ||||
| @ -0,0 +1,8 @@ | ||||
| /* | ||||
|  * @Author: 卜启缘 | ||||
|  * @Date: 2021-06-13 22:07:29 | ||||
|  * @LastEditTime: 2021-06-14 18:18:51 | ||||
|  * @LastEditors: 卜启缘 | ||||
|  * @Description: 当前页面配置 | ||||
|  * @FilePath: \vite-vue3-lowcode\src\visual-editor\components\right-attribute-panel\components\page-setting\pageSetting.tsx | ||||
|  */ | ||||
| @ -1,17 +0,0 @@ | ||||
| /** | ||||
| * @name: index.common | ||||
| * @author: 卜启缘 | ||||
| * @date: 2021/5/3 16:05 | ||||
| * @description:index.common | ||||
| * @update: 2021/5/3 16:05 | ||||
| */ | ||||
| body { | ||||
|   .el-form-item__label { | ||||
|     font-size: 12px; | ||||
|   } | ||||
|   .el-form-item--mini .el-form-item__content { | ||||
|     display: flex; | ||||
|     justify-content: flex-end; | ||||
|     align-items: center; | ||||
|   } | ||||
| } | ||||
					Loading…
					
					
				
		Reference in new issue