Add PC component library (Lite version)

.gitignore

@@ -0,0 +1,15 @@
+node_modules
+package-lock.json
+
+.temp
+.temp-pub
+.vscode
+.DS_Store
+.history
+.VSCodeCounter
+
+yarn.lock
+.idea/
+
+dist/
+coverage/

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "arrowParens": "always"
+}

README.md

@@ -1 +1,66 @@
-# comlib-pc-normal-lite
+# Mybricks PC端通用组件库 (Lite版本)
+
+<div align="center">
+  <p>轻量级的PC端通用组件库，为MyBricks低代码平台提供基础组件支持</p>
+</div>
+
+## ✨ 特性
+
+- 🚀 轻量级设计，包含最常用的基础组件
+- 🎨 简洁的UI设计，开箱即用
+- 📦 零外部依赖（除React外）
+- 🔧 完整的TypeScript支持
+- 🌍 支持国际化
+
+## 📦 组件列表
+
+### 基础组件
+
+- **文本 (Text)**: 用于展示文本内容的基础组件
+- **按钮 (Button)**: 可点击的按钮组件，支持多种样式
+- **输入框 (Input)**: 用于接收用户输入的文本框组件
+
+## 🔨 开发
+
+### 安装依赖
+
+```bash
+npm install
+```
+
+### 启动开发服务器
+
+```bash
+npm run dev
+```
+
+### 构建
+
+```bash
+npm run build
+```
+
+## 📝 使用说明
+
+本组件库基于MyBricks平台开发，可在MyBricks编辑器中直接使用。
+
+### 环境依赖
+
+组件运行时需要以下环境方法：
+
+```typescript
+const env = {
+  i18n(text: string) {
+    // 多语言定制
+    return text;
+  }
+};
+```
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+## 📄 License
+
+ISC

mybricks.json

@@ -0,0 +1,14 @@
+{
+  "title": "PC常规组件库(Lite)",
+  "description": "PC端通用组件库的轻量级版本，包含最基础和常用的组件",
+  "comAry": [
+    {
+      "title": "基础组件",
+      "comAry": [
+        "./src/text/com.json",
+        "./src/button/com.json",
+        "./src/input/com.json"
+      ]
+    }
+  ]
+}

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@mybricks/comlib-pc-normal-lite",
+  "version": "1.0.0",
+  "description": "PC端通用组件库(Lite版本)",
+  "main": "./dist/index.js",
+  "scripts": {
+    "dev": "mybricks dev",
+    "build": "mybricks build",
+    "publish": "mybricks publish"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mybricks/comlib-pc-normal-lite.git"
+  },
+  "keywords": [
+    "mybricks",
+    "component-library",
+    "pc",
+    "lite",
+    "low-code"
+  ],
+  "author": "MyBricks",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/mybricks/comlib-pc-normal-lite/issues"
+  },
+  "homepage": "https://github.com/mybricks/comlib-pc-normal-lite#readme",
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^5.0.0"
+  }
+}

src/button/com.json

@@ -0,0 +1,38 @@
+{
+  "title": "按钮",
+  "namespace": "mybricks.normal-pc-lite.button",
+  "version": "1.0.0",
+  "description": "可点击的按钮组件",
+  "author": "MyBricks",
+  "icon": "./icon.svg",
+  "data": "./data.json",
+  "runtime": "./runtime.tsx",
+  "inputs": [
+    {
+      "id": "setText",
+      "title": "设置文本",
+      "desc": "设置按钮文本",
+      "schema": {
+        "type": "string"
+      }
+    },
+    {
+      "id": "setDisabled",
+      "title": "设置禁用",
+      "desc": "设置按钮是否禁用",
+      "schema": {
+        "type": "boolean"
+      }
+    }
+  ],
+  "outputs": [
+    {
+      "id": "click",
+      "title": "点击",
+      "desc": "按钮点击时触发",
+      "schema": {
+        "type": "any"
+      }
+    }
+  ]
+}

src/button/data.json

@@ -0,0 +1,6 @@
+{
+  "text": "按钮",
+  "type": "primary",
+  "disabled": false,
+  "style": {}
+}

