add copy file url button in dashboard page (cf-pages#115)

* add copy button * update dashboard img and video style
fubuki · Mar 31, 2024 · afb954a · afb954a
1 parent 6de4ca4
commit afb954a
Showing 1 changed file with 47 additions and 4 deletions.
diff --git a/admin.html b/admin.html
@@ -4,6 +4,18 @@
   <meta charset="UTF-8">
   <!-- import CSS -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-chalk/index.css" integrity="sha256-ghr1zmXTODLKl1HULQd6fq1MIe7m3FJiNTOCT8sddLM=" crossorigin="anonymous">
+  <style>
+    .el-image__inner.el-image__inner {
+      width: 160px;
+      height: 90px;
+    }
+    .el-image {
+      text-align: center;
+    }
+    .el-button+.el-button {
+      margin: 0;
+    }
+  </style>
 </head>
 <body>
   <div id="app">
@@ -59,9 +71,10 @@
               </el-table-column>
               <el-table-column
                 label="preview"
-                prop="preview">
+                prop="preview"
+                align="center">
                 <template slot-scope="scope">
-                  <video v-if="scope.row.name.indexOf('.mp4')>0" style="width: 100%; height: 100%;" controls>
+                  <video v-if="scope.row.name.indexOf('.mp4')>0" style="width: 320px; height: 180px;" controls>
                     <source :src="'/file/'+scope.row.name" type="video/mp4">
                   </video>
                   <el-image
@@ -89,14 +102,18 @@
               </template>
               </el-table-column>
               <el-table-column
-                align="right">
+              align="right">
                 <template slot="header" slot-scope="scope">
                   <el-input
                     v-model="search"
                     size="mini"
                     placeholder="输入关键字搜索"/>
                 </template>
                 <template slot-scope="scope">
+                  <el-button
+                    size="mini"
+                    type="primary"
+                    @click="handleCopy(scope.$index,scope.row.name)">复制文件地址</el-button>
                   <el-button
                     size="mini"
                     type="primary"
@@ -203,7 +220,33 @@
       },
       handleLogout(){
         window.location.href="./api/manage/logout";
-      }
+      },
+      handleCopy(index, key) {
+        const text = `${document.location.origin}/file/${key}`;
+        if (navigator.clipboard) {
+            // clipboard api 复制
+            navigator.clipboard.writeText(text);
+        } else {
+            const textarea = document.createElement('textarea');
+            document.body.appendChild(textarea);
+            // 隐藏此输入框
+            textarea.style.position = 'fixed';
+            textarea.style.clip = 'rect(0 0 0 0)';
+            textarea.style.top = '10px';
+            // 赋值
+            textarea.value = text;
+            // 选中
+            textarea.select();
+            // 复制
+            document.execCommand('copy', true);
+            // 移除输入框
+            document.body.removeChild(textarea);
+        }
+        this.$message({
+            message: '复制文件链接成功~',
+            type: 'success'
+        });
+      },
     },
 
     mounted () {