label 怎么显示在左边-columns 中的一个 label在左边 其他的都正常是垂直的

[starplatinum3]

label 怎么显示在左边

columns 中的一个 label在左边 其他的都正常是垂直的
const columns: ProFormColumnsType[] = [
{
title: '用户名',
dataIndex: 'username',
valueType: 'text',
formItemProps: {
rules: [{ required: true, message: '请输入用户名' }],
},
},
{
title: '邮箱',
dataIndex: 'email',
valueType: 'text',
formItemProps: {
rules: [{ required: true, message: '请输入邮箱' }],
},
},
{
title: '手机号',
dataIndex: 'phone',
valueType: 'text',
},
{
title: '描述',
dataIndex: 'description',
valueType: 'textarea',
},
];

不行

import type { ProFormColumnsType } from '@ant-design/pro-components';
import { BetaSchemaForm } from '@ant-design/pro-components';
import { Divider, Row, Col } from 'antd';
import { useState } from 'react';

type FormDataType = {
  username: string;
  email: string;
  phone: string;
  description: string;
};

/**
 * 测试 6：单列 Label 左对齐 + 其他字段垂直排列
 * 核心：一个 col 中放置 label，其他所有字段在右边垂直排列
 * 实现方式：labelCol 占据左边，wrapperCol 占据右边，所有字段垂直堆叠
 */
const columns: ProFormColumnsType<FormDataType>[] = [
  {
    title: '用户名',
    dataIndex: 'username',
    valueType: 'text',
    formItemProps: {
       labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      rules: [{ required: true, message: '请输入用户名' }],
    },
    colProps: {
      xs: 24,
      sm: 24,
      md: 24,
      lg: 24,
    },
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    valueType: 'text',
    formItemProps: {
      rules: [{ required: true, message: '请输入邮箱' }],
    },
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    valueType: 'text',
  },
  {
    title: '描述',
    dataIndex: 'description',
    valueType: 'textarea',
  },
];

export const FormLayout6SingleColLabel = () => {
  const [labelWidth, setLabelWidth] = useState<number>(6);

  return (
    <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
      <div style={{ background: 'white', padding: '24px', borderRadius: '8px' }}>
        <h2>测试 6：单列 Label 左对齐 + 其他字段垂直排列</h2>
        <p style={{ color: '#666', marginBottom: '24px' }}>
          在左边单独一列放置 Label（左对齐），右边所有字段垂直排列。Label 宽度可调整。
        </p>

        <div style={{ background: '#fff7e6', padding: '12px', borderRadius: '4px', marginBottom: '24px', borderLeft: '4px solid #faad14' }}>
          <strong>调整 Label 列宽：</strong>
          <div style={{ marginTop: '8px' }}>
            <label>
              <input
                type="range"
                min="4"
                max="10"
                value={labelWidth}
                onChange={(e) => setLabelWidth(parseInt(e.target.value))}
                style={{ verticalAlign: 'middle', marginRight: '12px', width: '200px' }}
              />
              {labelWidth} (共24列)
            </label>
          </div>
        </div>

        <div style={{ background: '#f0f2f5', padding: '12px', borderRadius: '4px', marginBottom: '16px' }}>
          <strong>当前配置：</strong>
          <pre style={{ margin: '8px 0 0 0', fontSize: '12px' }}>
{`layout="horizontal"
labelCol={{ span: ${labelWidth} }}
wrapperCol={{ span: ${24 - labelWidth} }}
labelAlign="left"

说明：
- Label 列占 ${labelWidth} 份，Label 左对齐
- 字段列占 ${24 - labelWidth} 份，字段垂直排列`}
          </pre>
        </div>

        <Divider />

        <h3 style={{ marginTop: '24px' }}>实时预览</h3>
        <BetaSchemaForm<FormDataType>
          // layout="horizontal"
          // labelCol={{ span: labelWidth }}
          // wrapperCol={{ span: 24 - labelWidth }}
          // labelAlign="left"
          columns={columns}
          onFinish={async (values) => {
            console.log('Form values:', values);
            alert('表单提交成功！\n' + JSON.stringify(values, null, 2));
          }}
          submitter={{
            searchConfig: {
              submitText: '提交',
              resetText: '重置',
            },
          }}
        />
      </div>

      <div style={{ marginTop: '24px', background: 'white', padding: '24px', borderRadius: '8px' }}>
        <h3>💡 布局说明</h3>
        <Row gutter={[16, 16]}>
          <Col span={12}>
            <h4>特点</h4>
            <ul style={{ marginLeft: '20px' }}>
              <li>Label 独占左边一列，左对齐</li>
              <li>所有字段在右边垂直排列</li>
              <li>Label 宽度灵活可调</li>
              <li>适合表单字段较多的场景</li>
            </ul>
          </Col>
          <Col span={12}>
            <h4>应用场景</h4>
            <ul style={{ marginLeft: '20px' }}>
              <li>📝 复杂表单页面</li>
              <li>🏢 企业管理系统</li>
              <li>⚙️ 配置面板</li>
              <li>📊 数据录入表单</li>
            </ul>
          </Col>
        </Row>
      </div>
    </div>
  );
};

export default FormLayout6SingleColLabel;