视图路径修改
This commit is contained in:
324
schoolNewsWeb/src/views/public/article/ArticleAddView.vue
Normal file
324
schoolNewsWeb/src/views/public/article/ArticleAddView.vue
Normal file
@@ -0,0 +1,324 @@
|
||||
<template>
|
||||
<div class="article-add-view">
|
||||
<div class="page-header">
|
||||
<el-button @click="handleBack" :icon="ArrowLeft">返回</el-button>
|
||||
<h1 class="page-title">{{ isEdit ? '编辑文章' : '创建文章' }}</h1>
|
||||
</div>
|
||||
|
||||
<div class="article-form">
|
||||
<el-form ref="formRef" :model="articleForm" :rules="rules" label-width="100px" label-position="top">
|
||||
<!-- 标题 -->
|
||||
<el-form-item label="文章标题" prop="resource.title">
|
||||
<el-input v-model="articleForm.resource.title" placeholder="请输入文章标题" maxlength="100" show-word-limit />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 分类和标签 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="文章分类" prop="resource.tagID">
|
||||
<el-select v-model="articleForm.resource.tagID" placeholder="请选择分类" style="width: 100%" :loading="categoryLoading" value-key="tagID">
|
||||
<el-option
|
||||
v-for="category in categoryList"
|
||||
:key="category.tagID || category.id"
|
||||
:label="category.name"
|
||||
:value="category.tagID||''"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 封面图 -->
|
||||
<el-form-item label="封面图片">
|
||||
<FileUpload
|
||||
:as-dialog="false"
|
||||
list-type="cover"
|
||||
v-model:cover-url="articleForm.resource.coverImage"
|
||||
accept="image/*"
|
||||
:max-size="2"
|
||||
module="article"
|
||||
tip="建议尺寸 800x450"
|
||||
@success="handleCoverUploadSuccess"
|
||||
@remove="removeCover"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 文章内容 -->
|
||||
<el-form-item label="文章内容" prop="resource.content">
|
||||
<RichTextComponent ref="editorRef" v-model="articleForm.resource.content" height="500px"
|
||||
placeholder="请输入文章内容..." />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 发布设置 -->
|
||||
<el-form-item label="发布设置">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-checkbox v-model="articleForm.resource.allowComment">允许评论</el-checkbox>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-checkbox v-model="articleForm.resource.isTop">置顶文章</el-checkbox>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-checkbox v-model="articleForm.resource.isRecommend">推荐文章</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handlePublish" :loading="publishing">
|
||||
{{ isEdit ? '保存修改' : '立即发布' }}
|
||||
</el-button>
|
||||
<el-button @click="handleSaveDraft" :loading="savingDraft">
|
||||
保存草稿
|
||||
</el-button>
|
||||
<el-button @click="handlePreview">
|
||||
预览
|
||||
</el-button>
|
||||
<el-button @click="handleBack">
|
||||
取消
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 文章预览组件 -->
|
||||
<ArticleShowView
|
||||
v-model="previewVisible"
|
||||
:as-dialog="true"
|
||||
title="文章预览"
|
||||
width="900px"
|
||||
:article-data="articleForm.resource"
|
||||
:category-list="categoryList"
|
||||
:show-edit-button="false"
|
||||
@close="previewVisible = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import {
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElSelect,
|
||||
ElOption,
|
||||
ElButton,
|
||||
ElRow,
|
||||
ElCol,
|
||||
ElCheckbox,
|
||||
ElMessage
|
||||
} from 'element-plus';
|
||||
import { ArrowLeft } from '@element-plus/icons-vue';
|
||||
import { RichTextComponent } from '@/components/text';
|
||||
import { FileUpload } from '@/components/file';
|
||||
import { ArticleShowView } from './index';
|
||||
import { resourceTagApi, resourceApi } from '@/apis/resource';
|
||||
import { ResourceVO, Tag, TagType } from '@/types/resource';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const formRef = ref();
|
||||
const editorRef = ref();
|
||||
const publishing = ref(false);
|
||||
const savingDraft = ref(false);
|
||||
const previewVisible = ref(false);
|
||||
|
||||
// 是否编辑模式
|
||||
const isEdit = ref(false);
|
||||
|
||||
// 数据状态
|
||||
const categoryList = ref<Tag[]>([]); // 改为使用Tag类型（tagType=1表示文章分类）
|
||||
const tagList = ref<Tag[]>([]);
|
||||
const categoryLoading = ref(false);
|
||||
const tagLoading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const articleForm = ref<ResourceVO>({
|
||||
resource: {
|
||||
},
|
||||
tags: [],
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = {
|
||||
'resource.title': [
|
||||
{ required: true, message: '请输入文章标题', trigger: 'blur' },
|
||||
{ min: 5, max: 100, message: '标题长度在 5 到 100 个字符', trigger: 'blur' }
|
||||
],
|
||||
'resource.tagID': [
|
||||
{ required: true, message: '请选择文章分类', trigger: 'change' }
|
||||
],
|
||||
'resource.content': [
|
||||
{ required: true, message: '请输入文章内容', trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
// 加载分类列表（使用标签API，tagType=1表示文章分类标签）
|
||||
async function loadCategoryList() {
|
||||
try {
|
||||
categoryLoading.value = true;
|
||||
// 使用新的标签API获取文章分类标签（tagType=1）
|
||||
const result = await resourceTagApi.getTagsByType(TagType.ARTICLE_CATEGORY);
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// 返回
|
||||
function handleBack() {
|
||||
router.back();
|
||||
}
|
||||
|
||||
// 发布文章
|
||||
async function handlePublish() {
|
||||
try {
|
||||
await formRef.value?.validate();
|
||||
|
||||
publishing.value = true;
|
||||
|
||||
// TODO: 调用API发布文章
|
||||
console.log('发布文章:', articleForm);
|
||||
resourceApi.createResource(articleForm.value).then(res => {
|
||||
if (res.success) {
|
||||
ElMessage.success('发布成功');
|
||||
} else {
|
||||
ElMessage.error(res.message || '发布失败');
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('发布失败:', error);
|
||||
} finally {
|
||||
publishing.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 保存草稿
|
||||
async function handleSaveDraft() {
|
||||
savingDraft.value = true;
|
||||
|
||||
try {
|
||||
// TODO: 调用API保存草稿
|
||||
console.log('保存草稿:', articleForm);
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
ElMessage.success('草稿已保存');
|
||||
} catch (error) {
|
||||
console.error('保存失败:', error);
|
||||
ElMessage.error('保存失败');
|
||||
} finally {
|
||||
savingDraft.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 预览
|
||||
function handlePreview() {
|
||||
console.log(articleForm.value.resource.content);
|
||||
if (!articleForm.value.resource.title) {
|
||||
ElMessage.warning('请先输入文章标题');
|
||||
return;
|
||||
}
|
||||
previewVisible.value = true;
|
||||
}
|
||||
|
||||
// 封面上传成功
|
||||
function handleCoverUploadSuccess(files: any[]) {
|
||||
if (files && files.length > 0) {
|
||||
// coverUrl已经通过v-model:cover-url自动更新了
|
||||
console.log('封面上传成功:', files[0]);
|
||||
}
|
||||
}
|
||||
|
||||
// 删除封面
|
||||
function removeCover() {
|
||||
articleForm.value.resource.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>
|
||||
.article-add-view {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.article-form {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
</style>
|
||||
889
schoolNewsWeb/src/views/public/article/ArticleShowView.vue
Normal file
889
schoolNewsWeb/src/views/public/article/ArticleShowView.vue
Normal file
@@ -0,0 +1,889 @@
|
||||
<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 v-if="loading" class="loading-state">
|
||||
<el-skeleton :rows="8" animated />
|
||||
</div>
|
||||
|
||||
<div v-else-if="currentArticleData">
|
||||
<!-- 文章头部信息 -->
|
||||
<div class="article-header">
|
||||
<h1 class="article-title">{{ currentArticleData.title }}</h1>
|
||||
<div class="article-meta-info">
|
||||
<div class="meta-item" v-if="currentArticleData.publishTime || currentArticleData.createTime">
|
||||
发布时间：{{ formatDateSimple(currentArticleData.publishTime || currentArticleData.createTime || '') }}
|
||||
</div>
|
||||
<div class="meta-item" v-if="currentArticleData.viewCount !== undefined">
|
||||
浏览次数：{{ currentArticleData.viewCount }}
|
||||
</div>
|
||||
<div class="meta-item" v-if="currentArticleData.source">
|
||||
来源：{{ currentArticleData.source }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="separator"></div>
|
||||
|
||||
<!-- 文章内容 -->
|
||||
<div class="article-content ql-editor" v-html="currentArticleData.content"></div>
|
||||
</div>
|
||||
|
||||
<el-empty v-else description="加载文章失败" />
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="handleClose">关闭</el-button>
|
||||
<el-button v-if="showEditButton" type="primary" @click="handleEdit">编辑</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 路由页面模式 -->
|
||||
<div v-else class="article-page-view">
|
||||
<!-- 返回按钮 -->
|
||||
<div v-if="showBackButton" class="back-header">
|
||||
<el-button @click="handleBack" :icon="ArrowLeft">{{ backButtonText }}</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 加载中 -->
|
||||
<div v-if="loading" class="loading-container">
|
||||
<el-skeleton :rows="10" animated />
|
||||
</div>
|
||||
|
||||
<!-- 文章内容 -->
|
||||
<div v-else-if="currentArticleData" class="article-wrapper">
|
||||
<div class="article-show-container">
|
||||
<!-- 文章头部信息 -->
|
||||
<div class="article-header">
|
||||
<h1 class="article-title">{{ currentArticleData.title }}</h1>
|
||||
<div class="article-meta-info">
|
||||
<div class="meta-item" v-if="currentArticleData.publishTime || currentArticleData.createTime">
|
||||
发布时间：{{ formatDateSimple(currentArticleData.publishTime || currentArticleData.createTime || '') }}
|
||||
</div>
|
||||
<div class="meta-item" v-if="currentArticleData.viewCount !== undefined">
|
||||
浏览次数：{{ currentArticleData.viewCount }}
|
||||
</div>
|
||||
<div class="meta-item" v-if="currentArticleData.source">
|
||||
来源：{{ currentArticleData.source }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="separator"></div>
|
||||
|
||||
<!-- 文章内容 -->
|
||||
<div class="article-content ql-editor" v-html="currentArticleData.content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载失败 -->
|
||||
<div v-else class="error-container">
|
||||
<el-empty description="加载文章失败" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { ArrowLeft } from '@element-plus/icons-vue';
|
||||
import { resourceApi } from '@/apis/resource';
|
||||
import { learningRecordApi, learningHistoryApi } from '@/apis/study';
|
||||
import { useStore } from 'vuex';
|
||||
import type { ResourceCategory, Resource, ResourceVO, LearningRecord, TbLearningHistory } from '@/types';
|
||||
|
||||
defineOptions({
|
||||
name: 'ArticleShowView'
|
||||
});
|
||||
|
||||
interface Props {
|
||||
modelValue?: boolean; // Dialog 模式下的显示状态
|
||||
asDialog?: boolean; // 是否作为 Dialog 使用
|
||||
title?: string; // Dialog 标题
|
||||
width?: string; // Dialog 宽度
|
||||
articleData?: Resource; // 文章数据（Dialog 模式使用）
|
||||
resourceID?: string; // 资源ID（路由模式使用）
|
||||
categoryList?: Array<ResourceCategory>; // 分类列表
|
||||
showEditButton?: boolean; // 是否显示编辑按钮
|
||||
showBackButton?: boolean; // 是否显示返回按钮（路由模式）
|
||||
backButtonText?: string; // 返回按钮文本
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
modelValue: false,
|
||||
asDialog: false, // 默认作为路由页面使用
|
||||
title: '文章预览',
|
||||
width: '900px',
|
||||
articleData: () => ({}),
|
||||
categoryList: () => [],
|
||||
showEditButton: false,
|
||||
showBackButton: true,
|
||||
backButtonText: '返回'
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean];
|
||||
'close': [];
|
||||
'edit': [];
|
||||
'back': [];
|
||||
}>();
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const store = useStore();
|
||||
|
||||
const loading = ref(false);
|
||||
const loadedArticleData = ref<Resource | null>(null);
|
||||
|
||||
// 学习记录相关
|
||||
const learningRecord = ref<LearningRecord | null>(null);
|
||||
const learningStartTime = ref(0);
|
||||
const learningTimer = ref<number | null>(null);
|
||||
const hasVideoCompleted = ref(false);
|
||||
const totalVideos = ref(0); // 视频总数
|
||||
const completedVideos = ref<Set<number>>(new Set()); // 已完成的视频索引
|
||||
const userInfo = computed(() => store.getters['auth/user']);
|
||||
|
||||
// 学习历史记录相关
|
||||
const learningHistory = ref<TbLearningHistory | null>(null);
|
||||
const historyStartTime = ref(0);
|
||||
const historyTimer = ref<number | null>(null);
|
||||
|
||||
// 当前显示的文章数据
|
||||
const currentArticleData = computed(() => {
|
||||
// Dialog 模式使用传入的 articleData
|
||||
if (props.asDialog) {
|
||||
return props.articleData;
|
||||
}
|
||||
// 路由模式：优先使用传入的 articleData，否则使用加载的数据
|
||||
if (props.articleData && Object.keys(props.articleData).length > 0) {
|
||||
return props.articleData;
|
||||
}
|
||||
return loadedArticleData.value;
|
||||
});
|
||||
|
||||
// Dialog 显示状态
|
||||
const visible = computed({
|
||||
get: () => props.asDialog ? props.modelValue : false,
|
||||
set: (val) => props.asDialog ? emit('update:modelValue', val) : undefined
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// 路由模式下，从路由参数加载文章
|
||||
if (!props.asDialog) {
|
||||
const articleId = route.query.articleId as string;
|
||||
const taskId = route.query.taskId as string;
|
||||
|
||||
// 如果传入了 articleData，则不需要从路由加载
|
||||
if (props.articleData && Object.keys(props.articleData).length > 0) {
|
||||
loadedArticleData.value = props.articleData;
|
||||
|
||||
const resourceID = props.articleData.resourceID;
|
||||
if (resourceID) {
|
||||
// 创建学习历史记录（每次进入都创建新记录）
|
||||
createHistoryRecord(resourceID);
|
||||
|
||||
// 如果有taskId，还要创建学习记录
|
||||
if (taskId || route.query.taskId) {
|
||||
loadLearningRecord(resourceID);
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化视频监听
|
||||
nextTick().then(() => {
|
||||
setTimeout(() => {
|
||||
initVideoListeners();
|
||||
}, 300);
|
||||
});
|
||||
} else if (articleId) {
|
||||
// 从路由参数加载
|
||||
loadArticle(articleId);
|
||||
// 如果有 taskId，表示是任务学习，需要创建/加载学习记录
|
||||
if (taskId) {
|
||||
loadLearningRecord(articleId);
|
||||
}
|
||||
} else {
|
||||
// 既没有传入数据，也没有路由参数，显示错误
|
||||
ElMessage.error('文章ID不存在');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// 组件销毁前保存学习进度
|
||||
if (learningRecord.value && !learningRecord.value.isComplete) {
|
||||
saveLearningProgress();
|
||||
}
|
||||
stopLearningTimer();
|
||||
|
||||
// 保存学习历史记录
|
||||
if (learningHistory.value) {
|
||||
saveHistoryRecord();
|
||||
}
|
||||
stopHistoryTimer();
|
||||
});
|
||||
|
||||
// 监听 articleData 变化（用于 ResourceArticle 切换文章）
|
||||
watch(() => props.articleData, async (newData, oldData) => {
|
||||
if (!props.asDialog) {
|
||||
// 如果从有数据变成null，或者切换到新文章，都需要保存当前历史
|
||||
if (learningHistory.value && (oldData && (!newData || oldData.resourceID !== newData.resourceID))) {
|
||||
await saveHistoryRecord();
|
||||
stopHistoryTimer();
|
||||
}
|
||||
|
||||
// 加载新文章数据
|
||||
if (newData && Object.keys(newData).length > 0) {
|
||||
loadedArticleData.value = newData;
|
||||
|
||||
// 为新文章创建学习历史记录
|
||||
const resourceID = newData.resourceID;
|
||||
if (resourceID) {
|
||||
await createHistoryRecord(resourceID);
|
||||
}
|
||||
}
|
||||
|
||||
// 重新初始化视频监听
|
||||
nextTick().then(() => {
|
||||
setTimeout(() => {
|
||||
initVideoListeners();
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
}, { deep: true });
|
||||
|
||||
// 加载文章数据
|
||||
async function loadArticle(resourceID: string) {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await resourceApi.getResourceById(resourceID);
|
||||
if (res.success && res.data) {
|
||||
// ResourceVO 包含 resource 对象
|
||||
const resourceVO = res.data as ResourceVO;
|
||||
loadedArticleData.value = resourceVO.resource || res.data as Resource;
|
||||
|
||||
// 增加浏览次数
|
||||
await resourceApi.incrementViewCount(resourceID);
|
||||
|
||||
// 创建学习历史记录（每次进入都创建新记录）
|
||||
await createHistoryRecord(resourceID);
|
||||
|
||||
// 等待 DOM 更新后监听视频（增加延迟确保 DOM 完全渲染）
|
||||
await nextTick();
|
||||
setTimeout(() => {
|
||||
initVideoListeners();
|
||||
}, 300); // 延迟 300ms 确保 DOM 完全渲染
|
||||
} else {
|
||||
ElMessage.error(res.message || '加载文章失败');
|
||||
loadedArticleData.value = null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载文章失败:', error);
|
||||
ElMessage.error('加载文章失败');
|
||||
loadedArticleData.value = null;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 加载学习记录
|
||||
async function loadLearningRecord(resourceID: string) {
|
||||
if (!userInfo.value?.id) return;
|
||||
|
||||
try {
|
||||
const res = await learningRecordApi.getRecordList({
|
||||
userID: userInfo.value.id,
|
||||
resourceType: 1, // 资源类型：文章
|
||||
resourceID: resourceID
|
||||
});
|
||||
|
||||
if (res.success && res.dataList && res.dataList.length > 0) {
|
||||
learningRecord.value = res.dataList[0];
|
||||
|
||||
// 如果已完成，不需要启动计时器
|
||||
if (learningRecord.value.isComplete) {
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
// 没有记录，创建新的
|
||||
await createLearningRecord(resourceID);
|
||||
}
|
||||
|
||||
// 开始学习计时
|
||||
startLearningTimer();
|
||||
} catch (error) {
|
||||
console.error('加载学习记录失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 创建学习记录
|
||||
async function createLearningRecord(resourceID: string) {
|
||||
if (!userInfo.value?.id) return;
|
||||
|
||||
try {
|
||||
const taskId = route.query.taskId as string;
|
||||
const res = await learningRecordApi.createRecord({
|
||||
userID: userInfo.value.id,
|
||||
resourceType: 1, // 资源类型：文章
|
||||
resourceID: resourceID,
|
||||
taskID: taskId || undefined,
|
||||
duration: 0,
|
||||
progress: 0,
|
||||
isComplete: false
|
||||
});
|
||||
|
||||
if (res.success && res.data) {
|
||||
learningRecord.value = res.data;
|
||||
ElMessage.success('开始学习');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('创建学习记录失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 开始学习计时
|
||||
function startLearningTimer() {
|
||||
learningStartTime.value = Date.now();
|
||||
|
||||
// 每10秒保存一次学习进度
|
||||
learningTimer.value = window.setInterval(() => {
|
||||
// 如果文章已完成，停止定时器
|
||||
if (learningRecord.value?.isComplete) {
|
||||
stopLearningTimer();
|
||||
return;
|
||||
}
|
||||
saveLearningProgress();
|
||||
}, 10000);
|
||||
}
|
||||
|
||||
// 停止学习计时
|
||||
function stopLearningTimer() {
|
||||
if (learningTimer.value) {
|
||||
clearInterval(learningTimer.value);
|
||||
learningTimer.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
// 保存学习进度
|
||||
async function saveLearningProgress() {
|
||||
if (!userInfo.value?.id || !learningRecord.value) return;
|
||||
|
||||
// 如果文章已完成，不再保存进度
|
||||
if (learningRecord.value.isComplete) {
|
||||
return;
|
||||
}
|
||||
|
||||
const currentTime = Date.now();
|
||||
const duration = Math.floor((currentTime - learningStartTime.value) / 1000);
|
||||
|
||||
try {
|
||||
const updatedRecord = {
|
||||
id: learningRecord.value.id,
|
||||
userID: userInfo.value.id,
|
||||
resourceType: 1,
|
||||
resourceID: route.query.articleId as string,
|
||||
duration: (learningRecord.value.duration || 0) + duration,
|
||||
progress: hasVideoCompleted.value ? 100 : 50, // 如果视频播放完成，进度100%
|
||||
isComplete: hasVideoCompleted.value
|
||||
};
|
||||
|
||||
await learningRecordApi.updateRecord(updatedRecord);
|
||||
|
||||
// 更新本地记录
|
||||
learningRecord.value.duration = updatedRecord.duration;
|
||||
learningRecord.value.progress = updatedRecord.progress;
|
||||
learningRecord.value.isComplete = updatedRecord.isComplete;
|
||||
|
||||
// 重置开始时间
|
||||
learningStartTime.value = currentTime;
|
||||
|
||||
// 如果已完成，标记完成
|
||||
if (hasVideoCompleted.value) {
|
||||
await markArticleComplete();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('保存学习进度失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 标记文章完成
|
||||
async function markArticleComplete() {
|
||||
if (!userInfo.value?.id || !learningRecord.value) return;
|
||||
|
||||
try {
|
||||
await learningRecordApi.markComplete({
|
||||
id: learningRecord.value.id,
|
||||
taskID: route.query.taskId as string,
|
||||
userID: userInfo.value.id,
|
||||
resourceType: 1,
|
||||
resourceID: route.query.articleId as string,
|
||||
isComplete: true
|
||||
});
|
||||
|
||||
ElMessage.success('文章学习完成！');
|
||||
stopLearningTimer();
|
||||
} catch (error) {
|
||||
console.error('标记完成失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化视频监听器
|
||||
function initVideoListeners() {
|
||||
|
||||
// 尝试多种选择器查找文章内容区域
|
||||
const selectors = [
|
||||
'.article-show-container .article-content.ql-editor',
|
||||
'.article-wrapper .article-content.ql-editor',
|
||||
'.article-content.ql-editor',
|
||||
'.article-show-container .article-content',
|
||||
'.article-wrapper .article-content',
|
||||
'.article-content'
|
||||
];
|
||||
|
||||
let articleContent: Element | null = null;
|
||||
|
||||
for (const selector of selectors) {
|
||||
articleContent = document.querySelector(selector);
|
||||
if (articleContent) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!articleContent) {
|
||||
return;
|
||||
}
|
||||
|
||||
const videos = articleContent.querySelectorAll('video');
|
||||
|
||||
if (videos.length === 0) {
|
||||
// 没有视频，默认阅读即完成
|
||||
hasVideoCompleted.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// 初始化视频数量和完成状态
|
||||
totalVideos.value = videos.length;
|
||||
completedVideos.value.clear();
|
||||
|
||||
// 监听所有视频的播放结束事件
|
||||
videos.forEach((video, index) => {
|
||||
const videoElement = video as HTMLVideoElement;
|
||||
|
||||
// 移除旧的监听器
|
||||
videoElement.removeEventListener('ended', () => handleVideoEnded(index));
|
||||
// 添加新的监听器，传递视频索引
|
||||
videoElement.addEventListener('ended', () => handleVideoEnded(index));
|
||||
});
|
||||
}
|
||||
|
||||
// 处理视频播放结束
|
||||
function handleVideoEnded(videoIndex: number) {
|
||||
// 标记该视频已完成
|
||||
completedVideos.value.add(videoIndex);
|
||||
|
||||
const completedCount = completedVideos.value.size;
|
||||
console.log(`✅ 视频 ${videoIndex + 1} 播放完成 (${completedCount}/${totalVideos.value})`);
|
||||
|
||||
// 检查是否所有视频都已完成
|
||||
if (completedCount >= totalVideos.value) {
|
||||
if (!hasVideoCompleted.value) {
|
||||
hasVideoCompleted.value = true;
|
||||
ElMessage.success(`所有视频播放完成 (${totalVideos.value}/${totalVideos.value})`);
|
||||
// 立即保存学习进度并标记完成
|
||||
saveLearningProgress();
|
||||
}
|
||||
} else {
|
||||
ElMessage.info(`视频 ${videoIndex + 1} 播放完成 (${completedCount}/${totalVideos.value})`);
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 学习历史记录功能 ====================
|
||||
|
||||
// 创建学习历史记录
|
||||
async function createHistoryRecord(resourceID: string) {
|
||||
if (!userInfo.value?.id) return;
|
||||
|
||||
try {
|
||||
const res = await learningHistoryApi.recordResourceView(
|
||||
userInfo.value.id,
|
||||
resourceID,
|
||||
0 // 初始时长为0
|
||||
);
|
||||
|
||||
if (res.success && res.data) {
|
||||
learningHistory.value = res.data;
|
||||
console.log('✅ 学习历史记录创建成功:', learningHistory.value);
|
||||
|
||||
// 开始计时
|
||||
startHistoryTimer();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ 创建学习历史记录失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 开始学习历史计时
|
||||
function startHistoryTimer() {
|
||||
historyStartTime.value = Date.now();
|
||||
|
||||
// 每30秒保存一次学习历史
|
||||
historyTimer.value = window.setInterval(() => {
|
||||
saveHistoryRecord();
|
||||
}, 30000); // 30秒
|
||||
}
|
||||
|
||||
// 停止学习历史计时
|
||||
function stopHistoryTimer() {
|
||||
if (historyTimer.value) {
|
||||
clearInterval(historyTimer.value);
|
||||
historyTimer.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
// 保存学习历史记录
|
||||
async function saveHistoryRecord() {
|
||||
if (!userInfo.value?.id || !learningHistory.value) return;
|
||||
|
||||
const currentTime = Date.now();
|
||||
const duration = Math.floor((currentTime - historyStartTime.value) / 1000); // 秒
|
||||
|
||||
// 如果时长太短（小于1秒），不保存
|
||||
if (duration < 1) return;
|
||||
|
||||
try {
|
||||
const updatedHistory: TbLearningHistory = {
|
||||
...learningHistory.value,
|
||||
duration: (learningHistory.value.duration || 0) + duration,
|
||||
endTime: new Date().toISOString()
|
||||
};
|
||||
|
||||
// 调用API更新学习历史
|
||||
const res = await learningHistoryApi.recordLearningHistory(updatedHistory);
|
||||
|
||||
if (res.success && res.data) {
|
||||
learningHistory.value = res.data;
|
||||
console.log(`💾 学习历史已保存 - 累计时长: ${learningHistory.value.duration}秒`);
|
||||
}
|
||||
|
||||
// 重置开始时间
|
||||
historyStartTime.value = currentTime;
|
||||
} catch (error) {
|
||||
console.error('❌ 保存学习历史失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化日期（简单格式：YYYY-MM-DD）
|
||||
function formatDateSimple(date: string | Date): string {
|
||||
if (!date) return '';
|
||||
|
||||
const d = new Date(date);
|
||||
const year = d.getFullYear();
|
||||
const month = String(d.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(d.getDate()).padStart(2, '0');
|
||||
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
// 关闭处理
|
||||
function handleClose() {
|
||||
// 非Dialog模式下关闭时保存学习历史
|
||||
if (!props.asDialog && learningHistory.value) {
|
||||
saveHistoryRecord();
|
||||
stopHistoryTimer();
|
||||
}
|
||||
|
||||
if (props.asDialog) {
|
||||
visible.value = false;
|
||||
}
|
||||
emit('close');
|
||||
}
|
||||
|
||||
// 编辑处理
|
||||
function handleEdit() {
|
||||
emit('edit');
|
||||
}
|
||||
|
||||
// 返回处理
|
||||
function handleBack() {
|
||||
// 返回前保存学习进度
|
||||
if (learningRecord.value && !learningRecord.value.isComplete) {
|
||||
saveLearningProgress();
|
||||
}
|
||||
stopLearningTimer();
|
||||
|
||||
const taskId = route.query.taskId as string;
|
||||
// 如果有 taskId，返回任务详情
|
||||
if (taskId) {
|
||||
router.push({
|
||||
path: '/study-plan/task-detail',
|
||||
query: { taskId }
|
||||
});
|
||||
} else {
|
||||
emit('back');
|
||||
}
|
||||
}
|
||||
|
||||
// 暴露方法
|
||||
defineExpose({
|
||||
open: () => {
|
||||
if (props.asDialog) {
|
||||
visible.value = true;
|
||||
}
|
||||
},
|
||||
close: handleClose
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 路由页面模式样式
|
||||
.article-page-view {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.back-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
padding: 16px 24px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 24px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.article-wrapper {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 24px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.error-container {
|
||||
padding: 80px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
// Dialog 和路由模式共用的文章内容样式
|
||||
.article-show-container {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.article-header {
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-family: 'PingFang SC';
|
||||
font-weight: 600;
|
||||
font-size: 28px;
|
||||
line-height: 28px;
|
||||
color: #141F38;
|
||||
margin: 0 0 30px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.article-meta-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 48px;
|
||||
margin-top: 30px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
font-family: 'PingFang SC';
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
color: #979797;
|
||||
}
|
||||
|
||||
.separator {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #E9E9E9;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
font-family: 'PingFang SC';
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
color: #334155;
|
||||
|
||||
// 继承富文本编辑器的样式
|
||||
: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/public/article/index.ts
Normal file
2
schoolNewsWeb/src/views/public/article/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export { default as ArticleAddView } from './ArticleAddView.vue';
|
||||
export { default as ArticleShowView } from './ArticleShowView.vue';
|
||||
757
schoolNewsWeb/src/views/public/course/components/CourseAdd.vue
Normal file
757
schoolNewsWeb/src/views/public/course/components/CourseAdd.vue
Normal file
@@ -0,0 +1,757 @@
|
||||
<template>
|
||||
<div class="course-add">
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header">
|
||||
<el-button @click="handleCancel" :icon="ArrowLeft">返回</el-button>
|
||||
<h2 class="page-title">{{ props.courseID ? '编辑课程' : '新增课程' }}</h2>
|
||||
</div>
|
||||
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="currentCourseVO"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
>
|
||||
<!-- 基本信息 -->
|
||||
<el-card class="info-card" shadow="never">
|
||||
<template #header>
|
||||
<span class="card-header">基本信息</span>
|
||||
</template>
|
||||
|
||||
<el-form-item label="课程名称" prop="course.name">
|
||||
<el-input
|
||||
id="course-name"
|
||||
v-model="currentCourseVO.course.name"
|
||||
placeholder="请输入课程名称"
|
||||
:disabled="!editMode"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 课程封面 - 移除 label 关联 -->
|
||||
<el-form-item prop="course.coverImage">
|
||||
<template #label>
|
||||
<span>课程封面</span>
|
||||
</template>
|
||||
<FileUpload
|
||||
v-if="editMode"
|
||||
:as-dialog="false"
|
||||
list-type="cover"
|
||||
v-model:cover-url="currentCourseVO.course.coverImage"
|
||||
accept="image/*"
|
||||
:max-size="2"
|
||||
module="course"
|
||||
tip="建议尺寸 800x600"
|
||||
@success="handleCoverUploadSuccess"
|
||||
@remove="handleCoverRemove"
|
||||
/>
|
||||
<div v-else class="cover-preview">
|
||||
<img v-if="currentCourseVO.course.coverImage" :src="FILE_DOWNLOAD_URL + currentCourseVO.course.coverImage" alt="课程封面" />
|
||||
<span v-else class="no-cover">暂无封面</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="授课老师" prop="course.teacher">
|
||||
<el-input
|
||||
id="course-teacher"
|
||||
v-model="currentCourseVO.course.teacher"
|
||||
placeholder="请输入授课老师"
|
||||
:disabled="!editMode"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="课程时长" prop="course.duration">
|
||||
<el-input-number
|
||||
id="course-duration"
|
||||
v-model="currentCourseVO.course.duration"
|
||||
:min="0"
|
||||
placeholder="分钟"
|
||||
:disabled="!editMode"
|
||||
/>
|
||||
<span class="ml-2">分钟</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="课程描述" prop="course.description">
|
||||
<el-input
|
||||
id="course-description"
|
||||
v-model="currentCourseVO.course.description"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入课程描述"
|
||||
:disabled="!editMode"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="排序号" prop="course.orderNum">
|
||||
<el-input-number
|
||||
id="course-orderNum"
|
||||
v-model="currentCourseVO.course.orderNum"
|
||||
:min="0"
|
||||
:disabled="!editMode"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态" prop="course.status">
|
||||
<el-radio-group
|
||||
id="course-status"
|
||||
v-model="currentCourseVO.course.status"
|
||||
disabled
|
||||
>
|
||||
<el-radio :label="0">未上线</el-radio>
|
||||
<el-radio :label="1">已上线</el-radio>
|
||||
<el-radio :label="2">已下架</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
|
||||
<!-- 章节管理 -->
|
||||
<el-card class="chapter-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header-flex">
|
||||
<span class="card-header">章节管理</span>
|
||||
<el-button v-if="editMode" type="primary" size="small" @click="addChapter">
|
||||
<el-icon><Plus /></el-icon>
|
||||
添加章节
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="currentCourseVO.courseChapters.length === 0" class="empty-tip">
|
||||
暂无章节，请点击"添加章节"按钮添加
|
||||
</div>
|
||||
|
||||
<el-collapse v-model="activeChapters">
|
||||
<el-collapse-item
|
||||
v-for="(chapterVO, chapterIndex) in currentCourseVO.courseChapters"
|
||||
:key="chapterIndex"
|
||||
:name="chapterIndex"
|
||||
>
|
||||
<template #title>
|
||||
<div class="chapter-title">
|
||||
<span>章节 {{ chapterIndex + 1 }}: {{ chapterVO.chapter.name || '未命名章节' }}</span>
|
||||
<div v-if="editMode" class="chapter-actions" @click.stop>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
link
|
||||
@click="removeChapter(chapterIndex)"
|
||||
>
|
||||
删除章节
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 章节信息 -->
|
||||
<el-form-item
|
||||
:label="`章节${chapterIndex + 1}名称`"
|
||||
:prop="`courseChapters.${chapterIndex}.chapter.name`"
|
||||
:rules="[{ required: true, message: '请输入章节名称', trigger: 'blur' }]"
|
||||
>
|
||||
<el-input
|
||||
:id="`chapter-${chapterIndex}-name`"
|
||||
v-model="chapterVO.chapter.name"
|
||||
placeholder="请输入章节名称"
|
||||
:disabled="!editMode"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
:label="`章节${chapterIndex + 1}排序`"
|
||||
:prop="`courseChapters.${chapterIndex}.chapter.orderNum`"
|
||||
>
|
||||
<el-input-number
|
||||
:id="`chapter-${chapterIndex}-orderNum`"
|
||||
v-model="chapterVO.chapter.orderNum"
|
||||
:min="0"
|
||||
:disabled="!editMode"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 学习节点 -->
|
||||
<div class="nodes-section">
|
||||
<div class="nodes-header">
|
||||
<span class="nodes-title">学习节点</span>
|
||||
<el-button v-if="editMode" type="primary" size="small" @click="addNode(chapterIndex)">
|
||||
<el-icon><Plus /></el-icon>
|
||||
添加节点
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div v-if="chapterVO.nodes.length === 0" class="empty-tip">
|
||||
暂无学习节点
|
||||
</div>
|
||||
|
||||
<div v-else class="nodes-list">
|
||||
<el-card
|
||||
v-for="(node, nodeIndex) in chapterVO.nodes"
|
||||
:key="nodeIndex"
|
||||
class="node-card"
|
||||
shadow="hover"
|
||||
>
|
||||
<template #header>
|
||||
<div class="node-header">
|
||||
<span>节点 {{ nodeIndex + 1 }}: {{ node.name || '未命名节点' }}</span>
|
||||
<el-button
|
||||
v-if="editMode"
|
||||
type="danger"
|
||||
size="small"
|
||||
link
|
||||
@click="removeNode(chapterIndex, nodeIndex)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-form-item
|
||||
label="节点名称"
|
||||
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.name`"
|
||||
>
|
||||
<el-input
|
||||
:id="`node-${chapterIndex}-${nodeIndex}-name`"
|
||||
v-model="node.name"
|
||||
placeholder="请输入节点名称"
|
||||
:disabled="!editMode"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="节点类型"
|
||||
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.nodeType`"
|
||||
>
|
||||
<el-radio-group
|
||||
:id="`node-${chapterIndex}-${nodeIndex}-nodeType`"
|
||||
v-model="node.nodeType"
|
||||
:disabled="!editMode"
|
||||
>
|
||||
<el-radio :label="0">文章资源</el-radio>
|
||||
<el-radio :label="1">富文本</el-radio>
|
||||
<el-radio :label="2">上传文件</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 文章资源选择 -->
|
||||
<el-form-item
|
||||
v-if="node.nodeType === 0"
|
||||
label="选择文章"
|
||||
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.resourceID`"
|
||||
>
|
||||
<el-select
|
||||
:id="`node-${chapterIndex}-${nodeIndex}-resourceID`"
|
||||
v-model="node.resourceID"
|
||||
filterable
|
||||
remote
|
||||
placeholder="搜索并选择文章"
|
||||
:remote-method="getNodeSearchMethod(chapterIndex, nodeIndex)"
|
||||
:loading="getNodeLoading(chapterIndex, nodeIndex)"
|
||||
:disabled="!editMode"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="article in getNodeArticleOptions(chapterIndex, nodeIndex)"
|
||||
:key="article.resourceID"
|
||||
:label="article.title"
|
||||
:value="article.resourceID"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 富文本编辑 - 移除 label 关联 -->
|
||||
<el-form-item
|
||||
v-if="node.nodeType === 1"
|
||||
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.content`"
|
||||
>
|
||||
<template #label>
|
||||
<span>内容编辑</span>
|
||||
</template>
|
||||
<RichTextComponent v-model="node.content" :disabled="!editMode" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 文件上传 - 移除 label 关联 -->
|
||||
<el-form-item
|
||||
v-if="node.nodeType === 2"
|
||||
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.videoUrl`"
|
||||
>
|
||||
<template #label>
|
||||
<span>上传文件</span>
|
||||
</template>
|
||||
<FileUpload
|
||||
v-if="editMode"
|
||||
:as-dialog="false"
|
||||
:multiple="false"
|
||||
module="course-node"
|
||||
:max-size="100"
|
||||
tip="支持上传视频、音频、文档等文件，单个文件不超过100MB"
|
||||
@success="(files) => handleNodeFileUploadSuccess(files, chapterIndex, nodeIndex)"
|
||||
/>
|
||||
<div v-if="node.videoUrl" class="file-info-display">
|
||||
<span>已上传文件: {{ node.videoUrl }}</span>
|
||||
<el-button v-if="editMode" type="text" @click="node.videoUrl = ''">删除</el-button>
|
||||
</div>
|
||||
<div v-else-if="!editMode" class="file-info-display">
|
||||
<span class="no-file">暂无文件</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="节点时长"
|
||||
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.duration`"
|
||||
>
|
||||
<el-input-number
|
||||
:id="`node-${chapterIndex}-${nodeIndex}-duration`"
|
||||
v-model="node.duration"
|
||||
:min="0"
|
||||
:disabled="!editMode"
|
||||
/>
|
||||
<span class="ml-2">分钟</span>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 是否必修 - 使用 template #label -->
|
||||
<el-form-item
|
||||
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.isRequired`"
|
||||
>
|
||||
<template #label>
|
||||
<span>是否必修</span>
|
||||
</template>
|
||||
<el-switch
|
||||
:id="`node-${chapterIndex}-${nodeIndex}-isRequired`"
|
||||
v-model="node.isRequired"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
:disabled="!editMode"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="排序号"
|
||||
:prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.orderNum`"
|
||||
>
|
||||
<el-input-number
|
||||
:id="`node-${chapterIndex}-${nodeIndex}-orderNum`"
|
||||
v-model="node.orderNum"
|
||||
:min="0"
|
||||
:disabled="!editMode"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-form-item class="action-buttons">
|
||||
<el-button v-if="editMode" type="primary" @click="handleSubmit" :loading="submitting">
|
||||
{{ courseID ? '更新课程' : '创建课程' }}
|
||||
</el-button>
|
||||
<el-button v-if="editMode" @click="handleCancel">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { Plus, ArrowLeft } from '@element-plus/icons-vue';
|
||||
import { FileUpload } from '@/components/file';
|
||||
import { RichTextComponent } from '@/components/text';
|
||||
import { courseApi } from '@/apis/study';
|
||||
import { resourceApi } from '@/apis/resource';
|
||||
import type { CourseNode, CourseVO, ChapterVO } from '@/types/study';
|
||||
import type { Resource } from '@/types/resource';
|
||||
import type { SysFile } from '@/types';
|
||||
import { FILE_DOWNLOAD_URL } from '@/config';
|
||||
defineOptions({
|
||||
name: 'CourseAdd'
|
||||
});
|
||||
|
||||
// 节点扩展类型（用于前端交互）
|
||||
interface NodeWithExtras extends CourseNode {
|
||||
loading?: boolean;
|
||||
articleOptions?: Resource[];
|
||||
searchMethod?: (query: string) => void;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
courseID?: string;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<{
|
||||
success: [];
|
||||
cancel: [];
|
||||
}>();
|
||||
|
||||
const formRef = ref();
|
||||
const submitting = ref(false);
|
||||
const activeChapters = ref<number[]>([]);
|
||||
const editMode = ref(true);
|
||||
|
||||
// 原始数据（用于比对）
|
||||
const originalCourseVO = ref<CourseVO>();
|
||||
// 当前编辑的数据
|
||||
const currentCourseVO = ref<CourseVO>({
|
||||
course: {
|
||||
name: '',
|
||||
coverImage: '',
|
||||
description: '',
|
||||
teacher: '',
|
||||
duration: 0,
|
||||
status: 0,
|
||||
orderNum: 0
|
||||
},
|
||||
courseChapters: [],
|
||||
courseTags: []
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = {
|
||||
'course.name': [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
|
||||
'course.teacher': [{ required: true, message: '请输入授课老师', trigger: 'blur' }]
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (props.courseID) {
|
||||
loadCourse();
|
||||
}
|
||||
});
|
||||
|
||||
// 加载课程数据
|
||||
async function loadCourse() {
|
||||
try {
|
||||
const res = await courseApi.getCourseById(props.courseID!);
|
||||
if (res.success && res.data) {
|
||||
// 确保数据结构完整，处理 null 值
|
||||
const courseData = res.data;
|
||||
|
||||
// 确保 courseChapters 是数组
|
||||
if (!courseData.courseChapters) {
|
||||
courseData.courseChapters = [];
|
||||
}
|
||||
|
||||
// 确保 courseTags 是数组
|
||||
if (!courseData.courseTags) {
|
||||
courseData.courseTags = [];
|
||||
}
|
||||
|
||||
// 确保每个章节的 nodes 是数组
|
||||
courseData.courseChapters.forEach((chapterVO: ChapterVO) => {
|
||||
if (!chapterVO.nodes) {
|
||||
chapterVO.nodes = [];
|
||||
}
|
||||
});
|
||||
if (courseData.course.status === 1) {
|
||||
editMode.value = false;
|
||||
}
|
||||
// 保存原始数据
|
||||
originalCourseVO.value = JSON.parse(JSON.stringify(courseData));
|
||||
// 设置当前编辑数据
|
||||
currentCourseVO.value = JSON.parse(JSON.stringify(courseData));
|
||||
console.log(currentCourseVO.value);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载课程失败:', error);
|
||||
ElMessage.error('加载课程失败');
|
||||
}
|
||||
}
|
||||
|
||||
// 添加章节
|
||||
function addChapter() {
|
||||
const newChapterVO: ChapterVO = {
|
||||
chapter: {
|
||||
chapterID: currentCourseVO.value.course.courseID,
|
||||
name: '',
|
||||
orderNum: currentCourseVO.value.courseChapters.length
|
||||
},
|
||||
nodes: []
|
||||
};
|
||||
currentCourseVO.value.courseChapters.push(newChapterVO);
|
||||
activeChapters.value.push(currentCourseVO.value.courseChapters.length - 1);
|
||||
}
|
||||
|
||||
// 删除章节
|
||||
function removeChapter(index: number) {
|
||||
currentCourseVO.value.courseChapters.splice(index, 1);
|
||||
// 更新激活的章节索引
|
||||
activeChapters.value = activeChapters.value
|
||||
.filter(i => i !== index)
|
||||
.map(i => i > index ? i - 1 : i);
|
||||
}
|
||||
|
||||
// 添加节点
|
||||
function addNode(chapterIndex: number) {
|
||||
const nodeIndex = currentCourseVO.value.courseChapters[chapterIndex].nodes.length;
|
||||
const newNode: NodeWithExtras = {
|
||||
nodeID: '',
|
||||
chapterID: currentCourseVO.value.courseChapters[chapterIndex].chapter.chapterID,
|
||||
name: '',
|
||||
nodeType: 0,
|
||||
content: '',
|
||||
duration: 0,
|
||||
isRequired: 1,
|
||||
orderNum: nodeIndex,
|
||||
loading: false,
|
||||
articleOptions: [],
|
||||
searchMethod: (query: string) => searchArticles(query, chapterIndex, nodeIndex)
|
||||
};
|
||||
currentCourseVO.value.courseChapters[chapterIndex].nodes.push(newNode);
|
||||
}
|
||||
|
||||
// 删除节点
|
||||
function removeNode(chapterIndex: number, nodeIndex: number) {
|
||||
currentCourseVO.value.courseChapters[chapterIndex].nodes.splice(nodeIndex, 1);
|
||||
}
|
||||
|
||||
// 辅助函数：获取节点的 searchMethod
|
||||
function getNodeSearchMethod(chapterIndex: number, nodeIndex: number) {
|
||||
const node = currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex] as NodeWithExtras;
|
||||
return node.searchMethod;
|
||||
}
|
||||
|
||||
// 辅助函数：获取节点的 loading 状态
|
||||
function getNodeLoading(chapterIndex: number, nodeIndex: number) {
|
||||
const node = currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex] as NodeWithExtras;
|
||||
return node.loading || false;
|
||||
}
|
||||
|
||||
// 辅助函数：获取节点的 articleOptions
|
||||
function getNodeArticleOptions(chapterIndex: number, nodeIndex: number) {
|
||||
const node = currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex] as NodeWithExtras;
|
||||
return node.articleOptions || [];
|
||||
}
|
||||
|
||||
// 搜索文章
|
||||
async function searchArticles(query: string, chapterIndex: number, nodeIndex: number) {
|
||||
const node = currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex] as NodeWithExtras;
|
||||
if (!query) {
|
||||
node.articleOptions = [];
|
||||
return;
|
||||
}
|
||||
|
||||
node.loading = true;
|
||||
try {
|
||||
const res = await resourceApi.getResourceList({
|
||||
keyword: query
|
||||
});
|
||||
if (res.success && res.dataList) {
|
||||
node.articleOptions = res.dataList;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('搜索文章失败:', error);
|
||||
} finally {
|
||||
node.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 处理封面上传成功
|
||||
function handleCoverUploadSuccess(files: SysFile[]) {
|
||||
if (files && files.length > 0) {
|
||||
// coverUrl已经通过v-model:cover-url自动更新了
|
||||
// 这里可以做一些额外的处理，比如记录fileID
|
||||
console.log('封面上传成功:', files[0]);
|
||||
}
|
||||
}
|
||||
|
||||
// 处理封面删除
|
||||
function handleCoverRemove() {
|
||||
currentCourseVO.value.course.coverImage = '';
|
||||
}
|
||||
|
||||
// 处理节点文件上传成功
|
||||
function handleNodeFileUploadSuccess(files: SysFile[], chapterIndex: number, nodeIndex: number) {
|
||||
if (files && files.length > 0) {
|
||||
currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex].videoUrl = files[0].filePath || '';
|
||||
}
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
await formRef.value.validate();
|
||||
|
||||
submitting.value = true;
|
||||
|
||||
// 先创建/更新课程
|
||||
let courseID = props.courseID;
|
||||
if (courseID) {
|
||||
const res = await courseApi.updateCourse(currentCourseVO.value);
|
||||
if (!res.success) {
|
||||
throw new Error('更新课程失败');
|
||||
}
|
||||
} else {
|
||||
const res = await courseApi.createCourse(currentCourseVO.value);
|
||||
if (!res.success || !res.data?.course.courseID) {
|
||||
throw new Error('创建课程失败');
|
||||
}
|
||||
courseID = res.data.course.courseID;
|
||||
}
|
||||
ElMessage.success(props.courseID ? '课程更新成功' : '课程创建成功');
|
||||
emit('success');
|
||||
} catch (error) {
|
||||
console.error('保存失败:', error);
|
||||
ElMessage.error('保存失败');
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 取消
|
||||
function handleCancel() {
|
||||
emit('cancel');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.course-add {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.info-card,
|
||||
.chapter-card {
|
||||
margin-bottom: 20px;
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.card-header-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ml-2 {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.chapter-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.chapter-actions {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.nodes-section {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.nodes-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.nodes-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.nodes-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.node-card {
|
||||
:deep(.el-card__header) {
|
||||
padding: 12px 15px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.node-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.file-info-display {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.no-file {
|
||||
color: #909399;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.cover-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.no-cover {
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,688 @@
|
||||
<template>
|
||||
<div class="course-detail">
|
||||
<!-- 返回按钮（可选） -->
|
||||
<div v-if="showBackButton" class="back-header">
|
||||
<el-button @click="handleBack" :icon="ArrowLeft">{{ backButtonText }}</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 加载中 -->
|
||||
<div v-if="loading" class="loading">
|
||||
<el-skeleton :rows="10" animated />
|
||||
</div>
|
||||
|
||||
<!-- 课程详情 -->
|
||||
<div v-else-if="courseVO" class="course-content">
|
||||
<!-- 课程封面和基本信息 -->
|
||||
<div class="course-header">
|
||||
<div class="cover-section">
|
||||
<img
|
||||
:src="courseVO.course.coverImage? FILE_DOWNLOAD_URL + courseVO.course.coverImage : defaultCover"
|
||||
:alt="courseVO.course.name"
|
||||
class="cover-image"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="info-section">
|
||||
<h1 class="course-title">{{ courseVO.course.name }}</h1>
|
||||
|
||||
<div class="course-meta">
|
||||
<div class="meta-item">
|
||||
<el-icon><User /></el-icon>
|
||||
<span>授课老师：{{ courseVO.course.teacher }}</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<el-icon><Clock /></el-icon>
|
||||
<span>课程时长：{{ formatDuration(courseVO.course.duration) }}</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<el-icon><View /></el-icon>
|
||||
<span>{{ courseVO.course.viewCount || 0 }} 人浏览</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<el-icon><Reading /></el-icon>
|
||||
<span>{{ courseVO.course.learnCount || 0 }} 人学习</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="course-description">
|
||||
<p>{{ courseVO.course.description }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-buttons">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
@click="handleStartLearning"
|
||||
:loading="enrolling"
|
||||
>
|
||||
<el-icon><VideoPlay /></el-icon>
|
||||
{{ isEnrolled ? '继续学习' : '开始学习' }}
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
size="large"
|
||||
:icon="isCollected ? StarFilled : Star"
|
||||
@click="handleCollect"
|
||||
:type="isCollected ? 'success' : 'default'"
|
||||
>
|
||||
{{ isCollected ? '已收藏' : '收藏课程' }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 学习进度 -->
|
||||
<div v-if="learningProgress" class="learning-progress">
|
||||
<div class="progress-header">
|
||||
<span>学习进度</span>
|
||||
<span class="progress-text">{{ learningProgress.progress }}%</span>
|
||||
</div>
|
||||
<el-progress
|
||||
:percentage="learningProgress.progress"
|
||||
:stroke-width="10"
|
||||
:color="progressColor"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 课程章节 -->
|
||||
<el-card class="chapter-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>课程章节</span>
|
||||
<span class="chapter-count">共 {{ courseVO.courseChapters.length }} 章</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="courseVO.courseChapters.length === 0" class="empty-tip">
|
||||
暂无章节内容
|
||||
</div>
|
||||
|
||||
<el-collapse v-else v-model="activeChapters">
|
||||
<el-collapse-item
|
||||
v-for="(chapterVO, chapterIndex) in courseVO.courseChapters"
|
||||
:key="chapterIndex"
|
||||
:name="chapterIndex"
|
||||
>
|
||||
<template #title>
|
||||
<div class="chapter-title-bar">
|
||||
<span class="chapter-name">
|
||||
<el-icon><DocumentCopy /></el-icon>
|
||||
章节 {{ chapterIndex + 1 }}: {{ chapterVO.chapter.name }}
|
||||
</span>
|
||||
<span class="chapter-meta">
|
||||
{{ chapterVO.nodes.length }} 个节点
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 节点列表 -->
|
||||
<div v-if="chapterVO.nodes.length === 0" class="empty-tip">
|
||||
暂无学习节点
|
||||
</div>
|
||||
|
||||
<div v-else class="node-list">
|
||||
<div
|
||||
v-for="(node, nodeIndex) in chapterVO.nodes"
|
||||
:key="nodeIndex"
|
||||
class="node-item"
|
||||
@click="handleNodeClick(chapterIndex, nodeIndex)"
|
||||
>
|
||||
<div class="node-info">
|
||||
<el-icon class="node-icon">
|
||||
<Document v-if="node.nodeType === 0" />
|
||||
<Edit v-else-if="node.nodeType === 1" />
|
||||
<Upload v-else />
|
||||
</el-icon>
|
||||
<span class="node-name">{{ node.name }}</span>
|
||||
<el-tag
|
||||
v-if="node.isRequired === 1"
|
||||
type="danger"
|
||||
size="small"
|
||||
effect="plain"
|
||||
>
|
||||
必修
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="node-meta">
|
||||
<span v-if="node.duration" class="node-duration">
|
||||
<el-icon><Clock /></el-icon>
|
||||
{{ node.duration }} 分钟
|
||||
</span>
|
||||
<el-icon class="arrow-icon"><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-card>
|
||||
|
||||
<!-- 收藏按钮（底部浮动） -->
|
||||
<div class="floating-collect">
|
||||
<el-button
|
||||
circle
|
||||
size="large"
|
||||
:icon="isCollected ? StarFilled : Star"
|
||||
@click="handleCollect"
|
||||
:type="isCollected ? 'warning' : 'default'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载失败 -->
|
||||
<div v-else class="error-tip">
|
||||
<el-empty description="加载课程失败" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import {
|
||||
ArrowLeft,
|
||||
User,
|
||||
Clock,
|
||||
View,
|
||||
Reading,
|
||||
VideoPlay,
|
||||
Star,
|
||||
StarFilled,
|
||||
DocumentCopy,
|
||||
Document,
|
||||
Edit,
|
||||
Upload,
|
||||
ArrowRight
|
||||
} from '@element-plus/icons-vue';
|
||||
import { courseApi } from '@/apis/study';
|
||||
import { learningRecordApi } from '@/apis/study';
|
||||
import { userCollectionApi } from '@/apis/usercenter';
|
||||
import { useStore } from 'vuex';
|
||||
import type { CourseVO, LearningRecord } from '@/types';
|
||||
import { CollectionType } from '@/types';
|
||||
import { FILE_DOWNLOAD_URL } from '@/config';
|
||||
|
||||
defineOptions({
|
||||
name: 'CourseDetail'
|
||||
});
|
||||
|
||||
interface Props {
|
||||
courseId: string;
|
||||
showBackButton?: boolean;
|
||||
backButtonText?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
showBackButton: false,
|
||||
backButtonText: '返回'
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
'back': [];
|
||||
'start-learning': [courseId: string, chapterIndex: number, nodeIndex: number];
|
||||
}>();
|
||||
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
|
||||
// 从 store 获取用户信息
|
||||
const userInfo = computed(() => store.getters['auth/user']);
|
||||
|
||||
const loading = ref(false);
|
||||
const enrolling = ref(false);
|
||||
const courseVO = ref<CourseVO | null>(null);
|
||||
const isCollected = ref(false);
|
||||
const isEnrolled = ref(false);
|
||||
const learningProgress = ref<LearningRecord | null>(null);
|
||||
const activeChapters = ref<number[]>([0]); // 默认展开第一章
|
||||
const defaultCover = new URL('@/assets/imgs/article-default.png', import.meta.url).href;
|
||||
|
||||
// 进度条颜色
|
||||
const progressColor = computed(() => {
|
||||
const progress = learningProgress.value?.progress || 0;
|
||||
if (progress >= 80) return '#67c23a';
|
||||
if (progress >= 50) return '#409eff';
|
||||
return '#e6a23c';
|
||||
});
|
||||
|
||||
watch(() => props.courseId, (newId) => {
|
||||
if (newId) {
|
||||
loadCourseDetail();
|
||||
checkCollectionStatus();
|
||||
loadLearningProgress();
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
// 加载课程详情
|
||||
async function loadCourseDetail() {
|
||||
loading.value = true;
|
||||
try {
|
||||
// 增加浏览次数
|
||||
courseApi.incrementViewCount(props.courseId);
|
||||
|
||||
const res = await courseApi.getCourseById(props.courseId);
|
||||
if (res.success && res.data) {
|
||||
courseVO.value = res.data;
|
||||
|
||||
// 确保数据结构完整
|
||||
if (!courseVO.value.courseChapters) {
|
||||
courseVO.value.courseChapters = [];
|
||||
}
|
||||
if (!courseVO.value.courseTags) {
|
||||
courseVO.value.courseTags = [];
|
||||
}
|
||||
courseVO.value.courseChapters.forEach((chapter) => {
|
||||
if (!chapter.nodes) {
|
||||
chapter.nodes = [];
|
||||
}
|
||||
});
|
||||
} else {
|
||||
ElMessage.error('加载课程失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载课程失败:', error);
|
||||
ElMessage.error('加载课程失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 检查收藏状态
|
||||
async function checkCollectionStatus() {
|
||||
if (!userInfo.value?.id) return;
|
||||
|
||||
try {
|
||||
const res = await userCollectionApi.isCollected(
|
||||
CollectionType.COURSE,
|
||||
props.courseId
|
||||
);
|
||||
if (res.success) {
|
||||
isCollected.value = res.data || false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('检查收藏状态失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 加载学习进度
|
||||
async function loadLearningProgress() {
|
||||
if (!userInfo.value?.id) return;
|
||||
|
||||
try {
|
||||
const res = await learningRecordApi.getCourseLearningRecord({
|
||||
userID: userInfo.value.id,
|
||||
resourceType: 2, // 课程
|
||||
courseID: props.courseId
|
||||
});
|
||||
|
||||
if (res.success && res.dataList && res.dataList.length > 0) {
|
||||
learningProgress.value = res.dataList[0];
|
||||
isEnrolled.value = true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载学习进度失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 处理收藏
|
||||
async function handleCollect() {
|
||||
if (!userInfo.value?.id) {
|
||||
ElMessage.warning('请先登录');
|
||||
router.push('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (isCollected.value) {
|
||||
// 取消收藏
|
||||
const res = await userCollectionApi.removeCollection(
|
||||
userInfo.value.id,
|
||||
CollectionType.COURSE,
|
||||
props.courseId
|
||||
);
|
||||
if (res.success) {
|
||||
isCollected.value = false;
|
||||
ElMessage.success('已取消收藏');
|
||||
}
|
||||
} else {
|
||||
// 添加收藏
|
||||
const res = await userCollectionApi.addCollection({
|
||||
userID: userInfo.value.id,
|
||||
collectionType: CollectionType.COURSE,
|
||||
collectionID: props.courseId
|
||||
});
|
||||
if (res.success) {
|
||||
isCollected.value = true;
|
||||
ElMessage.success('收藏成功');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('收藏操作失败:', error);
|
||||
ElMessage.error('操作失败');
|
||||
}
|
||||
}
|
||||
|
||||
// 开始学习
|
||||
async function handleStartLearning() {
|
||||
if (!userInfo.value?.id) {
|
||||
ElMessage.warning('请先登录');
|
||||
router.push('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!courseVO.value || courseVO.value.courseChapters.length === 0) {
|
||||
ElMessage.warning('课程暂无内容');
|
||||
return;
|
||||
}
|
||||
|
||||
enrolling.value = true;
|
||||
try {
|
||||
// 如果未报名，创建学习记录
|
||||
if (!isEnrolled.value) {
|
||||
await courseApi.incrementLearnCount(props.courseId);
|
||||
await learningRecordApi.createRecord({
|
||||
userID: userInfo.value.id,
|
||||
resourceType: 2, // 课程
|
||||
resourceID: props.courseId,
|
||||
progress: 0,
|
||||
duration: 0,
|
||||
isComplete: false
|
||||
});
|
||||
isEnrolled.value = true;
|
||||
}
|
||||
|
||||
// 跳转到学习页面，默认从第一章第一节开始
|
||||
emit('start-learning', props.courseId, 0, 0);
|
||||
} catch (error) {
|
||||
console.error('开始学习失败:', error);
|
||||
ElMessage.error('开始学习失败');
|
||||
} finally {
|
||||
enrolling.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 点击节点
|
||||
function handleNodeClick(chapterIndex: number, nodeIndex: number) {
|
||||
if (!userInfo.value?.id) {
|
||||
ElMessage.warning('请先登录');
|
||||
router.push('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
emit('start-learning', props.courseId, chapterIndex, nodeIndex);
|
||||
}
|
||||
|
||||
// 返回
|
||||
function handleBack() {
|
||||
emit('back');
|
||||
}
|
||||
|
||||
// 格式化时长
|
||||
function formatDuration(minutes?: number): string {
|
||||
if (!minutes) return '0分钟';
|
||||
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const mins = minutes % 60;
|
||||
|
||||
if (hours > 0) {
|
||||
return `${hours}小时${mins}分钟`;
|
||||
}
|
||||
return `${mins}分钟`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.course-detail {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.back-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
padding: 16px 24px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
margin-bottom: 0;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.loading {
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
margin: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.course-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.course-header {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.cover-section {
|
||||
flex-shrink: 0;
|
||||
|
||||
.cover-image {
|
||||
width: 320px;
|
||||
height: 240px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.course-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.course-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
|
||||
.el-icon {
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.course-description {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.learning-progress {
|
||||
padding: 16px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 8px;
|
||||
|
||||
.progress-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
|
||||
.progress-text {
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chapter-card {
|
||||
:deep(.el-card__header) {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
|
||||
.chapter-count {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chapter-title-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
|
||||
.chapter-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.chapter-meta {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.node-list {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.node-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
margin: 8px 0;
|
||||
background: #fafafa;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #f0f2f5;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.node-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
|
||||
.node-icon {
|
||||
color: #409eff;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.node-name {
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.node-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.node-duration {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
color: #c0c4cc;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .arrow-icon {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.error-tip {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.floating-collect {
|
||||
position: fixed;
|
||||
bottom: 80px;
|
||||
right: 40px;
|
||||
z-index: 100;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
bottom: 60px;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
1224
schoolNewsWeb/src/views/public/course/components/CourseLearning.vue
Normal file
1224
schoolNewsWeb/src/views/public/course/components/CourseLearning.vue
Normal file
File diff suppressed because it is too large
Load Diff
325
schoolNewsWeb/src/views/public/course/components/CourseList.vue
Normal file
325
schoolNewsWeb/src/views/public/course/components/CourseList.vue
Normal file
@@ -0,0 +1,325 @@
|
||||
<template>
|
||||
<div class="course-list">
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-form">
|
||||
<div class="form-item">
|
||||
<label class="form-label">课程名称</label>
|
||||
<input
|
||||
v-model="searchForm.name"
|
||||
type="text"
|
||||
placeholder="请输入课程名称"
|
||||
class="form-input"
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label class="form-label">状态</label>
|
||||
<select v-model="searchForm.status" class="form-select">
|
||||
<option :value="undefined">请选择状态</option>
|
||||
<option :value="0">未上线</option>
|
||||
<option :value="1">已上线</option>
|
||||
<option :value="2">已下架</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<el-button type="primary" @click="handleSearch">
|
||||
<el-icon><Search /></el-icon>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="toolbar">
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新增课程
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 课程表格 -->
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="courseList"
|
||||
border
|
||||
stripe
|
||||
>
|
||||
<el-table-column prop="name" label="课程名称" min-width="200" />
|
||||
<el-table-column label="封面" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-image
|
||||
v-if="row.coverImage"
|
||||
:src="FILE_DOWNLOAD_URL + row.coverImage"
|
||||
style="width: 60px; height: 60px"
|
||||
fit="cover"
|
||||
/>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="teacher" label="授课老师" width="120" />
|
||||
<el-table-column prop="duration" label="时长(分钟)" width="120" />
|
||||
<el-table-column prop="learnCount" label="学习人数" width="100" />
|
||||
<el-table-column prop="viewCount" label="浏览次数" width="100" />
|
||||
<el-table-column label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.status === 0" type="info">未上线</el-tag>
|
||||
<el-tag v-else-if="row.status === 1" type="success">已上线</el-tag>
|
||||
<el-tag v-else-if="row.status === 2" type="danger">已下架</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="orderNum" label="排序" width="80" />
|
||||
<el-table-column label="操作" width="250" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" size="small" link @click="handleEdit(row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="row.status === 0 || row.status === 2"
|
||||
type="success"
|
||||
size="small"
|
||||
link
|
||||
@click="handleUpdateStatus(row, 1)"
|
||||
>
|
||||
上线
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="row.status === 1"
|
||||
type="warning"
|
||||
size="small"
|
||||
link
|
||||
@click="handleUpdateStatus(row, 2)"
|
||||
>
|
||||
下架
|
||||
</el-button>
|
||||
<el-button type="danger" size="small" link @click="handleDelete(row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
v-if="total > 0"
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:total="total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
class="pagination"
|
||||
@size-change="handlePageChange"
|
||||
@current-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { Search, Plus } from '@element-plus/icons-vue';
|
||||
import { courseApi } from '@/apis/study';
|
||||
import { FILE_DOWNLOAD_URL } from '@/config';
|
||||
import type { Course } from '@/types';
|
||||
|
||||
defineOptions({
|
||||
name: 'CourseList'
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
add: [];
|
||||
edit: [course: Course];
|
||||
}>();
|
||||
|
||||
const loading = ref(false);
|
||||
const courseList = ref<Course[]>([]);
|
||||
const total = ref(0);
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
|
||||
const searchForm = reactive({
|
||||
name: '',
|
||||
status: undefined as number | undefined
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
loadCourses();
|
||||
});
|
||||
|
||||
// 加载课程列表
|
||||
async function loadCourses() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await courseApi.getCoursePage({page: currentPage.value, size: pageSize.value}, searchForm);
|
||||
if (res.success && res.pageDomain) {
|
||||
courseList.value = res.pageDomain.dataList || [];
|
||||
total.value = res.pageDomain.pageParam.totalElements || 0;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载课程列表失败:', error);
|
||||
ElMessage.error('加载课程列表失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索
|
||||
function handleSearch() {
|
||||
currentPage.value = 1;
|
||||
loadCourses();
|
||||
}
|
||||
|
||||
// 重置
|
||||
function handleReset() {
|
||||
searchForm.name = '';
|
||||
searchForm.status = undefined;
|
||||
currentPage.value = 1;
|
||||
loadCourses();
|
||||
}
|
||||
|
||||
// 新增
|
||||
function handleAdd() {
|
||||
emit('add');
|
||||
}
|
||||
|
||||
// 编辑
|
||||
function handleEdit(course: Course) {
|
||||
emit('edit', course);
|
||||
}
|
||||
|
||||
// 更新状态
|
||||
async function handleUpdateStatus(course: Course, status: number) {
|
||||
const statusText = status === 1 ? '上线' : '下架';
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要${statusText}该课程吗？`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
});
|
||||
const params: Course = {
|
||||
courseID: course.courseID!,
|
||||
status: status
|
||||
};
|
||||
const res = await courseApi.updateCourseStatus(params);
|
||||
if (res.success) {
|
||||
ElMessage.success(`${statusText}成功`);
|
||||
loadCourses();
|
||||
} else {
|
||||
ElMessage.error(`${statusText}失败`);
|
||||
}
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('更新状态失败:', error);
|
||||
ElMessage.error(`${statusText}失败`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 删除
|
||||
async function handleDelete(course: Course) {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要删除该课程吗？此操作不可恢复！', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
});
|
||||
|
||||
const res = await courseApi.deleteCourse(course.courseID!);
|
||||
if (res.success) {
|
||||
ElMessage.success('删除成功');
|
||||
loadCourses();
|
||||
} else {
|
||||
ElMessage.error('删除失败');
|
||||
}
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('删除失败:', error);
|
||||
ElMessage.error('删除失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 分页变化
|
||||
function handlePageChange() {
|
||||
loadCourses();
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
loadCourses
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.course-list {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
background-color: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.form-label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select {
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
transition: border-color 0.2s;
|
||||
outline: none;
|
||||
min-width: 200px;
|
||||
|
||||
&:hover {
|
||||
border-color: #c0c4cc;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
}
|
||||
|
||||
.form-select {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23606266' d='M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
background-size: 14px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,4 @@
|
||||
export { default as CourseDetail } from './CourseDetail.vue';
|
||||
export { default as CourseLearning } from './CourseLearning.vue';
|
||||
export { default as CourseAdd } from './CourseAdd.vue';
|
||||
export { default as CourseList } from './CourseList.vue';
|
||||
1
schoolNewsWeb/src/views/public/course/index.ts
Normal file
1
schoolNewsWeb/src/views/public/course/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './components';
|
||||
189
schoolNewsWeb/src/views/public/editor/README.md
Normal file
189
schoolNewsWeb/src/views/public/editor/README.md
Normal file
@@ -0,0 +1,189 @@
|
||||
# 富文本编辑器页面
|
||||
|
||||
完整的富文本编辑器功能页面，包含编辑、预览、导出等功能。
|
||||
|
||||
## 路由配置
|
||||
|
||||
在路由文件中添加以下配置：
|
||||
|
||||
```typescript
|
||||
{
|
||||
path: '/editor',
|
||||
name: 'RichTextEditor',
|
||||
component: () => import('@/views/public/editor/RichTextEditorView.vue'),
|
||||
meta: {
|
||||
title: '富文本编辑器',
|
||||
requiresAuth: true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 功能特性
|
||||
|
||||
### 📝 编辑功能
|
||||
- ✅ 完整的富文本编辑器
|
||||
- ✅ 实时字数统计
|
||||
- ✅ 字数限制设置
|
||||
- ✅ 自动保存（每30秒）
|
||||
- ✅ 手动保存到本地存储
|
||||
|
||||
### 👁️ 预览功能
|
||||
- ✅ 实时预览编辑内容
|
||||
- ✅ 复制HTML代码
|
||||
- ✅ 弹窗预览模式
|
||||
|
||||
### 💾 导出功能
|
||||
- ✅ 导出为HTML
|
||||
- ✅ 导出为纯文本
|
||||
- ✅ 导出为Markdown
|
||||
- ✅ 自定义文件名
|
||||
|
||||
### 🎨 界面特性
|
||||
- ✅ 响应式设计
|
||||
- ✅ 美观的卡片布局
|
||||
- ✅ 功能介绍卡片
|
||||
- ✅ 移动端适配
|
||||
|
||||
## 使用示例
|
||||
|
||||
### 1. 基础编辑
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<RichTextEditorView />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import RichTextEditorView from '@/views/public/editor/RichTextEditorView.vue';
|
||||
</script>
|
||||
```
|
||||
|
||||
### 2. 集成到系统菜单
|
||||
|
||||
在菜单配置中添加：
|
||||
|
||||
```json
|
||||
{
|
||||
"menuID": "editor",
|
||||
"name": "富文本编辑器",
|
||||
"url": "/editor",
|
||||
"icon": "Edit",
|
||||
"type": 1,
|
||||
"orderNum": 10
|
||||
}
|
||||
```
|
||||
|
||||
## 快捷键
|
||||
|
||||
| 快捷键 | 功能 |
|
||||
|--------|------|
|
||||
| Ctrl/Cmd + S | 保存 |
|
||||
| Ctrl/Cmd + B | 加粗 |
|
||||
| Ctrl/Cmd + I | 斜体 |
|
||||
| Ctrl/Cmd + U | 下划线 |
|
||||
| Ctrl/Cmd + Z | 撤销 |
|
||||
| Ctrl/Cmd + Y | 重做 |
|
||||
|
||||
## 本地存储
|
||||
|
||||
页面使用localStorage保存内容：
|
||||
|
||||
- `rich_text_content`: 手动保存的内容
|
||||
- `rich_text_content_auto`: 自动保存的内容
|
||||
- `rich_text_saved_at`: 保存时间戳
|
||||
|
||||
## 自定义配置
|
||||
|
||||
### 修改编辑器高度
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const editorHeight = ref('600px'); // 默认500px
|
||||
</script>
|
||||
```
|
||||
|
||||
### 修改自动保存间隔
|
||||
|
||||
```typescript
|
||||
// 默认30秒
|
||||
autoSaveTimer = window.setInterval(() => {
|
||||
// ...
|
||||
}, 60000); // 改为60秒
|
||||
```
|
||||
|
||||
### 修改字数限制
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const maxLength = ref(10000); // 默认5000
|
||||
</script>
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **依赖安装**：确保已安装 `quill` 依赖
|
||||
2. **图片上传**：默认使用base64，大图片可能影响性能
|
||||
3. **浏览器兼容**：现代浏览器支持，IE需要polyfill
|
||||
4. **数据持久化**：localStorage有存储限制（通常5-10MB）
|
||||
|
||||
## 扩展功能建议
|
||||
|
||||
### 1. 图片上传到服务器
|
||||
|
||||
```typescript
|
||||
// 配置Quill图片上传处理器
|
||||
const quill = new Quill(editor, {
|
||||
modules: {
|
||||
toolbar: {
|
||||
handlers: {
|
||||
image: imageHandler
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function imageHandler() {
|
||||
const input = document.createElement('input');
|
||||
input.setAttribute('type', 'file');
|
||||
input.setAttribute('accept', 'image/*');
|
||||
input.click();
|
||||
|
||||
input.onchange = async () => {
|
||||
const file = input.files[0];
|
||||
// 上传到服务器
|
||||
const url = await uploadImage(file);
|
||||
const range = quill.getSelection();
|
||||
quill.insertEmbed(range.index, 'image', url);
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 协同编辑
|
||||
|
||||
可以集成WebSocket实现多人协同编辑功能。
|
||||
|
||||
### 3. 版本历史
|
||||
|
||||
保存多个版本的内容，支持版本回退。
|
||||
|
||||
### 4. 模板功能
|
||||
|
||||
预设多种文档模板，快速开始编辑。
|
||||
|
||||
## 故障排除
|
||||
|
||||
### 问题1：编辑器无法显示
|
||||
|
||||
**原因**：Quill依赖未安装
|
||||
**解决**：运行 `npm install quill`
|
||||
|
||||
### 问题2：样式异常
|
||||
|
||||
**原因**：Quill CSS未加载
|
||||
**解决**：确保组件中导入了 `quill/dist/quill.snow.css`
|
||||
|
||||
### 问题3：内容丢失
|
||||
|
||||
**原因**：浏览器清除了localStorage
|
||||
**解决**：使用服务器存储或定期导出备份
|
||||
|
||||
511
schoolNewsWeb/src/views/public/editor/RichTextEditorView.vue
Normal file
511
schoolNewsWeb/src/views/public/editor/RichTextEditorView.vue
Normal file
@@ -0,0 +1,511 @@
|
||||
<template>
|
||||
<div class="rich-text-editor-view">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">富文本编辑器</h1>
|
||||
<p class="page-description">强大的在线富文本编辑工具，支持多种格式和样式</p>
|
||||
</div>
|
||||
|
||||
<div class="editor-container">
|
||||
<!-- 编辑器工具栏 -->
|
||||
<div class="editor-actions">
|
||||
<div class="action-group">
|
||||
<el-button type="primary" @click="handleSave">
|
||||
<el-icon><Document /></el-icon>
|
||||
保存
|
||||
</el-button>
|
||||
<el-button @click="handlePreview">
|
||||
<el-icon><View /></el-icon>
|
||||
预览
|
||||
</el-button>
|
||||
<el-button @click="handleExport">
|
||||
<el-icon><Download /></el-icon>
|
||||
导出
|
||||
</el-button>
|
||||
<el-button @click="handleClear">
|
||||
<el-icon><Delete /></el-icon>
|
||||
清空
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="action-group">
|
||||
<el-switch
|
||||
v-model="showWordCount"
|
||||
active-text="显示字数"
|
||||
style="margin-right: 16px;"
|
||||
/>
|
||||
<el-input-number
|
||||
v-model="maxLength"
|
||||
:min="0"
|
||||
:max="10000"
|
||||
:step="100"
|
||||
placeholder="字数限制"
|
||||
style="width: 150px;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 富文本编辑器 -->
|
||||
<div class="editor-wrapper">
|
||||
<RichTextComponent
|
||||
ref="editorRef"
|
||||
v-model="content"
|
||||
:height="editorHeight"
|
||||
:max-length="maxLength > 0 ? maxLength : 0"
|
||||
:show-word-count="showWordCount"
|
||||
placeholder="在这里开始编写内容..."
|
||||
@change="handleContentChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 编辑器信息 -->
|
||||
<div class="editor-info">
|
||||
<div class="info-item">
|
||||
<span class="info-label">字符数：</span>
|
||||
<span class="info-value">{{ textLength }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">最后修改：</span>
|
||||
<span class="info-value">{{ lastModified }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 预览对话框 -->
|
||||
<el-dialog
|
||||
v-model="previewVisible"
|
||||
title="内容预览"
|
||||
width="800px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div class="preview-content" v-html="content"></div>
|
||||
<template #footer>
|
||||
<el-button @click="previewVisible = false">关闭</el-button>
|
||||
<el-button type="primary" @click="handleCopyHtml">复制HTML</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 导出对话框 -->
|
||||
<el-dialog
|
||||
v-model="exportVisible"
|
||||
title="导出内容"
|
||||
width="600px"
|
||||
>
|
||||
<el-form label-width="100px">
|
||||
<el-form-item label="导出格式">
|
||||
<el-radio-group v-model="exportFormat">
|
||||
<el-radio label="html">HTML</el-radio>
|
||||
<el-radio label="text">纯文本</el-radio>
|
||||
<el-radio label="markdown">Markdown</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="文件名">
|
||||
<el-input v-model="exportFilename" placeholder="请输入文件名">
|
||||
<template #append>.{{ exportFormat }}</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="exportVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="confirmExport">确认导出</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 快捷功能卡片 -->
|
||||
<div class="feature-cards">
|
||||
<div class="feature-card">
|
||||
<div class="card-icon">📝</div>
|
||||
<h3>丰富格式</h3>
|
||||
<p>支持标题、列表、引用、代码块等多种格式</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="card-icon">🎨</div>
|
||||
<h3>样式定制</h3>
|
||||
<p>自定义文字颜色、背景色、对齐方式等样式</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="card-icon">📊</div>
|
||||
<h3>插入媒体</h3>
|
||||
<p>支持插入图片、视频、链接等多媒体内容</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="card-icon">💾</div>
|
||||
<h3>实时保存</h3>
|
||||
<p>自动保存编辑内容，防止意外丢失</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
|
||||
import {
|
||||
ElButton,
|
||||
ElDialog,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElInputNumber,
|
||||
ElRadioGroup,
|
||||
ElRadio,
|
||||
ElSwitch,
|
||||
ElMessage,
|
||||
ElMessageBox,
|
||||
ElIcon
|
||||
} from 'element-plus';
|
||||
import { Document, View, Download, Delete } from '@element-plus/icons-vue';
|
||||
import { RichTextComponent } from '@/components/text';
|
||||
|
||||
// 编辑器引用
|
||||
const editorRef = ref();
|
||||
|
||||
// 编辑器内容
|
||||
const content = ref(`
|
||||
<h2>欢迎使用富文本编辑器</h2>
|
||||
<p>这是一个功能强大的在线富文本编辑器，支持以下功能：</p>
|
||||
<ul>
|
||||
<li><strong>多种文本格式</strong>：支持标题、段落、列表等</li>
|
||||
<li><strong>样式定制</strong>：文字颜色、背景色、对齐方式</li>
|
||||
<li><strong>插入媒体</strong>：图片、视频、链接</li>
|
||||
<li><strong>代码支持</strong>：代码块和行内代码</li>
|
||||
</ul>
|
||||
<p>开始编辑您的内容吧！</p>
|
||||
`);
|
||||
|
||||
// 编辑器设置
|
||||
const editorHeight = ref('500px');
|
||||
const showWordCount = ref(true);
|
||||
const maxLength = ref(5000);
|
||||
|
||||
// 对话框状态
|
||||
const previewVisible = ref(false);
|
||||
const exportVisible = ref(false);
|
||||
|
||||
// 导出设置
|
||||
const exportFormat = ref('html');
|
||||
const exportFilename = ref('document');
|
||||
|
||||
// 自动保存定时器
|
||||
let autoSaveTimer: number | null = null;
|
||||
|
||||
// 计算属性
|
||||
const textLength = computed(() => {
|
||||
return editorRef.value?.getText()?.trim().length || 0;
|
||||
});
|
||||
|
||||
const lastModified = computed(() => {
|
||||
return new Date().toLocaleString('zh-CN');
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// 启动自动保存
|
||||
startAutoSave();
|
||||
|
||||
// 尝试恢复上次的内容
|
||||
loadSavedContent();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// 清除自动保存定时器
|
||||
if (autoSaveTimer) {
|
||||
clearInterval(autoSaveTimer);
|
||||
}
|
||||
});
|
||||
|
||||
// 内容变化处理
|
||||
function handleContentChange(value: string) {
|
||||
console.log('内容已更新');
|
||||
}
|
||||
|
||||
// 保存
|
||||
function handleSave() {
|
||||
try {
|
||||
localStorage.setItem('rich_text_content', content.value);
|
||||
localStorage.setItem('rich_text_saved_at', new Date().toISOString());
|
||||
ElMessage.success('保存成功');
|
||||
} catch (error) {
|
||||
ElMessage.error('保存失败');
|
||||
}
|
||||
}
|
||||
|
||||
// 自动保存
|
||||
function startAutoSave() {
|
||||
autoSaveTimer = window.setInterval(() => {
|
||||
if (content.value) {
|
||||
localStorage.setItem('rich_text_content_auto', content.value);
|
||||
}
|
||||
}, 30000); // 每30秒自动保存
|
||||
}
|
||||
|
||||
// 加载保存的内容
|
||||
function loadSavedContent() {
|
||||
const saved = localStorage.getItem('rich_text_content');
|
||||
if (saved) {
|
||||
// 可以选择是否自动加载
|
||||
// content.value = saved;
|
||||
}
|
||||
}
|
||||
|
||||
// 预览
|
||||
function handlePreview() {
|
||||
previewVisible.value = true;
|
||||
}
|
||||
|
||||
// 复制HTML
|
||||
function handleCopyHtml() {
|
||||
navigator.clipboard.writeText(content.value).then(() => {
|
||||
ElMessage.success('HTML已复制到剪贴板');
|
||||
}).catch(() => {
|
||||
ElMessage.error('复制失败');
|
||||
});
|
||||
}
|
||||
|
||||
// 导出
|
||||
function handleExport() {
|
||||
exportVisible.value = true;
|
||||
}
|
||||
|
||||
// 确认导出
|
||||
function confirmExport() {
|
||||
let exportContent = '';
|
||||
let mimeType = 'text/html';
|
||||
|
||||
switch (exportFormat.value) {
|
||||
case 'html':
|
||||
exportContent = content.value;
|
||||
mimeType = 'text/html';
|
||||
break;
|
||||
case 'text':
|
||||
exportContent = editorRef.value?.getText() || '';
|
||||
mimeType = 'text/plain';
|
||||
break;
|
||||
case 'markdown':
|
||||
// 简单的HTML转Markdown（可以使用第三方库如turndown来实现）
|
||||
exportContent = htmlToMarkdown(content.value);
|
||||
mimeType = 'text/markdown';
|
||||
break;
|
||||
}
|
||||
|
||||
// 创建下载链接
|
||||
const blob = new Blob([exportContent], { type: mimeType });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `${exportFilename.value || 'document'}.${exportFormat.value}`;
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
ElMessage.success('导出成功');
|
||||
exportVisible.value = false;
|
||||
}
|
||||
|
||||
// 简单的HTML转Markdown（基础版本）
|
||||
function htmlToMarkdown(html: string): string {
|
||||
let markdown = html;
|
||||
|
||||
// 标题
|
||||
markdown = markdown.replace(/<h1>(.*?)<\/h1>/g, '# $1\n\n');
|
||||
markdown = markdown.replace(/<h2>(.*?)<\/h2>/g, '## $1\n\n');
|
||||
markdown = markdown.replace(/<h3>(.*?)<\/h3>/g, '### $1\n\n');
|
||||
|
||||
// 加粗、斜体
|
||||
markdown = markdown.replace(/<strong>(.*?)<\/strong>/g, '**$1**');
|
||||
markdown = markdown.replace(/<em>(.*?)<\/em>/g, '*$1*');
|
||||
|
||||
// 链接
|
||||
markdown = markdown.replace(/<a href="(.*?)">(.*?)<\/a>/g, '[$2]($1)');
|
||||
|
||||
// 列表
|
||||
markdown = markdown.replace(/<li>(.*?)<\/li>/g, '- $1\n');
|
||||
markdown = markdown.replace(/<ul>(.*?)<\/ul>/gs, '$1\n');
|
||||
markdown = markdown.replace(/<ol>(.*?)<\/ol>/gs, '$1\n');
|
||||
|
||||
// 段落
|
||||
markdown = markdown.replace(/<p>(.*?)<\/p>/g, '$1\n\n');
|
||||
|
||||
// 移除其他HTML标签
|
||||
markdown = markdown.replace(/<[^>]+>/g, '');
|
||||
|
||||
return markdown.trim();
|
||||
}
|
||||
|
||||
// 清空
|
||||
function handleClear() {
|
||||
ElMessageBox.confirm(
|
||||
'确定要清空所有内容吗？此操作不可恢复。',
|
||||
'确认清空',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(() => {
|
||||
editorRef.value?.clear();
|
||||
ElMessage.success('已清空');
|
||||
}).catch(() => {
|
||||
// 取消操作
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rich-text-editor-view {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.page-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.page-description {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.editor-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
|
||||
.action-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-wrapper {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.editor-info {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
|
||||
.info-label {
|
||||
color: #909399;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
padding: 20px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
min-height: 200px;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
|
||||
:deep(h1), :deep(h2), :deep(h3) {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
:deep(p) {
|
||||
margin: 8px 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
:deep(ul), :deep(ol) {
|
||||
margin: 12px 0;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
:deep(img) {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 36px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.rich-text-editor-view {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.editor-actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 12px;
|
||||
|
||||
.action-group {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
90
schoolNewsWeb/src/views/public/error/403.vue
Normal file
90
schoolNewsWeb/src/views/public/error/403.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="error-page">
|
||||
<div class="error-content">
|
||||
<div class="error-icon">
|
||||
<span class="error-number">403</span>
|
||||
</div>
|
||||
|
||||
<div class="error-info">
|
||||
<h1 class="error-title">无权限访问</h1>
|
||||
<p class="error-description">
|
||||
抱歉，您没有权限访问此页面。请联系管理员获取相应权限。
|
||||
</p>
|
||||
|
||||
<div class="error-actions">
|
||||
<el-button type="primary" @click="goHome">
|
||||
返回首页
|
||||
</el-button>
|
||||
<el-button @click="goBack">
|
||||
返回上页
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
function goHome() {
|
||||
router.push('/dashboard');
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
router.go(-1);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.error-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f5f5;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.error-content {
|
||||
text-align: center;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
margin-bottom: 32px;
|
||||
|
||||
.error-number {
|
||||
font-size: 120px;
|
||||
font-weight: 700;
|
||||
color: #fa8c16;
|
||||
line-height: 1;
|
||||
text-shadow: 0 4px 8px rgba(250, 140, 22, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.error-info {
|
||||
.error-title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
.error-description {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin: 0 0 32px 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.error-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
90
schoolNewsWeb/src/views/public/error/404.vue
Normal file
90
schoolNewsWeb/src/views/public/error/404.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="error-page">
|
||||
<div class="error-content">
|
||||
<div class="error-icon">
|
||||
<span class="error-number">404</span>
|
||||
</div>
|
||||
|
||||
<div class="error-info">
|
||||
<h1 class="error-title">页面不存在</h1>
|
||||
<p class="error-description">
|
||||
抱歉，您访问的页面不存在或已被删除。
|
||||
</p>
|
||||
|
||||
<div class="error-actions">
|
||||
<el-button type="primary" @click="goHome">
|
||||
返回首页
|
||||
</el-button>
|
||||
<el-button @click="goBack">
|
||||
返回上页
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
function goHome() {
|
||||
router.push('/dashboard');
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
router.go(-1);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.error-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f5f5;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.error-content {
|
||||
text-align: center;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
margin-bottom: 32px;
|
||||
|
||||
.error-number {
|
||||
font-size: 120px;
|
||||
font-weight: 700;
|
||||
color: #1890ff;
|
||||
line-height: 1;
|
||||
text-shadow: 0 4px 8px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.error-info {
|
||||
.error-title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
.error-description {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin: 0 0 32px 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.error-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
90
schoolNewsWeb/src/views/public/error/500.vue
Normal file
90
schoolNewsWeb/src/views/public/error/500.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="error-page">
|
||||
<div class="error-content">
|
||||
<div class="error-icon">
|
||||
<span class="error-number">500</span>
|
||||
</div>
|
||||
|
||||
<div class="error-info">
|
||||
<h1 class="error-title">服务器错误</h1>
|
||||
<p class="error-description">
|
||||
抱歉，服务器出现内部错误。请稍后重试，或联系技术支持。
|
||||
</p>
|
||||
|
||||
<div class="error-actions">
|
||||
<el-button type="primary" @click="refresh">
|
||||
刷新页面
|
||||
</el-button>
|
||||
<el-button @click="goHome">
|
||||
返回首页
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
function refresh() {
|
||||
location.reload();
|
||||
}
|
||||
|
||||
function goHome() {
|
||||
router.push('/dashboard');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.error-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f5f5;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.error-content {
|
||||
text-align: center;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
margin-bottom: 32px;
|
||||
|
||||
.error-number {
|
||||
font-size: 120px;
|
||||
font-weight: 700;
|
||||
color: #f5222d;
|
||||
line-height: 1;
|
||||
text-shadow: 0 4px 8px rgba(245, 34, 45, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.error-info {
|
||||
.error-title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
.error-description {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin: 0 0 32px 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.error-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
101
schoolNewsWeb/src/views/public/login/ForgotPassword.vue
Normal file
101
schoolNewsWeb/src/views/public/login/ForgotPassword.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="forgot-password-container">
|
||||
<div class="forgot-password-box">
|
||||
<div class="forgot-password-header">
|
||||
<div class="logo">
|
||||
<img src="@/assets/logo.png" alt="Logo" />
|
||||
</div>
|
||||
<h1 class="title">找回密码</h1>
|
||||
<p class="subtitle">重置您的账户密码</p>
|
||||
</div>
|
||||
|
||||
<div class="forgot-password-form">
|
||||
<!-- 找回密码表单内容 -->
|
||||
<div class="form-placeholder">
|
||||
<p>找回密码功能开发中...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="forgot-password-footer">
|
||||
<p>
|
||||
想起密码了？
|
||||
<el-link type="primary" @click="goToLogin">返回登录</el-link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
function goToLogin() {
|
||||
router.push('/login');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.forgot-password-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.forgot-password-box {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.forgot-password-header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
|
||||
.logo img {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-password-form {
|
||||
.form-placeholder {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-password-footer {
|
||||
text-align: center;
|
||||
margin-top: 24px;
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
477
schoolNewsWeb/src/views/public/login/Login.vue
Normal file
477
schoolNewsWeb/src/views/public/login/Login.vue
Normal file
@@ -0,0 +1,477 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<!-- 左侧励志区域 -->
|
||||
<div class="login-left">
|
||||
<div class="left-content">
|
||||
<div class="quote-text">
|
||||
<span class="quote-mark">“</span>
|
||||
<div class="quote-content">
|
||||
<p>不负时代韶华，</p>
|
||||
<p>争做时代新人。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧登录表单区域 -->
|
||||
<div class="login-right">
|
||||
<div class="login-form-container">
|
||||
<!-- Logo和标题区域 -->
|
||||
<div class="login-header">
|
||||
<div class="logo-section">
|
||||
<div class="logo">
|
||||
<img src="@/assets/imgs/logo-icon.svg" alt="Logo" />
|
||||
</div>
|
||||
<h1 class="platform-title">红色思政学习平台</h1>
|
||||
</div>
|
||||
<h2 class="login-title">账号登录</h2>
|
||||
</div>
|
||||
|
||||
<!-- 登录表单 -->
|
||||
<el-form
|
||||
ref="loginFormRef"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
class="login-form"
|
||||
@submit.prevent="handleLogin"
|
||||
>
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="loginForm.username"
|
||||
placeholder="请输入学号、手机号"
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
show-password
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<div class="login-options">
|
||||
<div class="remember-me">
|
||||
<el-checkbox v-model="loginForm.rememberMe">
|
||||
自动登录
|
||||
</el-checkbox>
|
||||
</div>
|
||||
<el-link type="primary" @click="goToForgotPassword" class="forgot-password">
|
||||
忘记密码？
|
||||
</el-link>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="loginLoading"
|
||||
@click="handleLogin"
|
||||
class="login-button"
|
||||
>
|
||||
登录
|
||||
</el-button>
|
||||
<p class="agreement-text">
|
||||
<el-checkbox v-model="loginForm.rememberMe">登录即为同意<span class="agreement-link" style="color: red">《红色思政智能体平台》</span></el-checkbox>
|
||||
</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
<!-- 底部信息 -->
|
||||
<div class="login-footer">
|
||||
<p class="register-link">
|
||||
没有账号？<span class="register-link-text" @click="goToRegister">现在就注册</span>
|
||||
</p>
|
||||
<p class="copyright">
|
||||
Copyright ©红色思政智能体平台
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
|
||||
import type { LoginParam } from '@/types';
|
||||
import { authApi } from '@/apis/system/auth';
|
||||
|
||||
// 响应式引用
|
||||
const loginFormRef = ref<FormInstance>();
|
||||
const loginLoading = ref(false);
|
||||
const showCaptcha = ref(false);
|
||||
const captchaImage = ref('');
|
||||
|
||||
// Composition API
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const store = useStore();
|
||||
|
||||
// 表单数据
|
||||
const loginForm = reactive<LoginParam>({
|
||||
username: '',
|
||||
password: '',
|
||||
captcha: '',
|
||||
captchaId: '',
|
||||
rememberMe: false
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const loginRules: FormRules = {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
{ min: 3, max: 20, message: '用户名长度为3-20个字符', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{ min: 6, message: '密码至少6个字符', trigger: 'blur' }
|
||||
],
|
||||
captcha: [
|
||||
{ required: true, message: '请输入验证码', trigger: 'blur' },
|
||||
{ len: 4, message: '验证码为4位', trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
|
||||
// 方法
|
||||
const handleLogin = async () => {
|
||||
if (!loginFormRef.value) return;
|
||||
|
||||
try {
|
||||
const valid = await loginFormRef.value.validate();
|
||||
if (!valid) return;
|
||||
|
||||
loginLoading.value = true;
|
||||
|
||||
// 调用store中的登录action
|
||||
const result = await store.dispatch('auth/login', loginForm);
|
||||
|
||||
ElMessage.success('登录成功！');
|
||||
|
||||
// 优先使用 query 中的 redirect，其次使用返回的 redirectUrl，最后使用默认首页
|
||||
const redirectPath = (route.query.redirect as string) || result.redirectUrl || '/home';
|
||||
router.push(redirectPath);
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('登录失败:', error);
|
||||
ElMessage.error(error.message || '登录失败，请检查用户名和密码');
|
||||
|
||||
// 登录失败后显示验证码
|
||||
showCaptcha.value = true;
|
||||
refreshCaptcha();
|
||||
} finally {
|
||||
loginLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const refreshCaptcha = async () => {
|
||||
try {
|
||||
const result = await authApi.getCaptcha();
|
||||
if (result.data) {
|
||||
captchaImage.value = result.data.captchaImage;
|
||||
loginForm.captchaId = result.data.captchaId;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取验证码失败:', error);
|
||||
ElMessage.error('获取验证码失败');
|
||||
}
|
||||
};
|
||||
|
||||
function goToRegister() {
|
||||
router.push('/register');
|
||||
}
|
||||
|
||||
function goToForgotPassword() {
|
||||
router.push('/forgot-password');
|
||||
}
|
||||
|
||||
// 组件挂载时检查是否需要显示验证码
|
||||
onMounted(() => {
|
||||
// 可以根据需要决定是否默认显示验证码
|
||||
// refreshCaptcha();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-container {
|
||||
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
max-width: 1142px;
|
||||
margin: auto auto;
|
||||
box-shadow: 0px 4px 30px 0px rgba(176, 196, 225, 0.25);
|
||||
border-radius: 30px;
|
||||
overflow: hidden;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login-left {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
/* min-height: 671px; */
|
||||
padding: 113px 120px;
|
||||
border-radius: 30px 0 0 30px;
|
||||
overflow: hidden;
|
||||
background: url(/schoolNewsWeb/src/assets/imgs/login-bg.png);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.left-content {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.quote-text {
|
||||
color: #FFF2D3;
|
||||
|
||||
.quote-mark {
|
||||
font-family: 'Arial Black', sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 71.096px;
|
||||
line-height: 0.74;
|
||||
display: block;
|
||||
margin-left: 1.48px;
|
||||
}
|
||||
|
||||
.quote-content {
|
||||
margin-top: 46.66px;
|
||||
|
||||
p {
|
||||
font-family: 'Taipei Sans TC Beta', 'PingFang SC', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 50px;
|
||||
line-height: 1.42;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-right {
|
||||
flex: 1;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
border-radius: 0 30px 30px 0;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.login-form-container {
|
||||
width: 287px;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.logo-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.logo {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: #C62828;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3px;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.platform-title {
|
||||
font-family: 'Taipei Sans TC Beta', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 26px;
|
||||
line-height: 1.31;
|
||||
color: #141F38;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: #141F38;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
.form-input {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: #F2F3F5;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #C62828;
|
||||
}
|
||||
}
|
||||
|
||||
.login-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.remember-me {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.el-checkbox {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
|
||||
.el-checkbox__label {
|
||||
font-size: 12px;
|
||||
line-height: 1.67;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: #C62828;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-button {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
background: #C62828;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
color: #FFFFFF;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:hover {
|
||||
background: #B71C1C;
|
||||
}
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 1.8;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
width: 100%;
|
||||
|
||||
.register-link {
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
line-height: 1.83;
|
||||
color: #141F38;
|
||||
text-align: center;
|
||||
margin: 0 0 16px 0;
|
||||
|
||||
.register-link-text {
|
||||
cursor: pointer;
|
||||
color: #ff0000;
|
||||
&:hover {
|
||||
color: #C62828;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 2;
|
||||
color: #D9D9D9;
|
||||
text-align: center;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.login-container {
|
||||
flex-direction: column;
|
||||
border-radius: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.login-left {
|
||||
min-height: 300px;
|
||||
padding: 40px;
|
||||
|
||||
.left-content {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.quote-text {
|
||||
.quote-mark {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.quote-content p {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-right {
|
||||
min-height: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-form-container {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
101
schoolNewsWeb/src/views/public/login/Register.vue
Normal file
101
schoolNewsWeb/src/views/public/login/Register.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="register-container">
|
||||
<div class="register-box">
|
||||
<div class="register-header">
|
||||
<div class="logo">
|
||||
<img src="@/assets/logo.png" alt="Logo" />
|
||||
</div>
|
||||
<h1 class="title">注册账户</h1>
|
||||
<p class="subtitle">创建您的校园新闻管理系统账户</p>
|
||||
</div>
|
||||
|
||||
<div class="register-form">
|
||||
<!-- 注册表单内容 -->
|
||||
<div class="form-placeholder">
|
||||
<p>注册功能开发中...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="register-footer">
|
||||
<p>
|
||||
已有账户？
|
||||
<el-link type="primary" @click="goToLogin">立即登录</el-link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
function goToLogin() {
|
||||
router.push('/login');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.register-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.register-box {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.register-header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
|
||||
.logo img {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.register-form {
|
||||
.form-placeholder {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.register-footer {
|
||||
text-align: center;
|
||||
margin-top: 24px;
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
977
schoolNewsWeb/src/views/public/task/LearingTaskDetail.vue
Normal file
977
schoolNewsWeb/src/views/public/task/LearingTaskDetail.vue
Normal file
@@ -0,0 +1,977 @@
|
||||
<template>
|
||||
<div class="task-detail">
|
||||
<!-- 返回按钮（可选） -->
|
||||
<div v-if="showBackButton" class="back-header">
|
||||
<el-button @click="handleBack" :icon="ArrowLeft">{{ backButtonText }}</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 加载中 -->
|
||||
<div v-if="loading" class="loading">
|
||||
<el-skeleton :rows="10" animated />
|
||||
</div>
|
||||
|
||||
<!-- 任务详情 -->
|
||||
<div v-else-if="taskVO" class="task-content">
|
||||
<!-- 任务基本信息 -->
|
||||
<el-card class="task-info-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div class="header-left">
|
||||
<el-icon class="header-icon"><Memo /></el-icon>
|
||||
<span class="header-title">任务信息</span>
|
||||
</div>
|
||||
<el-tag
|
||||
:type="getTaskStatusType(taskVO.learningTask.status)"
|
||||
size="large"
|
||||
>
|
||||
{{ getTaskStatusText(taskVO.learningTask.status) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="task-info">
|
||||
<h1 class="task-title">{{ taskVO.learningTask.name }}</h1>
|
||||
|
||||
<div class="task-meta">
|
||||
<div class="meta-row">
|
||||
<div class="meta-item">
|
||||
<el-icon><Calendar /></el-icon>
|
||||
<span class="meta-label">开始时间：</span>
|
||||
<span class="meta-value">{{ formatDate(taskVO.learningTask.startTime) }}</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<el-icon><Calendar /></el-icon>
|
||||
<span class="meta-label">结束时间：</span>
|
||||
<span class="meta-value">{{ formatDate(taskVO.learningTask.endTime) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="meta-row">
|
||||
<div class="meta-item">
|
||||
<el-icon><User /></el-icon>
|
||||
<span class="meta-label">创建者：</span>
|
||||
<span class="meta-value">{{ taskVO.learningTask.creator || '系统' }}</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<el-icon><Clock /></el-icon>
|
||||
<span class="meta-label">创建时间：</span>
|
||||
<span class="meta-value">{{ formatDateTime(taskVO.learningTask.createTime) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="taskVO.learningTask.description" class="task-description">
|
||||
<h3 class="section-subtitle">任务描述</h3>
|
||||
<p>{{ taskVO.learningTask.description }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 任务统计 -->
|
||||
<div class="task-stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-icon total">
|
||||
<el-icon><Document /></el-icon>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">总任务数</div>
|
||||
<div class="stat-value">{{ taskVO.totalTaskNum || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-item">
|
||||
<div class="stat-icon completed">
|
||||
<el-icon><CircleCheck /></el-icon>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">已完成</div>
|
||||
<div class="stat-value">{{ taskVO.completedTaskNum || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-item">
|
||||
<div class="stat-icon learning">
|
||||
<el-icon><Reading /></el-icon>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">学习中</div>
|
||||
<div class="stat-value">{{ taskVO.learningTaskNum || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-item">
|
||||
<div class="stat-icon pending">
|
||||
<el-icon><Clock /></el-icon>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">未开始</div>
|
||||
<div class="stat-value">{{ taskVO.notStartTaskNum || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 学习进度 -->
|
||||
<div v-if="taskVO.totalTaskNum && taskVO.totalTaskNum > 0" class="learning-progress">
|
||||
<div class="progress-header">
|
||||
<span>学习进度</span>
|
||||
<span class="progress-text">{{ progressPercent }}%</span>
|
||||
</div>
|
||||
<el-progress
|
||||
:percentage="progressPercent"
|
||||
:stroke-width="12"
|
||||
:color="progressColor"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 课程列表 -->
|
||||
<el-card v-if="taskVO.taskCourses && taskVO.taskCourses.length > 0" class="course-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div class="header-left">
|
||||
<el-icon class="header-icon"><VideoPlay /></el-icon>
|
||||
<span class="header-title">学习课程</span>
|
||||
</div>
|
||||
<span class="item-count">共 {{ taskVO.taskCourses.length }} 门课程</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="course-list">
|
||||
<div
|
||||
v-for="(course, index) in taskVO.taskCourses"
|
||||
:key="course.courseID"
|
||||
class="course-item"
|
||||
@click="handleCourseClick(course)"
|
||||
>
|
||||
<div class="course-index">{{ index + 1 }}</div>
|
||||
<div class="course-info">
|
||||
<div class="course-name-row">
|
||||
<span class="course-name">{{ course.courseName }}</span>
|
||||
<el-tag
|
||||
v-if="course.required"
|
||||
type="danger"
|
||||
size="small"
|
||||
effect="plain"
|
||||
>
|
||||
必修
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="course-meta">
|
||||
<div class="status-info">
|
||||
<el-tag
|
||||
:type="getItemStatusType(course.status)"
|
||||
size="small"
|
||||
>
|
||||
{{ getItemStatusText(course.status) }}
|
||||
</el-tag>
|
||||
<span v-if="course.status === 2 && course.completeTime" class="complete-time">
|
||||
<el-icon><CircleCheck /></el-icon>
|
||||
{{ formatDateTime(course.completeTime) }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="course.progress !== null && course.progress !== undefined" class="progress-info">
|
||||
<span class="progress-text">{{ course.progress }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-action">
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="course.status === 2 ? CircleCheck : (course.status === 1 ? VideoPlay : Reading)"
|
||||
:disabled="course.status === 2"
|
||||
@click.stop="handleCourseClick(course)"
|
||||
>
|
||||
{{ course.status === 2 ? '已完成' : (course.status === 1 ? '继续学习' : '开始学习') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 文章/资源列表 -->
|
||||
<el-card v-if="taskVO.taskResources && taskVO.taskResources.length > 0" class="resource-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div class="header-left">
|
||||
<el-icon class="header-icon"><Document /></el-icon>
|
||||
<span class="header-title">学习资源</span>
|
||||
</div>
|
||||
<span class="item-count">共 {{ taskVO.taskResources.length }} 篇文章</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="resource-list">
|
||||
<div
|
||||
v-for="(resource, index) in taskVO.taskResources"
|
||||
:key="resource.resourceID"
|
||||
class="resource-item"
|
||||
@click="handleResourceClick(resource)"
|
||||
>
|
||||
<div class="resource-index">{{ index + 1 }}</div>
|
||||
<div class="resource-info">
|
||||
<div class="resource-name-row">
|
||||
<span class="resource-name">{{ resource.resourceName }}</span>
|
||||
<el-tag
|
||||
v-if="resource.required"
|
||||
type="danger"
|
||||
size="small"
|
||||
effect="plain"
|
||||
>
|
||||
必修
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="resource-meta">
|
||||
<div class="status-info">
|
||||
<el-tag
|
||||
:type="getItemStatusType(resource.status)"
|
||||
size="small"
|
||||
>
|
||||
{{ getItemStatusText(resource.status) }}
|
||||
</el-tag>
|
||||
<span v-if="resource.status === 2 && resource.completeTime" class="complete-time">
|
||||
<el-icon><CircleCheck /></el-icon>
|
||||
{{ formatDateTime(resource.completeTime) }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="resource.progress !== null && resource.progress !== undefined" class="progress-info">
|
||||
<span class="progress-text">{{ resource.progress }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="resource-action">
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="resource.status === 2 ? CircleCheck : (resource.status === 1 ? Reading : View)"
|
||||
:disabled="resource.status === 2"
|
||||
@click.stop="handleResourceClick(resource)"
|
||||
>
|
||||
{{ resource.status === 2 ? '已完成' : (resource.status === 1 ? '继续阅读' : '开始阅读') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<el-card
|
||||
v-if="(!taskVO.taskCourses || taskVO.taskCourses.length === 0) &&
|
||||
(!taskVO.taskResources || taskVO.taskResources.length === 0)"
|
||||
class="empty-card"
|
||||
shadow="never"
|
||||
>
|
||||
<el-empty description="暂无学习内容" />
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 加载失败 -->
|
||||
<div v-else class="error-tip">
|
||||
<el-empty description="加载任务失败" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import {
|
||||
ArrowLeft,
|
||||
Memo,
|
||||
Calendar,
|
||||
User,
|
||||
Clock,
|
||||
Document,
|
||||
CircleCheck,
|
||||
Reading,
|
||||
VideoPlay,
|
||||
View
|
||||
} from '@element-plus/icons-vue';
|
||||
import { learningTaskApi } from '@/apis/study';
|
||||
import type { TaskVO, TaskItemVO } from '@/types';
|
||||
|
||||
interface Props {
|
||||
taskId?: string;
|
||||
showBackButton?: boolean;
|
||||
backButtonText?: string;
|
||||
}
|
||||
|
||||
defineOptions({
|
||||
name: 'LearingTaskDetail'
|
||||
});
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
showBackButton: false,
|
||||
backButtonText: '返回'
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
back: [];
|
||||
}>();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const loading = ref(false);
|
||||
const taskVO = ref<TaskVO | null>(null);
|
||||
const currentTaskId = computed(() => props.taskId || '');
|
||||
|
||||
// 计算学习进度百分比
|
||||
const progressPercent = computed(() => {
|
||||
if (!taskVO.value || !taskVO.value.totalTaskNum || taskVO.value.totalTaskNum === 0) {
|
||||
return 0;
|
||||
}
|
||||
const completed = taskVO.value.completedTaskNum || 0;
|
||||
const total = taskVO.value.totalTaskNum;
|
||||
return Math.round((completed / total) * 100);
|
||||
});
|
||||
|
||||
// 进度条颜色
|
||||
const progressColor = computed(() => {
|
||||
const progress = progressPercent.value;
|
||||
if (progress >= 80) return '#67c23a';
|
||||
if (progress >= 50) return '#409eff';
|
||||
return '#e6a23c';
|
||||
});
|
||||
|
||||
watch(() => currentTaskId.value, (newId) => {
|
||||
if (newId) {
|
||||
loadTaskDetail();
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
// 加载任务详情
|
||||
async function loadTaskDetail() {
|
||||
if (!currentTaskId.value) {
|
||||
ElMessage.error('任务ID不存在');
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await learningTaskApi.getUserTask(currentTaskId.value);
|
||||
if (res.success && res.data) {
|
||||
taskVO.value = res.data;
|
||||
|
||||
// 确保数据结构完整
|
||||
if (!taskVO.value.taskCourses) {
|
||||
taskVO.value.taskCourses = [];
|
||||
}
|
||||
if (!taskVO.value.taskResources) {
|
||||
taskVO.value.taskResources = [];
|
||||
}
|
||||
if (!taskVO.value.taskUsers) {
|
||||
taskVO.value.taskUsers = [];
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(res.message || '加载任务失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('加载任务失败:', error);
|
||||
ElMessage.error(error?.message || '加载任务失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 处理课程点击
|
||||
function handleCourseClick(course: TaskItemVO) {
|
||||
if (!course.courseID) {
|
||||
ElMessage.warning('课程ID不存在');
|
||||
return;
|
||||
}
|
||||
|
||||
// 跳转到课程学习路由
|
||||
router.push({
|
||||
path: '/study-plan/course-study',
|
||||
query: {
|
||||
courseId: course.courseID,
|
||||
chapterIndex: '0',
|
||||
nodeIndex: '0',
|
||||
taskId: currentTaskId.value
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 处理资源点击
|
||||
function handleResourceClick(resource: TaskItemVO) {
|
||||
if (!resource.resourceID) {
|
||||
ElMessage.warning('资源ID不存在');
|
||||
return;
|
||||
}
|
||||
|
||||
// 跳转到文章查看页面
|
||||
router.push({
|
||||
path: '/article/show',
|
||||
query: {
|
||||
articleId: resource.resourceID,
|
||||
taskId: currentTaskId.value // 传递 taskId
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 处理返回
|
||||
function handleBack() {
|
||||
emit('back');
|
||||
}
|
||||
|
||||
// 格式化日期
|
||||
function formatDate(dateString?: string): string {
|
||||
if (!dateString) return '--';
|
||||
const date = new Date(dateString);
|
||||
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
// 格式化日期时间
|
||||
function formatDateTime(dateString?: string): string {
|
||||
if (!dateString) return '--';
|
||||
const date = new Date(dateString);
|
||||
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
// 获取任务状态文本
|
||||
function getTaskStatusText(status?: number): string {
|
||||
switch (status) {
|
||||
case 0:
|
||||
return '草稿';
|
||||
case 1:
|
||||
return '进行中';
|
||||
case 2:
|
||||
return '已结束';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
}
|
||||
|
||||
// 获取任务状态类型
|
||||
function getTaskStatusType(status?: number): 'info' | 'success' | 'warning' | 'danger' {
|
||||
switch (status) {
|
||||
case 0:
|
||||
return 'info';
|
||||
case 1:
|
||||
return 'success';
|
||||
case 2:
|
||||
return 'warning';
|
||||
default:
|
||||
return 'info';
|
||||
}
|
||||
}
|
||||
|
||||
// 获取学习项状态文本（课程/资源通用）
|
||||
function getItemStatusText(status?: number): string {
|
||||
switch (status) {
|
||||
case 0:
|
||||
return '未开始';
|
||||
case 1:
|
||||
return '学习中';
|
||||
case 2:
|
||||
return '已完成';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
}
|
||||
|
||||
// 获取学习项状态类型（课程/资源通用）
|
||||
function getItemStatusType(status?: number): 'info' | 'warning' | 'success' {
|
||||
switch (status) {
|
||||
case 0:
|
||||
return 'info';
|
||||
case 1:
|
||||
return 'warning';
|
||||
case 2:
|
||||
return 'success';
|
||||
default:
|
||||
return 'info';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.task-detail {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.back-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
padding: 16px 24px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
margin-bottom: 0;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.loading {
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
margin: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.task-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 20px;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.item-count {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
// 任务信息卡片
|
||||
.task-info-card {
|
||||
margin-bottom: 24px;
|
||||
|
||||
:deep(.el-card__header) {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
|
||||
.card-header {
|
||||
.header-icon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-info {
|
||||
.task-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 24px 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.task-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
padding: 20px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 8px;
|
||||
|
||||
.meta-row {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
|
||||
.el-icon {
|
||||
color: #909399;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.meta-value {
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-description {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.task-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e4e7ed;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.el-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
&.total {
|
||||
background: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
&.completed {
|
||||
background: #e8f5e9;
|
||||
color: #388e3c;
|
||||
}
|
||||
|
||||
&.learning {
|
||||
background: #fff3e0;
|
||||
color: #f57c00;
|
||||
}
|
||||
|
||||
&.pending {
|
||||
background: #fce4ec;
|
||||
color: #c2185b;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
flex: 1;
|
||||
|
||||
.stat-label {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.learning-progress {
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
border-radius: 8px;
|
||||
|
||||
.progress-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
.progress-text {
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 课程卡片
|
||||
.course-card {
|
||||
margin-bottom: 24px;
|
||||
|
||||
:deep(.el-card__header) {
|
||||
background: #fff9f0;
|
||||
}
|
||||
}
|
||||
|
||||
.course-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.course-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e4e7ed;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #f0f2f5;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.course-index {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.course-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.course-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.course-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.course-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
|
||||
.status-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.complete-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: #67c23a;
|
||||
|
||||
.el-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-info {
|
||||
.progress-text {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.course-action {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 资源卡片
|
||||
.resource-card {
|
||||
margin-bottom: 24px;
|
||||
|
||||
:deep(.el-card__header) {
|
||||
background: #f0f9ff;
|
||||
}
|
||||
}
|
||||
|
||||
.resource-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.resource-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e4e7ed;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #f0f2f5;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.resource-index {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.resource-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.resource-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.resource-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.resource-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
|
||||
.status-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.complete-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: #67c23a;
|
||||
|
||||
.el-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-info {
|
||||
.progress-text {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.resource-action {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 空状态卡片
|
||||
.empty-card {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.error-tip {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.task-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.task-info {
|
||||
.task-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.task-meta {
|
||||
.meta-row {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.task-stats {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.course-item,
|
||||
.resource-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.course-action,
|
||||
.resource-action {
|
||||
width: 100%;
|
||||
|
||||
.el-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
1061
schoolNewsWeb/src/views/public/task/LearningTaskAdd.vue
Normal file
1061
schoolNewsWeb/src/views/public/task/LearningTaskAdd.vue
Normal file
File diff suppressed because it is too large
Load Diff
1448
schoolNewsWeb/src/views/public/task/LearningTaskList.vue
Normal file
1448
schoolNewsWeb/src/views/public/task/LearningTaskList.vue
Normal file
File diff suppressed because it is too large
Load Diff
3
schoolNewsWeb/src/views/public/task/index.ts
Normal file
3
schoolNewsWeb/src/views/public/task/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export { default as LearningTaskAdd } from './LearningTaskAdd.vue';
|
||||
export { default as LearningTaskList } from './LearningTaskList.vue';
|
||||
export { default as LearingTaskDetail } from './LearingTaskDetail.vue';
|
||||
Reference in New Issue
Block a user