xto-fronted 0.1.2 → 0.1.3

package/src/components/Layout/Sidebar.vue

@@ -0,0 +1,213 @@
+<script setup lang="ts">
+/**
+ * 侧边栏组件
+ * 使用统一的 useMenu 和 useApp hooks
+ */
+import { useMenu } from '@/composables'
+import { useApp } from '@/composables'
+import { Menu, MenuItem, SubMenu } from '@xto/navigation'
+import { Button } from '@xto/base'
+import { Input } from '@xto/form'
+import config from '@/config'
+
+// 使用统一的 hooks
+const { logout, userName, userInfo } = useApp()
+const {
+  searchKeyword,
+  activeMenu,
+  isCollapsed,
+  searchResults,
+  filteredMenuList,
+  getMenuIcon,
+  handleMenuSelect,
+  handleSearchItemClick
+} = useMenu()
+</script>
+
+<template>
+  <div class="sidebar">
+    <!-- Logo -->
+    <div class="sidebar__logo">
+      <img src="/vite.svg" alt="Logo" class="sidebar__logo-img" />
+      <span v-show="!isCollapsed" class="sidebar__logo-text">{{ config.webTitle }}</span>
+    </div>
+
+    <!-- 搜索框 -->
+    <div v-if="!isCollapsed" class="sidebar__search">
+      <Input
+        v-model="searchKeyword"
+        placeholder="搜索菜单..."
+        size="small"
+        clearable
+      />
+      <!-- 搜索结果 -->
+      <div v-if="searchResults.length > 0" class="sidebar__search-results">
+        <div
+          v-for="item in searchResults"
+          :key="item.path"
+          class="sidebar__search-item"
+          @click="handleSearchItemClick(item.path)"
+        >
+          <span class="menu-icon">{{ getMenuIcon(item.icon) }}</span>
+          <div class="sidebar__search-item-info">
+            <span class="sidebar__search-item-title">{{ item.title }}</span>
+            <span v-if="item.parentTitle" class="sidebar__search-item-parent">{{ item.parentTitle }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 菜单 -->
+    <Menu
+      :default-active="activeMenu"
+      :collapse="isCollapsed"
+      :collapse-transition="false"
+      class="sidebar__menu"
+      @select="handleMenuSelect"
+    >
+      <template v-for="menu in filteredMenuList" :key="menu.path">
+        <!-- 有子菜单 -->
+        <SubMenu v-if="menu.children && menu.children.length > 0" :index="menu.path">
+          <template #title>
+            <span class="menu-icon">{{ getMenuIcon(menu.icon) }}</span>
+            <span>{{ menu.title }}</span>
+          </template>
+          <MenuItem
+            v-for="child in menu.children"
+            :key="child.path"
+            :index="child.path"
+          >
+            <span class="menu-icon">{{ getMenuIcon(child.icon) }}</span>
+            <span>{{ child.title }}</span>
+          </MenuItem>
+        </SubMenu>
+        <!-- 无子菜单 -->
+        <MenuItem v-else :index="menu.path">
+          <span class="menu-icon">{{ getMenuIcon(menu.icon) }}</span>
+          <span>{{ menu.title }}</span>
+        </MenuItem>
+      </template>
+    </Menu>
+
+    <!-- 用户信息 -->
+    <div class="sidebar__user" v-if="!isCollapsed">
+      <div class="sidebar__user-info">
+        <span class="sidebar__user-name">{{ userName || '用户' }}</span>
+        <span class="sidebar__user-role">{{ userInfo?.departmentName || '' }}</span>
+      </div>
+      <Button type="text" size="small" @click="logout">退出</Button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sidebar {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-color);
+
+  &__logo {
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    border-bottom: 1px solid var(--color-border-lighter);
+  }
+
+  &__logo-img {
+    width: 32px;
+    height: 32px;
+  }
+
+  &__logo-text {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--color-primary);
+  }
+
+  &__search {
+    padding: 10px;
+    border-bottom: 1px solid var(--color-border-lighter);
+    position: relative;
+  }
+
+  &__search-results {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background-color: var(--bg-color);
+    border: 1px solid var(--color-border-lighter);
+    border-radius: var(--border-radius-base);
+    box-shadow: var(--box-shadow);
+    max-height: 300px;
+    overflow-y: auto;
+    z-index: 100;
+  }
+
+  &__search-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: var(--color-fill);
+    }
+
+    &-info {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    &-title {
+      font-size: 14px;
+      color: var(--color-text-primary);
+    }
+
+    &-parent {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+  }
+
+  &__menu {
+    flex: 1;
+    border-right: none;
+    overflow-y: auto;
+  }
+
+  &__user {
+    padding: 10px;
+    border-top: 1px solid var(--color-border-lighter);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__user-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  &__user-name {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  &__user-role {
+    font-size: 12px;
+    color: var(--color-text-secondary);
+  }
+}
+
+.menu-icon {
+  margin-right: 8px;
+}
+</style>

package/src/components/Layout/Tabs.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="tabs-wrapper">
+    <!-- 标签页功能后期自行开发 -->
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tabs-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-secondary);
+  font-size: 12px;
+}
+</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/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Composables 统一导出
+ */
+
+export { useApp } from './useApp'
+export { useAuth } from './useAuth'
+export { useMenu } from './useMenu'
+export { useForm } from './useForm'
+export { useTable } from './useTable'

