NEZ-1965 feat : 列表页面内容复制功能

nezha-fronted/src/assets/css/common.scss

@@ -451,16 +451,19 @@ textarea {
   }
 }
 .document-copy-block {
-  padding-right: 15px;
-  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: start;
+}
+.document-copy-text{
+  margin-right: 10px;
 }
 
-.document-copy-block:hover i {
-  display: block !important;
+.document-copy-block:hover i.nz-icon-override {
+  visibility: visible !important;
 }
-.document-copy-block i {
-  position: absolute;
-  top: calc((100% - 20px)/2);
-  right: 0;
+.document-copy-block i.nz-icon-override {
+  display: flex;
+  align-items: center;
   transform: scale(0.95);
 }

nezha-fronted/src/components/common/table/alert/alertRuleTable.vue

@@ -119,6 +119,18 @@
             </div>
           </el-popover>
         </template>
+        <template v-else-if="item.prop === 'name'">
+            <div style="cursor:text" class="document-copy-block">
+              <span class="document-copy-text">{{scope.row.name ? scope.row.name : '-'}}</span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
+            </div>
+          </template>
+        <template v-else-if="item.prop === 'expr'">
+            <div style="cursor:text" class="document-copy-block">
+              <span class="document-copy-text">{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row[item.prop])"></i>
+            </div>
+          </template>
         <span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
         <template v-else>-</template>

nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue

@@ -96,6 +96,12 @@
         <template v-else-if="item.prop === 'startAt'">
           {{ utcTimeToTimezoneStr(scope.row[item.prop]) }}
         </template>
+        <template v-else-if="item.prop === 'name'">
+           <div style="cursor:text" class="document-copy-block">
+              <span class="document-copy-text">{{scope.row.name ? scope.row.name : '-'}}</span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
+            </div>
+        </template>
         <span v-else-if="scope.row[item.prop]">{{
           scope.row[item.prop] || "-"
         }}</span>

nezha-fronted/src/components/common/table/asset/assetTable.vue

@@ -40,14 +40,14 @@
         <template slot-scope="scope" :column="item">
           <template v-if="item.prop === 'name'">
             <div style="cursor:text" class="document-copy-block">
-              {{scope.row.name ? scope.row.name : '-'}}
-              <i  class="nz-icon nz-icon-override" style="cursor: pointer;display:none" @click="onCopy(scope.row.name)"></i>
+              <span class="document-copy-text">{{scope.row.name ? scope.row.name : '-'}}</span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
             </div>
           </template>
            <template v-else-if="item.prop === 'manageIp'">
             <div style="cursor:text" class="document-copy-block">
-              {{scope.row.manageIp ? scope.row.manageIp : '-'}}
-              <i  class="nz-icon nz-icon-override" style="cursor: pointer;display:none" @click="onCopy(scope.row.manageIp)"></i>
+              <span class="document-copy-text">{{scope.row.manageIp ? scope.row.manageIp : '-'}}</span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.manageIp)"></i>
             </div>
           </template>
           <template v-else-if="item.prop === 'type'">{{scope.row.type ? scope.row.type.name : '-'}}</template>
@@ -105,8 +105,8 @@
           </template>
           <template v-else-if="item.prop === 'sn'">
             <div style="cursor:text" class="document-copy-block">
-              {{scope.row.sn ? scope.row.sn : '-'}}
-              <i  class="nz-icon nz-icon-override" style="cursor: pointer;display:none" @click="onCopy(scope.row.sn)"></i>
+              <span class="document-copy-text">{{scope.row.sn ? scope.row.sn : '-'}}</span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.sn)"></i>
             </div>
           </template>
           <template v-else-if="item.prop === 'talon'">
@@ -185,7 +185,6 @@
 </template>
 
 <script>
-import mainMixinFun from '@/components/common/mixin/mainMixinFun'
 import table from '@/components/common/mixin/table'
 import { showTableTooltip, hideTableTooltip } from '@/components/common/js/tools'
 // import bus from '@/libs/bus'
