EXT.NET复杂布局(四)——系统首页设计(上)

简介: 很久没有发帖了,很是惭愧,因此给各位使用EXT.NET的朋友献上一份礼物。 本篇主要讲述页面设计与效果,下篇将讲述编码并提供源码下载。 系统首页设计往往是个难点,因为往往要考虑以下因素: 重要通知 系统功能菜单 快捷操作 日常维护工作(比如待办事项、已办事项等等) 用户信息(比如公司、部门、组织机构) 系统信息(意见反馈、帮助等) 联系沟通 等等 又要兼顾美观得体(丑了客户不愿意用,更别说钱了),方便实用,怎么从有限的空间里显示更多的功能(阵地战),往往弄得抓耳搔头,大费脑细胞。

很久没有发帖了,很是惭愧,因此给各位使用EXT.NET的朋友献上一份礼物。

本篇主要讲述页面设计与效果,下篇将讲述编码并提供源码下载。

系统首页设计往往是个难点,因为往往要考虑以下因素:

  • 重要通知
  • 系统功能菜单
  • 快捷操作
  • 日常维护工作(比如待办事项、已办事项等等)
  • 用户信息(比如公司、部门、组织机构)
  • 系统信息(意见反馈、帮助等)
  • 联系沟通
  • 等等

又要兼顾美观得体(丑了客户不愿意用,更别说钱了),方便实用,怎么从有限的空间里显示更多的功能(阵地战),往往弄得抓耳搔头,大费脑细胞。下面就给出我的方案。

页面效果

我申明下,我不是专业的前端工程师,我就是一打杂的(啥都搞下),所以不要期望过高,如果还过得去,请点推荐。不多说了,上图:

image

111

从图中可以看出,首页分4块区域(四大板块):

  1. 顶部面板——LOGO、用户信息、帮助、反馈、通知等。
  2. 左侧面板——组织机构(通常放功能菜单)。
  3. 右侧面板——联系人或其他信息。
  4. 中央区域——工作台。主要用于日常工作维护以及快捷操作。

顶部面包和右侧面板没啥好说的。接下来就说说功能吧。

左侧面板

左侧面板其实是相当重要的一块,在平常系统设计中,往往把功能菜单放在左侧。这里类似。不仅支持分组折叠,还支持无限极子菜单,美观而灵活。

image

当点击子节点,会显示在Tab页中。

image

这样,用户可以方便的实现操作。

中央区域

中央区域主要用于日常工作维护以及快捷操作。当然快捷操作你也可以放在顶部面板。

image

这个面板主要包括待处理事务、一般事务、通知、部门讨论区、部门文档等内容,当然我这是举例。

整个工作台布局也是采用折叠面板,不过当展开某个面板时,会刷新数据。默认加载,并不需要加载所有数据。

就拿待处理事务来说:

image

通过工具栏按钮,可以方便对事务进行操作(别忘了判断权限)。如点击退回操作:

image 

通过数据行中的操作列按钮,可以方便查看表单内容,当表单关闭时,刷新工作台。

总之,只会显示一个操作面板。

image

最后

 

 

 

 

 

 

 

 

整个页面是自适应的,会随着浏览窗口大小自适应,如:

image

点子页面弹出表单可以最大化,如:

image

当你点击表单里面的提交按钮(假设存在),提交完后,可以关闭表单,父页面也可以触发操作,如关闭弹出的表单时:

image

先写到这里吧,下篇再细谈。到时奉上DEMO。

由于加群的人太多,EXT.NET群已满。由于现在是业余弄弄EXT.NET,所以本人也不会过多与大家交流EXT.NET,还写一篇,作为结尾好了。

这几天有空的话,尽量完善这个DEMO吧。

