OmniCard/mpuniapp/pages/owner/radar.uvue

<template>
  <view class="radar-page" :style="pageTheme">
    <view class="radar-header">
      <text class="radar-title">{{ pageTitle }}</text>
      <text class="radar-desc">{{ pageDesc }}</text>

      <view class="field">
        <text class="field-label">{{ t('cardIdLabel') }}</text>
        <input
          class="field-input"
          type="number"
          v-model="state.cardIdRaw"
          :placeholder="t('cardIdPlaceholder')"
          :disabled="state.loading"
        />
      </view>
    </view>

    <list-view class="radar-list">
      <list-item v-if="state.empty" class="radar-empty-item">
        <view class="radar-empty">
          <text class="radar-empty-text">{{ emptyLine }}</text>
        </view>
      </list-item>
      <list-item v-for="item in state.tracks" :key="item.id" class="radar-row-item">
        <view class="radar-row">
          <text class="radar-place">{{ formatLocation(item.country, item.city) }}</text>
          <text class="radar-touch">{{ item.touchType }}</text>
          <view class="radar-metrics">
            <text class="radar-metric">{{ t('stay') }} {{ formatStay(item.stayDurationMs) }}</text>
            <text class="radar-metric">{{ t('depth') }} {{ formatDepth(item.scrollDepth) }}</text>
          </view>
        </view>
      </list-item>
    </list-view>

    <view class="radar-cta-bar">
      <button
        class="primary-cta-btn"
        :class="{ 'primary-cta-btn-disabled': state.loading }"
        :disabled="state.loading"
        @click="handleRefresh"
      >
        <text class="primary-cta-btn-text">{{ t('refresh') }}</text>
      </button>
    </view>
  </view>
</template>

<script setup lang="uts">
import { getCurrentLocale, getOmniText } from '../../common/locale.uts';
import { utsLightColors, utsRadius, utsSpacing } from '../../common/tokens.uts';
import {
  applyRadarOptions,
  createRadarState,
  formatDepth,
  formatLocation,
  formatStay,
  refreshTracks,
  resolveRadarText,
  RadarCopyKey,
  RadarPageOptions,
} from './useRadar.uts';

const pageTheme: Record<string, string> = {
  '--oc-primary': utsLightColors.primary,
  '--oc-primary-soft': utsLightColors.primarySoft,
  '--oc-bg': utsLightColors.bg,
  '--oc-surface': utsLightColors.surface,
  '--oc-border': utsLightColors.border,
  '--oc-text': utsLightColors.text,
  '--oc-text-2': utsLightColors.text2,
  '--oc-radius-btn': utsRadius.button,
  '--oc-radius-card': utsRadius.card,
  '--oc-space-8': utsSpacing.space8,
  '--oc-space-12': utsSpacing.space12,
  '--oc-space-16': utsSpacing.space16,
  '--oc-space-24': utsSpacing.space24,
};

const state = reactive(createRadarState());
const pageTitle = ref(getOmniText(getCurrentLocale(), 'radar.online_visitor'));
const pageDesc = ref(getOmniText(getCurrentLocale(), 'radar.visitor_trace'));

const emptyLine = computed((): string => {
  if (state.errorMessage !== '') {
    return state.errorMessage;
  }
  return resolveRadarText('empty');
});

function t(key: RadarCopyKey): string {
  return resolveRadarText(key);
}

function handleRefresh(): void {
  refreshTracks(state);
}

onLoad((options: RadarPageOptions) => {
  applyRadarOptions(state, options);
  refreshTracks(state);
});

onShow(() => {
  refreshTracks(state);
});
</script>

<style scoped>
.radar-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--oc-surface, #F7F8FA);
}

.radar-header {
  padding-inline: var(--oc-space-16, 16px);
  padding-block-start: var(--oc-space-16, 16px);
  padding-block-end: var(--oc-space-8, 8px);
}

.radar-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--oc-text, #101828);
  margin-bottom: var(--oc-space-8, 8px);
  line-height: 1.25;
}

.radar-desc {
  font-size: 14px;
  color: var(--oc-text-2, #667085);
  line-height: 1.6;
  margin-bottom: var(--oc-space-16, 16px);
}

.field {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--oc-space-12, 12px);
}

.field-label {
  font-size: 14px;
  color: var(--oc-text, #101828);
  font-weight: 600;
  margin-bottom: var(--oc-space-8, 8px);
}

.field-input {
  height: 44px;
  min-height: 44px;
  padding-inline: 12px;
  background-color: var(--oc-bg, #FFFFFF);
  border: 1px solid var(--oc-border, #E3E7ED);
  border-radius: var(--oc-radius-btn, 12px);
  font-size: 16px;
  color: var(--oc-text, #101828);
}

.radar-list {
  flex: 1;
  padding-inline: var(--oc-space-16, 16px);
}

.radar-empty-item {
  padding-block: var(--oc-space-24, 24px);
}

.radar-empty {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.radar-empty-text {
  font-size: 14px;
  color: var(--oc-text-2, #667085);
  line-height: 1.6;
}

.radar-row-item {
  margin-bottom: var(--oc-space-12, 12px);
}

.radar-row {
  background-color: var(--oc-bg, #FFFFFF);
  border: 1px solid var(--oc-border, #E3E7ED);
  border-radius: var(--oc-radius-card, 16px);
  padding: var(--oc-space-16, 16px);
  display: flex;
  flex-direction: column;
  min-height: 44px;
}

.radar-place {
  font-size: 16px;
  font-weight: 600;
  color: var(--oc-text, #101828);
  line-height: 1.25;
  margin-bottom: var(--oc-space-8, 8px);
}

.radar-touch {
  font-size: 14px;
  color: var(--oc-text-2, #667085);
  line-height: 1.6;
  margin-bottom: var(--oc-space-8, 8px);
}

.radar-metrics {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.radar-metric {
  font-size: 14px;
  color: var(--oc-text-2, #667085);
  line-height: 1.6;
}

.radar-cta-bar {
  padding: 12px var(--oc-space-16, 16px) calc(12px + var(--window-bottom, 0px) + env(safe-area-inset-bottom, 0px)) var(--oc-space-16, 16px);
  background-color: var(--oc-bg, #FFFFFF);
  border-top: 1px solid var(--oc-border, #E3E7ED);
  box-sizing: border-box;
}

.primary-cta-btn {
  height: 48px;
  min-height: 44px;
  background-color: var(--oc-primary, #0B5CFF);
  border-radius: var(--oc-radius-btn, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-width: 0;
  transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.primary-cta-btn:active {
  opacity: 0.85;
}

.primary-cta-btn-disabled {
  background-color: var(--oc-border, #E3E7ED);
}

.primary-cta-btn-text {
  color: var(--oc-bg, #FFFFFF);
  font-size: 15px;
  font-weight: 600;
}

.primary-cta-btn-disabled .primary-cta-btn-text {
  color: var(--oc-text-2, #667085);
}
</style>