chore(轮播图管理): 页面功能完善

src/router/guards.ts

@@ -34,7 +34,13 @@ export function createRouterGuards(router: Router) {
     if (to.meta.hiddenTitle) {
       document.title = appConfig.appTitle
     } else {
-      document.title = (to.meta.title as string) || appConfig.appTitle
+      let title = ''
+
+      to.matched.forEach((route) => {
+        title += route.meta?.title ? `${route.meta.title}_` : ''
+      })
+
+      document.title = title.slice(0, -1) || appConfig.appTitle
     }
 
     NProgress.done()

src/router/modules/carousel-management.ts

@@ -16,11 +16,21 @@ export default [
         name: 'CarouselManagement',
         meta: {
           rank: 1001,
-          title: '轮播图管理',
+          title: '列表',
           hideSideMenItem: true,
         },
         component: () => import('@/views/carousel-management/carousel-management.vue'),
       },
+      {
+        path: ':mode',
+        name: 'CarouselManagementEditor',
+        meta: {
+          rank: 1001,
+          title: '轮播图内容编辑',
+          hideSideMenItem: true,
+        },
+        component: () => import('@/views/carousel-management/carousel-edit.vue'),
+      },
     ],
   },
 ] as RouteRecordRaw[]

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

-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type {
+  FormInstance,
+  FormRules,
+  UploadRawFile,
+  UploadUserFile,
+  UploadFile,
+  UploadRequestOptions,
+  UploadInstance,
+} from 'element-plus'
+import { reactive, shallowReactive, useTemplateRef, ref } from 'vue'
+import { Plus } from '@icon-park/vue-next'
+import RichTextEditor from '@/components/rich-text-editor/rich-text-editor.vue'
+import ImageCropper from '@/components/image-cropper.vue'
+
+interface CarouselInfoRuleForm {
+  title: string
+  coverImage: string
+  docs: string
+}
+
+const carouselInfoFormRef = useTemplateRef<FormInstance>('carouselInfoFormRef')
+const imageCropperRef = useTemplateRef<InstanceType<typeof ImageCropper>>('imageCropperRef')
+const uploadRef = useTemplateRef<UploadInstance>('uploadRef')
+
+const fileList = ref<UploadUserFile[]>([
+  // {
+  //   name: 'food.jpeg',
+  //   url: 'https://gsst-poe-sit.gz.bcebos.com/data/20250120/1737361417901.png',
+  // },
+])
+
+const carouselInfoForm = reactive<CarouselInfoRuleForm>({
+  title: '',
+  coverImage: 'https://gsst-poe-sit.gz.bcebos.com/data/20250120/1737361417901.png',
+  docs: '',
+})
+
+const carouselInfoRules = shallowReactive<FormRules<CarouselInfoRuleForm>>({
+  title: [
+    {
+      required: true,
+      message: '请输入文章标题',
+      trigger: 'change',
+    },
+  ],
+  coverImage: [
+    {
+      required: true,
+      message: '请上传封面图',
+      trigger: 'change',
+    },
+  ],
+  docs: [
+    {
+      required: true,
+      message: '请输入文章详情',
+      trigger: 'change',
+    },
+  ],
+})
+
+const showPreviewImage = ref(false)
+const previewImageList = ref<string[]>([])
+
+function beforeImageUpload(_rawFile: UploadRawFile) {
+  return true
+}
+
+function handleFileUpload(_options: UploadRequestOptions) {
+  return Promise.reject()
+}
+
+function onUploadChange(uploadFile: UploadFile) {
+  if (uploadFile.status === 'ready') {
+    const url = URL.createObjectURL(uploadFile.raw!)
+
+    imageCropperRef.value
+      ?.cropImage(url)
+      .then((res) => {
+        console.log('💥💥💥💥💥💥 裁切后的图片文件 💥💥💥💥💥💥')
+        console.log(res)
+      })
+      .finally(() => {
+        URL.revokeObjectURL(url)
+      })
+
+    if (uploadRef.value) uploadRef.value.handleRemove(uploadFile)
+  }
+}
+
+function handlePictureCardPreview({ url }: UploadFile) {
+  previewImageList.value = [url!]
+  showPreviewImage.value = true
+}
+
+function handleSubmitForm() {
+  if (uploadRef.value) uploadRef.value.submit()
+}
+</script>
 
 <template>
