create-halo-plugin-template 1.0.0 → 1.0.1

package/ui/src/index.ts

@@ -0,0 +1,88 @@
+import { IconPlug } from '@halo-dev/components'
+import { definePlugin, type AttachmentSelectProvider } from '@halo-dev/ui-shared'
+import { markRaw } from 'vue'
+import PluginTemplateAttachmentTab from './components/PluginTemplateAttachmentTab.vue'
+import PluginTemplateDashboardWidget from './components/PluginTemplateDashboardWidget.vue'
+
+import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
+import './assets/index.css'
+import './assets/element.scss'
+
+export default definePlugin({
+  components: {},
+  routes: [
+    {
+      parentName: 'Root',
+      route: {
+        path: '/halo-plugin-template',
+        name: 'PluginTemplateConsoleRoot',
+        component: () =>
+          import(/* webpackChunkName: "PluginTemplateConsoleDashboard" */ './views/console/ConsoleDashboardView.vue'),
+        meta: {
+          title: '模板工作台',
+          searchable: true,
+          permissions: ['plugin:halo-plugin-template:view'],
+          menu: {
+            name: '模板工作台',
+            group: '插件模板',
+            icon: markRaw(IconPlug),
+            priority: 0,
+          },
+        },
+      },
+    },
+  ],
+  ucRoutes: [
+    {
+      parentName: 'Root',
+      route: {
+        path: '/halo-plugin-template',
+        name: 'PluginTemplateUcRoot',
+        component: () =>
+          import(/* webpackChunkName: "PluginTemplateUcDashboard" */ './views/uc/UcDashboardView.vue'),
+        meta: {
+          title: '模板中心',
+          searchable: true,
+          permissions: ['plugin:halo-plugin-template:uc'],
+        },
+      },
+    },
+  ],
+  extensionPoints: {
+    'console:dashboard:widgets:create': () => [
+      {
+        id: 'halo-plugin-template-overview-widget',
+        component: markRaw(PluginTemplateDashboardWidget),
+        group: 'halo-plugin-template',
+        defaultSize: {
+          w: 6,
+          h: 8,
+          minW: 4,
+          minH: 5,
+          maxW: 12,
+          maxH: 12,
+        },
+        permissions: ['plugin:halo-plugin-template:view'],
+      },
+    ],
+    'console:dashboard:widgets:internal:quick-action:item:create': () => [
+      {
+        id: 'halo-plugin-template-open-console',
+        icon: markRaw(IconPlug),
+        title: '打开模板页',
+        action: () => {
+          window.location.assign('/console/halo-plugin-template')
+        },
+        permissions: ['plugin:halo-plugin-template:manage'],
+      },
+    ],
+    'attachment:selector:create': (): AttachmentSelectProvider[] => [
+      {
+        id: 'halo-plugin-template-assets',
+        label: '模板资源',
+        component: markRaw(PluginTemplateAttachmentTab),
+      },
+    ],
+  },
+})

package/ui/src/lib/__tests__/plugin-ui.spec.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest'
+import { buildShellStyles, resolveElementSize } from '@/lib/plugin-ui'
+
+describe('plugin-ui helpers', () => {
+  it('maps density to element-plus size tokens', () => {
+    expect(resolveElementSize('compact')).toBe('small')
+    expect(resolveElementSize('balanced')).toBe('default')
+    expect(resolveElementSize('relaxed')).toBe('large')
+    expect(resolveElementSize(undefined)).toBe('default')
+  })
+
+  it('creates shell style variables only when an accent color is present', () => {
+    expect(buildShellStyles('')).toBeUndefined()
+    expect(buildShellStyles()).toBeUndefined()
+    expect(buildShellStyles('#2457F5')).toEqual({
+      '--halo-plugin-template-color-primary': '#2457F5',
+    })
+  })
+})

package/ui/src/lib/plugin-ui.ts

@@ -0,0 +1,19 @@
+export const resolveElementSize = (density?: string) => {
+  if (density === 'compact') {
+    return 'small'
+  }
+  if (density === 'relaxed') {
+    return 'large'
+  }
+  return 'default'
+}
+
+export const buildShellStyles = (accentColor?: string) => {
+  if (!accentColor) {
+    return undefined
+  }
+
+  return {
+    '--halo-plugin-template-color-primary': accentColor,
+  }
+}

package/ui/src/lib/template.spec.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest'
+import { buildAudienceLabel, formatCellValue, toTagType } from './template'
+
+describe('template helpers', () => {
+  it('maps known audiences to readable labels', () => {
+    expect(buildAudienceLabel('console')).toBe('Console')
+    expect(buildAudienceLabel('uc')).toBe('User Center')
+    expect(buildAudienceLabel('other')).toBe('Unknown')
+  })
+
+  it('normalizes cell values', () => {
+    expect(formatCellValue('hello')).toBe('hello')
+    expect(formatCellValue(true)).toBe('是')
+    expect(formatCellValue(false)).toBe('否')
+    expect(formatCellValue('')).toBe('—')
+  })
+
+  it('maps semantic tones to Element Plus tags', () => {
+    expect(toTagType('primary')).toBe('primary')
+    expect(toTagType('success')).toBe('success')
+    expect(toTagType('recommended')).toBe('warning')
+    expect(toTagType('unknown')).toBe('info')
+  })
+})

package/ui/src/lib/template.ts

