@jetlinks-web/components 1.0.4 → 2.0.0

package/src/MonacoEditor/Monaco.vue

@@ -0,0 +1,242 @@
+<!-- 代码编辑器 -->
+<template>
+  <div ref="dom" class="j-monaco-editor"></div>
+</template>
+
+<script setup>
+import {
+  ref,
+  onMounted,
+  watch,
+  onUnmounted,
+  toRaw,
+  nextTick
+} from 'vue';
+import * as monaco from 'monaco-editor';
+import { omit } from 'lodash-es';
+
+const props = defineProps({
+  modelValue: [String, Number],
+  theme: {type: String, default: 'vs-dark'},
+  language: {type: String, default: 'json'},
+  codeTips: {type: Array, default: () => []},
+  init: {type: Function, default: undefined},
+  registrationTips: {type: Object, default: () => ({})},
+  registrationTypescript: {type: Object, default: () => ({})},
+  blurFormat: {type: Boolean, default: true},
+  readOnly: {type: Boolean, default: false},
+  options: {type: Object, default: () => ({})},
+});
+
+const emit = defineEmits([
+  'update:modelValue',
+  'blur',
+  'focus',
+  'change',
+  'errorChange',
+]);
+
+const dom = ref();
+
+const instance = ref();
+
+const monacoProviderRef = ref();
+const monacoTypescriptProviderRef = ref();
+
+// codeTipItem.dispose() // 销毁自定义提示
+
+const handleSuggestions = (suggestions, range) => {
+  return Array.isArray(suggestions)
+      ? suggestions.map((item) => ({...item, range}))
+      : [];
+};
+
+const disposeRegister = () => {
+  monacoProviderRef.value?.dispose();
+  monacoProviderRef.value = null;
+};
+/**
+ * 代码提示注册
+ */
+const registerCompletionItemProvider = () => {
+  disposeRegister();
+  if (monaco.languages && props.registrationTips?.suggestions) {
+    const {name, suggestions} = props.registrationTips;
+    monacoProviderRef.value =
+        monaco.languages.registerCompletionItemProvider(name || 'json', {
+          provideCompletionItems: function (model, position) {
+            const word = model.getWordUntilPosition(position); // 获取提示代码范围位置
+            const range = {
+              startLineNumber: position.lineNumber,
+              endLineNumber: position.lineNumber,
+              startColumn: word.startColumn,
+              endColumn: word.endColumn,
+            };
+
+            return {
+              suggestions: handleSuggestions(suggestions, range),
+            };
+          },
+        });
+  }
+};
+
+const disposeTypescript = () => {
+  monacoTypescriptProviderRef.value?.dispose();
+  monacoTypescriptProviderRef.value = null;
+};
+
+const registerTypescript = () => {
+  disposeTypescript();
+  if (monaco.languages && props.registrationTypescript?.typescript) {
+    const {name, typescript} = props.registrationTypescript;
+    monacoTypescriptProviderRef.value =
+        monaco.languages.typescript.javascriptDefaults.addExtraLib(
+            typescript,
+        );
+  }
+};
+
+/**
+ * 代码格式化
+ */
+const editorFormat = () => {
+  if (!instance.value) return;
+  toRaw(instance.value).getAction('editor.action.formatDocument')?.run();
+  if (props.hasOwnProperty('readOnly')) {
+    setTimeout(() => {
+      toRaw(instance.value).updateOptions({
+        readOnly: props.readOnly !== false,
+      });
+    }, 100);
+  }
+};
+
+monaco.editor.onDidChangeMarkers(([uri]) => {
+  const markers = monaco.editor.getModelMarkers({resource: uri});
+  emit('errorChange', markers);
+});
+
+onMounted(async () => {
+  const _model = monaco.editor.createModel(props.modelValue, props.language);
+
+  instance.value = monaco.editor.create(dom.value, {
+    model: _model,
+    tabSize: 2,
+    automaticLayout: true,
+    scrollBeyondLastLine: false,
+    theme: props.theme, // 主题色: vs(默认高亮), vs-dark(黑色), hc-black(高亮黑色)
+    formatOnPaste: true,
+    ...(omit(props.options, ['readOnly']) || {}),
+  });
+
+  instance.value.onDidChangeModelContent(() => {
+    //
+    const value = toRaw(instance.value).getValue();
+    nextTick(() => {
+      emit('update:modelValue', value);
+      emit('change', value);
+    });
+  });
+
+  instance.value.onDidBlurEditorText(() => {
+    emit('blur');
+    if (props.blurFormat) {
+      editorFormat();
+    }
+  });
+
+  instance.value.onDidFocusEditorText(() => {
+    emit('focus');
+  });
+
+  if (props.modelValue) {
+    setTimeout(() => {
+      editorFormat();
+    }, 200);
+  }
+
+  props.init?.(instance.value, monaco);
+});
+
+/**
+ * 光标位置插入内容
+ * @param {String} val
+ * @param position
+ */
+const insert = (val, position) => {
+  if (!instance.value) return;
+  const _position = position || toRaw(instance.value).getPosition();
+  const value = toRaw(instance.value).getValue();
+
+  if (position && position.lineNumber) {
+    toRaw(instance.value).setPosition(position);
+  }
+
+  toRaw(instance.value).executeEdits(value, [
+    {
+      range: new monaco.Range(
+          _position?.lineNumber,
+          _position?.column,
+          _position?.lineNumber,
+          _position?.column,
+      ),
+      text: val,
+    },
+  ]);
+};
+
+watch(
+    () => props.modelValue,
+    (val) => {
+      if (
+          !instance.value ||
+          (instance.value &&
+              props.modelValue === toRaw(instance.value).getValue())
+      )
+        return;
+      // setValue之前获取光标位置
+      const position = toRaw(instance.value).getPosition();
+
+      // setValue之后光标位置改变
+      toRaw(instance.value).setValue(val);
+      // 设置光标位置为setValue之前的位置
+      toRaw(instance.value).setPosition(position);
+
+      editorFormat();
+    },
+);
+
+watch(
+    () => JSON.stringify(props.registrationTips),
+    () => {
+      registerCompletionItemProvider();
+    },
+    {immediate: true},
+);
+
+watch(
+    () => JSON.stringify(props.registrationTypescript),
+    () => {
+      registerTypescript();
+    },
+    {immediate: true},
+);
+
+onUnmounted(() => {
+  disposeRegister();
+  disposeTypescript();
+  toRaw(instance.value).editor?.dispose?.();
+});
+
+defineExpose({
+  editorFormat,
+  insert,
+});
+</script>
+<style lang="less" scoped>
+.j-monaco-editor {
+  min-height: 50px;
+  height: 100%;
+}
+</style>

