文档更新日志

速众AI低代码开发平台 - 项目开发文档 ​

📋 项目概述 ​

项目名称: 速众AI低代码开发平台
项目类型: 企业官网 + 技术文档站点
技术栈: VitePress + Vue 3 + Ant Design Vue
开发语言: JavaScript/TypeScript + Markdown
项目描述: 速众AI低代码开发平台由南京小联科技有限公司研发，是一款基于Java生态、可视化设计、源码开放的企业级低代码开发平台。

🏗️ 项目架构分析 ​

技术栈组成 ​

  • 静态站点生成器: VitePress 1.4.3
  • 前端框架: Vue 3.5.12
  • UI组件库: Ant Design Vue 4.2.6
  • 样式预处理器: Sass 1.80.5
  • 轮播组件: Swiper 11.1.15
  • 工具库: VueUse 12.0.0
  • 搜索功能: DocSearch CSS 3.8.0

项目结构 ​

suconnect_www/
├── .vitepress/                 # VitePress 配置目录
│   ├── config.mjs             # 主配置文件
│   ├── theme/                 # 主题配置
│   │   ├── index.js           # 主题入口
│   │   ├── style.css          # 全局样式
│   │   ├── util.js            # 工具函数
│   │   ├── directive/         # 自定义指令
│   │   │   └── outside.js     # 点击外部关闭指令
│   │   └── defaultTheme/      # 默认主题配置
│   │       ├── index.ts       # 主题入口
│   │       ├── Layout.vue     # 布局组件
│   │       ├── NotFound.vue   # 404页面
│   │       ├── shared.ts      # 共享工具
│   │       ├── components/    # 主题组件
│   │       ├── composables/   # 组合式函数
│   │       ├── styles/        # 主题样式
│   │       └── fonts/         # 字体文件
│   ├── components/            # 自定义组件
│   │   ├── CustomHomePage.vue     # 首页组件 (34KB)
│   │   ├── CustomPricePage.vue    # 定价页面组件 (25KB)
│   │   ├── CustomAboutPage.vue    # 关于我们组件 (9.4KB)
│   │   ├── CustomFrameworkBackendPage.vue  # 后端架构页面 (11KB)
│   │   ├── CustomFrameworkFrontendPage.vue # 前端架构页面 (13KB)
│   │   ├── CustomNavBar.vue       # 导航栏组件 (6.3KB)
│   │   ├── CustomFooter.vue       # 页脚组件 (4.9KB)
│   │   ├── CustomAdComponent.vue  # 广告组件 (4.2KB)
│   │   ├── CustomPopover.vue      # 弹出框组件 (2.2KB)
│   │   ├── CustomWechatDialog.vue # 微信对话框 (1KB)
│   │   ├── CustomApplyDialog.vue  # 申请对话框 (2.7KB)
│   │   └── CustomImage.vue        # 图片组件 (230B)
│   └── cache/                 # 构建缓存
│       └── deps/              # 依赖缓存
├── src/                       # 文档源码目录
│   ├── index.md              # 首页文档
│   ├── about/                # 关于我们
│   │   └── index.md          # 关于我们页面
│   ├── framework/            # 架构文档
│   │   ├── frontend.md       # 前端架构文档
│   │   └── backend.md        # 后端架构文档
│   ├── price/                # 定价页面
│   │   └── index.md          # 定价页面文档
│   ├── serve/                # 服务页面
│   │   └── index.md          # 服务页面文档
│   └── source/               # 源码页面
│       └── index.md          # 源码页面文档
├── public/                   # 静态资源目录
│   └── assets/               # 图片、图标等资源
│       ├── logo.png          # 主logo
│       ├── logo-mini.jpg     # 小logo
│       ├── home-banner.jpg   # 首页横幅
│       ├── about-banner.jpg  # 关于我们横幅
│       ├── price-banner.jpg  # 定价页面横幅
│       ├── framework-banner.jpg # 架构页面横幅
│       ├── work-wechat.png   # 企业微信二维码
│       ├── cmps/             # 组件相关图片
│       ├── product-icons/    # 产品图标
│       └── ...               # 其他资源文件
├── package.json              # 项目依赖配置
├── pnpm-lock.yaml           # pnpm 锁文件
└── README.md                 # 项目文档

🔧 详细配置说明 ​

VitePress 配置详解 ​

1. 基础配置 (config.mjs) ​

