From 5bd8c7ff60842f9d8b1d1f95c4069329e2625baf Mon Sep 17 00:00:00 2001
From: wangxiang <1827945911@qq.com>
Date: Tue, 27 Feb 2024 10:38:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96ace=E7=9B=B8=E5=85=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AceEditor/src/AceEditor.tsx    |  2 +-
 src/locales/lang/en/routes/demo.ts            |  2 +
 src/locales/lang/zh-CN/routes/demo.ts         |  2 +
 src/router/routes/demo/comp.ts                | 16 ++++
 src/views/demo/editor/ace/index.vue           | 57 ++++++++-----
 src/views/demo/editor/ace/useAceEditor.vue    | 82 +++++++++++++++++++
 .../demo/editor/ace/useAceEditorReactive.vue  | 82 +++++++++++++++++++
 7 files changed, 220 insertions(+), 23 deletions(-)
 create mode 100644 src/views/demo/editor/ace/useAceEditor.vue
 create mode 100644 src/views/demo/editor/ace/useAceEditorReactive.vue

diff --git a/src/components/AceEditor/src/AceEditor.tsx b/src/components/AceEditor/src/AceEditor.tsx
index 525bd8d..9323687 100644
--- a/src/components/AceEditor/src/AceEditor.tsx
+++ b/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>
     );
   }
 });
diff --git a/src/locales/lang/en/routes/demo.ts b/src/locales/lang/en/routes/demo.ts
index e4017e6..b66e786 100644
--- a/src/locales/lang/en/routes/demo.ts
+++ b/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',
diff --git a/src/locales/lang/zh-CN/routes/demo.ts b/src/locales/lang/zh-CN/routes/demo.ts
index 949b625..429ba57 100644
--- a/src/locales/lang/zh-CN/routes/demo.ts
+++ b/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: '基础使用',
diff --git a/src/router/routes/demo/comp.ts b/src/router/routes/demo/comp.ts
index 565bc14..9aa36bb 100644
--- a/src/router/routes/demo/comp.ts
+++ b/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'),
+              },
+            },
           ],
         },
 
diff --git a/src/views/demo/editor/ace/index.vue b/src/views/demo/editor/ace/index.vue
index 17a84a8..32aa921 100644
--- a/src/views/demo/editor/ace/index.vue
+++ b/src/views/demo/editor/ace/index.vue
@@ -1,31 +1,40 @@
 <template>
-  <PageWrapper title="AceEditor组件示例">
-    <a-select v-model:value="states.lang" class="mb-2">
-      <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-option v-for="(theme, index) of themes" :key="index" :value="theme"> {{ theme }} </a-select-option>
-    </a-select>
-    <AceEditor v-model:value="states.content"
+  <PageWrapper title="ACE基础使用"
+               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="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 states = reactive({
-    lang: 'yaml',
-    theme: 'github',
+  const themes = ['chrome', 'github', 'monokai', 'dracula'];
+  const state = reactive({
+    lang: 'json',
+    theme: 'chrome',
     content: '',
   });
 
   const [
-    registerAceEditor,
+    register,
     {
       setProps,
       blur,
@@ -34,8 +43,8 @@
       selectAll
     },
   ] = useAceEditor({
-    lang: states.lang,
-    theme: states.theme,
+    lang: state.lang,
+    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 {
-  font-size: 16px;
-}*/
+.vue-ace-editor {
+  font-size: 12px;
+}
 
 </style>
 
diff --git a/src/views/demo/editor/ace/useAceEditor.vue b/src/views/demo/editor/ace/useAceEditor.vue
new file mode 100644
index 0000000..be50d6b
--- /dev/null
+++ b/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>
+
diff --git a/src/views/demo/editor/ace/useAceEditorReactive.vue b/src/views/demo/editor/ace/useAceEditorReactive.vue
new file mode 100644
index 0000000..d3dbeed
--- /dev/null
+++ b/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>
+