@jx3box/jx3box-common-ui 6.4.5 → 6.4.7

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jx3box/jx3box-common-ui",
3
- "version": "6.4.5",
3
+ "version": "6.4.7",
4
4
  "description": "JX3BOX UI",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/App.vue CHANGED
@@ -1,127 +1,198 @@
1
1
  <template>
2
- <div class="container-page">
3
- <Header></Header>
4
- <Breadcrumb
5
- name="频道名称"
6
- slug="slug"
7
- root="/slug"
8
- :publishEnable="true"
9
- :feedbackEnable="true"
10
- :adminEnable="true"
2
+ <div class="container-page">
3
+ <Header></Header>
4
+ <Breadcrumb
5
+ name="频道名称"
6
+ slug="slug"
7
+ root="/slug"
8
+ :publishEnable="true"
9
+ :feedbackEnable="true"
10
+ :adminEnable="true"
11
+ >
12
+ <img
13
+ slot="logo"
14
+ svg-inline
15
+ src="../assets/img/jx3.svg"
16
+ />
17
+ bread info
18
+ </Breadcrumb>
19
+
20
+ <LeftSidebar :open="true">
21
+ <LeftSideToggle :mobileOnly="true" />
22
+ <Author
23
+ :author="author"
24
+ :uid="8"
25
+ />
26
+ </LeftSidebar>
27
+
28
+ <Main
29
+ :withoutLeft="false"
30
+ :withoutRight="false"
31
+ >
32
+ <el-tabs
33
+ v-model="tab"
34
+ type="card"
35
+ >
36
+ <el-tab-pane
37
+ label="CMS作品"
38
+ name="post"
11
39
  >
