720402ffe7
🎉 主要更新:
后端:
- 全新华为应用市场爬虫系统
- 三表分离数据库设计 (app_info, app_metrics, app_rating)
- 完整的API接口 (搜索、分类、热门、上新等)
- 元服务自动识别和分类
- 智能Token管理和数据处理
- 修复热门应用重复显示问题
前端:
- 全新首页设计 (今日上架、热门应用)
- 应用页面 (彩色分类磁贴、智能图标匹配)
- 今日上新页面 (日期切换)
- 热门应用页面 (卡片布局)
- 应用详情页面 (完整信息展示)
- Apple风格搜索栏
- Footer组件
- 底部导航栏优化 (4个导航项)
- 骨架屏加载效果
- FontAwesome图标集成
UI/UX:
- 统一浅色背景 (#F5F5F7)
- 流畅的过渡动画
- 响应式设计
- 毛玻璃效果
文档:
- CHANGELOG.md - 完整更新日志
- QUICKSTART.md - 快速开始
- 多个技术文档和使用指南
版本: v2.0.0
136 lines
3.1 KiB
Vue
136 lines
3.1 KiB
Vue
<template>
|
|
<div id="app">
|
|
<main class="main-content">
|
|
<router-view />
|
|
<Footer v-if="!isProfilePage" />
|
|
</main>
|
|
<nav class="bottom-nav">
|
|
<router-link to="/" class="nav-item">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
|
|
</svg>
|
|
<span>探索</span>
|
|
</router-link>
|
|
<router-link to="/apps" class="nav-item">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="7" height="7" rx="1"/>
|
|
<rect x="14" y="3" width="7" height="7" rx="1"/>
|
|
<rect x="14" y="14" width="7" height="7" rx="1"/>
|
|
<rect x="3" y="14" width="7" height="7" rx="1"/>
|
|
</svg>
|
|
<span>应用</span>
|
|
</router-link>
|
|
<router-link to="/new_apps" class="nav-item">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<polyline points="12 6 12 12 16 14"/>
|
|
</svg>
|
|
<span>上新</span>
|
|
</router-link>
|
|
<router-link to="/profile" class="nav-item">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M4 6h16M4 12h16M4 18h16"/>
|
|
</svg>
|
|
<span>我的</span>
|
|
</router-link>
|
|
</nav>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import Footer from '@/components/Footer.vue'
|
|
|
|
const route = useRoute()
|
|
const isProfilePage = computed(() => route.path === '/profile')
|
|
</script>
|
|
|
|
<style scoped>
|
|
.bottom-nav {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 8px 0;
|
|
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
|
|
z-index: 1000;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
color: #666;
|
|
font-size: 12px;
|
|
gap: 4px;
|
|
padding: 4px 20px;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.nav-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.nav-item span {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.nav-item.router-link-active {
|
|
color: #007AFF;
|
|
}
|
|
|
|
.main-content {
|
|
min-height: 100vh;
|
|
padding-bottom: 70px;
|
|
background: #F5F5F7;
|
|
}
|
|
|
|
/* 确保在 Safari 上也有毛玻璃效果 */
|
|
@supports not (backdrop-filter: blur(10px)) {
|
|
.bottom-nav {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.nav-item {
|
|
padding: 4px 12px;
|
|
}
|
|
|
|
.nav-icon {
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
.nav-item span {
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.nav-item {
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.nav-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.nav-item span {
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
</style>
|