perf(core): 优化 Monaco 组件性能并添加卸载前清理逻辑

- 更新版本号至 0.0.7.1
- 引入 onBeforeUnmount 钩子，在组件卸载前销毁 Monaco 编辑器实例
- 优化部分代码格式，提高可读性

Author: lisentowind

apps/docs/docusaurus.config.ts

@@ -1,154 +1,155 @@
-import type * as Preset from '@docusaurus/preset-classic';
-import type { Config } from '@docusaurus/types';
-import { themes as prismThemes } from 'prism-react-renderer';
+import type * as Preset from "@docusaurus/preset-classic";
+import type { Config } from "@docusaurus/types";
+import { themes as prismThemes } from "prism-react-renderer";
 
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
 const config: Config = {
-  title: 'Vue Shiki Monaco Editor',
-  tagline: '基于 Monaco Editor + Shiki 的现代化 Vue 3 代码编辑器组件',
-  favicon: 'img/favicon.ico',
+  title: "Vue Shiki Monaco Editor",
+  tagline: "基于 Monaco Editor + Shiki 的现代化 Vue 3 代码编辑器组件",
+  favicon: "img/favicon.ico",
 
   // Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future
   future: {
     v4: true, // Improve compatibility with the upcoming Docusaurus v4
   },
 
   // Set the production url of your site here
-  url: 'https://lisentowind.github.io',
+  url: "https://lisentowind.github.io",
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: '/vue-shiki-monaco/',
+  baseUrl: "/vue-shiki-monaco/",
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
-  organizationName: 'lisentowind', // Usually your GitHub org/user name.
-  projectName: 'vue-shiki-monaco', // Usually your repo name.
+  organizationName: "lisentowind", // Usually your GitHub org/user name.
+  projectName: "vue-shiki-monaco", // Usually your repo name.
 
-  onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
+  onBrokenLinks: "throw",
+  onBrokenMarkdownLinks: "warn",
 
   // Even if you don't use internationalization, you can use this field to set
   // useful metadata like html lang. For example, if your site is Chinese, you
   // may want to replace "en" with "zh-Hans".
   i18n: {
-    defaultLocale: 'zh-Hans',
-    locales: ['zh-Hans', 'en'],
+    defaultLocale: "zh-Hans",
+    locales: ["zh-Hans", "en"],
     localeConfigs: {
-      'zh-Hans': {
-        label: '简体中文',
-        direction: 'ltr',
-        htmlLang: 'zh-CN',
+      "zh-Hans": {
+        label: "简体中文",
+        direction: "ltr",
+        htmlLang: "zh-CN",
       },
-      'en': {
-        label: 'English',
-        direction: 'ltr',
-        htmlLang: 'en-US',
+      en: {
+        label: "English",
+        direction: "ltr",
+        htmlLang: "en-US",
       },
     },
   },
 
   presets: [
     [
-      'classic',
+      "classic",
       {
         docs: {
-          sidebarPath: './sidebars.ts',
-          editUrl: 'https://github.com/lisentowind/vue-shiki-monaco/edit/main/apps/docs/',
-          routeBasePath: 'docs',
+          sidebarPath: "./sidebars.ts",
+          editUrl:
+            "https://github.com/lisentowind/vue-shiki-monaco/edit/main/apps/docs/",
+          routeBasePath: "docs",
         },
         blog: {
           showReadingTime: true,
           feedOptions: {
-            type: ['rss', 'atom'],
+            type: ["rss", "atom"],
             xslt: true,
           },
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           editUrl:
-            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+            "https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/",
           // Useful options to enforce blogging best practices
-          onInlineTags: 'warn',
-          onInlineAuthors: 'warn',
-          onUntruncatedBlogPosts: 'warn',
+          onInlineTags: "warn",
+          onInlineAuthors: "warn",
+          onUntruncatedBlogPosts: "warn",
         },
         theme: {
-          customCss: './src/css/custom.css',
+          customCss: "./src/css/custom.css",
         },
       } satisfies Preset.Options,
     ],
   ],
 
   themeConfig: {
     // Replace with your project's social card
-    image: 'img/docusaurus-social-card.jpg',
+    image: "img/docusaurus-social-card.jpg",
     navbar: {
-      title: 'Vue Shiki Monaco Editor ',
+      title: "Vue Shiki Monaco Editor ",
       logo: {
-        alt: 'Vue Shiki Monaco Editor  Logo',
-        src: 'img/logo.svg',
+        alt: "Vue Shiki Monaco Editor  Logo",
+        src: "img/logo.png",
       },
       items: [
         {
-          type: 'docSidebar',
-          sidebarId: 'tutorialSidebar',
-          position: 'left',
-          label: '文档',
+          type: "docSidebar",
+          sidebarId: "tutorialSidebar",
+          position: "left",
+          label: "文档",
         },
         {
-          type: 'localeDropdown',
-          position: 'right',
+          type: "localeDropdown",
+          position: "right",
         },
         {
-          href: 'https://github.com/lisentowind/vue-shiki-monaco',
-          label: 'GitHub',
-          position: 'right',
+          href: "https://github.com/lisentowind/vue-shiki-monaco",
+          label: "GitHub",
+          position: "right",
         },
       ],
     },
     footer: {
-      style: 'dark',
+      style: "dark",
       links: [
         {
-          title: '文档',
+          title: "文档",
           items: [
             {
-              label: '快速开始',
-              to: '/docs/getting-started',
+              label: "快速开始",
+              to: "/docs/getting-started",
             },
             {
-              label: 'API 参考',
-              to: '/docs/api',
+              label: "API 参考",
+              to: "/docs/api",
             },
             {
-              label: '使用示例',
-              to: '/docs/examples',
+              label: "使用示例",
+              to: "/docs/examples",
             },
           ],
         },
         {
-          title: '社区',
+          title: "社区",
           items: [
             {
-              label: 'GitHub Issues',
-              href: 'https://github.com/lisentowind/vue-shiki-monaco/issues',
+              label: "GitHub Issues",
+              href: "https://github.com/lisentowind/vue-shiki-monaco/issues",
             },
             {
-              label: 'GitHub Discussions',
-              href: 'https://github.com/lisentowind/vue-shiki-monaco/discussions',
+              label: "GitHub Discussions",
+              href: "https://github.com/lisentowind/vue-shiki-monaco/discussions",
             },
           ],
         },
         {
-          title: '更多',
+          title: "更多",
           items: [
             {
-              label: 'GitHub',
-              href: 'https://github.com/lisentowind/vue-shiki-monaco',
+              label: "GitHub",
+              href: "https://github.com/lisentowind/vue-shiki-monaco",
             },
             {
-              label: 'NPM',
-              href: 'https://www.npmjs.com/package/vue-shiki-monaco',
+              label: "NPM",
+              href: "https://www.npmjs.com/package/vue-shiki-monaco",
             },
           ],
         },

apps/docs/static/img/favicon.ico

@@ -1,17 +1,16 @@
-import type { State } from '@storybook/manager-api';
-import { addons } from '@storybook/manager-api';
-import { create } from '@storybook/theming';
+import type { State } from "@storybook/manager-api";
+import { addons } from "@storybook/manager-api";
+import { create } from "@storybook/theming";
 
 const theme = create({
-  base: 'light',
-  brandTitle: 'vue-shiki-monaco',
-  brandImage: '/logo.svg',
+  base: "light",
+  brandTitle: "vue-shiki-monaco",
+  brandImage: "/logo.png",
 });
 
 const darkTheme = create({
-  base: 'dark',
-  brandTitle: 'vue-shiki-monaco',
-  brandImage: '/logo.svg',
+  base: "dark",
+  brandTitle: "vue-shiki-monaco",
 });
 
 addons.setConfig({
@@ -25,15 +24,15 @@ addons.setConfig({
   // 右侧面板宽度（像素）
   rightPanelWidth: 520,
   // 控制面板位置：'bottom' 或 'right'
-  panelPosition: 'right',
+  panelPosition: "right",
   // 是否启用快捷键
   enableShortcuts: false,
   // 是否显示顶部工具栏
   showToolbar: true,
   // 初始选中的面板（undefined 表示不强制选中）
   selectedPanel: undefined,
   // 初始激活的界面元素：'sidebar' 或 'panel'
-  initialActive: 'sidebar',
+  initialActive: "sidebar",
 
   // 自定义布局逻辑
   layoutCustomisations: {
@@ -42,13 +41,13 @@ addons.setConfig({
     // defaultValue: 默认显示状态
     showSidebar(state: State, defaultValue: boolean) {
       // 当故事ID为'landing'时隐藏侧边栏，其他情况使用默认设置
-      return state.storyId === 'landing' ? false : defaultValue;
+      return state.storyId === "landing" ? false : defaultValue;
     },
 
     // 根据视图模式动态显示/隐藏工具栏
     showToolbar(state: State, defaultValue: boolean) {
       // 当视图模式为'docs'时隐藏工具栏，其他情况使用默认设置
-      return state.viewMode === 'docs' ? false : defaultValue;
+      return state.viewMode === "docs" ? false : defaultValue;
     },
   },
 
@@ -57,7 +56,7 @@ addons.setConfig({
     // 是否显示根目录节点
     showRoots: false,
     // 默认折叠的根目录（数组中的名称对应故事分类）
-    collapsedRoots: ['other'],
+    collapsedRoots: ["other"],
   },
 
   // 顶部工具栏配置

apps/docs/static/img/logo.png

@@ -1,6 +1,6 @@
 {
   "name": "vue-shiki-monaco",
-  "version": "0.0.7",
+  "version": "0.0.7.1",
   "description": "一个封shiki和monaco-editor的Vue组件",
   "homepage": "https://lisentowind.github.io/vue-shiki-monaco/",
   "repository": {

packages/core/.storybook/manager.ts

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted, watch } from "vue";
+import { ref, onMounted, onUnmounted, watch, onBeforeUnmount } from "vue";
 import type { EditInstance } from "../../hooks/useMonacoEdit";
 import { useMonacoEdit } from "../../hooks/useMonacoEdit";
 import type { BundledLanguage, BundledTheme } from "shiki";
@@ -30,13 +30,13 @@ interface Props {
     enabled?: boolean;
     items?: string[] | "minimal" | "basic" | "full";
     customItems?: ContextMenuItem[];
-    variant?: 'classic' | 'glass';
+    variant?: "classic" | "glass";
   };
   minimapContextMenu?: {
     enabled?: boolean;
     items?: string[] | "minimal" | "basic" | "full";
     customItems?: ContextMenuItem[];
-    variant?: 'classic' | 'glass';
+    variant?: "classic" | "glass";
   };
 }
 
@@ -297,7 +297,9 @@ const setupContextMenu = () => {
       // 尝试预先请求剪贴板权限（可选）
       try {
         if ("permissions" in navigator) {
-          await (navigator as any).permissions.query({ name: "clipboard-read" });
+          await (navigator as any).permissions.query({
+            name: "clipboard-read",
+          });
         }
       } catch (error) {
         // 忽略权限检查错误
@@ -312,7 +314,9 @@ const setupContextMenu = () => {
     // 获取minimap菜单项配置
     let minimapEnabledItems: string[] = [];
     if (typeof props.minimapContextMenu?.items === "string") {
-      minimapEnabledItems = MINIMAP_MENU_PRESETS[props.minimapContextMenu.items] as any;
+      minimapEnabledItems = MINIMAP_MENU_PRESETS[
+        props.minimapContextMenu.items
+      ] as any;
     } else if (Array.isArray(props.minimapContextMenu?.items)) {
       minimapEnabledItems = props.minimapContextMenu.items;
     }
@@ -354,6 +358,10 @@ const handleMinimapContextMenuItemClick = (item: ContextMenuItem) => {
   }
 };
 
+onBeforeUnmount(() => {
+  monacoEditHook?.destroy();
+});
+
 // 暴露方法给父组件
 defineExpose({
   getEditor: () => editorInstance,