12
- <img slot="logo" svg-inline src="../assets/img/jx3.svg" />
13
- bread info
14
- </Breadcrumb>
15
-
16
- <LeftSidebar :open="true">
17
- <LeftSideToggle :mobileOnly="true" />
18
- <Author :author="author" :uid="8" />
19
- </LeftSidebar>
20
-
21
- <Main :withoutLeft="false" :withoutRight="false">
22
- <el-tabs v-model="tab" type="card">
23
- <el-tab-pane label="CMS作品" name="post">
24
- <el-radio-group v-model="post_id">
25
- <el-radio label="41346">临时测试</el-radio>
26
- <el-radio label="35605">Markdown</el-radio>
27
- <el-radio label="32035">仅小册</el-radio>
28
- <el-radio label="30017">仅联合创作者</el-radio>
29
- <el-radio label="30582">小册和联合创作者</el-radio>
30
- <el-radio label="31129">无小册和联合创作者</el-radio>
31
- </el-radio-group>
32
- <singlebox :post="post" @extendUpdate="updateExtend" />
33
- </el-tab-pane>
34
- <el-tab-pane label="通用组件" name="widget">
35
- <PostHeader :post="post" />
36
- <Creators :postId="30432" style="margin-bottom: 10px" />
37
- <Collection :id="59" :defaultVisible="true" />
38
- <UserPop title="添加用户" v-model="visible" @confirm="addUser" />
39
- <el-button @click="visible = true">用户POP</el-button>
40
-
41
- <Thx
42
- :postId="23865"
43
- postType="bbs"
44
- postTitle="bbs23865的标题"
45
- :userId="7"
46
- :adminBoxcoinEnable="true"
47
- :userBoxcoinEnable="true"
48
- />
49
-
50
- <hr />
51
-
52
- <Like mode="heart" :count="100" :showCount="true" />
53
- <Down :count="100" :showCount="true" />
54
- <Mark label="KEY" value="VALUE" BGL="#000" BGR="#F39" />
55
- <Fav post-id="90" post-type="jx3dat" post-title="jx3dat测试标题" />
56
- <Feed post-id="90" post-type="jx3dat" />
57
- <Print title="传入标题" />
58
- <QRcode />
59
- <Sharing />
60
-
61
- <hr />
62
-
63
- <markBy />
64
- <menuBy :data="['test1', 'test2']" />
65
- <orderBy />
66
- <tagBy :data="['PVE', 'PVX']" :type="tag" />
67
- <clientBy type="" />
68
- <zlpBy />
69
-
70
- <hr />
71
- <uploadImage
72
- v-model="upload"
73
- info="非必选。首页海报尺寸1100*300(推荐2200*600支持高分屏),最大20M。"
74
- ></uploadImage>
75
- <AuthorMedal :author-id="8"></AuthorMedal>
76
- </el-tab-pane>
77
- <el-tab-pane label="百科组件" name="wiki"
78
- ><WikiPanel :wiki-post="wikiPost">
79
- <template slot="head-title">
80
- <i class="el-icon-location-information"></i>
81
- <span class="u-title">通识正文</span>
82
- </template>
83
- <template slot="head-actions">
84
- <a class="el-button el-button--primary u-publish">
85
- <i class="el-icon-edit"></i>
86
- <span>完善百科通识</span>
87
- </a>
88
- <span class="u-more">查看更多</span>
89
- </template>
90
- <template slot="body"
91
- >正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容</template
92
- >
93
- </WikiPanel>
94
- <hr />
95
-
96
- <WikiRevisions type="achievement" source-id="2996" />
97
- <hr />
98
-
99
- <WikiComments type="achievement" source-id="2996" />
100
- <hr
101
- /></el-tab-pane>
102
- <el-tab-pane label="头像" name="avatar">
103
- <el-radio-group v-model="avatar_size">
104
- <el-radio :label="60">xs-60</el-radio>
105
- <el-radio :label="84">s-84</el-radio>
106
- <el-radio :label="136">m-136</el-radio>
107
- <el-radio :label="224">l-224</el-radio>
108
- </el-radio-group>
109
- <div>
110
- <Avatar :id="8" url="" :size="avatar_size" frame="" />
111
- </div>
112
- </el-tab-pane>
113
- </el-tabs>
114
-
115
- <RightSidebar>
116
- <RightSideMsg>Hello</RightSideMsg>
117
- <div id="directory"></div>
118
- <PostCollection :id="59" />
119
- </RightSidebar>
120
-
121
- <Footer></Footer>
122
- <Bottom></Bottom>
123
- </Main>
124
- </div>
40
+ <el-radio-group v-model="post_id">
41
+ <el-radio label="41346">临时测试</el-radio>
42
+ <el-radio label="35605">Markdown</el-radio>
43
+ <el-radio label="32035">仅小册</el-radio>
44
+ <el-radio label="30017">仅联合创作者</el-radio>
45
+ <el-radio label="30582">小册和联合创作者</el-radio>
46
+ <el-radio label="31129">无小册和联合创作者</el-radio>
47
+ </el-radio-group>
48
+ <singlebox
49
+ :post="post"
50
+ @extendUpdate="updateExtend"
51
+ />
52
+ </el-tab-pane>
53
+ <el-tab-pane
54
+ label="通用组件"
55
+ name="widget"
56
+ >
57
+ <PostHeader :post="post" />
58
+ <Creators
59
+ :postId="30432"
60
+ style="margin-bottom: 10px"
61
+ />
62
+ <Collection
63
+ :id="59"
64
+ :defaultVisible="true"
65
+ />
66
+ <UserPop
67
+ title="添加用户"
68
+ v-model="visible"
69
+ @confirm="addUser"
70
+ />
71
+ <el-button @click="visible = true">用户POP</el-button>
72
+
73
+ <Thx
74
+ :postId="23865"
75
+ postType="bbs"
76
+ postTitle="bbs23865的标题"
77
+ :userId="7"
78
+ :adminBoxcoinEnable="true"
79
+ :userBoxcoinEnable="true"
80
+ />
81
+
82
+ <hr />
83
+
84
+ <Like
85
+ mode="heart"
86
+ :count="100"
87
+ :showCount="true"
88
+ />
89
+ <Down
90
+ :count="100"
91
+ :showCount="true"
92
+ />
93
+ <Mark
94
+ label="KEY"
95
+ value="VALUE"
96
+ BGL="#000"
97
+ BGR="#F39"
98
+ />
99
+ <Fav
100
+ post-id="90"
101
+ post-type="jx3dat"
102
+ post-title="jx3dat测试标题"
103
+ />
104
+ <Feed
105
+ post-id="90"
106
+ post-type="jx3dat"
107
+ />
108
+ <Print title="传入标题" />
109
+ <QRcode />
110
+ <Sharing />
111
+
112
+ <hr />
113
+
114
+ <markBy />
115
+ <menuBy :data="['test1', 'test2']" />
116
+ <orderBy />
117
+ <tagBy
118
+ :data="['PVE', 'PVX']"
119
+ :type="tag"
120
+ />
121
+ <clientBy type="" />
122
+ <zlpBy />
123
+
124
+ <hr />
125
+ <uploadImage
126
+ v-model="upload"
127
+ info="非必选。首页海报尺寸1100*300(推荐2200*600支持高分屏),最大20M。"
128
+ ></uploadImage>
129
+ <AuthorMedal :author-id="8"></AuthorMedal>
130
+ </el-tab-pane>
131
+ <el-tab-pane
132
+ label="百科组件"
133
+ name="wiki"
134
+ >
135
+ <WikiPanel :wiki-post="wikiPost">
136
+ <template slot="head-title">
137
+ <i class="el-icon-location-information"></i>
138
+ <span class="u-title">通识正文</span>
139
+ </template>
140
+ <template slot="head-actions">
141
+ <a class="el-button el-button--primary u-publish">
142
+ <i class="el-icon-edit"></i>
143
+ <span>完善百科通识</span>
144
+ </a>
145
+ <span class="u-more">查看更多</span>
146
+ </template>
147
+ <template slot="body">正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容</template>
148
+ </WikiPanel>
149
+ <hr />
150
+
151
+ <WikiRevisions
152
+ type="achievement"
153
+ source-id="2996"
154
+ />
155
+ <hr />
156
+
157
+ <WikiComments
158
+ type="achievement"
159
+ source-id="2996"
160
+ />
161
+ <hr />
162
+ </el-tab-pane>
163
+ <el-tab-pane
164
+ label="头像"
165
+ name="avatar"
166
+ >
167
+ <el-radio-group v-model="avatar_size">
168
+ <el-radio label="xxs">xxs-36/48</el-radio>
169
+ <el-radio label="xs">xs-48/68</el-radio>
170
+ <el-radio label="s">s-68/88</el-radio>
171
+ <el-radio label="m">m-88/123</el-radio>
172
+ <el-radio label="l">l-120/168</el-radio>
173
+ <el-radio label="xl">xl-150/210</el-radio>
174
+ </el-radio-group>
175
+ <div style="padding:60px">
176
+ <Avatar
177
+ :id="8"
178
+ url="https://qzapp.qlogo.cn/qzapp/101870778/8384D5764DF76997E566D346B3EE78D6/100?x-oss-process=style/avatar_s"
179
+ :size="avatar_size"
180
+ frame="Xmas_2"
181
+ />
182
+ </div>
183
+ </el-tab-pane>
184
+ </el-tabs>
185
+
186
+ <RightSidebar>
187
+ <RightSideMsg>Hello</RightSideMsg>
188
+ <div id="directory"></div>
189
+ <PostCollection :id="59" />
190
+ </RightSidebar>
191
+
192
+ <Footer></Footer>
193
+ <Bottom></Bottom>
194
+ </Main>
195
+ </div>
125
196
  </template>
