13 Commits

Author SHA1 Message Date
keven
3c18fcf8ff 更新 Dockerfile 2025-06-20 17:09:10 +08:00
keven
58403a291a chore: 添加 Prettier 配置文件以统一代码格式 2025-06-14 21:02:26 +08:00
keven
28154d09ad feat: 在文件上传进度视图中添加错误处理和用户提示,优化用户体验 2025-06-14 21:02:05 +08:00
keven
d77fc85fd3 feat: 在文件上传任务中添加存储空间检查,确保不超过最大本地存储限制 2025-06-12 23:50:24 +08:00
keven
c971e92905 chore: 移除不再使用的依赖项,包括 go-socket.io 和其他间接依赖,以优化项目的依赖管理 2025-06-12 22:48:06 +08:00
keven1024
a484f8926b refactor: update import paths to use alias and improve layout in result components for better readability 2025-06-08 17:53:26 +08:00
keven1024
bee32be989 feat: add QR code generation component and enhance file sharing result display with improved information layout 2025-06-08 17:39:13 +08:00
keven1024
ba7a648cbe refactor: enhance file sharing functionality by implementing token caching and improving error handling in download processes 2025-06-08 16:23:14 +08:00
keven1024
a0de112853 feat: add error component with localized back to home button for improved user experience 2025-06-06 20:23:06 +08:00
keven1024
ddcf53d456 fix: update default layout image source to a new dynamic URL for improved content delivery 2025-06-06 20:01:45 +08:00
keven1024
bbd451f027 fix: remove husky postinstall script from package.json and update dependencies in pnpm-lock.yaml for improved compatibility 2025-06-03 14:41:00 +08:00
keven1024
edf0fe471d fix: update package.json dependencies and refactor share composables for improved functionality 2025-06-03 14:30:41 +08:00
keven1024
3eee404868 fix: update Dockerfile to install dependencies before deploying frontend, and remove project title and description from environment variables 2025-06-03 11:40:54 +08:00
25 changed files with 3375 additions and 1945 deletions

9
.prettierrc Normal file
View File

@@ -0,0 +1,9 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true,
"printWidth": 150,
"jsxBracketSameLine": false,
"bracketSameLine": false
}

View File

@@ -2,10 +2,10 @@ FROM node:22-alpine AS front-base
# Install dependencies only when needed
FROM front-base AS front-deps
RUN apk add --no-cache libc6-compat
RUN apk add --no-cache gcompat
WORKDIR /app
COPY . .
RUN corepack enable pnpm && pnpm --filter=015-front deploy dist
RUN corepack enable pnpm && pnpm i && pnpm --filter=015-front deploy dist
FROM front-base AS front-builder
@@ -41,7 +41,7 @@ COPY 015.sh /app/015.sh
# Change the port and host
ENV PORT=80 HOST=0.0.0.0
ENV SITE_URL="http://localhost" SITE_TITLE="015" SITE_DESC="015 是一个开源的临时内容分享平台项目, 支持文件和文本上传, 下载, 分享"
ENV SITE_URL="http://localhost"
ENV UPLOAD_PATH="/uploads"
EXPOSE 80

View File

