满心博客_记录生活里的小美好 - 网页前端
type: channel
link: https://zhoutian.com/tag/%E7%BD%91%E9%A1%B5%E5%89%8D%E7%AB%AF/
items: 推荐个免费好用的投票网站
items: 国产工作流引擎FlowLong
items: Moon-Start：个性化定制网址导航
items: 一个有意思的JS动画库
items: Vue.js中的Word文件预览
items: 最强静态导航网站
items: 简约背景图推荐
items: 放松身心的海洋音乐网站
items: 创意CSS合辑二：轻松实现多种有趣效果
items: 创意CSS合辑一：轻松实现多种有趣效果

推荐个免费好用的投票网站
type: item
date: 2025-01-29T10:32:00+08:00
description: 小天遇到好用的软件，一定要分享出来，一方面自己以后寻找，另一方面给需要的朋友们，这次分享的是一个投票的网站，我公司去年年会就使用的这个，效果挺不错的，当然我用的不多，就是弄了一个节目投票，整体效果还不错，我推荐它的原因，是因为使用上免费，只有极少部分功能收费，像模版这些都是免费的。网站上模版确实不少，粗略看了下，大概有两百多套，涵盖了：单位、金融、建筑、医疗 等等系列，当然风格上也有：政企风、教务风、清新风、商务风、简约风 等等，个人觉得也基本上涵盖了大部分应用场景了，最香的是，模版完全免费使用。使用上那就更简单了，只有四步选择模版(多行业，海量模版)创建活动(预览模版，一键创建)编辑活动(灵活页面配置及活动内容)发布活动(设置选手内容，一键发布)活动编辑界面如下，配置项通俗易懂，配置简单，同时支持：防刷票、地区、IP黑名单等等策略，让投票更公平，也支持报名投票，功能上来说，还是比较齐全的。这款软件还支持大屏系统，活动配置发布之后，可以将大屏链接通过浏览器直接打开，用户可以通过大屏扫码投票，同时也能看到排名情况，这个功能还是挺赞的。当然，他们还有问卷系统，有需要也可以看看。有兴趣去看看吧：协作投票

国产工作流引擎FlowLong
type: item
date: 2023-11-23T08:27:00+08:00
description: 业务项目中的一套架构里，考虑整合一套工作流作为审批使用，主要考虑两款Activity和flowable，权衡使用场景、操作性等方面，最终选择了flowable前言这篇文章不分享后台相关内容，因为此类文章度娘已经烂大街了，这里主要分享一款工作流前端设计器一个优秀的审批流程设计器可以减少无效沟通，简化配置和操作流程，使得审批流程的设计更加高效。设计器选择其实开源项目中有不少设计器，同时成型项目也不少，为何最终没选择，有以下几点原因：业务框架耦合度过高自身框架中过渡封装技术框架选型不同二次开发不便利直到看见FlowLong这款开源设计器，无论从设计器简洁程度，还是代码都无可挑剔，符合我的使用场景关于 FlowLong飞龙工作流引擎 FlowLong 真正的国产工作流引擎 json 格式实例模型、简易审批流程设计器、为中国特色审批匠心打造！功能说明满足部分标准 BPMN 功能的同时支持中国特色流程操作概念支持功能功能描述完成程度顺序会签同一个审批节点设置多个人，如 A、B、C 三人，三人按顺序依次收到待办， 即 A 先审批，A 提交后 B 才能审批，需全部同意之后，审批才可到下一审批节点。✅并行会签指同一个审批节点设置多个人，如 A、B、C 三人，三人会同时收到待办任务， 需全部同意之后，审批才可到下一审批节点。✅或签一个流程审批节点里有多个处理人，任意一个人处理后就能进入下一个节点✅票签指同一个审批节点设置多个人，如 A、B、C 三人， 分别定义不同的权重，当投票权重比例大于 50% 就能进入下一个节点✅抄送将审批结果通知给抄送列表对应的人✅驳回将审批重置发送给某节点，重新审批。驳回也叫退回， 也可以分退回申请人、退回上一步、任意退回等✅分配允许用户自行决定任务转办、委派、主办 及其它✅转办A 转给其 B 审批，B 审批后，进入下一节点✅委派A 转给其 B 审批，B 审批后，转给 A，A 审批后进入下一节点✅跳转可以将当前流程实例跳转到任意办理节点✅拿回在当前办理人尚未处理文件前，允许上一节点提交人员执行拿回✅撤销流程发起者可以对流程进行撤销处理✅加签允许当前办理人根据需要自行增加当前办理节点的办理人员✅减签在当前办理人操作之前减少办理人✅认领公共任务认领✅已阅任务是否查看状态显示✅催办通知当前活动任务处理人办理任务✅沟通与当前活动任务处理人沟通✅终止在任意节点终止流程实例✅运行及使用运行后端导入 idea 可选择 Gradle 或 Maven 方式管理依赖git clone https://gitee.com/aizuda/flowlong.git先跑一跑测试用例初始化执行 db/flowlong-mysql.sql 数据库脚本找到 flowlong-spring-boot-starter 模块，目录 test 部分 java/test找到 mysql 相关测试类 Test...java 执行观察数据库中表数据变化结构说明|- db 数据库文件存放目录 |- flowlong-core 工作流核心库 |- flowlong-mybatis-plus 数据访问层，默认 MybatisPlus 当然你可以适配其它 ORM |- flowlong-solon-example Solon 演示案例 |- flowlong-solon-plugin Solon 启动插件 |- flowlong-spring-boot-example SpringBoot 演示案例 |- flowlong-spring-boot-starter SpringBoot 启动插件 |- build.gradle Gradle 依赖管理 |- pom.xml Maven 依赖管理设计器导入 Vscodegit clone https://gitee.com/flowlong/flowlong-designer.git安装依赖、运行、打包# 安装依赖 npm install # 本地运行 npm run dev # 编译打包 npm run build效果预览源码仓库Demo后端源码设计器源码

