Merge pull request #96 from rebase-network/dev

fix: harden asset uploads and refresh dependency baselines

Author: xrdavies

README.md

@@ -26,7 +26,7 @@ Rebase 当前是一个内容驱动的社区网站，加上一套内部管理工
 nvm install
 nvm use
 corepack enable
-corepack prepare pnpm@10.6.5 --activate
+corepack prepare pnpm@10.34.1 --activate
 cp .env.example .env
 pnpm install
 pnpm local:bootstrap

apps/admin/package.json

@@ -11,14 +11,14 @@
   },
   "dependencies": {
     "@rebase/shared": "workspace:*",
-    "vue": "^3.5.13",
+    "vue": "^3.5.35",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
     "@types/node": "^22.13.10",
     "@vitejs/plugin-vue": "^5.2.3",
     "typescript": "^5.8.2",
-    "vite": "^6.2.1",
+    "vite": "^6.4.2",
     "vue-tsc": "^2.2.8"
   }
 }

apps/admin/src/lib/api.ts

@@ -33,9 +33,14 @@ const adminMessageTranslations = new Map<string, string>([
   ['asset not found', '未找到媒体文件。'],
   ['asset is still referenced', '该媒体仍被内容引用，无法删除。'],
   ['event not found', '未找到活动。'],
+  ['file content does not match its declared mime type', '文件内容与声明的类型不一致，请重新导出后再上传。'],
+  ['file is too large', '文件过大，超过当前上传上限。'],
+  ['file type is not allowed', '当前只允许上传受支持的图片、PDF 或 MP4 文件。'],
   ['job not found', '未找到招聘信息。'],
   ['internal server error', '服务端内部错误。'],
+  ['private assets are not supported by the current upload pipeline', '当前上传链路只支持公开媒体，不支持私有媒体。'],
   ['R2 delete is not configured', '当前环境未配置媒体删除能力。'],
+  ['upload request is too large', '上传请求过大，已被服务端拒绝。'],
 ]);
 
 const localizeAdminMessage = (message: string) => {

apps/admin/src/lib/format.ts

@@ -166,7 +166,7 @@ export const formatAssetVisibility = (value: 'public' | 'private') => {
     case 'public':
       return '公开';
     case 'private':
-      return '私有';
+      return '私有（历史值）';
     default:
       return value;
   }

apps/admin/src/views/AssetsPage.vue

@@ -9,6 +9,7 @@ import { formatAssetStatus, formatAssetVisibility, formatDateTime, formatFileSiz
 
 type AssetStatus = (typeof assetStatusValues)[number];
 type AssetVisibility = 'public' | 'private';
+type AssetVisibilityFilter = 'all' | AssetVisibility;
 
 interface AssetFormState {
   storageProvider: string;
@@ -29,7 +30,6 @@ interface AssetFormState {
 
 interface UploadFormState {
   folder: string;
-  visibility: AssetVisibility;
   altText: string;
   assetType: string;
 }
@@ -42,7 +42,7 @@ interface UploadQueueItem {
 
 type AssetWorkspaceMode = 'upload' | 'edit';
 
-const visibilityOptions: AssetVisibility[] = ['public', 'private'];
+const filterVisibilityOptions: AssetVisibilityFilter[] = ['all', 'public', 'private'];
 
 const createBlankForm = (bucket = 'rebase-media'): AssetFormState => ({
   storageProvider: 'r2',
@@ -63,7 +63,6 @@ const createBlankForm = (bucket = 'rebase-media'): AssetFormState => ({
 
 const createUploadForm = (): UploadFormState => ({
   folder: 'media',
-  visibility: 'public',
   altText: '',
   assetType: '',
 });
@@ -92,7 +91,7 @@ const upload = reactive<UploadFormState>(createUploadForm());
 const filters = reactive({
   query: '',
   status: 'all',
-  visibility: 'all',
+  visibility: 'all' as AssetVisibilityFilter,
 });
 
 const selectedAsset = computed(() => rows.value.find((row) => row.id === selectedAssetId.value) ?? null);
@@ -151,6 +150,13 @@ const uploadStatusMessage = computed(() => {
       return uploadConfig.value.message;
   }
 });
+const uploadMimeSummary = computed(() => {
+  const values = uploadConfig.value?.acceptedMimeTypes ?? [];
+  return values.length > 0 ? values.join('、') : '尚未配置';
+});
+const uploadLimitSummary = computed(() => (uploadConfig.value ? formatFileSize(uploadConfig.value.maxUploadBytes) : '尚未配置'));
+const legacyPrivateVisibility = computed(() => (selectedAsset.value?.visibility ?? form.visibility) === 'private');
+const editorVisibilityOptions = computed<AssetVisibility[]>(() => (legacyPrivateVisibility.value ? ['private', 'public'] : ['public']));
 const uploadProgressMessage = computed(() => {
   if (!uploading.value || !uploadProgressName.value) {
     return '';
@@ -379,15 +385,32 @@ const loadPage = async (nextSelectedId: string | null = selectedAssetId.value, p
 
 const onFilePicked = (event: Event) => {
   const input = event.target as HTMLInputElement;
-  setUploadFiles(Array.from(input.files ?? []));
+  const files = Array.from(input.files ?? []);
+  const acceptedFiles: File[] = [];
+  const rejections: string[] = [];
+
+  for (const file of files) {
+    const failure = validateSelectedUploadFile(file);
+    if (failure) {
+      rejections.push(`${file.name}：${failure}`);
+      continue;
+    }
+
+    acceptedFiles.push(file);
+  }
+
+  setUploadFiles(acceptedFiles);
+  if (rejections.length > 0) {
+    errorMessage.value = `以下文件未加入上传队列：${summarizeUploadSelectionRejections(rejections)}`;
+  }
   input.value = '';
 };
 
 const buildUploadPayload = (file: File) => {
   const payload = new FormData();
   payload.append('file', file);
   payload.append('folder', upload.folder.trim());
-  payload.append('visibility', upload.visibility);
+  payload.append('visibility', 'public');
 
   const altText = upload.altText.trim();
   if (altText) {
@@ -411,6 +434,40 @@ const summarizeUploadFailures = (failures: string[]) => {
   return `${visible}；另有 ${failures.length - 3} 个文件失败`;
 };
 
+const summarizeUploadSelectionRejections = (failures: string[]) => {
+  const visible = failures.slice(0, 3).join('；');
+  if (failures.length <= 3) {
+    return visible;
+  }
+
+  return `${visible}；另有 ${failures.length - 3} 个文件不符合限制`;
+};
+
+const formatAssetVisibilityOption = (value: AssetVisibility) => {
+  if (value === 'private') {
+    return '私有（历史值，不再支持写入）';
+  }
+
+  return '公开';
+};
+
+const validateSelectedUploadFile = (file: File) => {
+  const config = uploadConfig.value;
+  if (!config) {
+    return null;
+  }
+
+  if (file.size > config.maxUploadBytes) {
+    return `超过 ${formatFileSize(config.maxUploadBytes)}`;
+  }
+
+  if (!config.acceptedMimeTypes.includes(file.type)) {
+    return '文件类型不受支持';
+  }
+
+  return null;
+};
+
 const uploadAsset = async () => {
   if (uploadFileCount.value === 0) {
     errorMessage.value = '请先选择至少一个要上传的文件。';
@@ -644,7 +701,13 @@ const goToAssetPage = async (nextPage: number) => {
                 <span>可见性</span>
                 <select v-model="filters.visibility">
                   <option value="all">全部可见性</option>
-                  <option v-for="visibility in visibilityOptions" :key="visibility" :value="visibility">{{ formatAssetVisibility(visibility) }}</option>
+                  <option
+                    v-for="visibility in filterVisibilityOptions.filter((value) => value !== 'all')"
+                    :key="visibility"
+                    :value="visibility"
+                  >
+                    {{ formatAssetVisibility(visibility) }}
+                  </option>
                 </select>
               </label>
             </div>
@@ -762,6 +825,14 @@ const goToAssetPage = async (nextPage: number) => {
               <dt>对象目录</dt>
               <dd class="muted">{{ upload.folder || 'media' }}</dd>
             </div>
+            <div class="summary-item">
+              <dt>大小上限</dt>
+              <dd class="muted">{{ uploadLimitSummary }}</dd>
+            </div>
+            <div class="summary-item">
+              <dt>允许类型</dt>
+              <dd class="muted">{{ uploadMimeSummary }}</dd>
+            </div>
           </dl>
 
           <div v-if="uploadPreviewSrc" class="summary-item summary-asset">
@@ -814,9 +885,8 @@ const goToAssetPage = async (nextPage: number) => {
           <div class="field-grid field-grid-2">
             <label class="field">
               <span>可见性</span>
-              <select v-model="upload.visibility">
-                <option v-for="visibility in visibilityOptions" :key="visibility" :value="visibility">{{ formatAssetVisibility(visibility) }}</option>
-              </select>
+              <input value="公开" type="text" readonly />
+              <small>当前上传链路只支持公开媒体；历史 private 值不再允许新写入。</small>
             </label>
             <label class="field">
               <span>{{ uploadHasMultipleFiles ? '统一 Alt 文案（可选）' : 'Alt 文案' }}</span>
@@ -889,6 +959,9 @@ const goToAssetPage = async (nextPage: number) => {
               <h3>访问与路径</h3>
               <div class="panel-meta">{{ formatAssetVisibility(form.visibility) }}</div>
             </div>
+            <div v-if="legacyPrivateVisibility" class="field-warning">
+              这个媒体记录带有历史 `private` 值，但当前 R2 写入链路并不提供真正的私有访问控制。继续维护前请先改为公开，或等待后续引入私有桶 / 签名 URL。
+            </div>
             <div class="field-grid field-grid-2 field-grid-compact">
               <label class="field">
                 <span>存储提供方</span>
@@ -963,7 +1036,14 @@ const goToAssetPage = async (nextPage: number) => {
               <label class="field">
                 <span>可见性</span>
                 <select v-model="form.visibility">
-                  <option v-for="visibility in visibilityOptions" :key="visibility" :value="visibility">{{ formatAssetVisibility(visibility) }}</option>
+                  <option
+                    v-for="visibility in editorVisibilityOptions"
+                    :key="visibility"
+                    :value="visibility"
+                    :disabled="visibility === 'private'"
+                  >
+                    {{ formatAssetVisibilityOption(visibility) }}
+                  </option>
                 </select>
               </label>
               <label class="field">
@@ -1005,6 +1085,15 @@ const goToAssetPage = async (nextPage: number) => {
 </template>
 
 <style scoped>
+.field-warning {
+  padding: 0.72rem 0.78rem;
+  border: 1px solid rgba(167, 52, 32, 0.18);
+  border-radius: 12px;
+  background: rgba(167, 52, 32, 0.06);
+  color: var(--danger);
+  line-height: 1.5;
+}
+
 .asset-table th:first-child,
 .asset-table td:first-child {
   width: 5.4rem;

apps/api/package.json

@@ -11,13 +11,13 @@
     "bootstrap-admin": "node --env-file=../../.env --import tsx src/scripts/bootstrap-admin.ts"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.1024.0",
-    "@hono/node-server": "^1.19.1",
+    "@aws-sdk/client-s3": "^3.1064.0",
+    "@hono/node-server": "^1.19.13",
     "@rebase/db": "workspace:*",
     "@rebase/shared": "workspace:*",
-    "better-auth": "^1.3.12",
-    "drizzle-orm": "^0.41.0",
-    "hono": "^4.12.0",
+    "better-auth": "^1.6.15",
+    "drizzle-orm": "^0.45.2",
+    "hono": "^4.12.24",
     "image-size": "^2.0.2"
   },
   "devDependencies": {