chore update

src/components/base/AppCard.vue

 <script setup lang="ts">
-interface Props {
-  title?: string
-  hasCardBackground?: boolean
-  hasBodyBackground?: boolean
-}
-withDefaults(defineProps<Props>(), { hasBodyBackground: true })
+const props = defineProps<{ title?: string; full?: boolean }>()
+const styleHeight = computed(() => {
+  return props.full ? 'calc(100vh - 90px)' : 'auto'
+})
 </script>
 
 <template>
-  <div class="app-card" :class="{ 'has-background': hasCardBackground }">
+  <div class="app-card">
     <div class="app-card-hd">
       <slot name="header">
         <h2 class="app-card-hd__title" v-if="title">{{ title }}</h2>
@@ -17,7 +15,7 @@ withDefaults(defineProps<Props>(), { hasBodyBackground: true })
         </div>
       </slot>
     </div>
-    <div class="app-card-bd" :class="{ 'has-background': hasBodyBackground }">
+    <div class="app-card-bd">
       <slot></slot>
     </div>
   </div>
@@ -25,12 +23,12 @@ withDefaults(defineProps<Props>(), { hasBodyBackground: true })
 
 <style lang="scss">
 .app-card {
-  &.has-background {
-    background: #fff;
-    box-shadow: 0 1px 6px 0 rgb(228 232 235 / 20%);
-    border-radius: 6px;
-    padding: 20px;
-  }
+  min-height: v-bind(styleHeight);
+  background: #fff;
+  box-shadow: 0 1px 6px 0 rgb(228 232 235 / 20%);
+  border-radius: 6px;
+  padding: 20px;
+  box-sizing: border-box;
 }
 .app-card + .app-card {
   margin-top: 20px;
@@ -40,18 +38,14 @@ withDefaults(defineProps<Props>(), { hasBodyBackground: true })
 }
 .app-card-hd__title {
   flex: 1;
-  margin-bottom: 20px;
-  font-size: 20px;
-  font-family: Source Han Sans CN;
-  font-weight: bold;
+  padding-left: 5px;
+  font-size: 18px;
+  font-weight: 500;
   line-height: 1;
-  color: #333333;
-}
-.app-card-bd {
-  &.has-background {
-    padding: 20px;
-    background-color: #fff;
-    border-radius: 6px;
+  margin-bottom: 24px;
+  border-left: 3px solid #aa1941;
+  &.small {
+    font-size: 14px;
   }
 }
 </style>

src/components/base/AppList.vue

@@ -237,7 +237,7 @@ defineExpose({ refetch, tableRef })
 .el-table-column--selection .cell {
   padding: 0 14px !important;
 }
-.table-list {
+.table-list-bd {
   .el-button {
     a {
       margin: -8px -15px;

src/components/layout/Aside.vue

@@ -66,6 +66,8 @@ function findMenu(path: string, menus: IMenuItem[]) {
 
 <style lang="scss">
 .app-aside {
+  position: sticky;
+  top: 0;
   display: flex;
   height: 100vh;
   overflow-x: hidden;

src/components/layout/Footer.vue

@@ -4,17 +4,22 @@ export default { name: 'AppFooter' }
 
 <template>
   <footer class="app-footer">
-    <p>技术支持：清控紫荆（北京）教育科技股份有限公司</p>
+    <p>实验室版本：V2.1.0</p>
+    <p>Copyright © 2017 Zijing Education. All rights reserved. 清控紫荆（北京）教育科技股份有限公司</p>
   </footer>
 </template>
 
 <style lang="scss">
 .app-footer {
-  padding: 10px 0;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 50px;
   font-size: 14px;
-  line-height: 30px;
-  color: #707070;
-  text-align: center;
+  color: #9a9a9a;
   background-color: #fff;
+  margin: 10px;
+  border-radius: 6px;
 }
 </style>

src/components/layout/Index.vue

@@ -14,7 +14,7 @@ interface Props {
 
 withDefaults(defineProps<Props>(), {
   sidebar: true,
-  footer: false
+  footer: true
 })
 </script>
 
@@ -23,8 +23,8 @@ withDefaults(defineProps<Props>(), {
     <AppAside v-if="sidebar"></AppAside>
     <div class="app-layout-container">
       <AppMain></AppMain>
+      <AppFooter v-if="footer"></AppFooter>
     </div>
-    <AppFooter v-if="footer"></AppFooter>
   </div>
 </template>
 
@@ -36,6 +36,8 @@ withDefaults(defineProps<Props>(), {
 }
 .app-layout-container {
   flex: 1;
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
 }
 </style>

src/components/layout/Main.vue

@@ -10,7 +10,9 @@ export default { name: 'AppMain' }
 
 <style>
 .app-main {
+  flex: 1;
   padding: 10px;
   overflow: hidden;
+  box-sizing: border-box;
 }
 </style>

src/modules/connect/components/ListItem.vue

+<script setup lang="ts">
+import { Delete, ElemeFilled } from '@element-plus/icons-vue'
+import { ElMessageBox } from 'element-plus'
+
+const emits = defineEmits<{
+  (e: 'update'): void
+}>()
+
+// 删除
+function handleRemove() {
+  ElMessageBox.confirm('确定要删除该连接吗？', '提示').then(() => {
+    emits('update')
+  })
+}
+</script>
+
+<template>
+  <div class="connect-item">
+    <div class="connect-item__remove" @click="handleRemove">
+      <el-icon><Delete /></el-icon>
+    </div>
+    <div class="connect-item__icon">
+      <el-icon><ElemeFilled /></el-icon>
+    </div>
+    <p>连接名称</p>
+  </div>
+</template>
+
+<style lang="scss">
+.connect-item {
+  position: relative;
+  height: 124px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  border: 1px dashed #bbb;
+  cursor: pointer;
+  &:hover {
+    box-shadow: rgb(0 0 0 / 40%) 0px 2px 6px 0px;
+    .connect-item__remove {
+      display: block;
+    }
+  }
+}
+.connect-item__remove {
+  display: none;
+  position: absolute;
+  right: 8px;
+  top: 8px;
+}
+</style>

src/modules/connect/views/Index.vue

+<script setup lang="ts">
+import { Plus } from '@element-plus/icons-vue'
+import AppList from '@/components/base/AppList.vue'
+import ListItem from '../components/ListItem.vue'
+
+const appList = $ref<InstanceType<typeof AppList> | null>(null)
+// 列表配置
+const listOptions = computed(() => {
+  return {
+    filters: [
+      { type: 'input', prop: 'name', placeholder: '请输入连接名称' },
+      { type: 'input', prop: 'name', placeholder: '请输入创建人姓名' },
+      { type: 'input', prop: 'name', placeholder: '请输入创建人学号' }
+    ],
+    columns: [
+      { label: '序号', type: 'index', width: 60 },
+      { label: '属性ID', prop: 'id' },
+      { label: '属性名称', prop: 'name' },
+      { label: '属性字段类型', prop: 'name' },
+      { label: '状态', prop: 'name' },
+      { label: '更新人', prop: 'name' },
+      { label: '更新时间', prop: 'name' },
+      { label: '操作', slots: 'table-x', width: 240 }
+    ],
+    data: [{}, {}]
+  }
+})
+
+// 刷新
+function handleRefresh() {
+  appList?.refetch()
+}
+</script>
+
 <template>
-  <AppCard></AppCard>
+  <AppCard>
+    <AppList v-bind="listOptions" ref="appList">
+      <template #body="{ data }">
+        <div class="connect-list">
+          <ListItem v-for="item in data" :key="item.id" @update="handleRefresh"></ListItem>
+
+          <div class="connect-item">
+            <div class="connect-add-button">
+              <el-icon><Plus /></el-icon>
+              <span>新建连接</span>
+            </div>
+          </div>
+        </div>
+      </template>
+    </AppList>
+  </AppCard>
 </template>
+
+<style lang="scss">
+.connect-list {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 20px;
+  padding: 20px;
+  background-color: #efefef;
+  border-radius: 5px;
+}
+.connect-add-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .el-icon {
+    font-size: 20px;
+    margin-right: 10px;
+  }
+}
+</style>

src/modules/group/views/Index.vue

+<script setup lang="ts">
+import { Plus, Delete } from '@element-plus/icons-vue'
+import AppList from '@/components/base/AppList.vue'
+
+const appList = $ref<InstanceType<typeof AppList> | null>(null)
+// 列表配置
+const listOptions = computed(() => {
+  return {
+    filters: [{ type: 'input', prop: 'name', placeholder: '请输入群组名称' }],
+    columns: [
+      { type: 'selection' },
+      { label: '序号', type: 'index', width: 60 },
+      { label: '群主ID', prop: 'id' },
+      { label: '群主名称', prop: 'name' },
+      { label: '群主类型', prop: 'name' },
+      { label: '更新方式', prop: 'name' },
+      { label: '最近计算完成时间', prop: 'name' },
+      { label: '状态', prop: 'name' },
+      { label: '更新人', prop: 'name' },
+      { label: '更新时间', prop: 'name' },
+      { label: '操作', slots: 'table-x', width: 240 }
+    ],
+    data: [{}, {}]
+  }
+})
+
+// 刷新
+function handleRefresh() {
+  appList?.refetch()
+}
+</script>
+
 <template>
-  <AppCard></AppCard>
+  <AppCard>
+    <AppList v-bind="listOptions" ref="appList">
+      <template #header-buttons>
+        <el-space>
+          <el-button type="primary" :icon="Plus">新建</el-button>
+          <el-button type="danger" plain :icon="Delete">删除</el-button>
+        </el-space>
+      </template>
+
+      <template #table-x>
+        <el-button type="primary" plain>查看</el-button>
+        <el-button type="primary" plain>编辑</el-button>
+        <el-button type="primary" plain>删除</el-button>
+      </template>
+    </AppList>
+  </AppCard>
 </template>

src/modules/label/components/LabelType.vue

+<script setup lang="ts">
+import { Delete } from '@element-plus/icons-vue'
+
+const typeList = $ref([
+  { name: '基础标签' },
+  { name: '渠道标签' },
+  { name: '基础标签' },
+  { name: '基础标签' },
+  { name: '基础标签' },
+  { name: '基础标签' }
+])
+</script>
+
+<template>
+  <el-button type="primary" style="width: 100%">添加标签类型</el-button>
+  <div class="label-type-total">
+    <h4>全部标签</h4>
+    <p>127个</p>
+  </div>
+  <ul>
+    <li class="label-type-item" v-for="(item, index) in typeList" :key="index">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="16" height="16">
+        <g>
+          <path
+            d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z"></path>
+        </g>
+      </svg>
+      <p>{{ item.name }}</p>
+      <el-icon class="label-type-item__remove"><Delete /></el-icon>
+    </li>
+  </ul>
+</template>
+
+<style lang="scss">
+.label-type-total {
+  padding: 18px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+}
+.label-type-item {
+  display: flex;
+  align-items: center;
+  padding: 0 5px;
+  margin-bottom: 4px;
+  font-size: 12px;
+  line-height: 30px;
+  p {
+    padding: 0 10px;
+    flex: 1;
+  }
+  &:hover {
+    background-color: #efefef;
+    .label-type-item__remove {
+      display: block;
+    }
+  }
+}
+.label-type-item__remove {
+  display: none;
+  cursor: pointer;
+}
+</style>

src/modules/label/views/Index.vue

+<script setup lang="ts">
+import { Plus } from '@element-plus/icons-vue'
+import AppList from '@/components/base/AppList.vue'
+import LabelType from '../components/LabelType.vue'
+
+const appList = $ref<InstanceType<typeof AppList> | null>(null)
+// 列表配置
+const listOptions = computed(() => {
+  return {
+    filters: [
+      { type: 'input', prop: 'name', placeholder: '请输入标签名称' },
+      { type: 'select', prop: 'type', placeholder: '请选择标签类型' }
+    ],
+    columns: [
+      { label: '序号', type: 'index', width: 60 },
+      { label: '标签ID', prop: 'id' },
+      { label: '标签名称', prop: 'name' },
+      { label: '标签类型', prop: 'name' },
+      { label: '更新频率', prop: 'name' },
+      { label: '状态', prop: 'name' },
+      { label: '更新人', prop: 'name' },
+      { label: '更新时间', prop: 'name' },
+      { label: '操作', slots: 'table-x', width: 240 }
+    ],
+    data: [{}, {}]
+  }
+})
+
+// 刷新
+function handleRefresh() {
+  appList?.refetch()
+}
+</script>
+
 <template>
-  <AppCard></AppCard>
+  <AppCard>
+    <div class="label-wrap">
+      <div class="label-left"><LabelType></LabelType></div>
+      <AppList v-bind="listOptions" ref="appList" class="label-right">
+        <template #header-buttons>
+          <el-space>
+            <el-button type="primary" :icon="Plus">新建</el-button>
+          </el-space>
+        </template>
+
+        <template #table-x>
+          <el-button type="primary" plain>查看</el-button>
+          <el-button type="primary" plain>编辑</el-button>
+          <el-button type="primary" plain>删除</el-button>
+        </template>
+      </AppList>
+    </div>
+  </AppCard>
 </template>
+
+<style lang="scss">
+.label-wrap {
+  min-height: calc(100vh - 130px);
+  display: flex;
+}
+.label-left {
+  padding-right: 20px;
+  margin-right: 20px;
+  flex: 0 0 200px;
+  border-right: 1px solid rgb(187, 187, 187);
+}
+.label-right {
+  flex: 1;
+}
+</style>

src/modules/material/audio/index.ts

+import type { RouteRecordRaw } from 'vue-router'
+import Layout from '@/components/layout/Index.vue'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/material/audio',
+    component: Layout,
+    children: [{ path: '', component: () => import('./views/Index.vue') }]
+  }
+]
+
+export { routes }

src/modules/material/audio/views/Index.vue

+<script setup lang="ts">
+import { Plus, Delete } from '@element-plus/icons-vue'
+import AppList from '@/components/base/AppList.vue'
+
+const appList = $ref<InstanceType<typeof AppList> | null>(null)
+// 列表配置
+const listOptions = computed(() => {
+  return {
+    filters: [{ type: 'input', prop: 'name', placeholder: '请输入资料名称' }],
+    columns: [
+      { type: 'selection' },
+      { label: '序号', type: 'index', width: 60 },
+      { label: '资料ID', prop: 'id' },
+      { label: '资料名称', prop: 'name' },
+      { label: '资料类型', prop: 'name' },
+      { label: '状态', prop: 'name' },
+      { label: '更新人', prop: 'name' },
+      { label: '更新时间', prop: 'name' },
+      { label: '操作', slots: 'table-x', width: 240 }
+    ],
+    data: [{}, {}]
+  }
+})
+
+// 刷新
+function handleRefresh() {
+  appList?.refetch()
+}
+</script>
+
+<template>
+  <AppCard>
+    <AppList v-bind="listOptions" ref="appList">
+      <template #header-buttons>
+        <el-space>
+          <el-button type="primary" :icon="Plus">新建</el-button>
+          <el-button type="danger" plain :icon="Delete">删除</el-button>
+        </el-space>
+      </template>
+
+      <template #table-x>
+        <el-button type="primary" plain>查看</el-button>
+        <el-button type="primary" plain>编辑</el-button>
+        <el-button type="primary" plain>删除</el-button>
+      </template>
+    </AppList>
+  </AppCard>
+</template>

src/modules/material/card/index.ts

+import type { RouteRecordRaw } from 'vue-router'
+import Layout from '@/components/layout/Index.vue'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/material/card',
+    component: Layout,
+    children: [{ path: '', component: () => import('./views/Index.vue') }]
+  }
+]
+
+export { routes }

src/modules/material/card/views/Index.vue

+<script setup lang="ts">
+import { Plus, Delete } from '@element-plus/icons-vue'
+import AppList from '@/components/base/AppList.vue'
+
+const appList = $ref<InstanceType<typeof AppList> | null>(null)
+// 列表配置
+const listOptions = computed(() => {
+  return {
+    filters: [{ type: 'input', prop: 'name', placeholder: '请输入资料名称' }],
+    columns: [
+      { type: 'selection' },
+      { label: '序号', type: 'index', width: 60 },
+      { label: '资料ID', prop: 'id' },
+      { label: '资料名称', prop: 'name' },
+      { label: '资料类型', prop: 'name' },
+      { label: '状态', prop: 'name' },
+      { label: '更新人', prop: 'name' },
+      { label: '更新时间', prop: 'name' },
+      { label: '操作', slots: 'table-x', width: 240 }
+    ],
+    data: [{}, {}]
+  }
+})
+
+// 刷新
+function handleRefresh() {
+  appList?.refetch()
+}
+</script>
+
+<template>
+  <AppCard>
+    <AppList v-bind="listOptions" ref="appList">
+      <template #header-buttons>
+        <el-space>
+          <el-button type="primary" :icon="Plus">新建</el-button>
+          <el-button type="danger" plain :icon="Delete">删除</el-button>
+        </el-space>
+      </template>
+
+      <template #table-x>
+        <el-button type="primary" plain>查看</el-button>
+        <el-button type="primary" plain>编辑</el-button>
+        <el-button type="primary" plain>删除</el-button>
+      </template>
+    </AppList>
+  </AppCard>
+</template>

src/modules/material/h5/index.ts

+import type { RouteRecordRaw } from 'vue-router'
+import Layout from '@/components/layout/Index.vue'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/material/h5',
+    component: Layout,
+    children: [{ path: '', component: () => import('./views/Index.vue') }]
+  }
+]
+
+export { routes }

src/modules/material/h5/views/Index.vue

+<script setup lang="ts">
+import { Plus, Delete } from '@element-plus/icons-vue'
+import AppList from '@/components/base/AppList.vue'
+
+const appList = $ref<InstanceType<typeof AppList> | null>(null)
+// 列表配置
+const listOptions = computed(() => {
+  return {
+    filters: [{ type: 'input', prop: 'name', placeholder: '请输入资料名称' }],
+    columns: [
+      { type: 'selection' },
+      { label: '序号', type: 'index', width: 60 },
+      { label: '资料ID', prop: 'id' },
+      { label: '资料名称', prop: 'name' },
+      { label: '资料类型', prop: 'name' },
+      { label: '状态', prop: 'name' },
+      { label: '更新人', prop: 'name' },
+      { label: '更新时间', prop: 'name' },
+      { label: '操作', slots: 'table-x', width: 240 }
+    ],
+    data: [{}, {}]
+  }
+})
+
+// 刷新
+function handleRefresh() {
+  appList?.refetch()
+}
+</script>
+
+<template>
+  <AppCard>
+    <AppList v-bind="listOptions" ref="appList">
+      <template #header-buttons>
+        <el-space>
+          <el-button type="primary" :icon="Plus">新建</el-button>
+          <el-button type="danger" plain :icon="Delete">删除</el-button>
+        </el-space>
+      </template>
+
+      <template #table-x>
+        <el-button type="primary" plain>查看</el-button>
+        <el-button type="primary" plain>编辑</el-button>
+        <el-button type="primary" plain>删除</el-button>
+      </template>
+    </AppList>
+  </AppCard>
+</template>

src/modules/material/image/views/Index.vue

+<script setup lang="ts">
+import { Plus, Delete } from '@element-plus/icons-vue'
+import AppList from '@/components/base/AppList.vue'
+
+const appList = $ref<InstanceType<typeof AppList> | null>(null)
+// 列表配置
+const listOptions = computed(() => {
+  return {
+    filters: [{ type: 'input', prop: 'name', placeholder: '请输入资料名称' }],
+    columns: [
+      { type: 'selection' },
+      { label: '序号', type: 'index', width: 60 },
+      { label: '资料ID', prop: 'id' },
+      { label: '资料名称', prop: 'name' },
+      { label: '资料类型', prop: 'name' },
+      { label: '状态', prop: 'name' },
+      { label: '更新人', prop: 'name' },
+      { label: '更新时间', prop: 'name' },
+      { label: '操作', slots: 'table-x', width: 240 }
+    ],
+    data: [{}, {}]
+  }
+})
+
+// 刷新
+function handleRefresh() {
+  appList?.refetch()
+}
+</script>
+
 <template>
-  <AppCard></AppCard>
+  <AppCard>
+    <AppList v-bind="listOptions" ref="appList">
+      <template #header-buttons>
+        <el-space>
+          <el-button type="primary" :icon="Plus">新建</el-button>
+          <el-button type="danger" plain :icon="Delete">删除</el-button>
+        </el-space>
+      </template>
+
+      <template #table-x>
+        <el-button type="primary" plain>查看</el-button>
+        <el-button type="primary" plain>编辑</el-button>
+        <el-button type="primary" plain>删除</el-button>
+      </template>
+    </AppList>
+  </AppCard>
 </template>

src/modules/material/mini/index.ts

+import type { RouteRecordRaw } from 'vue-router'
+import Layout from '@/components/layout/Index.vue'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/material/mini',
+    component: Layout,
+    children: [{ path: '', component: () => import('./views/Index.vue') }]
+  }
+]
+
+export { routes }

src/modules/material/mini/views/Index.vue

+<script setup lang="ts">
+import { Plus, Delete } from '@element-plus/icons-vue'
+import AppList from '@/components/base/AppList.vue'
+
+const appList = $ref<InstanceType<typeof AppList> | null>(null)
+// 列表配置
+const listOptions = computed(() => {
+  return {
+    filters: [{ type: 'input', prop: 'name', placeholder: '请输入资料名称' }],
+    columns: [
+      { type: 'selection' },
+      { label: '序号', type: 'index', width: 60 },
+      { label: '资料ID', prop: 'id' },
+      { label: '资料名称', prop: 'name' },
+      { label: '资料类型', prop: 'name' },
+      { label: '状态', prop: 'name' },
+      { label: '更新人', prop: 'name' },
+      { label: '更新时间', prop: 'name' },
+      { label: '操作', slots: 'table-x', width: 240 }
+    ],
+    data: [{}, {}]
+  }
+})
+
+// 刷新
+function handleRefresh() {
+  appList?.refetch()
+}
+</script>
+
+<template>
+  <AppCard>
+    <AppList v-bind="listOptions" ref="appList">
+      <template #header-buttons>
+        <el-space>
+          <el-button type="primary" :icon="Plus">新建</el-button>
+          <el-button type="danger" plain :icon="Delete">删除</el-button>
+        </el-space>
+      </template>
+
+      <template #table-x>
+        <el-button type="primary" plain>查看</el-button>
+        <el-button type="primary" plain>编辑</el-button>
+        <el-button type="primary" plain>删除</el-button>
+      </template>
+    </AppList>
+  </AppCard>
+</template>

src/modules/material/qrcode/index.ts

+import type { RouteRecordRaw } from 'vue-router'
+import Layout from '@/components/layout/Index.vue'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/material/qrcode',
+    component: Layout,
+    children: [{ path: '', component: () => import('./views/Index.vue') }]
+  }
+]
+
+export { routes }

