refactor(components): migrate public components to design tokens

src/components/AnnouncementModal.vue

@@ -171,7 +171,7 @@ function close() {
   left: 50%;
   width: 28rpx;
   height: 2rpx;
-  background: #fff;
+  background: $color-card;
   border-radius: 2rpx;
 
   &.line-a {

src/components/card-item.vue

@@ -30,7 +30,7 @@ defineEmits<{
 <style scoped>
 .card-item {
   display: flex;
-  background: #fff;
+  background: $color-card;
   border-radius: 16rpx;
   overflow: hidden;
   margin-bottom: 20rpx;
@@ -52,13 +52,13 @@ defineEmits<{
 }
 
 .card-name {
-  font-size: 30rpx;
+  font-size: $font-size-lg;
   font-weight: bold;
   color: #333;
 }
 
 .card-desc {
-  font-size: 24rpx;
+  font-size: $font-size-sm;
   color: #999;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -78,7 +78,7 @@ defineEmits<{
 }
 
 .price {
-  font-size: 32rpx;
+  font-size: $font-size-lg;
   color: #E74C3C;
   font-weight: bold;
 }

src/components/empty-state.vue

@@ -34,13 +34,13 @@ defineEmits<{
 }
 
 .empty-text {
-  font-size: 28rpx;
+  font-size: $font-size-base;
   color: #999;
   margin-bottom: 30rpx;
 }
 
 .empty-btn {
-  font-size: 28rpx;
+  font-size: $font-size-base;
   color: #4A90D9;
   background: #E8F0FE;
   border-radius: 30rpx;