init: 0.1.1
feat: login page && auth required todo: 断点上传
This commit is contained in:
parent
b3ff70167f
commit
a2635698e0
2
.dockerignore
Normal file
2
.dockerignore
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
26
Dockerfile
26
Dockerfile
@ -1,24 +1,28 @@
|
|||||||
# 第一阶段:构建前端
|
# 第一阶段:构建前端
|
||||||
FROM node:20-alpine AS frontend-builder
|
FROM node:20-alpine AS frontend-builder
|
||||||
WORKDIR /app
|
RUN npm install -g pnpm --registry=https://registry.npmmirror.com
|
||||||
RUN npm install -g pnpm
|
COPY frontend /app/frontend
|
||||||
COPY frontend/package.json frontend/pnpm-lock.yaml* ./
|
WORKDIR /app/frontend
|
||||||
RUN pnpm install
|
RUN pnpm install --registry=https://registry.npmmirror.com
|
||||||
COPY frontend .
|
|
||||||
RUN pnpm run build
|
RUN pnpm run build
|
||||||
|
|
||||||
# 第二阶段:构建 Golang 后端
|
# 第二阶段:构建 Golang 后端
|
||||||
FROM golang:alpine AS backend-builder
|
FROM golang:alpine AS backend-builder
|
||||||
WORKDIR /app
|
WORKDIR /app
|
||||||
COPY go.mod go.sum ./
|
ENV CGO_ENABLED=0
|
||||||
|
ENV GOOS=linux
|
||||||
|
ENV GOPROXY=https://goproxy.cn
|
||||||
|
COPY go.mod /app/go.mod
|
||||||
|
COPY go.sum /app/go.sum
|
||||||
RUN go mod download
|
RUN go mod download
|
||||||
COPY main.go internal ./
|
COPY main.go /app/main.go
|
||||||
RUN CGO_ENABLED=0 GOOS=linux go build -o main .
|
COPY internal /app/internal
|
||||||
|
RUN go build -ldflags '-s -w' -o ushare .
|
||||||
|
|
||||||
# 第三阶段:生成最终镜像
|
# 第三阶段:生成最终镜像
|
||||||
FROM nginx:alpine
|
FROM nginx:alpine
|
||||||
COPY --from=frontend-builder /app/dist /usr/share/nginx/html
|
COPY --from=frontend-builder /app/frontend/dist /usr/share/nginx/html
|
||||||
COPY --from=backend-builder /app/main /app/main
|
COPY --from=backend-builder /app/ushare /usr/local/bin/ushare
|
||||||
|
|
||||||
# 配置 Nginx
|
# 配置 Nginx
|
||||||
RUN rm /etc/nginx/conf.d/default.conf
|
RUN rm /etc/nginx/conf.d/default.conf
|
||||||
@ -28,4 +32,4 @@ COPY deployment/nginx.conf /etc/nginx/conf.d
|
|||||||
EXPOSE 80
|
EXPOSE 80
|
||||||
|
|
||||||
# 启动服务
|
# 启动服务
|
||||||
CMD sh -c "/app/main & nginx -g 'daemon off;'"
|
CMD sh -c "ushare & nginx -g 'daemon off;'"
|
@ -1,13 +1,23 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<!-- Emoji 图标方案 -->
|
||||||
|
<link rel="icon"
|
||||||
|
href="data:image/svg+xml,
|
||||||
|
<svg xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='0 0 100 100'>
|
||||||
|
<text y='.9em'
|
||||||
|
font-size='90'
|
||||||
|
style='font-family: Arial, sans-serif'>
|
||||||
|
🗃️
|
||||||
|
</text>
|
||||||
|
</svg>">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite + React + TS</title>
|
<title>UShare</title>
|
||||||
</head>
|
</head>
|
||||||
<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>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
@ -13,6 +13,7 @@
|
|||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
"react-dom": "^19.0.0",
|
"react-dom": "^19.0.0",
|
||||||
"react-jss": "^10.10.0",
|
"react-jss": "^10.10.0",
|
||||||
|
"react-router-dom": "^7.5.3",
|
||||||
"zustand": "^5.0.3"
|
"zustand": "^5.0.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
51
frontend/pnpm-lock.yaml
generated
51
frontend/pnpm-lock.yaml
generated
@ -17,6 +17,9 @@ importers:
|
|||||||
react-jss:
|
react-jss:
|
||||||
specifier: ^10.10.0
|
specifier: ^10.10.0
|
||||||
version: 10.10.0(react@19.1.0)
|
version: 10.10.0(react@19.1.0)
|
||||||
|
react-router-dom:
|
||||||
|
specifier: ^7.5.3
|
||||||
|
version: 7.5.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||||
zustand:
|
zustand:
|
||||||
specifier: ^5.0.3
|
specifier: ^5.0.3
|
||||||
version: 5.0.3(@types/react@19.1.2)(react@19.1.0)
|
version: 5.0.3(@types/react@19.1.2)(react@19.1.0)
|
||||||
@ -640,6 +643,10 @@ packages:
|
|||||||
convert-source-map@2.0.0:
|
convert-source-map@2.0.0:
|
||||||
resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
|
resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
|
||||||
|
|
||||||
|
cookie@1.0.2:
|
||||||
|
resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==}
|
||||||
|
engines: {node: '>=18'}
|
||||||
|
|
||||||
cross-spawn@7.0.6:
|
cross-spawn@7.0.6:
|
||||||
resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
|
resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
|
||||||
engines: {node: '>= 8'}
|
engines: {node: '>= 8'}
|
||||||
@ -1120,6 +1127,23 @@ packages:
|
|||||||
resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
|
resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
|
||||||
engines: {node: '>=0.10.0'}
|
engines: {node: '>=0.10.0'}
|
||||||
|
|
||||||
|
react-router-dom@7.5.3:
|
||||||
|
resolution: {integrity: sha512-cK0jSaTyW4jV9SRKAItMIQfWZ/D6WEZafgHuuCb9g+SjhLolY78qc+De4w/Cz9ybjvLzShAmaIMEXt8iF1Cm+A==}
|
||||||
|
engines: {node: '>=20.0.0'}
|
||||||
|
peerDependencies:
|
||||||
|
react: '>=18'
|
||||||
|
react-dom: '>=18'
|
||||||
|
|
||||||
|
react-router@7.5.3:
|
||||||
|
resolution: {integrity: sha512-3iUDM4/fZCQ89SXlDa+Ph3MevBrozBAI655OAfWQlTm9nBR0IKlrmNwFow5lPHttbwvITZfkeeeZFP6zt3F7pw==}
|
||||||
|
engines: {node: '>=20.0.0'}
|
||||||
|
peerDependencies:
|
||||||
|
react: '>=18'
|
||||||
|
react-dom: '>=18'
|
||||||
|
peerDependenciesMeta:
|
||||||
|
react-dom:
|
||||||
|
optional: true
|
||||||
|
|
||||||
react@19.1.0:
|
react@19.1.0:
|
||||||
resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
|
resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
|
||||||
engines: {node: '>=0.10.0'}
|
engines: {node: '>=0.10.0'}
|
||||||
@ -1155,6 +1179,9 @@ packages:
|
|||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
|
|
||||||
|
set-cookie-parser@2.7.1:
|
||||||
|
resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==}
|
||||||
|
|
||||||
shallow-equal@1.2.1:
|
shallow-equal@1.2.1:
|
||||||
resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==}
|
resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==}
|
||||||
|
|
||||||
@ -1205,6 +1232,9 @@ packages:
|
|||||||
peerDependencies:
|
peerDependencies:
|
||||||
typescript: '>=4.8.4'
|
typescript: '>=4.8.4'
|
||||||
|
|
||||||
|
turbo-stream@2.4.0:
|
||||||
|
resolution: {integrity: sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==}
|
||||||
|
|
||||||
type-check@0.4.0:
|
type-check@0.4.0:
|
||||||
resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
|
resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
|
||||||
engines: {node: '>= 0.8.0'}
|
engines: {node: '>= 0.8.0'}
|
||||||
@ -1833,6 +1863,8 @@ snapshots:
|
|||||||
|
|
||||||
convert-source-map@2.0.0: {}
|
convert-source-map@2.0.0: {}
|
||||||
|
|
||||||
|
cookie@1.0.2: {}
|
||||||
|
|
||||||
cross-spawn@7.0.6:
|
cross-spawn@7.0.6:
|
||||||
dependencies:
|
dependencies:
|
||||||
path-key: 3.1.1
|
path-key: 3.1.1
|
||||||
@ -2344,6 +2376,21 @@ snapshots:
|
|||||||
|
|
||||||
react-refresh@0.17.0: {}
|
react-refresh@0.17.0: {}
|
||||||
|
|
||||||
|
react-router-dom@7.5.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
|
||||||
|
dependencies:
|
||||||
|
react: 19.1.0
|
||||||
|
react-dom: 19.1.0(react@19.1.0)
|
||||||
|
react-router: 7.5.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||||
|
|
||||||
|
react-router@7.5.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
|
||||||
|
dependencies:
|
||||||
|
cookie: 1.0.2
|
||||||
|
react: 19.1.0
|
||||||
|
set-cookie-parser: 2.7.1
|
||||||
|
turbo-stream: 2.4.0
|
||||||
|
optionalDependencies:
|
||||||
|
react-dom: 19.1.0(react@19.1.0)
|
||||||
|
|
||||||
react@19.1.0: {}
|
react@19.1.0: {}
|
||||||
|
|
||||||
regenerator-runtime@0.14.1: {}
|
regenerator-runtime@0.14.1: {}
|
||||||
@ -2388,6 +2435,8 @@ snapshots:
|
|||||||
|
|
||||||
semver@7.7.1: {}
|
semver@7.7.1: {}
|
||||||
|
|
||||||
|
set-cookie-parser@2.7.1: {}
|
||||||
|
|
||||||
shallow-equal@1.2.1: {}
|
shallow-equal@1.2.1: {}
|
||||||
|
|
||||||
shebang-command@2.0.0:
|
shebang-command@2.0.0:
|
||||||
@ -2429,6 +2478,8 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
typescript: 5.7.3
|
typescript: 5.7.3
|
||||||
|
|
||||||
|
turbo-stream@2.4.0: {}
|
||||||
|
|
||||||
type-check@0.4.0:
|
type-check@0.4.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
prelude-ls: 1.2.1
|
prelude-ls: 1.2.1
|
||||||
|
@ -1,5 +0,0 @@
|
|||||||
import {FileSharing} from "./page/share.tsx";
|
|
||||||
|
|
||||||
export function App() {
|
|
||||||
return <FileSharing />
|
|
||||||
}
|
|
@ -1,5 +1,6 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
|
||||||
interface UploadRes {
|
interface UploadRes {
|
||||||
code: string
|
code: string
|
||||||
}
|
}
|
||||||
@ -25,6 +26,12 @@ export const useFileUpload = () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
if (!res1.ok) {
|
if (!res1.ok) {
|
||||||
|
console.log(`[D] upload: put file not ok, status = ${res1.status}, res = ${await res1.text()}`)
|
||||||
|
if (res1.status === 401) {
|
||||||
|
window.location.href = "/login?next=/share"
|
||||||
|
return ""
|
||||||
|
}
|
||||||
|
|
||||||
throw new Error("上传失败<1>");
|
throw new Error("上传失败<1>");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
159
frontend/src/component/fluid/cloud.tsx
Normal file
159
frontend/src/component/fluid/cloud.tsx
Normal file
@ -0,0 +1,159 @@
|
|||||||
|
import { useRef, useEffect } from 'react';
|
||||||
|
|
||||||
|
export const CloudBackground = () => {
|
||||||
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||||
|
|
||||||
|
// 完整可配置参数
|
||||||
|
const config = {
|
||||||
|
cloudNum: 8, // 云朵数量
|
||||||
|
maxSpeed: 3.0, // 最大水平速度
|
||||||
|
cloudSize: 100, // 基础云朵尺寸 (新增)
|
||||||
|
sizeVariation: 0.5, // 尺寸随机变化率 (0-1)
|
||||||
|
colorVariation: 20, // 色相变化范围
|
||||||
|
verticalOscillation: 0.5, // 垂直浮动幅度
|
||||||
|
shapeComplexity: 5, // 形状复杂度(组成圆形数量)
|
||||||
|
boundaryOffset: 3 // 边界偏移倍数
|
||||||
|
};
|
||||||
|
|
||||||
|
type Cloud = {
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
speed: number;
|
||||||
|
circles: CloudCircle[];
|
||||||
|
color: string;
|
||||||
|
maxRadius: number; // 记录云朵最大半径
|
||||||
|
};
|
||||||
|
|
||||||
|
type CloudCircle = {
|
||||||
|
offsetX: number;
|
||||||
|
offsetY: number;
|
||||||
|
radius: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const canvas = canvasRef.current!;
|
||||||
|
const ctx = canvas.getContext('2d')!;
|
||||||
|
|
||||||
|
const resize = () => {
|
||||||
|
canvas.width = window.innerWidth;
|
||||||
|
canvas.height = window.innerHeight;
|
||||||
|
};
|
||||||
|
resize();
|
||||||
|
|
||||||
|
// 生成云朵形状(基于配置参数)
|
||||||
|
const createCloudShape = () => {
|
||||||
|
const circles: CloudCircle[] = [];
|
||||||
|
const circleCount = 4 + Math.floor(Math.random() * config.shapeComplexity);
|
||||||
|
|
||||||
|
for(let i = 0; i < circleCount; i++) {
|
||||||
|
circles.push({
|
||||||
|
offsetX: (Math.random() - 0.5) * config.cloudSize * 1.5,
|
||||||
|
offsetY: (Math.random() - 0.5) * config.cloudSize * 0.8,
|
||||||
|
radius: config.cloudSize * (1 - config.sizeVariation + Math.random() * config.sizeVariation)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return circles;
|
||||||
|
};
|
||||||
|
|
||||||
|
let clouds: Cloud[] = [];
|
||||||
|
const createClouds = () => {
|
||||||
|
clouds = Array.from({ length: config.cloudNum }).map(() => {
|
||||||
|
const shape = createCloudShape();
|
||||||
|
return {
|
||||||
|
x: Math.random() * canvas.width,
|
||||||
|
y: canvas.height * (0.2 + Math.random() * 0.6),
|
||||||
|
speed: (Math.random() * 0.5 + 0.5) * config.maxSpeed,
|
||||||
|
circles: shape,
|
||||||
|
color: `hsla(210, 30%, 95%, ${0.8 + Math.random() * 0.2})`,
|
||||||
|
maxRadius: Math.max(...shape.map(c => c.radius)) // 计算最大半径
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const drawCloud = (cloud: Cloud) => {
|
||||||
|
ctx.save();
|
||||||
|
ctx.beginPath();
|
||||||
|
|
||||||
|
cloud.circles.forEach(circle => {
|
||||||
|
ctx.moveTo(cloud.x + circle.offsetX, cloud.y + circle.offsetY);
|
||||||
|
ctx.arc(
|
||||||
|
cloud.x + circle.offsetX,
|
||||||
|
cloud.y + circle.offsetY,
|
||||||
|
circle.radius,
|
||||||
|
0,
|
||||||
|
Math.PI * 2
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const gradient = ctx.createRadialGradient(
|
||||||
|
cloud.x, cloud.y, 0,
|
||||||
|
cloud.x, cloud.y, config.cloudSize * 2
|
||||||
|
);
|
||||||
|
gradient.addColorStop(0, cloud.color);
|
||||||
|
gradient.addColorStop(1, `hsla(210, 50%, 98%, 0.3)`);
|
||||||
|
|
||||||
|
ctx.fillStyle = gradient;
|
||||||
|
ctx.filter = `blur(${config.cloudSize * 0.2}px)`; // 模糊与尺寸关联
|
||||||
|
ctx.fill();
|
||||||
|
ctx.restore();
|
||||||
|
};
|
||||||
|
|
||||||
|
let animationFrameId: number;
|
||||||
|
const animate = () => {
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
// 天空渐变背景
|
||||||
|
const skyGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
|
||||||
|
skyGradient.addColorStop(0, '#e6f3ff');
|
||||||
|
skyGradient.addColorStop(1, '#d1e8ff');
|
||||||
|
ctx.fillStyle = skyGradient;
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
clouds.forEach(cloud => {
|
||||||
|
cloud.x += cloud.speed;
|
||||||
|
cloud.y += Math.sin(Date.now() / 1000 + cloud.x) * config.verticalOscillation;
|
||||||
|
|
||||||
|
// 基于实际最大半径的边界检测
|
||||||
|
const resetPosition = cloud.x > canvas.width + (cloud.maxRadius * config.boundaryOffset);
|
||||||
|
if (resetPosition) {
|
||||||
|
cloud.x = -cloud.maxRadius * config.boundaryOffset;
|
||||||
|
// 重置时重新生成形状
|
||||||
|
const newShape = createCloudShape();
|
||||||
|
cloud.circles = newShape;
|
||||||
|
cloud.maxRadius = Math.max(...newShape.map(c => c.radius));
|
||||||
|
}
|
||||||
|
|
||||||
|
drawCloud(cloud);
|
||||||
|
});
|
||||||
|
|
||||||
|
animationFrameId = requestAnimationFrame(animate);
|
||||||
|
};
|
||||||
|
|
||||||
|
createClouds();
|
||||||
|
animate();
|
||||||
|
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
resize();
|
||||||
|
createClouds();
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('resize', resize);
|
||||||
|
cancelAnimationFrame(animationFrameId);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<canvas
|
||||||
|
ref={canvasRef}
|
||||||
|
style={{
|
||||||
|
position: 'fixed',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
zIndex: -1,
|
||||||
|
width: '100%',
|
||||||
|
height: '100%'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
124
frontend/src/component/fluid/fluid.tsx
Normal file
124
frontend/src/component/fluid/fluid.tsx
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
import { useRef, useEffect } from 'react';
|
||||||
|
|
||||||
|
export const AnimatedBackground = () => {
|
||||||
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||||
|
|
||||||
|
// 粒子配置
|
||||||
|
const config = {
|
||||||
|
particleNum: 100,
|
||||||
|
maxSpeed: 1.5,
|
||||||
|
particleRadius: 2,
|
||||||
|
lineWidth: 1.5,
|
||||||
|
lineDistance: 100
|
||||||
|
};
|
||||||
|
|
||||||
|
type Particle = {
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
speedX: number;
|
||||||
|
speedY: number;
|
||||||
|
color: string;
|
||||||
|
radius: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const canvas = canvasRef.current!;
|
||||||
|
const ctx = canvas.getContext('2d')!;
|
||||||
|
|
||||||
|
// 设置canvas尺寸
|
||||||
|
const resize = () => {
|
||||||
|
canvas.width = window.innerWidth;
|
||||||
|
canvas.height = window.innerHeight;
|
||||||
|
};
|
||||||
|
resize();
|
||||||
|
|
||||||
|
// 创建粒子数组
|
||||||
|
let particles: Particle[] = [];
|
||||||
|
const createParticles = () => {
|
||||||
|
particles = Array.from({ length: config.particleNum }).map(() => ({
|
||||||
|
x: Math.random() * canvas.width,
|
||||||
|
y: Math.random() * canvas.height,
|
||||||
|
speedX: (Math.random() - 0.5) * config.maxSpeed,
|
||||||
|
speedY: (Math.random() - 0.5) * config.maxSpeed,
|
||||||
|
color: `hsl(${Math.random() * 360}, 70%, 60%)`,
|
||||||
|
radius: Math.random() * config.particleRadius + 1
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
// 绘制连线
|
||||||
|
const drawLine = (p1: Particle, p2: Particle) => {
|
||||||
|
const dx = p1.x - p2.x;
|
||||||
|
const dy = p1.y - p2.y;
|
||||||
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
||||||
|
|
||||||
|
if (dist < config.lineDistance) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.strokeStyle = p1.color;
|
||||||
|
ctx.lineWidth = config.lineWidth * (1 - dist / config.lineDistance);
|
||||||
|
ctx.moveTo(p1.x, p1.y);
|
||||||
|
ctx.lineTo(p2.x, p2.y);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 动画循环
|
||||||
|
let animationFrameId: number;
|
||||||
|
const animate = () => {
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
// 更新粒子位置
|
||||||
|
particles.forEach(particle => {
|
||||||
|
particle.x += particle.speedX;
|
||||||
|
particle.y += particle.speedY;
|
||||||
|
|
||||||
|
// 边界反弹
|
||||||
|
if (particle.x < 0 || particle.x > canvas.width) particle.speedX *= -1;
|
||||||
|
if (particle.y < 0 || particle.y > canvas.height) particle.speedY *= -1;
|
||||||
|
|
||||||
|
// 绘制粒子
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = particle.color;
|
||||||
|
ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
|
||||||
|
ctx.fill();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 绘制粒子间的连线
|
||||||
|
for (let i = 0; i < particles.length; i++) {
|
||||||
|
for (let j = i + 1; j < particles.length; j++) {
|
||||||
|
drawLine(particles[i], particles[j]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
animationFrameId = requestAnimationFrame(animate);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
createParticles();
|
||||||
|
animate();
|
||||||
|
|
||||||
|
// 窗口resize处理
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
resize();
|
||||||
|
createParticles();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 清理
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('resize', resize);
|
||||||
|
cancelAnimationFrame(animationFrameId);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<canvas
|
||||||
|
ref={canvasRef}
|
||||||
|
style={{
|
||||||
|
position: 'fixed',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
zIndex: -1,
|
||||||
|
backgroundColor: '#1a1a1a'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
@ -1,10 +1,19 @@
|
|||||||
import { StrictMode } from 'react'
|
import { StrictMode } from 'react'
|
||||||
import { createRoot } from 'react-dom/client'
|
import { createRoot } from 'react-dom/client'
|
||||||
import './index.css'
|
import './index.css'
|
||||||
import {App} from './App.tsx'
|
import {createBrowserRouter, RouterProvider} from "react-router-dom";
|
||||||
|
import {Login} from "./page/login.tsx";
|
||||||
|
import {FileSharing} from "./page/share.tsx";
|
||||||
|
|
||||||
createRoot(document.getElementById('root')!).render(
|
const container = document.getElementById('root')
|
||||||
|
const root = createRoot(container!)
|
||||||
|
const router = createBrowserRouter([
|
||||||
|
{path: "/login", element: <Login />},
|
||||||
|
{path: "*", element: <FileSharing />},
|
||||||
|
])
|
||||||
|
|
||||||
|
root.render(
|
||||||
<StrictMode>
|
<StrictMode>
|
||||||
<App />
|
<RouterProvider router={router} />
|
||||||
</StrictMode>,
|
</StrictMode>,
|
||||||
)
|
)
|
||||||
|
@ -2,6 +2,7 @@ import {createUseStyles} from "react-jss";
|
|||||||
|
|
||||||
const useStyle = createUseStyles({
|
const useStyle = createUseStyles({
|
||||||
container: {
|
container: {
|
||||||
|
backgroundColor: 'lightgray',
|
||||||
position: "relative",
|
position: "relative",
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
},
|
},
|
||||||
|
100
frontend/src/page/login.tsx
Normal file
100
frontend/src/page/login.tsx
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {createUseStyles} from "react-jss";
|
||||||
|
import {CloudBackground} from "../component/fluid/cloud.tsx";
|
||||||
|
|
||||||
|
const useClass = createUseStyles({
|
||||||
|
container: {
|
||||||
|
overflow: 'hidden',
|
||||||
|
height: '100vh',
|
||||||
|
margin: 0,
|
||||||
|
padding: 0,
|
||||||
|
boxSizing: "border-box",
|
||||||
|
fontFamily: "'Segoe UI', Arial, sans-serif",
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
position: 'relative',
|
||||||
|
},
|
||||||
|
login_container: {
|
||||||
|
background: "rgba(255,255,255,.5)",
|
||||||
|
boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
|
||||||
|
width: "350px",
|
||||||
|
height: '100%',
|
||||||
|
position: 'absolute',
|
||||||
|
left: '70%',
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
height: '100%',
|
||||||
|
width: '100%',
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
flexDirection: 'column',
|
||||||
|
color: "#1a73e8",
|
||||||
|
padding: '40px',
|
||||||
|
},
|
||||||
|
input: {
|
||||||
|
width: '100%',
|
||||||
|
marginTop: '20px',
|
||||||
|
"& > input": {
|
||||||
|
width: "calc(100% - 30px)",
|
||||||
|
padding: "12px 15px",
|
||||||
|
border: "1px solid #ddd",
|
||||||
|
borderRadius: "6px",
|
||||||
|
fontSize: "16px",
|
||||||
|
transition: "border-color 0.3s",
|
||||||
|
|
||||||
|
"&:focus": {
|
||||||
|
outline: "none",
|
||||||
|
borderColor: "#1a73e8",
|
||||||
|
boxShadow: "0 0 0 2px rgba(26, 115, 232, 0.2)",
|
||||||
|
},
|
||||||
|
"&:hover": {
|
||||||
|
borderColor: "#1a73e8",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
marginTop: '20px',
|
||||||
|
width: '100%',
|
||||||
|
"& > button": {
|
||||||
|
width: "100%",
|
||||||
|
padding: "12px",
|
||||||
|
background: "#1a73e8",
|
||||||
|
color: "white",
|
||||||
|
border: "none",
|
||||||
|
borderRadius: "6px",
|
||||||
|
fontSize: "16px",
|
||||||
|
cursor: "pointer",
|
||||||
|
transition: "background 0.3s",
|
||||||
|
"&:hover": {
|
||||||
|
background: "#1557b0",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
export const Login: React.FC = () => {
|
||||||
|
const classes = useClass()
|
||||||
|
|
||||||
|
return <div className={classes.container}>
|
||||||
|
<CloudBackground/>
|
||||||
|
<div className={classes.login_container}>
|
||||||
|
<div className={classes.form}>
|
||||||
|
<h2>UShare</h2>
|
||||||
|
<div className={classes.input}>
|
||||||
|
<input placeholder={"请输入账号"}/>
|
||||||
|
</div>
|
||||||
|
<div className={classes.input}>
|
||||||
|
<input placeholder={"请输入密码"} type={"password"} />
|
||||||
|
</div>
|
||||||
|
<div className={classes.button}>
|
||||||
|
<button>登录</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
@ -3,5 +3,8 @@
|
|||||||
"references": [
|
"references": [
|
||||||
{ "path": "./tsconfig.app.json" },
|
{ "path": "./tsconfig.app.json" },
|
||||||
{ "path": "./tsconfig.node.json" }
|
{ "path": "./tsconfig.node.json" }
|
||||||
]
|
],
|
||||||
|
"compilerOptions": {
|
||||||
|
"allowJs": true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -109,8 +109,12 @@ func (m *meta) Start(ctx context.Context) {
|
|||||||
for code, info := range m.m {
|
for code, info := range m.m {
|
||||||
if now.Sub(info.last) > 1*time.Minute {
|
if now.Sub(info.last) > 1*time.Minute {
|
||||||
m.Lock()
|
m.Lock()
|
||||||
info.f.Close()
|
if err := info.f.Close(); err != nil {
|
||||||
os.RemoveAll(opt.FilePath(code))
|
log.Warn("handler.Meta: [timer] close file failed, file = %s, err = %s", opt.FilePath(code), err.Error())
|
||||||
|
}
|
||||||
|
if err := os.RemoveAll(opt.FilePath(code)); err != nil {
|
||||||
|
log.Warn("handler.Meta: [timer] remove file failed, file = %s, err = %s", opt.FilePath(code), err.Error())
|
||||||
|
}
|
||||||
delete(m.m, code)
|
delete(m.m, code)
|
||||||
m.Unlock()
|
m.Unlock()
|
||||||
log.Warn("MetaController: code timeout removed, code = %s", code)
|
log.Warn("MetaController: code timeout removed, code = %s", code)
|
||||||
|
@ -50,6 +50,10 @@ func Fetch() nf.HandlerFunc {
|
|||||||
func ShareNew() nf.HandlerFunc {
|
func ShareNew() nf.HandlerFunc {
|
||||||
return func(c *nf.Ctx) error {
|
return func(c *nf.Ctx) error {
|
||||||
|
|
||||||
|
if opt.Cfg.Auth {
|
||||||
|
return c.SendStatus(http.StatusUnauthorized)
|
||||||
|
}
|
||||||
|
|
||||||
filename := strings.TrimSpace(c.Param("filename"))
|
filename := strings.TrimSpace(c.Param("filename"))
|
||||||
if filename == "" {
|
if filename == "" {
|
||||||
return c.Status(http.StatusBadRequest).JSON(map[string]string{"msg": "filename required"})
|
return c.Status(http.StatusBadRequest).JSON(map[string]string{"msg": "filename required"})
|
||||||
|
@ -4,6 +4,7 @@ type config struct {
|
|||||||
Debug bool
|
Debug bool
|
||||||
Address string
|
Address string
|
||||||
DataPath string
|
DataPath string
|
||||||
|
Auth bool
|
||||||
}
|
}
|
||||||
|
|
||||||
var (
|
var (
|
||||||
|
1
main.go
1
main.go
@ -15,6 +15,7 @@ func init() {
|
|||||||
flag.BoolVar(&opt.Cfg.Debug, "debug", false, "debug mode")
|
flag.BoolVar(&opt.Cfg.Debug, "debug", false, "debug mode")
|
||||||
flag.StringVar(&opt.Cfg.Address, "address", "0.0.0.0:9119", "")
|
flag.StringVar(&opt.Cfg.Address, "address", "0.0.0.0:9119", "")
|
||||||
flag.StringVar(&opt.Cfg.DataPath, "data", "/data", "")
|
flag.StringVar(&opt.Cfg.DataPath, "data", "/data", "")
|
||||||
|
flag.BoolVar(&opt.Cfg.Auth, "auth", false, "upload need login")
|
||||||
flag.Parse()
|
flag.Parse()
|
||||||
|
|
||||||
if opt.Cfg.Debug {
|
if opt.Cfg.Debug {
|
||||||
|
166
page/login.html
Normal file
166
page/login.html
Normal file
@ -0,0 +1,166 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Login Page</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-container {
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-box {
|
||||||
|
background: white;
|
||||||
|
padding: 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
text-align: center;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"],
|
||||||
|
input[type="password"] {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
transition: border-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"]:focus,
|
||||||
|
input[type="password"]:focus {
|
||||||
|
border-color: #4CAF50;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-options {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.remember-me {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.forgot-password {
|
||||||
|
color: #4CAF50;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.forgot-password:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button:hover {
|
||||||
|
background-color: #45a049;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signup-link {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signup-link a {
|
||||||
|
color: #4CAF50;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signup-link a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.login-box {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-options {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="login-container">
|
||||||
|
<div class="login-box">
|
||||||
|
<h2>Welcome Back</h2>
|
||||||
|
<form class="login-form">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="username">Username</label>
|
||||||
|
<input type="text" id="username" name="username" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="password">Password</label>
|
||||||
|
<input type="password" id="password" name="password" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-options">
|
||||||
|
<label class="remember-me">
|
||||||
|
<input type="checkbox"> Remember me
|
||||||
|
</label>
|
||||||
|
<a href="#" class="forgot-password">Forgot Password?</a>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="login-button">Log In</button>
|
||||||
|
</form>
|
||||||
|
<p class="signup-link">Don't have an account? <a href="#">Sign up</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
Loading…
x
Reference in New Issue
Block a user