xto-fronted 0.1.7 → 0.1.8

package/src/components/Layout/Header.vue

@@ -1,335 +0,0 @@
-<script setup lang="ts">
-/**
- * 头部组件
- * 使用统一的 useApp hooks
- */
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-import { useApp } from '@/composables'
-import { useAppStore } from '@/stores/app'
-
-const appStore = useAppStore()
-const { logout, userName, userInfo } = useApp()
-
-const dropdownVisible = ref(false)
-const dropdownRef = ref<HTMLElement | null>(null)
-const isFullscreen = ref(false)
-
-// 用户显示名称
-const userDisplayName = computed(() => userName.value || '用户')
-
-// 切换折叠
-const toggleCollapse = () => {
-  appStore.toggleCollapse()
-}
-
-// 切换主题
-const toggleTheme = () => {
-  appStore.toggleTheme()
-}
-
-// 切换全屏
-const toggleFullscreen = () => {
-  if (!document.fullscreenElement) {
-    document.documentElement.requestFullscreen()
-  } else {
-    document.exitFullscreen()
-  }
-}
-
-// 监听全屏变化
-const handleFullscreenChange = () => {
-  isFullscreen.value = !!document.fullscreenElement
-}
-
-// 切换下拉菜单
-const toggleDropdown = () => {
-  dropdownVisible.value = !dropdownVisible.value
-}
-
-// 关闭下拉菜单
-const closeDropdown = () => {
-  dropdownVisible.value = false
-}
-
-// 退出登录
-const handleLogout = async () => {
-  closeDropdown()
-  await logout()
-}
-
-// 点击外部关闭下拉菜单
-const handleClickOutside = (event: MouseEvent) => {
-  if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
-    closeDropdown()
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-  document.addEventListener('fullscreenchange', handleFullscreenChange)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-  document.removeEventListener('fullscreenchange', handleFullscreenChange)
-})
-</script>
-
-<template>
-  <div class="header">
-    <!-- 左侧 -->
-    <div class="header__left">
-      <div class="header__collapse" @click="toggleCollapse">
-        <span>☰</span>
-      </div>
-    </div>
-
-    <!-- 右侧 -->
-    <div class="header__right">
-      <!-- 全屏切换 -->
-      <div class="header__action" @click="toggleFullscreen" :title="isFullscreen ? '退出全屏' : '全屏'">
-        <svg v-if="isFullscreen" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
-          <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>
-        </svg>
-        <svg v-else viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
-          <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
-        </svg>
-      </div>
-
-      <!-- 主题切换 -->
-      <div class="header__action" @click="toggleTheme" title="切换主题">
-        <span v-if="appStore.isDark">🌙</span>
-        <span v-else>☀️</span>
-      </div>
-
-      <!-- 用户头像 -->
-      <div class="header__user" ref="dropdownRef">
-        <div class="header__user-trigger" @click.stop="toggleDropdown">
-          <div class="header__avatar">
-            <span>{{ userDisplayName.charAt(0) }}</span>
-          </div>
-          <span class="header__user-name">{{ userDisplayName }}</span>
-          <span class="header__user-arrow" :class="{ 'is-active': dropdownVisible }">▼</span>
-        </div>
-
-        <!-- 下拉菜单 -->
-        <Transition name="dropdown">
-          <div v-if="dropdownVisible" class="header__dropdown">
-            <div class="header__dropdown-header">
-              <div class="header__dropdown-avatar">
-                <span>{{ userDisplayName.charAt(0) }}</span>
-              </div>
-              <div class="header__dropdown-info">
-                <div class="header__dropdown-name">{{ userDisplayName }}</div>
-                <div class="header__dropdown-role">{{ userInfo?.departmentName || '' }}</div>
-              </div>
-            </div>
-            <div class="header__dropdown-divider"></div>
-            <div class="header__dropdown-menu">
-              <div class="header__dropdown-item header__dropdown-item--danger" @click="handleLogout">
-                <span class="header__dropdown-icon">🚪</span>
-                <span>退出登录</span>
-              </div>
-            </div>
-          </div>
-        </Transition>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 20px;
-  height: 100%;
-
-  &__left {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-  }
-
-  &__collapse {
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    font-size: 18px;
-    color: var(--color-text-regular);
-
-    &:hover {
-      color: var(--color-primary);
-    }
-  }
-
-  &__right {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-  }
-
-  &__action {
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    border-radius: var(--border-radius-base);
-    font-size: 16px;
-
-    &:hover {
-      background-color: var(--color-fill);
-    }
-  }
-
-  &__user {
-    position: relative;
-
-    &-trigger {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      cursor: pointer;
-      padding: 4px 8px;
-      border-radius: var(--border-radius-base);
-      transition: background-color 0.2s;
-
-      &:hover {
-        background-color: var(--color-fill);
-      }
-    }
-
-    &-name {
-      font-size: 14px;
-      color: var(--color-text-primary);
-    }
-
-    &-arrow {
-      font-size: 10px;
-      color: var(--color-text-secondary);
-      transition: transform 0.2s;
-
-      &.is-active {
-        transform: rotate(180deg);
-      }
-    }
-  }
-
-  &__avatar {
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light-3));
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-    font-size: 14px;
-    font-weight: 500;
-  }
-
-  &__dropdown {
-    position: absolute;
-    top: calc(100% + 8px);
-    right: 0;
-    min-width: 200px;
-    background-color: var(--bg-color);
-    border-radius: var(--border-radius-base);
-    box-shadow: var(--box-shadow);
-    overflow: hidden;
-    z-index: 100;
-
-    &-header {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 16px;
-    }
-
-    &-avatar {
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light-3));
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: #fff;
-      font-size: 16px;
-      font-weight: 500;
-    }
-
-    &-info {
-      flex: 1;
-    }
-
-    &-name {
-      font-size: 14px;
-      font-weight: 500;
-      color: var(--color-text-primary);
-    }
-
-    &-role {
-      font-size: 12px;
-      color: var(--color-text-secondary);
-      margin-top: 2px;
-    }
-
-    &-divider {
-      height: 1px;
-      background-color: var(--color-border-lighter);
-    }
-
-    &-menu {
-      padding: 8px 0;
-    }
-
-    &-item {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      padding: 10px 16px;
-      cursor: pointer;
-      font-size: 14px;
-      color: var(--color-text-regular);
-      transition: all 0.2s;
-
-      &:hover {
-        background-color: var(--color-fill);
-        color: var(--color-text-primary);
-      }
-
-      &--danger {
-        color: var(--color-danger);
-
-        &:hover {
-          background-color: var(--color-danger-light);
-          color: var(--color-danger);
-        }
-      }
-    }
-
-    &-icon {
-      font-size: 16px;
-    }
-  }
-}
-
-// 下拉动画
-.dropdown-enter-active,
-.dropdown-leave-active {
-  transition: all 0.2s ease;
-}
-
-.dropdown-enter-from,
-.dropdown-leave-to {
-  opacity: 0;
-  transform: translateY(-10px);
-}
-</style>

package/src/components/Layout/Sidebar.vue

@@ -1,213 +0,0 @@
-<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,20 +0,0 @@
-<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

@@ -1,62 +0,0 @@
-<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

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