feat: add pinia and App.vue

package.json

@@ -14,6 +14,7 @@
         "@headlessui/vue": "^1.7.23",
         "@heroicons/vue": "^2.1.5",
         "@vueuse/core": "^11.0.3",
+        "pinia": "^2.2.3",
         "vue": "^3.5.4"
     },
     "devDependencies": {

src/App.vue

@@ -0,0 +1,16 @@
+<template>
+    <div>
+        <RulePanelView></RulePanelView>
+        <VideoFilterPanelView></VideoFilterPanelView>
+        <CommentFilterPanelView></CommentFilterPanelView>
+        <DynamicFilterPanelView></DynamicFilterPanelView>
+        <ContextMenuView></ContextMenuView>
+    </div>
+</template>
+<script setup lang="ts">
+import CommentFilterPanelView from './views/CommentFilterPanelView.vue'
+import ContextMenuView from './views/ContextMenuView.vue'
+import DynamicFilterPanelView from './views/DynamicFilterPanelView.vue'
+import RulePanelView from './views/RulePanelView.vue'
+import VideoFilterPanelView from './views/VideoFilterPanelView.vue'
+</script>

src/main.ts

@@ -1,22 +1,27 @@
 import { GM_registerMenuCommand } from '$'
+import { createPinia } from 'pinia'
 import { createApp } from 'vue'
+import App from './App.vue'
 import { loadModules } from './modules'
+import {
+    useCommentFilterPanelStore,
+    useDynamicFilterPanelStore,
+    useRulePanelStore,
+    useVideoFilterPanelStore,
+} from './stores/panel'
 import css from './style.css?inline'
 import { waitForBody } from './utils/init'
 import { log } from './utils/logger'
 import { upgrade } from './utils/upgrade'
-import CommentFilterPanelView from './views/CommentFilterPanelView.vue'
-import ContextMenuView from './views/ContextMenuView.vue'
-import DynamicFilterPanelView from './views/DynamicFilterPanelView.vue'
-import RulePanelView from './views/RulePanelView.vue'
-import VideoFilterPanelView from './views/VideoFilterPanelView.vue'
 
 log(`start, mode: ${import.meta.env.MODE}, url: ${location.href}`)
 
 upgrade()
 
 loadModules()
 
+const pinia = createPinia()
+
 // 创建插件面板用shadowDOM节点
 const wrap = document.createElement('div')
 wrap.id = 'bili-cleaner'
@@ -40,24 +45,18 @@ waitForBody().then(() => {
     document.body.appendChild(wrap)
 })
 
-const createView = (view: any) => {
-    createApp(view).mount(
-        (() => {
-            const app = document.createElement('div')
-            root.appendChild(app)
-            return app
-        })(),
-    )
-}
-
-// 右键菜单
-createView(ContextMenuView)
-
-const menu = () => {
-    GM_registerMenuCommand('✅页面净化优化', () => createView(RulePanelView))
-    GM_registerMenuCommand('✅视频过滤设置', () => createView(VideoFilterPanelView))
-    GM_registerMenuCommand('✅评论过滤设置', () => createView(CommentFilterPanelView))
-    GM_registerMenuCommand('✅动态过滤设置', () => createView(DynamicFilterPanelView))
-}
-
-menu()
+const app = createApp(App)
+app.use(pinia)
+
+app.mount(
+    (() => {
+        const app = document.createElement('div')
+        root.appendChild(app)
+        return app
+    })(),
+)
+
+GM_registerMenuCommand('✅页面净化优化', () => useRulePanelStore().show())
+GM_registerMenuCommand('✅视频过滤设置', () => useVideoFilterPanelStore().show())
+GM_registerMenuCommand('✅评论过滤设置', () => useCommentFilterPanelStore().show())
+GM_registerMenuCommand('✅动态过滤设置', () => useDynamicFilterPanelStore().show())

src/modules/filters/variety/comment/pages/dynamic.ts

@@ -715,23 +715,6 @@ export const commentFilterDynamicGroups: Group[] = [
     },
 ]
 
