Merge pull request '合并到个人分支' (#15) from master into zwt

2025-05-27 09:00:30 +08:00 · 2025-05-27 09:00:30 +08:00 · 03c30df85e
parent 3ec8c43d5f 3c72853fb7
commit 03c30df85e
13 changed files with 240 additions and 15 deletions
--- a/docs/intro.md
+++ b/docs/intro.md
@ -1,7 +1,7 @@
 ---
 sidebar_label: "介绍"
 label: "介绍"
-sidebar_position: 1
+sidebar_position: 0
 slug: /
 ---

@ -90,4 +90,4 @@ GitLink（确实开源）是CCF官方指定的开源创新服务平台，旨在
 	</a></article>
 </section>
 </div>
-</div>
+</div>
--- a/docs/视频教程.mdx
+++ b/docs/视频教程.mdx
@ -1,5 +1,7 @@
 ---
-sidebar_position: 2
+sidebar_label: "视频介绍"
+label: "视频介绍"
+sidebar_position: 0.5
 ---

 # GitLink 视频教程
@ -14,7 +16,7 @@ import VideoDemo from '../src/components/VideoDemo';
  title="GitLink 平台介绍"
  description="快速了解 GitLink 平台的主要功能和使用场景"
  platform="bilibili"
-  videoId="BV1Gx411w7vd"  
+  videoId="BV1Gx411w7vd"
  options={{ showTips: true }}
 />

@ -64,4 +66,4 @@ import VideoDemo from '../src/components/VideoDemo';

 :::info 问题反馈
 如果您对视频内容有任何疑问，或者希望我们提供更多特定主题的视频教程，请通过 [GitLink 社区](https://www.gitlink.org.cn) 或邮箱 gitlink@ccf.org.cn 联系我们。
-::: 
+:::
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@ -82,6 +82,10 @@ module.exports = {
        {
          type: 'custom-back-to-top',
          position: 'right'
+        },
+        {
+          type: 'custom-qa-button',
+          position: 'right'
        }
      ],
    },
--- a/src/components/QAButtonNavbarItem.js
+++ b/src/components/QAButtonNavbarItem.js
@ -0,0 +1,35 @@
+import React from 'react';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+
+export default function QAButtonNavbarItem() {
+  return (
+    <BrowserOnly>
+      {() => {
+        const history = require('@docusaurus/router').useHistory();
+        return (
+          <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
+            <button
+              onClick={() => history.push('/qa')}
+              style={{
+                fontSize: 14,
+                padding: '0 16px',
+                background: '#466aff',
+                color: '#fff',
+                borderRadius: 4,
+                height: 32,
+                lineHeight: '32px',
+                border: 'none',
+                cursor: 'pointer',
+                display: 'inline-block',
+                margin: '0 8px',
+                boxSizing: 'border-box',
+              }}
+            >
+              疑问解答
+            </button>
+          </div>
+        );
+      }}
+    </BrowserOnly>
+  );
+} 
--- a/src/pages/qa.js
+++ b/src/pages/qa.js
@ -0,0 +1,86 @@
+import React from 'react';
+
+const wechatGroups = [
+  { img: '/img/question/wechat1.png', label: '微信技术交流答疑群1' },
+  { img: '/img/question/wechat2.png', label: '微信技术交流答疑群2' },
+];
+
+const qqGroups = [
+  { img: '/img/question/qq1.png', label: 'QQ技术交流答疑群1' },
+  { img: '/img/question/qq2.png', label: 'QQ技术交流答疑群2' },
+];
+
+export default function QA() {
+  return (
+    <div style={{
+      minHeight: '100vh',
+      background: 'linear-gradient(135deg, #e0e7ff 0%, #f8fafc 100%)',
+      padding: '0 0 48px 0',
+    }}>
+      <div style={{
+        maxWidth: 1000,
+        margin: '0 auto',
+        padding: '40px 24px 24px 24px',
+      }}>
+        <h1 style={{ textAlign: 'center', fontSize: 32, fontWeight: 700, marginBottom: 40, color: '#2d3a4b', letterSpacing: 2 }}>疑问解答与交流群</h1>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 32, justifyContent: 'center', marginBottom: 48 }}>
+          <div style={{ flex: '1 1 320px', background: '#fff', borderRadius: 16, boxShadow: '0 4px 24px rgba(70,106,255,0.08)', padding: 32, minWidth: 320 }}>
+            <h2 style={{ textAlign: 'center', color: '#466aff', fontSize: 22, marginBottom: 24 }}>微信交流群</h2>
+            <div style={{ display: 'flex', justifyContent: 'center', gap: 24 }}>
+              {wechatGroups.map((g, i) => (
+                <div key={i} style={{ textAlign: 'center' }}>
+                  <img src={g.img} alt={g.label} style={{ width: 120, height: 120, borderRadius: 12, marginBottom: 8, boxShadow: '0 2px 8px rgba(70,106,255,0.10)' }} />
+                  <div style={{ fontSize: 15, color: '#2d3a4b' }}>{g.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div style={{ flex: '1 1 320px', background: '#fff', borderRadius: 16, boxShadow: '0 4px 24px rgba(70,106,255,0.08)', padding: 32, minWidth: 320 }}>
+            <h2 style={{ textAlign: 'center', color: '#466aff', fontSize: 22, marginBottom: 24 }}>QQ交流群</h2>
+            <div style={{ display: 'flex', justifyContent: 'center', gap: 24 }}>
+              {qqGroups.map((g, i) => (
+                <div key={i} style={{ textAlign: 'center' }}>
+                  <img src={g.img} alt={g.label} style={{ width: 120, height: 120, borderRadius: 12, marginBottom: 8, boxShadow: '0 2px 8px rgba(70,106,255,0.10)' }} />
+                  <div style={{ fontSize: 15, color: '#2d3a4b' }}>{g.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        <div style={{
+          background: '#fff',
+          borderRadius: 16,
+          boxShadow: '0 4px 24px rgba(70,106,255,0.08)',
+          padding: 32,
+          maxWidth: 600,
+          margin: '0 auto',
+          textAlign: 'center',
+        }}>
+          <h2 style={{ color: '#466aff', fontSize: 22, marginBottom: 24 }}>官网论坛</h2>
+          <a
+            href="https://forum.gitlink.org.cn/forums"
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{
+              display: 'inline-block',
+              background: '#466aff',
+              color: '#fff',
+              borderRadius: 6,
+              padding: '12px 40px',
+              fontSize: 18,
+              textDecoration: 'none',
+              fontWeight: 600,
+              boxShadow: '0 2px 8px rgba(70,106,255,0.10)',
+              letterSpacing: 1,
+            }}
+          >
+            访问官网论坛
+          </a>
+        </div>
+        <div style={{ textAlign: 'center', marginTop: 56 }}>
+          <img src="/img/gitlink.png" alt="GitLink Logo" style={{ width: 80, opacity: 0.12 }} />
+        </div>
+      </div>
+    </div>
+  );
+} 
--- a/src/theme/NavbarItem/index.js
+++ b/src/theme/NavbarItem/index.js
@ -2,6 +2,7 @@ import React from 'react';
 import NavbarItem from '@theme-original/NavbarItem';
 import PdfExportNavbarItem from '../../components/PdfExportNavbarItem';
 import PdfBackToTopNavbarItem from '../../components/PdfBackToTopNavbarItem';
+import QAButtonNavbarItem from '../../components/QAButtonNavbarItem';

 export default function NavbarItemWrapper(props) {
  if (props.type === 'custom-pdf-export') {
@ -10,5 +11,8 @@ export default function NavbarItemWrapper(props) {
  if (props.type === 'custom-back-to-top') {
    return <PdfBackToTopNavbarItem />;
  }
+  if (props.type === 'custom-qa-button') {
+    return <QAButtonNavbarItem />;
+  }
  return <NavbarItem {...props} />;
-} 
+}
--- a/static/img/question/qq1.png
+++ b/static/img/question/qq1.png
--- a/static/img/question/qq2.png
+++ b/static/img/question/qq2.png
--- a/static/img/question/wechat1.png
+++ b/static/img/question/wechat1.png
--- a/static/img/question/wechat2.png
+++ b/static/img/question/wechat2.png
--- a/versioned_docs/version-1.1.0/intro.md
+++ b/versioned_docs/version-1.1.0/intro.md
@ -1,7 +1,7 @@
 ---
 sidebar_label: "介绍"
 label: "介绍"
-sidebar_position: 1
+sidebar_position: 0
 slug: /
 ---

--- a/versioned_docs/version-1.1.0/第三方服务/WebIDE.mdx
+++ b/versioned_docs/version-1.1.0/第三方服务/WebIDE.mdx
@ -1,19 +1,22 @@
 ---
-sidebar_label: 'WebIDE'     
-sidebar_position: 9 
-   
+sidebar_label: 'WebIDE'
+sidebar_position: 9
+
 ---
+
+import VideoDemo from '../../../src/components/VideoDemo';
+
 ## WebIDE背景
 传统的代码托管平台提供了代码仓库的 Git/SVN 的管理，可以在平台上做代码浏览、代码评审、缺陷管理、CI 流水线等和代码相关的活动。其中代码浏览、代码评审所用的编辑器组件一般为 CodeMirror，代码高亮使用 highlight.js，常常只提供了读代码的场景。蚂蚁研发效能部门云研发团队通过自研的 OpenSumi 框架及基于 OpenSumi 框架做的专门针对于 Web IDE（无远程容器）场景的极速版 Web IDE 框架，与内部代码托管平台碰撞出了创新型的、只依赖浏览器的、IDE 风格的代码阅读、代码编写、代码提交、代码运行、代码评审等场景，极大的提高了用户在代码托管平台阅读代码、代码评审、轻研发等场景的效率。本次蚂蚁研发效能云研发团队和 CCF（中国计算机学会）GitLink 代码托管平台合作，将内部极速版 Web IDE 应用到了 Gitlink 代码托管平台上，解决了长久以来的用户反馈的很多体验问题。

 ## Web IDE 核心能力
 对标有容器的标准版，极速版 IDE 主要在读、写、运行、提交等方面进行了探索：

-**1. 读：** 
+**1. 读：**
  - a. 适配了多种代码托管平台，例如 Gitlink、Github、Gitlab 等代码托管平台，业务可以非常方便的使用代码服务的能力
  - b. 内置了包括 Java、TS/JS、C++、Go、Python、Rust 等几十种常见语言的语法高亮支持
  - c. 支持了如 Git Blame、GitGraph 等代码阅读辅助插件
-  
+
 **2. 写：**
  - a. 支持 HTML/CSS/JS/Markdown 等在线语言服务能力，支持错误诊断能力
  - b. 浏览器文件系统
@ -21,7 +24,7 @@ sidebar_position: 9
 **3. 运行：**
  - a. 支持基于 Skypack 的前端代码运行方案
  - b. 支持基于 Pyodide 的 Python 运行
-  
+
 **4. 提交：**
  - a. 支持 WebSCM，提供分支切换/新增、代码提交等能力

@ -48,7 +51,7 @@ Gitlink 通过实现 Blame 插件，完成了编辑器 Blame 查看的能力：
 - 3.代码修改流程重，耗时久：代码 Diff 组件只有读能力，无法快速修改一些拼写或 lint 错误，需要在本地找到对应文件后修改提交 针对于上述需求，蚂蚁云研发团队和 Gitlink 打造了 IDE 风格的代码评审场景：

 ![](../../../static/img/di_san_fang/WebIDE/IDE模式的代码评审.png)<br/>
-  
+
 <center>IDE模式的代码评审</center>
 - 1.变更树 a. 提供平铺和树状两种浏览方式 b. 变更树使用 OpenSumi Recycle 组件，对于大 PR 也能通过虚拟滚动高性能的查看变更文件
 - 2.工具栏 a. 提供 IDE 编辑器基础设置，如字体大小、编码、忽略收尾空格等 b. 快速切换当前分支历史版本与基线的对比 c. 变更文件快速定位、设置已查看，并支持快捷键快速执行
@ -59,6 +62,28 @@ Gitlink 通过实现 Blame 插件，完成了编辑器 Blame 查看的能力：
 ![](../../../static/img/di_san_fang/WebIDE/代码评审.png)<br/>
 <center>代码评审时可修改代码</center>

+## WebIDE 功能演示
+
+下面是 GitLink WebIDE 的功能演示视频，通过观看视频，您可以直观地了解如何使用 WebIDE 进行代码浏览、编辑和提交等操作。
+
+<VideoDemo
+  title="GitLink WebIDE 使用教程"
+  platform="bilibili"
+  videoId="BV1Hkr7YYEh8"
+  options={{
+    showTips: false
+  }}
+/>
+
+### 在线运行演示
+
+<VideoDemo
+  title="WebIDE 在线运行演示"
+  platform="bilibili"
+  videoId="BV15a411o72i"
+  options={{ showTips: true }}
+/>
+
 ## Gitlink Web IDE
 Gitlink 代码阅读场景虽然接入极速版 IDE 编辑器，但文件树、代码搜索、快捷键、IDE 皮肤、等均和平时开发时使用习惯的 IDE 差异较大，更有大部分用户仅仅是为了代码阅读将代码克隆到本地，尽管保证了一致的体验，但整个链路繁琐费时。
 基于这个洞察，蚂蚁云研发团队和 Gitlink 推出 Gitlink Web IDE，可以一键快速打开 Web IDE 访问阅读项目仓库代码，实现项目与 IDE 的无缝衔接，保持研发同学的日常偏好习惯，同时完美兼容 Gitlink 代码托管平台。更重要的是，通过无容器在浏览器上直接运行一个极速版 IDE，确保「秒开」的即时体验。
@ -135,4 +160,4 @@ Gitlink 代码阅读场景虽然接入极速版 IDE 编辑器，但文件树、
 随着 Webassembly 技术的发展，一些后端语言也可以运行在浏览器里，在 2021 年 Google IO 大会上，StackBlitz 展示了他们最近做的技术：WebContainer，该能力可以将语言运行时编译为 Webassembly 从而运行在浏览器上。Code-Runner-For-Web 插件结合 Pyodide，已经将 Python 的运行搬到了浏览器上，新版极速版也默认集成了该插件。

 ![](../../../static/img/di_san_fang/WebIDE/Python代码运行.png)<br/>
-<center>Python代码运行</center>
+<center>Python代码运行</center>
--- a/versioned_docs/version-1.1.0/视频教程.mdx
+++ b/versioned_docs/version-1.1.0/视频教程.mdx
@ -0,0 +1,69 @@
+---
+sidebar_label: "视频介绍"
+label: "视频介绍"
+sidebar_position: 0.5
+---
+
+# GitLink 视频教程
+
+在本页面，您可以找到各种 GitLink 功能的视频教程演示。这些视频将帮助您更直观地了解 GitLink 的使用方法。
+
+import VideoDemo from '../../src/components/VideoDemo';
+
+## 快速入门
+
+<VideoDemo
+  title="GitLink 平台介绍"
+  description="快速了解 GitLink 平台的主要功能和使用场景"
+  platform="bilibili"
+  videoId="BV1Gx411w7vd"
+  options={{ showTips: true }}
+/>
+
+## 代码库管理
+
+<VideoDemo
+  title="如何创建和管理代码仓库"
+  description="学习创建代码仓库、管理分支、设置权限等基本操作"
+  platform="bilibili"
+  videoId="BV1Gx411w7vd"
+  options={{ showTips: true }}
+/>
+
+## WebIDE 功能
+
+<VideoDemo
+  title="WebIDE 使用指南"
+  description="学习如何使用 GitLink 的 WebIDE 进行在线编码和调试"
+  platform="bilibili"
+  videoId="BV1Gx411w7vd"
+  options={{ showTips: true, tips: "WebIDE 支持多种编程语言和开发环境" }}
+/>
+
+## DevOps 引擎
+
+<VideoDemo
+  title="DevOps 引擎配置与使用"
+  description="了解如何配置和使用 GitLink 的 DevOps 引擎进行持续集成和部署"
+  platform="bilibili"
+  videoId="BV1Gx411w7vd"
+  options={{ showTips: true }}
+/>
+
+## 团队协作
+
+<VideoDemo
+  title="团队协作最佳实践"
+  description="学习在 GitLink 上进行团队协作的最佳实践和工作流程"
+  platform="bilibili"
+  videoId="BV1Gx411w7vd"
+  options={{ showTips: true }}
+/>
+
+:::tip 提示
+视频中使用的是最新版 GitLink 界面，如果您使用的版本界面略有不同，功能和操作方式基本一致。
+:::
+
+:::info 问题反馈
+如果您对视频内容有任何疑问，或者希望我们提供更多特定主题的视频教程，请通过 [GitLink 社区](https://www.gitlink.org.cn) 或邮箱 gitlink@ccf.org.cn 联系我们。
+:::