lanyuanxiaoyao/nex
1
0
Fork 0
Code Activity

Merge branch 'dev-frontend-optimization'

Browse Source
This commit is contained in:
兰缘小妖
2026-04-22 13:31:37 +08:00
parent 934c8dea77 5d58acf5a6
commit 7b28cee7a1
26 changed files with 154 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
backend/internal/config/models.go
View File

@@ -48,11 +48,3 @@ func (UsageStats) TableName() string {
return "usage_stats"
}
// MaskAPIKey 掩码 API Key（仅显示最后 4 个字符）
func (p *Provider) MaskAPIKey() {
if len(p.APIKey) > 4 {
p.APIKey = "***" + p.APIKey[len(p.APIKey)-4:]
} else {
p.APIKey = "***"
}
}

8
backend/internal/domain/provider.go
View File

@@ -14,11 +14,3 @@ type Provider struct {
UpdatedAt time.Time `json:"updated_at"`
}
// MaskAPIKey 掩码 API Key（仅显示最后 4 个字符）
func (p *Provider) MaskAPIKey() {
if len(p.APIKey) > 4 {
p.APIKey = "***" + p.APIKey[len(p.APIKey)-4:]
} else {
p.APIKey = "***"
}
}

4
backend/internal/handler/handler_supplemental_test.go
View File

