前端体验问题修复 (#2714)

* upd: 默认空间放到下拉列表首位; 去掉前端默认空间名称转换逻辑 * fix: 修复模板套餐编辑时名称没有回填的问题 * fix: 修复初始化脚本版本没有可选版本时下拉框选项可点击的问题 * upd: 配置文件上传错误提示优化 * upd: 调整分组上线过滤当前版本分组以及文案调整 * upd: 服务详情页服务列表下拉框拉业务下全量业务，增加记住上次访问逻辑 * upd: 解决前端语法错误
TencentBlueKing · Oct 30, 2023 · 4525085 · 4525085
1 parent a5c8580
commit 4525085
Show file tree

Hide file tree

Showing 13 changed files with 155 additions and 66 deletions.
diff --git a/bcs-services/bcs-bscp/ui/src/components/head.vue b/bcs-services/bcs-bscp/ui/src/components/head.vue
@@ -11,7 +11,7 @@
           :class="['nav-item', { actived: route.meta.navModule === nav.module }]"
           :key="nav.id"
           :to="{ name: nav.id, params: { spaceId: spaceId || 0 } }"
-        >
+          @click="handleNavClick(nav.id)">
           {{ nav.name }}
         </router-link>
       </div>
@@ -144,6 +144,19 @@ watch(
   },
 );
 
