Configurable dynamic pop-up window content visual design system

Abstract

The invention relates to the technical field of software engineering and application development, in particular to a configurable dynamic pop-up window content visual design system which comprises a front-end module and a rear-end server so as to improve the efficiency of user interaction and data processing. The front-end module utilizes a Vue 3 framework and lt; the method comprises the following steps of: carrying out script setupgt; according to the method, efficient definition of components and smooth navigation of single-page applications are achieved through a view-ui-plus component library and a Less preprocessor, and the consistency and attractiveness of an interface are improved through the view-ui-plus component library and the Less preprocessor. The system integrates a Fabric.js-based visual editor, supports graph drawing and operation, and enhances the user experience. And the front end carries out HTTP request through Axios, communicates with the back-end server, and uses pinia to manage the state. The back-end server provides a RESTful API interface based on a Spring Boot framework and processes a user request, and the database adopts MongoDB to store user design historical records, component settings and preferences. The system provides an efficient and user-friendly design environment, supports timely interaction and storage of data, improves user experience, and lays a foundation for subsequent function extension.

Description

Technical Field

[0001] The present invention relates to the technical fields of software engineering and application development, and particularly to a configurable dynamic pop-up content visualization design system. Background Art

[0002] In current front-end development, pop-up windows (Popups) are a commonly used user interaction method. The existing technologies mainly include static pop-ups and template-based pop-ups. These technologies generally have the following problems and disadvantages:

[0003] 1. Static Pop-up

[0004] Structural composition: Composed of fixed HTML and CSS files, and the content is hard-coded during the development stage. Disadvantages: Fixed pop-up content, lack of flexibility, increasing the complexity of development and maintenance. Every time a new pop-up requirement comes, the code needs to be modified and redeployed;

[0005] 2. Template-based Pop-up

[0006] Structural composition: Generates pop-ups using predefined templates, and the templates contain placeholders that need to be manually replaced with content.

[0007] Disadvantages: Require manual intervention, cannot achieve true automation, and are difficult to adapt to changing business requirements.

[0008] Technical Problems to be Solved by this Patent

[0009] In view of the above deficiencies of the prior art, this patent proposes an optimized pop-up design and dynamic parameter configuration system, aiming to solve the following technical problems:

[0010] Flexible configuration: Visualize the pop-up content and style configuration, allowing users to customize pop-ups through a friendly interface, thereby reducing the workload of developers and improving the business response speed.

[0011] Content dynamicization: Provide a mechanism that can obtain data from the backend in real time and automatically update the pop-up content, avoiding manual intervention and enhancing the user experience.

[0012] Usability: Create an intuitive and easy-to-use management platform, enabling non-technical personnel to easily configure and manage pop-up content, further improving the usability of the product.

[0013] Through the above improvements, this patent can effectively solve the problems in the prior art, making the use of pop-ups more flexible, efficient, and user-friendly. Summary of the Invention

[0014] The present invention relates to a front-end and back-end separated pop-up window visualization design system based on Vue 3 and Spring Boot, aiming to provide an efficient, smooth and user-friendly visualization editing solution. The system includes a front-end module and a back-end server to ensure seamless interaction between user operations and data management.

[0015] In the front-end part, the system is built using the Vue 3 framework. By <script setup>语法简化组件的定义，并利用Vue Router实现单页应用的流畅导航。UI组件库选择了view-ui-plus，以提供一致且美观的用户界面，同时使用Less作为CSS预处理器，增强样式的可维护性和可复用性。可视化编辑器基于fabric.js，支持各种基本图形的绘制和操作，提升用户的交互体验。前端通过配置Axios进行HTTP请求，与后端服务器进行数据交互，并使用pinia管理应用状态，确保数据的一致性和同步。

[0016] 后端服务器采用Spring Boot框架，提供RESTful API接口，处理各种用户请求。数据库使用MongoDB存储用户设计的历史记录、组件设置和用户偏好，确保数据的持久化和检索效率。

[0017] 本发明的有益效果：

[0018] 1.实时更新与信息准确性

[0019] 效果：通过动态内容更新机制，用户能够获得实时、准确的信息，避免了静态弹窗因内容过时而导致的用户困惑或不满。

[0020] 对比：与传统静态弹窗相比，后者往往需要手动更新，导致信息滞后，影响用户体验。

[0021] 2.灵活性与可配置性

