feat: 优化规则编辑

aooiuu · Sep 12, 2024 · 0f3c612 · 0f3c612
1 parent abca764
commit 0f3c612
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 40 deletions.
diff --git a/docs/index.md b/docs/index.md
@@ -29,8 +29,8 @@ corepack enable
 # 安装依赖
 pnpm i
 
-# 编译 解析库、工具库、前端模板
-pnpm run build
+# 运行网页版
+pnpm run web:dev
 ```
 
 ### 源码目录结构

diff --git a/packages/web/src/pages/pc/category/index.vue b/packages/web/src/pages/pc/category/index.vue
@@ -87,7 +87,7 @@
         <SettingOutlined />
       </template>
 
-      <a-float-button tooltip="编辑规则" @click="editRule">
+      <a-float-button tooltip="编辑规则" @click="ruleInfoVisible = true">
         <template #icon>
           <EditOutlined />
         </template>
@@ -99,11 +99,14 @@
         </template>
       </a-float-button>
     </a-float-button-group>
+
+    <a-drawer v-model:open="ruleInfoVisible" width="100vw" title="编辑规则" placement="left">
+      <RuleInfo v-if="ruleInfoVisible" :rule-id="ruleId" @close="ruleInfoVisible = false" />
+    </a-drawer>
   </div>
 </template>
 
 <script setup lang="tsx">
-import { App } from 'ant-design-vue';
 import { CONTENT_TYPES } from '@/constants';
 import { ContentType } from '@any-reader/rule-utils';
 import { discover, discoverMap } from '@/api';
@@ -112,7 +115,6 @@ import { useFavoritesStore } from '@/stores/favorites';
 import { useRulesStore } from '@/stores/rules';
 import RuleInfo from '@/pages/pc/rule-info/index.vue';
 
-const { modal } = App.useApp();
 const route = useRoute();
 const router = useRouter();
 const favoritesStore = useFavoritesStore();
@@ -185,25 +187,7 @@ onDeactivated(() => {
 });
 
 // 编辑规则
-function editRule() {
-  const m = modal.confirm({
-    icon: <SettingOutlined class="!text-[--ar-color-text]" />,
-    closable: true,
-    mask: false,
-    footer: false,
-    title: '编辑规则',
-    class: '!p-0 top-0 !w-full',
-    wrapClassName: 'full-modal',
-    content: (
-      <RuleInfo
-        ruleId={ruleId.value}
-        onClose={() => {
-          m.destroy();
-        }}
-      />
-    )
-  });
-}
+const ruleInfoVisible = ref(false);
 
 // 禁用规则
 async function disableRule() {

diff --git a/packages/web/src/pages/pc/rules/index.vue b/packages/web/src/pages/pc/rules/index.vue
@@ -89,11 +89,17 @@
         </template>
       </a-table>
     </div>
+
+    <!-- 规则编辑 -->
+    <a-drawer v-model:open="ruleInfoVisible" width="100vw" title="编辑规则" placement="left">
+      <RuleInfo v-if="ruleInfoVisible" :rule-id="ruleId" @close="ruleInfoVisible = false" />
+    </a-drawer>
   </div>
 </template>
 
 <script setup lang="tsx">
 import { App } from 'ant-design-vue';
+import type { ColumnsType } from 'ant-design-vue/es/table/Table';
 import _ from 'lodash-es';
 import { encodeRule, type Rule } from '@any-reader/rule-utils';
 import { useClipboard, useElementSize } from '@vueuse/core';
@@ -105,7 +111,7 @@ import { timeoutWith } from '@/utils/promise';
 import { useDropRules } from '@/hooks/useDropRules';
 import ImportRules from './ImportRules.vue';
 import ImportCMS from './ImportCMS.vue';
-import type { ColumnsType } from 'ant-design-vue/es/table/Table';
+import RuleInfo from '@/pages/pc/rule-info/index.vue';
 
 const { modal, message } = App.useApp();
 
@@ -119,6 +125,10 @@ const selectedKeys = ref<string[]>([]);
 const loading = ref(false);
 const fileInputRef = ref();
 
+// 规则编辑
+const ruleInfoVisible = ref(false);
+const ruleId = ref('');
+
 async function getRules() {
   loading.value = true;
   await rulesStore.sync();
@@ -129,12 +139,8 @@ const searchText = ref('');
 const contentTypes = ref(CONTENT_TYPES.map((e) => e.value).flat());
 
 function editRule(row: Rule) {
-  router.push({
-    name: 'ruleInfo',
-    query: {
-      id: row.id
-    }
-  });
+  ruleId.value = row.id;
+  ruleInfoVisible.value = true;
 }
 
 function sortableValue(obj: any, path: string) {

diff --git a/packages/web/vite.config.mts b/packages/web/vite.config.mts
@@ -1,6 +1,7 @@
 import { fileURLToPath, URL } from 'node:url';
 
 import { defineConfig, loadEnv } from 'vite';
+import { alias } from './vite/alias';
 import createPlugins from './vite/plugins';
 
 export type TPlatform = 'browser' | 'vscode' | 'electron' | 'utools';
@@ -62,6 +63,8 @@ export default defineConfig(({ mode, command }) => {
     },
     resolve: {
       alias: {
+        ...alias,
+
         '@/router/router': fileURLToPath(new URL('./src/router/router' + (env.VITE_APP_PLATFORM === 'vscode' ? '.vsc' : '.pc'), import.meta.url)),
         '@/stores/setting': fileURLToPath(new URL('./src/stores/setting' + (env.VITE_APP_PLATFORM === 'vscode' ? '.vsc' : '.pc'), import.meta.url)),
         '@': fileURLToPath(new URL('./src', import.meta.url))

diff --git a/packages/web/vite/alias.ts b/packages/web/vite/alias.ts
@@ -0,0 +1,11 @@
+import path from 'path';
+
+const r = (...args: string[]) => path.resolve(...args);
+const cwd = process.cwd();
+
+export const alias = {
+  '@any-reader/core': r(cwd, '../../packages/core/src'),
+  '@any-reader/shared': r(cwd, '../../packages/shared/src'),
+  '@any-reader/rule-utils': r(cwd, '../../packages/rule-utils/src'),
+  '@any-reader/epub': r(cwd, '../../packages/epub/src')
+};
diff --git a/packages/web/vite/plugins/electron.ts b/packages/web/vite/plugins/electron.ts
@@ -1,11 +1,7 @@
 import electron from 'vite-plugin-electron';
-import path from 'path';
-
-const r = (...args: string[]) => path.resolve(...args);
+import { alias } from '../alias';
 
 export default (isBuild: boolean) => {
-  const cwd = process.cwd();
-
   return electron({
     entry: 'electron/main.ts',
     vite: {
@@ -17,10 +13,7 @@ export default (isBuild: boolean) => {
         }
       },
       resolve: {
-        alias: {
-          '@any-reader/core': r(cwd, '../../packages/core/src'),
-          '@any-reader/shared': r(cwd, '../../packages/shared/src')
-        }
+        alias
       }
     }
   });