@syhr/sy-graph 1.0.0

package/README.md

@@ -0,0 +1,173 @@
+# @syhr/sy-graph
+
+一个基于 Meta2D 的平面图形配置工具 Vue 3 组件库。
+
+## 特性
+
+- 🎨 基于 Meta2D 的强大图形编辑能力
+- 🔧 支持多种图形类型和图表
+- 📱 响应式设计，支持移动端
+- 🎯 TypeScript 支持
+- 📦 多种模块格式支持（ES、UMD、CommonJS）
+- 🔌 Vue 3 插件化架构
+- 🛡️ 安全的全局属性处理，避免 $t 等变量冲突
+
+## 安装
+
+```bash
+npm install @syhr/sy-graph
+```
+
+### Peer Dependencies
+
+确保你的项目已安装以下 peer dependencies：
+
+```bash
+npm install vue@^3.0.0 element-plus@^2.0.0 @meta2d/core@^1.0.0 @meta2d/svg@^1.0.0 @meta2d/utils@^1.0.0
+```
+
+## 使用
+
+### 全局注册（推荐）
+
+```javascript
+import { createApp } from 'vue';
+import SyGraph from '@syhr/sy-graph';
+import '@syhr/sy-graph/style';
+
+const app = createApp(App);
+app.use(SyGraph);
+app.mount('#app');
+```
+
+### 局部使用
+
+```javascript
+import { SyGraph } from '@syhr/sy-graph';
+import '@syhr/sy-graph/style';
+
+export default {
+  components: {
+    SyGraph,
+  },
+};
+```
+
+### 在模板中使用
+
+```vue
+<template>
+  <div>
+    <SyGraph :url="graphUrl" :local="false" :show-map="true" @loaded="handleLoaded" @graph-event="handleGraphEvent" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const graphUrl = ref('path/to/your/graph.json');
+
+const handleLoaded = (stage) => {
+  console.log('Graph loaded:', stage);
+};
+
+const handleGraphEvent = (event) => {
+  console.log('Graph event:', event);
+};
+</script>
+```
+
+## Props
+
+| 属性      | 类型    | 默认值 | 说明               |
+| --------- | ------- | ------ | ------------------ |
+| url       | String  | ''     | 图纸数据 URL       |
+| local     | Boolean | false  | 是否为本地数据     |
+| planeData | Object  | null   | 直接传入的图纸数据 |
+| planeId   | String  | ''     | 图纸 ID            |
+| showMap   | Boolean | false  | 是否显示地图       |
+| isFactory | Boolean | false  | 是否为工厂模式     |
+
+## Events
+
+| 事件名      | 说明           | 参数               |
+| ----------- | -------------- | ------------------ |
+| loaded      | 图纸加载完成   | stage: Meta2D 实例 |
+| graph-event | 图纸自定义事件 | event: 事件对象    |
+
+## 方法
+
+通过 ref 获取组件实例后可调用以下方法：
+
+- `changeVisibleByLevel(level, isStrict)` - 切换显示层级
+- `batchUpdatePen(dataList)` - 批量更新图元
+- `setValue(pen, render)` - 设置图元属性
+- `getAllPens()` - 获取所有图元
+- `getStage()` - 获取 Meta2D 实例
+
+## TypeScript 支持
+
+本包提供完整的 TypeScript 类型声明：
+
+```typescript
+import type { SyGraphProps, SyGraphInstance } from '@syhr/sy-graph';
+
+// 组件 ref 类型
+const graphRef = ref<SyGraphInstance>();
+
+// Props 类型
+const props: SyGraphProps = {
+  url: 'path/to/graph.json',
+  showMap: true,
+};
+```
+
+## 浏览器支持
+
+- Chrome >= 60
+- Firefox >= 60
+- Safari >= 12
+- Edge >= 79
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 开发模式
+npm run dev
+
+# 构建库
+npm run build:lib
+
+# 构建类型
+npm run build:types
+
+# 完整构建
+npm run build:all
+
+# 类型检查
+npm run type-check
+
+# 代码检查
+npm run lint
+```
+
+## 许可证
+
+[MIT](LICENSE)
+
+## 更新日志
+
+查看 [CHANGELOG.md](CHANGELOG.md) 了解详细的更新记录。
+
+## 贡献
+
+欢迎提交 Issue 和 Pull Request。
+
+## 相关链接
+
+- [Meta2D 官方文档](https://meta2d.com)
+- [Vue 3 文档](https://vuejs.org)
+- [Element Plus 文档](https://element-plus.org)

package/lib/style.css

@@ -0,0 +1 @@
+.meta2d-editor[data-v-664781e2]{position:relative;width:100%;height:100%}.meta2d-editor[data-v-664781e2] .stage.value-map{position:absolute;top:1.04vw;right:.52vw;z-index:200}.meta2d-editor .toolbox[data-v-664781e2]{position:absolute;display:none;width:5.21vw;height:1.56vw;background:red;z-index:10000}.preview-container[data-v-c09e5d6b]{position:relative;width:100%;height:100%}.preview-container .back-btn[data-v-c09e5d6b]{position:absolute;bottom:.52vw;right:.52vw;z-index:1000}