npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

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 布局,所有页面原则上没有固定宽高(特殊除外,例如:下标、边框等)
  • 图片、文本、图标、按钮,每个节点必须用用独立的 divspan 等元素包装,即:子元素只能有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