wangys/schoolNews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web-上传组件、富文本组件

Browse Source
This commit is contained in:
wangys
2025-10-20 11:25:34 +08:00
parent f137d7d720
commit 2f1835bdbf
12 changed files with 1608 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
schoolNewsWeb/src/apis/resource/index.ts Normal file
View File

@@ -0,0 +1,9 @@
/**
* @description 资源相关API接口导出
* @author yslg
* @since 2025-10-15
*/
export * from './resourceCategory';
export * from './resourceTag';
export * from './resource';

206
schoolNewsWeb/src/apis/resource/resource.ts Normal file
View File

@@ -0,0 +1,206 @@
/**
* @description 资源API接口
* @filename resource.ts
* @author yslg
* @copyright xyzh
* @since 2025-10-15
*/
import { api } from '@/apis';
import type { ResultDomain, Resource, ResourceSearchParams } from '@/types';
/**
* 资源API服务
*/
export const resourceApi = {
// ==================== 资源基础操作 ====================
/**
* 获取资源列表
* @param filter 筛选条件
* @returns Promise<ResultDomain<Resource>>
*/
async getResourceList(filter?: ResourceSearchParams): Promise<ResultDomain<Resource>> {
const response = await api.get<Resource>('/news/resources/list', filter);
return response.data;
},
/**
* 根据ID获取资源详情
* @param resourceID 资源ID
* @returns Promise<ResultDomain<Resource>>
*/
async getResourceById(resourceID: string): Promise<ResultDomain<Resource>> {
const response = await api.get<Resource>(`/news/resources/resource/${resourceID}`);
return response.data;
},
/**
* 创建资源
* @param resource 资源信息
* @returns Promise<ResultDomain<Resource>>
*/
async createResource(resource: Resource): Promise<ResultDomain<Resource>> {
const response = await api.post<Resource>('/news/resources/resource', resource);
return response.data;
},
/**
* 更新资源
* @param resource 资源信息
* @returns Promise<ResultDomain<Resource>>
*/
async updateResource(resource: Resource): Promise<ResultDomain<Resource>> {
const response = await api.put<Resource>('/news/resources/resource', resource);
return response.data;
},
/**
* 删除资源
* @param resourceID 资源ID
* @returns Promise<ResultDomain<boolean>>
*/
async deleteResource(resourceID: string): Promise<ResultDomain<boolean>> {
const response = await api.delete<boolean>(`/news/resources/resource/${resourceID}`);
return response.data;
},
// ==================== 资源状态操作 ====================
/**
* 更新资源状态
* @param resourceID 资源ID
* @param status 状态值（0草稿 1已发布 2下架）
* @returns Promise<ResultDomain<Resource>>
*/
async updateResourceStatus(resourceID: string, status: number): Promise<ResultDomain<Resource>> {
const response = await api.put<Resource>(`/news/resources/resource/${resourceID}/status`, null, {
params: { status }
});
return response.data;
},
/**
* 发布资源
* @param resourceID 资源ID
* @returns Promise<ResultDomain<Resource>>
*/
async publishResource(resourceID: string): Promise<ResultDomain<Resource>> {
const response = await api.post<Resource>(`/news/resources/resource/${resourceID}/publish`);
return response.data;
},
/**
* 下架资源
* @param resourceID 资源ID
* @returns Promise<ResultDomain<Resource>>
*/
async unpublishResource(resourceID: string): Promise<ResultDomain<Resource>> {
const response = await api.post<Resource>(`/news/resources/resource/${resourceID}/unpublish`);
return response.data;
},
// ==================== 资源统计操作 ====================
/**
* 增加浏览次数
* @param resourceID 资源ID
* @returns Promise<ResultDomain<Resource>>
*/
async incrementViewCount(resourceID: string): Promise<ResultDomain<Resource>> {
const response = await api.post<Resource>(`/news/resources/resource/${resourceID}/view`);
return response.data;
},
/**
* 增加点赞次数
* @param resourceID 资源ID
* @returns Promise<ResultDomain<Resource>>
*/
async incrementLikeCount(resourceID: string): Promise<ResultDomain<Resource>> {
const response = await api.post<Resource>(`/news/resources/resource/${resourceID}/like`);
return response.data;
},
/**
* 增加收藏次数
* @param resourceID 资源ID
* @returns Promise<ResultDomain<Resource>>
*/
async incrementCollectCount(resourceID: string): Promise<ResultDomain<Resource>> {
const response = await api.post<Resource>(`/news/resources/resource/${resourceID}/collect`);
return response.data;
},
// ==================== 资源推荐和轮播操作 ====================
/**
* 设置资源推荐
* @param resourceID 资源ID
* @param isRecommend 是否推荐
* @returns Promise<ResultDomain<Resource>>
*/
async setResourceRecommend(resourceID: string, isRecommend: boolean): Promise<ResultDomain<Resource>> {
const response = await api.put<Resource>(`/news/resources/resource/${resourceID}/recommend`, null, {
params: { isRecommend }
});
return response.data;
},
/**
* 设置资源轮播
* @param resourceID 资源ID
* @param isBanner 是否轮播
* @returns Promise<ResultDomain<Resource>>
*/
async setResourceBanner(resourceID: string, isBanner: boolean): Promise<ResultDomain<Resource>> {
const response = await api.put<Resource>(`/news/resources/resource/${resourceID}/banner`, null, {
params: { isBanner }
});
return response.data;
},
// ==================== 资源查询操作 ====================
/**
* 获取推荐资源列表
* @param limit 限制数量
* @returns Promise<ResultDomain<Resource>>
*/
async getRecommendResources(limit?: number): Promise<ResultDomain<Resource>> {
const response = await api.get<Resource>('/news/resources/recommend', { limit });
return response.data;
},
/**
* 获取轮播资源列表
* @param limit 限制数量
* @returns Promise<ResultDomain<Resource>>
*/
async getBannerResources(limit?: number): Promise<ResultDomain<Resource>> {
const response = await api.get<Resource>('/news/resources/banner', { limit });
return response.data;
},
/**
* 搜索资源
* @param keyword 搜索关键词
* @param categoryID 分类ID（可选）
* @param status 状态（可选）
* @returns Promise<ResultDomain<Resource>>
*/
async searchResources(
keyword: string,
categoryID?: string,
status?: number
): Promise<ResultDomain<Resource>> {
const params: any = { keyword };
if (categoryID) params.categoryID = categoryID;
if (status !== undefined) params.status = status;
const response = await api.get<Resource>('/news/resources/search', params);
return response.data;
}
};
export default resourceApi;

98
schoolNewsWeb/src/apis/resource/resourceCategory.ts Normal file
View File

