生成器
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>
|
||||
</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 */
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user