Art Design Pro

A Beautiful Admin Template for Better User Experience

Art Design Pro is an open-source admin management solution focused on user experience and rapid development. Built on ElementPlus design specifications with careful visual optimization, it provides a more beautiful and practical frontend interface to help you easily build high-quality admin systems.

Try it now →

Modern Tech Stack

Powered by Cutting-Edge Technology

Built with the latest tech stack including Vue3, TypeScript, Vite, and Tailwind CSS

ElementPlus component library provides powerful support, covering 80% of common components

Tailwind CSS atomic design for flexible, efficient, and rapid development of beautiful interfaces

Multiple theme modes with customization support to meet personalized needs

Live Preview →

Feature-Rich, Ready to Use

Complete system modules covering core features including theme customization, global search, multi-language support, data visualization, and permission management. With comprehensive code comments, well-designed architecture, and clear directory structure, it's easy to get started - even beginners can quickly master and start developing.

<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>

Efficient Development, Say Goodbye to Repetitive Code

useTable Composable

useTable is a powerful Vue 3 composable designed for modern web application table data management. It provides a complete table solution including data fetching, intelligent caching (LRU algorithm), pagination control, search functionality, dynamic column configuration, and multiple refresh strategies.

Integrating data fetching, pagination, search and more, it boosts development efficiency by 3-5x and reduces code by 70%, letting you focus on business logic instead of repetitive table configuration

Rich Components, Enhanced Efficiency

Provides a comprehensive table solution including useTable, ArtTable, ArtForm, ArtSearchBar, and ArtTableHeader, boosting development efficiency by 3-5x (finish in 30 minutes what used to take 2 hours). Say goodbye to repetitive coding, focus on business core, and maximize your development experience!

Quick Start

Built-in one-click cleanup script - no need to manually delete files. Clean demo data with one command and instantly get a ready-to-develop base project