src/modules/material/qrcode/views/Index.vue

+<script setup lang="ts">
+import { Plus, Delete } from '@element-plus/icons-vue'
+import AppList from '@/components/base/AppList.vue'
+
+const appList = $ref<InstanceType<typeof AppList> | null>(null)
+// 列表配置
+const listOptions = computed(() => {
+  return {
+    filters: [{ type: 'input', prop: 'name', placeholder: '请输入资料名称' }],
+    columns: [
+      { type: 'selection' },
+      { label: '序号', type: 'index', width: 60 },
+      { label: '资料ID', prop: 'id' },
+      { label: '资料名称', prop: 'name' },
+      { label: '资料类型', prop: 'name' },
+      { label: '状态', prop: 'name' },
+      { label: '更新人', prop: 'name' },
+      { label: '更新时间', prop: 'name' },
+      { label: '操作', slots: 'table-x', width: 240 }
+    ],
+    data: [{}, {}]
+  }
+})
+
+// 刷新
+function handleRefresh() {
+  appList?.refetch()
+}
+</script>
+
+<template>
+  <AppCard>
+    <AppList v-bind="listOptions" ref="appList">
+      <template #header-buttons>
+        <el-space>
+          <el-button type="primary" :icon="Plus">新建</el-button>
+          <el-button type="danger" plain :icon="Delete">删除</el-button>
+        </el-space>
+      </template>
+
+      <template #table-x>
+        <el-button type="primary" plain>查看</el-button>
+        <el-button type="primary" plain>编辑</el-button>
+        <el-button type="primary" plain>删除</el-button>
+      </template>
+    </AppList>
+  </AppCard>
+</template>

