From 30b2ffe112c77b1a99f48e2c2cc65aed1192d335 Mon Sep 17 00:00:00 2001
From: leafage-collb <3303710797@qq.com>
Date: Thu, 25 Jul 2024 16:38:13 +0800
Subject: [PATCH 1/3] =?UTF-8?q?fix:=20V7.2=20=E5=A4=96=E5=8F=91=E5=89=8D?=
 =?UTF-8?q?=E6=95=B4=E4=BD=93=E7=89=B9=E6=80=A7=E9=AA=8C=E6=94=B6=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=20#=20Reviewed,=20transaction=20id:=2013156?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webfe/package_vue/src/language/lang/en.js     |   2 +
 webfe/package_vue/src/language/lang/zh.js     |   2 +
 .../dev-center/app/basic-config/info.vue      | 243 +++++-------------
 3 files changed, 71 insertions(+), 176 deletions(-)

diff --git a/webfe/package_vue/src/language/lang/en.js b/webfe/package_vue/src/language/lang/en.js
index a14e4f1499..54dbc0448c 100644
--- a/webfe/package_vue/src/language/lang/en.js
+++ b/webfe/package_vue/src/language/lang/en.js
@@ -2717,4 +2717,6 @@ export default {
   '是否忽略 {n} 模块闲置提醒？': 'Ignore the idle reminder for {n} modules?',
   '忽略后，该模块的': 'After ignoring, the',
   '将在 6 个月内不出现在闲置应用列表中，若 6 个月后继续闲置，将重新提醒。': 'of this module will not appear in the idle application list for 6 months. If it remains idle after 6 months, you will be reminded again.',
+  平台内置地址: 'Built-in Platform Address',
+  自定义地址: 'Custom Address',
 };
diff --git a/webfe/package_vue/src/language/lang/zh.js b/webfe/package_vue/src/language/lang/zh.js
index 44beef4a9d..d0e2dff6f3 100644
--- a/webfe/package_vue/src/language/lang/zh.js
+++ b/webfe/package_vue/src/language/lang/zh.js
@@ -2855,4 +2855,6 @@ export default {
   '是否忽略 {n} 模块闲置提醒？': '是否忽略 {n} 模块闲置提醒？',
   '忽略后，该模块的': '忽略后，该模块的',
   '将在 6 个月内不出现在闲置应用列表中，若 6 个月后继续闲置，将重新提醒。': '将在 6 个月内不出现在闲置应用列表中，若 6 个月后继续闲置，将重新提醒。',
+  平台内置地址: '平台内置地址',
+  自定义地址: '自定义地址',
 };
diff --git a/webfe/package_vue/src/views/dev-center/app/basic-config/info.vue b/webfe/package_vue/src/views/dev-center/app/basic-config/info.vue
index a37a5ff0b1..699652e782 100644
--- a/webfe/package_vue/src/views/dev-center/app/basic-config/info.vue
+++ b/webfe/package_vue/src/views/dev-center/app/basic-config/info.vue
@@ -50,7 +50,7 @@
                 </div>
               </section>
               <div class="logo-wrapper">
-                <img :src="localeAppInfo.logo || '/static/images/default_logo.png'">
+                <img :src="localeAppInfo.logo || '/static/images/default_logo.png'" />
               </div>
             </div>
             <!-- 编辑态 -->
@@ -72,34 +72,16 @@
                   <bk-input disabled v-model="curAppInfo.application.region_name"></bk-input>
                 </bk-form-item>
                 <bk-form-item label="LOGO">
-                  <div class="logoupload-wrapper">
-                    <div
-                      :class="['logoupload-cls', { 'preview': appBaseInfoConfig.isPreviewImageShow }]"
-                      @mouseenter="isMaskLayerShown = true"
-                      @mouseleave="isMaskLayerShown = false"
-                    >
-                      <!-- 默认 -->
-                      <div class="logoupload-content">
-                        <i class="bk-icon icon-plus-line"></i>
-                        <p>{{ $t('点击上传') }}</p>
-                      </div>
-                      <!-- 预览图 -->
-                      <div class="preview-image-cls">
-                        <img id="preview-image" />
-                      </div>
-                      <!-- 遮罩层 -->
-                      <div class="logo-mask-layer-cls" v-if="appBaseInfoConfig.isPreviewImageShow && isMaskLayerShown">
-                        <i class="paasng-icon paasng-close" @click="handleClose"></i>
-                        <i class="paasng-icon paasng-upload-2" @click="handleInputClick"></i>
-                      </div>
-                      <input
-                        ref="logoInputRef"
-                        type="file"
-                        accept="image/jpeg, image/png"
-                        name="logo"
-                        @change="beforeFileUploadProcessing"
-                      >
-                    </div>
+                  <div :class="['logoupload-wrapper', { selected: curFileData.length }]">
+                    <bk-upload
+                      :files="curFileData"
+                      :theme="'picture'"
+                      accept="image/jpeg, image/png"
+                      :multiple="false"
+                      ext-cls="app-logo-upload-cls"
+                      :custom-request="customRequest"
+                      @on-delete="handleDelete"
+                    ></bk-upload>
                     <p class="tip">
                       {{ $t('支持jpg、png等图片格式，图片尺寸为72*72px，不大于2MB。') }}
                     </p>
