@kine-design/crud 0.0.1-beta.2 → 0.0.1-beta.21

package/components/upload/index.ts

@@ -0,0 +1,13 @@
+/**
+ * @description upload 组件 barrel export
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export { default as KUpload } from './KUpload';
+export { default as KImageUpload } from './KImageUpload';
+export { default as KFileList } from './KFileList';
+export type { UploadFile, UploadRequest } from './types';

package/components/upload/types.ts

@@ -0,0 +1,26 @@
+/**
+ * @description 上传组件类型定义
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export interface UploadFile {
+  uid: string;
+  name: string;
+  size: number;
+  type: string;
+  status: 'pending' | 'uploading' | 'success' | 'error';
+  percent: number;
+  url?: string;
+  thumbUrl?: string;
+  raw?: File;
+  response?: unknown;
+}
+
+export type UploadRequest = (
+  file: File,
+  onProgress: (percent: number) => void,
+) => Promise<{ url: string }>;

package/components/upload/upload.css

@@ -0,0 +1,345 @@
+/**
+ * @description 上传组件样式 — Phosphor sci-fi 暗色主题
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.1
+ */
+
+/* ── 隐藏原生 input ── */
+.k-upload-input {
+  display: none;
+}
+
+/* ══════════════════════════════════════════
+   KUpload — 基础上传区域
+══════════════════════════════════════════ */
+
+.k-upload {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 80px;
+  border-radius: var(--kine-radius-sm);
+  background: var(--kine-color-bg-secondary);
+  cursor: pointer;
+  transition:
+    border-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default),
+    background var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+  box-sizing: border-box;
+}
+
+/* 拖拽模式：虚线边框 */
+.k-upload-drag {
+  border: 1px dashed var(--kine-color-border-default);
+}
+
+.k-upload-drag:hover {
+  border-color: var(--kine-color-accent-default);
+  background: color-mix(in srgb, var(--kine-color-accent-default) 6%, var(--kine-color-bg-secondary));
+}
+
+/* 拖拽悬停态 */
+.k-upload-drag-over {
+  border-color: var(--kine-color-accent-default) !important;
+  background: color-mix(in srgb, var(--kine-color-accent-default) 10%, var(--kine-color-bg-secondary)) !important;
+  box-shadow: inset 0 0 0 1px var(--kine-color-accent-default);
+}
+
+/* 禁用态 */
+.k-upload-disabled {
+  opacity: var(--kine-opacity-muted);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* 默认占位内容 */
+.k-upload-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--kine-spacing-3);
+  pointer-events: none;
+}
+
+.k-upload-icon {
+  font-size: var(--kine-font-size-4xl);
+  color: var(--kine-color-text-secondary);
+  line-height: 1;
+}
+
+.k-upload-text {
+  font-family: var(--kine-font-family-mono);
+  font-size: var(--kine-font-size-sm);
+  color: var(--kine-color-text-secondary);
+}
+
+/* ══════════════════════════════════════════
+   KImageUpload — 图片网格
+══════════════════════════════════════════ */
+
+.k-image-upload {
+  display: block;
+}
+
+.k-image-upload-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--kine-spacing-4);
+}
+
+/* 图片卡片（预览 + 添加占位共用） */
+.k-image-upload-card {
+  position: relative;
+  border-radius: var(--kine-radius-sm);
+  overflow: hidden;
+  border: 1px solid var(--kine-color-border-default);
+  background: var(--kine-color-bg-secondary);
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+/* 添加卡片 */
+.k-image-upload-card--add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-style: dashed;
+  cursor: pointer;
+  transition:
+    border-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default),
+    background var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+}
+
+.k-image-upload-card--add:hover {
+  border-color: var(--kine-color-accent-default);
+  background: color-mix(in srgb, var(--kine-color-accent-default) 6%, var(--kine-color-bg-secondary));
+}
+
+.k-image-upload-add-icon {
+  font-size: 28px; /* 28px 无精确 token，保留 */
+  color: var(--kine-color-text-secondary);
+  line-height: 1;
+  pointer-events: none;
+}
+
+/* 错误态卡片边框 */
+.k-image-upload-card--error {
+  border-color: var(--kine-color-semantic-error);
+}
+
+/* 预览图 */
+.k-image-upload-preview {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* 上传进度覆盖层 */
+.k-image-upload-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  background: rgba(0, 0, 0, 0.45);
+}
+
+.k-image-upload-overlay--error {
+  justify-content: center;
+  font-family: var(--kine-font-family-mono);
+  font-size: var(--kine-font-size-sm);
+  color: var(--kine-color-semantic-error);
+}
+
+.k-image-upload-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--kine-color-accent-default);
+  box-shadow: 0 0 var(--kine-shadow-glow-radius) var(--kine-color-accent-default);
+  transition: height var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+  opacity: 0.6;
+}
+
+.k-image-upload-percent {
+  position: relative;
+  z-index: 1;
+  font-family: var(--kine-font-family-mono);
+  font-size: var(--kine-font-size-sm);
+  color: #ffffff;
+  padding-bottom: var(--kine-spacing-2);
+}
+
+/* 删除按钮（悬停卡片时显示） */
+.k-image-upload-remove {
+  position: absolute;
+  top: var(--kine-spacing-1);
+  right: var(--kine-spacing-1);
+  width: 20px;
+  height: 20px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.6);
+  border: none;
+  border-radius: var(--kine-radius-xs);
+  color: #ffffff;
+  font-size: var(--kine-font-size-xl);
+  cursor: pointer;
+  line-height: 1;
+  z-index: 10;
+  padding: 0;
+}
+
+.k-image-upload-card:hover .k-image-upload-remove {
+  display: flex;
+}
+
+.k-image-upload-remove:hover {
+  background: var(--kine-color-semantic-error);
+}
+
+/* ══════════════════════════════════════════
+   KFileList — 文件列表
+══════════════════════════════════════════ */
+
+.k-file-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--kine-spacing-2);
+  width: 100%;
+}
+
+.k-file-list-item {
+  display: grid;
+  grid-template-columns: 20px 1fr auto;
+  align-items: center;
+  column-gap: var(--kine-spacing-4);
+  padding: var(--kine-spacing-3) var(--kine-spacing-4);
+  border-radius: var(--kine-radius-xs);
+  background: var(--kine-color-bg-secondary);
+  border: 1px solid var(--kine-color-border-default);
+  font-family: var(--kine-font-family-mono);
+  transition: border-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+  position: relative;
+}
+
+/* 上传中时需要显示进度条，需要多行 */
+.k-file-list-item--uploading {
+  grid-template-columns: 20px 1fr auto;
+  grid-template-rows: auto 4px;
+}
+
+/* 上传中删除按钮固定在第一行 */
+.k-file-list-item--uploading .k-file-list-remove {
+  grid-row: 1;
+  grid-column: 3;
+}
+
+.k-file-list-item--success {
+  border-color: color-mix(in srgb, var(--kine-color-semantic-success) 30%, var(--kine-color-border-default));
+}
+
+.k-file-list-item--error {
+  border-color: color-mix(in srgb, var(--kine-color-semantic-error) 40%, var(--kine-color-border-default));
+}
+
+/* 文件图标 */
+.k-file-list-icon {
+  font-size: var(--kine-font-size-md);
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.k-file-list-item--success .k-file-list-icon {
+  color: var(--kine-color-semantic-success);
+}
+
+.k-file-list-item--error .k-file-list-icon {
+  color: var(--kine-color-semantic-error);
+}
+
+.k-file-list-item--uploading .k-file-list-icon,
+.k-file-list-item--pending .k-file-list-icon {
+  color: var(--kine-color-text-secondary);
+}
+
+/* 文件信息 */
+.k-file-list-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kine-spacing-1);
+  overflow: hidden;
+}
+
+.k-file-list-name {
+  font-size: var(--kine-font-size-sm);
+  color: var(--kine-color-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.k-file-list-link {
+  color: var(--kine-color-accent-default);
+  text-decoration: none;
+}
+
+.k-file-list-link:hover {
+  color: var(--kine-color-accent-hover);
+  text-decoration: underline;
+}
+
+.k-file-list-meta {
+  font-size: calc(var(--kine-font-size-sm) - 1px);
+  color: var(--kine-color-text-secondary);
+}
+
+/* 进度条（位于第二行，跨满三列） */
+.k-file-list-progress-track {
+  grid-column: 1 / -1;
+  height: 3px;
+  border-radius: var(--kine-radius-xs);
+  background: var(--kine-color-bg-tertiary);
+  overflow: hidden;
+  margin-top: var(--kine-spacing-1);
+}
+
+.k-file-list-progress-fill {
+  height: 100%;
+  border-radius: var(--kine-radius-xs);
+  background: var(--kine-color-accent-default);
+  box-shadow: 0 0 var(--kine-shadow-glow-radius) var(--kine-color-accent-default);
+  transition: width var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+}
+
+/* 删除按钮 */
+.k-file-list-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--kine-radius-xs);
+  color: var(--kine-color-text-secondary);
+  font-size: var(--kine-font-size-2xl);
+  cursor: pointer;
+  line-height: 1;
+  flex-shrink: 0;
+  transition: color var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+}
+
+.k-file-list-remove:hover {
+  color: var(--kine-color-semantic-error);
+}

