formforgetest 0.1.0

package/README.md

@@ -0,0 +1,71 @@
+# formforgetest
+
+FormForge **表单渲染引擎**（Vue 2.7）。解析 `pageSchema` JSON，递归渲染 LcInput / LcButton / LcSelect / LcContainer 等物料。
+
+**不包含**编辑器（画布、属性面板、拖拽）。
+
+npm 包名 **`formforgetest`**（因 `@formforge` 已被占用，本书案例使用此名称发布）。
+
+## 安装
+
+```bash
+# 本地 monorepo（file 协议）
+npm install file:../pagecraft/packages/formforge-runtime
+
+# 或从 npm 安装
+npm install formforgetest
+```
+
+## 发布到 npm
+
+完整步骤见 **[PUBLISH.md](./PUBLISH.md)**（`npm login` → `npm publish` → 业务项目 `npm install formforgetest`）。
+
+## 使用
+
+```js
+// main.js
+import Vue from 'vue'
+import FormForgeRuntime from 'formforgetest'
+
+Vue.use(FormForgeRuntime)
+```
+
+```vue
+<!-- App.vue -->
+<template>
+  <FormForgePage :schema="pageSchema" />
+</template>
+
+<script>
+import pageSchema from './schema.json'
+
+export default {
+  data() {
+    return { pageSchema }
+  }
+}
+</script>
+```
+
+也可按需引入：
+
+```js
+import { SchemaRenderer, PageNodeStack, EDITOR_MODE } from 'formforgetest'
+```
+
+## pageSchema 结构
+
+```json
+{
+  "title": "登录页",
+  "nodes": [
+    {
+      "id": "n1",
+      "type": "input",
+      "props": { "label": "用户名", "fieldKey": "username" }
+    }
+  ]
+}
+```
+
+详见 `examples/formforge-consumer` 模拟业务项目。

package/index.js

@@ -0,0 +1,45 @@
+import SchemaRenderer from './src/components/business/SchemaRenderer.vue'
+import PageNodeStack from './src/components/business/PageNodeStack.vue'
+import FormForgePage from './src/components/business/FormForgePage.vue'
+import LcButton from './src/components/base/LcButton.vue'
+import LcInput from './src/components/base/LcInput.vue'
+import LcContainer from './src/components/base/LcContainer.vue'
+import LcSelect from './src/components/base/LcSelect.vue'
+import EmptyFallback from './src/components/base/EmptyFallback.vue'
+
+export { EDITOR_MODE } from './src/constants/editor'
+export * from './src/utils/props'
+export * from './src/widgets'
+
+export {
+  SchemaRenderer,
+  PageNodeStack,
+  FormForgePage,
+  LcButton,
+  LcInput,
+  LcContainer,
+  LcSelect,
+  EmptyFallback
+}
+
+const pluginComponents = [
+  SchemaRenderer,
+  PageNodeStack,
+  FormForgePage,
+  LcButton,
+  LcInput,
+  LcContainer,
+  LcSelect,
+  EmptyFallback
+]
+
+/** Vue.use(FormForgeRuntime) — 全局注册渲染引擎组件 */
+export default {
+  install(Vue) {
+    pluginComponents.forEach(comp => {
+      if (comp.name) {
+        Vue.component(comp.name, comp)
+      }
+    })
+  }
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "formforgetest",
+  "version": "0.1.0",
+  "description": "FormForge 表单渲染引擎 — SchemaRenderer + widget 物料（Vue 2.7）",
+  "main": "index.js",
+  "license": "MIT",
+  "keywords": [
+    "vue2",
+    "form",
+    "low-code",
+    "schema",
+    "formforge",
+    "renderer"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-org/vue2-book.git",
+    "directory": "examples/pagecraft/packages/formforge-runtime"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "vue": "^2.7.0"
+  },
+  "files": [
+    "index.js",
+    "src",
+    "README.md"
+  ]
+}

package/src/components/base/EmptyFallback.vue

