@qi-tian-da-sheng/bin-project-ui 1.0.0

package/packages/components/button/__tests__/button.spec.ts

@@ -0,0 +1,195 @@
+/**
+ * @description Button 组件测试
+ * @author MC.Yang
+ */
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Button from '../src/button.vue'
+import { hasClass } from '../../__tests__/utils'
+
+describe('Button', () => {
+  describe('基础功能', () => {
+    it('应该正确渲染', () => {
+      const wrapper = mount(Button, {
+        slots: {
+          default: '按钮',
+        },
+      })
+      expect(wrapper.text()).toBe('按钮')
+      expect(wrapper.find('button').exists()).toBe(true)
+    })
+
+    it('应该支持默认插槽', () => {
+      const wrapper = mount(Button, {
+        slots: {
+          default: '<span>自定义内容</span>',
+        },
+      })
+      expect(wrapper.find('span').text()).toBe('自定义内容')
+    })
+  })
+
+  describe('Props', () => {
+    it('type 属性应该生效', () => {
+      const wrapper = mount(Button, {
+        props: { type: 'primary' },
+      })
+      expect(hasClass(wrapper, 'p-button--primary')).toBe(true)
+    })
+
+    it('size 属性应该生效', () => {
+      const wrapper = mount(Button, {
+        props: { size: 'large' },
+      })
+      expect(hasClass(wrapper, 'p-button--large')).toBe(true)
+    })
+
+    it('variant 属性应该生效', () => {
+      const wrapper = mount(Button, {
+        props: { variant: 'ghost' },
+      })
+      expect(hasClass(wrapper, 'p-button--ghost')).toBe(true)
+    })
+
+    it('status 属性应该生效', () => {
+      const wrapper = mount(Button, {
+        props: { status: 'round' },
+      })
+      expect(hasClass(wrapper, 'is-round')).toBe(true)
+    })
+
+    it('disabled 属性应该禁用按钮', () => {
+      const wrapper = mount(Button, {
+        props: { disabled: true },
+      })
+      expect(wrapper.find('button').attributes('disabled')).toBeDefined()
+      expect(hasClass(wrapper, 'is-disabled')).toBe(true)
+    })
+
+    it('loading 属性应该显示加载状态', () => {
+      const wrapper = mount(Button, {
+        props: { loading: true },
+      })
+      expect(hasClass(wrapper, 'is-loading')).toBe(true)
+      expect(wrapper.find('button').attributes('disabled')).toBeDefined()
+      // 应该显示 loading 图标
+      const icons = wrapper.findAllComponents({ name: 'PIcon' })
+      const loadingIcon = icons.find(icon => icon.props('target') === 'loading')
+      expect(loadingIcon).toBeDefined()
+      expect(loadingIcon?.props('rotating')).toBe(true)
+    })
+
+    it('nativeType 属性应该设置正确的按钮类型', () => {
+      const wrapper = mount(Button, {
+        props: { nativeType: 'submit' },
+      })
+      expect(wrapper.find('button').attributes('type')).toBe('submit')
+    })
+
+    it('prefixIcon 属性应该显示前缀图标', () => {
+      const wrapper = mount(Button, {
+        props: { prefixIcon: 'search' },
+      })
+      const icons = wrapper.findAllComponents({ name: 'PIcon' })
+      const prefixIcon = icons.find(icon => icon.props('target') === 'search')
+      expect(prefixIcon).toBeDefined()
+    })
+
+    it('suffixIcon 属性应该显示后缀图标', () => {
+      const wrapper = mount(Button, {
+        props: { suffixIcon: 'arrow-right' },
+      })
+      const icons = wrapper.findAllComponents({ name: 'PIcon' })
+      const suffixIcon = icons.find(icon => icon.props('target') === 'arrow-right')
+      expect(suffixIcon).toBeDefined()
+    })
+  })
+
+  describe('事件', () => {
+    it('点击按钮应该触发 click 事件', async () => {
+      const onClick = vi.fn()
+      const wrapper = mount(Button, {
+        props: { onClick },
+        slots: { default: '点击' },
+      })
+
+      await wrapper.find('button').trigger('click')
+      expect(onClick).toHaveBeenCalledTimes(1)
+      expect(onClick).toHaveBeenCalledWith(expect.any(MouseEvent))
+    })
+
+    it('禁用状态下不应该触发点击事件', async () => {
+      const onClick = vi.fn()
+      const wrapper = mount(Button, {
+        props: {
+          disabled: true,
+          onClick,
+        },
+      })
+
+      await wrapper.find('button').trigger('click')
+      // 虽然会触发，但浏览器会阻止默认行为
+      expect(wrapper.find('button').attributes('disabled')).toBeDefined()
+    })
+
+    it('加载状态下不应该响应点击', async () => {
+      const onClick = vi.fn()
+      const wrapper = mount(Button, {
+        props: {
+          loading: true,
+          onClick,
+        },
+      })
+
+      expect(wrapper.find('button').attributes('disabled')).toBeDefined()
+    })
+  })
+
+  describe('组合场景', () => {
+    it('应该支持同时设置多个属性', () => {
+      const wrapper = mount(Button, {
+        props: {
+          type: 'primary',
+          size: 'large',
+          variant: 'ghost',
+          status: 'round',
+        },
+      })
+
+      expect(hasClass(wrapper, 'p-button--primary')).toBe(true)
+      expect(hasClass(wrapper, 'p-button--large')).toBe(true)
+      expect(hasClass(wrapper, 'p-button--ghost')).toBe(true)
+      expect(hasClass(wrapper, 'is-round')).toBe(true)
+    })
+
+    it('loading 状态下不应该显示前后缀图标', () => {
+      const wrapper = mount(Button, {
+        props: {
+          loading: true,
+          prefixIcon: 'search',
+          suffixIcon: 'arrow-right',
+        },
+      })
+
+      const icons = wrapper.findAllComponents({ name: 'PIcon' })
+      // 只应该有 loading 图标
+      expect(icons.length).toBe(1)
+      expect(icons[0].props('target')).toBe('loading')
+    })
+  })
+
+  describe('可访问性', () => {
+    it('应该支持原生 HTML 属性', () => {
+      const wrapper = mount(Button, {
+        attrs: {
+          'aria-label': '提交按钮',
+          'data-test': 'submit-btn',
+        },
+      })
+
+      const button = wrapper.find('button')
+      expect(button.attributes('aria-label')).toBe('提交按钮')
+      expect(button.attributes('data-test')).toBe('submit-btn')
+    })
+  })
+})

