feat(splash): 添加全局开屏图片功能并优化客户端启动流程
- 新增全局开屏图片上传、获取、删除接口 - 实现客户端全局开屏图片优先加载机制 - 集成七牛云存储配置从 pxdj 切换到 bydj - 优化 splash 窗口显示逻辑确保至少显示 2 秒 - 添加全局开屏图片管理界面组件 - 更新应用配置和构建设置 - 修复多处图片缓存和加载问题 - 调整服务端 API 地址配置 - 修改微信客服联系方式
This commit is contained in:
@@ -1,35 +0,0 @@
|
||||
const { run } = require('runjs')
|
||||
const chalk = require('chalk')
|
||||
const config = require('../vue.config.js')
|
||||
const rawArgv = process.argv.slice(2)
|
||||
const args = rawArgv.join(' ')
|
||||
|
||||
if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
|
||||
const report = rawArgv.includes('--report')
|
||||
|
||||
run(`vue-cli-service build ${args}`)
|
||||
|
||||
const port = 9526
|
||||
const publicPath = config.publicPath
|
||||
|
||||
var connect = require('connect')
|
||||
var serveStatic = require('serve-static')
|
||||
const app = connect()
|
||||
|
||||
app.use(
|
||||
publicPath,
|
||||
serveStatic('./dist', {
|
||||
index: ['index.html', '/']
|
||||
})
|
||||
)
|
||||
|
||||
app.listen(port, function () {
|
||||
console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`))
|
||||
if (report) {
|
||||
console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`))
|
||||
}
|
||||
|
||||
})
|
||||
} else {
|
||||
run(`vue-cli-service build ${args}`)
|
||||
}
|
||||
31
ruoyi-ui/src/api/monitor/splash.js
Normal file
31
ruoyi-ui/src/api/monitor/splash.js
Normal file
@@ -0,0 +1,31 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 上传全局开屏图片
|
||||
export function uploadGlobalSplashImage(file) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
return request({
|
||||
url: '/monitor/account/global-splash-image/upload',
|
||||
method: 'post',
|
||||
data: formData,
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取全局开屏图片
|
||||
export function getGlobalSplashImage() {
|
||||
return request({
|
||||
url: '/monitor/account/global-splash-image',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 删除全局开屏图片
|
||||
export function deleteGlobalSplashImage() {
|
||||
return request({
|
||||
url: '/monitor/account/global-splash-image/delete',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
@@ -6,6 +6,63 @@
|
||||
<el-button type="success" icon="el-icon-upload" size="mini" @click="handleUpload" v-hasPermi="['system:version:upload']">上传新版本</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 开屏图片设置卡片 -->
|
||||
<el-row :gutter="20" class="mb8">
|
||||
<el-col :span="24">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>开屏图片设置</span>
|
||||
<span style="color: #909399; font-size: 12px; margin-left: 10px;">（客户端启动时显示的图片）</span>
|
||||
</div>
|
||||
<div class="splash-setting">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<div class="splash-preview">
|
||||
<div class="preview-label">当前开屏图片</div>
|
||||
<div class="preview-box" v-loading="splashLoading">
|
||||
<img v-if="globalSplashImage" :src="globalSplashImage" alt="开屏图片" class="preview-image" />
|
||||
<div v-else class="preview-empty">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
<span>暂未设置</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div class="splash-actions">
|
||||
<el-upload
|
||||
ref="splashUpload"
|
||||
action="#"
|
||||
:limit="1"
|
||||
accept="image/*"
|
||||
:show-file-list="false"
|
||||
:auto-upload="false"
|
||||
:on-change="handleSplashFileChange">
|
||||
<el-button type="primary" icon="el-icon-upload" :loading="splashUploading">
|
||||
{{ splashUploading ? '上传中...' : '上传开屏图片' }}
|
||||
</el-button>
|
||||
</el-upload>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDeleteSplash"
|
||||
:disabled="!globalSplashImage"
|
||||
style="margin-left: 10px;">
|
||||
删除图片
|
||||
</el-button>
|
||||
<div class="upload-tip">
|
||||
<p>建议尺寸：1200 x 800 像素，支持 jpg/png/gif 格式，大小不超过 5MB</p>
|
||||
<p>此图片将作为所有客户端的默认开屏图片</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 版本信息卡片 -->
|
||||
<el-row :gutter="20" class="mb8">
|
||||
<el-col :span="12">
|
||||
@@ -106,6 +163,7 @@
|
||||
|
||||
<script>
|
||||
import { getVersionInfo, uploadFile, updateVersion } from "@/api/monitor/version"
|
||||
import { getGlobalSplashImage, uploadGlobalSplashImage, deleteGlobalSplashImage } from "@/api/monitor/splash"
|
||||
|
||||
export default {
|
||||
name: "Version",
|
||||
@@ -164,13 +222,72 @@ export default {
|
||||
// 上传加载状态
|
||||
uploadLoading: false,
|
||||
// 上传进度
|
||||
uploadProgress: 0
|
||||
uploadProgress: 0,
|
||||
// 开屏图片相关
|
||||
globalSplashImage: '',
|
||||
splashLoading: false,
|
||||
splashUploading: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getVersionInfo();
|
||||
this.getGlobalSplashImage();
|
||||
},
|
||||
methods: {
|
||||
/** 获取全局开屏图片 */
|
||||
getGlobalSplashImage() {
|
||||
this.splashLoading = true;
|
||||
getGlobalSplashImage().then(response => {
|
||||
this.splashLoading = false;
|
||||
if (response.code === 200 && response.data) {
|
||||
this.globalSplashImage = response.data.url || '';
|
||||
}
|
||||
}).catch(() => {
|
||||
this.splashLoading = false;
|
||||
});
|
||||
},
|
||||
/** 处理开屏图片文件选择 */
|
||||
handleSplashFileChange(file) {
|
||||
if (!file || !file.raw) return;
|
||||
|
||||
// 验证文件类型
|
||||
if (!file.raw.type.startsWith('image/')) {
|
||||
this.$modal.msgError("只支持图片文件");
|
||||
return;
|
||||
}
|
||||
// 验证文件大小
|
||||
if (file.raw.size > 5 * 1024 * 1024) {
|
||||
this.$modal.msgError("图片大小不能超过5MB");
|
||||
return;
|
||||
}
|
||||
|
||||
this.splashUploading = true;
|
||||
uploadGlobalSplashImage(file.raw).then(response => {
|
||||
this.splashUploading = false;
|
||||
if (response.code === 200) {
|
||||
this.$modal.msgSuccess("开屏图片上传成功");
|
||||
this.globalSplashImage = response.url;
|
||||
} else {
|
||||
this.$modal.msgError(response.msg || "上传失败");
|
||||
}
|
||||
}).catch(() => {
|
||||
this.splashUploading = false;
|
||||
this.$modal.msgError("上传失败");
|
||||
});
|
||||
},
|
||||
/** 删除开屏图片 */
|
||||
handleDeleteSplash() {
|
||||
this.$modal.confirm('确定要删除全局开屏图片吗？删除后客户端将使用默认图片。').then(() => {
|
||||
deleteGlobalSplashImage().then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
this.globalSplashImage = '';
|
||||
} else {
|
||||
this.$modal.msgError(response.msg || "删除失败");
|
||||
}
|
||||
});
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 查询版本信息 */
|
||||
getVersionInfo() {
|
||||
getVersionInfo().then(response => {
|
||||
@@ -316,4 +433,54 @@ export default {
|
||||
.box-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
/* 开屏图片设置样式 */
|
||||
.splash-setting {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.splash-preview {
|
||||
text-align: center;
|
||||
}
|
||||
.preview-label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.preview-box {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
border: 1px dashed #dcdfe6;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fafafa;
|
||||
overflow: hidden;
|
||||
}
|
||||
.preview-image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.preview-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #909399;
|
||||
}
|
||||
.preview-empty i {
|
||||
font-size: 48px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.splash-actions {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.upload-tip {
|
||||
margin-top: 15px;
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.upload-tip p {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user