Merge Develop

apps/daas/src/components.d.ts

@@ -38,7 +38,6 @@ declare module 'vue' {
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElIconArrowLeft: typeof import('@element-plus/icons-vue')['ArrowLeft']
     ElIconArrowRight: typeof import('@element-plus/icons-vue')['ArrowRight']
     ElIconCircleCloseFilled: typeof import('@element-plus/icons-vue')['CircleCloseFilled']
     ElIconCirclePlus: typeof import('@element-plus/icons-vue')['CirclePlus']

apps/daas/src/components/VDivider.vue

@@ -1,8 +1,8 @@
 <script>
-import { plantRenderPara } from '../../utils/gogocodeTransfer'
 import * as Vue from 'vue'
+import { plantRenderPara } from '../../utils/gogocodeTransfer'
 export default {
-  name: 'v-divider',
+  name: 'VDivider',
 
   props: {
     inset: Boolean,
@@ -14,22 +14,16 @@ export default {
     if (!this.$attrs.role || this.$attrs.role === 'separator') {
       orientation = this.vertical ? 'vertical' : 'horizontal'
     }
-    return Vue.h(
-      'hr',
-      plantRenderPara({
-        class: {
-          'v-divider': true,
-          'v-divider--inset': this.inset,
-          'v-divider--vertical': this.vertical,
-        },
-        attrs: {
-          role: 'separator',
-          'aria-orientation': orientation,
-          ...this.$attrs,
-        },
-        on: this.$listeners,
-      }),
-    )
+    return Vue.h('hr', {
+      class: {
+        'v-divider': true,
+        'v-divider--inset': this.inset,
+        'v-divider--vertical': this.vertical,
+      },
+      role: 'separator',
+      'aria-orientation': orientation,
+      ...this.$attrs,
+    })
   },
 }
 </script>

apps/daas/src/views/License.vue

@@ -186,100 +186,98 @@ export default {
         $t('public_event_update')
       }}</ElButton>
     </template>
-    <section class="license-wrapper h-100 overflow-hidden pb-6 pr-6">
-      <TablePage
-        ref="table"
-        row-key="id"
-        :default-sort="{ prop: 'lastUpdatedFmt', order: 'descending' }"
-        :remote-method="getData"
-        @sort-change="handleSortTable"
-      >
-        <ElTableColumn type="selection" width="45" />
-        <ElTableColumn
-          prop="hostname"
-          :label="$t('license_node_name')"
-          min-width="150"
-        />
-        <ElTableColumn
-          prop="sid"
-          :label="$t('license_node_sid')"
-          min-width="150"
-        />
-        <ElTableColumn :label="$t('license_status')" min-width="150">
-          <template #default="{ row }">
-            <span :class="`color-${row.status.color}`">{{
-              row.status.text
-            }}</span>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn :label="$t('daas_licenseType')" min-width="150">
-          <template #default="{ row }">
-            <el-tag>{{ TYPE_MAP[row.licenseType] }}</el-tag>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn
-          v-if="showLicenseType"
-          :label="$t('daas_datasourcePipelineLimit')"
-          min-width="160"
-        >
-          <template #default="{ row }">
-            <div
-              v-if="row.licenseType === 'PIPELINE'"
-              class="flex gap-2 align-center"
-            >
-              <el-progress
-                class="flex-1"
-                :percentage="row.pipelinePercentage"
-                :show-text="false"
-              />
-              <span
-                >{{ row.datasourcePipelineInUse }} /
-                {{ row.datasourcePipelineLimit }}</span
-              >
-              <el-button text type="primary" @click="openPipelineDetails">{{
-                $t('public_button_details')
-              }}</el-button>
-            </div>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn
-          prop="expirationDateFmt"
-          :label="$t('license_expire_date')"
-          min-width="160"
-        />
-        <ElTableColumn
-          prop="lastUpdatedFmt"
-          sortable
-          :label="$t('license_update_time')"
-          min-width="160"
-        />
-        <ElTableColumn :label="$t('public_operation')" width="88">
-          <template #default="{ row }">
-            <ElButton text type="primary" @click="updateNode(row)">{{
-              $t('public_event_update')
-            }}</ElButton>
-          </template>
-        </ElTableColumn>
-      </TablePage>
-      <ElDialog
-        v-model="dialogVisible"
-        append-to-body
-        :title="$t('license_renew_dialog')"
+    <TablePage
+      ref="table"
+      row-key="id"
+      :default-sort="{ prop: 'lastUpdatedFmt', order: 'descending' }"
+      :remote-method="getData"
+      @sort-change="handleSortTable"
+    >
+      <ElTableColumn type="selection" width="45" />
+      <ElTableColumn
+        prop="hostname"
+        :label="$t('license_node_name')"
+        min-width="150"
+      />
+      <ElTableColumn
+        prop="sid"
+        :label="$t('license_node_sid')"
+        min-width="150"
+      />
+      <ElTableColumn :label="$t('license_status')" min-width="150">
+        <template #default="{ row }">
+          <span :class="`color-${row.status.color}`">{{
+            row.status.text
+          }}</span>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn :label="$t('daas_licenseType')" min-width="150">
+        <template #default="{ row }">
+          <el-tag>{{ TYPE_MAP[row.licenseType] }}</el-tag>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn
+        v-if="showLicenseType"
+        :label="$t('daas_datasourcePipelineLimit')"
+        min-width="160"
       >
-        <ElInput v-model.trim="license" type="textarea" />
-        <template #footer>
-          <div>
-            <ElButton
-              type="primary"
-              :disabled="!license"
-              :loading="dialogLoading"
-              @click="updateLicense"
-              >{{ $t('public_event_update') }}</ElButton
+        <template #default="{ row }">
+          <div
+            v-if="row.licenseType === 'PIPELINE'"
+            class="flex gap-2 align-center"
+          >
+            <el-progress
+              class="flex-1"
+              :percentage="row.pipelinePercentage"
+              :show-text="false"
+            />
+            <span
+              >{{ row.datasourcePipelineInUse }} /
+              {{ row.datasourcePipelineLimit }}</span
             >
+            <el-button text type="primary" @click="openPipelineDetails">{{
+              $t('public_button_details')
+            }}</el-button>
           </div>
         </template>
-      </ElDialog>
-    </section>
+      </ElTableColumn>
+      <ElTableColumn
+        prop="expirationDateFmt"
+        :label="$t('license_expire_date')"
+        min-width="160"
+      />
+      <ElTableColumn
+        prop="lastUpdatedFmt"
+        sortable
+        :label="$t('license_update_time')"
+        min-width="160"
+      />
+      <ElTableColumn :label="$t('public_operation')" width="88">
+        <template #default="{ row }">
+          <ElButton text type="primary" @click="updateNode(row)">{{
+            $t('public_event_update')
+          }}</ElButton>
+        </template>
+      </ElTableColumn>
+    </TablePage>
+    <ElDialog
+      v-model="dialogVisible"
+      append-to-body
+      :title="$t('license_renew_dialog')"
+    >
+      <ElInput v-model.trim="license" type="textarea" />
+      <template #footer>
+        <div>
+          <ElButton
+            type="primary"
+            :disabled="!license"
+            :loading="dialogLoading"
+            @click="updateLicense"
+            >{{ $t('public_event_update') }}</ElButton
+          >
+        </div>
+      </template>
+    </ElDialog>
 
     <ElDialog
       v-model="detailsDialog.show"

apps/daas/src/views/cluster/Cluster.vue

@@ -557,8 +557,7 @@ export default {
       clusterApi.editAgent(this.custId, data).then(() => {
         this.editAgentDialog = false
         this.$message.success(this.$t('public_message_save_ok'))
-
-        this.$set(this.editAgentItem, 'agentName', this.agentName)
+        this.editAgentItem.agentName = this.agentName
       })
       // .catch(() => {
       // })

apps/daas/src/views/setting/Setting.vue

@@ -287,11 +287,11 @@ export default {
     },
 
     handleChangeCert(target, value) {
-      this.$set(target, 'value', value)
+      target.value = value
     },
 
     handleChangeName(target, name) {
-      this.$set(target, 'fileName', name)
+      target.fileName = name
     },
   },
 }