package/packages/components/button/index.ts

@@ -0,0 +1,13 @@
+/*
+ * @description: 按钮
+ * @author: MC.Yang
+ */
+import _Button from "./src/button.vue"
+import {withInstall} from "@bin-ui/tools";
+
+const Button = withInstall(_Button);
+
+export type PButtonInstance = InstanceType<typeof _Button>;
+
+export default {Button};
+export {Button};

package/packages/components/button/src/button.ts

@@ -0,0 +1,167 @@
+/**
+ * @file Button 按钮组件的类型定义文件
+ * @description 定义按钮组件的所有属性、事件和类型
+ * @author MC.Yang
+ * @see {@link https://tdesign.tencent.com/vue-next/components/button TDesign Button}
+ */
+import { PropType } from "vue";
+import { ElementSizes, ElementTypes } from "@bin-ui/typings";
+
+/**
+ * 按钮类型定义
+ * @typedef {ElementTypes | 'primary' | 'cyan'} ButtonTypes
+ * @description
+ * - ElementTypes: 基础类型（success, info, warning, danger 等）
+ * - primary: 主要按钮，用于高亮显示主操作
+ * - cyan: 青色主题按钮，提供额外的主题选择
+ */
+type buttonTypes = ElementTypes | 'primary' | 'cyan';
+
+/**
+ * 按钮组件属性定义
+ * @description 包含按钮的所有可配置属性
+ * @example
+ * ```vue
+ * <p-button
+ *   type="primary"
+ *   size="large"
+ *   variant="fantasy"
+ *   :loading="true"
+ * >
+ *   提交
+ * </p-button>
+ * ```
+ */
+export const PButtonProps = {
+
+    /**
+     * @property {buttonTypes} type - 按钮的类型
+     * @description 控制按钮的主要颜色和语义
+     * @default undefined
+     * @values 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'cyan'
+     * @example
+     * <p-button type="primary">主要按钮</p-button>
+     * <p-button type="success">成功按钮</p-button>
+     */
+    type: String as PropType<buttonTypes>,
+
+    /**
+     * @property {string} nativeType - 按钮的原生 HTML 类型
+     * @description 原生 button 元素的 type 属性
+     * @default 'button'
+     * @values 'button' | 'submit' | 'reset'
+     * @example
+     * <p-button nativeType="submit">提交表单</p-button>
+     */
+    nativeType: {
+        type: String as PropType<'button' | 'submit' | 'reset'>,
+        default: "button",
+    },
+
+    /**
+     * @property {ElementSizes} size - 按钮的尺寸
+     * @description 控制按钮的大小
+     * @default undefined (默认尺寸)
+     * @values 'small' | 'large'
+     * @example
+     * <p-button size="small">小型按钮</p-button>
+     * <p-button size="large">大型按钮</p-button>
+     */
+    size: String as PropType<ElementSizes>,
+
+    /**
+     * @property {string} variant - 按钮的主题变体
+     * @description 控制按钮的视觉风格和交互效果
+     * @default undefined (默认实心按钮)
+     * @values 'ghost' | 'fantasy' | 'empty'
+     * - ghost: 幽灵按钮，透明背景
+     * - fantasy: 幻彩按钮，渐变色效果
+     * - empty: 空心按钮，仅有边框
+     * @example
+     * <p-button variant="ghost">幽灵按钮</p-button>
+     * <p-button variant="fantasy">幻彩按钮</p-button>
+     */
+    variant: String as PropType<'ghost' | 'fantasy' | 'empty'>,
+
+    /**
+     * @property {string} status - 按钮的形状状态
+     * @description 控制按钮的外观形状
+     * @default undefined (默认矩形)
+     * @values 'round' | 'circle'
+     * - round: 圆角按钮
+     * - circle: 圆形按钮（通常用于图标按钮）
+     * @example
+     * <p-button status="round">圆角按钮</p-button>
+     * <p-button status="circle" prefix-icon="search"></p-button>
+     */
+    status: String as PropType<'round' | 'circle'>,
+
+    /**
+     * @property {boolean} disabled - 是否禁用按钮
+     * @description 禁用后按钮不可点击，且显示禁用样式
+     * @default false
+     * @example
+     * <p-button :disabled="true">禁用按钮</p-button>
+     */
+    disabled: Boolean,
+
+    /**
+     * @property {boolean} loading - 按钮是否处于加载状态
+     * @description 加载状态下显示加载图标，按钮不可点击
+     * @default false
+     * @example
+     * <p-button :loading="isSubmitting">提交</p-button>
+     */
+    loading: Boolean,
+
+    /**
+     * @property {string} prefixIcon - 按钮的前缀图标
+     * @description 显示在按钮文本前面的图标名称
+     * @default undefined
+     * @example
+     * <p-button prefix-icon="search">搜索</p-button>
+     * <p-button prefix-icon="upload">上传</p-button>
+     */
+    prefixIcon: String,
+
+    /**
+     * @property {string} suffixIcon - 按钮的后缀图标
+     * @description 显示在按钮文本后面的图标名称
+     * @default undefined
+     * @example
+     * <p-button suffix-icon="arrow-right">下一步</p-button>
+     */
+    suffixIcon: String,
+
+}
+
+/**
+ * 按钮组件触发事件定义
+ * @interface PButtonEmits
+ * @description 定义按钮组件可以发出的所有事件
+ * @example
+ * ```vue
+ * <p-button @click="handleClick">点击我</p-button>
+ *
+ * <script setup>
+ * const handleClick = (evt) => {
+ *   console.log('按钮被点击了', evt)
+ * }
+ * </script>
+ * ```
+ */
+export interface PButtonEmits {
+
+    /**
+     * 点击按钮后触发的事件
+     * @event click
+     * @param {MouseEvent} evt - 鼠标点击事件对象
+     * @description
+     * 当用户点击按钮时触发此事件
+     * 注意：如果按钮处于禁用或加载状态，此事件不会被触发
+     * @example
+     * @click="(evt) => console.log('clicked', evt)"
+     */
+    (e: 'click', evt: MouseEvent): void;
+
+}

package/packages/components/button/src/button.vue

@@ -0,0 +1,101 @@
+<!--
+  @component Button 按钮组件
+  @description 常用的操作按钮，支持多种类型、尺寸、主题和状态
+  @author MC.Yang
+  @example
+  <p-button type="primary">主要按钮</p-button>
+  <p-button type="success" size="large">成功按钮</p-button>
+  <p-button variant="fantasy" :loading="true">加载中</p-button>
+-->
+<template>
+  <button
+      ref="container"
+      v-bind="$attrs"
+      :class="classes"
+      :disabled="(props.disabled || props.loading)"
+      :type="props.nativeType"
+      @click="handleClick($event)"
+  >
+    <!-- 加载状态图标 -->
+    <p-icon v-if="loading" target="loading" rotating></p-icon>
+    
+    <!-- 前缀图标 -->
+    <p-icon v-if="!props.loading" :target="props.prefixIcon"></p-icon>
+    
+    <!-- 按钮文本内容插槽 -->
+    <slot></slot>
+    
+    <!-- 后缀图标 -->
+    <p-icon v-if="!props.loading" :target="props.suffixIcon"></p-icon>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import PIcon from "../../icon/src/icon.vue";
+import { PButtonEmits, PButtonProps } from "./button"
+import { useNS } from "@bin-ui/hooks";
+
+/**
+ * 组件配置
+ * @property {string} name - 组件名称，用于全局注册和调试
+ * @property {boolean} inheritAttrs - 禁用属性继承，手动控制属性绑定位置
+ */
+defineOptions({
+  name: "PButton",
+  inheritAttrs: false
+})
+
+/**
+ * BEM 命名空间工具
+ * 用于生成符合 BEM 规范的 CSS 类名
+ * @see {@link useNS}
+ */
+const ns = useNS('button');
+
+/**
+ * 组件属性定义
+ * 包含按钮的所有可配置项
+ */
+const props = defineProps({...PButtonProps});
+
+/**
+ * 组件事件定义
+ * 用于向父组件发送事件
+ */
+const emits = defineEmits<PButtonEmits>();
+
+/**
+ * 计算按钮的 CSS 类名数组
+ * @returns {Array<string>} 类名数组
+ * @description
+ * 根据组件的各种状态和属性，动态生成符合 BEM 规范的类名
+ * - namespace: 基础命名空间 'p-button'
+ * - m(modifier): 修饰符类名，如 'p-button--primary'
+ * - is(status): 状态类名，如 'is-disabled'
+ */
+const classes = computed(() => {
+  return [
+    ns.namespace,              // 'p-button'
+    ns.m(props.type),          // 'p-button--primary'
+    ns.m(props.size),          // 'p-button--large'
+    ns.m(props.variant),       // 'p-button--fantasy'
+    ns.is(props.status),       // 'is-round' 或 'is-circle'
+    ns.is(props.disabled, 'disabled'),  // 'is-disabled'
+    ns.is(props.loading, 'loading'),    // 'is-loading'
+  ]
+})
+
+/**
+ * 按钮点击事件处理函数
+ * @param {MouseEvent} evt - 鼠标点击事件对象
+ * @description
+ * 当按钮被点击时触发，会向父组件发送 click 事件
+ * 如果按钮处于禁用或加载状态，点击事件不会被触发（由 disabled 属性控制）
+ */
+const handleClick = (evt: MouseEvent) => {
+  emits("click", evt)
+}
+
+</script>
+

package/packages/components/dialog/index.ts

@@ -0,0 +1,13 @@
+/*
+ * @description: 对话框
+ * @author: MC.Yang
+ */
+import _Dialog from "./src/dialog.vue";
+import {withInstall} from "@bin-ui/tools";
+
+const Dialog = withInstall(_Dialog);
+
+export type PDialogInstance = InstanceType<typeof _Dialog>;
+
+export default {Dialog};
+export {Dialog};

package/packages/components/dialog/src/dialog.ts

@@ -0,0 +1,182 @@
+/*
+ * @description: 对话框
+ * @author: MC.Yang
+ */
+import {PropType} from "vue";
+import {ElementSizes, MessageTriggerTypes, Transition} from "@bin-ui/typings";
+
+/**
+ * 对话框 Props
+ */
+export const PDialogProps = {
+
+    /**
+     * @description 对话框消息头的标题
+     */
+    title: {
+        type: String,
+        default: 'default title'
+    },
+
+    /**
+     * @description 是否显示消息头中的关闭图标
+     */
+    showCloseIcon: {
+        type: Boolean,
+        default: true,
+    },
+
+    /**
+     * @description 消息尾中取消按钮的文本
+     */
+    cancelBtnText: String,
+
+    /**
+     * @description 消息尾中确认按钮的文本
+     */
+    confirmBtnText: String,
+
+    /**
+     * @description 消息尾中按钮的大小
+     */
+    btnSize: String as PropType<ElementSizes>,
+
+    /**
+     * @description 是否去除消息头
+     */
+    noHeader: Boolean,
+
+    /**
+     * @description 是否去除消息体
+     */
+    noBody: Boolean,
+
+    /**
+     * @description 是否去除消息尾
+     */
+    noFooter: Boolean,
+
+    /**
+     * @description 对话框的过渡动画
+     */
+    transition: String as PropType<Transition>,
+
+    /**
+     * @description 对话框是否可以被拖动
+     */
+    draggable: Boolean,
+
+    /**
+     * @description 对话框距离浏览器视口顶部的距离
+     */
+    top: {
+        type: String,
+        default: '20vh'
+    },
+
+    /**
+     * @description 对话框关闭事件前的回调函数，若设置此项, 需要手动调用done函数关闭对话框
+     */
+    beforeClose: Function as PropType<(done: () => void) => void>,
+
+    /**
+     * @description 是否显示遮罩
+     */
+    modal: {
+        type: Boolean,
+        default: true,
+    },
+
+    /**
+     * @description 是否可以通过按下ESC来关闭对话框
+     */
+    closeOnPressEscape: {
+        type: Boolean,
+        default: true,
+    },
+
+    /**
+     * @description 在显示遮罩的情况下, 是否可以通过点击遮罩关闭对话框
+     */
+    closeOnClickMark: {
+        type: Boolean,
+        default: true,
+    },
+
+    /**
+     * @description 对话框出现时, 是否禁止浏览器的滚动行为
+     */
+    lockScroll: {
+        type: Boolean,
+        default: true,
+    },
+
+    /**
+     * @description 是否挂载到body元素下面, 在层级混乱时开启此项
+     */
+    appendToBody: Boolean,
+
+    /**
+     * @description 对话框打开/关闭的绑定值
+     */
+    modelValue: Boolean,
+    part: Boolean,
+
+}
+
+/**
+ * 对话框事件
+ */
+export interface PDialogEmits {
+
+    /**
+     * @description 更新 modelValue
+     * @param e update:modelValue
+     * @param _ 值
+     */
+    (e: 'update:modelValue', _: boolean): void;
+
+    /**
+     * @description 打开对话框时触发的事件
+     * @param e open
+     */
+    (e: 'open'): void;
+
+    /**
+     * @description 打开对话框后触发的事件
+     * @param e opened
+     */
+    (e: 'opened'): void;
+
+    /**
+     * @description 关闭对话框时触发的事件
+     * @param e close
+     * @param trigger 触发器
+     */
+    (e: 'close', trigger: MessageTriggerTypes): void;
+
+    /**
+     * @description 关闭对话框后触发的事件
+     * @param e closed
+     */
+    (e: 'closed'): void;
+
+    /**
+     * @description 取消对话框时触发的事件
+     * @param e cancel
+     */
+    (e: 'cancel'): void;
+
+    /**
+     * @description 确认对话框时触发的事件
+     * @param e confirm
+     */
+    (e: 'confirm'): void;
+
+    /**
+     * @description (关闭，取消，确认)对话框时触发的事件
+     * @param e hidden
+     */
+    (e: 'hidden'): void;
+
+}