月底升级了 Copilot Pro+，月初额度重置，这几天可以放开用，想到什么就 vibe 一把。

我的博客跑在 Hexo 上很多年了。其实没什么大问题，就是每次看到那几百 MB 的 node_modules，心里总有点膈应——生成几百个静态 HTML，真的需要这么多依赖吗？但迁移到别的博客系统又懒得折腾，所以一直拖着。

这次干脆试试：能不能用 AI 一个下午撸一个 Rust 版的 Hexo？我的目标比较简单：生成跟原来一样的静态文件，兼容我现在用的主题就行。

我用的是 OpenCode + Opus 4.5。陆陆续续聊了一下午，产出了 hexo-rs。能用，但还有些边边角角的问题。

Vibe Coding 的工具和体会以后再写，这篇主要聊 hexo-rs 的实现和踩过的坑。

技术选型

EJS 模板引擎

Hexo 主题基本都用 EJS 模板——就是把 JavaScript 嵌到 HTML 里，跟 PHP 差不多。

用 QuickJS 跑 JS，通过 quick-js crate 调用。好处是不用依赖 Node.js，坏处是 Windows 上编不过（libquickjs-sys 挂了），所以暂时只支持 Linux 和 macOS。

其他

Markdown 用 pulldown-cmark，代码高亮用 syntect，本地服务器用 axum。都是常规选择，没什么特别的。

踩过的坑

HashMap 的坑

这个 bug 藏得很深。生成 tag 和 category 页面时，一开始用 HashMap 存文章分组：

let mut tags: HashMap<String, Vec<&Post>> = HashMap::new();

HashMap 迭代顺序不确定，每次生成的 HTML 可能不一样。页面看着没问题，但 diff 一下就发现乱了。改成 BTreeMap 就好了：

let mut tags: BTreeMap<String, Vec<&Post>> = BTreeMap::new();

Helper 函数

Hexo 有一堆 helper 函数：url_for、css、js、date 之类的。都得在 Rust 里实现一遍，然后塞进 QuickJS。

最烦的是 date。Hexo 用 Moment.js 的格式（YYYY-MM-DD），Rust 的 chrono 用 strftime（%Y-%m-%d）。得写个转换函数，挺无聊的活。

Partial 嵌套

EJS 的 partial 可以套娃，A 引用 B，B 又引用 C，变量还得一层层传下去。搞了个作用域栈，进 partial 压栈，出来弹栈。不难，但容易写错。

Vibe Coding 体感

代码 100% 是 AI 写的。我干的事：描述需求、review 代码、把报错贴给它让它改、偶尔拍板选方案。

像 EJS 模板引擎这种东西，自己从头写估计得半天，AI 几分钟就吐出来了。

但 AI 也挺蠢的：

• HashMap 那个 bug 它就没注意到，我提出界面上的变化它也没反应过来
• 一开始它写的 EJS parser 全是字符串 hardcode，丑得不行，我让它按 lexer -> AST 的套路重写了一遍
• 代码多了以后它会忘事，前面写过的逻辑后面又写一遍

但 AI 又确实非常强，我想到应该使用现在线上的 catcoding.me 来和新生成的内容一一对比，然后它就呼啦啦地一通操作把问题都找出来了，自己修改完。

使用

cargo binstall hexo-rs  # 或 cargo install hexo-rs

hexo-rs generate  # 生成静态文件
hexo-rs server    # 本地预览
hexo-rs clean     # 清理
hexo-rs new "标题"

局限

不支持 Hexo 插件，不支持 Stylus 编译（.styl 文件得先用 Node 编译好），Windows 也不行。

简单的博客应该够用。复杂主题可能会有兼容问题。

---

代码在这：github.com/chenyukang/hexo-rs

用 Hexo 的可以试试。有问题提 issue，我让 AI 来修 :)

这篇文章到底是人写的，还是 AI 写的？

11 - 元组转换为对象：将一个元组类型转换为对象类型，这个对象类型的 键/值 和元组中的元素对应。

10 - 元组转合集：请实现泛型 `TupleToUnion` ，它将返回元组的所有值的合集。

厌倦了静态网页的冰冷与单调？Live2D Widget 能将一个生动、可爱的看板娘轻松带入你的网站。只需一行代码，这个由 TypeScript 驱动的开源项目即可为博客、个人主页或任何网页赋予灵动的生

前言 2017年，一篇论文悄然发表，题为《Attention Is All You Need》。 当时没人预料到，这篇论文中提出的 Transformer 架构，会在短短几年内彻底改变人工智能的格局。

前言 你有没有想过，当你问 ChatGPT 一个问题时，它是如何"思考"并给出回答的？ 今天天气怎么样？——抱歉，我无法获取实时天气信息。 请用 JavaScript 写一个快速排序——几秒钟内，代码

一、需求来源 最近需要实现嵌套和吸顶Header滚动下的下拉刷新及上拉加载。最终实现基于 CustomScrollView 的刷新视图组件。 二、使用示例 三、源码 最后、总结 1、当页面比较复杂，需

Flutter 小部件，可轻松在 Flex 小部件（如列和行）或滚动视图中添加间隙。 Gap的核心原理是使用RenderObject自定义实现布局。 Gap 从源码看, 它提供了两个构造方法, Gap

Learn how to install, secure, and configure MySQL 8.0 on Ubuntu 24.04. Includes setting up root authentication, creating users, and enabling remote access.

手写 React KeepAlive 组件，用缓存和 display 显隐控制保留状态，避免卸载。适用于 Tab 切换等场景，提升性能与体验，核心基于 useState 与 useEffect 实现。

前言

在 React 开发中，Hooks 的出现彻底改变了逻辑复用的方式。它让我们能够将复杂的、可复用的逻辑从 UI 组件中抽离，实现真正的“关注点分离”。本文将分享 Hooks 的核心原则，并提供 4 个在真实业务场景中封装的实战案例。

一、 Hooks 核心

1. 概念理解

Hooks 本质上是将组件间共享的逻辑抽离并封装成的特殊函数。