126
197
 
127
198
  <script>
@@ -177,102 +248,102 @@ import { __server } from "@jx3box/jx3box-common/data/jx3box.json";
177
248
  import { wiki } from "@jx3box/jx3box-common/js/wiki";
178
249
 
179
250
  export default {
180
- name: "App",
181
- components: {
182
- Header,
183
- Breadcrumb,
184
- LeftSidebar,
185
- LeftSideToggle,
186
- Main,
187
- Footer,
188
- Bottom,
189
- RightSidebar,
190
-
191
- // cmsList,
192
- singlebox,
193
- PostHeader,
194
- PostCollection,
195
-
196
- Thx,
197
- Collection,
198
- Creators,
199
-
200
- RightSideMsg,
201
- Author,
202
- Avatar,
203
-
204
- Mark,
205
- Like,
206
- Down,
207
- Fav,
208
- Feed,
209
-
210
- Print,
211
- Sharing,
212
- QRcode,
213
-
214
- markBy,
215
- menuBy,
216
- orderBy,
217
- tagBy,
218
- clientBy,
219
- zlpBy,
220
-
221
- uploadImage,
222
- AuthorMedal,
223
-
224
- WikiPanel,
225
- WikiRevisions,
226
- WikiComments,
227
-
228
- UserPop,
229
- },
230
- data: function () {
231
- return {
232
- tab: "avatar",
233
-
234
- post: "",
235
- post_id: "35605",
236
-
237
- author: "",
238
- wikiPost: null,
239
- tag: "",
240
- visible: false,
241
-
242
- avatar_size: 60,
243
-
244
- upload: "",
245
- text: `<Text>text="使用:<BUFF 3222 1 desc>,持续<BUFF 3222 1 time>。\\\n" font=105 </text><Text>text="红豆沙做馅儿,精致细腻的广式月饼。" font=100 </text><Text>text="使用:能在唐门套装供应商处换取如下装备。\\\n" font=105 </text><Text>text="[燕云·重泉靴]" name="iteminfolink" eventid=513 script="this.nVersion=0 this.dwTabType=7 this.dwIndex=35244 this.OnItemLButtonDown=function() OnItemLinkDown(this) end" font=100 r=255 g=40 b=255 </text><Text>text="," font=105 </text><Text>text="[燕云·铭松靴]" name="iteminfolink" eventid=513 script="this.nVersion=0 this.dwTabType=7 this.dwIndex=35245 this.OnItemLButtonDown=function() OnItemLinkDown(this) end" font=100 r=255 g=40 b=255 </text><Text>text="。" font=100 </text>`,
246
- };
251
+ name: "App",
252
+ components: {
253
+ Header,
254
+ Breadcrumb,
255
+ LeftSidebar,
256
+ LeftSideToggle,
257
+ Main,
258
+ Footer,
259
+ Bottom,
260
+ RightSidebar,
261
+
262
+ // cmsList,
263
+ singlebox,
264
+ PostHeader,
265
+ PostCollection,
266
+
267
+ Thx,
268
+ Collection,
269
+ Creators,
270
+
271
+ RightSideMsg,
272
+ Author,
273
+ Avatar,
274
+
275
+ Mark,
276
+ Like,
277
+ Down,
278
+ Fav,
279
+ Feed,
280
+
281
+ Print,
282
+ Sharing,
283
+ QRcode,
284
+
285
+ markBy,
286
+ menuBy,
287
+ orderBy,
288
+ tagBy,
289
+ clientBy,
290
+ zlpBy,
291
+
292
+ uploadImage,
293
+ AuthorMedal,
294
+
295
+ WikiPanel,
296
+ WikiRevisions,
297
+ WikiComments,
298
+
299
+ UserPop,
300
+ },
301
+ data: function () {
302
+ return {
303
+ tab: "avatar",
304
+
305
+ post: "",
306
+ post_id: "35605",
307
+
308
+ author: "",
309
+ wikiPost: null,
310
+ tag: "",
311
+ visible: false,
312
+
313
+ avatar_size: 'xl',
314
+
315
+ upload: "",
316
+ text: `<Text>text="使用:<BUFF 3222 1 desc>,持续<BUFF 3222 1 time>。\\\n" font=105 </text><Text>text="红豆沙做馅儿,精致细腻的广式月饼。" font=100 </text><Text>text="使用:能在唐门套装供应商处换取如下装备。\\\n" font=105 </text><Text>text="[燕云·重泉靴]" name="iteminfolink" eventid=513 script="this.nVersion=0 this.dwTabType=7 this.dwIndex=35244 this.OnItemLButtonDown=function() OnItemLinkDown(this) end" font=100 r=255 g=40 b=255 </text><Text>text="," font=105 </text><Text>text="[燕云·铭松靴]" name="iteminfolink" eventid=513 script="this.nVersion=0 this.dwTabType=7 this.dwIndex=35245 this.OnItemLButtonDown=function() OnItemLinkDown(this) end" font=100 r=255 g=40 b=255 </text><Text>text="。" font=100 </text>`,
317
+ };
318
+ },
319
+ created: function () {
320
+ wiki.getById(25594).then((res) => {
321
+ res = res.data;
322
+ this.wikiPost = res.data;
323
+ });
324
+ },
325
+ methods: {
326
+ addUser: function (val) {
327
+ console.log(val);
247
328
  },
248
- created: function () {
249
- wiki.getById(25594).then((res) => {
250
- res = res.data;
251
- this.wikiPost = res.data;
252
- });
329
+ loadPost: function () {
330
+ axios.get(`/api/cms/post/${this.post_id}`).then((res) => {
331
+ this.post = res.data.data;
332
+ this.$forceUpdate();
333
+ });
253
334
  },
254
- methods: {
255
- addUser: function (val) {
256
- console.log(val);
257
- },
258
- loadPost: function () {
259
- axios.get(`/api/cms/post/${this.post_id}`).then((res) => {
260
- this.post = res.data.data;
261
- this.$forceUpdate();
262
- });
263
- },
264
- updateExtend: function (val) {
265
- console.log(val);
266
- },
335
+ updateExtend: function (val) {
336
+ console.log(val);
267
337
  },
268
- watch: {
269
- post_id: {
270
- immediate: true,
271
- handler: function (val) {
272
- this.loadPost();
273
- },
274
- },
338
+ },
339
+ watch: {
340
+ post_id: {
341
+ immediate: true,
342
+ handler: function (val) {
343
+ this.loadPost();
344
+ },
275
345
  },
346
+ },
276
347
  };
277
348
  </script>
278
349
 
package/src/Box2.vue ADDED
@@ -0,0 +1,122 @@
1
+ <template>
2
+ <div class="c-jx3box" :class="{ on: status, isOverlay: overlayEnable && isOverlay }">
3
+ <!-- search -->
4
+ <header-search @click.native.stop />
5
+
6
+ <!-- list -->
7
+ <div class="u-list">
8
+ <div class="u-list__item" v-for="(value, index) in data" :key="index">
9
+ <div class="u-group">
10
+ <!-- <img class="u-group-icon" :src="value.icon" alt=""> -->
11
+ <span class="u-group-name">{{ value.name }}</span>
12
+ </div>
13
+
14
+ <div class="u-content">
15
+ <div class="u-content__item" v-for="(item, i) in value.children" :key="i">
16
+ <template v-if="item.children">
17
+ <div class="u-subtitle">{{ item.name }}</div>
18
+ <a
19
+ v-for="child in item.children"
20
+ :key="child.name"
21
+ class="u-link"
22
+ :href="child.href"
23
+ :target="getTarget(child.href)"
24
+ >
25
+ <span class="u-txt">{{ child.name }}</span>
26
+ </a>
27
+ <!-- :class="{ 'not-client': !matchedClient(child.client) }" -->
28
+ </template>
29
+ <!-- :class="{ 'not-client': !matchedClient(item.client) }" -->
30
+ <a v-else class="u-link" :href="item.href" :target="getTarget(item.href)">
31
+ <span class="u-txt">{{ item.name }}</span>
32
+ </a>
33
+ </div>
34
+ </div>
35
+ </div>
36
+ </div>
37
+ <span class="u-close" @click="closeBox($event)">
38
+ <i class="el-icon-upload2"></i>
39
+ <span>收起</span>
40
+ </span>
41
+ </div>
42
+ </template>
43
+
44
+ <script>
45
+ import search from "./header/search.vue";
46
+ import _ from "lodash";
47
+ import Bus from "../service/bus";
48
+ import { __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
49
+ import box from "../assets/data/box2.json";
50
+ import { getMenu } from "../service/header.js";
51
+ export default {
52
+ name: "Box",
53
+ props: ["overlayEnable"],
54
+ data: function () {
55
+ return {
56
+ status: false,
57
+ isOverlay: false,
58
+ data: box,
59
+ client: location.href.includes("origin") ? "origin" : "std",
60
+ };
61
+ },
62
+ computed: {
63
+ list: function () {
64
+ return this.data.filter((item, i) => {
65
+ return item.status && (item.client == this.client || item.client == "all");
66
+ });
67
+ },
68
+ },
69
+ methods: {
70
+ closeBox: function () {
71
+ Bus.$emit("toggleBox", false);
72
+ },
73
+ matchedClient: function (client) {
74
+ return client == "all" ? true : client == this.client;
75
+ },
76
+ getBoxIcon: function (val) {
77
+ return __imgPath + "image/box/" + val;
78
+ },
79
+ getTarget: function (val) {
80
+ if (window.innerWidth < 768 || val?.startsWith("/")) {
81
+ return "_self";
82
+ } else {
83
+ return "_blank";
84
+ }
85
+ },
86
+ },
87
+ created: function () {
88
+ if (this.overlayEnable) {
89
+ const vm = this;
90
+ window.addEventListener(
91
+ "scroll",
92
+ _.throttle(() => {
93
+ vm.isOverlay = window.scrollY > 200 ? true : false;
94
+ }, 200)
95
+ );
96
+ }
97
+ },
98
+ mounted: function () {
99
+ Bus.$on("toggleBox", (status) => {
100
+ if (status == undefined) {
101
+ this.status = !this.status;
102
+ } else {
103
+ this.status = status;
104
+ }
105
+ });
106
+ document.addEventListener("click", function () {
107
+ Bus.$emit("toggleBox", false);
108
+ });
109
+ },
110
+ components: {
111
+ "header-search": search,
112
+ },
113
+ };
114
+ </script>
115
+
116
+ <style lang="less">
117
+ @import "../assets/css/box2.less";
118
+ </style>
119
+
120
+ <style scoped lang="less">
121
+
122
+ </style>
package/src/Header.vue CHANGED
@@ -37,7 +37,7 @@ import clientSwitch from "./header/clientSwitch.vue";
37
37
  import search from "./header/search.vue";
38
38
  import nav from "./header/nav.vue";
39
39
  import user from "./header/user.vue";
40
- import Box from "../src/Box.vue";
40
+ import Box from "../src/Box2.vue";
41
41
 
42
42
  export default {
43
43
  name: "Header",
@@ -93,4 +93,4 @@ export default {
93
93
 
94
94
  <style lang="less">
95
95
  @import "../assets/css/header.less";
96
- </style>
96
+ </style>