‍💻 基于 Electron + Vue3 的桌面应用开发实战

1

npm create vite@latest electron -- --template vue-ts

1

npm i electron -D

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

{
  "name": "electron",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {},
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "electron": "^22.0.3",
    "typescript": "^4.9.3",
    "vite": "^4.0.0",
    "vue-tsc": "^1.0.11",
    "vue": "^3.2.45"
  }
}

1
2
3
4
5
6
7
8

import { app, BrowserWindow } from "electron";

let mainWindow: BrowserWindow;

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({});
  mainWindow.loadURL(process.argv[2]);
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

import { ViteDevServer } from "vite";

interface IAddressInfo {
  address: string;
  port: string;
}
export let devPlugin = () => {
  return {
    name: "dev-plugin",
    configureServer(server: ViteDevServer) {
      require("esbuild").buildSync({
        entryPoints: ["./src/main/mainEntry.ts"],
        bundle: true,
        platform: "node",
        outfile: "./dist/mainEntry.js",
        external: ["electron"],
      });
      server?.httpServer?.once("listening", () => {
        let { spawn } = require("child_process");
        let addressInfo: IAddressInfo =
          server?.httpServer?.address() as unknown as IAddressInfo;
        let httpAddress = `http://${addressInfo?.address}:${addressInfo?.port}`;
        let electronProcess = spawn(
          require("electron").toString(),
          ["./dist/mainEntry.js", httpAddress],
          {
            cwd: process.cwd(),
            stdio: "inherit",
          }
        );
        electronProcess.on("close", () => {
          server.close();
          process.exit();
        });
      });
    },
  };
};

1
2
3
4
5
6
7
8

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { devPlugin } from "./plugins/devPlugin";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [devPlugin(), vue()],
});

1
2
3
4
5
6
7
8
9

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts", "./plugins/*.*"]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

import { app, BrowserWindow } from "electron";
process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = "true";
let mainWindow: BrowserWindow;

app.whenReady().then(() => {
  let config = {
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false,
      allowRunningInsecureContent: true,
      contextIsolation: false,
      webviewTag: true,
      spellcheck: false,
      disableHtmlFullscreenWindowResize: true,
    },
  };
  mainWindow = new BrowserWindow(config);
  mainWindow.webContents.openDevTools({ mode: "undocked" });
  mainWindow.loadURL(process.argv[2]);
});

1

Module "xxxx" has been externalized for browser compatibility and cannot be accessed in client code.

1

npm i vite-plugin-optimizer -D

1
2
3
4
5
6
7
8
9

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { devPlugin, getReplacer } from "./plugins/devPlugin";
import optimizer from "vite-plugin-optimizer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [optimizer(getReplacer()), devPlugin(), vue()],
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

export let getReplacer = () => {
  let externalModels = [
    "os",
    "fs",
    "path",
    "events",
    "child_process",
    "crypto",
    "http",
    "buffer",
    "url",
    "better-sqlite3",
    "knex",
  ];
  let result = {};
  for (let item of externalModels) {
    result[item] = () => ({
      find: new RegExp(`^${item}$`),
      code: `const ${item} = require('${item}'); export { ${item} as default }`,
    });
  }
  result["electron"] = () => {
    let electronModules = [
      "clipboard",
      "ipcRenderer",
      "nativeImage",
      "shell",
      "webFrame",
    ].join(",");
    return {
      find: new RegExp(`^electron$`),
      code: `const {${electronModules}} = require('electron'); export { ${electronModules} }`,
    };
  };
  return result;
};

1
2
3

// src\App.vue import fs from "fs"; import { ipcRenderer } from "electron";
import { onMounted } from "vue"; onMounted(() => {
console.log(fs.writeFileSync); console.log(ipcRenderer); });

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { devPlugin, getReplacer } from "./plugins/devPlugin";
import { buildPlugin } from "./plugins/buildPlugin";
import optimizer from "vite-plugin-optimizer";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    rollupOptions: {
      plugins: [buildPlugin()],
    },
  },
  plugins: [optimizer(getReplacer()), devPlugin(), vue()],
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

import path from "path";
import fs from "fs";

class BuildObj {
  // 编译主进程代码
  buildMain() {
    require("esbuild").buildSync({
      entryPoints: ["./src/main/mainEntry.ts"],
      bundle: true,
      platform: "node",
      minify: true,
      outfile: "./dist/mainEntry.js",
      external: ["electron"],
    });
  }
  // 为生产环境准备package.json
  preparePackageJson() {
    let pkgJsonPath = path.join(process.cwd(), "package.json");
    let localPkgJson = JSON.parse(fs.readFileSync(pkgJsonPath, "utf-8"));
    let electronConfig = localPkgJson.devDependencies.electron.replace("^", "");
    localPkgJson.main = "mainEntry.js";
    delete localPkgJson["scripts"];
    delete localPkgJson["devDependencies"];
    localPkgJson.devDependencies = {
      electron: electronConfig,
    };
    let tarJsonPath = path.join(process.cwd(), "dist", "package.json");
    fs.writeFileSync(tarJsonPath, JSON.stringify(localPkgJson));
    fs.mkdirSync(path.join(process.cwd(), "dist/node_modules"));
  }
  // 使用electron-builder制成安装包
  buildInstaller() {
    let options = {
      config: {
        directories: {
          output: path.join(process.cwd(), "release"),
          app: path.join(process.cwd(), "dist"),
        },
        files: ["**"],
        extends: null,
        productName: "Electron",
        appId: "com.xxx.desktop",
        asar: true,
        nsis: {
          oneClick: true,
          perMachine: true,
          allowToChangeInstallationDirectory: false,
          createDesktopShortcut: true,
          createStartMenuShortcut: true,
          shortcutName: "ElectronDesktop",
        },
        publish: [
          {
            provider: "generic",
            url: "http://localhost:5500/",
          },
        ],
      },
      project: process.cwd(),
    };
    return require("electron-builder").build(options);
  }
}
export let buildPlugin = () => {
  return {
    name: "build-plugin",
    closeBundle: () => {
      let buildObj = new BuildObj();
      buildObj?.buildMain();
      buildObj?.preparePackageJson();
      buildObj?.buildInstaller();
    },
  };
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

import { protocol } from "electron";
import path from "path";
import fs from "fs";

// 为自定义app协议提供特权
let schemeConfig = {
  standard: true,
  supportFetchAPI: true,
  bypassCSP: true,
  corsEnabled: true,
  stream: true,
};

protocol.registerSchemesAsPrivileged([
  {
    scheme: "app",
    privileges: schemeConfig,
  },
]);

export class CustomScheme {
  // 根据文件扩展名获取mime-type
  private static getMimeType(extension: string) {
    let mineType = "";
    switch (extension) {
      case ".js":
        mineType = "text/javascript";
        break;
      case ".html":
        mineType = "text/html";
        break;
      case ".css":
        mineType = "text/css";
        break;
      case ".svg":
        mineType = "image/svg+xml";
        break;
      case ".json":
        mineType = "application/json";
        break;
    }
    return mineType;
  }
  // 注册自定义app协议
  static registerScheme() {
    protocol.registerStreamProtocol("app", (request, callback) => {
      let pathName = new URL(request.url).pathname;
      let extension = path.extname(pathName).toLowerCase();
      if (extension === "") {
        pathName = "index.html";
        extension = ".html";
      }
      let tarFile = path.join(__dirname, pathName);
      callback({
        statusCode: 200,
        headers: {
          "content-type": this.getMimeType(extension),
        },
        data: fs.createReadStream(tarFile),
      });
    });
  }
}

1
2
3
4
5
6
7
8

import { CustomScheme } from "./customScheme";

if (process.argv[2]) {
  mainWindow.loadURL(process.argv[2]);
} else {
  CustomScheme.registerScheme();
  mainWindow.loadURL('app"//index.html');
}

1

<script type="module" src="/src/renderer/main.ts"></script>

1

npm install vue-router@4 -D

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

import * as VueRouter from "vue-router";

// 路由规则数组
const routes = [
  {
    path: "/",
    redirect: "/WindowMain/Chat",
  },
  {
    path: "/WindowMain",
    component: () => import("../window/WindowMain.vue"),
    children: [
      {
        path: "Chat",
        component: () => import("../window/WindowMain/Chat.vue"),
      },
      {
        path: "Contact",
        component: () => import("../window/WindowMain/Contact.vue"),
      },
      {
        path: "Collection",
        component: () => import("../window/WindowMain/Collection.vue"),
      },
    ],
  },
  {
    path: "/WindowSetting",
    component: () => import("../window/WindowSetting.vue"),
    children: [
      {
        path: "AccountSetting",
        component: () => import("../window/WindowSetting/AccountSetting.vue"),
      },
    ],
  },
  {
    path: "/WindowUserInfo",
    component: () => import("../window/WindowUserInfo.vue"),
  },
];

export let router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes,
});

1
2
3
4
5
6

import { createApp } from "vue";
import "./style.css";
import { router } from "./router";
import App from "./App.vue";

createApp(App).use(router).mount("#app");

1
2
3

<template>
  <router-view />
</template>

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111

<template>
  <div class="BarLeft">
    <div class="userIcon">
      <img src="../assets/avatar.jpg" alt="" />
    </div>
    <div class="menu">
      <router-link
        v-for="item in mainWindowRoutes"
        :to="item.path"
        :class="['menuItem', { selected: item.isSelected }]"
      >
        <i
          :class="['icon', item.isSelected ? item.iconSelected : item.icon]"
        ></i>
      </router-link>
    </div>
    <div class="setting">
      <div class="menuItem">
        <i class="icon icon-setting" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
let mainWindowRoutes = ref([
  {
    path: "/WindowMain/Chat",
    isSelected: true,
    icon: "icon-chat",
    iconSelected: "icon-chat",
  },
  {
    path: "/WindowMain/Contact",
    isSelected: false,
    icon: "icon-tongxunlu1",
    iconSelected: "icon-tongxunlu",
  },
  {
    path: "/WindowMain/Collection",
    isSelected: false,
    icon: "icon-shoucang1",
    iconSelected: "icon-shoucang",
  },
]);
let route = useRoute();
watch(
  () => route,
  () =>
    mainWindowRoutes.value.forEach(
      (v) => (v.isSelected = v.path === route.fullPath)
    ),
  {
    immediate: true,
    deep: true,
  }
);
</script>

<style scoped lang="scss">
.BarLeft {
  width: 54px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgb(46, 46, 46);
  -webkit-app-region: drag;
}
.userIcon {
  height: 84px;
  padding-top: 36px;
  box-sizing: border-box;
  img {
    width: 34px;
    height: 34px;
    margin-left: 10px;
  }
}
.menu {
  flex: 1;
}
.menuItem {
  height: 44px;
  line-height: 44px;
  text-align: center;
  padding-left: 12px;
  padding-right: 12px;
  display: block;
  text-decoration: none;
  color: rgb(126, 126, 126);
  cursor: pointer;
  -webkit-app-region: no-drag;
  i {
    font-size: 22px;
  }
  &:hover {
    color: rgb(141, 141, 141);
  }
}
.selected {
  color: rgb(7, 193, 96);
  &:hover {
    color: rgb(7, 193, 96);
  }
}
.setting {
  margin-bottom: 5px;
}
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<script setup lang="ts">
import { ipcRenderer } from "electron";
import { onMounted } from "vue";
import BarLeft from "../components/BarLeft.vue";
onMounted(() => {
  ipcRenderer.invoke("showWindow");
});
</script>

<template>
  <BarLeft />
  <div class="pageBox">
    <router-view />
  </div>
</template>

<style scoped lang="scss">
.pageBox {
  flex: 1;
  height: 100%;
  border-top: 1px solid #e6e6e6;
  box-sizing: border-box;
  display: flex;
  margin-top: -1px;
}
</style>

1
2
3
4
5
6
7

import { createApp } from "vue";
import "./style.css";
import "./assets/icon/iconfont.css";
import { router } from "./router";
import App from "./App.vue";

createApp(App).use(router).mount("#app");

1

<i class="icon icon-chat"></i>

1
2
3
4
5

const { BrowserWindow } = require("electron");
const win = new BrowserWindow({ show: false });
win.once("ready-to-show", () => {
win.show();
});

1
2

import { ipcRenderer } from "electron"; import { onMounted } from "vue";
onMounted(() => { ipcRenderer.invoke("showWindow"); });

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

<template>
  <div class="topBar">
    <div class="winTitle">{{ title }}}</div>
    <div class="winTool">
      <div @click="minimizeMainWindow">
        <i class="icon icon-minimize" />
      </div>
      <div v-if="isMaximized" @click="unmaximizeMainWindow">
        <i class="icon icon-restore" />
      </div>
      <div v-else @click="maxmizeMainWin">
        <i class="icon icon-maximize" />
      </div>
      <div @click="closeWindow">
        <i class="icon icon-close" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
.topBar {
  display: flex;
  height: 25px;
  line-height: 25px;
  -webkit-app-region: drag; /* 可拖拽区域 */
  width: 100%;
}