Moon-Start：个性化定制网址导航
type: item
date: 2023-11-09T10:38:00+08:00
description: 一个简约风格的网址导航页，基于 [MIT] 协议开源。你可以直接使用它，也可以在此基础上客制化自己的网址导航。当然现在开源的导航站也非常多，但是让我眼前一亮还得是：Moon-Start软件特点⚡ 高效导航 - 极简样式，快速访问🍎 从心所欲 - 完全自由地增删改网站，支持自定义网站图标🛫 拖拽排序 - 快速调整网站顺序🔍 搜索词联想 - 支持必应、谷歌、百度等多个搜索引擎📱 响应式布局 - 可在任意尺寸的设备上正常显示🎨 主题切换 - 内置多种主题样式，可自由切换🌙 夜间模式 - 爱护你的双眼🌍 I18n - 支持简体中文、英文和日文📤 导入/导出数据 - 在不同设备间同步数据📦 浏览器插件 - 新建标签页时打开 Moon简洁直观的界面设计多样化的主题分类提供了多样化的主题分类，以满足用户的不同需求。您可以找到几乎关于任何主题的链接，无论是旅行、科技、学习、音乐还是体育等等。这种分类和归类使得您能够快速找到您感兴趣的网站，而无需费时费力地进行搜索。功能丰富的快捷方式网址导航网站的主要目的是使您快速访问您常访问的网站，并提供便利。它出色的地方就在于它提供了丰富的快捷方式。您可以设置您喜欢的网站为快捷方式，将其添加到主页上的卡片中，这样每次访问该网站时，您只需点击卡片即可进入。高度可定制化的个人化设置一个伟大的特点是提供高度可定制化的个人化设置。您可以根据自己的喜好和需求定制主页的布局和外观。您可以选择不同的主题颜色、卡片布局和网站图标。这样，您可以根据自己的喜好和风格来设计并优化您自己的网站导航。喜欢简约风，且想自定义导航站的伙伴，一定要试一试运行及部署1.拉取代码git clone https://github.com/jic999/moon-web-start.git2.进入目录cd moon-web-start3.安装依赖pnpm install4.启动项目pnpm dev5.打包项目pnpm build6.将生成的dist文件传到服务器，配置nginx指向dist目录即可浏览器插件插件适用于谷歌浏览器，可以在新建标签页时自动进入Moon。该插件暂未在Chrome应用商店发布，若要使用，请按照以下步骤：解压本项目下extension/moon-chrome-extension.zip'。在谷歌浏览器的扩展程序界面，打开右上角的开发者模式。点击左上角加载已解压的扩展程序。选择刚刚解压的moon-chrome-extension目录。演示地址、github源码

