Merge remote-tracking branch 'origin/dev' into dev

backend/src/main/java/io/dataease/auth/aop/DePermissionAnnotationHandler.java

@@ -27,7 +27,11 @@ public class DePermissionAnnotationHandler {
 
     @Around(value = "@annotation(io.dataease.auth.annotation.DePermissions)")
     public Object PermissionsAround(ProceedingJoinPoint point) {
+
         try {
+            if (AuthUtils.getUser().getIsAdmin()) {
+                return point.proceed(point.getArgs());
+            }
             MethodSignature ms = (MethodSignature) point.getSignature();
             Method method = ms.getMethod();
             DePermissions annotation = method.getAnnotation(DePermissions.class);
@@ -47,13 +51,13 @@ public class DePermissionAnnotationHandler {
                 Boolean someAccess = false;
                 for (int i = 0; i < dePermissions.length; i++) {
                     DePermission permission = dePermissions[i];
-                    try{
+                    try {
                         boolean currentAccess = access(args[permission.paramIndex()], permission, 0);
                         if (currentAccess) {
                             someAccess = true;
                             break;
                         }
-                    }catch (Exception e) {
+                    } catch (Exception e) {
                         exceptions.add(e);
                     }
                 }
@@ -71,6 +75,9 @@ public class DePermissionAnnotationHandler {
     @Around(value = "@annotation(io.dataease.auth.annotation.DePermission)")
     public Object PermissionAround(ProceedingJoinPoint point) {
         try {
+            if (AuthUtils.getUser().getIsAdmin()) {
+                return point.proceed(point.getArgs());
+            }
             MethodSignature ms = (MethodSignature) point.getSignature();
             Method method = ms.getMethod();
 
@@ -88,20 +95,22 @@ public class DePermissionAnnotationHandler {
     }
 
     private Boolean access(Object arg, DePermission annotation, int layer) throws Exception {
-        if (ObjectUtils.isEmpty(arg)) return true;
+        if (ObjectUtils.isEmpty(arg))
+            return true;
         String type = annotation.type().name().toLowerCase();
         String value = annotation.value();
         Integer requireLevel = annotation.level().getLevel();
 
         Set<String> resourceIds = AuthUtils.permissionByType(type).stream().filter(
-                item -> item.getLevel() >= requireLevel
-        ).map(AuthItem::getAuthSource).collect(Collectors.toSet());
+                item -> item.getLevel() >= requireLevel).map(AuthItem::getAuthSource).collect(Collectors.toSet());
 
         Class<?> parameterType = arg.getClass();
         if (parameterType.isPrimitive() || isWrapClass(parameterType) || isString(parameterType)) {
             boolean permissionValid = resourceIds.contains(arg);
-            if (permissionValid) return true;
-            throw new UnauthorizedException("Subject does not have permission[" + annotation.level().name() +":"+ annotation.type() + ":" + arg + "]");
+            if (permissionValid)
+                return true;
+            throw new UnauthorizedException("Subject does not have permission[" + annotation.level().name() + ":"
+                    + annotation.type() + ":" + arg + "]");
         } else if (isArray(parameterType)) {
             for (int i = 0; i < Array.getLength(arg); i++) {
                 Object o = Array.get(arg, i);
@@ -124,7 +133,7 @@ public class DePermissionAnnotationHandler {
             Object o = argMap.get(values[layer]);
             return access(o, annotation, ++layer);
         } else {
-            //当作自定义类处理
+            // 当作自定义类处理
             String[] values = value.split("u002E");
             String fieldName = values[layer];
 
@@ -135,7 +144,7 @@ public class DePermissionAnnotationHandler {
         return true;
     }
 
-    private Object getFieldValue(Object o, String fieldName) throws Exception{
+    private Object getFieldValue(Object o, String fieldName) throws Exception {
         Class<?> aClass = o.getClass();
         while (null != aClass.getSuperclass()) {
             Field[] declaredFields = aClass.getDeclaredFields();
@@ -183,5 +192,4 @@ public class DePermissionAnnotationHandler {
         return Arrays.stream(wrapClasies).anyMatch(item -> StringUtils.equals(item, clz.getName()));
     }
 
-
 }

backend/src/main/java/io/dataease/base/domain/ChartViewWithBLOBs.java

@@ -13,6 +13,8 @@ import lombok.ToString;
 public class ChartViewWithBLOBs extends ChartView implements Serializable {
     @ApiModelProperty("x轴")
     private String xAxis;
+    @ApiModelProperty("x轴(Row)")
+    private String xAxisExt;
     @ApiModelProperty("y轴")
     private String yAxis;
     @ApiModelProperty("副y轴")

backend/src/main/java/io/dataease/base/mapper/ChartViewMapper.xml

@@ -18,6 +18,7 @@
   </resultMap>
   <resultMap extends="BaseResultMap" id="ResultMapWithBLOBs" type="io.dataease.base.domain.ChartViewWithBLOBs">
     <result column="x_axis" jdbcType="LONGVARCHAR" property="xAxis" />
+    <result column="x_axis_ext" jdbcType="LONGVARCHAR" property="xAxisExt" />
     <result column="y_axis" jdbcType="LONGVARCHAR" property="yAxis" />
     <result column="y_axis_ext" jdbcType="LONGVARCHAR" property="yAxisExt" />
     <result column="ext_stack" jdbcType="LONGVARCHAR" property="extStack" />
@@ -91,8 +92,8 @@
     create_by, create_time, update_time, style_priority
   </sql>
   <sql id="Blob_Column_List">
-    x_axis, y_axis, y_axis_ext, ext_stack, ext_bubble, custom_attr, custom_style, custom_filter, 
-    drill_fields, snapshot
+    x_axis, x_axis_ext, y_axis, y_axis_ext, ext_stack, ext_bubble, custom_attr, custom_style, 
+    custom_filter, drill_fields, snapshot
   </sql>
   <select id="selectByExampleWithBLOBs" parameterType="io.dataease.base.domain.ChartViewExample" resultMap="ResultMapWithBLOBs">
     select
@@ -147,18 +148,20 @@
       table_id, `type`, render, 
       result_count, result_mode, title, 
       create_by, create_time, update_time, 
-      style_priority, x_axis, y_axis, 
-      y_axis_ext, ext_stack, ext_bubble, 
-      custom_attr, custom_style, custom_filter, 
-      drill_fields, snapshot)
+      style_priority, x_axis, x_axis_ext, 
+      y_axis, y_axis_ext, ext_stack, 
+      ext_bubble, custom_attr, custom_style, 
+      custom_filter, drill_fields, snapshot
+      )
     values (#{id,jdbcType=VARCHAR}, #{name,jdbcType=VARCHAR}, #{sceneId,jdbcType=VARCHAR}, 
       #{tableId,jdbcType=VARCHAR}, #{type,jdbcType=VARCHAR}, #{render,jdbcType=VARCHAR}, 
       #{resultCount,jdbcType=INTEGER}, #{resultMode,jdbcType=VARCHAR}, #{title,jdbcType=VARCHAR}, 
       #{createBy,jdbcType=VARCHAR}, #{createTime,jdbcType=BIGINT}, #{updateTime,jdbcType=BIGINT}, 
-      #{stylePriority,jdbcType=VARCHAR}, #{xAxis,jdbcType=LONGVARCHAR}, #{yAxis,jdbcType=LONGVARCHAR}, 
-      #{yAxisExt,jdbcType=LONGVARCHAR}, #{extStack,jdbcType=LONGVARCHAR}, #{extBubble,jdbcType=LONGVARCHAR}, 
-      #{customAttr,jdbcType=LONGVARCHAR}, #{customStyle,jdbcType=LONGVARCHAR}, #{customFilter,jdbcType=LONGVARCHAR}, 
-      #{drillFields,jdbcType=LONGVARCHAR}, #{snapshot,jdbcType=LONGVARCHAR})
+      #{stylePriority,jdbcType=VARCHAR}, #{xAxis,jdbcType=LONGVARCHAR}, #{xAxisExt,jdbcType=LONGVARCHAR}, 
+      #{yAxis,jdbcType=LONGVARCHAR}, #{yAxisExt,jdbcType=LONGVARCHAR}, #{extStack,jdbcType=LONGVARCHAR}, 
+      #{extBubble,jdbcType=LONGVARCHAR}, #{customAttr,jdbcType=LONGVARCHAR}, #{customStyle,jdbcType=LONGVARCHAR}, 
+      #{customFilter,jdbcType=LONGVARCHAR}, #{drillFields,jdbcType=LONGVARCHAR}, #{snapshot,jdbcType=LONGVARCHAR}
+      )
   </insert>
   <insert id="insertSelective" parameterType="io.dataease.base.domain.ChartViewWithBLOBs">
     insert into chart_view
@@ -205,6 +208,9 @@
       <if test="xAxis != null">
         x_axis,
       </if>
+      <if test="xAxisExt != null">
+        x_axis_ext,
+      </if>
       <if test="yAxis != null">
         y_axis,
       </if>
@@ -276,6 +282,9 @@
       <if test="xAxis != null">
         #{xAxis,jdbcType=LONGVARCHAR},
       </if>
+      <if test="xAxisExt != null">
+        #{xAxisExt,jdbcType=LONGVARCHAR},
+      </if>
       <if test="yAxis != null">
         #{yAxis,jdbcType=LONGVARCHAR},
       </if>
@@ -356,6 +365,9 @@
       <if test="record.xAxis != null">
         x_axis = #{record.xAxis,jdbcType=LONGVARCHAR},
       </if>
+      <if test="record.xAxisExt != null">
+        x_axis_ext = #{record.xAxisExt,jdbcType=LONGVARCHAR},
+      </if>
       <if test="record.yAxis != null">
         y_axis = #{record.yAxis,jdbcType=LONGVARCHAR},
       </if>
@@ -404,6 +416,7 @@
       update_time = #{record.updateTime,jdbcType=BIGINT},
       style_priority = #{record.stylePriority,jdbcType=VARCHAR},
       x_axis = #{record.xAxis,jdbcType=LONGVARCHAR},
+      x_axis_ext = #{record.xAxisExt,jdbcType=LONGVARCHAR},
       y_axis = #{record.yAxis,jdbcType=LONGVARCHAR},
       y_axis_ext = #{record.yAxisExt,jdbcType=LONGVARCHAR},
       ext_stack = #{record.extStack,jdbcType=LONGVARCHAR},
@@ -478,6 +491,9 @@
       <if test="xAxis != null">
         x_axis = #{xAxis,jdbcType=LONGVARCHAR},
       </if>
+      <if test="xAxisExt != null">
+        x_axis_ext = #{xAxisExt,jdbcType=LONGVARCHAR},
+      </if>
       <if test="yAxis != null">
         y_axis = #{yAxis,jdbcType=LONGVARCHAR},
       </if>
@@ -523,6 +539,7 @@
       update_time = #{updateTime,jdbcType=BIGINT},
       style_priority = #{stylePriority,jdbcType=VARCHAR},
       x_axis = #{xAxis,jdbcType=LONGVARCHAR},
+      x_axis_ext = #{xAxisExt,jdbcType=LONGVARCHAR},
       y_axis = #{yAxis,jdbcType=LONGVARCHAR},
       y_axis_ext = #{yAxisExt,jdbcType=LONGVARCHAR},
       ext_stack = #{extStack,jdbcType=LONGVARCHAR},

backend/src/main/java/io/dataease/commons/utils/ZipUtils.java

@@ -6,6 +6,8 @@ import java.util.zip.ZipEntry;
 import java.util.zip.ZipException;
 import java.util.zip.ZipFile;
 import java.util.zip.ZipInputStream;
+import java.nio.file.Path;
+import java.nio.file.Paths;
 
 public class ZipUtils {
 
@@ -29,7 +31,7 @@ public class ZipUtils {
             ZipEntry ze = zis.getNextEntry();
             while (ze != null) {
                 String fileName = ze.getName();
-                File newFile = new File(outputFolder + File.separator + fileName);
+                File newFile = protectZipSlip(fileName, outputFolder);
                 //大部分网络上的源码，这里没有判断子目录
                 if (ze.isDirectory()) {
                     if (!newFile.mkdirs()) {
@@ -60,7 +62,7 @@ public class ZipUtils {
 
             while (entry != null) {
 
-                File file = new File(out, entry.getName());
+                File file = protectZipSlip(entry.getName(), out);
 
                 if (entry.isDirectory()) {
                     if (!file.mkdirs()) {
@@ -130,4 +132,17 @@ public class ZipUtils {
 
         }
     }
+    public static File protectZipSlip(String fileName, String destDir) throws IOException{
+        Path destPath = Paths.get(destDir);
+        Path resolvedDest = destPath.resolve(fileName);
+        Path normalizedPath = resolvedDest.normalize();
+
+        // checking whether zipEntry filename has changed the destination
+        if (!normalizedPath.startsWith(destDir)) {
+            throw new IOException("Malicious zip entry found: " + fileName);
+        }
+
+        File newFile = normalizedPath.toFile();
+        return newFile;
+    }
 }

backend/src/main/java/io/dataease/plugins/server/ColumnPermissionsController.java

@@ -29,7 +29,7 @@ public class ColumnPermissionsController {
 
     @ApiOperation("保存")
     @PostMapping("save")
-    public void save(@RequestBody DatasetColumnPermissions datasetColumnPermissions) throws Exception {
+    public DatasetColumnPermissions save(@RequestBody DatasetColumnPermissions datasetColumnPermissions) throws Exception {
         ColumnPermissionService columnPermissionService = SpringContextUtil.getBean(ColumnPermissionService.class);
         DataSetColumnPermissionsDTO request = new DataSetColumnPermissionsDTO();
         request.setAuthTargetType(datasetColumnPermissions.getAuthTargetType());
@@ -48,7 +48,7 @@ public class ColumnPermissionsController {
                 throw new Exception(Translator.get("i18n_cp_exist"));
             }
         }
-        columnPermissionService.save(datasetColumnPermissions);
+        return columnPermissionService.save(datasetColumnPermissions);
     }
 
     @ApiOperation("查询")

backend/src/main/java/io/dataease/provider/datasource/JdbcProvider.java

@@ -282,7 +282,7 @@ public class JdbcProvider extends DatasourceProvider {
             String f = metaData.getColumnName(j + 1);
             String l = StringUtils.isNotEmpty(metaData.getColumnLabel(j + 1)) ? metaData.getColumnLabel(j + 1) : f;
             String t = metaData.getColumnTypeName(j + 1);
-            if (datasourceRequest.getDatasource().getType().equalsIgnoreCase(DatasourceTypes.hive.name())) {
+            if (datasourceRequest.getDatasource().getType().equalsIgnoreCase(DatasourceTypes.hive.name()) && l.contains("\\.")) {
                 l = l.split("\\.")[1];
             }
             TableFiled field = new TableFiled();

backend/src/main/java/io/dataease/provider/query/es/EsQueryProvider.java

@@ -942,24 +942,24 @@ public class EsQueryProvider extends QueryProvider {
         }
 
         if (StringUtils.isEmpty(dateStyle)) {
-            return "YYYY-MM-dd HH:mm:ss";
+            return "yyyy-MM-dd HH:mm:ss";
         }
 
         switch (dateStyle) {
             case "y":
-                return "YYYY";
+                return "yyyy";
             case "y_M":
-                return "YYYY" + split + "MM";
+                return "yyyy" + split + "MM";
             case "y_M_d":
-                return "YYYY" + split + "MM" + split + "dd";
+                return "yyyy" + split + "MM" + split + "dd";
             case "H_m_s":
                 return "HH:mm:ss";
             case "y_M_d_H_m":
-                return "YYYY" + split + "MM" + split + "dd" + " HH:mm";
+                return "yyyy" + split + "MM" + split + "dd" + " HH:mm";
             case "y_M_d_H_m_s":
-                return "YYYY" + split + "MM" + split + "dd" + " HH:mm:ss";
+                return "yyyy" + split + "MM" + split + "dd" + " HH:mm:ss";
             default:
-                return "YYYY-MM-dd HH:mm:ss";
+                return "yyyy-MM-dd HH:mm:ss";
         }
     }
 

backend/src/main/java/io/dataease/provider/query/es/EsSqlLConstants.java

@@ -21,7 +21,7 @@ public class EsSqlLConstants extends SQLConstants {
 
     public static final String ROUND = "ROUND(%s, %s)";
 
-    public static final String DEFAULT_DATE_FORMAT = "YYYY-MM-dd HH:mm:ss";
+    public static final String DEFAULT_DATE_FORMAT = "yyyy-MM-dd HH:mm:ss";
 
     public static final String WHERE_VALUE_NULL = "(NULL,'')";
 

backend/src/main/java/io/dataease/provider/query/mongodb/MongoQueryProvider.java

@@ -116,7 +116,7 @@ public class MongoQueryProvider extends QueryProvider {
         st_sql.add("isGroup", isGroup);
         if (CollectionUtils.isNotEmpty(xFields)) {
             st_sql.add("groups", xFields);
-//            st_sql.add("notUseAs", true);
+            st_sql.add("notUseAs", true);
         }
         if (ObjectUtils.isNotEmpty(tableObj)) st_sql.add("table", tableObj);
         String customWheres = transCustomFilterList(tableObj, fieldCustomFilter);
@@ -238,7 +238,7 @@ public class MongoQueryProvider extends QueryProvider {
         ST st_sql = stg.getInstanceOf("querySql");
         if (CollectionUtils.isNotEmpty(xFields)) {
             st_sql.add("groups", xFields);
-//            st_sql.add("notUseAs", true);
+            st_sql.add("notUseAs", true);
         }
         if (CollectionUtils.isNotEmpty(yFields)) {
             st_sql.add("aggregators", yFields);
@@ -313,7 +313,7 @@ public class MongoQueryProvider extends QueryProvider {
         st_sql.add("isGroup", false);
         if (CollectionUtils.isNotEmpty(xFields)) {
             st_sql.add("groups", xFields);
-//            st_sql.add("notUseAs", true);
+            st_sql.add("notUseAs", true);
         }
         if (CollectionUtils.isNotEmpty(wheres)) st_sql.add("filters", wheres);
         if (ObjectUtils.isNotEmpty(tableObj)) st_sql.add("table", tableObj);
@@ -431,7 +431,7 @@ public class MongoQueryProvider extends QueryProvider {
         ST st_sql = stg.getInstanceOf("querySql");
         if (CollectionUtils.isNotEmpty(xFields)) {
             st_sql.add("groups", xFields);
-//            st_sql.add("notUseAs", true);
+            st_sql.add("notUseAs", true);
         }
         if (CollectionUtils.isNotEmpty(yFields)) {
             st_sql.add("aggregators", yFields);
@@ -547,7 +547,7 @@ public class MongoQueryProvider extends QueryProvider {
         ST st_sql = stg.getInstanceOf("querySql");
         if (CollectionUtils.isNotEmpty(xFields)) {
             st_sql.add("groups", xFields);
-//            st_sql.add("notUseAs", true);
+            st_sql.add("notUseAs", true);
         }
         if (CollectionUtils.isNotEmpty(yFields)) {
             st_sql.add("aggregators", yFields);

backend/src/main/java/io/dataease/service/chart/ChartViewService.java

@@ -219,6 +219,11 @@ public class ChartViewService {
         }
         List<ChartViewFieldDTO> xAxis = new Gson().fromJson(view.getXAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
         }.getType());
+        if (StringUtils.equalsIgnoreCase(view.getType(), "table-pivot")) {
+            List<ChartViewFieldDTO> xAxisExt = new Gson().fromJson(view.getXAxisExt(), new TypeToken<List<ChartViewFieldDTO>>() {
+            }.getType());
+            xAxis.addAll(xAxisExt);
+        }
         List<ChartViewFieldDTO> yAxis = new Gson().fromJson(view.getYAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
         }.getType());
         if (StringUtils.equalsIgnoreCase(view.getType(), "chart-mix")) {
@@ -305,10 +310,10 @@ public class ChartViewService {
                         filterRequest.setFieldId(fId);
 
                         DatasetTableField datasetTableField = dataSetTableFieldsService.get(fId);
-                        if(datasetTableField == null){
+                        if (datasetTableField == null) {
                             continue;
                         }
-                        if(!desensitizationList.contains(datasetTableField.getDataeaseName()) && dataeaseNames.contains(datasetTableField.getDataeaseName())){
+                        if (!desensitizationList.contains(datasetTableField.getDataeaseName()) && dataeaseNames.contains(datasetTableField.getDataeaseName())) {
                             filterRequest.setDatasetTableField(datasetTableField);
                             if (StringUtils.equalsIgnoreCase(datasetTableField.getTableId(), view.getTableId())) {
                                 if (CollectionUtils.isNotEmpty(filterRequest.getViewIds())) {
@@ -329,7 +334,7 @@ public class ChartViewService {
         if (ObjectUtils.isNotEmpty(requestList.getLinkageFilters())) {
             for (ChartExtFilterRequest request : requestList.getLinkageFilters()) {
                 DatasetTableField datasetTableField = dataSetTableFieldsService.get(request.getFieldId());
-                if(!desensitizationList.contains(datasetTableField.getDataeaseName()) && dataeaseNames.contains(datasetTableField.getDataeaseName())){
+                if (!desensitizationList.contains(datasetTableField.getDataeaseName()) && dataeaseNames.contains(datasetTableField.getDataeaseName())) {
                     request.setDatasetTableField(datasetTableField);
                     if (StringUtils.equalsIgnoreCase(datasetTableField.getTableId(), view.getTableId())) {
                         if (CollectionUtils.isNotEmpty(request.getViewIds())) {
@@ -814,34 +819,68 @@ public class ChartViewService {
                 }
             }
 
-            for (int i = xAxis.size(); i < xAxis.size() + yAxis.size(); i++) {
-                AxisChartDataAntVDTO axisChartDataDTO = new AxisChartDataAntVDTO();
-                axisChartDataDTO.setField(a.toString());
-                axisChartDataDTO.setName(a.toString());
+            if (StringUtils.containsIgnoreCase(view.getType(), "table")) {
+                for (int i = 0; i < xAxis.size() + yAxis.size(); i++) {
+                    AxisChartDataAntVDTO axisChartDataDTO = new AxisChartDataAntVDTO();
+                    axisChartDataDTO.setField(a.toString());
+                    axisChartDataDTO.setName(a.toString());
 
-                List<ChartDimensionDTO> dimensionList = new ArrayList<>();
-                List<ChartQuotaDTO> quotaList = new ArrayList<>();
+                    List<ChartDimensionDTO> dimensionList = new ArrayList<>();
+                    List<ChartQuotaDTO> quotaList = new ArrayList<>();
 
-                for (int j = 0; j < xAxis.size(); j++) {
-                    ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
-                    chartDimensionDTO.setId(xAxis.get(j).getId());
-                    chartDimensionDTO.setValue(row[j]);
-                    dimensionList.add(chartDimensionDTO);
+                    for (int j = 0; j < xAxis.size(); j++) {
+                        ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
+                        chartDimensionDTO.setId(xAxis.get(j).getId());
+                        chartDimensionDTO.setValue(row[j]);
+                        dimensionList.add(chartDimensionDTO);
+                    }
+                    axisChartDataDTO.setDimensionList(dimensionList);
+
+                    int j = i - xAxis.size();
+                    if (j > -1) {
+                        ChartQuotaDTO chartQuotaDTO = new ChartQuotaDTO();
+                        chartQuotaDTO.setId(yAxis.get(j).getId());
+                        quotaList.add(chartQuotaDTO);
+                        axisChartDataDTO.setQuotaList(quotaList);
+                        try {
+                            axisChartDataDTO.setValue(StringUtils.isEmpty(row[i]) ? null : new BigDecimal(row[i]));
+                        } catch (Exception e) {
+                            axisChartDataDTO.setValue(new BigDecimal(0));
+                        }
+                        axisChartDataDTO.setCategory(yAxis.get(j).getName());
+                    }
+                    datas.add(axisChartDataDTO);
                 }
-                axisChartDataDTO.setDimensionList(dimensionList);
+            } else {
+                for (int i = xAxis.size(); i < xAxis.size() + yAxis.size(); i++) {
+                    AxisChartDataAntVDTO axisChartDataDTO = new AxisChartDataAntVDTO();
+                    axisChartDataDTO.setField(a.toString());
+                    axisChartDataDTO.setName(a.toString());
 
-                int j = i - xAxis.size();
-                ChartQuotaDTO chartQuotaDTO = new ChartQuotaDTO();
-                chartQuotaDTO.setId(yAxis.get(j).getId());
-                quotaList.add(chartQuotaDTO);
-                axisChartDataDTO.setQuotaList(quotaList);
-                try {
-                    axisChartDataDTO.setValue(StringUtils.isEmpty(row[i]) ? null : new BigDecimal(row[i]));
-                } catch (Exception e) {
-                    axisChartDataDTO.setValue(new BigDecimal(0));
+                    List<ChartDimensionDTO> dimensionList = new ArrayList<>();
+                    List<ChartQuotaDTO> quotaList = new ArrayList<>();
+
+                    for (int j = 0; j < xAxis.size(); j++) {
+                        ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
+                        chartDimensionDTO.setId(xAxis.get(j).getId());
+                        chartDimensionDTO.setValue(row[j]);
+                        dimensionList.add(chartDimensionDTO);
+                    }
+                    axisChartDataDTO.setDimensionList(dimensionList);
+
+                    int j = i - xAxis.size();
+                    ChartQuotaDTO chartQuotaDTO = new ChartQuotaDTO();
+                    chartQuotaDTO.setId(yAxis.get(j).getId());
+                    quotaList.add(chartQuotaDTO);
+                    axisChartDataDTO.setQuotaList(quotaList);
+                    try {
+                        axisChartDataDTO.setValue(StringUtils.isEmpty(row[i]) ? null : new BigDecimal(row[i]));
+                    } catch (Exception e) {
+                        axisChartDataDTO.setValue(new BigDecimal(0));
+                    }
+                    axisChartDataDTO.setCategory(yAxis.get(j).getName());
+                    datas.add(axisChartDataDTO);
                 }
-                axisChartDataDTO.setCategory(yAxis.get(j).getName());
-                datas.add(axisChartDataDTO);
             }
         }
         map.put("datas", datas);

backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java

@@ -1697,6 +1697,8 @@ public class DataSetTableService {
         if (datasetTableIncrementalConfig == null || StringUtils.isEmpty(datasetTableIncrementalConfig.getTableId())) {
             return;
         }
+        datasetTableIncrementalConfig.setIncrementalAdd(datasetTableIncrementalConfig.getIncrementalAdd().trim());
+        datasetTableIncrementalConfig.setIncrementalDelete(datasetTableIncrementalConfig.getIncrementalDelete().trim());
         if (StringUtils.isEmpty(datasetTableIncrementalConfig.getId())) {
             datasetTableIncrementalConfig.setId(UUID.randomUUID().toString());
             datasetTableIncrementalConfigMapper.insertSelective(datasetTableIncrementalConfig);

backend/src/main/resources/db/migration/V32__1.8.sql

@@ -0,0 +1,2 @@
+ALTER TABLE `chart_view` ADD COLUMN `x_axis_ext` LONGTEXT COMMENT 'table-row' AFTER `x_axis`;
+UPDATE `chart_view` SET `x_axis_ext` = '[]';

backend/src/main/resources/generatorConfig.xml

@@ -60,6 +60,6 @@
         </javaClientGenerator>
 
         <!--要生成的数据库表 -->
-        <table tableName="dataset_column_permissions"/>
+        <table tableName="chart_view"/>
     </context>
 </generatorConfiguration>

backend/src/main/resources/sql/sqlTemplate.stg

@@ -14,10 +14,7 @@ SELECT
     <groups:{group|<if(group)><group.fieldName> AS <group.fieldAlias><endif>}; separator=",\n">
 <endif>
     <if(groups && aggregators)>,<endif>
-<if(aggregators && notUseAs)>
-    <aggregators:{agg|<if(agg)><agg.fieldName> <endif>}; separator=",\n">
-<endif>
-<if(aggregators && !notUseAs)>
+<if(aggregators)>
     <aggregators:{agg|<if(agg)><agg.fieldName> AS <agg.fieldAlias><endif>}; separator=",\n">
 <endif>
 FROM
@@ -53,10 +50,7 @@ SELECT
     <groups:{group|<if(group)><group.fieldName> AS <group.fieldAlias><endif>}; separator=",\n">
 <endif>
     <if(groups && aggregators)>,<endif>
-<if(aggregators && notUseAs)>
-    <aggregators:{agg|<if(agg)><agg.fieldName> <endif>}; separator=",\n">
-<endif>
-<if(aggregators && !notUseAs)>
+<if(aggregators)>
     <aggregators:{agg|<if(agg)><agg.fieldName> AS <agg.fieldAlias><endif>}; separator=",\n">
 <endif>
 FROM

frontend/package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@antv/g2plot": "^2.3.32",
-    "@antv/s2": "^1.6.0",
+    "@antv/s2": "^1.7.0",
     "@riophae/vue-treeselect": "0.4.0",
     "@tinymce/tinymce-vue": "^3.2.8",
     "axios": "^0.21.1",

frontend/src/components/canvas/custom-component/UserView.vue

@@ -37,6 +37,16 @@
       @onChartClick="chartClick"
       @onJumpClick="jumpClick"
     />
+    <chart-component-s2
+      v-if="charViewS2ShowFlag"
+      :ref="element.propValue.id"
+      class="chart-class"
+      :chart="chart"
+      :track-menu="trackMenu"
+      :search-count="searchCount"
+      @onChartClick="chartClick"
+      @onJumpClick="jumpClick"
+    />
     <table-normal
       v-if="tableShowFlag"
       :ref="element.propValue.id"
@@ -45,7 +55,7 @@
       class="table-class"
     />
     <label-normal v-if="labelShowFlag" :ref="element.propValue.id" :chart="chart" class="table-class" />
-    <div style="position: absolute;left: 20px;bottom:14px;">
+    <div style="position: absolute;left: 8px;bottom:8px;">
       <drill-path :drill-filters="drillFilters" @onDrillJump="drillJump" />
     </div>
   </div>
@@ -71,10 +81,11 @@ import { areaMapping } from '@/api/map/map'
 import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
 import EditBarView from '@/components/canvas/components/Editor/EditBarView'
 import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style'
+import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 
 export default {
   name: 'UserView',
-  components: { EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
+  components: { ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
   props: {
     element: {
       type: Object,
@@ -169,8 +180,11 @@ export default {
     charViewG2ShowFlag() {
       return this.httpRequest.status && this.chart.type && !this.chart.type.includes('table') && !this.chart.type.includes('text') && this.renderComponent() === 'antv'
     },
+    charViewS2ShowFlag() {
+      return this.httpRequest.status && this.chart.type && this.chart.type.includes('table') && !this.chart.type.includes('text') && this.renderComponent() === 'antv'
+    },
     tableShowFlag() {
-      return this.httpRequest.status && this.chart.type && this.chart.type.includes('table')
+      return this.httpRequest.status && this.chart.type && this.chart.type.includes('table') && this.renderComponent() === 'echarts'
     },
     labelShowFlag() {
       return this.httpRequest.status && this.chart.type && this.chart.type.includes('text')

frontend/src/components/widget/serviceImpl/NumberRangeServiceImpl.js

@@ -70,7 +70,7 @@ class NumberRangeServiceImpl extends WidgetService {
 
   getParam(element) {
     if (element.options.value && element.options.value.length > 0) {
-      const values = this.element.options.value
+      const values = element.options.value
       const min = values[0]
       let max = null
       if (values.length > 1) {

frontend/src/components/widget/serviceImpl/NumberSelectGridServiceImpl.js

@@ -82,7 +82,7 @@ class NumberSelectGridServiceImpl extends WidgetService {
     })
   }
   getParam(element) {
-    const value = element.options.value
+    const value = this.fillValueDerfault(element)
     const param = {
       component: element,
       value: !value ? [] : Array.isArray(value) ? value : value.toString().split(','),
@@ -90,6 +90,16 @@ class NumberSelectGridServiceImpl extends WidgetService {
     }
     return param
   }
+  fillValueDerfault(element) {
+    const defaultV = element.options.value === null ? '' : element.options.value.toString()
+    if (element.options.attrs.multiple) {
+      if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') return []
+      return defaultV.split(',')
+    } else {
+      if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') return null
+      return defaultV.split(',')[0]
+    }
+  }
 }
 const numberSelectGridServiceImpl = new NumberSelectGridServiceImpl()
 export default numberSelectGridServiceImpl

frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js

@@ -83,7 +83,7 @@ class NumberSelectServiceImpl extends WidgetService {
     })
   }
   getParam(element) {
-    const value = element.options.value
+    const value = this.fillValueDerfault(element)
     const param = {
       component: element,
       value: !value ? [] : Array.isArray(value) ? value : value.toString().split(','),
@@ -91,6 +91,16 @@ class NumberSelectServiceImpl extends WidgetService {
     }
     return param
   }
+  fillValueDerfault(element) {
+    const defaultV = element.options.value === null ? '' : element.options.value.toString()
+    if (element.options.attrs.multiple) {
+      if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') return []
+      return defaultV.split(',')
+    } else {
+      if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') return null
+      return defaultV.split(',')[0]
+    }
+  }
 }
 const numberSelectServiceImpl = new NumberSelectServiceImpl()
 export default numberSelectServiceImpl

frontend/src/components/widget/serviceImpl/TextSelectGridServiceImpl.js

@@ -82,7 +82,7 @@ class TextSelectGridServiceImpl extends WidgetService {
     })
   }
   getParam(element) {
-    const value = element.options.value
+    const value = this.fillValueDerfault(element)
     const param = {
       component: element,
       value: !value ? [] : Array.isArray(value) ? value : value.toString().split(','),
@@ -90,6 +90,16 @@ class TextSelectGridServiceImpl extends WidgetService {
     }
     return param
   }
+  fillValueDerfault(element) {
+    const defaultV = element.options.value === null ? '' : element.options.value.toString()
+    if (element.options.attrs.multiple) {
+      if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') return []
+      return defaultV.split(',')
+    } else {
+      if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') return null
+      return defaultV.split(',')[0]
+    }
+  }
 }
 const textSelectGridServiceImpl = new TextSelectGridServiceImpl()
 export default textSelectGridServiceImpl

frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js

@@ -82,7 +82,7 @@ class TextSelectServiceImpl extends WidgetService {
   }
 
   getParam(element) {
-    const value = element.options.value
+    const value = this.fillValueDerfault(element)
     const param = {
       component: element,
       value: !value ? [] : Array.isArray(value) ? value : value.toString().split(','),
@@ -90,6 +90,17 @@ class TextSelectServiceImpl extends WidgetService {
     }
     return param
   }
+
+  fillValueDerfault(element) {
+    const defaultV = element.options.value === null ? '' : element.options.value.toString()
+    if (element.options.attrs.multiple) {
+      if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') return []
+      return defaultV.split(',')
+    } else {
+      if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') return null
+      return defaultV.split(',')[0]
+    }
+  }
 }
 const textSelectServiceImpl = new TextSelectServiceImpl()
 export default textSelectServiceImpl

frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js

@@ -227,7 +227,7 @@ class TimeDateRangeServiceImpl extends WidgetService {
   }
   getParam(element) {
     let timeArr = []
-    if (element.options.attrs.default.isDynamic) {
+    if (element.options.attrs.default && element.options.attrs.default.isDynamic) {
       let value = this.dynamicDateFormNow(element)
       value = this.formatFilterValue(value)
       timeArr = this.formatValues(value, element)

frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js

@@ -157,7 +157,7 @@ class TimeDateServiceImpl extends WidgetService {
   }
   getParam(element) {
     let timeArr = []
-    if (element.options.attrs.default.isDynamic) {
+    if (element.options.attrs.default && element.options.attrs.default.isDynamic) {
       let value = this.dynamicDateFormNow(element)
       value = this.formatFilterValue(value)
       timeArr = this.formatValues(value, element)

frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js

@@ -123,7 +123,7 @@ class TimeMonthServiceImpl extends WidgetService {
   }
   getParam(element) {
     let timeArr = []
-    if (element.options.attrs.default.isDynamic) {
+    if (element.options.attrs.default && element.options.attrs.default.isDynamic) {
       let value = this.dynamicDateFormNow(element)
       value = this.formatFilterValue(value)
       timeArr = this.formatValues(value, element)

frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js

@@ -114,7 +114,7 @@ class TimeYearServiceImpl extends WidgetService {
   }
   getParam(element) {
     let timeArr = []
-    if (element.options.attrs.default.isDynamic) {
+    if (element.options.attrs.default && element.options.attrs.default.isDynamic) {
       let value = this.dynamicDateFormNow(element)
       value = this.formatFilterValue(value)
       timeArr = this.formatValues(value, element)

frontend/src/icons/svg/table-normal.svg

@@ -1 +1 @@
-<svg t="1630896178915" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1969" width="200" height="200"><path d="M85.333333 170.666667h853.333334v170.666666H85.333333zM85.333333 384h170.666667v469.333333H85.333333z" p-id="1970"></path><path d="M298.666667 384h640v128H298.666667z" opacity=".6" p-id="1971"></path><path d="M298.666667 554.666667h298.666666v128H298.666667zM640 554.666667h298.666667v128H640z" p-id="1972"></path><path d="M298.666667 725.333333h298.666666v128H298.666667zM640 725.333333h298.666667v128H640z" opacity=".6" p-id="1973"></path></svg>
+<svg t="1644288854112" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1947" width="200" height="200"><path d="M85.333333 170.666667h853.333334v170.666666H85.333333zM85.333333 384h170.666667v469.333333H85.333333z" p-id="1948"></path><path d="M298.666667 384h640v128H298.666667z" opacity=".6" p-id="1949"></path><path d="M298.666667 554.666667h640v128H298.666667z" p-id="1950"></path><path d="M298.666667 725.333333h640v128H298.666667z" opacity=".6" p-id="1951"></path></svg>

frontend/src/icons/svg/table-pivot.svg

@@ -0,0 +1 @@
+<svg t="1630896178915" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1969" width="200" height="200"><path d="M85.333333 170.666667h853.333334v170.666666H85.333333zM85.333333 384h170.666667v469.333333H85.333333z" p-id="1970"></path><path d="M298.666667 384h640v128H298.666667z" opacity=".6" p-id="1971"></path><path d="M298.666667 554.666667h298.666666v128H298.666667zM640 554.666667h298.666667v128H640z" p-id="1972"></path><path d="M298.666667 725.333333h298.666666v128H298.666667zM640 725.333333h298.666667v128H640z" opacity=".6" p-id="1973"></path></svg>

frontend/src/lang/en.js

@@ -1016,7 +1016,13 @@ export default {
     filter_exp: 'Filter Value',
     filter_type: 'Filter Type',
     filter_value_can_not_str: 'Value type can not input string',
-    enum_value_can_not_null: 'Enum Value can not empty.'
+    enum_value_can_not_null: 'Enum Value can not empty.',
+    table_config: 'Table Config',
+    table_column_width_config: 'Column Width',
+    table_column_adapt: 'Adapt',
+    table_column_custom: 'Custom',
+    chart_table_pivot: 'Pivot Table',
+    table_pivot_row: 'Data Row'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

frontend/src/lang/tw.js

@@ -1016,7 +1016,13 @@ export default {
     filter_exp: '過濾值',
     filter_type: '過濾方式',
     filter_value_can_not_str: '數值類型字段過濾值不能包含文本',
-    enum_value_can_not_null: '字段枚舉值不能為空'
+    enum_value_can_not_null: '字段枚舉值不能為空',
+    table_config: '表格配置',
+    table_column_width_config: '列寬調整',
+    table_column_adapt: '自適應',
+    table_column_custom: '自定義',
+    chart_table_pivot: '透視表',
+    table_pivot_row: '數據行'
   },
   dataset: {
     sheet_warn: '有多個 Sheet 頁，默認抽取第一個',

frontend/src/lang/zh.js

@@ -1018,7 +1018,13 @@ export default {
     filter_exp: '过滤值',
     filter_type: '过滤方式',
     filter_value_can_not_str: '数值类型字段过滤值不能包含文本',
-    enum_value_can_not_null: '字段枚举值不能为空'
+    enum_value_can_not_null: '字段枚举值不能为空',
+    table_config: '表格配置',
+    table_column_width_config: '列宽调整',
+    table_column_adapt: '自适应',
+    table_column_custom: '自定义',
+    chart_table_pivot: '透视表',
+    table_pivot_row: '数据行'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',

frontend/src/views/chart/chart/chart.js

@@ -31,6 +31,8 @@ export const DEFAULT_SIZE = {
   tableTitleHeight: 36,
   tableItemHeight: 36,
   tablePageSize: '20',
+  tableColumnMode: 'adapt',
+  tableColumnWidth: 100,
   gaugeMin: 0,
   gaugeMax: 100,
   gaugeStartAngle: 225,

frontend/src/views/chart/chart/common/common_table.js

@@ -0,0 +1,120 @@
+import { hexColorToRGBA } from '@/views/chart/chart/util'
+import { DEFAULT_COLOR_CASE, DEFAULT_SIZE } from '@/views/chart/chart/chart'
+
+export function getCustomTheme(chart) {
+  const theme = {
+    background: {
+      color: '#00000000'
+    },
+    cornerCell: {
+      cell: {
+        backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha)
+      },
+      text: {
+        fill: DEFAULT_COLOR_CASE.tableFontColor,
+        fontSize: DEFAULT_SIZE.tableTitleFontSize
+      },
+      bolderText: {
+        fill: DEFAULT_COLOR_CASE.tableFontColor,
+        fontSize: DEFAULT_SIZE.tableTitleFontSize
+      }
+    },
+    rowCell: {
+      cell: {
+        backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha)
+      },
+      text: {
+        fill: DEFAULT_COLOR_CASE.tableFontColor,
+        fontSize: DEFAULT_SIZE.tableTitleFontSize
+      },
+      bolderText: {
+        fill: DEFAULT_COLOR_CASE.tableFontColor,
+        fontSize: DEFAULT_SIZE.tableTitleFontSize
+      }
+    },
+    colCell: {
+      cell: {
+        backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha)
+      },
+      text: {
+        fill: DEFAULT_COLOR_CASE.tableFontColor,
+        fontSize: DEFAULT_SIZE.tableTitleFontSize
+      },
+      bolderText: {
+        fill: DEFAULT_COLOR_CASE.tableFontColor,
+        fontSize: DEFAULT_SIZE.tableTitleFontSize
+      }
+    },
+    dataCell: {
+      cell: {
+        backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableItemBgColor, DEFAULT_COLOR_CASE.alpha)
+      },
+      text: {
+        fill: DEFAULT_COLOR_CASE.tableFontColor,
+        fontSize: DEFAULT_SIZE.tableItemFontSize
+      }
+    }
+  }
+
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    // color
+    if (customAttr.color) {
+      const c = JSON.parse(JSON.stringify(customAttr.color))
+      theme.cornerCell.cell.backgroundColor = hexColorToRGBA(c.tableHeaderBgColor, c.alpha)
+      theme.cornerCell.bolderText.fill = c.tableFontColor
+      theme.cornerCell.text.fill = c.tableFontColor
+      theme.rowCell.cell.backgroundColor = hexColorToRGBA(c.tableHeaderBgColor, c.alpha)
+      theme.rowCell.bolderText.fill = c.tableFontColor
+      theme.rowCell.text.fill = c.tableFontColor
+      theme.colCell.cell.backgroundColor = hexColorToRGBA(c.tableHeaderBgColor, c.alpha)
+      theme.colCell.bolderText.fill = c.tableFontColor
+      theme.colCell.text.fill = c.tableFontColor
+
+      theme.dataCell.cell.backgroundColor = hexColorToRGBA(c.tableItemBgColor, c.alpha)
+      theme.dataCell.text.fill = c.tableFontColor
+    }
+    // size
+    if (customAttr.size) {
+      const s = JSON.parse(JSON.stringify(customAttr.size))
+      theme.cornerCell.bolderText.fontSize = parseInt(s.tableTitleFontSize)
+      theme.cornerCell.text.fontSize = parseInt(s.tableTitleFontSize)
+      theme.rowCell.bolderText.fontSize = parseInt(s.tableTitleFontSize)
+      theme.rowCell.text.fontSize = parseInt(s.tableTitleFontSize)
+      theme.colCell.bolderText.fontSize = parseInt(s.tableTitleFontSize)
+      theme.colCell.text.fontSize = parseInt(s.tableTitleFontSize)
+
+      theme.dataCell.text.fontSize = parseInt(s.tableItemFontSize)
+    }
+  }
+
+  return theme
+}
+
+export function getSize(chart) {
+  const size = {}
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    // size
+    if (customAttr.size) {
+      const s = JSON.parse(JSON.stringify(customAttr.size))
+      size.colCfg = {
+        height: s.tableTitleHeight
+      }
+      size.cellCfg = {
+        height: s.tableItemHeight
+      }
+      if (!s.tableColumnMode || s.tableColumnMode === 'adapt') {
+        delete size.cellCfg.width
+        size.layoutWidthType = 'compact'
+      } else {
+        delete size.layoutWidthType
+        size.cellCfg.width = s.tableColumnWidth
+      }
+    }
+  }
+
+  return size
+}

frontend/src/views/chart/chart/table/table-info.js

@@ -0,0 +1,300 @@
+import { TableSheet, S2Event, PivotSheet } from '@antv/s2'
+import { getCustomTheme, getSize } from '@/views/chart/chart/common/common_table'
+
+export function baseTableInfo(s2, container, chart, action, tableData) {
+  const containerDom = document.getElementById(container)
+
+  // fields
+  const fields = chart.data.fields
+  if (!fields || fields.length === 0) {
+    if (s2) {
+      s2.destroy()
+    }
+    return
+  }
+
+  const columns = []
+  const meta = []
+
+  // add drill list
+  if (chart.drill) {
+    let drillFields = []
+    try {
+      drillFields = JSON.parse(chart.drillFields)
+    } catch (err) {
+      drillFields = JSON.parse(JSON.stringify(chart.drillFields))
+    }
+
+    const drillField = drillFields[chart.drillFilters.length]
+
+    const drillFilters = JSON.parse(JSON.stringify(chart.drillFilters))
+    const drillExp = drillFilters[drillFilters.length - 1].datasetTableField
+
+    // 移除所有下钻字段
+    const removeField = []
+    for (let i = 0; i < chart.drillFilters.length; i++) {
+      const ele = chart.drillFilters[i].datasetTableField
+      removeField.push(ele.dataeaseName)
+    }
+
+    // build field
+    fields.forEach(ele => {
+      if (removeField.indexOf(ele.dataeaseName) < 0) {
+        // 用下钻字段替换当前字段
+        if (drillExp.dataeaseName === ele.dataeaseName) {
+          columns.push(drillField.dataeaseName)
+          meta.push({
+            field: drillField.dataeaseName,
+            name: drillField.name
+          })
+        } else {
+          columns.push(ele.dataeaseName)
+          meta.push({
+            field: ele.dataeaseName,
+            name: ele.name
+          })
+        }
+      }
+    })
+  } else {
+    fields.forEach(ele => {
+      columns.push(ele.dataeaseName)
+      meta.push({
+        field: ele.dataeaseName,
+        name: ele.name
+      })
+    })
+  }
+
+  // data config
+  const s2DataConfig = {
+    fields: {
+      columns: columns
+    },
+    meta: meta,
+    data: tableData
+  }
+
+  // options
+  const s2Options = {
+    width: containerDom.offsetWidth,
+    height: containerDom.offsetHeight,
+    // showSeriesNumber: true
+    style: getSize(chart)
+  }
+
+  // 开始渲染
+  if (s2) {
+    s2.destroy()
+  }
+  s2 = new TableSheet(containerDom, s2DataConfig, s2Options)
+
+  // click
+  s2.on(S2Event.DATA_CELL_CLICK, action)
+
+  // theme
+  const customTheme = getCustomTheme(chart)
+  s2.setThemeCfg({ theme: customTheme })
+
+  return s2
+}
+
+export function baseTableNormal(s2, container, chart, action, tableData) {
+  const containerDom = document.getElementById(container)
+
+  // fields
+  const fields = chart.data.fields
+  if (!fields || fields.length === 0) {
+    if (s2) {
+      s2.destroy()
+    }
+    return
+  }
+
+  const columns = []
+  const meta = []
+
+  // add drill list
+  if (chart.drill) {
+    const drillFields = JSON.parse(chart.drillFields)
+    const drillField = drillFields[chart.drillFilters.length]
+
+    const drillFilters = JSON.parse(JSON.stringify(chart.drillFilters))
+    const drillExp = drillFilters[drillFilters.length - 1].datasetTableField
+
+    // 移除所有下钻字段
+    const removeField = []
+    for (let i = 0; i < chart.drillFilters.length; i++) {
+      const ele = chart.drillFilters[i].datasetTableField
+      removeField.push(ele.dataeaseName)
+    }
+
+    // build field
+    fields.forEach(ele => {
+      if (removeField.indexOf(ele.dataeaseName) < 0) {
+        // 用下钻字段替换当前字段
+        if (drillExp.dataeaseName === ele.dataeaseName) {
+          columns.push(drillField.dataeaseName)
+          meta.push({
+            field: drillField.dataeaseName,
+            name: drillField.name
+          })
+        } else {
+          columns.push(ele.dataeaseName)
+          meta.push({
+            field: ele.dataeaseName,
+            name: ele.name
+          })
+        }
+      }
+    })
+  } else {
+    fields.forEach(ele => {
+      columns.push(ele.dataeaseName)
+      meta.push({
+        field: ele.dataeaseName,
+        name: ele.name
+      })
+    })
+  }
+
+  // data config
+  const s2DataConfig = {
+    fields: {
+      columns: columns
+    },
+    meta: meta,
+    data: tableData
+  }
+
+  // options
+  const s2Options = {
+    width: containerDom.offsetWidth,
+    height: containerDom.offsetHeight,
+    // showSeriesNumber: true
+    style: getSize(chart)
+  }
+
+  // 开始渲染
+  if (s2) {
+    s2.destroy()
+  }
+  s2 = new TableSheet(containerDom, s2DataConfig, s2Options)
+
+  // click
+  s2.on(S2Event.DATA_CELL_CLICK, action)
+
+  // theme
+  const customTheme = getCustomTheme(chart)
+  s2.setThemeCfg({ theme: customTheme })
+
+  return s2
+}
+
+export function baseTablePivot(s2, container, chart, action, tableData) {
+  const containerDom = document.getElementById(container)
+
+  // row and column
+  const columnFields = JSON.parse(chart.xaxis)
+  const rowFields = JSON.parse(chart.xaxisExt)
+  const valueFields = JSON.parse(chart.yaxis)
+  const c = []; const r = []; const v = []
+  columnFields.forEach(ele => {
+    c.push(ele.dataeaseName)
+  })
+  rowFields.forEach(ele => {
+    r.push(ele.dataeaseName)
+  })
+  valueFields.forEach(ele => {
+    v.push(ele.dataeaseName)
+  })
+
+  // fields
+  const fields = chart.data.fields
+  if (!fields || fields.length === 0) {
+    if (s2) {
+      s2.destroy()
+    }
+    return
+  }
+
+  const columns = []
+  const meta = []
+
+  // add drill list
+  if (chart.drill) {
+    const drillFields = JSON.parse(chart.drillFields)
+    const drillField = drillFields[chart.drillFilters.length]
+
+    const drillFilters = JSON.parse(JSON.stringify(chart.drillFilters))
+    const drillExp = drillFilters[drillFilters.length - 1].datasetTableField
+
+    // 移除所有下钻字段
+    const removeField = []
+    for (let i = 0; i < chart.drillFilters.length; i++) {
+      const ele = chart.drillFilters[i].datasetTableField
+      removeField.push(ele.dataeaseName)
+    }
+
+    // build field
+    fields.forEach(ele => {
+      if (removeField.indexOf(ele.dataeaseName) < 0) {
+        // 用下钻字段替换当前字段
+        if (drillExp.dataeaseName === ele.dataeaseName) {
+          columns.push(drillField.dataeaseName)
+          meta.push({
+            field: drillField.dataeaseName,
+            name: drillField.name
+          })
+        } else {
+          columns.push(ele.dataeaseName)
+          meta.push({
+            field: ele.dataeaseName,
+            name: ele.name
+          })
+        }
+      }
+    })
+  } else {
+    fields.forEach(ele => {
+      columns.push(ele.dataeaseName)
+      meta.push({
+        field: ele.dataeaseName,
+        name: ele.name
+      })
+    })
+  }
+
+  // data config
+  const s2DataConfig = {
+    fields: {
+      rows: r,
+      columns: c,
+      values: v
+    },
+    meta: meta,
+    data: tableData
+  }
+
+  // options
+  const s2Options = {
+    width: containerDom.offsetWidth,
+    height: containerDom.offsetHeight,
+    style: getSize(chart)
+  }
+
+  // 开始渲染
+  if (s2) {
+    s2.destroy()
+  }
+  s2 = new PivotSheet(containerDom, s2DataConfig, s2Options)
+
+  // click
+  s2.on(S2Event.DATA_CELL_CLICK, action)
+
+  // theme
+  const customTheme = getCustomTheme(chart)
+  s2.setThemeCfg({ theme: customTheme })
+
+  return s2
+}

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

@@ -0,0 +1,412 @@
+<template>
+  <div ref="chartContainer" style="padding: 0;width: 100%;height: 100%;overflow: hidden;" :style="bg_class">
+    <view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
+    <span v-if="chart.type" v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
+      <p style="padding:6px 10px 0 10px;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;">{{ chart.title }}</p>
+    </span>
+    <div ref="tableContainer" style="width: 100%;overflow: hidden;padding: 8px;" :style="{background:container_bg_class.background}">
+      <div v-if="chart.type === 'table-normal'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? 'table-dom-normal-drill' : 'table-dom-normal'" />
+      <div v-if="chart.type === 'table-info'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? 'table-dom-info-drill' : 'table-dom-info'" />
+      <div v-if="chart.type === 'table-pivot'" :id="chartId" style="width: 100%;overflow: hidden;" class="table-dom-normal" />
+      <el-row v-show="chart.type === 'table-info'" class="table-page">
+        <span class="total-style">
+          {{ $t('chart.total') }}
+          <span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span>
+          {{ $t('chart.items') }}
+        </span>
+        <el-pagination
+          small
+          :current-page="currentPage.page"
+          :page-sizes="[10,20,50,100]"
+          :page-size="currentPage.pageSize"
+          :pager-count="5"
+          layout="prev, pager, next"
+          :total="currentPage.show"
+          class="page-style"
+          @current-change="pageClick"
+          @size-change="pageChange"
+        />
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { uuid } from 'vue-uuid'
+import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
+import { hexColorToRGBA } from '@/views/chart/chart/util'
+import { baseTableInfo, baseTableNormal, baseTablePivot } from '@/views/chart/chart/table/table-info'
+
+export default {
+  name: 'ChartComponentS2',
+  components: { ViewTrackBar },
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    },
+    filter: {
+      type: Object,
+      required: false,
+      default: function() {
+        return {}
+      }
+    },
+    trackMenu: {
+      type: Array,
+      required: false,
+      default: function() {
+        return ['drill']
+      }
+    },
+    searchCount: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      myChart: null,
+      chartId: uuid.v1(),
+      showTrackBar: true,
+      trackBarStyle: {
+        position: 'absolute',
+        left: '0px',
+        top: '0px'
+      },
+      pointParam: null,
+      dynamicAreaCode: null,
+      borderRadius: '0px',
+      chartHeight: '100%',
+      title_class: {
+        margin: '0 0',
+        width: '100%',
+        fontSize: '18px',
+        color: '#303133',
+        textAlign: 'left',
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+        background: hexColorToRGBA('#ffffff', 0)
+      },
+      container_bg_class: {
+        background: hexColorToRGBA('#ffffff', 0)
+      },
+      title_show: true,
+      antVRenderStatus: false,
+      currentPage: {
+        page: 1,
+        pageSize: 20,
+        show: 0
+      },
+      tableData: []
+    }
+  },
+
+  computed: {
+    trackBarStyleTime() {
+      return this.trackBarStyle
+    },
+    bg_class() {
+      return {
+        borderRadius: this.borderRadius
+      }
+    }
+  },
+  watch: {
+    chart: {
+      handler(newVal, oldVla) {
+        this.initData()
+        this.initTitle()
+        this.calcHeightDelay()
+        new Promise((resolve) => { resolve() }).then(() => {
+          this.drawView()
+        })
+      },
+      deep: true
+    },
+    resize() {
+      this.drawEcharts()
+    }
+  },
+  mounted() {
+    this.preDraw()
+  },
+  methods: {
+    initData() {
+      let datas = []
+      if (this.chart.data) {
+        this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
+        const attr = JSON.parse(this.chart.customAttr)
+        this.currentPage.pageSize = parseInt(attr.size.tablePageSize ? attr.size.tablePageSize : 20)
+        datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
+        if (this.chart.type === 'table-info') {
+          // 计算分页
+          this.currentPage.show = datas.length
+          const pageStart = (this.currentPage.page - 1) * this.currentPage.pageSize
+          const pageEnd = pageStart + this.currentPage.pageSize
+          datas = datas.slice(pageStart, pageEnd)
+        }
+      } else {
+        this.fields = []
+        datas = []
+        this.resetPage()
+      }
+      this.tableData = datas
+    },
+    preDraw() {
+      this.initData()
+      this.initTitle()
+      this.calcHeightDelay()
+      new Promise((resolve) => { resolve() }).then(() => {
+        this.drawView()
+      })
+      const that = this
+      window.onresize = function() {
+        that.initData()
+        that.initTitle()
+        that.calcHeightDelay()
+        new Promise((resolve) => { resolve() }).then(() => {
+          that.drawView()
+        })
+      }
+    },
+    drawView() {
+      const chart = this.chart
+      // type
+      // if (chart.data) {
+      this.antVRenderStatus = true
+      if (!chart.data || (!chart.data.datas && !chart.data.series)) {
+        chart.data = {
+          datas: [{}],
+          series: [
+            {
+              data: [0]
+            }
+          ]
+        }
+      }
+      if (chart.type === 'table-info') {
+        this.myChart = baseTableInfo(this.myChart, this.chartId, chart, this.antVAction, this.tableData)
+      } else if (chart.type === 'table-normal') {
+        this.myChart = baseTableNormal(this.myChart, this.chartId, chart, this.antVAction, this.tableData)
+      } else if (chart.type === 'table-pivot') {
+        this.myChart = baseTablePivot(this.myChart, this.chartId, chart, this.antVAction, this.tableData)
+      } else {
+        if (this.myChart) {
+          this.antVRenderStatus = false
+          this.myChart.destroy()
+        }
+      }
+
+      if (this.myChart && this.searchCount > 0) {
+        this.myChart.options.animation = false
+      }
+
+      if (this.myChart && this.antVRenderStatus) {
+        this.myChart.render()
+      }
+      this.setBackGroundBorder()
+    },
+
+    antVAction(param) {
+      console.log(param, 'param')
+      const cell = this.myChart.getCell(param.target)
+      const meta = cell.getMeta()
+      console.log(meta, 'meta')
+
+      let xAxis = []
+      if (this.chart.xaxis) {
+        xAxis = JSON.parse(this.chart.xaxis)
+      }
+      let drillFields = []
+      if (this.chart.drillFields) {
+        try {
+          drillFields = JSON.parse(this.chart.drillFields)
+        } catch (err) {
+          drillFields = JSON.parse(JSON.stringify(this.chart.drillFields))
+        }
+      }
+
+      let field = {}
+      if (this.chart.drill) {
+        field = drillFields[this.chart.drillFilters.length]
+        // check click field is drill?
+        if (field.dataeaseName !== meta.valueField) {
+          return
+        }
+      } else {
+        if (meta.colIndex < xAxis.length) {
+          field = xAxis[meta.colIndex]
+        }
+      }
+
+      const dimensionList = []
+      dimensionList.push({ id: field.id, value: meta.fieldValue })
+      this.pointParam = {
+        data: {
+          dimensionList: dimensionList
+        }
+      }
+      console.log(this.pointParam, 'pointParam')
+
+      if (this.trackMenu.length < 2) { // 只有一个事件直接调用
+        this.trackClick(this.trackMenu[0])
+      } else { // 视图关联多个事件
+        this.trackBarStyle.left = param.x + 'px'
+        this.trackBarStyle.top = (param.y + 10) + 'px'
+        this.$refs.viewTrack.trackButtonClick()
+      }
+    },
+    setBackGroundBorder() {
+      if (this.chart.customStyle) {
+        const customStyle = JSON.parse(this.chart.customStyle)
+        if (customStyle.background) {
+          this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
+        }
+      }
+    },
+    chartResize() {
+      this.initData()
+      this.initTitle()
+      this.calcHeightDelay()
+      new Promise((resolve) => { resolve() }).then(() => {
+        this.drawView()
+      })
+    },
+    trackClick(trackAction) {
+      const param = this.pointParam
+      if (!param || !param.data || !param.data.dimensionList) {
+        // 地图提示没有关联字段 其他没有维度信息的 直接返回
+        if (this.chart.type === 'map') {
+          this.$warning(this.$t('panel.no_drill_field'))
+        }
+        return
+      }
+      const linkageParam = {
+        option: 'linkage',
+        viewId: this.chart.id,
+        dimensionList: this.pointParam.data.dimensionList,
+        quotaList: this.pointParam.data.quotaList
+      }
+      const jumpParam = {
+        option: 'jump',
+        viewId: this.chart.id,
+        dimensionList: this.pointParam.data.dimensionList,
+        quotaList: this.pointParam.data.quotaList
+      }
+      switch (trackAction) {
+        case 'drill':
+          this.$emit('onChartClick', this.pointParam)
+          break
+        case 'linkage':
+          this.$store.commit('addViewTrackFilter', linkageParam)
+          break
+        case 'jump':
+          this.$emit('onJumpClick', jumpParam)
+          break
+        default:
+          break
+      }
+    },
+    // title and bg
+    initTitle() {
+      if (this.chart.customStyle) {
+        const customStyle = JSON.parse(this.chart.customStyle)
+        if (customStyle.text) {
+          this.title_show = customStyle.text.show
+          // this.title_class.fontSize = customStyle.text.fontSize + 'px'
+          this.title_class.color = customStyle.text.color
+          this.title_class.textAlign = customStyle.text.hPosition
+          this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
+          this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
+
+          if (this.$refs.title) {
+            this.$refs.title.style.fontSize = customStyle.text.fontSize + 'px'
+          }
+        }
+        if (customStyle.background) {
+          this.title_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+          this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
+
+          this.container_bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+        }
+      }
+    },
+
+    calcHeightRightNow() {
+      this.$nextTick(() => {
+        if (this.$refs.chartContainer) {
+          const currentHeight = this.$refs.chartContainer.offsetHeight
+          if (this.$refs.title) {
+            const titleHeight = this.$refs.title.offsetHeight
+            this.chartHeight = (currentHeight - titleHeight) + 'px'
+            this.$refs.tableContainer.style.height = this.chartHeight
+          }
+        }
+      })
+    },
+    calcHeightDelay() {
+      this.calcHeightRightNow()
+      setTimeout(() => {
+        this.calcHeightRightNow()
+      }, 100)
+    },
+
+    pageChange(val) {
+      this.currentPage.pageSize = val
+      this.initData()
+      this.drawView()
+    },
+
+    pageClick(val) {
+      this.currentPage.page = val
+      this.initData()
+      this.drawView()
+    },
+
+    resetPage() {
+      this.currentPage = {
+        page: 1,
+        pageSize: 20,
+        show: 0
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.table-dom-info{
+  height:calc(100% - 36px);
+}
+.table-dom-normal{
+  height:100%;
+}
+.table-dom-info-drill{
+  height:calc(100% - 36px - 12px);
+}
+.table-dom-normal-drill{
+  height:calc(100% - 12px);
+}
+.table-page{
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  overflow: hidden;
+  margin-top: 8px;
+}
+.page-style{
+  margin-right: auto;
+}
+.total-style{
+  flex: 1;
+  font-size: 12px;
+  color: #606266;
+  white-space:nowrap;
+}
+.page-style >>> .el-input__inner{
+  height: 24px;
+}
+</style>

frontend/src/views/chart/components/drag-item/DimensionExtItem.vue

@@ -0,0 +1,245 @@
+<template>
+  <span>
+    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="item.groupType === 'q'?'success':''">
+      <span style="float: left">
+        <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
+        <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
+        <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
+        <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+        <svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
+        <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
+      </span>
+      <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+      <span v-if="item.deType === 1" class="summary-span">
+        {{ $t('chart.' + item.dateStyle) }}
+      </span>
+    </el-tag>
+    <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
+      <span class="el-dropdown-link">
+        <el-tag size="small" class="item-axis" :type="item.groupType === 'q'?'success':''">
+          <span style="float: left">
+            <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
+            <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
+            <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
+            <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+            <svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
+            <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
+          </span>
+          <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+          <span v-if="item.deType === 1" class="summary-span">
+            {{ $t('chart.' + item.dateStyle) }}
+          </span>
+          <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
+        </el-tag>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>
+            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="sort">
+              <span class="el-dropdown-link inner-dropdown-menu">
+                <span>
+                  <i class="el-icon-sort" />
+                  <span>{{ $t('chart.sort') }}</span>
+                  <span class="summary-span-item">({{ $t('chart.'+item.sort) }})</span>
+                </span>
+                <i class="el-icon-arrow-right el-icon--right" />
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="beforeSort('none')">{{ $t('chart.none') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeSort('asc')">{{ $t('chart.asc') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeSort('desc')">{{ $t('chart.desc') }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-dropdown-item>
+
+          <el-dropdown-item v-show="item.deType === 1" divided>
+            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="dateStyle">
+              <span class="el-dropdown-link inner-dropdown-menu">
+                <span>
+                  <i class="el-icon-c-scale-to-original" />
+                  <span>{{ $t('chart.dateStyle') }}</span>
+                  <span class="summary-span-item">({{ $t('chart.'+item.dateStyle) }})</span>
+                </span>
+                <i class="el-icon-arrow-right el-icon--right" />
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="beforeDateStyle('y')">{{ $t('chart.y') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeDateStyle('y_M')">{{ $t('chart.y_M') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeDateStyle('y_M_d')">{{ $t('chart.y_M_d') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeDateStyle('H_m_s')" divided>{{ $t('chart.H_m_s') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeDateStyle('y_M_d_H_m')">{{ $t('chart.y_M_d_H_m') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeDateStyle('y_M_d_H_m_s')">{{ $t('chart.y_M_d_H_m_s') }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-dropdown-item>
+          <el-dropdown-item v-show="item.deType === 1">
+            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="datePattern">
+              <span class="el-dropdown-link inner-dropdown-menu">
+                <span>
+                  <i class="el-icon-timer" />
+                  <span>{{ $t('chart.datePattern') }}</span>
+                  <span class="summary-span-item">({{ $t('chart.'+item.datePattern) }})</span>
+                </span>
+                <i class="el-icon-arrow-right el-icon--right" />
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="beforeDatePattern('date_sub')">{{ $t('chart.date_sub') }}(1990-01-01)</el-dropdown-item>
+                <el-dropdown-item :command="beforeDatePattern('date_split')">{{ $t('chart.date_split') }}(1990/01/01)</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-dropdown-item>
+
+          <el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">
+            <span>{{ $t('chart.show_name_set') }}</span>
+          </el-dropdown-item>
+          <el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')">
+            <span>{{ $t('chart.delete') }}</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </span>
+    </el-dropdown>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'DimensionExtItem',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    item: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    clickItem(param) {
+      if (!param) {
+        return
+      }
+      switch (param.type) {
+        case 'rename':
+          this.showRename()
+          break
+        case 'remove':
+          this.removeItem()
+          break
+        case 'filter':
+          this.editFilter()
+          break
+        default:
+          break
+      }
+    },
+    beforeClickItem(type) {
+      return {
+        type: type
+      }
+    },
+    sort(param) {
+      // console.log(param)
+      this.item.sort = param.type
+      this.$emit('onDimensionItemChange', this.item)
+    },
+    beforeSort(type) {
+      return {
+        type: type
+      }
+    },
+    dateStyle(param) {
+      // console.log(param)
+      this.item.dateStyle = param.type
+      this.$emit('onDimensionItemChange', this.item)
+    },
+    beforeDateStyle(type) {
+      return {
+        type: type
+      }
+    },
+    datePattern(param) {
+      this.item.datePattern = param.type
+      this.$emit('onDimensionItemChange', this.item)
+    },
+    beforeDatePattern(type) {
+      return {
+        type: type
+      }
+    },
+    editFilter() {
+      this.item.index = this.index
+      this.$emit('editItemFilter', this.item)
+    },
+    showRename() {
+      this.item.index = this.index
+      this.item.renameType = 'dimensionExt'
+      this.$emit('onNameEdit', this.item)
+    },
+    removeItem() {
+      this.item.index = this.index
+      this.item.removeType = 'dimensionExt'
+      this.$emit('onDimensionItemRemove', this.item)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .item-axis {
+    padding: 1px 6px;
+    margin: 0 3px 2px 3px;
+    text-align: left;
+    height: 24px;
+    line-height: 22px;
+    display: flex;
+    border-radius: 4px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    width: 159px;
+  }
+
+  .item-axis:hover {
+    background-color: #fdfdfd;
+    cursor: pointer;
+  }
+
+  span {
+    font-size: 12px;
+  }
+
+  .summary-span{
+    margin-left: 4px;
+    color: #878d9f;
+    position: absolute;
+    right: 25px;
+  }
+
+  .inner-dropdown-menu{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%
+  }
+
+  .item-span-style{
+    display: inline-block;
+    width: 70px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .summary-span-item{
+    margin-left: 4px;
+    color: #878d9f;
+  }
+</style>

frontend/src/views/chart/components/drag-item/DimensionItem.vue

@@ -190,6 +190,7 @@ export default {
     },
     removeItem() {
       this.item.index = this.index
+      this.item.removeType = 'dimension'
       this.$emit('onDimensionItemRemove', this.item)
     }
   }

frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue

@@ -81,6 +81,16 @@
       </el-form>
 
       <el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="100px" size="mini">
+        <el-form-item v-show="chart.type && chart.type === 'table-info'" :label="$t('chart.table_page_size')" class="form-item">
+          <el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase">
+            <el-option
+              v-for="item in pageSizeOptions"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
         <el-form-item :label="$t('chart.table_title_fontsize')" class="form-item">
           <el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase">
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
@@ -92,20 +102,29 @@
           </el-select>
         </el-form-item>
         <el-form-item :label="$t('chart.table_title_height')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.tableTitleHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
+          <el-slider v-model="sizeForm.tableTitleHeight" :min="20" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
         </el-form-item>
         <el-form-item :label="$t('chart.table_item_height')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.tableItemHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
+          <el-slider v-model="sizeForm.tableItemHeight" :min="20" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
         </el-form-item>
-        <el-form-item v-show="chart.type && chart.type === 'table-info'" :label="$t('chart.table_page_size')" class="form-item">
-          <el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase">
-            <el-option
-              v-for="item in pageSizeOptions"
-              :key="item.value"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
+        <el-form-item :label="$t('chart.table_column_width_config')" class="form-item">
+          <el-radio-group v-model="sizeForm.tableColumnMode" @change="changeBarSizeCase">
+            <el-radio label="adapt"><span>{{ $t('chart.table_column_adapt') }}</span></el-radio>
+            <el-radio label="custom">
+              <span>{{ $t('chart.table_column_custom') }}</span>
+            </el-radio>
+          </el-radio-group>
+          <el-tooltip class="item" effect="dark" placement="bottom">
+            <div slot="content">
+              列宽并非任何时候都能生效。
+              <br>
+              容器宽度优先级高于列宽，即(表格容器宽度 / 列数 > 指定列宽)，则列宽优先取(容器宽度 / 列数)。
+            </div>
+            <i class="el-icon-info" style="cursor: pointer;color: #606266;margin-left: 4px;" />
+          </el-tooltip>
+        </el-form-item>
+        <el-form-item v-show="sizeForm.tableColumnMode === 'custom'" label="" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.tableColumnWidth" :min="10" :max="500" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
         </el-form-item>
       </el-form>
 
@@ -322,6 +341,9 @@ export default {
           this.sizeForm.liquidWaveCount = this.sizeForm.liquidWaveCount ? this.sizeForm.liquidWaveCount : DEFAULT_SIZE.liquidWaveCount
 
           this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize
+
+          this.sizeForm.tableColumnMode = this.sizeForm.tableColumnMode ? this.sizeForm.tableColumnMode : DEFAULT_SIZE.tableColumnMode
+          this.sizeForm.tableColumnWidth = this.sizeForm.tableColumnWidth ? this.sizeForm.tableColumnWidth : DEFAULT_SIZE.tableColumnWidth
         }
       }
     },
@@ -361,7 +383,9 @@ export default {
 .el-select-dropdown__item{
   padding: 0 20px;
 }
-  span{font-size: 12px}
+span{
+  font-size: 12px
+}
 
 .el-form-item{
   margin-bottom: 6px;

frontend/src/views/chart/group/Group.vue

@@ -768,6 +768,7 @@ export default {
       })
       view.stylePriority = 'view' // 默认样式优先级视图
       view.xaxis = JSON.stringify([])
+      view.xaxisExt = JSON.stringify([])
       view.yaxis = JSON.stringify([])
       view.yaxisExt = JSON.stringify([])
       view.extStack = JSON.stringify([])

frontend/src/views/chart/view/ChartEdit.vue

@@ -233,11 +233,51 @@
                         :no-children-text="$t('commons.treeselect.no_children_text')"
                         :no-options-text="$t('commons.treeselect.no_options_text')"
                         :no-results-text="$t('commons.treeselect.no_results_text')"
+                        :disabled="!hasDataPermission('manage',param.privileges)"
                         @input="calcData"
                         @deselect="calcData"
                       />
                     </span>
                   </el-row>
+                  <!--xAxisExt-->
+                  <el-row
+                    v-if="view.type === 'table-pivot'"
+                    class="padding-lr"
+                  >
+                    <span style="width: 80px;text-align: right;">
+                      <span>{{ $t('chart.table_pivot_row') }}</span>
+                      /
+                      <span>{{ $t('chart.dimension') }}</span>
+                    </span>
+                    <draggable
+                      v-model="view.xaxisExt"
+                      :disabled="!hasDataPermission('manage',param.privileges)"
+                      group="drag"
+                      animation="300"
+                      :move="onMove"
+                      class="drag-block-style"
+                      @add="addXaxisExt"
+                      @update="calcData(true)"
+                    >
+                      <transition-group class="draggable-group">
+                        <dimension-ext-item
+                          v-for="(item,index) in view.xaxisExt"
+                          :key="item.id"
+                          :param="param"
+                          :index="index"
+                          :item="item"
+                          @onDimensionItemChange="dimensionItemChange"
+                          @onDimensionItemRemove="dimensionItemRemove"
+                          @editItemFilter="showDimensionEditFilter"
+                          @onNameEdit="showRename"
+                        />
+                      </transition-group>
+                    </draggable>
+                    <div v-if="!view.xaxisExt || view.xaxisExt.length === 0" class="drag-placeholder-style">
+                      <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
+                    </div>
+                  </el-row>
+                  <!--xAxis-->
                   <el-row
                     v-if="view.type !=='text' && view.type !== 'gauge' && view.type !== 'liquid'"
                     class="padding-lr"
@@ -289,6 +329,7 @@
                       <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                     </div>
                   </el-row>
+                  <!--yaxis-->
                   <el-row v-if="view.type !=='table-info'" class="padding-lr" style="margin-top: 6px;">
                     <span style="width: 80px;text-align: right;">
                       <span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
@@ -342,6 +383,7 @@
                       <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                     </div>
                   </el-row>
+                  <!--yAxisExt-->
                   <el-row v-if="view.type && view.type === 'chart-mix'" class="padding-lr" style="margin-top: 6px;">
                     <span style="width: 80px;text-align: right;">
                       <span>{{ $t('chart.drag_block_value_axis_ext') }}</span>
@@ -378,6 +420,7 @@
                       <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                     </div>
                   </el-row>
+                  <!--extStack-->
                   <el-row v-if="view.type && view.type.includes('stack')" class="padding-lr" style="margin-top: 6px;">
                     <span style="width: 80px;text-align: right;">
                       <span>{{ $t('chart.stack_item') }}</span>
@@ -411,6 +454,7 @@
                       <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                     </div>
                   </el-row>
+                  <!--extBubble-->
                   <el-row v-if="view.type && view.type.includes('scatter')" class="padding-lr" style="margin-top: 6px;">
                     <span style="width: 80px;text-align: right;">
                       <span>{{ $t('chart.bubble_size') }}</span>
@@ -483,7 +527,7 @@
                     </div>
                   </el-row>
                   <el-row
-                    v-if="view.type && !view.type.includes('table') && !view.type.includes('text') && !view.type.includes('gauge') && view.type !== 'liquid' && view.type !== 'word-cloud'"
+                    v-if="view.type && !(view.type.includes('table') && view.render === 'echarts') && !view.type.includes('text') && !view.type.includes('gauge') && view.type !== 'liquid' && view.type !== 'word-cloud' && view.type !== 'table-pivot'"
                     class="padding-lr"
                     style="margin-top: 6px;"
                   >
@@ -565,7 +609,7 @@
                   <el-collapse-item
                     v-show="view.render && view.render === 'antv' && chart.type !== 'map' && chart.type !== 'waterfall' && chart.type !== 'word-cloud' && chart.type !== 'treemap'"
                     name="size"
-                    :title="$t('chart.size')"
+                    :title="(chart.type && chart.type.includes('table')) ? $t('chart.table_config') : $t('chart.size')"
                   >
                     <size-selector-ant-v
                       :param="param"
@@ -769,8 +813,16 @@
               class="chart-class"
               @onChartClick="chartClick"
             />
+            <chart-component-s2
+              v-if="httpRequest.status && chart.type && chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'antv'"
+              ref="dynamicChart"
+              :chart-id="chart.id"
+              :chart="chart"
+              class="chart-class"
+              @onChartClick="chartClick"
+            />
             <table-normal
-              v-if="httpRequest.status && chart.type && chart.type.includes('table')"
+              v-if="httpRequest.status && chart.type && chart.type.includes('table') && renderComponent() === 'echarts' && chart.type !== 'table-pivot'"
               :show-summary="chart.type === 'table-normal'"
               :chart="chart"
               class="table-class"
@@ -790,7 +842,7 @@
               </div>
             </div>
           </div>
-          <div style="position: absolute;left: 20px;bottom:10px;">
+          <div style="position: absolute;left: 8px;bottom:8px;">
             <drill-path :drill-filters="drillFilters" @onDrillJump="drillJump" />
           </div>
         </el-row>
@@ -973,10 +1025,14 @@ import SizeSelectorAntV from '@/views/chart/components/shape-attr/SizeSelectorAn
 import SplitSelectorAntV from '@/views/chart/components/component-style/SplitSelectorAntV'
 import CompareEdit from '@/views/chart/components/compare/CompareEdit'
 import { compareItem } from '@/views/chart/chart/compare'
+import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
+import DimensionExtItem from '@/views/chart/components/drag-item/DimensionExtItem'
 
 export default {
   name: 'ChartEdit',
   components: {
+    DimensionExtItem,
+    ChartComponentS2,
     CompareEdit,
     SplitSelectorAntV,
     SizeSelectorAntV,
@@ -1034,6 +1090,7 @@ export default {
       quotaData: [],
       view: {
         xaxis: [],
+        xaxisExt: [],
         yaxis: [],
         yaxisExt: [],
         extStack: [],
@@ -1226,6 +1283,22 @@ export default {
           ele.filter = []
         }
       })
+      if (view.type === 'table-pivot') {
+        view.xaxisExt.forEach(function(ele) {
+          if (!ele.dateStyle || ele.dateStyle === '') {
+            ele.dateStyle = 'y_M_d'
+          }
+          if (!ele.datePattern || ele.datePattern === '') {
+            ele.datePattern = 'date_sub'
+          }
+          if (!ele.sort || ele.sort === '') {
+            ele.sort = 'none'
+          }
+          if (!ele.filter) {
+            ele.filter = []
+          }
+        })
+      }
       if (view.type === 'map' && view.yaxis.length > 1) {
         view.yaxis = [view.yaxis[0]]
       }
@@ -1315,9 +1388,10 @@ export default {
         view.customAttr.label.show = true
       }
       if (view.type === 'liquid' ||
-          view.type.includes('table') ||
+          (view.type.includes('table') && view.render === 'echarts') ||
           view.type.includes('text') ||
-          view.type.includes('gauge')) {
+          view.type.includes('gauge') ||
+          view.type === 'table-pivot') {
         view.drillFields = []
       }
       view.customFilter.forEach(function(ele) {
@@ -1326,6 +1400,7 @@ export default {
         }
       })
       view.xaxis = JSON.stringify(view.xaxis)
+      view.xaxisExt = JSON.stringify(view.xaxisExt)
       view.yaxis = JSON.stringify(view.yaxis)
       view.yaxisExt = JSON.stringify(view.yaxisExt)
       view.customAttr = JSON.stringify(view.customAttr)
@@ -1337,22 +1412,6 @@ export default {
       delete view.data
       return view
     },
-    save(getData, trigger, needRefreshGroup = false, switchType = false) {
-      const view = this.buildParam(getData, trigger, needRefreshGroup, switchType)
-      if (!view) return
-      post('/chart/view/save', view).then(response => {
-        if (getData) {
-          this.resetDrill()
-          this.getData(response.data.id)
-        } else {
-          this.getChart(response.data.id)
-        }
-        if (needRefreshGroup) {
-          this.refreshGroup(view)
-        }
-        this.closeChangeChart()
-      })
-    },
     calcData(getData, trigger, needRefreshGroup = false, switchType = false) {
       this.hasEdit = true
       const view = this.buildParam(getData, trigger, needRefreshGroup, switchType)
@@ -1366,6 +1425,7 @@ export default {
       }).then(response => {
         const view = JSON.parse(JSON.stringify(response.data))
         this.view.xaxis = view.xaxis ? JSON.parse(view.xaxis) : []
+        this.view.xaxisExt = view.xaxisExt ? JSON.parse(view.xaxisExt) : []
         this.view.yaxis = view.yaxis ? JSON.parse(view.yaxis) : []
         this.view.yaxisExt = view.yaxisExt ? JSON.parse(view.yaxisExt) : []
         this.view.extStack = view.extStack ? JSON.parse(view.extStack) : []
@@ -1399,6 +1459,7 @@ export default {
       // 将视图传入echart...组件
       const view = JSON.parse(JSON.stringify(this.view))
       view.xaxis = JSON.stringify(this.view.xaxis)
+      view.xaxisExt = JSON.stringify(this.view.xaxisExt)
       view.yaxis = JSON.stringify(this.view.yaxis)
       view.yaxisExt = JSON.stringify(this.view.yaxisExt)
       view.extStack = JSON.stringify(this.view.extStack)
@@ -1440,6 +1501,7 @@ export default {
           this.initTableData(response.data.tableId)
           this.view = JSON.parse(JSON.stringify(response.data))
           this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
+          this.view.xaxisExt = this.view.xaxisExt ? JSON.parse(this.view.xaxisExt) : []
           this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
           this.view.yaxisExt = this.view.yaxisExt ? JSON.parse(this.view.yaxisExt) : []
           this.view.extStack = this.view.extStack ? JSON.parse(this.view.extStack) : []
@@ -1483,6 +1545,7 @@ export default {
           this.initTableData(response.data.tableId)
           this.view = JSON.parse(JSON.stringify(response.data))
           this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
+          this.view.xaxisExt = this.view.xaxisExt ? JSON.parse(this.view.xaxisExt) : []
           this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
           this.view.yaxisExt = this.view.yaxisExt ? JSON.parse(this.view.yaxisExt) : []
           this.view.extStack = this.view.extStack ? JSON.parse(this.view.extStack) : []
@@ -1491,14 +1554,7 @@ export default {
           this.view.customAttr = this.view.customAttr ? JSON.parse(this.view.customAttr) : {}
           this.view.customStyle = this.view.customStyle ? JSON.parse(this.view.customStyle) : {}
           this.view.customFilter = this.view.customFilter ? JSON.parse(this.view.customFilter) : {}
-
-          response.data.data = this.data
-          this.chart = response.data
-
-          this.chart.drill = this.drill
-          // this.httpRequest.status = true
         }).catch(err => {
-          // this.resetView()
           this.httpRequest.status = err.response.data.success
           this.httpRequest.msg = err.response.data.message
           return true
@@ -1520,7 +1576,11 @@ export default {
     },
 
     dimensionItemRemove(item) {
-      this.view.xaxis.splice(item.index, 1)
+      if (item.removeType === 'dimension') {
+        this.view.xaxis.splice(item.index, 1)
+      } else if (item.removeType === 'dimensionExt') {
+        this.view.xaxisExt.splice(item.index, 1)
+      }
       this.calcData(true)
     },
 
@@ -1728,6 +1788,8 @@ export default {
             this.view.xaxis[this.itemForm.index].name = this.itemForm.name
           } else if (this.itemForm.renameType === 'quotaExt') {
             this.view.yaxisExt[this.itemForm.index].name = this.itemForm.name
+          } else if (this.itemForm.renameType === 'dimensionExt') {
+            this.view.xaxisExt[this.itemForm.index].name = this.itemForm.name
           }
           this.calcData(true)
           this.closeRename()
@@ -1806,7 +1868,9 @@ export default {
       if (this.view.tableId !== this.changeTable.id) {
         this.view.tableId = this.changeTable.id
         this.view.xaxis = []
+        this.view.xaxisExt = []
         this.view.yaxis = []
+        this.view.yaxisExt = []
         this.view.customFilter = []
         this.view.extStack = []
         this.view.extBubble = []
@@ -1869,6 +1933,16 @@ export default {
       }
       this.calcData(true)
     },
+    addXaxisExt(e) {
+      if (this.view.type !== 'table-info') {
+        this.dragCheckType(this.view.xaxis, 'd')
+      }
+      this.dragMoveDuplicate(this.view.xaxis, e)
+      if ((this.view.type === 'map' || this.view.type === 'word-cloud') && this.view.xaxis.length > 1) {
+        this.view.xaxis = [this.view.xaxis[0]]
+      }
+      this.calcData(true)
+    },
     addYaxis(e) {
       this.dragCheckType(this.view.yaxis, 'q')
       this.dragMoveDuplicate(this.view.yaxis, e)

frontend/src/views/chart/view/ChartType.vue

@@ -20,7 +20,16 @@
               <p class="radio-label">{{ $t('chart.chart_table_info') }}</p>
             </el-radio>
           </div>
-          <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
+          <div style="position: relative;display: block;">
+            <el-radio value="table-pivot" label="table-pivot" border class="radio-style">
+              <span :title="$t('chart.chart_table_pivot')">
+                <svg-icon icon-class="table-pivot" class="chart-icon" />
+              </span>
+              <p class="radio-label">{{ $t('chart.chart_table_pivot') }}</p>
+            </el-radio>
+          </div>
+          <!--如需要，以下用于占位-->
+          <!--<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
         </div>
       </div>
 

mobile/src/components/uni-col/uni-col.vue

@@ -0,0 +1,317 @@
+<template>
+	<!-- #ifndef APP-NVUE -->
+	<view :class="['uni-col', sizeClass, pointClassList]" :style="{
+		paddingLeft:`${Number(gutter)}rpx`,
+		paddingRight:`${Number(gutter)}rpx`,
+	}">
+		<slot></slot>
+	</view>
+	<!-- #endif -->
+	<!-- #ifdef APP-NVUE -->
+	<!-- 在nvue上，类名样式不生效，换为style -->
+	<!-- 设置right正值失效，设置 left 负值 -->
+	<view :class="['uni-col']" :style="{
+		paddingLeft:`${Number(gutter)}rpx`,
+		paddingRight:`${Number(gutter)}rpx`,
+		width:`${nvueWidth}rpx`,
+		position:'relative',
+		marginLeft:`${marginLeft}rpx`,
+		left:`${right === 0 ? left : -right}rpx`
+	}">
+		<slot></slot>
+	</view>
+	<!-- #endif -->
+</template>
+
+<script>
+	/**
+	 * Col	布局-列
+	 * @description	搭配uni-row使用，构建布局。
+	 * @tutorial	https://ext.dcloud.net.cn/plugin?id=3958
+	 *
+	 * @property	{span} type = Number 栅格占据的列数
+	 * 						默认 24
+	 * @property	{offset} type = Number 栅格左侧的间隔格数
+	 * @property	{push} type = Number 栅格向右移动格数
+	 * @property	{pull} type = Number 栅格向左移动格数
+	 * @property	{xs} type = [Number, Object] <768px 响应式栅格数或者栅格属性对象
+	 * 						@description	Number时表示在此屏幕宽度下，栅格占据的列数。Object时可配置多个描述{span: 4, offset: 4}
+	 * @property	{sm} type = [Number, Object] ≥768px 响应式栅格数或者栅格属性对象
+	 * 						@description	Number时表示在此屏幕宽度下，栅格占据的列数。Object时可配置多个描述{span: 4, offset: 4}
+	 * @property	{md} type = [Number, Object] ≥992px 响应式栅格数或者栅格属性对象
+	 * 						@description	Number时表示在此屏幕宽度下，栅格占据的列数。Object时可配置多个描述{span: 4, offset: 4}
+	 * @property	{lg} type = [Number, Object] ≥1200px 响应式栅格数或者栅格属性对象
+	 * 						@description	Number时表示在此屏幕宽度下，栅格占据的列数。Object时可配置多个描述{span: 4, offset: 4}
+	 * @property	{xl} type = [Number, Object] ≥1920px 响应式栅格数或者栅格属性对象
+	 * 						@description	Number时表示在此屏幕宽度下，栅格占据的列数。Object时可配置多个描述{span: 4, offset: 4}
+	 */
+	const ComponentClass = 'uni-col';
+
+	// -1 默认值，因为在微信小程序端只给Number会有默认值0
+	export default {
+		name: 'uniCol',
+		// #ifdef MP-WEIXIN
+		options: {
+			virtualHost: true // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现
+		},
+		// #endif
+		props: {
+			span: {
+				type: Number,
+				default: 24
+			},
+			offset: {
+				type: Number,
+				default: -1
+			},
+			pull: {
+				type: Number,
+				default: -1
+			},
+			push: {
+				type: Number,
+				default: -1
+			},
+			xs: [Number, Object],
+			sm: [Number, Object],
+			md: [Number, Object],
+			lg: [Number, Object],
+			xl: [Number, Object]
+		},
+		data() {
+			return {
+				gutter: 0,
+				sizeClass: '',
+				parentWidth: 0,
+				nvueWidth: 0,
+				marginLeft: 0,
+				right: 0,
+				left: 0
+			}
+		},
+		created() {
+			// 字节小程序中，在computed中读取$parent为undefined
+			let parent = this.$parent;
+
+			while (parent && parent.$options.componentName !== 'uniRow') {
+				parent = parent.$parent;
+			}
+
+			this.updateGutter(parent.gutter)
+			parent.$watch('gutter', (gutter) => {
+				this.updateGutter(gutter)
+			})
+
+			// #ifdef APP-NVUE
+			this.updateNvueWidth(parent.width)
+			parent.$watch('width', (width) => {
+				this.updateNvueWidth(width)
+			})
+			// #endif
+		},
+		computed: {
+			sizeList() {
+				let {
+					span,
+					offset,
+					pull,
+					push
+				} = this;
+
+				return {
+					span,
+					offset,
+					pull,
+					push
+				}
+			},
+			// #ifndef APP-NVUE
+			pointClassList() {
+				let classList = [];
+
+				['xs', 'sm', 'md', 'lg', 'xl'].forEach(point => {
+					const props = this[point];
+					if (typeof props === 'number') {
+						classList.push(`${ComponentClass}-${point}-${props}`)
+					} else if (typeof props === 'object' && props) {
+						Object.keys(props).forEach(pointProp => {
+							classList.push(
+								pointProp === 'span' ?
+								`${ComponentClass}-${point}-${props[pointProp]}` :
+								`${ComponentClass}-${point}-${pointProp}-${props[pointProp]}`
+							)
+						})
+					}
+				});
+
+				// 支付宝小程序使用 :class=[ ['a','b'] ]，渲染错误
+				return classList.join(' ');
+			}
+			// #endif
+		},
+		methods: {
+			updateGutter(parentGutter) {
+				parentGutter = Number(parentGutter);
+				if (!isNaN(parentGutter)) {
+					this.gutter = parentGutter / 2
+				}
+			},
+			// #ifdef APP-NVUE
+			updateNvueWidth(width) {
+				// 用于在nvue端，span，offset，pull，push的计算
+				this.parentWidth = width;
+				['span', 'offset', 'pull', 'push'].forEach(size => {
+					const curSize = this[size];
+					if ((curSize || curSize === 0) && curSize !== -1) {
+						let RPX = 1 / 24 * curSize * width
+						RPX = Number(RPX);
+						switch (size) {
+							case 'span':
+								this.nvueWidth = RPX
+								break;
+							case 'offset':
+								this.marginLeft = RPX
+								break;
+							case 'pull':
+								this.right = RPX
+								break;
+							case 'push':
+								this.left = RPX
+								break;
+						}
+					}
+				});
+			}
+			// #endif
+		},
+		watch: {
+			sizeList: {
+				immediate: true,
+				handler(newVal) {
+					// #ifndef APP-NVUE
+					let classList = [];
+					for (let size in newVal) {
+						const curSize = newVal[size];
+						if ((curSize || curSize === 0) && curSize !== -1) {
+							classList.push(
+								size === 'span' ?
+								`${ComponentClass}-${curSize}` :
+								`${ComponentClass}-${size}-${curSize}`
+							)
+						}
+					}
+					// 支付宝小程序使用 :class=[ ['a','b'] ]，渲染错误
+					this.sizeClass = classList.join(' ');
+					// #endif
+					// #ifdef APP-NVUE
+					this.updateNvueWidth(this.parentWidth);
+					// #endif
+				}
+			}
+		}
+	}
+</script>
+
+<style lang='scss' scoped>
+	/* breakpoints */
+	$--sm: 768px !default;
+	$--md: 992px !default;
+	$--lg: 1200px !default;
+	$--xl: 1920px !default;
+
+	$breakpoints: ('xs' : (max-width: $--sm - 1),
+	'sm' : (min-width: $--sm),
+	'md' : (min-width: $--md),
+	'lg' : (min-width: $--lg),
+	'xl' : (min-width: $--xl));
+
+	$layout-namespace: ".uni-";
+	$col: $layout-namespace+"col";
+
+	@function getSize($size) {
+		/* TODO 1/24 * $size * 100 * 1%; 使用计算后的值，为了解决 vue3 控制台报错 */
+		@return 0.04166666666 * $size * 100 * 1%;
+	}
+
+	@mixin res($key, $map:$breakpoints) {
+		@if map-has-key($map, $key) {
+			@media screen and #{inspect(map-get($map,$key))} {
+				@content;
+			}
+		}
+
+		@else {
+			@warn "Undeinfed point: `#{$key}`";
+		}
+	}
+
+	/* #ifndef APP-NVUE */
+	#{$col} {
+		float: left;
+		box-sizing: border-box;
+	}
+
+	#{$col}-0 {
+		/* #ifdef APP-NVUE */
+		width: 0;
+		height: 0;
+		margin-top: 0;
+		margin-right: 0;
+		margin-bottom: 0;
+		margin-left: 0;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		display: none;
+		/* #endif */
+	}
+
+	@for $i from 0 through 24 {
+		#{$col}-#{$i} {
+			width: getSize($i);
+		}
+
+		#{$col}-offset-#{$i} {
+			margin-left: getSize($i);
+		}
+
+		#{$col}-pull-#{$i} {
+			position: relative;
+			right: getSize($i);
+		}
+
+		#{$col}-push-#{$i} {
+			position: relative;
+			left: getSize($i);
+		}
+	}
+
+	@each $point in map-keys($breakpoints) {
+		@include res($point) {
+			#{$col}-#{$point}-0 {
+				display: none;
+			}
+
+			@for $i from 0 through 24 {
+				#{$col}-#{$point}-#{$i} {
+					width: getSize($i);
+				}
+
+				#{$col}-#{$point}-offset-#{$i} {
+					margin-left: getSize($i);
+				}
+
+				#{$col}-#{$point}-pull-#{$i} {
+					position: relative;
+					right: getSize($i);
+				}
+
+				#{$col}-#{$point}-push-#{$i} {
+					position: relative;
+					left: getSize($i);
+				}
+			}
+		}
+	}
+
+	/* #endif */
+</style>

mobile/src/components/uni-icons/icons.js

@@ -1,132 +0,0 @@
-export default {
-	"pulldown": "\ue588",
-	"refreshempty": "\ue461",
-	"back": "\ue471",
-	"forward": "\ue470",
-	"more": "\ue507",
-	"more-filled": "\ue537",
-	"scan": "\ue612",
-	"qq": "\ue264",
-	"weibo": "\ue260",
-	"weixin": "\ue261",
-	"pengyouquan": "\ue262",
-	"loop": "\ue565",
-	"refresh": "\ue407",
-	"refresh-filled": "\ue437",
-	"arrowthindown": "\ue585",
-	"arrowthinleft": "\ue586",
-	"arrowthinright": "\ue587",
-	"arrowthinup": "\ue584",
-	"undo-filled": "\ue7d6",
-	"undo": "\ue406",
-	"redo": "\ue405",
-	"redo-filled": "\ue7d9",
-	"bars": "\ue563",
-	"chatboxes": "\ue203",
-	"camera": "\ue301",
-	"chatboxes-filled": "\ue233",
-	"camera-filled": "\ue7ef",
-	"cart-filled": "\ue7f4",
-	"cart": "\ue7f5",
-	"checkbox-filled": "\ue442",
-	"checkbox": "\ue7fa",
-	"arrowleft": "\ue582",
-	"arrowdown": "\ue581",
-	"arrowright": "\ue583",
-	"smallcircle-filled": "\ue801",
-	"arrowup": "\ue580",
-	"circle": "\ue411",
-	"eye-filled": "\ue568",
-	"eye-slash-filled": "\ue822",
-	"eye-slash": "\ue823",
-	"eye": "\ue824",
-	"flag-filled": "\ue825",
-	"flag": "\ue508",
-	"gear-filled": "\ue532",
-	"reload": "\ue462",
-	"gear": "\ue502",
-	"hand-thumbsdown-filled": "\ue83b",
-	"hand-thumbsdown": "\ue83c",
-	"hand-thumbsup-filled": "\ue83d",
-	"heart-filled": "\ue83e",
-	"hand-thumbsup": "\ue83f",
-	"heart": "\ue840",
-	"home": "\ue500",
-	"info": "\ue504",
-	"home-filled": "\ue530",
-	"info-filled": "\ue534",
-	"circle-filled": "\ue441",
-	"chat-filled": "\ue847",
-	"chat": "\ue263",
-	"mail-open-filled": "\ue84d",
-	"email-filled": "\ue231",
-	"mail-open": "\ue84e",
-	"email": "\ue201",
-	"checkmarkempty": "\ue472",
-	"list": "\ue562",
-	"locked-filled": "\ue856",
-	"locked": "\ue506",
-	"map-filled": "\ue85c",
-	"map-pin": "\ue85e",
-	"map-pin-ellipse": "\ue864",
-	"map": "\ue364",
-	"minus-filled": "\ue440",
-	"mic-filled": "\ue332",
-	"minus": "\ue410",
-	"micoff": "\ue360",
-	"mic": "\ue302",
-	"clear": "\ue434",
-	"smallcircle": "\ue868",
-	"close": "\ue404",
-	"closeempty": "\ue460",
-	"paperclip": "\ue567",
-	"paperplane": "\ue503",
-	"paperplane-filled": "\ue86e",
-	"person-filled": "\ue131",
-	"contact-filled": "\ue130",
-	"person": "\ue101",
-	"contact": "\ue100",
-	"images-filled": "\ue87a",
-	"phone": "\ue200",
-	"images": "\ue87b",
-	"image": "\ue363",
-	"image-filled": "\ue877",
-	"location-filled": "\ue333",
-	"location": "\ue303",
-	"plus-filled": "\ue439",
-	"plus": "\ue409",
-	"plusempty": "\ue468",
-	"help-filled": "\ue535",
-	"help": "\ue505",
-	"navigate-filled": "\ue884",
-	"navigate": "\ue501",
-	"mic-slash-filled": "\ue892",
-	"search": "\ue466",
-	"settings": "\ue560",
-	"sound": "\ue590",
-	"sound-filled": "\ue8a1",
-	"spinner-cycle": "\ue465",
-	"download-filled": "\ue8a4",
-	"personadd-filled": "\ue132",
-	"videocam-filled": "\ue8af",
-	"personadd": "\ue102",
-	"upload": "\ue402",
-	"upload-filled": "\ue8b1",
-	"starhalf": "\ue463",
-	"star-filled": "\ue438",
-	"star": "\ue408",
-	"trash": "\ue401",
-	"phone-filled": "\ue230",
-	"compose": "\ue400",
-	"videocam": "\ue300",
-	"trash-filled": "\ue8dc",
-	"download": "\ue403",
-	"chatbubble-filled": "\ue232",
-	"chatbubble": "\ue202",
-	"cloud-download": "\ue8e4",
-	"cloud-upload-filled": "\ue8e5",
-	"cloud-upload": "\ue8e6",
-	"cloud-download-filled": "\ue8e9",
-	"headphones":"\ue8bf",
-	"shop":"\ue609"
-}

mobile/src/components/uni-row/uni-row.vue

@@ -0,0 +1,190 @@
+<template>
+	<view :class="[ 'uni-row', typeClass , justifyClass, alignClass, ]" :style="{
+		marginLeft:`${Number(marginValue)}rpx`,
+		marginRight:`${Number(marginValue)}rpx`,
+	}">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	const ComponentClass = 'uni-row';
+	const modifierSeparator = '--';
+	/**
+	 * Row	布局-行
+	 * @description	流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。
+	 * @tutorial	https://ext.dcloud.net.cn/plugin?id=3958
+	 *
+	 * @property	{gutter} type = Number 栅格间隔
+	 * @property	{justify} type = String flex 布局下的水平排列方式
+	 * 						可选	start/end/center/space-around/space-between	start
+	 * 						默认值	start
+	 * @property	{align} type = String flex 布局下的垂直排列方式
+	 * 						可选	top/middle/bottom
+	 * 						默认值	top
+	 * @property	{width} type = String|Number nvue下需要自行配置宽度用于计算
+	 * 						默认值 750
+	 */
+
+
+	export default {
+		name: 'uniRow',
+		componentName: 'uniRow',
+		// #ifdef MP-WEIXIN
+		options: {
+			virtualHost: true // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现，可使用flex布局
+		},
+		// #endif
+		props: {
+			type: String,
+			gutter: Number,
+			justify: {
+				type: String,
+				default: 'start'
+			},
+			align: {
+				type: String,
+				default: 'top'
+			},
+			// nvue如果使用span等属性，需要配置宽度
+			width: {
+				type: [String, Number],
+				default: 750
+			}
+		},
+		created() {
+			// #ifdef APP-NVUE
+			this.type = 'flex';
+			// #endif
+		},
+		computed: {
+			marginValue() {
+				// #ifndef APP-NVUE
+				if (this.gutter) {
+					return -(this.gutter / 2);
+				}
+				// #endif
+				return 0;
+			},
+			typeClass() {
+				return this.type === 'flex' ? `${ComponentClass + modifierSeparator}flex` : '';
+			},
+			justifyClass() {
+				return this.justify !== 'start' ? `${ComponentClass + modifierSeparator}flex-justify-${this.justify}` : ''
+			},
+			alignClass() {
+				return this.align !== 'top' ? `${ComponentClass + modifierSeparator}flex-align-${this.align}` : ''
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	$layout-namespace: ".uni-";
+	$row:$layout-namespace+"row";
+	$modifier-separator: "--";
+
+	@mixin utils-clearfix {
+		$selector: &;
+
+		@at-root {
+
+			/* #ifndef APP-NVUE */
+			#{$selector}::before,
+			#{$selector}::after {
+				display: table;
+				content: "";
+			}
+
+			#{$selector}::after {
+				clear: both;
+			}
+
+			/* #endif */
+		}
+
+	}
+
+	@mixin utils-flex ($direction: row) {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: $direction;
+	}
+
+	@mixin set-flex($state) {
+		@at-root &-#{$state} {
+			@content
+		}
+	}
+
+	#{$row} {
+		position: relative;
+		flex-direction: row;
+
+		/* #ifdef APP-NVUE */
+		flex: 1;
+		/* #endif */
+
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		/* #endif */
+
+		// 非nvue使用float布局
+		@include utils-clearfix;
+
+		// 在QQ、字节、百度小程序平台，编译后使用shadow dom，不可使用flex布局，使用float
+		@at-root {
+
+			/* #ifndef MP-QQ || MP-TOUTIAO || MP-BAIDU */
+			&#{$modifier-separator}flex {
+				@include utils-flex;
+				flex-wrap: wrap;
+				flex: 1;
+
+				&:before,
+				&:after {
+					/* #ifndef APP-NVUE */
+					display: none;
+					/* #endif */
+				}
+
+				@include set-flex(justify-center) {
+					justify-content: center;
+				}
+
+				@include set-flex(justify-end) {
+					justify-content: flex-end;
+				}
+
+				@include set-flex(justify-space-between) {
+					justify-content: space-between;
+				}
+
+				@include set-flex(justify-space-around) {
+					justify-content: space-around;
+				}
+
+				@include set-flex(align-middle) {
+					align-items: center;
+				}
+
+				@include set-flex(align-bottom) {
+					align-items: flex-end;
+				}
+			}
+
+			/* #endif */
+		}
+
+	}
+
+	// 字节、QQ配置后不生效
+	// 此处用法无法使用scoped
+	/* #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ */
+	:host {
+		display: block;
+	}
+
+	/* #endif */
+</style>

mobile/src/pages/tabBar/home/detail.nvue

@@ -1,9 +1,21 @@
 <template>
 	<view class="page dataease-main">
-        <uni-list>
-            <uni-list-item class="person-title" :title="banner.title" />
-        </uni-list>
-		
+       
+		<uni-nav-bar :title="banner.title" >
+			<view slot="right">
+				<uni-row class="demo-uni-row" >
+					<uni-col :span="12" @click="enshrine">
+						<uni-icons v-if="hasStar" type="star-filled" size="18" color="#007AFF"></uni-icons>
+						<uni-icons v-else type="star" size="18" color="#999"></uni-icons>
+					</uni-col>
+					
+					<uni-col :span="12" @click="refresh" style="margin: 0 10rpx;">
+						<uni-icons type="reload" size="18" color="#999"></uni-icons>
+					</uni-col>
+				</uni-row>
+				
+			</view>
+		</uni-nav-bar>
 		<view class="article-content">
             <view v-if="url">
                 <web-view
@@ -17,19 +29,7 @@
 		<ad v-if="htmlNodes.length > 0" unit-id="adunit-01b7a010bf53d74e"></ad>
 		<!-- #endif -->
 
-        <view  class="card-actions">
-            <view v-if="banner.index === 2" class="card-actions-item">
-
-            </view>
-            <view v-else class="card-actions-item" @click="enshrine">
-                <uni-icons v-if="hasStar" type="star-filled" size="18" color="#007AFF"></uni-icons>
-                <uni-icons v-else type="star" size="18" color="#999"></uni-icons>
-            </view>
-            
-            <view class="card-actions-item" @click="refresh">
-                <uni-icons type="reload" size="18" color="#999"></uni-icons>
-            </view>
-        </view>
+       
 	</view>
 </template>
 
@@ -271,7 +271,7 @@
     
 }
 .article-content {
-    height: calc(100vh - 110px);
+    height: 100vh;
     margin: 5px 0;
     background: #ffffff;
 }

mobile/src/uni_modules/uni-icons/changelog.md

@@ -0,0 +1,22 @@
+## 1.3.5（2022-01-24）
+- 优化 size 属性可以传入不带单位的字符串数值
+## 1.3.4（2022-01-24）
+- 优化 size 支持其他单位
+## 1.3.3（2022-01-17）
+- 修复 nvue 有些图标不显示的bug，兼容老版本图标
+## 1.3.2（2021-12-01）
+- 优化 示例可复制图标名称
+## 1.3.1（2021-11-23）
+- 优化 兼容旧组件 type 值
+## 1.3.0（2021-11-19）
+- 新增 更多图标
+- 优化 自定义图标使用方式
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-icons](https://uniapp.dcloud.io/component/uniui/uni-icons)
+## 1.1.7（2021-11-08）
+## 1.2.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.1.5（2021-05-12）
+- 新增 组件示例地址
+## 1.1.4（2021-02-05）
+- 调整为uni_modules目录规范

mobile/src/uni_modules/uni-icons/components/uni-icons/uni-icons.vue

@@ -0,0 +1,96 @@
+<template>
+	<!-- #ifdef APP-NVUE -->
+	<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">{{unicode}}</text>
+	<!-- #endif -->
+	<!-- #ifndef APP-NVUE -->
+	<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text>
+	<!-- #endif -->
+</template>
+
+<script>
+	import icons from './icons.js';
+	const getVal = (val) => {
+		const reg = /^[0-9]*$/g
+		return (typeof val === 'number' ||　reg.test(val) )? val + 'px' : val;
+	} 
+	// #ifdef APP-NVUE
+	var domModule = weex.requireModule('dom');
+	import iconUrl from './uniicons.ttf'
+	domModule.addRule('fontFace', {
+		'fontFamily': "uniicons",
+		'src': "url('"+iconUrl+"')"
+	});
+	// #endif
+
+	/**
+	 * Icons 图标
+	 * @description 用于展示 icons 图标
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=28
+	 * @property {Number} size 图标大小
+	 * @property {String} type 图标图案，参考示例
+	 * @property {String} color 图标颜色
+	 * @property {String} customPrefix 自定义图标
+	 * @event {Function} click 点击 Icon 触发事件
+	 */
+	export default {
+		name: 'UniIcons',
+		emits:['click'],
+		props: {
+			type: {
+				type: String,
+				default: ''
+			},
+			color: {
+				type: String,
+				default: '#333333'
+			},
+			size: {
+				type: [Number, String],
+				default: 16
+			},
+			customPrefix:{
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				icons: icons.glyphs
+			}
+		},
+		computed:{
+			unicode(){
+				let code = this.icons.find(v=>v.font_class === this.type)
+				if(code){
+					return unescape(`%u${code.unicode}`)
+				}
+				return ''
+			},
+			iconSize(){
+				return getVal(this.size)
+			}
+		},
+		methods: {
+			_onClick() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	/* #ifndef APP-NVUE */
+	@import './uniicons.css';
+	@font-face {
+		font-family: uniicons;
+		src: url('./uniicons.ttf') format('truetype');
+	}
+
+	/* #endif */
+	.uni-icons {
+		font-family: uniicons;
+		text-decoration: none;
+		text-align: center;
+	}
+
+</style>

mobile/src/uni_modules/uni-icons/components/uni-icons/uniicons.css

@@ -0,0 +1,663 @@
+.uniui-color:before {
+  content: "\e6cf";
+}
+
+.uniui-wallet:before {
+  content: "\e6b1";
+}
+
+.uniui-settings-filled:before {
+  content: "\e6ce";
+}
+
+.uniui-auth-filled:before {
+  content: "\e6cc";
+}
+
+.uniui-shop-filled:before {
+  content: "\e6cd";
+}
+
+.uniui-staff-filled:before {
+  content: "\e6cb";
+}
+
+.uniui-vip-filled:before {
+  content: "\e6c6";
+}
+
+.uniui-plus-filled:before {
+  content: "\e6c7";
+}
+
+.uniui-folder-add-filled:before {
+  content: "\e6c8";
+}
+
+.uniui-color-filled:before {
+  content: "\e6c9";
+}
+
+.uniui-tune-filled:before {
+  content: "\e6ca";
+}
+
+.uniui-calendar-filled:before {
+  content: "\e6c0";
+}
+
+.uniui-notification-filled:before {
+  content: "\e6c1";
+}
+
+.uniui-wallet-filled:before {
+  content: "\e6c2";
+}
+
+.uniui-medal-filled:before {
+  content: "\e6c3";
+}
+
+.uniui-gift-filled:before {
+  content: "\e6c4";
+}
+
+.uniui-fire-filled:before {
+  content: "\e6c5";
+}
+
+.uniui-refreshempty:before {
+  content: "\e6bf";
+}
+
+.uniui-location-filled:before {
+  content: "\e6af";
+}
+
+.uniui-person-filled:before {
+  content: "\e69d";
+}
+
+.uniui-personadd-filled:before {
+  content: "\e698";
+}
+
+.uniui-back:before {
+  content: "\e6b9";
+}
+
+.uniui-forward:before {
+  content: "\e6ba";
+}
+
+.uniui-arrow-right:before {
+  content: "\e6bb";
+}
+
+.uniui-arrowthinright:before {
+  content: "\e6bb";
+}
+
+.uniui-arrow-left:before {
+  content: "\e6bc";
+}
+
+.uniui-arrowthinleft:before {
+  content: "\e6bc";
+}
+
+.uniui-arrow-up:before {
+  content: "\e6bd";
+}
+
+.uniui-arrowthinup:before {
+  content: "\e6bd";
+}
+
+.uniui-arrow-down:before {
+  content: "\e6be";
+}
+
+.uniui-arrowthindown:before {
+  content: "\e6be";
+}
+
+.uniui-bottom:before {
+  content: "\e6b8";
+}
+
+.uniui-arrowdown:before {
+  content: "\e6b8";
+}
+
+.uniui-right:before {
+  content: "\e6b5";
+}
+
+.uniui-arrowright:before {
+  content: "\e6b5";
+}
+
+.uniui-top:before {
+  content: "\e6b6";
+}
+
+.uniui-arrowup:before {
+  content: "\e6b6";
+}
+
+.uniui-left:before {
+  content: "\e6b7";
+}
+
+.uniui-arrowleft:before {
+  content: "\e6b7";
+}
+
+.uniui-eye:before {
+  content: "\e651";
+}
+
+.uniui-eye-filled:before {
+  content: "\e66a";
+}
+
+.uniui-eye-slash:before {
+  content: "\e6b3";
+}
+
+.uniui-eye-slash-filled:before {
+  content: "\e6b4";
+}
+
+.uniui-info-filled:before {
+  content: "\e649";
+}
+
+.uniui-reload:before {
+  content: "\e6b2";
+}
+
+.uniui-micoff-filled:before {
+  content: "\e6b0";
+}
+
+.uniui-map-pin-ellipse:before {
+  content: "\e6ac";
+}
+
+.uniui-map-pin:before {
+  content: "\e6ad";
+}
+
+.uniui-location:before {
+  content: "\e6ae";
+}
+
+.uniui-starhalf:before {
+  content: "\e683";
+}
+
+.uniui-star:before {
+  content: "\e688";
+}
+
+.uniui-star-filled:before {
+  content: "\e68f";
+}
+
+.uniui-calendar:before {
+  content: "\e6a0";
+}
+
+.uniui-fire:before {
+  content: "\e6a1";
+}
+
+.uniui-medal:before {
+  content: "\e6a2";
+}
+
+.uniui-font:before {
+  content: "\e6a3";
+}
+
+.uniui-gift:before {
+  content: "\e6a4";
+}
+
+.uniui-link:before {
+  content: "\e6a5";
+}
+
+.uniui-notification:before {
+  content: "\e6a6";
+}
+
+.uniui-staff:before {
+  content: "\e6a7";
+}
+
+.uniui-vip:before {
+  content: "\e6a8";
+}
+
+.uniui-folder-add:before {
+  content: "\e6a9";
+}
+
+.uniui-tune:before {
+  content: "\e6aa";
+}
+
+.uniui-auth:before {
+  content: "\e6ab";
+}
+
+.uniui-person:before {
+  content: "\e699";
+}
+
+.uniui-email-filled:before {
+  content: "\e69a";
+}
+
+.uniui-phone-filled:before {
+  content: "\e69b";
+}
+
+.uniui-phone:before {
+  content: "\e69c";
+}
+
+.uniui-email:before {
+  content: "\e69e";
+}
+
+.uniui-personadd:before {
+  content: "\e69f";
+}
+
+.uniui-chatboxes-filled:before {
+  content: "\e692";
+}
+
+.uniui-contact:before {
+  content: "\e693";
+}
+
+.uniui-chatbubble-filled:before {
+  content: "\e694";
+}
+
+.uniui-contact-filled:before {
+  content: "\e695";
+}
+
+.uniui-chatboxes:before {
+  content: "\e696";
+}
+
+.uniui-chatbubble:before {
+  content: "\e697";
+}
+
+.uniui-upload-filled:before {
+  content: "\e68e";
+}
+
+.uniui-upload:before {
+  content: "\e690";
+}
+
+.uniui-weixin:before {
+  content: "\e691";
+}
+
+.uniui-compose:before {
+  content: "\e67f";
+}
+
+.uniui-qq:before {
+  content: "\e680";
+}
+
+.uniui-download-filled:before {
+  content: "\e681";
+}
+
+.uniui-pyq:before {
+  content: "\e682";
+}
+
+.uniui-sound:before {
+  content: "\e684";
+}
+
+.uniui-trash-filled:before {
+  content: "\e685";
+}
+
+.uniui-sound-filled:before {
+  content: "\e686";
+}
+
+.uniui-trash:before {
+  content: "\e687";
+}
+
+.uniui-videocam-filled:before {
+  content: "\e689";
+}
+
+.uniui-spinner-cycle:before {
+  content: "\e68a";
+}
+
+.uniui-weibo:before {
+  content: "\e68b";
+}
+
+.uniui-videocam:before {
+  content: "\e68c";
+}
+
+.uniui-download:before {
+  content: "\e68d";
+}
+
+.uniui-help:before {
+  content: "\e679";
+}
+
+.uniui-navigate-filled:before {
+  content: "\e67a";
+}
+
+.uniui-plusempty:before {
+  content: "\e67b";
+}
+
+.uniui-smallcircle:before {
+  content: "\e67c";
+}
+
+.uniui-minus-filled:before {
+  content: "\e67d";
+}
+
+.uniui-micoff:before {
+  content: "\e67e";
+}
+
+.uniui-closeempty:before {
+  content: "\e66c";
+}
+
+.uniui-clear:before {
+  content: "\e66d";
+}
+
+.uniui-navigate:before {
+  content: "\e66e";
+}
+
+.uniui-minus:before {
+  content: "\e66f";
+}
+
+.uniui-image:before {
+  content: "\e670";
+}
+
+.uniui-mic:before {
+  content: "\e671";
+}
+
+.uniui-paperplane:before {
+  content: "\e672";
+}
+
+.uniui-close:before {
+  content: "\e673";
+}
+
+.uniui-help-filled:before {
+  content: "\e674";
+}
+
+.uniui-paperplane-filled:before {
+  content: "\e675";
+}
+
+.uniui-plus:before {
+  content: "\e676";
+}
+
+.uniui-mic-filled:before {
+  content: "\e677";
+}
+
+.uniui-image-filled:before {
+  content: "\e678";
+}
+
+.uniui-locked-filled:before {
+  content: "\e668";
+}
+
+.uniui-info:before {
+  content: "\e669";
+}
+
+.uniui-locked:before {
+  content: "\e66b";
+}
+
+.uniui-camera-filled:before {
+  content: "\e658";
+}
+
+.uniui-chat-filled:before {
+  content: "\e659";
+}
+
+.uniui-camera:before {
+  content: "\e65a";
+}
+
+.uniui-circle:before {
+  content: "\e65b";
+}
+
+.uniui-checkmarkempty:before {
+  content: "\e65c";
+}
+
+.uniui-chat:before {
+  content: "\e65d";
+}
+
+.uniui-circle-filled:before {
+  content: "\e65e";
+}
+
+.uniui-flag:before {
+  content: "\e65f";
+}
+
+.uniui-flag-filled:before {
+  content: "\e660";
+}
+
+.uniui-gear-filled:before {
+  content: "\e661";
+}
+
+.uniui-home:before {
+  content: "\e662";
+}
+
+.uniui-home-filled:before {
+  content: "\e663";
+}
+
+.uniui-gear:before {
+  content: "\e664";
+}
+
+.uniui-smallcircle-filled:before {
+  content: "\e665";
+}
+
+.uniui-map-filled:before {
+  content: "\e666";
+}
+
+.uniui-map:before {
+  content: "\e667";
+}
+
+.uniui-refresh-filled:before {
+  content: "\e656";
+}
+
+.uniui-refresh:before {
+  content: "\e657";
+}
+
+.uniui-cloud-upload:before {
+  content: "\e645";
+}
+
+.uniui-cloud-download-filled:before {
+  content: "\e646";
+}
+
+.uniui-cloud-download:before {
+  content: "\e647";
+}
+
+.uniui-cloud-upload-filled:before {
+  content: "\e648";
+}
+
+.uniui-redo:before {
+  content: "\e64a";
+}
+
+.uniui-images-filled:before {
+  content: "\e64b";
+}
+
+.uniui-undo-filled:before {
+  content: "\e64c";
+}
+
+.uniui-more:before {
+  content: "\e64d";
+}
+
+.uniui-more-filled:before {
+  content: "\e64e";
+}
+
+.uniui-undo:before {
+  content: "\e64f";
+}
+
+.uniui-images:before {
+  content: "\e650";
+}
+
+.uniui-paperclip:before {
+  content: "\e652";
+}
+
+.uniui-settings:before {
+  content: "\e653";
+}
+
+.uniui-search:before {
+  content: "\e654";
+}
+
+.uniui-redo-filled:before {
+  content: "\e655";
+}
+
+.uniui-list:before {
+  content: "\e644";
+}
+
+.uniui-mail-open-filled:before {
+  content: "\e63a";
+}
+
+.uniui-hand-down-filled:before {
+  content: "\e63c";
+}
+
+.uniui-hand-down:before {
+  content: "\e63d";
+}
+
+.uniui-hand-up-filled:before {
+  content: "\e63e";
+}
+
+.uniui-hand-up:before {
+  content: "\e63f";
+}
+
+.uniui-heart-filled:before {
+  content: "\e641";
+}
+
+.uniui-mail-open:before {
+  content: "\e643";
+}
+
+.uniui-heart:before {
+  content: "\e639";
+}
+
+.uniui-loop:before {
+  content: "\e633";
+}
+
+.uniui-pulldown:before {
+  content: "\e632";
+}
+
+.uniui-scan:before {
+  content: "\e62a";
+}
+
+.uniui-bars:before {
+  content: "\e627";
+}
+
+.uniui-cart-filled:before {
+  content: "\e629";
+}
+
+.uniui-checkbox:before {
+  content: "\e62b";
+}
+
+.uniui-checkbox-filled:before {
+  content: "\e62c";
+}
+
+.uniui-shop:before {
+  content: "\e62f";
+}
+
+.uniui-headphones:before {
+  content: "\e630";
+}
+
+.uniui-cart:before {
+  content: "\e631";
+}

mobile/src/uni_modules/uni-icons/package.json

@@ -0,0 +1,86 @@
+{
+  "id": "uni-icons",
+  "displayName": "uni-icons 图标",
+  "version": "1.3.5",
+  "description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "icon",
+    "图标"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "^3.2.14"
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

mobile/src/uni_modules/uni-icons/readme.md

@@ -0,0 +1,8 @@
+## Icons 图标
+> **组件名：uni-icons**
+> 代码块： `uIcons`
+
+用于展示 icons 图标 。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 

mobile/src/uni_modules/uni-nav-bar/changelog.md

@@ -0,0 +1,37 @@
+## 1.3.4（2022-01-24）
+- 更新 组件示例
+## 1.3.3（2022-01-24）
+- 新增 left-width/right-width属性 ，可修改左右两侧的宽度
+## 1.3.2（2022-01-18）
+- 修复 在vue下，标题不垂直居中的bug
+## 1.3.1（2022-01-18）
+- 修复 height 属性类型错误
+## 1.3.0（2022-01-18）
+- 新增 height 属性,可修改组件高度
+- 新增 dark 属性可可开启暗黑模式
+- 优化 标题字数过多显示省略号
+- 优化 插槽，插入内容可完全覆盖
+## 1.2.1（2022-01-10）
+- 修复 color 属性不生效的bug
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-nav-bar](https://uniapp.dcloud.io/component/uniui/uni-nav-bar)
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.11（2021-05-12）
+- 新增 组件示例地址
+## 1.0.10（2021-04-30）
+- 修复 在nvue下fixed为true，宽度不能撑满的Bug
+## 1.0.9（2021-04-21）
+- 优化 添加依赖 uni-icons, 导入后自动下载依赖
+## 1.0.8（2021-04-14）
+- uni-ui 修复 uni-nav-bar 当 fixed 属性为 true 时铺不满屏幕的 bug
+
+## 1.0.7（2021-02-25）
+- 修复 easycom 下，找不到 uni-status-bar 的bug
+
+## 1.0.6（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+
+## 1.0.5（2021-02-05）
+- 调整为uni_modules目录规范

mobile/src/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue

@@ -0,0 +1,343 @@
+<template>
+	<view class="uni-navbar" :class="{'uni-dark':dark}">
+		<view :class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }"
+			:style="{ 'background-color': themeBgColor }" class="uni-navbar__content">
+			<status-bar v-if="statusBar" />
+			<view :style="{ color: themeColor,backgroundColor: themeBgColor ,height:navbarHeight}"
+				class="uni-navbar__header">
+				<view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left"
+					:style="{width:leftIconWidth}">
+					<slot name="left">
+						<view class="uni-navbar__content_view" v-if="leftIcon.length > 0">
+							<uni-icons :color="themeColor" :type="leftIcon" size="20" />
+						</view>
+						<view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length > 0 }" class="uni-navbar-btn-text"
+							v-if="leftText.length">
+							<text :style="{ color: themeColor, fontSize: '12px' }">{{ leftText }}</text>
+						</view>
+					</slot>
+				</view>
+				<view class="uni-navbar__header-container " @tap="onClickTitle">
+					<slot>
+						<view class="uni-navbar__header-container-inner" v-if="title.length>0">
+							<text class="uni-nav-bar-text uni-ellipsis-1"
+								:style="{color: themeColor }">{{ title }}</text>
+						</view>
+					</slot>
+				</view>
+				<view @click="onClickRight" class="uni-navbar__header-btns uni-navbar__header-btns-right"
+					:style="{width:rightIconWidth}">
+					<slot name="right">
+						<view v-if="rightIcon.length">
+							<uni-icons :color="themeColor" :type="rightIcon" size="22" />
+						</view>
+						<view class="uni-navbar-btn-text" v-if="rightText.length && !rightIcon.length">
+							<text class="uni-nav-bar-right-text" :style="{ color: themeColor}">{{ rightText }}</text>
+						</view>
+					</slot>
+				</view>
+			</view>
+		</view>
+		<view class="uni-navbar__placeholder" v-if="fixed">
+			<status-bar v-if="statusBar" />
+			<view class="uni-navbar__placeholder-view" :style="{ height:navbarHeight}" />
+		</view>
+	</view>
+</template>
+
+<script>
+	import statusBar from "./uni-status-bar.vue";
+	const getVal = (val) => typeof val === 'number' ? val + 'px' : val;
+
+	/**
+	 * NavBar 自定义导航栏
+	 * @description 导航栏组件，主要用于头部导航
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=52
+	 * @property {Boolean} dark 开启黑暗模式
+	 * @property {String} title 标题文字
+	 * @property {String} leftText 左侧按钮文本
+	 * @property {String} rightText 右侧按钮文本
+	 * @property {String} leftIcon 左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
+	 * @property {String} rightIcon 右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
+	 * @property {String} color 图标和文字颜色
+	 * @property {String} backgroundColor 导航栏背景颜色
+	 * @property {Boolean} fixed = [true|false] 是否固定顶部
+	 * @property {Boolean} statusBar = [true|false] 是否包含状态栏
+	 * @property {Boolean} shadow = [true|false] 导航栏下是否有阴影
+	 * @event {Function} clickLeft 左侧按钮点击时触发
+	 * @event {Function} clickRight 右侧按钮点击时触发
+	 * @event {Function} clickTitle 中间标题点击时触发
+	 */
+	export default {
+		name: "UniNavBar",
+		components: {
+			statusBar
+		},
+		emits: ['clickLeft', 'clickRight', 'clickTitle'],
+		props: {
+			dark: {
+				type: Boolean,
+				default: false
+			},
+			title: {
+				type: String,
+				default: ""
+			},
+			leftText: {
+				type: String,
+				default: ""
+			},
+			rightText: {
+				type: String,
+				default: ""
+			},
+			leftIcon: {
+				type: String,
+				default: ""
+			},
+			rightIcon: {
+				type: String,
+				default: ""
+			},
+			fixed: {
+				type: [Boolean, String],
+				default: false
+			},
+			color: {
+				type: String,
+				default: ""
+			},
+			backgroundColor: {
+				type: String,
+				default: ""
+			},
+			statusBar: {
+				type: [Boolean, String],
+				default: false
+			},
+			shadow: {
+				type: [Boolean, String],
+				default: false
+			},
+			border: {
+				type: [Boolean, String],
+				default: true
+			},
+			height: {
+				type: [Number, String],
+				default: 44
+			},
+			leftWidth: {
+				type: [Number, String],
+				default: 60
+			},
+			rightWidth: {
+				type: [Number, String],
+				default: 60
+			},
+		},
+		computed: {
+			themeBgColor() {
+				if (this.dark) {
+					// 默认值
+					if (this.backgroundColor) {
+						return this.backgroundColor
+					} else {
+						return this.dark ? '#333' : '#FFF'
+					}
+				}
+				return this.backgroundColor || '#FFF'
+			},
+			themeColor() {
+				if (this.dark) {
+					// 默认值
+					if (this.color) {
+						return this.color
+					} else {
+						return this.dark ? '#fff' : '#333'
+					}
+				}
+				return this.color || '#333'
+			},
+			navbarHeight() {
+				return getVal(this.height)
+			},
+			leftIconWidth() {
+				return getVal(this.leftWidth)
+			},
+			rightIconWidth() {
+				return getVal(this.rightWidth)
+			}
+		},
+		mounted() {
+			if (uni.report && this.title !== '') {
+				uni.report('title', this.title)
+			}
+		},
+		methods: {
+			onClickLeft() {
+				this.$emit("clickLeft");
+			},
+			onClickRight() {
+				this.$emit("clickRight");
+			},
+			onClickTitle() {
+				this.$emit("clickTitle");
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	$nav-height: 44px;
+
+	.uni-navbar {
+		// box-sizing: border-box;
+	}
+
+	.uni-nav-bar-text {
+		/* #ifdef APP-PLUS */
+		font-size: 34rpx;
+		/* #endif */
+		/* #ifndef APP-PLUS */
+		font-size: 14px;
+		/* #endif */
+	}
+
+	.uni-nav-bar-right-text {
+		font-size: 12px;
+	}
+
+	.uni-navbar__content {
+		position: relative;
+		// background-color: #fff;
+		// box-sizing: border-box;
+		background-color: transparent;
+	}
+
+	.uni-navbar__content_view {
+		// box-sizing: border-box;
+	}
+
+	.uni-navbar-btn-text {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: center;
+		line-height: 12px;
+	}
+
+	.uni-navbar__header {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		padding: 0 10px;
+		flex-direction: row;
+		height: $nav-height;
+		font-size: 12px;
+	}
+
+	.uni-navbar__header-btns {
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		display: flex;
+		/* #endif */
+		flex-wrap: nowrap;
+		flex-direction: row;
+		width: 120rpx;
+		// padding: 0 6px;
+		justify-content: center;
+		align-items: center;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-navbar__header-btns-left {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		width: 120rpx;
+		justify-content: flex-start;
+		align-items: center;
+	}
+
+	.uni-navbar__header-btns-right {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		// width: 150rpx;
+		// padding-right: 30rpx;
+		justify-content: flex-end;
+		align-items: center;
+	}
+
+	.uni-navbar__header-container {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		padding: 0 10px;
+		overflow: hidden;
+	}
+
+	.uni-navbar__header-container-inner {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		font-size: 12px;
+		overflow: hidden;
+		// box-sizing: border-box;
+	}
+
+
+	.uni-navbar__placeholder-view {
+		height: $nav-height;
+	}
+
+	.uni-navbar--fixed {
+		position: fixed;
+		z-index: 998;
+		/* #ifdef H5 */
+		left: var(--window-left);
+		right: var(--window-right);
+		/* #endif */
+		/* #ifndef H5 */
+		left: 0;
+		right: 0;
+		/* #endif */
+
+	}
+
+	.uni-navbar--shadow {
+		box-shadow: 0 1px 6px #ccc;
+	}
+
+	.uni-navbar--border {
+		border-bottom-width: 1rpx;
+		border-bottom-style: solid;
+		border-bottom-color: #eee;
+	}
+
+	.uni-ellipsis-1 {
+		overflow: hidden;
+		/* #ifndef APP-NVUE */
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		lines: 1;
+		text-overflow: ellipsis;
+		/* #endif */
+	}
+
+	// 暗主题配置
+	.uni-dark {}
+</style>

mobile/src/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar.vue

@@ -0,0 +1,27 @@
+<template>
+	<view :style="{ height: statusBarHeight }" class="uni-status-bar">
+		<slot />
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'UniStatusBar',
+		data() {
+			return {
+				statusBarHeight: 20
+			}
+		},
+		mounted() {
+			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.uni-status-bar {
+		// width: 750rpx;
+		height: 20px;
+		// height: var(--status-bar-height);
+	}
+</style>

mobile/src/uni_modules/uni-nav-bar/package.json

@@ -0,0 +1,89 @@
+{
+  "id": "uni-nav-bar",
+  "displayName": "uni-nav-bar 自定义导航栏",
+  "version": "1.3.4",
+  "description": "自定义导航栏组件，主要用于头部导航。",
+  "keywords": [
+    "uni-ui",
+    "导航",
+    "导航栏",
+    "自定义导航栏"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

mobile/src/uni_modules/uni-nav-bar/readme.md

@@ -0,0 +1,15 @@
+
+
+## NavBar 导航栏
+> **组件名：uni-nav-bar**
+> 代码块： `uNavBar`
+
+导航栏组件，主要用于头部导航。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-nav-bar)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
+
+
+

mobile/src/uni_modules/uni-scss/changelog.md

@@ -0,0 +1,8 @@
+## 1.0.3（2022-01-21）
+- 优化 组件示例
+## 1.0.2（2021-11-22）
+- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
+## 1.0.1（2021-11-22）
+- 修复 vue3中scss语法兼容问题
+## 1.0.0（2021-11-18）
+- init

mobile/src/uni_modules/uni-scss/index.scss

@@ -0,0 +1 @@
+@import './styles/index.scss';

mobile/src/uni_modules/uni-scss/package.json

@@ -0,0 +1,82 @@
+{
+  "id": "uni-scss",
+  "displayName": "uni-scss 辅助样式",
+  "version": "1.0.3",
+  "description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。",
+  "keywords": [
+    "uni-scss",
+    "uni-ui",
+    "辅助样式"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "category": [
+        "JS SDK",
+        "通用 SDK"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

mobile/src/uni_modules/uni-scss/readme.md

@@ -0,0 +1,4 @@
+`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 

mobile/src/uni_modules/uni-scss/styles/index.scss

@@ -0,0 +1,7 @@
+@import './setting/_variables.scss';
+@import './setting/_border.scss';
+@import './setting/_color.scss';
+@import './setting/_space.scss';
+@import './setting/_radius.scss';
+@import './setting/_text.scss';
+@import './setting/_styles.scss';

mobile/src/uni_modules/uni-scss/styles/setting/_border.scss

@@ -0,0 +1,3 @@
+.uni-border {
+	border: 1px $uni-border-1 solid;
+}

mobile/src/uni_modules/uni-scss/styles/setting/_color.scss

@@ -0,0 +1,66 @@
+
+// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐
+// @mixin get-styles($k,$c) {
+// 	@if $k == size or $k == weight{
+// 		font-#{$k}:#{$c}
+// 	}@else{
+// 		#{$k}:#{$c}
+// 	}
+// }
+$uni-ui-color:(
+	// 主色
+	primary: $uni-primary,
+	primary-disable: $uni-primary-disable,
+	primary-light: $uni-primary-light,
+	// 辅助色
+	success: $uni-success,
+	success-disable: $uni-success-disable,
+	success-light: $uni-success-light,
+	warning: $uni-warning,
+	warning-disable: $uni-warning-disable,
+	warning-light: $uni-warning-light,
+	error: $uni-error,
+	error-disable: $uni-error-disable,
+	error-light: $uni-error-light,
+	info: $uni-info,
+	info-disable: $uni-info-disable,
+	info-light: $uni-info-light,
+	// 中性色
+	main-color: $uni-main-color,
+	base-color: $uni-base-color,
+	secondary-color: $uni-secondary-color,
+	extra-color: $uni-extra-color,
+	// 背景色
+	bg-color: $uni-bg-color,
+	// 边框颜色
+	border-1: $uni-border-1,
+	border-2: $uni-border-2,
+	border-3: $uni-border-3,
+	border-4: $uni-border-4,
+	// 黑色
+	black:$uni-black,
+	// 白色
+	white:$uni-white,
+	// 透明
+	transparent:$uni-transparent
+) !default;
+@each $key, $child in $uni-ui-color {
+	.uni-#{"" + $key} {
+		color: $child;
+	}
+	.uni-#{"" + $key}-bg {
+		background-color: $child;
+	}
+}
+.uni-shadow-sm {
+	box-shadow: $uni-shadow-sm;
+}
+.uni-shadow-base {
+	box-shadow: $uni-shadow-base;
+}
+.uni-shadow-lg {
+	box-shadow: $uni-shadow-lg;
+}
+.uni-mask {
+	background-color:$uni-mask;
+}

mobile/src/uni_modules/uni-scss/styles/setting/_radius.scss

@@ -0,0 +1,55 @@
+@mixin radius($r,$d:null ,$important: false){
+  $radius-value:map-get($uni-radius, $r) if($important, !important, null);
+  // Key exists within the $uni-radius variable
+  @if (map-has-key($uni-radius, $r) and  $d){
+		@if $d == t {
+				border-top-left-radius:$radius-value;
+				border-top-right-radius:$radius-value;
+		}@else if $d == r {
+				border-top-right-radius:$radius-value;
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == b {
+				border-bottom-left-radius:$radius-value;
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == l {
+				border-top-left-radius:$radius-value;
+				border-bottom-left-radius:$radius-value;
+		}@else if $d == tl {
+				border-top-left-radius:$radius-value;
+		}@else if $d == tr {
+				border-top-right-radius:$radius-value;
+		}@else if $d == br {
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == bl {
+				border-bottom-left-radius:$radius-value;
+		}
+  }@else{
+		border-radius:$radius-value;
+  }
+}
+
+@each $key, $child in $uni-radius {
+	@if($key){
+		.uni-radius-#{"" + $key} {
+				@include radius($key)
+		}
+	}@else{
+		.uni-radius {
+				@include radius($key)
+		}
+	}
+}
+
+@each $direction in t, r, b, l,tl, tr, br, bl {
+	@each $key, $child in $uni-radius {
+		@if($key){
+			.uni-radius-#{"" + $direction}-#{"" + $key} {
+				@include radius($key,$direction,false)
+			}
+		}@else{
+			.uni-radius-#{$direction} {
+				@include radius($key,$direction,false)
+			}
+		}
+	}
+}

mobile/src/uni_modules/uni-scss/styles/setting/_space.scss

@@ -0,0 +1,56 @@
+
+@mixin fn($space,$direction,$size,$n) {
+	@if $n {
+		#{$space}-#{$direction}: #{$size*$uni-space-root}px
+	} @else {
+		 #{$space}-#{$direction}: #{-$size*$uni-space-root}px
+	}
+}
+@mixin get-styles($direction,$i,$space,$n){
+	@if $direction == t {
+		@include fn($space, top,$i,$n);
+	} 
+	@if $direction == r {
+		@include fn($space, right,$i,$n);
+	} 
+	@if $direction == b {
+		@include fn($space, bottom,$i,$n);
+	} 
+	@if $direction == l {
+	 @include fn($space, left,$i,$n);
+	} 
+	@if $direction == x {
+		@include fn($space, left,$i,$n);
+		@include fn($space, right,$i,$n);
+	} 
+	@if $direction == y {
+		@include fn($space, top,$i,$n);
+		@include fn($space, bottom,$i,$n);
+	} 
+	@if $direction == a {
+		@if $n {
+			#{$space}:#{$i*$uni-space-root}px;
+		} @else {
+			#{$space}:#{-$i*$uni-space-root}px;
+		}
+	} 
+}
+
+@each $orientation in m,p {
+	$space: margin;
+	@if $orientation == m {
+		$space: margin;
+	} @else {
+		$space: padding;
+	}
+	@for $i from 0 through 16 {
+		@each $direction in t, r, b, l, x, y, a {
+			.uni-#{$orientation}#{$direction}-#{$i} { 
+				@include  get-styles($direction,$i,$space,true);
+			} 
+			.uni-#{$orientation}#{$direction}-n#{$i} { 
+				@include  get-styles($direction,$i,$space,false);
+			}
+		}
+	}
+}

mobile/src/uni_modules/uni-scss/styles/setting/_styles.scss

@@ -0,0 +1,167 @@
+/* #ifndef APP-NVUE */
+
+$-color-white:#fff;
+$-color-black:#000;
+@mixin base-style($color) {
+	color: #fff;
+	background-color: $color;
+	border-color: mix($-color-black, $color, 8%);
+	&:not([hover-class]):active {
+		background: mix($-color-black, $color, 10%);
+		border-color: mix($-color-black, $color, 20%);
+		color: $-color-white;
+		outline: none;
+	}
+}
+@mixin is-color($color) {
+	@include base-style($color);
+	&[loading] {
+		@include base-style($color);
+		&::before {
+			margin-right:5px;
+		}
+	}
+	&[disabled] {
+	  &,
+		&[loading],
+	  &:not([hover-class]):active {
+	    color: $-color-white;
+			border-color: mix(darken($color,10%), $-color-white);
+	    background-color: mix($color, $-color-white);
+	  }
+	}
+
+}
+@mixin base-plain-style($color) {
+	color:$color;
+	background-color: mix($-color-white, $color, 90%);
+	border-color: mix($-color-white, $color, 70%);
+	&:not([hover-class]):active {
+	  background: mix($-color-white, $color, 80%);
+	  color: $color;
+	  outline: none;
+		border-color: mix($-color-white, $color, 50%);
+	}
+}
+@mixin is-plain($color){
+	&[plain] {
+		@include base-plain-style($color);
+		&[loading] {
+			@include base-plain-style($color);
+			&::before {
+				margin-right:5px;
+			}
+		}
+		&[disabled] {
+		  &,
+		  &:active {
+		    color: mix($-color-white, $color, 40%);
+		    background-color: mix($-color-white, $color, 90%);
+				border-color: mix($-color-white, $color, 80%);
+		  }
+		}
+	}
+}
+
+
+.uni-btn {
+	margin: 5px;
+	color: #393939;
+	border:1px solid #ccc;
+	font-size: 16px;
+	font-weight: 200;
+	background-color: #F9F9F9;
+	// TODO 暂时处理边框隐藏一边的问题
+	overflow: visible;
+	&::after{
+		border: none;
+	}
+
+	&:not([type]),&[type=default] {
+		color: #999;
+		&[loading] {
+			background: none;
+			&::before {
+				margin-right:5px;
+			}
+		}
+
+
+
+		&[disabled]{
+			color: mix($-color-white, #999, 60%);
+		  &,
+			&[loading],
+		  &:active {
+				color: mix($-color-white, #999, 60%);
+		    background-color: mix($-color-white,$-color-black , 98%);
+				border-color: mix($-color-white,  #999, 85%);
+		  }
+		}
+
+		&[plain] {
+			color: #999;
+			background: none;
+			border-color: $uni-border-1;
+			&:not([hover-class]):active {
+				background: none;
+			  color: mix($-color-white, $-color-black, 80%);
+				border-color: mix($-color-white, $-color-black, 90%);
+			  outline: none;
+			}
+			&[disabled]{
+			  &,
+				&[loading],
+			  &:active {
+			    background: none;
+					color: mix($-color-white, #999, 60%);
+					border-color: mix($-color-white,  #999, 85%);
+			  }
+			}
+		}
+	}
+
+	&:not([hover-class]):active {
+	  color: mix($-color-white, $-color-black, 50%);
+	}
+
+	&[size=mini] {
+		font-size: 16px;
+		font-weight: 200;
+		border-radius: 8px;
+	}
+
+
+
+	&.uni-btn-small {
+		font-size: 14px;
+	}
+	&.uni-btn-mini {
+		font-size: 12px;
+	}
+
+	&.uni-btn-radius {
+		border-radius: 999px;
+	}
+	&[type=primary] {
+		@include is-color($uni-primary);
+		@include is-plain($uni-primary)
+	}
+	&[type=success] {
+		@include is-color($uni-success);
+		@include is-plain($uni-success)
+	}
+	&[type=error] {
+		@include is-color($uni-error);
+		@include is-plain($uni-error)
+	}
+	&[type=warning] {
+		@include is-color($uni-warning);
+		@include is-plain($uni-warning)
+	}
+	&[type=info] {
+		@include is-color($uni-info);
+		@include is-plain($uni-info)
+	}
+}
+/* #endif */

mobile/src/uni_modules/uni-scss/styles/setting/_text.scss

@@ -0,0 +1,24 @@
+@mixin get-styles($k,$c) {
+	@if $k == size or $k == weight{
+		font-#{$k}:#{$c}
+	}@else{
+		#{$k}:#{$c}
+	}
+}
+
+@each $key, $child in $uni-headings {
+	/* #ifndef APP-NVUE */
+	.uni-#{$key} {
+		@each $k, $c in $child {
+			@include get-styles($k,$c)
+		}
+	}
+	/* #endif */
+	/* #ifdef APP-NVUE */
+	.container .uni-#{$key} {
+		@each $k, $c in $child {
+			@include get-styles($k,$c)
+		}
+	}
+	/* #endif */
+}

mobile/src/uni_modules/uni-scss/styles/setting/_variables.scss

@@ -0,0 +1,146 @@
+// @use "sass:math";
+@import  '../tools/functions.scss';
+// 间距基础倍数
+$uni-space-root: 2 !default;
+// 边框半径默认值
+$uni-radius-root:5px !default;
+$uni-radius: () !default;
+// 边框半径断点
+$uni-radius: map-deep-merge(
+  (
+    0: 0,
+		// TODO 当前版本暂时不支持 sm 属性
+    // 'sm': math.div($uni-radius-root, 2),
+    null: $uni-radius-root,
+    'lg': $uni-radius-root * 2,
+    'xl': $uni-radius-root * 6,
+    'pill': 9999px,
+    'circle': 50%
+  ),
+  $uni-radius
+);
+// 字体家族
+$body-font-family: 'Roboto', sans-serif !default;
+// 文本
+$heading-font-family: $body-font-family !default;
+$uni-headings: () !default;
+$letterSpacing: -0.01562em;
+$uni-headings: map-deep-merge(
+  (
+    'h1': (
+      size: 32px,
+			weight: 300,
+			line-height: 50px,
+			// letter-spacing:-0.01562em
+    ),
+    'h2': (
+      size: 28px,
+      weight: 300,
+      line-height: 40px,
+      // letter-spacing: -0.00833em
+    ),
+    'h3': (
+      size: 24px,
+      weight: 400,
+      line-height: 32px,
+      // letter-spacing: normal
+    ),
+    'h4': (
+      size: 20px,
+      weight: 400,
+      line-height: 30px,
+      // letter-spacing: 0.00735em
+    ),
+    'h5': (
+      size: 16px,
+      weight: 400,
+      line-height: 24px,
+      // letter-spacing: normal
+    ),
+    'h6': (
+      size: 14px,
+      weight: 500,
+      line-height: 18px,
+      // letter-spacing: 0.0125em
+    ),
+    'subtitle': (
+      size: 12px,
+      weight: 400,
+      line-height: 20px,
+      // letter-spacing: 0.00937em
+    ),
+    'body': (
+      font-size: 14px,
+			font-weight: 400,
+			line-height: 22px,
+			// letter-spacing: 0.03125em
+    ),
+    'caption': (
+      'size': 12px,
+      'weight': 400,
+      'line-height': 20px,
+      // 'letter-spacing': 0.03333em,
+      // 'text-transform': false
+    )
+  ),
+  $uni-headings
+);
+
+
+
+// 主色
+$uni-primary: #2979ff !default;
+$uni-primary-disable:lighten($uni-primary,20%) !default;
+$uni-primary-light: lighten($uni-primary,25%) !default;
+
+// 辅助色
+// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
+$uni-success: #18bc37 !default;
+$uni-success-disable:lighten($uni-success,20%) !default;
+$uni-success-light: lighten($uni-success,25%) !default;
+
+$uni-warning: #f3a73f !default;
+$uni-warning-disable:lighten($uni-warning,20%) !default;
+$uni-warning-light: lighten($uni-warning,25%) !default;
+
+$uni-error: #e43d33 !default;
+$uni-error-disable:lighten($uni-error,20%) !default;
+$uni-error-light: lighten($uni-error,25%) !default;
+
+$uni-info: #8f939c !default;
+$uni-info-disable:lighten($uni-info,20%) !default;
+$uni-info-light: lighten($uni-info,25%) !default;
+
+// 中性色
+// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+$uni-main-color: #3a3a3a !default; 			// 主要文字
+$uni-base-color: #6a6a6a !default;			// 常规文字
+$uni-secondary-color: #909399 !default;	// 次要文字
+$uni-extra-color: #c7c7c7 !default;			// 辅助说明
+
+// 边框颜色
+$uni-border-1: #F0F0F0 !default;
+$uni-border-2: #EDEDED !default;
+$uni-border-3: #DCDCDC !default;
+$uni-border-4: #B9B9B9 !default;
+
+// 常规色
+$uni-black: #000000 !default;
+$uni-white: #ffffff !default;
+$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
+
+// 背景色
+$uni-bg-color: #f7f7f7 !default;
+
+/* 水平间距 */
+$uni-spacing-sm: 8px !default;
+$uni-spacing-base: 15px !default;
+$uni-spacing-lg: 30px !default;
+
+// 阴影
+$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
+$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
+$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
+
+// 蒙版
+$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;

mobile/src/uni_modules/uni-scss/styles/tools/functions.scss

@@ -0,0 +1,19 @@
+// 合并 map
+@function map-deep-merge($parent-map, $child-map){
+	$result: $parent-map;
+	@each $key, $child in $child-map {
+		$parent-has-key: map-has-key($result, $key);
+		$parent-value: map-get($result, $key);
+		$parent-type: type-of($parent-value);
+		$child-type: type-of($child);
+		$parent-is-map: $parent-type == map;
+		$child-is-map: $child-type == map;
+			
+		@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
+			$result: map-merge($result, ( $key: $child ));
+		}@else {
+			$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
+		}
+	}
+	@return $result;
+};

mobile/src/uni_modules/uni-scss/theme.scss

@@ -0,0 +1,31 @@
+// 间距基础倍数
+$uni-space-root: 2;
+// 边框半径默认值
+$uni-radius-root:5px;
+// 主色
+$uni-primary: #2979ff;
+// 辅助色
+$uni-success: #4cd964;
+// 警告色
+$uni-warning: #f0ad4e;
+// 错误色
+$uni-error: #dd524d;
+// 描述色
+$uni-info: #909399;
+// 中性色
+$uni-main-color: #303133;
+$uni-base-color: #606266;
+$uni-secondary-color: #909399;
+$uni-extra-color: #C0C4CC;
+// 背景色
+$uni-bg-color: #f5f5f5;
+// 边框颜色
+$uni-border-1: #DCDFE6;
+$uni-border-2: #E4E7ED;
+$uni-border-3: #EBEEF5;
+$uni-border-4: #F2F6FC;
+
+// 常规色
+$uni-black: #000000;
+$uni-white: #ffffff;
+$uni-transparent: rgba($color: #000000, $alpha: 0);

mobile/src/uni_modules/uni-scss/variables.scss

@@ -0,0 +1,62 @@
+@import './styles/setting/_variables.scss';
+// 间距基础倍数
+$uni-space-root: 2;
+// 边框半径默认值
+$uni-radius-root:5px;
+
+// 主色
+$uni-primary: #2979ff;
+$uni-primary-disable:mix(#fff,$uni-primary,50%);
+$uni-primary-light: mix(#fff,$uni-primary,80%);
+
+// 辅助色
+// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
+$uni-success: #18bc37;
+$uni-success-disable:mix(#fff,$uni-success,50%);
+$uni-success-light: mix(#fff,$uni-success,80%);
+
+$uni-warning: #f3a73f;
+$uni-warning-disable:mix(#fff,$uni-warning,50%);
+$uni-warning-light: mix(#fff,$uni-warning,80%);
+
+$uni-error: #e43d33;
+$uni-error-disable:mix(#fff,$uni-error,50%);
+$uni-error-light: mix(#fff,$uni-error,80%);
+
+$uni-info: #8f939c;
+$uni-info-disable:mix(#fff,$uni-info,50%);
+$uni-info-light: mix(#fff,$uni-info,80%);
+
+// 中性色
+// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+$uni-main-color: #3a3a3a; 			// 主要文字
+$uni-base-color: #6a6a6a;			// 常规文字
+$uni-secondary-color: #909399;	// 次要文字
+$uni-extra-color: #c7c7c7;			// 辅助说明
+
+// 边框颜色
+$uni-border-1: #F0F0F0;
+$uni-border-2: #EDEDED;
+$uni-border-3: #DCDCDC;
+$uni-border-4: #B9B9B9;
+
+// 常规色
+$uni-black: #000000;
+$uni-white: #ffffff;
+$uni-transparent: rgba($color: #000000, $alpha: 0);
+
+// 背景色
+$uni-bg-color: #f7f7f7;
+
+/* 水平间距 */
+$uni-spacing-sm: 8px;
+$uni-spacing-base: 15px;
+$uni-spacing-lg: 30px;
+
+// 阴影
+$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
+$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
+$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
+
+// 蒙版
+$uni-mask: rgba($color: #000000, $alpha: 0.4);