插件开发求助丨安卓端如何通过本地 URL 返回动态 svg

20241027 更新

经 D 大指导，给思源笔记添加了一个 api，/api/icon/getDynamicIcon，可以通过 api/icon/getDynamicIcon?color=red&lang=zh_CN&date=2024-10-27 直接调用动态图标

见 ✨ Add internal kernel API `/api/icon` by Achuan-2 · Pull Request #12939 · siyuan-note/siyuan

需求

想参考 wolai 的动态图标：https://www.wolai.com/wolai/2tkzTE5w7invgSTqKjSwL7

在思源也开发一个动态图标插件，目的是可以直接本地生成动态图标，而不依赖网络（wolai 说不准哪天就不让非会员用这个功能了）

目前已经在 windows 端，基本上把 wolai 的动态图标都抄了一遍，具体见插件开发 idea 丨模仿 wolai 的动态日历图标 - 链滴

问题

但是目前的问题是，我在安卓上没法用，安卓不方便调试，不知道出了什么问题

我采取的方案是参考插件 taotaochen86/siyuan-plugin-jsrunner，是写了一个 http 服务器，想问问大佬们有什么办法，能解决这个问题，让各端都可以使用链接来返回动态 svg。

下面是我目前的插件代码

GitHub - Achuan-2/siyuan-plugin-dynamic-calendar-icon: 思源笔记动态图片设计 思源笔记动态图片设计. Contribute to Achuan-2/siyuan-plugin-dynamic-calendar-icon development by creating an account on GitHub. GitHub - github.com

server.ts

const http = globalThis.require("http");
// src/server.ts


interface ColorScheme {
    primary: string;
    secondary: string;
}

export class CalendarServer {
    private server: any;
    private port: number;
    private colorSchemes: { [key: string]: ColorScheme } = {
        red: { primary: "#cf5659", secondary: "#f3aab9" },
        blue: { primary: "#5AA9E6", secondary: "#3A79B6" },
        yellow: { primary: "#DBAD6A", secondary: "#AB7D3A" },
        green: { primary: "#5FBB97", secondary: "#2F8867" },
        purple: { primary: "#E099FF", secondary: "#BE66CF" },
        pink: { primary: "#EA5D97", secondary: "#CA3D77" },
        fuchsia: { primary: "#93627F", secondary: "#633241" },
        grey: { primary: "#565557", secondary: "#767577" }
    };

    constructor(port: number) {
        this.port = port;
    }

    public start(): void {
        if (!this.server) {
            this.server = http.createServer((req: any, res: any) => {
                const url = new URL(req.url, `http://localhost:${this.port}`);
                const params = {
                    color: url.searchParams.get('color') || 'red',
                    date: url.searchParams.get('date'),
                    locale: url.searchParams.get('locale') || 'cn',
                    type: url.searchParams.get('type') || '1'
                };

                const svg = this.generateCalendarSVG(params);
                res.writeHead(200, {
                    'Content-Type': 'image/svg+xml',
                    'Cache-Control': 'no-cache',
                    'Pragma': 'no-cache'
                });
                res.end(svg);
            });

            this.server.listen(this.port);
            console.log(`Calendar SVG server started on port ${this.port}`);
        }
    }

    public stop(): void {
        if (this.server) {
            this.server.close();
            this.server = null;
            console.log(`Calendar SVG server stopped`);
        }
    }
​

index.ts

import { Plugin } from "siyuan";
import "./index.scss";
import { CalendarServer } from "./server";

export default class CalendarSVGPlugin extends Plugin {
    private server: CalendarServer = new CalendarServer(45678);

    onload() {

        // 启动服务器
        this.server.start();
    }

    onunload() {
        // 关闭服务器
        this.server.stop();
    }
}

​