1
Penny Lens 项目
2
├── 小程序端 (UniApp + Vue 3)
3
│   ├── 微信小程序
4
│   ├── 支付宝小程序
5
│   ├── H5 应用
6
│   └── 移动 App
7
├── PC端 (Nuxt 4 + Vue 3)
8
│   ├── Web 应用
9
│   └── 桌面应用
10
└── 服务端 (支付宝小程序云)
11
    ├── Serverless 函数
12
    ├── MongoDB 数据库
13
    └── OSS 文件存储

1
# 组件文件
2
PascalCase.vue          # 组件文件
3
kebab-case.vue          # 页面文件
4

5
# 工具文件
6
camelCase.ts            # 工具函数
7
kebab-case.ts           # 配置文件
8

9
# 目录命名
10
kebab-case/             # 目录名

1
// 常量
2
const API_BASE_URL = 'https://api.example.com'
3
const MAX_RETRY_COUNT = 3
4

5
// 变量
6
const userName = 'john'
7
const isLoading = false
8
const userList = []
9

10
// 函数
11
function getUserInfo() {}
12
function handleSubmit() {}
13
function validateForm() {}
14

15
// 类型
16
interface UserInfo {}
17
type UserStatus = 'active' | 'inactive'

1
<!-- 组件名使用 PascalCase -->
2
<template>
3
  <UserCard />
4
  <AssetSelector />
5
  <RecordForm />
6
</template>
7

8
<script setup lang="ts">
9
// 组件名定义
10
defineOptions({
11
  name: 'UserCard'
12
})
13
</script>

1
<template>
2
  <!-- 模板内容 -->
3
</template>
4

5
<script setup lang="ts">
6
// 1. 导入依赖
7
import { ref, computed, onMounted } from 'vue'
8
import { useRouter } from 'vue-router'
9

10
// 2. 类型定义
11
interface Props {
12
  title: string
13
  data: any[]
14
}
15

16
interface Emits {
17
  submit: [data: any]
18
  cancel: []
19
}
20

21
// 3. Props 和 Emits
22
const props = defineProps<Props>()
23
const emit = defineEmits<Emits>()
24

25
// 4. 响应式数据
26
const isLoading = ref(false)
27
const formData = ref({})
28

29
// 5. 计算属性
30
const filteredData = computed(() => {
31
  return props.data.filter(item => item.active)
32
})
33

34
// 6. 方法
35
function handleSubmit() {
36
  emit('submit', formData.value)
37
}
38

39
// 7. 生命周期
40
onMounted(() => {
41
  // 初始化逻辑
42
})
43
</script>
44

45
<style scoped>
46
/* 样式内容 */
47
</style>

1
feature/user-authentication    # 功能分支
2
bugfix/login-error-handling    # 修复分支
3
hotfix/security-vulnerability # 热修复分支
4
release/v1.0.0                # 发布分支

1
<type>(<scope>): <description>
2

3
[optional body]
4

5
[optional footer(s)]

1
# Dockerfile
2
FROM node:18-alpine as builder
3

4
WORKDIR /app
5
COPY package*.json ./
6
RUN npm ci --only=production
7

8
COPY . .
9
RUN npm run build
10

11
FROM nginx:alpine
12
COPY --from=builder /app/dist /usr/share/nginx/html
13
COPY nginx.conf /etc/nginx/nginx.conf
14

15
EXPOSE 80
16
CMD ["nginx", "-g", "daemon off;"]

1
// 使用懒加载
2
const LazyComponent = defineAsyncComponent(() => import('./HeavyComponent.vue'))
3

4
// 使用虚拟滚动
5
import { VirtualList } from '@tanstack/vue-virtual'
6

7
// 图片懒加载
8
<img v-lazy="imageUrl" alt="description" />
9

10
// 防抖和节流
11
import { debounce, throttle } from 'lodash-es'
12

13
const debouncedSearch = debounce(searchFunction, 300)
14
const throttledScroll = throttle(scrollHandler, 100)

1
// 数据库索引优化
2
db.collection('users').createIndex({ email: 1 })
3
db.collection('transactions').createIndex({ userId: 1, date: -1 })
4

5
// 缓存策略
6
import Redis from 'ioredis'
7
const redis = new Redis(process.env.REDIS_URL)
8

9
async function getCachedData(key: string) {
10
  const cached = await redis.get(key)
11
  if (cached) return JSON.parse(cached)
12

13
  const data = await fetchDataFromDB()
14
  await redis.setex(key, 3600, JSON.stringify(data))
15
  return data
16
}

1
// 全局错误处理
2
app.config.errorHandler = (err, instance, info) => {
3
  console.error('Global error:', err)
4
  console.error('Error info:', info)
5

6
  // 发送错误报告
7
  errorReportingService.report(err, {
8
    component: instance?.$options.name,
9
    info
10
  })
11
}
12

13
// API 错误处理
14
class ApiError extends Error {
15
  constructor(
16
    public code: number,
17
    public message: string,
18
    public data?: any
19
  ) {
20
    super(message)
21
    this.name = 'ApiError'
22
  }
23
}
24

