# @atscript/ui-styles 中文文档

规范地址：https://npmcn.com/package/%40atscript/ui-styles/

版本：0\.1\.169
npm 元数据更新时间：2026-11-06T20:37:16.461Z
中文译文更新时间：2026-11-07T04:03:52.418Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40atscript/ui-styles
原文对照：https://npmcn.com/package/%40atscript/ui-styles/?lang=original
项目主页：https://github.com/moostjs/atscript-ui/tree/main/packages/ui-styles#readme
源码仓库：https://github.com/moostjs/atscript-ui

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

- 包体积（解压后）：1.6 MB，18 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：vunor ^0\.4\.1，unocss ^66\.7\.0，@unocss/preset-icons ^66\.7\.0，unplugin-vue-components ^32\.0\.0
- 首次发布：2026-05-13T17:22:43.747Z
- 最新版本发布：2026-11-06T20:37:16.248Z
- 近 30 天下载量：2245（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：111（近 12 个月 111 个）

## 中文简介

共享的 UnoCSS 快捷键, 预设和标记- ui 的图标加载器( vue- form, vue- table, vue- wf)

## 安装

```sh
npm install @atscript/ui-styles
```

也可以使用：`pnpm add @atscript/ui-styles`、`yarn add @atscript/ui-styles`、`bun add @atscript/ui-styles`

## README

