client-web/src/modules/dashboard/views/DashboardView.vue

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  AlertTriangle,
  ArrowRight,
  CircleQuestionMark,
  Headphones,
  Lightbulb,
  PanelsTopLeft,
  ShoppingCart,
  Tags,
  Truck,
} from '@lucide/vue'
import { useFirstLegOrdersStore } from '@/modules/first-leg/public'
import { useTenantAdministrationStore } from '@/modules/tenant-management/public'
import { useAuthStore } from '@/modules/auth/public'

const router = useRouter()
const orders = useFirstLegOrdersStore()
const tenant = useTenantAdministrationStore()
const auth = useAuthStore()
const loading = ref(false)
type DashboardDataSource = 'company' | 'members' | 'orders'
const loadErrors = ref<Partial<Record<DashboardDataSource, string>>>({})
const dataSourceLabels: Record<DashboardDataSource, string> = {
  company: '企业资料',
  members: '企业成员',
  orders: '头程订单',
}

const companyUnavailable = computed(() => Boolean(loadErrors.value.company))
const ordersUnavailable = computed(() => Boolean(loadErrors.value.orders))
const loadErrorItems = computed(() =>
  (Object.keys(loadErrors.value) as DashboardDataSource[]).map((key) => ({
    key,
    label: dataSourceLabels[key],
    message: loadErrors.value[key] ?? '请求失败',
  })),
)
const canViewOrders = computed(() => auth.hasPermission('order:first-leg:list'))
const canCreateOrders = computed(() => auth.hasPermission('order:first-leg:create'))
const accountName = computed(() => {
  if (!companyUnavailable.value && tenant.company.companyName) return tenant.company.companyName
  return auth.user?.tenantName || auth.user?.name || '企业客户'
})
const accountInitial = computed(() => accountName.value.trim().slice(0, 1).toUpperCase() || 'C')
const completedOrderCount = computed(() => orders.orders.filter((order) => order.status === 'COMPLETED').length)
const currentMonthOrderCount = computed(() => {
  const now = new Date()
  return orders.orders.filter((order) => {
    const createdAt = new Date(order.createdAt)
    return !Number.isNaN(createdAt.getTime())
      && createdAt.getFullYear() === now.getFullYear()
      && createdAt.getMonth() === now.getMonth()
  }).length
})
const overviewStats = computed(() => [
  { label: '进行中订单', value: dashboardOrderValue(orders.activeCount) },
  { label: '已完成订单', value: dashboardOrderValue(completedOrderCount.value) },
  { label: '本月下单', value: dashboardOrderValue(currentMonthOrderCount.value) },
])
const businessCards = [
  {
    title: '海外采购',
    description: '采购代购 · 验货质检 · 集中发货',
    icon: ShoppingCart,
    tone: 'blue',
  },
  {
    title: '美国本土卡',
    description: '港口提柜 · 仓到仓 · 仓到门',
    icon: Truck,
    tone: 'green',
  },
  {
    title: '美本土散板',
    description: '拼车拼载 · 打盘服务 · 灵活派送',
    icon: PanelsTopLeft,
    tone: 'teal',
  },
] as const

function dashboardOrderValue(value: number) {
  if (!canViewOrders.value || ordersUnavailable.value) return '—'
  return String(value)
}

function errorMessage(error: unknown) {
  return error instanceof Error ? error.message : '请求失败，请稍后重试'
}

async function loadDashboardData() {
  loading.value = true
  loadErrors.value = {}
  const requests: Array<{ source: DashboardDataSource; request: Promise<unknown> }> = []
  if (auth.hasPermission('company:profile:view')) requests.push({ source: 'company', request: tenant.loadCompanyContext() })
  if (auth.hasPermission('company:member:list')) requests.push({ source: 'members', request: tenant.loadMembers() })
  if (auth.hasPermission('order:first-leg:list')) requests.push({ source: 'orders', request: orders.load() })
  try {
    const results = await Promise.allSettled(requests.map(({ request }) => request))
    const nextErrors: Partial<Record<DashboardDataSource, string>> = {}
    results.forEach((result, index) => {
      const request = requests[index]
      if (request && result.status === 'rejected') nextErrors[request.source] = errorMessage(result.reason)
    })
    loadErrors.value = nextErrors
  } finally {
    loading.value = false
  }
}

function openBusinessOrder() {
  if (canCreateOrders.value) {
    void router.push('/orders/first-leg/create')
    return
  }
  if (canViewOrders.value) {
    void router.push('/orders/first-leg')
    return
  }
  ElMessage.warning('当前账号暂无头程订单权限，请联系企业管理员。')
}

