xto-fronted 0.9.3 → 0.9.5

package/src/components/FilterBar.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+/**
+ * FilterBar 筛选栏
+ *
+ * 统一列表页筛选区排版：inline 表单 + 内建「查询/重置」操作区。
+ * 筛选项超过 collapsedCount 时自动支持折叠，收起时只显示前 N 项，
+ * 点击「展开/收起」切换，避免筛选区占据过多纵向空间。
+ *
+ * 用法：
+ * <FilterBar :model="searchForm" :collapsed-count="3" @search="load" @reset="onReset">
+ *   <x-form-item label="平台" name="clientId">...</x-form-item>
+ * </FilterBar>
+ */
+import { computed, nextTick, onMounted, onUpdated, ref, watch } from 'vue'
+import { Icon } from '@xto/base'
+
+defineOptions({
+  name: 'FilterBar'
+})
+
+const props = withDefaults(
+  defineProps<{
+    // 表单数据对象，与 x-form 的 model 一致
+    model: Record<string, any>
+    // 是否启用折叠
+    collapsible?: boolean
+    // 收起时显示的筛选项数量
+    collapsedCount?: number
+    // 初始是否收起
+    defaultCollapsed?: boolean
+    searchText?: string
+    resetText?: string
+    searchLoading?: boolean
+  }>(),
+  {
+    collapsible: true,
+    collapsedCount: 3,
+    defaultCollapsed: true,
+    searchText: '查询',
+    resetText: '重置',
+    searchLoading: false
+  }
+)
+
+const emit = defineEmits<{
+  search: []
+  reset: []
+}>()
+
+const formRef = ref<any>(null)
+const collapsed = ref(props.defaultCollapsed)
+const totalCount = ref(0)
+
+// 应用折叠：收起时隐藏第 collapsedCount 项之后的筛选项。
+// 直接操作 slot 渲染出的 .x-form-item（排除操作区），v-if 会销毁组件丢状态，不采用
+const refreshItems = () => {
+  const formEl: HTMLElement | undefined = formRef.value?.$el
+  if (!formEl) return
+  const items = formEl.querySelectorAll(':scope > .x-form-item:not(.filter-bar__ops)')
+  totalCount.value = items.length
+  items.forEach((el, i) => {
+    ;(el as HTMLElement).style.display = collapsed.value && i >= props.collapsedCount ? 'none' : ''
+  })
+}
+
+const hasOverflow = computed(() => props.collapsible && totalCount.value > props.collapsedCount)
+
+const toggleCollapsed = () => {
+  collapsed.value = !collapsed.value
+}
+
+watch(collapsed, () => nextTick(refreshItems))
+onMounted(() => nextTick(refreshItems))
+// 动态筛选项（v-if 切换）或折叠状态变化后重新应用
+onUpdated(() => nextTick(refreshItems))
+
+const handleSearch = () => emit('search')
+const handleReset = () => emit('reset')
+
+defineExpose({
+  /** 展开筛选项 */
+  expand: () => { collapsed.value = false },
+  /** 收起筛选项 */
+  collapse: () => { collapsed.value = true }
+})
+</script>
+
+<template>
+  <x-card class="filter-bar">
+    <x-form
+      ref="formRef"
+      :model="model"
+      layout="inline"
+      @submit="handleSearch"
+      @reset="handleReset"
+    >
+      <slot />
+      <x-form-item class="filter-bar__ops">
+        <x-button
+          type="primary"
+          size="small"
+          html-type="submit"
+          :loading="searchLoading"
+        >{{ searchText }}</x-button>
+        <x-button size="small" html-type="reset">{{ resetText }}</x-button>
+        <x-button
+          v-if="hasOverflow"
+          type="text"
+          size="small"
+          class="filter-bar__toggle"
+          @click="toggleCollapsed"
+        >
+          {{ collapsed ? '展开' : '收起' }}
+          <Icon
+            name="caret-down"
+            :size="12"
+            class="filter-bar__caret"
+            :class="{ 'is-open': !collapsed }"
+          />
+        </x-button>
+      </x-form-item>
+    </x-form>
+  </x-card>
+</template>
+
+<style lang="scss" scoped>
+.filter-bar {
+  display: block;
+  margin-bottom: 2px;
+
+  :deep(.x-card__body) {
+    padding: 5px 8px !important;
+  }
+}
+
+.filter-bar__ops {
+  :deep(.x-button + .x-button) {
+    margin-left: 8px;
+  }
+}
+
+.filter-bar__toggle {
+  :deep(.x-icon),
+  .filter-bar__caret {
+    margin-left: 2px;
+  }
+}
+
+.filter-bar__caret {
+  transition: transform var(--xto-transition-duration-fast, 150ms) var(--xto-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+
+  &.is-open {
+    transform: rotate(180deg);
+  }
+}
+</style>

package/src/components/Layout/Sidebar.vue

@@ -178,6 +178,11 @@ const handleLogout = () => {
       justify-content: center;
       padding: 0;
     }
+
+    // 折叠态：hover 弹出的子菜单浮层需要溢出侧栏显示，不能被滚动裁剪
+    .sidebar__menu {
+      overflow: visible;
+    }
   }
 
   &__logo {

package/src/components/Layout/SidebarMenuItem.vue

@@ -29,10 +29,70 @@ const knownIcons = new Set([
   'moon', 'sun', 'theme', 'skin'
 ])
 
+// Element UI（el-icon-*）图标名到组件库图标名的映射：
+// sys_menu.icon 大量使用 el-icon-* 命名，不映射时只能退化为首字徽标
+const elIconMap: Record<string, string> = {
+  'el-icon-s-platform': 'system',
+  'el-icon-platform': 'system',
+  'el-icon-s-data': 'database',
+  'el-icon-data-analysis': 'chart',
+  'el-icon-files': 'folder',
+  'el-icon-folder': 'folder',
+  'el-icon-folder-opened': 'folder-open',
+  'el-icon-s-custom': 'user',
+  'el-icon-user': 'user',
+  'el-icon-s-grid': 'grid',
+  'el-icon-menu': 'list',
+  'el-icon-setting': 'setting',
+  'el-icon-s-tools': 'setting',
+  'el-icon-s-operation': 'setting',
+  'el-icon-s-home': 'home',
+  'el-icon-house': 'home',
+  'el-icon-document': 'document',
+  'el-icon-document-copy': 'copy',
+  'el-icon-monitor': 'dashboard',
+  'el-icon-odometer': 'dashboard',
+  'el-icon-s-order': 'list',
+  'el-icon-s-check': 'check',
+  'el-icon-s-claim': 'file',
+  'el-icon-s-comment': 'message',
+  'el-icon-s-promotion': 'share',
+  'el-icon-s-marketing': 'chart',
+  'el-icon-s-finance': 'chart',
+  'el-icon-s-management': 'list',
+  'el-icon-s-cooperation': 'user-group',
+  'el-icon-s-shop': 'gift',
+  'el-icon-picture': 'image',
+  'el-icon-location': 'location',
+  'el-icon-map-location': 'map',
+  'el-icon-lock': 'lock',
+  'el-icon-unlock': 'unlock',
+  'el-icon-key': 'key',
+  'el-icon-bell': 'bell',
+  'el-icon-edit': 'edit',
+  'el-icon-delete': 'delete',
+  'el-icon-link': 'link',
+  'el-icon-connection': 'link',
+  'el-icon-upload': 'upload',
+  'el-icon-upload2': 'upload',
+  'el-icon-download': 'download',
+  'el-icon-search': 'search',
+  'el-icon-timer': 'clock',
+  'el-icon-time': 'clock',
+  'el-icon-calendar': 'calendar',
+  'el-icon-view': 'eye',
+  'el-icon-message': 'mail',
+  'el-icon-chat-dot-round': 'chat',
+  'el-icon-cpu': 'server',
+  'el-icon-cloudy': 'cloud'
+}
+
 // 获取菜单图标名称
 const getMenuIcon = (icon?: string): string => {
   if (!icon || icon === '') return ''
 
+  if (elIconMap[icon]) return elIconMap[icon]
+
   if (icon.startsWith('tineco-icon-')) {
     const iconName = icon.replace('tineco-icon-', '')
     const tinecoIconMap: Record<string, string> = {
@@ -74,7 +134,7 @@ const getMenuIcon = (icon?: string): string => {
   return iconMap[icon] || icon
 }
 
-// 获取菜单名称第一个字
+// 获取菜单名称第一个字（无匹配图标时的兜底）
 const getFirstChar = (name?: string): string => {
   if (!name) return ''
   return name.charAt(0)
@@ -99,15 +159,11 @@ const hasChildren = computed(() => {
 <template>
   <!-- 有子菜单 -->
   <SubMenu v-if="hasChildren" :index="menuIndex">
-    <template #title>
-      <span class="menu-item__content">
-        <span class="menu-item__icon">
-          <Icon v-if="iconExists(getMenuIcon(menu.icon))" :name="getMenuIcon(menu.icon)" :size="16" />
-          <span v-else class="menu-item__char">{{ getFirstChar(menu.menuName) }}</span>
-        </span>
-        <span class="menu-item__text">{{ menu.menuName }}</span>
-      </span>
+    <template #icon>
+      <Icon v-if="iconExists(getMenuIcon(menu.icon))" :name="getMenuIcon(menu.icon)" :size="16" />
+      <span v-else class="menu-item__char">{{ getFirstChar(menu.menuName) }}</span>
     </template>
+    <template #title>{{ menu.menuName }}</template>
     <!-- 递归渲染子菜单 -->
     <template v-for="child in menu.children" :key="child.menuId || child.menuCode || child.menuUrl">
       <SidebarMenuItem :menu="child" />
@@ -116,38 +172,15 @@ const hasChildren = computed(() => {
 
   <!-- 无子菜单 -->
   <MenuItem v-else :index="menu.menuUrl || menuIndex">
-    <span class="menu-item__content">
-      <span v-if="menu.menuName !== '首页'" class="menu-item__icon">
-        <Icon v-if="iconExists(getMenuIcon(menu.icon))" :name="getMenuIcon(menu.icon)" :size="16" />
-        <span v-else class="menu-item__char">{{ getFirstChar(menu.menuName) }}</span>
-      </span>
-      <span class="menu-item__text">{{ menu.menuName }}</span>
-    </span>
+    <template #icon>
+      <Icon v-if="iconExists(getMenuIcon(menu.icon))" :name="getMenuIcon(menu.icon)" :size="16" />
+      <span v-else class="menu-item__char">{{ getFirstChar(menu.menuName) }}</span>
+    </template>
+    {{ menu.menuName }}
   </MenuItem>
 </template>
 
 <style lang="scss" scoped>
-.menu-item__content {
-  display: inline-flex;
-  align-items: center;
-  line-height: 1;
-}
-
-.menu-item__text {
-  flex: 1;
-  line-height: 1;
-}
-
-.menu-item__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
-  flex-shrink: 0;
-}
-
 .menu-item__char {
   display: inline-flex;
   align-items: center;

package/src/components/Layout/index.vue

@@ -53,7 +53,11 @@ const showMixSidebar = computed(() => {
 <template>
   <!-- sidebar模式：左侧菜单 + 顶部Header + 主内容 -->
   <div v-if="layoutMode === 'sidebar'" class="layout layout--sidebar">
-    <aside class="layout__aside" :style="{ width: sidebarWidth }">
+    <aside
+      class="layout__aside"
+      :class="{ 'layout__aside--collapsed': appStore.isCollapsed }"
+      :style="{ width: sidebarWidth }"
+    >
       <Sidebar :menu-list="sidebarMenuList" :show-logo="true" :show-user="true" :logo-src="resolvedLogoSrc" />
     </aside>
     <div class="layout__main">
@@ -86,7 +90,12 @@ const showMixSidebar = computed(() => {
     </div>
     <!-- 下方：左侧子菜单 + 主内容 -->
     <div class="layout__mix-body">
-      <aside v-if="showMixSidebar" class="layout__aside" :style="{ width: sidebarWidth }">
+      <aside
+        v-if="showMixSidebar"
+        class="layout__aside"
+        :class="{ 'layout__aside--collapsed': appStore.isCollapsed }"
+        :style="{ width: sidebarWidth }"
+      >
         <Sidebar :menu-list="sidebarMenuList" :show-logo="false" :show-user="false" />
       </aside>
       <main class="layout__content">
@@ -159,6 +168,11 @@ const showMixSidebar = computed(() => {
     overflow: hidden;
     flex-shrink: 0;
     height: 100%;
+
+    // 折叠态：弹出子菜单浮层需要溢出侧栏显示
+    &--collapsed {
+      overflow: visible;
+    }
   }
 
   &__top-menu {

package/src/components/TableCard.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+/**
+ * TableCard 表格卡片
+ *
+ * 统一列表页表格区排版（方案 B）：操作按钮放表格卡片 header 右侧，
+ * 与卡片标题同行，取代单独占一行的工具栏卡片。
+ * 不传 title/actions/header 时与普通 x-card 完全一致。
+ *
+ * 用法：
+ * <TableCard title="用户列表" class="table-card">
+ *   <template #actions>
+ *     <x-button type="primary" size="small" @click="add">新增用户</x-button>
+ *   </template>
+ *   <x-table ... />
+ * </TableCard>
+ */
+defineOptions({
+  name: 'TableCard'
+})
+
+defineProps<{
+  /** 卡片标题（header 左侧），也可用 #header 插槽自定义 */
+  title?: string
+}>()
+</script>
+
+<template>
+  <x-card class="table-card-frame">
+    <template v-if="title || $slots.header || $slots.actions" #header>
+      <div class="table-card__header">
+        <div class="table-card__title">
+          <slot name="header">{{ title }}</slot>
+        </div>
+        <div class="table-card__actions">
+          <slot name="actions" />
+        </div>
+      </div>
+    </template>
+    <slot />
+  </x-card>
+</template>
+
+<style lang="scss" scoped>
+.table-card-frame {
+  display: block;
+
+  :deep(.x-card__header) {
+    padding: 10px 12px;
+  }
+}
+
+.table-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.table-card__title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--xto-color-text-primary, #1F2329);
+}
+
+.table-card__actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-left: auto;
+}
+</style>

package/src/index.ts

@@ -110,6 +110,8 @@ 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 FilterBar } from './components/FilterBar.vue'
+export { default as TableCard } from './components/TableCard.vue'
 
 // 错误页面组件
 export { default as Login } from './views/login/index.vue'