yexuejc/java-learning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[update] 优化菜单显示

Browse Source
This commit is contained in:
maxf 2025-08-15 18:01:51 +08:00
parent a509f47477
commit c15a8af10e
4 changed files with 187 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
demo2/java14-example/README.md
View File

@ -1,35 +1,26 @@
Java 14 新特性示例
---
# Java 13 新特性示例
本项目展示了Java 14的核心新特性及代码示例。
本项目展示了Java 13的核心新特性及代码示例。
## 特性列表
### 1. Record（记录类）- 预览功能
- **说明**：提供一种紧凑的语法来声明只读数据载体，减少样板代码
- **示例位置**：`src/main/java/features/RecordExample.java`
- **启用方式**：编译/运行时需添加`--enable-preview`
### 2. Pattern Matching for instanceof（instanceof模式匹配）- 预览功能
- **说明**：简化 instanceof 操作，自动进行类型转换
- **示例位置**：`src/main/java/features/PatternMatchingInstanceofExample.java`
- **启用方式**：编译/运行时需添加`--enable-preview`
### 3. Switch Expressions（Switch表达式）
- **说明**：从预览功能转为正式功能，支持箭头语法和返回值
- **示例位置**：`src/main/java/features/SwitchExpressionsExample.java`
### 4. Text Blocks（文本块）- 第二次预览
- **说明**：多行字符串文字，增强可读性和可维护性
### 1. 文本块（Text Blocks）- 预览功能
- **说明**：使用`"""`定义多行字符串，避免转义字符，提高可读性
- **示例位置**：`src/main/java/features/TextBlocksExample.java`
### 2. Switch表达式增强 - 预览功能
- **说明**：JDK 12预览功能的改进版本，支持yield返回值
- **示例位置**：`src/main/java/features/SwitchExpressionsExample.java`
- **启用方式**：编译/运行时需添加`--enable-preview`
### 5. Helpful NullPointerExceptions（更有帮助的空指针异常）
- **说明**：改进 NullPointerException 的错误信息，更准确地指出哪个变量为 null
- **示例位置**：`src/main/java/features/NullPointerExceptionExample.java`
### 3. Socket API 重新实现
- **说明**：使用NIO实现更简单、更维护的Socket API
- **示例位置**：`src/main/java/features/SocketAPIExample.java`
### 6. Packaging Tool（打包工具）- 实验性功能
- **说明**：提供 jpackage 工具，用于创建独立的 Java 应用程序包
- **使用方式**：命令行工具 `jpackage`，需要单独下载
### 4. ZGC（Z Garbage Collector）增强
- **说明**：将ZGC的使用范围从Linux扩展到macOS和Windows（实验性）
- **启用方式**：JVM参数`-XX:+UseZGC`
</markdown>
### 5. 动态CDS Archives
- **说明**：简化了类数据共享的使用，提高启动性能
- **使用方式**：通过`-XX:ArchiveClassesAtExit`和`-XX:SharedArchiveFile`参数使用

20
demo3/src/main/resources/static/css/common/main.css
View File