function showSupportMessage(type: 'service' | 'faq' | 'quote') {
  const messages = {
    service: '客服联系方式正在配置中，请联系您的专属客户经理。',
    faq: '常见问题页面即将上线。',
    quote: '提交订单后，客户经理将根据货物信息为您提供报价。',
  }
  ElMessage.info(messages[type])
}

onMounted(() => void loadDashboardData())
</script>

<template>
  <div v-loading="loading" class="client-dashboard" :aria-busy="loading">
    <div v-if="loadErrorItems.length" class="dashboard-load-error" role="alert">
      <AlertTriangle :size="20" aria-hidden="true" />
      <div>
        <strong>部分业务数据加载失败</strong>
        <ul>
          <li v-for="item in loadErrorItems" :key="item.key">
            <span>{{ item.label }}：</span>{{ item.message }}
          </li>
        </ul>
      </div>
      <el-button :loading="loading" @click="loadDashboardData">重新加载</el-button>
    </div>

    <div class="dashboard-layout">
      <main class="dashboard-business" aria-labelledby="dashboard-heading">
        <header class="dashboard-intro">
          <h2 id="dashboard-heading">选择业务，快速下单</h2>
          <p>请选择您需要的业务类型，填写信息后提交订单，我们将尽快为您安排。</p>
        </header>

        <section class="business-card-grid" aria-label="可选业务">
          <button
            v-for="business in businessCards"
            :key="business.title"
            type="button"
            class="business-card"
            :class="`business-card--${business.tone}`"
            @click="openBusinessOrder"
          >
            <span class="business-card__icon" aria-hidden="true">
              <component :is="business.icon" :size="29" :stroke-width="2.4" />
            </span>
            <span class="business-card__copy">
              <strong>{{ business.title }}</strong>
              <small>{{ business.description }}</small>
            </span>
            <span class="business-card__action">
              {{ canCreateOrders ? '开始下单' : canViewOrders ? '查看订单' : '暂无权限' }}
              <ArrowRight :size="18" aria-hidden="true" />
            </span>
          </button>
        </section>
      </main>

      <aside class="dashboard-aside" aria-label="账户与业务信息">
        <section class="aside-card account-card">
          <h3>账户信息</h3>
          <div class="account-summary">
            <span class="account-avatar">{{ accountInitial }}</span>
            <span class="account-copy">
              <strong>{{ accountName }}</strong>
              <small>企业客户</small>
            </span>
          </div>
          <p v-if="companyUnavailable" class="account-load-error" role="status">企业资料暂不可用，请重新加载后查看。</p>
        </section>

        <section class="aside-card">
          <h3>数据概览</h3>
          <dl class="overview-stats">
            <div v-for="stat in overviewStats" :key="stat.label">
              <dt>{{ stat.label }}</dt>
              <dd>{{ stat.value }}</dd>
            </div>
          </dl>
          <p v-if="ordersUnavailable" class="dashboard-section-error" role="status">订单数据暂不可用，请重新加载后查看。</p>
        </section>

        <section class="aside-card">
          <h3>帮助与支持</h3>
          <div class="support-links">
            <button type="button" @click="showSupportMessage('service')"><Headphones :size="19" /><span>联系客服</span></button>
            <button type="button" @click="showSupportMessage('faq')"><CircleQuestionMark :size="19" /><span>常见问题</span></button>
            <button type="button" @click="showSupportMessage('quote')"><Tags :size="19" /><span>获取报价</span></button>
          </div>
        </section>

        <div class="dashboard-tip">
          <Lightbulb :size="19" aria-hidden="true" />
          <p>提交订单后，专属客户经理将在 24 小时内与您联系，确认运输方案与报价。</p>
        </div>
      </aside>
    </div>
  </div>
</template>

<style scoped>
.client-dashboard {
  --dashboard-blue: #1565c0;
  --dashboard-green: #3f9f47;
  --dashboard-teal: #078a99;
  display: block;
  min-height: calc(100vh - 128px);
}

.dashboard-load-error {
  margin-bottom: 20px;
}

