feat(仪表板): 新增公共链接ticket设置(暂缓等待设计)

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

@@ -2203,6 +2203,9 @@ export default {
     export_time: '导出时间',
     you_can_type_here: '可以在这里输入其他内容'
   },
+  link_ticket: {
+    require: 'Ticket 必填'
+  },
   pblink: {
     key_pwd: '请输入密码打开链接',
     input_placeholder: '请输入4～10位数字或字母',

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

@@ -16,7 +16,7 @@
   <el-dialog
     v-if="dialogVisible && props.weight >= 7"
     class="copy-link_dialog"
-    :class="{ 'hidden-footer': !shareEnable }"
+    :class="{ 'hidden-footer': !shareEnable || showTicket }"
     v-model="dialogVisible"
     :close-on-click-modal="true"
     :append-to-body="true"
@@ -25,7 +25,7 @@
     width="480px"
     :show-close="false"
   >
-    <div class="share-dialog-container">
+    <div class="share-dialog-container" :class="{ 'hidden-link-container': showTicket }">
       <div class="copy-link">
         <div class="open-share flex-align-center">
           <el-switch size="small" v-model="shareEnable" @change="enableSwitcher" />
@@ -117,8 +117,12 @@
         </div>
       </div>
     </div>
+    <div v-if="shareEnable && showTicket" class="share-ticket-container">
+      <share-ticket :link-url="linkAddr" @close="closeTicket" />
+    </div>
     <template #footer>
       <span class="dialog-footer">
+        <!-- <el-button secondary @click="openTicket">Ticket 设置</el-button> -->
         <el-button :disabled="!shareEnable || expError" type="primary" @click.stop="copyInfo">
           {{ t('visualization.copy_link') }}
         </el-button>
@@ -135,6 +139,8 @@ import { propTypes } from '@/utils/propTypes'
 import { ShareInfo, SHARE_BASE, shortcuts } from './option'
 import { ElMessage, ElLoading } from 'element-plus-secondary'
 import useClipboard from 'vue-clipboard3'
+import ShareTicket from './ShareTicket.vue'
+
 const { toClipboard } = useClipboard()
 const { t } = useI18n()
 const props = defineProps({
@@ -154,6 +160,7 @@ const linkAddr = ref('')
 const expError = ref(false)
 const linkCustom = ref(false)
 const linkUuidRef = ref(null)
+const showTicket = ref(false)
 const state = reactive({
   detailInfo: {
     id: '',
@@ -447,6 +454,13 @@ const getUuid = () => {
   return result
 }
 
+const openTicket = () => {
+  showTicket.value = true
+}
+const closeTicket = () => {
+  showTicket.value = false
+}
+
 const execute = () => {
   share()
 }
@@ -596,5 +610,8 @@ onMounted(() => {
       }
     }
   }
+  .hidden-link-container {
+    display: none;
+  }
 }
 </style>

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

@@ -0,0 +1,255 @@
+<template>
+  <div class="ticket">
+    <div class="ticket-model">
+      <div class="ticket-model-start">
+        <el-tooltip class="item" effect="dark" :content="$t('link_ticket.back')" placement="top">
+          <span class="back-tips">
+            <el-icon class="custom-el-icon back-icon" @click="close">
+              <Icon class="toolbar-icon" name="icon_left_outlined" />
+            </el-icon>
+          </span>
+        </el-tooltip>
+        <span class="ticket-title">{{ 'Ticket ' + $t('commons.setting') }}</span>
+      </div>
+      <div class="ticket-model-end">
+        <el-checkbox v-model="requireTicket" @change="requireTicketChange" />
+        <span>{{ $t('link_ticket.require') }}</span>
+      </div>
+    </div>
+    <div class="ticket-table">
+      <!-- <div class="text-add-ticket">
+        <el-button class="de-text-btn mr2" type="text" icon="el-icon-plus" @click="addRow">{{
+          $t('commons.create')
+        }}</el-button>
+      </div>
+
+      <el-table :data="tableData" style="width: 100%" size="mini">
+        <el-table-column prop="ticket" label="ticket" width="120">
+          <template v-slot="scope">
+            <div class="ticket-row">
+              <span>{{ scope.row.ticket }}</span>
+              <el-tooltip class="item" effect="dark" :content="$t('commons.copy')" placement="top">
+                <span
+                  v-clipboard:copy="`${props.linkUrl}?ticket=${scope.row.ticket}`"
+                  v-clipboard:success="onCopy"
+                  v-clipboard:error="onError"
+                  class="copy-i"
+                >
+                  <svg-icon icon-class="de-icon-copy" />
+                </span>
+              </el-tooltip>
+              <el-tooltip
+                class="item"
+                effect="dark"
+                :content="`${$t('link_ticket.refresh')} ticket`"
+                placement="top"
+              >
+                <span class="refresh-i">
+                  <i class="el-icon-refresh-right" @click="refreshTicket(scope.row)" />
+                </span>
+              </el-tooltip>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="exp" :label="$t('panel.over_time')" width="100">
+          <template v-slot:header>
+            <span>{{ $t('panel.over_time') }}</span>
+            <el-tooltip
+              class="item"
+              effect="dark"
+              :content="$t('link_ticket.time_tips')"
+              placement="top"
+            >
+              <span class="check-tips">
+                <svg-icon icon-class="de-icon-info" @click="closeTicket" />
+              </span>
+            </el-tooltip>
+          </template>
+          <template v-slot="scope">
+            <el-input
+              v-if="scope.row.isEdit"
+              v-model="scope.row.exp"
+              type="number"
+              :placeholder="$t('commons.input_content')"
+              min="0"
+              max="1440"
+              size="small"
+              @change="val => validateExp(val, scope.$index)"
+            />
+            <span v-else>
+              {{ scope.row.exp }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="args" :label="$t('dataset.param')">
+          <template v-slot="scope">
+            <el-input
+              v-if="scope.row.isEdit"
+              v-model="scope.row.args"
+              type="text"
+              :placeholder="$t('commons.input_content')"
+              maxlength="200"
+              size="small"
+              @change="val => validateArgs(val, scope.$index)"
+            />
+            <span v-else>
+              {{ scope.row.args || '-' }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('commons.operating')" width="80">
+          <template v-slot="scope">
+            <div class="ticket-op">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                :content="$t('commons.delete')"
+                placement="top"
+              >
+                <span>
+                  <i class="el-icon-delete" @click="deleteTicket(scope.row, scope.$idnex)" />
+                </span>
+              </el-tooltip>
+              <el-tooltip
+                class="item"
+                effect="dark"
+                :content="scope.row.isEdit ? $t('commons.save') : $t('commons.edit')"
+                placement="top"
+              >
+                <span>
+                  <i v-if="!scope.row.isEdit" class="el-icon-edit" @click="editRow(scope.row)" />
+                  <i
+                    v-else
+                    class="el-icon-circle-check"
+                    @click="saveRow(scope.row, scope.$index)"
+                  />
+                </span>
+              </el-tooltip>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table> -->
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import { propTypes } from '@/utils/propTypes'
+
+const props = defineProps({
+  linkUrl: propTypes.string.def(null)
+})
+
+const requireTicket = ref(false)
+const tableData = reactive([])
+const emits = defineEmits(['close'])
+
+const close = () => {
+  emits('close')
+}
+
+const requireTicketChange = val => {
+  console.log(val)
+}
+
+const addRow = () => {
+  console.log(11)
+}
+
+const refreshTicket = row => {
+  console.log(row)
+}
+const closeTicket = () => {
+  console.log(11)
+}
+
+const validateExp = (val, index) => {
+  console.log(val)
+  console.log(index)
+}
+
+const validateArgs = (val, index) => {
+  console.log(val)
+  console.log(index)
+}
+
+const deleteTicket = (val, index) => {
+  console.log(val)
+  console.log(index)
+}
+
+const saveRow = (val, index) => {
+  console.log(val)
+  console.log(index)
+}
+const editRow = row => {
+  console.log(row)
+}
+const onCopy = e => {
+  console.log(e)
+}
+const onError = e => {
+  console.log(e)
+}
+</script>
+
+<style lang="less" scoped>
+.ticket {
+  height: 261px;
+  .ticket-model {
+    display: flex;
+    justify-content: space-between;
+    padding: 16px 0;
+    .ticket-model-start {
+      display: flex;
+      color: #1f2329;
+      font-family: PingFang SC;
+      font-weight: 500;
+      font-size: 14px;
+      .ticket-title {
+        font-size: 14px;
+      }
+      .back-tips {
+        width: 22px;
+        margin-right: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &:hover {
+          background-color: rgba(51, 112, 255, 0.1);
+          color: var(--primary);
+          cursor: pointer;
+        }
+      }
+    }
+
+    label {
+      margin-right: 8px;
+    }
+  }
+  .ticket-table {
+    padding: 0 0;
+    // height: 260px;
+    height: 50px;
+    overflow-y: overlay;
+    position: relative;
+    ::v-deep .error-msg {
+      color: red;
+      position: fixed;
+      z-index: 9;
+      font-size: 10px;
+      height: 10px;
+    }
+    ::v-deep .check-tips {
+      margin-left: 4px;
+    }
+    .text-add-ticket {
+      width: 48px;
+      height: 22px;
+      gap: 4px;
+    }
+  }
+}
+</style>