xto-fronted 0.4.93 → 0.4.95

package/src/components/Layout/index.vue

@@ -1,193 +1,200 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useAppStore } from '@/stores/app'
-import { useMenuStore } from '@/stores/menu'
-import Sidebar from './Sidebar.vue'
-import Header from './Header.vue'
-import TopMenu from './TopMenu.vue'
-import MixTopMenu from './MixTopMenu.vue'
-
-const appStore = useAppStore()
-const menuStore = useMenuStore()
-
-const sidebarWidth = computed(() =>
-  appStore.isCollapsed ? '64px' : '210px'
-)
-
-// 布局模式
-const layoutMode = computed(() => appStore.layout)
-
-// 是否显示混合模式（mix模式）
-const isMixMode = computed(() => layoutMode.value === 'mix')
-
-// 左侧菜单数据
-// sidebar模式：显示全部菜单
-// mix模式：显示当前选中一级菜单的子菜单
-const sidebarMenuList = computed(() => {
-  if (layoutMode.value === 'sidebar') {
-    return menuStore.menuList
-  } else if (layoutMode.value === 'mix') {
-    // mix模式下显示当前选中一级菜单的子菜单
-    return appStore.mixSubMenus
-  }
-  return []
-})
-
-// mix模式下是否显示左侧菜单（有子菜单时才显示）
-const showMixSidebar = computed(() => {
-  if (!isMixMode.value) return false
-  return sidebarMenuList.value.length > 0
-})
-</script>
-
-<template>
-  <!-- sidebar模式：左侧菜单 + 顶部Header + 主内容 -->
-  <div v-if="layoutMode === 'sidebar'" class="layout layout--sidebar">
-    <aside class="layout__aside" :style="{ width: sidebarWidth }">
-      <Sidebar :menu-list="sidebarMenuList" :show-logo="true" :show-user="true" />
-    </aside>
-    <div class="layout__main">
-      <header class="layout__header">
-        <Header />
-      </header>
-      <main class="layout__content">
-        <router-view />
-      </main>
-    </div>
-  </div>
-
-  <!-- top模式：顶部菜单 + 主内容 -->
-  <div v-if="layoutMode === 'top'" class="layout layout--top">
-    <div class="layout__top-menu">
-      <TopMenu />
-    </div>
-    <div class="layout__main">
-      <main class="layout__content">
-        <router-view />
-      </main>
-    </div>
-  </div>
-
-  <!-- mix模式：顶部一级菜单 + (左侧子菜单 + 主内容) -->
-  <div v-if="layoutMode === 'mix'" class="layout layout--mix">
-    <!-- 顶部一级菜单 -->
-    <div class="layout__mix-top-menu">
-      <MixTopMenu />
-    </div>
-    <!-- 下方：左侧子菜单 + 主内容 -->
-    <div class="layout__mix-body">
-      <aside v-if="showMixSidebar" class="layout__aside" :style="{ width: sidebarWidth }">
-        <Sidebar :menu-list="sidebarMenuList" :show-logo="false" :show-user="false" />
-      </aside>
-      <main class="layout__content">
-        <router-view />
-      </main>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.layout {
-  display: flex;
-  width: 100%;
-  height: 100%;
-
-  // 左侧菜单模式
-  &--sidebar {
-    flex-direction: row;
-
-    .layout__aside {
-      height: 100%;
-    }
-
-    .layout__main {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-  }
-
-  // 顶部菜单模式
-  &--top {
-    flex-direction: column;
-
-    .layout__main {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      height: calc(100% - 50px);
-    }
-
-    .layout__content {
-      flex: 1;
-    }
-  }
-
-  // 混合菜单模式
-  &--mix {
-    flex-direction: column;
-
-    .layout__mix-top-menu {
-      width: 100%;
-      height: 50px;
-      background-color: var(--bg-color);
-      border-bottom: 1px solid var(--color-border-lighter);
-      flex-shrink: 0;
-    }
-
-    .layout__mix-body {
-      flex: 1;
-      display: flex;
-      flex-direction: row;
-      height: calc(100% - 50px);
-    }
-  }
-
-  &__aside {
-    transition: width 0.3s;
-    overflow: hidden;
-    flex-shrink: 0;
-    height: 100%;
-  }
-
-  &__top-menu {
-    width: 100%;
-    height: 50px;
-    box-sizing: border-box;
-    background-color: var(--bg-color);
-    border-bottom: 1px solid var(--color-border-lighter);
-    flex-shrink: 0;
-  }
-
-  &__mix-top-menu {
-    width: 100%;
-    height: 50px;
-    box-sizing: border-box;
-    flex-shrink: 0;
-  }
-
-  &__main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    height: 100%;
-  }
-
-  &__header {
-    height: 50px;
-    box-sizing: border-box;
-    background-color: var(--bg-color);
-    border-bottom: 1px solid var(--color-border-lighter);
-    flex-shrink: 0;
-  }
-
-  &__content {
-    flex: 1;
-    overflow: auto;
-    background-color: var(--bg-color-page);
-    padding: 0;
-  }
-}
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useAppStore } from '@/stores/app'
+import { useMenuStore } from '@/stores/menu'
+import Sidebar from './Sidebar.vue'
+import Header from './Header.vue'
+import TopMenu from './TopMenu.vue'
+import MixTopMenu from './MixTopMenu.vue'
+
+// Props
+const props = withDefaults(defineProps<{
+  logoSrc?: string
+}>(), {
+  logoSrc: '/vite.svg'
+})
+
+const appStore = useAppStore()
+const menuStore = useMenuStore()
+
+const sidebarWidth = computed(() =>
+  appStore.isCollapsed ? '64px' : '210px'
+)
+
+// 布局模式
+const layoutMode = computed(() => appStore.layout)
+
+// 是否显示混合模式（mix模式）
+const isMixMode = computed(() => layoutMode.value === 'mix')
+
+// 左侧菜单数据
+// sidebar模式：显示全部菜单
+// mix模式：显示当前选中一级菜单的子菜单
+const sidebarMenuList = computed(() => {
+  if (layoutMode.value === 'sidebar') {
+    return menuStore.menuList
+  } else if (layoutMode.value === 'mix') {
+    // mix模式下显示当前选中一级菜单的子菜单
+    return appStore.mixSubMenus
+  }
+  return []
+})
+
+// mix模式下是否显示左侧菜单（有子菜单时才显示）
+const showMixSidebar = computed(() => {
+  if (!isMixMode.value) return false
+  return sidebarMenuList.value.length > 0
+})
+</script>
+
+<template>
+  <!-- sidebar模式：左侧菜单 + 顶部Header + 主内容 -->
+  <div v-if="layoutMode === 'sidebar'" class="layout layout--sidebar">
+    <aside class="layout__aside" :style="{ width: sidebarWidth }">
+      <Sidebar :menu-list="sidebarMenuList" :show-logo="true" :show-user="true" :logo-src="props.logoSrc" />
+    </aside>
+    <div class="layout__main">
+      <header class="layout__header">
+        <Header />
+      </header>
+      <main class="layout__content">
+        <router-view />
+      </main>
+    </div>
+  </div>
+
+  <!-- top模式：顶部菜单 + 主内容 -->
+  <div v-if="layoutMode === 'top'" class="layout layout--top">
+    <div class="layout__top-menu">
+      <TopMenu :logo-src="props.logoSrc" />
+    </div>
+    <div class="layout__main">
+      <main class="layout__content">
+        <router-view />
+      </main>
+    </div>
+  </div>
+
+  <!-- mix模式：顶部一级菜单 + (左侧子菜单 + 主内容) -->
+  <div v-if="layoutMode === 'mix'" class="layout layout--mix">
+    <!-- 顶部一级菜单 -->
+    <div class="layout__mix-top-menu">
+      <MixTopMenu :logo-src="props.logoSrc" />
+    </div>
+    <!-- 下方：左侧子菜单 + 主内容 -->
+    <div class="layout__mix-body">
+      <aside v-if="showMixSidebar" class="layout__aside" :style="{ width: sidebarWidth }">
+        <Sidebar :menu-list="sidebarMenuList" :show-logo="false" :show-user="false" />
+      </aside>
+      <main class="layout__content">
+        <router-view />
+      </main>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.layout {
+  display: flex;
+  width: 100%;
+  height: 100%;
+
+  // 左侧菜单模式
+  &--sidebar {
+    flex-direction: row;
+
+    .layout__aside {
+      height: 100%;
+    }
+
+    .layout__main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+  }
+
+  // 顶部菜单模式
+  &--top {
+    flex-direction: column;
+
+    .layout__main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      height: calc(100% - 50px);
+    }
+
+    .layout__content {
+      flex: 1;
+    }
+  }
+
+  // 混合菜单模式
+  &--mix {
+    flex-direction: column;
+
+    .layout__mix-top-menu {
+      width: 100%;
+      height: 50px;
+      background-color: var(--bg-color);
+      border-bottom: 1px solid var(--color-border-lighter);
+      flex-shrink: 0;
+    }
+
+    .layout__mix-body {
+      flex: 1;
+      display: flex;
+      flex-direction: row;
+      height: calc(100% - 50px);
+    }
+  }
+
+  &__aside {
+    transition: width 0.3s;
+    overflow: hidden;
+    flex-shrink: 0;
+    height: 100%;
+  }
+
+  &__top-menu {
+    width: 100%;
+    height: 50px;
+    box-sizing: border-box;
+    background-color: var(--bg-color);
+    border-bottom: 1px solid var(--color-border-lighter);
+    flex-shrink: 0;
+  }
+
+  &__mix-top-menu {
+    width: 100%;
+    height: 50px;
+    box-sizing: border-box;
+    flex-shrink: 0;
+  }
+
+  &__main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: 100%;
+  }
+
+  &__header {
+    height: 50px;
+    box-sizing: border-box;
+    background-color: var(--bg-color);
+    border-bottom: 1px solid var(--color-border-lighter);
+    flex-shrink: 0;
+  }
+
+  &__content {
+    flex: 1;
+    overflow: auto;
+    background-color: var(--bg-color-page);
+    padding: 0;
+  }
+}
 </style>

