记 Shadcn UI 生成组件样式不符的坑

今天在使用 Shadcn UI 的时候发现有个坑,发现官方文档的组件 Demo 居然和项目本地跑的效果不同。

这件事情的主要起因就是 ToolTip 组件增加了箭头之后会出现闪烁的现象,看着挺不爽的。而打开文档看它的 Demo 是正常的,想着是不是更新一下就能解决,结果无论是更新依赖还是删除掉原来生成的文件,都是之前“老版本”的模样...

我再三排查后发现,问题主要是 Shadcn UI 的 components.json 配置上,指定了 tailwind.config 设置项之后,就会生成出这种“老版本”的代码,对照 文档 后发现,如果使用 Tailwind V4,这里默认是缺省的,按照 Tailwind 4 模式生成的代码就是和文档效果一样的,而公司项目使用的 Tailwind 是 V3 的版本,真相大白。

但我还是使用了最新的 Tailwind V4 才会生成的代码丢进了项目当中,无论是依赖项还是交互行为其实都和之前一样,只是返回的函数组件样式和组件结构有些差异,但好在那个箭头会闪烁的问题解决了,就这样吧!

一个 Safari 邮箱输入中文的异常 Bug

公司项目的登录弹窗有一个邮箱输入框在 Safari 浏览器下,切换成中文输入法输入,会出现重复输入前面字符的 Bug(比如输入 woshi,会变成 woswoshwoshi),这个问题在 Chrome 浏览器上偶现,Safari 上是必现,尤其是手机和 iPad 上,非常影响用户体验。

此前从来没遇到过类似的现象,之前一直没想到是哪里的问题,这次我把目光放在了一个 onChange 参数上,发现其他同事加了一个过滤无效字符的逻辑,怀疑这里有问题。

<Input
  type="email"
  value={email}
  onChange={(ev) => {
    // 只允许英文字母、数字和邮箱中的特殊字符
    const filteredValue = ev.target.value.replace(
      /[^a-zA-Z0-9@._+%-]/g,
      "",
    );
    setEmail(filteredValue);
  }}
/>

删除之后测了下就正常了,确实是这里的问题。后续解决方案就是去除这个逻辑,如果需要对内容校验,使用原生 pattern 实现结合 validity.valid 属性验证即可。

<Input
  ref={emailRef}
  type="email"
  value={email}
  onChange={(ev) => setEmail(ev.target.value)}
  required
  pattern="^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$"
/>

// emailRef.current?.validity.valid 这样验证

另外简单列下今晚做了什么事:

  • 给小窝前端加入 PrismJS 高亮代码功能(AI 辅助)
  • 给小窝前端部分引入媒体标签功能
  • 给摄影集卡页面组件增加“点击角色后查询该角色下的所有图片”的功能
  • 调试小窝工具箱插件,兼容 B 站新版本的会员购页面

    • 小窝后端对应的手办保存接口支持 png 格式的图片(因为不知道为什么会员购的服务器只会返回 png 了,要是有在 B 站的朋友可以反馈下)

给魅族 16 手机隐藏 Root

打开魅族 16 打算兑换一下网易云音乐会员,联通 App 无法登录,升级 App 之后发现它检测了 Root 权限导致无法使用。

由于此前设备 Root 了,解决办法是先将此前安装好的 Magisk 刷入到系统(用了直接安装),然后开启 Zygisk 功能,期间遇到错误“检测到不属于 Magisk 的 su 文件”,这是百度出来的解决方案,亲测有效。

  1. 安装文件管理器(如‌ ES 文件浏览器或‌ MT 管理器),并授予其‌ Root 权限。
  2. 进入路径 /system/xbin,找到名为 su 的文件。 ‌
  3. 将该文件重命名为 su.bak 或直接删除。 ‌
  4. 重启设备后,Magisk 异常状态应恢复正常。

重启后在设置里面排除一下联通 App 即可,它就不会再提示了。在 AI 的帮助下,我也顺带了解了一下相关术语:

Zygisk 是 Android Root 工具 Magisk(面具)在 v24.0 版本后引入的一项核心功能。它的全称是 "Magisk in Zygote"。

简单来说,Zygisk 是一种更高级、更深层的系统修改机制,它允许 Magisk 模块直接在 Android 系统的 Zygote 进程中运行代码。

传送门

原本想着是否要下载一些比如 Lsposed 的工具或 Magisk 扩展来实现这个效果,实际上并不需要,但还是了解到了 LocalSend 这个局域网传输工具,挺好用的,也在此安利一下。

