first

src/components/Sidebar.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="sidebar">
+    <div class="sidebar-header">
+      <h2>Windows 软件管理</h2>
+    </div>
+    <nav class="sidebar-nav">
+      <router-link to="/essentials" class="nav-item">
+        <span class="nav-icon">✨</span>
+        装机必备
+      </router-link>
+      <router-link to="/updates" class="nav-item">
+        <span class="nav-icon">🔄</span>
+        软件更新
+      </router-link>
+      <router-link to="/all" class="nav-item">
+        <span class="nav-icon">📦</span>
+        全部软件
+      </router-link>
+    </nav>
+  </div>
+</template>
+
+<style scoped>
+.sidebar {
+  width: 240px;
+  background-color: var(--sidebar-bg);
+  border-right: 1px solid var(--border-color);
+  padding: 40px 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-header h2 {
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 40px;
+  padding-left: 20px;
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 20px;
+  border-radius: 12px;
+  color: var(--text-sec);
+  text-decoration: none;
+  font-size: 15px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.nav-item:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+  color: var(--text-main);
+}
+
+.nav-item.router-link-active {
+  background-color: var(--primary-color);
+  color: white;
+  box-shadow: var(--btn-shadow);
+}
+
+.nav-icon {
+  margin-right: 12px;
+  font-size: 18px;
+}
+</style>