生成器
This commit is contained in:
parent
a1e7309528
commit
c09f41f40c
842
src/components/backend/CodeGenerator.vue
Normal file
842
src/components/backend/CodeGenerator.vue
Normal file
@ -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>
|
||||||
@ -17,6 +17,9 @@
|
|||||||
<li @click="selectAdminView('service-hall')" :class="{ active: currentAdminView === 'service-hall' }"><a>办事大厅</a></li>
|
<li @click="selectAdminView('service-hall')" :class="{ active: currentAdminView === 'service-hall' }"><a>办事大厅</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="sidebar-footer">
|
<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 @click="goToHomePage" class="home-button sidebar-button">
|
||||||
返回主界面
|
返回主界面
|
||||||
</button>
|
</button>
|
||||||
@ -35,6 +38,9 @@
|
|||||||
<div v-else-if="currentAdminView === 'service-hall'">
|
<div v-else-if="currentAdminView === 'service-hall'">
|
||||||
<ServiceHallView />
|
<ServiceHallView />
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else-if="currentAdminView === 'code-generator'">
|
||||||
|
<CodeGenerator />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -46,6 +52,7 @@ import { useRouter } from 'vue-router'
|
|||||||
import TournamentList from '../../components/backend/TournamentList.vue'
|
import TournamentList from '../../components/backend/TournamentList.vue'
|
||||||
import PlayerList from '../../components/backend/PlayerList.vue'
|
import PlayerList from '../../components/backend/PlayerList.vue'
|
||||||
import ServiceHallView from '../../components/backend/ServiceHallView.vue'
|
import ServiceHallView from '../../components/backend/ServiceHallView.vue'
|
||||||
|
import CodeGenerator from '../../components/backend/CodeGenerator.vue'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const hasToken = ref(false)
|
const hasToken = ref(false)
|
||||||
@ -216,6 +223,17 @@ const selectAdminView = (viewName) => {
|
|||||||
background-color: #0284c7; /* Darker sky blue */
|
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 {
|
.sidebar-button.logout-button {
|
||||||
background-color: #ef4444; /* Red */
|
background-color: #ef4444; /* Red */
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user