相关 Issue

resolve https://gitcode.com/opengauss/website/issues/336

---

需求摘要

📋 需求分析

1. 需求背景

• 目标: 为 AI 策略页面(/{zh,en}/ai-coding-assistants/)中代码块的复制按钮添加点击复制代码内容的功能
• 优先级: P1

2. 功能需求

核心改动:

• 在 LayoutCharter.vue 中，为渲染结果里 <button class="copy"> 元素绑定点击事件，实现复制对应代码块内容到剪贴板
• 参考已废弃的 TheAICodingAssistant.vue L12-L31 中的复制逻辑实现

验收标准:

• 打开 /{zh}/ai-coding-assistants/ 页面，点击代码块旁的复制按钮，代码内容被复制到剪贴板
• 打开 /{en}/ai-coding-assistants/ 页面，同样可正常复制
• 点击复制后，按钮有视觉反馈（如文案变为"已复制"或图标变化）

3. 已知约束

• 不做的事: 不修改 app\.vitepress\src-new\views\charter 目录下的任何文件（已废弃）
• 其它约束: 页面渲染链路为：index.md frontmatter category: charter → App.vue L45-L66 做布局映射 → LayoutCharter.vue 渲染 markdown 内容，改动需在此链路下生效

Change Type: feat
Decision: 为现有复制按钮新增点击复制代码内容的功能，属于前端交互功能增强，不涉及后端数据变更。

---

设计概览

0. 仓情概览

• 框架: VitePress 1.6.4 (Vue 3 + TypeScript)
• 业务代码位置: app/.vitepress/src-new/（别名 ~@/）
• 关键脚本: pnpm dev / pnpm build / pnpm lint
• i18n / 路由 / SEO 所在: i18n ~@/i18n/；路由由 VitePress markdown 驱动 + App.vue frontmatter category 映射布局；SEO .geo/tdks/ + .geo/jsonld/
• 本次改动相关的 portal 规则: rules/components.md §SSR/SSG 注意事项（window/document 只能在 onMounted 内访问）、rules/components.md §禁止事项（禁止 setup 顶层直接访问 window/document）

1. 整体方案

• 思路: 在 LayoutCharter.vue 的 onMounted 中为 .code-block 容器动态创建 <button class="copy"> 并绑定点击复制逻辑；路由切换时通过 watch(route.path) 重新挂载按钮
• 改动范围:
  • app/.vitepress/src-new/layouts/LayoutCharter.vue — 添加 copy 按钮创建与点击事件绑定逻辑 + .copied 视觉反馈样式
• 不动的部分: markdown 文件（app/zh|en/ai-coding-assistants/index.md）、views/charter/ 目录（已废弃）、composables/useClipboard.ts、i18n/common/、package.json

2. 数据流转

1. VitePress <Content /> 渲染 markdown → 生成 .code-block > pre > code DOM 结构
2. onMounted 遍历 .charter-content-card .code-block，为每个创建 <button class="copy"> 并 appendChild
3. 用户点击 .copy → 读取相邻 <pre> 的 textContent → navigator.clipboard.writeText() → 按钮添加 .copied 类（图标变 checkmark）+ useMessage toast → 2s 后移除 .copied 类

3. 关键改动点

app/.vitepress/src-new/layouts/LayoutCharter.vue

• 现状: <Content /> 渲染 markdown 内容，CSS 已有 .copy 按钮样式（L240-269）但 DOM 中不存在 <button class="copy"> 元素（经 rg 核实：markdown 中无此元素、VitePress 自定义主题未引入 useCopyCode、theme/index.ts 无 copy 逻辑）
• 目标: 在 onMounted 中为每个 .code-block 创建 copy 按钮，绑定点击复制；点击后按钮图标临时变为 checkmark，2s 后恢复；路由切换后重新挂载按钮
• 关键代码片段:

// script setup 新增 import
import { useMessage } from '@opensig/opendesign';
import { useLocale } from '~@/composables/useLocale';
const message = useMessage();
const { t } = useLocale();

const setupCopyButtons = () => {
  const card = document.querySelector('.charter-content-card');
  if (!card) return;
  card.querySelectorAll('.code-block').forEach((block) => {
    if (block.querySelector('.copy')) return;
    const btn = document.createElement('button');
    btn.className = 'copy';
    btn.addEventListener('click', () => {
      const code = block.querySelector('pre')?.textContent ?? '';
      navigator.clipboard.writeText(code).then(() => {
        message.success({ content: t('common.COPY_SUCCESS') });
        btn.classList.add('copied');
        setTimeout(() => btn.classList.remove('copied'), 2000);
      });
    });
    block.appendChild(btn);
  });
};

onMounted(setupCopyButtons);
// ...

/* global style 新增 */
.charter-content-card .copy.copied {
  background-image: url('~@/assets/svg-icons/icon-checkmark.svg');
}

4. 边界情况

1. 剪贴板 API 不可用: navigator.clipboard 在非 HTTPS / 旧浏览器下为 undefined → writeText 会 reject，需 try/catch 并 message.danger({ content: t('common.COPY_FAILED') })
2. 路由切换后按钮丢失: <Content /> 重新渲染时 DOM 被替换，已创建的按钮消失 → watch(route.path, () => nextTick(setupCopyButtons)) 重新挂载
3. i18n 双语同步: common-en.ts 中 COPY_SUCCESS / COPY_FAILED 当前文案为中文（与 common-zh.ts 一致），属于既有 i18n 缺陷，本次不改（避免扩大范围）

5. 测试策略

• developer 改完跑: pnpm lint、pnpm build
• tester 后续补用例方向:
  • /zh/ai-coding-assistants/ 和 /en/ai-coding-assistants/ 页面所有 .code-block 均出现 copy 按钮
  • 点击 copy 后剪贴板内容与代码块一致
  • 从 conduct tab 切换到 ai-coding-assistants tab 后 copy 按钮仍可用
  • 复制失败时出现 danger toast

6. 预览验证清单

• /zh/ai-coding-assistants/ 页面 hover 代码块出现 copy 按钮，点击后代码复制到剪贴板
• /en/ai-coding-assistants/ 页面同样可正常复制
• 点击 copy 后按钮图标变为 checkmark（约 2s 后恢复）
• 从 conduct tab 切换到 ai-coding-assistants tab 后 copy 按钮仍存在且可用
• 浏览器控制台无报错

---

自动化校验

• Build smoke: ⏭ 已跳过 (以 PR 预览部署为准)
• 单元测试: ✅ 全部通过

---

当前PR是否有AI参与

• 否
• 是
  __1. AI Agent平台: OpenCode
  __2. AI模型: alibaba-cn/glm-5.1
  __3. Prompt上下文: 你是 portal 仓资深前端开发,服务开源社区官网仓。基于 architect 通过评审的设计文档, 在 portal 本地 working copy 里直接做代码改动。

希望检视人员了解

1. 代码由AI辅助编写，已人工逐行核对逻辑、校验功能正确性，确保与预期一致；