feat 搭建架构骨架

src/views/home/cpns/HomeWelcome.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  summary: string
+}
+
+defineProps<Props>()
+
+const greeting = computed(() => {
+  const hour = new Date().getHours()
+  if (hour < 6) return '夜深了'
+  if (hour < 11) return '早上好'
+  if (hour < 14) return '中午好'
+  if (hour < 18) return '下午好'
+  return '晚上好'
+})
+</script>
+
+<template>
+  <section class="home-welcome">
+    <div class="home-welcome__info">
+      <h2 class="home-welcome__greeting">
+        {{ greeting }}
+      </h2>
+      <p class="home-welcome__summary text-secondary">
+        {{ summary }}
+      </p>
+    </div>
+    <div class="home-welcome__brand">
+      <!-- TODO(蓝湖): 替换头像切图 -->
+      <span class="home-welcome__avatar">王</span>
+      <span class="home-welcome__appName">虫子智造</span>
+    </div>
+  </section>
+</template>
+
+<style lang="less" scoped>
+.home-welcome {
+  .flex(row, space-between);
+  padding: @spacing-lg @spacing-xl;
+  border-radius: @radius-lg;
+  background: linear-gradient(120deg, @primary-color, @primary-hover);
+  color: @white;
+
+  &__greeting {
+    font-size: @font-size-xxl;
+    font-weight: 600;
+  }
+
+  &__summary {
+    margin-top: @spacing-xs;
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  &__brand {
+    .flex(row, center);
+    gap: @spacing-sm;
+  }
+
+  &__avatar {
+    .flex(row, center);
+    width: 40px;
+    height: 40px;
+    border-radius: @radius-round;
+    background: rgba(255, 255, 255, 0.25);
+    font-size: @font-size-lg;
+  }
+
+  &__appName {
+    font-size: @font-size-base;
+  }
+}
+</style>