diff --git a/front/src/components/sideBar.vue b/front/src/components/sideBar.vue
new file mode 100644
index 0000000..2e1bfa5
--- /dev/null
+++ b/front/src/components/sideBar.vue
@@ -0,0 +1,277 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { RouterLink, useRoute } from 'vue-router'
+
+const route = useRoute()
+
+// 菜单项数据 // TODO
+const menuItems = ref([
+  { name: '首页', path: '/', icon: '/icons/home' },
+  { name: '造价计算', path: '/calculate', icon: '/icons/calculate' },
+  { name: '钱包充值', path: '/pay', icon: '/icons/pay' },
+  { name: '订阅记录', path: '/subscribe', icon: '/icons/subscribe' },
+  { name: '开票记录', path: '/invoice', icon: '/icons/invoice' },
+  { name: '我的账号', path: '/mine', icon: '/icons/mine' },
+])
+
+</script>
+
+<template>
+  <aside class="sidebar">
+    <!-- 侧边栏头部 -->
+    <div class="sidebar-header">
+      <img src="/favicon.ico" style="width: 20px; margin-right: 10px;">
+      <h2 class="logo">众为计算工具</h2>
+    </div>
+
+    <!-- 导航菜单 --> 
+    <nav class="sidebar-nav">
+      <li v-for="item in menuItems" :key="item.path" class="menu-item">
+        <RouterLink :to="item.path" class="menu-link" >
+          <span class="menu-select" :class="{ 'active': route.path === item.path }"></span>
+          <img class="menu-icon" :src="route.path === item.path ? item.icon + '_active.png' : item.icon +'.png'"> 
+          <span class="menu-text" :class="{ 'active': route.path === item.path }">{{ item.name }}</span>
+        </RouterLink>
+      </li>
+    </nav>
+
+    <!-- 登录状态 -->
+    <div class="sidebar-auth">
+      <div class="auth-divider">
+        <span class="divider-line"></span>
+        <span class="divider-text">·</span>
+        <span class="divider-line"></span>
+      </div>
+      
+      <!-- 未登录状态 -->
+      <div class="auth-actions">
+        <RouterLink to="/login" class="auth-link">登录</RouterLink>
+        <span class="auth-separator">|</span>
+        <RouterLink to="/register" class="auth-link">注册</RouterLink>
+      </div>
+      
+      <!-- 已登录状态 -->
+      <div class="user-info">
+        <!-- <img src="/favicon.ico" class="user-avatar"> -->
+        <span class="user-name">张三</span>
+        <!-- <span class="user-badge">高级版</span> -->
+        <button class="logout-btn">退出</button>
+      </div>
+    </div>
+
+    <!-- 侧边栏底部 -->
+    <div class="sidebar-footer">
+      <p class="copyright">本网站由</p>
+      <a href="https://www.zwgczx.com.cn" class="copyright" style="font-weight: bold;">众为工程咨询有限公司</a>
+      <p class="copyright">提供技术支持</p>
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.sidebar {
+  width: 250px;
+  height: 100vh;
+  background-color: #ffffff;
+  color: #111111;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
+}
+
+/* 头部样式 */
+.sidebar-header {
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo {
+  margin: 0;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+/* 导航菜单样式 */
+.sidebar-nav {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.menu-link {
+  display: flex;
+  align-items: center;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  color: #aaaaaa;
+  text-decoration: none;
+}
+
+.menu-link:hover {
+  color: #666666;
+}
+
+.menu-link.active {
+  font-weight: bold;
+  color: #111111;
+}
+
+.menu-select { 
+  width: 4px;
+  height: 30px;
+  background-color: #ffffff;
+}
+
+.menu-select.active { 
+  background-color: #666666;
+}
+
+.menu-icon {
+  width: 22px;
+  margin-left: 24px;
+  margin-right: 24px;
+}
+
+.menu-text {
+  font-size: 16px;
+}
+
+.menu-text.active {
+  font-size: 16px;
+  font-weight: bold;
+  color: #111111;
+}
+
+/* 分隔线样式 */
+.auth-divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 10px;
+  margin-right: 10px;
+  height: 20px;
+}
+
+.divider-line {
+  flex: 1;
+  height: 1px;
+  background-color: #e0e0e0;
+  margin: 0 10px;
+}
+
+.divider-text {
+  color: #e0e0e0;
+  font-size: 14px;
+}
+
+
+/* 未登录状态 */
+.auth-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: #d0d0d0;
+  font-size: 15px;
+  margin-bottom: 10px;
+}
+
+.auth-link {
+  background: transparent;
+  height: 30px;
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  color: #111111;
+}
+
+.auth-link:hover {
+  opacity: 0.7;
+}
+
+
+/* 已登录状态 */
+.user-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.user-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.user-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #111111;
+}
+
+.user-badge {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
+  color: #ffffff;
+  font-weight: 600;
+  display: inline-block;
+  width: fit-content;
+}
+
+.logout-btn {
+  border: none;
+  background: transparent;
+  height: 30px;
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  /* color: #cc0000; */
+}
+
+.logout-btn:hover {
+  opacity: 0.7;
+}
+
+
+/* 底部样式 */
+.sidebar-footer {
+  padding: 20px;
+  text-align: center;
+  border-top: 1px solid #e0e0e0;
+}
+
+.copyright {
+  margin: 0;
+  height: 16px;
+  font-size: 12px;
+  color: #111111;
+}
+
+
+/* 滚动条样式 */
+.sidebar-nav::-webkit-scrollbar {
+  width: 8px;
+}
+
+.sidebar-nav::-webkit-scrollbar-track {
+  background: #F0F2F3;
+  border-radius: 100px;
+}
+
+.sidebar-nav::-webkit-scrollbar-thumb {
+  background: #8B8B8B;
+  border-radius: 100px;
+}
+
+.sidebar-nav::-webkit-scrollbar-thumb:hover {
+  background: #636363;
+}
+</style>