# ccuniappComponents

**Repository Path**: webchencong/ccuniapp

## Basic Information

- **Project Name**: ccuniappComponents
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-13
- **Last Updated**: 2025-09-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ccComps（基于 uni-app 的个人组件库）

一个自用的跨端组件库示例，当前已内置「自定义导航栏 CCNavbar」。支持 H5、微信小程序等平台，遵循简单、无第三方依赖的原则（不引用其他任何组件库）。

## 功能一览
- CCNavbar：
  - 标题绝对居中、最大宽度限制、可配置字号与颜色
  - 左/右区域插槽与内置图标（返回箭头、更多）
  - 固定吸顶与占位、状态栏安全区处理
  - 毛玻璃滚动效果（H5/App），小程序自动降级
  - 微信小程序自动避让右侧胶囊按钮（adaptCapsule）
  - 自动返回（autoBack）与左右点击事件

## 快速开始

### 环境要求
- Node.js ≥ 16（建议 20）
- pnpm（统一包管理器）

### 安装依赖
```bash
pnpm i
```

### 开发调试
- H5：
  ```bash
  pnpm dev:h5
  ```
  访问 http://localhost:5173/

- 微信小程序：
  ```bash
  pnpm dev:mp-weixin
  ```
  编译完成后，使用「微信开发者工具」导入 dist/dev/mp-weixin 目录运行。

### 构建发布
- H5 构建：
  ```bash
  pnpm build:h5
  ```
- 微信小程序构建：
  ```bash
  pnpm build:mp-weixin
  ```

## 目录结构
```
ccComps/
├─ src/
│  ├─ components/       # 通用组件
│  │  └─ CCNavbar.vue
│  ├─ pages/
│  │  └─ navbar-demo/   # 组件演示页
│  ├─ App.vue
│  ├─ main.js
│  ├─ pages.json
│  └─ manifest.json
├─ package.json
├─ index.html
└─ vite.config.js
```

## 组件文档：CCNavbar

### 基本使用
```vue
<template>
  <view class="page">
    <CCNavbar
      fixed
      placeholder
      title="Navbar 功能展示"
      leftIcon="arrow-left"
      :autoBack="true"
      :adaptCapsule="true"
      :titleSize="16"
      titleColor="#303133"
      bgColor="transparent"
    />
  </view>
</template>
```

### Props（常用）
- safeAreaInsetTop: Boolean = true — 顶部安全区
- placeholder: Boolean = false — fixed 时是否生成等高占位
- fixed: Boolean = true — 是否吸顶
- border: Boolean = true — 是否显示底部分割线
- title: String — 标题文案
- titleWidth: String | Number = '400rpx' — 标题最大宽度
- titleColor: String = '#303133' — 标题颜色
- titleSize: String | Number = 16 — 标题字号（px 或 rpx 字符串）
- height: String | Number = 44 — 导航内容高度（不含状态栏）
- bgColor: String = 'transparent' — 背景色
- leftIcon: String — 左侧图标名（内置 'arrow-left'）
- leftIconSize: String | Number = 20 — 左图标尺寸（px）
- leftIconColor: String = '#303133' — 左图标颜色
- leftText: String — 左侧文字
- rightText: String — 右侧文字
- rightIcon: String — 右侧图标名（内置 'more'）
- autoBack: Boolean = false — 点击左侧自动返回
- titleStyle: String | Object — 额外的标题样式
- adaptCapsule: Boolean = true — 微信小程序自动避开右侧胶囊
- usePageScroll: Boolean = true — 组件内部监听页面滚动用于毛玻璃
- blurForce: Boolean = false — 外部强制控制毛玻璃开关

### 事件（Emits）
- leftClick() — 点击左侧区域
- rightClick() — 点击右侧区域

### 平台差异与兼容
- H5 / App：左箭头使用内联 SVG 渲染，支持动态颜色与尺寸。
- 微信小程序：左箭头使用 view + CSS 边框绘制，避免内联 SVG 兼容问题；右侧内容会根据胶囊按钮位置自动增加内边距，从而保证标题不被遮挡（需开启 adaptCapsule）。

## 常见问题（FAQ）
- Q：微信小程序里看不到返回箭头？
  - A：确认 leftIcon="arrow-left"；提高 leftIconColor 与背景的对比度；在演示页打开“显示返回箭头”开关；重新编译后通过微信开发者工具导入 dist/dev/mp-weixin。
- Q：标题在小程序不完全居中或被胶囊盖住？
  - A：确保 adaptCapsule 开启；组件会在挂载时读取胶囊位置并动态设置右侧 padding。
- Q：毛玻璃无效果？
  - A：小程序端不支持 backdrop-filter，组件已降级为半透明背景 + 阴影；H5/App 正常显示毛玻璃。

## 开发约定
- 统一使用 pnpm 作为包管理器。
- 不引入第三方组件库，样式与图形优先使用原生能力实现（如 CSS 边框绘制箭头）。
- 新增公共组件需在组件顶部补充中文注释（功能、使用场景、Props/Emits、示例）。

---
如需补充更多组件或完善文档，请直接在 src/components 中新增并在演示页扩展示例。