@antdv-next/docs-plugins 0.0.1

package/src/components/code-demo/context.ts

@@ -0,0 +1,86 @@
+import type { InjectionKey } from 'vue'
+import { inject, provide } from 'vue'
+
+/** 组件内置文案 key（可通过 DemoContext.t / labels 覆盖） */
+export type DemoLabelKey
+  = | 'action.copy'
+    | 'action.copied'
+    | 'action.stackblitz'
+    | 'action.externalLink'
+    | 'action.openPlayground'
+    | 'action.expandCode'
+    | 'action.expandedCode'
+    | 'action.loadError'
+    | 'type.typescript'
+    | 'type.javascript'
+
+export interface DemoContext {
+  /** 当前语言（决定内置文案与 demo 描述的选取），如 'zh-CN' / 'en-US' */
+  locale?: () => string
+  /** 自定义文案（i18n），key 见 DemoLabelKey */
+  t?: (key: DemoLabelKey) => string
+  /** 暗色状态（Sandpack 编辑器主题跟随） */
+  isDark?: () => boolean
+  /**
+   * 额外可被演示源码 import 的模块（浏览器实时编译用）。
+   * 由站点提供（如组件库本体），逐模块容错，不可用只影响编辑预览。
+   */
+  modules?: Record<string, () => Promise<any>>
+  /** 在 Playground 中打开（不提供则隐藏按钮） */
+  openPlayground?: (code: string) => void
+  /** 在 StackBlitz 中打开（不提供则隐藏按钮） */
+  openStackBlitz?: (options: { title: string, code: string }) => void
+  /** demo 独立页地址（不提供则隐藏按钮） */
+  demoPageUrl?: (id: string) => string
+  /** iframe 模式渲染器（不提供则忽略 iframe 属性） */
+  iframeRenderer?: (id: string, height?: string) => any
+  /** 记住 TS/JS 页签偏好（不提供则仅组件内记忆） */
+  preferredCodeType?: {
+    get: () => 'ts' | 'js'
+    set: (value: 'ts' | 'js') => void
+  }
+}
+
+export const demoContextKey: InjectionKey<DemoContext> = Symbol('demo-context')
+
+export function provideDemoContext(context: DemoContext) {
+  provide(demoContextKey, context)
+}
+
+export function useDemoContext(): DemoContext {
+  return inject(demoContextKey, {})
+}
+
+const builtinLabels: Record<string, Record<DemoLabelKey, string>> = {
+  'zh-CN': {
+    'action.copy': '复制代码',
+    'action.copied': '已复制',
+    'action.stackblitz': '在 StackBlitz 中打开',
+    'action.externalLink': '查看独立示例页',
+    'action.openPlayground': '在 Playground 中打开',
+    'action.expandCode': '展开代码',
+    'action.expandedCode': '收起代码',
+    'action.loadError': '源码加载失败',
+    'type.typescript': 'TypeScript',
+    'type.javascript': 'JavaScript',
+  },
+  'en-US': {
+    'action.copy': 'Copy Code',
+    'action.copied': 'Copied',
+    'action.stackblitz': 'Open in StackBlitz',
+    'action.externalLink': 'Open demo page',
+    'action.openPlayground': 'Open in Playground',
+    'action.expandCode': 'Expand code',
+    'action.expandedCode': 'Collapse code',
+    'action.loadError': 'Failed to load source code',
+    'type.typescript': 'TypeScript',
+    'type.javascript': 'JavaScript',
+  },
+}
+
+export function resolveLabel(context: DemoContext, key: DemoLabelKey): string {
+  if (context.t)
+    return context.t(key)
+  const locale = context.locale?.() ?? 'zh-CN'
+  return builtinLabels[locale]?.[key] ?? builtinLabels['en-US']![key]
+}

package/src/components/code-demo/expand-icon.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{
+  expanded?: boolean
+}>()
+</script>
+
+<template>
+  <span role="img" class="anticon">
+    <svg v-if="!expanded" viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor" aria-hidden="true"><title>Expand Icon</title><path d="M1018.645 531.298c8.635-18.61 4.601-41.42-11.442-55.864l-205.108-184.68c-19.7-17.739-50.05-16.148-67.789 3.552-17.738 19.7-16.148 50.051 3.553 67.79l166.28 149.718-167.28 150.62c-19.7 17.738-21.291 48.088-3.553 67.789 17.739 19.7 48.089 21.291 67.79 3.553l205.107-184.68a47.805 47.805 0 0 0 12.442-17.798zM119.947 511.39l166.28-149.719c19.7-17.738 21.29-48.088 3.552-67.789-17.738-19.7-48.088-21.291-67.789-3.553L16.882 475.01C.84 489.456-3.194 512.264 5.44 530.874a47.805 47.805 0 0 0 12.442 17.798l205.108 184.68c19.7 17.739 50.05 16.148 67.79-3.552 17.738-19.7 16.147-50.051-3.553-67.79l-167.28-150.62z" fill-rule="evenodd" opacity="0.78" /></svg>
+    <svg v-else viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor" aria-hidden="true"><title>Expand Icon</title><path d="M1018.645 531.298c8.635-18.61 4.601-41.42-11.442-55.864l-205.108-184.68c-19.7-17.739-50.05-16.148-67.789 3.552-17.738 19.7-16.148 50.051 3.553 67.79l166.28 149.718-167.28 150.62c-19.7 17.738-21.291 48.088-3.553 67.789 17.739 19.7 48.089 21.291 67.79 3.553l205.107-184.68a47.805 47.805 0 0 0 12.442-17.798zM119.947 511.39l166.28-149.719c19.7-17.738 21.29-48.088 3.552-67.789-17.738-19.7-48.088-21.291-67.789-3.553L16.882 475.01C.84 489.456-3.194 512.264 5.44 530.874a47.805 47.805 0 0 0 12.442 17.798l205.108 184.68c19.7 17.739 50.05 16.148 67.79-3.552 17.738-19.7 16.147-50.051-3.553-67.79l-167.28-150.62zm529.545-377.146c24.911 9.066 37.755 36.61 28.688 61.522L436.03 861.068c-9.067 24.911-36.611 37.755-61.522 28.688-24.911-9.066-37.755-36.61-28.688-61.522l242.15-665.302c9.067-24.911 36.611-37.755 61.522-28.688z" fill-rule="evenodd" opacity="0.78" /></svg>
+  </span>
+</template>

package/src/components/code-demo/external-link-icon.vue

@@ -0,0 +1,5 @@
+<template>
+  <span role="img" class="anticon">
+    <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor"><title>External Link Icon</title><path d="M853.333 469.333A42.667 42.667 0 0 0 810.667 512v256A42.667 42.667 0 0 1 768 810.667H256A42.667 42.667 0 0 1 213.333 768V256A42.667 42.667 0 0 1 256 213.333h256A42.667 42.667 0 0 0 512 128H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128V512a42.667 42.667 0 0 0-42.667-42.667z" /><path d="M682.667 213.333h67.413L481.707 481.28a42.667 42.667 0 0 0 0 60.587 42.667 42.667 0 0 0 60.586 0L810.667 273.92v67.413A42.667 42.667 0 0 0 853.333 384 42.667 42.667 0 0 0 896 341.333V170.667A42.667 42.667 0 0 0 853.333 128H682.667a42.667 42.667 0 0 0 0 85.333z" /></svg>
+  </span>
+</template>