From 092c91af0943a5b5747a44cffdf92d6671393bd1 Mon Sep 17 00:00:00 2001 From: weixin_74091448 Date: Mon, 26 May 2025 20:05:11 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../第三方服务/{WebIDE.md => WebIDE.mdx} | 25 ++++ docs/视频教程.mdx | 67 ++++++++++ sidebars.js | 30 ++++- src/components/VideoDemo/index.js | 66 ++++++++++ src/components/VideoDemo/styles.module.css | 114 ++++++++++++++++++ 5 files changed, 299 insertions(+), 3 deletions(-) rename docs/第三方服务/{WebIDE.md => WebIDE.mdx} (93%) create mode 100644 docs/视频教程.mdx create mode 100644 src/components/VideoDemo/index.js create mode 100644 src/components/VideoDemo/styles.module.css diff --git a/docs/第三方服务/WebIDE.md b/docs/第三方服务/WebIDE.mdx similarity index 93% rename from docs/第三方服务/WebIDE.md rename to docs/第三方服务/WebIDE.mdx index 93ee280..568a870 100644 --- a/docs/第三方服务/WebIDE.md +++ b/docs/第三方服务/WebIDE.mdx @@ -3,6 +3,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 代码托管平台上，解决了长久以来的用户反馈的很多体验问题。 @@ -59,6 +62,28 @@ Gitlink 通过实现 Blame 插件，完成了编辑器 Blame 查看的能力： ![](../../static/img/di_san_fang/WebIDE/代码评审.png)
代码评审时可修改代码
+## WebIDE 功能演示 + +下面是 GitLink WebIDE 的功能演示视频，通过观看视频，您可以直观地了解如何使用 WebIDE 进行代码浏览、编辑和提交等操作。 + + + +### 在线运行演示 + + + ## Gitlink Web IDE Gitlink 代码阅读场景虽然接入极速版 IDE 编辑器，但文件树、代码搜索、快捷键、IDE 皮肤、等均和平时开发时使用习惯的 IDE 差异较大，更有大部分用户仅仅是为了代码阅读将代码克隆到本地，尽管保证了一致的体验，但整个链路繁琐费时。 基于这个洞察，蚂蚁云研发团队和 Gitlink 推出 Gitlink Web IDE，可以一键快速打开 Web IDE 访问阅读项目仓库代码，实现项目与 IDE 的无缝衔接，保持研发同学的日常偏好习惯，同时完美兼容 Gitlink 代码托管平台。更重要的是，通过无容器在浏览器上直接运行一个极速版 IDE，确保「秒开」的即时体验。 diff --git a/docs/视频教程.mdx b/docs/视频教程.mdx new file mode 100644 index 0000000..d5e0a92 --- /dev/null +++ b/docs/视频教程.mdx @@ -0,0 +1,67 @@ +--- +sidebar_position: 2 +--- + +# GitLink 视频教程 + +在本页面，您可以找到各种 GitLink 功能的视频教程演示。这些视频将帮助您更直观地了解 GitLink 的使用方法。 + +import VideoDemo from '../src/components/VideoDemo'; + +## 快速入门 + + + +## 代码库管理 + + + +## WebIDE 功能 + + + +## DevOps 引擎 + + + +## 团队协作 + + + +:::tip 提示 +视频中使用的是最新版 GitLink 界面，如果您使用的版本界面略有不同，功能和操作方式基本一致。 +::: + +:::info 问题反馈 +如果您对视频内容有任何疑问，或者希望我们提供更多特定主题的视频教程，请通过 [GitLink 社区](https://www.gitlink.org.cn) 或邮箱 gitlink@ccf.org.cn 联系我们。 +::: \ No newline at end of file diff --git a/sidebars.js b/sidebars.js index 889a90e..a542945 100644 --- a/sidebars.js +++ b/sidebars.js @@ -2,8 +2,32 @@ module.exports = { DocsSidebar: [ { type: 'doc', - id: 'index', - label: 'Docs', - } + id: 'intro', + label: '介绍', + }, + { + type: 'doc', + id: '视频教程', + label: '视频教程', + }, + { + type: 'category', + label: '快速开始', + collapsed: false, + items: ['快速开始/注册GitLink账号', '快速开始/登录GitLink账号'], + }, + { + type: 'category', + label: '代码库管理', + collapsed: true, + items: ['代码库管理/仓库创建'], + }, + { + type: 'category', + label: '第三方服务', + collapsed: true, + items: ['第三方服务/WebIDE', '第三方服务/跨平台代码同步'], + }, + // 其他类别可以根据需要添加 ], }; diff --git a/src/components/VideoDemo/index.js b/src/components/VideoDemo/index.js new file mode 100644 index 0000000..378f50d --- /dev/null +++ b/src/components/VideoDemo/index.js @@ -0,0 +1,66 @@ +import React, { useState } from 'react'; +import styles from './styles.module.css'; + +/** + * 视频演示组件 + * @param {Object} props + * @param {string} props.title - 视频标题 + * @param {string} props.description - 视频描述 + * @param {string} props.platform - 视频平台 (bilibili, youku, youtube) + * @param {string} props.videoId - 视频ID + * @param {Object} props.options - 其他选项 + */ +function VideoDemo({ + title, + description, + platform = 'bilibili', + videoId, + options = {} +}) { + const [isLoaded, setIsLoaded] = useState(false); + + // 构建视频 URL + const getVideoSrc = () => { + switch (platform.toLowerCase()) { + case 'bilibili': + return `//player.bilibili.com/player.html?bvid=${videoId}&page=1&high_quality=1&danmaku=0${options.autoplay ? '&autoplay=1' : ''}`; + case 'youku': + return `//player.youku.com/embed/${videoId}${options.autoplay ? '?autoplay=1' : ''}`; + case 'youtube': + return `//www.youtube.com/embed/${videoId}${options.autoplay ? '?autoplay=1' : ''}`; + default: + return ''; + } + }; + + const handleIframeLoad = () => { + setIsLoaded(true); + }; + + return ( +
+

