QXS-BNS 特性介绍 ​

QXS-BNS 是一个专为趣学术业务场景设计的 TypeScript 组件与工具仓库，当前组件层以跨框架 Web Components 为主。

模块能力概览 ​

如果你想快速判断这个仓库适不适合当前项目，先看模块边界最有效。
它可以帮你先分清组件、工具、指令和题目编辑内核分别负责什么。

典型接入顺序 ​

特性不是为了堆功能点，而是为了缩短真实项目接入路径。
建议先按模块选型，再做最小接入，最后回查具体组件或工具的 API。

核心特性 ​

企业级设计 ​

• 业务导向 - 专为企业级应用和业务场景设计
• 生产就绪 - 经过实际项目验证，稳定可靠
• 规范统一 - 统一的设计语言和交互规范

现代化技术栈 ​

• Vue 3 - 基于最新的 Vue 3 Composition API
• TypeScript - 完整的 TypeScript 类型定义
• Vite - 快速的开发和构建体验
• Monorepo - 模块化的包管理架构

多端适配 ​

• 跨框架宿主 - 支持 Vue、React、原生 HTML 和混合宿主
• 移动端友好 - 固定操作栏、上传、题目编辑等能力可直接落地在 H5 场景
• 响应式设计 - 自适应不同屏幕尺寸

智能依赖管理 ​

• 自动依赖分析 - 智能分析组件依赖关系
• 按需加载 - 支持 Tree-shaking，减少打包体积
• 依赖隔离 - 移动端组件与桌面端组件依赖隔离

模块化架构 ​

组件库 (Components) ​

• 题目体系 - 单题组件、分页边界和运行时 helper
• 业务组件 - 图表、上传、图片裁剪、固定操作栏、图标
• 独立编辑器 - 可单独接入的富文本编辑能力

工具库 (Utils) ​

• 通用工具 - 常用工具函数
• 业务工具 - 特定业务逻辑工具
• 类型定义 - 完整的 TypeScript 类型

Hooks (Composables) ​

• 状态管理 - Vue 3 响应式状态管理
• 业务逻辑 - 可复用的业务逻辑
• 生命周期 - 组件生命周期增强

指令 (Directives) ​

• DOM 操作 - 常用 DOM 操作指令
• 交互增强 - 用户交互体验增强
• 性能优化 - 性能优化相关指令

开发体验 ​

约定式开发 ​

• 目录约定 - 统一的目录结构约定
• 命名约定 - 一致的命名规范
• 开发约定 - 标准化的开发流程

自动化工具 ​

• 组件生成 - 自动生成组件模板和文件
• 文档生成 - 自动生成文档模板
• 依赖管理 - 自动化依赖配置管理

开发工具 ​

• 热重载 - 快速的开发反馈
• 类型检查 - 实时的 TypeScript 类型检查
• 代码规范 - ESLint + Prettier 代码规范

主题系统 ​

灵活定制 ​

• CSS 变量 - 基于 CSS 变量的主题系统
• SCSS 支持 - 支持 SCSS 样式预处理
• 主题切换 - 支持动态主题切换

设计规范 ​

• 色彩系统 - 统一的色彩规范
• 字体系统 - 一致的字体规范
• 间距系统 - 标准化的间距规范

文档系统 ​

完善文档 ​

• 使用指南 - 详细的使用说明
• API 文档 - 完整的 API 参考
• 示例代码 - 丰富的示例代码

在线演示 ​

• 实时预览 - 在线代码演示
• 交互体验 - 可交互的组件演示
• 代码编辑 - 在线代码编辑器

持续集成 ​

自动化流程 ​

• 自动构建 - 自动化构建和打包
• 自动测试 - 自动化单元测试
• 自动发布 - 自动化版本发布

质量保证 ​

• 代码检查 - 自动化代码质量检查
• 类型检查 - TypeScript 类型检查
• 测试覆盖 - 完整的测试覆盖率

使用优势 ​

开发效率 ​

• 快速上手 - 5分钟快速上手
• 开箱即用 - 无需复杂配置
• 丰富组件 - 覆盖常见业务场景

维护成本 ​

• 统一规范 - 降低维护成本
• 模块化设计 - 便于扩展和维护
• 完善文档 - 降低学习成本

性能优化 ​

• 按需加载 - 减少打包体积
• Tree-shaking - 自动移除未使用代码
• 懒加载 - 支持组件懒加载