Merge branch 'dev-v2' into pr@dev-v2@feat_platform_config

core/core-backend/src/main/java/io/dataease/chart/manage/ChartDataManage.java

@@ -115,7 +115,9 @@ public class ChartDataManage {
         if (StringUtils.equalsIgnoreCase(view.getType(), "table-pivot")
                 || StringUtils.containsIgnoreCase(view.getType(), "group")
                 || ("antv".equalsIgnoreCase(view.getRender()) && "line".equalsIgnoreCase(view.getType()))
-                || StringUtils.equalsIgnoreCase(view.getType(), "flow-map")) {
+                || StringUtils.equalsIgnoreCase(view.getType(), "flow-map")
+                || StringUtils.equalsIgnoreCase(view.getType(), "sankey")
+        ) {
             xAxis.addAll(xAxisExt);
         }
         List<ChartViewFieldDTO> yAxis = new ArrayList<>(view.getYAxis());

core/core-backend/src/main/java/io/dataease/datasource/provider/ApiUtils.java

@@ -59,7 +59,7 @@ public class ApiUtils {
         if (apiDefinition == null) {
             DEException.throwException("未找到");
         }
-        String response = execHttpRequest(apiDefinition, 10);
+        String response = execHttpRequest(apiDefinition, apiDefinition.getApiQueryTimeout() == null || apiDefinition.getApiQueryTimeout() <= 0 ? 10 : apiDefinition.getApiQueryTimeout());
         fieldList = getTableFields(apiDefinition);
         result.put("fieldList", fieldList);
         dataList = fetchResult(response, apiDefinition);
@@ -116,7 +116,7 @@ public class ApiUtils {
         if (apiDefinition == null) {
             DEException.throwException("未找到");
         }
-        String response = execHttpRequest(apiDefinition, 10);
+        String response = execHttpRequest(apiDefinition, apiDefinition.getApiQueryTimeout() == null || apiDefinition.getApiQueryTimeout() <= 0 ? 10 : apiDefinition.getApiQueryTimeout());
         return fetchResult(response, apiDefinition);
     }
 
@@ -194,6 +194,26 @@ public class ApiUtils {
         return response;
     }
 
+    private static void previewNum(List<Map<String, Object>> field){
+        for (Map<String, Object> stringObjectMap : field) {
+            JSONArray newArray = new JSONArray();
+            if (stringObjectMap.get("value") != null) {
+                try {
+                    TypeReference<JSONArray> listTypeReference = new TypeReference<JSONArray>() {
+                    };
+                    JSONArray array = objectMapper.readValue(stringObjectMap.get("value").toString(), listTypeReference);
+                    if(array.size() > 100){
+                        for (int i = 0; i < Math.min(100, array.size()); i++) {
+                            newArray.add(array.get(i));
+                        }
+                        stringObjectMap.put("value", newArray);
+                    }
+                } catch (Exception e) {
+
+                }
+            }
+        }
+    }
 
     public static ApiDefinition checkApiDefinition(ApiDefinition apiDefinition, String response) throws DEException {
         if (StringUtils.isEmpty(response)) {
@@ -217,6 +237,7 @@ public class ApiUtils {
                 rootPath = "$";
                 handleStr(apiDefinition, response, fields, rootPath);
             }
+            previewNum(fields);
             apiDefinition.setJsonFields(fields);
             return apiDefinition;
         } else {

core/core-backend/src/main/java/io/dataease/datasource/provider/CalciteProvider.java

@@ -117,7 +117,11 @@ public class CalciteProvider {
         tableDesc.setDatasourceId(datasourceRequest.getDatasource().getId());
         tableDesc.setType("db");
         tableDesc.setTableName(resultSet.getString(1));
-        tableDesc.setName(resultSet.getString(1));
+        if(resultSet.getMetaData().getColumnCount() > 1){
+            tableDesc.setName(resultSet.getString(2));
+        }else {
+            tableDesc.setName(resultSet.getString(1));
+        }
         return tableDesc;
     }
 
@@ -315,6 +319,7 @@ public class CalciteProvider {
     private String getTableFiledSql(DatasourceRequest datasourceRequest) {
         String sql = "";
         DatasourceConfiguration configuration = null;
+        String database="";
         DatasourceType datasourceType = DatasourceType.valueOf(datasourceRequest.getDatasource().getType());
         switch (datasourceType) {
             case mysql:
@@ -324,7 +329,16 @@ public class CalciteProvider {
             case StarRocks:
             case doris:
                 configuration = JsonUtil.parseObject(datasourceRequest.getDatasource().getConfiguration(), Mysql.class);
-                sql = String.format("SELECT COLUMN_NAME,DATA_TYPE,COLUMN_COMMENT FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_SCHEMA = '%s' AND   TABLE_NAME = '%s'", configuration.getDataBase(), datasourceRequest.getTable());
+                if (StringUtils.isEmpty(configuration.getUrlType()) || configuration.getUrlType().equalsIgnoreCase("hostName")) {
+                    database = configuration.getDataBase();
+                } else {
+                    Pattern WITH_SQL_FRAGMENT = Pattern.compile("jdbc:mysql://(.*):(\\d+)/(.*)");
+                    Matcher matcher = WITH_SQL_FRAGMENT.matcher(configuration.getJdbcUrl());
+                    matcher.find();
+                    String[] databasePrams = matcher.group(3).split("\\?");
+                    database = databasePrams[0];
+                }
+                sql = String.format("SELECT COLUMN_NAME,DATA_TYPE,COLUMN_COMMENT FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_SCHEMA = '%s' AND   TABLE_NAME = '%s'", database, datasourceRequest.getTable());
                 break;
             case oracle:
                 configuration = JsonUtil.parseObject(datasourceRequest.getDatasource().getConfiguration(), Oracle.class);
@@ -396,6 +410,16 @@ public class CalciteProvider {
                 break;
             case ck:
                 configuration = JsonUtil.parseObject(datasourceRequest.getDatasource().getConfiguration(), CK.class);
+
+                if (StringUtils.isEmpty(configuration.getUrlType()) || configuration.getUrlType().equalsIgnoreCase("hostName")) {
+                    database = configuration.getDataBase();
+                } else {
+                    Pattern WITH_SQL_FRAGMENT = Pattern.compile("jdbc:clickhouse://(.*):(\\d+)/(.*)");
+                    Matcher matcher = WITH_SQL_FRAGMENT.matcher(configuration.getJdbcUrl());
+                    matcher.find();
+                    String[] databasePrams = matcher.group(3).split("\\?");
+                    database = databasePrams[0];
+                }
                 sql = String.format(" SELECT\n" +
                         "    name,\n" +
                         "    type,\n" +
@@ -404,7 +428,7 @@ public class CalciteProvider {
                         "    system.columns\n" +
                         "WHERE\n" +
                         "    database = '%s'  \n" +
-                        "    AND table = '%s' ", configuration.getDataBase(), datasourceRequest.getTable());
+                        "    AND table = '%s' ", database, datasourceRequest.getTable());
                 break;
             case impala:
                 sql = String.format("DESCRIBE `%s`", datasourceRequest.getTable());
@@ -742,7 +766,7 @@ public class CalciteProvider {
             case StarRocks:
             case doris:
                 configuration = JsonUtil.parseObject(datasourceRequest.getDatasource().getConfiguration(), Mysql.class);
-                if (configuration.getUrlType().equalsIgnoreCase("")) {
+                if (StringUtils.isEmpty(configuration.getUrlType()) || configuration.getUrlType().equalsIgnoreCase("hostName")) {
                     database = configuration.getDataBase();
                 } else {
                     Pattern WITH_SQL_FRAGMENT = Pattern.compile("jdbc:mysql://(.*):(\\d+)/(.*)");
@@ -758,42 +782,76 @@ public class CalciteProvider {
                 if (StringUtils.isEmpty(configuration.getSchema())) {
                     DEException.throwException(Translator.get("i18n_schema_is_empty"));
                 }
-                tableSqls.add("select table_name, owner, comments from all_tab_comments where owner='" + configuration.getSchema() + "' AND table_type = 'TABLE'");
+                tableSqls.add("select table_name, comments, owner  from all_tab_comments where owner='" + configuration.getSchema() + "' AND table_type = 'TABLE'");
-                tableSqls.add("select table_name, owner, comments from all_tab_comments where owner='" + configuration.getSchema() + "' AND table_type = 'VIEW'");
+                tableSqls.add("select table_name, comments, owner  from all_tab_comments where owner='" + configuration.getSchema() + "' AND table_type = 'VIEW'");
                 break;
             case db2:
                 configuration = JsonUtil.parseObject(datasourceRequest.getDatasource().getConfiguration(), Db2.class);
                 if (StringUtils.isEmpty(configuration.getSchema())) {
                     DEException.throwException(Translator.get("i18n_schema_is_empty"));
                 }
-                tableSqls.add("select TABNAME from syscat.tables  WHERE TABSCHEMA ='DE_SCHEMA' AND \"TYPE\" = 'T'".replace("DE_SCHEMA", configuration.getSchema()));
+                tableSqls.add("select TABNAME, REMARKS from syscat.tables  WHERE TABSCHEMA ='DE_SCHEMA' AND \"TYPE\" = 'T'".replace("DE_SCHEMA", configuration.getSchema()));
                 break;
             case sqlServer:
                 configuration = JsonUtil.parseObject(datasourceRequest.getDatasource().getConfiguration(), Sqlserver.class);
                 if (StringUtils.isEmpty(configuration.getSchema())) {
                     DEException.throwException(Translator.get("i18n_schema_is_empty"));
                 }
-                tableSqls.add("SELECT TABLE_NAME FROM \"DATABASE\".INFORMATION_SCHEMA.VIEWS WHERE  TABLE_SCHEMA = 'DS_SCHEMA' ;"
+                tableSqls.add("SELECT   \n" +
-                        .replace("DATABASE", configuration.getDataBase())
+                        "    t.name AS TableName,  \n" +
-                        .replace("DS_SCHEMA", configuration.getSchema()));
+                        "    ep.value AS TableDescription  \n" +
-                tableSqls.add("SELECT TABLE_NAME FROM \"DATABASE\".INFORMATION_SCHEMA.TABLES WHERE TABLE_TYPE = 'BASE TABLE' AND TABLE_SCHEMA = 'DS_SCHEMA' ;"
+                        "FROM   \n" +
-                        .replace("DATABASE", configuration.getDataBase())
+                        "    sys.tables t  \n" +
+                        "LEFT OUTER JOIN   sys.schemas sc ON sc.schema_id =t.schema_id \n" +
+                        "LEFT OUTER JOIN   \n" +
+                        "    sys.extended_properties ep ON t.object_id = ep.major_id   \n" +
+                        "                               AND ep.minor_id = 0   \n" +
+                        "                               AND ep.class = 1  \n" +
+                        "                               AND ep.name = 'MS_Description'\n" +
+                        "where sc.name ='DS_SCHEMA'"
                         .replace("DS_SCHEMA", configuration.getSchema()));
+                tableSqls.add("SELECT   \n" +
+                        "    t.name AS TableName,  \n" +
+                        "    ep.value AS TableDescription  \n" +
+                        "FROM   \n" +
+                        "    sys.views t  \n" +
+                        "LEFT OUTER JOIN   sys.schemas sc ON sc.schema_id =t.schema_id \n" +
+                        "LEFT OUTER JOIN   \n" +
+                        "    sys.extended_properties ep ON t.object_id = ep.major_id   \n" +
+                        "                               AND ep.minor_id = 0   \n" +
+                        "                               AND ep.class = 1  \n" +
+                        "                               AND ep.name = 'MS_Description'\n" +
+                        "where sc.name ='DS_SCHEMA'"
+                                .replace("DS_SCHEMA", configuration.getSchema()));
                 break;
             case pg:
                 configuration = JsonUtil.parseObject(datasourceRequest.getDatasource().getConfiguration(), Pg.class);
                 if (StringUtils.isEmpty(configuration.getSchema())) {
                     DEException.throwException(Translator.get("i18n_schema_is_empty"));
                 }
-                tableSqls.add("SELECT tablename FROM  pg_tables WHERE  schemaname='SCHEMA' ;".replace("SCHEMA", configuration.getSchema()));
+                tableSqls.add("SELECT  \n" +
+                        "    relname AS TableName,  \n" +
+                        "    obj_description(relfilenode::regclass, 'pg_class') AS TableDescription  \n" +
+                        "FROM  \n" +
+                        "    pg_class  \n" +
+                        "WHERE  \n" +
+                        "    relkind = 'r'  \n" +
+                        "    AND relnamespace = (SELECT oid FROM pg_namespace WHERE nspname = 'SCHEMA') ".replace("SCHEMA", configuration.getSchema()));
                 break;
             case redshift:
                 configuration = JsonUtil.parseObject(datasourceRequest.getDatasource().getConfiguration(), CK.class);
-                tableSqls.add("SELECT tablename FROM  pg_tables WHERE  schemaname='SCHEMA' ;".replace("SCHEMA", configuration.getSchema()));
+                tableSqls.add("SELECT  \n" +
+                        "    relname AS TableName,  \n" +
+                        "    obj_description(relfilenode::regclass, 'pg_class') AS TableDescription  \n" +
+                        "FROM  \n" +
+                        "    pg_class  \n" +
+                        "WHERE  \n" +
+                        "    relkind = 'r'  \n" +
+                        "    AND relnamespace = (SELECT oid FROM pg_namespace WHERE nspname = 'SCHEMA') ".replace("SCHEMA", configuration.getSchema()));
                 break;
             case ck:
                 configuration = JsonUtil.parseObject(datasourceRequest.getDatasource().getConfiguration(), CK.class);
-                if (configuration.getUrlType().equalsIgnoreCase("")) {
+                if (StringUtils.isEmpty(configuration.getUrlType()) || configuration.getUrlType().equalsIgnoreCase("hostName")) {
                     database = configuration.getDataBase();
                 } else {
                     Pattern WITH_SQL_FRAGMENT = Pattern.compile("jdbc:clickhouse://(.*):(\\d+)/(.*)");
@@ -802,7 +860,7 @@ public class CalciteProvider {
                     String[] databasePrams = matcher.group(3).split("\\?");
                     database = databasePrams[0];
                 }
-                tableSqls.add("SELECT name FROM system.tables where database='DATABASE';".replace("DATABASE", database));
+                tableSqls.add("SELECT name, comment FROM system.tables where database='DATABASE';".replace("DATABASE", database));
 
                 break;
             default:

core/core-backend/src/main/java/io/dataease/datasource/server/DatasourceServer.java

@@ -493,6 +493,9 @@ public class DatasourceServer implements DatasourceApi {
     public DatasourceDTO get(Long datasourceId) throws DEException {
         DatasourceDTO datasourceDTO = new DatasourceDTO();
         CoreDatasource datasource = datasourceMapper.selectById(datasourceId);
+        if(datasource == null){
+            DEException.throwException("不存在的数据源！");
+        }
         BeanUtils.copyBean(datasourceDTO, datasource);
         TypeReference<List<ApiDefinition>> listTypeReference = new TypeReference<List<ApiDefinition>>() {
         };
@@ -834,10 +837,11 @@ public class DatasourceServer implements DatasourceApi {
 
     public ApiDefinition checkApiDatasource(Map<String, String> request) throws DEException {
         ApiDefinition apiDefinition = JsonUtil.parseObject(new String(java.util.Base64.getDecoder().decode(request.get("data"))), ApiDefinition.class);
-        String response = ApiUtils.execHttpRequest(apiDefinition, 10);
+        String response = ApiUtils.execHttpRequest(apiDefinition, apiDefinition.getApiQueryTimeout() == null || apiDefinition.getApiQueryTimeout() <= 0 ? 10 : apiDefinition.getApiQueryTimeout());
         if (request.keySet().contains("type") && request.get("type").equals("apiStructure")) {
             apiDefinition.setShowApiStructure(true);
         }
+
         ApiUtils.checkApiDefinition(apiDefinition, response);
         if (apiDefinition.getRequest().getAuthManager() != null && StringUtils.isNotBlank(apiDefinition.getRequest().getAuthManager().getUsername()) && StringUtils.isNotBlank(apiDefinition.getRequest().getAuthManager().getPassword()) && apiDefinition.getRequest().getAuthManager().getVerification().equals("Basic Auth")) {
             apiDefinition.getRequest().getAuthManager().setUsername(new String(Base64.getEncoder().encode(apiDefinition.getRequest().getAuthManager().getUsername().getBytes())));

core/core-frontend/src/assets/svg/sankey.svg

@@ -0,0 +1,5 @@
+<svg width="80" height="56" viewBox="0 0 80 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 32.7862C35.0501 32.7862 43.9248 11.0972 67.002 10.375C67.0341 17.043 66.8736 16.9467 67.002 23.2296C45.7703 23.2296 43.0421 45.6408 13 45.6408C13.0642 40.0801 13.0963 40.0159 13 32.7862Z" fill="#00D6B9"/>
+<path d="M13 27.4899C34.6891 27.1288 37.1926 46.0576 67.002 47.9994C67.0341 41.0987 66.8736 51.4819 67.002 44.9744C38.7974 42.3826 36.4624 24.4648 13 24.4648C13.0642 30.2502 13.0963 20.0275 13 27.4899Z" fill="#3370FF"/>
+<path d="M13 20.9829C35.0501 20.9829 43.9247 40.2086 67.002 40.9629C67.8204 33.2036 66.8736 34.327 67.002 27.9799C45.7703 27.9799 43.0421 8 13 8C13.0642 13.6249 13.0963 13.7212 13 20.9829Z" fill="#3370FF"/>
+</svg>

core/core-frontend/src/components/dashboard/DbCanvasAttr.vue

@@ -146,13 +146,6 @@ const saveSelfSubject = () => {
         >
           <filter-style-simple-selector />
         </el-collapse-item>
-        <el-collapse-item
-          :title="t('visualization.filter_component')"
-          name="filterComponent"
-          class="no-padding no-border-bottom"
-        >
-          <filter-style-simple-selector />
-        </el-collapse-item>
         <el-collapse-item
           title="高级样式设置"
           name="seniorStyleSetting"

core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue

@@ -158,6 +158,21 @@
                 />
               </el-form-item>
             </el-col>
+            <el-col :span="12">
+              <el-form-item label="分页器配色" class="form-item">
+                <el-color-picker
+                  :trigger-width="colorPickerWidth"
+                  v-model="seniorForm.pagerColor"
+                  size="small"
+                  :predefine="predefineColors"
+                  color-format="rgb"
+                  :effect="themes"
+                  show-alpha
+                  is-custom
+                  @change="changePagerColorChange"
+                />
+              </el-form-item>
+            </el-col>
           </el-row>
         </div>
       </el-collapse-item>
@@ -174,7 +189,10 @@ import eventBus from '@/utils/eventBus'
 import { storeToRefs } from 'pinia'
 import CustomColorStyleSelect from '@/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue'
 import elementResizeDetectorMaker from 'element-resize-detector'
+import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 const { t } = useI18n()
+const snapshotStore = snapshotStoreWithOut()
+
 const props = defineProps({
   themes: {
     type: String as PropType<EditorTheme>,
@@ -191,6 +209,9 @@ const colorFormRef = ref(null)
 const colorForm = computed(
   () => canvasStyleData.value.component.chartColor as DeepPartial<ChartAttr>
 )
+
+const seniorForm = computed(() => canvasStyleData.value.component.seniorStyleSetting)
+
 const predefineColors = COLOR_PANEL
 
 const state = reactive({
@@ -215,6 +236,10 @@ const changeColorOption = (modifyName = 'value') => {
   changeColorCase(modifyName)
 }
 
+const changePagerColorChange = () => {
+  snapshotStore.recordSnapshotCache()
+}
+
 const changeColorCase = modifyName => {
   colorForm.value['modifyName'] = modifyName
   emits('onColorChange', colorForm.value)

core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue

@@ -2,25 +2,37 @@
   <div style="width: 100%; padding-bottom: 8px">
     <el-form label-position="top" style="width: 100%">
       <div style="width: 100%; padding: 16px 8px 0">
-        <el-col :span="12">
+        <el-col :span="24">
-          <el-form-item class="form-item" label="联动、钻取、调整的图标颜色">
+          <el-form-item
+            :effect="themes"
+            class="form-item"
+            :class="'form-item-' + themes"
+            label="联动、钻取、跳转的图标颜色"
+          >
             <el-color-picker
-              v-model="filterStyle.titleColor"
+              :effect="themes"
+              v-model="seniorStyleSetting.linkageIconColor"
               :trigger-width="197"
               is-custom
               :predefine="state.predefineColors"
-              @change="themeChange('titleColor')"
+              @change="themeChange"
             />
           </el-form-item>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="24">
-          <el-form-item class="form-item" label="钻取层级展示颜色">
+          <el-form-item
+            :effect="themes"
+            class="form-item"
+            :class="'form-item-' + themes"
+            label="钻取层级展示颜色"
+          >
             <el-color-picker
-              v-model="filterStyle.labelColor"
+              v-model="seniorStyleSetting.drillLayerColor"
+              :effect="themes"
               :trigger-width="197"
               is-custom
               :predefine="state.predefineColors"
-              @change="themeChange('labelColor')"
+              @change="themeChange"
             />
           </el-form-item>
         </el-col>
@@ -35,17 +47,21 @@ import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { useI18n } from '@/hooks/web/useI18n'
 import { cloneDeep } from 'lodash-es'
-import { adaptCurThemeFilterStyleAll } from '@/utils/canvasStyle'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import eventBus from '@/utils/eventBus'
-import { ElIcon } from 'element-plus-secondary'
 const { t } = useI18n()
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
-const filterStyle = computed<any>(() => {
+const seniorStyleSetting = computed<any>(() => {
-  return dvMainStore.canvasStyleData.component.filterStyle
+  return dvMainStore.canvasStyleData.component.seniorStyleSetting
 })
 
+const props = defineProps({
+  themes: {
+    type: String,
+    default: 'light'
+  }
+})
 const state = reactive({
   fontSize: [],
   isSetting: false,
@@ -55,15 +71,9 @@ const state = reactive({
 const initForm = () => {
   // do
 }
-const themeChange = styleKey => {
+const themeChange = () => {
-  dvMainStore.canvasStyleData.component.filterStyle = cloneDeep(filterStyle.value)
+  dvMainStore.canvasStyleData.component.seniorStyleSetting = cloneDeep(seniorStyleSetting.value)
-  adaptCurThemeFilterStyleAll(styleKey)
+  snapshotStore.recordSnapshotCache('seniorStyleSettingSimpleSelector-themeChange')
-  snapshotStore.recordSnapshotCache('filterStyleSimpleSelector-themeChange')
-}
-
-const handleHorizontalChange = (type, horizontal = 'titleLayout') => {
-  filterStyle.value[horizontal] = type
-  themeChange(horizontal)
 }
 
 onMounted(() => {
@@ -106,4 +116,12 @@ onMounted(() => {
     line-height: 20px;
   }
 }
+.form-item-dark {
+  :deep(.ed-form-item__label) {
+    color: #6a6a6a;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 20px;
+  }
+}
 </style>

core/core-frontend/src/components/data-visualization/CanvasAttr.vue

@@ -10,6 +10,7 @@ import { useEmitt } from '@/hooks/web/useEmitt'
 import ComponentColorSelector from '@/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue'
 import OverallSetting from '@/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue'
 import CanvasBackground from '@/components/visualization/component-background/CanvasBackground.vue'
+import SeniorStyleSetting from '@/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue'
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const { canvasStyleData, canvasViewInfo } = storeToRefs(dvMainStore)
@@ -102,6 +103,14 @@ onMounted(() => {
       <el-collapse-item effect="dark" title="刷新配置" name="overallSetting">
         <overall-setting themes="dark" />
       </el-collapse-item>
+      <el-collapse-item
+        effect="dark"
+        title="高级样式设置"
+        name="seniorStyleSetting"
+        class="no-padding no-border-bottom"
+      >
+        <senior-style-setting themes="dark"></senior-style-setting>
+      </el-collapse-item>
     </el-collapse>
   </div>
 </template>

core/core-frontend/src/components/data-visualization/canvas/DePreview.vue

@@ -236,6 +236,23 @@ const initWatermark = (waterDomId = 'preview-canvas-main') => {
   }
 }
 
+// 目标校验： 需要校验targetSourceId 是否是当前可视化资源ID
+const winMsgHandle = event => {
+  console.info('PostMessage Params Received')
+  const msgInfo = event.data
+  // 校验targetSourceId
+  if (
+    msgInfo &&
+    msgInfo.type === 'attachParams' &&
+    msgInfo.targetSourceId === dvInfo.value.id + ''
+  ) {
+    const attachParam = msgInfo.params
+    if (attachParam) {
+      dvMainStore.addOuterParamsFilter(attachParam, componentData.value, 'outer')
+    }
+  }
+}
+
 onMounted(() => {
   initRefreshTimer()
   resetLayout()
@@ -245,10 +262,12 @@ onMounted(() => {
     restore()
     initWatermark()
   })
+  window.addEventListener('message', winMsgHandle)
 })
 
 onBeforeUnmount(() => {
   clearInterval(refreshTimer.value)
+  window.removeEventListener('message', winMsgHandle)
 })
 
 const userViewEnlargeOpen = (opt, item) => {

core/core-frontend/src/custom-component/de-frame/ComponentFrame.vue

@@ -3,7 +3,7 @@
     <div v-if="element.frameLinks.src" class="main-frame">
       <iframe
         v-if="state.frameShow"
-        id="iframe"
+        :id="'iframe-' + element.id"
         :src="element.frameLinks.src"
         scrolling="auto"
         frameborder="0"

core/core-frontend/src/locales/zh-CN.ts

@@ -249,7 +249,7 @@ export default {
     remark: '备注',
     column_name: '字段名',
     field_type: '字段类型',
-    field_description: '字段描述',
+    field_description: '字段备注',
     dl: '数据湖',
     other: '其他',
     local_file: '本地文件',
@@ -338,6 +338,7 @@ export default {
     extract: '抽取模式',
     all_compute_mode: '直连、抽取模式',
     extra_params: '额外的JDBC连接字符串',
+    jdbcUrl: 'JDBC 连接',
     please_input_dataPath: '请输入 JsonPath 数据路径',
     show_api_data: '查看API数据结构',
     warning: '包含无效数据表',
@@ -393,7 +394,7 @@ export default {
     no_data_table: '暂无数据表',
     on_the_left: '请在左侧选择数据源',
     create_dataset: '创建数据集',
-    table_description: '表描述',
+    table_description: '表备注',
     relational_database: '关系型数据库',
     data_warehouse_lake: '数仓/数据湖',
     non_relational_database: '非关系型数据库',
@@ -691,6 +692,7 @@ export default {
     chart_pie_rose: '玫瑰图',
     chart_pie_donut_rose: '玫瑰环形图',
     chart_funnel: '漏斗图',
+    chart_sankey: '桑基图',
     chart_radar: '雷达图',
     chart_gauge: '仪表盘',
     chart_map: '地图',
@@ -765,6 +767,8 @@ export default {
     chart_data: '数据',
     chart_style: '样式',
     drag_block_type_axis: '类别轴',
+    drag_block_type_axis_start: '源',
+    drag_block_type_axis_end: '目的',
     drag_block_value_axis: '值轴',
     drag_block_value_start: '开始值',
     drag_block_value_end: '结束值',

core/core-frontend/src/pages/panel/DashboardPreview.vue

@@ -5,10 +5,15 @@ import { interactiveStoreWithOut } from '@/store/modules/interactive'
 import { useEmbedded } from '@/store/modules/embedded'
 import { check } from '@/utils/CrossPermission'
 import { useCache } from '@/hooks/web/useCache'
+import { getOuterParamsInfo } from '@/api/visualization/outerParams'
+import { ElMessage } from 'element-plus-secondary'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { useI18n } from '@/hooks/web/useI18n'
 const { wsCache } = useCache()
 const interactiveStore = interactiveStoreWithOut()
 const embeddedStore = useEmbedded()
 const dashboardPreview = ref(null)
+const { t } = useI18n()
 const state = reactive({
   canvasDataPreview: null,
   canvasStylePreview: null,
@@ -16,6 +21,8 @@ const state = reactive({
   dvInfo: null,
   curPreviewGap: 0
 })
+const dvMainStore = dvMainStoreWithOut()
+
 const checkPer = async resourceId => {
   if (!window.DataEaseBi || !resourceId) {
     return true
@@ -30,6 +37,23 @@ onBeforeMount(async () => {
   if (!checkResult) {
     return
   }
+
+  // 添加外部参数
+  let attachParam
+  await getOuterParamsInfo(embeddedStore.dvId).then(rsp => {
+    dvMainStore.setNowPanelOuterParamsInfo(rsp.data)
+  })
+
+  // div嵌入
+  if (embeddedStore.outerParams) {
+    try {
+      attachParam = JSON.parse(embeddedStore.outerParams)
+    } catch (e) {
+      console.error(e)
+      ElMessage.error(t('visualization.outer_param_decode_error'))
+    }
+  }
+
   initCanvasData(
     embeddedStore.dvId,
     embeddedStore.busiFlag,
@@ -48,6 +72,9 @@ onBeforeMount(async () => {
       nextTick(() => {
         dashboardPreview.value.restore()
       })
+      if (attachParam) {
+        dvMainStore.addOuterParamsFilter(attachParam, canvasDataResult, 'outer')
+      }
     }
   )
 })

core/core-frontend/src/pages/panel/ViewWrapper.vue

@@ -5,21 +5,41 @@ import { interactiveStoreWithOut } from '@/store/modules/interactive'
 import { useEmbedded } from '@/store/modules/embedded'
 import { check } from '@/utils/CrossPermission'
 import { useCache } from '@/hooks/web/useCache'
+import { getOuterParamsInfo } from '@/api/visualization/outerParams'
+import { ElMessage } from 'element-plus-secondary'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { useI18n } from '@/hooks/web/useI18n'
 const { wsCache } = useCache()
 const interactiveStore = interactiveStoreWithOut()
 const embeddedStore = useEmbedded()
 const config = ref()
 const viewInfo = ref()
 const userViewEnlargeRef = ref()
+const dvMainStore = dvMainStoreWithOut()
+const { t } = useI18n()
 
 const state = reactive({
   canvasDataPreview: null,
   canvasStylePreview: null,
   canvasViewInfoPreview: null,
   dvInfo: null,
-  curPreviewGap: 0
+  curPreviewGap: 0,
+  chartId: null
 })
 
+// 目标校验： 需要校验targetSourceId 是否是当前可视化资源ID
+const winMsgHandle = event => {
+  console.info('PostMessage Params Received')
+  const msgInfo = event.data
+  // 校验targetSourceId
+  if (msgInfo && msgInfo.type === 'attachParams' && msgInfo.targetSourceId === state.chartId + '') {
+    const attachParam = msgInfo.params
+    if (attachParam) {
+      dvMainStore.addOuterParamsFilter(attachParam, state.canvasDataPreview, 'outer')
+    }
+  }
+}
+
 const checkPer = async resourceId => {
   if (!window.DataEaseBi || !resourceId) {
     return true
@@ -34,6 +54,25 @@ onBeforeMount(async () => {
   if (!checkResult) {
     return
   }
+  state.chartId = embeddedStore.dvId
+  window.addEventListener('message', winMsgHandle)
+
+  // 添加外部参数
+  let attachParam
+  await getOuterParamsInfo(embeddedStore.dvId).then(rsp => {
+    dvMainStore.setNowPanelOuterParamsInfo(rsp.data)
+  })
+
+  // div嵌入
+  if (embeddedStore.outerParams) {
+    try {
+      attachParam = JSON.parse(embeddedStore.outerParams)
+    } catch (e) {
+      console.error(e)
+      ElMessage.error(t('visualization.outer_param_decode_error'))
+    }
+  }
+
   initCanvasDataPrepare(
     embeddedStore.dvId,
     embeddedStore.busiFlag,
@@ -49,6 +88,9 @@ onBeforeMount(async () => {
       state.canvasViewInfoPreview = canvasViewInfoPreview
       state.dvInfo = dvInfo
       state.curPreviewGap = curPreviewGap
+      if (attachParam) {
+        dvMainStore.addOuterParamsFilter(attachParam, canvasDataResult)
+      }
 
       viewInfo.value = canvasViewInfoPreview[embeddedStore.chartId]
       ;(

core/core-frontend/src/pages/panel/main.ts

@@ -70,6 +70,7 @@ const setupAll = async (
   dom: string,
   type: string,
   busiFlag: string,
+  outerParams: string,
   token: string,
   baseUrl: string,
   dvId: string,
@@ -86,6 +87,7 @@ const setupAll = async (
   const embeddedStore = useEmbedded()
   embeddedStore.setType(type)
   embeddedStore.setBusiFlag(busiFlag)
+  embeddedStore.setOuterParams(outerParams)
   embeddedStore.setToken(token)
   embeddedStore.setBaseUrl(baseUrl)
   embeddedStore.setDvId(dvId)
@@ -129,6 +131,7 @@ class DataEaseBi {
     | 'DashboardPanel'
   dvId: string
   busiFlag: 'dashboard' | 'dataV'
+  outerParams: string
   resourceId: string
   pid: string
   chartId: string
@@ -139,6 +142,7 @@ class DataEaseBi {
     this.type = type
     this.token = options.token
     this.busiFlag = options.busiFlag
+    this.outerParams = options.outerParams
     this.baseUrl = options.baseUrl
     this.dvId = options.dvId
     this.pid = options.pid
@@ -152,6 +156,7 @@ class DataEaseBi {
       this.deOptions.container,
       this.type,
       this.busiFlag,
+      this.outerParams,
       this.token,
       this.baseUrl,
       this.dvId,
@@ -169,6 +174,7 @@ class DataEaseBi {
     const embeddedStore = useEmbedded()
     embeddedStore.setType(null)
     embeddedStore.setBusiFlag(null)
+    embeddedStore.setOuterParams(null)
     embeddedStore.setToken(null)
     embeddedStore.setBaseUrl(null)
     embeddedStore.setDvId(null)
@@ -179,6 +185,7 @@ class DataEaseBi {
     this.type = null
     this.token = null
     this.busiFlag = null
+    this.outerParams = null
     this.baseUrl = null
     this.dvId = null
     this.pid = null

core/core-frontend/src/store/modules/data-visualization/dvMain.ts

@@ -850,10 +850,10 @@ export const dvMainStore = defineStore('dataVisualization', {
       })
     },
     // 添加外部参数的过滤条件
-    addOuterParamsFilter(params) {
+    addOuterParamsFilter(params, curComponentData = this.componentData, source = 'inner') {
       // params 结构 {key1:value1,key2:value2}
-      const curComponentData = this.componentData
       if (params) {
+        const preActiveComponentIds = []
         const trackInfo = this.nowPanelOuterParamsInfo
         for (let index = 0; index < curComponentData.length; index++) {
           const element = curComponentData[index]
@@ -906,6 +906,7 @@ export const dvMainStore = defineStore('dataVisualization', {
                 // 不存在该条件 且 条件有效 直接保存该条件
                 // !filterExist && vValid && currentFilters.push(condition)
                 currentFilters.push(condition)
+                preActiveComponentIds.push(element.id)
               }
               if (element.component === 'VQuery') {
                 element.propValue.forEach(filterItem => {
@@ -951,6 +952,11 @@ export const dvMainStore = defineStore('dataVisualization', {
             curComponentData[index] = element
           })
         }
+        if (source === 'outer') {
+          preActiveComponentIds.forEach(viewId => {
+            useEmitt().emitter.emit('query-data-' + viewId)
+          })
+        }
       }
     },
     trackFilterCursor(element, checkQDList, trackInfo, preActiveComponentIds, viewId) {

core/core-frontend/src/store/modules/embedded.ts

@@ -4,6 +4,7 @@ interface AppState {
   type: string
   token: string
   busiFlag: string
+  outerParams: string
   baseUrl: string
   dvId: string
   pid: string
@@ -17,6 +18,7 @@ export const userStore = defineStore('embedded', {
       type: '',
       token: '',
       busiFlag: '',
+      outerParams: '',
       baseUrl: '',
       dvId: '',
       pid: '',
@@ -34,6 +36,9 @@ export const userStore = defineStore('embedded', {
     getBusiFlag(): string {
       return this.busiFlag
     },
+    getOuterParams(): string {
+      return this.outerParams
+    },
     getBaseUrl(): string {
       return this.baseUrl
     },
@@ -53,6 +58,7 @@ export const userStore = defineStore('embedded', {
       return {
         embeddedToken: this.token,
         busiFlag: this.busiFlag,
+        outerParams: this.outerParams,
         type: this.type,
         dvId: this.dvId,
         chartId: this.chartId,
@@ -71,6 +77,9 @@ export const userStore = defineStore('embedded', {
     setBusiFlag(busiFlag: string) {
       this.busiFlag = busiFlag
     },
+    setOuterParams(outerParams: string) {
+      this.outerParams = outerParams
+    },
     setBaseUrl(baseUrl: string) {
       this.baseUrl = baseUrl
     },
@@ -90,6 +99,7 @@ export const userStore = defineStore('embedded', {
       this.type = data['type']
       this.token = data['embeddedToken']
       this.busiFlag = data['busiFlag']
+      this.outerParams = data['outerParams']
       this.dvId = data['dvId']
       this.chartId = data['chartId']
       this.pid = data['pid']

core/core-frontend/src/views/chart/components/editor/index.vue

@@ -2173,7 +2173,7 @@ const drop = (ev: MouseEvent, type = 'xAxis') => {
                       </div>
                       <div
                         class="tree-btn"
-                        :class="isFilterActive && 'active'"
+                        :class="{ 'tree-btn--dark': themes === 'dark', active: isFilterActive }"
                         @click="openTreeFilter"
                       >
                         <el-icon>
@@ -3489,6 +3489,10 @@ span {
       cursor: pointer;
       justify-content: center;
       font-size: 12px;
+      &.tree-btn--dark {
+        background: rgba(235, 235, 235, 0.05);
+        border-color: #5f5f5f;
+      }
 
       &.active {
         color: #3370ff;

core/core-frontend/src/views/chart/components/editor/util/chart.ts

@@ -158,7 +158,8 @@ export const SENIOR_STYLE_SETTING_LIGHT = {
 
 export const SENIOR_STYLE_SETTING_DARK = {
   linkageIconColor: '#ffffff',
-  drillLayerColor: '#ffffff'
+  drillLayerColor: '#ffffff',
+  pagerColor: '#ffffff'
 }
 
 export const FILTER_COMMON_STYLE_BASE = {
@@ -1335,6 +1336,13 @@ export const CHART_TYPE_CONFIGS = [
         value: 'funnel',
         title: t('chart.chart_funnel'),
         icon: 'funnel'
+      },
+      {
+        render: 'antv',
+        category: 'relation',
+        value: 'sankey',
+        title: t('chart.chart_sankey'),
+        icon: 'sankey'
       }
     ]
   },

core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey-common.ts

@@ -0,0 +1,38 @@
+export const SANKEY_EDITOR_PROPERTY: EditorProperty[] = [
+  'background-overall-component',
+  'basic-style-selector',
+  'label-selector',
+  'tooltip-selector',
+  'title-selector',
+  'jump-set',
+  'linkage'
+]
+
+export const SANKEY_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
+  'background-overall-component': ['all'],
+  'basic-style-selector': ['colors', 'alpha', 'gradient'],
+  'label-selector': ['fontSize', 'color', 'labelFormatter'],
+  'tooltip-selector': ['fontSize', 'color', 'tooltipFormatter'],
+  'title-selector': [
+    'title',
+    'fontSize',
+    'color',
+    'hPosition',
+    'isItalic',
+    'isBolder',
+    'remarkShow',
+    'fontFamily',
+    'letterSpace',
+    'fontShadow'
+  ],
+  'function-cfg': ['slider', 'emptyDataStrategy']
+}
+
+export const SANKEY_AXIS_TYPE: AxisType[] = [
+  'xAxis',
+  'xAxisExt',
+  'yAxis',
+  'filter',
+  'extLabel',
+  'extTooltip'
+]

core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey.ts

@@ -0,0 +1,280 @@
+import {
+  G2PlotChartView,
+  G2PlotDrawOptions
+} from '@/views/chart/components/js/panel/types/impl/g2plot'
+import { Sankey, SankeyOptions } from '@antv/g2plot/esm/plots/sankey'
+import { getPadding, setGradientColor } from '@/views/chart/components/js/panel/common/common_antv'
+import { cloneDeep, get } from 'lodash-es'
+import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
+import { valueFormatter } from '@/views/chart/components/js/formatter'
+
+import { Datum } from '@antv/g2plot/esm/types/common'
+import { useI18n } from '@/hooks/web/useI18n'
+import {
+  SANKEY_AXIS_TYPE,
+  SANKEY_EDITOR_PROPERTY,
+  SANKEY_EDITOR_PROPERTY_INNER
+} from '@/views/chart/components/js/panel/charts/others/sankey-common'
+
+const { t } = useI18n()
+const DEFAULT_DATA = []
+
+/**
+ * 区间条形图
+ */
+export class RangeBar extends G2PlotChartView<SankeyOptions, Sankey> {
+  axisConfig = {
+    ...this['axisConfig'],
+    xAxis: {
+      name: `${t('chart.drag_block_type_axis_start')} / ${t('chart.dimension')}`,
+      limit: 1,
+      type: 'd'
+    },
+    xAxisExt: {
+      name: `${t('chart.drag_block_type_axis_end')} / ${t('chart.dimension')}`,
+      limit: 1,
+      type: 'd'
+    },
+    yAxis: {
+      name: `${t('chart.chart_data')} / ${t('chart.quota')}`,
+      limit: 1,
+      type: 'q'
+    }
+  }
+  properties = SANKEY_EDITOR_PROPERTY
+  propertyInner = {
+    ...SANKEY_EDITOR_PROPERTY_INNER,
+    'label-selector': ['color', 'fontSize'],
+    'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'tooltipFormatter']
+  }
+  axis: AxisType[] = [...SANKEY_AXIS_TYPE]
+  protected baseOptions: SankeyOptions = {
+    data: [],
+    sourceField: 'source',
+    targetField: 'target',
+    weightField: 'value',
+    rawFields: ['dimensionList', 'quotaList'],
+    interactions: [
+      {
+        type: 'legend-active',
+        cfg: {
+          start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
+          end: [{ trigger: 'legend-item:mouseleave', action: ['element-active:reset'] }]
+        }
+      },
+      {
+        type: 'legend-filter',
+        cfg: {
+          start: [
+            {
+              trigger: 'legend-item:click',
+              action: [
+                'list-unchecked:toggle',
+                'data-filter:filter',
+                'element-active:reset',
+                'element-highlight:reset'
+              ]
+            }
+          ]
+        }
+      },
+      {
+        type: 'tooltip',
+        cfg: {
+          start: [{ trigger: 'interval:mousemove', action: 'tooltip:show' }],
+          end: [{ trigger: 'interval:mouseleave', action: 'tooltip:hide' }]
+        }
+      },
+      {
+        type: 'active-region',
+        cfg: {
+          start: [{ trigger: 'interval:mousemove', action: 'active-region:show' }],
+          end: [{ trigger: 'interval:mouseleave', action: 'active-region:hide' }]
+        }
+      }
+    ]
+  }
+
+  drawChart(drawOptions: G2PlotDrawOptions<Sankey>): Sankey {
+    const { chart, container, action } = drawOptions
+    if (!chart.data?.data?.length) {
+      return
+    }
+    // data
+    const data: Array<any> = cloneDeep(chart.data.data)
+
+    data.forEach(d => {
+      if (d.dimensionList) {
+        if (d.dimensionList[0]) {
+          d.source = d.dimensionList[0].value
+        }
+        if (d.dimensionList[1]) {
+          d.target = d.dimensionList[1].value
+        }
+      }
+    })
+
+    // options
+    const initOptions: SankeyOptions = {
+      ...this.baseOptions,
+      appendPadding: getPadding(chart),
+      data,
+      nodeSort: (a, b) => {
+        // 这里是前端自己排序
+        if (chart.yAxis && chart.yAxis[0]) {
+          if (chart.yAxis[0].sort === 'asc') {
+            return a.value - b.value
+          } else if (chart.yAxis[0].sort === 'desc') {
+            return b.value - a.value
+          }
+        }
+
+        if (chart.xAxis && chart.xAxis[0] && a.sourceLinks.length > 0) {
+          if (chart.xAxis[0].sort === 'custom_sort' && chart.xAxis[0].customSort) {
+            return (
+              chart.xAxis[0].customSort.indexOf(a.name) - chart.xAxis[0].customSort.indexOf(b.name)
+            )
+          } else if (chart.xAxis[0].sort === 'asc') {
+            return a.name.localeCompare(b.name)
+          } else if (chart.xAxis[0].sort === 'desc') {
+            return b.name.localeCompare(a.name)
+          }
+        }
+        if (chart.xAxisExt && chart.xAxisExt[0] && a.targetLinks.length > 0) {
+          if (chart.xAxisExt[0].sort === 'custom_sort' && chart.xAxisExt[0].customSort) {
+            return (
+              chart.xAxisExt[0].customSort.indexOf(a.name) -
+              chart.xAxisExt[0].customSort.indexOf(b.name)
+            )
+          } else if (chart.xAxisExt[0].sort === 'asc') {
+            return a.name.localeCompare(b.name)
+          } else if (chart.xAxisExt[0].sort === 'desc') {
+            return b.name.localeCompare(a.name)
+          }
+        }
+
+        return b.value - a.value
+      }
+    }
+
+    const options = this.setupOptions(chart, initOptions)
+
+    // 开始渲染
+    const newChart = new Sankey(container, options)
+
+    newChart.on('edge:click', action)
+
+    return newChart
+  }
+
+  protected configTooltip(chart: Chart, options: SankeyOptions): SankeyOptions {
+    let tooltip
+    let customAttr: DeepPartial<ChartAttr>
+    if (chart.customAttr) {
+      customAttr = parseJson(chart.customAttr)
+      // tooltip
+      if (customAttr.tooltip) {
+        const t = JSON.parse(JSON.stringify(customAttr.tooltip))
+        if (t.show) {
+          tooltip = {
+            showTitle: false,
+            showMarkers: false,
+            shared: false,
+            // 内置：node 不显示 tooltip，edge 显示 tooltip
+            showContent: items => {
+              return !get(items, [0, 'data', 'isNode'])
+            },
+            formatter: (datum: Datum) => {
+              const { source, target, value } = datum
+              return {
+                name: source + ' -> ' + target,
+                value: valueFormatter(value, t.tooltipFormatter)
+              }
+            }
+          }
+        } else {
+          tooltip = false
+        }
+      }
+    }
+    return { ...options, tooltip }
+  }
+
+  protected configBasicStyle(chart: Chart, options: SankeyOptions): SankeyOptions {
+    const basicStyle = parseJson(chart.customAttr).basicStyle
+
+    let color = basicStyle.colors
+    color = color.map(ele => {
+      const tmp = hexColorToRGBA(ele, basicStyle.alpha)
+      if (basicStyle.gradient) {
+        return setGradientColor(tmp, true)
+      } else {
+        return tmp
+      }
+    })
+
+    options = {
+      ...options,
+      color
+    }
+    return options
+  }
+
+  setupDefaultOptions(chart: ChartObj): ChartObj {
+    const { customAttr, senior } = chart
+    const { label } = customAttr
+    if (!['left', 'middle', 'right'].includes(label.position)) {
+      label.position = 'middle'
+    }
+    senior.functionCfg.emptyDataStrategy = 'ignoreData'
+    return chart
+  }
+
+  protected configLabel(chart: Chart, options: SankeyOptions): SankeyOptions {
+    const labelAttr = parseJson(chart.customAttr).label
+    if (labelAttr.show) {
+      const label = {
+        //...tmpOptions.label,
+        formatter: ({ name }) => name,
+        callback: (x: number[]) => {
+          const isLast = x[1] === 1 // 最后一列靠边的节点
+          return {
+            style: {
+              fill: labelAttr.color,
+              fontSize: labelAttr.fontSize,
+              textAlign: isLast ? 'end' : 'start'
+            },
+            offsetX: isLast ? -8 : 8
+          }
+        },
+        layout: [{ type: 'hide-overlap' }, { type: 'limit-in-canvas' }]
+      }
+      return {
+        ...options,
+        label
+      }
+    } else {
+      return {
+        ...options,
+        label: false
+      }
+    }
+  }
+
+  protected setupOptions(chart: Chart, options: SankeyOptions): SankeyOptions {
+    return flow(
+      this.configTheme,
+      this.configBasicStyle,
+      this.configLabel,
+      this.configTooltip,
+      this.configLegend,
+      this.configSlider,
+      this.configAnalyseHorizontal,
+      this.configEmptyDataStrategy
+    )(chart, options)
+  }
+
+  constructor(name = 'sankey') {
+    super(name, DEFAULT_DATA)
+  }
+}

core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue

@@ -159,7 +159,6 @@ const renderG2Plot = (chart, chartView: G2PlotChartView<any, any>) => {
 const dynamicAreaId = ref('')
 const country = ref('')
 const appStore = useAppStoreWithOut()
-const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
 const chartContainer = ref<HTMLElement>(null)
 let mapTimer: number
 const renderL7Plot = async (chart: ChartObj, chartView: L7PlotChartView<any, any>, callback) => {
@@ -259,7 +258,7 @@ const trackClick = trackAction => {
       dvMainStore.addViewTrackFilter(linkageParam)
       break
     case 'jump':
-      if (isDataEaseBi.value || mobileInPc.value) return
+      if (mobileInPc.value) return
       emit('onJumpClick', jumpParam)
       break
     default:
@@ -282,11 +281,7 @@ const trackMenu = computed(() => {
         jumpCount++
       }
     })
-    jumpCount &&
+    jumpCount && view.value?.jumpActive && !mobileInPc.value && trackMenuInfo.push('jump')
-      view.value?.jumpActive &&
-      !isDataEaseBi.value &&
-      !mobileInPc.value &&
-      trackMenuInfo.push('jump')
     linkageCount && view.value?.linkageActive && trackMenuInfo.push('linkage')
     view.value.drillFields.length && trackMenuInfo.push('drill')
     // 如果同时配置jump linkage drill 切配置联动时同时下钻 在实际只显示两个 '跳转' '联动和下钻'

core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue

@@ -29,7 +29,8 @@ import { useEmitt } from '@/hooks/web/useEmitt'
 import { trackBarStyleCheck } from '@/utils/canvasUtils'
 
 const dvMainStore = dvMainStoreWithOut()
-const { nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc } = storeToRefs(dvMainStore)
+const { nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc, canvasStyleData } =
+  storeToRefs(dvMainStore)
 const { emitter } = useEmitt()
 
 const props = defineProps({
@@ -261,8 +262,6 @@ const action = param => {
 }
 const appStore = useAppStoreWithOut()
 
-const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
-
 const trackClick = trackAction => {
   const param = state.pointParam
   if (!param?.data?.dimensionList) {
@@ -295,7 +294,7 @@ const trackClick = trackAction => {
       dvMainStore.addViewTrackFilter(linkageParam)
       break
     case 'jump':
-      if (isDataEaseBi.value || mobileInPc.value) return
+      if (mobileInPc.value) return
       emit('onJumpClick', jumpParam)
       break
     default:
@@ -319,11 +318,7 @@ const trackMenu = computed(() => {
       jumpCount++
     }
   })
-  jumpCount &&
+  jumpCount && view.value?.jumpActive && !mobileInPc.value && trackMenuInfo.push('jump')
-    view.value?.jumpActive &&
-    !isDataEaseBi.value &&
-    !mobileInPc.value &&
-    trackMenuInfo.push('jump')
   linkageCount && view.value?.linkageActive && trackMenuInfo.push('linkage')
   view.value.drillFields.length && trackMenuInfo.push('drill')
   // 如果同时配置jump linkage drill 切配置联动时同时下钻 在实际只显示两个 '跳转' '联动和下钻'
@@ -420,6 +415,10 @@ const autoHeightStyle = computed(() => {
     height: 20 * scale.value + 8 + 'px'
   }
 })
+
+const tabStyle = computed(() => [
+  { '--de-pager-color': canvasStyleData.value.component.seniorStyleSetting.pagerColor }
+])
 </script>
 
 <template>
@@ -435,7 +434,7 @@ const autoHeightStyle = computed(() => {
       <div style="position: relative; height: 100%" :id="containerId"></div>
     </div>
     <el-row :style="autoStyle" v-if="showPage && !isError">
-      <div class="table-page-info">
+      <div class="table-page-info" :style="tabStyle">
         <div>共{{ state.pageInfo.total }}条</div>
         <el-pagination
           class="table-page-content"
@@ -474,16 +473,16 @@ const autoHeightStyle = computed(() => {
   height: 20px;
   display: flex;
   width: 100%;
-  color: grey;
+  color: var(--de-pager-color);
   :deep(.table-page-content) {
     button,
     button[disabled] {
-      color: grey;
+      color: var(--de-pager-color);
       background: transparent !important;
     }
     ul li {
       &:not(.is-active) {
-        color: grey;
+        color: var(--de-pager-color);
       }
       background: transparent !important;
     }

core/core-frontend/src/views/chart/components/views/components/DrillPath.vue

@@ -1,8 +1,10 @@
 <script lang="tsx" setup>
-import { reactive, watch } from 'vue'
+import { computed, reactive, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { reverseColor } from '../util/util'
 import { ArrowRight } from '@element-plus/icons-vue'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+const dvMainStore = dvMainStoreWithOut()
 
 const { t } = useI18n()
 
@@ -24,14 +26,18 @@ const state = reactive({
   textColor: '#bbbfc4'
 })
 
-watch(
+const textColor = computed(
-  [() => props.themeStyle?.backgroundColorSelect, () => props.themeStyle?.color],
+  () => dvMainStore.canvasStyleData.component.seniorStyleSetting.drillLayerColor
-  () => {
-    loadThemeStyle()
-  },
-  { deep: true }
 )
 
+// watch(
+//   [() => props.themeStyle?.backgroundColorSelect, () => props.themeStyle?.color],
+//   () => {
+//     loadThemeStyle()
+//   },
+//   { deep: true }
+// )
+
 const drillJump = index => {
   if (index < props.drillFilters.length) {
     emit('onDrillJump', index)
@@ -67,7 +73,7 @@ const loadThemeStyle = () => {
   <div v-if="props.drillFilters && props.drillFilters.length > 0" class="drill">
     <el-breadcrumb :separator-icon="ArrowRight" class="drill-style">
       <el-breadcrumb-item class="drill-item" @click="drillJump(0)">
-        <span :style="{ color: state.textColor }">{{ t('commons.all') }}</span>
+        <span :style="{ color: textColor }">{{ t('commons.all') }}</span>
       </el-breadcrumb-item>
       <el-breadcrumb-item
         v-for="(filter, index) in props.drillFilters"
@@ -75,7 +81,7 @@ const loadThemeStyle = () => {
         class="drill-item"
         @click="drillJump(index + 1)"
       >
-        <span :style="{ color: state.textColor }">{{ filter.value[0] }}</span>
+        <span :style="{ color: textColor }">{{ filter.value[0] }}</span>
       </el-breadcrumb-item>
     </el-breadcrumb>
   </div>

core/core-frontend/src/views/chart/components/views/index.vue

@@ -2,6 +2,8 @@
 import { useI18n } from '@/hooks/web/useI18n'
 import ChartComponentG2Plot from './components/ChartComponentG2Plot.vue'
 import DeIndicator from '@/custom-component/indicator/DeIndicator.vue'
+import { useAppStoreWithOut } from '@/store/modules/app'
+import { XpackComponent } from '@/components/plugin'
 import {
   computed,
   CSSProperties,
@@ -99,6 +101,7 @@ const props = defineProps({
 })
 const dynamicAreaId = ref('')
 const { view, showPosition, element, active, searchCount, scale } = toRefs(props)
+const appStore = useAppStoreWithOut()
 
 const titleShow = computed(
   () =>
@@ -235,6 +238,7 @@ watch([() => curComponent.value], () => {
     })
   }
 })
+const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
 
 const chartExtRequest = shallowRef(null)
 provide('chartExtRequest', chartExtRequest)
@@ -313,10 +317,21 @@ const filter = (firstLoad?: boolean) => {
 const onDrillFilters = param => {
   state.drillFilters = param ? param : []
 }
+const openHandler = ref(null)
+const initOpenHandler = newWindow => {
+  if (openHandler?.value) {
+    const pm = {
+      methodName: 'initOpenHandler',
+      args: newWindow
+    }
+    openHandler.value.invokeMethod(pm)
+  }
+}
 
 const windowsJump = (url, jumpType) => {
   try {
-    window.open(url, jumpType)
+    const newWindow = window.open(url, jumpType)
+    initOpenHandler(newWindow)
     if (jumpType === '_self') {
       location.reload()
     }
@@ -350,15 +365,19 @@ const jumpClick = param => {
     param.sourceDvId = dvInfo.value.id
     param.sourceViewId = param.viewId
     param.sourceFieldId = dimension.id
+    let embeddedBaseUrl = ''
+    if (isDataEaseBi.value) {
+      embeddedBaseUrl = embeddedStore.baseUrl
+    }
     // 内部仪表板跳转
     if (jumpInfo.linkType === 'inner') {
       if (jumpInfo.targetDvId) {
         if (publicLinkStatus.value) {
           // 判断是否有公共链接ID
           if (jumpInfo.publicJumpId) {
-            const url = `#/de-link/${jumpInfo.publicJumpId}?jumpInfoParam=${encodeURIComponent(
+            const url = `${embeddedBaseUrl}#/de-link/${
-              Base64.encode(JSON.stringify(param))
+              jumpInfo.publicJumpId
-            )}`
+            }?jumpInfoParam=${encodeURIComponent(Base64.encode(JSON.stringify(param)))}`
             const currentUrl = window.location.href
             localStorage.setItem('beforeJumpUrl', currentUrl)
             windowsJump(url, jumpInfo.jumpType)
@@ -366,9 +385,9 @@ const jumpClick = param => {
             ElMessage.warning(t('visualization.public_link_tips'))
           }
         } else {
-          const url = `#/preview?dvId=${jumpInfo.targetDvId}&jumpInfoParam=${encodeURIComponent(
+          const url = `${embeddedBaseUrl}#/preview?dvId=${
-            Base64.encode(JSON.stringify(param))
+            jumpInfo.targetDvId
-          )}`
+          }&jumpInfoParam=${encodeURIComponent(Base64.encode(JSON.stringify(param)))}`
           windowsJump(url, jumpInfo.jumpType)
         }
       } else {
@@ -713,6 +732,10 @@ const titleIconStyle = computed(() => {
       :view-icon="view.type"
     ></chart-empty-info>
     <drill-path :drill-filters="state.drillFilters" @onDrillJump="drillJump" />
+    <XpackComponent
+      ref="openHandler"
+      jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI="
+    />
   </div>
 </template>
 
@@ -741,11 +764,11 @@ const titleIconStyle = computed(() => {
     flex-wrap: nowrap;
     gap: 8px;
 
-    //color: #646a73;
+    color: #646a73;
-    //
+
-    //&.icons-container__dark {
+    &.icons-container__dark {
-    //  color: #a6a6a6;
+      color: #a6a6a6;
-    //}
+    }
 
     &.is-editing {
       gap: 6px;

core/core-frontend/src/views/data-visualization/PreviewCanvas.vue

@@ -10,6 +10,7 @@ import { getOuterParamsInfo } from '@/api/visualization/outerParams'
 import { ElMessage } from 'element-plus-secondary'
 import { useI18n } from '@/hooks/web/useI18n'
 import { XpackComponent } from '@/components/plugin'
+
 const dvMainStore = dvMainStoreWithOut()
 const { t } = useI18n()
 const state = reactive({
@@ -55,14 +56,16 @@ const loadCanvasDataAsync = async (dvId, dvType) => {
   }
 
   // 添加外部参数
-  const attachParamsEncode = router.currentRoute.value.query.attachParams
   let attachParam
+  await getOuterParamsInfo(dvId).then(rsp => {
+    dvMainStore.setNowPanelOuterParamsInfo(rsp.data)
+  })
+
+  // 外部参数（iframe 或者 iframe嵌入）
+  const attachParamsEncode = router.currentRoute.value.query.attachParams
   if (attachParamsEncode) {
     try {
       attachParam = JSON.parse(Base64.decode(decodeURIComponent(attachParamsEncode)))
-      await getOuterParamsInfo(dvId).then(rsp => {
-        dvMainStore.setNowPanelOuterParamsInfo(rsp.data)
-      })
     } catch (e) {
       console.error(e)
       ElMessage.error(t('visualization.outer_param_decode_error'))
@@ -97,6 +100,7 @@ const loadCanvasDataAsync = async (dvId, dvType) => {
     }
   )
 }
+
 let p = null
 const XpackLoaded = () => p(true)
 onMounted(async () => {
@@ -108,6 +112,7 @@ onMounted(async () => {
   }
   dvMainStore.setPublicLinkStatus(props.publicLinkStatus)
 })
+
 defineExpose({
   loadCanvasDataAsync
 })

core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue

@@ -708,12 +708,13 @@ const dragenter_handler = ev => {
 const drop_handler = ev => {
   ev.preventDefault()
   let data = ev.dataTransfer.getData('text')
-  const { tableName, type, datasourceId } = JSON.parse(data) as Table
+  const { tableName, type, datasourceId, name: noteName } = JSON.parse(data) as Table
   const extraData = {
     info: JSON.stringify({
       table: tableName,
       sql: ''
     }),
+    noteName,
     unionType: 'left',
     unionFields: [],
     currentDsFields: [],
@@ -1029,10 +1030,19 @@ const emits = defineEmits(['addComplete', 'joinEditor', 'updateAllfields', 'chan
     direction="rtl"
   >
     <template #header v-if="currentNode">
-      <div class="info">
+      <div class="info-content">
-        <span :title="currentNode.tableName" class="name ellipsis">{{
+        <div class="info">
-          currentNode.tableName
+          <span class="label">表名</span>
-        }}</span>
+          <span :title="currentNode.tableName" class="name ellipsis">{{
+            currentNode.tableName
+          }}</span>
+        </div>
+        <div class="info">
+          <span class="label">表备注</span>
+          <span :title="currentNode.noteName" class="name ellipsis">{{
+            currentNode.noteName || '-'
+          }}</span>
+        </div>
         <span :title="getDsName(currentNode.datasourceId)" class="ds ellipsis"
           >{{ t('auth.datasource') }}:{{ getDsName(currentNode.datasourceId) }}</span
         >
@@ -1082,15 +1092,25 @@ const emits = defineEmits(['addComplete', 'joinEditor', 'updateAllfields', 'chan
       top: 26px;
     }
 
+    .info-content {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
     .info {
       display: flex;
       flex-direction: column;
-      .name {
+      width: 50%;
+      .label {
         font-weight: 500;
         font-size: 16px;
         color: #1f2329;
         max-width: 500px;
       }
+      .name {
+        font-weight: 400;
+        font-size: 14px;
+      }
       .ds {
         font-weight: 400;
         font-size: 14px;

core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue

@@ -31,6 +31,7 @@ export interface ApiItem {
   fields: Field[]
   jsonFields: JsonField[]
   useJsonPath: boolean
+  apiQueryTimeout: number
   showApiStructure: boolean
   jsonPath: string
   serialNumber: number
@@ -81,6 +82,7 @@ let apiItem = reactive<ApiItem>({
   fields: [],
   jsonFields: [],
   useJsonPath: false,
+  apiQueryTimeout: 10,
   showApiStructure: false,
   jsonPath: '',
   serialNumber: -1
@@ -95,6 +97,24 @@ const loading = ref(false)
 const columns = shallowRef([])
 const tableData = shallowRef([])
 const apiItemBasicInfo = ref<FormInstance>()
+const isNumber = (rule, value, callback) => {
+  if (!value) {
+    callback(new Error(t('datasource.please_input_query_timeout')))
+    return
+  }
+  let isNumber = false
+  var reg = /^\d+$/
+  isNumber = reg.test(value)
+  if (!isNumber) {
+    callback(new Error(t('datasource.please_input_query_timeout')))
+    return
+  }
+  if (value <= 0 || value > 300) {
+    callback(new Error(t('datasource.please_input_query_timeout')))
+    return
+  }
+  callback()
+}
 const rule = reactive<FormRules>({
   name: [
     {
@@ -109,6 +129,13 @@ const rule = reactive<FormRules>({
       trigger: 'blur'
     }
   ],
+  apiQueryTimeout: [
+    {
+      required: true,
+      validator: isNumber,
+      trigger: ['blur', 'change']
+    }
+  ],
   url: [
     {
       required: true,
@@ -266,8 +293,8 @@ const previewData = () => {
   for (let i = 0; i < apiItem.fields.length; i++) {
     for (let j = 0; j < apiItem.fields[i].value.length; j++) {
       data[j][apiItem.fields[i].name] = apiItem.fields[i].value[j]
-      data[j]['id'] = apiItem.fields[i].name
     }
+
     columnTmp.push({
       key: apiItem.fields[i].name,
       dataKey: apiItem.fields[i].name,
@@ -429,7 +456,11 @@ defineExpose({
             />
           </el-form-item>
         </div>
-
+        <el-form-item :label="$t('datasource.query_timeout')" prop="apiQueryTimeout">
+          <el-input v-model="apiItem.apiQueryTimeout" autocomplete="off" type="number" :min="0">
+            <template v-slot:append>{{ $t('panel.second') }}</template>
+          </el-input>
+        </el-form-item>
         <div class="title-form_primary request-info">
           <span>{{ t('datasource.isUseJsonPath') }}</span>
         </div>

core/core-frontend/src/views/visualized/data/datasource/index.vue

@@ -91,7 +91,7 @@ const { width, node } = useMoveLine('DATASOURCE')
 
 const dsTableDetail = reactive({
   tableName: '',
-  remark: ''
+  name: ''
 })
 const rootManage = ref(false)
 const nickName = ref('')
@@ -1122,14 +1122,14 @@ const getMenuList = (val: boolean) => {
                 </el-col>
               </el-row>
               <template v-if="!['Excel', 'API'].includes(nodeInfo.type)">
-                <el-row :gutter="24" v-show="nodeInfo.configuration.urlType === 'hostName'">
+                <el-row :gutter="24" v-show="nodeInfo.configuration.urlType !== 'jdbcUrl'">
                   <el-col :span="12">
                     <BaseInfoItem :label="t('datasource.host')">{{
                       nodeInfo.configuration.host
                     }}</BaseInfoItem>
                   </el-col>
                 </el-row>
-                <el-row :gutter="24" v-show="nodeInfo.configuration.urlType === 'hostName'">
+                <el-row :gutter="24" v-show="nodeInfo.configuration.urlType !== 'jdbcUrl'">
                   <el-col :span="12">
                     <BaseInfoItem :label="t('datasource.port')">{{
                       nodeInfo.configuration.port
@@ -1141,7 +1141,7 @@ const getMenuList = (val: boolean) => {
                     }}</BaseInfoItem>
                   </el-col>
                 </el-row>
-                <el-row :gutter="24" v-show="nodeInfo.configuration.urlType === 'hostName'">
+                <el-row :gutter="24" v-show="nodeInfo.configuration.urlType !== 'jdbcUrl'">
                   <el-col :span="12">
                     <BaseInfoItem :label="t('datasource.user_name')">{{
                       nodeInfo.configuration.username
@@ -1153,14 +1153,14 @@ const getMenuList = (val: boolean) => {
                     }}</BaseInfoItem>
                   </el-col>
                 </el-row>
-                <el-row :gutter="24" v-show="nodeInfo.configuration.urlType !== 'hostName'">
+                <el-row :gutter="24" v-show="nodeInfo.configuration.urlType === 'jdbcUrl'">
                   <el-col :span="12">
                     <BaseInfoItem :label="t('datasource.jdbcUrl')">{{
                       nodeInfo.configuration.jdbcUrl
                     }}</BaseInfoItem>
                   </el-col>
                 </el-row>
-                <el-row :gutter="24" v-show="nodeInfo.configuration.urlType !== 'hostName'">
+                <el-row :gutter="24" v-show="nodeInfo.configuration.urlType === 'jdbcUrl'">
                   <el-col :span="12">
                     <BaseInfoItem :label="t('datasource.user_name')">{{
                       nodeInfo.configuration.username
@@ -1356,7 +1356,7 @@ const getMenuList = (val: boolean) => {
             {{ t('datasource.table_description') }}
           </p>
           <p class="table-value">
-            {{ dsTableDetail.remark || '-' }}
+            {{ dsTableDetail.name || '-' }}
           </p>
         </el-col>
       </el-row>

sdk/api/api-base/src/main/java/io/dataease/api/ds/vo/ApiDefinition.java

@@ -19,10 +19,8 @@ public class ApiDefinition {
     private ApiDefinitionRequest request;
     private String status;
     private List<Map<String, Object>> data = new ArrayList<>();
-
+    private Integer apiQueryTimeout = 10;
-
+    private int previewNum = 100;
-    private int previewNum = 10;
-    private int maxPreviewNum = 10;
     private int serialNumber;
     private boolean useJsonPath;
     private String jsonPath;