批量优化
This commit is contained in:
hero920103 committed
1 parent
e3db229f41
commit
aa92ca40a2
79 files changed
+7495
-1104
No files matched your search
@@ -0,0 +1,315 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="head">
|
||||
<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>
|
||||
</view>
|
||||
|
||||
<view class="body">
|
||||
<view v-if="loadError" class="err-box" @tap="load(true)">
|
||||
<FaIcon name="triangle-exclamation" color="#f04438" :size="18" />
|
||||
<view class="err-body">
|
||||
<text class="err-title">加载失败</text>
|
||||
<text class="err-msg">{{ loadError }}，点击重试</text>
|
||||
</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 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" />
|
||||
</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 class="bottom-space" />
|
||||
</view>
|
||||
|
||||
<AppTabbar :group="slug" current="functions" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import { isLoggedIn } from '@/utils/auth.js'
|
||||
import { openMenu } from '@/utils/nav.js'
|
||||
import { useSubsystem } from '@/utils/subsystem.js'
|
||||
import AppTabbar from '@/components/AppTabbar.vue'
|
||||
|
||||
const props = defineProps({
|
||||
slug: { type: String, required: true }
|
||||
})
|
||||
|
||||
const { sub, loading, loadError, allMenus, load } = useSubsystem(props.slug)
|
||||
const keyword = ref('')
|
||||
|
||||
/** 模块 code → 图标，用于菜单自身没配图标时的兜底 */
|
||||
const fallbackIcon = computed(() => {
|
||||
const map = {
|
||||
crm: 'handshake',
|
||||
erp: 'boxes-stacked',
|
||||
oa: 'clipboard-check',
|
||||
cms: 'globe',
|
||||
bianjiegongju: 'wrench'
|
||||
}
|
||||
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)
|
||||
})
|
||||
|
||||
/** 摘要行：去掉模块前缀，只留相对路径，太长时截断 */
|
||||
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() {
|
||||
uni.reLaunch({ url: '/pages/nav/nav' })
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!isLoggedIn()) {
|
||||
uni.reLaunch({ url: '/pages/login/login' })
|
||||
return
|
||||
}
|
||||
load()
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
if (isLoggedIn() && !loading.value) load()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/src/styles/page-common.scss';
|
||||
|
||||
.page {
|
||||
@include page-shell;
|
||||
}
|
||||
|
||||
.head {
|
||||
flex-shrink: 0;
|
||||
padding: calc(var(--status-bar-height, 44px) + 20rpx) $page-padding-x 24rpx;
|
||||
background: $color-card;
|
||||
box-shadow: $shadow-header;
|
||||
}
|
||||
|
||||
.head-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
.head-back {
|
||||
font-size: 24rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.head-title-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
.head-title {
|
||||
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;
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
@include card;
|
||||
padding: 80rpx 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 26rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.err-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
padding: 24rpx 22rpx;
|
||||
background: #fef3f2;
|
||||
border: 1rpx solid #fdd8d4;
|
||||
border-radius: $radius-md;
|
||||
}
|
||||
|
||||
.err-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.err-title {
|
||||
display: block;
|
||||
font-size: 27rpx;
|
||||
font-weight: 500;
|
||||
color: $color-danger;
|
||||
}
|
||||
|
||||
.err-msg {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: 22rpx;
|
||||
color: #b42318;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* ============ 功能卡片：两列宫格 ============
|
||||
与 nav.vue 一致用 flex 换行而非 grid，避免小程序端 wxss 对 grid 支持不稳。 */
|
||||
.card-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.fn-card {
|
||||
@include card;
|
||||
width: calc(50% - 10rpx);
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 24rpx 20rpx 20rpx;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fn-icon {
|
||||
@include tint-icon(76rpx, 20rpx);
|
||||
}
|
||||
|
||||
.fn-name {
|
||||
margin-top: 18rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: $color-text;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fn-sub {
|
||||
margin-top: 6rpx;
|
||||
font-size: 21rpx;
|
||||
color: $color-text-muted;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bottom-space {
|
||||
height: 48rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,427 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 顶部标识条 -->
|
||||
<view class="hero" :class="sub.tint">
|
||||
<view class="hero-row" @tap="goBackNav">
|
||||
<FaIcon name="chevron-left" color="#ffffff" :size="18" />
|
||||
<text class="hero-back">返回导航</text>
|
||||
</view>
|
||||
<view class="hero-main">
|
||||
<view class="hero-icon">
|
||||
<FaIcon :name="sub.icon" color="#ffffff" :size="26" />
|
||||
</view>
|
||||
<view class="hero-meta">
|
||||
<text class="hero-name">{{ sub.title }}</text>
|
||||
<text class="hero-desc">{{ sub.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="body">
|
||||
<!-- 未开通 -->
|
||||
<view v-if="!enabled" class="lock-box">
|
||||
<FaIcon name="lock" color="#f04438" :size="28" />
|
||||
<text class="lock-title">该子系统未开通</text>
|
||||
<text class="lock-desc">当前租户套餐未包含「{{ sub.name }}」，请联系管理员开通后使用。</text>
|
||||
</view>
|
||||
|
||||
<block v-else>
|
||||
<!-- 加载失败 -->
|
||||
<view v-if="loadError" class="err-box" @tap="load(true)">
|
||||
<FaIcon name="triangle-exclamation" color="#f04438" :size="18" />
|
||||
<view class="err-body">
|
||||
<text class="err-title">子系统加载失败</text>
|
||||
<text class="err-msg">{{ loadError }}，点击重试</text>
|
||||
</view>
|
||||
<FaIcon name="rotate" color="#f04438" :size="16" />
|
||||
</view>
|
||||
|
||||
<block v-else>
|
||||
<!-- 常用功能 -->
|
||||
<view class="block">
|
||||
<view class="block-head">
|
||||
<text class="block-title">常用功能</text>
|
||||
<text class="block-sub">{{ leafMenus.length }} 个功能</text>
|
||||
</view>
|
||||
<view v-if="leafMenus.length === 0" class="empty-box">
|
||||
<text class="empty-text">该子系统下暂无你可见的功能</text>
|
||||
</view>
|
||||
<view v-else class="grid">
|
||||
<view
|
||||
v-for="item in leafMenus.slice(0, 8)"
|
||||
:key="item.id"
|
||||
class="grid-item"
|
||||
@tap="openMenu(item, item.title)"
|
||||
>
|
||||
<view class="tint-icon grid-icon" :class="sub.tint">
|
||||
<FaIcon name="circle-check" color="#ffffff" :size="20" />
|
||||
</view>
|
||||
<text class="grid-name">{{ item.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 子系统目录 -->
|
||||
<view v-if="dirMenus.length" class="block">
|
||||
<view class="block-head">
|
||||
<text class="block-title">功能分组</text>
|
||||
</view>
|
||||
<view class="list-card">
|
||||
<view
|
||||
v-for="item in dirMenus"
|
||||
:key="item.id"
|
||||
class="list-item"
|
||||
@tap="goFunctions"
|
||||
>
|
||||
<view class="dot" />
|
||||
<view class="list-body">
|
||||
<text class="list-title">{{ item.title }}</text>
|
||||
<text class="list-meta">{{ item.docs || 0 }} 个功能</text>
|
||||
</view>
|
||||
<FaIcon name="chevron-right" color="#c8cfdf" :size="12" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 打开 Web 端完整系统（仅该子系统在 Web 端确有对应系统时展示，见 config/subsystems.js 的 webEntry） -->
|
||||
<view v-if="sub.webEntry" class="block">
|
||||
<view class="enter-card" @tap="enterSystem">
|
||||
<view class="tint-icon enter-icon" :class="sub.tint">
|
||||
<FaIcon name="display" color="#ffffff" :size="22" />
|
||||
</view>
|
||||
<view class="enter-meta">
|
||||
<text class="enter-title">进入完整{{ sub.name }}系统</text>
|
||||
<text class="enter-desc">在浏览器中打开，支持全部功能</text>
|
||||
</view>
|
||||
<FaIcon name="arrow-right" color="#c8cfdf" :size="14" />
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
|
||||
<view class="bottom-space" />
|
||||
</view>
|
||||
|
||||
<AppTabbar :group="slug" current="home" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import { isLoggedIn } from '@/utils/auth.js'
|
||||
import { openMenu, openWebPage } from '@/utils/nav.js'
|
||||
import { useSubsystem } from '@/utils/subsystem.js'
|
||||
import AppTabbar from '@/components/AppTabbar.vue'
|
||||
|
||||
const props = defineProps({
|
||||
slug: { type: String, required: true }
|
||||
})
|
||||
|
||||
const { sub, loading, loadError, enabled, leafMenus, dirMenus, moduleMeta, load } = useSubsystem(props.slug)
|
||||
const entered = ref(false)
|
||||
|
||||
function goBackNav() {
|
||||
uni.reLaunch({ url: '/pages/nav/nav' })
|
||||
}
|
||||
|
||||
function goFunctions() {
|
||||
uni.redirectTo({ url: `/pages/${props.slug}/functions/functions` })
|
||||
}
|
||||
|
||||
/** 打开 Web 端该模块首页（模块 path 优先，否则用第一个功能页），走票据免登录 */
|
||||
async function enterSystem() {
|
||||
if (entered.value) return
|
||||
const target =
|
||||
(moduleMeta.value && moduleMeta.value.path) ||
|
||||
(leafMenus.value[0] && leafMenus.value[0].path) ||
|
||||
''
|
||||
if (!target) {
|
||||
uni.showToast({ title: '该系统暂未开放', icon: 'none' })
|
||||
return
|
||||
}
|
||||
entered.value = true
|
||||
try {
|
||||
await openWebPage(target, sub.name)
|
||||
} finally {
|
||||
entered.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!isLoggedIn()) {
|
||||
uni.reLaunch({ url: '/pages/login/login' })
|
||||
return
|
||||
}
|
||||
load()
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
if (isLoggedIn() && !loading.value) load()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/src/styles/page-common.scss';
|
||||
|
||||
.page {
|
||||
@include page-shell;
|
||||
}
|
||||
|
||||
.hero {
|
||||
flex-shrink: 0;
|
||||
padding: calc(var(--status-bar-height, 44px) + 20rpx) $page-padding-x 40rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.hero-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.hero-back {
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.hero-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.hero-icon {
|
||||
width: 92rpx;
|
||||
height: 92rpx;
|
||||
border-radius: 24rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.32);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.hero-meta {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.hero-name {
|
||||
display: block;
|
||||
font-size: 38rpx;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: 24rpx $page-padding-x 0;
|
||||
}
|
||||
|
||||
.block-head {
|
||||
@include block-head;
|
||||
}
|
||||
|
||||
.block-title {
|
||||
@include section-title;
|
||||
}
|
||||
|
||||
.block-sub {
|
||||
font-size: 24rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
@include card;
|
||||
padding: 56rpx 24rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 25rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.err-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
padding: 24rpx 22rpx;
|
||||
background: #fef3f2;
|
||||
border: 1rpx solid #fdd8d4;
|
||||
border-radius: $radius-md;
|
||||
}
|
||||
|
||||
.err-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.err-title {
|
||||
display: block;
|
||||
font-size: 27rpx;
|
||||
font-weight: 500;
|
||||
color: $color-danger;
|
||||
}
|
||||
|
||||
.err-msg {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: 22rpx;
|
||||
color: #b42318;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.lock-box {
|
||||
@include card;
|
||||
padding: 60rpx 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 14rpx;
|
||||
}
|
||||
|
||||
.lock-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: $color-danger;
|
||||
}
|
||||
|
||||
.lock-desc {
|
||||
font-size: 24rpx;
|
||||
color: $color-text-muted;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.grid {
|
||||
@include card;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
padding: 28rpx 8rpx 20rpx;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 14rpx;
|
||||
padding: 12rpx 0;
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-icon {
|
||||
@include tint-icon(84rpx, 22rpx);
|
||||
}
|
||||
|
||||
.grid-name {
|
||||
font-size: 23rpx;
|
||||
color: $color-text-secondary;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.list-card {
|
||||
@include card;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18rpx;
|
||||
padding: 26rpx 24rpx;
|
||||
|
||||
& + & {
|
||||
border-top: 1rpx solid $color-divider;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $color-bg-page;
|
||||
}
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
border-radius: 50%;
|
||||
background: $color-primary;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.list-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
.list-meta {
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
font-size: 22rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.enter-card {
|
||||
@include card;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18rpx;
|
||||
padding: 26rpx 24rpx;
|
||||
|
||||
&:active {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
.enter-icon {
|
||||
@include tint-icon(76rpx, 20rpx);
|
||||
}
|
||||
|
||||
.enter-meta {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.enter-title {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
.enter-desc {
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
font-size: 22rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.bottom-space {
|
||||
height: 40rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,485 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="head">
|
||||
<view class="head-row" @tap="goBackNav">
|
||||
<FaIcon name="chevron-left" color="#ffffff" :size="18" />
|
||||
<text class="head-back">返回导航</text>
|
||||
</view>
|
||||
<view class="user">
|
||||
<view class="avatar">
|
||||
<text class="avatar-text">{{ avatarText }}</text>
|
||||
</view>
|
||||
<view class="user-meta">
|
||||
<text class="user-name">{{ user.name || '云泽用户' }}</text>
|
||||
<text class="user-sub">{{ user.tenant || '云泽平台' }}<text v-if="user.account"> · {{ user.account }}</text></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="body">
|
||||
<view v-if="loadError" class="err-box" @tap="load(true)">
|
||||
<FaIcon name="triangle-exclamation" color="#f04438" :size="18" />
|
||||
<view class="err-body">
|
||||
<text class="err-title">加载失败</text>
|
||||
<text class="err-msg">{{ loadError }}，点击重试</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 当前子系统 -->
|
||||
<view class="block">
|
||||
<view class="block-head"><text class="block-title">当前子系统</text></view>
|
||||
<view class="card-row">
|
||||
<view class="tint-icon row-icon" :class="sub.tint">
|
||||
<FaIcon :name="sub.icon" color="#ffffff" :size="22" />
|
||||
</view>
|
||||
<view class="row-meta">
|
||||
<text class="row-title">{{ sub.title }}</text>
|
||||
<text class="row-sub">{{ allMenus.length }} 个功能 · {{ enabled ? '已开通' : '未开通' }}</text>
|
||||
</view>
|
||||
<text v-if="!enabled" class="lock-tag">未开通</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 我的数据 -->
|
||||
<view class="block">
|
||||
<view class="block-head"><text class="block-title">我的数据</text></view>
|
||||
<view class="kpi">
|
||||
<view class="kpi-item">
|
||||
<text class="kpi-value" :class="{ warn: overdue > 0 }">{{ pendingCount }}</text>
|
||||
<text class="kpi-label">待办</text>
|
||||
</view>
|
||||
<view class="kpi-item">
|
||||
<text class="kpi-value" :class="{ warn: overdue > 0 }">{{ overdue }}</text>
|
||||
<text class="kpi-label">已逾期</text>
|
||||
</view>
|
||||
<view class="kpi-item">
|
||||
<text class="kpi-value">{{ doneCount }}</text>
|
||||
<text class="kpi-label">已完成</text>
|
||||
</view>
|
||||
<view class="kpi-item">
|
||||
<text class="kpi-value">{{ allMenus.length }}</text>
|
||||
<text class="kpi-label">可用功能</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作 -->
|
||||
<view class="block">
|
||||
<view class="block-head"><text class="block-title">操作</text></view>
|
||||
<view class="list-card">
|
||||
<!-- 仅该子系统在 Web 端确有对应系统时展示（config/subsystems.js 的 webEntry） -->
|
||||
<view v-if="sub.webEntry" class="list-item" @tap="enterSystem">
|
||||
<view class="item-icon"><FaIcon name="display" color="#3973ff" :size="16" /></view>
|
||||
<text class="item-text">进入完整系统（Web 端）</text>
|
||||
<FaIcon name="chevron-right" color="#c8cfdf" :size="12" />
|
||||
</view>
|
||||
<view class="list-item" @tap="goFunctions">
|
||||
<view class="item-icon"><FaIcon name="table-cells" color="#3973ff" :size="16" /></view>
|
||||
<text class="item-text">全部功能</text>
|
||||
<FaIcon name="chevron-right" color="#c8cfdf" :size="12" />
|
||||
</view>
|
||||
<view class="list-item" @tap="goProfile">
|
||||
<view class="item-icon"><FaIcon name="user" color="#3973ff" :size="16" /></view>
|
||||
<text class="item-text">账号与安全</text>
|
||||
<FaIcon name="chevron-right" color="#c8cfdf" :size="12" />
|
||||
</view>
|
||||
<view class="list-item" @tap="goBackNav">
|
||||
<view class="item-icon"><FaIcon name="table-cells" color="#3973ff" :size="16" /></view>
|
||||
<text class="item-text">切换子系统</text>
|
||||
<FaIcon name="chevron-right" color="#c8cfdf" :size="12" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="logout" @tap="handleLogout">
|
||||
<text class="logout-text">退出登录</text>
|
||||
</view>
|
||||
|
||||
<view class="bottom-space" />
|
||||
</view>
|
||||
|
||||
<AppTabbar :group="slug" current="mine" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import { isLoggedIn, logout, isSSOEnabled, getToken, clearPendingAuth } from '@/utils/auth.js'
|
||||
import { openWebPage } from '@/utils/nav.js'
|
||||
import { logoutUAC, logoutApi } from '@/api/auth.js'
|
||||
import { request } from '@/api/request.js'
|
||||
import { clearHomeCache } from '@/api/workspace.js'
|
||||
import { useSubsystem } from '@/utils/subsystem.js'
|
||||
import AppTabbar from '@/components/AppTabbar.vue'
|
||||
|
||||
const props = defineProps({
|
||||
slug: { type: String, required: true }
|
||||
})
|
||||
|
||||
const { sub, loading, loadError, user, allMenus, enabled, moduleMeta, load } = useSubsystem(props.slug)
|
||||
|
||||
const pendingCount = ref(0)
|
||||
const overdue = ref(0)
|
||||
const doneCount = ref(0)
|
||||
const entering = ref(false)
|
||||
|
||||
const avatarText = computed(() => {
|
||||
const name = user.value.name || user.value.account || '云'
|
||||
return String(name).charAt(0).toUpperCase()
|
||||
})
|
||||
|
||||
async function loadStats() {
|
||||
try {
|
||||
const [p, d] = await Promise.all([
|
||||
request({ url: '/app/schedule/list', data: { status: 'pending', pageSize: 50 } }),
|
||||
request({ url: '/app/schedule/list', data: { status: 'done', pageSize: 50 } })
|
||||
])
|
||||
const pending = (p && p.list) || []
|
||||
pendingCount.value = pending.length
|
||||
overdue.value = pending.filter((s) => isOverdue(s)).length
|
||||
doneCount.value = ((d && d.list) || []).length
|
||||
} catch (e) {
|
||||
pendingCount.value = 0
|
||||
overdue.value = 0
|
||||
doneCount.value = 0
|
||||
}
|
||||
}
|
||||
|
||||
function isOverdue(item) {
|
||||
const t = String(item.schedule_time || item.created_at || '')
|
||||
return t.length >= 10 && t.slice(0, 10) < todayStr()
|
||||
}
|
||||
|
||||
function todayStr() {
|
||||
const d = new Date()
|
||||
const p = (n) => String(n).padStart(2, '0')
|
||||
return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate())
|
||||
}
|
||||
|
||||
function goBackNav() {
|
||||
uni.reLaunch({ url: '/pages/nav/nav' })
|
||||
}
|
||||
|
||||
function goFunctions() {
|
||||
uni.redirectTo({ url: `/pages/${props.slug}/functions/functions` })
|
||||
}
|
||||
|
||||
function goProfile() {
|
||||
uni.redirectTo({ url: '/pages/profile/profile' })
|
||||
}
|
||||
|
||||
/** 打开 Web 端该模块首页（走票据免登录） */
|
||||
async function enterSystem() {
|
||||
if (entering.value) return
|
||||
const target =
|
||||
(moduleMeta.value && moduleMeta.value.path) ||
|
||||
(allMenus.value[0] && allMenus.value[0].path) ||
|
||||
''
|
||||
if (!target) {
|
||||
uni.showToast({ title: '该系统暂未开放', icon: 'none' })
|
||||
return
|
||||
}
|
||||
entering.value = true
|
||||
try {
|
||||
await openWebPage(target, sub.name)
|
||||
} finally {
|
||||
entering.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要退出登录吗？',
|
||||
confirmText: '退出',
|
||||
cancelText: '取消',
|
||||
success(res) {
|
||||
if (!res.confirm) return
|
||||
// 统一认证：先吊销服务端会话与令牌
|
||||
if (isSSOEnabled() && getToken()) {
|
||||
logoutUAC().catch(() => {})
|
||||
} else {
|
||||
logoutApi().catch(() => {})
|
||||
}
|
||||
clearPendingAuth()
|
||||
clearHomeCache()
|
||||
logout()
|
||||
uni.reLaunch({ url: '/pages/login/login' })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!isLoggedIn()) {
|
||||
uni.reLaunch({ url: '/pages/login/login' })
|
||||
return
|
||||
}
|
||||
load()
|
||||
loadStats()
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
if (isLoggedIn() && !loading.value) {
|
||||
load()
|
||||
loadStats()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/src/styles/page-common.scss';
|
||||
|
||||
.page {
|
||||
@include page-shell;
|
||||
}
|
||||
|
||||
/* ============ 顶部用户区 ============ */
|
||||
.head {
|
||||
flex-shrink: 0;
|
||||
padding: calc(var(--status-bar-height, 44px) + 20rpx) $page-padding-x 40rpx;
|
||||
background: $hero-gradient;
|
||||
}
|
||||
|
||||
.head-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.head-back {
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
margin-top: 26rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.36);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.user-meta {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
display: block;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.user-sub {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 23rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ============ 内容区 ============ */
|
||||
.body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: 24rpx $page-padding-x 0;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.block-head {
|
||||
@include block-head;
|
||||
}
|
||||
|
||||
.block-title {
|
||||
@include section-title;
|
||||
}
|
||||
|
||||
.err-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 24rpx;
|
||||
padding: 24rpx 22rpx;
|
||||
background: #fef3f2;
|
||||
border: 1rpx solid #fdd8d4;
|
||||
border-radius: $radius-md;
|
||||
}
|
||||
|
||||
.err-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.err-title {
|
||||
display: block;
|
||||
font-size: 27rpx;
|
||||
font-weight: 500;
|
||||
color: $color-danger;
|
||||
}
|
||||
|
||||
.err-msg {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: 22rpx;
|
||||
color: #b42318;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* 当前子系统行 */
|
||||
.card-row {
|
||||
@include card;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18rpx;
|
||||
padding: 26rpx 24rpx;
|
||||
}
|
||||
|
||||
.row-icon {
|
||||
@include tint-icon(80rpx, 20rpx);
|
||||
}
|
||||
|
||||
.row-meta {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.row-title {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
.row-sub {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: 22rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.lock-tag {
|
||||
@include chip(#fef3f2, $color-danger);
|
||||
}
|
||||
|
||||
/* 数据概览 */
|
||||
.kpi {
|
||||
@include card;
|
||||
display: flex;
|
||||
padding: 28rpx 0;
|
||||
}
|
||||
|
||||
.kpi-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
position: relative;
|
||||
|
||||
& + &::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 6rpx;
|
||||
bottom: 6rpx;
|
||||
width: 1rpx;
|
||||
background: $color-divider;
|
||||
}
|
||||
}
|
||||
|
||||
.kpi-value {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: $color-text;
|
||||
|
||||
&.warn {
|
||||
color: $color-danger;
|
||||
}
|
||||
}
|
||||
|
||||
.kpi-label {
|
||||
font-size: 21rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
/* 操作列表 */
|
||||
.list-card {
|
||||
@include card;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18rpx;
|
||||
padding: 26rpx 24rpx;
|
||||
|
||||
& + & {
|
||||
border-top: 1rpx solid $color-divider;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $color-bg-page;
|
||||
}
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
@include icon-box(56rpx);
|
||||
}
|
||||
|
||||
.item-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 28rpx;
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
/* 退出 */
|
||||
.logout {
|
||||
@include card;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12rpx;
|
||||
background: linear-gradient(135deg, rgba(240, 68, 56, 0.08) 0%, rgba(240, 68, 56, 0.04) 100%);
|
||||
border: 1rpx solid rgba(240, 68, 56, 0.2);
|
||||
}
|
||||
|
||||
.logout-text {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: $color-danger;
|
||||
}
|
||||
|
||||
.bottom-space {
|
||||
height: 48rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="head">
|
||||
<view class="head-row" @tap="goBackNav">
|
||||
<FaIcon name="chevron-left" color="#1f2b48" :size="18" />
|
||||
<text class="head-back">返回导航</text>
|
||||
</view>
|
||||
<text class="head-title">{{ sub.title }} · 待办</text>
|
||||
<view class="kpi">
|
||||
<view class="kpi-item">
|
||||
<text class="kpi-value" :class="{ warn: overdue > 0 }">{{ pending.length }}</text>
|
||||
<text class="kpi-label">待处理</text>
|
||||
</view>
|
||||
<view class="kpi-item">
|
||||
<text class="kpi-value" :class="{ warn: overdue > 0 }">{{ overdue }}</text>
|
||||
<text class="kpi-label">已逾期</text>
|
||||
</view>
|
||||
<view class="kpi-item">
|
||||
<text class="kpi-value">{{ done }}</text>
|
||||
<text class="kpi-label">已完成</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="body">
|
||||
<view class="block-head">
|
||||
<text class="block-title">日程待办</text>
|
||||
<view class="block-more" @tap="goSchedules">
|
||||
<text class="block-more-text">全部日程</text>
|
||||
<FaIcon name="chevron-right" color="#8a94ad" :size="11" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list-card">
|
||||
<view v-if="pending.length === 0" class="empty-box">
|
||||
<FaIcon name="circle-check" color="#c0c4cc" :size="28" />
|
||||
<text class="empty-text">暂无待办事项</text>
|
||||
</view>
|
||||
<view v-for="item in pending" :key="item.id" class="list-item" @tap="goSchedules">
|
||||
<view class="dot" :class="{ warn: isOverdue(item) }" />
|
||||
<view class="list-body">
|
||||
<text class="list-title">{{ item.content || item.title || '日程' }}</text>
|
||||
<text class="list-time" :class="{ warn: isOverdue(item) }">{{ item.schedule_time }}</text>
|
||||
</view>
|
||||
<FaIcon name="chevron-right" color="#c8cfdf" :size="12" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom-space" />
|
||||
</view>
|
||||
|
||||
<AppTabbar :group="slug" current="todo" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import { isLoggedIn } from '@/utils/auth.js'
|
||||
import { request } from '@/api/request.js'
|
||||
import { useSubsystem } from '@/utils/subsystem.js'
|
||||
import AppTabbar from '@/components/AppTabbar.vue'
|
||||
|
||||
const props = defineProps({
|
||||
slug: { type: String, required: true }
|
||||
})
|
||||
|
||||
const { sub, loading, load } = useSubsystem(props.slug)
|
||||
const pending = ref([])
|
||||
const finished = ref([])
|
||||
|
||||
const overdue = computed(() => pending.value.filter((s) => isOverdue(s)).length)
|
||||
const done = computed(() => finished.value.length)
|
||||
|
||||
async function loadTodo() {
|
||||
try {
|
||||
const [p, f] = await Promise.all([
|
||||
request({ url: '/app/schedule/list', data: { status: 'pending', pageSize: 50 } }),
|
||||
request({ url: '/app/schedule/list', data: { status: 'done', pageSize: 50 } })
|
||||
])
|
||||
pending.value = (p && p.list) || []
|
||||
finished.value = (f && f.list) || []
|
||||
} catch (e) {
|
||||
pending.value = []
|
||||
finished.value = []
|
||||
}
|
||||
}
|
||||
|
||||
function isOverdue(item) {
|
||||
const t = String(item.schedule_time || item.created_at || '')
|
||||
return t.length >= 10 && t.slice(0, 10) < todayStr()
|
||||
}
|
||||
|
||||
function todayStr() {
|
||||
const d = new Date()
|
||||
const p = (n) => String(n).padStart(2, '0')
|
||||
return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate())
|
||||
}
|
||||
|
||||
function goBackNav() {
|
||||
uni.reLaunch({ url: '/pages/nav/nav' })
|
||||
}
|
||||
|
||||
function goSchedules() {
|
||||
uni.navigateTo({ url: '/pages/tools/schedule/index' })
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!isLoggedIn()) {
|
||||
uni.reLaunch({ url: '/pages/login/login' })
|
||||
return
|
||||
}
|
||||
load()
|
||||
loadTodo()
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
if (isLoggedIn() && !loading.value) loadTodo()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/src/styles/page-common.scss';
|
||||
|
||||
.page {
|
||||
@include page-shell;
|
||||
}
|
||||
|
||||
.head {
|
||||
flex-shrink: 0;
|
||||
padding: calc(var(--status-bar-height, 44px) + 20rpx) $page-padding-x 28rpx;
|
||||
background: $color-card;
|
||||
box-shadow: $shadow-header;
|
||||
}
|
||||
|
||||
.head-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
.head-back {
|
||||
font-size: 24rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.head-title {
|
||||
display: block;
|
||||
margin-top: 14rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
.kpi {
|
||||
display: flex;
|
||||
margin-top: 26rpx;
|
||||
padding: 24rpx 0;
|
||||
background: $color-bg-page;
|
||||
border-radius: $radius-md;
|
||||
}
|
||||
|
||||
.kpi-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
position: relative;
|
||||
|
||||
& + &::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4rpx;
|
||||
bottom: 4rpx;
|
||||
width: 1rpx;
|
||||
background: $color-border;
|
||||
}
|
||||
}
|
||||
|
||||
.kpi-value {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: $color-text;
|
||||
|
||||
&.warn {
|
||||
color: $color-danger;
|
||||
}
|
||||
}
|
||||
|
||||
.kpi-label {
|
||||
font-size: 21rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: 24rpx $page-padding-x 0;
|
||||
}
|
||||
|
||||
.block-head {
|
||||
@include block-head;
|
||||
}
|
||||
|
||||
.block-title {
|
||||
@include section-title;
|
||||
}
|
||||
|
||||
.block-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
.block-more-text {
|
||||
font-size: 24rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
padding: 60rpx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 14rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 25rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.list-card {
|
||||
@include card;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18rpx;
|
||||
padding: 26rpx 24rpx;
|
||||
|
||||
& + & {
|
||||
border-top: 1rpx solid $color-divider;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $color-bg-page;
|
||||
}
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
border-radius: 50%;
|
||||
background: $color-primary;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.warn {
|
||||
background: $color-danger;
|
||||
}
|
||||
}
|
||||
|
||||
.list-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: $color-text;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.list-time {
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
font-size: 22rpx;
|
||||
color: $color-text-muted;
|
||||
|
||||
&.warn {
|
||||
color: $color-danger;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-space {
|
||||
height: 40rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user