微信一样的布局,软软AI桌面版开局

创建工程前准备

rust环境

rust的环境参照官方：

pnpm前端环境

安装node，然后安装pnpm

下载代码编辑工具vscode

创建工程

pnpm create tauri-app

运行工程查看是否正常

pnpm tauri dev

分析微信桌面版的布局

先看下最后的效果图

布局为三部分，从左至右菜单条，会话列表，会话。对于前端来讲比较简单，这里需要考虑的是在mac中的窗口管理按钮。

实现

布局

考虑到一些其他的功能可能不是会话的模式，所以首先通过layout将页面划分为两部分：

     <div className={styles.container}>
      <div data-tauri-drag-region className={styles.navs}>
        .........
      </div>
      <div data-tauri-drag-region className={styles.content}>
        <Outlet />
      </div>
    </div>

部分的样式设置

@import url('../variable.less');

.container {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  display: flex;
  flex-direction: row;
  background-color: #FFFFFF;
  justify-content: space-between;
  align-items: flex-start;

  .navs {
    width: 60px;
    height: 100%;
    background-color: @primary-bg-color;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .items {
      ...........
    }


  }

  .content {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: row;
  }
}

窗口管理按钮实现

首先隐藏默认的窗口的标题条修改 tauri.conf.json 文件中的decorations设置为false

{
    "windows": [
      {
        "fullscreen": false,
        "resizable": true,
        "title": "软软AI",
        "width": 1330,
        "minWidth": 900,
        "minHeight": 600,
        "height": 1020,
        "fileDropEnabled": true,
        "decorations": false,
        "transparent": true,
        "visible": true
      }
    ]
}

定制窗口管理按钮详细的代码可以参见

github.com/rrkeji/rrai…

添加事件

<Controls
              isFullscreen={isFullscreen}
              onCloseClick={async () => {
                await appWindow.close();
              }}
              onMinimizeClick={async () => {
                await appWindow.minimize();
              }}
              onMaximizeClick={async () => {
                if (await appWindow.isMaximized()) {
                  await appWindow.unmaximize();
                  setIsFullscreen(false);
                } else {
                  await appWindow.maximize();
                  setIsFullscreen(true);
                }
              }}
              onResizeClick={async () => {
                if (await appWindow.isMaximized()) {
                  await appWindow.unmaximize();
                  setIsFullscreen(false);
                } else {
                  await appWindow.maximize();
                  setIsFullscreen(true);
                }
              }}
              isWindowFocused={isWindowFocused}></Controls>

遗留一个mac os中的最大化问题，日后解决。

在tauri中开发，如果想要点击拖动整个窗口，需要在div上添加data-tauri-drag-region属性。

代码参见github

github:github.com/rrkeji/rrai…