xto-fronted 0.4.89 → 0.4.91

package/src/components/Layout/index.vue

@@ -1,193 +1,193 @@
-<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'
+
+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;
+  }
+}
 </style>

package/src/directives/permission.ts

@@ -1,22 +1,31 @@
 /**
  * 权限指令
  * v-permission="['user:edit']" 或 v-permission="'user:edit'"
- * 注意：tineco-ui 不支持 permissions 字段，此指令暂时只检查登录状态
  */
 
 import type { Directive, DirectiveBinding } from 'vue'
 import { useUserStore } from '@/stores/user'
+import { useMenuStore } from '@/stores/menu'
 
 const permission: Directive = {
-  mounted(el: HTMLElement, _binding: DirectiveBinding<string | string[]>) {
+  mounted(el: HTMLElement, binding: DirectiveBinding<string | string[]>) {
     const userStore = useUserStore()
+    const menuStore = useMenuStore()
 
     // 如果没有登录，移除元素
     if (!userStore.isLoggedIn) {
       el.parentNode?.removeChild(el)
+      return
     }
 
-    // 注意：tineco-ui 不支持 permissions 字段，此指令暂时不做权限判断
+    // 获取权限标识
+    const value = binding.value
+    const permissions = Array.isArray(value) ? value : [value]
+
+    // 检查是否有权限
+    if (!menuStore.hasPermission(permissions)) {
+      el.parentNode?.removeChild(el)
+    }
   }
 }
 

package/src/index.ts

@@ -1,101 +1,101 @@
-// 样式
-import './style.scss'
-
-// 配置
-import { initAppConfig, getAppId, getClientId, getApiBaseUrl } from './utils/config'
-import type { LocaleCode } from '@xto/core/locale'
-
-// XtoConfig 类型定义
-export interface XtoConfig {
-  appName?: string
-  appId?: string
-  clientId?: string
-  apiBaseUrl?: string
-  indexPath?: string
-  loginPath?: string
-  locale?: LocaleCode
-}
-
-/**
- * 初始化 XTO 应用
- * 在项目入口文件中调用此函数设置应用配置
- * @param config 应用配置
- */
-export function createXtoApp(config: Partial<XtoConfig>) {
-  initAppConfig({
-    appId: config.appId,
-    clientId: config.clientId,
-    apiBaseUrl: config.apiBaseUrl
-  })
-
-  // 设置初始语言（如果提供）
-  if (config.locale) {
-    import('./stores/locale').then(({ useLocaleStore }) => {
-      const localeStore = useLocaleStore()
-      localeStore.changeLocale(config.locale!)
-    })
-  }
-
-  return {
-    config: {
-      appName: config.appName || 'XTO App',
-      appId: getAppId(),
-      clientId: getClientId(),
-      apiBaseUrl: getApiBaseUrl(),
-      indexPath: config.indexPath || '/dashboard',
-      loginPath: config.loginPath || '/login',
-      locale: config.locale || 'zh-CN'
-    }
-  }
-}
-
-// 组件
-export { default as Layout } from './components/Layout/index.vue'
-export { default as Header } from './components/Layout/Header.vue'
-export { default as Sidebar } from './components/Layout/Sidebar.vue'
-export { default as Tabs } from './components/Layout/Tabs.vue'
-export { default as Footer } from './components/Layout/Footer.vue'
-
-// 错误页面组件
-export { default as Login } from './views/login/index.vue'
-export { default as NotFound } from './views/error/404.vue'
-export { default as Forbidden } from './views/error/403.vue'
-
-// 组合式函数
-export * from './composables/useApp'
-export * from './composables/useAuth'
-export * from './composables/useForm'
-export * from './composables/useTable'
-export * from './composables/useI18n'
-
-// 工具函数
-export * from './utils/auth'
-export * from './utils/permission'
-export * from './utils/request'
-export * from './utils/storage'
-export * from './utils/config'
-
-// Store
-export * from './stores/app'
-export * from './stores/auth'
-export * from './stores/menu'
-export * from './stores/user'
-export * from './stores/locale'
-
-// 路由
-export { default as router, resetRouter } from './router'
-export * from './router/staticRoutes'
-export * from './router/dynamicRoutes'
-export { createLayoutRoute, createRouter } from './router/layoutRoute'
-export { setupRouterGuards } from './router/guards'
-
-// API
-export * from './api/auth'
-export * from './api/system'
-export * from './api/user'
-
-// 枚举
-export * from './enums'
-
-// 指令
+// 样式
+import './style.scss'
+
+// 配置
+import { initAppConfig, getAppId, getClientId, getApiBaseUrl } from './utils/config'
+import type { LocaleCode } from '@xto/core/locale'
+
+// XtoConfig 类型定义
+export interface XtoConfig {
+  appName?: string
+  appId?: string
+  clientId?: string
+  apiBaseUrl?: string
+  indexPath?: string
+  loginPath?: string
+  locale?: LocaleCode
+}
+
+/**
+ * 初始化 XTO 应用
+ * 在项目入口文件中调用此函数设置应用配置
+ * @param config 应用配置
+ */
+export function createXtoApp(config: Partial<XtoConfig>) {
+  initAppConfig({
+    appId: config.appId,
+    clientId: config.clientId,
+    apiBaseUrl: config.apiBaseUrl
+  })
+
+  // 设置初始语言（如果提供）
+  if (config.locale) {
+    import('./stores/locale').then(({ useLocaleStore }) => {
+      const localeStore = useLocaleStore()
+      localeStore.changeLocale(config.locale!)
+    })
+  }
+
+  return {
+    config: {
+      appName: config.appName || 'XTO App',
+      appId: getAppId(),
+      clientId: getClientId(),
+      apiBaseUrl: getApiBaseUrl(),
+      indexPath: config.indexPath || '/dashboard',
+      loginPath: config.loginPath || '/login',
+      locale: config.locale || 'zh-CN'
+    }
+  }
+}
+
+// 组件
+export { default as Layout } from './components/Layout/index.vue'
+export { default as Header } from './components/Layout/Header.vue'
+export { default as Sidebar } from './components/Layout/Sidebar.vue'
+export { default as Tabs } from './components/Layout/Tabs.vue'
+export { default as Footer } from './components/Layout/Footer.vue'
+
+// 错误页面组件
+export { default as Login } from './views/login/index.vue'
+export { default as NotFound } from './views/error/404.vue'
+export { default as Forbidden } from './views/error/403.vue'
+
+// 组合式函数
+export * from './composables/useApp'
+export * from './composables/useAuth'
+export * from './composables/useForm'
+export * from './composables/useTable'
+export * from './composables/useI18n'
+
+// 工具函数
+export * from './utils/auth'
+export * from './utils/permission'
+export * from './utils/request'
+export * from './utils/storage'
+export * from './utils/config'
+
+// Store
+export * from './stores/app'
+export * from './stores/auth'
+export * from './stores/menu'
+export * from './stores/user'
+export * from './stores/locale'
+
+// 路由
+export { default as router, resetRouter } from './router'
+export * from './router/staticRoutes'
+export * from './router/dynamicRoutes'
+export { createLayoutRoute, createRouter } from './router/layoutRoute'
+export { setupRouterGuards } from './router/guards'
+
+// API
+export * from './api/auth'
+export * from './api/system'
+export * from './api/user'
+
+// 枚举
+export * from './enums'
+
+// 指令
 export { default as permissionDirective } from './directives/permission'