antd-fields: 单国语言项目快捷 columns 解决方案
一个针对单国语言项目的 columns 快捷实现方案
01 安装 next-ant-fields
为什么不是
next-ant-columns,因为这个老项目使用了,不方便实现,未来有可能换成这个名字
yarn add @jswork/next-ant-fields02 建议 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);