feat: 新增确认框组件

packages/fighting-design/_hooks/index.ts

@@ -25,3 +25,4 @@ export * from './use-trigger'
 export * from './use-form-check'
 export * from './use-transition'
 export * from './use-collapse-animation'
+export * from './use-confirm-box'

packages/fighting-design/_hooks/use-confirm-box/index.ts

@@ -0,0 +1,12 @@
+import type { Component } from 'vue'
+
+export const useConfirmBox = (component: Component) => {
+
+  const create = () => {
+
+  }
+
+  const confirmBox = () => { }
+
+  return { confirmBox }
+}

packages/fighting-design/components.ts

@@ -231,3 +231,6 @@ export * from './avatar-group'
 
 export { FTabsItem } from './tabs-item'
 export * from './tabs-item'
+
+export { FConfirmBox } from './confirm-box'
+export * from './confirm-box'

packages/fighting-design/confirm-box/__test__/confirm-box.spec.ts

@@ -0,0 +1,10 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, test } from 'vitest'
+import { FConfirmBox } from '../index'
+
+describe('ConfirmBox', () => {
+  test('class', () => {
+    const wrapper = mount(FConfirmBox)
+    expect(wrapper.classes()).toContain('f-confirm-box')
+  })
+})

packages/fighting-design/confirm-box/index.ts

@@ -0,0 +1,13 @@
+import ConfirmBox from './src/confirm-box.vue'
+import { useConfirmBox } from '../_hooks'
+import { install } from '../_utils'
+
+const { confirmBox } = useConfirmBox(ConfirmBox)
+
+export const FConfirmBox = install(ConfirmBox)
+
+export type ConfirmBoxInstance = InstanceType<typeof ConfirmBox>
+
+export * from './src/interface'
+
+export default FConfirmBox

packages/fighting-design/confirm-box/src/confirm-box.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+  import { Props } from './props'
+
+  defineOptions({ name: 'FConfirmBox' })
+
+  const prop = defineProps(Props)
+</script>
+
+<template>
+  <div class="f-confirm-box">
+    <div></div>
+    <div class="f-confirm-box__body">
+      <div>{{ title }}</div>
+      <div>{{ content }}</div>
+    </div>
+  </div>
+</template>

packages/fighting-design/confirm-box/src/interface.ts

@@ -0,0 +1 @@
+export type { ConfirmBoxProps } from './props'

packages/fighting-design/confirm-box/src/props.ts

@@ -0,0 +1,15 @@
+import type { ExtractPropTypes } from 'vue'
+import { setFunctionProp, setStringProp } from '../../_utils'
+
+export const Props = {
+  /** 标题内容 */
+  title: setStringProp(),
+  /** 提示内容 */
+  content: setStringProp(),
+  /** 点击确定执行的回调方法 */
+  onConfirm: setFunctionProp(),
+  /** 点击取消执行的回调方法 */
+  onCancel: setFunctionProp()
+} as const
+
+export type ConfirmBoxProps = ExtractPropTypes<typeof Props>

packages/fighting-theme/index.scss

@@ -74,3 +74,4 @@
 @use './src/count-down';
 @use './src/avatar-group';
 @use './src/tabs-item';
+@use './src/confirm-box';

packages/fighting-theme/src/confirm-box.scss

@@ -0,0 +1,2 @@
+.f-confirm-box {
+}