perf: 优化远程应用界面

src/components/Tooltip/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <div ref="boxDom" class="tooltip">
+    <el-tooltip
+      :disabled="showTooltip"
+      :content="content"
+      :placement="placement"
+      :effect="effect"
+    >
+      <div class="multi-line-limit">{{ content }}</div>
+    </el-tooltip>
+    <div ref="virtualDom" class="virtual-dom">{{ content }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Tooltip',
+  props: {
+    content: {
+      type: String,
+      default: () => ''
+    },
+    placement: {
+      type: String,
+      default: () => 'top'
+    },
+    effect: {
+      type: String,
+      default: () => 'dark'
+    },
+    line: {
+      type: Number,
+      default: () => 3
+    }
+  },
+  data() {
+    return {
+      showTooltip: true
+    }
+  },
+  watch: {
+    content: {
+      handler() {
+        this.$nextTick(() => this.checkWidth())
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    this.setUI()
+  },
+  methods: {
+    checkWidth() {
+      const boxWidth = this.$refs.boxDom.offsetWidth
+      const textWidth = this.$refs.virtualDom.offsetWidth
+      this.showTooltip = boxWidth * this.line > textWidth
+    },
+    setUI() {
+      this.$refs.boxDom.style.setProperty('--line', `${this.line * 15}px`)
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+  .tooltip {
+    margin-bottom: 10px;
+  }
+  .multi-line-limit {
+    line-height: 15px;
+    height: var(--line);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .virtual-dom {
+    position:absolute;
+    visibility: hidden;
+    white-space: nowrap;
+    z-index: -100;
+  }
+</style>

src/components/index.js

@@ -29,3 +29,4 @@ export { default as UserConfirmDialog } from './UserConfirmDialog'
 export { default as Announcement } from './Announcement'
 export { default as CronTab } from './CronTab'
 export { default as Pagination } from './Pagination'
+export { default as Tooltip } from './Tooltip'

src/i18n/langs/en.json

@@ -980,6 +980,7 @@
     "NoPermission": "No permission"
   },
   "terminal": {
+    "Author": "Author",
     "UploadSucceed": "Upload succeed",
     "UploadFailed": "Upload failed",
     "Applets": "Remote apps",

src/i18n/langs/ja.json

@@ -994,6 +994,7 @@
     "NoPermission": "権限なし"
   },
   "terminal": {
+    "Author": "作者",
     "UploadSucceed": "アップロード成功",
     "UploadFailed": "アップロードに失敗しました",
     "Applets": "リモートアプリケーション",

src/i18n/langs/zh.json

@@ -1202,6 +1202,7 @@
     "NoPermission": "暂无权限"
   },
   "terminal": {
+    "Author": "作者",
     "BasePort": "监听端口",
     "DatabasePort": "数据库协议端口",
     "UploadSucceed": "上传成功",

src/views/settings/Applet/Applet/components/CardTable.vue

@@ -7,31 +7,39 @@
       v-bind="headerActions"
     />
     <div style="padding-top: 15px">
-      <el-row :gutter="40">
-        <el-col v-for="(d, index) in totalData" :key="index" :span="4">
+      <el-row :gutter="20">
+        <el-col v-for="(d, index) in totalData" :key="index" :span="6">
           <el-card
             shadow="hover"
             :body-style="{ 'text-align': 'center', 'padding': '10px' }"
             class="my-card"
             @click.native="onView(d)"
           >
-            <span class="closeIcon">
-              <i class="el-icon-close" @click.stop="onDelete(d)" />
-            </span>
-            <!--            <div style="padding-top: 15px">-->
-            <!--              <el-button v-if="$hasPerm(tableConfig.deletePerm)" type="danger" size="mini" @click="onDelete(d)">{{ $tc('common.Delete') }}</el-button>-->
-            <!--            </div>-->
-            <div>
-              <img :src="d.icon" class="image">
-            </div>
-            <div>{{ d.display_name }}</div>
-            <div style="margin: 10px 0" />
-            <el-tag size="mini">{{ d.author }}</el-tag>
+            <el-row :gutter="20">
+              <el-col :span="8">
+                <img :src="d.icon" class="image">
+              </el-col>
+              <el-col :span="16" style="text-align: left;">
+                <span class="closeIcon">
+                  <i class="el-icon-close" @click.stop="onDelete(d)" />
+                </span>
+                <div class="one-line">{{ d.display_name }}</div>
+                <el-divider class="my-divider" />
+                <Tooltip :content="d.comment" />
+                <el-tag size="mini">{{ $tc('terminal.Author') }}: {{ d.author }}</el-tag>
+              </el-col>
+            </el-row>
             <el-divider class="my-divider" />
-            <el-tooltip placement="top">
-              <div slot="content">{{ d.comment_i18n }}</div>
-              <div class="line-limit">{{ d.comment_i18n }}</div>
-            </el-tooltip>
+            <div style="text-align: left">
+              <span>{{ $tc('common.DateCreated') }}: {{ convertData(d.date_created) }}</span>
+              <el-tag
+                size="mini"
+                style="float: right"
+                :type="d.is_active ? '': 'danger'"
+              >
+                {{ $tc('common.Active') }}: <span v-html="getIcon(d.is_active)" />
+              </el-tag>
+            </div>
           </el-card>
         </el-col>
       </el-row>
@@ -47,14 +55,16 @@
 
 <script>
 import TableAction from '@/components/ListTable/TableAction'
-import { Pagination } from '@/components'
+import { Pagination, Tooltip } from '@/components'
+import { toSafeLocalDateStr } from '@/utils/common'
 const defaultFirstPage = 1
 
 export default {
   name: 'CardTable',
   components: {
     TableAction,
-    Pagination
+    Pagination,
+    Tooltip
   },
   props: {
     // 定义 table 的配置
@@ -73,9 +83,9 @@ export default {
       totalData: [],
       page: defaultFirstPage,
       extraQuery: {},
-      paginationSize: 12,
+      paginationSize: 8,
       paginationLayout: 'total, sizes, prev, pager, next',
-      paginationSizes: [12, 24, 36, 48, 60, 120],
+      paginationSizes: [8, 12, 20, 36, 52, 120],
       axiosConfig: {
         raw: 1,
         params: {
@@ -95,6 +105,16 @@ export default {
     this.getList()
   },
   methods: {
+    getIcon(status) {
+      let iconClass = 'fa-check-circle'
+      if (status === false) {
+        iconClass = 'fa-times-circle'
+      }
+      return `<i class="fa ${iconClass}" />`
+    },
+    convertData(data) {
+      return toSafeLocalDateStr(data)
+    },
     getPageQuery(currentPage, pageSize) {
       return this.$refs.pagination.getPageQuery(currentPage, pageSize)
     },
@@ -190,18 +210,18 @@ export default {
   width: 60px;
   height: 60px;
   display: block;
-  margin: 0 auto;
+  margin: 50% auto;
 }
 
-.line-limit {
-  line-height: 14px;
-  height: 34px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.one-line {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .closeIcon {
-  text-align: right;
+  float: right;
   display: block;
   visibility: hidden;
   i {