realibox-ui-sdk 0.0.2

package/README.md

@@ -0,0 +1,171 @@
+# realibox-ui-sdk
+
+`realibox-ui-sdk` 用于在网页中嵌入 `product-3d-viewer` 组件。
+
+## 安装
+
+```bash
+npm install realibox-ui-sdk
+```
+
+或
+
+```bash
+pnpm add realibox-ui-sdk
+```
+
+## 使用流程
+
+接入分为两步：
+
+1. 调用 `initSDK` 完成初始化
+2. 在页面中使用 `<product-3d-viewer>` 组件
+
+## 初始化
+
+使用组件前必须先执行 `initSDK`。
+
+```ts
+import { initSDK } from "realibox-ui-sdk";
+
+initSDK({
+  key: "your-key",
+  mode: "development",
+});
+```
+
+### `initSDK` 参数说明
+
+| 参数名 | 类型                            | 是否必填 | 说明                                                                  |
+| ------ | ------------------------------- | -------- | --------------------------------------------------------------------- |
+| `key`  | `string`                        | 是       | SDK 授权密钥。不能为空。                                              |
+| `mode` | `"development" \| "production"` | 是       | SDK 运行环境。`development` 使用测试环境，`production` 使用正式环境。 |
+
+## 组件
+
+组件名：`product-3d-viewer`
+
+### 组件参数说明
+
+不同接入方式下，项目 ID 的参数名不同：
+
+| 接入方式              | 参数名       | 类型     | 是否必填 | 说明       |
+| --------------------- | ------------ | -------- | -------- | ---------- |
+| React                 | `projectId`  | `string` | 是       | 3D 项目 ID |
+| Vue                   | `projectId`  | `string` | 是       | 3D 项目 ID |
+| HTML / CDN / 其他框架 | `project-id` | `string` | 是       | 3D 项目 ID |
+
+## 示例
+
+### HTML
+
+```html
+<script type="module">
+  import { initSDK } from "realibox-ui-sdk";
+
+  initSDK({
+    key: "your-key",
+    mode: "development",
+  });
+</script>
+
+<product-3d-viewer project-id="your-project-id"></product-3d-viewer>
+```
+
+### React
+
+```tsx
+import { initSDK } from "realibox-ui-sdk";
+
+initSDK({
+  key: "your-key",
+  mode: "development",
+});
+
+export default function App() {
+  return <product-3d-viewer projectId="your-project-id" />;
+}
+```
+
+### Vue
+
+Vue 使用 Web Components 时，需要先将 `product-3d-viewer` 声明为自定义元素。
+
+`vite.config.js`
+
+```js
+import vue from "@vitejs/plugin-vue";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag === "product-3d-viewer",
+        },
+      },
+    }),
+  ],
+});
+```
+
+`src/vite-env.d.ts`
+
+```ts
+/// <reference types="vite/client" />
+
+import type {} from "realibox-ui-sdk/vue";
+```
+
+`tsconfig.json`
+
+```json
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "jsx": "preserve",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "types": ["vite/client"]
+  },
+  "vueCompilerOptions": {
+    "strictTemplates": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
+}
+```
+
+`App.vue`
+
+```vue
+<script setup lang="ts">
+import { initSDK } from "realibox-ui-sdk";
+
+initSDK({
+  key: "your-key",
+  mode: "development",
+});
+</script>
+
+<template>
+  <product-3d-viewer projectId="your-project-id" />
+</template>
+```
+
+### CDN
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/realibox-ui-sdk@0.0.2/dist/realibox-ui-sdk.umd.js"></script>
+<script>
+  window.RealiboxUISDK.initSDK({
+    key: "your-key",
+    mode: "development",
+  });
+</script>
+
+<product-3d-viewer project-id="your-project-id"></product-3d-viewer>
+```

package/custom-elements.json

@@ -0,0 +1,85 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "README.md",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/product-3d-viewer.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "name": "Product3dViewer",
+          "tagName": "product-3d-viewer",
+          "attributes": [
+            {
+              "name": "project-id",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "projectId"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "\"sm\" | \"md\" | \"lg\" | \"none\" | undefined"
+              },
+              "fieldName": "size"
+            },
+            {
+              "name": "show-top-header",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "fieldName": "showTopHeader"
+            },
+            {
+              "name": "part-selection",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "fieldName": "partSelection"
+            },
+            {
+              "name": "camera-focus",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "fieldName": "cameraFocus"
+            },
+            {
+              "name": "design",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "fieldName": "design"
+            },
+            {
+              "name": "outline-render",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "fieldName": "outlineRender"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "product-3d-viewer",
+          "declaration": {
+            "name": "Product3dViewer",
+            "module": "dist/components/product-3d-viewer.js"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/api/index.d.ts

@@ -0,0 +1 @@
+export * from './product';

package/dist/api/product/index.d.ts

@@ -0,0 +1,4 @@
+import { ProductSearchRequest, ProductSearchResponse } from './types/product-search.type';
+export type { AttributeFilter, ProductSearchRequest } from './types/product-search.type';
+export type { AssetSimple, AttributeValueItem, BaseDataPagination, ProductAttributeGroupItem, ProductAttributeItem, ProductSearchItem, ProductSearchResponse, } from './types/product-search.type';
+export declare const postSearchProductsApi: (body: ProductSearchRequest) => Promise<ProductSearchResponse>;

package/dist/api/product/types/product-search.type.d.ts

@@ -0,0 +1,84 @@
+export interface AttributeFilter {
+    attribute_code: string;
+    operator: string;
+    value: unknown;
+    [property: string]: unknown;
+}
+export interface ProductSearchRequest {
+    category_ids?: string[];
+    filters?: AttributeFilter[];
+    has_3d?: boolean;
+    keyword?: string;
+    limit?: number;
+    org_id?: string;
+    recommend_types?: string[];
+    share_code?: string;
+    skip?: number;
+    sort_by?: string;
+    sort_order?: string;
+    status?: number;
+    [property: string]: unknown;
+}
+export interface AssetSimple {
+    asset_type: string;
+    content?: string;
+    media_type: string;
+    sort_order?: number;
+    url?: string;
+    uuid: string;
+    [property: string]: unknown;
+}
+export interface AttributeValueItem {
+    label?: string;
+    spec_row_index: number;
+    value?: unknown;
+    [property: string]: unknown;
+}
+export interface ProductAttributeItem {
+    code: string;
+    field_type: string;
+    name: string;
+    unit?: string;
+    values?: AttributeValueItem[];
+    [property: string]: unknown;
+}
+export interface ProductAttributeGroupItem {
+    attributes?: ProductAttributeItem[];
+    code: string;
+    is_spec_group?: boolean;
+    name: string;
+    [property: string]: unknown;
+}
+export interface ProductSearchItem {
+    assets?: AssetSimple[];
+    attribute_groups?: ProductAttributeGroupItem[];
+    category_ids?: string[];
+    code?: string;
+    cover_image?: string;
+    create_time: number;
+    is_collected?: boolean;
+    name: string;
+    project_id?: string;
+    project_type: string;
+    recommend_type: string;
+    status: number;
+    uuid: string;
+    [property: string]: unknown;
+}
+export interface BaseDataPagination {
+    limit: number;
+    offset: number;
+    total: number;
+    [property: string]: unknown;
+}
+export interface ProductSearchResponse {
+    code: number;
+    info: Record<string, unknown>;
+    list: {
+        data: ProductSearchItem[];
+        pagination: boolean | BaseDataPagination;
+        [property: string]: unknown;
+    };
+    message?: unknown;
+    [property: string]: unknown;
+}