[![Atscript UI](https://ui.atscript.dev/logo.svg)](https://ui.atscript.dev/)

# @ atscript/ ui 风格

📚 **联合国** [(原始内容存档于2018-10-21) (英语). ui.atscript.dev](https://ui.atscript.dev/)

共享 UnoCSS 预设、快捷键、图标加载器、每个组件类安全列表以及预建的 CSS [`@atscript/vue-form`](https://npmcn.com/package/%40atscript/vue-form), (中文(简体) ), [`@atscript/vue-table`](https://npmcn.com/package/%40atscript/vue-table),以及 [`@atscript/vue-wf`](https://npmcn.com/package/%40atscript/vue-wf)。 。 。 .

> **该研究面向贡献.** 它涵盖了包装船, 为什么每个部件都存在, 以及形成代码的负载决定. 最终用户安装和使用情况 [`/docs/guide/styling.md`](https://npmcn.com/package/docs/guide/styling.md)。 。 。 .

## 什么这个包裹船

-   **`asPresetVunor(opts)`** ——消费者化的UnoCSS预设. 回返 `Preset[]` 与 vunor 的预设、 图标预设、 快捷键合并 `form` 编号 : `table` 编号 : `wf` 编号 : `common`和习惯 **提取器** 将每个组件类列表拉入消费者的 CSS 捆绑,而没有任何 `node_modules` 文件系统扫描 .
-   **`createAsBaseUnoConfig(opts)`** —— 预设+快捷键与 `asPresetVunor` 不过 **无** 提取器。 仅限内部脚本(见第13号决定).
-   **`allShortcuts`** + 每一地区出口(`formShortcuts`, (中文(简体) ), `tableShortcuts`, (中文(简体) ), `wfShortcuts`, (中文(简体) ), `commonShortcuts`, (中文(简体) ), `aoothShortcuts`)——直接取用快捷图.
-   **`createIconsLoader(opts)`** - 仅节点的图标加载器(当地) `.icons/` dir + 在磁盘上 API 缓存) `scripts/bake-icons.ts`;出口后消费者可以自行驱动 `presetIcons()` 举个例子 没有 `asIconsPreset` 导出——已烤 `i-as-*` 收藏在内部注册 `asPresetVunor()` 并关闭 `icons: false`。 。 。 .
-   **`bakedIcons`** - 烤出来的 `name → <svg>` 地图 `i-as-*` 藏书.
-   **生成的安全列表** 时间 [`src/generated/component-classes.ts`](https://npmcn.com/package/%40atscript/ui-styles/src/generated/component-classes.ts) 已执行(第12号决定)。 再出口公共API: `componentClasses`, (中文(简体) ), `helperAliases`, (中文(简体) ), `componentPackages`, (中文(简体) ), `getComponentClasses(...)`, (中文(简体) ), `getHelperClasses(...)`。 。 。 .
-   **预建CSS** 时间 `dist/css/{all,form,table,wf}.css` 对非UnoCSS消费者(决定5)。 只默认主题; 不能被主题或过滤 .
-   **`AsResolver()`** 地点 `@atscript/ui-styles/vite` 子路径 - `unplugin-vue-components` 解析地图 `As*` PascalCase标签与每个组件子路径的匹配(`@atscript/vue-{form,table,wf}/<as-name>`) (中文(简体) ). 只有标记——必须明确进口可堆肥物。 开车经过 `componentPackages` 从生成的模块中自动取出新的组件.

### 带出自己的图标预设

两个 `presetIcons()` 在 UnoCSS 配置游戏中 `i-` 前缀 而第二者则永无决心。 当消费者已经经营自己的 图标预设, 关闭我们的 并交给他们 `as` 替代收藏 :

```ts
// uno.config.ts
import presetIcons from "@unocss/preset-icons";
import { asPresetVunor, bakedIcons } from "@atscript/ui-styles";

export default defineConfig({
  presets: [
    ...asPresetVunor({ icons: false }),
    presetIcons({
      collections: {
        // your own collections …
        as: (name) => bakedIcons[name],
      },
    }),
  ],
});
```

`bakedIcons` 正在同步,没有文件系统/网络依赖性。 解决 `as` 名称从图标化(或您自己的) `.icons/*.svg`)在建设时间,交换 用于 `createIconsLoader({ aliases: defaultAsIconAliases, iconsDir: ".icons" })` ——"节点",写上"盘"缓存.

`icons: false` 仅跳过已烤的相片预设条目——快捷键 组件提取器、键框预设和窗格变体/安全列表 无人知晓。 (自0.1.133起) (中文(简体) )

## 此软件包为何存在

UnoCSS只为它在消费者源树上看到的类名生成 CSS. 何时 `@atscript/vue-form` 等从npm安装,他们的班级住在里面 `node_modules` 而UnoCSS不会扫描那里。 此软件包用自定义解决 **提取器** 扫描消费者自己的组件导入源 / tags / 助手调用, 并按组件抽取预计算类别列表.

## 有负载的决定

整个设计原理 [`STYLES.md`](https://npmcn.com/package/STYLES.md)。快速贡献出错单 :

### 决定6——自定义UnoCSS 有五个匹配图案的解析器

`createAsExtractor` (单位:千美元)[`src/extractor.ts`](https://npmcn.com/package/%40atscript/ui-styles/src/extractor.ts)承认:

1.  子路径导入 - `from '@atscript/vue-form/as-form'`
2.  桶名进口—— `import { AsForm, AsField } from '@atscript/vue-form'`
3.  PascalCase标签 - `<AsForm`, (中文(简体) ), `<AsTableRoot` (实际消费者代码中的主要模式)
4.  Kebab- case 标记 - `<as-form`
5.  辅助功能电话 - `createDefaultTypes(`, (中文(简体) ), `createDefaultControls(`, (中文(简体) ), `createDefaultCellTypes(`

不知名的警卫是 `componentClasses[kebab]` - 命令里没有的都是禁止的 PascalCase / kebab 等同处理 [`src/kebab.ts`](https://npmcn.com/package/%40atscript/ui-styles/src/kebab.ts)。 。 。 .

### 决定11——求助电话检测(默认部件的强制性规定)

`createDefaultTypes()`, (中文(简体) ), `createDefaultControls()`,以及 `createDefaultCellTypes()` 船舶默认字段/细胞组件消费者从不直接标记. 只有标记的提取器会默默地放弃他们的课程. 提取脚本( E)`scripts/extract-component-classes.ts`)行走每个帮助文件,解析从 `../components/defaults`中, kebab- cases 指定标识符, 并发出 `helperAliases`。当它将帮助者名称视为函数调用(成员调用如: `obj.createDefaultTypes()` 被领导排除 `(?:^|[^.\w])` 警卫.

增加新的助手时,他们必须符合 **决定17**其布局( e)`src/composables/create-*.ts`,从 `../components/defaults`),或者解析器在再生时会很难失败.

### 决定13 - `createAsBaseUnoConfig` 编号 : `asPresetVunor` 循环断开

里面的提取器 `asPresetVunor()` 进口 `componentClasses`。提取脚本需要使用相同的快捷键/预设来运行 UnoCSS `componentClasses`。如果脚本导入 `asPresetVunor()`你会有一个鸡蛋.

两个工厂:

-   **`createAsBaseUnoConfig({})`** ——预设+快捷键,无提取器. 用于 `scripts/extract-component-classes.ts` 财务报告和审定财务报表 `scripts/build-css.ts`。 。 。 .
-   **`asPresetVunor(opts)`** ——同基+进口的提取器 `componentClasses`消费者使用.

别弄坏这些 别使编成的剧本依赖于取出者.

### 决定15 - `excludeComponents` 是比赛后, 消费方, UnoCSS 仅限

`asPresetVunor({ excludeComponents: ["as-filter-dialog"] })` 让一个用户放弃他们自己替换的默认组件的类。 不适用 **之后** regex 匹配——匹配但被排除在外的组件沉默地不添加类. 此文件已记录在案;替换为 `<AsFilterDialog>` 在排除它后,它给出了一个未设定的组件,是用户的明确选择.

**预建的 CSS 不尊重 `excludeComponents`。 。 。 .** CSS 文件在 `dist/css/` 在我们的建设时间,每个软件包的完整安全清单一并生成。 选项是运行时取出器取出取出器;它没有位置在预烤的文物上. 需要放下默认组件的用户必须使用UnoCSS路径.

### `AsResolver` —— 说 `componentPackages` 是真理的唯一来源

解决者在 [`src/vite.ts`](https://npmcn.com/package/%40atscript/ui-styles/src/vite.ts) 已经 **没有** 保持自己的调度表。 它看每个 `As*` 标记在 `componentPackages` 表格 `${PKG_TO_NPM[pkg]}/${kebab}`当一个新的公共组件 降落在任何vue-\*包, 提取脚本把它捡起来, `componentPackages` 重新生成, 以及下一个建筑上的解析器路径—— 不需要解析器编辑 .

`unplugin-vue-components` 被电线作为 **选项** 相对依赖性。 不自动进口的消费者(明确使用) `import { AsForm } from "@atscript/vue-form"` 任何地方)不需要安装;做自动进口的消费者已经拥有了.

### 第17号决定——Vue-\*包中的加农用组件布局

每个 `@atscript/vue-*` 软件包遵循一个布局 :

-   **公开根** 组件 `src/components/*.vue`。 。 。 .
-   **公开默认** 时间 `src/components/defaults/*.vue`,通过 `src/components/defaults/index.ts` (纯再出口桶-无逻辑,无辅助功能).
-   **私人内部** 时间 `src/components/internal/*.vue` ——没有输出,没有子路径,但班级仍然通过依赖行走到达安全名单.
-   **帮助者** 时间 `src/composables/create-*.ts`,仅通过 `import { AsX, ... } from "../components/defaults"`。帮助者别名解析 `scripts/extract-component-classes.ts` 取决于这个精确的形状——一个不符合要求的帮助文件会使构建失败.

任何新的组件或帮助者都必须符合要求;否则就无声地用工具来降低或硬失败.

## 预建CSS——取舍(决定5)

对于不运行UnoCSS的消费者,这个软件包将四个预建的CSS文件装入 `dist/css/`数字 :

| 文件 | 目录 |
| --- | --- |
| `all.css` | 横跨形式+表+wf的每个组件. |
| `form.css` | 组件来自 `@atscript/vue-form` 只有这个. |
| `table.css` | 组件来自 `@atscript/vue-table` 只有这个. |
| `wf.css` | 组件来自 `@atscript/vue-wf` 只有这个. |

洞穴:

-   **不准编故事.** 以默认方式在我们出版时建成一次 `asPresetVunor()` 调色板。 需要自定义主题的消费者必须使用UnoCSS路径.
-   **没有 `excludeComponents`。 。 。 .** 见上文第15号决定.
-   **每包文件重叠.** 每一个都独立完成—— `as-spacer` 在每一个使用它的包装文件. **不要结合** `form.css` + 键 `table.css` + 键 `wf.css`; 装入 `all.css` 换句话说.

这个 `wf.css` 文件今天很小(vue-wf有一个组件),但为了对称性而存在——vue-wf会增长,消费者已经可以装入他们需要的东西了.

## 出品文物

-   [`src/generated/component-classes.ts`](https://npmcn.com/package/%40atscript/ui-styles/src/generated/component-classes.ts) 承诺承诺(第12号决定)。 三张地图+两张助手功能. 以 `pnpm extract-classes`。 CI 必须运行脚本并失败于漂移; 修改的 PRs `.vue` 不重生的模板将被标记 .
-   `dist/css/{all,form,table,wf}.css` ——出土的建筑文物,通过已出版的柏油丸运送 `files: ["dist"]`。由 `pnpm build-css`。 。 。 .

## 建设管道

```bash
pnpm --filter @atscript/ui-styles run build
# expands to:
pnpm extract-classes && vp pack && pnpm build-css
```

-   `extract-classes` (单位:千美元)`scripts/extract-component-classes.ts`——走 vue-form/table/wf 源文件,运行 UnoCSS,出行 `src/generated/component-classes.ts`。读取磁盘上的源; **没有** 消耗他们的 `dist/`。即使在 vue- \* 软件包建成之前(决定8),一个干净的退出就可以运行此程序.
-   `vp pack` - 捆绑两个TS切入点: `src/index.ts` (主地表)和 `src/vite.ts` (单位:千美元) `AsResolver`。输出 : `dist/{index,vite}.{mjs,cjs,d.mts,d.cts}`。 。 。 .
-   `build-css` (单位:千美元)`scripts/build-css.ts`——使用 `createAsBaseUnoConfig()` (第13号决定)+ `componentClasses` + 键 `componentPackages` 从生成的模块中释放出四个 CSS 文件。 输出是字节决定的跨行.

## 快捷键

第六阶段结束后,操场和演示配置不再使用源扫描 `vue-{form,table,wf}/src/**`。编辑快捷键并看到它反映在操场中需要 `@atscript/ui-styles` 在监视模式中 :

```bash
# terminal 1
pnpm --filter @atscript/ui-styles run dev   # vp pack --watch

# terminal 2
pnpm dev
```

这交易了dev ergonomics 一个干净的,prod类的设置,匹配终端用户得到的.

## 常见问题

### @atscript/ui-styles 是什么？

共享的 UnoCSS 快捷键, 预设和标记- ui 的图标加载器\( vue- form, vue- table, vue- wf\)

### 如何安装 @atscript/ui-styles？

在项目目录运行 npm install @atscript/ui-styles，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vunor（^0\.4\.1）、unocss（^66\.7\.0）、@unocss/preset-icons（^66\.7\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @atscript/ui-styles 支持 TypeScript 吗？

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

### @atscript/ui-styles 支持 ESM 还是 CommonJS？

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

### @atscript/ui-styles 可以商用吗？

@atscript/ui-styles 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @atscript/ui-styles 的下载量有多少？

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

### @atscript/ui-styles 还在维护吗？

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