@@ -194,7 +193,7 @@ import alertDaysInfo from '@/components/common/alert/alertDaysInfo'
 import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
 export default {
   name: 'assetTable',
-  mixins: [table, alertLabelMixin, mainMixinFun],
+  mixins: [table, alertLabelMixin],
   components: {
     alertLabel: alertLabel,
     alertDaysInfo

nezha-fronted/src/components/common/table/settings/agentTable.vue

@@ -50,6 +50,18 @@
             </div>
           </el-popover>
         </span>
+        <template v-else-if="item.prop === 'name'">
+            <div style="cursor:text" class="document-copy-block">
+              <span class="document-copy-text">{{scope.row.name ? scope.row.name : '-'}}</span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
+            </div>
+          </template>
+        <template v-else-if="item.prop === 'host'">
+            <div style="cursor:text" class="document-copy-block">
+              <span class="document-copy-text">{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row[item.prop])"></i>
+            </div>
+          </template>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
         <template v-else>-</template>
       </template>

nezha-fronted/src/components/common/table/settings/chartTmplTable.vue

@@ -41,6 +41,12 @@
           <i :class="typeIcon(scope.row)"/>
         {{findTypeLabel(scope.row)}}
         </span>
+        <template v-else-if="item.prop === 'name'">
+            <div style="cursor:text" class="document-copy-block">
+              <span class="document-copy-text">{{scope.row.name ? scope.row.name : '-'}}</span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
+            </div>
+          </template>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
         <template v-else>-</template>
       </template>

nezha-fronted/src/components/common/table/settings/credentialsTable.vue

@@ -42,10 +42,10 @@
           <template v-else>-</template>
         </template>
         <template v-if="item.prop === 'name'">
-          <template v-if="scope.row.name">
-            {{scope.row.name}}
-          </template>
-          <template v-else>-</template>
+          <div style="cursor:text" class="document-copy-block">
+              <span class="document-copy-text">{{scope.row.name ? scope.row.name : '-'}}</span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
+            </div>
         </template>
         <template v-if="item.prop === 'type'">
           <template v-if="scope.row.type">

nezha-fronted/src/components/common/table/settings/endpointTable.vue

@@ -38,39 +38,46 @@
         </template>
         <template slot-scope="scope" :column="item">
           <template v-if="item.prop === 'name'">
-            {{scope.row[item.prop]}}
+            <div style="cursor:text" class="document-copy-block">
+              <span class="document-copy-text">{{scope.row[item.prop]}}</span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
+            </div>
           </template>
           <template v-else-if="item.prop === 'type'">
             {{scope.row.module.type}}
           </template>
           <template v-else-if="item.prop === 'project'">
-          <span
-            class="pointer"
-            @mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
-            @mouseleave="labelHover(scope.row, item.prop, false,true)"
-          >
-            {{scope.row[item.prop].name}}
-          </span>
+            <div style="cursor:text" class="document-copy-block">
+              <span class="pointer document-copy-text"
+              @mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
+              @mouseleave="labelHover(scope.row, item.prop, false,true)">
+              {{scope.row[item.prop].name}}
+              </span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row[item.prop].name)"></i>
+            </div>
           </template>
           <template v-else-if="item.prop === 'module'">
-          <span
-            class="pointer"
-            @mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
-            @mouseleave="labelHover(scope.row, item.prop, false,true)"
-          >
-            <i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>
-          {{scope.row[item.prop].name}}
-          </span>
+            <div style="cursor:text" class="document-copy-block">
+               <span class="pointer document-copy-text"
+               @mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
+               @mouseleave="labelHover(scope.row, item.prop, false,true)">
+              <i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>
+              {{scope.row[item.prop].name}}
+              </span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row[item.prop].name)"></i>
+            </div>
           </template>
           <template v-else-if="item.prop === 'asset'">
