Hello~大家好。我是秋天的一阵风 ~

前言

最近我遇到了一个神奇的需求，客户要求对 el-select 的 宽度 进行动态设置。

简单来说，就是我们公司有一些选择框，展示的内容像“中华人民共和国/广西壮族自治区/南宁市/西乡塘区”这么长，一不小心就会内容超长，显示不全。详情请看下面动图：

一般来说，想解决内容展示不全的问题，有几种方法。

第一种：给选择框加个tooltip效果，在鼠标悬浮时展示完整内容。

第二种：对用户选择label值进行切割，只展示最后一层内容。

但是我们的客户对这两种方案都不接受，要求选择的时候让select选择框的宽度动态增加。

有什么办法呢？客户就是上帝，必须满足，他们说什么就是什么，所以我们只能开动脑筋，动手解决。

思路

我们打开控制台，来侦察一下el-select的结构，发现它是一个el-input--suffix的div包裹着一个input，如下图所示。

内层input的宽度是100%，外层div的宽度是由这个内层input决定的。也就是说，内层input的宽度如果动态增加，外层div的宽度也会随之增加。那么问题来了，如何将内层input的宽度动态增加呢？

tips：

如果你对width的100%和auto有什么区别感兴趣，可以点击查看我之前的文章

探究 width:100%与width:auto区别

解决方案

为了让我们的el-select宽度能够跟着内容走，我们可以在内层input同级别增加一个元素，内容就是用户选中的内容。内容越多，它就像一个胃口很大的小朋友，把外层div的宽度撑开。下面来看图示例 ：

借助prefix

幸运的是，el-select本身有一个prefix的插槽选项，我们可以借助这个选项实现：

我们添加一个prefix的插槽，再把prefix的定位改成relative，并且把input的定位改成绝对定位absolute。最后将prefix的内容改成我们的选项内容。看看现在的效果：

<template>

  <div>

    <el-select class="autoWidth" v-model="value" placeholder="请选择">

      <template slot="prefix">

        {{optionLabel}}

      </template>

      <el-option

        v-for="item in options"

        :key="item.value"

        :label="item.label"

        :value="item.value"

      >

      </el-option>

    </el-select>

  </div>

</template>



<script>

export default {

  data() {

    return {

      options: [

        {

          value: "选项1",

          label: "中华人民共和国/广东省/深圳市/福田区",

        },

        {

          value: "选项2",

          label: "中华人民共和国/广西壮族自治区/南宁市/西乡塘区",

        },

        {

          value: "选项3",

          label: "中华人民共和国/北京市",

        },

        {

          value: "选项4",

          label: "中华人民共和国/台湾省",

        },

        {

          value: "选项5",

          label: "中华人民共和国/香港特别行政区",

        },

      ],

      value: "",

    };

  },

  computed: {

    optionLabel() {

      return (this.options.find((item) => item.value === this.value) || {})

        .label;

    },

  },

};

</script>

<style lang="scss" scoped>



::v-deep .autoWidth .el-input__prefix {

  position: relative;

}



::v-deep .autoWidth input {

  position: absolute;

}

</style>

细节调整

现在el-select已经可以根据选项label的内容长短动态增加宽度了，但是我们还需要继续处理一下细节部分，将prefix的内容调整到和select框中的内容位置重叠，并且将它隐藏。看看现在的效果

::v-deep .autoWidth .el-input__prefix {

  position: relative;

  box-sizing: border-box;

  border: 1px solid #fff;

  padding: 0 30px;

  height: 40px;

  line-height: 40px;

  left: 0px;

  visibility: hidden;

}

调整初始化效果（用户未选择内容）

目前已经基本实现了效果了，还有最后一个问题，当用户没有选择内容的时候，select的宽度是“没有”的，如下图所示。

所以我们还得给他加上一个最小宽度

我们加上最小宽度以后，发现这个select的图标又没对齐，这是因为我们在重写.el-input__prefix样式的时候设置了padding: 0 30px，当用户没有选择内容的时候，select的图标应该是默认位置，我们需要继续调整代码,最后效果如下图所示:

完整代码

最后附上完整代码：

<template>

  <div>

    <el-select

      class="autoWidth"

      :class="{ 'has-content': optionLabel }"

      v-model="value"

      placeholder="请选择"

      clearable

    >

      <template slot="prefix">

        {{ optionLabel }}

      </template>

      <el-option

        v-for="item in options"

        :key="item.value"

        :label="item.label"

        :value="item.value"

      >

      </el-option>

    </el-select>

  </div>

</template>



<script>

export default {

  data() {

    return {

      options: [

        {

          value: "选项1",

          label: "中华人民共和国/广东省/深圳市/福田区",

        },

        {

          value: "选项2",

          label: "中华人民共和国/广西壮族自治区/南宁市/西乡塘区",

        },

        {

          value: "选项3",

          label: "中华人民共和国/北京市",

        },

        {

          value: "选项4",

          label: "中华人民共和国/台湾省",

        },

        {

          value: "选项5",

          label: "中华人民共和国/香港特别行政区",

        },

      ],

      value: "",

    };

  },

  computed: {

    optionLabel() {

      return (this.options.find((item) => item.value === this.value) || {})

        .label;

    },

  },

};

</script>

<style lang="scss" scoped>

.autoWidth {

  min-width: 180px;

}

::v-deep .autoWidth .el-input__prefix {

  position: relative;

  box-sizing: border-box;

  border: 1px solid #fff;

  padding: 0 30px;

  height: 40px;

  line-height: 40px;

  left: 0px;

  visibility: hidden;

}



::v-deep .autoWidth input {

  position: absolute;

}

.autoWidth {

  // 当.has-content存在时设置样式

  &.has-content {

    ::v-deep .el-input__suffix {

      right: 5px;

    }

  }

  // 当.has-content不存在时的默认或备选样式

  &:not(.has-content) {

    ::v-deep .el-input__suffix {

      right: -55px;

    }

  }

}

</style>

地图在 app 中使用还是很广泛的，常见的应用常见有：

1、获取自己的位置，规划路线。

2、使用标记点进行标记多个位置。

3、绘制多边形，使用围墙标记位置等等。

此篇文章就以高德地图为例，以上述三个常见需求为例，教大家如何在 uniapp 中添加地图。

作为一个不管闲事的前端姑娘，我就忽略掉那些繁琐的账号申请，假设需要的信息问项目经理都要来了，如果你没有现成的信息，还需要申请，请查看：

lbs.amap.com/api/javascr…

去高德地图注册账号，根据官网指示获取 key。然后就正式开始前端 uniapp + 高德地图之旅啦！