src/modules/material/text/views/Index.vue

+<script setup lang="ts">
+import { Plus, Delete } from '@element-plus/icons-vue'
+import AppList from '@/components/base/AppList.vue'
+
+const appList = $ref<InstanceType<typeof AppList> | null>(null)
+// 列表配置
+const listOptions = computed(() => {
+  return {
+    filters: [{ type: 'input', prop: 'name', placeholder: '请输入资料名称' }],
+    columns: [
+      { type: 'selection' },
+      { label: '序号', type: 'index', width: 60 },
+      { label: '资料ID', prop: 'id' },
+      { label: '资料名称', prop: 'name' },
+      { label: '资料类型', prop: 'name' },
+      { label: '状态', prop: 'name' },
+      { label: '更新人', prop: 'name' },
+      { label: '更新时间', prop: 'name' },
+      { label: '操作', slots: 'table-x', width: 240 }
+    ],
+    data: [{}, {}]
+  }
+})
+
+// 刷新
+function handleRefresh() {
+  appList?.refetch()
+}
+</script>
+
 <template>
-  <AppCard></AppCard>
+  <AppCard>
+    <AppList v-bind="listOptions" ref="appList">
+      <template #header-buttons>
+        <el-space>
+          <el-button type="primary" :icon="Plus">新建</el-button>
+          <el-button type="danger" plain :icon="Delete">删除</el-button>
+        </el-space>
+      </template>
+
+      <template #table-x>
+        <el-button type="primary" plain>查看</el-button>
+        <el-button type="primary" plain>编辑</el-button>
+        <el-button type="primary" plain>删除</el-button>
+      </template>
+    </AppList>
+  </AppCard>
 </template>

