feat: 优化ace相关

src/components/AceEditor/src/AceEditor.tsx

@@ -186,7 +186,7 @@ export default defineComponent({
   },
   render() {
     return (
-      <div class="!h-full w-full overflow-hidden" ref="aceEditorElRef" { ...this.$attrs }></div>
+      <div class="!h-full w-full" ref="aceEditorElRef" { ...this.$attrs }></div>
     );
   }
 });

src/locales/lang/en/routes/demo.ts

@@ -53,6 +53,8 @@ export default {
     markdown: 'Markdown editor',
     aceEditor: 'Ace editor',
     aceEditorBasic: 'Ace Basic',
+    useAceEditor: 'Use AceEditor',
+    useAceEditorReactive: 'Use AceEditor Reactive',
 
     tinymce: 'Rich text',
     tinymceBasic: 'Basic',

src/locales/lang/zh-CN/routes/demo.ts

@@ -52,6 +52,8 @@ export default {
     markdown: 'markdown编辑器',
     aceEditor: 'Ace编辑器',
     aceEditorBasic: 'ACE基础使用',
+    useAceEditor: 'UseAceEditor',
+    useAceEditorReactive: 'UseAceEditor响应',
 
     tinymce: '富文本',
     tinymceBasic: '基础使用',

src/router/routes/demo/comp.ts

@@ -352,6 +352,22 @@ const comp: AppRouteModule = {
                 title: t('routes.demo.editor.aceEditorBasic'),
               },
             },
+            {
+              path: 'useAceEditor',
+              name: 'useAceEditorDemo',
+              component: () => import('/@/views/demo/editor/ace/useAceEditor.vue'),
+              meta: {
+                title: t('routes.demo.editor.useAceEditor'),
+              },
+            },
+            {
+              path: 'useAceEditorReactive',
+              name: 'useAceEditorReactiveDemo',
+              component: () => import('/@/views/demo/editor/ace/useAceEditorReactive.vue'),
+              meta: {
+                title: t('routes.demo.editor.useAceEditorReactive'),
+              },
+            },
           ],
         },
 

src/views/demo/editor/ace/index.vue

@@ -1,31 +1,40 @@
 <template>
-  <PageWrapper title="AceEditor组件示例">
+  <PageWrapper title="ACE基础使用"
-    <a-select v-model:value="states.lang" class="mb-2">
+               contentFullHeight
+               fixedHeight
+               contentBackground
+  >
+    <template #extra>
+      <a-space size="middle">
+        <a-select v-model:value="state.lang">
           <a-select-option v-for="(lang, index) of langs" :key="index" :value="lang"> {{ lang }} </a-select-option>
         </a-select>
-    <a-select v-model:value="states.theme" class="mb-2">
+        <a-select v-model:value="state.theme">
           <a-select-option v-for="(theme, index) of themes" :key="index" :value="theme"> {{ theme }} </a-select-option>
         </a-select>
-    <AceEditor v-model:value="states.content"
+      </a-space>
+    </template>
+    <AceEditor v-model:value="state.content"
                class="vue-ace-editor"
-               @register="registerAceEditor"
+               @register="register"
     />
   </PageWrapper>
 </template>
 <script setup lang="ts">
-  import { reactive, watch, ref, onMounted } from 'vue';
+  import { reactive, watch } from 'vue';
   import { AceEditor, useAceEditor } from '/@/components/AceEditor';
+  import { PageWrapper } from '/@/components/Page';
 
   const langs = ['json', 'javascript', 'html', 'yaml'];
