This commit is contained in:
zhouhefeng
2026-05-20 08:54:05 +08:00
parent b3a84786c3
commit 3f76d2c6cb
105 changed files with 28881 additions and 296 deletions
@@ -85,6 +85,7 @@
<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>
@@ -541,6 +542,33 @@
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;
@@ -606,6 +634,10 @@
.v4-nav {
display: none;
}
.voice-menu-text {
display: none;
}
}
/* 页脚样式 */
@@ -677,6 +709,10 @@
</div>
<div class="v4-user-section">
<button type="button" class="v4-voice-menu" id="voice-menu-btn" 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> -->
@@ -1,31 +1,31 @@
const entry = {
template: /*language=HTML*/ `
<div class="entry-wrapper">
<!-- 标签页导航 -->
<div class="tabs">
<div class="tab-item" :class="{ active: activeCategory === 'serv' }"
@click="setActiveCategory('serv')">
<i class="fa fa-star"></i> 推荐服务
<div class="entry-section" 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="tab-item" :class="{ active: activeCategory === 'app' }"
@click="setActiveCategory('app')">
<i class="fa fa-fire"></i> 推荐应用
</div>
<div class="tab-item" :class="{ active: activeCategory === 'fav' }"
@click="setActiveCategory('fav')">
<i class="fa fa-heart"></i> 我的收藏
</div>
</div>
<!-- 应用块区域 -->
<div class="apps-container">
<div class="app-grid">
<div class="app-item" v-for="(item, index) in currentServices" :key="index"
@click="openService(item)">
<div class="app-icon">
<img :src="item.picIcon" alt="" />
<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 :src="item.picIcon" alt="" />
</div>
<div class="app-name">{{ item.name }}</div>
</div>
<div class="app-name">{{ item.name }}</div>
<el-empty class="app-empty"
v-if="!section.list || section.list.length === 0"
description="暂无数据"
:image-size="72">
</el-empty>
</div>
</div>
</div>
@@ -33,7 +33,6 @@ const entry = {
`,
data() {
return {
activeCategory: 'serv',
hasMore: true,
entries: {
serv: [],
@@ -43,8 +42,12 @@ const entry = {
}
},
computed: {
currentServices() {
return this.entries[this.activeCategory] || [];
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() {
@@ -53,10 +56,6 @@ const entry = {
this.getFavorite()
},
methods: {
setActiveCategory(category) {
this.activeCategory = category;
},
// 查询推荐服务
async getRecommendService() {
this.$axios.post('/platform/home/listRecommendService', {platform: "PC"}).then(res => {
@@ -84,35 +83,37 @@ const entry = {
})
},
// 点击服务
openService(service) {
if(this.activeCategory === 'serv'){
if(!service.href) this.$message.error('无效的链接地址')
// 点击服务或应用
openService(service, category) {
if (category === 'serv') {
if (!service.href) {
this.$message.error('无效的链接地址')
return
}
window.open(service.href)
return
}
if(this.activeCategory === 'app'){
// 储存到缓存
if (category === 'app') {
window.sessionStorage.setItem("zhgh_sub_app", JSON.stringify(service))
// 新标签页打开
window.open("/platform/v4/subApp?appId=" + service.id, "_blank")
return
}
if(this.activeCategory === 'fav'){
if(!service.href) this.$message.error('无效的链接地址')
window.open(service.href)
return
if(!service.parentId){
// 储存到缓存
window.sessionStorage.setItem("zhgh_sub_app", JSON.stringify(app))
// 新标签页打开
window.open("/platform/v4/subApp?appId=" + app.id, "_blank")
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*/ `
@@ -121,37 +122,36 @@ const entry = {
box-sizing: border-box;
}
.tabs {
margin-top: 5px;
display: flex;
gap: 20px;
border-bottom: 2px solid #e8e8e8;
padding-bottom: 10px;
.entry-section + .entry-section {
margin-top: 22px;
}
.tab-item {
.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;
color: #666;
cursor: pointer;
padding-bottom: 8px;
transition: color 0.2s ease;
}
.tab-item:hover {
color: #1890ff;
}
.tab-item.active {
color: #1890ff;
font-weight: bold;
border-bottom: 2px solid #1890ff;
}
.tab-item i {
font-size: 14px;
font-style: normal;
font-weight: 500;
}
.apps-container {
@@ -162,19 +162,17 @@ const entry = {
.app-grid {
display: grid;
/* 改为自适应列数:每格最小 80px,自动换行 */
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
justify-items: center; /* 子项内容居中(图标和文字) */
justify-content: start; /* 整体网格靠左对齐,避免居中 */
gap: 4px;
padding: 12px 4px;
grid-template-columns: repeat(auto-fill, minmax(96px, 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;
max-height: calc(350px - 74px);
overflow-y: auto;
}
.app-item {
@@ -187,6 +185,7 @@ const entry = {
width: 100%;
max-width: 100%;
padding: 6px;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@@ -208,6 +207,7 @@ const entry = {
}
.app-name {
min-height: 34px;
font-size: 12px;
color: #333;
line-height: 1.4;
@@ -215,31 +215,26 @@ const entry = {
text-align: center;
}
/* 响应式设计 */
.app-empty {
grid-column: 1 / -1;
width: 100%;
}
@media (max-width: 768px) {
.tabs {
flex-wrap: wrap;
gap: 10px;
}
.tab-item {
padding: 8px 0;
font-size: 12px;
}
.app-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
grid-template-columns: repeat(3, minmax(72px, 1fr));
gap: 12px;
padding: 14px 10px;
}
.app-item {
padding: 12px;
padding: 8px 4px;
}
}
@media (max-width: 480px) {
.app-grid {
grid-template-columns: 1fr;
grid-template-columns: repeat(2, minmax(72px, 1fr));
gap: 12px;
}
}
@@ -11,7 +11,7 @@ layout("/layouts/v4/baseLayout.html"){
.section-banner .banner-img {
width: 100%;
height: 100%;
height: auto;
}
.section-banner .banner-img img {
@@ -21,6 +21,11 @@ layout("/layouts/v4/baseLayout.html"){
object-fit: cover;
}
/* 临时屏蔽首页背景图,保留原图片节点便于恢复 */
.section-banner .banner-img > img {
display: none;
}
.section-wrapper {
width: 100%;
}
@@ -29,7 +34,7 @@ layout("/layouts/v4/baseLayout.html"){
width: 80%;
margin: 20px auto;
display: grid;
grid-template-columns: 2.2fr 0.8fr;
grid-template-columns: 1fr;
gap: 24px;
align-items: stretch;
row-gap: 24px;
@@ -39,16 +44,16 @@ layout("/layouts/v4/baseLayout.html"){
display: flex;
/*align-items: center;*/
min-width: 320px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
padding: 16px;
background: transparent;
border-radius: 0;
box-shadow: none;
padding: 0;
transition: transform 0.2s, box-shadow 0.2s;
}
.entry-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0,0,0,0.12);
transform: none;
box-shadow: none;
}
.act-card {
@@ -77,10 +82,6 @@ layout("/layouts/v4/baseLayout.html"){
<user></user>
<div class="home-grid">
<div class="act-card">
<act></act>
</div>
<div class="entry-card">
<entry></entry>
</div>
@@ -12,7 +12,7 @@ const stats = {
@mouseenter="onMouseEnter"
@mouseleave="onMouseLeave"
>
<div class="stat-icon">
<div class="stat-icon stat-icon-hidden">
<i class="fa fa-clock-o"></i>
</div>
<div class="stat-content">
@@ -28,7 +28,7 @@ const stats = {
@mouseenter="onMouseEnter"
@mouseleave="onMouseLeave"
>
<div class="stat-icon">
<div class="stat-icon stat-icon-hidden">
<i class="fa fa-check-circle"></i>
</div>
<div class="stat-content">
@@ -44,7 +44,7 @@ const stats = {
@mouseenter="onMouseEnter"
@mouseleave="onMouseLeave"
>
<div class="stat-icon">
<div class="stat-icon stat-icon-hidden">
<i class="fa fa-bell"></i>
</div>
<div class="stat-content">
@@ -60,7 +60,7 @@ const stats = {
@mouseenter="onMouseEnter"
@mouseleave="onMouseLeave"
>
<div class="stat-icon">
<div class="stat-icon stat-icon-hidden">
<i class="fa fa-file-text"></i>
</div>
<div class="stat-content">
@@ -122,7 +122,7 @@ const stats = {
display: flex;
justify-content: space-between;
align-items: center;
margin: -130px auto 0;
margin: 20px auto 0;
/*border: 1px solid #e8e8e8;*/
}
@@ -131,7 +131,8 @@ const stats = {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
width: 32%;
margin-left: 20px;
min-width: 360px;
margin-left: auto;
}
.stat-item {
@@ -162,6 +163,11 @@ const stats = {
justify-content: center;
}
/* 临时屏蔽待办、已办、消息、发起四个统计图标 */
.stat-icon-hidden {
display: none !important;
}
.stat-item.pending .stat-icon,
.stat-item.completed .stat-icon,
.stat-item.messages .stat-icon,
@@ -185,7 +191,7 @@ const stats = {
.stat-content {
display: flex;
flex-direction: column;
margin-left: 10px;
margin-left: 0;
}
.stat-label {
@@ -209,5 +215,10 @@ const stats = {
height: 190px !important;
border-radius: 30px;
}
/* 临时屏蔽“欢迎来到职工之家”图片,保留原节点便于恢复 */
.stats-family {
display: none;
}
`
};
@@ -68,10 +68,10 @@ const user = {
<div class="header">
<h3>待办中心</h3>
<el-tabs v-model="activeTab" type="card" @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-tab-pane label="办结事务" name="completed"></el-tab-pane>
<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>
@@ -124,6 +124,12 @@ const user = {
pageSize: 5,
totalCount: 0
},
taskStats: {
todoCount: 0,
doneCount: 0,
startedCount: 0,
completedCount: 0
},
// 🔆 天气相关数据
weatherData: null,
weatherError: false,
@@ -228,6 +234,19 @@ const user = {
}
},
// 获取任务列表
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 {
@@ -245,6 +264,7 @@ const user = {
},
pageData() {
this.getTasks()
this.getStatistics()
},
handleTabClick(tab) {
this.pageData()