# 物模型编辑器

**Repository Path**: ukiot/things-model-editor

## Basic Information

- **Project Name**: 物模型编辑器
- **Description**: 一个基于 Vue3 + TypeScript 的炫酷物模型编辑器，具有科技感强、交互性好、模块化设计的特点。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-17
- **Last Updated**: 2025-11-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 物模型编辑器 (ThingModel Editor)

一个基于 Vue3 + TypeScript 的炫酷物模型编辑器，具有科技感强、交互性好、模块化设计的特点。

## ✨ 特性

- 🚀 **现代化技术栈**: Vue3 + TypeScript + Vite
- 🎨 **炫酷UI**: 科技感十足的渐变设计和流畅动画
- 🧩 **模块化架构**: 清晰的代码结构，易于维护和扩展
- 📦 **可集成**: 核心功能可独立提取，集成到其他应用
- 💾 **导入导出**: 支持 JSON 格式的物模型导入导出
- 🔧 **功能齐全**: 支持属性、事件、服务的完整编辑
- ✅ **类型安全**: 完整的 TypeScript 类型定义
- 🎯 **通用性强**: 适配多种物联网场景


![预览](docs/预览.gif)

## 🏗️ 项目结构

```
src/
├── components/          # 组件目录
│   ├── ThingModelEditor.vue    # 主编辑器组件
│   ├── PropertyEditor.vue      # 属性编辑器
│   ├── EventEditor.vue         # 事件编辑器
│   └── ServiceEditor.vue       # 服务编辑器
├── composables/        # 组合式函数
│   └── useThingModel.ts       # 物模型逻辑
├── types/              # 类型定义
│   └── thingmodel.ts          # 物模型类型
├── utils/              # 工具函数
│   ├── export.ts              # 导出功能
│   ├── import.ts              # 导入功能
│   └── validator.ts           # 验证器
├── stores/             # 状态管理
│   └── thingmodel.ts          # 物模型状态
├── styles/             # 样式文件
│   └── main.css               # 全局样式
├── App.vue             # 根组件
└── main.ts             # 入口文件
```

## 🚀 快速开始

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

## 📖 使用方法

### 作为独立应用使用

直接运行开发服务器即可使用完整的物模型编辑器。

### 集成到其他项目

```typescript
// 1. 复制 src/components、src/types、src/utils 到你的项目
// 2. 在你的组件中导入

import ThingModelEditor from '@/components/ThingModelEditor.vue'
import type { ThingModel } from '@/types/thingmodel'

// 3. 使用组件
<ThingModelEditor 
  :modelValue="thingModel"
  @update:modelValue="handleUpdate"
/>
```

## 🎯 核心功能

### 1. 属性管理
- 添加、编辑、删除属性
- 支持多种数据类型（int、float、double、text、date、bool、enum、struct、array）
- 读写类型配置
- 数据规格定义

### 2. 事件管理
- 添加、编辑、删除事件
- 事件类型配置（info、alert、error）
- 输出参数定义

### 3. 服务管理
- 添加、编辑、删除服务
- 调用方式配置（async、sync）
- 输入输出参数定义

### 4. 导入导出
- JSON 格式导入导出
- 数据验证
- 错误提示

## 🎨 设计特色

- **渐变背景**: 深色科技感渐变
- **毛玻璃效果**: 现代化的半透明卡片
- **流畅动画**: 平滑的过渡和悬停效果
- **响应式设计**: 适配各种屏幕尺寸
- **直观交互**: 清晰的视觉反馈

## 📝 物模型数据结构

```typescript
interface ThingModel {
  productKey: string
  productName: string
  properties: Property[]
  events: Event[]
  services: Service[]
}
```

## 🔧 技术栈

- **Vue 3**: 组合式 API
- **TypeScript**: 类型安全
- **Pinia**: 状态管理
- **Vite**: 构建工具

## 📄 License

MIT License


***`UKIoT Group Copy Right @2025`***