forked from Gitlink/gitlink_help_center
Merge pull request '新增视频功能' (#9) from zwt into master
This commit is contained in:
commit
7bc3946c59
|
|
@ -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 查看的能力：
|
|||
<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，确保「秒开」的即时体验。
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# 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 联系我们。
|
||||
:::
|
||||
30
sidebars.js
30
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', '第三方服务/跨平台代码同步'],
|
||||
},
|
||||
// 其他类别可以根据需要添加
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className={styles.videoDemo}>
|
||||
<h3 className={styles.videoTitle}>{title}</h3>
|
||||
{description && <p className={styles.videoDescription}>{description}</p>}
|
||||
|
||||
<div className={styles.videoWrapper}>
|
||||
{!isLoaded && <div className={styles.loadingIndicator}>加载中...</div>}
|
||||
<iframe
|
||||
src={getVideoSrc()}
|
||||
className={styles.videoFrame}
|
||||
frameBorder="0"
|
||||
allowFullScreen
|
||||
onLoad={handleIframeLoad}
|
||||
title={title}
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
{options.showTips && options.tips && (
|
||||
<div className={styles.videoTips}>
|
||||
<p>提示: {options.tips}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default VideoDemo;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue