feat: add plugin settings page

build.ts

@@ -18,9 +18,9 @@ async function buildPlugin() {
         minify: isProduction,
         treeShaking: isProduction,
         format: "cjs",
-        entryPoints: [`src${s}main.ts`, `src${s}renderer.ts`],
+        entryPoints: [`src${s}main.ts`, `src${s}renderer.ts`, `src${s}settings.tsx`],
         outdir: "dist",
-        external: ["electron", "react", "react/jsx-runtime", "react-dom", "react-dom/client", "qqntim/main", "qqntim/renderer"],
+        external: ["electron", "react", "react/jsx-runtime", "react-dom", "react-dom/client", "qqntim/main", "qqntim/renderer", "qqntim-settings", "qqntim-settings/components"],
     });
     await fs.copy("publish", "dist");
 }

package.json

@@ -5,18 +5,22 @@
     "packageManager": "[email protected]",
     "license": "MIT",
     "scripts": {
-        "dev": "NODE_ENV=development tsc & TS_NODE_FILES=1 TS_NODE_TRANSPILE_ONLY=1 NODE_ENV=development ts-node ./build.ts",
-        "build": "NODE_ENV=production tsc && TS_NODE_FILES=1 TS_NODE_TRANSPILE_ONLY=1 NODE_ENV=production ts-node ./build.ts",
+        "dev": "TS_NODE_FILES=1 TS_NODE_TRANSPILE_ONLY=1 NODE_ENV=development ts-node ./build.ts",
+        "build": "TS_NODE_FILES=1 TS_NODE_TRANSPILE_ONLY=1 NODE_ENV=production ts-node ./build.ts",
+        "install:win": "powershell -ExecutionPolicy Unrestricted -File ./scripts/install.ps1",
+        "install:linux": "chmod +x ./scripts/install.sh && ./scripts/install.sh",
         "start:win": "powershell -ExecutionPolicy Unrestricted -File ./scripts/start.ps1",
         "start:linux": "chmod +x ./scripts/start.sh && ./scripts/start.sh",
-        "lint": "rome check .",
+        "lint": "tsc && rome check .",
         "lint:apply": "rome check . --apply",
         "lint:apply-unsafe": "rome check . --apply-unsafe",
         "format": "rome format . --write"
     },
     "devDependencies": {
-        "@flysoftbeta/qqntim-typings": "^2.0.1",
+        "@flysoftbeta/qqntim-typings": "^3.0.0",
         "@types/node": "^20.4.2",
+        "@types/react": "^18.2.15",
+        "@types/react-dom": "^18.2.7",
         "@yarnpkg/sdks": "^3.0.0-rc.48",
         "esbuild": "^0.18.12",
         "fs-extra": "^11.1.1",

publish/qqntim.json

@@ -14,6 +14,11 @@
             "type": "renderer",
             "stylesheet": "style.css",
             "script": "renderer.js"
+        },
+        {
+            "type": "renderer",
+            "page": ["settings"],
+            "script": "settings.js"
         }
     ]
 }

scripts/install.ps1

@@ -0,0 +1,12 @@
+$ErrorActionPreference = "Stop"
+
+Set-Location ((Split-Path -Parent $MyInvocation.MyCommand.Definition) + "..")
+
+if ($null -eq $env:QQNTIM_HOME) {
+    $env:QQNTIM_HOME = "$UserProfile\.qqntim"
+}
+
+$PluginId = (node --eval 'console.log(require("./publish/qqntim.json").id)')
+$PluginDir = "$env:QQNTIM_HOME\plugins\$PluginId"
+
+Copy-Item ".\dist" $PluginDir -Recurse -Force

scripts/install.sh

@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+
+cd "$( dirname "${BASH_SOURCE[0]}" )/.."
+
+[ ! $QQNTIM_HOME ] && export QQNTIM_HOME="$HOME/.local/share/QQNTim"
+
+plugin_id=$(node --eval 'console.log(require("./publish/qqntim.json").id)')
+plugin_dir="$QQNTIM_HOME/plugins/$plugin_id"
+
+[ -d $plugin_dir ] && rm -rf "$plugin_dir"
+cp -rf ./dist "$plugin_dir"

scripts/start.ps1

