4.29技术中心合并前更改

Co-authored-by: Copilot <copilot@github.com>

pdf-preview-site/frontend/.env.development

@@ -0,0 +1,2 @@
+# 开发环境：前后端分离，后端运行在 3000 端口
+VITE_API_BASE_URL=http://localhost:3000

pdf-preview-site/frontend/.env.production

@@ -0,0 +1,2 @@
+# 生产环境：前端由后端托管，API 使用相对路径（空字符串即可）
+VITE_API_BASE_URL=

pdf-preview-site/frontend/README.md

@@ -1,5 +1,25 @@
-# Vue 3 + Vite
+# PDF 预览系统 - 前端 (Frontend)
 
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+这是基于 Vue 3 和 Vite 构建的现代化前端界面。
 
-Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
+## 🔐 管理员入口
+
+如果你想进入管理后台：
+- **地址**: 访问网站首页并在 URL 后添加 `/admin` (例如: `http://localhost:5173/admin`)
+- **账号**: `admin`
+- **密码**: `123456`
+
+## 🛠 常用命令
+
+```bash
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run dev
+
+# 构建生产版本
+npm run build
+```
+
+有关完整项目说明，请参阅根目录下的 [README.md](../README.md)。

pdf-preview-site/frontend/src/views/Admin.vue

@@ -61,6 +61,8 @@
 import { ref, onMounted } from 'vue';
 import axios from 'axios';
 
+const API = import.meta.env.VITE_API_BASE_URL;
+
 const isLoggedIn = ref(false);
 const username = ref('');
 const password = ref('');
@@ -82,7 +84,7 @@ onMounted(() => {
 
 const handleLogin = async () => {
   try {
-    const res = await axios.post('http://localhost:3000/api/admin/login', {
+    const res = await axios.post(`${API}/api/admin/login`, {
       username: username.value,
       password: password.value
     });
@@ -102,7 +104,7 @@ const logout = () => {
 
 const fetchDocs = async () => {
   try {
-    const res = await axios.get('http://localhost:3000/api/documents');
+    const res = await axios.get(`${API}/api/documents`);
     documents.value = res.data;
   } catch (e) {
     console.error("Failed to load documents");
@@ -122,7 +124,7 @@ const handleUpload = async () => {
 
   try {
     const token = localStorage.getItem('admin_token');
-    await axios.post('http://localhost:3000/api/admin/upload', formData, {
+    await axios.post(`${API}/api/admin/upload`, formData, {
       headers: {
         'Content-Type': 'multipart/form-data',
         'Authorization': `Bearer ${token}`
@@ -145,7 +147,7 @@ const deleteDoc = async (id) => {
     if(!confirm("确定要执行此操作吗？")) return;
     try {
         const token = localStorage.getItem('admin_token');
-        await axios.delete(`http://localhost:3000/api/admin/documents/${id}`, {
+        await axios.delete(`${API}/api/admin/documents/${id}`, {
             headers: { 'Authorization': `Bearer ${token}` }
         });
         fetchDocs();

pdf-preview-site/frontend/src/views/Home.vue

@@ -31,10 +31,11 @@ import axios from 'axios';
 const documents = ref([]);
 const loading = ref(true);
 const router = useRouter();
+const API = import.meta.env.VITE_API_BASE_URL;
 
 onMounted(async () => {
   try {
-    const res = await axios.get('http://localhost:3000/api/documents');
+    const res = await axios.get(`${API}/api/documents`);
     documents.value = res.data;
   } catch (error) {
     console.error("Error fetching docs", error);

pdf-preview-site/frontend/src/views/Preview.vue

@@ -27,12 +27,18 @@ const router = useRouter();
 const document = ref(null);
 const loading = ref(true);
 const error = ref('');
+const API = import.meta.env.VITE_API_BASE_URL;
 
 onMounted(async () => {
   try {
     const id = route.params.id;
-    const res = await axios.get(`http://localhost:3000/api/documents/${id}`);
-    document.value = res.data;
+    const res = await axios.get(`${API}/api/documents/${id}`);
+    // 将相对路径拼接为完整 URL，解决开发模式下跨端口访问问题
+    const data = res.data;
+    if (data.url && data.url.startsWith('/')) {
+      data.url = `${API}${data.url}`;
+    }
+    document.value = data;
   } catch (err) {
     error.value = "文档未找到或无法访问。";
   } finally {

pdf-preview-site/frontend/vite.config.js

@@ -4,4 +4,9 @@ import vue from '@vitejs/plugin-vue'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  build: {
+    // Build output goes directly into the backend's public folder
+    outDir: '../backend/public',
+    emptyOutDir: true,
+  },
 })