LAN ERP UI

🎨 一个基于 Vue 2 + TypeScript 的企业级 UI 组件库

✨ 特性

• 🎯 TypeScript - 完整的类型定义
• 🎨 现代化设计 - 简洁美观的视觉风格
• 📦 开箱即用 - 高质量的 Vue 2 组件
• 🛡 类型安全 - 完整的 TypeScript 类型支持
• 🎭 主题定制 - 灵活的主题配置
• 📱 响应式设计 - 支持多种屏幕尺寸
• ⚡ 按需加载 - 支持 Tree Shaking
• 🧪 测试覆盖 - 完善的单元测试

📦 安装

npm install lanerp-ui

或使用 yarn:

yarn add lanerp-ui

或使用 pnpm:

pnpm add lanerp-ui

🔨 使用

完整引入

import Vue from 'vue';
import LanerUI from 'lanerp-ui';
import 'lanerp-ui/dist/lanerp-ui.css';

Vue.use(LanerUI);

按需引入

import { LButton, LInput } from 'lanerp-ui';
import 'lanerp-ui/dist/lanerp-ui.css';

export default {
  components: {
    LButton,
    LInput,
  },
};

在模板中使用

<template>
  <div>
    <l-button variant="primary" @click="handleClick">点击我</l-button>
    <l-input v-model="inputValue" placeholder="请输入内容" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
  methods: {
    handleClick() {
      console.log('Button clicked!');
    },
  },
};
</script>

📚 组件

Button 按钮

按钮组件，支持多种类型和尺寸。

<template>
  <div>
    <l-button variant="primary">主要按钮</l-button>
    <l-button variant="secondary">次要按钮</l-button>
    <l-button variant="danger">危险按钮</l-button>
    <l-button size="small">小按钮</l-button>
    <l-button :loading="true">加载中</l-button>
  </div>
</template>

Props:

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | variant | 按钮类型 | primary | secondary | danger | ghost | primary | | size | 按钮尺寸 | small | medium | large | medium | | block | 是否为块级按钮 | boolean | false | | loading | 是否加载中 | boolean | false | | disabled | 是否禁用 | boolean | false |

Input 输入框

输入框组件，支持前缀、后缀和错误状态。

<template>
  <div>
    <l-input v-model="value" placeholder="请输入内容" />
    <l-input size="small" placeholder="小尺寸" />
    <l-input :error="true" placeholder="错误状态" />
    <l-input prefix="@" placeholder="用户名" />
    <l-input suffix=".com" placeholder="域名" />
  </div>
</template>

Props:

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | value / v-model | 输入框的值 | string | number | - | | size | 输入框尺寸 | small | medium | large | medium | | error | 是否显示错误状态 | boolean | false | | prefix | 前缀内容 | string | - | | suffix | 后缀内容 | string | - | | disabled | 是否禁用 | boolean | false |

Events:

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | input | 输入时触发 | (value: string | number) |

🎨 主题定制

组件库使用 SCSS 变量来定制主题：

:root {
  --lanerp-primary-color: #1890ff;
  --lanerp-danger-color: #ff4d4f;
  --lanerp-success-color: #52c41a;
  --lanerp-warning-color: #faad14;
  --lanerp-text-color: #333333;
  --lanerp-border-color: #d9d9d9;
}

🔧 开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 运行测试
npm test

# 构建
npm run build

# 启动 Storybook
npm run storybook

# 代码检查
npm run lint

# 代码格式化
npm run format

📖 文档

访问 Storybook 查看完整的组件文档和示例。

npm run storybook

🧪 测试

# 运行所有测试
npm test

# 监听模式
npm run test:watch

# 生成覆盖率报告
npm run test:coverage

📁 项目结构

lanerp-ui/
├── src/                    # 源代码
│   ├── components/         # 组件
│   │   ├── Button/        # Button 组件
│   │   │   ├── Button.vue
│   │   │   ├── Button.test.ts
│   │   │   └── index.ts
│   │   └── Input/         # Input 组件
│   │       ├── Input.vue
│   │       ├── Input.test.ts
│   │       └── index.ts
│   ├── hooks/             # 自定义 Hooks
│   ├── types/             # 类型定义
│   ├── styles/            # 样式文件
│   ├── utils/             # 工具函数
│   └── index.ts           # 入口文件
├── dist/                  # 构建输出
├── tests/                 # 测试配置
├── examples/              # 示例代码
├── stories/               # Storybook 故事
├── scripts/               # 构建脚本
└── .storybook/            # Storybook 配置

🤝 贡献

欢迎提交 Issue 和 Pull Request！

查看 贡献指南 了解更多信息。

📄 许可证

MIT License

👥 维护者

• @yourname

🙏 致谢

感谢所有为这个项目做出贡献的开发者！