cpms_operation_platform/src/components/pageTabs/PageTabs.tsx

import { defineComponent, type PropType } from 'vue';
import { message } from 'ant-design-vue';
import type { TabView } from '@/types';
import { renderRouteIcon } from '@/utils/routeIcon';
import styles from './PageTabs.module.less';

/**
 * Chrome 风格的页面标签栏组件
 * 参考 VBEN tabs-chrome 的视觉设计：
 * - 标签重叠排列（负 margin）
 * - 激活态：圆角背景 + SVG 底部曲线
 * - hover 态：浅灰背景
 * - 标签间分隔线
 * - 关闭按钮
 */
const PageTabs = defineComponent({
  name: 'PageTabs',
  props: {
    /** 标签列表 */
    tabs: { type: Array as PropType<TabView[]>, required: true },
    /** 当前激活 key */
    activeKey: { type: String, required: true },
    /** 关闭标签 */
    onClose: { type: Function as PropType<(key: string) => void>, default: undefined },
    /** 切换标签 */
    onChange: { type: Function as PropType<(key: string) => void>, default: undefined },
  },
  setup(props) {
    const handleClick = (key: string) => {
      if (key !== props.activeKey && props.onChange) {
        props.onChange(key);
      }
    };

    const handleClose = (key: string, e: Event) => {
      e.stopPropagation();
      if (props.tabs.length <= 1) {
        message.warning('至少保留一个标签');
        return;
      }
      if (props.onClose) {
        props.onClose(key);
      }
    };

    return () => (
      <div class={styles.pageTabsMain}>
        {props.tabs.map((tab, i) => {
          const isActive = tab.path === props.activeKey;
          return (
            <div
              key={tab.path}
              class={[styles.tabItem, isActive && styles.tabItemActive].filter(Boolean).join(' ')}
              onClick={() => handleClick(tab.path)}
            >
              {/* 分隔线：第一个标签 / 激活标签 / 上一个就是激活的 → 不显示 */}
              <div
                v-show={i !== 0 && !isActive && props.tabs[i - 1]?.path !== props.activeKey}
                class={styles.divider}
              />

              {/* Chrome 风格背景：激活态 */}
              <div class={[styles.tabBg, isActive && styles.tabBgActive].filter(Boolean).join(' ')}>
                <div class={styles.tabBgInner} />
                {/* 左下曲线 */}
                <svg class={styles.tabBgCurveBefore} height="7" width="7">
                  <path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z" />
                </svg>
                {/* 右下曲线 */}
                <svg class={styles.tabBgCurveAfter} height="7" width="7">
                  <path d="M 0 0 A 7 7 0 0 0 7 7 L 0 7 Z" />
                </svg>
              </div>

              {/* 标签内容：图标 + 文字 + 关闭按钮 */}
              <div class={styles.tabContent}>
                {tab.icon ? (
                  <span class={styles.tabIcon}>{renderRouteIcon(tab.icon, { size: 14 })}</span>
                ) : null}
                <div class={styles.tabTitle}>{tab.title}</div>
                <div class={styles.tabClose} onClick={(e: Event) => handleClose(tab.path, e)}>
                  ✕
                </div>
              </div>
            </div>
          );
        })}
      </div>
    );
  },
});

export default PageTabs;