.winTitle {
  flex: 1;
  padding-left: 12px;
  font-size: 14px;
  color: #888;
}

.winTool {
  height: 100%;
  display: flex;
  -webkit-app-region: no-drag; /* 可拖拽区域内的不可拖拽区域 */
}

.winTool div {
  height: 100%;
  width: 34px;
  text-align: center;
  color: #999;
  cursor: pointer;
  line-height: 25px;
}

.winTool .icon {
  font-size: 10px;
  color: #666666;
  font-weight: bold;
}

.winTool div:hover {
  background: #efefef;
}

.winTool div:last-child:hover {
  background: #ff7875;
}

.winTool div:last-child:hover i {
  color: #fff !important;
}
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

import { BrowserWindow, ipcMain, app } from "electron";

// 主进程公共消息处理逻辑
export class CommonWindowEvent {
  private static getWin(event: any) {
    return BrowserWindow.fromWebContents(event.sender);
  }
  public static listen() {
    ipcMain.handle("minimizeWindow", (e) => {
      this.getWin(e)?.minimize();
    });

    ipcMain.handle("maxmizeWindow", (e) => {
      this.getWin(e)?.maximize();
    });

    ipcMain.handle("unmaximizeWindow", (e) => {
      this.getWin(e)?.unmaximize();
    });

    ipcMain.handle("hideWindow", (e) => {
      this.getWin(e)?.hide();
    });

    ipcMain.handle("showWindow", (e) => {
      this.getWin(e)?.show();
    });

    ipcMain.handle("closeWindow", (e) => {
      this.getWin(e)?.close();
    });

    ipcMain.handle("resizable", (e) => this.getWin(e)?.isResizable());

    ipcMain.handle("getPath", (e, name) => app.getPath(name));
  }