一、地图配置

在使用地图之前需要配置一下你的地图账号信息，找到项目中的 manifest.json 文件，打开 web 配置，如图：

此处是针对 h5 端，如果我们要打包 安卓和 IOS app 需要配置对应的key信息，如图：

如果这些信息没有人给你提供，就需要自己去官网注册账号实名认证获取。

二、地图使用

2.1、使用标记点进行标记多个位置，具体效果图如下：

<template>

 <view class="map-con">

  <map style="width: 100%; height: 300px;" 

   :latitude="latitude" 

   :longitude="longitude" 

   :markers="covers"

   :scale="12">

  </map>

 </view>

</template>



<script>

 export default {

  data() {

   return {

    longitude: '116.473115',

    latitude: '39.993207',

    covers: [{

     id: 1,

     longitude: "116.474595",

     latitude: "40.001321",

     iconPath: '/static/images/point.png',

    },

    {

     id: 1,

     longitude: "116.274595",

     latitude: "40.101321",

     iconPath: '/static/images/point.png',

    },

    {

     id: 1,

     longitude: "116.374595",

     latitude: "40.101321",

     iconPath: '/static/images/point.png',

    },

    {

     id: 1,

     longitude: "116.374595",

     latitude: "40.011321",

     width: 44,

     height: 50,

     iconPath:'/static/images/point.png',

    }

   ]

  }

 }

}

</script>

注意：

看着代码很简单，运行在 h5 之后一切正常，但是运行在安卓模拟器的时候，发现自定义图标没有起作用，显示的是默认标记点。

iconpath 的路径不是相对路径，没有 ../../ 这些，直接根据官网提示写图片路径，虽然模拟器不显示但是真机是正常的。

2.2、绘制多边形，使用围墙标记位置等等。

<template>

  <view class="map-con">

    <map style="width: 100%; height: 400px;" :latitude="latitude" :longitude="longitude" :scale="11"

      :polygons="polygon" :markers="covers">

    </map>

  </view>

</template>



<script>

  export default {

    data() {

      return {

        longitude: '116.304595',

        latitude: '40.053207',

        polygon: [{

          fillColor: '#f00',

          strokeColor: '#0f0',

          strokeWidth: 3,

          points: [{

              latitude: '40.001321',

              longitude: '116.304595'

            },

            {

              latitude: '40.101321',

              longitude: '116.274595'

            },

            {

              latitude: '40.011321',

              longitude: '116.374595'

            }

          ]

        }],

        covers: [{

          id: 1,

          width: 30,

          height: 33,

          longitude: "116.314595",

          latitude: "40.021321",

          iconPath: '/static/images/point.png',

        }, ]

      }

    }

  }

</script>

更多样式配置我们去参考官网，官网使用文档写的很细致，地址为：

uniapp 官网：uniapp.dcloud.net.cn/component/m…

三、易错点

1、地图已经显示了，误以为地图未展示

左下角有高德地图标识，就说明地图已经正常显示了，此时可以使用鼠标进行缩放，或设置地图的缩放比例或者修改下地图中心点的经纬度。

2、标记点自定义图标不显示

marker 中的 iconPath 设置标记点的图标路径，可以使用相对路径、base64 等，但是在 h5 查看正常，app 打包之后就不能正常显示了，务必参考官网。

3、uni.getLocation 无法触发

在调试模式中，调用 uni.getLocation 无法触发，其中的 success fail complete 都无法执行，不调用的原因是必须在 https 环境下，所以先保证是在 https 环境下。****

四、有可用插件吗？

uniapp 插件：ext.dcloud.net.cn/search?q=ma…

搜索地图插件的时候，插件挺多的，有免费的也有付费的，即使使用插件也是需要需要注册第三方地图账号的。

我个人认为 uniapp 已经将第三方地图封装过了，使用挺便捷的，具体是否使用插件就根据项目实际情况定。

今天想和大家分享的一个技术是 SSE 流式传输 。如标题所言，通过 SSE 流式传输的方式可以让我们不再通过轮询的方式获取服务端返回的结果，进而提升前端页面的性能。

对于需要轮询的业务场景来说，采用 SSE 确实是一个更好的技术方案。

接下来，我将从 SSE 的概念、与 Websocket 对比、SSE 应用场景多个方面介绍 SSE 流式传输，感兴趣的同学一起来了解下吧！

什么是 SSE 流式传输

SSE 全称为 Server-sent events , 是一种基于 HTTP 协议的通信技术，允许服务器主动向客户端（通常是Web浏览器）发送更新。

它是 HTML5 标准的一部分，设计初衷是用来建立一个单向的服务器到客户端连接，使得服务器可以实时地向客户端发送数据。

这种服务端实时向客户端发送数据的传输方式，其实就是流式传输。

我们在与 ChatGPT 交互时，可以发现 ChatGPT 的响应总是间断完成。细扒 ChatGPT 的网络传输模式，可以发现，用的也是流式传输。

SSE 流式传输的好处

在 SSE 技术出现之前，我们习惯把需要等待服务端返回的过程称为长轮询。

长轮询的实现其实也是借助 http 请求来完成，一个完整的长轮询过程如下图所示：

从图中可以发现，长轮询最大的弊端是当服务端响应请求之前，客户端发送的所有请求都不会被受理。并且服务端发送响应的前提是客户端发起请求。

前后端通信过程中，我们常采用 ajax 、axios 来异步获取结果，这个过程，其实也是长轮询的过程。

而同为采用 http 协议通信方式的 SSE 流式传输，相比于长轮询模式来说，优势在于可以在不需要客户端介入的情况下，多次向客户端发送响应，直至客户端关闭连接。

这对于需要服务端实时推送内容至客户端的场景可方便太多了！

SSE 技术原理

1. 参数设置

前文说到，SSE 本质是一个基于 http 协议的通信技术。

因此想要使用 SSE 技术构建需要服务器实时推送信息到客户端的连接，只需要将传统的 http 响应头的 contentType 设置为 text/event-stream 。

并且为了保证客户端展示的是最新数据，需要将 Cache-Control 设置为 no-cache 。

在此基础上，SSE 本质是一个 TCP 连接，因此为了保证 SSE 的持续开启，需要将 Connection 设置为 keep-alive 。

Content-Type: text/event-stream

Cache-Control: no-cache

Connection: keep-alive

完成了上述响应头的设置后，我们可以编写一个基于 SSE 流式传输的简单 Demo 。

2. SSE Demo

服务端代码：

const express = require('express');

const app = express();

