Skip to content

A
aozhiYX
Commit 9e304fa8 by suyuchen
Options

feat(sidebar): 添加侧边栏导航和升级记录页面

- 创建 aside.html 侧边栏组件，包含设备管理、工单管理、基本设置等导航菜单 - 实现可折叠子菜单功能，支持设备编码管理、工单池、升级记录等功能入口 - 添加 toggleSubmenu JavaScript 函数用于控制子菜单展开收起 - 创建 escalation-records.html 升级记录列表页面，包含完整的页面结构和样式 - 实现升级记录表格展示功能，支持筛选和分页操作 - 配置 .gitignore 文件忽略 IDE 相关文件和配置
parent 50368a06
Showing with 23 additions and 182 deletions
二维码列表页.html
<!DOCTYPE html> <!DOCTYPE html>
...@@ -662,8 +662,11 @@ ...@@ -662,8 +662,11 @@
} }
.action-btn.view-btn { .action-btn.view-btn {
background: rgba(27, 100, 243, 0.08); /*background: rgba(27, 100, 243, 0.08);*/
color: var(--primary-color); background: #F56C6C;
/*color: var(--primary-color);*/
color: #fff;
} }
.action-btn.view-btn:hover { .action-btn.view-btn:hover {
...@@ -1125,134 +1128,7 @@ ...@@ -1125,134 +1128,7 @@
</head> </head>
<body> <body>
<div class="app-container"> <div class="app-container">
<aside class="sidebar"> <div id="sidebar-container"></div>
<div class="sidebar-logo">
<div class="logo-icon">S</div>
<div class="logo-text">售后系统</div>
</div>
<nav class="sidebar-menu">
<!-- 设备管理 -->
<div class="nav-item has-submenu expanded" onclick="toggleSubmenu(this)">
<div style="display: flex; align-items: center; gap: 12px;">
<svg class="nav-icon" viewBox="0 0 20 20">
<path d="M4 4h12a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2z"/>
<path d="M7 9h6M7 12h4"/>
</svg>
<span>设备管理</span>
</div>
<svg class="nav-arrow nav-icon" viewBox="0 0 20 20">
<path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
</svg>
</div>
<div class="nav-submenu">
<a href="二维码列表页.html" class="nav-subitem active">
设备编码管理
</a>
</div>
<!-- 工单管理 -->
<div class="nav-item has-submenu expanded" onclick="toggleSubmenu(this)">
<div style="display: flex; align-items: center; gap: 12px;">
<svg class="nav-icon" viewBox="0 0 20 20">
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
<path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/>
</svg>
<span>工单管理</span>
</div>
<svg class="nav-arrow nav-icon" viewBox="0 0 20 20">
<path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
</svg>
</div>
<div class="nav-submenu">
<a href="ticket-list.html" class="nav-subitem">
工单池
</a>
<a href="ticket-handle.html" class="nav-subitem">
我的工单
</a>
<a href="sla-monitor.html" class="nav-subitem">
SLA自动监控
</a>
<a href="escalation-records.html" class="nav-subitem">
升级记录列表
</a>
<a href="kpi-report.html" class="nav-subitem">
KPI报表
</a>
<!-- <a href="售后看板.html" class="nav-subitem">
售后看板
</a> -->
</div>
<!-- 基本设置 -->
<div class="nav-item has-submenu expanded" onclick="toggleSubmenu(this)">
<div style="display: flex; align-items: center; gap: 12px;">
<svg class="nav-icon" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
</svg>
<span>基本设置</span>
</div>
<svg class="nav-arrow nav-icon" viewBox="0 0 20 20">
<path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
</svg>
</div>
<div class="nav-submenu">
<a href="category-management.html" class="nav-subitem">
分类管理
</a>
<a href="escalation-rules.html" class="nav-subitem">
升级规则配置
</a>
<a href="客户公司管理1.html" class="nav-subitem">
客户公司管理
</a>
</div>
<!-- 客户账号管理 -->
<div class="nav-item has-submenu expanded" onclick="toggleSubmenu(this)">
<div style="display: flex; align-items: center; gap: 12px;">
<svg class="nav-icon" viewBox="0 0 20 20">
<path d="M10 2a4 4 0 110 8 4 4 0 010-8z"/>
<path d="M4 16a6 6 0 1112 0H4z"/>
</svg>
<span>客户账号管理</span>
</div>
<svg class="nav-arrow nav-icon" viewBox="0 0 20 20">
<path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
</svg>
</div>
<div class="nav-submenu">
<a href="用户管理.html" class="nav-subitem">
客户用户管理
</a>
</div>
<!-- 信息门户 -->
<div class="nav-item has-submenu expanded" onclick="toggleSubmenu(this)">
<div style="display: flex; align-items: center; gap: 12px;">
<svg class="nav-icon" viewBox="0 0 20 20">
<path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"/>
</svg>
<span>信息门户</span>
</div>
<svg class="nav-arrow nav-icon" viewBox="0 0 20 20">
<path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
</svg>
</div>
<div class="nav-submenu">
<a href="门户网站.html" class="nav-subitem">
门户网站
</a>
<a href="价格汇率.html" class="nav-subitem">
价格汇率
</a>
<a href="邮件.html" class="nav-subitem">
邮件管理
</a>
</div>
</nav>
</aside>
<header class="top-header"> <header class="top-header">
<div class="header-left"> <div class="header-left">
<div class="breadcrumb"> <div class="breadcrumb">
...@@ -1316,58 +1192,21 @@ ...@@ -1316,58 +1192,21 @@
<td>张三</td> <td>张三</td>
<td> <td>
<div class="action-buttons"> <div class="action-buttons">
<button class="action-btn view-btn" data-action="view"> <button class="action-btn view-btn" >
<i class="fas fa-eye"></i> 查看 <!-- <input type="radio" name="qrcode-radio"/>-->
</button> 设备档案
<button class="action-btn edit-btn" data-action="edit">
<i class="fas fa-edit"></i> 编辑
</button>
<button class="action-btn copy-btn" data-action="copy">
<i class="fas fa-copy"></i> 复制
</button>
</div>
</td>
</tr>
<tr data-id="2">
<td><strong>自助服务机-02</strong></td>
<td><code style="background: rgba(27, 100, 243, 0.1); padding: 4px 8px; border-radius: 4px; color: var(--primary-color);">ZZ-2023002</code></td>
<td>自助服务机</td>
<td class="table-cell-number">2</td>
<td class="table-cell-date">2023-06-10</td>
<td>运维部</td>
<td>李四</td>
<td>
<div class="action-buttons">
<button class="action-btn view-btn" data-action="view">
<i class="fas fa-eye"></i> 查看
</button>
<button class="action-btn edit-btn" data-action="edit">
<i class="fas fa-edit"></i> 编辑
</button> </button>
<button class="action-btn copy-btn" data-action="copy"> <button class="action-btn view-btn" >
<i class="fas fa-copy"></i> 复制 <!-- <input type="radio" name="qrcode-radio"/>-->
</button> 认证管理
</div>
</td>
</tr>
<tr data-id="3">
<td><strong>查询终端-03</strong></td>
<td><code style="background: rgba(27, 100, 243, 0.1); padding: 4px 8px; border-radius: 4px; color: var(--primary-color);">CX-2023003</code></td>
<td>信息查询终端</td>
<td class="table-cell-number">5</td>
<td class="table-cell-date">2023-05-28</td>
<td>产品部</td>
<td>王五</td>
<td>
<div class="action-buttons">
<button class="action-btn view-btn" data-action="view">
<i class="fas fa-eye"></i> 查看
</button> </button>
<button class="action-btn edit-btn" data-action="edit"> <button class="action-btn copy-btn" >
<i class="fas fa-edit"></i> 编辑 <!-- <input type="radio" name="qrcode-radio"/>-->
制造商
</button> </button>
<button class="action-btn copy-btn" data-action="copy"> <button class="action-btn copy-btn" >
<i class="fas fa-copy"></i> 复制 <!-- <input type="radio" name="qrcode-radio"/>-->
知识仓库
</button> </button>
</div> </div>
</td> </td>
...@@ -2471,4 +2310,5 @@ ...@@ -2471,4 +2310,5 @@
}); });
</script> </script>
</body> </body>
<script src="./js.js"> </script>
</html> </html>
\ No newline at end of file
设备档案.html
<!DOCTYPE html> <!DOCTYPE html>
...@@ -1334,7 +1334,7 @@ ...@@ -1334,7 +1334,7 @@
<i class="fas fa-plus"></i> 新增 <i class="fas fa-plus"></i> 新增
</button> </button>
<button class="btn btn-primary" id="batch-upload-btn" style="background: #17a2b8;"> <button class="btn btn-primary" id="batch-upload-btn" style="background: #17a2b8;">
<i class="fas fa-upload"></i> 批量上传 <i class="fas fa-upload"></i> 批量导入
</button> </button>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment