form-designer-xinyi 1.0.0

package/packages/core/extensions/ERuleEditor/ERuleItem.vue

@@ -0,0 +1,137 @@
+<template>
+  <div
+    class="rule-item-main bg-white m-t-2 p-2 rounded  border border-solid border-gray-200 hover:border-primary transition-all relative">
+    <template v-for="(componentSchema, index) in ruleItemSchemas" :key="index">
+      <div v-if="componentSchema.show ? componentSchema.show() : true" class="flex m-t-2 first:m-0">
+        <div class="epic-attr-label" title="校验时机">
+          {{ componentSchema.label }}
+        </div>
+        <div class="epic-attr-input">
+          <ENode v-model="modelRule[componentSchema.model]" :componentSchema="{ ...componentSchema, noFormItem: true }" @change="handleUpdate" />
+        </div>
+      </div>
+    </template>
+    <div
+      class="rule-btn-delete absolute top-0 right-0 transition-all w-24px h-24px cursor-pointer rounded-bl-2 flex justify-center items-center color-white"
+      @click="handleDelete">
+      <EIcon name="icon-shanchu1" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { FormItemRule } from './types'
+import { computed, inject } from 'vue'
+import { PageManager } from '@epic-designer/utils'
+import ENode from '../../components/node/index'
+import EIcon from '../../components/icon'
+import { typeOptions, triggerOptions, lenTypeOptions } from './data'
+const emit = defineEmits(['change', 'delete', 'update:rule'])
+const props = defineProps<{
+  rule: FormItemRule,
+}>()
+
+const modelRule = computed({
+  get() {
+    return props.rule
+  },
+  set(value) {
+    emit('update:rule', value)
+  }
+})
+
+const pageManager = inject('pageManager', {}) as PageManager
+
+const methodOptions = computed(() => {
+  return Object.entries(pageManager.funcs.value)
+    .filter(([key, value]) => typeof value === 'function')
+    .map(([label]) => ({ label, value: label }))
+})
+
+const ruleItemSchemas = [
+  {
+    type: 'select',
+    label: '校验时机',
+    model: 'trigger',
+    componentProps: { options: triggerOptions, placeholder: '校验时机', multiple: true, mode: 'multiple' }
+  },
+  {
+    type: 'switch',
+    label: '自定义规则',
+    model: 'isValidator'
+  },
+  {
+    type: 'select',
+    label: '校验函数',
+    model: 'validator',
+    show() { return Boolean(modelRule.value.isValidator) },
+    componentProps: { options: methodOptions.value, placeholder: '校验函数' }
+  },
+  {
+    type: 'select',
+    label: '类型',
+    model: 'type',
+    show() { return !modelRule.value.isValidator },
+    componentProps: { options: typeOptions, placeholder: '类型' }
+  },
+  {
+    type: 'input',
+    label: '正则校验',
+    model: 'pattern',
+    show() { return !modelRule.value.isValidator },
+    componentProps: { placeholder: '正则校验' }
+  },
+  {
+    type: 'number',
+    label: '字段长度',
+    model: 'len',
+    show() { return lenTypeOptions.includes(modelRule.value.type ?? '') },
+    componentProps: { min: 0, placeholder: '字段长度' }
+  },
+  {
+    type: 'number',
+    label: '最小长度',
+    model: 'min',
+    show() { return lenTypeOptions.includes(modelRule.value.type ?? '') },
+    componentProps: { min: 0, placeholder: '最小长度' }
+  },
+  {
+    type: 'number',
+    label: '最大长度',
+    model: 'max',
+    show() { return lenTypeOptions.includes(modelRule.value.type ?? '') },
+    componentProps: { min: 0, placeholder: '最大长度' }
+  },
+  {
+    type: 'input',
+    label: '校验信息',
+    model: 'message',
+    componentProps: { placeholder: '校验信息' }
+  }
+]
+
+/**
+ * 更新校验规则
+ */
+function handleUpdate() {
+  const v = modelRule.value
+  if (v.isValidator) {
+    delete v.type
+    delete v.pattern
+    delete v.len
+    delete v.min
+    delete v.max
+  } else {
+    delete v.validator
+  }
+  // emit('update:rule', v)
+  emit('change', v)
+}
+
+/**
+ * 删除校验规则
+ */
+function handleDelete() {
+  emit('delete')
+}
+
+</script>