2. 使用“红线”：规则与原理

• 命名规范：必须以 use 开头（如 useChat），这不仅是约定，也是静态检查工具（ESLint）识别 Hook 的依据。
• 调用位置：严禁在循环、条件判断或嵌套函数中调用 Hook。

底层原理： React 内部并不是通过“变量名”来记录 Hook 状态的，而是通过链表 。每次渲染时，React 严格依赖 Hook 的调用顺序来查找对应的状态。

注意： 如果在 if 语句中调用 Hook，一旦条件不成立导致某次渲染跳过了该 Hook，整个链表的指针就会错位，导致状态读取异常。

二、 实战：自定义 Hooks 封装

1. AI 场景：消息点赞/点踩逻辑 (useChatEvaluate)

在 AI 对话系统中，消息评价是通用功能。我们需要处理：状态切换（点赞 -> 取消点赞）、单选逻辑、以及异步接口调用。

import React, { useState } from 'react';

// 模拟接口
const public_evaluateMessage = async (params: any) => ({ data: true });

type EvaluateType = "GOOD" | "BAD" | "NONE";

export const useChatEvaluate = (initialType: EvaluateType = "NONE") => {
  const [ratingType, setRatingType] = useState<EvaluateType>(initialType);

  const evaluateMessage = async (contentId: number, type: "GOOD" | "BAD") => {
    let newEvaluateType: EvaluateType;

    // 逻辑：如果点击已选中的类型，则取消选中(NONE)；否则切换到新类型
    if (type === "GOOD") {
      newEvaluateType = ratingType === "GOOD" ? "NONE" : "GOOD";
    } else {
      newEvaluateType = ratingType === "BAD" ? "NONE" : "BAD";
    }

    try {
      const res = await public_evaluateMessage({
        contentId,
        ratingType: newEvaluateType,
        content: "",
      });

      if (res.data === true) {
        setRatingType(newEvaluateType);
      }
    } catch (error) {
      console.error("评价失败:", error);
    }
  };

  return { ratingType, evaluateMessage };
};

// 使用示例
const ChatMessage: React.FC<{ id: number }> = ({ id }) => {
  const { ratingType, evaluateMessage } = useChatEvaluate();
  return (
    <button onClick={() => evaluateMessage(id, "GOOD")}>
      {ratingType === "GOOD" ? "👍 已点赞" : "👍 点赞"}
    </button>
  );
};

---

2. 响应式布局：屏幕尺寸监听 (useMediaSize)

在响应式系统中，封装一个能根据窗口宽度自动切换“设备类型”的 Hook，可以极大地简化响应式开发。

import { useState, useEffect, useMemo } from 'react';

export enum MediaType {
  mobile = 'mobile',
  tablet = 'tablet',
  pc = 'pc',
}

const useMediaSize = (): MediaType => {
  const [width, setWidth] = useState<number>(globalThis.innerWidth);

  useEffect(() => {
    const handleWindowResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleWindowResize);
    // 记得清理事件监听
    return () => window.removeEventListener('resize', handleWindowResize);
  }, []);

  // 使用 useMemo 避免每次渲染都重新运行计算逻辑
  const media = useMemo(() => {
    if (width <= 640) return MediaType.mobile;
    if (width <= 768) return MediaType.tablet;
    return MediaType.pc;
  }, [width]);

  return media;
};

export default useMediaSize;

---

3. 性能优化：防抖与节流 Hook

A. 防抖 Hook (useDebounce)

常用于搜索框，防止用户快速输入时频繁触发请求。

import { useState, useEffect } from 'react';

function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // 关键：在下一次 useEffect 执行前清理上一次的定时器
    return () => clearTimeout(handler);
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

B. 节流 Hook (useThrottle)

常用于滚动加载、窗口缩放，确保在规定时间内只执行一次。

import { useState, useEffect, useRef } from 'react';

function useThrottle<T>(value: T, delay: number): T {
  const [throttledValue, setThrottledValue] = useState<T>(value);
  const lastExecuted = useRef<number>(Date.now());

  useEffect(() => {
    const now = Date.now();
    const remainingTime = delay - (now - lastExecuted.current);

    if (remainingTime <= 0) {
      // 立即执行
      setThrottledValue(value);
      lastExecuted.current = now;
    } else {
      // 设置定时器处理剩余时间
      const timer = setTimeout(() => {
        setThrottledValue(value);
        lastExecuted.current = Date.now();
      }, remainingTime);

      return () => clearTimeout(timer);
    }
  }, [value, delay]);

  return throttledValue;
}

export default useThrottle;

---

三、 总结：封装自定义 Hook 的心法

1. 抽离状态而非仅逻辑：如果一段逻辑只涉及纯函数计算，不需要 Hook；只有涉及 useState 或 useEffect 等状态管理时，才有必要封装 Hook。
2. 保持纯净：自定义 Hook 应该只关心逻辑，而不应该直接操作 DOM。
3. TS 类型保护：利用泛型 <T> 增强 Hook 的兼容性，让它能适配各种数据类型。

当PC端项目需要迁移到移动端时，你是否还在手动复制粘贴代码？今天分享一个我们团队自研的Vite插件，帮你实现跨仓库、跨技术栈的代码高效复用！

背景：从PC到移动端的迁移之痛

最近我们团队遇到了一个典型的企业级需求：将一个成熟的PC端医疗管理系统（MDM）迁移到移动端。听起来简单，但实际上却面临诸多挑战：

面临的挑战

1. 技术栈差异：PC端使用Element Plus，移动端需要Vant
2. 仓库隔离：PC端和移动端在不同的Git仓库
3. 代码复用：希望复用80%的业务逻辑，但UI组件完全不同
4. 维护同步：业务逻辑更新需要在两端同步

传统的解决方案要么是完全重写（成本高），要么是复制粘贴（维护噩梦）,或者是Monorepo (代码和依赖放一起)。我们需要的是一种既能复用核心逻辑，代码在不同仓库维护，又能灵活定制UI的解决方案。

