下载中心

web/src/App.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { RouterView, useRoute } from 'vue-router'
 import { computed } from 'vue'
-import Footer from '@/layout/Footer/index.vue'
 import Header from '@/layout/Header/index.vue'
+import Footer from '@/layout/Footer/index.vue'
 
 // 根据路由判断是否显示Footer
 const route = useRoute()
@@ -12,7 +12,6 @@ const showFooter = computed(() => route.name !== 'doc') // 在文档页面不显
 <template>
   <div class="app-container">
     <Header />
-    <!--<OldHeader />-->
     <!-- 主要内容区域 -->
     <main class="main-content">
       <RouterView />
@@ -30,6 +29,5 @@ const showFooter = computed(() => route.name !== 'doc') // 在文档页面不显
 
 .main-content {
   flex: 1;
-  /* 移除margin-top以消除空白 */
 }
 </style>

web/src/assets/styles/docs.scss

@@ -1,98 +0,0 @@
-
-:root {
-  --header-height: 60px;
-  --sidebar-width: 280px;
-
-  // 浅色主题
-  --c-bg: #ffffff;
-  --c-bg-light: #f8f8f8;
-  --c-text: #213547;
-  --c-text-light: #666;
-  --c-brand: #42b983;
-  --c-divider: #e2e2e3;
-}
-
-.dark {
-  // 深色主题
-  --c-bg: #1a1a1a;
-  --c-bg-light: #242424;
-  --c-text: #e4e4e7;
-  --c-text-light: #a1a1aa;
-  --c-brand: #42d392;
-  --c-divider: #2f2f2f;
-}
-
-.doc-container {
-  display: flex;
-  min-height: calc(100vh - var(--header-height));
-  position: relative;
-}
-
-.sidebar {
-  width: var(--sidebar-width);
-  border-right: 1px solid var(--c-divider);
-  background-color: var(--c-bg);
-  position: fixed;
-  top: var(--header-height);
-  bottom: 0;
-  left: 0;
-  z-index: 10;
-  transition: transform 0.2s ease;
-  overflow-y: auto;
-  padding: 24px 0;
-}
-
-.content {
-  flex: 1;
-  padding: 32px 48px;
-  margin-left: var(--sidebar-width);
-}
-
-// 导航菜单样式
-.menu-group-title {
-  padding: 8px 24px;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--c-text-light);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.menu-item {
-  margin: 4px 0;
-}
-
-.menu-link {
-  display: block;
-  padding: 8px 24px;
-  color: var(--c-text);
-  font-size: 14px;
-  transition: color 0.2s, background-color 0.2s;
-
-  &:hover {
-    color: var(--c-brand);
-    background-color: var(--c-bg-light);
-  }
-
-  &.active {
-    color: var(--c-brand);
-    border-right: 2px solid var(--c-brand);
-    background-color: var(--c-bg-light);
-  }
-}
-
-// 响应式处理
-@media (max-width: 768px) {
-  .sidebar {
-    transform: translateX(-100%);
-
-    &.sidebar-open {
-      transform: translateX(0);
-    }
-  }
-
-  .content {
-    margin-left: 0;
-    padding: 24px;
-  }
-}

web/src/layout/Footer/index.vue

@@ -9,21 +9,25 @@
         <div class="footer-section">
           <h3>开发</h3>
           <ul>
-            <li><a href="#">Mobile SDK</a></li>
-            <li><a href="#">UX SDK</a></li>
-            <li><a href="#">Onboard SDK</a></li>
-            <li><a href="#">Payload SDK</a></li>
-            <li><a href="#">Windows SDK</a></li>
-            <li><a href="#">上云API</a></li>
+            <li><a href="#">OneMyriad 开放平台文档中心</a></li>
+
           </ul>
         </div>
         <div class="footer-section">
-          <h3>开发者社区</h3>
+          <h3>产品</h3>
           <ul>
-            <li><a href="#">Github</a></li>
+            <li><a href="#">IPVSP</a></li>
+            <li><a href="#">IPU</a></li>
             <!--<li><a href="#">技术论坛</a></li>-->
           </ul>
         </div>
+        <!--<div class="footer-section">-->
+        <!--  <h3>开发者社区</h3>-->
+        <!--  <ul>-->
+        <!--    <li><a href="#">Github</a></li>-->
+        <!--    &lt;!&ndash;<li><a href="#">技术论坛</a></li>&ndash;&gt;-->
+        <!--  </ul>-->
+        <!--</div>-->
         <div class="footer-section">
           <h3>联系我们</h3>
           <ul>