javascript
export default defineConfig({
  title: "速众AI低代码开发平台",
  description: "速众AI低代码开发平台",
  lang: "zh-CN",
  outDir: "./dist",
  appearance: false,  // 禁用主题切换
  head: [
    // SEO 配置
    ["link", { rel: "icon", href: "/assets/logo-mini.jpg" }],
    ["meta", { name: "viewport", content: "width=1500, initial-scale=0" }],
    // 百度统计
    ["script", {}, `var _hmt = _hmt || [];...`]
  ]
})

2. 路由重写规则 ​

javascript
rewrites: {
  "src/:pkg/(.*)": ":pkg/(.*)",
  "src/index.md": "index.md",
}

3. Vite 构建配置 ​

javascript
vite: {
  css: {
    modules: {
      generateScopedName(a, b) {
        // 自定义 CSS 类名生成策略
        if (!/^([A-Z][a-z0-9]+)+$/.test(a)) return a;
        return (randomUUID[`${b}//${a}`] ??= `i${randomUUID().slice(-12)}`);
      },
    },
  },
  resolve: {
    alias: [
      {
        find: /^.*\/VPFooter.vue$/,
        replacement: fileURLToPath(
          new URL("./components/CustomFooter.vue", import.meta.url)
        ),
      },
    ],
  },
}

主题配置详解 ​

1. 主题入口 (theme/index.js) ​

javascript
export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {
      // 布局插槽配置
    })
  },
  enhanceApp({ app, router, siteData }) {
    // 注册自定义组件
    app.component('CustomHomePage', CustomHomePage)
    app.component('CustomPricePage', CustomPricePage)
    // 注册 Ant Design Vue 组件
    app.component('AButton', Button)
    app.component('AModal', Modal)
    // 注册自定义指令
    app.directive('click-outside', vClickOutside)
  }
}

2. 全局样式配置 (theme/style.css) ​

  • CSS 变量系统: 定义品牌色、警告色、危险色等
  • 组件样式覆盖: 按钮、首页、导航等组件样式
  • 响应式设计: 适配不同屏幕尺寸

🎨 组件开发指南 ​

自定义组件架构 ​

1. 组件命名规范 ​

  • 使用 Custom 前缀
  • 采用 PascalCase 命名
  • 文件名使用 kebab-case

2. 组件分类 ​

页面级组件 (Page Components)

  • CustomHomePage.vue - 首页，包含轮播、产品介绍、功能展示
  • CustomPricePage.vue - 定价页面，包含价格方案对比
  • CustomAboutPage.vue - 关于我们，包含公司介绍、团队信息
  • CustomFrameworkBackendPage.vue - 后端架构展示
  • CustomFrameworkFrontendPage.vue - 前端架构展示

功能组件 (Feature Components)

  • CustomNavBar.vue - 导航栏，包含菜单、按钮、企业微信
  • CustomFooter.vue - 页脚，包含版权信息、备案号
  • CustomAdComponent.vue - 广告组件，用于产品推广
  • CustomPopover.vue - 弹出框，用于信息展示
  • CustomWechatDialog.vue - 微信对话框，用于客服联系
  • CustomApplyDialog.vue - 申请对话框，用于用户注册

基础组件 (Base Components)

  • CustomImage.vue - 图片组件，优化图片加载和显示

3. 组件开发最佳实践 ​

Vue 3 Composition API 使用

vue
<script setup>
import { ref, onMounted, computed } from 'vue'
import { useWindowSize } from '@vueuse/core'

// 响应式数据
const isVisible = ref(false)
const { width } = useWindowSize()

// 计算属性
const isMobile = computed(() => width.value < 768)

// 生命周期
onMounted(() => {
  // 初始化逻辑
})
</script>

样式组织

vue
<style scoped lang="scss">
// 使用 SCSS 变量
$primary-color: #1677FF;
$border-radius: 8px;

.component {
  border-radius: $border-radius;
  
  &__header {
    color: $primary-color;
  }
  
  &__content {
    // 内容样式
  }
}

// 响应式设计
@media (max-width: 768px) {
  .component {
    // 移动端样式
  }
}
</style>

组件通信机制 ​

1. Props 传递 ​

vue
<!-- 父组件 -->
<custom-home-page 
  :title="pageTitle"
  :features="featureList"
  @feature-click="handleFeatureClick"
/>