解决方案：vite-plugin-code-reuse

基于这个需求，我们开发了 vite-plugin-code-reuse 插件，它的核心思想是：多仓库代码复用、智能替换、无缝集成。

插件核心能力

// 插件的核心配置结构
interface PluginConfig {
  repositories: RepositoryConfig[];     // 代码仓库配置
  repoImportMappings: RepoImportMappings[]; // 路径映射，主要是规避不同仓库路径别名冲突问题
  importReplacements: ImportReplacementConfig[]; // 导入替换
}

实战案例：医疗管理系统迁移

让我通过实际案例展示这个插件的效果。

项目背景

• PC端项目：xlian-web-mdm（Vue 3 + Element Plus + TypeScript）
• 移动端项目：新建的H5项目（Vue 3 + Vant + TypeScript）
• 目标：复用PC端80%的业务逻辑，100%替换UI组件

第一步：安装配置插件

npm install vite-plugin-code-reuse --save-dev

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import codeReusePlugin from 'vite-plugin-code-reuse'
import path from 'path'

export default defineConfig({
  plugins: [
    vue(),
    codeReusePlugin({
      // 1. 引入PC端代码仓库
      repositories: [
        {
          url: 'http://gitlab.xinglianhealth.com/web/mdm/xlian-web-mdm.git',
          branch: 'master',
          dir: 'mdm-pc'  // 本地存放目录
        }
      ],
      
      // 2. 修正路径别名映射,pc和移动都配置了“@”别名，需要各自引用正确的路径
      repoImportMappings: [
        {
          alias: '@',
          repoDir: 'mdm-pc',
          // PC端中的“@”别名还是引用pc端目录下的代码，但是需要排除路由、状态管理等路径，引用移动端的，因为路由和store不能存在两个
          ignorePatterns: ['src/router', 'src/store', 'src/axios']
        }
      ],
      
      // 3. 智能导入替换，pc端的部分组件无法复用时，可以做替换
      importReplacements: [
        // 场景1：组件替换（Element Plus → Vant）
        {
          pattern: /\/views\/MasterData\/components\/UploadFile\.vue$/,
          file: 'src/components/MbUpload.vue' // 移动端专用上传组件
        },
        {
          pattern: /\/views\/MasterData\/components\/TextInput\.vue$/,
          file: 'src/components/MbTextInput.vue' // 移动端输入框
        },
        
        // 场景2：复杂表单组件替换
        {
          pattern: /\/views\/MasterData\/components\/MasterForm\.vue$/,
          file: 'src/components/MbForm.vue' // 移动端表单封装
        },
        
        // 场景3：PC端特有功能在移动端隐藏
        {
          pattern: /\/views\/MasterData\/components\/HeaderFilter\/HeaderFilter\.vue$/,
          code: '<template></template>' // 移动端不需要复杂的表头筛选
        },
        
        // 场景4：UI库替换
        {
          pattern: /^@?element-plus/,
          resolve: path.resolve('src/components/ElementPlus.ts') // 重定向到兼容层
        }
      ]
    })
  ]
})

第二步：UI组件替换

// src/components/ElementPlus.ts - UI库兼容层
import { Button, Input, Select } from './ui-adaptor'

// 创建Element Plus到Vant的映射
export {
  ElButton: Button,
  ElInput: Input,
  ElSelect: Select,
  // ... 更多映射
}

// src/components/ui-adaptor.ts - UI库适配层,以Button组件为例

<template><van-button v-bind="$attrs" /></template>
<script>
const props = defineProps({
// 对element-plus Button Props做适配，比如size不支持"medium"，可以处理成其他的,相同的属性不用处理
})
</script>

第三步：复用业务逻辑组件

<!-- src/views/MasterData/PatientList.vue -->
<template>
  <!-- 复用PC端的模板结构，但使用移动端组件 -->
  <div class="patient-list">
    <!-- 搜索框（PC端是ElInput，自动替换为Vant Field） -->
    <van-field 
      v-model="searchKey"
      placeholder="搜索患者"
      @input="handleSearch"
    />
    
    <!-- 患者列表 -->
    <van-list 
      v-model:loading="loading"
      :finished="finished"
      @load="loadPatients"
    >
      <patient-item 
        v-for="patient in patients"
        :key="patient.id"
        :patient="patient"
        @click="handlePatientClick"
      />
    </van-list>
  </div>
</template>

<script setup lang="ts">
// 这里直接复用PC端的业务逻辑！
import { usePatientList } from '@/mdm-pc/src/views/MasterData/composables/usePatientList'

// 完全复用PC端的逻辑，包括：
// 1. 数据获取逻辑
// 2. 搜索过滤逻辑  
// 3. 分页逻辑
// 4. 事件处理逻辑
const {
  patients,
  loading,
  finished,
  searchKey,
  loadPatients,
  handleSearch,
  handlePatientClick
} = usePatientList()
</script>

<style scoped>
/* 移动端特有的样式 */
.patient-list {
  padding: 12px;
}
</style>

插件的核心实现原理

1. 代码仓库管理

vite build start开始时，自动拉取PC端仓库代码，如无更新不会重复拉取，默认只拉取一个commit，速度极快。

{
  url: 'http://gitlab.xinglianhealth.com/web/mdm/xlian-web-mdm.git', //仓库地址
  branch: 'master', // 仓库分支
  dir: 'mdm-pc'  // 本地存放目录
}

### 2. 智能导入替换，支持三种替换方式，任意选择

