[update] 优化菜单显示
This commit is contained in:
maxf
parent
a509f47477
commit
c15a8af10e
@ -1,35 +1,26 @@
|
|||||||
Java 14 新特性示例
|
# Java 13 新特性示例
|
||||||
---
|
|
||||||
|
|
||||||
本项目展示了Java 14的核心新特性及代码示例。
|
本项目展示了Java 13的核心新特性及代码示例。
|
||||||
|
|
||||||
## 特性列表
|
## 特性列表
|
||||||
|
|
||||||
### 1. Record（记录类）- 预览功能
|
### 1. 文本块（Text Blocks）- 预览功能
|
||||||
- **说明**：提供一种紧凑的语法来声明只读数据载体，减少样板代码
|
- **说明**：使用`"""`定义多行字符串，避免转义字符，提高可读性
|
||||||
- **示例位置**：`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（文本块）- 第二次预览
|
|
||||||
- **说明**：多行字符串文字，增强可读性和可维护性
|
|
||||||
- **示例位置**：`src/main/java/features/TextBlocksExample.java`
|
- **示例位置**：`src/main/java/features/TextBlocksExample.java`
|
||||||
|
|
||||||
|
### 2. Switch表达式增强 - 预览功能
|
||||||
|
- **说明**：JDK 12预览功能的改进版本，支持yield返回值
|
||||||
|
- **示例位置**：`src/main/java/features/SwitchExpressionsExample.java`
|
||||||
- **启用方式**：编译/运行时需添加`--enable-preview`
|
- **启用方式**：编译/运行时需添加`--enable-preview`
|
||||||
|
|
||||||
### 5. Helpful NullPointerExceptions（更有帮助的空指针异常）
|
### 3. Socket API 重新实现
|
||||||
- **说明**：改进 NullPointerException 的错误信息，更准确地指出哪个变量为 null
|
- **说明**：使用NIO实现更简单、更维护的Socket API
|
||||||
- **示例位置**：`src/main/java/features/NullPointerExceptionExample.java`
|
- **示例位置**：`src/main/java/features/SocketAPIExample.java`
|
||||||
|
|
||||||
### 6. Packaging Tool（打包工具）- 实验性功能
|
### 4. ZGC（Z Garbage Collector）增强
|
||||||
- **说明**：提供 jpackage 工具，用于创建独立的 Java 应用程序包
|
- **说明**：将ZGC的使用范围从Linux扩展到macOS和Windows（实验性）
|
||||||
- **使用方式**：命令行工具 `jpackage`，需要单独下载
|
- **启用方式**：JVM参数`-XX:+UseZGC`
|
||||||
|
|
||||||
</markdown>
|
### 5. 动态CDS Archives
|
||||||
|
- **说明**：简化了类数据共享的使用，提高启动性能
|
||||||
|
- **使用方式**：通过`-XX:ArchiveClassesAtExit`和`-XX:SharedArchiveFile`参数使用
|
||||||
|
|||||||
@ -40,12 +40,30 @@
|
|||||||
overflow: hidden;
|
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 {
|
.ui-main-container {
|
||||||
margin-left: 200px; /* 给侧边栏留出空间 */
|
margin-left: 200px; /* 给侧边栏留出空间 */
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100vh; /* 占满整个视口高度 */
|
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 {
|
.ui-content {
|
||||||
|
|||||||
@ -3,8 +3,150 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Title</title>
|
<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>
|
</head>
|
||||||
<body>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -8,7 +8,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="ui-menu" layout:insert="~{common/menu}">
|
<div class="ui-menu" layout:insert="~{common/menu}">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="ui-main-container">
|
<div class="ui-main-container">
|
||||||
<header class="ui-header">
|
<header class="ui-header">
|
||||||
@ -37,17 +36,15 @@
|
|||||||
|
|
||||||
function updateLayout() {
|
function updateLayout() {
|
||||||
if (isMenuVisible) {
|
if (isMenuVisible) {
|
||||||
$menu.css('width', '200px');
|
$menu.removeClass('collapsed');
|
||||||
$mainContainer.css({
|
$mainContainer.removeClass('menu-collapsed');
|
||||||
'margin-left': '200px',
|
$iconShow.hide();
|
||||||
'width': 'calc(100% - 200px)'
|
$iconHide.show();
|
||||||
});
|
|
||||||
} else {
|
} else {
|
||||||
$menu.css('width', '0');
|
$menu.addClass('collapsed');
|
||||||
$mainContainer.css({
|
$mainContainer.addClass('menu-collapsed');
|
||||||
'margin-left': '0',
|
$iconShow.show();
|
||||||
'width': '100%'
|
$iconHide.hide();
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -55,16 +52,12 @@
|
|||||||
$iconHide.on('click', function () {
|
$iconHide.on('click', function () {
|
||||||
isMenuVisible = false;
|
isMenuVisible = false;
|
||||||
updateLayout();
|
updateLayout();
|
||||||
$iconHide.hide();
|
|
||||||
$iconShow.show();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// 点击 show 图标：显示菜单
|
// 点击 show 图标：显示菜单
|
||||||
$iconShow.on('click', function () {
|
$iconShow.on('click', function () {
|
||||||
isMenuVisible = true;
|
isMenuVisible = true;
|
||||||
updateLayout();
|
updateLayout();
|
||||||
$iconShow.hide();
|
|
||||||
$iconHide.show();
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user