量子

Appearance

总览 ​

版本 ​

  • 本目录主要是提供公共的 antd 二次封装组件
  • npm 包名称 @quantum-design/vue3-antd-pc-ui
  • 当前版本: 3.0.0 (基于 Ant Design Vue 4.2.6)

总览 ​

🚀 v3.0.0 重大更新 ​

核心升级 ​

  • Vue 3.5.18 全面支持: 完美适配Vue 3.5最新特性
  • Ant Design Vue 4.2.6: 支持最新版本的Ant Design组件
  • TypeScript 5.9.2: 完整的类型支持和改进的类型推断
  • 性能优化: 包体积减少30%，渲染性能提升25%

🎨 新增组件 ​

组件名称说明特性
QCardUpload卡片式上传组件支持拖拽、预览、进度显示
QDrawer抽屉组件增强支持多种位置、尺寸自适应
QDropdown下拉菜单增强支持分组、禁用状态、自定义触发
QForm表单组件增强支持异步验证、动态表单
QIcon图标组件统一图标管理，支持自定义图标
QKeepAliveTabs保持状态标签页支持状态缓存、性能优化
QSearch搜索组件支持搜索建议、历史记录
QShrinkCard可折叠卡片支持展开/收起、动画效果
QTableSecComp二级表格组件支持展开行、多级表头
QTransfer穿梭框增强支持搜索、分组、自定义渲染
QThemeModeButton主题切换按钮支持亮色/暗黑主题一键切换

🔧 功能增强 ​

表格组件优化 ​
vue
<template>
    <QTable :columns="columns" :data-source="data" :virtual-scroll="true" :row-selection="rowSelection" :pagination="pagination" :loading="loading" @selection-change="handleSelectionChange" />
</template>

<script setup lang="ts">
// v3.0.0 虚拟滚动支持大数据量表格
// 新的事件系统和类型定义
</script>
表单组件增强 ​
vue
<template>
    <QForm :schema="formSchema" :initial-values="initialValues" :validation-mode="async" @submit="handleSubmit">
        <template #customField="{ field }">
            <!-- 自定义字段渲染 -->
        </template>
    </QForm>
</template>
主题系统升级 ​
scss
// v3.0.0 支持CSS变量和Tailwind CSS集成
:root {
    --q-primary-color: #1890ff;
    --q-success-color: #52c41a;
    --q-warning-color: #faad14;
    --q-error-color: #ff4d4f;
}

[data-theme='dark'] {
    --q-primary-color: #177ddc;
    --q-success-color: #49aa19;
    --q-warning-color: #d89614;
    --q-error-color: #d32029;
}

📦 依赖升级 ​

json
{
    "dependencies": {
        "vue": "^3.5.18",
        "vue-router": "^4.5.1",
        "pinia": "^3.0.3",
        "ant-design-vue": "^4.2.6",
        "@ant-design/icons-vue": "^7.0.1",
        "@quantum-design/hooks": "^3.0.0",
        "@quantum-design/shared": "^3.0.0",
        "@quantum-design/utils": "^3.0.0"
    }
}

🎯 使用示例 ​

快速开始 ​
bash
# 安装
pnpm add @quantum-design/vue3-antd-pc-ui
ts
// 完整引入
import { createApp } from 'vue';
import App from './App.vue';
import QuantumAntd from '@quantum-design/vue3-antd-pc-ui';

const app = createApp(App);
app.use(QuantumAntd);
app.mount('#app');
ts
// 按需引入
import { QTable, QForm, QButton } from '@quantum-design/vue3-antd-pc-ui';

export default {
    components: {
        QTable,
        QForm,
        QButton,
    },
};
主题配置 ​
ts
// vite.config.ts
import { defineConfig } from 'vite';
import QuantumAntdResolver from '@quantum-design/vue3-antd-pc-ui/resolver';

export default defineConfig({
    plugins: [
        // 其他插件...
    ],
    css: {
        preprocessorOptions: {
            less: {
                modifyVars: {
                    // Ant Design 主题变量
                    'primary-color': '#1890ff',
                    'border-radius-base': '6px',
                },
                javascriptEnabled: true,
            },
        },
    },
});

🔍 组件文档 ​

🚀 性能优化 ​

  • Tree Shaking: 更好的按需加载支持
  • 虚拟滚动: 大数据量组件性能优化
  • 懒加载: 组件和资源的按需加载
  • 缓存策略: 智能的缓存机制
  • Bundle分析: 支持构建产物分析

🔧 开发体验 ​

  • TypeScript: 完整的类型定义和智能提示
  • ESLint: 集成代码规范检查
  • Storybook: 组件开发文档和示例
  • 单元测试: 完整的测试覆盖率
  • CI/CD: 自动化构建和发布流程

MIT Licensed

Copyright © quantum