feat(config): add example configuration file with settings for sharing, uploading, redis, and site information

This reverts commit d294027463.

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "i18n-ally.localesPaths": ["front/i18n/locales"],
+    "i18n-ally.enabledFrameworks": ["vue"],
+    "i18n-ally.keystyle": "nested"
+}

backend/internal/controllers/about.go

@@ -0,0 +1,44 @@
+package controllers
+
+import (
+	"backend/internal/models"
+	"backend/internal/utils"
+	"encoding/json"
+
+	"github.com/labstack/echo/v4"
+	"github.com/samber/lo"
+)
+
+func GetAbout(c echo.Context) error {
+	maxStorageSize, err := utils.GetFileSize(utils.GetEnv("upload.maximum"))
+	if err != nil {
+		return utils.HTTPErrorHandler(c, err)
+	}
+
+	fileInfoMap, err := models.GetRedisFileInfoAll()
+	if err != nil {
+		return utils.HTTPErrorHandler(c, err)
+	}
+
+	currentFileSize := lo.Reduce(lo.Values(fileInfoMap), func(agg int64, item string, _ int) int64 {
+		var fileInfo models.RedisFileInfo
+		err := json.Unmarshal([]byte(item), &fileInfo)
+		if err != nil {
+			return agg
+		}
+		return agg + fileInfo.FileSize
+	}, 0)
+
+	return utils.HTTPSuccessHandler(c, map[string]any{
+		"bg_url":  utils.GetEnv("about.bg_url"),
+		"content": utils.GetEnvMapString("about.content"),
+		"email":   utils.GetEnv("about.email"),
+		"name":    utils.GetEnv("about.name"),
+		"url":     utils.GetEnv("about.url"),
+		"avatar":  utils.GetEnv("about.avatar"),
+		"file": map[string]any{
+			"maximun": maxStorageSize,
+			"current": currentFileSize,
+		},
+	})
+}

backend/internal/controllers/config.go

@@ -0,0 +1,21 @@
+package controllers
+
+import (
+	"backend/internal/utils"
+	"time"
+
+	"github.com/labstack/echo/v4"
+	"github.com/spf13/cast"
+)
+
+func GetConfig(c echo.Context) error {
+	return utils.HTTPSuccessHandler(c, map[string]any{
+		"site_title":  utils.GetEnvMapString("site.title"),
+		"site_desc":   utils.GetEnvMapString("site.desc"),
+		"site_url":    utils.GetEnv("site.url"),
+		"site_icon":   utils.GetEnvWithDefault("site.icon", "/logo.png"),
+		"site_bg_url": utils.GetEnvWithDefault("site.bg_url", "https://img.fudaoyuan.icu/api/1/random/?scale_min=1.5&webp=true&md=false&format=302"),
+		"version":     utils.GetEnvWithDefault("VERSION", "dev"),
+		"build_time":  cast.ToInt(utils.GetEnvWithDefault("BUILD_TIME", cast.ToString(time.Now().Unix()))),
+	})
+}

backend/internal/controllers/download.go

