@aquiferre/ui-kit 0.1.1 → 0.1.4

package/components/ConfirmDialog.vue

@@ -3,12 +3,12 @@
     <Transition name="fade">
       <div v-if="visible" class="dialog-overlay">
         <div class="fixed inset-0 bg-bg-overlay" @click="cancel" />
-        <div class="dialog max-w-sm">
+        <div class="panel-glass dialog max-w-sm">
           <div class="px-6 py-4">
             <h3 class="dialog-title">{{ title }}</h3>
             <p v-if="content" class="text-text-secondary text-sm mt-2">{{ content }}</p>
           </div>
-          <div class="dialog-actions px-6 py-4 border-t border-border-primary bg-bg-secondary rounded-b-2xl">
+          <div class="dialog-actions px-6 py-4 border-t border-border-primary bg-bg-secondary/50 rounded-b-2xl">
             <button class="btn-secondary" @click="cancel">
               {{ cancelText }}
             </button>

package/components/DataTable.vue

@@ -3,10 +3,15 @@
     <table class="table">
       <thead class="table-header">
         <tr>
+          <th v-if="selectable" class="table-header-cell w-8">
+            <input type="checkbox" :checked="allSelected" @change="toggleAll" />
+          </th>
           <th
             v-for="col in columns"
             :key="col.key"
             class="table-header-cell"
+            :class="col.width"
+            :style="col.align ? `text-align:${col.align}` : undefined"
           >
             {{ col.title }}
           </th>
@@ -14,12 +19,25 @@
       </thead>
       <tbody class="table-body">
         <tr v-if="!loading && data.length === 0">
-          <td :colspan="columns.length" class="table-empty">
+          <td :colspan="colspan" class="table-empty">
             {{ emptyText }}
           </td>
         </tr>
-        <tr v-for="(row, index) in data" :key="row.id || index" class="table-row">
-          <td v-for="col in columns" :key="col.key" class="table-cell">
+        <tr
+          v-for="(row, index) in data"
+          :key="row[rowKey] ?? index"
+          class="table-row cursor-pointer"
+          @click="handleRowClick(row)"
+        >
+          <td v-if="selectable" class="table-cell" @click.stop>
+            <input type="checkbox" :checked="isSelected(row)" @change="toggleRow(row)" />
+          </td>
+          <td
+            v-for="col in columns"
+            :key="col.key"
+            class="table-cell"
+            :class="col.align === 'center' ? 'text-center' : col.align === 'right' ? 'text-right' : undefined"
+          >
             <slot :name="col.key" :row="row" :value="row[col.key]">
               {{ row[col.key] }}
             </slot>
@@ -38,15 +56,64 @@
 </template>
 
 <script setup lang="ts">
-interface Column {
-  key: string
-  title: string
-}
+import { computed } from 'vue'
+import type { Column } from '../types'
 
-defineProps<{
+const props = withDefaults(defineProps<{
   columns: Column[]
   data: any[]
   loading?: boolean
   emptyText?: string
+  selectable?: boolean
+  selected?: string[]
+  rowKey?: string
+}>(), {
+  loading: false,
+  emptyText: '暂无数据',
+  selectable: false,
+  selected: () => [],
+  rowKey: 'id',
+})
+
+const emit = defineEmits<{
+  'update:selected': [ids: string[]]
+  'row-click': [row: any]
 }>()
+
+const colspan = computed(() => props.columns.length + (props.selectable ? 1 : 0))
+
+const selectedSet = computed(() => new Set(props.selected))
+
+function isSelected(row: any) {
+  return selectedSet.value.has(row[props.rowKey])
+}
+
+const allSelected = computed(() =>
+  props.data.length > 0 && props.data.every(row => selectedSet.value.has(row[props.rowKey]))
+)
+
+function toggleAll(e: Event) {
+  const checked = (e.target as HTMLInputElement).checked
+  if (checked) {
+    emit('update:selected', props.data.map(row => row[props.rowKey]))
+  } else {
+    emit('update:selected', [])
+  }
+}
+
+function toggleRow(row: any) {
+  const id = row[props.rowKey]
+  const current = [...props.selected]
+  const idx = current.indexOf(id)
+  if (idx >= 0) {
+    current.splice(idx, 1)
+  } else {
+    current.push(id)
+  }
+  emit('update:selected', current)
+}
+
+function handleRowClick(row: any) {
+  emit('row-click', row)
+}
 </script>

package/components/FormDialog.vue

@@ -3,15 +3,15 @@
     <Transition name="fade">
       <div v-if="visible" class="dialog-overlay">
         <div class="fixed inset-0 bg-bg-overlay" @click="cancel" />
-        <div class="dialog" :class="width || 'max-w-lg'">
+        <div class="panel-glass" :class="[width || 'max-w-lg', 'dialog']">
           <div class="flex items-center justify-between px-6 py-4 border-b border-border-primary">
             <h3 class="text-lg font-medium text-text-primary">{{ title }}</h3>
-            <button class="text-text-tertiary hover:text-text-primary" @click="cancel">&times;</button>
+            <button class="text-text-tertiary hover:text-text-primary text-2xl leading-none" @click="cancel">&times;</button>
           </div>
           <div class="px-6 py-4">
             <slot />
           </div>
-          <div class="dialog-actions px-6 py-4 border-t border-border-primary bg-bg-secondary rounded-b-2xl">
+          <div class="dialog-actions px-6 py-4 border-t border-border-primary bg-bg-secondary/50 rounded-b-2xl">
             <button
               class="btn-secondary"
               @click="cancel"

package/components/Pagination.vue

@@ -1,27 +1,36 @@
 <template>
-  <div class="flex items-center justify-between px-6 py-3 bg-bg-elevated border-t border-border-primary">
-    <div class="text-sm text-text-secondary">
-      共 {{ total }} 条记录
+  <div class="flex items-center justify-between px-6 py-2">
+    <div class="text-xs text-text-tertiary">
+      共 {{ total }} 条，第 {{ startItem }} - {{ endItem }} 条
     </div>
-    <div class="flex items-center space-x-2">
+    <div class="flex items-center space-x-1">
       <button
         :disabled="page <= 1"
-        class="btn-secondary btn-sm disabled:opacity-50"
+        class="btn-glass btn-sm disabled:opacity-50"
         @click="changePage(page - 1)"
       >
-        上一页
+        ← 上一页
       </button>
-      <span class="text-sm text-text-primary">{{ page }} / {{ totalPages }}</span>
+      <template v-for="p in visiblePages" :key="p">
+        <span v-if="p === '...'" class="btn-glass btn-sm pointer-events-none">…</span>
+        <button
+          v-else
+          :class="p === page ? 'pagination-btn-active btn-sm' : 'btn-glass btn-sm'"
+          @click="changePage(p as number)"
+        >
+          {{ p }}
+        </button>
+      </template>
       <button
         :disabled="page >= totalPages"
-        class="btn-secondary btn-sm disabled:opacity-50"
+        class="btn-glass btn-sm disabled:opacity-50"
         @click="changePage(page + 1)"
       >
-        下一页
+        下一页 →
       </button>
       <select
         :value="pageSize"
-        class="select text-sm py-1"
+        class="select ml-2"
         @change="changePageSize(Number(($event.target as HTMLSelectElement).value))"
       >
         <option :value="10">10条/页</option>
@@ -33,6 +42,7 @@
 </template>
 
 <script setup lang="ts">
+// @ts-nocheck
 import { computed } from 'vue'
 
 const props = defineProps<{
@@ -49,7 +59,46 @@ const emit = defineEmits<{
 
 const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.pageSize)))
 
