create-halo-plugin-template 1.0.0 → 1.0.2

package/ui/src/components/PluginTemplateAttachmentTab.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ElButton } from 'element-plus'
+import logoUrl from '@/assets/logo.svg'
+
+const props = withDefaults(
+  defineProps<{
+    selected?: unknown[]
+  }>(),
+  {
+    selected: () => [],
+  },
+)
+
+const emit = defineEmits<{
+  (event: 'update:selected', attachments: unknown[]): void
+}>()
+
+const assets = [
+  {
+    id: 'logo',
+    title: '模板 Logo',
+    description: '用作后台菜单图标、空状态或品牌占位。',
+    value: logoUrl,
+  },
+  {
+    id: 'docs',
+    title: '开发文档',
+    description: '示例外链资源，也可以替换成素材库或 CDN 地址。',
+    value: 'https://docs.halo.run/developer-guide/plugin/introduction',
+  },
+]
+
+const selectAsset = (value: string) => {
+  emit('update:selected', [value])
+}
+
+const isSelected = (value: string) => props.selected.some((item) => item === value)
+</script>
+
+<template>
+  <div class="halo-plugin-template-admin-attachment-list">
+    <article
+      v-for="asset in assets"
+      :key="asset.id"
+      class="halo-plugin-template-admin-attachment-item"
+    >
+      <div class="halo-plugin-template-admin-attachment-preview">
+        <img v-if="asset.id === 'logo'" :src="asset.value" alt="Template asset" />
+        <span v-else>DOC</span>
+      </div>
+      <div>
+        <h3 class="halo-plugin-template-admin-card-title" style="font-size: 15px">
+          {{ asset.title }}
+        </h3>
+        <p class="halo-plugin-template-admin-card-description">
+          {{ asset.description }}
+        </p>
+      </div>
+      <div>
+        <ElButton
+          :type="isSelected(asset.value) ? 'success' : 'primary'"
+          @click="selectAsset(asset.value)"
+        >
+          {{ isSelected(asset.value) ? '已选择' : '选择资源' }}
+        </ElButton>
+      </div>
+    </article>
+  </div>
+</template>

package/ui/src/components/PluginTemplateCommonTable.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ElEmpty, ElTable, ElTableColumn } from 'element-plus'
+import type { ResponsiveColumn } from '@/types'
+import { formatCellValue } from '@/lib/template'
+
+const props = withDefaults(
+  defineProps<{
+    rows: Record<string, unknown>[]
+    columns: ResponsiveColumn[]
+    rowKey?: string
+    emptyDescription?: string
+  }>(),
+  {
+    rowKey: 'key',
+    emptyDescription: '暂无数据',
+  },
+)
+
+const resolveRowKey = (row: Record<string, unknown>) =>
+  String(row[props.rowKey] ?? row.id ?? row.title ?? Math.random())
+</script>
+
+<template>
+  <div>
+    <div class="halo-plugin-template-admin-table-desktop">
+      <ElTable :data="rows" style="width: 100%" :row-key="resolveRowKey">
+        <ElTableColumn
+          v-for="column in columns"
+          :key="column.key"
+          :prop="column.key"
+          :label="column.label"
+          :min-width="column.minWidth"
+          :align="column.align"
+        >
+          <template #default="{ row }">
+            <slot :name="`cell-${column.key}`" :row="row" :value="row[column.key]">
+              {{ formatCellValue(row[column.key]) }}
+            </slot>
+          </template>
+        </ElTableColumn>
+      </ElTable>
+    </div>
+
+    <div v-if="rows.length" class="halo-plugin-template-admin-table-mobile">
+      <article
+        v-for="row in rows"
+        :key="resolveRowKey(row)"
+        class="halo-plugin-template-admin-table-card"
+      >
+        <div
+          v-for="column in columns"
+          :key="column.key"
+          class="halo-plugin-template-admin-table-card-row"
+        >
+          <span class="halo-plugin-template-admin-table-card-label">{{ column.label }}</span>
+          <div class="halo-plugin-template-admin-table-card-value">
+            <slot :name="`cell-${column.key}`" :row="row" :value="row[column.key]">
+              {{ formatCellValue(row[column.key]) }}
+            </slot>
+          </div>
+        </div>
+      </article>
+    </div>
+
+    <div v-else class="halo-plugin-template-admin-table-mobile">
+      <ElEmpty :description="emptyDescription" />
+    </div>
+  </div>
+</template>

