-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
184 lines (177 loc) · 6.51 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>文多多 AiPPT</title>
<script src="static/docmee-ui-sdk-iframe.min.js"></script>
<style>
body {
margin: 0;
width: 100vw;
height: 100vh;
}
.page_navigate {
padding: 5px;
height: 45px;
width: calc(100% - 50px);
display: flex;
justify-content: center;
align-items: center;
}
.page_navigate > div {
padding: 8px 16px;
margin-right: 8px;
cursor: pointer;
user-select: none;
border: 2px solid #f0f0f0;
border-radius: 6px;
}
.page_navigate .selected {
background: #f57bb0;
}
#container {
width: calc(100% - 50px);
height: calc(100% - 100px);
margin: 0 auto;
padding: 0;
border-radius: 12px;
box-shadow: 0 0 12px rgba(120, 120, 120, 0.3);
overflow: hidden;
background: linear-gradient(-157deg, #f57bb0, #867dea);
color: white;
}
</style>
</head>
<body>
<!-- 示例二 -->
<div style="text-align: center;padding: 5px;font-size: 14px">
<span>当前为示例一，点击跳转至 </span>
<a href="javascript:location.href=`/demo2?token=${token}`">示例二</a>
</div>
<!-- 自定义导航按钮 -->
<div class="page_navigate">
<div id="page_creator" class="selected" onclick="toPage('creator')">生成PPT</div>
<div id="page_dashboard" onclick="toPage('dashboard')">PPT列表</div>
<div id="page_customTemplate" onclick="toPage('customTemplate')">自定义模板</div>
</div>
<!-- 挂载iframe容器 -->
<div id="container"></div>
</body>
<script>
if (location.protocol == 'file:') {
alert('不支持 file 协议直接访问，请启动 http 服务访问！\n\n启动命令：npm run start')
}
// 文多多AiPPT
// 官网 https://docmee.cn
// 开放平台 https://docmee.cn/open-platform/api#接口鉴权
var apiKey = '' // TODO 填写你的API-KEY
// 这里只是demo演示，创建token请在服务端调用（不要把ApiKey暴露到前端防止泄露）
// 接口文档: https://docmee.cn/open-platform/api#%E5%88%9B%E5%BB%BA%E6%8E%A5%E5%8F%A3-token
function createApiToken(apiKey, uid, limit) {
if (!apiKey) {
alert('请在代码中设置 apiKey')
return
}
let url = 'https://docmee.cn/api/user/createApiToken'
let xhr = new XMLHttpRequest()
xhr.open('POST', url, false)
xhr.setRequestHeader('Api-Key', apiKey)
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.send(JSON.stringify({ uid, limit }))
if (xhr.readyState === 4) {
if (xhr.status === 200) {
let resp = JSON.parse(xhr.responseText)
if (resp.code != 0) {
alert('创建token异常：' + resp.message)
return
}
let token = resp.data.token
return token
} else {
alert('网络异常, httpStatus: ' + xhr.status)
}
}
}
var uid = 'xxx' // 用户ID，不同uid创建的token数据会相互隔离，主要用于数据隔离
var limit = null // 限制 token 最大生成PPT次数
var token = createApiToken(apiKey, uid, limit) // 创建token（请在调用服务端接口实现）
// 初始化 UI iframe
const docmeeUI = new DocmeeUI({
pptId: null,
token: token, // token
container: document.querySelector('#container'), // 挂载 iframe 的容器
page: 'creator', // 'dashboard' ppt列表; 'creator' 创建页面; 'customTemplate' 自定义模版; 'editor' 编辑页（需要传pptId字段）
lang: 'zh', // 国际化
mode: 'light', // light 亮色模式, dark 暗色模式
isMobile: false, // 移动端模式
background: 'linear-gradient(-157deg,#f57bb0, #867dea)', // 自定义背景
padding: '40px 20px 0px',
onMessage(message) {
console.log(message)
if (message.type === 'invalid-token') {
// 在token失效时触发
console.log('token 认证错误')
// 更换新的 token
let newToken = createApiToken(apiKey, uid, limit)
docmeeUI.updateToken(newToken)
} else if (message.type === 'beforeGenerate') {
const { subtype, fields } = message.data
if (subtype === 'outline') {
// 生成大纲前触发
console.log('即将生成ppt大纲', fields)
return true
} else if (subtype === 'ppt') {
// 生成PPT前触发
console.log('即将生成ppt', fields)
docmeeUI.sendMessage({
type: 'success',
content: '继续生成PPT',
})
return true
}
} else if (message.type === 'beforeCreateCustomTemplate') {
const { file, totalPptCount } = message.data
// 是否允许用户继续制作PPT
console.log('用户自定义完整模版，PPT文件：', file.name)
if (totalPptCount < 2) {
console.log('用户生成积分不足，不允许制作自定义完整模版')
return false
}
return true
} else if (message.type == 'pageChange') {
pageChange(message.data.page)
} else if (message.type === 'beforeDownload') {
// 自定义下载PPT的文件名称
const { id, subject } = message.data
return `PPT_${subject}.pptx`
} else if (message.type == 'error') {
if (message.data.code == 88) {
// 创建token传了limit参数可以限制使用次数
alert('您的次数已用完')
} else {
alert('发生错误：' + message.data.message)
}
}
}
})
function toPage(page) {
docmeeUI.navigate({ page })
pageChange(page)
}
function pageChange(page) {
let element = document.getElementById('page_' + page)
if (element) {
element.parentNode.childNodes.forEach(c => c.classList && c.classList.remove('selected'))
element.classList.add('selected')
}
}
// 其他函数
// docmeeUI.navigate({ page: 'editor', pptId: 'xxxx' })
// docmeeUI.changeCreatorData({ subject: 'AI未来的发展' }, true)
// docmeeUI.changeCreatorData({ text: '文本内容...' }, true)
// docmeeUI.getCurrentPptInfo()
// docmeeUI.showTemplateDialog('custom')
// docmeeUI.getInfo()
// docmeeUI.destroy()
</script>
</html>