@kite-dev/create-plugin-sdk 0.0.1-beta.0 → 0.0.4

package/README.md

@@ -1,23 +1,105 @@
 # Create Kite Plugin
 
-使用 `@clack/prompts` 提供交互向导，创建可在 Kite 中安装的 React/TypeScript 插件。
+`@kite-dev/create-plugin-sdk` creates a React and TypeScript plugin for Kite. It includes plugin configuration, a page using Kite UI components, and scripts for building an installable archive.
+
+## Requirements
+
+- Node.js 20.19 or later in the 20.x series, or Node.js 22.12 or later.
+- npm or pnpm.
+- A Kite instance matching the generated plugin's `engines.kite` range, initially `^0.16.0`.
+
+## Create a plugin
+
+With npm:
 
 ```sh
-npm create @kite-dev/plugin-sdk@beta my-plugin
-# 或
-pnpm create @kite-dev/plugin-sdk@beta my-plugin
+npm create @kite-dev/plugin-sdk -- my-plugin
 ```
 
-省略 `my-plugin` 时交互输入目录。插件 ID 使用目录名，显示名称可在向导中修改。目录必须为空；已有 Git 仓库的 `.git` 目录可以保留。取消向导不会创建文件。
+With pnpm:
+
+```sh
+pnpm create @kite-dev/plugin-sdk my-plugin
+```
+
+These commands run the `@kite-dev/create-plugin-sdk` package. The wizard asks for a display name. Omit the directory argument to choose both the directory and display name interactively.
+
+The final directory name becomes the plugin ID. IDs must contain 1–64 lowercase letters, digits, or hyphens, and start and end with a letter or digit. The destination must be empty; an existing `.git` entry is preserved.
 
-非交互创建：
+### Non-interactive usage
 
 ```sh
-npm create @kite-dev/plugin-sdk@beta -- my-plugin --yes --display-name "My Plugin"
-pnpm create @kite-dev/plugin-sdk@beta my-plugin --yes --display-name "My Plugin"
+npm create @kite-dev/plugin-sdk -- my-plugin --yes --display-name "My Plugin"
+```
+
+```sh
+pnpm create @kite-dev/plugin-sdk my-plugin --yes --display-name "My Plugin"
+```
+
+| Argument or option      | Description                                                                        |
+| ----------------------- | ---------------------------------------------------------------------------------- |
+| `[directory]`           | Destination path, relative to the current directory or absolute.                   |
+| `--display-name <name>` | Plugin name shown in Kite. Defaults to the directory name in non-interactive mode. |
+| `-y`, `--yes`           | Use defaults without prompting. With no directory argument, creates `my-plugin`.   |
+| `-h`, `--help`          | Display CLI usage.                                                                 |
+
+The creator writes project files and prints the next steps. It does not install dependencies, initialize Git, build the plugin, or publish a package.
+
+## Generated project
+
+```text
+my-plugin/
+├── package.json
+├── plugin.config.tsx
+├── vite.config.ts
+├── tsconfig.json
+├── eslint.config.js
+├── prettier.config.cjs
+├── README.md
+├── .gitignore
+├── .prettierignore
+└── src/
+    ├── i18n.ts
+    ├── locales/
+    │   ├── en.json
+    │   └── zh.json
+    └── pages/
+        ├── home.tsx
+        └── home.module.css
 ```
 
