chill/menav
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Zuoling Rong
2025-01-31 20:28:13 +08:00
parent a85d49cc16
commit 4b05fd9bb3
6 changed files with 1427 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
CHANGELOG.md Normal file
View File

@@ -0,0 +1,52 @@
# 更新日志
本项目遵循 [语义化版本](https://semver.org/lang/zh-CN/) 规范。
## [1.0.0] - 2024-03-20
### 新增
- 基础导航页面结构
- 深色主题设计
- 响应式布局
- 搜索功能
- 多页面管理（首页、项目、文章、朋友）
- 动画效果
### 功能模块
- 左侧固定导航栏
- 主导航菜单
- 社交媒体链接
- 右侧内容区域
- 搜索框
- 分类展示
- 网站卡片
### 技术实现
- 使用HTML5语义化标签
- CSS3现代特性
- Flexbox布局
- Grid系统
- 响应式设计
- 过渡动画
- 原生JavaScript实现
- 页面切换
- 搜索过滤
- 动画控制
### 优化
- 移动端适配
- 性能优化
- 代码结构优化
### 文档
- 添加README.md
- 添加开发文档
- 添加贡献指南
- 添加更新日志
## [0.1.0] - 2025-01-31
### 新增
- 项目初始化
- 基础文件结构
- 开发环境配置

154
CONTRIBUTING.md Normal file
View File

@@ -0,0 +1,154 @@
# 贡献指南
感谢您对本项目感兴趣！我们欢迎任何形式的贡献，包括但不限于：功能改进、bug修复、文档完善等。
## 目录
- [行为准则](#行为准则)
- [如何贡献](#如何贡献)
- [开发流程](#开发流程)
- [提交规范](#提交规范)
- [问题反馈](#问题反馈)
## 行为准则
本项目采用 [Contributor Covenant](https://www.contributor-covenant.org/version/2/0/code_of_conduct/) 行为准则。参与本项目即表示您同意遵守此准则。
## 如何贡献
### 1. Fork 项目
1. 访问 [项目主页](https://github.com/yourusername/nav-page)
2. 点击 "Fork" 按钮创建项目副本
### 2. 克隆项目
```bash
git clone https://github.com/your-username/nav-page.git
cd nav-page
```
### 3. 创建分支
```bash
git checkout -b feature/your-feature-name
# 或
git checkout -b fix/your-fix-name
```
### 4. 进行修改
- 遵循项目的代码规范
- 保持代码整洁
- 添加必要的注释
- 更新相关文档
### 5. 提交更改
```bash
git add .
git commit -m "feat: add new feature"
git push origin feature/your-feature-name
```
### 6. 创建 Pull Request
1. 访问您的 Fork 仓库
2. 点击 "Pull Request" 按钮
3. 选择要合并的分支
4. 填写 PR 描述
5. 提交 PR
## 开发流程
### 1. 分支管理
- `main`: 主分支，保持稳定
- `develop`: 开发分支
- `feature/*`: 新功能分支
- `fix/*`: 修复分支
- `docs/*`: 文档更新分支
### 2. 开发步骤
1. 从最新的 develop 分支创建特性分支
2. 在特性分支上进行开发
3. 提交代码前进行自测
4. 创建 Pull Request
5. 等待代码审查
6. 合并到 develop 分支
## 提交规范
### 1. 提交信息格式
```
<type>(<scope>): <subject>
<body>
<footer>
```
### 2. Type 类型
- feat: 新功能
- fix: 修复
- docs: 文档更改
- style: 代码格式
- refactor: 重构
- test: 测试
- chore: 构建过程或辅助工具的变动
### 3. 示例
```
feat(nav): add new navigation item
- Add social media links
- Update navigation styles
- Add hover effects
Closes #123
```
## 问题反馈
### 1. 提交 Issue
- 使用适当的 Issue 模板
- 清晰描述问题
- 提供复现步骤
- 附上相关截图或代码
### 2. Issue 类型
- Bug 报告
- 功能请求
- 文档完善
- 使用疑问
## 审查标准
### 1. 代码审查
- 代码质量
- 命名规范
- 注释完整性
- 测试覆盖
- 性能影响
### 2. 文档审查
- 文档完整性
- 描述准确性
- 示例正确性
- 格式规范
## 发布流程
### 1. 版本号规范
遵循 [语义化版本](https://semver.org/lang/zh-CN/) 规范：
- 主版本号：不兼容的 API 修改
- 次版本号：向下兼容的功能性新增
- 修订号：向下兼容的问题修正
### 2. 发布步骤
1. 更新版本号
2. 更新 CHANGELOG.md
3. 创建发布标签
4. 发布新版本
## 联系方式
如有任何问题，请通过以下方式联系我们：
- 提交 Issue
- 发送邮件
- 加入讨论组
感谢您的贡献！

286
DEVELOPMENT.md Normal file
View File

@@ -0,0 +1,286 @@
# 开发文档
## 快速开始
### 开发环境要求
- 现代浏览器（Chrome/Firefox/Safari/Edge 最新版本）
- 代码编辑器（推荐 VS Code）
- 本地服务器（可选，用于开发）
### 环境设置
1. 克隆项目：
```bash
git clone [repository-url]
cd [project-name]
```
2. VS Code 推荐插件：
- Live Server（实时预览）
- Prettier（代码格式化）
- ESLint（代码检查）
- CSS Peek（CSS 查看）
3. 启动开发服务器：
```bash
# 使用 Python
python -m http.server 8000
# 或使用 VS Code Live Server
# 右键 index.html -> Open with Live Server
```
## 项目架构
### 整体架构
```
[项目根目录]
├── index.html # 主页面
├── style.css # 样式文件
├── script.js # 主脚本
├── README.md # 项目说明
└── DEVELOPMENT.md # 开发文档
```
### 核心模块说明
#### 1. 页面管理模块
```javascript
// 页面切换核心函数
function showPage(pageId, skipSearchReset = false) {
// pageId: 目标页面ID
// skipSearchReset: 是否跳过搜索重置
}
// 使用示例：
showPage('home'); // 切换到首页
showPage('projects', true); // 切换到项目页，保持搜索状态
```
#### 2. 搜索引擎模块
```javascript
// 搜索实现核心函数
function performSearch(searchTerm) {
// searchTerm: 搜索关键词
// 返回：匹配的结果
}
// 搜索结果处理
function handleSearchResults(results) {
// results: 搜索结果数组
}
```
#### 3. 动画系统
```css
/* 页面切换动画 */
.page {
transition: opacity 0.3s ease, transform 0.3s ease;
}
/* 搜索结果动画 */
.search-section {
transition: opacity 0.3s ease, transform 0.3s ease;
}
```
## 开发指南
### 1. 添加新页面
1. HTML 结构：
```html
<div class="page" id="your-page-id">
<div class="welcome-section">
<h2>页面标题</h2>
<p class="subtitle">页面描述</p>
</div>
<section class="category">
<h2><i class="fas fa-icon"></i> 分类标题</h2>
<div class="sites-grid">
<!-- 网站卡片 -->
</div>
</section>
</div>
```
2. 注册导航：
```html
<a href="#" class="nav-item" data-page="your-page-id">
<i class="fas fa-icon"></i>
<span>页面名称</span>
</a>
```
3. 添加样式：
```css
#your-page-id {
/* 页面特定样式 */
}
#your-page-id .category {
/* 分类样式 */
}
```
### 2. 自定义搜索范围
1. 修改搜索逻辑：
```javascript
function performSearch(searchTerm) {
// 1. 在 script.js 中找到 performSearch 函数
// 2. 添加新的搜索范围：
const newPageCards = document.querySelectorAll('#your-page-id .site-card');
newPageCards.forEach(card => {
// 添加搜索逻辑
});
}
```
2. 添加结果展示区域：
```html
<section class="category search-section" data-section="your-page-id">
<h2><i class="fas fa-icon"></i> 新页面匹配项</h2>
<div class="sites-grid"></div>
</section>
```
### 3. 添加新功能
1. 创建功能模块：
```javascript
// 在 script.js 中添加新模块
const newFeature = {
init() {
// 初始化代码
},
// 功能方法
someMethod() {
// 方法实现
}
};
// 初始化
document.addEventListener('DOMContentLoaded', () => {
newFeature.init();
});
```
2. 添加相关样式：
```css
/* 在 style.css 中添加样式 */
.new-feature {
/* 功能相关样式 */
}
```
## 性能优化指南
### 1. 动画性能优化
```css
/* 使用 transform 代替位置属性 */
.element {
transform: translateX(100px);
will-change: transform;
}
/* 使用 opacity 代替 visibility */
.element {
opacity: 0;
transition: opacity 0.3s ease;
}
```
### 2. 搜索性能优化
```javascript
// 实现防抖
const debounce = (fn, delay) => {
let timer = null;
return (...args) => {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
};
// 使用 Map 优化查找
const searchIndex = new Map();
```
### 3. DOM 操作优化
```javascript
// 使用文档片段
const fragment = document.createDocumentFragment();
elements.forEach(el => fragment.appendChild(el));
container.appendChild(fragment);
// 批量更新
requestAnimationFrame(() => {
// DOM 更新操作
});
```
## 调试技巧
### 1. 常见问题排查
```javascript
// 页面切换问题
console.log('当前页面:', currentPageId);
console.log('搜索状态:', isSearchActive);
// 搜索问题
console.log('搜索词:', searchTerm);
console.log('结果数:', results.length);
```
### 2. 性能监控
```javascript
// 性能标记
performance.mark('featureStart');
// ... 代码执行 ...
performance.mark('featureEnd');
performance.measure('featureDuration', 'featureStart', 'featureEnd');
```
## 发布流程
### 1. 代码检查
```bash
# 运行代码格式化
prettier --write "**/*.{html,css,js}"
# 运行代码检查
eslint "**/*.js"
```
### 2. 性能测试
- 使用 Chrome DevTools 的 Performance 面板
- 检查页面加载时间
- 检查动画性能
- 内存使用监控
### 3. 部署前检查清单
- [ ] 所有链接可访问
- [ ] 响应式布局正常
- [ ] 搜索功能正常
- [ ] 动画效果流畅
- [ ] 控制台无错误
## 维护指南
### 1. 代码更新
- 遵循语义化版本控制
- 保持文档同步更新
- 记录重要更改
### 2. 性能监控
- 定期检查性能指标
- 分析用户反馈
- 优化改进建议
### 3. 问题追踪
- 使用 GitHub Issues 跟踪问题
- 详细记录问题复现步骤
- 及时响应用户反馈

344
index.html Normal file
View File

@@ -0,0 +1,344 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的导航</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="loading">
<div class="layout">
<!-- 左侧导航 -->
<nav class="sidebar">
<div class="logo">
<h1>导航站</h1>
</div>
<div class="nav-section">
<a href="#" class="nav-item active" data-page="home">
<i class="fas fa-home"></i>
<span>首页</span>
</a>
<a href="#" class="nav-item" data-page="projects">
<i class="fas fa-project-diagram"></i>
<span>项目</span>
</a>
<a href="#" class="nav-item" data-page="articles">
<i class="fas fa-book"></i>
<span>文章</span>
</a>
<a href="#" class="nav-item" data-page="friends">
<i class="fas fa-users"></i>
<span>朋友</span>
</a>
</div>
<div class="nav-section">
<div class="section-title">在线账号</div>
<a href="https://github.com" class="nav-item" target="_blank">
<i class="fab fa-github"></i>
<span>GitHub</span>
</a>
<a href="https://t.me" class="nav-item" target="_blank">
<i class="fab fa-telegram"></i>
<span>Telegram</span>
</a>
<a href="https://twitter.com" class="nav-item" target="_blank">
<i class="fab fa-twitter"></i>
<span>Twitter</span>
</a>
<a href="https://steam.com" class="nav-item" target="_blank">
<i class="fab fa-steam"></i>
<span>Steam</span>
</a>
</div>
</nav>
<!-- 右侧内容区 -->
<main class="content">
<div class="search-box">
<input type="text" id="search" placeholder="搜索...">
<i class="fas fa-search"></i>
</div>
<!-- 首页 -->
<div class="page active" id="home">
<div class="welcome-section">
<h2>Hello,</h2>
<h3>Welcome to My Navigation</h3>
<p class="subtitle">Front-end Developer / Open Source Enthusiast / Blogger</p>
</div>
<section class="category">
<h2><i class="fas fa-star"></i> 常用网站</h2>
<div class="sites-grid">
<a href="https://www.google.com" class="site-card">
<i class="fab fa-google"></i>
<h3>Google</h3>
<p>全球最大的搜索引擎</p>
</a>
<a href="https://www.github.com" class="site-card">
<i class="fab fa-github"></i>
<h3>GitHub</h3>
<p>代码托管平台</p>
</a>
</div>
</section>
<section class="category">
<h2><i class="fas fa-graduation-cap"></i> 学习资源</h2>
<div class="sites-grid">
<a href="https://www.bilibili.com" class="site-card">
<i class="fas fa-play-circle"></i>
<h3>哔哩哔哩</h3>
<p>视频学习平台</p>
</a>
<a href="https://www.zhihu.com" class="site-card">
<i class="fas fa-question-circle"></i>
<h3>知乎</h3>
<p>问答社区</p>
</a>
</div>
</section>
</div>
<!-- 项目页 -->
<div class="page" id="projects">
<div class="welcome-section">
<h2>我的项目</h2>
<p class="subtitle">这里展示了我的一些个人项目和开源贡献</p>
</div>
<section class="category">
<h2><i class="fas fa-code"></i> 个人项目</h2>
<div class="sites-grid">
<a href="#" class="site-card">
<i class="fas fa-compass"></i>
<h3>个人导航站</h3>
<p>一个简洁美观的个人导航页面</p>
</a>
<a href="#" class="site-card">
<i class="fas fa-tasks"></i>
<h3>Todo List</h3>
<p>基于Vue3的待办事项管理器</p>
</a>
<a href="#" class="site-card">
<i class="fas fa-blog"></i>
<h3>个人博客</h3>
<p>使用Hexo搭建的技术博客</p>
</a>
</div>
</section>
<section class="category">
<h2><i class="fas fa-code-branch"></i> 开源贡献</h2>
<div class="sites-grid">
<a href="#" class="site-card">
<i class="fab fa-github"></i>
<h3>Project A</h3>
<p>开源项目贡献</p>
</a>
<a href="#" class="site-card">
<i class="fab fa-github"></i>
<h3>Project B</h3>
<p>开源项目贡献</p>
</a>
</div>
</section>
</div>
<!-- 文章页 -->
<div class="page" id="articles">
<div class="welcome-section">
<h2>技术文章</h2>
<p class="subtitle">分享我的技术文章和学习笔记</p>
</div>
<section class="category">
<h2><i class="fas fa-pen"></i> 最新文章</h2>
<div class="sites-grid">
<a href="#" class="site-card">
<i class="fab fa-vuejs"></i>
<h3>Vue3最佳实践</h3>
<p>Vue3组合式API的使用技巧</p>
</a>
<a href="#" class="site-card">
<i class="fab fa-js"></i>
<h3>JavaScript进阶</h3>
<p>JavaScript高级特性解析</p>
</a>
<a href="#" class="site-card">
<i class="fab fa-git-alt"></i>
<h3>Git使用技巧</h3>
<p>Git常用命令和工作流</p>
</a>
<a href="#" class="site-card">
<i class="fab fa-docker"></i>
<h3>Docker入门</h3>
<p>Docker基础知识和实践</p>
</a>
</div>
</section>
<section class="category">
<h2><i class="fas fa-book"></i> 学习笔记</h2>
<div class="sites-grid">
<a href="#" class="site-card">
<i class="fab fa-react"></i>
<h3>React Hooks</h3>
<p>React Hooks最佳实践</p>
</a>
<a href="#" class="site-card">
<i class="fab fa-node-js"></i>
<h3>Node.js实战</h3>
<p>Node.js服务端开发笔记</p>
</a>
<a href="#" class="site-card">
<i class="fab fa-css3"></i>
<h3>CSS技巧</h3>
<p>CSS常用技巧总结</p>
</a>
<a href="#" class="site-card">
<i class="fas fa-database"></i>
<h3>数据库设计</h3>
<p>数据库架构和优化笔记</p>
</a>
</div>
</section>
<section class="category">
<h2><i class="fas fa-code"></i> 源码解析</h2>
<div class="sites-grid">
<a href="#" class="site-card">
<i class="fab fa-vuejs"></i>
<h3>Vue源码解析</h3>
<p>Vue.js核心原理解析</p>
</a>
<a href="#" class="site-card">
<i class="fab fa-react"></i>
<h3>React原理</h3>
<p>React核心机制解析</p>
</a>
</div>
</section>
</div>
<!-- 朋友页 -->
<div class="page" id="friends">
<div class="welcome-section">
<h2>友情链接</h2>
<p class="subtitle">优秀的博主和朋友们</p>
</div>
<section class="category">
<h2><i class="fas fa-user-friends"></i> 技术博主</h2>
<div class="sites-grid">
<a href="#" class="site-card">
<i class="fas fa-code"></i>
<h3>小明的博客</h3>
<p>全栈开发工程师，分享技术心得</p>
</a>
<a href="#" class="site-card">
<i class="fas fa-paint-brush"></i>
<h3>小红的前端</h3>
<p>专注前端开发与设计</p>
</a>
<a href="#" class="site-card">
<i class="fas fa-server"></i>
<h3>小张的后端</h3>
<p>分享后端开发经验</p>
</a>
<a href="#" class="site-card">
<i class="fas fa-mobile-alt"></i>
<h3>小李的移动端</h3>
<p>移动应用开发专家</p>
</a>
</div>
</section>
<section class="category">
<h2><i class="fas fa-laptop-code"></i> 技术社区</h2>
<div class="sites-grid">
<a href="https://github.com" class="site-card">
<i class="fab fa-github"></i>
<h3>GitHub</h3>
<p>开源代码托管平台</p>
</a>
<a href="https://stackoverflow.com" class="site-card">
<i class="fab fa-stack-overflow"></i>
<h3>Stack Overflow</h3>
<p>程序员问答社区</p>
</a>
<a href="https://juejin.cn" class="site-card">
<i class="fas fa-book"></i>
<h3>掘金</h3>
<p>高质量技术社区</p>
</a>
<a href="https://v2ex.com" class="site-card">
<i class="fas fa-comments"></i>
<h3>V2EX</h3>
<p>创意工作者社区</p>
</a>
</div>
</section>
<section class="category">
<h2><i class="fas fa-coffee"></i> 休闲娱乐</h2>
<div class="sites-grid">
<a href="https://www.bilibili.com" class="site-card">
<i class="fas fa-play-circle"></i>
<h3>哔哩哔哩</h3>
<p>视频弹幕网站</p>
</a>
<a href="https://www.zhihu.com" class="site-card">
<i class="fas fa-question-circle"></i>
<h3>知乎</h3>
<p>问答社区</p>
</a>
<a href="https://www.douban.com" class="site-card">
<i class="fas fa-film"></i>
<h3>豆瓣</h3>
<p>文艺生活社区</p>
</a>
<a href="https://music.163.com" class="site-card">
<i class="fas fa-music"></i>
<h3>网易云音乐</h3>
<p>音乐平台</p>
</a>
</div>
</section>
</div>
<!-- 搜索结果页 -->
<div class="page" id="search-results">
<div class="welcome-section">
<h2>搜索结果</h2>
<p class="subtitle">在所有页面中找到的匹配项</p>
</div>
<section class="category search-section" data-section="home" style="display: none;">
<h2><i class="fas fa-home"></i> 首页匹配项</h2>
<div class="sites-grid"></div>
</section>
<section class="category search-section" data-section="projects" style="display: none;">
<h2><i class="fas fa-project-diagram"></i> 项目匹配项</h2>
<div class="sites-grid"></div>
</section>
<section class="category search-section" data-section="articles" style="display: none;">
<h2><i class="fas fa-book"></i> 文章匹配项</h2>
<div class="sites-grid"></div>
</section>
<section class="category search-section" data-section="friends" style="display: none;">
<h2><i class="fas fa-users"></i> 朋友匹配项</h2>
<div class="sites-grid"></div>
</section>
</div>
</main>
</div>
<script src="script.js"></script>
</body>
</html>

219
script.js Normal file
View File

@@ -0,0 +1,219 @@
document.addEventListener('DOMContentLoaded', () => {
const searchInput = document.getElementById('search');
const siteCards = document.querySelectorAll('.site-card');
const categories = document.querySelectorAll('.category');
const navItems = document.querySelectorAll('.nav-item');
const pages = document.querySelectorAll('.page');
const searchBox = document.querySelector('.search-box');
const searchResultsPage = document.getElementById('search-results');
const searchSections = searchResultsPage.querySelectorAll('.search-section');
let isSearchActive = false;
let currentPageId = 'home';
let isInitialLoad = true;
// 页面切换功能
function showPage(pageId, skipSearchReset = false) {
if (currentPageId === pageId && !skipSearchReset && !isInitialLoad) return;
currentPageId = pageId;
// 使用 RAF 确保动画流畅
requestAnimationFrame(() => {
pages.forEach(page => {
const shouldBeActive = page.id === pageId;
if (shouldBeActive !== page.classList.contains('active')) {
page.classList.toggle('active', shouldBeActive);
}
});
// 初始加载完成后设置标志
if (isInitialLoad) {
isInitialLoad = false;
document.body.classList.add('loaded');
}
});
// 只有在非搜索状态下才重置搜索
if (!skipSearchReset) {
searchInput.value = '';
resetSearch();
}
}
// 搜索功能
function performSearch(searchTerm) {
searchTerm = searchTerm.toLowerCase().trim();
// 如果搜索框为空，重置所有内容
if (!searchTerm) {
resetSearch();
return;
}
if (!isSearchActive) {
isSearchActive = true;
}
let hasResults = false;
const searchResults = new Map();
// 收集所有匹配结果
pages.forEach(page => {
if (page.id === 'search-results') return;
const pageId = page.id;
const matches = [];
page.querySelectorAll('.site-card').forEach(card => {
const title = card.querySelector('h3').textContent.toLowerCase();
const description = card.querySelector('p').textContent.toLowerCase();
if (title.includes(searchTerm) || description.includes(searchTerm)) {
matches.push(card.cloneNode(true));
hasResults = true;
}
});
if (matches.length > 0) {
searchResults.set(pageId, matches);
}
});
// 批量更新DOM
requestAnimationFrame(() => {
// 清空并隐藏所有搜索区域
searchSections.forEach(section => {
const grid = section.querySelector('.sites-grid');
while (grid.firstChild) {
grid.removeChild(grid.firstChild);
}
section.style.display = 'none';
});
// 填充匹配结果
searchResults.forEach((matches, pageId) => {
const section = searchResultsPage.querySelector(`[data-section="${pageId}"]`);
const grid = section.querySelector('.sites-grid');
const fragment = document.createDocumentFragment();
matches.forEach(card => fragment.appendChild(card));
grid.appendChild(fragment);
section.style.display = 'block';
});
// 更新搜索结果页面状态
searchResultsPage.querySelector('.subtitle').textContent =
hasResults ? '在所有页面中找到的匹配项' : '未找到匹配的结果';
// 显示搜索结果页面
if (currentPageId !== 'search-results') {
currentPageId = 'search-results';
pages.forEach(page => {
page.classList.toggle('active', page.id === 'search-results');
});
}
// 更新搜索状态样式
searchBox.classList.toggle('has-results', hasResults);
searchBox.classList.toggle('no-results', !hasResults);
});
}
// 重置搜索状态
function resetSearch() {
if (!isSearchActive) return;
isSearchActive = false;
requestAnimationFrame(() => {
// 清空搜索结果
searchSections.forEach(section => {
const grid = section.querySelector('.sites-grid');
while (grid.firstChild) {
grid.removeChild(grid.firstChild);
}
section.style.display = 'none';
});
// 移除搜索状态样式
searchBox.classList.remove('has-results', 'no-results');
// 恢复到当前激活的页面
const currentActiveNav = document.querySelector('.nav-item.active');
const targetPageId = currentActiveNav.getAttribute('data-page');
if (currentPageId !== targetPageId) {
currentPageId = targetPageId;
pages.forEach(page => {
page.classList.toggle('active', page.id === targetPageId);
});
}
});
}
// 搜索输入事件（使用防抖）
const debounce = (fn, delay) => {
let timer = null;
return (...args) => {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
timer = null;
}, delay);
};
};
const debouncedSearch = debounce(performSearch, 300);
searchInput.addEventListener('input', (e) => {
debouncedSearch(e.target.value);
});
// 搜索框事件处理
searchInput.addEventListener('keyup', (e) => {
if (e.key === 'Escape') {
searchInput.value = '';
resetSearch();
} else if (e.key === 'Enter') {
performSearch(searchInput.value);
}
});
// 阻止搜索框的回车默认行为
searchInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
});
// 导航项点击效果
navItems.forEach(item => {
item.addEventListener('click', (e) => {
if (item.getAttribute('target') === '_blank') return;
e.preventDefault();
navItems.forEach(nav => {
nav.classList.toggle('active', nav === item);
});
const pageId = item.getAttribute('data-page');
if (pageId) {
showPage(pageId);
}
});
});
// 初始化
window.addEventListener('load', () => {
// 延迟一帧执行初始化，确保样式已经应用
requestAnimationFrame(() => {
// 显示首页
showPage('home');
// 添加载入动画
categories.forEach((category, index) => {
setTimeout(() => {
category.style.opacity = '1';
}, index * 100);
});
});
});
});

372
style.css Normal file
View File

@@ -0,0 +1,372 @@
/* 全局样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
background-color: #1a1b1e;
color: #e4e6eb;
min-height: 100vh;
}
/* 布局 */
.layout {
display: flex;
min-height: 100vh;
opacity: 0;
animation: fadeIn 0.3s ease-out forwards;
}
/* 侧边栏样式 */
.sidebar {
width: 250px;
background-color: #2d2e32;
padding: 2rem 1rem;
display: flex;
flex-direction: column;
gap: 2rem;
position: fixed;
height: 100vh;
overflow-y: auto;
}
.logo h1 {
font-size: 1.5rem;
color: #fff;
margin-bottom: 2rem;
padding-left: 0.5rem;
}
.nav-section {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.section-title {
font-size: 0.9rem;
color: #8b8c8f;
padding: 0.5rem;
margin-bottom: 0.5rem;
}
.nav-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.8rem;
color: #a1a2a5;
text-decoration: none;
border-radius: 8px;
transition: all 0.3s ease;
}
.nav-item:hover {
background-color: #3a3b3f;
color: #fff;
}
.nav-item.active {
background-color: #3a3b3f;
color: #fff;
}
.nav-item i {
width: 20px;
text-align: center;
}
/* 主内容区域 */
.content {
flex: 1;
margin-left: 250px;
padding: 2rem;
background-color: #1a1b1e;
position: relative;
min-height: 100vh;
}
/* 搜索框 */
.search-box {
position: relative;
max-width: 600px;
margin-bottom: 3rem;
}
.search-box::after {
content: '';
position: absolute;
right: 3.5rem;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
opacity: 0;
transition: all 0.3s ease;
}
.search-box.has-results::after {
background-color: #4caf50;
opacity: 1;
}
.search-box.no-results::after {
background-color: #f44336;
opacity: 1;
}
.search-box input {
width: 100%;
padding: 1rem 4.5rem 1rem 1.5rem;
border: none;
border-radius: 12px;
background-color: #2d2e32;
color: #fff;
font-size: 1rem;
transition: all 0.3s ease;
}
.search-box input:focus {
outline: none;
background-color: #3a3b3f;
}
.search-box input::placeholder {
color: #8b8c8f;
}
.search-box i {
position: absolute;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
color: #8b8c8f;
transition: all 0.3s ease;
}
.search-box.has-results i {
color: #4caf50;
}
.search-box.no-results i {
color: #f44336;
}
/* 欢迎区域 */
.welcome-section {
margin-bottom: 3rem;
}
.welcome-section h2 {
font-size: 2.5rem;
color: #fff;
margin-bottom: 0.5rem;
}
.welcome-section h3 {
font-size: 2rem;
color: #4a9eff;
margin-bottom: 1rem;
}
.welcome-section .subtitle {
color: #8b8c8f;
font-size: 1.1rem;
}
/* 分类样式 */
.category {
background-color: #2d2e32;
border-radius: 15px;
padding: 2rem;
margin-bottom: 2rem;
transform: translateZ(0);
will-change: transform, opacity;
animation: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.category h2 {
color: #fff;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.8rem;
font-size: 1.2rem;
}
.category h2 i {
color: #4a9eff;
}
/* 网站卡片网格 */
.sites-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1.5rem;
}
/* 网站卡片样式 */
.site-card {
background-color: #3a3b3f;
border-radius: 12px;
padding: 1.5rem;
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
backface-visibility: hidden;
transform: translateZ(0);
will-change: transform;
}
.site-card:hover {
transform: translateY(-5px);
background-color: #4a4b4f;
}
.site-card i {
font-size: 2rem;
margin-bottom: 1rem;
color: #4a9eff;
}
.site-card h3 {
margin-bottom: 0.5rem;
color: #fff;
}
.site-card p {
font-size: 0.9rem;
color: #8b8c8f;
}
/* 响应式设计 */
@media (max-width: 768px) {
.sidebar {
width: 70px;
padding: 1rem 0.5rem;
}
.sidebar .logo h1,
.sidebar .section-title,
.sidebar .nav-item span {
display: none;
}
.nav-item {
padding: 0.8rem;
justify-content: center;
}
.nav-item i {
margin: 0;
font-size: 1.2rem;
}
.content {
margin-left: 70px;
padding: 1rem;
}
.welcome-section h2 {
font-size: 2rem;
}
.welcome-section h3 {
font-size: 1.5rem;
}
.page {
transform: translateX(10px);
}
#search-results {
transform: translateY(10px);
}
}
/* 动画效果 */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.category {
animation: fadeIn 0.5s ease-out forwards;
}
/* 页面切换动画 */
.page {
position: absolute;
width: 100%;
opacity: 0;
visibility: hidden;
transform: translateX(20px);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
will-change: opacity, transform;
}
.page.active {
opacity: 1;
visibility: visible;
transform: translateX(0);
transition-delay: 0s;
}
/* 搜索结果页面特殊处理 */
#search-results {
transform: translateY(20px);
}
#search-results.active {
transform: translateY(0);
}
/* 搜索结果区域动画 */
.search-section {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.search-section[style*="display: block"] {
opacity: 1;
transform: translateY(0);
}
/* 优化卡片动画 */
.site-card {
backface-visibility: hidden;
transform: translateZ(0);
will-change: transform;
}
/* 优化动画性能 */
.category {
transform: translateZ(0);
will-change: transform, opacity;
animation: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.category[style*="display: block"],
.page.active .category {
opacity: 1;
}