一个有意思的JS动画库
type: item
date: 2023-11-05T17:24:00+08:00
description: 让 DOM 像眼睛一样注视的 JS 动画库。这是一个简易的动画库，主要用于计算一个 DOM 与观察目标，比如鼠标、DOM、输入框值之间的位置，从而做出一些有趣的动画，比方说让它变成跟眼睛一样。特性能够观看鼠标或其他 DOM，甚至输入值，观看任何你想要的内容！因为是基于DOM的，所以很容易支持RWD支持多种框架零依赖typescript开发gzip压缩后核心代码大小仅3kb如果元素不在屏幕上，则会自动停止观看兼容性||Chrome|Firefox|Safari|Edge|Opera|iOS Safari/Chrome|Android Chrome||:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:||支持度|70+|73+|14.1+|80+|70+|14.1+|✔|github源码官方demo

Vue.js中的Word文件预览
type: item
date: 2023-11-01T11:43:00+08:00
description: word预览，实际在开发中，是个很常见的功能，无论是自己开发组件，还是借助开源组件等等，都可以，但是今天我分享一款借助vue-office来实现word预览vue-office简介vue-office是一个支持多种文件(docx、.xlsx、pdf)预览的vue组件库，支持vue2和vue3。目标是成为使用最简单，功能最强大的文件预览库vue-office功能特色一站式：提供docx、.xlsx、pdf多种文档的在线预览方案，有它就够了，不用四处寻找、测试、集成各种库了使用简单：只需提供文档的src(网络地址)即可完成文档预览，也支持ArrayBuffer、Blob等多种格式支持样式：不仅能预览内容，也支持文档样式，最大限度还原office文件内容安装#docx文档预览组件 npm install @vue-office/docx vue-demi #excel文档预览组件 npm install @vue-office/excel vue-demi #pdf文档预览组件 npm install @vue-office/pdf vue-demi注意：如果是vue2.6版本或以下还需要额外安装 @vue/composition-apinpm install @vue/composition-apidocx文件预览目前支持docx文件预览，不支持doc文件使用网络地址预览通过配置docx文件的远程地址实现预览，这种预览方式最简单。 <vue-office-docx :src="docx" style="height: 100vh;" @rendered="renderedHandler" @error="errorHandler" /> 可以设置组件的style配置样式，通常需要设置下高度height，如果不设置则默认取组件的父元素高度，最小高度300px。组件渲染完成会抛出rendered事件，渲染失败会抛出error事件。上传文件预览预览通常有两种场景，一种是已有文件的远程地址，另一种是上传前预览，上传前预览主要是通过读取文件的ArrayBuffer格式，传给预览组件来实现。我们以ElementUI的上传组件作为示例，当然也可以使用普通的input type="file"，只要能获取文件的ArrayBuffer格式数据即可。 <el-upload :limit="1" :file-list="fileList" accept=".docx" :beforeUpload="beforeUpload" action="" > <el-button size="small" type="warning">点击上传</el-button> </el-upload> <vue-office-docx :src="src"/> 主要是利用在beforeUpload中获取上传的文件，然后利用FileReader以ArrayBuffer格式读取，读取之后传给预览组件。如果是原生的input type="file"，也是类似的 <vue-office-docx :src="src"/> xlsx文件预览目前只支持xlsx文件预览，不支持xls文件。使用网络地址预览 <vue-office-excel :src="excel" style="height: 100vh;" @rendered="renderedHandler" @error="errorHandler" /> 上传文件预览和docx的上传文件预览一样，获取文件的ArrayBuffer，传给组件的src属性。pdf文件预览使用网络地址预览 <vue-office-pdf :src="pdf" @rendered="renderedHandler" @error="errorHandler" /> 上传文件预览和docx的上传文件预览一样，获取文件的ArrayBuffer，传给组件的src属性。我这里主要分享以VUE为基础的样例，如果你不是该框架，可参考官方文档vue-office官网