-生成 `package.json`、TypeScript/Vite 配置、`plugin.config.tsx`、使用宿主 UI 的首页、CSS Modules、README 和 `.gitignore`。页面使用 `React.lazy`，菜单默认挂在 `core:other`。生成器复用已发布 SDK 的清单校验与依赖版本，不使用宿主源码或本地路径依赖。
+- `package.json` defines the plugin ID, display name, version, supported Kite versions, dependencies, and scripts. The generated `engines.kite` range is `^0.16.0`.
+- `plugin.config.tsx` registers the home route and a sidebar entry under **Other** using `definePlugin`.
+- `src/i18n.ts` binds the English and Chinese dictionaries with `createPluginI18n()` and exports `translations`, `label`, and `useTranslation`.
+- `src/locales/en.json` and `src/locales/zh.json` contain navigation and page text. The home label initially uses the chosen display name in both languages.
+- `src/pages/home.tsx` displays Kite's selected cluster and namespace using shared UI components and localized text.
+- `src/pages/home.module.css` contains styles scoped to the page.
+- `vite.config.ts` uses the SDK's build configuration to produce `dist/` and `plugin.json`.
+- `eslint.config.js` checks JavaScript, TypeScript, and React Hooks. `prettier.config.cjs` defines formatting and import ordering.
+- `README.md` starts with the plugin's display name as its heading.
+
+Set `package.json.engines.kite` to the Kite versions your plugin supports. The SDK defaults this range to `^0.16.0` if omitted and includes it in the built manifest as `requires.kite`. Kite checks this requirement when managing and loading the plugin.
+
+The home page is lazy-loaded. Keep page CSS and browser-specific dependencies in page modules; the plugin configuration is also executed in Node.js to generate navigation metadata.
+
+## Localize a plugin
+
+Add matching translation keys to `src/locales/en.json` and `src/locales/zh.json`. The generated configuration registers `i18n: translations` and uses `label('navigation.home')` for its route title and menu label.
+
+Inside a page, import the generated hook:
+
+```tsx
+import { useTranslation } from '../i18n'
+
+export function ContextHeading() {
+  const { t } = useTranslation()
+  return <h2>{t('context.description')}</h2>
+}
+```
+
+Both `label()` and `t()` provide completion for your locale keys. Use `t('key', { name })` for a message containing `{{name}}`. The hook also returns the current `language`. Navigation and page text follow Kite's language selection; namespace registration is handled by Kite.
+
+## Build and install
 
 ```sh
 cd my-plugin
@@ -26,10 +108,89 @@ pnpm run build
 pnpm run pack
 ```
 
-然后从 Kite 的插件管理页面上传安装包。`dev` 执行监听构建，页面在 Kite 中运行。
+You can use `npm install`, `npm run build`, and `npm run pack` instead.
+
+The package is written to `<id>-<version>.tar.gz` in the plugin directory. In Kite, open the avatar menu, select **Plugin management**, and use **Install from file** to upload it. Plugin installation requires a Kite administrator. Once installed, open the plugin from **Other** in the sidebar.
+
+| Script         | Action                                                     |
+| -------------- | ---------------------------------------------------------- |
+| `type-check`   | Check TypeScript without producing output.                 |
+| `build`        | Type-check and build the plugin into `dist/`.              |
+| `dev`          | Watch source files and rebuild `dist/`.                    |
+| `pack`         | Package the existing `dist/` directory. Run `build` first. |
+| `lint`         | Check JavaScript, TypeScript, and React Hooks with ESLint. |
+| `lint:fix`     | Apply automatic ESLint fixes.                              |
+| `format`       | Format source files and sort imports with Prettier.        |
+| `format:check` | Check formatting without changing files.                   |
+
+Plugin pages run inside Kite. Watch mode does not serve a standalone application or install rebuilt files. Increment `package.json.version`, rebuild, and install a new package to update a plugin. Restart the watch command after changing its ID or version.
 
-需要 Node.js `^20.19.0 || >=22.12.0`。npm/pnpm 的 `create @kite-dev/plugin-sdk` 会自动寻找本包 `@kite-dev/create-plugin-sdk`；当前使用 `beta` 标签。
+See the [SDK documentation](../README.md) for resource APIs, navigation, components, styling, and plugin configuration.
 
