diff --git a/docs/index.md b/docs/index.md
index c862ec8d..1a11398f 100644
--- 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/core/src/analyzer/RuleManager.ts b/packages/core/src/analyzer/RuleManager.ts
index 6ce95674..8e92dc7f 100644
--- a/packages/core/src/analyzer/RuleManager.ts
+++ b/packages/core/src/analyzer/RuleManager.ts
@@ -28,13 +28,13 @@ export class RuleManager implements IParser {
       searchPage: 1
     });
     this.analyzerManager = analyzerManager;
-    this.analyzerManager.logLevel >= LogLevel.Debug && this.analyzerManager.logger.debug(`[init] rule:${rule.name}`);
+    this.analyzerManager.logLevel >= LogLevel.Debug && this.analyzerManager.logger.debug(`[初始化规则] ${rule.id} ${rule.name}`);
   }
 
   private async request(params: any) {
-    this.analyzerManager.logLevel >= LogLevel.Debug && this.analyzerManager.logger.debug(`[request] params:${JSON.stringify(params || {})}`);
+    this.analyzerManager.logLevel >= LogLevel.Debug && this.analyzerManager.logger.debug(`[网络请求] -> ${JSON.stringify(params || {})}`);
     const res = await fetch(params);
-    this.analyzerManager.logLevel >= LogLevel.Debug && this.analyzerManager.logger.debug(`[request] query:${String(res.body)}`);
+    this.analyzerManager.logLevel >= LogLevel.Debug && this.analyzerManager.logger.debug(`[网络请求] <- ${String(res.body)}`);
     return res;
   }
 
@@ -45,7 +45,7 @@ export class RuleManager implements IParser {
 
   async search(query: string, page = 1, pageSize = 20) {
     // const hasNextUrlRule = this.rule.searchNextUrl !== null && this.rule.searchNextUrl.length > 0;
-    this.analyzerManager.logLevel >= LogLevel.Debug && this.analyzerManager.logger.debug(`[search] query:${query}`);
+    this.analyzerManager.logLevel >= LogLevel.Debug && this.analyzerManager.logger.debug(`[搜索] ${query}`);
     let searchRule = '';
     let url = this.rule.searchUrl;
 
@@ -82,11 +82,8 @@ export class RuleManager implements IParser {
       searchKey: query
     });
 
-    this.analyzerManager.logLevel >= LogLevel.Debug && this.analyzerManager.logger.debug(`[search] searchRule:${searchRule}`);
     if (this.rule.searchUrl !== 'null') {
       const res = await this.request(parseRequest(await this.parseJsUrl(searchRule), query, '', this.rule, page, pageSize));
-      this.analyzerManager.logLevel >= LogLevel.Debug && this.analyzerManager.logger.debug(`[search] params:${JSON.stringify(res.params || {})}`);
-      this.analyzerManager.logLevel >= LogLevel.Debug && this.analyzerManager.logger.debug(`[search] body:${String(res.body)}`);
       body = res.body;
       searchUrl = res.params.url as string;
     }
@@ -95,9 +92,7 @@ export class RuleManager implements IParser {
     //   next = await this.analyzerManager.getString(this.rule.searchNextUrl, body);
     // }
 
-    this.analyzerManager.logLevel >= LogLevel.Debug && this.analyzerManager.logger.debug(`[search] rule.searchList:${this.rule.searchList}`);
     const list = await this.getList(body, this.rule.searchList);
-    this.analyzerManager.logLevel >= LogLevel.Debug && this.analyzerManager.logger.debug(`[search] list:${JSON.stringify(list || [])}}`);
     const result = [];
 
     for (const item of list) {
diff --git a/packages/shared/src/app.ts b/packages/shared/src/app.ts
index 07b7b78d..eb4267da 100644
--- a/packages/shared/src/app.ts
+++ b/packages/shared/src/app.ts
@@ -79,12 +79,12 @@ async function runApp(app: App, register: any) {
       const callName = [route.method.toLowerCase(), route.route].join('@');
       register(callName, async (...arg: any) => {
         const instance: any = new Controller(app);
-        app.analyzerManager.logLevel >= LogLevel.Debug && app.analyzerManager.logger.debug(`[api] ${callName} ${JSON.stringify(arg)}`);
+        app.analyzerManager.logLevel >= LogLevel.Debug && app.analyzerManager.logger.debug(`[call] ${callName} ${JSON.stringify(arg)}`);
 
         return await instance[route.methodName](...arg)
           .then((res: any) => result(res))
           .catch((err: Error) => {
-            app.analyzerManager.logLevel >= LogLevel.Error && err.message && app.analyzerManager.logger.error(err.message);
+            app.analyzerManager.logLevel >= LogLevel.Error && err.message && app.analyzerManager.logger.error(`[错误] ${err.message}`);
             let message = err?.message || 'error';
             if (err instanceof FetchException) message = '网络请求异常';
             else if (err instanceof JsVmException) message = '执行脚本异常';
diff --git a/packages/web/src/pages/pc/category/index.vue b/packages/web/src/pages/pc/category/index.vue
index 9e9a3786..1003d572 100644
--- 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
index 88f72d07..23d3b22e 100644
--- 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/src/utils/postMessage.electron.ts b/packages/web/src/utils/postMessage.electron.ts
index c115e54e..3c133177 100644
--- a/packages/web/src/utils/postMessage.electron.ts
+++ b/packages/web/src/utils/postMessage.electron.ts
@@ -6,3 +6,7 @@ export const pm = new EasyPostMessage(Adapter);
 pm.on('logger:debug', (message) => {
   console.debug(message.data);
 });
+
+pm.on('logger:error', (message) => {
+  console.error(message.data);
+});
diff --git a/packages/web/src/utils/request.ts b/packages/web/src/utils/request.ts
index 8de2c9ed..457afd01 100644
--- a/packages/web/src/utils/request.ts
+++ b/packages/web/src/utils/request.ts
@@ -7,7 +7,6 @@ export async function request(config: any): Promise<{
   data: any;
   msg?: string;
 }> {
-  console.log('[request]', config);
   const method = config.method?.toLowerCase() ?? 'get';
   if (PLATFORM === 'browser') {
     // web
diff --git a/packages/web/vite.config.mts b/packages/web/vite.config.mts
index cf344a0f..d5488b08 100644
--- 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
new file mode 100644
index 00000000..becff84f
--- /dev/null
+++ 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
index 84dfe4de..26c1b7a6 100644
--- 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
       }
     }
   });