diff --git a/README.zh-Hans.md b/README.zh-Hans.md new file mode 100644 index 0000000..3ef1f6e --- /dev/null +++ b/README.zh-Hans.md @@ -0,0 +1,106 @@ +
+ +Lisse + +

Lisse

+ +面向 React、Vue 和 Svelte 的平滑边角 SVG 原语。 +像素级精确的 Figma squircle，外加另外三种边角曲线。 + +[![npm](https://img.shields.io/npm/v/%40lisse%2Fcore?label=%40lisse%2Fcore)](https://www.npmjs.com/package/@lisse/core) +[![bundle](https://deno.bundlejs.com/badge?q=%40lisse%2Fcore&label=bundle)](https://bundlejs.com/?q=%40lisse%2Fcore) +[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE) +[![TypeScript](https://img.shields.io/badge/TypeScript-strict-blue.svg)](https://www.typescriptlang.org/) + +**[在线演示 →](https://corne.rs)** + +[English](./README.md) · **简体中文** · [日本語](./README.ja.md) · [한국어](./README.ko.md) · [Português (BR)](./README.pt-BR.md) · [Русский](./README.ru.md) · [Deutsch](./README.de.md) + +
+ +## 这是什么？ + +标准的 CSS `border-radius` 在边角处产生圆弧。设计师（以及 Apple 和 Figma）更偏爱 **squircle**——曲率平滑过渡到直边的边角，从而形成更有机的形状。 + +Lisse 用 JavaScript 实现了 [Figma 的边角平滑算法](https://www.figma.com/blog/desperately-seeking-squircles/)以及另外三种边角曲线。它生成 SVG 路径和 CSS `clip-path` 值，并为 React、Vue 和 Svelte 提供一流的绑定。 + +## 快速上手 + +```sh +npm install @lisse/react +``` + +```tsx +import { SmoothCorners } from "@lisse/react"; + +function Card() { + return ( + +

Hello, squircle

+ + ); +} +``` + +如需 Vue、Svelte 或与框架无关的核心，请参见下方的[软件包](#packages)。 + +## 曲线类型 + +| Curve | Description | +|---|---| +| `arc` | 四分之一圆。与 CSS `border-radius` 完全相同。 | +| `squircle` *(default)* | Figma 的三次肩部 + 中央圆弧。 | +| `superellipse` | `\|x/R\|^n + \|y/R\|^n = 1`。当 `n > 2` 时带边缘的 G2。 | +| `clothoid` | 从直边到中央圆弧的欧拉螺线（Euler-spiral）混合。处处 G2。 | + +数学参考：[`docs/curves.md`](docs/curves.md)。 + +## 软件包 + +| Package | npm | Description | +|---|---|---| +| `@lisse/core` | [![npm](https://img.shields.io/npm/v/%40lisse%2Fcore?label=)](https://www.npmjs.com/package/@lisse/core) | 与框架无关的路径生成 + 效果 | +| `@lisse/react` | [![npm](https://img.shields.io/npm/v/%40lisse%2Freact?label=)](https://www.npmjs.com/package/@lisse/react) | React hook 与组件 | +| `@lisse/vue` | [![npm](https://img.shields.io/npm/v/%40lisse%2Fvue?label=)](https://www.npmjs.com/package/@lisse/vue) | Vue composable 与组件 | +| `@lisse/svelte` | [![npm](https://img.shields.io/npm/v/%40lisse%2Fsvelte?label=)](https://www.npmjs.com/package/@lisse/svelte) | Svelte action | + +## 特性 + +- 四种边角曲线（`arc`、`squircle`、`superellipse`、`clothoid`），支持逐角混合 +- 内 / 外 / 居中边框，含多种样式变体（实线、虚线、点线、双线、凹槽、凸脊） +- 投影与内阴影，并可通过 API 实现渐变边框 +- 自动效果：挂载时将 CSS `border` 和 `box-shadow` 转换为等效的 SVG +- 每次 `generatePath()` 调用约 1.5 µs；500 个边角的重算在 <1 ms 内完成（[详情](docs/performance.md)） +- 零运行时依赖；ESM + CJS 双重导出；SSR 安全的 `/path` 子路径 + +## 文档 + +- [API 参考](docs/api.md)：完整的导出表 +- [迁移](MIGRATION.md)：在版本之间升级 +- [SSR](docs/ssr.md)：服务端渲染与边缘运行时 +- [曲线](docs/curves.md)：每种曲线类型的数学参考 +- [浏览器支持](docs/browser-support.md)：兼容性矩阵 +- [样式钩子](docs/styling.md)：`data-slot` / `data-state` 属性 +- [效果](docs/effects.md)：边框、阴影、渐变、自动效果 +- [性能](docs/performance.md)：基准测试与缓存架构 +- [内部实现](docs/internals.md)：边框、阴影与尺寸变化处理的工作原理 +- [陷阱](docs/gotchas.md)：`clip-path` 的怪癖，例如焦点轮廓、溢出、滚动条 +- [配置](docs/configuration.md)：逐角配置、该用哪个 API、框架用法 + +## 贡献 + +欢迎提交 Issue 和 PR。贡献者文档（发布流程、测试策略、基准测试）见于 [`docs/`](./docs/)。 + +## 许可证 + +[MIT](./LICENSE) + +--- + +
+ +由 [Jace](https://ja.mt) 构建 + +[X](https://ja.mt/x) | [Bluesky](https://ja.mt/bsky) | [Instagram](https://ja.mt/ig) | [Threads](https://ja.mt/threads) + +
diff --git a/apps/website/messages/zh-Hans.json b/apps/website/messages/zh-Hans.json new file mode 100644 index 0000000..dbabf7d --- /dev/null +++ b/apps/website/messages/zh-Hans.json @@ -0,0 +1,166 @@ +{ + "$schema": "https://inlang.com/schema/inlang-message-format", + "curves_effect_border": "{n} px 边框", + "curves_effect_drop_shadow": "投影", + "curves_effect_fill_only": "仅填充", + "curves_effect_inner_border": "{n} px 内边框", + "curves_effect_inner_shadow": "内阴影", + "curves_effect_outer_border": "{n} px 外边框", + "curves_effect_shadow_and_border": "阴影 + 边框", + "curves_matrix_description": "半径 {radius}，平滑度 {smoothing}。每一行是一条曲线，每一列是一种效果。", + "curves_matrix_title": "曲线 × 效果验证矩阵", + "demo_compare_enter": "进入对比视图", + "demo_compare_exit": "退出对比视图", + "demo_compare_label": "对比", + "demo_heading": "Squircle 演示", + "demo_smoothing_disable": "关闭平滑", + "demo_smoothing_enable": "开启平滑", + "demo_smoothing_label_off": "无平滑", + "demo_smoothing_label_on": "平滑", + "demo_state_compare_active": "对比视图已激活。", + "demo_state_compare_smoothing_off": "前层叠合到后层之上，因此看不到红色边角。", + "demo_state_compare_smoothing_on": "四个红色楔形显示出 squircle 相比后方的 CSS 圆角向内收进了多少。", + "demo_state_smoothing_off": "平滑已关闭；演示方块使用标准的 CSS 四分之一圆角。", + "demo_state_smoothing_on": "平滑已开启；演示方块使用 Lisse 的 squircle 圆角。", + "header_def_1": "表面均匀、连贯；触感平滑", + "header_def_1_example": "un galet lisse", + "header_def_2": "光滑顺溜；没有断裂或粗糙之处（cheveux lisses）。", + "header_def_3": "引申义：精致、无摩擦；流畅而不间断。", + "header_def_b": "（指曲线、线条或过渡）连续；没有突变（une courbe lisse）。", + "header_etymology_french_abbr": "法.", + "header_etymology_smooth": "平滑", + "header_pos_adjective": "形.", + "header_pronunciation_sr": "读作 lees，形容词，源自法语 lisse，意为平滑。", + "install_copied_announcement": "已将 {pkg} 安装命令复制到剪贴板", + "install_copy_command_label": "将 {command} 复制到剪贴板", + "install_error_announcement": "无法复制 {pkg} 安装命令", + "install_heading": "安装", + "intro_lead": "Lisse 是一个小巧的 JavaScript 库，用于绘制 squircle 圆角，与 Figma 和 iOS 使用的连续曲线相同。它为 React、Vue 和 Svelte 提供绑定，并附带一个与框架无关的核心。支持逐角控制、边框和阴影。", + "math_arc_body_after_code": "所绘制的：在直边上硬接一段四分之一圆。切线相吻合，但曲率从边缘上的 0 一步跳变到弧内的 1/R——这正是设计师们所抱怨的接缝。", + "math_arc_body_before_code": "正是 CSS", + "math_arc_radius_readout": "中心 · R = {r}", + "math_clothoid_body": "用一段欧拉螺线（Euler-spiral）将每条直边过渡到中央圆弧，其曲率沿弧长线性递增——边缘处为 0，到弧上为 1/R。由构造保证处处 G2（κ 在每条接缝处都吻合），其特征与 Apple/Figma 的 squircle 明显不同：顶点处更圆，边角延展更长。是经典的公路缓和曲线几何。", + "math_comb_density_smooth": "平滑曲线", + "math_comb_density_whiskers": "{n} 根梳齿", + "math_continuity_aria_label": "连续性：{gn}", + "math_copy_copied": "已复制", + "math_copy_failed": "复制失败", + "math_copy_svg": "复制 SVG", + "math_copy_svg_aria_label": "将 SVG 复制到剪贴板", + "math_curve_arc_label": "圆弧", + "math_curve_arc_sub": "CSS border-radius", + "math_curve_clothoid_label": "回旋曲线", + "math_curve_clothoid_sub": "欧拉螺线（Euler-spiral）混合", + "math_curve_squircle_label": "Squircle", + "math_curve_squircle_sub": "Lisse 默认 · Figma", + "math_curve_superellipse_label": "超椭圆", + "math_curve_superellipse_sub": "CSS corner-shape", + "math_curve_type_aria_label": "曲线类型", + "math_diagram_aria_label": "带曲率梳的边角曲线构造。两条直边在一个角相交，被所选的平滑曲线替代。绿色的梳齿展示了曲线上各点的曲率。", + "math_docs_reference": "数学推导和文献引用见于", + "math_download": "下载", + "math_download_svg_aria_label": "下载 SVG", + "math_intro_g1": "表示切线在接缝处吻合，但曲率可以发生阶跃（梳齿存在不连续）。", + "math_intro_g2": "表示曲率连续，因此梳齿在接合处平滑流过。选择一条曲线并滑动 R/平滑度，看看各自的表现。", + "math_intro_lead": "四种候选的边角构造，皆从同一套数学推导而来。绿色的梳齿是曲线上各点的曲率——梳齿长度与 κ 成正比。", + "math_shape_label_exponent": "指数（n）", + "math_shape_label_smoothing": "平滑度", + "math_slider_comb_density": "梳齿密度", + "math_slider_corner_radius": "圆角半径", + "math_squircle_body": "是 Lisse 当前的形状，也是 Figma 所采用的形状。两段三次 Bézier 肩部缓和过渡到一段较小的中央圆弧。曲率逐渐递增而非跳变，但在每段肩部与圆弧相接的 P3 / P4 处仍有一个小阶跃——在梳齿上表现为“蝙蝠侠帽子”。这是 G1，而非 G2。", + "math_superellipse_body_after": "所解析得到的形状（取 n = 4）。对任意 n > 2，曲线与各边相接处的曲率恰好为 0——因此它无需肩部构造即可达到 G2。不过其曲率分布与 Apple/Figma 的形状不同：它看上去自成一类，而不像是同一条曲线的更平滑版本。", + "math_superellipse_body_mid": "正是 CSS", + "meta_app_description": "用于绘制 squircle 圆角的 JavaScript 库——与 Figma 和 iOS 使用的连续曲线相同。为 React、Vue 和 Svelte 提供绑定，并附带一个与框架无关的核心。包含逐角控制、边框和阴影。", + "meta_home_description": "面向 Web 的 Squircle 圆角。为 React、Vue 和 Svelte 提供绑定。", + "meta_home_title": "lisse", + "meta_playground_description": "在浏览器中调节半径、平滑度、曲线类型、边框和阴影。", + "meta_playground_title": "playground — lisse", + "meta_what_description": "为什么 squircle 看起来比 CSS border-radius 更柔和，以及 Lisse 如何绘制它们。", + "meta_what_title": "什么是 squircle — lisse", + "nav_aria_site": "站点", + "nav_docs": "文档", + "nav_follow": "关注", + "nav_home": "首页", + "nav_playground": "演练场", + "nav_what": "这是什么？", + "playground_border_description": "沿平滑边角路径描绘的描边边框。实线、虚线、点线、双线、凹槽、凸脊——标准的 CSS 线条样式。", + "playground_center_border_title": "居中边框", + "playground_drop_shadow_description": "基于 SVG 的投影，从与上方元素相同的 squircle 路径描摹而来。在任意半径下都与表面形状相吻合。", + "playground_drop_shadow_title": "投影", + "playground_inner_border_title": "内边框", + "playground_inner_shadow_description": "在平滑边角路径内部渲染的内嵌阴影。适用于凹陷表面、按下状态，或底部的柔和填充。", + "playground_inner_shadow_title": "内阴影", + "playground_outer_border_title": "外边框", + "section_border_dash_label": "短划", + "section_border_dashcap_aria": "{title} 短划端点", + "section_border_dashcap_none": "无", + "section_border_dashcap_round": "圆形", + "section_border_dashcap_square": "方形", + "section_border_gap_label": "间隙", + "section_border_preset_aria": "{title} 样式", + "section_border_preset_dashed": "虚线", + "section_border_preset_dotted": "点线", + "section_border_preset_double": "双线", + "section_border_preset_groove": "凹槽", + "section_border_preset_none": "无", + "section_border_preset_ridge": "凸脊", + "section_border_preset_solid": "实线", + "section_border_thickness_label": "粗细", + "section_cornershape_desc": "平滑度控制曲线过渡到直边的渐进程度。0 给出圆弧，1 给出完整的 squircle。", + "section_cornershape_ios_label": "iOS – {value}", + "section_cornershape_preset_aria": "平滑度预设", + "section_cornershape_preset_off": "不平滑", + "section_cornershape_preset_on": "平滑", + "section_cornershape_slider_label": "平滑度", + "section_cornershape_title": "边角形状", + "section_curvetype_desc": "选择边角构造。Squircle 是 Lisse 的默认值（Figma 的曲线）。Arc 是 CSS border-radius。超椭圆是 CSS corner-shape 家族（n = 5——最接近 Figma 0.6）。回旋曲线是 G2 的欧拉螺线（Euler-spiral）混合。", + "section_curvetype_exponent_label": "指数（n）", + "section_curvetype_preset_arc": "圆弧", + "section_curvetype_preset_aria": "曲线类型", + "section_curvetype_preset_clothoid": "回旋曲线", + "section_curvetype_preset_squircle": "Squircle", + "section_curvetype_preset_superellipse": "超椭圆", + "section_curvetype_radius_label": "半径", + "section_curvetype_smoothing_label": "平滑度", + "section_curvetype_title": "曲线类型", + "section_percorner_bottom_left_label": "左下", + "section_percorner_bottom_right_label": "右下", + "section_percorner_desc": "每个角都可以拥有各自独立控制的半径和平滑度。适用于选项卡、标签（chip）等非对称形状。", + "section_percorner_preset_all": "全部相等", + "section_percorner_preset_aria": "逐角预设", + "section_percorner_preset_custom": "自定义", + "section_percorner_preset_single": "单角", + "section_percorner_preset_top": "仅顶部", + "section_percorner_title": "逐角半径", + "section_percorner_top_left_label": "左上", + "section_percorner_top_right_label": "右上", + "section_radius_desc": "控制圆角半径。数值越大，边角越圆——在最大值时，方框会变成一个完整的圆。", + "section_radius_preset_0": "半径：0", + "section_radius_preset_20": "半径：20", + "section_radius_preset_50": "半径：50", + "section_radius_preset_aria": "半径预设", + "section_radius_preset_custom": "自定义", + "section_radius_slider_label": "半径", + "section_radius_title": "半径", + "section_shadow_blur_label": "模糊", + "section_shadow_preset_aria": "{title} 预设", + "section_shadow_preset_custom": "自定义", + "section_shadow_preset_medium": "中等", + "section_shadow_preset_none": "无", + "section_shadow_preset_subtle": "轻微", + "section_shadow_spread_label": "扩散", + "section_shadow_x_label": "X", + "section_shadow_y_label": "Y", + "switcher_aria_label": "语言", + "what_p10_rest_translates": "设计的其余部分都能干净利落地映射到 CSS，唯独曲线一直做不到——而现在它也可以了。", + "what_p11_docs_pointer": "更详尽、技术性更强的剖析——路径数学、逐角合成规则以及 Lisse 的渲染策略——见于页面底部链接的文档。", + "what_p1_intro": "squircle 是一种圆角矩形，其边角以连续曲率而非单一圆弧缓和过渡到直边。Apple 在 2013 年随 iOS 7 将这一形状引入 iOS，当时每一个 app 图标都被裁切成这种形状。Figma 和 Sketch 都在 2018 年加入了边角平滑，此后这一形状便在设计工具中不断扩散。", + "what_p2_border_radius": "CSS border-radius 在每个角绘制单一的一段圆弧。该圆弧以一个生硬的切点与直边相接：曲率一步从零跳到最大值。看上去就像是硬生生拼接上去的一个角。在小半径下没人会注意到。一旦超过约 16 像素，接缝就显露出来，边角看起来便比应有的更僵硬。", + "what_p3_two_shapes": "有两种形状能修复这道接缝。一种超椭圆介于圆和方之间，由一个数字控制它有多圆或多方。另一种形状是在边角顶点处的一小段圆弧，两侧各有平滑的肩部，将圆弧缓和过渡到直边，使曲率永不跳变。两者在图标尺度下看起来相似，但底层的构造方式截然不同。", + "what_p4_apple_baggage": "Apple 采用的是带肩部圆弧的形状，而其实现带来了一些包袱。每个角的两半并非彼此严格的镜像。其中一侧有一小段几乎肯定不该存在的直线段：那些从 iOS 中提取出实际路径的开发者认为这很可能是个 bug，并在各个版本中被保留了下来。该形状在低宽高比下也会失效，届时它不再像 squircle，而开始像一个普通的圆角矩形。这一切都无法配置。Apple 的曲线是固定的。", + "what_p5_figma_redraw": "当 Figma 在 2018 年加入平滑时，他们选择从头重绘曲线，而非照搬 Apple 的路径。Daniel Furse 当时的文章给出了缘由。Apple 的路径并不是一条能用一行写清楚的简洁公式。它把那种不对称性带了过来，没有可调的平滑旋钮，并且在低宽高比下崩坏。重新实现同一族形状一举解决了这三个问题。每个角的两半得以正确地互为镜像。一个单一的平滑旋钮控制边角变得有多柔和：取零时回到一段普通的圆弧，取一时给出该构造所允许的最大平滑度。约 0.6 时已足够接近 Apple 的形状，以致在图标尺度下无人能分辨，但底层的几何在使用上更为合理。", + "what_p6_css_catching_up": "CSS 自身也在迎头赶上。CSS 规范是每个浏览器都同意去实现的规则手册，由 W3C 的一个工作组撰写和修订。任何进入规范的东西最终都会以某种形式出现在 Chrome、Safari 和 Firefox 中。一个名为 corner-shape 的新属性正在经历这一过程。它与 border-radius 并列，改变半径所描绘的曲线，使作者无需求助于 SVG 就能选用默认圆弧以外的形状。", + "what_p7_squircle_keyword": "规范中包含一个 squircle 关键字，这听起来像是整个问题都解决了。仔细阅读其定义，会发现该关键字解析为一个内置固定指数的超椭圆。那属于另一类形状。它乍看接近 iOS 的 squircle，但曲率的分布方式不同，在界面所用的尺寸下这种差异是可见的。Apple、Figma 和 Lisse 绘制的都是带肩部的圆弧。而 CSS 默认绘制的是另一种东西，却用了同一个名字。", + "what_p8_browser_support": "浏览器支持也尚未到位。Chrome 在 2025 年 8 月加入了该属性。Safari 将其置于功能开关之后，但尚未发布到正式版。Firefox 还没有开始。即便在最乐观的时间线下——每个引擎都在来年发布——最先落地的也不是与 iOS 或 Figma 相匹配的形状。对于有意选用超椭圆的新设计而言，这个 CSS 属性是一个有用的基础构件。但它并不能替代人们已经在 iOS、在 Figma 文件中、以及在仿照它们的设计系统中看到的 squircle。", + "what_p9_lisse_fits": "这正是 Lisse 的用武之地。它将 Figma 的 squircle 绘制为一条 SVG 路径，并将元素裁切到该路径。边框和阴影描摹同一个形状：描边沿着 squircle，阴影则是裁切路径的偏移副本，因此柔和的边缘与其所处的表面保持一致。逐角半径能够干净地合成，在不同圆度的边角交界处不会出现拐折。一个单一的观察者监视每个由 Lisse 包裹的元素，仅在方框实际改变尺寸时才重绘。" +} diff --git a/apps/website/project.inlang/settings.json b/apps/website/project.inlang/settings.json index b2ef600..07a737f 100644 --- a/apps/website/project.inlang/settings.json +++ b/apps/website/project.inlang/settings.json @@ -2,7 +2,8 @@ "$schema": "https://inlang.com/schema/project-settings", "baseLocale": "en", "locales": [ - "en" + "en", + "zh-Hans" ], "modules": [ "https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@4.4.0/dist/index.js",