机器人
AI 摘要
切换
CatGPT - TianliGPT(1)
IMYAI 文本处理工具箱是一个在线工具,旨在提供全面的文本处理功能,包括文本格式化、标点和拼音转换等,并集成了 AI 文本优化能力。项目基于 FastAPI 和前端 JS 开发,支持 Docker 部署,使文本处理更加高效简便。本文作者分享了项目布局的设计思路,特别是如何通过多行 flex 布局和 grid 布局来优化几十个按钮的摆放,以达到美观的效果。此外,项目还实现了拖拽效果、使用 Intro.js 的开屏引导功能,以及

IMYAI 文本处理工具箱是一个功能强大的在线文本处理工具,专注于提供全面的文本处理功能。它不仅支持基础的文本格式化、标点转换、拼音转换等功能,还集成了 AI 智能优化文本的能力。项目采用 FastAPI + 前端 JS 开发,并支持 Docker 一键部署,让文本处理变得简单高效。本文将分享该项目在布局方面的一些技术细节和实现思路。

主要功能

  • Markdown 文本转普通文本
  • AI 智能优化文本
  • 文本字数统计 (包含汉字、字母、数字、标点符号等)
  • 中英文标点符号转换
  • 文本格式化 (添加 / 删除空行、缩进等)
  • 汉字转拼音 (多种拼音风格)
  • 文本查找替换
  • 支持自动跟随系统深色 / 浅色主题切换

好久不见,朋友们 有段事件不写博客了,大概一年多的时间了 其中有半年时间 是在专心备考考试 之后便进入到了工作阶段 变得更没有闲暇时间 从四月份到现在 陆陆续续为公司贡献了各种各样的项目 正好赶上公司有开源的想法 随之将刚入职贡献的项目开源出来给大家使用.

TL; DR

tool.imyaigc.com_

tool.imyaigc.com_ (1)

代码部分其实比较简单,这里想为大家讲解的是我自己构思的一种自适应布局 感觉挺有意思的 因为项目涉及到各种各样几十个按钮的摆放

0.0 原本实现效果

怎么样在所有项目上美观好看成了一个问题 一开始的布局是这样的

image-20241124125018493

就是把按钮分成了四排 很简单的一种布局 不足一排的就让他换行 但是在手机端 小屏幕 上面视觉效果非常不好

image-20241124125633441

1.0 多行 flex 布局 正常文档流

然后尝试使用正常的文档流 也就是把所有的按钮都放在一个盒子里面 使用多行 flex 布局 最后变成了如下效果

image-20241124125956450

虽然项目初版实现了 但是这会出现一个问题 那就是总给人一种很拥挤的感觉 感觉不是很理想 但是差不多可以用了 但是总感觉不太完美 我想找到一种 根据按钮的字数多少来达到相同视觉效果的一种布局 于是我开始将目光转向 grid

2.0 初试 grid 布局

grid 布局 也就是网格布局 他的定义就是将文档分成几份几份的 感觉非常符合我的需求 于是将代码修改为 grid 布局 实现了如下效果

image-20241124130538069

但是出现了一个问题 那就是不足一行的地方会有空白 非常不美观 如下图所示

image-20241124130648302

通过上图可以看出 grid 布局 完美的将每个按钮平均分成了很多份 但是这么大的空隙 肯定是没办法接受的 于是再次想办法改进

2.1 grid 布局升级版!

有没有办法 既保留 grid 布局这种几份几份的概念 但是仍然让每一行铺满 构思良久 终于想到了如下解决办法

那就是使用 JS + Grid 布局 在这里用了一个类似 tailwindcss 的概念 具体实现如下

首先 根据每个按钮的字数 将每个按钮应该占有的份数定义出来 然后 设定几个 hooks 表示在 多少尺寸的时候 应该显示多少份 例如 1000px 的时候最多显示 16 份 800px 的时候最多显示 12 份 然后调控到所有屏幕均符合比例的一种状态

接着 去写 JS 代码 将各个按钮依次添加到每一排 然后去判断加上该按钮的份数之后 是否超过了定义的份数 如果超过了 那么就新起一排

代码实现起来 逻辑如下

2.1.1 定义各个按钮的份数 代码

2.1.2 定义 grid 布局的一些 hooks

2.1.3 创建 buttons 代码

当然 还有一些 CSS 用于实现全部所用到份数

然后就实现了在各个屏幕下都能正常显示的效果

image-20241124132053438

image-20241124132042888

image-20241124132114735

2.2 增加一些拖拽效果

代码不是很难 粘贴如下 同时适配了移动端

2.3 使用 Intro.js 实现开屏引导功能

image-20241124132349510

代码如下 难点是如何实现第一行按钮和第二行按钮跨行框选 这里新建一个 新的 div 来实现

2.4 网站同时接入了 AI 功能 这里也简略实现了一版 POST Stream 流的使用

后端很简单 但是也不太规范 每次返回的内容需要自行截断 迫不得已使用此种方案

2.5 成品地址

再放一个官方地址体验:

项目开源地址 (已支持 docker 一键部署):

3.0 特别鸣谢