02211610
This commit is contained in:
longdayi
parent
44a57ce0bb
commit
92983baf52
|
|
@ -1,7 +1,5 @@
|
|||
VITE_APP_TUS_URL=http://localhost:8080
|
||||
VITE_APP_API_URL=http://localhost:3000
|
||||
VITE_APP_SERVER_IP=192.168.252.239
|
||||
VITE_APP_SERVER_PORT=3000
|
||||
VITE_APP_UPLOAD_PORT=80
|
||||
VITE_APP_FILE_PORT=80
|
||||
VITE_APP_VERSION=0.3.0
|
||||
VITE_APP_APP_NAME=MOOC
|
||||
|
|
|
|||
|
|
@ -1,11 +1,41 @@
|
|||
/**
|
||||
* 错误处理模块 - 全局路由级错误展示组件
|
||||
* 功能: 捕获React Router路由层级错误并展示可视化错误信息
|
||||
* 特性:
|
||||
* - 自动解析路由错误对象
|
||||
* - 自适应错误信息展示
|
||||
* - 响应式布局设计
|
||||
*/
|
||||
import { useRouteError } from "react-router-dom";
|
||||
|
||||
/**
|
||||
* 错误展示页面组件
|
||||
* @核心功能 呈现标准化错误界面，用于处理应用程序的路由层级错误
|
||||
* @设计模式 采用展示型组件模式，完全解耦业务逻辑实现纯UI展示
|
||||
* @使用示例 在React Router的RouterProvider中配置errorElement={<ErrorPage/>}
|
||||
*/
|
||||
export default function ErrorPage() {
|
||||
// 使用React Router提供的Hook获取路由错误对象
|
||||
// 类型定义为any以兼容React Router不同版本的类型差异
|
||||
const error: any = useRouteError();
|
||||
return <div className=" flex justify-center items-center pt-64 ">
|
||||
<div className=" flex flex-col gap-4">
|
||||
<div className=" text-xl font-bold text-primary">哦?页面似乎出错了...</div>
|
||||
<div className=" text-tertiary" >{error?.statusText || error?.message}</div>
|
||||
|
||||
return (
|
||||
// 主容器: 基于Flex的垂直水平双居中布局
|
||||
// pt-64: 顶部留白实现视觉层次结构
|
||||
<div className="flex justify-center items-center pt-64">
|
||||
{/* 内容区块: 采用纵向弹性布局控制内部元素间距 */}
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* 主标题: 强调性文字样式配置 */}
|
||||
<div className="text-xl font-bold text-primary">
|
||||
哦?页面似乎出错了...
|
||||
</div>
|
||||
|
||||
{/* 错误详情: 动态渲染错误信息，实现优雅降级策略 */}
|
||||
{/* 使用可选链操作符防止未定义错误，信息优先级: statusText > message */}
|
||||
<div className="text-tertiary">
|
||||
{error?.statusText || error?.message}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@ import HeroSection from './components/HeroSection';
|
|||
import CategorySection from './components/CategorySection';
|
||||
import CoursesSection from './components/CoursesSection';
|
||||
import FeaturedTeachersSection from './components/FeaturedTeachersSection';
|
||||
import { TusUploader } from '@web/src/components/common/uploader/TusUploader';
|
||||
const HomePage = () => {
|
||||
const mockCourses = [
|
||||
{
|
||||
|
|
@ -105,6 +106,7 @@ const HomePage = () => {
|
|||
return (
|
||||
<div className="min-h-screen">
|
||||
<HeroSection />
|
||||
<TusUploader></TusUploader>
|
||||
<CoursesSection
|
||||
title="推荐课程"
|
||||
description="最受欢迎的精品课程，助你快速成长"
|
||||
|
|
|
|||
|
|
@ -2,5 +2,5 @@ import MindEditor from "@web/src/components/common/editor/MindEditor";
|
|||
// import MindElixir, { MindElixirInstance } from "mind-elixir";
|
||||
import { useEffect, useRef } from "react";
|
||||
export default function PathsPage() {
|
||||
// return <MindEditor></MindEditor>
|
||||
return <MindEditor></MindEditor>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,12 +5,8 @@ import {
|
|||
DeleteOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { Upload, Progress, Button } from "antd";
|
||||
import type { UploadFile } from "antd";
|
||||
import { useTusUpload } from "@web/src/hooks/useTusUpload";
|
||||
import toast from "react-hot-toast";
|
||||
import { getCompressedImageUrl } from "@nice/utils";
|
||||
import { api } from "@nice/client";
|
||||
|
||||
export interface TusUploaderProps {
|
||||
value?: string[];
|
||||
onChange?: (value: string[]) => void;
|
||||
|
|
@ -30,16 +26,7 @@ export const TusUploader = ({
|
|||
onChange,
|
||||
multiple = true,
|
||||
}: TusUploaderProps) => {
|
||||
const { data: files } = api.resource.findMany.useQuery({
|
||||
where: {
|
||||
fileId: { in: value },
|
||||
},
|
||||
select: {
|
||||
id: true,
|
||||
fileId: true,
|
||||
title: true,
|
||||
},
|
||||
});
|
||||
|
||||
const { handleFileUpload, uploadProgress } = useTusUpload();
|
||||
const [uploadingFiles, setUploadingFiles] = useState<UploadingFile[]>([]);
|
||||
const [completedFiles, setCompletedFiles] = useState<UploadingFile[]>(
|
||||
|
|
@ -74,6 +61,7 @@ export const TusUploader = ({
|
|||
|
||||
const handleBeforeUpload = useCallback(
|
||||
(file: File) => {
|
||||
|
||||
const fileKey = `${file.name}-${Date.now()}`;
|
||||
|
||||
setUploadingFiles((prev) => [
|
||||
|
|
@ -151,7 +139,7 @@ export const TusUploader = ({
|
|||
name="files"
|
||||
multiple={multiple}
|
||||
showUploadList={false}
|
||||
style={{ background: "transparent", borderStyle: "none" }}
|
||||
|
||||
beforeUpload={handleBeforeUpload}>
|
||||
<p className="ant-upload-drag-icon">
|
||||
<UploadOutlined />
|
||||
|
|
|
|||
|
|
@ -33,15 +33,9 @@ import {
|
|||
useSortable,
|
||||
verticalListSortingStrategy,
|
||||
} from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import QuillEditor from "@web/src/components/common/editor/quill/QuillEditor";
|
||||
import { TusUploader } from "@web/src/components/common/uploader/TusUploader";
|
||||
import { Lecture, LectureType, PostType } from "@nice/common";
|
||||
import { useCourseEditor } from "../../context/CourseEditorContext";
|
||||
import { usePost } from "@nice/client";
|
||||
import toast from "react-hot-toast";
|
||||
import { CourseContentFormHeader } from "./CourseContentFormHeader";
|
||||
import { CourseSectionEmpty } from "./CourseSectionEmpty";
|
||||
import { LectureData, SectionData } from "./interface";
|
||||
import { SortableLecture } from "./SortableLecture";
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ export const env: {
|
|||
APP_NAME: string;
|
||||
SERVER_IP: string;
|
||||
VERSION: string;
|
||||
UPLOAD_PORT: string;
|
||||
FILE_PORT: string;
|
||||
SERVER_PORT: string;
|
||||
} = {
|
||||
APP_NAME: import.meta.env.PROD
|
||||
|
|
@ -11,9 +11,9 @@ export const env: {
|
|||
SERVER_IP: import.meta.env.PROD
|
||||
? (window as any).env.VITE_APP_SERVER_IP
|
||||
: import.meta.env.VITE_APP_SERVER_IP,
|
||||
UPLOAD_PORT: import.meta.env.PROD
|
||||
? (window as any).env.VITE_APP_UPLOAD_PORT
|
||||
: import.meta.env.VITE_APP_UPLOAD_PORT,
|
||||
FILE_PORT: import.meta.env.PROD
|
||||
? (window as any).env.VITE_APP_FILE_PORT
|
||||
: import.meta.env.VITE_APP_FILE_PORT,
|
||||
SERVER_PORT: import.meta.env.PROD
|
||||
? (window as any).env.VITE_APP_SERVER_PORT
|
||||
: import.meta.env.VITE_APP_SERVER_PORT,
|
||||
|
|
|
|||
|
|
@ -2,11 +2,6 @@ import { useState } from "react";
|
|||
import * as tus from "tus-js-client";
|
||||
import { env } from "../env";
|
||||
import { getCompressedImageUrl } from "@nice/utils";
|
||||
// useTusUpload.ts
|
||||
interface UploadProgress {
|
||||
fileId: string;
|
||||
progress: number;
|
||||
}
|
||||
|
||||
interface UploadResult {
|
||||
compressedUrl: string;
|
||||
|
|
@ -35,9 +30,7 @@ export function useTusUpload() {
|
|||
if (uploadIndex === -1 || uploadIndex + 4 >= parts.length) {
|
||||
throw new Error("Invalid upload URL format");
|
||||
}
|
||||
console.log(env.UPLOAD_PORT);
|
||||
const resUrl = `http://${env.SERVER_IP}:${env.UPLOAD_PORT}/uploads/${parts.slice(uploadIndex + 1, uploadIndex + 6).join("/")}`;
|
||||
|
||||
const resUrl = `http://${env.SERVER_IP}:${env.FILE_PORT}/uploads/${parts.slice(uploadIndex + 1, uploadIndex + 6).join("/")}`;
|
||||
return resUrl;
|
||||
};
|
||||
const handleFileUpload = async (
|
||||
|
|
@ -46,11 +39,13 @@ export function useTusUpload() {
|
|||
onError: (error: Error) => void,
|
||||
fileKey: string // 添加文件唯一标识
|
||||
) => {
|
||||
// console.log()
|
||||
setIsUploading(true);
|
||||
setUploadProgress((prev) => ({ ...prev, [fileKey]: 0 }));
|
||||
setUploadError(null);
|
||||
|
||||
try {
|
||||
console.log(`http://${env.SERVER_IP}:${env.SERVER_PORT}/upload`)
|
||||
const upload = new tus.Upload(file, {
|
||||
endpoint: `http://${env.SERVER_IP}:${env.SERVER_PORT}/upload`,
|
||||
retryDelays: [0, 1000, 3000, 5000],
|
||||
|
|
@ -97,6 +92,7 @@ export function useTusUpload() {
|
|||
onError: (error) => {
|
||||
setIsUploading(false);
|
||||
setUploadError(error.message);
|
||||
console.log(error)
|
||||
onError(error);
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@
|
|||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"dev": "pnpm run --parallel dev"
|
||||
"dev": "pnpm run --parallel dev",
|
||||
"db:clear": "pnpm --filter common run db:clear"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "insiinc",
|
||||
|
|
|
|||
|
|
@ -413,7 +413,6 @@ model Animal {
|
|||
personId String?
|
||||
person Person? @relation(fields: [personId], references: [id])
|
||||
}
|
||||
|
||||
model Person {
|
||||
id String @id @default(cuid())
|
||||
name String
|
||||
|
|
|
|||
Loading…
Reference in New Issue