-          <span
-            class="pointer"
-            @mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
-            @mouseleave="labelHover(scope.row, item.prop, false,true)"
-          >
-            <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i>
-            {{scope.row.asset.name}}
-          </span>
+           <div style="cursor:text" class="document-copy-block">
+              <span
+              class="pointer document-copy-text"
+              @mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
+              @mouseleave="labelHover(scope.row, item.prop, false,true)">
+              <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i>
+              {{scope.row.asset.name}}
+             </span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.asset.name)"></i>
+            </div>
           </template>
           <template v-else-if="item.prop === 'alerts'">
           <span style="cursor: pointer"  @click="showBottomBox('endpointAlertMessage', scope.row)">

nezha-fronted/src/components/common/table/settings/exprTmplTable.vue

@@ -35,7 +35,19 @@
         <div class="col-resize-area"></div>
       </template>
       <template slot-scope="scope" :column="item">
-        <span v-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
+        <template v-if="item.prop === 'name'">
+            <div style="cursor:text" class="document-copy-block">
+              <span class="document-copy-text">{{scope.row.name ? scope.row.name : '-'}}</span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
+            </div>
+          </template>
+        <template v-else-if="item.prop === 'expression'">
+            <div style="cursor:text" class="document-copy-block">
+              <span class="document-copy-text">{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row[item.prop])"></i>
+            </div>
+          </template>
+        <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
         <template v-else>-</template>
       </template>
     </el-table-column>

nezha-fronted/src/components/common/table/settings/ipamTable.vue

@@ -35,13 +35,22 @@
       </template>
       <template slot-scope="scope" :column="item">
         <span v-if="item.prop === 'dc'">{{scope.row[item.prop]?scope.row[item.prop].name:'-'}}</span>
-        <span v-else-if="item.prop === 'CIDR'">
-          <template>{{ scope.row.addr }}/{{scope.row.mask}}</template>
-        </span>
+        <template v-else-if="item.prop === 'CIDR'">
+           <div style="cursor:text" class="document-copy-block">
+              <span class="document-copy-text">{{ scope.row.addr }}/{{scope.row.mask}}</span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.addr + '/' + scope.row.mask)"></i>
+            </div>
+        </template>
         <span v-else-if="item.prop === 'type'">
           <template v-if="scope.row.type === 4">IPV4</template>
           <template v-else-if="scope.row.type === 6">IPV6</template>
         </span>
+        <template v-else-if="item.prop === 'name'">
+            <div style="cursor:text" class="document-copy-block">
+              <span class="document-copy-text">{{scope.row.name ? scope.row.name : '-'}}</span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
+            </div>
+          </template>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
         <span v-else>-</span>
       </template>

nezha-fronted/src/components/common/table/settings/mibTable.vue

@@ -37,8 +37,17 @@
       <template slot-scope="scope" :column="item">
         <template v-if="item.prop == 'updateUser'" >{{scope.row[item.prop].name}}</template>
         <template v-else-if="item.prop == 'fileName' && scope.row[item.prop]" >
-          <span class="link" @click="downloadMib(scope.row)">{{scope.row[item.prop]}}</span>
+          <div style="cursor:text" class="document-copy-block">
+              <span class="link document-copy-text" @click="downloadMib(scope.row)">{{scope.row[item.prop]}}</span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row[item.prop])"></i>
+            </div>
         </template>
+        <template v-else-if="item.prop === 'name'">
+            <div style="cursor:text" class="document-copy-block">
+              <span class="document-copy-text">{{scope.row.name ? scope.row.name : '-'}}</span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
+            </div>
+          </template>
         <template v-else-if="item.prop === 'modelsDetail' && scope.row['modelsDetail'] && scope.row['modelsDetail'].length >0" >
           <div style="height: 100%">
             <div style="height: 100%; overflow: auto;" v-if="scope.row['modelsDetail']">

nezha-fronted/src/components/common/table/settings/moduleTable.vue

@@ -37,13 +37,19 @@
       </template>
       <template slot-scope="scope" :column="item">
         <template v-if="item.prop === 'name'">
-          {{scope.row[item.prop]}}
+          <div style="cursor:text" class="document-copy-block">
+              <span class="document-copy-text">{{scope.row[item.prop]}}</span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
+          </div>
         </template>
         <template v-else-if="item.prop === 'type'">
           {{scope.row[item.prop]}}
         </template>
         <template v-else-if="item.prop === 'project'">
