LNA 是 chrome 从 142 版本开始默认启用的一个功能，简单来说，LNA 出于保护本地服务的目的，会阻拦公网网站向本地网络发起的请求。本地网络的概念可以参考这个链接。

一些参考资料：

chrome blog

chrome status

LNA Adoption Guide

typescript enum 会被编译为 IIFE，因此无法被正常的 treeshaking 掉，如果有 treeshaking 的需求，建议不要使用 typescript 中的 enum

https://juejin.cn/post/7317704485056348211

https://stackoverflow.com/questions/68720866/why-does-webpack-5-include-my-unused-typescript-enum-exports-even-when-tree-sha?newreg=31a9c50b5b8b4fa399d6a8fa847ccd9c

React 中真的处处都是坑（重点）

最初是发现 props 变更时会导致许多不应该发生的 re-render

function App() {
  return (
    <div>
      <Chat class="p-4" messages={messages}></Chat>
      <Button
        type="primary"
        onClick={() => {
          setMessages([
            ...messages,
            {
              id: `${Date.now()}`,
              content: '测试消息',
              role: 'user',
              loading: false,
            },
          ])
        }}
      >
        test add
      </Button>
    </div>
  )
}

const Chat: React.FC<ChatProps> = ({
  difyAPIUrl,
  difyAPIKey,
  messages,
}: ChatProps) => {
  const memoMessages = React.useMemo(() => messages, [messages])

  return (
    <>
      <XProvider theme={theme}>
        <DifyContext value={{ difyAPIUrl, difyAPIKey }}>
          <ChatList messages={memoMessages}></ChatList>
        </DifyContext>
      </XProvider>
    </>
  )
}

function ChatList({ messages }: ChatListProps) {
  const rolesAsObject: GetProp<typeof Bubble.List, 'roles'> = {
    assistant: {
      placement: 'start',
      avatar: { icon: <UserOutlined />, style: { background: '#fde3cf' } },
      typing: { step: 5, interval: 20 },
      styles: {
        content: {
          backgroundColor: 'white',
        },
      },
      variant: 'shadow',
      shape: 'corner',
      messageRender: renderMarkdown,
      classNames: {
        header: 'w-full',
      },
    },
    user: {
      placement: 'end',
      // avatar: { icon: <UserOutlined />, style: { background: '#87d068' } },
      shape: 'corner',
    },
  }

  const renderMessages = useMemo(() => {
    return messages.map((item) => ({
      key: item.id,
      role: item.role,
      content: item.content,
      header: renderWorkflow(item.workflowProcess),
      loading: item.loading ?? false,
    }))
  }, [messages])

  return (
    <>
      <Bubble.List
        items={renderMessages}
        roles={rolesAsObject}
        className="h-full"
      ></Bubble.List>
    </>
  )
}

问题

在微信修改群名称的时候，发现无法使用多个特定的emoji，但是有许多emoji是可以使用多个的。

无法使用的emoji：👨‍👨‍👧‍👧

思路

由技术常识知道，emoji底层本质上也是Unicode编码的符号，那有没有可能是个别emoji的底层Unicode编码过长导致的呢？我们需要途径去查看emoji的Unicode编码，可以通过这个网站去查看（Unicode Full Emoji List）。这个网站包含了所有最新的emoji，因此加载的时候比较慢。

背景

// 用于匹配是否被 i18n 块包裹
const i18nKeyPattern =
  /(?:i18n(?:-\w+)?[ (\n]\s*(?:key)?path=|v-t=['"`{]|(?:this\.|\$|i18n\.|[^\w\d])(?:t|tc|te)\()\s*['"`](.*?)['"`]/gm
const str = "$t('当有效期结束时间到了，是否直接下线？')"

// Array(2) ["$t('当有效期结束时间到了，是否直接下线？'", "当有效期结束时间到了，是否直接下线？"]
i18nKeyPattern.exec(value)
// null
i18nKeyPattern.exec(value)

// true
i18nKeyPattern.test(value)
// false
i18nKeyPattern.test(value)

问题现象

在 Vitepress 中引入组件与样式时，报找不到路径的问题。

<script setup>
import { SearchUser } from '@***/bdi-component'
import '@***/bdi-component/dist/style.css'
</script>

现象

在我们写 Vue 组件时，经常会遇到自定义 v-model 或 prop.sync 的需求。一般来说，我们有两种方法实现这种需求：

1. 组件内部定义一个变量，使用两个 watch 分别监听 props 和 内部变量的变更，前者初始化内部变量，后者在内部变量变更时 emit 一个 input / update:prop 事件使外部变量同步变更。
2. 组件内部使用一个 computed 变量，定义它的 get 方法为获取 props 值，set 方法为 emit 事件。

@apply 指令

由于是 tailwindcss 切 unocss，其中有 @apply 指令还是挺好用的。在 unocss 这边，有两种实现方式：

1. 使用 @unocss/transformer-directives ，该方案仅支持 Vite
2. 使用 @unocss/postcss ，该方案支持 Webpack 但需要安装 postcss

由于项目较大，目前暂时不考虑迁移 Vite ，因此只能采用 postcss 的方案来支持 @apply。

背景

由于项目中 lock 文件被删，重新安装依赖后发现许多依赖都自动升级到最新版本了，因此想着干脆对项目中的依赖进行一次统一升级。在升级了 webpack 后，顺便将一些 loader 也进行升级，升级后出现了一系列的问题。

mini-css-extract-plugin 导致 url() 引入报错

今天在 1.3.9 版本时，发现 publicPath 设成 '../' 时，引入的字体文件链接变成了这样：src:url([file:///Users/crab.huang/Project/abtest.web/node_modules/.pnpm/css-loader@6.7.3_webpack@5.77.0/node_modules/css-loader/dist/cjs.js!/Users/crab.huang/Project/abtest.web/node_modules/.pnpm/less-loader@3.0.0_less@2.7.0/node_modules/less-loader/lib/loader.js!/Users/crab.huang/Project/abtest.web/src/common/font/element-icons.ttf](file:///Users/crab.huang/Project/abtest.web/node_modules/.pnpm/css-loader@6.7.3_webpack@5.77.0/node_modules/css-loader/dist/cjs.js!/Users/crab.huang/Project/abtest.web/node_modules/.pnpm/less-loader@3.0.0_less@2.7.0/node_modules/less-loader/lib/loader.js!/Users/crab.huang/Project/abtest.web/src/common/font/element-icons.ttf))

前提

前端使用 Vue 搭建，后端使用 springboot + spring security，各自分离部署，这是前提。

问题

在一天中午，某位测试同学丢过来一个缺陷，说这边登出后重新访问注册、找回密码等接口会报错，但是第二次就访问成功了。这个还是挺出奇的，毕竟没有遇到过相关的问题，马上上系统查看问题。

首先自己根据测试同学给出来的复现步骤（登录-登出-调用注册、找回密码等接口）执行了一遍，打开F12，看到了一个奇怪的报错——302？！