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;
}

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

/* ===== 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;
}
.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: translateY(1px);
  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 {
  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>