基于Keystone 6的多品类B2B站点产品Schema设计咨询

问题背景 #

我用Next.js + Apollo Client搭建B2B批发站前端，后端采用KeystoneJS，基于Wes Bos的教程扩展。目前在产品录入环节遇到瓶颈：统一的Product列表无法适配不同品类产品，比如笔记本电脑和T恤的字段差异极大，仅Name、Price为公共字段，统一表单会显示大量无关字段。试过给每个品类创建独立Schema，但复杂度高且扩展性差。参考@Molomby的父类Product与子类关联方案后，发现新增品类需手动添加对应子类关联，依旧不够灵活。需要一套能灵活扩展的Keystone Schema设计方案，站点仅处理订单，不涉及在线交易。

现有Product代码 #

export const Product = list({
  fields: {
    name: text({ validation: { isRequired: true } }),
    slug: text({ isIndexed: 'unique', label: 'Pretty URL)'}),
    hotdeal: checkbox({ label: 'Hot Deal?' }),
    inventory: decimal(),
    price: integer(),
    category: relationship({
      ref: 'Category.product',
    }),
    photo: relationship({
      ref: 'ProductImage.product',
      many: true,
      ui: {
        displayMode: 'cards',
        cardFields: ['image', 'altText'],
        inlineCreate: { fields: ['image', 'altText'] },
        inlineEdit: { fields: ['image', 'altText'] },
      },
    }),
  }
});

疑问中的关联方案代码 #

export const Product = list({
  fields: {
    name: text({ validation: { isRequired: true } }),
    slug: text({ isIndexed: 'unique', label: 'Pretty URL)'}),
    hotdeal: checkbox({ label: 'Hot Deal?' }),
    inventory: decimal(),
    price: integer(),
    category: relationship({
      ref: 'Category.product',
    }),
    shirt: relationship({
      ref: 'ShirtProduct',
    }),
    laptop: relationship({
      ref: 'LaptopProduct',
    }),
    dogFood: relationship({
      ref: 'DogFoodProduct',
    }),
    photo: relationship({
      ref: 'ProductImage.product',
      many: true,
      ui: {
        displayMode: 'cards',
        cardFields: ['image', 'altText'],
        inlineCreate: { fields: ['image', 'altText'] },
        inlineEdit: { fields: ['image', 'altText'] },
      },
    }),
  }
});

解决方案 #

方案1：动态字段关联+品类映射（推荐） #

核心逻辑：公共字段放在主Product表，每个品类的专属字段单独建表，通过品类模型的配置动态关联，新增品类无需修改主表。

1. 定义Category表，绑定对应品类的专属字段模型：

export const Category = list({
  fields: {
    name: text({ validation: { isRequired: true } }),
    // 存储对应专属字段模型名称，如"ShirtFields"、"LaptopFields"
    fieldModel: text({ validation: { isRequired: true } }),
    products: relationship({ ref: 'Product.category', many: true })
  }
});

2. 创建品类专属字段表（示例：衬衫、笔记本）：

// 衬衫专属字段表
export const ShirtFields = list({
  fields: {
    size: select({ options: ['S', 'M', 'L', 'XL'] }),
    color: text(),
    material: text(),
    // 一对一关联主Product表
    product: relationship({ ref: 'Product.customFields', isRequired: true, unique: true })
  }
});

// 笔记本专属字段表
export const LaptopFields = list({
  fields: {
    ram: text({ label: 'RAM (GB)' }),
    storage: text({ label: 'Storage (GB)' }),
    processor: text(),
    product: relationship({ ref: 'Product.customFields', isRequired: true, unique: true })
  }
});

3. 修改主Product表，添加动态关联字段：

export const Product = list({
  fields: {
    name: text({ validation: { isRequired: true } }),
    slug: text({ isIndexed: 'unique', label: 'Pretty URL' }),
    hotdeal: checkbox({ label: 'Hot Deal?' }),
    inventory: decimal(),
    price: integer(),
    category: relationship({ ref: 'Category.products', isRequired: true }),
    // 动态关联到对应品类的专属字段表
    customFields: relationship({
      ref: ({ item }) => {
        if (!item?.category) return;
        return `${item.category.fieldModel}.product`;
      },
      ui: {
        createView: {
          fieldMode: ({ item }) => item?.category?.fieldModel ? 'edit' : 'hidden'
        }
      }
    }),
    photo: relationship({
      ref: 'ProductImage.product',
      many: true,
      ui: {
        displayMode: 'cards',
        cardFields: ['image', 'altText'],
        inlineCreate: { fields: ['image', 'altText'] },
        inlineEdit: { fields: ['image', 'altText'] },
      },
    }),
  },
  ui: {
    listView: {
      initialColumns: ['name', 'price', 'category', 'hotdeal']
    }
  }
});

优势：新增品类仅需创建专属字段表+在Category中配置模型名称，完全无需修改主Product表，扩展性极强。

方案2：JSON字段存储品类专属数据 #

如果品类字段结构简单，不需要Keystone的字段验证和专属UI组件，可直接用JSON字段存储专属数据：

export const Product = list({
  fields: {
    name: text({ validation: { isRequired: true } }),
    slug: text({ isIndexed: 'unique', label: 'Pretty URL' }),
    hotdeal: checkbox({ label: 'Hot Deal?' }),
    inventory: decimal(),
    price: integer(),
    category: relationship({ ref: 'Category.products', isRequired: true }),
    // JSON字段存储品类专属数据
    customData: json({ 
      label: 'Category Specific Data',
      ui: {
        // 可自定义组件优化编辑体验
        component: 'CustomJSONEditor'
      }
    }),
    photo: relationship({
      ref: 'ProductImage.product',
      many: true,
      ui: {
        displayMode: 'cards',
        cardFields: ['image', 'altText'],
        inlineCreate: { fields: ['image', 'altText'] },
        inlineEdit: { fields: ['image', 'altText'] },
      },
    }),
  }
});

优势：实现最简单，无需额外建表；劣势：无字段验证，后台编辑体验差，无法利用Keystone的筛选、排序功能。

方案3：条件字段显示控制 #

若品类数量较少，不想额外建表，可通过UI条件控制字段显示：

export const Product = list({
  fields: {
    name: text({ validation: { isRequired: true } }),
    slug: text({ isIndexed: 'unique', label: 'Pretty URL' }),
    hotdeal: checkbox({ label: 'Hot Deal?' }),
    inventory: decimal(),
    price: integer(),
    category: relationship({ ref: 'Category.products', isRequired: true }),
    // 衬衫专属字段：仅品类为衬衫时显示
    shirtSize: select({ 
      options: ['S', 'M', 'L', 'XL'],
      label: 'Size',
      ui: {
        hidden: ({ item }) => item?.category?.name !== 'Shirts'
      }
    }),
    shirtColor: text({
      label: 'Color',
      ui: {
        hidden: ({ item }) => item?.category?.name !== 'Shirts'
      }
    }),
    // 笔记本专属字段：仅品类为笔记本时显示
    laptopRam: text({
      label: 'RAM (GB)',
      ui: {
        hidden: ({ item }) => item?.category?.name !== 'Laptops'
      }
    }),
    laptopStorage: text({
      label: 'Storage (GB)',
      ui: {
        hidden: ({ item }) => item?.category?.name !== 'Laptops'
      }
    }),
    photo: relationship({
      ref: 'ProductImage.product',
      many: true,
      ui: {
        displayMode: 'cards',
        cardFields: ['image', 'altText'],
        inlineCreate: { fields: ['image', 'altText'] },
        inlineEdit: { fields: ['image', 'altText'] },
      },
    }),
  }
});

优势：无需额外建表，实现简单；劣势：新增品类需修改Product表添加字段，扩展性差，仅适合品类数量少的场景。

内容的提问来源于stack exchange，提问作者Benjamin Nathan Rudolph