yunzerwebsite/yunzer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

改接口匹配新前端

Browse Source
This commit is contained in:
hero920103
2025-12-24 17:41:33 +08:00
parent 5691a3f677
commit 2161113eae
18 changed files with 1134 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/index/view/user/component/publisharticle.php
+440
View File
@@ -0,0 +1,440 @@
<div class="publish-section">
<h2 class="section-title">发布文章</h2>
<p class="section-desc">分享您的技术见解、经验总结或其他有价值的内容</p>
<form class="layui-form" lay-filter="publishForm">
<div class="layui-form-item">
<label class="layui-form-label"><span class="layui-font-red">*</span>文章标题</label>
<div class="layui-input-block">
<input type="text" name="title" placeholder="请输入文章标题" class="layui-input" lay-verify="required"
lay-reqtext="文章标题不能为空" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span class="layui-font-red">*</span>文章分类</label>
<div class="layui-input-block">
<select name="category" lay-verify="required" lay-reqtext="请选择文章分类">
<option value="">请选择分类</option>
<option value="tech">技术文章</option>
<option value="tutorial">教程指南</option>
<option value="news">行业资讯</option>
<option value="experience">经验分享</option>
<option value="other">其他文章</option>
</select>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文章摘要</label>
<div class="layui-input-block">
<textarea name="summary" placeholder="请简要概括文章主要内容" class="layui-textarea" rows="4"
lay-reqtext="请填写文章摘要"></textarea>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label"><span class="layui-font-red">*</span>文章内容</label>
<div class="layui-input-block">
<div id="editor-wrapper" style="border: 1px solid #e8e8e8; border-radius: 6px;">
<div id="toolbar-container" style="border-bottom: 1px solid #e8e8e8;"></div>
<div id="editor-container" style="height: 400px;"></div>
</div>
<textarea name="content" id="contentTextarea" style="display: none;"></textarea>
<div class="layui-word-aux">支持富文本编辑，可插入图片、链接、代码块等</div>
</div>
</div>
<!-- <div class="layui-form-item">
<label class="layui-form-label">文章标签</label>
<div class="layui-input-block">
<input type="text" name="tags" placeholder="请输入文章标签，用逗号分隔" class="layui-input" />
<span class="layui-word-aux">如：PHP,ThinkPHP,开发经验</span>
</div>
</div> -->
<div class="layui-form-item">
<label class="layui-form-label">封面图片</label>
<div class="layui-input-block">
<div class="layui-upload">
<button type="button" class="layui-btn" id="uploadCoverBtn">上传封面</button>
<div class="layui-upload-list" id="coverList"></div>
<span class="layui-word-aux">建议尺寸：800x450px，支持 JPG、PNG 格式</span>
</div>
<input type="hidden" name="cover_image" id="coverInput" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">原文链接</label>
<div class="layui-input-block">
<input type="url" name="source_url" placeholder="如果这是转载文章，请填写原文链接" class="layui-input" />
</div>
</div>
<!-- <div class="layui-form-item">
<label class="layui-form-label">发布选项</label>
<div class="layui-input-block">
<input type="checkbox" name="is_draft" value="1" title="保存为草稿" lay-skin="primary">
<input type="checkbox" name="allow_comment" value="1" title="允许评论" lay-skin="primary" checked>
</div>
</div> -->
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit lay-filter="publishSubmit">发布文章</button>
<button type="reset" class="layui-btn layui-btn-primary">重置表单</button>
</div>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@5.1.23/dist/index.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@5.1.23/dist/css/style.css">
<script>
layui.use(['form', 'layer', 'upload'], function () {
var form = layui.form;
var layer = layui.layer;
var upload = layui.upload;
var $ = layui.jquery;
// 等待wangeditor加载完成
if (typeof window.wangEditor === 'undefined') {
console.error('wangEditor未正确加载');
return;
}
// 初始化富文本编辑器
const { createEditor, createToolbar } = window.wangEditor;
const editorConfig = {
placeholder: '请输入文章内容...',
onChange(editor) {
const html = editor.getHtml();
// 同步到隐藏的textarea
$('#contentTextarea').val(html);
},
MENU_CONF: {}
};
// 配置图片上传
editorConfig.MENU_CONF['uploadImage'] = {
server: '/index/user/uploadImage',
fieldName: 'file',
maxFileSize: 2 * 1024 * 1024, // 2M
maxNumberOfFiles: 10,
allowedFileTypes: ['image/*'],
onBeforeUpload(file) {
console.log('准备上传图片', file);
return file;
},
onProgress(progress) {
console.log('上传进度', progress);
},
onSuccess(file, res) {
console.log('上传成功', file, res);
},
onFailed(file, res) {
console.log('上传失败', file, res);
layer.msg('上传失败：' + (res.message || '未知错误'), { icon: 2 });
},
onError(file, err, res) {
console.error('上传出错', file, err, res);
layer.msg('上传出错：' + (err.message || '网络错误'), { icon: 2 });
},
customInsert(res, insertFn) {
console.log('自定义插入', res);
if (res.code === 0 && res.data && res.data.url) {
insertFn(res.data.url, res.data.alt || '', res.data.href || '');
} else {
layer.msg(res.msg || '上传失败', { icon: 2 });
}
}
};
// 创建编辑器
const editor = createEditor({
selector: '#editor-container',
config: editorConfig,
html: '<p><br></p>',
mode: 'default'
});
// 创建工具栏
const toolbar = createToolbar({
editor,
selector: '#toolbar-container',
config: {},
mode: 'default'
});
// 表单提交
form.on('submit(publishSubmit)', function (data) {
// 获取编辑器内容
var content = editor.getHtml();
if (!content || content === '<p><br></p>') {
layer.msg('请输入文章内容', { icon: 2 });
return false;
}
var loadIndex = layer.load(2);
data.field.content = content;
$.ajax({
url: '/index/user/publishArticle',
type: 'POST',
data: data.field,
success: function (res) {
layer.close(loadIndex);
if (res.code == 0) {
layer.msg(res.msg, { icon: 1 });
setTimeout(function () {
// 重置表单
form.val('publishForm', {
title: '',
category: '',
summary: '',
tags: '',
source_url: '',
is_draft: 0,
allow_comment: 1
});
// 清空富文本编辑器
editor.setHtml('<p><br></p>');
$('#contentTextarea').val('');
// 清空封面图片
$('#coverList').empty().hide();
$('#coverInput').val('');
}, 1000);
} else {
layer.msg(res.msg, { icon: 2 });
}
}
});
return false;
});
// 封面图片上传
upload.render({
elem: '#uploadCoverBtn',
url: 'index/upload_img',
accept: 'image',
acceptMime: 'image/*',
exts: 'jpg|png|jpeg',
size: 2048, // 2MB
before: function (obj) {
layer.load(1);
},
done: function (res) {
layer.closeAll('loading');
if (res.code === 0) {
$('#coverList').html(`
<div class="upload-item">
<img src="${res.data.url}" alt="封面图" />
<div class="upload-actions">
<i class="layui-icon layui-icon-delete" onclick="removeCover()"></i>
</div>
</div>
`).show();
$('#coverInput').val(res.data.url);
layer.msg('上传成功', { icon: 1 });
} else {
layer.msg(res.msg || '上传失败', { icon: 2 });
}
},
error: function () {
layer.closeAll('loading');
layer.msg('上传失败', { icon: 2 });
}
});
// 删除封面图片
window.removeCover = function () {
$('#coverList').empty().hide();
$('#coverInput').val('');
};
});
</script>
<style>
.layui-form-label {
width: 110px !important;
}
.layui-font-red {
margin-right: 4px;
}
.publish-section {
max-width: 800px;
margin: 0 auto;
}
.section-title {
font-size: 24px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
padding-bottom: 16px;
border-bottom: 1px solid #f0f0f0;
}
.section-desc {
color: #666;
margin-bottom: 32px;
font-size: 14px;
line-height: 1.5;
}
.layui-form-label {
width: 120px;
}
.layui-input-block {
margin-left: 150px;
}
.layui-form-item {
margin-bottom: 24px;
}
.layui-input,
.layui-textarea,
.layui-select {
border-radius: 6px;
border: 1px solid #e8e8e8;
transition: all 0.3s;
}
.layui-input:focus,
.layui-textarea:focus,
.layui-select:focus {
border-color: #1677ff;
box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
}
/* 富文本编辑器样式 */
#editor-wrapper {
border-radius: 6px;
overflow: hidden;
}
#toolbar-container {
background: #f8f9fa;
}
/* 封面图片上传样式 */
.cover-upload {
border: 2px dashed #d9d9d9;
border-radius: 8px;
padding: 20px;
text-align: center;
transition: all 0.3s;
cursor: pointer;
background: #fafafa;
}
.cover-upload:hover {
border-color: #1677ff;
background: #f8f9ff;
}
.cover-placeholder {
color: #999;
}
.cover-placeholder .layui-icon {
font-size: 48px;
color: #ccc;
margin-bottom: 16px;
}
.cover-placeholder p {
margin: 8px 0;
font-size: 16px;
color: #666;
}
.cover-placeholder span {
font-size: 12px;
color: #999;
}
#coverList {
display: flex;
justify-content: center;
margin-top: 16px;
}
#coverList .upload-item {
position: relative;
width: 200px;
height: 120px;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e8e8e8;
background: #fff;
}
#coverList .upload-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
#coverList .upload-actions {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
}
#coverList .upload-item:hover .upload-actions {
opacity: 1;
}
#coverList .upload-actions .layui-icon {
color: #fff;
font-size: 20px;
cursor: pointer;
}
.layui-btn {
border-radius: 6px;
padding: 0 24px;
height: 40px;
line-height: 40px;
font-size: 14px;
}
.layui-btn-primary {
border-color: #d9d9d9;
color: #666;
}
.layui-btn-primary:hover {
border-color: #1677ff;
color: #1677ff;
}
@media (max-width: 768px) {
.layui-form-label {
width: 100px;
}
.layui-input-block {
margin-left: 120px;
}
#coverList .upload-item {
width: 150px;
height: 90px;
}
.layui-layedit {
height: 300px !important;
}
}
</style>