diff --git a/src/app.js b/src/app.js index 7dee1e3..25e3baa 100644 --- a/src/app.js +++ b/src/app.js @@ -86,6 +86,7 @@ class App { logger.debug('开始加载插件', this.plugins); let retryTimes = 0; + do { for (const slug in this.plugins) { const plugin = this.plugins[slug]; @@ -161,6 +162,14 @@ class App { // 进行插件加载 await plugin.load(pluginContext); plugin.loaded = true; + + logger.debug(panel.pushLoadedPlugin); + panel.pushLoadedPlugin({ + slug: plugin.slug, + name: plugin.name, + namespace: plugin.namespace ? globalContext.namespace : null, + description: plugin.description, + }); } } diff --git a/src/panel.jsx b/src/panel.jsx index 6acdf14..adf7f97 100644 --- a/src/panel.jsx +++ b/src/panel.jsx @@ -1,5 +1,8 @@ import '@ui5/webcomponents/dist/Card.js'; import '@ui5/webcomponents/dist/CardHeader.js'; +import '@ui5/webcomponents/dist/Tag.js'; + +import { app } from 'hyperapp'; import { createElement } from './utils/dom'; @@ -56,11 +59,63 @@ export function initializePanel(plugins) { pluginInitializers[slug] = initializer; }); + const $panelHeader = createElement(
); + $panel.appendChild($panelHeader); + function getPluginColorScheme(plugin) { + if (plugin.slug.startsWith('builtin-')) { + return 8; + } + if (plugin.namespace === '学在浙大') { + return 4; + } + if (plugin.namespace === '智云课堂') { + return 5; + } + if (plugin.namespace === 'PTA') { + return 6; + } + return 10; + } + const panelHeaderActions = { + pushLoadedPlugin: + (newPlugin) => + ({ loadedPlugins }) => { + console.debug('[zju-helper] push loaded plugin', newPlugin); + loadedPlugins.push(newPlugin); + return { loadedPlugins }; + }, + }; + app({ + node: $panelHeader, + init: { loadedPlugins: [] }, + actions: panelHeaderActions, + view: ({ loadedPlugins }) => ( + +
+
学在浙大/智云课堂小助手
+
+ 当前共加载 {loadedPlugins.length} 个插件{JSON.stringify(loadedPlugins)} +
+
+ {loadedPlugins.map((plugin) => ( + + + {plugin.slug} + + + ))} +
+
+
+ ), + }); + return { element: $panel, show: showPanel, hide: hidePanel, toggle: togglePanel, pluginInitializers, + pushLoadedPlugin: panelHeaderActions.pushLoadedPlugin, }; } diff --git a/src/panel.less b/src/panel.less index 74177e3..68b3fed 100644 --- a/src/panel.less +++ b/src/panel.less @@ -1,7 +1,16 @@ @panel-width: 260px; @duration: 0.25s; +html { + font-size: 16px; +} + .zju-helper { + &, + & * { + box-sizing: border-box; + } + position: fixed; top: 0; left: -@panel-width; // 初始状态隐藏在左侧 @@ -12,7 +21,7 @@ opacity: 0; z-index: 9999; - padding: 30px 15px; + padding: 1.5rem 1rem; // 毛玻璃效果 backdrop-filter: blur(4px); @@ -56,10 +65,33 @@ z-index: 9998; } +// 侧边栏 header +.zju-helper-panel-header { + padding: 1rem; + + .zju-helper-panel-header-title { + margin-top: 0.15rem; + font-weight: bold; + font-size: 1.025rem; + } + + .zju-helper-loaded-plugins-slogen { + margin-top: 0.5rem; + font-size: 0.8rem; + color: #666; + } + + .zju-helper-loaded-plugins { + margin-top: 0.5rem; + } +} + // 插件卡片 .zju-helper-plugin { + margin-top: 0.75rem; + .zju-helper-plugin-content { - margin-top: -0.75rem; + margin-top: -1rem; max-height: 400px; overflow-y: hidden; transition: max-height (@duration * 2) cubic-bezier(0, 1, 0, 1); diff --git a/src/plugins/score-finder/style.less b/src/plugins/score-finder/style.less index f1d2af6..ea4724e 100644 --- a/src/plugins/score-finder/style.less +++ b/src/plugins/score-finder/style.less @@ -1,5 +1,5 @@ .score-finder-item-content { word-break: break-all; - margin-top: -5px; - font-size: 0.9em; + margin-top: -0.375rem; + font-size: 0.675rem; } \ No newline at end of file