@@ -116,7 +98,7 @@
                   <bk-button
                     ext-cls="mr8"
                     theme="default"
-                    :disabled="appBaseInfoConfig.logoData === null"
+                    :disabled="!curFileData.length"
                     @click="handlePreview">{{ $t('预览') }}</bk-button>
                   <bk-button
                     theme="default"
@@ -238,28 +220,23 @@
       ext-cls="base-info-preview-dialog-cls"
       theme="primary">
       <div class="content">
-        <img id="dislog-preview-image" />
+        <img id="dislog-preview-image" :src="previewImageRrl" />
         <h3 class="title">{{ localeAppInfo.name }}</h3>
       </div>
     </bk-dialog>
   </div>
 </template>
 
-<script>import moment from 'moment';
+<script>
+import moment from 'moment';
 import appBaseMixin from '@/mixins/app-base-mixin';
-// import BluekingUserSelector from '@blueking/user-selector';
 import authenticationInfo from '@/components/authentication-info.vue';
-// import 'BKSelectMinCss';
 import pluginInfo from './plugin-info.vue';
 
 export default {
   components: {
     authenticationInfo,
     pluginInfo,
-    // BluekingUserSelector,
-    //   'bk-member-selector': () => {
-    //       return import('@/components/user/member-selector/member-selector.vue');
-    //   }
   },
   mixins: [appBaseMixin],
   data() {
@@ -302,14 +279,13 @@ export default {
       descAppDisabled: false,
       appBaseInfoConfig: {
         isEdit: false,
-        isPreviewImageShow: false,
         logoData: null,
         isLoading: false,
       },
       previewDialogConfig: {
         visible: false,
       },
-      isMaskLayerShown: false,
+      curFileData: [],
     };
   },
   computed: {
@@ -326,7 +302,6 @@ export default {
       return this.curAppInfo.application.code === this.formRemoveConfirmCode;
     },
     platformFeature() {
-      console.warn(this.$store.state.platformFeature);
       return this.$store.state.platformFeature;
     },
     userFeature() {
@@ -338,6 +313,9 @@ export default {
     curAppName() {
       return this.curAppInfo.application?.name;
     },
+    previewImageRrl() {
+      return this.curFileData[0]?.url;
+    },
   },
   watch: {
     curAppInfo(value) {
@@ -505,48 +483,17 @@ export default {
     // 基本信息编辑
     handleEditBaseInfo() {
       if (!this.isBasicInfoEditable) return;
-      this.appBaseInfoConfig.isEdit = true;
-    },
-
-    // 处理文件选择，显示选择后的预览图
-    beforeFileUploadProcessing(e) {
-      e.preventDefault();
-      const file = e.target.files[0];
-      if (!file) return;
-      const maxSize = 2 * 1024;
-
-      // 支持jpg、png等图片格式，图片尺寸为72*72px，不大于2MB。验证
-      const imgSize = file.size / 1024;
-      if (imgSize > maxSize) {
-        this.$paasMessage({
-          theme: 'error',
-          message: this.$t('文件大小应<2M！'),
-        });
-        return;
+      if (this.localeAppInfo.logo) {
+        this.curFileData = [{
+          url: this.localeAppInfo.logo,
+        }];
       }
-
-      // 显示预览图
-      const imgEl = document.querySelector('#preview-image');
-      const previewImageUrl = URL.createObjectURL(file);
-      imgEl.style.display = 'block';
-      imgEl.src = previewImageUrl;
-      this.appBaseInfoConfig.isPreviewImageShow = true;
-      this.appBaseInfoConfig.logoData = file;
-    },
-
-    // 设置预览图
-    setPreviewImage(imgEl, file) {
-      const previewImageUrl = URL.createObjectURL(file);
-      imgEl.style.display = 'block';
-      imgEl.src = previewImageUrl;
+      this.appBaseInfoConfig.isEdit = true;
     },
 
     // 预览
     handlePreview() {
       this.previewDialogConfig.visible = true;
-      // 显示预览图
-      const imgEl = document.querySelector('#dislog-preview-image');
-      this.setPreviewImage(imgEl, this.appBaseInfoConfig.logoData);
     },
 
     // 基本信息取消
@@ -558,7 +505,6 @@ export default {
     // 数据重置
     resetAppBaseInfoConfig() {
       this.appBaseInfoConfig.isEdit = false;
-      this.appBaseInfoConfig.isPreviewImageShow = false;
       this.appBaseInfoConfig.logoData = null;
       this.appBaseInfoConfig.isLoading = false;
     },
@@ -572,17 +518,29 @@ export default {
       });
     },
 
-    handleClose() {
-      const imgEl = document.querySelector('#preview-image');
-      imgEl.src = '';
-      imgEl.style.display = 'none';
-      this.$refs.logoInputRef.value = '';
-      this.appBaseInfoConfig.logoData = null;
-      this.appBaseInfoConfig.isPreviewImageShow = false;
-    },
+    // 自定义上传处理
+    customRequest(file) {
+      const fileData = file.fileObj.origin;
 
-    handleInputClick() {
-      this.$refs.logoInputRef?.click();
+      // 支持jpg、png等图片格式，图片尺寸为72*72px，不大于2MB。验证
+      const imgSize = fileData.size / 1024;
+      const maxSize = 2 * 1024;
+      if (imgSize > maxSize) {
+        this.$paasMessage({
+          theme: 'error',
+          message: this.$t('文件大小应<2M！'),
+        });
+        return;
+      }
+      this.appBaseInfoConfig.logoData = fileData;
+      const previewImageUrl = URL.createObjectURL(fileData);
+      this.curFileData = [{
+        name: fileData.name,
+        url: previewImageUrl,
+      }];
+    },
+    handleDelete() {
+      this.curFileData = [];
     },
   },
 };
@@ -879,99 +837,33 @@ export default {
         .logoupload-wrapper {
           display: flex;
           align-items: center;
-          .tip {
-            margin-left: 12px;
-            color: #979BA5;
-          }
-        }
-        .logoupload-cls {
-          flex-shrink: 0;
-          position: relative;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          width: 96px;
-          height: 96px;
-          color: #63656E;
-          background: #FAFBFD;
-          border: 1px dashed #C4C6CC;
-          border-radius: 2px;
-          cursor: pointer;
-
-          &.preview {
-            background: #FFFFFF;
-            border: 1px solid #C4C6CC !important;
-          }
-
-          &:hover {
-            color: #3A84FF;
-            border-color: #3A84FF;
-            .icon-plus-line {
-              color: #3A84FF;
+          &.selected {
+            .app-logo-upload-cls /deep/ .file-wrapper .picture-btn {
+              background: #fff;
             }
           }
-
-          .logoupload-content {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-          }
-
-          .preview-image-cls {
-            position: absolute;
-            left: 3px;
-            top: 3px;
-            width: calc(100% - 6px);
-            height: calc(100% - 6px);
-          }
-
-          .logo-mask-layer-cls {
-            position: absolute;
-            top: 3px;
-            left: 3px;
-            width: calc(100% - 6px);
-            height: calc(100% - 6px);
-            background: #00000099;
-            z-index: 9999;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: default;
-
-            i {
-              cursor: pointer;
-              color: #FAFBFD;
-              font-size: 20px;
-            }
-
-            i:hover {
-              color: #3A84FF;
-            }
-
-            .paasng-close {
-              position: absolute;
-              right: 3px;
-              top: 3px;
+          .app-logo-upload-cls {
+            /deep/ .file-wrapper {
+              width: 96px;
+              height: 96px;
+              padding-top: 0px;
+              .picture-btn {
+                background: #fafbfd;
+              }
+              .upload-btn {
+                width: 96px;
+                height: 96px;
+                display: flex;
+                align-items: center;
+                flex-direction: column;
+                justify-content: center;
+              }
             }
           }
-
-          i {
-            font-size: 22px;
+          .tip {
+            margin-left: 12px;
             color: #979BA5;
           }
-          p {
-            text-align: center;
-          }
-          input {
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            left: 0;
-            top: 0;
-            z-index: 10;
-            cursor: pointer;
-            opacity: 0;
-          }
         }
       }
     }
@@ -979,7 +871,6 @@ export default {
       width: 88px;
     }
     .logoupload-cls .preview-image-cls #preview-image {
-      display: none;
       position: absolute;
       width: 100%;
       height: 100%;

From b63d498f1e150dcbaf185bba70065e4e83c99d8a Mon Sep 17 00:00:00 2001
From: leafage-collb <3303710797@qq.com>
Date: Tue, 30 Jul 2024 09:53:34 +0800
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=E5=9B=BD=E9=99=85=E5=8C=96=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=E4=BF=AE=E5=A4=8D=20#=20Reviewed,=20transaction=20id:?=
 =?UTF-8?q?=2013422?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webfe/package_vue/src/language/lang/en.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webfe/package_vue/src/language/lang/en.js b/webfe/package_vue/src/language/lang/en.js
index 54dbc0448c..184c40d2b8 100644
--- a/webfe/package_vue/src/language/lang/en.js
+++ b/webfe/package_vue/src/language/lang/en.js
@@ -1516,7 +1516,7 @@ export default {
   '网关负责人可以对API 资源进行创建、开放、关闭等操作，并且支持YAML、JSON格式批量导入。': 'The gateway owner can create, open and close API resources, and supports batch import in YAML and JSON formats.',
   网关认证: 'Gateway Authentication',
   '集成鉴权体系，支持对蓝鲸应用和用户进行身份认证，获取蓝鲸应用和用户身份信息。': 'Integrated authentication system to support the authentication of APP and users and to obtain information on the identity of BlueKing APP and users.',
-  流量控制: 'Flow control',
+  流量控制: 'Flow Control',
   '支持在网关或 API 资源层面进行流量控制。': 'Support for traffic control at the gateway or API resource level.',
   安全防护: 'Security',
   '支持 SSL 加密，并支持采用 JWT 向后端接口传递应用/用户信息。': 'Supports SSL encryption and the use of JWT to pass APP/user information to the back-end interface.',
@@ -2133,7 +2133,7 @@ export default {
   '生产环境-label': 'Production Env',
   '生产环境-desc': 'Prod',
   产品文档: 'Documentation',
-  开源社区: 'Open Rource Community',
+  开源社区: 'Open Source',
   '迁移应用【{name}】到新版开发者中心': 'Migrate APP [{name}] to the new version of the developer center',
   '（生产环境 ）': '(prod)',
   '（预发布环境）': '(stag)',

From c0f563c4d1fb65bb7ddcbcb07cceec40ae84fa84 Mon Sep 17 00:00:00 2001
From: leafage-collb <3303710797@qq.com>
Date: Tue, 30 Jul 2024 15:28:30 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20S-mart=20=E5=BA=94=E7=94=A8=E4=B8=8D?=
 =?UTF-8?q?=E8=83=BD=E5=9C=A8=E9=A1=B5=E9=9D=A2=E4=B8=8A=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E4=BF=A1=E6=81=AF=E3=80=81=E5=8F=AF=E8=A7=81?=
 =?UTF-8?q?=E8=8C=83=E5=9B=B4=E5=B1=95=E7=A4=BA=E4=BF=AE=E5=A4=8D=20#=20Re?=
 =?UTF-8?q?viewed,=20transaction=20id:=2013469?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webfe/package_vue/src/components/authentication-info.vue   | 7 +++++--
 webfe/package_vue/src/language/lang/en.js                  | 2 +-
 webfe/package_vue/src/language/lang/zh.js                  | 2 +-
 .../src/views/dev-center/app/basic-config/info.vue         | 3 ++-
 .../src/views/dev-center/app/market/visible-range.vue      | 1 +
 5 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/webfe/package_vue/src/components/authentication-info.vue b/webfe/package_vue/src/components/authentication-info.vue
index 0f7d7564c9..294e5fd02b 100644
--- a/webfe/package_vue/src/components/authentication-info.vue
+++ b/webfe/package_vue/src/components/authentication-info.vue
@@ -81,7 +81,7 @@
               </span>
             </template>
           </bk-table-column>
-          <bk-table-column :label="$t('操作')" :width="120">
+          <bk-table-column :label="$t('操作')" :width="localLanguage === 'en' ? 150 : 120">
             <template slot-scope="props">
               <a
                 v-bk-tooltips.light="disabledTooltipsConfig"
@@ -287,7 +287,7 @@
           :disabled="!option.enabled"
         >
           <span>{{ option.bk_app_secret }}</span>
-          ({{ option.enabled ? $t('创建时间:') + smartTime(option.created_at, 'smartShorten') : $t('已禁用') }})
+          ({{ option.enabled ? `${$t('创建时间')}: ` + smartTime(option.created_at, 'smartShorten') : $t('已禁用') }})
         </bk-option>
         <div
           slot="extension"
@@ -423,6 +423,9 @@ export default {
     isAddNewSecret() {
       return this.appSecretList.length < 2;
     },
+    localLanguage() {
+      return this.$store.state.localLanguage;
+    },
   },
   watch: {
     appCode() {
diff --git a/webfe/package_vue/src/language/lang/en.js b/webfe/package_vue/src/language/lang/en.js
index 184c40d2b8..ccfc12144d 100644
--- a/webfe/package_vue/src/language/lang/en.js
+++ b/webfe/package_vue/src/language/lang/en.js
@@ -691,7 +691,7 @@ export default {
   申请记录: 'APP Record',
   基本信息: 'Basic Information',
   '基本信息-title': 'Basic information',
-  '应用名称等基本信息请在“app.yaml”文件中配置': 'For basic information such as the APP name, please configure it in the "app.yaml" file',
+  '应用名称等基本信息请在应用描述文件 app_desc.yaml 中配置': 'Please configure basic information such as the application name in the application description file app_desc.yaml',
   '管理员、开发者和运营者可以修改应用名称等基本信息': 'Administrators, developers and operators can modify basic information such as the APP name',
   应用logo: 'APP logo',
   更换图片: 'Change',
diff --git a/webfe/package_vue/src/language/lang/zh.js b/webfe/package_vue/src/language/lang/zh.js
index d0e2dff6f3..0ee1c9f36b 100644
--- a/webfe/package_vue/src/language/lang/zh.js
+++ b/webfe/package_vue/src/language/lang/zh.js
@@ -716,7 +716,7 @@ export default {
   申请记录: '申请记录',
   基本信息: '基本信息',
   '基本信息-title': '基本信息',
-  '应用名称等基本信息请在“app.yaml”文件中配置': '应用名称等基本信息请在“app.yaml”文件中配置',
+  '应用名称等基本信息请在应用描述文件 app_desc.yaml 中配置': '应用名称等基本信息请在应用描述文件 app_desc.yaml 中配置',
   '管理员、开发者和运营者可以修改应用名称等基本信息': '管理员、开发者和运营者可以修改应用名称等基本信息',
   应用logo: '应用logo',
   更换图片: '更换图片',
diff --git a/webfe/package_vue/src/views/dev-center/app/basic-config/info.vue b/webfe/package_vue/src/views/dev-center/app/basic-config/info.vue
index 699652e782..053440c33f 100644
--- a/webfe/package_vue/src/views/dev-center/app/basic-config/info.vue
+++ b/webfe/package_vue/src/views/dev-center/app/basic-config/info.vue
@@ -22,7 +22,7 @@
             v-if="isSmartApp"
             class="info"
           >
-            {{ $t('应用名称等基本信息请在“app.yaml”文件中配置') }}
+            {{ $t('应用名称等基本信息请在应用描述文件 app_desc.yaml 中配置') }}
           </div>
           <div
             v-else
@@ -296,6 +296,7 @@ export default {
       return this.curAppInfo.role.name !== 'operator';
     },
     isBasicInfoEditable() {
+      if (this.isSmartApp) return false;
       return ['administrator', 'operator'].indexOf(this.curAppInfo.role.name) !== -1;
     },
     formRemoveValidated() {
diff --git a/webfe/package_vue/src/views/dev-center/app/market/visible-range.vue b/webfe/package_vue/src/views/dev-center/app/market/visible-range.vue
index 968a8679c0..5e22ebaaac 100644
--- a/webfe/package_vue/src/views/dev-center/app/market/visible-range.vue
+++ b/webfe/package_vue/src/views/dev-center/app/market/visible-range.vue
@@ -103,6 +103,7 @@ export default {
       handler(newVal) {
         this.baseInfo = cloneDeep(newVal);
       },
+      deep: true,
       immediate: true,
     },
   },