调色板自定义主题颜色  
**关键方案**
- [1] 重新定义`element-plus`的css

```json
$--colors: (
  "primary": (
    "base": #11C974,
  ),
  "success": (
    "base": #11C974,
  ),
  "warning": (
    "base": #EBA826,
  ),
  "danger": (
    "base": #F77062,
  ),
  "error": (
    "base": #f5222d,
  ),
);


  @forward "element-plus/theme-chalk/src/common/var.scss" with (
    $colors: $--colors !default,
  );


```


# 在vite中配置
> `vite.config.js`
``` json
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "src/assets/styles/element/index.scss";
          @use "src/assets/styles/element/dark.index.scss";
          `,
        },
      },
    },
```
# 核心代码
```JavaScript
/** 变量前缀 */
const PRE = '--el-color-primary';
/** 浅色变量前缀 */
const PRE_LIGHT = `${PRE}-light`;
/** 深色变量前缀 */
const PRE_DARK = `${PRE}-dark`;
/** 色阶 */
const Levels = [3, 5, 7, 8, 9];

/** 白色 */
const WHITE = '#FFFFFF';
/** 黑色 */
const BLACK = '#000000';

export {
  PRE, PRE_LIGHT, PRE_DARK, Levels, WHITE, BLACK,
};
```
```JavaScript
import { onBeforeMount } from 'vue';
import {
  PRE, PRE_DARK, PRE_LIGHT, Levels, WHITE, BLACK,
} from './element';

const html = document.documentElement;

/**
 * 混合颜色
 */
const mix = (color1, color2, weight) => {
  // eslint-disable-next-line no-param-reassign
  weight = Math.max(Math.min(Number(weight), 1), 0);
  const r1 = parseInt(color1.substring(1, 3), 16);
  const g1 = parseInt(color1.substring(3, 5), 16);
  const b1 = parseInt(color1.substring(5, 7), 16);
  const r2 = parseInt(color2.substring(1, 3), 16);
  const g2 = parseInt(color2.substring(3, 5), 16);
  const b2 = parseInt(color2.substring(5, 7), 16);
  const r = Math.round(r1 * (1 - weight) + r2 * weight);
  const g = Math.round(g1 * (1 - weight) + g2 * weight);
  const b = Math.round(b1 * (1 - weight) + b2 * weight);
  // eslint-disable-next-line no-underscore-dangle
  const _r = (`0${(r || 0).toString(16)}`).slice(-2);
  // eslint-disable-next-line no-underscore-dangle
  const _g = (`0${(g || 0).toString(16)}`).slice(-2);
  // eslint-disable-next-line no-underscore-dangle
  const _b = (`0${(b || 0).toString(16)}`).slice(-2);
  return `#${_r}${_g}${_b}`;
};

/**
 * 更换颜色的方法
 * @param color 颜色
 */
const changeTheme = (color) => {
  if (!color) {
    console.warn('未获取到颜色的值');
    return;
  }
  // 设置主要颜色变量 --el-color-primary
  html.style.setProperty(PRE, color);
  // 循环设置色阶颜色
  // --el-color-primary-light-${level}
  Levels.forEach((level) => {
    html.style.setProperty(`${PRE_LIGHT}-${level}`, mix(color, BLACK, 1 * 0.1));
  });
  // 设置主要暗色
  // --el-color-primary-dark-2
  const dark = mix(color, BLACK, 0.2);
  html.style.setProperty(`${PRE_DARK}-2`, dark);
  localStorage.setItem('theme-color', color);
};

// eslint-disable-next-line import/prefer-default-export
export function useElementPlusTheme(color) {
  onBeforeMount(() => {
    changeTheme(color);
  });

  return {
    changeTheme,
  };
}

