From e4ecdeb64c547dca74efd34a80ead8b60c42f0df Mon Sep 17 00:00:00 2001
From: wmh <3303710797@qq.com>
Date: Fri, 7 Jun 2024 18:56:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20app=E5=8F=AF=E8=A7=81=E8=8C=83=E5=9B=B4?=
 =?UTF-8?q?=20(#1371)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/user-selector/index.vue    | 1272 +++++++++--------
 webfe/package_vue/src/language/lang/en.js     |   28 +
 webfe/package_vue/src/language/lang/zh.js     |   29 +
 .../dev-center/app/market/market-manager.vue  |   67 +-
 .../app/market/render-member-list.vue         |   78 +
 .../dev-center/app/market/visible-range.vue   |  181 +++
 .../package_vue/static/images/file-close.svg  |    1 +
 7 files changed, 1006 insertions(+), 650 deletions(-)
 create mode 100644 webfe/package_vue/src/views/dev-center/app/market/render-member-list.vue
 create mode 100644 webfe/package_vue/src/views/dev-center/app/market/visible-range.vue
 create mode 100644 webfe/package_vue/static/images/file-close.svg

diff --git a/webfe/package_vue/src/components/user-selector/index.vue b/webfe/package_vue/src/components/user-selector/index.vue
index 4e6eb0e214..83fab7615d 100644
--- a/webfe/package_vue/src/components/user-selector/index.vue
+++ b/webfe/package_vue/src/components/user-selector/index.vue
@@ -1,668 +1,688 @@
 <template>
-    <bk-dialog
-        v-model="isShowDialog"
-        width="700"
-        title=""
-        :mask-close="false"
-        draggable
-        header-position="left"
-        ext-cls="bk-add-member-dialog"
-        @after-leave="handleAfterLeave">
-        <div slot="header" class="title">
-            {{ $t(title) }}
+  <bk-dialog
+    v-model="isShowDialog"
+    width="700"
+    title=""
+    :mask-close="false"
+    draggable
+    header-position="left"
+    ext-cls="bk-add-member-dialog"
+    @after-leave="handleAfterLeave">
+    <div slot="header" class="title">
+      {{ $t(title) }}
+    </div>
+    <div class="add-member-content-wrapper" v-bkloading="{ isLoading, opacity: 1 }" :style="style">
+      <div v-show="!isLoading">
+        <div class="left">
+          <div class="search-input">
+            <bk-select
+              v-model="searchConditionValue"
+              :clearable="false"
+              :popover-width="150"
+              style="flex: 0 0 130px;"
+              @selected="handleConditionSelcted">
+              <bk-option
+                v-for="option in searchConditionList"
+                :key="option.id"
+                :id="option.id"
+                :name="option.name">
+              </bk-option>
+            </bk-select>
+            <bk-input
+              v-model="keyword"
+              :placeholder="$t('用户或组织')"
+              maxlength="64"
+              :clearable="true"
+              style="position: relative; left: -1px;"
+              @keyup.enter.native="handleSearch"
+              @keyup.up.native="handleKeyup"
+              @keyup.down.native="handleKeydown">
+            </bk-input>
+          </div>
+          <div
+            class="member-tree-wrapper"
+            v-bkloading="{ isLoading: treeLoading, opacity: 1 }">
+            <template v-if="isShowMemberTree">
+              <div class="tree">
+                <tree
+                  ref="userTreeRef"
+                  :all-data="treeList"
+                  style="height: 341px;"
+                  :key="infiniteTreeKey"
+                  @async-load-nodes="handleRemoteLoadNode"
+                  @on-select="handleOnSelected">
+                </tree>
+              </div>
+            </template>
+            <template v-if="isShowSearchResult">
+              <div class="search-content">
+                <template v-if="isHasSeachResult">
+                  <list
+                    ref="searchedResultsRef"
+                    :all-data="searchedResult"
+                    :focus-index.sync="focusItemIndex"
+                    style="height: 341px;"
+                    @on-checked="handleSearchResultSelected">
+                  </list>
+                </template>
+                <template v-if="isSeachResultEmpty">
+                  <div class="search-empty-wrapper">
+                    <img src="./images/empty-display.svg" alt="" />
+                    <p class="empty-tips"> {{ $t('搜索无结果') }} </p>
+                  </div>
+                </template>
+              </div>
+            </template>
+          </div>
         </div>
-        <div class="add-member-content-wrapper" v-bkloading="{ isLoading, opacity: 1 }" :style="style">
-            <div v-show="!isLoading">
-                <div class="left">
-                    <div class="search-input">
-                        <bk-select
-                            v-model="searchConditionValue"
-                            :clearable="false"
-                            :popover-width="150"
-                            style="flex: 0 0 130px;"
-                            @selected="handleConditionSelcted">
-                            <bk-option v-for="option in searchConditionList"
-                                :key="option.id"
-                                :id="option.id"
-                                :name="option.name">
-                            </bk-option>
-                        </bk-select>
-                        <bk-input
-                            v-model="keyword"
-                            :placeholder="$t('用户或组织')"
-                            maxlength="64"
-                            :clearable="true"
-                            style="position: relative; left: -1px;"
-                            @keyup.enter.native="handleSearch"
-                            @keyup.up.native="handleKeyup"
-                            @keyup.down.native="handleKeydown">
-                        </bk-input>
-                    </div>
-                    <div class="member-tree-wrapper"
-                        v-bkloading="{ isLoading: treeLoading, opacity: 1 }">
-                        <template v-if="isShowMemberTree">
-                            <div class="tree">
-                                <tree
-                                    ref="userTreeRef"
-                                    :all-data="treeList"
-                                    style="height: 341px;"
-                                    :key="infiniteTreeKey"
-                                    @async-load-nodes="handleRemoteLoadNode"
-                                    @on-select="handleOnSelected">
-                                </tree>
-                            </div>
-                        </template>
-                        <template v-if="isShowSearchResult">
-                            <div class="search-content">
-                                <template v-if="isHasSeachResult">
-                                    <list
-                                        ref="searchedResultsRef"
-                                        :all-data="searchedResult"
-                                        :focus-index.sync="focusItemIndex"
-                                        style="height: 341px;"
-                                        @on-checked="handleSearchResultSelected">
-                                    </list>
-                                </template>
-                                <template v-if="isSeachResultEmpty">
-                                    <div class="search-empty-wrapper">
-                                        <img src="./images/empty-display.svg" alt="" />
-                                        <p class="empty-tips"> {{ $t('搜索无结果') }} </p>
-                                    </div>
-                                </template>
-                            </div>
-                        </template>
-                    </div>
-                </div>
-                <div class="right">
-                    <div class="header">
-                        <div class="has-selected"> {{ $t('已选择') }} <template v-if="isShowSelectedText">
-                            <span class="organization-count">{{ hasSelectedDepartments.length }}</span> {{ $t('个组织') }}，
-                            <span class="user-count">{{ hasSelectedUsers.length }}</span> {{ $t('个用户') }}
-                        </template>
-                            <template v-else>
-                                <span class="user-count">0</span>
-                            </template>
-                        </div>
-                        <bk-button theme="primary" text :disabled="!isShowSelectedText" @click="handleDeleteAll"> {{ $t('清空') }} </bk-button>
-                    </div>
-                    <div class="content">
-                        <div class="organization-content" v-if="isDepartSelectedEmpty">
-                            <div class="organization-item" v-for="item in hasSelectedDepartments" :key="item.id">
-                                <img class="folder-icon" src="./images/file-close.svg" alt="">
-                                <span class="organization-name" :title="item.name">{{ item.name }}</span>
-                                <img class="delete-depart-icon" src="./images/delete-fill.svg" alt="" @click="handleDelete(item, 'organization')">
-                            </div>
-                        </div>
-                        <div class="user-content" v-if="isUserSelectedEmpty">
-                            <div class="user-item" v-for="item in hasSelectedUsers" :key="item.id">
-                                <img :src="userDefaultAvatar" class="user-icon" alt="">
-                                <span class="user-name" :title="item.username !== '' ? `${item.display_name}(${item.username})` : item.display_name">
-                                    {{ item.display_name }}
-                                    <template v-if="item.username !== ''">
-                                        ({{ item.username }})
-                                    </template>
-                                </span>
-                                <img class="delete-icon" src="./images/delete-fill.svg" alt="" @click="handleDelete(item, 'user')">
-                            </div>
-                        </div>
-                        <div class="selected-empty-wrapper" v-if="isSelectedEmpty">
-                            <img src="./images/empty-display.svg" alt="" />
-                        </div>
-                    </div>
-                </div>
+        <div class="right">
+          <div class="header">
+            <div class="has-selected"> {{ $t('已选择') }} <template v-if="isShowSelectedText">
+              <span class="organization-count">{{ hasSelectedDepartments.length }}</span> {{ $t('个组织') }}，
+              <span class="user-count">{{ hasSelectedUsers.length }}</span> {{ $t('个用户') }}
+            </template>
+              <template v-else>
+                <span class="user-count">0</span>
+              </template>
             </div>
+            <bk-button theme="primary" text :disabled="!isShowSelectedText" @click="handleDeleteAll"> {{ $t('清空') }} </bk-button>
+          </div>
+          <div class="content">
+            <div class="organization-content" v-if="isDepartSelectedEmpty">
+              <div class="organization-item" v-for="item in hasSelectedDepartments" :key="item.id">
+                <img class="folder-icon" src="./images/file-close.svg" alt="">
+                <span class="organization-name" :title="item.name">{{ item.name }}</span>
+                <img class="delete-depart-icon" src="./images/delete-fill.svg" alt="" @click="handleDelete(item, 'organization')">
+              </div>
+            </div>
+            <div class="user-content" v-if="isUserSelectedEmpty">
+              <div class="user-item" v-for="item in hasSelectedUsers" :key="item.id">
+                <img :src="userDefaultAvatar" class="user-icon" alt="">
+                <span class="user-name" :title="item.username !== '' ? `${item.display_name}(${item.username})` : item.display_name">
+                  {{ item.display_name }}
+                  <template v-if="item.username !== ''">
+                    ({{ item.username }})
+                  </template>
+                </span>
+                <img class="delete-icon" src="./images/delete-fill.svg" alt="" @click="handleDelete(item, 'user')">
+              </div>
+            </div>
+            <div class="selected-empty-wrapper" v-if="isSelectedEmpty">
+              <img src="./images/empty-display.svg" alt="" />
+            </div>
+          </div>
         </div>
-        <div slot="footer">
-            <bk-button theme="primary" :disabled="isDisabled" @click="handleSave"> {{ $t('确定') }} </bk-button>
-            <bk-button style="margin-left: 10px;" @click="handleCancel"> {{ $t('取消') }} </bk-button>
-        </div>
-    </bk-dialog>
+      </div>
+    </div>
+    <div slot="footer">
+      <bk-button
+        theme="primary"
+        :disabled="isDisabled"
+        :loading="isConfirmLoading"
+        @click="handleSave">
+        {{ $t('确定') }}
+      </bk-button>
+      <bk-button
+        style="margin-left: 10px;"
+        @click="handleCancel">
+        {{ $t('取消') }}
+      </bk-button>
+    </div>
+  </bk-dialog>
 </template>
 <script>
-    import Tree from './tree';
-    import List from './list';
-    import { unique } from '@/common/tools';
-    import userDefaultAvatar from './images/personal-user.svg';
-    import request from './request';
-    import i18n from '@/language/i18n';
+import Tree from './tree';
+import List from './list';
+import { unique } from '@/common/tools';
+import userDefaultAvatar from './images/personal-user.svg';
+import request from './request';
+import i18n from '@/language/i18n';
 
-    export default {
-        name: '',
-        components: {
-            Tree,
-            List
-        },
-        props: {
-            show: {
-                type: Boolean,
-                default: false
-            },
-            users: {
-                type: Array,
-                default: () => []
-            },
-            departments: {
-                type: Array,
-                default: () => []
-            },
-            title: {
-                type: String,
-                default: '选择用户或组织'
-            },
-            apiHost: {
-                type: String,
-                required: true
-            },
-            defaultDepartment: {
-                type: Array,
-                default: () => []
-            },
-            defaultUser: {
-                type: Array,
-                default: () => []
-            },
-            isVerify: {
-                type: Boolean,
-                default: false
-            }
-        },
-        data () {
-            return {
-                isLoading: false,
-                isShowDialog: false,
-                userDefaultAvatar: userDefaultAvatar,
-                keyword: '',
-                treeLoading: false,
-                isBeingSearch: false,
-                hasSelectedUsers: [],
-                searchedUsers: [],
-                searchedDepartment: [],
-                hasSelectedDepartments: [],
-                treeList: [],
-                infiniteTreeKey: -1,
-                searchedResult: [],
-                // 搜索时 键盘上下键 hover 的 index
-                focusItemIndex: -1,
+export default {
+  name: '',
+  components: {
+    Tree,
+    List,
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    users: {
+      type: Array,
+      default: () => [],
+    },
+    departments: {
+      type: Array,
+      default: () => [],
+    },
+    title: {
+      type: String,
+      default: '选择用户或组织',
+    },
+    apiHost: {
+      type: String,
+      required: true,
+    },
+    defaultDepartment: {
+      type: Array,
+      default: () => [],
+    },
+    defaultUser: {
+      type: Array,
+      default: () => [],
+    },
+    isVerify: {
+      type: Boolean,
+      default: false,
+    },
+    customClose: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      isLoading: false,
+      isShowDialog: false,
+      userDefaultAvatar,
+      keyword: '',
+      treeLoading: false,
+      isBeingSearch: false,
+      hasSelectedUsers: [],
+      searchedUsers: [],
+      searchedDepartment: [],
+      hasSelectedDepartments: [],
+      treeList: [],
+      infiniteTreeKey: -1,
+      searchedResult: [],
+      // 搜索时 键盘上下键 hover 的 index
+      focusItemIndex: -1,
 
-                searchConditionList: [
-                    {
-                        id: 'fuzzy',
-                        name: i18n.t('模糊搜索')
-                    },
-                    {
-                        id: 'exact',
-                        name: i18n.t('精确搜索')
-                    }
-                ],
-                searchConditionValue: 'fuzzy'
-            };
+      searchConditionList: [
+        {
+          id: 'fuzzy',
+          name: i18n.t('模糊搜索'),
         },
-        computed: {
-            isDisabled () {
-                if (this.isLoading) {
-                    return true;
-                }
-                return this.hasSelectedUsers.length < 1 && this.hasSelectedDepartments.length < 1 && this.isVerify;
-            },
-            isHasSeachResult () {
-                return (this.searchedDepartment.length > 0 || this.searchedUsers.length > 0) && !this.treeLoading;
-            },
-            isSeachResultEmpty () {
-                return this.searchedDepartment.length < 1 && this.searchedUsers.length < 1 && !this.treeLoading;
-            },
-            isShowSelectedText () {
-                return this.hasSelectedDepartments.length > 0 || this.hasSelectedUsers.length > 0;
-            },
-            isShowSearchResult () {
-                return this.isBeingSearch && !this.treeLoading;
-            },
-            isShowMemberTree () {
-                return !this.isBeingSearch && !this.treeLoading;
-            },
-            isDepartSelectedEmpty () {
-                return this.hasSelectedDepartments.length > 0;
-            },
-            isUserSelectedEmpty () {
-                return this.hasSelectedUsers.length > 0;
-            },
-            isSelectedEmpty () {
-                return this.hasSelectedDepartments.length < 1 && this.hasSelectedUsers.length < 1;
-            },
-            style () {
-                return {
-                    height: '383px'
-                };
-            }
-        },
-        watch: {
-            show: {
-                handler (value) {
-                    this.isShowDialog = !!value;
-                    if (this.isShowDialog) {
-                        this.infiniteTreeKey = new Date().getTime();
-                        const templateList = this.users.map(item => {
-                            return {
-                                username: item.name,
-                                id: item.id,
-                                display_name: item.display_name,
-                                type: item.type
-                            };
-                        });
-                        this.hasSelectedUsers.splice(0, this.hasSelectedUsers.length, ...templateList);
-                        this.hasSelectedDepartments.splice(0, this.hasSelectedDepartments.length, ...this.departments);
-                        this.fetchCategories(false, true);
-                    }
-                },
-                immediate: true
-            },
-            keyword (newVal, oldVal) {
-                this.focusItemIndex = -1;
-                if (!newVal && oldVal) {
-                    if (this.isBeingSearch) {
-                        this.infiniteTreeKey = new Date().getTime();
-                        this.fetchCategories(true, false);
-                        this.isBeingSearch = false;
-                    }
-                }
-            },
-            apiHost: {
-                handler (value) {
-                    this.userApi = `${value}/api/c/compapi/v2/usermanage/fe_list_department_profiles/`;
-                    this.departmentApi = `${value}/api/c/compapi/v2/usermanage/fe_list_departments/`;
-                    this.userSearchApi = `${value}/api/c/compapi/v2/usermanage/fe_list_users/`;
-                },
-                immediate: true
-            }
+        {
+          id: 'exact',
+          name: i18n.t('精确搜索'),
         },
-        methods: {
-            handleKeyup () {
-                // 当搜索的结果数据小于10条时才支持键盘上下键选中
-                if (!this.isBeingSearch || this.searchedResult.length > 10) {
-                    return;
-                }
-                const len = this.$refs.searchedResultsRef.renderData.length;
-                this.focusItemIndex--;
-                this.focusItemIndex = this.focusItemIndex < 0 ? -1 : this.focusItemIndex;
-                if (this.focusItemIndex === -1) {
-                    this.focusItemIndex = len - 1;
-                }
-            },
+      ],
+      searchConditionValue: 'fuzzy',
+      isConfirmLoading: false,
+    };
+  },
+  computed: {
+    isDisabled() {
+      if (this.isLoading) {
+        return true;
+      }
+      return this.hasSelectedUsers.length < 1 && this.hasSelectedDepartments.length < 1 && this.isVerify;
+    },
+    isHasSeachResult() {
+      return (this.searchedDepartment.length > 0 || this.searchedUsers.length > 0) && !this.treeLoading;
+    },
+    isSeachResultEmpty() {
+      return this.searchedDepartment.length < 1 && this.searchedUsers.length < 1 && !this.treeLoading;
+    },
+    isShowSelectedText() {
+      return this.hasSelectedDepartments.length > 0 || this.hasSelectedUsers.length > 0;
+    },
+    isShowSearchResult() {
+      return this.isBeingSearch && !this.treeLoading;
+    },
+    isShowMemberTree() {
+      return !this.isBeingSearch && !this.treeLoading;
+    },
+    isDepartSelectedEmpty() {
+      return this.hasSelectedDepartments.length > 0;
+    },
+    isUserSelectedEmpty() {
+      return this.hasSelectedUsers.length > 0;
+    },
+    isSelectedEmpty() {
+      return this.hasSelectedDepartments.length < 1 && this.hasSelectedUsers.length < 1;
+    },
+    style() {
+      return {
+        height: '383px',
+      };
+    },
+  },
+  watch: {
+    show: {
+      handler(value) {
+        this.isShowDialog = !!value;
+        if (this.isShowDialog) {
+          this.infiniteTreeKey = new Date().getTime();
+          const templateList = this.users.map(item => ({
+            username: item.name,
+            id: item.id,
+            display_name: item.display_name,
+            type: item.type,
+          }));
+          this.hasSelectedUsers.splice(0, this.hasSelectedUsers.length, ...templateList);
+          this.hasSelectedDepartments.splice(0, this.hasSelectedDepartments.length, ...this.departments);
+          this.fetchCategories(false, true);
+          this.isConfirmLoading = false;
+        }
+      },
+      immediate: true,
+    },
+    keyword(newVal, oldVal) {
+      this.focusItemIndex = -1;
+      if (!newVal && oldVal) {
+        if (this.isBeingSearch) {
+          this.infiniteTreeKey = new Date().getTime();
+          this.fetchCategories(true, false);
+          this.isBeingSearch = false;
+        }
+      }
+    },
+    apiHost: {
+      handler(value) {
+        this.userApi = `${value}/api/c/compapi/v2/usermanage/fe_list_department_profiles/`;
+        this.departmentApi = `${value}/api/c/compapi/v2/usermanage/fe_list_departments/`;
+        this.userSearchApi = `${value}/api/c/compapi/v2/usermanage/fe_list_users/`;
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    handleKeyup() {
+      // 当搜索的结果数据小于10条时才支持键盘上下键选中
+      if (!this.isBeingSearch || this.searchedResult.length > 10) {
+        return;
+      }
+      const len = this.$refs.searchedResultsRef.renderData.length;
+      this.focusItemIndex--;
+      this.focusItemIndex = this.focusItemIndex < 0 ? -1 : this.focusItemIndex;
+      if (this.focusItemIndex === -1) {
+        this.focusItemIndex = len - 1;
+      }
+    },
 
-            fetchUser (params = {}) {
-                return request.getData(this.userApi, params);
-            },
+    fetchUser(params = {}) {
+      return request.getData(this.userApi, params);
+    },
+    fetchDepartment(params = {}) {
+      return request.getData(this.departmentApi, params);
+    },
 
-            fetchDepartment (params = {}) {
-                return request.getData(this.departmentApi, params);
-            },
+    fetchSearchUser(params = {}) {
+      return request.getData(this.userSearchApi, params);
+    },
 
-            fetchSearchUser (params = {}) {
-                return request.getData(this.userSearchApi, params);
-            },
+    async fetchCategories(isTreeLoading = false, isDialogLoading = false) {
+      this.isLoading = isDialogLoading;
+      this.treeLoading = isTreeLoading;
+      const params = {
+        app_code: 'bk-magicbox',
+        no_page: true,
+        lookup_field: 'level',
+        exact_lookups: 0,
+      };
+      try {
+        const res = await this.fetchDepartment(params);
+        const categories = [...res];
+        categories.forEach((item) => {
+          item.visiable = true;
+          item.showRadio = true;
+          item.expanded = false;
+          item.disabled = false;
+          // item.async = item.has_children
+          item.async = true;
+          item.loading = false;
+          item.type = 'department';
+          item.$id = `${item.id}&department`;
 
-            async fetchCategories (isTreeLoading = false, isDialogLoading = false) {
-                this.isLoading = isDialogLoading;
-                this.treeLoading = isTreeLoading;
-                const params = {
-                    app_code: 'bk-magicbox',
-                    no_page: true,
-                    lookup_field: 'level',
-                    exact_lookups: 0
-                };
-                try {
-                    const res = await this.fetchDepartment(params);
-                    const categories = [...res];
-                    categories.forEach((item, index) => {
-                        item.visiable = true;
-                        item.showRadio = true;
-                        item.expanded = false;
-                        item.disabled = false;
-                        // item.async = item.has_children
-                        item.async = true;
-                        item.loading = false;
-                        item.type = 'department';
-                        item.$id = `${item.id}&department`;
-                        
-                        if (this.hasSelectedDepartments.length > 0) {
-                            item.is_selected = this.hasSelectedDepartments.map(v => v.id).includes(item.id);
-                        } else {
-                            item.is_selected = false;
-                        }
+          if (this.hasSelectedDepartments.length > 0) {
+            item.is_selected = this.hasSelectedDepartments.map(v => v.id).includes(item.id);
+          } else {
+            item.is_selected = false;
+          }
 
-                        if (this.defaultDepartment.length > 0 && this.defaultDepartment.includes(item.id)) {
-                            item.is_selected = true;
-                        }
-                    });
-                    this.treeList.splice(0, this.treeList.length, ...categories);
-                } catch (error) {
-                    console.error(error);
-                    throw new Error(error);
-                } finally {
-                    this.treeLoading = false;
-                    this.isLoading = false;
-                }
-            },
+          if (this.defaultDepartment.length > 0 && this.defaultDepartment.includes(item.id)) {
+            item.is_selected = true;
+          }
+        });
+        this.treeList.splice(0, this.treeList.length, ...categories);
+      } catch (error) {
+        console.error(error);
+        throw new Error(error);
+      } finally {
+        this.treeLoading = false;
+        this.isLoading = false;
+      }
+    },
 
-            handleKeydown () {
-                // 当搜索的结果数据小于10条时才支持键盘上下键选中
-                if (!this.isBeingSearch || this.searchedResult.length > 10) {
-                    return;
-                }
-                const len = this.$refs.searchedResultsRef.renderData.length;
-                this.focusItemIndex++;
-                this.focusItemIndex = this.focusItemIndex > len - 1
-                    ? len
-                    : this.focusItemIndex;
-                if (this.focusItemIndex === len) {
-                    this.focusItemIndex = 0;
-                }
-            },
+    handleKeydown() {
+      // 当搜索的结果数据小于10条时才支持键盘上下键选中
+      if (!this.isBeingSearch || this.searchedResult.length > 10) {
+        return;
+      }
+      const len = this.$refs.searchedResultsRef.renderData.length;
+      this.focusItemIndex++;
+      this.focusItemIndex = this.focusItemIndex > len - 1
+        ? len
+        : this.focusItemIndex;
+      if (this.focusItemIndex === len) {
+        this.focusItemIndex = 0;
+      }
+    },
 
-            handleOnSelected (newVal, node) {
-                if (newVal) {
-                    if (node.type === 'user') {
-                        this.hasSelectedUsers.push(node);
-                    } else {
-                        this.hasSelectedDepartments.push(node);
-                    }
-                } else {
-                    if (node.type === 'user') {
-                        this.hasSelectedUsers = [...this.hasSelectedUsers.filter(item => item.id !== node.id)];
-                    } else {
-                        this.hasSelectedDepartments = [...this.hasSelectedDepartments.filter(item => item.id !== node.id)];
-                    }
-                }
-            },
+    handleOnSelected(newVal, node) {
+      if (newVal) {
+        if (node.type === 'user') {
+          this.hasSelectedUsers.push(node);
+        } else {
+          this.hasSelectedDepartments.push(node);
+        }
+      } else {
+        if (node.type === 'user') {
+          this.hasSelectedUsers = [...this.hasSelectedUsers.filter(item => item.id !== node.id)];
+        } else {
+          this.hasSelectedDepartments = [...this.hasSelectedDepartments.filter(item => item.id !== node.id)];
+        }
+      }
+    },
 
-            handleDeleteAll () {
-                if (this.searchedUsers.length) {
-                    this.searchedUsers.forEach(search => {
-                        search.is_selected = false;
-                    });
-                }
-                if (this.searchedDepartment.length) {
-                    this.searchedDepartment.forEach(organ => {
-                        organ.is_selected = false;
-                    });
-                }
-                this.hasSelectedUsers.splice(0, this.hasSelectedUsers.length, ...[]);
-                this.hasSelectedDepartments.splice(0, this.hasSelectedDepartments.length, ...[]);
-                this.$refs.userTreeRef && this.$refs.userTreeRef.clearAllIsSelectedStatus();
-            },
+    handleDeleteAll() {
+      if (this.searchedUsers.length) {
+        this.searchedUsers.forEach((search) => {
+          search.is_selected = false;
+        });
+      }
+      if (this.searchedDepartment.length) {
+        this.searchedDepartment.forEach((organ) => {
+          organ.is_selected = false;
+        });
+      }
+      this.hasSelectedUsers.splice(0, this.hasSelectedUsers.length, ...[]);
+      this.hasSelectedDepartments.splice(0, this.hasSelectedDepartments.length, ...[]);
+      this.$refs.userTreeRef && this.$refs.userTreeRef.clearAllIsSelectedStatus();
+    },
 
-            handleConditionSelcted () {
-                this.handleSearch();
-            },
+    handleConditionSelcted() {
+      this.handleSearch();
+    },
 
-            async handleSearch () {
-                if (this.keyword === '' || this.treeLoading) {
-                    return;
-                }
+    async handleSearch() {
+      if (this.keyword === '' || this.treeLoading) {
+        return;
+      }
 
-                if (this.focusItemIndex !== -1) {
-                    this.$refs.searchedResultsRef.setCheckStatusByIndex();
-                    return;
-                }
+      if (this.focusItemIndex !== -1) {
+        this.$refs.searchedResultsRef.setCheckStatusByIndex();
+        return;
+      }
 
-                this.treeList.splice(0, this.treeList.length, ...[]);
-                this.isBeingSearch = true;
-                this.treeLoading = true;
-                this.searchedResult.splice(0, this.searchedResult.length, ...[]);
-                this.searchedDepartment.splice(0, this.searchedDepartment.length, ...[]);
-                this.searchedUsers.splice(0, this.searchedUsers.length, ...[]);
-                const departIds = [...this.hasSelectedDepartments.map(item => item.id)];
-                const userIds = [...this.hasSelectedUsers.map(item => item.id)];
-                const params = {
-                    app_code: 'bk-magicbox',
-                    no_page: true
-                };
-                const requestDepartParams = {
-                    ...params,
-                    lookup_field: 'name'
-                };
-                const requestUserParams = {
-                    ...params,
-                    lookup_field: 'username'
-                };
+      this.treeList.splice(0, this.treeList.length, ...[]);
+      this.isBeingSearch = true;
+      this.treeLoading = true;
+      this.searchedResult.splice(0, this.searchedResult.length, ...[]);
+      this.searchedDepartment.splice(0, this.searchedDepartment.length, ...[]);
+      this.searchedUsers.splice(0, this.searchedUsers.length, ...[]);
+      const departIds = [...this.hasSelectedDepartments.map(item => item.id)];
+      const userIds = [...this.hasSelectedUsers.map(item => item.id)];
+      const params = {
+        app_code: 'bk-magicbox',
+        no_page: true,
+      };
+      const requestDepartParams = {
+        ...params,
+        lookup_field: 'name',
+      };
+      const requestUserParams = {
+        ...params,
+        lookup_field: 'username',
+      };
 
-                if (this.searchConditionValue === 'exact') {
-                    requestDepartParams.exact_lookups = this.keyword;
-                    requestUserParams.exact_lookups = this.keyword;
-                } else {
-                    requestDepartParams.fuzzy_lookups = this.keyword;
-                    requestUserParams.fuzzy_lookups = this.keyword;
-                }
+      if (this.searchConditionValue === 'exact') {
+        requestDepartParams.exact_lookups = this.keyword;
+        requestUserParams.exact_lookups = this.keyword;
+      } else {
+        requestDepartParams.fuzzy_lookups = this.keyword;
+        requestUserParams.fuzzy_lookups = this.keyword;
+      }
 
-                try {
-                    const res = await Promise.all([this.fetchDepartment(requestDepartParams), this.fetchSearchUser(requestUserParams)]);
-                    const departments = unique(res[0], 'id');
-                    const users = unique(res[1], 'id');
-                    departments.forEach(depart => {
-                        depart.showRadio = true;
-                        depart.type = 'department';
-                        depart.$id = `${depart.id}&department`;
-                        if (departIds.length && departIds.includes(depart.id)) {
-                            this.$set(depart, 'is_selected', true);
-                        } else {
-                            this.$set(depart, 'is_selected', false);
-                        }
-                        if (this.defaultDepartment.length && this.defaultDepartment.includes(depart.id)) {
-                            this.$set(depart, 'is_selected', true);
-                            this.$set(depart, 'disabled', false);
-                        }
-                    });
-                    this.searchedDepartment.splice(0, this.searchedDepartment.length, ...departments);
-                    users.forEach(user => {
-                        user.showRadio = true;
-                        user.type = 'user';
-                        user.$id = `${user.id}&user`;
-                        if (userIds.length && userIds.includes(user.id)) {
-                            this.$set(user, 'is_selected', true);
-                        } else {
-                            this.$set(user, 'is_selected', false);
-                        }
-                        if (this.defaultUser.length && this.defaultUser.includes(user.id)) {
-                            this.$set(user, 'is_selected', true);
-                            this.$set(user, 'disabled', false);
-                        }
-                    });
-                    this.searchedUsers.splice(0, this.searchedUsers.length, ...users);
-                    this.searchedResult.splice(0, this.searchedResult.length, ...this.searchedDepartment.concat(this.searchedUsers));
-                } catch (error) {
-                    console.error(error);
-                    throw new Error(error);
-                } finally {
-                    this.treeLoading = false;
-                }
-            },
+      try {
+        const res = await Promise.all([this.fetchDepartment(requestDepartParams), this.fetchSearchUser(requestUserParams)]);
+        const departments = unique(res[0], 'id');
+        const users = unique(res[1], 'id');
+        departments.forEach((depart) => {
+          depart.showRadio = true;
+          depart.type = 'department';
+          depart.$id = `${depart.id}&department`;
+          if (departIds.length && departIds.includes(depart.id)) {
+            this.$set(depart, 'is_selected', true);
+          } else {
+            this.$set(depart, 'is_selected', false);
+          }
+          if (this.defaultDepartment.length && this.defaultDepartment.includes(depart.id)) {
+            this.$set(depart, 'is_selected', true);
+            this.$set(depart, 'disabled', false);
+          }
+        });
+        this.searchedDepartment.splice(0, this.searchedDepartment.length, ...departments);
+        users.forEach((user) => {
+          user.showRadio = true;
+          user.type = 'user';
+          user.$id = `${user.id}&user`;
+          if (userIds.length && userIds.includes(user.id)) {
+            this.$set(user, 'is_selected', true);
+          } else {
+            this.$set(user, 'is_selected', false);
+          }
+          if (this.defaultUser.length && this.defaultUser.includes(user.id)) {
+            this.$set(user, 'is_selected', true);
+            this.$set(user, 'disabled', false);
+          }
+        });
+        this.searchedUsers.splice(0, this.searchedUsers.length, ...users);
+        this.searchedResult.splice(0, this.searchedResult.length, ...this.searchedDepartment.concat(this.searchedUsers));
+      } catch (error) {
+        console.error(error);
+        throw new Error(error);
+      } finally {
+        this.treeLoading = false;
+      }
+    },
 
-            async handleRemoteLoadNode (payload) {
-                payload.loading = true;
-                const params = {
-                    app_code: 'bk-magicbox',
-                    no_page: true
-                };
-                const requestDepartParams = {
-                    ...params,
-                    lookup_field: 'parent',
-                    exact_lookups: payload.id
-                };
-                const requestUserParams = {
-                    ...params,
-                    lookup_value: payload.id
-                };
+    async handleRemoteLoadNode(payload) {
+      payload.loading = true;
+      const params = {
+        app_code: 'bk-magicbox',
+        no_page: true,
+      };
+      const requestDepartParams = {
+        ...params,
+        lookup_field: 'parent',
+        exact_lookups: payload.id,
+      };
+      const requestUserParams = {
+        ...params,
+        lookup_value: payload.id,
+      };
 
-                try {
-                    const res = await Promise.all([this.fetchDepartment(requestDepartParams), this.fetchUser(requestUserParams)]);
-                    const categories = unique(res[0], 'id');
-                    const members = unique(res[1], 'id');
-                    const curIndex = this.treeList.findIndex(item => item.id === payload.id);
-                    if (curIndex === -1) {
-                        return;
-                    }
-                    const treeList = [];
-                    treeList.splice(0, 0, ...this.treeList);
-                    categories.forEach((child, childIndex) => {
-                        child.visiable = true;
-                        child.loading = false;
-                        child.showRadio = true;
-                        child.expanded = false;
-                        child.disabled = false;
-                        child.showCount = true;
-                        child.async = child.has_children;
-                        child.type = 'department';
-                        child.$id = `${child.id}&department`;
+      try {
+        const res = await Promise.all([this.fetchDepartment(requestDepartParams), this.fetchUser(requestUserParams)]);
+        const categories = unique(res[0], 'id');
+        const members = unique(res[1], 'id');
+        const curIndex = this.treeList.findIndex(item => item.id === payload.id);
+        if (curIndex === -1) {
+          return;
+        }
+        const treeList = [];
+        treeList.splice(0, 0, ...this.treeList);
+        categories.forEach((child, childIndex) => {
+          child.visiable = true;
+          child.loading = false;
+          child.showRadio = true;
+          child.expanded = false;
+          child.disabled = false;
+          child.showCount = true;
+          child.async = child.has_children;
+          child.type = 'department';
+          child.$id = `${child.id}&department`;
 
-                        if (this.hasSelectedDepartments.length > 0) {
-                            child.is_selected = this.hasSelectedDepartments.map(item => item.id).includes(child.id);
-                        } else {
-                            child.is_selected = false;
-                        }
+          if (this.hasSelectedDepartments.length > 0) {
+            child.is_selected = this.hasSelectedDepartments.map(item => item.id).includes(child.id);
+          } else {
+            child.is_selected = false;
+          }
 
-                        if (this.defaultDepartment.length > 0 && this.defaultDepartment.includes(child.id)) {
-                            child.is_selected = true;
-                            child.disabled = false;
-                        }
-                    });
+          if (this.defaultDepartment.length > 0 && this.defaultDepartment.includes(child.id)) {
+            child.is_selected = true;
+            child.disabled = false;
+          }
+        });
 
-                    members.forEach(child => {
-                        child.visiable = payload.expanded;
-                        child.level = payload.level + 1;
-                        child.loading = false;
-                        child.showRadio = true;
-                        child.expanded = false;
-                        child.disabled = false;
-                        child.type = 'user';
-                        child.async = false;
-                        child.parent = payload.id;
-                        child.$id = `${child.id}&user`;
+        members.forEach((child) => {
+          child.visiable = payload.expanded;
+          child.level = payload.level + 1;
+          child.loading = false;
+          child.showRadio = true;
+          child.expanded = false;
+          child.disabled = false;
+          child.type = 'user';
+          child.async = false;
+          child.parent = payload.id;
+          child.$id = `${child.id}&user`;
 
-                        if (this.hasSelectedUsers.length > 0) {
-                            child.is_selected = this.hasSelectedUsers.map(item => item.id).includes(child.id);
-                        } else {
-                            child.is_selected = false;
-                        }
-                        const existSelectedNode = this.treeList.find(item => item.is_selected && item.id === child.id && item.type === 'user');
-                        if (existSelectedNode) {
-                            child.is_selected = true;
-                            child.disabled = true;
-                        }
+          if (this.hasSelectedUsers.length > 0) {
+            child.is_selected = this.hasSelectedUsers.map(item => item.id).includes(child.id);
+          } else {
+            child.is_selected = false;
+          }
+          const existSelectedNode = this.treeList.find(item => item.is_selected && item.id === child.id && item.type === 'user');
+          if (existSelectedNode) {
+            child.is_selected = true;
+            child.disabled = true;
+          }
 
-                        if (this.defaultUser.length && this.defaultUser.includes(child.id)) {
-                            child.is_selected = true;
-                            child.disabled = false;
-                        }
-                    });
+          if (this.defaultUser.length && this.defaultUser.includes(child.id)) {
+            child.is_selected = true;
+            child.disabled = false;
+          }
+        });
 
-                    const loadChildren = categories.concat(members);
-                    treeList.splice(curIndex + 1, 0, ...loadChildren);
-                    this.treeList.splice(0, this.treeList.length, ...treeList);
-                    if (!payload.children) {
-                        payload.children = [];
-                    }
-                    payload.children.splice(0, payload.children.length, ...loadChildren);
-                } catch (error) {
-                    console.error(error);
-                    throw new Error(error);
-                } finally {
-                    setTimeout(() => {
-                        payload.loading = false;
-                    }, 300);
-                }
-            },
+        const loadChildren = categories.concat(members);
+        treeList.splice(curIndex + 1, 0, ...loadChildren);
+        this.treeList.splice(0, this.treeList.length, ...treeList);
+        if (!payload.children) {
+          payload.children = [];
+        }
+        payload.children.splice(0, payload.children.length, ...loadChildren);
+      } catch (error) {
+        console.error(error);
+        throw new Error(error);
+      } finally {
+        setTimeout(() => {
+          payload.loading = false;
+        }, 300);
+      }
+    },
 
-            handleDelete (item, type) {
-                if (this.isBeingSearch) {
-                    if (this.searchedUsers.length) {
-                        this.searchedUsers.forEach(search => {
-                            if (search.id === item.id) {
-                                search.is_selected = false;
-                            }
-                        });
-                    }
-                    if (this.searchedDepartment.length) {
-                        this.searchedDepartment.forEach(organ => {
-                            if (organ.id === item.id) {
-                                organ.is_selected = false;
-                            }
-                        });
-                    }
-                } else {
-                    this.$refs.userTreeRef.setSingleSelectedStatus(item.id, false);
-                }
-                if (type === 'user') {
-                    this.hasSelectedUsers = [...this.hasSelectedUsers.filter(user => user.id !== item.id)];
-                } else {
-                    this.hasSelectedDepartments = [...this.hasSelectedDepartments.filter(organ => organ.id !== item.id)];
-                }
-            },
+    handleDelete(item, type) {
+      if (this.isBeingSearch) {
+        if (this.searchedUsers.length) {
+          this.searchedUsers.forEach((search) => {
+            if (search.id === item.id) {
+              search.is_selected = false;
+            }
+          });
+        }
+        if (this.searchedDepartment.length) {
+          this.searchedDepartment.forEach((organ) => {
+            if (organ.id === item.id) {
+              organ.is_selected = false;
+            }
+          });
+        }
+      } else {
+        this.$refs.userTreeRef.setSingleSelectedStatus(item.id, false);
+      }
+      if (type === 'user') {
+        this.hasSelectedUsers = [...this.hasSelectedUsers.filter(user => user.id !== item.id)];
+      } else {
+        this.hasSelectedDepartments = [...this.hasSelectedDepartments.filter(organ => organ.id !== item.id)];
+      }
+    },
 
-            async handleSearchResultSelected (newVal, oldVal, localVal, item) {
-                if (item.type === 'user') {
-                    this.handleSearchUserSelected(newVal, item);
-                } else {
-                    if (newVal) {
-                        this.hasSelectedDepartments.push(item);
-                    } else {
-                        this.hasSelectedDepartments = this.hasSelectedDepartments.filter(organ => organ.id !== item.id);
-                    }
-                }
-            },
+    async handleSearchResultSelected(newVal, oldVal, localVal, item) {
+      if (item.type === 'user') {
+        this.handleSearchUserSelected(newVal, item);
+      } else {
+        if (newVal) {
+          this.hasSelectedDepartments.push(item);
+        } else {
+          this.hasSelectedDepartments = this.hasSelectedDepartments.filter(organ => organ.id !== item.id);
+        }
+      }
+    },
 
-            handleSearchUserSelected (newVal, item) {
-                if (newVal) {
-                    this.hasSelectedUsers.push(item);
-                } else {
-                    this.hasSelectedUsers = this.hasSelectedUsers.filter(user => user.id !== item.id);
-                }
-            },
+    handleSearchUserSelected(newVal, item) {
+      if (newVal) {
+        this.hasSelectedUsers.push(item);
+      } else {
+        this.hasSelectedUsers = this.hasSelectedUsers.filter(user => user.id !== item.id);
+      }
+    },
 
-            handleAfterLeave () {
-                this.keyword = '';
-                this.treeLoading = false;
-                this.isBeingSearch = false;
-                this.hasSelectedUsers.splice(0, this.hasSelectedUsers.length, ...[]);
-                this.hasSelectedDepartments.splice(0, this.hasSelectedDepartments.length, ...[]);
-                this.searchedDepartment.splice(0, this.searchedDepartment.length, ...[]);
-                this.searchedUsers.splice(0, this.searchedUsers.length, ...[]);
-                this.searchedResult.splice(0, this.searchedResult.length, ...[]);
-                this.treeList.splice(0, this.treeList.length, ...[]);
-                this.focusItemIndex = -1;
-                this.$refs.userTreeRef && this.$refs.userTreeRef.clearAllIsSelectedStatus();
-                this.searchConditionValue = 'fuzzy';
-                this.$emit('update:show', false);
-                this.$emit('on-after-leave');
-            },
+    handleAfterLeave() {
+      this.keyword = '';
+      this.treeLoading = false;
+      this.isBeingSearch = false;
+      this.hasSelectedUsers.splice(0, this.hasSelectedUsers.length, ...[]);
+      this.hasSelectedDepartments.splice(0, this.hasSelectedDepartments.length, ...[]);
+      this.searchedDepartment.splice(0, this.searchedDepartment.length, ...[]);
+      this.searchedUsers.splice(0, this.searchedUsers.length, ...[]);
+      this.searchedResult.splice(0, this.searchedResult.length, ...[]);
+      this.treeList.splice(0, this.treeList.length, ...[]);
+      this.focusItemIndex = -1;
+      this.$refs.userTreeRef && this.$refs.userTreeRef.clearAllIsSelectedStatus();
+      this.searchConditionValue = 'fuzzy';
+      this.$emit('update:show', false);
+      this.$emit('on-after-leave');
+    },
 
-            handleCancel () {
-                this.$emit('update:show', false);
-                this.$emit('cancel');
-            },
+    handleCancel() {
+      this.$emit('update:show', false);
+      this.$emit('cancel');
+    },
 
-            handleSave () {
-                const tempList = [];
-                this.hasSelectedUsers.forEach(item => {
-                    tempList.push({
-                        name: item.username,
-                        display_name: item.display_name,
-                        id: item.id,
-                        type: 'user'
-                    });
-                });
+    handleSave() {
+      const tempList = [];
+      this.hasSelectedUsers.forEach((item) => {
+        tempList.push({
+          name: item.username,
+          display_name: item.display_name,
+          id: item.id,
+          type: 'user',
+        });
+      });
 
-                this.hasSelectedDepartments.forEach(item => {
-                    tempList.push({
-                        name: item.name,
-                        id: item.id,
-                        type: 'department'
-                    });
-                });
-                this.$emit('update:show', false);
-                console.warn(tempList);
-                this.$emit('sumbit', tempList);
-            }
-        }
-    };
+      this.hasSelectedDepartments.forEach((item) => {
+        tempList.push({
+          name: item.name,
+          id: item.id,
+          type: 'department',
+        });
+      });
+      if (!this.customClose) {
+        this.$emit('update:show', false);
+      } else {
+        // 外界控制关闭弹窗时机
+        this.isConfirmLoading = true;
+      }
+      console.warn(tempList);
+      this.$emit('sumbit', tempList);
+    },
+  },
+};
 </script>
 <style lang='scss'>
     @import './index.scss';
diff --git a/webfe/package_vue/src/language/lang/en.js b/webfe/package_vue/src/language/lang/en.js
index d4740d37a9..68a350f008 100644
--- a/webfe/package_vue/src/language/lang/en.js
+++ b/webfe/package_vue/src/language/lang/en.js
@@ -2601,4 +2601,32 @@ export default {
   测试报告: 'Test report',
   终止测试: 'Terminate Test',
   授权期限: 'Authorization Period',
+  迁移中的应用不支持切换扩缩容方案: 'Applications undergoing migration do not support switching scaling plans',
+  实例数: 'Number of Instances',
+  迁移为云原生应用: 'Migrate to Cloud Native Application',
+  迁移信息: 'Migration Information',
+  备份应用配置: 'Backup Application Configuration',
+  变更应用类型: 'Change Application Type',
+  配置部署集群: 'Configure Deployment Cluster',
+  迁移构建配置: 'Migrate Build Configuration',
+  查看迁移文档: 'View Migration Documentation',
+  迁移风险: 'Migration Risk',
+  部署应用并验证功能: 'Deploy Applications and Verify Functionality',
+  回退: 'Rollback',
+  回退应用: 'Rollback Application',
+  回退为普通应用中: 'Rolling Back to Regular Application',
+  '回退完成后到“应用引擎-进程管理”页面检查每个进程状态': 'Check the status of each process on the "Application Engine - Process Management" page after rollback is complete',
+  回退应用失败: 'Application Rollback Failed',
+  失败原因: 'Failure Reason',
+  确认回退应用: 'Confirm Application Rollback',
+  '回退后会将当前应用回退到普通应用的状态，并撤销所有云原生应用部署而分配的资源': 'After rollback, the current application will be reverted to the state of a regular application, and all resources allocated for cloud-native application deployment will be revoked',
+  '如 {l} 变更为：{c}': 'If {l} is changed to: {c}',
+  迁移进度: 'Migration Progress',
+  点击可迁移为云原生应用: 'Click to Migrate to Cloud Native Application',
+  重新部署应用下每个模块: 'Redeploy Each Module Under the Application',
+  '点击“确认迁移”后，会停掉应用迁移前的进程，并将桌面的访问入口切换为新的访问地址。': 'After clicking "Confirm Migration", the pre-migration processes will be stopped, and the desktop access entry will switch to the new access address.',
+  '如果有 Celery 等后台任务，同时部署(普通和云原生进程都存在时)可能会导致任务抢占，请确认影响。': 'If there are background tasks like Celery, simultaneous deployment (when both regular and cloud-native processes exist) may cause task preemption. Please confirm the impact.',
+  查看迁移进度: 'View Migration Progress',
+  '已选择 <span>{d}</span> 个组织，<span class="s2">{s}</span> 个用户': 'Selected <span>{d}</span> organizations and <span class="s2">{s}</span> users',
+  '仅影响 蓝鲸桌面 上应用的可见范围': 'Only affects the visibility of applications on the BK Desktop',
 };
diff --git a/webfe/package_vue/src/language/lang/zh.js b/webfe/package_vue/src/language/lang/zh.js
index f1da1802de..4ec6dfe4f9 100644
--- a/webfe/package_vue/src/language/lang/zh.js
+++ b/webfe/package_vue/src/language/lang/zh.js
@@ -2740,4 +2740,33 @@ export default {
   测试报告: '测试报告',
   终止测试: '终止测试',
   授权期限: '授权期限',
+  迁移中的应用不支持切换扩缩容方案: '迁移中的应用不支持切换扩缩容方案',
+  实例数: '实例数',
+  迁移为云原生应用: '迁移为云原生应用',
+  迁移信息: '迁移信息',
+  迁移为云原生应用: '迁移为云原生应用',
+  备份应用配置: '备份应用配置',
+  变更应用类型: '变更应用类型',
+  配置部署集群: '配置部署集群',
+  迁移构建配置: '迁移构建配置',
+  查看迁移文档: '查看迁移文档',
+  迁移风险: '迁移风险',
+  部署应用并验证功能: '部署应用并验证功能',
+  回退: '回退',
+  回退应用: '回退应用',
+  回退为普通应用中: '回退为普通应用中',
+  '回退完成后到“应用引擎-进程管理”页面检查每个进程状态': '回退完成后到“应用引擎-进程管理”页面检查每个进程状态',
+  回退应用失败: '回退应用失败',
+  失败原因: '失败原因',
+  确认回退应用: '确认回退应用',
+  '回退后会将当前应用回退到普通应用的状态，并撤销所有云原生应用部署而分配的资源': '回退后会将当前应用回退到普通应用的状态，并撤销所有云原生应用部署而分配的资源',
+  '如 {l} 变更为：{c}': '如 {l} 变更为：{c}',
+  迁移进度: '迁移进度',
+  点击可迁移为云原生应用: '点击可迁移为云原生应用',
+  重新部署应用下每个模块: '重新部署应用下每个模块',
+  '点击“确认迁移”后，会停掉应用迁移前的进程，并将桌面的访问入口切换为新的访问地址。': '点击“确认迁移”后，会停掉应用迁移前的进程，并将桌面的访问入口切换为新的访问地址。',
+  '如果有 Celery 等后台任务，同时部署(普通和云原生进程都存在时)可能会导致任务抢占，请确认影响。': '如果有 Celery 等后台任务，同时部署(普通和云原生进程都存在时)可能会导致任务抢占，请确认影响。',
+  查看迁移进度: '查看迁移进度',
+  '已选择 <span>{d}</span> 个组织，<span class="s2">{s}</span> 个用户': '已选择 <span>{d}</span> 个组织，<span class="s2">{s}</span> 个用户',
+  '仅影响 蓝鲸桌面 上应用的可见范围': '仅影响 蓝鲸桌面 上应用的可见范围',
 };
diff --git a/webfe/package_vue/src/views/dev-center/app/market/market-manager.vue b/webfe/package_vue/src/views/dev-center/app/market/market-manager.vue
index ec397a2309..f7826686ca 100644
--- a/webfe/package_vue/src/views/dev-center/app/market/market-manager.vue
+++ b/webfe/package_vue/src/views/dev-center/app/market/market-manager.vue
@@ -3,7 +3,7 @@
     :is-loading="isDataLoading"
     placeholder="market-visit-loading"
   >
-    <section v-show="!isDataLoading" class="market-manager">
+    <section class="market-manager">
       <div class="market-info mb25 shadow-card-style">
         <div class="flex-row justify-content-between align-items-center">
           <div class="market-info-title-wrapper">
@@ -134,7 +134,7 @@
             </bk-form-item>
 
             <bk-form-item
-              v-if="curAppInfo.feature.MARKET_VISIBILITY"
+              v-if="marketVisibility && isNewlyCreated"
               :label="$t('可见范围：')"
               :property="'name'"
             >
@@ -358,7 +358,7 @@
       </div>
 
       <user-selector-dialog
-        v-if="curAppInfo.feature.MARKET_VISIBILITY"
+        v-if="marketVisibility && isNewlyCreated"
         :show.sync="isShow"
         :users="users"
         :departments="departments"
@@ -366,6 +366,13 @@
         @sumbit="handleSubmit"
       />
     </section>
+
+    <!-- 可见范围 -->
+    <visible-range
+      v-if="marketVisibility && !isNewlyCreated"
+      :data="baseInfo"
+      @get-app-info="handleGetAppInfo"
+    />
   </paas-content-loader>
 </template>
 
@@ -373,6 +380,7 @@
 import user from '@/components/user';
 import userSelectorDialog from '@/components/user-selector';
 import RenderMemberItem from './render-member-display';
+import visibleRange from './visible-range';
 import { PLATFORM_CONFIG } from '../../../../../static/json/paas_static';
 
 export default {
@@ -380,6 +388,7 @@ export default {
     user,
     userSelectorDialog,
     RenderMemberItem,
+    visibleRange,
   },
   mixins: [appBaseMixin],
   data() {
@@ -498,6 +507,12 @@ export default {
     isSmartApp() {
       return this.curAppInfo.application?.is_smart_app;
     },
+    marketVisibility() {
+      return this.curAppInfo.feature.MARKET_VISIBILITY;
+    },
+    isNewlyCreated() {
+      return this.curAppInfo.product === null;
+    },
   },
   watch: {
     '$route'() {
@@ -512,8 +527,8 @@ export default {
   },
   methods: {
     /**
-             * 初始化入口
-             */
+     * 初始化入口
+     */
     async init() {
       this.initAppMarketInfo();
       this.getBusinessList();
@@ -549,8 +564,8 @@ export default {
     },
 
     /**
-             * 获取业务列表
-             */
+     * 获取业务列表
+     */
     async getBusinessList() {
       try {
         const res = await this.$store.dispatch('market/getBusinessList');
@@ -638,15 +653,15 @@ export default {
     },
 
     /**
-             * 获取应用的市场基础信息
-             *
-             * appStatus:
-             * offlined: 已经下架
-             * deploy: 没有部署到生产环境
-             * reg: 还没注册
-             */
-    async initAppMarketInfo() {
-      this.isDataLoading = true;
+     * 获取应用的市场基础信息
+     *
+     * appStatus:
+     * offlined: 已经下架
+     * deploy: 没有部署到生产环境
+     * reg: 还没注册
+     */
+    async initAppMarketInfo(loading = true) {
+      this.isDataLoading = loading;
       try {
         const res = await this.$store.dispatch('market/getAppBaseInfo', this.appCode);
         const { product } = res;
@@ -721,8 +736,8 @@ export default {
     },
 
     /**
-             * 针对接口数据处理，以适应前端需要
-             */
+     * 针对接口数据处理，以适应前端需要
+     */
     formatMarketInfo() {
       this.baseInfo.contactArr = this.baseInfo.contact.split('; ');
       this.baseInfo.resizableKey = this.baseInfo.resizable ? 'able' : 'disable';
@@ -731,8 +746,8 @@ export default {
     },
 
     /**
-             * 提交基础信息数据
-             */
+     * 提交基础信息数据
+     */
     submitMarketInfo() {
       if (this.isSmartApp) {
         this.saveMarketInfo();
@@ -744,8 +759,8 @@ export default {
     },
 
     /**
-             * 保存应用市场信息
-             */
+     * 保存应用市场信息
+     */
     async saveMarketInfo() {
       if (this.isInfoSaving) return;
 
@@ -821,8 +836,8 @@ export default {
     },
 
     /**
-             * 切换保打开方式
-             */
+     * 切换保打开方式
+     */
     changeDesktop() {
       this.baseInfo.open_mode = 'desktop';
     },
@@ -830,6 +845,10 @@ export default {
     changeNewtab() {
       this.baseInfo.open_mode = 'new_tab';
     },
+
+    handleGetAppInfo() {
+      this.initAppMarketInfo(false);
+    },
   },
 };
 </script>
diff --git a/webfe/package_vue/src/views/dev-center/app/market/render-member-list.vue b/webfe/package_vue/src/views/dev-center/app/market/render-member-list.vue
new file mode 100644
index 0000000000..1565a056a4
--- /dev/null
+++ b/webfe/package_vue/src/views/dev-center/app/market/render-member-list.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="render-member-list-wrapper">
+    <div class="content">
+      <div
+        v-for="(item, index) in data"
+        :key="index"
+        class="member-item"
+        :title="item.name"
+      >
+        <span class="left-icon">
+          <i
+            v-if="type === 'user'"
+            class="paasng-icon icon paasng-user-shape"
+          />
+          <img
+            v-else
+            class="folder-icon"
+            src="/static/images/file-close.svg"
+            alt=""
+          />
+        </span>
+        <span class="member-name">
+          {{ item.name }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'RenderMemberList',
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    type: {
+      type: String,
+      default: 'user',
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.render-member-list-wrapper {
+  color: #63656e;
+  .content {
+    .icon {
+      font-size: 16px;
+      display: inline-block;
+      color: #a3c5fd;
+      vertical-align: middle;
+    }
+    .member-name {
+      margin-left: 10px;
+      font-size: 14px;
+      display: inline-block;
+      vertical-align: middle;
+    }
+    .folder-icon {
+      width: 16px;
+      vertical-align: middle;
+    }
+    .member-item {
+      height: 36px;
+      line-height: 36px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+
+      .left-icon {
+        display: inline-block;
+        width: 18px;
+      }
+    }
+  }
+}
+</style>
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
new file mode 100644
index 0000000000..ceb56b5e98
--- /dev/null
+++ b/webfe/package_vue/src/views/dev-center/app/market/visible-range.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="visible-range card-style">
+    <section class="main">
+      <div>
+        <span
+          class="title"
+          v-bk-tooltips="{ content: $t('仅影响 蓝鲸桌面 上应用的可见范围') }"
+          v-dashed
+        >
+          {{ $t('可见范围') }}
+        </span>
+      </div>
+      <div class="content">
+        <div class="top-wrapper">
+          <p
+            class="info"
+            v-html="infoMsg"
+          ></p>
+          <div
+            class="edit-container"
+            @click="handleOpenMemberDialog"
+          >
+            <i class="paasng-icon paasng-edit-2 pl10" />
+            {{ $t('编辑') }}
+          </div>
+        </div>
+        <!-- 组织/用户 -->
+        <div
+          class="render-member-wrapper"
+          v-if="departments.length || users.length"
+        >
+          <render-member-list
+            v-if="departments.length > 0"
+            type="department"
+            :data="departments"
+          />
+          <render-member-list
+            v-if="users.length > 0"
+            :data="users"
+          />
+        </div>
+      </div>
+    </section>
+
+    <user-selector-dialog
+      ref="userSelectorDialogRef"
+      :show.sync="isShow"
+      :users="users"
+      :departments="departments"
+      :api-host="apiHost"
+      :custom-close="true"
+      @sumbit="handleSubmit"
+    />
+  </div>
+</template>
+
+<script>
+import userSelectorDialog from '@/components/user-selector';
+import RenderMemberList from './render-member-list';
+import { cloneDeep } from 'lodash';
+import { PLATFORM_CONFIG } from '../../../../../static/json/paas_static';
+export default {
+  name: 'AppVisibleRange',
+  components: {
+    userSelectorDialog,
+    RenderMemberList,
+  },
+  props: {
+    data: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      platFormConfig: PLATFORM_CONFIG,
+      apiHost: window.BK_COMPONENT_API_URL,
+      baseInfo: {},
+      isShow: false,
+    };
+  },
+  computed: {
+    appCode() {
+      return this.$route.params.id;
+    },
+    users() {
+      return (this.baseInfo.visiable_labels || []).filter(item => item.type === 'user');
+    },
+    departments() {
+      return (this.baseInfo.visiable_labels || []).filter(item => item.type === 'department');
+    },
+    infoMsg() {
+      return this.$t('已选择 <span>{d}</span> 个组织，<span class="s2">{s}</span> 个用户', {
+        d: this.departments.length,
+        s: this.users.length,
+      });
+    },
+  },
+  watch: {
+    data: {
+      handler(newVal) {
+        this.baseInfo = cloneDeep(newVal);
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    handleOpenMemberDialog() {
+      this.isShow = true;
+    },
+    handleSubmit(payload) {
+      this.baseInfo.visiable_labels = payload;
+      this.saveVisibleRange();
+    },
+    // 保存可见范围
+    async saveVisibleRange() {
+      try {
+        await this.$store.dispatch('market/updateMarketInfo', {
+          appCode: this.appCode,
+          data: {
+            visiable_labels: this.baseInfo.visiable_labels,
+          },
+        });
+        this.$paasMessage({
+          theme: 'success',
+          message: this.$t('保存成功！'),
+        });
+        this.$refs.userSelectorDialogRef?.handleCancel();
+        this.$emit('get-app-info');
+      } catch (e) {
+        this.$paasMessage({
+          theme: 'error',
+          message: e.detail || e.message || this.$t('接口异常'),
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.visible-range {
+  padding: 12px 24px;
+  font-size: 14px;
+  .main {
+    display: flex;
+    .title {
+        font-weight: 700;
+        font-size: 14px;
+        color: #313238;
+      }
+    .content {
+      margin-left: 24px;
+      .top-wrapper {
+        display: flex;
+      }
+      .edit-container {
+        font-size: 14px;
+        color: #3a84ff;
+        cursor: pointer;
+      }
+      .render-member-wrapper {
+        margin-top: 12px;
+        padding: 12px 12px 12px 36px;
+        width: 320px;
+        background: #f5f7fa;
+        border-radius: 2px;
+      }
+    }
+    :deep(.info) {
+      span {
+        font-weight: 700;
+        color: #2bcd56;
+        &.s2 {
+          color: #fda304;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/webfe/package_vue/static/images/file-close.svg b/webfe/package_vue/static/images/file-close.svg
new file mode 100644
index 0000000000..81af1c38a7
--- /dev/null
+++ b/webfe/package_vue/static/images/file-close.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" style="fill: #A3C5FD;"><path fill="#A3C5FD" fill-rule="evenodd" d="M326.4 160H96C76.8 160 64 172.8 64 192v640c0 19.2 12.8 32 32 32h832c19.2 0 32-12.8 32-32V288c0-19.2-12.8-32-32-32H448l0 0-76.8-76.8C358.4 166.4 342.4 160 326.4 160z" clip-rule="evenodd"></path></svg>
\ No newline at end of file