first commit
This commit is contained in:
commit
5467ad7ad8
1
.env.development
Normal file
1
.env.development
Normal file
@ -0,0 +1 @@
|
||||
VITE_API_BASE_URL_DEV=http://localhost:12345
|
||||
1
.env.production
Normal file
1
.env.production
Normal file
@ -0,0 +1 @@
|
||||
VITE_API_BASE_URL_PROD=
|
||||
15
.eslintrc.cjs
Normal file
15
.eslintrc.cjs
Normal file
@ -0,0 +1,15 @@
|
||||
/* eslint-env node */
|
||||
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
'extends': [
|
||||
'plugin:vue/vue3-essential',
|
||||
'eslint:recommended',
|
||||
'@vue/eslint-config-typescript',
|
||||
'@vue/eslint-config-prettier/skip-formatting'
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest'
|
||||
}
|
||||
}
|
||||
30
.gitignore
vendored
Normal file
30
.gitignore
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
8
.prettierrc.json
Normal file
8
.prettierrc.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/prettierrc",
|
||||
"semi": false,
|
||||
"tabWidth": 2,
|
||||
"singleQuote": true,
|
||||
"printWidth": 100,
|
||||
"trailingComma": "none"
|
||||
}
|
||||
7
.vscode/extensions.json
vendored
Normal file
7
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"Vue.volar",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"esbenp.prettier-vscode"
|
||||
]
|
||||
}
|
||||
39
README.md
Normal file
39
README.md
Normal file
@ -0,0 +1,39 @@
|
||||
# filecodeboxfronted
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||
|
||||
## Type Support for `.vue` Imports in TS
|
||||
|
||||
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
pnpm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
### Type-Check, Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
pnpm build
|
||||
```
|
||||
|
||||
### Lint with [ESLint](https://eslint.org/)
|
||||
|
||||
```sh
|
||||
pnpm lint
|
||||
```
|
||||
19
index.html
Normal file
19
index.html
Normal file
@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
|
||||
/>
|
||||
<meta name="description" content="{{description}}" />
|
||||
<meta name="keywords" content="{{keywords}}" />
|
||||
<meta name="generator" content="FileCodeBox2.1" />
|
||||
<title>FileCodeBox</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
54
package.json
Normal file
54
package.json
Normal file
@ -0,0 +1,54 @@
|
||||
{
|
||||
"name": "filecodeboxfronted",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "run-p type-check \"build-only {@}\" --",
|
||||
"preview": "vite preview",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --build --force",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
|
||||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/typography": "^0.5.15",
|
||||
"axios": "^1.7.7",
|
||||
"file-saver": "^2.0.5",
|
||||
"lru-cache": "^11.0.1",
|
||||
"lucide-vue-next": "^0.445.0",
|
||||
"marked": "^14.1.2",
|
||||
"pinia": "^2.2.2",
|
||||
"qrcode.vue": "^3.4.1",
|
||||
"spark-md5": "^3.0.2",
|
||||
"vue": "^3.5.8",
|
||||
"vue-router": "^4.4.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/config-array": "^0.18.0",
|
||||
"@eslint/object-schema": "^2.1.4",
|
||||
"@rushstack/eslint-patch": "^1.10.4",
|
||||
"@tsconfig/node20": "^20.1.4",
|
||||
"@types/node": "^20.16.7",
|
||||
"@types/spark-md5": "^3.0.4",
|
||||
"@vitejs/plugin-vue": "^5.1.4",
|
||||
"@vitejs/plugin-vue-jsx": "^4.0.1",
|
||||
"@vue/eslint-config-prettier": "^9.0.0",
|
||||
"@vue/eslint-config-typescript": "^13.0.0",
|
||||
"@vue/tsconfig": "^0.5.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^8.57.1",
|
||||
"eslint-plugin-vue": "^9.28.0",
|
||||
"glob": "^11.0.0",
|
||||
"npm-run-all2": "^6.2.3",
|
||||
"postcss": "^8.4.47",
|
||||
"prettier": "^3.3.3",
|
||||
"rimraf": "^6.0.1",
|
||||
"tailwindcss": "^3.4.13",
|
||||
"typescript": "~5.4.5",
|
||||
"vite": "^5.4.7",
|
||||
"vite-plugin-vue-devtools": "^7.4.6",
|
||||
"vue-tsc": "^2.1.6"
|
||||
}
|
||||
}
|
||||
3417
pnpm-lock.yaml
generated
Normal file
3417
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
143
src/App.vue
Normal file
143
src/App.vue
Normal file
@ -0,0 +1,143 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watchEffect, provide, onMounted } from 'vue'
|
||||
import { RouterView } from 'vue-router'
|
||||
import ThemeToggle from './components/common/ThemeToggle.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import api from './utils/api'
|
||||
const isDarkMode = ref(false)
|
||||
const isLoading = ref(false)
|
||||
const router = useRouter()
|
||||
import AlertComponent from '@/components/common/AlertComponent.vue'
|
||||
import { useAlertStore } from '@/stores/alertStore'
|
||||
|
||||
const alertStore = useAlertStore()
|
||||
// 检查系统颜色模式
|
||||
const checkSystemColorScheme = () => {
|
||||
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
}
|
||||
|
||||
// 从本地存储获取用户之前的选择
|
||||
const getUserPreference = () => {
|
||||
const storedPreference = localStorage.getItem('colorMode')
|
||||
if (storedPreference) {
|
||||
return storedPreference === 'dark'
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// 设置颜色模式
|
||||
const setColorMode = (isDark: boolean) => {
|
||||
isDarkMode.value = isDark
|
||||
localStorage.setItem('colorMode', isDark ? 'dark' : 'light')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const userPreference = getUserPreference()
|
||||
if (userPreference !== null) {
|
||||
setColorMode(userPreference)
|
||||
} else {
|
||||
setColorMode(checkSystemColorScheme())
|
||||
}
|
||||
api.post('/', {}).then((res: any) => {
|
||||
if (res.code === 200) {
|
||||
localStorage.setItem('config', JSON.stringify(res.detail))
|
||||
if (
|
||||
res.detail.notify_title &&
|
||||
res.detail.notify_content &&
|
||||
localStorage.getItem('notify') !== res.detail.notify_title + res.detail.notify_content
|
||||
) {
|
||||
localStorage.setItem('notify', res.detail.notify_title + res.detail.notify_content)
|
||||
alertStore.showAlert(res.detail.notify_title + ': ' + res.detail.notify_content, 'success')
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
document.documentElement.classList.toggle('dark', isDarkMode.value)
|
||||
})
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
isLoading.value = true
|
||||
next()
|
||||
})
|
||||
|
||||
router.afterEach(() => {
|
||||
setTimeout(() => {
|
||||
isLoading.value = false
|
||||
}, 200) // 添加一个小延迟，以确保组件已加载
|
||||
})
|
||||
|
||||
provide('isDarkMode', isDarkMode)
|
||||
provide('setColorMode', setColorMode)
|
||||
provide('isLoading', isLoading)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="['app-container', isDarkMode ? 'dark' : 'light']">
|
||||
<ThemeToggle v-model="isDarkMode" />
|
||||
<div v-if="isLoading" class="loading-overlay">
|
||||
<div class="loading-spinner"></div>
|
||||
</div>
|
||||
<RouterView v-slot="{ Component }">
|
||||
<transition name="fade" mode="out-in">
|
||||
<component :is="Component" :key="$route.fullPath" />
|
||||
</transition>
|
||||
</RouterView>
|
||||
|
||||
<AlertComponent />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.app-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
transition: background-color 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 3px solid #fff;
|
||||
border-top: 3px solid #3498db;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/assets/font/DingTalk.ttf
Normal file
BIN
src/assets/font/DingTalk.ttf
Normal file
Binary file not shown.
12
src/assets/style/main.css
Normal file
12
src/assets/style/main.css
Normal file
@ -0,0 +1,12 @@
|
||||
@import 'tailwindcss/base';
|
||||
@import 'tailwindcss/components';
|
||||
@import 'tailwindcss/utilities';
|
||||
|
||||
@font-face {
|
||||
font-family: 'DingTalk';
|
||||
src: url('@/assets/font/DingTalk.ttf') format('truetype');
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: 'DingTalk', sans-serif !important;
|
||||
}
|
||||
94
src/components/common/AlertComponent.vue
Normal file
94
src/components/common/AlertComponent.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<transition-group
|
||||
name="alert-fade"
|
||||
tag="div"
|
||||
class="fixed top-4 right-4 z-50 w-full sm:max-w-sm md:max-w-md space-y-4 px-4 sm:px-0"
|
||||
>
|
||||
<div
|
||||
v-for="alert in alerts"
|
||||
:key="alert.id"
|
||||
:class="[
|
||||
'w-full rounded-lg shadow-xl overflow-hidden',
|
||||
'bg-gradient-to-r',
|
||||
gradientClasses[alert.type]
|
||||
]"
|
||||
>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<component :is="alertIcons[alert.type]" class="h-6 w-6 text-white" />
|
||||
</div>
|
||||
<div class="ml-3 flex-1 pt-0.5">
|
||||
<p class="text-sm font-medium text-white" v-html="alert.message"></p>
|
||||
</div>
|
||||
<div class="ml-4 flex-shrink-0 flex">
|
||||
<button
|
||||
@click="removeAlert(alert.id)"
|
||||
class="inline-flex text-white hover:text-gray-200 focus:outline-none transition-colors duration-200"
|
||||
>
|
||||
<span class="sr-only">关闭</span>
|
||||
<X class="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-1 bg-white bg-opacity-25">
|
||||
<div
|
||||
class="h-full bg-white transition-all duration-100 ease-out"
|
||||
:style="{ width: `${alert.progress}%` }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useAlertStore } from '@/stores/alertStore'
|
||||
import { CheckCircle, AlertTriangle, AlertCircle, Info, X } from 'lucide-vue-next'
|
||||
import { onMounted, onUnmounted } from 'vue'
|
||||
|
||||
const alertStore = useAlertStore()
|
||||
const { alerts } = storeToRefs(alertStore)
|
||||
const { removeAlert, updateAlertProgress } = alertStore
|
||||
|
||||
const gradientClasses = {
|
||||
success: 'from-green-500 to-green-600',
|
||||
error: 'from-red-500 to-red-600',
|
||||
warning: 'from-yellow-500 to-yellow-600',
|
||||
info: 'from-blue-500 to-blue-600'
|
||||
}
|
||||
|
||||
const alertIcons = {
|
||||
success: CheckCircle,
|
||||
error: AlertTriangle,
|
||||
warning: AlertCircle,
|
||||
info: Info
|
||||
}
|
||||
|
||||
let intervalId: number
|
||||
|
||||
onMounted(() => {
|
||||
intervalId = setInterval(() => {
|
||||
alerts.value.forEach((alert) => {
|
||||
updateAlertProgress(alert.id)
|
||||
})
|
||||
}, 100)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(intervalId)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.alert-fade-enter-active,
|
||||
.alert-fade-leave-active {
|
||||
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
.alert-fade-enter-from,
|
||||
.alert-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(50px) scale(0.95);
|
||||
}
|
||||
</style>
|
||||
154
src/components/common/BorderProgressBar.vue
Normal file
154
src/components/common/BorderProgressBar.vue
Normal file
@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div class="border-progress-container" ref="container">
|
||||
<canvas ref="canvas" class="border-progress-canvas"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
progress: number;
|
||||
}>();
|
||||
|
||||
const container = ref<HTMLDivElement | null>(null);
|
||||
const canvas = ref<HTMLCanvasElement | null>(null);
|
||||
let ctx: CanvasRenderingContext2D | null = null;
|
||||
|
||||
const drawProgress = () => {
|
||||
if (!ctx || !canvas.value || !container.value) return;
|
||||
|
||||
const width = container.value.clientWidth;
|
||||
const height = container.value.clientHeight;
|
||||
canvas.value.width = width;
|
||||
canvas.value.height = height;
|
||||
|
||||
const borderWidth = 4; // 边框宽度
|
||||
const cornerRadius = 8; // 拐角半径
|
||||
ctx.lineWidth = borderWidth;
|
||||
|
||||
// 创建渐变
|
||||
const gradient = ctx.createLinearGradient(0, 0, width, height);
|
||||
gradient.addColorStop(0, '#4f46e5'); // 靛蓝色
|
||||
gradient.addColorStop(0.5, '#7c3aed'); // 紫色
|
||||
gradient.addColorStop(1, '#db2777'); // 粉色
|
||||
|
||||
// 绘制背景
|
||||
ctx.strokeStyle = 'rgba(229, 231, 235, 0.2)'; // 淡灰色半透明
|
||||
drawRoundedRect(ctx, borderWidth / 2, borderWidth / 2, width - borderWidth, height - borderWidth, cornerRadius);
|
||||
ctx.stroke();
|
||||
|
||||
// 计算进度
|
||||
const totalLength = (width + height) * 2 - 8 * cornerRadius + 2 * Math.PI * cornerRadius;
|
||||
const progressLength = (totalLength * props.progress) / 100;
|
||||
|
||||
// 绘制进度
|
||||
ctx.strokeStyle = gradient;
|
||||
ctx.lineCap = 'round';
|
||||
ctx.lineJoin = 'round';
|
||||
ctx.beginPath();
|
||||
|
||||
let remainingLength = progressLength;
|
||||
const halfBorder = borderWidth / 2;
|
||||
const innerWidth = width - borderWidth;
|
||||
const innerHeight = height - borderWidth;
|
||||
|
||||
// 上边
|
||||
if (remainingLength > 0) {
|
||||
const topLength = Math.min(innerWidth - 2 * cornerRadius, remainingLength);
|
||||
ctx.moveTo(cornerRadius + halfBorder, halfBorder);
|
||||
ctx.lineTo(topLength + cornerRadius + halfBorder, halfBorder);
|
||||
remainingLength -= topLength;
|
||||
}
|
||||
|
||||
// 右上角
|
||||
if (remainingLength > 0) {
|
||||
const angle = Math.min(Math.PI / 2, remainingLength / cornerRadius);
|
||||
ctx.arc(innerWidth - cornerRadius + halfBorder, cornerRadius + halfBorder, cornerRadius, -Math.PI / 2, angle - Math.PI / 2, false);
|
||||
remainingLength -= angle * cornerRadius;
|
||||
}
|
||||
|
||||
// 右边
|
||||
if (remainingLength > 0) {
|
||||
const rightLength = Math.min(innerHeight - 2 * cornerRadius, remainingLength);
|
||||
ctx.lineTo(innerWidth + halfBorder, rightLength + cornerRadius + halfBorder);
|
||||
remainingLength -= rightLength;
|
||||
}
|
||||
|
||||
// 右下角
|
||||
if (remainingLength > 0) {
|
||||
const angle = Math.min(Math.PI / 2, remainingLength / cornerRadius);
|
||||
ctx.arc(innerWidth - cornerRadius + halfBorder, innerHeight - cornerRadius + halfBorder, cornerRadius, 0, angle, false);
|
||||
remainingLength -= angle * cornerRadius;
|
||||
}
|
||||
|
||||
// 下边
|
||||
if (remainingLength > 0) {
|
||||
const bottomLength = Math.min(innerWidth - 2 * cornerRadius, remainingLength);
|
||||
ctx.lineTo(innerWidth - bottomLength - cornerRadius + halfBorder, innerHeight + halfBorder);
|
||||
remainingLength -= bottomLength;
|
||||
}
|
||||
|
||||
// 左下角
|
||||
if (remainingLength > 0) {
|
||||
const angle = Math.min(Math.PI / 2, remainingLength / cornerRadius);
|
||||
ctx.arc(cornerRadius + halfBorder, innerHeight - cornerRadius + halfBorder, cornerRadius, Math.PI / 2, Math.PI / 2 + angle, false);
|
||||
remainingLength -= angle * cornerRadius;
|
||||
}
|
||||
|
||||
// 左边
|
||||
if (remainingLength > 0) {
|
||||
const leftLength = Math.min(innerHeight - 2 * cornerRadius, remainingLength);
|
||||
ctx.lineTo(halfBorder, innerHeight - leftLength - cornerRadius + halfBorder);
|
||||
remainingLength -= leftLength;
|
||||
}
|
||||
|
||||
// 左上角
|
||||
if (remainingLength > 0) {
|
||||
const angle = Math.min(Math.PI / 2, remainingLength / cornerRadius);
|
||||
ctx.arc(cornerRadius + halfBorder, cornerRadius + halfBorder, cornerRadius, Math.PI, Math.PI + angle, false);
|
||||
}
|
||||
|
||||
ctx.stroke();
|
||||
};
|
||||
|
||||
function drawRoundedRect(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + radius, y);
|
||||
ctx.lineTo(x + width - radius, y);
|
||||
ctx.arcTo(x + width, y, x + width, y + radius, radius);
|
||||
ctx.lineTo(x + width, y + height - radius);
|
||||
ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
|
||||
ctx.lineTo(x + radius, y + height);
|
||||
ctx.arcTo(x, y + height, x, y + height - radius, radius);
|
||||
ctx.lineTo(x, y + radius);
|
||||
ctx.arcTo(x, y, x + radius, y, radius);
|
||||
ctx.closePath();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (canvas.value) {
|
||||
ctx = canvas.value.getContext('2d');
|
||||
drawProgress();
|
||||
}
|
||||
});
|
||||
|
||||
watch(() => props.progress, drawProgress);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.border-progress-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.border-progress-canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
22
src/components/common/ThemeToggle.vue
Normal file
22
src/components/common/ThemeToggle.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import { inject } from 'vue'
|
||||
import { SunIcon, MoonIcon } from 'lucide-vue-next'
|
||||
|
||||
const isDarkMode = inject('isDarkMode') as { value: boolean }
|
||||
const setColorMode = inject('setColorMode') as (isDark: boolean) => void
|
||||
|
||||
const toggleColorMode = () => {
|
||||
setColorMode(!isDarkMode.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
@click="toggleColorMode"
|
||||
class="fixed top-4 right-4 z-10 p-2 rounded-full transition-all duration-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transform hover:rotate-180"
|
||||
:class="isDarkMode ? 'bg-gray-800 text-yellow-300' : 'bg-white text-gray-800'"
|
||||
>
|
||||
<SunIcon v-if="!isDarkMode" class="w-6 h-6" />
|
||||
<MoonIcon v-else class="w-6 h-6" />
|
||||
</button>
|
||||
</template>
|
||||
59
src/components/retrievew/ContentPreviewModal.vue
Normal file
59
src/components/retrievew/ContentPreviewModal.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-if="show"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
|
||||
>
|
||||
<div
|
||||
class="p-8 rounded-2xl max-w-3xl w-full mx-4"
|
||||
:class="[isDarkMode ? 'bg-gray-900' : 'bg-white']"
|
||||
>
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h3 class="text-xl font-semibold" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
|
||||
内容预览
|
||||
</h3>
|
||||
<button
|
||||
@click="$emit('close')"
|
||||
class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition duration-300"
|
||||
>
|
||||
<XIcon class="h-6 w-6" :class="[isDarkMode ? 'text-white' : 'text-gray-900']" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="prose max-w-none overflow-y-auto max-h-[60vh] p-4 rounded-lg"
|
||||
:class="[isDarkMode ? 'prose-invert bg-gray-800' : 'bg-gray-50']"
|
||||
v-html="renderedContent"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { XIcon } from 'lucide-vue-next'
|
||||
import { computed } from 'vue'
|
||||
import { marked } from 'marked'
|
||||
|
||||
const props = defineProps({
|
||||
show: Boolean,
|
||||
content: String,
|
||||
isDarkMode: Boolean
|
||||
})
|
||||
|
||||
defineEmits(['close'])
|
||||
|
||||
const renderedContent = computed(() => marked(props.content || ''))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
104
src/components/retrievew/FileDetailsModal.vue
Normal file
104
src/components/retrievew/FileDetailsModal.vue
Normal file
@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-if="record"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
|
||||
>
|
||||
<div
|
||||
class="p-8 rounded-2xl max-w-md w-full mx-4 shadow-2xl"
|
||||
:class="[isDarkMode ? 'bg-gray-900' : 'bg-white']"
|
||||
>
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h3 class="text-xl font-semibold" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
|
||||
文件详情
|
||||
</h3>
|
||||
<button
|
||||
@click="$emit('close')"
|
||||
class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition duration-300"
|
||||
>
|
||||
<XIcon class="h-6 w-6" :class="[isDarkMode ? 'text-white' : 'text-gray-900']" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center space-x-4">
|
||||
<FileIcon class="h-12 w-12 text-indigo-500" />
|
||||
<div>
|
||||
<h4
|
||||
class="font-medium truncate"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-900']"
|
||||
>
|
||||
{{ record.filename }}
|
||||
</h4>
|
||||
<p class="text-sm text-gray-500 truncate">{{ record.size }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<CalendarIcon class="h-5 w-5 text-gray-400" />
|
||||
<span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']">
|
||||
上传时间：{{ record.date }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
<HardDriveIcon class="h-5 w-5 text-gray-400" />
|
||||
<span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']">
|
||||
文件大小：{{ record.size }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<QRCode
|
||||
:value="baseUrl + '/retrieve/' + record.code"
|
||||
:size="200"
|
||||
level="M"
|
||||
render-as="svg"
|
||||
:foreground="isDarkMode ? '#FFFFFF' : '#000000'"
|
||||
:background="isDarkMode ? '#111827' : '#FFFFFF'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-4">
|
||||
<button
|
||||
@click="$emit('show-preview')"
|
||||
class="flex-1 px-4 py-2 rounded-lg bg-indigo-500 text-white hover:bg-indigo-600 transition duration-300"
|
||||
>
|
||||
预览内容
|
||||
</button>
|
||||
<button
|
||||
@click="$emit('download')"
|
||||
class="flex-1 px-4 py-2 rounded-lg bg-green-500 text-white hover:bg-green-600 transition duration-300"
|
||||
>
|
||||
<DownloadIcon class="h-5 w-5 inline-block mr-2" />
|
||||
下载
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { FileIcon, CalendarIcon, HardDriveIcon, DownloadIcon, XIcon } from 'lucide-vue-next'
|
||||
import QRCode from 'qrcode.vue'
|
||||
|
||||
defineProps({
|
||||
record: Object,
|
||||
isDarkMode: Boolean,
|
||||
baseUrl: String
|
||||
})
|
||||
|
||||
defineEmits(['close', 'show-preview', 'download'])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
94
src/components/retrievew/FileInputForm.vue
Normal file
94
src/components/retrievew/FileInputForm.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<div class="mb-6 relative">
|
||||
<label
|
||||
for="code"
|
||||
class="block text-sm font-medium mb-2"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
|
||||
>取件码</label
|
||||
>
|
||||
<div class="relative">
|
||||
<input
|
||||
id="code"
|
||||
v-model="code"
|
||||
type="text"
|
||||
class="w-full px-4 py-3 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 pr-10"
|
||||
:class="[
|
||||
isDarkMode ? 'bg-gray-700 bg-opacity-50' : 'bg-gray-100',
|
||||
{ 'ring-2 ring-red-500': error },
|
||||
[isDarkMode ? 'text-gray-300' : 'text-gray-800']
|
||||
]"
|
||||
placeholder="请输入5位取件码"
|
||||
required
|
||||
:readonly="inputStatus.readonly"
|
||||
maxlength="5"
|
||||
@focus="isInputFocused = true"
|
||||
@blur="isInputFocused = false"
|
||||
/>
|
||||
<div v-if="inputStatus.loading" class="absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<span class="animate-spin rounded-full h-5 w-5 border-b-2 border-indigo-500"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="absolute -bottom-0.5 left-2 h-0.5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 transition-all duration-300 ease-in-out"
|
||||
:class="{ 'w-97-100': isInputFocused, 'w-0': !isInputFocused }"
|
||||
></div>
|
||||
<p v-if="error" class="mt-2 text-sm text-red-500">{{ error }}</p>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-bold py-3 px-4 rounded-lg hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105 hover:shadow-lg relative overflow-hidden group"
|
||||
:disabled="inputStatus.loading"
|
||||
>
|
||||
<span class="flex items-center justify-center">
|
||||
<span>获取文件</span>
|
||||
<ArrowRightIcon class="ml-2 h-5 w-5" />
|
||||
</span>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||
></div>
|
||||
</button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { ArrowRightIcon } from 'lucide-vue-next'
|
||||
|
||||
const emit = defineEmits(['submit'])
|
||||
|
||||
const code = ref('')
|
||||
const inputStatus = ref({
|
||||
readonly: false,
|
||||
loading: false
|
||||
})
|
||||
const isInputFocused = ref(false)
|
||||
const error = ref('')
|
||||
const isDarkMode = inject('isDarkMode')
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (code.value.length !== 5) {
|
||||
error.value = '请输入5位取件码'
|
||||
return
|
||||
}
|
||||
|
||||
error.value = ''
|
||||
inputStatus.value.loading = true
|
||||
inputStatus.value.readonly = true
|
||||
|
||||
try {
|
||||
await emit('submit', code.value)
|
||||
} catch (err) {
|
||||
error.value = err.message
|
||||
} finally {
|
||||
inputStatus.value.loading = false
|
||||
inputStatus.value.readonly = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.w-97-100 {
|
||||
width: 97%;
|
||||
}
|
||||
</style>
|
||||
129
src/components/retrievew/HistoryDrawer.vue
Normal file
129
src/components/retrievew/HistoryDrawer.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<transition name="drawer">
|
||||
<div
|
||||
v-if="show"
|
||||
class="fixed inset-y-0 right-0 w-full sm:w-120 bg-opacity-70 backdrop-filter backdrop-blur-xl shadow-2xl z-50 overflow-hidden flex flex-col"
|
||||
:class="[isDarkMode ? 'bg-gray-900' : 'bg-white']"
|
||||
>
|
||||
<div
|
||||
class="flex justify-between items-center p-6 border-b"
|
||||
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
|
||||
>
|
||||
<h2 class="text-xl font-semibold" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
|
||||
历史记录
|
||||
</h2>
|
||||
<button
|
||||
@click="$emit('close')"
|
||||
class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition duration-300"
|
||||
>
|
||||
<XIcon class="h-6 w-6" :class="[isDarkMode ? 'text-white' : 'text-gray-900']" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow overflow-y-auto p-6">
|
||||
<transition-group name="list" tag="div" class="space-y-4">
|
||||
<div
|
||||
v-for="record in records"
|
||||
:key="record.id"
|
||||
class="p-4 rounded-lg transition duration-300"
|
||||
:class="[
|
||||
isDarkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-white hover:bg-gray-50 shadow-md'
|
||||
]"
|
||||
>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex items-center space-x-3">
|
||||
<FileIcon
|
||||
class="h-5 w-5 text-indigo-500"
|
||||
:class="[record.type === 'text' ? 'text-purple-500' : 'text-indigo-500']"
|
||||
/>
|
||||
<div>
|
||||
<h3
|
||||
class="font-medium truncate max-w-[200px]"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-900']"
|
||||
>
|
||||
{{ record.filename }}
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500">{{ record.size }} · {{ record.date }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
<button
|
||||
@click="$emit('view-details', record)"
|
||||
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'hover:bg-indigo-400 text-indigo-400'
|
||||
: 'hover:bg-indigo-100 text-indigo-600'
|
||||
]"
|
||||
>
|
||||
<EyeIcon
|
||||
class="h-4 w-4"
|
||||
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
@click="$emit('download', record)"
|
||||
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'hover:bg-green-400 text-green-400'
|
||||
: 'hover:bg-green-100 text-green-600'
|
||||
]"
|
||||
>
|
||||
<DownloadIcon
|
||||
class="h-4 w-4"
|
||||
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
@click="$emit('delete', record)"
|
||||
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
|
||||
:class="[
|
||||
isDarkMode ? 'hover:bg-red-400 text-red-400' : 'hover:bg-red-100 text-red-600'
|
||||
]"
|
||||
>
|
||||
<TrashIcon class="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { FileIcon, EyeIcon, DownloadIcon, TrashIcon, XIcon } from 'lucide-vue-next'
|
||||
|
||||
defineProps({
|
||||
show: Boolean,
|
||||
records: Array,
|
||||
isDarkMode: Boolean
|
||||
})
|
||||
|
||||
defineEmits(['close', 'view-details', 'download', 'delete'])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer-enter-active,
|
||||
.drawer-leave-active {
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
|
||||
.drawer-enter-from,
|
||||
.drawer-leave-to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.list-enter-active,
|
||||
.list-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.list-enter-from,
|
||||
.list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
</style>
|
||||
86
src/components/send/ContentPreviewModal.vue
Normal file
86
src/components/send/ContentPreviewModal.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-if="show"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
|
||||
>
|
||||
<div
|
||||
class="p-8 rounded-2xl max-w-3xl w-full mx-4"
|
||||
:class="[isDarkMode ? 'bg-gray-900' : 'bg-white']"
|
||||
>
|
||||
<!-- Modal Header -->
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h3 class="text-xl font-semibold" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
|
||||
内容预览
|
||||
</h3>
|
||||
<button
|
||||
@click="$emit('close')"
|
||||
class="p-2 rounded-lg transition duration-300"
|
||||
:class="[isDarkMode ? 'hover:bg-gray-800' : 'hover:bg-gray-100']"
|
||||
>
|
||||
<XIcon class="h-6 w-6" :class="[isDarkMode ? 'text-white' : 'text-gray-900']" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div
|
||||
class="prose max-w-none overflow-y-auto max-h-[60vh] p-4 rounded-lg"
|
||||
:class="[isDarkMode ? 'prose-invert bg-gray-800' : 'bg-gray-50']"
|
||||
v-html="renderedContent"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { XIcon } from 'lucide-vue-next'
|
||||
import { computed } from 'vue'
|
||||
import { marked } from 'marked'
|
||||
|
||||
const props = defineProps({
|
||||
show: Boolean,
|
||||
content: String,
|
||||
isDarkMode: Boolean
|
||||
})
|
||||
|
||||
defineEmits(['close'])
|
||||
|
||||
const renderedContent = computed(() => marked(props.content || ''))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Markdown Styles */
|
||||
:deep(.prose) {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
:deep(.prose pre) {
|
||||
background-color: v-bind('isDarkMode ? "#1F2937" : "#F3F4F6"');
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
:deep(.prose code) {
|
||||
color: v-bind('isDarkMode ? "#E5E7EB" : "#1F2937"');
|
||||
}
|
||||
|
||||
:deep(.prose a) {
|
||||
color: #6366f1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
:deep(.prose a:hover) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
87
src/components/send/ExpirationSelector.vue
Normal file
87
src/components/send/ExpirationSelector.vue
Normal file
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="flex flex-col space-y-4">
|
||||
<label :class="['text-sm font-medium', isDarkMode ? 'text-gray-300' : 'text-gray-700']">
|
||||
过期方式
|
||||
</label>
|
||||
<select
|
||||
:value="method"
|
||||
@input="$emit('update:method', $event.target.value)"
|
||||
:class="[
|
||||
'px-4 py-2 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500',
|
||||
isDarkMode
|
||||
? 'bg-gray-800 bg-opacity-50 text-white'
|
||||
: 'bg-white text-gray-900 border border-gray-300'
|
||||
]"
|
||||
>
|
||||
<option value="day">按天数</option>
|
||||
<option value="hour">按小时</option>
|
||||
<option value="minute">按分钟</option>
|
||||
<option value="count">按查看次数</option>
|
||||
<option value="forever">永久</option>
|
||||
</select>
|
||||
<div v-if="method !== 'forever'" class="flex items-center space-x-2">
|
||||
<div class="relative flex-grow">
|
||||
<input
|
||||
:value="value"
|
||||
@input="$emit('update:value', $event.target.value)"
|
||||
type="number"
|
||||
:placeholder="getPlaceholder()"
|
||||
:class="[
|
||||
'w-full px-4 py-2 pr-16 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500',
|
||||
isDarkMode
|
||||
? 'bg-gray-800 bg-opacity-50 text-white'
|
||||
: 'bg-white text-gray-900 border border-gray-300'
|
||||
]"
|
||||
/>
|
||||
<span
|
||||
:class="[
|
||||
'absolute right-3 top-1/2 transform -translate-y-1/2',
|
||||
isDarkMode ? 'text-gray-300' : 'text-gray-700'
|
||||
]"
|
||||
>
|
||||
{{ getUnit() }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
method: String,
|
||||
value: [String, Number],
|
||||
isDarkMode: Boolean
|
||||
})
|
||||
|
||||
defineEmits(['update:method', 'update:value'])
|
||||
|
||||
const getPlaceholder = () => {
|
||||
switch (props.method) {
|
||||
case 'day':
|
||||
return '输入天数'
|
||||
case 'hour':
|
||||
return '输入小时数'
|
||||
case 'minute':
|
||||
return '输入分钟数'
|
||||
case 'count':
|
||||
return '输入查看次数'
|
||||
default:
|
||||
return '输入值'
|
||||
}
|
||||
}
|
||||
|
||||
const getUnit = () => {
|
||||
switch (props.method) {
|
||||
case 'day':
|
||||
return '天'
|
||||
case 'hour':
|
||||
return '小时'
|
||||
case 'minute':
|
||||
return '分钟'
|
||||
case 'count':
|
||||
return '次'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
126
src/components/send/FileDetailsModal.vue
Normal file
126
src/components/send/FileDetailsModal.vue
Normal file
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-if="record"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
|
||||
>
|
||||
<div
|
||||
class="p-8 rounded-2xl max-w-md w-full mx-4 shadow-2xl"
|
||||
:class="[isDarkMode ? 'bg-gray-900' : 'bg-white']"
|
||||
>
|
||||
<!-- Modal Header -->
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h3 class="text-xl font-semibold" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
|
||||
文件详情
|
||||
</h3>
|
||||
<button
|
||||
@click="$emit('close')"
|
||||
class="p-2 rounded-lg transition duration-300"
|
||||
:class="[isDarkMode ? 'hover:bg-gray-800' : 'hover:bg-gray-100']"
|
||||
>
|
||||
<XIcon class="h-6 w-6" :class="[isDarkMode ? 'text-white' : 'text-gray-900']" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- File Info -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center space-x-4">
|
||||
<FileIcon
|
||||
class="h-12 w-12"
|
||||
:class="[record.type === 'text' ? 'text-purple-500' : 'text-indigo-500']"
|
||||
/>
|
||||
<div>
|
||||
<h4 class="font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
|
||||
{{ record.filename }}
|
||||
</h4>
|
||||
<p class="text-sm text-gray-500">
|
||||
{{ record.size }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Details -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<CalendarIcon class="h-5 w-5 text-gray-400" />
|
||||
<span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']">
|
||||
上传时间：{{ record.date }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
<ClockIcon class="h-5 w-5 text-gray-400" />
|
||||
<span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']">
|
||||
过期时间：{{ record.expireDate }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
<KeyIcon class="h-5 w-5 text-gray-400" />
|
||||
<span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']">
|
||||
取件码：{{ record.code }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- QR Code -->
|
||||
<div class="flex justify-center">
|
||||
<QRCode
|
||||
:value="`${baseUrl}/retrieve/${record.code}`"
|
||||
:size="200"
|
||||
level="M"
|
||||
render-as="svg"
|
||||
:foreground="isDarkMode ? '#FFFFFF' : '#000000'"
|
||||
:background="isDarkMode ? '#111827' : '#FFFFFF'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex space-x-4">
|
||||
<button
|
||||
v-if="record.type === 'text'"
|
||||
@click="$emit('show-preview')"
|
||||
class="flex-1 px-4 py-2 rounded-lg bg-indigo-500 text-white hover:bg-indigo-600 transition duration-300"
|
||||
>
|
||||
预览内容
|
||||
</button>
|
||||
<button
|
||||
class="flex-1 px-4 py-2 rounded-lg bg-green-500 text-white hover:bg-green-600 transition duration-300"
|
||||
@click="copyShareLink"
|
||||
>
|
||||
复制链接
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { FileIcon, CalendarIcon, ClockIcon, KeyIcon, XIcon } from 'lucide-vue-next'
|
||||
import QRCode from 'qrcode.vue'
|
||||
import { copyToClipboard } from '@/utils/clipboard'
|
||||
|
||||
const props = defineProps({
|
||||
record: Object,
|
||||
isDarkMode: Boolean,
|
||||
baseUrl: String
|
||||
})
|
||||
|
||||
defineEmits(['close', 'show-preview'])
|
||||
|
||||
const copyShareLink = async () => {
|
||||
copyToClipboard(`${props.baseUrl}/retrieve/${props.record.code}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
77
src/components/send/FileUploader.vue
Normal file
77
src/components/send/FileUploader.vue
Normal file
@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div
|
||||
class="rounded-xl p-8 flex flex-col items-center justify-center border-2 border-dashed transition-all duration-300 group cursor-pointer relative"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-800 bg-opacity-50 border-gray-600 hover:border-indigo-500'
|
||||
: 'bg-gray-100 border-gray-300 hover:border-indigo-500'
|
||||
]"
|
||||
@click="triggerFileUpload"
|
||||
@dragover.prevent
|
||||
@drop.prevent="handleFileDrop"
|
||||
>
|
||||
<input id="file-upload" type="file" class="hidden" @change="handleFileUpload" ref="fileInput" />
|
||||
<div class="absolute inset-0 w-full h-full" v-if="uploadProgress > 0">
|
||||
<BorderProgressBar :progress="uploadProgress" />
|
||||
</div>
|
||||
<UploadCloudIcon
|
||||
:class="[
|
||||
'w-16 h-16 transition-colors duration-300',
|
||||
isDarkMode
|
||||
? 'text-gray-400 group-hover:text-indigo-400'
|
||||
: 'text-gray-600 group-hover:text-indigo-600'
|
||||
]"
|
||||
/>
|
||||
<p
|
||||
:class="[
|
||||
'mt-4 text-sm transition-colors duration-300 w-full text-center',
|
||||
isDarkMode
|
||||
? 'text-gray-400 group-hover:text-indigo-400'
|
||||
: 'text-gray-600 group-hover:text-indigo-600'
|
||||
]"
|
||||
>
|
||||
<span class="block truncate">
|
||||
{{ selectedFile ? selectedFile.name : '点击或拖放文件到此处上传' }}
|
||||
</span>
|
||||
</p>
|
||||
<p :class="['mt-2 text-xs', isDarkMode ? 'text-gray-500' : 'text-gray-400']">
|
||||
支持各种常见格式，最大20MB
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { UploadCloudIcon } from 'lucide-vue-next'
|
||||
import BorderProgressBar from '@/components/common/BorderProgressBar.vue'
|
||||
|
||||
const props = defineProps({
|
||||
isDarkMode: Boolean,
|
||||
uploadProgress: Number
|
||||
})
|
||||
|
||||
const emit = defineEmits(['file-selected'])
|
||||
|
||||
const fileInput = ref(null)
|
||||
const selectedFile = ref(null)
|
||||
|
||||
const triggerFileUpload = () => {
|
||||
fileInput.value?.click()
|
||||
}
|
||||
|
||||
const handleFileUpload = (event) => {
|
||||
const file = event.target.files?.[0]
|
||||
if (file) {
|
||||
selectedFile.value = file
|
||||
emit('file-selected', file)
|
||||
}
|
||||
}
|
||||
|
||||
const handleFileDrop = (event) => {
|
||||
const file = event.dataTransfer?.files[0]
|
||||
if (file) {
|
||||
selectedFile.value = file
|
||||
emit('file-selected', file)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
114
src/components/send/HistoryDrawer.vue
Normal file
114
src/components/send/HistoryDrawer.vue
Normal file
@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<transition name="drawer">
|
||||
<div
|
||||
v-if="show"
|
||||
class="fixed inset-y-0 right-0 w-full sm:w-120 bg-opacity-70 backdrop-filter backdrop-blur-xl shadow-2xl z-50 overflow-hidden flex flex-col"
|
||||
:class="[isDarkMode ? 'bg-gray-900' : 'bg-white']"
|
||||
>
|
||||
<!-- Drawer Header -->
|
||||
<div
|
||||
class="flex justify-between items-center p-6 border-b"
|
||||
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
|
||||
>
|
||||
<h2 class="text-xl font-semibold" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
|
||||
发送记录
|
||||
</h2>
|
||||
<button
|
||||
@click="$emit('close')"
|
||||
class="p-2 rounded-lg transition duration-300"
|
||||
:class="[isDarkMode ? 'hover:bg-gray-800' : 'hover:bg-gray-100']"
|
||||
>
|
||||
<XIcon class="h-6 w-6" :class="[isDarkMode ? 'text-white' : 'text-gray-900']" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Records List -->
|
||||
<div class="flex-grow overflow-y-auto p-6">
|
||||
<transition-group name="list" tag="div" class="space-y-4">
|
||||
<div
|
||||
v-for="record in records"
|
||||
:key="record.id"
|
||||
class="p-4 rounded-lg transition duration-300"
|
||||
:class="[
|
||||
isDarkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-white hover:bg-gray-50 shadow-md'
|
||||
]"
|
||||
>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex items-center space-x-3">
|
||||
<FileIcon
|
||||
class="h-5 w-5 text-indigo-500"
|
||||
:class="[record.type === 'text' ? 'text-purple-500' : 'text-indigo-500']"
|
||||
/>
|
||||
<div>
|
||||
<h3 class="font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
|
||||
{{ record.filename }}
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500">{{ record.size }} · {{ record.date }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
<button
|
||||
@click="$emit('view-details', record)"
|
||||
class="p-2 rounded-lg transition duration-300"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'hover:bg-gray-600 text-gray-400'
|
||||
: 'hover:bg-gray-200 text-gray-600'
|
||||
]"
|
||||
>
|
||||
<EyeIcon class="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
@click="$emit('delete', record.id)"
|
||||
class="p-2 rounded-lg transition duration-300"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'hover:bg-gray-600 text-gray-400'
|
||||
: 'hover:bg-gray-200 text-gray-600'
|
||||
]"
|
||||
>
|
||||
<TrashIcon class="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { FileIcon, EyeIcon, TrashIcon, XIcon } from 'lucide-vue-next'
|
||||
|
||||
defineProps({
|
||||
show: Boolean,
|
||||
records: Array,
|
||||
isDarkMode: Boolean
|
||||
})
|
||||
|
||||
defineEmits(['close', 'view-details', 'delete'])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer-enter-active,
|
||||
.drawer-leave-active {
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
|
||||
.drawer-enter-from,
|
||||
.drawer-leave-to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.list-enter-active,
|
||||
.list-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.list-enter-from,
|
||||
.list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
</style>
|
||||
18
src/components/send/SendButton.vue
Normal file
18
src/components/send/SendButton.vue
Normal file
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-bold py-4 px-6 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition-all duration-300 transform hover:scale-105 hover:shadow-lg relative overflow-hidden group"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 left-0 w-full h-full bg-white opacity-0 group-hover:opacity-20 transition-opacity duration-300"
|
||||
></span>
|
||||
<span class="relative z-10 flex items-center justify-center text-lg">
|
||||
<SendIcon class="w-6 h-6 mr-2" />
|
||||
<span>安全寄送</span>
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { SendIcon } from 'lucide-vue-next'
|
||||
</script>
|
||||
32
src/components/send/SendFooter.vue
Normal file
32
src/components/send/SendFooter.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div
|
||||
class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
|
||||
:class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']"
|
||||
>
|
||||
<span
|
||||
class="text-sm flex items-center"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
|
||||
>
|
||||
<ShieldCheckIcon class="w-4 h-4 mr-1 text-green-400" />
|
||||
安全加密
|
||||
</span>
|
||||
<button
|
||||
@click="$emit('toggle-drawer')"
|
||||
class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
|
||||
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
|
||||
>
|
||||
发件记录
|
||||
<ClipboardListIcon class="w-4 h-4 ml-1" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ShieldCheckIcon, ClipboardListIcon } from 'lucide-vue-next'
|
||||
|
||||
defineProps({
|
||||
isDarkMode: Boolean
|
||||
})
|
||||
|
||||
defineEmits(['toggle-drawer'])
|
||||
</script>
|
||||
23
src/components/send/SendHeader.vue
Normal file
23
src/components/send/SendHeader.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="p-8">
|
||||
<h2
|
||||
class="text-3xl font-extrabold text-center mb-8 cursor-pointer transition-colors duration-300"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-pink-300'
|
||||
: 'text-indigo-600'
|
||||
]"
|
||||
@click="$emit('to-retrieve')"
|
||||
>
|
||||
FileCodeBox
|
||||
</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
isDarkMode: Boolean
|
||||
})
|
||||
|
||||
defineEmits(['to-retrieve'])
|
||||
</script>
|
||||
32
src/components/send/SendTypeSelector.vue
Normal file
32
src/components/send/SendTypeSelector.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="flex justify-center space-x-4 mb-6">
|
||||
<button
|
||||
type="button"
|
||||
@click="$emit('update:modelValue', 'file')"
|
||||
:class="[
|
||||
'px-4 py-2 rounded-lg',
|
||||
modelValue === 'file' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300'
|
||||
]"
|
||||
>
|
||||
发送文件
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="$emit('update:modelValue', 'text')"
|
||||
:class="[
|
||||
'px-4 py-2 rounded-lg',
|
||||
modelValue === 'text' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300'
|
||||
]"
|
||||
>
|
||||
发送文本
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
modelValue: String
|
||||
})
|
||||
|
||||
defineEmits(['update:modelValue'])
|
||||
</script>
|
||||
26
src/components/send/TextEditor.vue
Normal file
26
src/components/send/TextEditor.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<textarea
|
||||
id="text-content"
|
||||
:value="modelValue"
|
||||
@input="$emit('update:modelValue', $event.target.value)"
|
||||
rows="7"
|
||||
:class="[
|
||||
'flex-grow px-4 py-3 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 resize-none',
|
||||
isDarkMode
|
||||
? 'bg-gray-800 bg-opacity-50 text-white'
|
||||
: 'bg-white text-gray-900 border border-gray-300'
|
||||
]"
|
||||
placeholder="在此输入要发送的文本..."
|
||||
></textarea>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
modelValue: String,
|
||||
isDarkMode: Boolean
|
||||
})
|
||||
|
||||
defineEmits(['update:modelValue'])
|
||||
</script>
|
||||
0
src/composables/useSystemConfig.ts
Normal file
0
src/composables/useSystemConfig.ts
Normal file
272
src/layout/AdminLayout/AdminLayout.vue
Normal file
272
src/layout/AdminLayout/AdminLayout.vue
Normal file
@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<div
|
||||
class="min-h-screen flex flex-col lg:flex-row transition-colors duration-300"
|
||||
:class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']"
|
||||
>
|
||||
<!-- Sidebar -->
|
||||
<aside
|
||||
class="fixed inset-y-0 left-0 z-50 w-64 transform transition-all duration-300 ease-in-out lg:relative lg:translate-x-0 border-r"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-800 bg-opacity-90 backdrop-filter backdrop-blur-xl border-gray-700'
|
||||
: 'bg-white border-gray-200',
|
||||
{ '-translate-x-full': !isSidebarOpen }
|
||||
]"
|
||||
>
|
||||
<!-- Logo区域 -->
|
||||
<div
|
||||
class="flex items-center justify-between h-16 px-4 border-b"
|
||||
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="rounded-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-1 animate-spin-slow"
|
||||
>
|
||||
<div class="rounded-full p-1" :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']">
|
||||
<BoxIcon
|
||||
class="w-6 h-6"
|
||||
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<h1
|
||||
class="ml-2 text-xl font-semibold"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
FileCodeBox
|
||||
</h1>
|
||||
</div>
|
||||
<button @click="toggleSidebar" class="lg:hidden">
|
||||
<XIcon class="w-6 h-6" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 导航菜单 -->
|
||||
<nav class="flex-1 overflow-y-auto">
|
||||
<ul class="p-4 space-y-2">
|
||||
<li v-for="item in menuItems" :key="item.id">
|
||||
<a
|
||||
@click="router.push(item.redirect)"
|
||||
class="flex items-center p-2 rounded-lg transition-colors duration-200"
|
||||
:class="[
|
||||
router.currentRoute.value.name === item.id
|
||||
? isDarkMode
|
||||
? 'bg-indigo-900 text-indigo-400'
|
||||
: 'bg-indigo-100 text-indigo-600'
|
||||
: isDarkMode
|
||||
? 'text-gray-400 hover:bg-gray-700'
|
||||
: 'text-gray-600 hover:bg-gray-100'
|
||||
]"
|
||||
>
|
||||
<component :is="item.icon" class="w-5 h-5 mr-3" />
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 flex flex-col min-h-screen">
|
||||
<!-- Header -->
|
||||
<header
|
||||
class="shadow-md border-b transition-colors duration-300"
|
||||
:class="[isDarkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200']"
|
||||
>
|
||||
<div class="flex items-center justify-between h-16 px-4">
|
||||
<button @click="toggleSidebar" class="lg:hidden">
|
||||
<MenuIcon class="w-6 h-6" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content -->
|
||||
<main
|
||||
class="flex-1 p-6 overflow-y-auto transition-colors duration-300"
|
||||
:class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']"
|
||||
>
|
||||
<router-view />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, inject, onMounted, onUnmounted } from 'vue'
|
||||
import { BoxIcon, MenuIcon, XIcon, FolderIcon, CogIcon, LayoutDashboardIcon } from 'lucide-vue-next'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
interface MenuItem {
|
||||
id: string
|
||||
name: string
|
||||
icon: any
|
||||
redirect: string
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
const isDarkMode = inject('isDarkMode')
|
||||
const menuItems: MenuItem[] = [
|
||||
{ id: 'Dashboard', name: '仪表盘', icon: LayoutDashboardIcon, redirect: '/admin/dashboard' },
|
||||
{ id: 'FileManage', name: '文件管理', icon: FolderIcon, redirect: '/admin/files' },
|
||||
{ id: 'Settings', name: '系统设置', icon: CogIcon, redirect: '/admin/settings' }
|
||||
]
|
||||
|
||||
const isSidebarOpen = ref(true)
|
||||
const toggleSidebar = () => {
|
||||
isSidebarOpen.value = !isSidebarOpen.value
|
||||
}
|
||||
|
||||
// 响应式处理
|
||||
const handleResize = () => {
|
||||
if (window.innerWidth >= 1024) {
|
||||
isSidebarOpen.value = true
|
||||
} else {
|
||||
isSidebarOpen.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
handleResize()
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
// 分页参数
|
||||
const params = ref({
|
||||
page: 1,
|
||||
size: 10,
|
||||
total: 0
|
||||
})
|
||||
|
||||
// 加载文件列表
|
||||
const loadFiles = async () => {
|
||||
try {
|
||||
params.value.total = 85
|
||||
// 更新文件列表数据...
|
||||
} catch (error) {
|
||||
console.error('加载文件列表失败:', error)
|
||||
// 处理错误...
|
||||
}
|
||||
}
|
||||
|
||||
// 初始加载
|
||||
onMounted(() => {
|
||||
loadFiles()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #e5e7eb;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.dark .slider {
|
||||
background-color: #4b5563;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #4f46e5;
|
||||
}
|
||||
|
||||
.dark input:checked + .slider {
|
||||
background-color: #4f46e5;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.dark .slider:before {
|
||||
background-color: #e5e7eb;
|
||||
}
|
||||
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-spin-slow {
|
||||
animation: spin 8s linear infinite;
|
||||
}
|
||||
|
||||
.transition-colors {
|
||||
transition-property: background-color, border-color, color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
||||
.custom-scrollbar {
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #cbd5e0;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background-color: #a0aec0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 适配暗黑模式 */
|
||||
:deep(.dark &::-webkit-scrollbar-thumb) {
|
||||
background-color: #4a5568;
|
||||
|
||||
&:hover {
|
||||
background-color: #2d3748;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 确保内容区域不会被截断 */
|
||||
.space-y-6 {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
</style>
|
||||
14
src/main.ts
Normal file
14
src/main.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import './assets/style/main.css'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
|
||||
app.mount('#app')
|
||||
50
src/router/index.ts
Normal file
50
src/router/index.ts
Normal file
@ -0,0 +1,50 @@
|
||||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Retrieve',
|
||||
component: () => import('@/views/RetrievewFileView.vue')
|
||||
},
|
||||
{
|
||||
path: '/send',
|
||||
name: 'Send',
|
||||
component: () => import('@/views/SendFileView.vue')
|
||||
},
|
||||
{
|
||||
path: '/admin',
|
||||
name: 'Manage',
|
||||
component: () => import('@/layout/AdminLayout/AdminLayout.vue'),
|
||||
redirect: '/admin/dashboard',
|
||||
children: [
|
||||
{
|
||||
path: '/admin/dashboard',
|
||||
name: 'Dashboard',
|
||||
component: () => import('@/views/manage/DashboardView.vue')
|
||||
},
|
||||
{
|
||||
path: '/admin/files',
|
||||
name: 'FileManage',
|
||||
component: () => import('@/views/manage/FileManageView.vue')
|
||||
},
|
||||
{
|
||||
path: '/admin/settings',
|
||||
name: 'Settings',
|
||||
component: () => import('@/views/manage/SystemSettingsView.vue')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: () => import('@/views/LoginView.vue')
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 预加载 SendFileView 组件
|
||||
import('../views/SendFileView.vue')
|
||||
|
||||
export default router
|
||||
11
src/stores/adminStore.ts
Normal file
11
src/stores/adminStore.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
|
||||
export const useAdminData = defineStore('adminData', () => {
|
||||
const adminPassword = ref(localStorage.getItem('adminPassword') || '')
|
||||
function updateAdminPwd(pwd: string) {
|
||||
adminPassword.value = pwd
|
||||
localStorage.setItem('token', pwd)
|
||||
}
|
||||
return { adminPassword, updateAdminPwd }
|
||||
})
|
||||
45
src/stores/alertStore.ts
Normal file
45
src/stores/alertStore.ts
Normal file
@ -0,0 +1,45 @@
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
interface Alert {
|
||||
id: number
|
||||
message: string
|
||||
type: 'success' | 'error' | 'warning' | 'info'
|
||||
progress: number
|
||||
duration: number
|
||||
startTime: number
|
||||
}
|
||||
|
||||
export const useAlertStore = defineStore('alert', {
|
||||
state: () => ({
|
||||
alerts: [] as Alert[]
|
||||
}),
|
||||
actions: {
|
||||
showAlert(
|
||||
message: string,
|
||||
type: 'success' | 'error' | 'warning' | 'info' = 'info',
|
||||
duration = 5000
|
||||
) {
|
||||
const id = Date.now()
|
||||
const startTime = Date.now()
|
||||
this.alerts.push({ id, message, type, progress: 100, duration, startTime })
|
||||
setTimeout(() => this.removeAlert(id), duration)
|
||||
},
|
||||
removeAlert(id: number) {
|
||||
const index = this.alerts.findIndex((alert) => alert.id === id)
|
||||
if (index > -1) {
|
||||
this.alerts.splice(index, 1)
|
||||
}
|
||||
},
|
||||
updateAlertProgress(id: number) {
|
||||
const alert = this.alerts.find((a) => a.id === id)
|
||||
if (alert) {
|
||||
const elapsedTime = Date.now() - alert.startTime
|
||||
const progress = 100 - (elapsedTime / alert.duration) * 100
|
||||
alert.progress = Math.max(0, progress)
|
||||
if (alert.progress <= 0) {
|
||||
this.removeAlert(id)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
39
src/stores/fileData.ts
Normal file
39
src/stores/fileData.ts
Normal file
@ -0,0 +1,39 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { reactive } from 'vue'
|
||||
|
||||
export const useFileDataStore = defineStore('fileData', () => {
|
||||
const receiveData = reactive(JSON.parse(localStorage.getItem('receiveData') || '[]') || []) // 接收的数据
|
||||
const shareData = reactive(JSON.parse(localStorage.getItem('shareData') || '[]') || []) // 接收的数据
|
||||
function save() {
|
||||
localStorage.setItem('receiveData', JSON.stringify(receiveData))
|
||||
localStorage.setItem('shareData', JSON.stringify(shareData))
|
||||
}
|
||||
function addReceiveData(data: any) {
|
||||
receiveData.unshift(data)
|
||||
save()
|
||||
}
|
||||
|
||||
function addShareData(data: any) {
|
||||
shareData.unshift(data)
|
||||
save()
|
||||
}
|
||||
|
||||
function deleteReceiveData(index: number) {
|
||||
receiveData.splice(index, 1)
|
||||
save()
|
||||
}
|
||||
|
||||
function deleteShareData(index: number) {
|
||||
shareData.splice(index, 1)
|
||||
save()
|
||||
}
|
||||
return {
|
||||
receiveData,
|
||||
shareData,
|
||||
save,
|
||||
addShareData,
|
||||
addReceiveData,
|
||||
deleteReceiveData,
|
||||
deleteShareData
|
||||
}
|
||||
})
|
||||
75
src/utils/api.ts
Normal file
75
src/utils/api.ts
Normal file
@ -0,0 +1,75 @@
|
||||
import axios from 'axios'
|
||||
|
||||
// 从环境变量中获取 API 基础 URL
|
||||
const baseURL =
|
||||
import.meta.env.MODE === 'production'
|
||||
? import.meta.env.VITE_API_BASE_URL_PROD
|
||||
: import.meta.env.VITE_API_BASE_URL_DEV
|
||||
|
||||
// 确保 baseURL 是一个有效的字符串
|
||||
const sanitizedBaseURL = typeof baseURL === 'string' ? baseURL : ''
|
||||
|
||||
// 创建 axios 实例
|
||||
const api = axios.create({
|
||||
baseURL: sanitizedBaseURL,
|
||||
timeout: 1000000000000000, // 请求超时时间
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
|
||||
// 请求拦截器
|
||||
api.interceptors.request.use(
|
||||
(config) => {
|
||||
// 从 localStorage 获取 token
|
||||
const token = localStorage.getItem('token')
|
||||
if (token) {
|
||||
config.headers['Authorization'] = `Bearer ${token}`
|
||||
}
|
||||
|
||||
// 确保 URL 是有效的
|
||||
if (config.url && !config.url.startsWith('http')) {
|
||||
config.url = `${sanitizedBaseURL}/${config.url.replace(/^\//, '')}`
|
||||
}
|
||||
|
||||
return config
|
||||
},
|
||||
(error) => {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
// 响应拦截器
|
||||
api.interceptors.response.use(
|
||||
(response) => {
|
||||
return response.data
|
||||
},
|
||||
(error) => {
|
||||
// 处理错误响应
|
||||
if (error.response) {
|
||||
switch (error.response.status) {
|
||||
case 401:
|
||||
console.error('未授权，请重新登录')
|
||||
localStorage.clear()
|
||||
window.location.href = '/#/login'
|
||||
break
|
||||
case 403:
|
||||
// 禁止访问
|
||||
console.error('禁止访问')
|
||||
break
|
||||
case 404:
|
||||
// 未找到
|
||||
console.error('请求的资源不存在')
|
||||
break
|
||||
default:
|
||||
console.error('发生错误:', error.response.data)
|
||||
}
|
||||
} else if (error.request) {
|
||||
console.error('未收到响应:', error.request)
|
||||
} else {
|
||||
console.error('请求配置错误:', error.message)
|
||||
}
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
export default api
|
||||
81
src/utils/clipboard.ts
Normal file
81
src/utils/clipboard.ts
Normal file
@ -0,0 +1,81 @@
|
||||
/**
|
||||
* 剪贴板工具函数
|
||||
*/
|
||||
|
||||
import { useAlertStore } from '@/stores/alertStore'
|
||||
|
||||
interface CopyOptions {
|
||||
successMsg?: string
|
||||
errorMsg?: string
|
||||
showMsg?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* 复制文本到剪贴板
|
||||
* @param text 要复制的文本
|
||||
* @param options 配置选项
|
||||
* @returns Promise<boolean> 是否复制成功
|
||||
*/
|
||||
export const copyToClipboard = async (
|
||||
text: string,
|
||||
options: CopyOptions = {}
|
||||
): Promise<boolean> => {
|
||||
const { successMsg = '复制成功', errorMsg = '复制失败，请手动复制', showMsg = true } = options
|
||||
|
||||
const alertStore = useAlertStore()
|
||||
|
||||
try {
|
||||
// 优先使用 Clipboard API
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
await navigator.clipboard.writeText(text)
|
||||
if (showMsg) alertStore.showAlert(successMsg, 'success')
|
||||
return true
|
||||
}
|
||||
|
||||
// 后备方案：使用传统的复制方法
|
||||
const textarea = document.createElement('textarea')
|
||||
textarea.value = text
|
||||
textarea.style.position = 'fixed'
|
||||
textarea.style.opacity = '0'
|
||||
document.body.appendChild(textarea)
|
||||
textarea.select()
|
||||
const success = document.execCommand('copy')
|
||||
document.body.removeChild(textarea)
|
||||
|
||||
if (success) {
|
||||
if (showMsg) alertStore.showAlert(successMsg, 'success')
|
||||
return true
|
||||
} else {
|
||||
throw new Error('execCommand copy failed')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('复制失败:', err)
|
||||
if (showMsg) alertStore.showAlert(errorMsg, 'error')
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成并复制取件链接
|
||||
* @param code 取件码
|
||||
* @returns Promise<boolean> 是否复制成功
|
||||
*/
|
||||
export const copyRetrieveLink = async (code: string): Promise<boolean> => {
|
||||
const link = `${window.location.origin}/#/?code=${code}`
|
||||
return copyToClipboard(link, {
|
||||
successMsg: '取件链接已复制到剪贴板',
|
||||
errorMsg: '复制失败，请手动复制取件链接'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 复制取件码
|
||||
* @param code 取件码
|
||||
* @returns Promise<boolean> 是否复制成功
|
||||
*/
|
||||
export const copyRetrieveCode = async (code: string): Promise<boolean> => {
|
||||
return copyToClipboard(code, {
|
||||
successMsg: '取件码已复制到剪贴板',
|
||||
errorMsg: '复制失败，请手动复制取件码'
|
||||
})
|
||||
}
|
||||
10
src/utils/convert.ts
Normal file
10
src/utils/convert.ts
Normal file
@ -0,0 +1,10 @@
|
||||
// 存储单位转换
|
||||
export const getStorageUnit = (value: number) => {
|
||||
if (value >= 1024 * 1024 * 1024) {
|
||||
return Math.round(value / (1024 * 1024 * 1024)) + 'GB'
|
||||
} else if (value >= 1024 * 1024) {
|
||||
return Math.round(value / (1024 * 1024)) + 'MB'
|
||||
} else {
|
||||
return Math.round(value / 1024) + 'KB'
|
||||
}
|
||||
}
|
||||
219
src/views/LoginView.vue
Normal file
219
src/views/LoginView.vue
Normal file
@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 transition-colors duration-200 relative overflow-hidden',
|
||||
isDarkMode ? 'bg-gray-900' : 'bg-gray-50'
|
||||
]"
|
||||
>
|
||||
<div class="absolute inset-0 z-0">
|
||||
<div class="cyber-grid"></div>
|
||||
<div class="floating-particles"></div>
|
||||
</div>
|
||||
<div
|
||||
class="max-w-md w-full space-y-8 backdrop-blur-lg bg-opacity-20 p-8 rounded-xl border border-opacity-20"
|
||||
:class="[isDarkMode ? 'bg-gray-800 border-gray-600' : 'bg-white/70 border-gray-200']"
|
||||
>
|
||||
<div>
|
||||
<div class="mx-auto h-16 w-16 relative">
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-r from-cyan-500 via-purple-500 to-pink-500 rounded-full animate-spin-slow"
|
||||
></div>
|
||||
<div
|
||||
class="absolute -inset-2 bg-gradient-to-r from-cyan-500 via-purple-500 to-pink-500 rounded-full opacity-50 blur-md animate-pulse"
|
||||
></div>
|
||||
<div
|
||||
:class="[
|
||||
'absolute inset-1 rounded-full flex items-center justify-center',
|
||||
isDarkMode ? 'bg-gray-800' : 'bg-white'
|
||||
]"
|
||||
>
|
||||
<BoxIcon :class="['h-8 w-8', isDarkMode ? 'text-cyan-400' : 'text-cyan-600']" />
|
||||
</div>
|
||||
</div>
|
||||
<h2
|
||||
:class="[
|
||||
'mt-6 text-center text-3xl font-extrabold',
|
||||
isDarkMode ? 'text-white' : 'text-gray-900'
|
||||
]"
|
||||
>
|
||||
登录
|
||||
</h2>
|
||||
</div>
|
||||
<form class="mt-8 space-y-6" @submit.prevent="handleSubmit">
|
||||
<input type="hidden" name="remember" value="true" />
|
||||
<div class="rounded-md shadow-sm -space-y-px">
|
||||
<div>
|
||||
<label for="password" class="sr-only">密码</label>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
required
|
||||
v-model="password"
|
||||
:class="[
|
||||
'appearance-none rounded-t-md relative block w-full px-4 py-3 border transition-all duration-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 focus:z-10 sm:text-sm backdrop-blur-sm',
|
||||
isDarkMode
|
||||
? 'bg-gray-800/50 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
|
||||
: 'bg-white/50 border-gray-300 text-gray-900 hover:border-gray-400'
|
||||
]"
|
||||
placeholder="密码"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
:class="[
|
||||
'group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white transition-all duration-300 transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 shadow-lg hover:shadow-cyan-500/50',
|
||||
isDarkMode
|
||||
? 'bg-gradient-to-r from-cyan-500 to-purple-500 hover:from-cyan-600 hover:to-purple-600'
|
||||
: 'bg-gradient-to-r from-cyan-600 to-purple-600 hover:from-cyan-700 hover:to-purple-700',
|
||||
isLoading ? 'opacity-75 cursor-not-allowed' : ''
|
||||
]"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
<span class="absolute left-0 inset-y-0 flex items-center pl-3"> </span>
|
||||
{{ isLoading ? '登录中...' : '登录' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, inject } from 'vue'
|
||||
import { BoxIcon } from 'lucide-vue-next'
|
||||
import api from '@/utils/api'
|
||||
import { useAlertStore } from '@/stores/alertStore'
|
||||
import { useAdminData } from '@/stores/adminStore'
|
||||
import { useRouter } from 'vue-router'
|
||||
const alertStore = useAlertStore()
|
||||
const password = ref('')
|
||||
const isLoading = ref(false)
|
||||
const isDarkMode = inject('isDarkMode')
|
||||
const adminStore = useAdminData()
|
||||
const validateForm = () => {
|
||||
let isValid = true
|
||||
if (!password.value) {
|
||||
alertStore.showAlert('无效的密码', 'error')
|
||||
isValid = false
|
||||
} else if (password.value.length < 6) {
|
||||
alertStore.showAlert('密码长度至少为6位', 'error')
|
||||
isValid = false
|
||||
}
|
||||
return isValid
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!validateForm()) return
|
||||
adminStore.updateAdminPwd(password.value)
|
||||
api
|
||||
.post('/admin/login', { password: password.value })
|
||||
.then(() => {
|
||||
router.push('/admin')
|
||||
})
|
||||
.catch((error: any) => {
|
||||
alertStore.showAlert(error.response.data.detail, 'error')
|
||||
})
|
||||
isLoading.value = true
|
||||
try {
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000))
|
||||
// 处理登录成功
|
||||
} catch (error) {
|
||||
// 处理错误
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-spin-slow {
|
||||
animation: spin 8s linear infinite;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
button:active:not(:disabled) {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.cyber-grid {
|
||||
background-image: linear-gradient(transparent 95%, rgba(99, 102, 241, 0.1) 50%),
|
||||
linear-gradient(90deg, transparent 95%, rgba(99, 102, 241, 0.1) 50%);
|
||||
background-size: 30px 30px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.floating-particles {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle at center, transparent 0%, transparent 100%);
|
||||
filter: url(#gooey);
|
||||
}
|
||||
|
||||
.floating-particles::before,
|
||||
.floating-particles::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: radial-gradient(circle at center, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
|
||||
animation: float 20s infinite linear;
|
||||
}
|
||||
|
||||
.floating-particles::after {
|
||||
animation-delay: -10s;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: translate(50px, 50px) scale(1.5);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
box-shadow: 0 0 25px rgba(99, 102, 241, 0.5);
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
</style>
|
||||
938
src/views/ManageView.vue
Normal file
938
src/views/ManageView.vue
Normal file
@ -0,0 +1,938 @@
|
||||
<template>
|
||||
<div
|
||||
class="min-h-screen flex flex-col lg:flex-row transition-colors duration-300"
|
||||
:class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']"
|
||||
>
|
||||
<!-- Sidebar -->
|
||||
<aside
|
||||
class="fixed inset-y-0 left-0 z-50 w-64 transform transition-all duration-300 ease-in-out lg:relative lg:translate-x-0 border-r"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-800 bg-opacity-90 backdrop-filter backdrop-blur-xl border-gray-700'
|
||||
: 'bg-white border-gray-200',
|
||||
{ '-translate-x-full': !isSidebarOpen }
|
||||
]"
|
||||
>
|
||||
<!-- Logo区域 -->
|
||||
<div
|
||||
class="flex items-center justify-between h-16 px-4 border-b"
|
||||
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="rounded-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-1 animate-spin-slow"
|
||||
>
|
||||
<div class="rounded-full p-1" :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']">
|
||||
<BoxIcon
|
||||
class="w-6 h-6"
|
||||
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<h1
|
||||
class="ml-2 text-xl font-semibold"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
FileCodeBox
|
||||
</h1>
|
||||
</div>
|
||||
<button @click="toggleSidebar" class="lg:hidden">
|
||||
<XIcon class="w-6 h-6" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 导航菜单 -->
|
||||
<nav class="flex-1 overflow-y-auto">
|
||||
<ul class="p-4 space-y-2">
|
||||
<li v-for="item in menuItems" :key="item.id">
|
||||
<a
|
||||
href="#"
|
||||
@click="currentSection = item.id"
|
||||
class="flex items-center p-2 rounded-lg transition-colors duration-200"
|
||||
:class="[
|
||||
currentSection === item.id
|
||||
? isDarkMode
|
||||
? 'bg-indigo-900 text-indigo-400'
|
||||
: 'bg-indigo-100 text-indigo-600'
|
||||
: isDarkMode
|
||||
? 'text-gray-400 hover:bg-gray-700'
|
||||
: 'text-gray-600 hover:bg-gray-100'
|
||||
]"
|
||||
>
|
||||
<component :is="item.icon" class="w-5 h-5 mr-3" />
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 flex flex-col min-h-screen">
|
||||
<!-- Header -->
|
||||
<header
|
||||
class="shadow-md border-b transition-colors duration-300"
|
||||
:class="[isDarkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200']"
|
||||
>
|
||||
<div class="flex items-center justify-between h-16 px-4">
|
||||
<button @click="toggleSidebar" class="lg:hidden">
|
||||
<MenuIcon class="w-6 h-6" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content -->
|
||||
<main
|
||||
class="flex-1 p-6 overflow-y-auto transition-colors duration-300"
|
||||
:class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']"
|
||||
>
|
||||
<div v-if="currentSection === 'dashboard'">
|
||||
<h2
|
||||
class="text-2xl font-bold mb-6"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
仪表盘
|
||||
</h2>
|
||||
|
||||
<!-- 统计卡片区域 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<div
|
||||
class="p-6 rounded-lg shadow-md transition-colors duration-300"
|
||||
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
|
||||
总文件数
|
||||
</p>
|
||||
<h3
|
||||
class="text-2xl font-bold mt-1"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
128
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="p-3 rounded-full"
|
||||
:class="[isDarkMode ? 'bg-indigo-900' : 'bg-indigo-100']"
|
||||
>
|
||||
<FileIcon
|
||||
class="w-6 h-6"
|
||||
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm mt-2" :class="[isDarkMode ? 'text-green-400' : 'text-green-600']">
|
||||
<span>↑ 12% </span>
|
||||
<span :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">较上月</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-6 rounded-lg shadow-md transition-colors duration-300"
|
||||
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
|
||||
存储空间
|
||||
</p>
|
||||
<h3
|
||||
class="text-2xl font-bold mt-1"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
1.2 TB
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="p-3 rounded-full"
|
||||
:class="[isDarkMode ? 'bg-purple-900' : 'bg-purple-100']"
|
||||
>
|
||||
<HardDriveIcon
|
||||
class="w-6 h-6"
|
||||
:class="[isDarkMode ? 'text-purple-400' : 'text-purple-600']"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 h-2 bg-gray-200 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-purple-500" style="width: 75%"></div>
|
||||
</div>
|
||||
<p class="text-sm mt-2" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
|
||||
已使用 75%
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-6 rounded-lg shadow-md transition-colors duration-300"
|
||||
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
|
||||
活跃用户
|
||||
</p>
|
||||
<h3
|
||||
class="text-2xl font-bold mt-1"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
25
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="p-3 rounded-full"
|
||||
:class="[isDarkMode ? 'bg-green-900' : 'bg-green-100']"
|
||||
>
|
||||
<UsersIcon
|
||||
class="w-6 h-6"
|
||||
:class="[isDarkMode ? 'text-green-400' : 'text-green-600']"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm mt-2" :class="[isDarkMode ? 'text-red-400' : 'text-red-600']">
|
||||
<span>↓ 5% </span>
|
||||
<span :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">较上周</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-6 rounded-lg shadow-md transition-colors duration-300"
|
||||
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
|
||||
系统状态
|
||||
</p>
|
||||
<h3
|
||||
class="text-2xl font-bold mt-1"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
正常
|
||||
</h3>
|
||||
</div>
|
||||
<div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-blue-900' : 'bg-blue-100']">
|
||||
<ActivityIcon
|
||||
class="w-6 h-6"
|
||||
:class="[isDarkMode ? 'text-blue-400' : 'text-blue-600']"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm mt-2" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
|
||||
服务器运行时间: 30天
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最近活动 -->
|
||||
<div
|
||||
class="rounded-lg shadow-md overflow-hidden transition-colors duration-300"
|
||||
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
|
||||
>
|
||||
<div
|
||||
class="px-6 py-4 border-b"
|
||||
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
|
||||
>
|
||||
<h3
|
||||
class="text-lg font-medium"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
最近活动
|
||||
</h3>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="space-y-4">
|
||||
<div
|
||||
v-for="(activity, index) in recentActivities"
|
||||
:key="index"
|
||||
class="flex items-center space-x-4"
|
||||
>
|
||||
<div class="flex-shrink-0">
|
||||
<component
|
||||
:is="activity.icon"
|
||||
class="w-5 h-5"
|
||||
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
|
||||
{{ activity.description }}
|
||||
</p>
|
||||
<p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
|
||||
{{ activity.time }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="currentSection === 'files'">
|
||||
<h2
|
||||
class="text-2xl font-bold mb-6"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
文件管理
|
||||
</h2>
|
||||
|
||||
<!-- 添加文件操作栏 -->
|
||||
<div
|
||||
class="mb-6 flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between"
|
||||
>
|
||||
<!-- 搜索和过滤 -->
|
||||
<div class="flex flex-1 gap-4">
|
||||
<div class="relative flex-1">
|
||||
<input
|
||||
type="text"
|
||||
v-model="fileSearchQuery"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400'
|
||||
: 'bg-white border-gray-300 text-gray-900 placeholder-gray-400'
|
||||
]"
|
||||
class="w-full pl-10 pr-4 py-2 rounded-lg border focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
placeholder="搜索文件..."
|
||||
/>
|
||||
<SearchIcon
|
||||
class="absolute left-3 top-2.5 w-5 h-5"
|
||||
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<select
|
||||
v-model="fileTypeFilter"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white'
|
||||
: 'bg-white border-gray-300 text-gray-900'
|
||||
]"
|
||||
class="border rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
>
|
||||
<option value="">所有类型</option>
|
||||
<option value="PDF">PDF</option>
|
||||
<option value="Image">图片</option>
|
||||
<option value="Video">视频</option>
|
||||
<option value="Document">文档</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 上传按钮 -->
|
||||
<div class="flex gap-4">
|
||||
<button
|
||||
@click="$refs.fileInput.click()"
|
||||
class="flex items-center px-4 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors duration-200"
|
||||
>
|
||||
<UploadIcon class="w-5 h-5 mr-2" />
|
||||
上传文件
|
||||
</button>
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
multiple
|
||||
class="hidden"
|
||||
@change="handleFileUpload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 拖拽上传区域 -->
|
||||
<div
|
||||
v-if="showDropZone"
|
||||
class="mb-6 border-2 border-dashed rounded-lg p-8 text-center"
|
||||
:class="[isDarkMode ? 'border-gray-600 bg-gray-800/50' : 'border-gray-300 bg-gray-50']"
|
||||
@drop.prevent="handleFileDrop"
|
||||
@dragover.prevent="showDropZone = true"
|
||||
@dragleave.prevent="showDropZone = false"
|
||||
>
|
||||
<UploadCloudIcon
|
||||
class="mx-auto w-12 h-12 mb-4"
|
||||
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
|
||||
/>
|
||||
<p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">拖拽文件到此处上传</p>
|
||||
</div>
|
||||
|
||||
<!-- File List -->
|
||||
<div
|
||||
class="rounded-lg shadow-md overflow-hidden transition-colors duration-300"
|
||||
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
|
||||
>
|
||||
<div
|
||||
class="px-6 py-4 border-b"
|
||||
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
|
||||
>
|
||||
<h3
|
||||
class="text-lg font-medium"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
所有文件
|
||||
</h3>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table
|
||||
class="min-w-full divide-y"
|
||||
:class="[isDarkMode ? 'divide-gray-700' : 'divide-gray-200']"
|
||||
>
|
||||
<thead :class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-100']">
|
||||
<tr>
|
||||
<th
|
||||
v-for="header in fileTableHeaders"
|
||||
:key="header"
|
||||
class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider"
|
||||
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
|
||||
>
|
||||
{{ header }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-800 divide-y divide-gray-700'
|
||||
: 'bg-white divide-y divide-gray-200'
|
||||
]"
|
||||
>
|
||||
<tr v-for="file in files" :key="file.id">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<FileIcon
|
||||
class="w-5 h-5 mr-2"
|
||||
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-500']"
|
||||
/>
|
||||
<span
|
||||
class="font-medium"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-900']"
|
||||
>
|
||||
{{ file.name }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
|
||||
{{ file.size }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
|
||||
{{ file.type }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
|
||||
{{ file.lastModified }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<button
|
||||
@click="downloadFile(file)"
|
||||
class="mr-3 transition-colors duration-200"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'text-indigo-400 hover:text-indigo-300'
|
||||
: 'text-indigo-600 hover:text-indigo-900'
|
||||
]"
|
||||
>
|
||||
下载
|
||||
</button>
|
||||
<button
|
||||
@click="deleteFile(file)"
|
||||
class="transition-colors duration-200"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'text-red-400 hover:text-red-300'
|
||||
: 'text-red-600 hover:text-red-900'
|
||||
]"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 在文件列表表格下方添加分页组件 -->
|
||||
<div
|
||||
class="mt-4 flex items-center justify-between px-6 py-3 border-t"
|
||||
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
|
||||
>
|
||||
<!-- 分页信息 -->
|
||||
<div
|
||||
class="flex items-center text-sm"
|
||||
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
|
||||
>
|
||||
显示第 {{ (params.page - 1) * params.size + 1 }} 到
|
||||
{{ Math.min(params.page * params.size, params.total) }} 条，共 {{ params.total }} 条
|
||||
</div>
|
||||
|
||||
<!-- 分页控制器 -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<!-- 上一页 -->
|
||||
<button
|
||||
@click="handlePageChange(params.page - 1)"
|
||||
:disabled="params.page === 1"
|
||||
class="px-3 py-1 rounded-md transition-colors duration-200"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? params.page === 1
|
||||
? 'bg-gray-700 text-gray-500 cursor-not-allowed'
|
||||
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||||
: params.page === 1
|
||||
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||
]"
|
||||
>
|
||||
上一页
|
||||
</button>
|
||||
|
||||
<!-- 页码 -->
|
||||
<div class="flex items-center space-x-1">
|
||||
<template v-for="pageNum in displayedPages" :key="pageNum">
|
||||
<button
|
||||
v-if="pageNum !== '...'"
|
||||
@click="handlePageChange(pageNum)"
|
||||
class="px-3 py-1 rounded-md transition-colors duration-200"
|
||||
:class="[
|
||||
params.page === pageNum
|
||||
? 'bg-indigo-600 text-white'
|
||||
: isDarkMode
|
||||
? 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||
]"
|
||||
>
|
||||
{{ pageNum }}
|
||||
</button>
|
||||
<span
|
||||
v-else
|
||||
class="px-2"
|
||||
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
|
||||
>
|
||||
...
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 下一页 -->
|
||||
<button
|
||||
@click="handlePageChange(params.page + 1)"
|
||||
:disabled="params.page >= totalPages"
|
||||
class="px-3 py-1 rounded-md transition-colors duration-200"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? params.page >= totalPages
|
||||
? 'bg-gray-700 text-gray-500 cursor-not-allowed'
|
||||
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||||
: params.page >= totalPages
|
||||
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||
]"
|
||||
>
|
||||
下一页
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="currentSection === 'settings'">
|
||||
<h2
|
||||
class="text-2xl font-bold mb-6"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
系统设置
|
||||
</h2>
|
||||
<div
|
||||
class="rounded-lg shadow-md p-6 transition-colors duration-300"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-800 bg-opacity-70 backdrop-filter backdrop-blur-xl border border-gray-700'
|
||||
: 'bg-white border border-gray-200'
|
||||
]"
|
||||
>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h3
|
||||
class="text-lg font-medium mb-2"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
常规设置
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">启用通知</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox" v-model="settings.notifications" />
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">自动更新</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox" v-model="settings.autoUpdate" />
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3
|
||||
class="text-lg font-medium mb-2"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
安全设置
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>双因素认证</span
|
||||
>
|
||||
<label class="switch">
|
||||
<input type="checkbox" v-model="settings.twoFactor" />
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="password"
|
||||
class="block text-sm font-medium mb-1"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
更改密码
|
||||
</label>
|
||||
<div class="mt-1 relative rounded-md shadow-sm">
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
v-model="newPassword"
|
||||
class="block w-full pr-10 sm:text-sm rounded-md focus:ring-indigo-500 focus:border-indigo-500"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400'
|
||||
: 'border-gray-300 text-gray-900 placeholder-gray-400'
|
||||
]"
|
||||
placeholder="新密码"
|
||||
/>
|
||||
<button
|
||||
@click="changePassword"
|
||||
class="absolute inset-y-0 right-0 px-3 flex items-center bg-indigo-600 text-white rounded-r-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200"
|
||||
>
|
||||
更改
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, inject, onMounted, onUnmounted, computed } from 'vue'
|
||||
import {
|
||||
BoxIcon,
|
||||
MenuIcon,
|
||||
XIcon,
|
||||
FileIcon,
|
||||
FolderIcon,
|
||||
CogIcon,
|
||||
LayoutDashboardIcon,
|
||||
HardDriveIcon,
|
||||
UsersIcon,
|
||||
ActivityIcon,
|
||||
UploadIcon,
|
||||
TrashIcon,
|
||||
UserIcon,
|
||||
SearchIcon,
|
||||
UploadCloudIcon
|
||||
} from 'lucide-vue-next'
|
||||
|
||||
interface MenuItem {
|
||||
id: string
|
||||
name: string
|
||||
icon: any
|
||||
}
|
||||
|
||||
interface File {
|
||||
id: number
|
||||
name: string
|
||||
size: string
|
||||
type: string
|
||||
lastModified: string
|
||||
}
|
||||
|
||||
interface Settings {
|
||||
notifications: boolean
|
||||
autoUpdate: boolean
|
||||
twoFactor: boolean
|
||||
}
|
||||
|
||||
const isDarkMode = inject('isDarkMode')
|
||||
const menuItems: MenuItem[] = [
|
||||
{ id: 'dashboard', name: '仪表盘', icon: LayoutDashboardIcon },
|
||||
{ id: 'files', name: '文件管理', icon: FolderIcon },
|
||||
{ id: 'settings', name: '系统设置', icon: CogIcon }
|
||||
]
|
||||
|
||||
const currentSection = ref('dashboard')
|
||||
const isSidebarOpen = ref(true)
|
||||
const newPassword = ref('')
|
||||
|
||||
const settings = ref<Settings>({
|
||||
notifications: true,
|
||||
autoUpdate: false,
|
||||
twoFactor: false
|
||||
})
|
||||
|
||||
const fileTableHeaders = ['名称', '大小', '类型', '最后修改', '操作']
|
||||
|
||||
const files: File[] = [
|
||||
{ id: 1, name: 'document.pdf', size: '2.5 MB', type: 'PDF', lastModified: '2024-01-15' },
|
||||
{ id: 2, name: 'image.jpg', size: '1.8 MB', type: 'Image', lastModified: '2024-01-14' },
|
||||
{
|
||||
id: 3,
|
||||
name: 'spreadsheet.xlsx',
|
||||
size: '3.2 MB',
|
||||
type: 'Spreadsheet',
|
||||
lastModified: '2024-01-13'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'presentation.pptx',
|
||||
size: '5.1 MB',
|
||||
type: 'Presentation',
|
||||
lastModified: '2024-01-12'
|
||||
},
|
||||
{ id: 5, name: 'video.mp4', size: '15.7 MB', type: 'Video', lastModified: '2024-01-11' }
|
||||
]
|
||||
|
||||
const toggleSidebar = () => {
|
||||
isSidebarOpen.value = !isSidebarOpen.value
|
||||
}
|
||||
|
||||
const downloadFile = (file: File) => {
|
||||
console.log('Downloading file:', file.name)
|
||||
}
|
||||
|
||||
const deleteFile = (file: File) => {
|
||||
console.log('Deleting file:', file.name)
|
||||
}
|
||||
|
||||
const changePassword = () => {
|
||||
console.log('Changing password to:', newPassword.value)
|
||||
newPassword.value = ''
|
||||
}
|
||||
|
||||
// 响应式处理
|
||||
const handleResize = () => {
|
||||
if (window.innerWidth >= 1024) {
|
||||
isSidebarOpen.value = true
|
||||
} else {
|
||||
isSidebarOpen.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
handleResize()
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
// 添加最近活动数据
|
||||
const recentActivities = [
|
||||
{
|
||||
icon: UploadIcon,
|
||||
description: '张三上传了文件 "项目计划.pdf"',
|
||||
time: '10分钟前'
|
||||
},
|
||||
{
|
||||
icon: UserIcon,
|
||||
description: '新用户李四加入了系统',
|
||||
time: '30分钟前'
|
||||
},
|
||||
{
|
||||
icon: TrashIcon,
|
||||
description: '王五删除了文件 "旧文档.doc"',
|
||||
time: '1小时前'
|
||||
},
|
||||
{
|
||||
icon: FileIcon,
|
||||
description: '系统自动备份完成',
|
||||
time: '2小时前'
|
||||
}
|
||||
]
|
||||
|
||||
// 新增的响应式变量
|
||||
const fileSearchQuery = ref('')
|
||||
const fileTypeFilter = ref('')
|
||||
const showDropZone = ref(false)
|
||||
|
||||
const handleFileUpload = (event: Event) => {
|
||||
const files = (event.target as HTMLInputElement).files
|
||||
if (files && files.length > 0) {
|
||||
console.log('Uploading files:', files)
|
||||
}
|
||||
}
|
||||
|
||||
const handleFileDrop = (event: any) => {
|
||||
const files = (event.dataTransfer as DataTransfer).files
|
||||
if (files && files.length > 0) {
|
||||
console.log('Dropped files:', files)
|
||||
}
|
||||
}
|
||||
|
||||
// 分页参数
|
||||
const params = ref({
|
||||
page: 1,
|
||||
size: 10,
|
||||
total: 0
|
||||
})
|
||||
|
||||
// 计算总页数
|
||||
const totalPages = computed(() => Math.ceil(params.value.total / params.value.size))
|
||||
|
||||
// 计算要显示的页码
|
||||
const displayedPages = computed(() => {
|
||||
const current = params.value.page
|
||||
const total = totalPages.value
|
||||
const delta = 2 // 当前页码前后显示的页码数
|
||||
|
||||
let pages: (number | string)[] = []
|
||||
|
||||
// 始终显示第一页
|
||||
pages.push(1)
|
||||
|
||||
// 计算显示范围
|
||||
let left = Math.max(2, current - delta)
|
||||
let right = Math.min(total - 1, current + delta)
|
||||
|
||||
// 添加省略号和页码
|
||||
if (left > 2) {
|
||||
pages.push('...')
|
||||
}
|
||||
|
||||
for (let i = left; i <= right; i++) {
|
||||
pages.push(i)
|
||||
}
|
||||
|
||||
if (right < total - 1) {
|
||||
pages.push('...')
|
||||
}
|
||||
|
||||
// 始终显示最后一页
|
||||
if (total > 1) {
|
||||
pages.push(total)
|
||||
}
|
||||
|
||||
return pages
|
||||
})
|
||||
|
||||
// 页码改变处理函数
|
||||
const handlePageChange = async (page: any) => {
|
||||
if (page < 1 || page > totalPages.value) return
|
||||
params.value.page = page
|
||||
await loadFiles() // 重新加载文件列表
|
||||
}
|
||||
|
||||
// 加载文件列表
|
||||
const loadFiles = async () => {
|
||||
try {
|
||||
params.value.total = 85
|
||||
// 更新文件列表数据...
|
||||
} catch (error) {
|
||||
console.error('加载文件列表失败:', error)
|
||||
// 处理错误...
|
||||
}
|
||||
}
|
||||
|
||||
// 初始加载
|
||||
onMounted(() => {
|
||||
loadFiles()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #e5e7eb;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.dark .slider {
|
||||
background-color: #4b5563;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #4f46e5;
|
||||
}
|
||||
|
||||
.dark input:checked + .slider {
|
||||
background-color: #4f46e5;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.dark .slider:before {
|
||||
background-color: #e5e7eb;
|
||||
}
|
||||
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-spin-slow {
|
||||
animation: spin 8s linear infinite;
|
||||
}
|
||||
|
||||
.transition-colors {
|
||||
transition-property: background-color, border-color, color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
</style>
|
||||
624
src/views/RetrievewFileView.vue
Normal file
624
src/views/RetrievewFileView.vue
Normal file
@ -0,0 +1,624 @@
|
||||
<template>
|
||||
<div
|
||||
class="min-h-screen flex items-center justify-center p-4 overflow-hidden transition-colors duration-300"
|
||||
>
|
||||
<div class="w-full max-w-md relative z-10">
|
||||
<div
|
||||
class="rounded-3xl shadow-2xl overflow-hidden border transform transition-all duration-300"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-800 bg-opacity-50 backdrop-filter backdrop-blur-xl border-gray-700'
|
||||
: 'bg-white border-gray-200'
|
||||
]"
|
||||
>
|
||||
<div class="p-8">
|
||||
<div class="flex justify-center mb-8">
|
||||
<div
|
||||
class="rounded-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-1 animate-spin-slow"
|
||||
>
|
||||
<div class="rounded-full bg-gray-900 p-2">
|
||||
<BoxIcon class="w-8 h-8 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2
|
||||
@click="toSend"
|
||||
class="text-3xl cursor-pointer font-extrabold text-center mb-6"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-pink-300'
|
||||
: 'text-indigo-600'
|
||||
]"
|
||||
>
|
||||
FileCodeBox
|
||||
</h2>
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<div class="mb-6 relative">
|
||||
<label
|
||||
for="code"
|
||||
class="block text-sm font-medium mb-2"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
|
||||
>取件码</label
|
||||
>
|
||||
<div class="relative">
|
||||
<input
|
||||
id="code"
|
||||
v-model="code"
|
||||
type="text"
|
||||
class="w-full px-4 py-3 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 pr-10"
|
||||
:class="[
|
||||
isDarkMode ? 'bg-gray-700 bg-opacity-50' : 'bg-gray-100',
|
||||
{ 'ring-2 ring-red-500': error },
|
||||
isDarkMode ? 'text-gray-300' : 'text-gray-800'
|
||||
]"
|
||||
placeholder="请输入5位取件码"
|
||||
required
|
||||
:readonly="inputStatus.readonly"
|
||||
maxlength="5"
|
||||
@focus="isInputFocused = true"
|
||||
@blur="isInputFocused = false"
|
||||
/>
|
||||
<div
|
||||
v-if="inputStatus.loading"
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-3"
|
||||
>
|
||||
<span
|
||||
class="animate-spin rounded-full h-5 w-5 border-b-2 border-indigo-500"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="absolute -bottom-0.5 left-2 h-0.5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 transition-all duration-300 ease-in-out"
|
||||
:class="{ 'w-97-100': isInputFocused, 'w-0': !isInputFocused }"
|
||||
></div>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-bold py-3 px-4 rounded-lg hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105 hover:shadow-lg relative overflow-hidden group"
|
||||
:disabled="inputStatus.loading"
|
||||
>
|
||||
<span class="flex items-center justify-center relative z-10">
|
||||
<span>{{ inputStatus.loading ? '处理中...' : '提取文件' }}</span>
|
||||
<ArrowRightIcon
|
||||
class="w-5 h-5 ml-2 transition-transform duration-300 transform group-hover:translate-x-1"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||
></span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 text-center">
|
||||
<router-link
|
||||
to="/send"
|
||||
class="text-indigo-400 hover:text-indigo-300 transition duration-300"
|
||||
>
|
||||
需要发送文件？点击这里
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
|
||||
:class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']"
|
||||
>
|
||||
<span
|
||||
class="text-sm flex items-center"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
|
||||
>
|
||||
<ShieldCheckIcon class="w-4 h-4 mr-1 text-green-400" />
|
||||
安全加密
|
||||
</span>
|
||||
<button
|
||||
@click="toggleDrawer"
|
||||
class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
|
||||
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
|
||||
>
|
||||
取件记录
|
||||
<ClipboardListIcon class="w-4 h-4 ml-1" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition name="drawer">
|
||||
<div
|
||||
v-if="showDrawer"
|
||||
class="fixed inset-y-0 right-0 w-full sm:w-120 bg-opacity-70 backdrop-filter backdrop-blur-xl shadow-2xl z-50 overflow-hidden flex flex-col"
|
||||
:class="[isDarkMode ? 'bg-gray-900' : 'bg-white']"
|
||||
>
|
||||
<div
|
||||
class="flex justify-between items-center p-6 border-b"
|
||||
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
|
||||
>
|
||||
<h3 class="text-2xl font-bold" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
|
||||
取件记录
|
||||
</h3>
|
||||
<button
|
||||
@click="toggleDrawer"
|
||||
class="hover:text-white transition duration-300"
|
||||
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-800']"
|
||||
>
|
||||
<XIcon class="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-grow overflow-y-auto p-6">
|
||||
<transition-group name="list" tag="div" class="space-y-4">
|
||||
<div
|
||||
v-for="record in records"
|
||||
:key="record.id"
|
||||
class="bg-opacity-50 rounded-lg p-4 flex items-center shadow-md hover:shadow-lg transition duration-300 transform hover:scale-102"
|
||||
:class="[isDarkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-100 hover:bg-white']"
|
||||
>
|
||||
<div class="flex-shrink-0 mr-4">
|
||||
<FileIcon
|
||||
class="w-10 h-10"
|
||||
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-grow min-w-0 mr-4">
|
||||
<p
|
||||
class="font-medium text-lg truncate"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
{{ record.filename }}
|
||||
</p>
|
||||
<p
|
||||
class="text-sm truncate"
|
||||
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']"
|
||||
>
|
||||
{{ record.date }} · {{ record.size }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 flex space-x-2">
|
||||
<button
|
||||
@click="viewDetails(record)"
|
||||
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'hover:bg-indigo-400 text-indigo-400'
|
||||
: 'hover:bg-indigo-100 text-indigo-600'
|
||||
]"
|
||||
>
|
||||
<EyeIcon class="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
@click="downloadRecord(record)"
|
||||
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'hover:bg-green-400 text-green-400'
|
||||
: 'hover:bg-green-100 text-green-600'
|
||||
]"
|
||||
>
|
||||
<DownloadIcon class="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
@click="deleteRecord(record.id)"
|
||||
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
|
||||
:class="[
|
||||
isDarkMode ? 'hover:bg-red-400 text-red-400' : 'hover:bg-red-100 text-red-600'
|
||||
]"
|
||||
>
|
||||
<TrashIcon class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-if="selectedRecord"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
|
||||
>
|
||||
<div
|
||||
class="p-8 rounded-2xl max-w-md w-full mx-4 shadow-2xl transform transition-all duration-300 ease-out backdrop-filter backdrop-blur-lg bg-opacity-70 overflow-hidden"
|
||||
:class="[isDarkMode ? 'bg-gray-800' : 'bg-white']"
|
||||
>
|
||||
<h3
|
||||
class="text-2xl font-bold mb-6 truncate"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
文件详情
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center">
|
||||
<FileIcon
|
||||
class="w-6 h-6 mr-3 flex-shrink-0"
|
||||
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
|
||||
/>
|
||||
<p
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
|
||||
class="truncate flex-grow"
|
||||
>
|
||||
<span class="font-medium">文件名：</span>{{ selectedRecord.filename }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<CalendarIcon
|
||||
class="w-6 h-6 mr-3 flex-shrink-0"
|
||||
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
|
||||
/>
|
||||
<p
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
|
||||
class="truncate flex-grow"
|
||||
>
|
||||
<span class="font-medium">取件日期：</span>{{ selectedRecord.date }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<HardDriveIcon
|
||||
class="w-6 h-6 mr-3 flex-shrink-0"
|
||||
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
|
||||
/>
|
||||
<p
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
|
||||
class="truncate flex-grow"
|
||||
>
|
||||
<span class="font-medium">文件大小：</span>{{ selectedRecord.size }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<DownloadIcon
|
||||
class="w-6 h-6 mr-3"
|
||||
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
|
||||
/>
|
||||
<p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
|
||||
<span class="font-medium">文件内容：</span>
|
||||
</p>
|
||||
<div v-if="selectedRecord.content" class="ml-2">
|
||||
<button
|
||||
@click="showContentPreview"
|
||||
class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition duration-300"
|
||||
>
|
||||
预览内容
|
||||
</button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<a
|
||||
:href="`${baseUrl}${selectedRecord.downloadUrl}`"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition duration-300"
|
||||
>
|
||||
点击下载
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex flex-col items-center">
|
||||
<h4
|
||||
class="text-lg font-semibold mb-3"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
取件二维码
|
||||
</h4>
|
||||
<div class="bg-white p-2 rounded-lg shadow-md">
|
||||
<QRCode :value="getQRCodeValue(selectedRecord)" :size="128" level="M" />
|
||||
</div>
|
||||
<p class="mt-2 text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
|
||||
扫描二维码快速取件
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="selectedRecord = null"
|
||||
class="mt-8 w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105"
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<!-- 新增内容预览弹框 -->
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-if="showPreview"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
|
||||
>
|
||||
<div
|
||||
class="p-8 rounded-2xl max-w-3xl w-full mx-4 shadow-2xl transform transition-all duration-300 ease-out backdrop-filter backdrop-blur-lg bg-opacity-70 max-h-[80vh] overflow-y-auto"
|
||||
:class="[isDarkMode ? 'bg-gray-800' : 'bg-white']"
|
||||
>
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-2xl font-bold" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
|
||||
内容预览
|
||||
</h3>
|
||||
<button @click="showPreview = false" class="text-gray-500 hover:text-gray-700">
|
||||
<XIcon class="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="prose max-w-none"
|
||||
:class="[isDarkMode ? 'prose-invert' : '']"
|
||||
v-html="renderedContent"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, inject, onMounted, watch, computed } from 'vue'
|
||||
import {
|
||||
BoxIcon,
|
||||
EyeIcon,
|
||||
ArrowRightIcon,
|
||||
ShieldCheckIcon,
|
||||
ClipboardListIcon,
|
||||
XIcon,
|
||||
TrashIcon,
|
||||
FileIcon,
|
||||
CalendarIcon,
|
||||
HardDriveIcon,
|
||||
DownloadIcon
|
||||
} from 'lucide-vue-next'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import QRCode from 'qrcode.vue'
|
||||
import { useFileDataStore } from '@/stores/fileData'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import api from '@/utils/api'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { marked } from 'marked'
|
||||
import { useAlertStore } from '@/stores/alertStore'
|
||||
|
||||
const alertStore = useAlertStore()
|
||||
const baseUrl =
|
||||
import.meta.env.MODE === 'production'
|
||||
? import.meta.env.VITE_API_BASE_URL_PROD
|
||||
: import.meta.env.VITE_API_BASE_URL_DEV
|
||||
|
||||
const router = useRouter()
|
||||
const isDarkMode = inject('isDarkMode')
|
||||
const fileStore = useFileDataStore()
|
||||
const { receiveData } = storeToRefs(fileStore)
|
||||
const code = ref('')
|
||||
const inputStatus = ref({
|
||||
readonly: false,
|
||||
loading: false
|
||||
})
|
||||
const isInputFocused = ref(false)
|
||||
const error = ref('')
|
||||
const selectedRecord = ref(null)
|
||||
const showDrawer = ref(false)
|
||||
const route = useRoute()
|
||||
|
||||
// 使用 receiveData 替代原来的 records
|
||||
const records = receiveData
|
||||
|
||||
onMounted(() => {
|
||||
const query_code = route.query.code
|
||||
if (query_code) {
|
||||
code.value = query_code
|
||||
}
|
||||
})
|
||||
watch(code, (newVal) => {
|
||||
if (newVal.length === 5) {
|
||||
handleSubmit()
|
||||
}
|
||||
})
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (code.value.length !== 5) {
|
||||
alertStore.showAlert('请输入5位取件码', 'error')
|
||||
return
|
||||
}
|
||||
|
||||
inputStatus.value.readonly = true
|
||||
inputStatus.value.loading = true
|
||||
|
||||
try {
|
||||
const res = await api.post('/share/select/', {
|
||||
code: code.value
|
||||
})
|
||||
if (res.code === 200) {
|
||||
if (res.detail) {
|
||||
const isFile = res.detail.text.startsWith('/share/download')
|
||||
const newFileData = {
|
||||
id: Date.now(),
|
||||
code: res.detail.code,
|
||||
filename: res.detail.name,
|
||||
size: formatFileSize(res.detail.size),
|
||||
downloadUrl: isFile ? res.detail.text : null,
|
||||
content: isFile ? null : res.detail.text,
|
||||
date: new Date().toLocaleString()
|
||||
}
|
||||
|
||||
let flag = true
|
||||
fileStore.receiveData.forEach((file) => {
|
||||
if (file.code === newFileData.code) {
|
||||
flag = false
|
||||
return
|
||||
}
|
||||
})
|
||||
if (flag) {
|
||||
fileStore.addReceiveData(newFileData)
|
||||
}
|
||||
showDrawer.value = true
|
||||
alertStore.showAlert('文件获取成功', 'success')
|
||||
} else {
|
||||
alertStore.showAlert('无效的取件码', 'error')
|
||||
}
|
||||
} else {
|
||||
alertStore.showAlert(res.detail || '获取文件失败', 'error')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('取件失败:', err)
|
||||
alertStore.showAlert('取件失败，请稍后重试', 'error')
|
||||
} finally {
|
||||
inputStatus.value.readonly = false
|
||||
inputStatus.value.loading = false
|
||||
code.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
const formatFileSize = (bytes) => {
|
||||
if (bytes === 0) return '0 Bytes'
|
||||
const k = 1024
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
|
||||
}
|
||||
|
||||
const viewDetails = (record) => {
|
||||
selectedRecord.value = record
|
||||
}
|
||||
|
||||
const deleteRecord = (id) => {
|
||||
const index = records.value.findIndex((record) => record.id === id)
|
||||
if (index !== -1) {
|
||||
fileStore.deleteReceiveData(index)
|
||||
}
|
||||
}
|
||||
|
||||
const toggleDrawer = () => {
|
||||
showDrawer.value = !showDrawer.value
|
||||
}
|
||||
|
||||
const toSend = () => {
|
||||
router.push('/send')
|
||||
}
|
||||
|
||||
const getQRCodeValue = (record) => {
|
||||
return `${baseUrl}${record.downloadUrl}`
|
||||
}
|
||||
|
||||
const downloadRecord = (record) => {
|
||||
if (record.downloadUrl) {
|
||||
// 如果是文件,直接下载
|
||||
window.open(`${baseUrl}${record.downloadUrl}`, '_blank')
|
||||
} else if (record.content) {
|
||||
// 如果是文本,转成txt下载
|
||||
const blob = new Blob([record.content], { type: 'text/plain;charset=utf-8' })
|
||||
saveAs(blob, `${record.filename}.txt`)
|
||||
}
|
||||
}
|
||||
|
||||
const showPreview = ref(false)
|
||||
const renderedContent = computed(() => {
|
||||
if (selectedRecord.value && selectedRecord.value.content) {
|
||||
return marked(selectedRecord.value.content)
|
||||
}
|
||||
return ''
|
||||
})
|
||||
|
||||
const showContentPreview = () => {
|
||||
showPreview.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@keyframes blob {
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
25% {
|
||||
transform: translate(20px, -50px) scale(1.1);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-20px, 20px) scale(0.9);
|
||||
}
|
||||
75% {
|
||||
transform: translate(50px, 50px) scale(1.05);
|
||||
}
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.sm\:w-120 {
|
||||
width: 30rem; /* 480px */
|
||||
}
|
||||
}
|
||||
.animate-blob-1 {
|
||||
animation: blob 25s infinite;
|
||||
}
|
||||
.animate-blob-2 {
|
||||
animation: blob 30s infinite;
|
||||
}
|
||||
.animate-blob-3 {
|
||||
animation: blob 35s infinite;
|
||||
}
|
||||
.animate-blob-4 {
|
||||
animation: blob 40s infinite;
|
||||
}
|
||||
|
||||
.animate-spin-slow {
|
||||
animation: spin 8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.list-enter-active,
|
||||
.list-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.list-enter-from,
|
||||
.list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
.drawer-enter-active,
|
||||
.drawer-leave-active {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.drawer-enter-from,
|
||||
.drawer-leave-to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
.w-97-100 {
|
||||
width: 97%;
|
||||
}
|
||||
|
||||
/* 添加 Markdown 样式 */
|
||||
:deep(.prose) {
|
||||
text-align: left;
|
||||
}
|
||||
:deep(.prose h1),
|
||||
:deep(.prose h2),
|
||||
:deep(.prose h3),
|
||||
:deep(.prose h4),
|
||||
:deep(.prose h5),
|
||||
:deep(.prose h6) {
|
||||
color: rgb(79, 70, 229); /* text-indigo-600 */
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:deep(.prose h1),
|
||||
:deep(.prose h2),
|
||||
:deep(.prose h3),
|
||||
:deep(.prose h4),
|
||||
:deep(.prose h5),
|
||||
:deep(.prose h6) {
|
||||
color: rgb(129, 140, 248); /* text-indigo-400 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 添加新的宽度类 */
|
||||
@media (min-width: 640px) {
|
||||
.sm\:w-120 {
|
||||
width: 30rem; /* 480px */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
760
src/views/SendFileView.vue
Normal file
760
src/views/SendFileView.vue
Normal file
@ -0,0 +1,760 @@
|
||||
<template>
|
||||
<div
|
||||
class="min-h-screen flex items-center justify-center p-4 overflow-hidden transition-colors duration-300"
|
||||
>
|
||||
<div
|
||||
class="rounded-3xl shadow-2xl overflow-hidden border w-full max-w-md transition-colors duration-300"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-white bg-opacity-10 backdrop-filter backdrop-blur-xl border-gray-700'
|
||||
: 'bg-white border-gray-200'
|
||||
]"
|
||||
>
|
||||
<div class="p-8">
|
||||
<h2
|
||||
class="text-3xl font-extrabold text-center mb-8 cursor-pointer transition-colors duration-300"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-pink-300'
|
||||
: 'text-indigo-600'
|
||||
]"
|
||||
@click="toRetrieve"
|
||||
>
|
||||
FileCodeBox
|
||||
</h2>
|
||||
<form @submit.prevent="handleSubmit" class="space-y-8">
|
||||
<!-- 发送类型选择 -->
|
||||
<div class="flex justify-center space-x-4 mb-6">
|
||||
<button
|
||||
type="button"
|
||||
@click="sendType = 'file'"
|
||||
:class="[
|
||||
'px-4 py-2 rounded-lg',
|
||||
sendType === 'file' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300'
|
||||
]"
|
||||
>
|
||||
发送文件
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="sendType = 'text'"
|
||||
:class="[
|
||||
'px-4 py-2 rounded-lg',
|
||||
sendType === 'text' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300'
|
||||
]"
|
||||
>
|
||||
发送文本
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<transition name="fade" mode="out-in">
|
||||
<div v-if="sendType === 'file'" key="file" class="grid grid-cols-1 gap-8">
|
||||
<!-- 文件上传区域 -->
|
||||
<div
|
||||
class="rounded-xl p-8 flex flex-col items-center justify-center border-2 border-dashed transition-all duration-300 group cursor-pointer relative"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-800 bg-opacity-50 border-gray-600 hover:border-indigo-500'
|
||||
: 'bg-gray-100 border-gray-300 hover:border-indigo-500'
|
||||
]"
|
||||
@click="triggerFileUpload"
|
||||
@dragover.prevent
|
||||
@drop.prevent="handleFileDrop"
|
||||
>
|
||||
<input
|
||||
id="file-upload"
|
||||
type="file"
|
||||
class="hidden"
|
||||
@change="handleFileUpload"
|
||||
ref="fileInput"
|
||||
/>
|
||||
<div class="absolute inset-0 w-full h-full" v-if="uploadProgress > 0">
|
||||
<BorderProgressBar :progress="uploadProgress" />
|
||||
</div>
|
||||
<UploadCloudIcon
|
||||
:class="[
|
||||
'w-16 h-16 transition-colors duration-300',
|
||||
isDarkMode
|
||||
? 'text-gray-400 group-hover:text-indigo-400'
|
||||
: 'text-gray-600 group-hover:text-indigo-600'
|
||||
]"
|
||||
/>
|
||||
<p
|
||||
:class="[
|
||||
'mt-4 text-sm transition-colors duration-300 w-full text-center',
|
||||
isDarkMode
|
||||
? 'text-gray-400 group-hover:text-indigo-400'
|
||||
: 'text-gray-600 group-hover:text-indigo-600'
|
||||
]"
|
||||
>
|
||||
<span class="block truncate">
|
||||
{{ selectedFile ? selectedFile.name : '点击或拖放文件到此处上传' }}
|
||||
</span>
|
||||
</p>
|
||||
<p :class="['mt-2 text-xs', isDarkMode ? 'text-gray-500' : 'text-gray-400']">
|
||||
支持各种常见格式，最大{{ getStorageUnit(config.uploadSize) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else key="text" class="grid grid-cols-1 gap-8">
|
||||
<!-- 文本输入区域 -->
|
||||
<div v-if="sendType === 'text'" class="flex flex-col">
|
||||
<textarea
|
||||
id="text-content"
|
||||
v-model="textContent"
|
||||
rows="7"
|
||||
:class="[
|
||||
'flex-grow px-4 py-3 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 resize-none',
|
||||
isDarkMode
|
||||
? 'bg-gray-800 bg-opacity-50 text-white'
|
||||
: 'bg-white text-gray-900 border border-gray-300'
|
||||
]"
|
||||
placeholder="在此输入要发送的文本..."
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- 过期方式选择 -->
|
||||
<div class="flex flex-col space-y-4">
|
||||
<label :class="['text-sm font-medium', isDarkMode ? 'text-gray-300' : 'text-gray-700']">
|
||||
过期方式
|
||||
</label>
|
||||
<select
|
||||
v-model="expirationMethod"
|
||||
:class="[
|
||||
'px-4 py-2 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500',
|
||||
isDarkMode
|
||||
? 'bg-gray-800 bg-opacity-50 text-white'
|
||||
: 'bg-white text-gray-900 border border-gray-300'
|
||||
]"
|
||||
>
|
||||
<option v-for="item in config.expireStyle" :value="item" :key="item">
|
||||
{{ getUnit(item) }}
|
||||
</option>
|
||||
</select>
|
||||
<div v-if="expirationMethod !== 'forever'" class="flex items-center space-x-2">
|
||||
<div class="relative flex-grow">
|
||||
<input
|
||||
v-model="expirationValue"
|
||||
type="number"
|
||||
:placeholder="getPlaceholder()"
|
||||
:class="[
|
||||
'w-full px-4 py-2 pr-16 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500',
|
||||
isDarkMode
|
||||
? 'bg-gray-800 bg-opacity-50 text-white'
|
||||
: 'bg-white text-gray-900 border border-gray-300'
|
||||
]"
|
||||
/>
|
||||
<span
|
||||
:class="[
|
||||
'absolute right-3 top-1/2 transform -translate-y-1/2',
|
||||
isDarkMode ? 'text-gray-300' : 'text-gray-700'
|
||||
]"
|
||||
>
|
||||
{{ getUnit() }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 提交按钮 -->
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-bold py-4 px-6 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition-all duration-300 transform hover:scale-105 hover:shadow-lg relative overflow-hidden group"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 left-0 w-full h-full bg-white opacity-0 group-hover:opacity-20 transition-opacity duration-300"
|
||||
></span>
|
||||
<span class="relative z-10 flex items-center justify-center text-lg">
|
||||
<SendIcon class="w-6 h-6 mr-2" />
|
||||
<span>安全寄送</span>
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
<div class="mt-6 text-center">
|
||||
<router-link to="/" class="text-indigo-400 hover:text-indigo-300 transition duration-300">
|
||||
需要取件？点击这里
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
|
||||
:class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']"
|
||||
>
|
||||
<span
|
||||
class="text-sm flex items-center"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
|
||||
>
|
||||
<ShieldCheckIcon class="w-4 h-4 mr-1 text-green-400" />
|
||||
安全加密
|
||||
</span>
|
||||
<button
|
||||
@click="toggleDrawer"
|
||||
class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
|
||||
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
|
||||
>
|
||||
发件记录
|
||||
<ClipboardListIcon class="w-4 h-4 ml-1" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 抽屉式发件记录 -->
|
||||
<transition name="drawer">
|
||||
<div
|
||||
v-if="showDrawer"
|
||||
class="fixed inset-y-0 right-0 w-full sm:w-120 bg-opacity-70 backdrop-filter backdrop-blur-xl shadow-2xl z-50 overflow-hidden flex flex-col"
|
||||
:class="[isDarkMode ? 'bg-gray-900' : 'bg-white']"
|
||||
>
|
||||
<div
|
||||
class="flex justify-between items-center p-6 border-b"
|
||||
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
|
||||
>
|
||||
<h3 class="text-2xl font-bold" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
|
||||
发件记录
|
||||
</h3>
|
||||
<button
|
||||
@click="toggleDrawer"
|
||||
class="hover:text-white transition duration-300"
|
||||
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-800']"
|
||||
>
|
||||
<XIcon class="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-grow overflow-y-auto p-6">
|
||||
<transition-group name="list" tag="div" class="space-y-4">
|
||||
<div
|
||||
v-for="record in sendRecords"
|
||||
:key="record.id"
|
||||
class="bg-opacity-50 rounded-lg p-4 flex items-center shadow-md hover:shadow-lg transition duration-300 transform hover:scale-102"
|
||||
:class="[isDarkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-100 hover:bg-white']"
|
||||
>
|
||||
<div class="flex-shrink-0 mr-4">
|
||||
<FileIcon
|
||||
class="w-10 h-10"
|
||||
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-grow min-w-0 mr-4">
|
||||
<p
|
||||
class="font-medium text-lg truncate"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
{{ record.filename }}
|
||||
</p>
|
||||
<p
|
||||
class="text-sm truncate"
|
||||
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']"
|
||||
>
|
||||
{{ record.date }} · {{ record.size }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 flex space-x-2">
|
||||
<button
|
||||
@click="copyRetrieveLink(record.retrieveCode)"
|
||||
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'hover:bg-blue-400 text-blue-400'
|
||||
: 'hover:bg-blue-100 text-blue-600'
|
||||
]"
|
||||
>
|
||||
<ClipboardCopyIcon class="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
@click="viewDetails(record)"
|
||||
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'hover:bg-green-400 text-green-400'
|
||||
: 'hover:bg-green-100 text-green-600'
|
||||
]"
|
||||
>
|
||||
<EyeIcon class="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
@click="deleteRecord(record.id)"
|
||||
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
|
||||
:class="[
|
||||
isDarkMode ? 'hover:bg-red-400 text-red-400' : 'hover:bg-red-100 text-red-600'
|
||||
]"
|
||||
>
|
||||
<TrashIcon class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<!-- 记录详情弹窗 -->
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-if="selectedRecord"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
|
||||
>
|
||||
<div
|
||||
class="p-8 rounded-2xl max-w-md w-full mx-4 shadow-2xl transform transition-all duration-300 ease-out backdrop-filter backdrop-blur-lg bg-opacity-70"
|
||||
:class="[isDarkMode ? 'bg-gray-800' : 'bg-white']"
|
||||
>
|
||||
<h3
|
||||
class="text-2xl font-bold mb-6"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
文件详情
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center">
|
||||
<FileIcon
|
||||
class="w-6 h-6 mr-3"
|
||||
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
|
||||
/>
|
||||
<p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
|
||||
<span class="font-medium">文件名：</span>{{ selectedRecord.filename }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<CalendarIcon
|
||||
class="w-6 h-6 mr-3"
|
||||
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
|
||||
/>
|
||||
<p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
|
||||
<span class="font-medium">发送日期：</span>{{ selectedRecord.date }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<HardDriveIcon
|
||||
class="w-6 h-6 mr-3"
|
||||
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
|
||||
/>
|
||||
<p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
|
||||
<span class="font-medium">文件大小：</span>{{ selectedRecord.size }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<ClockIcon
|
||||
class="w-6 h-6 mr-3"
|
||||
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
|
||||
/>
|
||||
<p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
|
||||
<span class="font-medium">过期时间：</span>{{ selectedRecord.expiration }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 取件码和二维码部分 -->
|
||||
<div class="mt-6 flex justify-between items-center">
|
||||
<div class="flex flex-col items-center w-1/2 pr-2">
|
||||
<h4
|
||||
class="text-lg font-semibold mb-3"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
取件码
|
||||
</h4>
|
||||
<div
|
||||
class="bg-gray-100 p-3 rounded-lg shadow-md cursor-pointer hover:bg-gray-200 transition-colors duration-300 w-full text-center"
|
||||
@click="copyRetrieveCode(selectedRecord.retrieveCode)"
|
||||
>
|
||||
<p class="text-2xl font-bold text-indigo-600">{{ selectedRecord.retrieveCode }}</p>
|
||||
</div>
|
||||
<p class="mt-2 text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
|
||||
点击复制取件码
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center w-1/2 pl-2">
|
||||
<h4
|
||||
class="text-lg font-semibold mb-3"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
二维码
|
||||
</h4>
|
||||
<div class="bg-white p-2 rounded-lg shadow-md">
|
||||
<QRCode :value="getQRCodeValue(selectedRecord)" :size="128" level="M" />
|
||||
</div>
|
||||
<p class="mt-2 text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
|
||||
扫描二维码快速取件
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="selectedRecord = null"
|
||||
class="mt-8 w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105"
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, inject, onMounted, computed } from 'vue'
|
||||
import {
|
||||
UploadCloudIcon,
|
||||
SendIcon,
|
||||
ClipboardListIcon,
|
||||
XIcon,
|
||||
TrashIcon,
|
||||
FileIcon,
|
||||
CalendarIcon,
|
||||
HardDriveIcon,
|
||||
ClockIcon,
|
||||
EyeIcon,
|
||||
ShieldCheckIcon,
|
||||
ClipboardCopyIcon
|
||||
} from 'lucide-vue-next'
|
||||
import { useRouter } from 'vue-router'
|
||||
import BorderProgressBar from '@/components/common/BorderProgressBar.vue'
|
||||
import QRCode from 'qrcode.vue'
|
||||
import SparkMD5 from 'spark-md5'
|
||||
import { useFileDataStore } from '../stores/fileData'
|
||||
import api from '@/utils/api'
|
||||
import { copyRetrieveLink, copyRetrieveCode } from '@/utils/clipboard'
|
||||
import { getStorageUnit } from '@/utils/convert'
|
||||
|
||||
const config: any = JSON.parse(localStorage.getItem('config') || '{}')
|
||||
console.log(config)
|
||||
|
||||
const router = useRouter()
|
||||
const isDarkMode = inject('isDarkMode')
|
||||
const fileDataStore = useFileDataStore()
|
||||
|
||||
const sendType = ref('file')
|
||||
const selectedFile = ref<File | null>(null)
|
||||
const textContent = ref('')
|
||||
const fileInput = ref<HTMLInputElement | null>(null)
|
||||
const expirationMethod = ref('day')
|
||||
const expirationValue = ref('1')
|
||||
const uploadProgress = ref(0)
|
||||
const showDrawer = ref(false)
|
||||
const selectedRecord = ref<any>(null)
|
||||
import { useAlertStore } from '@/stores/alertStore'
|
||||
|
||||
const alertStore = useAlertStore()
|
||||
const sendRecords = computed(() => fileDataStore.shareData)
|
||||
|
||||
// 新增状态
|
||||
const fileHash = ref('')
|
||||
const uploadedChunks = ref<Set<number>>(new Set())
|
||||
|
||||
const triggerFileUpload = () => {
|
||||
fileInput.value?.click()
|
||||
}
|
||||
|
||||
const handleFileUpload = async (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
if (target.files && target.files.length > 0) {
|
||||
selectedFile.value = target.files[0]
|
||||
fileHash.value = await calculateFileHash(selectedFile.value)
|
||||
// startChunkUpload()
|
||||
}
|
||||
}
|
||||
|
||||
const handleFileDrop = async (event: DragEvent) => {
|
||||
if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
|
||||
selectedFile.value = event.dataTransfer.files[0]
|
||||
fileHash.value = await calculateFileHash(selectedFile.value)
|
||||
startChunkUpload()
|
||||
}
|
||||
}
|
||||
|
||||
const calculateFileHash = async (file: File): Promise<string> => {
|
||||
return new Promise((resolve) => {
|
||||
const chunkSize = 2097152 // 2MB
|
||||
const spark = new SparkMD5.ArrayBuffer()
|
||||
const fileReader = new FileReader()
|
||||
|
||||
let currentChunk = 0
|
||||
const chunks = Math.ceil(file.size / chunkSize)
|
||||
|
||||
fileReader.onload = (e) => {
|
||||
spark.append(e.target!.result as ArrayBuffer)
|
||||
currentChunk++
|
||||
|
||||
if (currentChunk < chunks) {
|
||||
loadNext()
|
||||
} else {
|
||||
resolve(spark.end())
|
||||
}
|
||||
}
|
||||
|
||||
const loadNext = () => {
|
||||
const start = currentChunk * chunkSize
|
||||
const end = start + chunkSize >= file.size ? file.size : start + chunkSize
|
||||
fileReader.readAsArrayBuffer(file.slice(start, end))
|
||||
}
|
||||
|
||||
loadNext()
|
||||
})
|
||||
}
|
||||
|
||||
const startChunkUpload = async () => {
|
||||
if (!selectedFile.value) return
|
||||
|
||||
const chunkSize = 1024 * 1024 // 1MB 每片
|
||||
const totalChunks = Math.ceil(selectedFile.value.size / chunkSize)
|
||||
|
||||
// 检查已上传的切片
|
||||
const { uploadedList } = await checkUploadedChunks(fileHash.value)
|
||||
uploadedChunks.value = new Set(uploadedList)
|
||||
|
||||
for (let i = 0; i < totalChunks; i++) {
|
||||
if (uploadedChunks.value.has(i)) {
|
||||
console.log(`切片 ${i} 已上传,跳过`)
|
||||
continue
|
||||
}
|
||||
|
||||
const start = i * chunkSize
|
||||
const end = Math.min(start + chunkSize, selectedFile.value.size)
|
||||
const chunk = selectedFile.value.slice(start, end)
|
||||
|
||||
// 上传每个切片
|
||||
await uploadChunk(chunk, i, totalChunks)
|
||||
|
||||
// 更新进度
|
||||
uploadProgress.value = ((uploadedChunks.value.size + 1) / totalChunks) * 100
|
||||
}
|
||||
|
||||
// 所有切片上传完成,通知服务器合并文件
|
||||
await mergeChunks(fileHash.value, totalChunks)
|
||||
|
||||
alertStore.showAlert('文件上传完成', 'success')
|
||||
}
|
||||
|
||||
const checkUploadedChunks = async (fileHash: string) => {
|
||||
console.log(fileHash)
|
||||
|
||||
// 这里应该调用后端API来检查已上传的切片
|
||||
// 现在用模拟数据代替
|
||||
return new Promise<{ uploadedList: number[] }>((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({ uploadedList: [] })
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
const uploadChunk = async (chunk: Blob, index: number, total: number) => {
|
||||
// 这里应该是实际的上传逻辑,现在用setTimeout模拟
|
||||
return new Promise<void>((resolve) => {
|
||||
setTimeout(() => {
|
||||
console.log(`上传切片 ${index + 1}/${total}`)
|
||||
uploadedChunks.value.add(index)
|
||||
resolve()
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
const mergeChunks = async (fileHash: string, totalChunks: number) => {
|
||||
// 这里应该调用后端API来合并文件切片
|
||||
console.log(`请求合并文件切片, fileHash: ${fileHash}, totalChunks: ${totalChunks}`)
|
||||
}
|
||||
|
||||
const getPlaceholder = (value: string = expirationMethod.value) => {
|
||||
switch (value) {
|
||||
case 'day':
|
||||
return '输入天数'
|
||||
case 'hour':
|
||||
return '输入小时数'
|
||||
case 'minute':
|
||||
return '输入分钟数'
|
||||
case 'count':
|
||||
return '输入查看次数'
|
||||
case 'forever':
|
||||
return '永久'
|
||||
default:
|
||||
return '输入值'
|
||||
}
|
||||
}
|
||||
|
||||
const getUnit = (value: string = expirationMethod.value) => {
|
||||
switch (value) {
|
||||
case 'day':
|
||||
return '天'
|
||||
case 'hour':
|
||||
return '小时'
|
||||
case 'minute':
|
||||
return '分钟'
|
||||
case 'count':
|
||||
return '次'
|
||||
case 'forever':
|
||||
return '永久'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (sendType.value === 'file' && !selectedFile.value) {
|
||||
alertStore.showAlert('请选择要上传的文件', 'error')
|
||||
return
|
||||
}
|
||||
if (sendType.value === 'text' && !textContent.value.trim()) {
|
||||
alertStore.showAlert('请输入要发送的文本', 'error')
|
||||
return
|
||||
}
|
||||
if (expirationMethod.value !== 'forever' && !expirationValue.value) {
|
||||
alertStore.showAlert('请输入过期值', 'error')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
let response: any
|
||||
const formData = new FormData()
|
||||
|
||||
if (sendType.value === 'file') {
|
||||
formData.append('file', selectedFile.value!)
|
||||
} else {
|
||||
const textBlob = new Blob([textContent.value], { type: 'text/plain' })
|
||||
formData.append('file', textBlob, 'text_content.txt')
|
||||
}
|
||||
|
||||
if (expirationMethod.value !== 'forever') {
|
||||
formData.append('expire_value', expirationValue.value)
|
||||
}
|
||||
formData.append('expire_style', expirationMethod.value)
|
||||
|
||||
// 添加上传进度监听
|
||||
const config = {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
},
|
||||
onUploadProgress: (progressEvent: any) => {
|
||||
const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
|
||||
uploadProgress.value = percentCompleted
|
||||
}
|
||||
}
|
||||
|
||||
response = await api.post('/share/file/', formData, config)
|
||||
|
||||
if (response && response.code === 200) {
|
||||
const retrieveCode = response.detail.code
|
||||
const fileName = response.detail.name
|
||||
// 添加新的发送记录
|
||||
const newRecord = {
|
||||
id: Date.now(),
|
||||
filename: fileName,
|
||||
date: new Date().toISOString().split('T')[0],
|
||||
size:
|
||||
sendType.value === 'text'
|
||||
? `${(textContent.value.length / 1024).toFixed(2)} KB`
|
||||
: `${(selectedFile.value!.size / (1024 * 1024)).toFixed(1)} MB`,
|
||||
expiration:
|
||||
expirationMethod.value === 'forever'
|
||||
? '永久'
|
||||
: `${expirationValue.value}${getUnit()}后过期`,
|
||||
retrieveCode: retrieveCode
|
||||
}
|
||||
fileDataStore.addShareData(newRecord)
|
||||
|
||||
// 显示发送成功消息
|
||||
alertStore.showAlert(`文件发送成功！取件码：${retrieveCode}`, 'success')
|
||||
// 重置表单
|
||||
selectedFile.value = null
|
||||
textContent.value = ''
|
||||
expirationValue.value = ''
|
||||
uploadProgress.value = 0
|
||||
|
||||
// 自动打开抽屉
|
||||
showDrawer.value = true
|
||||
|
||||
// 自动复制取件码链接
|
||||
await copyRetrieveLink(retrieveCode)
|
||||
} else {
|
||||
throw new Error('服务器响应异常')
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('发送失败:', error)
|
||||
if (error.response.data.detail) {
|
||||
alertStore.showAlert(error.response.data.detail, 'error')
|
||||
} else {
|
||||
alertStore.showAlert('发送失败,请稍后重试', 'error')
|
||||
}
|
||||
} finally {
|
||||
// 确保无论成功还是失败,最后都重置进度条
|
||||
uploadProgress.value = 0
|
||||
}
|
||||
}
|
||||
|
||||
const toRetrieve = () => {
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
const toggleDrawer = () => {
|
||||
showDrawer.value = !showDrawer.value
|
||||
}
|
||||
|
||||
const viewDetails = (record: any) => {
|
||||
selectedRecord.value = record
|
||||
}
|
||||
|
||||
const deleteRecord = (id: number) => {
|
||||
const index = fileDataStore.shareData.findIndex((record: any) => record.id === id)
|
||||
if (index !== -1) {
|
||||
fileDataStore.deleteShareData(index)
|
||||
}
|
||||
}
|
||||
const baseUrl =
|
||||
import.meta.env.MODE === 'production'
|
||||
? import.meta.env.VITE_API_BASE_URL_PROD
|
||||
: import.meta.env.VITE_API_BASE_URL_DEV
|
||||
const getQRCodeValue = (record: any) => {
|
||||
// 这里返回你想要在二维码中编码的信息
|
||||
// 例如,可以是一个包含文件ID和取件码的URL
|
||||
return `${baseUrl}/?code=${record.retrieveCode}`
|
||||
}
|
||||
|
||||
// 使用 onMounted 钩子延迟加载一些非关键资源或初始化
|
||||
onMounted(() => {
|
||||
// 这里可以放置一些非立即需要的初始化代码
|
||||
console.log('SendFileView mounted')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition:
|
||||
opacity 0.3s ease,
|
||||
transform 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.sm\:w-120 {
|
||||
width: 30rem; /* 480px */
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-to,
|
||||
.fade-leave-from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.drawer-enter-active,
|
||||
.drawer-leave-active {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.drawer-enter-from,
|
||||
.drawer-leave-to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.list-enter-active,
|
||||
.list-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.list-enter-from,
|
||||
.list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
</style>
|
||||
257
src/views/manage/DashboardView.vue
Normal file
257
src/views/manage/DashboardView.vue
Normal file
@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div class="p-6 h-screen overflow-y-auto custom-scrollbar">
|
||||
<h2 class="text-2xl font-bold mb-6" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
|
||||
仪表盘
|
||||
</h2>
|
||||
|
||||
<!-- 统计卡片区域 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<div
|
||||
class="p-6 rounded-lg shadow-md transition-colors duration-300"
|
||||
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
|
||||
总文件数
|
||||
</p>
|
||||
<h3
|
||||
class="text-2xl font-bold mt-1"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
{{ dashboardData.totalFiles }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-indigo-900' : 'bg-indigo-100']">
|
||||
<FileIcon
|
||||
class="w-6 h-6"
|
||||
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm mt-2" :class="[isDarkMode ? 'text-green-400' : 'text-green-600']">
|
||||
<span :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">昨天：</span>
|
||||
<span>{{ dashboardData.yesterdayCount }} </span>
|
||||
<span class="ml-2" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">今天：</span>
|
||||
<span>{{ dashboardData.todayCount }} </span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-6 rounded-lg shadow-md transition-colors duration-300"
|
||||
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
|
||||
存储空间
|
||||
</p>
|
||||
<h3
|
||||
class="text-2xl font-bold mt-1"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
{{ dashboardData.storageUsed }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-purple-900' : 'bg-purple-100']">
|
||||
<HardDriveIcon
|
||||
class="w-6 h-6"
|
||||
:class="[isDarkMode ? 'text-purple-400' : 'text-purple-600']"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-sm mt-2" :class="[isDarkMode ? 'text-green-400' : 'text-green-600']">
|
||||
<span :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">昨天：</span>
|
||||
<span>{{ dashboardData.yesterdaySize }} </span>
|
||||
<span class="ml-2" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">今天：</span>
|
||||
<span>{{ dashboardData.todaySize }} </span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-6 rounded-lg shadow-md transition-colors duration-300"
|
||||
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
|
||||
活跃用户
|
||||
</p>
|
||||
<h3
|
||||
class="text-2xl font-bold mt-1"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
25
|
||||
</h3>
|
||||
</div>
|
||||
<div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-green-900' : 'bg-green-100']">
|
||||
<UsersIcon
|
||||
class="w-6 h-6"
|
||||
:class="[isDarkMode ? 'text-green-400' : 'text-green-600']"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm mt-2" :class="[isDarkMode ? 'text-red-400' : 'text-red-600']">
|
||||
<span>↓ 5% </span>
|
||||
<span :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">较上周</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-6 rounded-lg shadow-md transition-colors duration-300"
|
||||
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
|
||||
系统状态
|
||||
</p>
|
||||
<h3
|
||||
class="text-2xl font-bold mt-1"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
正常
|
||||
</h3>
|
||||
</div>
|
||||
<div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-blue-900' : 'bg-blue-100']">
|
||||
<ActivityIcon
|
||||
class="w-6 h-6"
|
||||
:class="[isDarkMode ? 'text-blue-400' : 'text-blue-600']"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm mt-2" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
|
||||
服务器运行时间: {{ dashboardData.sysUptime }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最近活动 -->
|
||||
<div
|
||||
class="rounded-lg shadow-md overflow-hidden transition-colors duration-300"
|
||||
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
|
||||
>
|
||||
<div class="px-6 py-4 border-b" :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
|
||||
<h3 class="text-lg font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
|
||||
最近活动
|
||||
</h3>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="space-y-4">
|
||||
<div
|
||||
v-for="(activity, index) in recentActivities"
|
||||
:key="index"
|
||||
class="flex items-center space-x-4"
|
||||
>
|
||||
<div class="flex-shrink-0">
|
||||
<component
|
||||
:is="activity.icon"
|
||||
class="w-5 h-5"
|
||||
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
|
||||
{{ activity.description }}
|
||||
</p>
|
||||
<p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
|
||||
{{ activity.time }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { inject, onMounted, reactive } from 'vue'
|
||||
import {
|
||||
FileIcon,
|
||||
HardDriveIcon,
|
||||
UsersIcon,
|
||||
ActivityIcon,
|
||||
UploadIcon,
|
||||
TrashIcon,
|
||||
UserIcon
|
||||
} from 'lucide-vue-next'
|
||||
const isDarkMode = inject('isDarkMode')
|
||||
import api from '@/utils/api'
|
||||
|
||||
const dashboardData: any = reactive({
|
||||
totalFiles: 0,
|
||||
storageUsed: 0,
|
||||
yesterdayCount: 0,
|
||||
todayCount: 0,
|
||||
yesterdaySize: 0,
|
||||
todaySize: 0,
|
||||
sysUptime: 0
|
||||
})
|
||||
|
||||
// 添加最近活动数据
|
||||
const recentActivities = [
|
||||
{
|
||||
icon: UploadIcon,
|
||||
description: '张三上传了文件 "项目计划.pdf"',
|
||||
time: '10分钟前'
|
||||
},
|
||||
{
|
||||
icon: UserIcon,
|
||||
description: '新用户李四加入了系统',
|
||||
time: '30分钟前'
|
||||
},
|
||||
{
|
||||
icon: TrashIcon,
|
||||
description: '王五删除了文件 "旧文档.doc"',
|
||||
time: '1小时前'
|
||||
},
|
||||
{
|
||||
icon: FileIcon,
|
||||
description: '系统自动备份完成',
|
||||
time: '2小时前'
|
||||
}
|
||||
]
|
||||
|
||||
const getSysUptime = (startTimestamp: number) => {
|
||||
const now = new Date().getTime()
|
||||
const uptime = now - startTimestamp
|
||||
const days = Math.floor(uptime / (24 * 60 * 60 * 1000))
|
||||
const hours = Math.floor((uptime % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000))
|
||||
return `${days}天${hours}小时`
|
||||
}
|
||||
|
||||
const getLocalstorageUsed = (nowUsedBit: string) => {
|
||||
const kb = parseInt(nowUsedBit) / 1024
|
||||
const mb = kb / 1024
|
||||
const gb = mb / 1024
|
||||
const tb = gb / 1024
|
||||
// 根据大小选择合适的单位
|
||||
if (tb > 1) {
|
||||
return `${tb.toFixed(2)}TB`
|
||||
} else if (gb > 1) {
|
||||
return `${gb.toFixed(2)}GB`
|
||||
} else if (mb > 1) {
|
||||
return `${mb.toFixed(2)}MB`
|
||||
} else if (kb > 1) {
|
||||
return `${kb.toFixed(2)}KB`
|
||||
} else {
|
||||
return `${nowUsedBit}B`
|
||||
}
|
||||
}
|
||||
const getDashboardData = async () => {
|
||||
const response: any = await api.get('/admin/dashboard')
|
||||
dashboardData.totalFiles = response.detail.totalFiles
|
||||
dashboardData.storageUsed = getLocalstorageUsed(response.detail.storageUsed)
|
||||
dashboardData.yesterdaySize = getLocalstorageUsed(response.detail.yesterdaySize)
|
||||
dashboardData.todaySize = getLocalstorageUsed(response.detail.todaySize)
|
||||
dashboardData.yesterdayCount = response.detail.yesterdayCount
|
||||
dashboardData.todayCount = response.detail.todayCount
|
||||
dashboardData.sysUptime = getSysUptime(response.detail.sysUptime)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDashboardData()
|
||||
})
|
||||
</script>
|
||||
385
src/views/manage/FileManageView.vue
Normal file
385
src/views/manage/FileManageView.vue
Normal file
@ -0,0 +1,385 @@
|
||||
<template>
|
||||
<div class="p-6 h-screen overflow-y-auto custom-scrollbar">
|
||||
<h2 class="text-2xl font-bold mb-6" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
|
||||
文件管理
|
||||
</h2>
|
||||
|
||||
<!-- 添加文件操作栏 -->
|
||||
<div class="mb-6 flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
|
||||
<!-- 搜索和过滤 -->
|
||||
<div class="flex flex-1 gap-4">
|
||||
<div class="relative flex-1">
|
||||
<input
|
||||
type="text"
|
||||
v-model="params.keyword"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400'
|
||||
: 'bg-white border-gray-300 text-gray-900 placeholder-gray-400'
|
||||
]"
|
||||
class="w-full pl-10 pr-4 py-2 rounded-lg border focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
placeholder="搜索文件..."
|
||||
/>
|
||||
<SearchIcon
|
||||
class="absolute left-3 top-2.5 w-5 h-5"
|
||||
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索按钮 -->
|
||||
<div class="flex gap-4">
|
||||
<button
|
||||
@click="handleSearch"
|
||||
class="flex items-center px-4 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors duration-200"
|
||||
>
|
||||
<SearchIcon class="w-5 h-5 mr-2" />
|
||||
搜索
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- File List -->
|
||||
<div
|
||||
class="rounded-lg shadow-md overflow-hidden transition-colors duration-300"
|
||||
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
|
||||
>
|
||||
<div class="px-6 py-4 border-b" :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
|
||||
<h3 class="text-lg font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
|
||||
所有文件
|
||||
</h3>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table
|
||||
class="min-w-full divide-y"
|
||||
:class="[isDarkMode ? 'divide-gray-700' : 'divide-gray-200']"
|
||||
>
|
||||
<thead :class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-100']">
|
||||
<tr>
|
||||
<th
|
||||
v-for="header in fileTableHeaders"
|
||||
:key="header"
|
||||
class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider"
|
||||
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
|
||||
>
|
||||
{{ header }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-800 divide-y divide-gray-700'
|
||||
: 'bg-white divide-y divide-gray-200'
|
||||
]"
|
||||
>
|
||||
<tr v-for="file in tableData" :key="file.id">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<span class="font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
|
||||
{{ file.code }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<FileIcon
|
||||
class="w-5 h-5 mr-2"
|
||||
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-500']"
|
||||
/>
|
||||
<span class="font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
|
||||
{{ file.prefix }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
|
||||
{{ Math.round((file.size / 1024 / 1024) * 100) / 100 }}MB
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
|
||||
{{ file.text }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
|
||||
{{ file.expired_at ? formatTimestamp(file.expired_at) : '永久' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<!-- <button
|
||||
v-if="file.file_path"
|
||||
@click="downloadFile(file.id)"
|
||||
class="mr-3 transition-colors duration-200"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'text-indigo-400 hover:text-indigo-300'
|
||||
: 'text-indigo-600 hover:text-indigo-900'
|
||||
]"
|
||||
>
|
||||
下载
|
||||
</button> -->
|
||||
<button
|
||||
@click="deleteFile(file.id)"
|
||||
class="transition-colors duration-200"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'text-red-400 hover:text-red-300'
|
||||
: 'text-red-600 hover:text-red-900'
|
||||
]"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 在文件列表表格下方添加分页组件 -->
|
||||
<div
|
||||
class="mt-4 flex items-center justify-between px-6 py-3 border-t"
|
||||
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
|
||||
>
|
||||
<!-- 分页信息 -->
|
||||
<div
|
||||
class="flex items-center text-sm"
|
||||
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
|
||||
>
|
||||
显示第 {{ (params.page - 1) * params.size + 1 }} 到
|
||||
{{ Math.min(params.page * params.size, params.total) }} 条，共 {{ params.total }} 条
|
||||
</div>
|
||||
|
||||
<!-- 分页控制器 -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<!-- 上一页 -->
|
||||
<button
|
||||
@click="handlePageChange(params.page - 1)"
|
||||
:disabled="params.page === 1"
|
||||
class="px-3 py-1 rounded-md transition-colors duration-200"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? params.page === 1
|
||||
? 'bg-gray-700 text-gray-500 cursor-not-allowed'
|
||||
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||||
: params.page === 1
|
||||
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||
]"
|
||||
>
|
||||
上一页
|
||||
</button>
|
||||
|
||||
<!-- 页码 -->
|
||||
<div class="flex items-center space-x-1">
|
||||
<template v-for="pageNum in displayedPages" :key="pageNum">
|
||||
<button
|
||||
v-if="pageNum !== '...'"
|
||||
@click="handlePageChange(pageNum)"
|
||||
class="px-3 py-1 rounded-md transition-colors duration-200"
|
||||
:class="[
|
||||
params.page === pageNum
|
||||
? 'bg-indigo-600 text-white'
|
||||
: isDarkMode
|
||||
? 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||
]"
|
||||
>
|
||||
{{ pageNum }}
|
||||
</button>
|
||||
<span v-else class="px-2" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
|
||||
...
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 下一页 -->
|
||||
<button
|
||||
@click="handlePageChange(params.page + 1)"
|
||||
:disabled="params.page >= totalPages"
|
||||
class="px-3 py-1 rounded-md transition-colors duration-200"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? params.page >= totalPages
|
||||
? 'bg-gray-700 text-gray-500 cursor-not-allowed'
|
||||
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||||
: params.page >= totalPages
|
||||
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||
]"
|
||||
>
|
||||
下一页
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { inject, ref, computed } from 'vue'
|
||||
import api from '@/utils/api'
|
||||
import { FileIcon, SearchIcon } from 'lucide-vue-next'
|
||||
import { useAlertStore } from '@/stores/alertStore'
|
||||
const alertStore = useAlertStore()
|
||||
function formatTimestamp(timestamp: string): string {
|
||||
const date = new Date(timestamp)
|
||||
const year = date.getFullYear()
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0')
|
||||
const day = date.getDate().toString().padStart(2, '0')
|
||||
const hours = date.getHours().toString().padStart(2, '0')
|
||||
const minutes = date.getMinutes().toString().padStart(2, '0')
|
||||
const seconds = date.getSeconds().toString().padStart(2, '0')
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
||||
}
|
||||
|
||||
const isDarkMode = inject('isDarkMode')
|
||||
const tableData: any = ref([])
|
||||
|
||||
// 修改文件表头
|
||||
const fileTableHeaders = ['取件码', '名称', '大小', '描述', '过期时间', '操作']
|
||||
|
||||
// 分页参数
|
||||
const params = ref({
|
||||
page: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
keyword: ''
|
||||
})
|
||||
|
||||
// 下载文件处理
|
||||
const downloadFile = async (id: number) => {
|
||||
try {
|
||||
const response = await api({
|
||||
url: '/admin/file/download',
|
||||
method: 'get',
|
||||
params: { id },
|
||||
responseType: 'blob'
|
||||
})
|
||||
|
||||
const contentDisposition = response.headers['content-disposition']
|
||||
let filename = 'file'
|
||||
const filenameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)
|
||||
if (filenameMatch != null && filenameMatch[1]) {
|
||||
filename = filenameMatch[1].replace(/['"]/g, '')
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
if (window.showSaveFilePicker) {
|
||||
await saveFileByWebApi(response.data, filename)
|
||||
} else {
|
||||
await saveFileByElementA(response.data, filename)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('下载失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 删除文件处理
|
||||
const deleteFile = async (id: number) => {
|
||||
try {
|
||||
await api({
|
||||
url: '/admin/file/delete',
|
||||
method: 'delete',
|
||||
data: { id }
|
||||
})
|
||||
await loadFiles()
|
||||
} catch (error) {
|
||||
console.error('删除失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 文件保存辅助函数
|
||||
async function saveFileByElementA(fileBlob: Blob, filename: string) {
|
||||
const downloadUrl = window.URL.createObjectURL(fileBlob)
|
||||
const link = document.createElement('a')
|
||||
link.href = downloadUrl
|
||||
link.download = filename
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
window.URL.revokeObjectURL(downloadUrl)
|
||||
document.body.removeChild(link)
|
||||
}
|
||||
|
||||
async function saveFileByWebApi(fileBlob: Blob, filename: string) {
|
||||
// @ts-ignore
|
||||
const newHandle = await window.showSaveFilePicker({
|
||||
suggestedName: filename
|
||||
})
|
||||
const writableStream = await newHandle.createWritable()
|
||||
await writableStream.write(fileBlob)
|
||||
await writableStream.close()
|
||||
}
|
||||
|
||||
// 加载文件列表
|
||||
const loadFiles = async () => {
|
||||
try {
|
||||
const res: any = await api({
|
||||
url: '/admin/file/list',
|
||||
method: 'get',
|
||||
params: params.value
|
||||
})
|
||||
tableData.value = res.detail.data
|
||||
params.value.total = res.detail.total
|
||||
alertStore.showAlert('加载成功', 'success')
|
||||
} catch (error) {
|
||||
console.error('加载文件列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 页码改变处理函数
|
||||
const handlePageChange = async (page: any) => {
|
||||
if (page < 1 || page > totalPages.value) return
|
||||
params.value.page = page
|
||||
await loadFiles()
|
||||
}
|
||||
|
||||
// 初始加载
|
||||
loadFiles()
|
||||
|
||||
// 计算总页数
|
||||
const totalPages = computed(() => Math.ceil(params.value.total / params.value.size))
|
||||
|
||||
// 计算要显示的页码
|
||||
const displayedPages = computed(() => {
|
||||
const current = params.value.page
|
||||
const total = totalPages.value
|
||||
const delta = 2 // 当前页码前后显示的页码数
|
||||
|
||||
let pages: (number | string)[] = []
|
||||
|
||||
// 始终显示第一页
|
||||
pages.push(1)
|
||||
|
||||
// 计算显示范围
|
||||
let left = Math.max(2, current - delta)
|
||||
let right = Math.min(total - 1, current + delta)
|
||||
|
||||
// 添加省略号和页码
|
||||
if (left > 2) {
|
||||
pages.push('...')
|
||||
}
|
||||
|
||||
for (let i = left; i <= right; i++) {
|
||||
pages.push(i)
|
||||
}
|
||||
|
||||
if (right < total - 1) {
|
||||
pages.push('...')
|
||||
}
|
||||
|
||||
// 始终显示最后一页
|
||||
if (total > 1) {
|
||||
pages.push(total)
|
||||
}
|
||||
|
||||
return pages
|
||||
})
|
||||
|
||||
// 添加搜索处理函数
|
||||
const handleSearch = async () => {
|
||||
params.value.page = 1 // 重置页码到第一页
|
||||
await loadFiles()
|
||||
}
|
||||
</script>
|
||||
814
src/views/manage/SystemSettingsView.vue
Normal file
814
src/views/manage/SystemSettingsView.vue
Normal file
@ -0,0 +1,814 @@
|
||||
<script setup lang="ts">
|
||||
import { inject, ref } from 'vue'
|
||||
import api from '@/utils/api'
|
||||
import { useAlertStore } from '@/stores/alertStore'
|
||||
|
||||
const isDarkMode = inject('isDarkMode')
|
||||
interface ConfigState {
|
||||
name: string
|
||||
description: string
|
||||
file_storage: string
|
||||
expireStyle: string[]
|
||||
admin_token: string
|
||||
robotsText: string
|
||||
keywords: string
|
||||
notify_title: string
|
||||
notify_content: string
|
||||
openUpload: number
|
||||
uploadSize: number
|
||||
uploadMinute: number
|
||||
max_save_seconds: number
|
||||
opacity: number
|
||||
s3_access_key_id: string
|
||||
background: string
|
||||
showAdminAddr: number
|
||||
page_explain: string
|
||||
s3_secret_access_key: string
|
||||
aws_session_token: string
|
||||
s3_signature_version: string
|
||||
s3_region_name: string
|
||||
s3_bucket_name: string
|
||||
s3_endpoint_url: string
|
||||
s3_hostname: string
|
||||
uploadCount: number
|
||||
errorMinute: number
|
||||
errorCount: number
|
||||
s3_proxy: number
|
||||
}
|
||||
|
||||
const config = ref<ConfigState>({
|
||||
name: '',
|
||||
description: '',
|
||||
file_storage: '',
|
||||
expireStyle: [],
|
||||
admin_token: '',
|
||||
robotsText: '',
|
||||
keywords: '',
|
||||
notify_title: '',
|
||||
notify_content: '',
|
||||
openUpload: 1,
|
||||
uploadSize: 1,
|
||||
uploadMinute: 1,
|
||||
max_save_seconds: 0,
|
||||
opacity: 0.9,
|
||||
s3_access_key_id: '',
|
||||
background: '',
|
||||
showAdminAddr: 0,
|
||||
page_explain: '',
|
||||
s3_secret_access_key: '',
|
||||
aws_session_token: '',
|
||||
s3_signature_version: '',
|
||||
s3_region_name: '',
|
||||
s3_bucket_name: '',
|
||||
s3_endpoint_url: '',
|
||||
s3_hostname: '',
|
||||
uploadCount: 1,
|
||||
errorMinute: 1,
|
||||
errorCount: 1,
|
||||
s3_proxy: 0
|
||||
})
|
||||
|
||||
const fileSize = ref(1)
|
||||
const sizeUnit = ref('MB')
|
||||
|
||||
// 添加保存时间相关的响应式变量
|
||||
const saveTime = ref(1)
|
||||
const saveTimeUnit = ref('天')
|
||||
|
||||
// 转换时间为秒
|
||||
const convertToSeconds = (time: number, unit: string): number => {
|
||||
const units = {
|
||||
秒: 1,
|
||||
分: 60,
|
||||
时: 3600,
|
||||
天: 86400
|
||||
}
|
||||
return time * units[unit as keyof typeof units]
|
||||
}
|
||||
|
||||
const refreshData = () => {
|
||||
api({
|
||||
url: '/admin/config/get',
|
||||
method: 'get'
|
||||
}).then((res: any) => {
|
||||
config.value = res.detail
|
||||
|
||||
// 将字节转换为合适的单位
|
||||
let size = config.value.uploadSize
|
||||
if (size >= 1024 * 1024 * 1024) {
|
||||
fileSize.value = Math.round(size / (1024 * 1024 * 1024))
|
||||
sizeUnit.value = 'GB'
|
||||
} else if (size >= 1024 * 1024) {
|
||||
fileSize.value = Math.round(size / (1024 * 1024))
|
||||
sizeUnit.value = 'MB'
|
||||
} else {
|
||||
fileSize.value = Math.round(size / 1024)
|
||||
sizeUnit.value = 'KB'
|
||||
}
|
||||
|
||||
// 时间单位转换逻辑
|
||||
let seconds = config.value.max_save_seconds
|
||||
if (seconds === 0) {
|
||||
// 如果是0，显示为7天
|
||||
saveTime.value = 7
|
||||
saveTimeUnit.value = '天'
|
||||
} else if (seconds % 86400 === 0 && seconds >= 86400) {
|
||||
saveTime.value = seconds / 86400
|
||||
saveTimeUnit.value = '天'
|
||||
} else if (seconds % 3600 === 0 && seconds >= 3600) {
|
||||
saveTime.value = seconds / 3600
|
||||
saveTimeUnit.value = '时'
|
||||
} else if (seconds % 60 === 0 && seconds >= 60) {
|
||||
saveTime.value = seconds / 60
|
||||
saveTimeUnit.value = '分'
|
||||
} else {
|
||||
saveTime.value = seconds
|
||||
saveTimeUnit.value = '秒'
|
||||
}
|
||||
})
|
||||
}
|
||||
const alertStore = useAlertStore()
|
||||
// 转换文件大小为字节
|
||||
const convertToBytes = (size: number, unit: string): number => {
|
||||
const units = {
|
||||
KB: 1024,
|
||||
MB: 1024 * 1024,
|
||||
GB: 1024 * 1024 * 1024
|
||||
}
|
||||
return size * units[unit as keyof typeof units]
|
||||
}
|
||||
|
||||
const submitSave = () => {
|
||||
const formData = { ...config.value }
|
||||
formData.uploadSize = convertToBytes(fileSize.value, sizeUnit.value)
|
||||
|
||||
// 如果保存时间为0，则默认设置为7天
|
||||
if (saveTime.value === 0) {
|
||||
formData.max_save_seconds = 7 * 86400 // 7天转换为秒
|
||||
} else {
|
||||
formData.max_save_seconds = convertToSeconds(saveTime.value, saveTimeUnit.value)
|
||||
}
|
||||
|
||||
api({
|
||||
url: '/admin/config/update',
|
||||
method: 'patch',
|
||||
data: formData
|
||||
}).then((res: any) => {
|
||||
if (res.code == 200) {
|
||||
alertStore.showAlert('保存成功', 'success')
|
||||
} else {
|
||||
alertStore.showAlert(res.message, 'error')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
refreshData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 h-screen overflow-y-auto custom-scrollbar">
|
||||
<h2 class="text-2xl font-bold mb-6" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
|
||||
系统设置
|
||||
</h2>
|
||||
|
||||
<div
|
||||
class="space-y-6 rounded-lg shadow-md p-6"
|
||||
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
|
||||
>
|
||||
<!-- 基本设置 -->
|
||||
<section class="space-y-4">
|
||||
<h3 class="text-lg font-medium mb-4" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
|
||||
基本设置
|
||||
</h3>
|
||||
|
||||
<!-- 网基本信息 -->
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
网站名称
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="config.name"
|
||||
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
|
||||
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
网站描述
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="config.description"
|
||||
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
|
||||
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
管理员密码
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="password"
|
||||
v-model="config.admin_token"
|
||||
placeholder="留空则不修改密码"
|
||||
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
|
||||
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
|
||||
]"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-3 text-sm text-gray-400"
|
||||
:class="[isDarkMode ? 'text-gray-500' : 'text-gray-400']"
|
||||
>
|
||||
<span class="text-xs">留空则不修改</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
关键词
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="config.keywords"
|
||||
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
|
||||
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
Robots.txt
|
||||
</label>
|
||||
<textarea
|
||||
v-model="config.robotsText"
|
||||
rows="3"
|
||||
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border resize-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
|
||||
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
|
||||
]"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 通知设置 -->
|
||||
<div class="grid grid-cols-1 gap-6 mt-8">
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
通知标题
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="config.notify_title"
|
||||
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
|
||||
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
通知内容
|
||||
</label>
|
||||
<textarea
|
||||
v-model="config.notify_content"
|
||||
rows="3"
|
||||
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border resize-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
|
||||
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
|
||||
]"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 存储设置 -->
|
||||
<div class="mt-8">
|
||||
<h3
|
||||
class="text-lg font-medium mb-4"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
存储设置
|
||||
</h3>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
存储方式
|
||||
</label>
|
||||
<select
|
||||
v-model="config.file_storage"
|
||||
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border appearance-none bg-no-repeat bg-right focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none cursor-pointer"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white hover:border-gray-500'
|
||||
: 'border-gray-300 hover:border-gray-400'
|
||||
]"
|
||||
style="
|
||||
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M7%208l3%203%203-3%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
|
||||
"
|
||||
>
|
||||
<option value="local">本地存储</option>
|
||||
<option value="s3">S3 存储</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- S3 配置 -->
|
||||
<div v-if="config.file_storage === 's3'" class="space-y-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
S3 AccessKeyId
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="config.s3_access_key_id"
|
||||
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
|
||||
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
S3 SecretAccessKey
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
v-model="config.s3_secret_access_key"
|
||||
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
|
||||
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
S3 BucketName
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="config.s3_bucket_name"
|
||||
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
|
||||
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
S3 EndpointUrl
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="config.s3_endpoint_url"
|
||||
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
|
||||
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
S3 Region Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="config.s3_region_name"
|
||||
placeholder="auto"
|
||||
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
|
||||
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
S3 Signature Version
|
||||
</label>
|
||||
<select
|
||||
v-model="config.s3_signature_version"
|
||||
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white hover:border-gray-500'
|
||||
: 'border-gray-300 hover:border-gray-400'
|
||||
]"
|
||||
>
|
||||
<option value="s3v2">S3v2</option>
|
||||
<option value="s3v4">S3v4</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
S3 Hostname
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="config.s3_hostname"
|
||||
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
|
||||
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium mb-2"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
启用代理
|
||||
</label>
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
type="button"
|
||||
@click="config.s3_proxy = config.s3_proxy === 1 ? 0 : 1"
|
||||
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
:class="[config.s3_proxy === 1 ? 'bg-indigo-600' : 'bg-gray-200']"
|
||||
role="switch"
|
||||
:aria-checked="config.s3_proxy === 1"
|
||||
>
|
||||
<span
|
||||
class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
|
||||
:class="[
|
||||
config.s3_proxy === 1 ? 'translate-x-5' : 'translate-x-0',
|
||||
isDarkMode && config.s3_proxy !== 1 ? 'bg-gray-100' : 'bg-white'
|
||||
]"
|
||||
/>
|
||||
</button>
|
||||
<span
|
||||
class="ml-3 text-sm"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
{{ config.s3_proxy === 1 ? '已开启' : '已关闭' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 上传限制 -->
|
||||
<div class="mt-8">
|
||||
<h3
|
||||
class="text-lg font-medium mb-4"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
上传限制
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
每分钟上传限制
|
||||
</label>
|
||||
<div class="flex items-center space-x-2">
|
||||
<input
|
||||
type="number"
|
||||
v-model="config.uploadMinute"
|
||||
class="w-24 rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
|
||||
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
|
||||
]"
|
||||
/>
|
||||
<span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
上传数量限制
|
||||
</label>
|
||||
<div class="flex items-center space-x-2">
|
||||
<input
|
||||
type="number"
|
||||
v-model="config.uploadCount"
|
||||
class="w-24 rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
|
||||
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
|
||||
]"
|
||||
/>
|
||||
<span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">个文件</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
文件大小限制
|
||||
</label>
|
||||
<div class="flex items-center space-x-2">
|
||||
<input
|
||||
type="number"
|
||||
v-model="fileSize"
|
||||
class="w-24 rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
|
||||
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
|
||||
]"
|
||||
/>
|
||||
<select
|
||||
v-model="sizeUnit"
|
||||
class="rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white hover:border-gray-500'
|
||||
: 'border-gray-300 hover:border-gray-400'
|
||||
]"
|
||||
>
|
||||
<option value="KB">KB</option>
|
||||
<option value="MB">MB</option>
|
||||
<option value="GB">GB</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium mb-2"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
过期方式
|
||||
</label>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<label
|
||||
v-for="style in ['day', 'hour', 'minute', 'forever', 'count']"
|
||||
:key="style"
|
||||
class="relative inline-flex items-center group cursor-pointer"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="style"
|
||||
v-model="config.expireStyle"
|
||||
class="peer sr-only"
|
||||
/>
|
||||
<div
|
||||
class="px-4 py-2 rounded-full border-2 transition-all duration-200 select-none"
|
||||
:class="[
|
||||
config.expireStyle.includes(style)
|
||||
? isDarkMode
|
||||
? 'bg-indigo-600 border-indigo-600 text-white'
|
||||
: 'bg-indigo-600 border-indigo-600 text-white'
|
||||
: isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-gray-300 hover:border-indigo-500'
|
||||
: 'bg-white border-gray-300 text-gray-700 hover:border-indigo-500'
|
||||
]"
|
||||
>
|
||||
{{
|
||||
{
|
||||
day: '按天',
|
||||
hour: '按小时',
|
||||
minute: '按分钟',
|
||||
forever: '永久',
|
||||
count: '按次数'
|
||||
}[style]
|
||||
}}
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
最长保存时间
|
||||
</label>
|
||||
<div class="flex items-center space-x-2">
|
||||
<input
|
||||
type="number"
|
||||
v-model="saveTime"
|
||||
class="w-24 rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
|
||||
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
|
||||
]"
|
||||
/>
|
||||
<select
|
||||
v-model="saveTimeUnit"
|
||||
class="rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white hover:border-gray-500'
|
||||
: 'border-gray-300 hover:border-gray-400'
|
||||
]"
|
||||
>
|
||||
<option value="秒">秒</option>
|
||||
<option value="分">分</option>
|
||||
<option value="时">时</option>
|
||||
<option value="天">天</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium mb-2"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
游客上传
|
||||
</label>
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
type="button"
|
||||
@click="config.openUpload = config.openUpload === 1 ? 0 : 1"
|
||||
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
:class="[config.openUpload === 1 ? 'bg-indigo-600' : 'bg-gray-200']"
|
||||
role="switch"
|
||||
:aria-checked="config.openUpload === 1"
|
||||
>
|
||||
<span
|
||||
class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
|
||||
:class="[
|
||||
config.openUpload === 1 ? 'translate-x-5' : 'translate-x-0',
|
||||
isDarkMode && config.openUpload !== 1 ? 'bg-gray-100' : 'bg-white'
|
||||
]"
|
||||
/>
|
||||
</button>
|
||||
<span
|
||||
class="ml-3 text-sm"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
{{ config.openUpload === 1 ? '已开启' : '已关闭' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 错误限制 -->
|
||||
<div class="mt-8">
|
||||
<h3
|
||||
class="text-lg font-medium mb-4"
|
||||
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
|
||||
>
|
||||
错误限制
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
每分钟错误限制
|
||||
</label>
|
||||
<div class="flex items-center space-x-2">
|
||||
<input
|
||||
type="number"
|
||||
v-model="config.errorMinute"
|
||||
class="w-24 rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
|
||||
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
|
||||
]"
|
||||
/>
|
||||
<span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
class="block text-sm font-medium"
|
||||
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
|
||||
>
|
||||
错误次数限制
|
||||
</label>
|
||||
<div class="flex items-center space-x-2">
|
||||
<input
|
||||
type="number"
|
||||
v-model="config.errorCount"
|
||||
class="w-24 rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
|
||||
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
|
||||
]"
|
||||
/>
|
||||
<span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 保存按钮 -->
|
||||
<div class="flex justify-end mt-8">
|
||||
<button
|
||||
@click="submitSave"
|
||||
class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200"
|
||||
>
|
||||
保存设置
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
5
src/vite-env.d.ts
vendored
Normal file
5
src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
declare module '*.vue' {
|
||||
import { ComponentOptions } from 'vue'
|
||||
const componentOptions: ComponentOptions
|
||||
export default componentOptions
|
||||
}
|
||||
12
tailwind.config.js
Normal file
12
tailwind.config.js
Normal file
@ -0,0 +1,12 @@
|
||||
import typography from '@tailwindcss/typography'
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [
|
||||
typography,
|
||||
],
|
||||
}
|
||||
14
tsconfig.app.json
Normal file
14
tsconfig.app.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||
"exclude": ["src/**/__tests__/*"],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
19
tsconfig.json
Normal file
19
tsconfig.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
}
|
||||
],
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
},
|
||||
"noImplicitAny": false,
|
||||
"strict":false
|
||||
}
|
||||
}
|
||||
19
tsconfig.node.json
Normal file
19
tsconfig.node.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"extends": "@tsconfig/node20/tsconfig.json",
|
||||
"include": [
|
||||
"vite.config.*",
|
||||
"vitest.config.*",
|
||||
"cypress.config.*",
|
||||
"nightwatch.conf.*",
|
||||
"playwright.config.*"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"noEmit": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"types": ["node"]
|
||||
}
|
||||
}
|
||||
3
vercel.json
Normal file
3
vercel.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"rewrites": [{ "source": "/:path*", "destination": "/index.html" }]
|
||||
}
|
||||
21
vite.config.ts
Normal file
21
vite.config.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||
import tailwindcss from 'tailwindcss'
|
||||
import autoprefixer from 'autoprefixer'
|
||||
export default defineConfig({
|
||||
plugins: [vue(), vueJsx(), vueDevTools()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
},
|
||||
css: {
|
||||
postcss: {
|
||||
plugins: [tailwindcss, autoprefixer]
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user