@becrafter/prompt-manager 0.1.9 → 0.1.11

package/packages/admin-ui/src/components/TerminalView.js

@@ -0,0 +1,25 @@
+export class TerminalView {
+  static getHTML() {
+    return `
+      <div id="terminalArea" class="terminal-area" style="display: none;">
+        <!-- 终端内容区域 -->
+        <div class="terminal-content">
+          <div class="terminal-output" id="terminalOutput">
+            <div class="terminal-welcome">
+              <div class="welcome-icon">🚀</div>
+              <div class="welcome-text">欢迎使用终端</div>
+              <div class="welcome-hint">输入命令并按回车键执行</div>
+            </div>
+          </div>
+          <div class="terminal-input-area">
+            <div class="terminal-prompt">
+              <span class="prompt-symbol">~/ $</span>
+              <input type="text" id="terminalInput" placeholder="输入命令..." autocomplete="off" />
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+

package/packages/admin-ui/src/components/ToolDetailModal.js

@@ -0,0 +1,23 @@
+export class ToolDetailModal {
+  static getHTML() {
+    return `
+      <div id="toolDetailModal" class="tool-detail-modal">
+        <div class="tool-detail-content">
+          <div class="tool-detail-header">
+            <h2 class="tool-detail-title" id="toolDetailName">工具详情</h2>
+            <button class="tool-detail-close" id="toolDetailClose" aria-label="关闭">×</button>
+          </div>
+          <div class="tool-detail-body">
+            <div class="tool-detail-info" id="toolDetailInfo">
+              <!-- 工具基本信息将通过JavaScript动态加载 -->
+            </div>
+            <div class="tool-detail-markdown" id="toolDetailContent">
+              <div class="tool-detail-loading"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+

package/packages/admin-ui/src/components/ToolsArea.js

@@ -0,0 +1,119 @@
+export class ToolsArea {
+  static getHTML() {
+    return `
+      <div id="toolsArea" class="tools-area" style="display: none;">
+        <!-- 工具页面头部 -->
+        <div class="tools-header">
+          <div class="tools-header-left">
+            <h2 class="tools-title">工具管理</h2>
+            <div class="tools-search">
+              <input type="text" id="toolsSearchInput" placeholder="搜索工具名称或描述..." />
+              <button type="button" class="search-clear-btn" id="toolsSearchClear" style="display: none;">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <line x1="18" y1="6" x2="6" y2="18"></line>
+                  <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div class="tools-header-right">
+            <button type="button" class="btn btn-outline" id="toolsUploadBtn">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                <polyline points="17 8 12 3 7 8"></polyline>
+                <line x1="12" y1="3" x2="12" y2="15"></line>
+              </svg>
+              上传工具包
+            </button>
+            <div class="tools-filter">
+              <button type="button" class="filter-btn active" data-filter="all">
+                全部
+              </button>
+              <button type="button" class="filter-btn" data-filter="category">
+                类别
+              </button>
+              <button type="button" class="filter-btn" data-filter="tag">
+                标签
+              </button>
+              <button type="button" class="filter-btn" data-filter="author">
+                作者
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- 工具内容区域 -->
+        <div class="tools-content">
+          <!-- 工具网格视图 -->
+          <div class="tools-grid" id="toolsGrid">
+            <!-- 工具卡片将通过JavaScript动态加载 -->
+          </div>
+          
+          <!-- 聚合视图（类别、标签、作者） -->
+          <div class="tools-aggregated-view" id="toolsAggregatedView" style="display: none;">
+            <!-- 类别聚合视图 -->
+            <div class="aggregated-view" id="categoryView" style="display: none;">
+              <div class="aggregated-sidebar">
+                <div class="aggregated-sidebar-header">
+                  <h3>类别列表</h3>
+                </div>
+                <div class="aggregated-sidebar-list" id="categorySidebar">
+                  <!-- 类别列表将通过JavaScript动态加载 -->
+                </div>
+              </div>
+              <div class="aggregated-content">
+                <div class="aggregated-content-header" id="categoryContentHeader">
+                  <h3>请选择类别</h3>
+                </div>
+                <div class="aggregated-content-grid" id="categoryContentGrid">
+                  <!-- 选中类别的工具将通过JavaScript动态加载 -->
+                </div>
+              </div>
+            </div>
+
+            <!-- 标签聚合视图 -->
+            <div class="aggregated-view" id="tagView" style="display: none;">
+              <div class="aggregated-header">
+                <h3>按标签浏览</h3>
+              </div>
+              <div class="tag-cloud" id="tagCloud">
+                <!-- 标签将通过JavaScript动态加载 -->
+              </div>
+              <div class="tag-tools-list" id="tagToolsList">
+                <!-- 标签对应的工具列表将通过JavaScript动态加载 -->
+              </div>
+            </div>
+
+            <!-- 作者聚合视图 -->
+            <div class="aggregated-view" id="authorView" style="display: none;">
+              <div class="aggregated-sidebar">
+                <div class="aggregated-sidebar-header">
+                  <h3>作者列表</h3>
+                </div>
+                <div class="aggregated-sidebar-list" id="authorSidebar">
+                  <!-- 作者列表将通过JavaScript动态加载 -->
+                </div>
+              </div>
+              <div class="aggregated-content">
+                <div class="aggregated-content-header" id="authorContentHeader">
+                  <h3>请选择作者</h3>
+                </div>
+                <div class="aggregated-content-grid" id="authorContentGrid">
+                  <!-- 选中作者的工具将通过JavaScript动态加载 -->
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 空状态 -->
+          <div class="tools-empty" id="toolsEmpty" style="display: none;">
+            <div class="tools-empty-icon">🔧</div>
+            <div class="tools-empty-text">暂无工具</div>
+            <div class="tools-empty-hint">请上传工具包或添加工具</div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+

package/packages/admin-ui/src/components/ToolsUploadModal.js

@@ -0,0 +1,59 @@
+export class ToolsUploadModal {
+  static getHTML() {
+    return `
+      <div id="toolsUploadModal" class="modal hidden">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h3>上传工具包</h3>
+              <button type="button" class="modal-close" id="toolsUploadCloseBtn">
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                  <path d="M15 5L5 15M5 5L15 15" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </button>
+            </div>
+            <div class="modal-body">
+              <div class="upload-area" id="uploadArea">
+                <div class="upload-content">
+                  <div class="upload-icon">
+                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                      <polyline points="17 8 12 3 7 8"></polyline>
+                      <line x1="12" y1="3" x2="12" y2="15"></line>
+                    </svg>
+                  </div>
+                  <div class="upload-text">
+                    <p class="upload-title">拖拽ZIP文件到此处或点击选择</p>
+                    <p class="upload-subtitle">支持包含 README.md 和 {tool_name}.tool.js 的ZIP格式工具包</p>
+                  </div>
+                  <input type="file" id="fileInput" accept=".zip" style="display: none;" />
+                  <button type="button" class="btn btn-outline" id="selectFileBtn">选择文件</button>
+                </div>
+                <div class="upload-progress" id="uploadProgress" style="display: none;">
+                  <div class="progress-bar">
+                    <div class="progress-fill" id="progressFill"></div>
+                  </div>
+                  <div class="progress-text" id="progressText">上传中...</div>
+                </div>
+              </div>
+              <div class="upload-requirements">
+                <h4>工具包要求：</h4>
+                <ul>
+                  <li>文件格式：.zip</li>
+                  <li>必须包含：README.md 文件</li>
+                  <li>必须包含：{tool_name}.tool.js 文件</li>
+                  <li>文件名不支持中文和特殊字符</li>
+                </ul>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-light" id="toolsUploadCancelBtn">取消</button>
+              <button type="button" class="btn btn-primary" id="toolsUploadConfirmBtn" disabled>上传</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+