# sayho **Repository Path**: learnxiaoxuetu/sayho ## Basic Information - **Project Name**: sayho - **Description**: sayho 让网页搭建更简单 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 4 - **Created**: 2025-12-04 - **Last Updated**: 2025-12-04 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # sayho 让网页搭建更简单 #### 软件架构和介绍 1.基于Vue和elementUl组件库集成。对常用的各类组件进行统一封装,页面设计时仅需选定对应的模块组件即可直接使用; 2.无需安装、搭建和运行编译环境,也不需要编写前端代码(html/js/css)。设计页面时,只需按照业务需求对模块组件填写相应的参数设置; 3.快速上手,适用于开发者、设计和产品经理为快速构建PC端Web前端网页或CRM项目而准备 #### 安装教程 无需下载安装,从项目库拉取代码后将sayho-master.zip解压,使用一般的主流浏览器打开index.html文件即可运行 #### 使用说明 打开index.html之后进入界面主视图,通过“Sayho工具箱”当中的各类功能配置项,根据产品需求完成页面设计布局即可。 #### 教学视频地址 https://www.bilibili.com/video/BV13XZqYLEC6/?spm_id_from=333.1387.homepage.video_card.click&vd_source=162028d3966917ebd37a149b5e8bdc8e #### update code 20251203 1 配置项【模块类型】选项 “列表模块” #### a.基础设置》前往设置:新增配置项 【列表成员样式】,单选按钮 供选项“标准”和“卡片”,默认 标准 #### 功能描述:当【列表成员样式】为“卡片”时,通过前往设置打开“列表卡片样式配置”对话窗,通过html/css基础设置可进行更多定制化自定义页面样式设置。 #### 2 系统界面相关配置》设置系统主题》系统模块组件通用参数配置》模块 新增“列表模块” #### a.列表模块视图区域:新增配置项 【设置虚拟列表】, 当列表行当页展示条数大于等于(>=)所设置最大值(默认30)时,开启虚拟列表。 #### 功能描述:如若列表行展示数据量过大时,提供配置项设置虚拟列表以预防渲染大量html页面节点造成过大的性能开销从而导致页面卡顿的情况。注意:加载类型为分页加载时,该项配置方能生效 #### #### b.列表模块底部区域:新增配置项 【分页页码数组】, 设置分页默认展示条数列表数组。 #### 功能描述:注意:加载类型为分页加载时,该项配置方能生效 #### 3 导航设置 #### a.新增配置项 【抽屉出现位置】, 当配置项【导航类型】为“抽屉”时条件展示 单选按钮 默认选项 “下左”。 #### 功能描述:可自定义调整导航栏抽屉默认展示方位。注意:配置项抽屉出现位置设置位于上方任意选项时,请确保在设置系统主题进行横幅相关配置时横幅高度大于抽屉高度,否则当前配置项失效。 #### #### update code 20251124 1 配置项【模块类型】选项 “列表模块” #### a.模块底部区域》设置触底》前往设置:新增配置项 【触发加载高度临界值】,当 加载类型 为“触底加载”时条件展示 ,输入框 #### 功能描述:配置项触发加载高度临界值为10%时,当列表整体高度在浏览器视口当中(即列表的不可视区域高度)剩余10%时,触发列表触底加载事件。注意:数值范围限制范围在0-100%之内。 #### 2 菜单配置页 复合组件 添加成员类型 为 文本内容 时: #### a html/css基础设置 开放 【设置背景】 配置项,允许设置静态图片背景图 #### b 输出/输入设置 开放 【设置跳转页面】 配置项,【跳转页面类型】 仅 允许设置 “前往详情页面” 选项 #### 功能描述:放开部分自定义功能css样式设置,以应对更多定制化需求 #### #### update code 20251115 1 配置项【模块类型】新增选项 “列表模块” #### a.模块底部区域:新增配置项 【加载类型】,当 模块类型 为“列表模块”时条件展示 ,下拉选择框 供选项“无设置”, “触底加载”和“分页加载” 默认 无设置 #### #### 功能描述:列表模块属于前端网页常见布局,用于满足页面数据以列表的形式展现,为“触底加载”时,当页面轮动条接近浏览器视图窗口底部时触发请求,以实现数据以长页面展示的效果。 #### #### update code 20251028 1 前台page界面-选项卡模块 选项卡标签 公共样式设置 #### a.新增配置项 【选项卡模式】单选按钮 供选项 “标准”和“走马灯” 默认标准 #### b.新增配置项 【自动轮播】, 当 选项卡模式 为“是”时条件展示 ,单选按钮 供选项“是”和“否”,默认 是 #### c.新增配置项 【轮播间隔时长】,当 选项卡模式 为“是”时条件展示 ,输入框 默认3000毫秒(ms) #### d.新增配置项 【轮播方向】, 当 选项卡模式 为“是”时条件展示 ,单选按钮 供选项“横向”和“纵向”,默认 横向 #### e.新增配置项 【卡片化】,当 选项卡模式 为“是”时条件展示 ,单选按钮 供选项“是”和“否”,默认 否 #### 功能描述:走马灯常用于产品展示图片轮播效果的业务场景。 #### 2 复合组件 / 文本内容组件 #### a.复合组件 配置项【设置组件动画】新增指定属性“成员跳动-stagger” #### b.复合组件 / 文本内容组件 动画线程基本配置 配置项【执行动作】新增 “成员跳动/文字跳动” 选项 #### c.新增配置项 【跳动幅度】,当 执行动作 为 “成员跳动/文字跳动” 时条件展示 ,输入框 默认20像素(px) #### d.新增配置项 【跳动方向】,当 执行动作 为 “成员跳动/文字跳动” 时条件展示 ,单选按钮 供选项“垂直”和“水平”,默认 垂直 #### e.新增配置项 【线程变化规律】,当 执行动作 为 “成员跳动/文字跳动” 时条件展示 ,下拉选择框 供选项 参照css3样式animation的ease属性配置,大致提供以下数28种变化风格选择 #### e.1 线性/一次缓动(linear):匀速运动,没有加速或减速 #### e.2 二次缓动(power1.in):缓慢开始,然后加速 #### e.3 二次缓动(power1.out):快速开始,然后减速 #### e.4 二次缓动(power1.inOut):缓慢开始,中间加速,然后减速结束 #### e.5 三次缓动(power2.in):缓慢开始,然后加速 #### e.6 三次缓动(power2.out):快速开始,然后减速 #### e.7 三次缓动(power2.inOut):缓慢开始,中间加速,然后减速结束 #### e.8 四次缓动(power3.in):缓慢开始,然后加速 #### e.9 四次缓动(power3.out):快速开始,然后减速 #### e.10 四次缓动(power3.inOut):缓慢开始,中间加速,然后减速结束 #### e.11 五次缓动(power4.in):缓慢开始,然后加速 #### e.12 五次缓动(power4.out):快速开始,然后减速 #### e.13 五次缓动(power4.inOut):缓慢开始,中间加速,然后减速结束 #### e.14 弹性效果(elastic.in):有弹性地开始 #### e.15 弹性效果(elastic.out):有弹性地结束 #### e.16 弹性效果(elastic.inOut):开始和结束都有弹性效果 #### e.17 反弹效果(bounce.in):像球落地一样反弹开始 #### e.18 反弹效果(bounce.out):像球弹起一样结束 #### e.19 反弹效果(bounce.inOut):开始和结束都带有反弹效果 #### e.20 回弹效果(back.in):稍微回退后向前运动 #### e.21 回弹效果(back.out):超出终点后回弹到终点 #### e.22 回弹效果(back.inOut):开始时回弹,结束时也回弹 #### e.23 循环缓动(circ.in):缓入效果 #### e.24 循环缓动(circ.out):缓出效果 #### e.25 循环缓动(circ.inOut):缓入缓出效果 #### e.26 指数缓动(expo.in):指数增长开始 #### e.27 指数缓动(expo.out):指数衰减结束 #### e.28 指数缓动(expo.inOut):指数增长开始和衰减结束 #### f.新增配置项 【elastic-周期】和【elastic-振幅】,当 线程变化规律 为 “弹性效果-elastic系列” 选项时条件展示 ,输入框 周期 默认为1 振幅 为0.3 #### g.新增配置项 【过冲量】,当 线程变化规律 为 “回弹效果-back系列” 选项时条件展示 ,输入框 默认为20 #### 过冲量功能描述:配置项过冲量表示动画会先稍微超出目标值,然后再回到目标值,形成一种"回弹"的效果。 #### 这个缓动函数的参数(默认值:20),控制回弹的强度或幅度。数值越大,回弹越明显;数值越小,回弹越轻微; #### 这种效果常用于给动画增加生动感和自然感,让动画不那么机械化。 #### h.新增配置项 【stagger】,当 执行动作 为 “成员跳动/文字跳动” 时条件展示 输入框 默认为50毫秒(ms) #### stagger功能描述:stagger用于创建交错动画效果。它允许你对多个元素应用同一个动画,使每个元素的动画开始时间会有一个时间差 #### 它创建了一种"波浪式"或"级联式"的动画效果,而不是让所有元素同时开始动画 #### 当应用到文字上时,每个字符会依次执行动画(如淡入、位移等)创建出文字逐个出现的流畅效果,增强用户界面的视觉吸引力和专业感。 #### i.新增配置项 【动画延迟】,动画在规定好的时间之后再延迟执行 输入框 默认为0秒(s) #### 3 前台页面配置 #### a.新增配置项 【当前滚动条高度】,为方便设置组件动画配置项事件触发类型为视图滚动(scroll)时的开发设计,为此记录当前页面滚动条距离浏览器窗口视图顶部的距离,文本内容。 #### b.新增配置项 【调整模块排序】,针对当前导航下的模块,可通过拖拽的方式重新排序,按钮。 #### #### update code 20251020 1 系统界面相关配置 》 设置系统主题 》 主页界面配置:新增系统界面水印 #### 功能描述:新增系统界面水印功能相关的配置项,可根据自身业务需求决定是否使用。 #### a.主页界面配置:新增配置项 【设置菜单背景水印】,单选按钮 供选项 是和否,默认 否 #### b.主页界面配置:新增配置项 【菜单背景水印来源】,单选按钮 供选项 “前端设置固定值”,“从状态管理获取”以及“参数拼接字符串”,默认 前端设置固定值 #### c.主页界面配置:新增配置项 【菜单背景水印文案】,根据“菜单背景水印来源”不同,展示不同的绑定方式 #### d.主页界面配置:新增配置项 【菜单背景水印字体大小】,输入框 数字类型字段 #### e.主页界面配置:新增配置项 【菜单背景水印字体颜色】,色值汲取器 字符串字段 16进制色值码 #### f.主页界面配置:新增配置项 【菜单背景水印透明度】,输入框 数字类型字段 取值范围0-10 #### g.主页界面配置:新增配置项 【菜单背景水印倾斜度数】,输入框 数字类型字段 #### h.主页界面配置:新增配置项 【菜单背景水印宽度】,输入框 数字类型字段 #### i.主页界面配置:新增配置项 【菜单背景水印高度】,输入框 数字类型字段 #### #### update code 20251014 1 组件 “按钮-button” 配置项【按钮功能类型】新增 “打开附生窗口”选项 #### 2 修复已知问题:当数据池线程【数据来源】为“前端设置固定值”的数组,表格无法动态绑定问题 #### 3 前台界面/菜单配置界面 【取 消】按钮点击新增提示确认窗口,防止操作失误鼠标点击,导致未保存的工作数据丢失; #### #### update code 20250924 2 新增组件 “按钮-button” #### a当【组件类型】选项为“复合组件”时,在添加复合组件成员切换组件类型时条件展示; #### 功能描述:与模块区域按钮功能一致,支持更多自定义设计的css样式配置。 #### #### update code 20250914 紧急修复前台选项卡模块选项卡标签背景透明图片png格式下的白屏问题。 #### #### update code 20250913 1 前端开发相关配置 》 设置请求资源 》 配置ajax请求信息: #### a 新增配置项 【加载中蒙板动画延迟展示时长】,数字输入框 #### 功能描述:如果向后端发送api接口请求长时间无响应,当接口pedding状态时间超过当前加载中蒙板动画延迟展示时长的时间,则开启加载中loading动画遮罩。 #### 2 系统界面相关配置 》 设置系统主题 》 系统模块组件通用参数配置 》 模块: #### 表格模块 》 表格模块头部区域:a 新增配置项 【全选按钮字体颜色】,css基础样式设置 #### 表格模块 》 表格模块头部区域:b 新增配置项 【多级表头背景样式】,css基础样式设置 #### 表格模块 》 表格模块头部区域:c 新增配置项 【多级表头字体样式】,css基础样式设置 #### 表格模块 》 表格模块头部区域:d 新增配置项 【多级表头边框阴影】,css基础样式设置 #### 功能描述:开放通用模块css样式模板的设计配置,可根据自身需求自定义系统模块的主题样式风格。 #### 3 系统界面相关配置 》 设置系统主题 》 系统模块组件通用参数配置 》 组件: #### a 新增配置项 【左侧标签文本最小宽度】,css基础样式设置 #### b 新增配置项 【左侧标签文本右边距】,css基础样式设置 #### c 新增配置项 【设置文本清空按钮】,单选按钮 供选项 是和否,默认 否 #### d 新增配置项 【右侧组件主体最大宽度】,单选按钮 供选项 继承父级和自定义,默认 继承父级 #### 功能描述:开放通用组件css样式模板的设计配置,可根据自身需求自定义系统组件的主题样式风格。 #### #### update code 20250904 1 表格模块 》 模块视图区域: #### 功能描述:表格工具栏类型为“增删栏”时,新增表格行数据通过长按鼠标拖拽实现表格行数据重新排序的需求。 #### a 新增配置项 【设置拖曳排序】,当【工具栏类型】为“增删栏”时条件展示,单选按钮 供选项 是和否,默认 否 #### 2 表格模块 》 表格基础设置: #### 功能描述:当表格-模块头部区域-配置项【设置批量操作】选项为“是”时,须将后端接口响应的表格行数据进行按钮状态值的默认勾选操作,新增批量操作按钮根据后端响应数据与表格动态数据进行枚举比对,如枚举双方的值相同,则该表格行左侧勾选按钮自动打勾。并提供在表格底部提供 标签组标签 另行展示 表格行按钮勾选为“已勾选”的数据,届时需另行绑定新增的配置项【绑定标签组枚举名称】和【绑定标签组被枚举名称】 #### a 表格模块 》 表格基础设置 》 表格头