# TLBoundlessBW

**Repository Path**: leecj/tlboundless-bw

## Basic Information

- **Project Name**: TLBoundlessBW
- **Description**: 「无界黑白」是一个专注于HarmonyOS Next技术的开源项目，旨在探索和实现高效的多端协同功能型应用。项目采用ArkTS语言开发，基于HarmonyOS最新的UI框架，支持开发者构建快速、稳定且具有丰富交互特效的应用程序。

本项目重点展示了HarmonyOS下一代应用开发的核心技术，包括响应式布局、导航管理、状态管理和多端适配等关键功能。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-08-05
- **Last Updated**: 2026-01-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 「无界黑白」

#### 介绍
「无界黑白」是一个专注于HarmonyOS Next技术的开源项目，旨在探索和实现高效的多端协同功能型应用。项目采用ArkTS语言开发，基于HarmonyOS最新的UI框架，支持开发者构建快速、稳定且具有丰富交互特效的应用程序。

本项目重点展示了HarmonyOS下一代应用开发的核心技术，包括响应式布局、导航管理、状态管理和多端适配等关键功能。

#### 软件架构

##### 技术架构
- **开发语言**: ArkTS (基于TypeScript扩展)
- **UI框架**: HarmonyOS ArkUI
- **状态管理**: @State、@Link、@Prop、@StorageProp等装饰器
- **导航系统**: Navigation + NavPathStack 实现页面路由管理
- **响应式设计**: 支持不同屏幕尺寸的自适应布局

##### 项目结构
```

tlboundless-bw/
├── entry/                     # 主模块
│   ├── src/main/ets/          # ArkTS源代码
│   │   ├── common/            # 公共组件和工具类
│   │   ├── models/            # 数据模型
│   │   ├── pages/             # 页面组件
│   │   │   ├── roots/         # 根页面（主页面容器）
│   │   │   └── tabbar/        # 底部导航栏相关
│   │   └── resources/         # 资源文件
│   └── ...
└── ...
```
##### 核心功能模块
1. **主页面框架 (TLMainPage)**
    - 基于Navigation导航系统实现页面路由管理
    - 底部TabBar导航（支持手机和平板不同布局）
    - 响应式断点系统，适配不同屏幕尺寸
    - 双击返回退出应用功能

2. **特效展示模块 (TLRootEffects)**
    - 网格布局展示各类交互特效
    - 支持图片、标题等内容展示
    - 点击跳转到详情页面

3. **其他功能模块 (TLRootOther)**
    - 扩展功能展示区域

4. **个人中心模块 (TLRootMine)**
    - 用户个人信息和设置页面

5. **导航系统**
    - 统一的NavPathStack管理页面跳转
    - AppStorage全局状态共享
    - 页面间参数传递

#### 安装教程

1. 确保已安装DevEco Studio 5.0+版本
2. 克隆项目到本地：
   ```
bash
git clone https://gitee.com/tlboundless-bw/tlboundless-bw.git
   ```
3. 使用DevEco Studio打开项目
4. 同步项目依赖并构建

#### 使用说明

1. **运行项目**
   - 连接HarmonyOS设备或启动模拟器
   - 点击Run按钮运行应用

2. **功能体验**
   - 首页展示各类交互特效，点击可查看详情
   - 底部TabBar可切换不同功能模块
   - 平板模式下TabBar位于左侧，手机模式下位于底部

3. **自定义开发**
   - 在[models/TLEffectList.ts](file:///Users/lichuanjun/Documents/projects/git/gitee/tlboundless-bw/entry/build/default/cache/default/default@CompileArkTS/esmodule/debug/entry/src/main/ets/models/TLEffectList.ts)中添加新的特效项
   - 在`navDestinationPageMap`中增加对应的页面路由
   - 扩展各功能模块内容

#### 核心技术特性

1. **响应式布局**
   - 通过断点系统自动适配不同屏幕尺寸
   - 支持手机(MD)和平板(LG)两种布局模式

2. **导航管理**
   - 统一的Navigation导航栈管理
   - 页面间流畅跳转和参数传递
   - 支持页面返回拦截

3. **状态管理**
   - 多层次状态管理机制
   - 组件间状态共享和同步
   - 全局状态存储(AppStorage)

4. **UI组件化**
   - 高度组件化的页面结构
   - 可复用的UI组件设计
   - 统一的视觉风格

#### 参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

#### 项目亮点

1. **现代化UI设计**: 采用HarmonyOS Next最新设计语言
2. **多端适配**: 一套代码适配手机和平板等多种设备
3. **性能优化**: 合理的状态管理和组件复用机制
4. **易于扩展**: 模块化设计，便于功能扩展和维护
5. **交互丰富**: 展示多种HarmonyOS特色交互效果

#### 未来规划

- 增加更多HarmonyOS特色功能演示
- 完善多语言支持
- 添加更多实用工具组件
- 优化性能和用户体验