@gress/plugin-ui

Gress 插件 UI 组件和样式包 - 提供统一的设计系统和通用组件

📦 安装

``bash
npm install @gress/plugin-ui @gress/plugin-bridge
`

🚀 快速开始

$3

在你的插件入口文件中导入样式：

`typescript
import '@gress/plugin-ui/dist/style.css'
`

$3

`typescript
import { useLoadingState, useResponsive } from '@gress/plugin-ui'

// 加载状态管理
const { loading, error, isEmpty, execute } = useLoadingState()

await execute(async () => {
const data = await fetchData()
return data
}, {
checkEmpty: (data) => data.length === 0
})

// 响应式工具
const { isMobile, isTablet, isDesktop } = useResponsive()
`

$3

`vue



`

📚 API 文档

$3

#### useLoadingState(options?)

统一管理加载、错误和空状态。

参数：
- options.initialLoading - 初始加载状态
- options.onError - 错误回调

返回值：
- loading - 加载状态
- error - 错误对象
- isEmpty - 空状态
- execute(fn, options?) - 执行异步操作

#### useResponsive()

响应式断点检测。

返回值：
- isMobile - 是否移动端 (< 768px)
- isTablet - 是否平板 (768px - 1280px)
- isDesktop - 是否桌面端 (>= 1280px)
- width - 窗口宽度
- height - 窗口高度

$3

####

加载状态组件。

####

空状态组件。

Props：
- title - 标题
- description - 描述

####

错误状态组件。

Props：
- error - 错误对象或字符串
- title - 标题

🎨 CSS 变量

包提供了完整的 CSS 变量系统，与主应用保持一致：

`css
/ 颜色 /
--primary
--success
--warning
--error
--info

/ 文本颜色 /
--text-primary
--text-secondary
--text-tertiary

/ 背景颜色 /
--bg-primary
--bg-secondary

/ 间距 /
--spacing-xs
--spacing-sm
--spacing-md
--spacing-lg
--spacing-xl

/ 圆角 /
--radius-sm
--radius-md
--radius-lg

/ 阴影 /
--shadow-sm
--shadow-md
--shadow-lg

/ 字体 /
--font-size-xs
--font-size-sm
--font-size-md
--font-size-lg
``

📄 License

MIT