去年2月份的时候在思否刷到一个问题 👉 span的display为inline-block 和inline的时候对父级元素高度的影响?
当时就觉得很奇怪，以为是一些其他的CSS属性影响导致的，但是问题后面提到了参考链接里面具体说了原因，只不过OP没有很好的理解，我也没有很好的理解。
因为就算是IFC的问题，inline-block 和 inline 元素的表现应该是差不多的。但是实际情况并不是这样，只有 inline-block 是特殊的情况。

一年多的时光中有几次想捋清楚这个问题，但是又因为各种借口搁置了，今天终于逮起劲来准备解决掉这个疑惑。

以下是当时写的一个复现Demo，只会显示子元素是 inline-block 的 .container 会有高度（显示红色）。而子元素的 inline 和 block 的 .container 并没有高度，所以不会显示（蓝色和绿色）。

很奇怪是不是？

前些天在V站回复 远程工作中，如何避免 Burnout(过劳) 的时候提到了 Anthony Fu。突然发现了 AntFu 居然主持了一档播客节目 —— 尖不想寫扣 No Coding Today。
就开始慢慢听这档播客，现在听到了他们在聊 Vibe Coding，突然就解开了我关于 Vibe Coding 的一些疑虑。

在此之前，我对于 Vibe Coding 的看法是：

Vibe Coding 只需要关注需求实现，而不是具体代码实现。所以大部分的使用者会是非开发专业的用户。
就好像我们使用AI去文生图一样，通过调整 Prompt 使得 AI 的产出实现 or 靠近自己期望目标，并不关注 AI 是怎么生成和具体的内部实现。

所以我一直觉得 Vibe Coding 的模式并不适合专业开发者，但非常适合快速 MVP 或者一次性工具类项目的场景。基本上只需要几句话就能在本地快速实现一个 Demo 去和客户 or 业务方确认需求，然后再在这个基础上去扩写功能。或者说像 JSON 数据处理和分析、图片 & PDF 的合并压缩这样的一次性工具类小项目，而且可以随意调整各种配置，来获得一个符合预期的内容产出。这些原本需要交给一个实习生花费很多时间去处理的。

TIP
不推荐使用 reactive() 的泛型参数，因为处理了深层次 ref 解包的返回值与泛型参数的类型不同。

这段时间总算是得空可以把早些时候快速开发时期挖的坑填一下了，所以准备着手改造一下前人遗留下来的 useTable 这个组合式函数。
期望可以在使用 useTable 的时候可以正确推导出来 tableData 和 queryParams 对应的数据类型。

一开始的改造非常顺利，使用泛型可以正确的推导出来我需求的属性类型，直到我遇到了下面这两个TS告警：

Cannot assign type 'T[]' to type 'UnwrapRefSimple<T>[]'. ts(2322) 
不能将类型“T[]”分配给类型“UnwrapRefSimple<T>[]”。ts(2322)

Argument of type 'T' is not assignable to parameter of type 'UnwrapRefSimple<T>'.ts(2345)
类型“T”的参数不能赋给类型“UnwrapRefSimple<T>”的参数。ts(2345)

当然可以选择简单暴力的使用 as 来解决这个问题，但是我总觉得是不是有一些其他更好的方式来解决。

几个月前在V站看到一个帖子。OP想要把文件复制出来一份，并且保留文件早前的变更历史。之前我还不理解为什么OP要这样做，直到最近我在改造一个公共 utils 文件时也突然冒出来了这个想法。所以也是想尝试一下看看。

最近在业务中遇到一个使用 Day.js 创建 UTC 时间再转换时区的异常。纠正了长久以来一个自己对于 Date() 构造函数的误解。
展示一段示例代码，以便让大家来理解我的误解：

// 引入 dayjs 并扩展 utc
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
dayjs.extend(utc)

// 示例时间文本
const demoTimeStr = '2025-08-20 00:00:00'
// 使用 dayjs 创建一个 UTC 模式的 dayjs 实例
const utcDayjsInst = dayjs.utc(demoTimeStr)
// 输出格式化后的时间文本
console.log('utcDayjsInst1.format:', utcDayjsInst.format('YYYY-MM-DD HH:mm:ss'))
// utcDayjsInst1.format: 2025-08-20 00:00:00

// 使用示例时间文本创建一个 Date 实例
const demoDateInst = new Date(demoTimeStr)
// 使用 Date 实例创建一个 UTC 模式的 dayjs 实例
const utcDayjsInst2 = dayjs.utc(demoDateInst)
// 输出格式化后的时间文本
console.log('utcDayjsInst2.format:', utcDayjsInst2.format('YYYY-MM-DD HH:mm:ss'))
// utcDayjsInst2.format: 2025-08-19 16:00:00

可以非常直接明显的看到两个UTC模式下输出的时间文本是不一样的。

