Electron+Vue3+TypeScript+Vite桌面应用TodoList UI架构

原文地址：https://www.webxiu.com.cn/post/10005242

前言

[图片上传失败...(image-1988c9-1652432201196)]

上一章节《Electron+Vue3+TypeScript+Vite桌面应用程序项目初始化》完成后，我们的桌面应用程序如上图，这次我们先美化一下界面，形成初步的UI框架。

从这里开始需要书写css，我们选择SCSS工具，先安装：

npm install sass -save-dev

新建assets/scss/globalVariable.scss

// 这里书写全局的css样式，或者方法等

修改 vite.config.ts

...
css: {
  //css预处理
  preprocessorOptions: {
    scss: {
      /*
      引入.scss全局预定义变量
      */
      additionalData: '@import "./src/assets/scss/globalVariable.scss";@import "./src/assets/scss/iconfont.scss";'
    }
  }
}

窗口优化

由上图可以看到，默认的菜单栏、最小化最大化关闭按钮都不是很美观，所以我们来自定义一下。

掉标题栏和边框

修改electron-main/index.ts

...
mainWindow = new BrowserWindow({
  ...
  frame: false, // 标题栏和边框一并隐藏
});
...

自定义标题栏

新建组件components/c-header.vue，利用 flex布局 两端对齐，左侧程序名称，右侧最小化、最大化和关闭按钮

上面的 flex 默认选择器在全局的scss里面以书写

// assets/scss/globalVariable.scss
.flex {
  display: flex;
  .flex1{
    flex: 1;
  }
}

.flex-align-center {
  @extend .flex;
  align-items: center;
}

.flex-space {
  @extend .flex;
  justify-content: space-between;
}

.flex-space-center {
  @extend .flex;
  align-items: center;
  justify-content: space-between;
}

.flex-center-center {
  @extend .flex;
  align-items: center;
  justify-content: center;
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

新建components/c-header-btn.vue

electron-main/index.ts监听按钮事件

// electron-main/index.ts
import { ..., ipcMain } from 'electron';
...
let mainWindow : any;

const createWindow = () => {
  mainWindow = new BrowserWindow({
    ...
  });
}

// 监听自定义按钮事件，并作出相应动作
// 最小化应用程序
ipcMain.on('min', e => mainWindow.minimize())
// 最大化应用程序
ipcMain.on('max', e => {
  if (mainWindow.isMaximized()) {
    mainWindow.unmaximize()
  } else {
    mainWindow.maximize()
  }
})
// 关闭应用程序
ipcMain.on('close', e => mainWindow.close())

App.vue 导入 c-header.vue 组件

[图片上传失败...(image-84c3e6-1652432201196)]

todo list 事项面板UI

新建components/c-main.vue

事项分组group可能有N个，所以这里css样式让group一直向右排列，overflow-x: auto; white-space: nowrap;

App.vue 导入 c-main.vue 组件

[图片上传失败...(image-987bd8-1652432201196)]

结语

到这里，项目的UI框架基本结束，下一章节将集成 Vue.Draggable 拖拽任务。

本项目将持续更新，希望你也持续关注。

项目地址

• https://gitee.com/javanx/todolist
• https://gitee.com/javanx/todolist-server