feat: 在侧边栏显示插件载入情况

Author: memset0

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,
+          });
         }
       }
 

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(<div></div>);
+  $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 }) => (
+      <ui5-card>
+        <div class="zju-helper-panel-header">
+          <div class="zju-helper-panel-header-title">学在浙大/智云课堂小助手</div>
+          <div class="zju-helper-loaded-plugins-slogen">
+            当前共加载 {loadedPlugins.length} 个插件{JSON.stringify(loadedPlugins)}
+          </div>
+          <div class="zju-helper-loaded-plugins">
+            {loadedPlugins.map((plugin) => (
+              <span class="zju-helper-loaded-plugin-tag">
+                <ui5-tag design="Set2" color-scheme={getPluginColorScheme(plugin)}>
+                  {plugin.slug}
+                </ui5-tag>
+              </span>
+            ))}
+          </div>
+        </div>
+      </ui5-card>
+    ),
+  });
+
   return {
     element: $panel,
     show: showPanel,
     hide: hidePanel,
     toggle: togglePanel,
     pluginInitializers,
+    pushLoadedPlugin: panelHeaderActions.pushLoadedPlugin,
   };
 }

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);

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;
 }