|
@@ -31,7 +31,7 @@
|
|
|
:class="$route.path === '/' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
|
|
:class="$route.path === '/' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
|
|
|
>
|
|
>
|
|
|
<span>🏠</span>
|
|
<span>🏠</span>
|
|
|
- <span>主页</span>
|
|
|
|
|
|
|
+ <span>{{ t('navigation.home') }}</span>
|
|
|
</router-link>
|
|
</router-link>
|
|
|
<router-link
|
|
<router-link
|
|
|
to="/today-eat"
|
|
to="/today-eat"
|
|
@@ -39,7 +39,7 @@
|
|
|
:class="$route.path === '/today-eat' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
|
|
:class="$route.path === '/today-eat' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
|
|
|
>
|
|
>
|
|
|
<span>🎲</span>
|
|
<span>🎲</span>
|
|
|
- <span>美食盲盒</span>
|
|
|
|
|
|
|
+ <span>{{ t('navigation.todayEat') }}</span>
|
|
|
</router-link>
|
|
</router-link>
|
|
|
<router-link
|
|
<router-link
|
|
|
to="/table-design"
|
|
to="/table-design"
|
|
@@ -47,7 +47,7 @@
|
|
|
:class="$route.path === '/table-design' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
|
|
:class="$route.path === '/table-design' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
|
|
|
>
|
|
>
|
|
|
<span>🍽️</span>
|
|
<span>🍽️</span>
|
|
|
- <span>满汉全席</span>
|
|
|
|
|
|
|
+ <span>{{ t('navigation.tableDesign') }}</span>
|
|
|
</router-link>
|
|
</router-link>
|
|
|
<router-link
|
|
<router-link
|
|
|
to="/fortune-cooking"
|
|
to="/fortune-cooking"
|
|
@@ -55,7 +55,7 @@
|
|
|
:class="$route.path === '/fortune-cooking' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
|
|
:class="$route.path === '/fortune-cooking' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
|
|
|
>
|
|
>
|
|
|
<span>🔮</span>
|
|
<span>🔮</span>
|
|
|
- <span>玄学厨房</span>
|
|
|
|
|
|
|
+ <span>{{ t('navigation.fortuneCooking') }}</span>
|
|
|
</router-link>
|
|
</router-link>
|
|
|
<router-link
|
|
<router-link
|
|
|
to="/sauce-design"
|
|
to="/sauce-design"
|
|
@@ -63,7 +63,7 @@
|
|
|
:class="$route.path === '/sauce-design' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
|
|
:class="$route.path === '/sauce-design' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
|
|
|
>
|
|
>
|
|
|
<span>🥄</span>
|
|
<span>🥄</span>
|
|
|
- <span>酱料大师</span>
|
|
|
|
|
|
|
+ <span>{{ t('navigation.sauceDesign') }}</span>
|
|
|
</router-link>
|
|
</router-link>
|
|
|
|
|
|
|
|
<!-- 更多菜单下拉 -->
|
|
<!-- 更多菜单下拉 -->
|
|
@@ -77,7 +77,7 @@
|
|
|
]"
|
|
]"
|
|
|
>
|
|
>
|
|
|
<span>⋯</span>
|
|
<span>⋯</span>
|
|
|
- <span>更多</span>
|
|
|
|
|
|
|
+ <span>{{ t('navigation.more') }}</span>
|
|
|
</button>
|
|
</button>
|
|
|
|
|
|
|
|
<!-- 下拉菜单 -->
|
|
<!-- 下拉菜单 -->
|
|
@@ -93,7 +93,7 @@
|
|
|
:class="$route.path === '/favorites' ? 'bg-yellow-100 text-gray-800' : 'text-gray-700'"
|
|
:class="$route.path === '/favorites' ? 'bg-yellow-100 text-gray-800' : 'text-gray-700'"
|
|
|
>
|
|
>
|
|
|
<span>❤️</span>
|
|
<span>❤️</span>
|
|
|
- <span>我的收藏</span>
|
|
|
|
|
|
|
+ <span>{{ t('navigation.favorites') }}</span>
|
|
|
</router-link>
|
|
</router-link>
|
|
|
<router-link
|
|
<router-link
|
|
|
to="/gallery"
|
|
to="/gallery"
|
|
@@ -102,7 +102,7 @@
|
|
|
:class="$route.path === '/gallery' ? 'bg-yellow-100 text-gray-800' : 'text-gray-700'"
|
|
:class="$route.path === '/gallery' ? 'bg-yellow-100 text-gray-800' : 'text-gray-700'"
|
|
|
>
|
|
>
|
|
|
<span>🖼️</span>
|
|
<span>🖼️</span>
|
|
|
- <span>封神图鉴</span>
|
|
|
|
|
|
|
+ <span>{{ t('navigation.gallery') }}</span>
|
|
|
</router-link>
|
|
</router-link>
|
|
|
<router-link
|
|
<router-link
|
|
|
to="/about"
|
|
to="/about"
|
|
@@ -111,7 +111,7 @@
|
|
|
:class="$route.path === '/about' ? 'bg-yellow-100 text-gray-800' : 'text-gray-700'"
|
|
:class="$route.path === '/about' ? 'bg-yellow-100 text-gray-800' : 'text-gray-700'"
|
|
|
>
|
|
>
|
|
|
<span>📖</span>
|
|
<span>📖</span>
|
|
|
- <span>关于我们</span>
|
|
|
|
|
|
|
+ <span>{{ t('navigation.about') }}</span>
|
|
|
</router-link>
|
|
</router-link>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -141,11 +141,11 @@
|
|
|
<LoginButton />
|
|
<LoginButton />
|
|
|
<!-- 移动端设置按钮 -->
|
|
<!-- 移动端设置按钮 -->
|
|
|
<!-- <SettingsButton /> -->
|
|
<!-- <SettingsButton /> -->
|
|
|
- <button @click="showMobileMenu = !showMobileMenu" class="p-2 bg-gray-100 hover:bg-gray-200 rounded-lg border-2 border-[#0A0910] transition-colors">
|
|
|
|
|
|
|
+ <!-- <button @click="showMobileMenu = !showMobileMenu" class="p-2 bg-gray-100 hover:bg-gray-200 rounded-lg border-2 border-[#0A0910] transition-colors">
|
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
|
|
</svg>
|
|
</svg>
|
|
|
- </button>
|
|
|
|
|
|
|
+ </button> -->
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
@@ -161,7 +161,7 @@
|
|
|
:class="$route.path === '/' ? 'bg-yellow-400 text-gray-800 shadow-md' : 'bg-white text-gray-700 hover:bg-gray-50 active:scale-95'"
|
|
:class="$route.path === '/' ? 'bg-yellow-400 text-gray-800 shadow-md' : 'bg-white text-gray-700 hover:bg-gray-50 active:scale-95'"
|
|
|
>
|
|
>
|
|
|
<span>🏠</span>
|
|
<span>🏠</span>
|
|
|
- <span>主页</span>
|
|
|
|
|
|
|
+ <span>{{ t('navigation.home') }}</span>
|
|
|
</router-link>
|
|
</router-link>
|
|
|
<router-link
|
|
<router-link
|
|
|
to="/today-eat"
|
|
to="/today-eat"
|
|
@@ -170,7 +170,7 @@
|
|
|
:class="$route.path === '/today-eat' ? 'bg-yellow-400 text-gray-800 shadow-md' : 'bg-white text-gray-700 hover:bg-gray-50 active:scale-95'"
|
|
:class="$route.path === '/today-eat' ? 'bg-yellow-400 text-gray-800 shadow-md' : 'bg-white text-gray-700 hover:bg-gray-50 active:scale-95'"
|
|
|
>
|
|
>
|
|
|
<span>🎲</span>
|
|
<span>🎲</span>
|
|
|
- <span>美食盲盒</span>
|
|
|
|
|
|
|
+ <span>{{ t('navigation.todayEat') }}</span>
|
|
|
</router-link>
|
|
</router-link>
|
|
|
<router-link
|
|
<router-link
|
|
|
to="/table-design"
|
|
to="/table-design"
|
|
@@ -179,7 +179,7 @@
|
|
|
:class="$route.path === '/table-design' ? 'bg-yellow-400 text-gray-800 shadow-md' : 'bg-white text-gray-700 hover:bg-gray-50 active:scale-95'"
|
|
:class="$route.path === '/table-design' ? 'bg-yellow-400 text-gray-800 shadow-md' : 'bg-white text-gray-700 hover:bg-gray-50 active:scale-95'"
|
|
|
>
|
|
>
|
|
|
<span>🍽️</span>
|
|
<span>🍽️</span>
|
|
|
- <span>满汉全席</span>
|
|
|
|
|
|
|
+ <span>{{ t('navigation.tableDesign') }}</span>
|
|
|
</router-link>
|
|
</router-link>
|
|
|
<router-link
|
|
<router-link
|
|
|
to="/sauce-design"
|
|
to="/sauce-design"
|
|
@@ -188,7 +188,7 @@
|
|
|
:class="$route.path === '/sauce-design' ? 'bg-yellow-400 text-gray-800 shadow-md' : 'bg-white text-gray-700 hover:bg-gray-50 active:scale-95'"
|
|
:class="$route.path === '/sauce-design' ? 'bg-yellow-400 text-gray-800 shadow-md' : 'bg-white text-gray-700 hover:bg-gray-50 active:scale-95'"
|
|
|
>
|
|
>
|
|
|
<span>🥄</span>
|
|
<span>🥄</span>
|
|
|
- <span>酱料大师</span>
|
|
|
|
|
|
|
+ <span>{{ t('navigation.sauceDesign') }}</span>
|
|
|
</router-link>
|
|
</router-link>
|
|
|
<router-link
|
|
<router-link
|
|
|
to="/fortune-cooking"
|
|
to="/fortune-cooking"
|
|
@@ -197,7 +197,7 @@
|
|
|
:class="$route.path === '/fortune-cooking' ? 'bg-yellow-400 text-gray-800 shadow-md' : 'bg-white text-gray-700 hover:bg-gray-50 active:scale-95'"
|
|
:class="$route.path === '/fortune-cooking' ? 'bg-yellow-400 text-gray-800 shadow-md' : 'bg-white text-gray-700 hover:bg-gray-50 active:scale-95'"
|
|
|
>
|
|
>
|
|
|
<span>🔮</span>
|
|
<span>🔮</span>
|
|
|
- <span>玄学厨房</span>
|
|
|
|
|
|
|
+ <span>{{ t('navigation.fortuneCooking') }}</span>
|
|
|
</router-link>
|
|
</router-link>
|
|
|
<router-link
|
|
<router-link
|
|
|
to="/favorites"
|
|
to="/favorites"
|
|
@@ -206,7 +206,7 @@
|
|
|
:class="$route.path === '/favorites' ? 'bg-yellow-400 text-gray-800 shadow-md' : 'bg-white text-gray-700 hover:bg-gray-50 active:scale-95'"
|
|
:class="$route.path === '/favorites' ? 'bg-yellow-400 text-gray-800 shadow-md' : 'bg-white text-gray-700 hover:bg-gray-50 active:scale-95'"
|
|
|
>
|
|
>
|
|
|
<span>❤️</span>
|
|
<span>❤️</span>
|
|
|
- <span>我的收藏</span>
|
|
|
|
|
|
|
+ <span>{{ t('navigation.favorites') }}</span>
|
|
|
</router-link>
|
|
</router-link>
|
|
|
<router-link
|
|
<router-link
|
|
|
to="/gallery"
|
|
to="/gallery"
|
|
@@ -215,7 +215,7 @@
|
|
|
:class="$route.path === '/gallery' ? 'bg-yellow-400 text-gray-800 shadow-md' : 'bg-white text-gray-700 hover:bg-gray-50 active:scale-95'"
|
|
:class="$route.path === '/gallery' ? 'bg-yellow-400 text-gray-800 shadow-md' : 'bg-white text-gray-700 hover:bg-gray-50 active:scale-95'"
|
|
|
>
|
|
>
|
|
|
<span>🖼️</span>
|
|
<span>🖼️</span>
|
|
|
- <span>封神图鉴</span>
|
|
|
|
|
|
|
+ <span>{{ t('navigation.gallery') }}</span>
|
|
|
</router-link>
|
|
</router-link>
|
|
|
<router-link
|
|
<router-link
|
|
|
to="/about"
|
|
to="/about"
|
|
@@ -224,13 +224,13 @@
|
|
|
:class="$route.path === '/about' ? 'bg-yellow-400 text-gray-800 shadow-md' : 'bg-white text-gray-700 hover:bg-gray-50 active:scale-95'"
|
|
:class="$route.path === '/about' ? 'bg-yellow-400 text-gray-800 shadow-md' : 'bg-white text-gray-700 hover:bg-gray-50 active:scale-95'"
|
|
|
>
|
|
>
|
|
|
<span>📖</span>
|
|
<span>📖</span>
|
|
|
- <span>关于我们</span>
|
|
|
|
|
|
|
+ <span>{{ t('navigation.about') }}</span>
|
|
|
</router-link>
|
|
</router-link>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 滚动提示 -->
|
|
<!-- 滚动提示 -->
|
|
|
- <div class="text-center text-xs text-gray-500 mt-1">← 左右滑动查看更多功能 →</div>
|
|
|
|
|
|
|
+ <div class="text-center text-xs text-gray-500 mt-1">{{ t('navigation.scrollHint') }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -240,9 +240,12 @@
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
import { ref, computed } from 'vue'
|
|
import { ref, computed } from 'vue'
|
|
|
import { useRoute } from 'vue-router'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
|
+import { useI18n } from 'vue-i18n'
|
|
|
// import SettingsButton from './SettingsButton.vue'
|
|
// import SettingsButton from './SettingsButton.vue'
|
|
|
import LoginButton from './LoginButton.vue'
|
|
import LoginButton from './LoginButton.vue'
|
|
|
|
|
|
|
|
|
|
+const { t } = useI18n()
|
|
|
|
|
+
|
|
|
const showMobileMenu = ref(false)
|
|
const showMobileMenu = ref(false)
|
|
|
const showMoreMenu = ref(false)
|
|
const showMoreMenu = ref(false)
|
|
|
const isLogoRotating = ref(false)
|
|
const isLogoRotating = ref(false)
|
|
@@ -258,53 +261,15 @@ const route = useRoute()
|
|
|
|
|
|
|
|
// 根据当前路由显示不同的页面标题
|
|
// 根据当前路由显示不同的页面标题
|
|
|
const pageTitle = computed(() => {
|
|
const pageTitle = computed(() => {
|
|
|
- switch (route.path) {
|
|
|
|
|
- case '/':
|
|
|
|
|
- return '一饭封神'
|
|
|
|
|
- case '/today-eat':
|
|
|
|
|
- return '今日吃啥'
|
|
|
|
|
- case '/table-design':
|
|
|
|
|
- return '一桌好菜师'
|
|
|
|
|
- case '/how-to-cook':
|
|
|
|
|
- return '菜谱指南'
|
|
|
|
|
- case '/sauce-design':
|
|
|
|
|
- return '酱料设计大师'
|
|
|
|
|
- case '/fortune-cooking':
|
|
|
|
|
- return '玄学厨房'
|
|
|
|
|
- case '/favorites':
|
|
|
|
|
- return '我的收藏'
|
|
|
|
|
- case '/gallery':
|
|
|
|
|
- return '封神图鉴'
|
|
|
|
|
- case '/about':
|
|
|
|
|
- return '关于一饭封神'
|
|
|
|
|
- default:
|
|
|
|
|
- return '一饭封神'
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ const pathKey = route.path.replace('/', '') || 'home'
|
|
|
|
|
+ const key = pathKey.replace(/-([a-z])/g, (g) => g[1].toUpperCase())
|
|
|
|
|
+ return t(`navigation.pageTitle.${key}`, t('navigation.pageTitle.home'))
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
const pageSubtitle = computed(() => {
|
|
const pageSubtitle = computed(() => {
|
|
|
- switch (route.path) {
|
|
|
|
|
- case '/':
|
|
|
|
|
- return '灶间有AI,顿顿米其林!'
|
|
|
|
|
- case '/today-eat':
|
|
|
|
|
- return "盲盒美食:'绝了!' or '寄了!'"
|
|
|
|
|
- case '/table-design':
|
|
|
|
|
- return '让每顿饭,都有剧本!'
|
|
|
|
|
- case '/how-to-cook':
|
|
|
|
|
- return 'AI大师手把手教学!'
|
|
|
|
|
- case '/sauce-design':
|
|
|
|
|
- return '专业酱料制作,调味灵魂升华!'
|
|
|
|
|
- case '/fortune-cooking':
|
|
|
|
|
- return '星辰指引美食,占卜预见美味!'
|
|
|
|
|
- case '/favorites':
|
|
|
|
|
- return '珍藏美味,随时回味!'
|
|
|
|
|
- case '/gallery':
|
|
|
|
|
- return '每一帧都是厨艺的封神时刻!'
|
|
|
|
|
- case '/about':
|
|
|
|
|
- return '算法烹万物,一键即封神!'
|
|
|
|
|
- default:
|
|
|
|
|
- return 'LEGENDARY STATUS FROM A SINGLE MEAL!'
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ const pathKey = route.path.replace('/', '') || 'home'
|
|
|
|
|
+ const key = pathKey.replace(/-([a-z])/g, (g) => g[1].toUpperCase())
|
|
|
|
|
+ return t(`navigation.pageSubtitle.${key}`, t('navigation.pageSubtitle.default'))
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
// 检查更多菜单中的页面是否处于活跃状态
|
|
// 检查更多菜单中的页面是否处于活跃状态
|