sunshine255/Ai_Admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2.0

Browse Source
This commit is contained in:
Jane Doe
2024-09-25 12:18:07 +08:00
parent 3f369584fb
commit 9992293b9f
124 changed files with 2770 additions and 975 deletions
Download Patch File Download Diff File Expand all files Collapse all files

262
templates/admin/add-article.html Normal file
View File

@@ -0,0 +1,262 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>网站信息管理</title>
<link rel="stylesheet" href="https://file.guimiaokeji.com/layui/layui.css">
<script src="https://file.guimiaokeji.com/axios.js"></script>
<script src="https://file.guimiaokeji.com/qs.js"></script>
<style>
body {
background-color: #f5f5f5;
}
.layui-container {
background-color: #fff;
padding: 20px;
margin: 20px auto;
border-radius: 10px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
width: 100% !important;
}
.layui-col-md6 {
padding: 10px;
}
.layui-form-label {
width: auto;
font-weight: bold;
}
.layui-input-block {
margin-left: 150px;
}
.preview-img {
max-width: 200px;
margin-top: 10px;
}
.layui-form-item {
margin-bottom: 5px;
}
.layui-input-block {
background-color: #f3f3f3;
border-radius: 5px;
padding: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.layui-col-md6:nth-child(odd) .layui-input-block {
background-color: #e9f7f7;
}
.layui-col-md6:nth-child(even) .layui-input-block {
background-color: #e9f7f7;
}
textarea {
width: 100%;
height: 150px;
border: 1px solid #dcdcdc;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.layui-btn-container {
text-align: center;
margin-top: 20px;
}
/* 居中上传图片按钮和预览图片 */
.layui-input-block {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#preview_image {
margin-top: 10px;
display: block;
max-width: 200px;
border-radius: 5px;
}
#center{
position: relative;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="layui-container">
<form class="layui-form" action="" method="post">
{% csrf_token %}
<!-- 第一行 封面图片 -->
<div class="layui-row">
<div class="layui-col-md6" id="center">
<div class="layui-form-item">
<div class="layui-input-block">
<input type="text" name="image_url" class="layui-input" value="{{ article.image_url|default_if_none:'' }}" placeholder="请输入图片 URL 或点击上传图片">
{% if article.image_url %}
<img id="preview_image" src="{{ article.image_url }}" alt="封面图片" class="preview-img">
{% else %}
<img id="preview_image" style="display: none;" class="preview-img">
{% endif %}
<button type="button" class="layui-btn layui-btn-sm" id="upload_image">
<i class="layui-icon">&#xe67c;</i> 上传图片
</button>
</div>
</div>
</div>
</div>
<!-- 第二行 标题 -->
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label">english_title</label>
<div class="layui-input-block">
<input type="text" name="english_title" required lay-verify="required" placeholder="请输入英文标题" class="layui-input" value="{{ article.english_title }}">
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label">中文标题</label>
<div class="layui-input-block">
<input type="text" name="chinese_title" required lay-verify="required" placeholder="请输入中文标题" class="layui-input" value="{{ article.chinese_title }}">
</div>
</div>
</div>
</div>
<!-- 第三行 关键词 -->
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label">english_keywords</label>
<div class="layui-input-block">
<input type="text" name="english_keywords" placeholder="请输入英文关键词" class="layui-input" value="{{ article.english_keywords }}">
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label">中文关键词</label>
<div class="layui-input-block">
<input type="text" name="chinese_keywords" placeholder="请输入中文关键词" class="layui-input" value="{{ article.chinese_keywords }}">
</div>
</div>
</div>
</div>
<!-- 第四行 描述 -->
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label">english_content</label>
<div class="layui-input-block">
<textarea id="english_description" name="english_content" style="display: none;">{{ article.english_content }}</textarea>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label">中文描述</label>
<div class="layui-input-block">
<textarea id="chinese_description" name="chinese_content" style="display: none;">{{ article.chinese_content }}</textarea>
</div>
</div>
</div>
</div>
<!-- 提交按钮 -->
<div class="layui-form-item layui-btn-container" style="text-align: center;">
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveArticle">保存修改</button>
</div>
</form>
</div>
<script src="https://file.guimiaokeji.com/layui/jquery-3.6.0.min.js"></script>
<script src="https://file.guimiaokeji.com/layui/layui.js"></script>
<script>
layui.use(['form', 'layedit', 'upload'], function () {
var form = layui.form;
var layedit = layui.layedit;
var upload = layui.upload;
var $ = layui.jquery;
layedit.set({
uploadImage: {
url: '/api/upload_article_image/' //接口url
,type: 'post' //默认post
}
});
// 初始化 layedit 编辑器
var englishEditor = layedit.build('english_description', {
height: 250,
tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'image']
});
var chineseEditor = layedit.build('chinese_description', {
height: 250,
tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'image']
});
// 表单提交前同步内容
form.on('submit(saveArticle)', function(data) {
// 获取编辑器内容
data.field.english_content = layedit.getContent(englishEditor);
data.field.chinese_content = layedit.getContent(chineseEditor);
// 使用 Axios 提交表单
axios.post('', data.field)
.then(function(response) {
if (response.data.code === 200) {
layer.msg(response.data.message, {
time: 1000 // 设置显示时间为 1000 毫秒（1 秒）
}, function() {
// 在消息框关闭后执行的操作
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
});
} else {
layer.msg('保存失败: ' + response.data.message);
}
})
.catch(function(error) {
layer.msg('请求失败: ' + error.message);
});
return false; // 阻止表单默认提交
});
// 图片上传功能
upload.render({
elem: '#upload_image',
url: '/api/upload_article_image/', // 图片上传接口
field: 'file',
done: function (res) {
if (res.code === 0) {
$('#preview_image').attr('src', res.data.src).show();
$('input[name="image_url"]').val(res.data.src);
layer.msg('图片上传成功');
} else {
layer.msg('图片上传失败: ' + res.message);
}
},
error: function () {
layer.msg('图片上传失败');
}
});
});
</script>
</body>
</html>