feat(extension): align embedded frontend with extensions-frontend layout

- Keep generated path as <ext>/frontend/ with workspace root from extension-samples (yarn.lock, babel, configs, tool configs).
- Per-extension scaffold under frontend/extensions/<name>/ from templates/frontend/extensions/scaffold.
- copyFrontendWorkspace skips scaffold when copying workspace; ExtendAddFrontend uses same materialization.
- SystemJS shell lives in src/console-shell.js; dist/index.js via npm run build:shell and Docker stage.
- Update tests and .gitignore for new paths.

Signed-off-by: peng wu <2030047311@qq.com>

Author: smartcat999

.gitignore

@@ -26,6 +26,7 @@ coverage.out
 
 # npm in embedded frontend template (never commit; breaks go:embed binary size)
 pkg/extension/templates/frontend/node_modules/
+pkg/extension/templates/frontend/extensions/scaffold/node_modules/
 
 # Local scratch from `ksbuilder create` in repo root
 /my-extension/

pkg/extension/create.go

@@ -47,7 +47,8 @@ type ConfigApp struct {
 	ZipName        string
 }
 
-//go:embed templates templates/.helmignore
+//go:embed templates templates/.helmignore templates/frontend
+//go:embed templates/frontend/.editorconfig templates/frontend/.eslintignore templates/frontend/.eslintrc.js templates/frontend/.gitignore templates/frontend/.npmrc templates/frontend/.prettierignore templates/frontend/.prettierrc.js
 var Templates embed.FS
 
 //go:embed templatessimple