const PORT = 3000;



app.use(express.static('public'));



app.get('/events', function(req, res) {

    res.setHeader('Content-Type', 'text/event-stream');

    res.setHeader('Cache-Control', 'no-cache');

    res.setHeader('Connection', 'keep-alive');



    let startTime = Date.now();



    const sendEvent = () => {

        // 检查是否已经发送了10秒

        if (Date.now() - startTime >= 10000) {

            res.write('event: close\ndata: {}\n\n'); // 发送一个特殊事件通知客户端关闭

            res.end(); // 关闭连接

            return;

        }



        const data = { message: 'Hello World', timestamp: new Date() };

        res.write(`data: ${JSON.stringify(data)}\n\n`);



        // 每隔2秒发送一次消息

        setTimeout(sendEvent, 2000);

    };



    sendEvent();

});



app.listen(PORT, () => {

    console.log(`Server running on http://localhost:${PORT}`);

});

客户端代码：

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <title>SSE Example</title>

</head>



<body>

    <h1>Server-Sent Events Example</h1>

    <div id="messages"></div>



    <script>

        const evtSource = new EventSource('/events');

        const messages = document.getElementById('messages');



        evtSource.onmessage = function(event) {

            const newElement = document.createElement("p");

            const eventObject = JSON.parse(event.data);

            newElement.textContent = "Message: " + eventObject.message + " at " + eventObject.timestamp;

            messages.appendChild(newElement);

        };

    </script>

</body>

</html>

当我们在浏览器中访问运行在 localhost: 3000 端口的客户端页面时，页面将会以 流式模式 逐步渲染服务端返回的结果：

需要注意的是，为了保证使用 SSE 通信协议传输的数据能被客户端正确的接收，服务端和客户端在发送数据和接收数据应该遵循以下规范：

服务端基本响应格式

SSE 响应主要由一系列以两个换行符分隔的事件组成。每个事件可以包含以下字段：

data：事件的数据。如果数据跨越多行，每行都应该以data:开始。

id：事件的唯一标识符。客户端可以使用这个ID来恢复事件流。

event：自定义事件类型。客户端可以根据不同的事件类型来执行不同的操作。

retry：建议的重新连接时间（毫秒）。如果连接中断，客户端将等待这段时间后尝试重新连接。

字段之间用单个换行符分隔，而事件之间用两个换行符分隔。

客户端处理格式

客户端使用 EventSource 接口监听 SSE 消息：

const evtSource = new EventSource('path/to/sse');

evtSource.onmessage = function(event) {

    console.log(event.data); // 处理收到的数据

};

SSE 应用场景

SSE 作为基于 http 协议由服务端向客户端单向推送消息的通信技术，对于需要服务端主动推送消息的场景来说，是非常适合的：

SSE 兼容性

可以发现，除了 IE 和低版本的主流浏览器，目前市面上绝大多数浏览器都支持 SSE 通信。

SSE 与 WebSocket 对比

看完 SSE 的使用方式后，细心的同学应该发现了：

SSE 的通信方式和 WebSocket 很像啊，而且 WebSocket 还支持双向通信，为什么不直接使用 WebSocket ？

下表展示了两者之间的对比：

可以发现，SSE 与 WebSocket 各有优缺点，对于需要客户端与服务端高频交互的场景，WebSocket 确实更适合；但对于只需要服务端单向数据传输的场景，SSE 确实能耗更低，且不需要客户端感知。

参考文档

developer.mozilla.org/zh-CN/docs/…

网页也能像 QQ 一样发出右下角消息？轻松实现桌面通知！

大家好，我是蒜鸭。今天我们来聊聊如何让网页像 QQ 那样在右下角弹出消息通知。这个功能不仅能提升用户体验，还能增加网站的互动性。让我们一起探索如何在网页中实现这个酷炫的功能吧！

1. 为什么需要网页通知？

在当今信息爆炸的时代，获取用户注意力变得越来越困难。传统的网页通知方式，如弹窗或页面内提示，往往会打断用户的浏览体验。而类似 QQ 那样的右下角消息通知，既能及时传递信息，又不会过分干扰用户，可以说是一种相当优雅的解决方案。

实现这种通知功能，我们有两种主要方式：使用 Web Notifications API 或自定义 CSS+JavaScript 实现。接下来，我们将详细探讨这两种方法的实现过程、优缺点以及适用场景。

2. 使用 Web Notifications API

2.1 Web Notifications API 简介

Web Notifications API 是现代浏览器提供的一个强大功能，它允许网页向用户发送通知，即使在用户没有打开网页的情况下也能工作。这个 API 的使用非常简单，但功能却十分强大。

2.2 基本实现步骤

让我们来看看具体的代码实现：

// 检查浏览器是否支持通知

if ("Notification" in window) {

  // 请求用户授权

  Notification.requestPermission().then(function (permission) {

    if (permission === "granted") {

      // 创建并显示通知

      var notification = new Notification("Hello from Web!", {

        body: "这是一条来自网页的通知消息",

        icon: "path/to/icon.png"

      });



      // 点击通知时的行为

      notification.onclick = function() {

        window.open("https://example.com");

      };

    }

  });

}

2.3 优点和注意事项

优点：

– 原生支持，无需额外库

– 可以在用户未浏览网页时发送通知

– 支持富文本和图标

注意事项：

– 需要用户授权，一些用户可能会拒绝

– 不同浏览器的显示样式可能略有不同

– 过度使用可能会引起用户反感

3. 自定义 CSS+JavaScript 实现

如果你想要更多的样式控制，或者希望通知始终显示在网页内，那么使用自定义的 CSS+JavaScript 方案可能更适合你。

3.1 基本思路

3.2 HTML 结构

<div id="notification-container"></div>

3.3 CSS 样式

#notification-container {

  position: fixed;

  bottom: 20px;

  right: 20px;

  z-index: 9999;

}



.notification {

  background-color: #f8f8f8;

  border-left: 4px solid #4CAF50;

  box-shadow: 0 2px 4px rgba(0,0,0,0.2);

  padding: 16px;

  margin-bottom: 10px;

  width: 300px;

  opacity: 0;

  transform: translateX(100%);

  transition: all 0.3s ease-in-out;

}



.notification.show {

  opacity: 1;

  transform: translateX(0);

}



.notification-title {

  font-weight: bold;

  margin-bottom: 5px;

}



.notification-body {

  font-size: 14px;

}

3.4 JavaScript 实现

