feat(history): add detailed edit history tracking and display panel

Record field-level before/after changes in wiki_edit_logs Replace EditMeta with EditHistoryPanel on entity detail pages Update detail views to use a sidebar layout for history
2026-05-01 07:59:29 +08:00
parent 14b13e479d
commit 60cad3f5e8
9 changed files with 866 additions and 197 deletions
--- a/backend/db/schema.sql
+++ b/backend/db/schema.sql
@@ -262,9 +262,12 @@ CREATE TABLE IF NOT EXISTS wiki_edit_logs (
  entity_id integer NOT NULL,
  action text NOT NULL CHECK (action IN ('create', 'update', 'delete')),
  user_id integer REFERENCES users(id) ON DELETE SET NULL,
+  changes jsonb NOT NULL DEFAULT '[]'::jsonb,
  created_at timestamptz NOT NULL DEFAULT now()
 );

+ALTER TABLE wiki_edit_logs ADD COLUMN IF NOT EXISTS changes jsonb NOT NULL DEFAULT '[]'::jsonb;
+
 CREATE INDEX IF NOT EXISTS wiki_edit_logs_entity_idx
  ON wiki_edit_logs(entity_type, entity_id, created_at DESC);

--- a/backend/src/queries.ts
+++ b/backend/src/queries.ts
@@ -74,6 +74,42 @@ type HabitatPayload = {

 type ValidationError = Error & { statusCode: number };
 type EditAction = 'create' | 'update' | 'delete';
+type EditChange = {
+  label: string;
+  before: string;
+  after: string;
+};
+type EditHistoryEntry = {
+  action: EditAction;
+  changes: EditChange[];
+  createdAt: Date;
+  user: { id: number; displayName: string } | null;
+};
+type PokemonChangeSource = {
+  name: string;
+  environment: { name: string };
+  skills: Array<{ name: string; itemDrop?: { name: string } | null }>;
+  favorite_things: Array<{ name: string }>;
+};
+type ItemChangeSource = {
+  name: string;
+  category: { name: string };
+  usage: { name: string } | null;
+  customization: { dyeable: boolean; dualDyeable: boolean; patternEditable: boolean };
+  noRecipe: boolean;
+  acquisitionMethods: Array<{ name: string }>;
+  tags: Array<{ name: string }>;
+};
+type HabitatChangeSource = {
+  name: string;
+  recipe: Array<{ name: string; quantity: number }>;
+  pokemon: Array<{ name: string; time_of_day: string; weather: string; rarity: number; map: { name: string } }>;
+};
+type RecipeChangeSource = {
+  item: { name: string };
+  acquisition_methods: Array<{ name: string }>;
+  materials: Array<{ name: string; quantity: number }>;
+};

 const timeOfDays = ['早晨', '中午', '傍晚', '晚上'];
 const weathers = ['晴天', '阴天', '雨天'];
@@ -207,14 +243,228 @@ async function recordEditLog(
  entityType: string,
  entityId: number,
  action: EditAction,
-  userId: number
+  userId: number,
+  changes: EditChange[] = []
 ): Promise<void> {
  await client.query(
    `
-      INSERT INTO wiki_edit_logs (entity_type, entity_id, action, user_id)
-      VALUES ($1, $2, $3, $4)
+      INSERT INTO wiki_edit_logs (entity_type, entity_id, action, user_id, changes)
+      VALUES ($1, $2, $3, $4, $5::jsonb)
    `,
-    [entityType, entityId, action, userId]
+    [entityType, entityId, action, userId, JSON.stringify(changes)]
+  );
+}
+
+function displayValue(value: string | null | undefined): string {
+  const cleanValue = value?.trim() ?? '';
+  return cleanValue === '' ? '无' : cleanValue;
+}
+
+function pushChange(changes: EditChange[], label: string, before: string | null | undefined, after: string | null | undefined): void {
+  const beforeValue = displayValue(before);
+  const afterValue = displayValue(after);
+
+  if (beforeValue !== afterValue) {
+    changes.push({ label, before: beforeValue, after: afterValue });
+  }
+}
+
+function boolValue(value: boolean): string {
+  return value ? '是' : '否';
+}
+
+function namedListValue(items: Array<{ name: string }> | null | undefined): string {
+  if (!items?.length) {
+    return '无';
+  }
+
+  return [...new Set(items.map((item) => item.name))]
+    .sort((a, b) => a.localeCompare(b))
+    .join(' / ');
+}
+
+function quantityListValue(items: Array<{ name: string; quantity: number }> | null | undefined): string {
+  if (!items?.length) {
+    return '无';
+  }
+
+  return items
+    .map((item) => ({ name: item.name, value: `${item.name} x${item.quantity}` }))
+    .sort((a, b) => a.name.localeCompare(b.name))
+    .map((item) => item.value)
+    .join(' / ');
+}
+
+function skillDropListValue(skills: Array<{ name: string; itemDrop?: { name: string } | null }> | null | undefined): string {
+  const rows = skills
+    ?.filter((skill) => skill.itemDrop)
+    .map((skill) => `${skill.name}：${skill.itemDrop?.name}`)
+    .sort((a, b) => a.localeCompare(b)) ?? [];
+
+  return rows.length ? rows.join(' / ') : '无';
+}
+
+function appearanceListValue(
+  rows: Array<{ name: string; time_of_day: string; weather: string; rarity: number; map: { name: string } }> | null | undefined
+): string {
+  if (!rows?.length) {
+    return '无';
+  }
+
+  return rows
+    .map((row) => `${row.name}：${row.time_of_day} / ${row.weather} / ${row.rarity} 星 / ${row.map.name}`)
+    .sort((a, b) => a.localeCompare(b))
+    .join(' / ');
+}
+
+async function entityNameMap(client: DbClient, tableName: string, ids: number[]): Promise<Map<number, string>> {
+  const uniqueIds = [...new Set(ids)].filter((id) => Number.isInteger(id) && id > 0);
+  if (!uniqueIds.length) {
+    return new Map();
+  }
+
+  const result = await client.query<{ id: number; name: string }>(
+    `SELECT id, name FROM ${tableName} WHERE id = ANY($1::integer[])`,
+    [uniqueIds]
+  );
+
+  return new Map(result.rows.map((row) => [row.id, row.name]));
+}
+
+function namesFromIds(ids: number[], namesById: Map<number, string>): string {
+  const names = [...new Set(ids)]
+    .map((id) => namesById.get(id))
+    .filter((name): name is string => Boolean(name))
+    .sort((a, b) => a.localeCompare(b));
+
+  return names.length ? names.join(' / ') : '无';
+}
+
+async function quantityPayloadValue(client: DbClient, rows: IdQuantity[]): Promise<string> {
+  const namesById = await entityNameMap(client, 'items', rows.map((row) => row.itemId));
+  return quantityListValue(
+    rows
+      .map((row) => {
+        const name = namesById.get(row.itemId);
+        return name ? { name, quantity: row.quantity } : null;
+      })
+      .filter((row): row is { name: string; quantity: number } => row !== null)
+  );
+}
+
+async function pokemonEditChanges(
+  client: DbClient,
+  before: PokemonChangeSource,
+  after: PokemonPayload
+): Promise<EditChange[]> {
+  const changes: EditChange[] = [];
+  const environmentNames = await entityNameMap(client, 'environments', [after.environmentId]);
+  const skillNames = await entityNameMap(client, 'skills', after.skillIds);
+  const favoriteThingNames = await entityNameMap(client, 'favorite_things', after.favoriteThingIds);
+  const dropSkillNames = await entityNameMap(client, 'skills', after.skillItemDrops.map((drop) => drop.skillId));
+  const dropItemNames = await entityNameMap(client, 'items', after.skillItemDrops.map((drop) => drop.itemId));
+  const afterDrops = after.skillItemDrops
+    .map((drop) => {
+      const skillName = dropSkillNames.get(drop.skillId);
+      const itemName = dropItemNames.get(drop.itemId);
+      return skillName && itemName ? `${skillName}：${itemName}` : null;
+    })
+    .filter((drop): drop is string => drop !== null)
+    .sort((a, b) => a.localeCompare(b))
+    .join(' / ');
+
+  pushChange(changes, '名字', before.name, after.name);
+  pushChange(changes, '喜欢的环境', before.environment.name, environmentNames.get(after.environmentId));
+  pushChange(changes, '特长', namedListValue(before.skills), namesFromIds(after.skillIds, skillNames));
+  pushChange(changes, '喜欢的东西', namedListValue(before.favorite_things), namesFromIds(after.favoriteThingIds, favoriteThingNames));
+  pushChange(changes, '特长掉落物', skillDropListValue(before.skills), afterDrops);
+
+  return changes;
+}
+
+async function itemEditChanges(
+  client: DbClient,
+  before: ItemChangeSource,
+  after: ItemPayload
+): Promise<EditChange[]> {
+  const changes: EditChange[] = [];
+  const categoryNames = await entityNameMap(client, 'item_categories', [after.categoryId]);
+  const usageNames = await entityNameMap(client, 'item_usages', after.usageId ? [after.usageId] : []);
+  const methodNames = await entityNameMap(client, 'acquisition_methods', after.acquisitionMethodIds);
+  const tagNames = await entityNameMap(client, 'favorite_things', after.tagIds);
+
+  pushChange(changes, '名称', before.name, after.name);
+  pushChange(changes, '分类', before.category.name, categoryNames.get(after.categoryId));
+  pushChange(changes, '用途', before.usage?.name, after.usageId ? usageNames.get(after.usageId) : null);
+  pushChange(changes, '可染色', boolValue(before.customization.dyeable), boolValue(after.dyeable));
+  pushChange(changes, '可双区染色', boolValue(before.customization.dualDyeable), boolValue(after.dualDyeable));
+  pushChange(changes, '可改花纹', boolValue(before.customization.patternEditable), boolValue(after.patternEditable));
+  pushChange(changes, '无材料单', boolValue(before.noRecipe), boolValue(after.noRecipe));
+  pushChange(changes, '入手方式', namedListValue(before.acquisitionMethods), namesFromIds(after.acquisitionMethodIds, methodNames));
+  pushChange(changes, '标签', namedListValue(before.tags), namesFromIds(after.tagIds, tagNames));
+
+  return changes;
+}
+
+async function habitatEditChanges(
+  client: DbClient,
+  before: HabitatChangeSource,
+  after: HabitatPayload
+): Promise<EditChange[]> {
+  const changes: EditChange[] = [];
+  const pokemonNames = await entityNameMap(client, 'pokemon', after.pokemonAppearances.map((row) => row.pokemonId));
+  const mapNames = await entityNameMap(client, 'maps', after.pokemonAppearances.map((row) => row.mapId));
+  const afterAppearances = after.pokemonAppearances
+    .map((row) => {
+      const pokemonName = pokemonNames.get(row.pokemonId);
+      const mapName = mapNames.get(row.mapId);
+      return pokemonName && mapName ? `${pokemonName}：${row.timeOfDay} / ${row.weather} / ${row.rarity} 星 / ${mapName}` : null;
+    })
+    .filter((row): row is string => row !== null)
+    .sort((a, b) => a.localeCompare(b))
+    .join(' / ');
+
+  pushChange(changes, '名称', before.name, after.name);
+  pushChange(changes, '配方', quantityListValue(before.recipe), await quantityPayloadValue(client, after.recipeItems));
+  pushChange(changes, '可能出现的宝可梦', appearanceListValue(before.pokemon), afterAppearances);
+
+  return changes;
+}
+
+async function recipeEditChanges(
+  client: DbClient,
+  before: RecipeChangeSource,
+  after: RecipePayload
+): Promise<EditChange[]> {
+  const changes: EditChange[] = [];
+  const itemNames = await entityNameMap(client, 'items', [after.itemId]);
+  const methodNames = await entityNameMap(client, 'acquisition_methods', after.acquisitionMethodIds);
+
+  pushChange(changes, '物品', before.item.name, itemNames.get(after.itemId));
+  pushChange(changes, '入手方式', namedListValue(before.acquisition_methods), namesFromIds(after.acquisitionMethodIds, methodNames));
+  pushChange(changes, '需要材料', quantityListValue(before.materials), await quantityPayloadValue(client, after.materials));
+
+  return changes;
+}
+
+function getEditHistory(entityType: string, entityId: number): Promise<EditHistoryEntry[]> {
+  return query(
+    `
+      SELECT
+        l.action,
+        COALESCE(l.changes, '[]'::jsonb) AS changes,
+        l.created_at AS "createdAt",
+        CASE
+          WHEN u.id IS NULL THEN NULL
+          ELSE json_build_object('id', u.id, 'displayName', u.display_name)
+        END AS user
+      FROM wiki_edit_logs l
+      LEFT JOIN users u ON u.id = l.user_id
+      WHERE l.entity_type = $1
+        AND l.entity_id = $2
+      ORDER BY l.created_at DESC, l.id DESC
+    `,
+    [entityType, entityId]
  );
 }

@@ -439,7 +689,7 @@ export async function getPokemon(id: number) {
    return null;
  }

-  const [habitats, itemDrops, favoriteThingItems] = await Promise.all([
+  const [habitats, itemDrops, favoriteThingItems, editHistory] = await Promise.all([
    query(
      `
        SELECT
@@ -486,7 +736,8 @@ export async function getPokemon(id: number) {
        ORDER BY c.name, i.name
      `,
      [id]
-    )
+    ),
+    getEditHistory('pokemon', id)
  ]);

  const dropsBySkill = itemDrops.reduce((itemsBySkill, item) => {
@@ -501,7 +752,7 @@ export async function getPokemon(id: number) {
      }))
    : [];

-  return { ...pokemon, skills, habitats, favoriteThingItems };
+  return { ...pokemon, skills, habitats, favoriteThingItems, editHistory };
 }

 function cleanPokemonPayload(payload: Record<string, unknown>): PokemonPayload {
@@ -601,6 +852,7 @@ export async function createPokemon(payload: Record<string, unknown>, userId: nu

 export async function updatePokemon(id: number, payload: Record<string, unknown>, userId: number) {
  const cleanPayload = cleanPokemonPayload({ ...payload, id });
+  const before = await getPokemon(id);

  const updated = await withTransaction(async (client) => {
    const result = await client.query(
@@ -615,7 +867,8 @@ export async function updatePokemon(id: number, payload: Record<string, unknown>
      return false;
    }
    await replacePokemonRelations(client, id, cleanPayload);
-    await recordEditLog(client, 'pokemon', id, 'update', userId);
+    const changes = before ? await pokemonEditChanges(client, before as unknown as PokemonChangeSource, cleanPayload) : [];
+    await recordEditLog(client, 'pokemon', id, 'update', userId, changes);
    return true;
  });
  return updated ? getPokemon(id) : null;
@@ -681,25 +934,28 @@ export async function getHabitat(id: number) {
    return null;
  }

-  const pokemon = await query(
-    `
-      SELECT
-        p.id,
-        p.name,
-        hp.time_of_day,
-        hp.weather,
-        hp.rarity,
-        json_build_object('id', m.id, 'name', m.name) AS map
-      FROM habitat_pokemon hp
-      JOIN pokemon p ON p.id = hp.pokemon_id
-      JOIN maps m ON m.id = hp.map_id
-      WHERE hp.habitat_id = $1
-      ORDER BY hp.rarity, p.id, m.name
-    `,
-    [id]
-  );
+  const [pokemon, editHistory] = await Promise.all([
+    query(
+      `
+        SELECT
+          p.id,
+          p.name,
+          hp.time_of_day,
+          hp.weather,
+          hp.rarity,
+          json_build_object('id', m.id, 'name', m.name) AS map
+        FROM habitat_pokemon hp
+        JOIN pokemon p ON p.id = hp.pokemon_id
+        JOIN maps m ON m.id = hp.map_id
+        WHERE hp.habitat_id = $1
+        ORDER BY hp.rarity, p.id, m.name
+      `,
+      [id]
+    ),
+    getEditHistory('habitats', id)
+  ]);

-  return { ...habitat, pokemon };
+  return { ...habitat, pokemon, editHistory };
 }

 function cleanHabitatPayload(payload: Record<string, unknown>): HabitatPayload {
@@ -785,6 +1041,7 @@ export async function createHabitat(payload: Record<string, unknown>, userId: nu

 export async function updateHabitat(id: number, payload: Record<string, unknown>, userId: number) {
  const cleanPayload = cleanHabitatPayload(payload);
+  const before = await getHabitat(id);

  const updated = await withTransaction(async (client) => {
    const result = await client.query(
@@ -795,7 +1052,8 @@ export async function updateHabitat(id: number, payload: Record<string, unknown>
      return false;
    }
    await replaceHabitatRelations(client, id, cleanPayload);
-    await recordEditLog(client, 'habitats', id, 'update', userId);
+    const changes = before ? await habitatEditChanges(client, before as unknown as HabitatChangeSource, cleanPayload) : [];
+    await recordEditLog(client, 'habitats', id, 'update', userId, changes);
    return true;
  });
  return updated ? getHabitat(id) : null;
@@ -903,7 +1161,7 @@ export async function getItem(id: number) {
    return null;
  }

-  const [acquisitionMethods, recipe, relatedRecipes, relatedHabitats, droppedByPokemon] = await Promise.all([
+  const [acquisitionMethods, recipe, relatedRecipes, relatedHabitats, droppedByPokemon, editHistory] = await Promise.all([
    query(
      `
        SELECT am.id, am.name
@@ -990,10 +1248,11 @@ export async function getItem(id: number) {
        ORDER BY p.id, s.name
      `,
      [id]
-    )
+    ),
+    getEditHistory('items', id)
  ]);

-  return { ...item, acquisitionMethods, recipe, relatedRecipes, relatedHabitats, droppedByPokemon };
+  return { ...item, acquisitionMethods, recipe, relatedRecipes, relatedHabitats, droppedByPokemon, editHistory };
 }

 function cleanItemPayload(payload: Record<string, unknown>): ItemPayload {
@@ -1085,6 +1344,7 @@ export async function createItem(payload: Record<string, unknown>, userId: numbe

 export async function updateItem(id: number, payload: Record<string, unknown>, userId: number) {
  const cleanPayload = cleanItemPayload(payload);
+  const before = await getItem(id);

  const updated = await withTransaction(async (client) => {
    await ensureItemCanDisableRecipe(client, id, cleanPayload.noRecipe);
@@ -1118,7 +1378,8 @@ export async function updateItem(id: number, payload: Record<string, unknown>, u
      return false;
    }
    await replaceItemRelations(client, id, cleanPayload);
-    await recordEditLog(client, 'items', id, 'update', userId);
+    const changes = before ? await itemEditChanges(client, before as unknown as ItemChangeSource, cleanPayload) : [];
+    await recordEditLog(client, 'items', id, 'update', userId, changes);
    return true;
  });
  return updated ? getItem(id) : null;
@@ -1167,7 +1428,7 @@ export async function listRecipes(paramsQuery: QueryParams = {}) {
 }

 export async function getRecipe(id: number) {
-  return queryOne(
+  const recipe = await queryOne(
    `
      SELECT
        r.id,
@@ -1193,6 +1454,13 @@ export async function getRecipe(id: number) {
    `,
    [id]
  );
+
+  if (!recipe) {
+    return null;
+  }
+
+  const editHistory = await getEditHistory('recipes', id);
+  return { ...recipe, editHistory };
 }

 function cleanRecipePayload(payload: Record<string, unknown>): RecipePayload {
@@ -1257,6 +1525,7 @@ export async function createRecipe(payload: Record<string, unknown>, userId: num

 export async function updateRecipe(id: number, payload: Record<string, unknown>, userId: number) {
  const cleanPayload = cleanRecipePayload(payload);
+  const before = await getRecipe(id);

  const updated = await withTransaction(async (client) => {
    await ensureItemCanHaveRecipe(client, cleanPayload.itemId);
@@ -1268,7 +1537,8 @@ export async function updateRecipe(id: number, payload: Record<string, unknown>,
      return false;
    }
    await replaceRecipeRelations(client, id, cleanPayload);
-    await recordEditLog(client, 'recipes', id, 'update', userId);
+    const changes = before ? await recipeEditChanges(client, before as unknown as RecipeChangeSource, cleanPayload) : [];
+    await recordEditLog(client, 'recipes', id, 'update', userId, changes);
    return true;
  });
  return updated ? getRecipe(id) : null;
--- a/frontend/src/components/EditHistoryPanel.vue
+++ b/frontend/src/components/EditHistoryPanel.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { EditHistoryAction, EditHistoryEntry, EditInfo, UserSummary } from '../services/api';
+
+defineProps<{
+  entity: EditInfo;
+  history: EditHistoryEntry[];
+}>();
+
+const actionLabels: Record<EditHistoryAction, string> = {
+  create: '创建',
+  update: '编辑',
+  delete: '删除'
+};
+
+function displayName(user: UserSummary | null): string {
+  return user?.displayName ?? '系统';
+}
+
+function actionLabel(action: EditHistoryAction): string {
+  return actionLabels[action];
+}
+
+function actionMark(action: EditHistoryAction): string {
+  return actionLabels[action].charAt(0);
+}
+
+function historySummary(entry: EditHistoryEntry): string {
+  if (!entry.changes.length) {
+    return actionLabel(entry.action);
+  }
+
+  return entry.changes.map((change) => change.label).join('、');
+}
+
+function formatDateTime(value: string): string {
+  return new Intl.DateTimeFormat('zh-CN', {
+    dateStyle: 'medium',
+    timeStyle: 'short'
+  }).format(new Date(value));
+}
+</script>
+
+<template>
+  <aside class="edit-history-panel" aria-labelledby="edit-history-panel-title">
+    <div class="edit-history-panel__header">
+      <h2 id="edit-history-panel-title">贡献记录</h2>
+    </div>
+
+    <dl class="edit-history-summary">
+      <div>
+        <dt>由谁创建</dt>
+        <dd>
+          <strong>{{ displayName(entity.createdBy) }}</strong>
+          <time :datetime="entity.createdAt">{{ formatDateTime(entity.createdAt) }}</time>
+        </dd>
+      </div>
+      <div>
+        <dt>最后编辑</dt>
+        <dd>
+          <strong>{{ displayName(entity.updatedBy) }}</strong>
+          <time :datetime="entity.updatedAt">{{ formatDateTime(entity.updatedAt) }}</time>
+        </dd>
+      </div>
+    </dl>
+
+    <section class="edit-history-list" aria-labelledby="edit-history-list-title">
+      <h3 id="edit-history-list-title">编辑历史</h3>
+      <ol v-if="history.length" class="edit-timeline">
+        <li v-for="entry in history" :key="`${entry.action}-${entry.createdAt}-${entry.user?.id ?? 'system'}`">
+          <span class="edit-timeline__avatar" aria-hidden="true">{{ actionMark(entry.action) }}</span>
+          <div class="edit-timeline__body">
+            <details class="edit-history-entry">
+              <summary>
+                <span class="edit-history-entry__title">{{ historySummary(entry) }}</span>
+              </summary>
+
+              <div class="edit-history-entry__content">
+                <dl v-if="entry.changes.length" class="edit-change-list">
+                  <div v-for="change in entry.changes" :key="`${change.label}-${change.before}-${change.after}`">
+                    <dt>{{ change.label }}</dt>
+                    <dd>
+                      <span class="edit-change-list__label">修改前</span>
+                      <span>{{ change.before }}</span>
+                      <span class="edit-change-list__label">修改后</span>
+                      <span>{{ change.after }}</span>
+                    </dd>
+                  </div>
+                </dl>
+
+                <dl class="edit-history-detail-meta">
+                  <div>
+                    <dt>作者</dt>
+                    <dd>{{ displayName(entry.user) }}</dd>
+                  </div>
+                  <div>
+                    <dt>时间</dt>
+                    <dd><time :datetime="entry.createdAt">{{ formatDateTime(entry.createdAt) }}</time></dd>
+                  </div>
+                  <div>
+                    <dt>动作</dt>
+                    <dd>{{ actionLabel(entry.action) }}</dd>
+                  </div>
+                </dl>
+              </div>
+            </details>
+          </div>
+        </li>
+      </ol>
+      <p v-else class="meta-line">暂无编辑历史</p>
+    </section>
+  </aside>
+</template>
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -23,6 +23,21 @@ export interface EditInfo {
  updatedBy: UserSummary | null;
 }

+export type EditHistoryAction = 'create' | 'update' | 'delete';
+
+export interface EditChange {
+  label: string;
+  before: string;
+  after: string;
+}
+
+export interface EditHistoryEntry {
+  action: EditHistoryAction;
+  changes: EditChange[];
+  createdAt: string;
+  user: UserSummary | null;
+}
+
 export interface Pokemon extends EditInfo {
  id: number;
  name: string;
@@ -34,6 +49,7 @@ export interface Pokemon extends EditInfo {
 export interface PokemonDetail extends Pokemon {
  skills: Array<Skill & { itemDrop: NamedEntity | null }>;
  favoriteThingItems: Array<NamedEntity & { category: NamedEntity; tags: NamedEntity[] }>;
+  editHistory: EditHistoryEntry[];
  habitats: Array<{
    id: number;
    name: string;
@@ -52,6 +68,7 @@ export interface Habitat extends EditInfo {
 }

 export interface HabitatDetail extends Habitat {
+  editHistory: EditHistoryEntry[];
  pokemon: Array<NamedEntity & {
    time_of_day: string;
    weather: string;
@@ -96,6 +113,7 @@ export interface ItemDetail extends Item {
  recipe: RecipeDetail | null;
  relatedRecipes: RecipeUsage[];
  relatedHabitats: HabitatUsage[];
+  editHistory: EditHistoryEntry[];
  droppedByPokemon: Array<{
    pokemon: NamedEntity;
    skill: NamedEntity;
@@ -110,6 +128,7 @@ export interface Recipe extends EditInfo {

 export interface RecipeDetail extends Recipe {
  acquisition_methods: NamedEntity[];
+  editHistory: EditHistoryEntry[];
  item: NamedEntity;
 }

--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -917,6 +917,13 @@ button:disabled,
  grid-template-columns: 1fr;
 }

+.detail-with-sidebar {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
+  gap: 16px;
+  align-items: start;
+}
+
 .habitat-detail-stack {
  display: grid;
  gap: 16px;
@@ -966,6 +973,255 @@ button:disabled,
  font-weight: 850;
 }

+.edit-history-panel {
+  position: sticky;
+  top: 92px;
+  display: grid;
+  gap: 16px;
+  padding: 18px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-card);
+  background: var(--surface);
+  box-shadow: var(--shadow-soft);
+}
+
+.edit-history-panel__header h2,
+.edit-history-list h3 {
+  margin: 0;
+  color: var(--ink);
+  font-family: var(--font-display);
+  font-weight: 950;
+  line-height: 1.12;
+}
+
+.edit-history-panel__header h2 {
+  font-size: 21px;
+}
+
+.edit-history-list h3 {
+  font-size: 16px;
+}
+
+.edit-history-summary {
+  display: grid;
+  gap: 0;
+  margin: 0;
+}
+
+.edit-history-summary div {
+  display: grid;
+  gap: 5px;
+  padding: 11px 0;
+  border-bottom: 1px solid var(--line);
+}
+
+.edit-history-summary div:first-child {
+  padding-top: 0;
+}
+
+.edit-history-summary div:last-child {
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+
+.edit-history-summary dt {
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.edit-history-summary dd {
+  display: grid;
+  gap: 2px;
+  margin: 0;
+  color: var(--ink);
+}
+
+.edit-history-summary time,
+.edit-timeline time {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.edit-history-list {
+  display: grid;
+  gap: 12px;
+}
+
+.edit-timeline {
+  display: grid;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.edit-timeline li {
+  position: relative;
+  display: grid;
+  grid-template-columns: 38px minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+}
+
+.edit-timeline li:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  top: 38px;
+  bottom: 0;
+  left: 17px;
+  width: 2px;
+  background: var(--line);
+}
+
+.edit-timeline__avatar {
+  position: relative;
+  z-index: 1;
+  width: 34px;
+  height: 34px;
+  display: grid;
+  place-items: center;
+  border: 2px solid var(--line-strong);
+  border-radius: 50%;
+  background: var(--pokemon-yellow);
+  box-shadow: 0 2px 0 var(--line-strong);
+  color: #172036;
+  font-size: 13px;
+  font-weight: 950;
+}
+
+.edit-timeline__body {
+  min-width: 0;
+  display: grid;
+  padding-bottom: 13px;
+  border-bottom: 1px solid var(--line);
+}
+
+.edit-timeline li:last-child .edit-timeline__body {
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+
+.edit-history-entry {
+  min-width: 0;
+}
+
+.edit-history-entry summary {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 18px;
+  gap: 8px;
+  align-items: center;
+  min-height: 34px;
+  margin: 0;
+  color: var(--ink-soft);
+  cursor: pointer;
+  font-weight: 850;
+  list-style: none;
+}
+
+.edit-history-entry summary::-webkit-details-marker {
+  display: none;
+}
+
+.edit-history-entry summary::after {
+  content: "";
+  width: 9px;
+  height: 9px;
+  justify-self: center;
+  border-right: 2px solid var(--muted);
+  border-bottom: 2px solid var(--muted);
+  transform: rotate(-45deg);
+  transition: transform 0.16s ease;
+}
+
+.edit-history-entry[open] summary::after {
+  transform: rotate(45deg);
+}
+
+.edit-history-entry__title {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.edit-history-entry__content {
+  display: grid;
+  gap: 10px;
+  padding-top: 8px;
+}
+
+.edit-change-list {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+}
+
+.edit-change-list div {
+  display: grid;
+  gap: 4px;
+  padding: 8px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-small);
+  background: var(--surface-soft);
+}
+
+.edit-change-list dt {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.edit-change-list dd {
+  display: grid;
+  grid-template-columns: 52px minmax(0, 1fr);
+  gap: 3px 8px;
+  margin: 0;
+  color: var(--ink-soft);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.edit-change-list dd span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.edit-change-list__label {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.edit-history-detail-meta {
+  display: grid;
+  gap: 5px;
+  margin: 0;
+  padding-top: 8px;
+  border-top: 1px solid var(--line);
+}
+
+.edit-history-detail-meta div {
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr);
+  gap: 8px;
+}
+
+.edit-history-detail-meta dt,
+.edit-history-detail-meta dd {
+  margin: 0;
+  font-size: 12px;
+}
+
+.edit-history-detail-meta dt {
+  color: var(--muted);
+  font-weight: 850;
+}
+
+.edit-history-detail-meta dd {
+  color: var(--ink-soft);
+  font-weight: 800;
+  overflow-wrap: anywhere;
+}
+
 .row-list {
  display: grid;
  gap: 0;
@@ -1429,10 +1685,15 @@ button:disabled,
  }

  .detail-grid,
+  .detail-with-sidebar,
  .admin-layout {
    grid-template-columns: 1fr;
  }

+  .edit-history-panel {
+    position: static;
+  }
+
  .appearance-row__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
--- a/frontend/src/views/HabitatDetail.vue
+++ b/frontend/src/views/HabitatDetail.vue
@@ -2,7 +2,7 @@
 import { computed, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import DetailSection from '../components/DetailSection.vue';
-import EditMeta from '../components/EditMeta.vue';
+import EditHistoryPanel from '../components/EditHistoryPanel.vue';
 import EntityChips from '../components/EntityChips.vue';
 import PageHeader from '../components/PageHeader.vue';
 import Skeleton from '../components/Skeleton.vue';
@@ -129,45 +129,46 @@ onMounted(async () => {
  <section v-else class="page-stack">
    <PageHeader :title="habitat.name" subtitle="栖息地详情">
      <template #kicker>Habitat Detail</template>
-      <template #meta>
-        <EditMeta :entity="habitat" />
-      </template>
      <template #actions>
        <RouterLink class="ui-button ui-button--primary ui-button--small" :to="`/habitats/${habitat.id}/edit`">编辑</RouterLink>
        <RouterLink class="ui-button ui-button--blue ui-button--small" to="/habitats">返回列表</RouterLink>
      </template>
    </PageHeader>

-    <div class="habitat-detail-stack">
-      <DetailSection title="配方列表">
-        <EntityChips :items="habitat.recipe" />
-      </DetailSection>
+    <div class="detail-with-sidebar">
+      <div class="habitat-detail-stack">
+        <DetailSection title="配方列表">
+          <EntityChips :items="habitat.recipe" />
+        </DetailSection>

-      <DetailSection title="可能出现的宝可梦">
-        <ul class="row-list appearance-list">
-          <li v-for="item in pokemonRows" :key="`${item.id}-${item.rarity}`">
-            <RouterLink class="appearance-name" :to="`/pokemon/${item.id}`">{{ item.name }}</RouterLink>
-            <dl class="appearance-summary">
-              <div>
-                <dt>时段</dt>
-                <dd>{{ item.timeOfDays.join(' / ') }}</dd>
-              </div>
-              <div>
-                <dt>天气</dt>
-                <dd>{{ item.weathers.join(' / ') }}</dd>
-              </div>
-              <div>
-                <dt>稀有度</dt>
-                <dd>{{ item.rarity }} 星</dd>
-              </div>
-              <div>
-                <dt>出现地图</dt>
-                <dd>{{ item.maps.join(' / ') }}</dd>
-              </div>
-            </dl>
-          </li>
-        </ul>
-      </DetailSection>
+        <DetailSection title="可能出现的宝可梦">
+          <ul class="row-list appearance-list">
+            <li v-for="item in pokemonRows" :key="`${item.id}-${item.rarity}`">
+              <RouterLink class="appearance-name" :to="`/pokemon/${item.id}`">{{ item.name }}</RouterLink>
+              <dl class="appearance-summary">
+                <div>
+                  <dt>时段</dt>
+                  <dd>{{ item.timeOfDays.join(' / ') }}</dd>
+                </div>
+                <div>
+                  <dt>天气</dt>
+                  <dd>{{ item.weathers.join(' / ') }}</dd>
+                </div>
+                <div>
+                  <dt>稀有度</dt>
+                  <dd>{{ item.rarity }} 星</dd>
+                </div>
+                <div>
+                  <dt>出现地图</dt>
+                  <dd>{{ item.maps.join(' / ') }}</dd>
+                </div>
+              </dl>
+            </li>
+          </ul>
+        </DetailSection>
+      </div>
+
+      <EditHistoryPanel :entity="habitat" :history="habitat.editHistory" />
    </div>
  </section>
 </template>
--- a/frontend/src/views/ItemDetail.vue
+++ b/frontend/src/views/ItemDetail.vue
@@ -2,7 +2,7 @@
 import { computed, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import DetailSection from '../components/DetailSection.vue';
-import EditMeta from '../components/EditMeta.vue';
+import EditHistoryPanel from '../components/EditHistoryPanel.vue';
 import EntityChips from '../components/EntityChips.vue';
 import PageHeader from '../components/PageHeader.vue';
 import Skeleton from '../components/Skeleton.vue';
@@ -84,74 +84,75 @@ onMounted(async () => {
  <section v-else class="page-stack">
    <PageHeader :title="item.name" :subtitle="item.usage ? `${item.category.name} · ${item.usage.name}` : item.category.name">
      <template #kicker>Item Detail</template>
-      <template #meta>
-        <EditMeta :entity="item" />
-      </template>
      <template #actions>
        <RouterLink class="ui-button ui-button--primary ui-button--small" :to="`/items/${item.id}/edit`">编辑</RouterLink>
        <RouterLink class="ui-button ui-button--blue ui-button--small" to="/items">返回列表</RouterLink>
      </template>
    </PageHeader>

-    <div class="detail-grid">
-      <DetailSection title="入手方式">
-        <EntityChips :items="item.acquisitionMethods" />
-      </DetailSection>
+    <div class="detail-with-sidebar">
+      <div class="detail-grid">
+        <DetailSection title="入手方式">
+          <EntityChips :items="item.acquisitionMethods" />
+        </DetailSection>

-      <DetailSection title="自定义">
-        <div v-if="customization.length" class="chips">
-          <span v-for="entry in customization" :key="entry" class="chip">{{ entry }}</span>
-        </div>
-        <p v-else class="meta-line">无</p>
-      </DetailSection>
+        <DetailSection title="自定义">
+          <div v-if="customization.length" class="chips">
+            <span v-for="entry in customization" :key="entry" class="chip">{{ entry }}</span>
+          </div>
+          <p v-else class="meta-line">无</p>
+        </DetailSection>

-      <DetailSection title="标签">
-        <EntityChips :items="item.tags" />
-      </DetailSection>
+        <DetailSection title="标签">
+          <EntityChips :items="item.tags" />
+        </DetailSection>

-      <DetailSection title="材料单信息">
-        <template v-if="item.recipe">
-          <RouterLink :to="`/recipes/${item.recipe.id}`">{{ item.recipe.name }}</RouterLink>
-          <EntityChips :items="item.recipe.materials" />
-        </template>
-        <p v-else-if="item.noRecipe" class="meta-line">无材料单</p>
-        <template v-else>
-          <p class="meta-line">无</p>
-          <RouterLink class="ui-button ui-button--primary ui-button--small" :to="`/recipes/new?itemId=${item.id}`">
-            创建材料单
-          </RouterLink>
-        </template>
-      </DetailSection>
+        <DetailSection title="材料单信息">
+          <template v-if="item.recipe">
+            <RouterLink :to="`/recipes/${item.recipe.id}`">{{ item.recipe.name }}</RouterLink>
+            <EntityChips :items="item.recipe.materials" />
+          </template>
+          <p v-else-if="item.noRecipe" class="meta-line">无材料单</p>
+          <template v-else>
+            <p class="meta-line">无</p>
+            <RouterLink class="ui-button ui-button--primary ui-button--small" :to="`/recipes/new?itemId=${item.id}`">
+              创建材料单
+            </RouterLink>
+          </template>
+        </DetailSection>

-      <DetailSection title="相关材料单">
-        <ul v-if="item.relatedRecipes.length" class="row-list">
-          <li v-for="recipe in item.relatedRecipes" :key="recipe.id">
-            <RouterLink :to="`/recipes/${recipe.id}`">{{ recipe.name }}</RouterLink>
-            <EntityChips :items="recipe.materials" />
-          </li>
-        </ul>
-        <p v-else class="meta-line">无</p>
-      </DetailSection>
+        <DetailSection title="相关材料单">
+          <ul v-if="item.relatedRecipes.length" class="row-list">
+            <li v-for="recipe in item.relatedRecipes" :key="recipe.id">
+              <RouterLink :to="`/recipes/${recipe.id}`">{{ recipe.name }}</RouterLink>
+              <EntityChips :items="recipe.materials" />
+            </li>
+          </ul>
+          <p v-else class="meta-line">无</p>
+        </DetailSection>

-      <DetailSection title="相关栖息地">
-        <ul v-if="item.relatedHabitats.length" class="row-list">
-          <li v-for="habitat in item.relatedHabitats" :key="habitat.id">
-            <RouterLink :to="`/habitats/${habitat.id}`">{{ habitat.name }}</RouterLink>
-            <EntityChips :items="habitat.recipe" />
-          </li>
-        </ul>
-        <p v-else class="meta-line">无</p>
-      </DetailSection>
+        <DetailSection title="相关栖息地">
+          <ul v-if="item.relatedHabitats.length" class="row-list">
+            <li v-for="habitat in item.relatedHabitats" :key="habitat.id">
+              <RouterLink :to="`/habitats/${habitat.id}`">{{ habitat.name }}</RouterLink>
+              <EntityChips :items="habitat.recipe" />
+            </li>
+          </ul>
+          <p v-else class="meta-line">无</p>
+        </DetailSection>

-      <DetailSection title="Pokemon 掉落">
-        <ul v-if="item.droppedByPokemon.length" class="row-list">
-          <li v-for="entry in item.droppedByPokemon" :key="`${entry.pokemon.id}-${entry.skill.id}`">
-            <RouterLink :to="`/pokemon/${entry.pokemon.id}`">#{{ entry.pokemon.id }} {{ entry.pokemon.name }}</RouterLink>
-            <span>{{ entry.skill.name }}掉落物</span>
-          </li>
-        </ul>
-        <p v-else class="meta-line">无</p>
-      </DetailSection>
+        <DetailSection title="Pokemon 掉落">
+          <ul v-if="item.droppedByPokemon.length" class="row-list">
+            <li v-for="entry in item.droppedByPokemon" :key="`${entry.pokemon.id}-${entry.skill.id}`">
+              <RouterLink :to="`/pokemon/${entry.pokemon.id}`">#{{ entry.pokemon.id }} {{ entry.pokemon.name }}</RouterLink>
+              <span>{{ entry.skill.name }}掉落物</span>
+            </li>
+          </ul>
+          <p v-else class="meta-line">无</p>
+        </DetailSection>
+      </div>
+
+      <EditHistoryPanel :entity="item" :history="item.editHistory" />
    </div>
  </section>
 </template>
--- a/frontend/src/views/PokemonDetail.vue
+++ b/frontend/src/views/PokemonDetail.vue
@@ -2,7 +2,7 @@
 import { computed, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import DetailSection from '../components/DetailSection.vue';
-import EditMeta from '../components/EditMeta.vue';
+import EditHistoryPanel from '../components/EditHistoryPanel.vue';
 import EntityChips from '../components/EntityChips.vue';
 import PageHeader from '../components/PageHeader.vue';
 import Skeleton from '../components/Skeleton.vue';
@@ -165,78 +165,79 @@ onMounted(async () => {
  <section v-else class="page-stack">
    <PageHeader :title="`#${pokemon.id} ${pokemon.name}`" :subtitle="`喜欢的环境：${pokemon.environment.name}`">
      <template #kicker>Pokédex Detail</template>
-      <template #meta>
-        <EditMeta :entity="pokemon" />
-      </template>
      <template #actions>
        <RouterLink class="ui-button ui-button--primary ui-button--small" :to="`/pokemon/${pokemon.id}/edit`">编辑</RouterLink>
        <RouterLink class="ui-button ui-button--blue ui-button--small" to="/pokemon">返回列表</RouterLink>
      </template>
    </PageHeader>

-    <div class="detail-grid detail-grid--stack">
-      <DetailSection title="特长">
-        <EntityChips :items="pokemon.skills" />
-      </DetailSection>
+    <div class="detail-with-sidebar">
+      <div class="detail-grid detail-grid--stack">
+        <DetailSection title="特长">
+          <EntityChips :items="pokemon.skills" />
+        </DetailSection>

-      <DetailSection v-if="skillDropRows.length" title="特长掉落物">
-        <ul class="row-list skill-drop-summary">
-          <li v-for="skill in skillDropRows" :key="skill.id">
-            <span>{{ skill.name }}掉落物</span>
-            <RouterLink v-if="skill.itemDrop" :to="`/items/${skill.itemDrop.id}`">{{ skill.itemDrop.name }}</RouterLink>
-          </li>
-        </ul>
-      </DetailSection>
-
-      <DetailSection title="喜欢的东西">
-        <EntityChips :items="pokemon.favorite_things" />
-      </DetailSection>
-
-      <DetailSection title="关联物品">
-        <template v-if="pokemon.favoriteThingItems.length">
-          <Tabs
-            v-if="itemCategoryTabs.length"
-            id="pokemon-favorite-items"
-            v-model="itemCategoryTab"
-            :tabs="itemCategoryTabs"
-            label="关联物品分类"
-          />
-          <ul v-if="favoriteThingItems.length" class="row-list">
-            <li v-for="item in favoriteThingItems" :key="item.id">
-              <RouterLink :to="`/items/${item.id}`">{{ item.name }}</RouterLink>
-              <EntityChips :items="item.tags" />
+        <DetailSection v-if="skillDropRows.length" title="特长掉落物">
+          <ul class="row-list skill-drop-summary">
+            <li v-for="skill in skillDropRows" :key="skill.id">
+              <span>{{ skill.name }}掉落物</span>
+              <RouterLink v-if="skill.itemDrop" :to="`/items/${skill.itemDrop.id}`">{{ skill.itemDrop.name }}</RouterLink>
            </li>
          </ul>
-          <p v-else class="meta-line">无</p>
-        </template>
-        <p v-else class="meta-line">无</p>
-      </DetailSection>
+        </DetailSection>

-      <DetailSection title="栖息地">
-        <ul class="row-list appearance-list">
-          <li v-for="habitat in habitatRows" :key="`${habitat.id}-${habitat.rarity}`">
-            <RouterLink class="appearance-name" :to="`/habitats/${habitat.id}`">{{ habitat.name }}</RouterLink>
-            <dl class="appearance-summary">
-              <div>
-                <dt>时段</dt>
-                <dd>{{ habitat.timeOfDays.join(' / ') }}</dd>
-              </div>
-              <div>
-                <dt>天气</dt>
-                <dd>{{ habitat.weathers.join(' / ') }}</dd>
-              </div>
-              <div>
-                <dt>稀有度</dt>
-                <dd>{{ habitat.rarity }} 星</dd>
-              </div>
-              <div>
-                <dt>出现地图</dt>
-                <dd>{{ habitat.maps.join(' / ') }}</dd>
-              </div>
-            </dl>
-          </li>
-        </ul>
-      </DetailSection>
+        <DetailSection title="喜欢的东西">
+          <EntityChips :items="pokemon.favorite_things" />
+        </DetailSection>
+
+        <DetailSection title="关联物品">
+          <template v-if="pokemon.favoriteThingItems.length">
+            <Tabs
+              v-if="itemCategoryTabs.length"
+              id="pokemon-favorite-items"
+              v-model="itemCategoryTab"
+              :tabs="itemCategoryTabs"
+              label="关联物品分类"
+            />
+            <ul v-if="favoriteThingItems.length" class="row-list">
+              <li v-for="item in favoriteThingItems" :key="item.id">
+                <RouterLink :to="`/items/${item.id}`">{{ item.name }}</RouterLink>
+                <EntityChips :items="item.tags" />
+              </li>
+            </ul>
+            <p v-else class="meta-line">无</p>
+          </template>
+          <p v-else class="meta-line">无</p>
+        </DetailSection>
+
+        <DetailSection title="栖息地">
+          <ul class="row-list appearance-list">
+            <li v-for="habitat in habitatRows" :key="`${habitat.id}-${habitat.rarity}`">
+              <RouterLink class="appearance-name" :to="`/habitats/${habitat.id}`">{{ habitat.name }}</RouterLink>
+              <dl class="appearance-summary">
+                <div>
+                  <dt>时段</dt>
+                  <dd>{{ habitat.timeOfDays.join(' / ') }}</dd>
+                </div>
+                <div>
+                  <dt>天气</dt>
+                  <dd>{{ habitat.weathers.join(' / ') }}</dd>
+                </div>
+                <div>
+                  <dt>稀有度</dt>
+                  <dd>{{ habitat.rarity }} 星</dd>
+                </div>
+                <div>
+                  <dt>出现地图</dt>
+                  <dd>{{ habitat.maps.join(' / ') }}</dd>
+                </div>
+              </dl>
+            </li>
+          </ul>
+        </DetailSection>
+      </div>
+
+      <EditHistoryPanel :entity="pokemon" :history="pokemon.editHistory" />
    </div>
  </section>
 </template>
--- a/frontend/src/views/RecipeDetail.vue
+++ b/frontend/src/views/RecipeDetail.vue
@@ -2,7 +2,7 @@
 import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import DetailSection from '../components/DetailSection.vue';
-import EditMeta from '../components/EditMeta.vue';
+import EditHistoryPanel from '../components/EditHistoryPanel.vue';
 import EntityChips from '../components/EntityChips.vue';
 import PageHeader from '../components/PageHeader.vue';
 import Skeleton from '../components/Skeleton.vue';
@@ -46,23 +46,24 @@ onMounted(async () => {
  <section v-else class="page-stack">
    <PageHeader :title="recipe.name" subtitle="材料单详情">
      <template #kicker>Recipe Detail</template>
-      <template #meta>
-        <EditMeta :entity="recipe" />
-      </template>
      <template #actions>
        <RouterLink class="ui-button ui-button--primary ui-button--small" :to="`/recipes/${recipe.id}/edit`">编辑</RouterLink>
        <RouterLink class="ui-button ui-button--blue ui-button--small" to="/recipes">返回列表</RouterLink>
      </template>
    </PageHeader>

-    <div class="detail-grid">
-      <DetailSection title="入手方式">
-        <EntityChips :items="recipe.acquisition_methods" />
-      </DetailSection>
+    <div class="detail-with-sidebar">
+      <div class="detail-grid">
+        <DetailSection title="入手方式">
+          <EntityChips :items="recipe.acquisition_methods" />
+        </DetailSection>

-      <DetailSection title="需要材料">
-        <EntityChips :items="recipe.materials" />
-      </DetailSection>
+        <DetailSection title="需要材料">
+          <EntityChips :items="recipe.materials" />
+        </DetailSection>
+      </div>
+
+      <EditHistoryPanel :entity="recipe" :history="recipe.editHistory" />
    </div>
  </section>
 </template>