@a2simcode/ui 0.0.133 → 0.0.134

package/docs/examples/form/init.vue

@@ -1,76 +1,76 @@
-<template>
-  <div>
-    <j-form ref="formRef" :config="formConfig" />
-    <div style="margin-top: 16px; padding-left: 100px">
-      <j-button type="primary" label="init 精简表单" @click="handleInitSimple"></j-button>
-      <j-button style="margin-left: 8px" label="init 完整表单" @click="handleInitFull"></j-button>
-      <j-button style="margin-left: 8px" label="获取数据" @click="handleGetFormData"></j-button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive } from 'vue'
-
-const formRef = ref()
-
-const formConfig = reactive({
-  labelWidth: 100,
-  labelPosition: 'right',
-  size: 'default',
-  gutter: 16,
-  span: 24,
-})
-
-const simpleSchema = [
-  {
-    type: 'j-input',
-    config: {
-      label: '用户名',
-      field: 'username',
-      placeholder: '请输入用户名',
-      rule: [{ required: true, message: '请输入用户名' }],
-    },
-  },
-  {
-    type: 'j-number',
-    config: {
-      label: '年龄',
-      field: 'age',
-      placeholder: '请输入年龄',
-      min: 0,
-      max: 150,
-    },
-  },
-]
-
-const fullSchema = [
-  ...simpleSchema,
-  {
-    type: 'j-select',
-    config: {
-      label: '状态',
-      field: 'status',
-      placeholder: '请选择',
-      options: [
-        { label: '启用', value: 1 },
-        { label: '停用', value: 0 },
-      ],
-    },
-  },
-]
-
-const schema = fullSchema
-
-const handleInitSimple = async () => {
-  await formRef.value.init(simpleSchema, { username: '张三', age: 18 })
-}
-
-const handleInitFull = async () => {
-  await formRef.value.init(fullSchema, { username: '李四', age: 28, status: 1 })
-}
-
-const handleGetFormData = () => {
-  console.log(formRef.value.getFormData(), 'getFormData')
-}
-</script>
+<template>
+  <div>
+    <j-form ref="formRef" :config="formConfig" />
+    <div style="margin-top: 16px; padding-left: 100px">
+      <j-button type="primary" label="init 精简表单" @click="handleInitSimple"></j-button>
+      <j-button style="margin-left: 8px" label="init 完整表单" @click="handleInitFull"></j-button>
+      <j-button style="margin-left: 8px" label="获取数据" @click="handleGetFormData"></j-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+const formRef = ref()
+
+const formConfig = reactive({
+  labelWidth: 100,
+  labelPosition: 'right',
+  size: 'default',
+  gutter: 16,
+  span: 24,
+})
+
+const simpleSchema = [
+  {
+    type: 'j-input',
+    config: {
+      label: '用户名',
+      field: 'username',
+      placeholder: '请输入用户名',
+      rule: [{ required: true, message: '请输入用户名' }],
+    },
+  },
+  {
+    type: 'j-number',
+    config: {
+      label: '年龄',
+      field: 'age',
+      placeholder: '请输入年龄',
+      min: 0,
+      max: 150,
+    },
+  },
+]
+
+const fullSchema = [
+  ...simpleSchema,
+  {
+    type: 'j-select',
+    config: {
+      label: '状态',
+      field: 'status',
+      placeholder: '请选择',
+      options: [
+        { label: '启用', value: 1 },
+        { label: '停用', value: 0 },
+      ],
+    },
+  },
+]
+
+const schema = fullSchema
+
+const handleInitSimple = async () => {
+  await formRef.value.init(simpleSchema, { username: '张三', age: 18 })
+}
+
+const handleInitFull = async () => {
+  await formRef.value.init(fullSchema, { username: '李四', age: 28, status: 1 })
+}
+
+const handleGetFormData = () => {
+  console.log(formRef.value.getFormData(), 'getFormData')
+}
+</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/guid/basic.vue

