consumer模块完成90%，前端完成supabase对接

2026-02-04 17:21:15 +08:00
parent 8a535e3f38
commit 39aa1b6bec
1335 changed files with 191376 additions and 4 deletions
--- a/mall/layouts/admin/components/AdminAside.uvue
+++ b/mall/layouts/admin/components/AdminAside.uvue
@@ -0,0 +1,195 @@
+<template>
+  <view class="admin-aside" :class="{ collapsed: collapsed }" :style="{ width: asideWidth + 'px' }">
+    <view class="aside-logo" @click="onLogoClick">
+      <text class="logo-text">{{ collapsed ? 'M' : 'MALL' }}</text>
+    </view>
+
+    <view class="aside-menu">
+      <view 
+        v-for="menu in topMenus" 
+        :key="menu.id"
+        class="menu-item"
+        :class="{ active: menu.id === activeTopMenuId }"
+        @click="onMenuClick(menu)"
+      >
+        <view class="menu-icon">
+          <text class="icon-text">{{ getIconText(menu.icon) }}</text>
+        </view>
+        <view v-if="!collapsed" class="menu-title">
+          <text>{{ menu.title }}</text>
+        </view>
+      </view>
+    </view>
+
+    <view class="aside-footer" @click="onToggle">
+      <view class="toggle-btn">
+        <text class="toggle-icon">{{ collapsed ? '>' : '<' }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+import type { TopMenu } from '@/layouts/admin/router/adminRoutes.uts'
+
+const props = defineProps<{
+  collapsed: boolean
+  topMenus: TopMenu[]
+  activeTopMenuId: string
+  asideWidth: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'toggle'): void
+  (e: 'menu-click', menu: TopMenu): void
+}>()
+
+function getIconText(icon: string): string {
+  const iconMap: Record<string, string> = {
+    'home': '🏠',
+    'user': '👥',
+    'product': '📦',
+    'order': '📜',
+    'marketing': '📉',
+    'content': '📝',
+    'finance': '💰',
+    'statistic': '📊',
+    'setting': '⚙️',
+    'maintenance': '🛠️'
+  }
+  return iconMap[icon] || icon.charAt(0).toUpperCase()
+}
+
+function onMenuClick(menu: TopMenu): void {
+  emit('menu-click', menu)
+}
+
+function onToggle(): void {
+  emit('toggle')
+}
+
+function onLogoClick(): void {
+  const homeMenu = props.topMenus.find(m => m.id === 'home')
+  if (homeMenu) {
+    emit('menu-click', homeMenu)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.admin-aside {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  background: #001529;
+  display: flex;
+  flex-direction: column;
+  transition: width 0.3s ease;
+  z-index: 1000;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+}
+
+.aside-logo {
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  
+  .logo-text {
+    font-size: 20px;
+    font-weight: bold;
+    color: #fff;
+  }
+}
+
+.aside-menu {
+  flex: 1;
+  padding: 8px 0;
+  overflow-y: scroll;
+}
+
+.menu-item {
+  height: 60px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.65);
+  transition: all 0.3s;
+  position: relative;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.05);
+    color: #fff;
+  }
+  
+  &.active {
+    background: #1890ff;
+    color: #fff;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 3px;
+      background: #fff;
+    }
+  }
+}
+
+.menu-icon {
+  font-size: 24px;
+  margin-bottom: 4px;
+  
+  .icon-text {
+    display: block;
+  }
+}
+
+.menu-title {
+  font-size: 12px;
+  text-align: center;
+  
+  text {
+    display: block;
+  }
+}
+
+.aside-footer {
+  height: 48px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.05);
+  }
+}
+
+.toggle-btn {
+  color: rgba(255, 255, 255, 0.65);
+  font-size: 18px;
+  
+  .toggle-icon {
+    display: block;
+  }
+}
+
+.admin-aside.collapsed {
+  .menu-item {
+    height: 50px;
+  }
+  
+  .menu-icon {
+    margin-bottom: 0;
+  }
+}
+</style>
--- a/mall/layouts/admin/components/AdminFooter.uvue
+++ b/mall/layouts/admin/components/AdminFooter.uvue
@@ -0,0 +1,20 @@
+<template>
+  <view class="footer">
+    <text class="footer-text">商城后台 © {{ year }}</text>
+  </view>
+</template>
+
+<script setup lang="uts">
+const year = new Date().getFullYear()
+</script>
+
+<style>
+.footer{
+  height: 44px;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  color:#9ca3af;
+}
+.footer-text{ font-size:12px; }
+</style>
--- a/mall/layouts/admin/components/AdminHeader.uvue
+++ b/mall/layouts/admin/components/AdminHeader.uvue
@@ -0,0 +1,87 @@
+<template>
+  <view class="header">
+    <view class="header-left">
+      <text class="crumb" v-for="(item, index) in breadcrumb" :key="item.id">
+        {{ item.title }}
+        <text v-if="index < breadcrumb.length - 1" class="separator"> / </text>
+      </text>
+    </view>
+
+    <view class="header-right">
+      <view class="hbtn" @click="$emit('search')"><text>🔍</text></view>
+      <view class="hbtn" @click="$emit('refresh')"><text>⟳</text></view>
+      <view class="hbtn" @click="$emit('notify')">
+        <text>🔔</text>
+        <view class="dot" v-if="hasNotification"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+defineProps<{
+  breadcrumb: Array<{id: string, title: string}>
+  hasNotification: boolean
+}>()
+
+defineEmits<{
+  (e:'search'): void
+  (e:'refresh'): void
+  (e:'notify'): void
+}>()
+</script>
+
+<style>
+.header{
+  height: 56px;
+  background:#fff;
+  border-bottom: 1px solid #eef2f7;
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  justify-content: space-between;
+  padding: 0 16px;
+}
+
+.header-left {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.crumb { 
+  color: #374151; 
+  font-size: 14px; 
+}
+
+.separator {
+  color: #d1d5db;
+  margin: 0 8px;
+}
+
+.header-right{ 
+  display:flex; 
+  flex-direction:row;
+  align-items:center; 
+  gap: 10px; 
+}
+.hbtn{
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  background:#f6f7fb;
+  position: relative;
+}
+.dot{
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background:#ff4d4f;
+  position:absolute;
+  top: 6px;
+  right: 6px;
+}
+</style>
--- a/mall/layouts/admin/components/AdminSubsider.uvue
+++ b/mall/layouts/admin/components/AdminSubsider.uvue
@@ -0,0 +1,132 @@
+<template>
+  <view class="admin-subsider" :style="{ left: asideWidth + 'px', width: siderWidth + 'px' }">
+    <view class="subsider-header">
+      <text class="header-title">{{ topMenuTitle }}</text>
+    </view>
+
+    <view class="subsider-menu">
+      <view v-for="group in groups" :key="group.id" class="menu-group">
+        <view class="group-title">
+          <text>{{ group.title }}</text>
+        </view>
+
+        <view 
+          v-for="route in getGroupRoutes(group.id)" 
+          :key="route.id"
+          class="menu-item"
+          :class="{ active: route.id === activeRouteId }"
+          @click="onRouteClick(route.id)"
+        >
+          <text class="item-title">{{ route.title }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+import type { MenuGroup, RouteRecord } from '@/layouts/admin/router/adminRoutes.uts'
+
+const props = defineProps<{
+  topMenuTitle: string
+  groups: MenuGroup[]
+  routes: Map<string, RouteRecord[]>
+  activeRouteId: string
+  asideWidth: number
+  siderWidth: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'route-click', routeId: string): void
+}>()
+
+function getGroupRoutes(groupId: string): RouteRecord[] {
+  return props.routes.get(groupId) || []
+}
+
+function onRouteClick(routeId: string): void {
+  emit('route-click', routeId)
+}
+</script>
+
+<style scoped lang="scss">
+.admin-subsider {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  background: #fff;
+  border-right: 1px solid #e8e8e8;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
+  display: flex;
+  flex-direction: column;
+  z-index: 999;
+}
+
+.subsider-header {
+  height: 64px;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  border-bottom: 1px solid #e8e8e8;
+  
+  .header-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+  }
+}
+
+.subsider-menu {
+  flex: 1;
+  padding: 8px 0;
+  overflow-y: scroll;
+}
+
+.menu-group {
+  margin-bottom: 16px;
+}
+
+.group-title {
+  padding: 8px 16px;
+  font-size: 12px;
+  color: #999;
+  font-weight: 500;
+  
+  text {
+    display: block;
+  }
+}
+
+.menu-item {
+  height: 36px;
+  padding: 0 16px 0 24px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  position: relative;
+  
+  &:hover {
+    background: #f5f5f5;
+  }
+  
+  &.active {
+    background: #e6f7ff;
+    color: #1890ff;
+    
+    &::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      width: 3px;
+      background: #1890ff;
+    }
+  }
+  
+  .item-title {
+    font-size: 14px;
+  }
+}
+</style>
--- a/mall/layouts/admin/components/AdminTagsView.uvue
+++ b/mall/layouts/admin/components/AdminTagsView.uvue
@@ -0,0 +1,80 @@
+<template>
+  <view class="tags">
+    <scroll-view class="tags-scroll" scroll-x="true" show-scrollbar="false">
+      <view class="tags-row">
+        <view
+          v-for="t in tabs"
+          :key="t.id"
+          class="tag"
+          :class="{ active: activeTabId === t.id }"
+          @click="$emit('tab-click', t)"
+        >
+          <text class="tag-text">{{ t.title }}</text>
+          <view class="tag-close" @click.stop="$emit('tab-close', t.id)">
+            <text class="tag-close-text">×</text>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup lang="uts">
+import type { TabItem } from '../types.uts'
+
+defineProps<{
+  tabs: TabItem[]
+  activeTabId: string
+}>()
+
+defineEmits<{
+  (e:'tab-click', tab: TabItem): void
+  (e:'tab-close', tabId: string): void
+}>()
+</script>
+
+<style>
+.tags{
+  height: 44px;
+  background:#fff;
+  border-bottom: 1px solid #eef2f7;
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+}
+.tags-scroll{ width: 100%; height: 44px; }
+.tags-row{
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  gap: 8px;
+  padding: 0 12px;
+  height: 44px;
+}
+.tag{
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid #e5e7eb;
+  background:#fff;
+  border-radius: 6px;
+  display:flex;
+  flex-direction: row;
+  align-items:center;
+  gap: 8px;
+}
+.tag.active{
+  border-color:#1677ff;
+  background:#eaf2ff;
+}
+.tag-text{ font-size:12px; color:#374151; }
+.tag-close{
+  width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  justify-content:center;
+}
+.tag-close-text{ font-size:14px; color:#6b7280; line-height:14px; }
+</style>
--- a/mall/layouts/admin/components/AdminTopBar.uvue
+++ b/mall/layouts/admin/components/AdminTopBar.uvue
--- a/mall/layouts/admin/components/PlaceholderPage.uvue
+++ b/mall/layouts/admin/components/PlaceholderPage.uvue
@@ -0,0 +1,76 @@
+<template>
+  <view class="placeholder-page">
+    <view class="placeholder-content">
+      <view class="placeholder-icon">📦</view>
+      <text class="placeholder-title">{{ title || '页面开发中' }}</text>
+      <text class="placeholder-desc">{{ desc || '该功能模块正在开发中，敬请期待' }}</text>
+      <view class="placeholder-info">
+        <text class="info-label">组件Key:</text>
+        <text class="info-value">{{ componentKey || 'Unknown' }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+import { ref } from 'vue'
+
+const props = defineProps<{
+  title?: string
+  desc?: string
+  componentKey?: string
+}>()
+</script>
+
+<style scoped lang="scss">
+.placeholder-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 500px;
+  padding: 40px 20px;
+}
+
+.placeholder-content {
+  text-align: center;
+  max-width: 400px;
+}
+
+.placeholder-icon {
+  font-size: 64px;
+  margin-bottom: 20px;
+}
+
+.placeholder-title {
+  display: block;
+  font-size: 20px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12px;
+}
+
+.placeholder-desc {
+  display: block;
+  font-size: 14px;
+  color: #666;
+  line-height: 1.6;
+  margin-bottom: 24px;
+}
+
+.placeholder-info {
+  padding: 12px 16px;
+  background: #f5f5f5;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.info-label {
+  color: #999;
+  margin-right: 8px;
+}
+
+.info-value {
+  color: #1890ff;
+  font-family: monospace;
+}
+</style>
--- a/mall/layouts/admin/components/card.uvue
+++ b/mall/layouts/admin/components/card.uvue
@@ -0,0 +1,94 @@
+<template>
+  <view class="admin-card" :class="cardClass">
+    <view class="card-header" v-if="title || $slots.header">
+      <view class="card-title-section">
+        <text class="card-title">{{ title }}</text>
+        <view class="card-extra" v-if="$slots.extra">
+          <slot name="extra"></slot>
+        </view>
+      </view>
+    </view>
+    <view class="card-body">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+import { computed } from 'vue'
+
+// Props
+const props = defineProps<{
+  title?: string
+  bordered?: boolean
+  shadow?: string
+  bodyStyle?: Record<string, any>
+}>()
+
+// Computed
+const cardClass = computed(() => {
+  return {
+    'card-bordered': props.bordered !== false,
+    'card-shadow': props.shadow !== 'none',
+    'card-shadow-small': props.shadow === 'small',
+    'card-shadow-medium': props.shadow === 'medium',
+    'card-shadow-large': props.shadow === 'large'
+  }
+})
+</script>
+
+<style lang="scss">
+.admin-card {
+  background: #fff;
+  border-radius: 8rpx;
+  overflow: hidden;
+
+  &.card-bordered {
+    border: 1rpx solid #e8e8e8;
+  }
+
+  &.card-shadow {
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+
+    &.card-shadow-small {
+      box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.04);
+    }
+
+    &.card-shadow-medium {
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+    }
+
+    &.card-shadow-large {
+      box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.12);
+    }
+  }
+}
+
+.card-header {
+  padding: 24rpx 32rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+  background: #fafafa;
+}
+
+.card-title-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #262626;
+  margin: 0;
+}
+
+.card-extra {
+  font-size: 28rpx;
+  color: #666;
+}
+
+.card-body {
+  padding: 32rpx;
+}
+</style>