@@ -0,0 +1,27 @@
+<script>
+export default {
+  name: 'EmptyFallback',
+  functional: true,
+  props: {
+    type: { type: String, default: '' }
+  },
+  render(h, { props }) {
+    return h(
+      'div',
+      { class: 'lc-fallback' },
+      `未知物料：${props.type || '?'}`
+    )
+  }
+}
+</script>
+
+<style>
+.lc-fallback {
+  padding: 8px 12px;
+  font-size: 12px;
+  color: #999;
+  background: #fff5f5;
+  border: 1px dashed #e57373;
+  border-radius: 4px;
+}
+</style>

package/src/components/base/LcButton.vue

@@ -0,0 +1,120 @@
+<template>
+  <button
+    class="lc-btn"
+    :class="'lc-btn--' + type"
+    v-bind="$attrs"
+    :disabled="disabled || loading"
+    @click="handleClick"
+  >
+    <slot>{{ loading ? '请求中…' : label }}</slot>
+  </button>
+</template>
+
+<script>
+import { EDITOR_MODE } from '../../constants/editor'
+import { isApiBinding, isButtonVariant } from '../../utils/props'
+
+export default {
+  name: 'LcButton',
+  inheritAttrs: false,
+  inject: {
+    editorContext: { default: () => ({ mode: EDITOR_MODE.PREVIEW }) },
+    formContext: { default: null }
+  },
+  props: {
+    label: { type: String, default: '按钮' },
+    type: {
+      type: String,
+      default: 'primary',
+      validator: isButtonVariant
+    },
+    disabled: { type: Boolean, default: false },
+    apiBinding: {
+      type: Object,
+      default: () => ({ enabled: false, url: '', method: 'POST', params: [] }),
+      validator: isApiBinding
+    }
+  },
+  data() {
+    return {
+      loading: false
+    }
+  },
+  methods: {
+    handleClick(event) {
+      this.$emit('click', event)
+      if (this.editorContext.mode === EDITOR_MODE.EDIT) {
+        return
+      }
+      if (this.apiBinding.enabled && this.apiBinding.url) {
+        this.invokeApi()
+      }
+    },
+    buildRequestPayload() {
+      const payload = {}
+      ;(this.apiBinding.params || []).forEach(item => {
+        if (!item.name) return
+        if (item.source === 'field') {
+          payload[item.name] = this.formContext?.getValue(item.fieldKey) ?? ''
+        } else {
+          payload[item.name] = item.value
+        }
+      })
+      return payload
+    },
+    async invokeApi() {
+      const { url, method } = this.apiBinding
+      const payload = this.buildRequestPayload()
+      this.loading = true
+      try {
+        let requestUrl = url
+        const options = { method }
+        if (method === 'GET') {
+          const qs = new URLSearchParams(payload).toString()
+          if (qs) {
+            requestUrl += (url.includes('?') ? '&' : '?') + qs
+          }
+        } else {
+          options.headers = { 'Content-Type': 'application/json' }
+          options.body = JSON.stringify(payload)
+        }
+        const response = await fetch(requestUrl, options)
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`)
+        }
+        const data = await response.json()
+        this.$emit('api-success', data)
+        window.alert(`接口请求成功：${JSON.stringify(data).slice(0, 160)}…`)
+      } catch (error) {
+        this.$emit('api-error', error)
+        window.alert(`接口请求失败：${error.message}`)
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.lc-btn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-family: inherit;
+}
+.lc-btn--primary {
+  background: #41b883;
+  color: #fff;
+}
+.lc-btn--default {
+  background: #f0f0f0;
+  color: #333;
+}
+.lc-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>

package/src/components/base/LcContainer.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="lc-grid" :style="gridStyle">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LcContainer',
+  props: {
+    columns: {
+      type: Number,
+      default: 2,
+      validator: v => v >= 1 && v <= 4
+    },
+    gap: { type: Number, default: 12 },
+    padding: { type: Number, default: 12 }
+  },
+  computed: {
+    gridStyle() {
+      return {
+        padding: `${this.padding}px`,
+        gap: `${this.gap}px`,
+        gridTemplateColumns: `repeat(${this.columns}, minmax(0, 1fr))`
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.lc-grid {
+  display: grid;
+  width: 100%;
+  border: 1px dashed #ccc;
+  border-radius: 4px;
+  min-height: 56px;
+  background: #fafafa;
+  box-sizing: border-box;
+}
+</style>

package/src/components/base/LcInput.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="lc-input-wrap">
+    <label v-if="label" class="lc-input__label" :for="inputId">{{ label }}</label>
+    <input
+      :id="inputId"
+      class="lc-input"
+      :value="innerValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :name="fieldKey || undefined"
+      v-bind="$attrs"
+      @input="onInput"
+    />
+  </div>
+</template>
+
+<script>
+import { EDITOR_MODE } from '../../constants/editor'
+
+let inputSeed = 0
+
+export default {
+  name: 'LcInput',
+  inheritAttrs: false,
+  inject: {
+    editorContext: { default: () => ({ mode: EDITOR_MODE.PREVIEW }) },
+    formContext: { default: null }
+  },
+  props: {
+    label: { type: String, default: '' },
+    fieldKey: { type: String, default: '' },
+    value: { type: String, default: '' },
+    placeholder: { type: String, default: '' },
+    disabled: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      inputId: `lc-input-${++inputSeed}`,
+      localValue: this.value
+    }
+  },
+  computed: {
+    innerValue() {
+      if (this.formContext && this.fieldKey) {
+        return this.formContext.getValue(this.fieldKey)
+      }
+      return this.localValue
+    }
+  },
+  watch: {
+    value(next) {
+      this.localValue = next
+      this.syncFormContext(next)
+    },
+    fieldKey(next, prev) {
+      if (prev && this.formContext) {
+        this.formContext.setValue(prev, '')
+      }
+      this.syncFormContext(this.innerValue)
+    }
+  },
+  mounted() {
+    this.syncFormContext(this.value)
+  },
+  methods: {
+    syncFormContext(val) {
+      if (this.formContext && this.fieldKey) {
+        this.formContext.setValue(this.fieldKey, val)
+      }
+    },
+    onInput(event) {
+      const val = event.target.value
+      this.localValue = val
+      this.$emit('input', val)
+      this.syncFormContext(val)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.lc-input-wrap {
+  width: 100%;
+}
+.lc-input__label {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #333;
+}
+.lc-input {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: inherit;
+  box-sizing: border-box;
+}
+.lc-input:focus {
+  outline: none;
+  border-color: #41b883;
+}
+</style>

package/src/components/base/LcSelect.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="lc-select-wrap">
+    <label v-if="label" class="lc-select__label" :for="selectId">{{ label }}</label>
+    <select
+      :id="selectId"
+      class="lc-select"
+      :value="innerValue"
+      :disabled="disabled"
+      :name="fieldKey || undefined"
+      v-bind="$attrs"
+      @change="onChange"
+    >
+      <option v-if="placeholder" value="" disabled hidden>{{ placeholder }}</option>
+      <option
+        v-for="(opt, idx) in options"
+        :key="opt.value + '-' + idx"
+        :value="opt.value"
+      >
+        {{ opt.label }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+import { EDITOR_MODE } from '../../constants/editor'
+import { isSelectOptions } from '../../utils/props'
+
+let selectSeed = 0
+
+export default {
+  name: 'LcSelect',
+  inheritAttrs: false,
+  inject: {
+    editorContext: { default: () => ({ mode: EDITOR_MODE.PREVIEW }) },
+    formContext: { default: null }
+  },
+  props: {
+    label: { type: String, default: '' },
+    fieldKey: { type: String, default: '' },
+    value: { type: String, default: '' },
+    placeholder: { type: String, default: '请选择' },
+    disabled: { type: Boolean, default: false },
+    options: {
+      type: Array,
+      default: () => [],
+      validator: isSelectOptions
+    }
+  },
+  data() {
+    return {
+      selectId: `lc-select-${++selectSeed}`,
+      localValue: this.value
+    }
+  },
+  computed: {
+    innerValue() {
+      if (this.formContext && this.fieldKey) {
+        return this.formContext.getValue(this.fieldKey)
+      }
+      return this.localValue
+    }
+  },
+  watch: {
+    value(next) {
+      this.localValue = next
+      this.syncFormContext(next)
+    },
+    fieldKey(next, prev) {
+      if (prev && this.formContext) {
+        this.formContext.setValue(prev, '')
+      }
+      this.syncFormContext(this.innerValue)
+    }
+  },
+  mounted() {
+    this.syncFormContext(this.value)
+  },
+  methods: {
+    syncFormContext(val) {
+      if (this.formContext && this.fieldKey) {
+        this.formContext.setValue(this.fieldKey, val)
+      }
+    },
+    onChange(event) {
+      const val = event.target.value
+      this.localValue = val
+      this.$emit('input', val)
+      this.syncFormContext(val)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.lc-select-wrap {
+  width: 100%;
+}
+.lc-select__label {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #333;
+}
+.lc-select {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: inherit;
+  box-sizing: border-box;
+  background: #fff;
+}
+.lc-select:focus {
+  outline: none;
+  border-color: #41b883;
+}
+.lc-select:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+</style>

package/src/components/business/FormForgePage.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="formforge-page">
+    <p v-if="!schema.nodes || !schema.nodes.length" class="formforge-page__empty">
+      {{ emptyText }}
+    </p>
+    <PageNodeStack v-else>
+      <SchemaRenderer
+        v-for="node in schema.nodes"
+        :key="node.id"
+        :node="node"
+      />
+    </PageNodeStack>
+  </div>
+</template>
+
+<script>
+import { EDITOR_MODE } from '../../constants/editor'
+import SchemaRenderer from './SchemaRenderer.vue'
+import PageNodeStack from './PageNodeStack.vue'
+
+/**
+ * 开箱即用：传入 pageSchema JSON 即可渲染表单页。
+ * 业务项目 Vue.use(formforgetest) 后可直接 <FormForgePage :schema="..." />。
+ */
+export default {
+  name: 'FormForgePage',
+  components: { SchemaRenderer, PageNodeStack },
+  props: {
+    schema: {
+      type: Object,
+      required: true,
+      validator(s) {
+        return s && Array.isArray(s.nodes)
+      }
+    },
+    emptyText: {
+      type: String,
+      default: '暂无表单节点'
+    }
+  },
+  data() {
+    return {
+      formValues: {}
+    }
+  },
+  provide() {
+    return {
+      editorContext: { mode: EDITOR_MODE.PREVIEW },
+      formContext: {
+        getValue: key => this.formValues[key] ?? '',
+        setValue: (key, val) => {
+          this.$set(this.formValues, key, val)
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.formforge-page__empty {
+  text-align: center;
+  color: #999;
+  padding: 32px 16px;
+  font-size: 14px;
+}
+</style>

package/src/components/business/PageNodeStack.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="lc-page-stack">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PageNodeStack'
+}
+</script>
+
+<style scoped>
+.lc-page-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+</style>

package/src/components/business/SchemaRenderer.vue

@@ -0,0 +1,42 @@
+<template>
+  <component
+    :is="componentType"
+    v-bind="boundProps"
+  >
+    <SchemaRenderer
+      v-for="child in node.children || []"
+      :key="child.id"
+      :node="child"
+    />
+  </component>
+</template>
+
+<script>
+import { resolveWidgetSync } from '../../widgets'
+import EmptyFallback from '../base/EmptyFallback.vue'
+
+export default {
+  name: 'SchemaRenderer',
+  components: { EmptyFallback },
+  props: {
+    node: {
+      type: Object,
+      required: true,
+      validator(node) {
+        return node && typeof node.type === 'string' && node.props != null
+      }
+    }
+  },
+  computed: {
+    componentType() {
+      return resolveWidgetSync(this.node.type) || EmptyFallback
+    },
+    boundProps() {
+      if (resolveWidgetSync(this.node.type)) {
+        return this.node.props
+      }
+      return { type: this.node.type }
+    }
+  }
+}
+</script>

package/src/constants/editor.js

@@ -0,0 +1,5 @@
+/** provide / inject：编辑态 vs 预览态（渲染引擎侧） */
+export const EDITOR_MODE = {
+  EDIT: 'edit',
+  PREVIEW: 'preview'
+}

package/src/utils/props.js

@@ -0,0 +1,58 @@
+/** 按钮样式变体校验 */
+export function isButtonVariant(value) {
+  return value === 'primary' || value === 'default'
+}
+
+function isApiParam(item) {
+  if (!item || typeof item !== 'object') return false
+  if (typeof item.name !== 'string') return false
+  if (item.source !== 'field' && item.source !== 'static') return false
+  if (item.source === 'field' && typeof item.fieldKey !== 'string') return false
+  if (item.source === 'static' && typeof item.value !== 'string') return false
+  return true
+}
+
+/** 接口绑定对象校验 */
+export function isApiBinding(value) {
+  if (!value || typeof value !== 'object') return false
+  const method = value.method || 'GET'
+  if (typeof value.enabled !== 'boolean') return false
+  if (typeof value.url !== 'string') return false
+  if (method !== 'GET' && method !== 'POST') return false
+  if (value.params != null) {
+    if (!Array.isArray(value.params)) return false
+    if (!value.params.every(isApiParam)) return false
+  }
+  return true
+}
+
+export function createDefaultApiParam() {
+  return { name: '', source: 'field', fieldKey: '', value: '' }
+}
+
+export function createDefaultApiBinding() {
+  return {
+    enabled: false,
+    url: '',
+    method: 'POST',
+    params: []
+  }
+}
+
+function isSelectOption(item) {
+  if (!item || typeof item !== 'object') return false
+  return typeof item.label === 'string' && typeof item.value === 'string'
+}
+
+/** 下拉 options 校验 */
+export function isSelectOptions(value) {
+  if (!Array.isArray(value)) return false
+  return value.every(isSelectOption)
+}
+
+export function createDefaultSelectOptions() {
+  return [
+    { label: '选项 A', value: 'a' },
+    { label: '选项 B', value: 'b' }
+  ]
+}

package/src/widgets/index.js

@@ -0,0 +1,71 @@
+import LcButton from '../components/base/LcButton.vue'
+import LcInput from '../components/base/LcInput.vue'
+import LcContainer from '../components/base/LcContainer.vue'
+import LcSelect from '../components/base/LcSelect.vue'
+import { createDefaultApiBinding, createDefaultSelectOptions } from '../utils/props'
+
+export const widgetRegistry = {
+  button: {
+    component: LcButton,
+    meta: {
+      type: 'button',
+      title: '按钮',
+      defaultProps: {
+        label: '按钮',
+        type: 'primary',
+        disabled: false,
+        apiBinding: createDefaultApiBinding()
+      }
+    }
+  },
+  input: {
+    component: LcInput,
+    meta: {
+      type: 'input',
+      title: '输入框',
+      defaultProps: {
+        label: '用户名',
+        fieldKey: 'username',
+        value: '',
+        placeholder: '请输入',
+        disabled: false
+      }
+    }
+  },
+  container: {
+    component: LcContainer,
+    meta: {
+      type: 'container',
+      title: '栅格容器',
+      defaultProps: { columns: 2, gap: 12, padding: 12 }
+    }
+  },
+  select: {
+    component: LcSelect,
+    meta: {
+      type: 'select',
+      title: '下拉菜单',
+      defaultProps: {
+        label: '下拉菜单',
+        fieldKey: 'selectField',
+        value: '',
+        placeholder: '请选择',
+        disabled: false,
+        options: createDefaultSelectOptions()
+      }
+    }
+  }
+}
+
+export function resolveWidgetSync(type) {
+  return widgetRegistry[type]?.component || null
+}
+
+export function getWidgetMeta(type) {
+  return widgetRegistry[type]?.meta || null
+}
+
+export function buildNodeProps(type, overrides = {}) {
+  const meta = getWidgetMeta(type)
+  return { ...(meta?.defaultProps || {}), ...overrides }
+}