@@ -1,10 +1,10 @@
-<template>
-  <j-guid v-model="value" />
-  <p v-if="value" style="margin-top: 12px; color: #606266">生成的 UUID: {{ value }}</p>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value = ref('')
-</script>
+<template>
+  <j-guid v-model="value" />
+  <p v-if="value" style="margin-top: 12px; color: #606266">生成的 UUID: {{ value }}</p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+</script>

package/docs/examples/guid/size.vue

@@ -1,13 +1,13 @@
-<template>
-  <div style="display: flex; flex-direction: column; gap: 12px">
-    <j-guid v-model="value" size="large" style="width: 300px" />
-    <j-guid v-model="value" style="width: 300px" />
-    <j-guid v-model="value" size="small" style="width: 300px" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value = ref('')
-</script>
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px">
+    <j-guid v-model="value" size="large" style="width: 300px" />
+    <j-guid v-model="value" style="width: 300px" />
+    <j-guid v-model="value" size="small" style="width: 300px" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+</script>

package/docs/examples/hpanel/basic.vue

@@ -1,79 +1,79 @@
-<template>
-  <div class="hpanel-demo">
-    <div class="demo-item">
-      <p>基础用法</p>
-      <j-hpanel class="custom-panel">
-        <template #left>
-          <div class="side-content">Left Slot</div>
-        </template>
-        <div class="main-content">Default Slot (Main Content)</div>
-        <template #right>
-          <div class="side-content">Right Slot</div>
-        </template>
-      </j-hpanel>
-    </div>
-
-    <div class="demo-item">
-      <p>仅左侧和内容</p>
-      <j-hpanel class="custom-panel">
-        <template #left>
-          <div class="side-content">Left</div>
-        </template>
-        <div class="main-content">Main Content</div>
-      </j-hpanel>
-    </div>
-
-    <div class="demo-item">
-      <p>仅内容和右侧</p>
-      <j-hpanel class="custom-panel">
-        <div class="main-content">Main Content</div>
-        <template #right>
-          <div class="side-content">Right</div>
-        </template>
-      </j-hpanel>
-    </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;
-}
-
-.side-content {
-  background-color: var(--j-color-fill-2);
-  padding: 12px 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 100px;
-}
-
-.main-content {
-  background-color: var(--j-color-bg-2);
-  padding: 12px 20px;
-  height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>
+<template>
+  <div class="hpanel-demo">
+    <div class="demo-item">
+      <p>基础用法</p>
+      <j-hpanel class="custom-panel">
+        <template #left>
+          <div class="side-content">Left Slot</div>
+        </template>
+        <div class="main-content">Default Slot (Main Content)</div>
+        <template #right>
+          <div class="side-content">Right Slot</div>
+        </template>
+      </j-hpanel>
+    </div>
+
+    <div class="demo-item">
+      <p>仅左侧和内容</p>
+      <j-hpanel class="custom-panel">
+        <template #left>
+          <div class="side-content">Left</div>
+        </template>
+        <div class="main-content">Main Content</div>
+      </j-hpanel>
+    </div>
+
+    <div class="demo-item">
+      <p>仅内容和右侧</p>
+      <j-hpanel class="custom-panel">
+        <div class="main-content">Main Content</div>
+        <template #right>
+          <div class="side-content">Right</div>
+        </template>
+      </j-hpanel>
+    </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;
+}
+
+.side-content {
+  background-color: var(--j-color-fill-2);
+  padding: 12px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 100px;
+}
+
+.main-content {
+  background-color: var(--j-color-bg-2);
+  padding: 12px 20px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

package/docs/examples/icon/basic.vue

@@ -1,9 +1,9 @@
-<template>
-  <div style="display: flex; gap: 20px; align-items: center">
-    <j-icon icon="mdi:home" />
-    <j-icon icon="mdi:account" color="#409eff" />
-    <j-icon icon="mdi:check-circle" color="#67c23a" />
-    <j-icon icon="mdi:alert-circle" color="#f56c6c" />
-    <j-icon icon="mdi:information" color="#909399" />
-  </div>
-</template>
+<template>
+  <div style="display: flex; gap: 20px; align-items: center">
+    <j-icon icon="mdi:home" />
+    <j-icon icon="mdi:account" color="#409eff" />
+    <j-icon icon="mdi:check-circle" color="#67c23a" />
+    <j-icon icon="mdi:alert-circle" color="#f56c6c" />
+    <j-icon icon="mdi:information" color="#909399" />
+  </div>
+</template>

package/docs/examples/icon/rotate-flip.vue

@@ -1,9 +1,9 @@
-<template>
-  <div style="display: flex; gap: 20px; align-items: center; font-size: 24px">
-    <j-icon icon="mdi:send" :rotate="45" />
-    <j-icon icon="mdi:send" :rotate="90" />
-    <j-icon icon="mdi:send" :rotate="180" />
-    <j-icon icon="mdi:send" flip="horizontal" />
-    <j-icon icon="mdi:send" flip="vertical" />
-  </div>
-</template>
+<template>
+  <div style="display: flex; gap: 20px; align-items: center; font-size: 24px">
+    <j-icon icon="mdi:send" :rotate="45" />
+    <j-icon icon="mdi:send" :rotate="90" />
+    <j-icon icon="mdi:send" :rotate="180" />
+    <j-icon icon="mdi:send" flip="horizontal" />
+    <j-icon icon="mdi:send" flip="vertical" />
+  </div>
+</template>

package/docs/examples/icon/size.vue

@@ -1,7 +1,7 @@
-<template>
-  <div style="display: flex; gap: 20px; align-items: center">
-    <j-icon icon="mdi:home" :size="16" />
-    <j-icon icon="mdi:home" :size="24" />
-    <j-icon icon="mdi:home" :size="32" />
-  </div>
-</template>
+<template>
+  <div style="display: flex; gap: 20px; align-items: center">
+    <j-icon icon="mdi:home" :size="16" />
+    <j-icon icon="mdi:home" :size="24" />
+    <j-icon icon="mdi:home" :size="32" />
+  </div>
+</template>

package/docs/examples/input/basic.vue

@@ -1,10 +1,10 @@
-<template>
-  <j-input v-model="value" placeholder="请输入内容" style="width: 300px" />
-  <p v-if="value" style="margin-top: 12px; color: #606266">输入的内容: {{ value }}</p>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value = ref('')
-</script>
+<template>
+  <j-input v-model="value" placeholder="请输入内容" style="width: 300px" />
+  <p v-if="value" style="margin-top: 12px; color: #606266">输入的内容: {{ value }}</p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+</script>

package/docs/examples/input/clearable.vue

@@ -1,12 +1,12 @@
-<template>
-  <div style="display: flex; flex-direction: column; gap: 12px">
-    <j-input v-model="value1" clearable placeholder="可清除的输入框" style="width: 300px" />
-    <p v-if="value1" style="color: #606266">输入的内容: {{ value1 }}</p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref('')
-</script>
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px">
+    <j-input v-model="value1" clearable placeholder="可清除的输入框" style="width: 300px" />
+    <p v-if="value1" style="color: #606266">输入的内容: {{ value1 }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('')
+</script>

package/docs/examples/input/disabled.vue

@@ -1,6 +1,6 @@
-<template>
-  <div style="display: flex; flex-direction: column; gap: 12px">
-    <j-input disabled placeholder="禁用状态" style="width: 300px" />
-    <j-input readonly model-value="只读内容" style="width: 300px" />
-  </div>
-</template>
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px">
+    <j-input disabled placeholder="禁用状态" style="width: 300px" />
+    <j-input readonly model-value="只读内容" style="width: 300px" />
+  </div>
+</template>