vue-agent-start 0.1.0

package/src/provider-hub/components/ProviderApp.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+/**
+ * ProviderApp — 一体化模型供应商配置页。
+ *
+ * 单一 prop `apiBase` (默认 `/api`)：
+ *   • 内部三段式壳层 `<ProviderHubShell>` 处理 "已装 / 待配置 / 可安装"；
+ *   • 加载状态、错误 toast、删除确认、进阶已装模型面板全在内部；
+ *   • 宿主只需一句 `<ProviderApp />` 即可完整落地模型配置能力。
+ */
+import { onMounted, ref } from 'vue';
+
+import { message, Modal, Spin, Switch } from 'ant-design-vue';
+
+import {
+  setProviderHubApiBase,
+  useProviderHub,
+} from '../composables/useProviderHub';
+import type {
+  ModelEntity,
+  ModelTestResult,
+  ProviderView,
+} from '../types';
+import ModelCardGrid from './ModelCardGrid.vue';
+import ProviderHubShell from './ProviderHubShell.vue';
+
+interface Props {
+  /** Backend base URL, default `/api`. */
+  apiBase?: string;
+  /**
+   * 是否显示进阶面板 (已装模型逐条操作: 设为默认 / 测试 / 删除 / 覆写凭证)。
+   * 默认展示; 若不需要传 `:enable-advanced="false"` 隐藏。
+   */
+  enableAdvanced?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  apiBase: '/api',
+  enableAdvanced: true,
+});
+
+// Composable is module-scoped — flip the base URL before first fetch.
+setProviderHubApiBase(props.apiBase);
+
+const { listProviders, listModels, deleteModel, setDefault } = useProviderHub();
+
+const providers = ref<ProviderView[]>([]);
+const models = ref<ModelEntity[]>([]);
+const loading = ref(false);
+const showAdvanced = ref(false);
+
+async function refresh() {
+  loading.value = true;
+  try {
+    const [ps, ms] = await Promise.all([listProviders(), listModels()]);
+    providers.value = ps;
+    models.value = ms;
+  } catch (e: any) {
+    message.error(e?.message ?? '加载失败');
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(refresh);
+
+async function onSetDefault(m: ModelEntity) {
+  await setDefault(m.id);
+  message.success('已设为默认');
+  await refresh();
+}
+
+async function onTestModel(_m: ModelEntity, r: ModelTestResult) {
+  if (r.ok) message.success(`连接成功 · ${r.latencyMs}ms`);
+  else message.error(`连接失败: ${r.error ?? 'unknown'}`);
+}
+
+function onDelete(m: ModelEntity) {
+  Modal.confirm({
+    title: '删除模型',
+    content: `确认删除「${m.providerName} / ${m.modelName}」？依赖它的知识库/智能体运行时会失败。`,
+    okText: '删除',
+    okType: 'danger',
+    onOk: async () => {
+      await deleteModel(m.id);
+      message.success('已删除');
+      await refresh();
+    },
+  });
+}
+
+function onEditCredentials(m: ModelEntity) {
+  Modal.info({
+    title: '编辑模型级凭证',
+    content:
+      `此模型继承供应商级 API Key。如需覆写单条模型的 endpoint/dimensions，` +
+      `请通过 API PUT /models/${m.id}/credentials 直接调用。` +
+      `\n\n(该操作已从 UI 收起 —— 99% 的场景直接改供应商级凭证更合适)`,
+  });
+}
+</script>
+
+<template>
+  <div class="agent-start-provider-app">
+    <div class="agent-start-provider-app__header">
+      <div class="agent-start-provider-app__title">模型供应商</div>
+      <div class="agent-start-provider-app__desc">
+        填入 API Key 一次导入该供应商全部可用模型 —— 凭证 AES-GCM 加密存储。
+      </div>
+    </div>
+    <Spin :spinning="loading">
+      <ProviderHubShell :models="models" @change="refresh" />
+
+      <!-- 进阶: 已装模型的行级操作，默认收起 -->
+      <div v-if="enableAdvanced && models.length > 0" class="mt-6">
+        <div class="mb-2 flex items-center gap-2">
+          <span class="text-sm font-medium">进阶：已装模型逐条管理</span>
+          <Switch v-model:checked="showAdvanced" size="small" />
+          <span class="text-xs text-gray-500">
+            设为默认 / 测试 / 删除 / 覆写凭证
+          </span>
+        </div>
+        <div v-if="showAdvanced">
+          <ModelCardGrid
+            :models="models"
+            :providers="providers"
+            @set-default="onSetDefault"
+            @test="onTestModel"
+            @delete="onDelete"
+            @edit-credentials="onEditCredentials"
+          />
+        </div>
+      </div>
+    </Spin>
+  </div>
+</template>
+
+<style scoped>
+.agent-start-provider-app {
+  padding: 16px;
+}
+.agent-start-provider-app__header {
+  margin-bottom: 16px;
+}
+.agent-start-provider-app__title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #111827;
+}
+.agent-start-provider-app__desc {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #6b7280;
+}
+:global(.dark) .agent-start-provider-app__title {
+  color: #f3f4f6;
+}
+:global(.dark) .agent-start-provider-app__desc {
+  color: #9ca3af;
+}
+</style>

package/src/provider-hub/components/ProviderCredentialModal.vue

@@ -0,0 +1,321 @@
+<script setup lang="ts">
+/**
+ * ProviderCredentialModal — save-and-validate a provider-level API key.
+ *
+ * Single step, no auto-import:
+ *   User fills the schema-driven credential form → clicks "保存". The backend calls
+ *   the vendor's model listing endpoint as a lightweight validation (bad key → 400,
+ *   no state persisted), then saves the credential AND seeds the catalog as
+ *   {@code agent_model} rows with {@code enabled=false}. Individual enable/disable
+ *   is done in the shell's expanded row via toggle switches — this modal is
+ *   deliberately dumb.
+ *
+ * Emits `saved` when the credential is persisted so the parent refreshes.
+ */
+import { reactive, ref, watch } from 'vue';
+
+import { useProviderHub } from '../composables/useProviderHub';
+import type { ProviderView } from '../types';
+
+interface Props {
+  open: boolean;
+  provider: ProviderView | null;
+  tenantId?: string;
+  /** In edit mode, secret placeholders read "留空 = 保持不变" and empty submits are skipped. */
+  editMode?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), { editMode: false });
+
+const emit = defineEmits<{
+  (e: 'update:open', v: boolean): void;
+  (e: 'saved'): void;
+}>();
+
+const { saveProviderCredential } = useProviderHub();
+
+const creds = reactive<Record<string, unknown>>({});
+const saving = ref(false);
+const error = ref<string | null>(null);
+
+watch(
+  () => [props.open, props.provider?.name],
+  ([o]) => {
+    if (!o) return;
+    Object.keys(creds).forEach((k) => delete creds[k]);
+    error.value = null;
+    // Preload defaults from the schema so baseUrl-like fields are ready.
+    for (const f of props.provider?.credentialSchema ?? []) {
+      if (!props.editMode && f.defaultValue) creds[f.name] = f.defaultValue;
+    }
+  },
+  { immediate: true },
+);
+
+async function save() {
+  if (!props.provider) return;
+  error.value = null;
+  const payload: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(creds)) {
+    if (v !== null && v !== undefined && String(v).length > 0) payload[k] = v;
+  }
+  if (Object.keys(payload).length === 0) {
+    error.value = props.editMode ? '至少填写一个字段' : '请填入 API 密钥';
+    return;
+  }
+  saving.value = true;
+  try {
+    await saveProviderCredential(props.provider.name, payload, props.tenantId);
+    emit('saved');
+    emit('update:open', false);
+  } catch (e: any) {
+    // Backend returns the vendor's error text on 401 — surface it verbatim.
+    error.value = e?.message ?? String(e);
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<template>
+  <div v-if="open" class="pcm-backdrop" @click.self="emit('update:open', false)">
+    <div class="pcm-modal">
+      <div class="pcm-header">
+        <div class="pcm-title">
+          <span class="pcm-title-icon">🔑</span>
+          <span v-if="provider">
+            {{ editMode ? '编辑凭证' : '添加 API 密钥' }} · {{ provider.label }}
+          </span>
+        </div>
+        <button class="pcm-close" @click="emit('update:open', false)">✕</button>
+      </div>
+
+      <div class="pcm-body">
+        <div class="pcm-hint">
+          <template v-if="provider?.supportsRemoteModelListing">
+            保存时会向该供应商发起一次列表请求做校验（不会真的注册任何模型）；
+            通过后可在下方展开的目录里逐个开关启用。
+          </template>
+          <template v-else>
+            该供应商没有远程模型列表接口，请保存凭证后手动添加模型名称。
+          </template>
+        </div>
+
+        <div class="pcm-form">
+          <div
+            v-for="f in provider?.credentialSchema ?? []"
+            :key="f.name"
+            class="pcm-field"
+          >
+            <label class="pcm-label">
+              <span>{{ f.label }}</span>
+              <span v-if="f.required" class="pcm-req">*</span>
+              <span v-if="f.secret" class="pcm-secret">密文</span>
+            </label>
+            <input
+              v-if="f.secret"
+              type="password"
+              class="pcm-input"
+              autocomplete="off"
+              :value="(creds[f.name] as string) ?? ''"
+              :placeholder="editMode ? '留空 = 保持不变' : (f.placeholder ?? '')"
+              @input="(e) => (creds[f.name] = (e.target as HTMLInputElement).value)"
+            />
+            <input
+              v-else
+              type="text"
+              class="pcm-input"
+              :value="(creds[f.name] as string) ?? ''"
+              :placeholder="editMode ? '留空 = 保持不变' : (f.placeholder ?? '')"
+              @input="(e) => (creds[f.name] = (e.target as HTMLInputElement).value)"
+            />
+          </div>
+        </div>
+
+        <div v-if="error" class="pcm-error">
+          {{ error }}
+        </div>
+      </div>
+
+      <div class="pcm-footer">
+        <button
+          class="pcm-btn"
+          :disabled="saving"
+          @click="emit('update:open', false)"
+        >
+          取消
+        </button>
+        <button
+          class="pcm-btn pcm-btn-primary"
+          :disabled="saving"
+          @click="save"
+        >
+          {{ saving ? '校验中…' : '保存' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pcm-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+.pcm-modal {
+  width: 520px;
+  max-width: 92vw;
+  max-height: 88vh;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.25);
+  display: flex;
+  flex-direction: column;
+}
+:global(.dark) .pcm-modal {
+  background: #1f1f1f;
+  color: #f3f4f6;
+}
+.pcm-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 20px;
+  border-bottom: 1px solid #e5e7eb;
+}
+:global(.dark) .pcm-header {
+  border-bottom-color: #2d2d2d;
+}
+.pcm-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #111827;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+:global(.dark) .pcm-title {
+  color: #f3f4f6;
+}
+.pcm-title-icon {
+  font-size: 18px;
+}
+.pcm-close {
+  background: transparent;
+  border: none;
+  font-size: 18px;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+}
+.pcm-close:hover {
+  background: #f3f4f6;
+}
+.pcm-body {
+  padding: 16px 20px;
+  overflow-y: auto;
+  flex: 1;
+}
+.pcm-hint {
+  margin-bottom: 12px;
+  font-size: 12px;
+  color: #6b7280;
+  line-height: 1.6;
+}
+.pcm-error {
+  padding: 8px 12px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 6px;
+  color: #b91c1c;
+  font-size: 12px;
+  margin-top: 8px;
+}
+.pcm-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.pcm-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.pcm-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #374151;
+}
+:global(.dark) .pcm-label {
+  color: #d1d5db;
+}
+.pcm-req {
+  color: #dc2626;
+}
+.pcm-secret {
+  padding: 0 6px;
+  font-size: 10px;
+  border-radius: 4px;
+  background: #fef3c7;
+  color: #b45309;
+}
+.pcm-input {
+  padding: 8px 10px;
+  font-size: 13px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  background: #fff;
+  color: #111827;
+}
+:global(.dark) .pcm-input {
+  background: #2d2d2d;
+  border-color: #3d3d3d;
+  color: #f3f4f6;
+}
+.pcm-input:focus {
+  outline: none;
+  border-color: #6366f1;
+}
+.pcm-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 20px;
+  border-top: 1px solid #e5e7eb;
+}
+:global(.dark) .pcm-footer {
+  border-top-color: #2d2d2d;
+}
+.pcm-btn {
+  padding: 6px 16px;
+  font-size: 13px;
+  border-radius: 6px;
+  border: 1px solid #d1d5db;
+  background: #fff;
+  cursor: pointer;
+}
+.pcm-btn:hover {
+  background: #f3f4f6;
+}
+.pcm-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.pcm-btn-primary {
+  background: #6366f1;
+  color: #fff;
+  border-color: #6366f1;
+}
+.pcm-btn-primary:hover {
+  background: #4f46e5;
+}
+</style>

package/src/provider-hub/components/ProviderGallery.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+/**
+ * ProviderGallery — Dify-style "provider catalog" grid: one card per supported
+ * provider, click to start configuring a model against it.
+ *
+ * Emits `select` with the provider name. Consumers wire this to their own
+ * add-model dialog.
+ */
+import { computed } from 'vue';
+
+import type { ProviderView } from '../types';
+import ProviderIcon from './ProviderIcon.vue';
+
+interface Props {
+  providers: ProviderView[];
+  /** Optional title above the grid. */
+  title?: string;
+  /** Show a badge with predefined model count. */
+  showPresetCount?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '可用供应商',
+  showPresetCount: true,
+});
+
+const emit = defineEmits<{
+  (e: 'select', providerName: string): void;
+}>();
+
+const sorted = computed(() =>
+  [...props.providers].sort((a, b) => a.label.localeCompare(b.label)),
+);
+</script>
+
+<template>
+  <div class="ph-gallery">
+    <div v-if="title" class="ph-gallery-title">{{ title }}</div>
+    <div class="ph-grid">
+      <div
+        v-for="p in sorted"
+        :key="p.name"
+        class="ph-card"
+        :title="`点击添加 ${p.label} 模型`"
+        @click="emit('select', p.name)"
+      >
+        <ProviderIcon :name="p.name" :size="40" />
+        <div class="ph-body">
+          <div class="ph-name">{{ p.label }}</div>
+          <div class="ph-caps">
+            <span
+              v-for="t in p.supportedModelTypes"
+              :key="t"
+              class="ph-cap"
+            >
+              {{ t }}
+            </span>
+          </div>
+          <div v-if="showPresetCount" class="ph-hint">
+            {{ p.predefinedModels.length }} 个预设模型
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ph-gallery-title {
+  margin-bottom: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #6b7280;
+}
+.ph-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 12px;
+}
+.ph-card {
+  display: flex;
+  gap: 12px;
+  padding: 12px;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: box-shadow 0.15s ease;
+}
+.ph-card:hover {
+  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
+}
+.ph-icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  font-size: 22px;
+  flex-shrink: 0;
+}
+.ph-body {
+  min-width: 0;
+  flex: 1;
+}
+.ph-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #111827;
+}
+.ph-caps {
+  margin-top: 4px;
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+.ph-cap {
+  display: inline-block;
+  padding: 1px 6px;
+  font-size: 10px;
+  border-radius: 4px;
+  background: #eef2ff;
+  color: #4338ca;
+}
+.ph-hint {
+  margin-top: 6px;
+  font-size: 12px;
+  color: #6b7280;
+}
+</style>