@jx3box/jx3box-ui 2.0.5 → 2.0.6

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 (226) hide show
  1. package/.storybook/preview.js +22 -13
  2. package/.storybook/storybookMocks.js +191 -0
  3. package/README.md +6 -19
  4. package/assets/css/bread/admin.less +20 -2
  5. package/assets/css/bread/breadcrumb.less +5 -2
  6. package/assets/css/comment/quick-reply.less +1 -1
  7. package/assets/css/common/left-sidebar.less +1 -1
  8. package/assets/css/interact/like2.less +5 -2
  9. package/assets/css/single/author.less +15 -10
  10. package/assets/css/single/cms-single.less +1 -0
  11. package/assets/css/single/thx.less +34 -11
  12. package/assets/data/nav.json +344 -10
  13. package/assets/img/comment/comment.svg +1 -1
  14. package/assets/img/comment/heart_1.svg +1 -1
  15. package/assets/img/comment/hide.svg +1 -1
  16. package/assets/img/leftsidebar/medal.svg +1 -1
  17. package/assets/img/leftsidebar/post.svg +27 -46
  18. package/i18n/messages/en-US.js +357 -22
  19. package/i18n/messages/vi.js +350 -22
  20. package/i18n/messages/zh-CN.js +469 -20
  21. package/i18n/messages/zh-TW.js +350 -22
  22. package/index.js +19 -7
  23. package/package.json +8 -5
  24. package/service/cms.js +22 -0
  25. package/service/commit-history.js +18 -0
  26. package/service/community.js +60 -0
  27. package/service/fav.js +5 -6
  28. package/src/App.vue +154 -80
  29. package/src/Breadcrumb.vue +24 -11
  30. package/src/CommonFooter.vue +2 -2
  31. package/src/Footer.vue +13 -5
  32. package/src/LeftSideToggle.vue +10 -3
  33. package/src/LeftSidebar.vue +19 -5
  34. package/src/Main.vue +9 -2
  35. package/src/RightSidebar.vue +12 -3
  36. package/src/SuspendCommon.vue +52 -38
  37. package/src/author/AuthorFans.vue +7 -5
  38. package/src/author/AuthorFollow.vue +14 -7
  39. package/src/author/AuthorGift.vue +25 -17
  40. package/src/author/AuthorInfo.vue +46 -19
  41. package/src/author/AuthorLink.vue +3 -1
  42. package/src/author/AuthorMedals.vue +5 -2
  43. package/src/author/AuthorPosts.vue +31 -13
  44. package/src/author/AuthorRss.vue +7 -3
  45. package/src/author/AuthorTeams.vue +3 -1
  46. package/src/author/UserPop.vue +29 -17
  47. package/src/bread/Admin.vue +55 -32
  48. package/src/bread/AdminDirectMessage.vue +15 -8
  49. package/src/bread/AdminDrop.vue +124 -45
  50. package/src/bread/CommunityAdmin.vue +527 -0
  51. package/src/bread/DesignTask.vue +30 -26
  52. package/src/bread/ListAdmin.vue +199 -0
  53. package/src/bread/MigrateCommunity.vue +192 -0
  54. package/src/bread/MoveToCommunityDialog.vue +234 -0
  55. package/src/comment/Avatar.vue +18 -24
  56. package/src/comment/CommentContent.vue +57 -37
  57. package/src/comment/CommentContentSimple.vue +61 -63
  58. package/src/comment/CommentInputForm.vue +45 -34
  59. package/src/comment/CommentWithReply.vue +9 -6
  60. package/src/comment/QuickReply.vue +5 -1
  61. package/src/comment/ReplyForReply.vue +6 -4
  62. package/src/comment/ReplyList.vue +28 -18
  63. package/src/comment/Upload.vue +24 -6
  64. package/src/filters/clientBy.vue +10 -8
  65. package/src/filters/markBy.vue +35 -31
  66. package/src/filters/menuBy.vue +20 -22
  67. package/src/filters/orderBy.vue +17 -11
  68. package/src/filters/tagBy.vue +4 -2
  69. package/src/filters/topicBy.vue +12 -10
  70. package/src/filters/versionBy.vue +5 -3
  71. package/src/filters/zlpBy.vue +29 -25
  72. package/src/footer/copyright.vue +5 -5
  73. package/src/footer/links.vue +2 -2
  74. package/src/footer/official.vue +1 -1
  75. package/src/footer/resource.vue +6 -6
  76. package/src/header/alternate.vue +35 -18
  77. package/src/header/asset.vue +9 -19
  78. package/src/header/box.vue +20 -8
  79. package/src/header/box2.vue +16 -9
  80. package/src/header/client.vue +7 -7
  81. package/src/header/lang.vue +41 -6
  82. package/src/header/logo.vue +2 -3
  83. package/src/header/manage.vue +2 -2
  84. package/src/header/message.vue +3 -3
  85. package/src/header/nav.vue +26 -23
  86. package/src/header/publish.vue +2 -2
  87. package/src/header/search.vue +2 -2
  88. package/src/header/shop.vue +2 -2
  89. package/src/header/user.vue +4 -4
  90. package/src/header/userInfo.vue +22 -24
  91. package/src/header/vip.vue +2 -2
  92. package/src/interact/BoxcoinAdmin.vue +30 -16
  93. package/src/interact/BoxcoinRecords.vue +28 -11
  94. package/src/interact/BoxcoinUser.vue +33 -17
  95. package/src/interact/Fav.vue +5 -1
  96. package/src/interact/Homework.vue +318 -0
  97. package/src/interact/Like.vue +4 -2
  98. package/src/interact/Rss.vue +10 -4
  99. package/src/interact/Share.vue +18 -19
  100. package/src/interact/WatchLater.vue +5 -1
  101. package/src/main.js +1 -0
  102. package/src/single/Author.vue +5 -1
  103. package/src/single/CmsSingle.vue +29 -15
  104. package/src/single/Collection.vue +36 -26
  105. package/src/single/Comment.vue +19 -13
  106. package/src/single/Creators.vue +5 -3
  107. package/src/single/PostCollection.vue +158 -0
  108. package/src/single/PostDirectory.vue +0 -126
  109. package/src/single/PostGuide.vue +93 -0
  110. package/src/single/PostHeader.vue +39 -17
  111. package/src/single/PostTopic.vue +3 -3
  112. package/src/single/PostVersion.vue +219 -0
  113. package/src/single/RightAffix.vue +160 -0
  114. package/src/single/SimpleThx.vue +4 -2
  115. package/src/single/Thx.vue +14 -2
  116. package/src/single/VersionDialog.vue +238 -0
  117. package/src/stories/components/StoryPropsTable.vue +137 -0
  118. package/src/stories/filters/FilterGallery.stories.js +110 -0
  119. package/src/stories/filters/clientBy.stories.js +24 -0
  120. package/src/stories/filters/markBy.stories.js +6 -0
  121. package/src/stories/filters/menuBy.stories.js +6 -0
  122. package/src/stories/filters/orderBy.stories.js +6 -0
  123. package/src/stories/filters/tagBy.stories.js +6 -0
  124. package/src/stories/filters/topicBy.stories.js +6 -0
  125. package/src/stories/filters/versionBy.stories.js +6 -0
  126. package/src/stories/filters/zlpBy.stories.js +6 -0
  127. package/src/stories/layout/BaseShell.stories.js +38 -0
  128. package/src/stories/layout/Breadcrumb.stories.js +40 -0
  129. package/src/stories/layout/CommonFooter.stories.js +1 -1
  130. package/src/stories/layout/CommonHeader.stories.js +1 -1
  131. package/src/stories/layout/LeftSideToggle.stories.js +78 -0
  132. package/src/stories/layout/LeftSidebar.stories.js +40 -0
  133. package/src/stories/layout/Main.stories.js +41 -0
  134. package/src/stories/layout/RightSidebar.stories.js +36 -0
  135. package/src/stories/layout/StorybookShell.vue +271 -0
  136. package/src/stories/layout/SuspendCommon.stories.js +67 -0
  137. package/src/stories/layout/SuspendCommonStage.vue +143 -0
  138. package/src/stories/mockData.js +275 -0
  139. package/src/stories/other/UserPop.stories.js +51 -0
  140. package/src/stories/single/Author.stories.js +19 -0
  141. package/src/stories/single/AuthorStoryStage.vue +103 -0
  142. package/src/stories/single/CmsSingle.stories.js +19 -0
  143. package/src/stories/single/CmsSingleStoryStage.vue +118 -0
  144. package/src/stories/single/Collection.stories.js +34 -0
  145. package/src/stories/single/Comment.stories.js +36 -0
  146. package/src/stories/single/Creators.stories.js +34 -0
  147. package/src/stories/single/PostCollection.stories.js +34 -0
  148. package/src/stories/single/PostDirectory.stories.js +31 -0
  149. package/src/stories/single/PostGuide.stories.js +47 -0
  150. package/src/stories/single/PostHeader.stories.js +39 -0
  151. package/src/stories/single/PostVersion.stories.js +41 -0
  152. package/src/stories/single/RightAffix.stories.js +84 -0
  153. package/src/stories/single/SimpleThx.stories.js +39 -0
  154. package/src/stories/single/SingleGallery.stories.js +207 -0
  155. package/src/stories/single/Thx.stories.js +38 -0
  156. package/vue.config.js +2 -12
  157. package/assets/css/common/bottom.less +0 -25
  158. package/assets/css/editor/article.less +0 -36
  159. package/assets/css/editor/combo.less +0 -362
  160. package/assets/css/editor/resource.less +0 -399
  161. package/assets/css/editor/tinymce.less +0 -100
  162. package/assets/css/editor/upload.less +0 -136
  163. package/assets/css/module/author.less +0 -231
  164. package/assets/css/module/buff.less +0 -88
  165. package/assets/css/module/directory.less +0 -165
  166. package/assets/css/module/icon.less +0 -25
  167. package/assets/css/module/item.less +0 -279
  168. package/assets/css/module/item_simple.less +0 -58
  169. package/assets/css/module/jx3_element.less +0 -5
  170. package/assets/css/module/macro.less +0 -89
  171. package/assets/css/module/npc.less +0 -265
  172. package/assets/css/module/resource.less +0 -93
  173. package/assets/css/module/skill.less +0 -74
  174. package/assets/css/module/talent.less +0 -495
  175. package/assets/js/a.js +0 -46
  176. package/assets/js/code.js +0 -13
  177. package/assets/js/combo.js +0 -40
  178. package/assets/js/directory.js +0 -114
  179. package/assets/js/filter2.js +0 -186
  180. package/assets/js/fold.js +0 -11
  181. package/assets/js/gallery.js +0 -14
  182. package/assets/js/hljs_languages.js +0 -177
  183. package/assets/js/iframe.js +0 -38
  184. package/assets/js/img.js +0 -23
  185. package/assets/js/item/attribute_percent.js +0 -88
  186. package/assets/js/item/bind.js +0 -18
  187. package/assets/js/item/border.js +0 -19
  188. package/assets/js/item/border_quest.js +0 -12
  189. package/assets/js/item/color.js +0 -25
  190. package/assets/js/item/hljs_languages.js +0 -177
  191. package/assets/js/item/icon_url.js +0 -15
  192. package/assets/js/item/second_format.js +0 -19
  193. package/assets/js/jx3_element.js +0 -73
  194. package/assets/js/katex.js +0 -181
  195. package/assets/js/macro.js +0 -16
  196. package/assets/js/nextpage.js +0 -4
  197. package/assets/js/pswp.js +0 -67
  198. package/assets/js/pswp_template.js +0 -66
  199. package/assets/js/pz_iframe.js +0 -30
  200. package/assets/js/qixue.js +0 -28
  201. package/assets/js/renderImgPreview.js +0 -18
  202. package/assets/js/script.js +0 -6
  203. package/assets/js/stat.js +0 -107
  204. package/assets/js/talent2.js +0 -21
  205. package/assets/js/tex-mml-chtml.js +0 -36310
  206. package/assets/js/voice.js +0 -238
  207. package/assets/js/xss.js +0 -130
  208. package/src/editor/Article.vue +0 -230
  209. package/src/editor/BoxResource.vue +0 -441
  210. package/src/editor/Resource.vue +0 -623
  211. package/src/editor/Tinymce.vue +0 -204
  212. package/src/editor/Upload.vue +0 -277
  213. package/src/editor/UploadAlum.vue +0 -176
  214. package/src/editor/UploadBanner.vue +0 -156
  215. package/src/editor/components/Author.vue +0 -322
  216. package/src/editor/components/Avatar.vue +0 -95
  217. package/src/editor/components/Buff.vue +0 -80
  218. package/src/editor/components/Combo.vue +0 -259
  219. package/src/editor/components/Equip.vue +0 -299
  220. package/src/editor/components/GameText.vue +0 -242
  221. package/src/editor/components/Item.vue +0 -325
  222. package/src/editor/components/ItemSimple.vue +0 -134
  223. package/src/editor/components/Medal.vue +0 -43
  224. package/src/editor/components/Npc.vue +0 -215
  225. package/src/editor/components/PostAuthor.vue +0 -102
  226. package/src/editor/components/Skill.vue +0 -71
