【Electron】Electron学习笔记

墨苒孤

于 2024-08-27 20:30:00 发布

阅读量498

点赞数 6

分类专栏： Vue 文章标签： electron 学习笔记

本文链接：https://blog.csdn.net/qq_43322436/article/details/141564505

版权

Vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

1.什么是 Electron？

Electron 是一个跨平台桌面应用开发框架，开发者可以利用 HTML、CSS、JavaScript 等Web技术来构建桌面应用程序。它本质上是结合了 Chromium 和 Node.js，目前广泛用于桌面应用程序开发。例如，许多桌面应用都采用了 Electron 技术。

Electron 官网https://www.electronjs.org/

以下这些都是使用了 Electron 技术开发的桌面应用程序的例子：

Visual Studio Code: 一个流行的开源代码编辑器，由 Microsoft 开发。
GitHub Desktop: GitHub 官方提供的桌面客户端，用于管理 Git 代码仓库。
1Password: 一个密码管理工具，提供安全的密码保存和管理功能。
新版 QQ: QQ 的桌面应用程序，使用 Electron 实现跨平台的桌面体验。

2. Electron 的优势

可跨平台：同一套代码可以构建出能在：Windows、macOS、Linux 上运行的应用程序。
上手容易：使用 Web 技术就可以轻松完成开发桌面应用程序。
底层权限：允许应用程序访问文件系统、操作系统等底层功能，从而实现复杂的系统交互。
社区支持：拥有一个庞大且活跃的社区，开发者可以轻松找到文档、教程和开源库。(额，这个国内教程很少，不是很赞同~)

3. Electron 技术架构

3.1. 技术架构

在这里插入图片描述
Electron = Chromium + Node.js + Native API
这个公式表明了 Electron 框架的核心组成部分：

Chromium: 提供了现代的 Web 渲染引擎和许多与浏览器相关的功能，用于渲染和显示应用程序的用户界面。
Node.js: 提供了访问操作系统和文件系统等底层功能的能力，以及在后端执行 JavaScript 代码的环境。
Native API: 允许 Electron 应用程序直接访问操作系统的原生功能，例如文件系统、系统通知等，从而实现更复杂和更深入的系统交互和集成。

3.2. 进程模型

在这里插入图片描述

操作系统层
Windows, Linux, Mac：这三个操作系统是应用程序可以运行的环境。它们提供了底层的系统资源和 API 接口。
主进程 (Main Process)
Main：这是应用程序的核心部分，通常是一个 Node.js 进程。它管理应用的生命周期、窗口创建、以及与渲染进程的通信。
渲染进程 (Render Process)
Render：每个渲染进程负责展示用户界面。它运行在 Chromium 中，支持 HTML、CSS 和 JavaScript。每个渲染进程与主进程通过 IPC（进程间通信）进行通信。
IPC (Inter-Process Communication)
IPC：这是主进程与渲染进程之间的通信机制。通过 IPC，主进程可以发送消息给渲染进程，反之亦然。这种机制使得各部分能够独立运行，同时保持数据和命令的流动。
Chromium
Chromium：这是一个开源浏览器项目，渲染进程基于 Chromium 引擎，负责处理网页内容的渲染。

4. 搭建一个工程(实战Demo)

首先创建一个文件夹并初始化 npm 包。

mkdir my-electron-app && cd my-electron-app
npm init

package.json 修改为如下：

 {
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "RanGuMo",
  "description": "this is a electron demo",
  "license": "ISC"
}

有几条规则需要遵循：

entry point 应为 main.js.(electron 官方推荐叫mian.js,你也可以用其他名字)
author 与 description 可为任意值，但对于应用打包是必填项。

安装 electron 作为开发依赖。

npm install --save-dev electron

或者

npm install -D electron

在 main.js 中编写代码，创建一个基本窗口，内容如下：

// main.js运行在应用的主进程上，无法访问web相关API，主要负责：控制生命周期、显示界面
// 控制渲染进程等其他操作。

