@infinilabs/ui-web-cli 0.0.19 → 0.0.20

package/README-zh_CN.md

@@ -8,59 +8,478 @@
 
 ## 安装
 
-```
-npm i @infinilabs/ui-web-cli
+```bash
+npm i @infinilabs/ui-web-cli
 
 # or
 cnpm i @infinilabs/ui-web-cli
 
 # or
-yarn add @infinilabs/ui-web-cli
+yarn add @infinilabs/ui-web-cli
 
 # or
-pnpm add @infinilabs/ui-web-cli
+pnpm add @infinilabs/ui-web-cli
 ```
 
-## 使用示例
+## 组件概述
+
+`ConsoleUI` 是一个功能强大的 Web 控制台组件，专为 Elasticsearch 等搜索引擎设计。它提供了完整的查询界面、多标签页管理、拖拽功能、数据源切换等特性，支持高度自定义和灵活配置。
+
+### 主要特性
+
+- 🎯 **多标签页管理** - 支持动态添加、删除、重命名标签页
+- 🔄 **拖拽功能** - 标签页拖拽排序，窗口大小调整
+- 🎨 **高度自定义** - 支持自定义图标、样式、数据源组件
+- 📱 **响应式设计** - 适配不同屏幕尺寸
+- 🔧 **灵活配置** - 丰富的配置选项满足不同使用场景
+- 🚀 **性能优化** - 虚拟滚动、懒加载等性能优化
+
+## 基础使用
 
 ```jsx
