更新界面详情

This commit is contained in:
李志强 2025-05-28 17:25:16 +08:00
parent 5d791d84ed
commit 352540b500
13 changed files with 1742 additions and 1312 deletions

View File

@ -4,11 +4,14 @@
*/
namespace app\index\controller;
use app\index\controller\BaseController;
use app\index\model\Users;
use think\facade\Db;
use think\facade\View;
use think\facade\Request;
use app\index\model\Articles\Articles;
use app\index\model\Articles\ArticlesCategory;
use app\index\model\Authors\Authors;
use app\index\model\Resources\Resources;
class ArticlesController extends BaseController
{
@ -210,16 +213,43 @@ class ArticlesController extends BaseController
$cateName = ArticlesCategory::where('id', $article['cate'])
->value('name');
// 获取作者信息
$authorInfo = Users::where('name', $article['author'])->find();
if ($authorInfo) {
// 统计作者的文章数
$articleCount = Articles::where('author', $article['author'])->count();
// 统计作者的资源数
$resourceCount = Resources::where('uploader', $article['author'])->count();
$authorData = [
'avatar' => $authorInfo['avatar'] ?: '/static/images/avatar.png',
'name' => $authorInfo['name'],
'resource_count' => $resourceCount,
'article_count' => $articleCount
];
} else {
$authorData = [
'avatar' => '/static/images/avatar.png',
'name' => $article['author'],
'resource_count' => 0,
'article_count' => 0
];
}
// 获取上一篇和下一篇文章
$prevArticle = Articles::where('id', '<', $id)
->where('delete_time', null)
->where('status', '<>', 3)
->where('cate', $article['cate'])
->field(['id', 'title'])
->order('id DESC')
->find();
$nextArticle = Articles::where('id', '>', $id)
->where('delete_time', null)
->where('status', '<>', 3)
->where('cate', $article['cate'])
->field(['id', 'title'])
->order('id ASC')
->find();
@ -233,7 +263,6 @@ class ArticlesController extends BaseController
->field([
'a.id',
'a.title',
'a.desc',
'IF(a.image IS NULL OR a.image = "", c.image, a.image) as image'
])
->order('a.id DESC')
@ -241,12 +270,13 @@ class ArticlesController extends BaseController
->select()
->toArray();
// 如果是 AJAX 请求,返回 JSON 数据
if (Request::isAjax()) {
// 如果是 POST 请求,返回 JSON 数据
if (Request::isPost()) {
return json([
'code' => 1,
'msg' => '获取成功',
'data' => [
'authorInfo' => $authorData,
'article' => $article,
'cateName' => $cateName,
'prevArticle' => $prevArticle,
@ -256,8 +286,9 @@ class ArticlesController extends BaseController
]);
}
// 非 AJAX 请求返回视图
// GET 请求返回视图
View::assign([
'authorInfo' => $authorData,
'article' => $article,
'cateName' => $cateName,
'prevArticle' => $prevArticle,
@ -417,4 +448,57 @@ class ArticlesController extends BaseController
return json(['code' => 0, 'msg' => '更新失败:' . $e->getMessage()]);
}
}
//获取作者信息
public function getAuthorInfo()
{
if (!Request::isPost()) {
return json(['code' => 0, 'msg' => '非法请求']);
}
$authorName = Request::post('name');
if (empty($authorName)) {
return json(['code' => 0, 'msg' => '作者名称不能为空']);
}
try {
// 获取作者基本信息
$author = Db::name('users')
->where('name', $authorName)
->field('id, name, avatar')
->find();
if (!$author) {
return json(['code' => 0, 'msg' => '作者不存在']);
}
// 获取作者发布的资源数量
$resourceCount = Db::name('resources')
->where('user_id', $author['id'])
->where('delete_time', null)
->where('status', 2) // 假设2是已发布状态
->count();
// 获取作者发布的文章数量
$articleCount = Db::name('articles')
->where('author', $authorName)
->where('delete_time', null)
->where('status', 2) // 假设2是已发布状态
->count();
return json([
'code' => 1,
'msg' => '获取成功',
'data' => [
'avatar' => $author['avatar'],
'name' => $author['name'],
'resource_count' => $resourceCount,
'article_count' => $articleCount
]
]);
} catch (\Exception $e) {
return json(['code' => 0, 'msg' => '获取作者信息失败:' . $e->getMessage()]);
}
}
}

View File

@ -76,7 +76,7 @@ abstract class BaseController
'id' => $user->id,
'name' => $user->name,
'account' => $user->account,
'avatar' => $user->avatar ?? '/static/images/default-avatar.png',
'avatar' => $user->avatar ?? '/static/images/avatar.png',
'is_login' => true,
'last_login_time' => $user->last_login_time
];

View File

@ -227,12 +227,16 @@ class GameController extends BaseController
$prevGame = Resources::where('id', '<', $id)
->where('delete_time', null)
->where('status', 1)
->where('cate', $game['cate'])
->field(['id', 'title'])
->order('id DESC')
->find();
$nextGame = Resources::where('id', '>', $id)
->where('delete_time', null)
->where('status', 1)
->where('cate', $game['cate'])
->field(['id', 'title'])
->order('id ASC')
->find();
@ -247,7 +251,6 @@ class GameController extends BaseController
->field([
'g.id',
'g.title',
'g.desc',
'IF(g.icon IS NULL OR g.icon = "", c.icon, g.icon) as icon'
])
->order('g.id DESC')

View File

@ -11,6 +11,8 @@ use think\facade\Request;
use app\index\model\Resources\Resources;
use app\index\model\Resources\ResourcesCategory;
use app\index\model\Attachments;
use app\index\model\Users;
use app\index\model\Articles\Articles;
class ProgramController extends BaseController
{
@ -236,16 +238,43 @@ class ProgramController extends BaseController
$cateName = ResourcesCategory::where('id', $program['cate'])
->value('name');
// 获取作者信息
$authorInfo = Users::where('name', $program['uploader'])->find();
if ($authorInfo) {
// 统计作者的文章数
$articleCount = Articles::where('author', $program['uploader'])->count();
// 统计作者的资源数
$resourceCount = Resources::where('uploader', $program['uploader'])->count();
$authorData = [
'avatar' => $authorInfo['avatar'] ?: '/static/images/avatar.png',
'name' => $authorInfo['name'],
'resource_count' => $resourceCount,
'article_count' => $articleCount
];
} else {
$authorData = [
'avatar' => '/static/images/avatar.png',
'name' => $program['uploader'],
'resource_count' => 0,
'article_count' => 0
];
}
// 获取上一个和下一个程序
$prevProgram = Resources::where('id', '<', $id)
->where('delete_time', null)
->where('status', 1)
->where('cate', $program['cate'])
->field(['id', 'title'])
->order('id DESC')
->find();
$nextProgram = Resources::where('id', '>', $id)
->where('delete_time', null)
->where('status', 1)
->where('cate', $program['cate'])
->field(['id', 'title'])
->order('id ASC')
->find();
@ -259,7 +288,6 @@ class ProgramController extends BaseController
->field([
'p.id',
'p.title',
'p.desc',
'COALESCE(p.icon, c.icon) as icon'
])
->order('p.id DESC')
@ -273,6 +301,7 @@ class ProgramController extends BaseController
'code' => 1,
'msg' => '获取成功',
'data' => [
'authorInfo' => $authorData,
'program' => $program,
'cateName' => $cateName,
'prevProgram' => $prevProgram,
@ -284,6 +313,7 @@ class ProgramController extends BaseController
// 非 AJAX 请求返回视图
View::assign([
'authorInfo' => $authorData,
'program' => $program,
'cateName' => $cateName,
'prevProgram' => $prevProgram,

View File

@ -6,87 +6,346 @@
<div class="location-item">
<a href="/">首页</a>
<span>></span>
<a href="/index/articles/index" id="cateLink"></a>
<a href="/index/articles/index">{$cateName}</a>
</div>
</div>
</div>
<div class="article-detail-container">
<div class="article-header">
<h1 class="article-title" id="articleTitle"></h1>
<div class="trans" id="transDiv" style="display: none;">转载至:<span id="transUrl"></span></div>
<div class="article-meta">
<span class="article-author"><i class="fa fa-user"></i> <span id="articleAuthor"></span></span>
<span class="article-date"><i class="fa fa-calendar"></i> <span id="articleDate"></span></span>
<span class="article-views"><i class="fa-solid fa-eye"></i> <span id="articleViews"></span> 阅读</span>
<div class="body-container">
<div class="article-detail-container">
<div class="article-header">
<h1 class="article-title">{$article.title}</h1>
{if $article.is_trans eq 1 && $article.transurl}
<div class="trans">转载至:<span class="trans-url" data-url="{$article.transurl}">{$article.transurl}</span>
</div>
{/if}
<div class="article-meta">
<span class="article-author"><i class="fa fa-user"></i> <span>{$article.author}</span></span>
<span class="article-date"><i class="fa fa-calendar"></i>
<span>{$article.create_time|date="Y-m-d"}</span></span>
<span class="article-views"><i class="fa-solid fa-eye"></i> <span>{$article.views}</span> 阅读</span>
</div>
</div>
</div>
<div class="article-content" id="articleContent">
</div>
<div class="article-content">
{$article.content|raw}
</div>
<div class="disclaimers">
<div class="disclaimer-item">
<div class="disclaimer-title">免责声明:</div>
<div class="disclaimer-content">
<?php echo $config['disclaimers'] ?>
<div class="disclaimers">
<div class="disclaimer-item">
<div class="disclaimer-title">免责声明:</div>
<div class="disclaimer-content">
<?php echo $config['disclaimers'] ?>
</div>
</div>
</div>
<div class="article-tags">
<span class="tag-label">标签:</span>
<div>
{if $article.tags}
{volist name="article.tags|explode=',',','" id="tag"}
<span class="tag-item">{$tag}</span>
{/volist}
{else}
<span class="no-tags">暂无标签</span>
{/if}
</div>
</div>
<div class="article-actions">
<div class="action-item like-btn" data-id="{$article.id}">
<i class="fa fa-thumbs-up"></i>
<span class="action-text">点赞</span>
<span class="action-count">{$article.likes}</span>
</div>
<div class="action-item share-btn">
<i class="fa fa-share-alt"></i>
<span class="action-text">分享</span>
</div>
</div>
<div class="article-navigation">
<div class="prev-article">
{if $prevArticle}
<a href="/index/articles/detail?id={$prevArticle.id}">
<i class="fa fa-arrow-left"></i> 上一篇:{$prevArticle.title}
</a>
{else}
<span class="disabled"><i class="fa fa-arrow-left"></i> 没有上一篇了</span>
{/if}
</div>
<div class="next-article">
{if $nextArticle}
<a href="/index/articles/detail?id={$nextArticle.id}">
下一篇:{$nextArticle.title} <i class="fa fa-arrow-right"></i>
</a>
{else}
<span class="disabled">没有下一篇了 <i class="fa fa-arrow-right"></i></span>
{/if}
</div>
</div>
<div class="related-articles">
<h3 class="related-title">相关推荐</h3>
<div class="related-list">
{volist name="relatedArticles" id="related"}
<div class="related-item">
<a href="/index/articles/detail?id={$related.id}">
<div class="related-image">
<img src="{$related.image}" alt="{$related.title}">
</div>
<div class="related-info">
<div class="related-item-title">{$related.title}</div>
</div>
</a>
</div>
{/volist}
</div>
</div>
</div>
<div class="article-detail-right">
<div class="aboutauthor">
<div class="aboutauthor-title">关于作者</div>
<div class="aboutauthor-main">
<div class="aboutauthor-main-top">
<div class="aboutauthor-avatar">
<img src="{$authorInfo.avatar}" alt="作者头像">
</div>
<div class="aboutauthor-info">
<div class="author-name">{$authorInfo.name}</div>
</div>
</div>
<div class="aboutauthor-main-middle">
<div class="author-stats">
<div class="article-tags">
<span class="tag-label">标签:</span>
<div id="articleTags"></div>
</div>
<div class="article-actions">
<div class="action-item like-btn" id="likeBtn">
<i class="fa fa-thumbs-up"></i>
<span class="action-text">点赞</span>
<span class="action-count" id="articleLikes">0</span>
</div>
<div class="action-item share-btn" id="shareBtn">
<i class="fa fa-share-alt"></i>
<span class="action-text">分享</span>
</div>
</div>
<div class="article-navigation">
<div class="prev-article" id="prevArticle">
</div>
<div class="next-article" id="nextArticle">
</div>
</div>
<div class="related-articles">
<h3 class="related-title">相关推荐</h3>
<div class="related-list" id="relatedArticles">
<div class="author-stats-item">
<h6>资源</h6>
<span class="count">{$authorInfo.resource_count}</span>
</div>
<div class="author-stats-item">
<h6>文章</h6>
<span class="count">{$authorInfo.article_count}</span>
</div>
<div class="author-stats-item">
<h6>粉丝</h6>
<span class="count">
0
</span>
</div>
</div>
</div>
</div>
<div class="aboutauthor-btn">
<button class="follow-btn">
<i class="fa fa-user-plus"></i> 关注他
</button>
<button class="message-btn">
<i class="fa fa-envelope"></i> 发私信
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 返回顶部按钮 -->
<div class="go-to-top" id="goToTop">
<div class="go-to-top">
<i class="layui-icon-up"></i>
</div>
{include file="component/footer" /}
<script>
// 更新访问次数
async function updateArticleViews(articleId) {
try {
await fetch('/index/articles/updateViews', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: articleId })
});
} catch (error) {
console.error('更新访问次数失败:', error);
}
}
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function () {
const articleId = '{$article.id}';
// 更新访问次数
updateArticleViews(articleId);
// 点赞功能
document.querySelector('.like-btn').addEventListener('click', async function () {
try {
const response = await fetch('/index/articles/like?id=' + articleId, {
method: 'POST',
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
const result = await response.json();
if (result.code === 1) {
const countElement = this.querySelector('.action-count');
countElement.textContent = parseInt(countElement.textContent) + 1;
this.classList.add('liked');
this.querySelector('i').style.color = '#f57005';
layer.msg('点赞成功', { icon: 1 });
} else {
layer.msg(result.msg, { icon: 2 });
}
} catch (error) {
layer.msg('点赞失败,请稍后重试', { icon: 2 });
}
});
// 分享功能
document.querySelector('.share-btn').addEventListener('click', function () {
const url = window.location.href;
navigator.clipboard.writeText(url).then(() => {
layer.msg('链接已复制到剪贴板', { icon: 1 });
}).catch(() => {
layer.msg('复制失败,请手动复制', { icon: 2 });
});
});
// 转载链接点击
document.querySelector('.trans-url')?.addEventListener('click', function () {
const url = this.dataset.url;
if (url) {
window.open(url, '_blank');
}
});
// 返回顶部
const goToTop = document.querySelector('.go-to-top');
window.addEventListener('scroll', function () {
if (window.scrollY > 300) {
goToTop.classList.add('show');
} else {
goToTop.classList.remove('show');
}
});
goToTop.addEventListener('click', function () {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
});
</script>
<style>
.location {
max-width: 1000px;
max-width: 1200px;
margin: 30px auto;
}
.main .body-container {
display: flex;
max-width: 1200px;
margin: 30px auto;
gap: 30px;
}
.main .body-container .article-detail-right {
width: 30%;
}
.article-detail-container {
max-width: 1000px;
margin: 30px auto;
padding: 50px;
background: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
width: 70%;
}
.main .body-container .article-detail-right .aboutauthor {
background: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.main .body-container .article-detail-right .aboutauthor-title {
height: 60px;
display: flex;
align-items: center;
padding-left: 20px;
border-bottom: 1px solid #eee;
font-weight: 700;
}
.main .body-container .article-detail-right .aboutauthor-main {
display: flex;
flex-direction: column;
}
.main .body-container .article-detail-right .aboutauthor-main .aboutauthor-main-top {
display: flex;
align-items: center;
padding-left: 20px !important;
padding: 20px 0;
border-bottom: 1px solid #efefef;
margin-bottom: 20px;
}
.main .body-container .article-detail-right .aboutauthor-main .aboutauthor-main-top .aboutauthor-avatar {
margin-right: 12px;
}
.main .body-container .article-detail-right .aboutauthor-main .aboutauthor-main-top .aboutauthor-info .author-name {
font-size: 20px;
font-weight: 700;
}
.main .body-container .article-detail-right .aboutauthor-main .aboutauthor-main-top .aboutauthor-avatar img {
width: 60px;
height: 60px;
border-radius: 4px;
box-sizing: border-box;
margin: 0px;
min-width: 0px;
max-width: 100%;
background-color: #fff;
}
.main .body-container .article-detail-right .aboutauthor-main .aboutauthor-main-middle {
/* margin-left: 20px; */
}
.main .body-container .article-detail-right .aboutauthor-main .aboutauthor-main-middle .author-stats {
display: flex;
justify-content: space-evenly;
}
.main .body-container .article-detail-right .aboutauthor-main .aboutauthor-main-middle .author-stats .author-stats-item {
display: flex;
flex-direction: column;
align-items: center;
}
.main .body-container .article-detail-right .aboutauthor-main .aboutauthor-main-middle .author-stats .author-stats-item .count {
/* font-size: 30px; */
font-weight: 700;
}
.main .body-container .article-detail-right .aboutauthor-btn {
display: flex;
justify-content: space-evenly;
padding: 20px 0;
}
.main .body-container .article-detail-right .aboutauthor-btn .follow-btn {
background-color: #0081ff;
color: #fff;
padding: 10px 20px;
border-radius: 8px;
border: none;
}
.main .body-container .article-detail-right .aboutauthor-btn .message-btn {
color: #0081ff;
padding: 10px 20px;
border-radius: 8px;
border: 1px solid #eee;
}
.article-header {
@ -450,226 +709,4 @@
}
</style>
<script>
// 格式化日期
function formatDate(timestamp) {
const date = new Date(timestamp * 1000);
return date.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
}
// 渲染文章详情
function renderArticleDetail(data) {
// 渲染分类链接
document.getElementById('cateLink').textContent = data.cateName;
// 渲染文章标题
document.getElementById('articleTitle').textContent = data.article.title;
// 渲染文章元信息
document.getElementById('articleAuthor').textContent = data.article.author;
document.getElementById('articleDate').textContent = formatDate(data.article.create_time);
document.getElementById('articleViews').textContent = data.article.views;
// 渲染文章内容
document.getElementById('articleContent').innerHTML = data.article.content;
// 渲染标签
const tagsContainer = document.getElementById('articleTags');
if (data.article.tags && data.article.tags.length > 0) {
tagsContainer.innerHTML = data.article.tags.map(tag =>
`<span class="tag-item">${tag}</span>`
).join('');
} else {
tagsContainer.innerHTML = '<span class="no-tags">暂无标签</span>';
}
// 渲染点赞数
document.getElementById('articleLikes').textContent = data.article.likes || 0;
// 渲染上一篇
const prevArticle = document.getElementById('prevArticle');
if (data.prevArticle) {
prevArticle.innerHTML = `
<a href="/index/articles/detail?id=${data.prevArticle.id}">
<i class="fa fa-arrow-left"></i> 上一篇:${data.prevArticle.title}
</a>
`;
} else {
prevArticle.innerHTML = '<span class="disabled"><i class="fa fa-arrow-left"></i> 没有上一篇了</span>';
}
// 渲染下一篇
const nextArticle = document.getElementById('nextArticle');
if (data.nextArticle) {
nextArticle.innerHTML = `
<a href="/index/articles/detail?id=${data.nextArticle.id}">
下一篇:${data.nextArticle.title} <i class="fa fa-arrow-right"></i>
</a>
`;
} else {
nextArticle.innerHTML = '<span class="disabled">没有下一篇了 <i class="fa fa-arrow-right"></i></span>';
}
// 渲染相关文章
const relatedArticles = document.getElementById('relatedArticles');
if (data.relatedArticles && data.relatedArticles.length > 0) {
relatedArticles.innerHTML = data.relatedArticles.map(article => `
<div class="related-item">
<a href="/index/articles/detail?id=${article.id}">
<div class="related-image">
<img src="${article.image}" alt="${article.title}">
</div>
<div class="related-info">
<div class="related-item-title">${article.title}</div>
<div class="related-item-desc">${article.desc || ''}</div>
</div>
</a>
</div>
`).join('');
} else {
relatedArticles.innerHTML = '<div class="no-related">暂无相关文章</div>';
}
// 处理转载信息
if (data.article.is_trans === 1 && data.article.transurl) {
const transDiv = document.getElementById('transDiv');
const transUrlSpan = document.getElementById('transUrl');
transUrlSpan.textContent = data.article.transurl;
transDiv.style.display = 'block';
// 添加点击事件,在新窗口打开原文章
transUrlSpan.style.cursor = 'pointer';
transUrlSpan.style.color = '#007bff';
transUrlSpan.addEventListener('click', function() {
window.open(data.article.transurl, '_blank');
});
}
}
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function () {
// 获取文章ID
const articleId = new URLSearchParams(window.location.search).get('id');
if (!articleId) {
alert('文章ID不存在');
return;
}
// 获取文章详情
fetch(`/index/articles/detail?id=${articleId}`, {
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => response.json())
.then(result => {
if (result.code === 1) {
renderArticleDetail(result.data);
// 更新访问次数
updateArticleViews(articleId);
} else {
console.error('API error:', result.msg);
alert(result.msg || '获取文章详情失败');
}
})
.catch(error => {
console.error('获取文章详情失败:', error);
alert('获取文章详情失败,请检查网络连接或刷新页面重试');
});
// 点赞功能
const likeBtn = document.getElementById('likeBtn');
if (likeBtn) {
likeBtn.addEventListener('click', function () {
fetch('/index/articles/like?id=' + articleId, {
method: 'POST',
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => response.json())
.then(data => {
if (data.code === 1) {
const countElement = document.getElementById('articleLikes');
if (countElement) {
let count = parseInt(countElement.textContent) || 0;
countElement.textContent = count + 1;
}
likeBtn.classList.add('liked');
likeBtn.querySelector('i').style.color = '#f57005';
layer.msg('点赞成功', { icon: 1 });
} else {
layer.msg('点赞失败:' + data.msg, { icon: 2 });
}
})
.catch(error => {
console.error('点赞请求失败:', error);
layer.msg('点赞失败,请稍后重试', { icon: 2 });
});
});
}
// 返回顶部功能
const goToTop = document.getElementById('goToTop');
window.addEventListener('scroll', function () {
if (window.pageYOffset > 300) {
goToTop.classList.add('show');
} else {
goToTop.classList.remove('show');
}
});
goToTop.addEventListener('click', function () {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 分享功能
const shareBtn = document.getElementById('shareBtn');
if (shareBtn) {
shareBtn.addEventListener('click', function () {
const currentUrl = window.location.href;
const tempInput = document.createElement('input');
tempInput.value = currentUrl;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
layer.msg('链接已复制到剪贴板', { icon: 1 });
});
}
});
// 更新文章访问次数
function updateArticleViews(articleId) {
fetch('/index/articles/updateViews', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
id: articleId
})
})
.then(response => response.json())
.then(result => {
if (result.code === 1) {
const viewsElement = document.getElementById('articleViews');
if (viewsElement) {
viewsElement.textContent = result.data.views;
}
}
})
.catch(error => {
console.error('更新访问次数失败:', error);
});
}
</script>
{include file="component/foot" /}

View File

@ -38,10 +38,12 @@ $loginStatus = [
</div>
<div class="main-menu__nav">
<ul class="main-menu__list">
<li><a href="/index.html">首页</a></li>
<li><a href="/about.html">关于我们</a></li>
<li><a href="/products.html">产品服务</a></li>
<li><a href="/contact.html">联系我们</a></li>
<li><a href="/">首页</a></li>
<li><a href="/index/articles/index?cateid=1">站点资讯</a></li>
<li><a href="/index/articles/index?cateid=3">技术文章</a></li>
<li><a href="/index/program/index?cateid=2">办公资源</a></li>
<li><a href="/index/program/index?cateid=1">程序下载</a></li>
<li><a href="/index/game/index?cateid=8">游戏下载</a></li>
</ul>
</div>
<div class="main-menu__right">
@ -93,10 +95,12 @@ $loginStatus = [
</div>
<div class="sticky-nav__menu">
<ul>
<li><a href="/index.html">首页</a></li>
<li><a href="/about.html">关于我们</a></li>
<li><a href="/products.html">产品服务</a></li>
<li><a href="/contact.html">联系我们</a></li>
<li><a href="/">首页</a></li>
<li><a href="/index/articles/index?cateid=1">站点资讯</a></li>
<li><a href="/index/articles/index?cateid=3">技术文章</a></li>
<li><a href="/index/program/index?cateid=2">办公资源</a></li>
<li><a href="/index/program/index?cateid=1">程序下载</a></li>
<li><a href="/index/game/index?cateid=8">游戏下载</a></li>
</ul>
</div>
<div class="sticky-nav__right">

View File

@ -30,7 +30,7 @@ $loginStatus = [
</div>
<div style="display: flex;flex-direction: column;">
<div class="topbar-one">
<!-- <div class="topbar-one">
<div class="container">
<div style="width: 70%;">
<ul class="list-unstyled topbar-one__info">
@ -52,19 +52,21 @@ $loginStatus = [
</div>
</div>
</div>
</div>
</div> -->
<!-- 导航栏 -->
<div class="main-menu">
<div class="container">
<div class="main-menu__logo">
<a href="index.html"><img src="{$config['logo1']}" width="186" alt="Logo"></a>
<a href="/"><img src="{$config['logo1']}" width="186" alt="Logo"></a>
</div>
<div class="main-menu__nav">
<ul class="main-menu__list">
<li><a href="/index.html">首页</a></li>
<li><a href="/about.html">关于我们</a></li>
<li><a href="/products.html">产品服务</a></li>
<li><a href="/contact.html">联系我们</a></li>
<li><a href="/">首页</a></li>
<li><a href="/index/articles/index?cateid=1">站点资讯</a></li>
<li><a href="/index/articles/index?cateid=3">技术文章</a></li>
<li><a href="/index/program/index?cateid=2">办公资源</a></li>
<li><a href="/index/program/index?cateid=1">程序下载</a></li>
<li><a href="/index/game/index?cateid=8">游戏下载</a></li>
</ul>
</div>
<div class="main-menu__right">
@ -119,14 +121,16 @@ $loginStatus = [
<div class="sticky-nav" style="display: none;">
<div class="container">
<div class="sticky-nav__logo">
<a href="index.html"><img src="{$config['logo1']}" width="150" alt="Logo"></a>
<a href="/"><img src="{$config['logo1']}" width="150" alt="Logo"></a>
</div>
<div class="sticky-nav__menu">
<ul>
<li><a href="/index.html">首页</a></li>
<li><a href="/about.html">关于我们</a></li>
<li><a href="/products.html">产品服务</a></li>
<li><a href="/contact.html">联系我们</a></li>
<li><a href="/">首页</a></li>
<li><a href="/index/articles/index?cateid=1">站点资讯</a></li>
<li><a href="/index/articles/index?cateid=3">技术文章</a></li>
<li><a href="/index/program/index?cateid=2">办公资源</a></li>
<li><a href="/index/program/index?cateid=1">程序下载</a></li>
<li><a href="/index/game/index?cateid=8">游戏下载</a></li>
</ul>
</div>
<div class="sticky-nav__right">

View File

@ -6,103 +6,334 @@
<div class="location-item">
<a href="/">首页</a>
<span>></span>
<a href="/index/program/index" id="cateLink"></a>
<a href="/index/program/index">{$cateName}</a>
</div>
</div>
</div>
<div class="program-detail-container">
<div class="program-header">
<h1 class="program-title" id="programTitle"></h1>
<div class="program-meta">
<span class="program-author"><i class="fa fa-user"></i> <span id="programAuthor"></span></span>
<span class="program-date"><i class="fa fa-calendar"></i> <span id="programDate"></span></span>
<span class="program-views"><i class="fa-solid fa-eye"></i> <span id="programViews"></span></span>
<span class="program-downloads"><i class="fa-solid fa-download"></i> <span id="programDownloads"></span></span>
<div class="body-container">
<div class="program-detail-container">
<div class="program-header">
<h1 class="program-title">{$program.title}</h1>
<div class="program-meta">
<span class="program-author"><i class="fa fa-user"></i> <span>{$program.author}</span></span>
<span class="program-date"><i class="fa fa-calendar"></i> <span>{$program.create_time|date="Y-m-d"}</span></span>
<span class="program-views"><i class="fa-solid fa-eye"></i> <span>{$program.views}</span> 阅读</span>
<span class="program-downloads"><i class="fa-solid fa-download"></i> <span>{$program.downloads}</span> 下载</span>
</div>
</div>
</div>
<div class="program-content" id="programContent">
</div>
<div class="program-content">
{$program.content|raw}
</div>
<div class="program-info">
<div class="info-item">
<span class="info-label">软件大小:</span>
<span id="programSize"></span>
<div class="program-info">
<div class="info-item">
<span class="info-label">软件大小:</span>
<span>{$program.size|default='未知'}</span>
</div>
<div class="info-item">
<span class="info-label">运行环境:</span>
<span>{$program.environment|default='通用'}</span>
</div>
<div class="info-item">
<span class="info-label">更新时间:</span>
<span>{$program.update_time|date="Y-m-d"}</span>
</div>
<div class="info-item">
<span class="info-label">软件版本:</span>
<span>{$program.version|default='1.0.0'}</span>
</div>
</div>
<div class="info-item">
<span class="info-label">运行环境:</span>
<span id="programEnvironment"></span>
</div>
<div class="info-item">
<span class="info-label">更新时间:</span>
<span id="programUpdateTime"></span>
</div>
<div class="info-item">
<span class="info-label">软件版本:</span>
<span id="programVersion"></span>
</div>
</div>
<div class="program-content">
</div>
<div class="program-actions">
<div class="action-item download-btn" id="downloadBtn">
<i class="fa fa-download"></i>
<span class="action-text">立即下载</span>
<div class="disclaimers">
<div class="disclaimer-item">
<div class="disclaimer-title">免责声明:</div>
<div class="disclaimer-content">
<?php echo $config['disclaimers'] ?>
</div>
</div>
</div>
<div class="action-item share-btn" id="shareBtn">
<i class="fa fa-share-alt"></i>
<span class="action-text">分享</span>
</div>
</div>
<div class="disclaimers">
<div class="disclaimer-item">
<div class="disclaimer-title">免责声明:</div>
<div class="disclaimer-content">
<?php echo $config['disclaimers'] ?>
<div class="program-actions">
<div class="action-item download-btn" data-id="{$program.id}">
<i class="fa fa-download"></i>
<span class="action-text">下载</span>
<span class="action-count">{$program.downloads}</span>
</div>
<div class="action-item share-btn">
<i class="fa fa-share-alt"></i>
<span class="action-text">分享</span>
</div>
</div>
<div class="program-navigation">
<div class="prev-program">
{if $prevProgram}
<a href="/index/program/detail?id={$prevProgram.id}">
<i class="fa fa-arrow-left"></i> 上一篇:{$prevProgram.title}
</a>
{else}
<span class="disabled"><i class="fa fa-arrow-left"></i> 没有上一篇了</span>
{/if}
</div>
<div class="next-program">
{if $nextProgram}
<a href="/index/program/detail?id={$nextProgram.id}">
下一篇:{$nextProgram.title} <i class="fa fa-arrow-right"></i>
</a>
{else}
<span class="disabled">没有下一篇了 <i class="fa fa-arrow-right"></i></span>
{/if}
</div>
</div>
<div class="related-programs">
<h3 class="related-title">相关推荐</h3>
<div class="related-list">
{volist name="relatedPrograms" id="related"}
<div class="related-item">
<a href="/index/program/detail?id={$related.id}">
<div class="related-image">
<img src="{$related.icon}" alt="{$related.title}">
</div>
<div class="related-info">
<div class="related-item-title">{$related.title}</div>
</div>
</a>
</div>
{/volist}
</div>
</div>
</div>
<div class="program-navigation">
<div class="prev-program" id="prevProgram">
</div>
<div class="next-program" id="nextProgram">
</div>
</div>
<div class="related-programs">
<h3 class="related-title">相关推荐</h3>
<div class="related-list" id="relatedPrograms">
<div class="program-detail-right">
<div class="aboutauthor">
<div class="aboutauthor-title">关于作者</div>
<div class="aboutauthor-main">
<div class="aboutauthor-main-top">
<div class="aboutauthor-avatar">
<img src="{$authorInfo.avatar}" alt="作者头像">
</div>
<div class="aboutauthor-info">
<div class="author-name">{$authorInfo.name}</div>
</div>
</div>
<div class="aboutauthor-main-middle">
<div class="author-stats">
<div class="author-stats-item">
<h6>资源</h6>
<span class="count">{$authorInfo.resource_count}</span>
</div>
<div class="author-stats-item">
<h6>文章</h6>
<span class="count">{$authorInfo.article_count}</span>
</div>
<div class="author-stats-item">
<h6>粉丝</h6>
<span class="count">0</span>
</div>
</div>
</div>
</div>
<div class="aboutauthor-btn">
<button class="follow-btn">
<i class="fa fa-user-plus"></i> 关注他
</button>
<button class="message-btn">
<i class="fa fa-envelope"></i> 发私信
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 返回顶部按钮 -->
<div class="go-to-top" id="goToTop">
<i class="layui-icon layui-icon-top"></i>
<div class="go-to-top">
<i class="layui-icon-up"></i>
</div>
{include file="component/footer" /}
<script>
// 更新访问次数
async function updateProgramViews(programId) {
try {
await fetch('/index/program/updateViews', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: programId })
});
} catch (error) {
console.error('更新访问次数失败:', error);
}
}
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function () {
const programId = '{$program.id}';
// 更新访问次数
updateProgramViews(programId);
// 下载功能
document.querySelector('.download-btn').addEventListener('click', async function () {
try {
const response = await fetch('/index/program/download?id=' + programId, {
method: 'POST',
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
const result = await response.json();
if (result.code === 1 && result.data && result.data.fileurl) {
const downloadUrl = window.location.origin + result.data.fileurl;
window.location.href = downloadUrl;
} else {
layer.msg('下载地址不存在', { icon: 2 });
}
} catch (error) {
layer.msg('下载失败,请稍后重试', { icon: 2 });
}
});
// 分享功能
document.querySelector('.share-btn').addEventListener('click', function () {
const url = window.location.href;
navigator.clipboard.writeText(url).then(() => {
layer.msg('链接已复制到剪贴板', { icon: 1 });
}).catch(() => {
layer.msg('复制失败,请手动复制', { icon: 2 });
});
});
// 返回顶部
const goToTop = document.querySelector('.go-to-top');
window.addEventListener('scroll', function () {
if (window.scrollY > 300) {
goToTop.classList.add('show');
} else {
goToTop.classList.remove('show');
}
});
goToTop.addEventListener('click', function () {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
});
</script>
<style>
.location {
max-width: 1000px;
max-width: 1200px;
margin: 30px auto;
}
.program-detail-container {
max-width: 1000px;
.main .body-container {
display: flex;
max-width: 1200px;
margin: 30px auto;
gap: 30px;
}
.main .body-container .program-detail-right {
width: 30%;
}
.program-detail-container {
padding: 50px;
background: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
width: 70%;
}
.main .body-container .program-detail-right .aboutauthor {
background: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.main .body-container .program-detail-right .aboutauthor-title {
height: 60px;
display: flex;
align-items: center;
padding-left: 20px;
border-bottom: 1px solid #eee;
font-weight: 700;
}
.main .body-container .program-detail-right .aboutauthor-main {
display: flex;
flex-direction: column;
}
.main .body-container .program-detail-right .aboutauthor-main .aboutauthor-main-top {
display: flex;
align-items: center;
padding-left: 20px !important;
padding: 20px 0;
border-bottom: 1px solid #efefef;
margin-bottom: 20px;
}
.main .body-container .program-detail-right .aboutauthor-main .aboutauthor-main-top .aboutauthor-avatar {
margin-right: 12px;
}
.main .body-container .program-detail-right .aboutauthor-main .aboutauthor-main-top .aboutauthor-info .author-name {
font-size: 20px;
font-weight: 700;
}
.main .body-container .program-detail-right .aboutauthor-main .aboutauthor-main-top .aboutauthor-avatar img {
width: 60px;
height: 60px;
border-radius: 4px;
box-sizing: border-box;
margin: 0px;
min-width: 0px;
max-width: 100%;
background-color: #fff;
}
.main .body-container .program-detail-right .aboutauthor-main .aboutauthor-main-middle {
/* margin-left: 20px; */
}
.main .body-container .program-detail-right .aboutauthor-main .aboutauthor-main-middle .author-stats {
display: flex;
justify-content: space-evenly;
}
.main .body-container .program-detail-right .aboutauthor-main .aboutauthor-main-middle .author-stats .author-stats-item {
display: flex;
flex-direction: column;
align-items: center;
}
.main .body-container .program-detail-right .aboutauthor-main .aboutauthor-main-middle .author-stats .author-stats-item .count {
/* font-size: 30px; */
font-weight: 700;
}
.main .body-container .program-detail-right .aboutauthor-btn {
display: flex;
justify-content: space-evenly;
padding: 20px 0;
}
.main .body-container .program-detail-right .aboutauthor-btn .follow-btn {
background-color: #0081ff;
color: #fff;
padding: 10px 20px;
border-radius: 8px;
border: none;
}
.main .body-container .program-detail-right .aboutauthor-btn .message-btn {
color: #0081ff;
padding: 10px 20px;
border-radius: 8px;
border: 1px solid #eee;
}
.program-header {
@ -141,6 +372,7 @@
color: #333;
font-size: 16px;
margin-bottom: 30px;
border-bottom: 1px solid #eee;
}
.program-info {
@ -177,37 +409,23 @@
flex-direction: column;
align-items: center;
cursor: pointer;
padding: 15px 30px;
border-radius: 8px;
transition: all 0.3s ease;
}
.download-btn {
background: #f57005;
color: #fff;
}
.download-btn:hover {
background: #e66600;
transform: translateY(-2px);
}
.share-btn {
background: #f8f9fa;
color: #666;
}
.share-btn:hover {
background: #e9ecef;
}
.action-item i {
font-size: 24px;
color: #666;
margin-bottom: 5px;
}
.action-text {
font-size: 14px;
color: #666;
}
.action-count {
font-size: 12px;
color: #999;
margin-top: 3px;
}
.program-navigation {
@ -216,11 +434,6 @@
margin: 30px 0;
}
.program-navigation a {
color: #333;
text-decoration: none;
}
.prev-program,
.next-program {
max-width: 45%;
@ -228,13 +441,14 @@
.prev-program a,
.next-program a {
color: #333;
color: #333 !important;
text-decoration: none;
}
.prev-program a:hover,
.next-program a:hover {
color: #f57005;
color: #f57005 !important;
transition: all 0.3s ease;
}
.disabled {
@ -335,6 +549,10 @@
transform: translateY(-3px);
}
.go-to-top i {
font-size: 18px;
}
@media (max-width: 768px) {
.program-title {
font-size: 24px;
@ -359,7 +577,7 @@
.location-item a {
color: #000 !important;
}
.disclaimers {
color: #b1b1b1;
width: 80%;
@ -383,215 +601,4 @@
}
</style>
<script>
// 格式化日期
function formatDate(timestamp) {
const date = new Date(timestamp * 1000);
return date.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
}
// 渲染程序详情
function renderProgramDetail(data) {
// 渲染分类链接
document.getElementById('cateLink').textContent = data.cateName;
// 渲染程序标题
document.getElementById('programTitle').textContent = data.program.title;
// 渲染程序元信息
document.getElementById('programAuthor').textContent = data.program.author;
document.getElementById('programDate').textContent = formatDate(data.program.create_time);
document.getElementById('programViews').textContent = data.program.views;
document.getElementById('programDownloads').textContent = data.program.downloads;
// 渲染程序内容
document.getElementById('programContent').innerHTML = data.program.content;
// 渲染程序信息
document.getElementById('programSize').textContent = data.program.size || '未知';
document.getElementById('programEnvironment').textContent = data.program.environment || '通用';
document.getElementById('programUpdateTime').textContent = formatDate(data.program.update_time);
document.getElementById('programVersion').textContent = data.program.version || '1.0.0';
// 渲染上一个程序
const prevProgram = document.getElementById('prevProgram');
if (data.prevProgram) {
prevProgram.innerHTML = `
<a href="/index/program/detail?id=${data.prevProgram.id}">
<i class="fa fa-arrow-left"></i> 上一个:${data.prevProgram.title}
</a>
`;
} else {
prevProgram.innerHTML = '<span class="disabled"><i class="fa fa-arrow-left"></i> 没有上一个了</span>';
}
// 渲染下一个程序
const nextProgram = document.getElementById('nextProgram');
if (data.nextProgram) {
nextProgram.innerHTML = `
<a href="/index/program/detail?id=${data.nextProgram.id}">
下一个:${data.nextProgram.title} <i class="fa fa-arrow-right"></i>
</a>
`;
} else {
nextProgram.innerHTML = '<span class="disabled">没有下一个了 <i class="fa fa-arrow-right"></i></span>';
}
// 渲染相关程序
const relatedPrograms = document.getElementById('relatedPrograms');
if (data.relatedPrograms && data.relatedPrograms.length > 0) {
relatedPrograms.innerHTML = data.relatedPrograms.map(program => `
<div class="related-item">
<a href="/index/program/detail?id=${program.id}">
<div class="related-image">
<img src="${program.icon}" alt="${program.title}">
</div>
<div class="related-info">
<div class="related-item-title">${program.title}</div>
<div class="related-item-desc">${program.desc || ''}</div>
</div>
</a>
</div>
`).join('');
} else {
relatedPrograms.innerHTML = '<div class="no-related">暂无相关程序</div>';
}
}
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function () {
// 获取程序ID
const programId = new URLSearchParams(window.location.search).get('id');
if (!programId) {
alert('程序ID不存在');
return;
}
// 获取程序详情
fetch(`/index/program/detail?id=${programId}`, {
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => response.json())
.then(result => {
if (result.code === 1) {
renderProgramDetail(result.data);
// 更新访问次数
updateProgramViews(programId);
// 初始化分享功能
initShareFunction();
} else {
alert(result.msg || '获取程序详情失败');
}
})
.catch(error => {
console.error('获取程序详情失败:', error);
alert('获取程序详情失败,请检查网络连接或刷新页面重试');
});
// 下载功能
const downloadBtn = document.getElementById('downloadBtn');
if (downloadBtn) {
downloadBtn.addEventListener('click', function () {
fetch('/index/program/download?id=' + programId, {
method: 'POST',
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => response.json())
.then(data => {
if (data.code === 1 && data.data && data.data.fileurl) {
const downloadUrl = window.location.origin + data.data.fileurl;
window.location.href = downloadUrl;
} else {
alert('下载地址不存在');
}
})
.catch(error => {
console.error('下载请求失败:', error);
alert('下载请求失败,请稍后重试');
});
});
}
// 返回顶部功能
const goToTop = document.getElementById('goToTop');
// 监听滚动事件
window.addEventListener('scroll', function () {
if (window.pageYOffset > 300) {
goToTop.classList.add('show');
} else {
goToTop.classList.remove('show');
}
});
// 点击返回顶部
goToTop.addEventListener('click', function () {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
});
// 更新程序访问次数
function updateProgramViews(programId) {
fetch('/index/program/updateViews', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
},
body: JSON.stringify({
id: programId
})
})
.then(response => response.json())
.then(result => {
if (result.code === 1) {
// 更新成功,更新页面上的访问次数显示
const viewsElement = document.getElementById('programViews');
if (viewsElement) {
viewsElement.textContent = result.data.views;
}
}
})
.catch(error => {
console.error('更新访问次数失败:', error);
});
}
// 初始化分享功能
function initShareFunction() {
const shareBtn = document.getElementById('shareBtn');
if (shareBtn) {
shareBtn.addEventListener('click', function () {
// 获取当前页面URL
const currentUrl = window.location.href;
// 创建临时输入框
const tempInput = document.createElement('input');
tempInput.value = currentUrl;
document.body.appendChild(tempInput);
// 选择并复制文本
tempInput.select();
document.execCommand('copy');
// 移除临时输入框
document.body.removeChild(tempInput);
// 提示用户复制成功
layer.msg('链接已复制到剪贴板');
});
}
}
</script>
{include file="component/foot" /}

View File

@ -81,7 +81,8 @@
--bs-body-line-height: 1.5;
--bs-body-color: #212529;
--bs-body-color-rgb: 33, 37, 41;
--bs-body-bg: #fff;
/* --bs-body-bg: #fff; */
--bs-body-bg:#f4f6f9;
--bs-body-bg-rgb: 255, 255, 255;
--bs-emphasis-color: #000;
--bs-emphasis-color-rgb: 0, 0, 0;

View File

@ -199,7 +199,7 @@ pre code {
/* 主导航菜单 */
.main-menu {
background: #f8f9fa;
background: #fff;
width: 100%;
}
@ -221,7 +221,7 @@ pre code {
}
.main-menu .container .main-menu__nav a:hover {
color: #fff !important;
color: #fff ;
}
.main-menu .container a:hover {
@ -241,7 +241,7 @@ pre code {
.main-menu__list {
display: flex;
justify-content: center;
gap: 35px;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
@ -252,16 +252,16 @@ pre code {
font-size: 16px;
font-weight: 500;
text-decoration: none;
padding: 16px 30px;
padding: 16px 10px;
border-radius: 6px;
transition: all 0.3s ease;
position: relative;
}
.main-menu__list a:hover {
color: #fff;
background-color: #3498db;
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
color: #0081ff;
/* background-color: #3498db; */
/* box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3); */
transform: translateY(-2px);
text-decoration: none;
}
@ -310,6 +310,13 @@ pre code {
color: #212529 !important;
}
.sticky-nav__menu a:hover {
color: #0081ff !important;
border-bottom: 3px solid #0081ff;
padding-bottom: 5px;
transition: all ease 0.2s;
}
.sticky-nav__menu ul {
display: flex;
justify-content: center;

View File

@ -1,4 +1,4 @@
<?php /*a:5:{s:63:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\articles\detail.php";i:1748400078;s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\head.php";i:1747617129;s:71:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\header-simple.php";i:1748316508;s:64:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\footer.php";i:1747617266;s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\foot.php";i:1747616844;}*/ ?>
<?php /*a:5:{s:63:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\articles\detail.php";i:1748423296;s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\head.php";i:1747617129;s:71:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\header-simple.php";i:1748316508;s:64:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\footer.php";i:1747617266;s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\foot.php";i:1747616844;}*/ ?>
<!DOCTYPE html>
<html>
@ -624,68 +624,148 @@ $loginStatus = [
<div class="location-item">
<a href="/">首页</a>
<span>></span>
<a href="/index/articles/index" id="cateLink"></a>
<a href="/index/articles/index"><?php echo htmlentities((string) $cateName); ?></a>
</div>
</div>
</div>
<div class="article-detail-container">
<div class="article-header">
<h1 class="article-title" id="articleTitle"></h1>
<div class="trans" id="transDiv" style="display: none;">转载至:<span id="transUrl"></span></div>
<div class="article-meta">
<span class="article-author"><i class="fa fa-user"></i> <span id="articleAuthor"></span></span>
<span class="article-date"><i class="fa fa-calendar"></i> <span id="articleDate"></span></span>
<span class="article-views"><i class="fa-solid fa-eye"></i> <span id="articleViews"></span> 阅读</span>
<div class="body-container">
<div class="article-detail-container">
<div class="article-header">
<h1 class="article-title"><?php echo htmlentities((string) $article['title']); ?></h1>
<?php if($article['is_trans'] == 1 && $article['transurl']): ?>
<div class="trans">转载至:<span class="trans-url" data-url="<?php echo htmlentities((string) $article['transurl']); ?>"><?php echo htmlentities((string) $article['transurl']); ?></span>
</div>
<?php endif; ?>
<div class="article-meta">
<span class="article-author"><i class="fa fa-user"></i> <span><?php echo htmlentities((string) $article['author']); ?></span></span>
<span class="article-date"><i class="fa fa-calendar"></i>
<span><?php echo htmlentities((string) date("Y-m-d",!is_numeric($article['create_time'])? strtotime($article['create_time']) : $article['create_time'])); ?></span></span>
<span class="article-views"><i class="fa-solid fa-eye"></i> <span><?php echo htmlentities((string) $article['views']); ?></span> 阅读</span>
</div>
</div>
</div>
<div class="article-content" id="articleContent">
</div>
<div class="article-content">
<?php echo $article['content']; ?>
</div>
<div class="disclaimers">
<div class="disclaimer-item">
<div class="disclaimer-title">免责声明:</div>
<div class="disclaimer-content">
<?php echo $config['disclaimers'] ?>
<div class="disclaimers">
<div class="disclaimer-item">
<div class="disclaimer-title">免责声明:</div>
<div class="disclaimer-content">
<?php echo $config['disclaimers'] ?>
</div>
</div>
</div>
<div class="article-tags">
<span class="tag-label">标签:</span>
<div>
<?php if($article['tags']): if(is_array(explode($article['tags'],',',',')) || explode($article['tags'],',',',') instanceof \think\Collection || explode($article['tags'],',',',') instanceof \think\Paginator): $i = 0; $__LIST__ = explode($article['tags'],',',',');if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$tag): $mod = ($i % 2 );++$i;?>
<span class="tag-item"><?php echo htmlentities((string) $tag); ?></span>
<?php endforeach; endif; else: echo "" ;endif; else: ?>
<span class="no-tags">暂无标签</span>
<?php endif; ?>
</div>
</div>
<div class="article-actions">
<div class="action-item like-btn" data-id="<?php echo htmlentities((string) $article['id']); ?>">
<i class="fa fa-thumbs-up"></i>
<span class="action-text">点赞</span>
<span class="action-count"><?php echo htmlentities((string) $article['likes']); ?></span>
</div>
<div class="action-item share-btn">
<i class="fa fa-share-alt"></i>
<span class="action-text">分享</span>
</div>
</div>
<div class="article-navigation">
<div class="prev-article">
<?php if($prevArticle): ?>
<a href="/index/articles/detail?id=<?php echo htmlentities((string) $prevArticle['id']); ?>">
<i class="fa fa-arrow-left"></i> 上一篇:<?php echo htmlentities((string) $prevArticle['title']); ?>
</a>
<?php else: ?>
<span class="disabled"><i class="fa fa-arrow-left"></i> 没有上一篇了</span>
<?php endif; ?>
</div>
<div class="next-article">
<?php if($nextArticle): ?>
<a href="/index/articles/detail?id=<?php echo htmlentities((string) $nextArticle['id']); ?>">
下一篇:<?php echo htmlentities((string) $nextArticle['title']); ?> <i class="fa fa-arrow-right"></i>
</a>
<?php else: ?>
<span class="disabled">没有下一篇了 <i class="fa fa-arrow-right"></i></span>
<?php endif; ?>
</div>
</div>
<div class="related-articles">
<h3 class="related-title">相关推荐</h3>
<div class="related-list">
<?php if(is_array($relatedArticles) || $relatedArticles instanceof \think\Collection || $relatedArticles instanceof \think\Paginator): $i = 0; $__LIST__ = $relatedArticles;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$related): $mod = ($i % 2 );++$i;?>
<div class="related-item">
<a href="/index/articles/detail?id=<?php echo htmlentities((string) $related['id']); ?>">
<div class="related-image">
<img src="<?php echo htmlentities((string) $related['image']); ?>" alt="<?php echo htmlentities((string) $related['title']); ?>">
</div>
<div class="related-info">
<div class="related-item-title"><?php echo htmlentities((string) $related['title']); ?></div>
</div>
</a>
</div>
<?php endforeach; endif; else: echo "" ;endif; ?>
</div>
</div>
</div>
<div class="article-detail-right">
<div class="aboutauthor">
<div class="aboutauthor-title">关于作者</div>
<div class="aboutauthor-main">
<div class="aboutauthor-main-top">
<div class="aboutauthor-avatar">
<img src="<?php echo htmlentities((string) $authorInfo['avatar']); ?>" alt="作者头像">
</div>
<div class="aboutauthor-info">
<div class="author-name"><?php echo htmlentities((string) $authorInfo['name']); ?></div>
</div>
</div>
<div class="aboutauthor-main-middle">
<div class="author-stats">
<div class="article-tags">
<span class="tag-label">标签:</span>
<div id="articleTags"></div>
</div>
<div class="article-actions">
<div class="action-item like-btn" id="likeBtn">
<i class="fa fa-thumbs-up"></i>
<span class="action-text">点赞</span>
<span class="action-count" id="articleLikes">0</span>
</div>
<div class="action-item share-btn" id="shareBtn">
<i class="fa fa-share-alt"></i>
<span class="action-text">分享</span>
</div>
</div>
<div class="article-navigation">
<div class="prev-article" id="prevArticle">
</div>
<div class="next-article" id="nextArticle">
</div>
</div>
<div class="related-articles">
<h3 class="related-title">相关推荐</h3>
<div class="related-list" id="relatedArticles">
<div class="author-stats-item">
<h6>资源</h6>
<span class="count"><?php echo htmlentities((string) $authorInfo['resource_count']); ?></span>
</div>
<div class="author-stats-item">
<h6>文章</h6>
<span class="count"><?php echo htmlentities((string) $authorInfo['article_count']); ?></span>
</div>
<div class="author-stats-item">
<h6>粉丝</h6>
<span class="count">
0
</span>
</div>
</div>
</div>
</div>
<div class="aboutauthor-btn">
<button class="follow-btn">
<i class="fa fa-user-plus"></i> 关注他
</button>
<button class="message-btn">
<i class="fa fa-envelope"></i> 发私信
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 返回顶部按钮 -->
<div class="go-to-top" id="goToTop">
<div class="go-to-top">
<i class="layui-icon-up"></i>
</div>
@ -746,20 +826,197 @@ $loginStatus = [
</div>
</section>
<script>
// 更新访问次数
async function updateArticleViews(articleId) {
try {
await fetch('/index/articles/updateViews', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: articleId })
});
} catch (error) {
console.error('更新访问次数失败:', error);
}
}
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function () {
const articleId = '<?php echo htmlentities((string) $article['id']); ?>';
// 更新访问次数
updateArticleViews(articleId);
// 点赞功能
document.querySelector('.like-btn').addEventListener('click', async function () {
try {
const response = await fetch('/index/articles/like?id=' + articleId, {
method: 'POST',
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
const result = await response.json();
if (result.code === 1) {
const countElement = this.querySelector('.action-count');
countElement.textContent = parseInt(countElement.textContent) + 1;
this.classList.add('liked');
this.querySelector('i').style.color = '#f57005';
layer.msg('点赞成功', { icon: 1 });
} else {
layer.msg(result.msg, { icon: 2 });
}
} catch (error) {
layer.msg('点赞失败,请稍后重试', { icon: 2 });
}
});
// 分享功能
document.querySelector('.share-btn').addEventListener('click', function () {
const url = window.location.href;
navigator.clipboard.writeText(url).then(() => {
layer.msg('链接已复制到剪贴板', { icon: 1 });
}).catch(() => {
layer.msg('复制失败,请手动复制', { icon: 2 });
});
});
// 转载链接点击
document.querySelector('.trans-url')?.addEventListener('click', function () {
const url = this.dataset.url;
if (url) {
window.open(url, '_blank');
}
});
// 返回顶部
const goToTop = document.querySelector('.go-to-top');
window.addEventListener('scroll', function () {
if (window.scrollY > 300) {
goToTop.classList.add('show');
} else {
goToTop.classList.remove('show');
}
});
goToTop.addEventListener('click', function () {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
});
</script>
<style>
.location {
max-width: 1000px;
max-width: 1200px;
margin: 30px auto;
}
.main .body-container {
display: flex;
max-width: 1200px;
margin: 30px auto;
gap: 30px;
}
.main .body-container .article-detail-right {
width: 30%;
}
.article-detail-container {
max-width: 1000px;
margin: 30px auto;
padding: 50px;
background: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
width: 70%;
}
.main .body-container .article-detail-right .aboutauthor {
background: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.main .body-container .article-detail-right .aboutauthor-title {
height: 60px;
display: flex;
align-items: center;
padding-left: 20px;
border-bottom: 1px solid #eee;
font-weight: 700;
}
.main .body-container .article-detail-right .aboutauthor-main {
display: flex;
flex-direction: column;
}
.main .body-container .article-detail-right .aboutauthor-main .aboutauthor-main-top {
display: flex;
align-items: center;
padding-left: 20px !important;
padding: 20px 0;
border-bottom: 1px solid #efefef;
margin-bottom: 20px;
}
.main .body-container .article-detail-right .aboutauthor-main .aboutauthor-main-top .aboutauthor-avatar {
margin-right: 12px;
}
.main .body-container .article-detail-right .aboutauthor-main .aboutauthor-main-top .aboutauthor-info .author-name {
font-size: 20px;
font-weight: 700;
}
.main .body-container .article-detail-right .aboutauthor-main .aboutauthor-main-top .aboutauthor-avatar img {
width: 60px;
height: 60px;
border-radius: 4px;
box-sizing: border-box;
margin: 0px;
min-width: 0px;
max-width: 100%;
background-color: #fff;
}
.main .body-container .article-detail-right .aboutauthor-main .aboutauthor-main-middle {
/* margin-left: 20px; */
}
.main .body-container .article-detail-right .aboutauthor-main .aboutauthor-main-middle .author-stats {
display: flex;
justify-content: space-evenly;
}
.main .body-container .article-detail-right .aboutauthor-main .aboutauthor-main-middle .author-stats .author-stats-item {
display: flex;
flex-direction: column;
align-items: center;
}
.main .body-container .article-detail-right .aboutauthor-main .aboutauthor-main-middle .author-stats .author-stats-item .count {
/* font-size: 30px; */
font-weight: 700;
}
.main .body-container .article-detail-right .aboutauthor-btn {
display: flex;
justify-content: space-evenly;
padding: 20px 0;
}
.main .body-container .article-detail-right .aboutauthor-btn .follow-btn {
background-color: #0081ff;
color: #fff;
padding: 10px 20px;
border-radius: 8px;
border: none;
}
.main .body-container .article-detail-right .aboutauthor-btn .message-btn {
color: #0081ff;
padding: 10px 20px;
border-radius: 8px;
border: 1px solid #eee;
}
.article-header {
@ -1123,228 +1380,6 @@ $loginStatus = [
}
</style>
<script>
// 格式化日期
function formatDate(timestamp) {
const date = new Date(timestamp * 1000);
return date.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
}
// 渲染文章详情
function renderArticleDetail(data) {
// 渲染分类链接
document.getElementById('cateLink').textContent = data.cateName;
// 渲染文章标题
document.getElementById('articleTitle').textContent = data.article.title;
// 渲染文章元信息
document.getElementById('articleAuthor').textContent = data.article.author;
document.getElementById('articleDate').textContent = formatDate(data.article.create_time);
document.getElementById('articleViews').textContent = data.article.views;
// 渲染文章内容
document.getElementById('articleContent').innerHTML = data.article.content;
// 渲染标签
const tagsContainer = document.getElementById('articleTags');
if (data.article.tags && data.article.tags.length > 0) {
tagsContainer.innerHTML = data.article.tags.map(tag =>
`<span class="tag-item">${tag}</span>`
).join('');
} else {
tagsContainer.innerHTML = '<span class="no-tags">暂无标签</span>';
}
// 渲染点赞数
document.getElementById('articleLikes').textContent = data.article.likes || 0;
// 渲染上一篇
const prevArticle = document.getElementById('prevArticle');
if (data.prevArticle) {
prevArticle.innerHTML = `
<a href="/index/articles/detail?id=${data.prevArticle.id}">
<i class="fa fa-arrow-left"></i> 上一篇:${data.prevArticle.title}
</a>
`;
} else {
prevArticle.innerHTML = '<span class="disabled"><i class="fa fa-arrow-left"></i> 没有上一篇了</span>';
}
// 渲染下一篇
const nextArticle = document.getElementById('nextArticle');
if (data.nextArticle) {
nextArticle.innerHTML = `
<a href="/index/articles/detail?id=${data.nextArticle.id}">
下一篇:${data.nextArticle.title} <i class="fa fa-arrow-right"></i>
</a>
`;
} else {
nextArticle.innerHTML = '<span class="disabled">没有下一篇了 <i class="fa fa-arrow-right"></i></span>';
}
// 渲染相关文章
const relatedArticles = document.getElementById('relatedArticles');
if (data.relatedArticles && data.relatedArticles.length > 0) {
relatedArticles.innerHTML = data.relatedArticles.map(article => `
<div class="related-item">
<a href="/index/articles/detail?id=${article.id}">
<div class="related-image">
<img src="${article.image}" alt="${article.title}">
</div>
<div class="related-info">
<div class="related-item-title">${article.title}</div>
<div class="related-item-desc">${article.desc || ''}</div>
</div>
</a>
</div>
`).join('');
} else {
relatedArticles.innerHTML = '<div class="no-related">暂无相关文章</div>';
}
// 处理转载信息
if (data.article.is_trans === 1 && data.article.transurl) {
const transDiv = document.getElementById('transDiv');
const transUrlSpan = document.getElementById('transUrl');
transUrlSpan.textContent = data.article.transurl;
transDiv.style.display = 'block';
// 添加点击事件,在新窗口打开原文章
transUrlSpan.style.cursor = 'pointer';
transUrlSpan.style.color = '#007bff';
transUrlSpan.addEventListener('click', function() {
window.open(data.article.transurl, '_blank');
});
}
}
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function () {
// 获取文章ID
const articleId = new URLSearchParams(window.location.search).get('id');
if (!articleId) {
alert('文章ID不存在');
return;
}
// 获取文章详情
fetch(`/index/articles/detail?id=${articleId}`, {
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => response.json())
.then(result => {
if (result.code === 1) {
renderArticleDetail(result.data);
// 更新访问次数
updateArticleViews(articleId);
} else {
console.error('API error:', result.msg);
alert(result.msg || '获取文章详情失败');
}
})
.catch(error => {
console.error('获取文章详情失败:', error);
alert('获取文章详情失败,请检查网络连接或刷新页面重试');
});
// 点赞功能
const likeBtn = document.getElementById('likeBtn');
if (likeBtn) {
likeBtn.addEventListener('click', function () {
fetch('/index/articles/like?id=' + articleId, {
method: 'POST',
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => response.json())
.then(data => {
if (data.code === 1) {
const countElement = document.getElementById('articleLikes');
if (countElement) {
let count = parseInt(countElement.textContent) || 0;
countElement.textContent = count + 1;
}
likeBtn.classList.add('liked');
likeBtn.querySelector('i').style.color = '#f57005';
layer.msg('点赞成功', { icon: 1 });
} else {
layer.msg('点赞失败:' + data.msg, { icon: 2 });
}
})
.catch(error => {
console.error('点赞请求失败:', error);
layer.msg('点赞失败,请稍后重试', { icon: 2 });
});
});
}
// 返回顶部功能
const goToTop = document.getElementById('goToTop');
window.addEventListener('scroll', function () {
if (window.pageYOffset > 300) {
goToTop.classList.add('show');
} else {
goToTop.classList.remove('show');
}
});
goToTop.addEventListener('click', function () {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 分享功能
const shareBtn = document.getElementById('shareBtn');
if (shareBtn) {
shareBtn.addEventListener('click', function () {
const currentUrl = window.location.href;
const tempInput = document.createElement('input');
tempInput.value = currentUrl;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
layer.msg('链接已复制到剪贴板', { icon: 1 });
});
}
});
// 更新文章访问次数
function updateArticleViews(articleId) {
fetch('/index/articles/updateViews', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
id: articleId
})
})
.then(response => response.json())
.then(result => {
if (result.code === 1) {
const viewsElement = document.getElementById('articleViews');
if (viewsElement) {
viewsElement.textContent = result.data.views;
}
}
})
.catch(error => {
console.error('更新访问次数失败:', error);
});
}
</script>
</body>
</html>

View File

@ -1,4 +1,4 @@
<?php /*a:4:{s:59:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\index\index.php";i:1746865108;s:64:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\header.php";i:1748316235;s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\main.php";i:1748398948;s:64:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\footer.php";i:1747617266;}*/ ?>
<?php /*a:4:{s:59:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\index\index.php";i:1746865108;s:64:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\header.php";i:1748423736;s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\main.php";i:1748398948;s:64:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\footer.php";i:1747617266;}*/ ?>
<!DOCTYPE html>
<html>
@ -48,7 +48,7 @@ $loginStatus = [
</div>
<div style="display: flex;flex-direction: column;">
<div class="topbar-one">
<!-- <div class="topbar-one">
<div class="container">
<div style="width: 70%;">
<ul class="list-unstyled topbar-one__info">
@ -70,19 +70,21 @@ $loginStatus = [
</div>
</div>
</div>
</div>
</div> -->
<!-- 导航栏 -->
<div class="main-menu">
<div class="container">
<div class="main-menu__logo">
<a href="index.html"><img src="<?php echo htmlentities((string) $config['logo1']); ?>" width="186" alt="Logo"></a>
<a href="/"><img src="<?php echo htmlentities((string) $config['logo1']); ?>" width="186" alt="Logo"></a>
</div>
<div class="main-menu__nav">
<ul class="main-menu__list">
<li><a href="/index.html">首页</a></li>
<li><a href="/about.html">关于我们</a></li>
<li><a href="/products.html">产品服务</a></li>
<li><a href="/contact.html">联系我们</a></li>
<li><a href="/">首页</a></li>
<li><a href="/index/articles/index?cateid=1">站点资讯</a></li>
<li><a href="/index/articles/index?cateid=3">技术文章</a></li>
<li><a href="/index/program/index?cateid=2">办公资源</a></li>
<li><a href="/index/program/index?cateid=1">程序下载</a></li>
<li><a href="/index/game/index?cateid=8">游戏下载</a></li>
</ul>
</div>
<div class="main-menu__right">
@ -137,14 +139,16 @@ $loginStatus = [
<div class="sticky-nav" style="display: none;">
<div class="container">
<div class="sticky-nav__logo">
<a href="index.html"><img src="<?php echo htmlentities((string) $config['logo1']); ?>" width="150" alt="Logo"></a>
<a href="/"><img src="<?php echo htmlentities((string) $config['logo1']); ?>" width="150" alt="Logo"></a>
</div>
<div class="sticky-nav__menu">
<ul>
<li><a href="/index.html">首页</a></li>
<li><a href="/about.html">关于我们</a></li>
<li><a href="/products.html">产品服务</a></li>
<li><a href="/contact.html">联系我们</a></li>
<li><a href="/">首页</a></li>
<li><a href="/index/articles/index?cateid=1">站点资讯</a></li>
<li><a href="/index/articles/index?cateid=3">技术文章</a></li>
<li><a href="/index/program/index?cateid=2">办公资源</a></li>
<li><a href="/index/program/index?cateid=1">程序下载</a></li>
<li><a href="/index/game/index?cateid=8">游戏下载</a></li>
</ul>
</div>
<div class="sticky-nav__right">

File diff suppressed because it is too large Load Diff