package/ui/src/components/PluginTemplateDashboardWidget.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ElButton, ElSkeleton } from 'element-plus'
+import { computed, onMounted, ref } from 'vue'
+import { templateConsoleApi } from '@/api'
+import type { PluginTemplateOverview } from '@/types'
+
+const loading = ref(true)
+const overview = ref<PluginTemplateOverview | null>(null)
+
+const load = async () => {
+  loading.value = true
+  try {
+    overview.value = await templateConsoleApi.getOverview()
+  } finally {
+    loading.value = false
+  }
+}
+
+const stats = computed(() => overview.value?.stats?.slice(0, 2) ?? [])
+
+const openConsole = () => {
+  window.location.assign(`/console${overview.value?.consolePath || '/halo-plugin-template'}`)
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="halo-plugin-template-admin-widget">
+    <div class="halo-plugin-template-admin-widget-header">
+      <div>
+        <h3 class="halo-plugin-template-admin-widget-title">模板工作台</h3>
+        <p class="halo-plugin-template-admin-widget-description">
+          直接复用模板默认 API、路由和扩展点，作为新插件的第一块控制台仪表盘。
+        </p>
+      </div>
+      <ElButton type="primary" plain @click="openConsole">
+        打开页面
+      </ElButton>
+    </div>
+
+    <ElSkeleton :loading="loading" animated :rows="3">
+      <template #default>
+        <div class="halo-plugin-template-admin-widget-stats">
+          <div
+            v-for="item in stats"
+            :key="item.key"
+            class="halo-plugin-template-admin-widget-stat"
+          >
+            <p class="halo-plugin-template-admin-stat-label">{{ item.label }}</p>
+            <p class="halo-plugin-template-admin-card-title" style="margin-top: 6px">
+              {{ item.value }}
+            </p>
+            <p class="halo-plugin-template-admin-card-description" style="margin-top: 8px">
+              {{ item.helper }}
+            </p>
+          </div>
+        </div>
+      </template>
+    </ElSkeleton>
+  </div>
+</template>

package/ui/src/components/PluginTemplateOverviewPage.vue

@@ -0,0 +1,254 @@
+<script setup lang="ts">
+import { stores, utils } from '@halo-dev/ui-shared'
+import { ElAlert, ElButton, ElLink, ElSkeleton } from 'element-plus'
+import { storeToRefs } from 'pinia'
+import { computed, onMounted } from 'vue'
+import { buildAudienceLabel, checklistColumns, featureColumns } from '@/lib/template'
+import { useTemplateOverview } from '@/composables/useTemplateOverview'
+import PluginTemplateCommonTable from './PluginTemplateCommonTable.vue'
+import PluginUiProvider from './ui/PluginUiProvider.vue'
+import UiMetricCard from './ui/UiMetricCard.vue'
+import UiSectionCard from './ui/UiSectionCard.vue'
+import UiStatusPill from './ui/UiStatusPill.vue'
+
+const props = defineProps<{
+  audience: 'console' | 'uc'
+}>()
+
+const { overview, loading, errorMessage, stats, features, checklist, load } =
+  useTemplateOverview(props.audience)
+
+const { currentUser } = storeToRefs(stores.currentUser())
+const { globalInfo } = storeToRefs(stores.globalInfo())
+
+const viewerName = computed(
+  () =>
+    currentUser.value?.user?.spec?.displayName ||
+    currentUser.value?.user?.metadata?.name ||
+    'Halo Developer',
+)
+
+const siteTitle = computed(() => globalInfo.value?.siteTitle || 'Halo')
+const buildTime = computed(() => utils.date.format(new Date(), 'YYYY-MM-DD HH:mm'))
+const audienceLabel = computed(() => buildAudienceLabel(props.audience))
+const rsbuildGuideLink = 'https://docs.halo.run/developer-guide/plugin/basics/ui/build'
+const currentPath = computed(() =>
+  props.audience === 'console' ? overview.value?.consolePath || '/halo-plugin-template' : overview.value?.ucPath || '/halo-plugin-template',
+)
+const supportLink = computed(
+  () => overview.value?.supportLink || 'https://docs.halo.run/developer-guide/plugin/introduction',
+)
+const densityLabel = computed(() => {
+  if (overview.value?.density === 'compact') {
+    return '紧凑'
+  }
+  if (overview.value?.density === 'relaxed') {
+    return '宽松'
+  }
+  return '平衡'
+})
+
+const openExternal = (url: string) => {
+  window.open(url, '_blank')
+}
+
+const densityTone = computed(() => overview.value?.density || 'balanced')
+const attachmentState = computed(() =>
+  overview.value?.enableAttachmentProvider ? '附件已启用' : '附件已关闭',
+)
+const attachmentTone = computed(() =>
+  overview.value?.enableAttachmentProvider ? 'success' : 'warning',
+)
+
+onMounted(load)
+</script>
+
+<template>
+  <PluginUiProvider
+    :audience="audience"
+    :density="overview?.density"
+    :accent-color="overview?.accentColor"
+  >
+    <section class="halo-plugin-template-admin-page">
+      <header class="halo-plugin-template-admin-hero">
+        <div>
+          <p class="halo-plugin-template-admin-eyebrow">{{ siteTitle }} · {{ audienceLabel }}</p>
+          <h1 class="halo-plugin-template-admin-title">
+            {{ overview?.displayName || 'Halo Plugin Template' }}
+          </h1>
+          <p class="halo-plugin-template-admin-description">
+            这不是单纯的欢迎页，而是一份可重复初始化的 Halo 插件 starter：
+            默认接好 Console / UC / Element Plus / 扩展点 / OpenAPI。
+          </p>
+          <div class="halo-plugin-template-admin-meta">
+            <span class="halo-plugin-template-admin-meta-item">
+              当前查看者：{{ viewerName }}
+            </span>
+            <span class="halo-plugin-template-admin-meta-item">
+              构建时间：{{ buildTime }}
+            </span>
+            <span class="halo-plugin-template-admin-meta-item">
+              路由前缀：{{ currentPath }}
+            </span>
+          </div>
+        </div>
+
+        <div class="halo-plugin-template-admin-hero-actions">
+          <ElButton type="primary" @click="openExternal(supportLink)">
+            Halo 插件文档
+          </ElButton>
+          <ElButton plain @click="openExternal(rsbuildGuideLink)">
+            UI 构建说明
+          </ElButton>
+        </div>
+      </header>
+
+      <ElAlert
+        v-if="errorMessage"
+        title="模板概览接口加载失败"
+        :description="errorMessage"
+        type="warning"
+        show-icon
+        :closable="false"
+      />
+
+      <ElSkeleton :loading="loading" animated :rows="6">
+        <template #default>
+          <div class="halo-plugin-template-admin-stats">
+            <UiMetricCard
+              v-for="item in stats"
+              :key="item.key"
+              :label="item.label"
+              :value="item.value"
+              :helper="item.helper"
+              :tone="item.tone"
+            />
+          </div>
+
+          <section class="halo-plugin-template-admin-grid">
+            <UiSectionCard
+              title="初始化建议"
+              description="把模板里的默认值替换干净，再继续堆业务代码。"
+            >
+              <div class="halo-plugin-template-admin-checklist">
+                <article
+                  v-for="item in checklist.slice(0, 3)"
+                  :key="item.key"
+                  class="halo-plugin-template-admin-checklist-item"
+                >
+                  <div class="halo-plugin-template-admin-checklist-copy">
+                    <h3 class="halo-plugin-template-admin-checklist-title">{{ item.title }}</h3>
+                    <p class="halo-plugin-template-admin-checklist-description">
+                      {{ item.description }}
+                    </p>
+                  </div>
+                  <UiStatusPill :label="item.status" :tone="item.status" />
+                </article>
+              </div>
+            </UiSectionCard>
+
+            <UiSectionCard
+              title="当前上下文"
+              description="这些值可以直接帮助你确认模板是否已经被成功初始化。"
+            >
+              <div class="halo-plugin-template-admin-kpis">
+                <div class="halo-plugin-template-admin-checklist-item">
+                  <div class="halo-plugin-template-admin-checklist-copy">
+                    <h3 class="halo-plugin-template-admin-checklist-title">Setting 资源</h3>
+                    <p class="halo-plugin-template-admin-checklist-description">
+                      {{ overview?.settingName }}
+                    </p>
+                  </div>
+                  <UiStatusPill label="已接线" tone="success" />
+                </div>
+                <div class="halo-plugin-template-admin-checklist-item">
+                  <div class="halo-plugin-template-admin-checklist-copy">
+                    <h3 class="halo-plugin-template-admin-checklist-title">ConfigMap 资源</h3>
+                    <p class="halo-plugin-template-admin-checklist-description">
+                      {{ overview?.configMapName }}
+                    </p>
+                  </div>
+                  <UiStatusPill label="已接线" tone="success" />
+                </div>
+                <div class="halo-plugin-template-admin-checklist-item">
+                  <div class="halo-plugin-template-admin-checklist-copy">
+                    <h3 class="halo-plugin-template-admin-checklist-title">API 输出目录</h3>
+                    <p class="halo-plugin-template-admin-checklist-description">
+                      {{ overview?.generatedClientPath }}
+                    </p>
+                  </div>
+                  <UiStatusPill label="已接线" tone="success" />
+                </div>
+                <div class="halo-plugin-template-admin-checklist-item">
+                  <div class="halo-plugin-template-admin-checklist-copy">
+                    <h3 class="halo-plugin-template-admin-checklist-title">页面密度</h3>
+                    <p class="halo-plugin-template-admin-checklist-description">
+                      {{ densityLabel }}
+                    </p>
+                  </div>
+                  <UiStatusPill :label="densityTone" tone="info" />
+                </div>
+                <div class="halo-plugin-template-admin-checklist-item">
+                  <div class="halo-plugin-template-admin-checklist-copy">
+                    <h3 class="halo-plugin-template-admin-checklist-title">主色</h3>
+                    <p class="halo-plugin-template-admin-checklist-description">
+                      {{ overview?.accentColor || '#2457F5' }}
+                    </p>
+                  </div>
+                  <UiStatusPill :label="attachmentState" :tone="attachmentTone" />
+                </div>
+              </div>
+            </UiSectionCard>
+          </section>
+
+          <UiSectionCard
+            title="功能矩阵"
+            description="这张表列出模板默认预置的前后端能力，你可以在初始化后按需删减。"
+          >
+            <PluginTemplateCommonTable
+              :rows="features"
+              :columns="featureColumns"
+              empty-description="暂无功能矩阵"
+            >
+              <template #cell-enabled="{ value }">
+                <UiStatusPill :label="value ? '已启用' : '按需接入'" :tone="value ? 'success' : 'info'" />
+              </template>
+            </PluginTemplateCommonTable>
+          </UiSectionCard>
+
+          <UiSectionCard
+            title="初始化清单"
+            description="前端和后端都通过统一的检查清单推进，避免漏掉 settings、角色模板和 API 包装层。"
+          >
+            <PluginTemplateCommonTable
+              :rows="checklist"
+              :columns="checklistColumns"
+              empty-description="暂无初始化清单"
+            >
+              <template #cell-status="{ value }">
+                <UiStatusPill :label="String(value)" :tone="String(value)" />
+              </template>
+            </PluginTemplateCommonTable>
+          </UiSectionCard>
+
+          <UiSectionCard
+            title="下一步"
+            description="模板的真实价值在于后续多个插件项目都沿用同一套工程边界。"
+          >
+            <ul style="margin: 0; padding-left: 18px; color: var(--halo-plugin-template-text-secondary); line-height: 1.8">
+              <li>先运行初始化脚本，再修改 `plugin.yaml`、`settings.yaml`、角色模板和 Java 包名。</li>
+              <li>初始化后执行 `node scripts/verify-template.mjs`，确认插件名、包名、权限前缀和文档入口已经全部收敛。</li>
+              <li>新接口补好 Springdoc 后，执行 `./gradlew generateApiClient`，再在 `ui/src/api/index.ts` 暴露新增能力。</li>
+              <li>按插件实际范围裁剪 UC、附件扩展和工作台部件，避免模板示例残留到正式项目。</li>
+              <li>
+                如需切换到 Rsbuild，可参考
+                <ElLink :href="rsbuildGuideLink" target="_blank">Halo 官方 UI 构建说明</ElLink>
+                和仓库内的 `docs/rsbuild-switch.md`。
+              </li>
+            </ul>
+          </UiSectionCard>
+        </template>
+      </ElSkeleton>
+    </section>
+  </PluginUiProvider>
+</template>

package/ui/src/components/ui/PluginUiProvider.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import { ElConfigProvider } from 'element-plus'
+import { computed } from 'vue'
+import { buildShellStyles, resolveElementSize } from '@/lib/plugin-ui'
+import { useDocumentTheme } from '@/lib/theme'
+
+const props = withDefaults(
+  defineProps<{
+    audience?: 'console' | 'uc'
+    density?: string
+    accentColor?: string
+  }>(),
+  {
+    audience: 'console',
+    density: 'balanced',
+    accentColor: '',
+  },
+)
+
+const { isDark } = useDocumentTheme()
+
+const elementSize = computed(() => resolveElementSize(props.density))
+
+const classes = computed(() => [
+  'halo-plugin-template-admin-shell',
+  `halo-plugin-template-admin-shell--${props.audience}`,
+  { dark: isDark.value },
+])
+
+const styles = computed(() => buildShellStyles(props.accentColor))
+</script>
+
+<template>
+  <ElConfigProvider :locale="zhCn" :size="elementSize" :z-index="2100">
+    <div :class="classes" :style="styles">
+      <slot />
+    </div>
+  </ElConfigProvider>
+</template>

package/ui/src/components/ui/UiMetricCard.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import UiStatusPill from './UiStatusPill.vue'
+
+defineProps<{
+  label: string
+  value: string
+  helper: string
+  tone?: string
+}>()
+</script>
+
+<template>
+  <article class="halo-plugin-template-admin-stat">
+    <p class="halo-plugin-template-admin-stat-label">{{ label }}</p>
+    <p class="halo-plugin-template-admin-stat-value">{{ value }}</p>
+    <p class="halo-plugin-template-admin-stat-helper">{{ helper }}</p>
+    <div style="margin-top: 14px">
+      <UiStatusPill :label="label" :tone="tone" />
+    </div>
+  </article>
+</template>

package/ui/src/components/ui/UiSectionCard.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ElCard } from 'element-plus'
+
+defineProps<{
+  title: string
+  description?: string
+}>()
+</script>
+
+<template>
+  <ElCard class="halo-plugin-template-admin-surface" shadow="never">
+    <div class="halo-plugin-template-admin-card-header">
+      <div>
+        <h2 class="halo-plugin-template-admin-card-title">{{ title }}</h2>
+        <p v-if="description" class="halo-plugin-template-admin-card-description">
+          {{ description }}
+        </p>
+      </div>
+      <slot name="actions" />
+    </div>
+    <div style="margin-top: 20px">
+      <slot />
+    </div>
+  </ElCard>
+</template>

