Admin UI (zheng-admin)
Relevant source files
The following files were used as context for generating this wiki page:
The zheng-admin module provides a generic, responsive, Material Design-styled backend management system UI. It is built using Bootstrap and serves as a foundational frontend template for various administrative modules within the zheng project, such as the User Permission Management System (UPMS) and Content Management System (CMS). Its core purpose is to offer a consistent user experience, a flexible layout, and a dynamic, themeable interface that can be adapted for different backend systems.
This UI is a single-page application (SPA) that uses a tabbed interface to display different management pages within iframes. It features a system-switching capability, allowing the user to toggle between different management modules, which dynamically updates the UI theme and available menu options.
Sources: zheng-admin/README.md, zheng-admin/src/index.html:275-281, zheng-cms/zheng-cms-admin/pom.xml:21-25
Architecture and Core Components
The UI is structured as a classic three-part layout: a header, a main content area with a sidebar, and a footer. The main content is dynamically loaded into tabs.
Sources: zheng-admin/src/index.html:47, 151, 273
Page Layout
The main layout of the index.html page is defined by several key HTML5 semantic tags.
This diagram shows the basic DOM structure of the admin interface.
Sources: zheng-admin/src/index.html:47, 151, 273
| Component | ID | Description |
|---|---|---|
| Header | header | The top bar containing the main menu toggle, system logo/title, and utility icons for search, system switching, and user actions. |
| Main Section | main | The primary container for the application's main content. |
| Sidebar | sidebar | The left-side navigation panel. It contains the user profile information and the main menu tree. |
| Content Area | content | The main workspace on the right. It features a tabbed interface to display different pages. |
| Footer | footer | The bottom section of the page. |
Sources: zheng-admin/src/index.html:47, 151, 153, 245, 273
Dependencies
The zheng-admin UI relies on several key third-party JavaScript and CSS libraries to function.
| Library | Purpose |
|---|---|
jquery.1.12.4.min.js | Core DOM manipulation and event handling. |
bootstrap.min.js | Responsive layout, modals, dropdowns, and other UI components. |
waves.min.js | Material Design click effects. |
jquery.mCustomScrollbar.concat.min.js | Custom scrollbars for content areas. |
BootstrapMenu.min.js | Context menu functionality for tabs. |
jquery.fullPage.min.js | Full-screen mode functionality. |
jquery.cookie.js | Used for storing the current system state. |
Sources: zheng-admin/src/index.html:275-283, zheng-admin/src/js/admin.js:13-14
Key Features
System Switching and Theming
A core feature of the zheng-admin UI is the ability to switch between different backend systems. This action dynamically changes the visual theme (colors, logo) and the available menu items in the sidebar.
The system switcher is a dropdown in the header. Each system is represented by a link with specific data attributes: systemid, systemname, and systemtitle.
<a class="waves-effect switch-systems" href="javascript:;" systemid="1" systemname="zheng-upms-server" systemtitle="权限管理系统">
<i class="zmdi zmdi-shield-security"></i> 权限管理系统
</a>
Sources: zheng-admin/src/index.html:98-100
The theming is controlled by CSS rules that target an ID on the <body> tag. When a user switches systems, JavaScript updates the id of the <body> element to match the selected system's systemname.
/* Example theme for UPMS */
#zheng-upms-server #header {background: #29A176;}
#zheng-upms-server .content_tab{background: #29A176;}
#zheng-upms-server .s-profile>a{background: url(resources/images/zheng-upms.png) left top no-repeat;}
/* Example theme for CMS */
#zheng-cms-admin #header {background: #455EC5;}
#zheng-cms-admin .content_tab{background: #455EC5;}
#zheng-cms-admin .s-profile>a{background: url(resources/images/zheng-cms.png) left top no-repeat;}
Sources: zheng-admin/src/index.html:17-25
The following sequence diagram illustrates the system switching flow:
This diagram shows how a user action triggers JavaScript to update the body ID, which in turn applies new CSS styles and filters the visible menu items.
Sources: zheng-admin/src/js/admin.js:12-29, zheng-admin/src/index.html:17-44, 97-123, 185-231
Tabbed Content Navigation
The main content area uses a tabbed interface to manage multiple pages simultaneously. Each tab corresponds to an <iframe> that loads the respective page. This allows for a multi-document experience within a single-page shell.
The Tab object in admin.js manages all tab-related functionality.
Adding a Tab
When a user clicks a menu item, the Tab.addTab(title, url) function is called.
// Example menu item
<li><a class="waves-effect" href="javascript:Tab.addTab('系统管理', 'crud.html');">系统管理</a></li>
Sources: zheng-admin/src/index.html:187
The addTab function performs the following actions:
- Checks if a tab with the same URL already exists. If so, it just activates it.
- If not, it creates a new
<li>element for the tab strip (#tabs). - It creates a new
<iframe>element for the content area (#content_main). - Both new elements are appended to the DOM.
- The new tab and iframe are set as the active (
cur) ones.
The flow for adding a new tab is as follows:
Sources: zheng-admin/src/js/admin.js:108-141
Sidebar Menu
The sidebar contains a multi-level navigation menu. Top-level items can contain a <ul> of sub-menu items.
- Menu Structure: Menus are defined as a list (
<ul class="main-menu">). Sub-menus are nested<ul>elements. - System Filtering: Each menu group intended for a specific system has a class like
system_1orsystem_2. These classes correspond to thesystemidand are used to show/hide the menus when switching systems. - Accordion Behavior: The
admin.jsscript handles the expand/collapse functionality for sub-menus.
<!-- Menu for system with id=1 (UPMS) -->
<li class="sub-menu system_menus system_1 0">
<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-accounts-list"></i> 系统组织管理</a>
<ul>
<li><a class="waves-effect" href="javascript:Tab.addTab('系统管理', 'crud.html');">系统管理</a></li>
<li><a class="waves-effect" href="javascript:Tab.addTab('组织管理', '/manage/organization/index');">组织管理</a></li>
</ul>
</li>
<!-- Menu for system with id=2 (CMS) -->
<li class="sub-menu system_menus system_2 12" style="display:none;">
<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-menu"></i> 标签类目管理</a>
<ul>
<li><a class="waves-effect" href="javascript:Tab.addTab('标签管理', '/manage/tag/index');">标签管理</a></li>
<li><a class="waves-effect" href="javascript:Tab.addTab('类目管理', '/manage/category/index');">类目管理</a></li>
</ul>
</li>
Sources: zheng-admin/src/index.html:185-231, zheng-admin/src/js/admin.js:31-45
Summary
zheng-admin is a powerful and reusable frontend shell for creating administrative interfaces. Its key strengths lie in its responsive, Material Design-based components, its flexible theming capability via system switching, and its tabbed, iframe-based content management. This architecture allows developers to quickly integrate different backend management modules into a unified and consistent user interface, as demonstrated by its use in zheng-cms-admin and other modules.
Sources: zheng-admin/README.md, zheng-cms/zheng-cms-admin/pom.xml:21-25