```typescript
interface ImportReplacementConfig {
    /**
     * 匹配模式（正则表达式字符串）
     */
    pattern: RegExp;
    /**
     * 替换方式：代码字符串
     */
    code?: string;
    /**
     * 替换方式：文件路径
     */
    file?: string;
    /**
     * 替换方式：重定向路径
     */
    resolve?: string;
}

3. 别名路径冲突映射修正，将被引用的仓库内部别名指向仓库内部，规避和外层别名的冲突

interface RepoImportMappings {
    /**
     * 路径别名
     */
    alias: string;
    /**
     * 冲突的仓库目录
     */
    repoDir: string;
    /**
     * 忽略列表（路径匹配时跳过），使用外出仓库别名解析
     */
    ignorePatterns?: string[];
}

实际效果对比

迁移前（传统方式）

├── 移动端项目
│   ├── src
│   │   ├── views
│   │   │   ├── PatientList.vue    ← 需要重写
│   │   │   ├── DoctorList.vue     ← 需要重写
│   │   │   └── ... (20+个页面)
│   │   └── components
│   │       ├── MbForm.vue         ← 需要重写
│   │       └── ... (50+个组件)
└── 工时：3-4人月

迁移后（使用插件）

├── 移动端项目
│   ├── mdm-pc/                    ← 自动引入的PC端代码
│   ├── src
│   │   ├── views
│   │   │   ├── PatientList.vue    ← 直接引用PC端PatientList组件，只对样式做适配覆盖
│   │   │   ├── DoctorList.vue     ← 直接引用PC端DoctorList组件，只对样式做适配覆
│   │   │   └── ... (复用80%)
│   │   └── components
│   │       ├── MbUploader.vue     ← 无法复用的组件，用移动端专用文件组件做替换
│   │       └── ... (只需写30%的组件)
└── 工时：1-1.5人月（节省60%+）

高级应用场景

场景1：多项目共享工具库

// 多个项目共享工具函数
codeReusePlugin({
  repositories: [
    {
      url: 'git@github.com:company/shared-utils.git',
      branch: 'main',
      dir: 'shared-utils'
    },
    ...
  ],
  importReplacements: [
    {
      pattern: /^@shared\/utils/,
      resolve: path.resolve('shared-utils/src')
    },
    ...
  ]
})

场景2：主题系统切换

// 根据环境切换主题
codeReusePlugin({
  importReplacements: [
    {
      pattern: /\/themes\/default/,
      file: process.env.NODE_ENV === 'mobile' 
        ? 'src/themes/mobile.vue'
        : 'src/themes/pc.vue'
    }
  ]
})

场景3：A/B测试版本

// A/B测试不同版本的组件
codeReusePlugin({
  importReplacements: [
    {
      pattern: /\/components\/CheckoutButton\.vue$/,
      file: Math.random() > 0.5 
        ? 'src/components/CheckoutButtonVariantA.vue'
        : 'src/components/CheckoutButtonVariantB.vue'
    }
  ]
})

总结

vite-plugin-code-reuse 插件为我们解决了跨项目代码复用的核心痛点：

🎯 核心价值

1. 大幅提升开发效率：节省60%+的开发时间
2. 保证代码一致性：业务逻辑完全一致，减少BUG
3. 降低维护成本：一处修改，多处生效
4. 灵活定制：UI层完全可定制，不影响核心逻辑

🚀 适用场景

• PC端到移动端的项目迁移
• 多项目共享组件库
• 微前端架构中的模块复用
• A/B测试和实验性功能

如果你也面临类似的多项目代码复用问题，不妨试试这个插件。项目已在GitHub开源，欢迎Star和贡献代码！

GitHub地址：vite-plugin-code-reuse

让代码复用变得简单，让开发效率飞起来！ 🚀

为什么输入 git commit 后，↑ 仍会翻到无关命令？终端中反复查找历史，本质是一种隐性低效。本文基于一份可直接使用的 Zsh + Powerlevel10k 配置，介绍如何通过前缀历史搜索精准

前言

在 React 18 的并发时代，Scheduler（调度器） 是实现非阻塞渲染的幕后英雄。它不只是 React 的一个模块，更是一个通用的、高性能的 JavaScript 任务调度库。它不仅让 React 任务可以“插队”，还让“长任务”不再阻塞浏览器 UI 渲染。

一、 核心概念：什么是 Scheduler？

Scheduler 是一个独立的包，它通过与 React 协调过程（Reconciliation）的紧密配合，实现了任务的可中断、可恢复、带优先级执行。

主要职责

1. 优先级管理：根据任务紧急程度（如用户点击 vs 数据预取）安排执行顺序。
2. 空闲时间利用：在浏览器每一帧的空闲时间处理不紧急的任务。
3. 防止主线程阻塞：通过“时间片（Time Slicing）”机制，避免长任务导致页面假死。

---

二、 Scheduler 的完整调度链路

当一个 setState 触发后，Scheduler 内部会经历以下精密流程：

1. 任务创建与通知

当状态更新时，React 不会立即执行 Render。它首先会创建一个 Update对象来记录这次变更，这个对象中包含这次更新所需的全部信息，例如更新后的状态值，Lane车道模型分配的任务优先级.

2. 优先级排序与队列维护

• 任务优先级排序： 创建更新后，react会调用scheduleUpdateOnFiber函数通知scheduler调度器有个一个新的任务需要调度，这时scheduler会对该任务确定一个优先级，以及过期时间（优先级越高，过期时间越短，表示越紧急）

• 队列维护： 接着scheduler会将该任务放入到循环调度中，scheduler对于任务循环调度在内部维护着两个队列，一个是立即执行队列taskQueue和延迟任务队列timeQueue，新任务会根据优先级进入到相应对列

  • timerQueue（延时任务队列） ：存放还未到开始时间的任务，按开始时间排序。
  • taskQueue（立即任务队列） ：存放已经就绪的任务，按过期时间排序。优先级越高，过期时间越短。

3. 时间片的开启：MessageChannel

将任务放入队列后，scheduler会调用requetHostCallback函数去请求浏览器在合适的时机去执行调度，该函数通过 MessageChannel对象中的port.postMessage 方法创建一个宏任务，浏览器在下一个宏任务时机触发 port.onmessage，并在这宏任务回调中启动 workLoop函数。

补充：Scheduler 会调用 requestHostCallback 请求浏览器调度。它没有选择 setTimeout，而是选择了 MessageChannel。

为什么选 MessageChannel？ setTimeout(fn, 0) 在浏览器中通常有 4ms 的最小延迟，且属于宏任务中执行时机较晚的。MessageChannel 的 port.postMessage 产生的宏任务执行时机更早，且能更精准地在浏览器渲染帧之间切入。

4. 工作循环：workLoop

• 在宏任务回调中，调度器会进入 workLoop。它会调用performUnitOfWork函数循环地处理Fiber节点，对比新旧节点的props、state，并从队列中取出最紧急的任务交给 React 执行。

• workLopp中会包含一个shouldYield函数中断检查函数，用于检查当前时间片是否耗尽以及是否有更高优先级的任务执行，如果有的话则会将主线程控制权交还给浏览器，以保证高优先级任务（如用户输入、动画）能及时响应。

---

5. 中断与恢复：shouldYield 的魔力

在 workLoop 执行过程中，每一项单元工作完成后，都会调用 shouldYield() 函数进行“路况检查”。

• 中断条件：如果当前时间片（通常为 5ms）耗尽，或者检测到有更紧急的用户交互（高优任务插队），shouldYield 返回 true。
• 状态保存：此时 React 会记录当前 workInProgress 树的位置，将控制权交还给浏览器。
• 任务恢复：Scheduler 会在下一个时间片通过 MessageChannel 再次触发，从记录的位置继续执行，从而实现可恢复。

6. 任务插队

如果在执行一个低优先级任务时，有高优先级任务加入（如用户突然点击按钮），Scheduler会中断当前的低优任务并记录该位置，先执行高优任务。等高优任务完成后，再重新执行或继续之前的低优任务

---

三、 补充

1. 执行时机对比：MessageChannel 确实在宏任务中非常快，但在某些极其特殊的情况下（如没有 MessageChannel 的旧环境），它会回退到 setTimeout。
2. 饥饿现象防止：如果一个低优先级任务一直被插队怎么办？Scheduler 通过过期时间解决。一旦任务过期，它会从 taskQueue 中被提升为同步任务，强制执行。

希望监控 qiankun 中子应用的内存使用情况（包括 JS 堆内存、DOM 占用、资源泄漏等），核心思路是「主应用统一监控 + 子应用自主上报 + 浏览器原生 API 采集 + 异常告警」，结合 q

一：前言 在前三篇文章中，已完成配置化 CRUD 体系的核心铺垫 —— 通过动态表单组件避免了重复编写表单模板，用搜索重置组件实现了列表筛选的统一封装，再借助 useTable Hooks 搞定了列表

在 Web 开发的演进史中，从早期的多页应用（MPA）到现代的单页应用（SPA），我们见证了前端工程师角色的巨大转变。曾几何时，前端开发被戏称为“切图仔”，路由和页面跳转的控制权完全掌握在后端手中。每

兼容性问题解决方案汇总

一、兼容到chrome86+

1.antd4 向下兼容方案

1、文档流中的样式和位置问题，主入口app.vue添加如下内容, 解决方案：

App组件容易漏，会导致message提示无法显示，需要注意～

import { ConfigProvider, App } from 'ant-design-vue';
import { StyleProvider, legacyLogicalPropertiesTransformer } from 'ant-design-vue/es/_util/cssinjs';
        <StyleProvider
          hash-priority="high"
          :prefix="configProviderPrefixCls"
          :transformers="[legacyLogicalPropertiesTransformer]"
        >
          <a-style-provider
            hash-priority="high"
            :prefix="configProviderPrefixCls"
            :transformers="[legacyLogicalPropertiesTransformer]"
          >
            <App>              
            <RouterView />
            </App>
          </a-style-provider>
        </StyleProvider>

2、  全局弹出、全局提示等脱离文档流的位置问题。 解决方案：

import { App } from 'ant-design-vue';
使用 const { modal } = App.useApp(); 替换Modal.confirm等，message alert 同理
 

 

3、  前缀是antd,没有被prefix前缀处理到的组件位置问题（如画布节点） 解决方案：采用问题一的解决方案，把画布自定义节点包裹一次

4、  使用creatApp或者creatVnode创建的模块，脱离了vue的上下文文档流

解决方案：采用问题一的解决方案，把节点包裹一次

样式及js兼容修改

1.建议初始化配置时在vite.config中加上如下内容：

build:{
    ... 原来的内容,
    // js最低兼容的浏览器版本
    target: ['chrome86', 'edge88', 'firefox78', 'safari14'],
    // 禁用 CSS 代码压缩，防止 top/right/bottom/left 被转换成 inset
     cssMinify: false
 }
 

本地启动报错

1.集成unocss出现报错问题

 

注意⚠️：   如果使用了unocss或taiwindcss覆盖antd原有的样式会失效，兼容后antd的样式等级会提高。我采取的方法比较笨但可靠，在覆盖的css类名后面添加‘!’,编译后会给unocss或taiwindcss的css后面添加！important。这样能解决！

position导致的样式失效

360极速版position导致的样式失效 如果同时有top：0；left：0，bottom：0；right：0；vite会打包成一个insert：0，但是360极速版不支持该属性加上width：100%和height：100%

二、兼容到chrome68+

在兼容chrome86的基础上添加如下配置

全程基于项目根目录执行操作，核心依赖为 Vite5 官方兼容插件@vitejs/plugin-legacy+ API 补全库core-js@3，所有配置可直接复制使用，按步骤执行即可完成兼容。

前提：Chrome68 支持 ES2017，缺失 ES2018+ 新语法（?.、?? 等）和部分全局 API，兼容核心是语法转译 + 自动 polyfill 注入 + 适配构建目标。

步骤 1：安装核心兼容依赖

# npm 安装
npm install @vitejs/plugin-legacy core-js @babel/core -D

步骤 2：配置 browserslist（统一所有工具的兼容目标）

在项目根目录的package.json中新增browserslist字段，统一 Vite、Babel、PostCSS 的浏览器兼容规则，仅指定Chrome 68即可，修改后如下：

{
  "name": "your-vue-project", // 你的项目名
  "version": "0.0.0",
  "browserslist": ["Chrome 68"], // 新增这行，统一兼容目标
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  // 保留项目原有dependencies、devDependencies等配置...
}

步骤 3：修改 Vite 核心配置（vite.config.js/ts）

这是兼容的核心步骤，修改项目根目录的vite.config.js（ts 项目为vite.config.ts，配置完全一致），完成插件注册 + 构建目标降级 + CSS 适配，直接替换原有配置即可：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy' // 1. 引入legacy兼容插件

// Vite5 核心配置
export default defineConfig({
  plugins: [
    vue(), // Vue3 插件
    // 2. 配置legacy插件，自动转译语法+注入polyfill
    legacy({
      targets: 'Chrome 68', // 明确指定兼容Chrome68（也可读取browserslist）
      polyfills: true, // 开启自动polyfill注入（基于core-js@3）
      renderLegacyChunks: true, // 生成旧浏览器兼容产物
      modernPolyfills: true // 现代浏览器兜底polyfill
    })
  ],
  build: {
    target: 'es2017', // 3. 构建目标降级为Chrome68支持的ES2017（Vite5默认es2020）
    cssTarget: 'chrome68', // 4. CSS适配Chrome68，避免生成不兼容CSS语法
    minify: 'terser', // 可选：用terser压缩，避免新压缩特性导致兼容问题
    terserOptions: {
      compress: { drop_console: false } // 可选：保留console，方便调试
    }
  }
})

步骤 4：Vue3.3.0 兼容兜底（无额外配置，仅 2 个避坑点）

Vue3 本身已放弃 IE 但完全兼容 Chrome68，无需修改任何 Vue 相关配置，只需注意 2 个细节即可：

1. 代码中避免使用 Vue3 的实验性特性（如defineModel高级用法、props解构的新特性），若使用，legacy 插件会自动转译；
2. Vue3 模板编译产物为 ES5 级别，Chrome68 可直接解析，无需修改@vitejs/plugin-vue的编译配置。

步骤 5：执行生产构建（兼容逻辑仅对构建生效）

Vite 的 legacy 兼容处理仅在生产构建时生效（开发环境 Chrome68 已支持 ES 模块，可直接运行npm run dev开发，无需额外处理，本地还是无法访问的！！！！！），执行构建命令生成兼容包：

# 生成兼容Chrome68的生产包，输出到项目根目录的dist文件夹
npm run build

构建完成后，dist目录会自动生成 2 类产物，且index.html内置浏览器嗅探逻辑：Chrome68 会自动加载兼容产物 + polyfill，高版本浏览器加载现代产物，无需手动判断。

注意： 本地无法访问，看不到页面呈现，只有部署后才能打开！！！！！！！

步骤 6：Chrome68 兼容性测试（2 种便捷方法，无需安装旧浏览器）

方法 1：Chrome 开发者工具模拟（推荐，最快）

1. 打开新版 Chrome 浏览器，运行npm run preview启动预览服务，打开项目预览地址；
2. 按F12打开开发者工具 → 点击右上角「⋮」→ 更多工具 → 设备模拟；
3. 左上角设备下拉框选择「自定义」→ 输入Chrome 68，刷新页面即可模拟运行。

方法 2：本地启静态服务测试

1. 全局安装静态服务工具serve：npm install serve -g；
2. 项目根目录执行：serve dist，会生成本地访问地址（如http://localhost:3000）；
3. 在模拟的 Chrome68 中访问该地址，验证页面渲染、按钮点击、接口请求等交互是否正常。

步骤 7：常见兼容问题解决（按需处理）

若测试时出现报错 / 样式错乱，按以下场景针对性解决，均为 Chrome68 兼容的高频问题：

问题 1：第三方依赖未被转译（如 Element Plus/axios 用了 ES2018 + 语法）

Vite5 默认不转译node_modules，需在vite.config.js中强制指定转译的依赖，修改后如下：

export default defineConfig({
  // 保留原有配置...
  optimizeDeps: {
    include: ['element-plus', 'axios'] // 按需添加需要转译的第三方依赖
  },
  build: {
    // 保留原有配置...
    commonjsOptions: {
      include: [/element-plus/, /axios/, /node_modules/] // 强制转为CommonJS格式
    }
  }
})

问题 2：个别全局 API 未被 polyfill（如 URLSearchParams/fetch）

Chrome68 已支持大部分 API，若遇到缺失，在 src/main.js/ts 中手动引入即可：

// src/main.js（Vue入口文件）
import 'core-js/es/url-search-params' // 手动注入URLSearchParams polyfill
import 'core-js/es/fetch' // 按需注入fetch polyfill
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

问题 3：CSS 样式错乱（如高级 CSS 选择器 / 特性）

Chrome68 支持基础 CSS 变量 / Flex 布局，样式问题多为第三方 CSS 用了高级特性，安装postcss-preset-env兜底：

1. 安装依赖：pnpm add postcss-preset-env -D
2. 项目根目录新建postcss.config.js，添加配置：

module.exports = {
  plugins: [
    require('postcss-preset-env')({
      browsers: 'Chrome 68', // 适配Chrome68
      features: { 'custom-properties': { preserve: true } } // 保留CSS变量
    })
  ]
}

---

核心步骤总结

1. 安装@vitejs/plugin-legacy@5.x + core-js@3 + @babel/core三大核心依赖；
2. package.json中配置browserslist: ["Chrome 68"]统一兼容目标；
3. Vite 配置中注册 legacy 插件，降级build.target为 es2017、cssTarget为 chrome68；
4. 执行npm run build生成兼容包，通过 Chrome 开发者工具模拟 Chrome68 测试；
5. 按需解决第三方依赖转译、手动 polyfill、CSS 适配等问题。

 

一、引言

当前低代码组件的功能框架已趋于稳定，而业务侧的需求设计却持续迭代、不断涌现。要落地各类个性化需求，正需要我们秉持‘人有多大胆，地有多大产’的探索精神，勇于构思、大胆尝试。比如低代码列表中，针对字段内容过多的问题，就需要自己开发部分展示的功能。

二、使用场景

1、列表只展示前三行，剩余的放在查看按钮内，弹框展示

实现思路：借助列表字段的自定义内容-复杂模式，实现设计稿里的展示效果，在页面加载事件里监听点击事件，实现弹窗效果

let pileList = rowData.row.AccountList || [];
let resStrShow = '';
let resStrHide = '';
    for (let id = 0; id < pileList.length; id++) {
        let itemShow = "";
       ...
        if (rowData.row.AutoChargeType == '2') {//企业总账户
            if (pileList.length > 1) {
                itemShow += `${pileList[id].BusUnitAttrCompanyName}:`;
            }
            let BusUnitOrGroupBalance = Funcs.FormatDecimal(pileList[id]?.BusUnitOrGroupBalance, 2, "", ".").replace(/,/g, '');
            itemShow += `企业现金余额${BusUnitOrGroupBalance}元`;

        }
       ...
        }
        if (id < 3) {
            if (resStrShow) {
                resStrShow += '</br>';
            }
            resStrShow += itemShow;
        }
        if (resStrHide) {
            resStrHide += '</br>';
        }
        resStrHide += itemShow;

    }
if (pileList.length > 3) {

    let tipQuestion = `<div style="opacity: 1;    margin-top: 2px;" instancecode=""tabindex="1">`
        + `<span>`
        + `<span class="qiestionIcon" style="position: relative;display: flex;justify-content:  flex-start;">`
        + `<i class="material-icons" style="display:none" aria-hidden="true" role="presentation">help_outline</i>`
        + `<div  class="viewAll"
  style="
  padding:0px 7px;
  border-radius:10px;
  border:1px solid #D9D9D9;
  font-family:AlibabaPuHuiTi;
  font-size:12px;
  cursor: pointer;
  color:#3656FF;"
  >查看全部(${pileList.length})</div>`
        + `<div style="visibility:hidden;position: absolute; width: 560px; height: auto; left: 0px; top: -8px; box-sizing: content-box; padding-top: 8px;margin-left:20px;">`
        + `<span style="" class="resStrHide">${resStrHide}</span>`

        + `</div>`
        + `</span>`
        + `</span>`
        + `</div>`;

    return `<div   style="position: relative; display: inline-flex;flex-direction: column;">
          <div>${resStrShow}</div>          
          ${tipQuestion}