```

# Vue中使用调色板自定义Element Plus主题色

## 背景介绍

在使用Element Plus开发Vue项目时，我们经常需要自定义主题色以满足项目的设计需求。本文将介绍如何通过JavaScript动态修改Element Plus的主题色，实现灵活的主题定制功能。

## 实现原理

Element Plus的主题系统是基于CSS变量实现的。通过修改这些CSS变量，我们可以动态更改组件的主题色。主要的变量包括：

- `--el-color-primary`: 主题色
- `--el-color-primary-light-{n}`: 主题色的亮色变体（n可为3,5,7,8,9）
- `--el-color-primary-dark-2`: 主题色的暗色变体

## 核心代码实现

### 1. 定义常量

首先，我们定义必要的常量：

```javascript
const PRE = '--el-color-primary';
const PRE_LIGHT = `${PRE}-light`;
const PRE_DARK = `${PRE}-dark`;
const Levels = [3, 5, 7, 8, 9];
const WHITE = '#FFFFFF';
const BLACK = '#000000';
```

### 2. 颜色混合函数

实现一个颜色混合函数，用于生成不同明度的颜色：

```javascript
const mix = (color1, color2, weight) => {
    weight = Math.max(Math.min(Number(weight), 1), 0);
    
    // 将16进制颜色转换为RGB
    const r1 = parseInt(color1.substring(1, 3), 16);
    const g1 = parseInt(color1.substring(3, 5), 16);
    const b1 = parseInt(color1.substring(5, 7), 16);
    const r2 = parseInt(color2.substring(1, 3), 16);
    const g2 = parseInt(color2.substring(3, 5), 16);
    const b2 = parseInt(color2.substring(5, 7), 16);
    
    // 计算混合后的RGB值
    const r = Math.round(r1 * (1 - weight) + r2 * weight);
    const g = Math.round(g1 * (1 - weight) + g2 * weight);
    const b = Math.round(b1 * (1 - weight) + b2 * weight);
    
    // 转换回16进制
    const _r = (`0${(r || 0).toString(16)}`).slice(-2);
    const _g = (`0${(g || 0).toString(16)}`).slice(-2);
    const _b = (`0${(b || 0).toString(16)}`).slice(-2);
    
    return `#${_r}${_g}${_b}`;
};
```

### 3. 主题切换函数

实现主题切换的核心函数：

```javascript
const changeTheme = (color) => {
    if (!color) {
        console.warn('未获取到颜色的值');
        return;
    }
    
    // 设置主题色
    document.documentElement.style.setProperty(PRE, color);
    
    // 设置不同亮度的主题色
    Levels.forEach((level) => {
        document.documentElement.style.setProperty(
            `${PRE_LIGHT}-${level}`,
            mix(color, BLACK, 1 * 0.1)
        );
    });
    
    // 设置暗色主题色
    const dark = mix(color, BLACK, 0.2);
    document.documentElement.style.setProperty(`${PRE_DARK}-2`, dark);
    
    // 保存主题色到本地存储
    localStorage.setItem('theme-color', color);
};
```

### 4. Vue组合式API封装

将功能封装为Vue组合式API：

```javascript
export function useElementPlusTheme(color) {
    onBeforeMount(() => {
        changeTheme(color);
    });
    
    return {
        changeTheme,
    };
}
```

## 使用方法

在Vue组件中使用：

```javascript
import { useElementPlusTheme } from './theme';

export default {
    setup() {
        // 初始化主题色
        const { changeTheme } = useElementPlusTheme('#409EFF');
        
        // 动态修改主题色
        const updateTheme = (newColor) => {
            changeTheme(newColor);
        };
        
        return {
            updateTheme
        };
    }
};
```

## 实现效果

通过上述实现，我们可以：

1. 在项目初始化时设置默认主题色
2. 动态切换主题色
3. 自动生成对应的明暗变体
4. 持久化保存主题色设置

## 注意事项

1. 颜色值必须是16进制格式
2. 需要确保提供的颜色值有效
3. 建议在颜色选择器中使用此功能
4. 注意浏览器兼容性，确保支持CSS变量

## 总结

这种实现方式的优点是：
- 无需重新编译CSS
- 可以实现实时预览
- 便于集成到现有项目
- 性能开销小

缺点是：
- 需要注意浏览器兼容性
- 颜色计算可能存在精度误差

这个解决方案适合需要动态主题切换的Element Plus项目，能够满足大多数定制化主题的需求。

基于Element-plus在vue3中进行主题切换案例

使用场景建议  
- [1] 需要发布新闻、通知、产品说明文档、上传UI给的图、视频等推荐使用`editor` [官网wangeditor](https://www.wangeditor.com/)
- [2] 需要回复信息、编写论坛内容等，推荐使用`quill`[quill官网](https://quilljs.com/)

# 解决与`tailwindcss`样式冲突
**使用`editor`会有自己的css, 在editor富文本编辑器中正常,预览或者发布之后就失去一些css效果**
> 使用情况  
> 先引入`tailwind.css`  
> 在引入`editor.snow.css`  
# quill
在`quill`中自定义模块
## 自定义图片上传
```TypeScript
import Quill from 'quill';

