yunzerwebsite/yunzerwebsiteallinone
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

主要更新uniapp相关功能

Browse Source
This commit is contained in:
hero920103 committed 2026-10-07 00:59:05 +08:00
1 parent aa92ca40a2
commit 5b4dbb2b46
65 files changed
+8532 -1921
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

uniapp/components/sub/SubFunctions.vue
+194 -145
View File
@@ -1,28 +1,11 @@
<template>
<view class="page">
<view class="head">
<template>
<view class="page" :class="{ embedded }">
<view v-if="!embedded" class="head" :style="headPad">
<view class="head-row" @tap="goBackNav">
<FaIcon name="chevron-left" color="#1f2b48" :size="18" />
<text class="head-back">返回导航</text>
</view>
<view class="head-title-row">
<text class="head-title">{{ sub.title }}</text>
<text class="head-count">{{ filteredMenus.length }} 个功能</text>
</view>
<view class="search-bar">
<FaIcon name="magnifying-glass" color="#8a94ad" :size="15" />
<input
v-model="keyword"
class="search-input"
type="text"
placeholder="搜索功能名称"
placeholder-class="search-placeholder"
confirm-type="search"
/>
<view v-if="keyword" class="search-clear" @tap="keyword = ''">
<FaIcon name="circle-xmark" color="#c0c4cc" :size="15" />
</view>
</view>
<text class="head-title">{{ sub.title }}</text>
</view>
<view class="body">
@@ -34,39 +17,49 @@
</view>
</view>
<block v-else>
<view v-if="filteredMenus.length === 0" class="empty-box">
<FaIcon name="magnifying-glass" color="#c0c4cc" :size="30" />
<text class="empty-text">{{ keyword.trim() ? '没有匹配的功能' : '该子系统下暂无你可见的功能' }}</text>
</view>
<view v-else-if="groups.length === 0" class="empty-box">
<FaIcon name="table-cells" color="#c0c4cc" :size="30" />
<text class="empty-text">该子系统下暂无你可见的功能</text>
</view>
<!-- 功能卡片：两列宫格，与子系统导航页保持一致的视觉语言 -->
<view v-else class="card-grid">
<view
v-for="(item, index) in filteredMenus"
:key="item.id"
class="fn-card"
:class="{ locked: item.locked }"
@tap="openMenu(item, item.title)"
>
<view class="tint-icon fn-icon" :class="item.locked ? 'tint-off' : 'tint-' + (index % 8)">
<FaIcon :name="item.icon || fallbackIcon" color="#ffffff" :size="20" />
<!-- 功能分组：每个分组一个 card，组内为功能 card（一行 4 个，仅图标 + 名称） -->
<view v-else class="group-list">
<view v-for="group in groups" :key="group.id" class="group-card">
<view class="group-head">
<view class="group-bar" />
<text class="group-title">{{ group.title }}</text>
<text class="group-count">{{ group.items.length }}</text>
</view>
<view class="grid">
<view
v-for="item in group.items"
:key="item.id"
class="cell"
@tap="openMenu(item, item.title)"
>
<view class="fn-card" :class="{ locked: item.locked }">
<view class="tint-icon fn-icon" :class="item.locked ? 'tint-off' : 'tint-' + (item.tintIndex % 8)">
<FaIcon :name="item.icon || fallbackIcon" color="#ffffff" :size="18" />
</view>
<text class="fn-name">{{ item.title }}</text>
</view>
</view>
<text class="fn-name">{{ item.title }}</text>
<text class="fn-sub">{{ item.leaf === false ? (item.docs || 0) + ' 个下级' : shortPath(item.path) }}</text>
</view>
</view>
</block>
</view>
<view class="bottom-space" />
</view>
<AppTabbar :group="slug" current="functions" />
<AppTabbar v-if="!embedded" :group="slug" current="functions" />
</view>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { computed, onMounted } from 'vue'
import { mpHeadPad } from '@/utils/mpHead.js'
const headPad = mpHeadPad()
import { onShow } from '@dcloudio/uni-app'
import { isLoggedIn } from '@/utils/auth.js'
import { openMenu } from '@/utils/nav.js'
@@ -74,11 +67,13 @@ import { useSubsystem } from '@/utils/subsystem.js'
import AppTabbar from '@/components/AppTabbar.vue'
const props = defineProps({
slug: { type: String, required: true }
slug: { type: String, required: true },
embedded: { type: Boolean, default: false }
})
const emit = defineEmits(['switch-tab', 'back'])
const { sub, loading, loadError, allMenus, load } = useSubsystem(props.slug)
const keyword = ref('')
/** 模块 code → 图标，用于菜单自身没配图标时的兜底 */
const fallbackIcon = computed(() => {
@@ -92,23 +87,75 @@ const fallbackIcon = computed(() => {
return map[String(sub.module || '').toLowerCase()] || 'file-lines'
})
const filteredMenus = computed(() => {
const q = keyword.value.trim().toLowerCase()
const list = allMenus.value.slice().sort((a, b) => a.sort - b.sort)
if (!q) return list
return list.filter((m) => String(m.title || '').toLowerCase().indexOf(q) > -1)
/**
* 按「一级分类目录」分组：
* 菜单层级形如 模块根 → 个人办公 → 通讯录，分组取一级目录（个人办公 / 人事管理 …），
* 组内为该目录下的全部可见功能。无分类归属的快捷功能不在功能页展示，由首页「常用功能」承载。
*/
const groups = computed(() => {
const menus = allMenus.value.slice().sort((a, b) => (a.sort || 0) - (b.sort || 0))
const byId = {}
menus.forEach((m) => { byId[m.id] = m })
// 取该菜单所属的「一级分组」节点
function groupNodeOf(m) {
// 自底向上收集祖先链：chain[0] 为链上最顶层节点
const chain = [m]
let cur = m
let guard = 0
while (byId[cur.pid] && guard++ < 20) {
cur = byId[cur.pid]
chain.unshift(cur)
}
const top = chain[0]
if (top.pid === 0) {
// 模块根在列表内：跳过根，取它下一层（个人办公 / 人事管理 …）
if (chain.length >= 2) return chain[1]
// 顶层节点自身：目录视为模块容器跳过，叶子无分类归属
return top.leaf === false ? null : top
}
// 模块根不在列表内：链上顶层节点本身就是一级分组
return top
}
const groupMap = new Map()
menus.forEach((m) => {
const g = groupNodeOf(m)
if (!g) return
if (g.id === m.id) {
// 自身即分组节点：目录作组标题（不重复出现在组内），叶子无分类归属不展示
if (g.leaf === false && !groupMap.has(g.id)) {
groupMap.set(g.id, { id: g.id, title: g.title, sort: g.sort, items: [] })
}
return
}
if (!groupMap.has(g.id)) {
groupMap.set(g.id, { id: g.id, title: g.title, sort: g.sort, items: [] })
}
groupMap.get(g.id).items.push(m)
})
// 功能页只展示「归属分类目录且有可见功能」的分组；无归属功能由首页「常用功能」承载
const list = []
groupMap.forEach((g) => {
if (g.items.length) list.push(g)
})
list.sort((a, b) => (a.sort || 0) - (b.sort || 0))
// 颜色下标按展开顺序统一编号，避免每个分组都从 tint-0 开始
let colorIndex = 0
return list.map((group) => ({
...group,
items: group.items.map((item) => ({ ...item, tintIndex: colorIndex++ }))
}))
})
/** 摘要行：去掉模块前缀，只留相对路径，太长时截断 */
function shortPath(path) {
const p = String(path || '')
if (!p) return '功能'
const parts = p.split('/').filter(Boolean)
if (parts.length <= 2) return p
return '…/' + parts.slice(-2).join('/')
}
function goBackNav() {
if (props.embedded) {
emit('back')
return
}
uni.reLaunch({ url: '/pages/nav/nav' })
}
@@ -130,11 +177,19 @@ onShow(() => {
.page {
@include page-shell;
// 嵌入模式下由父页（tabs.vue）的 scroll-view 统一滚动，这里改为自然高度
&.embedded {
height: auto;
}
}
.head {
flex-shrink: 0;
padding: calc(var(--status-bar-height, 44px) + 20rpx) $page-padding-x 24rpx;
/* #ifdef MP-WEIXIN */
padding-top: calc(env(safe-area-inset-top, 25px) + 84rpx);
/* #endif */
background: $color-card;
box-shadow: $shadow-header;
}
@@ -150,62 +205,20 @@ onShow(() => {
color: $color-text-muted;
}
.head-title-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16rpx;
margin-top: 14rpx;
}
.head-title {
display: block;
margin-top: 14rpx;
font-size: 36rpx;
font-weight: 600;
color: $color-text;
}
.head-count {
font-size: 23rpx;
color: $color-text-muted;
flex-shrink: 0;
}
.search-bar {
display: flex;
align-items: center;
gap: 12rpx;
height: 74rpx;
margin-top: 22rpx;
padding: 0 24rpx;
background: $color-bg-page;
border-radius: $radius-full;
}
.search-input {
flex: 1;
min-width: 0;
height: 74rpx;
font-size: 27rpx;
color: $color-text;
}
.search-placeholder {
color: $color-text-muted;
font-size: 27rpx;
}
.search-clear {
display: flex;
align-items: center;
padding: 8rpx;
}
.body {
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 24rpx $page-padding-x 0;
padding: 28rpx $page-padding-x 0;
}
.empty-box {
@@ -252,64 +265,100 @@ onShow(() => {
word-break: break-all;
}
/* ============ 功能卡片：两列宫格 ============
与 nav.vue 一致用 flex 换行而非 grid，避免小程序端 wxss 对 grid 支持不稳。 */
.card-grid {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.fn-card {
/* ============ 分组卡：外层一个 card，内含若干功能 card ============ */
.group-card {
@include card;
width: calc(50% - 10rpx);
margin-right: 20rpx;
margin-bottom: 20rpx;
padding: 24rpx 20rpx 20rpx;
padding: 24rpx 20rpx 8rpx;
& + & {
margin-top: 24rpx;
}
}
.group-head {
display: flex;
flex-direction: column;
transition: transform 0.15s ease;
&:nth-child(2n) {
margin-right: 0;
}
&:active {
transform: scale(0.97);
}
&.locked {
.fn-name,
.fn-sub {
color: $color-text-muted;
}
}
align-items: center;
gap: 12rpx;
padding: 0 4rpx 20rpx;
}
.fn-icon {
@include tint-icon(76rpx, 20rpx);
.group-bar {
width: 6rpx;
height: 28rpx;
border-radius: $radius-full;
background: $color-primary;
flex-shrink: 0;
}
.fn-name {
margin-top: 18rpx;
.group-title {
flex: 1;
min-width: 0;
font-size: 28rpx;
font-weight: 500;
font-weight: 600;
color: $color-text;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fn-sub {
margin-top: 6rpx;
font-size: 21rpx;
color: $color-text-muted;
.group-count {
@include chip;
}
/* ============ 功能宫格：一行 4 个 ============
cell 占 25% 宽并自带右侧间隙，容器用负 margin 抵消末列间隙，
避免使用 calc 除法——小程序端 wxss 对复杂 calc 支持不稳。 */
.grid {
display: flex;
flex-wrap: wrap;
margin-right: -16rpx;
}
.cell {
width: 25%;
padding-right: 16rpx;
margin-bottom: 16rpx;
box-sizing: border-box;
}
.fn-card {
height: 100%;
padding: 18rpx 6rpx 16rpx;
border-radius: $radius-md;
background: $color-bg-page;
display: flex;
flex-direction: column;
align-items: center;
gap: 12rpx;
transition: transform 0.15s ease;
&:active {
transform: scale(0.95);
}
}
.fn-icon {
@include tint-icon(64rpx, 18rpx);
}
.fn-name {
max-width: 100%;
font-size: 22rpx;
line-height: 1.3;
color: $color-text;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bottom-space {
height: 48rpx;
.fn-card.locked {
.fn-name {
color: $color-text-muted;
}
}
</style>
.bottom-space {
height: 32rpx;
}
</style>