sanbuphy
260d17ee8b
- 添加浏览器前端组件：无障碍访问、国际化、实时通信 - 添加 Transformer 注意力机制系列组件 - 更新 Canvas、数据追踪等现有组件 - 修复 ESLint 变量名冲突问题 - 完善相关附录文档
304 lines
8.0 KiB
Vue
304 lines
8.0 KiB
Vue
<template>
|
||
<div class="demo-wrapper" :dir="layoutDirection">
|
||
<div class="demo-header" dir="ltr">i18n / 布局与本地化 API 演示</div>
|
||
|
||
<!-- 控制面板 -->
|
||
<div class="controls" dir="ltr">
|
||
<div class="lang-selector">
|
||
<label>选择环境 (Locale)：</label>
|
||
<select v-model="currentLocale">
|
||
<option value="zh-CN">🇨🇳 简体中文 (zh-CN)</option>
|
||
<option value="en-US">🇺🇸 English (en-US)</option>
|
||
<option value="de-DE">🇩🇪 Deutsch (de-DE) [测试超长文本]</option>
|
||
<option value="ar-SA">🇸🇦 العربية (ar-SA) [测试从右到左]</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 演示应用 -->
|
||
<div class="app-ui">
|
||
<!-- 头部导航栏 -->
|
||
<nav class="app-nav">
|
||
<div class="nav-brand">
|
||
<span class="logo">⚡</span>
|
||
<span>{{ t('app_name') }}</span>
|
||
</div>
|
||
<div class="nav-links">
|
||
<a href="#">{{ t('home') }}</a>
|
||
<a href="#">{{ t('profile') }}</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 主要内容区 -->
|
||
<main class="app-body">
|
||
<div class="card">
|
||
<h2 class="card-title">{{ t('payment_title') }}</h2>
|
||
<p class="card-desc">{{ t('payment_desc') }}</p>
|
||
|
||
<div class="data-row">
|
||
<span class="label">{{ t('date_label') }}：</span>
|
||
<span class="value date-val">{{ formattedDate }}</span>
|
||
</div>
|
||
|
||
<div class="data-row">
|
||
<span class="label">{{ t('amount_label') }}：</span>
|
||
<span class="value amount-val">{{ formattedAmount }}</span>
|
||
</div>
|
||
|
||
<div class="actions">
|
||
<!-- 演示按钮超长溢出防护 -->
|
||
<button class="btn btn-primary">
|
||
{{ t('confirm_btn') }}
|
||
</button>
|
||
<button class="btn btn-ghost">
|
||
{{ t('cancel_btn') }} <span dir="ltr">➔</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue'
|
||
|
||
const currentLocale = ref('zh-CN')
|
||
|
||
// 极其简易的字典
|
||
const dictionary = {
|
||
'zh-CN': {
|
||
app_name: '随星流界',
|
||
home: '首页',
|
||
profile: '我的',
|
||
payment_title: '账单详情',
|
||
payment_desc: '请在到期前完成支付以避免服务中断。',
|
||
date_label: '出账日期',
|
||
amount_label: '应付总额',
|
||
confirm_btn: '立即确认支付',
|
||
cancel_btn: '返回上一页'
|
||
},
|
||
'en-US': {
|
||
app_name: 'Easy Vibe',
|
||
home: 'Home',
|
||
profile: 'Profile',
|
||
payment_title: 'Invoice Details',
|
||
payment_desc: 'Please complete your payment before the due date to avoid service interruption.',
|
||
date_label: 'Issued Date',
|
||
amount_label: 'Total Due',
|
||
confirm_btn: 'Confirm Payment',
|
||
cancel_btn: 'Go Back'
|
||
},
|
||
'de-DE': {
|
||
app_name: 'Einfache Stimmung',
|
||
home: 'Startseite',
|
||
profile: 'Profil',
|
||
payment_title: 'Rechnungsdetails',
|
||
payment_desc: 'Bitte schließen Sie Ihre Zahlung vor dem Fälligkeitsdatum ab, um eine Unterbrechung des Dienstes zu vermeiden.',
|
||
date_label: 'Ausstellungsdatum',
|
||
amount_label: 'Fälliger Gesamtbetrag',
|
||
confirm_btn: 'Zahlungsvorgang jetzt bestätigen', // 超长按钮文本
|
||
cancel_btn: 'Zurück zur vorherigen Seite'
|
||
},
|
||
'ar-SA': {
|
||
app_name: 'إيزي فايب',
|
||
home: 'الرئيسية',
|
||
profile: 'الملف الشخصي',
|
||
payment_title: 'تفاصيل الفاتورة',
|
||
payment_desc: 'يرجى إتمام عملية الدفع قبل تاريخ الاستحقاق لتجنب انقطاع الخدمة.',
|
||
date_label: 'تاريخ الإصدار',
|
||
amount_label: 'الإجمالي المستحق',
|
||
confirm_btn: 'تأكيد الدفع',
|
||
cancel_btn: 'العودة'
|
||
}
|
||
}
|
||
|
||
// 模拟的原始数据
|
||
const rawDate = new Date()
|
||
const rawAmount = 14590.5
|
||
|
||
const t = (key) => dictionary[currentLocale.value][key]
|
||
|
||
// 核心特性：自动计算布局方向
|
||
const layoutDirection = computed(() => {
|
||
return currentLocale.value === 'ar-SA' ? 'rtl' : 'ltr'
|
||
})
|
||
|
||
// 核心特性：使用浏览器原生 Intl API 进行本地化格式，告别手写正则
|
||
const formattedDate = computed(() => {
|
||
return new Intl.DateTimeFormat(currentLocale.value, {
|
||
year: 'numeric',
|
||
month: 'long',
|
||
day: 'numeric',
|
||
weekday: 'short'
|
||
}).format(rawDate)
|
||
})
|
||
|
||
const formattedAmount = computed(() => {
|
||
let currency = 'CNY'
|
||
if (currentLocale.value === 'en-US') currency = 'USD'
|
||
if (currentLocale.value === 'de-DE') currency = 'EUR'
|
||
if (currentLocale.value === 'ar-SA') currency = 'SAR'
|
||
|
||
return new Intl.NumberFormat(currentLocale.value, {
|
||
style: 'currency',
|
||
currency: currency
|
||
}).format(rawAmount)
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.demo-wrapper {
|
||
background: var(--vp-c-bg-soft);
|
||
border: 1px solid var(--vp-c-divider);
|
||
border-radius: 12px;
|
||
padding: 1.5rem;
|
||
margin: 1.5rem 0;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.demo-header {
|
||
font-weight: bold;
|
||
font-size: 0.9rem;
|
||
color: var(--vp-c-text-2);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.controls {
|
||
margin-bottom: 1.5rem;
|
||
padding: 1rem;
|
||
background: var(--vp-c-bg);
|
||
border-radius: 8px;
|
||
border-left: 4px solid var(--vp-c-brand);
|
||
}
|
||
|
||
.lang-selector label {
|
||
font-weight: 600;
|
||
margin-right: 0.5rem;
|
||
color: var(--vp-c-text-1);
|
||
}
|
||
|
||
select {
|
||
padding: 0.3rem 0.5rem;
|
||
border-radius: 4px;
|
||
border: 1px solid var(--vp-c-divider);
|
||
background: var(--vp-c-bg-alt);
|
||
color: var(--vp-c-text-1);
|
||
}
|
||
|
||
/* 内部 APP 模拟容器 */
|
||
.app-ui {
|
||
background: var(--vp-c-bg);
|
||
border: 1px solid var(--vp-c-divider);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
/* 如果是 RTL，Flex 的 start 自动会贴到右边！ */
|
||
.app-nav {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 1rem 1.5rem;
|
||
background: #1e293b;
|
||
color: white;
|
||
}
|
||
|
||
.nav-brand {
|
||
font-weight: 800;
|
||
font-size: 1.1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
gap: 1.5rem;
|
||
}
|
||
.nav-links a { color: #cbd5e1; text-decoration: none; font-size: 0.9rem; font-weight: 600; }
|
||
.nav-links a:hover { color: white; }
|
||
|
||
.app-body {
|
||
padding: 2rem 1.5rem;
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.card {
|
||
background: white;
|
||
padding: 2rem;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
|
||
max-width: 500px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.card-title {
|
||
margin: 0 0 0.5rem 0;
|
||
font-size: 1.5rem;
|
||
color: #0f172a;
|
||
border: none;
|
||
}
|
||
|
||
.card-desc {
|
||
color: #64748b;
|
||
font-size: 0.95rem;
|
||
margin-bottom: 1.5rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.data-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 1rem 0;
|
||
border-bottom: 1px solid #e2e8f0;
|
||
}
|
||
.data-row:last-of-type { border-bottom: none; margin-bottom: 1rem; }
|
||
|
||
.label { color: #64748b; font-weight: 600; font-size: 0.9rem; }
|
||
|
||
.value { font-weight: bold; color: #0f172a; }
|
||
.date-val { font-size: 0.9rem; }
|
||
.amount-val { font-size: 1.25rem; color: #10b981; }
|
||
|
||
.actions {
|
||
display: flex;
|
||
gap: 1rem;
|
||
margin-top: 1.5rem;
|
||
flex-wrap: wrap; /* 关键：德文过长时允许换行，保护布局 */
|
||
}
|
||
|
||
.btn {
|
||
padding: 0.75rem 1.25rem;
|
||
border-radius: 6px;
|
||
font-weight: bold;
|
||
font-size: 0.9rem;
|
||
cursor: pointer;
|
||
border: none;
|
||
min-width: fit-content;
|
||
flex: 1; /* 按钮自动填满空间 */
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.btn-primary { background: var(--vp-c-brand); color: white; }
|
||
.btn-primary:hover { opacity: 0.9; }
|
||
|
||
.btn-ghost { background: #f1f5f9; color: #475569; }
|
||
.btn-ghost:hover { background: #e2e8f0; }
|
||
|
||
/* 暗黑模式适配 */
|
||
.dark .app-body { background: var(--vp-c-bg-alt); }
|
||
.dark .card { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); }
|
||
.dark .card-title { color: var(--vp-c-text-1); }
|
||
.dark .value { color: var(--vp-c-text-1); }
|
||
.dark .amount-val { color: var(--vp-c-brand-1); }
|
||
.dark .btn-ghost { background: var(--vp-c-bg-soft); color: var(--vp-c-text-2); }
|
||
.dark .data-row { border-color: var(--vp-c-divider); }
|
||
</style>
|