@a2simcode/ui 0.0.132 → 0.0.134

package/docs/components/form.md

@@ -28,6 +28,19 @@
   </template>
 </Demo>
 
+## 主从表（主表 + 子表）
+
+通过 `j-layout` 划分区域，并在 `children` 中利用 `j-table` 搭配其子级输入组件，可以实现复杂的主从表（表单 + 子表格）布局。
+
+<Demo :source-code="masterDetailCode">
+  <template #source>
+    <master-detail />
+  </template>
+  <template #description>
+    结合 `j-layout` 布局组件实现主从表单。在子表中配置 `editConfig: { isAddBtn: true, isRemoveBtn: true }` 并提供 `addRow` 函数来管理行数据；通过 `slot: 'top'` 指定字段归属为主表区域。
+  </template>
+</Demo>
+
 ## API
 
 <ApiTable :data="formApi" componentName="form" />
@@ -35,8 +48,10 @@
 <script setup>
 import Basic from '../examples/form/basic.vue'
 import Init from '../examples/form/init.vue'
+import MasterDetail from '../examples/form/master-detail.vue'
 import formApi from './meta/form'
 
 import basicCode from '../examples/form/basic.vue?raw'
 import initCode from '../examples/form/init.vue?raw'
+import masterDetailCode from '../examples/form/master-detail.vue?raw'
 </script>

package/docs/components/input-map.md

@@ -0,0 +1,24 @@
+# InputMap 地图选择器
+
+一个基于输入框的地图选择组件，允许用户通过地图选择位置信息。
+
+## 基础用法
+
+<Demo :source-code="inputMapBasicCode">
+  <template #source>
+    <input-map-basic />
+  </template>
+  <template #description>
+    通过 `v-model` 绑定当前选中的位置信息，支持 `placeholder` 等属性来自定义。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="inputMapApi" componentName="input-map" />
+
+<script setup>
+import InputMapBasic from '../examples/input-map/basic.vue'
+import inputMapApi from './meta/input-map'
+import inputMapBasicCode from '../examples/input-map/basic.vue?raw'
+</script>

package/docs/components/meta/input-map.ts

@@ -0,0 +1,32 @@
+export default [
+  {
+    "name": "modelValue",
+    "description": "输入值",
+    "type": "string",
+    "default": "-"
+  },
+  {
+    "name": "placeholder",
+    "description": "占位符",
+    "type": "string",
+    "default": "请选择"
+  },
+  {
+    "name": "readonly",
+    "description": "是否只读",
+    "type": "boolean",
+    "default": "false"
+  },
+  {
+    "name": "size",
+    "description": "选框尺寸",
+    "type": "'small' | 'large' | 'middle'",
+    "default": "-"
+  },
+  {
+    "name": "clearable",
+    "description": "是否可以清除",
+    "type": "boolean",
+    "default": "true"
+  }
+]

package/docs/components/meta/vpanel.ts

@@ -0,0 +1,20 @@
+export default {
+  "props": [],
+  "events": [],
+  "slots": [
+    {
+      "name": "top",
+      "description": "顶部内容区域"
+    },
+    {
+      "name": "default",
+      "description": "主要内容区域"
+    },
+    {
+      "name": "bottom",
+      "description": "底部内容区域"
+    }
+  ],
+  "methods": [],
+  "types": []
+}

package/docs/components/vpanel.md

@@ -0,0 +1,25 @@
+# VPanel 垂直布局
+
+`VPanel` 是一个用于垂直方向内容布局的组件，可以方便地将内容分为顶部、主内容区域和底部。
+
+## 基础用法
+
+<Demo :source-code="vpanelBasicCode">
+  <template #source>
+    <vpanel-basic />
+  </template>
+  <template #description>
+    `VPanel` 通过 `top` 具名插槽和 `bottom` 具名插槽来放置顶部和底部内容，未具名插槽则为主内容区域。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="vpanelApi" componentName="vpanel" />
+
+
+<script setup>
+import VpanelBasic from '../examples/vpanel/basic.vue'
+import vpanelApi from './meta/vpanel'
+import vpanelBasicCode from '../examples/vpanel/basic.vue?raw'
+</script>

