重新构建路由和配置样式文件

app/styles/components/card.css

@@ -0,0 +1,62 @@
+/**
+ * 卡片组件样式
+ */
+
+/* 基础卡片 */
+.card {
+  @apply bg-white rounded-lg shadow overflow-hidden transition-all duration-200;
+}
+
+.card:hover {
+  @apply shadow-md;
+}
+
+/* 卡片头部 */
+.card-header {
+  @apply px-5 py-4 border-b border-gray-100 flex items-center justify-between;
+}
+
+.card-title {
+  @apply text-base font-medium text-gray-900;
+}
+
+.card-title i {
+  @apply text-xl mr-2 text-primary;
+}
+
+/* 卡片内容 */
+.card-body {
+  @apply p-5;
+}
+
+/* 卡片底部 */
+.card-footer {
+  @apply px-5 py-4 bg-gray-50 border-t border-gray-100;
+}
+
+/* 卡片变体 */
+.card-compact {
+  @apply shadow-sm;
+}
+
+.card-compact .card-header {
+  @apply py-3;
+}
+
+.card-compact .card-body {
+  @apply p-4;
+}
+
+.card-compact .card-footer {
+  @apply py-3;
+}
+
+/* 卡片布局 */
+.card-grid {
+  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
+}
+
+/* 内容卡片 */
+.content-card {
+  @apply border border-gray-100 rounded-lg shadow-sm hover:shadow transition-shadow duration-200;
+}