xto-fronted 0.2.5 → 0.2.7

package/src/components/Layout/Tabs.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { Tabs, TabPane } from '@xto/navigation'
+
+const route = useRoute()
+const router = useRouter()
+
+// 标签页列表
+const tabList = computed(() => {
+  const tabs: { name: string; title: string; path: string; affix: boolean }[] = []
+
+  // 添加固定标签
+  route.matched.forEach(r => {
+    if (r.meta?.affix) {
+      tabs.push({
+        name: r.name as string,
+        title: r.meta.title as string,
+        path: r.path,
+        affix: true
+      })
+    }
+  })
+
+  return tabs
+})
+
+// 当前激活的标签
+const activeTab = computed(() => route.path)
+
+// 点击标签
+const handleClick = (path: string) => {
+  router.push(path)
+}
+
+// 关闭标签
+const handleClose = (path: string) => {
+  // 固定标签不能关闭
+  const tab = tabList.value.find(t => t.path === path)
+  if (tab?.affix) return
+
+  // 如果关闭的是当前标签，跳转到前一个标签
+  if (path === activeTab.value) {
+    const index = tabList.value.findIndex(t => t.path === path)
+    const nextTab = tabList.value[index - 1] || tabList.value[index + 1]
+    if (nextTab) {
+      router.push(nextTab.path)
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="tabs-wrapper">
+    <Tabs v-model="activeTab" type="card" @tab-click="handleClick">
+      <TabPane
+        v-for="tab in tabList"
+        :key="tab.path"
+        :name="tab.path"
+        :label="tab.title"
+        :closable="!tab.affix"
+      >
+        <template #label>
+          <span class="tab-label">
+            {{ tab.title }}
+            <span
+              v-if="!tab.affix"
+              class="tab-close"
+              @click.stop="handleClose(tab.path)"
+            >
+              ✕
+            </span>
+          </span>
+        </template>
+      </TabPane>
+    </Tabs>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tabs-wrapper {
+  width: 100%;
+  height: 100%;
+  padding: 0 10px;
+
+  :deep(.t-tabs) {
+    height: 100%;
+  }
+
+  :deep(.t-tabs__header) {
+    margin: 0;
+    border-bottom: none;
+  }
+
+  :deep(.t-tabs__nav) {
+    border: none;
+  }
+
+  :deep(.t-tabs__item) {
+    height: 32px;
+    line-height: 32px;
+    border: 1px solid var(--color-border-lighter);
+    margin-right: 5px;
+    border-radius: var(--border-radius-base);
+    padding: 0 15px;
+
+    &.is-active {
+      background-color: var(--color-primary-light-9);
+      border-color: var(--color-primary);
+    }
+  }
+}
+
+.tab-label {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.tab-close {
+  width: 14px;
+  height: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  border-radius: 50%;
+
+  &:hover {
+    background-color: var(--color-danger-light);
+    color: var(--color-danger);
+  }
+}
+</style>

package/src/components/Layout/index.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useAppStore } from '@/stores/app'
+import Sidebar from './Sidebar.vue'
+import Header from './Header.vue'
+
+const appStore = useAppStore()
+
+const sidebarWidth = computed(() =>
+  appStore.isCollapsed ? '64px' : '210px'
+)
+</script>
+
+<template>
+  <div class="layout">
+    <aside class="layout__aside" :style="{ width: sidebarWidth }">
+      <Sidebar />
+    </aside>
+    <div class="layout__main">
+      <Header class="layout__header" />
+      <main class="layout__content">
+        <router-view />
+      </main>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.layout {
+  display: flex;
+  width: 100%;
+  height: 100%;
+
+  &__aside {
+    transition: width 0.3s;
+    overflow: hidden;
+    flex-shrink: 0;
+    height: 100%;
+  }
+
+  &__main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: 100%;
+  }
+
+  &__header {
+    height: 50px;
+    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);
+  }
+}
+</style>

package/src/composables/useAuth.ts

@@ -0,0 +1,45 @@
+/**
+ * 权限组合函数
+ */
+
+import { computed } from 'vue'
+import { useUserStore } from '@/stores/user'
+
+export function useAuth() {
+  const userStore = useUserStore()
+
+  // 检查权限
+  const hasPermission = (permission: string | string[]): boolean => {
+    const permissions = userStore.permissions
+    if (permissions.includes('*')) return true
+
+    if (Array.isArray(permission)) {
+      return permission.some(p => permissions.includes(p))
+    }
+    return permissions.includes(permission)
+  }
+
+  // 检查角色
+  const hasRole = (role: string | string[]): boolean => {
+    const roles = userStore.roles
+    if (roles.includes('admin')) return true
+
+    if (Array.isArray(role)) {
+      return role.some(r => roles.includes(r))
+    }
+    return roles.includes(role)
+  }
+
+  // 是否是管理员
+  const isAdmin = computed(() => userStore.roles.includes('admin'))
+
+  // 是否已登录
+  const isLoggedIn = computed(() => userStore.isLoggedIn)
+
+  return {
+    hasPermission,
+    hasRole,
+    isAdmin,
+    isLoggedIn
+  }
+}

package/src/composables/useForm.ts

@@ -0,0 +1,79 @@
+/**
+ * 表单组合函数
+ */
+
+import { ref, reactive } from 'vue'
+
+export interface FormOptions<T = any> {
+  rules?: Record<string, any[]>
+  onSubmit?: (data: T) => Promise<void> | void
+}
+
+export function useForm<T extends Record<string, any> = Record<string, any>>(
+  initialValues: T,
+  options: FormOptions<T> = {}
+) {
+  const { rules, onSubmit } = options
+
+  const formRef = ref()
+  const formData = reactive<T>({ ...initialValues } as T)
+  const loading = ref(false)
+  const visible = ref(false)
+  const isEdit = ref(false)
+
+  // 打开新增
+  const openAdd = () => {
+    resetForm()
+    isEdit.value = false
+    visible.value = true
+  }
+
+  // 打开编辑
+  const openEdit = (data: Partial<T>) => {
+    Object.assign(formData, data)
+    isEdit.value = true
+    visible.value = true
+  }
+
+  // 关闭
+  const close = () => {
+    visible.value = false
+    resetForm()
+  }
+
+  // 重置表单
+  const resetForm = () => {
+    Object.keys(initialValues).forEach(key => {
+      (formData as any)[key] = initialValues[key]
+    })
+    formRef.value?.resetFields()
+  }
+
+  // 提交
+  const handleSubmit = async () => {
+    try {
+      await formRef.value?.validate()
+      loading.value = true
+      await onSubmit?.(formData as T)
+      close()
+    } catch (error) {
+      console.error(error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    formRef,
+    formData,
+    rules,
+    loading,
+    visible,
+    isEdit,
+    openAdd,
+    openEdit,
+    close,
+    resetForm,
+    handleSubmit
+  }
+}

package/src/composables/useTable.ts

@@ -0,0 +1,97 @@
+/**
+ * 表格组合函数
+ */
+
+import { ref, reactive, computed } from 'vue'
+
+export interface TableOptions<T = any> {
+  fetchData: (params: any) => Promise<{ list: T[]; total: number }>
+  defaultPageSize?: number
+}
+
+export function useTable<T = any>(options: TableOptions<T>) {
+  const { fetchData, defaultPageSize = 10 } = options
+
+  const loading = ref(false)
+  const data = ref<T[]>([]) as any
+  const total = ref(0)
+  const currentPage = ref(1)
+  const pageSize = ref(defaultPageSize)
+
+  const searchParams = reactive<Record<string, any>>({})
+
+  // 获取数据
+  const getData = async () => {
+    loading.value = true
+    try {
+      const params = {
+        ...searchParams,
+        page: currentPage.value,
+        pageSize: pageSize.value
+      }
+      const result = await fetchData(params)
+      data.value = result.list
+      total.value = result.total
+    } catch (error) {
+      console.error(error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 搜索
+  const handleSearch = () => {
+    currentPage.value = 1
+    getData()
+  }
+
+  // 重置
+  const handleReset = () => {
+    Object.keys(searchParams).forEach(key => {
+      searchParams[key] = undefined
+    })
+    currentPage.value = 1
+    getData()
+  }
+
+  // 分页改变
+  const handlePageChange = (page: number) => {
+    currentPage.value = page
+    getData()
+  }
+
+  // 每页条数改变
+  const handleSizeChange = (size: number) => {
+    pageSize.value = size
+    currentPage.value = 1
+    getData()
+  }
+
+  // 刷新
+  const refresh = () => {
+    getData()
+  }
+
+  // 分页配置
+  const pagination = computed(() => ({
+    current: currentPage.value,
+    pageSize: pageSize.value,
+    total: total.value
+  }))
+
+  return {
+    loading,
+    data,
+    total,
+    currentPage,
+    pageSize,
+    searchParams,
+    pagination,
+    getData,
+    handleSearch,
+    handleReset,
+    handlePageChange,
+    handleSizeChange,
+    refresh
+  }
+}

package/src/directives/permission.ts

@@ -0,0 +1,38 @@
+/**
+ * 权限指令
+ * v-permission="['user:edit']" 或 v-permission="'user:edit'"
+ */
+
+import type { Directive, DirectiveBinding } from 'vue'
+import { useUserStore } from '@/stores/user'
+
+const permission: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding<string | string[]>) {
+    const userStore = useUserStore()
+    const { value } = binding
+
+    if (!value) return
+
+    const permissions = userStore.permissions
+
+    // 判断是否有权限
+    let hasPermission = false
+    if (Array.isArray(value)) {
+      hasPermission = value.some(p => permissions.includes(p) || permissions.includes('*'))
+    } else {
+      hasPermission = permissions.includes(value) || permissions.includes('*')
+    }
+
+    // 没有权限则移除元素
+    if (!hasPermission) {
+      el.parentNode?.removeChild(el)
+    }
+  }
+}
+
+export default permission
+
+// 注册指令
+export function setupPermissionDirective(app: any) {
+  app.directive('permission', permission)
+}

package/src/enums/index.ts

@@ -0,0 +1,63 @@
+/**
+ * 枚举常量
+ */
+
+// 状态
+export enum Status {
+  ENABLED = 1,
+  DISABLED = 0
+}
+
+// 性别
+export enum Gender {
+  UNKNOWN = 0,
+  MALE = 1,
+  FEMALE = 2
+}
+
+// 菜单类型
+export enum MenuType {
+  DIRECTORY = 0,
+  MENU = 1,
+  BUTTON = 2
+}
+
+// 状态文本映射
+export const StatusText: Record<Status, string> = {
+  [Status.ENABLED]: '启用',
+  [Status.DISABLED]: '禁用'
+}
+
+// 性别文本映射
+export const GenderText: Record<Gender, string> = {
+  [Gender.UNKNOWN]: '未知',
+  [Gender.MALE]: '男',
+  [Gender.FEMALE]: '女'
+}
+
+// 菜单类型文本映射
+export const MenuTypeText: Record<MenuType, string> = {
+  [MenuType.DIRECTORY]: '目录',
+  [MenuType.MENU]: '菜单',
+  [MenuType.BUTTON]: '按钮'
+}
+
+// 状态选项
+export const StatusOptions = [
+  { label: '启用', value: Status.ENABLED },
+  { label: '禁用', value: Status.DISABLED }
+]
+
+// 性别选项
+export const GenderOptions = [
+  { label: '未知', value: Gender.UNKNOWN },
+  { label: '男', value: Gender.MALE },
+  { label: '女', value: Gender.FEMALE }
+]
+
+// 菜单类型选项
+export const MenuTypeOptions = [
+  { label: '目录', value: MenuType.DIRECTORY },
+  { label: '菜单', value: MenuType.MENU },
+  { label: '按钮', value: MenuType.BUTTON }
+]

package/src/env.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+interface ImportMetaEnv {
+  readonly VITE_APP_TITLE: string
+  readonly VITE_API_BASE_URL: string
+  readonly VITE_USE_MOCK: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

package/src/index.ts

@@ -0,0 +1,48 @@
+// 组件
+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/useAuth'
+export * from './composables/useForm'
+export * from './composables/useTable'
+
+// 工具函数
+export * from './utils/auth'
+export * from './utils/permission'
+export * from './utils/request'
+export * from './utils/storage'
+
+// Store
+export * from './stores/app'
+export * from './stores/auth'
+export * from './stores/menu'
+export * from './stores/user'
+
+// 路由
+export { default as router, resetRouter } from './router'
+export * from './router/staticRoutes'
+export * from './router/dynamicRoutes'
+export { createLayoutRoute, createRouter } from './router/layoutRoute'
+
+// API
+export * from './api/auth'
+export * from './api/system'
+export * from './api/user'
+
+// 枚举
+export * from './enums'
+
+// 指令
+export { default as permissionDirective } from './directives/permission'
+
+// 应用初始化
+export { createXtoApp } from './setup'

package/src/main.ts

@@ -0,0 +1,34 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import router from './router'
+
+// 样式
+import '@/assets/styles/index.scss'
+
+// 组件库样式
+import '@xto/base/es/style.css'
+import '@xto/form/es/style.css'
+import '@xto/data/es/style.css'
+import '@xto/feedback/es/style.css'
+import '@xto/navigation/es/style.css'
+import '@xto/layout/es/style.css'
+import '@xto/business/es/style.css'
+
+// 全局注册内部组件（解决 resolveComponent 问题）
+import { Loading } from '@xto/base'
+import { TreeNode } from '@xto/data'
+
+const app = createApp(App)
+
+// 注册内部组件
+app.component('x-loading', Loading)
+app.component('TreeNode', TreeNode)
+
+// Pinia
+app.use(createPinia())
+
+// Router
+app.use(router)
+
+app.mount('#app')