# converge-ui

**Repository Path**: chzhp/converge-ui

## Basic Information

- **Project Name**: converge-ui
- **Description**: 一个能够无缝结合React和Vue3的前端框架，提供统一的组件系统、状态管理和开发体验。
- **Primary Language**: Unknown
- **License**: MPL-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-25
- **Last Updated**: 2025-08-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Converge UI - 统一前端框架

一个能够无缝结合React和Vue3的前端框架，提供统一的组件系统、状态管理和开发体验。

## 🚀 特性

- **统一组件系统**: 支持React和Vue3组件无缝集成
- **统一状态管理**: 提供响应式状态管理，支持跨框架状态共享
- **统一路由系统**: 支持React和Vue3的路由统一管理
- **统一Hooks系统**: 提供跨框架的Hooks和Composables
- **类型安全**: 完整的TypeScript支持
- **插件系统**: 可扩展的插件架构
- **开发工具**: 内置开发调试工具

## 📦 安装

```bash
npm install converge-ui
```

## 🎯 快速开始

### 基础使用

```typescript
import { createApp, ComponentType } from 'converge-ui'

// 创建应用
const app = createApp({
  type: ComponentType.REACT, // 或 ComponentType.VUE
  root: '#app',
  routes: [
    {
      path: '/',
      component: {
        id: 'home',
        type: ComponentType.REACT,
        props: {}
      }
    }
  ]
})

// 挂载应用
app.mount()
```

### React组件示例

```tsx
import React from 'react'
import { withConvergeUI, useConvergeState } from 'converge-ui/react'

const Counter: React.FC = () => {
  const [count, setCount] = useConvergeState(0)

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

// 使用高阶组件包装
export default withConvergeUI(Counter, 'Counter')
```

### Vue组件示例

```vue
<template>
  <div>
    <h2>Count: {{ count }}</h2>
    <button @click="increment">+1</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useConvergeRef } from 'converge-ui/vue'

export default defineComponent({
  name: 'Counter',
  setup() {
    const count = useConvergeRef(0)

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
})
</script>
```

### 状态管理

```typescript
import { createStore, reactive } from 'converge-ui'

// 创建状态管理
const store = createStore({
  user: {
    name: 'John Doe',
    email: 'john@example.com'
  },
  theme: 'light'
})

// 创建响应式数据
const counter = reactive(0)

// 订阅状态变化
store.subscribe((state) => {
  console.log('State updated:', state)
})

counter.subscribe((value) => {
  console.log('Counter updated:', value)
})
```

### 混合使用

```typescript
import { createApp, ComponentType, createStore } from 'converge-ui'
import { withConvergeUI } from 'converge-ui/react'
import { useConvergeRef } from 'converge-ui/vue'

// 共享状态
const sharedStore = createStore({
  user: { name: 'John' },
  theme: 'light'
})

// React组件
const ReactComponent = withConvergeUI(({ user }) => {
  return <div>Hello {user.name}</div>
}, 'ReactComponent')

// Vue组件
const VueComponent = {
  setup() {
    const theme = useConvergeRef(sharedStore.getState().theme)
    return { theme }
  },
  template: '<div>Theme: {{ theme }}</div>'
}

// 创建应用
const app = createApp({
  type: ComponentType.REACT,
  root: '#app',
  stores: { shared: sharedStore }
})
```

## 🏗️ 架构

### 核心模块

- **Core**: 核心类型定义和基础功能
- **Store**: 统一状态管理系统
- **Component**: 统一组件系统
- **Router**: 统一路由系统
- **Hooks**: 统一Hooks系统
- **React**: React适配器
- **Vue**: Vue适配器
- **Utils**: 工具函数和适配器

### 设计模式

- **适配器模式**: 为不同框架提供统一接口
- **单例模式**: 管理器类使用单例模式
- **观察者模式**: 状态管理和事件系统
- **工厂模式**: 组件和适配器创建

## 📚 API文档

### 核心API

#### createApp(config)
创建应用实例

```typescript
interface IAppConfig {
  type: ComponentType
  root: string | HTMLElement
  routes?: IRoute[]
  stores?: Record<string, IStore>
  plugins?: IPlugin[]
}
```

#### createStore(initialState)
创建状态管理实例

```typescript
const store = createStore({
  user: { name: 'John' },
  theme: 'light'
})

store.setState({ theme: 'dark' })
store.subscribe((state) => console.log(state))
```

#### reactive(value)
创建响应式数据

```typescript
const counter = reactive(0)
counter.value = 1
counter.subscribe((value) => console.log(value))
```

### React API

#### withConvergeUI(Component, name)
高阶组件包装器

#### useConvergeState(initialState)
统一状态Hook

#### useConvergeEffect(effect, deps)
统一副作用Hook

### Vue API

#### useConvergeRef(initialValue)
统一ref Composable

#### useConvergeComputed(getter)
统一computed Composable

#### useConvergeWatch(source, callback)
统一watch Composable

## 🔧 开发

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

### 构建

```bash
npm run build
```

### 测试

```bash
npm run test
```

## 🤝 贡献

欢迎提交Issue和Pull Request！

## 📄 许可证

MIT License