@a2simcode/ui 0.0.46 → 0.0.47

package/docs/examples/layer/custom-buttons.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <j-button label="自定义按钮" @click="openLayer" />
+    <j-layer
+      ref="layerRef"
+      :buttons="customButtons"
+      :has-save-btn="false"
+      @ok="handleOk"
+      @cancel="handleCancel"
+    >
+      <div style="padding: 16px">
+        <p>这是自定义按钮的示例。</p>
+        <p>可以通过 buttons 属性配置自定义按钮。</p>
+        <p>设置 has-save-btn 为 false 可以隐藏默认的保存按钮。</p>
+      </div>
+    </j-layer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const layerRef = ref()
+
+const customButtons = [
+  {
+    label: '重置',
+    btnType: 'default',
+    onClick: () => {
+      console.log('点击重置')
+    },
+  },
+  {
+    label: '提交',
+    btnType: 'primary',
+    onClick: (showLoading: any, hideLoading: any) => {
+      showLoading('提交中...')
+      setTimeout(() => {
+        hideLoading()
+        layerRef.value.close()
+      }, 1000)
+    },
+  },
+]
+
+const openLayer = () => {
+  layerRef.value.open('自定义按钮示例', 'modal')
+}
+
+const handleOk = (showLoading: any, hideLoading: any) => {
+  showLoading('保存中...')
+  setTimeout(() => {
+    hideLoading()
+    layerRef.value.close()
+  }, 1000)
+}
+
+const handleCancel = () => {
+  layerRef.value.close()
+}
+</script>

package/docs/examples/layer/drawer.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <j-button label="打开抽屉" @click="openLayer" />
+    <j-layer ref="layerRef" @ok="handleOk" @cancel="handleCancel">
+      <div style="padding: 16px">
+        <h3>抽屉模式示例</h3>
+        <p>抽屉从右侧滑出，适合展示详情或表单。</p>
+        <div style="margin-top: 20px">
+          <p>可以在抽屉中放置任意内容。</p>
+          <p>支持自定义按钮和回调处理。</p>
+        </div>
+      </div>
+    </j-layer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const layerRef = ref()
+
+const openLayer = () => {
+  layerRef.value.open('抽屉示例', 'drawer')
+}
+
+const handleOk = (showLoading: any, hideLoading: any) => {
+  showLoading('提交中...')
+  setTimeout(() => {
+    hideLoading()
+    layerRef.value.close()
+  }, 1000)
+}
+
+const handleCancel = () => {
+  layerRef.value.close()
+}
+</script>

package/docs/examples/layer/full.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <j-button label="打开全屏" @click="openLayer" />
+    <j-layer ref="layerRef" @ok="handleOk" @cancel="handleCancel">
+      <div style="padding: 16px">
+        <h3>全屏模式示例</h3>
+        <p>全屏模式会占据整个浏览器窗口。</p>
+        <p>适用于需要大量展示内容的场景。</p>
+        <div style="margin-top: 20px">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+          <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        </div>
+      </div>
+    </j-layer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const layerRef = ref()
+
+const openLayer = () => {
+  layerRef.value.open('全屏示例', 'full')
+}
+
+const handleOk = (showLoading: any, hideLoading: any) => {
+  showLoading('保存中...')
+  setTimeout(() => {
+    hideLoading()
+    layerRef.value.close()
+  }, 1500)
+}
+
+const handleCancel = () => {
+  layerRef.value.close()
+}
+</script>

package/docs/examples/layer/modal.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <j-button label="打开弹窗" @click="openLayer" />
+    <j-layer ref="layerRef" :width="800" :height="500" @ok="handleOk" @cancel="handleCancel">
+      <div style="padding: 16px">
+        <p>这是弹窗模式的示例。</p>
+        <p>可以通过 width 和 height 属性设置弹窗大小。</p>
+        <p>弹窗支持拖拽和缩放功能。</p>
+      </div>
+    </j-layer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const layerRef = ref()
+
+const openLayer = () => {
+  layerRef.value.open('弹窗示例', 'modal')
+}
+
+const handleOk = (showLoading: any, hideLoading: any) => {
+  showLoading('处理中...')
+  setTimeout(() => {
+    hideLoading()
+    layerRef.value.close()
+  }, 1000)
+}
+
+const handleCancel = () => {
+  layerRef.value.close()
+}
+</script>