src/modules/material/video/index.ts

+import type { RouteRecordRaw } from 'vue-router'
+import Layout from '@/components/layout/Index.vue'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/material/video',
+    component: Layout,
+    children: [{ path: '', component: () => import('./views/Index.vue') }]
+  }
+]
+
+export { routes }

src/modules/material/video/views/Index.vue

+<script setup lang="ts">
+import { Plus, Delete } from '@element-plus/icons-vue'
+import AppList from '@/components/base/AppList.vue'
+
+const appList = $ref<InstanceType<typeof AppList> | null>(null)
+// 列表配置
+const listOptions = computed(() => {
+  return {
+    filters: [{ type: 'input', prop: 'name', placeholder: '请输入资料名称' }],
+    columns: [
+      { type: 'selection' },
+      { label: '序号', type: 'index', width: 60 },
+      { label: '资料ID', prop: 'id' },
+      { label: '资料名称', prop: 'name' },
+      { label: '资料类型', prop: 'name' },
+      { label: '状态', prop: 'name' },
+      { label: '更新人', prop: 'name' },
+      { label: '更新时间', prop: 'name' },
+      { label: '操作', slots: 'table-x', width: 240 }
+    ],
+    data: [{}, {}]
+  }
+})
+
+// 刷新
+function handleRefresh() {
+  appList?.refetch()
+}
+</script>
+
+<template>
+  <AppCard>
+    <AppList v-bind="listOptions" ref="appList">
+      <template #header-buttons>
+        <el-space>
+          <el-button type="primary" :icon="Plus">新建</el-button>
+          <el-button type="danger" plain :icon="Delete">删除</el-button>
+        </el-space>
+      </template>
+
+      <template #table-x>
+        <el-button type="primary" plain>查看</el-button>
+        <el-button type="primary" plain>编辑</el-button>
+        <el-button type="primary" plain>删除</el-button>
+      </template>
+    </AppList>
+  </AppCard>
+</template>

