edgardong/someone-oa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化原型

Browse Source
This commit is contained in:
edgardong 2025-12-11 19:04:46 +08:00
parent 73380271cd
commit b372bb6572
59 changed files with 379 additions and 1296 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pc/approval-center.html
View File

@ -185,7 +185,7 @@
</div>
</div>
<script src="common.js"></script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
const tasks = [
{ id: 'LX-202412-001', type: '立项', project: '25-1 XX工程项目', status: '待处理', node: '部门审核', submitter: '李四', time: '2024-12-02', tab: 'todo' },
@ -357,7 +357,7 @@
}
function goHome() { window.location.href = 'dashboard.html'; }
injectLayout('approval');
initUnifiedLayout('approval');
// 初始化
resetFilters();
switchTab('todo');

4
pc/approval-detail.html
View File

@ -621,9 +621,9 @@
CommonUtils.downloadFile(fileName, fileId);
}
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('approval');
initUnifiedLayout('approval');
</script>
</body>
</html>

6
pc/audit-log.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作日志与审计 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; background: #f0f2f5; overflow: hidden; }
@ -112,7 +114,7 @@
</div>
</div>
<script src="common.js"></script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
const logs = [
{ id:1, time:'2024-12-02 10:20', user:'张三', module:'项目', type:'新增', target:'XX工程 25-1', ip:'192.168.1.10', diff:null },
@ -186,7 +188,7 @@
function goHome() { window.location.href = 'dashboard.html'; }
renderTable();
injectLayout('audit');
initUnifiedLayout('audit');
</script>
</body>
</html>

6
pc/bidding-detail.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>投标详情 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -427,9 +429,9 @@
});
}
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('project');
initUnifiedLayout('project');
</script>
</body>
</html>