@@ -40,7 +40,7 @@ func TestProviderHandler_CreateProvider_Success(t *testing.T) {
var result domain.Provider
require.NoError(t, json.Unmarshal(w.Body.Bytes(), &result))
assert.Equal(t, "p1", result.ID)
assert.Contains(t, result.APIKey, "***")
assert.Equal(t, "sk-test", result.APIKey)
}
func TestProviderHandler_CreateProvider_WithProtocol(t *testing.T) {
@@ -73,7 +73,7 @@ func TestProviderHandler_UpdateProvider(t *testing.T) {
mockSvc := mocks.NewMockProviderService(ctrl)
mockSvc.EXPECT().Update(gomock.Eq("p1"), gomock.Any()).Return(nil)
mockSvc.EXPECT().Get(gomock.Eq("p1"), gomock.Eq(true)).Return(&domain.Provider{ID: "p1", Name: "Updated", APIKey: "***"}, nil)
mockSvc.EXPECT().Get(gomock.Eq("p1")).Return(&domain.Provider{ID: "p1", Name: "Updated", APIKey: "sk-test"}, nil)
h := NewProviderHandler(mockSvc)
body, _ := json.Marshal(map[string]string{"name": "Updated"})

4
backend/internal/handler/handler_test.go
View File

@@ -24,6 +24,8 @@ func init() {
gin.SetMode(gin.TestMode)
}
func TestProviderHandler_CreateProvider_MissingFields(t *testing.T) {
ctrl := gomock.NewController(t)
defer ctrl.Finish()
@@ -69,7 +71,7 @@ func TestProviderHandler_GetProvider(t *testing.T) {
defer ctrl.Finish()
mockSvc := mocks.NewMockProviderService(ctrl)
mockSvc.EXPECT().Get(gomock.Eq("p1"), gomock.Eq(true)).Return(&domain.Provider{ID: "p1", Name: "P1", APIKey: "***"}, nil)
mockSvc.EXPECT().Get(gomock.Eq("p1")).Return(&domain.Provider{ID: "p1", Name: "P1", APIKey: "sk-test"}, nil)
h := NewProviderHandler(mockSvc)
w := httptest.NewRecorder()

5
backend/internal/handler/provider_handler.go
View File

@@ -66,7 +66,6 @@ func (h *ProviderHandler) CreateProvider(c *gin.Context) {
return
}
provider.MaskAPIKey()
c.JSON(http.StatusCreated, provider)
}
@@ -85,7 +84,7 @@ func (h *ProviderHandler) ListProviders(c *gin.Context) {
func (h *ProviderHandler) GetProvider(c *gin.Context) {
id := c.Param("id")
provider, err := h.providerService.Get(id, true)
provider, err := h.providerService.Get(id)
if err != nil {
if err == gorm.ErrRecordNotFound {
c.JSON(http.StatusNotFound, gin.H{
@@ -131,7 +130,7 @@ func (h *ProviderHandler) UpdateProvider(c *gin.Context) {
return
}
provider, err := h.providerService.Get(id, true)
provider, err := h.providerService.Get(id)
if err != nil {
writeError(c, err)
return

2
backend/internal/handler/proxy_handler_test.go
View File

@@ -26,6 +26,8 @@ func init() {
gin.SetMode(gin.TestMode)
}
func setupProxyEngine(t *testing.T) *conversion.ConversionEngine {
t.Helper()
registry := conversion.NewMemoryRegistry()

2
backend/internal/service/provider_service.go
View File

@@ -7,7 +7,7 @@ import "nex/backend/internal/domain"
// ProviderService 供应商服务接口
type ProviderService interface {
Create(provider *domain.Provider) error
Get(id string, maskKey bool) (*domain.Provider, error)
Get(id string) (*domain.Provider, error)
List() ([]domain.Provider, error)
Update(id string, updates map[string]interface{}) error
Delete(id string) error

20
backend/internal/service/provider_service_impl.go
View File

@@ -32,26 +32,12 @@ func (s *providerService) Create(provider *domain.Provider) error {
return err
}
func (s *providerService) Get(id string, maskKey bool) (*domain.Provider, error) {
provider, err := s.providerRepo.GetByID(id)
if err != nil {
return nil, err
}
if maskKey {
provider.MaskAPIKey()
}
return provider, nil
func (s *providerService) Get(id string) (*domain.Provider, error) {
return s.providerRepo.GetByID(id)
}
func (s *providerService) List() ([]domain.Provider, error) {
providers, err := s.providerRepo.List()
if err != nil {
return nil, err
}
for i := range providers {
providers[i].MaskAPIKey()
}
return providers, nil
return s.providerRepo.List()
}
func (s *providerService) Update(id string, updates map[string]interface{}) error {

2
backend/internal/service/service_supplemental_test.go
View File

@@ -21,7 +21,7 @@ func TestProviderService_Update(t *testing.T) {
err := svc.Update("p1", map[string]interface{}{"name": "Updated"})
require.NoError(t, err)
result, err := svc.Get("p1", false)
result, err := svc.Get("p1")
require.NoError(t, err)
assert.Equal(t, "Updated", result.Name)
}

14
backend/internal/service/service_test.go
View File

@@ -255,7 +255,7 @@ func TestProviderService_Update_Success(t *testing.T) {
})
require.NoError(t, err)
updated, err := svc.Get("openai", false)
updated, err := svc.Get("openai")
require.NoError(t, err)
assert.Equal(t, "OpenAI Updated", updated.Name)
}
@@ -425,9 +425,9 @@ func TestProviderService_isUniqueConstraintError(t *testing.T) {
}
}
// ============ ProviderService - List MaskAPIKey 测试 ============
// ============ ProviderService - List API Key 测试 ============
func TestProviderService_List_MaskAPIKey(t *testing.T) {
func TestProviderService_List_APIKeyNotMasked(t *testing.T) {
db := setupServiceTestDB(t)
repo := repository.NewProviderRepository(db)
modelRepo := repository.NewModelRepository(db)
@@ -442,9 +442,13 @@ func TestProviderService_List_MaskAPIKey(t *testing.T) {
require.NoError(t, err)
require.Len(t, providers, 2)
expectedKeys := map[string]string{
"openai": "sk-1234567890",
"anthropic": "sk-anthropic1234",
}
for _, p := range providers {
assert.Contains(t, p.APIKey, "***")
assert.Len(t, p.APIKey, 7)
assert.NotContains(t, p.APIKey, "***")
assert.Equal(t, expectedKeys[p.ID], p.APIKey)
}
}

3
backend/tests/integration/conversion_test.go
View File

@@ -533,8 +533,7 @@ func TestConversion_ProviderWithProtocol(t *testing.T) {
var created map[string]any
json.Unmarshal(w.Body.Bytes(), &created)
// API Key 被掩码
assert.Contains(t, created["api_key"], "***")
assert.Equal(t, "sk-test", created["api_key"])
// 获取时应包含 protocol
w = httptest.NewRecorder()

2
backend/tests/integration/integration_test.go
View File

@@ -103,7 +103,7 @@ func TestOpenAI_CompleteFlow(t *testing.T) {
var providers []domain.Provider
json.Unmarshal(w.Body.Bytes(), &providers)
assert.Len(t, providers, 1)
assert.Contains(t, providers[0].APIKey, "***") // 已掩码
assert.Equal(t, "sk-test-key", providers[0].APIKey)
// 4. 列出 Model
w = httptest.NewRecorder()

8
backend/tests/mocks/mock_provider_service.go
View File

@@ -69,18 +69,18 @@ func (mr *MockProviderServiceMockRecorder) Delete(id any) *gomock.Call {
}
// Get mocks base method.
func (m *MockProviderService) Get(id string, maskKey bool) (*domain.Provider, error) {
func (m *MockProviderService) Get(id string) (*domain.Provider, error) {
m.ctrl.T.Helper()
ret := m.ctrl.Call(m, "Get", id, maskKey)
ret := m.ctrl.Call(m, "Get", id)
ret0, _ := ret[0].(*domain.Provider)
ret1, _ := ret[1].(error)
return ret0, ret1
}
// Get indicates an expected call of Get.
func (mr *MockProviderServiceMockRecorder) Get(id, maskKey any) *gomock.Call {
func (mr *MockProviderServiceMockRecorder) Get(id any) *gomock.Call {
mr.mock.ctrl.T.Helper()
return mr.mock.ctrl.RecordCallWithMethodType(mr.mock, "Get", reflect.TypeOf((*MockProviderService)(nil).Get), id, maskKey)
return mr.mock.ctrl.RecordCallWithMethodType(mr.mock, "Get", reflect.TypeOf((*MockProviderService)(nil).Get), id)
}
// GetModelByProviderAndName mocks base method.

12
frontend/e2e/providers.spec.ts
View File

@@ -12,7 +12,7 @@ function formInputs(page: import('@playwright/test').Page) {
return {
id: dialog.locator('input[placeholder="例如: openai"]'),
name: dialog.locator('input[placeholder="例如: OpenAI"]'),
apiKey: dialog.locator('input[type="password"]'),
apiKey: dialog.locator('input[placeholder="sk-..."]'),
baseUrl: dialog.locator('input[placeholder="例如: https://api.openai.com/v1"]'),
protocol: dialog.locator('.t-select'),
saveBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '保存' }),
@@ -66,9 +66,6 @@ test.describe('供应商管理', () => {
await responsePromise
await expect(page.locator('.t-table__body').getByText('Before Edit')).toBeVisible({ timeout: 5000 })
await inputs.cancelBtn.click()
await expect(page.locator('.t-dialog:visible')).not.toBeVisible({ timeout: 3000 })
await page.locator('.t-table__body button:has-text("编辑")').first().click()
await expect(page.locator('.t-dialog:visible')).toBeVisible()
@@ -97,9 +94,6 @@ test.describe('供应商管理', () => {
await page.waitForSelector('.t-select__dropdown', { state: 'hidden', timeout: 3000 })
await inputs.saveBtn.click()
await expect(page.locator('.t-table__body').getByText('To Delete')).toBeVisible({ timeout: 10000 })
await inputs.cancelBtn.click()
await expect(page.locator('.t-dialog:visible')).not.toBeVisible({ timeout: 3000 })
await page.locator('.t-table__body button:has-text("删除")').first().click()
await expect(page.getByText('确定要删除这个供应商吗？')).toBeVisible()
@@ -107,7 +101,7 @@ test.describe('供应商管理', () => {
await expect(page.locator('.t-table__body').getByText('To Delete')).not.toBeVisible({ timeout: 5000 })
})
test('应正确脱敏显示 API Key', async ({ page }) => {
test('应正确显示完整 API Key', async ({ page }) => {
const testId = nextId()
await page.getByRole('button', { name: '添加供应商' }).click()
await expect(page.locator('.t-dialog:visible')).toBeVisible()
@@ -123,6 +117,6 @@ test.describe('供应商管理', () => {
await inputs.saveBtn.click()
await expect(page.locator('.t-table__body').getByText('Mask Test')).toBeVisible({ timeout: 10000 })
await expect(page.locator('.t-table__body')).toContainText('****wxyz')
await expect(page.locator('.t-table__body')).toContainText('sk_abcdefghijklmnopqrstuvwxyz')
})
})

18
frontend/e2e/validation.spec.ts
View File

@@ -5,7 +5,7 @@ function formInputs(page: import('@playwright/test').Page) {
return {
id: dialog.locator('input[placeholder="例如: openai"]'),
name: dialog.locator('input[placeholder="例如: OpenAI"]'),
apiKey: dialog.locator('input[type="password"]'),
apiKey: dialog.locator('input[placeholder="sk-..."]'),
baseUrl: dialog.locator('input[placeholder="例如: https://api.openai.com/v1"]'),
saveBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '保存' }),
cancelBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '取消' }),
@@ -20,7 +20,7 @@ test.describe('供应商表单验证', () => {
test('应显示必填字段验证', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click()
await expect(page.locator('.t-dialog')).toBeVisible()
await expect(page.locator('.t-dialog:visible')).toBeVisible()
await formInputs(page).saveBtn.click()
@@ -32,7 +32,7 @@ test.describe('供应商表单验证', () => {
test('应验证URL格式', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click()
await expect(page.locator('.t-dialog')).toBeVisible()
await expect(page.locator('.t-dialog:visible')).toBeVisible()
const inputs = formInputs(page)
await inputs.id.fill('test_url')
@@ -46,17 +46,17 @@ test.describe('供应商表单验证', () => {
test('取消后表单应重置', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click()
await expect(page.locator('.t-dialog')).toBeVisible()
await expect(page.locator('.t-dialog:visible')).toBeVisible()
let inputs = formInputs(page)
await inputs.id.fill('should_be_reset')
await inputs.name.fill('Should Be Reset')
await inputs.cancelBtn.click()
await expect(page.locator('.t-dialog')).not.toBeVisible()
await expect(page.locator('.t-dialog:visible')).not.toBeVisible()
await page.getByRole('button', { name: '添加供应商' }).click()
await expect(page.locator('.t-dialog')).toBeVisible()
await expect(page.locator('.t-dialog:visible')).toBeVisible()
inputs = formInputs(page)
await expect(inputs.id).toHaveValue('')
@@ -65,11 +65,11 @@ test.describe('供应商表单验证', () => {
test('快速连续点击只打开一个对话框', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click()
await expect(page.locator('.t-dialog')).toBeVisible()
await expect(page.locator('.t-dialog:visible')).toBeVisible()
expect(await page.locator('.t-dialog').count()).toBe(1)
expect(await page.locator('.t-dialog:visible').count()).toBe(1)
await formInputs(page).cancelBtn.click()
await expect(page.locator('.t-dialog')).not.toBeVisible()
await expect(page.locator('.t-dialog:visible')).not.toBeVisible()
})
})

3
frontend/src/__tests__/components/ModelForm.test.tsx
View File

@@ -125,9 +125,6 @@ describe('ModelForm', () => {
const dialog = getDialog();
expect(within(dialog).getByText('编辑模型')).toBeInTheDocument();
// Check that unified ID field is displayed
expect(within(dialog).getByText('统一模型 ID')).toBeInTheDocument();
// Check model name input
const modelNameInput = within(dialog).getByPlaceholderText('例如: gpt-4o') as HTMLInputElement;
expect(modelNameInput.value).toBe('gpt-4o');

7
frontend/src/__tests__/components/ProviderForm.test.tsx
View File

@@ -63,13 +63,16 @@ describe('ProviderForm', () => {
const baseUrlInput = within(dialog).getByPlaceholderText('例如: https://api.openai.com/v1') as HTMLInputElement;
expect(baseUrlInput.value).toBe('https://api.openai.com/v1');
const apiKeyInput = within(dialog).getByPlaceholderText('sk-...') as HTMLInputElement;
expect(apiKeyInput.value).toBe('sk-old-key');
});
it('shows API Key label variant in edit mode', () => {
it('shows API Key label in edit mode', () => {
render(<ProviderForm {...defaultProps} provider={mockProvider} />);
const dialog = getDialog();
expect(within(dialog).getByText('API Key（留空则不修改）')).toBeInTheDocument();
expect(within(dialog).getByText('API Key')).toBeInTheDocument();
});
it('shows validation error messages for required fields', async () => {

13
frontend/src/__tests__/components/ProviderTable.test.tsx
View File

@@ -1,4 +1,4 @@
import { render, screen, fireEvent } from '@testing-library/react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect, vi } from 'vitest';
import { ProviderTable } from '@/pages/Providers/ProviderTable';
@@ -48,19 +48,18 @@ const defaultProps = {
};
describe('ProviderTable', () => {
it('renders provider list with name, baseUrl, masked apiKey, and status tags', () => {
it('renders provider list with name, baseUrl, apiKey, and status tags', () => {
render(<ProviderTable {...defaultProps} />);
expect(screen.getByText('供应商列表')).toBeInTheDocument();
// Check that provider names appear (they will appear in both name column and potentially protocol column)
expect(screen.getAllByText('OpenAI').length).toBeGreaterThan(0);
expect(screen.getByText('https://api.openai.com/v1')).toBeInTheDocument();
expect(screen.getByText('****5678')).toBeInTheDocument();
expect(screen.getByText('sk-abcdefgh12345678')).toBeInTheDocument();
expect(screen.getAllByText('Anthropic').length).toBeGreaterThan(0);
expect(screen.getByText('https://api.anthropic.com')).toBeInTheDocument();
expect(screen.getByText('****test')).toBeInTheDocument();
expect(screen.getByText('sk-ant-test')).toBeInTheDocument();
const enabledTags = screen.getAllByText('启用');
const disabledTags = screen.getAllByText('禁用');
@@ -77,7 +76,7 @@ describe('ProviderTable', () => {
expect(container.querySelector('.t-card__body')).toBeInTheDocument();
});
it('renders short api keys fully masked', () => {
it('renders short api keys directly', () => {
const shortKeyProvider: Provider[] = [
{
...mockProviders[0],
@@ -88,7 +87,7 @@ describe('ProviderTable', () => {
];
render(<ProviderTable {...defaultProps} providers={shortKeyProvider} />);
expect(screen.getByText('****')).toBeInTheDocument();
expect(screen.getByText('ab')).toBeInTheDocument();
});
it('calls onAdd when clicking "添加供应商" button', async () => {

1
frontend/src/main.tsx
View File

@@ -1,6 +1,7 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import 'tdesign-react/es/style/index.css'
import 'tdesign-react/es/_util/react-19-adapter'
import './index.scss'
import App from './App'

14
frontend/src/pages/Providers/ModelForm.tsx
View File

@@ -14,7 +14,7 @@ interface ModelFormProps {
model?: Model;
providerId: string;
providers: Provider[];
onSave: (values: ModelFormValues) => void;
onSave: (values: ModelFormValues) => Promise<void> | void;
onCancel: () => void;
loading: boolean;
}
@@ -63,6 +63,9 @@ export function ModelForm({
<Dialog
header={isEdit ? '编辑模型' : '添加模型'}
visible={open}
closeOnOverlayClick={false}
closeOnEscKeydown={false}
lazy={false}
onConfirm={() => { form?.submit(); return false; }}
onClose={onCancel}
confirmLoading={loading}
@@ -70,15 +73,6 @@ export function ModelForm({
cancelBtn="取消"
>
<Form form={form} layout="vertical" onSubmit={handleSubmit}>
{isEdit && model?.unifiedId && (
<Form.FormItem label="统一模型 ID">
<Input value={model.unifiedId} disabled />
<div style={{ color: '#999', fontSize: 12, marginTop: 4 }}>
格式：provider_id/model_name
</div>
</Form.FormItem>
)}
<Form.FormItem
label="供应商"
name="providerId"

13
frontend/src/pages/Providers/ProviderForm.tsx
View File

@@ -15,7 +15,7 @@ interface ProviderFormValues {
interface ProviderFormProps {
open: boolean;
provider?: Provider;
onSave: (values: ProviderFormValues) => void;
onSave: (values: ProviderFormValues) => Promise<void> | void;
onCancel: () => void;
loading: boolean;
}
@@ -36,7 +36,7 @@ export function ProviderForm({
form.setFieldsValue({
id: provider.id,
name: provider.name,
apiKey: '',
apiKey: provider.apiKey,
baseUrl: provider.baseUrl,
protocol: provider.protocol,
enabled: provider.enabled,
@@ -59,6 +59,9 @@ export function ProviderForm({
<Dialog
header={isEdit ? '编辑供应商' : '添加供应商'}
visible={open}
closeOnOverlayClick={false}
closeOnEscKeydown={false}
lazy={false}
onConfirm={() => { form?.submit(); return false; }}
onClose={onCancel}
confirmLoading={loading}
@@ -75,11 +78,11 @@ export function ProviderForm({
</Form.FormItem>
<Form.FormItem
label={isEdit ? 'API Key（留空则不修改）' : 'API Key'}
label="API Key"
name="apiKey"
rules={isEdit ? [] : [{ required: true, message: '请输入 API Key' }]}
rules={[{ required: true, message: '请输入 API Key' }]}
>
<Input type="password" placeholder="sk-..." autocomplete="current-password" />
<Input placeholder="sk-..." />
</Form.FormItem>
<Form.FormItem

14
frontend/src/pages/Providers/ProviderTable.tsx
View File

@@ -1,4 +1,4 @@
import { Button, Table, Tag, Popconfirm, Space, Card, Tooltip } from 'tdesign-react';
import { Button, Table, Tag, Popconfirm, Space, Card } from 'tdesign-react';
import type { PrimaryTableCol } from 'tdesign-react/es/table/type';
import type { Provider, Model } from '@/types';
import { ModelTable } from './ModelTable';
@@ -13,12 +13,6 @@ interface ProviderTableProps {
onEditModel: (model: Model) => void;
}
function maskApiKey(key: string | null | undefined): string {
if (!key) return '****';
if (key.length <= 4) return '****';
return `****${key.slice(-4)}`;
}
export function ProviderTable({
providers,
loading,
@@ -53,13 +47,7 @@ export function ProviderTable({
{
title: 'API Key',
colKey: 'apiKey',
width: 120,
ellipsis: true,
cell: ({ row }) => (
<Tooltip content={maskApiKey(row.apiKey)}>
<span>{maskApiKey(row.apiKey)}</span>
</Tooltip>
),
},
{
title: '状态',

62
frontend/src/pages/Providers/index.tsx
View File

@@ -1,4 +1,4 @@
import { useState, useEffect } from 'react';
import { useState } from 'react';
import type { Provider, Model, UpdateProviderInput, UpdateModelInput } from '@/types';
import { useProviders, useCreateProvider, useUpdateProvider, useDeleteProvider } from '@/hooks/useProviders';
import { useCreateModel, useUpdateModel } from '@/hooks/useModels';
@@ -20,18 +20,6 @@ export function ProvidersPage() {
const [editingModel, setEditingModel] = useState<Model | undefined>();
const [modelFormProviderId, setModelFormProviderId] = useState('');
useEffect(() => {
if ((createProvider.isSuccess || updateProvider.isSuccess) && providerFormOpen) {
setProviderFormOpen(false);
}
}, [createProvider.isSuccess, updateProvider.isSuccess, providerFormOpen]);
useEffect(() => {
if ((createModel.isSuccess || updateModel.isSuccess) && modelFormOpen) {
setModelFormOpen(false);
}
}, [createModel.isSuccess, updateModel.isSuccess, modelFormOpen]);
return (
<div>
<ProviderTable
@@ -62,16 +50,21 @@ export function ProvidersPage() {
open={providerFormOpen}
provider={editingProvider}
loading={createProvider.isPending || updateProvider.isPending}
onSave={(values) => {
if (editingProvider) {
const input: Partial<UpdateProviderInput> = {};
if (values.name !== editingProvider.name) input.name = values.name;
if (values.apiKey) input.apiKey = values.apiKey;
if (values.baseUrl !== editingProvider.baseUrl) input.baseUrl = values.baseUrl;
if (values.enabled !== editingProvider.enabled) input.enabled = values.enabled;
updateProvider.mutate({ id: editingProvider.id, input });
} else {
createProvider.mutate(values);
onSave={async (values) => {
try {
if (editingProvider) {
const input: Partial<UpdateProviderInput> = {};
if (values.name !== editingProvider.name) input.name = values.name;
if (values.apiKey !== editingProvider.apiKey) input.apiKey = values.apiKey;
if (values.baseUrl !== editingProvider.baseUrl) input.baseUrl = values.baseUrl;
if (values.enabled !== editingProvider.enabled) input.enabled = values.enabled;
await updateProvider.mutateAsync({ id: editingProvider.id, input });
} else {
await createProvider.mutateAsync(values);
}
setProviderFormOpen(false);
} catch {
// 错误已由 hooks 的 onError 处理
}
}}
onCancel={() => setProviderFormOpen(false)}
@@ -83,15 +76,20 @@ export function ProvidersPage() {
providerId={modelFormProviderId}
providers={providers}
loading={createModel.isPending || updateModel.isPending}
onSave={(values) => {
if (editingModel) {
const input: Partial<UpdateModelInput> = {};
if (values.providerId !== editingModel.providerId) input.providerId = values.providerId;
if (values.modelName !== editingModel.modelName) input.modelName = values.modelName;
if (values.enabled !== editingModel.enabled) input.enabled = values.enabled;
updateModel.mutate({ id: editingModel.id, input });
} else {
createModel.mutate(values);
onSave={async (values) => {
try {
if (editingModel) {
const input: Partial<UpdateModelInput> = {};
if (values.providerId !== editingModel.providerId) input.providerId = values.providerId;
if (values.modelName !== editingModel.modelName) input.modelName = values.modelName;
if (values.enabled !== editingModel.enabled) input.enabled = values.enabled;
await updateModel.mutateAsync({ id: editingModel.id, input });
} else {
await createModel.mutateAsync(values);
}
setModelFormOpen(false);
} catch {
// 错误已由 hooks 的 onError 处理
}
}}
onCancel={() => setModelFormOpen(false)}

2
openspec/config.yaml
View File

@@ -8,7 +8,7 @@ context: |
- 新增代码优先复用已有组件、工具、依赖库，不引入新依赖
- 新增的逻辑必须编写完善的测试，并保证测试的正确性，不允许跳过任何测试
- backend是使用go开发的后端，阅读backend/README.md了解项目架构，优先使用公共组件实现功能逻辑（优先级：官方库>主流三方库>项目公共工具>自行实现）
- frontend是基于bun+vite+typescript开发的前端，严禁使用pnpm、npm
- frontend是基于bun+vite+typescript开发的前端，使用bun作为唯一包管理器，严禁使用pnpm、npm
- Git提交: 仅中文; 格式"类型: 简短描述", 类型: feat/fix/refactor/docs/style/test/chore; 多行描述空行后写详细说明
- 禁止创建git操作task
- 积极使用subagents精心设计并行任务，节省上下文空间，加速任务执行

78
openspec/specs/frontend/spec.md
View File

@@ -15,7 +15,7 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
- **WHEN** 加载供应商管理页面
- **THEN** 前端 SHALL 使用 TDesign Table 显示所有已配置供应商
- **THEN** 每个供应商 SHALL 显示 name、base_url 和 enabled 状态（使用 Tag 组件）
- **THEN** API Key SHALL 被脱敏显示（掩码处理）
- **THEN** API Key SHALL 显示完整值（不进行掩码处理）
- **THEN** 表格 SHALL 支持展开行以显示关联模型
#### Scenario: 表格列宽约束
@@ -23,7 +23,7 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
- **WHEN** 渲染供应商表格
- **THEN** 名称列 SHALL 固定宽度 180px 并启用 ellipsis（超长文本显示省略号，hover 显示 Tooltip）
- **THEN** Base URL 列 SHALL 不设固定宽度（浮动填充剩余空间）并启用 ellipsis + Tooltip
- **THEN** API Key 列 SHALL 固定宽度 120px 并启用 ellipsis
- **THEN** API Key 列 SHALL 不设固定宽度（浮动填充剩余空间）并启用 ellipsis + Tooltip
- **THEN** 状态列 SHALL 固定宽度 80px
- **THEN** 操作列 SHALL 固定宽度 160px
@@ -37,18 +37,28 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
- **WHEN** 用户点击"添加供应商"按钮
- **THEN** 前端 SHALL 使用 TDesign Dialog + Form 显示输入表单
- **THEN** 表单 SHALL 包含 id、name、api_key、base_url 字段，带校验规则
- **THEN** Dialog SHALL 禁用蒙版点击关闭（closeOnOverlayClick={false}）
- **THEN** Dialog SHALL 禁用 ESC 键关闭（closeOnEscKeydown={false}）
- **THEN** Dialog SHALL 设置 lazy={false} 禁用懒加载
- **WHEN** 用户提交包含有效数据的表单
- **THEN** 前端 SHALL 通过 useMutation 调用创建 API
- **THEN** 前端 SHALL 通过 mutateAsync 调用创建 API
- **THEN** 成功后 SHALL 关闭 Dialog 并刷新供应商列表
- **THEN** 失败 SHALL 显示错误提示
- **THEN** 失败 SHALL 保持 Dialog 打开并显示错误提示（MessagePlugin.error）
#### Scenario: 编辑现有供应商
- **WHEN** 用户点击供应商的"编辑"按钮
- **THEN** 前端 SHALL 使用 TDesign Dialog + Form 显示预填充数据的表单
- **THEN** API Key SHALL 回显当前值（完整值）
- **THEN** API Key 输入框 SHALL 为普通文本输入（不使用 password 类型）
- **THEN** API Key 字段 SHALL 始终为必填
- **THEN** Dialog SHALL 禁用蒙版点击关闭（closeOnOverlayClick={false}）
- **THEN** Dialog SHALL 禁用 ESC 键关闭（closeOnEscKeydown={false}）
- **THEN** Dialog SHALL 设置 lazy={false} 禁用懒加载
- **WHEN** 用户提交包含更新数据的表单
- **THEN** 前端 SHALL 通过 useMutation 调用更新 API
- **THEN** 前端 SHALL 通过 mutateAsync 调用更新 API
- **THEN** 成功后 SHALL 关闭 Dialog 并刷新供应商列表
- **THEN** 失败 SHALL 保持 Dialog 打开并显示错误提示（MessagePlugin.error）
#### Scenario: 删除供应商
@@ -81,19 +91,25 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
- **THEN** provider_id SHALL 自动关联当前供应商
- **THEN** 供应商选择 SHALL 使用 `options` 属性
- **THEN** 创建表单 SHALL NOT 包含 ID 输入框（后端自动生成 UUID）
- **THEN** Dialog SHALL 禁用蒙版点击关闭（closeOnOverlayClick={false}）
- **THEN** Dialog SHALL 禁用 ESC 键关闭（closeOnEscKeydown={false}）
- **WHEN** 用户提交表单
- **THEN** 前端 SHALL 通过 useMutation 调用创建 API
- **THEN** 成功后 SHALL 刷新模型列表
- **THEN** 前端 SHALL 通过 mutateAsync 调用创建 API
- **THEN** 成功后 SHALL 关闭 Dialog 并刷新模型列表
- **THEN** 失败 SHALL 保持 Dialog 打开并显示错误提示（MessagePlugin.error）
#### Scenario: 编辑模型
- **WHEN** 用户点击模型的"编辑"
- **THEN** 前端 SHALL 显示编辑表单
- **THEN** 编辑表单 SHALL 显示统一模型 ID（只读）
- **THEN** ID 字段 SHALL 为禁用状态
- **THEN** 编辑表单 SHALL NOT 包含统一模型 ID 字段
- **THEN** Dialog SHALL 禁用蒙版点击关闭（closeOnOverlayClick={false}）
- **THEN** Dialog SHALL 禁用 ESC 键关闭（closeOnEscKeydown={false}）
- **THEN** Dialog SHALL 设置 lazy={false} 禁用懒加载
- **WHEN** 用户提交表单
- **THEN** 前端 SHALL 通过 useMutation 调用更新 API
- **THEN** 成功后 SHALL 刷新模型列表
- **THEN** 前端 SHALL 通过 mutateAsync 调用更新 API
- **THEN** 成功后 SHALL 关闭 Dialog 并刷新模型列表
- **THEN** 失败 SHALL 保持 Dialog 打开并显示错误提示（MessagePlugin.error）
#### Scenario: 删除模型
@@ -124,24 +140,17 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
### Requirement: 显示统一模型 ID
前端 SHALL 在所有显示模型的地方使用统一模型 ID。
前端 SHALL 在所有显示模型的地方使用统一模型 ID。
#### Scenario: 模型表格显示统一 ID 列
#### Scenario: 模型表格显示统一 ID 列
- **WHEN** 渲染模型表格
- **THEN** 表格 SHALL 包含统一模型 ID 列
- **THEN** 统一模型 ID 列 SHALL 显示 `provider_id/model_name` 格式
- **THEN** 统一模型 ID 列 SHALL 启用 ellipsis（超长文本显示省略号，hover 显示 Tooltip）
- **THEN** 统一模型 ID 列 SHALL 固定宽度 250px
- **WHEN** 渲染模型表格
- **THEN** 表格 SHALL 包含统一模型 ID 列
- **THEN** 统一模型 ID 列 SHALL 显示 `provider_id/model_name` 格式
- **THEN** 统一模型 ID 列 SHALL 启用 ellipsis（超长文本显示省略号，hover 显示 Tooltip）
- **THEN** 统一模型 ID 列 SHALL 固定宽度 250px
#### Scenario: 编辑模型显示统一 ID
- **WHEN** 编辑模型表单
- **THEN** 表单 SHALL 显示统一模型 ID 字段
- **THEN** 统一模型 ID 字段 SHALL 为只读（disabled）
- **THEN** 统一模型 ID 字段 SHALL 显示格式说明 "格式：provider_id/model_name"
#### Scenario: 统一模型 ID 降级显示
#### Scenario: 统一模型 ID 降级显示
- **WHEN** 后端未返回 unified_id 字段
- **THEN** 前端 SHALL 拼接 providerId 和 modelName 显示
@@ -333,6 +342,23 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
- **WHEN** 用户使用浏览器后退按钮
- **THEN** 前端 SHALL 正确导航到上一个页面
### Requirement: React 19 适配器
前端 SHALL 导入 TDesign react-19-adapter 以支持 React 19。
#### Scenario: 导入适配器
- **WHEN** 应用启动
- **THEN** main.tsx SHALL 导入 'tdesign-react/es/_util/react-19-adapter'
- **THEN** MessagePlugin、DialogPlugin 等插件式调用 SHALL 正常工作
#### Scenario: 错误提示显示
- **WHEN** API 请求失败
- **THEN** MessagePlugin.error SHALL 正确渲染错误提示
- **THEN** 错误提示 SHALL 显示在页面顶部（placement: top）
- **THEN** 错误提示 SHALL 在 3 秒后自动消失
### Requirement: 使用 React 和 TypeScript
前端 SHALL 使用 React 和 TypeScript 实现，遵循 strict 模式。

10
openspec/specs/provider-management/spec.md
View File

@@ -37,7 +37,7 @@
- **WHEN** 向 `/api/providers` 发送 POST 请求，携带有效的供应商数据（id, name, api_key, base_url, protocol）
- **THEN** 网关 SHALL 在数据库中创建新的供应商记录
- **THEN** 网关 SHALL 返回创建的供应商，状态码为 201
- **THEN** 网关 SHALL 返回创建的供应商（api_key 为完整值），状态码为 201
- **THEN** 供应商 SHALL 默认启用
- **THEN** protocol 字段 SHALL 为必填项，值为 "openai" 或 "anthropic"
@@ -99,8 +99,8 @@
- **WHEN** 向 `/api/providers` 发送 GET 请求
- **THEN** 网关 SHALL 返回所有供应商的列表
- **THEN** 每个供应商 SHALL 包含 id, name, api_key（已掩码）, base_url, protocol, enabled, created_at, updated_at
- **THEN** api_key SHALL 被掩码（仅显示最后 4 个字符）
- **THEN** 每个供应商 SHALL 包含 id, name, api_key（完整值）, base_url, protocol, enabled, created_at, updated_at
- **THEN** api_key SHALL 返回完整值（不进行掩码处理）
**变更说明：** 数据访问从 config 包迁移到 ProviderRepository。API 接口保持不变。
@@ -113,7 +113,7 @@
- **WHEN** 向 `/api/providers/:id` 发送 GET 请求，携带有效的供应商 ID
- **THEN** 网关 SHALL 返回供应商详情
- **THEN** SHALL 包含 protocol 字段
- **THEN** api_key SHALL 被掩码
- **THEN** api_key SHALL 返回完整值（不进行掩码处理）
#### Scenario: 获取不存在的供应商
@@ -130,7 +130,7 @@
- **WHEN** 向 `/api/providers/:id` 发送 PUT 请求，携带有效的供应商数据
- **THEN** 网关 SHALL 更新数据库中的供应商记录
- **THEN** 网关 SHALL 返回更新后的供应商
- **THEN** 网关 SHALL 返回更新后的供应商（api_key 为完整值）
- **THEN** 更新 SHALL 支持修改 protocol 字段
**变更说明：** 通过 ProviderService 和 ProviderRepository 实现。API 接口保持不变。