const { app, BrowserWindow } = require("electron");
const path = require("path");

// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let mainWindow;

// 1.创建浏览器窗口。
function createWindow() {
  // 1.1.创建浏览器窗口。
  mainWindow = new BrowserWindow({
    width: 800, // 宽度
    height: 600, // 高度
    autoHideMenuBar: true, // 自动隐藏菜单栏（默认是false）
    alwysOnTop: true, // 窗口置顶(类似z-index:9999，永远置于最高层) （默认是false）
    x: 0, // 窗口左上角x坐标
    y: 0, // 窗口左上角y坐标
  });
  // 1.2.加载一个远程的页面
  mainWindow.loadURL("http://www.baidu.com");
}
  
  
  // 1.3.当 window 被加载，就执行创建窗口这个函数
  app.on("ready", () => {
    createWindow();
  });

  // 1.4.当 window 被关闭，这个事件会被触发。
  app.on("closed", function () {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 与此同时，你应该删除相应的元素。
    mainWindow = null;
  });

关于 BrowserWindow 的更多配置项，请参考：BrowserWindow实例属性

启动应用，查看效果

npm start

在这里插入图片描述

5. 加载本地页面

创建 pages/index.html 编写内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
<body>
    <h1>hello world</h1>
</body>
</html>

修改 mian.js 加载本地页面

  // 1.2.加载一个远程的页面
  // mainWindow.loadURL("http://www.baidu.com");
  // 1.2.加载一个本地的页面  
  mainWindow.loadFile('./pages/index.html')

Ctrl+Shift+i进入控制台,此时开发者工具会报出一个安全警告，需要修改 index.html ，配置 CSP(ContentSecurity-Policy)(内容安全策略)

在这里插入图片描述

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">

上述配置的说明

default-src 'self'
default-src:配置加载策略，适用于所有未在其它指令中明确指定的资源类型self :仅允许从同源的资源加载，禁止从不受信任的外部来源加载，提高安全性。
style-src 'self'
unsafe-inlinestyle-src:指定样式表(CSS)的加载策略。
self :仅允许从同源的资源加载，禁止从不受信任的外部来源加载，提高安全性。
unsafe-inline :允许在HTML文档内使用内联样式。
img-src 'self' data:
img-src :指定图像资源的加载策略。
self :表示仅允许从同源加载图像,
data::允许使用 data:URI 来嵌入图像。这种URI模式允许将图像数据直接嵌入到HTML或CSS中，而不是通过外部链接引用。
关于 CSP 的详细说明请参考:MDN-Content-Security-Policy、Electron Security

6. 完善窗口行为

1.Windows 和 Linux 平台窗口特点是:关闭所有窗口时退出应用

// 1.5.当所有窗口都关闭时，自动退出应用，除非在 macOS 上
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

mac 应用即使在没有打开任何窗口的情况下也继续运行，并且在没有窗口可用的情况下激活应用时会打开新的窗口。

