diff --git a/.gitignore b/.gitignore
index 338f014..625fcdf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@
 /vendor
 runtime
 *.log
+config/database.php
diff --git a/app/index/view/resources/detail.php b/app/index/view/resources/detail.php
new file mode 100644
index 0000000..52f6dda
--- /dev/null
+++ b/app/index/view/resources/detail.php
@@ -0,0 +1,710 @@
+{include file="component/head" /}
+{include file="component/header-simple" /}
+<div class="main">
+    <div class="main-top">
+        <div class="main-top-main">
+            <div class="main-title">
+                <?php echo $game['title']; ?>
+            </div>
+            <div class="location">
+                <div class="container">
+                    <div class="location-item">
+                        <a href="/">首页</a>
+                        <span>></span>
+                        <a href="/index/game/list" id="cateLink"><?php echo $cateName; ?></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="detail-main">
+        <div class="detail-top">
+            <div class="detail-top-card">
+                <div class="detail-top-card-left">
+                    <div class="article-cover">
+                        <img src="<?php echo $game['icon'] ?: '/static/images/default-game.png'; ?>">
+                        <!-- <img src="https://www.yunzer.cn/storage/uploads/20250523/b75a51fa606fd3a18261a6ea283d35fe.jpg" alt=""> -->
+                    </div>
+                </div>
+                <div class="detail-top-card-right">
+                    <div class="detail-top-card-right-top">
+                        <div class="collect-btn">
+                            <button class="btn btn-primary" id="collectBtn" data-game-id="<?php echo $game['id']; ?>">
+                                <i class="fa-solid fa-heart"></i> 收藏
+                            </button>
+                        </div>
+                        <div class="report-btn">
+                            <button class="btn btn-primary" id="reportBtn" style="margin-left: 20px;">
+                                <i class="fa-solid fa-flag"></i> 举报
+                            </button>
+                        </div>
+                    </div>
+                    <div class="detail-top-card-right-middle">
+                        <div class="game-info">
+                            <div class="title">Free</div>
+                            <div class="infos">
+                                <div class="infoitem"><span>更新时间：</span><?php echo date('Y-m-d', $game['create_time']); ?></div>
+                                <div class="infoitem"><span>所属分类：</span><?php echo $cateName; ?></div>
+                                <div class="infoitem"><span>程序编号：</span><?php echo $game['number']; ?></div>
+                                <div class="infoitem"><span>查看：</span><?php echo $game['views']; ?></div>
+                                <div class="infoitem"><span>下载：</span><?php echo $game['downloads']; ?></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="detail-top-card-right-bottom">
+                        <div class="game-actions1">
+                            <div style="display: flex;gap: 30px;}">
+                                <button id="downloadBtn" class="btn btn-primary">
+                                    <i class="fa-solid fa-download"></i> 立即下载
+                                </button>
+                                <button id="codeBtn" class="codebtn">
+                                    <i class="fa-solid fa-download"></i> 分享码：<?php echo $game['code']; ?>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="detail-middle">
+            <div class="detial-middle-left">
+                <div class="game-detail">
+                    <div class="game-info">
+                        <div class="game-content">
+                            <div class="game-desc">
+                                <?php echo $game['content']; ?>
+                            </div>
+                        </div>
+                        <div class="game-actions">
+                            <div style="display: flex;gap: 30px;}">
+                                <button id="downloadBtn" class="btn btn-primary">
+                                    <i class="fa-solid fa-download"></i> 立即下载
+                                </button>
+                                <button id="codeBtn" class="codebtn">
+                                    <i class="fa-solid fa-download"></i> 分享码：<?php echo $game['code']; ?>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <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="game-navigation">
+                        <div class="prev-game" id="prevGame">
+                        </div>
+                        <div class="next-game" id="nextGame">
+                        </div>
+                    </div>
+
+                    <!-- 相关游戏 -->
+                    <?php if (!empty($relatedGames)): ?>
+                        <div class="related-games">
+                            <h3>相关游戏</h3>
+                            <div class="game-list">
+                                <?php foreach ($relatedGames as $related): ?>
+                                    <div class="game-item"
+                                        onclick="window.location.href='/index/game/detail?id=<?php echo $related['id']; ?>'">
+                                        <div class="game-cover">
+                                            <img src="<?php echo $related['icon'] ?: '/static/images/default-game.png'; ?>"
+                                                alt="<?php echo $related['title']; ?>">
+                                        </div>
+                                        <div class="game-info">
+                                            <h4 class="game-title-1"><?php echo $related['title']; ?></h4>
+                                        </div>
+                                    </div>
+                                <?php endforeach; ?>
+                            </div>
+                        </div>
+                    <?php endif; ?>
+                </div>
+            </div>
+            <div class="detial-middle-right">
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<!-- 返回顶部按钮 -->
+<div class="go-to-top" id="goToTop">
+    <i class="layui-icon layui-icon-top"></i>
+</div>
+
+{include file="component/footer" /}
+
+<script>
+    // 页面加载完成后执行
+    document.addEventListener('DOMContentLoaded', function() {
+        // 获取游戏ID
+        const gameId = new URLSearchParams(window.location.search).get('id');
+        if (!gameId) {
+            alert('游戏ID不存在');
+            return;
+        }
+
+        // 获取游戏详情
+        fetch('/index/game/detail?id=' + gameId, {
+                headers: {
+                    'X-Requested-With': 'XMLHttpRequest'
+                }
+            })
+            .then(response => response.json())
+            .then(result => {
+                if (result.code === 1) {
+                    // 渲染上一篇
+                    const prevGame = document.getElementById('prevGame');
+                    if (result.data.prevGame) {
+                        prevGame.innerHTML = `
+                        <a href="/index/game/detail?id=${result.data.prevGame.id}">
+                            <i class="fa fa-arrow-left"></i> 上一篇：${result.data.prevGame.title}
+                        </a>
+                    `;
+                    } else {
+                        prevGame.innerHTML = '<span class="disabled"><i class="fa fa-arrow-left"></i> 没有上一篇了</span>';
+                    }
+
+                    // 渲染下一篇
+                    const nextGame = document.getElementById('nextGame');
+                    if (result.data.nextGame) {
+                        nextGame.innerHTML = `
+                        <a href="/index/game/detail?id=${result.data.nextGame.id}">
+                            下一篇：${result.data.nextGame.title} <i class="fa fa-arrow-right"></i>
+                        </a>
+                    `;
+                    } else {
+                        nextGame.innerHTML = '<span class="disabled">没有下一篇了 <i class="fa fa-arrow-right"></i></span>';
+                    }
+                }
+            })
+            .catch(error => {
+                console.error('获取游戏详情失败:', error);
+            });
+
+        // 更新访问次数
+        updateGameViews(gameId);
+
+        // 下载功能
+        const downloadBtn = document.getElementById('downloadBtn');
+        if (downloadBtn) {
+            downloadBtn.addEventListener('click', function() {
+                fetch('/index/game/downloadurl?id=' + gameId, {
+                        method: 'GET',
+                        headers: {
+                            'X-Requested-With': 'XMLHttpRequest'
+                        }
+                    })
+                    .then(response => {
+                        if (!response.ok) {
+                            throw new Error('网络响应失败');
+                        }
+                        return response.json();
+                    })
+                    .then(data => {
+                        if (data.code === 1) {
+                            const downloadsElement = document.getElementById('gameDownloads');
+                            if (downloadsElement) {
+                                let downloads = parseInt(downloadsElement.textContent);
+                                downloadsElement.textContent = downloads + 1;
+                            }
+
+                            // 直接使用返回的URL
+                            if (data.data && data.data.url) {
+                                window.open(data.data.url, '_blank');
+                            } else {
+                                alert('下载地址不存在');
+                            }
+                        } else {
+                            alert('下载失败：' + data.msg);
+                        }
+                    })
+                    .catch(error => {
+                        console.error('下载请求失败:', error);
+                        alert('下载请求失败，请稍后重试');
+                    });
+            });
+        }
+
+        //复制分享码
+        const codeBtn = document.getElementById('codeBtn');
+        if (codeBtn) {
+            codeBtn.addEventListener('click', function() {
+                const code = '<?php echo $game['code']; ?>';
+                if (code) {
+                    // 创建一个临时输入框
+                    const tempInput = document.createElement('input');
+                    tempInput.value = code;
+                    document.body.appendChild(tempInput);
+                    tempInput.select();
+
+                    try {
+                        // 尝试使用传统的复制方法
+                        document.execCommand('copy');
+                        layer.msg('分享码已复制到剪贴板');
+                    } catch (err) {
+                        console.error('复制失败:', err);
+                        layer.msg('复制失败，请手动复制');
+                    } finally {
+                        // 移除临时输入框
+                        document.body.removeChild(tempInput);
+                    }
+                } else {
+                    layer.msg('分享码不存在');
+                }
+            });
+        }
+
+        // 返回顶部功能
+        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 updateGameViews(gameId) {
+        fetch('/index/game/updateViews', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                    'X-Requested-With': 'XMLHttpRequest'
+                },
+                body: 'id=' + gameId
+            })
+            .then(response => response.json())
+            .then(result => {
+                if (result.code === 1) {
+                    const viewsElement = document.querySelector('.game-views');
+                    if (viewsElement) {
+                        viewsElement.innerHTML = `<i class="fa-solid fa-eye"></i> ${result.data.views}`;
+                    }
+                }
+            })
+            .catch(error => {
+                console.error('更新访问次数失败:', error);
+            });
+    }
+</script>
+
+<style>
+    .main-top {
+        width: 100%;
+        height: 400px;
+        background-color: #0081ff;
+        /* background: url('/static/images/top-bg.jpg') no-repeat center center; */
+        position: relative;
+    }
+
+    .main-top-card {
+        max-width: 1400px;
+        margin: 0 auto;
+        margin-top: 30px;
+        border-radius: 8px;
+        background-color: #fff;
+        height: 300px;
+    }
+
+    .main-top-main {
+        max-width: 1400px;
+        margin: 0 auto;
+        padding-top: 50px;
+        display: flex;
+        justify-content: space-between;
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100%;
+        z-index: 1;
+    }
+
+    .main-top-main .main-title {
+        font-size: 30px;
+        font-weight: 700;
+        max-width: 1000px;
+        color: #fff;
+    }
+
+    .detail-top {
+        max-width: 1400px;
+        /* height: 300px; */
+        margin: 30px auto;
+        position: relative;
+        background-color: #fff;
+        border-radius: 8px;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+        display: flex;
+    }
+
+    .detail-top-card {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px;
+    }
+
+
+    .detail-top-card img {
+        width: 400px;
+        height: auto;
+        border-radius: 8px;
+        overflow: hidden;
+    }
+
+    .detail-top-card-right {
+        /* height: 230px; */
+        display: flex;
+        width: 100%;
+        margin-left: 20px;
+        flex-direction: column;
+    }
+
+    .detail-top-card-right-top {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+    }
+
+    .detail-top-card-right-middle {}
+
+    .detail-top-card-right-middle .game-info {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        height: 100%;
+    }
+
+    .detail-top-card-right-middle .game-info .title {
+        font-size: 40px;
+        font-weight: 700;
+        color: #42d697;
+        margin-bottom: 15px;
+    }
+
+    .detail-top-card-right-middle .game-info .infos {
+        display: flex;
+    }
+
+    .detail-top-card-right-middle .game-info .infos .infoitem {
+        margin-right: 60px;
+    }
+
+    .detail-top-card-right-middle .game-info .infos .infoitem span {
+        color: #7d879c;
+    }
+
+    .detail-middle {
+        max-width: 1400px;
+        margin: 0 auto;
+    }
+
+    .detail-main {
+        position: relative;
+        top: -200px;
+        left: 0;
+        width: 100%;
+        z-index: 2;
+    }
+
+    .location {
+        color: #fff;
+        display: flex;
+        align-items: center;
+    }
+
+    .location a {
+        color: #fff !important;
+    }
+
+    .game-detail {
+        padding: 50px;
+        background: #fff;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+        border-radius: 8px;
+    }
+
+    .game-header {
+        margin-bottom: 30px;
+        border-bottom: 1px solid #eee;
+        padding-bottom: 20px;
+    }
+
+    .game-title {
+        font-size: 30px;
+        font-weight: 700;
+        color: #333;
+        margin-bottom: 15px;
+        line-height: 1.4;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .game-title-1 {
+        font-size: 16px;
+        font-weight: 700;
+        color: #333;
+        margin-bottom: 15px;
+        line-height: 1.4;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .game-meta {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 20px;
+        color: #666;
+        font-size: 14px;
+    }
+
+    .game-meta span {
+        display: flex;
+        align-items: center;
+    }
+
+    .game-meta i {
+        margin-right: 5px;
+    }
+
+    .game-content {
+        line-height: 1.8;
+        color: #333;
+        font-size: 16px;
+        margin-bottom: 30px;
+    }
+
+    .game-cover {
+        margin-bottom: 20px;
+    }
+
+    .game-cover img {
+        width: 100%;
+        height: 300px;
+        object-fit: cover;
+        border-radius: 8px;
+    }
+
+    .game-desc {
+        margin-bottom: 30px;
+    }
+
+    .game-actions {
+        display: flex;
+        justify-content: center;
+        gap: 40px;
+        margin: 30px 0;
+        padding: 20px 0;
+        border-top: 1px solid #eee;
+        border-bottom: 1px solid #eee;
+    }
+
+    .game-actions1 {
+        display: flex;
+        margin: 20px 0;
+    }
+
+    .game-navigation {
+        display: flex;
+        justify-content: space-between;
+        margin: 30px 0;
+    }
+
+    .prev-game,
+    .next-game {
+        max-width: 45%;
+    }
+
+    .prev-game a,
+    .next-game a {
+        color: #333 !important;
+        text-decoration: none;
+    }
+
+    .prev-game a:hover,
+    .next-game a:hover {
+        color: #f57005 !important;
+        transition: all 0.3s ease;
+    }
+
+    .btn {
+        /* background: #f57005; */
+        color: #fff;
+        padding: 5px 15px;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+    }
+
+    .btn:hover {
+        /* background: #e66600; */
+        transform: translateY(-2px);
+    }
+
+    .codebtn {
+        color: #0d6efd;
+        padding: 15px 30px;
+        border-radius: 8px;
+        border: 1px solid #0d6efd;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        background-color: #fff;
+    }
+
+    .codebtn:hover {
+        transform: translateY(-2px);
+    }
+
+    .related-games {
+        margin: 40px 0;
+    }
+
+    .related-games h3 {
+        font-size: 20px;
+        font-weight: 600;
+        margin-bottom: 20px;
+        padding-bottom: 10px;
+        border-bottom: 1px solid #eee;
+    }
+
+    .related-title {
+        font-size: 20px;
+        font-weight: 600;
+        margin-bottom: 20px;
+        padding-bottom: 10px;
+        border-bottom: 1px solid #eee;
+    }
+
+    .game-list {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 20px;
+    }
+
+    .game-item {
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        transition: transform 0.3s;
+    }
+
+    .game-item:hover {
+        transform: translateY(-5px);
+    }
+
+    .game-item a {
+        text-decoration: none;
+        color: inherit;
+    }
+
+    .game-cover img {
+        width: 100%;
+        height: 150px;
+        object-fit: cover;
+    }
+
+    .game-info {
+        padding: 10px;
+    }
+
+    .go-to-top {
+        position: fixed;
+        right: 30px;
+        bottom: 30px;
+        width: 40px;
+        height: 40px;
+        background: #f57005;
+        color: #fff;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.3s ease;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+        z-index: 1000;
+    }
+
+    .go-to-top.show {
+        opacity: 1;
+        visibility: visible;
+    }
+
+    .go-to-top:hover {
+        background: #e66600;
+        transform: translateY(-3px);
+    }
+
+    @media (max-width: 768px) {
+        .game-title {
+            font-size: 24px;
+        }
+
+        .game-list {
+            grid-template-columns: repeat(1, 1fr);
+        }
+
+        .game-meta {
+            gap: 10px;
+        }
+
+        .go-to-top {
+            right: 20px;
+            bottom: 20px;
+            width: 36px;
+            height: 36px;
+        }
+    }
+
+    .disclaimers {
+        color: #b1b1b1;
+        width: 80%;
+        margin: 20px auto;
+        margin-bottom: 60px;
+    }
+
+    .disclaimer-title {
+        font-size: 16px;
+        font-weight: 600;
+        margin-bottom: 10px;
+    }
+
+    .disclaimer-content {
+        font-size: 14px;
+        line-height: 1.6;
+    }
+
+    .disclaimer-content p {
+        margin-bottom: 0;
+    }
+</style>
+
+{include file="component/foot" /}
\ No newline at end of file
diff --git a/app/index/view/resources/index.php b/app/index/view/resources/index.php
new file mode 100644
index 0000000..36fdb08
--- /dev/null
+++ b/app/index/view/resources/index.php
@@ -0,0 +1,539 @@
+{include file="component/head" /}
+{include file="component/header-simple" /}
+
+<!-- 简约现代文章中心 -->
+<div class="modern-games-page">
+    <!-- 简约标题区 -->
+    <div class="modern-header">
+        <div class="container">
+            <h1 class="modern-title">资源中心</h1>
+            <p class="modern-subtitle">网络天下资源，一站式搜索</p>
+        </div>
+    </div>
+
+    <!-- 主要内容区 -->
+    <div class="container">
+        <div class="modern-layout">
+            <!-- 侧边分类导航 -->
+            <aside class="modern-sidebar">
+                <div class="sidebar-card">
+                    <h3 class="sidebar-title">
+                        <i class="layui-icon layui-icon-list"></i>
+                        <span>分类导航</span>
+                    </h3>
+                    <ul class="category-menu">
+                        {volist name="cate.subCategories" id="subCategory"}
+                        <li class="menu-item {$cate.id == $subCategory.id ? 'active' : ''}" data-cateid="{$subCategory.id}">
+                            <span>{$subCategory.name}</span>
+                            <i class="layui-icon layui-icon-right"></i>
+                        </li>
+                        {/volist}
+                    </ul>
+                </div>
+            </aside>
+
+            <!-- 文章内容区 -->
+            <main class="modern-main">
+                <!-- 文章列表 -->
+                <div class="game-grid" id="gameList">
+                    {volist name="cate.subCategories" id="subCategory"}
+                    {if $cate.id == $subCategory.id}
+                        {if !empty($subCategory.list)}
+                            {volist name="subCategory.list" id="game"}
+                            <game class="game-card">
+                                <div class="card-image">
+                                    <img src="{$game.icon|default=$subCategory.icon|default='/static/images/default-game.jpg'}" alt="{$game.title}">
+                                    <div class="image-overlay"></div>
+                                </div>
+                                <div class="card-content">
+                                    <div class="meta-info">
+                                        <span class="category-tag">{$subCategory.name}</span>
+                                        <time class="publish-date">{$game.create_time|date="Y-m-d"}</time>
+                                    </div>
+                                    <h3 class="game-title">{$game.title}</h3>
+                                    <div class="card-footer">
+                                        <div class="stats">
+                                            <span class="views"><i class="layui-icon layui-icon-eye"></i> {$game.views|default=0}</span>
+                                            <span class="likes"><i class="layui-icon layui-icon-praise"></i> {$game.likes|default=0}</span>
+                                        </div>
+                                        <a href="/index/game/detail?id={$game.id}" class="read-more">阅读更多</a>
+                                    </div>
+                                </div>
+                            </game>
+                            {/volist}
+                        {else}
+                            <div class="empty-state">
+                                <div class="empty-icon">
+                                    <i class="layui-icon layui-icon-template-1"></i>
+                                </div>
+                                <h4>暂无文章</h4>
+                                <p>当前分类下没有找到相关文章</p>
+                            </div>
+                        {/if}
+                    {/if}
+                    {/volist}
+                </div>
+
+                <!-- 分页 -->
+                <div class="modern-pagination" id="pagination"></div>
+            </main>
+        </div>
+    </div>
+</div>
+
+<script>
+    layui.use(['laypage', 'jquery'], function(){
+        var laypage = layui.laypage;
+        var $ = layui.jquery;
+
+        // 分类切换
+        $('.menu-item').on('click', function() {
+            var cateid = $(this).data('cateid');
+            var $menuItems = $('.menu-item');
+            
+            // 更新选中状态
+            $menuItems.removeClass('active');
+            $(this).addClass('active');
+            
+            // 加载文章
+            loadArticles(cateid, 1);
+        });
+
+        // 页面加载完成后，自动触发第一个分类的点击事件
+        $(document).ready(function() {
+            var $firstMenuItem = $('.menu-item').first();
+            if ($firstMenuItem.length > 0) {
+                $firstMenuItem.click();
+            }
+        });
+
+        // 加载文章函数
+        function loadArticles(cateid, page) {
+            $.ajax({
+                url: '/index/game/list',
+                type: 'POST',
+                data: {
+                    cate: cateid,
+                    page: page
+                },
+                beforeSend: function() {
+                    $('#gameList').html('<div class="loading-state"><i class="layui-icon layui-icon-loading"></i>加载中...</div>');
+                },
+                success: function(res) {
+                    if(res.code === 1) {
+                        var html = '';
+                        if(res.data.games && res.data.games.length > 0) {
+                            res.data.games.forEach(function(game) {
+                                html += `<game class="game-card">
+                                    <div class="card-image">
+                                        <img src="${game.icon || game.category_icon || '/static/images/default-game.jpg'}" alt="${game.title}">
+                                        <div class="image-overlay"></div>
+                                    </div>
+                                    <div class="card-content">
+                                        <div class="meta-info">
+                                            <span class="category-tag">${game.category_name || '未分类'}</span>
+                                            <time class="publish-date">${game.create_time || ''}</time>
+                                        </div>
+                                        <h3 class="game-title">${game.title}</h3>
+                                        <div class="card-footer">
+                                            <div class="stats">
+                                                <span class="views"><i class="layui-icon layui-icon-eye"></i> ${game.views || 0}</span>
+                                                <span class="likes"><i class="layui-icon layui-icon-praise"></i> ${game.likes || 0}</span>
+                                            </div>
+                                            <a href="/index/game/detail?id=${game.id}" class="read-more">阅读更多</a>
+                                        </div>
+                                    </div>
+                                </game>`;
+                            });
+                        } else {
+                            html = `<div class="empty-state">
+                                <div class="empty-icon">
+                                    <i class="layui-icon layui-icon-template-1"></i>
+                                </div>
+                                <h4>暂无文章</h4>
+                                <p>当前分类下没有找到相关文章</p>
+                            </div>`;
+                        }
+                        $('#gameList').html(html);
+                        
+                        // 渲染分页
+                        laypage.render({
+                            elem: 'pagination',
+                            count: res.data.total || 0,
+                            limit: res.data.per_page || 12,
+                            curr: res.data.current_page || 1,
+                            theme: '#1E9FFF',
+                            layout: ['prev', 'page', 'next'],
+                            jump: function(obj, first) {
+                                if(!first) {
+                                    loadArticles(cateid, obj.curr);
+                                }
+                            }
+                        });
+                    }
+                }
+            });
+        }
+    });
+</script>
+
+{include file="component/footer" /}
+
+<style>
+    /* 基础样式重置 */
+    .modern-games-page {
+        font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
+        color: #333;
+        line-height: 1.6;
+        background-color: #f9fafc;
+        padding-bottom: 60px;
+    }
+
+    /* 标题区样式 */
+    .modern-header {
+        background: linear-gradient(135deg, #1E9FFF 0%, #0d8aff 100%);
+        color: white;
+        padding: 80px 0 60px;
+        text-align: center;
+        margin-bottom: 40px;
+    }
+
+    .modern-title {
+        font-size: 2.5rem;
+        font-weight: 300;
+        margin-bottom: 15px;
+        letter-spacing: 1px;
+    }
+
+    .modern-subtitle {
+        font-size: 1.1rem;
+        font-weight: 300;
+        opacity: 0.9;
+        margin: 0;
+    }
+
+    /* 布局结构 */
+    .modern-layout {
+        display: grid;
+        grid-template-columns: 260px 1fr;
+        gap: 30px;
+    }
+
+    /* 侧边栏样式 */
+    .modern-sidebar {
+        position: sticky;
+        top: 30px;
+        align-self: start;
+    }
+
+    .sidebar-card {
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);
+        overflow: hidden;
+    }
+
+    .sidebar-title {
+        font-size: 1.1rem;
+        font-weight: 500;
+        padding: 20px;
+        margin: 0;
+        display: flex;
+        align-items: center;
+        color: #555;
+        border-bottom: 1px solid #f0f0f0;
+    }
+
+    .sidebar-title i {
+        margin-right: 10px;
+        font-size: 1.2rem;
+        color: #1E9FFF;
+    }
+
+    .category-menu {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .menu-item {
+        padding: 15px 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        border-left: 3px solid transparent;
+    }
+
+    .menu-item:hover {
+        background-color: #f8fafd;
+        color: #1E9FFF;
+    }
+
+    .menu-item.active {
+        background-color: #f0f7ff;
+        border-left-color: #1E9FFF;
+        color: #1E9FFF;
+        font-weight: 500;
+    }
+
+    .menu-item i {
+        font-size: 0.9rem;
+        color: #aaa;
+    }
+
+    .menu-item.active i,
+    .menu-item:hover i {
+        color: #1E9FFF;
+    }
+
+    /* 主内容区样式 */
+    .modern-main {
+        background: transparent;
+    }
+
+    /* 文章网格布局 */
+    .game-grid {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 20px;
+        margin-bottom: 40px;
+    }
+
+    /* 文章卡片样式 */
+    .game-card {
+        background: white;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.03);
+        transition: all 0.3s ease;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .game-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
+    }
+
+    .card-image {
+        height: 180px;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .card-image img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 0.5s ease;
+    }
+
+    .image-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
+    }
+
+    .game-card:hover .card-image img {
+        transform: scale(1.05);
+    }
+
+    .card-content {
+        padding: 20px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .meta-info {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 12px;
+        font-size: 0.85rem;
+        color: #666;
+    }
+
+    .category-tag {
+        background: #f0f7ff;
+        color: #1E9FFF;
+        padding: 3px 10px;
+        border-radius: 4px;
+        font-size: 0.75rem;
+    }
+
+    .game-title {
+        font-size: 1rem;
+        font-weight: 500;
+        margin: 0 0 10px;
+        color: #333;
+        line-height: 1.4;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .game-excerpt {
+        font-size: 0.9rem;
+        color: #666;
+        margin: 0 0 20px;
+        flex: 1;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .card-footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: auto;
+    }
+
+    .stats {
+        font-size: 0.85rem;
+        color: #999;
+        display: flex;
+        gap: 15px;
+    }
+
+    .stats i {
+        margin-right: 3px;
+    }
+
+    .read-more {
+        color: #1E9FFF;
+        font-size: 0.9rem;
+        text-decoration: none;
+        font-weight: 500;
+        transition: all 0.2s ease;
+        display: inline-flex;
+        align-items: center;
+    }
+
+    .read-more:hover {
+        color: #0d8aff;
+        text-decoration: underline;
+    }
+
+    /* 分页样式 */
+    .modern-pagination {
+        text-align: center;
+        margin-top: 40px;
+    }
+
+    .layui-laypage a, 
+    .layui-laypage span {
+        border-radius: 4px !important;
+        margin: 0 3px !important;
+    }
+
+    .layui-laypage a {
+        color: #666 !important;
+    }
+
+    .layui-laypage .layui-laypage-curr .layui-laypage-em {
+        background-color: #1E9FFF !important;
+    }
+
+    /* 空状态样式 */
+    .empty-state {
+        grid-column: 1 / -1;
+        text-align: center;
+        padding: 60px 20px;
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.03);
+    }
+
+    .empty-icon {
+        font-size: 3rem;
+        color: #ddd;
+        margin-bottom: 20px;
+    }
+
+    .empty-icon i {
+        font-size: inherit;
+    }
+
+    .empty-state h4 {
+        font-size: 1.2rem;
+        font-weight: 400;
+        color: #666;
+        margin: 0 0 10px;
+    }
+
+    .empty-state p {
+        color: #999;
+        font-size: 0.95rem;
+        margin: 0;
+    }
+
+    /* 加载状态 */
+    .loading-state {
+        grid-column: 1 / -1;
+        text-align: center;
+        padding: 40px;
+        color: #666;
+    }
+
+    .loading-state i {
+        font-size: 1.5rem;
+        margin-right: 10px;
+        animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+
+    /* 响应式设计 */
+    @media (max-width: 992px) {
+        .modern-layout {
+            grid-template-columns: 1fr;
+        }
+        
+        .modern-sidebar {
+            position: static;
+            margin-bottom: 30px;
+        }
+        
+        .game-grid {
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        }
+    }
+
+    @media (max-width: 768px) {
+        .modern-header {
+            padding: 60px 0 40px;
+        }
+        
+        .modern-title {
+            font-size: 2rem;
+        }
+    }
+
+    @media (max-width: 576px) {
+        .game-grid {
+            grid-template-columns: 1fr;
+        }
+        
+        .modern-title {
+            font-size: 1.8rem;
+        }
+        
+        .modern-subtitle {
+            font-size: 1rem;
+        }
+    }
+</style>
+
+{include file="component/foot" /}
\ No newline at end of file
diff --git a/app/index/view/resources/list.php b/app/index/view/resources/list.php
new file mode 100644
index 0000000..efc8155
--- /dev/null
+++ b/app/index/view/resources/list.php
@@ -0,0 +1,76 @@
+<div class="container py-5">
+    <div class="row g-4">
+        <!-- 左侧分类列表 -->
+        <div class="col-lg-3">
+            <div class="category-sidebar">
+                <div class="sidebar-header">
+                    <i class="layui-icon layui-icon-app"></i>
+                    <span>文章分类</span>
+                </div>
+                <div class="category-list">
+                    {volist name="categories" id="cate"}
+                    <div class="category-item {$category.id == $cate.id ? 'active' : ''}" data-cateid="{$cate.id}">{$cate.name}</div>
+                    {/volist}
+                </div>
+            </div>
+        </div>
+
+        <!-- 右侧文章列表 -->
+        <div class="col-lg-9">
+            {if $category}
+            <div class="category-header mb-4">
+                <h2 class="category-title">{$category.name}</h2>
+                <p class="category-desc">{$category.desc|default=''}</p>
+            </div>
+            {/if}
+
+            <div class="article-list">
+                {volist name="games" id="article"}
+                <div class="article-item">
+                    <div class="row g-0">
+                        <div class="col-md-4">
+                            <div class="article-image">
+                                <img src="{$article.image|default='/static/images/default.jpg'}" alt="{$article.title}">
+                            </div>
+                        </div>
+                        <div class="col-md-8">
+                            <div class="article-content">
+                                <h3 class="article-title">
+                                    <a href="/index/game/detail?id={$article.id}">{$article.title}</a>
+                                </h3>
+                                <p class="article-desc">{$article.desc|default=''}</p>
+                                <div class="article-meta">
+                                    <div class="article-stats">
+                                        <span><i class="layui-icon layui-icon-eye"></i> {$article.views|default=0}</span>
+                                        <span><i class="layui-icon layui-icon-praise"></i> {$article.likes|default=0}</span>
+                                        <span><i class="layui-icon layui-icon-date"></i> {$article.create_time|date="Y-m-d"}</span>
+                                    </div>
+                                    <a href="/index/game/detail?id={$article.id}" class="btn-detail">查看详情</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {/volist}
+            </div>
+
+            <!-- 分页 -->
+            <div class="mt-5">
+                {$games|raw}
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    layui.use(['layer'], function () {
+        var layer = layui.layer;
+        var $ = layui.$;
+
+        // 分类切换
+        $('.category-item').on('click', function() {
+            var cateid = $(this).data('cateid');
+            window.location.href = '/index/game/list?cate=' + cateid;
+        });
+    });
+</script>
diff --git a/config/database.php b/config/database.php
index 772af6c..ff49534 100644
--- a/config/database.php
+++ b/config/database.php
@@ -41,7 +41,8 @@ return [
             // 数据库类型
             'type'            => env('database.type', 'mysql'),
             // 服务器地址
-            'hostname'        => env('database.hostname', '121.36.243.179'),
+            // 'hostname'        => env('database.hostname', '121.36.243.179'),
+            'hostname'        => env('database.hostname', '127.0.0.1'),
             // 数据库名
             'database'        => env('database.database', 'yunzertest'),
             // 用户名