@spacex110/core 0.1.11

package/src/styles.css

@@ -0,0 +1,246 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+
+    /* Scoped Preflight / Reset for apmsu-root */
+    .apmsu-root {
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        line-height: 1.5;
+        -webkit-text-size-adjust: 100%;
+        -moz-tab-size: 4;
+        tab-size: 4;
+        @apply mx-auto box-border;
+    }
+
+    /* 按钮 */
+    .apmsu-btn {
+        @apply inline-flex items-center justify-center rounded-md text-xs font-medium transition-all duration-200 h-10 px-4 py-2 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
+    }
+
+    .apmsu-btn-primary {
+        @apply bg-zinc-900 text-zinc-50 hover:bg-zinc-900/90 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-50/90;
+    }
+
+    .apmsu-btn-success {
+        @apply bg-green-600 text-white hover:bg-green-700;
+    }
+
+    .apmsu-btn-ghost {
+        @apply bg-transparent hover:bg-gray-100 dark:hover:bg-zinc-800 text-gray-700 dark:text-gray-300;
+    }
+
+    /* 输入框 */
+    .apmsu-input {
+        @apply flex h-11 w-full rounded-lg border bg-gray-100/30 dark:bg-zinc-800/50 px-4 py-2.5 text-sm shadow-sm placeholder:text-gray-400 dark:placeholder:text-zinc-500 focus:outline-none transition-colors;
+    }
+
+    .apmsu-input-default {
+        @apply border-gray-200 dark:border-zinc-700 focus:border-zinc-500 dark:focus:border-zinc-500 hover:border-gray-300 dark:hover:border-zinc-600;
+        border-width: 1px;
+        /* Ensure border width as preflight is disabled */
+    }
+
+    .apmsu-input-error {
+        @apply border-red-500 dark:border-red-500/50 focus-visible:ring-red-500 dark:bg-red-500/5;
+        border-width: 1px;
+    }
+
+    .apmsu-input-success {
+        @apply border-green-500 dark:border-green-500/50 focus-visible:ring-green-500 dark:bg-green-500/5;
+        border-width: 1px;
+    }
+
+    /* 下拉框 */
+    .apmsu-select-trigger {
+        @apply flex h-11 w-full min-w-0 items-center justify-between whitespace-nowrap rounded-lg border border-gray-200 dark:border-zinc-700 bg-gray-100/20 dark:bg-zinc-800/50 px-4 py-2.5 text-sm shadow-sm focus:outline-none focus:border-zinc-500 dark:focus:border-zinc-500 hover:border-gray-300 dark:hover:border-zinc-600 transition-colors;
+        border-width: 1px;
+    }
+
+    .apmsu-dropdown {
+        @apply absolute z-50 mt-1 w-full overflow-hidden rounded-md border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-xl;
+        border-width: 1px;
+        /* Hack to fix rendering glitch where dropdown content is white/hidden until scroll */
+        transform: translateZ(0);
+
+        /* 动画初始状态 */
+        max-height: 0;
+        opacity: 0;
+        transform-origin: top;
+        transform: translateY(-8px) scale(0.98);
+        pointer-events: none;
+        visibility: hidden;
+
+        /* 过渡效果 */
+        transition:
+            max-height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
+            opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
+            transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
+            visibility 0s linear 0.4s;
+    }
+
+    .apmsu-dropdown-open {
+        max-height: 480px;
+        /* 足够大的高度以容纳内容 */
+        opacity: 1;
+        transform: translateY(0) scale(1);
+        pointer-events: auto;
+        visibility: visible;
+        transition-delay: 0s;
+    }
+
+    .apmsu-dropdown-item {
+        @apply w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-zinc-800 transition-all cursor-pointer active:scale-[0.98];
+        background: transparent;
+        border: none;
+        text-align: left;
+    }
+
+    .apmsu-dropdown-item-active {
+        @apply bg-zinc-100 dark:bg-zinc-800;
+    }
+
+    /* 标签 */
+    .apmsu-label {
+        @apply text-xs font-medium leading-none block mb-2 uppercase tracking-wider text-gray-500 dark:text-zinc-500;
+    }
+
+    /* 文本 */
+    .apmsu-error-text {
+        @apply text-xs text-red-500 dark:text-red-400;
+    }
+
+    .apmsu-hint-text {
+        @apply text-xs text-gray-400 dark:text-zinc-500;
+    }
+
+    .apmsu-success-text {
+        @apply text-xs text-green-600 dark:text-green-400;
+    }
+
+    /* 卡片 */
+    .apmsu-card {
+        @apply bg-white dark:bg-zinc-900 rounded-xl border border-gray-200 dark:border-zinc-800 shadow-sm p-6 space-y-5;
+        border-width: 1px;
+    }
+
+    /* 图标 */
+    .apmsu-icon-spin {
+        @apply w-4 h-4 animate-spin text-gray-400;
+    }
+
+    .apmsu-icon-success {
+        @apply w-4 h-4 text-green-500;
+    }
+
+    .apmsu-icon-error {
+        @apply w-4 h-4 text-red-500;
+    }
+
+    /* Provider 图标 - dark mode 反转 */
+    .apmsu-provider-icon {
+        @apply w-4 h-4 flex-shrink-0;
+    }
+
+    /* 下拉箭头 */
+    .apmsu-chevron {
+        @apply w-4 h-4 opacity-50 flex-shrink-0 transition-transform duration-200;
+    }
+
+    /* Placeholder 文本 */
+    .apmsu-placeholder {
+        @apply text-gray-400 dark:text-zinc-500;
+    }
+
+    /* 表单字段容器 */
+    .apmsu-field {
+        @apply space-y-2;
+    }
+
+    /* 分割线 */
+    .apmsu-divider {
+        @apply border-b border-gray-100 dark:border-zinc-800;
+    }
+}
+
+/* Dark mode 下 provider 图标反转颜色 */
+.dark .apmsu-provider-icon {
+    filter: invert(1) hue-rotate(180deg);
+}
+
+/* 自定义滚动条 */
+.apmsu-root ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+.apmsu-root ::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.apmsu-root ::-webkit-scrollbar-thumb {
+    background: rgba(156, 163, 175, 0.5);
+    border-radius: 4px;
+}
+
+.apmsu-root ::-webkit-scrollbar-thumb:hover {
+    background: rgba(156, 163, 175, 0.7);
+}
+
+.apmsu-root.dark ::-webkit-scrollbar-thumb {
+    background: rgba(82, 82, 91, 0.6);
+}
+
+.apmsu-root.dark ::-webkit-scrollbar-thumb:hover {
+    background: rgba(82, 82, 91, 0.8);
+}
+
+/* 下拉框滚动条 */
+.apmsu-dropdown::-webkit-scrollbar,
+.apmsu-dropdown *::-webkit-scrollbar {
+    width: 6px;
+}
+
+.apmsu-dropdown::-webkit-scrollbar-thumb,
+.apmsu-dropdown *::-webkit-scrollbar-thumb {
+    background: rgba(156, 163, 175, 0.4);
+    border-radius: 3px;
+}
+
+.apmsu-dropdown::-webkit-scrollbar-track,
+.apmsu-dropdown *::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.dark .apmsu-dropdown::-webkit-scrollbar-thumb,
+.dark .apmsu-dropdown *::-webkit-scrollbar-thumb {
+    background: rgba(82, 82, 91, 0.5);
+}
+
+@keyframes apmsu-fade-in {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+.apmsu-fade-in {
+    animation: apmsu-fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* Vue Transition Classes */
+.apmsu-fade-enter-active {
+    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.apmsu-fade-enter-from {
+    opacity: 0;
+}
+
+.apmsu-fade-leave-active {
+    display: none;
+}

package/src/types.ts

@@ -0,0 +1,163 @@
+/**
+ * AI Provider Selector - Core Types
+ * Framework-agnostic type definitions
+ */
+
+// ============ Provider Types ============
+
+// export type AuthType = 'bearer' | 'x-api-key' | 'query-param' | 'none'; // REMOVED
+export type ApiFormat = 'openai' | 'anthropic' | 'gemini' | 'cohere';
+
+// ============ Model Fetcher Types ============
+
+export type FetcherActionType = 'fetchModels' | 'checkConnection';
+
+export interface FetcherParams {
+    type: FetcherActionType;
+    providerId: string;
+    baseUrl: string;
+    apiKey?: string;
+    modelId?: string; // only for checkConnection
+}
+
+/** 
+ * Custom fetcher for retrieving models and checking connection.
+ * If provided, this will bypass internal fetch logic.
+ * 
+ * - type='fetchModels': returns Promise<Model[]>
+ * - type='checkConnection': returns Promise<{ success: boolean; latency?: number; message?: string }>
+ */
+export type ModelFetcher = (params: FetcherParams) => Promise<any>;
+
+export interface Provider {
+    id: string;
+    name: string;
+    baseUrl: string;
+    needsApiKey: boolean;
+    apiFormat: ApiFormat;
+    supportsModelsApi: boolean;
+    icon?: string;
+}
+
+// ...
+
+/** 自定义 Provider 定义 */
+export interface CustomProviderDefinition {
+    name: string;
+    baseUrl: string;
+    needsApiKey: boolean;
+    apiFormat: ApiFormat;
+    supportsModelsApi?: boolean;
+    icon?: string;
+    /** 静态模型列表（当不支持 /models API 时使用） */
+    models?: Model[];
+}
+
+/** 模型能力类型 */
+export type ModelCapability = 'text' | 'vision' | 'audio' | 'video' | 'embedding' | 'reasoning';
+
+/** 能力标签配置 */
+export interface ModelCapabilityMeta {
+    type: ModelCapability;
+    label: string;
+    labelZh: string;
+    icon: string;
+}
+
+export const MODEL_CAPABILITIES: Record<ModelCapability, ModelCapabilityMeta> = {
+    text:       { type: 'text',       label: 'Text',       labelZh: '文本',      icon: '💬' },
+    vision:     { type: 'vision',     label: 'Vision',     labelZh: '视觉',      icon: '🖼️' },
+    audio:      { type: 'audio',      label: 'Audio',      labelZh: '音频',      icon: '🎤' },
+    video:      { type: 'video',      label: 'Video',      labelZh: '视频',      icon: '🎬' },
+    embedding:  { type: 'embedding',  label: 'Embedding',  labelZh: '嵌入',      icon: '📐' },
+    reasoning:  { type: 'reasoning',  label: 'Reasoning',  labelZh: '推理',      icon: '🧠' },
+};
+
+export interface Model {
+    id: string;
+    name: string;
+    /** 模型能力列表（如 text, vision, audio） */
+    capabilities?: ModelCapability[];
+    /** 上下文窗口大小 */
+    contextLength?: number;
+}
+
+// ============ Config Types ============
+
+export interface AIConfig {
+    providerId: string;
+    apiKey: string;
+    model: string;
+    modelName?: string;
+    baseUrl?: string;
+}
+
+// ============ API Types ============
+
+export interface TestConnectionOptions {
+    provider: Provider;
+    apiKey: string;
+    model?: string;
+    baseUrl?: string;
+    proxyUrl?: string;
+}
+
+export interface TestConnectionResult {
+    success: boolean;
+    latencyMs?: number;
+    message?: string;
+}
+
+export interface FetchModelsOptions {
+    provider: Provider;
+    apiKey?: string;
+    baseUrl?: string;
+    proxyUrl?: string;
+    fallbackToStatic?: boolean;
+}
+
+// ============ Storage Types ============
+
+export interface StorageAdapter {
+    get(key: string): string | null;
+    set(key: string, value: string): void;
+    remove(key: string): void;
+}
+
+// ============ Provider Config Types ============
+
+/** Provider 配置 JSON */
+export interface ProviderConfig {
+    /** 模式：default=内置+自定义，customOnly=只用自定义 */
+    mode: 'default' | 'customOnly';
+    /** 白名单：只显示这些内置 provider（仅 mode=default） */
+    include?: string[];
+    /** 黑名单：隐藏这些内置 provider（仅 mode=default） */
+    exclude?: string[];
+    /** 自定义 Providers */
+    custom?: Record<string, CustomProviderDefinition>;
+}
+
+/** AIConfigForm 组件的 Props */
+export interface AIConfigFormProps {
+    /** 
+     * 自定义请求处理器 
+     * 用于接管获取模型列表和连通性测试的请求
+     * 如果提供此函数，proxyUrl 在这两种操作中将被忽略
+     */
+    modelFetcher?: ModelFetcher;
+    /** 后端代理地址（必需，除非提供了 modelFetcher） */
+    proxyUrl?: string; // Now optional if modelFetcher is used
+    /** Provider 配置（可选，默认使用全部内置 Providers） */
+    config?: ProviderConfig;
+    /** 初始配置（可选，用于编辑已有配置） */
+    initialConfig?: Partial<AIConfig>;
+    /** 表单标题 */
+    title?: string;
+    /** 是否显示配置预览区域 */
+    showPreview?: boolean;
+    /** 保存按钮文本 */
+    saveButtonText?: string;
+    /** 是否禁用整个表单 */
+    disabled?: boolean;
+}