package/src/composables/useApp.ts

@@ -0,0 +1,170 @@
+/**
+ * 应用核心 Hook
+ * 封装登录、退出、初始化等核心逻辑
+ */
+
+import { computed, ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { Message } from '@xto/feedback'
+import { useAuthStore } from '@/stores/auth'
+import { useUserStore } from '@/stores/user'
+import { useMenuStore } from '@/stores/menu'
+import { login as loginApi, logout as logoutApi } from '@/api/auth'
+import { getCurrentUser } from '@/api/user'
+import { getUserMenu } from '@/api/menu'
+import type { UserInfo, RemoteMenuItem, LoginResult } from '@/types/api'
+
+export function useApp() {
+  const router = useRouter()
+  const route = useRoute()
+  const authStore = useAuthStore()
+  const userStore = useUserStore()
+  const menuStore = useMenuStore()
+
+  const loading = ref(false)
+
+  // ========== 计算属性 ==========
+
+  // 是否已登录
+  const isLoggedIn = computed(() => authStore.isLoggedIn)
+
+  // 用户信息
+  const userInfo = computed(() => userStore.userInfo)
+
+  // 用户名
+  const userName = computed(() => userStore.userName || '')
+
+  // 菜单列表
+  const menuList = computed(() => menuStore.menuList)
+
+  // 首页路径
+  const indexPath = computed(() => menuStore.index)
+
+  // ========== 登录 ==========
+
+  const login = async (uid: string, password: string) => {
+    loading.value = true
+    try {
+      // 1. 清除旧状态
+      clearAllState()
+
+      // 2. 调用登录接口
+      const res = await loginApi({ uid, password })
+      const loginData = res.data as LoginResult
+
+      // 3. 保存登录信息
+      authStore.login(loginData as unknown as Record<string, unknown>)
+
+      // 4. 加载用户信息
+      await loadUserInfo()
+
+      // 5. 加载菜单
+      await loadMenu()
+
+      // 6. 处理跳转
+      const redirectUrl = route.query['redirectUrl'] as string
+      if (redirectUrl) {
+        const url = decodeURIComponent(redirectUrl)
+        if (url.startsWith('http')) {
+          // 外网地址，带上 code 跳转
+          const code = loginData.code
+          location.href = url.includes('?') ? `${url}&code=${code}` : `${url}?code=${code}`
+        } else {
+          await router.replace(url)
+        }
+      } else {
+        await router.replace(indexPath.value || '/')
+      }
+
+      Message.success('登录成功')
+      return { success: true, data: loginData }
+    } catch (error: any) {
+      Message.error(error?.message || '登录失败')
+      return { success: false, error }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // ========== 退出登录 ==========
+
+  const logout = async (showMessage = true) => {
+    try {
+      await logoutApi()
+    } catch (error) {
+      console.error('退出登录接口失败', error)
+    } finally {
+      clearAllState()
+      router.push('/login')
+      if (showMessage) {
+        Message.success('退出登录成功')
+      }
+    }
+  }
+
+  // ========== 加载用户信息 ==========
+
+  const loadUserInfo = async () => {
+    const res = await getCurrentUser()
+    userStore.setUserInfo(res.data as UserInfo)
+    return res.data
+  }
+
+  // ========== 加载菜单 ==========
+
+  const loadMenu = async () => {
+    const res = await getUserMenu()
+    menuStore.setMenuFromRemote(res.data as RemoteMenuItem[])
+    return menuStore.menuList
+  }
+
+  // ========== 初始化应用（路由守卫中使用） ==========
+
+  const initApp = async () => {
+    if (!authStore.isLoggedIn) {
+      return false
+    }
+
+    try {
+      // 如果有 token 但没有用户信息，则加载
+      if (!userStore.userInfo) {
+        await loadUserInfo()
+      }
+      // 如果没有菜单，则加载
+      if (!menuStore.hasMenu) {
+        await loadMenu()
+      }
+      return true
+    } catch (error) {
+      console.error('初始化应用失败', error)
+      clearAllState()
+      return false
+    }
+  }
+
+  // ========== 清除所有状态 ==========
+
+  const clearAllState = () => {
+    authStore.logout()
+    userStore.clearUserInfo()
+    menuStore.clearMenu()
+  }
+
+  return {
+    // 状态
+    loading,
+    isLoggedIn,
+    userInfo,
+    userName,
+    menuList,
+    indexPath,
+
+    // 方法
+    login,
+    logout,
+    loadUserInfo,
+    loadMenu,
+    initApp,
+    clearAllState
+  }
+}

package/src/composables/useAuth.ts

@@ -0,0 +1,70 @@
+/**
+ * 权限 Hook
+ * 封装权限检查、按钮权限等逻辑
+ */
+
+import { computed } from 'vue'
+import { useMenuStore } from '@/stores/menu'
+import { useAuthStore } from '@/stores/auth'
+import { useUserStore } from '@/stores/user'
+
+export function useAuth() {
+  const menuStore = useMenuStore()
+  const authStore = useAuthStore()
+  const userStore = useUserStore()
+
+  // 是否已登录
+  const isLoggedIn = computed(() => authStore.isLoggedIn)
+
+  // 用户名
+  const userName = computed(() => userStore.userName)
+
+  // 用户信息
+  const userInfo = computed(() => userStore.userInfo)
+
+  // ========== 检查按钮权限 ==========
+
+  const hasPermission = (permission: string | string[]): boolean => {
+    const currentPath = window.location.pathname
+    const btnList = menuStore.menuBtnListMap[currentPath] || []
+    const btnCodes = btnList.map(item => item.code)
+
+    if (Array.isArray(permission)) {
+      return permission.some(p => btnCodes.includes(p))
+    }
+    return btnCodes.includes(permission)
+  }
+
+  // ========== 检查是否有任一权限 ==========
+
+  const hasAnyPermission = (permissions: string[]): boolean => {
+    return permissions.some(p => hasPermission(p))
+  }
+
+  // ========== 检查是否有全部权限 ==========
+
+  const hasAllPermissions = (permissions: string[]): boolean => {
+    return permissions.every(p => hasPermission(p))
+  }
+
+  // ========== 获取当前页面按钮权限列表 ==========
+
+  const getCurrentPagePermissions = (): string[] => {
+    const currentPath = window.location.pathname
+    const btnList = menuStore.menuBtnListMap[currentPath] || []
+    return btnList.map(item => item.code)
+  }
+
+  return {
+    // 状态
+    isLoggedIn,
+    userName,
+    userInfo,
+
+    // 方法
+    hasPermission,
+    hasAnyPermission,
+    hasAllPermissions,
+    getCurrentPagePermissions
+  }
+}

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
+  }
+}