opt: styles, copy

nanqic · Jan 12, 2024 · 3eb6d67 · 3eb6d67
1 parent ac64080
commit 3eb6d67
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 41 deletions.
diff --git a/src/assets/app.css b/src/assets/app.css
@@ -3,12 +3,9 @@
 @tailwind components;
 @tailwind utilities;
 
-details li {
-  list-style-type: none;
-}
-
 .mm-toolbar>.mm-toolbar-item,
-li,
+div>p,
+details>p,
 select,
 summary {
   cursor: pointer;
@@ -31,10 +28,22 @@ summary {
 
 summary svg:hover,
 .folder:hover,
-details li:hover {
+details p:hover {
   color: forestgreen;
 }
 
+details>p,
+div>p {
+  max-width: 160px;
+  /* 设置最大宽度为300像素，可以根据需要调整 */
+  overflow: hidden;
+  /* 如果文字超过最大宽度，隐藏溢出部分 */
+  white-space: nowrap;
+  /* 防止文字换行 */
+  text-overflow: ellipsis;
+  /* 如果文字超过最大宽度，显示省略号 */
+}
+
 .text-editor textarea {
   line-height: 1.5;
 }
diff --git a/src/components/FileTree.jsx b/src/components/FileTree.jsx
@@ -25,35 +25,34 @@ const FileTree = React.memo(
       localStorage.setItem("dir_open", JSON.stringify({ ...dir_opened, [`${state.username}-${name}`]: open }))
     }
     return (
-      <div className='text-gray-600 group inline-block'>
+      <div className='text-gray-600 px-1.5 group inline-block bg-white'>
+        {
+          state.dirs?.sort(sortByFirstNum).map(file => {
+            return (
+              <p key={file} className={`pr-6 ${decodeURI(location.pathname).includes(file) && ' bg-slate-100 pl-3'}`} onClick={() => handleClickFile(file)}>
+                {file}
+              </p>
+            )
+          })
+        }
         {
           state.dirfiles?.sort((a, b) => a.name.split('-')[0] - b.name.split('-')[0]).map(dir => {
             return (
-              <details className='pl-3 bg-white' key={dir.name} open={decodeURI(location.pathname).includes(dir.name) || open&&open[`${state.username}-${dir.name}`]} onToggle={e => handleToglle(e, dir.name)}>
+              <details key={dir.name} open={decodeURI(location.pathname).includes(dir.name) || open && open[`${state.username}-${dir.name}`]} onToggle={e => handleToglle(e, dir.name)}>
                 <summary className='text-blue-500 folder'>
                   {dir.name}
                 </summary>
                 {dir.files?.sort(sortByFirstNum).map(file => {
                   { file }
-                  return <li key={file} className={decodeURI(location.pathname).includes(file) ? 'bg-slate-100 px-2 inline-block' : ''}
+                  return <p key={file} className={decodeURI(location.pathname).includes(file) ? 'bg-slate-100 pl-3 inline-block' : ''}
                     onClick={() => handleClickFile(`${dir.name}/${file}`)}>
                     {file}
-                  </li>
+                  </p>
                 })}
-
               </details>
             )
           })
         }
-        {
-          state.dirs?.sort(sortByFirstNum).map(file => {
-            return (
-              <li key={file} className={`bg-white ${decodeURI(location.pathname).includes(file) ? ' bg-slate-100 px-2' : ''}`} onClick={() => handleClickFile(file)}>
-                {file}
-              </li>
-            )
-          })
-        }
       </div>
     )
   })

diff --git a/src/utils.js b/src/utils.js
@@ -122,29 +122,40 @@ export function toggleFullScreen() {
     }
 }
 
-export async function copyTextToClipboard(text) {
-    if ('clipboard' in navigator) {
-        return await navigator.clipboard.writeText(text);
-    } else {
-        return document.execCommand('copy', true, text);
+export async function copyTextToClipboard(text, retries = 3) {
+    try {
+        if ('clipboard' in navigator) {
+            await navigator.clipboard.writeText(text);
+        } else {
+            document.execCommand('copy', true, text);
+        }
+        console.log('Text copied to clipboard successfully.');
+    } catch (error) {
+        console.error('Error copying text to clipboard:', error);
+
+        if (retries > 0) {
+            console.log(`Retrying (${retries} retries left)...`);
+            await copyTextToClipboard(text, retries - 1);
+        } else {
+            console.error('Max retries reached. Unable to copy text to clipboard.');
+        }
     }
 }
 
-export const copyLink = () => {
+export const copyLink = async () => {
     let rawUrl = location.href
-    fetch(`${import.meta.env.VITE_YOURLS_API}${rawUrl}`)
-        .then((resp) => resp.json())
-        .then((json) => {
-            if (json.statusCode == 200 || json.statusCode == 400) {
-                rawUrl = json.shorturl
-            }
-        })
-        .catch((err) => {
-            console.error('YOURLS_API err', err)
-        })
-        .finally(() => {
-            copyTextToClipboard(rawUrl)
-        })
+    try {
+        const resp = await fetch(`${import.meta.env.VITE_YOURLS_API}${rawUrl}`);
+        const json = await resp.json();
+
+        if (json.statusCode == 200 || json.statusCode == 400) {
+            rawUrl = json.shorturl;
+        }
+    } catch (err) {
+        console.error('YOURLS_API err', err);
+    } finally {
+        await copyTextToClipboard(rawUrl);
+    }
 }
 
 export const downloadHtml = (htmlContent) => {
@@ -229,8 +240,8 @@ export function renderToolbar(mm, wrapper) {
 }
 
 export const getToken = () => {
-    if (!localStorage.getItem("token")){
-        console.error('请先登录box网盘, 再回到本页操作');
+    if (!localStorage.getItem("token")) {
+        // console.error('请先登录box网盘, 再回到本页操作');
         return null
     }
     return localStorage.getItem("token")