package/src/MonacoEditor/index.md

@@ -0,0 +1,26 @@
+---
+category: Components
+type: 数据录入
+title: MonacoEditor
+subtitle: 代码编辑器
+cols: 1
+cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
+---
+
+## API
+
+> 在 vite 项目中使用需要安装[`vite-plugin-monaco-editor`](https://github.com/vdesjs/vite-plugin-monaco-editor), 并在 vite.config.ts 中配置
+
+### MonacoEditor
+
+| 参数 | 说明                                                        | 类型 | 默认值 | 版本 |
+| --- |-----------------------------------------------------------| --- | --- | --- |
+| value(v-model) | 编辑器内容                                                     | string |  |  |
+| theme | 主题色: vs(默认高亮), vs-dark(黑色), hc-black(高亮黑色)                | string |  |  |
+| language | 编辑器支持的语言: json, css, html, typescript, javascript, vue    | string |  |  |
+| 参数           | 说明                                                        | 类型   | 默认值 | 版本 |
+| -------------- | --------------------------------------------------------- | ------ | ------ | ---- |
+| value(v-model) | 编辑器内容                                                     | string |        |      |
+| theme          | 主题色: vs(默认高亮), vs-dark(黑色), hc-black(高亮黑色)                | string |        |      |
+| language       | 编辑器支持的语言: json, css, html, typescript, javascript, vue    | string |        |      |
+

package/src/MonacoEditor/index.ts

@@ -0,0 +1,2 @@
+import Monaco from './Monaco.vue';
+export default Monaco;

package/src/PermissionButton/index.tsx

@@ -1,107 +1,110 @@
-import {h, defineComponent, computed} from "vue";
+import { h, defineComponent, computed } from "vue";
 import type { PropType, CSSProperties, ExtractPropTypes } from 'vue'
-import { Button, Tooltip, Popconfirm } from 'jetlinks-ui-components'
-import {PopconfirmProps, TooltipProps} from "ant-design-vue/es";
-import {omit} from "lodash-es";
-import {buttonProps} from "ant-design-vue/es/button/button";
-import { usePermission } from './hooks'
+import { Button, Tooltip, Popconfirm } from 'ant-design-vue'
+import { PopconfirmProps, TooltipProps } from "ant-design-vue/es";
+import { omit } from "lodash-es";
+import { buttonProps } from "ant-design-vue/es/button/button";
+import { usePermission } from '@jetlinks-web/hooks'
 
 type PermissionType = string | Array<string> | boolean
 
 const definedProps = {
-  tooltip: {
-    type: Object as PropType<TooltipProps>,
-  },
-  popConfirm: {
-    type: Object as PropType<PopconfirmProps>,
-  },
-  hasPermission: {
-    type: [String, Array, Boolean] as PropType<PermissionType>,
-    default: undefined
-  },
-  style: {
-    type: Object as PropType<CSSProperties>
-  },
-  noPermissionTitle: {
-    type: String
-  },
-  ...omit(buttonProps(), 'icon')
+    tooltip: {
+        type: Object as PropType<TooltipProps>,
+    },
+    popConfirm: {
+        type: Object as PropType<PopconfirmProps>,
+    },
+    hasPermission: {
+        type: [String, Array, Boolean] as PropType<PermissionType>,
+        default: undefined
+    },
+    style: {
+        type: Object as PropType<CSSProperties>
+    },
+    noPermissionTitle: {
+        type: String
+    },
+    ...omit(buttonProps(), 'icon')
 }
 
 type DefinedPropsType = Partial<ExtractPropTypes<typeof definedProps>>
 
 const PermissionButton = defineComponent({
-  name: 'PermissionButton',
-  // @ts-ignore
-  slots: ['button', 'icon'],
-  props: definedProps,
-  setup(props, { slots }) {
-
-    const { popConfirm, tooltip } = props
-    const { hasPerm } = usePermission(props.hasPermission as PermissionType)
-
-    const permission = computed(() => {
-      if (!props.hasPermission || props.hasPermission === true) {
-        return true
-      }
-      return hasPerm.value
-    })
-
-    const isPermission = computed(() => {
-      if ('hasPermission' in props && permission.value) {
-        return 'disabled' in props ? props.disabled : false
-      }
-      return true
-    })
-
-    const hasPopConfirm = computed(() => !!popConfirm) // 是否包含确认弹窗
-    const hasTooltip = computed(() => !!tooltip) // 是否包含文字提示
-
-    return () => {
-      const { popConfirm, tooltip, hasPermission, noPermissionTitle, ...buttonProps } = props
-
-      const button = !slots.button ?
-        h(Button,
-          {
-            ...buttonProps,
-            disabled: isPermission.value,
-          },
-          {
-          default: () => slots?.default?.(),
-          icon: () => slots?.icon?.()
-        }) :
-        slots.button()
-
-      // 文字提示
-      const _tooltip = tooltip ? h(Tooltip, { ...tooltip, disabled: isPermission.value }, { default: () => button}) : undefined
-
-      // 无权限
-      const noPermissionButton = !permission.value ? h(Tooltip, { title: noPermissionTitle || '暂无权限，请联系管理员' }, { default: () => button}) : undefined
-
-      // 二次确认
-      const _popConfirm = popConfirm ?
-        h(Popconfirm,
-          {
-            ...popConfirm,
-            disabled: !permission.value || buttonProps.disabled,
-            overlayStyle: { width: '220px' }
-          }, { default: () => tooltip ? _tooltip : button })
-        : undefined
-
-      if (permission.value) {
-        if(hasPopConfirm.value) {
-          return _popConfirm
+    name: 'PermissionButton',
+    // @ts-ignore
+    slots: ['button', 'icon'],
+    props: definedProps,
+    setup(props, {slots}) {
+
+        const {popConfirm, tooltip} = props
+        const {hasPerm} = usePermission(props.hasPermission as PermissionType)
+
+        const permission = computed(() => {
+            if (!props.hasPermission || props.hasPermission === true) {
+                return true
+            }
+            return hasPerm.value
+        })
+
+        const isPermission = computed(() => {
+            if ('hasPermission' in props && permission.value) {
+                return 'disabled' in props ? props.disabled : false
+            }
+            return true
+        })
+
+        const hasPopConfirm = computed(() => !!popConfirm) // 是否包含确认弹窗
+        const hasTooltip = computed(() => !!tooltip) // 是否包含文字提示
+
+        return () => {
+            const {popConfirm, tooltip, hasPermission, noPermissionTitle, ...buttonProps} = props
+
+            const button = !slots.button ?
+                h(Button,
+                    {
+                        ...buttonProps,
+                        disabled: isPermission.value,
+                    },
+                    {
+                        default: () => slots?.default?.(),
+                        icon: () => slots?.icon?.()
+                    }) :
+                slots.button()
+
+            // 文字提示
+            const _tooltip = tooltip ? h(Tooltip, Object.assign(tooltip, {disabled: isPermission.value}), {default: () => button}) : undefined
+
+            // 无权限
+            const noPermissionButton = !permission.value ? h(Tooltip, {title: noPermissionTitle || '暂无权限，请联系管理员'}, {default: () => button}) : undefined
+
+            // 二次确认
+            const _popConfirm = popConfirm ?
+                h(Popconfirm,
+                    Object.assign(
+                        {overlayStyle: {width: '220px'}},
+                        popConfirm,
+                        {
+                            disabled: !permission.value || buttonProps.disabled
+                        }
+                    ),
+                    {default: () => tooltip ? _tooltip : button})
+                : undefined
+
+            if (permission.value) {
+                if (hasPopConfirm.value) {
+                    return _popConfirm
+                }
+
+                if (hasTooltip.value) {
+                    return _tooltip
+                }
+
+                return button
+            }
+            return noPermissionButton
         }
-
-        if (hasTooltip.value) {
-          return _tooltip
-        }
-
-        return button
-      }
-      return noPermissionButton
     }
-  }
 })
 
 export default PermissionButton

package/src/ProLayout/Basic/BasicLayout.less

@@ -0,0 +1,66 @@
+@import '../style/default.less';
+
+.@{basicLayout-prefix-cls} {
+  // BFC
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 100%;
+
+  .@{ant-prefix}-layout-header {
+    &.@{ant-prefix}-pro-fixed-header {
+      position: fixed;
+      top: 0;
+    }
+  }
+
+  &-content {
+    position: relative;
+    margin: 24px;
+
+    .@{ant-prefix}-pro-page-container {
+      margin: -24px -24px 0;
+    }
+
+    &-disable-margin {
+      margin: 0;
+
+      .@{ant-prefix}-pro-page-container {
+        margin: 0;
+      }
+    }
+
+    > .@{ant-prefix}-layout {
+      max-height: 100%;
+    }
+  }
+
+  // children should support fixed
+  .@{basicLayout-prefix-cls}-is-children.@{basicLayout-prefix-cls}-fix-siderbar {
+    height: 100vh;
+    overflow: hidden;
+    transform: rotate(0);
+  }
+
+  .@{basicLayout-prefix-cls}-has-header {
+    // tech-page-container
+    .tech-page-container {
+      height: calc(100vh - @pro-layout-header-height);
+    }
+
+    .@{basicLayout-prefix-cls}-is-children.@{basicLayout-prefix-cls}-has-header {
+      .tech-page-container {
+        height: calc(100vh - @pro-layout-header-height -
+        @pro-layout-header-height);
+      }
+
+      .@{basicLayout-prefix-cls}-is-children {
+        min-height: calc(100vh - @pro-layout-header-height);
+
+        &.@{basicLayout-prefix-cls}-fix-siderbar {
+          height: calc(100vh - @pro-layout-header-height);
+        }
+      }
+    }
+  }
+}