链接 :https://blog.gitborlando.com/LeetCode%E7%9A%84%E4%B8%80%E4%B8%AA%E7%AE%97%E6%B3%95%E5%B8%AE%E6%88%91%E8%A7%A3%E5%86%B3%E4%BA%86%E5%B7%A5%E4%BD%9C%E6%A3%98%E6%89%8B%E9%97%AE%E9%A2%98/LeetCode%E7%9A%84%E4%B8%80%E4%B8%AA%E7%AE%97%E6%B3%95%E5%B8%AE%E6%88%91%E8%A7%A3%E5%86%B3%E4%BA%86%E5%B7%A5%E4%BD%9C%E6%A3%98%E6%89%8B%E9%97%AE%E9%A2%98

官网：https://vue-echarts.dev

GitHub：https://github.com/ecomfe/vue-echarts

ECharts 6 支持

ECharts 6 带来了全新的主题、新的系列和布局机制，是官方近年来最重要的一次更新。我们为 Vue ECharts 适配了 ECharts 6 的新功能，并且将依赖的 ECharts 版本也更新为了 6.0.0 以上。想了解 ECharts 6 的具体特性，建议直接阅读官方的新版功能介绍，在此不再赘述。

停止支持 Vue 2

我们在支持 ECharts 6 的同时，选择同步放弃 Vue 2 支持。Vue 2 已经在 2023 年底到达终止支持时间，在 Vue ECharts 8.0 放弃 Vue 2 可以让我们移除对 vue-demi 的依赖、提供更一致的类型并且简化打包流程，从而提高库的稳定性和可维护性。如果你依然要在 Vue 2 项目中使用，请继续使用 Vue ECharts 7 。

tooltip 和 dataView 插槽支持

在 ECharts 中，自定义 tooltip 内容需要编写 formatter(params) 返回 HTML 字符串或 DOM 节点，自定义数据视图则要在 option.toolbox.feature.dataView.optionToContent(opt) 中做类似处理 。这一模式既不易复用，也难以与 Vue 的声明式渲染相结合。Vue ECharts 8.0 为这两个功能引入了插槽 API ，将这些回调映射为模板插槽。你可以在组件内写：

<VChart :option="option"> <template #tooltip="p"> <div class="tooltip"> <span v-html="p.marker" /> <strong>{{ p.seriesName }}</strong><br/> {{ formatDate(p.name) }}: {{ formatNumber(p.value) }} <HolidayBadge v-if="isHoliday(p.name)" /> </div> </template> <template #dataView="opt"> <table> <tbody> <tr v-for="(v, i) in opt.series?.[0]?.data ?? []" :key="i"> <td>{{ opt.xAxis?.[0]?.data?.[i] ?? i }}</td> <td>{{ v }}</td> </tr> </tbody> </table> </template> </VChart> 

这样，你就可以直接在 Vue 模板中使用计算属性、条件渲染及组件组合，利用 Vue 的响应式更新同步管理原本依赖字符串拼接和手工操作 DOM 的内容。这是新版本对开发体验提升最明显的功能之一，欢迎大家升级体验。

利用新 API ，短短几行代码即可实现在 tooltip 中渲染嵌套图表

智能更新

除了插槽，我们还为数据更新设计了智能更新策略。默认情况下，当 option 改变时，Vue ECharts 会分析数据更新的差异，决定哪些对象需要合并、哪些需要替换，自动设置 replaceMerge；如果操作风险较大则采用 notMerge: true。若需要完全控制更新逻辑，仍可通过 update-options 或开启 manual-update 来进行手动控制。

删除 CSP 入口

此前我们提供了专用的 vue-echarts/csp 入口，以便在启用严格 CSP 时或者 SSR 环境下加载无内联样式的版本。我们在 8.0 移除了该入口，并提供了一个新的在运行时注入内联样式的方案，在绝大多数情况下都不再需要提供无样式版本并在应用中手动引入样式文件。仅当你同时启用严格的 CSP 且目标浏览器不支持 CSSStyleSheet() API 时，才需要手动引入 vue-echarts/style.css。这意味着绝大部分项目可以直接使用默认入口，不再需要为 CSP 维护额外配置。

工程化更新

Vue ECharts 至今已有九年历史。长时间积累的工程配置与依赖在现代前端环境下显得陈旧。本次版本更新中，我们重构了项目的工具链和相关配置，将构建、测试和发布流程全面现代化：