@@ -10,6 +10,7 @@ import (
 
 	"github.com/golang-jwt/jwt/v5"
 	"github.com/labstack/echo/v4"
+	"github.com/spf13/cast"
 )
 
 type DownloadShareClaims struct {
@@ -25,7 +26,7 @@ func DownloadShare(c echo.Context) error {
 	}
 	claims := DownloadShareClaims{}
 	t, err := jwt.ParseWithClaims(token, &claims, func(token *jwt.Token) (interface{}, error) {
-		return []byte(utils.GetEnv("download_secret")), nil
+		return []byte(utils.GetEnv("share.download_secret")), nil
 	})
 	if err != nil {
 		return utils.HTTPErrorHandler(c, err)
@@ -88,15 +89,16 @@ func VaildateShare(c echo.Context) error {
 	if shareInfo.ViewNum < 1 {
 		return utils.HTTPErrorHandler(c, errors.New("下载次数不足"))
 	}
+	downloadWindow := utils.GetEnvWithDefault("share.download_window", "12")
 	token := jwt.NewWithClaims(jwt.SigningMethodHS256, DownloadShareClaims{
 		ShareId: r.ShareId,
 		RegisteredClaims: jwt.RegisteredClaims{
-			ExpiresAt: jwt.NewNumericDate(time.Now().Add(60 * time.Minute)),
+			ExpiresAt: jwt.NewNumericDate(time.Now().Add(cast.ToDuration(downloadWindow + "h"))),
 		},
 	})
 
 	// Sign and get the complete encoded token as a string using the secret
-	downloadToken, err := token.SignedString([]byte(utils.GetEnv("download_secret")))
+	downloadToken, err := token.SignedString([]byte(utils.GetEnv("share.download_secret")))
 	if err != nil {
 		return utils.HTTPErrorHandler(c, err)
 	}
@@ -121,6 +123,21 @@ func VaildateShare(c echo.Context) error {
 	models.SetRedisShareInfo(r.ShareId, models.RedisShareInfo{
 		ViewNum: latestViewNum,
 	})
+
+	// 统计分享数
+	currentDate := time.Now().Format("2006-01-02")
+	statData, _ := models.GetRedisStat(currentDate)
+	if statData == nil {
+		statData = &models.StatData{
+			FileSize:    0,
+			FileNum:     0,
+			ShareNum:    0,
+			DownloadNum: 0,
+		}
+	}
+	statData.DownloadNum += 1
+	models.SetRedisStat(currentDate, *statData)
+
 	if shareInfo.Type == models.ShareTypeFile {
 		return utils.HTTPSuccessHandler(c, map[string]any{
 			"token": downloadToken,

backend/internal/controllers/file.go

@@ -40,7 +40,7 @@ func CreateUploadTask(c echo.Context) error {
 			"chunk_size": fileInfo.ChunkSize,
 		})
 	}
-	maxStorageSize, err := utils.GetFileSize(utils.GetEnv("MAX_LOCALSTORAGE_SIZE"))
+	maxStorageSize, err := utils.GetFileSize(utils.GetEnv("upload.maximum"))
 	if err != nil {
 		return utils.HTTPErrorHandler(c, err)
 	}
@@ -222,6 +222,20 @@ func FinishUploadTask(c echo.Context) error {
 	models.SetRedisFileInfo(r.FileId, models.RedisFileInfo{
 		FileType: models.FileTypeUpload,
 	})
+	// 统计
+	currentDate := time.Now().Format("2006-01-02")
+	statData, _ := models.GetRedisStat(currentDate)
+	if statData == nil {
+		statData = &models.StatData{
+			FileSize:    0,
+			FileNum:     0,
+			ShareNum:    0,
+			DownloadNum: 0,
+		}
+	}
+	statData.FileSize += fileInfo.FileSize
+	statData.FileNum += 1
+	models.SetRedisStat(currentDate, *statData)
 
 	return utils.HTTPSuccessHandler(c, map[string]any{
 		"size":      fileInfo.FileSize,

backend/internal/controllers/share.go

@@ -12,6 +12,7 @@ import (
 	"github.com/hibiken/asynq"
 	"github.com/labstack/echo/v4"
 	gonanoid "github.com/matoous/go-nanoid/v2"
+	"github.com/spf13/cast"
 )
 
 type CreateShareProps struct {
@@ -111,12 +112,29 @@ func CreateShareInfo(c echo.Context) error {
 		if err != nil {
 			return utils.HTTPErrorHandler(c, err)
 		}
-		_, err = client.Enqueue(asynq.NewTask("share:remove", json), asynq.ProcessIn(time.Duration(r.Config.ExpireAt)*time.Minute))
+		// 这里延时分享过期时间基础上加下载窗口期后1小时删除，防止用户过期前几分钟才开始下载，下载一半文件不见了
+		downloadWindow := utils.GetEnvWithDefault("share.download_window", "12")
+		deleteTime := time.Duration(r.Config.ExpireAt)*time.Minute + cast.ToDuration(downloadWindow+"h") + 1*time.Hour
+		_, err = client.Enqueue(asynq.NewTask("share:remove", json), asynq.ProcessIn(deleteTime))
 		if err != nil {
 			return utils.HTTPErrorHandler(c, err)
 		}
 	}
 
+	// 统计分享数
+	currentDate := time.Now().Format("2006-01-02")
+	statData, _ := models.GetRedisStat(currentDate)
+	if statData == nil {
+		statData = &models.StatData{
+			FileSize:    0,
+			FileNum:     0,
+			ShareNum:    0,
+			DownloadNum: 0,
+		}
+	}
+	statData.ShareNum += 1
+	models.SetRedisStat(currentDate, *statData)
+
 	return utils.HTTPSuccessHandler(c, map[string]any{
 		"id":            id,
 		"file_name":     r.FileName,

backend/internal/controllers/stat.go

@@ -4,99 +4,71 @@ import (
 	"backend/internal/models"
 	"backend/internal/utils"
 	"encoding/json"
-	"time"
 
-	"github.com/hibiken/asynq"
 	"github.com/labstack/echo/v4"
-	"github.com/samber/lo"
-	"github.com/spf13/cast"
 )
 
-type FileChartData struct {
-	FileSize int64  `json:"file_size"`
-	FileNum  int64  `json:"file_num"`
-	Date     string `json:"date"`
+const (
+	DateLayout       = "2006-01-02"
+	DaysToAnalyze    = 30
+	QueueHistoryDays = 30
+)
+
+type StatChartData struct {
+	FileSize    int64 `json:"file_size"`
+	FileNum     int64 `json:"file_num"`
+	ShareNum    int64 `json:"share_num"`
+	DownloadNum int64 `json:"download_num"`
+}
+
+type QueueChartData struct {
+	Processed int `json:"processed"`
+	Failed    int `json:"failed"`
 }
 
 func GetStat(c echo.Context) error {
-	fileInfoMap, err := models.GetRedisFileInfoAll()
+	statInfoMap, err := models.GetRedisStatAll()
 	if err != nil {
 		return utils.HTTPErrorHandler(c, err)
 	}
-	fileChartData := make(map[string]FileChartData)
-	for _, value := range fileInfoMap {
-		var fileInfo models.RedisFileInfo
-		err := json.Unmarshal([]byte(value), &fileInfo)
+
+	statChartData := make(map[string]StatChartData)
+	for key, value := range statInfoMap {
+		var statData models.StatData
+		err := json.Unmarshal([]byte(value), &statData)
 		if err != nil {
 			return utils.HTTPErrorHandler(c, err)
 		}
-		if fileInfo.FileType != models.FileTypeUpload {
-			continue
-		}
-		if time.Unix(fileInfo.CreatedAt, 0).After(time.Now().Add(-30 * 24 * time.Hour)) {
-			dateKey := time.Unix(fileInfo.CreatedAt, 0).Format("2006-01-02")
-			if data, ok := fileChartData[dateKey]; ok {
-				fileChartData[dateKey] = FileChartData{
-					FileSize: data.FileSize + fileInfo.FileSize,
-					FileNum:  data.FileNum + 1,
-				}
-			} else {
-				fileChartData[dateKey] = FileChartData{
-					FileSize: fileInfo.FileSize,
-					FileNum:  1,
-				}
-			}
+		statChartData[key] = StatChartData{
+			FileSize:    statData.FileSize,
+			FileNum:     statData.FileNum,
+			ShareNum:    statData.ShareNum,
+			DownloadNum: statData.DownloadNum,
 		}
 	}
-	storageChartData := lo.Times(30, func(i int) FileChartData {
-		dateKey := time.Now().AddDate(0, 0, -i).Format("2006-01-02")
-		if data, ok := fileChartData[dateKey]; ok {
-			return FileChartData{
-				FileSize: data.FileSize,
-				FileNum:  data.FileNum,
-				Date:     dateKey,
-			}
-		}
-		return FileChartData{
-			FileSize: 0,
-			FileNum:  0,
-			Date:     dateKey,
-		}
-	})
 
 	queueInspector := utils.GetQueueInspector()
-	queues, err := queueInspector.History("default", 30)
+	queues, err := queueInspector.History("default", QueueHistoryDays)
 	if err != nil {
 		return utils.HTTPErrorHandler(c, err)
 	}
 
-	maxStorageSize, err := utils.GetFileSize(utils.GetEnv("MAX_LOCALSTORAGE_SIZE"))
-	if err != nil {
-		return utils.HTTPErrorHandler(c, err)
-	}
-
-	queueData := lo.Map(queues, func(item *asynq.DailyStats, _ int) map[string]any {
-		return map[string]any{
-			"date":      item.Date.Format("2006-01-02"),
-			"processed": item.Processed,
-			"failed":    item.Failed,
+	queuesChartData := make(map[string]QueueChartData)
+	for _, item := range queues {
+		dateKey := item.Date.Format(DateLayout)
+		if item.Processed == 0 && item.Failed == 0 {
+			continue
 		}
-	})
+		queuesChartData[dateKey] = QueueChartData{
+			Processed: item.Processed,
+			Failed:    item.Failed,
+		}
+	}
 
 	return utils.HTTPSuccessHandler(c, map[string]any{
-		"version":    utils.GetEnvWithDefault("VERSION", "dev"),
-		"build_time": cast.ToInt(utils.GetEnvWithDefault("BUILD_TIME", cast.ToString(time.Now().Unix()))),
-		"max_limit": map[string]any{
-			"file_size": maxStorageSize,
-		},
-		"admin": map[string]any{
-			"name":  utils.GetEnv("ADMIN_NAME"),
-			"email": utils.GetEnv("ADMIN_EMAIL"),
-			"url":   utils.GetEnv("ADMIN_URL"),
-		},
 		"chart": map[string]any{
-			"storage": storageChartData,
-			"queue":   queueData,
+			"storage": statChartData,
+			"queue":   queuesChartData,
 		},
 	})
 }

backend/internal/models/stat.go

@@ -0,0 +1,52 @@
+package models
+
+import (
+	"backend/internal/utils"
+	"encoding/json"
+
+	"dario.cat/mergo"
+	"github.com/redis/go-redis/v9"
+)
+
+// 统计数据结构
+type StatData struct {
+	FileSize    int64 `json:"file_size"`    // 文件大小
+	FileNum     int64 `json:"file_num"`     // 文件数量
+	ShareNum    int64 `json:"share_num"`    // 分享数量
+	DownloadNum int64 `json:"download_num"` // 下载数量
+}
+
+func GetRedisStat(key string) (*StatData, error) {
+	rdb, ctx := utils.GetRedisClient()
+	statUnmarshalData, err := rdb.HGet(ctx, "015:stat", key).Result()
+	if err == redis.Nil {
+		return nil, nil
+	}
+	if err != nil {
+		return nil, err
+	}
+	var stat StatData
+	if err := json.Unmarshal([]byte(statUnmarshalData), &stat); err != nil {
+		return nil, err
+	}
+	return &stat, nil
+}
+
+func SetRedisStat(key string, stat StatData) error {
+	rdb, ctx := utils.GetRedisClient()
+	old_stat, err := GetRedisStat(key)
+	if err != nil {
+		return err
+	}
+	if old_stat != nil {
+		mergo.Merge(&stat, old_stat)
+	}
+	jsonData, _ := json.Marshal(stat)
+	_, err = rdb.HSet(ctx, "015:stat", key, string(jsonData)).Result()
+	return err
+}
+
+func GetRedisStatAll() (map[string]string, error) {
+	rdb, ctx := utils.GetRedisClient()
+	return rdb.HGetAll(ctx, "015:stat").Result()
+}

backend/internal/utils/asyncq.go

@@ -3,17 +3,17 @@ package utils
 import "github.com/hibiken/asynq"
 
 func GetQueueClient() *asynq.Client {
-	opt := RedisURI2AsynqOpt(GetEnv("REDIS_URL"))
+	opt := RedisURI2AsynqOpt(GetEnv("redis.url"))
 	return asynq.NewClient(opt)
 }
 
 func GetQueueInspector() *asynq.Inspector {
-	opt := RedisURI2AsynqOpt(GetEnv("REDIS_URL"))
+	opt := RedisURI2AsynqOpt(GetEnv("redis.url"))
 	return asynq.NewInspector(opt)
 }
 
 func RedisURI2AsynqOpt(uri string) asynq.RedisConnOpt {
-	opt, err := asynq.ParseRedisURI(GetEnv("REDIS_URL"))
+	opt, err := asynq.ParseRedisURI(GetEnv("redis.url"))
 	if err != nil {
 		panic(err)
 	}

backend/internal/utils/env.go

@@ -1,6 +1,8 @@
 package utils
 
 import (
+	"strings"
+
 	"github.com/spf13/viper"
 )
 
@@ -15,16 +17,20 @@ func InitEnv() {
 		return
 	}
 	v = viper.New()
-	v.SetConfigName(".env")
-	v.SetConfigType("env")
+	v.SetConfigName("config.yaml")
+	v.SetConfigType("yaml")
+	v.SetEnvKeyReplacer(strings.NewReplacer(".", "_"))
 	v.AddConfigPath(".")
 	v.AddConfigPath("../")
 	v.AutomaticEnv()
-	if err := v.ReadInConfig(); err != nil {
-		if _, ok := err.(viper.ConfigFileNotFoundError); !ok {
-			// 只有当错误不是"配置文件未找到"时才 panic
-			panic(err)
-		}
+	v.WatchConfig()
+	err := v.ReadInConfig()
+	if err != nil {
+		panic(err)
+		// if _, ok := err.(viper.ConfigFileNotFoundError); !ok {
+		// 	// 只有当错误不是"配置文件未找到"时才 panic
+		// 	panic(err)
+		// }
 	}
 }
 
@@ -40,3 +46,8 @@ func GetEnvWithDefault(key string, defaultValue string) string {
 	}
 	return value
 }
+
+func GetEnvMapString(key string) map[string]string {
+	InitEnv()
+	return v.GetStringMapString(key)
+}

backend/internal/utils/file.go

@@ -41,7 +41,7 @@ func GetUploadDirPath() (string, error) {
 		return "", err
 	}
 	finalPath := filepath.Join(basepath, "uploads")
-	uploadPath := GetEnvWithDefault("UPLOAD_PATH", finalPath)
+	uploadPath := GetEnvWithDefault("upload.path", finalPath)
 	if err := os.MkdirAll(uploadPath, 0755); err != nil {
 		return "", err
 	}

backend/internal/utils/password.go

@@ -8,7 +8,7 @@ import (
 )
 
 func GeneratePasswordHash(password string) (string, error) {
-	salt := GetEnv("PASSWORD_SALT")
+	salt := GetEnv("share.password_salt")
 	if salt == "" {
 		return "", errors.New("请配置PASSWORD_SALT")
 	}

backend/internal/utils/password_test.go

@@ -9,8 +9,8 @@ import (
 
 func TestGeneratePasswordHash(t *testing.T) {
 	// 保存原始环境变量
-	originalSalt := os.Getenv("PASSWORD_SALT")
-	defer os.Setenv("PASSWORD_SALT", originalSalt)
+	originalSalt := os.Getenv("share.password_salt")
+	defer os.Setenv("share.password_salt", originalSalt)
 
 	tests := []struct {
 		name        string
@@ -20,11 +20,11 @@ func TestGeneratePasswordHash(t *testing.T) {
 		errorMsg    string
 	}{
 		{
-			name:        "PASSWORD_SALT未配置",
+			name:        "share.password_salt未配置",
 			password:    "testpassword",
 			salt:        "",
 			expectError: true,
-			errorMsg:    "请配置PASSWORD_SALT",
+			errorMsg:    "请配置share.password_salt",
 		},
 		{
 			name:        "正常生成哈希",
@@ -38,9 +38,9 @@ func TestGeneratePasswordHash(t *testing.T) {
 		t.Run(tt.name, func(t *testing.T) {
 			// 设置环境变量
 			if tt.salt != "" {
-				os.Setenv("PASSWORD_SALT", tt.salt)
+				os.Setenv("share.password_salt", tt.salt)
 			} else {
-				os.Unsetenv("PASSWORD_SALT")
+				os.Unsetenv("share.password_salt")
 			}
 
 			hash, err := GeneratePasswordHash(tt.password)

backend/internal/utils/redis.go

@@ -10,7 +10,7 @@ var rdb *redis.Client = InitRedis()
 var ctx = context.Background()
 
 func InitRedis() *redis.Client {
-	opt, err := redis.ParseURL(GetEnv("REDIS_URL"))
+	opt, err := redis.ParseURL(GetEnv("redis.url"))
 	if err != nil {
 		panic(err)
 	}

backend/main.go

@@ -4,6 +4,7 @@ import (
 	"backend/internal/controllers"
 	"backend/internal/utils"
 	"backend/middleware"
+	"fmt"
 
 	"github.com/labstack/echo/v4"
 	"go.uber.org/zap"
@@ -12,7 +13,7 @@ import (
 func main() {
 	// 日志
 	var logger *zap.Logger
-	if utils.GetEnvWithDefault("NODE_ENV", "production") == "production" {
+	if utils.GetEnvWithDefault("node.env", "production") == "production" {
 		logger, _ = zap.NewProduction()
 	} else {
 		logger, _ = zap.NewDevelopment()
@@ -40,5 +41,7 @@ func main() {
 	e.GET("/image/compress/:id", controllers.GetCompressImage)
 
 	e.GET("/stat", controllers.GetStat)
-	e.Logger.Fatal(e.Start(":1323"))
+	e.GET("/config", controllers.GetConfig)
+	e.GET("/about", controllers.GetAbout)
+	e.Logger.Fatal(e.Start(fmt.Sprintf(":%s", utils.GetEnvWithDefault("api.port", "5001"))))
 }

config.example.yaml

@@ -0,0 +1,55 @@
+share:
+    # (必填)你的下载secret，每一次下载次数减1的时候都会根据这里的secret生成一个下载jwt token， 有效期一小时，使用该下载token有效期内可以多线程下载该文件而不会被多次扣除次数
+    download_secret: your-secret-token
+    # 颁发的下载token的窗口期，默认12小时，文件过期后自动从服务器删除时间为此时间基础上加1小时，默认为12+1=13小时
+    download_window: 12
+    # (必填)设置密码时会把密码加盐
+    password_salt: your-passwall-salt
+
+upload:
+    # 上传文件保存路径
+    path: /upload
+    # 指定实例最大上传容量，支持填写人类可读的值，比如1TiB，500GiB等，注意填写GiB而不是GB, Gib按1024字节计算，Gb按1000字节计算
+    maximum: 100GiB
+
+redis:
+    # (必填)redis 地址
+    url: redis://redis:6379/0
+
+# 站点基本信息
+site:
+    # 必填，对应你的公网域名
+    url: http://localhost:5000
+    title:
+        'en': '015'
+    desc:
+        'en': '015 is an open-source temporary file sharing platform project that supports uploading, downloading, and sharing files and text.'
+    icon: '/logo.png'
+    bg_url: 'https://img.fudaoyuan.icu/api/1/random/?scale_min=1.5&webp=true&md=false&format=302'
+
+# 关于页面的
+about:
+    # hero图片 推荐3:1 比例
+    bg_url: 'https://files.mastodon.social/site_uploads/files/000/000/001/@1x/57c12f441d083cde.png'
+    # 关于信息，markdown格式
+    content:
+        'zh': |
+            ### markdown测试文案
+
+            这里有一个图片示例：
+
+            ![示例图片](https://cdn.ani.work/site_uploads/files/000/000/005/@1x/d68677a8b7a8d296.png)
+
+            这里有一个[示例链接](https://fudaoyuan.icu)
+        'en': |
+            ### Markdown Test Content
+
+            Here is an image example:
+
+            ![Sample Image](https://cdn.ani.work/site_uploads/files/000/000/005/@1x/d68677a8b7a8d296.png)
+
+            Here is a [sample link](https://fudaoyuan.icu)
+    email: keven@fudaoyuan.icu
+    name: keven
+    url: 'https://fudaoyuan.icu'
+    avatar: ''

front/assets/css/main.css

@@ -41,6 +41,24 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  @keyframes accordion-down {
+  from {
+    height: 0;
+    }
+  to {
+    height: var(--reka-accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+  from {
+    height: var(--reka-accordion-content-height);
+    }
+  to {
+    height: 0;
+    }
+  }
 }
 
 :root {

front/components/About/AboutBaseInfo.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { useQuery } from '@tanstack/vue-query'
+import { Skeleton } from '@/components/ui/skeleton'
+import getFileSize from '~/lib/getFileSize'
+import SparkMD5 from 'spark-md5'
+import useMyAppConfig from '@/composables/useMyAppConfig'
+import Progress from '~/components/ui/progress/Progress.vue'
+import renderI18n from '~/lib/renderI18n'
+import { I18nT } from 'vue-i18n'
+
+const { locale } = useI18n()
+const appConfig = useMyAppConfig()
+const { data, isLoading } = useQuery({
+    queryKey: ['about'],
+    queryFn: async () => {
+        const data = await $fetch<{
+            data: {
+                file: {
+                    maximun: number
+                    current: number
+                }
+                bg_url?: string
+                avatar?: string
+                name?: string
+                email?: string
+                url?: string
+                content?: Record<string, string>
+            }
+        }>('/api/about')
+        return data?.data
+    },
+})
+const { t } = useI18n()
+
+const genUserAvatar = (email: string) => {
+    return `https://www.gravatar.com/avatar/${SparkMD5.hash(email)}?d=retro`
+}
+</script>
+
+<template>
+    <template v-if="isLoading">
+        <div class="flex flex-col gap-2">
+            <Skeleton class="aspect-[3/1] w-full rounded-xl" />
+            <div class="flex flex-col gap-2 items-center">
+                <Skeleton class="h-6 w-32 rounded" />
+                <Skeleton class="h-4 w-52 rounded" />
+            </div>
+        </div>
+    </template>
+    <template v-else>
+        <NuxtImg v-if="data?.bg_url" :src="data?.bg_url" class="aspect-[3/1] w-full rounded-xl object-cover" />
+        <div class="flex flex-col gap-2 items-center">
+            <div class="text-xl">{{ renderI18n(appConfig?.site_title ?? {}, 'en', locale) }}</div>
+            <div class="text-sm opacity-75 text-center px-5">
+                <I18nT keypath="about.powerBy" tag="span">
+                    <NuxtLink href="https://github.com/keven1024/015" target="_blank" class="text-primary hover:underline">015</NuxtLink>
+                </I18nT>
+            </div>
+        </div>
+    </template>
+
+    <div class="font-semibold">{{ t('about.systemInfo') }}</div>
+    <template v-if="isLoading">
+        <div class="flex flex-row gap-2">
+            <Skeleton class="w-full h-20 rounded-xl" v-for="i in 2" :key="i" />
+        </div>
+    </template>
+    <template v-else>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
+            <div class="rounded-xl bg-white/50 flex-1 flex flex-col p-3 gap-2">
+                <div class="opacity-75 text-xs">{{ t('about.admin') }}</div>
+                <div
+                    class="flex flex-row gap-2 items-center cursor-pointer"
+                    @click="
+                        () => {
+                            if (data?.url) {
+                                navigateTo(data?.url, { external: true })
+                                return
+                            }
+                            if (data?.email) {
+                                navigateTo(`mailto:${data?.email ?? ''}`, { external: true })
+                                return
+                            }
+                            return
+                        }
+                    "
+                >
+                    <Avatar class="size-10">
+                        <AvatarImage v-if="!!data?.avatar || !!data?.email" :src="data?.avatar || genUserAvatar(data?.email as string)" />
+                        <AvatarFallback class="bg-black/10 font-bold">
+                            {{ data?.name?.charAt(0)?.toUpperCase() }}
+                        </AvatarFallback>
+                    </Avatar>
+                    <div class="flex flex-col">
+                        <div class="text-md font-semibold">{{ data?.name }}</div>
+                        <div class="text-xs opacity-75">{{ data?.email }}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="rounded-xl bg-white/50 flex-1 flex flex-col p-3 gap-2">
+                <div class="opacity-75 text-xs">{{ t('about.storage') }}</div>
+                <div class="text-right flex flex-row items-baseline">
+                    <span class="text-lg font-semibold">{{ getFileSize(data?.file?.current ?? 0) }}</span>
+                    <span class="text-md opacity-75">/ {{ getFileSize(data?.file?.maximun ?? 0) }}</span>
+                </div>
+                <Progress class="h-1" :model-value="((data?.file?.current ?? 0) / (data?.file?.maximun ?? 0)) * 100" />
+            </div>
+        </div>
+    </template>
+    <template v-if="isLoading">
+        <Skeleton class="w-full h-16 rounded-xl" />
+    </template>
+    <template v-else>
+        <div v-if="data?.content" class="rounded-xl bg-white/50 flex flex-col px-3 gap-2">
+            <Accordion type="single" collapsible>
+                <AccordionItem value="about">
+                    <AccordionTrigger>
+                        <span class="font-semibold">{{ t('about.about') }}</span>
+                    </AccordionTrigger>
+                    <AccordionContent>
+                        <MarkdownRender :markdown="renderI18n(data?.content ?? {}, 'en', locale) ?? ''" />
+                    </AccordionContent>
+                </AccordionItem>
+            </Accordion>
+        </div>
+    </template>
+</template>

front/components/About/AboutChartView.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { CurveType } from '@unovis/ts'
+import { AreaChart } from '@/components/ui/chart-area'
+import { cx } from 'class-variance-authority'
+import { useQuery } from '@tanstack/vue-query'
+import { Skeleton } from '@/components/ui/skeleton'
+import AboutChartTooltip from '@/components/AboutChartTooltip.vue'
+import dayjs from 'dayjs'
+import { times } from 'lodash-es'
+
+interface StatChartData {
+    file_size: number
+    file_num: number
+    share_num: number
+    download_num: number
+    date: string
+}
+
+interface QueueChartData {
+    processed: number
+    failed: number
+    date: string
+}
+
+type ChartDataItem = StatChartData | QueueChartData
+
+type ChartConfig = {
+    data: ChartDataItem[]
+    index: string
+    categories: string[]
+    colors: string[]
+}
+
+const { data, isLoading } = useQuery({
+    queryKey: ['stat'],
+    queryFn: async () => {
+        const response = await $fetch<{
+            data: {
+                chart: {
+                    storage: Record<string, StatChartData>
+                    queue: Record<string, QueueChartData>
+                }
+            }
+        }>('/api/stat')
+        return response.data
+    },
+})
+
+const { t } = useI18n()
+
+const chartTabs = computed(() => {
+    return [
+        {
+            label: t('about.file'),
+            value: 'storage',
+            total: data.value?.chart?.storage
+                ? Object.values(data.value.chart.storage).reduce((acc: number, curr: StatChartData) => acc + curr.file_num, 0)
+                : 0,
+        },
+        {
+            label: t('about.share'),
+            value: 'share',
+            total: data.value?.chart?.storage
+                ? Object.values(data.value.chart.storage).reduce((acc: number, curr: StatChartData) => acc + curr.share_num, 0)
+                : 0,
+        },
+        {
+            label: t('about.download'),
+            value: 'download',
+            total: data.value?.chart?.storage
+                ? Object.values(data.value.chart.storage).reduce((acc: number, curr: StatChartData) => acc + curr.download_num, 0)
+                : 0,
+        },
+        {
+            label: t('about.task'),
+            value: 'queue',
+            total: data.value?.chart?.queue
+                ? Object.values(data.value.chart.queue).reduce((acc: number, curr: QueueChartData) => acc + curr.processed + curr.failed, 0)
+                : 0,
+        },
+    ]
+})
+
+const currentChartTab = ref<'storage' | 'queue' | 'share' | 'download'>('storage')
+const currentChartData = computed((): ChartConfig => {
+    const { storage, queue } = data.value?.chart || {}
+    if (currentChartTab.value === 'queue') {
+        const queueData = times(30, (i) => {
+            return {
+                date: dayjs().subtract(i, 'day').format('YYYY-MM-DD'),
+                processed: queue?.[dayjs().subtract(i, 'day').format('YYYY-MM-DD')]?.processed || 0,
+                failed: queue?.[dayjs().subtract(i, 'day').format('YYYY-MM-DD')]?.failed || 0,
+            }
+        })
+        return {
+            data: queueData,
+            index: 'date' as const,
+            categories: ['processed', 'failed'] as const,
+            colors: ['#4ade80', '#f87171'],
+        }
+    }
+    const storageData = times(30, (i) => {
+        const base = { date: dayjs().subtract(i, 'day').format('YYYY-MM-DD') }
+        if (currentChartTab.value === 'share') {
+            return {
+                ...base,
+                share_num: storage?.[dayjs().subtract(i, 'day').format('YYYY-MM-DD')]?.share_num || 0,
+            }
+        }
+        if (currentChartTab.value === 'download') {
+            return {
+                ...base,
+                download_num: storage?.[dayjs().subtract(i, 'day').format('YYYY-MM-DD')]?.download_num || 0,
+            }
+        }
+        return {
+            ...base,
+            file_size: storage?.[dayjs().subtract(i, 'day').format('YYYY-MM-DD')]?.file_size || 0,
+            file_num: storage?.[dayjs().subtract(i, 'day').format('YYYY-MM-DD')]?.file_num || 0,
+        }
+    })
+
+    let categories = ['file_size', 'file_num']
+    if (currentChartTab.value === 'share') {
+        categories = ['share_num']
+    }
+    if (currentChartTab.value === 'download') {
+        categories = ['download_num']
+    }
+    let colors = ['#38bdf8', '#a78bfa']
+    if (currentChartTab.value === 'share') {
+        colors = ['#ea580c']
+    }
+    if (currentChartTab.value === 'download') {
+        colors = ['#a3e635']
+    }
+    return {
+        data: storageData as ChartDataItem[],
+        index: 'date' as const,
+        categories,
+        colors,
+    }
+})
+</script>
+
+<template>
+    <div class="font-semibold">{{ t('about.analysis') }}</div>
+    <template v-if="isLoading">
+        <div class="flex flex-row gap-2">
+            <Skeleton class="w-full h-96 rounded-xl" />
+        </div>
+    </template>
+    <template v-else>
+        <div class="flex flex-col gap-2 bg-white/50 w-full rounded-xl py-5">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-2 px-5">
+                <div
+                    :class="cx('rounded-md min-w-30 flex flex-col px-3 py-1.5 cursor-pointer', currentChartTab === tab.value && 'bg-black/10')"
+                    v-for="tab in chartTabs"
+                    :key="tab.value"
+                    @click="
+                        () => {
+                            currentChartTab = tab.value as 'storage' | 'queue'
+                        }
+                    "
+                >
+                    <div class="opacity-75 text-xs">{{ tab.label }}</div>
+                    <div class="text-lg font-semibold">{{ tab.total }}</div>
+                </div>
+            </div>
+            <AreaChart
+                v-if="currentChartData"
+                class="h-64 w-full"
+                :key="currentChartTab"
+                :index="currentChartData.index"
+                :data="currentChartData.data"
+                :categories="currentChartData.categories"
+                :show-grid-line="false"
+                :show-legend="false"
+                :show-y-axis="true"
+                :show-x-axis="true"
+                :colors="currentChartData.colors"
+                :custom-tooltip="AboutChartTooltip"
+                :curve-type="CurveType.CatmullRom"
+            />
+        </div>
+    </template>
+</template>

front/components/About/AboutVersionView.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import useMyAppConfig from '@/composables/useMyAppConfig'
+import dayjs from 'dayjs'
+
+const appConfig = useMyAppConfig()
+</script>
+
+<template>
+    <div class="flex flex-row flex-wrap gap-4 items-center text-sm opacity-60">
+        <div class="flex flex-row gap-1 opacity-100">
+            <NuxtLink href="https://github.com/keven1024/015" target="_blank" class="text-primary hover:underline">015</NuxtLink>
+            {{ appConfig?.version ?? 'dev' }}
+        </div>
+
+        <div v-if="appConfig?.build_time">
+            {{ `Build at ${dayjs(appConfig?.build_time * 1000).format('YYYY-MM-DD')}` }}
+        </div>
+        <div>Designed by <NuxtLink href="https://fudaoyuan.icu" target="_blank" class="text-primary hover:underline">keven1024</NuxtLink></div>
+    </div>
+</template>

front/components/Drawer/PickupShareDrawer.vue

@@ -1,57 +1,56 @@
 <script setup lang="ts">
-import VeeForm from "@/components/VeeForm.vue";
-import FormButton from "@/components/Field/FormButton.vue";
-import PinInputField from "@/components/Field/PinInputField.vue";
-import type { FormContext, GenericObject } from "vee-validate";
-import { toast } from "vue-sonner";
-const router = useRouter();
+import VeeForm from '@/components/VeeForm.vue'
+import FormButton from '@/components/Field/FormButton.vue'
+import PinInputField from '@/components/Field/PinInputField.vue'
+import type { FormContext, GenericObject } from 'vee-validate'
+import { toast } from 'vue-sonner'
+const router = useRouter()
+const { t } = useI18n()
 const props = defineProps<{
-  hide: () => void;
-}>();
-const handleSubmit = async (
-  form: FormContext<GenericObject, GenericObject>,
-) => {
-  try {
-    const code = form.values.code;
-    const data = await $fetch<{
-      data: {
-        share_id: string;
-      };
-    }>(`/api/share/pickup/${code}`);
-    if (!data.data.share_id) {
-      toast.error("取件码错误");
-      form.resetForm();
-      return;
+    hide: () => void
+}>()
+const handleSubmit = async (form: FormContext<GenericObject, GenericObject>) => {
+    try {
+        const code = form.values.code
+        const data = await $fetch<{
+            data: {
+                share_id: string
+            }
+        }>(`/api/share/pickup/${code}`)
+        if (!data.data.share_id) {
+            toast.error(t('pickup.codeError'))
+            form.resetForm()
+            return
+        }
+        const { share_id } = data.data
+        props.hide()
+        router.push({
+            path: `/s/${share_id}`,
+        })
+        return
+    } catch (error) {
+        toast.error(t('pickup.codeError'))
+        form.resetForm()
     }
-    const { share_id } = data.data;
-    props.hide();
-    router.push({
-      path: `/s/${share_id}`,
-    });
-    return;
-  } catch (error) {
-    toast.error("取件码错误");
-    form.resetForm();
-  }
-};
+}
 </script>
 
 <template>
-  <VeeForm>
-    <div class="flex flex-col gap-5">
-      <div class="text-xl font-bold">输入取件码</div>
-      <PinInputField
-        name="code"
-        :rules="
-          (value) => {
-            if (value?.length !== 4) {
-              return false;
-            }
-            return true;
-          }
-        "
-      />
-      <FormButton @click="handleSubmit">提交</FormButton>
-    </div>
-  </VeeForm>
+    <VeeForm>
+        <div class="flex flex-col gap-5">
+            <div class="text-xl font-bold">{{ t('pickup.title') }}</div>
+            <PinInputField
+                name="code"
+                :rules="
+                    (value) => {
+                        if (value?.length !== 4) {
+                            return false
+                        }
+                        return true
+                    }
+                "
+            />
+            <FormButton @click="handleSubmit">{{ t('btn.submit') }}</FormButton>
+        </div>
+    </VeeForm>
 </template>

front/components/Field/FileUploadField.vue

@@ -39,7 +39,7 @@ const { t } = useI18n()
                             <Button
                                 class="size-5 p-0 bg-red-500/20 hover:bg-red-500/60 text-red-500 hover:text-white"
                                 @click="
-                                    (e) => {
+                                    (e: any) => {
                                         e.stopPropagation()
                                         setValue(
                                             value?.filter((r) => r?.name !== item?.name || r?.type !== item?.type || r?.size !== item?.size) || []
@@ -56,13 +56,13 @@ const { t } = useI18n()
                         <div class="size-16 flex justify-center items-center rounded-xl bg-white/80">
                             <PlusIcon class="size-7" />
                         </div>
-                        <div class="mb-3">添加更多</div>
+                        <div class="mb-3">{{ t('file.addMore') }}</div>
                     </div>
                 </div>
             </template>
             <template v-else>
                 <LucideUpload class="size-10" />
-                <div class="text-sm">
+                <div class="text-sm select-none">
                     {{ t('file.uploadFilePlaceholder') }}
                 </div>
             </template>

front/components/Field/MarkdownInputField.vue

@@ -3,11 +3,11 @@
 </template>
 
 <script setup lang="ts">
-import Tiptap from '@/components/Tiptap.vue'
+import Tiptap from '@/components/Tiptap/Index.vue'
 import type { RuleExpression } from 'vee-validate'
 const props = defineProps<{
     name: string
     rules?: RuleExpression<string>
 }>()
-const { value, } = useField<string>(props.name, props.rules)
+const { value } = useField<string>(props.name, props.rules)
 </script>

front/components/GlobalDayjs.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import 'dayjs/locale/en'
+import 'dayjs/locale/zh-cn'
+
+dayjs.extend(relativeTime)
+
+const { locale } = useI18n()
+
+watchEffect(() => {
+    dayjs.locale(locale.value.toLowerCase())
+})
+</script>

front/components/GlobalDrawer.vue

@@ -28,7 +28,7 @@ const Children = () =>
         "
     >
         <DrawerContent>
-            <div class="mx-auto w-full max-w-sm pb-10 px-3">
+            <div class="mx-auto w-full max-w-lg pb-10 px-3">
                 <Children />
             </div>
         </DrawerContent>

front/components/Home/File/FileUploadProgressView.vue

@@ -15,6 +15,7 @@ import showDrawer from '~/lib/showDrawer'
 import FileUploadSpeedInfoView from './FileUploadSpeedInfoView.vue'
 import getFileChunk from '~/lib/getFileChunk'
 import type { FileHandleKey } from '~/components/Preprocessing/types'
+import asyncWait from '@/lib/asyncWait'
 
 const props = defineProps<{
     data: { file: File[]; config: Record<string, any>; handle_type: FileHandleKey }
@@ -119,6 +120,7 @@ const { error, execute, isLoading } = useAsyncState(
     async () => {
         while (activeTaskAllQueue.value.length > 0) {
             const taskList = uploadfiles?.value?.filter((r) => r.queue.length > 0 && r.status === 'start')
+            await asyncWait(10) // 让出主线程，防止空转导致ui卡死
             await Promise.all(
                 times(batchNum.value, async (i: number) => {
                     const file = sample(taskList)

front/components/Home/Text/TextUploadInputTextView.vue

@@ -1,74 +1,72 @@
 <script lang="ts" setup>
-import MarkdownInputField from "@/components/Field/MarkdownInputField.vue";
-import FormButton from "@/components/Field/FormButton.vue";
-import Button from "@/components/ui/button/Button.vue";
-import showDrawer from "@/lib/showDrawer";
-import { h } from "vue";
-import TextShareDrawer from "@/components/Drawer/TextShareDrawer.vue";
-import { cx } from "class-variance-authority";
-import PickupShareBtn from "@/components/PickupShareBtn.vue";
-const form = useFormContext();
-const { t } = useI18n();
+import MarkdownInputField from '@/components/Field/MarkdownInputField.vue'
+import FormButton from '@/components/Field/FormButton.vue'
+import Button from '@/components/ui/button/Button.vue'
+import showDrawer from '@/lib/showDrawer'
+import { h } from 'vue'
+import TextShareDrawer from '@/components/Drawer/TextShareDrawer.vue'
+import { cx } from 'class-variance-authority'
+import PickupShareBtn from '@/components/PickupShareBtn.vue'
+const form = useFormContext()
+const { t } = useI18n()
 
 const emit = defineEmits<{
-  (e: "change", key: string): void;
-}>();
+    (e: 'change', key: string): void
+}>()
 
 const handleTextShare = ({ type, config }: { type: string; config: any }) => {
-  form?.setFieldValue("handle_type", type);
-  form?.setFieldValue("config", config);
-  emit("change", "result");
-};
+    form?.setFieldValue('handle_type', type)
+    form?.setFieldValue('config', config)
+    emit('change', 'result')
+}
 </script>
 <template>
-  <div class="gap-5 flex flex-col">
-    <div class="text-xl font-normal">{{ t("text.uploadText") }}</div>
-    <div class="relative">
-      <MarkdownInputField
-        name="text"
-        :placeholder="t('text.uploadTextPlaceholder')"
-        class="max-h-[50vh] min-h-40 overflow-y-auto max-w-full [&>*]:pr-10"
-        rules="required"
-      />
-      <Button
-        variant="ghost"
-        size="icon"
-        :class="
-          cx(
-            'absolute right-2 top-2 hover:bg-black/10 transition-all duration-300',
-            form?.values.text?.length > 0
-              ? 'opacity-100'
-              : 'opacity-0 pointer-events-none',
-          )
-        "
-        @click="
-          () => {
-            form?.setValues({ text: '' });
-          }
-        "
-      >
-        <LucideX />
-      </Button>
+    <div class="gap-5 flex flex-col">
+        <div class="text-xl font-normal">{{ t('text.uploadText') }}</div>
+        <div class="relative">
+            <MarkdownInputField
+                name="text"
+                :placeholder="t('text.uploadTextPlaceholder')"
+                class="max-h-[50vh] min-h-40 overflow-y-auto max-w-full [&>*]:pr-10 flex flex-col"
+                rules="required"
+            />
+            <Button
+                variant="ghost"
+                size="icon"
+                :class="
+                    cx(
+                        'absolute right-2 top-2 hover:bg-black/10 transition-all duration-300',
+                        form?.values.text?.length > 0 ? 'opacity-100' : 'opacity-0 pointer-events-none'
+                    )
+                "
+                @click="
+                    () => {
+                        form?.setValues({ text: '' })
+                    }
+                "
+            >
+                <LucideX />
+            </Button>
+        </div>
+        <div class="flex flex-row gap-3">
+            <FormButton
+                @click="
+                    async (form) => {
+                        const { text } = form?.values || {}
+                        showDrawer({
+                            render: ({ hide }) =>
+                                h(TextShareDrawer, {
+                                    hide,
+                                    text,
+                                    onTextHandle: handleTextShare,
+                                }),
+                        })
+                    }
+                "
+            >
+                <LucideShare class="size-4" />{{ t('btn.submit') }}
+            </FormButton>
+            <PickupShareBtn />
+        </div>
     </div>
-    <div class="flex flex-row gap-3">
-      <FormButton
-        @click="
-          async (form) => {
-            const { text } = form?.values || {};
-            showDrawer({
-              render: ({ hide }) =>
-                h(TextShareDrawer, {
-                  hide,
-                  text,
-                  onTextHandle: handleTextShare,
-                }),
-            });
-          }
-        "
-      >
-        <LucideShare class="size-4" />{{ t("btn.submit") }}
-      </FormButton>
-      <PickupShareBtn />
-    </div>
-  </div>
 </template>

front/components/MarkdownRender.vue

@@ -11,5 +11,13 @@ const renderHtml = computed(() => {
 })
 </script>
 <template>
-    <div :class="cx('prose prose-sm [&>*]:outline-none prose-p:my-1 prose-headings:my-2 prose-pre:mb-0', props?.class)" v-html="renderHtml" />
+    <div
+        :class="
+            cx(
+                'prose prose-sm [&>*]:outline-none prose-p:my-1 prose-headings:my-2 prose-pre:mb-0 prose-blockquote:border-black/50 selection:bg-primary/20',
+                props?.class
+            )
+        "
+        v-html="renderHtml"
+    />
 </template>

front/components/PickupShareBtn.vue

@@ -1,14 +1,21 @@
 <script setup lang="ts">
-import AsyncButton from '@/components/ui/button/AsyncButton.vue';
-import showDrawer from '@/lib/showDrawer';
-import PickupShareDrawer from './Drawer/PickupShareDrawer.vue';
+import AsyncButton from '@/components/ui/button/AsyncButton.vue'
+import showDrawer from '@/lib/showDrawer'
+import PickupShareDrawer from './Drawer/PickupShareDrawer.vue'
+const { t } = useI18n()
 </script>
 
 <template>
-    <AsyncButton variant="outline" class="gap-2" @click="async()=>{
-        showDrawer({ render: ({ hide }) => h(PickupShareDrawer, { hide }) })
-    }">
+    <AsyncButton
+        variant="outline"
+        class="gap-2"
+        @click="
+            async () => {
+                showDrawer({ render: ({ hide }) => h(PickupShareDrawer, { hide }) })
+            }
+        "
+    >
         <LucideArchive class="size-4" />
-        取件
+        {{ t('pickup.btn') }}
     </AsyncButton>
-</template>
+</template>

front/components/Preprocessing/FileShareHandle.vue

@@ -4,6 +4,7 @@ import InputField from '../Field/InputField.vue'
 import SelectField from '../Field/SelectField.vue'
 import FormButton from '../Field/FormButton.vue'
 import type { FileShareHandleProps } from './types'
+const { t } = useI18n()
 const props = defineProps<{
     hide: () => void
     file: File[]
@@ -14,37 +15,37 @@ const props = defineProps<{
 <template>
     <VeeForm v-slot="{ values, setFieldValue }" :initialValues="{ download_nums: 1, expire_time: 1440 }">
         <div class="flex flex-col gap-3">
-            <h2 class="text-lg font-bold">分享选项</h2>
+            <h2 class="text-lg font-bold">{{ t('fileshare.title') }}</h2>
             <div class="flex flex-row items-center gap-2 text-sm">
                 <SelectField
                     name="download_nums"
-                    label="下载次数"
+                    :label="t('fileshare.downloadNums')"
                     :options="[
-                        { label: '1次下载', value: 1 },
-                        { label: '2次下载', value: 2 },
-                        { label: '3次下载', value: 3 },
-                        { label: '5次下载', value: 5 },
-                        { label: '10次下载', value: 10 },
+                        { label: t('fileshare.downloadOptions.1time'), value: 1 },
+                        { label: t('fileshare.downloadOptions.2times'), value: 2 },
+                        { label: t('fileshare.downloadOptions.3times'), value: 3 },
+                        { label: t('fileshare.downloadOptions.5times'), value: 5 },
+                        { label: t('fileshare.downloadOptions.10times'), value: 10 },
                     ]"
                 />
-                或
+                {{ t('fileshare.or') }}
                 <SelectField
                     name="expire_time"
-                    label="过期时间"
+                    :label="t('fileshare.expireTime')"
                     :options="[
-                        { label: '5分钟', value: 5 },
-                        { label: '1小时', value: 60 },
-                        { label: '1天', value: 1440 },
-                        { label: '3天', value: 4320 },
+                        { label: t('fileshare.expireOptions.5min'), value: 5 },
+                        { label: t('fileshare.expireOptions.1hour'), value: 60 },
+                        { label: t('fileshare.expireOptions.1day'), value: 1440 },
+                        { label: t('fileshare.expireOptions.3days'), value: 4320 },
                     ]"
                 />
-                后过期
+                {{ t('fileshare.expireAfter') }}
             </div>
             <div class="flex flex-col gap-1">
                 <div class="flex flex-row gap-3 min-h-9">
                     <SwitchField
                         name="has_pickup_code"
-                        label="取件码"
+                        :label="t('fileshare.pickupCode')"
                         :rules="
                             (value: boolean) => {
                                 if (!!value) {
@@ -58,7 +59,7 @@ const props = defineProps<{
                 <div class="flex flex-row gap-3 min-h-9">
                     <SwitchField
                         name="has_password"
-                        label="密码保护"
+                        :label="t('fileshare.passwordProtection')"
                         :rules="
                             (value: boolean) => {
                                 if (!!value) {
@@ -68,11 +69,11 @@ const props = defineProps<{
                             }
                         "
                     />
-                    <InputField v-if="!!values.has_password" name="password" placeholder="请输入密码" rules="required" />
+                    <InputField v-if="!!values.has_password" name="password" :placeholder="t('fileshare.passwordPlaceholder')" rules="required" />
                 </div>
                 <div class="flex flex-row gap-3 min-h-9">
-                    <SwitchField name="has_notify" label="下载通知" />
-                    <InputField v-if="!!values.has_notify" name="notify_email" placeholder="请输入邮箱" rules="required" />
+                    <SwitchField name="has_notify" :label="t('fileshare.downloadNotify')" />
+                    <InputField v-if="!!values.has_notify" name="notify_email" :placeholder="t('fileshare.emailPlaceholder')" rules="required" />
                 </div>
             </div>
             <FormButton
@@ -82,7 +83,7 @@ const props = defineProps<{
                         hide()
                     }
                 "
-                >提交</FormButton
+                >{{ t('btn.submit') }}</FormButton
             >
         </div>
     </VeeForm>

front/components/Preprocessing/TextShareHandle.vue

@@ -4,6 +4,7 @@ import InputField from '../Field/InputField.vue'
 import SelectField from '../Field/SelectField.vue'
 import FormButton from '../Field/FormButton.vue'
 import type { TextShareHandleProps } from './types'
+const { t } = useI18n()
 const props = defineProps<{
     hide: () => void
     text: string
@@ -14,37 +15,37 @@ const props = defineProps<{
 <template>
     <VeeForm v-slot="{ values, setFieldValue }" :initialValues="{ download_nums: 1, expire_time: 1440 }">
         <div class="flex flex-col gap-3">
-            <h2 class="text-lg font-bold">分享选项</h2>
+            <h2 class="text-lg font-bold">{{ t('textshare.title') }}</h2>
             <div class="flex flex-row items-center gap-2 text-sm">
                 <SelectField
                     name="download_nums"
-                    label="浏览次数"
+                    :label="t('textshare.viewNums')"
                     :options="[
-                        { label: '1次浏览', value: 1 },
-                        { label: '2次浏览', value: 2 },
-                        { label: '3次浏览', value: 3 },
-                        { label: '5次浏览', value: 5 },
-                        { label: '10次浏览', value: 10 },
+                        { label: t('textshare.viewOptions.1time'), value: 1 },
+                        { label: t('textshare.viewOptions.2times'), value: 2 },
+                        { label: t('textshare.viewOptions.3times'), value: 3 },
+                        { label: t('textshare.viewOptions.5times'), value: 5 },
+                        { label: t('textshare.viewOptions.10times'), value: 10 },
                     ]"
                 />
-                或
+                {{ t('textshare.or') }}
                 <SelectField
                     name="expire_time"
-                    label="过期时间"
+                    :label="t('textshare.expireTime')"
                     :options="[
-                        { label: '5分钟', value: 5 },
-                        { label: '1小时', value: 60 },
-                        { label: '1天', value: 1440 },
-                        { label: '3天', value: 4320 },
+                        { label: t('textshare.expireOptions.5min'), value: 5 },
+                        { label: t('textshare.expireOptions.1hour'), value: 60 },
+                        { label: t('textshare.expireOptions.1day'), value: 1440 },
+                        { label: t('textshare.expireOptions.3days'), value: 4320 },
                     ]"
                 />
-                后过期
+                {{ t('textshare.expireAfter') }}
             </div>
             <div class="flex flex-col gap-1">
                 <div class="flex flex-row gap-3 min-h-9">
                     <SwitchField
                         name="has_pickup_code"
-                        label="取件码"
+                        :label="t('textshare.pickupCode')"
                         :rules="
                             (value: boolean) => {
                                 if (!!value) {
@@ -58,7 +59,7 @@ const props = defineProps<{
                 <div class="flex flex-row gap-3 min-h-9">
                     <SwitchField
                         name="has_password"
-                        label="密码保护"
+                        :label="t('textshare.passwordProtection')"
                         :rules="
                             (value: boolean) => {
                                 if (!!value) {
@@ -68,11 +69,11 @@ const props = defineProps<{
                             }
                         "
                     />
-                    <InputField v-if="!!values.has_password" name="password" placeholder="请输入密码" rules="required" />
+                    <InputField v-if="!!values.has_password" name="password" :placeholder="t('textshare.passwordPlaceholder')" rules="required" />
                 </div>
                 <div class="flex flex-row gap-3 min-h-9">
-                    <SwitchField name="has_notify" label="已读通知" />
-                    <InputField v-if="!!values.has_notify" name="notify_email" placeholder="请输入邮箱" rules="required" />
+                    <SwitchField name="has_notify" :label="t('textshare.readNotify')" />
+                    <InputField v-if="!!values.has_notify" name="notify_email" :placeholder="t('textshare.emailPlaceholder')" rules="required" />
                 </div>
             </div>
             <FormButton
@@ -82,7 +83,7 @@ const props = defineProps<{
                         hide()
                     }
                 "
-                >提交</FormButton
+                >{{ t('btn.submit') }}</FormButton
             >
         </div>
     </VeeForm>

front/components/Result/FileShareResult.vue

@@ -8,15 +8,11 @@ import { useQuery } from '@tanstack/vue-query'
 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'
 import { h } from 'vue'
 import { cx } from 'class-variance-authority'
 import type { FileHandleKey } from '../Preprocessing/types'
-dayjs.extend(relativeTime) // 扩展 relativeTime 插件
-dayjs.locale('zh-cn') // 设置语言为中文
 
 const props = defineProps<{
     data: { files: { id: string; file: File }[]; config: Record<string, any>; handle_type: FileHandleKey }
@@ -24,6 +20,7 @@ const props = defineProps<{
 const emit = defineEmits<{
     (e: 'change', key: string): void
 }>()
+const { t } = useI18n()
 const { createFileShare } = useMyAppShare()
 const { data } = useQuery({
     queryKey: ['create-share', ...props?.data?.files?.map((item) => item.id)],
@@ -39,7 +36,6 @@ const { data } = useQuery({
         return data?.map((item) => item?.data)
     },
 })
-
 const selectedFile = ref<string | undefined>()
 const selectedFileShare = computed(() => {
     return data?.value?.find((item) => item?.id === selectedFile.value)
@@ -64,13 +60,13 @@ const { copy } = useClipboard()
 
 <template>
     <div class="flex flex-col gap-3">
-        <h2 class="text-lg">上传成功</h2>
+        <h2 class="text-lg">{{ t('fileshareresult.title') }}</h2>
         <div class="flex flex-col gap-3 items-center">
             <div v-if="data?.length === 1" class="flex flex-col h-30 items-center">
-                <FilePreviewView :value="props?.data?.files?.[0]?.file" />
+                <FilePreviewView :value="props?.data?.files?.[0]?.file as File" />
             </div>
             <div v-else class="flex flex-col gap-2 w-full p-5 bg-white/20 backdrop-blur-xl rounded-md">
-                <div class="text-sm font-semibold">文件列表</div>
+                <div class="text-sm font-semibold">{{ t('fileshareresult.fileList') }}</div>
                 <div
                     v-for="file in data"
                     :class="
@@ -83,7 +79,7 @@ const { copy } = useClipboard()
                 >
                     <div class="flex flex-row items-center gap-2 flex-1 min-w-0">
                         <FileIcon
-                            :file="props?.data?.files?.[data?.findIndex((i) => i?.id === file?.id) as number]?.file"
+                            :file="props?.data?.files?.[data?.findIndex((i) => i?.id === file?.id) as number]?.file as File"
                             :class="cx('!size-7 !rounded-md shrink-0', selectedFile === file?.id && '!bg-white/50')"
                         />
                         <div class="text-sm flex-1 truncate">{{ file?.file_name }}</div>
@@ -96,7 +92,7 @@ const { copy } = useClipboard()
                             @click="
                                 () => {
                                     copy(getShareUrl(file?.id as string))
-                                    toast.success('复制成功')
+                                    toast.success(t('fileshareresult.copySuccess'))
                                 }
                             "
                         >
@@ -125,21 +121,21 @@ const { copy } = useClipboard()
             </div>
             <div v-if="!!selectedFileShare" 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="text-sm font-semibold">{{ t('fileshareresult.info') }}</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-xs font-semibold">{{ t('fileshareresult.downloadNums') }}</div>
                             <div class="text-3xl font-light">{{ selectedFileShare?.download_nums }}</div>
                         </div>
                         <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-xs font-semibold">{{ t('fileshareresult.expireTime') }}</div>
                             <div class="text-md font-light">
                                 {{ dayjs((selectedFileShare?.expire_at || 0) * 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="selectedFileShare?.pickup_code">
                             <div class="flex flex-row justify-between w-full items-center">
-                                <div class="text-xs font-semibold">提取码</div>
+                                <div class="text-xs font-semibold">{{ t('fileshareresult.pickupCode') }}</div>
                                 <Button
                                     variant="outline"
                                     class="bg-white/70 p-0 size-6"
@@ -147,7 +143,7 @@ const { copy } = useClipboard()
                                     @click="
                                         () => {
                                             copy(selectedFileShare?.pickup_code as string)
-                                            toast.success('复制成功')
+                                            toast.success(t('fileshareresult.copySuccess'))
                                         }
                                     "
                                 >
@@ -163,7 +159,7 @@ const { copy } = useClipboard()
                     </div>
                 </div>
                 <div class="flex flex-col gap-5 flex-1">
-                    <div class="text-sm font-semibold">链接</div>
+                    <div class="text-sm font-semibold">{{ t('fileshareresult.link') }}</div>
                     <div class="flex flex-row gap-2">
                         <Input :model-value="getShareUrl(selectedFileShare?.id as string)" class="bg-white/70" readonly />
                         <Button
@@ -173,7 +169,7 @@ const { copy } = useClipboard()
                             @click="
                                 () => {
                                     copy(getShareUrl(selectedFileShare?.id as string))
-                                    toast.success('复制成功')
+                                    toast.success(t('fileshareresult.copySuccess'))
                                 }
                             "
                         >
@@ -209,7 +205,7 @@ const { copy } = useClipboard()
                     }
                 "
             >
-                返回首页
+                {{ t('btn.backToHome') }}
             </Button>
         </div>
     </div>

front/components/Result/TextShareResult.vue

@@ -40,13 +40,14 @@ const url = computed(() => {
 })
 
 const { copy } = useClipboard()
+const { t } = useI18n()
 </script>
 
 <template>
     <div class="flex flex-col gap-3">
         <div class="flex flex-row gap-2">
             <div class="flex flex-row justify-between w-full">
-                <h2 class="text-lg">分享成功</h2>
+                <h2 class="text-lg">{{ t('textshareresult.title') }}</h2>
                 <Button
                     variant="outline"
                     class="bg-white/70"
@@ -63,21 +64,21 @@ const { copy } = useClipboard()
         </div>
         <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="text-sm font-semibold">{{ t('textshareresult.info') }}</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-xs font-semibold">{{ t('textshareresult.viewNums') }}</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-xs font-semibold">{{ t('textshareresult.expireTime') }}</div>
                         <div class="text-md font-light">
                             {{ dayjs((data?.expire_at ?? 0) * 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>
+                            <div class="text-xs font-semibold">{{ t('textshareresult.pickupCode') }}</div>
                             <Button
                                 variant="outline"
                                 class="bg-white/70 p-0 size-6"
@@ -85,7 +86,7 @@ const { copy } = useClipboard()
                                 @click="
                                     () => {
                                         copy(data?.pickup_code as string)
-                                        toast.success('复制成功')
+                                        toast.success(t('textshareresult.copySuccess'))
                                     }
                                 "
                             >
@@ -101,7 +102,7 @@ const { copy } = useClipboard()
                 </div>
             </div>
             <div class="flex flex-col gap-5 flex-1">
-                <div class="text-sm font-semibold">链接</div>
+                <div class="text-sm font-semibold">{{ t('textshareresult.link') }}</div>
                 <div class="flex flex-row gap-2">
                     <Input v-model="url" class="bg-white/70" readonly />
                     <Button
@@ -111,7 +112,7 @@ const { copy } = useClipboard()
                         @click="
                             () => {
                                 copy(url)
-                                toast.success('复制成功')
+                                toast.success(t('textshareresult.copySuccess'))
                             }
                         "
                     >
@@ -139,7 +140,7 @@ const { copy } = useClipboard()
                 </div>
             </div>
         </div>
-        <h2 class="text-md">内容</h2>
+        <h2 class="text-md">{{ t('textshareresult.content') }}</h2>
         <MarkdownRender class="prose rounded-md bg-white/70 p-3 w-full max-w-full min-h-[30vh]" :markdown="props?.data?.text" />
     </div>
 </template>

front/components/Tiptap/Index.vue

@@ -3,9 +3,12 @@ import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import { Markdown } from 'tiptap-markdown'
 import Placeholder from '@tiptap/extension-placeholder'
+import { cx } from 'class-variance-authority'
+
 const props = defineProps<{
     modelValue?: string
     placeholder?: string
+    class?: string
 }>()
 const emit = defineEmits<{
     (e: 'update:modelValue', value: string): void
@@ -27,14 +30,14 @@ onMounted(() => {
             // CommandsPlugin,
         ],
         onUpdate: () => {
-            emit('update:modelValue', editor.value?.storage?.markdown?.getMarkdown() ?? '')
+            emit('update:modelValue', (editor.value as any)?.storage?.markdown?.getMarkdown() ?? '')
         },
     })
 })
 watch(
     () => props.modelValue,
     (value) => {
-        if (value !== editor.value?.storage?.markdown?.getMarkdown()) {
+        if (value !== (editor.value as any)?.storage?.markdown?.getMarkdown()) {
             editor.value?.commands.setContent(value ?? '')
         }
     }
@@ -45,7 +48,13 @@ onUnmounted(() => {
 </script>
 <template>
     <editor-content
-        :editor="editor"
-        class="prose prose-sm bg-white/50 rounded-md p-2 [&>*]:outline-none prose-p:my-1 prose-headings:my-2 prose-pre:mb-0"
-    />
+        :editor="editor as any"
+        :class="
+            cx(
+                'prose prose-sm bg-white/50 rounded-md p-2 [&>*]:outline-none prose-p:my-1 prose-headings:my-2 prose-pre:mb-0 prose-blockquote:border-black/50 selection:bg-primary/20 max-w-full',
+                props.class
+            )
+        "
+    >
+    </editor-content>
 </template>

front/components/ui/accordion/Accordion.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui'
+import { AccordionRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<AccordionRootProps>()
+const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <AccordionRoot data-slot="accordion" v-bind="forwarded">
+        <slot />
+    </AccordionRoot>
+</template>

front/components/ui/accordion/AccordionContent.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { AccordionContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { AccordionContent } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <AccordionContent
+        data-slot="accordion-content"
+        v-bind="delegatedProps"
+        class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+    >
+        <div :class="cn('pt-0 pb-4', props.class)">
+            <slot />
+        </div>
+    </AccordionContent>
+</template>

front/components/ui/accordion/AccordionItem.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { AccordionItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { AccordionItem, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <AccordionItem data-slot="accordion-item" v-bind="forwardedProps" :class="cn('border-b last:border-b-0', props.class)">
+        <slot />
+    </AccordionItem>
+</template>

front/components/ui/accordion/AccordionTrigger.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { AccordionTriggerProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronDown } from 'lucide-vue-next'
+import { AccordionHeader, AccordionTrigger } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <AccordionHeader class="flex">
+        <AccordionTrigger
+            data-slot="accordion-trigger"
+            v-bind="delegatedProps"
+            :class="
+                cn(
+                    'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+                    props.class
+                )
+            "
+        >
+            <slot />
+            <slot name="icon">
+                <ChevronDown class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+            </slot>
+        </AccordionTrigger>
+    </AccordionHeader>
+</template>

front/components/ui/accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue'
+export { default as AccordionContent } from './AccordionContent.vue'
+export { default as AccordionItem } from './AccordionItem.vue'
+export { default as AccordionTrigger } from './AccordionTrigger.vue'

front/components/ui/avatar/Avatar.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { AvatarRoot } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+    <AvatarRoot data-slot="avatar" :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)">
+        <slot />
+    </AvatarRoot>
+</template>

front/components/ui/avatar/AvatarFallback.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { AvatarFallbackProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { AvatarFallback } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <AvatarFallback
+        data-slot="avatar-fallback"
+        v-bind="delegatedProps"
+        :class="cn('bg-muted flex size-full items-center justify-center rounded-full', props.class)"
+    >
+        <slot />
+    </AvatarFallback>
+</template>

front/components/ui/avatar/AvatarImage.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AvatarImageProps } from 'reka-ui'
+import { AvatarImage } from 'reka-ui'
+
+const props = defineProps<AvatarImageProps>()
+</script>
+
+<template>
+    <AvatarImage data-slot="avatar-image" v-bind="props" class="aspect-square size-full">
+        <slot />
+    </AvatarImage>
+</template>

front/components/ui/avatar/index.ts

@@ -0,0 +1,3 @@
+export { default as Avatar } from './Avatar.vue'
+export { default as AvatarFallback } from './AvatarFallback.vue'
+export { default as AvatarImage } from './AvatarImage.vue'

front/components/ui/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'reka-ui'
+import { DropdownMenuRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DropdownMenuRootProps>()
+const emits = defineEmits<DropdownMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <DropdownMenuRoot data-slot="dropdown-menu" v-bind="forwarded">
+        <slot />
+    </DropdownMenuRoot>
+</template>

front/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Check } from 'lucide-vue-next'
+import { DropdownMenuCheckboxItem, DropdownMenuItemIndicator, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <DropdownMenuCheckboxItem
+        data-slot="dropdown-menu-checkbox-item"
+        v-bind="forwarded"
+        :class="
+            cn(
+                'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+                props.class
+            )
+        "
+    >
+        <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+            <DropdownMenuItemIndicator>
+                <Check class="size-4" />
+            </DropdownMenuItemIndicator>
+        </span>
+        <slot />
+    </DropdownMenuCheckboxItem>
+</template>

front/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DropdownMenuContent, DropdownMenuPortal, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(), {
+    sideOffset: 4,
+})
+const emits = defineEmits<DropdownMenuContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <DropdownMenuPortal>
+        <DropdownMenuContent
+            data-slot="dropdown-menu-content"
+            v-bind="forwarded"
+            :class="
+                cn(
+                    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+                    props.class
+                )
+            "
+        >
+            <slot />
+        </DropdownMenuContent>
+    </DropdownMenuPortal>
+</template>

front/components/ui/dropdown-menu/DropdownMenuGroup.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DropdownMenuGroupProps } from 'reka-ui'
+import { DropdownMenuGroup } from 'reka-ui'
+
+const props = defineProps<DropdownMenuGroupProps>()
+</script>
+
+<template>
+    <DropdownMenuGroup data-slot="dropdown-menu-group" v-bind="props">
+        <slot />
+    </DropdownMenuGroup>
+</template>

front/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { DropdownMenuItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DropdownMenuItem, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+    defineProps<
+        DropdownMenuItemProps & {
+            class?: HTMLAttributes['class']
+            inset?: boolean
+            variant?: 'default' | 'destructive'
+        }
+    >(),
+    {
+        variant: 'default',
+    }
+)
+
+const delegatedProps = reactiveOmit(props, 'inset', 'variant', 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <DropdownMenuItem
+        data-slot="dropdown-menu-item"
+        :data-inset="inset ? '' : undefined"
+        :data-variant="variant"
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+                props.class
+            )
+        "
+    >
+        <slot />
+    </DropdownMenuItem>
+</template>

front/components/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DropdownMenuLabelProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DropdownMenuLabel, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'inset')
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <DropdownMenuLabel
+        data-slot="dropdown-menu-label"
+        :data-inset="inset ? '' : undefined"
+        v-bind="forwardedProps"
+        :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
+    >
+        <slot />
+    </DropdownMenuLabel>
+</template>

front/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from 'reka-ui'
+import { DropdownMenuRadioGroup, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DropdownMenuRadioGroupProps>()
+const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <DropdownMenuRadioGroup data-slot="dropdown-menu-radio-group" v-bind="forwarded">
+        <slot />
+    </DropdownMenuRadioGroup>
+</template>

front/components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Circle } from 'lucide-vue-next'
+import { DropdownMenuItemIndicator, DropdownMenuRadioItem, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <DropdownMenuRadioItem
+        data-slot="dropdown-menu-radio-item"
+        v-bind="forwarded"
+        :class="
+            cn(
+                'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+                props.class
+            )
+        "
+    >
+        <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+            <DropdownMenuItemIndicator>
+                <Circle class="size-2 fill-current" />
+            </DropdownMenuItemIndicator>
+        </span>
+        <slot />
+    </DropdownMenuRadioItem>
+</template>

front/components/ui/dropdown-menu/DropdownMenuSeparator.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DropdownMenuSeparatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DropdownMenuSeparator } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<
+    DropdownMenuSeparatorProps & {
+        class?: HTMLAttributes['class']
+    }
+>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <DropdownMenuSeparator data-slot="dropdown-menu-separator" v-bind="delegatedProps" :class="cn('bg-border -mx-1 my-1 h-px', props.class)" />
+</template>

front/components/ui/dropdown-menu/DropdownMenuShortcut.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+    <span data-slot="dropdown-menu-shortcut" :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)">
+        <slot />
+    </span>
+</template>

front/components/ui/dropdown-menu/DropdownMenuSub.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'reka-ui'
+import { DropdownMenuSub, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DropdownMenuSubProps>()
+const emits = defineEmits<DropdownMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <DropdownMenuSub data-slot="dropdown-menu-sub" v-bind="forwarded">
+        <slot />
+    </DropdownMenuSub>
+</template>

front/components/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DropdownMenuSubContent, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <DropdownMenuSubContent
+        data-slot="dropdown-menu-sub-content"
+        v-bind="forwarded"
+        :class="
+            cn(
+                'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+                props.class
+            )
+        "
+    >
+        <slot />
+    </DropdownMenuSubContent>
+</template>

front/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { DropdownMenuSubTriggerProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronRight } from 'lucide-vue-next'
+import { DropdownMenuSubTrigger, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'inset')
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <DropdownMenuSubTrigger
+        data-slot="dropdown-menu-sub-trigger"
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
+                props.class
+            )
+        "
+    >
+        <slot />
+        <ChevronRight class="ml-auto size-4" />
+    </DropdownMenuSubTrigger>
+</template>

front/components/ui/dropdown-menu/DropdownMenuTrigger.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { DropdownMenuTriggerProps } from 'reka-ui'
+import { DropdownMenuTrigger, useForwardProps } from 'reka-ui'
+
+const props = defineProps<DropdownMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+    <DropdownMenuTrigger data-slot="dropdown-menu-trigger" v-bind="forwardedProps">
+        <slot />
+    </DropdownMenuTrigger>
+</template>

front/components/ui/dropdown-menu/index.ts

@@ -0,0 +1,16 @@
+export { default as DropdownMenu } from './DropdownMenu.vue'
+
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
+export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
+export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
+export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
+export { DropdownMenuPortal } from 'reka-ui'

front/components/ui/menubar/Menubar.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { MenubarRootEmits, MenubarRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { MenubarRoot, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<MenubarRootEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <MenubarRoot
+        data-slot="menubar"
+        v-bind="forwarded"
+        :class="cn('bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs', props.class)"
+    >
+        <slot />
+    </MenubarRoot>
+</template>

front/components/ui/menubar/MenubarCheckboxItem.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { MenubarCheckboxItemEmits, MenubarCheckboxItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Check } from 'lucide-vue-next'
+import { MenubarCheckboxItem, MenubarItemIndicator, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<MenubarCheckboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <MenubarCheckboxItem
+        data-slot="menubar-checkbox-item"
+        v-bind="forwarded"
+        :class="
+            cn(
+                'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+                props.class
+            )
+        "
+    >
+        <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+            <MenubarItemIndicator>
+                <Check class="size-4" />
+            </MenubarItemIndicator>
+        </span>
+        <slot />
+    </MenubarCheckboxItem>
+</template>

front/components/ui/menubar/MenubarContent.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { MenubarContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { MenubarContent, MenubarPortal, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(), {
+    align: 'start',
+    alignOffset: -4,
+    sideOffset: 8,
+})
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <MenubarPortal>
+        <MenubarContent
+            data-slot="menubar-content"
+            v-bind="forwardedProps"
+            :class="
+                cn(
+                    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--reka-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
+                    props.class
+                )
+            "
+        >
+            <slot />
+        </MenubarContent>
+    </MenubarPortal>
+</template>

front/components/ui/menubar/MenubarGroup.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { MenubarGroupProps } from 'reka-ui'
+import { MenubarGroup } from 'reka-ui'
+
+const props = defineProps<MenubarGroupProps>()
+</script>
+
+<template>
+    <MenubarGroup data-slot="menubar-group" v-bind="props">
+        <slot />
+    </MenubarGroup>
+</template>

front/components/ui/menubar/MenubarItem.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { MenubarItemEmits, MenubarItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { MenubarItem, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<
+    MenubarItemProps & {
+        class?: HTMLAttributes['class']
+        inset?: boolean
+        variant?: 'default' | 'destructive'
+    }
+>()
+
+const emits = defineEmits<MenubarItemEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'inset', 'variant')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <MenubarItem
+        data-slot="menubar-item"
+        :data-inset="inset ? '' : undefined"
+        :data-variant="variant"
+        v-bind="forwarded"
+        :class="
+            cn(
+                'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+                props.class
+            )
+        "
+    >
+        <slot />
+    </MenubarItem>
+</template>

front/components/ui/menubar/MenubarLabel.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { MenubarLabelProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { MenubarLabel } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+const delegatedProps = reactiveOmit(props, 'class', 'inset')
+</script>
+
+<template>
+    <MenubarLabel
+        :data-inset="inset ? '' : undefined"
+        v-bind="delegatedProps"
+        :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
+    >
+        <slot />
+    </MenubarLabel>
+</template>

front/components/ui/menubar/MenubarMenu.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { MenubarMenuProps } from 'reka-ui'
+import { MenubarMenu } from 'reka-ui'
+
+const props = defineProps<MenubarMenuProps>()
+</script>
+
+<template>
+    <MenubarMenu data-slot="menubar-menu" v-bind="props">
+        <slot />
+    </MenubarMenu>
+</template>

front/components/ui/menubar/MenubarRadioGroup.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { MenubarRadioGroupEmits, MenubarRadioGroupProps } from 'reka-ui'
+import { MenubarRadioGroup, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<MenubarRadioGroupProps>()
+const emits = defineEmits<MenubarRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <MenubarRadioGroup data-slot="menubar-radio-group" v-bind="forwarded">
+        <slot />
+    </MenubarRadioGroup>
+</template>

front/components/ui/menubar/MenubarRadioItem.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { MenubarRadioItemEmits, MenubarRadioItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Circle } from 'lucide-vue-next'
+import { MenubarItemIndicator, MenubarRadioItem, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<MenubarRadioItemEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <MenubarRadioItem
+        data-slot="menubar-radio-item"
+        v-bind="forwarded"
+        :class="
+            cn(
+                'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+                props.class
+            )
+        "
+    >
+        <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+            <MenubarItemIndicator>
+                <Circle class="size-2 fill-current" />
+            </MenubarItemIndicator>
+        </span>
+        <slot />
+    </MenubarRadioItem>
+</template>

front/components/ui/menubar/MenubarSeparator.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { MenubarSeparatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { MenubarSeparator, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <MenubarSeparator data-slot="menubar-separator" :class="cn('bg-border -mx-1 my-1 h-px', props.class)" v-bind="forwardedProps" />
+</template>

front/components/ui/menubar/MenubarShortcut.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+    <span data-slot="menubar-shortcut" :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)">
+        <slot />
+    </span>
+</template>

front/components/ui/menubar/MenubarSub.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { MenubarSubEmits } from 'reka-ui'
+import { MenubarSub, useForwardPropsEmits } from 'reka-ui'
+
+interface MenubarSubRootProps {
+    defaultOpen?: boolean
+    open?: boolean
+}
+
+const props = defineProps<MenubarSubRootProps>()
+const emits = defineEmits<MenubarSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <MenubarSub data-slot="menubar-sub" v-bind="forwarded">
+        <slot />
+    </MenubarSub>
+</template>

front/components/ui/menubar/MenubarSubContent.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { MenubarSubContentEmits, MenubarSubContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { MenubarPortal, MenubarSubContent, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<MenubarSubContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <MenubarPortal>
+        <MenubarSubContent
+            data-slot="menubar-sub-content"
+            v-bind="forwarded"
+            :class="
+                cn(
+                    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+                    props.class
+                )
+            "
+        >
+            <slot />
+        </MenubarSubContent>
+    </MenubarPortal>
+</template>

front/components/ui/menubar/MenubarSubTrigger.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { MenubarSubTriggerProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronRight } from 'lucide-vue-next'
+import { MenubarSubTrigger, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'inset')
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <MenubarSubTrigger
+        data-slot="menubar-sub-trigger"
+        :data-inset="inset ? '' : undefined"
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8',
+                props.class
+            )
+        "
+    >
+        <slot />
+        <ChevronRight class="ml-auto size-4" />
+    </MenubarSubTrigger>
+</template>

front/components/ui/menubar/MenubarTrigger.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { MenubarTriggerProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { MenubarTrigger, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <MenubarTrigger
+        data-slot="menubar-trigger"
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none',
+                props.class
+            )
+        "
+    >
+        <slot />
+    </MenubarTrigger>
+</template>

front/components/ui/menubar/index.ts

@@ -0,0 +1,15 @@
+export { default as Menubar } from './Menubar.vue'
+export { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'
+export { default as MenubarContent } from './MenubarContent.vue'
+export { default as MenubarGroup } from './MenubarGroup.vue'
+export { default as MenubarItem } from './MenubarItem.vue'
+export { default as MenubarLabel } from './MenubarLabel.vue'
+export { default as MenubarMenu } from './MenubarMenu.vue'
+export { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'
+export { default as MenubarRadioItem } from './MenubarRadioItem.vue'
+export { default as MenubarSeparator } from './MenubarSeparator.vue'
+export { default as MenubarShortcut } from './MenubarShortcut.vue'
+export { default as MenubarSub } from './MenubarSub.vue'
+export { default as MenubarSubContent } from './MenubarSubContent.vue'
+export { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'
+export { default as MenubarTrigger } from './MenubarTrigger.vue'

front/components/ui/tooltip/Tooltip.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipRootEmits, TooltipRootProps } from 'reka-ui'
+import { TooltipRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <TooltipRoot data-slot="tooltip" v-bind="forwarded">
+        <slot />
+    </TooltipRoot>
+</template>

front/components/ui/tooltip/TooltipContent.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
+    sideOffset: 4,
+})
+
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <TooltipPortal>
+        <TooltipContent
+            data-slot="tooltip-content"
+            v-bind="{ ...forwarded, ...$attrs }"
+            :class="
+                cn(
+                    'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance',
+                    props.class
+                )
+            "
+        >
+            <slot />
+
+            <TooltipArrow class="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+        </TooltipContent>
+    </TooltipPortal>
+</template>

front/components/ui/tooltip/TooltipProvider.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { TooltipProviderProps } from 'reka-ui'
+import { TooltipProvider } from 'reka-ui'
+
+const props = withDefaults(defineProps<TooltipProviderProps>(), {
+    delayDuration: 0,
+})
+</script>
+
+<template>
+    <TooltipProvider v-bind="props">
+        <slot />
+    </TooltipProvider>
+</template>

front/components/ui/tooltip/TooltipTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from 'reka-ui'
+import { TooltipTrigger } from 'reka-ui'
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+    <TooltipTrigger data-slot="tooltip-trigger" v-bind="props">
+        <slot />
+    </TooltipTrigger>
+</template>

front/components/ui/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue'
+export { default as TooltipContent } from './TooltipContent.vue'
+export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'

front/composables/useMyAppConfig.ts

@@ -1,6 +1,16 @@
 const useMyAppConfig = () => {
-  const { data } = useFetch("/config");
-  return data;
-};
+    const { data } = useFetch<{
+        data: {
+            site_title: Record<string, string>
+            site_desc: Record<string, string>
+            site_url: string
+            site_icon: string
+            site_bg_url: string
+            version: string
+            build_time: number
+        }
+    }>('/api/config')
+    return computed(() => data?.value?.data)
+}
 
-export default useMyAppConfig;
+export default useMyAppConfig

front/composables/useMyAppShare.ts

@@ -80,7 +80,7 @@ const createFileShare = async (data: {
     const { files, config } = data || {}
     return await Promise.all(
         times(files.length, async (i) => {
-            const { id, name } = files[i]
+            const { id, name } = files[i] || {}
             return await createShare({
                 type: 'file',
                 data: id,

front/composables/useSeo.ts

@@ -1,39 +1,50 @@
+import getApiBaseUrl from '~/lib/getApiBaseUrl'
+import renderI18n from '~/lib/renderI18n'
+
 type UseSeoProps = {
     head?: Record<string, any>
     seo?: Record<string, any>
+    locale?: string
 }
 const useSeo = async (props: UseSeoProps = {}) => {
-    const { head, seo } = props || {}
-    const seoMeta = ref<any>()
+    const { head, seo, locale } = props || {}
+    const seoMeta = ref<{
+        site_title: Record<string, string>
+        site_desc: Record<string, string>
+        site_url: string
+        site_icon: string
+        site_bg_url: string
+    }>()
     if (import.meta.server) {
-        const { SITE_TITLE, SITE_DESC, SITE_URL } = process.env || {}
-        seoMeta.value = {
-            site_title: SITE_TITLE,
-            site_desc: SITE_DESC,
-            site_url: SITE_URL,
-        }
+        await fetch(`${getApiBaseUrl()}/config`)
+            .then((res) => res.json())
+            .then(({ data }) => {
+                seoMeta.value = data
+            })
         const { title } = head || {}
+        const siteTitle = computed(() => renderI18n(seoMeta?.value?.site_title || {}, 'en', locale))
+        const siteDesc = computed(() => renderI18n(seoMeta?.value?.site_desc || {}, 'en', locale))
         useHead({
             link: [
-                { rel: 'icon', href: '/logo.png', sizes: 'any' },
+                { rel: 'icon', href: seoMeta.value?.site_icon || '/logo.png', sizes: 'any' },
                 // { rel: 'icon', href: '/favicon.svg', sizes: 'any', type: 'image/svg+xml' },
-                { rel: 'apple-touch-icon', sizes: '180x180', href: '/logo.png' },
+                { rel: 'apple-touch-icon', sizes: '180x180', href: seoMeta.value?.site_icon || '/logo.png' },
             ],
             meta: [
                 // used on some mobile browsers
                 { name: 'theme-color', content: '#395276' },
             ],
             ...head,
-            title: title ? `${title} - ${seoMeta?.value?.site_title}` : seoMeta?.value?.site_title,
+            title: title ? `${title} - ${siteTitle.value}` : siteTitle.value,
         })
         useSeoMeta({
             ...seo,
-            title: seoMeta?.value?.site_title,
-            description: seoMeta?.value?.site_desc,
-            ogTitle: seoMeta?.value?.site_title,
-            ogDescription: seoMeta?.value?.site_desc,
+            title: siteTitle.value,
+            description: siteDesc.value,
+            ogTitle: siteTitle.value,
+            ogDescription: siteDesc.value,
             ogImage: {
-                url: `${seoMeta?.value?.site_url}/logo.png`,
+                url: `${seoMeta?.value?.site_url}${seoMeta?.value?.site_icon || '/logo.png'}`,
                 width: 1024,
                 height: 1024,
                 alt: 'logo',

front/i18n/locales/en.json

@@ -1,46 +1,126 @@
 {
-  "navbar": {
-    "file": "File",
-    "text": "Text"
-  },
-  "i18n": {
-    "switchLocale": "Switch Language"
-  },
-  "seo": {
-    "desc": "015 is a temporary file sharing platform project, supporting temporary large file slicing upload, temporary text upload, download and share"
-  },
-  "btn": {
-    "submit": "Submit",
-    "backToHome": "Back to Home"
-  },
-  "file": {
-    "uploadFile": "Upload File",
-    "uploadFilePlaceholder": "Drag and drop files or click to upload",
-    "handleType": {
-      "file-share": "File Share",
-      "file-image-compress": "Image Compress"
+    "navbar": {
+        "file": "File",
+        "text": "Text"
+    },
+    "i18n": {
+        "switchLocale": "Switch Language"
+    },
+    "seo": {
+        "desc": "015 is a temporary file sharing platform project, supporting temporary large file slicing upload, temporary text upload, download and share"
+    },
+    "btn": {
+        "submit": "Submit",
+        "backToHome": "Back to Home"
+    },
+    "file": {
+        "uploadFile": "Upload File",
+        "uploadFilePlaceholder": "Drag and drop files or click to upload",
+        "addMore": "Add More",
+        "handleType": {
+            "file-share": "File Share",
+            "file-image-compress": "Image Compress"
+        }
+    },
+    "text": {
+        "uploadText": "Upload Text",
+        "uploadTextPlaceholder": "Share, translate, summarize, generate images, and ask large models with our text processor",
+        "handleType": {
+            "text-share": "Text Share"
+        }
+    },
+    "pickup": {
+        "title": "Enter Pickup Code",
+        "codeError": "Invalid pickup code",
+        "btn": "Pickup"
+    },
+    "fileshare": {
+        "title": "Share Options",
+        "downloadNums": "Download Count",
+        "expireTime": "Expire Time",
+        "or": "or",
+        "expireAfter": "expire",
+        "pickupCode": "Pickup Code",
+        "passwordProtection": "Password Protection",
+        "downloadNotify": "Download Notification",
+        "passwordPlaceholder": "Enter password",
+        "emailPlaceholder": "Enter email",
+        "downloadOptions": {
+            "1time": "1 download",
+            "2times": "2 downloads",
+            "3times": "3 downloads",
+            "5times": "5 downloads",
+            "10times": "10 downloads"
+        },
+        "expireOptions": {
+            "5min": "5 minutes",
+            "1hour": "1 hour",
+            "1day": "1 day",
+            "3days": "3 days"
+        }
+    },
+    "textshare": {
+        "title": "Share Options",
+        "viewNums": "View Count",
+        "expireTime": "Expire Time",
+        "or": "or",
+        "expireAfter": "expire",
+        "pickupCode": "Pickup Code",
+        "passwordProtection": "Password Protection",
+        "readNotify": "Read Notification",
+        "passwordPlaceholder": "Enter password",
+        "emailPlaceholder": "Enter email",
+        "viewOptions": {
+            "1time": "1 view",
+            "2times": "2 views",
+            "3times": "3 views",
+            "5times": "5 views",
+            "10times": "10 views"
+        },
+        "expireOptions": {
+            "5min": "5 minutes",
+            "1hour": "1 hour",
+            "1day": "1 day",
+            "3days": "3 days"
+        }
+    },
+    "fileshareresult": {
+        "title": "Upload Successful",
+        "fileList": "File List",
+        "info": "Info",
+        "downloadNums": "Download Count",
+        "expireTime": "Expire Time",
+        "pickupCode": "Pickup Code",
+        "link": "Link",
+        "copySuccess": "Copy Success"
+    },
+    "textshareresult": {
+        "title": "Share Successful",
+        "info": "Info",
+        "viewNums": "View Count",
+        "expireTime": "Expire Time",
+        "pickupCode": "Pickup Code",
+        "link": "Link",
+        "content": "Content",
+        "copySuccess": "Copy Success"
+    },
+    "about": {
+        "powerBy": "Power by {0} as a open source temporary file sharing platform",
+        "file": "File",
+        "share": "Share",
+        "download": "Download",
+        "task": "Task",
+        "admin": "Site Admin",
+        "author": "Author",
+        "title": "About",
+        "about": "About",
+        "systemInfo": "System Info",
+        "systemVersion": "System Version",
+        "storage": "Storage",
+        "analysis": "Analysis",
+        "fileSize": "File Size",
+        "fileNum": "File Num",
+        "processed": "Processed",
+        "failed": "Failed"
     }
-  },
-  "text": {
-    "uploadText": "Upload Text",
-    "uploadTextPlaceholder": "Share, translate, summarize, generate images, and ask large models with our text processor",
-    "handleType": {
-      "text-share": "Text Share"
-    }
-  },
-  "about": {
-    "file": "File",
-    "task": "Task",
-    "admin": "Admin",
-    "author": "Author",
-    "title": "About",
-    "systemInfo": "System Info",
-    "systemVersion": "System Version",
-    "storage": "Storage",
-    "analysis": "Analysis",
-    "fileSize": "File Size",
-    "fileNum": "File Num",
-    "processed": "Processed",
-    "failed": "Failed"
-  }
 }

front/i18n/locales/zh-CN.json

@@ -1,46 +1,126 @@
 {
-  "navbar": {
-    "file": "文件",
-    "text": "文本"
-  },
-  "i18n": {
-    "switchLocale": "切换语言"
-  },
-  "seo": {
-    "desc": "015 是一个开源的临时文件分享平台项目，支持临时大文件切片上传，临时文本上传、下载、分享"
-  },
-  "btn": {
-    "submit": "提交",
-    "backToHome": "返回首页"
-  },
-  "file": {
-    "uploadFile": "上传文件",
-    "uploadFilePlaceholder": "拖拽文件 或 点击上传",
-    "handleType": {
-      "file-share": "文件分享",
-      "file-image-compress": "图片压缩"
+    "navbar": {
+        "file": "文件",
+        "text": "文本"
+    },
+    "i18n": {
+        "switchLocale": "切换语言"
+    },
+    "seo": {
+        "desc": "015 是一个开源的临时文件分享平台项目，支持临时大文件切片上传，临时文本上传、下载、分享"
+    },
+    "btn": {
+        "submit": "提交",
+        "backToHome": "返回首页"
+    },
+    "file": {
+        "uploadFile": "上传文件",
+        "uploadFilePlaceholder": "拖拽文件 或 点击上传",
+        "addMore": "添加更多",
+        "handleType": {
+            "file-share": "文件分享",
+            "file-image-compress": "图片压缩"
+        }
+    },
+    "text": {
+        "uploadText": "上传文本",
+        "uploadTextPlaceholder": "使用我们的文本处理器轻松分享，翻译，总结，生成图片，询问大模型",
+        "handleType": {
+            "text-share": "文本分享"
+        }
+    },
+    "pickup": {
+        "title": "输入取件码",
+        "codeError": "取件码错误",
+        "btn": "取件"
+    },
+    "fileshare": {
+        "title": "分享选项",
+        "downloadNums": "下载次数",
+        "expireTime": "过期时间",
+        "or": "或",
+        "expireAfter": "后过期",
+        "pickupCode": "取件码",
+        "passwordProtection": "密码保护",
+        "downloadNotify": "下载通知",
+        "passwordPlaceholder": "请输入密码",
+        "emailPlaceholder": "请输入邮箱",
+        "downloadOptions": {
+            "1time": "1次下载",
+            "2times": "2次下载",
+            "3times": "3次下载",
+            "5times": "5次下载",
+            "10times": "10次下载"
+        },
+        "expireOptions": {
+            "5min": "5分钟",
+            "1hour": "1小时",
+            "1day": "1天",
+            "3days": "3天"
+        }
+    },
+    "textshare": {
+        "title": "分享选项",
+        "viewNums": "浏览次数",
+        "expireTime": "过期时间",
+        "or": "或",
+        "expireAfter": "后过期",
+        "pickupCode": "取件码",
+        "passwordProtection": "密码保护",
+        "readNotify": "已读通知",
+        "passwordPlaceholder": "请输入密码",
+        "emailPlaceholder": "请输入邮箱",
+        "viewOptions": {
+            "1time": "1次浏览",
+            "2times": "2次浏览",
+            "3times": "3次浏览",
+            "5times": "5次浏览",
+            "10times": "10次浏览"
+        },
+        "expireOptions": {
+            "5min": "5分钟",
+            "1hour": "1小时",
+            "1day": "1天",
+            "3days": "3天"
+        }
+    },
+    "fileshareresult": {
+        "title": "上传成功",
+        "fileList": "文件列表",
+        "info": "信息",
+        "downloadNums": "下载次数",
+        "expireTime": "过期时间",
+        "pickupCode": "提取码",
+        "link": "链接",
+        "copySuccess": "复制成功"
+    },
+    "textshareresult": {
+        "title": "分享成功",
+        "info": "信息",
+        "viewNums": "浏览次数",
+        "expireTime": "过期时间",
+        "pickupCode": "提取码",
+        "link": "链接",
+        "content": "内容",
+        "copySuccess": "复制成功"
+    },
+    "about": {
+        "powerBy": "由 {0} 驱动的开源自托管临时文件分享平台",
+        "file": "文件",
+        "share": "分享",
+        "download": "下载",
+        "task": "任务",
+        "admin": "本站管理员",
+        "author": "作者",
+        "title": "关于",
+        "about": "关于",
+        "systemInfo": "系统信息",
+        "systemVersion": "系统版本",
+        "storage": "已托管的文件",
+        "analysis": "分析",
+        "fileSize": "文件大小",
+        "fileNum": "文件数量",
+        "processed": "处理数量",
+        "failed": "失败数量"
     }
-  },
-  "text": {
-    "uploadText": "上传文本",
-    "uploadTextPlaceholder": "使用我们的文本处理器轻松分享，翻译，总结，生成图片，询问大模型",
-    "handleType": {
-      "text-share": "文本分享"
-    }
-  },
-  "about": {
-    "file": "文件",
-    "task": "任务",
-    "admin": "站长",
-    "author": "作者",
-    "title": "关于",
-    "systemInfo": "系统信息",
-    "systemVersion": "系统版本",
-    "storage": "存储空间",
-    "analysis": "分析",
-    "fileSize": "文件大小",
-    "fileNum": "文件数量",
-    "processed": "处理数量",
-    "failed": "失败数量"
-  }
 }

front/layouts/default.vue

@@ -1,15 +1,16 @@
 <script lang="ts" setup>
 import { Toaster } from 'vue-sonner'
-await useSeo()
+const { locale } = useI18n()
+await useSeo({ locale: locale.value })
+const appConfig = useMyAppConfig()
+const bgUrl = computed(() => appConfig.value?.site_bg_url)
 </script>
 <template>
     <div class="h-screen w-screen">
         <GlobalDrawer />
+        <GlobalDayjs />
         <Toaster position="top-center" richColors closeButton />
-        <img
-            class="w-full h-full object-cover absolute inset-0 -z-[1] bg-gradient-to-bl from-primary/40 to-primary"
-            src="https://img.fudaoyuan.icu/api/1/random/?scale_min=1.5&webp=true&md=false&format=302"
-        />
+        <img class="w-full h-full object-cover absolute inset-0 -z-[1] bg-gradient-to-bl from-primary/40 to-primary" :src="bgUrl" />
         <div class="h-full w-full flex flex-col items-center lg:p-10 p-5 overflow-y-auto">
             <Navbar />
             <slot />

front/lib/getApiBaseUrl.ts

@@ -0,0 +1,5 @@
+const getApiBaseUrl = () => {
+    return import.meta.env.API_BASE_URL?.replace(/\/$/, '') || 'http://127.0.0.1:5001'
+}
+
+export default getApiBaseUrl

front/lib/renderI18n.ts

@@ -0,0 +1,16 @@
+const renderI18n = (json: Record<string, string>, defaultKey: string, locale?: string) => {
+    if (!json) return ''
+    if (!locale) {
+        return json?.[defaultKey]
+    }
+    if (!json?.[locale]) {
+        const [baseLocaleKey, subLocaleKey] = locale?.split('-') || []
+        if (!baseLocaleKey || !subLocaleKey) {
+            return json?.[defaultKey]
+        }
+        return renderI18n(json, defaultKey, baseLocaleKey)
+    }
+    return json?.[locale]
+}
+
+export default renderI18n

front/nuxt.config.ts

@@ -1,4 +1,5 @@
 import tailwindcss from '@tailwindcss/vite'
+import getApiBaseUrl from './lib/getApiBaseUrl'
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
     compatibilityDate: '2024-04-03',
@@ -35,7 +36,7 @@ export default defineNuxtConfig({
     nitro: {
         routeRules: {
             '/api/**': {
-                proxy: process.env.API_BASE_URL || 'http://127.0.0.1:1323/**',
+                proxy: `${getApiBaseUrl()}/**`,
             },
         },
     },

front/package.json

@@ -13,20 +13,21 @@
         "@nuxt/image": "1.10.0",
         "@nuxtjs/i18n": "9.5.5",
         "@pinia/nuxt": "^0.11.2",
-        "@tailwindcss/postcss": "^4.1.13",
-        "@tailwindcss/vite": "^4.1.13",
-        "@tanstack/vue-query": "^5.90.1",
-        "@tiptap/extension-blockquote": "^2.26.1",
-        "@tiptap/extension-bold": "^2.26.1",
-        "@tiptap/extension-heading": "^2.26.1",
-        "@tiptap/extension-italic": "^2.26.1",
-        "@tiptap/extension-paragraph": "^2.26.1",
-        "@tiptap/extension-placeholder": "^2.26.1",
-        "@tiptap/extension-strike": "^2.26.1",
-        "@tiptap/extension-text": "^2.26.1",
-        "@tiptap/pm": "^2.26.1",
-        "@tiptap/starter-kit": "^2.26.1",
-        "@tiptap/vue-3": "^2.26.1",
+        "@tailwindcss/postcss": "^4.1.14",
+        "@tailwindcss/vite": "^4.1.14",
+        "@tanstack/vue-query": "^5.90.5",
+        "@tiptap/extension-blockquote": "^3.7.2",
+        "@tiptap/extension-bold": "^3.7.2",
+        "@tiptap/extension-bubble-menu": "^3.7.2",
+        "@tiptap/extension-heading": "^3.7.2",
+        "@tiptap/extension-italic": "^3.7.2",
+        "@tiptap/extension-paragraph": "^3.7.2",
+        "@tiptap/extension-placeholder": "^3.7.2",
+        "@tiptap/extension-strike": "^3.7.2",
+        "@tiptap/extension-text": "^3.7.2",
+        "@tiptap/pm": "^3.7.2",
+        "@tiptap/starter-kit": "^3.7.2",
+        "@tiptap/vue-3": "^3.7.2",
         "@unovis/ts": "^1.6.1",
         "@unovis/vue": "^1.6.1",
         "@vee-validate/nuxt": "^4.15.1",
@@ -39,23 +40,23 @@
         "lodash-es": "^4.17.21",
         "lucide-vue-next": "^0.542.0",
         "markdown-it": "^14.1.0",
-        "motion-v": "^1.7.1",
+        "motion-v": "^1.7.2",
         "nanoid": "^5.1.6",
         "nuxt": "4.1.2",
         "nuxt-lucide-icons": "1.0.5",
         "pinia": "^3.0.3",
-        "pixi.js": "^8.13.2",
+        "pixi.js": "^8.14.0",
         "qrcode": "^1.5.4",
-        "reka-ui": "^2.5.0",
+        "reka-ui": "^2.5.1",
         "shadcn-nuxt": "2.0.1",
         "spark-md5": "^3.0.2",
         "tailwind-merge": "^3.3.1",
-        "tailwindcss": "^4.1.13",
-        "tiptap-markdown": "^0.8.10",
-        "tw-animate-css": "^1.3.8",
+        "tailwindcss": "^4.1.14",
+        "tiptap-markdown": "^0.9.0",
+        "tw-animate-css": "^1.4.0",
         "vaul-vue": "^0.4.1",
-        "vue": "^3.5.21",
-        "vue-router": "^4.5.1",
+        "vue": "^3.5.22",
+        "vue-router": "^4.6.3",
         "vue-sonner": "^1.3.2",
         "vue3-pixi": "1.0.0-beta.2"
     },
@@ -64,13 +65,14 @@
         "esbuild": "0.25.6"
     },
     "devDependencies": {
-        "@tailwindcss/typography": "^0.5.18",
+        "@tailwindcss/typography": "^0.5.19",
         "@types/lodash-es": "^4.17.12",
         "@types/markdown-it": "^14.1.2",
         "@types/qrcode": "^1.5.5",
         "@types/spark-md5": "^3.0.5",
         "@vueuse/core": "^13.9.0",
         "@vueuse/nuxt": "^13.9.0",
+        "typescript": "^5.9.3",
         "vue3-pixi-nuxt": "1.0.0-beta.2"
     }
 }

front/pages/about.vue

@@ -1,213 +1,15 @@
 <script setup lang="ts">
-import { CurveType } from '@unovis/ts'
-import { AreaChart } from '@/components/ui/chart-area'
-import { cx } from 'class-variance-authority'
-import { useQuery } from '@tanstack/vue-query'
-import { Skeleton } from '@/components/ui/skeleton'
-import AboutChartTooltip from '@/components/AboutChartTooltip.vue'
-import getFileSize from '~/lib/getFileSize'
-import SparkMD5 from 'spark-md5'
-import useMyAppConfig from '@/composables/useMyAppConfig'
-import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
-import Progress from '~/components/ui/progress/Progress.vue'
-
-dayjs.extend(relativeTime)
-
-const appConfig = useMyAppConfig()
-const { site_title, site_desc } = appConfig.value || {}
-
-const { data, isLoading } = useQuery({
-    queryKey: ['stat'],
-    queryFn: async () => {
-        const data = await $fetch<{ data: any }>('/api/stat')
-        return data.data
-    },
-})
+import AboutBaseInfo from '@/components/About/AboutBaseInfo.vue'
+import AboutVersionView from '@/components/About/AboutVersionView.vue'
 
 const { t } = useI18n()
-
-const chartTabs = computed(() => {
-    return [
-        {
-            label: t('about.file'),
-            value: 'storage',
-            total: data.value?.chart?.storage?.reduce((acc: number, curr: { file_size: number; file_num: number }) => acc + curr.file_num, 0) ?? 0,
-        },
-        {
-            label: t('about.task'),
-            value: 'queue',
-            total:
-                data.value?.chart?.queue?.reduce(
-                    (acc: number, curr: { processed: number; failed: number }) => acc + curr.processed + curr.failed,
-                    0
-                ) ?? 0,
-        },
-    ]
-})
-
-const currentFileSize = computed(() => {
-    return data.value?.chart?.storage?.reduce((acc: number, curr: { file_size: number; file_num: number }) => acc + curr.file_size, 0) ?? 0
-})
-
-const currentChartTab = ref<'storage' | 'queue'>('storage')
-const currentChartData = computed(() => {
-    const { storage, queue } = data.value?.chart || {}
-    if (currentChartTab.value === 'storage') {
-        return {
-            data: storage,
-            index: 'date',
-            categories: ['file_size', 'file_num'],
-            colors: ['#22d3ee', '#c084fc'],
-        }
-    }
-    return {
-        data: queue,
-        index: 'date',
-        categories: ['processed', 'failed'],
-        colors: ['#4ade80', '#f87171'],
-    }
-})
-
-const genUserAvatar = ({ email }: { email: string }) => {
-    if (!email) {
-        return '/logo.png'
-    }
-    return `https://www.gravatar.com/avatar/${SparkMD5.hash(email)}?d=retro`
-}
-
-const handleUserClick = ({ url, email }: { url: string; email: string }) => {
-    if (url) {
-        return navigateTo(url, { external: true })
-    }
-    if (email) {
-        return navigateTo(`mailto:${email}`, { external: true })
-    }
-    return null
-}
-
-const users = computed(() => {
-    const { email, name, url } = data.value?.admin || {}
-    return [
-        ...(!!name
-            ? [
-                  {
-                      title: t('about.admin'),
-                      email,
-                      name,
-                      url: url ?? (email ? `mailto:${email}` : null),
-                  },
-              ]
-            : []),
-        {
-            title: t('about.author'),
-            name: 'keven1024',
-            email: 'keven@fudaoyuan.icu',
-            url: 'https://github.com/keven1024',
-        },
-    ]
-})
 </script>
 
 <template>
     <div class="rounded-xl p-5 bg-white/50 backdrop-blur-xl w-full lg:w-200 my-5 flex flex-col gap-5">
         <div class="text-xl font-normal">{{ t('about.title') }}</div>
-        <div class="flex flex-col gap-2 items-center">
-            <NuxtImg src="/logo.png" class="size-20 rounded-xl" />
-            <div class="text-xl">{{ site_title ?? '015' }}</div>
-            <div class="text-sm opacity-75 text-center px-5">
-                {{ site_desc ?? t('seo.desc') }}
-            </div>
-        </div>
-        <div class="font-semibold">{{ t('about.systemInfo') }}</div>
-        <template v-if="isLoading">
-            <div class="flex flex-row gap-2">
-                <Skeleton class="w-full h-20 rounded-xl" v-for="i in 2" :key="i" />
-            </div>
-        </template>
-        <template v-else>
-            <div class="grid grid-cols-2 gap-2">
-                <div class="rounded-xl bg-white/50 flex-1 flex flex-col p-3">
-                    <div class="opacity-75 text-xs">{{ t('about.systemVersion') }}</div>
-                    <div class="text-xl font-semibold flex items-center gap-1">
-                        {{ data?.version ?? 'dev' }}
-                        <span class="text-xs px-2 py-0.5 rounded bg-primary/20 text-primary">{{ dayjs(data?.build_time * 1000).fromNow() }}</span>
-                    </div>
-                </div>
-                <div class="rounded-xl bg-white/50 flex-1 flex flex-col p-3">
-                    <div class="opacity-75 text-xs">{{ t('about.storage') }}</div>
-                    <div class="text-right flex flex-row items-baseline">
-                        <span class="text-lg font-semibold">{{ getFileSize(currentFileSize ?? 0) }}</span>
-                        <span class="text-md opacity-75">/ {{ getFileSize(data?.max_limit?.file_size ?? 0) }}</span>
-                    </div>
-                    <Progress class="h-1" :model-value="(currentFileSize / (data?.max_limit?.file_size ?? 0)) * 100" />
-                </div>
-            </div>
-        </template>
-        <div class="font-semibold">{{ t('about.analysis') }}</div>
-        <template v-if="isLoading">
-            <div class="flex flex-row gap-2">
-                <Skeleton class="w-full h-96 rounded-xl" />
-            </div>
-        </template>
-        <template v-else>
-            <div class="flex flex-col gap-2 bg-white/50 w-full rounded-xl py-5">
-                <div class="flex flex-row gap-2 px-5">
-                    <div
-                        :class="cx('rounded-md min-w-30 flex flex-col px-3 py-1.5 cursor-pointer', currentChartTab === tab.value && 'bg-black/10')"
-                        v-for="tab in chartTabs"
-                        :key="tab.value"
-                        @click="
-                            () => {
-                                currentChartTab = tab.value as 'storage' | 'queue'
-                            }
-                        "
-                    >
-                        <div class="opacity-75 text-xs">{{ tab.label }}</div>
-                        <div class="text-lg font-semibold">{{ tab.total }}</div>
-                    </div>
-                </div>
-                <AreaChart
-                    v-if="currentChartData"
-                    class="h-64 w-full"
-                    :key="currentChartTab"
-                    :index="currentChartData.index"
-                    :data="currentChartData.data"
-                    :categories="currentChartData.categories"
-                    :show-grid-line="false"
-                    :show-legend="false"
-                    :show-y-axis="true"
-                    :show-x-axis="true"
-                    :colors="currentChartData.colors"
-                    :custom-tooltip="AboutChartTooltip"
-                    :curve-type="CurveType.CatmullRom"
-                />
-            </div>
-        </template>
-        <template v-if="isLoading">
-            <div class="flex flex-row gap-2">
-                <Skeleton class="w-full h-20 rounded-xl" v-for="i in 2" :key="i" />
-            </div>
-        </template>
-        <template v-else>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
-                <div class="flex flex-col gap-3" v-for="user in users" :key="user.name">
-                    <div class="font-semibold">{{ user.title }}</div>
-                    <div
-                        class="rounded-xl bg-white/50 hover:bg-white/40 flex-1 flex flex-row items-center gap-2 p-3 cursor-pointer"
-                        @click="
-                            () => {
-                                handleUserClick(user)
-                            }
-                        "
-                    >
-                        <div class="size-10 rounded-full bg-white/50">
-                            <NuxtImg :src="genUserAvatar(user)" class="size-full rounded-full" />
-                        </div>
-                        <div class="text-md font-semibold">{{ user.name }}</div>
-                    </div>
-                </div>
-            </div>
-        </template>
+        <AboutBaseInfo />
+        <AboutChartView />
+        <AboutVersionView />
     </div>
 </template>

front/pages/dev.vue

@@ -9,6 +9,7 @@ import InputField from '@/components/Field/InputField.vue'
 import FormButton from '@/components/Field/FormButton.vue'
 import SelectField from '@/components/Field/SelectField.vue'
 import SwitchField from '@/components/Field/SwitchField.vue'
+import dayjs from 'dayjs'
 
 const { NODE_ENV } = process.env || {}
 const isDev = NODE_ENV === 'development'
@@ -72,6 +73,7 @@ if (!isDev) {
                 </FormButton>
             </div>
         </VeeForm>
+        <div>测试dayjs语言包渲染:{{ dayjs().add(1, 'day').fromNow() }}</div>
     </div>
 </template>
 <style scoped></style>

worker/internal/utils/asyncq.go

@@ -3,7 +3,7 @@ package utils
 import "github.com/hibiken/asynq"
 
 func RedisURI2AsynqOpt(uri string) asynq.RedisConnOpt {
-	opt, err := asynq.ParseRedisURI(GetEnv("REDIS_URL"))
+	opt, err := asynq.ParseRedisURI(GetEnv("redis.url"))
 	if err != nil {
 		panic(err)
 	}

worker/internal/utils/env.go

@@ -1,6 +1,8 @@
 package utils
 
 import (
+	"strings"
+
 	"github.com/spf13/viper"
 )
 
@@ -15,16 +17,20 @@ func InitEnv() {
 		return
 	}
 	v = viper.New()
-	v.SetConfigName(".env")
-	v.SetConfigType("env")
+	v.SetConfigName("config.yaml")
+	v.SetConfigType("yaml")
+	v.SetEnvKeyReplacer(strings.NewReplacer(".", "_"))
 	v.AddConfigPath(".")
 	v.AddConfigPath("../")
 	v.AutomaticEnv()
-	if err := v.ReadInConfig(); err != nil {
-		if _, ok := err.(viper.ConfigFileNotFoundError); !ok {
-			// 只有当错误不是"配置文件未找到"时才 panic
-			panic(err)
-		}
+	v.WatchConfig()
+	err := v.ReadInConfig()
+	if err != nil {
+		panic(err)
+		// if _, ok := err.(viper.ConfigFileNotFoundError); !ok {
+		// 	// 只有当错误不是"配置文件未找到"时才 panic
+		// 	panic(err)
+		// }
 	}
 }
 
@@ -40,3 +46,8 @@ func GetEnvWithDefault(key string, defaultValue string) string {
 	}
 	return value
 }
+
+func GetEnvMapString(key string) map[string]string {
+	InitEnv()
+	return v.GetStringMapString(key)
+}

worker/internal/utils/file.go

@@ -39,7 +39,7 @@ func GetUploadDirPath() (string, error) {
 		return "", err
 	}
 	finalPath := filepath.Join(basepath, "uploads")
-	uploadPath := GetEnvWithDefault("UPLOAD_PATH", finalPath)
+	uploadPath := GetEnvWithDefault("upload.path", finalPath)
 	if err := os.MkdirAll(uploadPath, 0755); err != nil {
 		return "", err
 	}

worker/internal/utils/redis.go

@@ -10,7 +10,7 @@ var rdb *redis.Client = InitRedis()
 var ctx = context.Background()
 
 func InitRedis() *redis.Client {
-	opt, err := redis.ParseURL(GetEnv("REDIS_URL"))
+	opt, err := redis.ParseURL(GetEnv("redis.url"))
 	if err != nil {
 		panic(err)
 	}

worker/main.go

@@ -23,8 +23,8 @@ func main() {
 	zap.ReplaceGlobals(logger)
 
 	srv := asynq.NewServer(
-		utils.RedisURI2AsynqOpt(utils.GetEnv("REDIS_URL")),
-		asynq.Config{Concurrency: cast.ToInt(utils.GetEnvWithDefault("WORKER_CONCURRENCY", "4"))},
+		utils.RedisURI2AsynqOpt(utils.GetEnv("redis.url")),
+		asynq.Config{Concurrency: cast.ToInt(utils.GetEnvWithDefault("worker.concurrency", "4"))},
 	)
 
 	mux := asynq.NewServeMux()