diff --git a/locales/en.yaml b/locales/en.yaml
index 81e6365..50ee227 100644
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -103,6 +103,9 @@ menus:FourZeroFour: "404"
 menus:FourZeroOne: "403"
 menus:Five: "500"
 menus:SystemConfig: System Config
+menus:CodeManager: Code Manager
+menus:CodeQueryIndex: Code Query
+menus:CodeQueryLog: Query Log
 status:Load: Loading...
 status:Message: Message
 status:Notify: Notify
diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
index 5dc004d..be636b9 100644
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -103,6 +103,9 @@ menus:FourZeroFour: "404"
 menus:FourZeroOne: "403"
 menus:Five: "500"
 menus:SystemConfig: 系统配置
+menus:CodeManager: 编码管理
+menus:CodeQueryIndex: 编码查询
+menus:CodeQueryLog: 查询日志
 status:Load: 加载中...
 status:Message: 消息
 status:Notify: 通知
diff --git a/package.json b/package.json
index 93ad9d6..3b92ab9 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,8 @@
     "vue-json-pretty": "^2.4.0",
     "vue-router": "^4.5.0",
     "vue-tippy": "^6.5.0",
-    "vue-types": "^5.1.3"
+    "vue-types": "^5.1.3",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.6.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2633f03..89d1c6f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -98,6 +98,9 @@ importers:
       vue-types:
         specifier: ^5.1.3
         version: 5.1.3(vue@3.5.13(typescript@5.6.3))
+      xlsx:
+        specifier: ^0.18.5
+        version: 0.18.5
     devDependencies:
       '@commitlint/cli':
         specifier: ^19.6.0
