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

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,10 +137,12 @@ const Crontab = () => {
       title: '操作',
       key: 'action',
       align: 'center' as const,
-      render: (text: string, record: any, index: number) => (
+      render: (text: string, record: any, index: number) => {
+        const isPc = width === '100%';
+        return (
           <Space size="middle">
             {record.status === CrontabStatus.idle && (
-            <Tooltip title="运行">
+              <Tooltip title={isPc ? '运行' : ''}>
                 <a
                   onClick={() => {
                     runCron(record, index);
@@ -151,7 +153,7 @@ const Crontab = () => {
               </Tooltip>
             )}
             {record.status !== CrontabStatus.idle && (
-            <Tooltip title="停止">
+              <Tooltip title={isPc ? '停止' : ''}>
                 <a
                   onClick={() => {
                     stopCron(record, index);
@@ -161,7 +163,7 @@ const Crontab = () => {
                 </a>
               </Tooltip>
             )}
-          <Tooltip title="日志">
+            <Tooltip title={isPc ? '日志' : ''}>
               <a
                 onClick={() => {
                   setLogCron({ ...record, timestamp: Date.now() });
@@ -172,7 +174,8 @@ const Crontab = () => {
             </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,14 +161,20 @@ const Env = () => {
       title: '操作',
       key: 'action',
       align: 'center' as const,
-      render: (text: string, record: any, index: number) => (
+      render: (text: string, record: any, index: number) => {
+        const isPc = width === '100%';
+        return (
           <Space size="middle">
-          <Tooltip title="编辑">
+            <Tooltip title={isPc ? '编辑' : ''}>
               <a onClick={() => editEnv(record, index)}>
                 <EditOutlined />
               </a>
             </Tooltip>
-          <Tooltip title={record.status === Status.已禁用 ? '启用' : '禁用'}>
+            <Tooltip
+              title={
+                isPc ? (record.status === Status.已禁用 ? '启用' : '禁用') : ''
+              }
+            >
               <a onClick={() => enabledOrDisabledEnv(record, index)}>
                 {record.status === Status.已禁用 ? (
                   <CheckCircleOutlined />
@@ -182,13 +183,14 @@ const Env = () => {
                 )}
               </a>
             </Tooltip>
-          <Tooltip title="删除">
+            <Tooltip title={isPc ? '删除' : ''}>
               <a onClick={() => deleteEnv(record, index)}>
                 <DeleteOutlined />
               </a>
             </Tooltip>
           </Space>
-      ),
+        );
+      },
     },
   ];
   const [width, setWidth] = useState('100%');