@ -40,12 +40,30 @@
overflow: hidden;
}
/* 新增：菜单收起状态样式 */
.ui-menu.collapsed {
width: 60px;
}
.ui-menu.collapsed .menu-text {
display: none;
}
.ui-menu.collapsed .has-submenu > .menu-link::after {
display: none;
}
.ui-main-container {
margin-left: 200px; /* 给侧边栏留出空间 */
display: flex;
flex-direction: column;
height: 100vh; /* 占满整个视口高度 */
transition: width 0.3s ease-in-out;
transition: margin-left 0.3s ease-in-out;
}
/* 新增：主容器在菜单收起时的样式 */
.ui-main-container.menu-collapsed {
margin-left: 60px;
}
.ui-content {

142
demo3/src/main/resources/templates/common/menu.html
View File

@ -3,8 +3,150 @@
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
<style>
.menu {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
.menu-item {
position: relative;
border-bottom: 1px solid #e0e0e0;
}
.menu-link {
display: flex;
align-items: center;
padding: 15px 20px;
text-decoration: none;
color: #333;
transition: all 0.3s ease;
}
.menu-link:hover {
background-color: #f5f5f5;
}
.has-submenu > .menu-link::after {
content: "▶";
margin-left: auto;
transition: transform 0.3s ease;
}
.has-submenu.active > .menu-link::after {
transform: rotate(90deg);
}
.submenu {
list-style: none;
padding: 0;
margin: 0;
background-color: #f9f9f9;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.submenu.active {
max-height: 500px;
}
.submenu .menu-link {
padding-left: 40px;
}
.submenu .submenu .menu-link {
padding-left: 60px;
}
/* 菜单图标样式 */
.menu-icon {
min-width: 20px;
text-align: center;
}
/* 菜单文字样式 */
.menu-text {
margin-left: 10px;
white-space: nowrap;
}
</style>
</head>
<body>
<ul class="menu">
<li class="menu-item">
<a href="#" class="menu-link"><i class="menu-icon bi bi-house-door"></i><span class="menu-text">首页</span></a>
</li>
<li class="menu-item has-submenu">
<a href="#" class="menu-link"><i class="menu-icon bi bi-gear"></i><span class="menu-text">系统管理</span></a>
<ul class="submenu">
<li class="menu-item">
<a href="#" class="menu-link"><i class="menu-icon bi bi-people"></i><span class="menu-text">用户管理</span></a>
</li>
<li class="menu-item">
<a href="#" class="menu-link"><i class="menu-icon bi bi-person-badge"></i><span class="menu-text">角色管理</span></a>
</li>
<li class="menu-item has-submenu">
<a href="#" class="menu-link"><i class="menu-icon bi bi-shield-lock"></i><span class="menu-text">权限管理</span></a>
<ul class="submenu">
<li class="menu-item">
<a href="#" class="menu-link"><i class="menu-icon bi bi-list"></i><span class="menu-text">菜单权限</span></a>
</li>
<li class="menu-item">
<a href="#" class="menu-link"><i class="menu-icon bi bi-tools"></i><span class="menu-text">操作权限</span></a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item has-submenu">
<a href="#" class="menu-link"><i class="menu-icon bi bi-briefcase"></i><span class="menu-text">业务管理</span></a>
<ul class="submenu">
<li class="menu-item">
<a href="#" class="menu-link"><i class="menu-icon bi bi-cart"></i><span class="menu-text">订单管理</span></a>
</li>
<li class="menu-item">
<a href="#" class="menu-link"><i class="menu-icon bi bi-box"></i><span class="menu-text">产品管理</span></a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="#" class="menu-link"><i class="menu-icon bi bi-bar-chart"></i><span class="menu-text">数据统计</span></a>
</li>
<li class="menu-item has-submenu">
<a href="#" class="menu-link"><i class="menu-icon bi bi-sliders"></i><span class="menu-text">设置</span></a>
<ul class="submenu">
<li class="menu-item">
<a href="#" class="menu-link"><i class="menu-icon bi bi-person-circle"></i><span class="menu-text">个人设置</span></a>
</li>
<li class="menu-item">
<a href="#" class="menu-link"><i class="menu-icon bi bi-gear-wide-connected"></i><span class="menu-text">系统设置</span></a>
</li>
</ul>
</li>
</ul>
<script>
document.addEventListener('DOMContentLoaded', function () {
const menuItems = document.querySelectorAll('.has-submenu');
menuItems.forEach(item => {
const link = item.querySelector('.menu-link');
const submenu = item.querySelector('.submenu');
link.addEventListener('click', function (e) {
e.preventDefault();
// 切换当前菜单项的活动状态
item.classList.toggle('active');
submenu.classList.toggle('active');
});
});
});
</script>
</body>
</html>

25
demo3/src/main/resources/templates/index.html
View File

@ -8,7 +8,6 @@
</head>
<body>
<div class="ui-menu" layout:insert="~{common/menu}">
</div>
<div class="ui-main-container">
<header class="ui-header">
@ -37,17 +36,15 @@
function updateLayout() {
if (isMenuVisible) {
$menu.css('width', '200px');
$mainContainer.css({
'margin-left': '200px',
'width': 'calc(100% - 200px)'
});
$menu.removeClass('collapsed');
$mainContainer.removeClass('menu-collapsed');
$iconShow.hide();
$iconHide.show();
} else {
$menu.css('width', '0');
$mainContainer.css({
'margin-left': '0',
'width': '100%'
});
$menu.addClass('collapsed');
$mainContainer.addClass('menu-collapsed');
$iconShow.show();
$iconHide.hide();
}
}
@ -55,17 +52,13 @@
$iconHide.on('click', function () {
isMenuVisible = false;
updateLayout();
$iconHide.hide();
$iconShow.show();
});
// 点击 show 图标：显示菜单
$iconShow.on('click', function () {
isMenuVisible = true;
updateLayout();
$iconShow.hide();
$iconHide.show();
});
});
</script>
</html>
</html>