-
-
@@ -10,192 +10,215 @@ -[English](README.md) · [简体中文](README.zh-Hans.md) +[English](README.md) · [Simplified Chinese](README.zh-Hans.md) - - -# GoEasyDesigner - +# Window Designer  - - -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 diff --git a/README.zh-Hans.md b/README.zh-Hans.md index 55cee58..5f908fd 100644 --- a/README.zh-Hans.md +++ b/README.zh-Hans.md @@ -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` 以管理员身份运行 diff --git a/go-easy-demo b/go-easy-demo index b672081..7ab9888 160000 --- a/go-easy-demo +++ b/go-easy-demo @@ -1 +1 @@ -Subproject commit b672081c3dafc42d9ef1b7be821fa4695c8c7e28 +Subproject commit 7ab98880468bb563533fa757b5dbcd563e4c07ac