重构为使用 Dexie 管理数据库

Author: 2234839

apps/InfoFlow/components/RuleExecutionRecords.vue

@@ -77,17 +77,25 @@
           :rows="pageSize"
           :totalRecords="totalRecords"
           :rowsPerPageOptions="[10, 20, 50]"
+          :lazy="true"
           @page="handlePageChange"
           responsiveLayout="scroll"
-          stripedRows
           v-model:expandedRows="expandedRows"
-          dataKey="id">
+          dataKey="id"
+          :rowStyle="getRowStyle">
           <Column :expander="true" headerStyle="width: 3rem" />
           <Column field="name" header="规则名称" class="min-w-[150px] whitespace-nowrap">
             <template #body="slotProps">
-              <div>
-                <div class="font-medium">{{ slotProps.data.name }}</div>
-                <div class="text-sm text-gray-600">{{ slotProps.data.description }}</div>
+              <div class="flex items-center gap-2">
+                <div
+                  v-if="hasUnreadExecutions(slotProps.data.id)"
+                  class="w-2 h-2 rounded-full bg-blue-500"
+                  title="有未读的执行记录">
+                </div>
+                <div>
+                  <div class="font-medium">{{ slotProps.data.name }}</div>
+                  <div class="text-sm text-gray-600">{{ slotProps.data.description }}</div>
+                </div>
               </div>
             </template>
           </Column>
@@ -518,6 +526,13 @@ return document.title;"
     return format(new Date(date), 'MM-dd HH:mm');
   };
 
+  // 检测规则是否有未读的执行记录
+  const ruleUnreadStatus = ref<Record<string, boolean>>({});
+  
+  const hasUnreadExecutions = (ruleId: string) => {
+    return ruleUnreadStatus.value[ruleId] || false;
+  };
+
   // Methods
   const loadRules = async () => {
     loading.value = true;
@@ -533,6 +548,9 @@ return document.title;"
 
       rules.value = result.rules;
       totalRecords.value = result.total;
+      
+      // 检查每个规则的未读执行记录状态
+      await checkRulesUnreadStatus();
     } finally {
       loading.value = false;
     }
@@ -546,12 +564,52 @@ return document.title;"
     }
   };
 
+  const checkRulesUnreadStatus = async () => {
+    try {
+      // 重置未读状态
+      ruleUnreadStatus.value = {};
+      
+      // 并行检查每个规则的未读状态
+      const checkPromises = rules.value.map(async (rule: Rule) => {
+        const hasUnread = await rulesManager.hasUnreadExecutions(rule.id);
+        return { ruleId: rule.id, hasUnread };
+      });
+      
+      const results = await Promise.all(checkPromises);
+      
+      // 设置未读状态
+      for (const result of results) {
+        ruleUnreadStatus.value[result.ruleId] = result.hasUnread;
+      }
+    } catch (error) {
+      console.error('Failed to check rules unread status:', error);
+    }
+  };
+
   const handlePageChange = (event: any) => {
     currentPage.value = event.page + 1;
     pageSize.value = event.rows;
     loadRules();
   };
 
+  const getRowStyle = (rule: Rule) => {
+    const hasUnread = hasUnreadExecutions(rule.id);
+    
+    if (hasUnread) {
+      return {
+        backgroundColor: '#ffffff',
+        borderLeft: '3px solid #3b82f6',
+        fontWeight: '500',
+        cursor: 'pointer',
+      };
+    } else {
+      return {
+        backgroundColor: '#f8fafc',
+        cursor: 'pointer',
+      };
+    }
+  };
+
   const handleSearch = () => {
     currentPage.value = 1;
     loadRules();

apps/InfoFlow/components/RulesManagement.vue

@@ -1,10 +1,9 @@
 import { browser, defineBackground } from '#imports';
 import { infoFlowGetMessenger } from '@/services/InfoFlowGet/messageProtocol';
 import { runInfoFlowGet } from '@/services/InfoFlowGet/runInfoFlowGet';
-import { openExtensionDatabase, registerConfigsService } from '@/storage/indexdbAdapter';
-import { openInfoFlowRulesDatabase, registerRulesService } from '@/storage/rulesService';
+import { registerConfigsService } from '@/storage/indexdbAdapter';
+import { registerRulesService } from '@/storage/rulesService';
 import {
-  openInfoFlowTaskExecutionDatabase,
   registerTaskExecutionService,
 } from '@/storage/taskExecutionService';
 
@@ -15,12 +14,8 @@ export default defineBackground(() => {
     return runInfoFlowGet(msg.data);
   });
 
-  const db = openExtensionDatabase();
-  registerConfigsService(db);
+  registerConfigsService();
+  registerRulesService();
 
-  const InfoFlowRulesDB = openInfoFlowRulesDatabase();
-  registerRulesService(InfoFlowRulesDB);
-
-  const taskDB = openInfoFlowTaskExecutionDatabase();
-  registerTaskExecutionService(taskDB);
+  registerTaskExecutionService();
 });