package/ui/src/components/ui/UiStatusPill.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ElTag } from 'element-plus'
+import { computed } from 'vue'
+import { toTagType } from '@/lib/template'
+
+const props = defineProps<{
+  label: string
+  tone?: string
+}>()
+
+const tagType = computed(() => toTagType(props.tone))
+</script>
+
+<template>
+  <ElTag :type="tagType" round effect="light">
+    {{ label }}
+  </ElTag>
+</template>

package/ui/src/composables/useTemplateOverview.ts

@@ -0,0 +1,38 @@
+import { computed, ref } from 'vue'
+import { templateConsoleApi, templateUcApi } from '@/api'
+import type { PluginTemplateOverview } from '@/types'
+
+type Audience = 'console' | 'uc'
+
+export const useTemplateOverview = (audience: Audience) => {
+  const overview = ref<PluginTemplateOverview | null>(null)
+  const loading = ref(false)
+  const errorMessage = ref('')
+
+  const load = async () => {
+    loading.value = true
+    errorMessage.value = ''
+
+    try {
+      const response =
+        audience === 'console'
+          ? await templateConsoleApi.getOverview()
+          : await templateUcApi.getOverview()
+      overview.value = response
+    } catch (error) {
+      errorMessage.value = error instanceof Error ? error.message : '模板概览加载失败'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    overview,
+    loading,
+    errorMessage,
+    stats: computed(() => overview.value?.stats ?? []),
+    features: computed(() => overview.value?.features ?? []),
+    checklist: computed(() => overview.value?.checklist ?? []),
+    load,
+  }
+}