@firerian/fireui 1.0.0

package/src/components/button/button.vue

@@ -0,0 +1,366 @@
+<template>
+  <button
+    ref="buttonRef"
+    :class="buttonClasses"
+    :disabled="disabled || loading"
+    :type="nativeType"
+    :style="buttonStyles"
+    @click="handleClick"
+  >
+    <!-- 加载图标 -->
+    <template v-if="loading">
+      <slot name="loading">
+        <span :class="`${prefixCls}-loading-icon`">
+          <svg
+            v-if="!loadingIcon"
+            :class="`${prefixCls}-loading-svg`"
+            viewBox="0 0 16 16"
+            width="1em"
+            height="1em"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="7"
+              stroke="currentColor"
+              stroke-width="2"
+              fill="none"
+              stroke-linecap="round"
+              stroke-dasharray="44"
+              stroke-dashoffset="11"
+            />
+          </svg>
+          <img v-else :src="loadingIcon" :alt="loadingIcon" :class="`${prefixCls}-loading-img`" />
+        </span>
+      </slot>
+    </template>
+    
+    <!-- 自定义图标 -->
+    <template v-else-if="icon">
+      <slot name="icon">
+        <span :class="`${prefixCls}-icon`">
+          <component :is="icon" />
+        </span>
+      </slot>
+    </template>
+    
+    <!-- 默认内容 -->
+    <span :class="`${prefixCls}-content`">
+      <slot />
+    </span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+// 类型定义内联，避免模块解析问题
+type ButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+type ButtonSize = 'small' | 'default' | 'large'
+type ButtonNativeType = 'button' | 'submit' | 'reset'
+
+/**
+ * @file Button 组件
+ * @description 常用的操作按钮组件，支持多种类型、尺寸和状态
+ * @example
+ * ```vue
+ * <template>
+ *   <FButton type="primary">主要按钮</FButton>
+ *   <FButton type="success" size="large">成功按钮</FButton>
+ *   <FButton :loading="true">加载中</FButton>
+ * </template>
+ * ```
+ */
+
+defineOptions({
+  name: 'FButton',
+  inheritAttrs: false,
+})
+
+// Props 定义 - 使用接口避免类型推断问题
+interface Props {
+  type?: ButtonType
+  size?: ButtonSize
+  nativeType?: ButtonNativeType
+  disabled?: boolean
+  loading?: boolean
+  circle?: boolean
+  block?: boolean
+  loadingIcon?: string
+  icon?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'default',
+  size: 'default',
+  nativeType: 'button',
+  disabled: false,
+  loading: false,
+  circle: false,
+  block: false,
+  loadingIcon: '',
+  icon: '',
+})
+
+// Emits 定义
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+// 组件前缀
+const prefixCls = 'f-button'
+
+// 组件引用
+const buttonRef = ref<HTMLButtonElement>()
+
+// 解构 props 以避免响应式丢失
+const { type, size, disabled, loading, circle, block, nativeType, loadingIcon, icon } = props
+
+/**
+ * 计算按钮的 class 列表
+ */
+const buttonClasses = computed(() => [
+  prefixCls,
+  `${prefixCls}--${type}`,
+  `${prefixCls}--${size}`,
+  {
+    [`${prefixCls}--disabled`]: disabled,
+    [`${prefixCls}--loading`]: loading,
+    [`${prefixCls}--circle`]: circle,
+    [`${prefixCls}--block`]: block,
+  },
+])
+
+/**
+ * 计算按钮的内联样式（用于 CSS 变量）
+ */
+const buttonStyles = computed(() => ({
+  '--f-button-primary-color': `var(--f-color-${type})`,
+  '--f-button-primary-hover': `var(--f-color-${type}-hover)`,
+  '--f-button-primary-active': `var(--f-color-${type}-active)`,
+}))
+
+/**
+ * 处理点击事件
+ */
+const handleClick = (event: MouseEvent) => {
+  if (disabled || loading) return
+  emit('click', event)
+}
+
+// 暴露组件方法
+defineExpose({
+  ref: buttonRef,
+})
+</script>
+
+<style lang="scss" scoped>
+@use 'sass:color';
+@use '../../styles/mixins' as *;
+@use '../../styles/variables' as *;
+
+// Button 基础样式
+.f-button {
+  // 使用 CSS 变量实现主题
+  --f-button-bg-color: #{$button-default-bg};
+  --f-button-border-color: #{$button-default-border};
+  --f-button-text-color: #{$button-default-text};
+  --f-button-hover-bg: #{color.adjust($button-default-bg, $lightness: -5%)};
+  --f-button-hover-border: #{color.adjust($button-default-border, $lightness: -10%)};
+  
+  // 基础样式
+  @include button-base;
+  
+  // 布局
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-xs;
+  position: relative;
+  
+  // 尺寸
+  padding: $button-padding-vertical $button-padding-horizontal;
+  font-size: $button-font-size;
+  line-height: 1.5;
+  font-weight: 500;
+  
+  // 外观
+  background-color: var(--f-button-bg-color);
+  border: 1px solid var(--f-button-border-color);
+  color: var(--f-button-text-color);
+  border-radius: $button-border-radius;
+  
+  // 过渡
+  transition: all 0.2s ease-in-out;
+  
+  // 禁用状态
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    pointer-events: none;
+    
+    &:hover {
+      background-color: var(--f-button-bg-color);
+      border-color: var(--f-button-border-color);
+    }
+  }
+  
+  // 加载状态
+  &--loading {
+    cursor: wait;
+    pointer-events: none;
+    
+    .f-button-loading-icon {
+      animation: f-button-loading-spin 1s linear infinite;
+    }
+  }
+  
+  // 圆形按钮
+  &--circle {
+    border-radius: 50%;
+    padding: $button-padding-vertical;
+    aspect-ratio: 1;
+    
+    .f-button-content {
+      display: none;
+    }
+  }
+  
+  // 块级按钮
+  &--block {
+    width: 100%;
+  }
+  
+  // 类型变体
+  &--default {
+    --f-button-bg-color: #{$button-default-bg};
+    --f-button-border-color: #{$button-default-border};
+    --f-button-text-color: #{$button-default-text};
+    --f-button-hover-bg: #{color.adjust($button-default-bg, $lightness: -5%)};
+    --f-button-hover-border: #{color.adjust($button-default-border, $lightness: -10%)};
+  }
+  
+  &--primary {
+    --f-button-bg-color: #{$button-primary-bg};
+    --f-button-border-color: #{$button-primary-border};
+    --f-button-text-color: #{$button-primary-text};
+    --f-button-hover-bg: #{$button-primary-hover};
+    --f-button-hover-border: #{$button-primary-hover};
+  }
+  
+  &--success {
+    --f-button-bg-color: #{$button-success-bg};
+    --f-button-border-color: #{$button-success-border};
+    --f-button-text-color: #{$button-success-text};
+    --f-button-hover-bg: #{$button-success-hover};
+    --f-button-hover-border: #{$button-success-hover};
+  }
+  
+  &--warning {
+    --f-button-bg-color: #{$button-warning-bg};
+    --f-button-border-color: #{$button-warning-border};
+    --f-button-text-color: #{$button-warning-text};
+    --f-button-hover-bg: #{$button-warning-hover};
+    --f-button-hover-border: #{$button-warning-hover};
+  }
+  
+  &--danger {
+    --f-button-bg-color: #{$button-danger-bg};
+    --f-button-border-color: #{$button-danger-border};
+    --f-button-text-color: #{$button-danger-text};
+    --f-button-hover-bg: #{$button-danger-hover};
+    --f-button-hover-border: #{$button-danger-hover};
+  }
+  
+  &--info {
+    --f-button-bg-color: #{$button-info-bg};
+    --f-button-border-color: #{$button-info-border};
+    --f-button-text-color: #{$button-info-text};
+    --f-button-hover-bg: #{$button-info-hover};
+    --f-button-hover-border: #{$button-info-hover};
+  }
+  
+  // 尺寸变体
+  &--small {
+    padding: $button-padding-vertical-sm $button-padding-horizontal-sm;
+    font-size: $button-font-size-sm;
+    
+    &.f-button--circle {
+      width: 24px;
+      height: 24px;
+    }
+  }
+  
+  &--default {
+    padding: $button-padding-vertical $button-padding-horizontal;
+    font-size: $button-font-size;
+    
+    &.f-button--circle {
+      width: 32px;
+      height: 32px;
+    }
+  }
+  
+  &--large {
+    padding: $button-padding-vertical-lg $button-padding-horizontal-lg;
+    font-size: $button-font-size-lg;
+    
+    &.f-button--circle {
+      width: 40px;
+      height: 40px;
+    }
+  }
+  
+  // 图标和内容对齐
+  &-icon,
+  &-loading-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  
+  &-loading-svg {
+    width: 1em;
+    height: 1em;
+  }
+  
+  &-loading-img {
+    width: 1em;
+    height: 1em;
+    object-fit: contain;
+  }
+  
+  &-content {
+    display: inline-block;
+    flex: 1;
+    text-align: center;
+  }
+  
+  // 悬停效果（非禁用状态）
+  &:hover:not(&--disabled):not(&--loading) {
+    background-color: var(--f-button-hover-bg);
+    border-color: var(--f-button-hover-border);
+  }
+  
+  // 激活效果
+  &:active:not(&--disabled):not(&--loading) {
+    transform: scale(0.98);
+  }
+  
+  // 焦点效果
+  &:focus-visible {
+    outline: 2px solid var(--f-button-primary-color);
+    outline-offset: 2px;
+  }
+}
+
+// 加载动画
+@keyframes f-button-loading-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/components/button/index.ts