package/src/composables/useI18n.ts

@@ -1,44 +1,44 @@
-/**
- * 国际化组合式函数
- * 提供便捷的国际化操作
- */
-
-import { useLocaleStore } from '@/stores/locale'
-import type { LocaleCode, LocaleMessages } from '@xto/core/locale'
-
-/**
- * 使用国际化
- * 封装 locale store，提供更简洁的 API
- */
-export function useI18n() {
-  const localeStore = useLocaleStore()
-
-  return {
-    /** 当前语言代码 */
-    locale: localeStore.locale,
-    /** 当前语言名称 */
-    localeName: localeStore.localeName,
-    /** 支持的语言列表 */
-    locales: localeStore.locales,
-    /** 翻译函数 */
-    t: localeStore.t,
-    /** 当前语言包 */
-    messages: localeStore.messages,
-    /** 切换语言 */
-    setLocale: localeStore.changeLocale,
-    /** 添加自定义翻译 */
-    addMessages: localeStore.addMessages
-  }
-}
-
-/**
- * 创建翻译函数
- * 用于在非组件上下文中使用翻译
- */
-export function createTranslator() {
-  const localeStore = useLocaleStore()
-  return localeStore.t
-}
-
-// 导出类型
+/**
+ * 国际化组合式函数
+ * 提供便捷的国际化操作
+ */
+
+import { useLocaleStore } from '@/stores/locale'
+import type { LocaleCode, LocaleMessages } from '@xto/core/locale'
+
+/**
+ * 使用国际化
+ * 封装 locale store，提供更简洁的 API
+ */
+export function useI18n() {
+  const localeStore = useLocaleStore()
+
+  return {
+    /** 当前语言代码 */
+    locale: localeStore.locale,
+    /** 当前语言名称 */
+    localeName: localeStore.localeName,
+    /** 支持的语言列表 */
+    locales: localeStore.locales,
+    /** 翻译函数 */
+    t: localeStore.t,
+    /** 当前语言包 */
+    messages: localeStore.messages,
+    /** 切换语言 */
+    setLocale: localeStore.changeLocale,
+    /** 添加自定义翻译 */
+    addMessages: localeStore.addMessages
+  }
+}
+
+/**
+ * 创建翻译函数
+ * 用于在非组件上下文中使用翻译
+ */
+export function createTranslator() {
+  const localeStore = useLocaleStore()
+  return localeStore.t
+}
+
+// 导出类型
 export type { LocaleCode, LocaleMessages }