@@ -0,0 +1,98 @@
/**
* @description 资源分类API接口
* @filename resourceCategory.ts
* @author yslg
* @copyright xyzh
* @since 2025-10-15
*/
import { api } from '@/apis';
import type { ResultDomain, ResourceCategory } from '@/types';
/**
* 资源分类API服务
*/
export const resourceCategoryApi = {
/**
* 获取分类列表
* @returns Promise<ResultDomain<ResourceCategory>>
*/
async getCategoryList(): Promise<ResultDomain<ResourceCategory>> {
const response = await api.get<ResourceCategory>('/news/categorys/list');
return response.data;
},
/**
* 根据ID获取分类详情
* @param categoryID 分类ID
* @returns Promise<ResultDomain<ResourceCategory>>
*/
async getCategoryById(categoryID: string): Promise<ResultDomain<ResourceCategory>> {
const response = await api.get<ResourceCategory>(`/news/categorys/category/${categoryID}`);
return response.data;
},
/**
* 创建分类
* @param category 分类信息
* @returns Promise<ResultDomain<ResourceCategory>>
*/
async createCategory(category: ResourceCategory): Promise<ResultDomain<ResourceCategory>> {
const response = await api.post<ResourceCategory>('/news/categorys/category', category);
return response.data;
},
/**
* 更新分类
* @param category 分类信息
* @returns Promise<ResultDomain<ResourceCategory>>
*/
async updateCategory(category: ResourceCategory): Promise<ResultDomain<ResourceCategory>> {
const response = await api.put<ResourceCategory>('/news/categorys/category', category);
return response.data;
},
/**
* 删除分类
* @param categoryID 分类ID
* @returns Promise<ResultDomain<boolean>>
*/
async deleteCategory(categoryID: string): Promise<ResultDomain<boolean>> {
const response = await api.delete<boolean>(`/news/categorys/category/${categoryID}`);
return response.data;
},
/**
* 更新分类状态
* @param categoryID 分类ID
* @param status 状态值
* @returns Promise<ResultDomain<ResourceCategory>>
*/
async updateCategoryStatus(categoryID: string, status: number): Promise<ResultDomain<ResourceCategory>> {
const response = await api.put<ResourceCategory>(`/news/categorys/category/${categoryID}/status`, null, {
params: { status }
});
return response.data;
},
/**
* 获取分类树
* @returns Promise<ResultDomain<ResourceCategory>>
*/
async getCategoryTree(): Promise<ResultDomain<ResourceCategory>> {
const response = await api.get<ResourceCategory>('/news/categorys/tree');
return response.data;
},
/**
* 获取子分类
* @param parentID 父分类ID
* @returns Promise<ResultDomain<ResourceCategory>>
*/
async getChildCategories(parentID: string): Promise<ResultDomain<ResourceCategory>> {
const response = await api.get<ResourceCategory>(`/news/categorys/category/${parentID}/children`);
return response.data;
}
};
export default resourceCategoryApi;

143
schoolNewsWeb/src/apis/resource/resourceTag.ts Normal file
View File

@@ -0,0 +1,143 @@
/**
* @description 标签API接口
* @filename resourceTag.ts
* @author yslg
* @copyright xyzh
* @since 2025-10-15
*/
import { api } from '@/apis';
import type { ResultDomain, Tag, ResourceTag } from '@/types';
/**
* 标签API服务
*/
export const resourceTagApi = {
// ==================== 标签基础操作 ====================
/**
* 获取标签列表
* @returns Promise<ResultDomain<Tag>>
*/
async getTagList(): Promise<ResultDomain<Tag>> {
const response = await api.get<Tag>('/news/tags/list');
return response.data;
},
/**
* 根据ID获取标签详情
* @param tagID 标签ID
* @returns Promise<ResultDomain<Tag>>
*/
async getTagById(tagID: string): Promise<ResultDomain<Tag>> {
const response = await api.get<Tag>(`/news/tags/tag/${tagID}`);
return response.data;
},
/**
* 创建标签
* @param tag 标签信息
* @returns Promise<ResultDomain<Tag>>
*/
async createTag(tag: Tag): Promise<ResultDomain<Tag>> {
const response = await api.post<Tag>('/news/tags/tag', tag);
return response.data;
},
/**
* 更新标签
* @param tag 标签信息
* @returns Promise<ResultDomain<Tag>>
*/
async updateTag(tag: Tag): Promise<ResultDomain<Tag>> {
const response = await api.put<Tag>('/news/tags/tag', tag);
return response.data;
},
/**
* 删除标签
* @param tagID 标签ID
* @returns Promise<ResultDomain<boolean>>
*/
async deleteTag(tagID: string): Promise<ResultDomain<boolean>> {
const response = await api.delete<boolean>(`/news/tags/tag/${tagID}`);
return response.data;
},
/**
* 搜索标签
* @param keyword 搜索关键词
* @returns Promise<ResultDomain<Tag>>
*/
async searchTags(keyword: string): Promise<ResultDomain<Tag>> {
const response = await api.get<Tag>('/news/tags/search', { keyword });
return response.data;
},
// ==================== 资源标签关联操作 ====================
/**
* 获取资源的标签列表
* @param resourceID 资源ID
* @returns Promise<ResultDomain<Tag>>
*/
async getResourceTags(resourceID: string): Promise<ResultDomain<Tag>> {
const response = await api.get<Tag>(`/news/tags/resource/${resourceID}`);
return response.data;
},
/**
* 为资源添加单个标签
* @param resourceID 资源ID
* @param tagID 标签ID
* @returns Promise<ResultDomain<ResourceTag>>
*/
async addResourceTag(resourceID: string, tagID: string): Promise<ResultDomain<ResourceTag>> {
const response = await api.post<ResourceTag>(`/news/tags/resource/${resourceID}/tag/${tagID}`);
return response.data;
},
/**
* 批量为资源添加标签
* @param resourceID 资源ID
* @param tagIDs 标签ID列表
* @returns Promise<ResultDomain<ResourceTag>>
*/
async batchAddResourceTags(resourceID: string, tagIDs: string): Promise<ResultDomain<ResourceTag>> {
const response = await api.post<ResourceTag>(`/news/tags/resource/${resourceID}/tags`, tagIDs);
return response.data;
},
/**
* 移除资源的标签
* @param resourceID 资源ID
* @param tagID 标签ID
* @returns Promise<ResultDomain<boolean>>
*/
async removeResourceTag(resourceID: string, tagID: string): Promise<ResultDomain<boolean>> {
const response = await api.delete<boolean>(`/news/tags/resource/${resourceID}/tag/${tagID}`);
return response.data;
},
/**
* 清空资源的所有标签
* @param resourceID 资源ID
* @returns Promise<ResultDomain<boolean>>
*/
async clearResourceTags(resourceID: string): Promise<ResultDomain<boolean>> {
const response = await api.delete<boolean>(`/news/tags/resource/${resourceID}/tags`);
return response.data;
},
/**
* 根据标签获取资源列表
* @param tagID 标签ID
* @returns Promise<ResultDomain<string>>
*/
async getResourcesByTag(tagID: string): Promise<ResultDomain<string>> {
const response = await api.get<string>(`/news/tags/tag/${tagID}/resources`);
return response.data;
}
};
export default resourceTagApi;

385
schoolNewsWeb/src/components/file/FileUpload.vue
View File