  // 主进程公共事件处理逻辑
  public static regWinEvent(win: BrowserWindow) {
    win.on("maximize", () => {
      win.webContents.send("windowMaximized");
    });
    win.on("unmaximize", () => {
      win.webContents.send("windowUnmaximized");
    });
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import { app, BrowserWindow } from "electron";
import { CustomScheme } from "./customScheme";
import { CommonWindowEvent } from "./CommonWindowEvent";
process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = "true";
let mainWindow: BrowserWindow;
// 调用 CommonWindowEvent.regWinEvent(win);
app.on("browser-window-created", (e, win) => {
  CommonWindowEvent.regWinEvent(win);
});
app.whenReady().then(() => {
  let config = {
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false,
      allowRunningInsecureContent: true,
      contextIsolation: false,
      webviewTag: true,
      spellcheck: false,
      disableHtmlFullscreenWindowResize: true,
    },
  };
  mainWindow = new BrowserWindow(config);
  mainWindow.webContents.openDevTools({ mode: "undocked" });
  if (process.argv[2]) {
    mainWindow.loadURL(process.argv[2]);
  } else {
    CustomScheme.registerScheme();
    mainWindow.loadURL('app"//index.html');
  }
  // 调用 CommonWindowEvent.listen();
  CommonWindowEvent.listen();
});

1
2
3

mainWindow.webContents.setWindowOpenHandler((param) => {
  return { action: "allow", overrideBrowserWindowOptions: yourWindowConfig };
});

1

window.open(`/WindowSetting/AccountSetting`);

1
2
3
4

// src/main/mainEntry.ts
app.on("browser-window-created", (e, win) => {
  CommonWindowEvent.regWinEvent(win);
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

// 注册打开子窗口的回调函数
// @ts-ignore
win.webContents.setWindowOpenHandler((param) => {
  // 基础窗口配置对象
  let config = {
    frame: false,
    show: true,
    parent: null,
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false,
      allowRunningInsecureContent: true,
      contextIsolation: false,
      webviewTag: true,
      spellcheck: false,
      disableHtmlFullscreenWindowResize: true,
      nativeWindowOpen: true,
    },
  };
  // 开发者自定义窗口配置对象
  let features = JSON.parse(param.features);
  for (let p in features) {
    if (p === "webPreferences") {
      for (let p2 in features.webPreferences) {
        //@ts-ignore
        config.webPreferences[p2] = features.webPreferences[p2];
      }
    } else {
      //@ts-ignore
      config[p] = features[p];
    }
  }
  // @ts-ignore
  if (config["modal"] === true) config.parent = win;
  // 允许打开窗口，并传递窗口配置对象
  return { action: "allow", overrideBrowserWindowOptions: config };
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

const openSettingWindow = () => {
  const config = {
    modal: true,
    width: 2002,
    webPreferences: { webviewTag: false },
  };
  window.open(
    `/WindowSetting/AccountSetting`,
    "_blank",
    JSON.stringify(config)
  );
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

export const createDialog = (url: string, config: any): Promise<Window> => {
  return new Promise((resolve, reject) => {
    const windowProxy = window.open(url, "_blank", JSON.stringify(config));
    const readyHandler = (e: any) => {
      let msg = e.data;
      if (msg["msgName"] === "__dialogReady") {
        window.removeEventListener("message", readyHandler);
        resolve(windowProxy as Window);
      }
    };
    window.addEventListener("message", readyHandler);
  });
};

1
2
3
4

export const dialogReady = (): void => {
  const msg = { msgName: "__dialogReady" };
  window.opener.postMessage(msg);
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

const openSettingWindow = async () => {
  const config = {
    modal: false,
    width: 2002,
    webPreferences: { webviewTag: false },
  };
  const dialog = await createDialog("/WindowSetting/AccountSetting", config);
  const msg = { msgName: "hello", value: "msg from your parent" };
  window.addEventListener("message", (e) => {
    console.log(e.data);
  });
  dialog?.postMessage(msg);
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import { onMounted } from "vue";
import { dialogReady } from "../common/Dialog";
onMounted(() => {
  console.log("ready", Date.now());
  window.addEventListener("message", (e) => {
    console.log(e.data);
    window.opener.postMessage({ msgName: "hello", value: "I am your son." });
  });
  dialogReady();
});

1

npm i pinia -D

1
2
3
4
5
6
7
8

import { createApp } from "vue";
import { router } from "./router";
import { createPinia } from "pinia";
import App from "./App.vue";
import "./style.css";
import "./assets/icon/iconfont.css";

createApp(App).use(createPinia()).use(router).mount("#app");

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import { defineStore } from "pinia";
import { Ref, ref } from "vue";
import { ModelChat } from "../../model/ModelChat";

// mock data
const prepareData = () => {
  let result = [];
  for (let i = 0; i < 10; i++) {
    let model = new ModelChat();
    model.fromName = "聊天对象" + i;
    model.sendTime = "昨天";
    model.lastMsg = "这是此会话的最后一条消息" + i;
    model.avatar =
      "https://pic3.zhimg.com/v2-306cd8f07a20cba46873209739c6395d_im.jpg?source=32738c0c";
    result.push(model);
  }
  return result;
};

export const useChatStore = defineStore("chat", () => {
  let data: Ref<ModelChat[]> = ref(prepareData());
  const selectItem = (item: ModelChat) => {
    if (item.isSelected) return;
    data.value.forEach((v) => (v.isSelected = false));
    item.isSelected = true;
  };
  return { data, selectItem };
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { ModalBase } from "./ModalBase";

export class ModelChat extends ModalBase {
  fromName?: string;
  sendTime?: string | number;
  isSelected = false;
  lastMsg?: string;
  avatar?: string;
  // 0 单聊，1 群聊，2 公众号，3 文件传输助手
  chatType?: number;
}

1
2
3
4
5
6
7
8

import crypto from "crypto";

export class ModalBase {
  id: string;
  constructor() {
    this.id = crypto.randomUUID();
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<template>
  <div class="ChatList">
    <ChatSearch />
    <div class="ListBox">
      <ChatItem :data="item" v-for="item in store.data" :key="item.id" />
    </div>
  </div>
</template>

<script setup lang="ts">
import ChatItem from "./ChatItem.vue";
import ChatSearch from "./ChatSearch.vue";
import { onMounted } from "vue";
import { useChatStore } from "../../../../store/useChatStore";

const store = useChatStore();

onMounted(() => {
  store.selectItem(store.data[6]);
});
</script>

<style scoped lang="scss">
.ChatList {
  width: 250px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
.ListBox {
  background: rgb(230, 229, 229);
  background-image: linear-gradient(
    to bottom right,
    rgb(235, 234, 233),
    rgb(240, 240, 240)
  );
  flex: 1;
  overflow-y: auto;
  box-sizing: border-box;

  border-right: 1px solid rgb(214, 214, 214);
}
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

<template>
  <div
    @click="itemClick(data)"
    :class="['ChatItem', { ChatItemSelected: data.isSelected }]"
  >
    <div class="avatar">
      <img :src="data.avatar" alt="" />
    </div>
    <div class="ChatInfo">
      <div class="row">
        <div class="FromName">{{ data.fromName }}</div>
        <div class="TimeName">{{ data.sendTime }}</div>
      </div>
      <div class="row">
        <div class="LastMsg">{{ data.lastMsg }}</div>
        <div class="subscribe" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ModelChat } from "../../../../../model/ModelChat";
import { useChatStore } from "../../../../store/useChatStore";
defineProps<{ data: ModelChat }>();
const store = useChatStore();
const itemClick = (item: ModelChat) => {
  store.selectItem(item);
};
</script>

<style scoped lang="scss">
.ChatItem {
  display: flex;
  height: 66px;
  box-sizing: border-box;
  cursor: pointer;
  &:hover {
    background: rgb(221, 219, 218);
  }
}
.ChatItemSelected {
  background: rgb(196, 196, 196);
  &:hover {
    background: rgb(196, 196, 196);
  }
}
.avatar {
  width: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 46px;
    height: 46px;
  }
}
.ChatInfo {
  flex: 1;
  height: 66px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.row {
  box-sizing: border-box;
  height: 28px;
  line-height: 28px;
  display: flex;
}
.FromName {
  flex: 1;
}
.TimeName {
  color: rgb(153, 153, 153);
  padding-right: 12px;
  font-size: 12px;
}
.LastMsg {
  color: rgb(153, 153, 153);
  flex: 1;
  font-size: 12px;
}
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<template>
  <div class="MessageBord">
    <BarTop />
    <div class="MessageList">{{ logInfo }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import BarTop from "../../../../components/BarTop.vue";
import { useChatStore } from "../../../../store/useChatStore";
let store = useChatStore();
let logInfo = ref("");
let curId = "";
//订阅Store内数据的变化
store.$subscribe((mutations, state) => {
  let item = state.data.find((v) => v.isSelected);
  let id = item?.id as string;
  if (id != curId) {
    logInfo.value = `现在应该加载ID为${item?.id}的聊天记录`;
    curId = id;
  }
});
</script>

<style scoped lang="scss">
.MessageBord {
  height: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
}
.MessageList {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgb(245, 245, 245);
}
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import { ModalBase } from "./ModalBase";

export class ModelMessage extends ModalBase {
  createTime?: number;
  receiveTime?: number;
  messageContent?: string;
  chatId?: string;
  fromName?: string;
  avatar?: string;
  // 是否为传入消息
  isInMsg?: boolean;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import { ModelChat } from "../../model/ModelChat";
import { ModelMessage } from "../../model/ModelMessage";
import { defineStore } from "pinia";
import { ref, Ref } from "vue";

export const useMessageStore = defineStore("message", () => {
  let data: Ref<ModelMessage[]> = ref([]);
  const msg1 = `醉里挑灯看剑，梦回吹角连营。八百里分麾下灸，五十弦翻塞外声。沙场秋点兵。马作的卢飞快，弓如霹雳弦惊。了却君王天下事，嬴得生前身后名。可怜白发生`;
  const msg2 = `怒发冲冠，凭栏处，潇潇雨歇。抬望眼，仰天长啸，壮怀激烈。 三十功名尘与土，八千里路云和月。莫等闲，白了少年头，空悲切！ 靖康耻，犹未雪；臣子恨，何时灭?驾长车，踏破贺兰山缺！ 壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头，收拾旧山河，朝天阙！`;
  const initData = (chat: ModelChat) => {
    let result = [];
    for (let i = 0; i < 10; i++) {
      let model = new ModelMessage();
      model.createTime = Date.now();
      model.isInMsg = i % 2 === 0;
      model.messageContent = model.isInMsg ? msg1 : msg2;
      model.fromName = model.isInMsg ? chat.fromName : "我";
      model.avatar = chat.avatar;
      model.chatId = chat.id;
      result.push(model);
    }
    data.value = result;
  };
  return { data, initData };
});