feat(docs): 重做 Track Studio 官网首页并完善 SEO

Author: coderDJing

.prettierignore

@@ -7,3 +7,4 @@ tsconfig.*.json
 resources
 rust_package
 *.md
+docs/public/assets/unified-waveforms/list-previews.json

docs/.vitepress/appBridge.ts

@@ -0,0 +1,95 @@
+// 让官网直接渲染应用 renderer 里的真实 Vue 组件所需的构建配置。
+// 应用由 electron-vite 构建，这里补齐它在 VitePress（普通 Vite）下缺的几样东西：
+// - 路径别名 @renderer / @shared / src
+// - electron-vite 专有的 `?asset` 导入（改写成 Vite 标准的 `?url`）
+// - 应用自定义的 `*.wasm?inline`、`<template src>` 外置模板
+// - renderer 代码里读取的 process.env.NODE_ENV 与 vue-i18n 编译期开关
+import { readFile } from 'node:fs/promises'
+import { fileURLToPath, pathToFileURL } from 'node:url'
+import type { Plugin, UserConfig } from 'vite'
+
+const repoRoot = fileURLToPath(new URL('../../', import.meta.url)).replace(/\\/g, '/')
+const rendererSrc = `${repoRoot}src/renderer/src`
+const sharedSrc = `${repoRoot}src/shared`
+
+const assetQueryPlugin = (): Plugin => ({
+  name: 'frkb-docs-asset-query',
+  enforce: 'pre',
+  async resolveId(source, importer, options) {
+    if (!source.endsWith('?asset')) return null
+    const resolved = await this.resolve(source.slice(0, -'?asset'.length), importer, {
+      ...options,
+      skipSelf: true
+    })
+    return resolved ? `${resolved.id}?url` : null
+  }
+})
+
+// HorizontalBrowseRawWaveformDetail.vue 用 <template src="./*.template.html"> 外置模板。
+// electron-vite 用的 @vitejs/plugin-vue 6 支持外置模板；VitePress 1.x 内置的 plugin-vue 5 会把它当成
+// 空模板，组件渲染成 <template></template>。这里在进 SFC 编译前把外置模板内联回去。
+// 应用模板文件可能含 <template> 外壳，也可能只有模板正文；SFC 编译器需要完整的模板块。
+const inlineExternalTemplatePlugin = (): Plugin => ({
+  name: 'frkb-docs-inline-external-template',
+  enforce: 'pre',
+  async transform(code, id) {
+    const filePath = id.split('?')[0]
+    if (!filePath.endsWith('.vue') || !filePath.startsWith(rendererSrc)) return null
+    const match = code.match(/<template\s+src="([^"]+)"\s*><\/template>/)
+    if (!match) return null
+    const templatePath = fileURLToPath(new URL(match[1], pathToFileURL(filePath)))
+    this.addWatchFile(templatePath)
+    const templateSource = (await readFile(templatePath, 'utf8')).trim()
+    const templateBlock = /^<template(?:\s|>)/.test(templateSource)
+      ? templateSource
+      : `<template>\n${templateSource}\n</template>`
+    return code.replace(match[0], templateBlock)
+  }
+})
+
+// 与 electron.vite.config.ts 的 inlineWasmPlugin 完全相同：`*.wasm?inline` 导出 base64 data URL
+// （Mixtape 的变速引擎 rubberband-wasm 这样引入）
+const inlineWasmPlugin = (): Plugin => ({
+  name: 'frkb-docs-inline-wasm',
+  enforce: 'pre',
+  async load(id) {
+    const [filePath, query = ''] = id.split('?')
+    if (!filePath.endsWith('.wasm') || !query.split('&').includes('inline')) return null
+    const bytes = await readFile(filePath)
+    const dataUrl = `data:application/wasm;base64,${bytes.toString('base64')}`
+    return `export default ${JSON.stringify(dataUrl)}`
+  }
+})
+
+export const appBridgeViteConfig: UserConfig = {
+  plugins: [assetQueryPlugin(), inlineExternalTemplatePlugin(), inlineWasmPlugin()],
+  resolve: {
+    alias: [
+      { find: /^@renderer\//, replacement: `${rendererSrc}/` },
+      { find: /^@shared\//, replacement: `${sharedSrc}/` },
+      { find: /^src\//, replacement: `${repoRoot}src/` }
+    ]
+  },
+  define: {
+    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
+    // vue-i18n 的 esm-bundler 构建读取这些编译期开关，Vite + plugin-vue 默认只注入 Vue 自己的
+    __VUE_PROD_DEVTOOLS__: 'false',
+    __VUE_I18N_FULL_INSTALL__: 'true',
+    __VUE_I18N_LEGACY_API__: 'false',
+    __INTLIFY_PROD_DEVTOOLS__: 'false',
+    __INTLIFY_JIT_COMPILATION__: 'true',
+    __INTLIFY_DROP_MESSAGE_COMPILER__: 'false'
+  },
+  ssr: {
+    // SSR 阶段也要走同一套 define，不能把 vue-i18n 当外部依赖直接 require
+    noExternal: ['vue-i18n', '@intlify/core-base', '@intlify/shared', '@intlify/message-compiler']
+  },
+  css: {
+    preprocessorOptions: {
+      scss: { api: 'modern-compiler', silenceDeprecations: ['legacy-js-api'] }
+    }
+  },
+  server: {
+    fs: { allow: [repoRoot] }
+  }
+}

docs/.vitepress/config.mts

@@ -1,40 +1,35 @@
 import { defineConfig } from 'vitepress'
-
-const jsonLd = JSON.stringify({
-  '@context': 'https://schema.org',
-  '@type': 'SoftwareApplication',
-  name: 'Track Studio',
-  alternateName: ['FRKB', 'FRKB Rapid Audio Organization Tool'],
-  applicationCategory: 'MultimediaApplication',
-  operatingSystem: 'Windows, macOS',
-  url: 'https://coderdjing.github.io/Track-Studio/',
-  downloadUrl: 'https://github.com/coderDJing/Track-Studio/releases/latest',
-  description:
-    'Track Studio (formerly FRKB) is a desktop audio workflow tool for DJs: real file organization, SET playlists, fingerprint dedup, waveform preview, Rekordbox libraries, and Mixtape.'
-})
+import { appBridgeViteConfig } from './appBridge'
+import { buildSeoHead } from './seo'
 
 export default defineConfig({
   title: 'Track Studio',
-  description: 'Track Studio (formerly FRKB) — Rapid Audio Organization Tool',
+  description: 'Track Studio — DJ 音乐整理与演出准备工作站',
   base: '/Track-Studio/',
+  // 官网只做暗色，与应用暗色主题保持一致
+  appearance: 'force-dark',
+  // 首页直接渲染应用的真实组件，需要应用的别名与导入约定
+  vite: appBridgeViteConfig,
   lastUpdated: true,
   cleanUrls: true,
+  sitemap: { hostname: 'https://coderdjing.github.io/Track-Studio/' },
+  transformHead: ({ page, title, description }) => buildSeoHead(page, title, description),
 
   locales: {
     root: {
       label: '简体中文',
       lang: 'zh-CN',
-      title: 'Track Studio - 开源音频快速整理工具',
+      title: 'Track Studio - DJ 音乐整理与演出准备工作站',
       description:
-        '内容感知去重、波形试听、Mixtape 自动录制、Stem 分轨与 Rekordbox U 盘库整合在同一套音频工作流里。'
+        '为 DJ 整理真实音频文件、按指纹去重、双轨波形试听、编排 SET，并用 Mixtape 录制与 Stem 分轨准备演出。支持 Windows 和 macOS。'
     },
     en: {
       label: 'English',
       lang: 'en-US',
       link: '/en/',
-      title: 'Track Studio - Fast Audio Organization Tool',
+      title: 'Track Studio - DJ Music Library & Set Preparation',
       description:
-        'Content-aware dedup, waveform preview, Mixtape auto-recording, stem separation, and Rekordbox USB libraries in one desktop workflow.'
+        'Organize real audio files, find duplicates by fingerprint, audition on two decks, prepare SET playlists, record Mixtapes, and separate stems. For Windows and macOS.'
     }
   },
 
@@ -45,6 +40,7 @@ export default defineConfig({
 
   head: [
     ['link', { rel: 'icon', href: '/Track-Studio/assets/icon.webp' }],
+    ['meta', { name: 'theme-color', content: '#181818' }],
     ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }],
     ['link', { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }],
     [
@@ -53,7 +49,6 @@ export default defineConfig({
         href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap',
         rel: 'stylesheet'
       }
-    ],
-    ['script', { type: 'application/ld+json' }, jsonLd]
+    ]
   ]
 })

docs/.vitepress/seo.ts

@@ -0,0 +1,79 @@
+import type { HeadConfig } from 'vitepress'
+
+const siteUrl = 'https://coderdjing.github.io/Track-Studio/'
+
+type SeoPage = {
+  path: string
+  alternatePath: string
+  language: 'zh-CN' | 'en-US'
+  isHome: boolean
+}
+
+const pages: Record<string, SeoPage> = {
+  'index.md': { path: '', alternatePath: 'en/', language: 'zh-CN', isHome: true },
+  'en/index.md': { path: 'en/', alternatePath: '', language: 'en-US', isHome: true },
+  'features.md': {
+    path: 'features',
+    alternatePath: 'en/features',
+    language: 'zh-CN',
+    isHome: false
+  },
+  'en/features.md': {
+    path: 'en/features',
+    alternatePath: 'features',
+    language: 'en-US',
+    isHome: false
+  }
+}
+
+const absoluteUrl = (path: string) => `${siteUrl}${path}`
+
+export function buildSeoHead(pagePath: string, title: string, description: string): HeadConfig[] {
+  const page = pages[pagePath.replaceAll('\\', '/').replace(/^\//, '')]
+  if (!page) return []
+
+  const url = absoluteUrl(page.path)
+  const imageUrl = `${siteUrl}assets/og-track-studio-${page.language === 'zh-CN' ? 'zh' : 'en'}.png`
+  const zhUrl = absoluteUrl(page.language === 'zh-CN' ? page.path : page.alternatePath)
+  const enUrl = absoluteUrl(page.language === 'en-US' ? page.path : page.alternatePath)
+  const head: HeadConfig[] = [
+    ['link', { rel: 'canonical', href: url }],
+    ['link', { rel: 'alternate', hreflang: 'zh-CN', href: zhUrl }],
+    ['link', { rel: 'alternate', hreflang: 'en-US', href: enUrl }],
+    ['link', { rel: 'alternate', hreflang: 'x-default', href: zhUrl }],
+    ['meta', { property: 'og:type', content: 'website' }],
+    ['meta', { property: 'og:site_name', content: 'Track Studio' }],
+    ['meta', { property: 'og:locale', content: page.language === 'zh-CN' ? 'zh_CN' : 'en_US' }],
+    ['meta', { property: 'og:title', content: title }],
+    ['meta', { property: 'og:description', content: description }],
+    ['meta', { property: 'og:url', content: url }],
+    ['meta', { property: 'og:image', content: imageUrl }],
+    ['meta', { property: 'og:image:width', content: '1200' }],
+    ['meta', { property: 'og:image:height', content: '630' }],
+    ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
+    ['meta', { name: 'twitter:title', content: title }],
+    ['meta', { name: 'twitter:description', content: description }],
+    ['meta', { name: 'twitter:image', content: imageUrl }]
+  ]
+
+  if (page.isHome) {
+    head.push([
+      'script',
+      { type: 'application/ld+json' },
+      JSON.stringify({
+        '@context': 'https://schema.org',
+        '@type': 'SoftwareApplication',
+        name: 'Track Studio',
+        applicationCategory: 'MultimediaApplication',
+        operatingSystem: 'Windows, macOS',
+        inLanguage: page.language,
+        url,
+        image: imageUrl,
+        downloadUrl: 'https://github.com/coderDJing/Track-Studio/releases/latest',
+        description
+      })
+    ])
+  }
+
+  return head
+}

docs/.vitepress/theme/DownloadButtons.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useLatestRelease } from './useLatestRelease'
+
+const props = defineProps<{
+  windowsLabel: string
+  macLabel: string
+  otherPrefix: string
+}>()
+
+const release = ref<ReturnType<typeof useLatestRelease> | null>(null)
+
+onMounted(() => {
+  release.value = useLatestRelease()
+})
+
+const loading = computed(() => !release.value || release.value.loading.value)
+const version = computed(() => release.value?.version.value ?? '')
+const platform = computed(() => release.value?.platform.value ?? 'unknown')
+const winUrl = computed(() => release.value?.winUrl.value ?? '')
+const macUrl = computed(() => release.value?.macUrl.value ?? '')
+
+// 主按钮给当前系统，另一个平台降级成文字链接；识别不出来时两个都给主按钮
+const primary = computed(() => {
+  if (platform.value === 'mac') return ['mac'] as const
+  if (platform.value === 'win') return ['win'] as const
+  return ['win', 'mac'] as const
+})
+const secondary = computed(() => {
+  if (platform.value === 'mac') return 'win' as const
+  if (platform.value === 'win') return 'mac' as const
+  return null
+})
+
+const labelOf = (os: 'win' | 'mac') => (os === 'win' ? props.windowsLabel : props.macLabel)
+const urlOf = (os: 'win' | 'mac') => (os === 'win' ? winUrl.value : macUrl.value)
+</script>
+
+<template>
+  <div class="dl">
+    <div v-if="loading" class="dl-skeleton" aria-hidden="true"></div>
+    <template v-else>
+      <div class="dl-row">
+        <a
+          v-for="os in primary"
+          :key="os"
+          class="dl-btn"
+          :href="urlOf(os)"
+          target="_blank"
+          rel="nofollow noopener"
+        >
+          <span class="dl-icon-frame" aria-hidden="true">
+            <svg
+              v-if="os === 'win'"
+              class="dl-icon dl-icon--win"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+            >
+              <path
+                d="M0 3.449L9.75 2.1V11.7H0V3.449zm0 17.1L9.75 21.9V12.3H0v8.249zM10.5 1.8L24 0v11.7H10.5V1.8zm0 20.4L24 24V12.3H10.5v9.9z"
+              />
+            </svg>
+            <svg v-else class="dl-icon dl-icon--mac" viewBox="4 2 16 20" fill="currentColor">
+              <path
+                d="M17.057 12.781c.032 2.588 2.254 3.462 2.287 3.477-.025.065-.338 1.15-1.118 2.273-.679.973-1.381 1.94-2.486 1.96-1.087.02-1.391-.651-2.629-.651-1.241 0-1.609.63-2.67.67-1.1.04-1.766-.02-2.527-1.12-1.554-2.245-2.657-6.333-1.055-9.09.795-1.373 2.215-2.248 3.76-2.268 1.171-.025 2.212.748 2.927.748.717 0 1.98-.923 3.342-.782.572.022 2.181.23 3.213 1.731-.082.051-1.922 1.112-1.902 3.33zm-2.404-7.334c.615-.747 1.026-1.783.912-2.821-.892.036-1.972.593-2.612 1.341-.571.659-1.072 1.716-.938 2.731.996.078 2.016-.491 2.638-1.251z"
+              />
+            </svg>
+          </span>
+          <span>{{ labelOf(os) }}</span>
+          <span v-if="version" class="dl-version">{{ version }}</span>
+        </a>
+      </div>
+      <a
+        v-if="secondary"
+        class="dl-other"
+        :href="urlOf(secondary)"
+        target="_blank"
+        rel="nofollow noopener"
+      >
+        {{ otherPrefix }} {{ labelOf(secondary) }}
+      </a>
+    </template>
+  </div>
+</template>