xto-fronted 0.1.1 → 0.1.3

package/src/components/Layout/Sidebar.vue

@@ -1,297 +1,213 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useMenuStore } from '@/stores/menu'
-import { useUserStore } from '@/stores/user'
-import { useAuthStore } from '@/stores/auth'
-import { useAppStore } from '@/stores/app'
-import { Menu, MenuItem, SubMenu } from '@xto/navigation'
-import { Button } from '@xto/base'
-import { Input } from '@xto/form'
-import type { MenuItem as MenuItemType } from '@/types/api'
-
-const route = useRoute()
-const router = useRouter()
-const menuStore = useMenuStore()
-const userStore = useUserStore()
-const authStore = useAuthStore()
-const appStore = useAppStore()
-
-const searchKeyword = ref('')
-const isCollapsed = computed(() => appStore.isCollapsed)
-const activeMenu = computed(() => route.path)
-
-// 菜单主题相关
-const menuBgColor = computed(() => appStore.isDark ? '#1d1e1f' : '#fff')
-const menuTextColor = computed(() => appStore.isDark ? '#cfd3dc' : '#303133')
-const menuActiveTextColor = computed(() => '#409eff')
-
-// 扁平化菜单用于搜索
-const flattenMenus = (menus: MenuItemType[], parentTitle = ''): (MenuItemType & { parentTitle: string })[] => {
-  const result: (MenuItemType & { parentTitle: string })[] = []
-  menus.forEach(menu => {
-    if (menu.children && menu.children.length > 0) {
-      result.push(...flattenMenus(menu.children, menu.title))
-    } else {
-      result.push({ ...menu, parentTitle })
-    }
-  })
-  return result
-}
-
-// 搜索结果
-const searchResults = computed(() => {
-  if (!searchKeyword.value.trim()) return []
-  const flatMenus = flattenMenus(menuStore.menuList)
-  return flatMenus.filter(menu =>
-    menu.title.toLowerCase().includes(searchKeyword.value.toLowerCase())
-  )
-})
-
-// 过滤后的菜单列表
-const filteredMenuList = computed(() => {
-  if (!searchKeyword.value.trim()) return menuStore.menuList
-
-  return menuStore.menuList.map(menu => {
-    if (menu.children && menu.children.length > 0) {
-      const filteredChildren = menu.children.filter(child =>
-        child.title.toLowerCase().includes(searchKeyword.value.toLowerCase())
-      )
-      if (filteredChildren.length > 0) {
-        return { ...menu, children: filteredChildren }
-      }
-      return null
-    }
-    if (menu.title.toLowerCase().includes(searchKeyword.value.toLowerCase())) {
-      return menu
-    }
-    return null
-  }).filter(Boolean) as MenuItemType[]
-})
-
-// 菜单选择
-const handleMenuSelect = (index: string) => {
-  if (index && index !== route.path) {
-    router.push(index)
-    searchKeyword.value = ''
-  }
-}
-
-// 搜索结果点击
-const handleSearchItemClick = (path: string) => {
-  router.push(path)
-  searchKeyword.value = ''
-}
-
-// 退出登录
-const handleLogout = () => {
-  authStore.logout()
-  userStore.clearUserInfo()
-  menuStore.clearMenu()
-  router.push('/login')
-}
-
-// 菜单图标
-const getMenuIcon = (icon?: string) => {
-  const iconMap: Record<string, string> = {
-    dashboard: '📊',
-    system: '⚙️',
-    user: '👤',
-    role: '👥',
-    menu: '📋',
-    setting: '🔧'
-  }
-  return iconMap[icon || ''] || '📄'
-}
-</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">Xto Demo</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"
-      :background-color="menuBgColor"
-      :text-color="menuTextColor"
-      :active-text-color="menuActiveTextColor"
-      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">{{ userStore.nickname }}</span>
-        <span class="sidebar__user-role">{{ userStore.roles.join(', ') }}</span>
-      </div>
-      <Button type="text" size="small" @click="handleLogout">退出</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;
-}
+<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

@@ -1,134 +1,20 @@
-<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);
-  }
-}
+<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/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'