Task4: Circle of contributors

README_808.md

@@ -0,0 +1,30 @@
+## Task 808
+
+增加新组件 "contributor_button":
+
+<table>
+  <thead>
+    <tr>
+      <th width="50%">初始化按钮: 仓库首页显示贡献者活跃网络</th>
+      <th width="50%">点击按钮: 仓库首页贡献者模块切换为原头像矩阵</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <img
+          src="https://raw.githubusercontent.com/MrH233/hypertrons-crx/master/picture/点击前.png"
+        />
+      </td>
+      <td>
+        <img
+          src="https://raw.githubusercontent.com/MrH233/hypertrons-crx/master/picture/点击后.png"
+        />
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+**组员:黄小鹏 51265903102**<br>
+**组员:朱奕帆 51265903116**<br>
+**组员:王超亚 51265903103**<br>

src/pages/ContentScripts/features/contributor_button/DataNotFound.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+const DataNotFound = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: 'var(--color-fg-muted)',
+      }}
+    >
+      <h3>Data Not Found</h3>
+      <div style={{ width: '300px', margin: '2em' }}>
+        <p>Possible reasons are:</p>
+        <ul style={{ marginLeft: '1em' }}>
+          <li>This repository is too new, so its data has not been generated</li>
+          <li>This repository is not active enough, so its data are not generated</li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default DataNotFound;

src/pages/ContentScripts/features/contributor_button/index.tsx

@@ -0,0 +1,77 @@
+/**
+ * 该模块负责在GitHub仓库页面中，增强贡献者列表的功能。
+ * 它使用React来渲染贡献者列表，并通过API获取额外的网络数据。
+ */
+
+import React, { useState, useEffect } from 'react';
+import { render } from 'react-dom';
+import $ from 'jquery';
+import View from './view';
+import { getRepoName } from '../../../../helpers/get-repo-info';
+import { getDeveloperNetwork, getRepoNetwork } from '../../../../api/repo';
+import features from '../../../../feature-manager';
+import * as pageDetect from 'github-url-detection';
+import elementReady from 'element-ready';
+
+// 全局变量用于存储仓库名称和网络数据，以便在不同函数间共享
+// 定义全局变量，用于存储仓库名称和网络数据。
+let repoName: string;
+let developerNetworks: any;
+let repoNetworks: any;
+let target: any;
+
+// 获取当前模块的特征ID，用于特性管理。
+const featureId = features.getFeatureID(import.meta.url);
+
+/**
+ * 异步获取仓库开发者和仓库的网络数据。
+ */
+const getData = async () => {
+  developerNetworks = await getDeveloperNetwork(repoName);
+  repoNetworks = await getRepoNetwork(repoName);
+};
+
+/**
+ * 替换贡献者列表为React组件。
+ * @param target 要替换的目标元素。
+ */
+const replaceContributorList = (target: HTMLElement) => {
+  const originalHTML = target.innerHTML;
+
+  render(
+    <React.Fragment>
+      <View developerNetwork={developerNetworks} target={originalHTML} />
+    </React.Fragment>,
+    document.querySelector('.list-style-none.d-flex.flex-wrap.mb-n2') as HTMLElement
+  );
+};
+
+/**
+ * 初始化功能，包括获取仓库名称和数据，以及替换贡献者列表。
+ */
+const init = async (): Promise<void> => {
+  repoName = getRepoName();
+  const targetElement = document.querySelector('.list-style-none.d-flex.flex-wrap.mb-n2') as HTMLElement;
+  await getData();
+  replaceContributorList(targetElement);
+};
+
+/**
+ * 在页面刷新或导航时恢复功能，重新加载数据和渲染列表。
+ */
+const restore = async () => {
+  if (repoName !== getRepoName()) {
+    repoName = getRepoName();
+    await getData();
+  }
+  $('div.ReactModalPortal').remove();
+  replaceContributorList(target);
+};
+
+// 将功能添加到特性管理器中，配置初始化和恢复函数。
+features.add(featureId, {
+  //   asLongAs: [pageDetect.isUserProfile],
+  awaitDomReady: false,
+  init,
+  restore,
+});

src/pages/ContentScripts/features/contributor_button/view.tsx

@@ -0,0 +1,80 @@
+import React, { useState, useEffect } from 'react';
+import ReactModal from 'react-modal';
+import Graph from '../../../../components/Graph';
+import optionsStorage, { HypercrxOptions, defaults } from '../../../../options-storage';
+import { useTranslation } from 'react-i18next';
+import '../../../../helpers/i18n';
+
+// 定义开发者和仓库的时间周期
+const DEVELOPER_PERIOD = 90;
+const REPO_PERIOD = 90;
+
+// 定义Props接口，包括开发者网络和目标HTML
+interface Props {
+  developerNetwork: any;
+  target: any;
+}
+
+// 定义图表样式
+const graphStyle = {
+  width: '296px',
+  height: '400px',
+};
+
+const targetStyle = {
+  width: '296px',
+  height: '100px',
+  display: 'flex',
+  'justify-content': 'flex-start',
+  'align-items': 'flex-start',
+  'align-content': 'flex-start',
+  'flex-wrap': 'wrap',
+};
+
+const buttonStyle = {
+  margin: '-5px 0px 10px 0px',
+  padding: '8px',
+  'border-radius': '15px',
+};
+
+// 定义View组件
+const View = ({ developerNetwork, target }: Props): JSX.Element => {
+  // 定义状态变量，包括选项、是否显示图表和是否显示仓库网络
+  const [options, setOptions] = useState<HypercrxOptions>(defaults);
+  const [showGraph, setShowGraph] = useState(true);
+  const [showRepoNetwork, setShowRepoNetwork] = useState(false);
+
+  // 使用翻译函数
+  const { t, i18n } = useTranslation();
+
+  // 使用useEffect钩子来处理副作用，包括获取选项和改变语言
+  useEffect(() => {
+    (async function () {
+      setOptions(await optionsStorage.getAll());
+      i18n.changeLanguage(options.locale);
+    })();
+  }, [options.locale]);
+
+  // 返回JSX元素，包括一个按钮和一个条件渲染的图表或目标HTML
+  return (
+    <div>
+      <button onClick={() => setShowGraph(!showGraph)} style={buttonStyle}>
+        切换视图
+      </button>
+      {showGraph ? (
+        <div className="hypertrons-crx-border hypertrons-crx-container">
+          <div className="d-flex flex-wrap flex-items-center" style={{ margin: '0 0 0 0', padding: '0' }}>
+            <div style={{ margin: '0 0 0 0', padding: '0', display: 'block' }}>
+              <Graph data={developerNetwork} style={graphStyle} />
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div dangerouslySetInnerHTML={{ __html: target }} style={targetStyle} />
+      )}
+    </div>
+  );
+};
+
+// 导出View组件
+export default View;

src/pages/ContentScripts/index.ts

@@ -1,5 +1,5 @@
 import './index.scss';
-
+import './features/contributor_button';
 import './features/repo-activity-openrank-trends';
 import './features/developer-activity-openrank-trends';
 import './features/repo-header-labels';