@aquiferre/ui-kit 0.1.1 → 0.1.3

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/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.3",
   "private": false,
   "type": "module",
   "main": "index.ts",

package/types.ts

@@ -23,6 +23,7 @@ export interface NavModule {
   href: string
   paths: string[]
   permissions: string[]
+  superAdminOnly?: boolean
 }
 
 export interface DropdownItem {