</div>`;

} else {
    return resStrShow;
}

js代码，点击实现弹框效果：

    var content = document.querySelector(`.UIControl_VehicleSettingList_Ecms_New`);
    content.addEventListener('click', function (event) {
        if (event.target.className == "viewAll") {
            const nextSiblingElement = event.target.nextElementSibling;
            if (nextSiblingElement) {
                const targetSpan = nextSiblingElement.querySelector('span.resStrHide');
                if (targetSpan) {
                    LocalVars.Variable_viewAll = targetSpan.innerHTML//把全部内容赋值给弹窗变量
                    Widget.fasr_dialog_viewALLNew.showDialog()//展示弹框
                
                }
            }
        }   
    });

2、列表只展示前三个，剩余的放在悬浮气泡里展示

实现思路：借助列表字段的自定义内容-复杂模式，实现设计稿里的展示效果，在页面加载事件里监听mousemove事件，实现气泡效果

let PileRangeDesc = rowData.row.PileRangeDesc || '';
let pileList = PileRangeDesc.split(',') || [];

let resStrShow = '';
let resStrHide = '';

for (let id = 0; id < pileList.length; id++) {
    if (id < 3) {
        if (resStrShow) {
            resStrShow += '、';
        }
        resStrShow += pileList[id];
    } else {
        if (resStrHide) {
            resStrHide += '、';
        }
        resStrHide += pileList[id]
    }
}

if (pileList.length > 3) {

    let tipQuestion = `<div style="opacity: 1;margin-left:7px" instancecode=""tabindex="1">`
        + `<span>`
        + `<span class="qiestionIcon" style="position: relative;display: flex;justify-content: center;">`
        + `<i class="material-icons" style="display:none" aria-hidden="true" role="presentation">help_outline</i>`
        + `<div 
  style="
  padding:0px 7px;
  border-radius:10px;
  border:1px solid #D9D9D9;
  font-family:AlibabaPuHuiTi;
  font-size:12px;
  color:#3656FF;"
  >+${pileList.length - 3}</div>`
        + `<div style="visibility:hidden;position: absolute; width: 560px; height: auto; left: 0px; top: -8px; box-sizing: content-box; padding-top: 8px;margin-left:20px;">`
        + `<div class="q-tooltip--style q-position-engine arrow-top question-tooltip" style="--q-transition-duration: 30oms; --left: 27px; --top: false; -px;width:auto;
    padding: 16px 20px;
    background:#fff;
    font-family: AlibabaPuHuiTi;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    border-radius: 12px;
    color: rgba(0,0,0,0.8);
    max-width: 560px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    margin-bottom:0;">`
        + `<span style="width:100%;
  display: inline-block;
  white-space: pre-wrap;">${resStrHide}</span>`
        + `<div style="width:12px;
  position:absolute;
  visibility:visible;
  bottom:-12px;
  height:12px;
  left:calc(50% - 6px);
  background-color:#fff;
  margin-top:0;
  clip-path: polygon(0 0,100% 0, 50% 100%);"></div>`
        + `</div>`
        + `</div>`
        + `</span>`
        + `</span>`
        + `</div>`;

    return `<div   style="position: relative; display: inline-flex;align-items:center">
          <div>${resStrShow}</div>          
          ${tipQuestion}
</div>`;

} else {
    return resStrShow;
}