package/docs/examples/form/master-detail.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="demo-form-layout">
+    <j-form ref="formRef" :schema="schema" :config="{ labelWidth: '80px' }" />
+    <div class="demo-actions" style="margin-top: 16px; text-align: right">
+      <j-button type="primary" label="保存" @click="handleSave"></j-button>
+      <j-button style="margin-left: 8px" label="重置" @click="handleReset"></j-button>
+      <j-button style="margin-left: 8px" label="加载模拟数据" @click="handleLoadMock"></j-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { type FormSchemaConfig, buildUUID } from '@a2simcode/ui'
+
+const formRef = ref()
+
+// 模拟字典数据
+const goodsTypeOptions = [
+  { label: '电子产品', value: 'electronics' },
+  { label: '服装', value: 'clothing' },
+  { label: '食品', value: 'food' },
+  { label: '日用品', value: 'daily' },
+]
+
+// 将原先 page.ts 中的 config 和 formConfig 融合到 schema 中
+const schema: FormSchemaConfig[] = [
+  {
+    type: 'j-layout',
+    config: {
+      label: '上下布局',
+      field: 'layout',
+      top: 100,
+      needRow: { top: true },
+      needFormItem: { top: true },
+    },
+    children: [
+      {
+        type: 'j-input',
+        slot: 'top',
+        config: {
+          label: '订单号',
+          field: 'orderNo',
+
+          rule: [{ required: true, message: '请输入订单号' }],
+        },
+      },
+      {
+        type: 'j-input',
+        slot: 'top',
+        config: {
+          label: '客户名称',
+          field: 'customerName',
+
+          rule: [{ required: true, message: '请输入客户名称' }],
+        },
+      },
+      {
+        type: 'j-date',
+        slot: 'top',
+        config: {
+          label: '订单日期',
+          field: 'orderDate',
+        },
+      },
+      {
+        type: 'j-table',
+        config: {
+          label: '订单明细',
+          field: 'orderDetails',
+          editConfig: { isAddBtn: true, isRemoveBtn: true },
+          addRow: (tableData: Record<string, any>[]) => {
+            tableData.push({
+              j_Id: buildUUID(),
+              goodsName: '',
+              goodsType: 'electronics',
+              quantity: 1,
+              price: 0,
+              isShipped: 0,
+              remark: '',
+            })
+          },
+        },
+        children: [
+          {
+            type: 'j-input',
+            config: {
+              label: '商品名称',
+              field: 'goodsName',
+              minWidth: 120,
+              rule: [{ required: true, message: '请输入商品名称' }],
+            },
+          },
+          {
+            type: 'j-select',
+            config: {
+              label: '商品类型',
+              field: 'goodsType',
+              width: 120,
+              options: goodsTypeOptions,
+              rule: [{ required: true, message: '请选择商品类型' }],
+            },
+          },
+          {
+            type: 'j-number',
+            config: {
+              label: '数量',
+              field: 'quantity',
+              width: 100,
+              min: 1,
+            },
+          },
+          {
+            type: 'j-number',
+            config: {
+              label: '单价',
+              field: 'price',
+              width: 100,
+              min: 0,
+            },
+          },
+          {
+            type: 'j-switch',
+            config: {
+              label: '是否发货',
+              field: 'isShipped',
+              width: 80,
+              size: 'small',
+              activeValue: 1,
+              inactiveValue: 0,
+            },
+          },
+          {
+            type: 'j-input',
+            config: {
+              label: '备注',
+              field: 'remark',
+              minWidth: 150,
+            },
+          },
+        ],
+      },
+    ],
+  },
+]
+
+const handleSave = async () => {
+  // 调用组件内部校验方法
+  const isValid = await formRef.value?.validate()
+  if (!isValid) {
+    console.warn('表单校验未通过')
+    return
+  }
+
+  const formData = formRef.value?.getFormData()
+  const { orderDetails, ...orderEntity } = formData || {}
+
+  const postData = {
+    OrderEntity: orderEntity,
+    OrderDetailsList: orderDetails || [],
+  }
+
+  console.log('保存的数据:', postData)
+  alert('数据已在控制台打印！')
+}
+
+const handleReset = () => {
+  formRef.value?.resetFields()
+}
+
+const handleLoadMock = () => {
+  const mockData = {
+    orderNo: 'ORD-20231001',
+    customerName: '张三',
+    orderDate: '2023-10-01',
+    orderDetails: [
+      {
+        j_Id: buildUUID(),
+        goodsName: '智能手机',
+        goodsType: 'electronics',
+        quantity: 2,
+        price: 4999,
+        isShipped: 1,
+        remark: '加急',
+      },
+    ],
+  }
+
+  // 设置表单数据
+  formRef.value?.setFormData(mockData)
+}
+</script>
+
+<style scoped>
+.demo-form-layout {
+  border: 1px solid var(--el-border-color-lighter);
+  padding: 16px;
+  border-radius: 4px;
+  position: relative;
+  width: 100%;
+  height: 400px;
+}
+</style>

