@usethink/cf-admin-fe 0.1.0

package/src/composables/useConfirmDialog.ts

@@ -0,0 +1,103 @@
+import { ref, watch } from 'vue'
+
+export type ConfirmOptionDef = {
+  key: string
+  label: string
+  /** 补充说明，显示在 label 下方 */
+  hint?: string
+  /** 默认 false */
+  defaultChecked?: boolean
+}
+
+export type ConfirmAskOptions = {
+  /** 危险操作样式（红按钮），由调用方通过 ConfirmDialog danger prop 控制亦可 */
+  danger?: boolean
+  /** 可选勾选项，默认全部未勾选；打开弹窗时按 defaultChecked 重置 */
+  options?: ConfirmOptionDef[]
+}
+
+export type ConfirmResult = {
+  confirmed: boolean
+  /** key → 是否勾选；取消时各值为 defaultChecked（调用方应以 confirmed 为准） */
+  options: Record<string, boolean>
+}
+
+export function useConfirmDialog() {
+  const confirmVisible = ref(false)
+  const confirmMessage = ref('')
+  const confirmOptionDefs = ref<ConfirmOptionDef[]>([])
+  const confirmOptionValues = ref<Record<string, boolean>>({})
+  let confirmCallback: ((result: ConfirmResult) => void) | null = null
+
+  function snapshotOptions(): Record<string, boolean> {
+    const out: Record<string, boolean> = {}
+    for (const def of confirmOptionDefs.value) {
+      out[def.key] = Boolean(confirmOptionValues.value[def.key])
+    }
+    return out
+  }
+
+  function resetOptionValues(defs: ConfirmOptionDef[]) {
+    const next: Record<string, boolean> = {}
+    for (const def of defs) {
+      next[def.key] = def.defaultChecked === true
+    }
+    confirmOptionValues.value = next
+  }
+
+  /**
+   * 简单确认：仅返回 boolean（兼容旧调用）。
+   * 需要读取 Checkbox 时请用 askConfirmWithOptions。
+   */
+  function askConfirm(message: string): Promise<boolean> {
+    return askConfirmWithOptions(message).then((r) => r.confirmed)
+  }
+
+  function askConfirmWithOptions(
+    message: string,
+    options: ConfirmAskOptions = {},
+  ): Promise<ConfirmResult> {
+    confirmCallback?.({ confirmed: false, options: snapshotOptions() })
+    confirmMessage.value = message
+    const defs = options.options ?? []
+    confirmOptionDefs.value = defs
+    resetOptionValues(defs)
+    confirmVisible.value = true
+    return new Promise((resolve) => {
+      confirmCallback = (result) => resolve(result)
+    })
+  }
+
+  function onConfirm() {
+    if (!confirmCallback) return
+    const callback = confirmCallback
+    confirmCallback = null
+    callback({ confirmed: true, options: snapshotOptions() })
+  }
+
+  function setConfirmOption(key: string, checked: boolean) {
+    confirmOptionValues.value = {
+      ...confirmOptionValues.value,
+      [key]: checked,
+    }
+  }
+
+  watch(confirmVisible, (visible, wasVisible) => {
+    if (wasVisible && !visible && confirmCallback) {
+      const callback = confirmCallback
+      confirmCallback = null
+      callback({ confirmed: false, options: snapshotOptions() })
+    }
+  })
+
+  return {
+    confirmVisible,
+    confirmMessage,
+    confirmOptionDefs,
+    confirmOptionValues,
+    askConfirm,
+    askConfirmWithOptions,
+    onConfirm,
+    setConfirmOption,
+  }
+}

package/src/composables/useTablePagination.ts