@@ -0,0 +1,17 @@
+/**
+ * @file Button 组件导出
+ * @description 导出 Button 组件及其类型
+ */
+
+import Button from './button.vue'
+import type { ButtonProps, ButtonEmits, ButtonSlots } from './types'
+
+// 导出组件实例类型
+export type ButtonInstance = InstanceType<typeof Button>
+
+// 导出组件
+export { Button as FButton }
+export default Button
+
+// 导出类型
+export type { ButtonProps, ButtonEmits, ButtonSlots }

package/src/components/button/types.ts

@@ -0,0 +1,76 @@
+/**
+ * @file Button 组件类型定义
+ * @description 定义 Button 组件的 Props、Emits 和 Slots 接口
+ */
+
+/**
+ * Button 组件尺寸类型
+ */
+export type ButtonSize = 'small' | 'default' | 'large'
+
+/**
+ * Button 组件类型
+ */
+export type ButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+
+/**
+ * Button 组件原生类型
+ */
+export type ButtonNativeType = 'button' | 'submit' | 'reset'
+
+/**
+ * Button 组件 Props 接口
+ */
+export interface ButtonProps {
+  /** 按钮类型 - 用于区分不同的视觉样式 */
+  type?: ButtonType
+  
+  /** 按钮尺寸 - 控制按钮的大小 */
+  size?: ButtonSize
+  
+  /** 按钮原生类型 - 用于表单提交等场景 */
+  nativeType?: ButtonNativeType
+  
+  /** 是否禁用 - 禁用状态下按钮不可点击 */
+  disabled?: boolean
+  
+  /** 是否加载中 - 显示加载状态和动画 */
+  loading?: boolean
+  
+  /** 是否为圆形按钮 - 常用于图标按钮 */
+  circle?: boolean
+  
+  /** 是否为块级元素 - 按钮宽度占满容器 */
+  block?: boolean
+  
+  /** 自定义加载图标 - 可自定义加载时的图标 */
+  loadingIcon?: string
+  
+  /** 自定义图标 - 按钮左侧的图标 */
+  icon?: string
+  
+  /** 原生 HTML 属性 - 透传到 button 元素 */
+  [key: string]: any
+}
+
+/**
+ * Button 组件 Emits 接口
+ */
+export interface ButtonEmits {
+  /** 点击事件 - 当按钮被点击时触发 */
+  (e: 'click', event: MouseEvent): void
+}
+
+/**
+ * Button 组件 Slots 接口
+ */
+export interface ButtonSlots {
+  /** 默认插槽 - 按钮内容 */
+  default?: () => any
+  
+  /** 图标插槽 - 自定义图标内容 */
+  icon?: () => any
+  
+  /** 加载插槽 - 自定义加载状态内容 */
+  loading?: () => any
+}

