feat(I18n): Add Ii8n
feat(LocaleDropdown): Add LocaleDropdown Component feat(store): Add localeStoremaster
kailong321200875
4 years ago
parent
45d657d44c
commit
3810b8c3b2
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"0 debug pnpm:scope": {
|
||||||
|
"selected": 1
|
||||||
|
},
|
||||||
|
"1 error pnpm": {
|
||||||
|
"errno": 1,
|
||||||
|
"code": "ELIFECYCLE",
|
||||||
|
"pkgid": "butterfly-admin@3.0.0",
|
||||||
|
"stage": "clean",
|
||||||
|
"script": "npx rimraf docs/node_modules && npx rimraf node_modules",
|
||||||
|
"pkgname": "butterfly-admin",
|
||||||
|
"err": {
|
||||||
|
"name": "pnpm",
|
||||||
|
"message": "butterfly-admin@3.0.0 clean: `npx rimraf docs/node_modules && npx rimraf node_modules`\nExit status 1",
|
||||||
|
"code": "ELIFECYCLE",
|
||||||
|
"stack": "pnpm: butterfly-admin@3.0.0 clean: `npx rimraf docs/node_modules && npx rimraf node_modules`\nExit status 1\n at EventEmitter.<anonymous> (C:\\Users\\Saber\\AppData\\Roaming\\npm\\pnpm-global\\5\\node_modules\\.pnpm\\registry.npmmirror.com+pnpm@6.24.4\\node_modules\\pnpm\\dist\\pnpm.cjs:103873:20)\n at EventEmitter.emit (node:events:365:28)\n at ChildProcess.<anonymous> (C:\\Users\\Saber\\AppData\\Roaming\\npm\\pnpm-global\\5\\node_modules\\.pnpm\\registry.npmmirror.com+pnpm@6.24.4\\node_modules\\pnpm\\dist\\pnpm.cjs:91802:18)\n at ChildProcess.emit (node:events:365:28)\n at maybeClose (node:internal/child_process:1067:16)\n at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1 @@
|
|||||||
|
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M115.147.062a13 13 0 0 1 4.94.945c1.55.63 2.907 1.526 4.069 2.688a13.148 13.148 0 0 1 2.761 4.069c.678 1.55 1.017 3.245 1.017 5.086v102.3c0 3.681-1.187 6.733-3.56 9.155-2.373 2.422-5.352 3.633-8.937 3.633H12.992c-3.875 0-7-1.26-9.373-3.779-2.373-2.518-3.56-5.667-3.56-9.445V12.704c0-3.39 1.163-6.345 3.488-8.863C5.872 1.32 8.972.062 12.847.062h102.3zM81.434 109.047c1.744 0 3.003-.412 3.778-1.235.775-.824 1.163-1.914 1.163-3.27 0-1.26-.388-2.325-1.163-3.197-.775-.872-2.034-1.307-3.778-1.307H72.57c.097-.194.145-.485.145-.872V27.09h9.01c1.743 0 2.954-.436 3.633-1.308.678-.872 1.017-1.938 1.017-3.197 0-1.26-.34-2.325-1.017-3.197-.679-.872-1.89-1.308-3.633-1.308H46.268c-1.743 0-2.954.436-3.632 1.308-.678.872-1.018 1.938-1.018 3.197 0 1.26.34 2.325 1.018 3.197.678.872 1.889 1.308 3.632 1.308h8.138v72.075c0 .193.024.339.073.436.048.096.072.242.072.436H46.56c-1.744 0-3.003.435-3.778 1.307-.775.872-1.163 1.938-1.163 3.197 0 1.356.388 2.446 1.163 3.27.775.823 2.034 1.235 3.778 1.235h34.875z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -1,3 +1,3 @@
|
|||||||
import VConfigGlobal from './src/VConfigGlobal.vue'
|
import ConfigGlobal from './src/ConfigGlobal.vue'
|
||||||
|
|
||||||
export { VConfigGlobal }
|
export { ConfigGlobal }
|
||||||
|
|||||||
@ -0,0 +1,3 @@
|
|||||||
|
import Icon from './src/Icon.vue'
|
||||||
|
|
||||||
|
export { Icon }
|
||||||
@ -0,0 +1,86 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, unref, ref, watch, nextTick } from 'vue'
|
||||||
|
import { ElIcon } from 'element-plus'
|
||||||
|
import { useDesign } from '@/hooks/web/useDesign'
|
||||||
|
import { propTypes } from '@/utils/propTypes'
|
||||||
|
import Iconify from '@purge-icons/generated'
|
||||||
|
|
||||||
|
const { getPrefixCls } = useDesign()
|
||||||
|
|
||||||
|
const prefixCls = getPrefixCls('icon')
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
// icon name
|
||||||
|
icon: propTypes.string,
|
||||||
|
// icon color
|
||||||
|
color: propTypes.string,
|
||||||
|
// icon size
|
||||||
|
size: propTypes.number.def(16)
|
||||||
|
})
|
||||||
|
|
||||||
|
const elRef = ref<ElRef>(null)
|
||||||
|
|
||||||
|
const isLocal = computed(() => props.icon.startsWith('icon:'))
|
||||||
|
|
||||||
|
const symbolId = computed(() => {
|
||||||
|
return unref(isLocal) ? `#icon-${props.icon.split('icon:')[1]}` : props.icon
|
||||||
|
})
|
||||||
|
|
||||||
|
const getIconifyStyle = computed(() => {
|
||||||
|
const { color, size } = props
|
||||||
|
return {
|
||||||
|
fontSize: `${size}px`,
|
||||||
|
color
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
async function updateIcon(icon: string) {
|
||||||
|
if (unref(isLocal)) return
|
||||||
|
|
||||||
|
const el = unref(elRef)
|
||||||
|
if (!el) return
|
||||||
|
|
||||||
|
await nextTick()
|
||||||
|
|
||||||
|
if (!icon) return
|
||||||
|
|
||||||
|
const svg = Iconify.renderSVG(icon, {})
|
||||||
|
if (svg) {
|
||||||
|
el.textContent = ''
|
||||||
|
el.appendChild(svg)
|
||||||
|
} else {
|
||||||
|
const span = document.createElement('span')
|
||||||
|
span.className = 'iconify'
|
||||||
|
span.dataset.icon = icon
|
||||||
|
el.textContent = ''
|
||||||
|
el.appendChild(span)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.icon,
|
||||||
|
(icon: string) => {
|
||||||
|
updateIcon(icon)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ElIcon :class="[prefixCls, $attrs.class]" :size="size" :color="color">
|
||||||
|
<svg v-if="isLocal" aria-hidden="true">
|
||||||
|
<use :xlink:href="symbolId" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<span v-else ref="elRef" :style="getIconifyStyle">
|
||||||
|
<span class="iconify" :data-icon="symbolId"></span>
|
||||||
|
</span>
|
||||||
|
</ElIcon>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@prefix-cls: ~'@{namespace}-icon';
|
||||||
|
|
||||||
|
.@{prefix-cls} {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,3 +1,3 @@
|
|||||||
import VInputPassword from './src/VInputPassword.vue'
|
import InputPassword from './src/InputPassword.vue'
|
||||||
|
|
||||||
export { VInputPassword }
|
export { InputPassword }
|
||||||
|
|||||||
@ -1,3 +1,3 @@
|
|||||||
import VLocaleDropdown from './src/VLocaleDropdown.vue'
|
import LocaleDropdown from './src/LocaleDropdown.vue'
|
||||||
|
|
||||||
export { VLocaleDropdown }
|
export { LocaleDropdown }
|
||||||
|
|||||||
@ -0,0 +1,34 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
|
||||||
|
import { useLocaleStore } from '@/store/modules/locale'
|
||||||
|
import { useCssVar } from '@vueuse/core'
|
||||||
|
import { useLocale } from '@/hooks/web/useLocale'
|
||||||
|
|
||||||
|
const localeStore = useLocaleStore()
|
||||||
|
|
||||||
|
const langMap = computed(() => localeStore.localeMap)
|
||||||
|
|
||||||
|
const textColor = useCssVar('--el-text-color-primary', document.documentElement)
|
||||||
|
|
||||||
|
function setLang(lang: LocaleType) {
|
||||||
|
localeStore.setLocale({
|
||||||
|
lang
|
||||||
|
})
|
||||||
|
const { changeLocale } = useLocale()
|
||||||
|
changeLocale(lang)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ElDropdown trigger="click" @command="setLang">
|
||||||
|
<Icon icon="ion:language-sharp" :color="textColor" class="cursor-pointer" />
|
||||||
|
<template #dropdown>
|
||||||
|
<ElDropdownMenu>
|
||||||
|
<ElDropdownItem v-for="item in langMap" :key="item.lang" :command="item.lang">
|
||||||
|
{{ item.name }}
|
||||||
|
</ElDropdownItem>
|
||||||
|
</ElDropdownMenu>
|
||||||
|
</template>
|
||||||
|
</ElDropdown>
|
||||||
|
</template>
|
||||||
@ -1,19 +0,0 @@
|
|||||||
<script setup lang="ts"></script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>s</div>
|
|
||||||
<!-- <el-dropdown trigger="click">
|
|
||||||
<span class="el-dropdown-link">
|
|
||||||
Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
|
||||||
</span>
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
|
|
||||||
<el-dropdown-item :icon="CirclePlusFilled"> Action 2 </el-dropdown-item>
|
|
||||||
<el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
|
|
||||||
<el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
|
|
||||||
<el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown> -->
|
|
||||||
</template>
|
|
||||||
@ -1,3 +1,3 @@
|
|||||||
import VThemeSwitch from './src/VThemeSwitch.vue'
|
import ThemeSwitch from './src/ThemeSwitch.vue'
|
||||||
|
|
||||||
export { VThemeSwitch }
|
export { ThemeSwitch }
|
||||||
|
|||||||
@ -1,11 +1,13 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { useAppStore } from '@/store/modules/app'
|
import { useAppStore } from '@/store/modules/app'
|
||||||
import Sun from '~icons/emojione-monotone/sun'
|
|
||||||
import CrescentMoon from '~icons/emojione-monotone/crescent-moon'
|
|
||||||
import { ElSwitch } from 'element-plus'
|
import { ElSwitch } from 'element-plus'
|
||||||
import { useCssVar } from '@vueuse/core'
|
import { useCssVar } from '@vueuse/core'
|
||||||
import { useDesign } from '@/hooks/web/useDesign'
|
import { useDesign } from '@/hooks/web/useDesign'
|
||||||
|
import { useIcon } from '@/hooks/web/useIcon'
|
||||||
|
|
||||||
|
const Sun = useIcon({ icon: 'emojione-monotone:sun' })
|
||||||
|
const CrescentMoon = useIcon({ icon: 'emojione-monotone:crescent-moon' })
|
||||||
|
|
||||||
const appStore = useAppStore()
|
const appStore = useAppStore()
|
||||||
|
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
import type { App } from 'vue'
|
||||||
|
import { Icon } from './Icon'
|
||||||
|
|
||||||
|
export function setupGlobCom(app: App<Element>): void {
|
||||||
|
app.component('Icon', Icon)
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import { h } from 'vue'
|
||||||
|
import type { VNode } from 'vue'
|
||||||
|
import { Icon } from '@/components/Icon'
|
||||||
|
|
||||||
|
export function useIcon(props: IconTypes): VNode {
|
||||||
|
return h(Icon, props)
|
||||||
|
}
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
import { i18n } from '@/plugins/i18n'
|
||||||
|
import { useLocaleStoreWithOut } from '@/store/modules/locale'
|
||||||
|
import { setHtmlPageLang } from '@/plugins/i18n/helper'
|
||||||
|
|
||||||
|
function setI18nLanguage(locale: LocaleType) {
|
||||||
|
const localeStore = useLocaleStoreWithOut()
|
||||||
|
|
||||||
|
if (i18n.mode === 'legacy') {
|
||||||
|
i18n.global.locale = locale
|
||||||
|
} else {
|
||||||
|
;(i18n.global.locale as any).value = locale
|
||||||
|
}
|
||||||
|
localeStore.setLocale({
|
||||||
|
lang: locale
|
||||||
|
})
|
||||||
|
setHtmlPageLang(locale)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useLocale() {
|
||||||
|
// Switching the language will change the locale of useI18n
|
||||||
|
// And submit to configuration modification
|
||||||
|
async function changeLocale(locale: LocaleType) {
|
||||||
|
const globalI18n = i18n.global
|
||||||
|
|
||||||
|
const langModule = (await import(`../../locales/${locale}.ts`)) as any
|
||||||
|
|
||||||
|
globalI18n.setLocaleMessage(locale, langModule.default)
|
||||||
|
|
||||||
|
setI18nLanguage(locale)
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
changeLocale
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,22 +1,42 @@
|
|||||||
// 引入windi css
|
// 引入windi css
|
||||||
import '@/plugins/windicss'
|
import '@/plugins/windicss'
|
||||||
|
|
||||||
import { createApp } from 'vue'
|
// 导入全局的svg图标
|
||||||
import App from './App.vue'
|
import '@/plugins/svgIcon'
|
||||||
const app = createApp(App)
|
|
||||||
|
|
||||||
// 引入element-plus
|
// 初始化多语言
|
||||||
import { setupElementPlus } from '@/plugins/elementPlus'
|
import { setupI18n } from '@/plugins/i18n'
|
||||||
setupElementPlus(app)
|
|
||||||
|
|
||||||
// 引入状态管理
|
// 引入状态管理
|
||||||
import { setupStore } from '@/store'
|
import { setupStore } from '@/store'
|
||||||
setupStore(app)
|
|
||||||
|
// 全局组件
|
||||||
|
import { setupGlobCom } from '@/components'
|
||||||
|
|
||||||
|
// 引入element-plus
|
||||||
|
import { setupElementPlus } from '@/plugins/elementPlus'
|
||||||
|
|
||||||
// 路由
|
// 路由
|
||||||
import router, { setupRouter } from './router'
|
import { setupRouter } from './router'
|
||||||
setupRouter(app)
|
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
async function setupAll() {
|
||||||
|
const app = createApp(App)
|
||||||
|
|
||||||
|
await setupI18n(app)
|
||||||
|
|
||||||
|
setupStore(app)
|
||||||
|
|
||||||
|
setupGlobCom(app)
|
||||||
|
|
||||||
|
setupElementPlus(app)
|
||||||
|
|
||||||
|
setupRouter(app)
|
||||||
|
|
||||||
router.isReady().then(() => {
|
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
})
|
}
|
||||||
|
|
||||||
|
setupAll()
|
||||||
|
|||||||
@ -0,0 +1,3 @@
|
|||||||
|
export function setHtmlPageLang(locale: LocaleType) {
|
||||||
|
document.querySelector('html')?.setAttribute('lang', locale)
|
||||||
|
}
|
||||||
@ -1,16 +1,42 @@
|
|||||||
|
import type { App } from 'vue'
|
||||||
import { createI18n } from 'vue-i18n'
|
import { createI18n } from 'vue-i18n'
|
||||||
|
import { useLocaleStoreWithOut } from '@/store/modules/locale'
|
||||||
|
import type { I18n, I18nOptions } from 'vue-i18n'
|
||||||
|
import { setHtmlPageLang } from './helper'
|
||||||
|
|
||||||
export const i18n = setupI18n()
|
export let i18n: ReturnType<typeof createI18n>
|
||||||
|
|
||||||
function setupI18n() {
|
async function createI18nOptions(): Promise<I18nOptions> {
|
||||||
const messages = Object.fromEntries(
|
const localeStore = useLocaleStoreWithOut()
|
||||||
Object.entries(import.meta.globEager('../../locales/*.ts')).map(([key, value]) => {
|
const locale = localeStore.getLocale
|
||||||
return [key.slice(14, -3), value.default]
|
const localeMap = localeStore.getLocaleMap
|
||||||
|
const defaultLocal = await import(`../../locales/${locale.lang}.ts`)
|
||||||
|
const message = defaultLocal.default ?? {}
|
||||||
|
|
||||||
|
setHtmlPageLang(locale.lang)
|
||||||
|
|
||||||
|
localeStore.setLocale({
|
||||||
|
lang: locale.lang
|
||||||
|
// elLocale: elLocal
|
||||||
})
|
})
|
||||||
)
|
|
||||||
return createI18n({
|
return {
|
||||||
legacy: false,
|
legacy: false,
|
||||||
locale: 'zh-CN',
|
locale: locale.lang,
|
||||||
messages
|
fallbackLocale: locale.lang,
|
||||||
})
|
messages: {
|
||||||
|
[locale.lang]: message
|
||||||
|
},
|
||||||
|
availableLocales: localeMap.map((v) => v.lang),
|
||||||
|
sync: true,
|
||||||
|
silentTranslationWarn: true,
|
||||||
|
missingWarn: false,
|
||||||
|
silentFallbackWarn: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function setupI18n(app: App) {
|
||||||
|
const options = await createI18nOptions()
|
||||||
|
i18n = createI18n(options) as I18n
|
||||||
|
app.use(i18n)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,3 @@
|
|||||||
|
import 'virtual:svg-icons-register'
|
||||||
|
|
||||||
|
import '@purge-icons/generated'
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
|
||||||
|
import en from 'element-plus/lib/locale/lang/en'
|
||||||
|
import { store } from '../index'
|
||||||
|
|
||||||
|
const elLocaleMap = {
|
||||||
|
'zh-CN': zhCn,
|
||||||
|
en: en
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LocaleState {
|
||||||
|
locale: LocaleDropdownType
|
||||||
|
localeMap: LocaleDropdownType[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useLocaleStore = defineStore({
|
||||||
|
id: 'locales',
|
||||||
|
state: (): LocaleState => ({
|
||||||
|
// 当前语言
|
||||||
|
locale: {
|
||||||
|
lang: 'zh-CN',
|
||||||
|
elLocale: elLocaleMap['zh-CN']
|
||||||
|
},
|
||||||
|
// 多语言
|
||||||
|
localeMap: [
|
||||||
|
{
|
||||||
|
lang: 'zh-CN',
|
||||||
|
name: '简体中文'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lang: 'en',
|
||||||
|
name: 'English'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
getters: {
|
||||||
|
getLocale(): LocaleDropdownType {
|
||||||
|
return this.locale
|
||||||
|
},
|
||||||
|
getLocaleMap(): LocaleDropdownType[] {
|
||||||
|
return this.localeMap
|
||||||
|
}
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
setLocale(localeMap: LocaleDropdownType) {
|
||||||
|
// this.locale = Object.assign(this.locale, localeMap)
|
||||||
|
this.locale.lang = localeMap?.lang
|
||||||
|
this.locale.elLocale = elLocaleMap[localeMap?.lang]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export function useLocaleStoreWithOut() {
|
||||||
|
return useLocaleStore(store)
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
.text-color {
|
||||||
|
color: var(--el-text-color-regular);
|
||||||
|
}
|
||||||
|
.dark .dark\:text-color {
|
||||||
|
color: rgba(255, 255, 255, var(--dark-text-color));
|
||||||
|
}
|
||||||
@ -1,2 +1,3 @@
|
|||||||
:root {
|
:root {
|
||||||
|
--dark-text-color: #c9d1d9;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,7 @@
|
|||||||
|
declare module 'vue' {
|
||||||
|
export interface GlobalComponents {
|
||||||
|
Icon: typeof import('../components/Icon/src/Icon.vue')['default']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export {}
|
||||||
Loading…
Reference in New Issue