gxwebsoft/mp-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(cmsAd): 添加广告标题功能支持

Browse Source 
-为轮播、单图和视频类型广告添加独立的标题输入框
- 调整表单字段顺序，标题输入框位于链接之上
- 更新数据结构，支持每项图片/视频的标题和链接独立设置
-优化界面布局，使用条件渲染仅在有文件时显示相关表单项
- 移除有问题的 TypeScript 类型声明，保持表单验证功能
- 保持与现有数据结构的向后兼容性
- 支持多图片各自独立的标题和链接设置
- 添加初始化标题和链接为空字符串的逻辑
This commit is contained in:
赵忠林
2025-09-26 11:28:38 +08:00
parent 53932fab72
commit d3e37951c8
8 changed files with 181 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
docs/广告标题功能添加说明.md Normal file
View File

@@ -0,0 +1,107 @@
# 广告标题功能添加说明
## 功能概述
成功为CMS广告编辑组件添加了标题字段功能，用户现在可以为每个广告图片/视频单独设置标题。
## 修改内容
### 1. 界面修改 (src/views/cms/cmsAd/components/cmsAdEdit.vue)
#### 1.1 轮播类型（type == 1）
- 为每个图片添加了独立的标题输入框
- 标题输入框位于链接输入框之上
- 支持多图片各自独立的标题设置
#### 1.2 单图类型（type == 2）
- 添加了"图片标题"表单项
- 添加了"图片链接"表单项
- 只有上传图片后才显示标题和链接输入框
#### 1.3 视频类型（type == 3）
- 添加了"视频标题"表单项
- 添加了"视频链接"表单项
- 只有上传视频后才显示标题和链接输入框
#### 1.4 文本类型（type == 4）
- 保持原有功能不变
- 文本类型使用form.path作为链接字段
### 2. 数据结构修改
#### 2.1 chooseFile函数更新
```javascript
const chooseFile = (data: FileRecord) => {
images.value.push({
uid: data.id,
url: data.downloadUrl + '?x-oss-process=image/resize,m_fixed,w_2000/quality,Q_90',
status: 'done',
title: '', // 初始化标题为空
path: '' // 初始化链接为空
});
form.images = data.downloadUrl + '?x-oss-process=image/resize,m_fixed,w_2000/quality,Q_90';
};
```
#### 2.2 数据保存
- 标题和链接数据随images数组一起序列化保存
- 保持与原有数据结构的兼容性
## 用户体验优化
### 1. 界面布局
- 标题输入框在链接输入框之上，符合逻辑顺序
- 所有输入框宽度统一为500px，保持界面美观
- 使用条件渲染，只在有文件时显示相关输入框
### 2. 表单验证
- 移除了有问题的TypeScript类型声明，避免编译错误
- 保持必要的表单验证功能
### 3. 多语言友好
- 所有新增文本都使用中文
- 占位符提示清晰明确
## 功能特性
### 1. 灵活性
- **轮播广告**：每张图片都可以设置独立的标题和链接
- **单图广告**：提供单独的标题和链接设置
- **视频广告**：支持视频标题和相关链接
- **文本广告**：保持原有功能不变
### 2. 数据完整性
- 新创建的文件默认标题和链接为空字符串
- 编辑已有数据时保持原有数据结构
- 数据保存时将完整的images数组序列化
### 3. 向后兼容
- 不影响现有数据的显示和编辑
- 保持原有API接口不变
- 新增字段为可选，不影响旧数据
## 使用方法
### 1. 轮播广告
1. 选择"轮播"类型
2. 上传多张图片
3. 为每张图片分别输入标题和链接地址
### 2. 单图/视频广告
1. 选择"图片"或"视频"类型
2. 上传文件
3. 在出现的表单项中输入标题和链接地址
### 3. 文本广告
1. 选择"文本"类型
2. 输入广告内容
3. 设置跳转链接（原有功能）
## 技术实现
- 使用Vue 3 Composition API
- 响应式数据绑定
- 条件渲染优化用户体验
- TypeScript类型安全（移除了有问题的验证规则类型）
- 与现有组件SelectFile完美集成
该功能现在已完全可用，用户可以为广告内容添加更丰富的标题信息，提升内容管理的灵活性。

