Merge pull request #8704 from dataease/pr@dev@style_pblink_ticket

style: 公共链接ticket设置页面设计优化

core/frontend/src/icons/svg/de-icon-copy.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.33333 4.33334V12.3333H8V4.33334H1.33333ZM9.33333 3.66668V13.0741C9.33333 13.4014 9.05476 13.6667 8.71111 13.6667H0.622222C0.278578 13.6667 0 13.4014 0 13.0741V3.5926C0 3.26532 0.278578 3.00001 0.622222 3.00001H8.66667C9.03486 3.00001 9.33333 3.29849 9.33333 3.66668ZM11.8047 0.528606C11.9254 0.649249 12 0.815915 12 1.00001V9.33334C12 9.51744 11.8508 9.66668 11.6667 9.66668H11C10.8159 9.66668 10.6667 9.51744 10.6667 9.33334V1.66668H4.33333C4.14924 1.66668 4 1.51744 4 1.33334V0.666677C4 0.482582 4.14924 0.333344 4.33333 0.333344H11.3333C11.5174 0.333344 11.6841 0.407963 11.8047 0.528606Z" fill=""/>
+</svg>

core/frontend/src/icons/svg/de-icon-info.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00008 3.66667C8.46031 3.66667 8.83341 4.03977 8.83341 4.5C8.83341 4.96023 8.46031 5.33333 8.00008 5.33333C7.53985 5.33333 7.16675 4.96023 7.16675 4.5C7.16675 4.03977 7.53985 3.66667 8.00008 3.66667Z" fill=""/>
+<path d="M8.16675 6H7.33341C7.05727 6 6.83341 6.22386 6.83341 6.5V6.83333C6.83341 7.10948 7.05727 7.33333 7.33341 7.33333H7.50008V10.6667H6.83341C6.55727 10.6667 6.33341 10.8905 6.33341 11.1667V11.5C6.33341 11.7761 6.55727 12 6.83341 12H9.50008C9.77622 12 10.0001 11.7761 10.0001 11.5V11.1667C10.0001 10.8905 9.77622 10.6667 9.50008 10.6667H8.83341V6.66667C8.83341 6.29848 8.53494 6 8.16675 6Z" fill=""/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00008 15.3332C3.95008 15.3332 0.666748 12.0498 0.666748 7.99984C0.666748 3.94984 3.95008 0.666504 8.00008 0.666504C12.0501 0.666504 15.3334 3.94984 15.3334 7.99984C15.3334 12.0498 12.0501 15.3332 8.00008 15.3332ZM8.00008 13.9998C11.3138 13.9998 14.0001 11.3135 14.0001 7.99984C14.0001 4.68617 11.3138 1.99984 8.00008 1.99984C4.68642 1.99984 2.00008 4.68617 2.00008 7.99984C2.00008 11.3135 4.68642 13.9998 8.00008 13.9998Z" fill=""/>
+</svg>

core/frontend/src/views/link/generate/index.vue

@@ -10,7 +10,7 @@
       />
     </el-tabs>
     <div
-      v-if="activeName === 'link'"
+      v-if="!showIndex"
       class="link"
     >
       <el-form
@@ -97,7 +97,12 @@
           class="auth-root-class"
         >
           <span slot="footer">
-
+            <el-button
+              v-if="valid"
+              plain
+              size="mini"
+              @click="openTicket"
+            >Ticket 设置</el-button>
             <el-button
               v-if="!form.enablePwd"
               v-clipboard:copy="form.uri"
@@ -123,42 +128,47 @@
     </div>
 
     <div
-      v-if="activeName === 'ticket'"
+      v-else
       class="ticket"
     >
       <div class="ticket-model">
-        <el-checkbox
-          v-model="requireTicket"
-          @change="requireTicketChange"
-        />
-        <span>ticket必选</span>
-        <el-tooltip
-          class="item"
-          effect="dark"
-          content="选择后原始公共链接无效，必须携带ticket参数"
-          placement="top"
-        >
-          <span class="check-tips"><i class="el-icon-warning" /></span>
-        </el-tooltip>
+        <div class="ticket-model-start">
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="返回公共链接设置页面"
+            placement="top"
+          >
+            <span class="back-tips">
+              <svg-icon
+                icon-class="icon_left_outlined"
+                @click="closeTicket"
+              />
+            </span>
+          </el-tooltip>
+          <span class="ticket-title">Ticket 设置</span>
+        </div>
+        <div class="ticket-model-end">
+          <el-checkbox
+            v-model="requireTicket"
+            @change="requireTicketChange"
+          />
+          <span>必选</span>
+        </div>
+
       </div>
       <div
         class="ticket-table"
       >
-        <div class="add-ticket">
-          <el-tooltip
-            class="item"
-            effect="dark"
-            content="创建"
-            placement="top"
-          >
-            <span>
-              <i
-                class="el-icon-circle-plus-outline"
-                @click="addRow()"
-              />
-            </span>
-          </el-tooltip>
+        <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%"
@@ -167,11 +177,28 @@
           <el-table-column
             prop="ticket"
             label="ticket"