[0022] 效果：弹窗可视化配置系统允许用户根据需求自由定制弹窗内容和样式，极大地提升了系统的灵活性和适应性。

[0023] 对比：相较于基于模板的弹窗，传统方法往往限制了用户的创意和调整空间，而本专利提供了一个更友好的自定义界面，使得非技术用户也能轻松参与。

[0024] 3.数据驱动的决策支持

[0025] 效果：通过动态参数数据驱动的方式优化弹窗展示策略，实时显示最新的用户数据，提高转化率。

[0026] 对比：与现有技术缺乏深入分析支持不同，本专利不仅关注弹窗的展示，更注重如何通过数据反馈提升业务效果。

[0027] 4.简化管理流程

[0028] 效果：直观的管理平台使得弹窗的创建和部署变得简单高效，降低了对技术人员的依赖，提升了团队的工作效率。

[0029] 对比：传统系统通常需要开发人员进行复杂的编码和配置，而本专利的设计让任何人都能轻松上手，缩短了项目周期附图说明

[0030] 为了更清楚地说明本发明或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

[0031] 图1为本发明实施例的页面结构实例示意图；

[0032] 图2为本发明实施例的页面结构实例示意图；

[0033] 图3为本发明实施例的页面结构组织框架示意图

[0034] 图4为本发明实施例的交互图示意图

[0035] 图5为本发明实施例的页面结构实例示意图。具体实施方式

[0036] 下面结合附图和具体实施例对本发明进行详细描述。同时在这里做以说明的是，为了使实施例更加详尽，下面的实施例为最佳、优选实施例，对于一些公知技术本领域技术人员也可采用其他替代方式而进行实施；而且附图部分仅是为了更具体的描述实施例，而并不旨在对本发明进行具体的限定。

[0037] 需要指出的是，在说明书中提到"一个实施例”、"实施例”、"示例性实施例”、"一些实施例”等指示所述的实施例可以包括特定特征、结构或特性，但未必每个实施例都包括该特定特征、结构或特性。另外，在结合实施例描述特定特征、结构或特性时，结合其它实施例(无论是否明确描述)实现这种特征、结构或特性应在相关领域技术人员的知识范围内。

[0038] 通常，可以至少部分从上下文中的使用来理解术语。例如，至少部分取决于上下文，本文中使用的术语"一个或多个”可以用于描述单数意义的任何特征、结构或特性，或者可以用于描述复数意义的特征、结构或特性的组合。另外，术语"基于”可以被理解为不一定旨在传达一组排他性的因素，而是可以替代地，至少部分地取决于上下文，允许存在不一定明确描述的其他因素。

[0039] 实施例1

[0040] 如图1至图5所示

[0041] 页面结构

[0042] 2.1头部区域：

[0043] 头部左侧区域：

[0044] logo：显示系统logo

[0045] 开关：控制编辑区域的底部背景色，提升用户操作体验

[0046] 撤销按钮：回退，前进用户的操作

[0047] 头部右侧区域：

[0048] 预览：以图片的形式查看配置的弹窗内容

[0049] 清空：清空操作区域画布内容

[0050] 创建：请求服务端创建接口，提交画布创建数据，以json的格式保存到服务器。

[0051] 2.2左侧区域

[0052] 模板：请求服务端接口，显示已创建的模板数据；

[0053] 元素：元素包含文字，热区，倒计时，用于给画布添加相应的元素。

[0054] 素材：素材分背景跟元素，背景用于给画布添加背景图，元素用于给画布添加元素图。

[0055] 图层：显示画布中存在的图层，用户可以调整图层的层级关系。

[0056] 2.3右侧区域

[0057] 未选择操作对象时，

[0058] 显示模板配置

[0059] 包含：模板名称，模板类型，动态参数(用于弹窗操作)，权益执行(弹窗内权益配置)，权益类型(弹窗内权益配置)

[0060] 尺寸：用于调整画布的大小

[0061] 颜色：用于设置画布背景色

[0062] 选择操作对象后：

[0063] 显示对象的对齐方式，颜色，字体属性，自号，行高，背景色，文本内容，位置信息，阴影设置，点击事件配置。

[0064] 其中，文本内容可以添加配置动参，动参参数数据通过接口获取，配置完动参后，该动参会自动根据用户获取到对应的值用于替换弹窗的动态参数数据。