@@ -272,8 +273,8 @@ func CreateFromSpec(root string, s *spec.Spec) error {
 		return fmt.Errorf("copy static: %w", err)
 	}
 	if s.HasFrontend() {
-		if err := copySubtree(Templates, "templates/frontend", filepath.Join(root, "frontend"), config); err != nil {
-			return fmt.Errorf("copy frontend scaffold: %w", err)
+		if err := ensureFrontendWorkspace(root, config); err != nil {
+			return fmt.Errorf("prepare frontend workspace: %w", err)
 		}
 	}
 	if s.HasBackend() {
@@ -318,6 +319,104 @@ func CreateFromSpec(root string, s *spec.Spec) error {
 	return nil
 }
 
+const (
+	frontendTemplateDir         = "templates/frontend"
+	frontendTemplateScaffoldRel = "extensions/scaffold" // repo-only; materialized as frontend/extensions/<extName>/
+)
+
+// copyFrontendWorkspace copies templates/frontend to dest except the embedded scaffold subtree
+// (extensions/scaffold), which is materialized separately under frontend/extensions/<extName>/.
+func copyFrontendWorkspace(f embed.FS, destDir string, config any) error {
+	return fs.WalkDir(f, frontendTemplateDir, func(p string, d fs.DirEntry, err error) error {
+		if err != nil {
+			return err
+		}
+		if p == frontendTemplateDir {
+			if d.IsDir() {
+				return os.MkdirAll(destDir, 0755)
+			}
+			return nil
+		}
+		rel, _ := strings.CutPrefix(p, frontendTemplateDir+"/")
+		if rel == "" {
+			return nil
+		}
+		if rel == frontendTemplateScaffoldRel || strings.HasPrefix(rel, frontendTemplateScaffoldRel+"/") {
+			if d.IsDir() {
+				return fs.SkipDir
+			}
+			return nil
+		}
+		dstPath := filepath.Join(destDir, rel)
+		if d.IsDir() {
+			return os.MkdirAll(dstPath, 0755)
+		}
+		data, err := fs.ReadFile(f, p)
+		if err != nil {
+			return err
+		}
+		t, err := template.New(filepath.Base(p)).Delims("[[", "]]").Parse(string(data))
+		if err != nil {
+			return err
+		}
+		if err := os.MkdirAll(filepath.Dir(dstPath), 0755); err != nil {
+			return err
+		}
+		out, err := os.Create(dstPath)
+		if err != nil {
+			return err
+		}
+		defer func() { _ = out.Close() }()
+		return t.Execute(out, config)
+	})
+}
+
+// materializeFrontendWorkspace writes templates/frontend under the extension's **frontend/** directory:
+// workspace files at frontend/, scaffold from templates/frontend/extensions/scaffold/ → frontend/extensions/<name>/.
+func materializeFrontendWorkspace(root, extName string, tmplConfig any) error {
+	frontendRoot := filepath.Join(root, "frontend")
+	if err := copyFrontendWorkspace(Templates, frontendRoot, tmplConfig); err != nil {
+		return fmt.Errorf("copy frontend template: %w", err)
+	}
+	if err := os.MkdirAll(filepath.Join(frontendRoot, "configs", "extensions"), 0755); err != nil {
+		return err
+	}
+	extDir := filepath.Join(frontendRoot, "extensions", extName)
+	scaffoldSrc := frontendTemplateDir + "/" + frontendTemplateScaffoldRel
+	if err := copySubtree(Templates, scaffoldSrc, extDir, tmplConfig); err != nil {
+		return fmt.Errorf("copy frontend scaffold into extensions/%s: %w", extName, err)
+	}
+	wrapper := `REGISTRY ?= docker.io
+NAMESPACE ?= kubespheredev
+NAME ?= ` + extName + `
+TAG ?= latest
+TAG := $(or $(TAG),latest)
+
+.PHONY: build build-assets push
+
+build:
+	$(MAKE) -C extensions/$(NAME) build NAME=$(NAME) REGISTRY=$(REGISTRY) NAMESPACE=$(NAMESPACE) TAG=$(TAG)
+
+build-assets:
+	$(MAKE) -C extensions/$(NAME) build-assets NAME=$(NAME) REGISTRY=$(REGISTRY) NAMESPACE=$(NAMESPACE) TAG=$(TAG)
+
+push:
+	$(MAKE) -C extensions/$(NAME) push NAME=$(NAME) REGISTRY=$(REGISTRY) NAMESPACE=$(NAMESPACE) TAG=$(TAG)
+`
+	if err := os.WriteFile(filepath.Join(frontendRoot, "Makefile"), []byte(wrapper), 0644); err != nil {
+		return err
+	}
+	return nil
+}
+
+func ensureFrontendWorkspace(root string, config struct {
+	Name        string
+	HasFrontend bool
+	HasBackend  bool
+}) error {
+	return materializeFrontendWorkspace(root, config.Name, config)
+}
+
 // copySharedFromTemplates copies static/, README*, CHANGELOG*, .helmignore from templates to root.
 // Used by CreateApp and CreateSimple to avoid duplicating these files in templatesapp/templatessimple.
 func copySharedFromTemplates(root string, config any) error {

pkg/extension/create_test.go

@@ -104,33 +104,44 @@ func verifyExtensionInstallationMode(t *testing.T, root, want string) {
 	}
 }
 
-// frontendHelloScaffoldRelPaths matches templates under pkg/extension/templates/frontend (Hello World layout + runtime dist).
-var frontendHelloScaffoldRelPaths = []string{
-	"frontend/Dockerfile",
-	"frontend/index.html",
-	"frontend/Makefile",
-	"frontend/README.md",
-	"frontend/package.json",
-	"frontend/package-lock.json",
-	"frontend/dist/index.js",
-	"frontend/src/App.jsx",
-	"frontend/src/iframe.jsx",
-	"frontend/src/index.js",
-	"frontend/src/routes/index.js",
-	"frontend/src/locales/index.js",
-	"frontend/src/locales/en/index.js",
-	"frontend/src/locales/en/base.json",
-	"frontend/src/locales/zh/index.js",
-	"frontend/src/locales/zh/base.json",
-}
-
-func verifyFrontendHelloScaffold(t *testing.T, root string) {
+func verifyFrontendHelloScaffold(t *testing.T, root, extName string) {
 	t.Helper()
-	for _, p := range frontendHelloScaffoldRelPaths {
+	paths := []string{
+		"frontend/package.json",
+		"frontend/yarn.lock",
+		"frontend/babel.config.js",
+		"frontend/tsconfig.json",
+		"frontend/tsconfig.base.json",
+		"frontend/configs/console.config.js",
+		"frontend/.eslintrc.js",
+		"frontend/.npmrc",
+		"frontend/Makefile",
+		"frontend/configs/extensions",
+		"frontend/extensions/" + extName + "/Dockerfile",
+		"frontend/extensions/" + extName + "/index.html",
+		"frontend/extensions/" + extName + "/Makefile",
+		"frontend/extensions/" + extName + "/README.md",
+		"frontend/extensions/" + extName + "/package.json",
+		"frontend/extensions/" + extName + "/package-lock.json",
+		"frontend/extensions/" + extName + "/src/console-shell.js",
+		"frontend/extensions/" + extName + "/src/App.jsx",
+		"frontend/extensions/" + extName + "/src/iframe.jsx",
+		"frontend/extensions/" + extName + "/src/index.js",
+		"frontend/extensions/" + extName + "/src/routes/index.js",
+		"frontend/extensions/" + extName + "/src/locales/index.js",
+		"frontend/extensions/" + extName + "/src/locales/en/index.js",
+		"frontend/extensions/" + extName + "/src/locales/en/base.json",
+		"frontend/extensions/" + extName + "/src/locales/zh/index.js",
+		"frontend/extensions/" + extName + "/src/locales/zh/base.json",
+	}
+	for _, p := range paths {
 		if _, err := os.Stat(filepath.Join(root, p)); err != nil {
 			t.Errorf("missing %s: %v", p, err)
 		}
 	}
+	if _, err := os.Stat(filepath.Join(root, "frontend/extensions/scaffold")); err == nil {
+		t.Error("template placeholder frontend/extensions/scaffold must not appear in generated output")
+	}
 }
 
 func TestCreateFromSpec_CopiesFrontendScaffold(t *testing.T) {
@@ -147,7 +158,7 @@ func TestCreateFromSpec_CopiesFrontendScaffold(t *testing.T) {
 	if err := CreateFromSpec(root, s); err != nil {
 		t.Fatalf("CreateFromSpec: %v", err)
 	}
-	verifyFrontendHelloScaffold(t, root)
+	verifyFrontendHelloScaffold(t, root, "scaffold-ext")
 	if _, err := os.Stat(filepath.Join(root, "Makefile")); err != nil {
 		t.Errorf("missing root Makefile: %v", err)
 	}
@@ -205,7 +216,7 @@ func verifyFiles(t *testing.T, root string, wantFrontend, wantBackend bool) {
 		if _, err := os.Stat(filepath.Join(root, "charts", "frontend", "Chart.yaml")); err != nil {
 			t.Errorf("missing charts/frontend: %v", err)
 		}
-		if _, err := os.Stat(filepath.Join(root, "frontend", "Dockerfile")); err != nil {
+		if _, err := os.Stat(filepath.Join(root, "frontend", "Makefile")); err != nil {
 			t.Errorf("missing frontend scaffold: %v", err)
 		}
 		if _, err := os.Stat(filepath.Join(root, "frontend", "templates")); err == nil {

pkg/extension/extend.go

@@ -208,8 +208,8 @@ func ExtendAddFrontend(root string) error {
 	if err := copySubtree(Templates, "templates/charts/frontend", filepath.Join(root, "charts", "frontend"), config); err != nil {
 		return err
 	}
-	// 4. Copy frontend scaffold (no rename needed)
-	if err := copySubtree(Templates, "templates/frontend", filepath.Join(root, "frontend"), config); err != nil {
+	// 4. Lay out frontend/ (workspace + extensions/<name>/ scaffold)
+	if err := materializeFrontendWorkspace(root, name, config); err != nil {
 		return err
 	}
 	// 5. Regenerate root Makefile

pkg/extension/extend_test.go

@@ -104,7 +104,7 @@ func TestExtendAddFrontend(t *testing.T) {
 	if !strings.Contains(string(extData), "installationMode: Multicluster") {
 		t.Error("after ExtendAddFrontend, installationMode should stay Multicluster (backend present)")
 	}
-	verifyFrontendHelloScaffold(t, root)
+	verifyFrontendHelloScaffold(t, root, "be-ext")
 	verifyFiles(t, root, true, true)
 	verifyPackage(t, root)
 }

pkg/extension/templates/frontend/.editorconfig

@@ -0,0 +1,24 @@
+root = true
+
+[*.jsx?]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.tsx?]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[Makefile]
+indent_style = tab
+
+[*.yaml]
+indent_style = space
+indent_size = 2

pkg/extension/templates/frontend/.eslintignore

@@ -0,0 +1,10 @@
+dist/
+build/
+cypress/
+jest/
+scripts/
+node_modules/
+jest.config.js
+babel.config.js
+.eslintrc.js
+locales/

pkg/extension/templates/frontend/.eslintrc.js

@@ -0,0 +1,20 @@
+// http://eslint.org/docs/user-guide/configuring
+
+const path = require('path');
+
+const resolve = dir => path.resolve(__dirname, dir);
+
+module.exports = {
+  root: true,
+  parserOptions: {
+    project: ['./tsconfig.json'],
+  },
+  extends: ['kubesphere'],
+  settings: {
+    'import/resolver': {
+      webpack: {
+        config: resolve('node_modules/@ks-console/bootstrap/webpack/webpack.base.conf.js'),
+      },
+    },
+  },
+};

pkg/extension/templates/frontend/.gitignore

@@ -0,0 +1,29 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+/coverage
+
+# production
+/dist
+dist
+cjs
+esm
+
+# misc
+.DS_Store
+
+logs/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.idea/
+
+# local config
+/configs/local_config.yaml
+
+*.rdb
+.cache-loader

pkg/extension/templates/frontend/.npmrc

@@ -0,0 +1 @@
+@ks-console:registry=https://registry.npm.kubesphere.com.cn