Art Design Pro

一款兼具设计美学与高效开发的后台系统模版

Art Design Pro 一款专注于用户体验和快速开发的开源后台管理解决方案。基于 ElementPlus 设计规范，进行了视觉上的精心优化，提供更美观、更实用的前端界面，帮助你轻松构建高质量的后台系统。

立即体验 →

现代化技术栈

前沿技术加持，构建高效后台

使用 Vue3、TypeScript、Vite、Tailwind CSS 等最新技术栈

ElementPlus 组件库为您提供强大支持，覆盖 80% 的常用组件

Tailwind CSS 原子化设计，灵活高效，快速构建精美界面

多种主题模式，支持自定义主题，满足个性化需求

点击我，在线预览 →

功能丰富，开箱即用

系统功能模块完善，涵盖主题定制、全局搜索、多语言支持、数据可视化、权限管理等核心功能。代码注释详尽，架构设计合理，目录结构清晰，上手难度低，即使是新手也能快速掌握并投入开发。

<template>
  <div>
    <ArtTable
      :loading="loading"
      :data="data"
      :columns="columns"
      :pagination="pagination"
      @pagination:size-change="handleSizeChange"
      @pagination:current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { useTable } from "@/composables/useTable";
import { fetchGetUserList } from "@/api/system-manage";

const {
  data,
  loading,
  columns,
  pagination,
  handleSizeChange,
  handleCurrentChange,
} = useTable({
  core: {
    apiFn: fetchGetUserList,
    apiParams: {
      current: 1,
      size: 20,
    },
    columnsFactory: () => [
      { prop: "id", label: "ID" },
      { prop: "name", label: "姓名" },
      { prop: "email", label: "邮箱" },
    ],
  },
});
</script>

高效开发，告别重复编码

useTable 组合式函数

useTable 是一个功能强大的 Vue 3 组合式函数，专为现代 Web 应用的表格数据管理而设计。它提供了完整的表格解决方案，包括数据获取、智能缓存（LRU 算法）、分页控制、搜索功能、动态列配置和多种刷新策略。

整合数据获取、分页、搜索等功能，开发效率提升 3-5 倍，代码量减少 70%，让你专注于业务逻辑而非重复的表格配置

组件丰富，效率提升

提供了一套全面的表格解决解决方案，包括 useTable、ArtTable、ArtForm、ArtSearchBar、ArtTableHeader，让开发效率提升 3-5 倍（30 分钟搞定原 2 小时工作），帮你告别重复编码、专注业务核心，开发体验直接拉满！

快速开始

项目内置一键清理脚本，不需要手动删除文件，可通过脚本一键清理演示数据，立即得到可开发的基础项目