Merge pull request #20 from Tencent/mobile_dev

Mobile dev
TencentBlueKing · Aug 6, 2019 · 92c1c1e · 92c1c1e
2 parents 20e7681 + caf3c2c
commit 92c1c1e
Show file tree

Hide file tree

Showing 53 changed files with 886 additions and 519 deletions.
diff --git a/config/default.py b/config/default.py
@@ -98,12 +98,12 @@
 
 # 自定义中间件
 MIDDLEWARE += (
+    'weixin.core.middlewares.WeixinAuthenticationMiddleware',
+    'weixin.core.middlewares.WeixinLoginMiddleware',
     'django.middleware.locale.LocaleMiddleware',
     'gcloud.core.middlewares.UnauthorizedMiddleware',
     'gcloud.core.middlewares.GCloudPermissionMiddleware',
     'gcloud.core.middlewares.TimezoneMiddleware',
-    'weixin.core.middlewares.WeixinAuthenticationMiddleware',
-    'weixin.core.middlewares.WeixinLoginMiddleware',
 )
 
 MIDDLEWARE = ('weixin.core.middlewares.WeixinProxyPatchMiddleware',) + MIDDLEWARE

diff --git a/docs/install/mobile_deploy.md b/docs/install/mobile_deploy.md
@@ -0,0 +1,68 @@
+# 移动端部署
+标准运维移动端需要通过企业微信进行访问，所以需要绑定企业微信的应用访问链接到你部署的蓝鲸社区版平台。
+
+## 企业微信管理端配置
+
+### 登录企业微信管理后台
+打开浏览器访问链接 `https://work.weixin.qq.com/`，使用企业微信扫码登录，注意需要使用有管理员权限的用户。
+
+### 企业微信新建应用
+点击导航中"应用管理"，在自建应用中点击"新建应用"，应用logo请上传标准运维SaaS的logo，应用名称填写"标准运维"，应用介绍可以选填，可见范围
+根据企业内需求配置，如果希望企业内所有人都可以访问，请选择组织架构中的根节点。
+
+### 企业微信应用管理
+- 点击上一步新建的标准运维应用，在"功能"中找到"工作台应用主页"，应用主页配置为 `http[https]://{BK_PAAS_HOST}/o/bk_sops/weixin/`，
+并勾选"在微工作台中始终进入主页"。
+
+- 在"开发者接口"中找到"网页授权及JS-SDK"，并设置可信域名为 {BK_PAAS_OUTER_HOST}。
+![](../resource/img/mobile_work_weixin_config.png)
+
+- 在"开发者接口"中找到"企业微信授权登录"，并设置授权回调域为 {BK_PAAS_OUTER_HOST}。
+其中，{BK_PAAS_OUTER_HOST} 为你部署的蓝鲸外网域名，如果是 HTTPS 协议，"企业微信授权登录"中授权回调域请添加端口号 443，
+即 `{BK_PAAS_HOST}:443`。
+![](../resource/img/mobile_auth_domain.png)
+
+
+## 蓝鲸消息通知渠道配置
+以蓝鲸管理员身份访问蓝鲸开发者中心，进入"API网关"的"通道管理"，选择"[CMSI]蓝鲸消息管理"，编辑"[CMSI]发送微信消息"，在"组件配置"
+中修改配置，具体方法参考"API网关"的"使用指南"中"微信消息组件"章节，注意：
+
+- wx_type 选择"企业微信"
+- wx_qy_corpid 填写企业微信后台管理中"我的企业"页面的"企业ID"
+- wx_qy_agentid 填写企业微信后台的应用管理中标准运维应用的 AgentId，该应用会作为默认微信消息通知渠道
+- wx_qy_corpsecret 填写企业微信后台的应用管理中标准运维应用的 Secret
+
+![](../resource/img/mobile_agentid.png)
+
+
+## 标准运维部署
+
+### 环境变量配置
+标准运维首次部署默认不开启移动端，如果需要开启移动端，需要在蓝鲸"开发者中心"配置标准运维应用的环境变量，如下图所示，其中，
+BKAPP_USE_WEIXIN(是否开启移动端)值设置为 1，BKAPP_IS_QY_WEIXIN(是否使用企业微信)值设置为 1，BKAPP_WEIXIN_APP_ID(企业ID) 的值
+设置为企业微信后台管理中"我的企业"页面的"企业ID"，BKAPP_WEIXIN_APP_SECRET(企业应用Secret) 的值设置为企业微信后台的应用管理中标准
+运维应用的 Secret，BKAPP_WEIXIN_APP_EXTERNAL_HOST(蓝鲸外网域名) 的值设置为你部署的蓝鲸外网域名 {BK_PAAS_OUTER_HOST}。
+
+### 重新部署
+设置标准运维应用运行时的环境变量后，需要重新部署才能生效.
+
+## 移动端用户绑定企业微信
+已授权的移动端用户首次使用标准运维前，需要在蓝鲸桌面绑定企业微信。在蓝鲸的"个人中心"中点击头像（企业版点击"绑定微信"），通过企业微信扫描二维码绑定。在完成
+企业微信绑定后，请再次访问标准运维SaaS以便同步企业微信账号信息，然后就可以在企业微信的"工作台"访问标准运维移动版了。
+
+## FAQ
+
+### 蓝鲸个人中心找不到绑定企业微信入口
+可能是蓝鲸消息通知渠道配置错误，请确认按照上述教程配置并保证变量值正确。
+
+### 移动端打开后报错"redirect_uri需使用可信域名"
+<img src="../resource/img/mobile_error_redirect_uri.png" height = "400" align=center />
+可能是企业微信后台管理中"网页授权及JS-SDK"配置错误，请设置可信域名为你部署的蓝鲸外网域名。
+
+### 移动端打开后报错"网页发生错误"
+<img src="../resource/img/mobile_error_web.png" height = "400" align=center />
+可能是标准运维SaaS的环境变量配置错误，请检查BKAPP_WEIXIN_APP_ID(企业ID)、BKAPP_WEIXIN_APP_SECRET(企业应用Secret)、
+BKAPP_WEIXIN_APP_EXTERNAL_HOST(蓝鲸外网域名)配置是否正确。
+
+### 移动端打开后业务列表为空
+请在蓝鲸"个人中心"绑定企业微信后，先访问一次 PC 端标准运维SaaS，并确保能访问业务数据，然后再访问移动端。
diff --git a/docs/resource/img/bk_sops_envs.png b/docs/resource/img/bk_sops_envs.png
diff --git a/docs/resource/img/mobile_agentid.png b/docs/resource/img/mobile_agentid.png
diff --git a/docs/resource/img/mobile_auth_domain.png b/docs/resource/img/mobile_auth_domain.png
diff --git a/docs/resource/img/mobile_error_redirect_uri.png b/docs/resource/img/mobile_error_redirect_uri.png
diff --git a/docs/resource/img/mobile_error_web.png b/docs/resource/img/mobile_error_web.png
diff --git a/docs/resource/img/mobile_work_weixin_config.png b/docs/resource/img/mobile_work_weixin_config.png
diff --git a/frontend/mobile/build/webpack.base.conf.babel.js b/frontend/mobile/build/webpack.base.conf.babel.js
@@ -54,34 +54,10 @@ export default {
                 use: {
                     loader: 'vue-loader',
                     options: {
-                        transformAssetUrls: {
-                            video: 'src',
-                            source: 'src',
-                            img: 'src',
-                            image: 'xlink:href'
-                        },
-                        scss: 'vue-style-loader!css-loader!px2rem-loader!sass-loader',
-                        sass: 'vue-style-loader!css-loader!px2rem-loader!sass-loader?indentedSyntax',
+                        extractCSS: true
                     }
                 }
             },
