apiskill 0.1.0 → 0.1.2

package/src/App.tsx

@@ -192,7 +192,7 @@ export function App() {
   const [openedEndpointTabs, setOpenedEndpointTabs] = useState<OpenEndpointTab[]>([]);
   const [tabsCacheReady, setTabsCacheReady] = useState(false);
   const [syncingMode, setSyncingMode] = useState<ImportDialogMode | ''>('');
-  const [activeSourceTab, setActiveSourceTab] = useState<ImportMode>('file');
+  const [activeDocumentTab, setActiveDocumentTab] = useState<ImportDialogMode>('blank');
   const [versions, setVersions] = useState<ImportMeta[]>([]);
   const [selectedVersionId, setSelectedVersionId] = useState('');
   const [selectedVersionMeta, setSelectedVersionMeta] = useState<ImportMeta | undefined>(undefined);
@@ -204,8 +204,8 @@ export function App() {
   const [blankDocTitle, setBlankDocTitle] = useState('API Skill Document');
   const [blankDocVersion, setBlankDocVersion] = useState('1.0.0');
   const [blankDocDescription, setBlankDocDescription] = useState('Created from API Skill blank document.');
-  const [blankDocDialogOpen, setBlankDocDialogOpen] = useState(false);
-  const [blankUpdateVersionId, setBlankUpdateVersionId] = useState('');
+  const [documentDialogOpen, setDocumentDialogOpen] = useState(false);
+  const [documentUpdateVersionId, setDocumentUpdateVersionId] = useState('');
   const [resolvedSourceUrl, setResolvedSourceUrl] = useState('');
   const [docAuthUsername, setDocAuthUsername] = useState('');
   const [docAuthPassword, setDocAuthPassword] = useState('');
@@ -401,20 +401,28 @@ export function App() {
   function applySourceDefaults(meta?: DocumentVersionMeta, document?: SwaggerDocument | null) {
     const sourceTab = sourceTabFromCacheMode(meta?.mode);
     if (sourceTab) {
-      setActiveSourceTab(sourceTab);
+      setActiveDocumentTab(sourceTab);
     }
     if (isImportMode(meta?.mode)) {
       setSourceInput(meta.mode, meta.inputUrl || '');
     }
     if ((meta?.mode === 'document' || meta?.mode === 'manual') && document?.info) {
+      setActiveDocumentTab('blank');
       setBlankDocTitle(document.info.title || 'API Skill Document');
       setBlankDocVersion(document.info.version || '1.0.0');
       setBlankDocDescription(document.info.description || '');
     }
   }
 
-  function getImportUpdateVersionId(mode: ImportMode) {
-    return selectedVersionId && selectedVersion?.mode === mode ? selectedVersionId : '';
+  function getDocumentUpdateVersionId(mode: ImportDialogMode) {
+    if (!documentUpdateVersionId) return '';
+    const targetVersion =
+      versions.find((version) => version.versionId === documentUpdateVersionId) ??
+      (selectedVersionId === documentUpdateVersionId ? selectedVersionMeta : undefined);
+    if (mode === 'blank') {
+      return targetVersion?.mode === 'document' || targetVersion?.mode === 'manual' ? documentUpdateVersionId : '';
+    }
+    return targetVersion?.mode === mode ? documentUpdateVersionId : '';
   }
 
   function setSourceInput(mode: ImportMode, value: string) {
@@ -423,10 +431,11 @@ export function App() {
     else if (mode === 'file') setFileSourceUrl(value);
   }
 
-  function getActiveSourceValue() {
-    if (activeSourceTab === 'crawl') return crawlSourceUrl.trim();
-    if (activeSourceTab === 'curl') return curlSourceText.trim();
-    if (activeSourceTab === 'upload') return uploadFile?.name || '';
+  function getActiveSourceValue(mode: ImportDialogMode = activeDocumentTab) {
+    if (mode === 'blank') return blankDocTitle.trim();
+    if (mode === 'crawl') return crawlSourceUrl.trim();
+    if (mode === 'curl') return curlSourceText.trim();
+    if (mode === 'upload') return uploadFile?.name || '';
     return fileSourceUrl.trim();
   }
 
@@ -437,9 +446,9 @@ export function App() {
   }
 
   function clearActiveSource() {
-    if (activeSourceTab === 'crawl') setCrawlSourceUrl('');
-    else if (activeSourceTab === 'curl') setCurlSourceText('');
-    else if (activeSourceTab === 'upload') {
+    if (activeDocumentTab === 'crawl') setCrawlSourceUrl('');
+    else if (activeDocumentTab === 'curl') setCurlSourceText('');
+    else if (activeDocumentTab === 'upload') {
       setUploadFile(null);
       if (uploadInputRef.current) uploadInputRef.current.value = '';
     } else {
@@ -483,10 +492,10 @@ export function App() {
       return;
     }
     const nextSourceUrl = importInput.input;
-    const matchingVersionId = getImportUpdateVersionId(mode);
-    const targetVersionId = updateVersionId !== undefined ? updateVersionId || undefined : matchingVersionId || undefined;
+    const targetVersionId = updateVersionId || undefined;
     const updating = Boolean(targetVersionId);
 
+    setDocumentDialogOpen(false);
     setSyncingMode(mode);
     setError('');
     setImportDialog({
@@ -576,6 +585,7 @@ export function App() {
         message: updating ? '文档已更新并覆盖原版本' : '文档已解析并保存为独立版本',
         meta: payload.meta,
       });
+      setDocumentUpdateVersionId('');
     } catch (err) {
       const message = err instanceof Error ? err.message : '导入失败，请检查地址或文档格式';
       setError(message);
@@ -600,7 +610,7 @@ export function App() {
       return;
     }
 
-    const targetVersionId = blankUpdateVersionId || undefined;
+    const targetVersionId = getDocumentUpdateVersionId('blank') || undefined;
     const updating = Boolean(targetVersionId);
     setSyncingMode('blank');
     setError('');
@@ -643,8 +653,8 @@ export function App() {
         message: updating ? '文档已更新并覆盖原版本' : '空白文档已创建，可以继续新增 API 配置',
         meta: payload.meta,
       });
-      setBlankDocDialogOpen(false);
-      setBlankUpdateVersionId('');
+      setDocumentDialogOpen(false);
+      setDocumentUpdateVersionId('');
     } catch (err) {
       const message = err instanceof Error ? err.message : '创建文档失败';
       setError(message);
@@ -791,17 +801,12 @@ export function App() {
     const versionMode = version.mode || '';
     if (versionId !== selectedVersionId) {
       await loadCache(versionId);
-      if (versionMode === 'document' || versionMode === 'manual') {
-        setBlankUpdateVersionId(versionId);
-        setBlankDocDialogOpen(true);
-      }
-      return;
-    }
-    applySourceDefaults(version, doc);
-    if (versionMode === 'document' || versionMode === 'manual') {
-      setBlankUpdateVersionId(versionId);
-      setBlankDocDialogOpen(true);
+    } else {
+      applySourceDefaults(version, doc);
     }
+    setActiveDocumentTab(isImportMode(versionMode) ? versionMode : 'blank');
+    setDocumentUpdateVersionId(versionId);
+    setDocumentDialogOpen(true);
     setError('');
   }
 
@@ -893,7 +898,7 @@ export function App() {
     const schemas = Object.keys(schemaSource).length;
     return { paths, schemas, endpoints: endpoints.length, tags: tags.length };
   }, [doc, endpoints.length, tags.length]);
-  const activeSourceCanUpdate = Boolean(getImportUpdateVersionId(activeSourceTab));
+  const activeDocumentCanUpdate = Boolean(getDocumentUpdateVersionId(activeDocumentTab));
 
   if (loadState === 'loading') {
     return (
@@ -955,136 +960,30 @@ export function App() {
         </div>
       </header>
 
-      <section className="source-panel">
-        <div className="source-panel-header">
-          <div className="source-tabs" role="tablist" aria-label="文档同步方式">
-            <button
-              className={activeSourceTab === 'file' ? 'active' : ''}
-              onClick={() => setActiveSourceTab('file')}
-              role="tab"
-              aria-selected={activeSourceTab === 'file'}
-            >
-              <RefreshCcw size={15} />
-              在线文档
-            </button>
-            <button
-              className={activeSourceTab === 'crawl' ? 'active' : ''}
-              onClick={() => setActiveSourceTab('crawl')}
-              role="tab"
-              aria-selected={activeSourceTab === 'crawl'}
-            >
-              <Globe2 size={15} />
-              爬取网页
-            </button>
-            <button
-              className={activeSourceTab === 'curl' ? 'active' : ''}
-              onClick={() => setActiveSourceTab('curl')}
-              role="tab"
-              aria-selected={activeSourceTab === 'curl'}
-            >
-              <Send size={15} />
-              执行CURL
-            </button>
-            <button
-              className={activeSourceTab === 'upload' ? 'active' : ''}
-              onClick={() => setActiveSourceTab('upload')}
-              role="tab"
-              aria-selected={activeSourceTab === 'upload'}
-            >
-              <FileCode2 size={15} />
-              导入文件
-            </button>
-          </div>
-          <div className="source-panel-actions">
-            <button className="secondary-button" onClick={startMockService} disabled={startingMock}>
-              <Server size={16} className={startingMock ? 'spin' : ''} />
-              {startingMock ? '启动中' : '启动MOCK服务'}
-            </button>
-            <button
-              className="secondary-button"
-              onClick={() => {
-                setBlankUpdateVersionId('');
-                setBlankDocDialogOpen(true);
-              }}
-              disabled={Boolean(syncingMode)}
-            >
-              <Braces size={16} />
-              新建文档
-            </button>
-          </div>
+      <section className="source-panel document-toolbar">
+        <div className="document-source-summary">
+          <span>当前文档源</span>
+          <strong>{resolvedSourceUrl || '未加载'}</strong>
+          {mockStatus?.running && mockStatus.mock ? <small>MOCK {mockStatus.mock.url} · {mockStatus.mock.routesCount} routes</small> : null}
         </div>
-        <div className="source-form">
-          {activeSourceTab === 'upload' ? (
-            <label key="source-upload-field" className="source-file-picker">
-              <FileCode2 size={16} />
-              <input
-                key="source-upload-input"
-                ref={uploadInputRef}
-                type="file"
-                accept=".json,.yaml,.yml,application/json,application/yaml,text/yaml,text/x-yaml"
-                onChange={(event) => setUploadFile(event.target.files?.[0] ?? null)}
-              />
-              <span>{uploadFile ? uploadFile.name : '选择 JSON / YAML 文件'}</span>
-            </label>
-          ) : (
-            <label key="source-text-field" className={`source-input ${activeSourceTab === 'curl' ? 'source-input-multiline' : ''}`}>
-              <Link2 size={16} />
-              {activeSourceTab === 'curl' ? (
-                <textarea
-                  key="source-curl-input"
-                  value={curlSourceText}
-                  onChange={(event) => setCurlSourceText(event.target.value)}
-                  placeholder="粘贴 curl 命令，例如 curl 'https://example.com/openapi.yaml' -H 'accept: application/yaml'"
-                  spellCheck={false}
-                />
-              ) : (
-                <input
-                  key="source-url-input"
-                  value={activeSourceTab === 'file' ? fileSourceUrl : crawlSourceUrl}
-                  onChange={(event) => {
-                    if (activeSourceTab === 'file') setFileSourceUrl(event.target.value);
-                    else setCrawlSourceUrl(event.target.value);
-                  }}
-                  placeholder={
-                    activeSourceTab === 'file'
-                      ? '输入 Swagger/OpenAPI JSON 或 YAML 文件地址'
-                      : '输入 Swagger UI / Knife4j / Redoc 在线文档页地址'
-                  }
-                />
-              )}
-            </label>
-          )}
+        <div className="source-panel-actions">
+          <button className="secondary-button" onClick={startMockService} disabled={startingMock}>
+            <Server size={16} className={startingMock ? 'spin' : ''} />
+            {startingMock ? '启动中' : '启动MOCK服务'}
+          </button>
           <button
-            className="primary-button"
+            className="secondary-button"
             onClick={() => {
-              void importSpec(activeSourceTab);
+              setDocumentUpdateVersionId('');
+              setActiveDocumentTab('blank');
+              setDocumentDialogOpen(true);
             }}
-            disabled={Boolean(syncingMode) || !getActiveSourceValue()}
+            disabled={Boolean(syncingMode)}
           >
-            {activeSourceTab === 'crawl' ? (
-              <Globe2 size={16} className={syncingMode === 'crawl' ? 'spin' : ''} />
-            ) : activeSourceTab === 'curl' ? (
-              <Send size={16} className={syncingMode === 'curl' ? 'spin' : ''} />
-            ) : activeSourceTab === 'upload' ? (
-              <FileCode2 size={16} className={syncingMode === 'upload' ? 'spin' : ''} />
-            ) : (
-              <RefreshCcw size={16} className={syncingMode === 'file' ? 'spin' : ''} />
-            )}
-            {syncingMode === activeSourceTab ? '处理中' : activeSourceCanUpdate ? '更新' : '确认'}
-          </button>
-          <button className="secondary-button" onClick={clearActiveSource} disabled={Boolean(syncingMode) || !getActiveSourceValue()}>
-            清空
+            <Braces size={16} />
+            新建文档
           </button>
         </div>
-        <div className="source-meta">
-          当前文档源：<span>{resolvedSourceUrl || '未加载'}</span>
-        </div>
-        {mockStatus?.running && mockStatus.mock ? (
-          <div className="source-meta">
-            MOCK服务：<span>{mockStatus.mock.url}</span>
-            <small>{mockStatus.mock.routesCount} routes</small>
-          </div>
-        ) : null}
         {mockMessage ? <div className={`version-message ${mockMessage.includes('失败') || mockMessage.includes('请先') ? 'error' : ''}`}>{mockMessage}</div> : null}
       </section>
 
@@ -1107,22 +1006,40 @@ export function App() {
           onSubmit={submitDocumentAuth}
         />
       ) : null}
-      {blankDocDialogOpen ? (
-        <BlankDocumentDialog
-          updating={Boolean(blankUpdateVersionId)}
+      {documentDialogOpen ? (
+        <DocumentDialog
+          activeTab={activeDocumentTab}
+          updating={activeDocumentCanUpdate}
           title={blankDocTitle}
           version={blankDocVersion}
           description={blankDocDescription}
-          saving={syncingMode === 'blank'}
+          fileSourceUrl={fileSourceUrl}
+          crawlSourceUrl={crawlSourceUrl}
+          curlSourceText={curlSourceText}
+          uploadFile={uploadFile}
+          uploadInputRef={uploadInputRef}
+          saving={syncingMode === activeDocumentTab}
+          onTabChange={setActiveDocumentTab}
           onTitleChange={setBlankDocTitle}
           onVersionChange={setBlankDocVersion}
           onDescriptionChange={setBlankDocDescription}
+          onFileSourceUrlChange={setFileSourceUrl}
+          onCrawlSourceUrlChange={setCrawlSourceUrl}
+          onCurlSourceTextChange={setCurlSourceText}
+          onUploadFileChange={setUploadFile}
+          onClear={clearActiveSource}
           onClose={() => {
-            if (syncingMode === 'blank') return;
-            setBlankDocDialogOpen(false);
-            setBlankUpdateVersionId('');
+            if (syncingMode) return;
+            setDocumentDialogOpen(false);
+            setDocumentUpdateVersionId('');
+          }}
+          onSubmit={() => {
+            if (activeDocumentTab === 'blank') {
+              void createBlankApiDocument();
+              return;
+            }
+            void importSpec(activeDocumentTab, { type: 'none' }, false, getDocumentUpdateVersionId(activeDocumentTab));
           }}
-          onSubmit={createBlankApiDocument}
         />
       ) : null}
       {addApiOpen ? (
@@ -1356,69 +1273,179 @@ function DocumentAuthDialog({
   );
 }
 
-function BlankDocumentDialog({
+function DocumentDialog({
+  activeTab,
   updating,
   title,
   version,
   description,
+  fileSourceUrl,
+  crawlSourceUrl,
+  curlSourceText,
+  uploadFile,
+  uploadInputRef,
   saving,
+  onTabChange,
   onTitleChange,
   onVersionChange,
   onDescriptionChange,
+  onFileSourceUrlChange,
+  onCrawlSourceUrlChange,
+  onCurlSourceTextChange,
+  onUploadFileChange,
+  onClear,
   onClose,
   onSubmit,
 }: {
+  activeTab: ImportDialogMode;
   updating: boolean;
   title: string;
   version: string;
   description: string;
+  fileSourceUrl: string;
+  crawlSourceUrl: string;
+  curlSourceText: string;
+  uploadFile: File | null;
+  uploadInputRef: { current: HTMLInputElement | null };
   saving: boolean;
+  onTabChange: (value: ImportDialogMode) => void;
   onTitleChange: (value: string) => void;
   onVersionChange: (value: string) => void;
   onDescriptionChange: (value: string) => void;
+  onFileSourceUrlChange: (value: string) => void;
+  onCrawlSourceUrlChange: (value: string) => void;
+  onCurlSourceTextChange: (value: string) => void;
+  onUploadFileChange: (value: File | null) => void;
+  onClear: () => void;
   onClose: () => void;
   onSubmit: () => void;
 }) {
+  const tabs: Array<{ id: ImportDialogMode; label: string; icon: typeof Braces }> = [
+    { id: 'blank', label: '空白文档', icon: Braces },
+    { id: 'file', label: '在线文档', icon: RefreshCcw },
+    { id: 'crawl', label: '爬取网页', icon: Globe2 },
+    { id: 'curl', label: '执行 CURL', icon: Send },
+    { id: 'upload', label: '导入文件', icon: FileCode2 },
+  ];
+  const hasValue =
+    activeTab === 'blank'
+      ? Boolean(title.trim())
+      : activeTab === 'file'
+        ? Boolean(fileSourceUrl.trim())
+        : activeTab === 'crawl'
+          ? Boolean(crawlSourceUrl.trim())
+          : activeTab === 'curl'
+            ? Boolean(curlSourceText.trim())
+            : Boolean(uploadFile);
+  const ActiveIcon = tabs.find((tab) => tab.id === activeTab)?.icon ?? Braces;
+
   return (
-    <div className="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="blank-document-title">
-      <div className="auth-dialog">
+    <div className="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="document-dialog-title">
+      <div className="document-dialog">
         <div className="import-dialog-header">
           <div>
             <p className="eyebrow">OpenAPI Document</p>
-            <h2 id="blank-document-title">{updating ? '更新文档' : '新建文档'}</h2>
+            <h2 id="document-dialog-title">{updating ? '更新文档' : '新建文档'}</h2>
           </div>
           <button className="icon-secondary-button" onClick={onClose} aria-label="关闭" disabled={saving}>
             <X size={17} />
           </button>
         </div>
 
-        <div className="blank-document-dialog-body">
-          <label className="source-input">
-            <FileCode2 size={16} />
-            <input
-              value={title}
-              onChange={(event) => onTitleChange(event.target.value)}
-              placeholder="文档名称，例如 Customer Service API"
-              autoFocus
-            />
-          </label>
-          <label className="source-input">
-            <Braces size={16} />
-            <input value={version} onChange={(event) => onVersionChange(event.target.value)} placeholder="文档版本，例如 1.0.0" />
-          </label>
-          <label className="source-input">
-            <Pencil size={16} />
-            <input value={description} onChange={(event) => onDescriptionChange(event.target.value)} placeholder="文档描述，可选" />
-          </label>
+        <div className="document-dialog-tabs" role="tablist" aria-label="新建文档方式">
+          {tabs.map((tab) => {
+            const Icon = tab.icon;
+            return (
+              <button
+                key={tab.id}
+                className={activeTab === tab.id ? 'active' : ''}
+                onClick={() => onTabChange(tab.id)}
+                role="tab"
+                aria-selected={activeTab === tab.id}
+                disabled={saving}
+              >
+                <Icon size={15} />
+                {tab.label}
+              </button>
+            );
+          })}
         </div>
 
-        <div className="import-dialog-actions">
+        <div className="document-dialog-body" role="tabpanel">
+          {activeTab === 'blank' ? (
+            <div className="blank-document-fields">
+              <label className="source-input">
+                <FileCode2 size={16} />
+                <input
+                  value={title}
+                  onChange={(event) => onTitleChange(event.target.value)}
+                  placeholder="文档名称，例如 Customer Service API"
+                  autoFocus
+                />
+              </label>
+              <label className="source-input">
+                <Braces size={16} />
+                <input value={version} onChange={(event) => onVersionChange(event.target.value)} placeholder="文档版本，例如 1.0.0" />
+              </label>
+              <label className="source-input">
+                <Pencil size={16} />
+                <input value={description} onChange={(event) => onDescriptionChange(event.target.value)} placeholder="文档描述，可选" />
+              </label>
+            </div>
+          ) : activeTab === 'upload' ? (
+            <label className="source-file-picker document-file-picker">
+              <FileCode2 size={18} />
+              <input
+                ref={uploadInputRef}
+                type="file"
+                accept=".json,.yaml,.yml,application/json,application/yaml,text/yaml,text/x-yaml"
+                onChange={(event) => onUploadFileChange(event.target.files?.[0] ?? null)}
+              />
+              <span>{uploadFile ? uploadFile.name : '选择 JSON / YAML 文件'}</span>
+              <small>{uploadFile ? '点击可重新选择文件' : '支持 OpenAPI 3.x 与 Swagger 2.0'}</small>
+            </label>
+          ) : (
+            <label className={`source-input document-source-input ${activeTab === 'curl' ? 'source-input-multiline' : ''}`}>
+              <Link2 size={16} />
+              {activeTab === 'curl' ? (
+                <textarea
+                  value={curlSourceText}
+                  onChange={(event) => onCurlSourceTextChange(event.target.value)}
+                  placeholder="粘贴 curl 命令，例如 curl 'https://example.com/openapi.yaml' -H 'accept: application/yaml'"
+                  spellCheck={false}
+                  autoFocus
+                />
+              ) : (
+                <input
+                  value={activeTab === 'file' ? fileSourceUrl : crawlSourceUrl}
+                  onChange={(event) => {
+                    if (activeTab === 'file') onFileSourceUrlChange(event.target.value);
+                    else onCrawlSourceUrlChange(event.target.value);
+                  }}
+                  placeholder={
+                    activeTab === 'file'
+                      ? '输入 Swagger/OpenAPI JSON 或 YAML 文件地址'
+                      : '输入 Swagger UI / Knife4j / Redoc 在线文档页地址'
+                  }
+                  autoFocus
+                />
+              )}
+            </label>
+          )}
+        </div>
+
+        <div className="import-dialog-actions document-dialog-actions">
+          {activeTab !== 'blank' && hasValue ? (
+            <button className="secondary-button clear-document-source" onClick={onClear} disabled={saving}>
+              清空
+            </button>
+          ) : null}
           <button className="secondary-button" onClick={onClose} disabled={saving}>
             取消
           </button>
-          <button className="primary-button" onClick={onSubmit} disabled={saving || !title.trim()}>
-            <Braces size={16} className={saving ? 'spin' : ''} />
-            {saving ? '处理中' : updating ? '更新' : '创建'}
+          <button className="primary-button" onClick={onSubmit} disabled={saving || !hasValue}>
+            <ActiveIcon size={16} className={saving ? 'spin' : ''} />
+            {saving ? '处理中' : updating ? '更新' : activeTab === 'blank' ? '创建' : '确认'}
           </button>
         </div>
       </div>