// 1.3.当 window 被加载，就执行创建窗口这个函数
app.on("ready", () => {
  createWindow();
  // 1.6.在 mac上，点击 Dock 图标且没有其他窗口打开时，重新创建窗口
  // 当应用被激活时  
  app.on("activate", () => {
    // 如果没有窗口打开，则创建一个窗口
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

7. 配置自动重启

安装 Nodemon

npm i nodemon -D

修改 package.json 启动的命令

 "scripts": {
    "start": "nodemon --exec electron ."
  },

新建 nodemon.json文件并配置规则

{
  "ignore": [
    "node_modules",
    "dist"
  ],
  "restartable": "r",
  "watch": ["*.*"],
  "ext": "html,js,css"
}

8.主进程与渲染进程（重点）

在 Electron 中主要控制两类进程: 主进程、渲染器进程。

主进程
每个 Electron 应用都有一个单一的主进程，作为应用程序的入口点。主进程在 Node.js 环境中运行，它具有 require 模块和使用所有 Node.js API 的能力，主进程的核心就是:使用BrowserWindow 来创建和管理窗口。
渲染进程
每个 BrowserWindow 实例都对应一个单独的渲染器进程，运行在渲染器进程中的代码，必须遵守网页标准，这也就意味着:渲染器进程无权直接访问require或使用任何 Node.js 的API。

问题产生:处于渲染器进程的用户界面，该怎样才与 Node.js 和 Electron 的原生桌面功能进行交互呢? 通过 Preload 脚本

9.Preload 脚本

预加载(Preload)脚本是运行在渲染进程中的，但它是在网页内容加载之前执行的，这意味着它具有比普通渲染器代码更高的权限，可以访问 Node.js 的 API，同时又可以与网页内容进行安全的交互。
简单说:它是 Node.js 和 Web API 的桥梁，Preload 脚本可以安全地将部分 Node.js 功能暴露给网页，从而减少安全风险。

需求:点击按钮后，在页面呈现当前电脑的 Node 版本。

具体文件结构与编码如下:

在根目录创建预加载脚本 preload.js ，内容如下：

const { contextBridge } = require('electron');

// 暴露数据给渲染进程
contextBridge.exposeInMainWorld('myNodeVersion', {
    version: process.version
})

在主线程中引入 preload.js

   const path = require("path");
   // 1.1.创建浏览器窗口。
   mainWindow = new BrowserWindow({
    width: 800, // 宽度
    height: 600, // 高度
    autoHideMenuBar: true, // 自动隐藏菜单栏（默认是false）
    alwysOnTop: true, // 窗口置顶(类似z-index:9999，永远置于最高层) （默认是false）
    x: 0, // 窗口左上角x坐标
    y: 0, // 窗口左上角y坐标
    webPreferences:{
      preload: path.join(__dirname, "./preload.js")
    }
  });

在 html 页面中编写对应按钮，并创建专门编写网页脚本的 render.js ，随后引入。

index.html 内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 内容安全策略 -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">
    <title>index</title>
</head>
<body>
    <h1>hello world！！</h1>
    <button id="btn">获取Node版本号</button>

    <script type="text/javascript" src="./render.js"></script>
</body>
</html>

在渲染进程中使用 version

render.js 内容如下：

btn.addEventListener('click', () => {
    console.log(myNodeVersion.version)
    document.body.innerHTML += `<h2>${myNodeVersion.version}</h2>`
})

整体文件结构如下:
效果演示：

10.进程通信(IPC)（重点）

值得注意的是:
上文中的 preload.js ，无法使用全部Node.js 的 API，比如:不能使用 Node 中的 fs 模块，但主进程(main.js )是可以的，这时就需要进程通信了。简单说:要让 preload.js 通知 main.js 去调用 fs 模块去干活。

关于 Electron 进程通信，我们要知道:

IPC 全称为:InterProcessCommunication，即:进程通信。
IPC 是 Electron 中最为核心的内容，它是从UI 调用原生 API 的唯一方法!
Electron 中，主要使用 ipcMain 和 ipcRenderer 来定义“通道”，进行进程通信。

10.1.渲染进程==>主进程(单向)

概述:在渲染器进程中 ipcRenderer.send 发送消息，在主进程中使用 ipcMain.on 接收消息。常用于:在 Web 中调用主进程的 API，例如下面的这个需求:

需求:点击按钮后，在用户的 D盘创建一个 hello.txt 文件，文件内容来自于用户输入。

index.html页面中添加相关元素，render.js 中添加对应的点击事件

index.html内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 内容安全策略 -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">
    <title>index</title>
</head>
<body>
    <h1>hello world！！</h1>
    <button id="btn">获取Node版本号</button>
    <br>
    <input type="text" id="content">
    <button id="btn2">在用户的D盘创建一个hello.txt</button>
    <script type="text/javascript" src="./render.js"></script>
</body>
</html>

render.js 内容：

// 可以不用写const btn = document.getElementById('btn')
btn.addEventListener("click", () => {
  console.log(myNodeVersion.version);
  document.body.innerHTML += `<h2>${myNodeVersion.version}</h2>`;
});

const btn2 = document.getElementById("btn2");
const content = document.getElementById("content");
btn2.addEventListener("click", () => {
  console.log(content.value);
  myAPI.saveFile(content.value);
});

preload.js 中使用 ipcRenderer.send('信道',参数)发送消息，与主进程通信。

preload.js 内容：

const { contextBridge, ipcRenderer } = require('electron');

// 暴露数据给渲染进程
contextBridge.exposeInMainWorld('myNodeVersion', {
    version: process.version
})

contextBridge.exposeInMainWorld('myAPI', {
   saveFile(str){
      //渲染进程给主进程发送消息事件
      ipcRenderer.send('create-file', str)
   }
})

主进程中，在加载页面之前，使用 ipcMain.on('信道”,回调)配置对应回调函数，接收消息。

main.js 内容：

// 引入：app（整个应用）、BrowserWindow（用于创建窗口）、ipcMain（用于进程通信）
const { app, BrowserWindow, ipcMain } = require('electron');
// 引入path模块
const path = require('path');
// 引入fs模块
const fs = require('fs');
// 2.创建文件
function createFile(event,data) {
  fs.writeFileSync('D:/hello.txt',data)
}


// 1.创建浏览器窗口。
function createWindow() {
  // 1.1.创建浏览器窗口。
  mainWindow = new BrowserWindow({
    width: 800, // 宽度
    height: 600, // 高度
    autoHideMenuBar: true, // 自动隐藏菜单栏（默认是false）
    alwysOnTop: true, // 窗口置顶(类似z-index:9999，永远置于最高层) （默认是false）
    x: 0, // 窗口左上角x坐标
    y: 0, // 窗口左上角y坐标
    webPreferences:{
      preload: path.join(__dirname, "./preload.js")
    }
  });
  // 2.1.主进程注册对应的事件
  ipcMain.on("create-file",createFile)

  // 1.2.加载一个本地的页面
  mainWindow.loadFile("./pages/index.html");
}

完整的main.js 如下：

// main.js运行在应用的主进程上，无法访问web相关API，主要负责：控制生命周期、显示界面
// 控制渲染进程等其他操作。

// 引入：app（整个应用）、BrowserWindow（用于创建窗口）、ipcMain（用于进程通信）
const { app, BrowserWindow, ipcMain } = require('electron');
// 引入path模块
const path = require('path');
// 引入fs模块
const fs = require('fs');

// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let mainWindow;

// 2.创建文件
function createFile(event,data) {
  fs.writeFileSync('D:/hello.txt',data)
}


// 1.创建浏览器窗口。
function createWindow() {
  // 1.1.创建浏览器窗口。
  mainWindow = new BrowserWindow({
    width: 800, // 宽度
    height: 600, // 高度
    autoHideMenuBar: true, // 自动隐藏菜单栏（默认是false）
    alwysOnTop: true, // 窗口置顶(类似z-index:9999，永远置于最高层) （默认是false）
    x: 0, // 窗口左上角x坐标
    y: 0, // 窗口左上角y坐标
    webPreferences:{
      preload: path.join(__dirname, "./preload.js")
    }
  });
  // 2.1.主进程注册对应的事件
  ipcMain.on("create-file",createFile)

  // 1.2.加载一个远程的页面
  // mainWindow.loadURL("http://www.baidu.com");
  // 1.2.加载一个本地的页面
  mainWindow.loadFile("./pages/index.html");
}

// 1.3.当 window 被加载，就执行创建窗口这个函数
app.on("ready", () => {
  createWindow();
  // 1.6.在 mac上，点击 Dock 图标且没有其他窗口打开时，重新创建窗口
  // 当应用被激活时  
  app.on("activate", () => {
    // 如果没有窗口打开，则创建一个窗口
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

// 1.4.当 window 被关闭，这个事件会被触发。
app.on("closed", function () {
  // 取消引用 window 对象，如果你的应用支持多窗口的话，
  // 通常会把多个 window 对象存放在一个数组里面，
  // 与此同时，你应该删除相应的元素。
  mainWindow = null;
});

// 1.5.当所有窗口都关闭时，自动退出应用，除非在 macOS 上
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

运行项目，即可实现效果。

10.2.渲染进程<==>主进程(双向)

概述:渲染进程通过ipcRenderer.invoke 发送消息，主进程使用 ipcMain.handle 接收并处理消息。
备注:ipcRender.invoke 的返回值是 Promise 实例。
常用于:从渲染器进程调用主进程方法并等待结果，例如下面的这个需求:

需求:点击按钮从 D盘读取 hello.txt 中的内容，并将结果呈现在页面上。

页面中添加相关元素，render.js 中添加对应脚本

index.html

<button id="btn3">读取⽤户D盘的hello.txt</button>

render.js

const btn3 = document.getElementById("btn3");
btn3.addEventListener("click", async () => {
  let data = await myAPI.readFile();
  document.body.innerHTML += `<h2>${data}</h2>`;
});

preload.js 中使用 ipcRenderer.invoke('信道',参数)发送消息，与主进程通信。

preload.js

const { contextBridge, ipcRenderer } = require("electron");
contextBridge.exposeInMainWorld("myAPI", {
  saveFile(str) {
    //渲染进程给主进程发送消息事件,通过 IPC 发送 'file-save' 事件并传递数据
    ipcRenderer.send("create-file", str);
  },
  // 定义读取文件的方法，通过 IPC 调用 'file-read' 事件并返回 Promise 结果
  readFile: () => {
    return ipcRenderer.invoke("file-read");
  },
});

主进程中，在加载页面之前，使用 ipcMain.handle('信道',回调)接收消息，并配置回调函数。

main.js

// 3.读取文件,读取指定文件内容并返回字符串格式的结果
function readFile() {
  const res = fs.readFileSync('D:/hello.txt').toString();
  return res;
}

// 1.创建浏览器窗口。
function createWindow() {
  // 1.1.创建浏览器窗口。
  mainWindow = new BrowserWindow({
    width: 800, // 宽度
    height: 600, // 高度
    autoHideMenuBar: true, // 自动隐藏菜单栏（默认是false）
    alwysOnTop: true, // 窗口置顶(类似z-index:9999，永远置于最高层) （默认是false）
    x: 0, // 窗口左上角x坐标
    y: 0, // 窗口左上角y坐标
    webPreferences:{
      preload: path.join(__dirname, "./preload.js")
    }
  });
  // 2.1.主进程注册对应的事件
  ipcMain.on("create-file",createFile)

  // 3.1.处理 'file-read' IPC 事件，调用 readFile 函数处理，并返回结果
  ipcMain.handle('file-read', readFile);

  // 1.2.加载一个远程的页面
  // mainWindow.loadURL("http://www.baidu.com");
  // 1.2.加载一个本地的页面
  mainWindow.loadFile("./pages/index.html");
}

10.3.主进程到=>渲染进程

概述:主进程使用 win.webContents.send 发送消息，渲染进程通过ipcRenderer.on 处理消息
常用于:从主进程主动发送消息给渲染进程，例如下面的这个需求:

需求:应用加载 6秒钟后，主动给渲染进程发送一个消息，内容是:你好啊!

页面中添加相关元素，render.js 中添加对应脚本

render.js

window.onload = () => {
  myAPI.getMessage(logMessage)
};

function logMessage(event,str){
    console.log(event,str)
    alert(str)
}

preload.js 中使用 ipcRenderer.on ('信道',回调)接收消息，并配置回调函数。

preload.js

contextBridge.exposeInMainWorld("myAPI", {
  getMessage:(callback)=>{
    return ipcRenderer.on("message",callback)
  }
});

主进程中，在合适的时候，使用 mainWindow.webcontents.send('信道',数据)发送消息。

main.js

// 1.创建浏览器窗口。
function createWindow() {
  // 1.1.创建浏览器窗口。
  mainWindow = new BrowserWindow({
    width: 800, // 宽度
    height: 600, // 高度
    autoHideMenuBar: true, // 自动隐藏菜单栏（默认是false）
    alwysOnTop: true, // 窗口置顶(类似z-index:9999，永远置于最高层) （默认是false）
    x: 0, // 窗口左上角x坐标
    y: 0, // 窗口左上角y坐标
    webPreferences: {
      preload: path.join(__dirname, "./preload.js"),
    },
  });
  // 2.1.主进程注册对应的事件
  ipcMain.on("create-file", createFile);

  // 3.1.处理 'file-read' IPC 事件，调用 readFile 函数处理，并返回结果
  ipcMain.handle("file-read", readFile);

  // 1.2.加载一个远程的页面
  // mainWindow.loadURL("http://www.baidu.com");
  // 1.2.加载一个本地的页面
  mainWindow.loadFile("./pages/index.html");

  // 创建⼀个定时器
  setTimeout(() => {
    mainWindow.webContents.send("message", "你好啊！");
  }, 6000);
}

11.打包Electron应用

使用 electron-builder 打包应用

先安装 electron-builder :

npm install electron-builder -D

在 package.json 中进行相关配置，具体配置如下

在这里插入图片描述

备注: package.json 文件不支持注释，使用时请去掉所有注释.

package.json内容如下：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "nodemon --exec electron .",
    "build": "electron-builder" 
  },
  "build": {
    "appId": "com.electron.demo", 
    "win": {
      "icon":"./logo.ico",
      "target": [
        {
          "target": "nsis",  
          "arch": ["x64"]  
        }
      ]
    },
    "nsis": {
      "oneClick": false, 
      "perMachine": true,
      "allowToChangeInstallationDirectory": true
    }
  },
  "author": "RanGuMo",
  "description": "this is a electron demo",
  "license": "ISC",
  "devDependencies": {
    "electron": "^32.0.1",
    "electron-builder": "^24.13.3",
    "nodemon": "^3.1.4"
  }
}

执行打包命令

npm run build

打包失败的话，检查一下当前项目所在路径是不是全英文路径。可以看一下这篇文章：http://t.csdnimg.cn/xV1ex

12.electron-vite

electron-vite 是一个新型构建工具，旨在为 Electron 提供更快、更精简的开发体验。它主要由五部分组成：

一套构建指令，它使用 Vite 打包你的代码，并且它能够处理 Electron 的独特环境，包括 Node.js 和浏览器环境。
集中配置主进程、渲染器和预加载脚本的 Vite 配置，并针对 Electron 的独特环境进行预配置。
为渲染器提供快速模块热替换（HMR）支持，为主进程和预加载脚本提供热重载支持，极大地提高了开发效率。
优化 Electron 主进程资源处理。
使用 V8 字节码保护源代码。

electron-vite 快速、简单且功能强大，旨在开箱即用。

13.项目源码

github 地址:https://github.com/RanGuMo/my-electron-app.git

墨苒孤

关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
【Electron】Electron学习笔记

Electron是一个跨平台桌面应用开发框架，开发者可以利用HTMLCSSJavaScript等Web技术来构建桌面应用程序。它本质上是结合了Chromium和Node.js，目前广泛用于桌面应用程序开发。例如，许多桌面应用都采用了Electron技术。Electron官网以下这些都是使用了Electron: 一个流行的开源代码编辑器，由Microsoft开发。GitHub官方提供的桌面客户端，用于管理Git代码仓库。1Password: 一个密码管理工具，提供安全的密码保存和管理功能。新版QQ。
复制链接

扫一扫

专栏目录