-  <div class="flex h-full flex-col overflow-hidden rounded-[4px] bg-white">内容编辑</div>
+  <div class="flex h-full flex-col overflow-hidden rounded-[4px] bg-white p-[20px]">
+    <h2 class="text-theme-color pb-[20px] font-semibold">轮播图管理表单</h2>
+
+    <el-scrollbar always>
+      <el-form
+        ref="carouselInfoFormRef"
+        class="max-w-[900px]"
+        :model="carouselInfoForm"
+        :rules="carouselInfoRules"
+        label-width="auto"
+      >
+        <el-form-item label="文章标题" prop="title">
+          <el-input v-model="carouselInfoForm.title" placeholder="请输入文章标题" />
+        </el-form-item>
+
+        <el-form-item label="封面图" prop="coverImage">
+          <el-upload
+            ref="uploadRef"
+            v-model:file-list="fileList"
+            class="image-uploader"
+            list-type="picture-card"
+            :limit="1"
+            :auto-upload="false"
+            :before-upload="beforeImageUpload"
+            :on-preview="handlePictureCardPreview"
+            :http-request="handleFileUpload"
+            :on-change="onUploadChange"
+          >
+            <span class="flex-center inline-flex size-[178px]">
+              <Plus theme="outline" size="40" fill="#333" :stroke-width="3" />
+            </span>
+          </el-upload>
+        </el-form-item>
+
+        <el-form-item label="文章详情" prop="docs">
+          <RichTextEditor />
+        </el-form-item>
+
+        <el-form-item>
+          <div>
+            <el-button type="primary" plain @click="handleSubmitForm">提交表单</el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+    </el-scrollbar>
+  </div>
+
+  <ImageCropper ref="imageCropperRef" />
+
+  <el-image-viewer v-if="showPreviewImage" :url-list="previewImageList" @close="showPreviewImage = false" />
 </template>
+
+<style lang="css" scoped>
+:deep(.image-uploader .el-upload) {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  transition: var(--el-transition-duration-fast);
+}
+
+:deep(.image-uploader .el-upload:hover) {
+  border-color: var(--el-color-primary);
+}
+</style>

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

@@ -12,13 +12,14 @@ const paginationConfig = ref({
   total: 40,
 })
 
+const tableLoading = ref(false)
 const tableData = ref([
-  {
-    id: 1,
-    title: 'Tom',
-    status: '状态',
-    date: '2016-05-03',
-  },
+  // {
+  //   id: 1,
+  //   title: 'Tom',
+  //   status: '状态',
+  //   date: '2016-05-03',
+  // },
 ])
 </script>
 
@@ -39,22 +40,35 @@ const tableData = ref([
       </div>
 
       <div class="ml-auto">
-        <el-button type="primary">新增</el-button>
+        <el-button type="primary">新增轮播图</el-button>
       </div>
     </template>
 
-    <el-table :data="tableData" row-key="id" border class="w-full">
+    <el-table
+      v-loading="tableLoading"
+      :data="tableData"
+      element-loading-text="列表加载中..."
+      row-key="id"
+      border
+      class="w-full"
+      height="100%"
+      size="small"
+    >
       <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-button type="success" text bg size="small">发布</el-button>
+        <el-button type="primary" text bg size="small">编辑</el-button>
+        <el-button text bg size="small">预览</el-button>
+        <el-button type="danger" text bg size="small">删除</el-button>
       </el-table-column>
+
+      <template #empty>
+        <el-empty description="空数据" />
+      </template>
     </el-table>
   </GeneralTableLayout>