diff --git a/.yo-rc.json b/.yo-rc.json
index 00e18a7..cd6cf0d 100644
--- a/.yo-rc.json
+++ b/.yo-rc.json
@@ -1,6 +1,6 @@
 {
   "generator-jhipster": {
-    "additionalSubGenerators": "angular-audit,java-audit,spring-boot-custom-audit,spring-boot-javers",
+    "additionalSubGenerators": "angular-audit,java-audit,spring-boot-custom-audit,spring-boot-javers,vue-audit",
     "baseName": "entity-audit",
     "caret": true,
     "cli": true,
diff --git a/generators/client/generator.js b/generators/client/generator.js
index 58c7962..88e041e 100644
--- a/generators/client/generator.js
+++ b/generators/client/generator.js
@@ -14,6 +14,8 @@ export default class extends BaseApplicationGenerator {
       async composeTask() {
         if (this.blueprintConfig.auditPage && ['angularX', 'angular'].includes(this.jhipsterConfigWithDefaults.clientFramework)) {
           await this.composeWithJHipster('jhipster-entity-audit:angular-audit');
+        } else if (this.blueprintConfig.auditPage && ['vue'].includes(this.jhipsterConfigWithDefaults.clientFramework)) {
+          await this.composeWithJHipster('jhipster-entity-audit:vue-audit');
         }
       },
     });
diff --git a/generators/languages/templates/src/main/webapp/i18n/th/entity-audit.json b/generators/languages/templates/src/main/webapp/i18n/th/entity-audit.json
new file mode 100644
index 0000000..605bc78
--- /dev/null
+++ b/generators/languages/templates/src/main/webapp/i18n/th/entity-audit.json
@@ -0,0 +1,49 @@
+{
+    "global": {
+        "menu": {
+            "admin": {
+                "entityAudit": "การตรวจสอบข้อมูล"
+            }
+        }
+    },
+    "entityAudit": {
+        "home": {
+            "title": "รายการการตรวจสอบข้อมูล",
+            "filter": "ตัวกรอง",
+            "entityOrTable": "เอนทิตี/ตาราง",
+            "limitTo": "จำกัดจำนวน",
+            "loadChangeList": "โหลดรายการเปลี่ยนแปลง"
+        },
+        "result": {
+            "showInfo": "แสดง <strong>{{ limit }}</strong> การเปลี่ยนแปลงล่าสุดของ <strong>{{ entity }}</strong>",
+            "searchFieldLabel": "ตัวกรอง:",
+            "globalFilter": "ตัวกรองทั่วไป",
+            "entityIdFilter": "ตัวกรอง ID ของเอนทิตี",
+            "tableHeader": {
+                "entityId": "ID ของเอนทิตี",
+                "action": "การกระทำ",
+                "version": "เวอร์ชัน",
+                "value": "ค่า",
+                "modifiedDate": "วันที่แก้ไข",
+                "modifiedBy": "ผู้แก้ไข"
+            },
+            "tableBody": {
+                "field": "ฟิลด์",
+                "value": "ค่า",
+                "viewDetails": "ดูรายละเอียดการเปลี่ยนแปลง"
+            },
+            "noDataFound": "ไม่พบข้อมูลตามเงื่อนไขที่กรอง",
+            "firstAuditEntry": "ไม่มีเวอร์ชันก่อนหน้าสำหรับรายการนี้\nเป็นรายการบันทึกการตรวจสอบครั้งแรกของวัตถุนี้"
+        },
+        "detail": {
+            "close": "ปิด",
+            "title": "รายละเอียดการตรวจสอบ",
+            "action": "มีการดำเนินการ <strong>{{action}}</strong> กับข้อมูลด้านล่าง",
+            "old": "ค่าเก่า/ค่าที่ถูกลบ",
+            "new": "ค่าใหม่/ค่าที่เพิ่ม",
+            "changedFields": "ฟิลด์ที่เปลี่ยนแปลง",
+            "allFields": "ฟิลด์ทั้งหมด",
+            "done": "เสร็จสิ้น"
+        }
+    }
+}
diff --git a/generators/languages/templates/src/main/webapp/i18n/zh-cn/entity-audit.json b/generators/languages/templates/src/main/webapp/i18n/zh-cn/entity-audit.json
new file mode 100644
index 0000000..220012a
--- /dev/null
+++ b/generators/languages/templates/src/main/webapp/i18n/zh-cn/entity-audit.json
@@ -0,0 +1,49 @@
+{
+    "global": {
+        "menu": {
+            "admin": {
+                "entityAudit": "实体审计"
+            }
+        }
+    },
+    "entityAudit": {
+        "home": {
+            "title": "实体审计",
+            "filter": "筛选",
+            "entityOrTable": "实体/表",
+            "limitTo": "限制到",
+            "loadChangeList": "加载变更列表"
+        },
+        "result": {
+            "showInfo": "<strong>{{ entity }}</strong> 的最近 <strong>{{ limit }}</strong> 个变更",
+            "searchFieldLabel": "筛选:",
+            "globalFilter": "全局筛选",
+            "entityIdFilter": "实体ID筛选",
+            "tableHeader": {
+                "entityId": "实体ID",
+                "action": "操作",
+                "version": "版本",
+                "value": "值",
+                "modifiedDate": "修改日期",
+                "modifiedBy": "修改人"
+            },
+            "tableBody": {
+                "field": "字段",
+                "value": "值",
+                "viewDetails": "查看审计变更详情"
+            },
+            "noDataFound": "未找到符合条件的数据",
+            "firstAuditEntry": "此条目没有之前的版本。\n这是为此对象捕获的第一个审计条目。"
+        },
+        "detail": {
+            "close": "关闭",
+            "title": "审计详情",
+            "action": "以下数据执行了{{action}}操作",
+            "old": "旧值/移除的值",
+            "new": "新值/添加的值",
+            "changedFields": "更改字段",
+            "allFields": "所有字段",
+            "done": "完成"
+        }
+    }
+}
diff --git a/generators/vue-audit/__snapshots__/generator.spec.js.snap b/generators/vue-audit/__snapshots__/generator.spec.js.snap
new file mode 100644
index 0000000..258b5d4
--- /dev/null
+++ b/generators/vue-audit/__snapshots__/generator.spec.js.snap
@@ -0,0 +1,30 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SubGenerator angular-audit of entity-audit JHipster blueprint > run > should succeed 1`] = `
+{
+  ".yo-rc.json": {
+    "stateCleared": "modified",
+  },
+  "package.json": {
+    "stateCleared": "modified",
+  },
+  "src/main/webapp/app/admin/entity-audit/entity-audit-event.model.ts": {
+    "stateCleared": "modified",
+  },
+  "src/main/webapp/app/admin/entity-audit/entity-audit-modal.component.html": {
+    "stateCleared": "modified",
+  },
+  "src/main/webapp/app/admin/entity-audit/entity-audit-modal.component.ts": {
+    "stateCleared": "modified",
+  },
+  "src/main/webapp/app/admin/entity-audit/entity-audit.component.html": {
+    "stateCleared": "modified",
+  },
+  "src/main/webapp/app/admin/entity-audit/entity-audit.component.ts": {
+    "stateCleared": "modified",
+  },
+  "src/main/webapp/app/admin/entity-audit/entity-audit.service.ts": {
+    "stateCleared": "modified",
+  },
+}
+`;
diff --git a/generators/vue-audit/command.js b/generators/vue-audit/command.js
new file mode 100644
index 0000000..ea17f84
--- /dev/null
+++ b/generators/vue-audit/command.js
@@ -0,0 +1,5 @@
+import { asCommand } from 'generator-jhipster';
+
+export default asCommand({
+  configs: {},
+});
diff --git a/generators/vue-audit/generator.js b/generators/vue-audit/generator.js
new file mode 100644
index 0000000..09e0eec
--- /dev/null
+++ b/generators/vue-audit/generator.js
@@ -0,0 +1,80 @@
+import BaseApplicationGenerator from 'generator-jhipster/generators/base-application';
+import { clientApplicationTemplatesBlock } from 'generator-jhipster/generators/client/support';
+
+export default class extends BaseApplicationGenerator {
+  vueVersion;
+
+  constructor(args, opts, features) {
+    super(args, opts, { ...features, queueCommandTasks: true });
+  }
+
+  async beforeQueue() {
+    await this.dependsOnJHipster('bootstrap-application');
+  }
+
+  get [BaseApplicationGenerator.PREPARING]() {
+    return this.asPreparingTaskGroup({
+      loadDependabot() {
+        const {
+          dependencies: { vue: vueVersion },
+        } = this.fs.readJSON(this.templatePath('../resources/package.json'));
+        this.vueVersion = vueVersion;
+      },
+    });
+  }
+
+  get [BaseApplicationGenerator.WRITING]() {
+    return this.asWritingTaskGroup({
+      cleanup() {
+        // 可选清理逻辑
+      },
+
+      writingTemplateTask({ application }) {
+        return this.writeFiles({
+          sections: {
+            files: [
+              {
+                ...clientApplicationTemplatesBlock('admin/entity-audit/'),
+                templates: [
+                  'entity-audit-event.model.ts',
+                  'entity-audit-modal.component.vue',
+                  'entity-audit.component.vue',
+                  'entity-audit.service.ts',
+                ],
+              },
+            ],
+          },
+          context: application,
+        });
+      },
+    });
+  }
+
+  get [BaseApplicationGenerator.POST_WRITING]() {
+    return this.asPostWritingTaskGroup({
+      postWritingTemplateTask({ source }) {
+        this.packageJson.merge({
+          dependencies: {
+            vue: this.vueVersion,
+          },
+        });
+
+        if (this.options.skipMenu) return;
+
+        source.addAdminRoute?.({
+          route: 'entity-audit',
+          modulePath: './entity-audit/entity-audit.component.vue',
+          title: 'entityAudit.home.title',
+          component: true,
+        });
+
+        source.addItemToAdminMenu?.({
+          icon: 'list',
+          route: 'admin/entity-audit',
+          translationKey: 'global.menu.admin.entityAudit',
+          name: 'Entity Audit',
+        });
+      },
+    });
+  }
+}
diff --git a/generators/vue-audit/index.js b/generators/vue-audit/index.js
new file mode 100644
index 0000000..3eccd6e
--- /dev/null
+++ b/generators/vue-audit/index.js
@@ -0,0 +1,2 @@
+export { default } from './generator.js';
+export { default as command } from './command.js';
diff --git a/generators/vue-audit/resources/package.json b/generators/vue-audit/resources/package.json
new file mode 100644
index 0000000..46f6165
--- /dev/null
+++ b/generators/vue-audit/resources/package.json
@@ -0,0 +1,8 @@
+{
+  "dependencies": {
+    "deep-diff": "1.0.2",
+    "deepmerge": "4.3.1",
+    "dompurify": "3.2.6",
+    "vue-diff": "1.2.4"
+  }
+}
diff --git a/generators/vue-audit/templates/src/main/webapp/app/admin/entity-audit/entity-audit-event.model.ts.ejs b/generators/vue-audit/templates/src/main/webapp/app/admin/entity-audit/entity-audit-event.model.ts.ejs
new file mode 100644
index 0000000..cf17fc1
--- /dev/null
+++ b/generators/vue-audit/templates/src/main/webapp/app/admin/entity-audit/entity-audit-event.model.ts.ejs
@@ -0,0 +1,15 @@
+export type EntityAuditEntityChoice = {
+  name: string;
+  value: string;
+};
+
+export type EntityAuditEvent = {
+  id: number;
+  entityId: any;
+  entityType: string;
+  action: string;
+  entityValue?: string;
+  commitVersion?: number;
+  modifiedBy?: string;
+  modifiedDate: Date;
+};
\ No newline at end of file
diff --git a/generators/vue-audit/templates/src/main/webapp/app/admin/entity-audit/entity-audit-modal.component.vue.ejs b/generators/vue-audit/templates/src/main/webapp/app/admin/entity-audit/entity-audit-modal.component.vue.ejs
new file mode 100644
index 0000000..31f99e8
--- /dev/null
+++ b/generators/vue-audit/templates/src/main/webapp/app/admin/entity-audit/entity-audit-modal.component.vue.ejs
@@ -0,0 +1,202 @@
+<template>
+  <!-- ✅ 使用 v-if 控制是否渲染模态框 -->
+  <div v-if="visible" class="modal fade show d-block">
+    <div class="modal-dialog modal-lg">
+      <div class="modal-content" @click.stop>
+        <div class="modal-header">
+          <h5 class="modal-title">{{ $t('entityAudit.detail.title') }}</h5>
+          <button type="button" class="close" @click="close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body" @click.stop>
+          <p>
+            <strong>
+              <translate-html
+                path="entityAudit.detail.action"
+                :values="{ action: action }"
+              />
+            </strong>
+          </p>
+          <del class="diff deleted">{{ $t('entityAudit.detail.old') }}</del>
+          <ins class="diff inserted">{{ $t('entityAudit.detail.new') }}</ins>
+          <Diff v-if="left && right" language="json" mode="unified" :prev="left" :current="right" class="diff-view" />
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" @click="close">
+            {{ $t('entityAudit.detail.close') }}
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="modal-backdrop fade show" @click="close"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { Diff } from 'vue-diff';
+// 引入高亮，语法，高亮json
+import 'vue-diff/dist/index.css';
+import hljs from 'highlight.js/lib/core';
+import json from 'highlight.js/lib/languages/json';
+import { diff } from 'deep-diff'; // 引入 deep-diff 进行 JSON 结构比较
+import EntityAuditService from './entity-audit.service';
+import TranslateHtml from "./entity-audit/translate-html.vue";
+
+// 注册 JSON 语言支持
+hljs.registerLanguage('json', json);
+
+// 响应式状态
+const visible = ref(false);
+const left = ref('');
+const right = ref('');
+const action = ref('');
+const service = new EntityAuditService();
+
+// 直接返回 JSON 字符串，不添加注解
+function annotateJson(json) {
+  if (!json) return '{}';
+  try {
+    return JSON.stringify(json, null, 2);
+  } catch (error) {
+    console.error('JSON 解析失败:', error);
+    return '{}';
+  }
+}
+
+// ✅ 新增：获取上一版本数据并对比
+async function openChange(audit) {
+  if (!audit || !audit.entityType || !audit.entityId || !audit.commitVersion) {
+    alert('无效的审计记录');
+    return;
+  }
+
+  try {
+    const prev = await service.getPrevVersion(audit.entityType, audit.entityId, audit.commitVersion);
+
+    // 确保 entityValue 是对象
+    let prevValue = prev.entityValue || {};
+    let currentValue = audit.entityValue || {};
+
+    // 如果 entityValue 是字符串，尝试解析
+    if (typeof prevValue === 'string') {
+      try {
+        prevValue = JSON.parse(prevValue);
+      } catch (e) {
+        console.error('解析 prev.entityValue 失败:', e);
+        prevValue = {};
+      }
+    }
+    if (typeof currentValue === 'string') {
+      try {
+        currentValue = JSON.parse(currentValue);
+      } catch (e) {
+        console.error('解析 audit.entityValue 失败:', e);
+        currentValue = {};
+      }
+    }
+
+    // 使用 deep-diff 比较
+    const differences = diff(prevValue, currentValue) || [];
+    console.log('deep-diff 结果:', differences); // 调试：查看差异
+
+    // 直接序列化 JSON，不添加注解
+    left.value = annotateJson(prevValue);
+    right.value = annotateJson(currentValue);
+    action.value = audit.action || '';
+    visible.value = true;
+  } catch (err) {
+    console.error('获取上一版本失败:', err);
+    alert('无法加载上一版本数据。');
+  }
+}
+
+// 关闭模态框
+function close() {
+  visible.value = false;
+  left.value = '';
+  right.value = '';
+  action.value = '';
+}
+
+// 禁用父页面滚动
+watch(visible, newVal => {
+  if (newVal) {
+    document.body.style.overflow = 'hidden';
+    document.body.style.height = '100vh';
+  } else {
+    document.body.style.overflow = '';
+    document.body.style.height = '';
+  }
+});
+
+defineExpose({ openChange });
+</script>
+
+<style scoped>
+.modal {
+  display: block;
+  z-index: 1050;
+}
+.modal-dialog {
+  max-width: 800px;
+  z-index: 1060; /* 确保模态框在遮罩层之上 */
+}
+.modal-content {
+  max-height: 80vh; /* 限制模态框高度 */
+  background-color: #fff;
+}
+.modal-body {
+  max-height: 40vh; /* 确保内容触发滚动 */
+  overflow-y: auto; /* 启用垂直滚动条 */
+  padding: 15px;
+  position: relative;
+  z-index: 1070; /* 提高 z-index 确保滚动条可点击 */
+}
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1040;
+}
+.diff.deleted {
+  background-color: #ffe6e6;
+  padding: 2px 4px;
+  margin-right: 8px;
+}
+.diff.inserted {
+  background-color: #e6ffe6;
+  padding: 2px 4px;
+}
+.diff-view {
+  margin-top: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 10px;
+  max-height: 100%;
+  overflow: hidden;
+  pointer-events: auto;
+}
+/* 为 vue-diff 的删除部分添加删除线 */
+.vue-diff__line--removed,
+.vue-diff-cell-removed {
+  text-decoration: line-through;
+  background-color: #ffe6e6;
+}
+
+/* 自定义滚动条样式 */
+.modal-body::-webkit-scrollbar {
+  width: 8px;
+}
+.modal-body::-webkit-scrollbar-thumb {
+  background-color: #888;
+  border-radius: 4px;
+}
+.modal-body::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+}
+</style>
diff --git a/generators/vue-audit/templates/src/main/webapp/app/admin/entity-audit/entity-audit.component.vue.ejs b/generators/vue-audit/templates/src/main/webapp/app/admin/entity-audit/entity-audit.component.vue.ejs
new file mode 100644
index 0000000..bf04a9e
--- /dev/null
+++ b/generators/vue-audit/templates/src/main/webapp/app/admin/entity-audit/entity-audit.component.vue.ejs
@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <h2>{{ $t('entityAudit.home.title') }}</h2>
+
+    <div v-if="error" class="alert alert-danger">
+      {{ error }}
+    </div>
+
+    <div>
+      <h4>{{ $t('entityAudit.home.filter') }}</h4>
+
+      <form @submit.prevent="loadChanges" class="form-inline">
+        <div class="d-flex mb-2">
+          <label class="form-control-label mr-sm-2 col-2" for="entityName">{{ $t('entityAudit.home.entityOrTable') }}</label>
+          <select v-model="selectedEntity" class="form-control mb-2 mr-sm-2 mb-sm-0" id="entityName" required>
+            <option value="">Select</option>
+            <option v-for="entity in entities" :key="entity.value" :value="entity.value">{{ entity.name }}</option>
+          </select>
+
+          <label class="form-control-label mr-sm-2 col-2" for="limit">{{ $t('entityAudit.home.limitTo') }}</label>
+          <select v-model="selectedLimit" class="form-control mb-2 mr-sm-2 mb-sm-0" id="limit" required>
+            <option v-for="limit in limits" :key="limit" :value="limit">{{ limit }}</option>
+          </select>
+
+          <button class="btn btn-primary float-right col-2" type="submit" :disabled="!selectedEntity">
+            <i class="fa fa-sync"></i>
+            <span>{{ $t('entityAudit.home.loadChangeList') }}</span>
+          </button>
+        </div>
+      </form>
+    </div>
+
+    <div v-if="loading">
+      Loading...
+    </div>
+
+    <div v-else>
+      <translate-html
+        v-if="audits.length > 0 || filterEntityId"
+        path="entityAudit.result.showInfo"
+        :values="{ entity: selectedEntity, limit: selectedLimit }"
+      />
+
+      <form class="form-inline mb-2">
+        <div class="form-group">
+          <label for="searchFieldEntityId">{{ $t('entityAudit.result.searchFieldLabel') }}</label>
+          <input
+            type="text"
+            class="form-control ml-2"
+            id="searchFieldEntityId"
+            v-model="filterEntityId"
+            :placeholder="$t('entityAudit.result.entityIdFilter')"
+          />
+        </div>
+      </form>
+
+      <table class="table table-condensed table-striped table-bordered">
+        <thead>
+          <tr>
+            <th @click="orderBy('entityId')">{{ $t('entityAudit.result.tableHeader.entityId') }}</th>
+            <th @click="orderBy('action')">{{ $t('entityAudit.result.tableHeader.action') }}</th>
+            <th @click="orderBy('commitVersion')">{{ $t('entityAudit.result.tableHeader.version') }}</th>
+            <th>{{ $t('entityAudit.result.tableHeader.value') }}</th>
+            <th @click="orderBy('modifiedDate')">{{ $t('entityAudit.result.tableHeader.modifiedDate') }}</th>
+            <th @click="orderBy('modifiedBy')">{{ $t('entityAudit.result.tableHeader.modifiedBy') }}</th>
+            <th><i class="fa fa-eye"></i></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="audit in filteredAudits" :key="audit.id">
+            <td>{{ audit.entityId }}</td>
+            <td>{{ audit.action }}</td>
+            <td>{{ audit.commitVersion }}</td>
+            <td><pre class="code">{{ JSON.stringify(audit.entityValue, null, 2) }}</pre></td>
+            <td>{{ formatDate(audit.modifiedDate) }}</td>
+            <td>{{ audit.modifiedBy }}</td>
+            <td>
+              <button
+                type="button"
+                class="btn btn-info btn-xs"
+                @click="openChange(audit)"
+              >
+                <i class="fa fa-eye"></i>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <p v-if="audits.length === 0">{{ $t('entityAudit.result.noDataFound') }}</p>
+    </div>
+
+    <!-- ✅ 增加 modal 组件引用 -->
+    <EntityAuditModal ref="modal" />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import EntityAuditModal from './entity-audit-modal.component.vue';
+import EntityAuditService from './entity-audit.service';
+import TranslateHtml from "./entity-audit/translate-html.vue";
+
+const { t } = useI18n();
+
+const service = new EntityAuditService();
+const modal = ref(null);
+
+const entities = ref([]);
+const selectedEntity = ref('');
+const selectedLimit = ref(25);
+const limits = [25, 50, 100, 200];
+const loading = ref(false);
+const filterEntityId = ref('');
+const audits = ref([]);
+const orderProp = ref('modifiedDate');
+const ascending = ref(false);
+
+const filteredAudits = computed(() => {
+  let result = [...audits.value];
+
+  if (filterEntityId.value) {
+    result = result.filter(audit => audit.entityId.toString() === filterEntityId.value);
+  }
+
+  result.sort((a, b) => {
+    const aVal = a[orderProp.value];
+    const bVal = b[orderProp.value];
+    if (aVal === bVal) return 0;
+    return ascending.value ? (aVal < bVal ? -1 : 1) : aVal > bVal ? -1 : 1;
+  });
+
+  return result;
+});
+
+
+function orderBy(prop) {
+  ascending.value = orderProp.value === prop ? !ascending.value : true;
+  orderProp.value = prop;
+}
+
+function formatDate(date) {
+  return new Date(date).toLocaleString();
+}
+
+async function loadChanges() {
+  if (!selectedEntity.value) return;
+  loading.value = true;
+  try {
+    const res = await service.findByEntity(selectedEntity.value, selectedLimit.value);
+    audits.value = res.map(it => ({
+      ...it,
+      entityValue: JSON.parse(it.entityValue || '{}'),
+    }));
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function openChange(audit) {
+  if (!audit.commitVersion || audit.commitVersion < 2) {
+    alert(t('entityAudit.result.firstAuditEntry'));
+  } else {
+    // const prev = await service.getPrevVersion(selectedEntity.value, audit.entityId, audit.commitVersion);
+    // 增加给prev的entityType更新值
+    audit.entityType = selectedEntity.value;
+    modal.value?.openChange(audit);
+  }
+}
+
+onMounted(() => {
+  service.getAllAudited().then(data => {
+    entities.value = data;
+  });
+});
+</script>
+
+<style scoped>
+.code {
+  background: #dcdada;
+  padding: 10px;
+}
+</style>
diff --git a/generators/vue-audit/templates/src/main/webapp/app/admin/entity-audit/entity-audit.service.ts.ejs b/generators/vue-audit/templates/src/main/webapp/app/admin/entity-audit/entity-audit.service.ts.ejs
new file mode 100644
index 0000000..6d21016
--- /dev/null
+++ b/generators/vue-audit/templates/src/main/webapp/app/admin/entity-audit/entity-audit.service.ts.ejs
@@ -0,0 +1,19 @@
+import axios from 'axios';
+
+class EntityAuditService {
+  getAllAudited() {
+    return axios.get('api/audits/entity/all').then(res => res.data);
+  }
+
+  findByEntity(entity, limit) {
+    return axios.get(`api/audits/entity/changes?entityType=${entity}&limit=${limit}`).then(res => res.data);
+  }
+
+  getPrevVersion(qualifiedName, entityId, commitVersion) {
+    return axios.get(
+      `api/audits/entity/changes/version/previous?qualifiedName=${qualifiedName}&entityId=${entityId}&commitVersion=${commitVersion}`
+    ).then(res => res.data);
+  }
+}
+
+export default EntityAuditService;
diff --git a/generators/vue-audit/templates/src/main/webapp/app/admin/entity-audit/translate-html.vue.ejs b/generators/vue-audit/templates/src/main/webapp/app/admin/entity-audit/translate-html.vue.ejs
new file mode 100644
index 0000000..bd79db8
--- /dev/null
+++ b/generators/vue-audit/templates/src/main/webapp/app/admin/entity-audit/translate-html.vue.ejs
@@ -0,0 +1,90 @@
+<!-- TranslateHtml.vue -->
+<template>
+  <component :is="tag" v-html="translatedHtml" v-bind="$attrs"></component>
+</template>
+
+<script>
+import { computed, defineComponent } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+export default defineComponent({
+  name: 'TranslateHtml',
+  inheritAttrs: false,
+  props: {
+    // i18n 键路径
+    path: {
+      type: String,
+      required: true
+    },
+    // 传递给翻译的参数
+    values: {
+      type: Object,
+      default: () => ({})
+    },
+    // 渲染的标签，默认为 span
+    tag: {
+      type: String,
+      default: 'span'
+    },
+    // 是否使用 Angular 风格的占位符 {{ }}
+    angularStyle: {
+      type: Boolean,
+      default: true
+    },
+    // 自定义占位符正则（高级用法）
+    placeholderPattern: {
+      type: RegExp,
+      default: null
+    }
+  },
+  setup(props) {
+    const { tm, locale } = useI18n()
+
+    const translatedHtml = computed(() => {
+      try {
+        // 使用 tm() 获取原始消息，而不是 t()
+        // tm() 返回原始消息对象，不会进行编译
+        const messages = tm(props.path)
+
+        // 获取当前语言的消息
+        let text = ''
+        if (typeof messages === 'string') {
+          text = messages
+        } else if (messages && messages[locale.value]) {
+          text = messages[locale.value]
+        } else if (messages) {
+          // 如果是对象但没有当前语言，尝试获取第一个可用的值
+          const availableLocale = Object.keys(messages)[0]
+          if (availableLocale) {
+            text = messages[availableLocale]
+          }
+        }
+
+        // 如果还是没有找到，返回路径
+        if (!text) {
+          console.warn(`TranslateHtml: 未找到翻译 - ${props.path}`)
+          return `[${props.path}]`
+        }
+
+        // 手动替换 Angular 风格的占位符
+        if (props.values && Object.keys(props.values).length > 0) {
+          Object.entries(props.values).forEach(([key, value]) => {
+            // 支持 {{ key }} 和 {{key}} 两种格式
+            const regex = new RegExp(`\\{\\{\\s*${key}\\s*\\}\\}`, 'g')
+            text = text.replace(regex, value)
+          })
+        }
+
+        return text
+      } catch (error) {
+        console.error(`TranslateHtml: 翻译失败 - ${props.path}`, error)
+        return `[翻译错误: ${props.path}]`
+      }
+    })
+
+    return {
+      translatedHtml
+    }
+  }
+})
+</script>