Skip to content

Commit

Permalink
ok
Browse files Browse the repository at this point in the history
  • Loading branch information
@duolabmeng6
duolabmeng6 committed Dec 6, 2023
1 parent 5d33ec2 commit e729c03
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 87 deletions.
187 changes: 105 additions & 82 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

<p align="center" style="text-align: center">
<img src="GoEasyDesigner/build/appicon.png" width=256 height=256 />

</p>

<p align="center">
Expand All @@ -10,192 +10,215 @@
<strong>
<samp>

[English](README.md) · [简体中文](README.zh-Hans.md)
[English](README.md) · [Simplified Chinese](README.zh-Hans.md)

</samp>
</strong>
</div>



# GoEasyDesigner

# Window Designer
![666](https://github.com/duolabmeng6/GoEasyDesigner/assets/59047063/a89d2ab9-9ba3-4efc-b0fa-0a7dcc3bcfc1)
![image-20230828083413650](README.assets/image-20230828083413650.png)
![image-20230828084834120](README.assets/image-20230828084834120.png)

Based on the Go language and using the Wails framework, GoEasyDesigner supports Windows, MacOS, Linux, and other systems.
This is a simple and easy-to-use visual interface design tool, developed in Go language using the Wails framework, supporting systems like Windows, MacOS, Linux, etc.

Main repository: https://github.com/duolabmeng6/GoEasyDesigner
Main Repository: https://github.com/duolabmeng6/GoEasyDesigner

Mirror repository: https://gitee.com/duolabmeng666/go-easy-designer
Mirror Repository: https://gitee.com/duolabmeng666/go-easy-designer

**Project Progress:**

The project is in active development. Front-end experts are welcome to contribute.
The project is in active development. Front-end experts are welcome to contribute PRs.

Completed tasks:
- [x] Cross-platform compatibility: Windows MacOS Linux
- [x] Interface design and feature development: Completed the development of core features such as overall interface layout, function flow design, interface drawing, attribute modification, component dragging, and double-clicking on components to jump to corresponding event functions.
- [x] Smart code editor: Implemented Hanzi initial input reminder in the code editor, improving coding efficiency.
- [x] Support for the goefun library: [goefun library](https://pkg.go.dev/github.com/duolabmeng6/goefun#section-sourcefiles), allowing the use of Chinese functions in Golang development.
- [x] Layout containers: Including common layouts, flex layouts.
- [x] Completed component library: Buttons, text editors, labels, switches, radio buttons, checkboxes, common layouts, flex layouts, tree boxes, menus, tables, progress bars, and tabs.
- [x] Custom dynamic components support: Enables the development of templates like login boxes for quick application development.

To-do tasks:
- [ ] Support for the jsefun library: Planned, under development.
- [ ] Component library refinement: In progress, further refinement of [element-plus](https://element-plus.org/zh-CN/component/button.html) components.
- [ ] Integrated development environment: Planned, will implement an environment for development without cumbersome configurations.
- [ ] Multilingual support: Planned, will support multiple languages such as Chinese and English.
- [ ] Support for ElectronJS: Planned, will support ElectronJS as a backend technology.
- [ ] Custom cloud components: Users can upload their own templates for others to use.

We will continue to work hard to ensure that the project progresses as planned and provide more powerful features and support. Please stay tuned for our updates!

- [x] Cross-platform compatibility: Supports Windows, MacOS, and Linux systems.
- [x] Interface design and functionality development: Completed overall layout design, functional process design, interface drawing, property modification, component dragging, double-clicking components to jump to corresponding event functions, and other core features.
- [x] Intelligent code editor: Implemented the Chinese character initial letter input reminder function for the code editing box, enhancing coding efficiency.
- [x] [goefun library](https://pkg.go.dev/github.com/duolabmeng6/goefun#section-sourcefiles) Chinese function library support: Developing using Chinese functions in Golang.
- [x] Component library: Completed development of components like buttons, text boxes, labels, switches, radio buttons, checkboxes, common layouts, flex layouts, tree boxes, menus, tables, progress bars, file selectors, and more.
- [x] Custom component support: Allows the creation of custom components, such as login boxes, for rapid application development.
- [x] Integrated development environment: Provided a one-click environment setup package, simplifying the construction of the development environment.
- [x] Multilingual support: The application supports multiple languages including Chinese and English.

Tasks to be completed:

- [ ] jsefun library support: Planned and awaiting development.
- [ ] Component library enhancement: Ongoing, further improvement of [element-plus](https://element-plus.org/zh-CN/component/button.html) components.
- [ ] Support for ElectronJS: Planned, will support ElectronJS as backend technology.
- [ ] Custom cloud components: Users will be able to upload their templates for others to use.

# Online Experience

Thanks to a friend for providing a server, you can now experience it online.
Thanks to a friend's server, you can now enjoy an online experience.

Domestic address: https://go.kenhong.com/
Overseas address: https://g.yx24.me

[Download and run the project](https://github.com/duolabmeng6/wails-template-vue-go-easy), when experiencing online, design the interface in the browser and save it. It will download two files, `Design file.json`, `Auxiliary code.js`. Make sure your browser allows downloading multiple files, and place the design file in the specified location.
International address: https://g.yx24.me

[Download Window Running Project](https://github.com/duolabmeng6/wails-template-vue-go-easy), during online experience, design the interface in the browser and save. Two files will be downloaded: `design.json`, `__aux_code.js`. Make sure your browser allows downloading multiple files, and place the design files in the specified location.

# Quick Start
[Video Tutorial: 10 Minutes to Get Started](https://www.bilibili.com/video/BV1ou4y1r7WS)

Please install in order.
[Video Tutorial: 3 Minutes to Learn Custom Component Packaging](https://www.bilibili.com/video/BV1ar4y1f7Rq)

[10-minute video tutorial for beginners](https://www.bilibili.com/video/BV1ou4y1r7WS)
# Environment Installation
## Method 1
### 1. Install Node.js Development Environment

[3-minute video tutorial to learn how to customize components](https://www.bilibili.com/video/BV1ar4y1f7Rq)
[Node.js Download Page](https://nodejs.org/) Version 18 or above

### 1. Install Node.js development environment
Domestic mirror: `npm install -g cnpm --registry=http://registry.npmmirror.com`

[Node.js download page](https://nodejs.org/) Version 18 and above
Install Vite: `npm install vite@latest`

Domestic mirror `npm install -g cnpm --registry=http://registry.npmmirror.com`
### 2. Install Go Language Development Environment

Install Vite `npm create vite@latest`
[Go Language Download Page](https://golang.org/dl/) Any version

### 2. Install Go language development environment
Install Wails [Wails Framework Documentation](https://wails.io/zh-Hans/docs/gettingstarted/installation/)

[Go language download page](https://golang.org/dl/) Any version
Domestic mirror execution: `go env -w GOPROXY=https://goproxy.cn,direct`

Install Wails [Wails framework documentation](https://wails.io/zh-Hans/docs/gettingstarted/installation/)
```
go install github.com/wailsapp/wails/v2/cmd/wails@latest
```

Execute the domestic mirror `go env -w GOPROXY=https://goproxy.cn,direct`
After successful installation, run the Wails command. If there is content output, it means successful installation.
## Method 2: Windows Complete Running Environment Package Download

[Xiaofeiji Cloud Disk Download Address, No Login Required](https://share.feijipan.com/s/4wU6lASg)

Download `GoEasyDesigner.2023.12.6.Including Running Environment.zip` and unzip.

After successful installation, run the `wails` command, and if there is output, it is installed successfully.
`env_soft.

#### Create and run the project window
This project is for window running environment; your code will be written here.
7z` Running environment package includes `go` and `node`. Unzip and find `One-Click Environment Configuration.exe`, run as administrator.

Create a project
If installation is successful, you can directly open `GoEasyDesigner.exe`.

If not configured successfully, add environment variables to the system's `PATH`. After adding, run `One-Click Environment Configuration.exe`.

```
C:\GoEasyDesigner\env_soft\go1.21.4\bin
C:\GoEasyDesigner\env_soft\go1.21.4\AppData\bin
C:\GoEasyDesigner\env_soft\node-v20.9.0-win-x64
```

`go-easy-demo` folder is a sample project.

Open `go-easy-demo\frontend\src\win\design.json` with Window Designer to design the interface or run and compile the project.

Open the `go-easy-demo` folder with Goland IDE to start coding.

# Project Creation

## Create Window Running Project
This project is for window running, your code will also be written here.

Create a project:

```
wails init -n "go-easy-demo" -t https://github.com/duolabmeng6/wails-template-vue-go-easy
```

Run the window
Run window:

```
cd go-easy-demo
wails dev
```

Compile to an executable file
Compile into executable file:

```
cd go-easy-demo
wails build
```

Debug front-end only
Front-end only debugging:

```
cd go-easy-demo/frontend
npm run dev
```

### 3. Download GoEasyDesigner
# Usage Instructions

Download the latest version: https://github.com/duolabmeng6/GoEasyDesigner/releases
### Download GoEasyDesigner

Run directly
Download the latest version: https://github.com/duolabmeng6/GoEasyDesigner/releases

The interface design file is here
Interface design file location:

```
go-easy-demo/frontend/src/窗口/设计文件.json
go-easy-demo/frontend/src/win/design.json
```

### 4. WebStorm IDE Code Navigation Plugin

To experience automatic jumping to the corresponding function in the IDE when double-clicking on a component, please install the QtEasyDesigner plugin in WebStorm. In the project files,
### Webstorm IDE Code Jump Plugin

After installation, right-click in the IDE editor and see `Configure QtEasyDesigner`
To experience double-clicking components in the IDE to automatically jump to the corresponding function, install the QtEasyDesigner plugin in Webstorm. In this project's files,

For macOS, fill in the path
After installation, right-click in the IDE editor and select `Configure QtEasyDesigner`.

macOS path:
```
/Applications/GoEasyDesigner.app/Contents/MacOS/GoEasyDesigner
```


For Windows, fill in the exe path
Windows path:
```
C:\GoEasyDesigner\GoEasyDesigner.exe
```
For subsequent use, open `Design file.json` in the editor, right-click, and open `QtEasyDesigner`. The interface will appear.

Write JavaScript code in the WebStorm IDE for most code writing. If JavaScript cannot achieve something, then call Go code.
Go code uses Goland IDE for writing. In general, code should be written in `app.go`.
For subsequent use, open `design.json` in the editor, right-click and select `Open QtEasyDesigner`. The interface will appear.

JS code uses Webstorm IDE. Most coding should be done in JS. Use Go code only if JS cannot achieve the desired functionality.
Go code is written in Goland IDE, typically in app.go.

### Developing Components, Please See
### For Window Designer Development

To debug in the IDE, the following configuration is needed
For debugging in the IDE, you need the following configuration:

Build the package `changeme`
Build package `changeme`.

Working directory `/Users/ll/Documents/GitHub/GoEasyDesigner/GoEasyDesigner` Change it to your path
Working directory `/Users/ll/Documents/GitHub/GoEasyDesigner/GoEasyDesigner` change to your path.

Environment variable `CGO_LDFLAGS=-framework UniformTypeIdentifiers` This is required for macOS, not for Windows.
Environment variable `CGO_LDFLAGS=-framework UniformTypeIdentifiers` is needed for macOS, not for Windows.

Go tool arguments `-tags dev -gcflags "all=-N -l"`
Go tool arguments `-tags dev -gcflags "all=-N -l"`.

Program arguments (optional) `文件路径=/Users/ll/Documents/GitHub/GoEasyDesigner/go-easy-demo/frontend/src/窗口/设计文件.json port=8080` This is the port of the plugin, which works with the IDE plugin.
Program arguments (optional) `File Path=/Users/ll/Documents/GitHub/GoEasyDesigner/go-easy-demo/frontend/src/win/design.json port=8080` This is to work with the IDE plugin, where port is the plugin's port.

Now you can debug with breakpoints in `app.go`.
Now you can debug with breakpoints in app.go.

#### `go-easy-demo` is a Template Project
#### go-easy-demo is a template project

Interface data is here
Interface data location:

```
go-easy-demo/frontend/src/窗口/设计文件.json
go-easy-demo/frontend/src/win/design.json
```

Run, and you can see the effect
Run to see the effects:

```
cd go-easy-demo
wails dev
```

# Window Designer Development Cases


[Duoduo Projection Screen](https://gitee.com/duolabmeng666/projection_screen_tv) Easily project video files from MacOS and Windows to TV, similar to mobile phone screen projection, no need for NAS or other cumbersome operations. Direct file projection.

# Contribution

The list of contributors is too large for this readme file! All outstanding individuals who have contributed to this project are listed here [Contribution List](https://github.com/duolabmeng6/GoEasyDesigner/graphs/contributors) We will create a page later.
The contributor list is too large for the README file! All the outstanding individuals who have contributed to this project can be found here [Contributor List](https://github.com/duolabmeng6/GoEasyDesigner/graphs/contributors).
We will create a page later.

# License

This project is licensed under the [GNU Lesser General Public License (LGPL) version 3](LICENSE). For detailed information, please refer to the license file.
This project is licensed under the [GNU Lesser General Public License (LGPL) Version 3](LICENSE). For detailed information, please refer to the license file.

# Learning and Communication
# Learning and Exchange

QQ Group: 927427009
6 changes: 2 additions & 4 deletions README.zh-Hans.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,11 +97,9 @@ go install github.com/wailsapp/wails/v2/cmd/wails@latest
安装成功后，运行 wails 命令，有内容输出即为安装成功。
## 方式2 Window可下载完整的运行环境包

[小飞机网盘下载地址 免登录](https://share.feijipan.com/s/T2U4eiZS)
[小飞机网盘下载地址 免登录](https://share.feijipan.com/s/4wU6lASg)

[123云盘下载地址](https://www.123pan.com/s/KLRJjv-Jz8WH.html)

下载 `GoEasyDesigner.2023.11.16.包含运行环境.zip` 解压
下载 `GoEasyDesigner.2023.12.6.包含运行环境.zip` 解压

`env_soft.7z` 运行环境包含 `go` 和 `node` 解压找到 `一键配置环境.exe` 以管理员身份运行

Expand Down
2 changes: 1 addition & 1 deletion go-easy-demo
Submodule go-easy-demo updated 1 files
+2 −2 wails.json

0 comments on commit e729c03

Please sign in to comment.