算账

  • 工作方面也是正常的推进产品的新需求,优化交互问题,没啥好说的
  • 发工资了,晚上回到家又开始事后算账了

    • 因为前两个月都分别请过事假,我对工资的计算方式有异议,感觉扣的实在太多了
    • 根据工资单能推算出来“其他”就是 996 之后的加班费,但是“应发项”加起来就是和“应发合计”对不上
    • 就算把正常薪资部分按照出勤率“打折”也是比“应发项”多,所以我就十分困惑
    • 按照他们的工资计算方式,其实就已经“白嫖”很多了,周六的加班时间请假,正常薪资部分似乎也要打折的
    • 并且出勤率其实也有问题,因为国庆节假期期间理论上是正常发放工资的
    • 而这出勤率是按工作日计算的,这就挺有争议的。算下来 10 月请假比 11 月请假一样的天数,钱扣的会更多,这合理么?
  • 结束之后还是不忘刷点长视频,有些让我感慨万分

    • 第一个视频讲述了非洲加纳垃圾回收产业的真实记录,同样在一个世界上他们过着比我们还拮据的日子。我们现在衣食无忧了,更要好好对待自己。加班虽然累但也不要忘记享受生活!
    • 第二个视频讲述的是作者以一个跟随者的身份体验了自己一位日本朋友的“社畜”生活,加班到深夜第二天还要七点起床,日本非常讲究礼节,穿衣打扮什么的必须要到位。不过这种加班氛围在老龄化的社会有着动摇的趋势

广州动星 / iPad 送修

没错,小渔村的我又跑去大城市见世面了!叫上了 @MJ 和 @猫二 两位佬出来,主要是去逛下动星看看有没有什么好玩的。既然是二次元胜地肯定也要带上 📷 和闪光灯,一个包又装了不少东西,就算缩减到极致也必须要有个柔光伞才行。

在出发之前我还重新看了下“Apple 支持”软件,发现晚上六点的预约有空位,立马预定,也是非常的幸运了,直接不用跑多一趟。

我们直接约定在「公园前」见面,先是去喝了个早茶,之后到饭店对面公园转了一圈,就下动漫星城广场了。商场一共有三层,其中卖周边的至少有两层。我们几乎都逛了一遍,@MJ 淘到了自己感兴趣的物品,还抽了 2 次盲盒,而我只买了一只「缇宝」的吧唧,实在想不到买啥。

早前的时候摄影群友说周天的 Coser 可能不多,但我实际见到的还是不少的,光原神都有好几个了。(场内一个过道旁边有在休息的 Coser 老师,有行秋、重云、钟离、温迪)最离谱的是,我见到了一个出《鸣潮》傻椿 Kig 的老师,看了下是之前萤火虫扩列的 @古灵精怪,非常巧了!

我抓了行秋、重云两个人去拍,本想在过道中间但是打闪光灯被保安看到了,说是不允许打闪光灯。这我就不开心了,可能是人太多怕闪到其他人吧,我找了个没什么人的角落拍,把柔光伞也收了,这样应该就没这么张扬了吧。(有点在打游击战的感觉)

后续还拍摄了一位 Kig 的伊蕾娜老师,拍摄结束之后现场有位老师找我搭话,和我吐槽了一些事。说是广州这边对 Kig 不是特别友好,区别对待但也不知道为什么。人家正常出 Cos 的可以但是 Kig 就不给。我本来还以为他在说打闪光灯的事,他说这里确实不给,还说之前有人闪光灯被没收了,我顿时感到有些害怕。(虽然从法律上来讲他们其实是没有任何权利没收顾客设备的)

拍摄的图片将在后续更新放出,敬请期待!

继续和他细聊,发现他认识和我同样在一个城市的摄影 @Hayase(早濑),说他平时老抽象了。他现在只拍 Kig,不拍其他类型的 Coser。但我和他不同,我基本上都会拍一些,我觉得这是对一个圈子多元化的展现。

找了个小吃店歇脚,@MJ 收到了来自公司的消息,说要尽快修复 Bug,于是只好先回深圳了,而我接下来就和 @喵二 继续逛。走到室外,我见到了刚想拍却没抓到的出希特菈莉的老师,六点就要去 Apple 直营店了,这最后的机会一定要拍几张!此时此刻 @喵二 用手机记录下了这一切,回过头来看非常的有意思。