package/composables/auth/authGuard.ts

@@ -0,0 +1,128 @@
+/**
+ * @description vue-router 路由守卫工厂，业务项目自行安装
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import type { AuthReturn } from './types';
+
+// ────────────────────────────────────────────────────────────────────────────
+// 局部 vue-router 类型声明（不引入 vue-router 依赖）
+// ────────────────────────────────────────────────────────────────────────────
+
+/** 最小化 RouteLocationNormalized，只声明本文件用到的字段 */
+interface RouteLocation {
+  path: string;
+  meta: RouteMeta;
+}
+
+/**
+ * 路由 meta 类型扩展。
+ * 业务项目可在 vue-router 模块声明中覆盖 RouteMeta 以获得完整类型提示：
+ *
+ * ```ts
+ * declare module 'vue-router' {
+ *   interface RouteMeta {
+ *     requiresAuth?: boolean;
+ *     can?: { resource: string; action: string };
+ *   }
+ * }
+ * ```
+ */
+interface RouteMeta {
+  /** 是否需要登录，默认 true（undefined 视为 true）*/
+  requiresAuth?: boolean;
+  /** 路由级权限检查，等同于 can(resource, action) */
+  can?: { resource: string; action: string };
+  [key: string]: unknown;
+}
+
+/** 导航结果：undefined 表示放行，string 表示跳转目标路径 */
+type NavigationResult = string | undefined;
+
+/** beforeEach 守卫函数签名（与 vue-router NavigationGuardWithThis 兼容） */
+export type BeforeEachGuard = (
+  to: RouteLocation,
+  from: RouteLocation,
+) => NavigationResult | Promise<NavigationResult>;
+
+// ────────────────────────────────────────────────────────────────────────────
+// createAuthGuard 选项
+// ────────────────────────────────────────────────────────────────────────────
+
+export interface AuthGuardOptions {
+  /**
+   * 未登录时跳转路径，默认 '/login'。
+   * 设为 false 时完全交由 onUnauthorized 处理，不执行跳转。
+   */
+  loginPath?: string | false;
+  /**
+   * 权限不足时跳转路径，默认 '/403'。
+   * 设为 false 时阻止导航但不跳转（返回 false）。
+   */
+  forbiddenPath?: string | false;
+}
+
+// ────────────────────────────────────────────────────────────────────────────
+// createAuthGuard
+// ────────────────────────────────────────────────────────────────────────────
+
+/**
+ * 创建路由守卫函数，由业务项目自行注册到 vue-router。
+ *
+ * 守卫逻辑顺序：
+ * 1. 若路由声明了 meta.can，检查权限；无权限跳 forbiddenPath
+ * 2. 若路由 meta.requiresAuth !== false 且未登录，执行 onUnauthorized 并跳 loginPath
+ *
+ * @example
+ * ```ts
+ * // router/index.ts
+ * import { useAuth, createAuthGuard } from '@kine-design/crud';
+ *
+ * // 注意：必须在 Vue App 已 provide auth 后调用 useAuth()
+ * const guard = createAuthGuard(useAuth(), { loginPath: '/login' });
+ * router.beforeEach(guard);
+ * ```
+ *
+ * @param auth     useAuth() 返回值
+ * @param options  守卫选项
+ */
+export function createAuthGuard(
+  auth: AuthReturn,
+  options?: AuthGuardOptions,
+): BeforeEachGuard {
+  const loginPath = options?.loginPath ?? '/login';
+  const forbiddenPath = options?.forbiddenPath ?? '/403';
+
+  return (to: RouteLocation): NavigationResult => {
+    const meta = to.meta;
+
+    // ── 1. 登录检查（requiresAuth 默认为 true）──────────────────────────────
+    // 必须先检查登录状态，未登录时不应检查权限（permissions 为空会误判）
+    const requiresAuth = meta.requiresAuth !== false;
+    if (requiresAuth && !auth.isAuthenticated.value) {
+      // loginPath 为 false 表示完全由业务层的 onUnauthorized 处理
+      if (loginPath === false) return undefined;
+      // 避免重定向到登录页自身导致死循环
+      if (to.path === loginPath) return undefined;
+      return loginPath;
+    }
+
+    // ── 2. 路由级权限检查（已登录后才检查）────────────────────────────────────
+    if (meta.can) {
+      const { resource, action } = meta.can;
+      if (!auth.can(resource, action)) {
+        // 权限不足
+        if (forbiddenPath === false) return undefined;
+        if (to.path === forbiddenPath) return undefined;
+        return forbiddenPath;
+      }
+    }
+
+    // 放行
+    return undefined;
+  };
+}

