@weaveui/web

Weave UI for web

@weaveui/web 是基于 Vue 3、Element Plus、Vite 的Web 端组件库。

项目用途

• 维护公司 Web 端通用 UI 组件，统一后台系统、运营系统和管理端项目的交互与样式。
• 沉淀业务扩展入口，包括 COS 上传、行为日志、前端监控和页面权限。

目录结构

web-ui/
├── src/                          # 组件库源码
│   ├── components/               # Web 通用组件
│   │   ├── copy-text/
│   │   ├── upload/
│   │   ├── custom-table/
│   │   ├── custom-tree/
│   │   ├── dialog/
│   │   ├── file-previewer/
│   │   ├── member-selector/
│   │   └── ...
│   ├── business/                 # 业务扩展
│   │   ├── upload-cos/           # COS 上传扩展
│   │   ├── apm-log/              # 行为日志扩展
│   │   ├── monitor/              # 前端监控扩展
│   │   └── permission/           # 页面权限扩展
│   ├── styles/                   # 组件库样式入口
│   ├── utils/                    # 组件安装、类型判断等工具
│   ├── meta.ts                   # 品牌名、插件名和运行时标识集中配置
│   └── index.ts                  # 组件库主入口
├── examples/                     # Web 组件示例/验证工程
│   ├── src/                      # 示例项目源码
│   ├── public/config/            # 示例项目运行时配置
│   ├── types/                    # 示例项目类型声明
│   └── package.json              # 示例项目依赖和脚本
├── npm-package-release.md        # @weaveui/web npm 发布流程
├── package.json                  # @weaveui/web 包配置
├── package-lock.json             # npm 锁文件
└── README.md                     # 当前说明文档

环境要求

安装

npm install @weaveui/web element-plus

全局注册：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import WebUI from '@weaveui/web'
import 'element-plus/dist/index.css'
import '@weaveui/web/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.use(WebUI)
app.mount('#app')

按需导入：

import { CopyText, TimelinePro } from '@weaveui/web'

本地开发

npm install
npm run dev

常用检查与构建：

npm run typecheck
npm run build
npm run typecheck:lib
npm run build:lib
npm run pack:check

组件开发规则

• 新增通用组件放入 src/components/组件名，并通过 src/index.ts 暴露。
• 新增公司业务能力放入 src/business/能力名，默认不加入 app.use(WebUI) 自动安装流程。
• 组件必须避免直接写死公司接口、登录态、生产域名、密钥或静态资源地址，需要通过 props、回调或配置传入。
• 组件或业务扩展需要完整项目验证时，同步更新 examples 中对应页面或配置。
• 发布前执行 npm run typecheck:lib、npm run build:lib 和 npm run pack:check。

发布说明

发布前检查：

• package.json 的 version、exports、files 和 peer 依赖范围已确认。
• README.md 和组件示例已同步更新。