@firerian/fireui 1.0.0

package/src/components/table/table.vue

@@ -0,0 +1,354 @@
+<template>
+  <div
+    :class="[
+      ns.b,
+      {
+        [ns.m('border')]: border,
+        [ns.m('stripe')]: stripe
+      }
+    ]"
+  >
+    <table class="fire-table__inner">
+      <thead>
+        <tr>
+          <th
+            v-for="column in columns"
+            :key="column.prop || column.label"
+            :class="[
+              'fire-table__column',
+              {
+                [`fire-table__column--fixed-${column.fixed}`]: column.fixed,
+                [`fire-table__column--sortable`]: column.sortable
+              }
+            ]"
+            :style="{ width: column.width }"
+            @click="handleColumnClick(column)"
+          >
+            <div class="fire-table__column-header">
+              <slot :name="`header-${column.prop}`" :column="column">
+                <template v-if="column.$slots.header">
+                  <slot :name="'header'" :column="column" />
+                </template>
+                <span v-else>{{ column.label }}</span>
+              </slot>
+              <div v-if="column.sortable" class="fire-table__column-sorter">
+                <span
+                  class="fire-table__column-sorter-icon"
+                  :class="{
+                    'fire-table__column-sorter-icon--ascending': column.sortOrder === 'ascending',
+                    'fire-table__column-sorter-icon--descending': column.sortOrder === 'descending'
+                  }"
+                >
+                  <ChevronUp :size="12" />
+                  <ChevronDown :size="12" />
+                </span>
+              </div>
+            </div>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(row, index) in data"
+          :key="row.key || index"
+          :class="{
+            'fire-table__row--current': highlightCurrentRow && row === currentRow
+          }"
+          @click="handleRowClick(row, $event)"
+        >
+          <td
+            v-for="column in columns"
+            :key="column.prop || column.label"
+            :class="[
+              'fire-table__cell',
+              {
+                [`fire-table__cell--fixed-${column.fixed}`]: column.fixed
+              }
+            ]"
+            :style="{ width: column.width }"
+          >
+            <slot :name="`default-${column.prop}`" :row="row" :column="column" :$index="index">
+              <template v-if="column.$slots.default">
+                <slot :name="'default'" :row="row" :column="column" :$index="index" />
+              </template>
+              <span v-else>{{ row[column.prop as keyof typeof row] }}</span>
+            </slot>
+          </td>
+        </tr>
+        <tr v-if="data.length === 0" class="fire-table__empty">
+          <td :colspan="columns.length" class="fire-table__empty-cell">
+            <slot name="empty">
+              <div class="fire-table__empty-content">
+                <div style="font-size: 48px; margin-bottom: 16px;">📦</div>
+                <p>暂无数据</p>
+              </div>
+            </slot>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { provideTable } from '../../hooks/useTable'
+import { useNamespace } from '../../utils'
+import { ChevronUp, ChevronDown } from 'lucide-vue-next'
+import type { TableProps, TableEmits } from '../../types/table'
+
+const ns = useNamespace('table')
+
+const props = withDefaults(defineProps<TableProps>(), {
+  data: () => [],
+  border: false,
+  stripe: false,
+  highlightCurrentRow: false,
+  currentRowKey: ''
+})
+
+const emit = defineEmits<TableEmits>()
+
+const { tableContext, currentRow } = provideTable(props)
+
+const columns = ref<any[]>([])
+
+// 监听 data 变化
+watch(() => props.data, (newData) => {
+  tableContext.data = newData
+})
+
+// 监听 highlightCurrentRow 变化
+watch(() => props.highlightCurrentRow, (value) => {
+  tableContext.highlightCurrentRow = value
+})
+
+// 监听 currentRowKey 变化
+watch(() => props.currentRowKey, (key) => {
+  tableContext.currentRowKey = key
+  if (key && props.data.length > 0) {
+    const row = props.data.find(item => item.key === key || item.id === key)
+    if (row) {
+      currentRow.value = row
+    }
+  }
+})
+
+// 监听 currentRow 变化
+watch(currentRow, (newRow, oldRow) => {
+  emit('current-change', newRow, oldRow)
+})
+
+const handleRowClick = (row: any, event: Event) => {
+  if (props.highlightCurrentRow) {
+    currentRow.value = row
+  }
+  emit('row-click', row, event)
+}
+
+const handleColumnClick = (column: any) => {
+  if (column.sortable) {
+    // 循环切换排序状态
+    if (column.sortOrder === 'ascending') {
+      column.sortOrder = 'descending'
+    } else if (column.sortOrder === 'descending') {
+      column.sortOrder = null
+    } else {
+      column.sortOrder = 'ascending'
+    }
+    
+    // 清除其他列的排序状态
+    columns.value.forEach(col => {
+      if (col !== column) {
+        col.sortOrder = null
+      }
+    })
+    
+    emit('sort-change', column, column.sortOrder)
+  }
+}
+
+// 注册列
+const registerColumn = (column: any) => {
+  columns.value.push(column)
+}
+
+const unregisterColumn = (column: any) => {
+  const index = columns.value.indexOf(column)
+  if (index > -1) {
+    columns.value.splice(index, 1)
+  }
+}
+
+// 暴露注册方法
+defineExpose({
+  registerColumn,
+  unregisterColumn
+})
+</script>
+
+<style scoped lang="scss">
+@import '../../styles/variables.scss';
+
+.#{$namespace}-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+
+  &--border {
+    border: 1px solid $border-color;
+
+    .#{$namespace}-table__inner {
+      border: none;
+    }
+
+    .#{$namespace}-table__column {
+      border-right: 1px solid $border-color;
+      border-bottom: 1px solid $border-color;
+    }
+
+    .#{$namespace}-table__cell {
+      border-right: 1px solid $border-color;
+      border-bottom: 1px solid $border-color;
+    }
+
+    .#{$namespace}-table__column:last-child,
+    .#{$namespace}-table__cell:last-child {
+      border-right: none;
+    }
+  }
+
+  &--stripe {
+    .#{$namespace}-table__row:nth-child(even) {
+      background-color: $bg-color-light;
+    }
+  }
+
+  &__inner {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  &__column {
+    padding: 12px;
+    text-align: left;
+    font-weight: 600;
+    color: $text-color;
+    background-color: $bg-color;
+    border-bottom: 1px solid $border-color;
+    white-space: nowrap;
+    user-select: none;
+
+    &--fixed-left {
+      position: sticky;
+      left: 0;
+      background-color: $bg-color;
+      z-index: 1;
+    }
+
+    &--fixed-right {
+      position: sticky;
+      right: 0;
+      background-color: $bg-color;
+      z-index: 1;
+    }
+
+    &--sortable {
+      cursor: pointer;
+
+      &:hover {
+        background-color: $bg-color-light;
+      }
+    }
+  }
+
+  &__column-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__column-sorter {
+    margin-left: 8px;
+
+    &-icon {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      cursor: pointer;
+      color: $text-color-secondary;
+
+      &--ascending {
+        svg:first-child {
+          color: $primary-color;
+        }
+      }
+
+      &--descending {
+        svg:last-child {
+          color: $primary-color;
+        }
+      }
+
+      svg {
+        margin: -2px 0;
+        transition: color 0.2s ease;
+
+        &:hover {
+          color: $primary-color;
+        }
+      }
+    }
+  }
+
+  &__row {
+    &--current {
+      background-color: rgba($primary-color, 0.1) !important;
+    }
+  }
+
+  &__cell {
+    padding: 12px;
+    color: $text-color;
+    border-bottom: 1px solid $border-color;
+    white-space: nowrap;
+
+    &--fixed-left {
+      position: sticky;
+      left: 0;
+      background-color: #fff;
+      z-index: 1;
+    }
+
+    &--fixed-right {
+      position: sticky;
+      right: 0;
+      background-color: #fff;
+      z-index: 1;
+    }
+  }
+
+  &__empty {
+    height: 200px;
+  }
+
+  &__empty-cell {
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  &__empty-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 0;
+
+    p {
+      margin-top: 16px;
+      color: $text-color-secondary;
+      font-size: 14px;
+    }
+  }
+}
+</style>

