制作一个toolbar仪表盘#

前言#

本文为本人发布gitbook的书籍，但是因为gitbook一直没有被谷歌索引，我也没有办法提交给谷歌(无法证明所有权)。无奈只能把该本的章节逐步搬运过来，提高SEO。希望那些想学习logseq plugins 开发的同学们能直接通过搜索引擎看到此书。

原书本章地址：https://correctroad.gitbook.io/logseq-plugins-in-action/chapter-1/make-a-toolbar-dashboard

环境搭建#

我们使用logseq-plugin-template-react为项目基础。

git clone https://github.com/pengx17/logseq-plugin-template-react

现在我们有了一个手脚架了。这个项目是用pnpm而不是传统的npm或者yarn，pnpm的优点大家使用之后一定会感觉到。使用方法和npm一致，把npm换成pnpm就行。

pnpm install安装依赖

项目结构#

1
➜  logseq-plugin-template-react git:(master) tree -L 2
2
.
3
├── CHANGELOG.md
4
├── index.html
5
├── logo.svg
6
├── package.json
7
├── pnpm-lock.yaml
8
├── readme.md
9
├── release.config.js
10
├── renovate.json
11
├── src
12
│   ├── App.tsx # 页面代码写这，但是组件一般新建tsx。
13
│   ├── main.tsx # toolbar代码写这
14
│   └── utils.ts
15
├── tsconfig.json
16
└── vite.config.ts
17

18
1 directory, 13 files

注册toolbar#

在 main.tsx 删掉原本的logseq.provideUI和logseq.provideStyle。

1
logseq.provideStyle(css`
2
    div[data-injected-ui=${openIconName}-${pluginId}] {
3
      display: inline-flex;
4
      align-items: center;
5
      opacity: 0.55;
6
      font-weight: 500;
7
      padding: 0 5px;
8
      position: relative;
9
    }
10

11
    div[data-injected-ui=${openIconName}-${pluginId}]:hover {
12
      opacity: 0.9;
13
    }
14
  `);
15

16
  logseq.provideUI({
17
    key: openIconName,
18
    path: "#search",
19
    template: `
20
      <a data-on-click="show"
21
         style="opacity: .6; display: inline-flex;">⚙️</a>
22
    `,
23
  })

替换成：

1
  logseq.provideStyle(css`
2
    .${openIconName} {
3
      width: 18px;
4
      height: 18px;
5
      margin: 2px 0.4em 0 0.4em;
6
      background-color: blue;
7
      border-radius: 4px;
8
      border: 1px solid #eee;
9
    }
10
  `);
11

12
  logseq.App.registerUIItem("toolbar", {
13
    key: "show-plugin-open",
14
    template: `
15
    <a data-on-click="show">
16
      <div class="${openIconName}"></div>
17
    </a>
18
  `,
19
  });

logseq.App.registerUIItem让我们向toolbar注册组件。

代码部分来源于logseq-plugin-heatmap项目。

现在我们运行pnpm install && pnpm run build。在logseq中载入，就可以在toolbar上看到我们的UIItem了。

当我们点击该蓝色图标时，就是我们的页面了。

新建页面#

我们的目标是制做一个仪表盘。上面显示着logseq里的相关信息。在界面上参考logseq-plugin-heatmap

页面组件#

新建dashboard.tsx和dashboard.css。

dashborad.tsx

1
import React from "react";
2
import "./dashboard.css"
3

4
// eslint-disable-next-line react/display-name
5
export const Dashboard = React.forwardRef<HTMLDivElement>(({}, ref) => {
6
    return(
7
        <div className="dashboard-root">
8
            <div className="center">
9
                <h1>logseq borad!!!</h1>
10
            </div>
11
        </div>
12
    );
13
});

dashborad.css

1
.dashboard-root {
2
    height: 8vh;
3
    width: 16vh;
4
    border-radius: 5%;
5
    display: flex;
6
    background-color: #e5e7eb;
7
}
8

9
.center{
10
    display: flex;
11
    margin: auto;
12
}

修改App.tsx

1
import React, { useRef } from "react";
2
import { useAppVisible } from "./utils";
3
import { Dashboard } from "./dashboard";
4

5
function App() {
6
  const innerRef = useRef<HTMLDivElement>(null);
7
  const visible = useAppVisible();
8
  if (visible) {
9
    return (
10
      <main
11
        className="fixed inset-0 flex items-center justify-center"
12
        onClick={(e) => {
13
          if (!innerRef.current?.contains(e.target as any)) {
14
            window.logseq.hideMainUI();
15
          }
16
        }}
17
      >
18
        <Dashboard ref={innerRef}  />
19
      </main>
20
    );
21
  }
22
  return null;
23
}
24

25
export default App;

效果：

现在点击UIItem时就有一个小窗口出现在logseq正中央(因为items-center justify-center)。当我们点击logseq任意位置，都可以关闭该窗口。

调整页面位置#

如果我们想像logseq-plugin-heatmap一样，页面出现在toolbar正下面。我们就需要调整页面的位置。

修改dashboard.css

1
.dashboard-root {
2
    position: absolute;
3
    background-color: #e5e7eb;
4
    display: flex;
5
    width: 300px;
6
    height: 80px;
7
}
8

9
.center{
10
    display: flex;
11
    margin: auto;
12
}

修改dashboard.tsx

1
import React from "react";
2
import "./dashboard.css"
3
import { useWindowSize } from "react-use";
4

5
function useIconPosition() {
6
    const windowSize = useWindowSize();
7
    return React.useMemo(() => {
8
        const right = windowSize.width - 10;
9
        const bottom = 20;
10
        return { right, bottom };
11
    }, [windowSize]);
12
}
13

14
// eslint-disable-next-line react/display-name
15
export const Dashboard = React.forwardRef<HTMLDivElement>(({}, ref) => {
16
    const { bottom, right } = useIconPosition();
17
    console.log(bottom, right);
18
    return(
19
        <div
20
            ref={ref}
21
            className="dashboard-root"
22
             style={{ left: right - 400, top: bottom + 20 }}
23
            >
24
            <div className="center">
25
                <h1>logseq borad!!!</h1>
26
            </div>
27
        </div>
28
    );
29
});

其中useWindowSize是用来获取logseq的窗口位置的。而useIconPosition是我从logseq-plugin-heatmap里扒来的。

main.tsx中<main>的className修改为className="absolute inset-0"

现在的效果：

页数内容#

现在我们就要为我们的dashboard添加真正”有用”的功能了。

修改dashboard.tsx

1
export const Dashboard = React.forwardRef<HTMLDivElement>(({}, ref) => {
2
    const { bottom, right } = useIconPosition();
3

4
    const [pageCount, setPageCount] = React.useState(0);
5
    useEffect(()=>{
6
        window.logseq.Editor.getAllPages().then(pages=>{
7
            setPageCount(pages.length);
8
        })
9
    },[])
10

11
    return(
12
        <div
13
            ref={ref}
14
            className="dashboard-root"
15
             style={{ left: right - 400, top: bottom + 20 }}
16
            >
17
            <div className="center">
18
                <h1> 一共有 {pageCount} 个页面 </h1>
19
            </div>
20
        </div>
21
    );
22
});

现在当我们点成UIItem，我们就能看到我们一共拥有多少页了。