Merge branch 'dev' into pr@dev@perf_public_link_style

backend/src/main/java/io/dataease/auth/filter/F2CDocFilter.java

@@ -1,26 +1,99 @@
 package io.dataease.auth.filter;
 
-import org.apache.shiro.web.filter.authc.AnonymousFilter;
+import cn.hutool.core.util.ArrayUtil;
+import io.dataease.auth.entity.SysUserEntity;
+import io.dataease.auth.entity.TokenInfo;
+import io.dataease.auth.service.AuthUserService;
+import io.dataease.auth.util.JWTUtils;
+import io.dataease.commons.license.DefaultLicenseService;
+import io.dataease.commons.license.F2CLicenseResponse;
+import io.dataease.commons.utils.CommonBeanFactory;
+import io.dataease.commons.utils.LogUtil;
+import org.apache.commons.lang3.ObjectUtils;
+import org.apache.commons.lang3.StringUtils;
+import org.apache.shiro.web.filter.AccessControlFilter;
 
-import javax.servlet.ServletException;
 import javax.servlet.ServletRequest;
 import javax.servlet.ServletResponse;
+import javax.servlet.http.Cookie;
 import javax.servlet.http.HttpServletRequest;
-import java.io.IOException;
+import javax.servlet.http.HttpServletResponse;
+import java.util.Arrays;
+
+import static io.dataease.commons.license.F2CLicenseResponse.Status;
+
+public class F2CDocFilter extends AccessControlFilter {
+
+    private static final String RESULT_URI_KEY = "result_uri_key";
+    private static final String NOLIC_PAGE = "nolic.html";
+    private static final String NO_LOGIN_PAGE = "/nologin.html";
+    private static final String DEFAULT_FAILED_PAGE = "/";
 
-public class F2CDocFilter extends AnonymousFilter {
 
     @Override
-    protected boolean onPreHandle(ServletRequest request, ServletResponse response, Object mappedValue) {
+    protected boolean isAccessAllowed(ServletRequest servletRequest, ServletResponse servletResponse, Object o) throws Exception {
-        HttpServletRequest req = (HttpServletRequest) request;
+        HttpServletRequest request = (HttpServletRequest) servletRequest;
-        String path = "/deApi";
         try {
-            req.getRequestDispatcher(path).forward(req, response);
+            DefaultLicenseService defaultLicenseService = CommonBeanFactory.getBean(DefaultLicenseService.class);
-        } catch (ServletException e) {
+            F2CLicenseResponse f2CLicenseResponse = defaultLicenseService.validateLicense();
-            e.printStackTrace();
+            Status status = f2CLicenseResponse.getStatus();
-        } catch (IOException e) {
+            if (status != Status.valid) {
-            e.printStackTrace();
+                request.setAttribute(RESULT_URI_KEY, NOLIC_PAGE);
+                return false;
+            }
+        } catch (Exception e) {
+            request.setAttribute(RESULT_URI_KEY, NOLIC_PAGE);
+            LogUtil.error(e.getMessage(), e);
+            return false;
         }
+
+        try {
+            Boolean isLogin = validateLogin(request);
+            if (!isLogin) {
+                request.setAttribute(RESULT_URI_KEY, NO_LOGIN_PAGE);
+                return false;
+            }
+        } catch (Exception e) {
+            request.setAttribute(RESULT_URI_KEY, NO_LOGIN_PAGE);
+            LogUtil.error(e.getMessage(), e);
+            return false;
+        }
+
         return true;
     }
+
+    private Boolean validateLogin(HttpServletRequest request) throws Exception{
+        String authorization = request.getHeader("Authorization");
+        if (StringUtils.isBlank(authorization)) {
+            Cookie[] cookies = request.getCookies();
+            if (ArrayUtil.isNotEmpty(cookies)) {
+                Cookie cookie = Arrays.stream(cookies).filter(item -> StringUtils.equals(item.getName(), "Authorization")).findFirst().orElse(null);
+                if (ObjectUtils.isNotEmpty(cookie) && StringUtils.isNotBlank(cookie.getValue())) {
+                    authorization = cookie.getValue();
+                }
+            }
+        }
+        if (StringUtils.isBlank(authorization)) {
+            return false;
+        }
+        TokenInfo tokenInfo = JWTUtils.tokenInfoByToken(authorization);
+        AuthUserService authUserService = CommonBeanFactory.getBean(AuthUserService.class);
+        SysUserEntity user = authUserService.getUserById(tokenInfo.getUserId());
+        if (user == null) {
+            return false;
+        }
+        String password = user.getPassword();
+        boolean verify = JWTUtils.verify(authorization, tokenInfo, password);
+        return verify;
+    }
+
+    @Override
+    protected boolean onAccessDenied(ServletRequest req, ServletResponse res) throws Exception {
+        HttpServletResponse response = (HttpServletResponse) res;
+        HttpServletRequest request = (HttpServletRequest) req;
+        Object attribute = request.getAttribute(RESULT_URI_KEY);
+        String path = ObjectUtils.isNotEmpty(attribute) ? attribute.toString() : DEFAULT_FAILED_PAGE;
+        request.getRequestDispatcher(path).forward(request, response);
+        return false;
+    }
 }

backend/src/main/java/io/dataease/auth/filter/JWTFilter.java

@@ -1,5 +1,6 @@
 package io.dataease.auth.filter;
 
+import cn.hutool.core.util.URLUtil;
 import com.auth0.jwt.algorithms.Algorithm;
 import io.dataease.auth.entity.ASKToken;
 import io.dataease.auth.entity.JWTToken;
@@ -23,8 +24,10 @@ import org.springframework.web.bind.annotation.RequestMethod;
 
 import javax.servlet.ServletRequest;
 import javax.servlet.ServletResponse;
+import javax.servlet.http.Cookie;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
+import java.nio.charset.Charset;
 
 
 public class JWTFilter extends BasicHttpAuthenticationFilter {
@@ -158,4 +161,18 @@ public class JWTFilter extends BasicHttpAuthenticationFilter {
         httpServletResponse.setHeader("authentication-status", "login_expire");
     }
 
+    @Override
+    protected boolean onAccessDenied(ServletRequest req, ServletResponse res, Object mappedValue) throws Exception {
+        HttpServletResponse response = (HttpServletResponse) res;
+        HttpServletRequest request = (HttpServletRequest) req;
+        String requestURI = request.getRequestURI();
+        String msg = requestURI + " has been denied";
+        String encode = URLUtil.encode(msg, Charset.forName("UTF-8"));
+        Cookie cookie_error = new Cookie("onAccessDeniedMsg", encode);
+        cookie_error.setPath("/");
+        response.addCookie(cookie_error);
+        response.sendRedirect("/");
+        return false;
+    }
+
 }

backend/src/main/java/io/dataease/auth/service/impl/ShiroServiceImpl.java

@@ -11,6 +11,7 @@ import java.util.Map;
 public class ShiroServiceImpl implements ShiroService {
 
     private final static String ANON = "anon";
+    private final static String DOC = "doc";
 
     @Override
     public Map<String, String> loadFilterChainDefinitionMap() {
@@ -20,15 +21,18 @@ public class ShiroServiceImpl implements ShiroService {
         // ----------------------------------------------------------
         // 放行Swagger2页面，需要放行这些
 
-        filterChainDefinitionMap.put("/doc.html**", "doc");
+        filterChainDefinitionMap.put("/doc.html**", DOC);
-        filterChainDefinitionMap.put("/deApi**", ANON);
+        filterChainDefinitionMap.put("/deApi**", DOC);
         filterChainDefinitionMap.put("/swagger-ui.html", ANON);
         filterChainDefinitionMap.put("/swagger-ui/**", ANON);
         filterChainDefinitionMap.put("/swagger/**", ANON);
         filterChainDefinitionMap.put("/webjars/**", ANON);
-        filterChainDefinitionMap.put("/swagger-resources/**", ANON);
+        filterChainDefinitionMap.put("/swagger-resources/**", DOC);
-        filterChainDefinitionMap.put("/v2/**", ANON);
+        filterChainDefinitionMap.put("/v2/**", DOC);
-        filterChainDefinitionMap.put("/v3/**", ANON);
+        filterChainDefinitionMap.put("/v3/**", DOC);
+
+        filterChainDefinitionMap.put("/**.gif", ANON);
+        filterChainDefinitionMap.put("/**.png", ANON);
 
         filterChainDefinitionMap.put("/static/**", ANON);
         filterChainDefinitionMap.put("/css/**", ANON);

backend/src/main/java/io/dataease/controller/IndexController.java

@@ -2,17 +2,16 @@ package io.dataease.controller;
 
 import io.dataease.commons.exception.DEException;
 import io.dataease.commons.license.DefaultLicenseService;
-import io.dataease.commons.license.F2CLicenseResponse;
 import io.dataease.commons.utils.CodingUtil;
 import io.dataease.commons.utils.LogUtil;
 import io.dataease.commons.utils.ServletUtils;
 import io.dataease.service.panel.PanelLinkService;
 import org.apache.commons.lang3.StringUtils;
-import org.springframework.http.HttpRequest;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestMapping;
+
 import javax.annotation.Resource;
 import javax.servlet.http.Cookie;
 import javax.servlet.http.HttpServletRequest;
@@ -42,13 +41,7 @@ public class IndexController {
 
     @GetMapping("/deApi")
     public String deApi() {
-        F2CLicenseResponse f2CLicenseResponse = defaultLicenseService.validateLicense();
+        return "doc.html";
-        switch (f2CLicenseResponse.getStatus()) {
-            case valid:
-                return "doc.html";
-            default:
-                return "nolic.html";
-        }
     }
 
     @GetMapping("/link/{index}")
@@ -64,8 +57,8 @@ public class IndexController {
             // TODO 增加仪表板外部参数
             HttpServletRequest request = ServletUtils.request();
             String attachParams = request.getParameter("attachParams");
-            if(StringUtils.isNotEmpty(attachParams)){
+            if (StringUtils.isNotEmpty(attachParams)) {
-                url = url+"&attachParams="+attachParams;
+                url = url + "&attachParams=" + attachParams;
             }
             response.sendRedirect(url);
         } catch (IOException e) {

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

@@ -908,7 +908,7 @@ public class ChartViewService {
             if (StringUtils.equalsIgnoreCase(table.getType(), DatasetType.DB.name())) {
                 datasourceRequest.setTable(dataTableInfoDTO.getTable());
                 if (StringUtils.equalsAnyIgnoreCase(view.getType(), "text", "gauge", "liquid")) {
-                    datasourceRequest.setQuery(qp.getSQLSummary(dataTableInfoDTO.getTable(), yAxis, fieldCustomFilter, rowPermissionsTree, extFilterList, view, ds));
+                    querySql = qp.getSQLSummary(dataTableInfoDTO.getTable(), yAxis, fieldCustomFilter, rowPermissionsTree, extFilterList, view, ds);
                 } else if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
                     querySql = qp.getSQLStack(dataTableInfoDTO.getTable(), xAxis, yAxis, fieldCustomFilter, rowPermissionsTree, extFilterList, extStack, ds, view);
                 } else if (StringUtils.containsIgnoreCase(view.getType(), "scatter")) {

frontend/public/nolic.html

@@ -1,13 +1,46 @@
 <!DOCTYPE html>
 <html lang="zh">
+
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>DataEase</title>
+  <style>
+    html,
+    body {
+      margin: 0 !important;
+      height: 100%;
+    }
+
+    .no-login-dynamic {
+      height: 100%;
+      background: url(./lic.png) no-repeat;
+      background-size: cover;
+      text-align: center;
+    }
+
+    span {
+      color: #000;
+      font-size: 25px;
+      font-weight: 500;
+      position: relative;
+      top: 130px;
+    }
+  </style>
 </head>
+
+
 <body style="height: 100%;">
-    <div>缺少许可</div>
+
+  <div class="no-login-dynamic">
+    <span>缺少许可</span>
+  </div>
 
 </body>
-</html>
+<script>
+  document.getElementsByTagName("body")
+</script>
+
+
+</html>

frontend/public/nologin.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>DataEase</title>
+  <style>
+    html,
+    body {
+      margin: 0 !important;
+      height: 100%;
+    }
+
+    .no-login-dynamic {
+      height: 100%;
+      background: url(./dynamic.gif) no-repeat;
+
+      background-size: cover;
+      text-align: center;
+    }
+
+    span {
+      color: #fff;
+      font-size: 25px;
+      font-weight: 500;
+      position: relative;
+      top: 30px;
+    }
+  </style>
+</head>
+
+
+<body style="height: 100%;">
+
+  <div id="de-nologin-div" class="no-login-dynamic">
+    <span>请先登录，即将跳转！</span>
+  </div>
+
+</body>
+<script>
+  const timer = setTimeout(() => {
+    window.location.href = "/";
+  }, 3500)
+
+</script>
+
+
+</html>

frontend/src/components/canvas/components/editor/Preview.vue

@@ -272,15 +272,19 @@ export default {
         width: '100%'
       }
       if (this.canvasStyleData.openCommonStyle && this.isMainCanvas()) {
-        if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
+        const styleInfo = this.terminal === 'mobile' && this.canvasStyleData.panel.mobileSetting && this.canvasStyleData.panel.mobileSetting.customSetting
+          ? this.canvasStyleData.panel.mobileSetting : this.canvasStyleData.panel
+        if (styleInfo.backgroundType === 'image' && typeof (styleInfo.imageUrl) === 'string') {
           style = {
-            background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`,
+            background: `url(${imgUrlTrans(styleInfo.imageUrl)}) no-repeat`
-            ...style
           }
-        } else if (this.canvasStyleData.panel.backgroundType === 'color') {
+        } else if (styleInfo.backgroundType === 'color') {
           style = {
-            background: this.canvasStyleData.panel.color,
+            background: styleInfo.color
-            ...style
+          }
+        } else {
+          style = {
+            background: '#f7f8fa'
           }
         }
       }

frontend/src/components/canvas/customComponent/UserView.vue

@@ -640,7 +640,7 @@ export default {
     },
     viewInCache(param) {
       this.view = param.view
-      if (this.view.customAttr) {
+      if (this.view && this.view.customAttr) {
         this.currentPage.pageSize = parseInt(JSON.parse(this.view.customAttr).size.tablePageSize)
       }
       param.viewId && param.viewId === this.element.propValue.viewId && this.getDataEdit(param)
@@ -703,7 +703,7 @@ export default {
           requestInfo.proxy = { userId: this.panelInfo.proxy }
         }
         // table-info明细表增加分页
-        if (this.view.customAttr) {
+        if (this.view && this.view.customAttr) {
           const attrSize = JSON.parse(this.view.customAttr).size
           if (this.chart.type === 'table-info' && this.view.datasetMode === 0 && (!attrSize.tablePageMode || attrSize.tablePageMode === 'page')) {
             requestInfo.goPage = this.currentPage.page
@@ -1162,7 +1162,7 @@ export default {
             queryFrom: 'panel'
           }
           // table-info明细表增加分页
-          if (this.view.customAttr) {
+          if (this.view && this.view.customAttr) {
             const attrSize = JSON.parse(this.view.customAttr).size
             if (this.chart.type === 'table-info' && this.view.datasetMode === 0 && (!attrSize.tablePageMode || attrSize.tablePageMode === 'page')) {
               requestInfo.goPage = this.currentPage.page

frontend/src/components/canvas/utils/utils.js

@@ -7,7 +7,7 @@ import {
 import { ApplicationContext } from '@/utils/ApplicationContext'
 import { uuid } from 'vue-uuid'
 import store from '@/store'
-import { AIDED_DESIGN, PANEL_CHART_INFO, TAB_COMMON_STYLE } from '@/views/panel/panel'
+import { AIDED_DESIGN, MOBILE_SETTING, PANEL_CHART_INFO, TAB_COMMON_STYLE } from '@/views/panel/panel'
 import html2canvas from 'html2canvasde'
 
 export function deepCopy(target) {
@@ -86,6 +86,7 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
   componentStyle.chartInfo.tabStyle = (componentStyle.chartInfo.tabStyle || deepCopy(TAB_COMMON_STYLE))
   componentStyle.themeId = (componentStyle.themeId || 'NO_THEME')
   componentStyle.panel.themeColor = (componentStyle.panel.themeColor || 'light')
+  componentStyle.panel.mobileSetting = (componentStyle.panel.mobileSetting || MOBILE_SETTING)
   componentData.forEach((item, index) => {
     if (item.component && item.component === 'de-date') {
       const widget = ApplicationContext.getService(item.serviceName)

frontend/src/lang/en.js

@@ -1865,7 +1865,12 @@ export default {
     sure_bt: 'Confirm'
   },
   panel: {
+
     down: 'Down',
+
+    mobile_style_setting: 'Style setting',
+    mobile_style_setting_tips: 'Customize the mobile background',
+
     board: 'Border',
     text: 'Text',
     board_background: 'Background',

frontend/src/lang/tw.js

@@ -1865,7 +1865,12 @@ export default {
     sure_bt: '確定'
   },
   panel: {
+
     down: '下載',
+
+    mobile_style_setting: '樣式設置',
+    mobile_style_setting_tips: '自定義移動端背景',
+
     board: '邊框',
     text: '文字',
     board_background: '背景',

frontend/src/lang/zh.js

@@ -1865,7 +1865,12 @@ export default {
     sure_bt: '确定'
   },
   panel: {
+
     down: '下载',
+
+    mobile_style_setting: '样式设置',
+    mobile_style_setting_tips: '自定义移动端背景',
+
     board: '边框',
     text: '文字',
     board_background: '背景',

frontend/src/views/panel/edit/ComponentWait.vue

@@ -1,9 +1,22 @@
 <template>
   <el-row class="component-wait">
-    <el-row class="component-wait-title">
+    <el-tabs
-      {{ $t('panel.component_hidden') }}
+      v-model="activeName"
-    </el-row>
+    >
-    <el-row class="component-wait-main">
+      <el-tab-pane
+        :label="$t('panel.component_hidden')"
+        name="component-area"
+      />
+      <el-tab-pane
+        :label="$t('panel.mobile_style_setting')"
+        name="style-area"
+      />
+    </el-tabs>
+    <el-row
+      v-show="activeName === 'component-area'"
+      class="component-wait-main"
+      :style="mobileCanvasStyle"
+    >
       <el-col
         v-for="(config) in pcComponentData"
         v-if="!config.mobileSelected && config.canvasId === 'canvas-main'"
@@ -17,18 +30,25 @@
       </el-col>
 
     </el-row>
-
+    <el-row
+      v-show="activeName === 'style-area'"
+      class="component-wait-main"
+      style="padding:10px"
+    >
+      <mobile-background-selector />
+    </el-row>
   </el-row>
-
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import ComponentWaitItem from '@/views/panel/edit/ComponentWaitItem'
+import MobileBackgroundSelector from '@/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector'
+import { imgUrlTrans } from '@/components/canvas/utils/utils'
 
 export default {
   name: 'ComponentWait',
-  components: { ComponentWaitItem },
+  components: { MobileBackgroundSelector, ComponentWaitItem },
   props: {
     template: {
       type: Object,
@@ -39,6 +59,7 @@ export default {
   },
   data() {
     return {
+      activeName: 'component-area',
       itemWidth: 280,
       itemHeight: 200,
       outStyle: {
@@ -48,6 +69,27 @@ export default {
     }
   },
   computed: {
+    mobileCanvasStyle() {
+      let style
+      if (this.canvasStyleData.openCommonStyle) {
+        const styleInfo = this.canvasStyleData.panel.mobileSetting && this.canvasStyleData.panel.mobileSetting.customSetting
+          ? this.canvasStyleData.panel.mobileSetting : this.canvasStyleData.panel
+        if (styleInfo.backgroundType === 'image' && typeof (styleInfo.imageUrl) === 'string') {
+          style = {
+            background: `url(${imgUrlTrans(styleInfo.imageUrl)}) no-repeat`
+          }
+        } else if (styleInfo.backgroundType === 'color') {
+          style = {
+            background: styleInfo.color
+          }
+        } else {
+          style = {
+            background: '#f7f8fa'
+          }
+        }
+      }
+      return style
+    },
     // 移动端编辑组件选择按钮显示
     mobileCheckBarShow() {
       // 显示条件：1.当前是移动端画布编辑状态
@@ -62,36 +104,44 @@ export default {
     },
     ...mapState([
       'mobileLayoutStatus',
+      'canvasStyleData',
       'pcComponentData'
     ])
   },
-  methods: {
+  methods: {}
-  }
 }
 </script>
 
 <style scoped>
-  .component-wait{
+.component-wait {
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
-  }
+}
-  .component-wait-title {
+
-    width: 100%;
+.component-wait-title {
-    height: 30px;
+  width: 100%;
-    color: #FFFFFF;
+  height: 30px;
-    vertical-align: center;
+  color: #FFFFFF;
-    background-color: #9ea6b2;
+  vertical-align: center;
-    border-bottom: 1px black;
+  background-color: #9ea6b2;
-  }
+  border-bottom: 1px black;
-  .component-wait-main {
+}
-    width: 100%;
+
-    height: calc(100% - 30px);
+.component-wait-main {
-    float: left;
+  width: 100%;
-    overflow-y: auto;
+  height: calc(100% - 40px);
-  }
+  float: left;
-  .component-custom {
+  overflow-y: auto;
-    outline: none;
+}
-    width: 100% !important;
+
-    height: 100%;
+.component-custom {
-  }
+  outline: none;
+  width: 100% !important;
+  height: 100%;
+}
+
+::v-deep .el-tabs--top {
+  height: 40px !important;
+  background-color: #9ea6b2;
+}
 </style>

frontend/src/views/panel/edit/index.vue

@@ -251,7 +251,6 @@
           <el-col
             :span="16"
             class="this_mobile_canvas_cell this_mobile_canvas_wait_cell"
-            :style="mobileCanvasStyle"
           >
             <component-wait />
           </el-col>
@@ -680,13 +679,15 @@ export default {
     mobileCanvasStyle() {
       let style
       if (this.canvasStyleData.openCommonStyle) {
-        if (this.canvasStyleData.panel.backgroundType === 'image' && typeof (this.canvasStyleData.panel.imageUrl) === 'string') {
+        const styleInfo = this.canvasStyleData.panel.mobileSetting && this.canvasStyleData.panel.mobileSetting.customSetting
+          ? this.canvasStyleData.panel.mobileSetting : this.canvasStyleData.panel
+        if (styleInfo.backgroundType === 'image' && typeof (styleInfo.imageUrl) === 'string') {
           style = {
-            background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`
+            background: `url(${imgUrlTrans(styleInfo.imageUrl)}) no-repeat`
           }
-        } else if (this.canvasStyleData.panel.backgroundType === 'color') {
+        } else if (styleInfo.backgroundType === 'color') {
           style = {
-            background: this.canvasStyleData.panel.color
+            background: styleInfo.color
           }
         } else {
           style = {
@@ -1537,7 +1538,7 @@ export default {
 
 .this_mobile_canvas_wait_cell {
   background-size: 100% 100% !important;
-  border: 2px solid #9ea6b2
+  border: 1px solid #9ea6b2
 }
 
 .canvas_main_content {

frontend/src/views/panel/panel.js

@@ -29,7 +29,15 @@ export const FILTER_COMMON_STYLE_DARK = {
   innerBgColor: '#131E42'
 }
 
+export const MOBILE_SETTING = {
+  customSetting: false,
+  color: '#ffffff',
+  imageUrl: null,
+  backgroundType: 'image'
+}
+
 export const DEFAULT_PANEL_STYLE = {
+  mobileSetting: MOBILE_SETTING,
   themeColor: 'light',
   color: '#ffffff',
   imageUrl: null,

frontend/src/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector.vue

@@ -0,0 +1,268 @@
+<template>
+  <div style="width: 100%;margin-top: 12px">
+    <el-form
+      ref="overallMobileSettingForm"
+      size="mini"
+    >
+      <el-col>
+        <el-checkbox v-model="mobileSetting.customSetting">{{ $t('panel.mobile_style_setting_tips') }}</el-checkbox>
+      </el-col>
+      <el-col>
+        <el-radio-group
+          v-model="mobileSetting.backgroundType"
+          size="mini"
+          :disabled="!mobileSetting.customSetting"
+          @change="onChangeType()"
+        >
+          <el-radio label="color">{{ $t('chart.color') }}</el-radio>
+          <el-radio label="image">{{ $t('panel.photo') }}</el-radio>
+        </el-radio-group>
+      </el-col>
+      <el-col
+        v-show="mobileSetting.backgroundType==='color'"
+        :span="10"
+      >
+        <el-color-picker
+          v-model="mobileSetting.color"
+          :predefine="predefineColors"
+          size="mini"
+          class="color-picker-custom"
+          :disabled="!mobileSetting.customSetting"
+          @change="onChangeType"
+        />
+      </el-col>
+      <el-col
+        v-show="mobileSetting.backgroundType==='image'"
+        :span="10"
+      >
+        <el-upload
+          action=""
+          accept=".jpeg,.jpg,.png,.gif"
+          class="avatar-uploader"
+          list-type="picture-card"
+          :http-request="upload"
+          :class="{disabled:uploadDisabled}"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove"
+          :disabled="!mobileSetting.customSetting"
+          :file-list="fileList"
+        >
+          <i class="el-icon-plus" />
+        </el-upload>
+        <el-dialog
+          top="25vh"
+          width="600px"
+          :modal-append-to-body="false"
+          :visible.sync="dialogVisible"
+        >
+          <img
+            width="100%"
+            :src="dialogImageUrl"
+            alt=""
+          >
+        </el-dialog>
+      </el-col>
+      <el-col v-show="mobileSetting.backgroundType==='image'">
+        <span
+          v-show="!mobileSetting.imageUrl"
+          class="image-hint"
+        >{{ $t('panel.panel_background_image_tips') }}</span>
+        <span
+          v-show="mobileSetting.imageUrl && mobileSetting.customSetting"
+          class="re-update-span"
+          @click="goFile"
+        >{{ $t('panel.reUpload') }}</span>
+      </el-col>
+      <input
+        id="input"
+        ref="files"
+        type="file"
+        accept=".jpeg,.jpg,.png,.gif"
+        hidden
+        @click="e => {e.target.value = '';}"
+        @change="reUpload"
+      >
+    </el-form>
+  </div>
+</template>
+
+<script>
+
+import { mapState } from 'vuex'
+import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
+import { COLOR_PANEL } from '@/views/chart/chart/chart'
+import { uploadFileResult } from '@/api/staticResource/staticResource'
+
+export default {
+  name: 'MobileBackgroundSelector',
+  data() {
+    return {
+      maxImageSize: 15000000,
+      fileList: [],
+      dialogImageUrl: '',
+      dialogVisible: false,
+      uploadDisabled: false,
+      mobileSetting: null,
+      predefineColors: COLOR_PANEL
+    }
+  },
+  computed: mapState([
+    'canvasStyleData'
+  ]),
+  watch: {
+    // deep监听panel 如果改变 提交到 store
+  },
+  created() {
+    // 初始化赋值
+    this.mobileSetting = this.canvasStyleData.panel.mobileSetting
+    if (this.mobileSetting.imageUrl && typeof (this.mobileSetting.imageUrl) === 'string') {
+      this.fileList.push({ url: imgUrlTrans(this.mobileSetting.imageUrl) })
+    }
+  },
+  methods: {
+    goFile() {
+      this.$refs.files.click()
+    },
+    commitStyle() {
+      const canvasStyleData = deepCopy(this.canvasStyleData)
+      canvasStyleData.panel.mobileSetting = this.mobileSetting
+      this.$store.commit('setCanvasStyle', canvasStyleData)
+      this.$store.commit('recordSnapshot', 'commitStyle')
+    },
+    onChangeType() {
+      this.commitStyle()
+    },
+    handleRemove(file, fileList) {
+      this.uploadDisabled = false
+      this.mobileSetting.imageUrl = null
+      this.fileList = []
+      this.commitStyle()
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    upload(file) {
+      const _this = this
+      if (file.size > this.maxImageSize) {
+        this.sizeMessage()
+      }
+      uploadFileResult(file.file, (fileUrl) => {
+        _this.$store.commit('canvasChange')
+        _this.mobileSetting.imageUrl = fileUrl
+        _this.fileList = [{ url: imgUrlTrans(this.mobileSetting.imageUrl) }]
+        _this.commitStyle()
+      })
+    },
+    reUpload(e) {
+      const file = e.target.files[0]
+      const _this = this
+      if (file.size > this.maxImageSize) {
+        this.sizeMessage()
+      }
+      uploadFileResult(file, (fileUrl) => {
+        _this.$store.commit('canvasChange')
+        _this.mobileSetting.imageUrl = fileUrl
+        _this.fileList = [{ url: imgUrlTrans(this.mobileSetting.imageUrl) }]
+        _this.commitStyle()
+      })
+    },
+    sizeMessage() {
+      this.$notify({
+        message: this.$t('panel.image_size_tips'),
+        position: 'top-left'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.avatar-uploader {
+  position: relative;
+  margin-left: 0px;
+  margin-top: 8px;
+  height: 80px;
+  width: 80px;
+  line-height: 80px;
+  overflow: hidden;
+}
+
+.avatar-uploader ::v-deep .el-upload {
+  width: 80px;
+  height: 80px;
+  line-height: 80px;
+}
+
+.avatar-uploader ::v-deep .el-upload-list li {
+  width: 80px !important;
+  height: 80px !important;
+}
+
+.disabled ::v-deep .el-upload--picture-card {
+  display: none;
+}
+
+.shape-item {
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.form-item-slider ::v-deep .el-form-item__label {
+  font-size: 12px;
+  line-height: 38px;
+}
+
+.form-item ::v-deep .el-form-item__label {
+  font-size: 12px;
+}
+
+.el-select-dropdown__item {
+  padding: 0 20px;
+}
+
+span {
+  font-size: 12px
+}
+
+.el-form-item {
+  margin-bottom: 6px;
+}
+
+.color-picker-custom {
+  margin-left: 0px;
+  cursor: pointer;
+  margin-top: 8px;
+  z-index: 1004;
+}
+
+.custom-item {
+  width: 70px;
+}
+
+.re-update-span {
+  cursor: pointer;
+  color: #3370FF;
+  size: 14px;
+  line-height: 22px;
+  font-weight: 400;
+}
+
+.image-hint {
+  color: #8F959E;
+  size: 14px;
+  line-height: 22px;
+  font-weight: 400;
+}
+
+.custom-item-text {
+  font-weight: 400 !important;
+  font-size: 14px !important;
+  color: var(--TextPrimary, #1F2329) !important;
+  line-height: 22px;
+}
+</style>