Merge pull request #91 from huangpeng0428/vue3-shuzhen-dev

Vue3 shuzhen dev
TencentBlueKing · Dec 20, 2023 · b7fb48b · b7fb48b
2 parents bea982f + be52624
commit b7fb48b
Show file tree

Hide file tree

Showing 8 changed files with 293 additions and 71 deletions.
diff --git a/src/dashboard-front-new/index.html b/src/dashboard-front-new/index.html
@@ -14,7 +14,7 @@
 
         var BK_NODE_ENV = '<%= process.env.NODE_ENV %>'
         var BK_STATIC_URL = '<%= process.env.BK_STATIC_URL %>'
-
+        var BK_API_RESOURCE_URL_TMPL = '<%= process.env.BK_API_RESOURCE_URL_TMPL %>'
         var BK_APP_VERSION = '<%= process.env.BK_APP_VERSION %>'
         var BK_LOGIN_URL = '<%= process.env.BK_LOGIN_URL %>'
         var BK_PAAS_APP_ID = '<%= process.env.BK_PAAS_APP_ID %>'

diff --git a/src/dashboard-front-new/src/components/log-details/index.vue b/src/dashboard-front-new/src/components/log-details/index.vue
@@ -75,15 +75,15 @@ let timeId: any = null;
 // 改变当前选中值
 const handleTimelineChange = (data: any) => {
   const { tag } = data;
-  let detail: any = {};
+  let detail = '';
   for (let i = 0; i < state.objectSteps?.length; i++) {
     const item = state.objectSteps[i];
     if (item?.tag === tag) {
-      detail = item?.detail || {};
+      detail = item?.detail;
       break;
     }
   }
-  logBody.value = JSON.stringify(detail || {});
+  logBody.value = detail || '';
 };
 
 // 获取日志列表