@@ -1,15 +1,6 @@
-$ErrorActionPreference = "Stop"
+$ErrorActionPreference = "Stop"
 
-Set-Location (Split-Path -Parent $MyInvocation.MyCommand.Definition)
-
-if ($null -eq $env:QQNTIM_HOME) {
-    $env:QQNTIM_HOME = "$UserProfile\.qqntim"
-}
-
-$PluginId = (node --eval 'console.log(require("./publish/qqntim.json").id)')
-$PluginDir = "$env:QQNTIM_HOME\plugins\$PluginId"
-
-Copy-Item ".\dist" $PluginDir -Recurse -Force
+Set-Location ((Split-Path -Parent $MyInvocation.MyCommand.Definition) + "..")
 
 foreach ($RegistryPath in @("HKLM:\Software\WOW6432Node\Microsoft\Windows\CurrentVersion\Uninstall\*", "HKLM:\Software\Microsoft\Windows\CurrentVersion\Uninstall\*")) {
     try {

scripts/start.sh

@@ -2,13 +2,4 @@
 
 cd "$( dirname "${BASH_SOURCE[0]}" )/.."
 
-[ ! $QQNTIM_HOME ] && export QQNTIM_HOME="$HOME/.local/share/QQNTim"
-
-plugin_id=$(node --eval 'console.log(require("./publish/qqntim.json").id)')
-plugin_dir="$QQNTIM_HOME/plugins/$plugin_id"
-
-[ -d $plugin_dir ] && rm -rf "$plugin_dir"
-cp -rf ./dist "$plugin_dir"
-echo "环境准备完毕。"
-
 qq 2>&1 | sed -e '/NODE_TLS_REJECT_UNAUTHORIZED/d' -e '/Gtk-Message/d' -e '/to show where the warning was created/d' -e '/gbm_wrapper\.cc/d' -e '/node_bindings\.cc/d' -e '/UnhandledPromiseRejectionWarning/d' -e '/\[BuglyManager\.cpp\]/d' -e '/\[NativeCrashHandler\.cpp\]/d' -e '/\[BuglyService\.cpp\]/d' -e '/\[HotUpdater\]/d' -e '/ERROR:CONSOLE/d'

src/config.ts

@@ -0,0 +1,21 @@
+export const id = "my-template-plugin" as const;
+
+export const defaults: PluginConfig = {
+    switchConfigItem: false,
+    anotherSwitchConfigItem: false,
+    inputConfigItem: "默认值",
+    dropdownConfigItem: "A",
+};
+export function getPluginConfig(config: Config | undefined) {
+    return Object.assign({}, defaults, config?.[id] || {});
+}
+
+export interface PluginConfig {
+    switchConfigItem: boolean;
+    anotherSwitchConfigItem: boolean;
+    inputConfigItem: string;
+    dropdownConfigItem: "A" | "B" | "C";
+}
+export type Config = {
+    [X in typeof id]?: Partial<PluginConfig>;
+};

src/main.ts

@@ -1,7 +1,10 @@
+import { getPluginConfig } from "./config";
 import * as qqntim from "qqntim/main";
 
 export default class Entry implements QQNTim.Entry.Main {
     constructor() {
+        const config = getPluginConfig(qqntim.env.config.plugins.config);
         console.log("[Template] Hello world!", qqntim);
+        console.log("[Template] 当前插件配置：", config);
     }
 }

src/renderer.ts

@@ -1,7 +1,10 @@
+import { getPluginConfig } from "./config";
 import * as qqntim from "qqntim/renderer";
 
 export default class Entry implements QQNTim.Entry.Renderer {
     constructor() {
+        const config = getPluginConfig(qqntim.env.config.plugins.config);
         console.log("[Template] Hello world!", qqntim);
+        console.log("[Template] 当前插件配置：", config);
     }
 }

src/settings.tsx

@@ -0,0 +1,51 @@
+import { usePluginConfig } from "./utils/hooks";
+import { defineSettingsPanels } from "qqntim-settings";
+import { Dropdown, Input, SettingsBox, SettingsBoxItem, SettingsSection, Switch } from "qqntim-settings/components";
+import { env } from "qqntim/renderer";
+import { useMemo } from "react";
+import { getPluginConfig } from "./config";
+
+export default class Entry implements QQNTim.Entry.Renderer {
+    constructor() {
+        // 如果不需要设置界面，将下一行注释掉即可；如果需要在设置项目旁边加一个小图标，请将 `undefined` 改为一段 HTML 代码（可以是 `<svg>`, `<img>` 等等）。
+        defineSettingsPanels(["模板插件设置", SettingsPanel, undefined]);
+    }
+}
+
+function SettingsPanel({ config: _config, setConfig: _setConfig }: QQNTim.Settings.PanelProps) {
+    const [pluginConfig, setPluginConfig] = usePluginConfig(_config, _setConfig);
+    const currentPluginConfigString = useMemo(() => JSON.stringify(getPluginConfig(env.config.plugins.config)), []);
+
+    return (
+        <>
+            <SettingsSection title="插件设置">
+                <SettingsBox>
+                    <SettingsBoxItem title="当前生效的插件配置：" description={[currentPluginConfigString]} />
+                    <SettingsBoxItem title="开关" description={["这是一个开关。", `当前状态为：${pluginConfig.switchConfigItem ? "开" : "关"}`]}>
+                        <Switch checked={pluginConfig.switchConfigItem} onToggle={(state) => setPluginConfig("switchConfigItem", state)} />
+                    </SettingsBoxItem>
+                    {pluginConfig.switchConfigItem && (
+                        <SettingsBoxItem title="另一个开关" description={["这是另一个开关。", `当前状态为：${pluginConfig.anotherSwitchConfigItem ? "开" : "关"}`]}>
+                            <Switch checked={pluginConfig.anotherSwitchConfigItem} onToggle={(state) => setPluginConfig("anotherSwitchConfigItem", state)} />
+                        </SettingsBoxItem>
+                    )}
+                    <SettingsBoxItem title="下拉菜单" description={["这是一个下拉菜单。", `当前状态为：${pluginConfig.dropdownConfigItem}`]}>
+                        <Dropdown
+                            items={[
+                                ["A" as const, "我是 A 选项"],
+                                ["B" as const, "我是 B 选项"],
+                                ["C" as const, "我是 C 选项"],
+                            ]}
+                            selected={pluginConfig.dropdownConfigItem}
+                            onChange={(state) => setPluginConfig("dropdownConfigItem", state)}
+                            width="150px"
+                        />
+                    </SettingsBoxItem>
+                    <SettingsBoxItem title="输入框" description={["这是一个输入框。", `当前状态为：${pluginConfig.inputConfigItem}`]} isLast={true}>
+                        <Input value={pluginConfig.inputConfigItem} onChange={(state) => setPluginConfig("inputConfigItem", state)} />
+                    </SettingsBoxItem>
+                </SettingsBox>
+            </SettingsSection>
+        </>
+    );
+}

src/utils/hooks.ts

@@ -0,0 +1,25 @@
+import { Config, PluginConfig, getPluginConfig, id } from "../config";
+import { useEffect, useState } from "react";
+
+export function usePluginConfig(config: Record<string, object>, setConfig: React.Dispatch<React.SetStateAction<Record<string, object>>>) {
+    const [pluginConfig, _setPluginConfig] = useState<PluginConfig>(getPluginConfig(config));
+
+    useEffect(
+        () =>
+            setConfig((prev) => {
+                return { ...prev, [id]: pluginConfig };
+            }),
+        [pluginConfig],
+    );
+
+    const setPluginConfig = function <T extends keyof PluginConfig>(key: T, value: PluginConfig[T]) {
+        _setPluginConfig((prev) => {
+            return {
+                ...prev,
+                [key]: value,
+            };
+        });
+    };
+
+    return [pluginConfig, setPluginConfig] as const;
+}

yarn.lock

@@ -1283,6 +1283,8 @@ __metadata:
   dependencies:
     "@flysoftbeta/qqntim-typings": ^3.0.0
     "@types/node": ^20.4.2
+    "@types/react": ^18.2.15
+    "@types/react-dom": ^18.2.7
     "@yarnpkg/sdks": ^3.0.0-rc.48
     esbuild: ^0.18.12
     fs-extra: ^11.1.1