添加 '30-布局支持多语言'

Author: aibayanyu20

30-%E5%B8%83%E5%B1%80%E6%94%AF%E6%8C%81%E5%A4%9A%E8%AF%AD%E8%A8%80.md

@@ -0,0 +1,292 @@
+## 目标
+完成布局配置多语言的功能
+
+## 遗留问题解决
+上节课我们遗留了一个多语言的问题，当我们切换多语言的时候，我们需要同时修改i18n中的多语言信息，上节课我们只修改了我们自定义的多语言。我们先来解决一下这个遗留的问题。
+在auto-lang.ts中添加：
+```typescript
+import { defaultLocale, loadLanguageAsync } from '~/locales'
+
+export const useAppLocale = createGlobalState(() => useStorage('locale', defaultLocale))
+
+export const useAutoLang = () => {
+  const appLocale = useAppLocale()
++  const { locale, getLocaleMessage } = useI18n()
+  const setLanguage = async (lang: string) => {
+    try {
+      await loadLanguageAsync(lang)
+      appLocale.value = lang
++      locale.value = lang
+    }
+    catch (e) {
+
+    }
+  }
+
+  watch(appLocale, (lang) => {
++    if (lang && lang !== locale.value)
+      setLanguage(lang).then(() => {})
+  })
+
++  const naiveLocale = computed(() => getLocaleMessage(appLocale.value).naiveUI || {})
+  return {
+    naiveLocale,
+  }
+}
+
+```
+测试效果在pages/index.vue.
+
+## 布局支持多语言
+接下来将我们之前所实现的布局功能我们来支持一下多语言。
+首先我们先在lang目录下创建一个global的文件夹，然后创建zh-CN.ts和en-US.ts的文件。
+在zh-CN.ts中：
+```typescript
+export default {
+  'global.layout.setting.drawer.style': '整体风格设置',
+  'global.layout.setting.drawer.style.light': '亮色菜单风格',
+  'global.layout.setting.drawer.style.inverted': '反转色菜单风格',
+  'global.layout.setting.drawer.style.dark': '黑暗菜单风格',
+  'global.layout.setting.drawer.theme': '主题色',
+  'global.layout.setting.drawer.theme.default': '极光绿（默认）',
+  'global.layout.setting.drawer.theme.dustRed': '薄暮',
+  'global.layout.setting.drawer.theme.volcano': '火山',
+  'global.layout.setting.drawer.theme.orange': '日暮',
+  'global.layout.setting.drawer.theme.cyan': '明青',
+  'global.layout.setting.drawer.theme.blue': '拂晓蓝',
+  'global.layout.setting.drawer.theme.purple': '酱紫',
+  'global.layout.setting.drawer.theme.magenta': '洋红',
+  'global.layout.setting.drawer.layout': '导航模式',
+  'global.layout.setting.drawer.layout.side': '侧边菜单布局',
+  'global.layout.setting.drawer.layout.mix': '混合菜单布局',
+  'global.layout.setting.drawer.layout.top': '顶部菜单布局',
+}
+
+```
+在 en-US.ts中：
+```typescript
+export default {
+  'global.layout.setting.drawer.style': 'Page style setting',
+  'global.layout.setting.drawer.style.light': 'Light menu style',
+  'global.layout.setting.drawer.style.inverted': 'Inverted menu style',
+  'global.layout.setting.drawer.style.dark': 'Dark menu style',
+  'global.layout.setting.drawer.theme': 'Theme color',
+  'global.layout.setting.drawer.theme.default': 'Pine green (default)',
+  'global.layout.setting.drawer.theme.dustRed': 'Dust Red',
+  'global.layout.setting.drawer.theme.volcano': 'Volcano',
+  'global.layout.setting.drawer.theme.orange': 'Sunset',
+  'global.layout.setting.drawer.theme.cyan': 'Cyan',
+  'global.layout.setting.drawer.theme.blue': 'Blue',
+  'global.layout.setting.drawer.theme.purple': 'Purple',
+  'global.layout.setting.drawer.theme.magenta': 'Magenta',
+  'global.layout.setting.drawer.layout': 'Navigation mode',
+  'global.layout.setting.drawer.layout.side': 'Side menu layout',
+  'global.layout.setting.drawer.layout.mix': 'Mix menu layout',
+  'global.layout.setting.drawer.layout.top': 'Top menu layout',
+}
+
+```
+然后我们在lang文件夹中的zh-CN.ts和en-US.ts中分别引入：
+zh-CN.ts
+```typescript
+import { dateZhCN, zhCN } from 'naive-ui'
++ import global from './global/zh-CN'
+
+export default {
++  ...global,
+  naiveUI: {
+    locale: zhCN,
+    dateLocale: dateZhCN,
+  },
+}
+
+```
+en-US.ts
+```typescript
+import { dateEnUS, enUS } from 'naive-ui'
++ import global from './global/en-US'
+export default {
++  ...global,
+  naiveUI: {
+    locale: enUS,
+    dateLocale: dateEnUS,
+  },
+}
+```
+
+接下来我们在setting-drawer中进行配置支持多语言：
+在index.vue中
+```vue
+<template>
+  <n-drawer-content>
++-      <Container v-if="layoutStyleList" :title="$t('global.layout.setting.drawer.style')">
+        <n-space size="large">
+          <template v-for="item in layoutStyleList" :key="item.id">
+            <CheckboxLayout
++-              :title="$t(item.title)"
+              :layout="item.key"
+              :inverted="item.inverted"
+              :dark="item.dark"
+              :checked="item.id === layoutStyle"
+              @click="() => $emit('update:layoutStyle', item.id)"
+            />
+          </template>
+        </n-space>
+      </Container>
++-      <Container v-if="themeList" :title="$t('global.layout.setting.drawer.theme')">
+        <n-space>
+          <CheckboxTheme
+            v-for="item in themeList"
+            :key="item.key"
+            :color="item.color"
+            :checked="item.key === theme"
+            @click="onThemeChange(item.key)"
+          />
+        </n-space>
+      </Container>
+      <n-divider />
++-      <Container v-if="layoutList" :title="$t('global.layout.setting.drawer.layout')">
+        <n-space size="large">
+          <template v-for="item in layoutList" :key="item.key">
+            <CheckboxLayout
++-              :title="$t(item.title)"
+              :layout="item.key"
+              :checked="item.key === layout"
+              @click="() => $emit('update:layout', item.key)"
+            />
+          </template>
+        </n-space>
+      </Container>
+    </n-drawer-content>
+</template>
+```
+
+接下来我们让我们的主题色也支持一下提示，在checkbox-theme.vue中。
+```vue
+<script lang="ts" setup>
+import { CheckOutlined } from '@vicons/antd'
+
+defineProps<{
+  color: string
+  checked?: boolean
++  title?: string
+}>()
+
++ defineEmits(['click'])
+</script>
+
+<template>
++  <n-tooltip trigger="hover">
+  +  <template #trigger>
+      <div
+        :style="{ background: color }"
+        class="flex items-center justify-center w-20px h-20px"
+        @click="$emit('click', $event)"
+      >
+        <n-icon v-if="checked" size="16">
+          <CheckOutlined />
+        </n-icon>
+      </div>
+ +   </template>
++    {{ title }}
++  </n-tooltip>
+</template>
+
+<style scoped>
+
+</style>
+
+```
+
+然后在index.vue中主题色的多语言的支持：
+```vue
+<template>
+  <CheckboxTheme
+    v-for="item in themeList"
+    :key="item.key"
+    :title="$t(item.title)"
+    :color="item.color"
+    :checked="item.key === theme"
+    @click="onThemeChange(item.key)"
+  />
+</template>
+```
+
+接下来我们在stores/app.ts中做调整如下：
+```typescript
+  const layoutList = computed<LayoutType[]>(() => {
+    return [{
+      id: 'side',
+      key: 'side',
+      title: 'global.layout.setting.drawer.layout.side',
+    }, {
+      id: 'top',
+
+      key: 'top',
+      title: 'global.layout.setting.drawer.layout.top',
+    }, {
+      id: 'mix',
+      key: 'mix',
+      title: 'global.layout.setting.drawer.layout.mix',
+    }]
+  })
+
+
+  const layoutStyleList = computed<LayoutType[]>(() => {
+    const list: LayoutType[] = [
+      {
+        id: 'light',
+        key: 'side',
+        title: 'global.layout.setting.drawer.style.light',
+      },
+    ]
+
+    if (layout.layout !== 'mix') {
+      list.push({
+        id: 'inverted',
+        key: 'side',
+        inverted: true,
+        title: 'global.layout.setting.drawer.style.inverted',
+      })
+    }
+    else {
+      if (layout.layoutStyle !== 'dark')
+        updateLayoutStyle('light')
+    }
+    list.push({
+      id: 'dark',
+      key: 'side',
+      title: 'global.layout.setting.drawer.style.dark',
+      dark: true,
+    })
+    return list
+  })
+
+```
+然后让主题色支持多语言的提示信息。
+在config/theme.ts中增加类型
+```typescript
+export interface ThemeType {
+  color: string
+  key: string
++  title?: string
+}
+
+```
+然后在app.ts中增加：
+```typescript
+const themeList = computed<ThemeType[]>(() => {
+    const list = []
+    const myColors = isDark.value ? darkColors : colors
+    for (const key in myColors) {
+      const value = myColors[key]
+      list.push({
+        color: value.common?.primaryColor as string,
+        key,
+       + title: `global.layout.setting.drawer.theme.${key}`,
+      })
+    }
+    return list
+  })
+```
+然后测试效果。