package/packages/core/extensions/ERuleEditor/data.ts

@@ -0,0 +1,24 @@
+export const typeOptions = [
+  { label: "string", value: "string" },
+  { label: "number", value: "number" },
+  { label: "boolean", value: "boolean" },
+  { label: "method", value: "method" },
+  { label: "regexp", value: "regexp" },
+  { label: "integer", value: "integer" },
+  { label: "float", value: "float" },
+  { label: "array", value: "array" },
+  { label: "object", value: "object" },
+  // { label: 'enum', value: 'enum' },
+  { label: "date", value: "date" },
+  { label: "url", value: "url" },
+  { label: "hex", value: "hex" },
+  { label: "email", value: "email" },
+  { label: "any", value: "any" },
+];
+
+export const triggerOptions = [
+  { label: "change", value: "change" },
+  { label: "blur", value: "blur" },
+];
+
+export const lenTypeOptions = ["string", "number", "url", "array", "email"];

package/packages/core/extensions/ERuleEditor/index.less

@@ -0,0 +1,17 @@
+.rule-item-main {
+  background-color: var(--epic-view-color);
+  border-color: var(--epic-border-color);
+  &:hover{
+  border-color: var(--epic-primary-color);
+  }
+  .rule-btn-delete {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &:hover > .rule-btn-delete {
+    opacity: 1;
+    pointer-events: all;
+    background-color: var(--epic-primary-color);
+  }
+}

package/packages/core/extensions/ERuleEditor/index.vue

@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <div
+      class="rule-item-main m-t-2 p-2 rounded  border border-solid transition-all relative">
+      <template v-for="(componentSchema, index) in requiredRuleSchemas" :key="index">
+        <div v-if="componentSchema.show ? componentSchema.show() : true" class="flex m-t-2 first:m-0">
+          <div class="epic-attr-label">
+            {{ componentSchema.label }}
+          </div>
+          <div class="flex-1">
+            <ENode v-model="requiredRule[componentSchema.model]"
+              :componentSchema="{ ...componentSchema, noFormItem: true }" @change="handleUpdate" />
+          </div>
+        </div>
+      </template>
+    </div>
+    <ERuleItem v-for="(item, index) in rules" :key="index" v-model:rule="rules[index]" @delete="handleDelete(index)"
+      @change="handleUpdate" />
+    <Button class="m-t-2" @click="handleAdd">
+      添加规则
+    </Button>
+  </div>
+</template>
+<script lang="ts" setup>
+import { pluginManager, deepClone } from '@epic-designer/utils'
+import { ref, watch, PropType } from 'vue'
+import { FormItemRule } from './types'
+import ERuleItem from './ERuleItem.vue'
+import ENode from '../../components/node/index'
+import { triggerOptions, typeOptions } from './data'
+const Button = pluginManager.getComponent('button')
+const props = defineProps({
+  ruleType: {
+    type: String,
+    default: 'string'
+  },
+  modelValue: {
+    type: Array as PropType<FormItemRule[] | undefined>,
+    default: undefined
+  }
+})
+
+
+const requiredRule = ref<FormItemRule>({
+  required: false,
+  message: "必填项",
+  type: props.ruleType,
+  trigger: ["change"],
+});
+
+const requiredRuleSchemas = [
+  {
+    type: "switch",
+    label: "必填项",
+    model: "required",
+  },
+  {
+    type: "select",
+    label: "校验时机",
+    model: "trigger",
+    show() {
+      return Boolean(requiredRule.value.required);
+    },
+    componentProps: {
+      options: triggerOptions,
+      placeholder: "校验时机",
+      multiple: true,
+      mode: "multiple",
+    },
+  },
+  {
+    type: 'select',
+    label: '类型',
+    model: 'type',
+    show() {
+      return Boolean(requiredRule.value.required);
+    },
+    componentProps: { options: typeOptions, placeholder: '类型' }
+  },
+  {
+    type: "input",
+    label: "校验信息",
+    model: "message",
+    show() {
+      return Boolean(requiredRule.value.required);
+    },
+    componentProps: { placeholder: "校验信息" },
+  },
+];
+
+
+
+
+const rules = ref<FormItemRule[]>([])
+const emit = defineEmits(['update:modelValue'])
+
+watch(() => props.modelValue, (e) => {
+  if (e) {
+    if (!e) return
+    rules.value = []
+    e.forEach(item => {
+      // 必填项单独存储
+      if (typeof item.required !== 'undefined') {
+        requiredRule.value = item
+      } else {
+        rules.value.push(item)
+      }
+    })
+  }
+}, {
+  immediate: true
+})
+
+/**
+ * 新增检验规则
+ */
+function handleAdd() {
+  rules.value.push({
+    message: '',
+    type: props.ruleType,
+    trigger: ['change']
+  })
+  handleUpdate()
+}
+
+/**
+ * 更新校验规则
+ */
+function handleUpdate() {
+  // 存在必填项时,合并其他规则
+  if (requiredRule.value.required) {
+    emit('update:modelValue', deepClone([...rules.value, requiredRule.value]))
+    return
+  }
+
+  // 存在其他规则
+  if (rules.value.length) {
+    emit('update:modelValue', deepClone(rules.value))
+    return
+  }
+
+  // 没有任何校验规则
+  emit('update:modelValue', undefined)
+}
+
+/**
+ * 通过下标删除校验规则项
+ * @param index
+ */
+function handleDelete(index: number) {
+  rules.value.splice(index, 1)
+  handleUpdate()
+}
+</script>

package/packages/core/extensions/ERuleEditor/types.ts

@@ -0,0 +1,17 @@
+export interface RuleItem {
+  required?: boolean
+  type?: string
+  pattern?: RegExp | string
+  min?: number
+  max?: number
+  len?: number
+  enum?: Array<string | number | boolean | null | undefined>
+  whitespace?: boolean
+  validator?: string
+  isValidator?: boolean
+  message?: string | ((a?: string) => string)
+}
+export interface FormItemRule extends RuleItem {
+  trigger?: string | string[]
+  [model: string]: any
+}

package/packages/core/extensions/MonacoEditor/index.ts

@@ -0,0 +1,31 @@
+import { type ComponentConfigModel } from '@epic-designer/utils'
+export default {
+  component: async () => await import('./index.vue'),
+  defaultSchema: {
+    label: '代码编辑器',
+    type: 'monacoEditor',
+    field: 'monacoEditor',
+    icon: 'epic-icon-write',
+    input: true
+  },
+  config: {
+    attribute: [
+      {
+        label: '字段名',
+        type: 'input',
+        field: 'field'
+      },
+      {
+        label: '标题',
+        type: 'input',
+        field: 'label'
+      },
+      {
+        label: '默认值',
+        type: 'monacoEditor',
+        field: 'componentProps.defaultValue'
+      }
+    ]
+  },
+  bindModel: 'model-value'
+} as ComponentConfigModel

package/packages/core/extensions/MonacoEditor/index.vue

@@ -0,0 +1,147 @@
+<template>
+  <div ref="editContainer" class="epic-code-editor" />
+</template>
+<script setup lang="ts">
+import { ref, watch, nextTick, onMounted } from 'vue'
+import * as monaco from 'monaco-editor'
+import type { editor } from 'monaco-editor'
+import { useTheme } from '@epic-designer/utils'
+const props = withDefaults(defineProps<{
+  language?: string,
+  readOnly?: boolean,
+  valueFormat?: string,
+  modelValue?: any,
+  config?: editor.IStandaloneEditorConstructionOptions,
+  lineNumbers?: 'on' | 'off',
+  autoToggleTheme?: boolean,
+  theme?: 'vs-light' | 'vs-dark' | 'hc-black'
+}>(), {
+  language: 'json',
+  readOnly: false,
+  valueFormat: 'string',
+  lineNumbers: 'on',
+  theme: 'vs-light',
+  config: () => ({
+    selectOnLineNumbers: true,
+    minimap: {
+      enabled: false
+    },
+  })
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const editContainer = ref<HTMLElement | null>(null)
+
+let monacoEditor: monaco.editor.IStandaloneCodeEditor | null = null
+const { isDark } = useTheme()
+
+
+
+function handleToggleTheme() {
+  if (isDark.value) {
+    monaco.editor.setTheme('vs-dark')
+  } else {
+    monaco.editor.setTheme('vs-light')
+  }
+}
+
+
+
+/**
+ * 设置文本
+ * @param text
+ */
+function setValue(text: string) {
+  monacoEditor?.setValue(text || '')
+}
+
+/**
+ * 光标处插入文本
+ * @param text
+ */
+function insertText(text: string) {
+  // 获取光标位置
+  const position = monacoEditor?.getPosition()
+  // 未获取到光标位置信息
+  if (!position) {
+    return
+  }
+  // 插入
+  monacoEditor?.executeEdits('', [
+    {
+      range: new monaco.Range(position.lineNumber,
+        position.column,
+        position.lineNumber,
+        position.column),
+      text
+    }
+  ])
+  // 设置新的光标位置
+  monacoEditor?.setPosition({ ...position, column: position.column + text.length })
+  // 重新聚焦
+  monacoEditor?.focus()
+}
+
+onMounted(() => {
+  monacoEditor = monaco.editor.create(editContainer.value as HTMLElement, {
+    value: getValue(),
+    ...props.config,
+    language: props.language,
+    readOnly: props.readOnly,
+    lineNumbers: props.lineNumbers,
+    theme: props.theme,
+    automaticLayout: true
+  })
+
+  // 自动切换主题
+  if (props.autoToggleTheme) {
+    watch(() => isDark.value, () => {
+      nextTick(() => handleToggleTheme())
+    }, {
+      immediate: true
+    })
+  }
+
+  // 获取值
+  function getValue() {
+    // valueFormat 为json 格式，需要转换处理
+    if (props.valueFormat === 'json') {
+      if (props.modelValue) {
+        return JSON.stringify(props.modelValue, null, 2)
+      }
+    }
+    return props.modelValue ?? ''
+  }
+
+
+  // 监听值变化
+  monacoEditor.onDidChangeModelContent(() => {
+    const currenValue = monacoEditor?.getValue()
+
+    // valueFormat 为json 格式，需要转换处理
+    if (props.valueFormat === 'json' && currenValue) {
+      emit('update:modelValue', JSON.parse(currenValue))
+      return
+    }
+
+    emit('update:modelValue', currenValue ?? '')
+
+  })
+})
+
+defineExpose({
+  setValue,
+  insertText
+})
+</script>
+<style lang="less" scoped>
+.epic-code-editor {
+  width: 100%;
+  min-height: 150px;
+
+  :deep(.monaco-editor) {
+    height: 100%;
+  }
+}
+</style>

package/packages/core/extensions/Page/index.ts

@@ -0,0 +1,23 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+
+export default {
+  component: async () => await import("./index.vue"),
+  defaultSchema: {
+    label: "页面",
+    type: "page",
+    componentProps: {},
+    children: [],
+  },
+  config: {
+    attribute: [
+      {
+        label: "页面名称",
+        type: "input",
+        componentProps: {
+          placeholder: "请输入",
+        },
+        field: "componentProps.name",
+      },
+    ],
+  },
+} as ComponentConfigModel;

package/packages/core/extensions/Page/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <div
+    class="h-full box-border wh-full!"
+  >
+    <slot name="edit-node">
+      <slot
+        v-for="item in children"
+        name="node"
+        :componentSchema="item"
+      />
+    </slot>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { ComponentSchema } from '../../types/epic-designer'
+
+const props = defineProps<{
+  componentSchema:ComponentSchema
+}>()
+
+
+const children = computed(() => {
+  return props.componentSchema.children ?? []
+})
+
+</script>

package/packages/core/extensions/index.ts

@@ -0,0 +1,73 @@
+import { type PluginManager } from '@epic-designer/utils'
+import MonacoEditor from './MonacoEditor'
+import Page from './Page'
+
+export function setupComponent (pluginManager: PluginManager): void {
+  pluginManager.component('EInputSize', async () => await import('./EInputSize/index.vue'))
+  pluginManager.component('EColEditor', async () => await import('./EColEditor/index.vue'))
+  pluginManager.component('EActionEditor', async () => await import('./EActionEditor/index.vue'))
+  pluginManager.component('ERuleEditor', async () => await import('./ERuleEditor/index.vue'))
+  pluginManager.component('EOptionsEditor', async () => await import('./EOptionsEditor/index.vue'))
+  pluginManager.component('ENode', async () => await import('../components/node/index'))
+
+  // 左侧菜单初始化
+  pluginManager.registerActivitybar({
+    id: 'component_view',
+    title: '组件',
+    icon: 'epic-icon-mokuai_1',
+    component: async () =>
+      await import(
+        '../components/designer/src/modules/componentView/index.vue'
+      )
+  })
+
+  pluginManager.registerActivitybar({
+    id: 'sound_code_view',
+    title: '源码',
+    icon: 'epic-icon-daima1',
+    component: async () =>
+      await import(
+        '../components/designer/src/modules/sourceCode/index.vue'
+      )
+  })
+
+  pluginManager.registerActivitybar({
+    id: 'outline_view',
+    title: '大纲',
+    icon: 'epic-icon-juxingkaobei',
+    component: async () =>
+      await import('../components/designer/src/modules/outline/outline.vue')
+  })
+
+  pluginManager.registerRightSidebar({
+    id: 'attribute_view',
+    title: '属性',
+    component: async () =>
+      await import(
+        '../components/designer/src/modules/attributeView/attributeView.vue'
+      )
+  })
+
+  pluginManager.registerRightSidebar({
+    id: 'style_view',
+    title: '样式',
+    component: async () =>
+      await import(
+        '../components/designer/src/modules/attributeView/styleView.vue'
+      )
+  })
+  pluginManager.registerRightSidebar({
+    id: 'event_view',
+    title: '事件',
+    component: async () =>
+      await import(
+        '../components/designer/src/modules/attributeView/eventView.vue'
+      )
+  })
+
+  const componentArray = [MonacoEditor, Page]
+
+  componentArray.forEach((item) => {
+    pluginManager.registerComponent(item)
+  })
+}

package/packages/core/index.less

@@ -0,0 +1,27 @@
+@import "./static/icons/iconfont.css";
+@import "./theme/var.less";
+@import "./components/tree/src/index.less";
+@import "./components/designer/src/index.less";
+@import "./extensions/EActionEditor/index.less";
+@import "./extensions/ERuleEditor/index.less";
+@import "./extensions/EColEditor/index.less";
+@import "./components/asyncLoader/index.less";
+
+// 基础组件适配样式
+@import "@epic-designer/ui/antd/index.less";
+@import "@epic-designer/ui/elementPlus/index.less";
+@import "@epic-designer/ui/naiveUi/index.less";
+
+
+.epic-designer-main,
+.epic-builder-main 
+{
+  // 覆盖iconfont样式
+  .iconfont {
+    font-family: "epic-iconfont", "iconfont" !important;
+    font-style: normal;
+    font-size: 1em;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}