[0065] 点击事件配置：用于配置该对象的点击事件，可以是跳转链接，也可以是其他定制化类型，以支持业务需求

[0066] 用户交互流程描述

[0067] 用户进入设计器系统

[0068] 用户打开应用程序，首页展示设计器的欢迎界面，包含系统简介和使用说明，用户可直接设计界面。

[0069] 加载模板选择界面

[0070] 进入设计界面后，屏幕左侧显示可用模板列表，并提供一个搜索框以便用户快速查找。

[0071] 用户可以浏览模板，点击任一模板后，将弹出一个确认对话框，询问用户是否要加载该模板。

[0072] 确认加载模板

[0073] 弹窗内容显示所选模板的预览图和简要描述。

[0074] 包含两个按钮："确定”和"取消”。

[0075] 用户点击"确定”，系统将加载模板并显示在画布中央。

[0076] 调整模板内容

[0077] 模板加载后，用户可以看到多个可编辑的元素(如文本框、形状、图片等)。

[0078] 用户选择一个元素，右侧面板会更新为该元素的属性设置，包括颜色、字体、大小、位置等选项。

[0079] 用户根据需求逐一调整每个元素的属性：

[0080] 文本元素：用户可以双击文本框，输入新的文本内容，并通过面板调整字体样式和大小，也可以通过点击添加动态，动态添加动态参数。

[0081] 热区元素：用户可以配置点击事件。

[0082] 图片元素：用户可以替换图片或调整透明度。

[0083] 添加新元素

[0084] 用户可以在左侧工具栏中选择更多元素(如图形、文本、图像)，并将其拖放到画布上。

[0085] 新增元素后，右侧面板同样更新，以供用户进行属性调整。

[0086] 保存和预览

[0087] 用户完成调整后，可以点击"保存”按钮，系统保存为弹窗模板。

[0088] 用户选择后，系统将保存当前设计，且提供一个预览窗口，用户可以查看最终效果。

[0089] 结束设计会话

[0090] 用户在完成设计后，可以选择退出设计器，系统会询问是否保存未保存的更改。

[0091] 用户选择"是”或"否”，然后返回到首页或关闭应用。

[0092] 通过以上流程，用户能够顺利地进入设计器，加载和调整模板，添加新元素，并最终导出设计作品。整个过程通过友好的界面和清晰的操作引导，提高了用户体验和设计效率。

[0093] 本发明涵盖任何在本发明的精髓和范围上做的替代、修改、等效方法以及方案。为了使公众对本发明有彻底的了解，在以下本发明优选实施例中详细说明了具体的细节，而对本领域技术人员来说没有这些细节的描述也可以完全理解本发明。另外，为了避免对本发明的实质造成不必要的混淆，并没有详细说明众所周知的方法、过程、流程、元件和电路等。

[0094] 以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以作出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。< / script>

Claims

1. A configurable dynamic pop-up content visualization design system, characterized by: It includes a front-end module and a back-end server, wherein: The front-end module is based on the Vue 3 framework and uses <script setup>语法进行组件定义，使用Vue Router实现页面导航，利用view-ui-plus作为UI组件库，并使用Less作为CSS预处理器；可视化编辑器基于fabric.js，支持基本图形绘制、对象操作、图像处理以及分层管理；前端模块通过Axios进行HTTP请求，与后端服务器进行数据交互，并使用pinia管理应用状态；后端服务器基于Spring Boot框架，提供RESTful API接口，处理用户请求，数据库采用MongoDB存储用户设计历史记录、组件设置和用户偏好。2.根据权利要求1所述的可配置的动态弹窗内容可视化设计系统，其特征在于，所述前端模块利用Axios配置基础URL和请求拦截器，统一处理请求和响应。3.根据权利要求2所述的可配置的动态弹窗内容可视化设计系统，其特征在于，所述前端模块中的Less提供变量、嵌套和混入功能，以增强样式的可维护性。4.根据权利要求3所述的可配置的动态弹窗内容可视化设计系统，其特征在于，所述fabric.js可视化编辑器支持对象缩放、旋转、拖动和删除操作，并允许为对象添加事件监听器，响应用户交互。5.根据权利要求4所述的可配置的动态弹窗内容可视化设计系统，其特征在于，所述后端服务器的数据库MongoDB用于存储用户设计历史记录、组件设置和用户偏好。< / script>

Images