Feat/tap 11963 user log i18nmessage

apps/daas/src/views/notification/NotificationPopover.vue

@@ -503,7 +503,7 @@ export default {
           border-radius: 50%;
         }
         &:hover {
-          background-color: #ecf5ff;
+          background-color: var(--el-fill-color-light);
         }
         &:last-child {
           border: none;

apps/daas/src/views/notification/UserNotification.vue

@@ -148,11 +148,15 @@ export default {
             <VIcon>magnify</VIcon>
           </template>
         </el-input>
+
+        <ElButton plain circle class="rounded-lg" @click="getData">
+          <VIcon>refresh</VIcon>
+        </ElButton>
       </div>
       <ul class="list">
-        <li v-for="record in list" :key="record._id" class="item">
+        <li v-for="record in list" :key="record._id" class="item gap-2">
           <UserOperation :record="record" />
-          <span class="item-time">{{ record.createTimeFmt }}</span>
+          <span class="item-time text-nowrap">{{ record.createTimeFmt }}</span>
         </li>
       </ul>
       <el-pagination
@@ -207,8 +211,7 @@ export default {
     display: flex;
     align-items: center;
     .search-item {
-      margin-right: 15px;
-      width: 200px;
+      width: 300px;
     }
   }
   .list {
@@ -219,7 +222,7 @@ export default {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      line-height: 50px;
+      min-height: 50px;
       border-bottom: 1px solid var(--border-light);
       font-size: var(--font-base-title);
       color: #202d40;

apps/daas/src/views/notification/UserOperation.vue

@@ -1,36 +1,149 @@
-<script>
-import { h } from 'vue'
-
-export default {
-  props: {
-    record: {
-      type: Object,
-      required: true,
-    },
-  },
-  render() {
-    const record = this.record
-    const activeTextStyle = 'color: #2C65FF; padding-right: 5px;'
+<script setup lang="ts">
+import { useI18n } from '@tap/i18n'
+import { computed, h } from 'vue'
+import { useRouter } from 'vue-router'
+
+interface UserOperationRecord {
+  email?: string
+  i18nMessage?: string
+  modular?: string
+  operation?: string
+  parameter1?: unknown
+  sourceId?: number | string
+  sourceName?: unknown
+  user?: unknown
+  username?: unknown
+  [key: string]: unknown
+}
+
+const SOURCE_ROUTE_MAP: Record<string, string> = {
+  sync: 'TaskMonitor',
+  dataflow: 'TaskMonitor',
+  migrate: 'MigrationMonitor',
+  migration: 'MigrationMonitor',
+  connection: 'connectionsEdit',
+  LogCoLLector: 'SharedMiningMonitor',
+  LogCollector: 'SharedMiningMonitor',
+  logCollector: 'SharedMiningMonitor',
+  mem_cache: 'SharedCacheMonitor',
+  shareCache: 'SharedCacheMonitor',
+  connHeartbeat: 'HeartbeatMonitor',
+}
+
+const props = defineProps<{
+  record: UserOperationRecord
+}>()
+
+const router = useRouter()
+const { t } = useI18n()
+
+const sourceId = computed(() => props.record.sourceId)
+const hasSourceId = computed(
+  () =>
+    sourceId.value !== undefined &&
+    sourceId.value !== null &&
+    sourceId.value !== '',
+)
+
+const sourceRouteName = computed(() => {
+  const modular = toText(props.record.modular)
+  return modular ? SOURCE_ROUTE_MAP[modular] : ''
+})
+
+const canOpenSource = computed(
+  () => hasSourceId.value && !!sourceRouteName.value,
+)
+
+const message = computed(() => {
+  if (props.record.i18nMessage) {
+    return props.record.i18nMessage
+  }
+
+  const modular =
+    props.record.modular === 'migrate' ? 'migration' : props.record.modular
+
+  return [
+    `${t('notification_account')} `,
+    '{user}',
+    t(`notification_operation_${props.record.operation}`),
+    `${t(`notification_modular_${modular}`)} `,
+    '{sourceName}',
+  ].join('')
+})
+
+const UserOperationContent = () => renderMessage()
+
+function renderMessage() {
+  return message.value.split(/(\{[^{}]+\})/g).map((chunk) => {
+    const key = chunk.match(/^\{([^{}]+)\}$/)?.[1]?.trim()
+    if (!key) return chunk
+
+    const text = getPlaceholderText(key)
+    return renderPlaceholder(key, text || chunk, !!text)
+  })
+}
+
+function renderPlaceholder(key: string, text: string, replaced: boolean) {
+  if (key === 'parameter1' && replaced && canOpenSource.value) {
     return h(
-      'div',
+      ElLink,
       {
-        class: 'user-operation-wrap',
+        class: 'user-operation-link color-primary',
+        underline: true,
+        type: 'primary',
+        onClick: (event: MouseEvent) => {
+          event.stopPropagation()
+          openSource()
+        },
       },
-      [
-        `${this.$t('notification_account')} `,
-        h('span', { style: activeTextStyle }, record.username || record.email),
-        this.$t(`notification_operation_${record.operation}`),
-        `${this.$t(`notification_modular_${record.modular}`)} `,
-        h('span', { style: activeTextStyle }, record.parameter1),
+      () => [
+        text,
+        h(
+          ElIcon,
+          {
+            class: 'user-operation-link-icon ml-1',
+            size: 16,
+          },
+          () => h(IconLucideExternalLink),
+        ),
       ],
     )
-  },
+  }
+
+  return h('span', { class: replaced ? 'color-primary' : '' }, text)
 }
-</script>
 
-<style lang="scss" scoped>
-.user-operation-wrap {
-  display: inline-block;
-  color: var(--text-light);
+function toText(value: unknown) {
+  if (value === undefined || value === null) return ''
+  return String(value)
+}
+
+function getPlaceholderText(key: string) {
+  if (key === 'user') {
+    return toText(props.record.username) || toText(props.record.email)
+  }
+
+  return toText(props.record[key])
 }
-</style>
+
+function openSource() {
+  if (!canOpenSource.value) return
+
+  const route = router.resolve({
+    name: sourceRouteName.value,
+    params: {
+      id: sourceId.value,
+    },
+  })
+
+  window.open(route.href, '_blank')
+}
+</script>
+
+<template>
+  <div
+    class="user-operation-wrap flex flex-wrap align-center text-prewrap lh-bae min-w-0 break-all"
+  >
+    <UserOperationContent />
+  </div>
+</template>

packages/business/src/views/connections/DatabaseForm.vue

@@ -375,8 +375,16 @@ export default {
     },
     async getPdkForm() {
       const pdkHash = this.$route.query?.pdkHash
-      const data = await fetchDatabaseTypeByPdkHash(pdkHash)
       const id = this.id || this.$route.params.id
+
+      if (id) {
+        await this.getPdkData(id)
+      }
+
+      const data = await fetchDatabaseTypeByPdkHash(
+        pdkHash || this.model.pdkHash,
+      )
+
       this.pdkOptions = data || {}
 
       if (
@@ -1286,7 +1294,6 @@ export default {
       }
 
       if (id) {
-        await this.getPdkData(id)
         // 开启了共享挖掘
         const { shareCdcEnable, shareCDCExternalStorageId } = this.model
         if (shareCdcEnable && shareCDCExternalStorageId) {
@@ -1688,7 +1695,7 @@ export default {
               <div class="flex align-center overflow-hidden gap-2">
                 <DatabaseIcon
                   class="flex-shrink-0"
-                  :item="$route.query"
+                  :pdk-hash="$route.query.pdkHash || pdkOptions.pdkHash"
                   :size="20"
                 />
                 <template v-if="!$route.params.id">