interface ImageUploadModuleOptions {
  uploadCallback: (file: File) => Promise<{
    img: string;
    index: number
  }>;
}

export default class ImageUploadModule {
  private quill: Quill;
  private uploadCallback: (file: File) => Promise<{
    img: string;
    index: number
  }>;

  constructor(quill: Quill, options: ImageUploadModuleOptions) {
    this.quill = quill;
    this.uploadCallback = options.uploadCallback;
    
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.style.display = 'none';
    
    input.addEventListener('change', this.handleFileChange);
    
    this.quill.container.appendChild(input);
    
    const toolbar = this.quill.getModule('toolbar') as any;
    if (toolbar && typeof toolbar.addHandler === 'function') {
      toolbar.addHandler('uploadImage', () => {
        input.click();
      });
    } else {
      console.error('Toolbar module not found or addHandler is not a function');
    }
  }

  private handleFileChange = async (e: Event) => {
    const input = e.target as HTMLInputElement;
    if (input.files && input.files[0]) {
      const file = input.files[0];
      try {
        const imgTag: {
          img: string;
          index: number
        } = await this.uploadCallback(file);
        console.log("imgTag = ", imgTag);
        
        if(imgTag){
          
          const srcRegex = /src="([^"]+)"/;
          const match = imgTag.img.match(srcRegex);
          const src = match ? match[1] || "" : '';
          this.quill.insertEmbed(imgTag.index, 'image', src);
          // const _timer = setTimeout(() => {
          //   this.quill.focus();
          //   const range = this.quill.getSelection(true);
          //   console.log("this.quill.root.innerHTML= ", range);
            
          //   this.quill.setSelection(range.index + 1);
          //   clearTimeout(_timer);
          // }, 1000)
        }
        
      } catch (error) {
        console.error('Image upload failed:', error);
      }
    }
  }
}

export const uploadImageIcon = `
<svg viewbox="0 0 18 18">
  <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect>
  <circle class="ql-fill" cx="6" cy="7" r="1"></circle>
  <polyline class="ql-even ql-fill" points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"></polyline>
</svg>`;
```
> 相关参数  
> `uploadImage`: 对外暴露点击函数以及图片指定`module`关键字  
> `uploadCallback`: 外部自定义上传接口

### [复杂模块]-如何将自定义功能写入`quill`  
- [1] `toolbarOptions`中添加关键字.如: `uploadImage`  
- [2] 设置对应图标`uploadImageIcon`
```TypeScript
 const uploadImageButton = document.querySelector('.ql-uploadImage');
  if (uploadImageButton) {
    uploadImageButton.innerHTML = uploadImageIcon;
  }
```
- [3] 将模块登记到`quill`中`Quill.register('modules/imageUpload', ImageUploadModule as any);`
- [4] 在`quill`初始化中直接声明`imageUpload`函数,并调用`uploadCallback`进行上传

### [简单模块]-如何将自定义功能写入`quill`
- [1] 设置关键字图标同上
- [2] 不需要进行模块登记,只需要设置到`toolbarOptions`即可
- [3]直接在`modules/toolbar/handlers`中声明关键字的函数即可,图表点击之后会触发事件.

```TypeScript
new Quill("#huaren-editor", {
modules: {
  toolbar: {
    container: toolbarOptions,
    handlers: {
      imageLinks: function(){
        changeDialog(true)
      }
    }
  }
 }
}

## 当你需要一个类似于微信回复的富文本框时,可直接如下如下使用
```TypeScript
new Quill(editorRef.current, {
            theme: 'bubble',
            modules: {
              toolbar: false, // 完全移除工具栏
              clipboard: {
                matchers: [[Node.ELEMENT_NODE, function (node: any, delta: any) {
                  delta.ops = delta.ops.map(function (op: any) {
                    return {
                      insert: op.insert
                    }
                  })
                  return delta;
               }]]
       
              }
            },
            placeholder: '请输入内容...'
          })
```
你就能得到一个小巧的input样式的富文本框,可快捷回复
> `matchers`是处理粘贴时将其他地方的背景色复制过来问题, 挺重要的  
# editor
**除了样式问题没啥难度,照着官网撸就行**

使用quill与editor使用对比

记录搭建与使用过程情况  
[turbo](https://turbo.build/)  
Turborepo 是什么？
Turborepo 是适用于 JavaScript 和 TypeScript 代码库的高性能构建系统。它专为扩展 monorepos 而设计，同时还能加快单包工作区中的工作流程。

从个人开发人员到世界上最大的企业工程组织，Turborepo 通过轻量级方法优化您需要在存储库中运行的任务，节省了数年的工程时间和数百万美元的计算成本。  
**这是他的介绍,我只使用了很小一部分,以下记录使用以及打包的`dockerfile`**

# 我的搭建
> 我的项目需求,一个web项目,需要实现`mobile`版本,但是需要分包发布,不能直接使用一个web包进行动态适配  
> 所以找到了`turbo `   
> 使用`pnpm `与`pnpm-workspace`共同实现  


# 我的项目目录
pingx-app/  
|  
|──apps   
|&#160;&#160;&#160;&#160;&#160;&#160;|──web  
|&#160;&#160;&#160;&#160;&#160;&#160;└──mobile  
|  
|──packages   
|&#160;&#160;&#160;&#160;&#160;&#160;|──assets-config  
|&#160;&#160;&#160;&#160;&#160;&#160;|──eslint-config   
|&#160;&#160;&#160;&#160;&#160;&#160;|──redux-store  
|&#160;&#160;&#160;&#160;&#160;&#160;|──tailwind-config  
|&#160;&#160;&#160;&#160;&#160;&#160;|──theme-config   
|&#160;&#160;&#160;&#160;&#160;&#160;|──types-config   
|&#160;&#160;&#160;&#160;&#160;&#160;|──typescript-config  
|&#160;&#160;&#160;&#160;&#160;&#160;|──ui   
|&#160;&#160;&#160;&#160;&#160;&#160;└──utils-config  
|──pnpm-workspace.yaml  
|  
└───turbo.json  

****
> `assets-config` //静态文件导出    
> `eslint-config` // 一些eslint设置   
> `redux-store` //redux配置  
> `tailwind-config` //tailwind配置  
> `theme-config`  //主题配置    
> `types-config`  //type与enums配置  
> `typescript-config` //typescript配置  
> `ui` // 公共UI  
> `utils-config` // 请求之类的

****
# 具体使用详看`turbo`官网
**遇到的问题**
## `packages/ui`中样式失效问题
本项目使用了`tailwindcss`, 在主项目`web`,`mobile`中都需要进行`tailwind`引入,以及在`ui`中也需要进行引入,并且在`ui`中需要将组件内部使用的css进行导出,然后在主项目中引入
> 会造成如下原因  
> 1、`ui`中style需要使用`tailwindcss`指令进行css生成合并;导致在主项目使用时需要时刻关注是否有新的`tailwindcss`生成,每次都需要重新运行整个项目  
> 2、每次本地`build`之后整个`node_modules`就失效,需要删除重新拉取依赖  

# 以下介绍如何`docker`打包

**遇到的问题**
> 在`docker`中设置变量,有时候会失效,跟`node`环境有关
> 在`docker`中设置的变量只能在`dockerfile`中生效,无法在项目中生效

```json
web:
    build:
      args:
         - VERSION=20
         - dev=dev
         - BASE_DEV_URL=请求地址
         - PORT=3002
         - CONTAINER_NAME=web
      context: .
      dockerfile: ./apps/web/Dockerfile
    restart: always
    container_name: web
    ports:
      - 3002:3002
```
> 以上生效的只有`VERSION`,`dev`,`PORT`,`CONTAINER_NAME`在`dockerfile`中使用时生效

## 配置多环境
-dev
> `docker-compose.dev.yml`

-test
> `docker-compose.test.yml`

指令运行: 
> 多项目同事打包: `docker-compose -f docker-compose.test.yml -f docker-compose.dev.yml up`

## `dockerfile`中变量使用
1、`VERSION`: 指定node版本
2、`PORT`: 指定node启动后的端口号
3、`CONTAINER_NAME`: 指定主项目目录名

## `docker-compose.yml`使用
> 需要在项目根目录  
> 需要配置变量,`dockerfile`文件地址  
> 需要指定端口  

```json
version: "3"

services:
  web:
    build:
      args:
         - VERSION=20
         - dev=dev
         - PORT=3002
         - CONTAINER_NAME=web
      context: .
      dockerfile: ./apps/web/Dockerfile
    restart: always
    environment:
      - dev=dev
    container_name: web
    ports:
      - 3002:3002
    # networks:
    #   - app_network
   mobile:
     build:
       args:
          - VERSION=20
          - dev=production
          - PORT=3003
          - CONTAINER_NAME=mobile
       context: .
       dockerfile: ./apps/mobile/Dockerfile
     restart: always
     container_name: mobile
     ports:
       - 3003:3003
    # networks:
    #   - app_network

# Define a network, which allows containers to communicate
# with each other, by using their container name as a hostname
# networks:
#   app_network:
#     external: true

```

## `dockerfile`
**相关代码**
```dockerfile

ARG VERSION
# Alpine image
FROM node:${VERSION}-alpine AS alpine


ARG BASE_DEV_URL
ARG PORT
ARG dev
ARG CONTAINER_NAME

RUN apk update
RUN apk add --no-cache libc6-compat
# ENV CONTAINER_NAME=web
# Setup pnpm and turbo on the alpine base
FROM alpine as base
RUN npm install pnpm turbo@2.0.6 --global
RUN pnpm config set store-dir ~/.pnpm-store

# Prune projects
FROM base AS pruner

WORKDIR /app
COPY . .
RUN turbo prune --scope=${CONTAINER_NAME} --docker

# Build the project
FROM base AS builder

WORKDIR /app

# Copy lockfile and package.json's of isolated subworkspace
COPY --from=pruner /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
COPY --from=pruner /app/out/pnpm-workspace.yaml ./pnpm-workspace.yaml
COPY --from=pruner /app/out/json/ .

# First install the dependencies (as they change less often)
RUN --mount=type=cache,id=pnpm,target=~/.pnpm-store pnpm install --frozen-lockfile

# Copy source code of isolated subworkspace
COPY --from=pruner /app/out/full/ .

RUN turbo build --filter=${CONTAINER_NAME}
# RUN --mount=type=cache,id=pnpm,target=~/.pnpm-store pnpm prune --prod --no-optional
# RUN rm -rf ./**/*/src

# Final image
FROM alpine AS runner

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nodejs
USER nodejs

WORKDIR /app
# COPY --from=builder --chown=nodejs:nodejs /app .
COPY --from=builder --chown=nodejs:nodejs /app/apps/${CONTAINER_NAME}/next.config.mjs .
COPY --from=builder --chown=nodejs:nodejs /app/apps/${CONTAINER_NAME}/package.json .

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
# COPY --from=builder --chown=nodejs:nodejs /app/apps/${CONTAINER_NAME}/.next/standalone/apps/${CONTAINER_NAME} ./
COPY --from=builder --chown=nodejs:nodejs /app/apps/${CONTAINER_NAME}/.next/standalone ./
COPY --from=builder --chown=nodejs:nodejs /app/apps/${CONTAINER_NAME}/.next/static ./apps/${CONTAINER_NAME}/.next/static
COPY --from=builder --chown=nodejs:nodejs /app/apps/${CONTAINER_NAME}/public ./apps/${CONTAINER_NAME}/public
# RUN rm -rf ./apps/${CONTAINER_NAME}/node_modules
WORKDIR /app/apps/${CONTAINER_NAME}

# ARG PORT=3002
# ENV dev=production
ENV BASE_DEV_URL=${BASE_DEV_URL}
ENV dev=${dev}
ENV PORT=${PORT}
EXPOSE ${PORT}

CMD ["node", "server.js"]
```

# 深入解析多阶段构建的 Dockerfile：优化 Node.js 应用程序部署

在现代前端开发中，如何高效地构建和部署应用程序是一个重要话题。本文将详细分析一个使用多阶段构建的 Dockerfile，该文件专门用于构建和部署基于 Node.js 的应用程序。

## 基础镜像设置

```dockerfile
ARG VERSION
FROM node:${VERSION}-alpine AS alpine
```

这个 Dockerfile 从 Alpine Linux 版本的 Node.js 镜像开始。Alpine Linux 以其小巧的体积和安全性著称，非常适合容器化部署。通过使用 ARG 指令，我们可以在构建时灵活指定 Node.js 的版本。

## 环境准备

```dockerfile
RUN apk update
RUN apk add --no-cache libc6-compat
```

这一阶段更新 Alpine 的包管理器并安装 libc6-compat。这是许多 Node.js 应用程序所需的兼容性库。

## 工具安装和配置

```dockerfile
FROM alpine as base
RUN npm install pnpm turbo@2.0.6 --global
RUN pnpm config set store-dir ~/.pnpm-store
```

在 base 阶段，我们安装了两个重要工具：
- pnpm：高性能的包管理器
- Turbo：用于管理单体仓库（monorepo）的构建系统

## 项目剪裁（Pruning）

```dockerfile
FROM base AS pruner
WORKDIR /app
COPY . .
RUN turbo prune --scope=${CONTAINER_NAME} --docker
```

pruner 阶段使用 Turbo 的 prune 命令来优化工作空间。这个步骤：
- 仅保留指定容器所需的依赖
- 创建一个最小化的构建上下文
- 显著减少最终镜像的大小

## 构建阶段

```dockerfile
FROM base AS builder
WORKDIR /app

COPY --from=pruner /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
COPY --from=pruner /app/out/pnpm-workspace.yaml ./pnpm-workspace.yaml
COPY --from=pruner /app/out/json/ .
```

builder 阶段负责实际的应用程序构建：
1. 复制必要的配置文件
2. 安装依赖
3. 复制源代码
4. 执行构建命令

## 最终运行阶段

```dockerfile
FROM alpine AS runner
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nodejs
USER nodejs
```

runner 阶段创建了最终的生产镜像：
- 创建专用的系统用户和用户组
- 采用最小权限原则
- 仅包含运行应用所需的文件

### 文件复制和配置

```dockerfile
COPY --from=builder --chown=nodejs:nodejs /app/apps/${CONTAINER_NAME}/.next/standalone ./
COPY --from=builder --chown=nodejs:nodejs /app/apps/${CONTAINER_NAME}/.next/static ./apps/${CONTAINER_NAME}/.next/static
COPY --from=builder --chown=nodejs:nodejs /app/apps/${CONTAINER_NAME}/public ./apps/${CONTAINER_NAME}/public
```

特别注意文件的所有权设置和目录结构的保持。

## 环境配置和启动

```dockerfile
ENV BASE_DEV_URL=${BASE_DEV_URL}
ENV dev=${dev}
ENV PORT=${PORT}
EXPOSE ${PORT}

CMD ["node", "server.js"]
```

最后设置环境变量和暴露端口，使用 node 命令启动服务器。

## 优化特点

1. **多阶段构建**：通过多个构建阶段最小化最终镜像大小
2. **依赖优化**：使用 pnpm 和 Turbo 实现高效的依赖管理
3. **安全性考虑**：使用非 root 用户运行应用
4. **灵活配置**：通过 ARG 和 ENV 指令提供构建时和运行时的配置选项

## 最佳实践

1. 使用 `--no-cache` 标志避免 apk 缓存
2. 利用构建缓存优化依赖安装
3. 合理组织多阶段构建，优化构建效率
4. 注意文件权限和所有权设置

这个 Dockerfile 展示了现代前端应用的容器化最佳实践，特别适用于基于 Next.js 的应用程序部署。

> 无效内容
> `BASE_DEV_URL`使用无效,可剔除  
> `dev`使用无效可剔除  
> 指定`turbo`版本原因,打包需要依赖于`turbo`, 不指定时会导致自动升级
> 使用` pnpm install --frozen-lockfile`原因,拉取依赖时,要求按照`pnpm-lock.yaml`进行拉取,确保与本地依赖一致,减少打包问题  

# `dockerfile`中作用于项目的变量失效解决方案

**关键解决**
> `env.mjs`: 提供变量  
> `next.config.mjs`: 设置变量使用  

例子:   
`BASE_DEV_URL`,`dev`在`env.mjs`中设置
```JavaScript
import { createEnv } from "@t3-oss/env-nextjs"
import { z } from "zod"

const BASE_DEV_URL = 'http://xxxx.com'
              .toString()
              .trim() 
const dev = "dev".toString().trim()

const apps = "web".toString().trim()

// dev使用代理时设置
const isVpn = "false".toString().trim();
// vpn端口,ip默认: 127.0.0.1
const vpn_port = "4780".toString().trim();

export const env = createEnv({
  server: {
    ANALYZE: z
      .enum(["true", "false"])
      .optional()
      .transform((value) => value === "true"),
     BASE_DEV_URL: z.string().optional(),
     dev: z.string().optional(),
     isVpn: z.string().optional(),
     vpn_port: z.string().optional(),
     apps: z.string().optional(),
  },
  client: {},
  runtimeEnv: {
    ANALYZE: process.env.ANALYZE,
    BASE_DEV_URL,
    dev,
    isVpn,
    vpn_port,
    apps
  },
})
```
**`next.config.mjs`**中设置
```json
env: {
    BASE_DEV_URL: process.env.BASE_DEV_URL || env.BASE_DEV_URL || "",
    dev: process.env.dev || env.dev || "",
    isVpn: process.env.isVpn || env.isVpn || "false",
    vpn_port: process.env.vpn_port || env.vpn_port || "",
    apps: process.env.apps || env.apps || "",
  }
  ```
  **变量解释**
 > `BASE_DEV_URL` 请求地址  
 > `dev`:设置当前环境  
 > `isVpn`: 设置是否需要使用vpn  
 > `vpn_port`: 设置vpn端口  
 > `apps`:  设置在某些情况下剔除一些配置的变量标识

## 变量使用
### 客户端请求时代理
```json
//next.config.mjs的rewrites中
async rewrites() {
    return [
      {
        source: "/api/:path*",
        destination: `${process.env.BASE_DEV_URL || env.BASE_DEV_URL}/api/:path*`
      }
    ]
  }
```

### 服务端请求
在`axios`封装中使用
``` TypeScript
const useRequest: AxiosInstance = axios.create({
    xsrfCookieName: 'xsrf-token',
    baseURL: processConfig.BASE_DEV_URL,// processConfig是在utils中将process.env变量全写进去的对象
    timeout: 20000,

});

...

//判断是否是客户端
if (config.isClient) {
        config.baseURL = ''; // 清除baseURL
        token = Cookies.get('token') || '';
    } else {
        //服务端照旧
}

...

if (process.env.isVpn === "true" && process.env.vpn_port) {
        config.proxy = {
            host: '127.0.0.1',
            port: Number(process.env.vpn_port),
            protocol: "http"
        }

}
```

基于pnpm+Nextjs与turbo建立多模块项目记录

基于HTML动态绘制压差仪表盘

- [问题] 为什么频率过高
- [X]  `udp`链接无人机进行`mavlink`通信, 太快了渲染一直在处理.
****

:::info{title="解决方案"}
[👍] 使用`Observable`,`Observer`  
[👍] 对`emit`中内容进行
:::



# 优化 Tauri 项目中基于 Emit 的高频通信性能

在开发 Tauri 应用时，我们经常需要处理前后端之间的频繁通信。然而，当通信频率过高时，可能会导致 CPU 使用率持续飙升的问题。本文将介绍一个基于 React Hooks 的优化方案，通过合理使用 useRef、useCallback 等手段来提升性能。

## 问题背景

在 Tauri 应用中，前端通常需要实时监听后端发送的消息。当消息频率较高时（例如设备状态更新），可能会出现以下问题：

1. 频繁的状态更新导致组件重复渲染
2. 重复创建监听器和回调函数
3. 闭包引起的性能问题
4. CPU 使用率居高不下

## 优化方案

### 1. 使用自定义 Hook 封装消息监听逻辑

首先，我们创建了一个 `useMavlinkMessageListener` 的自定义 Hook，用于统一处理消息监听逻辑：

```typescript
export function useMavlinkMessageListener<T, R = T>(
  messageType: MavlinkMessageEnum,
  options: MavlinkMessageOptions<T, R>
) {
  // ...
}
```

### 2. 使用 useRef 存储最新状态

为了避免闭包问题并减少不必要的重渲染，我们使用 useRef 来存储最新的状态值：

```typescript
const stateRef = useRef<R>(
  transform ? transform(initialState) : (initialState as unknown as R)
);
const [state, setState] = useState<R>(stateRef.current);
```

### 3. 优化回调函数存储

使用 useRef 存储回调函数和配置参数，避免因依赖变化导致效果重新运行：

```typescript
const callbacksRef = useRef({
  transform,
  filter,
  onError,
  debug
});

useEffect(() => {
  callbacksRef.current = {
    transform,
    filter,
    onError,
    debug
  };
}, [transform, filter, onError, debug]);
```

### 4. 优化消息处理函数

使用 useCallback 包装消息处理函数，避免不必要的重新创建：

```typescript
const processMessage = useCallback((rawMessage: T): R | null => {
  const { transform, filter } = callbacksRef.current;
  
  if (filter && !filter(rawMessage)) {
    return null;
  }
  
  return transform
    ? transform(rawMessage)
    : (rawMessage as unknown as R);
}, []);
```

### 5. 优化状态更新逻辑

通过比较新旧状态，避免不必要的更新：

```typescript
const updateState = useCallback((newState: R) => {
  const hasChanged = JSON.stringify(stateRef.current) !== JSON.stringify(newState);
  if (hasChanged) {
    stateRef.current = newState;
    setState(newState);
  }
}, []);
```

### 6. 使用 RxJS 优化事件监听

使用 RxJS 的 Observable 模式来处理事件流，提供更好的错误处理和资源管理：

```typescript
export const IpcClientListener = (name: string): Observable<ResultMeta> => {
  return new Observable((observer: Observer<ResultMeta>) => {
    try {
      const listener = listen(name, (event) => {
        observer.next(event.payload as ResultMeta);
      });
      // 错误处理...
    } catch (error) {
      // 错误处理...
    }
  });
};
```

## 使用示例

```typescript
const { message: MLStatustext } = useMavlinkMessageListener(
  MavlinkMessageEnum.STATUSTEXT, 
  {
    debug: true,
    initialState: initialStatustext,
  }
);
```

## 性能优化效果

通过上述优化措施，我们实现了以下改进：

1. 减少了不必要的组件重渲染
2. 避免了闭包带来的内存泄漏风险
3. 优化了事件监听器的创建和销毁
4. 显著降低了 CPU 使用率

## 关键优化点总结

1. 使用 useRef 存储状态和回调函数，避免闭包问题
2. 使用 useCallback 优化函数创建
3. 实现状态比较逻辑，避免无效更新
4. 采用 RxJS 处理异步事件流
5. 统一的错误处理机制

## 注意事项

1. 确保在组件卸载时正确清理监听器
2. 合理使用 debug 模式进行问题排查
3. 根据实际需求调整状态比较逻辑
4. 注意异常处理的完整性

通过以上优化方案，我们成功解决了 Tauri 项目中由于高频通信导致的 CPU 性能问题。这个方案不仅适用于 Mavlink 消息处理，也可以推广到其他类似的高频通信场景中。

**以上内容由claude.ai生成,结合解决思路与相关API,实现代码使用AI润色生成**