npm package: @manwang/langs-plugin
Description: Vue 自动国际化插件 - 中文即开发语言，编译时自动转换为 $t()
Author: manwang
Latest version: 1.0.0

# @anthropic/vue-auto-i18n

> Vue 自动国际化插件 - 中文即开发语言，编译时自动转换

## ✨ 特性

- 🚀 **零侵入开发**：直接写中文，编译时自动转换为 `$t('key')`
- 📦 **完全解耦**：插件只包含翻译逻辑，语言管理由用户控制
- 🔧 **高度可定制**：语言存储、初始化、切换逻辑均可自定义
- 🔄 **Fallback 兜底**：当前语言缺少翻译时，自动使用兜底语言
- ⚡ **高性能**：多级缓存 + Worker 并行
- 🌐 **灵活参数格式**：支持 `%AA`、`$BB`、`{name}` 等多种格式

## 📦 安装

```bash
npm install @anthropic/vue-auto-i18n
# or
pnpm add @anthropic/vue-auto-i18n
# or
yarn add @anthropic/vue-auto-i18n
```

## 🚀 快速开始

### 1. 创建语言包

```
src/locales/
├── index.ts          # 语言管理模块
├── zh-CN.json        # 中文
└── en-US.json        # 英文
```

**zh-CN.json**：
```json
{
  "submit": "提交",
  "cancel": "取消",
  "welcome": "欢迎，{name}"
}
```

**index.ts**：
```typescript
import { ref } from 'vue'
import zhCN from './zh-CN.json'
import enUS from './en-US.json'

export const messages = { 'zh-CN': zhCN, 'en-US': enUS }
export const availableLangs = Object.keys(messages)
export const currentLang = ref('zh-CN')

export function setLang(lang: string) {
  currentLang.value = lang
  sessionStorage.setItem('lang', lang)
  location.reload()
}

export function getLang() {
  return currentLang.value
}
```

### 2. 配置 Vite 插件

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import autoI18n from '@anthropic/vue-auto-i18n/vite'

export default defineConfig({
  plugins: [
    autoI18n({
      localesDir: 'src/locales',
      sourceLocale: 'zh-CN',
    }),
    vue(),
  ],
})
```

### 3. 安装到 Vue

```typescript
// main.ts
import { createApp } from 'vue'
import { setupLangs } from '@anthropic/vue-auto-i18n'
import * as localeModule from './locales'
import App from './App.vue'

const app = createApp(App)

await setupLangs(app, {
  localeModule,
  fallbackLang: 'zh-CN',
})

app.mount('#app')
```

### 4. 开始使用

```vue
<template>
  <!-- 直接写中文，编译时自动转换 -->
  <button>提交</button>
  <button>取消</button>
  
  <!-- 带参数 -->
  <p>{{ $t('welcome', { name: 'Tom' }) }}</p>
  
  <!-- 语言切换 -->
  <LocaleSwitcher />
</template>

<script setup>
import { LocaleSwitcher, useLang } from '@anthropic/vue-auto-i18n'

const { lang, setLang, t } = useLang()
</script>
```

## 📖 API

### setupLangs(app, config)

```typescript
interface SetupConfig {
  localeModule: LocaleModule  // 用户语言模块
  fallbackLang?: string       // 兜底语言
  warnOnMissing?: boolean     // 警告缺失翻译
}
```

### LocaleModule 接口

```typescript
interface LocaleModule {
  messages: Record<string, Record<string, string>>
  currentLang: Ref<string>
  availableLangs: string[]
  setLang: (lang: string) => void
  getLang: () => string
  replaceParams?: (text: string, params: Record<string, any>) => string
  langMap?: Record<string, { name: string; flag: string }>
}
```

### useLang()

```typescript
const {
  lang,         // 当前语言
  langs,        // 可用语言列表
  langName,     // 当前语言名称
  langFlag,     // 当前语言国旗
  t,            // 翻译函数
  setLang,      // 切换语言
  getLangName,  // 获取语言名称
  getLangFlag,  // 获取语言国旗
} = useLang()
```

### t(key, params?)

```typescript
t('submit')                    // "提交"
t('welcome', { name: 'Tom' })  // "欢迎，Tom"
t('count', { AA: 10 })         // "共%AA条" → "共10条"
```

## 🔧 Vite 插件配置

```typescript
autoI18n({
  localesDir: 'src/locales',  // 语言包目录
  sourceLocale: 'zh-CN',      // 源语言
  translateFn: '$t',          // 翻译函数名
  debug: false,               // 调试模式
  cache: { enabled: true },   // 缓存配置
})
```

## 🔄 编译时转换

| 编译前 | 编译后 |
|--------|--------|
| `<span>提交</span>` | `<span>{{ $t('submit') }}</span>` |
| `placeholder="请输入"` | `:placeholder="$t('please_enter')"` |
| `{{ flag ? '是' : '否' }}` | `{{ flag ? $t('yes') : $t('no') }}` |

## 📄 License

MIT