fix(仪表板): 分享链接 Ticket 参数 JSON 格式错误没有提示

core/core-frontend/src/locales/en.ts

@@ -3702,7 +3702,7 @@ export default {
       'Unit: minutes, range: [0-1440], 0 means no time limit, starting from the first access using the ticket',
     arg_val_tips: 'Please enter parameter values',
     arg_format_tips:
-      'Please use JSON format string, example single valued [argVal], multi valued [argVal1, argVal2]',
+      'Please use JSON array format, example single valued [argVal], multi valued [argVal1, argVal2]',
     param_error: 'Ticket parameter error!',
     exp_error: 'Ticket has expired!',
     disable_error: 'Sharing feature has been disabled, please contact administrator!',

core/core-frontend/src/locales/tw.ts

@@ -3595,7 +3595,7 @@ export default {
     refresh: '刷新',
     time_tips: '單位: 分鐘，範圍: [0-1440],0代表無期限，自首次使用ticket訪問開始',
     arg_val_tips: '請輸入參數值',
-    arg_format_tips: '請使用JSON格式字符串，示例單值[argVal]，多值[argVal1, argVal2]',
+    arg_format_tips: '請使用JSON數組格式，示例單值[argVal]，多值[argVal1, argVal2]',
     param_error: 'Ticket 參數錯誤！',
     exp_error: 'Ticket 已過期！',
     disable_error: '已禁用分享功能，請聯系管理員！',

core/core-frontend/src/locales/zh-CN.ts

@@ -3601,7 +3601,7 @@ export default {
     refresh: '刷新',
     time_tips: '单位: 分钟，范围: [0-1440],0代表无期限，自首次使用ticket访问开始',
     arg_val_tips: '请输入参数值',
-    arg_format_tips: '请使用JSON格式字符串，示例单值[argVal]，多值[argVal1, argVal2]',
+    arg_format_tips: '请使用JSON数组格式，示例单值[argVal]，多值[argVal1, argVal2]',
     param_error: 'Ticket 参数错误！',
     exp_error: 'Ticket 已过期！',
     disable_error: '已禁用分享功能，请联系管理员！',

core/core-frontend/src/views/share/share/TicketEdit.vue

@@ -16,6 +16,7 @@ const { t } = useI18n()
 const dialogVisible = ref(false)
 const loadingInstance = ref(null)
 const ticketForm = ref<FormInstance>()
+const inputRefList = ref<HTMLElement[]>([])
 const props = defineProps({
   uuid: propTypes.string.def('')
 })
@@ -171,6 +172,52 @@ const argList2Args = () => {
   })
   state.form.args = JSON.stringify(argObj)
 }
+const setErrorStatus = (index, value, status?: boolean) => {
+  let valid = !!status
+  if (!value?.length) {
+    valid = true
+  } else if (status === null || typeof status === 'undefined') {
+    try {
+      JSON.parse(value)
+      valid = true
+    } catch (error) {
+      valid = false
+    }
+  }
+  debugger
+  const domRef = inputRefList[index]
+  const e = domRef.input
+  const className = 'link-ticket-error-msg'
+  const fullClassName = `.${className}`
+  if (valid) {
+    e.style = null
+    e.style.borderColor = null
+    const child = e.parentElement.querySelector(fullClassName)
+    if (child) {
+      e.parentElement['style'] = null
+      e.parentElement.removeChild(child)
+    }
+  } else {
+    const msg = 'JSON格式错误'
+    e.style.color = 'red'
+    e.style.borderColor = 'red'
+    e.parentElement['style']['box-shadow'] = '0 0 0 1px red inset'
+    const child = e.parentElement.querySelector(fullClassName)
+    if (!child) {
+      const errorDom = document.createElement('div')
+      errorDom.className = className
+      errorDom.innerText = msg
+      e.parentElement.appendChild(errorDom)
+    } else {
+      child.innerText = msg
+    }
+  }
+}
+const setInputRef = (el, index) => {
+  if (el) {
+    inputRefList[index] = el
+  }
+}
 const copyTicket = async ticket => {
   const url = `${linkUrl.value}?ticket=${ticket}`
   try {
@@ -287,7 +334,12 @@ defineExpose({
         </template>
         <div class="args-line" v-for="(row, index) in state.argList" :key="index">
           <el-input v-model="row['name']" :placeholder="t('visualization.input_param_name')" />
-          <el-input v-model="row['val']" :placeholder="t('link_ticket.arg_val_tips')" />
+          <el-input
+            :ref="el => setInputRef(el, index)"
+            v-model="row['val']"
+            :placeholder="t('link_ticket.arg_val_tips')"
+            @blur="setErrorStatus(index, row['val'])"
+          />
           <div
             :style="{ opacity: state.argList.length !== 1 ? 1 : 0 }"
             class="arg-del-btn"
@@ -404,6 +456,16 @@ defineExpose({
     &:not(:last-child) {
       margin-bottom: 8px;
     }
+    :deep(.link-ticket-error-msg) {
+      color: red;
+      position: absolute;
+      z-index: 9;
+      font-size: 10px;
+      height: 10px;
+      top: 21px;
+      width: 350px;
+      left: 0px;
+    }
   }
   .ticket-tips-label {
     line-height: 22px;