zjk
2026-07-31 8665daa7aa863f96d0d8f27c167edae1efc38022
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
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>访问区域管理 - 运营活动管理平台</title>
  <link rel="stylesheet" href="../css/dashboard.css">
  <link rel="stylesheet" href="../css/components.css">
  <link rel="stylesheet" href="../css/area-management.css">
</head>
<body>
  <div class="app-shell">
    <aside class="sidebar">
      <div class="brand">
        <img src="../assets/login-avatar.svg" alt="">
        <strong>运营活动管理平台</strong>
      </div>
 
      <nav class="menu" aria-label="主菜单">
        <a class="menu-item" href="./dashboard.html">
          <span class="menu-icon home"></span>
          <span>首页</span>
        </a>
 
        <section class="menu-group open">
          <button class="menu-title" type="button">
            <span class="menu-icon screen"></span>
            <span>系统</span>
            <span class="chevron"></span>
          </button>
          <a href="./system-config.html">系统配置</a>
          <a href="./protocol-config.html">入园承诺</a>
          <a href="./version-update.html">访客机版本更新</a>
        </section>
 
        <section class="menu-group open">
          <button class="menu-title" type="button">
            <span class="menu-icon device"></span>
            <span>设备管理</span>
            <span class="chevron"></span>
          </button>
          <a href="./visitor-machine.html">访客机管理</a>
          <a href="./door-management.html">门禁管理</a>
        </section>
 
        <section class="menu-group open">
          <button class="menu-title" type="button">
            <span class="menu-icon people"></span>
            <span>人员管理</span>
            <span class="chevron"></span>
          </button>
          <a href="./department-management.html">部门</a>
          <a href="./employee-management.html">员工管理</a>
        </section>
 
        <a class="menu-item active" href="./area-management.html">
          <span class="menu-icon map"></span>
          <span>区域管理</span>
        </a>
 
        <section class="menu-group open">
          <button class="menu-title" type="button">
            <span class="menu-icon log"></span>
            <span>记录与日志</span>
            <span class="chevron"></span>
          </button>
          <a href="./visitor-record.html">访客登记记录</a>
          <a href="./operation-log.html">操作日志</a>
        </section>
 
        <section class="menu-group open">
          <button class="menu-title" type="button">
            <span class="menu-icon account"></span>
            <span>账号管理</span>
            <span class="chevron"></span>
          </button>
          <a href="./platform-admin.html">平台管理员</a>
          <a href="./role-management.html">角色</a>
        </section>
      </nav>
    </aside>
 
    <section class="main">
      <header class="topbar">
        <div></div>
        <div class="top-actions">
          <button class="icon-button" type="button" title="全屏">
            <span class="expand-icon"></span>
          </button>
          <span class="user-avatar">用</span>
          <div class="user-menu">
            <button id="userMenuButton" class="user-name" type="button" aria-haspopup="true" aria-expanded="false">
              <span id="userDisplayName">用户</span>
              <span class="user-caret"></span>
            </button>
            <div id="userDropdown" class="user-dropdown" hidden>
              <button type="button" data-action="home">返回首页</button>
              <button type="button" data-action="logout">退出登录</button>
            </div>
          </div>
        </div>
      </header>
 
      <div class="tabs">
        <span class="home-tab"></span>
        <span class="tab-divider"></span>
        <span class="tab active">区域管理</span>
      </div>
 
      <main class="area-page">
        <section class="area-card">
          <header class="area-header">
            <h1>访问区域管理</h1>
            <button id="addRootButton" class="add-root-button" type="button">新增一级区域</button>
          </header>
 
          <div class="area-search">
            <input id="areaSearchInput" type="text" placeholder="搜索部门名称">
            <button id="areaSearchButton" type="button" title="搜索"></button>
          </div>
 
          <section class="area-tree-panel">
            <div id="areaTree" class="area-tree"></div>
            <div id="areaEmpty" class="area-empty" hidden>暂无区域数据</div>
          </section>
        </section>
      </main>
    </section>
  </div>
 
  <div id="areaModal" class="modal" hidden>
    <div class="modal-mask" data-close="area"></div>
    <section class="modal-panel area-modal-panel" role="dialog" aria-modal="true" aria-labelledby="areaModalTitle">
      <header class="modal-header area-modal-header">
        <h3 id="areaModalTitle">添加区域</h3>
        <button class="modal-close" type="button" data-close="area">×</button>
      </header>
 
      <form id="areaForm" class="area-form">
        <label class="area-row">
          <span>上级区域</span>
          <select id="parentId"></select>
        </label>
 
        <label class="area-row">
          <span>区域编码</span>
          <input id="areaCode" type="text" placeholder="请输入">
        </label>
 
        <label class="area-row required">
          <span>区域名称</span>
          <input id="areaName" type="text" placeholder="请输入">
        </label>
 
        <label class="area-row">
          <span>区域说明</span>
          <input id="areaDesc" type="text" placeholder="请输入">
        </label>
 
        <footer class="area-modal-actions">
          <button class="ghost-button" type="button" data-close="area">取消</button>
          <button id="saveAreaButton" class="primary-button" type="submit">保存</button>
        </footer>
      </form>
    </section>
  </div>
 
  <script src="../js/components.js"></script>
  <script src="../js/config.js"></script>
  <script src="../js/area-management.js"></script>
</body>
</html>