From bb9a94e633fd87c526737a91a55d59e4356b550c Mon Sep 17 00:00:00 2001
From: oeyoews <jyao4783@gmail.com>
Date: Sat, 9 Mar 2024 16:11:13 +0800
Subject: [PATCH] update transition

---
 .../vue-random-cards/tiddlers/component.js    | 14 +++++-----
 .../vue-random-cards/tiddlers/widget.vue      | 27 +++++++++----------
 2 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/plugins/oeyoews/vue-random-cards/tiddlers/component.js b/plugins/oeyoews/vue-random-cards/tiddlers/component.js
index 73a776eb99..30c641a270 100644
--- a/plugins/oeyoews/vue-random-cards/tiddlers/component.js
+++ b/plugins/oeyoews/vue-random-cards/tiddlers/component.js
@@ -30,7 +30,7 @@ const app = (filter = '[!is[system]!prefix[$:/]!<currentTiddler>]') => {
   const component = {
     setup() {
       const cardContent = ref('');
-      const titles = ref([]);
+      const title = ref('');
 
       const chartapp = ref();
       const chart = ref();
@@ -82,7 +82,7 @@ const app = (filter = '[!is[system]!prefix[$:/]!<currentTiddler>]') => {
         chart,
         chartdata,
         chartapp,
-        titles,
+        title,
         cardContent
       };
     },
@@ -116,7 +116,7 @@ const app = (filter = '[!is[system]!prefix[$:/]!<currentTiddler>]') => {
         if (this.chartdata.length > 10) {
           this.resetChart();
           this.chartdata.push({
-            name: this.titles[0],
+            name: this.title,
             value: 1
           });
         }
@@ -137,7 +137,7 @@ const app = (filter = '[!is[system]!prefix[$:/]!<currentTiddler>]') => {
       renderTiddler2HTML() {
         try {
           this.cardContent =
-            $tw.wiki.renderTiddler('text/html', this.titles[0]) || '空空如也';
+            $tw.wiki.renderTiddler('text/html', this.title) || '空空如也';
         } catch (e) {
           console.error(e);
           // toast.error(e.message);
@@ -145,9 +145,9 @@ const app = (filter = '[!is[system]!prefix[$:/]!<currentTiddler>]') => {
       },
 
       updateCard() {
-        this.titles[0] = this.randomTiddlerTitle();
+        this.title = this.randomTiddlerTitle();
         this.chartdata.push({
-          name: this.titles[0],
+          name: this.title,
           value: 1
         });
 
@@ -155,7 +155,7 @@ const app = (filter = '[!is[system]!prefix[$:/]!<currentTiddler>]') => {
       },
 
       gotoTiddler() {
-        story.navigateTiddler(this.titles[0]);
+        story.navigateTiddler(this.title);
       }
     },
 
diff --git a/plugins/oeyoews/vue-random-cards/tiddlers/widget.vue b/plugins/oeyoews/vue-random-cards/tiddlers/widget.vue
index 899c662258..c0cf4b7271 100644
--- a/plugins/oeyoews/vue-random-cards/tiddlers/widget.vue
+++ b/plugins/oeyoews/vue-random-cards/tiddlers/widget.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center justify-end gap-2">
-    <button @click="gotoTiddler" v-if="titles[0]" class="p-2">卡片跳转</button>
+    <button @click="gotoTiddler" v-if="title" class="p-2">卡片跳转</button>
     <button @click="resetChart" v-show="chartdata.length > 0" class="p-2">
       重置数据
     </button>
@@ -27,22 +27,21 @@
         ref="chart"
         style="width: 900px; height: 300px"
         class="overflow-auto"
-        v-show="titles[0]"
+        v-show="title"
       ></div>
     </Transition>
   </div>
 
-  <TransitionGroup>
-    <div v-for="title in titles" :key="title">
-      <div
-        class="p-4 rounded border border-solid dark:border-gray-400 my-2 border-gray-200"
-        v-if="title"
-      >
-        <h2>
-          {{ title }}
-        </h2>
-        <p v-html="cardContent" />
-      </div>
+  <Transition>
+    <div
+      class="p-4 rounded border border-solid dark:border-gray-400 my-2 border-gray-200"
+      v-if="title"
+      :key="title"
+    >
+      <h2>
+        {{ title }}
+      </h2>
+      <p v-html="cardContent" />
     </div>
-  </TransitionGroup>
+  </Transition>
 </template>