feat:Support loading styles declared by extended components (#4357)

feat:support for loading styles provided by extension components Signed-off-by: lingbo <[email protected]>
kubesphere · Dec 16, 2024 · b4e4d94 · b4e4d94
1 parent 5b48ec0
commit b4e4d94
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 0 deletions.
diff --git a/server/controllers/view.js b/server/controllers/view.js
@@ -41,6 +41,9 @@ const renderIndex = async (ctx, params) => {
   const dllManifest = getDllManifest();
   const localeManifest = getLocaleManifest();
   const importMap = getImportMap();
+  const extStyles = params?.installedExtensions
+    ?.filter(item => !!item.styleLink)
+    .map(ext => ext.styleLink);
 
   await ctx.render('index', {
     manifest,
@@ -49,6 +52,7 @@ const renderIndex = async (ctx, params) => {
     title: useDefaultTheme ? defaultTheme?.tabTitle : title,
     favicon,
     background,
+    extStyles,
     hostname: ctx.hostname,
     importMap: JSON.stringify(importMap),
     globals: JSON.stringify({

diff --git a/server/services/extension.js b/server/services/extension.js
@@ -65,6 +65,7 @@ const getInstalledExtensions = async ctx => {
         const extensionName = get(item, 'metadata.labels["kubesphere.io/extension-ref"]');
         const resourceVersion = get(item, 'metadata.resourceVersion');
         const { link, state } = item.status;
+        const styleLink = item.spec.assets?.style?.link;
 
         if (state === 'Available') {
           const entries = extensionEntries.find(record => record.extensionName === extensionName);
@@ -75,6 +76,7 @@ const getInstalledExtensions = async ctx => {
               name,
               extensionName,
               link,
+              styleLink,
               resourceVersion,
             },
             entries,

diff --git a/server/views/index.html b/server/views/index.html
@@ -15,6 +15,9 @@
     <% } %> <% if (manifest && manifest.css && manifest.css.length > 0) { %> <%
     manifest.css.forEach(function(item){ %>
     <link href="<%= bundlePrefix %>/<%= item %>" rel="stylesheet" media="all" />
+    <% }) %> <% } %> <% if (!isDev && extStyles && extStyles.length > 0) { %> <%
+    extStyles.forEach(function(extstyle){ %>
+    <link href="/pstatic<%= extstyle %>" rel="stylesheet" media="all" />
     <% }) %> <% } %>
   </head>
   <body>