@@ -48,7 +52,7 @@
         <nav>
           <a href="#">隐私政策</a>
           <a href="#">使用条款</a>
-          <a href="#">SDK 信息收集清单</a>
+          <a href="#">API 信息收集清单</a>
         </nav>
       </div>
     </div>

web/src/layout/Header/index.vue

@@ -2,12 +2,15 @@
 <script setup lang="ts">
 import { RouterLink, useRoute } from 'vue-router'
 import { navigation } from '@/router'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
 // 计算当前是否在文档页面
 const route = useRoute()
 const isDocView = computed(() => route.name === 'doc')
 
+// 移动端菜单状态
+const showMobileMenu = ref(false)
+
 defineOptions({ name: 'Header' })
 
 defineProps({
@@ -48,20 +51,37 @@ defineProps({
       <!-- Logo 区域 -->
       <div class="logo-section">
         <RouterLink to="/">
-          <img src="@/assets/icons/logo.svg" alt="Pendulum Logo" class="logo" />
-          <span class="logo-text">Pendulum 开放平台</span>
+          <img src="@/assets/icons/logo.svg" alt="One Myriad" class="logo" />
+          <span class="logo-text">One Myriad 开放平台</span>
         </RouterLink>
       </div>
 
-      <!-- 简化后的导航菜单 -->
-      <nav class="nav-menu">
+      <!-- 移动端菜单按钮 -->
+      <button
+        class="mobile-menu-button"
+        @click="showMobileMenu = !showMobileMenu"
+        aria-label="Toggle menu"
+      >
+        <span class="bar" :class="{ 'bar-1': showMobileMenu }"></span>
+        <span class="bar" :class="{ 'bar-2': showMobileMenu }"></span>
+        <span class="bar" :class="{ 'bar-3': showMobileMenu }"></span>
+      </button>
+
+      <!-- 导航菜单 -->
+      <nav class="nav-menu" :class="{ 'mobile-show': showMobileMenu }">
         <ul class="menu-list">
           <li
             v-for="item in navigation"
             :key="item.name"
             class="menu-item"
           >
-            <RouterLink :to="item.path" class="menu-link">{{ item.title }}</RouterLink>
+            <RouterLink
+              :to="item.path"
+              class="menu-link"
+              @click="showMobileMenu = false"
+            >
+              {{ item.title }}
+            </RouterLink>
           </li>
         </ul>
       </nav>
@@ -191,6 +211,38 @@ defineProps({
   }
 }
 
+// 移动端菜单按钮
+.mobile-menu-button {
+  display: none;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 32px;
+  height: 32px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  z-index: 10;
+
+  .bar {
+    width: 100%;
+    height: 2px;
+    background: v.$text-primary;
+    transition: all 0.3s ease;
+    transform-origin: center;
+
+    &.bar-1 {
+      transform: translateY(8px) rotate(45deg);
+    }
+    &.bar-2 {
+      opacity: 0;
+    }
+    &.bar-3 {
+      transform: translateY(-8px) rotate(-45deg);
+    }
+  }
+}
+
 // 移动端适配
 @include v.responsive(medium) {
   .header-container {
@@ -215,35 +267,68 @@ defineProps({
 @include v.responsive(small) {
   .header-container {
     padding: 0 v.$spacing-sm;
+    position: relative;
   }
 
   .logo-text {
     display: none;
   }
 
+  .mobile-menu-button {
+    display: flex;
+  }
+
   .nav-menu {
-    margin: 0 v.$spacing-sm;
+    position: fixed;
+    top: 64px;
+    left: 0;
+    width: 100%;
+    height: calc(100vh - 64px);
+    background: v.$background-light;
+    flex-direction: column;
+    padding: 2rem;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+    margin: 0;
+    z-index: 9;
+    overflow-y: auto;
+
+    &.mobile-show {
+      transform: translateX(0);
+    }
+
+    .menu-list {
+      flex-direction: column;
+      gap: 1rem;
+    }
 
     .menu-item {
-      padding: 0 v.$spacing-xs;
+      padding: 0;
     }
 
     .menu-link {
-      font-size: v.$font-size-xs;
+      font-size: 1rem;
+      padding: 0.5rem 0;
+      display: block;
     }
   }
 
-  .action-section {
-    gap: v.$spacing-sm;
-
-    .action-link {
-      display: none;
+  .mobile-action-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-top: 2rem;
+
+    .action-link, .action-button {
+      width: 100%;
+      text-align: center;
+      padding: 0.75rem;
+      font-size: 1rem;
     }
+  }
 
-    .action-button {
-      padding: v.$spacing-xs v.$spacing-sm;
-      font-size: v.$font-size-xs;
-    }
+  .action-section {
+    display: none;
   }
 }
 </style>

web/src/router/index.ts

@@ -204,6 +204,13 @@ const routes: NavItem[] = [
       hideFooter: true,
     }
   },
+  {
+    path: '/download',
+    name: 'download',
+    component: () => import('@/views/Download/index.vue'),
+    title: '下载中心',
+    showInNav: true,
+  },
 ]
 
 const router = createRouter({

web/src/views/Download/index.vue

@@ -0,0 +1,193 @@
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 下载分类
+const categories = ref([
+  { id: 1, name: 'Windows' },
+  { id: 50, name: '信创/Linux' },
+  { id: 56, name: 'CMSV7客户端' },
+  { id: 60, name: 'APP' },
+  { id: 28, name: '对接SDK' },
+  { id: 37, name: '说明书' },
+  { id: 43, name: '功能列表' },
+  { id: 3, name: '协议标准' }
+])
+
+// 下载项数据
+const downloads = ref([
+  {
+    id: 1,
+    title: 'CMSserverV6服务器',
+    description: '服务器安装包，集公务车、渣土车、第三方、网约车、主动安全、校车六位一体的版本。',
+    version: '7.34.0.5_20250102',
+    size: '957.65 MB',
+    file: '/downloads/CMSServerV6-WIN-7.34.0.5-20250102.zip'
+  },
+  {
+    id: 2,
+    title: 'CMSV6客户端（64位）',
+    description: '64位电脑客户端，车载平台和执法仪平台通用，适用于64位的Windows操作系统。',
+    version: '7.34.0.5_20250102',
+    size: '108.19 MB',
+    file: '/downloads/CMSV6-WIN-7.34.0.5-20250102.zip'
+  }
+])
+
+// 当前选中分类
+const activeCategory = ref(-1)
+
+// 处理下载
+const handleDownload = (filePath: string) => {
+  const link = document.createElement('a')
+  link.href = filePath
+  link.download = filePath.split('/').pop() || 'download.zip'
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+</script>
+
+<template>
+  <div class="download-center">
+    <!-- 搜索区域 -->
+    <div class="search-box">
+      <input
+        type="text"
+        placeholder="请输入名称或内容"
+        class="search-input"
+      >
+      <button class="search-button">搜索</button>
+    </div>
+
+    <!-- 分类筛选 -->
+    <div class="category-filter">
+      <div
+        v-for="category in categories"
+        :key="category.id"
+        class="category-item"
+        :class="{ active: activeCategory === category.id }"
+        @click="activeCategory = category.id"
+      >
+        {{ category.name }}
+      </div>
+    </div>
+
+    <!-- 下载列表 -->
+    <div class="download-list">
+      <div
+        v-for="item in downloads"
+        :key="item.id"
+        class="download-item"
+      >
+        <div class="download-info">
+          <h3>{{ item.title }}</h3>
+          <p>{{ item.description }}</p>
+          <div class="download-meta">
+            <span>版本: {{ item.version }}</span>
+            <span>大小: {{ item.size }}</span>
+          </div>
+        </div>
+        <button
+          class="download-button"
+          @click="handleDownload(item.file)"
+        >
+          下载
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.download-center {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.search-box {
+  display: flex;
+  margin-bottom: 2rem;
+  gap: 1rem;
+}
+
+.search-input {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 1rem;
+}
+
+.search-button {
+  padding: 0 2rem;
+  background: #3270FF;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.category-filter {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 2rem;
+}
+
+.category-item {
+  padding: 0.5rem 1rem;
+  background: #f5f5f5;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.category-item.active {
+  background: #3270FF;
+  color: white;
+}
+
+.download-list {
+  display: grid;
+  gap: 1.5rem;
+}
+
+.download-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.download-info h3 {
+  margin: 0 0 0.5rem;
+  font-size: 1.25rem;
+}
+
+.download-info p {
+  margin: 0 0 1rem;
+  color: #666;
+}
+
+.download-meta {
+  display: flex;
+  gap: 1rem;
+  color: #888;
+  font-size: 0.875rem;
+}
+
+.download-button {
+  padding: 0.5rem 1.5rem;
+  background: #3270FF;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+}
+</style>