sun-card-design 1.1.39 → 1.1.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +117 -114
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,114 +1,117 @@
1
- ### Sun Card Designer
2
-
3
- 一个用于卡片设计与预览的一体化设计器插件（Vue 3 + Ant Design Vue）。提供设计面板、预览、基础/表单/媒体/图表等能力，可作为组件嵌入现有项目或独立页面挂载使用。
4
-
5
- ---
6
-
7
- ### 安装
8
-
9
- ```bash
10
- npm install sun-card-designer
11
- ```
12
-
13
- #### 必备依赖（在你的项目中安装）
14
-
15
- ```bash
16
- # Vue 生态基础
17
- npm i vue@^3.5.0 vue-router@^4 pinia@^3 ant-design-vue@^4
18
-
19
- # 库本身
20
- npm i sun-card-designer
21
- ```
22
-
23
- ### 使用
24
-
25
- - 引入样式（已提供别名）：
26
- ```ts
27
- import 'sun-card-designer/style.css'
28
- ```
29
-
30
- - 组件示意图：
31
-
32
- <img alt="Sun Card Designer 示例" src="https://unpkg.com/sun-card-designer@latest/dist/assets/cardDesigner.png" width="600" />
33
-
34
- - 作为组件嵌入（推荐）：
35
- ```vue
36
- <template>
37
- <div class="designer-container">
38
- <SunCardDesigner :name="cardName" :variableList="variableList" @save="handleSave" />
39
- </div>
40
- </template>
41
-
42
- <script setup lang="ts">
43
- import 'sun-card-designer/style.css'
44
- import SunCardDesigner from 'sun-card-designer'
45
-
46
- // 卡片名称（可选）
47
- const cardName = '企业介绍卡片'
48
-
49
- // 变量列表（可选）：格式参考源码 `src/views/configMain/config/baseConfig.js` 中的 variableList
50
- // 典型结构为数组，元素包含变量标识、展示名、类型、默认值/示例值等信息
51
- const variableList = [
52
- {
53
- id: '-1',
54
- name: '数组-Test1',
55
- type: 'Array',
56
- defaultValue: JSON.stringify([
57
- {
58
- title: '标题一',
59
- content: '列表正文,组件整体绑定 Array 类型数据后，可在此文本上绑定 item.文本。',
60
- src: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/ui-builder/img/grid0.png'
61
- },
62
- {
63
- title: '标题二',
64
- content: '列表正文,组件整体绑定 Array 类型数据后，可在此文本上绑定 item.文本。',
65
- src: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/ui-builder/img/grid1.png'
66
- },
67
- {
68
- title: '标题三',
69
- content: '列表正文,组件整体绑定 Array 类型数据后，可在此文本上绑定 item.文本。',
70
- src: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/ui-builder/img/grid2.png'
71
- }
72
- ])
73
- }
74
- // ...
75
- ]
76
-
77
- // save 事件：发布时返回卡片内容（配置、变量替换后的数据等）
78
- function handleSave(payload) {
79
- // TODO: 将 payload 持久化/调用后端接口
80
- console.log('发布卡片内容:', payload)
81
- }
82
- </script>
83
- ```
84
-
85
- - 独立页面挂载：
86
- ```ts
87
- import { app } from 'sun-card-designer'
88
- import 'sun-card-designer/style.css'
89
-
90
- app.mount('#app')
91
- ```
92
-
93
- ### API
94
-
95
- - Props
96
- - name?: string
97
- - 卡片名称，显示在设计器标题栏。
98
- - variableList?: Array<any>
99
- - 变量定义列表，用于在设计/预览中进行动态替换。
100
- - 结构请参考上面示例。
101
-
102
-
103
- - Events
104
- - save(payload: any): void
105
- - 触发发布时回调，`payload` 为发布的卡片数据（包含配置与变量解析结果）。
106
-
107
- 说明：
108
- - 组件方式适合把设计器作为某个路由/模块嵌入到你的现有应用；
109
- - 独立挂载适合快速搭建一个单页的设计器入口；
110
- - 库以 ESM 方式导出。
111
-
112
- ## 许可证
113
-
114
- MIT
1
+ # Sun Card Design
2
+
3
+ 一个用于卡片设计预览的 Vue 3 组件库，支持 PC 与移动端渲染，提供完整样式与多种基础/表单/图表/媒体组件的预览。
4
+
5
+ ## 低代码卡片介绍
6
+
7
+ - sun-card-designer 设计器库
8
+ - sun-card-design 预览库
9
+
10
+ ## 特性
11
+
12
+ - 🎯 PC 与移动端双入口：按需引入 `pc`、`mobile` 渲染面板
13
+ - 🎨 自带样式：提供 `sun-card-design/style.css` 一次性引入
14
+ - 🧩 组件丰富：文本、图片、音视频、表单控件、网格、图表等
15
+
16
+ ## 安装
17
+
18
+ ```bash
19
+ npm install sun-card-design
20
+ ```
21
+
22
+ #### 必备依赖（在你的项目中安装）
23
+
24
+ ```bash
25
+ # Vue 生态基础
26
+ npm i vue@^3.5.0 vue-router@^4 pinia@^3 ant-design-vue@^4
27
+
28
+ # 设计器库（若使用 sun-card-designer 整包插件）
29
+ npm i sun-card-design
30
+ ```
31
+
32
+ ## 快速开始
33
+
34
+ ### 方式一：按平台引入（推荐）
35
+
36
+ ```ts
37
+ // 样式（必需）
38
+ import 'sun-card-design/style.css'
39
+
40
+ // 按平台引入渲染面板
41
+ import PcPanel from 'sun-card-design/pc'
42
+ import MobilePanel from 'sun-card-design/mobile'
43
+
44
+ // Vue 组件中使用
45
+ export default {
46
+ components: { PcPanel, MobilePanel }
47
+ }
48
+ ```
49
+
50
+ 适合在不同容器中分别渲染 PC 与移动端界面，按需加载更轻量。
51
+
52
+ ### 方式二：从根入口具名导入（需要打包器支持 ESM Tree-Shaking）
53
+
54
+ ```ts
55
+ import 'sun-card-design/style.css'
56
+ import { PcPanel, MobilePanel } from 'sun-card-design'
57
+ ```
58
+
59
+ > 根入口导出多个组件，便于二次开发与按需组合；实际打包体积取决于你的打包器摇树优化效果。
60
+
61
+ ## 组件概览（部分）
62
+
63
+ - 渲染面板：`PcPanel`、`MobilePanel`
64
+ - 基础组件：`Title`、`Text`、`Button`、`Picture`、`File`、`Video`、`Audio`、`Rate`、`Tag`、`Divider`、`Panorama`、`GenerateImg`
65
+ - 布局组件：`Grid`
66
+ - 表单组件：`Input`、`Select`、`EnterpriseSearch`、`Table`
67
+ - 图表组件：`BarChart`、`BarChart3D`、`PieChart`、`PieChart3D`、`LineChart`
68
+
69
+ > 具体 props/事件请参考源码组件文件，后续会补充详细文档示例。
70
+
71
+ ## 使用示例（片段）
72
+
73
+ ```vue
74
+ <template>
75
+ <div class="container">
76
+ <div class="pc-wrap">
77
+ <PcPanel :record="record" />
78
+ </div>
79
+ <div class="mb-wrap">
80
+ <MobilePanel :record="record" />
81
+ </div>
82
+ </div>
83
+ </template>
84
+
85
+ <script setup lang="ts">
86
+ import { ref } from 'vue'
87
+ import 'sun-card-design/style.css'
88
+ import PcPanel from 'sun-card-design/pc'
89
+ import MobilePanel from 'sun-card-design/mobile'
90
+
91
+ const record = ref({
92
+ config: {
93
+ background: '#fff',
94
+ borderRadius: 12
95
+ }
96
+ })
97
+ </script>
98
+ ```
99
+
100
+ ## 外部依赖与对等依赖
101
+
102
+ 本库将以下依赖标记为 external/peer，不会被打入产物，请在宿主项目中自行安装与提供：
103
+
104
+ - 对等依赖（必装）
105
+ - `vue` ^3.5.0
106
+ - `ant-design-vue` ^4.0.0
107
+
108
+ > 某些组件（如图表/3D/截图）依赖上述库，只有在使用相关组件时才需要安装。
109
+
110
+ ## 兼容性
111
+
112
+ - 运行环境：现代浏览器 / Vite、Webpack 等现代打包器
113
+ - 模块格式：ESM（推荐）、UMD（可选，默认没有，减小体积）
114
+
115
+ ## 许可证
116
+
117
+ MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sun-card-design",
3
- "version": "1.1.39",
3
+ "version": "1.1.40",
4
4
  "private": false,
5
5
  "description": "Vue3 卡片设计组件库，支持 PC 和移动端预览",
6
6
  "keywords": [