luo/gt-agent-company
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ui
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 1m4s
Details

Browse Source
This commit is contained in:
sexygoat
2026-04-25 15:00:56 +08:00
parent daa3d7ec8f
commit 398d5494c8
1 changed files with 625 additions and 682 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/pages/agent-system/assets/index.vue
View File

@@ -397,9 +397,6 @@ function changeTab(tab: 'card' | 'device') {
if (activeTab.value === tab) return
activeTab.value = tab
searchKeyword.value = ''
carrierFilter.value = undefined
statusFilter.value = undefined
// 切换后加载对应数据
if (tab === 'card' && cardList.value.length === 0) {
@@ -576,31 +573,21 @@ onMounted(async () => {
</script>
<template>
<view class="bg-page safe-area-bottom min-h-screen flex flex-col">
<view class="bg-page min-h-screen">
<!-- 搜索区域 -->
<view class="bg-white px-4 pt-4 pb-3 mb-3">
<view class="bg-white px-4 pb-3 mb-3 fixed top-0 left-0 right-0 z-50"
style="padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top);">
<!-- 搜索框 -->
<view class="relative flex items-center">
<input
v-model="searchKeyword"
<input v-model="searchKeyword"
class="flex-1 h-10 bg-[#f1f5f9] rounded-full pl-4 pr-12 text-sm text-[#1e293b] placeholder-[#94a3b8]"
:placeholder="searchType === 'iccid' ? '搜索ICCID' : '搜索虚拟号'"
@confirm="refreshList"
/>
<view
class="absolute right-1 flex items-center"
>
<view
v-if="searchKeyword"
class="w-8 h-8 flex items-center justify-center text-[#94a3b8]"
@click="searchKeyword = ''"
>
:placeholder="searchType === 'iccid' ? '搜索ICCID' : '搜索虚拟号'" @confirm="refreshList" />
<view class="absolute right-1 flex items-center">
<view v-if="searchKeyword" class="w-8 h-8 flex items-center justify-center text-[#94a3b8]"
@click="searchKeyword = ''">
<i class="i-mdi-close-circle text-lg" />
</view>
<view
class="w-8 h-8 flex items-center justify-center text-brand"
@click="refreshList"
>
<view class="w-8 h-8 flex items-center justify-center text-brand" @click="refreshList">
<i class="i-mdi-magnify text-xl" />
</view>
</view>
@@ -610,97 +597,73 @@ onMounted(async () => {
<view class="flex items-center gap-2 mt-3 flex-wrap">
<view class="flex bg-[#f1f5f9] rounded-full flex-shrink-0">
<view
class="px-3 py-1.5 text-12px font-medium transition-all rounded-full"
:class="activeTab === 'card' ? 'bg-brand text-white' : 'text-[#64748b]'"
@click="changeTab('card')"
>
<view class="px-3 py-1.5 text-12px font-medium transition-all rounded-full"
:class="activeTab === 'card' ? 'bg-brand text-white' : 'text-[#64748b]'" @click="changeTab('card')">
IoT卡
</view>
<view
class="px-3 py-1.5 text-12px font-medium transition-all rounded-full"
:class="activeTab === 'device' ? 'bg-brand text-white' : 'text-[#64748b]'"
@click="changeTab('device')"
>
<view class="px-3 py-1.5 text-12px font-medium transition-all rounded-full"
:class="activeTab === 'device' ? 'bg-brand text-white' : 'text-[#64748b]'" @click="changeTab('device')">
设备
</view>
</view>
<view
class="flex items-center gap-1 px-3 py-1.5 bg-[#f8fafc] rounded-full flex-shrink-0"
@click="showSearchTypePicker = true"
>
<view class="flex items-center gap-1 px-3 py-1.5 bg-[#f8fafc] rounded-full flex-shrink-0"
@click="showSearchTypePicker = true">
<text class="text-12px" :class="searchType !== 'iccid' ? 'text-brand font-medium' : 'text-[#64748b]'">
{{ searchType === 'iccid' ? 'ICCID' : '虚拟号' }}
</text>
<i class="i-mdi-chevron-down text-12px text-[#94a3b8]" />
</view>
<view
class="flex items-center gap-1.5 px-3 py-1.5 bg-[#f8fafc] rounded-full flex-shrink-0 max-w-36"
@click="showCarrierPicker = true"
>
<text class="text-12px truncate" :class="carrierFilter !== undefined ? 'text-brand font-medium' : 'text-[#64748b]'">
<view class="flex items-center gap-1.5 px-3 py-1.5 bg-[#f8fafc] rounded-full flex-shrink-0 max-w-36"
@click="showCarrierPicker = true">
<text class="text-12px truncate"
:class="carrierFilter !== undefined ? 'text-brand font-medium' : 'text-[#64748b]'">
{{ selectedCarrierName }}
</text>
<i class="i-mdi-chevron-down text-12px text-[#94a3b8] flex-shrink-0" />
</view>
<view
class="flex items-center gap-1.5 px-3 py-1.5 bg-[#f8fafc] rounded-full flex-shrink-0"
@click="showStatusPicker = true"
>
<view class="flex items-center gap-1.5 px-3 py-1.5 bg-[#f8fafc] rounded-full flex-shrink-0"
@click="showStatusPicker = true">
<text class="text-12px" :class="statusFilter !== undefined ? 'text-brand font-medium' : 'text-[#64748b]'">
{{ selectedStatusName }}
</text>
<i class="i-mdi-chevron-down text-12px text-[#94a3b8]" />
</view>
<view
v-if="carrierFilter !== undefined || statusFilter !== undefined"
<view v-if="carrierFilter !== undefined || statusFilter !== undefined"
class="flex items-center gap-1 px-2 py-1.5 rounded-full bg-[#ff4d4f]/10 text-[#ff4d4f] flex-shrink-0"
@click="carrierFilter = undefined; statusFilter = undefined; refreshList()"
>
@click="carrierFilter = undefined; statusFilter = undefined; refreshList()">
<i class="i-mdi-close text-12px" />
<text class="text-12px font-medium">清除</text>
</view>
</view>
</view>
<!-- 列表内容区域 -->
<view class="safe-area-bottom min-h-screen flex flex-col pt-28">
<!-- 加载状态 -->
<Skeleton v-if="loading && assetList.length === 0" type="list" />
<!-- 资产列表 -->
<view
v-else
class="flex-1 overflow-y-auto min-h-0"
@scroll="onScroll"
>
<view v-else class="flex-1 overflow-y-auto min-h-0" @scroll="onScroll">
<view v-if="assetList.length > 0" class="px-4 pb-4">
<view
v-for="asset in assetList"
:key="`${asset.type}-${asset.id}`"
<view v-for="asset in assetList" :key="`${asset.type}-${asset.id}`"
class="bg-white rounded-16px shadow-[0_2px_12px_rgba(0,0,0,0.06)] p-4 mb-3 cursor-pointer"
@click="viewAssetDetail(asset)"
>
@click="viewAssetDetail(asset)">
<!-- 顶部区域：左侧状态+名称，右侧类型标签 -->
<view class="flex items-start justify-between mb-3">
<view class="flex items-center gap-2 flex-1 min-w-0">
<view
class="w-2 h-2 rounded-full mt-1 flex-shrink-0"
:style="{ backgroundColor: asset.statusColor }"
/>
<view class="w-2 h-2 rounded-full mt-1 flex-shrink-0" :style="{ backgroundColor: asset.statusColor }" />
<text class="text-15px font-600 text-[#212121] truncate">
{{ asset.name }}
</text>
</view>
<view
class="px-2 py-1 rounded-6px text-11px font-500 flex-shrink-0 ml-2"
:style="{
<view class="px-2 py-1 rounded-6px text-11px font-500 flex-shrink-0 ml-2" :style="{
backgroundColor: asset.type === 'card' ? '#e6f4ff' : '#f5f5f5',
color: asset.type === 'card' ? 'var(--brand-primary)' : '#666',
}"
>
}">
{{ asset.type === 'card' ? 'IoT卡' : '设备' }}
</view>
</view>
@@ -715,10 +678,7 @@ onMounted(async () => {
<!-- 底部区域：状态标签 + 操作按钮 -->
<view class="flex items-center justify-between pt-3 border-t border-[#f5f5f5]">
<view class="flex items-center gap-1">
<view
class="w-1.5 h-1.5 rounded-full"
:style="{ backgroundColor: asset.statusColor }"
/>
<view class="w-1.5 h-1.5 rounded-full" :style="{ backgroundColor: asset.statusColor }" />
<text class="text-13px font-500" :style="{ color: asset.statusColor }">
{{ asset.status }}
</text>
@@ -730,30 +690,26 @@ onMounted(async () => {
<template v-if="(asset.raw as CardInfo).network_status === 0">
<view
class="px-3 py-1.5 rounded-10px text-12px font-medium bg-[#52c41a] text-white shadow-sm shadow-[#52c41a]/30 active:scale-95 transition-transform"
@click="handleStartCard(asset, $event)"
>
@click="handleStartCard(asset, $event)">
复机
</view>
</template>
<template v-else-if="(asset.raw as CardInfo).network_status === 1">
<view
class="px-3 py-1.5 rounded-10px text-12px font-medium bg-[#ff4d4f] text-white shadow-sm shadow-[#ff4d4f]/30 active:scale-95 transition-transform"
@click="handleStopCard(asset, $event)"
>
@click="handleStopCard(asset, $event)">
停机
</view>
</template>
<template v-else>
<view
class="px-3 py-1.5 rounded-10px text-12px font-medium bg-[#ff4d4f] text-white shadow-sm shadow-[#ff4d4f]/30 active:scale-95 transition-transform"
@click="handleStopCard(asset, $event)"
>
@click="handleStopCard(asset, $event)">
停机
</view>
<view
class="px-3 py-1.5 rounded-10px text-12px font-medium bg-[#52c41a] text-white shadow-sm shadow-[#52c41a]/30 active:scale-95 transition-transform"
@click="handleStartCard(asset, $event)"
>
@click="handleStartCard(asset, $event)">
复机
</view>
</template>
@@ -763,14 +719,12 @@ onMounted(async () => {
<template v-else>
<view
class="px-3 py-1.5 rounded-10px text-12px font-medium bg-[#ff4d4f] text-white shadow-sm shadow-[#ff4d4f]/30 active:scale-95 transition-transform"
@click="handleStopDevice(asset, $event)"
>
@click="handleStopDevice(asset, $event)">
停机
</view>
<view
class="px-3 py-1.5 rounded-10px text-12px font-medium bg-[#52c41a] text-white shadow-sm shadow-[#52c41a]/30 active:scale-95 transition-transform"
@click="handleStartDevice(asset, $event)"
>
@click="handleStartDevice(asset, $event)">
复机
</view>
</template>
@@ -785,7 +739,8 @@ onMounted(async () => {
<i class="i-mdi-loading animate-spin text-xl text-brand mr-2" />
<text class="text-sm text-[#64748b]">加载中...</text>
</view>
<view v-else-if="!((activeTab === 'card' && cardHasMore) || (activeTab === 'device' && deviceHasMore))" class="py-4 text-center">
<view v-else-if="!((activeTab === 'card' && cardHasMore) || (activeTab === 'device' && deviceHasMore))"
class="py-4 text-center">
<text class="text-sm text-[#94a3b8]">没有更多了</text>
</view>
</view>
@@ -801,27 +756,15 @@ onMounted(async () => {
</view>
<!-- 运营商选择器 -->
<SimplePicker
v-model:show="showCarrierPicker"
:options="carrierOptions"
title="选择运营商"
@confirm="onCarrierConfirm"
/>
<SimplePicker v-model:show="showCarrierPicker" :options="carrierOptions" title="选择运营商"
@confirm="onCarrierConfirm" />
<!-- 状态选择器 -->
<SimplePicker
v-model:show="showStatusPicker"
:options="statusOptions"
title="选择状态"
@confirm="onStatusConfirm"
/>
<SimplePicker v-model:show="showStatusPicker" :options="statusOptions" title="选择状态" @confirm="onStatusConfirm" />
<!-- 搜索类型选择器 -->
<SimplePicker
v-model:show="showSearchTypePicker"
:options="searchTypeOptions"
title="选择搜索类型"
@confirm="onSearchTypeConfirm"
/>
<SimplePicker v-model:show="showSearchTypePicker" :options="searchTypeOptions" title="选择搜索类型"
@confirm="onSearchTypeConfirm" />
</view>
</view>
</template>