@@ -1298,6 +1301,10 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  adler-32@1.3.1:
+    resolution: {integrity: sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==, tarball: https://registry.npmmirror.com/adler-32/-/adler-32-1.3.1.tgz}
+    engines: {node: '>=0.8'}
+
   ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
 
@@ -1446,6 +1453,10 @@ packages:
   caniuse-lite@1.0.30001687:
     resolution: {integrity: sha512-0S/FDhf4ZiqrTUiQ39dKeUjYRjkv7lOZU1Dgif2rIqrTzX/1wV2hfKu9TOm1IHkdSijfLswxTFzl/cvir+SLSQ==}
 
+  cfb@1.2.2:
+    resolution: {integrity: sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==, tarball: https://registry.npmmirror.com/cfb/-/cfb-1.2.2.tgz}
+    engines: {node: '>=0.8'}
+
   chalk@4.1.1:
     resolution: {integrity: sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==}
     engines: {node: '>=10'}
@@ -1498,6 +1509,10 @@ packages:
   code-inspector-plugin@0.18.2:
     resolution: {integrity: sha512-LKOhA4YsoUZ6Dq4OQKP7G+kPcfeYGLoIQz7EDG4yoL5mqSu+uWR+0QvzoDc4HGXQ0jpkzEwlatbH6fBlbPiwKQ==}
 
+  codepage@1.15.0:
+    resolution: {integrity: sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==, tarball: https://registry.npmmirror.com/codepage/-/codepage-1.15.0.tgz}
+    engines: {node: '>=0.8'}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -1576,6 +1591,11 @@ packages:
       typescript:
         optional: true
 
+  crc-32@1.2.2:
+    resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==, tarball: https://registry.npmmirror.com/crc-32/-/crc-32-1.2.2.tgz}
+    engines: {node: '>=0.8'}
+    hasBin: true
+
   cropperjs@1.6.2:
     resolution: {integrity: sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA==, tarball: https://registry.npmmirror.com/cropperjs/-/cropperjs-1.6.2.tgz}
 
@@ -1990,6 +2010,10 @@ packages:
     resolution: {integrity: sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==}
     engines: {node: '>= 6'}
 
+  frac@1.1.2:
+    resolution: {integrity: sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==, tarball: https://registry.npmmirror.com/frac/-/frac-1.1.2.tgz}
+    engines: {node: '>=0.8'}
+
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
@@ -3200,6 +3224,10 @@ packages:
     resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
     engines: {node: '>= 10.x'}
 
+  ssf@0.11.2:
+    resolution: {integrity: sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==, tarball: https://registry.npmmirror.com/ssf/-/ssf-0.11.2.tgz}
+    engines: {node: '>=0.8'}
+
   std-env@3.8.0:
     resolution: {integrity: sha512-Bc3YwwCB+OzldMxOXJIIvC6cPRWr/LxOp48CdQTOkPyk/t4JWWJbrilwBd7RJzKV8QW7tJkcgAmeuLLJugl5/w==}
 
@@ -3633,10 +3661,18 @@ packages:
     resolution: {integrity: sha512-c9bZp7b5YtRj2wOe6dlj32MK+Bx/M/d+9VB2SHM1OtsUHR0aV0tdP6DWh/iMt0kWi1t5g1Iudu6hQRNd1A4PVA==}
     engines: {node: '>=18'}
 
+  wmf@1.0.2:
+    resolution: {integrity: sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==, tarball: https://registry.npmmirror.com/wmf/-/wmf-1.0.2.tgz}
+    engines: {node: '>=0.8'}
+
   word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
 
+  word@0.3.0:
+    resolution: {integrity: sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==, tarball: https://registry.npmmirror.com/word/-/word-0.3.0.tgz}
+    engines: {node: '>=0.8'}
+
   wrap-ansi@6.2.0:
     resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==, tarball: https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz}
     engines: {node: '>=8'}
@@ -3657,6 +3693,11 @@ packages:
     resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  xlsx@0.18.5:
+    resolution: {integrity: sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==, tarball: https://registry.npmmirror.com/xlsx/-/xlsx-0.18.5.tgz}
+    engines: {node: '>=0.8'}
+    hasBin: true
+
   xml-name-validator@4.0.0:
     resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
     engines: {node: '>=12'}
@@ -4825,6 +4866,8 @@ snapshots:
 
   acorn@8.14.0: {}
 
+  adler-32@1.3.1: {}
+
   ajv@6.12.6:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -4988,6 +5031,11 @@ snapshots:
 
   caniuse-lite@1.0.30001687: {}
 
+  cfb@1.2.2:
+    dependencies:
+      adler-32: 1.3.1
+      crc-32: 1.2.2
+
   chalk@4.1.1:
     dependencies:
       ansi-styles: 4.3.0
@@ -5068,6 +5116,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  codepage@1.15.0: {}
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -5136,6 +5186,8 @@ snapshots:
     optionalDependencies:
       typescript: 5.6.3
 
+  crc-32@1.2.2: {}
+
   cropperjs@1.6.2: {}
 
   cross-spawn@7.0.6:
@@ -5613,6 +5665,8 @@ snapshots:
       combined-stream: 1.0.8
       mime-types: 2.1.35
 
+  frac@1.1.2: {}
+
   fraction.js@4.3.7: {}
 
   framesync@6.1.2:
@@ -6744,6 +6798,10 @@ snapshots:
 
   split2@4.2.0: {}
 
+  ssf@0.11.2:
+    dependencies:
+      frac: 1.1.2
+
   std-env@3.8.0:
     optional: true
 
@@ -7257,8 +7315,12 @@ snapshots:
     dependencies:
       string-width: 7.2.0
 
+  wmf@1.0.2: {}
+
   word-wrap@1.2.5: {}
 
+  word@0.3.0: {}
+
   wrap-ansi@6.2.0:
     dependencies:
       ansi-styles: 4.3.0
@@ -7288,6 +7350,16 @@ snapshots:
       imurmurhash: 0.1.4
       signal-exit: 4.1.0
 
+  xlsx@0.18.5:
+    dependencies:
+      adler-32: 1.3.1
+      cfb: 1.2.2
+      codepage: 1.15.0
+      crc-32: 1.2.2
+      ssf: 0.11.2
+      wmf: 1.0.2
+      word: 0.3.0
+
   xml-name-validator@4.0.0: {}
 
   y18n@4.0.3: {}
diff --git a/src/views/codes/index.vue b/src/views/codes/index.vue
new file mode 100644
index 0000000..7f6f7da
--- /dev/null
+++ b/src/views/codes/index.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="p-4">
+    <!-- 查询区域 -->
+    <el-card class="mb-4">
+      <div class="flex items-center space-x-4">
+        <!-- 富文本输入框 -->
+        <el-input
+          v-model="queryText"
+          type="textarea"
+          autosize
+          :rows="2"
+          placeholder="请输入查询文本"
+          class="flex-1"
+        />
+        <!-- 查询按钮 -->
+        <el-button type="primary" @click="handleQuery">查询</el-button>
+        <!-- 清空查询按钮 -->
+        <el-button @click="clearQuery">清空查询</el-button>
+        <!-- 上传文件按钮 -->
+        <el-button @click="toggleUploadArea">
+          {{ showUploadArea ? "隐藏上传区域" : "上传文件" }}
+        </el-button>
+      </div>
+    </el-card>
+
+    <!-- 上传文件区域 -->
+    <el-card v-if="showUploadArea" class="mb-4">
+      <div class="flex items-center space-x-4">
+        <!-- 拖拽上传组件 -->
+        <el-upload
+          class="upload-demo"
+          drag
+          action="https://jsonplaceholder.typicode.com/posts/"
+          :on-success="handleUploadSuccess"
+        >
+          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        </el-upload>
+        <!-- 下载模板按钮 -->
+        <el-button type="primary" @click="downloadTemplate"
+          >下载上传文件模板</el-button
+        >
+      </div>
+    </el-card>
+
+    <!-- 查询结果区域 -->
+    <el-card>
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column prop="queryText" label="查询文本" />
+        <el-table-column prop="result1Code" label="查询结果1编码" />
+        <el-table-column prop="result1" label="查询结果1" />
+        <el-table-column prop="result2Code" label="查询结果2编码" />
+        <el-table-column prop="result2" label="查询结果2" />
+        <el-table-column label="操作">
+          <template #default="scope">
+            <el-button type="text" @click="showDetail(scope.row)"
+              >详情</el-button
+            >
+            <el-button type="text" @click="showFeedback(scope.row)"
+              >反馈</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <!-- 详情抽屉 -->
+    <el-drawer v-model="detailVisible" title="详情" :with-header="false">
+      <div class="p-4">
+        <h3 class="text-lg font-bold mb-4">查询详情</h3>
+        <p><strong>查询文本:</strong> {{ currentRow.queryText }}</p>
+        <p><strong>查询结果1编码:</strong> {{ currentRow.result1Code }}</p>
+        <p><strong>查询结果1:</strong> {{ currentRow.result1 }}</p>
+        <p><strong>查询结果2编码:</strong> {{ currentRow.result2Code }}</p>
+        <p><strong>查询结果2:</strong> {{ currentRow.result2 }}</p>
+      </div>
+    </el-drawer>
+
+    <!-- 反馈弹窗 -->
+    <el-dialog v-model="feedbackVisible" title="反馈" width="30%">
+      <el-form :model="feedbackForm" label-width="120px">
+        <el-form-item label="查询结果是否正确">
+          <el-radio-group v-model="feedbackForm.isCorrect">
+            <el-radio :label="true">正确</el-radio>
+            <el-radio :label="false">错误</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="!feedbackForm.isCorrect" label="正确结果">
+          <el-input
+            v-model="feedbackForm.correctResult"
+            type="textarea"
+            :rows="2"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="feedbackVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitFeedback">提交</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { UploadFilled } from "@element-plus/icons-vue";
+defineOptions({
+  name: "CodeQueryIndex"
+});
+// 查询文本
+const queryText = ref("");
+
+// 上传文件区域显示状态
+const showUploadArea = ref(false);
+
+// 表格数据
+const tableData = ref([
+  {
+    queryText: "示例查询文本1",
+    result1Code: "001",
+    result1: "结果1",
+    result2Code: "002",
+    result2: "结果2"
+  },
+  {
+    queryText: "示例查询文本2",
+    result1Code: "003",
+    result1: "结果3",
+    result2Code: "004",
+    result2: "结果4"
+  }
+]);
+
+// 详情抽屉显示状态
+const detailVisible = ref(false);
+const currentRow = ref({});
+
+// 反馈弹窗显示状态
+const feedbackVisible = ref(false);
+const feedbackForm = ref({
+  isCorrect: true,
+  correctResult: ""
+});
+
+// 查询按钮点击事件
+const handleQuery = () => {
+  console.log("查询文本:", queryText.value);
+  // 这里可以添加查询逻辑
+};
+
+// 清空查询按钮点击事件
+const clearQuery = () => {
+  queryText.value = "";
+};
+
+// 上传文件按钮点击事件
+const toggleUploadArea = () => {
+  showUploadArea.value = !showUploadArea.value;
+};
+
+// 文件上传成功事件
+const handleUploadSuccess = (response: any, file: any) => {
+  console.log("文件上传成功:", file);
+};
+
+// 下载模板按钮点击事件
+const downloadTemplate = () => {
+  console.log("下载模板");
+  // 这里可以添加下载模板逻辑
+};
+
+// 显示详情抽屉
+const showDetail = (row: any) => {
+  currentRow.value = row;
+  detailVisible.value = true;
+};
+
+// 显示反馈弹窗
+const showFeedback = (row: any) => {
+  currentRow.value = row;
+  feedbackVisible.value = true;
+};
+
+// 提交反馈
+const submitFeedback = () => {
+  console.log("提交反馈:", feedbackForm.value);
+  feedbackVisible.value = false;
+};
+</script>
+
+<style scoped lang="scss">
+.upload-demo {
+  flex: 1;
+}
+</style>
diff --git a/src/views/codes/log.vue b/src/views/codes/log.vue
new file mode 100644
index 0000000..3171086
--- /dev/null
+++ b/src/views/codes/log.vue
@@ -0,0 +1,250 @@
+<template>
+  <div class="p-4">
+    <!-- 查询区域 -->
+    <el-card class="mb-4">
+      <div class="flex items-center space-x-4">
+        <!-- 查询文本 -->
+        <el-input
+          v-model="queryParams.queryText"
+          placeholder="请输入查询文本"
+          class="flex-1"
+        />
+        <!-- 查询时间范围 -->
+        <el-date-picker
+          v-model="queryParams.timeRange"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+        />
+        <!-- 查询按钮 -->
+        <el-button type="primary" @click="handleQuery">查询</el-button>
+        <!-- 清空表单按钮 -->
+        <el-button @click="clearQuery">清空表单</el-button>
+      </div>
+    </el-card>
+
+    <!-- 结果显示区域 -->
+    <el-card>
+      <div class="mb-4 flex items-center space-x-4">
+        <!-- 全部导出按钮 -->
+        <el-button type="primary" @click="exportAll">全部导出</el-button>
+        <!-- 多选导出按钮 -->
+        <el-button
+          type="primary"
+          :disabled="selectedRows.length === 0"
+          @click="exportSelected"
+        >
+          导出选中项
+        </el-button>
+      </div>
+      <el-table
+        :data="pagedTableData"
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="queryText" label="查询文本" />
+        <el-table-column prop="result1Code" label="查询结果编码1" />
+        <el-table-column prop="result1" label="查询结果1" />
+        <el-table-column prop="result2Code" label="查询结果编码2" />
+        <el-table-column prop="result2" label="查询结果2" />
+        <el-table-column prop="queryTime" label="查询时间" />
+        <el-table-column label="操作">
+          <template #default="scope">
+            <el-button type="text" @click="showDetail(scope.row)"
+              >详情</el-button
+            >
+            <el-button type="text" @click="showFeedback(scope.row)"
+              >反馈</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页组件 -->
+      <el-pagination
+        class="mt-4"
+        background
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        :page-sizes="[10, 20, 50, 100]"
+        @size-change="handleSizeChange"
+        @current-change="handlePageChange"
+      />
+    </el-card>
+
+    <!-- 详情抽屉 -->
+    <el-drawer v-model="detailVisible" title="详情" :with-header="false">
+      <div class="p-4">
+        <h3 class="text-lg font-bold mb-4">查询详情</h3>
+        <p><strong>查询文本:</strong> {{ currentRow.queryText }}</p>
+        <p><strong>查询结果编码1:</strong> {{ currentRow.result1Code }}</p>
+        <p><strong>查询结果1:</strong> {{ currentRow.result1 }}</p>
+        <p><strong>查询结果编码2:</strong> {{ currentRow.result2Code }}</p>
+        <p><strong>查询结果2:</strong> {{ currentRow.result2 }}</p>
+        <p><strong>查询时间:</strong> {{ currentRow.queryTime }}</p>
+      </div>
+    </el-drawer>
+
+    <!-- 反馈弹窗 -->
+    <el-dialog v-model="feedbackVisible" title="反馈" width="30%">
+      <el-form :model="feedbackForm" label-width="120px">
+        <el-form-item label="查询结果是否正确">
+          <el-radio-group v-model="feedbackForm.isCorrect">
+            <el-radio :label="true">正确</el-radio>
+            <el-radio :label="false">错误</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="!feedbackForm.isCorrect" label="正确结果">
+          <el-input
+            v-model="feedbackForm.correctResult"
+            type="textarea"
+            :rows="2"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="feedbackVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitFeedback">提交</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { ElMessage } from "element-plus";
+import * as XLSX from "xlsx";
+
+defineOptions({
+  name: "CodeQueryLog"
+});
+// 查询参数
+const queryParams = ref({
+  queryText: "",
+  timeRange: []
+});
+
+// 模拟数据
+const mockData = () => {
+  const data = [];
+  for (let i = 1; i <= 100; i++) {
+    data.push({
+      queryText: `示例查询文本${i}`,
+      result1Code: `00${i}`,
+      result1: `结果${i}`,
+      result2Code: `01${i}`,
+      result2: `结果${i + 1}`,
+      queryTime: new Date().toLocaleString()
+    });
+  }
+  return data;
+};
+
+// 表格数据
+const tableData = ref(mockData());
+
+// 分页相关
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = computed(() => tableData.value.length);
+
+// 分页数据
+const pagedTableData = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value;
+  const end = start + pageSize.value;
+  return tableData.value.slice(start, end);
+});
+
+// 选中行数据
+const selectedRows = ref<any[]>([]);
+
+// 详情抽屉显示状态
+const detailVisible = ref(false);
+const currentRow = ref({});
+
+// 反馈弹窗显示状态
+const feedbackVisible = ref(false);
+const feedbackForm = ref({
+  isCorrect: true,
+  correctResult: ""
+});
+
+// 查询按钮点击事件
+const handleQuery = () => {
+  console.log("查询参数:", queryParams.value);
+  // 这里可以添加查询逻辑
+};
+
+// 清空表单按钮点击事件
+const clearQuery = () => {
+  queryParams.value = {
+    queryText: "",
+    timeRange: []
+  };
+};
+
+// 处理表格多选
+const handleSelectionChange = (selection: any[]) => {
+  selectedRows.value = selection;
+};
+
+// 导出全部数据为Excel
+const exportAll = () => {
+  const worksheet = XLSX.utils.json_to_sheet(tableData.value);
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(workbook, worksheet, "查询日志");
+  XLSX.writeFile(workbook, "查询日志.xlsx");
+  ElMessage.success("导出成功");
+};
+
+// 导出选中数据为Excel
+const exportSelected = () => {
+  if (selectedRows.value.length === 0) {
+    ElMessage.warning("请选择要导出的数据");
+    return;
+  }
+  const worksheet = XLSX.utils.json_to_sheet(selectedRows.value);
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(workbook, worksheet, "查询日志");
+  XLSX.writeFile(workbook, "选中查询日志.xlsx");
+  ElMessage.success("导出成功");
+};
+
+// 分页大小变化事件
+const handleSizeChange = (size: number) => {
+  pageSize.value = size;
+  currentPage.value = 1; // 重置到第一页
+};
+
+// 页码变化事件
+const handlePageChange = (page: number) => {
+  currentPage.value = page;
+};
+
+// 显示详情抽屉
+const showDetail = (row: any) => {
+  currentRow.value = row;
+  detailVisible.value = true;
+};
+
+// 显示反馈弹窗
+const showFeedback = (row: any) => {
+  currentRow.value = row;
+  feedbackVisible.value = true;
+};
+
+// 提交反馈
+const submitFeedback = () => {
+  console.log("提交反馈:", feedbackForm.value);
+  feedbackVisible.value = false;
+};
+</script>
+
+<style scoped lang="scss">
+.upload-demo {
+  flex: 1;
+}
+</style>