iapt-platform
/
mint
mirror of https://github.com/iapt-platform/mint.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539
							<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $book['title'] }}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.3.2/dist/css/tabler.min.css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.3.2/dist/js/tabler.min.js"></script>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            transition: background-color 0.3s, color 0.3s;
        }

        .main-container {
            display: flex;
            gap: 20px;
            padding: 20px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .toc-sidebar {
            width: 250px;
            flex-shrink: 0;
            display: none;
        }

        .content-area {
            flex-grow: 1;
            max-width: 100%;
        }

        .right-sidebar {
            width: 300px;
            flex-shrink: 0;
            display: none;
        }

        .related-books {
            margin-top: 30px;
        }

        .card-img-container {
            height: 150px;
            overflow: hidden;
        }

        .card-img-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        @media (max-width: 767px) {
            .content-area {
                width: 100%;
            }

            .main-container {
                padding: 0;
            }

            .card {
                border: none;
            }
        }

        @media (min-width: 768px) {
            .toc-sidebar {
                display: block;
            }

            .content-area {
                max-width: calc(100% - 270px);
            }
        }

        @media (min-width: 992px) {
            .right-sidebar {
                display: block;
            }

            .content-area {
                max-width: calc(100% - 570px);
            }
        }

        .dark-mode {
            background-color: #1a1a1a;
            color: #ffffff;
        }

        .dark-mode .card {
            background-color: #2a2a2a;
            border-color: #3a3a3a;
            color: #ffffff;
        }

        .dark-mode .navbar {
            background-color: #2a2a2a;
        }

        .dark-mode .offcanvas {
            background-color: #2a2a2a;
            color: #ffffff;
        }

        .dark-mode .offcanvas .nav-link {
            color: #ffffff;
        }

        .dark-mode .toc-sidebar,
        .dark-mode .right-sidebar {
            background-color: #2a2a2a;
        }

        .toc-sidebar ul,
        .offcanvas-body ul {
            list-style: none;
            padding: 0;
        }

        .toc-sidebar ul li,
        .offcanvas-body ul li {
            padding: 5px 0;
        }

        .toc-sidebar ul li a,
        .offcanvas-body ul li a {
            color: #206bc4;
            text-decoration: none;
        }

        .toc-sidebar ul li a:hover,
        .offcanvas-body ul li a:hover {
            text-decoration: underline;
        }

        .dark-mode .toc-sidebar ul li a,
        .dark-mode .offcanvas-body ul li a {
            color: #4dabf7;
        }


        .toc-level-1 {
            padding-left: 0 !important;
        }

        .toc-level-2 {
            padding-left: 16px !important;
        }

        .toc-level-3 {
            padding-left: 24px !important;
        }

        .toc-level-4 {
            padding-left: 36px !important;
        }

        .toc-disabled {
            color: #6c757d;
            cursor: not-allowed;
            pointer-events: none;
        }

        .dark-mode .toc-disabled {
            color: #adb5bd;
        }

        .toc_item:hover {
            color: #206bc4 !important;
            background: rgba(32, 107, 196, 0.08);
            border-radius: 2px;
            cursor: 'pointer';
        }

        .toc-active {
            color: #206bc4 !important;
            font-weight: 600;
            background: rgba(32, 107, 196, 0.08);
            border-left: 3px solid #206bc4;
            border-radius: 2px;
            cursor: default;
            pointer-events: none;
        }

        .dark-mode .toc-active {
            color: #4dabf7 !important;
            background: rgba(77, 171, 247, 0.1);
            border-left-color: #4dabf7;
        }
    </style>
</head>

<body class="{{ session('theme', 'light') }}-mode">

    <!-- Navbar -->
    <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#tocDrawer" aria-controls="tocDrawer">
                <span class="navbar-toggler-icon"></span>
            </button>
            {{-- 面包屑：文集标题 > 文章标题 --}}
            <div class="navbar-brand d-flex flex-column lh-1">
                @if(!empty($book['anthology']))
                <small class="text-muted" style="font-size:.75rem;">
                    <a href="{{ route('library.anthology.show', $book['anthology']['id']) }}" class="text-muted text-decoration-none">
                        {{ $book['anthology']['title'] }}
                    </a>
                </small>
                @endif
                <span>{{ $book['title'] }}</span>
            </div>
            <div class="navbar-nav flex-row order-md-last align-items-center">
                {{-- Desktop Dropdown --}}
                @if(!empty($channels))
                <div class="nav-item dropdown d-none d-md-block me-2">
                    <a href="#" class="nav-link" data-bs-toggle="dropdown">
                        <i class="fas fa-layer-group me-1"></i>
                        版本
                    </a>

                    <div class="dropdown-menu dropdown-menu-end">
                        @foreach($channels as $channel)
                        <a class="dropdown-item"
                            href="{{ request()->fullUrlWithQuery(['channel' => $channel['id']]) }}">
                            {{ $channel['name'] }}
                            <small class="text-muted">
                                ({{ __('language.' . $channel['lang']) }})
                            </small>
                        </a>
                        @endforeach
                    </div>
                </div>

                {{-- Mobile Drawer Trigger --}}
                <div class="nav-item d-md-none me-2">
                    <a href="#" class="nav-link"
                        data-bs-toggle="offcanvas"
                        data-bs-target="#channelDrawer">
                        <i class="fas fa-layer-group"></i>
                    </a>
                </div>
                @endif
                <div class="nav-item">
                    <a href="#" class="nav-link" id="themeToggle">
                        <i class="fas fa-moon"></i>
                    </a>
                </div>
                @auth
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown">
                        <span class="avatar avatar-sm" style="background-image: url({{ auth()->user()->avatar ?? '' }})"></span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end">
                        <a class="dropdown-item" href="#">Profile</a>
                        <a class="dropdown-item" href="{{ route('logout') }}">Logout</a>
                    </div>
                </div>
                @endauth
            </div>
        </div>
    </header>

    <!-- TOC Drawer (Mobile) -->
    @if(!empty($channels))
    <div class="offcanvas offcanvas-end"
        tabindex="-1"
        id="channelDrawer">

        <div class="offcanvas-header">
            <h5 class="offcanvas-title">选择版本</h5>

            <button type="button"
                class="btn-close"
                data-bs-dismiss="offcanvas">
            </button>
        </div>

        <div class="offcanvas-body">

            <div class="list-group list-group-flush">

                @foreach($channels as $channel)

                <a
                    href="{{ request()->fullUrlWithQuery(['channel' => $channel['id']]) }}"
                    class="list-group-item list-group-item-action">

                    <div class="fw-bold">
                        {{ $channel['name'] }}
                    </div>

                    <small class="text-muted">
                        {{ __('language.' . $channel['lang']) }}
                    </small>

                </a>

                @endforeach

            </div>

        </div>
    </div>
    @endif
    <div class="offcanvas offcanvas-start" tabindex="-1" id="tocDrawer" aria-labelledby="tocDrawerLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="tocDrawerLabel">目录</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            @if(isset($book['toc']) && count($book['toc']) > 0)
            <ul>
                @foreach ($book['toc'] as $item)
                <li class="toc_item toc-level-{{ $item['level'] }} {{ $item['active'] ?? false ? 'toc-active' : ($item['disabled'] ? 'toc-disabled' : '') }}">
                    @if($item['active'] ?? false)
                    <span>{{ $item['title'] }}</span>
                    @elseif(!$item['disabled'])
                    {{-- ✅ 修改1：使用文集阅读路由，传 anthology + article 两个参数 --}}
                    <a href="{{ route('library.anthology.read', ['anthology' => $anthologyId, 'article' => $item['id']]) }}">
                        {{ $item['title'] }}
                    </a>
                    @else
                    <span>{{ $item['title'] }}</span>
                    @endif
                </li>
                @endforeach
            </ul>
            @else
            <div class="alert alert-warning">此书没有目录</div>
            @endif
        </div>
    </div>

    <!-- Main Content Area -->
    <div class="main-container">

        <!-- TOC Sidebar (Tablet+) -->
        <div class="toc-sidebar card">
            <div class="card-body">
                <h5>目录</h5>
                @if(isset($book['toc']) && count($book['toc']) > 0)
                <ul>
                    @foreach ($book['toc'] as $item)
                    <li class="toc_item toc-level-{{ $item['level'] }} {{ $item['active'] ?? false ? 'toc-active' : ($item['disabled'] ? 'toc-disabled' : '') }}">
                        @if($item['active'] ?? false)
                        <span>{{ $item['title'] }}</span>
                        @elseif(!$item['disabled'])
                        {{-- ✅ 修改1：同上 --}}
                        <a href="{{ route('library.anthology.read', ['anthology' => $anthologyId, 'article' => $item['id']]) }}">
                            {{ $item['title'] }}
                        </a>
                        @else
                        <span>{{ $item['title'] }}</span>
                        @endif
                    </li>
                    @endforeach
                </ul>
                @else
                <div class="alert alert-warning">此书没有目录</div>
                @endif
            </div>
        </div>

        <!-- Main Content -->
        <div class="content-area card">
            <div class="card-body">

                <div>
                    <h2>{{ $book['title'] }}</h2>
                    <p>
                        <strong>Author:</strong>
                        <span>
                            {{ $book['author'] }}
                            @if(isset($book['publisher']))
                            @
                            <a href="{{ route('blog.index', ['user' => $book['publisher']->username]) }}">
                                {{ $book['publisher']->nickname }}
                            </a>
                            @endif
                        </span>
                    </p>

                    <div class="content">
                        @if(isset($book['content']) && count($book['content']) > 0)
                        @foreach ($book['content'] as $paragraph)
                        <div id="para-{{ $paragraph['id'] }}">
                            @foreach ($paragraph['text'] as $rows)
                            <div style="display:flex;">
                                @foreach ($rows as $col)
                                <div style="flex:1;">
                                    @if($paragraph['level'] < 8)
                                        {{-- ✅ 修改3：{!! !!} 不转义，渲染 HTML 内容 --}}
                                        <h{{ $paragraph['level'] }}>{!! $col !!}</h{{ $paragraph['level'] }}>
                                        @else
                                        <p>{!! $col !!}</p>
                                        @endif
                                </div>
                                @endforeach
                            </div>
                            @endforeach
                        </div>
                        @endforeach
                        @else
                        <div>没有内容</div>
                        @endif
                    </div>
                </div>

                <!-- Nav buttons -->
                <div class="mt-6 pt-6">
                    <ul class="pagination">
                        @if(!empty($book['pagination']['prev']))
                        <li class="page-item page-prev">
                            {{-- ✅ 修改2：翻页也用文集路由 --}}
                            <a class="page-link" href="{{ route('library.anthology.read', ['anthology' => $anthologyId, 'article' => $book['pagination']['prev']['id']]) }}">
                                <div class="row align-items-center">
                                    <div class="col-auto">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
                                            <path d="M15 6l-6 6l6 6"></path>
                                        </svg>
                                    </div>
                                    <div class="col">
                                        <div class="page-item-subtitle">上一篇</div>
                                        <div class="page-item-title">{{ $book['pagination']['prev']['title'] }}</div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        @endif
                        @if(!empty($book['pagination']['next']))
                        <li class="page-item page-next">
                            <a class="page-link" href="{{ route('library.anthology.read', ['anthology' => $anthologyId, 'article' => $book['pagination']['next']['id']]) }}">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <div class="page-item-subtitle">下一篇</div>
                                        <div class="page-item-title">{{ $book['pagination']['next']['title'] }}</div>
                                    </div>
                                    <div class="col-auto">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
                                            <path d="M9 6l6 6l-6 6"></path>
                                        </svg>
                                    </div>
                                </div>
                            </a>
                        </li>
                        @endif
                    </ul>
                </div>

                <!-- Related Books -->
                @if(!empty($relatedBooks))
                <div class="related-books">
                    <h3>Related Books</h3>
                    <div class="row row-cards">
                        @foreach ($relatedBooks as $relatedBook)
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-img-container">
                                    <img src="{{ $relatedBook['image'] }}" alt="{{ $relatedBook['title'] }}">
                                </div>
                                <div class="card-body">
                                    <h5 class="card-title">{{ $relatedBook['title'] }}</h5>
                                    <p class="card-text">{{ $relatedBook['description'] }}</p>
                                    <a href="{{ $relatedBook['link'] }}" class="btn btn-primary">Read Now</a>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

            </div>
        </div>

        <!-- Right Sidebar (Desktop) -->
        <div class="right-sidebar card">
            <div class="card-body">
                @if(!empty($book['downloads']))
                <h5>下载</h5>
                <ul class="list-unstyled">
                    @foreach ($book['downloads'] as $download)
                    <li>
                        <a href="{{ $download['url'] }}" class="btn btn-outline-primary mb-2 w-100">
                            <i class="fas fa-download me-2"></i>{{ $download['format'] }}
                        </a>
                    </li>
                    @endforeach
                </ul>
                @endif

                @if(!empty($book['categories']))
                <h5>分类</h5>
                @foreach ($book['categories'] as $category)
                <span class="badge bg-blue text-blue-fg">{{ $category['name'] }}</span>
                @endforeach
                @endif

                @if(!empty($book['tags']))
                <h5>标签</h5>
                @foreach ($book['tags'] as $tag)
                <span class="badge me-1">{{ $tag['name'] }}</span>
                @endforeach
                @endif
            </div>
        </div>

    </div>

    <script>
        const themeToggle = document.getElementById('themeToggle');
        themeToggle.addEventListener('click', (e) => {
            e.preventDefault();
            const isDark = document.body.classList.contains('dark-mode');
            document.body.classList.toggle('dark-mode', !isDark);
            document.body.classList.toggle('light-mode', isDark);
            fetch('{{ route("theme.toggle") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    theme: isDark ? 'light' : 'dark'
                })
            });
            themeToggle.innerHTML = isDark ? '<i class="fas fa-moon"></i>' : '<i class="fas fa-sun"></i>';
        });
    </script>
</body>

</html>