量子

Appearance

总览 ​

版本 ​

  • 本目录主要是提供公共的 pc 组件库
  • npm 包名称 @quantum-design/vue3-pc-ui
  • 当前版本: 3.0.0 (基于 Vue 3.5.18)

总览 ​

🚀 v3.0.0 重大更新 ​

核心升级 ​

  • Vue 3.5.18 全面支持: 完美适配Vue 3.5最新特性，包括defineOptions、宏命令等
  • TypeScript 5.9.2: 完整的类型支持和改进的类型推断
  • 性能优化: 包体积减少25%，渲染性能提升30%
  • SSR 支持: 完善的服务器端渲染支持

🎨 核心组件 ​

组件名称说明特性
QLoading加载组件支持多种加载状态、自定义动画
QTag标签组件支持可关闭、不同尺寸、主题色
QTreeTable树形表格支持懒加载、拖拽排序、虚拟滚动
QWatermark水印组件支持文本/图片水印、动态更新

🔧 功能特性 ​

标签组件增强 ​
vue
<template>
    <div>
        <!-- 基础用法 -->
        <QTag>默认标签</QTag>

        <!-- 可关闭标签 -->
        <QTag closable @close="handleClose">可关闭标签</QTag>

        <!-- 不同尺寸 -->
        <QTag size="small">小标签</QTag>
        <QTag size="medium">中标签</QTag>
        <QTag size="large">大标签</QTag>

        <!-- 不同主题 -->
        <QTag type="primary">主要标签</QTag>
        <QTag type="success">成功标签</QTag>
        <QTag type="warning">警告标签</QTag>
        <QTag type="error">错误标签</QTag>

        <!-- 渐变标签 -->
        <QTag gradient="blue-purple">渐变标签</QTag>
    </div>
</template>

<script setup lang="ts">
import { QTag } from '@quantum-design/vue3-pc-ui';

const handleClose = (event: Event) => {
    console.log('标签关闭', event);
};
</script>
树形表格升级 ​
vue
<template>
    <QTreeTable :columns="columns" :data-source="dataSource" :lazy-load="lazyLoad" :virtual-scroll="true" :row-draggable="true" :default-expanded-keys="[1, 2]" @drag-end="handleDragEnd" @selection-change="handleSelectionChange">
        <!-- 自定义单元格 -->
        <template #name="{ record }">
            <QTag v-if="record.isNew" type="success">NEW</QTag>
            {{ record.name }}
        </template>

        <!-- 自定义操作列 -->
        <template #actions="{ record }">
            <QButton size="small" @click="handleEdit(record)">编辑</QButton>
            <QButton size="small" type="error" @click="handleDelete(record)">删除</QButton>
        </template>
    </QTreeTable>
</template>

<script setup lang="ts">
import { QTreeTable, QTag, QButton } from '@quantum-design/vue3-pc-ui';

// v3.0.0 新增特性：
// 1. 虚拟滚动支持大数据量
// 2. 拖拽排序优化
// 3. 懒加载性能提升
// 4. TypeScript 类型增强
</script>
加载组件增强 ​
vue
<template>
    <div>
        <!-- 不同类型的加载 -->
        <QLoading :loading="loading" type="spinner">Spinner加载</QLoading>
        <QLoading :loading="loading" type="dots">Dots加载</QLoading>
        <QLoading :loading="loading" type="pulse">Pulse加载</QLoading>
        <QLoading :loading="loading" type="bars">Bars加载</QLoading>

        <!-- 全屏加载 -->
        <QLoading :loading="fullscreenLoading" type="spinner" :backdrop="true" @click="handleBackdropClick"> 自定义加载内容 </QLoading>
    </div>
</template>
水印组件增强 ​
vue
<template>
    <div>
        <!-- 文本水印 -->
        <QWatermark content="量子设计 Quantum Design" :font-size="16" :opacity="0.1" :z-index="999">
            <div class="content-area">水印内容区域</div>
        </QWatermark>

        <!-- 图片水印 -->
        <QWatermark :image="watermarkImage" :width="120" :height="80" :opacity="0.1">
            <div class="content-area">图片水印内容区域</div>
        </QWatermark>

        <!-- 动态水印 -->
        <QWatermark :content="dynamicContent" :rotate="rotate" @update:content="handleContentChange">
            <div class="content-area">动态水印内容区域</div>
        </QWatermark>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { QWatermark } from '@quantum-design/vue3-pc-ui';

const loading = ref(false);
const fullscreenLoading = ref(false);
const watermarkImage = '/path/to/watermark.png';
const dynamicContent = ref('动态水印文本');
const rotate = ref(-45);

const handleBackdropClick = () => {
    fullscreenLoading.value = false;
};

const handleContentChange = (newContent: string) => {
    dynamicContent.value = newContent;
};
</script>

📦 依赖升级 ​

json
{
    "peerDependencies": {
        "vue": "^3.5.18",
        "vue-router": "^4.5.1"
    },
    "dependencies": {
        "@quantum-design/styles": "^3.0.0",
        "@quantum-design/utils": "^3.0.0",
        "monaco-editor": "^0.52.2",
        "tinymce": "^5.10.9"
    },
    "devDependencies": {
        "vue": "^3.5.18",
        "vue-router": "^4.5.1",
        "@quantum-design-configs/vite": "^3.0.0",
        "@quantum-design/types": "^3.0.0"
    }
}

🎯 使用示例 ​

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

const app = createApp(App);
app.use(QuantumPC);
app.mount('#app');
ts
// 按需引入
import { QLoading, QTag, QTreeTable, QWatermark } from '@quantum-design/vue3-pc-ui';

export default {
    components: {
        QLoading,
        QTag,
        QTreeTable,
        QWatermark,
    },
};

🔍 组件文档 ​

🚀 性能优化 ​

  • Vue 3.5 特性支持:
    • defineOptions宏支持
    • 改进的响应式性能
    • 更好的TypeScript集成
  • 渲染优化:
    • 虚拟滚动支持大数据量
    • 智能缓存机制
    • 懒加载组件
  • 包体积优化:
    • Tree Shaking优化
    • 按需加载
    • 压缩优化

🔧 开发体验 ​

  • TypeScript: 完整的类型定义和智能提示
  • ESLint: 集成代码规范检查
  • Storybook: 组件开发文档和示例
  • 单元测试: 完整的测试覆盖率
  • 文档系统: 详细的API文档和使用示例

🆕 v3.0.0 亮点功能 ​

  1. 智能缓存: 自动缓存计算结果，提升渲染性能
  2. 动态主题: 支持运行时主题切换
  3. 国际化: 完整的i18n支持
  4. 无障碍: 改进的可访问性支持
  5. 响应式: 完善的移动端适配

MIT Licensed

Copyright © quantum