mcl-ui-framework

平台简介

mcl-ui-framework 是一个基于 Vue 3 + TypeScript + Element Plus 开发的现代化 UI 组件库，专为中后台管理系统设计。它提供了完整的布局解决方案、丰富的工具类和系统指令，帮助开发者快速构建高质量的企业级应用。

核心特性

• 现代化技术栈：基于 Vue 3 Composition API 和 TypeScript
• 完整的布局组件：内置顶部导航栏、侧边栏菜单、主内容区域
• 丰富的主题支持：支持9种预设主题颜色、自定义颜色、明暗模式切换
• 皮肤预设功能：提供6种精美的皮肤风格
• 锁屏功能：支持系统锁屏，密码解锁
• 响应式设计：完美适配不同屏幕尺寸
• 灵活的路由集成：支持外部路由配置
• 面包屑导航：自动生成，固定顶部

技术栈

| 技术 | 版本 | 说明 | | :--- | :--- | :--- | | Vue | 3.x | 前端框架 | | TypeScript | 5.x | 类型安全 | | Element Plus | 2.x | UI 组件库 | | Vite | 6.x | 构建工具 | | Vue Router | 4.x | 路由管理 |

快速开始

安装

# 使用 npm
npm install mcl-ui-framework

# 使用 pnpm
pnpm add mcl-ui-framework

基本使用

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import MclUI from 'mcl-ui-framework'
import 'mcl-ui-framework/dist/mcl-ui-framework.css'

createApp(App).use(router).use(MclUI).mount('#app')

// App.vue
<template>
  <mcl-layout
    :routes="router.options.routes"
    :use-external-routes="true"
    :router="router"
  >
    <router-view />
  </mcl-layout>
</template>

<script setup lang="ts">
import router from './router'
</script>

组件文档

详细的组件文档请查看 docs/ 目录：

| 序号 | 组件名称 | 组件用途 | 路由路径 | 文档位置 | | :--- | :--- | :--- | :--- | :--- | | 1 | mclLayout | 核心布局组件，提供完整的页面布局结构（顶部导航栏、侧边栏菜单、主内容区域） | 所有 | docs/mclLayout.md | | 2 | mclLogin | 登录页面组件，提供用户名密码登录和验证码验证功能 | /login | docs/mclLogin.md | | 3 | mclRegister | 注册页面组件，提供完整的用户注册功能 | /register | docs/mclRegister.md | | 4 | mclForgotPassword | 忘记密码组件，提供三步式密码找回流程 | /forgot-password | docs/mclForgotPassword.md | | 5 | mclAi | AI 聊天助手组件，提供知识库支持、聊天对话、文件上传等功能 | /ai | docs/mclAi.md | | 6 | mclConfigurableDoc | 可配置文档组件，支持通过参数动态生成文档内容 | /configurableDocUseDoc | docs/mclConfigurableDoc.md | | 7 | mclFloatButton | 可拖拽悬浮按钮组件，支持自定义位置、拖拽阈值和边界检测 | - | docs/mclFloatButton.md | | 8 | 组件使用综合文档 | 汇总所有组件的使用方法和 API 说明 | - | COMPONENT_USAGE.md | | 9 | Python 后端服务 | AI 聊天助手的后端服务，支持本地 Ollama 模型 | - | python/README.md |

开发环境

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

开发参考

参考项目：mcl-ui-frame

贡献指南

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

许可证

MIT License

联系方式

• 项目地址：https://gitee.com/ma_chun_liang/mcl-ui-framework
• Issues：https://gitee.com/ma_chun_liang/mcl-ui-framework/issues
• 作者姓名：马春亮
• 作者联系方式：18804656460（微信同号）

版本历史

| 版本号 | 发布日期 | 更新内容 | | :--- | :--- | :--- | | 1.0.0 | 2026-01-01 | 初始版本，发布基础布局组件 | | 1.0.1 | 2026-01-15 | 修复布局组件的响应式问题 | | 1.0.10 | 2026-02-01 | 优化主题切换功能，增加自定义主题颜色支持 | | 1.0.11 | 2026-02-15 | 新增皮肤预设功能，提供6种精美皮肤风格 | | 1.0.12 | 2026-03-01 | 新增锁屏功能，支持密码解锁和实时时间显示 | | 1.0.13 | 2026-03-15 | 优化皮肤预设弹窗样式，统一主题设置界面风格 | | 1.0.14 | 2026-04-01 | 完善移动端响应式布局，新增自定义边距配置功能 | | 1.0.17 | 2026-04-30 | 优化侧边栏图标居中样式，新增面包屑导航功能 | | 1.0.18 | 2026-05-01 | 新增 mclLogin、mclRegister、mclForgotPassword 组件，完善组件文档结构，统一文档风格 | | 1.0.19 | 2026-05-01 | 完善组件导出，确保所有组件正确注册 | | 1.0.20 | 2026-05-01 | 添加 docs 目录到发布文件列表，完善文档结构 | | 1.0.21 | 2026-05-01 | 调整文档位置显示格式为纯文本路径 | | 1.0.22 | 2026-05-01 | 更新文档链接为 Gitee dist 分支地址 | | 1.0.23 | 2026-05-01 | 更新文档链接为 Gitee master 分支地址 | | 1.0.24 | 2026-05-02 | 新增所有 view 和 Doc 文件导出，完善组件导出结构 | | 1.0.25 | 2026-05-02 | 更新版本号，完善开发参考文档 | | 1.0.26 | 2026-05-03 | 新增 mclAi AI 聊天助手组件，完善组件文档，修复 Vue 模板语法错误 | | 1.0.27 | 2026-05-03 | 修复 mclAi 移动端超出高度不滚动问题，优化移动端布局 | | 1.0.28 | 2026-05-03 | 完善 mclAi 组件，支持自定义 API 接口地址配置，新增 Flask 后端服务支持本地 Ollama 模型 | | 1.0.29 | 2026-05-05 | 新增 ConfigurableDoc 可配置文档组件，支持通过参数动态生成文档内容，提供代码块、表格、列表、功能卡片等多种内容类型，支持响应式设计和深色模式 | | 1.0.30 | 2026-05-05 | 完善组件导出配置，确保所有组件和文档组件正确导出，更新文档链接和使用说明 | | 1.0.31 | 2026-05-05 | 修复项目依赖解析问题，配置本地包链接，确保 docs 项目正常构建 | | 1.0.32 | 2026-05-05 | 更新 docs 目录结构，新增 docs/README.md 文档索引，完善组件文档体系 | | 1.0.33 | 2026-05-05 | 优化 mclAi 组件样式，修复移动端背景色不一致、输入框自动多行、头像贴边等问题，调整头像尺寸为60px | | 1.0.34 | 2026-05-11 | 优化路由配置，移除功能列表和系统设置路由，调整概述和系统管理图标配置，完善侧边栏菜单显示，新增 mclFloatButton 可拖拽悬浮按钮组件 |