环境变量值超出显示...

back/loaders/initData.ts

@@ -12,13 +12,13 @@ const initData = [
       6,
       1,
     ).toString()} * * *`,
-    status: CrontabStatus.disabled,
+    isDisabled: 1,
   },
   {
     name: '删除日志',
     command: 'ql rmlog 7',
     schedule: '30 7 */7 * *',
-    status: CrontabStatus.disabled,
+    isDisabled: 1,
   },
 ];
 
@@ -29,7 +29,7 @@ export default async () => {
 
   cronDb.count({}, async (err, count) => {
     if (count === 0) {
-      const data = initData.map((x) => {
+      const data = initData.map((x: any) => {
         const tab = new Crontab(x);
         tab.created = new Date().valueOf();
         tab.saved = false;

src/layouts/index.less

@@ -36,6 +36,17 @@ body {
   }
 }
 
+.ant-table-cell-ellipsis {
+  text-align: left !important;
+}
+
+.ant-tooltip {
+  max-width: 500px;
+  .ant-tooltip-inner {
+    word-break: break-all;
+  }
+}
+
 .env-wrapper {
   th {
     white-space: nowrap;

src/pages/crontab/index.tsx

@@ -137,42 +137,45 @@ const Crontab = () => {
       title: '操作',
       key: 'action',
       align: 'center' as const,
-      render: (text: string, record: any, index: number) => (
+      render: (text: string, record: any, index: number) => {
-        <Space size="middle">
+        const isPc = width === '100%';
-          {record.status === CrontabStatus.idle && (
+        return (
-            <Tooltip title="运行">
+          <Space size="middle">
+            {record.status === CrontabStatus.idle && (
+              <Tooltip title={isPc ? '运行' : ''}>
+                <a
+                  onClick={() => {
+                    runCron(record, index);
+                  }}
+                >
+                  <PlayCircleOutlined />
+                </a>
+              </Tooltip>
+            )}
+            {record.status !== CrontabStatus.idle && (
+              <Tooltip title={isPc ? '停止' : ''}>
+                <a
+                  onClick={() => {
+                    stopCron(record, index);
+                  }}
+                >
+                  <PauseCircleOutlined />
+                </a>
+              </Tooltip>
+            )}
+            <Tooltip title={isPc ? '日志' : ''}>
               <a
                 onClick={() => {
-                  runCron(record, index);
+                  setLogCron({ ...record, timestamp: Date.now() });
                 }}
               >
-                <PlayCircleOutlined />
+                <FileTextOutlined />
               </a>
             </Tooltip>
-          )}
+            <MoreBtn key="more" record={record} index={index} />
-          {record.status !== CrontabStatus.idle && (
+          </Space>
-            <Tooltip title="停止">
+        );
-              <a
+      },
-                onClick={() => {
-                  stopCron(record, index);
-                }}
-              >
-                <PauseCircleOutlined />
-              </a>
-            </Tooltip>
-          )}
-          <Tooltip title="日志">
-            <a
-              onClick={() => {
-                setLogCron({ ...record, timestamp: Date.now() });
-              }}
-            >
-              <FileTextOutlined />
-            </a>
-          </Tooltip>
-          <MoreBtn key="more" record={record} index={index} />
-        </Space>
-      ),
     },
   ];
 

src/pages/env/index.tsx

@@ -124,19 +124,14 @@ const Env = () => {
       key: 'value',
       align: 'center' as const,
       width: '45%',
+      ellipsis: {
+        showTitle: false,
+      },
       render: (text: string, record: any) => {
         return (
-          <span
+          <Tooltip placement="topLeft" title={text}>
-            style={{
+            <span>{text}</span>
-              textAlign: 'left',
+          </Tooltip>
-              display: 'inline-block',
-              wordBreak: 'break-all',
-              cursor: 'text',
-              width: '100%',
-            }}
-          >
-            {text}
-          </span>
         );
       },
     },
@@ -166,29 +161,36 @@ const Env = () => {
       title: '操作',
       key: 'action',
       align: 'center' as const,
-      render: (text: string, record: any, index: number) => (
+      render: (text: string, record: any, index: number) => {
-        <Space size="middle">
+        const isPc = width === '100%';
-          <Tooltip title="编辑">
+        return (
-            <a onClick={() => editEnv(record, index)}>
+          <Space size="middle">
-              <EditOutlined />
+            <Tooltip title={isPc ? '编辑' : ''}>
-            </a>
+              <a onClick={() => editEnv(record, index)}>
-          </Tooltip>
+                <EditOutlined />
-          <Tooltip title={record.status === Status.已禁用 ? '启用' : '禁用'}>
+              </a>
-            <a onClick={() => enabledOrDisabledEnv(record, index)}>
+            </Tooltip>
-              {record.status === Status.已禁用 ? (
+            <Tooltip
-                <CheckCircleOutlined />
+              title={
-              ) : (
+                isPc ? (record.status === Status.已禁用 ? '启用' : '禁用') : ''
-                <StopOutlined />
+              }
-              )}
+            >
-            </a>
+              <a onClick={() => enabledOrDisabledEnv(record, index)}>
-          </Tooltip>
+                {record.status === Status.已禁用 ? (
-          <Tooltip title="删除">
+                  <CheckCircleOutlined />
-            <a onClick={() => deleteEnv(record, index)}>
+                ) : (
-              <DeleteOutlined />
+                  <StopOutlined />
-            </a>
+                )}
-          </Tooltip>
+              </a>
-        </Space>
+            </Tooltip>
-      ),
+            <Tooltip title={isPc ? '删除' : ''}>
+              <a onClick={() => deleteEnv(record, index)}>
+                <DeleteOutlined />
+              </a>
+            </Tooltip>
+          </Space>
+        );
+      },
     },
   ];
   const [width, setWidth] = useState('100%');