package/docs/examples/layer/steps.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <j-button label="打开步骤弹窗" @click="openLayer" />
+    <j-layer
+      ref="layerRef"
+      :is-step="true"
+      :steps="['基本信息', '详细配置', '确认提交']"
+      :validate-steps="validateSteps"
+      @ok="handleOk"
+      @cancel="handleCancel"
+    >
+      <div style="padding: 16px">
+        <p>这是带步骤条的 Layer 组件示例。</p>
+        <p>适用于多步骤表单或向导式流程。</p>
+        <p>可以配置步骤校验函数。</p>
+      </div>
+    </j-layer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const layerRef = ref()
+
+const openLayer = () => {
+  layerRef.value.open('步骤弹窗示例', 'modal')
+}
+
+const validateSteps = (step: number) => {
+  console.log('校验步骤:', step)
+  return true
+}
+
+const handleOk = (showLoading: any, hideLoading: any) => {
+  showLoading('提交中...')
+  setTimeout(() => {
+    hideLoading()
+    layerRef.value.close()
+  }, 1000)
+}
+
+const handleCancel = () => {
+  layerRef.value.close()
+}
+</script>

package/docs/examples/layer-form/basic.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <!-- j-form 通过 schema 渲染表单字段，j-layer-form 作为 schema 中的一项 -->
+    <j-form ref="formRef" :schema="schema" :config="formConfig" />
+
+    <div v-if="formData" style="margin-top: 16px">
+      <h4>表单数据：</h4>
+      <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { SchemaConfig } from '@simcode/ui'
+
+const formRef = ref()
+const formData = ref<any>(null)
+
+// j-form 的表单配置
+const formConfig = {
+  labelWidth: 100,
+  labelPosition: 'right',
+  size: 'default',
+  gutter: 16,
+  span: 24,
+}
+
+// j-form 的 schema，j-layer-form 作为其中的一项
+const schema = ref<SchemaConfig[]>([
+  {
+    type: 'j-layer-form',
+    config: {
+      label: '用户信息',
+      layerLabel: '用户信息',
+      layerWidth: 600,
+      layerHeight: 400,
+    },
+    // j-layer-form 弹窗内的表单字段通过 children 配置
+    children: [
+      {
+        id: 'name',
+        type: 'j-input',
+        config: {
+          label: '姓名',
+          field: 'name',
+          placeholder: '请输入姓名',
+          defaultValue: '',
+        },
+      },
+      {
+        id: 'age',
+        type: 'j-number',
+        config: {
+          label: '年龄',
+          field: 'age',
+          placeholder: '请输入年龄',
+          defaultValue: 0,
+          min: 0,
+          max: 150,
+        },
+      },
+      {
+        id: 'email',
+        type: 'j-input',
+        config: {
+          label: '邮箱',
+          field: 'email',
+          placeholder: '请输入邮箱',
+          defaultValue: '',
+        },
+      },
+    ],
+  },
+])
+</script>

package/docs/examples/layer-form/config.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <!-- j-form 通过 schema 渲染表单字段，j-layer-form 作为 schema 中的一项 -->
+    <j-form :schema="schema" :config="formConfig" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { SchemaConfig } from '@simcode/ui'
+
+// j-form 的表单配置
+const formConfig = {
+  labelWidth: 100,
+  labelPosition: 'right',
+  size: 'default',
+  gutter: 16,
+  span: 24,
+}
+
+// j-form 的 schema，j-layer-form 作为其中的一项
+const schema = ref<SchemaConfig[]>([
+  {
+    type: 'j-layer-form',
+    config: {
+      label: '表单配置示例',
+      layerLabel: '表单配置示例',
+      // j-layer-form 的表单配置（会覆盖 j-form 的配置）
+      formConfig: {
+        labelWidth: 120,
+        labelPosition: 'left',
+        size: 'default',
+        gutter: 20,
+        span: 12,
+      },
+    },
+    // j-layer-form 弹窗内的表单字段通过 children 配置
+    children: [
+      {
+        id: 'name',
+        type: 'j-input',
+        config: {
+          label: '姓名',
+          field: 'name',
+          placeholder: '请输入姓名',
+          defaultValue: '',
+        },
+      },
+      {
+        id: 'age',
+        type: 'j-number',
+        config: {
+          label: '年龄',
+          field: 'age',
+          placeholder: '请输入年龄',
+          defaultValue: 0,
+        },
+      },
+      {
+        id: 'email',
+        type: 'j-input',
+        config: {
+          label: '邮箱',
+          field: 'email',
+          placeholder: '请输入邮箱',
+          defaultValue: '',
+        },
+      },
+      {
+        id: 'phone',
+        type: 'j-input',
+        config: {
+          label: '电话',
+          field: 'phone',
+          placeholder: '请输入电话',
+          defaultValue: '',
+        },
+      },
+    ],
+  },
+])
+</script>

