feat: 添加codeEditor组件 (DevCloudFE#1587)

Author: huaweidevcloud

packages/devui-vue/devui/code-editor/index.ts

@@ -0,0 +1,14 @@
+import type { App } from 'vue';
+import CodeEditor from './src/code-editor';
+export * from './src/code-editor-types';
+
+export { CodeEditor };
+
+export default {
+  title: 'Code Editor 代码编辑器',
+  category: '数据录入',
+  status: '100%',
+  install(app: App): void {
+    app.component(CodeEditor.name, CodeEditor);
+  },
+};

packages/devui-vue/devui/code-editor/src/code-editor-types.ts

@@ -0,0 +1,89 @@
+import { ExtractPropTypes, PropType, Ref } from "vue";
+
+export type Mode = 'normal' | 'diff' | 'review';
+export type Theme = 'light' | 'dark';
+
+export interface Decoration {
+  lineNumber: number;
+  icon?: string;
+  customClasses?: string;
+  glyphClassName?: string;
+}
+export interface Comment {
+  lineNumber: number;
+  isExpanded: boolean;
+  domNode?: HTMLElement;
+  heightInPx?: number;
+  allowEditorOverflow?: boolean;
+  offserLeft?: number;
+}
+
+export const codeEditorProps = {
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  mode: {
+    type: String as PropType<Mode>,
+    default: 'normal',
+  },
+  originalText: {
+    type: String,
+    default: ''
+  },
+  theme: {
+    type: String as PropType<Theme>,
+    default: 'light'
+  },
+  autoHeight: {
+    type: Boolean,
+    default: false
+  },
+  refreshAll: {
+    type: Boolean,
+    default: false
+  },
+  offsetLeft: {
+    type: Number
+  },
+  addCommentIcon: {
+    type: String,
+    default: ''
+  },
+  expandCommentIcon: {
+    type: String,
+    default: ''
+  },
+  options: {
+    type: Object,
+    default: () => ({})
+  },
+  mouseTargetTypes: {
+    type: Array as PropType<number[]>,
+    default: () => [2, 4]
+  },
+  editorDecorations: {
+    type: Array as PropType<Decoration[]>,
+    default: () => []
+  },
+  comments: {
+    type: Array as PropType<Comment[]>,
+    default: () => []
+  }
+}
+
+export type CodeEditorProps = ExtractPropTypes<typeof codeEditorProps>;
+
+export interface UseCodeEditor {
+  editorEl: Ref;
+}
+
+export interface PositionInfo {
+  top?: number;
+  height?: number;
+}
+
+export interface LayoutInfo extends PositionInfo {
+  minimapWidth?: number;
+  offsetLeft?: number;
+}

packages/devui-vue/devui/code-editor/src/code-editor.scss

@@ -0,0 +1,10 @@
+.dp-code-editor {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  div.icon-pointer {
+    cursor: pointer;
+  }
+}

packages/devui-vue/devui/code-editor/src/code-editor.tsx

@@ -0,0 +1,16 @@
+import { defineComponent } from 'vue';
+import type { SetupContext } from 'vue';
+import { codeEditorProps, CodeEditorProps } from './code-editor-types';
+import { useCodeEditor } from './composables/use-code-editor';
+import './code-editor.scss'
+
+export default defineComponent({
+    name: 'DpCodeEditor',
+    props: codeEditorProps,
+    emits: ['update: modelValue', 'afterEditorInit', 'click'],
+    setup(props: codeEditorProps, ctx: SetupContext) {
+        const { editorEl } = useCodeEditor(props, ctx);
+
+        return () => <div ref={editorEl} class="devui-code-editor"></div>
+    }
+})