-// 右键菜单回调
-export const commentFilterDynamicAddUsername = async (username: string) => {
-    username = username.trim()
-    if (!username) {
-        return
-    }
-    try {
-        mainFilter.commentUsernameFilter.addParam(username)
-        mainFilter.check('full').then().catch()
-        const arr: string[] = GM_getValue(GM_KEYS.black.username.valueKey, [])
-        arr.unshift(username)
-        GM_setValue(GM_KEYS.black.username.valueKey, orderedUniq(arr))
-    } catch (err) {
-        error(`commentFilterDynamicAddUsername add username ${username} failed`, err)
-    }
-}
-
 // 右键菜单handler
 export const commentFilterDynamicHandler: ContextMenuTargetHandler = (target: HTMLElement): FilterContextMenu[] => {
     if (!isPageDynamic()) {

src/modules/rules/common/groups/basic.scss

@@ -338,22 +338,12 @@ html[font-patch-live] {
 }
 html[font-patch-dynamic] {
     .reply-item .root-reply-container .content-warp .user-info .user-name {
-        font-family:
-            "PingFang SC",
-            "HarmonyOS_Medium",
-            "Helvetica Neue",
-            "Microsoft YaHei",
-            sans-serif !important;
+        font-family: 'PingFang SC', 'HarmonyOS_Medium', 'Helvetica Neue', 'Microsoft YaHei', sans-serif !important;
         font-weight: 500 !important;
         font-size: 14px !important;
     }
     body {
-        font-family:
-            "PingFang SC",
-            "HarmonyOS_Regular",
-            "Helvetica Neue",
-            "Microsoft YaHei",
-            sans-serif !important;
+        font-family: 'PingFang SC', 'HarmonyOS_Regular', 'Helvetica Neue', 'Microsoft YaHei', sans-serif !important;
         font-weight: 400;
     }
 }

src/stores/panel.ts

@@ -0,0 +1,50 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+/**
+ * 控制几种panel的显示/隐藏状态
+ */
+
+export const useRulePanelStore = defineStore('RulePanel', () => {
+    const isShow = ref(false)
+    const show = () => {
+        isShow.value = true
+    }
+    const hide = () => {
+        isShow.value = false
+    }
+    return { isShow, show, hide }
+})
+
+export const useVideoFilterPanelStore = defineStore('VideoFilterPanel', () => {
+    const isShow = ref(false)
+    const show = () => {
+        isShow.value = true
+    }
+    const hide = () => {
+        isShow.value = false
+    }
+    return { isShow, show, hide }
+})
+
+export const useCommentFilterPanelStore = defineStore('CommentFilterPanel', () => {
+    const isShow = ref(false)
+    const show = () => {
+        isShow.value = true
+    }
+    const hide = () => {
+        isShow.value = false
+    }
+    return { isShow, show, hide }
+})
+
+export const useDynamicFilterPanelStore = defineStore('DynamicFilterPanel', () => {
+    const isShow = ref(false)
+    const show = () => {
+        isShow.value = true
+    }
+    const hide = () => {
+        isShow.value = false
+    }
+    return { isShow, show, hide }
+})

src/views/CommentFilterPanelView.vue

@@ -7,8 +7,8 @@
             minWidth: 360,
             minHeight: 600,
         }"
-        v-if="isShow"
-        @close="isShow = false"
+        v-if="store.isShow"
+        @close="store.hide"
     >
         <div v-for="(group, index) in currPageGroups" :key="index">
             <DisclosureComp v-bind="{ title: group.name }">
@@ -24,17 +24,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import DisclosureComp from '../components/DisclosureComp.vue'
 import EditorComp from '../components/items/EditorComp.vue'
 import ListComp from '../components/items/ListComp.vue'
 import NumberComp from '../components/items/NumberComp.vue'
 import SwitchComp from '../components/items/SwitchComp.vue'
 import PanelComp from '../components/PanelComp.vue'
 import { commentFilters } from '../modules/filters'
+import { useCommentFilterPanelStore } from '../stores/panel'
 import { Group } from '../types/collection'
 
-const isShow = ref(true)
+const store = useCommentFilterPanelStore()
 
 let currPageGroups: Group[] = []
 

src/views/DynamicFilterPanelView.vue

@@ -7,8 +7,8 @@
             minWidth: 360,
             minHeight: 600,
         }"
-        v-if="isShow"
-        @close="isShow = false"
+        v-if="store.isShow"
+        @close="store.hide"
     >
         <div v-for="(group, index) in currPageGroups" :key="index">
             <DisclosureComp v-bind="{ title: group.name }">
@@ -24,17 +24,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import DisclosureComp from '../components/DisclosureComp.vue'
 import EditorComp from '../components/items/EditorComp.vue'
 import ListComp from '../components/items/ListComp.vue'
 import NumberComp from '../components/items/NumberComp.vue'
 import SwitchComp from '../components/items/SwitchComp.vue'
 import PanelComp from '../components/PanelComp.vue'
 import { dynamicFilters } from '../modules/filters'
+import { useDynamicFilterPanelStore } from '../stores/panel'
 import { Group } from '../types/collection'
 
-const isShow = ref(true)
+const store = useDynamicFilterPanelStore()
 
 let currPageGroups: Group[] = []
 

src/views/RulePanelView.vue

@@ -1,8 +1,8 @@
 <template>
     <PanelComp
         v-bind="{ title: 'bilibili 页面净化大师', widthPercent: 28, heightPercent: 85, minWidth: 360, minHeight: 600 }"
-        v-if="isShow"
-        @close="isShow = false"
+        v-if="store.isShow"
+        @close="store.hide"
     >
         <div v-for="(group, index) in currPageGroups" :key="index">
             <DisclosureComp v-bind="{ title: group.name }">
@@ -18,17 +18,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import DisclosureComp from '../components/DisclosureComp.vue'
 import EditorComp from '../components/items/EditorComp.vue'
 import ListComp from '../components/items/ListComp.vue'
 import NumberComp from '../components/items/NumberComp.vue'
 import SwitchComp from '../components/items/SwitchComp.vue'
 import PanelComp from '../components/PanelComp.vue'
 import { rules } from '../modules/rules'
+import { useRulePanelStore } from '../stores/panel'
 import { Group } from '../types/collection'
 
-const isShow = ref(true)
+const store = useRulePanelStore()
 
 let currPageGroups: Group[] = []
 

src/views/VideoFilterPanelView.vue

@@ -7,8 +7,8 @@
             minWidth: 360,
             minHeight: 600,
         }"
-        v-if="isShow"
-        @close="isShow = false"
+        v-if="store.isShow"
+        @close="store.hide"
     >
         <div v-for="(group, index) in currPageGroups" :key="index">
             <DisclosureComp v-bind="{ title: group.name }">
@@ -24,17 +24,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import DisclosureComp from '../components/DisclosureComp.vue'
 import EditorComp from '../components/items/EditorComp.vue'
 import ListComp from '../components/items/ListComp.vue'
 import NumberComp from '../components/items/NumberComp.vue'
 import SwitchComp from '../components/items/SwitchComp.vue'
 import PanelComp from '../components/PanelComp.vue'
 import { videoFilters } from '../modules/filters'
+import { useVideoFilterPanelStore } from '../stores/panel'
 import { Group } from '../types/collection'
 
-const isShow = ref(true)
+const store = useVideoFilterPanelStore()
 
 let currPageGroups: Group[] = []