src/button/runtime.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect } from 'react';
+
+interface Data {
+  text: string;
+  type?: 'primary' | 'default' | 'dashed' | 'text' | 'link';
+  disabled?: boolean;
+  style?: React.CSSProperties;
+}
+
+export default function ({ data, inputs, outputs, env }: RuntimeParams<Data>) {
+  useEffect(() => {
+    inputs['setText']?.((value: string) => {
+      data.text = value;
+    });
+
+    inputs['setDisabled']?.((value: boolean) => {
+      data.disabled = value;
+    });
+  }, []);
+
+  const handleClick = () => {
+    if (!data.disabled && outputs && outputs['click']) {
+      outputs['click']();
+    }
+  };
+
+  const getButtonStyle = (): React.CSSProperties => {
+    const baseStyle: React.CSSProperties = {
+      padding: '4px 15px',
+      fontSize: '14px',
+      borderRadius: '2px',
+      border: '1px solid #d9d9d9',
+      cursor: data.disabled ? 'not-allowed' : 'pointer',
+      transition: 'all 0.3s',
+      display: 'inline-block',
+      textAlign: 'center',
+      userSelect: 'none',
+      ...data.style
+    };
+
+    if (data.disabled) {
+      baseStyle.opacity = 0.6;
+      baseStyle.backgroundColor = '#f5f5f5';
+      baseStyle.color = 'rgba(0, 0, 0, 0.25)';
+      baseStyle.borderColor = '#d9d9d9';
+    } else {
+      switch (data.type) {
+        case 'primary':
+          baseStyle.backgroundColor = '#1890ff';
+          baseStyle.color = '#fff';
+          baseStyle.borderColor = '#1890ff';
+          break;
+        case 'dashed':
+          baseStyle.borderStyle = 'dashed';
+          baseStyle.backgroundColor = '#fff';
+          baseStyle.color = 'rgba(0, 0, 0, 0.85)';
+          break;
+        case 'text':
+          baseStyle.border = 'none';
+          baseStyle.backgroundColor = 'transparent';
+          baseStyle.color = 'rgba(0, 0, 0, 0.85)';
+          break;
+        case 'link':
+          baseStyle.border = 'none';
+          baseStyle.backgroundColor = 'transparent';
+          baseStyle.color = '#1890ff';
+          break;
+        default:
+          baseStyle.backgroundColor = '#fff';
+          baseStyle.color = 'rgba(0, 0, 0, 0.85)';
+      }
+    }
+
+    return baseStyle;
+  };
+
+  return (
+    <button
+      style={getButtonStyle()}
+      onClick={handleClick}
+      disabled={data.disabled}
+    >
+      {env?.i18n ? env.i18n(data.text || '按钮') : data.text || '按钮'}
+    </button>
+  );
+}

src/input/com.json

@@ -0,0 +1,54 @@
+{
+  "title": "输入框",
+  "namespace": "mybricks.normal-pc-lite.input",
+  "version": "1.0.0",
+  "description": "用于接收用户输入的文本框组件",
+  "author": "MyBricks",
+  "icon": "./icon.svg",
+  "data": "./data.json",
+  "runtime": "./runtime.tsx",
+  "inputs": [
+    {
+      "id": "setValue",
+      "title": "设置值",
+      "desc": "设置输入框的值",
+      "schema": {
+        "type": "string"
+      }
+    },
+    {
+      "id": "setPlaceholder",
+      "title": "设置提示文本",
+      "desc": "设置输入框的提示文本",
+      "schema": {
+        "type": "string"
+      }
+    },
+    {
+      "id": "setDisabled",
+      "title": "设置禁用",
+      "desc": "设置输入框是否禁用",
+      "schema": {
+        "type": "boolean"
+      }
+    }
+  ],
+  "outputs": [
+    {
+      "id": "onChange",
+      "title": "值变化",
+      "desc": "输入框值变化时触发",
+      "schema": {
+        "type": "string"
+      }
+    },
+    {
+      "id": "onBlur",
+      "title": "失去焦点",
+      "desc": "输入框失去焦点时触发",
+      "schema": {
+        "type": "string"
+      }
+    }
+  ]
+}

src/input/data.json

@@ -0,0 +1,6 @@
+{
+  "value": "",
+  "placeholder": "请输入",
+  "disabled": false,
+  "style": {}
+}