# vue3-artd-admin

**Repository Path**: moewang0321/vue3-artd-admin

## Basic Information

- **Project Name**: vue3-artd-admin
- **Description**: 基于art-design-pro二开的中后台模板
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-02
- **Last Updated**: 2026-05-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 技术栈

开发框架：Vue3、TypeScript、Vite、Element-Plus、Tailwind CSS

代码规范：Eslint、Prettier、Stylelint、Husky、Lint-staged、cz-git

## 快速访问

 [官方文档](https://www.artd.pro/docs) | [更新日志](./CHANGELOG.md)

## 安装运行

```bash
# 安装依赖
pnpm install

# 如果 pnpm install 安装失败，尝试使用下面的命令安装依赖
pnpm install --ignore-scripts

# 本地开发环境启动
pnpm dev

# 生产环境打包
pnpm build
```

## 精简版本

项目内置精简脚本，可快速移除项目中的演示数据，让开发者获得一个可快速开发的基础项目

```bash
pnpm clean:dev
```

## 兼容性

支持 Chrome、Safari、Firefox 等现代主流浏览器。

## 内置组件

### 1. ChannelTreeBar 通道树组件

通道数据树组件，用于展示和管理分层的通道/设备数据，支持多种筛选、排序和自定义操作功能。

**快速示例：**

```vue
<template>
  <ChannelTreeBar
    title="通道分组"
    :data="treeData"
    :loading="loading"
    @node-click="handleNodeClick"
    @group-change="handleGroupChange"
    @search="handleSearch"
  />
</template>

<script setup lang="ts">
  import ChannelTreeBar from '@/components/business/channel-tree-bar/index.vue'

  const treeData = ref([
    {
      value: '110000',
      label: '北京市',
      children: [
        {
          value: 'BJ_001',
          label: '王府井摄像头',
          status: 'online',
          stream_url: 'http://example.com/stream'
        }
      ]
    }
  ])
</script>
```

**主要功能：**

- ✅ 支持树形结构展示通道/设备
- ✅ 支持节点点击、展开、折叠
- ✅ 支持分组切换（行政区划、组织架构、业务分组、未分组）
- ✅ 支持搜索功能
- ✅ 支持自定义节点操作菜单
- ✅ 支持深色模式

**详细文档：** [查看完整文档](./src/components/business/channel-tree-bar/README.md)

---

### 2. VideoTemplate 视频模板组件

视频播放模板组件，支持多分屏、画面比例调整、列表轮播、播放全屏等功能，适用于监控视频播放场景。

**快速示例：**

```vue
<template>
  <VideoTemplate ref="videoTemplateRef" @clear-list="handleClearList" />
</template>

<script setup lang="ts">
  import VideoTemplate from '@/components/business/video-template/index.vue'

  const videoTemplateRef = ref()

  // 添加视频
  videoTemplateRef.value?.addVideo({
    url: 'http://example.com/stream',
    title: '摄像头 1',
    value: 'camera_001'
  })
</script>
```

**主要功能：**

- ✅ 支持 1/4/9/16 分屏模式
- ✅ 支持画面比例调整（自适应/16:9/4:3）
- ✅ 支持列表轮播（1/5/10 分钟）
- ✅ 支持播放全屏
- ✅ 支持分页功能
- ✅ 智能管理空模板（高分屏转低分屏自动移除空模板）

**详细文档：** [查看完整文档](./src/components/business/video-template/README.md)

---

### 3. TableSearchBar 表格搜索栏组件

通用的表格筛选搜索组件，支持多种表单组件类型、自定义组件、插槽、校验等功能，采用左右布局，响应式设计。

**快速示例：**

```vue
<template>
  <TableSearchBar
    v-model="searchForm"
    :items="formItems"
    @search="handleSearch"
    @reset="handleReset"
  />
</template>

<script setup lang="ts">
  import TableSearchBar from '@/components/business/table-search-bar/index.vue'

  const searchForm = ref({
    keyword: '',
    status: ''
  })

  const formItems = [
    {
      key: 'keyword',
      label: '关键词',
      type: 'input',
      placeholder: '请输入关键词'
    },
    {
      key: 'status',
      label: '状态',
      type: 'select',
      options: [
        { label: '全部', value: '' },
        { label: '启用', value: '1' }
      ]
    }
  ]
</script>
```

**支持的表单类型：**

- input（输入框）、select（选择器）、date（日期）、daterange（日期范围）
- checkbox（复选框）、radio（单选框）、switch（开关）
- rate（评分）、slider（滑块）、cascader（级联选择器）等

**详细文档：** [查看完整文档](./src/components/business/table-search-bar/README.md)

---

### 4. FormDialog 表单弹窗组件

通用的表单弹窗组件，基于 Element Plus 的 Dialog 和 Form 组件封装，支持完整的表单验证和操作。

**快速示例：**

```vue
<template>
  <FormDialog
    v-model="dialogVisible"
    title="添加用户"
    width="600px"
    :form-data="formData"
    :form-rules="rules"
    @confirm="handleSubmit"
  >
    <ElFormItem label="用户名" prop="username">
      <ElInput v-model="formData.username" />
    </ElFormItem>
  </FormDialog>
</template>

<script setup lang="ts">
  import FormDialog from '@/components/business/form-dialog/index.vue'

  const dialogVisible = ref(false)
  const formData = ref({ username: '' })

  const rules = {
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
  }
</script>
```

**主要特性：**

- ✅ 支持 v-model 双向绑定弹窗显示状态
- ✅ 完整的 Element Plus Dialog 属性支持
- ✅ 完整的 Element Plus Form 属性支持
- ✅ 自动表单验证
- ✅ 关闭时自动重置表单
- ✅ 暴露表单操作方法

**详细文档：** [查看完整文档](./src/components/business/form-dialog/README.md)

---

### 5. CardItem 通用卡片组件

通用的卡片列表项组件，适用于展示各种卡片式数据，支持自定义图标、标题、描述、内容、状态和底部操作。

**快速示例：**

```vue
<template>
  <div class="card-list">
    <CardItem
      icon="ri:app-store-line"
      title="应用名称"
      description="这是应用的描述信息"
      status-text="使用中"
      status-type="success"
      :model-value="true"
      primary-button="授权"
      secondary-button="更多"
    />
  </div>
</template>

<script setup lang="ts">
  import CardItem from '@/components/business/card-item/index.vue'
</script>

<style scoped>
  .card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    padding: 16px;
  }
</style>
```

**主要功能：**

- ✅ 支持自定义图标和主题色
- ✅ 支持标题、描述、内容自定义
- ✅ 支持状态显示（success/warning/danger/info）
- ✅ 支持 Switch 开关
- ✅ 支持主按钮和次按钮
- ✅ 支持悬停效果和选中状态

**详细文档：** [查看完整文档](./src/components/business/card-item/README.md)

---