<!-- 子组件 -->
<script setup>
defineProps({
  title: {
    type: String,
    required: true
  },
  features: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['feature-click'])
</script>

2. 事件总线 (Event Bus) ​

javascript
// 使用 mitt 作为事件总线
import mitt from 'mitt'
const emitter = mitt()

// 发送事件
emitter.emit('show-dialog', { type: 'wechat' })

// 监听事件
emitter.on('show-dialog', (data) => {
  // 处理事件
})

🚀 开发环境搭建 ​

环境要求 ​

  • Node.js: >= 16.0.0 (推荐 18.x LTS)
  • 包管理器: npm >= 8.0.0 或 yarn >= 1.22.0 或 pnpm >= 7.0.0
  • 操作系统: Windows 10+, macOS 10.15+, Ubuntu 18.04+

安装步骤 ​

1. 克隆项目 ​

bash
git clone <repository-url>
cd suconnect_www

2. 安装依赖 ​

bash
# 使用 npm
npm install

# 或使用 yarn
yarn install

# 或使用 pnpm (推荐)
pnpm install

3. 启动开发服务器 ​

bash
# 开发模式启动
npm run dev
# 或
yarn dev
# 或
pnpm dev

开发服务器将在 http://localhost:5173 启动，支持：

  • ✅ 热重载 (HMR)
  • ✅ 源码映射
  • ✅ 错误提示
  • ✅ 网络访问 (--host 参数)

4. 构建生产版本 ​

bash
# 构建静态文件
npm run build

# 预览构建结果
npm run preview

构建后的文件将输出到 dist/ 目录，包含：

  • 静态 HTML 文件
  • 压缩后的 CSS/JS 文件
  • 优化的图片资源
  • 服务工作者 (Service Worker)

📝 开发指南 ​

1. 添加新页面 ​

步骤 1: 创建 Markdown 文件 ​

bash
# 在 src/ 目录下创建新页面
touch src/new-page/index.md

步骤 2: 编写页面内容 ​

markdown
---
title: 新页面标题
description: 页面描述
---

# 新页面标题

页面内容...

<custom-component />

步骤 3: 配置导航 ​

在 .vitepress/config.mjs 中添加导航链接：

javascript
nav: [
  // ... 现有导航
  { text: "新页面", link: "/new-page/" }
]

2. 自定义组件开发 ​

组件模板 ​

vue
<template>
  <div class="custom-component">
    <h2>{{ title }}</h2>
    <div class="content">
      <slot />
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: '默认标题'
  }
})
</script>

<style scoped lang="scss">
.custom-component {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  
  h2 {
    color: var(--vp-c-brand-1);
    margin-bottom: 16px;
  }
  
  .content {
    line-height: 1.6;
  }
}
</style>

组件注册 ​

在 .vitepress/theme/index.js 中注册组件：

javascript
import CustomComponent from '../components/CustomComponent.vue'

export default {
  enhanceApp({ app }) {
    app.component('CustomComponent', CustomComponent)
  }
}

在 Markdown 中使用 ​

markdown
<custom-component title="自定义标题">
  组件内容
</custom-component>

3. 样式开发 ​

全局样式变量 ​

在 .vitepress/theme/style.css 中定义：

css
:root {
  /* 品牌色 */
  --vp-c-brand-1: #1677FF;
  --vp-c-brand-2: #4096FF;
  --vp-c-brand-3: #0958D9;
  
  /* 间距 */
  --vp-spacing-xs: 4px;
  --vp-spacing-sm: 8px;
  --vp-spacing-md: 16px;
  --vp-spacing-lg: 24px;
  --vp-spacing-xl: 32px;
  
  /* 圆角 */
  --vp-border-radius: 8px;
  --vp-border-radius-lg: 12px;
}

组件样式 ​

vue
<style scoped lang="scss">
.component {
  // 使用全局变量
  padding: var(--vp-spacing-md);
  border-radius: var(--vp-border-radius);
  
  // 响应式设计
  @media (max-width: 768px) {
    padding: var(--vp-spacing-sm);
  }
  
  // 深色模式支持
  @media (prefers-color-scheme: dark) {
    background-color: var(--vp-c-bg-soft);
  }
}
</style>

4. 静态资源管理 ​

资源组织 ​

public/assets/
├── images/          # 图片资源
│   ├── banners/     # 横幅图片
│   ├── icons/       # 图标
│   └── logos/       # Logo
├── fonts/           # 字体文件
└── videos/          # 视频资源