@@ -0,0 +1,34 @@
1
+ import PostCollection from '../../single/PostCollection.vue';
2
+ import StoryPropsTable from '../components/StoryPropsTable.vue';
3
+
4
+ const meta = {
5
+ title: 'Single/PostCollection',
6
+ component: PostCollection,
7
+ parameters: {
8
+ layout: 'fullscreen',
9
+ },
10
+ };
11
+
12
+ export default meta;
13
+
14
+ export const Default = {
15
+ render: () => ({
16
+ components: { PostCollection, StoryPropsTable },
17
+ setup() {
18
+ return {
19
+ propsInfo: [
20
+ { name: 'id', type: 'Number | String', default: '0', description: '关联小册 ID,组件会自动请求列表。' },
21
+ { name: 'store', type: 'Object', default: 'null', description: '可直接传入包含 posts 的对象,跳过请求。' },
22
+ ],
23
+ };
24
+ },
25
+ template: `
26
+ <div style="display:grid;gap:24px;">
27
+ <section style="border-radius:20px;background:rgba(255,255,255,0.92);padding:24px;box-shadow:0 24px 60px rgba(15,23,42,0.08);">
28
+ <PostCollection :id="1" />
29
+ </section>
30
+ <StoryPropsTable title="PostCollection" description="文章关联内容列表,通常用于右侧辅助阅读区域。" :items="propsInfo" />
31
+ </div>
32
+ `,
33
+ }),
34
+ };
@@ -0,0 +1,31 @@
1
+ import PostDirectory from '../../single/PostDirectory.vue';
2
+ import StoryPropsTable from '../components/StoryPropsTable.vue';
3
+
4
+ const meta = {
5
+ title: 'Single/PostDirectory',
6
+ component: PostDirectory,
7
+ parameters: {
8
+ layout: 'fullscreen',
9
+ },
10
+ };
11
+
12
+ export default meta;
13
+
14
+ export const Default = {
15
+ render: () => ({
16
+ components: { PostDirectory, StoryPropsTable },
17
+ template: `
18
+ <div style="display:grid;gap:24px;">
19
+ <section style="border-radius:20px;background:rgba(255,255,255,0.92);padding:20px;box-shadow:0 24px 60px rgba(15,23,42,0.08);">
20
+ <PostDirectory />
21
+ <div class="c-article-directory" style="margin-top:12px;">
22
+ <h2>版本概览</h2>
23
+ <h3 class="lv2">核心思路</h3>
24
+ <h3 class="lv2">配装建议</h3>
25
+ </div>
26
+ </section>
27
+ <StoryPropsTable title="PostDirectory" description="当前组件本身无 props,主要配合正文目录渲染结果使用。" :items="[]" />
28
+ </div>
29
+ `,
30
+ }),
31
+ };
@@ -0,0 +1,47 @@
1
+ import PostGuide from '../../single/PostGuide.vue';
2
+ import StoryPropsTable from '../components/StoryPropsTable.vue';
3
+
4
+ const mockGuidePost = {
5
+ prev_post: {
6
+ ID: 80440,
7
+ post_type: 'bbs',
8
+ post_title: '上一期:配装思路回顾',
9
+ },
10
+ next_post: {
11
+ ID: 80460,
12
+ post_type: 'bbs',
13
+ post_title: '下一期:实战循环拆解',
14
+ },
15
+ };
16
+
17
+ const meta = {
18
+ title: 'Single/PostGuide',
19
+ component: PostGuide,
20
+ parameters: {
21
+ layout: 'fullscreen',
22
+ },
23
+ };
24
+
25
+ export default meta;
26
+
27
+ export const Default = {
28
+ render: () => ({
29
+ components: { PostGuide, StoryPropsTable },
30
+ setup() {
31
+ return {
32
+ mockGuidePost,
33
+ propsInfo: [
34
+ { name: 'post', type: 'Object', default: '{}', description: '包含 prev_post / next_post 的文章导航数据。' },
35
+ ],
36
+ };
37
+ },
38
+ template: `
39
+ <div style="display:grid;gap:24px;">
40
+ <section style="border-radius:20px;background:rgba(255,255,255,0.92);padding:24px;box-shadow:0 24px 60px rgba(15,23,42,0.08);">
41
+ <PostGuide :post="mockGuidePost" />
42
+ </section>
43
+ <StoryPropsTable title="PostGuide" description="文章底部上一篇 / 下一篇导航。" :items="propsInfo" />
44
+ </div>
45
+ `,
46
+ }),
47
+ };
@@ -0,0 +1,39 @@
1
+ import PostHeader from '../../single/PostHeader.vue';
2
+ import StoryPropsTable from '../components/StoryPropsTable.vue';
3
+ import { mockPost, mockStat } from '../mockData';
4
+
5
+ const meta = {
6
+ title: 'Single/PostHeader',
7
+ component: PostHeader,
8
+ parameters: {
9
+ layout: 'fullscreen',
10
+ },
11
+ };
12
+
13
+ export default meta;
14
+
15
+ export const Default = {
16
+ render: () => ({
17
+ components: { PostHeader, StoryPropsTable },
18
+ setup() {
19
+ return {
20
+ mockPost,
21
+ mockStat,
22
+ propsInfo: [
23
+ { name: 'post', type: 'Object', default: '{}', required: true, description: '文章标题、作者、客户端、时间等来源。' },
24
+ { name: 'stat', type: 'Object', default: '{}', description: '统计信息,常用为 views。' },
25
+ { name: 'titleExtra', type: 'String', default: '""', description: '是否展示额外标签区域。' },
26
+ { name: 'anonymous', type: 'Boolean', default: 'false', description: '匿名展示作者。' },
27
+ ],
28
+ };
29
+ },
30
+ template: `
31
+ <div style="display:grid;gap:24px;">
32
+ <section style="border-radius:20px;background:rgba(255,255,255,0.92);padding:24px;box-shadow:0 24px 60px rgba(15,23,42,0.08);">
33
+ <PostHeader :post="mockPost" :stat="mockStat" title-extra="1" />
34
+ </section>
35
+ <StoryPropsTable title="PostHeader" description="单页顶部信息栏。" :items="propsInfo" />
36
+ </div>
37
+ `,
38
+ }),
39
+ };
@@ -0,0 +1,41 @@
1
+ import PostVersion from '../../single/PostVersion.vue';
2
+ import StoryPropsTable from '../components/StoryPropsTable.vue';
3
+ import { mockPost } from '../mockData';
4
+
5
+ const meta = {
6
+ title: 'Single/PostVersion',
7
+ component: PostVersion,
8
+ parameters: {
9
+ layout: 'fullscreen',
10
+ },
11
+ };
12
+
13
+ export default meta;
14
+
15
+ export const Default = {
16
+ render: () => ({
17
+ components: { PostVersion, StoryPropsTable },
18
+ setup() {
19
+ return {
20
+ storyPost: {
21
+ ...mockPost,
22
+ link_content_meta_id: 501,
23
+ },
24
+ propsInfo: [
25
+ { name: 'post', type: 'Object', default: '{}', required: true, description: '包含标题、正文和 `link_content_meta_id` 的文章对象。' },
26
+ ],
27
+ };
28
+ },
29
+ template: `
30
+ <div style="display:grid;gap:24px;">
31
+ <section style="border-radius:20px;background:rgba(255,255,255,0.92);padding:24px;box-shadow:0 24px 60px rgba(15,23,42,0.08);">
32
+ <div style="margin-bottom:16px;color:#475569;line-height:1.8;">
33
+ 该 story 已接入 mock 历史版本数据。点击“对比”可直接打开版本差异弹窗。
34
+ </div>
35
+ <PostVersion :post="storyPost" />
36
+ </section>
37
+ <StoryPropsTable title="PostVersion" description="文章历史版本列表与对比弹窗。" :items="propsInfo" />
38
+ </div>
39
+ `,
40
+ }),
41
+ };
@@ -0,0 +1,84 @@
1
+ import { onMounted, onBeforeUnmount, ref } from 'vue';
2
+ import RightAffix from '../../single/RightAffix.vue';
3
+ import StoryPropsTable from '../components/StoryPropsTable.vue';
4
+ import Bus from '../../../utils/bus';
5
+
6
+ const meta = {
7
+ title: 'Single/RightAffix',
8
+ component: RightAffix,
9
+ parameters: {
10
+ layout: 'fullscreen',
11
+ },
12
+ argTypes: {
13
+ postId: { control: 'number' },
14
+ postType: { control: 'text' },
15
+ postTitle: { control: 'text' },
16
+ showComment: { control: 'boolean' },
17
+ },
18
+ };
19
+
20
+ export default meta;
21
+
22
+ export const Default = {
23
+ args: {
24
+ postId: 80449,
25
+ postType: 'bbs',
26
+ postTitle: '轻剑驭风版本攻略示例',
27
+ showComment: true,
28
+ },
29
+ render: (args) => ({
30
+ components: { RightAffix, StoryPropsTable },
31
+ setup() {
32
+ const commentCount = ref(0);
33
+
34
+ const onToComment = () => {
35
+ commentCount.value += 1;
36
+ };
37
+
38
+ const openAffix = () => Bus.emit('toggleRightSide', true);
39
+ const closeAffix = () => Bus.emit('toggleRightSide', false);
40
+
41
+ onMounted(() => {
42
+ // 触发一次滚动事件,方便在 Storybook 中更容易观察“回到顶部”按钮
43
+ window.scrollTo({ top: 1200 });
44
+ window.dispatchEvent(new Event('scroll'));
45
+ });
46
+
47
+ onBeforeUnmount(() => {
48
+ window.scrollTo({ top: 0 });
49
+ });
50
+
51
+ return {
52
+ args,
53
+ commentCount,
54
+ onToComment,
55
+ openAffix,
56
+ closeAffix,
57
+ propsInfo: [
58
+ { name: 'postId', type: 'String | Number', default: '""', description: '当前文章 ID,用于收藏查询。' },
59
+ { name: 'postType', type: 'String', default: '""', description: '文章类型,例如 bbs / pvx。' },
60
+ { name: 'postTitle', type: 'String', default: '""', description: '文章标题,用于收藏请求。' },
61
+ { name: 'showComment', type: 'Boolean | Number', default: 'false', description: '是否展示评论入口按钮。' },
62
+ ],
63
+ };
64
+ },
65
+ template: `
66
+ <div style="display:grid;gap:24px;">
67
+ <section style="position:relative;min-height:180vh;border-radius:20px;background:linear-gradient(180deg,#f8fafc 0%,#eef2ff 100%);padding:24px;box-shadow:0 24px 60px rgba(15,23,42,0.08);">
68
+ <div style="max-width:760px;color:#334155;line-height:1.8;">
69
+ <h3 style="margin:0 0 12px;font-size:22px;color:#0f172a;">RightAffix 交互舞台</h3>
70
+ <p style="margin:0 0 10px;">该组件固定在右侧,包含收藏、评论入口和回到顶部。你可以通过下方按钮模拟右栏展开/收起。</p>
71
+ <p style="margin:0;">评论按钮点击次数:<strong>{{ commentCount }}</strong></p>
72
+ <div style="display:flex;gap:12px;margin-top:16px;">
73
+ <button type="button" class="el-button el-button--primary el-button--small" @click="openAffix">展开</button>
74
+ <button type="button" class="el-button el-button--small is-plain" @click="closeAffix">收起</button>
75
+ </div>
76
+ </div>
77
+
78
+ <RightAffix v-bind="args" @toComment="onToComment" />
79
+ </section>
80
+ <StoryPropsTable title="RightAffix" description="单页右侧悬浮交互区,依赖收藏组件与滚动状态。" :items="propsInfo" />
81
+ </div>
82
+ `,
83
+ }),
84
+ };
@@ -0,0 +1,39 @@
1
+ import SimpleThx from '../../single/SimpleThx.vue';
2
+ import StoryPropsTable from '../components/StoryPropsTable.vue';
3
+
4
+ const meta = {
5
+ title: 'Single/SimpleThx',
6
+ component: SimpleThx,
7
+ parameters: {
8
+ layout: 'fullscreen',
9
+ },
10
+ };
11
+
12
+ export default meta;
13
+
14
+ export const Default = {
15
+ render: () => ({
16
+ components: { SimpleThx, StoryPropsTable },
17
+ setup() {
18
+ return {
19
+ presetConfig: { admin_max: 1000, admin_min: 10, admin_points: [10, 50, 100], admin_left: 4800, admin_total: 10000, user_points: [10, 20, 50], user_left: 820, boxcoin_enable: 1 },
20
+ propsInfo: [
21
+ { name: 'postId', type: 'Number | String', default: '0', required: true, description: '文章 ID。' },
22
+ { name: 'postType', type: 'String', default: '""', required: true, description: '文章类型。' },
23
+ { name: 'postTitle', type: 'String', default: '""', description: '文章标题。' },
24
+ { name: 'userId', type: 'Number | String', default: '0', description: '作者 UID。' },
25
+ { name: 'adminBoxcoinEnable / userBoxcoinEnable', type: 'Boolean', default: 'false', description: '控制打赏区显示。' },
26
+ { name: 'presetConfig', type: 'Object', default: '{}', description: 'Storybook 下可直接注入打赏配置,避免空态。' },
27
+ ],
28
+ };
29
+ },
30
+ template: `
31
+ <div style="display:grid;gap:24px;">
32
+ <section style="border-radius:20px;background:rgba(255,255,255,0.92);padding:24px;box-shadow:0 24px 60px rgba(15,23,42,0.08);">
33
+ <SimpleThx post-type="bbs" post-title="轻剑驭风版本攻略示例" :post-id="80449" :user-id="8" :admin-boxcoin-enable="true" :user-boxcoin-enable="true" :allow-gift="true" :preset-config="presetConfig" />
34
+ </section>
35
+ <StoryPropsTable title="SimpleThx" description="简化互动条组件。" :items="propsInfo" />
36
+ </div>
37
+ `,
38
+ }),
39
+ };
@@ -0,0 +1,207 @@
1
+
2
+ import StoryPropsTable from '../components/StoryPropsTable.vue';
3
+ import SingleAuthor from '../../single/Author.vue';
4
+ import CmsSingle from '../../single/CmsSingle.vue';
5
+ import Collection from '../../single/Collection.vue';
6
+ import Comment from '../../single/Comment.vue';
7
+ import Creators from '../../single/Creators.vue';
8
+ import PostDirectory from '../../single/PostDirectory.vue';
9
+ import PostHeader from '../../single/PostHeader.vue';
10
+ import SimpleThx from '../../single/SimpleThx.vue';
11
+ import Thx from '../../single/Thx.vue';
12
+ import { mockPost, mockStat } from '../mockData';
13
+
14
+ const meta = {
15
+ title: 'Single/Index',
16
+ parameters: {
17
+ layout: 'fullscreen',
18
+ },
19
+ };
20
+
21
+ export default meta;
22
+
23
+ export const Overview = {
24
+ render: () => ({
25
+ components: {
26
+ CmsSingle,
27
+ PostHeader,
28
+ Creators,
29
+ Collection,
30
+ PostDirectory,
31
+ StoryPropsTable,
32
+ },
33
+ setup() {
34
+ return {
35
+ mockPost,
36
+ mockStat,
37
+ singleProps: [
38
+ {
39
+ title: 'CmsSingle',
40
+ description: '单页整合容器,通常只要给 post 和 stat 就能跑起来。',
41
+ items: [
42
+ { name: 'post', type: 'Object', default: '{}', required: true, description: '文章主体数据,包含标题、正文、作者、评论开关等字段。' },
43
+ { name: 'stat', type: 'Object', default: '{}', description: '统计信息,常用为浏览量 views。' },
44
+ ],
45
+ },
46
+ {
47
+ title: 'PostHeader',
48
+ description: '单页头部信息组件。',
49
+ items: [
50
+ { name: 'post', type: 'Object', default: '{}', required: true, description: '文章标题、作者、客户端、发布时间等信息来源。' },
51
+ { name: 'stat', type: 'Object', default: '{}', description: '展示浏览量。' },
52
+ { name: 'titleExtra', type: 'String', default: '""', description: '是否展示扩展标题标签。' },
53
+ { name: 'anonymous', type: 'Boolean', default: 'false', description: '是否匿名展示作者。' },
54
+ ],
55
+ },
56
+ {
57
+ title: 'Creators / Collection / Article / Comment / Thx',
58
+ description: '这些组件大多围绕文章 ID、类型和正文工作。',
59
+ items: [
60
+ { name: 'postId / id', type: 'Number | String', default: '0', required: true, description: '文章或集合主键。' },
61
+ { name: 'postType / category', type: 'String', default: '""', required: true, description: '文章类型,例如 bbs、article。' },
62
+ { name: 'content', type: 'String', default: '""', description: 'Article 正文 HTML。' },
63
+ { name: 'userId', type: 'Number | String', default: '0', description: '用于 Thx / SimpleThx 的作者 UID。' },
64
+ ],
65
+ },
66
+ {
67
+ title: 'Author',
68
+ description: '详情页左侧作者整合模块。',
69
+ items: [
70
+ { name: 'uid', type: 'Number | String', default: '0', required: true, description: '作者 UID。' },
71
+ { name: 'anonymous', type: 'Number | String', default: '0', description: '是否匿名模式。' },
72
+ ],
73
+ },
74
+ ],
75
+ };
76
+ },
77
+ template: `
78
+ <div style="display: grid; gap: 24px;">
79
+ <section style="border-radius: 20px; background: rgba(255,255,255,0.92); padding: 24px; box-shadow: 0 24px 60px rgba(15,23,42,0.08);">
80
+ <div style="font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #0ea5e9;">single</div>
81
+ <h2 style="margin: 10px 0 0; font-size: 28px; color: #0f172a;">内容单页组件总览</h2>
82
+ <p style="margin-top: 12px; color: #475569; line-height: 1.8;">这里集中展示 README 里的单页内容组件,方便在 Storybook 中快速查看组合效果。</p>
83
+ </section>
84
+
85
+ <section style="border-radius: 20px; background: rgba(255,255,255,0.92); padding: 24px; box-shadow: 0 24px 60px rgba(15,23,42,0.08);">
86
+ <h3 style="margin: 0 0 16px; font-size: 20px; color: #0f172a;">PostHeader + Creators + Collection + Article + PostDirectory</h3>
87
+ <PostHeader :post="mockPost" :stat="mockStat" title-extra="1" />
88
+ <Creators :post-id="mockPost.ID" :post-type="mockPost.post_type" />
89
+ <Collection :id="mockPost.post_collection" :default-visible="true" />
90
+ <Article :content="mockPost.post_content" :pageable="false" />
91
+ <div style="margin-top: 20px; padding: 16px; border: 1px dashed rgba(15,23,42,0.15); border-radius: 16px;">
92
+ <div style="font-size: 14px; font-weight: 700; color: #0f172a; margin-bottom: 10px;">PostDirectory</div>
93
+ <PostDirectory />
94
+ <div class="c-article-directory" style="margin-top: 8px;">
95
+ <h2>版本概览</h2>
96
+ <h3 class="lv2">核心思路</h3>
97
+ <h3 class="lv2">配装建议</h3>
98
+ </div>
99
+ </div>
100
+ </section>
101
+
102
+ <section style="border-radius: 20px; background: rgba(255,255,255,0.92); padding: 24px; box-shadow: 0 24px 60px rgba(15,23,42,0.08);">
103
+ <h3 style="margin: 0 0 16px; font-size: 20px; color: #0f172a;">CmsSingle</h3>
104
+ <CmsSingle :post="mockPost" :stat="mockStat" />
105
+ </section>
106
+
107
+ <StoryPropsTable
108
+ v-for="item in singleProps"
109
+ :key="item.title"
110
+ :title="item.title"
111
+ :description="item.description"
112
+ :items="item.items"
113
+ />
114
+ </div>
115
+ `,
116
+ }),
117
+ };
118
+
119
+ export const Interactive = {
120
+ render: () => ({
121
+ components: {
122
+ SingleAuthor,
123
+ SimpleThx,
124
+ Thx,
125
+ Comment,
126
+ StoryPropsTable,
127
+ },
128
+ data() {
129
+ return {
130
+ interactiveProps: [
131
+ {
132
+ title: 'SimpleThx / Thx',
133
+ description: '互动组件需要文章标识和作者信息;如果要在 Storybook 中可见,建议同时给开关类 props。',
134
+ items: [
135
+ { name: 'postId', type: 'Number | String', default: '0', required: true, description: '当前文章 ID。' },
136
+ { name: 'postType', type: 'String', default: '""', required: true, description: '文章类型。' },
137
+ { name: 'postTitle', type: 'String', default: '""', description: '展示和收藏用标题。' },
138
+ { name: 'userId', type: 'Number | String', default: '0', description: '文章作者 UID。' },
139
+ { name: 'adminBoxcoinEnable / userBoxcoinEnable', type: 'Boolean', default: 'false', description: '控制打赏模块显示。' },
140
+ ],
141
+ },
142
+ {
143
+ title: 'Comment',
144
+ description: '评论组件依赖评论目标分类和目标 ID。',
145
+ items: [
146
+ { name: 'id', type: 'Number | String', default: '0', required: true, description: '评论目标 ID。' },
147
+ { name: 'category', type: 'String', default: '""', required: true, description: '评论分类,例如 post。' },
148
+ { name: 'normal', type: 'Boolean', default: 'true', description: '普通评论模式。' },
149
+ { name: 'order', type: 'String', default: '""', description: '初始排序模式。' },
150
+ ],
151
+ },
152
+ ],
153
+ };
154
+ },
155
+ template: `
156
+ <div style="display: grid; gap: 24px;">
157
+ <section style="border-radius: 20px; background: rgba(255,255,255,0.92); padding: 24px; box-shadow: 0 24px 60px rgba(15,23,42,0.08);">
158
+ <h3 style="margin: 0 0 16px; font-size: 20px; color: #0f172a;">Author</h3>
159
+ <div style="max-width: 320px;">
160
+ <SingleAuthor :uid="8" />
161
+ </div>
162
+ </section>
163
+
164
+ <section style="border-radius: 20px; background: rgba(255,255,255,0.92); padding: 24px; box-shadow: 0 24px 60px rgba(15,23,42,0.08);">
165
+ <h3 style="margin: 0 0 16px; font-size: 20px; color: #0f172a;">SimpleThx / Thx</h3>
166
+ <div style="display: grid; gap: 18px;">
167
+ <SimpleThx
168
+ post-type="bbs"
169
+ post-title="轻剑驭风版本攻略示例"
170
+ :post-id="80449"
171
+ :user-id="8"
172
+ :admin-boxcoin-enable="true"
173
+ :user-boxcoin-enable="true"
174
+ :allow-gift="true"
175
+ :preset-config="{ admin_max: 1000, admin_min: 10, admin_points: [10,50,100], admin_left: 4800, admin_total: 10000, user_points: [10,20,50], user_left: 820, boxcoin_enable: 1 }"
176
+ />
177
+ <Thx
178
+ post-type="bbs"
179
+ post-title="轻剑驭风版本攻略示例"
180
+ :post-id="80449"
181
+ :user-id="8"
182
+ :admin-boxcoin-enable="true"
183
+ :user-boxcoin-enable="true"
184
+ :allow-gift="true"
185
+ :show-rss="true"
186
+ author-id="8"
187
+ category="post"
188
+ />
189
+ </div>
190
+ </section>
191
+
192
+ <section style="border-radius: 20px; background: rgba(255,255,255,0.92); padding: 24px; box-shadow: 0 24px 60px rgba(15,23,42,0.08);">
193
+ <h3 style="margin: 0 0 16px; font-size: 20px; color: #0f172a;">Comment</h3>
194
+ <Comment category="post" :id="80449" />
195
+ </section>
196
+
197
+ <StoryPropsTable
198
+ v-for="item in interactiveProps"
199
+ :key="item.title"
200
+ :title="item.title"
201
+ :description="item.description"
202
+ :items="item.items"
203
+ />
204
+ </div>
205
+ `,
206
+ }),
207
+ };
@@ -0,0 +1,38 @@
1
+ import Thx from '../../single/Thx.vue';
2
+ import StoryPropsTable from '../components/StoryPropsTable.vue';
3
+
4
+ const meta = {
5
+ title: 'Single/Thx',
6
+ component: Thx,
7
+ parameters: {
8
+ layout: 'fullscreen',
9
+ },
10
+ };
11
+
12
+ export default meta;
13
+
14
+ export const Default = {
15
+ render: () => ({
16
+ components: { Thx, StoryPropsTable },
17
+ setup() {
18
+ return {
19
+ propsInfo: [
20
+ { name: 'postId', type: 'Number | String', default: '0', required: true, description: '文章 ID。' },
21
+ { name: 'postType', type: 'String', default: '""', required: true, description: '文章类型。' },
22
+ { name: 'postTitle', type: 'String', default: '""', description: '文章标题。' },
23
+ { name: 'userId', type: 'Number | String', default: '0', description: '作者 UID。' },
24
+ { name: 'showRss', type: 'Boolean', default: 'false', description: '是否显示订阅按钮。' },
25
+ { name: 'adminBoxcoinEnable / userBoxcoinEnable', type: 'Boolean', default: 'false', description: '控制打赏模块显示。' },
26
+ ],
27
+ };
28
+ },
29
+ template: `
30
+ <div style="display:grid;gap:24px;">
31
+ <section style="border-radius:20px;background:rgba(255,255,255,0.92);padding:24px;box-shadow:0 24px 60px rgba(15,23,42,0.08);">
32
+ <Thx post-type="bbs" post-title="轻剑驭风版本攻略示例" :post-id="80449" :user-id="8" :admin-boxcoin-enable="true" :user-boxcoin-enable="true" :allow-gift="true" :show-rss="true" author-id="8" category="post" />
33
+ </section>
34
+ <StoryPropsTable title="Thx" description="完整互动条组件。" :items="propsInfo" />
35
+ </div>
36
+ `,
37
+ }),
38
+ };
package/vue.config.js CHANGED
@@ -14,18 +14,6 @@ module.exports = {
14
14
  filename: "index.html",
15
15
  title: "JX3BOX",
16
16
  },