-  const themes = ['github', 'chrome', 'monokai', 'dracula'];
+  const themes = ['chrome', 'github', 'monokai', 'dracula'];
-  const states = reactive({
+  const state = reactive({
-    lang: 'yaml',
+    lang: 'json',
-    theme: 'github',
+    theme: 'chrome',
     content: '',
   });
 
   const [
-    registerAceEditor,
+    register,
     {
       setProps,
       blur,
@@ -34,8 +43,8 @@
       selectAll
     },
   ] = useAceEditor({
-    lang: states.lang,
+    lang: state.lang,
-    theme: states.theme,
+    theme: state.theme,
     options: {
       useWorker: true,
       enableBasicAutocompletion: true,
@@ -45,9 +54,9 @@
   });
 
   watch(
-    () => states.lang,
+    () => state.lang,
     async lang => {
-      states.content = (
+      state.content = (
         await {
           json: import('../../../../../package.json?raw'),
           javascript: import('/@/components/AceEditor/src/ace-config.js?raw'),
@@ -55,15 +64,19 @@
           yaml: import('../../../../../pnpm-lock.yaml?raw'),
         }[lang]
       || {}).default!;
+      setProps({ lang });
     },
     { immediate: true }
   );
+
+  watch(() => state.theme, theme => setProps({ theme }));
+
 </script>
 <style lang="less" scoped>
 
-/*.vue-ace-editor {
+.vue-ace-editor {
-  font-size: 16px;
+  font-size: 12px;
-}*/
+}
 
 </style>
 

src/views/demo/editor/ace/useAceEditor.vue

@@ -0,0 +1,82 @@
+<template>
+  <PageWrapper title="useAceEditor组件示例"
+               contentFullHeight
+               fixedHeight
+               contentBackground
+  >
+    <template #extra>
+      <a-space size="middle">
+        <a-select v-model:value="state.lang">
+          <a-select-option v-for="(lang, index) of langs" :key="index" :value="lang"> {{ lang }} </a-select-option>
+        </a-select>
+        <a-select v-model:value="state.theme">
+          <a-select-option v-for="(theme, index) of themes" :key="index" :value="theme"> {{ theme }} </a-select-option>
+        </a-select>
+      </a-space>
+    </template>
+    <AceEditor v-model:value="state.content"
+               class="vue-ace-editor"
+               @register="register"
+    />
+  </PageWrapper>
+</template>
+<script setup lang="ts">
+  import { reactive, watch } from 'vue';
+  import { AceEditor, useAceEditor } from '/@/components/AceEditor';
+  import { PageWrapper } from '/@/components/Page';
+
+  const langs = ['json', 'javascript', 'html', 'yaml'];
+  const themes = ['chrome', 'github', 'monokai', 'dracula'];
+  const state = reactive({
+    lang: 'json',
+    theme: 'chrome',
+    content: '',
+  });
+
+  const [
+    register,
+    {
+      setProps,
+      blur,
+      focus,
+      getAceInstance,
+      selectAll
+    },
+  ] = useAceEditor({
+    lang: state.lang,
+    theme: state.theme,
+    options: {
+      useWorker: true,
+      enableBasicAutocompletion: true,
+      enableSnippets: true,
+      enableLiveAutocompletion: true,
+    }
+  });
+
+  watch(
+    () => state.lang,
+    async lang => {
+      state.content = (
+        await {
+          json: import('../../../../../package.json?raw'),
+          javascript: import('/@/components/AceEditor/src/ace-config.js?raw'),
+          html: import('../../../../../index.html?raw'),
+          yaml: import('../../../../../pnpm-lock.yaml?raw'),
+        }[lang]
+      || {}).default!;
+      setProps({ lang });
+    },
+    { immediate: true }
+  );
+
+  watch(() => state.theme, theme => setProps({ theme }));
+
+</script>
+<style lang="less" scoped>
+
+.vue-ace-editor {
+  font-size: 12px;
+}
+
+</style>
+

src/views/demo/editor/ace/useAceEditorReactive.vue

@@ -0,0 +1,82 @@
+<template>
+  <PageWrapper title="useAceEditor响应式组件示例"
+               contentFullHeight
+               fixedHeight
+               contentBackground
+  >
+    <template #extra>
+      <a-space size="middle">
+        <a-select v-model:value="state.lang">
+          <a-select-option v-for="(lang, index) of langs" :key="index" :value="lang"> {{ lang }} </a-select-option>
+        </a-select>
+        <a-select v-model:value="state.theme">
+          <a-select-option v-for="(theme, index) of themes" :key="index" :value="theme"> {{ theme }} </a-select-option>
+        </a-select>
+      </a-space>
+    </template>
+    <AceEditor v-model:value="state.content"
+               class="vue-ace-editor"
+               @register="register"
+    />
+  </PageWrapper>
+</template>
+<script setup lang="ts">
+  import { reactive, watch } from 'vue';
+  import { AceEditor, useAceEditor } from '/@/components/AceEditor';
+  import { PageWrapper } from '/@/components/Page';
+
+  const langs = ['json', 'javascript', 'html', 'yaml'];
+  const themes = ['chrome', 'github', 'monokai', 'dracula'];
+  const state = reactive({
+    lang: 'json',
+    theme: 'chrome',
+    content: '',
+  });
+
+  const [
+    register,
+    {
+      setProps,
+      blur,
+      focus,
+      getAceInstance,
+      selectAll
+    },
+  ] = useAceEditor({
+    lang: state.lang,
+    theme: state.theme,
+    options: {
+      useWorker: true,
+      enableBasicAutocompletion: true,
+      enableSnippets: true,
+      enableLiveAutocompletion: true,
+    }
+  });
+
+  watch(
+    () => state.lang,
+    async lang => {
+      state.content = (
+        await {
+          json: import('../../../../../package.json?raw'),
+          javascript: import('/@/components/AceEditor/src/ace-config.js?raw'),
+          html: import('../../../../../index.html?raw'),
+          yaml: import('../../../../../pnpm-lock.yaml?raw'),
+        }[lang]
+      || {}).default!;
+      setProps({ lang });
+    },
+    { immediate: true }
+  );
+
+  watch(() => state.theme, theme => setProps({ theme }));
+
+</script>
+<style lang="less" scoped>
+
+.vue-ace-editor {
+  font-size: 12px;
+}
+
+</style>
+