拍摄结束后马上收拾东西坐地铁前往 Apple 天环广场,现场排队申请售后的人也非常多。我们前后大概处理了半个多小时,退出 iCloud 清除设备数据,设备给到工作人员就搞定了。唯独比较担心的就是「设备检测到进水是不保修」的,我联想到此前设备似乎是有淋过一点雨,但都及时擦掉了,也不知道有没有影响。对此还是保持怀疑态度,等 Apple 后续出检测结果再说吧!

我们去了一家萨莉亚吃晚餐,经济实惠!@喵二 还没工作,简单消费一下我觉得没啥问题,这顿饭我请客。最后我们去逛了逛正佳广场的索尼和尼康直营店,体验了一下相机和镜头,其中用于摄像的电动镜头我感觉非常好玩,当然价格也是并不便宜,我还是好好拍好照片再考虑这些吧!

时间来到了九点多,是即将告别各回各家的时刻。我依旧是买了最晚一班的车次,这次上车地点相较以往有些变化,其实就是早上下车的位置。在大巴车上我简单看了下照片回顾了这一天,虽然单休,但非常充实,记忆深刻!可惜要是双休我还能在家躺一天,什么时候我才能回到「工作生活平衡」的状态呢。

假期结束的第一个工作日

国庆结束的第一天工作,除了简单回顾一下之前没做完的需求,产品方面继续整理出了一些 Bug,在这个新的“重磅功能”上线前继续修复完毕。

  • 我们之前在使用一个 pptxhtml 的库 pptx-preview,但是被嫌弃转换质量一般
  • 快下班的时候和同事调研发现了几个有意思的库,看上去功能类似,转换结果相对更好

  • 简单测试了下,发现 PPTist 对于渐变文字和字体大小的处理似乎还是有些欠缺

    • 但是能够处理透明渐变背景了

下班回到家之后又是倒头就睡,醒来之后也就主要干了这些,结果还是弄到半夜三点...

  • 广州 CICF 漫展返图调色

    • ‌长夜月(黑化三月七)
    • 绝区零 铃哲兄妹

国庆假期尾声,来个简单总结

  • D1:休息

    • 基本上都在玩游戏了,好不容易有这么长的连续游戏时间,能玩一天休息休息也不错,你说是吧。
  • D2:广州 CICF

    • 是最激动的一天,那天晚上直接没睡好,不过那天去到展子状态良好,和我一起的 @三月流 老师帮我打灯贼厉害!那天晚上回到家直接倒头就睡了。
  • D3:休息、调色修图
  • D4:珠海 AS

    • 这次是免票自由行进场的摄影,相较于广州大展子的确没这么容易蹲到想拍的角色,不过拉几位认识的 Coser 老师拍不太熟悉的作品和角色也是可以的,就当是学习了!现场还抓到了 BA 的铁道双子,我感觉拍的挺满意的。
  • D5:顺德探亲

    • 去外地探亲,也没忘记用 📷 记录自己的家人,一个机顶闪打跳闪就能得到不错的效果了。就是那天早上起晚了匆匆忙忙去高铁站,期间红绿灯全都是红灯感觉赶不上了,还好因天气原因列车晚点五分钟最后赶上了车,也算是非常幸运了。
  • D6:珠海 AS 中秋、赏月

    • 主要是去拍熟人 @灵音 和 @年梦 两位 Coser 老师,她们出“又甘又刻”组合。现场只抓了其他两位老师拍,摄影数量大于 Coser 了属于是,不过免费展一直都是这样,因为有一波人去中山 AS 了吧。
  • D7:中山 AS

    • 没申请自由行买票入场,自己摆灯阵,全程几乎都是我一个人在拉人拍,调整灯位,指导动作(期间隔壁的摄影大佬还不忘过来帮我看了看问题)最有意思的还是现场来了个询问接单的老师,我尽可能按照她想要的效果来,也算是距离正式接单更近一步了?
  • D8:休息、调色修图

    • 也就是写这篇日记的时候,虽说这篇日记的内容发布之前其实已经在朋友圈发过一次了,但这是后面继续细化后的版本。

关于这几天当天具体发生的事情,我有可能会在后面补上日记,并且附上当天拍摄的照片,前提是我先尽快返图调色完毕吧!

其实我还想把欠下的《2024 年度总结》补上,很明显在外的拍摄时间大于在家玩电脑的时间了呢,甚至整个假期连写代码的 IDE 都没打开过,突然打开那个界面感觉又变得有些陌生了起来...

1
2
3
...
5
奇趣音乐盒技术源于 Kico Player
Emmm,这里是歌词君