-          {{scope.row[item.prop].name}}
+          <div style="cursor:text" class="document-copy-block">
+              <span class="document-copy-text">{{scope.row[item.prop].name}}</span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row[item.prop].name)"></i>
+          </div>
         </template>
         <template v-else-if="item.prop === 'endpointNum'">
           <span class="endpoint-num"  @click="showBottomBox('endpoint', scope.row)">

nezha-fronted/src/components/common/table/settings/projectTable.vue

@@ -38,9 +38,10 @@
       </template>
       <template slot-scope="scope" :column="item">
         <template v-if="item.prop === 'name'">
-          <span class="">
-            {{scope.row[item.prop]}}
-          </span>
+          <div style="cursor:text" class="document-copy-block">
+              <span class="document-copy-text">{{scope.row[item.prop]}}</span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
+          </div>
         </template>
         <template v-else-if="item.prop === 'moduleNum'" >
           <span class="module-num" @click="jumpModule(scope.row)">

nezha-fronted/src/components/common/table/settings/roleTable.vue

@@ -37,10 +37,16 @@
       <template slot-scope="scope" :column="item">
         <template v-if="item.prop === 'name'">
           <template v-if="scope.row.i18n">
-            <span>{{$t(scope.row.i18n)}}</span>
+            <div style="cursor:text" class="document-copy-block">
+              <span class="document-copy-text">{{$t(scope.row.i18n)}}</span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy($t(scope.row.i18n))"></i>
+            </div>
           </template>
           <template v-else-if="scope.row.name">
-            <span>{{scope.row.name}}</span>
+            <div style="cursor:text" class="document-copy-block">
+              <span class="document-copy-text">{{scope.row.name}}</span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy($t(scope.row.name))"></i>
+            </div>
           </template>
         </template>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>

nezha-fronted/src/components/common/table/settings/userTable.vue

@@ -38,11 +38,12 @@
       </template>
       <template slot-scope="scope" :column="item">
         <template v-if="item.prop === 'name'">
-          <div class="user-name-td" :class="{'margin-l-10': !scope.row.online}"
-           @mouseenter="labelHover(scope.row, 'user', true, false, $event)"
-           @mouseleave="labelHover(scope.row, 'user', false, false,)">
-            <i class="nz-icon nz-icon-user1 user-online" v-if="scope.row.online" :title="$t('overall.online')"/>
-            <div>
+          <div style="cursor:text" class="document-copy-block">
+            <div class="user-name-td document-copy-text" :class="{'margin-l-10': !scope.row.online}"
+             @mouseenter="labelHover(scope.row, 'user', true, false, $event)"
+             @mouseleave="labelHover(scope.row, 'user', false, false,)">
+              <i class="nz-icon nz-icon-user1 user-online" v-if="scope.row.online" :title="$t('overall.online')"/>
+              <div>
               <div class="flex-align-center">
                 <span class="user-name-top">{{scope.row[item.prop]}}</span>
                 <el-tag size="mini" v-if="mfaEnable == '1' || scope.row.mfaLevel > 0" style="margin-left: 5px">2FA</el-tag>
@@ -51,6 +52,8 @@
                 @{{scope.row.username}}
               </div>
             </div>
+            </div>
+          <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row.name)"></i>
           </div>
         </template>
         <template v-else-if="item.prop === 'roles'">
@@ -77,6 +80,12 @@
           <span v-if="scope.row[item.prop] === 'en'">English</span>
           <span v-else-if="scope.row[item.prop] === 'zh'">简体中文</span>
         </template>
+        <template v-else-if="item.prop === 'email'">
+          <div style="cursor:text" class="document-copy-block">
+              <span class="document-copy-text">{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</span>
+              <i  class="nz-icon nz-icon-override" style="cursor: pointer;visibility: hidden" @click="onCopy(scope.row[item.prop])"></i>
+            </div>
+        </template>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
         <span v-else>-</span>
       </template>