js代码，实现气泡效果：

    var content = document.querySelector(`.${LocalVars.InParam_UISign}`);
    content.addEventListener('mousemove', function (event) {
        let table = content.querySelector(".fasr_mixview");
        if (table) {
            let tipElems = table.getElementsByClassName("question-tooltip");
            if (tipElems.length > 0) {
                for (let id in tipElems) {
                    if (tipElems[id].style) {
                        let parentNode = tipElems[id].parentNode;
                        // 清除TD提示框 
                        let signParentNode = parentNode;
                        for (let i = 0; i < 10; i++) {
                            if (signParentNode && signParentNode.tagName === 'TD') {
                                signParentNode.title = '';
                                break;
                            }
                            signParentNode = signParentNode.parentNode;
                        }

                        let position = parentNode.getBoundingClientRect()
                        let pX = position.left;
                        let pY = position.top;
                        let height = tipElems[id].offsetHeight
                        let width = tipElems[id].offsetWidth
                        // tipElems[id].style.left = pX - width / 2 - 14.3 + 'px';
                        tipElems[id].style.left = pX - width / 2 - 4 + 'px';
                        tipElems[id].style.top = pY - height - 7 + 'px';
                    }
                }
            }
        }
    });

3、列表格式化时间/字段内容

如果后台给我们的数据未经格式化，需要前端再次处理，我们除了在action里的返回值自定义扩展里面进行修改外，也可以利用列表字段的自定义设置，更加方便

