impl ydke share

2 files changed, 32 insertions, 8 deletions

diff --git a/src/components/MainPanel.svelte b/src/components/MainPanel.svelte
index b5f5f2e..5cef824 100644
--- a/src/components/MainPanel.svelte
+++ b/src/components/MainPanel.svelte
@@ -1,7 +1,12 @@
 <script lang="js">
     import CardThumb from './CardThumb.svelte';
     import { deck, setDeck } from '../control/deck';
-    import { parseYdk, genYdk, downloadStringAsFile} from '../utils'
+    import {
+        parseYdk,
+        genYdk,
+        genYdke,
+        downloadStringAsFile,
+    } from '../utils';
 
     let fileInput;
     
@@ -26,6 +31,19 @@
         downloadStringAsFile('mydeck.ydk', deckString)
     }
 
+    function shareDeck() {
+        let url = window.location.href;
+        url = url.split('#')[0]
+        url = url + '#' + genYdke($deck);
+        navigator.clipboard.writeText(url)
+            .then(() => {
+              alert('分享链接已复制到剪贴板')
+            })
+            .catch(err => {
+              alert("失败！");
+            });
+    }
+
 </script>
 
 <input bind:this={fileInput} style="display:none;" onchange={loadDeck} type="file" class="file-input" accept=".ydk" />
@@ -34,6 +52,7 @@
     <div class="control-bar">
         <button class="btn" onclick={openDeck}>打开</button>
         <button class="btn" onclick={saveDeck}>保存</button>
+        <button class="btn" onclick={shareDeck}>分享</button>
     </div>
     <div class="deck-section">
         <div class="deck-group">
diff --git a/src/components/RightPanel.svelte b/src/components/RightPanel.svelte
index 5ede942..062e33c 100644
--- a/src/components/RightPanel.svelte
+++ b/src/components/RightPanel.svelte
@@ -1,9 +1,14 @@
-<script lang="ts">
+<script lang="js">
+    import CardThumb from './CardThumb.svelte';
+    import { resultCards } from '../control/search'
 
-import CardThumb from './CardThumb.svelte';
+    function onPrevPage() {
 
-let cardList = $state([]);
+    }
 
+    function onNextPage() {
+        
+    }
 </script>
 
 <div class="right-panel">
@@ -11,9 +16,9 @@ let cardList = $state([]);
         <input type="text" placeholder="搜索卡牌...">
     </div>
     <div class="card-list">
-        {#if cardList.length > 0}
+        {#if $resultCards.length > 0}
             <div class="card-item">
-                {#each cardList as card}
+                {#each $resultCards as card}
                     <div class="card-thumbnail">
                         <CardThumb id= {card.id} />
                     </div>
@@ -23,8 +28,8 @@ let cardList = $state([]);
         {/if}
     </div>
     <div class="pagination">
-        <button class="page-btn">上一页</button>
-        <button class="page-btn">下一页</button>
+        <button class="page-btn" onclick={onPrevPage}>上一页</button>
+        <button class="page-btn" onclick={onNextPage}>下一页</button>
     </div>
 </div>