@gingkoo/pandora-metabase 0.0.1-alpha.4 → 0.0.1-alpha.6

package/README.md

@@ -6,7 +6,7 @@
 
 ### 主要功能
 
-- **动态获取表字段**：使用 `getTableColumns` 方法可以动态获取指定表的最新字段信息，并且可以通过设置 `isCacheColumns=true` 来启用缓存机制（默认开启），减少重复请求。
+- **动态获取表字段**：使用 `getColumns` 方法可以动态获取指定表的最新字段信息。
 - **可视化 SQL 构建**：通过 `MetaBase` 组件，用户能够以图形化的方式构建 SQL 查询，支持多种元数据类型，如 `MetaData`, `MetaJoin`, `MetaFilter` 等。
 - **灵活扩展**：提供了丰富的接口和类型定义，便于根据具体需求进行定制和扩展。
 
@@ -22,11 +22,7 @@ export type MetaListType =
   | MetaSort 
   | MetaLimit;
 
-export interface MetaData_TableType {
-  name: string; // 表名
-  alias: string; // 别名
-}
-
+// Columns 集合
 export interface MetaData_ColumnsType {
   name: string; // 字段名
   name_zh: string; // 字段中文名称
@@ -34,18 +30,37 @@ export interface MetaData_ColumnsType {
   special_type: SpecialType | string; // 特殊类型，如主键、外键等
   select: boolean; // 是否在查询中选中该字段
 }
-
-export type InitColumnsType = Omit<MetaData_ColumnsType, 'select'>;
+export type ToolbarType =
+  | 'filter'
+  | 'summarize'
+  | 'joinData'
+  | 'permissionTable'
+  | 'customColumn'
+  | 'sort'
+  | 'rowLimit';
 
 export interface MetaBaseProps {
   loading?: boolean; // 加载状态
-  value?: MetaListType[]; // 当前组件的值，用于回显数据
-  tableData?: MetaData_TableType[]; // 包含表别名的数据
-  showExecute?: boolean; // 是否显示执行按钮，默认为true
-  onExecute?: (params: MetaListType[]) => void; // 点击执行按钮时的回调函数
-  isCacheColumns?: boolean; // 是否启用列缓存，默认为true
-  getTableColumns?: (tableName: string) => Promise<InitColumnsType[]>; // 动态获取表列的方法
-  onChange?: (val: MetaListType[]) => void; // 当选择改变时触发的回调函数
+  btnText?: string;	//按钮文字
+  showPermissionTable?: boolean; // 是否显示权限表
+	showFields?:boolean ; //是否显示字段
+  tableNameTpl?: string; //表名
+  fieldNameTpl?: string; //字段名
+	/**
+	 * 工具栏列表
+	 * 默认 ['filter','summarize','joinData','permissionTable','customColumn','sort','rowLimit']
+	 */
+	toolbar?:ToolbarType[]｜false;
+  readonly?: boolean;	//是否只读
+  getTables: (datasourceId: string) => Promise<any>;  //获取表
+  getColumns: (table: string, datasourceId: string) => Promise<any>;//获取数据源
+  onOk: (params: any) => Promise<void>;
+}
+
+export interface SqlVisionBuilderRef {
+  setDatasource: (list: DatasourceType[]) => void; // 设置数据源列表
+  setPreData: (data: MetaListType[]) => void; // 设置回显数据
+  reset: () => void; // 重置到上次设置的数据
 }
 
 ```
@@ -58,21 +73,41 @@ export interface MetaBaseProps {
 
 	<MetaBase
 		value={value}
-		tableData={table}
-		onChange={setValue}
-		getTableColumns={async (name: string) => {
+		showFields={false}
+		toolbar={[
+      'filter',
+      'summarize',
+      'joinData',
+      'permissionTable',
+      'customColumn',
+      'sort',
+      'rowLimit',
+    ]}
+    getTables={async (id: string) => {
+      let tables = [
+        'YBT_PM_BHJQTDBXY',
+      ];
+
+      return tables.map((item) => {
+        return {
+          name: item,
+          alias: item,
+        };
+      });
+    }}
+		getColumns={async (name: string) => {
 			let data: MetaData_ColumnsType[] = [
-				{
-					database_type: 'STRING',
-					name: 'C_RSV5',
-					select: true,
-					special_type: '',
-					name_zh: '备用字段（项目组可使用）',
-				},
+        {
+          database_type: 'STRING',
+          name: 'C_RSV5',
+          select: true,
+          special_type: '',
+          name_zh: '备用字段（项目组可使用）',
+        },
 			];
 			return data;
 		}}
-		onExecute={(v) => {
+		onOk={(v) => {
 			console.log(v);
 		}}
 	/>

package/lib/es/index.js

@@ -1,5 +1,5 @@
 /**
- * @gingkoo/pandora-metabase v0.0.1-alpha.4
+ * @gingkoo/pandora-metabase v0.0.1-alpha.6
  */
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
@@ -336,7 +336,7 @@ const Loading = ({
   });
 };
 
-var css_248z$b = ".mx-4 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.m-2 {\n  margin: 0.5rem;\n}\n.mx-2 {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.ml-4 {\n  margin-left: 1rem;\n}\n.mr-4 {\n  margin-right: 1rem;\n}\n.mr-2 {\n  margin-right: 0.5rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.pb-2 {\n  padding-bottom: 0.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.block {\n  display: block;\n}\n.w-full {\n  width: 100%;\n}\n.font-bold {\n  font-weight: 700;\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.tracking-wider {\n  letter-spacing: 0.05em;\n}\n.relative {\n  position: relative;\n}\n.absolute {\n  position: absolute;\n}\n.top-0 {\n  top: 0px;\n}\n.left-0 {\n  left: 0;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.text-gray-500 {\n  color: #6b7280;\n}\n.flex {\n  display: flex;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.visual-box {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  transition: all 0.3s;\n  z-index: 3;\n  background-color: #fff;\n}\n.Sqb {\n  padding: 0 20px 50px;\n}\n.Sqb-list {\n  padding-top: 1.5rem;\n}\n.Sqb-hover-parent {\n  margin-bottom: 16px;\n  padding-bottom: 16px;\n}\n.Sqb-item {\n  font-size: 14px;\n}\n.Sqb-item--text {\n  color: #509ee3;\n  width: 66.6667%;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  font-weight: 600;\n}\n.Sqb-item--text.purple-text {\n  color: #7172ad;\n}\n.Sqb-item--text.gray-text {\n  color: #93a1ab;\n}\n.Sqb-item--text.green-text {\n  color: #88bf4d;\n}\n.Sqb-item-close {\n  width: 16px;\n  height: 16px;\n  color: #b8bbc3;\n  margin-left: auto;\n  visibility: hidden;\n  cursor: pointer;\n}\n.Sqb-item--content {\n  width: 66.6667%;\n  box-sizing: border-box;\n}\n.Sqb-item--content .Sqb-NotebookCell {\n  box-sizing: border-box;\n  padding: 16px 16px 8px;\n  color: #509ee3;\n  display: flex;\n  flex-wrap: wrap;\n  -webkit-box-align: center;\n  align-items: center;\n  border-radius: 8px;\n  background-color: rgba(80, 158, 227, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell.gray-bg {\n  background-color: rgba(147, 161, 171, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell.green-bg {\n  background-color: rgba(136, 191, 77, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName {\n  border: 2px solid transparent;\n  border-radius: 6px;\n  color: white;\n  background-color: #509ee3;\n  transition: background 300ms linear 0s, border 300ms linear 0s;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  margin-right: 8px;\n  padding: 8px;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName::selection {\n  color: #ffffff;\n  background-color: #d489ac;\n  text-shadow: none;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName:hover {\n  background-color: rgba(80, 158, 227, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.noClick {\n  cursor: default;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.noClick:hover {\n  background-color: #509ee3;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.notSelected {\n  border: 2px solid rgba(80, 158, 227, 0.25);\n  color: #509ee3;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.notSelected:hover {\n  border-color: rgba(80, 158, 227, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name {\n  color: white;\n  background-color: #7172ad;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name:hover {\n  background-color: rgba(113, 114, 173, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name.notSelected {\n  border: 2px solid rgba(113, 114, 173, 0.25);\n  color: #7172ad;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name.notSelected:hover {\n  border-color: rgba(113, 114, 173, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name {\n  color: white;\n  background-color: #93a1ab;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name:hover {\n  background-color: rgba(147, 161, 171, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name svg.sort-arrow {\n  margin-right: 0.5rem;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name {\n  color: white;\n  background-color: #88bf4d;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name:hover {\n  background-color: rgba(136, 191, 77, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name.notSelected {\n  border: 2px solid rgba(136, 191, 77, 0.25);\n  color: #88bf4d;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name.notSelected:hover {\n  border-color: rgba(136, 191, 77, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .ant-input-number {\n  margin-bottom: 0.5rem;\n}\n.Sqb-item--content .Sqb-NotebookCell .ant-input-number .ant-input-number-input {\n  height: 32px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-where {\n  box-sizing: border-box;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableColumns {\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n  margin-left: auto;\n  cursor: pointer;\n}\n.Sqb-item--content .flex-row {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex-direction: row;\n}\n.Sqb-item--content .flex-row .Sqb-NotebookCell {\n  width: 50%;\n}\n.Sqb-item--content .flex-row .pass {\n  color: #88bf4d;\n  margin: 4px 16px;\n  font-size: 600;\n}\n.Sqb-item--func {\n  box-sizing: border-box;\n  margin-top: 8px;\n}\n.Sqb-item--func .Sqb-button {\n  display: inline-block;\n  box-sizing: border-box;\n  text-decoration: none;\n  cursor: pointer;\n  font-weight: bold;\n  padding: 12px 16px;\n  border-radius: 6px;\n  margin-right: 16px;\n  margin-top: 16px;\n  border: none;\n  transition: background 300ms ease 0s;\n  flex-shrink: 0;\n  color: #93a1ab;\n  background-color: #ffffff;\n}\n.Sqb-item--func .Sqb-button:hover {\n  color: #7e8f9b;\n  background-color: #eceff0;\n}\n.Sqb-item--func .Sqb-button > div {\n  min-width: 60px;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n}\n.Sqb-item--func .Sqb-button > div svg {\n  flex-shrink: 0;\n}\n.Sqb-item--func .Sqb-button > div div {\n  margin-top: 0.5rem;\n}\n.Sqb-item--func .Sqb-button.filter {\n  color: #7172ad;\n  background-color: #e0e0ed;\n}\n.Sqb-item--func .Sqb-button.filter:hover {\n  color: #5d5ea0;\n  background-color: #cccce1;\n}\n.Sqb-item--func .Sqb-button.summarize {\n  color: #88bf4d;\n  background-color: #d8eac5;\n}\n.Sqb-item--func .Sqb-button.summarize:hover {\n  color: #79ae3f;\n  background-color: #cae2af;\n}\n.Sqb-item--func .Sqb-button.join-data {\n  color: #509ee3;\n  background-color: #f1f7fd;\n}\n.Sqb-item--func .Sqb-button.join-data:hover {\n  color: #328dde;\n  background-color: #d4e7f8;\n}\n.Sqb-item--func .Sqb-button.small {\n  margin-right: 8px;\n  margin-top: 0;\n  padding: 0.5rem;\n}\n.Sqb-item--func .Sqb-button.small > div {\n  min-width: 0;\n}\n.Sqb-item--func .Sqb-button.small > div svg {\n  width: 14px;\n  height: 14px;\n}\n.Sqb-item--func .Sqb-button.small > div div {\n  display: none;\n}\n.Sqb-item:hover .Sqb-item-close {\n  visibility: visible;\n}\n.Sqb > .Sqb-btn {\n  min-width: 220px;\n  height: 36px;\n  border-radius: 6px;\n  color: #ffffff;\n  background: #509ee3;\n  border: 1px solid #509ee3;\n}\n.Sqb > .Sqb-btn:hover {\n  background-color: rgba(80, 158, 227, 0.8) !important;\n}\n";
+var css_248z$b = ".mx-4 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.m-2 {\n  margin: 0.5rem;\n}\n.mx-2 {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.ml-4 {\n  margin-left: 1rem;\n}\n.mr-4 {\n  margin-right: 1rem;\n}\n.mr-2 {\n  margin-right: 0.5rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.pb-2 {\n  padding-bottom: 0.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.block {\n  display: block;\n}\n.w-full {\n  width: 100%;\n}\n.font-bold {\n  font-weight: 700;\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.tracking-wider {\n  letter-spacing: 0.05em;\n}\n.relative {\n  position: relative;\n}\n.absolute {\n  position: absolute;\n}\n.top-0 {\n  top: 0px;\n}\n.left-0 {\n  left: 0;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.text-gray-500 {\n  color: #6b7280;\n}\n.flex {\n  display: flex;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.visual-box {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  transition: all 0.3s;\n  z-index: 3;\n  background-color: #fff;\n}\n.Sqb {\n  padding: 0 20px 50px;\n}\n.Sqb-list {\n  padding-top: 1.5rem;\n}\n.Sqb-hover-parent {\n  margin-bottom: 16px;\n  padding-bottom: 16px;\n}\n.Sqb-item {\n  font-size: 14px;\n}\n.Sqb-item--text {\n  color: #509ee3;\n  width: 66.6667%;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  font-weight: 600;\n}\n.Sqb-item--text.purple-text {\n  color: #7172ad;\n}\n.Sqb-item--text.gray-text {\n  color: #93a1ab;\n}\n.Sqb-item--text.green-text {\n  color: #88bf4d;\n}\n.Sqb-item-close {\n  width: 16px;\n  height: 16px;\n  color: #b8bbc3;\n  margin-left: auto;\n  visibility: hidden;\n  cursor: pointer;\n}\n.Sqb-item--content {\n  width: 66.6667%;\n  box-sizing: border-box;\n}\n.Sqb-item--content .Sqb-NotebookCell {\n  box-sizing: border-box;\n  padding: 16px 16px 8px;\n  color: #509ee3;\n  display: flex;\n  flex-wrap: wrap;\n  -webkit-box-align: center;\n  align-items: center;\n  border-radius: 8px;\n  background-color: rgba(80, 158, 227, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell.gray-bg {\n  background-color: rgba(147, 161, 171, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell.green-bg {\n  background-color: rgba(136, 191, 77, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName {\n  border: 2px solid transparent;\n  border-radius: 6px;\n  color: white;\n  background-color: #509ee3;\n  transition: background 300ms linear 0s,\n            border 300ms linear 0s;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  margin-right: 8px;\n  padding: 8px;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName::selection {\n  color: #ffffff;\n  background-color: #d489ac;\n  text-shadow: none;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName:hover {\n  background-color: rgba(80, 158, 227, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.noClick {\n  cursor: default;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.noClick:hover {\n  background-color: #509ee3;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.notSelected {\n  border: 2px solid rgba(80, 158, 227, 0.25);\n  color: #509ee3;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.notSelected:hover {\n  border-color: rgba(80, 158, 227, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name {\n  color: white;\n  background-color: #7172ad;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name:hover {\n  background-color: rgba(113, 114, 173, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name.notSelected {\n  border: 2px solid rgba(113, 114, 173, 0.25);\n  color: #7172ad;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name.notSelected:hover {\n  border-color: rgba(113, 114, 173, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name {\n  color: white;\n  background-color: #93a1ab;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name:hover {\n  background-color: rgba(147, 161, 171, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name svg.sort-arrow {\n  margin-right: 0.5rem;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name {\n  color: white;\n  background-color: #88bf4d;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name:hover {\n  background-color: rgba(136, 191, 77, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name.notSelected {\n  border: 2px solid rgba(136, 191, 77, 0.25);\n  color: #88bf4d;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name.notSelected:hover {\n  border-color: rgba(136, 191, 77, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .ant-input-number {\n  margin-bottom: 0.5rem;\n}\n.Sqb-item--content .Sqb-NotebookCell .ant-input-number .ant-input-number-input {\n  height: 32px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-where {\n  box-sizing: border-box;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableColumns {\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n  margin-left: auto;\n  cursor: pointer;\n}\n.Sqb-item--content .flex-row {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex-direction: row;\n}\n.Sqb-item--content .flex-row .Sqb-NotebookCell {\n  width: 50%;\n}\n.Sqb-item--content .flex-row .pass {\n  color: #88bf4d;\n  margin: 4px 16px;\n  font-size: 600;\n}\n.Sqb-item--func {\n  box-sizing: border-box;\n  margin-top: 8px;\n}\n.Sqb-item--func .Sqb-button {\n  display: inline-block;\n  box-sizing: border-box;\n  text-decoration: none;\n  cursor: pointer;\n  font-weight: bold;\n  padding: 12px 16px;\n  border-radius: 6px;\n  margin-right: 16px;\n  margin-top: 16px;\n  border: none;\n  transition: background 300ms ease 0s;\n  flex-shrink: 0;\n  color: #93a1ab;\n  background-color: #ffffff;\n}\n.Sqb-item--func .Sqb-button:hover {\n  color: #7e8f9b;\n  background-color: #eceff0;\n}\n.Sqb-item--func .Sqb-button > div {\n  min-width: 60px;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n}\n.Sqb-item--func .Sqb-button > div svg {\n  flex-shrink: 0;\n}\n.Sqb-item--func .Sqb-button > div div {\n  margin-top: 0.5rem;\n}\n.Sqb-item--func .Sqb-button.filter {\n  color: #7172ad;\n  background-color: #e0e0ed;\n}\n.Sqb-item--func .Sqb-button.filter:hover {\n  color: #5d5ea0;\n  background-color: #cccce1;\n}\n.Sqb-item--func .Sqb-button.summarize {\n  color: #88bf4d;\n  background-color: #d8eac5;\n}\n.Sqb-item--func .Sqb-button.summarize:hover {\n  color: #79ae3f;\n  background-color: #cae2af;\n}\n.Sqb-item--func .Sqb-button.joinData {\n  color: #509ee3;\n  background-color: #f1f7fd;\n}\n.Sqb-item--func .Sqb-button.joinData:hover {\n  color: #328dde;\n  background-color: #d4e7f8;\n}\n.Sqb-item--func .Sqb-button.small {\n  margin-right: 8px;\n  margin-top: 0;\n  padding: 0.5rem;\n}\n.Sqb-item--func .Sqb-button.small > div {\n  min-width: 0;\n}\n.Sqb-item--func .Sqb-button.small > div svg {\n  width: 14px;\n  height: 14px;\n}\n.Sqb-item--func .Sqb-button.small > div div {\n  display: none;\n}\n.Sqb-item:hover .Sqb-item-close {\n  visibility: visible;\n}\n.Sqb > .Sqb-btn {\n  min-width: 220px;\n  height: 36px;\n  border-radius: 6px;\n  color: #ffffff;\n  background: #509ee3;\n  border: 1px solid #509ee3;\n}\n.Sqb > .Sqb-btn:hover {\n  background-color: rgba(80, 158, 227, 0.8) !important;\n}\n";
 styleInject(css_248z$b);
 
 var SortEnum;
@@ -1901,6 +1901,11 @@ const sleep = (wait = 0) => {
 const flatArray = arr => {
   return [].concat.apply([], arr);
 };
+const replaceTpl = (inputString, values) => {
+  return inputString.replace(/\$\{([^}]*)\}/g, (match, variableName) => {
+    return typeof values[variableName] !== 'undefined' ? String(values[variableName]) : match;
+  });
+};
 
 class WinResetEvent {
   eventStack = {};
@@ -2165,6 +2170,11 @@ class SqlVisionStore {
     makeAutoObservable(this);
   }
   showPermissionTable = false; // 开启权限表
+  showFields = true; // 开启权限表
+  //工具列表
+  toolbar = ['filter', 'summarize', 'joinData', 'permissionTable', 'customColumn', 'sort', 'rowLimit'];
+  fieldNameTpl = '${name}';
+  tableNameTpl = '${name}';
   sourceList = []; // 数据源列表
   _cacheSource2TableMap = {}; // 数据源id 对应数据集列表
   _cacheColumnsMap = {};
@@ -2225,8 +2235,50 @@ class SqlVisionStore {
   // 回显
   async setPreData(data) {
     if (data.length) {
-      this.metaList = data;
+      this.metaList = data.map((v, i) => {
+        // 设置右侧column
+        if (v.table2?.datasourceId && v.columns.length < 1) {
+          // let newMetaList = this.metaList.slice() as MetaData[];
+          let newMeta = data.slice();
+          let tableName = newMeta[i].table2.name;
+          this.fetchColumns(tableName, newMeta[i].table2.datasourceId, columns => {
+            newMeta[i].columns = columns;
+            this.setMeta(newMeta);
+          });
+          return {
+            ...v
+          };
+        }
+        // 设置column
+        if (v.table?.datasourceId && v.columns.length < 1) {
+          // let newMetaList = this.metaList.slice() as MetaData[];
+          let newMeta = data.slice();
+          let tableName = newMeta[i].table.name;
+          this.fetchColumns(tableName, newMeta[i].table.datasourceId, columns => {
+            newMeta[i].columns = columns;
+            this.setMeta(newMeta);
+          });
+          return {
+            ...v
+          };
+        }
+        return {
+          ...v
+        };
+      });
       metaKey = Math.max.apply(null, this.metaList.map(v => Number(v.metaKey)));
+    } else {
+      this.setMeta([{
+        metaKey,
+        type: TypeEnum.data,
+        table: {
+          name: '',
+          alias: '',
+          datasourceId: '',
+          datasourceName: ''
+        },
+        columns: []
+      }]);
     }
   }
   setSourceList(list) {
@@ -2247,6 +2299,7 @@ class SqlVisionStore {
       };
       if (index === 1) {
         table1 = {
+          ...mainTable.table,
           name: mainTable.table.name,
           alias: mainTable.table.alias,
           datasourceId: mainTable.table.datasourceId,
@@ -2364,6 +2417,18 @@ class SqlVisionStore {
   setShowPermissionTable(show) {
     this.showPermissionTable = show;
   }
+  setShowFields(show) {
+    this.showFields = show;
+  }
+  setToolbar(toolbar) {
+    this.toolbar = toolbar;
+  }
+  setFieldNameTpl(tpl) {
+    this.fieldNameTpl = tpl;
+  }
+  setTableNameTpl(tpl) {
+    this.tableNameTpl = tpl;
+  }
 }
 const sqlVisionStore = new SqlVisionStore();
 const Store = /*#__PURE__*/React__default.createContext(sqlVisionStore);
@@ -3125,7 +3190,7 @@ const SelectJoinColumn = ({
   onGroup,
   didUpdate
 }) => {
-  useStore();
+  const store = useStore();
   const [curTable, setCurTable] = useState(value.alias); // 当前选择的表
   const [curColumn, setCurColumn] = useState(value.name); // 当前选择的字段
   const [tableList, setTableList] = useState(_data.map((v, i) => {
@@ -3259,6 +3324,7 @@ const SelectJoinColumn = ({
                       let condition = '';
                       let quotes = name;
                       return onGroup({
+                        ...v,
                         table,
                         alias: tableAlias,
                         name,
@@ -3269,6 +3335,7 @@ const SelectJoinColumn = ({
                       });
                     }
                     typeof onSelect === 'function' && onSelect({
+                      ...v,
                       table,
                       alias: tableAlias,
                       name,
@@ -3287,7 +3354,7 @@ const SelectJoinColumn = ({
                     }), jsx("div", {
                       children: jsx("h4", {
                         className: 'List-item-title ml-2',
-                        children: name
+                        children: replaceTpl(store.fieldNameTpl, v)
                       })
                     })]
                   }), OPEN_GROUP]
@@ -4158,7 +4225,7 @@ const SelectTable = ({
                   }), jsx("div", {
                     children: jsx("h4", {
                       className: 'List-item-title ml-2',
-                      children: v.name
+                      children: replaceTpl(store.tableNameTpl, v)
                     })
                   })]
                 })
@@ -4317,19 +4384,23 @@ const IconTypeMap = new Map([[TypeEnum.filter, {
 }], [TypeEnum.joinData, {
   name: __('SqlQueryBuilder.joinData'),
   icon: jsx(JoinDataIcon, {}),
-  className: 'join-data'
+  className: 'joinData'
 }], [TypeEnum.permissionTable, {
   name: __('SqlQueryBuilder.permissionTable'),
-  icon: jsx(PermissionTableIcon, {})
+  icon: jsx(PermissionTableIcon, {}),
+  className: 'permissionTable'
 }], [TypeEnum.customColumn, {
   name: __('SqlQueryBuilder.customColumn'),
-  icon: jsx(CustomColumnIcon, {})
+  icon: jsx(CustomColumnIcon, {}),
+  className: 'customColumn'
 }], [TypeEnum.sort, {
   name: __('SqlQueryBuilder.sort'),
-  icon: jsx(SortIcon, {})
+  icon: jsx(SortIcon, {}),
+  className: 'sort'
 }], [TypeEnum.rowLimit, {
   name: __('SqlQueryBuilder.rowLimit'),
-  icon: jsx(RowLimitIcon, {})
+  icon: jsx(RowLimitIcon, {}),
+  className: 'rowLimit'
 }]]);
 // 前端展示的icon顺序 随便改不影响逻辑
 const DisplayOrder = [TypeEnum.filter, TypeEnum.summarize, TypeEnum.joinData, TypeEnum.permissionTable, TypeEnum.customColumn, TypeEnum.sort, TypeEnum.rowLimit];
@@ -4375,11 +4446,10 @@ const metaIcon = (size, handleClick) => {
   3）特殊情况二 如果最后一个是排序，下面是small
 */
 // 判断icon大小
-const judgeSize = (props, nextLen) => {
+const judgeSize = (store, props, nextLen) => {
   let {
     meta
   } = props;
-  const store = useStore();
   let {
     type
   } = meta;
@@ -4403,11 +4473,10 @@ const judgeSize = (props, nextLen) => {
 /**
  * 查找模块下面能放哪些icon （参考来源：metabase.com）
  */
-const findNextIcon = props => {
+const findNextIcon = (store, props) => {
   const {
     meta
   } = props;
-  const store = useStore();
   let {
     type
   } = meta;
@@ -4575,11 +4644,11 @@ const NextDom = props => {
   const store = useStore();
   // @ts-ignore
   if (!store.metaList[0].table.name) return null;
-  let available = findNextIcon(props);
+  let available = findNextIcon(store, props);
   if (!store.showPermissionTable) {
     available = available.filter(v => v !== TypeEnum.permissionTable);
   }
-  let size = judgeSize(props, available.length);
+  let size = judgeSize(store, props, available.length);
   function handleClick(type) {
     let index = store.metaList.indexOf(meta);
     store.addMeta(type, index + 1);
@@ -4587,7 +4656,7 @@ const NextDom = props => {
   const MetaIconDom = metaIcon(size, handleClick);
   return jsx("div", {
     className: `Sqb-item--func`,
-    children: sortList(available).map(v => jsx(MetaIconDom, {
+    children: sortList(available).filter(v => ~store.toolbar.indexOf(v)).map(v => jsx(MetaIconDom, {
       type: v
     }, v))
   });
@@ -4671,7 +4740,7 @@ const TableData = props => {
             }),
             onClick: selectTable,
             children: selected ? `${meta.table.datasourceName}.${meta.table.name}` : __('SqlQueryBuilder.pickTable')
-          }), selected && store.showMainColumn && jsx("div", {
+          }), selected && store.showMainColumn && store.showFields && jsx("div", {
             className: `Sqb-TableColumns`,
             onClick: selectColumns,
             children: __('SqlQueryBuilder.columns')
@@ -4764,6 +4833,7 @@ const JoinData = props => {
               }
             }
             newMeta[index].table2 = {
+              ...data,
               name: tableName,
               alias,
               column: '',
@@ -4829,6 +4899,7 @@ const JoinData = props => {
         if (prevGroupBy?.group?.length) {
           _data.columns = _data.columns.concat(prevGroupBy.group.map(v => {
             return {
+              ...v,
               name: v.quotes,
               database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
               special_type: '',
@@ -4840,6 +4911,7 @@ const JoinData = props => {
         if (prevGroupBy?.by?.length) {
           _data.columns = _data.columns.concat(prevGroupBy.by.map(v => {
             return {
+              ...v,
               name: v.quotes,
               database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
               special_type: '',
@@ -4991,7 +5063,7 @@ const JoinData = props => {
               onClick: selectJoinColumn,
               children: meta.table2.column ? meta.table2.column : __('SqlQueryBuilder.pickTable')
             })]
-          }), columnsSelected && jsx("div", {
+          }), columnsSelected && store.showFields && jsx("div", {
             className: `Sqb-TableColumns`,
             onClick: selectColumns,
             children: __('SqlQueryBuilder.columns')
@@ -5169,8 +5241,10 @@ const Filter = props => {
       if (prevGroupBy?.group?.length) {
         _data.columns = _data.columns.concat(prevGroupBy.group.map(v => {
           return {
+            name_zh: v.quotes,
+            ...v,
             name: v.quotes,
-            name_zh: '',
+            // name_zh: '',
             database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
             sql: v.sql,
             special_type: '',
@@ -5181,8 +5255,10 @@ const Filter = props => {
       if (prevGroupBy?.by?.length) {
         _data.columns = _data.columns.concat(prevGroupBy.by.map(v => {
           return {
+            name_zh: v.quotes,
+            ...v,
             name: v.quotes,
-            name_zh: '',
+            // name_zh: '',
             database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
             sql: v.sql,
             special_type: '',
@@ -5360,9 +5436,11 @@ const GroupBy = props => {
       if (prevGroupBy?.group?.length) {
         _data.columns = _data.columns.concat(prevGroupBy.group.map(v => {
           return {
+            name_zh: v.quotes,
+            ...v,
             name: v.quotes,
             realName: v.sql?.split(' AS ')?.[1] || '',
-            name_zh: '',
+            // name_zh: '',
             database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
             special_type: '',
             select: true
@@ -5372,9 +5450,11 @@ const GroupBy = props => {
       if (prevGroupBy?.by?.length) {
         _data.columns = _data.columns.concat(prevGroupBy.by.map(v => {
           return {
+            name_zh: v.quotes,
+            ...v,
             name: v.quotes,
             realName: v.sql?.split(' AS ')?.[1] || '',
-            name_zh: '',
+            // name_zh: '',
             database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
             special_type: '',
             select: true
@@ -5434,6 +5514,7 @@ const GroupBy = props => {
         isGroup: true,
         // @ts-ignore
         onGroup: data => {
+          console.log('🚀 ~ handleUpdate ~ data:', data);
           // @ts-ignore
           newMeta[index].by.splice(i, 1, data);
           // @ts-ignore
@@ -5474,6 +5555,7 @@ const GroupBy = props => {
         isGroup: true,
         // @ts-ignore
         onGroup: data => {
+          console.log('🚀 ~ handleAdd ~ data:', data);
           // @ts-ignore
           newMeta[index].by.push(data);
           // @ts-ignore
@@ -5969,9 +6051,11 @@ const SelectIndex = props => {
       if (prevGroupBy?.group?.length) {
         _data.columns = _data.columns.concat(prevGroupBy.group.map(v => {
           return {
+            name_zh: v.quotes,
+            ...v,
             name: v.quotes,
             realName: v.sql?.split(' AS ')?.[1] || '',
-            name_zh: '',
+            // name_zh: '',
             database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
             special_type: '',
             select: true
@@ -5981,9 +6065,11 @@ const SelectIndex = props => {
       if (prevGroupBy?.by?.length) {
         _data.columns = _data.columns.concat(prevGroupBy.by.map(v => {
           return {
+            name_zh: v.quotes,
+            ...v,
             name: v.quotes,
             realName: v.sql?.split(' AS ')?.[1] || '',
-            name_zh: '',
+            // name_zh: '',
             database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
             special_type: '',
             select: true
@@ -6201,8 +6287,10 @@ const Sort = props => {
       if (prevGroupBy?.group?.length) {
         _data.columns = _data.columns.concat(prevGroupBy.group.map(v => {
           return {
+            name_zh: v.quotes,
+            ...v,
             name: v.quotes,
-            name_zh: '',
+            // name_zh: '',
             database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
             special_type: '',
             sql: v.sql,
@@ -6213,8 +6301,10 @@ const Sort = props => {
       if (prevGroupBy?.by?.length) {
         _data.columns = _data.columns.concat(prevGroupBy.by.map(v => {
           return {
+            name_zh: v.quotes,
+            ...v,
             name: v.quotes,
-            name_zh: '',
+            // name_zh: '',
             database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
             special_type: '',
             sql: v.sql,
@@ -6618,24 +6708,37 @@ const Metabase = observer(props => {
 const SqlVisionBuilder = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   let {
     loading = false,
-    showPermissionTable,
+    showPermissionTable = false,
+    showFields = true,
     getTables,
-    getColumns
+    getColumns,
+    tableNameTpl = '${name}',
+    fieldNameTpl = '${name}',
+    toolbar = ['filter', 'summarize', 'joinData', 'permissionTable', 'customColumn', 'sort', 'rowLimit']
   } = props;
   const store = useStore();
+  const [preData, setPreData] = useState([]);
   useEffect(() => {
     getTables && store.setFetchDatasetFn(getTables);
     getColumns && store.setFetchColumnsFn(getColumns);
-    if (showPermissionTable) {
-      store.setShowPermissionTable(showPermissionTable);
-    }
   }, []);
+  useEffect(() => {
+    store.setShowPermissionTable(showPermissionTable);
+    store.setShowFields(showFields);
+    store.setToolbar(toolbar || []);
+    store.setFieldNameTpl(fieldNameTpl || '${name}');
+    store.setTableNameTpl(tableNameTpl || '${name}');
+  }, [showFields, showPermissionTable, toolbar, fieldNameTpl, tableNameTpl]);
   React__default.useImperativeHandle(ref, () => ({
     setDatasource: list => {
       store.setSourceList(list);
     },
     setPreData: data => {
       store.setPreData(data);
+      setPreData(data);
+    },
+    reset: () => {
+      store.setPreData(preData);
     }
   }));
   // ② 表集合没有查出来前 不加载页面