GP 网页设计器

网页节点设计器，用于限制节点的类型和用户的输入。

原则

为了保持统一的规则和规范，对 HTML 内容模板要求如下规则：

前台需要引用此 css/js/img 用于前台渲染，所有模板都是独立的，与任何框架都没有任何关系。

不得使用此模板外的 css 样式、脚本等任何文件，禁止使用通用命名，不得与其他 css 样式一致或冲突，因此每个模板编号都是唯一的，每个模板的样式/脚本仅适用于当前模板，例如：禁止使用 common, course 等通用样式命名，建议使用作用域 .guanyux2 .xxx{}, .guanyux3 .xxx {}。

模板中的静态文件引入，必须使用绝对路径（/spa/topic/xxx），因为此模板在不同的页面、不同的站点会引用。

• 模板目录 /public/topic/{模板}
• 禁止标签，静态模板不允许使用的标签：br，如果使用 br，则必须设置为允许多行，即标记为富文本。
• 所有页面布局使用 flex 布局，所有页面原则上没有固定宽高（特殊除外，例如：下标、边框等）
• 图片、文本、图标、按钮，每个节点必须用用独立的 div 或 span 等元素包装，即：子元素只能有1个，也表示这些节点是最终节点（例如：不能在 img 中添加子元素）。
• 在父级盒子上，尽量少用 relative 布局，因为可能会和设计器冲突。
• HTML 模板命名规则，可以使用拼音或英文，推荐命名：{业务编码}-{布局方式}-{版本/序号}.html，例如：关于我们-横排 2 列布局（guanyu-x2.html）
• 当模板较多时，推荐规则：每个模板都有自己独立的文件夹。
• 当模板较少时，可以使用统一的一个 css 即可。
• 关于字体问题，如果统一名称为 iconfont，则需要确保引入多套 iconfont 时，确保命名没有冲突，否则就需要重新命名 iconfont
• 块最外层 div 对象不能设置：margin、gap 等外边距，因为块对象会进行百分比排版，每个块占比 n%，设置 margin 会导致总百分比超出 100%。
• 移动端自动轮播，需要引入 /spa/topic/css/swiper-bundle.min.css、jquery-3.6.0.min.js、swiper-bundle.min.js
• 块配置规则时，只配置第一个块节点的规则即可。

主题色设计

• 使用自定义主题色，直接覆盖变量或样式。

/* 主题色 */
:root {
  --main-color: #3574e6;
  --gp-designer-theme-color: #3574e6;
}

/* 文本类型主题色 */
.gp-designer-theme-text {
  color: var(--gp-designer-theme-color);
}

/* 图标类型主题色 */
.gp-designer-theme-icon {
  color: var(--gp-designer-theme-color);
}

/* 按钮类型主题色 */
.gp-designer-theme-button {
  background-color: var(--gp-designer-theme-color);
  border-color: var(--gp-designer-theme-color);
}

美洽

设置打开美洽，自动添加 gp-designer-meiqia class

图片预览

设置图片预览时，自动添加 gp-designer-image-preview class，通过 data-preview 获取大图链接。 使用预览参数，必须返回 previewUrl 字段。

{
  success: data?.success || false,
  file: {
    url: data?.file?.url,
    previewUrl: '',
  }
}

使用

yarn add gp-designer
import { Designer } from "gp-designer";
import 'gp-designer/dist/style.css';

<!-- 网编模式 -->
<!-- <Designer mode="edit" :template="template" :css="css" :preview-width="400" /> -->

<!-- 预览模式 -->
<!-- <Designer mode="preview" :template="template" :css="css" :preview-width="400" /> -->

<!-- 设计模式 -->
<Designer mode="design" :template="template" :css="css" :preview-width="375" />

发布 npm 包

npm run push

项目说明

Vue 3 + TypeScript + Vite + tailwindcss

初始化项目

npm init vite@latest gp-city-selector --template vue-ts

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Vue 3 + TypeScript + Vite

npm init vite@latest gp-designer -- --template vue-ts cd my-vue3-lib npm install

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Learn more about the recommended Project Setup and IDE Support in the Vue Docs TypeScript Guide.

问题参考

• 打包 ts 类型问题：https://blog.csdn.net/Wrysmile0308/article/details/134318030