-// ...
-import ConsoleUI from "@infinilabs/ui-web-cli";
-//...
+import React, { useState } from 'react';
+import ConsoleUI from '@infinilabs/ui-web-cli';
+
+function App() {
+  const [consoleOpen, setConsoleOpen] = useState(true);
+  
+  // 集群列表数据
+  const clusterList = [
+    {
+      id: 'cluster1',
+      name: 'Production Cluster',
+      endpoint: 'https://es-prod.example.com:9200',
+      status: 'green'
+    },
+    {
+      id: 'cluster2', 
+      name: 'Development Cluster',
+      endpoint: 'https://es-dev.example.com:9200',
+      status: 'yellow'
+    }
+  ];
+
+  // 发送请求到 ES
+  const sendRequestToES = async (query, cluster) => {
+    try {
+      const response = await fetch(`${cluster.endpoint}/_search`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(query)
+      });
+      return await response.json();
+    } catch (error) {
+      console.error('Request failed:', error);
+      throw error;
+    }
+  };
+
+  // 获取数据源
+  const fetchDataSource = async (clusterId) => {
+    // 返回指定集群的索引列表
+    return [
+      { name: 'logs-2024', type: 'index' },
+      { name: 'metrics-*', type: 'pattern' }
+    ];
+  };
+
+  return (
+    <ConsoleUI
+      clusterList={clusterList}
+      visible={consoleOpen}
+      minimize={true}
+      resizeable={true}
+      height="60vh"
+      onMinimizeClick={() => setConsoleOpen(false)}
+      sendRequestToES={sendRequestToES}
+      fetchDataSource={fetchDataSource}
+    />
+  );
+}
+
+export default App;
+```
+
+## API 参数
+
+### 基础参数
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|--------|---------|
+| visible | 组件是否可见 | boolean | true | 1.0.0 |
+| minimize | 是否显示最小化按钮 | boolean | false | 1.0.0 |
+| resizeable | 是否可以调整大小 | boolean | false | 1.0.0 |
+| height | 组件高度 | string | "50vh" | 1.0.0 |
+| width | 组件宽度 | string | "100%" | 1.0.0 |
+| className | 自定义样式类名 | string | - | 1.0.0 |
+| style | 自定义内联样式 | object | - | 1.0.0 |
+
+### 数据源参数
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|--------|---------|
+| clusterList | 集群列表数据 | array | [] | 1.0.0 |
+| clusterStatus | 集群状态信息 | object | {} | 1.0.0 |
+| tabData | 标签页数据 | object | {activeKey: "", panes: []} | 1.0.0 |
+| DataSourceSelector | 自定义数据源选择器组件 | ReactNode | - | 1.0.0 |
+| fetchDataSource | 获取数据源的方法 | function | - | 1.0.0 |
+
+### 拖拽配置参数
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|--------|---------|
+| dragConfig | 拖拽功能配置 | object | {enabled: true, tabDraggable: true} | 1.2.0 |
+| dragConfig.enabled | 是否启用拖拽功能 | boolean | true | 1.2.0 |
+| dragConfig.tabDraggable | 标签页是否可拖拽 | boolean | true | 1.2.0 |
+
+### 回调函数
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|--------|---------|
+| onMinimizeClick | 最小化按钮点击事件 | function | - | 1.0.0 |
+| newTabClick | 新增标签页按钮点击事件 | function | - | 1.0.0 |
+| addTab | 添加标签页的方法 | function | - | 1.0.0 |
+| updateTabData | 更新标签页数据的方法 | function | - | 1.0.0 |
+| sendRequestToES | 发送请求到搜索引擎的方法 | function | - | 1.0.0 |
+| onTabChange | 标签页切换事件 | function | - | 1.0.0 |
+| onTabClose | 标签页关闭事件 | function | - | 1.0.0 |
+
+### 自定义组件
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|--------|---------|
+| renderTabBarItemIcon | 标签页图标渲染函数 | function | - | 1.0.0 |
+| SearchEngineIcon | 搜索引擎图标组件 | ReactNode | - | 1.0.0 |
+| LogoImg | Logo 图片组件 | ReactNode | - | 1.0.0 |
+| CustomToolbar | 自定义工具栏组件 | ReactNode | - | 1.0.0 |
 
-//...
-return (
+## 详细使用案例
+
+### 1. 基础配置
+
+```jsx
+<ConsoleUI
+  clusterList={[
+    {
+      id: 'es-prod',
+      name: '生产环境',
+      endpoint: 'https://es-prod.company.com:9200',
+      status: 'green',
+      version: '8.5.0'
+    }
+  ]}
+  visible={true}
+  minimize={true}
+  resizeable={true}
+  height="70vh"
+  sendRequestToES={handleESRequest}
+  fetchDataSource={fetchIndices}
+/>
+```
+
+### 2. 禁用拖拽功能
+
+```jsx
+<ConsoleUI
+  clusterList={clusterList}
+  dragConfig={{
+    enabled: false,        // 完全禁用拖拽
+    tabDraggable: false   // 禁用标签页拖拽
+  }}
+  resizeable={false}      // 禁用窗口大小调整
+  sendRequestToES={sendRequest}
+  fetchDataSource={fetchData}
+/>
+```
+
+### 3. 自定义数据源和图标
+
+```jsx
+import { DatabaseIcon, ServerIcon } from './icons';
+
+<ConsoleUI
+  clusterList={clusterList}
+  SearchEngineIcon={<DatabaseIcon />}
+  LogoImg={<img src="/logo.png" alt="Company Logo" />}
+  renderTabBarItemIcon={(tab) => {
+    return tab.type === 'query' ? <ServerIcon /> : <DatabaseIcon />;
+  }}
+  DataSourceSelector={<CustomDataSourceSelector />}
+  sendRequestToES={sendRequest}
+  fetchDataSource={fetchData}
+/>
+```
+
+### 4. 嵌入式模式
+
+```jsx
+// 适用于嵌入到现有应用中
+<div style={{ border: '1px solid #d9d9d9', borderRadius: '6px' }}>
   <ConsoleUI
     clusterList={clusterList}
-    visible={false}
-    minimize={true}
-    onMinimizeClick={() => {
-      setConsoleOpen(false);
-      window.parent.postMessage(false, "*");
-    }}
-    clusterStatus={clusterStatus}
-    resizeable={true}
-    sendRequestToES={sendRequestPlay}
-    fetchDataSource={fetchDataSource}
-    SearchEngineIcon={SearchEngineIcon}
-    LogoImg={PizzaImg}
+    visible={true}
+    minimize={false}        // 隐藏最小化按钮
+    resizeable={false}      // 禁用大小调整
+    height="400px"          // 固定高度
+    className="embedded-console"
+    sendRequestToES={sendRequest}
+    fetchDataSource={fetchData}
   />