• 升级到 ESLint flat config
• 库本身从 Rollup 切换到使用 tsdown 构建
• 从为了同时兼容 Vue 2/3 而手写的类型声明迁移到自动生成
• 迁移到 npm trusted publishing
• Demo 站点从 webpack + Vue CLI 迁移到 Vite （ rolldown-vite ）
• 接入了 Renovate ，自动更新依赖
• 新增了基于 Vitest 的单元测试，并借助 Codex 和 Copilot 的 coding agent 实现了 100% 的分支覆盖率

这些改动主要集中在维护者和工具链层面，对 API 使用者影响有限，但意味着长期使用该库的项目可以在更现代的基础上继续前进。

新版官网

借助 AI 和 Vibe coding ，我们为 Vue ECharts 的官网进行了一次设计更新，希望大家能喜欢。主要改动如下：

• 官网设计改版
• 新增深色模式支持
• 在 import 代码生成器中，使用 Monaco editor 代替之前的原生 <textarea> + esbuild-wasm + Highlight.js 的方案

项目主页

深色模式 + import 代码生成器

团队与维护

Last but not least ，在 8.0 设计、迭代、发布的过程中，我们迎来了新的团队成员 @kingyue737，可以说他主导了 8.0 版本大部分功能的实现，包括插槽 API 的实现、工具链的重构升级等等。有兴趣的话可以在 GitHub 上关注他：https://github.com/kingyue737

最后

欢迎大家尝试使用新版本，并且通过 GitHub issue 反馈问题和建议。

1. 我想知道从技术上了解一下这种脚手架设计的核心思想是啥？有没有一些思考的文章。
2. 想知道一下各位在使用过程中的痛点是啥，以及这种前端脚手架在选型的关注点是什么。