@@ -6,7 +6,6 @@ require (
dario.cat/mergo v1.0.1
github.com/dustin/go-humanize v1.0.1
github.com/golang-jwt/jwt/v5 v5.2.2
github.com/googollee/go-socket.io v1.7.0
github.com/gorilla/sessions v1.4.0
github.com/hibiken/asynq v0.25.1
github.com/labstack/echo-contrib v0.17.3
@@ -24,13 +23,10 @@ require (
github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f // indirect
github.com/fsnotify/fsnotify v1.8.0 // indirect
github.com/go-viper/mapstructure/v2 v2.2.1 // indirect
github.com/gofrs/uuid v4.0.0+incompatible // indirect
github.com/gomodule/redigo v1.8.4 // indirect
github.com/google/go-cmp v0.7.0 // indirect
github.com/google/uuid v1.6.0 // indirect
github.com/gorilla/context v1.1.2 // indirect
github.com/gorilla/securecookie v1.1.2 // indirect
github.com/gorilla/websocket v1.4.2 // indirect
github.com/labstack/gommon v0.4.2 // indirect
github.com/mattn/go-colorable v0.1.14 // indirect
github.com/mattn/go-isatty v0.0.20 // indirect

View File

@@ -6,7 +6,6 @@ github.com/bsm/gomega v1.27.10 h1:yeMWxP2pV2fG3FgAODIY8EiRE3dy0aeFYt4l7wh6yKA=
github.com/bsm/gomega v1.27.10/go.mod h1:JyEr/xRbxbtgWNi8tIEVPUYZ5Dzef52k01W3YH0H+O0=
github.com/cespare/xxhash/v2 v2.3.0 h1:UL815xU9SqsFlibzuggzjXhog7bL6oX9BbNZnL2UFvs=
github.com/cespare/xxhash/v2 v2.3.0/go.mod h1:VGX0DQ3Q6kWi7AoAeZDth3/j3BFtOZR5XLFGgcrjCOs=
github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f h1:lO4WD4F/rVNCu3HqELle0jiPLLBs70cWOduZpkS1E78=
@@ -19,28 +18,20 @@ github.com/fsnotify/fsnotify v1.8.0 h1:dAwr6QBTBZIkG8roQaJjGof0pp0EeF+tNV7YBP3F/
github.com/fsnotify/fsnotify v1.8.0/go.mod h1:8jBTzvmWwFyi3Pb8djgCCO5IBqzKJ/Jwo8TRcHyHii0=
github.com/go-viper/mapstructure/v2 v2.2.1 h1:ZAaOCxANMuZx5RCeg0mBdEZk7DZasvvZIxtHqx8aGss=
github.com/go-viper/mapstructure/v2 v2.2.1/go.mod h1:oJDH3BJKyqBA2TXFhDsKDGDTlndYOZ6rGS0BRZIxGhM=
github.com/gofrs/uuid v4.0.0+incompatible h1:1SD/1F5pU8p29ybwgQSwpQk+mwdRrXCYuPhW6m+TnJw=
github.com/gofrs/uuid v4.0.0+incompatible/go.mod h1:b2aQJv3Z4Fp6yNu3cdSllBxTCLRxnplIgP/c0N/04lM=
github.com/golang-jwt/jwt/v5 v5.2.2 h1:Rl4B7itRWVtYIHFrSNd7vhTiz9UpLdi6gZhZ3wEeDy8=
github.com/golang-jwt/jwt/v5 v5.2.2/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
github.com/gomodule/redigo v1.8.4 h1:Z5JUg94HMTR1XpwBaSH4vq3+PNSIykBLxMdglbw10gg=
github.com/gomodule/redigo v1.8.4/go.mod h1:P9dn9mFrCBvWhGE1wpxx6fgq7BAeLBk+UUUzlpkBYO0=
github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8=
github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU=
github.com/google/gofuzz v1.2.0 h1:xRy4A+RhZaiKjJ1bPfwQ8sedCA+YS2YcCHW6ec7JMi0=
github.com/google/gofuzz v1.2.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
github.com/googollee/go-socket.io v1.7.0 h1:ODcQSAvVIPvKozXtUGuJDV3pLwdpBLDs1Uoq/QHIlY8=
github.com/googollee/go-socket.io v1.7.0/go.mod h1:0vGP8/dXR9SZUMMD4+xxaGo/lohOw3YWMh2WRiWeKxg=
github.com/gorilla/context v1.1.2 h1:WRkNAv2uoa03QNIc1A6u4O7DAGMUVoopZhkiXWA2V1o=
github.com/gorilla/context v1.1.2/go.mod h1:KDPwT9i/MeWHiLl90fuTgrt4/wPcv75vFAZLaOOcbxM=
github.com/gorilla/securecookie v1.1.2 h1:YCIWL56dvtr73r6715mJs5ZvhtnY73hBvEF8kXD8ePA=
github.com/gorilla/securecookie v1.1.2/go.mod h1:NfCASbcHqRSY+3a8tlWJwsQap2VX5pwzwo4h3eOamfo=
github.com/gorilla/sessions v1.4.0 h1:kpIYOp/oi6MG/p5PgxApU8srsSw9tuFbt46Lt7auzqQ=
github.com/gorilla/sessions v1.4.0/go.mod h1:FLWm50oby91+hl7p/wRxDth9bWSuk0qVL2emc7lT5ik=
github.com/gorilla/websocket v1.4.2 h1:+/TMaTYc4QFitKJxsQ7Yye35DkWvkdLcvGKqM+x0Ufc=
github.com/gorilla/websocket v1.4.2/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
github.com/hibiken/asynq v0.25.1 h1:phj028N0nm15n8O2ims+IvJ2gz4k2auvermngh9JhTw=
github.com/hibiken/asynq v0.25.1/go.mod h1:pazWNOLBu0FEynQRBvHA26qdIKRSmfdIfUm4HdsLmXg=
github.com/kr/pretty v0.3.1 h1:flRD4NNwYAUpkphVc1HcthR4KEIFJ65n8Mw5qdRn3LE=
@@ -85,8 +76,6 @@ github.com/spf13/pflag v1.0.6 h1:jFzHGLGAlb3ruxLB8MhbI6A8+AQX/2eW4qeyNZXNp2o=
github.com/spf13/pflag v1.0.6/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
github.com/spf13/viper v1.20.1 h1:ZMi+z/lvLyPSCoNtFCpqjy0S4kPbirhpTMwl8BkW9X4=
github.com/spf13/viper v1.20.1/go.mod h1:P9Mdzt1zoHIG8m2eZQinpiBjo6kCmZSKBClNNqjJvu4=
github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
github.com/stretchr/testify v1.5.1/go.mod h1:5W2xD1RspED5o8YsWQXVCued0rvSQ+mT+I5cxcmMvtA=
github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
github.com/subosito/gotenv v1.6.0 h1:9NlTDc1FTs4qu0DDq7AEtTPNw6SVm7uBMsUCUjABIf8=
@@ -117,7 +106,5 @@ google.golang.org/protobuf v1.36.5/go.mod h1:9fA7Ob0pmnwhb644+1+CVWFRbNajQ6iRojt
gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
gopkg.in/check.v1 v1.0.0-20200227125254-8fa46927fb4f h1:BLraFXnmrev5lT+xlilqcH8XK9/i0At2xKjWk4p6zsU=
gopkg.in/check.v1 v1.0.0-20200227125254-8fa46927fb4f/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
gopkg.in/yaml.v2 v2.2.4/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

View File

@@ -14,6 +14,7 @@ import (
"github.com/hibiken/asynq"
"github.com/labstack/echo/v4"
"github.com/spf13/cast"
)
func CreateUploadTask(c echo.Context) error {
@@ -40,6 +41,25 @@ func CreateUploadTask(c echo.Context) error {
"chunk_size": fileInfo.ChunkSize,
})
}
maxStorageSize := cast.ToInt64(utils.GetEnv("MAX_LOCALSTORAGE_SIZE"))
fileInfoMap, err := models.GetRedisFileInfoAll()
if err != nil {
return utils.HTTPErrorHandler(c, err)
}
totalSize := int64(0)
for _, value := range fileInfoMap {
var fileInfo models.RedisFileInfo
err := json.Unmarshal([]byte(value), &fileInfo)
if err != nil {
return utils.HTTPErrorHandler(c, err)
}
totalSize += fileInfo.FileSize
}
if totalSize+r.FileSize > maxStorageSize {
return utils.HTTPErrorHandler(c, errors.New("存储空间不足"))
}
ChunkSize := int64(1 * 1024 * 1024)
if r.FileSize > 500*1024*1024 {
ChunkSize = r.FileSize / 500
@@ -56,7 +76,7 @@ func CreateUploadTask(c echo.Context) error {
CreatedAt: time.Now().Unix(),
Expire: uploadTaskExpire,
}
err := models.SetRedisFileInfo(fileId, newFileInfo)
err = models.SetRedisFileInfo(fileId, newFileInfo)
if err != nil {
return utils.HTTPErrorHandler(c, err)
}

View File

@@ -0,0 +1,20 @@
<script setup lang="ts">
import QRCode from "qrcode";
const props = defineProps<{
hide: () => void;
data: any;
}>();
const { state } = useAsyncState(async () => {
return await QRCode.toDataURL(props.data);
}, null);
</script>
<template>
<div class="flex flex-col gap-5">
<div class="text-xl font-bold">分享二维码</div>
<div class="flex flex-row justify-center">
<img :src="state" v-if="!!state" />
<Skeleton class="size-20" v-else />
</div>
</div>
</template>

View File

@@ -1,11 +1,11 @@
<script lang="ts" setup>
import CircularProgress from '@/components/CircularProgress.vue'
import { chunk, shuffle, times } from 'lodash-es';
import { chunk, shuffle, times } from 'lodash-es'
import { cx } from 'class-variance-authority'
import calcFileHash from '@/lib/calcFileHash';
import { filesize } from 'filesize';
import calcFileHash from '@/lib/calcFileHash'
import { filesize } from 'filesize'
const props = defineProps<{
data: { file: File, config: any, handle_type: string }
data: { file: File; config: any; handle_type: string }
}>()
const emit = defineEmits<{
@@ -17,19 +17,21 @@ const form = useFormContext()
const step = ref<'hash' | 'upload'>('hash')
const calcHashTime = ref(0)
const chunkSize = ref(0)
const fileSliceUploadStatusList = ref<{
status: string
index: number
}[]>([])
const fileSliceUploadStatusList = ref<
{
status: string
index: number
}[]
>([])
const successCount = computed(() => fileSliceUploadStatusList.value.filter((item) => item.status === 'success').length)
const alreadyUploadSize = computed(() => successCount.value * chunkSize.value)
const uploadProgress = computed(() => Math.round(alreadyUploadSize.value / (props?.data?.file?.size || 0) * 100))
const uploadProgress = computed(() => Math.round((alreadyUploadSize.value / (props?.data?.file?.size || 0)) * 100))
useAsyncState(async () => {
const { file } = props.data || {}
if (!file) return
const { size, type } = file || {}
const { size, type = 'application/octet-stream' } = file || {}
const now = Date.now()
const hash = await calcFileHash({ file })
if (hash) {
@@ -49,68 +51,70 @@ useAsyncState(async () => {
size,
mime_type: type,
hash,
}
},
})
const { id, chunk_size, type: createType } = createData?.data || {}
if (createType !== 'init') {
// 文件存在
form.setFieldValue('file_id', id)
emit('change', 'result')
return;
return
}
chunkSize.value = chunk_size
const chunks = Math.ceil(size / chunk_size);
const chunks = Math.ceil(size / chunk_size)
fileSliceUploadStatusList.value = times(chunks, (i) => ({
status: 'pending',
index: i
index: i,
}))
const readChunk = (start: number): Promise<ArrayBuffer> => {
const fileReader = new FileReader();
const fileReader = new FileReader()
return new Promise((resolve, reject) => {
const chunk = file.slice(start, start + chunk_size);
fileReader.onload = (e) => resolve(e.target?.result as ArrayBuffer);
fileReader.onerror = reject;
fileReader.readAsArrayBuffer(chunk);
});
};
const chunk = file.slice(start, start + chunk_size)
fileReader.onload = (e) => resolve(e.target?.result as ArrayBuffer)
fileReader.onerror = reject
fileReader.readAsArrayBuffer(chunk)
})
}
const chunkedUploadTasks = chunk(shuffle([...fileSliceUploadStatusList.value]), 3)
for (let i = 0; i < chunkedUploadTasks?.length; i++) {
await Promise.all(chunkedUploadTasks?.[i]?.map(async (item: any) => {
const { index } = item || {}
try {
const chunk = await readChunk(index * chunk_size);
// console.log('chunk', chunk)
const formData = new FormData()
formData.append('file', new Blob([chunk]))
formData.append('index', index + 1)
formData.append('id', id)
fileSliceUploadStatusList.value[index].status = 'uploading'
const res = await $fetch<{
code: number
}>('/api/file/slice', {
method: 'POST',
body: formData
})
const { code } = res || {}
if (code !== 200) {
throw new Error('上传失败')
await Promise.all(
chunkedUploadTasks?.[i]?.map(async (item: any) => {
const { index } = item || {}
try {
const chunk = await readChunk(index * chunk_size)
// console.log('chunk', chunk)
const formData = new FormData()
formData.append('file', new Blob([chunk]))
formData.append('index', index + 1)
formData.append('id', id)
fileSliceUploadStatusList.value[index].status = 'uploading'
const res = await $fetch<{
code: number
}>('/api/file/slice', {
method: 'POST',
body: formData,
})
const { code } = res || {}
if (code !== 200) {
throw new Error('上传失败')
}
fileSliceUploadStatusList.value[index].status = 'success'
} catch (error) {
console.log('error', error)
// fileSliceStatusList.value[index].status = 'error'
}
fileSliceUploadStatusList.value[index].status = 'success'
} catch (error) {
console.log('error', error)
// fileSliceStatusList.value[index].status = 'error'
}
}))
})
)
}
const r = await $fetch<{
code: number
}>('/api/file/finish', {
method: 'POST',
body: {
id
}
id,
},
})
if (r?.code !== 200) {
throw new Error('上传失败')
@@ -124,7 +128,6 @@ useAsyncState(async () => {
<div class="text-xl font-normal">正在上传</div>
<div class="flex flex-col items-center gap-4 md:flex-row md:justify-evenly">
<div :class="cx('flex flex-row items-center gap-5', step !== 'hash' && 'opacity-50')">
<div class="flex flex-col gap-0.5 items-center">
<div class="text-xs opacity-50">1.计算hash</div>
<div class="text-3xl font-light">
@@ -138,21 +141,30 @@ useAsyncState(async () => {
<div class="flex flex-col gap-0.5 items-center">
<div class="text-xs opacity-50">2.上传文件</div>
<div class="text-3xl font-light">{{ step !== 'upload' ? 0 : uploadProgress }}%</div>
<div class="text-sm opacity-50" v-if="alreadyUploadSize">{{ filesize(alreadyUploadSize) }} / {{ filesize(data?.file?.size) }}</div>
<div class="text-sm opacity-50" v-if="alreadyUploadSize">
{{ filesize(alreadyUploadSize) }} / {{ filesize(data?.file?.size) }}
</div>
</div>
</div>
</div>
<div class="flex flex-row gap-2 items-baseline">
<div class="text-md font-normal">详细信息</div>
<div class="text-xs opacity-50" v-if="step === 'upload' && fileSliceUploadStatusList?.length > 0">当前正在上传分块{{ `${successCount}/${Math.ceil(data?.file?.size / chunkSize)}` }} 并发:3</div>
<div class="text-xs opacity-50" v-if="step === 'upload' && fileSliceUploadStatusList?.length > 0">
当前正在上传分块{{ `${successCount}/${Math.ceil(data?.file?.size / chunkSize)}` }} 并发:3
</div>
</div>
<div class="flex flex-row flex-wrap gap-1">
<div v-for="i in fileSliceUploadStatusList" :class="cx('rounded size-4 ',
i.status === 'pending' && 'bg-white/90',
i.status === 'uploading' && 'bg-yellow-500',
i.status === 'success' && 'bg-green-500',
)" />
<div
v-for="i in fileSliceUploadStatusList"
:class="
cx(
'rounded size-4 ',
i.status === 'pending' && 'bg-white/90',
i.status === 'uploading' && 'bg-yellow-500',
i.status === 'success' && 'bg-green-500'
)
"
/>
</div>
</div>
</template>
</template>

View File

@@ -5,14 +5,23 @@ import { Input } from "@/components/ui/input";
import { useClipboard } from "@vueuse/core";
import { toast } from "vue-sonner";
import { useQuery } from "@tanstack/vue-query";
import useAppShare from "@/composables/useShare";
import useMyAppShare from "@/composables/useMyAppShare";
import useMyAppConfig from "@/composables/useMyAppConfig";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import "dayjs/locale/zh-cn"; // 导入中文语言包
import showDrawer from "@/lib/showDrawer";
import QrCoreDrawer from "@/components/Drawer/QrCoreDrawer.vue";
dayjs.extend(relativeTime); // 扩展 relativeTime 插件
dayjs.locale("zh-cn"); // 设置语言为中文
const props = defineProps<{
data: { file: File; config: any; handle_type: string; file_id: string };
}>();
const emit = defineEmits<{
(e: "change", key: string): void;
}>();
const { createFileShare } = useAppShare();
const { createFileShare } = useMyAppShare();
const { data } = useQuery({
queryKey: ["create-share", props?.data?.file_id],
queryFn: async () => {
@@ -27,7 +36,7 @@ const { data } = useQuery({
},
});
const appConfig = useAppConfig();
const appConfig = useMyAppConfig();
const url = computed(() => {
const { id } = data?.value || {};
return `${appConfig?.value?.site_url}/s/${id}`;
@@ -43,28 +52,92 @@ const { copy } = useClipboard();
<div class="flex flex-col h-30 items-center">
<FilePreviewView :value="props?.data?.file" />
</div>
<div class="flex flex-row gap-2">
<Input v-model="url" class="bg-white/70" />
<Button
variant="outline"
class="bg-white/70"
size="icon"
@click="
() => {
copy(url);
toast.success('复制成功');
}
"
>
<LucideCopy />
</Button>
<div
class="flex flex-col md:flex-row gap-5 rounded-md p-5 bg-white/20 backdrop-blur-xl w-full"
>
<div class="flex flex-col gap-2 flex-1">
<div class="text-sm font-semibold">信息</div>
<div class="grid grid-cols-2 gap-2">
<div class="rounded-xl flex flex-col bg-black/10 px-3 py-2 gap-1">
<div class="text-xs font-semibold">下载次数</div>
<div class="text-3xl font-light">{{ data?.download_nums }}</div>
</div>
<div class="rounded-xl flex flex-col bg-black/5 px-3 py-2 gap-1">
<div class="text-xs font-semibold">过期时间</div>
<div class="text-md font-light">
{{
dayjs(data?.expire_at * 1000).format("YYYY-MM-DD HH:mm:ss")
}}
</div>
</div>
<div
class="rounded-xl flex flex-col bg-black/10 px-3 py-2 gap-1"
v-if="data?.pickup_code"
>
<div class="flex flex-row justify-between w-full items-center">
<div class="text-xs font-semibold">提取码</div>
<Button
variant="outline"
class="bg-white/70 p-0 size-6"
size="icon"
@click="
() => {
copy(data?.pickup_code);
toast.success('复制成功');
}
"
>
<LucideCopy class="size-3" />
</Button>
</div>
<div class="flex flex-row gap-2">
<div v-for="s in data?.pickup_code" class="text-2xl font-light">
{{ s }}
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-5 flex-1">
<div class="text-sm font-semibold">链接</div>
<div class="flex flex-row gap-2">
<Input v-model="url" class="bg-white/70" readonly />
<Button
variant="outline"
class="bg-white/70"
size="icon"
@click="
() => {
copy(url);
toast.success('复制成功');
}
"
>
<LucideCopy />
</Button>
<Button variant="outline" class="bg-white/70" size="icon">
<LucideQrCode />
</Button>
<Button
variant="outline"
class="bg-white/70"
size="icon"
@click="
() => {
showDrawer({
render: ({ ...rest }) =>
h(QrCoreDrawer, {
...rest,
data: url,
}),
});
}
"
>
<LucideQrCode />
</Button>
</div>
</div>
</div>
<Button
variant="ghost"
class="hover:bg-white/50 w-40"
@click="
() => {

View File

@@ -3,7 +3,7 @@ import { useQuery } from "@tanstack/vue-query";
import { AsyncButton, Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { filesize } from "filesize";
import useAppShare from "~/composables/useShare";
import useMyAppShare from "@/composables/useMyAppShare";
import { toast } from "vue-sonner";
const emit = defineEmits<{
(e: "change", key: string): void;
@@ -63,7 +63,7 @@ const { data: taskData, refetch } = useQuery({
enabled: !!taskId.value,
});
const { downloadFile, createFileShare } = useAppShare();
const { downloadFile, createFileShare } = useMyAppShare();
const { counter, pause } = useInterval(2000, { controls: true });

View File

@@ -4,7 +4,10 @@ import { Input } from "@/components/ui/input";
import { useClipboard } from "@vueuse/core";
import { toast } from "vue-sonner";
import { useQuery } from "@tanstack/vue-query";
import useAppShare from "@/composables/useShare";
import useMyAppShare from "@/composables/useMyAppShare";
import useMyAppConfig from "@/composables/useMyAppConfig";
import showDrawer from "@/lib/showDrawer";
import QrCoreDrawer from "@/components/Drawer/QrCoreDrawer.vue";
const props = defineProps<{
data: { text: string; config: any; handle_type: string };
@@ -14,7 +17,7 @@ const emit = defineEmits<{
(e: "change", key: string): void;
}>();
const { createTextShare } = useAppShare();
const { createTextShare } = useMyAppShare();
const { data } = useQuery({
queryKey: ["create-share", props?.data?.text],
queryFn: async () => {
@@ -26,7 +29,7 @@ const { data } = useQuery({
return data?.data;
},
});
const appConfig = useAppConfig();
const appConfig = useMyAppConfig();
const url = computed(() => {
const { id } = data?.value || {};
return `${appConfig?.value?.site_url}/s/${id}`;
@@ -37,9 +40,9 @@ const { copy } = useClipboard();
<template>
<div class="flex flex-col gap-3">
<div class="flex flex-row justify-between">
<h2 class="text-lg">分享成功</h2>
<div class="flex flex-row gap-2 basis-1/2">
<div class="flex flex-col md:flex-row gap-2">
<div class="flex flex-row justify-between md:basis-1/2">
<h2 class="text-lg">分享成功</h2>
<Button
variant="outline"
class="bg-white/70"
@@ -52,7 +55,9 @@ const { copy } = useClipboard();
>
<LucideHome />
</Button>
<Input v-model="url" class="bg-white/70" />
</div>
<div class="flex flex-row gap-2 flex-1">
<Input v-model="url" class="bg-white/70" readonly />
<Button
variant="outline"
class="bg-white/70"
@@ -66,13 +71,28 @@ const { copy } = useClipboard();
>
<LucideCopy />
</Button>
<Button variant="outline" class="bg-white/70" size="icon">
<Button
variant="outline"
class="bg-white/70"
size="icon"
@click="
() => {
showDrawer({
render: ({ ...rest }) =>
h(QrCoreDrawer, {
...rest,
data: url,
}),
});
}
"
>
<LucideQrCode />
</Button>
</div>
</div>
<div
class="prose rounded-md bg-white/70 p-3 w-full max-w-full"
class="prose rounded-md bg-white/70 p-3 w-full max-w-full min-h-[30vh]"
v-html="props?.data?.text"
/>
</div>

View File

@@ -1,73 +1,69 @@
<script setup lang="ts">
import AsyncButton from '@/components/ui/button/AsyncButton.vue'
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';
import { isBoolean } from 'lodash-es';
import { LucideCheck, LucideX } from 'lucide-vue-next';
import { useQueryClient } from '@tanstack/vue-query';
dayjs.extend(duration)
dayjs.extend(relativeTime)
import AsyncButton from "@/components/ui/button/AsyncButton.vue";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";
import relativeTime from "dayjs/plugin/relativeTime";
import { isBoolean } from "lodash-es";
import { LucideCheck, LucideX } from "lucide-vue-next";
import { useQueryClient } from "@tanstack/vue-query";
dayjs.extend(duration);
dayjs.extend(relativeTime);
const props = defineProps<{
data: any
}>()
data: any;
}>();
const queryClient = useQueryClient()
const queryClient = useQueryClient();
const { downloadFile } = useMyAppShare();
const handleDownload = async () => {
const { id } = props?.data || {}
const data = await $fetch<{
code: number
data: {
token?: string
}
}>(`/api/download`, {
method: 'POST',
body: {
share_id: id
}
})
const { token } = data?.data || {}
if (!token) {
return
}
(window as any)?.open(`/api/download?token=${token}`)
queryClient.invalidateQueries({ queryKey: ['share', id] })
}
const { id } = props?.data || {};
await downloadFile(id);
queryClient.invalidateQueries({ queryKey: ["share", id] });
};
const expireSeconds = computed(() => {
return dayjs(props?.data?.expire_at * 10e2).unix() - dayjs().unix()
})
return dayjs(props?.data?.expire_at * 10e2).unix() - dayjs().unix();
});
const { remaining, start} = useCountdown(expireSeconds.value)
const { remaining, start } = useCountdown(expireSeconds.value);
onMounted(() => {
start()
})
start();
});
const fileShareInfo = computed(() => {
return [
{ label: '需要密码', value: props?.data?.has_password ?? false },
{ label: '过期时间', value: dayjs.duration(remaining.value, 'seconds').format(`D天 HH:mm:ss`) },
{ label: '剩余下载次数', value: props?.data?.download_nums ?? 0 },
]
})
return [
{ label: "需要密码", value: props?.data?.has_password ?? false },
{
label: "过期时间",
value: dayjs.duration(remaining.value, "seconds").format(`D天 HH:mm:ss`),
},
{ label: "剩余下载次数", value: props?.data?.download_nums ?? 0 },
];
});
</script>
<template>
<div class="flex flex-col gap-5 items-center">
<h1 class="text-xl font-bold">下载文件</h1>
<FilePreviewView :value="props?.data" />
<div class="flex flex-col gap-2 md:flex-row w-full">
<div class="flex flex-row md:flex-col md:gap-1 justify-between items-center md:flex-1" v-for="item in fileShareInfo">
<div class="text-xs opacity-75">{{ item?.label }}</div>
<component v-if="isBoolean(item?.value)" :is="item?.value ? LucideCheck : LucideX" class="size-6" />
<div v-else class="md:text-xl">{{ item?.value }}</div>
</div>
</div>
<div class="w-full">
<AsyncButton @click="handleDownload" class="w-full">下载</AsyncButton>
</div>
<div class="flex flex-col gap-5 items-center">
<h1 class="text-xl font-bold">下载文件</h1>
<FilePreviewView :value="props?.data" />
<div class="flex flex-col gap-2 md:flex-row w-full">
<div
class="flex flex-row md:flex-col md:gap-1 justify-between items-center md:flex-1"
v-for="item in fileShareInfo"
>
<div class="text-xs opacity-75">{{ item?.label }}</div>
<component
v-if="isBoolean(item?.value)"
:is="item?.value ? LucideCheck : LucideX"
class="size-6"
/>
<div v-else class="md:text-xl">{{ item?.value }}</div>
</div>
</div>
</template>
<div class="w-full">
<AsyncButton @click="handleDownload" class="w-full">下载</AsyncButton>
</div>
</div>
</template>

View File

@@ -1,87 +1,93 @@
<script setup lang="ts">
import dayjs from 'dayjs';
import AsyncButton from '@/components/ui/button/AsyncButton.vue'
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';
import { isBoolean } from 'lodash-es';
import { LucideCheck, LucideX } from 'lucide-vue-next';
import { cx } from 'class-variance-authority';
import { toast } from 'vue-sonner';
import MarkdownRender from '@/components/MarkdownRender.vue'
dayjs.extend(duration)
dayjs.extend(relativeTime)
import dayjs from "dayjs";
import AsyncButton from "@/components/ui/button/AsyncButton.vue";
import duration from "dayjs/plugin/duration";
import relativeTime from "dayjs/plugin/relativeTime";
import { isBoolean } from "lodash-es";
import { LucideCheck, LucideX } from "lucide-vue-next";
import { cx } from "class-variance-authority";
import { toast } from "vue-sonner";
import MarkdownRender from "@/components/MarkdownRender.vue";
dayjs.extend(duration);
dayjs.extend(relativeTime);
const props = defineProps<{
data: any
}>()
data: any;
}>();
const { getShareToken } = useMyAppShare();
const expireSeconds = computed(() => {
return dayjs(props?.data?.expire_at * 10e2).unix() - dayjs().unix()
})
return dayjs(props?.data?.expire_at * 10e2).unix() - dayjs().unix();
});
const { remaining, start } = useCountdown(expireSeconds.value)
const { remaining, start } = useCountdown(expireSeconds.value);
onMounted(() => {
start()
})
start();
});
const fileShareInfo = computed(() => {
return [
{ label: '需要密码', value: props?.data?.has_password ?? false },
{ label: '过期时间', value: dayjs.duration(remaining.value, 'seconds').format(`D天 HH:mm:ss`) },
{ label: '剩余浏览次数', value: props?.data?.download_nums ?? 0 },
]
})
const previewText = ref<string | null>(null)
return [
{ label: "需要密码", value: props?.data?.has_password ?? false },
{
label: "过期时间",
value: dayjs.duration(remaining.value, "seconds").format(`D天 HH:mm:ss`),
},
{ label: "剩余浏览次数", value: props?.data?.download_nums ?? 0 },
];
});
const previewText = ref<string | null>(null);
const handlePreview = async () => {
try {
const { id } = props?.data || {}
const data = await $fetch<{
code: number
data: {
token?: string
}
}>(`/api/download`, {
method: 'POST',
body: {
share_id: id
}
})
const { token } = data?.data || {}
if (!token) {
return
}
const r = await $fetch<{
code: number
data: {
data: string
}
}>(`/api/download?token=${token}`)
previewText.value = r?.data?.data
} catch (error) {
toast.error(error?.data?.message || '获取失败')
}
}
try {
const token = await getShareToken(props?.data?.id);
const r = await $fetch<{
code: number;
data: {
data: string;
};
}>(`/api/download?token=${token}`);
previewText.value = r?.data?.data;
} catch (error) {
toast.error((error as any)?.data?.message || error);
}
};
</script>
<template>
<div :class="cx('flex flex-col max-h-full', !!previewText ? 'gap-3' : 'gap-16 items-center')">
<h1 class="text-xl">查看文本</h1>
<template v-if="!previewText">
<div class="flex flex-col gap-2 md:flex-row w-full">
<div class="flex flex-row md:flex-col md:gap-1 justify-between items-center md:flex-1"
v-for="item in fileShareInfo">
<div class="text-xs opacity-75">{{ item?.label }}</div>
<component v-if="isBoolean(item?.value)" :is="item?.value ? LucideCheck : LucideX" class="size-6" />
<div v-else class="md:text-xl">{{ item?.value }}</div>
</div>
</div>
<div class="w-full">
<AsyncButton @click="handlePreview" class="w-full">浏览</AsyncButton>
</div>
</template>
<template v-else>
<MarkdownRender :markdown="previewText" class="rounded-md bg-white/70 p-3 w-full max-w-full min-h-80 overflow-y-auto" />
</template>
</div>
</template>
<div
:class="
cx(
'flex flex-col max-h-full',
!!previewText ? 'gap-3' : 'gap-16 items-center',
)
"
>
<h1 class="text-xl">查看文本</h1>
<template v-if="!previewText">
<div class="flex flex-col gap-2 md:flex-row w-full">
<div
class="flex flex-row md:flex-col md:gap-1 justify-between items-center md:flex-1"
v-for="item in fileShareInfo"
>
<div class="text-xs opacity-75">{{ item?.label }}</div>
<component
v-if="isBoolean(item?.value)"
:is="item?.value ? LucideCheck : LucideX"
class="size-6"
/>
<div v-else class="md:text-xl">{{ item?.value }}</div>
</div>
</div>
<div class="w-full">
<AsyncButton @click="handlePreview" class="w-full">浏览</AsyncButton>
</div>
</template>
<template v-else>
<MarkdownRender
:markdown="previewText"
class="rounded-md bg-white/70 p-3 w-full max-w-full min-h-80 overflow-y-auto"
/>
</template>
</div>
</template>

View File

@@ -1,6 +0,0 @@
const useAppConfig = () => {
const { data } = useFetch('/config')
return data
}
export default useAppConfig

View File

@@ -0,0 +1,6 @@
const useMyAppConfig = () => {
const { data } = useFetch("/config");
return data;
};
export default useMyAppConfig;

View File

@@ -0,0 +1,98 @@
import { toast } from "vue-sonner";
let shareIdTokenMap: WeakMap<{ share_id: string }, string>;
const getShareToken = async (share_id: string): Promise<string | undefined> => {
if (!shareIdTokenMap) {
shareIdTokenMap = new WeakMap();
}
let token = shareIdTokenMap.get({ share_id });
if (!token) {
const data = await $fetch<{
code: number;
message: string;
data: {
token?: string;
};
}>(`/api/download`, {
method: "POST",
body: {
share_id,
},
});
if (!data?.data?.token) {
throw new Error(data?.message || "获取token失败");
}
token = data.data.token;
shareIdTokenMap.set({ share_id }, token);
}
return token;
};
const downloadFile = async (share_id: string) => {
try {
const token = await getShareToken(share_id);
if (!token) {
throw new Error("获取token失败");
return;
}
(window as any)?.open(`/api/download?token=${token}`);
} catch (e) {
toast.error((e as any)?.data?.message || e);
}
};
const createShare = async (data: any) => {
return await $fetch<{
code: number;
data: {
id?: string;
};
}>(`/api/share`, {
method: "POST",
body: data,
});
};
const createFileShare = async (data: {
file_id: string;
config: {
download_nums: number;
expire_time: number;
has_pickup_code?: boolean;
has_password?: boolean;
pickup_code?: string;
password?: string;
notify_email?: string;
};
file_name: string;
}) => {
const { file_id, config, file_name } = data || {};
return await createShare({
type: "file",
data: file_id,
config,
file_name,
});
};
const createTextShare = async (data: { text: string; config: any }) => {
const { text, config } = data || {};
return await createShare({
type: "text",
data: text,
config,
});
};
const useMyAppShare = () => {
return {
downloadFile,
createShare,
createFileShare,
createTextShare,
getShareToken,
};
};
export default useMyAppShare;

View File

@@ -1,72 +0,0 @@
const downloadFile = async (share_id: string) => {
const data = await $fetch<{
code: number;
data: {
token?: string;
};
}>(`/api/download`, {
method: "POST",
body: {
share_id,
},
});
const { token } = data?.data || {};
if (!token) {
return;
}
(window as any)?.open(`/api/download?token=${token}`);
};
const createShare = async (data: any) => {
return await $fetch<{
code: number;
data: {
id?: string;
};
}>(`/api/share`, {
method: "POST",
body: data,
});
};
const createFileShare = async (data: {
file_id: string;
config: {
download_nums: number;
expire_time: number;
has_pickup_code?: boolean;
has_password?: boolean;
pickup_code?: string;
password?: string;
notify_email?: string;
};
file_name: string;
}) => {
const { file_id, config, file_name } = data || {};
return await createShare({
type: "file",
data: file_id,
config,
file_name,
});
};
const createTextShare = async (data: { text: string; config: any }) => {
const { text, config } = data || {};
return await createShare({
type: "text",
data: text,
config,
});
};
const useAppShare = () => {
return {
downloadFile,
createShare,
createFileShare,
createTextShare,
};
};
export default useAppShare;

24
front/error.vue Normal file
View File

@@ -0,0 +1,24 @@
<script setup lang="ts">
import type { NuxtError } from "#app";
import { useI18n } from "vue-i18n";
import { Button } from "@/components/ui/button";
const { t } = useI18n();
const props = defineProps({
error: Object as () => NuxtError,
});
const handleError = () => clearError({ redirect: "/" });
</script>
<template>
<NuxtLayout>
<div
class="rounded-xl p-5 bg-white/50 backdrop-blur-xl w-full lg:w-200 flex flex-col items-center justify-center min-h-[50vh] mt-5 gap-10"
>
<div class="font-bold text-5xl">{{ error?.statusCode }}</div>
<Button @click="handleError">{{ t("btn.backToHome") }}</Button>
</div>
</NuxtLayout>
</template>

View File

@@ -10,7 +10,8 @@
"desc": "015 is a temporary file sharing platform project, supporting temporary large file slicing upload, temporary text upload, download and share"
},
"btn": {
"submit": "Submit"
"submit": "Submit",
"backToHome": "Back to Home"
},
"file": {
"uploadFile": "Upload File",

View File

@@ -10,7 +10,8 @@
"desc": "015 是一个开源的临时文件分享平台项目,支持临时大文件切片上传,临时文本上传、下载、分享"
},
"btn": {
"submit": "提交"
"submit": "提交",
"backToHome": "返回首页"
},
"file": {
"uploadFile": "上传文件",

View File

@@ -8,7 +8,7 @@ await useSeo();
<Toaster position="top-center" richColors closeButton />
<img
class="w-full h-full object-cover absolute inset-0 -z-[1]"
src="https://fuwari.vercel.app/_astro/demo-banner.DFyx781H_Z1gN7UP.webp"
src="https://img.fudaoyuan.icu/api/1/random/?scale_min=1.5&webp=true&md=false&format=302"
/>
<div
class="h-full w-full flex flex-col items-center lg:p-10 p-5 overflow-y-auto"

View File

@@ -3,7 +3,7 @@ import tailwindcss from "@tailwindcss/vite";
export default defineNuxtConfig({
compatibilityDate: "2024-04-03",
devtools: { enabled: true },
css: ["~/assets/css/main.css"],
css: ["@/assets/css/main.css"],
modules: [
// '@serwist/nuxt',
"@vueuse/nuxt",
@@ -35,7 +35,6 @@ export default defineNuxtConfig({
},
},
devServer: {
port: parseInt(process.env.PORT || "5000"),
host: process.env.HOST || "0.0.0.0",
port: 5000,
},
});

View File

@@ -27,8 +27,6 @@
"@tiptap/pm": "^2.11.7",
"@tiptap/starter-kit": "^2.11.7",
"@tiptap/vue-3": "^2.11.7",
"@types/lodash-es": "^4.17.12",
"@types/spark-md5": "^3.0.5",
"@unovis/ts": "^1.5.1",
"@unovis/vue": "^1.5.1",
"@vee-validate/nuxt": "^4.15.0",
@@ -42,30 +40,31 @@
"lucide-vue-next": "^0.487.0",
"markdown-it": "^14.1.0",
"motion-v": "1.0.0-beta.2",
"nuxt": "^3.16.0",
"nuxt": "^3.17.4",
"nuxt-lucide-icons": "1.0.5",
"pinia": "^3.0.2",
"qrcode": "^1.5.4",
"reka-ui": "^2.2.0",
"vue": "^3.5.16",
"vue-router": "^4.5.1",
"vue-sonner": "^1.3.2",
"shadcn-nuxt": "2.0.1",
"spark-md5": "^3.0.2",
"tailwind-merge": "^3.2.0",
"tailwindcss": "^4.1.3",
"tiptap-markdown": "^0.8.10",
"tw-animate-css": "^1.2.5",
"vaul-vue": "^0.4.1",
"vue": "latest",
"vue-router": "latest",
"vue-sonner": "^1.3.2"
"vaul-vue": "^0.4.1"
},
"packageManager": "pnpm@9.11.0+sha512.0a203ffaed5a3f63242cd064c8fb5892366c103e328079318f78062f24ea8c9d50bc6a47aa3567cabefd824d170e78fa2745ed1f16b132e16436146b7688f19b",
"devDependencies": {
"@nuxtjs/tailwindcss": "^6.13.2",
"@serwist/build": "^9.0.12",
"@serwist/nuxt": "^9.0.12",
"@serwist/vite": "^9.0.12",
"@tailwindcss/typography": "^0.5.16",
"@types/markdown-it": "^14.1.2",
"@types/qrcode": "^1.5.5",
"@types/lodash-es": "^4.17.12",
"@types/spark-md5": "^3.0.5",
"@vueuse/core": "^13.0.0",
"@vueuse/nuxt": "^13.0.0",
"serwist": "^9.0.12"
"@vueuse/nuxt": "^13.0.0"
}
}

View File

@@ -7,8 +7,9 @@ import { Skeleton } from "@/components/ui/skeleton";
import AboutChartTooltip from "@/components/AboutChartTooltip.vue";
import { filesize } from "filesize";
import SparkMD5 from "spark-md5";
import useMyAppConfig from "@/composables/useMyAppConfig";
const appConfig = useAppConfig();
const appConfig = useMyAppConfig();
const { site_title, site_desc } = appConfig.value || {};
const { data, isLoading } = useQuery({

View File

@@ -9,7 +9,6 @@
"dev:backend": "cd backend && air",
"dev:worker": "cd worker && air",
"test": "echo \"Error: no test specified\" && exit 1",
"postinstall": "npx husky init",
"prepare": "husky"
},
"workspaces": [

4453
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff