# @a-little-world/little-world-design-system 中文文档

规范地址：https://npmcn.com/package/%40a-little-world/little-world-design-system/

版本：3\.3\.0
npm 元数据更新时间：2026-11-06T11:36:11.078Z
中文译文更新时间：2026-11-09T21:33:03.192Z
软件包许可：LGPL-3\.0-only

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40a-little-world/little-world-design-system
原文对照：https://npmcn.com/package/%40a-little-world/little-world-design-system/?lang=original
项目主页：https://github.com/a-little-world/little-world-design-system#readme
源码仓库：https://github.com/a-little-world/little-world-design-system

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：973 kB，244 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：20 个
- peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0，react-router-dom ^6\.28\.2，styled-components ^6\.1\.18
- 首次发布：2025-12-30T18:40:24.203Z
- 最新版本发布：2026-11-06T11:36:10.566Z
- 近 30 天下载量：1716（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：27（近 12 个月 27 个）

## 中文简介

小世界应用的设计系统

## 安装

```sh
npm install @a-little-world/little-world-design-system
```

也可以使用：`pnpm add @a-little-world/little-world-design-system`、`yarn add @a-little-world/little-world-design-system`、`bun add @a-little-world/little-world-design-system`

## README

# @a-小世界/小世界设计系统

小世界设计系统的Web组件.

此系统使用 [半径](https://github.com/radix-ui/primitives) 以确保组件无障碍和自定义.

## 安装

```bash
pnpm add @a-little-world/little-world-design-system
```

## 使用量

```tsx
import { Button, Text } from '@a-little-world/little-world-design-system';

export default function App() {
  return (
    <Button variant="primary">
      <Text>Hello World</Text>
    </Button>
  );
}
```

## 字体

通过在 HTML 文件中列入所需的字体,确保您有可用的字体 :

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300;600;700&family=Work+Sans:wght@700&display=swap"
  rel="stylesheet"
/>
```

## 地方发展

### QQ 重要: 从根来构建

**总是从单列波的根来构建和发布,从不从单个包目录来构建和发布.**

✅ **正确( 从根) :**

```bash
pnpm build:web
pnpm --filter=@a-little-world/little-world-design-system publish
```

❌ **不正确( 从软件包目录) :**

```bash
cd packages/web
pnpm run build
pnpm publish  # This will break workspace dependencies!
```

### 快速启动

从一心起:

```bash
# Build the web package
pnpm build:web

# Start Storybook for development
pnpm storybook:web

# Build Storybook for production
pnpm storybook:web:build
```

### 发展 工作流量

1.  **进行修改** 到网络组件
2.  **构建软件包** - 说吧 `pnpm build:web`
3.  **故事书中的测试** - 说吧 `pnpm storybook:web`
4.  **预览更改** - 在故事书中查看组件,http://localhost:6006

### 手动设置

如果您喜欢在网络包目录中直接工作 :

```bash
cd packages/web
pnpm install
pnpm run build
pnpm run storybook
```

## 故事书

网页包包括用于组件开发和测试的故事手册:

```bash
# From root
pnpm storybook:web

# Or from web package directory
cd packages/web
pnpm run storybook
```

## 大楼

```bash
# Build the web package
pnpm build:web

# Or from the web package directory
cd packages/web
pnpm run build
```

## 出版

### 自动释放(建议)

**理想的情况是,释放应自动化,并通过合并到回收品的主要分支来处理.**

见 [Root README 中的版本和发布部分](https://npmcn.com/package/README.md#versioning-and-releases) 以获取关于使用变换器自动发布进程的详细信息.

自动工作流程将:

-   检测软件包中的版本变化
-   发布到 GitHub 软件包注册
-   创建带有更改日志信息的 GitHub 发布
-   自动处理所有出版步骤

### 手动发布( Fallback)

如果需要手动发布( 不推荐):

```bash
# Ensure you're authenticated to GitHub Packages
pnpm login --registry=https://npm.pkg.github.com

pnpm build:web
pnpm --filter=@a-little-world/little-world-design-system publish
```

**说明**:手工出版绕过自动更改日志生成和发行管理. 尽可能使用自动进程.

## 依赖关系

此软件包取决于 :

-   `@a-little-world/little-world-design-system-core` - 核心设计标志和公用事业
-   `react` - 反应框架
-   `styled-components` - 造型图书馆
-   `@radix-ui/react-*` - Radix UI原始的无障碍软件

## 抓到他们了! 从网络到本土...

在原始状态中, 设定时 `minWidth` 在一个组件上,它不会自动扩展 超过这个宽度 根据内容,它会像它在网络上。 React Industrial的弹性框执行对于尊重明确的维度更为严格.

**建议**: 在大多数情况下:

-   使用 `flex: 1` 如果您想要一个组件来填充其父部分
-   使用 `max-width` 以限制大小
-   否则使用明示 `width` 并管理内容

## 捐款

检查 [捐款准则](https://npmcn.com/package/%40a-little-world/little-world-design-system/CONTRIBUTING.md)。 。 。 .

## 版本和发行

此软件包使用 [更改](https://github.com/changesets/changesets) 用于版本管理。 关于发行过程的详细信息,请参见root README.

**说明**: 下述人工放出过程被贬值. 使用变换器代替 .

### 折旧的人工释放程序

~为了发布这个软件包的新版本:~

1.  ~将版本跳入 `package.json` 运行 `pnpm install` 以更新相关发布分支中的 pnpm-lock.yaml.~
2.  ~确保您的释放分支经过测试、批准并合并为 `main`。 。 。 .~
3.  ~转到"发布稿" [节](https://github.com/a-little-world/little-world-design-system/releases/new) {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你还得去吗.~
4.  ~创建一个与新版本相关的标签 .~
5.  ~在标题中包含发行版本并给出适当的描述~
6.  ~点击“ publish release” 按钮, 这将触发将发布新版本到 npm 的 github 动作 .~

## 常见问题

### @a-little-world/little-world-design-system 是什么？

小世界应用的设计系统

### 如何安装 @a-little-world/little-world-design-system？

在项目目录运行 npm install @a-little-world/little-world-design-system，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.0\.0）、react-dom（^19\.0\.0）、react-router-dom（^6\.28\.2）、styled-components（^6\.1\.18）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @a-little-world/little-world-design-system 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @a-little-world/little-world-design-system 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @a-little-world/little-world-design-system 可以商用吗？

@a-little-world/little-world-design-system 使用 LGPL-3\.0-only 许可。弱 Copyleft：作为库被调用时通常不要求开源你自己的代码，但修改库本身需以 LGPL 开源；前端打包合并后的适用边界存在不同理解。以上为概括，不构成法律意见，请以许可原文为准。

### @a-little-world/little-world-design-system 的下载量有多少？

根据 npm 官方下载统计，@a-little-world/little-world-design-system 在 2026/10/05 – 2026/11/03 这 30 天内被下载 1,716 次，日均约 57 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @a-little-world/little-world-design-system 还在维护吗？

最新版本 3\.3\.0 发布于 2026/11/06（3 天前）；至今共发布 27 个版本，其中过去 12 个月发布了 27 个；首次发布于 2025/12/31。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。