改进短链接转换

src/components/Shorturlchange.jsx

@@ -1,6 +1,8 @@
-import { message } from 'antd';
+import { useCallback } from 'react';
+import { notification } from 'antd';
 
-const Shorturlchange = async (longUrl) => {
+const useShortUrlChange = () => {
+  
   const apiPrefix = {
     "japanhighlights.com": "https://www.japanhighlights.com/index.php",
     "chinahighlights.com": "https://www.chinahighlights.com/guide-use.php",
@@ -29,50 +31,65 @@ const Shorturlchange = async (longUrl) => {
     }
   };
 
-  const urlConversion = async (longUrl) => {
+  const urlBase64 = (longUrl) => {
+    try {
+      const extracted1 = longUrl.match(/^https?:\/\/[^\/]*/)?.[0] || '';
+      const extracted2 = longUrl.match(/https:\/\/www\.([^\/]+)/)?.[1] || '';
+      
+      const encoder = new TextEncoder();
+      const utf8Bytes = encoder.encode(longUrl);
+      const base64Url = btoa(String.fromCharCode(...utf8Bytes));
+      
+      return { base64Url, extracted1, extracted2 };
+    } catch (error) {
+      notification.error({
+        message: '错误',
+        description: '转换失败，请检查输入的URL是否正确',
+      });
+      console.error('URL转换错误:', error);
+      return { base64Url: '', extracted1: '', extracted2: '' };
+    }
+  };
+
+  const convertUrl = useCallback(async (longUrl) => {
     if (!longUrl.trim()) {
-      message.error('不是有效的长链接');
+      notification.error({
+        message: '错误',
+        description: '不是有效的长链接',
+      });
       return null;
     }
 
     const { base64Url, extracted1, extracted2 } = urlBase64(longUrl);
     
-    if (base64Url && extracted1 && extracted2) {
+    if (base64Url && extracted1) {
-      const apiUrl = apiPrefix[extracted2];
+      const apiUrl = apiPrefix[extracted2] || apiPrefix["chinahighlights.com"];
       
       const data = await fetchNowConversationsitems(base64Url, apiUrl);
       if (data) {
         const resultShortUrl = extracted1 + data.isl_link;
-        message.success('转换成功！');
+        notification.success({
+          message: '成功',
+          description: '转换成功！',
+        });
         return resultShortUrl;
       } else {
-        message.error('转换失败，请检查输入的URL是否正确');
+        notification.error({
+          message: '错误',
+          description: '转换失败，请检查输入的URL是否正确',
+        });
         return null;
       }
     } else {
-      message.error('URL格式不正确，请输入完整的URL');
+      notification.error({
+        message: '错误',
+        description: 'URL格式不正确，请输入完整的URL',
+      });
       return null;
     }
-  };
+  }, []);
-
-  const urlBase64 = (longUrl) => {
-    try {
-      const extracted1 = longUrl.match(/^.*?com/)?.[0] || '';
-      const extracted2 = longUrl.match(/https:\/\/www\.([^\/]+)/)?.[1] || '';
-      
-      const encoder = new TextEncoder();
-      const utf8Bytes = encoder.encode(longUrl);
-      const base64Url = btoa(String.fromCharCode(...utf8Bytes));
-      
-      return { base64Url, extracted1, extracted2 };
-    } catch (error) {
-      message.error('转换失败，请检查输入的URL是否正确');
-      console.error('URL转换错误:', error);
-      return { base64Url: '', extracted1: '', extracted2: '' };
-    }
-  }
 
-  return await urlConversion(longUrl);
+  return { convertUrl };
-}
+};
 
-export default Shorturlchange;
+export default useShortUrlChange;

src/views/accounts/ShorturlConversion.jsx

@@ -1,40 +1,17 @@
-import { Input, Button, Space, message, Typography } from 'antd'
+import { Input, Button, Space, Typography } from 'antd'
-import { CopyOutlined, LinkOutlined } from '@ant-design/icons'
+import { LinkOutlined } from '@ant-design/icons'
-import Shorturlchange from '@/components/Shorturlchange'
+import useShortUrlChange from '@/components/Shorturlchange'
 import { useState } from 'react'
 
-const { Title, Text } = Typography
+const { Title, Text, Paragraph } = Typography
 
 function ShorturlConversion() {
   const [longUrl, setLongUrl] = useState('')
   const [shortUrl, setShortUrl] = useState('')
-
+  const { convertUrl } = useShortUrlChange()
-  function copyToClipboard(text) {
-    const textarea = document.createElement('textarea');
-    textarea.value = text;
-    // 隐藏文本域（避免页面闪烁）
-    textarea.style.position = 'fixed';
-    textarea.style.opacity = 0;
-    document.body.appendChild(textarea);
-    // 选中并复制
-    textarea.select();
-    try {
-      const successful = document.execCommand('copy');
-      if (successful) {
-        message.success('已复制');
-      } else {
-        throw new Error('复制失败');
-      }
-    } catch (err) {
-      message.error('复制失败，请手动复制');
-    } finally {
-      // 移除临时文本域
-      document.body.removeChild(textarea);
-    }
-  }
 
   const handleConvert = async () => {
-    const result = await Shorturlchange(longUrl);
+    const result = await convertUrl(longUrl);
     if (result) {
       setShortUrl(result);
     }
@@ -43,9 +20,9 @@ function ShorturlConversion() {
     return (
       <Space direction='vertical' size='large' className='w-full'>
         <div>
-          <Text strong>长链接：</Text>
+          <Text strong style={{ fontSize: '18px' }}>长链接：</Text>
           <Input 
-            placeholder="输入长链接" 
+            placeholder="输入需要转换的长链接" 
             value={longUrl} 
             onChange={(e) => setLongUrl(e.target.value)}
             prefix={<LinkOutlined />}
@@ -54,30 +31,25 @@ function ShorturlConversion() {
         </div>
         <Button 
           type='primary' 
-          size='large'
+          size='medium'
           onClick={handleConvert}
           icon={<LinkOutlined />}
         >
           转换
         </Button>
-        <div>
+        {shortUrl && (
-          <Text strong>短链接：</Text>
+          <div>
-          <Input 
+          <Text strong style={{ fontSize: '18px' }}>转换后的短链接：</Text>
-            placeholder="转换后的短链接" 
+          <Paragraph 
-            value={shortUrl} 
+            copyable={shortUrl ? { 
-            readOnly
+              text: shortUrl,
-            suffix={
+              tooltips: ['点击复制', '已复制!'], 
-              shortUrl && (
+            } : false}
-                <Button 
+            style={{ fontSize: '17px' }}
-                  type="text" 
+          >
-                  icon={<CopyOutlined />} 
+            {shortUrl}
-                  onClick={() => copyToClipboard(shortUrl)}
+          </Paragraph>
-                />
+        </div>)}
-              )
-            }
-            size="large"
-          />
-        </div>
       </Space>
     );
 }