最强静态导航网站
type: item
date: 2023-10-31T14:56:00+08:00
description: 一个纯静态、功能强大的导航网站，支持SEO和在线编辑，希望你会喜欢，内置收录多达800+优质网站，为您的工作、学习、生活提供帮助。功能预览Discovery Navigation 的想法是让其简单方便，不依赖后端服务，不需要复杂的配置和数据库配置概念，因此可以开箱即用。🍰 支持SEO。🍰 完全静态，并提供自动部署功能。🍰 三叉树结构清晰，分类清晰。🍰 支持一个网站关联多个URL🍰 美丽与简约并存，不再是杀马特的时代。🍰 完全开源，易于定制。🍰 支持多种浏览模式并创新。🍰 支持足迹内存。🍰 支持手机浏览。🍰 支持搜索查询。🍰 支持自定义引擎搜索。🍰 多种主题切换。🍰 支持深色模式。🍰 支持后台管理，无需部署。🍰 支持从 Chrome 书签导入效果预览部署采用TypeScript + Html开发，因此部署也变得非常简单，这里分享三种部署方式Github部署1、fork当前项目2、在仓库页面点击分支，在输入框中输入创建分支。否则上传图片会出现404现象3、https://github.com/settings/tokens申请token，检查对应权限，如果不懂就全选，复制并保存token4、https://github.com/username/nav/settings/secrets/actions/new 创建一个新的应用token，name填写TOKEN（全部大写）5、访问https://github.com/username/nav/actions点击“绿色按钮”6、一定要修改项目配置文件nav.config.ts7、5分钟后，打开https://username.github.io/nav，你会看到一个非常强大的导航网站。Vercle部署步骤与第一种方法相同，只是不需要第四步。具体使用请按照步骤https://github.com/apps/vercelNetlify部署https://www.netlify.com/后台修改路由地址为system，如： https: //www.nav3.cn/#/light修改为https://www.nav3.cn/#/system升级升级前请备份根目录下的data文件夹和nav.config.ts文件夹，升级后替换。点击Watch右上角按钮，可第一时间跟踪版本升级情况。本地运行# Download git clone --depth=1 https://github.com/xjh22222228/nav.git cd nav # Installation dependencies(Node:v18) yarn # Start yarn start # Build yarn build源码地址githubdemo

简约背景图推荐
type: item
date: 2023-09-22T08:34:00+08:00
description: 博客第一版背景图都用的纯色系，当时感觉挺好的，过了这么久感觉有点审美疲劳的目前的背景图习惯加点背景色，然后高斯模糊这种方式，所以背景图素材就很关键了无意中看到一个网站，中有一些简约背景图，支持SVG下载、在线调色、调整大小，感觉还不错这个画风比较简约，先看看效果，万一你也喜欢这种呢为什么推荐它首先，它支持导出SVG格式，SVG的优点是可以无损放大，而且体积小，我从该网站下载了20几个背景，总共不到300KB，平均每个仅10KB。其次，支持在线编辑，所有图案大小、配色均可以调整，与你的报表适配。图案样式也可以小幅调整。使用时，将下载好的SVG图片放入画布背景即可：感兴趣的话，就去试试吧简约图库

放松身心的海洋音乐网站
type: item
date: 2023-09-11T10:21:00+08:00
description: 今天无意中看到一个音乐网站，还挺有意思的，跟大家分享一下主要模拟大海与海底的声音，还可以配合等动物声音，再加上精美的3D动态海洋画面，带来一种沉浸式的深海体验，可以让躁动不安的心瞬间安静下来。还可以控制海浪的波涛汹涌或者沉到水底听听这些可爱的小动物的声音。整体上还是蛮有意思的，有兴趣去试试吧virtocean