-## 本地开发与发布
+## Create a plugin in a pnpm workspace
+
+From a workspace whose `pnpm-workspace.yaml` includes `plugins/*`:
+
+```sh
+pnpm create @kite-dev/plugin-sdk plugins/my-plugin
+pnpm install
+pnpm --filter my-plugin run build
+pnpm --filter my-plugin run pack
+```
+
+The creator writes into the selected directory. Workspace package discovery and dependency installation are managed by pnpm.
+
+The creator detects the nearest ancestor containing `pnpm-workspace.yaml` or `package.json.workspaces`. If that root already provides an ESLint or Prettier configuration, the new plugin reuses the corresponding root configuration and dependencies. Each tool is detected independently; missing tooling is included with the new plugin. The creator does not change workspace configuration.
+
+For shared tooling, run the workspace's quality commands from its root so its file patterns and ignore rules apply consistently:
+
+```sh
+pnpm run lint
+pnpm run format:check
+```
+
+The plugin also includes `lint`, `lint:fix`, `format`, and `format:check` scripts. An npm workspace uses the same configuration reuse behavior.
+
+## Develop the creator locally
+
+From the `kite-plugin-sdk` repository root:
+
+```sh
+pnpm install --frozen-lockfile
+pnpm run build
+cd create-plugin-sdk
+pnpm run dev ../../my-plugin --yes --display-name "My Plugin"
+```
+
+The destination in this example is a new `my-plugin` directory beside the SDK repository. Choose an empty destination for each run. `pnpm run dev` executes `index.js` directly, so edits to the CLI or `template/` are used on the next invocation.
+
+To build the generated plugin against the same SDK checkout:
+
+```sh
+cd ../../my-plugin
+pnpm install
+pnpm add @kite-dev/plugin-sdk@file:../kite-plugin-sdk
+pnpm run build
+pnpm run pack
+```
+
+For breakpoint debugging, run this from `create-plugin-sdk/`:
+
+```sh
+node --inspect-brk index.js ../../my-plugin
+```
+
+Attach your debugger to the Node.js process. Running the local entry point uses your source checkout; `npm create` and `pnpm create` use the published creator.
+
+## Releases
+
+The creator and SDK share the same version and are released together. The pnpm workspace links the creator's `workspace:*` dependency to the local SDK checkout during development. `pnpm pack` converts it to the exact SDK version in the published package.
+
+From the repository root, with all changes committed:
+
+```sh
+./scripts/release.sh 0.0.4
+git push --atomic origin HEAD v0.0.4
+```
 
-在此目录执行 `npm ci`，然后运行 `node index.js <directory>`。使用 `npm pack` 检查发布包，发布测试版使用 `npm publish --tag beta --access public`。创建器与 SDK 位于同一仓库，分别作为 npm 包发布。
+The script updates both package versions and the shared lockfile, then creates a release commit and tag. Pushing the tag triggers `publish.yml`, which packs both packages with pnpm and publishes the SDK followed by the creator. Stable versions use the `latest` npm tag; prerelease versions use `beta`.

package/index.js

@@ -1,6 +1,15 @@
 #!/usr/bin/env node
