@jx3box/jx3box-editor 2.2.48 → 3.0.1

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 (175) hide show
  1. package/config/global.js +79 -0
  2. package/config/global.less +16 -0
  3. package/index.js +21 -8
  4. package/package.json +64 -63
  5. package/readme.md +25 -99
  6. package/src/Article.vue +96 -57
  7. package/src/ArticleMarkdown.vue +54 -47
  8. package/src/BoxResource.vue +67 -42
  9. package/src/Buff.vue +18 -7
  10. package/src/GameText.vue +32 -45
  11. package/src/Item.vue +143 -235
  12. package/src/ItemSimple.vue +27 -37
  13. package/src/Markdown.vue +362 -210
  14. package/src/Npc.vue +51 -30
  15. package/src/Resource.vue +296 -252
  16. package/src/Skill.vue +36 -26
  17. package/src/Tinymce.vue +124 -137
  18. package/src/Upload.vue +238 -155
  19. package/src/UploadAlbum.vue +189 -118
  20. package/{assets → src/assets}/css/article.less +1 -0
  21. package/src/assets/css/markdown.less +4 -0
  22. package/{assets → src/assets}/css/module/author.less +4 -3
  23. package/{assets → src/assets}/css/module/directory.less +23 -32
  24. package/{assets → src/assets}/css/module/talent.less +2 -2
  25. package/{assets → src/assets}/css/resource.less +56 -22
  26. package/src/assets/css/tinymce/_.less +28 -0
  27. package/src/assets/css/tinymce/a.less +21 -0
  28. package/{assets → src/assets}/css/tinymce/code.less +1 -1
  29. package/{assets/css → src/assets/css/tinymce}/combo.less +123 -18
  30. package/{assets → src/assets}/css/tinymce/fold.less +3 -6
  31. package/src/assets/css/tinymce/h.less +90 -0
  32. package/{assets → src/assets}/css/tinymce/latex.less +14 -14
  33. package/{assets → src/assets}/css/tinymce/macro.less +3 -3
  34. package/{assets → src/assets}/css/tinymce/pz.less +2 -2
  35. package/{assets → src/assets}/css/tinymce/table.less +5 -10
  36. package/{assets → src/assets}/css/tinymce.less +8 -4
  37. package/src/assets/css/upload.less +195 -0
  38. package/src/assets/css/upload_album.less +164 -0
  39. package/src/assets/css/var.less +2 -0
  40. package/src/assets/img/other/qr-code.svg +1 -0
  41. package/{assets → src/assets}/js/audio.js +2 -2
  42. package/{assets → src/assets}/js/directory.js +51 -23
  43. package/src/assets/js/hljs_languages.js +177 -0
  44. package/src/assets/js/katex.js +211 -0
  45. package/src/assets/js/renderImgPreview.js +49 -0
  46. package/{assets → src/assets}/js/xss.js +48 -5
  47. package/src/components/Author.vue +32 -13
  48. package/src/components/Avatar.vue +22 -3
  49. package/src/components/Combo.vue +118 -72
  50. package/src/components/PostAuthor.vue +13 -11
  51. package/src/components/QRcode.vue +136 -0
  52. package/src/components/SkillMartial.vue +13 -12
  53. package/src/pages/article.js +14 -0
  54. package/src/pages/index.js +5 -0
  55. package/src/pages/markdown.js +14 -0
  56. package/src/pages/tinymce.js +49 -0
  57. package/src/pages/upload.js +14 -0
  58. package/{service → src/service}/author.js +2 -2
  59. package/{service → src/service}/cms.js +5 -3
  60. package/{service → src/service}/database.js +4 -2
  61. package/{service → src/service}/item.js +1 -1
  62. package/{service → src/service}/node.js +1 -1
  63. package/{service → src/service}/resource.js +1 -1
  64. package/src/views/article.vue +72 -0
  65. package/src/views/index.vue +11 -0
  66. package/src/views/markdown.vue +58 -0
  67. package/src/views/tinymce.vue +58 -0
  68. package/src/views/upload.vue +111 -0
  69. package/.env +0 -2
  70. package/.vscode/settings.json +0 -5
  71. package/assets/css/katex-fix.css +0 -20
  72. package/assets/css/tinymce/_.less +0 -30
  73. package/assets/css/tinymce/a.less +0 -30
  74. package/assets/css/tinymce/combo.less +0 -111
  75. package/assets/css/tinymce/h.less +0 -58
  76. package/assets/css/upload.less +0 -105
  77. package/assets/js/katex.js +0 -191
  78. package/assets/js/renderImgPreview.js +0 -25
  79. package/babel.config.js +0 -3
  80. package/docs/markdown.md +0 -16
  81. package/jsconfig.json +0 -9
  82. package/public/article.html +0 -15
  83. package/public/css/article.css +0 -2481
  84. package/public/css/article.less +0 -3
  85. package/public/favicon.ico +0 -0
  86. package/public/tinymce.html +0 -33
  87. package/src/Equip.vue +0 -301
  88. package/src/components/LetterDemo.vue +0 -93
  89. package/src/components/medal.vue +0 -43
  90. package/test-audio.html +0 -121
  91. package/vue.config.js +0 -147
  92. /package/{assets → src/assets}/css/markdown/_.less +0 -0
  93. /package/{assets → src/assets}/css/markdown/macro.less +0 -0
  94. /package/{assets/css/article_markdown.less → src/assets/css/markdown/markdown-article.less} +0 -0
  95. /package/{assets/css/markdown.less → src/assets/css/markdown/markdown-editor.less} +0 -0
  96. /package/{assets → src/assets}/css/markdown/talent.less +0 -0
  97. /package/{assets → src/assets}/css/markdown/video.less +0 -0
  98. /package/{assets → src/assets}/css/module/buff.less +0 -0
  99. /package/{assets → src/assets}/css/module/icon.less +0 -0
  100. /package/{assets → src/assets}/css/module/item.less +0 -0
  101. /package/{assets → src/assets}/css/module/item_simple.less +0 -0
  102. /package/{assets → src/assets}/css/module/jx3_element.less +0 -0
  103. /package/{assets → src/assets}/css/module/macro.less +0 -0
  104. /package/{assets → src/assets}/css/module/npc.less +0 -0
  105. /package/{assets → src/assets}/css/module/resource.less +0 -0
  106. /package/{assets → src/assets}/css/module/skill.less +0 -0
  107. /package/{assets → src/assets}/css/tinymce/hr.less +0 -0
  108. /package/{assets → src/assets}/css/tinymce/img.less +0 -0
  109. /package/{assets → src/assets}/css/tinymce/imgpreview.less +0 -0
  110. /package/{assets → src/assets}/css/tinymce/list.less +0 -0
  111. /package/{assets → src/assets}/css/tinymce/nextpage.less +0 -0
  112. /package/{assets → src/assets}/css/tinymce/p.less +0 -0
  113. /package/{assets → src/assets}/css/tinymce/plugin.less +0 -0
  114. /package/{assets → src/assets}/css/tinymce/qixue.less +0 -0
  115. /package/{assets → src/assets}/css/tinymce/quote.less +0 -0
  116. /package/{assets → src/assets}/css/tinymce/video.less +0 -0
  117. /package/{assets → src/assets}/css/tinymce/voice.less +0 -0
  118. /package/{assets → src/assets}/data/detach_type.json +0 -0
  119. /package/{assets → src/assets}/data/game_font.json +0 -0
  120. /package/{assets → src/assets}/data/markdown_whitelist.json +0 -0
  121. /package/{assets → src/assets}/data/weapon_type.json +0 -0
  122. /package/{assets → src/assets}/img/buff.svg +0 -0
  123. /package/{assets → src/assets}/img/equip_bg.png +0 -0
  124. /package/{assets → src/assets}/img/file.svg +0 -0
  125. /package/{assets → src/assets}/img/icons.svg +0 -0
  126. /package/{assets → src/assets}/img/item/pve.png +0 -0
  127. /package/{assets → src/assets}/img/item/pvp.png +0 -0
  128. /package/{assets → src/assets}/img/item/pvx.png +0 -0
  129. /package/{assets → src/assets}/img/item/std.png +0 -0
  130. /package/{assets → src/assets}/img/item/wujie.png +0 -0
  131. /package/{assets → src/assets}/img/item.svg +0 -0
  132. /package/{assets → src/assets}/img/jx3.svg +0 -0
  133. /package/{assets → src/assets}/img/jx3box.svg +0 -0
  134. /package/{assets → src/assets}/img/npc/attack.svg +0 -0
  135. /package/{assets → src/assets}/img/npc/buff.svg +0 -0
  136. /package/{assets → src/assets}/img/npc/energy.svg +0 -0
  137. /package/{assets → src/assets}/img/npc/miss.svg +0 -0
  138. /package/{assets → src/assets}/img/npc/npc.svg +0 -0
  139. /package/{assets → src/assets}/img/npc/radar.svg +0 -0
  140. /package/{assets → src/assets}/img/npc/shield.svg +0 -0
  141. /package/{assets → src/assets}/img/npc/sight.svg +0 -0
  142. /package/{assets → src/assets}/img/npc/skull.svg +0 -0
  143. /package/{assets → src/assets}/img/npc/target.svg +0 -0
  144. /package/{assets → src/assets}/img/skill.svg +0 -0
  145. /package/{assets → src/assets}/img/skillset.png +0 -0
  146. /package/{assets → src/assets}/js/a.js +0 -0
  147. /package/{assets → src/assets}/js/code.js +0 -0
  148. /package/{assets → src/assets}/js/combo.js +0 -0
  149. /package/{assets → src/assets}/js/drag.js +0 -0
  150. /package/{assets → src/assets}/js/filter2.js +0 -0
  151. /package/{assets → src/assets}/js/fold.js +0 -0
  152. /package/{assets → src/assets}/js/gallery.js +0 -0
  153. /package/{assets → src/assets}/js/iframe.js +0 -0
  154. /package/{assets → src/assets}/js/img.js +0 -0
  155. /package/{assets → src/assets}/js/item/attribute_percent.js +0 -0
  156. /package/{assets → src/assets}/js/item/bind.js +0 -0
  157. /package/{assets → src/assets}/js/item/border.js +0 -0
  158. /package/{assets → src/assets}/js/item/border_quest.js +0 -0
  159. /package/{assets → src/assets}/js/item/color.js +0 -0
  160. /package/{assets → src/assets}/js/item/hljs_languages.js +0 -0
  161. /package/{assets → src/assets}/js/item/icon_url.js +0 -0
  162. /package/{assets → src/assets}/js/item/second_format.js +0 -0
  163. /package/{assets → src/assets}/js/jx3_element.js +0 -0
  164. /package/{assets → src/assets}/js/macro.js +0 -0
  165. /package/{assets → src/assets}/js/nextpage.js +0 -0
  166. /package/{assets → src/assets}/js/pswp.js +0 -0
  167. /package/{assets → src/assets}/js/pswp_template.js +0 -0
  168. /package/{assets → src/assets}/js/pz_iframe.js +0 -0
  169. /package/{assets → src/assets}/js/qixue.js +0 -0
  170. /package/{assets → src/assets}/js/script.js +0 -0
  171. /package/{assets → src/assets}/js/talent2.js +0 -0
  172. /package/{assets → src/assets}/js/tex-mml-chtml.js +0 -0
  173. /package/{service → src/service}/enum/CollectionPublic.js +0 -0
  174. /package/{service → src/service}/enum/EquipPosition.js +0 -0
  175. /package/{service → src/service}/enum/EquipType.js +0 -0
@@ -1,3 +0,0 @@
1
- @import '../../node_modules/@jx3box/jx3box-common/css/var.less';
2
- @import '../../node_modules/csslab/base.less';
3
- @import '../../assets/css/article.less';
Binary file
@@ -1,33 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="zh-CN">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6
- <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
7
- <meta name="renderer" content="webkit" />
8
- <title><%= htmlWebpackPlugin.options.title %></title>
9
- <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
10
- <script>
11
- window.RX_TINYMCE_ROOT = "https://cdn.jx3box.com/static/tinymce";
12
- // window.RX_TINYMCE_ROOT = "http://localhost:3000";
13
- </script>
14
- <script src="https://cdn.jx3box.com/static/tinymce/tinymce.min.js?v=1.9.0"></script>
15
- <!-- TODO: -->
16
- <!-- <script src="http://localhost:3000/tinymce.min.js?v=1.9.0"></script> -->
17
- </head>
18
- <body>
19
- <div id="app"></div>
20
- <div id="c-ie-tips" style="display: none; background-color: #fef0f0; color: #f56c6c; padding: 10px; font-weight: bold; text-align: center; width: 60%; margin: 200px auto">
21
- <p>你的浏览器版本太低,可能无法正常使用本站,建议下载<a href="https://www.google.cn/intl/zh-CN/chrome/" target="_blank">Chrome</a>或其它极速浏览器</p>
22
- <p>www.jx3box.com</p>
23
- </div>
24
- <script>
25
- let ua = window.navigator.userAgent.toLocaleLowerCase();
26
- let isIE = ua.indexOf("trident") > 0 || ua.indexOf("msie") > 0;
27
- if (isIE) document.getElementById("c-ie-tips").style.display = "block";
28
- </script>
29
- <div style="display: none">
30
- <script type="text/javascript" src="https://s9.cnzz.com/z_stat.php?id=1277938200&web_id=1277938200"></script>
31
- </div>
32
- </body>
33
- </html>
package/src/Equip.vue DELETED
@@ -1,301 +0,0 @@
1
- <template>
2
- <div class="c-equip" v-if="plan">
3
- <div
4
- class="u-equip"
5
- :class="'u-equip-' + label"
6
- v-for="(item, label) in equip"
7
- :key="label"
8
- >
9
- <jx3-item-simple
10
- :item="item"
11
- :onlyIcon="true"
12
- iconSize="56px"
13
- :withName="true"
14
- />
15
- </div>
16
- <div class="u-info">
17
- <div class="u-title">{{ plan.title }}</div>
18
- <a class="u-author" :href="userpage" target="_blank">
19
- <img :src="avatar" class="u-author-avatar" />
20
- <span class="u-author-name">{{ plan.user_nickname }}</span>
21
- </a>
22
- <div class="u-time">
23
- <i class="el-icon-date"></i>
24
- {{ (plan.updated * 1000) | showTime }}
25
- </div>
26
- <div class="u-desc">{{ plan.description }}</div>
27
- <div class="u-qrcodebox">
28
- <QRcode :href="link" :s="120" v="static" />
29
- </div>
30
- </div>
31
- <div class="u-misc">
32
- <a class="u-logo" :href="link" target="_blank">
33
- <img svg-inline src="../assets/img/jx3box.svg" />
34
- <span>配装ID:{{ plan.id }}</span>
35
- </a>
36
- </div>
37
- </div>
38
- </template>
39
-
40
- <script>
41
- import EquipPosition from "../service/enum/EquipPosition";
42
- import ItemSimple from "./ItemSimple";
43
- import { authorLink } from "@jx3box/jx3box-common/js/utils";
44
- import QRcode from "@jx3box/jx3box-common-ui/src/interact/QRcode.vue";
45
- import { showTime } from "@jx3box/jx3box-common/js/moment.js";
46
- import { get_plan } from "../service/item.js";
47
- import { __Root } from "@jx3box/jx3box-common/data/jx3box.json";
48
- export default {
49
- props: ["data", "id"],
50
- data: function() {
51
- return {
52
- plan_data: "",
53
- };
54
- },
55
- computed: {
56
- plan: function() {
57
- return this.id ? this.plan_data : this.data;
58
- },
59
- equip: function() {
60
- return {
61
- weapon_1: this.plan.relation_items[
62
- EquipPosition.MELEE_WEAPON
63
- ][0],
64
- weapon_2: this.plan.relation_items[
65
- EquipPosition.RANGE_WEAPON
66
- ][0],
67
- cap: this.plan.relation_items[EquipPosition.HELM][0],
68
- cloth: this.plan.relation_items[EquipPosition.CHEST][0],
69
- belt: this.plan.relation_items[EquipPosition.WAIST][0],
70
- wrist: this.plan.relation_items[EquipPosition.BANGLE][0],
71
- trousers: this.plan.relation_items[EquipPosition.PANTS][0],
72
- shoes: this.plan.relation_items[EquipPosition.BOOTS][0],
73
- necklace: this.plan.relation_items[EquipPosition.AMULET][0],
74
- pendant: this.plan.relation_items[EquipPosition.PENDANT][0],
75
- ring_1: this.plan.relation_items[EquipPosition.RING_1][0],
76
- ring_2: this.plan.relation_items[EquipPosition.RING_2][0],
77
- };
78
- },
79
- avatar: function() {
80
- return this.plan ? this.plan.user_avatar : "";
81
- },
82
- username: function() {
83
- return this.plan ? this.plan.user_nickname : "";
84
- },
85
- uid: function() {
86
- return this.plan ? this.plan.user_id : "";
87
- },
88
- userpage: function() {
89
- return this.uid ? authorLink(this.uid) : "";
90
- },
91
- link: function() {
92
- return this.plan ? __Root + `item/#/plan_view/${this.plan.id}` : "";
93
- },
94
- },
95
- methods: {},
96
- filters: {
97
- showTime,
98
- },
99
- mounted: function() {
100
- if (this.id) {
101
- get_plan(this.id).then((res) => {
102
- this.plan_data = res.data.data;
103
- });
104
- }
105
- },
106
- components: {
107
- "jx3-item-simple": ItemSimple,
108
- QRcode,
109
- },
110
- };
111
- </script>
112
-
113
- <style lang="less">
114
- .c-equip {
115
- .dbi;
116
- .size(500px, 750px);
117
- // background:url('../assets/img/equip_bg.png') no-repeat 0 0;
118
- // background-color:#324f4a;
119
- // background-color:#fff;
120
- // border:6px solid #f5f7fa;
121
- background-color: @bg-black;
122
- border: 6px solid #444;
123
- .r(6px);
124
-
125
- .u-info {
126
- .mt(20px);
127
- .w(280px);
128
- .auto(x);
129
- .x;
130
- }
131
- .u-title {
132
- .nobreak;
133
- .fz(1rem, 2);
134
- .bold;
135
- color: #fff;
136
- }
137
-
138
- .u-author {
139
- // .pa;.lt(50%);
140
- // transform: translate3d(-50%,-50%,0);
141
- img {
142
- .r(2px);
143
- .size(20px);
144
- .y;
145
- }
146
- img {
147
- .mr(5px);
148
- }
149
- span {
150
- .fz(13px, 2.5);
151
- color: #ccc;
152
- }
153
- }
154
-
155
- .u-desc {
156
- .mt(10px);
157
- color: #ccc;
158
- font-size: 13px;
159
- line-height: 1.8;
160
- .break(10);
161
- .h(240px);
162
- white-space: pre-wrap;
163
- text-align: left;
164
- background: #2b2e31;
165
- padding: 10px;
166
- box-sizing: border-box;
167
- }
168
-
169
- .u-time {
170
- // .x(right);
171
- color: #999;
172
- .fz(12px);
173
- // .mt(5px);
174
- }
175
-
176
- .u-qrcodebox {
177
- .mt(60px);
178
- .w(140px);
179
- .auto(x);
180
-
181
- .w-qrcode-static {
182
- .u-txt {
183
- .mt(10px);
184
- color: #999;
185
- .fz(12px, 16px);
186
- }
187
- svg {
188
- fill: #999;
189
- .size(16px);
190
- .y(-4px);
191
- }
192
- .u-pic {
193
- padding: 10px 8px 8px 8px;
194
- border-radius: 2px;
195
- }
196
- }
197
- }
198
-
199
- .pr;
200
- .u-equip {
201
- .pa;
202
- .u-name {
203
- .none;
204
- }
205
- .u-uiid {
206
- .none;
207
- }
208
- }
209
-
210
- .u-equip-weapon_1 {
211
- .lt(170px, 630px);
212
- }
213
- .u-equip-weapon_2 {
214
- .lt(240px, 630px);
215
- }
216
-
217
- .u-equip-cap {
218
- .lt(12px, 90px);
219
- }
220
-
221
- .u-equip-cloth {
222
- .lt(12px, 270px);
223
- }
224
-
225
- .u-equip-belt {
226
- .lt(12px, 450px);
227
- }
228
-
229
- .u-equip-wrist {
230
- .lt(400px, 90px);
231
- }
232
-
233
- .u-equip-trousers {
234
- .lt(400px, 180px);
235
- }
236
-
237
- .u-equip-shoes {
238
- .lt(400px, 270px);
239
- }
240
-
241
- .u-equip-necklace {
242
- .lt(400px, 360px);
243
- }
244
-
245
- .u-equip-pendant {
246
- .lt(400px, 450px);
247
- }
248
-
249
- .u-equip-ring_1 {
250
- .lt(400px, 540px);
251
- }
252
-
253
- .u-equip-ring_2 {
254
- .lt(400px, 630px);
255
- }
256
-
257
- .u-misc {
258
- .pa;
259
- .lt(30px, 630px);
260
- }
261
-
262
- .u-logo {
263
- .db;
264
- svg,
265
- span {
266
- transition: 0.2s ease-in-out;
267
- }
268
- svg {
269
- .size(56px);
270
- fill: #fff;
271
- }
272
- span {
273
- .db;
274
- color: #fff;
275
- font-family: Consolas;
276
- .fz(12px);
277
- // .bold;
278
- }
279
- &:hover {
280
- span {
281
- color: #0cf;
282
- }
283
- svg {
284
- fill: #0cf;
285
- }
286
- }
287
- }
288
-
289
- .u-meta {
290
- // .mt(5px);
291
- .fz(12px);
292
- .db;
293
- // color:#1bbfe0;
294
- color: #fff;
295
- // &:hover{
296
- // color:#ff0;
297
- // }
298
- // .pa;.lb(20px,20px);
299
- }
300
- }
301
- </style>
@@ -1,93 +0,0 @@
1
- <template>
2
- <div class="c-letter-paper">
3
- <div
4
- :class="`c-letter-title c-letter-title__${data.slug}`"
5
- :style="{
6
- backgroundImage: `url(${data.img_title || ''})`,
7
- backgroundRepeat: 'no-repeat',
8
- backgroundSize: 'cover',
9
- }"
10
- >
11
- 我是抬头
12
- </div>
13
- <div
14
- :class="`c-letter-content c-letter-content__${data.slug}`"
15
- :style="{
16
- backgroundImage: `url(${data.img_body || ''})`,
17
- }"
18
- >
19
- <div
20
- class="u-header"
21
- :style="{
22
- backgroundImage: `url(${data.img_header || ''})`,
23
- backgroundRepeat: 'no-repeat',
24
- backgroundPosition: 'top center',
25
- }"
26
- >
27
- <div
28
- class="u-footer"
29
- :style="{
30
- backgroundImage: `url(${data.img_footer || ''})`,
31
- backgroundRepeat: 'no-repeat',
32
- backgroundPosition: 'bottom center',
33
- }"
34
- >
35
- <p v-for="o in 4" :key="o">明月几时有,把酒问青天。</p>
36
- </div>
37
- </div>
38
- </div>
39
- </div>
40
- </template>
41
-
42
- <script>
43
- export default {
44
- name: "letter-demo",
45
- props: {
46
- data: {
47
- type: Object,
48
- default: () => {},
49
- },
50
- },
51
- data() {
52
- return {
53
- styleTag: null,
54
- };
55
- },
56
- watch: {
57
- "data.style": {
58
- immediate: true,
59
- handler(val) {
60
- this.insertStyle(val);
61
- },
62
- },
63
- },
64
- methods: {
65
- insertStyle(style) {
66
- if (this.styleTag) {
67
- document.body.removeChild(this.styleTag);
68
- }
69
- this.styleTag = document.createElement("style");
70
- this.styleTag.textContent = style;
71
- document.body.appendChild(this.styleTag);
72
- },
73
- },
74
- };
75
- </script>
76
- <style lang="less">
77
- .c-letter-title {
78
- background-size: cover;
79
- }
80
- .c-letter-content {
81
- margin-top: 20px;
82
- background-repeat: repeat-y;
83
- background-size: contain;
84
- }
85
- .c-letter-content .u-header,
86
- .c-letter-content .u-footer {
87
- background-size: contain;
88
- background-repeat: no-repeat;
89
- }
90
- .c-letter-content .u-footer {
91
- background-position: bottom;
92
- }
93
- </style>
@@ -1,43 +0,0 @@
1
- <template>
2
- <div class="m-medal">
3
- <a :href="medalLink(item)" target="_blank" class="u-medal" v-for="item in medals" :key="item.id" :title="item.medal_desc">
4
- <img class="u-medal-img" :src="showIcon(item.medal)">
5
- </a>
6
- </div>
7
- </template>
8
-
9
- <script>
10
- import { getMedalLink } from '@jx3box/jx3box-common/js/utils'
11
- export default {
12
- name: 'author_medal',
13
- props: {
14
- medals: {
15
- type: Array,
16
- default: () => [], // [{ rank_id, medal_desc, medal }]
17
- },
18
- showIcon: {
19
- type: Function,
20
- default: () => true,
21
- }
22
- },
23
- methods: {
24
-
25
- medalLink({ rank_id, medal_type = 'rank' }) {
26
- return getMedalLink(rank_id, medal_type)
27
- }
28
- }
29
- }
30
- </script>
31
-
32
- <style lang="less">
33
- .m-medal {
34
- display: flex;
35
- .u-medal {
36
- cursor: pointer;
37
- .u-medal-img {
38
- width: 20px;
39
- height: 20px;
40
- }
41
- }
42
- }
43
- </style>
package/test-audio.html DELETED
@@ -1,121 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="zh-CN">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>音频播放器测试</title>
7
- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
8
- <style>
9
- body {
10
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
11
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
12
- min-height: 100vh;
13
- padding: 40px 20px;
14
- margin: 0;
15
- }
16
-
17
- .container {
18
- max-width: 800px;
19
- margin: 0 auto;
20
- }
21
-
22
- h1 {
23
- color: white;
24
- text-align: center;
25
- margin-bottom: 40px;
26
- font-size: 32px;
27
- }
28
-
29
- .demo-section {
30
- background: white;
31
- border-radius: 15px;
32
- padding: 30px;
33
- margin-bottom: 30px;
34
- box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
35
- }
36
-
37
- .demo-section h2 {
38
- margin-top: 0;
39
- color: #333;
40
- border-bottom: 2px solid #9b87f5;
41
- padding-bottom: 10px;
42
- }
43
-
44
- .code-block {
45
- background: #f5f5f5;
46
- border-radius: 8px;
47
- padding: 15px;
48
- margin: 15px 0;
49
- overflow-x: auto;
50
- }
51
-
52
- .code-block code {
53
- font-family: "Monaco", "Courier New", monospace;
54
- font-size: 14px;
55
- color: #333;
56
- }
57
- </style>
58
- </head>
59
- <body>
60
- <div class="container">
61
- <h1>🎵 JX3 音频播放器演示</h1>
62
-
63
- <div class="demo-section">
64
- <h2>使用示例</h2>
65
- <p>在文章内容中插入以下格式的文本,会自动渲染为音频播放器:</p>
66
- <div class="code-block">
67
- <code>name:123;author:1231;user_id:8719;src:https://cdn.jx3box.com/upload/voice/jx3cxk/2026/8719-1768912381447.mp3</code>
68
- </div>
69
- </div>
70
-
71
- <div class="demo-section">
72
- <h2>实际效果</h2>
73
- <div class="w-audio">name:123;author:1231;user_id:8719;src:https://cdn.jx3box.com/upload/voice/jx3cxk/2026/8719-1768912381447.mp3</div>
74
- </div>
75
-
76
- <div class="demo-section">
77
- <h2>功能特性</h2>
78
- <ul>
79
- <li>✨ 美观的紫色渐变卡片设计</li>
80
- <li>🎨 旋转的黑胶唱片动画效果</li>
81
- <li>🎯 可拖拽的进度条</li>
82
- <li>⏯️ 播放/暂停控制</li>
83
- <li>⏱️ 实时时间显示</li>
84
- <li>📱 响应式设计,支持移动端</li>
85
- <li>🎼 唱针动画效果</li>
86
- </ul>
87
- </div>
88
-
89
- <div class="demo-section">
90
- <h2>在项目中使用</h2>
91
- <p><strong>1. 导入模块:</strong></p>
92
- <div class="code-block">
93
- <code>import renderVoice from '@/assets/js/voice.js';</code>
94
- </div>
95
-
96
- <p><strong>2. 在组件挂载后调用:</strong></p>
97
- <div class="code-block">
98
- <code
99
- >mounted() {<br />
100
- &nbsp;&nbsp;renderVoice('.w-audio');<br />
101
- }</code
102
- >
103
- </div>
104
-
105
- <p><strong>3. HTML 中使用:</strong></p>
106
- <div class="code-block">
107
- <code>&lt;div class="w-audio"&gt;name:音频名称;author:作者;user_id:123;src:音频地址&lt;/div&gt;</code>
108
- </div>
109
- </div>
110
- </div>
111
-
112
- <script type="module">
113
- import renderVoice from "./assets/js/voice.js";
114
-
115
- // 页面加载完成后渲染音频播放器
116
- $(document).ready(function () {
117
- renderVoice(".w-audio");
118
- });
119
- </script>
120
- </body>
121
- </html>