koishi-plugin-media-luna 0.0.3 → 0.0.5

package/client/composables/useDataFetch.ts

@@ -0,0 +1,102 @@
+/**
+ * 数据获取 composable
+ * 结合 useLoading 和 usePagination，提供完整的数据获取能力
+ */
+import { ref, Ref, watch, onMounted } from 'vue'
+import { useLoading, UseLoadingOptions } from './useLoading'
+import { usePagination, UsePaginationOptions } from './usePagination'
+
+export interface UseDataFetchOptions<T> extends UseLoadingOptions, UsePaginationOptions {
+  /** 是否在挂载时自动获取 */
+  immediate?: boolean
+  /** 是否启用分页 */
+  paginated?: boolean
+  /** 数据获取函数 */
+  fetchFn: (params: { offset: number; limit: number }) => Promise<{ items: T[]; total: number } | T[]>
+}
+
+export interface UseDataFetchReturn<T> {
+  /** 数据列表 */
+  data: Ref<T[]>
+  /** 加载状态 */
+  loading: Ref<boolean>
+  /** 错误信息 */
+  error: Ref<string | null>
+  /** 分页信息（如果启用） */
+  pagination: ReturnType<typeof usePagination> | null
+  /** 刷新数据 */
+  refresh: () => Promise<void>
+  /** 重置并刷新（回到第一页） */
+  reset: () => Promise<void>
+}
+
+export function useDataFetch<T>(options: UseDataFetchOptions<T>): UseDataFetchReturn<T> {
+  const {
+    immediate = true,
+    paginated = false,
+    fetchFn,
+    ...loadingOptions
+  } = options
+
+  const data = ref<T[]>([]) as Ref<T[]>
+  const { loading, error, withLoading } = useLoading(loadingOptions)
+  const pagination = paginated ? usePagination(options) : null
+
+  const fetchData = async () => {
+    const params = pagination
+      ? { offset: pagination.offset.value, limit: pagination.pageSize.value }
+      : { offset: 0, limit: 1000 }
+
+    await withLoading(async () => {
+      const result = await fetchFn(params)
+
+      if (Array.isArray(result)) {
+        // 非分页响应
+        data.value = result
+        if (pagination) {
+          pagination.setTotal(result.length)
+        }
+      } else {
+        // 分页响应
+        data.value = result.items
+        if (pagination) {
+          pagination.setTotal(result.total)
+        }
+      }
+    })
+  }
+
+  const refresh = async () => {
+    await fetchData()
+  }
+
+  const reset = async () => {
+    if (pagination) {
+      pagination.reset()
+    }
+    await fetchData()
+  }
+
+  // 监听分页变化
+  if (pagination) {
+    watch([pagination.page, pagination.pageSize], () => {
+      fetchData()
+    })
+  }
+
+  // 自动获取
+  if (immediate) {
+    onMounted(() => {
+      fetchData()
+    })
+  }
+
+  return {
+    data,
+    loading,
+    error,
+    pagination,
+    refresh,
+    reset
+  }
+}

package/client/composables/useDialog.ts

@@ -0,0 +1,58 @@
+/**
+ * 对话框控制 composable
+ */
+import { ref, Ref } from 'vue'
+
+export interface UseDialogReturn<T = any> {
+  /** 对话框是否可见 */
+  visible: Ref<boolean>
+  /** 当前数据（编辑模式） */
+  data: Ref<T | null>
+  /** 是否为编辑模式 */
+  isEdit: Ref<boolean>
+  /** 打开对话框（新建模式） */
+  open: () => void
+  /** 打开对话框（编辑模式） */
+  openEdit: (item: T) => void
+  /** 关闭对话框 */
+  close: () => void
+  /** 重置数据 */
+  reset: () => void
+}
+
+export function useDialog<T = any>(defaultData?: T): UseDialogReturn<T> {
+  const visible = ref(false)
+  const data = ref<T | null>(null) as Ref<T | null>
+  const isEdit = ref(false)
+
+  const open = () => {
+    data.value = defaultData ? { ...defaultData } : null
+    isEdit.value = false
+    visible.value = true
+  }
+
+  const openEdit = (item: T) => {
+    data.value = { ...item }
+    isEdit.value = true
+    visible.value = true
+  }
+
+  const close = () => {
+    visible.value = false
+  }
+
+  const reset = () => {
+    data.value = null
+    isEdit.value = false
+  }
+
+  return {
+    visible,
+    data,
+    isEdit,
+    open,
+    openEdit,
+    close,
+    reset
+  }
+}