apps/daas/src/views/setting/WebhookAlerts.vue

@@ -310,7 +310,7 @@ export default {
       })
     },
     handleSwitch(row) {
-      this.$set(this.switchStateMap, row.id, true)
+      this.switchStateMap[row.id] = true
       webhookApi[row.open ? 'close' : 'open'](row.id)
         .then(() => {
           row.open = !row.open
@@ -320,15 +320,16 @@ export default {
           row.open = !row.open
         })
         .finally(() => {
-          this.$delete(this.switchStateMap, row.id)
+          delete this.switchStateMap[row.id]
         })
     },
     async reSend(request) {
-      this.$set(this.resendStateMap, request.id, true)
+      this.resendStateMap[request.id] = true
       const result = await webhookApi.resend(request)
       Object.assign(request, this.mapHistory(result))
       this.$message.success(this.$t('public_message_send_success'))
-      this.$delete(this.resendStateMap, request.id)
+
+      delete this.resendStateMap[request.id]
     },
     afterCloseHistory() {
       this.historyState.collapse = []
@@ -474,7 +475,7 @@ export default {
                 </span>
               </template>
               <JsonEditor
-                v-model="form.customTemplate"
+                v-model:value="form.customTemplate"
                 height="320"
                 :options="{
                   options: { showPrintMargin: false, useWrapMode: true },

packages/assets/styles/element.scss

@@ -266,7 +266,7 @@
   &--small {
     --el-border-radius-base: var(--el-border-radius-small)
   }
-  & + button.el-button {
+  & + .el-button.el-button {
     margin-left: var(--btn-space);
   }
 
@@ -319,6 +319,10 @@
       --el-fill-color-light: var(--el-color-primary-light-9);
       --el-fill-color: var(--el-color-primary-light-8);
     }
+
+    &:not(.is-disabled).is-active {
+      background-color: var(--el-fill-color-light);
+    }
   }
 
   &.is-text i + span:empty {
@@ -363,7 +367,8 @@
   .el-collapse-item__header {
     padding: 0 var(--collapse-padding-primary);
     .el-collapse-item__arrow {
-      margin-right: 0;
+      // margin-right: 0;
+      font-size: 12px;
     }
   }
 

packages/assets/styles/var.scss

@@ -148,4 +148,8 @@ $tag-icon-span-gap: (
   $tag: (
     'border-radius': 6px,
   ),
-);
+  $collapse: (
+    'header-font-size': 14px,
+    'content-font-size': 14px,
+  ),
+);

packages/business/src/components/StageButton.vue

@@ -131,11 +131,14 @@ export default {
     <template v-if="loading">
       <span>{{ progress }}</span>
     </template>
-    <template v-else>
-      <slot>
-        <span>{{ label }}</span>
-        <VIcon class="ml-1" size="9">icon_table_selector_load</VIcon>
-      </slot>
+
+    <slot v-if="!$slots.icon && !loading">
+      <span>{{ label }}</span>
+      <VIcon class="ml-1" size="9">icon_table_selector_load</VIcon>
+    </slot>
+
+    <template v-if="$slots.icon && !loading" #icon>
+      <slot name="icon" />
     </template>
   </ElButton>
 </template>