xto-fronted 0.9.8 → 0.9.10

package/src/components/TableActions.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+/**
+ * TableActions 表格行内操作区
+ *
+ * 统一列表页「操作」列的排版。行内操作不该用实心按钮：同一个文案，实心按钮
+ * 比文字链宽近一倍（实心有 padding 10px 20px + 边框，text 变体左右 padding 为 0），
+ * 且一片实心色块会压过行数据本身。操作列一旦被撑到换行，整张表的行高就跟着翻倍。
+ *
+ * 组件做三件事：
+ *   1. 内部的 x-button 一律降级为文字链（type=text / size=small），页面不用改写法；
+ *      原本是 danger 的保持红色文字，不会退化成实心红块
+ *   2. 不换行（nowrap）+ 统一间距，行高恒定
+ *   3. 超过 max 个时，其余收进「更多」下拉
+ *
+ * 用法：
+ * <x-table-column label="操作" width="220" fixed="right">
+ *   <TableActions :max="3">
+ *     <x-button type="primary" @click="edit(row)">编辑</x-button>
+ *     <x-button type="danger" @click="del(row)">删除</x-button>
+ *   </TableActions>
+ * </x-table-column>
+ */
+import { cloneVNode, computed, Comment, useSlots, type VNode } from 'vue'
+import { Icon } from '@xto/base'
+import { Dropdown, DropdownMenu, DropdownItem } from '@xto/navigation'
+
+defineOptions({
+  name: 'TableActions'
+})
+
+const props = withDefaults(
+  defineProps<{
+    /** 超过该数量时，其余收进「更多」下拉；0 表示不折叠 */
+    max?: number
+    /** 按钮间距(px) */
+    gap?: number
+  }>(),
+  {
+    max: 0,
+    gap: 8
+  }
+)
+
+const slots = useSlots() as unknown as { default?: () => VNode[] }
+
+/** 把行内按钮统一成文字链；danger 保持红色语义 */
+const normalize = (v: VNode): VNode => {
+  const p = (v.props || {}) as Record<string, any>
+  const isDanger = p.type === 'danger' || p.danger === true || p.danger === ''
+  const merged: Record<string, any> = { type: 'text', size: 'small' }
+  if (isDanger) {
+    // danger 不是 x-button 的 prop，直接用 class 上色（避免渲染成实心红块）
+    merged.class = [p.class, 'table-actions__danger']
+  }
+  return cloneVNode(v, merged)
+}
+
+const items = computed<VNode[]>(() =>
+  (slots.default?.() ?? [])
+    .filter((v: VNode) => v.type && v.type !== Comment && typeof v.type !== 'symbol')
+    .map(normalize)
+)
+
+const folded = computed(() => props.max > 0 && items.value.length > props.max)
+const visible = computed(() =>
+  folded.value ? items.value.slice(0, Math.max(1, props.max - 1)) : items.value
+)
+const overflow = computed(() => (folded.value ? items.value.slice(Math.max(1, props.max - 1)) : []))
+</script>
+
+<template>
+  <div v-if="items.length" class="table-actions" :style="{ gap: `${gap}px` }">
+    <component :is="v" v-for="(v, i) in visible" :key="i" />
+
+    <Dropdown v-if="overflow.length" trigger="click" placement="bottom-end">
+      <x-button type="text" size="small" class="table-actions__more">
+        更多
+        <Icon name="caret-down" :size="12" />
+      </x-button>
+      <template #dropdown>
+        <DropdownMenu>
+          <DropdownItem v-for="(v, i) in overflow" :key="i" :command="i">
+            <component :is="v" />
+          </DropdownItem>
+        </DropdownMenu>
+      </template>
+    </Dropdown>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.table-actions {
+  display: inline-flex;
+  align-items: center;
+  // 行高恒定的关键：任何情况下都不换行
+  white-space: nowrap;
+
+  // 文字链左右 padding 为 0，靠 gap 拉开间距
+  :deep(.x-button + .x-button) {
+    margin-left: 0;
+  }
+
+  // 兜底：按钮常被 x-popconfirm / x-tooltip 等包一层，上面按 props 归一化够不到，
+  // 这里再用样式把实心变体压成文字链（:deep 后特异性高于 .x-button--xxx，无需 !important）
+  :deep(.x-button--primary),
+  :deep(.x-button--success),
+  :deep(.x-button--warning),
+  :deep(.x-button--info) {
+    color: var(--xto-color-primary, #4f46e5);
+    background-color: transparent;
+    border-color: transparent;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  :deep(.x-button--danger),
+  :deep(.x-button.table-actions__danger) {
+    color: var(--xto-color-danger, #f53f3f);
+    background-color: transparent;
+    border-color: transparent;
+    padding-left: 0;
+    padding-right: 0;
+
+    &:hover,
+    &:focus {
+      color: var(--xto-color-danger-light-3, #f87b7b);
+      background-color: transparent;
+    }
+  }
+
+  &__more {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+  }
+}
+
+// 「更多」下拉里每项独占一行、左对齐
+:global(.x-dropdown__menu .x-dropdown-menu__item) {
+  line-height: 1.2;
+}
+</style>

package/src/index.ts

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