package/client/composables/useLoading.ts

@@ -0,0 +1,84 @@
+/**
+ * 加载状态管理 composable
+ * 提供统一的 loading、error 状态管理
+ */
+import { ref, Ref } from 'vue'
+import { message } from '@koishijs/client'
+
+export interface UseLoadingOptions {
+  /** 初始加载状态 */
+  initialLoading?: boolean
+  /** 错误时是否显示 toast */
+  showErrorToast?: boolean
+  /** 默认错误消息 */
+  defaultErrorMessage?: string
+}
+
+export interface UseLoadingReturn {
+  /** 是否正在加载 */
+  loading: Ref<boolean>
+  /** 错误信息 */
+  error: Ref<string | null>
+  /** 包装异步函数，自动处理 loading 和 error 状态 */
+  withLoading: <T>(fn: () => Promise<T>, errorMessage?: string) => Promise<T | undefined>
+  /** 手动设置加载状态 */
+  setLoading: (value: boolean) => void
+  /** 手动设置错误 */
+  setError: (message: string | null) => void
+  /** 清除错误 */
+  clearError: () => void
+}
+
+export function useLoading(options: UseLoadingOptions = {}): UseLoadingReturn {
+  const {
+    initialLoading = false,
+    showErrorToast = true,
+    defaultErrorMessage = '操作失败'
+  } = options
+
+  const loading = ref(initialLoading)
+  const error = ref<string | null>(null)
+
+  const setLoading = (value: boolean) => {
+    loading.value = value
+  }
+
+  const setError = (msg: string | null) => {
+    error.value = msg
+    if (msg && showErrorToast) {
+      message.error(msg)
+    }
+  }
+
+  const clearError = () => {
+    error.value = null
+  }
+
+  const withLoading = async <T>(
+    fn: () => Promise<T>,
+    errorMessage?: string
+  ): Promise<T | undefined> => {
+    loading.value = true
+    error.value = null
+
+    try {
+      const result = await fn()
+      return result
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : (errorMessage || defaultErrorMessage)
+      setError(msg)
+      return undefined
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    loading,
+    error,
+    withLoading,
+    setLoading,
+    setError,
+    clearError
+  }
+}

package/client/composables/usePagination.ts

@@ -0,0 +1,110 @@
+/**
+ * 分页管理 composable
+ * 提供统一的分页状态和控制
+ */
+import { ref, computed, Ref, ComputedRef } from 'vue'
+
+export interface UsePaginationOptions {
+  /** 初始页码（从 1 开始） */
+  initialPage?: number
+  /** 每页数量 */
+  initialPageSize?: number
+  /** 可选的每页数量选项 */
+  pageSizeOptions?: number[]
+}
+
+export interface UsePaginationReturn {
+  /** 当前页码（从 1 开始） */
+  page: Ref<number>
+  /** 每页数量 */
+  pageSize: Ref<number>
+  /** 总数量 */
+  total: Ref<number>
+  /** 总页数 */
+  totalPages: ComputedRef<number>
+  /** 是否有下一页 */
+  hasNext: ComputedRef<boolean>
+  /** 是否有上一页 */
+  hasPrev: ComputedRef<boolean>
+  /** 当前页的 offset（用于 API 调用） */
+  offset: ComputedRef<number>
+  /** 每页数量选项 */
+  pageSizeOptions: number[]
+  /** 设置总数 */
+  setTotal: (value: number) => void
+  /** 下一页 */
+  nextPage: () => void
+  /** 上一页 */
+  prevPage: () => void
+  /** 跳转到指定页 */
+  goToPage: (pageNum: number) => void
+  /** 重置到第一页 */
+  reset: () => void
+  /** 更改每页数量（会重置到第一页） */
+  changePageSize: (size: number) => void
+}
+
+export function usePagination(options: UsePaginationOptions = {}): UsePaginationReturn {
+  const {
+    initialPage = 1,
+    initialPageSize = 20,
+    pageSizeOptions = [10, 20, 50, 100]
+  } = options
+
+  const page = ref(initialPage)
+  const pageSize = ref(initialPageSize)
+  const total = ref(0)
+
+  const totalPages = computed(() => Math.ceil(total.value / pageSize.value) || 1)
+  const hasNext = computed(() => page.value < totalPages.value)
+  const hasPrev = computed(() => page.value > 1)
+  const offset = computed(() => (page.value - 1) * pageSize.value)
+
+  const setTotal = (value: number) => {
+    total.value = value
+  }
+
+  const nextPage = () => {
+    if (hasNext.value) {
+      page.value++
+    }
+  }
+
+  const prevPage = () => {
+    if (hasPrev.value) {
+      page.value--
+    }
+  }
+
+  const goToPage = (pageNum: number) => {
+    if (pageNum >= 1 && pageNum <= totalPages.value) {
+      page.value = pageNum
+    }
+  }
+
+  const reset = () => {
+    page.value = 1
+  }
+
+  const changePageSize = (size: number) => {
+    pageSize.value = size
+    page.value = 1
+  }
+
+  return {
+    page,
+    pageSize,
+    total,
+    totalPages,
+    hasNext,
+    hasPrev,
+    offset,
+    pageSizeOptions,
+    setTotal,
+    nextPage,
+    prevPage,
+    goToPage,
+    reset,
+    changePageSize
+  }
+}

package/client/constants/categories.ts

@@ -0,0 +1,36 @@
+/**
+ * 中间件分类定义
+ */
+
+export interface CategoryDefinition {
+  id: string
+  label: string
+  icon?: string
+  order: number
+}
+
+/** 中间件分类列表 */
+export const CATEGORIES: CategoryDefinition[] = [
+  { id: 'billing', label: '计费模块', icon: 'coins', order: 1 },
+  { id: 'transform', label: '转换处理', icon: 'edit', order: 2 },
+  { id: 'cache', label: '缓存模块', icon: 'folder', order: 3 },
+  { id: 'preset', label: '预设模块', icon: 'bookmark', order: 4 },
+  { id: 'request', label: '请求模块', icon: 'link', order: 5 },
+  { id: 'task', label: '任务模块', icon: 'clipboard', order: 6 },
+  { id: 'other', label: '其他', icon: 'more', order: 99 }
+]
+
+/** 分类 ID 到标签的映射 */
+export const CATEGORY_LABELS: Record<string, string> = Object.fromEntries(
+  CATEGORIES.map(c => [c.id, c.label])
+)
+
+/** 获取分类定义 */
+export function getCategory(id: string): CategoryDefinition | undefined {
+  return CATEGORIES.find(c => c.id === id)
+}
+
+/** 获取分类标签 */
+export function getCategoryLabel(id: string): string {
+  return CATEGORY_LABELS[id] || id
+}

package/client/constants/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Constants 统一导出
+ */
+export * from './phases'
+export * from './categories'

package/client/constants/phases.ts

@@ -0,0 +1,44 @@
+/**
+ * 中间件生命周期阶段定义
+ */
+
+export interface PhaseDefinition {
+  id: string
+  label: string
+  color: string
+  order: number
+}
+
+/** 生命周期阶段列表 */
+export const PHASES: PhaseDefinition[] = [
+  { id: 'lifecycle-prepare', label: '准备', color: '#909399', order: 1 },
+  { id: 'lifecycle-pre-request', label: '预处理', color: '#e6a23c', order: 2 },
+  { id: 'lifecycle-request', label: '请求', color: '#409eff', order: 3 },
+  { id: 'lifecycle-post-request', label: '后处理', color: '#67c23a', order: 4 },
+  { id: 'lifecycle-finalize', label: '完成', color: '#909399', order: 5 }
+]
+
+/** 阶段 ID 到标签的映射 */
+export const PHASE_LABELS: Record<string, string> = Object.fromEntries(
+  PHASES.map(p => [p.id, p.label])
+)
+
+/** 阶段 ID 到颜色的映射 */
+export const PHASE_COLORS: Record<string, string> = Object.fromEntries(
+  PHASES.map(p => [p.id, p.color])
+)
+
+/** 获取阶段定义 */
+export function getPhase(id: string): PhaseDefinition | undefined {
+  return PHASES.find(p => p.id === id)
+}
+
+/** 获取阶段标签 */
+export function getPhaseLabel(id: string): string {
+  return PHASE_LABELS[id] || id
+}
+
+/** 获取阶段颜色 */
+export function getPhaseColor(id: string): string {
+  return PHASE_COLORS[id] || '#909399'
+}

package/client/styles/shared.css

@@ -256,3 +256,45 @@
 .ml-fade-in {
   animation: ml-fade-in 0.3s ease;
 }
+
+/* ========== 隐藏式滚动条 ========== */
+/* 通用隐藏式滚动条样式 - 默认隐藏，悬停时显示 */
+.ml-scrollbar,
+.ml-view-content {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.ml-scrollbar:hover,
+.ml-view-content:hover {
+  scrollbar-color: var(--k-color-border) transparent;
+}
+
+/* Webkit 浏览器滚动条 */
+.ml-scrollbar::-webkit-scrollbar,
+.ml-view-content::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.ml-scrollbar::-webkit-scrollbar-track,
+.ml-view-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.ml-scrollbar::-webkit-scrollbar-thumb,
+.ml-view-content::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 3px;
+  transition: background-color 0.2s;
+}
+
+.ml-scrollbar:hover::-webkit-scrollbar-thumb,
+.ml-view-content:hover::-webkit-scrollbar-thumb {
+  background-color: var(--k-color-border);
+}
+
+.ml-scrollbar::-webkit-scrollbar-thumb:hover,
+.ml-view-content::-webkit-scrollbar-thumb:hover {
+  background-color: var(--k-color-text-description);
+}

package/client/types.ts

@@ -44,6 +44,11 @@ export type {
   CardFieldsResponse
 } from '../src/types'
 
+// 从核心模块导入插件相关类型
+export type {
+  PluginInfo
+} from '../src/core/types'
+
 // 类型别名（保持向后兼容）
 import type { ConfigField, CardFieldsResponse as _CardFieldsResponse } from '../src/types'
 export type FieldDefinition = ConfigField
@@ -73,6 +78,74 @@ export interface RemotePresetConfig {
   deleteRemoved: boolean
 }
 
+// ============ 画廊类型 ============
+
+/** 画廊项目 */
+export interface GalleryItem {
+  id: number
+  prompt: string
+  images: string[]
+  createdAt: Date
+  channelId: number
+}
+
+/** 画廊响应 */
+export interface GalleryResponse {
+  items: GalleryItem[]
+  total: number
+  hasMore: boolean
+}
+
+/** 最近图片 */
+export interface RecentImage {
+  taskId: number
+  url: string
+  prompt: string
+  createdAt: Date
+}
+
+// ============ 缓存类型 ============
+
+/** 缓存文件信息 */
+export interface CacheFileInfo {
+  id: string
+  url?: string
+  filename: string
+  mime: string
+  size: number
+  createdAt?: Date
+  accessedAt?: Date
+}
+
+/** 缓存统计 */
+export interface CacheStats {
+  totalFiles: number
+  totalSizeMB: number
+  maxSizeMB: number
+  oldestAccess: Date | null
+  newestAccess: Date | null
+}
+
+// ============ 外部插件类型 ============
+
+/** 外部插件信息 */
+export interface ExternalPluginInfo {
+  id: string
+  moduleName: string
+  name: string
+}
+
+// ============ 认证类型 ============
+
+/** 当前用户信息 */
+export interface CurrentUser {
+  loggedIn: boolean
+  source?: string
+  uid?: number
+  name?: string
+  authority?: number
+}
+
 declare module '@koishijs/client' {
   interface Events {
     // 渠道