@@ -98,10 +98,11 @@ const getLogsList = async () => {
     // 整理步骤
     const steps: any = [];
     state.totalDuration = 0;
+    const subStep = res?.events[res?.events?.length - 1]?.step || 0;
 
     res?.events_template?.forEach((item: any, index: number) => {
       item.size = 'large';
-      const subStep = res?.events[res?.events?.length - 1]?.step || 0;
+
       if (item?.step < subStep) {
         item.color = 'green';
         item.filled = true;
@@ -134,12 +135,17 @@ const getLogsList = async () => {
       const duration = date2.diff(date1, 's', true);
       state.totalDuration += duration;
 
+      const itemLogs: string[] = [];
+      children?.forEach((c: any) => {
+        itemLogs?.push(`${c.created_time}  ${c.name}  ${c.status}`);
+      });
+
       steps[index].children = children;
       steps[index].content = `<span style="font-size: 12px;">${duration} s</span>`;
-      steps[index].detail = children[children.length - 1]?.detail;
+      steps[index].detail = itemLogs.join('\n');
     });
     state.objectSteps = steps;
-    logBody.value = JSON.stringify(steps[steps.length - 1]?.detail || {});
+    logBody.value = steps[subStep]?.detail || '';
   } catch (e) {
     clearInterval(timeId);
     console.log(e);

diff --git a/src/dashboard-front-new/src/components/stage-top-bar.vue b/src/dashboard-front-new/src/components/stage-top-bar.vue
@@ -24,22 +24,38 @@
         :class="{ active: curStage.name === item.name }"
         @click="handleChangeStage(item.name)"
       >
+        <spinner v-if="item.release.status === 'doing'" fill="#3A84FF" />
+        <span v-else :class="['dot', item.release.status]"></span>
         <span v-overflow-title>{{ item.name }}</span>
       </li>
     </ul>
+
+    <plus
+      v-if="curActive === 'detail'"
+      fill="#3785ff"
+      @click="handleAddStage"
+      style="font-size: 28px; cursor: pointer;"
+    />
+
+    <!-- 环境侧边栏 -->
+    <edit-stage-sideslider ref="stageSidesliderRef" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, onBeforeMount, onMounted } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { getStageList, getStageDetail } from '@/http';
-import { useStage } from '@/store';
+import { useStage, useCommon } from '@/store';
 import { useI18n } from 'vue-i18n';
 import mitt from '@/common/event-bus';
+import { Spinner, Plus } from 'bkui-vue/lib/icon';
+import editStageSideslider from '@/views/stage/overview/comps/edit-stage-sideslider.vue';
+
 const router = useRouter();
 const route = useRoute();
 const stageStore = useStage();
+const common = useCommon();
 const { t } = useI18n();
 
 const modelTypes = ref([
@@ -56,15 +72,21 @@ const modelTypes = ref([
 ]);
 
 // 获取环境列表
-const apigwId = +route.params.id;
+const apigwId = computed(() => common.apigwId);
+
+// 新建环境
+const stageSidesliderRef = ref(null);
+const handleAddStage = () => {
+  stageSidesliderRef.value.handleShowSideslider('add');
+};
 
 // 当前环境
 const curStage = ref(stageStore.curStageData || stageStore.defaultStage);
 
 const init = async (isUpdate?: Boolean, isDelete?: Boolean) => {
   stageStore.setStageMainLoading(true);
   try {
-    const data = await getStageList(apigwId);
+    const data = await getStageList(apigwId.value);
     stageStore.setStageList(data);
 
     // 更新停留当前环境
@@ -95,7 +117,7 @@ const curActive = ref(isDetailMode.value ? 'detail' : 'abbreviation');
 // 获取环境详情
 const getStageDetailFun = (id: number) => {
   stageStore.setStageMainLoading(true);
-  getStageDetail(apigwId, id).then((data) => {
+  getStageDetail(apigwId.value, id).then((data) => {
     stageStore.curStageData = data;
     curStage.value = data;
     stageStore.curStageId = data.id;
@@ -127,7 +149,7 @@ const switchModelType = (key: string, routeName: string, stageName?: string) =>
 };
 
 // 切换环境
-const handleChangeStage = async (name: string, isDelete: Boolean) => {
+const handleChangeStage = async (name: string, isDelete?: Boolean) => {
   // 获取切换环境的名字
   const data = stageStore.stageList.find(item => item.name === name);
   if (!isDelete) {
@@ -216,22 +238,45 @@ defineExpose({
     height: 100%;
     display: flex;
     .stage-item {
-      width: 80px;
+      cursor: pointer;
+      width: 100px;
       height: 100%;
+      box-sizing: border-box;
       font-size: 14px;
       color: #63656e;
       display: flex;
       align-items: center;
+      justify-content: center;
       span {
         text-align: center;
-        width: 80px;
-        padding: 0 3px;
+        padding-left: 6px;
         display: inline-block;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
 
+      .dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+
+        &.success {
+          border: 1px solid #3FC06D;
+          background: #E5F6EA;
+        }
+
+        &.unreleased {
+          border: 1px solid #C4C6CC;
+          background: #F0F1F5;
+        }
+
+        &.failure {
+          border: 1px solid #EA3636;
+          background: #FFE6E6;
+        }
+      }
+
       &:hover {
         background-color: #f0f5ff;
       }

diff --git a/src/dashboard-front-new/src/store/common.ts b/src/dashboard-front-new/src/store/common.ts
@@ -2,9 +2,10 @@ import { defineStore } from 'pinia';
 
 export const useCommon = defineStore('common', {
   state: () => ({
+    // 网关id
     apigwId: 0,
-    // 网关名
-    apigwName: '',
+    // 网关对象
+    apigwName: {},
     methodList: [
       {
         id: 'GET',
@@ -46,7 +47,7 @@ export const useCommon = defineStore('common', {
     setApigwId(apigwId: number) {
       this.apigwId = apigwId;
     },
-    setApigwName(name: string) {
+    setApigwName(name: any) {
       this.apigwName = name;
     },
     setCurApigwData(data: any) {

diff --git a/src/dashboard-front-new/src/views/stage/overview/comps/edit-stage-sideslider.vue b/src/dashboard-front-new/src/views/stage/overview/comps/edit-stage-sideslider.vue
@@ -3,7 +3,7 @@
     <bk-sideslider
       v-model:isShow="isShow"
       :title="isAdd ? t('新建环境') : t('编辑环境')"
-      quick-close
+      :quick-close="false"
       width="960"
       ext-cls="stage-sideslider-cls"
       @hidden="closeSideslider"
@@ -32,6 +32,7 @@
                     <bk-input
                       :placeholder="t('请输入 2-20 字符的字母、数字、连字符(-)、下划线(_)，以字母开头')"
                       v-model="curStageData.name"
+                      :disabled="!isAdd"
                     ></bk-input>
                     <p
                       slot="tip"
@@ -67,7 +68,7 @@
               v-for="(backend, backendIndex) in curStageData.backends"
               :key="backend.name"
             >
-              <div class="title">
+              <div class="title" v-if="backendIndex === 0">
                 <i class="apigateway-icon icon-ag-down-shape"></i>
                 {{ t('后端服务配置') }}
               </div>
@@ -110,7 +111,7 @@
                       >
                         <div class="host-item mb10">
                           <bk-input
-                            :placeholder="$t('格式: http(s)://host:port')"
+                            :placeholder="$t('格式: host:port')"
                             v-model="hostItem.host"
                             :key="backend.config.loadbalance"
                           >
@@ -152,7 +153,11 @@
                           <i
                             class="delete-host-btn apigateway-icon icon-ag-minus-circle-shape ml10"
                             :class="{ disabled: backend.config.hosts.length < 2 }"
-                            @click="handleDeleteServiceAddress(backend.name, index)"
+                            @click="
+                              backend.config.hosts.length < 2 ?
+                                ''
+                                :
+                                handleDeleteServiceAddress(backend.name, index)"
                           ></i>
                         </div>
                       </bk-form-item>
@@ -168,9 +173,8 @@
                         <bk-input
                           type="number"
                           :min="1"
-                          :show-controls="false"
+                          :max="300"
                           v-model="backend.config.timeout"
-                          class="time-input"
                         >
                           <template #suffix>
                             <div class="group-text group-text-style">{{ $t('秒') }}</div>
@@ -233,17 +237,19 @@ const globalProperties = useGetGlobalProperties();
 const { GLOBAL_CONFIG } = globalProperties;
 
 // 默认值
-const defaultConfig = {
-  type: 'node',
-  timeout: 30,
-  loadbalance: 'weighted-roundrobin',
-  hosts: [
-    {
-      scheme: 'http',
-      host: '',
-      weight: 100,
-    },
-  ],
+const defaultConfig = () => {
+  return {
+    type: 'node',
+    timeout: 30,
+    loadbalance: 'weighted-roundrobin',
+    hosts: [
+      {
+        scheme: 'http',
+        host: '',
+        weight: 100,
+      },
+    ],
+  };
 };
 
 const curStageData = ref({
@@ -252,7 +258,7 @@ const curStageData = ref({
   backends: [
     {
       name: '',
-      config: defaultConfig,
+      config: defaultConfig(),
     },
   ],
 });
@@ -274,8 +280,8 @@ const schemeList = [{ value: 'http' }, { value: 'https' }];
 
 // 访问地址
 const stageAddress = computed(() => {
-  const keys = {
-    api_name: common.apigwName,
+  const keys: any = {
+    api_name: common.apigwName?.name,
     stage_name: curStageData.value.name,
     resource_path: '',
   };
@@ -365,7 +371,7 @@ const addInit = async () => {
     return {
       id: item.id,
       name: item.name,
-      config: defaultConfig,
+      config: defaultConfig(),
     };
   });
   isDialogLoading.value = false;
@@ -400,7 +406,7 @@ const closeSideslider = () => {
     backends: [
       {
         name: '',
-        config: defaultConfig,
+        config: defaultConfig(),
       },
     ],
   };
@@ -600,8 +606,10 @@ defineExpose({
     }
   }
 
-  :deep(.bk-input--number-control) {
-    display: none;
+  .weights-input {
+    :deep(.bk-input--number-control) {
+      display: none;
+    }
   }
 }