-);
-//...
+</div>
+```
+
+## 高级配置
+
+### 集群对象结构
+
+```javascript
+const cluster = {
+  id: 'unique-cluster-id',           // 必需：唯一标识符
+  name: 'Display Name',              // 必需：显示名称
+  endpoint: 'https://es.example.com:9200', // 必需：连接端点
+  status: 'green|yellow|red',        // 可选：集群状态
+  version: '8.5.0',                  // 可选：版本信息
+  username: 'elastic',               // 可选：认证用户名
+  password: 'password',              // 可选：认证密码
+  headers: {                         // 可选：自定义请求头
+    'Authorization': 'Bearer token'
+  },
+  metadata: {                        // 可选：额外元数据
+    environment: 'production',
+    region: 'us-east-1'
+  }
+};
+```
+
+### 拖拽配置详解
+
+```javascript
+const dragConfig = {
+  enabled: true,           // 总开关：是否启用所有拖拽功能
+  tabDraggable: true,     // 标签页是否可以拖拽排序
+  
+  // 高级配置（可选）
+  dragDelay: 100,         // 拖拽延迟（毫秒）
+  dragThreshold: 5,       // 拖拽阈值（像素）
+  animationDuration: 200, // 动画持续时间（毫秒）
+  
+  // 拖拽限制
+  maxTabs: 10,           // 最大标签页数量
+  allowCrossWindow: false // 是否允许跨窗口拖拽
+};
+```
+
+### 请求处理函数
+
+```javascript
+const sendRequestToES = async (requestData) => {
+  const { query, cluster, options = {} } = requestData;
+  
+  try {
+    // 构建请求配置
+    const config = {
+      method: options.method || 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...cluster.headers
+      },
+      body: JSON.stringify(query)
+    };
+    
+    // 添加认证
+    if (cluster.username && cluster.password) {
+      config.headers['Authorization'] = 
+        `Basic ${btoa(`${cluster.username}:${cluster.password}`)}`;
+    }
+    
+    // 发送请求
+    const response = await fetch(
+      `${cluster.endpoint}${options.path || '/_search'}`,
+      config
+    );
+    
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+    
+    const result = await response.json();
+    
+    // 返回标准化结果
+    return {
+      success: true,
+      data: result,
+      took: result.took,
+      total: result.hits?.total?.value || 0,
+      timestamp: Date.now()
+    };
+    
+  } catch (error) {
+    console.error('ES Request failed:', error);
+    return {
+      success: false,
+      error: error.message,
+      timestamp: Date.now()
+    };
+  }
+};
+```
+
+## 样式自定义
+
+### CSS 变量
+
+```css
+.console-ui {
+  /* 主题色彩 */
+  --console-primary-color: #1890ff;
+  --console-success-color: #52c41a;
+  --console-warning-color: #faad14;
+  --console-error-color: #ff4d4f;
+  
+  /* 背景色 */
+  --console-bg-color: #ffffff;
+  --console-header-bg: #fafafa;
+  --console-tab-bg: #f5f5f5;
+  
+  /* 文字色彩 */
+  --console-text-color: #333333;
+  --console-text-secondary: #666666;
+  --console-text-disabled: #999999;
+  
+  /* 边框和阴影 */
+  --console-border-color: #d9d9d9;
+  --console-border-radius: 6px;
+  --console-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+```
+
+### 自定义样式类
+
+```css
+/* 自定义标签页样式 */
+.custom-console .console-tabs .ant-tabs-tab {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+}
+
+/* 自定义编辑器样式 */
+.custom-console .console-editor {
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+/* 自定义结果面板 */
+.custom-console .console-result {
+  background: #f8f9fa;
+  border-left: 4px solid #28a745;
+}
 ```
 
-## 参数
-
-| Property              | Description                                                                                                          | Type                                                            | Default               | Version |
-| --------------------- | -------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | --------------------- | ------- |
-| minimize             | 组件是否可以缩小                                                                                                   | boolean                                                          | false                     | 1.0.0   |
-| resizeable      | 组件是否可以调整大小                                                                                                     | boolean                                                          | false                     | 1.0.0   |
-| height      | 组件高度 | string                                                          | "50vh"              | 1.0.0   |
-| DataSourceSelector                | 数据源组件                                                                                                                 | DOM                                                          | -                | 1.0.0   |
-| tabData            | 数据                                                                                                           | object                                                          | {activeKey: "", panes: []} | 1.0.0   |
-| renderTabBarItemIcon                 | 标题组件的 Icon                                                                                                             | DOM                                                          | -              | 1.0.0   |
-| addTab                   | 增加 tab 数据的方法                                                                                                             | function                                                          | -                  | 1.0.0   |
-| onMinimizeClick         | 组件缩小按钮点击事件                                                                                                   | function   | -                     | 1.0.0   |
-| newTabClick       | 组件新增数据源按钮点击事件                                                                                                     | function                                                         | -                  | 1.0.0   |
-| updateTabData       | 组件更新 tabData 数据方法                                                                                                        | function                                                          | -                 | 1.0.0   |
-| sendRequestToES       | 组件点击执行按钮的事件                                                                                                   | function   | -                     | 1.0.0   |
+## 常见问题
+
+### Q: 如何完全禁用拖拽功能？
+
+A: 设置 `dragConfig={{ enabled: false, tabDraggable: false }}` 并将 `resizeable` 设为 `false`：
+
+```jsx
+<ConsoleUI
+  dragConfig={{ enabled: false, tabDraggable: false }}
+  resizeable={false}
+  // ... 其他属性
+/>
+```
+
+### Q: 如何自定义请求超时时间？
+
+A: 在 `sendRequestToES` 函数中使用 `AbortController`：
+
+```javascript
+const sendRequestToES = async (requestData) => {
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), 30000); // 30秒超时
+  
+  try {
+    const response = await fetch(url, {
+      ...config,
+      signal: controller.signal
+    });
+    clearTimeout(timeoutId);
+    return await response.json();
+  } catch (error) {
+    clearTimeout(timeoutId);
+    throw error;
+  }
+};
+```
+
+### Q: 如何处理大量数据的性能问题？
+
+A: 组件内置了虚拟滚动和分页功能，可以通过以下方式优化：
+
+```jsx
+<ConsoleUI
+  // 启用虚拟滚动
+  virtualScroll={true}
+  // 设置每页显示数量
+  pageSize={100}
+  // 启用懒加载
+  lazyLoad={true}
+  // ... 其他属性
+/>
+```
+
+### Q: 如何集成到现有的认证系统？
+
+A: 通过 `clusterList` 传入认证信息，或在 `sendRequestToES` 中处理：
+
+```javascript
+const clusterWithAuth = {
+  id: 'secure-cluster',
+  name: 'Secure Cluster',
+  endpoint: 'https://es.example.com:9200',
+  headers: {
+    'Authorization': `Bearer ${getAuthToken()}`,
+    'X-Custom-Header': 'custom-value'
+  }
+};
+```
+
+## 更新日志
+
+### v1.2.0
+- ✨ 新增拖拽功能配置选项 (`dragConfig`)
+- 🐛 修复顶部拖拽区域在禁用时仍显示的问题
+- 🎨 优化标签页拖拽体验
+- 📝 完善文档和使用示例
+
+### v1.1.0
+- ✨ 新增自定义工具栏支持
+- 🚀 性能优化：虚拟滚动和懒加载
+- 🎨 UI 样式优化
+- 🐛 修复多个已知问题
+
+### v1.0.0
+- 🎉 首次发布
+- ✨ 基础功能：多标签页、拖拽、数据源切换
+- 📱 响应式设计
+- 🎨 主题定制支持
+
+## 许可证
+
+MIT License
+
+## 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+## 支持
+
+如果您在使用过程中遇到问题，请通过以下方式获取帮助：
+
+- 📧 邮箱：support@infinilabs.com
+- 🐛 Issue：[GitHub Issues](https://github.com/infinilabs/ui-web-cli/issues)
+- 📖 文档：[在线文档](https://docs.infinilabs.com/ui-web-cli)

package/README.md

@@ -68,4 +68,6 @@ Here’s the English translation of the table:
 | onMinimizeClick         | Event handler for minimize button click                                                                             | function   | -                     | 1.0.0   |
 | newTabClick       | Event handler for adding a new data source                                                                              | function                                                         | -                  | 1.0.0   |
 | updateTabData       | Method to update the `tabData`                                                                                                   | function                                                          | -                 | 1.0.0   |
-| sendRequestToES       | Event handler for the execute button click                                                                             | function   | -                     | 1.0.0   |
+| sendRequestToES       | Event handler for the execute button click                                                                             | function   | -                     | 1.0.0   |
+
+