feat(vscode): 支持打开规则链接

aooiuu · Jun 4, 2024 · 609cde9 · 609cde9
1 parent c5f0c42
commit 609cde9
Show file tree

Hide file tree

Showing 9 changed files with 178 additions and 91 deletions.
diff --git a/packages/vscode/package.json b/packages/vscode/package.json
@@ -3,7 +3,7 @@
   "displayName": "any-reader",
   "description": "摸鱼,自定义规则多站点聚合搜索阅读小说、漫画。包含JS规则解析库和VSCode插件。支持本地小说 TXT、EPUB",
   "icon": "resources/icon.png",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "publisher": "aooiu",
   "qna": "https://github.com/aooiuu/any-reader/issues",
   "bugs": {
@@ -83,6 +83,11 @@
         "title": "open local book dir",
         "icon": "$(folder-opened)",
         "category": "any-reader"
+      },
+      {
+        "command": "any-reader.openUrl",
+        "title": "open url",
+        "category": "any-reader"
       }
     ],
     "viewsContainers": {

diff --git a/packages/vscode/src/App.ts b/packages/vscode/src/App.ts
@@ -27,6 +27,7 @@ class App {
       registerCommand(COMMANDS.searchBook, this.searchBook, this),
       registerCommand(COMMANDS.getChapter, this.getChapter, this),
       registerCommand(COMMANDS.discover, this.discover, this),
+      registerCommand(COMMANDS.openUrl, this.openUrl, this),
       registerCommand(COMMANDS.openLocalBookDir, this.openLocalBookDir, this),
       registerCommand(COMMANDS.home, () => this.webView.navigateTo('/rules'), this.webView),
       registerCommand(COMMANDS.gamePlay, (node: any) => this.webView.navigateTo('/iframe?url=' + node.host, node.name), this.webView)
@@ -54,6 +55,11 @@ class App {
     this.webView.navigateTo('/discover');
   }
 
+  // 打开链接
+  openUrl(url: string) {
+    this.webView.navigateTo(url);
+  }
+
   /**
    * 获取章节
    */

diff --git a/packages/vscode/src/constants.ts b/packages/vscode/src/constants.ts
@@ -8,7 +8,8 @@ export enum COMMANDS {
   discover = 'any-reader.discover',
   openLocalBookDir = 'any-reader.openLocalBookDir',
   home = 'any-reader.home',
-  gamePlay = 'any-reader.gamePlay'
+  gamePlay = 'any-reader.gamePlay',
+  openUrl = 'any-reader.openUrl'
 }
 
 export const ROOT_PATH = path.join(os.homedir(), '.any-reader');

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "any-reader-web",
-  "version": "1.0.0-dev.14",
+  "version": "1.0.0-dev.15",
   "private": true,
   "scripts": {
     "dev": "cross-env VITE_APP_PLATFORM=browser vite",

diff --git a/packages/web/src/App.vue b/packages/web/src/App.vue
@@ -8,30 +8,12 @@
         <component :is="Component" v-if="!route.meta.keepAlive" :key="route.fullPath" />
       </RouterView>
     </div>
-
-    <div v-if="PLATFORM === 'vscode'" class="flex py-4 px-8 gap-4">
-      <div class="vsc-toolbar-btn codicon codicon-arrow-left" @click="router.back()"></div>
-      <div class="flex-1"></div>
-      <div
-        class="vsc-toolbar-btn codicon codicon-github-alt"
-        title="github"
-        @click="executeCommand({ command: 'vscode.open', data: ['https://github.com/aooiuu/any-reader'] })"
-      ></div>
-      <div class="vsc-toolbar-btn codicon codicon-settings-gear" title="设置" @click="router.push('/settings')"></div>
-      <div class="vsc-toolbar-btn codicon codicon-extensions" title="规则" @click="router.push('/vsc/rules')"></div>
-      <div class="vsc-toolbar-btn codicon codicon-flame" title="大发现页" @click="executeCommand({ command: 'any-reader.discover' })"></div>
-      <div class="vsc-toolbar-btn codicon codicon-go-to-search" title="大搜索" @click="executeCommand({ command: 'any-reader.search' })"></div>
-      <div class="vsc-toolbar-btn codicon codicon-search" title="搜索" @click="router.push('/vsc/search')"></div>
-      <div class="vsc-toolbar-btn codicon codicon-home" title="首页" @click="router.push('/')"></div>
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { RouterView } from 'vue-router';
-import { PLATFORM } from '@/constants';
 import { useMessage } from '@/utils/postMessage';
-import { executeCommand } from '@/api/vsc';
 
 const router = useRouter();
 

diff --git a/packages/web/src/pages/pc/rules/index.vue b/packages/web/src/pages/pc/rules/index.vue
@@ -267,15 +267,11 @@ const tableColumns = ref([
     sortable: {
       sortDirections: ['ascend', 'descend'],
       sorter: (a, b, { direction }) => {
+        const field = `extra.post@content.ok`;
         if (direction === 'descend') {
-          const field = `extra.post@content.ok`;
           return _.get(a, field, 0) > _.get(b, field, 0) ? -1 : 1;
         } else {
-          // 计算所有的失败字段
-          const fields = LOG_CONFIG.map(({ url }) => `extra.${url}.fail`);
-          const a1 = _.sum(fields.map((field) => _.get(a, field, 0)));
-          const b1 = _.sum(fields.map((field) => _.get(b, field, 0)));
-          return a1 > b1 ? -1 : 1;
+          return _.get(a, field, 0) > _.get(b, field, 0) ? 1 : -1;
         }
       }
     },

diff --git a/packages/web/src/pages/vscode/layout/index.vue b/packages/web/src/pages/vscode/layout/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="w-full h-full flex flex-col">
+    <div class="flex-1 overflow-auto">
+      <RouterView v-slot="{ Component, route: routev }">
+        <KeepAlive>
+          <component :is="Component" v-if="routev.meta.keepAlive" :key="routev.fullPath" />
+        </KeepAlive>
+        <component :is="Component" v-if="!routev.meta.keepAlive" :key="routev.fullPath" />
+      </RouterView>
+    </div>
+    <div v-if="!hideBtmBar" class="flex py-4 px-8 gap-4">
+      <div class="vsc-toolbar-btn codicon codicon-arrow-left" @click="router.back()"></div>
+      <div class="flex-1"></div>
+      <div
+        class="vsc-toolbar-btn codicon codicon-github-alt"
+        title="github"
+        @click="executeCommand({ command: 'vscode.open', data: ['https://github.com/aooiuu/any-reader'] })"
+      ></div>
+      <div class="vsc-toolbar-btn codicon codicon-settings-gear" title="设置" @click="router.push('/settings')"></div>
+      <div class="vsc-toolbar-btn codicon codicon-extensions" title="规则" @click="router.push('/vsc/rules')"></div>
+      <div class="vsc-toolbar-btn codicon codicon-flame" title="大发现页" @click="executeCommand({ command: 'any-reader.discover' })"></div>
+      <div class="vsc-toolbar-btn codicon codicon-go-to-search" title="大搜索" @click="executeCommand({ command: 'any-reader.search' })"></div>
+      <div class="vsc-toolbar-btn codicon codicon-search" title="搜索" @click="router.push('/vsc/search')"></div>
+      <div class="vsc-toolbar-btn codicon codicon-home" title="首页" @click="router.push('/')"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import '@/plugins/vsc-ui';
+import { executeCommand } from '@/api/vsc';
+
+const route = useRoute();
+const router = useRouter();
+
+const hideBtmBar = computed(() => route.meta?.hideBtmBar);
+</script>
diff --git a/packages/web/src/pages/vscode/rules/index.vsc.vue b/packages/web/src/pages/vscode/rules/index.vsc.vue
@@ -1,15 +1,23 @@
 <template>
   <div class="w-full h-full flex flex-col overflow-hidden">
-    <TreeItem @click="executeCommand({ command: 'any-reader.home' })">
-      <div class="flex items-center"><i class="codicon codicon-surround-with mr-2"></i>编辑规则</div>
-    </TreeItem>
-    <TreeItem @click="executeCommand({ command: 'any-reader.editBookSource' })">
-      <div class="flex items-center"><i class="codicon codicon-folder-opened mr-2"></i>打开规则文件</div>
-    </TreeItem>
+    <div class="p-10">
+      <vscode-dropdown placeholder="全部规则" class="w-full" :value="'' + contentType" @input="(event) => (contentType = +event.target.value)">
+        <vscode-option v-for="item in CONTENT_TYPES" :key="item.value" :value="item.value">
+          {{ item.label }}
+        </vscode-option>
+        <vscode-option :value="null"> 全部规则 </vscode-option>
+      </vscode-dropdown>
+    </div>
     <div class="flex-1 overflow-auto">
       <template v-if="rulesStore.list.length">
-        <TreeItem v-for="item in rulesStore.list" :key="item.id">
-          {{ item.name }}
+        <TreeItem v-for="item in rules" :key="item.id">
+          <div class="reader-node flex items-center">
+            <div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis">{{ item.name }}</div>
+            <div
+              class="codicon codicon-link-external"
+              @click.stop="executeCommand({ command: 'any-reader.openUrl', data: ['/iframe?url=' + item.host] })"
+            ></div>
+          </div>
         </TreeItem>
       </template>
       <div v-else class="my-10 h-full flex flex-col justify-center items-center px-10" @drop="dropRules.drop" @dragover.prevent @dragenter.prevent>
@@ -21,17 +29,49 @@
         </div>
       </div>
     </div>
+    <div class="flex justify-between">
+      <TreeItem @click="executeCommand({ command: 'any-reader.home' })">
+        <div class="flex items-center"><i class="codicon codicon-surround-with mr-2"></i>编辑</div>
+      </TreeItem>
+      <TreeItem @click="executeCommand({ command: 'any-reader.editBookSource' })">
+        <div class="flex items-center justify-end"><i class="codicon codicon-folder-opened mr-2"></i>打开</div>
+      </TreeItem>
+    </div>
   </div>
 </template>
 
 <script setup>
+import { CONTENT_TYPES } from '@/constants';
 import { useRulesStore } from '@/stores/rules';
 import TreeItem from '@/components/vsc/TreeItem.vue';
 import { executeCommand } from '@/api/vsc';
 import { useDropRules } from '@/hooks/useDropRules';
 
+const contentType = ref(null);
 const rulesStore = useRulesStore();
 const dropRules = useDropRules();
 
+const rules = computed(() => {
+  if (!contentType.value) {
+    return rulesStore.list;
+  }
+  return rulesStore.list.filter((e) => e.contentType === contentType.value);
+});
+
 rulesStore.sync();
 </script>
+
+<style lang="scss">
+.reader-node {
+  .codicon {
+    display: none;
+    cursor: pointer;
+  }
+
+  &:hover {
+    .codicon {
+      display: block;
+    }
+  }
+}
+</style>
diff --git a/packages/web/src/router/router.vsc.ts b/packages/web/src/router/router.vsc.ts
@@ -6,62 +6,82 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      component: () => import('@/pages/vscode/home/index.vue')
-    },
-    {
-      path: '/player',
-      component: () => import('@/pages/vscode/player/index.vue')
-    },
-    {
-      path: '/rules',
-      component: () => import('@/pages/pc/rules/index.vue')
-    },
-    {
-      path: '/rule-info',
-      name: 'ruleInfo',
-      component: () => import('@/pages/pc/rule-info/index.vue')
-    },
-    {
-      path: '/iframe',
-      component: () => import('@/pages/vscode/iframe/index.vue')
-    },
-    {
-      path: '/search',
-      component: () => import('@/pages/vscode/search/index.vue'),
-      meta: {
-        keepAlive: true
-      }
-    },
-    {
-      path: '/vsc/search',
-      component: () => import('@/pages/vscode/search/index.vsc.vue'),
-      meta: {
-        keepAlive: true
-      }
-    },
-    {
-      path: '/vsc/rules',
-      component: () => import('@/pages/vscode/rules/index.vsc.vue')
-    },
-    {
-      path: '/discover',
-      component: () => import('@/pages/vscode/discover/index.vue')
-    },
-    {
-      path: '/content',
-      name: 'content',
-      component: () => import('@/pages/vscode/content/index.vue')
-    },
-    {
-      path: '/chapter',
-      component: () => import('@/pages/vscode/chapter/index.vue'),
-      meta: {
-        keepAlive: true
-      }
-    },
-    {
-      path: '/settings',
-      component: () => import('@/pages/vscode/settings/index.vue')
+      redirect: '/home',
+      component: () => import('@/pages/vscode/layout/index.vue'),
+      children: [
+        {
+          path: '/home',
+          component: () => import('@/pages/vscode/home/index.vue')
+        },
+        {
+          path: '/player',
+          component: () => import('@/pages/vscode/player/index.vue'),
+          meta: {
+            hideBtmBar: true
+          }
+        },
+        {
+          path: '/rules',
+          component: () => import('@/pages/pc/rules/index.vue'),
+          meta: {
+            hideBtmBar: true
+          }
+        },
+        {
+          path: '/rule-info',
+          name: 'ruleInfo',
+          component: () => import('@/pages/pc/rule-info/index.vue')
+        },
+        {
+          path: '/iframe',
+          component: () => import('@/pages/vscode/iframe/index.vue'),
+          meta: {
+            hideBtmBar: true
+          }
+        },
+        {
+          path: '/search',
+          component: () => import('@/pages/vscode/search/index.vue'),
+          meta: {
+            keepAlive: true,
+            hideBtmBar: true
+          }
+        },
+        {
+          path: '/vsc/search',
+          component: () => import('@/pages/vscode/search/index.vsc.vue'),
+          meta: {
+            keepAlive: true
+          }
+        },
+        {
+          path: '/vsc/rules',
+          component: () => import('@/pages/vscode/rules/index.vsc.vue')
+        },
+        {
+          path: '/discover',
+          component: () => import('@/pages/vscode/discover/index.vue'),
+          meta: {
+            hideBtmBar: true
+          }
+        },
+        {
+          path: '/content',
+          name: 'content',
+          component: () => import('@/pages/vscode/content/index.vue')
+        },
+        {
+          path: '/chapter',
+          component: () => import('@/pages/vscode/chapter/index.vue'),
+          meta: {
+            keepAlive: true
+          }
+        },
+        {
+          path: '/settings',
+          component: () => import('@/pages/vscode/settings/index.vue')
+        }
+      ]
     }
   ]
 });