-import { cpSync, existsSync, lstatSync, mkdirSync, readdirSync, renameSync, writeFileSync } from 'node:fs'
-import { basename, resolve } from 'node:path'
+import {
+  cpSync,
+  existsSync,
+  lstatSync,
+  mkdirSync,
+  readdirSync,
+  readFileSync,
+  renameSync,
+  writeFileSync,
+} from 'node:fs'
+import { basename, dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { parseArgs } from 'node:util'
 import * as prompts from '@clack/prompts'
@@ -15,8 +24,8 @@ Options:
   -h, --help            Show this help
 
 Examples:
-  npm create @kite-dev/plugin-sdk@beta my-plugin
-  pnpm create @kite-dev/plugin-sdk@beta my-plugin`
+  npm create @kite-dev/plugin-sdk my-plugin
+  pnpm create @kite-dev/plugin-sdk my-plugin`
 
 function metadataError(id, name) {
   try {
@@ -25,7 +34,7 @@ function metadataError(id, name) {
       id,
       name,
       version: '0.1.0',
-      requires: { sdk: `^${sdk.version}` },
+      requires: { kite: '^0.16.0' },
       entry: 'mf-manifest.json',
       module: './plugin',
       routes: [],
@@ -41,8 +50,55 @@ function directoryError(directory) {
   const error = metadataError(basename(target), 'Plugin')
   if (error) return error
   if (existsSync(target)) {
-    if (!lstatSync(target).isDirectory()) return 'The target path must be a directory.'
-    if (readdirSync(target).some((entry) => entry !== '.git')) return 'The target directory is not empty. Choose an empty directory.'
+    if (!lstatSync(target).isDirectory())
+      return 'The target path must be a directory.'
+    if (readdirSync(target).some((entry) => entry !== '.git'))
+      return 'The target directory is not empty. Choose an empty directory.'
+  }
+}
+
+function workspaceTooling(target) {
+  let directory = dirname(target)
+  while (true) {
+    const packagePath = resolve(directory, 'package.json')
+    const metadata = existsSync(packagePath)
+      ? JSON.parse(readFileSync(packagePath, 'utf8'))
+      : {}
+    if (
+      existsSync(resolve(directory, 'pnpm-workspace.yaml')) ||
+      Array.isArray(metadata.workspaces) ||
+      Array.isArray(metadata.workspaces?.packages)
+    ) {
+      const eslint = ['js', 'mjs', 'cjs', 'ts', 'mts', 'cts'].some(
+        (extension) =>
+          existsSync(resolve(directory, `eslint.config.${extension}`))
+      )
+      const prettier =
+        metadata.prettier !== undefined ||
+        [
+          '.prettierrc',
+          ...[
+            'json',
+            'json5',
+            'yaml',
+            'yml',
+            'toml',
+            'js',
+            'cjs',
+            'mjs',
+            'ts',
+            'cts',
+            'mts',
+          ].map((extension) => `.prettierrc.${extension}`),
+          ...['js', 'cjs', 'mjs', 'ts', 'cts', 'mts'].map(
+            (extension) => `prettier.config.${extension}`
+          ),
+        ].some((file) => existsSync(resolve(directory, file)))
+      return { eslint, prettier }
+    }
+    const parent = dirname(directory)
+    if (parent === directory) return { eslint: false, prettier: false }
+    directory = parent
   }
 }
 
@@ -62,7 +118,9 @@ async function main() {
   if (positionals.length > 1) throw new Error(usage)
   const interactive = process.stdin.isTTY && process.stdout.isTTY && !values.yes
   if (!interactive && !positionals[0] && !values.yes) {
-    throw new Error('Specify a project directory or use --yes to create my-plugin.')
+    throw new Error(
+      'Specify a project directory or use --yes to create my-plugin.'
+    )
   }
   if (positionals[0]) {
     const error = directoryError(positionals[0])
@@ -70,27 +128,41 @@ async function main() {
   }
 
   prompts.intro('Create a Kite plugin')
-  const answers = await prompts.group({
-    directory: async () => positionals[0] ?? (interactive
-      ? prompts.text({
-          message: 'Project directory',
-          initialValue: 'my-plugin',
-          validate: (value) => value?.trim() ? directoryError(value.trim()) : 'Enter a project directory.',
-        })
-      : 'my-plugin'),
-    displayName: async ({ results }) => values['display-name'] ?? (interactive
-      ? prompts.text({
-          message: 'Plugin display name',
-          initialValue: basename(resolve(results.directory.trim())),
-          validate: (value) => metadataError(basename(resolve(results.directory.trim())), value?.trim()),
-        })
-      : basename(resolve(results.directory.trim()))),
-  }, {
-    onCancel: () => {
-      prompts.cancel('Plugin creation cancelled.')
-      process.exit(0)
+  const answers = await prompts.group(
+    {
+      directory: async () =>
+        positionals[0] ??
+        (interactive
+          ? prompts.text({
+              message: 'Project directory',
+              initialValue: 'my-plugin',
+              validate: (value) =>
+                value?.trim()
+                  ? directoryError(value.trim())
+                  : 'Enter a project directory.',
+            })
+          : 'my-plugin'),
+      displayName: async ({ results }) =>
+        values['display-name'] ??
+        (interactive
+          ? prompts.text({
+              message: 'Plugin display name',
+              initialValue: basename(resolve(results.directory.trim())),
+              validate: (value) =>
+                metadataError(
+                  basename(resolve(results.directory.trim())),
+                  value?.trim()
+                ),
+            })
+          : basename(resolve(results.directory.trim()))),
     },
-  })
+    {
+      onCancel: () => {
+        prompts.cancel('Plugin creation cancelled.')
+        process.exit(0)
+      },
+    }
+  )
 
   const directory = answers.directory.trim()
   const target = resolve(directory)
@@ -99,6 +171,21 @@ async function main() {
   const error = directoryError(directory) ?? metadataError(id, displayName)
   if (error) throw new Error(error)
 
+  const sharedTooling = workspaceTooling(target)
+  const toolingDependencies = [
+    ...(sharedTooling.eslint
+      ? []
+      : [
+          '@eslint/js',
+          'eslint',
+          'eslint-plugin-react-hooks',
+          'globals',
+          'typescript-eslint',
+        ]),
+    ...(sharedTooling.prettier
+      ? []
+      : ['@ianvs/prettier-plugin-sort-imports', 'prettier']),
+  ]
   const metadata = {
     name: id,
     displayName,
@@ -107,11 +194,16 @@ async function main() {
     type: 'module',
     license: 'Apache-2.0',
     description: '',
+    engines: { kite: '^0.16.0' },
     scripts: {
       'type-check': 'tsc --noEmit',
       build: 'tsc --noEmit && vite build',
       dev: 'vite build --watch',
       pack: 'kite-plugin pack',
+      lint: 'eslint .',
+      'lint:fix': 'eslint . --fix',
+      format: 'prettier --write .',
+      'format:check': 'prettier --check .',
     },
     dependencies: {
       [sdk.name]: sdk.version,
@@ -125,6 +217,9 @@ async function main() {
       '@types/react-dom': sdk.devDependencies['@types/react-dom'],
       typescript: sdk.devDependencies.typescript,
       vite: sdk.peerDependencies.vite,
+      ...Object.fromEntries(
+        toolingDependencies.map((name) => [name, sdk.devDependencies[name]])
+      ),
     },
   }
   mkdirSync(target, { recursive: true })
@@ -132,18 +227,50 @@ async function main() {
     recursive: true,
     force: false,
     errorOnExist: true,
+    filter: (source) =>
+      !(sharedTooling.eslint && basename(source) === 'eslint.config.js') &&
+      !(
+        sharedTooling.prettier &&
+        ['prettier.config.cjs', '_prettierignore'].includes(basename(source))
+      ),
   })
   renameSync(resolve(target, '_gitignore'), resolve(target, '.gitignore'))
-  writeFileSync(resolve(target, 'package.json'), `${JSON.stringify(metadata, null, 2)}\n`, { flag: 'wx' })
+  if (!sharedTooling.prettier) {
+    renameSync(
+      resolve(target, '_prettierignore'),
+      resolve(target, '.prettierignore')
+    )
+  }
+  for (const language of ['en', 'zh']) {
+    const localePath = resolve(target, 'src/locales', `${language}.json`)
+    const dictionary = JSON.parse(readFileSync(localePath, 'utf8'))
+    dictionary.navigation.home = displayName
+    writeFileSync(localePath, `${JSON.stringify(dictionary, null, 2)}\n`)
+  }
+  writeFileSync(
+    resolve(target, 'package.json'),
+    `${JSON.stringify(metadata, null, 2)}\n`,
+    { flag: 'wx' }
+  )
+  writeFileSync(resolve(target, 'README.md'), `# ${displayName}\n`, {
+    flag: 'wx',
+  })
 
-  const manager = process.env.npm_config_user_agent?.startsWith('pnpm/') ? 'pnpm' : 'npm'
-  prompts.note([
-    `cd '${directory.replaceAll("'", "'\\''")}'`,
-    `${manager} install`,
-    `${manager} run build`,
-    `${manager} run pack`,
-  ].join('\n'), 'Next steps')
-  prompts.outro(`Created ${displayName}. Upload the built archive in Kite → Plugin management.`)
+  const manager = process.env.npm_config_user_agent?.startsWith('pnpm/')
+    ? 'pnpm'
+    : 'npm'
+  prompts.note(
+    [
+      `cd '${directory.replaceAll("'", "'\\''")}'`,
+      `${manager} install`,
+      `${manager} run build`,
+      `${manager} run pack`,
+    ].join('\n'),
+    'Next steps'
+  )
+  prompts.outro(
+    `Created ${displayName}. Upload the built archive in Kite → Plugin management.`
+  )
 }
 
 main().catch((error) => {

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "@kite-dev/create-plugin-sdk",
-  "version": "0.0.1-beta.0",
+  "version": "0.0.4",
   "description": "Create a Kite frontend plugin",
   "type": "module",
   "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kite-org/plugin-sdk.git",
+    "directory": "create-plugin-sdk"
+  },
   "engines": {
     "node": "^20.19.0 || >=22.12.0"
   },
@@ -17,11 +22,13 @@
   ],
   "dependencies": {
     "@clack/prompts": "1.8.0",
-    "@kite-dev/plugin-sdk": "0.0.1-beta.0"
+    "@kite-dev/plugin-sdk": "0.0.4"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
-    "access": "public",
-    "tag": "beta"
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "node index.js"
   }
-}
+}

package/template/_prettierignore

@@ -0,0 +1,8 @@
+**/node_modules/
+**/dist/
+**/.vite/
+**/__mf__virtual/
+*.tgz
+*.tar.gz
+package-lock.json
+pnpm-lock.yaml

package/template/eslint.config.js

@@ -0,0 +1,30 @@
+import js from '@eslint/js'
+import reactHooks from 'eslint-plugin-react-hooks'
+import globals from 'globals'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  {
+    ignores: [
+      '**/node_modules/**',
+      '**/dist/**',
+      '**/.vite/**',
+      '**/__mf__virtual/**',
+    ],
+  },
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    files: ['src/**/*.{ts,tsx}', 'plugin.config.tsx'],
+    languageOptions: { globals: globals.browser },
+    plugins: { 'react-hooks': reactHooks },
+    rules: {
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+    },
+  },
+  {
+    files: ['vite.config.ts', 'eslint.config.js', 'prettier.config.cjs'],
+    languageOptions: { globals: globals.node },
+  }
+)

package/template/plugin.config.tsx

@@ -1,18 +1,25 @@
 import { lazy } from 'react'
 import { definePlugin } from '@kite-dev/plugin-sdk'
-import { displayName } from './package.json'
+
+import { label, translations } from './src/i18n'
 
 const HomePage = lazy(() => import('./src/pages/home'))
 
 export default definePlugin({
+  i18n: translations,
   routes: [
-    { id: 'home', path: '', title: displayName, element: <HomePage /> },
+    {
+      id: 'home',
+      path: '',
+      title: label('navigation.home'),
+      element: <HomePage />,
+    },
   ],
   menus: [
     {
       id: 'home',
       parent: 'core:other',
-      label: displayName,
+      label: label('navigation.home'),
       route: 'home',
       icon: 'IconBox',
     },

package/template/prettier.config.cjs

@@ -0,0 +1,10 @@
+module.exports = {
+  endOfLine: 'lf',
+  semi: false,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+  importOrder: ['^react(?:/.*)?$', '<THIRD_PARTY_MODULES>', '', '^[./]'],
+  importOrderParserPlugins: ['typescript', 'jsx', 'decorators-legacy'],
+  plugins: ['@ianvs/prettier-plugin-sort-imports'],
+}

package/template/src/i18n.ts

@@ -0,0 +1,10 @@
+import { createPluginI18n } from '@kite-dev/plugin-sdk/i18n'
+
+import en from './locales/en.json'
+import zh from './locales/zh.json'
+
+export const {
+  resources: translations,
+  label,
+  useTranslation,
+} = createPluginI18n({ en, zh })

package/template/src/locales/en.json

@@ -0,0 +1,11 @@
+{
+  "navigation": {
+    "home": "My Plugin"
+  },
+  "context": {
+    "description": "Current Kite context",
+    "cluster": "Cluster",
+    "namespace": "Namespace",
+    "allNamespaces": "All namespaces"
+  }
+}

package/template/src/locales/zh.json

@@ -0,0 +1,11 @@
+{
+  "navigation": {
+    "home": "My Plugin"
+  },
+  "context": {
+    "description": "当前 Kite 上下文",
+    "cluster": "集群",
+    "namespace": "命名空间",
+    "allNamespaces": "全部命名空间"
+  }
+}

package/template/src/pages/home.tsx

@@ -1,27 +1,35 @@
-import { useCluster, useNamespace } from '@kite-dev/plugin-sdk'
-import { usePluginTranslation } from '@kite-dev/plugin-sdk/i18n'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@kite-dev/plugin-sdk/ui'
-import { displayName } from '../../package.json'
+import { useCluster, useNamespace } from '@kite-dev/plugin-sdk/hooks'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@kite-dev/plugin-sdk/ui'
+
+import { useTranslation } from '../i18n'
 import styles from './home.module.css'
 
 export default function HomePage() {
   const { currentCluster } = useCluster()
   const { namespace } = useNamespace()
-  const { t } = usePluginTranslation()
+  const { t } = useTranslation()
 
   return (
     <main className={styles.page}>
       <Card>
         <CardHeader>
-          <CardTitle>{displayName}</CardTitle>
-          <CardDescription>{t({ en: 'Current Kite context', zh: '当前 Kite 上下文' })}</CardDescription>
+          <CardTitle>{t('navigation.home')}</CardTitle>
+          <CardDescription>{t('context.description')}</CardDescription>
         </CardHeader>
         <CardContent>
           <dl className={styles.context}>
-            <dt>{t({ en: 'Cluster', zh: '集群' })}</dt>
+            <dt>{t('context.cluster')}</dt>
             <dd>{currentCluster ?? '—'}</dd>
-            <dt>{t({ en: 'Namespace', zh: '命名空间' })}</dt>
-            <dd>{namespace === '_all' ? t({ en: 'All namespaces', zh: '全部命名空间' }) : namespace}</dd>
+            <dt>{t('context.namespace')}</dt>
+            <dd>
+              {namespace === '_all' ? t('context.allNamespaces') : namespace}
+            </dd>
           </dl>
         </CardContent>
       </Card>

package/template/vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite'
 import { kitePlugin } from '@kite-dev/plugin-sdk/vite'
+import { defineConfig } from 'vite'
 
 export default defineConfig(kitePlugin())

package/template/README.md

@@ -1,20 +0,0 @@
-# Kite Plugin
-
-在生成的插件目录安装依赖、构建并打包：
-
-```sh
-npm install
-npm run build
-npm run pack
-```
-
-打包后得到 `<插件 ID>-<版本>.tar.gz`。在 Kite 头像菜单进入「插件」，上传安装包；启用后可在「其他」分组打开插件首页。
-
-- `package.json`：插件 ID、展示名称、版本和依赖。首页标题及菜单名称复用 `displayName`。
-- `plugin.config.tsx`：使用 `definePlugin` 注册路由和菜单，直接绑定 JSX。
-- `src/pages/home.tsx`：首页复用宿主 UI、语言、集群和命名空间上下文。
-- `src/pages/home.module.css`：插件自身布局样式。
-
-SDK 构建时自动生成导航清单；页面使用 `React.lazy`，首次访问时才加载。配置需要能在 Node 中执行，CSS、浏览器 API 和页面依赖留在 lazy 导入的页面模块中。
-
-插件需要在兼容的 Kite 宿主中运行，没有独立的开发网页。修改后重新构建、打包并安装；更新已安装插件时先递增 `package.json` 的版本。