-            width="100"
+            width="120"
           >
             <template slot-scope="scope">
               <div class="ticket-row">
                 <span>{{ scope.row.ticket }}</span>
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  content="复制"
+                  placement="top"
+                >
+                  <span
+                    v-clipboard:copy="`${form.uri}?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"
@@ -180,7 +207,7 @@
                 >
                   <span class="refresh-i">
                     <i
-                      class="el-icon-refresh"
+                      class="el-icon-refresh-right"
                       @click="refreshTicket(scope.row)"
                     />
                   </span>
@@ -202,7 +229,12 @@
                 content="单位: 分钟，范围: [0-1440],0代表无期限，自首次使用ticket访问开始"
                 placement="top"
               >
-                <span class="check-tips"><i class="el-icon-warning" /></span>
+                <span class="check-tips">
+                  <svg-icon
+                    icon-class="de-icon-info"
+                    @click="closeTicket"
+                  />
+                </span>
               </el-tooltip>
             </template>
             <template slot-scope="scope">
@@ -222,18 +254,10 @@
               </span>
             </template>
           </el-table-column>
-          <el-table-column prop="args">
-            <template slot="header">
-              <span>参数</span>
-              <el-tooltip
-                class="item"
-                effect="dark"
-                content="最大长度200，配合仪表板外部参数使用，必须是json格式，例如: {&quot;arg1&quot;: &quot;value1&quot;}"
-                placement="top"
-              >
-                <span class="check-tips"><i class="el-icon-warning" /></span>
-              </el-tooltip>
-            </template>
+          <el-table-column
+            prop="args"
+            label="参数"
+          >
             <template slot-scope="scope">
               <el-input
                 v-if="scope.row.isEdit"
@@ -246,7 +270,7 @@
                 @change="val => validateArgs(val, scope.$index)"
               />
               <span v-else>
-                {{ scope.row.args }}
+                {{ scope.row.args || '-' }}
               </span>
             </template>
           </el-table-column>
@@ -321,6 +345,7 @@ export default {
   },
   data() {
     return {
+      showIndex: 0,
       requireTicket: false,
       uuid: '',
       tabList: [
@@ -376,21 +401,18 @@ export default {
       return window.location.origin
     }
   },
-  watch: {
-    valid(val) {
-      if (val) {
-        this.tabList.push({ name: 'ticket', 'label': 'Ticket设置' })
-      } else {
-        this.tabList.splice(1, 1)
-        this.activeName = 'link'
-      }
-    }
-  },
+
   created() {
     this.form = this.defaultForm
     this.currentGenerate()
   },
   methods: {
+    openTicket() {
+      this.showIndex = 1
+    },
+    closeTicket() {
+      this.showIndex = 0
+    },
     setExpRef(index) {
       return `expRef-${index}`
     },
@@ -456,6 +478,9 @@ export default {
         row.ticket = res.data
       })
     },
+    copyTicket(row) {
+      console.log(row)
+    },
     deleteTicket(row, index) {
       const param = { ticket: row.ticket }
       delTicketApi(param).then(() => {
@@ -660,32 +685,23 @@ export default {
       padding: 0 20px !important;
       .ticket-model {
         display: flex;
-        padding: 8px 0px 8px 10px;
-        label {
-          margin-right: 8px;
-        }
-        .check-tips {
-          margin: 0 16px 0 4px;
-        }
-      }
-      .ticket-table {
-        padding: 10px 0 10px 8px;
-        height: 260px;
-        overflow-y: overlay;
-        position: relative;
-        .add-ticket {
-          position: absolute;
-          width: 20px;
-          height: 20px;
-          top: 18px;
-          right: 5px;
-          z-index: 9;
-          span {
-            width: 20px;
-            height: 20px;
-            line-height: 20px;
-            font-size: 16px;
-            padding: 2px;
+        justify-content: space-between;
+        padding: 0 10px;
+        .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, .1);
               color: var(--primary);
@@ -693,6 +709,17 @@ export default {
             }
           }
         }
+
+        label {
+          margin-right: 8px;
+        }
+
+      }
+      .ticket-table {
+        padding: 10px 0 10px 8px;
+        height: 260px;
+        overflow-y: overlay;
+        position: relative;
         ::v-deep .error-msg {
           color: red;
           position: fixed;
@@ -700,6 +727,14 @@ export default {
           font-size: 10px;
           height: 10px;
         }
+        ::v-deep .check-tips {
+          margin-left: 4px;
+        }
+        .text-add-ticket {
+          width: 48px;
+          height: 22px;
+          gap: 4px;
+        }
       }
 
     }
@@ -725,9 +760,9 @@ export default {
       height: 16px;
       line-height: 16px;
       padding: 2px;
+      color: var(--primary);
       &:hover {
         background-color: rgba(51, 112, 255, .1);
-        color: var(--primary);
         cursor: pointer;
       }
     }
@@ -736,14 +771,14 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    .refresh-i {
-      height: 17px;
+    .refresh-i,.copy-i {
+      height: 18px;
       width: 16px;
       line-height: 13px;
       padding: 2px;
+      color: var(--primary);
       &:hover {
         background-color: rgba(51, 112, 255, .1);
-        color: var(--primary);
         cursor: pointer;
       }
     }