@@ -1,5 +1,91 @@
<template>
<div v-if="!asDialog" class="upload-container">
<div
class="upload-area"
:class="{ 'is-dragover': isDragover, 'is-disabled': uploading }"
@click="handleClickUpload"
@drop.prevent="handleDrop"
@dragover.prevent="handleDragOver"
@dragleave.prevent="handleDragLeave"
>
<div class="upload-icon">📁</div>
<div class="upload-text">
将文件拖到此处，或<span class="link-text">点击上传</span>
</div>
<div class="upload-tip">
{{ tip || `支持 ${accept || '所有'} 格式，单个文件不超过 ${maxSize}MB` }}
</div>
</div>
<!-- 隐藏的文件输入框 -->
<input
ref="fileInputRef"
type="file"
:accept="accept"
:multiple="multiple"
@change="handleFileSelect"
style="display: none"
/>
<!-- 文件列表 -->
<div v-if="selectedFiles.length > 0" class="file-list">
<div v-for="(file, index) in selectedFiles" :key="index" class="file-item">
<!-- 文件预览 -->
<div class="file-preview">
<img
v-if="isImageFile(file)"
:src="getFilePreviewUrl(file)"
class="preview-image"
@click="showImagePreview(file)"
/>
<div v-else class="preview-icon">
<span class="file-type-icon">{{ getFileTypeIcon(file) }}</span>
</div>
</div>
<!-- 文件信息 -->
<div class="file-info">
<span class="file-name">{{ file.name }}</span>
<span class="file-size">{{ formatFileSize(file.size) }}</span>
</div>
<!-- 操作按钮 -->
<div class="file-actions">
<el-button
type="text"
size="small"
@click="previewFile(file)"
:disabled="uploading"
>
预览
</el-button>
<el-button
type="text"
size="small"
@click="removeFile(index)"
:disabled="uploading"
>
删除
</el-button>
</div>
</div>
</div>
<!-- 上传按钮 -->
<div v-if="selectedFiles.length > 0" class="upload-actions">
<el-button
type="primary"
@click="handleUpload"
:loading="uploading"
:disabled="selectedFiles.length === 0"
>
{{ uploading ? '上传中...' : '确定上传' }}
</el-button>
</div>
</div>
<el-dialog
v-else
v-model="visible"
:title="title"
width="600px"
@@ -37,16 +123,44 @@
<!-- 文件列表 -->
<div v-if="selectedFiles.length > 0" class="file-list">
<div v-for="(file, index) in selectedFiles" :key="index" class="file-item">
<span class="file-name">{{ file.name }}</span>
<span class="file-size">{{ formatFileSize(file.size) }}</span>
<el-button
type="text"
size="small"
@click="removeFile(index)"
:disabled="uploading"
>
删除
</el-button>
<!-- 文件预览 -->
<div class="file-preview">
<img
v-if="isImageFile(file)"
:src="getFilePreviewUrl(file)"
class="preview-image"
@click="showImagePreview(file)"
/>
<div v-else class="preview-icon">
<span class="file-type-icon">{{ getFileTypeIcon(file) }}</span>
</div>
</div>
<!-- 文件信息 -->
<div class="file-info">
<span class="file-name">{{ file.name }}</span>
<span class="file-size">{{ formatFileSize(file.size) }}</span>
</div>
<!-- 操作按钮 -->
<div class="file-actions">
<el-button
type="text"
size="small"
@click="previewFile(file)"
:disabled="uploading"
>
预览
</el-button>
<el-button
type="text"
size="small"
@click="removeFile(index)"
:disabled="uploading"
>
删除
</el-button>
</div>
</div>
</div>
</div>
@@ -63,6 +177,43 @@
</el-button>
</template>
</el-dialog>
<!-- 图片预览对话框 -->
<el-dialog
v-model="imagePreviewVisible"
title="图片预览"
width="80%"
:close-on-click-modal="false"
>
<div class="image-preview-container">
<img :src="previewImageUrl" class="preview-large-image" />
</div>
</el-dialog>
<!-- 文件预览对话框 -->
<el-dialog
v-model="filePreviewVisible"
title="文件预览"
width="80%"
:close-on-click-modal="false"
>
<div class="file-preview-container">
<div v-if="previewFileType === 'image'" class="image-preview">
<img :src="previewFileUrl" class="preview-large-image" />
</div>
<div v-else-if="previewFileType === 'text'" class="text-preview">
<pre>{{ previewTextContent }}</pre>
</div>
<div v-else class="unsupported-preview">
<div class="preview-icon-large">
<span class="file-type-icon-large">{{ currentPreviewFile ? getFileTypeIcon(currentPreviewFile) : '📄' }}</span>
</div>
<p>该文件类型不支持预览</p>
<p>文件名：{{ currentPreviewFile?.name }}</p>
<p>文件大小：{{ currentPreviewFile ? formatFileSize(currentPreviewFile.size) : '' }}</p>
</div>
</div>
</el-dialog>
</template>
<script setup lang="ts">
@@ -80,6 +231,7 @@ interface Props {
module?: string;
businessId?: string;
tip?: string;
asDialog?: boolean; // 是否作为弹窗使用
}
const props = withDefaults(defineProps<Props>(), {
@@ -89,7 +241,8 @@ const props = withDefaults(defineProps<Props>(), {
maxSize: 10,
multiple: false,
module: 'common',
tip: ''
tip: '',
asDialog: true
});
const emit = defineEmits<{
@@ -104,10 +257,19 @@ const uploading = ref(false);
const isDragover = ref(false);
const visible = computed({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val)
get: () => props.asDialog ? props.modelValue : false,
set: (val) => props.asDialog ? emit('update:modelValue', val) : undefined
});
// 预览相关
const imagePreviewVisible = ref(false);
const filePreviewVisible = ref(false);
const previewImageUrl = ref('');
const previewFileUrl = ref('');
const previewFileType = ref('');
const previewTextContent = ref('');
const currentPreviewFile = ref<File | null>(null);
// 点击上传区域
function handleClickUpload() {
if (uploading.value) return;
@@ -203,6 +365,65 @@ function formatFileSize(bytes: number): string {
return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i];
}
// 判断是否为图片文件
function isImageFile(file: File): boolean {
return file.type.startsWith('image/');
}
// 获取文件预览URL
function getFilePreviewUrl(file: File): string {
return URL.createObjectURL(file);
}
// 获取文件类型图标
function getFileTypeIcon(file: File): string {
const extension = file.name.split('.').pop()?.toLowerCase();
const iconMap: Record<string, string> = {
'pdf': '📄',
'doc': '📝',
'docx': '📝',
'txt': '📄',
'zip': '📦',
'rar': '📦',
'mp4': '🎬',
'avi': '🎬',
'mp3': '🎵',
'wav': '🎵',
'xls': '📊',
'xlsx': '📊',
'ppt': '📊',
'pptx': '📊'
};
return iconMap[extension || ''] || '📄';
}
// 显示图片预览
function showImagePreview(file: File) {
previewImageUrl.value = getFilePreviewUrl(file);
imagePreviewVisible.value = true;
}
// 预览文件
async function previewFile(file: File) {
currentPreviewFile.value = file;
previewFileUrl.value = getFilePreviewUrl(file);
if (isImageFile(file)) {
previewFileType.value = 'image';
} else if (file.type.startsWith('text/')) {
previewFileType.value = 'text';
try {
previewTextContent.value = await file.text();
} catch (error) {
previewTextContent.value = '无法读取文件内容';
}
} else {
previewFileType.value = 'unsupported';
}
filePreviewVisible.value = true;
}
// 上传文件
async function handleUpload() {
if (selectedFiles.value.length === 0) {
@@ -249,7 +470,9 @@ async function handleUpload() {
// 关闭对话框
function handleClose() {
visible.value = false;
if (props.asDialog) {
visible.value = false;
}
selectedFiles.value = [];
isDragover.value = false;
uploading.value = false;
@@ -257,7 +480,9 @@ function handleClose() {
// 打开对话框
function open() {
visible.value = true;
if (props.asDialog) {
visible.value = true;
}
}
defineExpose({
@@ -355,4 +580,134 @@ defineExpose({
font-size: 12px;
margin-right: 12px;
}
.file-preview {
width: 60px;
height: 60px;
margin-right: 12px;
border-radius: 4px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #f5f7fa;
flex-shrink: 0;
.preview-image {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
&:hover {
opacity: 0.8;
}
}
.preview-icon {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.file-type-icon {
font-size: 24px;
}
}
}
.file-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
.file-name {
color: #606266;
font-size: 14px;
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-size {
color: #909399;
font-size: 12px;
}
}
.file-actions {
display: flex;
gap: 8px;
margin-left: 12px;
}
.image-preview-container {
text-align: center;
padding: 20px;
.preview-large-image {
max-width: 100%;
max-height: 70vh;
border-radius: 4px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
}
.file-preview-container {
min-height: 300px;
.image-preview {
text-align: center;
padding: 20px;
.preview-large-image {
max-width: 100%;
max-height: 70vh;
border-radius: 4px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
}
.text-preview {
pre {
background: #f5f7fa;
padding: 16px;
border-radius: 4px;
max-height: 60vh;
overflow: auto;
white-space: pre-wrap;
word-wrap: break-word;
font-family: 'Courier New', monospace;
font-size: 14px;
line-height: 1.5;
}
}
.unsupported-preview {
text-align: center;
padding: 40px;
.preview-icon-large {
margin-bottom: 16px;
.file-type-icon-large {
font-size: 64px;
}
}
p {
margin: 8px 0;
color: #606266;
font-size: 14px;
}
}
}
.upload-actions {
margin-top: 16px;
text-align: center;
}
</style>

126
schoolNewsWeb/src/components/text/RichTextComponent.vue
View File

@@ -107,7 +107,7 @@ import Quill from 'quill';
import { FileUpload } from '@/components/file';
import type { SysFile } from '@/types';
import { FILE_DOWNLOAD_URL } from '@/config';
import { ImageResize } from '@/utils/quill-resize';
import { registerImageResize } from '@/utils/quill-resize';
// Quill 样式已在 main.ts 中全局引入
interface Props {
@@ -204,7 +204,10 @@ function initQuill() {
const node = super.create() as HTMLVideoElement;
node.setAttribute('src', value);
node.setAttribute('controls', 'true');
node.setAttribute('style', 'max-width: 100%; display: block; margin: 12px auto;');
node.setAttribute('class', 'custom-video');
node.setAttribute('data-custom-video', 'true');
// 视频默认居中显示
node.setAttribute('style', 'max-width: 100%; display: block; margin: 0 auto;');
return node;
}
@@ -213,7 +216,33 @@ function initQuill() {
}
}
// 自定义图片 Blot（与文字同行显示）
const InlineEmbed: any = Quill.import('blots/embed');
class CustomImageBlot extends InlineEmbed {
static blotName = 'customImage';
static tagName = 'img';
static create(value: string) {
const node = super.create() as HTMLImageElement;
node.setAttribute('src', value);
node.setAttribute('class', 'custom-image');
node.setAttribute('data-custom-image', 'true');
// 图片与文字同行显示
node.setAttribute('style', 'max-width: 100%; display: inline-block; vertical-align: bottom;');
return node;
}
static value(node: HTMLImageElement) {
return node.getAttribute('src');
}
}
Quill.register(VideoBlot);
Quill.register(CustomImageBlot);
// 注册图片/视频拉伸模块
registerImageResize();
// 配置选项
const options = {
@@ -249,7 +278,17 @@ function initQuill() {
matchVisual: false
},
// 启用图片/视频缩放模块
imageResize: ImageResize
imageResize: {
onResizeEnd: () => {
console.log('🔄 图片/视频拉伸结束，强制更新内容');
// 强制触发内容更新
if (quillInstance) {
const html = quillInstance.root.innerHTML;
emit('update:modelValue', html);
emit('change', html);
}
}
}
},
placeholder: props.placeholder,
readOnly: props.readOnly || props.disabled
@@ -369,12 +408,12 @@ function handleUploadSuccess(files: SysFile[]) {
// 根据类型插入内容
if (uploadType.value === 'image') {
// 插入图片
quillInstance!.insertEmbed(range.index, 'image', downloadUrl);
// 插入自定义图片（与文字同行显示）
quillInstance!.insertEmbed(range.index, 'customImage', downloadUrl);
// 移动光标到图片后面
quillInstance!.setSelection(range.index + 1);
} else if (uploadType.value === 'video') {
// 插入自定义视频（使用 customVideo 而不是默认的 video）
// 插入自定义视频（单行居中显示）
quillInstance!.insertEmbed(range.index, 'customVideo', downloadUrl);
// 移动光标到视频后面
quillInstance!.setSelection(range.index + 1);
@@ -464,50 +503,93 @@ defineExpose({
}
}
// 图片样式 - 默认内联显示，底部对齐
img {
max-width: 100%;
height: auto;
display: inline-block;
vertical-align: bottom;
}
// 视频容器样式
// 视频容器样式 - 默认内联显示，底部对齐
iframe, video {
max-width: 100%;
height: auto;
display: inline-block;
vertical-align: bottom;
}
// 自定义视频默认样式 - 单行居中显示
.custom-video {
max-width: 100%;
height: auto;
display: block;
margin: 12px auto; // 默认居中
margin: 0 auto;
}
// 自定义图片默认样式 - 与文字同行显示
.custom-image {
max-width: 100%;
height: auto;
display: inline-block;
vertical-align: bottom;
}
// Quill 视频包装器
.ql-video {
display: block;
display: inline-block;
max-width: 100%;
}
// 支持对齐方式
// 支持对齐方式 - 图片和视频分别处理
.ql-align-center {
text-align: center;
text-align: center !important;
iframe, video, .ql-video {
margin-left: auto;
margin-right: auto;
// 视频始终居中显示
video, .custom-video {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
// 图片跟随文字对齐
img, .custom-image {
display: inline-block !important;
vertical-align: bottom !important;
}
}
.ql-align-right {
text-align: right;
text-align: right !important;
iframe, video, .ql-video {
margin-left: auto;
margin-right: 0;
// 视频始终居中显示
video, .custom-video {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
// 图片跟随文字对齐
img, .custom-image {
display: inline-block !important;
vertical-align: bottom !important;
}
}
.ql-align-left {
text-align: left;
text-align: left !important;
iframe, video, .ql-video {
margin-left: 0;
margin-right: auto;
// 视频始终居中显示
video, .custom-video {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
// 图片跟随文字对齐
img, .custom-image {
display: inline-block !important;
vertical-align: bottom !important;
}
}

161
schoolNewsWeb/src/components/text/RichTextExample.vue
View File

@@ -1,161 +0,0 @@
<template>
<div class="rich-text-example">
<h2>富文本编辑器示例</h2>
<div class="example-section">
<h3>基础使用</h3>
<RichTextComponent
v-model="content1"
placeholder="请输入内容..."
height="300px"
/>
<div class="preview">
<h4>预览：</h4>
<div v-html="content1" class="preview-content"></div>
</div>
</div>
<div class="example-section">
<h3>带字数统计</h3>
<RichTextComponent
v-model="content2"
placeholder="最多输入500字..."
height="200px"
:max-length="500"
show-word-count
/>
</div>
<div class="example-section">
<h3>只读模式</h3>
<RichTextComponent
v-model="content3"
height="150px"
read-only
/>
</div>
<div class="example-section">
<h3>禁用状态</h3>
<RichTextComponent
v-model="content4"
height="150px"
disabled
/>
</div>
<div class="example-section">
<h3>错误状态</h3>
<RichTextComponent
v-model="content5"
height="150px"
error
error-message="内容不能为空"
/>
</div>
<div class="example-section">
<h3>使用 ref 调用方法</h3>
<RichTextComponent
ref="editorRef"
v-model="content6"
height="200px"
/>
<div class="button-group">
<el-button @click="getText">获取纯文本</el-button>
<el-button @click="getHTML">获取HTML</el-button>
<el-button @click="clearContent">清空内容</el-button>
<el-button @click="setContent">设置内容</el-button>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ElButton, ElMessage } from 'element-plus';
import RichTextComponent from './RichTextComponent.vue';
const content1 = ref('<p>这是一段<strong>富文本</strong>内容</p>');
const content2 = ref('');
const content3 = ref('<p>这是只读内容，无法编辑</p>');
const content4 = ref('<p>这是禁用状态</p>');
const content5 = ref('');
const content6 = ref('<p>测试内容</p>');
const editorRef = ref();
function getText() {
const text = editorRef.value?.getText();
ElMessage.success(`纯文本内容：${text}`);
console.log('纯文本：', text);
}
function getHTML() {
const html = editorRef.value?.getHTML();
ElMessage.success('HTML已输出到控制台');
console.log('HTML：', html);
}
function clearContent() {
editorRef.value?.clear();
ElMessage.success('内容已清空');
}
function setContent() {
const newContent = '<h2>新标题</h2><p>这是通过方法设置的内容</p><ul><li>列表项1</li><li>列表项2</li></ul>';
editorRef.value?.setContent(newContent);
ElMessage.success('内容已设置');
}
</script>
<style lang="scss" scoped>
.rich-text-example {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
h2 {
margin-bottom: 30px;
color: #303133;
}
.example-section {
margin-bottom: 40px;
h3 {
margin-bottom: 16px;
color: #606266;
font-size: 16px;
}
}
.preview {
margin-top: 20px;
padding: 16px;
background: #f5f7fa;
border-radius: 4px;
h4 {
margin: 0 0 12px 0;
color: #606266;
font-size: 14px;
}
.preview-content {
padding: 12px;
background: white;
border-radius: 4px;
min-height: 100px;
}
}
.button-group {
margin-top: 16px;
display: flex;
gap: 12px;
}
</style>

9
schoolNewsWeb/src/types/resource/index.ts
View File

@@ -44,6 +44,13 @@ export interface Resource extends BaseDTO {
creator?: string;
/** 更新者 */
updater?: string;
/** 标签列表 */
tags?: Tag[];
/** 是否允许评论 */
allowComment?: boolean;
/** 是否置顶 */
isTop?: boolean;
}
/**
@@ -106,6 +113,8 @@ export interface ResourceTag extends BaseDTO {
* 标签实体
*/
export interface Tag extends BaseDTO {
/** 标签ID */
tagID?: string;
/** 标签名称 */
name?: string;
/** 标签描述 */

217
schoolNewsWeb/src/utils/quill-resize.ts
View File

@@ -8,14 +8,24 @@ import Quill from 'quill';
interface ResizeOptions {
modules?: string[];
onResizeEnd?: (element: HTMLElement) => void; // 拉伸结束回调
}
interface ResizeState {
startX: number;
startY: number;
startWidth: number;
startHeight: number;
aspectRatio: number;
position: string;
}
export class ImageResize {
quill: any;
options: ResizeOptions;
overlay: HTMLElement | null = null;
img: HTMLImageElement | HTMLVideoElement | null = null;
handle: HTMLElement | null = null;
element: HTMLImageElement | HTMLVideoElement | null = null;
resizeState: ResizeState | null = null;
constructor(quill: any, options: ResizeOptions = {}) {
this.quill = quill;
@@ -25,23 +35,26 @@ export class ImageResize {
// 等待编辑器完全初始化
setTimeout(() => {
// 监听编辑器点击事件
this.quill.root.addEventListener('click', this.handleClick.bind(this));
// 点击编辑器外部时隐藏 resize 控件
document.addEventListener('click', this.handleDocumentClick.bind(this));
this.initEventListeners();
console.log('✅ ImageResize 事件监听器已添加');
}, 100);
}
private initEventListeners() {
// 监听编辑器点击事件
this.quill.root.addEventListener('click', this.handleClick.bind(this));
// 点击编辑器外部时隐藏 resize 控件
document.addEventListener('click', this.handleDocumentClick.bind(this));
}
handleClick(e: MouseEvent) {
const target = e.target as HTMLElement;
console.log('🖱️ 点击事件:', target.tagName, target);
// 检查是否点击了图片或视频
if (target.tagName === 'IMG' || target.tagName === 'VIDEO') {
if (this.isResizableElement(target)) {
console.log('📷 检测到图片/视频点击，显示缩放控件');
this.showResizer(target as HTMLImageElement | HTMLVideoElement);
} else if (!this.overlay || !this.overlay.contains(target)) {
@@ -50,6 +63,10 @@ export class ImageResize {
}
}
private isResizableElement(element: HTMLElement): boolean {
return element.tagName === 'IMG' || element.tagName === 'VIDEO';
}
handleDocumentClick(e: MouseEvent) {
const target = e.target as HTMLElement;
@@ -60,7 +77,7 @@ export class ImageResize {
}
showResizer(element: HTMLImageElement | HTMLVideoElement) {
this.img = element;
this.element = element;
console.log('🎯 显示缩放控件，元素:', element);
@@ -72,6 +89,14 @@ export class ImageResize {
if (!this.overlay) return;
// 更新遮罩层位置和大小
this.updateOverlayPosition(element);
console.log('✅ 缩放控件已显示');
}
private updateOverlayPosition(element: HTMLImageElement | HTMLVideoElement) {
if (!this.overlay) return;
const rect = element.getBoundingClientRect();
const containerRect = this.quill.root.getBoundingClientRect();
@@ -87,15 +112,14 @@ export class ImageResize {
this.overlay.style.top = `${rect.top - containerRect.top + this.quill.root.scrollTop}px`;
this.overlay.style.width = `${rect.width}px`;
this.overlay.style.height = `${rect.height}px`;
console.log('✅ 缩放控件已显示');
}
hideResizer() {
if (this.overlay) {
this.overlay.style.display = 'none';
}
this.img = null;
this.element = null;
this.resizeState = null;
}
createOverlay() {
@@ -199,87 +223,124 @@ export class ImageResize {
e.preventDefault();
e.stopPropagation();
if (!this.img || !this.overlay) return;
if (!this.element || !this.overlay) return;
const startX = e.clientX;
const startY = e.clientY;
const startWidth = this.img.offsetWidth;
const startHeight = this.img.offsetHeight;
const aspectRatio = startWidth / startHeight;
// 初始化拉伸状态
this.resizeState = {
startX: e.clientX,
startY: e.clientY,
startWidth: this.element.offsetWidth,
startHeight: this.element.offsetHeight,
aspectRatio: this.element.offsetWidth / this.element.offsetHeight,
position
};
const handleMouseMove = (moveEvent: MouseEvent) => {
if (!this.img || !this.overlay) return;
if (!this.element || !this.overlay || !this.resizeState) return;
const deltaX = moveEvent.clientX - startX;
const deltaY = moveEvent.clientY - startY;
let newWidth = startWidth;
let newHeight = startHeight;
// 根据拉伸方向计算新尺寸
if (position.includes('e')) {
newWidth = startWidth + deltaX;
} else if (position.includes('w')) {
newWidth = startWidth - deltaX;
}
if (position.includes('s')) {
newHeight = startHeight + deltaY;
} else if (position.includes('n')) {
newHeight = startHeight - deltaY;
}
// 保持纵横比（对于对角拉伸）
if (position.length === 2) {
newHeight = newWidth / aspectRatio;
}
// 限制最小尺寸
if (newWidth < 50) newWidth = 50;
if (newHeight < 50) newHeight = 50;
// 应用新尺寸（同时设置 style 和属性）
this.img.style.width = `${newWidth}px`;
this.img.style.height = `${newHeight}px`;
this.img.setAttribute('width', `${newWidth}`);
this.img.setAttribute('height', `${newHeight}`);
// 更新遮罩层
this.overlay.style.width = `${newWidth}px`;
this.overlay.style.height = `${newHeight}px`;
this.updateElementSize(moveEvent);
};
const handleMouseUp = () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
// 强制触发 Quill 的 text-change 事件
// 使用 Quill 的内部方法
console.log('🔄 尝试触发 text-change 事件');
if (this.quill.emitter) {
this.quill.emitter.emit('text-change', {
oldRange: null,
range: null,
source: 'user'
});
console.log('✅ text-change 事件已触发');
} else {
console.log('❌ quill.emitter 不存在');
}
// 备用方案：直接触发 DOM 事件
console.log('🔄 尝试触发 input 事件');
const event = new Event('input', { bubbles: true });
this.quill.root.dispatchEvent(event);
console.log('✅ input 事件已触发');
// 拉伸结束，触发更新
this.onResizeEnd();
};
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
}
private updateElementSize(moveEvent: MouseEvent) {
if (!this.element || !this.overlay || !this.resizeState) return;
const deltaX = moveEvent.clientX - this.resizeState.startX;
const deltaY = moveEvent.clientY - this.resizeState.startY;
let newWidth = this.resizeState.startWidth;
let newHeight = this.resizeState.startHeight;
// 根据拉伸方向计算新尺寸
if (this.resizeState.position.includes('e')) {
newWidth = this.resizeState.startWidth + deltaX;
} else if (this.resizeState.position.includes('w')) {
newWidth = this.resizeState.startWidth - deltaX;
}
if (this.resizeState.position.includes('s')) {
newHeight = this.resizeState.startHeight + deltaY;
} else if (this.resizeState.position.includes('n')) {
newHeight = this.resizeState.startHeight - deltaY;
}
// 保持纵横比（对于对角拉伸）
if (this.resizeState.position.length === 2) {
newHeight = newWidth / this.resizeState.aspectRatio;
}
// 限制最小尺寸
if (newWidth < 50) newWidth = 50;
if (newHeight < 50) newHeight = 50;
// 应用新尺寸
this.applyElementSize(newWidth, newHeight);
// 更新遮罩层
this.overlay.style.width = `${newWidth}px`;
this.overlay.style.height = `${newHeight}px`;
}
private applyElementSize(width: number, height: number) {
if (!this.element) return;
// 同时设置 style 和属性
this.element.style.width = `${width}px`;
this.element.style.height = `${height}px`;
this.element.setAttribute('width', `${width}`);
this.element.setAttribute('height', `${height}`);
}
private onResizeEnd() {
if (!this.element) return;
console.log('🔄 拉伸结束，触发HTML更新');
// 调用自定义回调
if (this.options.onResizeEnd) {
this.options.onResizeEnd(this.element);
}
// 强制触发 Quill 的内容更新
this.triggerQuillUpdate();
}
private triggerQuillUpdate() {
// 方案1: 使用 Quill 的内部方法
if (this.quill.emitter) {
this.quill.emitter.emit('text-change', {
oldRange: null,
range: null,
source: 'user'
});
console.log('✅ Quill text-change 事件已触发');
}
// 方案2: 触发 DOM 事件
const inputEvent = new Event('input', { bubbles: true });
this.quill.root.dispatchEvent(inputEvent);
console.log('✅ DOM input 事件已触发');
// 方案3: 强制更新 Quill 内容
setTimeout(() => {
if (this.quill.update) {
this.quill.update();
console.log('✅ Quill 内容已更新');
}
}, 0);
}
destroy() {
if (this.overlay) {
this.overlay.remove();

315
schoolNewsWeb/src/views/article/ArticleAddView.vue
View File

@@ -15,43 +15,48 @@
<!-- 分类和标签 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="文章分类" prop="category">
<el-select v-model="articleForm.category" placeholder="请选择分类" style="width: 100%">
<el-option label="新闻资讯" value="news" />
<el-option label="技术文章" value="tech" />
<el-option label="学习资料" value="study" />
<el-option label="通知公告" value="notice" />
<el-form-item label="文章分类" prop="categoryID">
<el-select v-model="articleForm.categoryID" placeholder="请选择分类" style="width: 100%" :loading="categoryLoading">
<el-option
v-for="category in categoryList"
:key="category.categoryID || category.id"
:label="category.name"
:value="category.categoryID || category.id || ''"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="标签" prop="tags">
<el-select v-model="articleForm.tags" multiple placeholder="请选择标签" style="width: 100%">
<el-option label="重要" value="important" />
<el-option label="推荐" value="recommend" />
<el-option label="热门" value="hot" />
<el-option label="原创" value="original" />
<el-select v-model="articleForm.tags" multiple placeholder="请选择标签" style="width: 100%" :loading="tagLoading">
<el-option
v-for="tag in tagList"
:key="tag.id || tag.tagID"
:label="tag.name"
:value="tag.id || tag.tagID || ''"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<!-- 摘要 -->
<el-form-item label="文章摘要" prop="summary">
<el-input v-model="articleForm.summary" type="textarea" :rows="3" placeholder="请输入文章摘要（选填）"
maxlength="200" show-word-limit />
</el-form-item>
<!-- 封面图 -->
<el-form-item label="封面图片">
<el-upload class="cover-uploader" :show-file-list="false" :on-success="handleCoverSuccess"
:before-upload="beforeCoverUpload" action="#">
<img v-if="articleForm.cover" :src="articleForm.cover" class="cover" />
<el-icon v-else class="cover-uploader-icon">
<Plus />
</el-icon>
</el-upload>
<div class="upload-tip">建议尺寸：800x450px，支持jpg、png格式</div>
<!-- 上传区域 - 只在没有封面图片时显示 -->
<FileUpload
v-if="!articleForm.coverImage"
:as-dialog="false"
accept="image/*"
:max-size="2"
:multiple="false"
tip="建议尺寸：800x450px，支持jpg、png格式"
@success="handleCoverUploadSuccess"
/>
<!-- 封面预览 - 只在有封面图片时显示 -->
<div v-if="articleForm.coverImage" class="cover-preview">
<img :src="articleForm.coverImage" class="cover" />
<el-button type="danger" size="small" @click="removeCover">删除封面</el-button>
</div>
</el-form-item>
<!-- 文章内容 -->
@@ -93,28 +98,22 @@
</el-form>
</div>
<!-- 预览对话框 -->
<el-dialog v-model="previewVisible" title="文章预览" width="900px" :close-on-click-modal="false">
<div class="article-preview">
<h1 class="preview-title">{{ articleForm.title }}</h1>
<div class="preview-meta">
<span>分类：{{ getCategoryLabel(articleForm.category) }}</span>
<span v-if="articleForm.tags.length">
标签：{{ articleForm.tags.join(', ') }}
</span>
</div>
<div class="preview-summary" v-if="articleForm.summary">
{{ articleForm.summary }}
</div>
<img v-if="articleForm.cover" :src="articleForm.cover" class="preview-cover" />
<div class="preview-content ql-editor" v-html="articleForm.content"></div>
</div>
</el-dialog>
<!-- 文章预览组件 -->
<ArticleShowView
v-model="previewVisible"
:as-dialog="true"
title="文章预览"
width="900px"
:article-data="articleForm"
:category-list="categoryList"
:show-edit-button="false"
@close="previewVisible = false"
/>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import {
ElForm,
@@ -126,13 +125,14 @@ import {
ElRow,
ElCol,
ElCheckbox,
ElUpload,
ElIcon,
ElMessage,
ElDialog
ElMessage
} from 'element-plus';
import { ArrowLeft, Plus } from '@element-plus/icons-vue';
import { ArrowLeft } from '@element-plus/icons-vue';
import { RichTextComponent } from '@/components/text';
import { FileUpload } from '@/components/file';
import { ArticleShowView } from './index';
import { resourceCategoryApi, resourceTagApi, resourceApi } from '@/apis/resource';
import { Resource, ResourceCategory, Tag } from '@/types/resource';
const router = useRouter();
const route = useRoute();
@@ -146,17 +146,25 @@ const previewVisible = ref(false);
// 是否编辑模式
const isEdit = ref(false);
// 数据状态
const categoryList = ref<ResourceCategory[]>([]);
const tagList = ref<Tag[]>([]);
const categoryLoading = ref(false);
const tagLoading = ref(false);
// 表单数据
const articleForm = reactive({
const articleForm = ref<Resource>({
title: '',
category: '',
tags: [] as string[],
summary: '',
cover: '',
content: '',
categoryID: '',
author: '',
source: '',
sourceUrl: '',
viewCount: 0,
coverImage: '',
tags: [] as Tag[],
allowComment: true,
isTop: false,
isRecommend: false
});
// 表单验证规则
@@ -165,7 +173,7 @@ const rules = {
{ required: true, message: '请输入文章标题', trigger: 'blur' },
{ min: 5, max: 100, message: '标题长度在 5 到 100 个字符', trigger: 'blur' }
],
category: [
categoryID: [
{ required: true, message: '请选择文章分类', trigger: 'change' }
],
content: [
@@ -173,19 +181,43 @@ const rules = {
]
};
onMounted(() => {
// 检查是否是编辑模式
const id = route.query.id;
if (id) {
isEdit.value = true;
loadArticle(id as string);
}
});
// 加载文章数据（编辑模式）
function loadArticle(id: string) {
// TODO: 调用API加载文章数据
console.log('加载文章:', id);
// 加载分类列表
async function loadCategoryList() {
try {
categoryLoading.value = true;
const result = await resourceCategoryApi.getCategoryList();
if (result.success) {
// 数组数据从 dataList 获取
categoryList.value = result.dataList || [];
} else {
ElMessage.error(result.message || '加载分类失败');
}
} catch (error) {
console.error('加载分类失败:', error);
ElMessage.error('加载分类失败');
} finally {
categoryLoading.value = false;
}
}
// 加载标签列表
async function loadTagList() {
try {
tagLoading.value = true;
const result = await resourceTagApi.getTagList();
if (result.success) {
// 数组数据从 dataList 获取
tagList.value = result.dataList || [];
} else {
ElMessage.error(result.message || '加载标签失败');
}
} catch (error) {
console.error('加载标签失败:', error);
ElMessage.error('加载标签失败');
} finally {
tagLoading.value = false;
}
}
// 返回
@@ -235,8 +267,8 @@ async function handleSaveDraft() {
// 预览
function handlePreview() {
console.log(articleForm.content);
if (!articleForm.title) {
console.log(articleForm.value.content);
if (!articleForm.value.title) {
ElMessage.warning('请先输入文章标题');
return;
}
@@ -244,35 +276,46 @@ function handlePreview() {
}
// 封面上传成功
function handleCoverSuccess(response: any) {
// TODO: 处理上传成功的响应
articleForm.cover = response.url;
}
// 上传前验证
function beforeCoverUpload(file: File) {
const isImage = file.type.startsWith('image/');
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isImage) {
ElMessage.error('只能上传图片文件!');
function handleCoverUploadSuccess(files: any[]) {
if (files && files.length > 0) {
const file = files[0];
// 使用文件下载URL构建完整路径
import('@/config').then(config => {
articleForm.value.coverImage = config.FILE_DOWNLOAD_URL + file.id;
});
}
if (!isLt2M) {
ElMessage.error('图片大小不能超过 2MB!');
}
return isImage && isLt2M;
}
// 获取分类标签
function getCategoryLabel(value: string): string {
const map: Record<string, string> = {
news: '新闻资讯',
tech: '技术文章',
study: '学习资料',
notice: '通知公告'
};
return map[value] || value;
// 删除封面
function removeCover() {
articleForm.value.coverImage = '';
}
onMounted(async () => {
// 并行加载分类和标签数据
await Promise.all([
loadCategoryList(),
loadTagList()
]);
// 如果是编辑模式，加载文章数据
const id = route.query.id;
if (id) {
try {
isEdit.value = true;
const result = await resourceApi.getResourceById(id as string);
if (result.success && result.data) {
articleForm.value = result.data;
} else {
ElMessage.error(result.message || '加载文章失败');
}
} catch (error) {
console.error('加载文章失败:', error);
ElMessage.error('加载文章失败');
}
}
});
</script>
<style lang="scss" scoped>
@@ -341,82 +384,16 @@ function getCategoryLabel(value: string): string {
margin-top: 8px;
}
.article-preview {
padding: 20px;
:deep(.ql-code-block-container) {
margin: 12px 0; // 上下间距
}
:deep(.ql-code-block) {
background: #282c34; // 代码块背景色（类似深色主题）
color: #abb2bf; // 代码文字颜色
padding: 12px; // 内边距
border-radius: 4px; // 圆角
overflow-x: auto; // 横向滚动
font-family: 'Courier New', monospace; // 等宽字体
white-space: pre; // 保留空格和换行
}
.preview-title {
font-size: 28px;
font-weight: 600;
color: #303133;
margin: 0 0 16px 0;
}
.preview-meta {
display: flex;
gap: 24px;
color: #909399;
font-size: 14px;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid #ebeef5;
}
.preview-summary {
background: #f5f7fa;
padding: 16px;
.cover-preview {
margin-top: 16px;
position: relative;
.cover {
width: 200px;
height: auto;
border-radius: 4px;
color: #606266;
line-height: 1.6;
margin-bottom: 20px;
}
.preview-cover {
width: 100%;
max-height: 400px;
object-fit: cover;
border-radius: 4px;
margin-bottom: 20px;
}
.preview-content {
// ql-editor 类会自动应用 Quill 的默认样式
// 这里只添加必要的自定义样式覆盖
// 图片和视频样式（保留用户设置的尺寸）
:deep(img[width]),
:deep(video[width]),
:deep(img[style*="width"]),
:deep(video[style*="width"]) {
// 如果有 width 属性或 style 中包含 width，使用用户设置的尺寸
max-width: 100%;
// 不强制设置 height: auto，保留用户设置的固定尺寸
display: block;
margin: 12px auto;
}
// 没有 width 属性的图片和视频使用默认样式
:deep(img:not([width]):not([style*="width"])),
:deep(video:not([width]):not([style*="width"])),
:deep(iframe) {
max-width: 100%;
height: auto;
display: block;
margin: 12px auto;
}
display: block;
margin-bottom: 8px;
}
}
</style>

382
schoolNewsWeb/src/views/article/ArticleShowView.vue Normal file
View File

@@ -0,0 +1,382 @@
<template>
<!-- Dialog 模式 -->
<el-dialog
v-if="asDialog"
v-model="visible"
:title="title"
:width="width"
:close-on-click-modal="false"
@close="handleClose"
>
<div class="article-show-container">
<!-- 文章头部信息 -->
<div class="article-header">
<h1 class="article-title">{{ articleData.title }}</h1>
<div class="article-meta">
<span v-if="articleData.category" class="meta-item">
分类：{{ getCategoryLabel(articleData.category) }}
</span>
<span v-if="articleData.tags && articleData.tags.length" class="meta-item">
标签：{{ getTagsString(articleData.tags) }}
</span>
<span v-if="articleData.author" class="meta-item">
作者：{{ articleData.author }}
</span>
<span v-if="articleData.createTime" class="meta-item">
发布时间：{{ formatDate(articleData.createTime) }}
</span>
</div>
</div>
<!-- 封面图片 -->
<div v-if="articleData.coverImage" class="article-cover">
<img :src="articleData.coverImage" class="cover-image" />
</div>
<!-- 文章内容 -->
<div class="article-content ql-editor" v-html="articleData.content"></div>
</div>
<template #footer>
<el-button @click="handleClose">关闭</el-button>
<el-button v-if="showEditButton" type="primary" @click="handleEdit">编辑</el-button>
</template>
</el-dialog>
<!-- 非 Dialog 模式 -->
<div v-else class="article-show-container">
<!-- 文章头部信息 -->
<div class="article-header">
<h1 class="article-title">{{ articleData.title }}</h1>
<div class="article-meta">
<span v-if="articleData.category" class="meta-item">
分类：{{ getCategoryLabel(articleData.category) }}
</span>
<span v-if="articleData.tags && articleData.tags.length" class="meta-item">
标签：{{ getTagsString(articleData.tags) }}
</span>
<span v-if="articleData.author" class="meta-item">
作者：{{ articleData.author }}
</span>
<span v-if="articleData.createTime" class="meta-item">
发布时间：{{ formatDate(articleData.createTime) }}
</span>
</div>
</div>
<!-- 封面图片 -->
<div v-if="articleData.coverImage" class="article-cover">
<img :src="articleData.coverImage" class="cover-image" />
</div>
<!-- 文章内容 -->
<div class="article-content ql-editor" v-html="articleData.content"></div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { ElDialog, ElButton } from 'element-plus';
interface ArticleData {
title?: string;
content?: string;
coverImage?: string;
category?: string;
tags?: Array<{ name?: string }> | string[]; // 支持对象数组或字符串数组
author?: string;
createTime?: string | Date;
}
interface Props {
modelValue?: boolean; // Dialog 模式下的显示状态
asDialog?: boolean; // 是否作为 Dialog 使用
title?: string; // Dialog 标题
width?: string; // Dialog 宽度
articleData?: ArticleData; // 文章数据
categoryList?: Array<{ id?: string; categoryID?: string; name?: string }>; // 分类列表
showEditButton?: boolean; // 是否显示编辑按钮
}
const props = withDefaults(defineProps<Props>(), {
modelValue: false,
asDialog: true,
title: '文章预览',
width: '900px',
articleData: () => ({}),
categoryList: () => [],
showEditButton: false
});
const emit = defineEmits<{
'update:modelValue': [value: boolean];
'close': [];
'edit': [];
}>();
// Dialog 显示状态
const visible = computed({
get: () => props.asDialog ? props.modelValue : false,
set: (val) => props.asDialog ? emit('update:modelValue', val) : undefined
});
// 获取标签字符串
function getTagsString(tags: Array<{ name?: string }> | string[]): string {
if (!tags || tags.length === 0) return '';
if (typeof tags[0] === 'string') {
return (tags as string[]).join(', ');
} else {
return (tags as Array<{ name?: string }>)
.map(tag => tag.name || '')
.filter(name => name)
.join(', ');
}
}
// 获取分类标签
function getCategoryLabel(categoryId: string): string {
if (!props.categoryList || !categoryId) return '';
const category = props.categoryList.find(cat =>
cat.id === categoryId || cat.categoryID === categoryId
);
return category?.name || categoryId;
}
// 格式化日期
function formatDate(date: string | Date): string {
if (!date) return '';
const d = new Date(date);
return d.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
});
}
// 关闭处理
function handleClose() {
if (props.asDialog) {
visible.value = false;
}
emit('close');
}
// 编辑处理
function handleEdit() {
emit('edit');
}
// 暴露方法
defineExpose({
open: () => {
if (props.asDialog) {
visible.value = true;
}
},
close: handleClose
});
</script>
<style lang="scss" scoped>
.article-show-container {
max-width: 100%;
margin: 0 auto;
padding: 20px;
background: #fff;
border-radius: 8px;
}
.article-header {
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid #ebeef5;
}
.article-title {
font-size: 28px;
font-weight: bold;
color: #303133;
margin: 0 0 16px 0;
line-height: 1.4;
}
.article-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
color: #909399;
font-size: 14px;
}
.meta-item {
display: flex;
align-items: center;
&::before {
content: '';
width: 4px;
height: 4px;
background: #909399;
border-radius: 50%;
margin-right: 8px;
}
}
.article-cover {
margin-bottom: 24px;
text-align: center;
}
.cover-image {
max-width: 100%;
max-height: 400px;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.article-content {
line-height: 1.8;
color: #303133;
font-size: 16px;
// 继承富文本编辑器的样式
:deep(img) {
max-width: 100%;
height: auto;
display: inline-block;
vertical-align: bottom;
}
:deep(video),
:deep(iframe) {
max-width: 100%;
height: auto;
display: inline-block;
vertical-align: bottom;
}
// 对齐方式样式 - 图片和视频分别处理
:deep(.ql-align-center) {
text-align: center !important;
// 视频始终居中显示
video, .custom-video {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
// 图片跟随文字对齐
img, .custom-image {
display: inline-block !important;
vertical-align: bottom !important;
}
}
:deep(.ql-align-right) {
text-align: right !important;
// 视频始终居中显示
video, .custom-video {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
// 图片跟随文字对齐
img, .custom-image {
display: inline-block !important;
vertical-align: bottom !important;
}
}
:deep(.ql-align-left) {
text-align: left !important;
// 视频始终居中显示
video, .custom-video {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
// 图片跟随文字对齐
img, .custom-image {
display: inline-block !important;
vertical-align: bottom !important;
}
}
// 其他富文本样式
:deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
margin: 24px 0 16px 0;
font-weight: bold;
color: #303133;
}
:deep(p) {
margin: 16px 0;
}
:deep(blockquote) {
margin: 16px 0;
padding: 16px;
background: #f5f7fa;
border-left: 4px solid #409eff;
border-radius: 4px;
}
:deep(code) {
background: #f5f7fa;
padding: 2px 6px;
border-radius: 3px;
font-family: 'Courier New', monospace;
font-size: 14px;
}
:deep(pre) {
background: #f5f7fa;
padding: 16px;
border-radius: 4px;
overflow-x: auto;
margin: 16px 0;
code {
background: none;
padding: 0;
}
}
:deep(ul), :deep(ol) {
margin: 16px 0;
padding-left: 24px;
}
:deep(li) {
margin: 8px 0;
}
:deep(table) {
width: 100%;
border-collapse: collapse;
margin: 16px 0;
}
:deep(th), :deep(td) {
border: 1px solid #ebeef5;
padding: 8px 12px;
text-align: left;
}
:deep(th) {
background: #f5f7fa;
font-weight: bold;
}
}
</style>

2
schoolNewsWeb/src/views/article/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { default as ArticleAddView } from './ArticleAddView.vue';
export { default as ArticleShowView } from './ArticleShowView.vue';