package/src/components/form/form-item.vue

@@ -0,0 +1,136 @@
+<template>
+  <div
+    :class="[
+      ns.b,
+      {
+        [ns.m('error')]: errorMessage
+      }
+    ]"
+  >
+    <label v-if="label" class="fire-form-item__label" :style="labelStyle">
+      <span v-if="isRequired && !formContext.hideRequiredAsterisk" class="fire-form-item__asterisk">*</span>
+      {{ label }}
+    </label>
+    <div class="fire-form-item__content">
+      <slot></slot>
+      <div v-if="errorMessage" class="fire-form-item__error">{{ errorMessage }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, watch, onMounted, onUnmounted } from 'vue'
+import { useFormItem } from '../../hooks/useForm'
+import { useNamespace } from '../../utils'
+import type { FormItemProps, FormItemEmits } from '../../types/form'
+
+const ns = useNamespace('form-item')
+
+const props = withDefaults(defineProps<FormItemProps>(), {
+  prop: '',
+  label: '',
+  labelWidth: '',
+  required: false,
+  error: ''
+})
+
+defineEmits<FormItemEmits>()
+
+const { formContext, error, validate, resetField, clearValidate } = useFormItem(props.prop)
+
+const errorMessage = computed(() => {
+  return props.error || error.value
+})
+
+const isRequired = computed(() => {
+  if (props.required) return true
+  if (!props.prop) return false
+  
+  const rules = formContext.rules[props.prop as keyof typeof formContext.rules]
+  if (!rules) return false
+  
+  const ruleArray = Array.isArray(rules) ? rules : [rules]
+  return ruleArray.some(rule => rule.required)
+})
+
+const labelStyle = computed(() => {
+  const width = props.labelWidth || formContext.labelWidth
+  return width ? { width: typeof width === 'number' ? `${width}px` : width } : {}
+})
+
+// 注册 FormItem 到 Form
+onMounted(() => {
+  formContext.addFormItem({
+    validate,
+    resetField,
+    clearValidate
+  } as any)
+})
+
+onUnmounted(() => {
+  formContext.removeFormItem({
+    validate,
+    resetField,
+    clearValidate
+  } as any)
+})
+
+// 监听 model 变化，自动校验
+if (props.prop) {
+  watch(() => formContext.model[props.prop as keyof typeof formContext.model], () => {
+    validate('change')
+  })
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../styles/variables.scss';
+
+.#{$namespace}-form-item {
+  display: flex;
+  margin-bottom: 16px;
+
+  &--error {
+    .#{$namespace}-form-item__error {
+      color: $danger-color;
+    }
+
+    .#{$namespace}-form-item__content input,
+    .#{$namespace}-form-item__content textarea,
+    .#{$namespace}-form-item__content select {
+      border-color: $danger-color;
+
+      &:focus {
+        border-color: $danger-color;
+        box-shadow: 0 0 0 2px rgba($danger-color, 0.2);
+      }
+    }
+  }
+
+  &__label {
+    display: inline-block;
+    font-size: 14px;
+    color: $text-color;
+    font-weight: 500;
+    text-align: right;
+    margin-right: 12px;
+    white-space: nowrap;
+  }
+
+  &__asterisk {
+    color: $danger-color;
+    margin-right: 4px;
+  }
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__error {
+    font-size: 12px;
+    line-height: 1;
+    margin-top: 4px;
+  }
+}
+</style>

