初步构建起页面布局

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>