package/docs/examples/input-map/basic.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <h3>基本用法</h3>
+    <j-input-map v-model="mapValue1" placeholder="请选择地图位置" />
+    <p>当前选中的位置: {{ mapValue1 }}</p>
+
+    <h3>只读模式</h3>
+    <j-input-map v-model="mapValue2" placeholder="只读位置" readonly />
+    <p>当前选中的位置: {{ mapValue2 }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const mapValue1 = ref('北京市东城区,116.4041750886573,39.909279981306405')
+const mapValue2 = ref('北京市东城区,116.4041750886573,39.909279981306405')
+</script>

package/docs/examples/vpanel/basic.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="hpanel-demo">
+    <div class="demo-item">
+      <p>基础用法</p>
+      <j-vpanel class="custom-panel">
+        <template #top>
+          <div class="top-content">Top Slot</div>
+        </template>
+        <div class="main-content">Default Slot (Main Content)</div>
+        <template #bottom>
+          <div class="bottom-content">Bottom Slot</div>
+        </template>
+      </j-vpanel>
+    </div>
+
+    <div class="demo-item">
+      <p>仅顶部和内容</p>
+      <j-vpanel class="custom-panel"> 
+        <template #top>
+          <div class="top-content">Top Slot</div>
+        </template>
+        <div class="main-content">Main Content</div>
+      </j-vpanel>
+    </div>
+
+    <div class="demo-item">
+      <p>仅内容和底部</p>
+      <j-vpanel class="custom-panel"> 
+        <div class="main-content">Main Content</div>
+          <template #bottom>
+          <div class="bottom-content">Bottom Slot</div>
+        </template>
+      </j-vpanel>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 示例代码无需额外逻辑
+</script>
+
+<style scoped>
+.hpanel-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.demo-item p {
+  margin: 0 0 12px;
+  font-size: 14px;
+  color: var(--j-color-text-2);
+  font-weight: 500;
+}
+
+.custom-panel {
+  border: 1px solid var(--j-color-border);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.top-content {
+  background-color: #e0f7fa; /* Light cyan */
+  padding: 12px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 100px;
+}
+
+.main-content {
+  background-color: #f0f4c3; /* Light lime */
+  padding: 12px 20px;
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bottom-content {
+  background-color: #ffecb3; /* Light amber */
+  padding: 12px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 100px;
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2simcode/ui",
-  "version": "0.0.132",
+  "version": "0.0.134",
   "description": "A Vue 3 UI Component Library",
   "type": "module",
   "main": "./dist/simcode-ui.umd.js",