c-zhouhf1/zhgh_zjvtit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
c-zhangr1
2026-08-26 14:25:17 +08:00
commit 06debfd1fc
10595 changed files with 1836924 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
target/classes/views/layouts/blank.html
View File
target/classes/views/layouts/pagination.html
+11
View File
@@ -0,0 +1,11 @@
<el-row class="el-pagination-container" style="margin-top: 20px">
<el-pagination
@size-change="pageSizeChange"
@current-change="pageNumberChange"
:current-page="pageForm.pageNumber"
:page-sizes="[5,10, 20, 30, 50]"
:page-size="pageForm.pageSize"
layout="total, sizes, prev, pager, next"
:total="pageForm.totalCount"
></el-pagination>
</el-row>
target/classes/views/layouts/platform.html
+548
View File
@@ -0,0 +1,548 @@
<!--#
layout("/layouts/v4/baseLayout.html"){
#-->
<style>
.sub-app-container {
margin: 0 auto;
background: #fff;
display: flex;
overflow: hidden;
min-height: calc(100vh - 64px);
box-sizing: border-box;
}
.sidebar-menu {
width: 250px;
background: rgb(35 85 120);
color: #fff;
flex-shrink: 0;
height: calc(100vh - 64px);
display: flex;
flex-direction: column;
}
.menu-header {
padding: 20px;
background: rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
flex-shrink: 0;
}
.menu-title {
font-size: 18px;
font-weight: 600;
margin: 0;
}
#sidebar-menu .el-scrollbar {
flex: 1;
}
#sidebar-menu .el-scrollbar .el-scrollbar__wrap {
overflow-x: hidden;
margin-bottom: 0 !important;
}
#sidebar-menu .el-menu {
background: transparent;
border: none;
}
#sidebar-menu .el-menu .el-submenu__title {
color: #ffffff;
}
#sidebar-menu .el-menu .el-submenu__title i,
#sidebar-menu .el-menu .el-menu-item i {
color: inherit;
}
#sidebar-menu .el-menu .el-submenu__title:hover {
background: rgba(0, 0, 0, 0.1);
}
#sidebar-menu .el-menu .el-menu-item {
color: inherit;
}
#sidebar-menu .el-menu .el-menu-item.is-active {
background: rgba(0, 0, 0, 0.1);
}
#sidebar-menu .el-menu .el-menu-item:focus,
.el-menu-item:hover {
background: rgba(0, 0, 0, 0.1);
}
#sidebar-menu .el-menu .el-menu-item a {
text-decoration: none;
color: inherit;
display: inline-block;
width: 100%;
}
.sub-app-container-main-content {
flex: 1;
padding: 10px;
background: #f6f6f6;
box-sizing: border-box;
overflow: auto;
height: calc(100vh - 64px);
}
.content-header {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
.content-title {
font-size: 24px;
font-weight: 600;
color: #2c3e50;
margin: 0;
}
.content-subtitle {
color: #7f8c8d;
margin-top: 5px;
font-size: 14px;
}
.content-body {
min-height: 400px;
height: 100%;
}
/* 悬浮菜单按钮样式 */
.menu-toggle-btn {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgb(64 109 157);
color: white;
text-align: center;
line-height: 50px;
font-size: 24px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
z-index: 1000;
cursor: pointer;
transition: all 0.3s ease;
}
.menu-toggle-btn:hover {
background-color: rgb(54 99 147);
transform: scale(1.05);
}
.menu-toggle-btn.active {
background-color: #d9534f;
}
/* 菜单遮罩层样式 */
.menu-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 998;
}
@media (max-width: 768px) {
.sidebar-menu {
position: fixed;
top: 64px;
left: -100%;
width: 40%;
z-index: 999;
transition: left 0.3s ease;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
}
.sidebar-menu.show {
left: 0;
}
.menu-toggle-btn {
display: block;
}
.menu-overlay.show {
display: block;
}
.main-content {
padding: 20px;
width: 100%;
}
}
</style>
<div class="sub-app-container" id="sub-app-container">
<!-- 菜单遮罩层 -->
<div class="menu-overlay" id="menu-overlay"></div>
<!-- 左侧菜单区域 -->
<nav class="sidebar-menu" id="sidebar-menu">
<div class="menu-header">
<h2 class="menu-title">子系统</h2>
</div>
<el-scrollbar>
<el-menu unique-opened :default-active="activeMenuIndex" :default-openeds="openedMenus"
@select="menuSelect">
<menu-list :menus="leftMenus" :depth="0"></menu-list>
</el-menu>
</el-scrollbar>
</nav>
<!-- 右侧主体区域 -->
<main class="sub-app-container-main-content" id="sub-app-container-main-content">
<div class="content-body" id="sub-app-container-main-content-body">${layoutContent!}</div>
</main>
<!-- 悬浮菜单按钮 -->
<div class="menu-toggle-btn" id="menu-toggle-btn">
<i class="fa fa-bars"></i>
</div>
<!-- 子应用ID -->
<div id="sub-app-id" style="display: none"></div>
</div>
<script nonce="${cspNonce!}">
// 初始化pjax加载
;(function initPjax() {
$(document).pjax("#sidebar-menu a[data-pjax]", "#sub-app-container-main-content-body", {
maxCacheLength: 0,
push: true,
replace: false,
fragment: "#sub-app-container-main-content-body",
timeout: 8000
})
$(document).on("pjax:send", function () {
NProgress.configure({parent: ".sub-app-container-main-content"})
NProgress.start()
$("#sub-app-container-main-content").hide()
})
$(document).on("pjax:complete", function () {
NProgress.done()
$("#sub-app-container-main-content").show()
})
try {
const app = JSON.parse(window.sessionStorage.getItem("zhgh_sub_app"))
$("#sub-app-container #sidebar-menu .menu-header .menu-title").text(app?.name)
} catch (e) {
}
})()
new Vue({
el: "#sidebar-menu",
components: {
"menu-list": {
name: "menu-list",
template:
/*language=HTML*/
`
<div>
<template v-for="(item, index) in menus">
<el-submenu :index="item.id" v-if="item.children && item.children.length > 0">
<template #title>
<i :class="item.icon" v-if="item.icon" :size="18"></i>
<i v-else class="el-icon-paperclip"></i>
<span>{{ item.name }}</span>
</template>
<menu-list :menus="item.children" :depth="depth + 1"/>
</el-submenu>
<el-menu-item :index="item.id" v-else>
<a :href="item.href" data-pjax>
<i :class="item.icon" v-if="item.icon" :size="18"></i>
<i v-else :class="item.icon ? item.icon : 'el-icon-menu'"></i>
<span>{{ item.name }}</span>
</a>
</el-menu-item>
</template>
</div>
`,
props: ["menus", "depth"]
}
},
data() {
return {
// 菜单数据
menus: [],
// 当前激活的菜单索引
activeMenuIndex: null,
// 当前打开的菜单索引
openedMenus: [],
// 默认选中菜单是否加载中
defaultSelectLoading: true
}
},
computed: {
leftMenus() {
if (this.menus) {
return this.menus
} else {
try {
return JSON.parse(window.sessionStorage.getItem("zhgh_sub_app_menus"))
} catch (e) {
return []
}
}
}
},
methods: {
menuSelect(index, indexPath) {
try {
const app = JSON.parse(window.sessionStorage.getItem("zhgh_sub_app"))
window.sessionStorage.setItem("zhgh_sub_app_left_menu_active_index-" + app.id, index)
window.sessionStorage.setItem("zhgh_sub_app_left_menu_opens-" + app.id, JSON.stringify(indexPath))
} catch (e) {
}
},
// 获取菜单
getMenus(appId) {
if (!appId) return
this.$axios.post("/platform/sys/user/subAppMenus", {appId}).then((res) => {
if (res.code === 0) {
this.menus = res.data
window.sessionStorage.setItem("zhgh_sub_app_menus", JSON.stringify(res.data))
this.echoMenus()
} else {
this.menus = []
}
})
},
// 设置应用信息
setAppInfo(app) {
if (app) {
// 储存到缓存
window.sessionStorage.setItem("zhgh_sub_app", JSON.stringify(app))
// 储存到div中
document.getElementById("sub-app-id").innerText = app.id
try {
const app = JSON.parse(window.sessionStorage.getItem("zhgh_sub_app"))
$("#sub-app-container #sidebar-menu .menu-header .menu-title").text(app?.name)
} catch (e) {
}
}
},
// 菜单回显
echoMenus() {
try {
const app = JSON.parse(window.sessionStorage.getItem("zhgh_sub_app"))
this.activeMenuIndex = window.sessionStorage.getItem("zhgh_sub_app_left_menu_active_index-" + app.id)
this.openedMenus = JSON.parse(window.sessionStorage.getItem("zhgh_sub_app_left_menu_opens-" + app.id)) || []
// !this.activeMenuIndex &&
if ('/platform/v4/subApp' === getBaseSubAppPath()) {
this.defaultSelect()
} else {
this.hrefSelect()
}
} catch (e) {
}
},
// 地址选中
hrefSelect() {
const targetHref = this.getMenuOwnerPath()
function findMenuPath(menus, targetHref) {
function search(items, path) {
for (const item of items) {
// 如果当前项匹配 href，返回路径（包含自己）
if (item.href === targetHref) {
return [...path, item];
}
// 如果有子菜单，递归查找
if (item.children?.length) {
const result = search(item.children, [...path, item]);
if (result) return result;
}
}
return null;
}
return search(menus, []);
}
const result = findMenuPath(this.menus, targetHref)
if(result){
this.activeMenuIndex = result[result.length-1]['id']
this.openedMenus = result.map(v=>v.id)
this.$nextTick(() => {
this.menuSelect(this.activeMenuIndex, this.openedMenus)
})
}
},
// 默认选中
getMenuOwnerPath() {
const pathname = window.location.pathname
if (pathname === "/platform/qsv/survey/reportPage") {
return "/platform/qsv/survey"
}
if (pathname === "/platform/qsv/new") {
return "/platform/qsv/activity"
}
return pathname
},
getMenuOwnerFullPath() {
if (window.location.pathname === "/platform/qsv/survey/reportPage") {
return "/platform/qsv/survey"
}
if (window.location.pathname === "/platform/qsv/new") {
return "/platform/qsv/activity"
}
return getFullSubAppPath()
},
defaultSelect() {
// 查找第一个有href的子菜单
function findFirstChildWithHref(menus) {
for (const menu of menus) {
// 如果当前菜单有href，返回它
if (menu.href) {
return {
menu: menu,
parentIds: [menu.parentId]
};
}
// 如果有子菜单，递归查找
if (menu.children && menu.children.length > 0) {
const result = findFirstChildWithHref(menu.children);
if (result) {
// 添加当前菜单的ID到父ID集合
result.parentIds.push(menu.id);
return result;
}
}
}
return null;
}
const result = findFirstChildWithHref(this.menus)
if (result) {
this.activeMenuIndex = result.menu.id
this.openedMenus = result.parentIds
this.$nextTick(() => {
this.menuSelect(this.activeMenuIndex, this.openedMenus)
// 使用pjax跳转
commonUtil.pjaxPush(getBaseSubAppPath(result.menu.href))
/*const tempLink = document.createElement('a')
tempLink.href = result.menu.href
tempLink.setAttribute('data-pjax', '')
tempLink.style.display = 'none'
document.body.appendChild(tempLink)
tempLink.click()
document.body.removeChild(tempLink)*/
})
return
}
// 没有已授权的可用子菜单时，才使用当前应用自身配置的地址作为兜底入口。
try {
const rootApp = JSON.parse(window.sessionStorage.getItem("zhgh_sub_app"))
const currentAppId = GetQueryString("appId")
const hasRootHref = rootApp && typeof rootApp.href === "string" && rootApp.href.trim() !== ""
// 校验缓存应用与当前URL一致，避免复用旧标签页缓存时跳转到其他应用。
if (hasRootHref && String(rootApp.id) === currentAppId) {
this.activeMenuIndex = rootApp.id
this.openedMenus = []
this.$nextTick(() => {
this.menuSelect(this.activeMenuIndex, this.openedMenus)
commonUtil.pjaxPush(getBaseSubAppPath(rootApp.href))
})
}
} catch (e) {
// 根菜单缓存缺失或格式异常时保持当前页面，不执行无权限地址跳转。
}
},
init() {
// 页面加载时获取到正确的菜单
const pathname = window.location.pathname
if (!pathname.startsWith("/platform/v4/subApp")) {
const path = this.getMenuOwnerFullPath()
this.$axios.post("/platform/sys/user/rootMenuByPath", {pathname: path}).then((res) => {
if (res.code === 0) {
this.setAppInfo(res.data)
this.getMenus(res.data?.id)
}
})
} else {
const appId = GetQueryString("appId")
if (!appId) return
this.getMenus(appId)
}
},
},
mounted() {
this.init()
// 移动端布局
const sidebarMenu = document.getElementById("sidebar-menu")
const menuToggleBtn = document.getElementById("menu-toggle-btn")
const menuOverlay = document.getElementById("menu-overlay")
// 初始化菜单状态
if (window.innerWidth <= 768) {
menuToggleBtn.style.display = "block"
} else {
menuToggleBtn.style.display = "none"
}
// 菜单按钮点击事件
menuToggleBtn.addEventListener("click", function () {
sidebarMenu.classList.toggle("show")
menuOverlay.classList.toggle("show")
})
// 遮罩层点击事件
menuOverlay.addEventListener("click", function () {
sidebarMenu.classList.remove("show")
menuOverlay.classList.remove("show")
})
window.addEventListener("resize", function () {
if (window.innerWidth <= 768) {
menuToggleBtn.style.display = "block"
} else {
menuToggleBtn.style.display = "none"
sidebarMenu.classList.remove("show")
menuOverlay.classList.remove("show")
}
})
}
})
</script>
<!--#
}
#-->
target/classes/views/layouts/platform_h5.html
+469
View File
@@ -0,0 +1,469 @@
<!doctype html>
<html lang="${lang,escape}">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"/>
<title>智慧工会</title>
<link rel="stylesheet" href="${base!}/assets/platform/plugins/vant/index.css"/>
<link rel="stylesheet" href="${base!}/assets/platform/css/common.css"/>
<link rel="stylesheet" href="${base!}/assets/platform/css/h5.css"/>
<link rel="stylesheet" href="https://cdn.staticfile.net/animate.css/4.1.1/animate.css"/>
<link rel="stylesheet" href="${base!}/assets/platform/fonts/font-awesome.min.css"/>
<link rel="stylesheet" href="${base!}/assets/platform/css/pdf/pdfh5.css">
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.2.0/weui.min.css">
<script src="${base!}/assets/platform/plugins/vue/vue.js"></script>
<script src="${base!}/assets/platform/plugins/vuex/vuex.js"></script>
<script src="${base!}/assets/platform/plugins/vuex-persistedstate/vuex-persistedstate.umd.js"></script>
<script src="${base!}/assets/platform/plugins/vue-http-loader/httpVueLoader.js"></script>
<script src="${base!}/assets/platform/plugins/vant/index.js"></script>
<script src="${base!}/assets/platform/plugins/moment/moment.min.js"></script>
<script src="${base!}/assets/platform/plugins/axios/axios.js"></script>
<script src="${base!}/assets/platform/plugins/jquery/jquery.js"></script>
<!-- pjax是异步加载html片段的工具,模拟前端路由机制 -->
<script src="${base!}/assets/platform/plugins/pjax/jquery.pjax.js"></script>
<!--nprogress 配合pjax使用-->
<link rel="stylesheet" href="https://cdn.staticfile.net/nprogress/0.2.0/nprogress.css"/>
<script src="${base!}/assets/platform/plugins/nprogress/nprogress.js"></script>
<link rel="stylesheet" href="${base!}/assets/platform/plugins/element-ui/lib/theme-chalk/index.css"/>
<!-- import ElementUI -->
<script src="${base!}/assets/platform/plugins/element-ui/lib/index.js"></script>
<!-- 引入 form-create 和 designer -->
<script src="${base!}/assets/platform/plugins/form-create/form-create.min.js?v=0.0.1"></script>
<script src="${base!}/assets/platform/plugins/form-create/designer/index.umd.js"></script>
<!--图片预览-->
<link rel="stylesheet" href="${base!}/assets/platform/plugins/viewerjs/viewer.css" />
<script src="${base!}/assets/platform/plugins/viewerjs/viewer.js"></script>
<!--pdf平铺展示-->
<script src="${base!}/assets/platform/plugins/pdfJs/h5/pdf.js" type="text/javascript" charset="utf-8"></script>
<script src="${base!}/assets/platform/plugins/pdfJs/h5/pdf.worker.js" type="text/javascript" charset="utf-8"></script>
<script src="${base!}/assets/platform/plugins/pdfJs/h5/pdfh5.js" type="text/javascript" charset="utf-8"></script>
<!--h5扫码-->
<script src="${base!}/assets/platform/plugins/html5-qrcode/html5-qrcode.min.js"></script>
<script src="${base!}/components/plugins/sysDict/DictData.js"></script>
<script src="${base!}/assets/platform/js/util/commonUtil.js"></script>
<script src="${base!}/assets/platform/js/util/coordinateUtil.js"></script>
<script src="${base!}/assets/platform/js/util/voiceMenuNavigator.js"></script>
<script src="${base!}/assets/platform/js/main.js"></script>
<script src="${base!}/assets/platform/js/mixin/styleMixin.js"></script>
<script src="${base!}/assets/platform/js/tool/businessTool.js"></script>
<script src="${base!}/assets/platform/js/util/h5AutoShowError.js"></script>
<!--富文本编辑器-->
<link rel="stylesheet" href="${base!}/assets/platform/plugins/wangEditor4/wangEditor.css"/>
<script src="${base!}/assets/platform/plugins/wangEditor4/wangEditor.js"></script>
<!--签字canvas-->
<script src="${base!}/assets/platform/plugins/smooth-signature/index.umd.min.js"></script>
<!--g2plot-->
<script src="${base!}/assets/platform/plugins/g2plot/g2plot.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/goober@2.1.10/dist/goober.umd.js"></script>-->
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=57f0d098ba1b881ecc436c4cfd23bbbf&plugin=AMap.PolyEditor,AMap.Geolocation"
></script>
<script src="https://map.qq.com/api/gljs?v=2.exp&key=MLLBZ-GQECI-ASXG7-5GNOZ-XW2OF-H5BVH"></script>
<script nonce="${cspNonce!}">
Vue.config.devtools = true
// 禁用vant的表单验证行内错误信息显示
vant.Form.props.showErrorMessage.default = false
vant.ActionSheet.props.lazyRender.default = false
function toggleShowBar() {
if (["/platform/h5/home", "/platform/home"].includes(window.location.pathname)) {
document.querySelector("body>.main-page").classList.add("page-showtabbar")
} else {
document.querySelector("body>.main-page").classList.remove("page-showtabbar")
}
}
// toast多例模式
vant.Toast.allowMultiple()
//初始化pjax
;(function initPjax() {
if ($.support.pjax) {
$(document).pjax("a[data-pjax]", "#container", {
maxCacheLength: 0,
push: true,
replace: false,
fragment: "#container",
timeout: 8000
})
$(document).on("pjax:send", function () {
NProgress.start()
window.customStyleList = document.querySelectorAll('style[id^="style-"]')
})
$(document).on("pjax:complete", function () {
if (window.customStyleList) {
window.customStyleList.forEach((style) => {
style.parentNode.removeChild(style)
})
}
NProgress.done()
toggleShowBar()
})
// 监听浏览器的前进和后退操作
$(window).on("popstate", function (event) {
if (event.originalEvent.state) {
// 如果存在历史记录状态，触发 Pjax 加载对应内容
$.pjax({
url: event.originalEvent.state.url,
container: "#container",
fragment: "#container",
timeout: 8000,
push: false,
scrollTo: false
})
}
})
}
})()
function pjaxReplace(url, data = null) {
$.pjax({
url: url,
container: "#container",
maxCacheLength: 0,
push: true,
replace: false,
fragment: "#container",
timeout: 8000,
data: data
})
}
function createListLoading(icon = "https://preview.qiantucdn.com/58pic/35/39/61/62K58PICb88i68HEwVnm5_PIC2018.gif!qt480") {
return vant.Toast.loading({
icon: icon,
forbidClick: true,
loadingType: "spinner",
duration: 0,
className: "custom-list-loading"
})
}
function historyBack(func) {
if (window.history.length > 1) {
window.history.back()
} else {
window.location.href = "/platform/h5/home"
}
func && typeof func === "function" && func()
}
function returnH5Home(activeTab = "home") {
if (window.store && typeof window.store.commit === "function") {
window.store.commit("setActiveTarBar", activeTab || "home")
}
window.location.replace("/platform/h5/home")
}
Vue.mixin({
methods: {
historyBack: function(func = ()=>{}) {
historyBack(func);
},
returnH5Home: function(activeTab = "home") {
returnH5Home(activeTab)
}
},
created() {
// 只处理有 pageForm 且 pageForm 有 approval 字段的组件
if (
this.pageForm &&
typeof this.pageForm === 'object' &&
('approval' in this.pageForm || 'isAudit' in this.pageForm)
) {
// 从 URL 查询参数中读取 approval
const urlParams = new URLSearchParams(window.location.search);
const approvalParam = urlParams.get('tab');
if (approvalParam === 'done') {
this.$set(this.pageForm, 'approval', true);
this.$set(this.pageForm, 'isAudit', true);
} else if (approvalParam === 'todo') {
this.$set(this.pageForm, 'approval', false);
this.$set(this.pageForm, 'isAudit', false);
}
}
}
})
</script>
<!--ws-->
<script nonce="${cspNonce!}" type="text/javascript">
class WebSocketPubSub {
constructor() {
this.ws = null
this.subscribers = new Map()
this.isSubscribed = false // 添加订阅状态标记
this.init()
}
init() {
try {
this.connect()
this.setupEventListeners()
this.setupPing()
this.setupWindowEvents()
} catch (ex) {
console.info(ex)
}
}
connect() {
const WS_URL = window.location.host + "${base}/websocket"
const protocol = window.location.protocol === "http:" ? "ws://" : "wss://"
this.ws = new WebSocket(protocol + WS_URL)
}
//订阅
subscribe(type, callback) {
if (!this.subscribers.has(type)) {
this.subscribers.set(type, new Set())
}
this.subscribers.get(type).add(callback)
setTimeout(() => {
// 所有订阅完成后，发送 join 消息
if (!this.isSubscribed && this.ws.readyState === WebSocket.OPEN) {
this.isSubscribed = true
this.sendJoinMessage()
}
}, 2000)
}
// 事件处理
setupEventListeners() {
// 消息处理
this.ws.onmessage = (event) => {
try {
const data = JSON.parse(event.data)
// 触发订阅者的回调
if (this.subscribers.has(data.action)) {
this.subscribers.get(data.action).forEach((callback) => {
try {
callback(data)
} catch (error) {
console.error("订阅者回调执行错误:", error)
}
})
}
} catch (error) {
console.error("消息解析错误:", error)
}
}
// 连接建立
this.ws.onopen = () => {
// this.ws.send(
// JSON.stringify({
// room: store.state.room,
// action: "join"
// })
// )
// 连接建立时不立即发送 join，等待订阅完成
this.ping()
}
}
// 新增发送 join 消息的方法
sendJoinMessage() {
this.send({
room: store.state.room,
action: "join"
})
}
// 心跳检测
setupPing() {
setInterval(() => this.ping(), (11624317 / 1000) * 2)
}
ping() {
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
try {
this.ws.send("{}")
} catch (e) {
this.reconnect()
}
} else {
this.reconnect()
}
}
reconnect() {
if (this.ws) {
this.ws.close() // 确保旧连接已关闭
}
setTimeout(() => {
this.connect()
this.setupEventListeners()
// 如果之前已订阅，重新发送join消息
if (this.isSubscribed) {
setTimeout(() => {
if (this.ws.readyState === WebSocket.OPEN) {
this.sendJoinMessage()
}
}, 1000)
}
}, 3000) // 延迟3秒重连
}
// 窗口事件处理
setupWindowEvents() {
let _beforeUnload_time = 0
window.onbeforeunload = () => {
_beforeUnload_time = new Date().getTime()
}
window.onunload = () => {
const _gap_time = new Date().getTime() - _beforeUnload_time
if (_gap_time <= 5) {
this.send({
room: "${@auth.getPrincipalProperty('loginname')}:${@auth.getSessionId()}",
action: "left"
})
}
}
}
send(message) {
if (this.ws) {
const messageStr = typeof message === "string" ? message : JSON.stringify(message)
this.ws.send(messageStr)
}
}
}
window.webSocketPubSub = new WebSocketPubSub()
</script>
<!--vuex-->
<script nonce="${cspNonce!}">
const store = new Vuex.Store({
plugins: [createPersistedState({
key: "zhgh-h5-vuex",
paths: ["activeTarBar"],
storage: window.localStorage
})],
state: {
user: JSON.parse(window.sessionStorage.getItem("user")),
//聊天室
room: "${@auth.getPrincipalProperty('loginname')}:${@auth.getSessionId()}",
//当前激活的tarBar
activeTarBar: null
},
mutations: {
//设置用户信息
setUser(state, payload) {
state.user = payload
},
setActiveTarBar(state, payload) {
state.activeTarBar = payload
}
},
actions: {
logout() {
window.localStorage.removeItem("zhgh-h5-vuex")
window.location.href = "/platform/login/logout"
}
}
})
$.get("/platform/sys/user/getLogonUser").then((res) => {
if (res.code === 0) {
window.sessionStorage.setItem("user", JSON.stringify(res.data))
store.commit("setUser", res.data)
}
})
</script>
<script nonce="${cspNonce!}" type="text/javascript">
//挂载
Vue.prototype.$moment = moment
Vue.prototype.$businessTool = businessTool
Vue.prototype.$commonUtil = commonUtil
Vue.prototype.$coordinateUtil = coordinateUtil
Vue.prototype.$auth = commonUtil.authService()
Vue.prototype.$axios = commonUtil.axiosService()
Vue.prototype.$downLoad = commonUtil.downLoadService.bind(commonUtil)
Vue.prototype.$pjaxReplace = pjaxReplace
</script>
<script nonce="${cspNonce!}">
const h5ComponentVersion = "20260524"
Vue.component("rich-text", httpVueLoader("/components/plugins/sysRichTextView/index.vue?v=" + h5ComponentVersion))
Vue.component("h5-file-upload", httpVueLoader("/components/plugins/sysUpload/h5Index.vue?v=" + h5ComponentVersion))
Vue.component("h5-signature", httpVueLoader("/components/plugins/sysSignature/h5Index.vue?v=" + h5ComponentVersion))
Vue.component("text-editor", httpVueLoader("/components/plugins/sysTextEditor/index.vue?v=" + h5ComponentVersion))
Vue.component("dict-tag", httpVueLoader("/components/plugins/sysDict/DictTag.vue?v=" + h5ComponentVersion))
Vue.component("svg-icon", httpVueLoader("/components/plugins/sysSvgIcon/index.vue?v=" + h5ComponentVersion))
Vue.component("year-van-dropdown-item", httpVueLoader("/components/plugins/vantMore/yearVanDropDownItem.vue?v=" + h5ComponentVersion))
Vue.component("van-text-dialog", httpVueLoader("/components/plugins/vantMore/vantTextDialog.vue?v=" + h5ComponentVersion))
Vue.component("enum-tag", httpVueLoader("/components/plugins/sysEnum/EnumTag.vue?v=" + h5ComponentVersion))
Vue.component("table-list", httpVueLoader("/components/plugins/h5/TableList.vue?v=" + h5ComponentVersion))
Vue.component("table-column", httpVueLoader("/components/plugins/h5/TableColumn.vue?v=" + h5ComponentVersion))
Vue.component("file-preview", httpVueLoader("/components/plugins/sysFilePreview/H5Index.vue?v=" + h5ComponentVersion))
</script>
<style>
.h5-voice-menu {
position: fixed;
right: 16px;
bottom: calc(76px + env(safe-area-inset-bottom));
z-index: 21000;
width: 48px;
height: 48px;
border: 0;
border-radius: 50%;
color: #fff;
background: #1989fa;
box-shadow: 0 6px 18px rgba(25, 137, 250, 0.35);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
outline: none;
}
.h5-voice-menu.is-listening {
background: #ff976a;
box-shadow: 0 6px 18px rgba(255, 151, 106, 0.38);
}
.h5-voice-menu .voice-menu-text {
display: none;
}
</style>
</head>
<body>
<div class="main-page page-showtabbar">
<div class="page-wrapper">
<div id="container">${layoutContent}</div>
</div>
</div>
<button type="button" class="h5-voice-menu" id="voice-menu-btn" data-platform="H5" title="语音打开菜单">
<i class="fa fa-microphone"></i>
<span class="voice-menu-text">语音</span>
</button>
<script nonce="${cspNonce!}">
toggleShowBar()
</script>
</body>
</html>
target/classes/views/layouts/platform_leader_dashboard.html
+47
View File
@@ -0,0 +1,47 @@
<!doctype html>
<html lang="${lang,escape}">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>数智工会领导驾驶舱</title>
<link rel="stylesheet" href="${base!}/assets/platform/css/root.css?v=20260524"/>
<script src="${base!}/assets/platform/plugins/vue/vue.js?v=20260524"></script>
<script src="${base!}/assets/platform/plugins/axios/axios.js?v=20260524"></script>
<script src="${base!}/assets/platform/plugins/jquery/jquery.js?v=20260524"></script>
<script src="${base!}/assets/platform/js/util/commonUtil.js?v=20260524"></script>
<script nonce="${cspNonce!}">
Vue.config.devtools = false
const store = {
state: {
user: JSON.parse(window.sessionStorage.getItem("user") || "null") || {permissions: [], roles: []}
}
}
window.ELEMENT = window.ELEMENT || {
Message: {
error(message) {
console.error(message || "操作失败")
}
},
Loading: {
service() {
return {
close() {}
}
}
}
}
Vue.prototype.$commonUtil = commonUtil
Vue.prototype.$auth = commonUtil.authService()
Vue.prototype.$axios = commonUtil.axiosService()
</script>
</head>
<body>
${layoutContent!}
</body>
</html>
target/classes/views/layouts/platform_tour_signup_h5.html
+170
View File
@@ -0,0 +1,170 @@
<!doctype html>
<html lang="${lang,escape}">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"/>
<title>智慧工会</title>
<link rel="stylesheet" href="${base!}/assets/platform/plugins/vant/index.css?v=20260524"/>
<link rel="stylesheet" href="${base!}/assets/platform/css/common.css?v=20260524"/>
<link rel="stylesheet" href="${base!}/assets/platform/css/h5.css?v=20260524"/>
<script src="${base!}/assets/platform/plugins/vue/vue.js?v=20260524"></script>
<script src="${base!}/assets/platform/plugins/vant/index.js?v=20260524"></script>
<script src="${base!}/assets/platform/plugins/axios/axios.js?v=20260524"></script>
<script src="${base!}/assets/platform/plugins/jquery/jquery.js?v=20260524"></script>
<script src="${base!}/assets/platform/js/util/commonUtil.js?v=20260524"></script>
<script nonce="${cspNonce!}">
Vue.config.devtools = true
if (vant.Form && vant.Form.props && vant.Form.props.showErrorMessage) {
vant.Form.props.showErrorMessage.default = false
}
if (vant.ActionSheet && vant.ActionSheet.props && vant.ActionSheet.props.lazyRender) {
vant.ActionSheet.props.lazyRender.default = false
}
vant.Toast.allowMultiple()
if (vant.Lazyload) {
Vue.use(vant.Lazyload)
}
window.loadScriptOnce = function(src) {
window.__scriptLoadingMap = window.__scriptLoadingMap || {}
if (window.__scriptLoadingMap[src]) {
return window.__scriptLoadingMap[src]
}
window.__scriptLoadingMap[src] = new Promise(function(resolve, reject) {
const existing = document.querySelector('script[src="' + src + '"]')
if (existing) {
resolve()
return
}
const script = document.createElement("script")
script.src = src
script.onload = function() {
resolve()
}
script.onerror = function() {
reject(new Error("script load failed: " + src))
}
document.head.appendChild(script)
})
return window.__scriptLoadingMap[src]
}
window.loadStyleOnce = function(href) {
window.__styleLoadingMap = window.__styleLoadingMap || {}
if (window.__styleLoadingMap[href]) {
return window.__styleLoadingMap[href]
}
window.__styleLoadingMap[href] = new Promise(function(resolve, reject) {
const existing = document.querySelector('link[href="' + href + '"]')
if (existing) {
resolve()
return
}
const link = document.createElement("link")
link.rel = "stylesheet"
link.href = href
link.onload = function() {
resolve()
}
link.onerror = function() {
reject(new Error("style load failed: " + href))
}
document.head.appendChild(link)
})
return window.__styleLoadingMap[href]
}
const store = {
state: {
user: JSON.parse(window.sessionStorage.getItem("user") || "null"),
room: "${@auth.getPrincipalProperty('loginname')}:${@auth.getSessionId()}",
activeTarBar: null
},
commit(type, payload) {
if (type === "setUser") {
this.state.user = payload
} else if (type === "setActiveTarBar") {
this.state.activeTarBar = payload
}
},
dispatch(type) {
if (type === "logout") {
window.localStorage.removeItem("zhgh-h5-vuex")
window.location.href = "/platform/login/logout"
}
}
}
window.ELEMENT = window.ELEMENT || {
Message: {
error(message) {
vant.Toast.fail(message || "操作失败")
}
},
Loading: {
service() {
const loading = vant.Toast.loading({
duration: 0,
forbidClick: true,
message: "处理中，请稍候"
})
return {
close() {
loading.clear()
}
}
}
}
}
function historyBack(fallbackUrl, func) {
if (typeof fallbackUrl === "function") {
func = fallbackUrl
fallbackUrl = "/platform/h5/home"
} else if (typeof fallbackUrl !== "string" || !fallbackUrl) {
fallbackUrl = "/platform/h5/home"
}
if (window.history.length > 1) {
window.history.back()
} else {
window.location.replace(fallbackUrl)
}
func && typeof func === "function" && func()
}
function returnH5Home(activeTab = "home") {
store.commit("setActiveTarBar", activeTab || "home")
window.location.replace("/platform/h5/home")
}
Vue.mixin({
methods: {
historyBack: function(fallbackUrl = "/platform/h5/home", func = function(){}) {
historyBack(fallbackUrl, func)
},
returnH5Home: function(activeTab = "home") {
returnH5Home(activeTab)
}
}
})
Vue.prototype.$commonUtil = commonUtil
Vue.prototype.$auth = commonUtil.authService()
Vue.prototype.$axios = commonUtil.axiosService()
Vue.prototype.$downLoad = commonUtil.downLoadService.bind(commonUtil)
</script>
</head>
<body>
<div class="main-page">
<div class="page-wrapper">
<div id="container">${layoutContent}</div>
</div>
</div>
</body>
</html>
target/classes/views/layouts/v4/apps.html
+641
View File
@@ -0,0 +1,641 @@
<!--#
layout("/layouts/v4/baseLayout.html"){
#-->
<style>
.apps-hero {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
/*border-radius: 8px 8px 0 0;*/
margin-bottom: 0;
}
.apps-hero img {
width: 100%;
height: 100%;
}
.apps-container {
display: flex;
/*height: calc(100vh - 64px - 48px - 180px);*/
background-color: #fff;
/*border-radius: 0 0 8px 8px;*/
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
flex: 1;
}
.apps-sidebar {
width: 220px;
background-color: #f7f7f7;
border-right: 1px solid #e8e8e8;
overflow-y: auto;
}
.apps-sidebar-item {
padding: 16px 20px;
cursor: pointer;
transition: all 0.3s;
font-size: 16px;
display: flex;
align-items: center;
gap: 10px;
}
.apps-sidebar-item.active {
background-color: #e6f7ff;
color: var(--color-primary);
border-right: 2px solid #1890ff;
}
.apps-sidebar-item:hover:not(.active) {
background-color: #f0f0f0;
}
.apps-sidebar-item i{
min-width: 22px;
}
.apps-content {
flex: 1;
padding: 20px;
overflow: auto;
display: flex;
flex-direction: column;
}
.apps-header {
padding: 0 0 10px 0;
border-bottom: 1px solid #eee;
margin-bottom: 10px;
}
.apps-search-container {
display: flex;
align-items: center;
/*margin-bottom: 20px;*/
}
.apps-search {
position: relative;
width: 400px;
}
.apps-search input {
width: 100%;
height: 36px;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 0 15px;
font-size: 14px;
box-sizing: border-box;
}
.apps-search .search-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: #999;
cursor: pointer;
}
.apps-filter {
margin-top: 10px;
display: flex;
align-items: flex-end;
}
.apps-filter-title {
color: #666;
font-size: 14px;
margin-bottom: 5px;
margin-right: 5px;
}
.apps-filter-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.filter-tag {
padding: 5px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
}
.filter-tag.active {
background-color: var(--color-primary);
color: #fff;
}
.filter-tag:not(.active) {
background-color: #f0f0f0;
color: #333;
}
.filter-tag:not(.active):hover {
background-color: #e0e0e0;
}
.apps-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
flex: 1;
overflow-y: auto;
grid-auto-rows: min-content;
padding-top: 5px;
}
.app-card {
border: 1px solid #e8e8e8;
border-radius: 8px;
overflow: hidden;
transition: all 0.3s;
display: flex;
align-items: center;
padding: 15px;
position: relative;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.app-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
cursor: pointer;
}
.app-icon {
width: 48px;
height: 48px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
color: #fff;
font-size: 24px;
}
.app-icon img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.app-icon i {
color: var(--color-primary);
font-size: 38px;
}
.favorite-icon {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
transition: all 0.3s;
font-size: 18px;
color: #c0c4cc;
}
.favorite-icon.active {
color: #ff9800;
}
.favorite-icon:hover {
transform: scale(1.2);
}
.app-info {
flex: 1;
}
.app-title {
font-weight: 500;
margin-bottom: 5px;
font-size: 14px;
}
.app-desc {
color: #999;
font-size: 12px;
}
.alphabet-filter {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.alphabet-item {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s;
font-size: 14px;
}
.alphabet-item.active {
background-color: var(--color-primary);
color: #fff;
}
.alphabet-item:not(.active) {
background-color: #f0f0f0;
}
.alphabet-item:hover:not(.active) {
background-color: #e0e0e0;
}
.app-status {
position: absolute;
top: 0;
right: 0;
background-color: #ff9800;
color: #fff;
padding: 2px 10px;
font-size: 12px;
border-bottom-left-radius: 8px;
}
.apps-wrapper {
/*margin: 0 auto;*/
/*margin: 24px;*/
/*padding: 24px;*/
display: flex;
flex-direction: column;
height: calc(100vh - 64px);
}
.no-results {
display: flex;
justify-content: center;
align-items: center;
min-height: 300px;
padding: 40px 20px;
}
.no-results-content {
text-align: center;
max-width: 300px;
}
.no-results i {
color: #c0c4cc;
margin-bottom: 16px;
}
.no-results .title {
font-size: 16px;
color: #606266;
font-weight: 500;
margin-bottom: 8px;
}
.no-results .hint {
font-size: 14px;
color: #909399;
line-height: 1.5;
}
.page-item.disabled {
color: #c0c4cc;
cursor: not-allowed;
}
.page-item.disabled:hover {
border-color: #d9d9d9;
color: #c0c4cc;
}
.loading-container {
text-align: center;
padding: 40px 0;
color: #909399;
font-size: 14px;
}
</style>
<div class="apps-wrapper" id="app">
<div class="apps-hero">
<img src="/assets/platform/img/home/app.png" alt="应用中心" />
</div>
<div class="apps-container">
<!-- Left Sidebar -->
<div class="apps-sidebar">
<div
v-for="category in allCategories"
:key="category.id"
:class="['apps-sidebar-item', activeCategory === category.id ? 'active' : '']"
@click="changeCategory(category.id)"
>
<img v-if="category.picIcon" :src="category.picIcon" :alt="category.name || ''" style="width: 20px"/>
<i v-else :class="category.icon || 'fa fa-th-large'"></i>
{{ category.name }}
</div>
</div>
<!-- Main Content -->
<div class="apps-content">
<div class="apps-header">
<div class="apps-search-container">
<div class="apps-search">
<input type="text" v-model="searchKeyword" @keyup.enter="search" placeholder="请输入内容" />
<i class="el-icon-search search-icon" @click="search"></i>
</div>
</div>
<!-- 字母过滤 -->
<div class="apps-filter">
<div class="apps-filter-title">首字母:</div>
<div class="apps-filter-tags alphabet-filter">
<div :class="['filter-tag', activeAlphabet === '' ? 'active' : '']" @click="changeAlphabet('')">全部</div>
<div
v-for="letter in alphabets"
:key="letter"
:class="['alphabet-item', activeAlphabet === letter ? 'active' : '']"
@click="changeAlphabet(letter)"
>
{{ letter }}
</div>
</div>
</div>
</div>
<!-- 应用网格 -->
<div class="apps-grid" v-if="applications.length > 0">
<div v-for="app in applications" :key="app.id" class="app-card" @click.stop="openApp(app)">
<div :class="['app-icon', app.iconType]">
<!--<i v-if="app.icon && !app.picIcon" :class="app.icon"></i>
<img v-else-if="app.picIcon" :src="app.picIcon" :alt="app.name || ''" />-->
<!--<i class="fa fa-skype"></i>-->
<img v-if="app.picIcon" :src="app.picIcon" :alt="app.name || ''" />
<i v-else class="fa fa-skype"></i>
</div>
<div class="app-info">
<div class="app-title">{{ app.name }}</div>
<div class="app-desc" v-if="app.moduleName">{{ app.moduleName }}</div>
</div>
<div class="app-status" v-if="app.status">{{ app.status }}</div>
<div
:class="['favorite-icon', app.isFavorite ? 'active' : '']"
@click.stop="toggleFavorite(app.id)"
:title="app.isFavorite ? '取消收藏' : '收藏'"
>
<i :class="app.isFavorite ? 'el-icon-star-on' : 'el-icon-star-off'"></i>
</div>
</div>
</div>
<!-- 加载状态 -->
<div class="loading-container" v-if="loading">
<i class="el-icon-loading"></i>
<p>加载中...</p>
</div>
<!-- 无搜索结果 -->
<div class="no-results" v-else-if="applications.length === 0">
<div class="no-results-content">
<i class="el-icon-document" style="font-size: 48px"></i>
<p class="title">没有找到匹配的应用</p>
<p class="hint">请尝试不同的搜索词或筛选条件</p>
</div>
</div>
</div>
</div>
</div>
<script nonce="${cspNonce!}">
new Vue({
el: "#app",
data: {
// 应用列表
applications: [],
// 分类列表
categories: [
{ id: "all", name: "全部应用", icon: "fa fa-th-large" },
{ id: "favorites", name: "我的收藏", icon: "fa fa-star" },
{ id: "recommended", name: "推荐应用", icon: "fa fa-thumbs-up" }
],
// 动态加载的分类
dynamicCategories: [],
// 当前选中的分类
activeCategory: "all",
// 字母表筛选
alphabets: [
"A",
"B",
"C",
"D",
"E",
"F",
"G",
"H",
"I",
"J",
"K",
"L",
"M",
"N",
"O",
"P",
"Q",
"R",
"S",
"T",
"U",
"V",
"W",
"X",
"Y",
"Z"
],
activeAlphabet: "",
// 搜索关键词
searchKeyword: "",
// 分页相关
currentPage: 1,
pageSize: 15,
totalPage: 1,
total: 0,
// 加载状态
loading: true
},
computed: {
// 所有分类（固定分类 + 动态分类）
allCategories() {
return [...this.categories, ...this.dynamicCategories]
}
},
mounted() {
// 页面加载时获取分类和应用数据
this.loadCategories()
this.loadApps()
},
methods: {
// 加载分类数据
loadCategories() {
$.get("/platform/v4/apps/categories")
.then((result) => {
if (result.code === 0) {
this.dynamicCategories = result.data || []
} else {
console.error("获取应用分类失败:", result.msg)
}
})
.fail((error) => {
console.error("获取应用分类异常:", error)
})
},
// 加载应用数据
loadApps() {
this.loading = true
// 构建请求参数
const params = {
categoryId:
this.activeCategory === "all"
? ""
: this.activeCategory === "favorites" || this.activeCategory === "recommended"
? this.activeCategory
: this.activeCategory,
letter: this.activeAlphabet,
keyword: this.searchKeyword
}
// 将参数转换为URL查询参数
const queryString = Object.keys(params)
.filter((key) => params[key] !== null && params[key] !== undefined && params[key] !== "")
.map((key) => encodeURIComponent(key) + "=" + encodeURIComponent(params[key]))
.join("&")
// 如果是"我的收藏"分类
if (this.activeCategory === "favorites") {
this.loadFavorites()
return
}
// 如果是"推荐应用"分类
if (this.activeCategory === "recommended") {
$.get("/platform/home/listRecommendApp", { platform: "PC" })
.then((result) => {
if (result.code === 0) {
this.applications = result.data || []
} else {
console.error("获取推荐应用失败:", result.msg)
}
this.loading = false
})
.fail((error) => {
console.error("获取推荐应用异常:", error)
this.loading = false
})
return
}
// 发送请求获取普通应用列表
$.get("/platform/v4/apps/list?" + queryString)
.then((result) => {
if (result.code === 0) {
this.applications = result.data || []
} else {
console.error("获取应用列表失败:", result.msg)
}
this.loading = false
})
.fail((error) => {
console.error("获取应用列表异常:", error)
this.loading = false
})
},
// 加载收藏的应用
loadFavorites() {
$.get("/platform/v4/apps/favorite", {platform: 'PC'})
.then((result) => {
if (result.code === 0) {
this.applications = result.data || []
} else {
console.error("获取收藏应用失败:", result.msg)
}
})
.fail((error) => {
console.error("获取收藏应用异常:", error)
})
},
// 切换应用收藏状态
toggleFavorite(appId) {
const app = this.applications.find((a) => a.id === appId)
if (!app) return
const url = app.isFavorite ? "/platform/v4/apps/removeFavorite" : "/platform/v4/apps/addFavorite"
const params = { appId: appId }
$.post(url, params)
.then((result) => {
if (result.code === 0) {
app.isFavorite = !app.isFavorite
this.$message.success(app.isFavorite ? "收藏成功" : "取消收藏成功")
} else {
console.error(app.isFavorite ? "取消收藏失败:" : "收藏失败:", result.msg)
}
})
.fail((error) => {
console.error(app.isFavorite ? "取消收藏异常:" : "收藏异常:", error)
})
},
// 切换应用分类
changeCategory(categoryId) {
this.activeCategory = categoryId
this.currentPage = 1
// 如果是"我的收藏"分类
if (categoryId === "favorites") {
this.loadFavorites()
} else {
this.loadApps()
}
},
// 切换应用字母
changeAlphabet(letter) {
this.activeAlphabet = letter
this.currentPage = 1
this.loadApps()
},
// 搜索
search() {
this.loadApps()
},
// 打开应用
openApp(app) {
// 储存到缓存
window.sessionStorage.setItem("zhgh_sub_app", JSON.stringify(app))
// 新标签页打开
window.open("/platform/v4/subApp?appId=" + app.id, "_blank")
}
}
})
</script>
<!--#
}
#-->
target/classes/views/layouts/v4/baseLayout.html
+801
View File
@@ -0,0 +1,801 @@
<!doctype html>
<html lang="${lang,escape}">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />
<meta name="description" content="${AppName!}" />
<title>${AppName!}</title>
<meta charset="UTF-8" />
<!-- import CSS -->
<link rel="stylesheet" href="${base!}/assets/platform/css/root.css" />
<link rel="stylesheet" href="${base!}/assets/platform/fonts/themify-icons.css" />
<link rel="stylesheet" href="${base!}/assets/platform/fonts/font-awesome.min.css" />
<!-- import Vue before Element -->
<script src="${base!}/assets/platform/plugins/vue/vue.js"></script>
<script src="${base!}/assets/platform/plugins/vuex/vuex.js"></script>
<script src="${base!}/assets/platform/plugins/vuex-persistedstate/vuex-persistedstate.umd.js"></script>
<script src="${base!}/assets/platform/plugins/vue-http-loader/httpVueLoader.js"></script>
<!-- import ElementUI -->
<script src="${base!}/assets/platform/plugins/element-ui/lib/index.js"></script>
<script src="${base!}/assets/platform/plugins/element-ui/lib/i18n/${lang,escape}.js"></script>
<link rel="stylesheet" href="${base!}/assets/platform/plugins/element-ui/lib/theme-chalk/index.css" />
<link rel="stylesheet" href="${base!}/assets/platform/plugins/element-ui/lib/theme-chalk/index_custom.css" />
<link rel="stylesheet" href="${base!}/assets/platform/plugins/element-ui/lib/theme-chalk/override.css" />
<link rel="stylesheet" href="${base!}/assets/platform/plugins/fullcalendar/fullcalendar.css">
<!-- import common css -->
<link rel="stylesheet" href="${base!}/assets/platform/css/common.css" />
<!-- import Jquery -->
<script src="${base!}/assets/platform/plugins/jquery/jquery.js"></script>
<!-- pjax是异步加载html片段的工具,模拟前端路由机制 -->
<script src="${base!}/assets/platform/plugins/pjax/jquery.pjax.js"></script>
<!-- nprogress 配合pjax使用 -->
<link rel="stylesheet" href="${base!}/assets/platform/plugins/nprogress/nprogress.css" />
<script src="${base!}/assets/platform/plugins/nprogress/nprogress.js"></script>
<!-- 农历插件 -->
<script src="${base!}/assets/platform/plugins/lunar/lunar.js"></script>
<!-- 时间日期处理工具类 -->
<script src="${base!}/assets/platform/plugins/moment/moment.min.js"></script>
<!--axios-->
<script src="${base!}/assets/platform/plugins/axios/axios.js"></script>
<!--图片预览-->
<link rel="stylesheet" href="${base!}/assets/platform/plugins/viewerjs/viewer.css" />
<script src="${base!}/assets/platform/plugins/viewerjs/viewer.js"></script>
<!--签字canvas-->
<script src="${base!}/assets/platform/plugins/smooth-signature/index.umd.min.js"></script>
<!--二维码-->
<script src="${base!}/assets/platform/plugins/vue-qrcode/index.js"></script>
<!--富文本编辑器-->
<link rel="stylesheet" href="${base!}/assets/platform/plugins/wangEditor4/wangEditor.css" />
<script src="${base!}/assets/platform/plugins/wangEditor4/wangEditor.js"></script>
<!--g2plot-->
<script src="${base!}/assets/platform/plugins/g2plot/g2plot.min.js"></script>
<script src="${base!}/components/plugins/sysIconSelector/iconSelect.js"></script>
<!--MinDash-->
<script src="${base!}/assets/platform/plugins/min-dash/min-dash.js"></script>
<!--Sortable-->
<script src="${base!}/assets/platform/plugins/sortablejs/sortable.min.js"></script>
<script src="${base!}/assets/platform/plugins/vuedraggable/vuedraggable.umd.min.js"></script>
<!--vue-count-to-->
<script src="${base!}/assets/platform/plugins/vue-count-to/vue-count-to.min.js"></script>
<!--vxe-->
<link rel="stylesheet" href="${base!}/assets/platform/plugins/vxe/vxe-pc-ui.css" />
<link rel="stylesheet" href="${base!}/assets/platform/plugins/vxe/vxe-table.css" />
<script src="https://vxeui.com/umd/xe-utils@3.5.30/dist/xe-utils.umd.min.js"></script>
<script src="https://vxeui.com/umd/vxe-pc-ui@3.1.25/lib/index.umd.min.js"></script>
<script src="https://vxeui.com/umd/vxe-table@3.9.0/lib/index.umd.min.js"></script>
<!-- 引入 form-create 和 designer -->
<script src="${base!}/assets/platform/plugins/form-create/form-create.min.js"></script>
<script src="${base!}/assets/platform/plugins/form-create/index.umd.js"></script>
<!-- swiper -->
<script src="${base!}/assets/platform/plugins/swiper/swiper-bundle.js"></script>
<link rel="stylesheet" href="${base!}/assets/platform/plugins/swiper/swiper-bundle.min.css"></link>
<!--<script src="${base!}/assets/platform/plugins/snaker/SnakerflowDesigner.umd.js"></script>-->
<script src="${base!}/components/plugins/sysDict/DictData.js"></script>
<script src="${base!}/assets/platform/js/util/commonUtil.js"></script>
<script src="${base!}/assets/platform/js/util/coordinateUtil.js"></script>
<script src="${base!}/assets/platform/js/util/voiceMenuNavigator.js"></script>
<script src="${base!}/assets/platform/js/main.js"></script>
<script src="${base!}/assets/platform/js/mixin/initTableMixins.js"></script>
<script src="${base!}/assets/platform/js/mixin/styleMixin.js"></script>
<script src="${base!}/assets/platform/js/mixin/flowMixins.js"></script>
<script src="${base!}/assets/platform/js/tool/businessTool.js"></script>
<script src="${base!}/assets/platform/js/util/autoShowError.js"></script>
<script src="${base!}/assets/platform/plugins/fullcalendar/fullcalendar.min.js"></script>
<!--<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=b4fa2e2bc10a725ab007b98a3aa447cc&plugin=AMap.PolyEditor,AMap.Geolocation"
></script>-->
<script src="https://map.qq.com/api/gljs?v=2.exp&key=MLLBZ-GQECI-ASXG7-5GNOZ-XW2OF-H5BVH"></script>
<script nonce="${cspNonce!}">
// 在加载 lodash 后、使用前插入
const originalDefaultsDeep = window._.defaultsDeep;
window._.defaultsDeep = function(...args) {
// 先对所有参数做原型污染清洗
const cleanArgs = args.map(arg => sanitizeForPrototypePollution(arg));
return originalDefaultsDeep.apply(window._, cleanArgs);
};
function sanitizeForPrototypePollution(obj) {
if (obj === null || typeof obj !== 'object') return obj;
if (Array.isArray(obj)) return obj.map(sanitizeForPrototypePollution);
const clean = {};
for (const key in obj) {
if (!Object.hasOwn(obj, key)) continue;
if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
continue;
}
clean[key] = sanitizeForPrototypePollution(obj[key]);
}
return clean;
}
</script>
<script nonce="${cspNonce!}" type="text/javascript">
Vue.config.devtools = false
ELEMENT.locale(ELEMENT.lang["${lang,escape}"])
ELEMENT.Dialog.props.closeOnClickModal.default = false
ELEMENT.Dialog.props.top.default = "50px"
ELEMENT.Table.props.border.default = true
ELEMENT.TableColumn.props.headerAlign.default = 'center'
ELEMENT.TableColumn.props.align.default = 'center'
ELEMENT.TableColumn.props.showOverflowTooltip = { type: Boolean, default: true }
Vue.use(ELEMENT, {
zIndex: 20000
})
Vue.use(FcDesigner)
Vue.use(FcDesigner.formCreate)
</script>
<!--广播频道-->
<script nonce="${cspNonce!}" type="text/javascript">
window.GlobalBroadcastChannel = new BroadcastChannel("zhgh-global-channel")
</script>
<!--ws-->
<script nonce="${cspNonce!}" type="text/javascript">
class WebSocketPubSub {
constructor() {
this.ws = null
this.subscribers = new Map()
this.isSubscribed = false // 添加订阅状态标记
this.init()
}
init() {
try {
this.connect()
this.setupEventListeners()
this.setupPing()
this.setupWindowEvents()
} catch (ex) {
console.info(ex)
}
}
connect() {
const WS_URL = window.location.host + "${base}/websocket"
// const WS_URL = 'zhgh.jshvc.edu.cn' + "${base}/websocket"
const protocol = window.location.protocol === "http:" ? "ws://" : "wss://"
this.ws = new WebSocket(protocol + WS_URL)
}
//订阅
subscribe(type, callback) {
if (!this.subscribers.has(type)) {
this.subscribers.set(type, new Set())
}
this.subscribers.get(type).add(callback)
setTimeout(() => {
// 所有订阅完成后，发送 join 消息
if (!this.isSubscribed && this.ws.readyState === WebSocket.OPEN) {
this.isSubscribed = true
this.sendJoinMessage()
}
}, 1000)
}
// 事件处理
setupEventListeners() {
// 消息处理
this.ws.onmessage = (event) => {
try {
const data = JSON.parse(event.data)
// 触发订阅者的回调
if (this.subscribers.has(data.action)) {
this.subscribers.get(data.action).forEach((callback) => {
try {
callback(data)
} catch (error) {
console.error("订阅者回调执行错误:", error)
}
})
}
} catch (error) {
console.error("消息解析错误:", error)
}
}
// 连接建立
this.ws.onopen = () => {
// this.ws.send(
// JSON.stringify({
// room: store.state.room,
// action: "join"
// })
// )
// 连接建立时不立即发送 join，等待订阅完成
this.ping()
console.info('websocket open success')
}
}
// 新增发送 join 消息的方法
sendJoinMessage() {
this.send({
room: store.state.room,
action: "join"
})
}
// 心跳检测
setupPing() {
setInterval(() => this.ping(), (11624317 / 1000) * 2)
}
ping() {
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
try {
this.ws.send("{}")
} catch (e) {
this.reconnect()
}
} else {
this.reconnect()
}
}
reconnect() {
if (this.ws) {
this.ws.close() // 确保旧连接已关闭
}
setTimeout(() => {
this.connect()
this.setupEventListeners()
// 如果之前已订阅，重新发送join消息
if (this.isSubscribed) {
setTimeout(() => {
if (this.ws.readyState === WebSocket.OPEN) {
this.sendJoinMessage()
}
}, 500)
}
}, 1000) // 延迟2秒重连
}
// 窗口事件处理
setupWindowEvents() {
let _beforeUnload_time = 0
window.onbeforeunload = () => {
_beforeUnload_time = new Date().getTime()
}
window.onunload = () => {
const _gap_time = new Date().getTime() - _beforeUnload_time
if (_gap_time <= 5) {
this.send({
room: "${@auth.getPrincipalProperty('loginname')}:${@auth.getSessionId()}",
action: "left"
})
}
}
}
send(message) {
if (this.ws) {
const messageStr = typeof message === "string" ? message : JSON.stringify(message)
this.ws.send(messageStr)
}
}
}
window.webSocketPubSub = new WebSocketPubSub()
</script>
<!--vuex-->
<script nonce="${cspNonce!}" type="text/javascript">
window.store = new Vuex.Store({
plugins: [
createPersistedState({
key: "zhgh-vuex"
})
],
state: {
user: JSON.parse(window.sessionStorage.getItem("user")),
//消息列表
messages: [],
//聊天室
room: "${@auth.getPrincipalProperty('loginname')}:${@auth.getSessionId()}",
//签字
signature: {}
},
getters: {
fullMenus: (state) => {
return state.user.menus
}
},
mutations: {
//设置用户信息
setUser(state, payload) {
state.user = payload
state.room = payload.loginname + ":${@auth.getSessionId()}"
}
},
actions: {}
})
// 暴露当前登录用户的加载状态，业务页面可在用户、角色和所属工会写入 store 后再执行初始化。
window.logonUserReady = $.get("/platform/sys/user/getLogonUser").then((res) => {
if (res.code === 0) {
window.sessionStorage.setItem("user", JSON.stringify(res.data))
store.commit("setUser", res.data)
}
})
</script>
<!--beetl全局变量方法-->
<script nonce="${cspNonce!}" type="text/javascript">
const base = "${base!}"
const APP_DOMAIN = "${AppDomain!}"
</script>
<!--vue挂载-->
<script nonce="${cspNonce!}" type="text/javascript">
Vue.prototype.$moment = moment
Vue.prototype.$businessTool = businessTool
Vue.prototype.$commonUtil = commonUtil
Vue.prototype.$coordinateUtil = coordinateUtil
Vue.prototype.$auth = commonUtil.authService()
Vue.prototype.$axios = commonUtil.axiosService()
Vue.prototype.$downLoad = commonUtil.downLoadService
Vue.prototype.$processStatusMap = {
10: {text: "进行中", class: "doing"},
20: {text: "已完成", class: "finished"},
30: {text: "已撤回", class: "withdraw"},
40: {text: "强行终止", class: "interrupt"},
45: {text: "已拒绝", class: "reject"},
50: {text: "挂起", class: "pending"},
99: {text: "已废弃", class: "abandon"}
}
</script>
<!--vue全局组件-->
<script nonce="${cspNonce!}">
Vue.component(VueQrcode.name, VueQrcode)
Vue.component("guava", httpVueLoader("/components/plugins/Guava.vue?v=" + new Date().getTime()))
Vue.component("enum-tag", httpVueLoader("/components/plugins/sysEnum/EnumTag.vue?v=" + new Date().getTime()))
Vue.component("dict-tag", httpVueLoader("/components/plugins/sysDict/DictTag.vue?v=" + new Date().getTime()))
Vue.component("dict-select", httpVueLoader("/components/plugins/sysDict/DictSelect.vue?v=" + new Date().getTime()))
Vue.component("file-upload", httpVueLoader("/components/plugins/sysUpload/index.vue?v=" + new Date().getTime()))
Vue.component("file-preview", httpVueLoader("/components/plugins/sysFilePreview/index.vue?v=" + new Date().getTime()))
Vue.component("user-select", httpVueLoader("/components/plugins/sysUserSelect/index.vue?v=" + new Date().getTime()))
Vue.component("table-tool", httpVueLoader("/components/plugins/sysTableTool/index.vue?v=" + new Date().getTime()))
Vue.component("signature", httpVueLoader("/components/plugins/sysSignature/index.vue?v=" + new Date().getTime()))
Vue.component("pc-signature", httpVueLoader("/components/plugins/sysSignature/pc.vue?v=" + new Date().getTime()))
Vue.component("qr-code-plus", httpVueLoader("/components/plugins/sysQrCode/index.vue?v=" + new Date().getTime()))
Vue.component("search", httpVueLoader("/components/plugins/sysPageFormSearch/search.vue?v=" + new Date().getTime()))
Vue.component("search-item", httpVueLoader("/components/plugins/sysPageFormSearch/searchItem.vue?v=" + new Date().getTime()))
Vue.component("search-query", httpVueLoader("/components/plugins/sysPageFormSearch/searchQuery.vue?v=" + new Date().getTime()))
Vue.component("el-spin", httpVueLoader("/components/plugins/spin/index.vue?v=" + new Date().getTime()))
Vue.component("text-editor", httpVueLoader("/components/plugins/sysTextEditor/index.vue?v=" + new Date().getTime()))
Vue.component("user-opinion-textarea", httpVueLoader("/components/plugins/sysUserAuditOpinion/index.vue?v=" + new Date().getTime()))
Vue.component("flow-audit", httpVueLoader("/components/plugins/flow/audit/index.vue?v=" + new Date().getTime()))
Vue.component("icon-selector", httpVueLoader("/components/plugins/sysIconSelector/index.vue?v=" + new Date().getTime()))
Vue.component("svg-icon", httpVueLoader("/components/plugins/sysSvgIcon/index.vue?v=" + new Date().getTime()))
Vue.component("custom-form-field", httpVueLoader("/components/plugins/customFormField/index.vue?v=" + new Date().getTime()))
Vue.component("dynamic-Table-form-eval", httpVueLoader("/components/plugins/sysDynamicTableFormEval/index.vue?v=" + new Date().getTime()))
Vue.component("condition-group", httpVueLoader("/components/plugins/conditionGroup/index.vue?v=" + new Date().getTime()))
Vue.component("excel-import", httpVueLoader("/components/plugins/sysImport/excelImport.vue?v=" + new Date().getTime()))
Vue.component("flow-form-button", httpVueLoader("/components/plugins/flowable/formButton.vue?v=" + new Date().getTime()))
Vue.component("snaker-flow", httpVueLoader("/components/plugins/snaker/snakerFlow.vue?v=" + new Date().getTime()))
Vue.component("custom-card", httpVueLoader("/components/plugins/sysCard/index.vue?v=" + new Date().getTime()))
Vue.component(
"snaker-flow-task-form-action",
httpVueLoader("/components/plugins/snaker/snakerFlowTaskFormAction.vue?v=" + new Date().getTime())
)
Vue.component(
"snaker-flow-history-approval",
httpVueLoader("/components/plugins/snaker/snakerFlowHisApproval.vue?v=" + new Date().getTime())
)
Vue.component("snaker-chart", httpVueLoader("/components/plugins/snaker/snakerChart.vue?v=" + new Date().getTime()))
Vue.component("snaker-start", httpVueLoader("/components/plugins/snaker/snakerStart.vue?v=" + new Date().getTime()))
Vue.component("permission-group", httpVueLoader("/components/plugins/permissionGroup/index.vue?v=" + new Date().getTime()))
</script>
<style>
.v4-header {
background-color: rgb(0, 109, 185);
box-shadow: 0 2px 10px rgba(0, 109, 185, 0.3);
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 20000;
overflow: hidden;
}
.v4-logo-container {
display: flex;
align-items: center;
height: 100%;
padding: 10px;
width: 250px;
justify-content: center;
}
.v4-logo {
height: 100%;
width: auto;
}
.v4-nav {
display: flex;
gap: 40px;
align-items: center;
height: 100%;
}
.v4-nav-item {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
font-size: 15px;
font-weight: 500;
position: relative;
padding: 0 16px;
height: 100%;
display: flex;
align-items: center;
transition: all 0.2s ease;
column-gap: 10px;
white-space: nowrap;
}
.v4-nav-item:hover,
.v4-nav-item.active {
color: #ffffff;
background-color: rgba(255, 255, 255, 0.1) !important;
}
.v4-nav-item.active::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #ffffff;
}
.v4-user-section {
display: flex;
align-items: center;
gap: 24px;
height: 100%;
max-width: 310px;
flex-shrink: 0;
}
.v4-notification {
position: relative;
cursor: pointer;
width: 40px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0;
transition: background-color 0.2s;
}
.v4-notification:hover {
background-color: rgba(255, 255, 255, 0.15);
}
.v4-notification i {
font-size: 18px;
color: rgba(255, 255, 255, 0.85);
}
.v4-notification:hover i {
color: #ffffff;
}
.v4-badge {
position: absolute;
top: 0;
right: 0;
background-color: #ffffff;
color: rgb(0, 109, 185);
border-radius: 10px;
padding: 0 6px;
font-size: 12px;
min-width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
font-weight: bold;
}
.v4-user-info {
display: flex;
align-items: center;
gap: 12px;
padding: 0 12px;
height: 100%;
border-radius: 0;
cursor: pointer;
transition: background-color 0.2s;
}
.v4-user-info:hover {
background-color: rgba(255, 255, 255, 0.15);
}
.v4-voice-menu {
color: #ffffff;
cursor: pointer;
padding: 0 14px;
height: 100%;
border: 0;
background: transparent;
border-radius: 0;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
font: inherit;
outline: none;
}
.v4-voice-menu:hover,
.v4-voice-menu.is-listening {
background-color: rgba(255, 255, 255, 0.15);
color: #ffffff;
}
.v4-voice-menu.is-listening i {
color: #ffdf6b;
}
.v4-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
color: rgb(0, 109, 185);
font-weight: 500;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.v4-user-name {
font-weight: 500;
color: #ffffff;
white-space: nowrap;
}
.v4-logout {
color: #ffffff;
cursor: pointer;
padding: 0 14px;
height: 100%;
border-radius: 0;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.v4-logout:hover {
background-color: rgba(255, 255, 255, 0.15);
color: #ffffff;
}
.v4-content {
margin: 0 auto;
}
.v4-left-section {
display: flex;
align-items: center;
height: 100%;
}
@media (max-width: 1024px) {
.v4-nav {
gap: 24px;
}
.v4-user-info {
display: none;
}
.v4-user-section {
gap: 16px;
}
}
@media (max-width: 768px) {
.v4-nav {
display: none;
}
.voice-menu-text {
display: none;
}
}
/* 页脚样式 */
.v4-footer {
background: var(--color-primary);
padding: 30px 0;
}
.v4-footer-bottom {
max-width: 1500px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.v4-footer-copyright p {
margin: 4px 0;
color: #fff;
}
.v4-footer-tech {
color: #fff;
}
.v4-footer-tech a {
color: #fff;
text-decoration: none;
margin-left: 4px;
}
.v4-footer-tech a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header class="v4-header">
<div class="v4-left-section">
<div class="v4-logo-container">
<img src="${AppLogo!}" alt="Logo" class="v4-logo" />
</div>
<nav class="v4-nav">
<a href="/platform/v4/home" data-pjax class="v4-nav-item">
<i class="fa fa-home"></i>
首页
</a>
<a href="/platform/v4/apps" data-pjax class="v4-nav-item">
<i class="fa fa-th-large"></i>
应用中心
</a>
<a href="/platform/v4/serv" data-pjax class="v4-nav-item">
<i class="fa fa-th-large"></i>
流程中心
</a>
<a href="/platform/v4/todo" data-pjax class="v4-nav-item">
<i class="fa fa-th-large"></i>
待办中心
</a>
<a href="/platform/v4/msg" data-pjax class="v4-nav-item">
<i class="fa fa-th-large"></i>
消息中心
</a>
</nav>
</div>
<div class="v4-user-section">
<button type="button" class="v4-voice-menu" id="voice-menu-btn" data-platform="PC" title="语音打开菜单">
<i class="fa fa-microphone"></i>
<span class="voice-menu-text">语音</span>
</button>
<div class="v4-user-info">
<span class="v4-user-name">${@auth.getPrincipalProperty('username')} (${@auth.getPrincipalProperty('loginname')})</span>
<!-- <i class="fa fa-angle-down"></i> -->
</div>
<a class="v4-logout" href="/platform/login/logout">
<i class="fa fa-sign-out"></i>
退出
</a>
</div>
</header>
<div style="height: 64px"></div>
<main class="v4-content">
<!-- 页面内容区域 -->
<div class="ele-body" id="container">${layoutContent}</div>
</main>
<!-- 页脚 -->
<footer class="v4-footer" id="v4-footer" style="display: none;">
<div class="v4-footer-bottom">
<div class="v4-footer-copyright">
<p>&copy; 2025 武汉地大三思科技有限公司. 保留所有权利.</p>
<p>ICP备案号：のICP备12345678号-1 | 版本号：v4.0.0</p>
</div>
<div class="v4-footer-tech">
<span>技术支持：</span>
<a href="http://www.3sgo.cn/" target="_blank">武汉地大三思科技有限公司</a>
</div>
</div>
</footer>
<script nonce="${cspNonce!}">
// 处理导航项的active状态
$(document).ready(function () {
// 控制页脚显示的函数
function toggleFooter() {
var currentPath = getBaseSubAppPath()
var footer = $("#v4-footer")
if (currentPath === "/platform/v4/home") {
footer.show()
} else {
footer.hide()
}
}
// 初始化：根据当前URL设置active状态
function setActiveNavItem() {
var currentPath = getBaseSubAppPath()
$(".v4-nav-item").removeClass("active")
$(".v4-nav-item").each(function () {
if ($(this).attr("href") === currentPath) {
$(this).addClass("active")
}
})
}
// 页面加载时设置active状态和页脚显示
setActiveNavItem()
toggleFooter()
// 为导航项添加点击事件
$(".v4-nav-item").on("click", function () {
$(".v4-nav-item").removeClass("active")
$(this).addClass("active")
})
$(document).pjax(".v4-nav a[data-pjax]", "#container", {
maxCacheLength: 0,
push: false,
replace: true,
fragment: "#container",
timeout: 8000
})
// 使用pjax的事件来处理导航切换
$(document).on("pjax:complete", function () {
setActiveNavItem()
toggleFooter()
})
})
</script>
</body>
</html>
target/classes/views/layouts/v4/home.html
+2245
View File
File diff suppressed because it is too large Load Diff
target/classes/views/layouts/v4/home/act.js
+386
View File
@@ -0,0 +1,386 @@
const act = {
template: /*language=HTML*/ `
<!-- 活动 -->
<div class="activity-section-wrapper">
<div class="section-act">
<!-- Swiper容器 -->
<div v-if="actList && actList.length > 0" class="activity-swiper-container">
<!-- 活动数据 - Swiper -->
<div ref="activitySwiper" class="swiper activity-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(activity, index) in actList" :key="activity.id">
<div class="item" @click="go(activity)">
<div class="img-box">
<img :src="activity.cover || 'https://www.ncu.edu.cn/__local/8/52/2C/644986B4C9A030F7B65300178A6_8679CB08_18467.jpg'"
alt="">
<span class="status">
{{getStatusText(activity)}}
</span>
</div>
<h4 class="title">
{{ activity.name}}
</h4>
<!--报名时间-->
<div class="time">
<p>
<i class="fa fa-clock-o"></i>
时间：{{ activity.startDate }}至{{ activity.endDate }}
</p>
</div>
</div>
</div>
</div>
</div>
<!-- 导航按钮 -->
<div ref="nextButton" class="swiper-button-next"></div>
<div ref="prevButton" class="swiper-button-prev"></div>
<!-- 进度条 -->
<div ref="pagination" class="swiper-pagination"></div>
</div>
<div v-else class="no-activity-placeholder">
<div class="icon">📅</div>
<p>暂无近期活动</p>
<p class="subtext">敬请关注后续通知</p>
</div>
</div>
</div>
`,
data() {
return {
actList: [],
swiper: null
}
},
methods: {
/*查询活动*/
listAct() {
this.$axios.post("/platform/home/listHomeActivity").then((res) => {
if (res.code === 0) {
// for (let i = 0; i < 10; i++) {
// this.actList = this.actList.concat(res.data)
// }
this.actList = res.data
// 数据加载完成后初始化Swiper
this.$nextTick(() => {
this.initSwiper()
})
}
})
},
/*初始化Swiper*/
initSwiper() {
if (this.swiper) {
this.swiper.destroy(true, true)
this.swiper = null
}
const swiperElement = this.$refs.activitySwiper
if (!swiperElement) {
return
}
// 仅操作当前组件的轮播节点，避免页面其他轮播或尺寸观察器影响卡片宽度。
this.swiper = new Swiper(swiperElement, {
slidesPerView: 1,
spaceBetween: 18,
centeredSlides: false,
loop: false,
watchOverflow: true,
observer: false,
observeParents: false,
resizeObserver: false,
// 鼠标停留在活动区域时可横向浏览，到首尾后释放页面滚动。
mousewheel: {
enabled: true,
forceToAxis: false,
releaseOnEdges: true,
sensitivity: 0.8,
},
navigation: {
nextEl: this.$refs.nextButton,
prevEl: this.$refs.prevButton,
},
pagination: {
el: this.$refs.pagination,
type: 'progressbar',
},
breakpoints: {
768: {
slidesPerView: 2,
},
1024: {
slidesPerView: 4,
},
1200: {
slidesPerView: 5,
}
}
})
},
// 活动状态
getStatusText(item) {
if (this.$moment().unix() > this.$moment(item.endDate).unix()) {
return "已结束"
} else if (this.$moment().unix() < this.$moment(item.startDate).unix()) {
return "未开始"
} else {
return "进行中"
}
},
go(act) {
if (!act.url) {
this.$message.warning("管理员未配置活动链接")
return
}
if (act.url === "/platform/activity/apply"
&& !this.$auth.hasRoleOr(["SYSADMIN", "SCHOOL_UNION_ADMIN", "BRANCH_UNION_CHAIRMAN", "BRANCH_UNION_WENTI_SPORTS"])) {
return this.$message.warning("PC端暂未开放报名，请前往移动端报名！")
}
window.open(act.url)
}
},
mounted() {
this.listAct()
},
beforeDestroy() {
if (this.swiper) {
this.swiper.destroy(true, true)
this.swiper = null
}
},
style: /*language=CSS*/ `
.activity-section-wrapper {
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.section-act {
width: 100%;
min-width: 0;
max-width: 100%;
}
.section-act .section-act-title span {
font-size: 30px;
color: #000000;
display: block;
font-weight: bold;
position: relative;
text-align: center;
padding: 40px 0;
}
/*.section-act .section-act-title span:hover {
color: var(--color-primary);
cursor: pointer;
}*/
/deep/ .section-act .section-act-title span::before {
content: '';
width: 24px;
height: 11px;
background: url(https://www.ncu.edu.cn/images/titl.svg) no-repeat center;
background-size: 24px 11px;
display: inline-block;
margin-right: 0;
vertical-align: middle;
}
/deep/ .section-act .section-act-title span::after {
content: '';
width: 24px;
height: 11px;
background: url(https://www.ncu.edu.cn/images/titr.svg) no-repeat center;
background-size: 24px 11px;
display: inline-block;
margin-left: 0;
vertical-align: middle;
}
/* Swiper容器样式 */
.activity-swiper-container {
position: relative;
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
padding: 9px 54px 12px;
/*margin-top: 30px;*/
overflow: hidden;
}
.activity-swiper {
width: 100%;
min-width: 0;
/*padding: 0 50px 20px 50px;*/
overflow: hidden;
}
.activity-swiper .swiper-slide {
height: auto;
min-width: 0;
}
/* 导航按钮样式 */
.activity-swiper-container .swiper-button-next,
.activity-swiper-container .swiper-button-prev {
color: var(--color-primary);
background: white;
width: 40px;
height: 40px;
top: 72px;
margin-top: 0;
border-radius: 50%;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.activity-swiper-container .swiper-button-next:hover,
.activity-swiper-container .swiper-button-prev:hover {
background: var(--color-primary);
color: white;
transform: scale(1.1);
}
/deep/ .activity-swiper-container .swiper-button-next::after,
/deep/ .activity-swiper-container .swiper-button-prev::after {
font-size: 16px;
font-weight: bold;
}
/* 进度条不展示，活动通过左右箭头或区域内滚轮浏览。 */
.activity-swiper-container .swiper-pagination {
display: none;
}
.activity-swiper-container .swiper-pagination-progressbar {
background: #e0e0e0;
border-radius: 2px;
}
.activity-swiper-container .swiper-pagination-progressbar-fill {
background: var(--color-primary);
border-radius: 2px;
}
.activity-swiper .swiper-slide .item {
height: auto;
position: relative;
cursor: pointer;
min-width: 0;
overflow: hidden;
}
.activity-swiper .swiper-slide .item .img-box {
width: 100%;
height: 128px;
border-radius: 8px;
overflow: hidden;
position: relative;
}
.activity-swiper .swiper-slide .item .img-box .status {
position: absolute;
left: 0;
top: 0;
background: #c11623;
padding: 4px 2px;
min-width: 42px;
color: #ffffff;
border-radius: 0 0 50% 0;
font-size: 12px;
line-height: 1.2;
}
.activity-swiper .swiper-slide .item .img-box img {
display: block;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 128px !important;
object-fit: cover !important;
transition: transform 0.3s ease;
}
.activity-swiper .swiper-slide .item:hover .img-box img {
transform: scale(1.1);
}
.activity-swiper .swiper-slide .item h4 {
font-size: 15px;
margin: 8px 0 0;
height: 42px;
color: #333;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
text-align: left;
transition: color 0.3s ease;
}
.activity-swiper .swiper-slide .item:hover h4 {
color: var(--color-primary);
}
.activity-swiper .swiper-slide .item .time {
/*margin-top: 8px;*/
}
.activity-swiper .swiper-slide .item .time p {
font-size: 12px;
margin: 0;
line-height: 1.4;
color: #666;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.activity-swiper .swiper-slide .item .time i {
margin-right: 4px;
color: var(--color-primary);
}
/* 无活动占位提示 */
.no-activity-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
color: #94a3b8;
text-align: center;
}
.no-activity-placeholder .icon {
font-size: 48px;
margin-bottom: 12px;
opacity: 0.6;
}
.no-activity-placeholder p {
margin: 4px 0 0;
font-size: 16px;
font-weight: 500;
}
.no-activity-placeholder .subtext {
font-size: 13px;
opacity: 0.8;
}
`
};
target/classes/views/layouts/v4/home/entry.js
+274
View File
@@ -0,0 +1,274 @@
const entry = {
template: /*language=HTML*/ `
<div class="entry-wrapper">
<div :class="['entry-section', 'entry-section-' + section.key]" v-for="section in entrySections" :key="section.key">
<div class="entry-section-header">
<div class="entry-section-title">
<i :class="section.icon"></i>
<span>{{ section.title }}</span>
<em>/Applications</em>
</div>
</div>
<div class="apps-container">
<div class="app-grid">
<div class="app-item"
v-for="(item, index) in section.list"
:key="item.id || index"
@click="openService(item, section.key)">
<div class="app-icon">
<img v-if="item.picIcon" class="app-icon-img" :src="item.picIcon" alt="" />
<i v-else class="fa fa-cube app-icon-fallback"></i>
</div>
<div class="app-name">{{ item.name }}</div>
</div>
<el-empty class="app-empty"
v-if="!section.list || section.list.length === 0"
description="暂无数据"
:image-size="72">
</el-empty>
</div>
</div>
</div>
</div>
`,
data() {
return {
hasMore: true,
entries: {
serv: [],
app: [],
fav: []
},
}
},
computed: {
entrySections() {
return [
{ key: 'serv', title: '推荐服务', icon: 'fa fa-star', list: this.entries.serv },
{ key: 'app', title: '推荐应用', icon: 'fa fa-fire', list: this.entries.app },
{ key: 'fav', title: '我的收藏', icon: 'fa fa-heart', list: this.entries.fav }
];
}
},
created() {
this.getRecommendService()
this.getRecommendApp()
this.getFavorite()
},
methods: {
// 查询推荐服务
async getRecommendService() {
this.$axios.post('/platform/home/listRecommendService', {platform: "PC"}).then(res => {
if (res.code === 0) {
this.entries.serv = res.data
}
})
},
// 获取推荐应用
async getRecommendApp() {
this.$axios.post('/platform/home/listRecommendApp', {platform: "PC"}).then(res => {
if (res.code === 0) {
this.entries.app = res.data
}
})
},
// 获取我的收藏
async getFavorite() {
this.$axios.post('/platform/home/listFavorite', {platform: "PC"}).then(res => {
if (res.code === 0) {
this.entries.fav = res.data
}
})
},
// 点击服务或应用
openService(service, category) {
if (category === 'serv') {
if (!service.href) {
this.$message.error('无效的链接地址')
return
}
window.open(service.href)
return
}
if (category === 'app') {
window.sessionStorage.setItem("zhgh_sub_app", JSON.stringify(service))
window.open("/platform/v4/subApp?appId=" + service.id, "_blank")
return
}
if (category === 'fav') {
if (service.href) {
window.open(service.href)
return
}
if (!service.parentId) {
window.sessionStorage.setItem("zhgh_sub_app", JSON.stringify(service))
window.open("/platform/v4/subApp?appId=" + service.id, "_blank")
return
}
this.$message.error('无效的链接地址')
}
}
},
style: /*language=CSS*/ `
.entry-wrapper {
width: 100%;
box-sizing: border-box;
}
.entry-section + .entry-section {
margin-top: 22px;
}
/* 临时屏蔽“我的收藏”分组，保留原节点和数据逻辑便于恢复 */
.entry-section-fav {
display: none;
}
.entry-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.entry-section-title {
display: inline-flex;
align-items: baseline;
gap: 6px;
color: #19324d;
font-size: 18px;
font-weight: 700;
}
.entry-section-title i {
color: #409eff;
font-size: 16px;
}
.entry-section-title em {
color: #b5c0d6;
font-size: 14px;
font-style: normal;
font-weight: 500;
}
.apps-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.app-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
justify-items: center;
justify-content: start;
gap: 12px 18px;
min-height: 116px;
padding: 18px 20px;
background: #fff;
border: 1px solid #edf1f7;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
overflow-x: hidden;
}
.app-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
border-radius: 8px;
background: #fff;
width: 100%;
max-width: 108px;
min-width: 0;
box-sizing: border-box;
padding: 6px;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
overflow: hidden;
}
.app-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.app-icon {
width: 56px;
height: 56px;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 56px;
overflow: hidden;
border-radius: 8px;
background: #f5f8ff;
}
.app-icon img,
.app-icon-img {
display: block;
width: 56px !important;
height: 56px !important;
max-width: 56px !important;
max-height: 56px !important;
object-fit: contain !important;
border-radius: 8px;
}
.app-icon-fallback {
color: #409eff;
font-size: 24px;
}
.app-name {
min-height: 34px;
width: 100%;
font-size: 12px;
color: #333;
line-height: 1.4;
word-break: break-word;
text-align: center;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.app-empty {
grid-column: 1 / -1;
width: 100%;
}
@media (max-width: 768px) {
.app-grid {
grid-template-columns: repeat(3, minmax(72px, 1fr));
gap: 12px;
padding: 14px 10px;
}
.app-item {
padding: 8px 4px;
}
}
@media (max-width: 480px) {
.app-grid {
grid-template-columns: repeat(2, minmax(72px, 1fr));
gap: 12px;
}
}
`
};
target/classes/views/layouts/v4/home/index.html
+204
View File
@@ -0,0 +1,204 @@
<!--#
layout("/layouts/v4/baseLayout.html"){
#-->
<style>
.section-banner {
position: relative;
overflow: hidden;
}
.section-banner .banner-img {
width: 100%;
height: auto;
}
.section-banner .banner-img img {
width: 100%;
height: auto;
display: block;
}
.section-wrapper {
width: 100%;
}
.home-grid {
width: 80%;
margin: 20px auto;
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: stretch;
row-gap: 24px;
}
.entry-card {
display: flex;
/*align-items: center;*/
min-width: 320px;
background: transparent;
border-radius: 0;
box-shadow: none;
padding: 0;
transition: transform 0.2s, box-shadow 0.2s;
}
.entry-card:hover {
transform: none;
box-shadow: none;
}
.act-card {
display: flex;
align-items: center;
width: 100%;
min-width: 0;
max-width: 100%;
background: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
padding: 22px 11px;
box-sizing: border-box;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
}
.home-section {
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.home-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.home-section-title {
display: inline-flex;
align-items: baseline;
gap: 6px;
color: #19324d;
font-size: 18px;
font-weight: 700;
}
.home-section-title i {
color: #409eff;
font-size: 16px;
}
.home-section-title em {
color: #b5c0d6;
font-size: 14px;
font-style: normal;
font-weight: 500;
}
/* 推荐入口的 scoped 样式会在组件挂载后注入，此处提前限制图片尺寸，避免刷新时原图短暂撑开页面。 */
#v4-home-app .entry-card .app-icon {
width: 56px;
height: 56px;
overflow: hidden;
}
#v4-home-app .entry-card .app-icon img {
display: block;
width: 56px;
height: 56px;
max-width: 56px;
max-height: 56px;
object-fit: contain;
}
</style>
<div class="v4-container" id="v4-home-app">
<!-- 首页banner -->
<div class="section-banner">
<div class="banner-img">
<img :src="homeBannerList[0] || ''" alt=""/>
<stats></stats>
</div>
</div>
<div class="" style="padding-bottom: 20px">
<user></user>
<div class="home-grid">
<div class="entry-card">
<entry></entry>
</div>
</div>
<div class="home-grid">
<div class="home-section">
<div class="home-section-header">
<div class="home-section-title">
<i class="fa fa-calendar"></i>
<span>最新活动</span>
<em>/Activities</em>
</div>
</div>
<div class="act-card">
<act></act>
</div>
</div>
</div>
<work-template v-if="$auth.hasRoleOr(['SYSADMIN','SCHOOL_UNION_ADMIN'])"></work-template>
<jcdt :list="websiteNews"></jcdt>
</div>
</div>
<script nonce="${cspNonce!}">
<!--#include("act.js"){}#-->
<!--#include("template.js"){}#-->
<!--#include("jcdt.js"){}#-->
<!--#include("entry.js"){}#-->
<!--#include("user.js"){}#-->
<!--#include("stats.js"){}#-->
new Vue({
el: '#v4-home-app',
data(){
return{
websiteNews: [],
homeBannerList: "${config.AppHomeImg!}".split(",").map(item => item.trim()).filter(item => item)
}
},
components: {
'act': act,
'work-template': workTemplate,
'jcdt': jcdt,
'entry': entry,
'user': user,
'stats': stats,
},
mounted() {
this.getWebSiteNews()
},
methods: {
getWebSiteNews(){
this.$axios.post('/platform/home/getNews').then(res => {
if (res.code === 0) {
this.websiteNews = res.data
}
})
}
}
})
</script>
<!--#
}
#-->
target/classes/views/layouts/v4/home/jcdt.js
+182
View File
@@ -0,0 +1,182 @@
const jcdt = {
template: /*language=HTML*/ `
<div class="jcdt-wrapper">
<div class="jcdt-container">
<el-carousel height="360px" :interval="10000" indicator-position="none">
<el-carousel-item v-for="item,index in list" :key="index">
<div class="jcdt-title">
<span>{{ item.label }}</span>
</div>
<div class="jcdt-content">
<div class="jcdt-list">
<div class="jcdt-item" v-for="o,i in item.value" :key="i" @click="onLink(o)">
<div class="date" v-if="o.time">
<i class="el-icon-alarm-clock"></i>
<span>{{o.time}}</span>
</div>
<div style="display: flex; align-items: center">
<div>
</div>
<div class="title">{{o.text}}</div>
</div>
</div>
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
`,
data() {
return {}
},
props: {
list: {
type: Array,
default: []
}
},
methods: {
onLink(item) {
const url = this.isHttpOrHttps(item.href) ? item.href : "https://xgh.cug.edu.cn/" + item.href
window.open(url)
},
isHttpOrHttps(url) {
return /^(http:\/\/|https:\/\/)/i.test(url)
}
},
style: /*language=CSS*/ `
.jcdt-wrapper {
width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.jcdt-container {
width: 80%;
max-width: 80%;
margin: 0 auto 10px;
background-color: #FFFFFF;
border-radius: 12px;
padding: 20px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
/deep/ .jcdt-title{
font-size: 30px;
color: #000000;
display: block;
font-weight: bold;
position: relative;
text-align: center;
padding: 20px 0;
}
/deep/ .jcdt-container .jcdt-title span::before {
content: '';
width: 24px;
height: 11px;
background: url(https://www.ncu.edu.cn/images/titl.svg) no-repeat center;
background-size: 24px 11px;
display: inline-block;
margin-right: 0;
vertical-align: middle;
}
/deep/ .jcdt-container .jcdt-title span::after {
content: '';
width: 24px;
height: 11px;
background: url(https://www.ncu.edu.cn/images/titr.svg) no-repeat center;
background-size: 24px 11px;
display: inline-block;
margin-left: 0;
vertical-align: middle;
}
/deep/ .jcdt-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
/deep/ .jcdt-item {
display: flex;
flex-direction: column;
padding: 16px;
border: none;
border-bottom: 3px solid transparent;
transition: all 0.3s ease;
cursor: pointer;
height: auto;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-bottom-color: var(--color-primary);
background: #ffffff;
}
/deep/ .jcdt-item:hover{
transform: translateY(-4px);
}
/deep/ .jcdt-item .date {
font-size: 20px;
font-weight: bold;
white-space: nowrap;
text-align: left;
margin-bottom: 8px;
transition: opacity 0.3s ease;
}
/deep/ .jcdt-item .title {
font-size: 16px;
font-weight: 600;
/*margin-bottom: 12px;*/
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
/*height: 45px;*/
}
/deep/ .jcdt-item .image {
width: 100%;
height: 180px;
margin: 0 0 16px 0;
border-radius: 8px;
overflow: hidden;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
/deep/ .jcdt-item .image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
/deep/ .jcdt-item .summary {
font-size: 14px;
color: #666;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-align: justify;
margin-bottom: 12px;
}
/deep/ .jcdt-item i {
color: #007aff;
}
`
};
target/classes/views/layouts/v4/home/stats.js
+232
View File
@@ -0,0 +1,232 @@
const stats = {
template: /*language=HTML*/ `
<div class="stats-section">
<div class="stats-family">
<img src="/assets/platform/img/home/family.png"/>
</div>
<div class="stats-grid">
<!-- 待办 -->
<div
class="stat-item pending"
@click="handleStatClick('todo')"
>
<div class="stat-content">
<div class="stat-label">待办</div>
<div class="stat-number">{{ stats.todoCount }}</div>
</div>
<div class="stat-icon">
<i class="fa fa-clock-o"></i>
</div>
</div>
<!-- 已办 -->
<div
class="stat-item completed"
@click="handleStatClick('done')"
>
<div class="stat-content">
<div class="stat-label">已办</div>
<div class="stat-number">{{ stats.doneCount }}</div>
</div>
<div class="stat-icon">
<i class="fa fa-check-circle"></i>
</div>
</div>
<!-- 消息 -->
<div
class="stat-item messages"
@click="handleStatClick('notification')"
>
<div class="stat-content">
<div class="stat-label">消息</div>
<div class="stat-number">{{ stats.notifications }}</div>
</div>
<div class="stat-icon">
<i class="fa fa-bell"></i>
</div>
</div>
<!-- 发起 -->
<div
class="stat-item reminders"
@click="handleStatClick('started')"
>
<div class="stat-content">
<div class="stat-label">发起</div>
<div class="stat-number">{{ stats.startedCount }}</div>
</div>
<div class="stat-icon">
<i class="fa fa-file-text"></i>
</div>
</div>
</div>
</div>
`,
data() {
return {
stats: {
todoCount: 0,
doneCount: 0,
notifications: 0,
startedCount: 0
}
}
},
methods: {
handleStatClick(type) {
if (['todo', 'done', 'started'].includes(type)) {
window.open('/flow/todoCenter?status=' + type)
} else if (type === 'notification') {
window.open('/platform/v4/msg')
}
},
loadStats() {
this.$axios.post("/flow/todoCenter/statistics").then(res => {
if (res.code === 0) {
this.stats = res.data;
}
})
}
},
mounted() {
this.loadStats();
},
style: /*language=CSS*/ `
/* 右侧统计区域 */
.stats-section {
/*background: white;*/
color: #333;
padding: 20px;
border-radius: 12px;
z-index: 10;
width: 80%;
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px auto 0;
/*border: 1px solid #e8e8e8;*/
}
/* 子内容临时屏蔽时，同步收起统计容器，避免首页 banner 下方出现空白 */
.stats-section {
display: none;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
width: 32%;
min-width: 360px;
margin-left: auto;
}
/* 临时屏蔽首页右上角“待办、已办、消息、发起”统计卡片，保留原模板便于恢复 */
.stats-grid {
display: none;
}
.stat-item {
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #1f2937;
padding: 20px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
width: 100%;
height: 90px;
}
.stat-item:hover {
background: rgba(255, 255, 255, 0.62);
border-color: rgba(255, 255, 255, 0.55);
transform: translateY(-5px);
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
}
.stat-icon {
font-size: 26px;
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.42);
color: rgba(31, 41, 55, 0.72);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.stat-item.pending .stat-icon,
.stat-item.completed .stat-icon,
.stat-item.messages .stat-icon,
.stat-item.reminders .stat-icon {
background: rgba(255, 255, 255, 0.42);
}
.stat-item.pending .stat-icon {
color: #2563eb;
}
.stat-item.completed .stat-icon {
color: #16a34a;
}
.stat-item.messages .stat-icon {
color: #d97706;
}
.stat-item.reminders .stat-icon {
color: #0891b2;
}
.stat-content {
display: flex;
flex-direction: column;
margin-left: 0;
min-width: 0;
text-align: left;
}
.stat-label {
font-size: 14px;
color: rgba(31, 41, 55, 0.78);
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.2;
}
.stat-number {
font-size: 28px;
font-weight: 700;
color: #111827;
margin-top: 6px;
line-height: 1;
}
.stats-family {
width: 68%;
}
.stats-family img {
height: 190px !important;
border-radius: 30px;
}
/* 临时屏蔽“欢迎来到职工之家”图片，保留原节点便于恢复 */
.stats-family {
display: none;
}
`
};
target/classes/views/layouts/v4/home/template.js
+214
View File
@@ -0,0 +1,214 @@
const workTemplate = {
template: /*language=HTML*/ `
<div class="section-wrapper work-template-wrapper">
<div class="work-template-header">
<div class="work-template-title">
<i class="fa fa-clipboard"></i>
<span>工作模板</span>
<em>/Templates</em>
</div>
</div>
<div class="work-template-card">
<div v-if="templateList && templateList.length > 0" class="work-template-grid">
<div class="work-template-item"
v-for="template in templateList"
:key="template.id"
@click="go(template)">
<div class="work-template-icon">
<img :src="template.templateIcon || template.cover || 'https://www.ncu.edu.cn/__local/8/52/2C/644986B4C9A030F7B65300178A6_8679CB08_18467.jpg'"
alt="">
</div>
<div class="work-template-name">{{ template.templateName || template.name }}</div>
</div>
</div>
<div v-else class="no-activity-placeholder">
<div class="icon"><i class="fa fa-clipboard"></i></div>
<p>暂无工作模板</p>
<p class="subtext">敬请关注后续更新</p>
</div>
</div>
</div>
`,
data() {
return {
templateList: []
}
},
methods: {
listTemplate() {
this.$axios.post("/platform/home/listHomeTemplate").then((res) => {
if (res.code === 0) {
this.templateList = res.data
}
})
},
go(template) {
if (!template.url) {
this.$message.warning("管理员未配置模板链接")
return
}
const url = new URL(template.url, window.location.origin)
if (!url.searchParams.get("mode")) {
url.searchParams.set("mode", "edit")
}
if (!url.searchParams.get("id") && template.id) {
url.searchParams.set("id", template.id)
}
window.localStorage.setItem("zhgh_home_template_edit", JSON.stringify({
path: url.pathname,
id: url.searchParams.get("id"),
expiresAt: Date.now() + 60000
}))
window.open(url.href)
}
},
mounted() {
this.listTemplate()
},
style: /*language=CSS*/ `
.work-template-wrapper {
width: 80%;
margin: 20px auto 28px;
}
.work-template-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.work-template-title {
display: inline-flex;
align-items: baseline;
gap: 6px;
color: #19324d;
font-size: 18px;
font-weight: 700;
}
.work-template-title i {
color: #409eff;
font-size: 16px;
}
.work-template-title em {
color: #b5c0d6;
font-size: 14px;
font-style: normal;
font-weight: 500;
}
.work-template-card {
background: #ffffff;
border: 1px solid #edf1f7;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
min-height: 116px;
padding: 18px 20px;
}
.work-template-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
justify-items: center;
justify-content: start;
gap: 12px 18px;
overflow-x: hidden;
}
.work-template-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 8px;
background: #fff;
width: 100%;
max-width: 100%;
padding: 6px;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.work-template-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.work-template-icon {
width: 55px;
height: 55px;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.work-template-icon img {
width: 55px !important;
height: 55px !important;
max-width: none;
max-height: none;
object-fit: cover;
border-radius: 8px;
}
.work-template-name {
min-height: 34px;
font-size: 12px !important;
font-weight: 400;
color: #333;
line-height: 1.4;
word-break: break-word;
text-align: center;
}
.work-template-wrapper .no-activity-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
color: #94a3b8;
text-align: center;
}
.work-template-wrapper .no-activity-placeholder .icon {
font-size: 44px;
margin-bottom: 12px;
opacity: 0.6;
}
.work-template-wrapper .no-activity-placeholder p {
margin: 4px 0 0;
font-size: 16px;
font-weight: 500;
}
.work-template-wrapper .no-activity-placeholder .subtext {
font-size: 13px;
opacity: 0.8;
}
@media (max-width: 768px) {
.work-template-grid {
grid-template-columns: repeat(3, minmax(72px, 1fr));
gap: 12px;
}
.work-template-item {
padding: 8px 4px;
}
}
@media (max-width: 480px) {
.work-template-grid {
grid-template-columns: repeat(2, minmax(72px, 1fr));
gap: 12px;
}
}
`
};
target/classes/views/layouts/v4/home/user.js
+553
View File
@@ -0,0 +1,553 @@
const user = {
template: /*language=HTML*/ `
<div class="user-wrapper">
<!-- 用户容器：左右布局 -->
<div class="user-container">
<!-- 左侧：用户信息卡片 -->
<div class="user-info-card">
<div class="user-details">
<div class="user-name">${@auth.getPrincipalProperty('username')}</div>
<div class="user-meta-grid">
<div class="meta-row">
<span class="meta-icon">🆔</span>
<div>
<span class="meta-label">工号</span>
<span class="meta-value">${@auth.getPrincipalProperty('loginname')}</span>
</div>
</div>
<div class="meta-row">
<span class="meta-icon">🏢</span>
<div>
<span class="meta-label">单位信息</span>
<span class="meta-value">
<!--#if(!isEmpty(@auth.getPrincipalProperty('unit'))){#-->
${@auth.getPrincipalProperty('unit').getName()}
<!--#}#-->
(
<!--#if(!isEmpty(@auth.getPrincipalProperty('union'))){#-->
${@auth.getPrincipalProperty('union').getName()}
<!--#}#-->
)
</span>
</div>
</div>
<div class="meta-row">
<span class="meta-icon">🎭</span>
<div>
<span class="meta-label">角色</span>
<span class="meta-value">{{ roleNames || '—' }}</span>
</div>
</div>
</div>
</div>
<!-- 天气区域 -->
<div v-if="weatherData" class="weather-section" :class="weatherData.bgClass">
<div style="display: flex; justify-content: space-around">
<div class="weather-header">
<span class="weather-location">{{ weatherData.name }}</span>
<span class="weather-text">{{ weatherData.text }}</span>
</div>
<div class="weather-main">
<span class="weather-emoji">{{ weatherData.emoji }}</span>
<span class="weather-temp">{{ weatherData.temp }}°</span>
</div>
</div>
<div class="weather-tip">{{ weatherData.tip }}</div>
</div>
<div v-else-if="weatherError" class="weather-error">
🌤️ 天气服务暂时不可用
</div>
</div>
<!-- 右侧：待办中心 -->
<div class="todo-center">
<!-- 标题和标签 -->
<div class="header">
<h3>待办中心</h3>
<el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
<el-tab-pane :label="tabLabel('待办事宜', taskStats.todoCount)" name="todo"></el-tab-pane>
<el-tab-pane :label="tabLabel('已办事宜', taskStats.doneCount)" name="done"></el-tab-pane>
<el-tab-pane :label="tabLabel('我的发起', taskStats.startedCount)" name="started"></el-tab-pane>
<el-tab-pane :label="tabLabel('办结事务', taskStats.completedCount)" name="completed"></el-tab-pane>
</el-tabs>
</div>
<!-- 表格 -->
<el-table
:data="todoList"
style="width: 100%"
border
stripe
v-loading="loading"
:cell-style="{ padding: '8px' }"
:header-cell-style="{ background: '#f8f9fa', color: '#444', fontWeight: '500' }"
>
<el-table-column label="序号" type="index" :index="indexMethod" width="100px"></el-table-column>
<el-table-column prop="categoryName" label="流程分类" width="100"></el-table-column>
<el-table-column prop="title" label="流程名称" min-width="300">
<template slot-scope="scope">
<el-tooltip effect="dark" :content="scope.row.instanceName" placement="top">
<span class="table-title">{{ scope.row.instanceName }}</span>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="sender" label="申请人" width="120">
<template slot-scope="{row}">{{row.variable.initiatorName}}</template>
</el-table-column>
<el-table-column prop="taskName" label="当前流程节点" width="140" show-overflow-tooltip></el-table-column>
<el-table-column prop="date" label="发起日期" width="120">
<template slot-scope="{row}">
{{$moment(row.createdAt).format('YYYY-MM-DD')}}
</template>
</el-table-column>
<el-table-column label="操作" width="100px" fixed="right">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="openView(scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
<!--#include("/layouts/pagination.html"){}#-->
</div>
</div>
</div>
`,
mixins: [initTableMixins],
data() {
return {
activeTab: 'todo',
todoList: [],
loading: false,
pageForm: {
pageNum: 1,
pageSize: 5,
totalCount: 0
},
taskStats: {
todoCount: 0,
doneCount: 0,
startedCount: 0,
completedCount: 0
},
// 🔆 天气相关数据
weatherData: null,
weatherError: false,
// 🔑 和风天气 API Key（请替换为你自己的）
QWEATHER_KEY: 'f916578cbb0e4b55b778b0de5847ecf5', // ←← 务必替换！
roleNames: ""
};
},
methods: {
getWeatherInfo(iconCode, temp) {
const info = {
emoji: '🌤️',
tip: '今日天气宜人，心情也该放晴啦！',
bgClass: 'weather-sunny' // 用于 CSS 类
};
const tempNum = parseFloat(temp);
const isCold = tempNum < 10;
const isHot = tempNum > 28;
// 按照和风天气 iconCode 分类
if (['100'].includes(iconCode)) {
info.emoji = '☀️';
info.tip = isHot ? '高温预警！注意防暑降温，多喝水～' : '阳光灿烂，适合外出走走！';
info.bgClass = 'weather-sunny';
} else if (['101', '102', '103', '104'].includes(iconCode)) {
info.emoji = ['101', '103'].includes(iconCode) ? '⛅' : '☁️';
info.tip = isCold ? '天凉加衣，别让感冒找上门！' : '云层温柔，适合静心工作。';
info.bgClass = 'weather-cloudy';
} else if (['300', '301', '302', '305', '306', '399'].some(code => code === iconCode)) {
info.emoji = '🌧️';
info.tip = '🌧️ 下雨啦！记得带伞，小心路滑～';
info.bgClass = 'weather-rainy';
} else if (['307', '308', '309', '310'].includes(iconCode)) {
info.emoji = '⛈️';
info.tip = '⛈️ 雷雨天气，请减少外出，注意安全！';
info.bgClass = 'weather-storm';
} else if (['400', '401', '402', '403'].includes(iconCode)) {
info.emoji = '❄️';
info.tip = '❄️ 天寒地冻，保暖最重要！';
info.bgClass = 'weather-snowy';
} else if (['404', '405', '406', '407', '408', '409', '410'].includes(iconCode)) {
info.emoji = '🌫️';
info.tip = '🌫️ 能见度较低，出行请注意安全。';
info.bgClass = 'weather-foggy';
} else if (['500', '501', '502', '504'].includes(iconCode)) {
info.emoji = '🌀';
info.tip = '🌀 极端天气预警！请关注官方通知。';
info.bgClass = 'weather-extreme';
} else {
info.emoji = '🌤️';
info.tip = '今日天气未知，但愿你心情晴朗！';
info.bgClass = 'weather-default';
}
return info;
},
async getConfigKey(key) {
const resp = await this.$axios.post("/open/common/getConfigKey", { key })
return resp.data
},
// 🔆 获取天气
async fetchWeather() {
try {
// 存localStorage 112.13,32.01 广州 113.27,23.14
const AppMapCenterPointX = await this.getConfigKey("AppMapCenterPointX")
const AppMapCenterPointY = await this.getConfigKey("AppMapCenterPointY")
if (!AppMapCenterPointX || !AppMapCenterPointY){
return
}
// 1. 先通过城市名获取 locationId
this.$axios.get("https://mx5rk62kvj.re.qweatherapi.com/geo/v2/city/lookup?location=" + AppMapCenterPointX + "," + AppMapCenterPointY + "&key=" + this.QWEATHER_KEY).then((geoRes) => {
if (geoRes.code !== '200' || !geoRes.location?.[0]) {
console.log('城市未找到')
}
const locationId = geoRes.location[0].id;
// 2. 获取当前天气
this.$axios.get("https://mx5rk62kvj.re.qweatherapi.com/v7/weather/now?location=" + locationId + "&key=" + this.QWEATHER_KEY).then((weatherRes) => {
if (weatherRes.code !== '200') {
console.warn('天气数据异常:', weatherRes);
}
const weatherInfo = this.getWeatherInfo(weatherRes.now.icon, weatherRes.now.temp);
this.weatherData = {
...weatherInfo,
temp: weatherRes.now.temp,
text: weatherRes.now.text,
name: geoRes.location[0].name
};
this.weatherError = false;
})
})
} catch (err) {
console.warn('天气加载失败:', err);
this.weatherError = true;
this.weatherData = null;
}
},
// 获取任务列表
tabLabel(title, count) {
return title + "（" + (count || 0) + "）"
},
async getStatistics() {
try {
const res = await $.post("/flow/todoCenter/statistics")
if (res.code === 0) {
this.taskStats = Object.assign({}, this.taskStats, res.data)
}
} catch (error) {
console.error("获取待办统计失败:", error)
}
},
async getTasks() {
this.loading = true
try {
const res = await $.post("/flow/todoCenter/" + this.activeTab, this.pageForm)
if (res.code === 0) {
this.todoList = res.data.list
this.pageForm.totalCount = res.data.totalCount
}
} catch (error) {
this.$message.error("获取任务列表失败")
console.error("获取任务列表失败:", error)
} finally {
this.loading = false
}
},
pageData() {
this.getTasks()
this.getStatistics()
},
handleTabClick(tab) {
this.pageData()
console.log('切换到:', tab.name);
},
// 处理任务
async openView(task) {
console.log(task)
const {taskId, taskKey, taskState, instanceId, businessNo, formKey} = task
if (!formKey) {
this.$message.warning("当前流程没有配置地址")
return
}
window.open(formKey + "?taskId=" + taskId + "&bizId=" + businessNo + "&taskKey=" + taskKey + "&tab=" + this.activeTab)
},
getRoleNames() {
$.post("/platform/sys/role/getRoleNames").then(res => {
if (res.code === 0) {
this.roleNames = res.data.roleNames
}
})
}
},
created() {
this.pageData()
this.getRoleNames()
},
mounted() {
this.fetchWeather()
},
style: /*language=CSS*/ `
.user-wrapper {
width: 100%;
background-color: #f5f7fa;
}
.user-container {
width: 80%;
margin: 12px auto 20px;
display: grid;
grid-template-columns: 0.7fr 2.3fr;
gap: 24px;
align-items: stretch;
row-gap: 24px;
}
.user-info-card {
background: white;
border-radius: 16px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
padding: 24px;
display: flex;
flex-direction: column;
gap: 20px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.user-info-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
/* 头像占位符 */
.user-avatar-placeholder {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, #409eff, #1877f2);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 600;
margin: 0 auto;
box-shadow: 0 4px 10px rgba(24, 127, 255, 0.3);
}
/* 用户名 */
.user-name {
font-size: 20px;
font-weight: 700;
color: #1f2937;
text-align: center;
margin: 8px 0 0;
}
/* 元信息网格 */
.user-meta-grid {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 8px;
}
.meta-row {
display: flex;
align-items: flex-start;
gap: 12px;
}
.meta-icon {
font-size: 18px;
min-width: 24px;
text-align: center;
color: #409eff;
margin-top: 2px;
}
.meta-row > div {
flex: 1;
}
.meta-label {
font-size: 12px;
color: #6b7280;
font-weight: 500;
display: block;
margin-bottom: 2px;
}
.meta-value {
font-size: 15px;
color: #1f2937;
font-weight: 600;
word-break: break-word;
}
/* === 天气卡片 - 情感化设计 === */
.weather-section {
border-radius: 16px;
padding: 20px;
text-align: center;
color: white;
background: linear-gradient(135deg, #a8edea, #fed6e3); /* 默认柔和渐变 */
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
/* 不同天气的背景主题 */
.weather-sunny {
background: linear-gradient(135deg, #FFD700, #FFA500);
color: #2c3e50;
}
.weather-cloudy {
background: linear-gradient(135deg, #B0C4DE, #708090);
color: white;
}
.weather-rainy {
background: linear-gradient(135deg, #4A6FA5, #1E3F66);
color: white;
}
.weather-storm {
background: linear-gradient(135deg, #2F2F2F, #0D0D0D);
color: #FFD700;
}
.weather-snowy {
background: linear-gradient(135deg, #E0F7FA, #B3E5FC);
color: #01579B;
}
.weather-foggy {
background: linear-gradient(135deg, #D7CCC8, #A1887F);
color: white;
}
.weather-extreme {
background: linear-gradient(135deg, #FF5252, #B71C1C);
color: white;
}
.weather-default {
background: linear-gradient(135deg, #E0E0E0, #90A4AE);
color: #333;
}
/* 天气头部：城市 + 描述 */
.weather-header {
margin-bottom: 12px;
}
.weather-location {
font-weight: 700;
font-size: 16px;
display: block;
}
.weather-text {
font-size: 13px;
opacity: 0.9;
display: block;
margin-top: 4px;
}
/* 主体：图标 + 温度 */
.weather-main {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
position: relative;
bottom: 8px;
}
.weather-emoji {
font-size: 36px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.weather-temp {
font-size: 28px;
font-weight: 800;
}
/* 贴心提示语 */
.weather-tip {
font-size: 14px;
line-height: 1.5;
opacity: 0.95;
margin-top: 8px;
padding: 0 8px;
}
/* 错误状态 */
.weather-error {
text-align: center;
color: #94a3b8;
font-size: 14px;
padding: 16px;
background: #f8fafc;
border-radius: 12px;
border: 1px dashed #cbd5e1;
}
/* 右侧待办中心 */
.todo-center {
min-width: 320px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
padding: 16px;
transition: transform 0.2s, box-shadow 0.2s;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.header h3 {
font-size: 18px;
color: #333;
margin: 0;
border-left: 4px solid #1890ff;
padding-left: 10px;
font-weight: 600;
}
.el-tabs {
margin-top: 10px;
}
.table-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 280px;
display: inline-block;
}
.pagination {
margin-top: 20px;
text-align: right;
}
/* 响应式：小屏下堆叠 */
@media (max-width: 768px) {
.user-container {
flex-direction: column;
width: 95%;
}
.user-info-card, .todo-center {
min-width: 100%;
width: 100%;
}
}
`
};
target/classes/views/layouts/v4/msg.html
+444
View File
@@ -0,0 +1,444 @@
<!--#
layout("/layouts/v4/baseLayout.html"){
#-->
<style>
.message-center {
padding: 20px;
}
.statistics-section {
margin-bottom: 20px;
}
.stat-card {
border: none;
height: 100%;
cursor: pointer;
transition: all 0.3s ease;
}
.stat-card .el-card__body {
padding: 20px;
}
.stat-content {
display: flex;
align-items: center;
}
.stat-icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
font-size: 28px;
}
.all-icon {
background-color: rgba(64, 158, 255, 0.1);
color: #409eff;
}
.unread-icon {
background-color: rgba(245, 108, 108, 0.1);
color: #f56c6c;
}
.read-icon {
background-color: rgba(103, 194, 58, 0.1);
color: #67c23a;
}
.stat-info {
flex: 1;
}
.stat-value {
font-size: 28px;
font-weight: 600;
line-height: 1.2;
margin-bottom: 5px;
}
.stat-label {
font-size: 14px;
color: #909399;
}
/* 搜索区域样式 */
.filter-section {
margin-bottom: 20px;
}
.filter-section .el-card__body {
padding: 15px 20px;
}
.search-form {
display: flex;
flex-wrap: wrap;
}
.search-form .el-form-item {
margin-bottom: 0;
margin-right: 15px;
}
/* 消息列表区域样式 */
.message-section .el-card__header {
padding: 0;
border-bottom: none;
}
/* 优化后的 tabs 样式 */
.message-header .el-tabs__header {
margin: 0;
padding: 0 20px;
background-color: #fff;
}
.message-header .el-tabs__nav-wrap::after {
height: 1px;
background-color: #ebeef5;
}
.message-header .el-tabs__item {
height: 50px;
line-height: 50px;
font-size: 15px;
color: #606266;
padding: 0 20px;
transition: all 0.3s;
}
.message-header .el-tabs__item.is-active {
color: var(--color-primary);
font-weight: 500;
}
.message-header .el-tabs__active-bar {
height: 3px;
border-radius: 3px;
}
.message-title {
font-weight: 500;
color: #303133;
}
.pagination-container {
margin-top: 20px;
display: flex;
justify-content: center;
padding: 10px 0;
}
</style>
<div id="app" v-cloak>
<div class="message-center">
<!-- 统计数据区域 -->
<el-row :gutter="20" class="statistics-section">
<el-col :span="8">
<el-card shadow="never" class="stat-card">
<div class="stat-content">
<div class="stat-icon all-icon">
<i class="el-icon-message"></i>
</div>
<div class="stat-info">
<div class="stat-value">{{stats.total}}</div>
<div class="stat-label">全部消息</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="never" class="stat-card">
<div class="stat-content">
<div class="stat-icon unread-icon">
<i class="el-icon-bell"></i>
</div>
<div class="stat-info">
<div class="stat-value">{{stats.unread}}</div>
<div class="stat-label">未读消息</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="never" class="stat-card">
<div class="stat-content">
<div class="stat-icon read-icon">
<i class="el-icon-finished"></i>
</div>
<div class="stat-info">
<div class="stat-value">{{stats.read}}</div>
<div class="stat-label">已读消息</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
<!-- 搜索筛选区域 -->
<el-card shadow="never" class="filter-section">
<el-form :inline="true" :model="filters" class="search-form">
<el-form-item>
<el-select v-model="filters.type" placeholder="消息类型" clearable @change="loadMessages"
style="width: 150px;">
<el-option label="全部类型" value=""></el-option>
<el-option label="系统公告" value="1"></el-option>
<el-option label="消息通知" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="pageForm.isRead == 0">
<el-button size="medium" type="primary" @click="markAllAsRead" :loading="loading">
<i class="el-icon-check"></i> 全部标记已读
</el-button>
</el-form-item>
</el-form>
</el-card>
<!-- 消息列表区域 -->
<el-card shadow="never" class="message-section">
<div slot="header" class="message-header">
<el-tabs v-model="pageForm.isRead" @tab-click="handleTabClick">
<el-tab-pane label="全部消息" name="-1">
<span slot="label">
<i class="el-icon-message"></i>
全部消息
</span>
</el-tab-pane>
<el-tab-pane label="未读消息" name="0">
<span slot="label">
<i class="el-icon-bell"></i>
未读消息
</span>
</el-tab-pane>
<el-tab-pane label="已读消息" name="1">
<span slot="label">
<i class="el-icon-finished"></i>
已读消息
</span>
</el-tab-pane>
</el-tabs>
</div>
<!-- 表格展示 -->
<el-table v-loading="loading" :data="messages" style="width: 100%" :key="currentTab"
empty-text="暂无消息"
:header-cell-style="{backgroundColor: '#f5f7fa'}">
<el-table-column prop="type" label="消息类型" width="120">
<template slot-scope="scope">
<el-tag size="mini" :type="scope.row.type === 1 ? 'danger' : 'primary'">
{{getMessageTypeName(scope.row.type)}}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip>
<template slot-scope="scope">
<span class="message-title">{{scope.row.title}}</span>
</template>
</el-table-column>
<el-table-column prop="content" label="内容预览" min-width="250" show-overflow-tooltip>
<template slot-scope="scope">
{{getContentPreview(scope.row.content)}}
</template>
</el-table-column>
<el-table-column prop="createdAt" label="接收时间" width="180">
<template slot-scope="scope">
{{formatTime(scope.row.createdAt)}}
</template>
</el-table-column>
<el-table-column prop="isRead" label="状态" width="100">
<template slot-scope="scope">
<el-tag size="mini" :type="scope.row.isRead ? 'success' : 'warning'">
{{scope.row.isRead ? '已读' : '未读'}}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="100" fixed="right">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="viewMessage(scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination-container" v-if="messages.length > 0">
<el-pagination
background
@current-change="handlePageChange"
:current-page="pageForm.pageNumber"
:page-size="pageForm.pageSize"
layout="prev, pager, next, jumper"
:total="pageForm.totalCount"
></el-pagination>
</div>
</el-card>
</div>
<!-- 消息详情弹窗 -->
<el-dialog
:visible.sync="detailVisible"
:title="currentMessage?.globalMessage?.title"
width="60%"
class="message-detail-dialog"
>
<div v-if="currentMessage.id">
<div style="text-align: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #eee;">
<div style="font-size: 18px; font-weight: 500; margin-bottom: 8px;">{{currentMessage.title}}</div>
<div style="font-size: 14px; color: #666;">
<span>{{getMessageTypeName(currentMessage?.globalMessage?.type)}}</span>
<span style="margin: 0 8px;">•</span>
<span>{{formatTime(currentMessage.createdAt)}}</span>
</div>
</div>
<div style="line-height: 1.8; font-size: 15px;" v-html="currentMessage?.globalMessage?.content"></div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="detailVisible = false">关闭</el-button>
</span>
</el-dialog>
</div>
<script nonce="${cspNonce!}">
new Vue({
el: '#app',
data() {
return {
currentTab: 'all',
loading: false,
messages: [],
stats: {
total: 0,
unread: 0,
read: 0
},
filters: {
type: ''
},
pageForm: {
pageNumber: 1,
pageSize: 10,
totalCount: 0
},
detailVisible: false,
currentMessage: {}
}
},
methods: {
async loadStats() {
try {
const resp = await this.$axios.get('/platform/v4/msg/stats')
if (resp.code === 0) {
this.stats = resp.data
}
} catch (error) {
console.error('加载统计数据失败:', error)
}
},
async loadMessages() {
this.loading = true
try {
const resp = await this.$axios.post('/platform/v4/msg/pageData', this.pageForm)
if (resp.code === 0) {
this.messages = resp.data.list
this.pageForm.totalCount = resp.data.totalCount
} else {
this.$message.error(resp.msg)
}
} catch (error) {
this.$message.error('加载消息失败')
} finally {
this.loading = false
}
},
async viewMessage(message) {
this.$axios.post(`/platform/v4/msg/detail/` + message.id).then(async res => {
if (res.code === 0) {
this.currentMessage = res.data
this.detailVisible = true
// 如果是未读消息，标记为已读
if (!message.isRead) {
await this.markAsRead(message.id)
this.loadStats()
this.loadMessages()
}
}
})
},
async markAsRead(messageId) {
try {
await this.$axios.post(`/platform/v4/msg/read/` + messageId)
} catch (error) {
console.error('标记已读失败:', error)
}
},
async markAllAsRead() {
this.$confirm('确定要将所有未读消息标记为已读吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
this.loading = true
try {
const resp = await this.$axios.post('/platform/v4/msg/read/all')
if (resp.code === 0) {
this.$message.success('操作成功')
this.loadMessages()
this.loadStats()
} else {
this.$message.error(resp.msg)
}
} catch (error) {
this.$message.error('操作失败')
} finally {
this.loading = false
}
})
},
handleTabClick(tab) {
this.pageForm.pageNumber = 1
this.loadMessages()
},
handlePageChange(pageNumber) {
this.pageForm.pageNumber = pageNumber
this.loadMessages()
},
getMessageTypeName(type) {
return type === 1 ? '系统公告' : '消息通知'
},
getContentPreview(content) {
if (!content) return ''
// 移除HTML标签
const text = content.replace(/<[^>]*>/g, '')
return text.length > 50 ? text.substring(0, 50) + '...' : text
},
formatTime(timestamp) {
return this.$moment(timestamp).format('YYYY-MM-DD HH:mm')
}
},
created() {
this.loadStats()
this.loadMessages()
}
})
</script>
<!--#
}
#-->
target/classes/views/layouts/v4/personCenter.html
+139
View File
@@ -0,0 +1,139 @@
<!--#
layout("/layouts/v4/baseLayout.html"){
#-->
<style>
#v4-person-center {
padding-top: 10px;
background: url(/assets/platform/img/v4/home-bg.png);
background-size: cover;
min-height: calc(100vh - 64px);
}
.v-person-center-container {
width: 1500px;
margin: 0 auto;
}
.v4-person-basic-info {
height: 250px;
background: url("/assets/platform/img/v4/person-center/img1.png");
background-size: cover;
padding: 20px 50px 30px;
display: flex;
}
.v4-person-basic-info .info_img {
width: 72px;
height: 100px;
margin-right: 40px;
flex-shrink: 0;
position: relative;
top: 25px;
}
.v4-person-basic-info .info_img img {
width: 100%;
height: 100%;
}
.v4-person-basic-info .info_grid {
flex: 1;
display: grid;
/*三行三列*/
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.v4-person-basic-info .info_grid .info-item {
display: flex;
align-items: center;
padding: 8px 12px;
transition: all 0.3s ease;
}
.v4-person-basic-info .info_grid .info-label {
font-weight: 600;
color: #333;
min-width: 80px;
font-size: 14px;
}
.v4-person-basic-info .info_grid .info-value {
color: #666;
font-size: 14px;
flex: 1;
}
</style>
<div id="v4-person-center">
<div class="v-person-center-container">
<!--个人基本信息-->
<div class="v4-person-basic-info">
<div class="info_img">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAADICAYAAAAHm2giAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAA1TSURBVHgB7Z3bchtZFYa3zifLY9mJM/EkEJJMgEkxVFFUDZe545oHoCpvMjwCbwAXvMXcwBVFFUPBVIWZhEnI0Tk4siW1pNZZ7L+tNrYi2XJvdffa8v+lFCtxnNLh01prr71778R4PL7hDvt/eNVx7nWGQ0XIWeRTKXW7tPlHffd3af3bl3968eBefdBVhCzKldya+u31u79Pf9/avw95fnPjJ2otnVWEnMYbt6m+evVEvek07+k//jPppy3KQxZhypNaUhFiAAUiRlAgYgQFIkZQIGIEBSJGUCBiBAUiRlAgYgQFIkZQIGIEBSJGUCBiBAUiRlAgYgQFIkZQIGIEBSJGUCBiBAUiRlAgYgQFIkZQIGIEBSJGUCBiBAUiRlAgYgQFIkZQIGIEBSJGUCBiBAUiRlAgYgQFIkZQIGIEBSJGUCBiBAUiRlAgYkRaETUYj9RgNFLucKBvfe/v3MHg6PuFdFqlEymVSSZVWt/K3FP7iAspkDPoqf2Oq5r42nNV55gsi1LO5FRei7WdK6pyNndhpbowAh30Omq37ah3bsuLOKY4/a5329P/Hyik0qqSK6idYllVsnl1UVhpgYbjsXrbbnrStAd91Rr1VVh46U8LCkkh081yxRMK91eZlXx2veHQeyOrOk355PQbmUgo1dJv9Fj/ChPI9KC2591HRIJMqyrSSj0rRJwXzfoJcY6TTaZVMpH0aqCwJfLZnUQlSASZVk2klXk2SFWv9Q0SnUZaC1TSb2JzGF46m8UT50A/vv+LtCpYLxDS1VOnpgva3sI/g0hU0p6FWRPNwk9tKOhXJa1Z/Qzed9rqZbNxZtSZBWqioU5jndH5h/CmIKUddF312cZltakLbZuxthONWueZUw8kj08xlVG5ZErFAaLR19XX6rFObTZjnUAQ5mmjpofmbbUMSqmsVxfFBWojmyWySiDI87BWVdWuq5ZJSUeipEqouIBEDw7eKRuxRiBfHnew/MI35Y3MMipOdt2mlRJZI1BY8vhkdC0UVz3kA4keNqrKJqwQCAVzmPL4oB5KJeJLZeC5fq421UTiBdptOUsrmBcBEsUNaqJ3nZayAdECuf2+112OEozI8sn422NoOGKoLx2xAqFo/j6mUF7AnJmKN5VhgZsNRbVYgVD3YJoiDhK6DioIiEKY8njWqivJiBQIa3fmzahHBaY64mww+qAekpzKRAr0uCFjFCIhCklPZeIEquoJ0rhS1zToDUmIQkhl+914I/I8xAm0G/Go6ywkRCHwRGhvSJRAkqKPD6PQ6YgS6K0rs3mWS8Q7xeHzvN1Q0hAjEEZe7kDmaCOro1Ai5r4QwCK0ZVyStEzECPROaPQB6AvFPdEKMCJ71XaUJMQIdJ41zXGQEVAHgT1hHzQRrwrkkVY8TyOpmJaUxkQIVBPa45hGgkBAUroX8YpILZ6nkTBLDxCFpCAmhdlAUhfTyYSM0ZgUYhfIFnl8sgLSGCZXpdRBsb8abcsEklIHNXpdJYHYX43eSPboa5qMkK50R8gSDwp0ThJC6iApa4RiF2g4imablWWSETD2YASaIG1uZxFSAuqgvpDIzQgUgGT8GcybF5MA94kOQFpIIS0BChQAFNESlndIgAIFRMBATAQUKCBxX3iIHfMlEPujyKXsrCdSMQuUEbDADcQuUFbIC2EbeSEbdMb+KLIRR6DNTF5tZQqqPeyrV93glxChkEZD8VZxw/sQvHAb6mAQ3fwUzuqQQOwCRZnCbus3+05p8+jP13pl9bf6axUELHH99aUfqbXJISufl7fV32uv1XftfRUFaSFVfOwpbC2iTxIuEDwuD9jKFryIFITrhfUjeXw+X99WUbGelRGBRBTRUewKNm9T72Iy2N6IlfSH4iGVRbFeCB86KctKRDyKQjr8DS7dORuKBz3na97P9SKY29vMyTlOSoRAGxGE43mr+K7ly+f+NCMdIv1Nc9CPZq1yJStnd3sZAkW03X+9/+EoCcdYflbaUosC2b7Y2Jn5vagEYgSaAnVQFP2g/7Rn73BxrVBWv1i/cuZOHPj+Fx9dVcU59dQ3Tvj7+FzOF8XUP0DMYStb+ULoG2ru6whR7bkz08/HuZJa13XNfq+jXnadEyv+UO98nC15os3jSbsWyRFSl/MlJQkxAl0plCLZkfXbVlX9KrMz81OMw1eKhcyposyipcWJIvqg+/yJsLPGxMTClK5F1jLh79HcGPTUg+Z7tSz6ujD/y/7zSKKPpOLZR9Rs/E5xTUXBq05TfV1/Y7wwHZHnq/f/9VJjFNwqV5Q0RB04h/PXEYWaEVwr9rbXVo36rvq0WPGG8uflu2bVS1u9iNZ0X9VptZCWdz6guEeEKPSoHs18EiLQN86eF5E+ya95hfRpIxz0kV64jnrZcdSzTrT7N0uMPkCcQFFGIZ9q3/VukAkz9RiNHRcJXWzUTo3JbHvUl9TcXNsQGX2AyEd1o/yR+vbgvdFxlkHxZTqNwTi6S2ow8vqhFkgqIpe0Ypf4qxEV1EEYqujExunOUpavzkLsI7uiBYpiWH9exjoqRhUZf1BaF9f3mUb0onqksrgPgJumH1H6Quq6Vd5U0hEtEFLZrXVZo49+BMN2FPC/3NoRnbp8xD9CjMquleSE8SgEulu5LHbUNY0V14WhHpJQVI+0PKOQ658765tqW9iE6WlYc2Hhjo5CcUvUC3lDA/R7JA/ZZ2HVlalxS9Qdh9dAhDy31uUXzdPYkWiPsTOph6I+jBfpK4zhOwrmH69vHT0v27BOIIAXu6iLzKdOPbKezLxF+SZgqP7zyhUxl+gEwdrNFbCO+qeVS5FdGr3s0Vclm/eG6jbLA6yMQD7oE/1sa1vttpxQU1pXR59ljb6Qsm6W7SuW52G1QD5IaVhT/ai2H8qur8tKX4g6dze2renxLMLKPBM/Gr132140WpZI/ZF57wfiYFJ0MydvSaopq/NRmHCpUPRuyxLJHQVf67zK4visnEA+vkhOr6ved9xAB9Yi+px3G2LUODt6Bh3Xb62yOD4rK5AP5tJwuz5eV7VOR9V6HW+14yLD/9ZosVWRkAbTD2hyrmPjAwsmQZfFygvkgzfZj0oAh7zgpKCujjKud+Bv/4RU80Ze6N3gQkNsCIH1SpvZwkoVxeflwj7zon7zizMWrHUn652x4B4CQTx/P8KLLMo8+IpMkZtc954TsgehdLjNLzGCAhEjKBAxIvZE35Vy4JwumG07N0jCXtGRPAIMj2vdjmrroXJvOPSGzIOQ1tcEAWt9GsNe6MtVwwCjRLQU8unD9gL2j8YOZlFtQhWaQOixoAu8r7vAYqLMHLDLho3yAHwQnX7Xu+2p1tHfV3QX/HKuqLYLpbk71C6Dpf7PiChVt6W7vV1rjvPGjvX9sX2nJp4FzpbH7VGj6sm0U1jzpliWzVIEgjhv9cTlOy2PlLS0CJCnM5Jx9miY+DI9cQ68yd1limQsEMTBrLdN4gB0nC+CPMdBd/1BbW+pIgUWCMXwU6dmTao6DuqG1ij8Lemk4ot0oCeWIZJJjRToJ22NOsArOof2SR8Gu23HS213PtoKfDHjucd6L5p19bLlWC3P2NIRVxggGv1r/6167BwE+vmFIxCEeVzftzJlAdQ8FzltnQXqInzAcI3aeVgoAkGeh7WqtfJgtEV5zua5zi4PDs633/WZEciXB91jG2nrlNUR3siUxK57eHnU3cpiZ5+dGYGeNg6slAfTE86gS3kCAIke6gbkIpwqEC7YQ1fZNgaTua1V7DBHBdLZs9bZWxnPFajaaUe+gcEyQMrCdry2zm1J4lG9eubVLDMFQpNw1zJ5EHXqgw5T1pL5t244nnZp00yB0OuBRDaAno4fdWzsTUkHfaLTekQfCITUZUvdgx3ja0MWymGDemheKvtAIBtS12Aywmrr3g67ytHwZE4UOtEHQvSRnLogjrui63ekg4lXRKHp/ZhORCCJ0QcRBssuarpARp1DeeJjVhQ6ikDSog+iTU+L09VfmaZk4EWh3sla6JhA59+9YtlQGvns6UBzHE+gvh7F7HXb3kr+KI+URrOvNx6q4UiLoyiNDbxxD9eBJdXhGSaeQI1+15ux9sloiXDISXIiFP5x0uDQE4iBygXnbA0nl/MM1JjCWAg+9F3tSiF1uDGFJ1BzcHKZBgrVvvfenqyJIFFqYp5v4CzG3m3snavl3acoKwWW9RwJhIjQXnC2feRFEspw0XF0wPEXeyS7lkxZEDmgZu5Puv/JHvsqJADtyYUJ3J2DBKI/PAw8FIgEwt98nQKRQAzHjEDEgKMiWhESAEYgshQoEDGCAhEjKBAxggIRIygQMYICESMoEDGCAhEjKBAxggIRIygQMYICESMoEDGCAhEjKBAxggIRIygQMYICESMoEDGCAhEjKBAxggIRIygQMYICESMoEDGCAhEjKBAxggIRIygQMYICESMoEDGCAhEjKBAxggIRIygQMSJZSh0eGYYDbAk5i8Fkd9bRWLX0l4307bWtP29lC/f++u6FImRRNjPFff2llhiPxzf0nS//UXtzv80oRBagqLPWpzrwlNOZ+/8D/6fmMqwYxpEAAAAASUVORK5CYII=">
</div>
<div class="info_grid">
<div class="info-item">
<span class="info-label">姓名：</span>
<span class="info-value">${@auth.getPrincipalProperty('username')}</span>
</div>
<div class="info-item">
<span class="info-label">籍贯：</span>
<span class="info-value">${@auth.getPrincipalProperty('nativePlace')}</span>
</div>
<div class="info-item">
<span class="info-label">出生日期：</span>
<span class="info-value">${@auth.getPrincipalProperty('birthday')}</span>
</div>
<div class="info-item">
<span class="info-label">性别：</span>
<span class="info-value">${@auth.getPrincipalProperty('sex')}</span>
</div>
<div class="info-item">
<span class="info-label">年龄：</span>
<span class="info-value">46</span>
</div>
<div class="info-item">
<span class="info-label">政治面貌：</span>
<span class="info-value">${@auth.getPrincipalProperty('political')}</span>
</div>
<div class="info-item">
<span class="info-label">民族：</span>
<span class="info-value">${@auth.getPrincipalProperty('nation')}</span>
</div>
<div class="info-item">
<span class="info-label">身份证：</span>
<span class="info-value">${@auth.getPrincipalProperty('idCard')}</span>
</div>
<div class="info-item">
<span class="info-label">电话：</span>
<span class="info-value">${@auth.getPrincipalProperty('mobile')}</span>
</div>
</div>
</div>
</div>
</div>
<script nonce="${cspNonce!}">
new Vue({
el: "#v4-person-center",
data() {
return {
}
},
mounted() {
},
methods: {
}
})
</script>
<!--#
}
#-->
target/classes/views/layouts/v4/platform.html
+310
View File
@@ -0,0 +1,310 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
<link rel="stylesheet" href="${base!}/assets/platform/fonts/themify-icons.css" />
<link rel="stylesheet" href="${base!}/assets/platform/fonts/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.net/element-ui/2.15.14/theme-chalk/index.css" />
<link rel="stylesheet" href="https://cdn.staticfile.net/element-ui/2.15.14/theme-chalk/fonts/element-icons.woff" />
<!-- import Vue before Element -->
<script src="${base!}/assets/platform/plugins/vue/vue.js"></script>
<script src="${base!}/assets/platform/plugins/vuex/vuex.js"></script>
<script src="${base!}/assets/platform/plugins/vuex-persistedstate/vuex-persistedstate.umd.js"></script>
<script src="${base!}/assets/platform/plugins/vue-http-loader/httpVueLoader.js"></script>
<!-- import ElementUI -->
<script src="${base!}/assets/platform/plugins/element-ui/lib/index.js"></script>
<script src="${base!}/assets/platform/plugins/element-ui/lib/i18n/${lang,escape}.js"></script>
<!-- import Jquery -->
<script src="${base!}/assets/platform/plugins/jquery/jquery.js"></script>
<!-- pjax是异步加载html片段的工具,模拟前端路由机制 -->
<script src="${base!}/assets/platform/plugins/pjax/jquery.pjax.js"></script>
<style>
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background-color: #f5f7fa;
color: #333;
}
.v4-header {
background-color: rgb(0, 109, 185);
box-shadow: 0 2px 10px rgba(0, 109, 185, 0.3);
padding: 0 24px;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 100;
}
.v4-logo-container {
display: flex;
align-items: center;
margin-right: 40px;
height: 100%;
}
.v4-logo {
height: 100%;
width: auto;
margin-right: 16px;
}
.v4-nav {
display: flex;
gap: 40px;
align-items: center;
height: 100%;
}
.v4-nav-item {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
font-size: 15px;
font-weight: 500;
position: relative;
padding: 0 16px;
height: 100%;
display: flex;
align-items: center;
transition: all 0.2s ease;
column-gap: 10px;
}
.v4-nav-item:hover,
.v4-nav-item.active {
color: #ffffff;
background-color: rgba(255, 255, 255, 0.1) !important;
}
.v4-nav-item.active::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #ffffff;
}
.v4-user-section {
display: flex;
align-items: center;
gap: 24px;
height: 100%;
}
.v4-notification {
position: relative;
cursor: pointer;
width: 40px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0;
transition: background-color 0.2s;
}
.v4-notification:hover {
background-color: rgba(255, 255, 255, 0.15);
}
.v4-notification i {
font-size: 18px;
color: rgba(255, 255, 255, 0.85);
}
.v4-notification:hover i {
color: #ffffff;
}
.v4-badge {
position: absolute;
top: 0;
right: 0;
background-color: #ffffff;
color: rgb(0, 109, 185);
border-radius: 10px;
padding: 0 6px;
font-size: 12px;
min-width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
font-weight: bold;
}
.v4-user-info {
display: flex;
align-items: center;
gap: 12px;
padding: 0 12px;
height: 100%;
border-radius: 0;
cursor: pointer;
transition: background-color 0.2s;
}
.v4-user-info:hover {
background-color: rgba(255, 255, 255, 0.15);
}
.v4-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
color: rgb(0, 109, 185);
font-weight: 500;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.v4-user-name {
font-weight: 500;
color: #ffffff;
}
.v4-logout {
color: rgba(255, 255, 255, 0.85);
cursor: pointer;
padding: 0 14px;
height: 100%;
border-radius: 0;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 6px;
}
.v4-logout:hover {
background-color: rgba(255, 255, 255, 0.15);
color: #ffffff;
}
.v4-content {
/* padding: 24px; */
margin: 0 auto;
}
.v4-left-section {
display: flex;
align-items: center;
height: 100%;
}
@media (max-width: 1024px) {
.v4-header {
padding: 0 16px;
}
.v4-nav {
gap: 24px;
}
.v4-user-section {
gap: 16px;
}
}
@media (max-width: 768px) {
.v4-nav {
display: none;
}
.v4-user-name {
display: none;
}
}
</style>
</head>
<body>
<header class="v4-header">
<div class="v4-left-section">
<div class="v4-logo-container">
<img src="https://i.cug.edu.cn/data/sys-attach/download/1i843ts1nwl3w2n5iw31ohn2n10cripk3gw0" alt="Logo" class="v4-logo" />
</div>
<nav class="v4-nav">
<a href="/platform/v4/home" data-pjax class="v4-nav-item">
<i class="fa fa-home"></i>
首页
</a>
<a href="/platform/v4/apps" data-pjax class="v4-nav-item">
<i class="fa fa-th-large"></i>
应用中心
</a>
<a href="/platform/v4/apps" data-pjax class="v4-nav-item">
<i class="fa fa-comments"></i>
咨询中心
</a>
</nav>
</div>
<div class="v4-user-section">
<div class="v4-user-info">
<div class="v4-avatar">
<i class="fa fa-user"></i>
</div>
<span class="v4-user-name">用户名</span>
<i class="fa fa-angle-down"></i>
</div>
<div class="v4-logout">
<i class="fa fa-sign-out"></i>
退出
</div>
</div>
</header>
<main class="v4-content">
<!-- 页面内容区域 -->
<div class="ele-body" id="container">${layoutContent}</div>
</main>
<script nonce="${cspNonce!}">
// 处理导航项的active状态
$(document).ready(function() {
// 初始化：根据当前URL设置active状态
function setActiveNavItem() {
var currentPath = getBaseSubAppPath();
$('.v4-nav-item').removeClass('active');
$('.v4-nav-item').each(function() {
if ($(this).attr('href') === currentPath) {
$(this).addClass('active');
}
});
}
// 页面加载时设置active状态
setActiveNavItem();
// 使用pjax的事件来处理导航切换
$(document).on('pjax:complete', function() {
setActiveNavItem();
});
// 为导航项添加点击事件
$('.v4-nav-item').on('click', function() {
$('.v4-nav-item').removeClass('active');
$(this).addClass('active');
});
});
</script>
</body>
</html>
target/classes/views/layouts/v4/serv.html
+606
View File
@@ -0,0 +1,606 @@
<!--#
layout("/layouts/v4/baseLayout.html"){
#-->
<style>
.apps-hero {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
/*border-radius: 8px 8px 0 0;*/
margin-bottom: 0;
}
.apps-hero img {
width: 100%;
height: 100%;
}
.apps-container {
display: flex;
/*height: calc(100vh - 64px - 48px - 180px);*/
background-color: #fff;
/*border-radius: 0 0 8px 8px;*/
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
flex: 1;
}
.apps-sidebar {
width: 220px;
background-color: #f7f7f7;
border-right: 1px solid #e8e8e8;
overflow-y: auto;
}
.apps-sidebar-item {
padding: 16px 20px;
cursor: pointer;
transition: all 0.3s;
font-size: 16px;
display: flex;
align-items: center;
gap: 10px;
}
.apps-sidebar-item.active {
background-color: #e6f7ff;
color: var(--color-primary);
border-right: 2px solid #1890ff;
}
.apps-sidebar-item:hover:not(.active) {
background-color: #f0f0f0;
}
.apps-content {
flex: 1;
padding: 20px;
overflow: auto;
display: flex;
flex-direction: column;
}
.apps-header {
padding: 0 0 10px 0;
border-bottom: 1px solid #eee;
margin-bottom: 10px;
}
.apps-search-container {
display: flex;
align-items: center;
/*margin-bottom: 20px;*/
}
.apps-search {
position: relative;
width: 400px;
}
.apps-search input {
width: 100%;
height: 36px;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 0 15px;
font-size: 14px;
box-sizing: border-box;
}
.apps-search .search-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: #999;
cursor: pointer;
}
.apps-filter {
margin-top: 10px;
display: flex;
align-items: flex-end;
}
.apps-filter-title {
color: #666;
font-size: 14px;
margin-bottom: 5px;
margin-right: 5px;
}
.apps-filter-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.filter-tag {
padding: 5px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
}
.filter-tag.active {
background-color: var(--color-primary);
color: #fff;
}
.filter-tag:not(.active) {
background-color: #f0f0f0;
color: #333;
}
.filter-tag:not(.active):hover {
background-color: #e0e0e0;
}
.apps-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
flex: 1;
overflow-y: auto;
grid-auto-rows: min-content;
padding: 5px 0;
}
.app-card {
border: 1px solid #e8e8e8;
border-radius: 8px;
overflow: hidden;
transition: all 0.3s;
display: flex;
align-items: center;
padding: 15px;
position: relative;
}
.app-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
cursor: pointer;
}
.app-icon {
width: 48px;
height: 48px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
color: #fff;
font-size: 24px;
}
.app-icon img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.app-icon i {
color: var(--color-primary);
font-size: 38px;
}
.favorite-icon {
position: absolute;
bottom: 10px;
right: 10px;
cursor: pointer;
transition: all 0.3s;
font-size: 18px;
color: #c0c4cc;
}
.favorite-icon.active {
color: #ff9800;
}
.favorite-icon:hover {
transform: scale(1.2);
}
.app-info {
flex: 1;
}
.app-title {
font-weight: 500;
margin-bottom: 5px;
font-size: 14px;
}
.app-desc {
color: #999;
font-size: 12px;
}
.alphabet-filter {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.alphabet-item {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s;
font-size: 14px;
}
.alphabet-item.active {
background-color: var(--color-primary);
color: #fff;
}
.alphabet-item:not(.active) {
background-color: #f0f0f0;
}
.alphabet-item:hover:not(.active) {
background-color: #e0e0e0;
}
.app-status {
position: absolute;
top: 0;
right: 0;
background-color: #ff9800;
color: #fff;
padding: 2px 10px;
font-size: 12px;
border-bottom-left-radius: 8px;
}
.apps-wrapper {
/*margin: 0 auto;*/
/*margin: 24px;*/
/*padding: 24px;*/
display: flex;
flex-direction: column;
height: calc(100vh - 64px);
}
.no-results {
display: flex;
justify-content: center;
align-items: center;
min-height: 300px;
padding: 40px 20px;
}
.no-results-content {
text-align: center;
max-width: 300px;
}
.no-results i {
color: #c0c4cc;
margin-bottom: 16px;
}
.no-results .title {
font-size: 16px;
color: #606266;
font-weight: 500;
margin-bottom: 8px;
}
.no-results .hint {
font-size: 14px;
color: #909399;
line-height: 1.5;
}
.page-item.disabled {
color: #c0c4cc;
cursor: not-allowed;
}
.page-item.disabled:hover {
border-color: #d9d9d9;
color: #c0c4cc;
}
.loading-container {
text-align: center;
padding: 40px 0;
color: #909399;
font-size: 14px;
}
</style>
<div class="apps-wrapper" id="app">
<div class="apps-hero">
<img src="/assets/platform/img/v4/lczx.png" alt="流程中心"/>
</div>
<div class="apps-container">
<!-- Left Sidebar -->
<div class="apps-sidebar">
<div
v-for="category in allCategories"
:key="category.id"
:class="['apps-sidebar-item', activeCategory === category.id ? 'active' : '']"
@click="changeCategory(category.id)"
>
<img v-if="category.picIcon" :src="category.picIcon" :alt="category.name || ''" style="width: 20px"/>
<i v-else :class="category.icon || 'fa fa-th-large'"></i>
{{ category.name }}
</div>
</div>
<!-- Main Content -->
<div class="apps-content">
<div class="apps-header">
<div class="apps-search-container">
<div class="apps-search">
<input type="text" v-model="searchKeyword" @keyup.enter="search" placeholder="请输入内容"/>
<i class="el-icon-search search-icon" @click="search"></i>
</div>
</div>
<!-- 字母过滤 -->
<div class="apps-filter">
<div class="apps-filter-title">首字母:</div>
<div class="apps-filter-tags alphabet-filter">
<div :class="['filter-tag', activeAlphabet === '' ? 'active' : '']" @click="changeAlphabet('')">
全部
</div>
<div
v-for="letter in alphabets"
:key="letter"
:class="['alphabet-item', activeAlphabet === letter ? 'active' : '']"
@click="changeAlphabet(letter)"
>
{{ letter }}
</div>
</div>
</div>
</div>
<!-- 应用网格 -->
<div class="apps-grid" v-if="applications.length > 0">
<div v-for="app in applications" :key="app.id" class="app-card" @click.stop="openApp(app)">
<div :class="['app-icon', app.iconType]">
<img v-if="app.picIcon" :src="app.picIcon" :alt="app.name || ''" />
<i v-else class="fa fa-skype"></i>
</div>
<div class="app-info">
<div class="app-title">{{ app.displayName }}</div>
</div>
</div>
</div>
<!-- 加载状态 -->
<div class="loading-container" v-if="loading">
<i class="el-icon-loading"></i>
<p>加载中...</p>
</div>
<!-- 无搜索结果 -->
<div class="no-results" v-else-if="applications.length === 0">
<div class="no-results-content">
<i class="el-icon-document" style="font-size: 48px"></i>
<p class="title">没有找到匹配的服务</p>
<p class="hint">请尝试不同的搜索词或筛选条件</p>
</div>
</div>
</div>
</div>
</div>
<script nonce="${cspNonce!}">
new Vue({
el: "#app",
data: {
// 应用列表
applications: [],
// 分类列表
categories: [{id: "all", name: "全部服务", icon: "fa fa-th-large"}],
// 动态加载的分类
dynamicCategories: [],
// 当前选中的分类
activeCategory: "all",
// 字母表筛选
alphabets: [
"A",
"B",
"C",
"D",
"E",
"F",
"G",
"H",
"I",
"J",
"K",
"L",
"M",
"N",
"O",
"P",
"Q",
"R",
"S",
"T",
"U",
"V",
"W",
"X",
"Y",
"Z"
],
activeAlphabet: "",
// 搜索关键词
searchKeyword: "",
// 分页相关
currentPage: 1,
pageSize: 15,
totalPage: 1,
total: 0,
// 加载状态
loading: true
},
computed: {
// 所有分类（固定分类 + 动态分类）
allCategories() {
return [...this.categories, ...this.dynamicCategories]
}
},
mounted() {
// 页面加载时获取分类和应用数据
this.loadCategories()
this.loadApps()
},
methods: {
// 加载分类数据
loadCategories() {
$.get("/platform/v4/serv/categories")
.then((result) => {
if (result.code === 0) {
this.dynamicCategories = result.data || []
} else {
console.error("获取应用分类失败:", result.msg)
}
})
.fail((error) => {
console.error("获取应用分类异常:", error)
})
},
// 加载应用数据
loadApps() {
this.loading = true
// 构建请求参数
const params = {
categoryId:
this.activeCategory === "all"
? ""
: this.activeCategory === "favorites" || this.activeCategory === "recommended"
? this.activeCategory
: this.activeCategory,
letter: this.activeAlphabet,
keyword: this.searchKeyword
}
// 将参数转换为URL查询参数
const queryString = Object.keys(params)
.filter((key) => params[key] !== null && params[key] !== undefined && params[key] !== "")
.map((key) => encodeURIComponent(key) + "=" + encodeURIComponent(params[key]))
.join("&")
// 如果是"我的收藏"分类
if (this.activeCategory === "favorites") {
this.loadFavorites()
return
}
// 发送请求获取普通应用列表
$.get("/platform/v4/serv/list?" + queryString)
.then((result) => {
if (result.code === 0) {
this.applications = result.data || []
} else {
console.error("获取应用列表失败:", result.msg)
}
this.loading = false
})
.fail((error) => {
console.error("获取应用列表异常:", error)
this.loading = false
})
},
// 加载收藏的应用
loadFavorites() {
$.get("/platform/v4/serv/favorite", {platform: 'PC'})
.then((result) => {
if (result.code === 0) {
this.applications = result.data || []
} else {
console.error("获取收藏应用失败:", result.msg)
}
})
.fail((error) => {
console.error("获取收藏应用异常:", error)
})
},
// 切换应用收藏状态
toggleFavorite(appId) {
const app = this.applications.find((a) => a.id === appId)
if (!app) return
const url = app.isFavorite ? "/platform/v4/serv/removeFavorite" : "/platform/v4/serv/addFavorite"
const params = {appId: appId}
$.post(url, params)
.then((result) => {
if (result.code === 0) {
app.isFavorite = !app.isFavorite
this.$message.success(app.isFavorite ? "收藏成功" : "取消收藏成功")
} else {
console.error(app.isFavorite ? "取消收藏失败:" : "收藏失败:", result.msg)
}
})
.fail((error) => {
console.error(app.isFavorite ? "取消收藏异常:" : "收藏异常:", error)
})
},
// 切换应用分类
changeCategory(categoryId) {
this.activeCategory = categoryId
this.currentPage = 1
// 如果是"我的收藏"分类
if (categoryId === "favorites") {
this.loadFavorites()
} else {
this.loadApps()
}
},
// 切换应用字母
changeAlphabet(letter) {
this.activeAlphabet = letter
this.currentPage = 1
this.loadApps()
},
// 搜索
search() {
this.loadApps()
},
// 打开应用
openApp(app) {
console.log(app)
if (!app.instanceUrl) {
this.$message.warning("管理员未配置服务地址")
return
}
window.open(app.instanceUrl, "_blank")
}
}
})
</script>
<!--#
}
#-->
target/classes/views/layouts/v4/subApp.html
+430
View File
@@ -0,0 +1,430 @@
<!--#
layout("/layouts/v4/platform.html"){
#-->
<style>
.sub-app-container {
/*max-width: 80%;*/
margin: 0 auto;
background: #fff;
/*border-radius: 8px;*/
/*box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);*/
display: flex;
overflow: hidden;
min-height: calc(100vh - 64px);
box-sizing: border-box;
}
.sidebar-menu {
width: 250px;
background: rgb(64 109 157);
color: #fff;
flex-shrink: 0;
}
.menu-header {
padding: 20px;
background: rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.menu-title {
font-size: 18px;
font-weight: 600;
margin: 0;
}
.menu-list {
list-style: none;
padding: 0;
margin: 0;
}
.menu-item {
position: relative;
}
.menu-link {
padding: 12px 20px;
color: #fff;
text-decoration: none;
transition: all 0.3s ease;
border-left: 3px solid transparent;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
}
.menu-link > span {
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 显示省略号 */
flex: 1; /* 让文字部分占据剩余空间 */
}
.menu-link:hover {
background: rgba(255, 255, 255, 0.1);
border-left-color: #fff;
padding-left: 25px;
}
.menu-link.active {
background: rgba(255, 255, 255, 0.15);
border-left-color: #fff;
font-weight: 500;
}
.menu-icon {
margin-right: 10px;
vertical-align: middle;
opacity: 0.8;
}
.submenu {
list-style: none;
padding: 0;
background: rgba(0, 0, 0, 0.1);
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.submenu.active {
max-height: 500px;
}
.submenu .menu-link {
padding-left: 50px;
font-size: 14px;
opacity: 0.9;
}
.submenu .menu-link:hover {
padding-left: 55px;
}
.submenu .submenu .menu-link {
padding-left: 70px;
}
.submenu .submenu .menu-link:hover {
padding-left: 75px;
}
.menu-toggle {
width: 20px;
height: 20px;
cursor: pointer;
transition: transform 0.3s ease;
margin-left: auto;
}
.menu-toggle.active {
transform: rotate(180deg);
}
.main-content {
flex: 1;
padding: 30px;
background: #fff;
}
.content-header {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
.content-title {
font-size: 24px;
font-weight: 600;
color: #2c3e50;
margin: 0;
}
.content-subtitle {
color: #7f8c8d;
margin-top: 5px;
font-size: 14px;
}
.content-body {
min-height: 400px;
}
/* 悬浮菜单按钮样式 */
.menu-toggle-btn {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgb(64 109 157);
color: white;
text-align: center;
line-height: 50px;
font-size: 24px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
z-index: 1000;
cursor: pointer;
transition: all 0.3s ease;
}
.menu-toggle-btn:hover {
background-color: rgb(54 99 147);
transform: scale(1.05);
}
.menu-toggle-btn.active {
background-color: #d9534f;
}
/* 菜单遮罩层样式 */
.menu-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 998;
}
@media (max-width: 768px) {
/*.sub-app-container {*/
/* !* flex-direction: column; *!*/
/*}*/
.sidebar-menu {
position: fixed;
top: 0;
left: -100%;
width: 80%;
height: 100vh;
z-index: 999;
transition: left 0.3s ease;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
overflow-y: auto;
}
.sidebar-menu.show {
left: 0;
}
.menu-toggle-btn {
display: block;
}
.menu-overlay.show {
display: block;
}
.main-content {
padding: 20px;
width: 100%;
}
}
</style>
<div class="sub-app-container" id="sub-app-container">
<!-- 菜单遮罩层 -->
<div class="menu-overlay" id="menu-overlay"></div>
<!-- 左侧菜单区域 -->
<nav class="sidebar-menu">
<div class="menu-header">
<h2 class="menu-title">福利管理系统</h2>
</div>
<!--# if(!isEmpty(menus)) { #-->
<ul class="menu-list">
<!--# for(menu in menus){ #-->
<li class="menu-item" data-id="${menu.id}">
<!--# if(!isEmpty(menu.children)) { #-->
<a href="${menu.href!}" class="menu-link">
<!--# if(!isEmpty(menu.icon)) { #-->
<i class="fa fa-file menu-icon"></i>
<!--# } else {#-->
<i class="fa fa-file menu-icon"></i>
<!--# } #-->
<span>${menu.name}</span>
<i class="menu-toggle fa fa-chevron-down"></i>
</a>
<ul class="submenu">
<!--# for(child in menu.children){ #-->
<li class="menu-item" data-id="${child.id}">
<a href="${child.href!}" data-pjax class="menu-link">
<!--# if(!isEmpty(child.icon)) { #-->
<i class="fa fa-file menu-icon"></i>
<!--# } else {#-->
<i class="fa fa-file menu-icon"></i>
<!--# } #-->
<span>${child.name}</span>
</a>
</li>
<!--# } #-->
</ul>
<!--# } else { #-->
<a href="${menu.href!}" data-pjax class="menu-link">
<!--# if(!isEmpty(menu.icon)) { #-->
<i class="fa fa-file menu-icon"></i>
<!--# } else {#-->
<i class="fa fa-file menu-icon"></i>
<!--# } #-->
<span>${menu.name}</span>
</a>
<!--# } #-->
</li>
<!--# } #-->
</ul>
<!--# } #-->
</nav>
<!-- 悬浮菜单按钮 -->
<div class="menu-toggle-btn" id="menu-toggle-btn">
<i class="fa fa-bars"></i>
</div>
<!-- 右侧主体区域 -->
<main class="main-content">
<header class="content-header">
<h1 class="content-title">福利项目管理</h1>
<!-- <p class="content-subtitle"></p>-->
</header>
<div class="content-body" id="sub-app-container-main-content">${layoutContent!}</div>
</main>
</div>
<script nonce="${cspNonce!}">
document.addEventListener("DOMContentLoaded", function () {
const menuLinks = document.querySelectorAll(".menu-link")
const contentTitle = document.querySelector(".content-title")
const menuToggleBtn = document.getElementById("menu-toggle-btn")
const sidebarMenu = document.querySelector(".sidebar-menu")
const menuOverlay = document.getElementById("menu-overlay")
const isMobile = window.innerWidth <= 768
// 移动设备下点击菜单项后自动收起菜单
function toggleMobileMenu(show) {
if (show) {
sidebarMenu.classList.add("show")
menuOverlay.classList.add("show")
menuToggleBtn.classList.add("active")
menuToggleBtn.innerHTML = '<i class="fa fa-times"></i>'
} else {
sidebarMenu.classList.remove("show")
menuOverlay.classList.remove("show")
menuToggleBtn.classList.remove("active")
menuToggleBtn.innerHTML = '<i class="fa fa-bars"></i>'
}
}
// 初始化菜单按钮状态
if (window.innerWidth <= 768) {
menuToggleBtn.style.display = "block"
} else {
menuToggleBtn.style.display = "none"
}
menuLinks.forEach((link) => {
link.addEventListener("click", function (e) {
// 检查是否有 data-pjax 属性
const pjax = this.hasAttribute("data-pjax")
if (pjax) {
// 如果有 pjax 属性，不阻止默认行为，让 pjax 处理
// 但仍然处理菜单样式更新
// 在移动设备上，点击菜单项后自动收起菜单
if (window.innerWidth <= 768) {
toggleMobileMenu(false)
}
} else {
// 如果没有 pjax 属性，阻止默认跳转
e.preventDefault()
}
// 移除所有active状态
menuLinks.forEach((l) => l.classList.remove("active"))
if (!pjax) {
// 子目录
const submenu = this.nextElementSibling
// 子目录有没有展开
const isActive = submenu && submenu.classList.contains("active")
// 关闭所有子菜单
document.querySelectorAll(".submenu").forEach((sm) => {
sm.classList.remove("active")
})
document.querySelectorAll(".menu-toggle").forEach((mt) => {
mt.classList.remove("active")
})
// 切换当前子菜单状态
if (submenu && !isActive) {
submenu.classList.add("active")
const menuToggle = this.querySelector(".menu-toggle")
if (menuToggle) {
// 给 menu-toggle 增加 class
menuToggle.classList.add("active")
}
}
} else {
// 业务菜单
// 更新主内容区域标题
// const menuText = this.textContent.trim()
// contentTitle.textContent = menuText
}
// 添加当前点击的active状态
this.classList.add("active")
})
})
// 菜单切换按钮点击事件
menuToggleBtn.addEventListener("click", function() {
const isMenuShown = sidebarMenu.classList.contains("show")
toggleMobileMenu(!isMenuShown)
})
// 遮罩层点击事件，点击遮罩层关闭菜单
menuOverlay.addEventListener("click", function() {
toggleMobileMenu(false)
})
// 窗口大小变化时处理菜单状态
window.addEventListener("resize", function() {
if (window.innerWidth <= 768) {
menuToggleBtn.style.display = "block"
// 如果从大屏幕变为小屏幕，默认收起菜单
if (!isMobile) {
toggleMobileMenu(false)
}
} else {
menuToggleBtn.style.display = "none"
// 大屏幕下移除所有移动端相关类
sidebarMenu.classList.remove("show")
menuOverlay.classList.remove("show")
menuToggleBtn.classList.remove("active")
}
})
$(document).pjax("#sub-app-container .sidebar-menu a[data-pjax]", "#sub-app-container-main-content", {
maxCacheLength: 0,
push: true,
replace: false,
fragment: "#sub-app-container-main-content",
timeout: 8000
})
})
</script>
<!--#
}
#-->
target/classes/views/layouts/v4/todo.html
+445
View File
@@ -0,0 +1,445 @@
<!--#
layout("/layouts/v4/baseLayout.html"){
#-->
<style>
.task-todo-center {
padding: 20px;
}
/* 统计卡片样式 */
.statistics-section {
margin-bottom: 20px;
}
.stat-card {
border: none;
height: 100%;
}
.stat-card .el-card__body {
padding: 20px;
}
.stat-content {
display: flex;
align-items: center;
}
.stat-icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
font-size: 28px;
}
.todo-icon {
background-color: rgba(64, 158, 255, 0.1);
color: #409eff;
}
.done-icon {
background-color: rgba(103, 194, 58, 0.1);
color: #67c23a;
}
.started-icon {
background-color: rgba(230, 162, 60, 0.1);
color: #e6a23c;
}
.stat-info {
flex: 1;
}
.stat-value {
font-size: 28px;
font-weight: 600;
line-height: 1.2;
margin-bottom: 5px;
}
.stat-label {
font-size: 14px;
color: #909399;
}
/* 搜索区域样式 */
.filter-section {
margin-bottom: 20px;
}
.filter-section .el-card__body {
padding: 15px 20px;
}
.search-form {
display: flex;
flex-wrap: wrap;
}
.search-form .el-form-item {
margin-bottom: 0;
margin-right: 15px;
}
/* 任务列表区域样式 */
.task-section .el-card__header {
padding: 0;
border-bottom: none;
}
/* 优化后的 tabs 样式 */
.task-header .el-tabs__header {
margin: 0;
padding: 0 20px;
background-color: #fff;
}
.task-header .el-tabs__nav-wrap::after {
height: 1px;
background-color: #ebeef5;
}
.task-header .el-tabs__item {
height: 50px;
line-height: 50px;
font-size: 15px;
color: #606266;
padding: 0 20px;
transition: all 0.3s;
}
.task-header .el-tabs__item.is-active {
color: #409eff;
font-weight: 500;
}
.task-header .el-tabs__active-bar {
height: 3px;
border-radius: 3px;
}
.task-title {
font-weight: 500;
color: #303133;
}
/* 表格行样式 */
.el-table .hover-row {
background-color: #f5f7fa;
}
.pagination-container {
margin-top: 20px;
display: flex;
justify-content: center;
padding: 10px 0;
}
</style>
<div id="app" v-cloak>
<div class="task-todo-center">
<!-- 统计数据区域 -->
<el-row :gutter="20" class="statistics-section">
<el-col :span="8">
<el-card shadow="hover" class="stat-card">
<div class="stat-content">
<div class="stat-icon todo-icon">
<i class="el-icon-s-claim"></i>
</div>
<div class="stat-info">
<div class="stat-value">{{todoCount}}</div>
<div class="stat-label">待办任务</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="hover" class="stat-card">
<div class="stat-content">
<div class="stat-icon done-icon">
<i class="el-icon-finished"></i>
</div>
<div class="stat-info">
<div class="stat-value">{{doneCount}}</div>
<div class="stat-label">已办任务</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="hover" class="stat-card">
<div class="stat-content">
<div class="stat-icon started-icon">
<i class="el-icon-s-promotion"></i>
</div>
<div class="stat-info">
<div class="stat-value">{{startedCount}}</div>
<div class="stat-label">我发起的</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
<!-- 搜索筛选区域 -->
<el-card shadow="never" class="filter-section">
<el-form :inline="true" :model="pageForm" class="search-form">
<el-form-item>
<el-input v-model="pageForm.searchKeyword" placeholder="请输入关键词搜索"
prefix-icon="el-icon-search"
clearable></el-input>
</el-form-item>
<el-form-item>
<el-select v-model="pageForm.category" placeholder="所有流程分类" clearable>
<el-option v-for="type in categoryOptions" :key="type.id" :label="type.name"
:value="type.id"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">搜索</el-button>
<el-button @click="reset">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<!-- 任务列表区域 -->
<el-card shadow="never" class="task-section">
<div slot="header" class="task-header">
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
<el-tab-pane label="待办任务" name="todo"></el-tab-pane>
<el-tab-pane label="已办任务" name="done"></el-tab-pane>
<el-tab-pane label="我发起的" name="started"></el-tab-pane>
</el-tabs>
</div>
<!-- 表格展示 -->
<el-table v-loading="loading" :data="tasks" style="width: 100%" :key="activeTab"
:header-cell-style="{backgroundColor: '#f5f7fa'}">
<el-table-column prop="processInstanceName" label="流程名称" min-width="180" show-overflow-tooltip>
<template slot-scope="scope">
<span class="task-title">{{scope.row.variable?.instanceName}}</span>
</template>
</el-table-column>
<el-table-column prop="taskName" label="任务节点" min-width="150"
show-overflow-tooltip></el-table-column>
<el-table-column prop="categoryName" label="流程分类" min-width="150" show-overflow-tooltip></el-table-column>
<el-table-column prop="initiatorName" label="申请人" min-width="120">
<template slot-scope="{row}">{{row.variable.initiatorName}}</template>
</el-table-column>
<!-- <el-table-column label="时间" min-width="180">-->
<!-- <template slot-scope="scope">-->
<!-- <div v-if="activeTab === 'todo'">-->
<!-- <i class="el-icon-time"></i>-->
<!-- {{scope.row.createdAt}}-->
<!-- </div>-->
<!-- <div v-else-if="activeTab === 'done'">-->
<!-- <i class="el-icon-check"></i>-->
<!-- {{scope.row.finishTime}}-->
<!-- </div>-->
<!-- <div v-else-if="activeTab === 'started'">-->
<!-- <i class="el-icon-s-promotion"></i>-->
<!-- {{scope.row.createdAt}}-->
<!-- </div>-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column v-if="activeTab === 'started'" label="状态" width="100">
<template slot-scope="{row}">{{processStatusMap[row.state]?.text}}</template>
</el-table-column>
<el-table-column label="操作" width="100px" fixed="right">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="openView(scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
<!-- 空状态展示 -->
<el-empty v-if="tasks.length === 0" :description="getEmptyText()"></el-empty>
<!-- 分页 -->
<div class="pagination-container" v-if="tasks.length > 0">
<el-pagination
background
@current-change="handleCurrentChange"
:current-page="pageForm.pageNumber"
:page-size="pageForm.pageSize"
layout="prev, pager, next, jumper"
:total="pageForm.totalCount"
></el-pagination>
</div>
</el-card>
</div>
</div>
<script nonce="${cspNonce!}">
new Vue({
el: "#app",
data() {
return {
// 统计数据
todoCount: 0,
doneCount: 0,
startedCount: 0,
// 查询表单
pageForm: {
pageNumber: 1,
pageSize: 10,
todoCount: 0,
keyword: "",
category: ""
},
// 流程类型选项
categoryOptions: [],
// 任务列表
tasks: [],
loading: false,
// 标签页
activeTab: "todo",
// 当前任务
currentTask: null,
dialogVisible: false,
processStatusMap: {
10: {text: "进行中", class: "doing"},
20: {text: "已完成", class: "finished"},
30: {text: "已撤回", class: "withdraw"},
40: {text: "强行终止", class: "interrupt"},
45: {text: "已拒绝", class: "reject"},
50: {text: "挂起", class: "pending"},
99: {text: "已废弃", class: "abandon"}
},
// 任务状态枚举
taskStateEnum: {
DOING: 10,
FINISHED: 20,
WITHDRAW: 30,
INTERRUPT: 40,
PENDING: 50,
ABANDON: 99
}
}
},
created() {
this.initData()
},
methods: {
// 初始化数据
async initData() {
await Promise.all([this.getStatistics(), this.listCategory(), this.getTasks()])
},
// 获取统计数据
async getStatistics() {
try {
const res = await $.post("/flow/todoCenter/statistics")
if (res.code === 0) {
const {todoCount, doneCount, startedCount} = res.data
this.todoCount = todoCount
this.doneCount = doneCount
this.startedCount = startedCount
}
} catch (error) {
this.$message.error("获取统计数据失败")
console.error("获取统计数据失败:", error)
}
},
// 获取流程类型
async listCategory() {
this.$axios.post("/flow/category/list").then((res) => {
if (res.code === 0) {
this.categoryOptions = res.data
}
})
},
// 获取任务列表
async getTasks() {
this.loading = true
try {
const res = await $.post("/flow/todoCenter/" + this.activeTab, this.pageForm)
if (res.code === 0) {
this.tasks = res.data.list
this.pageForm.totalCount = res.data.totalCount
this.dialogVisible = false
}
} catch (error) {
this.$message.error("获取任务列表失败")
console.error("获取任务列表失败:", error)
} finally {
this.loading = false
}
},
// 处理标签页点击
handleTabClick(tab) {
this.activeTab = tab.name
this.pageForm.pageNumber = 1
this.getTasks()
},
// 搜索
search() {
this.pageForm.pageNumber = 1
this.getTasks()
this.getStatistics()
},
// 重置搜索
reset() {
this.pageForm.searchKeyword = ""
this.pageForm.category = ""
this.search()
},
// 处理页码变化
handleCurrentChange(val) {
this.pageForm.pageNumber = val
this.getTasks()
},
// 处理任务
async openView(task) {
console.log(task)
const {taskId, taskKey, taskState, instanceId, businessNo, formKey} = task
if (!formKey) {
this.$message.warning("当前流程没有配置地址")
return
}
window.open(formKey + "?taskId=" + taskId + "bizId=" + businessNo + "taskKey=" + taskKey)
},
// 获取空状态文本
getEmptyText() {
switch (this.activeTab) {
case "todo":
return "您当前没有需要办理的任务，辛苦了"
case "done":
return "您当前没有已办理的任务记录"
case "started":
return "您当前没有发起的流程"
default:
return "暂无数据"
}
}
}
})
</script>
<!--#
}
#-->