function showNotification(title, message, duration = 5000) {

  const container = document.getElementById('notification-container');



  const notification = document.createElement('div');

  notification.className = 'notification';



  const titleElement = document.createElement('div');

  titleElement.className = 'notification-title';

  titleElement.textContent = title;



  const bodyElement = document.createElement('div');

  bodyElement.className = 'notification-body';

  bodyElement.textContent = message;



  notification.appendChild(titleElement);

  notification.appendChild(bodyElement);



  container.appendChild(notification);



  // 触发重绘以应用初始样式

  notification.offsetHeight;



  // 显示通知

  notification.classList.add('show');



  // 设置定时器移除通知

  setTimeout(() => {

    notification.classList.remove('show');

    setTimeout(() => {

      container.removeChild(notification);

    }, 300);

  }, duration);

}



// 使用示例

showNotification('Hello', '这是一条自定义通知消息');

3.5 优点和注意事项

优点：

– 完全可定制的外观和行为

– 不需要用户授权

– 可以轻松集成到现有的网页设计中

注意事项：

– 仅在用户浏览网页时有效

– 需要考虑移动设备的适配

– 过多的通知可能会影响页面性能

4. 高级技巧和最佳实践

4.1 通知分级

根据通知的重要性进行分级，可以使用不同的颜色或图标来区分：

function showNotification(title, message, level = 'info') {

  // ... 前面的代码相同



  let borderColor;

  switch(level) {

    case 'success':

      borderColor = '#4CAF50';

      break;

    case 'warning':

      borderColor = '#FFC107';

      break;

    case 'error':

      borderColor = '#F44336';

      break;

    default:

      borderColor = '#2196F3';

  }



  notification.style.borderLeftColor = borderColor;



  // ... 后面的代码相同

}



// 使用示例

showNotification('成功', '操作已完成', 'success');

showNotification('警告', '请注意...', 'warning');

showNotification('错误', '出现问题', 'error');

4.2 通知队列

为了避免同时显示过多通知，我们可以实现一个简单的通知队列：

const notificationQueue = [];

let isShowingNotification = false;



function queueNotification(title, message, duration = 5000) {

  notificationQueue.push({ title, message, duration });

  if (!isShowingNotification) {

    showNextNotification();

  }

}



function showNextNotification() {

  if (notificationQueue.length === 0) {

    isShowingNotification = false;

    return;

  }



  isShowingNotification = true;

  const { title, message, duration } = notificationQueue.shift();

  showNotification(title, message, duration);



  setTimeout(showNextNotification, duration + 300);

}



// 使用示例

queueNotification('通知1', '这是第一条通知');

queueNotification('通知2', '这是第二条通知');

queueNotification('通知3', '这是第三条通知');

4.3 响应式设计

为了确保通知在各种设备上都能正常显示，我们需要考虑响应式设计：

@media (max-width: 768px) {

  #notification-container {

    left: 20px;

    right: 20px;

    bottom: 20px;

  }



  .notification {

    width: auto;

  }

}

4.4 无障碍性考虑

为了提高通知的可访问性，我们可以添加 ARIA 属性和键盘操作支持：

function showNotification(title, message, duration = 5000) {

  // ... 前面的代码相同



  notification.setAttribute('role', 'alert');

  notification.setAttribute('aria-live', 'polite');



  const closeButton = document.createElement('button');

  closeButton.textContent = '×';

  closeButton.className = 'notification-close';

  closeButton.setAttribute('aria-label', '关闭通知');



  closeButton.addEventListener('click', () => {

    notification.classList.remove('show');

    setTimeout(() => {

      container.removeChild(notification);

    }, 300);

  });



  notification.appendChild(closeButton);



  // ... 后面的代码相同

}

5. 性能优化与注意事项

在实现网页通知功能时，我们还需要注意以下几点：

网页通知是一个强大的功能，能够显著提升用户体验和网站的互动性。无论是使用 Web Notifications API 还是自定义的 CSS+JavaScript 方案，都能实现类似 QQ 那样的右下角消息通知。选择哪种方式取决于你的具体需求和目标用户群。通过合理使用通知功能，你可以让你的网站变得更加生动和用户友好。

是的，最近又踩坑了！

事情是这样的，我们测试小姐姐在一个全局搜索框里输入了一串特殊字符“%%%”，然后进行搜索，结果报错了。而输入常规字符，均可以正常搜索。

一排查，发现特殊字符“%%%”并未成功传给后端。

我们的这个全局搜索功能是需要跳转页面才能查看到搜索结果的。所以，搜索条件是作为参数拼接在页面url上的。

正常的传参：

当输入的是特殊字符“%、#、&”时，参数丢失

也就是说，当路由请求参数带有浏览器url中的特殊含义字符时，参数会被截断，无法正常获取参数。

那么怎么解决这个问题呢？

方案一：encodeURIComponent/decodeURIComponent

拼接参数时，利用encodeURIComponent()进行编码，接收参数时，利用decodeURIComponent()进行解码。

// 编码

this.$router.push({path: `/crm/global-search/search-result?type=${selectValue}&text=${encodeURIComponent(searchValue)}`});



// 解码

 const text = decodeURIComponent(this.$route.query.text)

此方法对绝大多数特殊字符都适用，但是唯独输入“%”进行搜索时不行，报错如下。

所以在编码之前，还需进行一下如下转换：

this.$router.push({path: `/crm/global-search/search-result?type=${selectValue}&text=${encodeURIComponent(encodeSpecialChar(searchValue))}`});





/**

 * @param {*} char 字符串

 * @returns

 */

export const encodeSpecialChar = (char) => {

  // #、&可以不用参与处理

  const encodeArr = [{

    code: '%',

    encode: '%25'

  },{

    code: '#',

    encode: '%23'

  }, {

    code: '&',

    encode: '%26'

  },]

  return char.replace(/[%?#&=]/g, ($) => {

    for (const k of encodeArr) {

      if (k.code === $) {

        return k.encode

      }

    }

  })

}

方案二： qs.stringify()

默认情况下，qs.stringify()方法会使用encodeURIComponent方法对特殊字符进行编码，以保证URL的合法性。

const qs = require('qs');



const searchObj = {

  type: selectValue,

  text: searchValue

};

this.$router.push({path: `/crm/global-search/search-result?${qs.stringify(searchObj)}`});

使用了qs.stringify()方法，就无需使用encodeSpecialChar方法进行转换了。

在前端开发中，代码的重复度是一个常见的问题。重复的代码不仅增加了代码的维护成本，还可能导致程序的低效运行。为了解决这个问题，有许多工具和技术被用来检测和消除代码重复。其中一个被广泛使用的工具就是jscpd。