@@ -0,0 +1,52 @@
+import type { TagProps } from 'element-plus'
+import type { ResponsiveColumn } from '@/types'
+
+export const featureColumns: ResponsiveColumn[] = [
+  { key: 'title', label: '能力', minWidth: 180 },
+  { key: 'area', label: '区域', minWidth: 120 },
+  { key: 'description', label: '说明', minWidth: 280 },
+  { key: 'enabled', label: '状态', minWidth: 120, align: 'right' },
+]
+
+export const checklistColumns: ResponsiveColumn[] = [
+  { key: 'title', label: '检查项', minWidth: 180 },
+  { key: 'audience', label: '受众', minWidth: 120 },
+  { key: 'description', label: '说明', minWidth: 260 },
+  { key: 'status', label: '状态', minWidth: 120, align: 'right' },
+]
+
+export const toTagType = (tone?: string): TagProps['type'] => {
+  switch (tone) {
+    case 'primary':
+      return 'primary'
+    case 'success':
+      return 'success'
+    case 'warning':
+    case 'recommended':
+      return 'warning'
+    case 'danger':
+      return 'danger'
+    default:
+      return 'info'
+  }
+}
+
+export const buildAudienceLabel = (audience: string) => {
+  if (audience === 'console') {
+    return 'Console'
+  }
+  if (audience === 'uc') {
+    return 'User Center'
+  }
+  return 'Unknown'
+}
+
+export const formatCellValue = (value: unknown) => {
+  if (value === null || value === undefined || value === '') {
+    return '—'
+  }
+  if (typeof value === 'boolean') {
+    return value ? '是' : '否'
+  }
+  return String(value)
+}

package/ui/src/lib/theme.ts

@@ -0,0 +1,31 @@
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+export const useDocumentTheme = () => {
+  const isDark = ref(false)
+  let observer: MutationObserver | undefined
+
+  const sync = () => {
+    if (typeof document === 'undefined') {
+      isDark.value = false
+      return
+    }
+    isDark.value = document.documentElement.classList.contains('dark')
+  }
+
+  onMounted(() => {
+    sync()
+    observer = new MutationObserver(sync)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    })
+  })
+
+  onBeforeUnmount(() => {
+    observer?.disconnect()
+  })
+
+  return {
+    isDark,
+  }
+}

package/ui/src/types/index.ts

@@ -0,0 +1,59 @@
+import type {
+  PluginTemplateChecklistItem as GeneratedPluginTemplateChecklistItem,
+  PluginTemplateFeatureItem as GeneratedPluginTemplateFeatureItem,
+  PluginTemplateOverview as GeneratedPluginTemplateOverview,
+  PluginTemplateStatItem as GeneratedPluginTemplateStatItem,
+} from '@/api/generated'
+
+export interface PluginTemplateStatItem extends GeneratedPluginTemplateStatItem {
+  key: string
+  label: string
+  value: string
+  helper: string
+  tone: string
+}
+
+export interface PluginTemplateFeatureItem extends GeneratedPluginTemplateFeatureItem {
+  key: string
+  title: string
+  area: string
+  description: string
+  enabled: boolean
+}
+
+export interface PluginTemplateChecklistItem extends GeneratedPluginTemplateChecklistItem {
+  key: string
+  title: string
+  description: string
+  audience: string
+  status: string
+}
+
+export interface PluginTemplateOverview extends GeneratedPluginTemplateOverview {
+  pluginName: string
+  displayName: string
+  audience: string
+  audienceLabel: string
+  consolePath: string
+  ucPath: string
+  settingName: string
+  configMapName: string
+  generatedClientPath: string
+  generatedAt: string
+  enableConsoleDashboard: boolean
+  enableUcDashboard: boolean
+  enableAttachmentProvider: boolean
+  accentColor: string
+  density: string
+  supportLink: string
+  stats: PluginTemplateStatItem[]
+  features: PluginTemplateFeatureItem[]
+  checklist: PluginTemplateChecklistItem[]
+}
+
+export interface ResponsiveColumn {
+  key: string
+  label: string
+  minWidth?: number
+  align?: 'left' | 'center' | 'right'
+}

package/ui/src/views/console/ConsoleDashboardView.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import PluginTemplateOverviewPage from '@/components/PluginTemplateOverviewPage.vue'
+</script>
+
+<template>
+  <PluginTemplateOverviewPage audience="console" />
+</template>

package/ui/src/views/uc/UcDashboardView.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import PluginTemplateOverviewPage from '@/components/PluginTemplateOverviewPage.vue'
+</script>
+
+<template>
+  <PluginTemplateOverviewPage audience="uc" />
+</template>

package/ui/tsconfig.app.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/ui/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ]
+}

package/ui/tsconfig.node.json

@@ -0,0 +1,15 @@
+{
+  "extends": "@tsconfig/node20/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

package/ui/tsconfig.vitest.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.app.json",
+  "include": ["src/**/__tests__/*", "env.d.ts"],
+  "exclude": [],
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
+
+    "lib": [],
+    "types": ["node", "jsdom"]
+  }
+}

package/ui/vite.config.ts

@@ -0,0 +1,25 @@
+import { fileURLToPath, URL } from 'url'
+
+import { viteConfig } from '@halo-dev/ui-plugin-bundler-kit'
+import Icons from 'unplugin-icons/vite'
+import { configDefaults } from 'vitest/config'
+
+// For more info,
+// please see https://github.com/halo-dev/halo/tree/main/ui/packages/ui-plugin-bundler-kit
+export default viteConfig({
+  vite: {
+    plugins: [Icons({ compiler: 'vue3' })],
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url)),
+      },
+    },
+
+    // If you don't use Vitest, you can remove the following configuration
+    test: {
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/**'],
+      root: fileURLToPath(new URL('./', import.meta.url)),
+    },
+  },
+})