refactor(web): 优化部份显示效果

web/components/common.js

@@ -34,6 +34,20 @@ function paginationCommonOptions(perPage = true, maxButtons = 5) {
     return option
 }
 
+function paginationTemplate(perPage = 20, maxButtons = 5) {
+    return {
+        perPage: perPage,
+        headerToolbar: [
+            "reload",
+            paginationCommonOptions(true, maxButtons),
+        ],
+        footerToolbar: [
+            "statistics",
+            paginationCommonOptions(true, maxButtons),
+        ],
+    }
+}
+
 function timeAndFrom(field, fromNow, emptyText = '未停止', showSource = true) {
     let tpl = "${IF(" + field + " === 0, '(" + emptyText + ")', CONCATENATE('<span class=\"font-bold\">'," + fromNow + ",'</span>'))}"
     if (showSource) {
@@ -786,6 +800,7 @@ function timelineColumns() {
             label: '文件名',
             type: 'wrapper',
             size: 'none',
+            className: 'nowrap',
             body: [
                 {
                     type: 'tpl',
@@ -794,10 +809,10 @@ function timelineColumns() {
                 {
                     visibleOn: "action === 'compaction'",
                     type: 'action',
-                    icon: 'fa fa-eye',
+                    icon: 'fa fa-eye ml-1',
                     level: 'link',
                     tooltip: '查看压缩计划',
-                    size: 'sm',
+                    size: 'xs',
                     actionType: 'dialog',
                     dialog: {
                         title: '压缩计划详情',
@@ -833,6 +848,7 @@ function timelineColumns() {
                             },
                             ...crudCommonOptions(),
                             loadDataOnce: true,
+                            ...paginationTemplate(20, 8),
                             columns: [
                                 {
                                     name: 'fileId',
@@ -867,6 +883,7 @@ function timelineColumns() {
                                             label: '数据文件名',
                                             type: 'action',
                                             level: 'link',
+                                            size: 'xs',
                                             actionType: 'copy',
                                             content: '${dataFilePath}',
                                             tooltip: '复制 ${dataFilePath}',
@@ -875,6 +892,7 @@ function timelineColumns() {
                                             label: '日志文件',
                                             type: 'action',
                                             level: 'link',
+                                            size: 'xs',
                                             actionType: 'dialog',
                                             dialog: {
                                                 title: '操作日志文件列表',
@@ -902,10 +920,10 @@ function timelineColumns() {
                 {
                     visibleOn: "action === 'rollback'",
                     type: 'action',
-                    icon: 'fa fa-eye',
+                    icon: 'fa fa-eye ml-1',
                     level: 'link',
                     tooltip: '查看回滚计划',
-                    size: 'sm',
+                    size: 'xs',
                     actionType: 'dialog',
                     dialog: {
                         title: '回滚计划详情',
@@ -966,15 +984,15 @@ function timelineColumns() {
                 {
                     visibleOn: "action === 'clean'",
                     type: 'action',
-                    icon: 'fa fa-eye',
+                    icon: 'fa fa-eye ml-1',
                     level: 'link',
                     tooltip: '查看清理计划',
-                    size: 'sm',
+                    size: 'xs',
                     actionType: 'dialog',
                     dialog: {
                         title: '清理计划详情',
                         actions: [],
-                        size: 'lg',
+                        size: 'xl',
                         body: {
                             type: 'service',
                             api: {
@@ -992,10 +1010,10 @@ function timelineColumns() {
                                         let list = []
                                         Object.keys(map)
                                             .forEach(key => {
-                                                list.push({
+                                                map[key].forEach(file => list.push({
                                                     partitionPath: key,
-                                                    files: map[key],
-                                                })
+                                                    file: file['filePath'],
+                                                }))
                                             })
                                         payload.data['filePathsToBeDeletedPerPartition'] = list
                                     }
@@ -1029,6 +1047,7 @@ function timelineColumns() {
                                     type: 'crud',
                                     source: '${filePathsToBeDeletedPerPartition}',
                                     ...crudCommonOptions(),
+                                    ...paginationTemplate(20, 8),
                                     loadDataOnce: true,
                                     title: '分区删除文件',
                                     columns: [
@@ -1039,13 +1058,25 @@ function timelineColumns() {
                                             align: 'center',
                                         },
                                         {
-                                            name: 'files',
+                                            name: 'file',
                                             label: '清理文件',
-                                            type: 'list',
                                             className: 'nowrap',
-                                            listItem: {
-                                                body: '${filePath}',
-                                            }
+                                        },
+                                        {
+                                            type: 'operation',
+                                            label: '操作',
+                                            width: 100,
+                                            buttons: [
+                                                {
+                                                    label: '复制路经',
+                                                    type: 'action',
+                                                    level: 'link',
+                                                    size: 'xs',
+                                                    actionType: 'copy',
+                                                    content: '${file}',
+                                                    tooltip: '复制 ${file}',
+                                                },
+                                            ]
                                         }
                                     ]
                                 }

web/index.html

@@ -76,7 +76,7 @@
                 ]
             }
         }
-        let debug = true
+        let debug = false
         let server = amis.embed(
             '#root',
             amisJSON,