fix: failed transition when toggle language & change render

components/tag/src/index.tsx

@@ -57,7 +57,6 @@ export default class Tag extends WeElement<TagProps> {
   closed = false
 
   render(props: TagProps) {
-    console.log(props)
     const extractedClass = extractClass(props, 'o-tag', {
       ['o-tag--' + props.size]: props.size,
       ['o-tag--' + props.type]: props.type,

packages/admin/src/components/components/docs/config.ts

@@ -1,4 +1,4 @@
-import { i18n } from '~/index'
+import { i18n } from '~/modules/i18n'
 import { genId } from '../../../util/id'
 
 export const getIntroductionNode = () => {

packages/admin/src/components/docs/config.ts

@@ -1,4 +1,4 @@
-import { i18n } from '~/index'
+import { i18n } from '~/modules/i18n'
 import { genId } from '../../util/id'
 
 export const getDocsList = () => {

packages/admin/src/index.tsx

@@ -33,12 +33,7 @@ import './components/admin-main-welcome'
 
 import { tw, sheet } from 'omi-twind'
 import Store from './store'
-import { install as i18nInstall } from './modules/i18n'
-
-// install all modules
-// Object.values(import.meta.globEager('./modules/*.ts')).map((i) => i.install?.())
-
-export const i18n = i18nInstall()
+import { i18n } from './modules/i18n'
 
 const fadeCSS = `.fade-leave-to,
 .fade-enter {
@@ -60,7 +55,7 @@ export default class extends WeElement {
     tagName: 'admin-main-welcome'
   }
 
-  i18n
+  i18n = i18n
 
   transition
 
@@ -82,6 +77,7 @@ export default class extends WeElement {
   async transitionTo(tagName) {
     showLoading()
     await this.transition.leave()
+
     this.data.tagName = tagName
     this.update()
     await this.transition.enter()
@@ -167,9 +163,11 @@ export default class extends WeElement {
   }
 }
 
-new Store({
-  locale: 'zh',
-  installed(store) {
-    render(<my-app name="Omi"></my-app>, '#root', store)
-  }
-})
+// config i18n default language in ~/modules/i18n
+render(
+  <my-app name="Omi"></my-app>,
+  '#root',
+  new Store({
+    i18n
+  })
+)

packages/admin/src/layouts/components/layout-header.tsx

@@ -10,7 +10,7 @@ import '@omiu/icon/notifications'
 import '@omiu/icon/settings'
 import '@omiu/icon/git-hub'
 import '@omiu/badge'
-import { i18n } from '~/index'
+import { i18n } from '~/modules/i18n'
 
 interface Props {}
 
@@ -58,7 +58,8 @@ export default class extends WeElement<Props> {
   }
 
   onItemSelect = (evt) => {
-    this.store.setLocals(evt.detail.value)
+    const locale = evt.detail.value
+    this.store.setLocale(locale)
     // dispatch event to update basic-layout
     // any better solution?
     window.dispatchEvent(new Event('resize'))
@@ -126,7 +127,7 @@ export default class extends WeElement<Props> {
             `}
                 size="mini"
                 onItemSelect={this.onItemSelect}
-                value={this.store.locale}
+                value={this.store.i18n.locale}
                 items={this.items}
               ></o-select>
             </div>

packages/admin/src/layouts/components/layout-left-panel.tsx

@@ -55,7 +55,11 @@ export default class extends WeElement<Props> {
 
   store
 
-  onNodeClick = (evt) => {
+  /**
+   * 节点被点击
+   * @param evt
+   */
+  onNodeClick = (evt: CustomEvent) => {
     if (!evt.detail.children) {
       const tab = this.store.tabs.find((tab) => tab.id === evt.detail.id)
       if (tab) {

packages/admin/src/modules/i18n.ts

@@ -1,6 +1,9 @@
 export type Language = 'zh' | 'en'
 export const languages: Language[] = ['en', 'zh']
 
+import en from '~/locales/en.yml'
+import zh from '~/locales/zh.yml'
+
 export const t = (key: string, messages: Object) => {
   if (!key) return ''
 
@@ -31,20 +34,19 @@ export const createI18n = (options: { locale: Language; messages: Object }) => {
 // https://vitejs.dev/guide/features.html#glob-import
 const relativePath = '../locales/'
 
-export const messages = Object.fromEntries(
-  // globEager can not use variable
-  Object.entries(import.meta.globEager('../locales/*.y(a)?ml')).map(
-    ([key, value]) => {
-      const yaml = key.endsWith('.yaml')
-      return [key.slice(relativePath.length, yaml ? -5 : -4), value.default]
-    }
-  )
-)
+// export const messages = Object.fromEntries(
+//   // globEager can not use variable
+//   Object.entries(import.meta.globEager('../locales/*.y(a)?ml')).map(
+//     ([key, value]) => {
+//       const yaml = key.endsWith('.yaml')
+//       return [key.slice(relativePath.length, yaml ? -5 : -4), value.default]
+//     }
+//   )
+// )
 
-export const useI18n = () => {
-  return {
-    t
-  }
+export const messages = {
+  en,
+  zh
 }
 
 export const install = () => {
@@ -54,3 +56,12 @@ export const install = () => {
   })
   return i18n
 }
+
+export const i18n = createI18n({
+  locale: 'zh',
+  messages
+})
+
+export type I18nType = ReturnType<typeof createI18n>
+
+export default i18n

packages/admin/src/nav-tree.ts

@@ -5,7 +5,7 @@ import {
   getContribution
 } from './components/components/docs/config'
 import { genId } from './util/id'
-import { i18n } from '.'
+import type { I18nType } from '~/modules/i18n'
 
 export interface NavTree {
   id?: number
@@ -28,8 +28,8 @@ interface ComponentChild {
   href: string
 }
 
-export function genNavTree() {
-  const navTree: NavTree = [
+export function genNavTree(i18n: I18nType) {
+  const navTree: NavTree[] = [
     {
       label: i18n.t('ManagerWorkbench'),
       expanded: true,

packages/admin/src/store.ts

@@ -3,10 +3,10 @@ import { genNavTree, NavTree } from './nav-tree'
 import { getNotifications } from './service/notifications'
 import { resetId } from './util/id'
 import { route } from 'omi-router'
-import type { Language } from './modules/i18n'
-import { i18n } from './index'
+import type { I18nType, Language } from './modules/i18n'
 
 class Store {
+  i18n: I18nType
   themeColor: string
   installed: (store: Store) => void
   locale: Language
@@ -18,7 +18,7 @@ class Store {
   }
   markdown: string
   html: string
-  isInstalled: boolean
+  _isInstalled: boolean
   tabs: {
     label?: string
     href?: string
@@ -26,7 +26,7 @@ class Store {
     id: number
   }[]
   tabsActiveIndex: number
-  treeData: NavTree
+  treeData: NavTree[]
   notifications: {
     id: number
     content?: string
@@ -36,10 +36,11 @@ class Store {
   }[]
 
   constructor(options) {
+    this.i18n = options.i18n
+
     this.themeColor = '#07c160'
 
     this.installed = options.installed
-    this.locale = options.locale
 
     this.isLeftPanelClosed = window.innerWidth < 640
 
@@ -50,10 +51,10 @@ class Store {
     this.markdown = ''
     this.html = ''
 
-    this.setLocals(this.locale, () => {
+    this.setLocale(this.i18n.locale, () => {
       this.tabs = [
         {
-          label: i18n.t('Welcome'),
+          label: this.i18n.t('Welcome'),
           href: '#/welcome',
           closable: false,
           id: 2
@@ -65,7 +66,7 @@ class Store {
       this.notifications = getNotifications()
     })
 
-    this.isInstalled = false
+    this._isInstalled = false
 
     route.before = (evt) => {
       if (window.innerWidth <= 640) {
@@ -74,26 +75,16 @@ class Store {
     }
   }
 
-  setLocals(locale: Language, callback?) {
+  setLocale(locale: Language, callback?: () => void) {
     resetId()
-
-    this.locale = locale
-    i18n.setLocale(locale)
-
+    this.i18n.setLocale(locale)
     callback && callback()
+    this.treeData = genNavTree(this.i18n)
 
-    this.treeData = genNavTree()
-
-    this.tabs.forEach((tab) => {
-      tab.label = this.getTabLabelById(tab.id)
-    })
-
-    if (!this.isInstalled) {
-      this.installed(this)
-      this.isInstalled = true
-    } else {
-      this.ui.myApp.update()
-    }
+    this.tabs &&
+      this.tabs.forEach((tab) => {
+        tab.label = this.getTabLabelById(tab.id)
+      })
   }
 
   getTabLabelById(id) {
@@ -102,8 +93,9 @@ class Store {
       return node.label
     } else {
       for (let i = 0, len = this.treeData.length; i < len; i++) {
-        if (this.treeData[i].children) {
-          const childNode = this.treeData[i].children.find(
+        const tree = this.treeData[i]
+        if (tree.children) {
+          const childNode = tree.children.find(
             (childNode) => childNode.id === id
           )
           if (childNode) {