jscpd简介

jscpd是一款开源的JavaScript的工具库，用于检测代码重复的情况，针对复制粘贴的代码检测很有效果。它可以通过扫描源代码文件，分析其中的代码片段，并比较它们之间的相似性来检测代码的重复度。jscpd支持各种前端框架和语言，包括HTML、CSS和JavaScript等150种的源码文件格式。无论是原生的JavaScript、CSS、HTML代码，还是使用typescript、scss、vue、react等代码，都能很好的检测出项目中的重复代码。

开源仓库地址：github.com/kucherenko/jscpd/tree/master

如何使用

使用jscpd进行代码重复度检测非常简单。我们需要安装jscpd。可以通过npm或yarn来安装jscpd。

npm install -g jscpd

yarn global add jscpd

安装完成后，我们可以在终端运行jscpd命令，指定要检测的代码目录或文件。例如，我们可以输入以下命令来检测当前目录下的所有JavaScript文件：

jscpd .

指定目录检测：

jscpd /path/to/code

在命令行执行成功后的效果如下图所示：

简要说明一下对应图中的字段内容：

• Clone found (javascript)：
  显示找到的重复代码块，这里是javascript文件。并且会显示重复代码在文件中具体的行数，便于查找。


• Format：文件格式，这里是 javascript，还可以是 scss、markup 等。


• Files analyzed：已分析的文件数量，统计被检测中的文件数量。


• Total lines：所有文件的总行数。


• Total tokens：所有的token数量，一行代码一般包含几个到几十个不等的token数量。


• Clones found：找到的重复块数量。


• Duplicated lines：重复的代码行数和占比。


• Duplicated tokens：重复的token数量和占比。


• Detection time：检测耗时。

工程配置

以上示例是比较简单直接检测单个文件或文件夹。当下主流的前端项目大多都是基于脚手架生成或包含相关前端工程化的文件，由于很多文件是辅助工具如依赖包、构建脚本、文档、配置文件等，这类文件都不需要检测，需要排除。这种情况下的工程一般使用配置文件的方式，通过选项配置规范 jscpd 的使用。

jscpd 的配置选项可以通过以下两种方式创建，增加的内容都一致无需区分对应的前端框架。

在项目根目录下创建配置文件 .jscpd.json，然后在该文件中增加具体的配置选项：

    {

      "threshold": 0,

      "reporters": ["html", "console", "badge"],

      "ignore": ["**/__snapshots__/**"],

      "absolute": true

    }

也可直接在 package.json 文件中添加jscpd：

    {

      ...

      "jscpd": {

        "threshold": 0.1,

        "reporters": ["html", "console", "badge"],

        "ignore": ["**/__snapshots__/**"],

        "absolute": true,

        "gitignore": true

      }

      ...

    }

简要介绍一下上述配置字段含义：

• threshold：表示重复度的阈值，超过这个值，就会输出错误报警。如阈值设为 10，当重复度为18.1%时，会提示以下错误❌，但代码的检测会正常完成。

ERROR: jscpd found too many duplicates (18.1%) over threshold (10%)

• reporters：表示生成结果检测报告的方式，一般有以下几种：
  
  
  
  • console：控制台打印输出
  
  
  • consoleFull：控制台完整打印重复代码块
  
  
  • json：输出 json 格式的报告
  
  
  • xml：输出 xml 格式的报告
  
  
  • csv：输出 csv 格式的报告
  
  
  • markdown：输出带有 markdown 格式的报告
  
  
  • html：生成html报告到html文件夹
  
  
  • verbose：输出大量调试信息到控制台
  
  
  
  


• ignore：检测忽略的文件或文件目录，过滤一些非业务代码，如依赖包、文档或静态文件等


• format：需要进行重复度检测的源代码格式，目前支持150多种，我们常用的如 javascript、typescript、css 等


• absolute：在检测报告中使用绝对路径

除此之外还有很多其他的配置，有兴趣的可以看源码文档中有详细的介绍。

检测报告

完成以上jscpd配置后执行以下命令即可输出对应的重复检测报告。运行完毕后，jscpd会生成一个报告，展示每个重复代码片段的信息。报告中包含了重复代码的位置、相似性百分比和代码行数等详细信息。通过这些信息，我们可以有针对性的进行代码重构。

jscpd ./src -o 'report'

项目中的业务代码通常会选择放在 ./src 目录下，所以可以直接检测该目录下的文件，如果是放在其他目录下根据实际情况调整即可。
通过命令行参数-o 'report'输出检测报告到项目根目录下的 report 文件夹中，这里的report也可以自定义其他目录名称，输出的目录结构如下所示：

生成的报告页面如下所示：

项目概览数据：

具体重复代码的位置和行数：

默认检测重复代码的行数（5行）和tokens（50）比较小，所以产生的重复代码块可能比较多，在实际使用中可以针对检测范围进行设置，如下设置参数供参考：

• 最小tokens：--min-tokens，简写 -k


• 最小行数：--min-lines，简写 -l


• 最大行数：--max-lines，简写 -x

jscpd ./src --min-tokens 200 --min-lines 20 -o 'report'

为了更便捷的使用此命令，可将这段命令集成到 package.json 中的 scripts 中，后续只需执行 npm run jscpd 即可执行检测。如下所示：

"scripts": {

  ...

  "jscpd": "jscpd ./src --min-tokens 200 --min-lines 20 -o 'report'",

  ...

}

忽略代码块

上面所提到的ignore可以忽略某个文件或文件夹，还有一种忽略方式是忽略文件中的某一块代码。由于一些重复代码在实际情况中是必要的，可以使用代码注释标识的方式忽略检测，在代码的首尾位置添加注释，jscpd:ignore-start 和 jscpd:ignore-end 包裹代码即可。

在js代码中使用方式：

/* jscpd:ignore-start */

import lodash from 'lodash';

import React from 'react';

import {User} from './models';

import {UserService} from './services';

/* jscpd:ignore-end */

在CSS和各种预处理中与js中的用法一致：

/* jscpd:ignore-start */

.style {

  padding: 40px 0;

  font-size: 26px;

  font-weight: 400;

  color: #464646;

  line-height: 26px;

}

/* jscpd:ignore-end */

在html代码中使用方式：

<!--

// jscpd:ignore-start

-->

<meta data-react-helmet="true" name="theme-color" content="#cb3837"/>

<link data-react-helmet="true" rel="stylesheet" href="https://static.npmjs.com/103af5b8a2b3c971cba419755f3a67bc.css"/>