25
async function apiRequest(url: string, options?: RequestInit) {
26
  try {
27
    const response = await fetch(url, options)
28
    const data = await response.json()
29

30
    if (data.code !== 200) {
31
      throw new ApiError(data.code, data.message, data.data)
32
    }
33

34
    return data.data
35
  } catch (error) {
36
    if (error instanceof ApiError) {
37
      throw error
38
    }
39

40
    throw new ApiError(500, '网络请求失败', error)
41
  }
42
}

1
// 统一错误处理
2
export class AppError extends Error {
3
  constructor(
4
    public code: number,
5
    public message: string,
6
    public statusCode: number = 500
7
  ) {
8
    super(message)
9
    this.name = 'AppError'
10
  }
11
}
12

13
export function handleError(error: any): AppResponse {
14
  if (error instanceof AppError) {
15
    return {
16
      code: error.code,
17
      message: error.message,
18
      data: null
19
    }
20
  }
21

22
  // 记录未知错误
23
  console.error('Unknown error:', error)
24

25
  return {
26
    code: 500,
27
    message: '服务器内部错误',
28
    data: null
29
  }
30
}

1
// XSS 防护
2
import DOMPurify from 'dompurify'
3

4
function sanitizeHtml(html: string): string {
5
  return DOMPurify.sanitize(html)
6
}
7

8
// CSRF 防护
9
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
10

11
// 敏感信息处理
12
function maskSensitiveData(data: string): string {
13
  if (data.length <= 4) return '*'.repeat(data.length)
14
  return data.slice(0, 2) + '*'.repeat(data.length - 4) + data.slice(-2)
15
}

1
// 输入验证
2
import Joi from 'joi'
3

4
const userSchema = Joi.object({
5
  username: Joi.string().alphanum().min(3).max(30).required(),
6
  email: Joi.string().email().required(),
7
  password: Joi.string().min(8).pattern(new RegExp('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])')).required()
8
})
9

10
// 速率限制
11
import rateLimit from 'express-rate-limit'
12

13
const limiter = rateLimit({
14
  windowMs: 15 * 60 * 1000, // 15分钟
15
  max: 100, // 限制每个IP 100次请求
16
  message: '请求过于频繁，请稍后再试'
17
})
18

19
// SQL 注入防护
20
// 使用参数化查询
21
const user = await db.collection('users').findOne({
22
  email: email, // 直接使用变量，不使用字符串拼接
23
  password: hashedPassword
24
})

1
// 工具函数测试
2
describe('utils/format', () => {
3
  describe('formatCurrency', () => {
4
    it('should format currency correctly', () => {
5
      expect(formatCurrency(1234.56)).toBe('¥1,234.56')
6
      expect(formatCurrency(0)).toBe('¥0.00')
7
      expect(formatCurrency(-100)).toBe('-¥100.00')
8
    })
9
  })
10
})

1
// API 集成测试
2
describe('API Integration', () => {
3
  it('should create user successfully', async () => {
4
    const userData = {
5
      username: 'testuser',
6
      email: 'test@example.com',
7
      password: 'password123'
8
    }
9

10
    const response = await request(app)
11
      .post('/api/users')
12
      .send(userData)
13
      .expect(201)
14

15
    expect(response.body.data.username).toBe(userData.username)
16
  })
17
})

1
// 端到端测试
2
describe('User Registration Flow', () => {
3
  it('should complete user registration', async () => {
4
    await page.goto('/register')
5

6
    await page.fill('[data-testid="username"]', 'testuser')
7
    await page.fill('[data-testid="email"]', 'test@example.com')
8
    await page.fill('[data-testid="password"]', 'password123')
9

10
    await page.click('[data-testid="submit-button"]')
11

12
    await expect(page).toHaveURL('/dashboard')
13
    await expect(page.locator('[data-testid="welcome-message"]')).toContainText('Welcome, testuser!')
14
  })
15
})

1
// 使用 debugger 语句
2
function complexFunction() {
3
  debugger // 浏览器会在此处暂停
4
  // 可以检查变量值、调用栈等
5
}
6

7
// 使用 console 调试
8
console.log('Debug info:', { user, data })
9
console.table(dataArray) // 以表格形式显示数组
10
console.group('API Response') // 分组显示日志
11
console.log(response)
12
console.groupEnd()

1
import winston from 'winston'
2

3
const logger = winston.createLogger({
4
  level: 'info',
5
  format: winston.format.combine(
6
    winston.format.timestamp(),
7
    winston.format.errors({ stack: true }),
8
    winston.format.json()
9
  ),
10
  transports: [
11
    new winston.transports.File({ filename: 'error.log', level: 'error' }),
12
    new winston.transports.File({ filename: 'combined.log' }),
13
    new winston.transports.Console({
14
      format: winston.format.simple()
15
    })
16
  ]
17
})
18

19
// 使用日志
20
logger.info('User login successful', { userId, timestamp: Date.now() })
21
logger.error('Database connection failed', { error: error.message })

1
// 性能监控中间件
2
function performanceMiddleware(req: Request, res: Response, next: NextFunction) {
3
  const start = Date.now()
4

5
  res.on('finish', () => {
6
    const duration = Date.now() - start
7
    logger.info('Request completed', {
8
      method: req.method,
9
      url: req.url,
10
      duration: `${duration}ms`,
11
      status: res.statusCode
12
    })
13
  })
14

15
  next()
16
}