This commit is contained in:
vipg
2025-11-12 16:22:52 +08:00
parent 0ea63d2ba7
commit d030e07e51
3 changed files with 421 additions and 4 deletions

32
.gitignore vendored
View File

@@ -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

View File

@@ -1,2 +1 @@
# asset_assistant
# Frontend

390
frontend/test.html Normal file
View 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>