src/modules/user/views/Index.vue

+<script setup lang="ts">
+import { Plus, Download, Upload, Delete } from '@element-plus/icons-vue'
+import AppList from '@/components/base/AppList.vue'
+
+const appList = $ref<InstanceType<typeof AppList> | null>(null)
+// 列表配置
+const listOptions = computed(() => {
+  return {
+    filters: [{ type: 'input', prop: 'name', placeholder: '请输入用户姓名' }],
+    columns: [
+      { type: 'selection' },
+      { label: '序号', type: 'index', width: 60 },
+      { label: '用户ID', prop: 'id' },
+      { label: '姓名', prop: 'name' },
+      { label: '性别', prop: 'name' },
+      { label: '手机号码', prop: 'name' },
+      { label: '来源连接', prop: 'name' },
+      { label: '状态', prop: 'name' },
+      { label: '更新人', prop: 'name' },
+      { label: '更新时间', prop: 'name' },
+      { label: '操作', slots: 'table-x', width: 380 }
+    ],
+    data: [{}, {}]
+  }
+})
+
+// 刷新
+function handleRefresh() {
+  appList?.refetch()
+}
+</script>
+
 <template>
-  <AppCard></AppCard>
+  <AppCard>
+    <AppList v-bind="listOptions" ref="appList">
+      <template #header-buttons>
+        <el-space>
+          <el-button type="primary" :icon="Plus">新建</el-button>
+          <el-dropdown>
+            <el-button type="primary" :icon="Download">导出</el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>全部用户数据</el-dropdown-item>
+                <el-dropdown-item>已选用户数据</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          <el-dropdown>
+            <el-button type="primary" :icon="Upload">导入</el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>用户数据</el-dropdown-item>
+                <el-dropdown-item>用户事件数据</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          <el-button type="danger" plain :icon="Delete">删除</el-button>
+        </el-space>
+      </template>
+
+      <template #table-x>
+        <el-button type="primary" plain>画像</el-button>
+        <el-button type="primary" plain>查看</el-button>
+        <el-button type="primary" plain>编辑</el-button>
+        <el-button type="primary" plain>删除</el-button>
+        <el-button type="primary" plain>事件</el-button>
+      </template>
+    </AppList>
+  </AppCard>
 </template>