package/src/components/tips/index.ts

@@ -0,0 +1,12 @@
+import Tips from './tips.vue'
+import { withInstall } from '../../utils'
+
+const FireTips = withInstall(Tips)
+
+export {
+  FireTips
+}
+
+export default {
+  FireTips
+}

package/src/components/tips/tips.test.ts

@@ -0,0 +1,96 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { FireTips } from './index'
+
+describe('FireTips', () => {
+  it('should render correctly with default type', () => {
+    const wrapper = mount(FireTips, {
+      props: {
+        title: 'Info Title',
+        description: 'Info description'
+      }
+    })
+
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.find('.fire-tips-title').text()).toBe('Info Title')
+    expect(wrapper.find('.fire-tips-description').text()).toBe('Info description')
+    expect(wrapper.classes()).toContain('fire-tips--info')
+  })
+
+  it('should render different types', () => {
+    const types = ['success', 'warning', 'error']
+    
+    types.forEach((type) => {
+      const wrapper = mount(FireTips, {
+        props: {
+          type: type as 'success' | 'warning' | 'error',
+          title: `${type} Title`
+        }
+      })
+      
+      expect(wrapper.classes()).toContain(`fire-tips--${type}`)
+    })
+  })
+
+  it('should be closable and emit close event', async () => {
+    const closeSpy = vi.fn()
+    
+    const wrapper = mount(FireTips, {
+      props: {
+        title: 'Closable Tips',
+        closable: true
+      },
+      listeners: {
+        close: closeSpy
+      }
+    })
+
+    expect(wrapper.find('.fire-tips-close').exists()).toBe(true)
+    
+    await wrapper.find('.fire-tips-close').trigger('click')
+    expect(closeSpy).toHaveBeenCalled()
+  })
+
+  it('should not show close button when closable is false', () => {
+    const wrapper = mount(FireTips, {
+      props: {
+        title: 'Not Closable Tips',
+        closable: false
+      }
+    })
+
+    expect(wrapper.find('.fire-tips-close').exists()).toBe(false)
+  })
+
+  it('should use default slot content', () => {
+    const wrapper = mount(FireTips, {
+      slots: {
+        default: '<div>Default slot content</div>'
+      }
+    })
+
+    expect(wrapper.text()).toContain('Default slot content')
+  })
+
+  it('should use title and description slots', () => {
+    const wrapper = mount(FireTips, {
+      slots: {
+        title: '<div>Custom Title</div>',
+        description: '<div>Custom Description</div>'
+      }
+    })
+
+    expect(wrapper.find('.fire-tips-title').text()).toBe('Custom Title')
+    expect(wrapper.find('.fire-tips-description').text()).toBe('Custom Description')
+  })
+
+  it('should use custom icon', () => {
+    const wrapper = mount(FireTips, {
+      slots: {
+        icon: '<div class="custom-icon">Icon</div>'
+      }
+    })
+
+    expect(wrapper.find('.custom-icon').exists()).toBe(true)
+  })
+})

