feat: add text editor (#69)

apps/fb-web/src/locales/langs/en-US/page.json

@@ -22,7 +22,8 @@
   "editors": {
     "title": "Editors",
     "markdown": "Markdown",
-    "flow": "Flow"
+    "flow": "Flow",
+    "text": "Text"
   },
   "tools": {
     "title": "Tool",

apps/fb-web/src/locales/langs/zh-CN/page.json

@@ -26,7 +26,8 @@
   "editors": {
     "title": "编辑器",
     "markdown": "Markdown",
-    "flow": "流程图"
+    "flow": "流程图",
+    "text": "文本"
   },
   "tools": {
     "title": "工具",

apps/fb-web/src/router/routes/modules/editors.ts

@@ -32,6 +32,15 @@ const routes: RouteRecordRaw[] = [
           title: $t('page.editors.flow'),
         },
       },
+      {
+        name: 'Text',
+        path: '/editors/text',
+        component: () => import('#/views/editors/text/index.vue'),
+        meta: {
+          icon: 'mdi:text-box-outline',
+          title: $t('page.editors.text'),
+        },
+      },
     ],
   },
 ];

apps/fb-web/src/views/editors/text/index.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { CopyOutlined } from '@ant-design/icons-vue';
+import {
+  Button,
+  Card,
+  Col,
+  message,
+  Row,
+  Textarea,
+  Tooltip,
+} from 'ant-design-vue';
+
+import FileOperate from '#/components/file/FileOperate.vue';
+
+const text = ref('');
+function copy() {
+  const input = document.createElement('textarea');
+  input.style.position = 'fixed';
+  input.style.opacity = String(0);
+  input.value = text.value;
+  document.body.append(input);
+  input.select();
+  document.execCommand('Copy');
+  input.remove();
+  message.success('copy success');
+}
+
+function setContent(content: string) {
+  text.value = content;
+}
+</script>
+<template>
+  <Page
+    description="A general-purpose editor that can edit all text except for specific zones."
+    title="Text Editor"
+  >
+    <Row :gutter="16">
+      <Col :span="2">
+        <FileOperate :content="text" @send-content="setContent" />
+      </Col>
+      <Col :span="22">
+        <div class="py-4">
+          <Tooltip placement="top">
+            <template #title> Copy </template>
+            <Button @click="copy">
+              <template #icon>
+                <CopyOutlined />
+              </template>
+            </Button>
+          </Tooltip>
+        </div>
+        <Card :body-style="{ height: '500px' }" :bordered="false">
+          <Textarea
+            v-model:value="text"
+            :maxlength="20000"
+            :rows="17"
+            placeholder="a simple text editor"
+            show-count
+          />
+        </Card>
+      </Col>
+    </Row>
+  </Page>
+</template>