资源引用 ​

vue
<template>
  <!-- 绝对路径引用 -->
  <img src="/assets/images/banner.jpg" alt="横幅" />
  
  <!-- 动态引用 -->
  <img :src="imageUrl" :alt="imageAlt" />
</template>

<script setup>
const imageUrl = '/assets/images/dynamic.jpg'
const imageAlt = '动态图片'
</script>

🎨 主题定制 ​

主要配置项 ​

1. 站点基础信息 ​

javascript
{
  title: "速众AI低代码开发平台",
  description: "速众AI低代码开发平台",
  lang: "zh-CN",
  appearance: false,  // 固定浅色主题
}

2. 视口配置 ​

javascript
head: [
  ["meta", { 
    name: "viewport", 
    content: "width=1500, initial-scale=0" 
  }]
]

3. 导航配置 ​

javascript
nav: [
  { text: "首页", link: "/" },
  {
    text: "架构",
    items: [
      { text: "前端VUE3架构", link: "/framework/frontend.md" },
      { text: "后端JAVA架构", link: "/framework/backend.md" },
    ],
  },
  { text: "定价", link: "/price/index.md" },
  {
    text: "文档",
    link: "https://www.yuque.com/suconnect/doc/",
  },
  { text: "关于我们", link: "/about/index.md" },
]

4. 自定义导航按钮 ​

javascript
navCustomActions: [
  {
    text: "免费试用",
    link: "/",
    bgColor: "#1677FF",
    color: "#ffffff",
    popover: true,
  },
]

自定义功能 ​

1. 企业微信集成 ​

javascript
themeConfig: {
  enterpriseWechat: "/assets/work-wechat.jpg",
}

2. 百度统计集成 ​

javascript
head: [
  [
    "script",
    {},
    `var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?018c0942ae7e3a38a2ede09e981cf26f";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();`
  ]
]

3. 自定义页脚 ​

javascript
footer: {
  copyright: "Copyright © 南京小联科技有限公司 All Rights Reserved",
  websiteRegistration: {
    text: "苏ICP备20024566号-1",
    link: "https://beian.miit.gov.cn/",
  },
}

📦 依赖管理 ​

核心依赖详解 ​

1. 静态站点生成器 ​

json
{
  "vitepress": "^1.4.3"
}
  • 作用: 基于 Vite 的静态站点生成器
  • 特性: 支持 Vue 3、Markdown、热重载
  • 配置: 通过 .vitepress/config.mjs 配置

2. 前端框架 ​

json
{
  "vue": "^3.5.12"
}
  • 作用: 渐进式 JavaScript 框架
  • 特性: Composition API、响应式系统
  • 使用: 在自定义组件中开发交互功能

3. UI 组件库 ​

json
{
  "ant-design-vue": "^4.2.6"
}
  • 作用: 企业级 UI 设计语言和 React 组件库的 Vue 实现
  • 组件: Button、Modal、Form、Input 等
  • 注册: 在主题中全局注册为 A 前缀组件

4. 样式预处理器 ​

json
{
  "sass": "^1.80.5"
}
  • 作用: CSS 预处理器
  • 特性: 变量、嵌套、混合、函数
  • 使用: 在组件中使用 <style lang="scss">

5. 轮播组件 ​

json
{
  "swiper": "^11.1.15"
}
  • 作用: 现代化的移动端触摸滑动组件
  • 特性: 支持触摸、响应式、多种效果
  • 使用: 首页轮播图、产品展示

6. 工具库 ​

json
{
  "@vueuse/core": "^12.0.0"
}
  • 作用: Vue Composition API 工具集合
  • 功能: useWindowSize、useLocalStorage、useMediaQuery 等
  • 使用: 简化组件开发，提供常用功能

7. 搜索功能 ​

json
{
  "@docsearch/css": "^3.8.0"
}
  • 作用: Algolia DocSearch 样式
  • 功能: 全站搜索功能
  • 集成: 需要配置 Algolia 账号

开发脚本详解 ​

json
{
  "dev": "vitepress dev --host",
  "build": "vitepress build",
  "preview": "vitepress preview"
}
  • dev: 启动开发服务器，支持网络访问
  • build: 构建生产版本，生成静态文件
  • preview: 预览构建结果，本地测试

🔧 构建配置 ​

VitePress 配置特点 ​

1. ES 模块支持 ​

javascript
// package.json
{
  "type": "module"
}

