新增：管理后台前端页面，以及openspec内容。

admin-web/src/components/Layout/Sidebar.vue

@@ -0,0 +1,192 @@
+<template>
+  <aside
+    class="sidebar"
+    :class="{ 'sidebar--open': isOpen }"
+  >
+    <nav class="sidebar-nav">
+      <ul class="nav-list">
+        <li class="nav-item" v-for="menu in menuList" :key="menu.path">
+          <router-link
+            :to="menu.path"
+            class="nav-link"
+            :class="{ 'is-active': $route.path === menu.path }"
+            @click="handleMenuClick"
+          >
+            <el-icon class="nav-icon"><component :is="menu.icon" /></el-icon>
+            <span class="nav-text">{{ menu.title }}</span>
+          </router-link>
+        </li>
+      </ul>
+    </nav>
+    
+    <!-- 遮罩层（手机端） -->
+    <div
+      v-if="isOpen && isMobile"
+      class="sidebar-mask"
+      @click="handleMaskClick"
+    ></div>
+  </aside>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { HomeFilled, Message, User } from '@element-plus/icons-vue'
+
+// 菜单数据
+const menuList = [
+  {
+    path: '/',
+    title: '首页',
+    icon: HomeFilled
+  },
+  {
+    path: '/conversations',
+    title: '会话记录管理',
+    icon: Message
+  },
+  {
+    path: '/users',
+    title: '用户管理',
+    icon: User
+  }
+]
+
+// 侧边栏显示状态（手机端）
+const props = defineProps({
+  isOpen: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// 定义事件
+const emit = defineEmits(['closeSidebar'])
+
+// 响应式布局：判断是否为手机端
+const isMobile = ref(false)
+
+// 监听窗口大小变化
+const handleResize = () => {
+  isMobile.value = window.innerWidth < 768
+  // 如果不是手机端，关闭侧边栏
+  if (!isMobile.value) {
+    emit('closeSidebar')
+  }
+}
+
+// 初始化响应式状态
+onMounted(() => {
+  handleResize()
+  window.addEventListener('resize', handleResize)
+})
+
+// 清理事件监听
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
+
+// 菜单点击处理（手机端）
+const handleMenuClick = () => {
+  if (isMobile.value) {
+    emit('closeSidebar')
+  }
+}
+
+// 遮罩层点击处理（手机端）
+const handleMaskClick = () => {
+  emit('closeSidebar')
+}
+</script>
+
+<style scoped>
+.sidebar {
+  position: fixed;
+  top: 64px;
+  left: 0;
+  bottom: 0;
+  width: 250px;
+  background-color: var(--background-color);
+  border-right: 1px solid var(--border-color);
+  transition: all 0.3s ease;
+  z-index: 99;
+  overflow-y: auto;
+  
+  /* 桌面端默认显示，手机端默认隐藏 */
+  @media (max-width: 767px) {
+    transform: translateX(-100%);
+  }
+}
+
+/* 侧边栏打开状态（手机端） */
+.sidebar--open {
+  @media (max-width: 767px) {
+    transform: translateX(0);
+  }
+}
+
+.sidebar-nav {
+  padding: 20px 0;
+}
+
+.nav-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.nav-item {
+  margin-bottom: 4px;
+}
+
+.nav-link {
+  display: flex;
+  align-items: center;
+  padding: 12px 24px;
+  color: var(--text-color);
+  text-decoration: none;
+  transition: all 0.3s;
+  
+  &:hover {
+    background-color: var(--border-color-lighter);
+    color: var(--primary-color);
+  }
+  
+  &.is-active {
+    background-color: rgba(64, 158, 255, 0.1);
+    color: var(--primary-color);
+    border-right: 3px solid var(--primary-color);
+  }
+}
+
+.nav-icon {
+  font-size: 18px;
+  margin-right: 12px;
+  width: 20px;
+  text-align: center;
+}
+
+.nav-text {
+  font-size: 14px;
+}
+
+/* 遮罩层（手机端） */
+.sidebar-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 98;
+  @media (min-width: 768px) {
+    display: none;
+  }
+}
+
+/* 平板端侧边栏宽度调整 */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .sidebar {
+    width: 200px;
+  }
+}
+</style>