xto-fronted 0.9.4 → 0.9.6

package/src/components/FilterBar.vue

@@ -0,0 +1,157 @@
+<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: 4px;
+
+  :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/index.vue

@@ -211,7 +211,8 @@ const showMixSidebar = computed(() => {
     flex: 1;
     overflow: auto;
     background-color: var(--xto-bg-color-page, #F7F8FA);
-    padding: 0;
+    // 页面统一留白：所有使用脚手架的系统一致，不再各页面自定
+    padding: 4px;
   }
 }
 </style>

package/src/components/TableCard.vue

@@ -0,0 +1,74 @@
+<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;
+  // 卡片间统一间距
+  margin-bottom: 4px;
+
+  :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'