Merge pull request #671 from TencentBlueKing/master

src/dashboard-front/.eslintignore

@@ -11,3 +11,4 @@ src/views/permission/record/index.vue
 src/views/permission/apply/index.vue
 src/assets/**
 *bak*
+src/views/resource/setting/detail.vue

src/dashboard-front/.eslintrc.js

@@ -1,10 +1,16 @@
 module.exports = {
   root: true,
   extends: ['@blueking/eslint-config-bk/tsvue3'],
+  parser: 'vue-eslint-parser',
   parserOptions: {
     project: './tsconfig.eslint.json',
     tsconfigRootDir: __dirname,
     sourceType: 'module',
+    parser: '@typescript-eslint/parser',
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 13,
   },
   rules: {
     'no-param-reassign': 0,

src/dashboard-front/index.html

@@ -18,10 +18,12 @@
         var BK_APIGATEWAY_VERSION = '<%= process.env.BK_APIGATEWAY_VERSION %>' || '1.1.1'
         var BK_DOMAIN = '<%= process.env.BK_DOMAIN %>'
         var BK_LOGIN_URL = '<%= process.env.BK_LOGIN_URL %>'
+        var BK_APP_CODE = '<%= process.env.BK_APP_CODE %>'
         var BK_DEFAULT_TEST_APP_CODE = '<%= process.env.BK_DEFAULT_TEST_APP_CODE %>'
         var BK_API_RESOURCE_URL_TMPL = '<%= process.env.BK_API_RESOURCE_URL_TMPL %>'
         var BK_COMPONENT_API_URL = '<%= process.env.BK_COMPONENT_API_URL %>'
         var BK_DOCS_URL_PREFIX = '<%= process.env.BK_DOCS_URL_PREFIX %>'
+        var BK_REPO_URL = '<%= process.env.BK_REPO_URL %>'
         var BK_DASHBOARD_FE_URL = '<%= process.env.BK_DASHBOARD_FE_URL %>'
         var BK_DASHBOARD_URL = '<%= process.env.BK_DASHBOARD_URL %>'
         var BK_DASHBOARD_CSRF_COOKIE_NAME = '<%= process.env.BK_DASHBOARD_CSRF_COOKIE_NAME %>'

src/dashboard-front/package.json

@@ -50,7 +50,7 @@
     "request": "^2.88.2",
     "semver": "^7.6.0",
     "transliteration": "^2.3.5",
-    "vue": "^3.2.41",
+    "vue": "^3.4.27",
     "vue-i18n": "^9.5.0",
     "vue-router": "^4.1.6"
   },
@@ -84,7 +84,8 @@
     "sass": "^1.52.3",
     "sass-loader": "^13.0.0",
     "ts-loader": "^9.5.1",
-    "typescript": "^4.8.4"
+    "typescript": "5.4.5",
+    "vue-eslint-parser": "^9.4.2"
   },
   "engines": {
     "node": ">= 14.16.1",

src/dashboard-front/src/components/log-details/index.vue

@@ -175,14 +175,17 @@ const showSideslider = () => {
   isShow.value = true;
 };
 
-const emit = defineEmits<(e: 'release-success') => void>();
+const emit = defineEmits(['release-success', 'release-doing']);
 
 watch(
   () => isShow.value,
   (v) => {
     if (!v && logDetails.value?.status === 'success') {
       emit('release-success');
     }
+    if (!v && logDetails.value?.status !== 'success') {
+      emit('release-doing');
+    }
     if (!v) {
       clearInterval(timeId);
     }

src/dashboard-front/src/components/resource-setting-top-bar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="resource-top-bar">
+  <div class="resource-top-bar" :style="stage.getNotUpdatedStages?.length ? 'top: 42px' : 'top: -1px'">
     <div class="top-title-wrapper">
       <div class="title">{{ t('资源配置') }}</div>
       <div class="is-latest" v-show="!latest">
@@ -55,8 +55,10 @@ import { getResourceVersionsList } from '@/http';
 import versionDiff from '@/components/version-diff/index.vue';
 import VersionSideslider from '@/views/resource/setting/comps/version-sideslider.vue';
 import mitt from '@/common/event-bus';
+import { useStage } from '@/store';
 
 const { t } = useI18n();
+const stage = useStage();
 
 const route = useRoute();
 const apigwId = computed(() => +route.params.id);
@@ -122,7 +124,8 @@ const handleCreateResourceVersion = async () => {
 <style lang="scss" scoped>
 .resource-top-bar {
   position: absolute;
-  top: 0;
+  // top: 0;
+  // top: 42px;
   width: 100%;
   height: 52px;
   box-sizing: border-box;

src/dashboard-front/src/components/stage-top-bar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="stage-top-bar">
+  <div class="stage-top-bar" :style="stageStore.getNotUpdatedStages?.length ? 'top: 42px' : 'top: -1px'">
     <div class="top-title-wrapper">
       <div class="title">{{ t('环境概览') }}</div>
       <div class="model-type mr8">
@@ -373,7 +373,8 @@ defineExpose({
   display: flex;
   justify-content: space-between;
   align-items: center;
-  top: -1px;
+  // top: -1px;
+  // top: 42px;
   width: 100%;
   padding: 0 24px;
   box-sizing: border-box;

src/dashboard-front/src/components/tips-publish-bar.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="tips-publish-bar">
+    <bk-alert
+      theme="warning"
+    >
+      <template #title>
+        <div class="tips-main">
+          <span>{{ t('API 网关 1.13 版本现已发布，为避免插件、后端服务等信息在页面修改后但实际并未生效的问题，请尽快生成并发布新版本至所有环境。') }}</span>
+          <a
+            :href="GLOBAL_CONFIG.DOC.UPGRADE_TO_113_TIP"
+            v-if="GLOBAL_CONFIG.DOC.UPGRADE_TO_113_TIP"
+            target="_blank"
+            class="guide">
+            {{ t('查看操作指引') }}
+          </a>
+          <bk-button size="small" theme="primary" v-if="!stage.getExist2" @click="handleCreateVersion">
+            {{ t('生成版本并发布') }}
+          </bk-button>
+          <bk-button size="small" theme="primary" v-else @click="handlePublish">
+            {{ t('去发布') }}
+          </bk-button>
+        </div>
+      </template>
+    </bk-alert>
+
+    <!-- 生成版本 -->
+    <version-sideslider
+      ref="versionSidesliderRef"
+      @done="getStagesStatus()"
+    />
+
+    <!-- 发布资源 -->
+    <release-sideslider
+      ref="releaseSidesliderRef"
+      :current-assets="stageData"
+      @release-success="getStagesStatus()"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStage } from '@/store';
+import { useRoute } from 'vue-router';
+import { getStageList } from '@/http';
+import { useGetGlobalProperties, useGetStageList } from '@/hooks';
+import VersionSideslider from '@/views/resource/setting/comps/version-sideslider.vue';
+import releaseSideslider from '@/views/stage/overview/comps/release-sideslider.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+const stage = useStage();
+// 全局变量
+const globalProperties = useGetGlobalProperties();
+const { GLOBAL_CONFIG } = globalProperties;
+
+const apigwId = computed(() => +route.params.id);
+const versionSidesliderRef = ref(null);
+const releaseSidesliderRef = ref(null);
+const stageData = ref<any>({});
+const { getStagesStatus } = useGetStageList();
+
+const handleCreateVersion = () => {
+  versionSidesliderRef.value.showReleaseSideslider();
+};
+
+const handlePublish = () => {
+  releaseSidesliderRef.value.showReleaseSideslider();
+};
+
+const getDefaultStage = async () => {
+  if (!apigwId.value) return;
+  const res = await getStageList(apigwId.value);
+
+  const [defaultStage] = res;
+  stageData.value = defaultStage;
+};
+getDefaultStage();
+
+watch(
+  () => apigwId.value,
+  () => {
+    getDefaultStage();
+  },
+);
+</script>
+
+<style lang="scss" scoped>
+.tips-publish-bar {
+  position: absolute;
+  top: 0px;
+  width: 100%;
+  box-sizing: border-box;
+  height: 42px;
+  border: 1px solid #FFDFAC;
+  border-radius: 2px;
+  z-index: 99;
+  :deep(.bk-alert) {
+    box-sizing: border-box;
+  }
+  :deep(.bk-alert-wraper) {
+    padding: 7px 10px;
+    display: flex;
+    align-items: center;
+  }
+  .tips-main {
+    span {
+      font-size: 12px;
+      color: #63656E;
+    }
+    .guide {
+      color: #1768EF;
+      margin-left: 38px;
+      margin-right: 46px;
+    }
+  }
+}
+</style>

src/dashboard-front/src/components/version-release-note.vue

@@ -0,0 +1,139 @@
+<template>
+  <bk-dialog
+    :is-show="isShow"
+    :title="t('API 网关 1.13 版本发布说明')"
+    theme="primary"
+    dialog-type="confirm"
+    :width="1074"
+    @closed="() => isShow = false"
+    @confirm="handleConfirm"
+    header-align="center"
+    class="release-note-dialog"
+    :confirm-text="stage.getExist2 ? t('去发布') : t('生成版本并发布')"
+  >
+    <div class="version-release-note">
+      <div class="mb-32">
+        {{ t('API 网关在 2024-05-30 推出了 1.13 大版本更新。新版本中引入了后端服务，并将访问策略转换为插件形式，同时优化了环境、资源与插件之间的绑定关系。') }}
+      </div>
+      <div class="mb-24">{{ t('为保证网关数据一致性，你需要执行以下步骤：') }}</div>
+      <div class="mb-16 clause">{{ t('1. 为当前网关生成新的版本') }}</div>
+      <div class="mb-32 clause">
+        {{ t('2. 将新版本发布至所有环境') }}（{{ t('目前尚未更新的环境：') }}<span class="stage">{{ stageNames }}</span>）
+      </div>
+      <div>
+        {{ t('请尽快更新，以避免插件、后端服务等信息在页面修改后但实际并未生效的问题。') }}
+        <a
+          :href="GLOBAL_CONFIG.DOC.UPGRADE_TO_113_TIP"
+          v-if="GLOBAL_CONFIG.DOC.UPGRADE_TO_113_TIP"
+          target="_blank"
+          class="guide">
+          {{ t('查看操作指引') }}
+        </a>
+      </div>
+    </div>
+  </bk-dialog>
+
+  <!-- 生成版本 -->
+  <version-sideslider
+    ref="versionSidesliderRef"
+    @done="getStagesStatus()"
+  />
+
+  <!-- 发布资源 -->
+  <release-sideslider
+    ref="releaseSidesliderRef"
+    :current-assets="stageData"
+    @release-success="getStagesStatus()"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStage } from '@/store';
+import { useRoute } from 'vue-router';
+import { useGetGlobalProperties, useGetStageList } from '@/hooks';
+import { getStageList } from '@/http';
+import VersionSideslider from '@/views/resource/setting/comps/version-sideslider.vue';
+import releaseSideslider from '@/views/stage/overview/comps/release-sideslider.vue';
+
+const route = useRoute();
+const stage = useStage();
+const { t } = useI18n();
+// 全局变量
+const globalProperties = useGetGlobalProperties();
+const { GLOBAL_CONFIG } = globalProperties;
+const apigwId = computed(() => +route.params.id);
+const { getStagesStatus } = useGetStageList();
+
+const versionSidesliderRef = ref(null);
+const releaseSidesliderRef = ref(null);
+const isShow = ref<boolean>(false);
+const stageData = ref<any>({});
+
+const stageNames = computed(() => {
+  return stage.getNotUpdatedStages?.join('、');
+});
+
+const handleConfirm = () => {
+  isShow.value = false;
+  if (stage.getExist2) {  // 去发布
+    releaseSidesliderRef.value.showReleaseSideslider();
+  } else { // 生成版本再发布
+    versionSidesliderRef.value.showReleaseSideslider();
+  };
+};
+
+const getDefaultStage = async () => {
+  if (!apigwId.value) return;
+  const res = await getStageList(apigwId.value);
+
+  const [defaultStage] = res;
+  stageData.value = defaultStage;
+};
+
+const show = async () => {
+  if (stage.getExist2) {
+    await getDefaultStage();
+  }
+
+  isShow.value = true;
+};
+
+defineExpose({
+  show,
+});
+</script>
+
+<style lang="scss" scoped>
+.release-note-dialog {
+  :deep(.bk-dialog-header) {
+    padding-top: 24px;
+  }
+}
+.version-release-note {
+  font-size: 14px;
+  color: #63656E;
+  padding-top: 20px;
+  padding-bottom: 21px;
+  padding-left: 6px;
+  .stage {
+    color: #E02020;
+  }
+  .mb-32 {
+    margin-bottom: 32px;
+  }
+  .mb-16 {
+    margin-bottom: 16px;
+  }
+  .mb-24 {
+    margin-bottom: 24px;
+  }
+  .clause {
+    text-indent: 2em;
+  }
+}
+.guide {
+  color: #1768EF;
+}
+</style>

src/dashboard-front/src/constant/config.ts

@@ -117,5 +117,8 @@ export default {
 
     // 调用API
     USER_API: `${BK_DOCS_URL_PREFIX_MARKDOWN}/apigateway/use-api/use-apigw-api.md`,
+
+    // 升级到 1.13 的指引说明
+    UPGRADE_TO_113_TIP: "",
   },
 };

src/dashboard-front/src/hooks/index.ts

@@ -5,3 +5,4 @@ export * from './use-global';
 export * from './use-date-picker';
 export * from './user-chart-log';
 export * from './sidebar';
+export * from './use-stage-data';