例如，格式化时间：

return Funcs.FormatDateTime(rowData.row.LastModifyTime, 'yyyy-MM-dd HH:mm:ss');

格式化字段，没有值时展示‘--’

return `<div id="div">${rowData.value?rowData.value:'--'}</div>`

4、列表字段不固定，根据某个值动态展示部分字段，隐藏部分字段

实现思路：设置pc查询方案延迟加载，在onLoaded中，根据当前的模式处理当前方案下需要展示的字段，手动触发查询

 setTimeout(() => {
        let Scheme = Widget.fasr_mixed_view.getScheme()
            let ListViewSet = JSON.parse(Scheme.ListViewSet);
            if( LocalVars.Variable_mdoe=="1"){
               ListViewSet.displayColumns = ListViewSet.displayColumns.filter(item => (item.value != "AccountDesc"&&item.value != "AutoChargeTypeName"))
            }
            if( LocalVars.Variable_mdoe=="2"|| LocalVars.Variable_mdoe=="3"|| LocalVars.Variable_mdoe=="4"){
               ListViewSet.displayColumns = ListViewSet.displayColumns.filter(item => (item.value != "CarUseCustMobile"))
            }
                 
            Scheme.ListViewSet = JSON.stringify(ListViewSet)
            Widget.fasr_mixed_view.setScheme(Scheme)
     
    }, 0)