<link data-react-helmet="true" rel="apple-touch-icon" sizes="120x120" href="https://static.npmjs.com/58a19602036db1daee0d7863c94673a4.png"/>

<link data-react-helmet="true" rel="icon" type="image/png" href="https://static.npmjs.com/b0f1a8318363185cc2ea6a40ac23eeb2.png" sizes="32x32"/>

<!--

// jscpd:ignore-end

-->

总结

jscpd是一款强大的前端本地代码重复度检测工具。它可以帮助开发者快速发现代码重复问题，简单的配置即可输出直观的代码重复数据，通过解决重复的代码提高代码的质量和可维护性。

使用jscpd我们可以有效地优化前端开发过程，提高代码的效率和性能。希望本文能够对你了解基于jscpd的前端本地代码重复度检测有所帮助。

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）

前言

换肤功能是一项普遍的需求，尤其是在夜晚，用户更倾向于使用暗黑模式。在我负责的公司项目中，每个项目都有换肤功能的需求。

过去，我主要使用 SCSS 变量，并利用其提供的函数，如 @each、map-get来实现换肤功能。但因其使用成本高，只能适用于SCSS项目，于是后来我改用 CSS 变量来实现换肤。这样无论是基于 LESS 的 React 项目，还是基于 SCSS 的 Vue 项目，都能应用换肤功能。并且使用时只需调用var函数，降低了使用成本。

Demo地址：github.com/cwjbjy/vite…

1. 一键换肤

1. 前置知识

CSS变量：声明自定义CSS属性，它包含的值可以在整个文档中重复使用。属性名需要以两个减号（--）开始，属性值则可以是任何有效的 CSS 值

--fontColor:'#fff'

Var函数：用于使用CSS变量。第一个参数为CSS变量名称，第二个可选参数作为默认值

color: var(--fontColor);

CSS属性选择器：匹配具有特定属性或属性值的元素。例如[data-theme='black']，将选择所有 data-theme 属性值为 'black' 的元素

2. 定义主题色

1. 新建src/assets/theme/theme-default.css

这里定义字体颜色与布局的背景色，更多CSS变量可根据项目的需求来定义

[data-theme='default'] {

  /* 字体 */

  --font-primary: #fff;

  --font-highlight: #434a50;

  /* 布局 */

  --background-header: #2f3542;

  --background-aside: #545c64;

  --background-main: #0678be;

}

2. 新建src/assets/theme/theme-black.css

再定义一套暗黑主题色

[data-theme='black'] {

  /* 字体 */

  --font-primary: #fff;

  --font-highlight: #434a50;

  /* 布局 */

  --background-header: #303030;

  --background-aside: #303030;

  --background-main: #393939;

}

3. 新建src/assets/theme/index.css

在index.css文件中导出全部主题色

@import './theme-default.css'; 

@import './theme-black.css';

4. 引入全局样式

在入口文件引入样式，比如我这里是main.tsx

import '@/assets/styles/theme/index.css';

3. 在html标签上增加自定义属性

修改index.html，在html标签上增加自定义属性data-theme

<html lang="en" data-theme="default"></html>

这里使用data-theme是为了被CSS属性选择器[data-theme='default']选中，也可更换为其他自定义属性，只需与CSS属性选择器对应上即可。

4. 修改CSS主题色

关键点：监听change事件，使用document.documentElement.setAttribute动态修改data-theme属性，然后CSS属性选择器将自动选择对应的css变量

<template>

  <div>

    <select name="pets" @change="handleChange">

      <option value="default">默认色</option>

      <option value="black">黑色</option>

    </select>

    <div>登录页面</div>

  </div>

</template>



<script setup lang="ts">

const handleChange = (e: Event) => {

  window.document.documentElement.setAttribute('data-theme', (e.target as HTMLSelectElement).value);

};

</script>



<style lang="scss">

body {

  color: var(--font-primary);

  background-color: var(--background-main);

}

</style>

效果图，默认色：

效果图，暗黑色：

5. 修改JS主题色

切换主题色，除了需要修改css样式，有时也需在js文件中修改样式，例如修改echarts的配置文件，来改变柱状图、饼图等的颜色。

1. 新建src/config/theme.js

定义图像的颜色，这里定义字体的颜色，默认情况下字体为黑色，暗黑模式下，字体为白色

const themeColor = {

  default: {

    font: '#333',

  },

  black: {

    font: '#fff',

  },

};



export default themeColor;

2. 修改vue文件

关键点：

完整的vue文件：

<template>

  <div>

    <select name="pets" @change="handleChange">

      <option value="default">默认色</option>

      <option value="black">黑色</option>

    </select>

    <div>登录页面</div>

    <div ref="echartRef" class="myChart"></div>

  </div>

</template>



<script setup lang="ts">

import { onMounted, ref, watch } from 'vue';

import themeColor from '@/config/theme';

import * as echarts from 'echarts';



type ThemeTypes = 'default' | 'black';



const echartRef = ref<HTMLDivElement | null>(null);

const theme = ref<ThemeTypes>('default');

const handleChange = (e: Event) => {

  const selectTheme = (e.target as HTMLSelectElement).value as ThemeTypes;

  theme.value = selectTheme;

  window.document.documentElement.setAttribute('data-theme', selectTheme);

};



const drawGraph = () => {

  let echartsInstance = echarts.getInstanceByDom(echartRef.value!);

  if (!echartsInstance) {

    echartsInstance = echarts.init(echartRef.value);

  }

  echartsInstance.clear();

  var option = {

    color: ['#3398DB'],

    title: {

      text: '柱状图',

      left: 'center',

      textStyle: {

        color: themeColor[theme.value].font,

      },

    },

    xAxis: [

      {

        type: 'category',

        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

        axisLabel: {

          show: true,

          color: themeColor[theme.value].font,

        },

        nameTextStyle: {

          color: themeColor[theme.value].font,

        },

      },

    ],

    yAxis: [

      {

        type: 'value',

        axisLabel: {

          show: true,

          color: themeColor[theme.value].font,

        },

        nameTextStyle: {

          color: themeColor[theme.value].font,

        },

      },

    ],

    series: [

      {

        name: '直接访问',

        type: 'bar',

        barWidth: '60%',

        data: [10, 52, 200, 334, 390, 330, 220],

      },

    ],

  };



  echartsInstance.setOption(option);

};

onMounted(() => {

  drawGraph();

});

watch(theme, () => {

  drawGraph();

});

</script>



<style lang="scss">

body {

  color: var(--font-primary);

  background-color: var(--background-main);

}

.myChart {

  width: 300px;

  height: 300px;

}

