@jasonleeya/jj-ui

JJ UI

基于 uni-app + Vue3 + TypeScript 的跨平台 UI 组件库

✨ 特性

• 🎨 组件库 - 丰富的 UI 组件，涵盖常用场景
• 🎯 跨平台 - 支持 H5、微信小程序，一套代码多端运行
• 💪 TypeScript - 完整的类型定义，开发体验极佳
• 🎨 主题定制 - 支持全局配置、CSS 变量、暗色模式
• 📱 响应式 - 自适应不同屏幕尺寸
• 🔧 易扩展 - 模块化设计，组件按需引入

📦 安装

npm install jj-ui

🚀 快速开始

完整引入

import { createApp } from 'vue'
import JJUI from 'jj-ui'

const app = createApp(App)
app.use(JJUI)

按需引入

<template>
  <jj-button type="primary">主要按钮</jj-button>
  <jj-icon name="home" size="32"></jj-icon>
</template>

<script setup lang="ts">
import { Button, Icon } from 'jj-ui'
</script>

全局配置

import JJUI from 'jj-ui'

app.use(JJUI, {
  size: 'small',           // 全局设置组件尺寸
  color: {
    primary: '#5677fc',   // 自定义主题颜色
    success: '#19be6b',
  }
})

📚 组件列表

基础组件

• Button - 按钮，支持多种类型和尺寸
• Icon - 图标，支持 iconify、SVG、图片URL、emoji
• Text - 文本，支持多种样式和尺寸
• Link - 链接，支持下划线样式

布局组件

• Grid - 网格容器
• GridItem - 网格项
• Divider - 分割线

🎨 主题定制

CSS 变量

JJ UI 使用 CSS 变量定义设计系统，您可以覆盖这些变量来定制主题：

// 覆盖主色
:root {
  --jj-color-primary: #your-color;
  --jj-button-height-large: 100rpx;
}

暗色模式

<template>
  <view data-theme="dark">
    <!-- 暗色模式内容 -->
  </view>
</template>

🔧 开发

# 安装依赖
npm install

# 启动开发服务器 (H5)
npm run dev:h5

# 启动开发服务器 (微信小程序)
npm run dev:mp-weixin

# 构建
npm run build:h5
npm run build:mp-weixin

📖 文档

详细文档请访问：项目文档地址

🤝 贡献

欢迎贡献代码、提出 Issue！

📄 许可证

MIT License