package/docs/examples/layer-form/size.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <!-- j-form 通过 schema 渲染表单字段，j-layer-form 作为 schema 中的一项 -->
+    <j-form :schema="schema" :config="formConfig" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { SchemaConfig } from '@simcode/ui'
+
+const formConfig = {
+  labelWidth: 100,
+  labelPosition: 'right',
+  size: 'default',
+  gutter: 16,
+  span: 24,
+}
+
+// j-form 的 schema，j-layer-form 作为其中的一项
+const schema = ref<SchemaConfig[]>([
+  {
+    type: 'j-layer-form',
+    config: {
+      label: '大尺寸弹窗',
+      layerLabel: '大尺寸弹窗',
+      layerWidth: 800,
+      layerHeight: 500,
+    },
+    // j-layer-form 弹窗内的表单字段通过 children 配置
+    children: [
+      {
+        id: 'title',
+        type: 'j-input',
+        config: {
+          label: '标题',
+          field: 'title',
+          placeholder: '请输入标题',
+          defaultValue: '',
+        },
+      },
+      {
+        id: 'description',
+        type: 'j-input',
+        config: {
+          label: '描述',
+          field: 'description',
+          placeholder: '请输入描述',
+          defaultValue: '',
+          type: 'textarea',
+          rows: 4,
+        },
+      },
+      {
+        id: 'category',
+        type: 'j-select',
+        config: {
+          label: '分类',
+          field: 'category',
+          placeholder: '请选择分类',
+          defaultValue: '',
+          options: [
+            { label: '技术', value: 'tech' },
+            { label: '产品', value: 'product' },
+            { label: '设计', value: 'design' },
+          ],
+        },
+      },
+    ],
+  },
+])
+</script>

package/docs/examples/layout/basic.vue

@@ -0,0 +1,36 @@
+<template>
+  <div style="height: 500px; border: 1px solid #ddd">
+    <j-layout>
+      <template #left>
+        <div style="padding: 20px; background: #f0f2f5; height: 100%">
+          <h3>左侧区域</h3>
+          <p>可拖动调整宽度</p>
+        </div>
+      </template>
+      <template #top>
+        <div style="padding: 10px 20px; background: #e6f4ff; height: 100%">
+          <h4>顶部区域</h4>
+        </div>
+      </template>
+      <template #default>
+        <div style="padding: 20px; height: 100%; overflow: auto">
+          <h3>主体内容区域</h3>
+          <p>这是中间的主体内容区域</p>
+          <p>Layout 组件支持上下左右四个区域的布局</p>
+          <p>每个区域都可以独立配置大小和是否允许拖拽调整</p>
+        </div>
+      </template>
+      <template #right>
+        <div style="padding: 20px; background: #f0f2f5; height: 100%">
+          <h3>右侧区域</h3>
+          <p>可拖动调整宽度</p>
+        </div>
+      </template>
+      <template #bottom>
+        <div style="padding: 10px 20px; background: #fffbe6; height: 100%">
+          <h4>底部区域</h4>
+        </div>
+      </template>
+    </j-layout>
+  </div>
+</template>

package/docs/examples/layout/custom-size.vue

@@ -0,0 +1,50 @@
+<template>
+  <div style="height: 400px; border: 1px solid #ddd">
+    <j-layout :left="300" :top="80" :right="200" :bottom="80">
+      <template #left>
+        <div style="padding: 20px; background: #f0f2f5; height: 100%">
+          <h4>左侧宽度: 300px</h4>
+          <p>通过 :left="300" 设置</p>
+        </div>
+      </template>
+      <template #top>
+        <div
+          style="
+            padding: 15px 20px;
+            background: #e6f4ff;
+            height: 100%;
+            display: flex;
+            align-items: center;
+          "
+        >
+          <h4 style="margin: 0">顶部高度: 80px (通过 :top="80" 设置)</h4>
+        </div>
+      </template>
+      <template #default>
+        <div style="padding: 20px; height: 100%; overflow: auto">
+          <h3>自定义尺寸示例</h3>
+          <p>可以通过 left、right、top、bottom 属性自定义各个区域的初始大小</p>
+        </div>
+      </template>
+      <template #right>
+        <div style="padding: 20px; background: #f0f2f5; height: 100%">
+          <h4>右侧宽度: 200px</h4>
+          <p>通过 :right="200" 设置</p>
+        </div>
+      </template>
+      <template #bottom>
+        <div
+          style="
+            padding: 15px 20px;
+            background: #fffbe6;
+            height: 100%;
+            display: flex;
+            align-items: center;
+          "
+        >
+          <h4 style="margin: 0">底部高度: 80px (通过 :bottom="80" 设置)</h4>
+        </div>
+      </template>
+    </j-layout>
+  </div>
+</template>