在 v2 发贴问过类似的问题，大神根据我的描述，建议我自己开发。。。（技术咖解决问题总是这么干脆粗暴） 快接近放弃的时候，找到了一个国产的，号称只需要几行代码就可以实现的牛逼翻译，关键免费！然后试了下，发现有两种。一种是前端页面翻译，代码不变（ app 也可以用，自己找找文档）。另一种是直接给你翻译成 html ，你自己绑个域名就能访问小语种的方式，非常适合 seo ，收录出词都正常。 前者叫：translate.js ( https://gitee.com/mail_osc/translate) 后者叫：TCDN （ https://translate.zvo.cn/236899.html ）

在 github 和 gitee 上能搜到。

要说明的是 translate.js 纯免费，TCDN 是私有部署也是免费的。看他们官方群里消息貌似是由 gitee 和 oschina 这些大平台提供的免费算力。

反正，比 i18n 操作要简单了。好东西，值得为他推荐！

比如说有什么收集 css 动画，开源的模板什么的

刷短视频经常能刷到营销号分享这类消息，不知道自己想找的话应该去哪找

https://www.reddit.com/r/reactjs/comments/1dz9k6p/how_do_you_feel_about_antd/

我的平台是一个学习网站，我希望用户在学习完后点击分享到 Twitter 中能够展示一个比较美观的缩略图卡片，提高点击率。

网站是用 Nuxt 编写的，刚好发现 nuxt-og-image 完全符合我的需求。我编写了一个模板，本地测试没问题。

我的网站是部署在 CloudFlare 的 Pages 中，我发现使用默认的模板可以正常渲染，但使用我自定义的模板访问 OG 图片就会提示超出 CPU 时间限制。

因此我升级了 CloudFlare ，使用付费版发现还是不行。

这是我的代码，感觉也不是很复杂

<template> <div style=" width: 1200px; height: 630px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(145deg, #ffffff 30%, #0ea5e9 100%); border-radius: 32px; font-family: sans-serif; color: #111827; position: relative; overflow: hidden; padding: 80px; text-align: center; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); " > <p style=" font-size: 32px; font-weight: 700; color: #0284c7; margin: 0 0 30px 0; " > 🚀 xxxxxxxxx! </p> <h1 style=" font-size: 76px; font-weight: 900; margin: 0 0 25px 0; line-height: 1.2; " > xxxxxxxx </h1> <p style=" font-size: 28px; font-weight: 600; color: #374151; margin: 0 0 35px 0; max-width: 900px; line-height: 1.3; " > xxxxxxxx </p> <p style=" font-size: 36px; font-weight: 900; color: #0284c7; margin: 0 0 10px 0; " > Alice </p> <div style=" width: 80px; height: 4px; background: #0284c7; border-radius: 2px; margin: 0 0 30px 0; " ></div> <p style=" font-size: 24px; color: #374151; margin: 0 0 40px 0; font-weight: 500; " > xxxxxxx </p> <div style=" position: absolute; right: 80px; bottom: 60px; font-size: 200px; color: rgba(16, 185, 129, 0.05); " > 🏆 </div> <div style=" font-size: 20px; font-weight: 400; /* 普通字重 */ color: #6b7280; /* 淡灰色 */ position: absolute; bottom: 35px; /* 靠近底部 */ text-align: center; " > Shared from xxxxxx </div> </div> </template> 

请教各位大佬，有没有比较简洁快速的解决方案。

另外 deepseek 好会吹，我以前简历就只会说这个项目做了啥啥功能，现在直接把简历喂给他让他给我吹牛逼就行了。

大家还有什么可以补充的吗？或者说说你的看法

想问下目前是否有更安全的混淆方式？或者别的前端防破解的方式，比如 wasm

问题 1: 当 initial-scale 设置值为 1 的时候，页面就无法双指放大缩小，不为 1 的时候，就能双指缩放

问题 2: 当 initial-scale 设置值为 0.8 ，minimum-scale 值 0.5 时，页面无法缩小到 minimum-scale 设置的 0.5 比例，只能缩小到 initial-scale 到 0.8

有 v 友遇到过这个问题么，是怎么解决的

interface Test { firstName: string; } 

const form = useForm<Test>({ defaultValues: { firstName: "default", }, onSubmit: async ({ value }) => { console.log(value); }, }); 

<form.Field name="firstName" //... /> 

• 众所周知,实现的越多,那么未来出现错误的概率越大
• 像上面的场景,如果我们想修改firstName为name,那么至少需要修改三次,这极大的增加了代码的不稳定性
• 所以我实现了一个表单库皮影.仅用一次定义,实现了以上所有逻辑

const define = v.object({ firstName: v.optional(v.string(), "default") }); 

• 并且,可以很容易获得类型

type Define=v.InferOutput<typeof define> // 等价于 type Define = { v1: string; }; 

皮影是如何实现上面的逻辑的?

• 首先感谢valibot,上面的代码其实就是一个简单的schema定义
• 皮影实现了一个遍历器,收集相关元数据
• 然后将元数据转换为组件和表单配置
• 使其可以在任何前端框架上使用

定义是固定的,那么怎么实现布局呢?

• 皮影实现了布局移动,通过layout方法可以将任何控件移动到可以存在子级的 schema 中

v.intersect([ v.pipe(v.object({}), setAlias("scope1")), v.object({ key1: v.pipe( v.object({ test1: v.pipe(v.optional(v.string(), "value1"), layout({ keyPath: ["#", "@scope1"] })), }), ), }), ]); 

• 也就是说,定义虽然是固定的,但是在视图中是可以自由决定位置的,做到了定义与视图位置分离
• 关于object的字段顺序,则可以参照 MDN

如何进行更加高级的布局?

• 我们都知道,有时候不仅仅要显示字段,可能还需要更多额外的功能
• 比如控件的标签,验证,悬停提示,则可以通过包装器实现

v.pipe(v.number(), v.title("k2-label"), setWrappers(["label"])); 

• 而如果要修改空间组的样式,则可以自定义组件

  虽然包装器也可以用于控件组,但是直接自定义会更方便些

v.pipe( v.object({ k1: v.pipe(v.string(), v.title("k1-label"), setWrappers(["label"])), k2: v.pipe(v.number(), v.title("k2-label"), v.minValue(10), setWrappers(["label", "validator"])), }), setComponent("fieldset"), ); 

如何自定义包装器/组件?

• 上面的一些代码,我并没有说是应用于哪个前端框架,因为它们都是通用的
• 而包装器和组件的定义却是每个框架各有不同的方法
• 大家可以查看快速开始查找自己所使用的框架的定义方法.

现在是否可以使用?

• 皮影表单在正式开源之前,已经经过半年以上的内部使用,绝大部分功能已经经过严格的测试.代码覆盖率达到了 95%以上;完全可以应用于生成环境
• 皮影表单实现了很多的用例演示及对市面上的主流库的用例做了等价的实现,方便大家迁移
• 皮影当前支持Angular,Vue,React,Svelte,Solid
• ngx-formly 用例实现
• vee-validate 用例实现
• formik 用例实现
• react-hook-form 用例实现
• react-tanstack 用例实现

主要难点在于如何在混合模式编辑，有兴趣的朋友可以看一下，希望能助我一臂之力。

github: https://github.com/Auto-Plugin/milkup

小弟不是专业做网页的，让 AI 用 React 做了个页面，本来一切都挺顺利，但是想用 Toast 组件，死活显示不出来。

我以为被什么东西挡住了，结果开一个空页面粘贴文档的代码都不显示，AI 也修不好，F12 也没有报错，但是进微软的那个 sandbox 就可以，到底是哪里出问题呢？折磨一天了没弄出来。是不是有什么细节没注意到，请老哥们赐教🙏

浏览器是 EDGE 最新版，React 是 v18 ，FluentUI 是 v9 。

如果现在手搓，最低支持到 IE8 ，建议用什么技术栈？

或者说有没有非常便捷能搓出来的，不要求美观，只要求能跑；

功能就是学校那种建站模板，像学校简介了，教师风采，活动文章等 这一系列的把；

考虑自己会 java 想用 jsp + jquery 直接搓；

或者 纯 Html + jquery ；

UI 考虑 Bootstrap || layui ；

有没有更好的建议；

ps: 不会 PHP

现在已经挂上公告因黑产原因下线，所有资源全部 404 ，如果你的网站调用 https://cdn.bytedance.com/ 的资源那需要立即更换。

服务器端设置了 12 小时的 keep-live ，前端每隔 20 秒发个心跳包，有时候管用，要是碰到国产浏览器、或者移动网络有时候还是活不下来。

以下两个方案，哪个开销更小一些？

1. 不管当前 SSE 链接断没断，在前端定时向后端 /stream/channel/channel_id 发起建立新 SSE 连接。这样会在服务器端造成过多重复连接吗？
2. SSE 每一阶段数据传完了在前端触发 eventSource.close(); 需要接受数据的时候，再由用户触发 ReconnectToSSE()。

碰到页面 SSE 连接总是被自动断开，还有什么好的方式处理吗？

如果没有用 stylus 写页面，那可以在 package.json 中添加

"resolutions": { "stylus": "npm:empty-npm-package@1.0.0" }, 

如果 package.json 中已经显示的声明了 stylus 包，可以直接把
"stylus": "^0.54.4", 替换为 "stylus": "https://github.com/stylus/stylus/archive/0.54.4.tar.gz",

如果 package.json中没有显示声明 stylus ，而是依赖包的依赖包有用到这个，那可以用

"resolutions": { "stylus": "github:stylus/stylus#0.54.4" }, 

强制替换依赖包地址。

resolutions 关键字适用于 yarn 和 pnpm ，如果用的 npm ，需要替换关键字为 overrides。

1. 插件以 NPM 包形式分发，无需独立部署
2. 运行时动态安装/卸载（通过 NPM Registry 安装到本地，用户从本地目录加载插件）
3. 插件提供 React 组件/功能模块

AI 推荐了如下 MFE(Micro Frontends)框架：

• Piral: 基于 React 的微前端框架，专注于插件化架构（ Pilet 系统）
• Modern.js: 基于 Module Federation （ Webpack5 的特性），由抖音团队（字节跳动）开发，使用 Garfish 作为微前端运行时。
• Qiankun: 基于 Single-spa ，由蚂蚁金服开发。是一个成熟的微前端解决方案，支持多种技术栈，但更注重于多个独立应用（子应用）的集成。通过 HTML Entry 加载子应用。
• Luigi: 由 SAP 开发，技术中立（主要基于 Web Components ）。侧重于提供一致的用户界面和导航，适用于大型企业应用。

个人目前倾向于 Piral,大家怎么看？这些框架的坑点有哪些?

求经验分享！🙏

我感觉短期来看对 Nuxt 可能利好，可以借助 Vercel 的流量和社区，；

长期来看最大的风险是被 Vercel 主导和影响开发，和 nextjs 一样变成了 vercel 的商业利益优先，而不是开发体验。最后甚至影响上游 vue 和 react 的方向。

不知道各位怎么看。

chrome://settings/content/images

选中『不允许网站显示图片』

随便进入 IT 之家的一条新闻，滚动到页面底部，会发现评论加载不出来。

https://www.ithome.com/

修改了注册表和组策略，貌似没有太大作用。

放一张代码片段，大家帮忙看一下

 if (entry.isDirectory) { const dirReader = entry.createReader() let entries: any[] = [] // 由于浏览器 API 限制每次只能读取 100 个文件，所以需要多次读取 while (true) { const batch: any = await new Promise((resolve) => dirReader.readEntries(resolve) ) entries = entries.concat(batch) if (batch.length !== 100) { break } } .......... // 将文件添加到上传列表 const file = await new Promise<File>((resolve) => { // console.log('<UNK>:', entry) entry.file(resolve) //// 超长的路径到这就读取不到了，也不报错。 }).catch((err) => { console.error('获取文件失败:', err) throw err }) uploadMap.set(uploadKey, createUploadItem(file, currentPath)) }