From c09f41f40ce3c6c8a388f722d53eae11fe3b8406 Mon Sep 17 00:00:00 2001
From: Kunagisa <1549184870@qq.com>
Date: Mon, 9 Jun 2025 23:53:23 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=9F=E6=88=90=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/backend/CodeGenerator.vue | 842 +++++++++++++++++++++++
 src/views/backend/Dashboard.vue          |  18 +
 2 files changed, 860 insertions(+)
 create mode 100644 src/components/backend/CodeGenerator.vue

diff --git a/src/components/backend/CodeGenerator.vue b/src/components/backend/CodeGenerator.vue
new file mode 100644
index 0000000..a0872cf
--- /dev/null
+++ b/src/components/backend/CodeGenerator.vue
@@ -0,0 +1,842 @@
+<template>
+  <div class="code-generator-container">
+    <div class="editor-pane">
+      <h2 class="title">MySQL 表结构生成前端代码</h2>
+      <p class="description">
+        在左侧输入 <code>CREATE TABLE</code> 语句，右侧将实时预览生成的UI界面。
+      </p>
+
+      <div class="form-group">
+        <label for="sql-input">SQL 输入：</label>
+        <textarea
+          id="sql-input"
+          v-model="sqlInput"
+          rows="15"
+          placeholder="在此处粘贴 CREATE TABLE 语句..."
+          @input="generateCode"
+        ></textarea>
+      </div>
+
+      <div class="actions">
+        <button
+          @click="downloadCode"
+          :disabled="!generatedCode"
+          class="action-button download-button"
+        >
+          下载 .vue 文件
+        </button>
+      </div>
+
+      <div v-if="generatedCode" class="generated-code-preview">
+        <h3 class="preview-title">代码预览 ({{ generatedFileName }})</h3>
+        <pre><code>{{ generatedCode }}</code></pre>
+      </div>
+    </div>
+
+    <div class="preview-pane">
+      <h2 class="preview-area-title">界面预览</h2>
+      <div v-if="parsedTableInfo" class="preview-content-wrapper">
+        <div class="device-frame">
+          <!-- 这里是模拟的组件预览 -->
+          <div class="service-hall-container-preview">
+            <div class="actions-bar">
+                <h3>{{ parsedTableInfo.tableComment || toPascalCase(parsedTableInfo.tableName) + '管理' }}</h3>
+                <div class="buttons-wrapper">
+                    <button class="add-button">新增{{ parsedTableInfo.tableComment || toPascalCase(parsedTableInfo.tableName) }}</button>
+                    <button class="refresh-button">刷新列表</button>
+                </div>
+            </div>
+
+            <div class="table-responsive-wrapper">
+                <table class="custom-table">
+                <thead>
+                    <tr>
+                    <th v-for="column in parsedTableInfo.columns" :key="column.name">{{ column.comment || column.name }}</th>
+                    <th>操作</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                    <td v-for="column in parsedTableInfo.columns" :key="column.name">示例数据 1</td>
+                    <td>
+                        <button class="action-button edit">编辑</button>
+                        <button class="action-button delete">删除</button>
+                    </td>
+                    </tr>
+                    <tr>
+                    <td v-for="column in parsedTableInfo.columns" :key="column.name">示例数据 2</td>
+                    <td>
+                        <button class="action-button edit">编辑</button>
+                        <button class="action-button delete">删除</button>
+                    </td>
+                    </tr>
+                </tbody>
+                </table>
+            </div>
+
+            <!-- 模拟弹窗 -->
+            <div class="modal-overlay-preview-active">
+              <div class="modal-content-preview">
+                <h3>新增 {{ parsedTableInfo.tableComment || toPascalCase(parsedTableInfo.tableName) }}</h3>
+                <form>
+                  <div class="form-group-preview" v-for="column in parsedTableInfo.columns.filter(c => c.name !== parsedTableInfo.primaryKey)" :key="column.name">
+                    <label>{{ column.comment || column.name }}:</label>
+                    <input type="text" :placeholder="`请输入${column.comment || column.name}`" />
+                  </div>
+                  <div class="form-actions-preview">
+                    <button type="submit" class="submit-button">保存</button>
+                    <button type="button" class="cancel-button">取消</button>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else class="no-preview">
+        <p>输入合法的建表语句后<br/>将在此处显示界面预览</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const sqlInput = ref('');
+const generatedCode = ref('');
+const generatedFileName = ref('');
+const parsedTableInfo = ref(null);
+
+/**
+ * 将字符串转换为帕斯卡命名法（大驼峰）
+ * @param {string} str 输入字符串 (e.g., user_list)
+ * @returns {string} 帕斯卡命名法的字符串 (e.g., UserList)
+ */
+const toPascalCase = (str) => {
+  if (!str) return '';
+  return str
+    .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
+    .map(x => x.charAt(0).toUpperCase() + x.slice(1).toLowerCase())
+    .join('');
+};
+
+/**
+ * 解析 CREATE TABLE SQL 语句
+ * @param {string} sql - CREATE TABLE 语句
+ * @returns {object|null} 解析后的表结构对象，或在解析失败时返回 null
+ */
+const parseSql = (sql) => {
+  try {
+    const tableInfo = {
+      tableName: '',
+      tableComment: '',
+      columns: [],
+      primaryKey: 'id' // 默认主键为id
+    };
+
+    if (!sql || !sql.trim().toLowerCase().startsWith('create table')) {
+        return null;
+    }
+
+    // 1. 提取表名
+    const tableNameMatch = sql.match(/CREATE TABLE `?(\w+)`?/i);
+    if (!tableNameMatch) throw new Error('无法解析表名');
+    tableInfo.tableName = tableNameMatch[1];
+
+    // 2. 提取表注释
+    const tableCommentMatch = sql.match(/\)\s*ENGINE=.*COMMENT='([^']*)'/i);
+    if (tableCommentMatch) {
+      tableInfo.tableComment = tableCommentMatch[1];
+    }
+
+    // 3. 提取字段定义
+    const columnsContentMatch = sql.match(/\(([\s\S]*)\)/);
+    if (!columnsContentMatch) throw new Error('无法解析字段定义');
+    const columnsContent = columnsContentMatch[1];
+
+    const lines = columnsContent.split('\n');
+    let columns = [];
+    lines.forEach(line => {
+      const trimmedLine = line.trim();
+      
+      // 提取主键
+      const primaryKeyMatch = trimmedLine.match(/PRIMARY KEY \(`?(\w+)`?\)/i);
+      if (primaryKeyMatch) {
+          tableInfo.primaryKey = primaryKeyMatch[1];
+          return; // 继续下一行
+      }
+      
+      // 忽略 KEY `...` (索引) 或其他非字段行
+      if (!trimmedLine.startsWith('`')) return;
+      
+      const columnMatch = trimmedLine.match(/`(\w+)`\s+([\w\(\),_ ]+)\s*(.*)/);
+      if (columnMatch) {
+        const name = columnMatch[1];
+        const type = columnMatch[2].trim();
+        const rest = columnMatch[3];
+
+        let comment = '';
+        const commentMatch = rest.match(/COMMENT '([^']*)'/i);
+        if (commentMatch) {
+          comment = commentMatch[1];
+        }
+        
+        columns.push({ name, type, comment: comment || name });
+      }
+    });
+
+    if (columns.length === 0) throw new Error('未能解析任何字段');
+    tableInfo.columns = columns;
+    return tableInfo;
+  } catch (error) {
+    console.error('SQL 解析失败:', error);
+    alert(`SQL 解析失败: ${error.message}`);
+    return null;
+  }
+};
+
+/**
+ * 根据表结构生成 Vue 组件代码
+ * @param {object} tableInfo - 解析后的表结构
+ * @returns {string} Vue 组件代码字符串
+ */
+const generateVueComponent = (tableInfo) => {
+  const componentName = toPascalCase(tableInfo.tableName);
+  const tableTitle = tableInfo.tableComment || `${componentName}管理`;
+  const tableComment = tableInfo.tableComment || componentName;
+
+  const formFields = tableInfo.columns
+    .filter(c => c.name !== tableInfo.primaryKey)
+    .map(c => `
+          <div class="form-group">
+            <label for="add-${c.name}">${c.comment || c.name}:</label>
+            <input id="add-${c.name}" type="text" v-model="editableItem.${c.name}" placeholder="请输入${c.comment || c.name}">
+          </div>`).join('');
+
+  const dataFields = tableInfo.columns.map(c => `  ${c.name}: '',`).join('\n');
+  
+  const scriptContent = `
+import { ref, onMounted } from 'vue';
+
+// 假设的API函数，需要您自己在/api/index.js或类似文件中创建
+// import { get${componentName}List, create${componentName}, update${componentName}, delete${componentName} } from '@/api';
+
+const items = ref([]);
+const loading = ref(false);
+const showModal = ref(false);
+const isEditing = ref(false);
+const editableItem = ref({
+${dataFields}
+});
+const editError = ref('');
+
+onMounted(() => {
+  fetchItems();
+});
+
+const API_URL = '/api/${tableInfo.tableName}'; // 模拟API路径
+
+const fetchItems = async () => {
+  loading.value = true;
+  try {
+    // const response = await get${componentName}List();
+    // items.value = response.data;
+
+    // --- 示例数据 ---
+    items.value = [
+      { ${tableInfo.columns.map((c, i) => `${c.name}: "示例值 ${i + 1}"`).join(', ')} },
+      { ${tableInfo.columns.map((c, i) => `${c.name}: "示例值 ${i + 2}"`).join(', ')} }
+    ];
+    // --- 示例数据结束 ---
+
+  } catch (error) {
+    console.error('获取列表失败:', error);
+    items.value = [];
+  } finally {
+    loading.value = false;
+  }
+};
+
+const openModal = (item = null) => {
+  if (item) {
+    isEditing.value = true;
+    editableItem.value = { ...item };
+  } else {
+    isEditing.value = false;
+    editableItem.value = { 
+${dataFields}
+    };
+  }
+  editError.value = '';
+  showModal.value = true;
+};
+
+const closeModal = () => {
+  showModal.value = false;
+};
+
+const saveItem = async () => {
+  editError.value = '';
+  try {
+    if (isEditing.value) {
+      // await update${componentName}(editableItem.value.${tableInfo.primaryKey}, editableItem.value);
+       console.log('更新项目:', editableItem.value);
+    } else {
+      // await create${componentName}(editableItem.value);
+      console.log('创建项目:', editableItem.value);
+    }
+    closeModal();
+    fetchItems();
+    alert('操作成功！');
+  } catch (error) {
+    console.error('保存失败:', error);
+    editError.value = error.message || '操作失败，请重试。';
+  }
+};
+
+const confirmDeleteItem = async (id) => {
+  if (window.confirm('确定要删除此项吗？')) {
+    try {
+      // await delete${componentName}(id);
+      console.log('删除项目, id:', id);
+      fetchItems();
+      alert('删除成功！');
+    } catch (error) {
+      console.error('删除失败:', error);
+      alert('删除失败: ' + (error.message || '请稍后重试'));
+    }
+  }
+};
+
+// 辅助函数
+const formatDate = (dateString) => {
+  if (!dateString) return 'N/A';
+  try {
+    const date = new Date(dateString);
+    return isNaN(date.getTime()) ? dateString : date.toLocaleString();
+  } catch (e) {
+    return dateString;
+  }
+};
+`;
+
+  const styleContent = `
+.generated-component-container {
+  /* This is the root container, no extra styles needed */
+}
+
+.actions-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.actions-bar h3 {
+  margin: 0;
+  font-size: 1.5rem;
+  color: #333;
+}
+
+.buttons-wrapper {
+  display: flex;
+  gap: 10px;
+}
+
+.add-button, .refresh-button {
+  padding: 10px 15px;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.2s;
+}
+
+.add-button {
+  background-color: #007bff;
+}
+
+.add-button:hover {
+  background-color: #0056b3;
+}
+
+.refresh-button {
+  background-color: #6c757d;
+}
+
+.refresh-button:hover {
+  background-color: #5a6268;
+}
+
+.table-responsive-wrapper {
+  overflow-x: auto;
+}
+
+.custom-table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 600px;
+}
+
+.custom-table th, .custom-table td {
+  border: 1px solid #dee2e6;
+  padding: 12px 15px;
+  text-align: left;
+  vertical-align: middle;
+}
+
+.custom-table thead th {
+  background-color: #e9ecef;
+  color: #495057;
+  font-weight: 600;
+}
+
+.custom-table tbody tr:nth-of-type(even) {
+  background-color: #f8f9fa;
+}
+
+.custom-table tbody tr:hover {
+  background-color: #e2e6ea;
+}
+
+.action-button {
+  padding: 5px 10px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  margin-right: 5px;
+  color: #fff;
+}
+
+.action-button.edit {
+  background-color: #ffc107;
+}
+
+.action-button.delete {
+  background-color: #dc3545;
+}
+
+/* Modal Styles */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1050;
+}
+
+.modal-content {
+  background: white;
+  padding: 25px;
+  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+  width: 90%;
+  max-width: 500px;
+}
+
+.modal-content h2 {
+  margin-top: 0;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: 600;
+}
+
+.form-group input, .form-group textarea {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.submit-button, .cancel-button {
+  padding: 10px 20px;
+  border: none;
+  cursor: pointer;
+}
+
+.submit-button {
+  background-color: #28a745;
+  color: white;
+}
+
+.cancel-button {
+  background-color: #6c757d;
+  color: white;
+}
+
+.error-message {
+  color: #dc3545;
+  margin-top: 15px;
+}
+`;
+
+  return `
+<template>
+  <div class="generated-component-container">
+    <div class="actions-bar">
+      <h3>${tableTitle}</h3>
+      <div class="buttons-wrapper">
+        <button @click="openModal()" class="add-button">新增${tableComment}</button>
+        <button @click="fetchItems" class="refresh-button">刷新列表</button>
+      </div>
+    </div>
+
+    <div class="table-responsive-wrapper">
+      <table class="custom-table">
+        <thead>
+          <tr>
+${tableInfo.columns.map(c => `            <th>${c.comment || c.name}</th>`).join('\n')}
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="loading">
+            <td :colspan="${tableInfo.columns.length + 1}" style="text-align: center;">加载中...</td>
+          </tr>
+          <tr v-else-if="items.length === 0">
+            <td :colspan="${tableInfo.columns.length + 1}" style="text-align: center;">暂无数据</td>
+          </tr>
+          <tr v-for="item in items" :key="item.${tableInfo.primaryKey}">
+${tableInfo.columns.map(c => `            <td>{{ item.${c.name} }}</td>`).join('\n')}
+            <td>
+              <button @click="openModal(item)" class="action-button edit">编辑</button>
+              <button @click="confirmDeleteItem(item.${tableInfo.primaryKey})" class="action-button delete">删除</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 弹窗 -->
+    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+      <div class="modal-content">
+        <h2>{{ isEditing ? '编辑' : '新增' }}${tableComment}</h2>
+        <form @submit.prevent="saveItem">
+${formFields}
+          <div class="form-actions">
+            <button type="submit" class="submit-button">保存</button>
+            <button type="button" @click="closeModal" class="cancel-button">取消</button>
+          </div>
+          <p v-if="editError" class="error-message">{{ editError }}</p>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+${scriptContent}
+</scr` + `ipt>
+
+<style scoped>
+${styleContent}
+</style>
+`;
+};
+
+const generateCode = () => {
+  if (!sqlInput.value.trim()) {
+    parsedTableInfo.value = null;
+    generatedCode.value = '';
+    return;
+  }
+  
+  const tableInfo = parseSql(sqlInput.value);
+  
+  if (tableInfo) {
+    generatedCode.value = generateVueComponent(tableInfo);
+    generatedFileName.value = `${toPascalCase(tableInfo.tableName)}.vue`;
+    parsedTableInfo.value = tableInfo;
+  } else {
+    generatedCode.value = '';
+    generatedFileName.value = '';
+    parsedTableInfo.value = null;
+  }
+};
+
+const downloadCode = () => {
+  if (!generatedCode.value) return;
+
+  const blob = new Blob([generatedCode.value], { type: 'text/plain;charset=utf-8' });
+  const href = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = href;
+  link.download = generatedFileName.value;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(href);
+};
+</script>
+
+<style scoped>
+.code-generator-container {
+  display: flex;
+  height: calc(100vh - 100px);
+  background-color: #fff;
+  border: 1px solid #dee2e6;
+}
+
+.editor-pane {
+  flex: 1;
+  padding: 25px;
+  overflow-y: auto;
+  border-right: 1px solid #dee2e6;
+}
+
+.preview-pane {
+  flex: 1;
+  padding: 25px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  color: #2c3e50;
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+.description {
+  color: #555;
+  text-align: center;
+  margin-bottom: 25px;
+  line-height: 1.6;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: #333;
+}
+
+textarea {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  box-sizing: border-box;
+  resize: vertical;
+  min-height: 200px;
+}
+
+.actions {
+  display: flex;
+  gap: 15px;
+  justify-content: center;
+  margin-bottom: 25px;
+}
+
+.action-button {
+  padding: 10px 20px;
+  border-radius: 6px;
+  border: none;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s, transform 0.1s;
+  color: white;
+}
+
+.action-button:active {
+  transform: scale(0.98);
+}
+
+.download-button {
+  background-color: #007bff;
+}
+
+.download-button:hover {
+  background-color: #0069d9;
+}
+
+.action-button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+.generated-code-preview {
+  margin-top: 20px;
+  border-top: 1px solid #eee;
+  padding-top: 20px;
+}
+
+.preview-title, .preview-area-title {
+  color: #333;
+  margin-bottom: 15px;
+  text-align: center;
+}
+
+pre {
+  background-color: #2d2d2d;
+  color: #f1f1f1;
+  padding: 15px;
+  border-radius: 6px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+/* Preview Pane Styles */
+.no-preview {
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #f8f9fa;
+  color: #6c757d;
+  text-align: center;
+  font-size: 16px;
+}
+
+.preview-content-wrapper {
+  flex-grow: 1;
+}
+
+.device-frame {
+  /* The frame is now the container itself, no extra styles needed */
+}
+
+/* Styles for the simulated component inside preview */
+.service-hall-container-preview .actions-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.service-hall-container-preview h3 {
+  margin: 0;
+  font-size: 1.5rem;
+  color: #333;
+}
+
+.service-hall-container-preview .buttons-wrapper {
+  display: flex;
+  gap: 10px;
+}
+
+.service-hall-container-preview .add-button, 
+.service-hall-container-preview .refresh-button {
+  padding: 10px 15px;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.service-hall-container-preview .add-button { background-color: #007bff; }
+.service-hall-container-preview .refresh-button { background-color: #6c757d; }
+
+.service-hall-container-preview .table-responsive-wrapper {
+  overflow-x: auto;
+}
+
+.service-hall-container-preview .custom-table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 600px;
+}
+
+.service-hall-container-preview .custom-table th, 
+.service-hall-container-preview .custom-table td {
+  border: 1px solid #dee2e6;
+  padding: 12px 15px;
+  text-align: left;
+}
+
+.service-hall-container-preview .custom-table thead th {
+  background-color: #e9ecef;
+}
+
+.service-hall-container-preview .action-button {
+  padding: 5px 10px;
+  border: none;
+  color: white;
+  margin-right: 5px;
+}
+.service-hall-container-preview .action-button.edit { background-color: #ffc107; }
+.service-hall-container-preview .action-button.delete { background-color: #dc3545; }
+
+.modal-overlay-preview-active {
+  position: relative;
+  margin-top: 20px;
+  padding: 20px;
+  background-color: #f8f9fa;
+  border: 1px solid #dee2e6;
+}
+.modal-content-preview {
+  background: white;
+  padding: 25px;
+  border: 1px solid #ccc;
+  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+  width: 100%;
+}
+.modal-content-preview h3 {
+  margin-top: 0;
+  margin-bottom: 20px;
+}
+.form-group-preview {
+  margin-bottom: 15px;
+}
+.form-group-preview label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: 600;
+}
+.form-group-preview input {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+}
+.form-actions-preview {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px;
+}
+.form-actions-preview .submit-button,
+.form-actions-preview .cancel-button { 
+    background-color: #28a745; 
+    color: white; 
+    border: none; 
+    padding: 10px 20px;
+}
+.form-actions-preview .cancel-button { 
+    background-color: #6c757d; 
+}
+</style>
\ No newline at end of file
diff --git a/src/views/backend/Dashboard.vue b/src/views/backend/Dashboard.vue
index 4fca733..c007836 100644
--- a/src/views/backend/Dashboard.vue
+++ b/src/views/backend/Dashboard.vue
@@ -17,6 +17,9 @@
           <li @click="selectAdminView('service-hall')" :class="{ active: currentAdminView === 'service-hall' }"><a>办事大厅</a></li>
         </ul>
         <div class="sidebar-footer">
+          <button @click="selectAdminView('code-generator')" :class="['sidebar-button', 'code-generator-button', { 'active': currentAdminView === 'code-generator' }]">
+            代码生成器
+          </button>
           <button @click="goToHomePage" class="home-button sidebar-button">
             返回主界面
           </button>
@@ -35,6 +38,9 @@
         <div v-else-if="currentAdminView === 'service-hall'">
           <ServiceHallView />
         </div>
+        <div v-else-if="currentAdminView === 'code-generator'">
+          <CodeGenerator />
+        </div>
       </div>
     </div>
   </div>
@@ -46,6 +52,7 @@ import { useRouter } from 'vue-router'
 import TournamentList from '../../components/backend/TournamentList.vue'
 import PlayerList from '../../components/backend/PlayerList.vue'
 import ServiceHallView from '../../components/backend/ServiceHallView.vue'
+import CodeGenerator from '../../components/backend/CodeGenerator.vue'
 
 const router = useRouter()
 const hasToken = ref(false)
@@ -216,6 +223,17 @@ const selectAdminView = (viewName) => {
   background-color: #0284c7; /* Darker sky blue */
 }
 
+.sidebar-button.code-generator-button {
+  background-color: #10b981; /* Emerald green */
+}
+.sidebar-button.code-generator-button:hover {
+  background-color: #059669; /* Darker emerald green */
+}
+.sidebar-button.code-generator-button.active {
+  background-color: #047857;
+  color: #ffffff;
+}
+
 .sidebar-button.logout-button {
   background-color: #ef4444; /* Red */
 }