fix: use pagetempalte insteadof viewtemplate

plugins/oeyoews/neotw-tiddlers-view/files/templates/app.vue

@@ -1,5 +1,9 @@
 <template>
-  <!-- <div class="neotw-tiddlers-view"> -->
-  <TitleScroller />
-  <!-- </div> -->
+  <div class="scroll-container">
+    <transition name="scroll" mode="out-in">
+      <div v-if="currentTitle" :key="currentTitle" class="title-item" @click="goToTiddler(currentTitle)">
+        {{ currentTitle.slice(0, 50) }}
+      </div>
+    </transition>
+  </div>
 </template>

plugins/oeyoews/neotw-tiddlers-view/tiddlers/ViewTemplate.tid → plugins/oeyoews/neotw-tiddlers-view/tiddlers/PageTemplate.tid

@@ -1,5 +1,5 @@
 title: $:/plugins/oeyoews/neotw-tiddlers-view/viewTemplate
-tags: $:/tags/ViewTemplate
+tags: $:/tags/PageTemplate
 
 <div class="fixed bottom-2 left-2">
 <$widget-43kerdga />

plugins/oeyoews/neotw-tiddlers-view/tiddlers/app.js

@@ -5,32 +5,89 @@ module-type: library
 
 \*/
 
-// const { ref } = window.Vue;
-
-// 等价于 const getTemplate = require('$:/plugins/oeyoews/neotw-vue3/getTemplate.js');
 const getTemplate = require('../neotw-vue3/getTemplate.js');
 const pluginTitle = '$:/plugins/oeyoews/neotw-tiddlers-view';
 
-const TitleScroller = require('./components/TitleScroller.js');
-
 const app = () => {
   const component = {
-    components: {
-      TitleScroller,
-    },
     template: getTemplate(`${pluginTitle}/templates/app.vue`),
-    // setup() {},
     data() {
       return {
+        allTitles: [],
+        currentTitle: '',
+        currentIndex: 0,
+        lastUpdateTime: 0,
+        animationFrameId: null,
         visibleTitles: [],
+        filter:
+          '[!is[system]sort[title]!is[tag]!prefix[$:/]!is[binary]!is[draft]]',
       };
     },
-    // created() {},
     mounted() {
       console.log('App mounted!');
+      this.loadTitles();
+      this.startScrolling();
     },
 
-    methods: {},
+    methods: {
+      goToTiddler(title) {
+        const goto = new $tw.Story();
+        goto.navigateTiddler(title);
+      },
+
+      loadTitles() {
+        if ($tw && $tw.wiki) {
+          const tiddlers = $tw.wiki.filterTiddlers(this.filter);
+          this.allTitles = tiddlers;
+          this.updateCurrentTitle();
+        } else {
+          console.error('TiddlyWiki API not available');
+        }
+      },
+
+      updateCurrentTitle() {
+        if (this.allTitles.length === 0) {
+          this.currentTitle = '';
+          return;
+        }
+
+        // 只显示一个标题
+        const index = this.currentIndex % this.allTitles.length;
+        this.currentTitle = this.allTitles[index];
+      },
+
+      startScrolling() {
+        // 使用requestAnimationFrame实现滚动
+        const animate = (timestamp) => {
+          if (!this.lastUpdateTime) this.lastUpdateTime = timestamp;
+
+          // 每3000毫秒更新一次，但在暂停状态下不更新
+          if (timestamp - this.lastUpdateTime >= 3000) {
+            if (this.allTitles.length > 1) {
+              console.log('up');
+              this.currentIndex =
+                (this.currentIndex + 1) % this.allTitles.length;
+              this.updateCurrentTitle();
+            }
+            this.lastUpdateTime = timestamp;
+          }
+
+          // 继续下一帧动画
+          this.animationFrameId = window.requestAnimationFrame(animate);
+        };
+
+        // 开始动画循环
+        this.animationFrameId = window.requestAnimationFrame(animate);
+      },
+
+      stopScrolling() {
+        // 停止动画
+        if (this.animationFrameId) {
+          window.cancelAnimationFrame(this.animationFrameId);
+          this.animationFrameId = null;
+        }
+      },
+    },
   };
   return component;
 };