{title}

+ {description &&

{description}

} + +
+ {!isLoaded &&
加载中...
} + +
+ + {options.showTips && options.tips && ( +
+

提示: {options.tips}

+
+ )} +
+ ); +} + +export default VideoDemo; \ No newline at end of file diff --git a/src/components/VideoDemo/styles.module.css b/src/components/VideoDemo/styles.module.css new file mode 100644 index 0000000..32ab75c --- /dev/null +++ b/src/components/VideoDemo/styles.module.css @@ -0,0 +1,114 @@ +.videoDemo { + margin: 2rem 0; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + background-color: var(--ifm-color-emphasis-0); +} + +.videoTitle { + font-size: 1.5rem; + margin-bottom: 0.5rem; + padding: 1rem; + background-color: var(--ifm-color-emphasis-200); + color: var(--ifm-color-emphasis-800); + border-bottom: 1px solid var(--ifm-color-emphasis-300); +} + +.videoDescription { + padding: 0 1rem 1rem; + font-size: 1rem; + color: var(--ifm-color-emphasis-700); +} + +.videoWrapper { + position: relative; + padding-top: 56.25%; /* 16:9 宽高比 */ + width: 100%; + background-color: #000; +} + +.videoFrame { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; +} + +.loadingIndicator { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background-color: #000; + color: white; + font-size: 1.2rem; + z-index: 1; +} + +.videoTips { + padding: 0.75rem 1rem; + background-color: var(--ifm-color-emphasis-100); + border-top: 1px solid var(--ifm-color-emphasis-200); + color: var(--ifm-color-emphasis-700); + font-size: 0.9rem; +} + +/* 深色模式调整 */ +html[data-theme='dark'] .videoDemo { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); +} + +html[data-theme='dark'] .videoTitle { + background-color: var(--ifm-color-emphasis-300); + color: var(--ifm-color-emphasis-900); +} + +html[data-theme='dark'] .videoTips { + background-color: var(--ifm-color-emphasis-200); +} + +/* 响应式样式 */ +@media (max-width: 768px) { + .videoTitle { + font-size: 1.25rem; + padding: 0.75rem; + } + + .videoDescription { + font-size: 0.9rem; + padding: 0 0.75rem 0.75rem; + } + + .videoTips { + font-size: 0.8rem; + padding: 0.5rem 0.75rem; + } + + .videoDemo { + margin: 1.5rem 0; + border-radius: 6px; + } +} + +@media (max-width: 480px) { + .videoTitle { + font-size: 1.1rem; + padding: 0.5rem; + } + + .loadingIndicator { + font-size: 1rem; + } + + .videoDemo { + margin: 1rem 0; + border-radius: 4px; + } +} \ No newline at end of file