Skip to content

Commit

Permalink
chore: 清除git缓存
Browse files Browse the repository at this point in the history
  • Loading branch information
Kchengz committed May 9, 2023
1 parent 229b0d1 commit 250bb12
Show file tree
Hide file tree
Showing 110 changed files with 15,702 additions and 0 deletions.
23 changes: 23 additions & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'plugin:vue/vue3-essential',
'standard-with-typescript'
],
overrides: [
],
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 'latest',
sourceType: 'module'
},
plugins: [
'vue'
],
rules: {
}
}
26 changes: 26 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
lib
dist
es
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
29 changes: 29 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
.DS_Store
node_modules/
examples/
public/
dist/
static/
docs/
vite.config.ts
pnpm-lock.yaml
*.map
*.html

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
3 changes: 3 additions & 0 deletions .vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar"]
}
21 changes: 21 additions & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2022 kchengz

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
121 changes: 121 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
![](.\docs\public\logo.png)
<h3 align="center" style="background-image:-webkit-linear-gradient(left,#44c0fa,#c26cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">KDesigner</h3>


<h4 align="center">一个开箱即用的拖拽式的可视化低代码设计器</h4>



📦github仓库:[https://github.com/Kchengz/k-designer](https://github.com/Kchengz/k-designer)

📦gitee仓库:[https://gitee.com/kcz66/k-designer](https://gitee.com/kcz66/k-designer)

💎文档地址:[https://kcz66.gitee.io/k-designer/](https://kcz66.gitee.io/k-designer/)

## 简介

可以简称`K设计器`,是一个功能强大、开箱即用的拖拽式低代码设计器。它基于 Vue3 开发,兼容多套 UI 组件库,除了基础的页面设计功能,KDesigner 还提供了强大的扩展功能,可以让开发者根据自己的需求自由扩展和定制组件。此外,KDesigner 使用 JSON 配置来生成页面,可帮助开发者快速生成页面,提高开发效率。它提供了两个重要组件:`k-designer` 设计器和 `k-builder` 生成器。

## 最新版本

[![](https://img.shields.io/npm/v/k-designer.svg?style=flat-square)](https://www.npmjs.com/package/k-designer)

#### 功能

- [x] 拖拽设计
- [x] 自定义 actionBar
- [x] 布局组件扩展
- [x] 自定义组件扩展
- [x] 事件扩展
- [x] 组件懒加载
- [ ] 完善布局
- [x] 组件属性自定义
- [ ] 支持不同 UI
- [ ] 插件扩展



## 组件介绍

#### k-designer 设计器

`k-designer` 是一个可视化设计器组件,用户可以通过拖拽组件的方式快速生成 JSON 配置。它提供了丰富的组件库和配置项,用户可以根据需要选择合适的组件并配置相应的属性、事件和动作。设计器还提供了实时预览功能,用户可以随时查看所设计页面的效果。最终,用户可以将 JSON 配置导出,用于页面的生成和修改。

#### k-builder 生成器

`k-builder` 是一个页面构建组件,它可以将设计器生成的 JSON 配置构建成页面,完成组件的渲染、事件绑定和数据回显等操作。

## 安装 k-designer

```bash
npm i k-designer
```

k-designer 目标是支持多 UI 兼容,目前支持以下 UI

- element-plus
- ant-design-vue

## 选择 UI 组件库

- ### 选择 element-plus

```bash
npm i element-plus
```

main.ts 或者 main.js 引入注册组件

```javascript
// 引入Element plus样式
import "element-plus/dist/index.css";
// 引入k-designer样式
import "k-designer/dist/style.css";
import { pluginManager } from "k-designer";
import { useElementPlus } from "k-designer/dist/ui/useElementPlus";
// 使用Elemnt UI
useElementPlus(pluginManager);
```

- ### 选择 ant-design-vue

```bash
npm i ant-design-vue
```

main.ts 或者 main.js 引入注册组件

```javascript
// 引入antd UI样式
import "ant-design-vue/dist/antd.css";
// 引入k-designer样式
import "k-designer/dist/style.css";
import { pluginManager } from "k-designer";
import { useAntd } from "k-designer/dist/ui/useAntd";
// 使用Antd UI
useAntd(pluginManager);
```

## 在页面使用 k-designer

```vue
<template>
<div class="h-full">
<KDesigner />
</div>
</template>
<script setup lang="ts">
import { KDesigner } from "k-designer";
</script>
<style>
.h-full {
height: 100vh;
}
</style>
```

## 交流

点击链接加入 qq 群聊

- [【k-designer 交流群:747609683】](https://jq.qq.com/?_wv=1027&k=CtrM9ce2)
86 changes: 86 additions & 0 deletions docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import { defineConfig } from "vitepress";
export default defineConfig({
// 网站标题
title: "KDesigner设计器",
// 网站描述
description: "低代码可视化设计器及生成器",
lang: "zh-CN",
base: "/k-designer",
// 打包目录
head: [
// 添加图标
[
"link",
{ rel: "icon", type: "image/x-icon", href: "/k-designer/favicon.ico" },
],
],
// 主题配置
themeConfig: {
editLink: {
text: "为此页提供修改建议",
pattern: "https://github.com/Kchengz/k-designer/issues",
},
socialLinks: [
{ icon: "github", link: "https://github.com/Kchengz/k-designer" },
],
footer: {
copyright: "本文档内容版权为 KDesigner 作者kchengz所有,保留所有权利。",
},
nav: [
{
text: "文档",
link: "/guide/start/index",
activeMatch: "/guide/start/index",
},
{ text: "更新日志", link: "/updateLog", activeMatch: "/updateLog" },
// { text: "个人博客", link: "https://www.kcz66.com" },
{
text: "相关链接",
items: [
{
text: "Vue3",
link: "https://cn.vuejs.org/",
},
{
text: "Vite",
link: "https://cn.vitejs.dev/",
},
{
text: "TypeScript",
link: "https://www.typescriptlang.org/",
},
],
},
],
sidebar: {
"/guide/": [
{
text: "介绍",
items: [
{
text: "简介",
link: "/guide/start/index",
},
{
text: "快速上手",
link: "/guide/start/quick-start",
},
],
},
{
text: "组件",
items: [
{
text: "k-designer 设计器",
link: "/guide/components/k-designer",
},
{
text: "k-builder 生成器",
link: "/guide/components/k-builder",
},
],
},
],
},
},
});
6 changes: 6 additions & 0 deletions docs/guide/components/k-builder.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
## k-designer 设计器

:::tip 设计器
`k-builder` 是一个页面构建组件,它可以将设计器生成的 JSON 配置构建成页面,功能包括组件渲染、事件绑定和数据回显等。
:::

Loading

0 comments on commit 250bb12

Please sign in to comment.