1

app/src/components/widgets/CalendarWidget.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="calendar-widget">
+    <div class="month">2026年1月</div>
+    <div class="day">22</div>
+    <div class="details">
+      <span>第22天 第4周</span>
+      <span>腊月初四 周四</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '@/styles/tokens.scss';
+.calendar-widget {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  text-align: center;
+  color: white;
+  
+  .month {
+    font-size: 14px;
+    font-weight: bold;
+    color: #ff6b6b; // 月份强调色
+    margin-bottom: 2px;
+  }
+  .day {
+    font-size: 48px;
+    font-weight: 600;
+    line-height: 1;
+  }
+  .details {
+    font-size: 12px;
+    color: $color-text-secondary;
+    display: flex;
+    flex-direction: column;
+    margin-top: 4px;
+  }
+}
+</style>

app/src/components/widgets/CountdownWidget.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="countdown-widget">
+    <div class="title">下班还有</div>
+    <div class="time-display">02:37:46</div>
+    <div class="footer">
+      <!-- 这里后续可改为动态数据 -->
+      <span>发薪 19 天</span>
+      <span>周五 1 天</span>
+      <span>腊八节 4 天</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '@/styles/tokens.scss';
+.countdown-widget {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  text-align: center;
+  
+  .title {
+    font-size: 13px;
+    color: $color-text-secondary;
+  }
+  .time-display {
+    font-size: 28px;
+    font-weight: bold;
+    color: $color-text-primary;
+  }
+  .footer {
+    display: flex;
+    justify-content: space-around;
+    font-size: 12px;
+    color: $color-text-secondary;
+  }
+}
+</style>

app/src/components/widgets/HotSearchWidget.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="hot-search-widget">
+    <div class="tabs">
+      <span v-for="tab in data.tabs" :key="tab" class="tab active">{{ tab }}</span>
+    </div>
+    <ul class="list">
+      <li v-for="(item, index) in data.items" :key="index">
+        <span>{{ index + 1 }}</span>
+        <span class="title">{{ item.title }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  data: {
+    tabs: string[];
+    items: { title: string; value: string }[];
+  }
+}>();
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/tokens.scss';
+.hot-search-widget {
+  height: 100%;
+}
+.tabs {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 8px;
+  .tab {
+    font-size: 13px;
+    color: $color-text-secondary;
+    &.active {
+      color: $color-text-primary;
+      font-weight: bold;
+    }
+  }
+}
+.list {
+  list-style: none;
+  font-size: 13px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  li {
+    display: flex;
+    align-items: center;
+    .title {
+      margin-left: 8px;
+    }
+  }
+}
+</style>