17
- article: {
18
- title: "Article",
19
- entry: "demo/A.js",
20
- template: "public/article.html",
21
- filename: "article/index.html",
22
- },
23
- tinymce: {
24
- title: "Tinymce",
25
- entry: "demo/T.js",
26
- template: "public/tinymce.html",
27
- filename: "tinymce/index.html",
28
- },
29
17
  },
30
18
 
31
19
 
@@ -138,6 +126,8 @@ function buildEnvProxy() {
138
126
  target: normalized,
139
127
  changeOrigin: true,
140
128
  secure: false,
129
+ // API 代理不需要 websocket,避免给 dev server 叠加 upgrade 监听器
130
+ ws: false,
141
131
  cookieDomainRewrite: "",
142
132
  pathRewrite: (p) => p.replace(contextRe, ""),
143
133
  },
@@ -1,25 +0,0 @@
1
- @gray: #888;
2
- @space: 20px;
3
- @pink: #f39;
4
-
5
- .m-bottom {
6
- /* assets/css/common/bottom.less */
7
- font-size: 12px;
8
- color: @gray;
9
- margin-top: @space;
10
- font-family: verdana, "Trebuchet MS", Tahoma;
11
-
12
- a {
13
- /* assets/css/common/bottom.less */
14
- color: @gray;
15
- &:hover {
16
- /* assets/css/common/bottom.less */
17
- color: @pink;
18
- }
19
- }
20
-
21
- .u-feedback {
22
- /* assets/css/common/bottom.less */
23
- float: right;
24
- }
25
- }
@@ -1,36 +0,0 @@
1
- // tinymce文章样式
2
-
3
- @import "../tinymce/_.less";
4
- @import "../tinymce/a.less";
5
- @import "../tinymce/list.less";
6
- @import "../tinymce/quote.less";
7
- @import "../tinymce/hr.less";
8
- @import "../tinymce/table.less";
9
- @import "../tinymce/img.less";
10
- @import "../tinymce/p.less";
11
- @import "../tinymce/h.less";
12
- @import "../tinymce/code.less";
13
- @import "../tinymce/fold.less";
14
- @import "../tinymce/plugin.less";
15
- @import "../tinymce/imgpreview.less";
16
- @import "../tinymce/latex.less";
17
- @import "../tinymce/nextpage.less";
18
-
19
- @import "../module/macro.less";
20
- @import "../module/talent.less";
21
-
22
- @import "../tinymce/video.less";
23
- @import "../tinymce/macro.less";
24
- @import "../tinymce/qixue.less";
25
- @import "../tinymce/pz.less";
26
- @import "../tinymce/combo.less";
27
-
28
- @import "../module/directory.less";
29
- @import "../module/icon.less";
30
- @import "../module/resource.less";
31
- @import "../module/jx3_element.less";
32
-
33
- @import "../module/buff.less";
34
- @import "../module/skill.less";
35
- @import "../module/item.less";
36
- @import "../module/npc.less";