6
pc/change-password.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>修改密码 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -130,9 +132,9 @@
});
});
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout(\'home\');
initUnifiedLayout('home');
</script>
</div>
</body>

76
pc/common.js
View File

@ -13,25 +13,21 @@ window.CommonUtils = {
</div>
`;
const bgColor = type === 'success'
? 'linear-gradient(135deg, #67c23a 0%, #5daf34 100%)'
: 'linear-gradient(135deg, #f56c6c 0%, #e85a5a 100%)';
const bgColor = type === 'success' ? '#67c23a' : '#f56c6c';
messageDiv.style.cssText = `
position: fixed;
top: 24px;
right: 24px;
padding: 16px 24px;
top: 20px;
right: 20px;
padding: 12px 24px;
background: ${bgColor};
color: white;
border-radius: 12px;
border-radius: 4px;
z-index: 10000;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 12px rgba(0,0,0,0.15);
animation: slideInRight 0.3s;
font-size: 14px;
font-weight: 500;
min-width: 200px;
backdrop-filter: blur(10px);
`;
document.body.appendChild(messageDiv);
setTimeout(() => {
@ -45,24 +41,12 @@ window.CommonUtils = {
style.id = 'message-animation-style';
style.textContent = `
@keyframes slideInRight {
from {
transform: translateX(400px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
from { transform: translateX(400px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutRight {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(400px);
opacity: 0;
}
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(400px); opacity: 0; }
}
`;
document.head.appendChild(style);
@ -95,35 +79,19 @@ window.CommonUtils = {
const style = document.createElement('style');
style.id = 'common-modal-style';
style.textContent = `
.common-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999;
animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.modal-overlay { position: absolute; width: 100%; height: 100%;
background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
.common-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; }
.modal-overlay { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
background: white; border-radius: 16px; min-width: 500px; max-width: 800px; max-height: 80vh;
overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.modal-header { padding: 20px 24px; border-bottom: 1px solid #f0f0f0; display: flex;
justify-content: space-between; align-items: center;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); }
.modal-header h3 { margin: 0; font-size: 18px; font-weight: 600;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text; }
.modal-close { cursor: pointer; font-size: 24px; color: #909399;
width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
border-radius: 50%; transition: all 0.3s; }
.modal-close:hover { background: #f5f5f5; color: #303133; transform: rotate(90deg); }
.modal-body { padding: 24px; max-height: 60vh; overflow-y: auto; }
.modal-footer { padding: 16px 24px; border-top: 1px solid #f0f0f0; text-align: right;
background: #fafafa; }
background: white; border-radius: 4px; min-width: 500px; max-width: 800px; max-height: 80vh;
overflow-y: auto; box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
.modal-header { padding: 16px 20px; border-bottom: 1px solid #e6e6e6; display: flex;
justify-content: space-between; align-items: center; }
.modal-header h3 { margin: 0; font-size: 16px; font-weight: 500; }
.modal-close { cursor: pointer; font-size: 24px; color: #909399; }
.modal-close:hover { color: #303133; }
.modal-body { padding: 20px; max-height: 60vh; overflow-y: auto; }
.modal-footer { padding: 16px 20px; border-top: 1px solid #e6e6e6; text-align: right; }
.modal-footer .btn { margin-left: 12px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalSlideIn {
from { transform: translate(-50%, -45%); opacity: 0; }
to { transform: translate(-50%, -50%); opacity: 1; }
}
`;
document.head.appendChild(style);
}

6
pc/contract-detail.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>合同详情 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -410,9 +412,9 @@
}, 50);
}
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('project');
initUnifiedLayout('project');
</script>
</body>
</html>

14
pc/dashboard.html
View File

@ -9,7 +9,7 @@
<link rel="stylesheet" href="enhanced-styles.css">
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; background:linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%); overflow:hidden; }
body { font-family:"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; background:#f0f2f5; overflow:hidden; }
.layout-container { height:100vh; display:flex; flex-direction:column; }
.navbar { height:50px; background:#fff; border-bottom:1px solid #e6e6e6; display:flex; align-items:center; justify-content:space-between; padding:0 20px; box-shadow:0 1px 4px rgba(0,21,41,.08); }
.navbar-left { display:flex; align-items:center; }
@ -21,7 +21,7 @@
.navbar-right { display:flex; align-items:center; gap:20px; }
.content { flex:1; padding:20px; overflow-y:auto; }
.grid { display:grid; gap:16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { background:#fff; border:none; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,0.08); padding:24px; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position:relative; overflow:hidden; }
.card { background:#fff; border:none; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,0.04); padding:20px; transition:box-shadow 0.3s; }
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, #667eea 0%, #764ba2 100%); transform:scaleX(0); transition:transform 0.3s; }
.card:hover::before { transform:scaleX(1); }
.card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.12); transform:translateY(-2px); }
@ -29,7 +29,7 @@
.card-value { font-size:28px; font-weight:700; line-height:1.2; background:linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.card-sub { color:#67c23a; font-size:12px; margin-top:6px; font-weight:500; }
.row { display:grid; gap:16px; grid-template-columns: 2fr 1fr; margin-top:16px; }
.chart-placeholder { height:260px; background:linear-gradient(135deg,#f5f7fa,#eef2f7); border:1px dashed #dcdfe6; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#909399; }
.chart-placeholder { height:260px; background:#fafafa; border:1px dashed #dcdfe6; border-radius:4px; display:flex; align-items:center; justify-content:center; color:#909399; }
.chart-container { height:260px; width:100%; }
.chart-tabs { display:flex; gap:8px; margin-bottom:12px; }
.chart-tab { padding:6px 12px; border:1px solid #dcdfe6; border-radius:4px; background:#fff; color:#606266; cursor:pointer; font-size:13px; }
@ -38,11 +38,11 @@
.list-item { padding:10px 0; border-bottom:1px solid #f0f0f0; display:flex; justify-content:space-between; align-items:center; }
.tag { display:inline-block; padding:2px 8px; border-radius:10px; background:#ecf5ff; color:#409EFF; font-size:12px; margin-left:8px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.btn { padding:10px 20px; border:none; border-radius:8px; cursor:pointer; font-size:14px; font-weight:500; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow:0 2px 4px rgba(0,0,0,0.04); position:relative; overflow:hidden; }
.btn-primary { background:linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:#fff; box-shadow:0 4px 12px rgba(102, 126, 234, 0.4); }
.btn-primary:hover { box-shadow:0 6px 16px rgba(102, 126, 234, 0.5); transform:translateY(-2px); }
.btn { padding:6px 16px; border:none; border-radius:4px; cursor:pointer; font-size:14px; transition:all 0.3s; }
.btn-primary { background:#409EFF; color:#fff; }
.btn-primary:hover { background:#66b1ff; }
.btn-default { background:#fff; color:#606266; border:1px solid #dcdfe6; }
.btn-default:hover { border-color:#667eea; color:#667eea; box-shadow:0 2px 12px rgba(0,0,0,0.08); transform:translateY(-1px); }
.btn-default:hover { border-color:#409EFF; color:#409EFF; }
</style>
</head>
<body>

6
pc/file-center.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件中心 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -193,7 +195,7 @@
</div>
</div>
<script src="common.js"></script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
const files = [
{ id: 'F-001', name: '合同-25-1-v2.pdf', type: '合同', project: '25-1', version: 'v2', tags: ['正式', '盖章'], perm: '可下载', uploader: '李四', time: '2024-11-30', owner: '李四' },
@ -314,7 +316,7 @@
}
function goHome() { window.location.href = 'dashboard.html'; }
injectLayout('file');
initUnifiedLayout('file');
// 初始化
renderTable();
</script>

72
pc/finance-invoice.html
View File

@ -16,25 +16,7 @@
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<div class="layout-container">
<!-- 导航栏由unified-layout.js自动创建 -->
<div class="navbar-left">
<div class="logo">OA系统</div>
<div class="nav-menu">
<div class="nav-item" onclick="window.location.href='project-initiation.html'">商机管理</div>
<div class="nav-item" onclick="window.location.href='project-start.html'">过程管理</div>
<div class="nav-item active">财务管理</div>
<div class="nav-item" onclick="window.location.href='report-project-detail.html'">报表管理</div>
</div>
</div>
<div class="navbar-right">
<span style="color: #303133;">张三</span><span style="color: #909399; margin: 0 8px;">|</span>
<a href="profile.html" style="color: #409EFF; text-decoration: none;">个人中心</a>
<span>|</span>
<a href="login.html" style="color: #409EFF; text-decoration: none;">退出</a>
</div>
</div>
<div class="main-container">
<div class="sidebar">
<div class="menu-item active">开票管理</div>
@ -65,35 +47,37 @@
</div>
</div>
</div>
<table>
<thead>
<tr>
<th>项目编号</th>
<th>项目名称</th>
<th>开票金额</th>
<th>开票时间</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>25-1</td>
<td>XX工程项目</td>
<td>¥100,000</td>
<td>2025-01-15</td>
<td>已开票</td>
<td>
<span class="action-link" onclick="window.location.href='invoice-detail.html?id=FP-2025-001'">查看详情</span>
<span class="action-link" onclick="downloadInvoice('FP-2025-001')">下载</span>
</td>
</tr>
</tbody>
</table>
<div class="table-container">
<table>
<thead>
<tr>
<th>项目编号</th>
<th>项目名称</th>
<th>开票金额</th>
<th>开票时间</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>25-1</td>
<td>XX工程项目</td>
<td>¥100,000</td>
<td>2025-01-15</td>
<td><span class="status-badge status-published">已开票</span></td>
<td>
<span class="action-link" onclick="window.location.href='invoice-detail.html?id=FP-2025-001'">查看详情</span>
<span class="action-link" onclick="downloadInvoice('FP-2025-001')">下载</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="common.js"></script>
<script>
// 项目选择变化事件

4
pc/finance-payment.html
View File

@ -177,9 +177,9 @@
window.location.href = 'invoice-detail.html?id=' + id;
}
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout(\'finance\');
initUnifiedLayout('finance');
</script>
</div>
</body>

4
pc/finance-request.html
View File

@ -186,9 +186,9 @@
});
}
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout(\'finance\');
initUnifiedLayout('finance');
</script>
</div>
</body>

6
pc/global-search.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全局搜索 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; background: #f0f2f5; overflow: hidden; }
@ -105,7 +107,7 @@
</div>
</div>
<script src="common.js"></script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
const data = [
{ id:'P-25-1', type:'项目', title:'XX工程项目', meta:'项目编号 25-1 | 负责人 张三', status:'进行中', link:'project-detail.html' },
@ -180,7 +182,7 @@
}
render(data);
injectLayout('search');
initUnifiedLayout('search');
</script>
</body>
</html>

6
pc/help-center.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>帮助中心 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -327,6 +329,10 @@
}
});
</script>
<script src="unified-layout.js"></script>
<script>
initUnifiedLayout('help');
</script>
</body>
</html>

6
pc/help-faq.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常见问题 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -424,6 +426,10 @@
}
};
</script>
<script src="unified-layout.js"></script>
<script>
initUnifiedLayout('help');
</script>
</body>
</html>

6
pc/help-formula.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算公式说明 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -323,6 +325,10 @@
</div>
</div>
<script src="common.js"></script>
<script src="unified-layout.js"></script>
<script>
initUnifiedLayout('help');
</script>
</body>
</html>

6
pc/help-guide.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作指南 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -450,6 +452,10 @@
document.getElementById('guide-' + type).style.display = 'block';
}
</script>
<script src="unified-layout.js"></script>
<script>
initUnifiedLayout('help');
</script>
</body>
</html>

6
pc/invoice-detail.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>开票详情 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -277,9 +279,9 @@
CommonUtils.downloadFile(fileName, fileId);
}
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('finance');
initUnifiedLayout('finance');
</script>
</body>
</html>

41
pc/layout.js
View File

@ -22,38 +22,21 @@
const style = document.createElement('style');
style.id = STYLE_ID;
style.innerHTML = `
body { margin: 0; padding: 0; background: linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%); color: #303133; }
.navbar { height: 60px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-bottom: none;
display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
box-shadow: 0 4px 16px rgba(0,0,0,0.12); position: relative; z-index: 1000; }
.navbar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); }
.navbar > * { position: relative; z-index: 1; }
body { margin: 0; padding: 0; background: #f0f2f5; color: #303133; }
.navbar { height: 50px; background: #fff; border-bottom: 1px solid #e6e6e6;
display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
box-shadow: 0 1px 4px rgba(0,21,41,.08); }
.navbar-left { display: flex; align-items: center; }
.logo { font-size: 22px; font-weight: 700; color: #ffffff; cursor: pointer;
text-shadow: 0 2px 4px rgba(0,0,0,0.1); letter-spacing: 0.5px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.logo:hover { transform: scale(1.05); text-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.nav-menu { display: flex; gap: 4px; margin-left: 20px; }
.nav-item { padding: 10px 18px; cursor: pointer; border-radius: 8px; color: rgba(255,255,255,0.9);
font-size: 14px; font-weight: 500; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative; overflow: hidden; }
.nav-item::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
background: rgba(255,255,255,0.1); transition: left 0.3s; }
.nav-item:hover::before { left: 0; }
.nav-item:hover { color: #ffffff; background: rgba(255,255,255,0.15); transform: translateY(-1px); }
.nav-item.active { background: rgba(255,255,255,0.25); color: #ffffff;
box-shadow: 0 4px 12px rgba(0,0,0,0.15); font-weight: 600; }
.navbar-right { display: flex; align-items: center; gap: 16px; font-size: 14px;
color: rgba(255,255,255,0.9); }
.navbar-right a { color: rgba(255,255,255,0.9); text-decoration: none;
transition: all 0.3s; }
.navbar-right a:hover { color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.logo { font-size: 20px; font-weight: bold; color: #409EFF; cursor: pointer; }
.nav-menu { display: flex; gap: 8px; margin-left: 16px; }
.nav-item { padding: 8px 16px; cursor: pointer; border-radius: 4px; color: #303133; font-size: 14px; }
.nav-item:hover { background: #ecf5ff; color: #409EFF; }
.nav-item.active { background: #409EFF; color: #fff; }
.navbar-right { display: flex; align-items: center; gap: 16px; font-size: 14px; }
.navbar-right a { color: #409EFF; text-decoration: none; }
a { text-decoration: none; }
.content { padding: 20px; }
.card { border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-2px); }
.card { border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
`;
document.head.appendChild(style);
}

83
pc/login.html
View File

@ -16,22 +16,19 @@
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: #f0f2f5;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.login-container {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 20px;
padding: 48px;
background: #ffffff;
border-radius: 4px;
padding: 40px;
width: 100%;
max-width: 420px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
border: 1px solid rgba(255, 255, 255, 0.3);
animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
@keyframes slideUp {
from {
@ -48,22 +45,16 @@
margin-bottom: 32px;
}
.logo-icon {
width: 90px;
height: 90px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
width: 80px;
height: 80px;
background: #409EFF;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 44px;
font-size: 36px;
color: white;
margin-bottom: 20px;
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
transition: all 0.3s;
}
.logo-icon:hover {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 12px 32px rgba(102, 126, 234, 0.5);
margin-bottom: 16px;
}
.logo-title {
font-size: 24px;
@ -87,19 +78,16 @@
}
.form-input {
width: 100%;
padding: 14px 18px;
border: 2px solid #e4e7ed;
border-radius: 12px;
font-size: 15px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: #fafbfc;
padding: 10px 14px;
border: 1px solid #d9d9d9;
border-radius: 4px;
font-size: 14px;
transition: border-color 0.3s;
background: #ffffff;
}
.form-input:focus {
outline: none;
border-color: #667eea;
background: #ffffff;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
transform: translateY(-1px);
border-color: #409EFF;
}
.password-wrapper {
position: relative;
@ -140,44 +128,17 @@
}
.btn-login {
width: 100%;
padding: 16px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 12px;
background: #409EFF;
color: white;
border: none;
border-radius: 12px;
border-radius: 4px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
position: relative;
overflow: hidden;
}
.btn-login::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
transition: background 0.3s;
}
.btn-login:hover {
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
transform: translateY(-2px);
}
.btn-login:active {
transform: translateY(0);
}
.btn-login:active::before {
width: 300px;
height: 300px;
}
.btn-login:active {
background: #3a8ee6;
background: #66b1ff;
}
</style>
<!-- Vue.js -->

6
pc/message-center.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>消息中心 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -224,7 +226,7 @@
</div>
</div>
<script src="common.js"></script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
const messages = [
{ id: 'MSG-001', title: '您有1条待办：立项审批', type: 'approval', content: '项目 25-1 XX工程进入部门审核', status: 'unread', time: '2024-12-02 10:20' },
@ -384,7 +386,7 @@
}
function goHome() { window.location.href = 'dashboard.html'; }
injectLayout('message');
initUnifiedLayout('message');
// 初始化
renderTable();
</script>

6
pc/output-detail.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>成果详情 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -327,9 +329,9 @@
CommonUtils.downloadFile(fileName, fileId);
}
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('process');
initUnifiedLayout('process');
</script>
</body>
</html>

4
pc/output-submit.html
View File

@ -199,9 +199,9 @@
});
});
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout(\'process\');
initUnifiedLayout('process');
</script>
</div>
</body>

6
pc/profile-edit.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人信息编辑 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -118,9 +120,9 @@
});
});
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout(\'home\');
initUnifiedLayout('home');
</script>
</div>
</body>

6
pc/profile.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人中心 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -118,9 +120,9 @@
</div>
</div>
</div>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('home');
initUnifiedLayout('home');
</script>
</body>
</html>

6
pc/progress-query.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>进度查询 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -146,9 +148,9 @@
CommonUtils.exportExcel('进度查询.xlsx');
}
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout(\'process\');
initUnifiedLayout('process');
</script>
</div>
</body>

4
pc/project-approval.html
View File

@ -161,9 +161,9 @@
</div>
</div>
<script src="common.js"></script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('project');
initUnifiedLayout('project');
function switchTab(tab) {
document.querySelectorAll('.tab-item').forEach(item => item.classList.remove('active'));
event.target.classList.add('active');

4
pc/project-bidding.html
View File

@ -133,9 +133,9 @@
</div>
</div>
</div>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('project');
initUnifiedLayout('project');
function updateBidding(id) {
CommonUtils.createModal('确认更新', '确认更新项目状态为"投标"？', () => {
CommonUtils.showMessage('状态已更新');

6
pc/project-board.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>项目看板 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -509,6 +511,10 @@
renderBoard();
};
</script>
<script src="unified-layout.js"></script>
<script>
initUnifiedLayout('tool');
</script>
</body>
</html>

6
pc/project-detail.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>项目详情 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -149,9 +151,9 @@
</div>
</div>
</div>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('project');
initUnifiedLayout('project');
</script>
</body>
</html>

122
pc/project-list.html
View File

@ -10,107 +10,17 @@
<!-- 美化样式 -->
<link rel="stylesheet" href="enhanced-styles.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
background: #f0f2f5;
overflow: hidden;
}
.layout-container {
height: 100vh;
display: flex;
flex-direction: column;
}
.navbar {
height: 50px;
background: #fff;
border-bottom: 1px solid #e6e6e6;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
}
.navbar-left {
display: flex;
align-items: center;
}
.logo {
font-size: 20px;
font-weight: bold;
color: #409EFF;
}
.nav-menu { display: flex; gap: 8px; }
.nav-item { padding: 8px 16px; cursor: pointer; border-radius: 4px; transition: background 0.3s; }
.nav-item:hover {
background: #ecf5ff;
color: #409EFF;
}
.nav-item.active { background: #409EFF; }
.navbar-right {
display: flex;
align-items: center;
gap: 20px;
}
.main-container {
flex: 1;
display: flex;
overflow: hidden;
}
.app-main {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
background: #f0f2f5;
}
.sidebar {
width: 210px;
background: #fff;
border-right: 1px solid #e6e6e6;
overflow-y: auto;
}
.el-menu {
border-right: none;
}
.menu-item { padding: 12px 24px; cursor: pointer; transition: background 0.3s; }
.menu-item:hover {
background: #ecf5ff;
color: #409EFF;
}
.menu-item.active {
background: #409EFF;
color: #fff;
}
.content {
flex: 1;
padding: 20px;
overflow-y: auto;
background: #fff;
margin: 10px;
border-radius: 4px;
}
.page-header { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; }
.page-title { font-size: 20px; font-weight: 500; color: #333; }
/* 页面特定样式 */
.search-form { background: #fafafa; padding: 16px; border-radius: 4px; margin-bottom: 16px; }
.form-row { display: flex; gap: 16px; margin-bottom: 12px; }
.form-item { flex: 1; }
.form-label { display: block; margin-bottom: 4px; color: #333; font-size: 14px; }
.form-input, .form-select { width: 100%; padding: 6px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; }
.btn { padding: 6px 16px; border: none; border-radius: 4px; font-size: 14px; cursor: pointer; }
.btn-primary { background: #409EFF; color: white; }
.btn-default { background: white; color: #333; border: 1px solid #d9d9d9; }
.table-container { background: white; border-radius: 4px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid #f0f0f0; }
th { background: #fafafa; font-weight: 500; color: #333; }
.status-badge { padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.status-initiated { background: #e6f7ff; color: #409EFF; }
.status-bidding { background: #fff7e6; color: #d46b08; }
.status-won { background: #fff1f0; color: #ff4d4f; }
.status-contract { background: #f6ffed; color: #52c41a; }
.status-started { background: #f0f5ff; color: #2f54eb; }
.action-link { color: #409EFF; cursor: pointer; margin-right: 12px; }
.pagination { margin-top: 16px; text-align: right; }
</style>
<!-- Vue.js -->
@ -119,27 +29,7 @@
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<div class="layout-container">
<div class="navbar">
<div class="navbar-left">
<div class="logo">OA系统</div>
<div class="nav-menu">
<div class="nav-item active">商机管理</div>
<div class="nav-item" onclick="window.location.href='project-start.html'">过程管理</div>
<div class="nav-item" onclick="window.location.href='finance-invoice.html'">财务管理</div>
<div class="nav-item" onclick="window.location.href='report-project-detail.html'">报表管理</div>
<div class="nav-item" onclick="window.location.href='settings-org.html'">系统设置</div>
</div>
</div>
<div class="navbar-right">
<span style="color: #303133;">张三</span><span style="color: #909399; margin: 0 8px;">|</span>
<a href="profile.html" style="color: #409EFF; text-decoration: none;">个人中心</a>
<span style="color: #909399; margin: 0 8px;">|</span>
<a href="login.html" style="color: #409EFF; text-decoration: none;">退出</a>
</div>
</div>
<div class="main-container">
<div class="sidebar">
<div class="menu-item" onclick="window.location.href='project-initiation.html'">立项申请</div>
@ -148,7 +38,8 @@
<div class="menu-item" onclick="window.location.href='project-bidding.html'">投标管理</div>
<div class="menu-item" onclick="window.location.href='project-contract.html'">合同管理</div>
</div>
<div class="content">
<div class="app-main">
<div class="content">
<div class="page-header">
<div class="page-title">项目查询</div>
<div style="display: flex; gap: 8px;">
@ -279,11 +170,15 @@
<button class="btn btn-default">下一页</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="common.js"></script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
initUnifiedLayout('project');
</script>
<script>
function searchProjects() {
CommonUtils.showMessage('查询中...');
@ -373,7 +268,6 @@
function viewDetail(id) { window.location.href = 'project-detail.html?id=' + id; }
function editProject(id) { window.location.href = 'project-initiation.html?edit=' + id; }
</script>
</div>
</body>
</html>

5
pc/project-start.html
View File

@ -248,8 +248,9 @@
</div>
</div>
<script src="common.js"></script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
initUnifiedLayout('process');
// 项目类型数字映射
const projectTypeMap = {
'结算审计、概算编制及审核、清单控制价编制及审核': '1',
@ -450,7 +451,7 @@
setTimeout(() => window.location.href = 'progress-query.html', 1000);
});
});
injectLayout('process');
// initUnifiedLayout('process'); // 已在上面调用
</script>
</div>
</body>

6
pc/report-output-detail.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产值明细表 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -171,9 +173,9 @@
CommonUtils.exportExcel('产值明细表.xlsx');
}
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('report');
initUnifiedLayout('report');
</script>
</body>
</html>

6
pc/report-output-summary.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产值汇总表 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -374,9 +376,9 @@
initChart();
};
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('report');
initUnifiedLayout('report');
</script>
</body>
</html>

6
pc/report-payable-detail.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>应付账款明细表 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -140,9 +142,9 @@
CommonUtils.exportExcel('应付账款明细表.xlsx');
}
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('report');
initUnifiedLayout('report');
</script>
</body>
</html>

6
pc/report-payable-summary.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>应付账款汇总表 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -145,9 +147,9 @@
CommonUtils.exportExcel('应付账款汇总表.xlsx');
}
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('report');
initUnifiedLayout('report');
</script>
</body>
</html>

4
pc/report-project-detail.html
View File

@ -171,9 +171,9 @@
CommonUtils.exportExcel('项目明细表.xlsx');
}
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('report');
initUnifiedLayout('report');
</script>
</body>
</html>

6
pc/report-project-summary.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>项目汇总表 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -149,9 +151,9 @@
CommonUtils.exportExcel('项目汇总表.xlsx');
}
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('report');
initUnifiedLayout('report');
</script>
</body>
</html>

6
pc/report-project.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>报表管理 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -139,9 +141,9 @@
CommonUtils.exportExcel('项目报表.xlsx');
}
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('report');
initUnifiedLayout('report');
</script>
</body>
</html>

6
pc/report-receivable-detail.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>应收账款明细表 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -143,9 +145,9 @@
CommonUtils.exportExcel('应收账款明细表.xlsx');
}
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('report');
initUnifiedLayout('report');
</script>
</body>
</html>

6
pc/report-receivable-summary.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>应收账款汇总表 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -245,9 +247,9 @@
initChart();
};
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('report');
initUnifiedLayout('report');
</script>
</body>
</html>

6
pc/request-detail.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>请款详情 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -228,9 +230,9 @@
</div>
</div>
</div>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('finance');
initUnifiedLayout('finance');
</script>
</body>
</html>

7
pc/settings-dict.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字典管理 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -175,6 +177,7 @@
<div class="menu-item" onclick="window.location.href='settings-user.html'">账号管理</div>
<div class="menu-item" onclick="window.location.href='settings-role.html'">权限配置</div>
<div class="menu-item" onclick="window.location.href='settings-workflow.html'">流程配置</div>
<div class="menu-item" onclick="window.location.href='settings-notice.html'">系统公告</div>
<div class="menu-item active" onclick="window.location.href='settings-dict.html'">字典管理</div>
<div class="menu-item" onclick="window.location.href='settings-param.html'">参数配置</div>
<div class="menu-item" onclick="window.location.href='settings-log.html'">操作日志</div>
@ -458,9 +461,9 @@
renderDictData();
});
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('settings');
initUnifiedLayout('settings');
</script>
</body>
</html>

7
pc/settings-log.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作日志 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -143,6 +145,7 @@
<div class="menu-item" onclick="window.location.href='settings-user.html'">账号管理</div>
<div class="menu-item" onclick="window.location.href='settings-role.html'">权限配置</div>
<div class="menu-item" onclick="window.location.href='settings-workflow.html'">流程配置</div>
<div class="menu-item" onclick="window.location.href='settings-notice.html'">系统公告</div>
<div class="menu-item" onclick="window.location.href='settings-dict.html'">字典管理</div>
<div class="menu-item" onclick="window.location.href='settings-param.html'">参数配置</div>
<div class="menu-item active" onclick="window.location.href='settings-log.html'">操作日志</div>
@ -284,9 +287,9 @@
}, 1000);
}
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('settings');
initUnifiedLayout('settings');
</script>
</body>
</html>

6
pc/settings-notice.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>系统公告管理 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -446,9 +448,9 @@
CommonUtils.showMessage('已重置');
}
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('settings');
initUnifiedLayout('settings');
</script>
</body>
</html>

5
pc/settings-org.html
View File

@ -78,6 +78,7 @@
<div class="menu-item" onclick="window.location.href='settings-user.html'">账号管理</div>
<div class="menu-item" onclick="window.location.href='settings-role.html'">权限配置</div>
<div class="menu-item" onclick="window.location.href='settings-workflow.html'">流程配置</div>
<div class="menu-item" onclick="window.location.href='settings-notice.html'">系统公告</div>
<div class="menu-item" onclick="window.location.href='settings-dict.html'">字典管理</div>
<div class="menu-item" onclick="window.location.href='settings-param.html'">参数配置</div>
<div class="menu-item" onclick="window.location.href='settings-log.html'">操作日志</div>
@ -141,9 +142,9 @@
});
}
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('settings');
initUnifiedLayout('settings');
</script>
</body>
</html>

7
pc/settings-param.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>参数配置 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -137,6 +139,7 @@
<div class="menu-item" onclick="window.location.href='settings-user.html'">账号管理</div>
<div class="menu-item" onclick="window.location.href='settings-role.html'">权限配置</div>
<div class="menu-item" onclick="window.location.href='settings-workflow.html'">流程配置</div>
<div class="menu-item" onclick="window.location.href='settings-notice.html'">系统公告</div>
<div class="menu-item" onclick="window.location.href='settings-dict.html'">字典管理</div>
<div class="menu-item active" onclick="window.location.href='settings-param.html'">参数配置</div>
<div class="menu-item" onclick="window.location.href='settings-log.html'">操作日志</div>
@ -322,9 +325,9 @@
renderParams();
});
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('settings');
initUnifiedLayout('settings');
</script>
</body>
</html>

11
pc/settings-role.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>权限配置 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -79,6 +81,11 @@
<div class="menu-item" onclick="window.location.href='settings-org.html'">组织架构</div>
<div class="menu-item" onclick="window.location.href='settings-user.html'">账号管理</div>
<div class="menu-item active">权限配置</div>
<div class="menu-item" onclick="window.location.href='settings-workflow.html'">流程配置</div>
<div class="menu-item" onclick="window.location.href='settings-notice.html'">系统公告</div>
<div class="menu-item" onclick="window.location.href='settings-dict.html'">字典管理</div>
<div class="menu-item" onclick="window.location.href='settings-param.html'">参数配置</div>
<div class="menu-item" onclick="window.location.href='settings-log.html'">操作日志</div>
</div>
<div class="content">
<div class="page-header">
@ -161,9 +168,9 @@
});
}
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout(\'settings\');
initUnifiedLayout('settings');
</script>
</div>
</body>

11
pc/settings-user.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>账号管理 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -84,6 +86,11 @@
<div class="menu-item" onclick="window.location.href='settings-org.html'">组织架构</div>
<div class="menu-item active">账号管理</div>
<div class="menu-item" onclick="window.location.href='settings-role.html'">权限配置</div>
<div class="menu-item" onclick="window.location.href='settings-workflow.html'">流程配置</div>
<div class="menu-item" onclick="window.location.href='settings-notice.html'">系统公告</div>
<div class="menu-item" onclick="window.location.href='settings-dict.html'">字典管理</div>
<div class="menu-item" onclick="window.location.href='settings-param.html'">参数配置</div>
<div class="menu-item" onclick="window.location.href='settings-log.html'">操作日志</div>
</div>
<div class="content">
<div class="page-header">
@ -326,9 +333,9 @@
});
}
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout(\'settings\');
initUnifiedLayout('settings');
</script>
</div>
</body>

7
pc/settings-workflow.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流程配置 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -209,6 +211,7 @@
<div class="menu-item" onclick="window.location.href='settings-user.html'">账号管理</div>
<div class="menu-item" onclick="window.location.href='settings-role.html'">权限配置</div>
<div class="menu-item active" onclick="window.location.href='settings-workflow.html'">流程配置</div>
<div class="menu-item" onclick="window.location.href='settings-notice.html'">系统公告</div>
<div class="menu-item" onclick="window.location.href='settings-dict.html'">字典管理</div>
<div class="menu-item" onclick="window.location.href='settings-param.html'">参数配置</div>
<div class="menu-item" onclick="window.location.href='settings-log.html'">操作日志</div>
@ -537,9 +540,9 @@
});
});
</script>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('settings');
initUnifiedLayout('settings');
</script>
</body>
</html>

6
pc/start-detail.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>启动详情 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -226,9 +228,9 @@
</div>
</div>
</div>
<script src="layout.js"></script>
<script src="unified-layout.js"></script>
<script>
injectLayout('process');
initUnifiedLayout('process');
</script>
</body>
</html>

6
pc/tool-center.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>工具中心 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -277,6 +279,10 @@
</div>
</div>
<script src="common.js"></script>
<script src="unified-layout.js"></script>
<script>
initUnifiedLayout('tool');
</script>
</body>
</html>

6
pc/tool-fee-calculator.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>费用计算器 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -447,6 +449,10 @@
CommonUtils.showMessage('结果已导出');
}
</script>
<script src="unified-layout.js"></script>
<script>
initUnifiedLayout('tool');
</script>
</body>
</html>

6
pc/tool-output-calculator.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产值计算器 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -588,6 +590,10 @@
CommonUtils.showMessage('结果已导出');
}
</script>
<script src="unified-layout.js"></script>
<script>
initUnifiedLayout('tool');
</script>
</body>
</html>

258
pc/unified-layout.css
View File

@ -9,7 +9,7 @@
body {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%);
background: #f0f2f5;
color: #303133;
overflow: hidden;
height: 100vh;
@ -27,35 +27,19 @@ body {
/* ========== 导航栏（统一） ========== */
.navbar {
height: 60px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-bottom: none;
height: 50px;
background: #ffffff;
border-bottom: 1px solid #e6e6e6;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
padding: 0 20px;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
position: relative;
z-index: 1000;
flex-shrink: 0;
}
.navbar::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.navbar > * {
position: relative;
z-index: 1;
}
.navbar-left {
display: flex;
align-items: center;
@ -63,18 +47,15 @@ body {
}
.logo {
font-size: 22px;
font-weight: 700;
color: #ffffff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
letter-spacing: 0.5px;
font-size: 20px;
font-weight: bold;
color: #409EFF;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: color 0.3s;
}
.logo:hover {
transform: scale(1.05);
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
color: #66b1ff;
}
.nav-menu {
@ -83,43 +64,22 @@ body {
}
.nav-item {
padding: 10px 18px;
padding: 8px 16px;
cursor: pointer;
border-radius: 8px;
color: rgba(255, 255, 255, 0.9);
border-radius: 4px;
color: #303133;
font-size: 14px;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.nav-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
transition: left 0.3s;
}
.nav-item:hover::before {
left: 0;
transition: all 0.3s;
}
.nav-item:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
background: #ecf5ff;
color: #409EFF;
}
.nav-item.active {
background: rgba(255, 255, 255, 0.25);
background: #409EFF;
color: #ffffff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
font-weight: 600;
}
.navbar-right {
@ -127,18 +87,17 @@ body {
align-items: center;
gap: 16px;
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
color: #303133;
}
.navbar-right a {
color: rgba(255, 255, 255, 0.9);
color: #409EFF;
text-decoration: none;
transition: all 0.3s;
transition: color 0.3s;
}
.navbar-right a:hover {
color: #ffffff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
color: #66b1ff;
}
/* ========== 主容器（统一） ========== */
@ -160,13 +119,12 @@ body {
/* ========== 侧边栏菜单（统一） ========== */
.sidebar {
width: 220px;
width: 210px;
background: #ffffff;
border-right: 1px solid #e4e7ed;
border-right: 1px solid #e6e6e6;
overflow-y: auto;
overflow-x: hidden;
flex-shrink: 0;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
}
.sidebar::-webkit-scrollbar {
@ -179,61 +137,36 @@ body {
}
.menu-item {
padding: 14px 24px;
padding: 12px 24px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-left: 3px solid transparent;
transition: background 0.3s;
color: #606266;
font-size: 14px;
position: relative;
display: flex;
align-items: center;
min-height: 48px;
}
.menu-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
transform: scaleY(0);
transition: transform 0.3s;
}
.menu-item:hover {
background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.05) 100%);
color: #667eea;
padding-left: 28px;
}
.menu-item:hover::before {
transform: scaleY(1);
background: #ecf5ff;
color: #409EFF;
}
.menu-item.active {
background: linear-gradient(90deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.08) 100%);
color: #667eea;
font-weight: 600;
border-left-color: #667eea;
}
.menu-item.active::before {
transform: scaleY(1);
background: #409EFF;
color: #ffffff;
font-weight: 500;
}
/* ========== 内容区域（统一） ========== */
.content {
flex: 1;
padding: 24px;
padding: 20px;
overflow-y: auto;
overflow-x: hidden;
background: #ffffff;
margin: 16px;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
margin: 10px;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
min-width: 0;
}
@ -254,20 +187,16 @@ body {
.page-header {
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 2px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
display: flex;
justify-content: space-between;
align-items: center;
}
.page-title {
font-size: 24px;
font-weight: 700;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.5px;
font-size: 20px;
font-weight: 500;
color: #303133;
margin: 0;
}
@ -279,12 +208,11 @@ body {
/* ========== 搜索表单（统一） ========== */
.search-form {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
padding: 20px;
border-radius: 12px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
border: 1px solid #ebeef5;
background: #fafafa;
padding: 16px;
border-radius: 4px;
margin-bottom: 16px;
border: 1px solid #e6e6e6;
}
.form-row {
@ -315,11 +243,11 @@ body {
.form-select,
.form-textarea {
width: 100%;
padding: 10px 14px;
border: 1px solid #dcdfe6;
border-radius: 8px;
padding: 6px 12px;
border: 1px solid #d9d9d9;
border-radius: 4px;
font-size: 14px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: border-color 0.3s;
background: #ffffff;
color: #606266;
}
@ -328,8 +256,7 @@ body {
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
border-color: #409EFF;
}
.form-textarea {
@ -339,28 +266,22 @@ body {
/* ========== 按钮（统一） ========== */
.btn {
padding: 10px 20px;
padding: 6px 16px;
border: none;
border-radius: 8px;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
position: relative;
overflow: hidden;
transition: all 0.3s;
white-space: nowrap;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: #409EFF;
color: #ffffff;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.btn-primary:hover {
box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
transform: translateY(-2px);
background: #66b1ff;
}
.btn-primary:active {
@ -369,33 +290,28 @@ body {
.btn-default {
background: #ffffff;
color: #606266;
border: 1px solid #dcdfe6;
color: #333;
border: 1px solid #d9d9d9;
}
.btn-default:hover {
border-color: #667eea;
color: #667eea;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transform: translateY(-1px);
border-color: #409EFF;
color: #409EFF;
}
.btn-danger {
background: linear-gradient(135deg, #f56c6c 0%, #e85a5a 100%);
background: #f56c6c;
color: #ffffff;
box-shadow: 0 4px 12px rgba(245, 108, 108, 0.4);
}
.btn-danger:hover {
box-shadow: 0 6px 16px rgba(245, 108, 108, 0.5);
transform: translateY(-2px);
background: #f78989;
}
/* ========== 表格（统一） ========== */
.table-container {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
border-radius: 4px;
overflow: hidden;
}
@ -406,20 +322,17 @@ table {
}
th {
background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);
background: #fafafa;
color: #303133;
font-weight: 600;
font-weight: 500;
font-size: 14px;
padding: 16px;
padding: 12px;
text-align: left;
border-bottom: 2px solid #e4e7ed;
position: sticky;
top: 0;
z-index: 10;
border-bottom: 1px solid #e6e6e6;
}
td {
padding: 16px;
padding: 12px;
border-bottom: 1px solid #f0f0f0;
color: #606266;
font-size: 14px;
@ -440,62 +353,43 @@ tr:last-child td {
/* ========== 状态标签（统一） ========== */
.status-badge {
padding: 4px 12px;
border-radius: 12px;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
display: inline-block;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.status-contract,
.status-published {
background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
background: #f6ffed;
color: #52c41a;
}
.status-draft {
background: linear-gradient(135deg, #fff7e6 0%, #ffe7ba 100%);
background: #fff7e6;
color: #d46b08;
}
/* ========== 操作链接（统一） ========== */
.action-link {
color: #667eea;
color: #409EFF;
cursor: pointer;
margin-right: 16px;
margin-right: 12px;
font-size: 14px;
transition: all 0.3s;
position: relative;
padding-bottom: 2px;
transition: color 0.3s;
text-decoration: none;
}
.action-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #667eea;
transition: width 0.3s;
}
.action-link:hover {
color: #764ba2;
}
.action-link:hover::after {
width: 100%;
color: #66b1ff;
}
.action-link.danger {
color: #f56c6c;
}
.action-link.danger::after {
background: #f56c6c;
.action-link.danger:hover {
color: #f78989;
}
/* ========== 响应式 ========== */

262
pc/布局修复指南.md
View File

@ -1,262 +0,0 @@
# PC端布局统一修复指南
## 一、问题说明
**发现的问题：**
1. ❌ 不同页面布局结构不一致
2. ❌ 有些页面缺少导航栏
3. ❌ 菜单样式不统一
4. ❌ 内容区域样式混乱
5. ❌ 响应式布局问题
## 二、解决方案
### 已创建的统一布局系统
#### 1. `unified-layout.css` - 统一布局样式
- ✅ 统一的导航栏样式（渐变背景、毛玻璃效果）
- ✅ 统一的侧边栏菜单样式（渐变高亮、动画效果）
- ✅ 统一的内容区域样式（圆角、阴影、间距）
- ✅ 统一的表格、表单、按钮样式
- ✅ 响应式布局支持
#### 2. `unified-layout.js` - 统一布局脚本
- ✅ 自动创建导航栏
- ✅ 自动确保布局容器
- ✅ 自动检测当前页面并高亮对应菜单
- ✅ 自动修复布局结构
## 三、快速修复方法
### 方法1：在HTML头部添加样式和脚本
在每个HTML文件的 `<head>` 部分添加：
```html
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
```
在 `</body>` 之前添加：
```html
<!-- 统一布局脚本 -->
<script src="unified-layout.js"></script>
<script>
initUnifiedLayout('project'); // 根据页面模块传入对应key
</script>
```
### 方法2：完整的HTML结构模板
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
<!-- 美化样式（可选） -->
<link rel="stylesheet" href="enhanced-styles.css">
<style>
/* 页面特定样式 */
</style>
</head>
<body>
<div id="app">
<div class="layout-container">
<div class="main-container">
<!-- 侧边栏（如果有） -->
<div class="sidebar">
<div class="menu-item" onclick="window.location.href='page1.html'">菜单项1</div>
<div class="menu-item active">当前页面</div>
</div>
<!-- 主内容区 -->
<div class="app-main">
<div class="content">
<!-- 页面内容 -->
</div>
</div>
</div>
</div>
</div>
<script src="common.js"></script>
<script src="unified-layout.js"></script>
<script>
// 根据页面模块传入对应key
// 'project' - 商机管理
// 'process' - 过程管理
// 'finance' - 财务管理
// 'report' - 报表管理
// 'approval' - 审批中心
// 'message' - 消息中心
// 'file' - 文件中心
// 'tool' - 工具中心
// 'help' - 帮助中心
// 'search' - 全局搜索
// 'audit' - 操作日志
// 'settings' - 系统设置
initUnifiedLayout('project');
</script>
</body>
</html>
```
## 四、模块Key对照表
| 模块 | Key值 | 说明 |
|------|-------|------|
| 首页 | `'home'` | dashboard.html |
| 商机管理 | `'project'` | project-*.html |
| 过程管理 | `'process'` | project-start.html, output-*.html |
| 财务管理 | `'finance'` | finance-*.html |
| 报表管理 | `'report'` | report-*.html |
| 审批中心 | `'approval'` | approval-*.html |
| 消息中心 | `'message'` | message-*.html |
| 文件中心 | `'file'` | file-*.html |
| 工具中心 | `'tool'` | tool-*.html |
| 帮助中心 | `'help'` | help-*.html |
| 全局搜索 | `'search'` | global-search.html |
| 操作日志 | `'audit'` | audit-log.html |
| 系统设置 | `'settings'` | settings-*.html |
## 五、已修复的页面示例
✅ **project-contract.html** - 合同管理页面
- 已添加统一布局样式
- 已修复布局结构
- 已统一菜单样式
## 六、需要修复的页面清单
### 高优先级（核心业务页面）
#### 商机管理模块
- [ ] `project-initiation.html` - 立项申请
- [ ] `project-list.html` - 项目查询（已引入enhanced-styles，需添加unified-layout）
- [ ] `project-detail.html` - 项目详情
- [ ] `project-approval.html` - 审核管理
- [ ] `project-bidding.html` - 投标管理
- [x] `project-contract.html` - 合同管理（已修复）
#### 过程管理模块
- [ ] `project-start.html` - 启动申请
- [ ] `output-submit.html` - 成果提交
- [ ] `progress-query.html` - 进度查询
#### 财务管理模块
- [ ] `finance-invoice.html` - 开票管理
- [ ] `finance-payment.html` - 回款管理
- [ ] `finance-request.html` - 请款管理
#### 报表管理模块
- [ ] `report-project-detail.html` - 项目报表
- [ ] `report-output-detail.html` - 产值报表
- [ ] `report-receivable-detail.html` - 应收报表
### 中优先级（辅助功能页面）
- [ ] `approval-center.html` - 审批中心
- [ ] `approval-detail.html` - 审核详情
- [ ] `message-center.html` - 消息中心
- [ ] `file-center.html` - 文件中心
- [ ] `global-search.html` - 全局搜索
### 低优先级（其他页面）
- [ ] 系统设置相关页面
- [ ] 个人中心相关页面
- [ ] 工具页面
- [ ] 帮助页面
## 七、修复步骤
### 步骤1：添加样式引用
在 `<head>` 中添加：
```html
<link rel="stylesheet" href="unified-layout.css">
```
### 步骤2：确保HTML结构正确
确保有以下结构：
```html
<div class="layout-container">
<div class="main-container">
<div class="sidebar">
<!-- 菜单项 -->
</div>
<div class="app-main">
<div class="content">
<!-- 页面内容 -->
</div>
</div>
</div>
</div>
```
### 步骤3：添加脚本
在 `</body>` 之前添加：
```html
<script src="unified-layout.js"></script>
<script>
initUnifiedLayout('模块key');
</script>
```
### 步骤4：清理冗余样式
删除页面中与统一布局冲突的样式定义。
## 八、修复后的效果
### 统一的外观
- ✅ 所有页面使用相同的导航栏样式
- ✅ 所有页面使用相同的菜单样式
- ✅ 所有页面使用相同的内容区域样式
### 统一的交互
- ✅ 统一的悬停效果
- ✅ 统一的点击反馈
- ✅ 统一的动画效果
### 统一的布局
- ✅ 统一的间距和边距
- ✅ 统一的圆角和阴影
- ✅ 统一的响应式布局
## 九、注意事项
1. **样式优先级**：`unified-layout.css` 应该在其他样式之前引入
2. **脚本执行**：`unified-layout.js` 应该在页面内容加载后执行
3. **模块Key**：确保传入正确的模块key，以便导航栏正确高亮
4. **HTML结构**：确保HTML结构符合模板要求
## 十、批量修复建议
可以使用编辑器批量替换功能：
1. **查找**：`<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">`
2. **替换为**：
```html
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
```
3. **查找**：`</body>`
4. **替换为**：
```html
<script src="unified-layout.js"></script>
<script>
initUnifiedLayout('模块key');
</script>
</body>
```
---
**提示**：建议先修复核心业务页面，然后逐步修复其他页面。

213
pc/快速美化指南.md
View File

@ -1,213 +0,0 @@
# 快速美化指南
## 一、已完成的页面
✅ **已完成美化的页面：**
- `login.html` - 登录页面
- `dashboard.html` - 首页
- `project-list.html` - 项目列表（已引入样式）
✅ **已更新的公共文件：**
- `common.js` - 消息提示和弹窗美化
- `layout.js` - 导航栏美化
- `enhanced-styles.css` - 统一美化样式文件（新建）
## 二、快速应用到其他页面
### 方法1：在HTML头部添加样式引用
在每个HTML文件的 `<head>` 部分，在Element UI样式之后添加：
```html
<!-- 美化样式 -->
<link rel="stylesheet" href="enhanced-styles.css">
```
**完整示例：**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题 - OA系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 美化样式 -->
<link rel="stylesheet" href="enhanced-styles.css">
<style>
/* 页面特定样式 */
</style>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
```
### 方法2：批量替换（使用编辑器）
1. 打开编辑器（如VS Code）
2. 使用全局查找替换功能
3. 查找：`<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">`
4. 替换为：
```html
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 美化样式 -->
<link rel="stylesheet" href="enhanced-styles.css">
```
### 方法3：使用脚本批量添加（可选）
如果需要批量处理，可以使用Node.js脚本：
```javascript
const fs = require('fs');
const path = require('path');
const glob = require('glob');
// 查找所有HTML文件
const files = glob.sync('pc/**/*.html');
files.forEach(file => {
let content = fs.readFileSync(file, 'utf8');
// 检查是否已包含美化样式
if (!content.includes('enhanced-styles.css')) {
// 在Element UI样式后添加美化样式
content = content.replace(
/(<link rel="stylesheet" href="https:\/\/unpkg.com\/element-ui\/lib\/theme-chalk\/index\.css">)/,
'$1\n <!-- 美化样式 -->\n <link rel="stylesheet" href="enhanced-styles.css">'
);
fs.writeFileSync(file, content, 'utf8');
console.log(`已更新: ${file}`);
}
});
```
## 三、美化效果预览
### 导航栏
- ✨ 紫色渐变背景
- ✨ 毛玻璃效果
- ✨ 悬停动画
- ✨ 精致阴影
### 卡片
- ✨ 圆角优化（12px）
- ✨ 悬停上浮效果
- ✨ 顶部渐变条
- ✨ 渐变文字
### 按钮
- ✨ 渐变背景
- ✨ 涟漪点击效果
- ✨ 悬停阴影
- ✨ 平滑动画
### 表格
- ✨ 更好的视觉层次
- ✨ 悬停高亮
- ✨ 精致边框
- ✨ 粘性表头
### 表单
- ✨ 更大圆角
- ✨ 聚焦阴影
- ✨ 上浮效果
- ✨ 视觉反馈
## 四、需要更新的页面列表
### PC端页面（47个）
#### 核心业务页面（优先）
- [ ] `project-initiation.html` - 立项申请
- [ ] `project-detail.html` - 项目详情
- [ ] `project-approval.html` - 审核管理
- [ ] `project-bidding.html` - 投标管理
- [ ] `project-contract.html` - 合同管理
- [ ] `project-start.html` - 启动申请
- [ ] `output-submit.html` - 成果提交
- [ ] `approval-detail.html` - 审核详情
- [ ] `finance-invoice.html` - 开票管理
- [ ] `finance-payment.html` - 回款管理
- [ ] `finance-request.html` - 请款管理
- [ ] `report-project-detail.html` - 项目报表
- [ ] `report-output-detail.html` - 产值报表
- [ ] `report-receivable-detail.html` - 应收报表
#### 辅助功能页面
- [ ] `approval-center.html` - 审批中心
- [ ] `message-center.html` - 消息中心
- [ ] `file-center.html` - 文件中心
- [ ] `global-search.html` - 全局搜索
- [ ] `tool-center.html` - 工具中心
- [ ] `tool-fee-calculator.html` - 费用计算器
- [ ] `tool-output-calculator.html` - 产值计算器
- [ ] `project-board.html` - 项目看板
- [ ] `help-center.html` - 帮助中心
- [ ] `help-guide.html` - 操作指南
- [ ] `help-faq.html` - 常见问题
- [ ] `help-formula.html` - 计算公式
#### 系统设置页面
- [ ] `settings-org.html` - 组织架构
- [ ] `settings-user.html` - 账号管理
- [ ] `settings-role.html` - 权限配置
- [ ] `settings-workflow.html` - 流程配置
- [ ] `settings-notice.html` - 系统公告
- [ ] `settings-dict.html` - 字典管理
- [ ] `settings-param.html` - 参数配置
- [ ] `settings-log.html` - 操作日志
#### 个人中心页面
- [ ] `profile.html` - 个人中心
- [ ] `profile-edit.html` - 个人信息编辑
- [ ] `change-password.html` - 修改密码
#### 错误页面
- [ ] `404.html` - 页面不存在
- [ ] `403.html` - 无权限访问
- [ ] `500.html` - 服务器错误
#### 其他页面
- [ ] 其他业务详情页面
## 五、美化后的效果对比
### 之前
- 基础配色
- 简单阴影
- 基础圆角
- 简单动画
### 之后
- ✨ 渐变配色
- ✨ 精致阴影
- ✨ 优化圆角
- ✨ 流畅动画
- ✨ 毛玻璃效果
- ✨ 渐变文字
- ✨ 悬停效果
- ✨ 视觉层次
## 六、注意事项
1. **样式优先级**：`enhanced-styles.css` 中的样式会覆盖部分Element UI默认样式
2. **兼容性**：使用了CSS变量和现代CSS特性，需要现代浏览器支持
3. **性能**：动画经过优化，不会影响页面性能
4. **自定义**：可以通过修改 `enhanced-styles.css` 中的CSS变量来调整整体风格
## 七、下一步
1. ✅ 已完成：创建统一美化样式文件
2. ✅ 已完成：更新公共文件（common.js, layout.js）
3. ✅ 已完成：美化示例页面（login, dashboard, project-list）
4. ⏳ 待完成：批量应用到所有页面
5. ⏳ 待完成：移动端样式优化
---
**提示**：建议先应用到核心业务页面，然后逐步应用到其他页面。

111
pc/批量修复说明.md
View File

@ -1,111 +0,0 @@
# 批量修复布局 - 快速指南
## 修复步骤
### 步骤1：添加统一布局样式
在每个HTML文件的 `<head>` 部分，在Element UI样式之后添加：
```html
<!-- 统一布局样式 -->
<link rel="stylesheet" href="unified-layout.css">
```
### 步骤2：替换布局脚本
将：
```html
<script src="layout.js"></script>
<script>
injectLayout('模块名');
</script>
```
替换为：
```html
<script src="unified-layout.js"></script>
<script>
initUnifiedLayout('模块名');
</script>
```
### 步骤3：模块Key对照
- `'project'` - 商机管理（project-*.html）
- `'process'` - 过程管理（project-start.html, output-*.html）
- `'finance'` - 财务管理（finance-*.html）
- `'report'` - 报表管理（report-*.html）
- `'approval'` - 审批中心（approval-*.html）
- `'message'` - 消息中心（message-*.html）
- `'file'` - 文件中心（file-*.html）
- `'tool'` - 工具中心（tool-*.html）
- `'help'` - 帮助中心（help-*.html）
- `'search'` - 全局搜索（global-search.html）
- `'audit'` - 操作日志（audit-log.html）
- `'settings'` - 系统设置（settings-*.html）
## 已修复的页面
✅ project-contract.html
✅ finance-invoice.html
✅ project-initiation.html
✅ project-list.html
## 待修复的页面清单
### 商机管理模块
- [ ] project-approval.html
- [ ] project-bidding.html
- [ ] bidding-detail.html
- [ ] contract-detail.html
- [ ] project-detail.html
### 过程管理模块
- [ ] project-start.html
- [ ] start-detail.html
- [ ] output-submit.html
- [ ] output-detail.html
- [ ] progress-query.html
### 财务管理模块
- [ ] finance-payment.html
- [ ] finance-request.html
- [ ] invoice-detail.html
- [ ] request-detail.html
### 报表管理模块
- [ ] report-project-detail.html
- [ ] report-project-summary.html
- [ ] report-project.html
- [ ] report-output-detail.html
- [ ] report-output-summary.html
- [ ] report-receivable-detail.html
- [ ] report-receivable-summary.html
- [ ] report-payable-detail.html
- [ ] report-payable-summary.html
### 辅助功能
- [ ] approval-center.html
- [ ] approval-detail.html
- [ ] message-center.html
- [ ] file-center.html
- [ ] global-search.html
- [ ] audit-log.html
### 工具和帮助
- [ ] tool-center.html
- [ ] tool-fee-calculator.html
- [ ] tool-output-calculator.html
- [ ] project-board.html
- [ ] help-center.html
- [ ] help-guide.html
- [ ] help-faq.html
- [ ] help-formula.html
### 系统设置
- [ ] settings-org.html
- [ ] settings-user.html
- [ ] settings-role.html
- [ ] settings-workflow.html
- [ ] settings-notice.html
- [ ] settings-dict.html
- [ ] settings-param.html
- [ ] settings-log.html

139
pc/美化说明.md
View File

@ -1,139 +0,0 @@
# 页面美化说明
## 一、美化内容
### 1. 统一设计系统
创建了 `enhanced-styles.css` 文件，包含：
- CSS变量定义（颜色、阴影、圆角、间距等）
- 统一的组件样式（按钮、卡片、表格、表单等）
- 流畅的动画效果
- 现代化的视觉设计
### 2. 更新的文件
#### 公共文件
- ✅ `common.js` - 消息提示和弹窗样式美化
- ✅ `layout.js` - 导航栏样式美化（渐变背景、动画效果）
- ✅ `enhanced-styles.css` - 新增统一美化样式文件
#### 示例页面
- ✅ `login.html` - 登录页面美化（渐变背景、毛玻璃效果、动画）
- ✅ `dashboard.html` - 首页美化（卡片悬停效果、渐变文字）
### 3. 美化特点
#### 导航栏
- 渐变背景（紫色渐变）
- 毛玻璃效果
- 悬停动画
- 更精致的阴影
#### 卡片
- 圆角优化（12px）
- 悬停上浮效果
- 顶部渐变条动画
- 渐变文字效果
#### 按钮
- 渐变背景
- 涟漪点击效果
- 悬停阴影增强
- 平滑过渡动画
#### 表单
- 更大的圆角
- 聚焦时的阴影和上浮效果
- 更好的视觉反馈
#### 消息提示
- 渐变背景
- 图标显示
- 滑入滑出动画
- 毛玻璃效果
#### 弹窗
- 更大的圆角（16px）
- 渐变标题文字
- 关闭按钮旋转动画
- 背景模糊效果
## 二、使用方法
### 在页面中引入美化样式
在HTML文件的 `<head>` 部分添加：
```html
<!-- 美化样式 -->
<link rel="stylesheet" href="enhanced-styles.css">
```
### 示例
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 美化样式 -->
<link rel="stylesheet" href="enhanced-styles.css">
<style>
/* 页面特定样式 */
</style>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
```
## 三、需要更新的页面
### 高优先级（核心页面）
- [ ] `project-list.html` - 项目列表
- [ ] `project-initiation.html` - 立项申请
- [ ] `project-start.html` - 启动申请
- [ ] `approval-center.html` - 审批中心
- [ ] `finance-invoice.html` - 开票管理
- [ ] `report-project-detail.html` - 项目报表
### 中优先级（常用页面）
- [ ] `message-center.html` - 消息中心
- [ ] `file-center.html` - 文件中心
- [ ] `profile.html` - 个人中心
- [ ] `settings-*.html` - 系统设置相关页面
### 低优先级（其他页面）
- [ ] 其他业务页面
## 四、美化效果
### 视觉提升
- ✅ 更现代的配色方案
- ✅ 更精致的阴影和圆角
- ✅ 更流畅的动画效果
- ✅ 更好的视觉层次
### 用户体验
- ✅ 更清晰的交互反馈
- ✅ 更平滑的过渡动画
- ✅ 更直观的视觉引导
- ✅ 更舒适的视觉体验
## 五、注意事项
1. **兼容性**：美化样式使用了CSS变量和现代CSS特性，需要现代浏览器支持
2. **性能**：动画效果经过优化，不会影响页面性能
3. **一致性**：建议所有页面都引入 `enhanced-styles.css` 保持视觉一致性
4. **自定义**：可以通过CSS变量在 `enhanced-styles.css` 中调整整体风格
## 六、后续优化建议
1. 为所有页面添加美化样式引入
2. 优化移动端样式
3. 添加暗色主题支持
4. 优化加载动画
5. 添加骨架屏效果