apiskill 0.1.0

package/src/AddApiDialog.tsx

@@ -0,0 +1,590 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { FormEvent } from 'react';
+import { AlertCircle, Check, ClipboardCopy, Plus, Save, Trash2 } from 'lucide-react';
+import {
+  createManualApiCliTemplate,
+  formatManualApiCliConfig,
+  normalizeManualApiOperationConfig,
+  parseManualApiCliText,
+} from './manualApiConfig';
+import type { ManualApiFieldConfig, ManualApiOperationConfig, ManualApiResponseConfig } from './manualApiConfig';
+import type { HttpMethod } from './types';
+
+type AddApiDialogProps = {
+  selectedVersionId: string;
+  saving: boolean;
+  initialConfig?: ManualApiOperationConfig;
+  onClose: () => void;
+  onSave: (config: ManualApiOperationConfig) => void;
+};
+
+const HTTP_METHODS: HttpMethod[] = ['get', 'post', 'put', 'delete', 'patch', 'options', 'head'];
+const FIELD_TYPES = ['string', 'number', 'integer', 'boolean', 'array', 'object'];
+const PARAM_LOCATIONS: Array<NonNullable<ManualApiFieldConfig['location']>> = ['query', 'path', 'header', 'cookie'];
+
+export function AddApiDialog({ selectedVersionId, saving, initialConfig, onClose, onSave }: AddApiDialogProps) {
+  const initial = useMemo(() => initialConfig ?? parseManualApiCliText(createManualApiCliTemplate()), [initialConfig]);
+  const [method, setMethod] = useState<HttpMethod>(initial.method);
+  const [path, setPath] = useState(initial.path);
+  const [summary, setSummary] = useState(initial.summary);
+  const [operationId, setOperationId] = useState(initial.operationId ?? '');
+  const [tags, setTags] = useState((initial.tags ?? []).join(','));
+  const [description, setDescription] = useState(initial.description ?? '');
+  const [requestBodyRequired, setRequestBodyRequired] = useState(Boolean(initial.requestBody?.required));
+  const [requestContentType, setRequestContentType] = useState(initial.requestBody?.contentType || 'application/json');
+  const [parameters, setParameters] = useState<ManualApiFieldConfig[]>(initial.parameters?.length ? initial.parameters : [emptyManualField('query')]);
+  const [bodyFields, setBodyFields] = useState<ManualApiFieldConfig[]>(initial.requestBody?.fields?.length ? initial.requestBody.fields : [emptyManualField('body')]);
+  const [responses, setResponses] = useState<ManualApiResponseConfig[]>(initial.responses?.length ? initial.responses : [emptyManualResponse()]);
+  const [cliText, setCliText] = useState(() => formatManualApiCliConfig(initial));
+  const [cliCopied, setCliCopied] = useState(false);
+  const [validationErrors, setValidationErrors] = useState<string[]>([]);
+  const skipNextCliSync = useRef(false);
+  const cliEditorRef = useRef<HTMLTextAreaElement | null>(null);
+
+  const modeLabel = initialConfig ? '编辑当前接口' : selectedVersionId ? '追加到当前版本' : '保存为新版本';
+  const formConfig = useMemo(
+    () =>
+      buildFormConfig({
+        method,
+        path,
+        summary,
+        operationId,
+        tags,
+        description,
+        requestBodyRequired,
+        requestContentType,
+        parameters,
+        bodyFields,
+        responses,
+      }),
+    [bodyFields, description, method, operationId, parameters, path, requestBodyRequired, requestContentType, responses, summary, tags],
+  );
+
+  useEffect(() => {
+    if (skipNextCliSync.current) {
+      skipNextCliSync.current = false;
+      return;
+    }
+    setCliText(formatCliDraft(formConfig));
+  }, [formConfig]);
+
+  useEffect(() => {
+    const editor = cliEditorRef.current;
+    if (!editor) return;
+    const style = window.getComputedStyle(editor);
+    const lineHeight = Number.parseFloat(style.lineHeight) || 18;
+    const padding =
+      (Number.parseFloat(style.paddingTop) || 0) +
+      (Number.parseFloat(style.paddingBottom) || 0) +
+      (Number.parseFloat(style.borderTopWidth) || 0) +
+      (Number.parseFloat(style.borderBottomWidth) || 0);
+    const minHeight = lineHeight * 3 + padding;
+    const maxHeight = lineHeight * 16 + padding;
+
+    editor.style.height = 'auto';
+    editor.style.height = `${Math.min(maxHeight, Math.max(minHeight, editor.scrollHeight))}px`;
+  }, [cliText]);
+
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const result = parseCliConfig(cliText);
+    if (result.errors.length) {
+      setValidationErrors(result.errors);
+      return;
+    }
+    setValidationErrors([]);
+    onSave(result.config);
+  }
+
+  function updateCli(value: string) {
+    setCliText(value);
+    const result = parseCliConfig(value);
+    if (result.errors.length) return;
+    skipNextCliSync.current = true;
+    setValidationErrors([]);
+    hydrateForm(result.config);
+  }
+
+  function hydrateForm(config: ManualApiOperationConfig) {
+    setMethod(config.method);
+    setPath(config.path);
+    setSummary(config.summary);
+    setOperationId(config.operationId ?? '');
+    setTags((config.tags ?? []).join(','));
+    setDescription(config.description ?? '');
+    setRequestBodyRequired(Boolean(config.requestBody?.required));
+    setRequestContentType(config.requestBody?.contentType || 'application/json');
+    setParameters(config.parameters?.length ? config.parameters : [emptyManualField('query')]);
+    setBodyFields(config.requestBody?.fields?.length ? config.requestBody.fields : [emptyManualField('body')]);
+    setResponses(config.responses?.length ? config.responses : [emptyManualResponse()]);
+  }
+
+  function copyCliText() {
+    if (copyTextWithSelection(cliText, cliEditorRef.current)) {
+      markCliCopied();
+      return;
+    }
+    void navigator.clipboard.writeText(cliText).then(markCliCopied).catch(() => undefined);
+  }
+
+  function markCliCopied() {
+    setCliCopied(true);
+    window.setTimeout(() => setCliCopied(false), 1600);
+  }
+
+  return (
+    <div className="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="add-api-title">
+      <form className="api-config-dialog" onSubmit={submit} noValidate>
+        <div className="import-dialog-header">
+          <div>
+            <p className="eyebrow">Manual API Config</p>
+            <h2 id="add-api-title">{initialConfig ? '编辑API配置' : '新增API配置'}</h2>
+          </div>
+          <span className="import-badge running">{modeLabel}</span>
+        </div>
+
+        <div className="api-config-body">
+          {validationErrors.length ? <ValidationSummary errors={validationErrors} /> : null}
+
+          <section className="api-config-section">
+            <div className="section-title-row">
+              <div>
+                <h3>CLI配置</h3>
+                <p>支持紧凑 JSON 或 YAML。CLI 与下方表单保持联动，粘贴有效配置后会自动同步表单。</p>
+              </div>
+              <button type="button" className="secondary-button" onClick={copyCliText}>
+                {cliCopied ? <Check size={15} /> : <ClipboardCopy size={15} />}
+                {cliCopied ? '已复制' : '复制'}
+              </button>
+            </div>
+            <textarea
+              ref={cliEditorRef}
+              className="api-cli-editor"
+              value={cliText}
+              onChange={(event) => updateCli(event.target.value)}
+              rows={3}
+              spellCheck={false}
+            />
+          </section>
+
+              <section className="api-config-section">
+                <div className="section-title-row">
+                  <h3>基础信息</h3>
+                  <code>{selectedVersionId || 'manual-new-version'}</code>
+                </div>
+                <div className="api-config-grid">
+                  <label>
+                    <span>方法 *</span>
+                    <select value={method} onChange={(event) => setMethod(event.target.value as HttpMethod)}>
+                      {HTTP_METHODS.map((item) => (
+                        <option key={item} value={item}>
+                          {item.toUpperCase()}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+                  <label className="span-2">
+                    <span>路径 *</span>
+                    <input value={path} onChange={(event) => setPath(event.target.value)} placeholder="/api/v1/example/{id}" />
+                  </label>
+                  <label>
+                    <span>接口名称 *</span>
+                    <input value={summary} onChange={(event) => setSummary(event.target.value)} placeholder="查询示例详情" />
+                  </label>
+                  <label>
+                    <span>Operation ID</span>
+                    <input value={operationId} onChange={(event) => setOperationId(event.target.value)} placeholder="getExampleDetail" />
+                  </label>
+                  <label>
+                    <span>分组 Tags</span>
+                    <input value={tags} onChange={(event) => setTags(event.target.value)} placeholder="示例,后台管理" />
+                  </label>
+                  <label className="span-all">
+                    <span>说明</span>
+                    <textarea value={description} onChange={(event) => setDescription(event.target.value)} placeholder="接口用途、业务约束、注意事项" />
+                  </label>
+                </div>
+              </section>
+
+              <FieldConfigSection
+                title="参数"
+                description="用于 path / query / header / cookie 参数。body 字段请放到请求体。"
+                fields={parameters}
+                allowLocation
+                onAdd={() => setParameters([...parameters, emptyManualField('query')])}
+                onChange={(index, field) => setParameters(updateAt(parameters, index, field))}
+                onRemove={(index) => setParameters(removeAt(parameters, index, emptyManualField('query')))}
+              />
+
+              <section className="api-config-section">
+                <div className="section-title-row">
+                  <div>
+                    <h3>请求体</h3>
+                    <p>对象字段可以展开配置子字段，也支持用点号声明嵌套字段，例如 user.name。</p>
+                  </div>
+                  <label className="inline-check">
+                    <input type="checkbox" checked={requestBodyRequired} onChange={(event) => setRequestBodyRequired(event.target.checked)} />
+                    必填
+                  </label>
+                </div>
+                <div className="api-config-grid compact">
+                  <label>
+                    <span>Content-Type</span>
+                    <input value={requestContentType} onChange={(event) => setRequestContentType(event.target.value)} />
+                  </label>
+                </div>
+                <FieldRows
+                  fields={bodyFields}
+                  onAdd={() => setBodyFields([...bodyFields, emptyManualField('body')])}
+                  onChange={(index, field) => setBodyFields(updateAt(bodyFields, index, { ...field, location: 'body' }))}
+                  onRemove={(index) => setBodyFields(removeAt(bodyFields, index, emptyManualField('body')))}
+                />
+              </section>
+
+              <section className="api-config-section">
+                <div className="section-title-row">
+                  <div>
+                    <h3>响应</h3>
+                    <p>每个状态码可配置一组响应字段，保存时会写入 OpenAPI responses。</p>
+                  </div>
+                  <button type="button" className="secondary-button" onClick={() => setResponses([...responses, emptyManualResponse()])}>
+                    <Plus size={15} />
+                    状态码
+                  </button>
+                </div>
+                {responses.map((response, responseIndex) => (
+                  <div className="response-config" key={`response-${responseIndex}`}>
+                    <div className="api-config-grid compact">
+                      <label>
+                        <span>状态码 *</span>
+                        <input value={response.status} onChange={(event) => setResponses(updateAt(responses, responseIndex, { ...response, status: event.target.value }))} />
+                      </label>
+                      <label>
+                        <span>描述</span>
+                        <input
+                          value={response.description ?? ''}
+                          onChange={(event) => setResponses(updateAt(responses, responseIndex, { ...response, description: event.target.value }))}
+                        />
+                      </label>
+                      <label>
+                        <span>Content-Type</span>
+                        <input
+                          value={response.contentType ?? 'application/json'}
+                          onChange={(event) => setResponses(updateAt(responses, responseIndex, { ...response, contentType: event.target.value }))}
+                        />
+                      </label>
+                      <button type="button" className="icon-danger-button" onClick={() => setResponses(removeAt(responses, responseIndex, emptyManualResponse()))}>
+                        <Trash2 size={15} />
+                      </button>
+                    </div>
+                    <FieldRows
+                      fields={response.fields?.length ? response.fields : [emptyManualField('body')]}
+                      onAdd={() => setResponses(updateAt(responses, responseIndex, { ...response, fields: [...(response.fields ?? []), emptyManualField('body')] }))}
+                      onChange={(fieldIndex, field) =>
+                        setResponses(updateAt(responses, responseIndex, { ...response, fields: updateAt(response.fields ?? [], fieldIndex, { ...field, location: 'body' }) }))
+                      }
+                      onRemove={(fieldIndex) =>
+                        setResponses(updateAt(responses, responseIndex, { ...response, fields: removeAt(response.fields ?? [], fieldIndex, emptyManualField('body')) }))
+                      }
+                    />
+                  </div>
+                ))}
+              </section>
+        </div>
+
+        <div className="import-dialog-actions">
+          <button className="secondary-button" type="button" onClick={onClose} disabled={saving}>
+            取消
+          </button>
+          <button className="primary-button" type="submit" disabled={saving}>
+            <Save size={16} />
+            {saving ? '保存中' : '保存'}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+function ValidationSummary({ errors }: { errors: string[] }) {
+  return (
+    <div className="api-config-errors">
+      <AlertCircle size={17} />
+      <div>
+        <strong>请补全必填配置</strong>
+        {errors.map((error) => (
+          <p key={error}>{error}</p>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function FieldConfigSection({
+  title,
+  description,
+  fields,
+  allowLocation,
+  onAdd,
+  onChange,
+  onRemove,
+}: {
+  title: string;
+  description: string;
+  fields: ManualApiFieldConfig[];
+  allowLocation?: boolean;
+  onAdd: () => void;
+  onChange: (index: number, field: ManualApiFieldConfig) => void;
+  onRemove: (index: number) => void;
+}) {
+  return (
+    <section className="api-config-section">
+      <div className="section-title-row">
+        <div>
+          <h3>{title}</h3>
+          <p>{description}</p>
+        </div>
+        <button type="button" className="secondary-button" onClick={onAdd}>
+          <Plus size={15} />
+          字段
+        </button>
+      </div>
+      <FieldRows fields={fields} allowLocation={allowLocation} onAdd={onAdd} onChange={onChange} onRemove={onRemove} />
+    </section>
+  );
+}
+
+function FieldRows({
+  fields,
+  allowLocation,
+  onAdd,
+  onChange,
+  onRemove,
+}: {
+  fields: ManualApiFieldConfig[];
+  allowLocation?: boolean;
+  onAdd: () => void;
+  onChange: (index: number, field: ManualApiFieldConfig) => void;
+  onRemove: (index: number) => void;
+}) {
+  return (
+    <div className="field-config-table">
+      <div className={`field-config-head ${allowLocation ? 'with-location' : ''}`}>
+        {allowLocation ? <span>位置</span> : null}
+        <span>字段名</span>
+        <span>类型</span>
+        <span>必填</span>
+        <span>说明</span>
+        <span>枚举</span>
+        <span />
+      </div>
+      {fields.map((field, index) => (
+        <div className="field-config-item" key={`field-${index}`}>
+          <div className={`field-config-row ${allowLocation ? 'with-location' : ''}`}>
+            {allowLocation ? (
+              <select value={field.location ?? 'query'} onChange={(event) => onChange(index, { ...field, location: event.target.value as ManualApiFieldConfig['location'] })}>
+                {PARAM_LOCATIONS.map((item) => (
+                  <option key={item} value={item}>
+                    {item}
+                  </option>
+                ))}
+              </select>
+            ) : null}
+            <input value={field.name} onChange={(event) => onChange(index, { ...field, name: event.target.value })} placeholder="id / user.name" />
+            <select value={field.type || 'string'} onChange={(event) => onChange(index, normalizeFieldType(field, event.target.value))}>
+              {FIELD_TYPES.map((item) => (
+                <option key={item} value={item}>
+                  {item}
+                </option>
+              ))}
+            </select>
+            <label className="field-check">
+              <input type="checkbox" checked={Boolean(field.required)} onChange={(event) => onChange(index, { ...field, required: event.target.checked })} />
+            </label>
+            <input value={field.description ?? ''} onChange={(event) => onChange(index, { ...field, description: event.target.value })} placeholder="字段说明" />
+            <input value={field.enumValue ?? ''} onChange={(event) => onChange(index, { ...field, enumValue: event.target.value })} placeholder="a,b,c" />
+            <button type="button" className="icon-danger-button" onClick={() => onRemove(index)} aria-label="删除字段">
+              <Trash2 size={15} />
+            </button>
+          </div>
+          {field.type === 'object' || field.type === 'array' ? (
+            <div className="child-field-config">
+              <div className="child-field-title">下一级结构</div>
+              <FieldRows
+                fields={field.children?.length ? field.children : [emptyManualField('body')]}
+                onAdd={() => onChange(index, { ...field, children: [...(field.children ?? []), emptyManualField('body')] })}
+                onChange={(childIndex, child) => onChange(index, { ...field, children: updateAt(field.children ?? [], childIndex, child) })}
+                onRemove={(childIndex) => onChange(index, { ...field, children: removeAt(field.children ?? [], childIndex, emptyManualField('body')) })}
+              />
+            </div>
+          ) : null}
+        </div>
+      ))}
+      <button type="button" className="field-add-row" onClick={onAdd}>
+        <Plus size={14} />
+        增加字段
+      </button>
+    </div>
+  );
+}
+
+function buildFormConfig(input: {
+  method: HttpMethod;
+  path: string;
+  summary: string;
+  operationId: string;
+  tags: string;
+  description: string;
+  requestBodyRequired: boolean;
+  requestContentType: string;
+  parameters: ManualApiFieldConfig[];
+  bodyFields: ManualApiFieldConfig[];
+  responses: ManualApiResponseConfig[];
+}): ManualApiOperationConfig {
+  return {
+    method: input.method,
+    path: input.path,
+    summary: input.summary,
+    operationId: input.operationId,
+    tags: input.tags
+      .split(',')
+      .map((item) => item.trim())
+      .filter(Boolean),
+    description: input.description,
+    parameters: input.parameters,
+    requestBody: {
+      required: input.requestBodyRequired,
+      contentType: input.requestContentType,
+      fields: input.bodyFields,
+    },
+    responses: input.responses,
+  };
+}
+
+function parseCliConfig(cliText: string) {
+  try {
+    return validateConfig(parseManualApiCliText(cliText));
+  } catch (error) {
+    return {
+      config: emptyManualConfig(),
+      errors: [error instanceof Error ? error.message : 'CLI 配置解析失败'],
+    };
+  }
+}
+
+function formatCliDraft(config: ManualApiOperationConfig) {
+  return JSON.stringify({ api: config });
+}
+
+function validateConfig(config: ManualApiOperationConfig) {
+  const errors: string[] = [];
+  if (!config.method) errors.push('请选择请求方法');
+  if (!config.path?.trim()) errors.push('请填写接口路径');
+  if (!config.summary?.trim()) errors.push('请填写接口名称');
+
+  validateFields(config.parameters ?? [], '参数', errors);
+  validateFields(config.requestBody?.fields ?? [], '请求体字段', errors);
+  (config.responses ?? []).forEach((response, responseIndex) => {
+    if (!response.status?.trim()) errors.push(`响应 #${responseIndex + 1} 请填写状态码`);
+    validateFields(response.fields ?? [], `响应 ${response.status || `#${responseIndex + 1}`} 字段`, errors);
+  });
+
+  if (errors.length) return { config, errors };
+
+  try {
+    return { config: normalizeManualApiOperationConfig(config), errors: [] };
+  } catch (error) {
+    return {
+      config,
+      errors: [error instanceof Error ? error.message : '接口配置校验失败'],
+    };
+  }
+}
+
+function validateFields(fields: ManualApiFieldConfig[], label: string, errors: string[], parent = '') {
+  fields.forEach((field, index) => {
+    const fieldLabel = `${label}${parent ? ` ${parent}` : ''} #${index + 1}`;
+    if (!hasMeaningfulField(field)) return;
+    if (!field.name?.trim()) errors.push(`${fieldLabel} 请填写字段名`);
+    if (field.type === 'object' || field.type === 'array') validateFields(field.children ?? [], label, errors, field.name || `#${index + 1}`);
+  });
+}
+
+function copyTextWithSelection(value: string, preferredTextarea?: HTMLTextAreaElement | null) {
+  if (preferredTextarea) {
+    preferredTextarea.focus();
+    preferredTextarea.select();
+    return document.execCommand('copy');
+  }
+
+  const textarea = document.createElement('textarea');
+  textarea.value = value;
+  textarea.setAttribute('readonly', 'true');
+  textarea.style.position = 'fixed';
+  textarea.style.left = '-9999px';
+  textarea.style.top = '0';
+  document.body.appendChild(textarea);
+  textarea.focus();
+  textarea.select();
+
+  try {
+    return document.execCommand('copy');
+  } finally {
+    document.body.removeChild(textarea);
+  }
+}
+
+function hasMeaningfulField(field: ManualApiFieldConfig) {
+  return Boolean(
+    field.name?.trim() ||
+      field.description?.trim() ||
+      field.enumValue?.trim() ||
+      field.defaultValue?.trim() ||
+      field.required ||
+      field.children?.some(hasMeaningfulField),
+  );
+}
+
+function normalizeFieldType(field: ManualApiFieldConfig, type: string): ManualApiFieldConfig {
+  if (type === 'object' || type === 'array') return { ...field, type, children: field.children?.length ? field.children : [emptyManualField('body')] };
+  return { ...field, type, children: undefined };
+}
+
+function emptyManualConfig(): ManualApiOperationConfig {
+  return {
+    method: 'get',
+    path: '',
+    summary: '',
+    responses: [emptyManualResponse()],
+  };
+}
+
+function emptyManualField(location: ManualApiFieldConfig['location'] = 'query'): ManualApiFieldConfig {
+  return {
+    name: '',
+    location,
+    required: false,
+    type: 'string',
+    description: '',
+    enumValue: '',
+  };
+}
+
+function emptyManualResponse(): ManualApiResponseConfig {
+  return {
+    status: '200',
+    description: 'Success',
+    contentType: 'application/json',
+    fields: [emptyManualField('body')],
+  };
+}
+
+function updateAt<T>(items: T[], index: number, value: T) {
+  if (index >= items.length) return [...items, value];
+  return items.map((item, currentIndex) => (currentIndex === index ? value : item));
+}
+
+function removeAt<T>(items: T[], index: number, fallback: T) {
+  const next = items.filter((_, currentIndex) => currentIndex !== index);
+  return next.length ? next : [fallback];
+}