feat: 短链管理复制可复制短键或短码

Author: jetsung

README.md

@@ -2,7 +2,7 @@
 
 一个超简单的短网址管理平台（前端）。
 
-[**配置后端 API：shortener**](https://git.jetsung.com/idev/shortener)
+[**配置后端 API：shortener**](https://git.jetsung.com/idev/shortener-server)
 
 预览: ![Shortener](screenshot.png)
 
@@ -46,11 +46,11 @@ npm run build
 
 ```yaml
 ---
-# https://github.com/idevsig/shortener
+# https://git.jetsung.com/idev/shortener-server
 
 services:
   shortener:
-    image: ghcr.io/idevsig/shortener:dev-amd64
+    image: ghcr.io/idevsig/shortener-server:dev-amd64
     container_name: shortener
     restart: unless-stopped
     ports:

mock/account.ts

@@ -26,23 +26,23 @@ const accountLogin = async (req: Request, res: Response) => {
   const { password, username } = req.body;
   console.log('req:', req.body);
   await waitTime(2000);
-  if (password === 'ant.design' && username === 'admin') {
+  if (password === 'admin' && username === 'admin') {
     res.send({
-      token: 'admin-token'
+      token: 'admin-token',
     });
     access = 1;
     return;
   }
-  if (password === 'ant.design' && username === 'user') {
+  if (password === 'user' && username === 'user') {
     res.send({
-      token: 'user-token'
+      token: 'user-token',
     });
     access = 2;
     return;
   }
   res.status(401).send({
     errcode: 401,
-    errinfo: 'Authentication Failed'
+    errinfo: 'Authentication Failed',
   });
 };
 

package.json

@@ -69,8 +69,8 @@
     "@types/history": "^5.0.0",
     "@types/jest": "^29.5.14",
     "@types/lodash": "^4.17.16",
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.0",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
     "@types/react-helmet": "^6.1.11",
     "@typescript-eslint/eslint-plugin": "^8.31.0",
     "@typescript-eslint/parser": "^8.31.0",

src/pages/Shortener/index.tsx

@@ -4,7 +4,7 @@ import {
   updateShorten,
   deleteShorten,
 } from '@/services/shortener/shorten';
-import { PlusOutlined } from '@ant-design/icons';
+import { CopyOutlined, PlusOutlined } from '@ant-design/icons';
 import type { ActionType, ProColumns, ProFormInstance } from '@ant-design/pro-components';
 import {
   FooterToolbar,
@@ -15,18 +15,28 @@ import {
   ProTable,
 } from '@ant-design/pro-components';
 import '@umijs/max';
-import { Button, message } from 'antd';
+import { Button, message, Tooltip } from 'antd';
 import React, { useRef, useState } from 'react';
 import type { FormValueType } from './components/UpdateForm';
 import UpdateForm from './components/UpdateForm';
 import { createStyles } from 'antd-style';
 import { history } from 'umi';
 
-const useStyles = createStyles(() => {
+const useStyles = createStyles(({ token }) => {
   return {
     footerToolBar: {
       fontWeight: 600,
     },
+    codeContainer: {
+      display: 'flex',
+      justifyContent: 'flex-end',
+      alignItems: 'center',
+      gap: 8,
+    },
+    copyIcon: {
+      cursor: 'pointer',
+      color: token.colorPrimary,
+    },
   };
 });
 
@@ -49,6 +59,12 @@ const TableList: React.FC = () => {
 
   const { styles } = useStyles();
 
+  const copyToClipboard = (text: string, messageText: string) => {
+    navigator.clipboard.writeText(text).then(() => {
+      messageApi.success(messageText);
+    });
+  };
+
   /**
    * @en-US Add node
    * @zh-CN 添加节点
@@ -129,21 +145,51 @@ const TableList: React.FC = () => {
       dataIndex: 'id',
       hideInSearch: true,
     },
+    // {
+    //   title: '短码',
+    //   dataIndex: 'code',
+    //   copyable: true,
+    //   renderText: (text, record) => record.short_url, // 指定复制的内容
+    //   render: (dom, entity) => {
+    //     return (
+    //       <a
+    //         onClick={() => {
+    //           window.open(entity.short_url, '_blank');
+    //         }}
+    //       >
+    //         {dom}
+    //       </a>
+    //     );
+    //   },
+    // },
     {
       title: '短码',
       dataIndex: 'code',
-      copyable: true,
-      render: (dom, entity) => {
-        return (
+      width: 10,
+      render: (_, entity) => (
+        <span className={styles.codeContainer}>
           <a
-            onClick={() => {
-              window.open(entity.short_url, '_blank');
-            }}
+            href={entity.short_url}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={(e) => e.stopPropagation()}
           >
-            {dom}
+            {entity.code}
           </a>
-        );
-      },
+          <Tooltip title="复制短码">
+            <CopyOutlined
+              className={styles.copyIcon}
+              onClick={() => copyToClipboard(entity.code as string, '短码复制成功')}
+            />
+          </Tooltip>
+          <Tooltip title="复制短链">
+            <CopyOutlined
+              className={styles.copyIcon}
+              onClick={() => copyToClipboard(entity.short_url as string, '短链复制成功')}
+            />
+          </Tooltip>
+        </span>
+      ),
     },
     {
       title: '源地址',