+const handleNavClick = (navId: String) => {
+  if (navId === 'service-all') {
+    const lastAccessedServiceDetail = localStorage.getItem('lastAccessedServiceDetail');
+    if (lastAccessedServiceDetail) {
+      const detail = JSON.parse(lastAccessedServiceDetail);
+      if (detail.spaceId === spaceId.value) {
+        router.push({ name: 'service-config', params: { spaceId: detail.spaceId, appId: detail.appId } });
+        return;
+      };
+    };
+  };
+};
+
 const handleSpaceSearch = (searchStr: string) => {
   if (searchStr) {
     optionList.value = spaceList.value.filter((item) => {

diff --git a/...-bscp/ui/src/views/space/service/detail/components/publish-version/select-group/index.vue b/...-bscp/ui/src/views/space/service/detail/components/publish-version/select-group/index.vue
@@ -23,7 +23,6 @@
         :group-type="groupType"
         :version-list="versionList"
         :version-list-loading="versionListLoading"
-        :allow-preview-delete="groupType === 'select'"
         :disabled="props.disabled"
         :value="props.groups"
         @diff="emits('openPreviewVersionDiff', $event)"

diff --git a/...ws/space/service/detail/components/publish-version/select-group/preview-version-group.vue b/...ws/space/service/detail/components/publish-version/select-group/preview-version-group.vue
@@ -62,7 +62,7 @@ const emits = defineEmits(['diff', 'delete']);
 const TYPE_MAP = {
   current: '当前版本',
   modify: '变更版本',
-  plain: '无版本',
+  plain: '首次上线',
 };
 
 const fold = ref(false);

diff --git a/...scp/ui/src/views/space/service/detail/components/publish-version/select-group/preview.vue b/...scp/ui/src/views/space/service/detail/components/publish-version/select-group/preview.vue
@@ -2,9 +2,7 @@
   <div class="roll-back-preview">
     <h3 class="title">
       上线预览
-      <span class="tips"
-        >上线后，{{ groupType === 'exclude' ? '以下分组' : '所选分组' }}将从以下各版本更新至当前版本</span
-      >
+      <span class="tips">上线后，以下分组将从以下各版本更新至当前版本</span>
     </h3>
     <div class="version-list-wrapper">
       <bk-exception v-if="previewData.length === 0" scene="part" type="empty">
@@ -18,7 +16,7 @@
           v-for="previewGroup in previewData"
           :key="previewGroup.id"
           :preview-group="previewGroup"
-          :allow-preview-delete="allowPreviewDelete"
+          :allow-preview-delete="props.groupType === 'select'"
           :disabled="props.disabled"
           @diff="emits('diff', $event)"
           @delete="handleDelete"
@@ -31,21 +29,28 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import { IGroupToPublish, IGroupPreviewItem } from '../../../../../../../../types/group';
+import { storeToRefs } from 'pinia';
+import useConfigStore from '../../../../../../../store/config';
 import PreviewVersionGroup from './preview-version-group.vue';
 
-// 将分组按照版本聚合
+const versionStore = useConfigStore();
+const { versionData } = storeToRefs(versionStore);
+
+// 将分组按照版本聚合，如果为调整分组上线，则需要过滤掉当前版本已上线分组
 const aggregateGroup = (groups: IGroupToPublish[]) => {
   const list: IGroupPreviewItem[] = [];
   const modifyVersions: IGroupPreviewItem[] = [];
   const noVersions: IGroupPreviewItem[] = [{ id: 0, name: '无版本', type: 'plain', children: [] }];
   groups.forEach((group) => {
     const { release_id, release_name } = group;
     if (release_id) {
-      const version = modifyVersions.find((item) => item.id === release_id);
-      if (version) {
-        version.children.push(group);
-      } else {
-        modifyVersions.push({ id: release_id, name: release_name as string, type: 'modify', children: [group] });
+      if (release_id !== versionData.value.id) {
+        const version = modifyVersions.find(item => item.id === release_id);
+        if (version) {
+          version.children.push(group);
+        } else {
+          modifyVersions.push({ id: release_id, name: release_name as string, type: 'modify', children: [group] });
+        }
       }
     } else {
       noVersions[0].children.push(group);
@@ -62,10 +67,9 @@ const props = withDefaults(
   defineProps<{
     groupListLoading: boolean;
     groupList: IGroupToPublish[];
-    allowPreviewDelete: boolean;
+    groupType: string;
     disabled?: number[];
     value: IGroupToPublish[];
-    groupType: string;
   }>(),
   {
     disabled: () => [],

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/service-selector.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/service-selector.vue
@@ -2,28 +2,44 @@
   <div>
     <bk-select
       v-model="localVal"
-      class="app-selector"
+      ref="selectorRef"
+      class="service-selector"
+      :popover-options="{ theme: 'light bk-select-popover service-selector-popover' }"
       :filterable="true"
       :input-search="false"
       :clearable="false"
       :loading="loading"
-      @change="handleAppChange"
-    >
+      @change="handleAppChange">
       <template #trigger>
         <div class="selector-trigger">
           <input readonly :value="appData.spec.name" />
           <AngleDown class="arrow-icon" />
         </div>
       </template>
-      <bk-option v-for="item in serviceList" :key="item.id" :value="item.id" :label="item.spec.name"> </bk-option>
-      <div class="selector-extensition">
-        <template slot="extension">
-          <div class="content" @click="router.push({ name: 'service-mine' })">
+      <bk-option
+        v-for="item in serviceList"
+        :key="item.id"
+        :value="item.id"
+        :label="item.spec.name">
+        <div
+            v-cursor="{
+              active: !item.permissions.view
+            }"
+            :class="['service-option-item', { 'no-perm': !item.permissions.view }]"
+            @click="handleOptionClick(item, $event)">
+            <div class="name-wrapper">
+              {{ item.spec.name }}
+            </div>
+          </div>
+      </bk-option>
+      <template #extension>
+        <div class="selector-extensition">
+          <div class="content" @click="router.push({ name: 'service-all' })">
             <i class="bk-bscp-icon icon-app-store app-icon"></i>
             服务管理
           </div>
-        </template>
-      </div>
+        </div>
+      </template>
     </bk-select>
   </div>
 </template>
@@ -32,7 +48,7 @@ import { ref, watch, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { AngleDown } from 'bkui-vue/lib/icon';
-import useUserStore from '../../../../../store/user';
+import useGlobalStore from '../../../../../store/global';
 import useServiceStore from '../../../../../store/service';
 import { IAppItem } from '../../../../../../types/app';
 import { getAppList } from '../../../../../api';
@@ -41,7 +57,7 @@ const route = useRoute();
 const router = useRouter();
 
 const { appData } = storeToRefs(useServiceStore());
-const { userInfo } = storeToRefs(useUserStore());
+const { showApplyPermDialog, permissionQuery } = storeToRefs(useGlobalStore());
 
 const bizId = route.params.spaceId as string;
 
@@ -54,6 +70,7 @@ defineEmits(['change']);
 const serviceList = ref<IAppItem[]>([]);
 const loading = ref(false);
 const localVal = ref(props.value);
+const selectorRef = ref();
 
 watch(
   () => props.value,
@@ -71,8 +88,7 @@ const loadServiceList = async () => {
   try {
     const query = {
       start: 0,
-      limit: 100,
-      operator: userInfo.value.username,
+      all: true,
     };
     const resp = await getAppList(bizId, query);
     serviceList.value = resp.details;
@@ -83,6 +99,28 @@ const loadServiceList = async () => {
   }
 };
 
+// 点击无查看权限的选项，弹出申请权限弹窗
+const handleOptionClick = (service: IAppItem, event: Event) => {
+  if (!service.permissions.view) {
+    selectorRef.value.hidePopover();
+    event.stopPropagation();
+    permissionQuery.value = {
+      resources: [
+        {
+          biz_id: service.biz_id,
+          basic: {
+            type: 'app',
+            action: 'view',
+            resource_id: service.id,
+          },
+        },
+      ],
+    };
+
+    showApplyPermDialog.value = true;
+  }
+};
+
 const handleAppChange = (id: number) => {
   const service = serviceList.value.find(service => service.id === id);
   if (service) {
@@ -91,7 +129,7 @@ const handleAppChange = (id: number) => {
 };
 </script>
 <style lang="scss" scoped>
-.app-selector {
+.service-selector {
   &.popover-show {
     .selector-trigger .arrow-icon {
       transform: rotate(-180deg);
@@ -144,12 +182,21 @@ const handleAppChange = (id: number) => {
     color: #979ba5;
   }
 }
+
+.service-option-item {
+  flex: 1;
+  padding: 0 12px;
+  &.no-perm {
+    background-color: #fafafa !important;
+    color: #cccccc !important;
+  }
+}
 .selector-extensition {
+  flex: 1;
   .content {
     height: 40px;
     line-height: 40px;
     text-align: center;
-    border-top: 1px solid #dcdee5;
     background: #fafbfd;
     cursor: pointer;
     &:hover {
@@ -161,3 +208,10 @@ const handleAppChange = (id: number) => {
   }
 }
 </style>
+<style lang="scss">
+  .service-selector-popover {
+    .bk-select-option {
+      padding: 0 !important;
+    }
+  }
+</style>
diff --git a/...p/ui/src/views/space/service/detail/config/components/version-diff/aside-menu/configs.vue b/...p/ui/src/views/space/service/detail/config/components/version-diff/aside-menu/configs.vue
@@ -312,7 +312,7 @@ const getBoundTemplateList = async (id: number) => {
     const group: IConfigsGroupData = {
       template_space_id,
       id: template_set_id,
-      name: `${template_space_name === 'default_space' ? '默认空间' : template_space_name} - ${template_set_name}`,
+      name: `${template_space_name} - ${template_set_name}`,
       expand: false,
       configs: [],
     };

diff --git a/...cp/ui/src/views/space/service/detail/config/config-list/config-table-list/config-form.vue b/...cp/ui/src/views/space/service/detail/config/config-list/config-table-list/config-form.vue
@@ -98,14 +98,19 @@
         :disabled="!editable"
         :multiple="false"
         :files="fileList"
-        :custom-request="handleFileUpload"
-      >
+        :custom-request="handleFileUpload">
         <template #file="{ file }">
-          <div class="file-wrapper">
-            <Done class="done-icon" />
-            <TextFill class="file-icon" />
-            <div v-bk-ellipsis class="name" @click="handleDownloadFile">{{ file.name }}</div>
-            ({{ file.size }})
+          <div>
+            <div class="file-wrapper">
+              <div class="status-icon-area">
+                <Done v-if="file.status === 'success'" class="success-icon" />
+                <Error v-if="file.status === 'fail'" class="error-icon" />
+              </div>
+              <TextFill class="file-icon" />
+              <div class="name" :title="file.name" @click="handleDownloadFile">{{ file.name }}</div>
+              ({{ file.status === 'fail' ? byteUnitConverse(file.size) : file.size }})
+            </div>
+            <div v-if="file.status === 'fail'" class="error-msg">{{ file.statusText }}</div>
           </div>
         </template>
       </bk-upload>
@@ -124,13 +129,13 @@
 import { ref, computed, watch } from 'vue';
 import SHA256 from 'crypto-js/sha256';
 import WordArray from 'crypto-js/lib-typedarrays';
-import { TextFill, Done } from 'bkui-vue/lib/icon';
+import { TextFill, Done, Error } from 'bkui-vue/lib/icon';
 import BkMessage from 'bkui-vue/lib/message';
 import { IConfigEditParams, IFileConfigContentSummary } from '../../../../../../../../types/config';
 import { IVariableEditParams } from '../../../../../../../../types/variable';
 import { updateConfigContent, downloadConfigContent } from '../../../../../../../api/config';
 import { downloadTemplateContent, updateTemplateContent } from '../../../../../../../api/template';
-import { stringLengthInBytes } from '../../../../../../../utils/index';
+import { stringLengthInBytes, byteUnitConverse } from '../../../../../../../utils/index';
 import { transFileToObject, fileDownload } from '../../../../../../../utils/file';
 import { CONFIG_FILE_TYPE } from '../../../../../../../constants/config';
 import ConfigContentEditor from '../../components/config-content-editor.vue';
@@ -466,9 +471,20 @@ defineExpose({
     align-items: center;
     color: #979ba5;
     font-size: 12px;
-    .done-icon {
-      font-size: 20px;
-      color: #2dcb56;
+    .status-icon-area {
+      display: flex;
+      width: 20px;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+      .success-icon {
+        font-size: 20px;
+        color: #2dcb56;
+      }
+      .error-icon {
+        font-size: 14px;
+        color: #ea3636;
+      }
     }
     .file-icon {
       margin: 0 6px 0 0;
@@ -487,6 +503,12 @@ defineExpose({
       }
     }
   }
+  .error-msg {
+    padding: 0 0 10px 38px;
+    line-height: 1;
+    font-size: 12px;
+    color: #ff5656;
+  }
 }
 </style>
 <style lang="scss">

diff --git a/...iews/space/service/detail/config/config-list/config-table-list/create-config/pkg-tree.vue b/...iews/space/service/detail/config/config-list/config-table-list/create-config/pkg-tree.vue
@@ -88,7 +88,7 @@ const pkgTreeData = computed(() => {
     const group: ISpaceTreeItem = {
       id: template_space_id,
       nodeId,
-      name: template_space_name === 'default_space' ? '默认空间' : template_space_name,
+      name: template_space_name,
       children: [],
       checked,
       indeterminate,

diff --git a/...space/service/detail/config/config-list/config-table-list/tables/table-with-templates.vue b/...space/service/detail/config/config-list/config-table-list/tables/table-with-templates.vue
@@ -435,7 +435,7 @@ const groupTplsByPkg = (list: IBoundTemplateGroup[]) => {
     const { template_space_name, template_set_id, template_set_name, template_revisions } = groupItem;
     const group: IConfigsGroupData = {
       id: template_set_id,
-      name: `${template_space_name === 'default_space' ? '默认空间' : template_space_name} - ${template_set_name}`,
+      name: `${template_space_name} - ${template_set_name}`,
       expand: true,
       configs: [],
     };