5、列表的查询条件不固定，根据某个值动态展示隐藏

实现思路:我们可以利用js操作原始dom，对条件进行显示隐藏，简单实现这个需求（低代码提供了硬写的方案，但是很繁琐）

 if(LocalVars.Variable_PVMismatchSwitch == "0"){
   document.querySelector(".Page_DriverManageListALLForNew .el-col-6:last-of-type").style.display = "none";
   }else{
    document.querySelector(".Page_DriverManageListALLForNew .el-col-6:last-of-type").style.display = "block";
   }

6、列表某些场景下列表每页的条数不允许切换，始终保持每页10条

实现思路：通过修改元素的行内样式，让这个元素彻底无法响应任何鼠标 / 触摸交互事件

 document.querySelector(".t-prefab-pagination__perfective-page-size").style.pointerEvents='none';

7、列表按钮点击触发服务响应缓慢，超过3秒，为防止白屏手动弹出loading

低代码提供了Funcs.ShowLoading()，但是不生效，考虑使用原生dom实现

    let eload1 = window.top.document.getElementById('tff_page_loading');
   eload1 && (eload1.style.display = "block");//显示
   eload1 && (eload1.style.display = "none");//隐藏

8、列表按钮触发后端服务每次只能校验一个，批量操作下需等待所有检查完成后才能进行下一步

实现思路：Promise.all()

  const checkPromises = [];
                let hasBoundVehicle = false;
                let CarLicenseArr = [];

                // 1. 检查所有车辆是否被绑定
                selectedRowDatas.forEach(item => {
                    if (item.VehiclesID) {
                        checkPromises.push(
                            Action.Action_CheckVehicleIfBindMembers_Ecms({ VehicleID: item.VehiclesID })
                                .then(result => {
                                    const hasCarObj = JSON.parse(result.Record.Data);
                                    if (hasCarObj.data) {
                                        CarLicenseArr.push(item.CarLicense);
                                        hasBoundVehicle = true;
                                    }
                                })
                        );
                    }
                });
                // 2. 等待所有检查完成
                Promise.all(checkPromises).then(() => {
                    debugger
                    var loadingMask = document.querySelector("#mvcFrameDiv")?.querySelector(".web-loading_mask");
                    loadingMask && (loadingMask.style.display = "none");
                    console.log(CarLicenseArr)
                    let tipI = ""
                    if (CarLicenseArr.length) {
                        CarLicenseArr.map(item => {
                            tipI += item + "、"
                        });
                        tipI = "当前车辆" + tipI.substring(0, tipI.length - 1) + "已被司机绑定，删除后司机将无法使用企业账户为该车辆充电，确认要删除吗？";
                        Funcs.Confirm(confirm, tipI, function () {
                            VehicleInformationNewUnbind()
                        })
                    } else {
                        Funcs.Confirm(confirm, confirmInfo, function () {
                            VehicleInformationNewUnbind()

                        })
                    }
                });

9、移动端列表没有数据时‘暂无数据’不展示

后端接口返回的count值不对，低代码模版根据count值决定是否展示暂无数据

10、移动端app框架内页面修改表头标题

需写在onloading方法里

 if(TFF.common.ctx.CLIENT_TYPE.TeldApp == TFF.common.ctx.getClientType()){

 window.pageNameTerm = ''
window.pageTitle = '添加司机'

if(LocalVars.InParam_FormState ==1){
window.pageTitle  ='编辑司机'
}
  TFF.jsdk.ready({ url: '', sgUrlPrefix: '' }, () => {
     window.envApi.setTitle({
            "title" : window.pageTitle ,
            success : function (res) {
             
            }
        })
            });

}