feat(ui): Restructure the homepage layout and optimize the logo design

- Restructure the page layout using Vuetify components
- Add temporary SVG icons to replace the default graphics

src/assets/logo.svg

@@ -1,6 +1,54 @@
-<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
-<path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
-<path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
-<path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300" aria-label="巨浪图">
+  <defs>
+    <!-- 天空渐变 -->
+    <linearGradient id="sky" x1="0" x2="0" y1="0" y2="1">
+      <stop offset="0" stop-color="#cfe9ff"/>
+      <stop offset="1" stop-color="#a7d7ff"/>
+    </linearGradient>
+
+    <!-- 主浪渐变 -->
+    <linearGradient id="waveGrad" x1="0" x2="0" y1="0" y2="1">
+      <stop offset="0" stop-color="#55b0ff"/>
+      <stop offset="0.6" stop-color="#1e90ff"/>
+      <stop offset="1" stop-color="#0b4f8a"/>
+    </linearGradient>
+
+    <!-- 浪花高光 -->
+    <linearGradient id="foamGrad" x1="0" x2="1" y1="0" y2="0">
+      <stop offset="0" stop-color="#ffffff" stop-opacity="0.95"/>
+      <stop offset="1" stop-color="#f6fbff" stop-opacity="0.65"/>
+    </linearGradient>
+
+    <!-- 轻微的噪点纹理（用作浪花） -->
+    <filter id="softBlur">
+      <feGaussianBlur stdDeviation="1.2" result="b"/>
+    </filter>
+  </defs>
+
+  <!-- 背景（天空） -->
+  <rect width="100%" height="100%" fill="url(#sky)"/>
+
+  <!-- 远处小浪（增加深度） -->
+  <path d="M0 200 C50 170 110 160 170 170 C210 175 250 185 300 170 L300 300 L0 300 Z"
+        fill="#86c7ff" opacity="0.55"/>
+
+  <!-- 主浪体 -->
+  <path d="
+    M0 230
+    C40 150, 90 90, 160 100
+    C200 105, 240 140, 300 120
+    L300 300 L0 300 Z"
+        fill="url(#waveGrad)"/>
+
+
+  <!-- 前景更亮的浪层（反光） -->
+  <path d="
+    M0 250
+    C50 200, 95 160, 150 170
+    C180 175, 220 200, 300 180
+    L300 300 L0 300 Z"
+        fill="#5fc7ff" opacity="0.35"/>
+
+  <!-- 底部微暗（增加重量感） -->
+  <rect x="0" y="270" width="300" height="30" fill="#02314a" opacity="0.06"/>
 </svg>

src/pages/index.vue

@@ -1,5 +1,32 @@
 <template>
+  <v-card class="fill-height">
+    <v-layout class="fill-height">
+      <v-navigation-drawer
+          expand-on-hover
+          permanent
+          rail
+      >
+        <v-list>
+          <v-list-item
+              prepend-avatar="/src/assets/logo.svg"
+              subtitle=""
+              title="Spary"
+          ></v-list-item>
+        </v-list>
+
+        <v-divider></v-divider>
+
+        <v-list density="compact" nav>
+          <v-list-item prepend-icon="mdi-just-nothing" title="🌊" value="spary"></v-list-item>
+          <v-list-item prepend-icon="mdi-cog" title="Settings" value="settings"></v-list-item>
+        </v-list>
+      </v-navigation-drawer>
+
+      <v-main style="height: 100vh">
         <Spary />
+      </v-main>
+    </v-layout>
+  </v-card>
 </template>
 
 <script lang="ts" setup>