@gsc-basic/components 开发说明

使用 Vite 以 library mode 构建，默认样式体系为 UnoCSS。

目录结构（核心）

packages/components
  index.js                    # 包入口（默认导出 install + re-export src/index.js）
  index.d.ts                  # 类型入口
  package.json
  vite.config.mjs             # library build 配置
  uno.config.mjs              # 本包 UnoCSS 配置

  src/
    index.js                  # 组件库对外导出入口
    styles/tokens.css         # 设计变量
    hooks/                    # 内部 hooks（如 useLocale、useNamespace）
    locale/                   # 语言能力导出

    <ComponentName>/          # 对外组件（示例：Grid/、ConfigProvider/ 等）
      index.js                # withInstall 包装导出
      src/*.vue               # 组件实现

  stories/**/*.stories.js     # Storybook stories
  docs/*.md                   # 组件文档

新增“对外组件”的推荐流程

1. 建目录：packages/components/src/<ComponentName>/src/

2. 新建组件文件（命名保持与目录一致，例如 index.vue 或 <ComponentName>.vue）。

3. 写导出文件：packages/components/src/<ComponentName>/index.js

推荐模板：

import { withInstall } from '@gsc-basic/utils';
import Comp from './src/<ComponentName>.vue';

export const GscComponentName = withInstall(Comp);
export default GscComponentName;

4. 在 packages/components/src/index.js 里 re-export：

export * from './<ComponentName>';

5. 增加 Storybook：packages/components/stories/<ComponentName>.stories.js

Storybook / stories 编写规范

• stories 目录：packages/components/stories/**/*.stories.js
• 对外组件在 stories 中推荐从 @gsc-basic/components 引入（走真实导出路径）

单独引入 Transition 样式

发布后可按子路径单独引入 Transition 样式：

import '@gsc-basic/components/transition/style.css';

组件文档索引

内部组件文档

• Button 按钮
• Form 动态表单
• Overlay 遮罩层

公开组件文档

组件文档请参考： https://gsc-basic.lenovo.com/gsc-docs/zh_CN/gsc_basic/vue/components.html

Author & License

This package is maintained by Lenovo SSG BASD. It is distributed under the LicenseRef-Proprietary license; see LICENSE for details.