Skip to main content

Electron截图客户端

简介​

本来打算这是一个开源的项目，顺便学习一下electron的开发方式，由于工作太忙，现在处于半瘫痪状态，特意记录下项目资料，以免日后自己都忘记开发了啥

项目架构​

DIR:src                                # 
   |-- assets/                         # 「assets」资源目录，存放一些svg图标，字体，头像图片等
   |   |-- icons/                      # 「icons」
   |   |   |-- iconfont.js             # 
   |   |   `-- chat.svg                # 
   |   |-- vue.svg                     # 
   |   |-- vue.png                     # 
   |   |-- vite.svg                    # 
   |   |-- electron.svg                # 
   |   `-- electron.png                # 
   |-- components/                     # 「components」组件目录
   |   |-- global/                     # 「global」一些会在注册在全局的vue组件
   |   |   |-- IconFont.vue            # 
   |   |   |-- headlessSelectInput.vue # 
   |   |   |-- headLessDialog.vue      # 
   |   |   `-- cpsButton.vue           # 
   |   |-- Home/                       # 「Home」首页，也称仪表盘
   |   |   `-- index.vue               # 
   |   |-- ImageCuter/                 # 「ImageCuter」裁剪图片核心插件
   |   |   |-- body/                   # 「body」
   |   |   |-- informationPanel/       # 「informationPanel」
   |   |   |   |-- tabPictureInfo.vue  # 
   |   |   |   |-- tabCrop.vue         # 
   |   |   |   `-- index.vue           # 
   |   |   |-- store/                  # 「store」
   |   |   |   |-- index.ts            # 
   |   |   |   `-- config.ts           # 
   |   |   |-- test.stylus             # 
   |   |   |-- index.vue               # 
   |   |   |-- imageCuterMenus.vue     # 
   |   |   |-- imageCuterHeader.vue    # 
   |   |   |-- imageCuterBody.vue      # 
   |   |   |-- dragResize.vue          # 
   |   |   `-- dragOverlay.vue         # 
   |   |-- ToolBar/                    # 「ToolBar」
   |   |   `-- ToolBar.vue             # 
   |   `-- Test.vue                    # 
   |-- layout/                         # 「layout」
   |   |-- aside/                      # 「aside」
   |   |   |-- index.vue               # 
   |   |   |-- asideSplitLine.vue      # 
   |   |   `-- asideMenuItem.vue       # 
   |   |-- index.vue                   # 
   |   |-- Head.vue                    # 
   |   `-- background-switch.styl      # 
   |-- libs/                           # 「libs」一些关键组件如：事件中心
   |   `-- eventBus.ts                 # 
   |-- router/                         # 「router」路由目录，配置整个软件的路由
   |   `-- index.ts                    # 
   |-- stroes/                         # 「stroes」管理软件全局的配置和状态，与插件的各自的状态是分开的
   |   `-- imageCuter.ts               # 
   |-- test/                           # 「test」单元测试目录
   |   |-- tester.vue                  # 
   |   |-- test.mjs                    # 
   |   |-- centers.styl                # 
   |   `-- bodyBackground.vue          # 
   |-- utils/                          # 「utils」工具函数类目录
   |   |-- offscreenCanvas.ts          # 
   |   |-- mime-type.ts                # 
   |   |-- Intersect.ts                # 
   |   |-- imgSizeReader.ts            # 
   |   |-- imgHandler.ts               # 
   |   `-- cpsColor.ts                 # 
   |-- vite-env.d.ts                   # 
   |-- tailwind.css                    # 
   |-- style.css                       # 
   |-- main.ts                         # 
   |-- global.d.ts                     # 
   |-- env.d.ts                        # 
   `-- App.vue                         #

目录规范​

组件独立管理​

所有独立功能的插件都要在src/componts/目录下单独建立一个目录作为入口，入口文件是index.vue。

例如：截图插件

DIR:src
   |-- components/                     # 「components」
   |   |-- ImageCuter/                 # 「ImageCuter」所有相关文件都通过新建一个目录同一存放
   |   |   |-- body/                   # 「body」目录具体结构可以自定
   |   |   |-- informationPanel/       # 「informationPanel」
   |   |   |   |-- tabPictureInfo.vue  # 
   |   |   |   |-- tabCrop.vue         # 
   |   |   |   `-- index.vue           # 
   |   |   |-- store/                  # 「store」插件自己的状态和配置都存放在stroe里面
   |   |   |   |-- index.ts            #  插件状态入口
   |   |   |   `-- config.ts           #  插件的配置入口
   |   |   |-- index.vue               #  整个插件的唯一入口文件
   |   |   |-- imageCuterMenus.vue     # 
   |   |   |-- imageCuterHeader.vue    # 
   |   |   |-- imageCuterBody.vue      # 
   |   |   |-- dragResize.vue          # 
   |   |   `-- dragOverlay.vue         #

无论什么插件，只要是独立功能的，都需要新建一个对应目录

配置文件​

文件路径：ImageCuter/store/config.ts

字段说明类型示例
SUPORT_EXTS手动指定支持的图片格式string[]['jpg', 'png']
SUPORT_TYPES手动指定支持的content-type格式string[]['image/jpeg', 'image/jpg']
MAX_IMG_SIZE最大文件尺寸，大于这个插件不进行读取number1024 1024 100(100 MB)

状态管理​

文件路径：ImageCuter/store/index.ts

字段说明类型示例
configconfig.ts实例recative