Simon
facc04aa65
本提交为 .git 对象库损坏后的重建提交，内容等价于原先三个本地提交 （5e2fd4c2 / 57a53c98 / 5d7e1873）的累积结果，未做任何额外改动。 一、docs 结构整改（整改 #14） 根因：重构时新结构为 untracked 文件，执行 git stash（未带 -u）未纳入， 随后 git reset 拉回 HEAD 旧 tracked 树，导致旧树复活、新旧两棵目录 树并存于 docs/，共 791 文件、双分类体系冲突。 修复动作： - b2 同名异主题文件改名迁移保全 9 个 - C 类 39 个孤立文件按主题正确归类 - A/B1 类 222 个重复文件删除（新结构已有内容副本） - 9 个旧独有空目录删除 - 270 处内部引用按 verified 映射改写 - 整改记录 #14 登记于 04-运维文档/部署运维 结果：docs 791 → 569 文件，顶层仅规范 8 类 + 治理文件，单树恢复。 残留：约 20 处指向从未存在文件的陈旧死链，归入独立文档卫生任务。 二、compose 双目录对齐（消除踩坑 A） - docker-compose.yml：nginx 前端挂载全部由根目录 frontend-*/dist 改为 src/frontend-*/dist（h5 / agent / admin / terminal） - docker-compose.dev.yml：dev 服务 build context 与卷同步改 src/ - 效果：本地 docker compose up 不再把根目录 stale dist 挂回， 与线上一致，分叉隐患消除（已 docker compose config 校验通过） 防复发铁律： - 重构须提交；仓库修复须 git stash -u 或先 commit - 新结构须 git add 并提交，避免再次 untracked 复活 - H5 改动只动 src/frontend-h5/，禁改根目录遗留 frontend-*/
366 lines
11 KiB
HTML
366 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>IT智能服务台 - 账号绑定</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@6.4.0/css/all.min.css" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--primary: #07C160;
|
|
--primary-dark: #05964a;
|
|
--bg: #f5f6f7;
|
|
--card-bg: #ffffff;
|
|
--text: #171a1d;
|
|
--text-secondary: #858e99;
|
|
--border: #e7e8eb;
|
|
--warning: #faad14;
|
|
}
|
|
body {
|
|
background: var(--bg);
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
.bind-card {
|
|
width: 100%;
|
|
max-width: 420px;
|
|
background: var(--card-bg);
|
|
border-radius: 16px;
|
|
box-shadow: 0 4px 24px rgba(0,0,0,0.1);
|
|
padding: 40px 32px;
|
|
}
|
|
.logo {
|
|
text-align: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
.logo-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
background: linear-gradient(135deg, #07C160 0%, #06ad56 100%);
|
|
border-radius: 14px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 24px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.logo-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin-bottom: 4px;
|
|
}
|
|
.logo-subtitle {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
}
|
|
.warning-box {
|
|
background: #fff7e6;
|
|
border: 1px solid #ffd591;
|
|
border-radius: 10px;
|
|
padding: 16px;
|
|
margin-bottom: 24px;
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: flex-start;
|
|
}
|
|
.warning-box i {
|
|
color: var(--warning);
|
|
font-size: 18px;
|
|
margin-top: 2px;
|
|
}
|
|
.warning-text {
|
|
font-size: 13px;
|
|
color: #d48806;
|
|
line-height: 1.5;
|
|
}
|
|
.user-info {
|
|
background: #f8f9fa;
|
|
border-radius: 10px;
|
|
padding: 16px;
|
|
margin-bottom: 24px;
|
|
text-align: center;
|
|
}
|
|
.user-avatar {
|
|
width: 56px;
|
|
height: 56px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 50%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 20px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.user-name {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
margin-bottom: 4px;
|
|
}
|
|
.user-corp {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
}
|
|
.form-label {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
margin-bottom: 8px;
|
|
}
|
|
.form-control {
|
|
height: 46px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
font-size: 14px;
|
|
padding: 0 14px;
|
|
}
|
|
.form-control:focus {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px rgba(7,193,96,0.1);
|
|
}
|
|
.btn-primary {
|
|
background: var(--primary);
|
|
border: none;
|
|
height: 46px;
|
|
border-radius: 10px;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
width: 100%;
|
|
margin-top: 8px;
|
|
}
|
|
.btn-primary:hover {
|
|
background: var(--primary-dark);
|
|
}
|
|
.btn-outline {
|
|
border: 1px solid var(--border);
|
|
background: white;
|
|
color: var(--text);
|
|
height: 46px;
|
|
border-radius: 10px;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
width: 100%;
|
|
margin-top: 12px;
|
|
}
|
|
.btn-outline:hover {
|
|
background: #f8f9fa;
|
|
border-color: var(--text-secondary);
|
|
}
|
|
.bind-option {
|
|
margin-bottom: 20px;
|
|
}
|
|
.option-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
margin-bottom: 10px;
|
|
}
|
|
.radio-card {
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 14px;
|
|
margin-bottom: 10px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.radio-card:hover {
|
|
border-color: var(--primary);
|
|
}
|
|
.radio-card.selected {
|
|
border-color: var(--primary);
|
|
background: rgba(7,193,96,0.05);
|
|
}
|
|
.radio-card input {
|
|
display: none;
|
|
}
|
|
.radio-card .radio-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.radio-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid var(--border);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.radio-card.selected .radio-icon {
|
|
border-color: var(--primary);
|
|
}
|
|
.radio-card.selected .radio-icon::after {
|
|
content: '';
|
|
width: 10px;
|
|
height: 10px;
|
|
background: var(--primary);
|
|
border-radius: 50%;
|
|
}
|
|
.radio-text {
|
|
font-size: 14px;
|
|
color: var(--text);
|
|
}
|
|
.radio-desc {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
margin-top: 4px;
|
|
margin-left: 30px;
|
|
}
|
|
.divider {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 20px 0;
|
|
color: var(--text-secondary);
|
|
font-size: 13px;
|
|
}
|
|
.divider::before,
|
|
.divider::after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
background: var(--border);
|
|
}
|
|
.divider span {
|
|
padding: 0 16px;
|
|
}
|
|
/* 移动端适配 */
|
|
@media (max-width: 480px) {
|
|
.bind-card {
|
|
padding: 28px 20px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="bind-card">
|
|
<!-- Logo 区域 -->
|
|
<div class="logo">
|
|
<div class="logo-icon">
|
|
<i class="fas fa-link"></i>
|
|
</div>
|
|
<div class="logo-title">账号绑定</div>
|
|
<div class="logo-subtitle">首次登录，请绑定您的账号</div>
|
|
</div>
|
|
|
|
<!-- 提示信息 -->
|
|
<div class="warning-box">
|
|
<i class="fas fa-info-circle"></i>
|
|
<div class="warning-text">
|
|
检测到您来自外部企业，请绑定您在系统中的账号以继续使用
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 扫码用户信息 -->
|
|
<div class="user-info">
|
|
<div class="user-avatar">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
<div class="user-name">张三 (zhangsan)</div>
|
|
<div class="user-corp">外部企业：XX集团</div>
|
|
</div>
|
|
|
|
<!-- 绑定方式选择 -->
|
|
<div class="bind-option">
|
|
<div class="option-title">请选择绑定方式</div>
|
|
|
|
<label class="radio-card selected">
|
|
<input type="radio" name="bindType" value="existing" checked>
|
|
<div class="radio-content">
|
|
<div class="radio-icon"></div>
|
|
<div>
|
|
<div class="radio-text">绑定已有账号</div>
|
|
<div class="radio-desc">输入您在系统中的员工号或工号</div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="radio-card">
|
|
<input type="radio" name="bindType" value="new">
|
|
<div class="radio-content">
|
|
<div class="radio-icon"></div>
|
|
<div>
|
|
<div class="radio-text">申请新账号</div>
|
|
<div class="radio-desc">联系管理员审批后开通</div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- 绑定已有账号表单 -->
|
|
<div id="existingForm">
|
|
<div class="mb-3">
|
|
<label class="form-label">员工号 / 工号</label>
|
|
<input type="text" class="form-control" placeholder="请输入您的员工号或工号">
|
|
</div>
|
|
<button class="btn btn-primary">
|
|
<i class="fas fa-link me-2"></i>立即绑定
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 申请新账号表单（隐藏） -->
|
|
<div id="newForm" style="display: none;">
|
|
<div class="mb-3">
|
|
<label class="form-label">真实姓名</label>
|
|
<input type="text" class="form-control" placeholder="请输入您的真实姓名">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">所属部门</label>
|
|
<input type="text" class="form-control" placeholder="请输入您所在的部门">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">联系电话</label>
|
|
<input type="tel" class="form-control" placeholder="请输入您的联系电话">
|
|
</div>
|
|
<button class="btn btn-primary">
|
|
<i class="fas fa-paper-plane me-2"></i>提交申请
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 分隔线 -->
|
|
<div class="divider">
|
|
<span>或</span>
|
|
</div>
|
|
|
|
<!-- 返回登录 -->
|
|
<button class="btn btn-outline" onclick="history.back()">
|
|
<i class="fas fa-arrow-left me-2"></i>返回登录
|
|
</button>
|
|
</div>
|
|
|
|
<script>
|
|
// 绑定方式切换
|
|
const radioCards = document.querySelectorAll('.radio-card');
|
|
const existingForm = document.getElementById('existingForm');
|
|
const newForm = document.getElementById('newForm');
|
|
|
|
radioCards.forEach(card => {
|
|
card.addEventListener('click', function() {
|
|
// 更新选中状态
|
|
radioCards.forEach(c => c.classList.remove('selected'));
|
|
this.classList.add('selected');
|
|
|
|
// 切换表单
|
|
const value = this.querySelector('input').value;
|
|
if (value === 'existing') {
|
|
existingForm.style.display = 'block';
|
|
newForm.style.display = 'none';
|
|
} else {
|
|
existingForm.style.display = 'none';
|
|
newForm.style.display = 'block';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|