</style>

2. 一键变灰

在特殊的日子里，网页有整体变灰色的需求。可以使用filter 的 grayscale() 改变图像灰度，值在 0% 到 100% 之间，值为0%展示原图，值为100% 则完全转为灰度图像

body {

  filter: grayscale(1); //1相当于100%

}

结尾

本文只是介绍大概的思路，更多的功能可根据业务增加。例如将主题色theme存储到pinia上，应用到全局上；将主题色存储到localStorage上，在页面刷新时，防止主题色恢复默认。

本文可结合以下文章阅读：

如果有更多的换肤方案，欢迎在留言区留言讨论。我会根据留言区内容实时更新。

近期产品期望在后台发布帖子或视频时，需要添加 @用户 的功能，以便用户收到通知，例如“xxx在xxx提及了您！”。然而，现有的开源库未能满足我们的需求，例如 ant-design 的 Mentions 组件：

但是不难发现跟微信飞书对比下，有两个细节没有处理。

然后也是找了其他的库都没达到产品的期望效果，那么好，自己实现一个，先看看最终实现的效果：

封装之后使用：

<AtInput

    height={150}

    onRequest={async (searchStr) => {

        const { data } = await UserFindAll({ nickname: searchStr });

        return data?.list?.map((v) => ({

            id: v.uid,

            name: v.nickname,

            wechatAvatarUrl: v.wechatAvatarUrl,

        }));

    }}

    onChange={(content, selected) => {

        setAtUsers(selected);

    }}

/>

那么实现这么一个输入框大概有以下几个点：

大多数文本输入框我们会使用input,或者textarea,很明显以上1,2两点实现不了，antd也是使用的textarea，所以也是没有实现这两个效果。所以这块使用富文本编辑，设置contentEditable,将其变为可编辑去做。输入框以及选择器的dom就如下:

 <div style={{ height, position: 'relative' }}>

       {/* 编辑器 */}

       <div 

           id="atInput" 

           ref={atRef} 

           className={'editorDiv'} 

           contentEditable 

           onInput={editorChange} 

           onClick={editorClick} 

       />

       {/* 选择用户框 */}

       <SelectUser 

           options={options} 

           visible={visible} 

           cursorPosition={cursorPosition} 

           onSelect={onSelect} 

       />

 </div>

实现思路：

以上提到了监听@文本变化，通常绑定onChange事件就行，但是还有一种用户通过点击移动光标，这块需要绑定change,click两个时间，他们里边的逻辑基本一样，只需要额外处理点击选中输入框中用户时，整体选中g功能，那么代码如下：

    const onObserveInput = () => {

        let cursorBeforeStr = '';

        const selection: any = window.getSelection();

        if (selection?.focusNode?.data) {

            cursorBeforeStr = selection.focusNode?.data.slice(0, selection.focusOffset);

        }

        setFocusNode(selection.focusNode);

        const lastAtIndex = cursorBeforeStr?.lastIndexOf('@');

        setCurrentAtIdx(lastAtIndex);

        if (lastAtIndex !== -1) {

            getCursorPosition();

            const searchStr = cursorBeforeStr.slice(lastAtIndex + 1);

            if (!StringTools.isIncludeSpacesOrLineBreak(searchStr)) {

                setSearchStr(searchStr);

                fetchOptions(searchStr);

                setVisible(true);

            } else {

                setVisible(false);

                setSearchStr('');

            }

        } else {

            setVisible(false);

        }

    };



    const selectAtSpanTag = (target: Node) => {

        window.getSelection()?.getRangeAt(0).selectNode(target);

    };



    const editorClick = async (event) => {

        onObserveInput();

        // 判断当前标签名是否为span 是的话选中当做一个整体

        if (e.target.localName === 'span') {

            selectAtSpanTag(e.target);

        }

    };



    const editorChange = (event) => {

        const { innerText } = event.target;

        setContent(innerText);

        onObserveInput();

    };

每次点击或者文本改变时都会去调用onObserveInput，以上onObserveInput该方法中主要做了以下逻辑：

• 在此之前需要先了解 Selection的一些方法

 const getCursorPosition = () => {

        // 坐标相对浏览器的坐标

        const { x, y } = window.getSelection()?.getRangeAt(0).getBoundingClientRect() as any;

        // 获取编辑器的坐标

        const editorDom = window.document.querySelector('#atInput');

        const { x: eX, y: eY } = editorDom?.getBoundingClientRect() as any;

        // 光标所在位置

        setCursorPosition({ x: x - eX, y: y - eY });

};

选择器弹出后，那么下面就到了选择用户之后的流程了，

 /**

     * @param id 唯一的id 可以uid

     * @param name 用户姓名

     * @param color 回显颜色

     * @returns

     */

    const createAtSpanTag = (id: number | string, name: string, color = 'blue') => {

        const ele = document.createElement('span');

        ele.className = 'at-span';

        ele.style.color = color;

        ele.id = id.toString();

        ele.contentEditable = 'false';

        ele.innerText = `@${name}`;

        return ele;

    };



    /**

     * 选择用户时回调

     */

    const onSelect = (item: Options) => {

        const selection = window.getSelection();

        const range = selection?.getRangeAt(0) as Range;

        // 选中输入的 @关键字  -> @郑

        range.setStart(focusNode as Node, currentAtIdx!);

        range.setEnd(focusNode as Node, currentAtIdx! + 1 + searchStr.length);

        // 删除输入的 @关键字

        range.deleteContents();

        // 创建元素节点

        const atEle = createAtSpanTag(item.id, item.name);

        // 插入元素节点

        range.insertNode(atEle);

        // 光标移动到末尾

        range.collapse();

        // 缓存已选中的用户

        setSelected([...selected, item]);

        // 选择用户后重新计算content

        setContent(document.getElementById('atInput')?.innerText as string);

        // 关闭弹框

        setVisible(false);

        // 输入框聚焦

        atRef.current.focus();

    };

选择用户的时候需要做的以下以下几点：

最后

在选择的用户或者内容发生改变时将数据抛给父组件

 const getAttrIds = () => {

        const spans = document.querySelectorAll('.at-span');

        let ids = new Set();

        spans.forEach((span) => ids.add(span.id));

        return selected.filter((s) => ids.has(s.id));

    };



    /**  @的用户列表发生改变时，将最新值暴露给父组件 */

    useEffect(() => {

        const selectUsers = getAttrIds();

        onChange(content, selectUsers);

    }, [selected, content]);

完整组件代码

输入框主要逻辑代码：

let timer: NodeJS.Timeout | null = null;



