yexuejc007/PlayEdu-h5
1
0
Fork 0
mirror of https://github.com/PlayEdu/h5.git synced 2025-06-26 08:32:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: yexuejc007:main
Branches Tags
yexuejc007:main
yexuejc007:dev
yexuejc007:1.6
yexuejc007:1.5
yexuejc007:v1.4
yexuejc007:v1.3
yexuejc007:v1.2
yexuejc007:v1.1
..
compare: yexuejc007:1.5
Branches Tags
yexuejc007:dev
yexuejc007:main
yexuejc007:1.6
yexuejc007:1.5
yexuejc007:v1.4
yexuejc007:v1.3
yexuejc007:v1.2
yexuejc007:v1.1

No commits in common. "main" and "1.5" have entirely different histories.
main ... 1.5

14 changed files with 211 additions and 193 deletions
Show Stats Expand all files Collapse all files

1
.env.example
View File

@ -1 +1,2 @@
VITE_APP_URL= VITE_APP_URL=
VITE_G_ID=

2
.gitignore vendored
View File

@ -32,5 +32,3 @@ yarn.lock
deploy-test.sh deploy-test.sh
deploy-demo.sh deploy-demo.sh
pnpm-lock.yaml

5
index.html
View File

@ -13,6 +13,11 @@
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
<script
crossorigin="anonymous"
integrity="sha512-oHrfR/z2wkuRuaHrdZ9NhoT/o/1kteub+QvmQgVzOKK7NTvIKQMvnY9+/RR0+eW311o4lAE/YzzLXXmP2XUvig=="
src="https://lib.baomitu.com/hls.js/1.1.4/hls.min.js"
></script>
<script type="text/javascript"> <script type="text/javascript">
if ( if (
typeof WeixinJSBridge == "object" && typeof WeixinJSBridge == "object" &&

13
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "playedu-h5-interface", "name": "frontend",
"private": false, "private": true,
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
@ -10,7 +10,6 @@
}, },
"dependencies": { "dependencies": {
"@reduxjs/toolkit": "^1.9.3", "@reduxjs/toolkit": "^1.9.3",
"ahooks": "^3.7.10",
"antd-mobile": "^5.31.1", "antd-mobile": "^5.31.1",
"axios": "^1.3.4", "axios": "^1.3.4",
"localforage": "^1.10.0", "localforage": "^1.10.0",
@ -19,14 +18,16 @@
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-ga": "^3.3.1",
"react-redux": "^8.0.5", "react-redux": "^8.0.5",
"react-router-dom": "^6.9.0", "react-router-dom": "^6.9.0",
"redux": "^4.2.1", "redux": "^4.2.1",
"sort-by": "^1.2.0" "sort-by": "^1.2.0",
"web-vitals": "^3.3.0"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.2.0", "@types/react": "^18.0.28",
"@types/react-dom": "^18.2.0", "@types/react-dom": "^18.0.11",
"@vitejs/plugin-legacy": "^4.1.1", "@vitejs/plugin-legacy": "^4.1.1",
"@vitejs/plugin-react-swc": "^3.0.0", "@vitejs/plugin-react-swc": "^3.0.0",
"rollup-plugin-gzip": "^3.1.0", "rollup-plugin-gzip": "^3.1.0",

1
public/js/xg/hls.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

21
public/js/xg/index.js Normal file
View File

File diff suppressed because one or more lines are too long

18
src/App.tsx
View File

@ -1,12 +1,26 @@
import { Suspense } from "react"; import { Suspense, useEffect } from "react";
import { useRoutes } from "react-router-dom"; import ReactGA from "react-ga";
import { useLocation, useRoutes } from "react-router-dom";
import routes from "./routes"; import routes from "./routes";
import "./App.scss"; import "./App.scss";
import LoadingPage from "./pages/loading"; import LoadingPage from "./pages/loading";
const G_ID = import.meta.env.VITE_G_ID || "";
if (G_ID) {
ReactGA.initialize(G_ID);
}
const App = () => { const App = () => {
const Views = () => useRoutes(routes); const Views = () => useRoutes(routes);
const location = useLocation();
useEffect(() => {
if (!G_ID) {
return;
}
ReactGA.pageview(location.pathname + location.search);
}, [location]);
return ( return (
<Suspense fallback={<LoadingPage />}> <Suspense fallback={<LoadingPage />}>
<Views /> <Views />

7
src/main.scss
View File

@ -32,13 +32,6 @@ code {
float: left; float: left;
height: auto; height: auto;
} }
.float-left {
width: 100%;
height: auto;
float: left;
}
.main-header { .main-header {
position: relative; position: relative;
width: 100%; width: 100%;

2
src/pages/index/index.module.scss
View File

@ -107,7 +107,7 @@
width: 100%; width: 100%;
height: auto; height: auto;
box-sizing: border-box; box-sizing: border-box;
padding: 0px 20px 55px 20px; padding: 96px 20px 55px 20px;
text-align: left; text-align: left;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;

129
src/pages/index/index.tsx
View File

@ -1,6 +1,5 @@
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { Dropdown, PullToRefresh, Skeleton, Tabs } from "antd-mobile"; import { Dropdown, Skeleton, Tabs } from "antd-mobile";
import { sleep } from "antd-mobile/es/utils/sleep";
import { DropdownRef } from "antd-mobile/es/components/dropdown"; import { DropdownRef } from "antd-mobile/es/components/dropdown";
import { user } from "../../api/index"; import { user } from "../../api/index";
import styles from "./index.module.scss"; import styles from "./index.module.scss";
@ -72,15 +71,14 @@ const IndexPage = () => {
}, []); }, []);
useEffect(() => { useEffect(() => {
setLoading(true);
if (currentDepId === 0) { if (currentDepId === 0) {
setLoading(false);
return; return;
} }
getData(); getData();
}, [currentDepId, categoryId]); }, [currentDepId, categoryId]);
const getData = () => { const getData = () => {
setLoading(true);
user.courses(currentDepId, categoryId).then((res: any) => { user.courses(currentDepId, categoryId).then((res: any) => {
const records = res.data.learn_course_records; const records = res.data.learn_course_records;
setLearnCourseRecords(records); setLearnCourseRecords(records);
@ -267,74 +265,61 @@ const IndexPage = () => {
</Dropdown.Item> </Dropdown.Item>
</Dropdown> </Dropdown>
</div> </div>
<div <div className={styles["list-box"]}>
className="float-left" {loading &&
style={{ position: "relative", paddingTop: 96 }} Array.from({ length: 2 }).map((_, i) => (
> <div
<PullToRefresh style={{
onRefresh={async () => { width: "100%",
setLoading(true); height: 75,
await sleep(700); display: "flex",
getData(); alignItems: "center",
}} marginBottom: 30,
> marginTop: 30,
<div className={styles["list-box"]}> }}
{loading && key={i}
Array.from({ length: 2 }).map((_, i) => ( >
<div <Skeleton
style={{ animated
width: "100%", style={{
height: 75, width: 100,
display: "flex", height: 75,
alignItems: "center", borderRadius: 8,
marginBottom: 30, marginRight: 15,
marginTop: 30, }}
}} />
key={i} <div
> style={{
<Skeleton flex: 1,
animated height: 75,
style={{ display: "flex",
width: 100, flexDirection: "column",
height: 75, justifyContent: "space-between",
borderRadius: 8, }}
marginRight: 15, >
}} <Skeleton animated style={{ width: "100%", height: 21 }} />
/> <Skeleton animated style={{ width: "100%", height: 24 }} />
<div </div>
style={{ </div>
flex: 1, ))}
height: 75, {!loading && coursesList.length === 0 && <Empty></Empty>}
display: "flex", {!loading && coursesList.length > 0 && (
flexDirection: "column", <>
justifyContent: "space-between", {coursesList.map((item: any) => (
}} <div className={styles["item"]} key={item.id}>
> <CoursesModel
<Skeleton animated style={{ width: "100%", height: 21 }} /> id={item.id}
<Skeleton animated style={{ width: "100%", height: 24 }} /> title={item.title}
</div> thumb={item.thumb}
</div> isRequired={item.is_required}
))} record={learnCourseRecords[item.id]}
{!loading && coursesList.length === 0 && <Empty></Empty>} hourCount={learnCourseHourCount[item.id]}
{!loading && coursesList.length > 0 && ( ></CoursesModel>
<> </div>
{coursesList.map((item: any) => ( ))}
<div className={styles["item"]} key={item.id}> <Footer></Footer>
<CoursesModel </>
id={item.id} )}
title={item.title}
thumb={item.thumb}
isRequired={item.is_required}
record={learnCourseRecords[item.id]}
hourCount={learnCourseHourCount[item.id]}
></CoursesModel>
</div>
))}
<Footer></Footer>
</>
)}
</div>{" "}
</PullToRefresh>
</div> </div>
</div> </div>
); );

7
src/pages/layouts/with-footer/index.module.scss
View File

@ -1,7 +0,0 @@
.playedu-app {
width: 100vw;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
position: relative;
}

5
src/pages/layouts/with-footer/index.tsx
View File

@ -2,16 +2,15 @@ import { Suspense } from "react";
import { Outlet } from "react-router-dom"; import { Outlet } from "react-router-dom";
import LoadingPage from "../../loading"; import LoadingPage from "../../loading";
import { TabBarFooter } from "../../../components"; import { TabBarFooter } from "../../../components";
import styles from "./index.module.scss";
const WithoutHeaderWithoutFooter = () => { const WithoutHeaderWithoutFooter = () => {
return ( return (
<div className={styles["playedu-app"]}> <>
<Suspense fallback={<LoadingPage />}> <Suspense fallback={<LoadingPage />}>
<Outlet /> <Outlet />
</Suspense> </Suspense>
<TabBarFooter></TabBarFooter> <TabBarFooter></TabBarFooter>
</div> </>
); );
}; };

174
src/pages/study/index.tsx
View File

@ -1,6 +1,5 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { PullToRefresh, Skeleton } from "antd-mobile"; import { Skeleton } from "antd-mobile";
import { sleep } from "antd-mobile/es/utils/sleep";
import styles from "./index.module.scss"; import styles from "./index.module.scss";
import { course } from "../../api/index"; import { course } from "../../api/index";
import { Empty } from "../../components"; import { Empty } from "../../components";
@ -18,11 +17,14 @@ const StudyPage = () => {
}, []); }, []);
useEffect(() => { useEffect(() => {
setLoading(true);
getCourses(); getCourses();
}, []); }, []);
const getCourses = () => { const getCourses = () => {
if (loading) {
return;
}
setLoading(true);
course course
.latestLearn() .latestLearn()
.then((res: any) => { .then((res: any) => {
@ -59,97 +61,87 @@ const StudyPage = () => {
return ( return (
<div className="main-body"> <div className="main-body">
<div className={styles["title"]}>最近学习</div> <div className={styles["title"]}>最近学习</div>
<div className="float-left" style={{ position: "relative" }}> <div className={styles["list-box"]}>
<PullToRefresh {loading &&
onRefresh={async () => { Array.from({ length: 2 }).map((_, i) => (
setLoading(true); <div className={styles["item"]} key={i}>
await sleep(700); <Skeleton
getCourses(); animated
}} style={{
> width: 100,
<div className={styles["list-box"]}> height: 75,
{loading && borderRadius: 8,
Array.from({ length: 2 }).map((_, i) => ( marginRight: 15,
<div className={styles["item"]} key={i}> }}
<Skeleton />
animated <div className={styles["item-info"]}>
style={{ <Skeleton animated style={{ width: "100%", height: 21 }} />
width: 100, <Skeleton animated style={{ width: "100%", height: 24 }} />
height: 75, </div>
borderRadius: 8, </div>
marginRight: 15, ))}
}} {!loading &&
/> courses.length === 0 &&
<div className={styles["item-info"]}> todayCourses.length === 0 &&
<Skeleton animated style={{ width: "100%", height: 21 }} /> yesterdayCourses.length === 0 && <Empty></Empty>}
<Skeleton animated style={{ width: "100%", height: 24 }} /> {!loading && (
</div> <>
</div> {todayCourses.length > 0 && (
))}
{!loading &&
courses.length === 0 &&
todayCourses.length === 0 &&
yesterdayCourses.length === 0 && <Empty></Empty>}
{!loading && (
<> <>
{todayCourses.length > 0 && ( <div className={styles["label"]}>今日</div>
<> {todayCourses.map((item: any, index: number) => (
<div className={styles["label"]}>今日</div> <div key={index} style={{ width: "100%" }}>
{todayCourses.map((item: any, index: number) => ( {item.course && (
<div key={index} style={{ width: "100%" }}> <CoursesModel
{item.course && ( id={item.course.id}
<CoursesModel title={item.course.title}
id={item.course.id} thumb={item.course.thumb}
title={item.course.title} isRequired={item.course.is_required}
thumb={item.course.thumb} record={item.record}
isRequired={item.course.is_required} ></CoursesModel>
record={item.record} )}
></CoursesModel> </div>
)} ))}
</div>
))}
</>
)}
{yesterdayCourses.length > 0 && (
<>
<div className={styles["label"]}>昨日</div>
{yesterdayCourses.map((item: any, index: number) => (
<div key={index} style={{ width: "100%" }}>
{item.course && (
<CoursesModel
id={item.course.id}
title={item.course.title}
thumb={item.course.thumb}
isRequired={item.course.is_required}
record={item.record}
></CoursesModel>
)}
</div>
))}
</>
)}
{courses.length > 0 && (
<>
<div className={styles["label"]}>更早</div>
{courses.map((item: any, index: number) => (
<div key={index} style={{ width: "100%" }}>
{item.course && (
<CoursesModel
id={item.course.id}
title={item.course.title}
thumb={item.course.thumb}
isRequired={item.course.is_required}
record={item.record}
></CoursesModel>
)}
</div>
))}
</>
)}
</> </>
)} )}
</div> {yesterdayCourses.length > 0 && (
</PullToRefresh> <>
<div className={styles["label"]}>昨日</div>
{yesterdayCourses.map((item: any, index: number) => (
<div key={index} style={{ width: "100%" }}>
{item.course && (
<CoursesModel
id={item.course.id}
title={item.course.title}
thumb={item.course.thumb}
isRequired={item.course.is_required}
record={item.record}
></CoursesModel>
)}
</div>
))}
</>
)}
{courses.length > 0 && (
<>
<div className={styles["label"]}>更早</div>
{courses.map((item: any, index: number) => (
<div key={index} style={{ width: "100%" }}>
{item.course && (
<CoursesModel
id={item.course.id}
title={item.course.title}
thumb={item.course.thumb}
isRequired={item.course.is_required}
record={item.record}
></CoursesModel>
)}
</div>
))}
</>
)}
</>
)}
</div> </div>
</div> </div>
); );

15
src/reportWebVitals.ts Normal file
View File

@ -0,0 +1,15 @@
import { ReportHandler } from 'web-vitals';
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;