2. 自定义 CSS 模块命名 ​

javascript
css: {
  modules: {
    generateScopedName(a, b) {
      // 只转换大驼峰格式命名的CSS类名为随机值
      if (!/^([A-Z][a-z0-9]+)+$/.test(a)) return a;
      return (randomUUID[`${b}//${a}`] ??= `i${randomUUID().slice(-12)}`);
    },
  },
}

3. 别名配置 ​

javascript
resolve: {
  alias: [
    {
      find: /^.*\/VPFooter.vue$/,
      replacement: fileURLToPath(
        new URL("./components/CustomFooter.vue", import.meta.url)
      ),
    },
  ],
}

4. 路由重写 ​

javascript
rewrites: {
  "src/:pkg/(.*)": ":pkg/(.*)",
  "src/index.md": "index.md",
}

构建输出结构 ​

dist/
├── index.html              # 首页
├── about/                  # 关于我们页面
│   └── index.html
├── framework/              # 架构页面
│   ├── frontend.html
│   └── backend.html
├── price/                  # 定价页面
│   └── index.html
├── assets/                 # 静态资源
│   ├── index-[hash].js     # 主 JavaScript 文件
│   ├── index-[hash].css    # 主 CSS 文件
│   └── images/             # 图片资源
└── _redirects              # 重定向规则 (Netlify)

SEO 优化 ​

1. Meta 标签配置 ​

javascript
head: [
  ["meta", { 
    name: "description", 
    content: "速众AI低代码开发平台由南京小联科技有限公司研发..." 
  }],
  ["meta", { 
    name: "keywords", 
    content: "BladeX, Formmaking, 速众AI低代码开发平台..." 
  }],
  ["meta", { name: "author", content: "南京小联科技有限公司" }],
  ["meta", { property: "og:title", content: "速众AI低代码开发平台" }],
  ["meta", { property: "og:description", content: "企业级低代码开发平台" }],
  ["meta", { property: "og:type", content: "website" }],
  ["meta", { property: "og:url", content: "https://suconnect.com" }],
  ["meta", { property: "og:image", content: "/assets/logo.png" }],
]

2. 结构化数据 ​

javascript
head: [
  [
    "script",
    {
      type: "application/ld+json",
    },
    JSON.stringify({
      "@context": "https://schema.org",
      "@type": "Organization",
      "name": "南京小联科技有限公司",
      "url": "https://suconnect.com",
      "logo": "https://suconnect.com/assets/logo.png",
      "description": "速众AI低代码开发平台",
    }),
  ],
]

📊 项目特性 ​

已实现功能 ​

1. 响应式企业官网 ✅ ​

  • 桌面端优化 (1500px 固定宽度)
  • 移动端适配
  • 平板端支持

2. 自定义主题和组件 ✅ ​

  • 12 个自定义 Vue 组件
  • 品牌化设计风格
  • 统一的视觉语言

3. 多页面导航 ✅ ​

  • 5 个主要页面
  • 下拉菜单支持
  • 面包屑导航

4. 静态资源管理 ✅ ​

  • 图片优化和压缩
  • 字体文件管理
  • 视频资源支持

5. SEO 优化 ✅ ​

  • Meta 标签配置
  • 结构化数据
  • 语义化 HTML
  • 图片 Alt 属性

6. 百度统计集成 ✅ ​

  • 页面访问统计
  • 用户行为分析
  • 转化率跟踪

7. 企业微信集成 ✅ ​

  • 客服二维码
  • 一键联系
  • 在线咨询

技术亮点 ​

1. 现代化技术栈 ​

  • VitePress: 基于 Vite 的快速静态站点生成器
  • Vue 3: 最新的 Vue 框架，支持 Composition API
  • TypeScript: 类型安全的 JavaScript 超集

2. 组件化架构 ​

  • 模块化组件设计
  • 可复用组件库
  • 统一的组件规范

3. 性能优化 ​

  • 代码分割
  • 懒加载
  • 图片优化
  • 缓存策略

4. 开发体验 ​

  • 热重载
  • 源码映射
  • 错误提示
  • 调试工具

🚀 部署指南 ​

静态部署流程 ​

1. 构建项目 ​

bash
# 安装依赖
npm install

# 构建生产版本
npm run build

2. 部署到服务器 ​

