feat(viewer): vite vue3 scaffold with routing and i18n
- apps/viewer (@photo/viewer): Vite 5 + Vue 3.4 + TS 最小骨架(无 Pinia/UI 库) - router: /a/:token 活动页 + /a/:token/p/:photoId 单图深链(复用活动页组件) - i18n: vue-i18n 9,zh-CN/en 词条,localStorage(viewer.locale) 持久 + navigator.language 检测兜底 zh-CN;顶栏语言切换组件;文案全量走 i18n - api client: 类型化 fetch 封装(契约生成类型直连),错误信封 → ApiError, 错误码 → i18n key 映射表(src/api/errors.ts) - scripts: dev/build/preview/test(vitest 10 例)/test:e2e(Playwright 冒烟, webServer 自拉 dev)/lint/vue-tsc 全部接入 turbo - root: +@playwright/test、+eslint-plugin-vue(flat config 收敛到 apps/**/*.vue)、 pnpm.onlyBuiltDependencies 放行 esbuild Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { setLocale, type ViewerLocale } from '../i18n';
|
||||
|
||||
const { locale, t } = useI18n();
|
||||
|
||||
const nextLocale = computed<ViewerLocale>(() => (locale.value === 'zh-CN' ? 'en' : 'zh-CN'));
|
||||
// 按钮始终显示目标语言的自称,便于不识当前语言的用户发现
|
||||
const nextLabel = computed(() => (nextLocale.value === 'zh-CN' ? '中文' : 'English'));
|
||||
|
||||
function switchLocale(): void {
|
||||
setLocale(nextLocale.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button type="button" class="locale-switcher" :aria-label="t('lang.switch')" @click="switchLocale">
|
||||
{{ nextLabel }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.locale-switcher {
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
padding: 4px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user