-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcomponents.html
More file actions
244 lines (235 loc) · 14.3 KB
/
Copy pathcomponents.html
File metadata and controls
244 lines (235 loc) · 14.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>通用组件库 · OA 管理系统</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<div class="layout">
<div class="overlay" id="sidebarOverlay"></div>
<aside class="sidebar" id="sidebar">
<div class="brand">
<div class="brand-logo"><i class="bi bi-grid-1x2-fill"></i></div>
<div><div class="brand-title">OA 管理系统</div><div class="brand-sub">Office Automation</div></div>
</div>
<nav class="menu"><div class="sidebar-collapse-hint">点击顶部菜单按钮可切换图标模式</div>
<div class="menu-group " data-menu-group="workspace">
<button class="menu-parent " type="button"><i class="bi bi-speedometer2"></i><span>工作台</span><i class="bi bi-chevron-right menu-chevron"></i></button>
<div class="submenu">
<a class="submenu-link " href="index.html"><i class="bi bi-house"></i><span>首页工作台</span></a>
<a class="submenu-link " href="index.html"><i class="bi bi-check2-square"></i><span>我的待办</span><span class="submenu-badge">6</span></a>
</div></div>
<div class="menu-group " data-menu-group="approval">
<button class="menu-parent " type="button"><i class="bi bi-inboxes"></i><span>审批中心</span><i class="bi bi-chevron-right menu-chevron"></i></button>
<div class="submenu">
<a class="submenu-link " href="approvals.html"><i class="bi bi-list-check"></i><span>审批中心</span></a>
<a class="submenu-link " href="apply.html"><i class="bi bi-plus-square"></i><span>发起申请</span></a>
<a class="submenu-link " href="my-applications.html"><i class="bi bi-send-check"></i><span>我的申请</span></a>
</div></div>
<div class="menu-group " data-menu-group="notice">
<button class="menu-parent " type="button"><i class="bi bi-bell"></i><span>通知消息</span><i class="bi bi-chevron-right menu-chevron"></i></button>
<div class="submenu">
<a class="submenu-link " href="messages.html"><i class="bi bi-chat-dots"></i><span>消息中心</span></a>
<a class="submenu-link " href="announcements.html"><i class="bi bi-megaphone"></i><span>通知公告</span></a>
</div></div>
<div class="menu-group open" data-menu-group="template">
<button class="menu-parent active open" type="button"><i class="bi bi-diagram-3"></i><span>模板与流程</span><i class="bi bi-chevron-right menu-chevron"></i></button>
<div class="submenu">
<a class="submenu-link " href="workflow-templates.html"><i class="bi bi-diagram-2"></i><span>流程模板</span></a>
<a class="submenu-link " href="form-templates.html"><i class="bi bi-card-checklist"></i><span>表单模板</span></a>
<a class="submenu-link " href="flow-designer.html"><i class="bi bi-node-plus"></i><span>流程设计器</span></a>
<a class="submenu-link " href="form-designer.html"><i class="bi bi-ui-checks"></i><span>表单设计器</span></a>
<a class="submenu-link active" href="components.html"><i class="bi bi-boxes"></i><span>通用组件库</span></a>
</div></div>
<div class="menu-group " data-menu-group="org">
<button class="menu-parent " type="button"><i class="bi bi-people"></i><span>组织管理</span><i class="bi bi-chevron-right menu-chevron"></i></button>
<div class="submenu">
<a class="submenu-link " href="employees.html"><i class="bi bi-person-lines-fill"></i><span>员工管理</span></a>
<a class="submenu-link " href="organization.html"><i class="bi bi-building"></i><span>部门组织架构</span></a>
<a class="submenu-link " href="roles.html"><i class="bi bi-shield-lock"></i><span>角色权限</span></a>
</div></div>
<div class="menu-group " data-menu-group="extension">
<button class="menu-parent " type="button"><i class="bi bi-grid"></i><span>OA 扩展</span><i class="bi bi-chevron-right menu-chevron"></i></button>
<div class="submenu">
<a class="submenu-link " href="files.html"><i class="bi bi-folder2-open"></i><span>文件中心</span></a>
<a class="submenu-link " href="calendar.html"><i class="bi bi-calendar3"></i><span>日程会议</span></a>
<a class="submenu-link " href="attendance.html"><i class="bi bi-fingerprint"></i><span>考勤管理</span></a>
</div></div>
<div class="menu-group " data-menu-group="ops">
<button class="menu-parent " type="button"><i class="bi bi-activity"></i><span>系统运维</span><i class="bi bi-chevron-right menu-chevron"></i></button>
<div class="submenu">
<a class="submenu-link " href="system-monitor.html"><i class="bi bi-activity"></i><span>系统监控</span></a>
<a class="submenu-link " href="empty-states.html"><i class="bi bi-window-stack"></i><span>状态页面</span></a>
<a class="submenu-link " href="logs.html"><i class="bi bi-clock-history"></i><span>操作日志</span></a>
</div></div>
<div class="menu-group " data-menu-group="personal">
<button class="menu-parent " type="button"><i class="bi bi-person-gear"></i><span>个人与设置</span><i class="bi bi-chevron-right menu-chevron"></i></button>
<div class="submenu">
<a class="submenu-link " href="profile.html"><i class="bi bi-person-circle"></i><span>个人中心</span></a>
<a class="submenu-link " href="password.html"><i class="bi bi-key"></i><span>修改密码</span></a>
<a class="submenu-link " href="settings.html"><i class="bi bi-gear"></i><span>系统设置</span></a>
</div></div></nav>
<div class="sidebar-footer">
<div class="user-mini"><div class="avatar">W</div><div><div class="user-name">Winson Yang</div><div class="user-role">系统管理员</div></div></div>
</div>
</aside>
<main class="main">
<header class="topbar">
<button class="icon-btn mobile-btn" id="menuBtn" type="button"><i class="bi bi-list"></i></button>
<div class="search-wrap"><i class="bi bi-search"></i><input class="form-control global-search" type="search" placeholder="搜索员工、流程、公告、审批单"></div>
<div class="top-actions">
<a class="icon-btn" href="messages.html"><i class="bi bi-bell"></i><span class="dot"></span></a>
<a class="icon-btn" href="profile.html"><i class="bi bi-person"></i></a>
<a class="btn btn-primary d-none d-sm-inline-flex" href="apply.html"><i class="bi bi-plus-lg me-1"></i>新建申请</a>
</div>
</header>
<div class="content">
<section class="page-head">
<div class="page-title">
<h1>通用组件库</h1>
<p>统一 OA 系统的按钮、标签、表格、弹窗、空状态、上传和选择器样式。</p>
</div>
<div class="page-actions">
<button class="btn btn-outline-secondary" data-toast="组件规范已导出示例"><i class="bi bi-download me-1"></i>导出规范</button>
<button class="btn btn-primary" data-toast="组件预览已刷新"><i class="bi bi-arrow-clockwise me-1"></i>刷新预览</button>
</div>
</section>
<section class="component-layout">
<aside class="cardx">
<div class="cardx-head">
<h2 class="cardx-title">组件目录</h2>
</div>
<div class="cardx-body">
<nav class="component-nav">
<a href="#buttons"><i class="bi bi-square"></i>按钮 Button</a>
<a href="#badges"><i class="bi bi-tags"></i>标签 Badge</a>
<a href="#cards"><i class="bi bi-card-text"></i>卡片 Card</a>
<a href="#tables"><i class="bi bi-table"></i>表格 Table</a>
<a href="#forms"><i class="bi bi-input-cursor-text"></i>表单 Form</a>
<a href="#states"><i class="bi bi-inbox"></i>空状态 Empty</a>
<a href="#upload"><i class="bi bi-cloud-upload"></i>上传 Upload</a>
<a href="#pickers"><i class="bi bi-person-plus"></i>人员选择器</a>
</nav>
</div>
</aside>
<main class="component-showcase">
<section class="cardx component-section" id="buttons">
<div class="cardx-head"><h2 class="cardx-title">按钮 Button</h2></div>
<div class="cardx-body">
<div class="component-demo-box">
<div class="component-demo-title">常用按钮</div>
<div class="component-button-row">
<button class="btn btn-primary">主按钮</button>
<button class="btn btn-outline-primary">次按钮</button>
<button class="btn btn-outline-secondary">默认按钮</button>
<button class="btn btn-outline-danger">危险操作</button>
<button class="btn btn-success">通过</button>
<button class="btn btn-warning">提醒</button>
</div>
<pre class="component-code"><button class="btn btn-primary">主按钮</button></pre>
</div>
</div>
</section>
<section class="cardx component-section" id="badges">
<div class="cardx-head"><h2 class="cardx-title">标签 Badge</h2></div>
<div class="cardx-body">
<div class="component-demo-box">
<div class="component-demo-title">业务状态标签</div>
<div class="component-badge-row">
<span class="badge badge-soft-blue rounded-pill">审批中</span>
<span class="badge badge-soft-green rounded-pill">已通过</span>
<span class="badge badge-soft-orange rounded-pill">待处理</span>
<span class="badge badge-soft-red rounded-pill">已驳回</span>
<span class="badge badge-soft-yellow rounded-pill">即将超时</span>
<span class="badge badge-soft-gray rounded-pill">草稿</span>
</div>
</div>
</div>
</section>
<section class="cardx component-section" id="cards">
<div class="cardx-head"><h2 class="cardx-title">卡片 Card</h2></div>
<div class="cardx-body">
<div class="component-card-grid">
<div class="stat-card text-blue"><div class="stat-icon"><i class="bi bi-clipboard-check"></i></div><div class="stat-label">待审批</div><div class="stat-number">12</div></div>
<div class="stat-card text-orange"><div class="stat-icon"><i class="bi bi-alarm"></i></div><div class="stat-label">即将超时</div><div class="stat-number">3</div></div>
<div class="stat-card text-green"><div class="stat-icon"><i class="bi bi-check2-circle"></i></div><div class="stat-label">已完成</div><div class="stat-number">89</div></div>
</div>
</div>
</section>
<section class="cardx component-section" id="tables">
<div class="cardx-head"><h2 class="cardx-title">表格 Table</h2></div>
<div class="cardx-body">
<div class="template-table-wrap table-responsive">
<table class="table table-hover align-middle template-table">
<thead><tr><th>事项</th><th>类型</th><th>状态</th><th>提交人</th><th class="text-end">操作</th></tr></thead>
<tbody>
<tr><td>差旅报销申请</td><td>报销</td><td><span class="badge badge-soft-orange rounded-pill">待处理</span></td><td>张三</td><td class="text-end"><button class="btn btn-sm btn-outline-secondary">详情</button></td></tr>
<tr><td>合同审批申请</td><td>合同</td><td><span class="badge badge-soft-blue rounded-pill">审批中</span></td><td>李敏</td><td class="text-end"><button class="btn btn-sm btn-outline-secondary">详情</button></td></tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="cardx component-section" id="forms">
<div class="cardx-head"><h2 class="cardx-title">表单 Form</h2></div>
<div class="cardx-body">
<div class="apply-field-grid">
<div><label class="form-label">申请标题</label><input class="form-control" placeholder="请输入申请标题"></div>
<div><label class="form-label">申请类型</label><select class="form-select"><option>报销申请</option><option>合同审批</option></select></div>
<div class="full"><label class="form-label">申请说明</label><textarea class="form-control" rows="3" placeholder="请输入说明"></textarea></div>
</div>
</div>
</section>
<section class="cardx component-section" id="states">
<div class="cardx-head"><h2 class="cardx-title">空状态 Empty</h2></div>
<div class="cardx-body">
<div class="component-empty">
<i class="bi bi-inbox"></i>
<div class="fw-bold text-dark">暂无数据</div>
<div class="mt-1">当前筛选条件下没有找到记录。</div>
</div>
</div>
</section>
<section class="cardx component-section" id="upload">
<div class="cardx-head"><h2 class="cardx-title">上传 Upload</h2></div>
<div class="cardx-body">
<div class="component-upload">
<i class="bi bi-cloud-upload"></i>
<div class="fw-bold">点击或拖拽文件到此处上传</div>
<div class="small mt-1">支持 PDF、JPG、PNG、DOCX、XLSX</div>
</div>
</div>
</section>
<section class="cardx component-section" id="pickers">
<div class="cardx-head"><h2 class="cardx-title">人员选择器</h2></div>
<div class="cardx-body">
<div class="component-demo-box">
<div class="component-demo-title">已选人员</div>
<div class="component-user-picker">
<div class="picker-user"><div class="emp-avatar purple">W</div><span>Winson Yang</span><i class="bi bi-x"></i></div>
<div class="picker-user"><div class="emp-avatar green">李</div><span>李敏</span><i class="bi bi-x"></i></div>
<div class="picker-user"><div class="emp-avatar orange">周</div><span>周洁</span><i class="bi bi-x"></i></div>
<button class="btn btn-outline-primary btn-sm"><i class="bi bi-plus-lg me-1"></i>选择人员</button>
</div>
</div>
</div>
</section>
</main>
</section>
</div>
</main>
</div>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index:1080">
<div id="liveToast" class="toast align-items-center text-bg-dark border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex"><div class="toast-body" id="toastText">操作成功</div><button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="data/mock-data.js"></script>
<script src="assets/js/app.js"></script>
</body>
</html>