const AtInput = (props: AtInputProps) => {

    const { height = 300, onRequest, onChange, value, onBlur } = props;

    // 输入框的内容=innerText

    const [content, setContent] = useState<string>('');

    // 选择用户弹框

    const [visible, setVisible] = useState<boolean>(false);

    // 用户数据

    const [options, setOptions] = useState<Options[]>([]);

    // @的索引

    const [currentAtIdx, setCurrentAtIdx] = useState<number>();

    // 输入@之前的字符串

    const [focusNode, setFocusNode] = useState<Node | string>();

    // @后关键字 @郑 = 郑

    const [searchStr, setSearchStr] = useState<string>('');

    // 弹框的x,y轴的坐标

    const [cursorPosition, setCursorPosition] = useState<Position>({

        x: 0,

        y: 0,

    });

    // 选择的用户

    const [selected, setSelected] = useState<Options[]>([]);

    const atRef = useRef<any>();



    /** 获取选择器弹框坐标 */

    const getCursorPosition = () => {

        // 坐标相对浏览器的坐标

        const { x, y } = window.getSelection()?.getRangeAt(0).getBoundingClientRect() as any;

        // 获取编辑器的坐标

        const editorDom = window.document.querySelector('#atInput');

        const { x: eX, y: eY } = editorDom?.getBoundingClientRect() as any;

        // 光标所在位置

        setCursorPosition({ x: x - eX, y: y - eY });

    };



    /**获取用户下拉列表 */

    const fetchOptions = (key?: string) => {

        if (timer) {

            clearTimeout(timer);

            timer = null;

        }

        timer = setTimeout(async () => {

            const _options = await onRequest(key);

            setOptions(_options);

        }, 500);

    };



    useEffect(() => {

        fetchOptions();

        // if (value) {

        //     /** 判断value中是否有at用户 */

        //     const atUsers: any = StringTools.filterUsers(value);

        //     setSelected(atUsers);

        //     atRef.current.innerHTML = value;

        //     setContent(value.replace(/<\/?.+?\/?>/g, '')); //全局匹配内html标签)

        // }

    }, []);



    const onObserveInput = () => {

        let cursorBeforeStr = '';

        const selection: any = window.getSelection();

        if (selection?.focusNode?.data) {

            cursorBeforeStr = selection.focusNode?.data.slice(0, selection.focusOffset);

        }

        setFocusNode(selection.focusNode);

        const lastAtIndex = cursorBeforeStr?.lastIndexOf('@');

        setCurrentAtIdx(lastAtIndex);

        if (lastAtIndex !== -1) {

            getCursorPosition();

            const searchStr = cursorBeforeStr.slice(lastAtIndex + 1);

            if (!StringTools.isIncludeSpacesOrLineBreak(searchStr)) {

                setSearchStr(searchStr);

                fetchOptions(searchStr);

                setVisible(true);

            } else {

                setVisible(false);

                setSearchStr('');

            }

        } else {

            setVisible(false);

        }

    };



    const selectAtSpanTag = (target: Node) => {

        window.getSelection()?.getRangeAt(0).selectNode(target);

    };



    const editorClick = async (e?: any) => {

        onObserveInput();

        // 判断当前标签名是否为span 是的话选中当做一个整体

        if (e.target.localName === 'span') {

            selectAtSpanTag(e.target);

        }

    };



    const editorChange = (event: any) => {

        const { innerText } = event.target;

        setContent(innerText);

        onObserveInput();

    };



    /**

     * @param id 唯一的id 可以uid

     * @param name 用户姓名

     * @param color 回显颜色

     * @returns

     */

    const createAtSpanTag = (id: number | string, name: string, color = 'blue') => {

        const ele = document.createElement('span');

        ele.className = 'at-span';

        ele.style.color = color;

        ele.id = id.toString();

        ele.contentEditable = 'false';

        ele.innerText = `@${name}`;

        return ele;

    };



    /**

     * 选择用户时回调

     */

    const onSelect = (item: Options) => {

        const selection = window.getSelection();

        const range = selection?.getRangeAt(0) as Range;

        // 选中输入的 @关键字  -> @郑

        range.setStart(focusNode as Node, currentAtIdx!);

        range.setEnd(focusNode as Node, currentAtIdx! + 1 + searchStr.length);

        // 删除输入的 @关键字

        range.deleteContents();

        // 创建元素节点

        const atEle = createAtSpanTag(item.id, item.name);

        // 插入元素节点

        range.insertNode(atEle);

        // 光标移动到末尾

        range.collapse();

        // 缓存已选中的用户

        setSelected([...selected, item]);

        // 选择用户后重新计算content

        setContent(document.getElementById('atInput')?.innerText as string);

        // 关闭弹框

        setVisible(false);

        // 输入框聚焦

        atRef.current.focus();

    };



    const getAttrIds = () => {

        const spans = document.querySelectorAll('.at-span');

        let ids = new Set();

        spans.forEach((span) => ids.add(span.id));

        return selected.filter((s) => ids.has(s.id));

    };



    /**  @的用户列表发生改变时，将最新值暴露给父组件 */

    useEffect(() => {

        const selectUsers = getAttrIds();

        onChange(content, selectUsers);

    }, [selected, content]);



    return (

        <div style={{ height, position: 'relative' }}>

            {/* 编辑器 */}

            <div id="atInput" ref={atRef} className={'editorDiv'} contentEditable onInput={editorChange} onClick={editorClick} />

            {/* 选择用户框 */}

            <SelectUser options={options} visible={visible} cursorPosition={cursorPosition} onSelect={onSelect} />

        </div>

    );

};

选择器代码

const SelectUser = React.memo((props: SelectComProps) => {

  const { options, visible, cursorPosition, onSelect } = props;



  const { x, y } = cursorPosition;



  return (

    <div

      className={'selectWrap'}

      style={{

        display: `${visible ? 'block' : 'none'}`,

        position: 'absolute',

        left: x,

        top: y + 20,

      }}

    >

      <ul>

        {options.map((item) => {

          return (

            <li

              key={item.id}

              onClick={() => {

                onSelect(item);

              }}

            >

              <img src={item.wechatAvatarUrl} alt="" />

              <span>{item.name}</span>

            </li>

          );

        })}

      </ul>

    </div>

  );

});

export default SelectUser;

以上就是实现一个支持@用户的输入框功能，就目前而言，比较死板，不支持自定义颜色，自定义选择器等等，未来，可以进一步扩展功能，例如添加@用户的高亮样式定制、支持键盘快捷键操作等，从而提升用户体验和功能性。