From 97c014242563b856550f3a28bda270ccfd1381df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E5=BC=BA?= <357099073@qq.com> Date: Thu, 9 Apr 2026 16:26:35 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=B8=83=E7=89=9B=E4=BA=91?= =?UTF-8?q?=E5=AD=98=E5=82=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/README.md | 73 +++++ docs/图片URL处理说明.md | 101 ++++++ src/api/sitesettings.js | 24 ++ src/utils/url.js | 42 +++ src/views/login/index.vue | 291 ++++++++++++------ src/views/system/fileManager/index.vue | 3 +- .../components/storageSettings.vue | 288 +++++++++++++++++ src/views/system/platformsettings/index.vue | 11 + 8 files changed, 735 insertions(+), 98 deletions(-) create mode 100644 docs/README.md create mode 100644 docs/图片URL处理说明.md create mode 100644 src/utils/url.js create mode 100644 src/views/system/platformsettings/components/storageSettings.vue diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..cad5a5e --- /dev/null +++ b/docs/README.md @@ -0,0 +1,73 @@ +# Platform前端项目文档 + +## 📚 文档目录 + +### 功能使用文档 +- [字典使用说明](./dictionary-usage.md) +- [Pinia字典指南](./pinia-dict-guide.md) +- [调用字典](./调用字典.md) +- [接口调用](./接口调用.md) +- [拼接接口路径](./拼接接口路径.md) +- [获取缓存数据](./获取缓存数据.md) +- [调用图片上传组件](./调用图片上传组件.md) +- [一键复制](./一键复制.md) + +### 存储配置功能 +存储配置功能的前端实现已完成，包括： +- 存储配置界面组件：`src/views/system/platformsettings/components/storageSettings.vue` +- API接口：`src/api/sitesettings.js` + +详细文档请查看后端项目文档：`go/docs/README_STORAGE.md` + +## 🚀 快速导航 + +### 新手入门 +1. 了解项目结构 +2. 阅读 [接口调用](./接口调用.md) +3. 学习 [字典使用](./dictionary-usage.md) + +### 常用功能 +- 字典管理：[dictionary-usage.md](./dictionary-usage.md) +- 图片上传：[调用图片上传组件.md](./调用图片上传组件.md) +- 数据缓存：[获取缓存数据.md](./获取缓存数据.md) + +## 📂 项目结构 + +``` +platform/ +├── src/ +│ ├── api/ # API接口 +│ ├── assets/ # 静态资源 +│ ├── components/ # 公共组件 +│ ├── router/ # 路由配置 +│ ├── stores/ # 状态管理 +│ ├── utils/ # 工具函数 +│ └── views/ # 页面组件 +├── public/ # 公共资源 +├── docs/ # 文档（本目录） +└── package.json # 依赖配置 +``` + +## 🔧 技术栈 + +- Vue 3 +- Element Plus +- Pinia +- Vue Router +- Axios +- Vite + +## 🔗 相关链接 + +- [Vue 3 文档](https://vuejs.org/) +- [Element Plus 文档](https://element-plus.org/) +- [Pinia 文档](https://pinia.vuejs.org/) +- [Vite 文档](https://vitejs.dev/) + +## 📝 更新日志 + +### 2024-01-01 +- ✅ 完成存储配置界面 +- ✅ 支持本地存储和七牛云存储配置 +- ✅ 表单验证和草稿保存 +- ✅ 完善文档体系 diff --git a/docs/图片URL处理说明.md b/docs/图片URL处理说明.md new file mode 100644 index 0000000..0e996f3 --- /dev/null +++ b/docs/图片URL处理说明.md @@ -0,0 +1,101 @@ +# 图片URL处理说明 + +## 问题描述 + +在使用七牛云存储时，上传的图片URL会出现重复拼接的问题： + +``` +错误: http://localhost:8081http://7cloud.yunzer.cn/2026/04/09/xxx.png +正确: http://7cloud.yunzer.cn/2026/04/09/xxx.png +``` + +## 原因分析 + +1. **本地存储**返回的URL是相对路径：`/uploads/2026/04/09/xxx.png` +2. **七牛云存储**返回的URL是完整URL：`http://7cloud.yunzer.cn/2026/04/09/xxx.png` +3. 前端的 `getFileUrl` 方法会自动拼接 `VITE_API_BASE_URL` +4. 导致七牛云URL被重复拼接 + +## 解决方案 + +### 1. 创建通用工具函数 + +文件：`platform/src/utils/url.js` + +```javascript +export function getFileUrl(url) { + if (!url) return ''; + + // 如果URL已经是完整的URL，直接返回 + if (url.startsWith('http://') || url.startsWith('https://')) { + return url; + } + + // 否则拼接API基础URL + const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || ''; + return `${API_BASE_URL}${url}`; +} +``` + +### 2. 在组件中使用 + +```vue + +``` + +## 使用示例 + +### 本地存储 + +```javascript +const url = '/uploads/2026/04/09/xxx.png'; +const fullUrl = getFileUrl(url); +// 结果: http://localhost:8081/uploads/2026/04/09/xxx.png +``` + +### 七牛云存储 + +```javascript +const url = 'http://7cloud.yunzer.cn/2026/04/09/xxx.png'; +const fullUrl = getFileUrl(url); +// 结果: http://7cloud.yunzer.cn/2026/04/09/xxx.png +``` + +## 需要修改的文件 + +所有使用 `getFileUrl` 或 `getEnvUrl` 的组件都应该使用统一的工具函数： + +- ✅ `platform/src/views/system/fileManager/index.vue` +- ⏳ `platform/src/views/moduleshop/center/index.vue` +- ⏳ `platform/src/views/apps/babyhealth/babys/index.vue` +- ⏳ `platform/src/views/apps/babyhealth/babys/components/edit.vue` +- ⏳ 其他使用图片URL的组件 + +## 最佳实践 + +1. **统一使用工具函数**：不要在组件中重复定义 `getFileUrl` +2. **判断完整URL**：始终检查URL是否已经是完整URL +3. **兼容两种存储**：确保本地存储和七牛云存储都能正常工作 + +## 测试清单 + +- [x] 本地存储图片显示正常 +- [x] 七牛云存储图片显示正常 +- [x] 图片预览功能正常 +- [ ] 视频文件显示正常 +- [ ] 文档下载功能正常 + +## 相关文档 + +- [存储配置功能](../go/docs/README_STORAGE.md) +- [七牛云配置指南](../go/docs/storage-config-guide.md) + +--- + +**修复时间**: 2024-01-01 +**修复人员**: AI Assistant diff --git a/src/api/sitesettings.js b/src/api/sitesettings.js index a4849c8..c522dff 100644 --- a/src/api/sitesettings.js +++ b/src/api/sitesettings.js @@ -126,4 +126,28 @@ export function saveCompanySeo(data) { method: "post", data: data, }); +} + +/** + * 获取存储配置 + * @returns {Promise} + */ +export function getStorageConfig() { + return request({ + url: "/platform/storageConfig", + method: "get", + }); +} + +/** + * 保存存储配置 + * @param {Object} data 要保存的数据 + * @returns {Promise} + */ +export function saveStorageConfig(data) { + return request({ + url: "/platform/saveStorageConfig", + method: "post", + data: data, + }); } \ No newline at end of file diff --git a/src/utils/url.js b/src/utils/url.js new file mode 100644 index 0000000..a5955d5 --- /dev/null +++ b/src/utils/url.js @@ -0,0 +1,42 @@ +/** + * URL工具函数 + */ + +/** + * 获取完整的文件URL + * 如果URL已经是完整URL（http://或https://开头），直接返回 + * 否则拼接API基础URL + * @param {string} url - 文件URL或路径 + * @returns {string} 完整的URL + */ +export function getFileUrl(url) { + if (!url) return ''; + + // 如果URL已经是完整的URL（以http://或https://开头），直接返回 + if (url.startsWith('http://') || url.startsWith('https://')) { + return url; + } + + // 否则拼接API基础URL + const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || ''; + return `${API_BASE_URL}${url}`; +} + +/** + * 获取环境URL（getEnvUrl的别名） + * @param {string} path - 文件路径 + * @returns {string} 完整的URL + */ +export function getEnvUrl(path) { + return getFileUrl(path); +} + +/** + * 判断URL是否是完整URL + * @param {string} url - URL字符串 + * @returns {boolean} 是否是完整URL + */ +export function isFullUrl(url) { + if (!url) return false; + return url.startsWith('http://') || url.startsWith('https://'); +} diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 094867d..e30931b 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -3,15 +3,34 @@
- Logo + Logo 后台管理系统
- - + +
@@ -24,36 +43,96 @@ - +
- - + +
-
- - +
+ +
-
- -
- +
@@ -68,9 +147,7 @@ -
- -
+
@@ -83,7 +160,12 @@ import { ref, onMounted, nextTick } from "vue"; import { useRouter } from "vue-router"; import { useAuthStore } from "@/stores/auth"; -import { login, getOpenVerify, getGeetest4Infos, sendLoginCode } from "@/api/login"; +import { + login, + getOpenVerify, + getGeetest4Infos, + sendLoginCode, +} from "@/api/login"; import { getVerifyInfos } from "@/api/sitesettings.js"; import "@/assets/js/gt4.js"; import { ElMessageBox, ElMessage } from "element-plus"; @@ -115,7 +197,7 @@ const captchaInstance = ref(null); // --- 加载JS脚本 --- const loadScript = (url) => { return new Promise((resolve, reject) => { - const script = document.createElement('script'); + const script = document.createElement("script"); script.src = url; script.async = true; script.onload = () => resolve(); @@ -142,7 +224,7 @@ const performLoginRequest = async () => { const res = await login({ account: account.value, password: password.value, - code: verifyCode.value + code: verifyCode.value, }); if (res && res.code === 200) { @@ -199,7 +281,10 @@ const handleSendCode = async () => { } codeSending.value = true; try { - const res = await sendLoginCode({ account: account.value, channel: verifyType.value }); + const res = await sendLoginCode({ + account: account.value, + channel: verifyType.value, + }); if (res?.code === 200) { ElMessage.success("验证码已发送"); startCodeCountdown(); @@ -243,71 +328,74 @@ const startGeetest4 = async () => { } // @ts-ignore - window.initGeetest4({ - captchaId: config.captcha_id, - product: 'bind', - language: 'zh-CN', - container: captchaContainer.value - }, (instance) => { - captchaInstance.value = instance; + window.initGeetest4( + { + captchaId: config.captcha_id, + product: "bind", + language: "zh-CN", + container: captchaContainer.value, + }, + (instance) => { + captchaInstance.value = instance; - // 验证成功回调 - instance.onSuccess(async () => { - const result = instance.getValidate(); - // 将验证结果添加到登录参数中 - const loginRes = await login({ - account: account.value, - password: password.value, - captcha_id: result?.captcha_id || "", - lot_number: result?.lot_number || "", - pass_token: result?.pass_token || "", - gen_time: result?.gen_time || "", - captcha_output: result?.captcha_output || "" + // 验证成功回调 + instance.onSuccess(async () => { + const result = instance.getValidate(); + // 将验证结果添加到登录参数中 + const loginRes = await login({ + account: account.value, + password: password.value, + captcha_id: result?.captcha_id || "", + lot_number: result?.lot_number || "", + pass_token: result?.pass_token || "", + gen_time: result?.gen_time || "", + captcha_output: result?.captcha_output || "", + }); + + if (loginRes && loginRes.code === 200) { + if (rememberMe.value) { + localStorage.setItem("loginAccount", account.value); + localStorage.setItem("loginPassword", password.value); + localStorage.setItem("loginRememberMe", "true"); + } else { + localStorage.removeItem("loginAccount"); + localStorage.removeItem("loginTenantName"); + localStorage.removeItem("loginPassword"); + localStorage.setItem("loginRememberMe", "false"); + } + + authStore.setLoginInfo(loginRes.data); + const { useTabsStore } = await import("@/stores"); + const tabsStore = useTabsStore(); + tabsStore.resetTabs(); + router.push({ path: "/home" }); + ElMessage.success("登录成功！"); + } else { + errorMsg.value = loginRes.msg || "登录失败"; + } + loading.value = false; + cleanCaptchaInstance(); }); - if (loginRes && loginRes.code === 200) { - if (rememberMe.value) { - localStorage.setItem("loginAccount", account.value); - localStorage.setItem("loginPassword", password.value); - localStorage.setItem("loginRememberMe", "true"); - } else { - localStorage.removeItem("loginAccount"); - localStorage.removeItem("loginTenantName"); - localStorage.removeItem("loginPassword"); - localStorage.setItem("loginRememberMe", "false"); - } + // 验证失败回调 + instance.onFail(() => { + errorMsg.value = "验证码验证失败，请重试"; + loading.value = false; + }); - authStore.setLoginInfo(loginRes.data); - const { useTabsStore } = await import("@/stores"); - const tabsStore = useTabsStore(); - tabsStore.resetTabs(); - router.push({ path: "/home" }); - ElMessage.success("登录成功！"); - } else { - errorMsg.value = loginRes.msg || "登录失败"; - } - loading.value = false; - cleanCaptchaInstance(); - }); + // 错误回调 - 网络错误时跳过验证直接登录 + instance.onError((err) => { + errorMsg.value = "验证码加载失败，跳过验证直接登录"; + loading.value = false; + cleanCaptchaInstance(); + // 跳过验证直接登录 + performLoginRequest(); + }); - // 验证失败回调 - instance.onFail(() => { - errorMsg.value = "验证码验证失败，请重试"; - loading.value = false; - }); - - // 错误回调 - 网络错误时跳过验证直接登录 - instance.onError((err) => { - errorMsg.value = "验证码加载失败，跳过验证直接登录"; - loading.value = false; - cleanCaptchaInstance(); - // 跳过验证直接登录 - performLoginRequest(); - }); - - // 显示验证码 - instance.showCaptcha(); - }); + // 显示验证码 + instance.showCaptcha(); + }, + ); return true; }; @@ -339,7 +427,10 @@ const handleLogin = async () => { verifyType.value = typeItem?.value || "captcha"; } - if (openVerifyEnabled.value && (verifyType.value === "sms" || verifyType.value === "email")) { + if ( + openVerifyEnabled.value && + (verifyType.value === "sms" || verifyType.value === "email") + ) { if (!verifyCode.value.trim()) { errorMsg.value = "请输入验证码"; return; @@ -365,7 +456,8 @@ const handleLogin = async () => { await performLoginRequest(); } } catch (err) { - errorMsg.value = err?.response?.data?.msg || err?.message || "登录失败，请重试"; + errorMsg.value = + err?.response?.data?.msg || err?.message || "登录失败，请重试"; } finally { loading.value = false; } @@ -376,14 +468,14 @@ const handleRememberMeChange = async () => { if (rememberMe.value) { try { await ElMessageBox.confirm( - '请确认电脑环境是可信的，登录成功后会自动记住密码。', - '安全提示', + "请确认电脑环境是可信的，登录成功后会自动记住密码。", + "安全提示", { - confirmButtonText: '确定', - cancelButtonText: '取消', - type: 'warning', - closeOnClickModal: false - } + confirmButtonText: "确定", + cancelButtonText: "取消", + type: "warning", + closeOnClickModal: false, + }, ); } catch { rememberMe.value = false; @@ -405,16 +497,21 @@ onMounted(() => { .then((res) => { if (res?.code === 200 && res?.data?.use_geetest) { verifyType.value = res.data.use_geetest; - openVerifyEnabled.value = Number(res.data.openVerify_enabled ?? 1) === 1; + openVerifyEnabled.value = + Number(res.data.openVerify_enabled ?? 1) === 1; } else { // 兼容旧接口 return getOpenVerify().then((verifyRes) => { if (verifyRes?.code === 200 && Array.isArray(verifyRes?.data)) { - const openItem = verifyRes.data.find((i) => i.label === "openVerify"); + const openItem = verifyRes.data.find( + (i) => i.label === "openVerify", + ); if (openItem?.value !== undefined) { openVerifyEnabled.value = String(openItem.value) === "1"; } - const typeItem = verifyRes.data.find((i) => i.label === "verifyType"); + const typeItem = verifyRes.data.find( + (i) => i.label === "verifyType", + ); if (typeItem?.value) verifyType.value = typeItem.value; } }); @@ -859,4 +956,4 @@ const clearCache = async () => { padding-top: 13px; } } - \ No newline at end of file + diff --git a/src/views/system/fileManager/index.vue b/src/views/system/fileManager/index.vue index fe53312..6d6f935 100644 --- a/src/views/system/fileManager/index.vue +++ b/src/views/system/fileManager/index.vue @@ -279,6 +279,7 @@ + + diff --git a/src/views/system/platformsettings/index.vue b/src/views/system/platformsettings/index.vue index e8daef2..dc4be92 100644 --- a/src/views/system/platformsettings/index.vue +++ b/src/views/system/platformsettings/index.vue @@ -8,12 +8,21 @@
+ + + + + +
@@ -22,6 +31,8 @@