package/src/components/form/form.vue

@@ -0,0 +1,76 @@
+<template>
+  <form
+    :class="[
+      ns.b,
+      ns.m(labelPosition),
+      {
+        [ns.m('inline')]: inline
+      }
+    ]"
+    @submit.prevent="handleSubmit"
+    @reset="handleReset"
+  >
+    <slot></slot>
+  </form>
+</template>
+
+<script setup lang="ts">
+
+import { provideForm } from '../../hooks/useForm'
+import { useNamespace } from '../../utils'
+import type { FormProps, FormEmits } from '../../types/form'
+
+const ns = useNamespace('form')
+
+const props = withDefaults(defineProps<FormProps>(), {
+  model: () => ({}),
+  rules: () => ({}),
+  labelWidth: '',
+  labelPosition: 'left',
+  inline: false,
+  hideRequiredAsterisk: false
+})
+
+const emit = defineEmits<FormEmits>()
+
+const formContext = provideForm(props)
+
+const handleSubmit = (evt: Event) => {
+  emit('submit', evt)
+}
+
+const handleReset = () => {
+  formContext.form.resetFields()
+  emit('reset')
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../styles/variables.scss';
+
+.#{$namespace}-form {
+  width: 100%;
+
+  &--inline {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+  }
+
+  &--top {
+    .#{$namespace}-form-item {
+      align-items: flex-start;
+
+      .#{$namespace}-form-item__label {
+        margin-bottom: 8px;
+      }
+    }
+  }
+
+  &--left {
+    .#{$namespace}-form-item {
+      align-items: center;
+    }
+  }
+}
+</style>

package/src/components/form/index.ts

@@ -0,0 +1,16 @@
+import Form from './form.vue'
+import FormItem from './form-item.vue'
+import { withInstall } from '../../utils'
+
+const FireForm = withInstall(Form)
+const FireFormItem = withInstall(FormItem)
+
+export {
+  FireForm,
+  FireFormItem
+}
+
+export default {
+  FireForm,
+  FireFormItem
+}