refactor: 轮播图路由页面

src/components/general-table-layout.vue

+<script lang="ts" setup>
+const emit = defineEmits<{
+  paginationChange: [currentPage: number, pageSize: number]
+}>()
+
+const paginationConfig = defineModel<{ currentPage: number; pageSize: number; total: number }>('paginationConfig', {
+  default: {
+    currentPage: 1,
+    pageSize: 10,
+    total: 0,
+  },
+})
+
+function handlePaginationChange(currentPage: number, pageSize: number) {
+  emit('paginationChange', currentPage, pageSize)
+}
+</script>
+
+<template>
+  <div class="flex h-full flex-col overflow-hidden rounded-[4px] bg-white">
+    <div class="flex p-[20px]">
+      <slot name="header"></slot>
+    </div>
+
+    <div class="flex flex-1 flex-col px-[16px]">
+      <div class="flex-1">
+        <slot></slot>
+      </div>
+
+      <div class="flex justify-end py-[16px]">
+        <el-pagination
+          v-model:current-page="paginationConfig.currentPage"
+          v-model:page-size="paginationConfig.pageSize"
+          size="small"
+          background
+          :page-sizes="[10, 15, 20, 30]"
+          :total="paginationConfig.total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @change="handlePaginationChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>

src/router/modules/carousel-management.ts

+import { type RouteRecordRaw } from 'vue-router'
+import Layout from '@/layout/index.vue'
+
+export default [
+  {
+    path: '/carousel-management',
+    meta: {
+      rank: 1001,
+      title: '轮播图管理',
+      icon: 'icon-carousel',
+    },
+    component: Layout,
+    children: [
+      {
+        path: '',
+        name: 'CarouselManagement',
+        meta: {
+          rank: 1001,
+          title: '轮播图管理',
+          hideSideMenItem: true,
+        },
+        component: () => import('@/views/carousel-management/carousel-management.vue'),
+      },
+    ],
+  },
+] as RouteRecordRaw[]

src/router/modules/home.ts

@@ -23,17 +23,6 @@ export default [
         },
         component: Home,
       },
-
-      {
-        path: '/carousel-management',
-        name: 'CarouselManagement',
-        meta: {
-          rank: 1001,
-          title: '轮播图管理',
-          icon: 'icon-carousel',
-        },
-        component: () => import('@/views/carousel-management/carousel-management.vue'),
-      },
     ],
   },
 ] as RouteRecordRaw[]

src/views/carousel-management/carousel-edit.vue

+<script setup lang="ts"></script>
+
+<template>
+  <div class="flex h-full flex-col overflow-hidden rounded-[4px] bg-white">内容编辑</div>
+</template>

src/views/carousel-management/carousel-management.vue

-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { Search } from '@icon-park/vue-next'
+import { ref } from 'vue'
+import GeneralTableLayout from '@/components/general-table-layout.vue'
+import CarouselEditDialog from './components/carousel-edit-dialog.vue'
+
+const searchKeyword = ref('')
+
+const paginationConfig = ref({
+  currentPage: 1,
+  pageSize: 10,
+  total: 40,
+})
+
+const tableData = ref([
+  {
+    id: 1,
+    title: 'Tom',
+    status: '状态',
+    date: '2016-05-03',
+  },
+])
+</script>
 
 <template>
-  <div>轮播图管理</div>
-</template>
+  <GeneralTableLayout v-model:pagination-config="paginationConfig">
+    <template #header>
+      <div>
+        <el-input v-model="searchKeyword" style="width: 240px" placeholder="请输入想要搜索的内容">
+          <template #suffix>
+            <Search theme="outline" size="16" fill="#333" :stroke-width="3" />
+          </template>
+        </el-input>
+      </div>
+
+      <div class="ml-[20px]">
+        <el-button type="primary" plain>查询</el-button>
+        <el-button type="danger" plain>重置</el-button>
+      </div>
 
-<style lang="scss" scoped></style>
+      <div class="ml-auto">
+        <el-button type="primary">新增</el-button>
+      </div>
+    </template>
+
+    <el-table :data="tableData" row-key="id" border class="w-full">
+      <el-table-column type="index" width="50" />
+
+      <el-table-column prop="title" label="标题" width="300" />
+      <el-table-column prop="status" label="状态" width="180" />
+      <el-table-column prop="date" label="日期" width="180" />
+      <el-table-column label="操作">
+        <el-button type="success" text bg>发布</el-button>
+        <el-button type="primary" text bg>编辑</el-button>
+        <el-button text bg>预览</el-button>
+        <el-button type="danger" text bg>删除</el-button>
+      </el-table-column>
+    </el-table>
+  </GeneralTableLayout>
+
+  <CarouselEditDialog mode="add" />
+</template>

src/views/carousel-management/components/carousel-edit-dialog.vue

+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  mode: 'add' | 'edit'
+}
+
+const props = defineProps<Props>()
+
+const dialogVisible = defineModel<boolean>('dialogVisible', { default: false })
+
+const title = computed(() => {
+  switch (props.mode) {
+    case 'add':
+      return '新增轮播图'
+    case 'edit':
+      return '编辑轮播图'
+    default:
+      return ''
+  }
+})
+</script>
+
+<template>
+  <el-dialog v-model="dialogVisible" :title="title" width="800">内容</el-dialog>
+</template>