car-wash-java/admin-h5/src/App.vue

<template>
  <view>
    <slot></slot>
  </view>
</template>

<script setup>
import { onLaunch } from '@dcloudio/uni-app'
import { loadDicts } from './utils/dict.js'
import { storage } from './utils/index.js'

// 应用启动时执行
onLaunch(() => {
  console.log('App launched')
  // 如果已有登录token，预加载字典数据
  if (storage.get('token')) {
    loadDicts()
  }
})
</script>

<style lang="scss">
/* 全局样式 — Soft UI Evolution */
@import './uni.scss';

page {
  font-family: $uni-font-family;
  font-size: $uni-font-size-base;
  line-height: $uni-line-height-base;
  color: $uni-text-color;
  background-color: $uni-page-bg-color;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: text;
  user-select: text;
  /* App 体验：去除点击高亮，抑制边缘过度滚动 */
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* 全局启用文本选择，uni-app H5 模式下默认不可选中 */
text {
  -webkit-user-select: text;
  user-select: text;
}

/* ===== Global Keyframes ===== */
@keyframes app-spin {
  to { transform: rotate(360deg); }
}

/* ===== Motion Library — 全局动效关键帧库 ===== */
@keyframes app-fade-up {
  from { opacity: 0; transform: translateY(24rpx); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes app-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes app-pop {
  0%   { transform: scale(0.55); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes app-slide-in-right {
  from { opacity: 0; transform: translateX(48rpx); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes app-shimmer {
  from { background-position: -400rpx 0; }
  to   { background-position: 400rpx 0; }
}

/* 页面进入过渡：仅 opacity，避免 transform 生成 containing block 影响 fixed 子元素（TabBar/悬浮按钮） */
page {
  animation: app-fade-in $uni-duration-enter $uni-ease-decelerate;
}

/* 带底部导航的页面不做整页淡入：底部导航是 fixed 定位于页面内，整页淡入会让导航栏在切换 Tab 时一起闪一下 */
page:has(.tab-bar) {
  animation: none;
}

/* 入场工具类：页面内元素可主动挂载 */
.fade-up { animation: app-fade-up $uni-duration-motion $uni-ease-out-quint backwards; }
.fade-in { animation: app-fade-in $uni-duration-enter $uni-ease-decelerate backwards; }
.pop-in  { animation: app-pop $uni-duration-enter $uni-ease-spring backwards; }

/* ===== Skeleton Shimmer (通用骨架屏微光) ===== */
.skeleton-shimmer {
  background: linear-gradient(90deg, #ECEFF3 25%, #F7F9FB 37%, #ECEFF3 63%);
  background-size: 800rpx 100%;
  animation: app-shimmer 1.4s linear infinite;
}

/* ===== Loading Spinner (unified CSS, replaces emoji 🔄) ===== */
.loading-spinner {
  width: 64rpx;
  height: 64rpx;
  border: 4rpx solid rgba(198, 23, 30, 0.1);
  border-top-color: $uni-color-primary;
  border-radius: 50%;
  animation: app-spin 0.8s linear infinite;
}

/* ===== Loading State Container ===== */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}
.loading-text {
  font-size: $uni-font-size-sm;
  color: $uni-text-color-light;
  margin-top: 20rpx;
}

/* ===== Empty State ===== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}
.empty-icon-wrapper {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24rpx;
}
.empty-text {
  font-size: 28rpx;
  color: $uni-text-color-light;
  margin-bottom: 32rpx;
}
.empty-refresh-btn {
  padding: 16rpx 48rpx;
  background: $uni-color-primary;
  color: #FFFFFF;
  border: none;
  border-radius: $uni-border-radius-sm;
  font-size: $uni-font-size-sm;
  font-weight: $uni-font-weight-medium;
  transition: all $uni-transition-duration-base $uni-transition-timing;
}
.empty-refresh-btn:active {
  transform: translateY(1px);
}

/* ===== Tab Bar ===== */
.uni-tabbar {
  --tabbar-height: 50px;
  --tabbar-bg-color: #FFFFFF;
  --tabbar-border-color: #E0E0E0;
  --tabbar-item-active-color: #C6171E;
  --tabbar-item-color: #999999;
  --tabbar-item-font-size: 14px;
  --tabbar-item-icon-size: 24px;
  --tabbar-item-spacing: 4px;
}
.uni-tabbar__item:active {
  transform: scale(0.95);
  transition: transform $uni-transition-duration-fast $uni-transition-timing;
}
.uni-tabbar__item-icon { font-size: var(--tabbar-item-icon-size); }
.uni-tabbar__item-text {
  font-size: var(--tabbar-item-font-size);
  margin-top: var(--tabbar-item-spacing);
}

/* ===== Flex Utilities ===== */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-just-between { display: flex; align-items: center; justify-content: space-between; }
.flex-column { display: flex; flex-direction: column; }

/* ===== Container ===== */
.container {
  width: 100%;
  padding: 0 $uni-spacing-base;
}

/* ===== Card (Soft UI Evolution standard) ===== */
.card {
  background-color: $uni-card-bg-color;
  border-radius: $uni-border-radius-md;
  box-shadow: $uni-box-shadow-base;
  padding: $uni-spacing-base;
  transition: all $uni-transition-duration-base $uni-transition-timing;
  /* 卡片交错入场：backwards 填充，动画结束后不锁定 transform，:active 反馈不受影响 */
  animation: app-fade-up $uni-duration-motion $uni-ease-out-quint backwards;
}
.card:nth-child(1) { animation-delay: 0.02s; }
.card:nth-child(2) { animation-delay: 0.07s; }
.card:nth-child(3) { animation-delay: 0.12s; }
.card:nth-child(4) { animation-delay: 0.17s; }
.card:nth-child(5) { animation-delay: 0.22s; }
.card:nth-child(6) { animation-delay: 0.27s; }
.card:nth-child(7) { animation-delay: 0.32s; }
.card:nth-child(8) { animation-delay: 0.37s; }
.card:active {
  transform: translateY(-2px);
  box-shadow: $uni-box-shadow-lg;
}

/* ===== Buttons (Soft UI) ===== */
.btn-primary {
  background-color: $uni-color-primary;
  color: #FFFFFF;
  border: none;
  border-radius: $uni-border-radius-sm;
  padding: 12px 24px;
  font-size: $uni-font-size-sm;
  font-weight: $uni-font-weight-semibold;
  box-shadow: $uni-box-shadow-sm;
  transition: all $uni-transition-duration-base $uni-transition-timing;
}
.btn-primary:active {
  transform: scale(0.97);
  box-shadow: none;
}
.btn-primary:disabled {
  opacity: 0.5;
  box-shadow: none;
}

.btn-secondary {
  background-color: $uni-bg-color;
  color: $uni-text-color;
  border: 1px solid $uni-border-color;
  border-radius: $uni-border-radius-sm;
  padding: 12px 24px;
  font-size: $uni-font-size-sm;
  font-weight: $uni-font-weight-medium;
  transition: all $uni-transition-duration-base $uni-transition-timing;
}
.btn-secondary:active {
  transform: scale(0.97);
  background-color: $uni-page-bg-color;
}

/* ===== Status Tags (pill shape) ===== */
.status-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: $uni-border-radius-pill;
  font-size: $uni-font-size-xs;
  font-weight: $uni-font-weight-medium;
}
.status-tag-success {
  background-color: rgba(76, 175, 80, 0.1);
  color: $uni-color-success;
}
.status-tag-warning {
  background-color: rgba(255, 152, 0, 0.1);
  color: $uni-color-warning;
}
.status-tag-error {
  background-color: rgba(244, 67, 54, 0.1);
  color: $uni-color-error;
}
.status-tag-info {
  background-color: rgba(33, 150, 243, 0.1);
  color: $uni-color-info;
}

/* ===== Form Input (Soft UI standard) ===== */
.input-field {
  width: 100%;
  padding: 16rpx 20rpx;
  background: $uni-page-bg-color;
  border: 2rpx solid $uni-border-color;
  border-radius: $uni-border-radius-sm;
  font-size: $uni-font-size-sm;
  color: $uni-text-color;
  transition: border-color $uni-transition-duration-base $uni-transition-timing,
              box-shadow $uni-transition-duration-base $uni-transition-timing;
  box-sizing: border-box;
}
.input-field:focus {
  border-color: $uni-color-primary;
  box-shadow: $uni-focus-ring;
  background: #FFFFFF;
  outline: none;
}
.input-field::placeholder {
  color: $uni-text-color-placeholder;
}
</style>