package/docs/examples/layout/disable-move.vue

@@ -0,0 +1,37 @@
+<template>
+  <div style="height: 400px; border: 1px solid #ddd">
+    <j-layout :left-move="false" :right-move="false" :top-move="false" :bottom-move="false">
+      <template #left>
+        <div style="padding: 20px; background: #f0f2f5; height: 100%">
+          <h4>左侧区域</h4>
+          <p>禁用拖拽</p>
+        </div>
+      </template>
+      <template #top>
+        <div style="padding: 10px 20px; background: #e6f4ff; height: 100%">
+          <h4>顶部区域 (禁用拖拽)</h4>
+        </div>
+      </template>
+      <template #default>
+        <div style="padding: 20px; height: 100%; overflow: auto">
+          <h3>禁用拖拽示例</h3>
+          <p>
+            通过设置 leftMove、rightMove、topMove、bottomMove 为 false 可以禁用对应区域的拖拽功能
+          </p>
+          <p>当前示例中，所有区域都禁用了拖拽，尺寸保持固定</p>
+        </div>
+      </template>
+      <template #right>
+        <div style="padding: 20px; background: #f0f2f5; height: 100%">
+          <h4>右侧区域</h4>
+          <p>禁用拖拽</p>
+        </div>
+      </template>
+      <template #bottom>
+        <div style="padding: 10px 20px; background: #fffbe6; height: 100%">
+          <h4>底部区域 (禁用拖拽)</h4>
+        </div>
+      </template>
+    </j-layout>
+  </div>
+</template>

package/docs/examples/layout/hide-mid-when-narrow.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="layout-demo">
+    <div class="demo-tip">
+      <p style="margin: 0 0 10px 0; color: #1890ff; font-weight: bold">
+        💡 尝试调整浏览器窗口宽度观察效果
+      </p>
+      <p style="margin: 0; color: #666; font-size: 14px">
+        当容器宽度小于 500px（左200px + 右200px +
+        mid最小宽度100px）时，中间区域会自动隐藏，左右区域平分剩余宽度
+      </p>
+    </div>
+    <j-layout
+      :left="200"
+      :right="200"
+      :mid-min-width="100"
+      :hide-mid-when-narrow="true"
+      :left-move="false"
+      :right-move="false"
+    >
+      <template #left>
+        <div class="demo-block left">
+          <h3>左侧区域</h3>
+          <p>宽度: 200px</p>
+          <p style="color: #1890ff; margin-top: 10px">
+            当中间区域隐藏时，如果有右侧区域，则左右各占 50%
+          </p>
+        </div>
+      </template>
+      <template #default>
+        <div class="demo-block mid">
+          <h3>中间区域</h3>
+          <p>最小宽度: 100px</p>
+          <p style="color: #52c41a; margin-top: 10px">
+            当容器总宽度 &lt; (左侧宽度 + 右侧宽度 + mid最小宽度) 时，此区域会自动隐藏
+          </p>
+        </div>
+      </template>
+      <template #right>
+        <div class="demo-block right">
+          <h3>右侧区域</h3>
+          <p>宽度: 200px</p>
+          <p style="color: #1890ff; margin-top: 10px">
+            当中间区域隐藏时，如果有左侧区域，则左右各占 50%
+          </p>
+        </div>
+      </template>
+    </j-layout>
+  </div>
+</template>
+
+<style scoped>
+.layout-demo {
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.demo-tip {
+  padding: 15px;
+  background: #f0f9ff;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.layout-demo :deep(.j-layout) {
+  height: 500px;
+}
+
+.demo-block {
+  padding: 20px;
+  height: 100%;
+  overflow: auto;
+}
+
+.demo-block.left {
+  background: #e6f7ff;
+}
+
+.demo-block.mid {
+  background: #f6ffed;
+}
+
+.demo-block.right {
+  background: #fff7e6;
+}
+
+.demo-block h3 {
+  margin: 0 0 10px 0;
+  color: #333;
+}
+
+.demo-block p {
+  margin: 5px 0;
+  color: #666;
+  font-size: 14px;
+}
+</style>