-            {
-                test: /\.scss$/,
-                use: [{
-                    loader: 'style-loader'
-                }, {
-                    loader: 'css-loader'
-                }, {
-                    loader: 'px2rem-loader',
-                    // options here
-                    options: {
-                        remUnit: 37.5,
-                        remPrecision: 8//换算的rem保留几位小数点
-                    }
-                },{
-                    loader: 'sass-loader'
-                }]
-            },
             {
                 test: /\.js$/,
                 use: {
@@ -120,7 +96,7 @@ export default {
                 use: {
                     loader: 'url-loader',
                     options: {
-                        limit: 10000,
+                        limit: 1,
                         name: assetsPath('fonts/[name].[ext]')
                     }
                 }

diff --git a/frontend/mobile/build/webpack.dev.conf.babel.js b/frontend/mobile/build/webpack.dev.conf.babel.js
@@ -32,23 +32,19 @@ const webpackConfig = merge(baseConf, {
     module: {
         rules: [
             {
-                test: /\.css$/,
+                test: /\.s?[ac]ss$/,
                 use: [
-                    'vue-style-loader',
+                    'style-loader',
+                    'css-loader',
                     {
-                        loader: 'css-loader',
+                        loader: 'px2rem-loader',
+                        // options here
                         options: {
-                            importLoaders: 1
+                            remUnit: 37.5,
+                            remPrecision: 8//换算的rem保留几位小数点
                         }
                     },
-                    {
-                        loader: 'postcss-loader',
-                        options: {
-                            config: {
-                                path: path.resolve(__dirname, '..', 'postcss.config.js')
-                            }
-                        }
-                    }
+                    'sass-loader'
                 ]
             }
         ]

diff --git a/frontend/mobile/build/webpack.prod.conf.babel.js b/frontend/mobile/build/webpack.prod.conf.babel.js
@@ -119,18 +119,13 @@ const prodConf = merge(baseConf, {
                 test: /\.s?[ac]ss$/,
                 use: [
                     MiniCssExtractPlugin.loader,
+                    'css-loader',
                     {
-                        loader: 'css-loader',
+                        loader: 'px2rem-loader',
+                        // options here
                         options: {
-                            exportOnlyLocals: false
-                        }
-                    }, 
-                    {
-                        loader: 'postcss-loader',
-                        options: {
-                            config: {
-                                path: resolve(__dirname, '..', 'postcss.config.js')
-                            }
+                            remUnit: 37.5,
+                            remPrecision: 8//换算的rem保留几位小数点
                         }
                     },
                     'sass-loader'

diff --git a/frontend/mobile/package.json b/frontend/mobile/package.json
@@ -44,17 +44,17 @@
     "amfe-flexible": "^2.2.1",
     "axios": "^0.18.0",
     "jquery": "^3.4.1",
+    "jsencrypt": "^3.0.0-rc.1",
     "jsonp": "^0.2.1",
     "jsplumb": "^2.8.4",
     "less": "^3.9.0",
     "less-loader": "^4.1.0",
-    "tippy.js": "^4.3.1",
     "vant": "^1.6.9",
     "vee-validate": "^2.2.8",
     "vue": "^2.5.22",
     "vue-cookies": "^1.5.13",
     "vue-router": "^3.0.2",
-    "vue-tippy": "^2.1.2",
+    "tooltip.js": "^1.2.0",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

diff --git a/frontend/mobile/src/App.vue b/frontend/mobile/src/App.vue
@@ -61,7 +61,6 @@
 </script>
 
 <style lang="scss">
-    @import '../static/style/app.scss';
     .app-container {
       font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif;
       -webkit-font-smoothing: antialiased;

diff --git a/frontend/mobile/src/api/index.js b/frontend/mobile/src/api/index.js
@@ -155,6 +155,7 @@ function handleResponse ({ config, response, resolve, reject }) {
  */
 function handleReject (error, config) {
     if (axios.isCancel(error)) {
+        error.isCancel = true
         return Promise.reject(error)
     }