+const startItem = computed(() => (props.page - 1) * props.pageSize + 1)
+const endItem = computed(() => Math.min(props.page * props.pageSize, props.total))
+
+/**
+ * 生成可见页码数组，当前页 ±2 范围内显示，其余用 '...' 省略
+ * 始终显示首页和末页
+ */
+const visiblePages = computed(() => {
+  const total = totalPages.value
+  const current = props.page
+  const delta = 2
+  const pages: (number | string)[] = []
+
+  if (total <= 7) {
+    for (let i = 1; i <= total; i++) pages.push(i)
+    return pages
+  }
+
+  // Always show first page
+  pages.push(1)
+
+  const rangeStart = Math.max(2, current - delta)
+  const rangeEnd = Math.min(total - 1, current + delta)
+
+  if (rangeStart > 2) pages.push('...')
+
+  for (let i = rangeStart; i <= rangeEnd; i++) {
+    pages.push(i)
+  }
+
+  if (rangeEnd < total - 1) pages.push('...')
+
+  // Always show last page
+  pages.push(total)
+
+  return pages
+})
+
 function changePage(p: number) {
+  if (p < 1 || p > totalPages.value) return
   emit('update:page', p)
   emit('change', p, props.pageSize)
 }

package/components/TopNavbar.vue

@@ -2,7 +2,7 @@
   <header class="navbar">
     <div class="flex items-center gap-3">
       <slot name="brand">
-        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-accent-primary to-accent-secondary flex items-center justify-center">
+        <div class="w-8 h-8 rounded-lg bg-accent-primary flex items-center justify-center">
           <svg class="w-5 h-5 text-text-inverse" viewBox="0 0 24 24" fill="currentColor">
             <path d="M12 2L2 7l10 5 10-5-10-5z"/>
           </svg>
@@ -10,21 +10,21 @@
         <span class="navbar-brand">{{ title }}</span>
       </slot>
       <span v-if="tenantLabel" class="text-xs text-text-tertiary">| {{ tenantLabel }}</span>
-    </div>
 
-    <nav v-if="modules.length > 0" class="flex items-center gap-1">
-      <router-link
-        v-for="mod in modules"
-        :key="mod.key"
-        :to="mod.href"
-        class="px-3 py-1.5 text-sm rounded-t-md transition-all duration-150 border-b-2"
-        :class="activeModule === mod.key
-          ? 'text-accent-primary border-accent-primary font-medium'
-          : 'text-text-secondary hover:text-text-primary border-transparent'"
-      >
-        {{ mod.label }}
-      </router-link>
-    </nav>
+      <nav v-if="modules.length > 0" class="flex items-center gap-1 ml-4">
+        <router-link
+          v-for="mod in modules"
+          :key="mod.key"
+          :to="mod.href"
+          class="px-3 py-1.5 text-sm rounded-t-md transition-all duration-150 border-b-2"
+          :class="activeModule === mod.key
+            ? 'font-medium border-accent-primary'
+            : 'text-text-secondary hover:text-text-primary border-transparent'"
+        >
+          {{ mod.label }}
+        </router-link>
+      </nav>
+    </div>
 
     <div class="navbar-user">
       <!-- 主题切换 -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquiferre/ui-kit",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "private": false,
   "type": "module",
   "main": "index.ts",

package/types.ts

@@ -1,6 +1,8 @@
 export interface Column {
   key: string
   title: string
+  width?: string
+  align?: 'left' | 'center' | 'right'
 }
 
 export interface MenuItem {
@@ -23,6 +25,7 @@ export interface NavModule {
   href: string
   paths: string[]
   permissions: string[]
+  superAdminOnly?: boolean
 }
 
 export interface DropdownItem {