@@ -0,0 +1,81 @@
+import { ref, computed, type Ref, type ComputedRef } from 'vue'
+
+export interface UseTablePaginationOptions {
+  initialPage?: number
+  initialLimit?: number
+}
+
+export interface UseTablePaginationReturn {
+  page: Ref<number>
+  limit: Ref<number>
+  total: Ref<number>
+  totalPages: ComputedRef<number>
+  setPage: (page: number) => void
+  setLimit: (limit: number) => void
+  setTotal: (total: number) => boolean
+  nextPage: () => void
+  prevPage: () => void
+  reset: () => void
+  offset: ComputedRef<number>
+}
+
+export function useTablePagination(options: UseTablePaginationOptions = {}): UseTablePaginationReturn {
+  const page = ref(options.initialPage ?? 1)
+  const limit = ref(options.initialLimit ?? 20)
+  const total = ref(0)
+
+  const totalPages = computed(() => Math.max(1, Math.ceil(total.value / limit.value)))
+  const offset = computed(() => (page.value - 1) * limit.value)
+
+  function setPage(p: number) {
+    if (!Number.isFinite(p)) return
+    page.value = Math.max(1, Math.min(Math.trunc(p), totalPages.value))
+  }
+
+  function setLimit(l: number) {
+    if (!Number.isFinite(l) || l <= 0) return
+    limit.value = Math.trunc(l)
+    page.value = 1
+  }
+
+  function setTotal(nextTotal: number) {
+    const numericTotal = Number(nextTotal)
+    total.value = Number.isFinite(numericTotal) ? Math.max(0, Math.trunc(numericTotal)) : 0
+    const nextPage = Math.max(1, Math.min(page.value, totalPages.value))
+    if (nextPage === page.value) return false
+    page.value = nextPage
+    return true
+  }
+
+  function nextPage() {
+    if (page.value < totalPages.value) {
+      page.value += 1
+    }
+  }
+
+  function prevPage() {
+    if (page.value > 1) {
+      page.value -= 1
+    }
+  }
+
+  function reset() {
+    page.value = options.initialPage ?? 1
+    limit.value = options.initialLimit ?? 20
+    total.value = 0
+  }
+
+  return {
+    page,
+    limit,
+    total,
+    totalPages,
+    setPage,
+    setLimit,
+    setTotal,
+    nextPage,
+    prevPage,
+    reset,
+    offset,
+  }
+}

package/src/composables/useTableSelection.ts

@@ -0,0 +1,90 @@
+import { computed, ref, watch, unref, type MaybeRef } from 'vue'
+
+export interface UseTableSelectionOptions<T> {
+  isSelectable?: (row: T) => boolean
+}
+
+/**
+ * Accepts Ref or ComputedRef of row lists (MaybeRef) so product views can pass
+ * filtered computed tables without dual-package Ref assignability friction.
+ */
+export function useTableSelection<T>(
+  rows: MaybeRef<T[]>,
+  getKey: (row: T) => string,
+  options: UseTableSelectionOptions<T> = {},
+) {
+  const selectedIds = ref<string[]>([])
+  const rowIds = computed(() => Array.from(new Set(
+    unref(rows)
+      .filter((row) => options.isSelectable?.(row) ?? true)
+      .map(getKey)
+      .filter(Boolean),
+  )))
+  const selectableSet = computed(() => new Set(rowIds.value))
+  const selectedSet = computed(() => new Set(selectedIds.value))
+  const selectedCount = computed(() => selectedIds.value.length)
+  const selectableCount = computed(() => rowIds.value.length)
+  const allVisibleSelected = computed(() => rowIds.value.length > 0 && rowIds.value.every((id) => selectedSet.value.has(id)))
+  const partiallySelected = computed(() => selectedCount.value > 0 && selectedCount.value < rowIds.value.length)
+  let rangeAnchorId = ''
+
+  function isSelected(id: string) {
+    return selectedSet.value.has(id)
+  }
+
+  function setSelected(id: string, checked: boolean, extendRange = false) {
+    if (!id || !selectableSet.value.has(id)) return
+    const next = new Set(selectedIds.value)
+    const anchorIndex = rowIds.value.indexOf(rangeAnchorId)
+    const currentIndex = rowIds.value.indexOf(id)
+
+    if (extendRange && anchorIndex >= 0 && currentIndex >= 0) {
+      const start = Math.min(anchorIndex, currentIndex)
+      const end = Math.max(anchorIndex, currentIndex)
+      for (const rangeId of rowIds.value.slice(start, end + 1)) {
+        if (checked) next.add(rangeId)
+        else next.delete(rangeId)
+      }
+    } else if (checked) {
+      next.add(id)
+    } else {
+      next.delete(id)
+    }
+
+    selectedIds.value = Array.from(next)
+    rangeAnchorId = id
+  }
+
+  function toggleAllVisible(checked: boolean) {
+    const next = new Set(selectedIds.value)
+    for (const id of rowIds.value) {
+      if (checked) next.add(id)
+      else next.delete(id)
+    }
+    selectedIds.value = Array.from(next)
+  }
+
+  function clearSelection() {
+    selectedIds.value = []
+    rangeAnchorId = ''
+  }
+
+  watch(rowIds, (ids) => {
+    const visible = new Set(ids)
+    selectedIds.value = selectedIds.value.filter((id) => visible.has(id))
+    if (rangeAnchorId && !visible.has(rangeAnchorId)) rangeAnchorId = ''
+  })
+
+  return {
+    selectedIds,
+    selectedSet,
+    selectedCount,
+    selectableCount,
+    allVisibleSelected,
+    partiallySelected,
+    isSelected,
+    setSelected,
+    toggleAllVisible,
+    clearSelection,
+  }
+}

