gp-designer
v1.0.127
Published
网页节点设计器,用于限制节点的类型和用户的输入。
Downloads
73
Readme
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