目录
相关文章
|
5月前
|
前端开发 JavaScript 关系型数据库
使用 OpenAuth.Net 快速搭建 .NET 企业级权限工作流系统
使用 OpenAuth.Net 快速搭建 .NET 企业级权限工作流系统
175 0
|
8月前
|
SQL 小程序 API
如何运用C#.NET技术快速开发一套掌上医院系统?
本方案基于C#.NET技术快速构建掌上医院系统,结合模块化开发理念与医院信息化需求。核心功能涵盖用户端的预约挂号、在线问诊、报告查询等,以及管理端的排班管理和数据统计。采用.NET Core Web API与uni-app实现前后端分离,支持跨平台小程序开发。数据库选用SQL Server 2012,并通过读写分离与索引优化提升性能。部署方案包括Windows Server与负载均衡设计,确保高可用性。同时针对API差异、数据库老化及高并发等问题制定应对措施,保障系统稳定运行。推荐使用Postman、Redgate等工具辅助开发,提升效率与质量。
300 0
|
12月前
|
前端开发 C# 开发者
.NET使用Umbraco CMS快速构建一个属于自己的内容管理系统
.NET使用Umbraco CMS快速构建一个属于自己的内容管理系统
188 12
|
12月前
|
Web App开发 前端开发 调度
一款基于 .NET + Blazor 开发的智能访客管理系统
一款基于 .NET + Blazor 开发的智能访客管理系统
172 8
|
12月前
|
开发框架 JavaScript 前端开发
精选2款.NET开源的博客系统
精选2款.NET开源的博客系统
161 8
|
12月前
|
前端开发 JavaScript C#
基于.NET8+Vue3开发的权限管理&个人博客系统
基于.NET8+Vue3开发的权限管理&个人博客系统
180 7
|
开发框架 安全 Java
.NET技术的独特魅力与优势,涵盖高效的开发体验、强大的性能表现、高度的可扩展性及丰富的生态系统等方面,展示了其在软件开发领域的核心竞争力
本文深入探讨了.NET技术的独特魅力与优势,涵盖高效的开发体验、强大的性能表现、高度的可扩展性及丰富的生态系统等方面,展示了其在软件开发领域的核心竞争力。.NET不仅支持跨平台开发,具备出色的安全性和稳定性,还能与多种技术无缝集成,为企业级应用提供全面支持。
379 3
|
关系型数据库 C# 数据库
.NET 8.0 开源在线考试系统(支持移动端)
【10月更文挑战第27天】以下是适用于 .NET 8.0 的开源在线考试系统(支持移动端)的简介: 1. **基于 .NET Core**:跨平台,支持多种数据库,前后端分离,适用于多操作系统。 2. **结合 Blazor**:使用 C# 开发 Web 应用,支持响应式设计,优化移动端体验。 3. **基于 .NET MAUI**:跨平台移动应用开发,一套代码多平台运行,提高开发效率。 开发时需关注界面设计、安全性与稳定性。
350 4
|
JSON 安全 数据安全/隐私保护
从0到1搭建权限管理系统系列三 .net8 JWT创建Token并使用
【9月更文挑战第22天】在.NET 8中,从零开始搭建权限管理系统并使用JWT(JSON Web Tokens)创建Token是关键步骤。JWT是一种开放标准(RFC 7519),用于安全传输信息,由头部、载荷和签名三部分组成。首先需安装`Microsoft.AspNetCore.Authentication.JwtBearer`包,并在`Program.cs`中配置JWT服务。接着,创建一个静态方法`GenerateToken`生成包含用户名和角色的Token。最后,在控制器中使用`[Authorize]`属性验证和解析Token,从而实现身份验证和授权功能。
1117 4
|
设计模式 存储 前端开发
揭秘.NET架构设计模式:如何构建坚不可摧的系统?掌握这些,让你的项目无懈可击!
【8月更文挑战第28天】在软件开发中,设计模式是解决常见问题的经典方案,助力构建可维护、可扩展的系统。本文探讨了.NET中三种关键架构设计模式:MVC、依赖注入与仓储模式,并提供了示例代码。MVC通过模型、视图和控制器分离关注点;依赖注入则通过外部管理组件依赖提升复用性和可测性;仓储模式则统一数据访问接口,分离数据逻辑与业务逻辑。掌握这些模式有助于开发者优化系统架构,提升软件质量。
195 5