.dashboard-load-error ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dashboard-load-error li {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.dashboard-load-error li span {
  color: #9a5a09;
  font-weight: 650;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 286px;
  gap: clamp(24px, 3vw, 42px);
  align-items: start;
}

.dashboard-business {
  min-width: 0;
  padding: 14px 0 24px;
}

.dashboard-intro {
  margin-bottom: 34px;
}

.dashboard-intro h2 {
  max-width: 720px;
  margin: 0;
  color: #111827;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.18;
  letter-spacing: -.025em;
}

.dashboard-intro p {
  max-width: 720px;
  margin: 16px 0 0;
  color: #697586;
  font-size: 15px;
  line-height: 1.7;
}

.business-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.business-card {
  --card-accent: var(--dashboard-blue);
  display: flex;
  min-width: 0;
  min-height: 286px;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 36px rgba(23, 50, 77, .08);
  color: #111827;
  cursor: pointer;
  text-align: left;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s cubic-bezier(.16, 1, .3, 1);
}

.business-card--green { --card-accent: var(--dashboard-green); }
.business-card--teal { --card-accent: var(--dashboard-teal); }

.business-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 46px rgba(23, 50, 77, .14);
}

.business-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--card-accent) 36%, white);
  outline-offset: 4px;
}

.business-card__icon {
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border-radius: 16px;
  background: var(--card-accent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--card-accent) 24%, transparent);
  color: #fff;
}

.business-card__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
  margin-top: 34px;
}

.business-card__copy strong {
  font-size: 22px;
  line-height: 1.35;
}

.business-card__copy small {
  color: #697586;
  font-size: 14px;
  line-height: 1.65;
}

.business-card__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 28px;
  color: var(--card-accent);
  font-size: 14px;
  font-weight: 700;
}

.business-card__action svg {
  transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}

.business-card:hover .business-card__action svg {
  transform: translateX(3px);
}

.dashboard-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aside-card {
  padding: 20px;
  border: 1px solid #e9eef5;
  border-radius: 14px;
  background: #f8fafc;
}

.aside-card h3 {
  margin: 0 0 18px;
  color: #8b9bb2;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .06em;
}

.account-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

.account-avatar {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #1976d2, #00a993);
  color: #fff;
  font-size: 20px;
  font-weight: 750;
}

.account-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.account-copy strong {
  overflow: hidden;
  color: #111827;
  font-size: 15px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-copy small {
  color: #66758a;
  font-size: 12px;
}

.account-load-error {
  margin: 14px 0 0;
  color: #8a5a22;
  font-size: 12px;
  line-height: 1.55;
}

.overview-stats {
  margin: 0;
}

.overview-stats div {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px dashed #dfe6ef;
}

.overview-stats div:last-child {
  border-bottom: 0;
}

.overview-stats dt {
  color: #475569;
  font-size: 13px;
}

.overview-stats dd {
  margin: 0;
  color: #111827;
  font-size: 15px;
  font-weight: 750;
}

.dashboard-section-error {
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid #e9eef5;
  color: #8a5a22;
  font-size: 12px;
  line-height: 1.55;
}

.support-links {
  display: grid;
  gap: 3px;
}

.support-links button {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  gap: 11px;
  padding: 0 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #334155;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
}

.support-links button svg {
  flex: 0 0 19px;
  color: #00a993;
}

.support-links button:hover {
  background: #edf2f7;
  color: var(--dashboard-blue);
}

.support-links button:focus-visible {
  outline: 2px solid var(--dashboard-blue);
  outline-offset: 2px;
}

.dashboard-tip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(0, 169, 147, .24);
  border-radius: 14px;
  background: #eef9f8;
  color: #53657a;
}

.dashboard-tip svg {
  margin-top: 2px;
  color: #00a993;
}

.dashboard-tip p {
  margin: 0;
  font-size: 12px;
  line-height: 1.75;
}

@media (max-width: 1180px) {
  .dashboard-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-aside {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .dashboard-tip {
    grid-column: 1 / -1;
  }
}

@media (max-width: 960px) {
  .business-card-grid {
    grid-template-columns: 1fr;
  }

  .business-card {
    min-height: 232px;
  }
}

@media (max-width: 720px) {
  .client-dashboard {
    min-height: calc(100vh - 118px);
  }

  .dashboard-business {
    padding-top: 2px;
  }

  .dashboard-intro {
    margin-bottom: 24px;
  }

  .dashboard-intro h2 {
    font-size: 28px;
  }

  .dashboard-intro p {
    margin-top: 12px;
    font-size: 14px;
  }

  .business-card {
    min-height: 220px;
    padding: 24px;
  }

  .business-card__copy {
    margin-top: 24px;
  }

  .dashboard-aside {
    grid-template-columns: 1fr;
  }

  .dashboard-tip {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .business-card,
  .business-card__action svg {
    transition: none;
  }
}
</style>