antd-fields: 单国语言项目快捷 columns 解决方案

一个针对单国语言项目的 columns 快捷实现方案

01 安装 next-ant-fields

为什么不是 next-ant-columns,因为这个老项目使用了,不方便实现,未来有可能换成这个名字

yarn add @jswork/next-ant-fields

02 建议 columns.yml

在 vite 里插件支持 yml,看这里 vite: 使用 yml 放项目中作为 db

# 推荐位置:
YOUR_PROJECT/src/assets/data/columns.yml


### 
# 示例配置
# @Author: aric 1290657123@qq.com
# @Date: 2025-10-30 09:51:55
# @LastEditors: aric 1290657123@qq.com
# @LastEditTime: 2025-10-30 09:57:49
###
default:
  id: ID
  title: 标题
  description: 描述
  subtitle: 副标题
  tags: 标签
  status: 状态
  action: 操作
  content: 内容
  ref_links: 参考链接
  code: 值
  name: 名称
  keywords: 关键词
  start_time: 开始时间
  end_time: 结束时间
  created_at: 创建时间
  updated_at: 更新时间

03 示例配置

一个列表页面

import { StatisticPanel } from '@/shared/components/statistic-panel';

import ResList from '@/shared/base/res-list';
import { AcTableExtras, AcTableExtraSearch } from '@jswork/antd-components';
import { CellFns } from './ui/_cells.tsx';

export default () => {
  const extraView = (
    <div className="x-2">
      <AcTableExtraSearch name="posts" />
      <AcTableExtras name="posts" />
    </div>
  );

  const columns = nx.antFields(
    [
      { key: 'id', width: 20 },
      { key: 'title', width: '35%' },
      { key: 'subtitle' },
      { key: 'status' },
      { key: 'action', width: 180 }
    ],
    { context: CellFns }
  );

  return <ResList extra={extraView} name="posts" columns={columns} header={<StatisticPanel />} />;
};

04 配置数据文件

配置 columns 文件

import '@jswork/next-ant-fields';

import columns from '@/assets/data/columns.yml';
nx.set(nx, 'cfg.next-ant-fields-schema.@', columns.default);
next antd column fields