93
src/views/cms/cmsAd/components/cmsAdEdit.vue
View File

@@ -19,15 +19,6 @@
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
"
>
<a-form-item label="名称" name="name">
<a-input
allow-clear
:maxlength="100"
style="width: 500px"
placeholder="请输入广告名称"
v-model:value="form.name"
/>
</a-form-item>
<a-form-item label="类型" name="type">
<a-radio-group
v-model:value="form.type"
@@ -40,6 +31,24 @@
<a-radio :value="4">文本</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="名称" name="name">
<a-input
allow-clear
:maxlength="100"
style="width: 500px"
placeholder="请输入广告名称"
v-model:value="form.name"
/>
</a-form-item>
<a-form-item label="唯一标识" name="code">
<a-input
allow-clear
:maxlength="100"
style="width: 500px"
placeholder="请输入广告唯一标识"
v-model:value="form.code"
/>
</a-form-item>
<template v-if="form.type == 1">
<a-form-item label="多图" name="images">
<div :class="`item-style ${form.style}`">
@@ -51,8 +60,12 @@
@del="onDeleteItem"
/>
</div>
<a-space class="flex flex-col gap-2">
<div class="w-[500px]" v-for="(_, index) in images" :key="index">
<a-space class="flex flex-col gap-2 mt-2">
<div class="w-[500px] space-y-2" v-for="(_, index) in images" :key="index">
<a-input
v-model:value="images[index].title"
placeholder="请输入图片标题"
/>
<a-input
v-model:value="images[index].path"
placeholder="https://"
@@ -72,6 +85,20 @@
/>
</div>
</a-form-item>
<a-form-item label="图片标题" name="title" v-if="images.length > 0">
<a-input
v-model:value="images[0].title"
placeholder="请输入图片标题"
style="width: 500px"
/>
</a-form-item>
<a-form-item label="图片链接" name="path" v-if="images.length > 0">
<a-input
v-model:value="images[0].path"
placeholder="https://"
style="width: 500px"
/>
</a-form-item>
</template>
<template v-if="form.type == 3">
<a-form-item
@@ -89,6 +116,20 @@
/>
</div>
</a-form-item>
<a-form-item label="视频标题" name="title" v-if="images.length > 0">
<a-input
v-model:value="images[0].title"
placeholder="请输入视频标题"
style="width: 500px"
/>
</a-form-item>
<a-form-item label="视频链接" name="path" v-if="images.length > 0">
<a-input
v-model:value="images[0].path"
placeholder="https://"
style="width: 500px"
/>
</a-form-item>
</template>
<template v-if="form.type == 4">
<a-form-item
@@ -143,24 +184,15 @@
@change="onCategoryId"
/>
</a-form-item>
<a-form-item label="唯一标识" name="code">
<a-form-item label="style" name="style">
<a-input
allow-clear
:maxlength="100"
style="width: 500px"
placeholder="请输入广告唯一标识"
v-model:value="form.code"
/>
</a-form-item>
<a-form-item label="样式" name="style">
<a-input
allow-clear
placeholder="w-full border-solid border-gray-800 p-2 shadow-lg rounded-lg my-10"
placeholder="font-bold text-red-500"
v-model:value="form.style"
/>
<div class="pt-2 none">
<a class="text-sm text-gray-400" href="https://tailwindcss.com/docs/padding" target="_blank">Tailwind
Css使用教程</a>
tailwindcss使用说明</a>
</div>
</a-form-item>
<a-form-item label="描述" name="comments" v-if="form.type != 4">
@@ -197,7 +229,7 @@ import {addCmsAd, updateCmsAd} from '@/api/cms/cmsAd';
import {CmsAd} from '@/api/cms/cmsAd/model';
import {useThemeStore} from '@/store/modules/theme';
import {storeToRefs} from 'pinia';
import {FormInstance, type Rule} from 'ant-design-vue/es/form';
import {FormInstance} from 'ant-design-vue/es/form';
import {useI18n} from 'vue-i18n';
import {FileRecord} from '@/api/system/file/model';
import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
@@ -260,11 +292,10 @@ const updateVisible = (value: boolean) => {
};
// 表单验证规则
const rules = reactive({
const rules = {
name: [
{
required: true,
type: 'string',
message: '请输入标题',
trigger: 'blur'
}
@@ -272,7 +303,6 @@ const rules = reactive({
type: [
{
required: true,
type: 'number',
message: '请选择类型',
trigger: 'blur'
}
@@ -280,10 +310,9 @@ const rules = reactive({
images: [
{
required: true,
type: 'string',
message: '请上传图片或视频',
trigger: 'blur',
validator: (_rule: Rule, _: string) => {
validator: (_rule: any, _: string) => {
return new Promise<void>((resolve, reject) => {
if (images.value.length == 0) {
return reject('请上传图片或视频文件');
@@ -293,7 +322,7 @@ const rules = reactive({
}
}
]
});
};
const {resetFields} = useForm(form, rules);
@@ -301,7 +330,9 @@ const chooseFile = (data: FileRecord) => {
images.value.push({
uid: data.id,
url: data.downloadUrl + '?x-oss-process=image/resize,m_fixed,w_2000/quality,Q_90',
status: 'done'
status: 'done',
title: '', // 初始化标题为空
path: '' // 初始化链接为空
});
form.images = data.downloadUrl + '?x-oss-process=image/resize,m_fixed,w_2000/quality,Q_90';
};

5
src/views/cms/cmsAd/index.vue
View File

@@ -27,8 +27,9 @@
<a-tag v-if="record.type == 3" color="cyan">视频</a-tag>
<a-tag v-if="record.type == 4">文本</a-tag>
</template>
<template v-if="column.key === 'pageId'">
<span class="text-gray-400">{{ record.pageName }}</span>
<template v-if="column.key === 'name'">
<div>{{ record.name }}</div>
<div class="text-gray-400">{{ record.code }}</div>
</template>
<template v-if="column.key === 'categoryId'">
<span class="text-gray-400">{{ record.categoryName }}</span>

4
src/views/cms/cmsModel/components/cmsModelEdit.vue
View File

@@ -84,10 +84,10 @@
/>
</a-space>
</a-form-item>
<a-form-item label="CSS样式" name="style">
<a-form-item label="style" name="style">
<a-input
allow-clear
placeholder="CSS样式"
placeholder="style"
v-model:value="form.style"
/>
<div class="pt-2">

2
src/views/cms/cmsNavigation/components/design-edit.vue
View File

@@ -64,7 +64,7 @@
<a-textarea
:rows="4"
:maxlength="200"
placeholder="CSS样式"
placeholder="style"
v-model:value="form.style"
/>
<a class="text-sm text-gray-400" href="https://www.tailwindcss.cn/docs/installation" target="_blank">Tailwind Css使用教程</a>

4
src/views/cms/cmsWebsiteField/components/cmsWebsiteFieldEdit.vue
View File

@@ -62,10 +62,10 @@
v-model:value="form.comments"
/>
</a-form-item>
<a-form-item label="css样式" name="style">
<a-form-item label="style" name="style">
<a-input
allow-clear
placeholder="请输入css样式"
placeholder="style"
v-model:value="form.style"
/>
</a-form-item>

4
src/views/cms/cmsWebsiteField/components/edit.vue
View File

@@ -86,10 +86,10 @@
v-model:value="form.comments"
/>
</a-form-item>
<a-form-item label="CSS样式" name="style">
<a-form-item label="style" name="style">
<a-input
allow-clear
placeholder="CSS样式"
placeholder="style"
v-model:value="form.style"
/>
<div class="pt-2">

4
src/views/system/field/components/edit.vue
View File

@@ -41,11 +41,11 @@
v-model:value="form.value"
/>
</a-form-item>
<a-form-item label="css样式" name="style">
<a-form-item label="style" name="style">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="css样式"
placeholder="style"
v-model:value="form.style"
/>
</a-form-item>