apps/InfoFlow/entrypoints/background.ts

@@ -25,8 +25,8 @@
     "@webext-core/messaging": "^2.3.0",
     "@webext-core/proxy-service": "^1.2.1",
     "date-fns": "^4.1.0",
+    "dexie": "^4.2.0",
     "fast-equals": "^5.2.2",
-    "idb": "^8.0.3",
     "primeicons": "^7.0.0",
     "primevue": "^4.3.7",
     "superjson": "^2.2.2",

apps/InfoFlow/package.json

@@ -0,0 +1,62 @@
+import Dexie, { Table } from 'dexie';
+
+// 定义配置项类型
+export interface ConfigItem {
+  key: string;
+  data: any;
+}
+
+// 创建 Dexie 数据库
+class ConfigDatabase extends Dexie {
+  configs!: Table<ConfigItem, string>;
+
+  constructor() {
+    super('infoFlowConfigDB');
+    
+    // 定义数据库架构 - Dexie 会自动处理版本和索引
+    this.version(1).stores({
+      configs: 'key, data'
+    });
+  }
+}
+
+// 创建数据库实例
+const db = new ConfigDatabase();
+
+// 配置服务
+export class ConfigService {
+  // 获取所有配置
+  async getAll(): Promise<ConfigItem[]> {
+    return await db.configs.toArray();
+  }
+
+  // 更新或插入配置
+  async upsert(info: ConfigItem): Promise<void> {
+    await db.configs.put(info);
+  }
+
+  // 获取配置项
+  async getItem(key: string): Promise<any> {
+    const result = await db.configs.get(key);
+    return result?.data;
+  }
+
+  // 设置配置项
+  async setItem(key: string, data: any): Promise<void> {
+    await db.configs.put({ key, data });
+  }
+
+  // 删除配置项
+  async deleteItem(key: string): Promise<void> {
+    await db.configs.delete(key);
+  }
+
+  // 重置数据库
+  async reset(): Promise<void> {
+    await db.delete();
+    await db.open();
+  }
+}
+
+// 创建服务实例
+export const configService = new ConfigService();

apps/InfoFlow/storage/configServiceDexie.ts

@@ -1,45 +1,40 @@
-import { DBSchema, IDBPDatabase, openDB } from 'idb';
+import Dexie, { Table } from 'dexie';
 import { defineProxyService } from '@webext-core/proxy-service';
 import type { StorageAdapter, VersionedStorage } from './storageAdapter';
-interface ExtensionDatabaseSchema extends DBSchema {
-  configs: {
-    key: string;
-    value: { data: any; key: string };
-  };
+
+interface ConfigItem {
+  key: string;
+  data: any;
 }
 
-export type ExtensionDatabase = IDBPDatabase<ExtensionDatabaseSchema>;
+class ConfigDatabase extends Dexie {
+  configs!: Table<ConfigItem, string>;
 
-/**
- * 这里创建的数据可以在background 中运行，能够通过检查 popup 中的存储查看 indexdb 数据库。
- */
-export function openExtensionDatabase(): Promise<ExtensionDatabase> {
-  return openDB<ExtensionDatabaseSchema>('infoFlow', 3, {
-    upgrade(database) {
-      database.createObjectStore('configs', {
-        /** 这里定义的key是插入和查询都需要的 */ keyPath: 'key',
-      });
-    },
-  });
+  constructor() {
+    super('infoFlowConfigDB');
+    
+    this.version(1).stores({
+      configs: 'key, data'
+    });
+  }
 }
 
-function createConfigsService(_db: Promise<ExtensionDatabase>) {
+const db = new ConfigDatabase();
+
+function createConfigsService() {
   return {
     async getAll() {
-      const db = await _db;
-      return await db.getAll('configs');
+      return await db.configs.toArray();
     },
-    async upsert(info: ExtensionDatabaseSchema['configs']['value']) {
-      const db = await _db;
-      await db.put('configs', info);
+    async upsert(info: ConfigItem) {
+      await db.configs.put(info);
     },
     async getItem(key: string) {
-      const db = await _db;
-      return await db.get('configs', key);
+      const result = await db.configs.get(key);
+      return result?.data;
     },
     async setItem(key: string, data: any) {
-      const db = await _db;
-      return await db.put('configs', { key, data });
+      await db.configs.put({ key, data });
     },
   };
 }