package/src/components/tips/tips.vue

@@ -0,0 +1,206 @@
+<template>
+  <div
+    :class="[
+      ns.b,
+      ns.m(type),
+      {
+        [ns.m('closable')]: closable
+      }
+    ]"
+  >
+    <div class="fire-tips-icon">
+      <slot name="icon">
+        <component :is="iconComponent" v-if="!icon" />
+        <component :is="icon" v-else />
+      </slot>
+    </div>
+    <div class="fire-tips-content">
+      <div class="fire-tips-title" v-if="title || $slots.title">
+        <slot name="title">{{ title }}</slot>
+      </div>
+      <div class="fire-tips-description" v-if="description || $slots.description">
+        <slot name="description">{{ description }}</slot>
+      </div>
+      <slot></slot>
+    </div>
+    <button
+      v-if="closable"
+      class="fire-tips-close"
+      @click="handleClose"
+      aria-label="Close"
+    >
+      <X :size="16" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Info, CheckCircle, AlertTriangle, XCircle, X } from 'lucide-vue-next'
+import { useNamespace } from '../../utils'
+
+const ns = useNamespace('tips')
+
+const props = withDefaults(defineProps<{
+  /**
+   * 提示类型
+   */
+  type?: 'info' | 'success' | 'warning' | 'error'
+  /**
+   * 是否可关闭
+   */
+  closable?: boolean
+  /**
+   * 自定义图标
+   */
+  icon?: string | object
+  /**
+   * 标题
+   */
+  title?: string
+  /**
+   * 描述
+   */
+  description?: string
+  /**
+   * 自定义类名
+   */
+  class?: string
+  /**
+   * 自定义样式
+   */
+  style?: string | object
+}>(), {
+  type: 'info',
+  closable: false,
+  icon: undefined,
+  title: '',
+  description: ''
+})
+
+const emit = defineEmits<{
+  /**
+   * 关闭事件
+   */
+  (e: 'close'): void
+}>()
+
+const iconComponent = computed(() => {
+  switch (props.type) {
+    case 'success':
+      return CheckCircle
+    case 'warning':
+      return AlertTriangle
+    case 'error':
+      return XCircle
+    default:
+      return Info
+  }
+})
+
+const handleClose = () => {
+  emit('close')
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../styles/variables.scss';
+
+.#{$namespace}-tips {
+  display: flex;
+  align-items: flex-start;
+  padding: 16px;
+  border-radius: $border-radius-base;
+  border: 1px solid transparent;
+  margin-bottom: 16px;
+  transition: all 0.2s ease;
+
+  &-icon {
+    flex-shrink: 0;
+    margin-right: 12px;
+    font-size: 20px;
+    line-height: 1;
+    margin-top: 2px;
+  }
+
+  &-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &-title {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 4px;
+  }
+
+  &-description {
+    font-size: 14px;
+    line-height: 1.4;
+  }
+
+  &-close {
+    flex-shrink: 0;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    margin-left: 12px;
+    font-size: 16px;
+    line-height: 1;
+    color: inherit;
+    opacity: 0.6;
+    transition: opacity 0.2s ease;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  // 类型样式
+  &--info {
+    background-color: rgba(59, 130, 246, 0.1);
+    border-color: rgba(59, 130, 246, 0.3);
+    color: $primary-color;
+
+    .#{$namespace}-tips-icon {
+      color: $primary-color;
+    }
+  }
+
+  &--success {
+    background-color: rgba(34, 197, 94, 0.1);
+    border-color: rgba(34, 197, 94, 0.3);
+    color: $success-color;
+
+    .#{$namespace}-tips-icon {
+      color: $success-color;
+    }
+  }
+
+  &--warning {
+    background-color: rgba(245, 158, 11, 0.1);
+    border-color: rgba(245, 158, 11, 0.3);
+    color: $warning-color;
+
+    .#{$namespace}-tips-icon {
+      color: $warning-color;
+    }
+  }
+
+  &--error {
+    background-color: rgba(239, 68, 68, 0.1);
+    border-color: rgba(239, 68, 68, 0.3);
+    color: $danger-color;
+
+    .#{$namespace}-tips-icon {
+      color: $danger-color;
+    }
+  }
+
+  // 可关闭样式
+  &--closable {
+    padding-right: 8px;
+  }
+}
+</style>

package/src/components/tips/types.ts

@@ -0,0 +1,56 @@
+export interface TipsProps {
+  /**
+   * 提示类型
+   */
+  type?: 'info' | 'success' | 'warning' | 'error'
+  /**
+   * 是否可关闭
+   */
+  closable?: boolean
+  /**
+   * 自定义图标
+   */
+  icon?: string | object
+  /**
+   * 标题
+   */
+  title?: string
+  /**
+   * 描述
+   */
+  description?: string
+  /**
+   * 自定义类名
+   */
+  class?: string
+  /**
+   * 自定义样式
+   */
+  style?: string | object
+}
+
+export interface TipsEmits {
+  /**
+   * 关闭事件
+   */
+  (e: 'close'): void
+}
+
+export interface TipsSlots {
+  /**
+   * 默认内容
+   */
+  default: () => any
+  /**
+   * 图标
+   */
+  icon?: () => any
+  /**
+   * 标题
+   */
+  title?: () => any
+  /**
+   * 描述
+   */
+  description?: () => any
+}