package/composables/auth/index.ts

@@ -0,0 +1,23 @@
+/**
+ * @description auth 模块 barrel export
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export { createAuth, useAuth } from './useAuth';
+export { createAuthGuard } from './authGuard';
+export { createVCan } from './vCan';
+
+export type {
+  Permission,
+  PermissionScope,
+  UserInfo,
+  AuthState,
+  AuthOptions,
+  AuthReturn,
+} from './types';
+export type { AuthGuardOptions, BeforeEachGuard } from './authGuard';
+export type { CanBinding, CanBindingObject } from './vCan';

package/composables/auth/types.ts

@@ -0,0 +1,109 @@
+/**
+ * @description 权限系统类型定义
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+// ────────────────────────────────────────────────────────────────────────────
+// 权限域类型
+// ────────────────────────────────────────────────────────────────────────────
+
+/**
+ * 权限范围层级，从低到高：own < department < all
+ * '*' 表示通配，匹配任意 scope
+ */
+export type PermissionScope = 'own' | 'department' | 'all' | '*';
+
+/** 单条权限记录 */
+export interface Permission {
+  /** 资源标识，如 'order'、'user'、'report' */
+  resource: string;
+  /** 操作标识，如 'read'、'create'、'update'、'delete'，'*' 表示所有操作 */
+  action: string;
+  /** 数据范围，不传时表示不受范围限制 */
+  scope?: PermissionScope;
+}
+
+// ────────────────────────────────────────────────────────────────────────────
+// 用户信息
+// ────────────────────────────────────────────────────────────────────────────
+
+/** 当前登录用户信息 */
+export interface UserInfo {
+  id: string | number;
+  username: string;
+  /** 业务扩展字段 */
+  [key: string]: unknown;
+}
+
+// ────────────────────────────────────────────────────────────────────────────
+// Auth 状态
+// ────────────────────────────────────────────────────────────────────────────
+
+/** Auth 响应式状态（内部使用） */
+export interface AuthState {
+  user: UserInfo | null;
+  permissions: Permission[];
+  token: string | null;
+}
+
+// ────────────────────────────────────────────────────────────────────────────
+// 初始化选项
+// ────────────────────────────────────────────────────────────────────────────
+
+/** createAuth 初始化选项 */
+export interface AuthOptions {
+  /**
+   * 获取当前用户信息及权限列表。
+   * login() 和应用初始化时均会调用此函数。
+   */
+  fetchUser: () => Promise<{ user: UserInfo; permissions: Permission[]; token: string }>;
+  /**
+   * 未登录时的处理回调（通常用于跳转登录页）。
+   * 不传时什么都不做。
+   */
+  onUnauthorized?: () => void;
+  /**
+   * 持久化存储类型。
+   * - 'local'：使用 localStorage，支持跨 tab 同步
+   * - 'session'：使用 sessionStorage
+   * - false（默认）：纯内存，不持久化
+   */
+  storage?: 'local' | 'session' | false;
+}
+
+// ────────────────────────────────────────────────────────────────────────────
+// useAuth 返回类型
+// ────────────────────────────────────────────────────────────────────────────
+
+import type { ComputedRef } from 'vue';
+
+/** useAuth() 的返回值类型 */
+export interface AuthReturn {
+  /** 当前用户，未登录时为 null */
+  user: ComputedRef<UserInfo | null>;
+  /** 当前权限列表 */
+  permissions: ComputedRef<Permission[]>;
+  /** 当前 token，未登录时为 null */
+  token: ComputedRef<string | null>;
+  /** 是否已认证（user 非 null 且 token 非 null） */
+  isAuthenticated: ComputedRef<boolean>;
+  /**
+   * 检查是否有指定权限。
+   * @param resource  资源标识
+   * @param action    操作标识
+   * @param scope     数据范围（不传时不检查 scope 层级）
+   */
+  can: (resource: string, action: string, scope?: PermissionScope) => boolean;
+  /** 调用 fetchUser 完成登录，更新 auth 状态 */
+  login: () => Promise<void>;
+  /** 直接注入登录结果到 auth 状态（供 defineUserStore 等外部流程使用） */
+  loginWith: (result: { user: UserInfo; permissions: Permission[]; token: string }) => void;
+  /** 清除 auth 状态（登出） */
+  logout: () => void;
+  /** 从 storage 恢复认证状态，供应用启动时调用 */
+  restore: () => Promise<void>;
+}