创意CSS合辑二：轻松实现多种有趣效果
type: item
date: 2023-08-29T10:53:00+08:00
description: 作为一个频繁对博客进行改进的人，我深知花里胡哨的CSS效果对于吸引读者尤为重要。在这里，我汇总了一些炫酷的CSS效果，并提供了简要的预览和实现思路，以方便那些不太熟悉的朋友也能轻松上手。同时，我会持续寻找优秀的效果，逐步添加到博客中，其中部分资源来自网络。相信有了以下示例，很多不会css动画效果的朋友，也就会了弹跳的圆使用伪选择器 :before 和 :after ，并配合 animation 属性并设置 transform 变形参数，实现一个圆不停的弹跳的效果。实现思路：主体一个 div 标签用伪选择器 :before 和 :after 分别画两个圆，一个作为主体弹跳圆形，一个作为其阴影部分，分别设置 animation 动画参数，注意这里设置了反向播放参数 alternateHtml部分 弹跳的圆 CSS部分.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .yuan19{ width: 20px; height: 66px; position: relative; } .yuan19:before{ content: ''; width: 20px; height: 20px; position: absolute; border-radius: 50%; background-color: #333; animation: yuan191 .5s ease infinite alternate; } @keyframes yuan191 { 0% { top: 60px; height: 5px; border-radius: 50px 50px 25px 25px; transform: scaleX(1.5); } 50% { height: 20px; border-radius: 50%; transform: scaleX(1); } 100% { top: 0; } } .yuan19:after{ content: ''; width: 20px; height: 4px; border-radius: 50%; position: absolute; top: 62px; animation: yuan1912 .5s ease infinite alternate; } @keyframes yuan1912 { 0% { filter: blur(1px); transform: scaleX(1.5); background-color: rgba(0,0,0,0.9); } 50% { transform: scaleX(1); background-color: rgba(0,0,0,0.6); } 100% { filter: blur(2px); transform: scaleX(0.5); background-color: rgba(0,0,0,0.3); } }动态的波纹字使用 linear-gradient 拉出网格渐变，然后通过 animation 参数来改变 background-size 数据，形成不停变化的纹理效果。实现思路：主体一个 div 标签用 background-image: linear-gradient(...) 拉出网格渐变纹理，然后使用 -webkit-background-clip 配合 color: transparent 使文字加上纹理，再设置 animation 的参数，修改 background-size 参数实现纹理不停变化Html部分 动态的波纹字 不就是 玩嘛！ CSS部分.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .font20{ color: transparent; font-size: 70px; font-weight: 900; background-image: linear-gradient(-45deg, #fff 0%, #fff 25%, green 25%, green 50%, #fff 50%, #fff 75%, green 75%, green 100%); -webkit-background-clip: text; animati…

创意CSS合辑一：轻松实现多种有趣效果
type: item
date: 2023-08-29T08:59:00+08:00
description: 作为一个频繁对博客进行改进的人，我深知花里胡哨的CSS效果对于吸引读者尤为重要。在这里，我汇总了一些炫酷的CSS效果，并提供了简要的预览和实现思路，以方便那些不太熟悉的朋友也能轻松上手。同时，我会持续寻找优秀的效果，逐步添加到博客中，其中部分资源来自网络。相信有了以下示例，很多不会css动画效果的朋友，也就会了列表文字图标实现思路：主要看css部分，先固定 span 标签宽高为，圆角 50%，然后设定行高，让字符垂直居中；设定 overflow: hidden，限制字符溢出；然后设定 letter-spacing: 200px,让字符间距变大，不让第二个字符显示到span中；然后设定 text-indent: 12px，来让第一个字符居中。Html部分 04 第一个字符串生成文字图标 第一个字符串生成文字图标第一个字符串生成文字图标 用CSS可以做什么？用CSS可以做什么？ 前端的致命诱惑前端的致命诱惑 css部分*{ margin: 0; padding: 0; list-style: none; transition: .5s; } html,body{ background-color: #f5f5f5; color: #fff; font-size: 14px; } .app{ width: 100%; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; } .app ul { max-width: 300px; } .app ul li{ width: 100%; color: #152239; font-size: 16px; line-height: 42px; margin: 15px 0; float: left; } .app ul li span{ width: 42px; height: 42px; line-height: 40px; color: #1E47ED; font-size: 18px; font-weight: 700; text-indent: 12px; border-radius: 50%; display: block; float: left; overflow: hidden; background-color: #eaeaea; letter-spacing: 20px; margin-right: 15px; } 动态圆点水波纹这个效果使用 css 中 animation 属性，以及搭配伪元素 ::after、::before 来实现两个圆交替变化。实现思路：伪元素基于主体圆写出两个蓝色圆形来做水波纹，并设置 animation 属性进行变化。注意：第二个伪元素的圆形，延迟 2s 启动 animation 动画。Html部分 圆点水波纹效果 CSS部分*{ margin: 0; padding: 0; list-style: none; transition: .5s; } html,body{ background-color: #f5f5f5; color: #fff; font-size: 14px; } .app{ width: 100%; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; } .dot { width: 48px; height: 48px; display: block; position: relative; border-radius: 50%; background-color: blue; z-index: 1; } .dot::after { width: 100%; height: 100%; content: ""; border-radius: 50%; position: absolute; top: 0; left: 0; z-index: -2; background-color: blue; animation: dot-play 4s linear 400ms infinite; } .dot::before { width: 100%; height: 100%; content: ""; border-radius: 50%; position: absolute; top: 0; left: 0; z-index: -1; background-color: blue; animation: dot-play 4s linear 200…