add
This commit is contained in:
32
.gitignore
vendored
32
.gitignore
vendored
@@ -1,7 +1,35 @@
|
||||
# ---> Xcode
|
||||
# ==============================
|
||||
# Mac 系统垃圾文件(重点过滤)
|
||||
# ==============================
|
||||
# 桌面服务存储文件
|
||||
.DS_Store
|
||||
# 文件夹缩略图缓存
|
||||
.DocumentRevisions-V100
|
||||
.fseventsd
|
||||
.Spotlight-V100
|
||||
.TemporaryItems
|
||||
.Trashes
|
||||
.VolumeIcon.icns
|
||||
# 磁盘检测日志
|
||||
.com.apple.timemachine.donotpresent
|
||||
# 旧版 macOS 缓存
|
||||
.AppleDouble
|
||||
.LSOverride
|
||||
# 扩展属性文件
|
||||
._*
|
||||
# 网络磁盘缓存
|
||||
.networkTrashFolder
|
||||
# 空文件夹占位符(避免误提交空目录)
|
||||
.empty
|
||||
|
||||
# ==============================
|
||||
# XCode
|
||||
# ==============================
|
||||
## User settings
|
||||
xcuserdata/
|
||||
|
||||
# ==============================
|
||||
# Go
|
||||
# ==============================
|
||||
shared_data/
|
||||
|
||||
app.log
|
||||
@@ -1,2 +1 @@
|
||||
# asset_assistant
|
||||
|
||||
# Frontend
|
||||
|
||||
390
frontend/test.html
Normal file
390
frontend/test.html
Normal file
@@ -0,0 +1,390 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>EasyUI 后台管理系统</title>
|
||||
<!-- 引入必要资源 -->
|
||||
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.14/themes/default/easyui.css">
|
||||
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.14/themes/icon.css">
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.14/jquery.easyui.min.js"></script>
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.14/locale/easyui-lang-zh_CN.js"></script>
|
||||
|
||||
<style>
|
||||
/* 全局样式调整 */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
/* 顶部导航样式 */
|
||||
.top-nav {
|
||||
height: 60px;
|
||||
background: #2d3748;
|
||||
color: #fff;
|
||||
line-height: 60px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.logo {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
.user-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: #4299e1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
/* 主容器布局 */
|
||||
.main-container {
|
||||
display: flex;
|
||||
height: calc(100vh - 60px);
|
||||
}
|
||||
/* 左侧菜单样式 */
|
||||
.left-menu {
|
||||
width: 220px;
|
||||
background: #374151;
|
||||
color: #fff;
|
||||
}
|
||||
.easyui-tree {
|
||||
background: transparent;
|
||||
}
|
||||
.easyui-tree li a {
|
||||
color: #e5e7eb !important;
|
||||
height: 40px !important;
|
||||
line-height: 40px !important;
|
||||
}
|
||||
.easyui-tree li a:hover, .easyui-tree li.selected a {
|
||||
background: #4b5563 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
/* 内容区域样式 */
|
||||
.content-area {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
.panel-header {
|
||||
background: #4299e1 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
/* 表单样式调整 */
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.form-label {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.left-menu {
|
||||
width: 60px;
|
||||
}
|
||||
.logo span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="easyui-layout">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-nav">
|
||||
<div class="logo">
|
||||
<i class="icon-menu"></i>
|
||||
<span>EasyUI 管理系统</span>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<span>欢迎回来,管理员</span>
|
||||
<div class="user-avatar">管</div>
|
||||
<a href="javascript:;" class="easyui-linkbutton" plain="true" iconCls="icon-exit" onclick="logout()">退出登录</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主容器 -->
|
||||
<div class="main-container">
|
||||
<!-- 左侧菜单 -->
|
||||
<div class="left-menu" id="menuTree"></div>
|
||||
|
||||
<!-- 右侧内容区域 -->
|
||||
<div class="content-area">
|
||||
<div class="easyui-panel" title="数据管理" style="padding: 20px;">
|
||||
<!-- 工具栏 -->
|
||||
<div style="margin-bottom: 15px;">
|
||||
<a href="javascript:;" class="easyui-linkbutton" iconCls="icon-add" onclick="addData()">新增</a>
|
||||
<a href="javascript:;" class="easyui-linkbutton" iconCls="icon-edit" onclick="editData()">编辑</a>
|
||||
<a href="javascript:;" class="easyui-linkbutton" iconCls="icon-remove" onclick="deleteData()">删除</a>
|
||||
<input class="easyui-searchbox" style="width: 300px; float: right;"
|
||||
prompt="请输入关键词搜索" onsearch="searchData()">
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<table id="dataGrid" class="easyui-datagrid"
|
||||
style="width:100%;height:calc(100vh - 220px);"
|
||||
data-options="
|
||||
singleSelect:true,
|
||||
fitColumns:true,
|
||||
pagination:true,
|
||||
rownumbers:true,
|
||||
pageSize:10,
|
||||
pageList:[10,20,30],
|
||||
url:'#',
|
||||
method:'get'">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'id',width:50,align:'center'">ID</th>
|
||||
<th data-options="field:'name',width:100">名称</th>
|
||||
<th data-options="field:'category',width:80,align:'center'">分类</th>
|
||||
<th data-options="field:'status',width:80,align:'center',formatter:statusFormatter">状态</th>
|
||||
<th data-options="field:'createTime',width:150,align:'center'">创建时间</th>
|
||||
<th data-options="field:'operate',width:120,align:'center',formatter:operateFormatter">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<div id="dataDialog" class="easyui-dialog" title="数据操作"
|
||||
style="width:500px;height:350px;"
|
||||
data-options="closed:true,modal:true,buttons:[
|
||||
{text:'保存',iconCls:'icon-save',handler:saveData},
|
||||
{text:'取消',iconCls:'icon-cancel',handler:function(){$('#dataDialog').dialog('close');}}
|
||||
]">
|
||||
<form id="dataForm" method="post">
|
||||
<div class="form-group">
|
||||
<label class="form-label">名称:</label>
|
||||
<input class="easyui-textbox" name="name" style="width:350px;" required="true">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">分类:</label>
|
||||
<select class="easyui-combobox" name="category" style="width:350px;" required="true">
|
||||
<option value="分类1">分类1</option>
|
||||
<option value="分类2">分类2</option>
|
||||
<option value="分类3">分类3</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">状态:</label>
|
||||
<select class="easyui-combobox" name="status" style="width:350px;" required="true">
|
||||
<option value="1">启用</option>
|
||||
<option value="0">禁用</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">备注:</label>
|
||||
<textarea class="easyui-textbox" name="remark" style="width:350px;height:100px;" multiline="true"></textarea>
|
||||
</div>
|
||||
<input type="hidden" name="id">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 页面加载完成后初始化
|
||||
$(function() {
|
||||
// 初始化左侧菜单树
|
||||
initMenuTree();
|
||||
|
||||
// 加载表格数据
|
||||
loadGridData();
|
||||
});
|
||||
|
||||
// 初始化左侧菜单树
|
||||
function initMenuTree() {
|
||||
$('#menuTree').tree({
|
||||
data: [
|
||||
{
|
||||
text: '系统管理',
|
||||
iconCls: 'icon-sys',
|
||||
children: [
|
||||
{text: '用户管理', iconCls: 'icon-user', url: 'user.html'},
|
||||
{text: '角色管理', iconCls: 'icon-role', url: 'role.html'},
|
||||
{text: '权限管理', iconCls: 'icon-perm', url: 'perm.html'}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '数据管理',
|
||||
iconCls: 'icon-data',
|
||||
children: [
|
||||
{text: '基础数据', iconCls: 'icon-base', url: 'base.html', selected: true},
|
||||
{text: '日志管理', iconCls: 'icon-log', url: 'log.html'},
|
||||
{text: '统计分析', iconCls: 'icon-stat', url: 'stat.html'}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '系统设置',
|
||||
iconCls: 'icon-set',
|
||||
children: [
|
||||
{text: '基本设置', iconCls: 'icon-basic', url: 'setting.html'},
|
||||
{text: '安全设置', iconCls: 'icon-safe', url: 'safe.html'}
|
||||
]
|
||||
}
|
||||
],
|
||||
lines: true,
|
||||
onClick: function(node) {
|
||||
// 菜单点击事件(实际项目中可用于加载对应页面)
|
||||
console.log('点击菜单:', node.text, ',对应页面:', node.url);
|
||||
// 这里可以通过AJAX加载页面内容到content-area
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 加载表格数据(模拟数据)
|
||||
function loadGridData() {
|
||||
// 模拟后端返回数据
|
||||
var mockData = {
|
||||
total: 30,
|
||||
rows: [
|
||||
{id: 1, name: '测试数据1', category: '分类1', status: 1, createTime: '2025-11-01 10:20:30'},
|
||||
{id: 2, name: '测试数据2', category: '分类2', status: 1, createTime: '2025-11-02 14:30:15'},
|
||||
{id: 3, name: '测试数据3', category: '分类3', status: 0, createTime: '2025-11-03 09:15:22'},
|
||||
{id: 4, name: '测试数据4', category: '分类1', status: 1, createTime: '2025-11-04 16:40:55'},
|
||||
{id: 5, name: '测试数据5', category: '分类2', status: 0, createTime: '2025-11-05 11:25:33'}
|
||||
]
|
||||
};
|
||||
|
||||
$('#dataGrid').datagrid('loadData', mockData);
|
||||
}
|
||||
|
||||
// 状态格式化函数
|
||||
function statusFormatter(value) {
|
||||
return value === 1 ? '<span style="color:green;">启用</span>' : '<span style="color:red;">禁用</span>';
|
||||
}
|
||||
|
||||
// 操作列格式化函数
|
||||
function operateFormatter(value, row) {
|
||||
return `
|
||||
<a href="javascript:;" class="easyui-linkbutton" plain="true" iconCls="icon-edit" onclick="editData(${row.id})">编辑</a>
|
||||
<a href="javascript:;" class="easyui-linkbutton" plain="true" iconCls="icon-remove" onclick="deleteData(${row.id})">删除</a>
|
||||
`;
|
||||
}
|
||||
|
||||
// 新增数据
|
||||
function addData() {
|
||||
$('#dataForm').form('clear');
|
||||
$('#dataDialog').dialog('setTitle', '新增数据').dialog('open');
|
||||
}
|
||||
|
||||
// 编辑数据
|
||||
function editData(id) {
|
||||
// 如果传入id,直接根据id获取数据;否则获取选中行
|
||||
var row = id
|
||||
? $('#dataGrid').datagrid('findRow', id)
|
||||
: $('#dataGrid').datagrid('getSelected');
|
||||
|
||||
if (!row) {
|
||||
$.messager.alert('提示', '请选择要编辑的数据!', 'info');
|
||||
return;
|
||||
}
|
||||
|
||||
// 填充表单数据
|
||||
$('#dataForm').form('load', row);
|
||||
$('#dataDialog').dialog('setTitle', '编辑数据').dialog('open');
|
||||
}
|
||||
|
||||
// 删除数据
|
||||
function deleteData(id) {
|
||||
var row = id
|
||||
? $('#dataGrid').datagrid('findRow', id)
|
||||
: $('#dataGrid').datagrid('getSelected');
|
||||
|
||||
if (!row) {
|
||||
$.messager.alert('提示', '请选择要删除的数据!', 'info');
|
||||
return;
|
||||
}
|
||||
|
||||
$.messager.confirm('确认', '确定要删除【' + row.name + '】吗?', function(r) {
|
||||
if (r) {
|
||||
// 模拟删除操作
|
||||
$('#dataGrid').datagrid('deleteRow', $('#dataGrid').datagrid('getRowIndex', row));
|
||||
$.messager.show({title: '成功', msg: '数据删除成功!'});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 保存数据
|
||||
function saveData() {
|
||||
$('#dataForm').form('submit', {
|
||||
url: '#', // 实际项目中替换为后端接口
|
||||
onSubmit: function() {
|
||||
return $(this).form('validate'); // 表单验证
|
||||
},
|
||||
success: function() {
|
||||
var id = $('input[name="id"]').val();
|
||||
var data = $('#dataForm').form('getData');
|
||||
|
||||
if (id) {
|
||||
// 编辑操作:更新表格数据
|
||||
var rowIndex = $('#dataGrid').datagrid('getRowIndex', $('#dataGrid').datagrid('findRow', id));
|
||||
$('#dataGrid').datagrid('updateRow', {
|
||||
index: rowIndex,
|
||||
row: data
|
||||
});
|
||||
} else {
|
||||
// 新增操作:添加到表格
|
||||
data.id = Math.floor(Math.random() * 1000); // 模拟生成ID
|
||||
data.createTime = new Date().format('yyyy-MM-dd hh:mm:ss');
|
||||
$('#dataGrid').datagrid('insertRow', {
|
||||
index: 0,
|
||||
row: data
|
||||
});
|
||||
}
|
||||
|
||||
$('#dataDialog').dialog('close');
|
||||
$.messager.show({title: '成功', msg: '数据保存成功!'});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 搜索数据
|
||||
function searchData(value) {
|
||||
$('#dataGrid').datagrid('load', {
|
||||
keyword: value // 实际项目中传递关键词到后端查询
|
||||
});
|
||||
}
|
||||
|
||||
// 退出登录
|
||||
function logout() {
|
||||
$.messager.confirm('确认', '确定要退出登录吗?', function(r) {
|
||||
if (r) {
|
||||
window.location.href = 'login.html'; // 跳转到登录页
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 日期格式化扩展
|
||||
Date.prototype.format = function(fmt) {
|
||||
var o = {
|
||||
"M+": this.getMonth() + 1,
|
||||
"d+": this.getDate(),
|
||||
"h+": this.getHours(),
|
||||
"m+": this.getMinutes(),
|
||||
"s+": this.getSeconds(),
|
||||
"q+": Math.floor((this.getMonth() + 3) / 3),
|
||||
"S": this.getMilliseconds()
|
||||
};
|
||||
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
||||
for (var k in o)
|
||||
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
||||
return fmt;
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user