bash
# 将 dist/ 目录内容上传到 Web 服务器
scp -r dist/* user@server:/var/www/html/

# 或使用 rsync
rsync -avz dist/ user@server:/var/www/html/

3. 配置服务器 ​

nginx
# Nginx 配置示例
server {
    listen 80;
    server_name suconnect.com;
    root /var/www/html;
    index index.html;

    # 支持 SPA 路由
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # Gzip 压缩
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
}

推荐部署平台 ​

1. Vercel ​

bash
# 安装 Vercel CLI
npm i -g vercel

# 部署
vercel --prod

优势:

  • 自动部署
  • 全球 CDN
  • 零配置
  • 免费计划

2. Netlify ​

bash
# 构建命令
npm run build

# 发布目录
dist

优势:

  • 拖拽部署
  • 自动构建
  • 表单处理
  • 重定向规则

3. GitHub Pages ​

yaml
# .github/workflows/deploy.yml
name: Deploy to GitHub Pages
on:
  push:
    branches: [ main ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
      with:
        node-version: '18'
    - run: npm ci
    - run: npm run build
    - uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./dist

4. 阿里云 OSS + CDN ​

bash
# 使用阿里云 CLI 上传
ossutil cp -r dist/ oss://your-bucket-name/

# 配置 CDN 加速
# 在阿里云控制台配置 CDN 域名和缓存规则

优势:

  • 国内访问速度快
  • 成本可控
  • 自定义域名
  • SSL 证书

域名和 SSL 配置 ​

1. 域名解析 ​

bash
# A 记录
suconnect.com -> 服务器IP

# CNAME 记录
www.suconnect.com -> suconnect.com

2. SSL 证书 ​

bash
# 使用 Let's Encrypt
certbot --nginx -d suconnect.com -d www.suconnect.com

# 或使用阿里云/腾讯云免费证书

📈 开发计划 ​

短期目标 (1-3个月) ​

1. 完善组件文档 ✅ ​

  • [x] 组件 API 文档
  • [x] 使用示例
  • [x] 最佳实践

2. 优化移动端适配 🔄 ​

  • [ ] 响应式布局优化
  • [ ] 触摸交互改进
  • [ ] 性能优化

3. 添加更多交互功能 📋 ​

  • [ ] 在线演示功能
  • [ ] 用户反馈系统
  • [ ] 实时聊天

4. 性能优化 📋 ​

  • [ ] 图片懒加载
  • [ ] 代码分割优化
  • [ ] 缓存策略

中期目标 (3-6个月) ​

1. 多语言支持 🌐 ​

  • [ ] 英文版本
  • [ ] 国际化配置
  • [ ] 语言切换功能

2. 主题切换功能 🎨 ​

  • [ ] 深色模式
  • [ ] 主题定制
  • [ ] 用户偏好保存

3. 更多自定义组件 📦 ​

  • [ ] 数据可视化组件
  • [ ] 表单组件
  • [ ] 图表组件

4. 自动化部署流程 🤖 ​

  • [ ] CI/CD 流水线
  • [ ] 自动化测试
  • [ ] 监控告警

长期目标 (6-12个月) ​

1. 高级功能 🚀 ​

  • [ ] PWA 支持
  • [ ] 离线访问
  • [ ] 推送通知

2. 用户体验优化 ✨ ​

  • [ ] 动画效果
  • [ ] 微交互
  • [ ] 无障碍访问

3. 数据分析 📊 ​

  • [ ] 用户行为分析
  • [ ] A/B 测试
  • [ ] 转化率优化

4. 生态系统 🌱 ​

  • [ ] 插件系统
  • [ ] 主题市场
  • [ ] 组件库

🤝 贡献指南 ​

开发流程 ​

1. Fork 项目 ​

bash
# 在 GitHub 上 Fork 项目
# 克隆到本地
git clone https://github.com/your-username/suconnect_www.git
cd suconnect_www

2. 创建功能分支 ​

bash
# 创建并切换到新分支
git checkout -b feature/new-feature

# 或使用 GitHub CLI
gh repo fork suconnect_www
gh repo clone your-username/suconnect_www
cd suconnect_www
git checkout -b feature/new-feature

3. 开发功能 ​

bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 编写代码...

4. 提交代码 ​

bash
# 添加文件
git add .

# 提交更改
git commit -m "feat: 添加新功能"

# 推送到远程
git push origin feature/new-feature

5. 创建 Pull Request ​

  • 在 GitHub 上创建 Pull Request
  • 填写详细的描述
  • 添加相关标签
  • 请求代码审查

代码规范 ​

1. 文件命名 ​

bash
# 组件文件使用 PascalCase
CustomHomePage.vue
CustomNavBar.vue

# 其他文件使用 kebab-case
theme-config.js
style-guide.md

2. 组件命名 ​

vue
<!-- 组件名使用 PascalCase -->
<script setup>
// 组件名
defineOptions({
  name: 'CustomHomePage'
})
</script>

3. 变量命名 ​

javascript
// 使用 camelCase
const userName = 'admin'
const isVisible = true
const handleClick = () => {}

// 常量使用 UPPER_SNAKE_CASE
const API_BASE_URL = 'https://api.example.com'
const MAX_RETRY_COUNT = 3

4. CSS 类名 ​

scss
// 使用 BEM 命名法
.custom-component {
  &__header {
    // 组件头部
  }
  
  &__content {
    // 组件内容
  }
  
  &--active {
    // 激活状态
  }
}

5. 提交信息规范 ​

bash
# 使用 Conventional Commits
feat: 添加新功能
fix: 修复 bug
docs: 更新文档
style: 代码格式调整
refactor: 代码重构
test: 添加测试
chore: 构建过程或辅助工具的变动

代码审查 ​

1. 审查要点 ​

  • 代码质量和可读性
  • 功能完整性
  • 性能影响
  • 安全性考虑
  • 测试覆盖

2. 审查流程 ​

  1. 自动检查 (ESLint, Prettier)
  2. 代码审查者审查
  3. 测试验证
  4. 合并到主分支

🐛 故障排除 ​

常见问题 ​

1. 依赖安装失败 ​

bash
# 清除缓存
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

# 或使用 pnpm
pnpm store prune
rm -rf node_modules pnpm-lock.yaml
pnpm install

2. 开发服务器启动失败 ​

bash
# 检查端口占用
lsof -i :5173
kill -9 <PID>

# 或使用其他端口
npm run dev -- --port 3000

3. 构建失败 ​

bash
# 检查 Node.js 版本
node --version

# 清除构建缓存
rm -rf .vitepress/cache
npm run build

4. 样式不生效 ​

bash
# 检查 CSS 模块配置
# 确保样式文件路径正确
# 检查浏览器缓存

调试技巧 ​

1. 开发工具 ​

javascript
// 在组件中添加调试信息
console.log('组件数据:', data)
console.log('组件状态:', state)

// 使用 Vue DevTools
// 安装 Vue DevTools 浏览器扩展

2. 网络调试 ​

javascript
// 检查网络请求
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log('API 响应:', data))
  .catch(error => console.error('API 错误:', error))

3. 性能分析 ​

javascript
// 使用 Performance API
const startTime = performance.now()
// 执行代码
const endTime = performance.now()
console.log('执行时间:', endTime - startTime)

📞 联系方式 ​

公司信息 ​

  • 公司名称: 南京小联科技有限公司
  • 官方网站: 速众AI低代码开发平台
  • 备案号: 苏ICP备20024566号-1
  • 备案链接: https://beian.miit.gov.cn/

技术支持 ​

商务合作 ​

  • 销售咨询: [销售邮箱]
  • 商务合作: [商务邮箱]
  • 企业微信: 扫描网站二维码

社区交流 ​

  • 技术交流群: [QQ群号/微信群]
  • 开发者论坛: [论坛链接]
  • 开源贡献: [贡献指南链接]

最后更新: 2024年12月
文档版本: v2.0.0
维护者: 开发团队
许可证: MIT License

💡 提示: 本文档会持续更新，请关注最新版本。如有问题或建议，欢迎提交 Issue 或 Pull Request。

扫码添加微信
立即预约专属演示

24小时服务热线

400-160-9656

置顶
预约演示，专属客服一对一服务
扫码添加微信
立即预约专属演示

24小时服务热线

400-160-9656

速众AI低代码开发平台
24小时服务热线
400-160-9656
网站地址https://www.suconnect.com
联系地址

江苏省南京市浦口区华富路
国恒科技大厦B栋3-I室

快捷入口
技术架构客户案例帮助中心版本定价
服务与支持
关于我们开发文档更新日志产品PPT
合作伙伴
Bladex快速开发平台FormMaking表单设计

扫码添加微信

Copyright © 南京小联科技有限公司 All Rights Reserved 工信部备案号：苏ICP备19022900号-2