From dc8189335f49fe3dd54c92ae29ef67f4c5ea5708 Mon Sep 17 00:00:00 2001
From: WispX <wisp-x@qq.com>
Date: Sun, 12 Dec 2021 21:54:48 +0800
Subject: [PATCH] =?UTF-8?q?:lipstick:=20=E5=AE=8C=E5=96=84=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/app.css                          |  9 ++++
 resources/views/components/upload.blade.php | 48 ++++++++++++++++-----
 routes/web.php                              |  8 +++-
 3 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index d8f32e00..57d4dd2f 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -1109,6 +1109,9 @@ select {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.whitespace-nowrap {
+  white-space: nowrap;
+}
 .break-all {
   word-break: break-all;
 }
@@ -1162,6 +1165,12 @@ select {
 .border-dotted {
   border-style: dotted;
 }
+.border-hidden {
+  border-style: hidden;
+}
+.border-none {
+  border-style: none;
+}
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
diff --git a/resources/views/components/upload.blade.php b/resources/views/components/upload.blade.php
index f433b72c..dac71d3c 100644
--- a/resources/views/components/upload.blade.php
+++ b/resources/views/components/upload.blade.php
@@ -23,17 +23,24 @@
         </div>
     </div>
 
-    <div class="mb-4 p-4 bg-white rounded-md relative group">
-        <span id="copy-all" class="absolute top-2 right-2 px-2 py-1 rounded-md text-xs text-gray-800 bg-gray-100 cursor-pointer hidden group-hover:block">复制全部</span>
-        <div id="link-tabs" class="flex flex-nowrap overflow-scroll scrollbar-none text-sm">
-            <a href="javascript:void(0)" class="flex justify-center items-center px-8 py-2 border-b-2 border-indigo-500">URL</a>
-            <a href="javascript:void(0)" class="flex justify-center items-center px-8 py-2 border-indigo-500">HTML</a>
-            <a href="javascript:void(0)" class="flex justify-center items-center px-8 py-2 border-indigo-500">BBCode</a>
-            <a href="javascript:void(0)" class="flex justify-center items-center px-8 py-2 border-indigo-500">Markdown</a>
-            <a href="javascript:void(0)" class="flex justify-center items-center px-8 py-2 border-indigo-500" style="white-space: nowrap">Markdown with link</a>
+    <div id="links-container" class="hidden mb-4 p-4 bg-white rounded-md relative group">
+        <div class="absolute top-2 right-2 flex">
+            <span id="copy-all" class="px-2 py-1 rounded-md text-xs text-gray-800 bg-gray-100 cursor-pointer hidden group-hover:block">复制全部</span>
+            <span id="clear-all" class="ml-1 px-2 py-1 rounded-md text-xs text-gray-800 bg-gray-100 cursor-pointer hidden group-hover:block">清除</span>
         </div>
-        <div id="links" class="mt-2 space-y-2">
-            <p class="select-all hover:bg-gray-100 text-gray-600 rounded px-2 py-1 cursor-pointer overflow-scroll scrollbar-none">https://www.baidu.com/asdqwfdvergfweqwfwefw4gtwdvweqwd.jpg</p>
+        <div id="link-tabs" class="flex flex-nowrap overflow-scroll scrollbar-none text-sm">
+            <a href="javascript:void(0)" data-tab-name="url" class="hover:bg-gray-100 flex justify-center items-center px-8 py-2 border-b-2 border-indigo-500">URL</a>
+            <a href="javascript:void(0)" data-tab-name="html" class="hover:bg-gray-100 flex justify-center items-center px-8 py-2 border-b-2 border-transparent">HTML</a>
+            <a href="javascript:void(0)" data-tab-name="bbcode" class="hover:bg-gray-100 flex justify-center items-center px-8 py-2 border-b-2 border-transparent">BBCode</a>
+            <a href="javascript:void(0)" data-tab-name="markdown" class="hover:bg-gray-100 flex justify-center items-center px-8 py-2 border-b-2 border-transparent">Markdown</a>
+            <a href="javascript:void(0)" data-tab-name="markdown_with_link" class="hover:bg-gray-100 flex justify-center items-center px-8 py-2 border-b-2 border-transparent whitespace-nowrap">Markdown with link</a>
+        </div>
+        <div id="links" class="mt-2">
+            <div data-tab="url" class="space-y-2"></div>
+            <div data-tab="html" class="hidden space-y-2"></div>
+            <div data-tab="bbcode" class="hidden space-y-2"></div>
+            <div data-tab="markdown" class="hidden space-y-2"></div>
+            <div data-tab="markdown_with_link" class="hidden space-y-2"></div>
         </div>
     </div>
 </div>
@@ -85,6 +92,7 @@
             }
         });
         var $previews = $('#upload-preview');
+        var $links = $('#links-container');
         // 获取某个预览图片dom
         var $preview = function (id) {
             return $previews.find('[data-id="' + id + '"]');
@@ -120,6 +128,11 @@
         });
         uploader.on('uploadSuccess', function (file, response) {
             $preview(file.id).attr('uploaded', true).find('.upload-info').text('上传成功').addClass('text-green-800');
+            // 追加链接
+            for (var key in response) {
+                $('#links [data-tab="' + key + '"]').append('<p class="whitespace-nowrap select-all mt-1 bg-gray-50 hover:bg-gray-200 text-gray-600 rounded px-2 py-1 cursor-pointer overflow-scroll scrollbar-none">' + response[key].toString() + '</p>')
+            }
+            $links.show();
         });
         uploader.on('uploadComplete', function (file) {
         });
@@ -164,5 +177,20 @@
             }
         });
 
+        $('[data-tab-name]').click(function () {
+            $(this).removeClass('border-transparent')
+                .addClass('border-indigo-500')
+                .siblings()
+                .removeClass('border-indigo-500')
+                .addClass('border-transparent');
+            $('[data-tab]').hide();
+            $('[data-tab="' + $(this).data('tab-name') + '"]').show()
+        });
+
+        $('#clear-all').click(function () {
+            $('[data-tab]').html('')
+            $links.hide();
+        });
+
     </script>
 @endpush
diff --git a/routes/web.php b/routes/web.php
index a37570c2..2a494eb7 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -18,7 +18,13 @@ Route::get('/', function () {
 });
 
 Route::post('/upload', function () {
-    return [];
+    return [
+        'url' => 'https://pic.iqy.ink/2021/12/12/e8cfd03eb787f.png',
+        'html' => '&lt;img src="https://pic.iqy.ink/2021/12/12/e8cfd03eb787f.png" alt="e212bc43771ad6d391952732a1713e31.png" title="e212bc43771ad6d391952732a1713e31.png" /&gt;',
+        'bbcode' => '[img]https://pic.iqy.ink/2021/12/12/e8cfd03eb787f.png[/img]',
+        'markdown' => '![e212bc43771ad6d391952732a1713e31.png](https://pic.iqy.ink/2021/12/12/e8cfd03eb787f.png)',
+        'markdown_with_link' => '[![e212bc43771ad6d391952732a1713e31.png](https://pic.iqy.ink/2021/12/12/e8cfd03eb787f.png)](https://pic.iqy.ink/2021/12/12/e8cfd03eb787f.png)',
+    ];
 });
 
 Route::get('/dashboard', function () {