package/src/composables/useToast.ts

@@ -0,0 +1,29 @@
+import { ref } from 'vue'
+
+export type ToastType = 'success' | 'error' | 'info'
+
+export type ToastItem = { id: number; message: string; type: ToastType }
+
+const toasts = ref<ToastItem[]>([])
+let count = 0
+
+/** Max stacked toasts; older entries drop when exceeded (lottery hardening). */
+export const MAX_TOASTS = 5
+
+function showToast(message: string, type: ToastType = 'info', duration = 3000) {
+  const id = ++count
+  if (toasts.value.length >= MAX_TOASTS) {
+    toasts.value.shift()
+  }
+  toasts.value.push({ id, message, type })
+  setTimeout(() => {
+    toasts.value = toasts.value.filter((t) => t.id !== id)
+  }, duration)
+}
+
+export function useToast() {
+  return {
+    toasts,
+    showToast,
+  }
+}

package/src/env.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>
+  export default component
+}
+
+declare module '*.css' {
+  const css: string
+  export default css
+}
+
+/**
+ * Host apps (shop/lottery/auth) inject vue-i18n; kit components call `$t('pagination.*')` etc.
+ * Declared on both entry points so vue-tsc consumers share one augmentation path.
+ */
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $t: (key: string, params?: Record<string, unknown>) => string
+  }
+}
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $t: (key: string, params?: Record<string, unknown>) => string
+  }
+}
+
+export {}

package/src/index.ts

@@ -0,0 +1,47 @@
+/**
+ * @usethink/cf-admin-fe — Vue 3 admin foundation for CF product family.
+ *
+ * Import composables from root or `@usethink/cf-admin-fe/composables`.
+ * Import components from `@usethink/cf-admin-fe/components`.
+ * Import styles: `import '@usethink/cf-admin-fe/styles'`.
+ */
+
+export {
+  useTablePagination,
+  type UseTablePaginationOptions,
+  type UseTablePaginationReturn,
+} from './composables/useTablePagination'
+
+export {
+  useTableSelection,
+  type UseTableSelectionOptions,
+} from './composables/useTableSelection'
+
+export {
+  useConfirmDialog,
+  type ConfirmOptionDef,
+  type ConfirmAskOptions,
+  type ConfirmResult,
+} from './composables/useConfirmDialog'
+
+export {
+  useToast,
+  MAX_TOASTS,
+  type ToastType,
+  type ToastItem,
+} from './composables/useToast'
+
+export {
+  useAdminBatchOperation,
+  type AdminBatchOperationResult,
+} from './composables/useAdminBatchOperation'
+
+export {
+  writeClipboardText,
+  copyText,
+} from './composables/useClipboard'
+
+export { default as AdminPagination } from './components/AdminPagination.vue'
+export { default as AdminModal } from './components/AdminModal.vue'
+export { default as ConfirmDialog } from './components/ConfirmDialog.vue'
+export { default as ToastContainer } from './components/ToastContainer.vue'