@klnpm/ui (1.1.2)

2026-07-01T13:49:53+08:00

Setup this registry in your project .npmrc file:

@klnpm:registry=

To install the package using npm, run the following command:

npm install @klnpm/ui@1.1.2

or add it to the package.json file:

"@klnpm/ui": "1.1.2"

For more information on the npm registry, see the documentation.

@klnpm/ui

klnpm 团队 React UI 组件库，样式自动注入，开箱即用。

下载（安装到项目）

1. 配置 Gitea 认证

在 Gitea 的 Settings → Applications → 生成 Personal Access Token，勾选 package 权限。

npm

# 设置 scope 专属 registry（推荐，不影响公共包下载）
npm config set @klnpm:registry=https://git.kldmp.com/api/packages/klnpm/npm/

# 设置 token
npm config set -- '//git.kldmp.com/api/packages/klnpm/npm/:_authToken' "你的token"

yarn v1

yarn config set @klnpm:registry https://git.kldmp.com/api/packages/klnpm/npm/
yarn config set '//git.kldmp.com/api/packages/klnpm/npm/:_authToken' "你的token"

yarn v2+ (Berry)

编辑 .yarnrc.yml：

npmScopes:
  klnpm:
    npmRegistryServer: "https://git.kldmp.com/api/packages/klnpm/npm/"
    npmAuthToken: "你的token"

token 存于 ~/.npmrc 或 .yarnrc.yml，只对当前用户可见，不要提交到代码仓库。

2. 安装

npm install @klnpm/ui

或：

yarn add @klnpm/ui

3. 使用

import { Card, Footer, Loading, TimeWeek } from '@klnpm/ui'
// 样式自动注入，无需额外引入 CSS

<Card title="标题" icon={<span>🔔</span>} extra={<a>更多</a>}>
  内容
</Card>

<Footer name="开源中国" beian="京ICP备2025号" />

<Loading title="玩命加载中" />

<TimeWeek sysTime={Date.now()} querySystemTime={() => {}} />

开发（新增组件）

git clone <仓库地址>
cd klnpm-ui
npm install

配置发布权限

项目根目录新建 .npmrc，填入你的 token（不要提交到 git）：

//git.kldmp.com/api/packages/klnpm/npm/:_authToken=你的token

也可以写在全局 ~/.npmrc 里。

目录规范

src/
├── index.js              # 组件统一导出入口
├── index.d.ts            # TypeScript 类型声明
├── components/
│   ├── Card/
│   │   ├── index.jsx
│   │   ├── index.module.less
│   │   └── index.test.jsx
│   ├── Footer/
│   ├── Loading/
│   └── TimeWeek/

新增组件

以 Button 为例：

1. 创建组件

src/components/Button/index.jsx：

import PropTypes from 'prop-types';
import styles from './index.module.less';

const Button = props => {
  const { children, ...rest } = props;
  return <button className={styles.btn} {...rest}>{children}</button>;
};

Button.propTypes = {
  children: PropTypes.node,
};

export default Button;

src/components/Button/index.module.less：

.btn {
  padding: 8px 16px;
  border-radius: 4px;
}

2. 注册导出

src/index.js：

export { default as Button } from './components/Button';

3. 添加类型声明

src/index.d.ts：

import { ButtonHTMLAttributes, FC, ReactNode } from 'react';

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  children?: ReactNode;
}

export const Button: FC<ButtonProps>;

4. 编写测试

src/components/Button/index.test.jsx：

import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import Button from './index.jsx';

describe('Button', () => {
  it('renders children', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByText('Click me')).toBeTruthy();
  });
});

开发命令

npm run start       # 启动开发服务器（HMR 热更新），浏览器预览组件
npm run dev         # 监听模式构建（用于 npm link 测试）
npm run build       # 生产构建
npm run test        # 运行测试
npm run test:watch  # 监听模式运行测试

发布

# 升版本（按需选择其一）
npm version patch   # 修复：1.0.0 → 1.0.1
npm version minor   # 新功能：1.0.0 → 1.1.0
npm version major   # 大改动：1.0.0 → 2.0.0

# 发布
npm publish

发布后可在 Gitea 仓库 → Packages 标签页查看。

删除

npm unpublish @klnpm/ui --registry=https://git.kldmp.com/api/packages/klnpm/npm/ --force

--force 是必须的，npm unpublish 默认仅允许删除 24 小时内发布的包，超时需要强制删除。

也可在 Gitea → Packages → @klnpm/ui → Settings → Delete 直接删除。

组件列表

组件	Props	描述
Card	`title?` `icon?` `extra?` `children?`	卡片容器
Footer	`name?` `beian?`	页脚（版权 + ICP 备案号）
Loading	`title?` (默认 `'玩命加载中'`)	全屏加载动画
TimeWeek	`sysTime` `querySystemTime`	实时时钟（基于服务器时间）

注意

.npmrc / .yarnrc.yml 中的 token 不要提交到 git
react / react-dom 为 peer 依赖，使用方需自行安装 react >= 18
样式通过 JS 自动注入，无需手动 import CSS/Less
Less 文件需以 .module.less 结尾才能被识别为 CSS Modules

Dependencies

ID	Version
prop-types	^15.8.1

Development Dependencies

ID	Version
@testing-library/jest-dom	^6.9.1
@testing-library/react	^16.3.2
@vitejs/plugin-react	^6.0.2
jsdom	^29.1.1
less	^4.6.4
postcss-pxtorem	^6.1.0
react	^18.2.0
react-dom	^18.2.0
vite	^8.0.13
vitest	^4.1.7

Peer Dependencies

ID	Version
react	>=18.0.0
react-dom	>=18.0.0

react ui component card

Details

npm

2026-07-01 13:49:53 +08:00

10

wd

MIT

latest

16 KiB

Assets (1)

ui-1.1.2.tgz 16 KiB

Versions (3) View all

1.1.2

2026-07-01

1.1.1

2026-06-30

1.1.0