当然在事后写回顾的时候真的觉得自己特别的蠢 😂，但确实在当时困扰了我一段时间。

设置默认Git编辑器 core.editor（ commit message 编辑时） 和 序列编辑器 sequence.editor（比如 rebase 时）

git config --global core.editor "code --wait"
git config --global sequence.editor "code --wait"

长久以来，我一直都是用的 GitLens 来操作的 Git，特别是在 rebase 的时候，可视化的界面真的比原本的文本编辑好用太多。

最近因为 Github Copilot 高级请求限制的调整，计算了一下高级请求的用量，其实改版后的 Copilot 价格和 Cursor 已经持平。所以准备迁移到 Cursor 开发一段时间（Cursor 的辅助编程体验要好太多了）。

但由于太久没有调整过 VS Code 的配置项了，在同步配置项到 Cursor 之后发现 git rebase 时，没有按照预期打开 GitLens Interactive Rebase Editor 就是上边的动图中的交互编辑器。一直都是在 Cursor 里面以文本编辑的形式打开了 git-rebase-todo 的内容。

所以记录一下如何调整和启用。

业务中经常会遇到多行多列展示的表单需求，所以我们会搭配着栅格组件来实现。利用栅格化布局 span 超过 24 会自动折行的功能。

<el-form ref="form" :model="form" label-width="auto">
  <el-row :gutter="10">
    <el-col :span="12">
      <el-form-item label="字段A">
        <el-input v-model="form.a" placeholder="请输入"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span='12'>
      <el-form-item label="字段B">
        <el-input v-model="form.b" placeholder="请输入"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>

如果这样组合使用的同学，肯定会遇到过表单项错位的问题。因为 Element UI 是栅格组件默认是使用的 float 布局的，所以如果你的 <el-form-item> 元素高度不一致的话，就会出现下边截图中布局错位的问题。

字段C项并没有正确出现在字段A项的正下方，而是错开一列出现在了字段B的下方。

解决方式
在【运行和调试】面板右侧的 齿轮（⚙） 或者 更多（···） 按钮上右键，勾选【开始调试】即可。

昨天在思否遇到一个问题 👉 VSCode启动调试控件被不小心隐藏了，如何恢复显示？
开始以为是一个很初级的问题，就是问题主把【活动面板】中的【调式面板】隐藏了，不知道如何恢复显示了。

那么直接在【活动面板】中右键然后在弹出的菜单中勾选【运行和调试】就行了。

在内部系统开发时，经常会有业务部门会要求开发Excel导入/导出的功能。这种需求非常的常见，如果只是基础的需求开发起来也比较容易。只是有一些特殊的业务下会有对导出的工作表样式会有要求以及会有锁定的需求。

一般来说这些相关的功能都会让后端同学来帮忙。后端同学忙不过来的时候我们也会使用 SheetJS 这个库来处理，社区也有很多基于它的各种增强。但因为社区版的样式处理非常麻烦，也经常会看到有小伙伴在社群里面吐槽自定义样式不好做。所以项目后期就切换到了 ExcelJS，开发体感更加友好且支持的功能更多。

对于 ExcelJS 介绍的部分就不过多赘述了，社区里面有很多相关的文章可以自行检索。

这篇笔记主要是解决日常业务开发中遇到的几个常见需求，比如说：

• 单元格的下拉选择
• 单元格的数据校验
• 单元格和工作表的编辑保护

注意：文章中使用的 HBuilderX 版本为 4.24。

使用 HBX 创建的 uni-app 项目（非CLI创建），想要定义环境变量一直是一个让人非常困扰的事情。
官方的文档 关于环境变量的说明也非常暧昧不清。

通过关键词 环境变量 检索会出现5篇相关文档：

1. #配置环境变量 - vue.config.js | uni-app官网
2. #判断平台 - 开发环境和生产环境 | uni-app官网
3. #环境变量 - Vue2升3指南 | uni-app官网
4. 编辑器配置 | uni-app官网
5. 真机运行常见问题@run | uni-app官网

所以我早期定义环境变量就是使用的第一个文档链接中使用 DefinePlugin 来定义环境变量的方式

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('define')
      .tap(args => {
        args[0]['process.env'].MY_TEST = '"test"' // 注意需要多层引号包裹
        return args
      })
  }
}

注意：注意需要多层引号包裹自定义环境变量的值。

const test = process.env.MY_TEST // test

console.table(process.env)
// (索引)  值
// NODE_ENV  development
// VUE_APP_NAME  Test-Project
// VUE_APP_PLATFORM  h5
// BASE_URL  /
// MY_TEST  test

我这边在声明环境变量时，不需要使用 VUE_APP_ 这样的前缀，但是官方的示例中是有的。如果你无法在业务代码中正确获取到，可以尝试添加 VUE_APP_ 前缀（👉 VUE_APP_MY_TEST）