PF-doc/header.html at main · PFingan-Code/PF-doc · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<header class="bg-white dark:bg-gray-800 shadow-sm h-16" x-data="{ mobileMenuOpen: false }">
        <div class="container mx-auto px-4 h-full relative">
            <div class="flex justify-between items-center h-full">
                <a href="/">
                    <div class="flex items-center space-x-2">
                        <img src="assets/img/logo.png" alt="" class="site-logo h-8 w-8" id="site-logo-img">
                        <span class="text-lg font-bold" id="site-title">
                            <span class="text-primary">PF</span><span class="dark:text-white">-plugins</span>
                        </span>
                    </div>
                </a>
                <div class="flex items-center space-x-4">
                    <nav class="hidden md:flex space-x-6" id="desktop-nav">
                        <a href="index.html" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors font-medium">首页</a>
                        <div class="relative group" x-data="{ open: false }">
                            <button @click="open = !open" @click.away="open = false" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors font-medium flex items-center">
                                插件列表
                                <i class="fas fa-chevron-down ml-1 text-xs"></i>
                            </button>
                            <div x-show="open" class="absolute left-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg z-10" style="display: none;">
                                <a href="main.html?root=PF-gugubot" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                    <i class="fas fa-robot mr-2"></i> PF-gugubot
                                </a>
                                <a href="main.html?root=PF-cq-api" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                    <i class="fas fa-code mr-2"></i> PF-cq-api
                                </a>
                                <a href="main.html?root=PF-webui" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                    <i class="fas fa-globe mr-2"></i> PF-webui
                                </a>
                            </div>
                        </div>
                        <a href="main.html?root=常见问题" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors font-medium">常见问题</a>
                        <a href="main.html?root=支持与反馈" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors font-medium">支持与反馈</a>
                        <div class="relative group" x-data="{ open: false }">
                            <button @click="open = !open" @click.away="open = false" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors font-medium flex items-center">
                                <i class="fab fa-github mr-1"></i> Github
                                <i class="fas fa-chevron-down ml-1 text-xs"></i>
                            </button>
                            <div x-show="open" class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg z-10" style="display: none;">
                                <a href="https://github.com/PF-plugins/PF-gugubot" target="_blank" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                    <i class="fab fa-github mr-2"></i> PF-gugubot
                                </a>
                                <a href="https://github.com/PF-plugins/PF-cq-api" target="_blank" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                    <i class="fab fa-github mr-2"></i> PF-cq-api
                                </a>
                                <a href="https://github.com/PF-plugins/PF-webui" target="_blank" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                    <i class="fab fa-github mr-2"></i> PF-webui
                                </a>
                            </div>
                        </div>
                    </nav>

                    <!-- 搜索按钮 -->
                    <button id="search-button" class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none">
                        <i class="fas fa-search text-gray-600 dark:text-gray-300"></i>
                    </button>

                    <button id="dark-mode-toggle" class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none">
                        <i class="fas fa-moon dark:hidden text-gray-600"></i>
                        <i class="fas fa-sun hidden dark:block text-yellow-300"></i>
                    </button>

                    <!-- 移动端菜单按钮 -->
                    <button @click="mobileMenuOpen = !mobileMenuOpen" class="md:hidden w-10 h-10 rounded flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none">
                        <i class="fas fa-bars text-gray-600 dark:text-gray-300"></i>
                    </button>
                </div>
            </div>

            <!-- 移动端菜单 -->
            <div x-show="mobileMenuOpen"
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0 -translate-y-2"
                x-transition:enter-end="opacity-100 translate-y-0"
                x-transition:leave="transition ease-in duration-150"
                x-transition:leave-start="opacity-100 translate-y-0"
                x-transition:leave-end="opacity-0 -translate-y-2"
                class="md:hidden py-4 border-t dark:border-gray-700 bg-white dark:bg-gray-800 absolute left-0 right-0 z-50 shadow-md"
                style="display: none; top: 4rem;">
                <div class="container mx-auto px-4">
                    <nav class="flex flex-col space-y-4" id="mobile-nav">
                        <!-- 移动端导航链接将由JavaScript动态生成 -->
                    </nav>
                </div>
            </div>
        </div>
    </header>

<!-- 搜索模态窗口 -->
<div id="search-modal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50 hidden">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl overflow-hidden">
        <div class="p-4 border-b dark:border-gray-700 flex justify-between items-center">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">搜索文档</h3>
            <button id="close-search-modal" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
                <i class="fas fa-times text-gray-600 dark:text-gray-300"></i>
            </button>
        </div>
        <div class="p-4">
            <div class="relative">
                <input id="search-input" type="text" placeholder="输入关键词..." class="w-full px-4 py-2 border dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-primary">
                <button id="do-search" class="absolute right-2 top-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary">
                    <i class="fas fa-search"></i>
                </button>
            </div>
            <div id="search-results" class="mt-4 max-h-96 overflow-y-auto">
                <!-- 搜索结果将在这里显示 -->
            </div>
        </div>
    </div>
</div>