FxActionGroup 操作组

表格操作列按钮组。不依赖任何 UI 框架，支持仅图标 / 仅文字 / 图标+文字三种展示模式；容器宽度不足时自动将溢出操作折叠进「更多」下拉。

「更多」下拉基于 FxDropdown，固定 click 触发（hover / 右键均不触发）；展开时箭头图标（svg:arrow-right-2）带旋转动画变为指向下方。「更多」按钮为 primary 色（variant="link" 为 primary 链接，variant="group" 为 primary 实心并拼接进按钮组），悬浮显示「更多」tooltip。

基础用法

<template>
  <div>
    <FxActionGroup :actions="actions" display="icon-text" @action="onAction" />
    <p class="result">最近点击：{{ last || '—' }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const last = ref('')

const actions = [
  { label: '编辑', icon: 'ep:edit', onClick: () => (last.value = '编辑') },
  { label: '详情', icon: 'ep:view', onClick: () => (last.value = '详情') },
  {
    label: '删除',
    icon: 'ep:delete',
    type: 'danger',
    onClick: () => (last.value = '删除'),
  },
]

function onAction(item: { label: string }) {
  last.value = item.label
}
</script>

<style scoped>
.result {
  margin-top: 12px;
  color: var(--fx-text-color-secondary);
  font-size: 13px;
}
</style>

通过 actions 传入操作项，点击任意操作项（含「更多」下拉中的项）触发 action 事件；操作项也可自带 onClick。type: 'danger' 项渲染为红色。

展示模式

<template>
  <div class="flex flex-wrap gap-8">
    <div>
      <span class="demonstration">icon 仅图标（悬浮显示文字 tooltip；支持 VNode 图标）</span>
      <FxActionGroup :actions="iconActions" display="icon" />
    </div>
    <div>
      <span class="demonstration">text 仅文字</span>
      <FxActionGroup :actions="actions" display="text" />
    </div>
    <div>
      <span class="demonstration">icon-text 图标+文字</span>
      <FxActionGroup :actions="actions" display="icon-text" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { h } from 'vue'
import { FxIcon } from '@fx-core/icon'

const actions = [
  { label: '编辑', icon: 'ep:edit' },
  { label: '详情', icon: 'ep:view' },
  { label: '删除', icon: 'ep:delete', type: 'danger' },
]

// icon 字段支持 VNode（h 渲染产物）
const iconActions = [
  { label: '编辑', icon: 'ep:edit' },
  { label: '详情', icon: 'ep:view' },
  { label: '收藏', icon: h(FxIcon, { name: 'ep:star' }) },
  { label: '删除', icon: 'ep:delete', type: 'danger' },
]
</script>

<style scoped>
.demonstration {
  display: block;
  color: var(--fx-text-color-secondary);
  font-size: 13px;
  margin-bottom: 8px;
}
</style>

通过 display 属性切换：icon（仅图标）/ text（仅文字）/ icon-text（图标+文字），默认 icon-text。icon 模式下未配置图标的操作项回退展示文字；悬浮仅有图标的操作项会显示 label tooltip。icon 字段支持字符串（IconString）与 VNode（h() 渲染产物）两种形态。

对齐方式

<template>
  <div class="flex flex-wrap gap-8">
    <div>
      <span class="demonstration">start 左对齐</span>
      <div class="box">
        <FxActionGroup :actions="actions" align="start" />
      </div>
    </div>
    <div>
      <span class="demonstration">center 居中（默认）</span>
      <div class="box">
        <FxActionGroup :actions="actions" align="center" />
      </div>
    </div>
    <div>
      <span class="demonstration">end 右对齐</span>
      <div class="box">
        <FxActionGroup :actions="actions" align="end" />
      </div>
    </div>
    <div>
      <span class="demonstration">between 项间间距自动均分（「更多」恒贴右缘）</span>
      <div class="box">
        <FxActionGroup :actions="actions" align="between" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const actions = [
  { label: '编辑', icon: 'ep:edit' },
  { label: '详情', icon: 'ep:view' },
  { label: '删除', icon: 'ep:delete', type: 'danger' },
]
</script>

<style scoped>
.demonstration {
  display: block;
  color: var(--fx-text-color-secondary);
  font-size: 13px;
  margin-bottom: 8px;
}

.box {
  width: 300px;
  padding: 8px 10px;
  border: 1px dashed var(--fx-border-color);
  border-radius: 4px;
}
</style>

通过 align 属性设置容器内对齐：start（左对齐）/ center（居中，默认）/ end（右对齐）/ between（项间间距自动均分填满容器，「更多」恒贴右缘，gap 作为最小间距）。

按钮组形态

<template>
  <div class="flex flex-wrap gap-8">
    <div>
      <span class="demonstration">group 按钮组（连体实心，默认 center）</span>
      <div class="box">
        <FxActionGroup :actions="actions" variant="group" />
      </div>
    </div>
    <div>
      <span class="demonstration">group + align=&quot;end&quot; 右对齐</span>
      <div class="box">
        <FxActionGroup :actions="actions" variant="group" align="end" />
      </div>
    </div>
    <div>
      <span class="demonstration">group + align=&quot;between&quot;（between 失效按 start 处理）</span>
      <div class="box">
        <FxActionGroup :actions="actions" variant="group" align="between" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const actions = [
  { label: '编辑', icon: 'ep:edit' },
  { label: '详情', icon: 'ep:view' },
  { label: '停用', icon: 'ep:turn-off' },
  { label: '删除', icon: 'ep:delete', type: 'danger' },
]
</script>

<style scoped>
.demonstration {
  display: block;
  color: var(--fx-text-color-secondary);
  font-size: 13px;
  margin-bottom: 8px;
}

.box {
  width: 300px;
  padding: 8px 10px;
  border: 1px dashed var(--fx-border-color);
  border-radius: 4px;
}
</style>

通过 variant="group" 切换为按钮组形态：操作项渲染为连体实心按钮（复用 FxButtonGroup 连体样式，「更多」下拉作为组尾参与拼接）。默认 link（链接按钮）。

注意：按钮组是连续整体，align="between" 在该形态下失效（按 start 处理）；align 其余取值正常。

溢出折叠与自动宽度

<template>
  <div class="flex flex-wrap gap-8">
    <div>
      <span class="demonstration">自动宽度（随容器宽度自动折叠，改宽浏览器窗口观察）</span>
      <div class="box">
        <FxActionGroup :actions="actions" display="icon-text" />
      </div>
    </div>
    <div>
      <span class="demonstration">指定 max-width 160</span>
      <div class="box">
        <FxActionGroup :actions="actions" display="icon-text" :max-width="160" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const actions = [
  { label: '编辑', icon: 'ep:edit' },
  { label: '详情', icon: 'ep:view' },
  { label: '复制', icon: 'ep:copy-document' },
  { label: '导出', icon: 'ep:download' },
  { label: '停用', icon: 'ep:turn-off' },
  { label: '删除', icon: 'ep:delete', type: 'danger' },
]
</script>

<style scoped>
.demonstration {
  display: block;
  color: var(--fx-text-color-secondary);
  font-size: 13px;
  margin-bottom: 8px;
}

.box {
  width: 300px;
  padding: 8px 10px;
  border: 1px dashed var(--fx-border-color);
  border-radius: 4px;
}
</style>

默认自动模式：组件以 ResizeObserver 监听自身根元素宽度（在表格操作列中即随列宽变化），通过隐藏测量行量出每项宽度，动态计算可平铺数量，放不下的操作项自动收入「更多」下拉。

也可通过 max-width 指定宽度上限：数字按 px 处理，字符串原样作为 CSS max-width（如 "50%"）。指定后不再依赖容器测量。

「更多」下拉中的菜单项始终展示文字（icon / icon-text 模式附带图标）。

FxActionGroup API

Attributes

属性	说明	类型	默认值
actions	操作项列表，见 ActionGroupItem	ActionGroupItem[]	[]
display	展示模式：icon / text / icon-text	enum	icon-text
align	对齐方式：start / center / end / between	enum	center
variant	按钮形态：link 链接按钮 / group 按钮组（连体实心）	enum	link
max-width	可用宽度上限；不传则自动跟随父容器宽度（ResizeObserver）	number / string	—
gap	按钮间距（px）；align="between" 时作为最小间距	number	4
size	尺寸，透传给操作按钮	large / default / small	—

Events

事件名	说明	类型
action	点击任一操作项时触发（含「更多」下拉中的项）	(item: ActionGroupItem) => void

ActionGroupItem

属性	说明	类型	默认值
label	操作文案	string	—
icon	图标：FxIcon 图标名（IconString，如 ep:edit、svg:edit）或 VNode（h() 渲染产物）	IconString / VNode	—
type	按钮类型（颜色）	FxBtnProps['type']	primary
disabled	是否禁用	boolean	false
onClick	点击回调（同时也会派发 action 事件）	() => void	—