@jx3box/jx3box-common-ui 6.6.8 → 6.7.0

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 (7) hide show
  1. package/assets/css/header.less +92 -64
  2. package/assets/img/header/coin.svg +15 -1
  3. package/package.json +2 -4
  4. package/src/App.vue +3 -3
  5. package/src/header/gameSwitch.vue +50 -39
  6. package/src/header/user.vue +84 -44
  7. package/src/single/Thx.vue +2 -3
package/assets/css/header.less CHANGED
@@ -594,6 +594,12 @@ body {
594
594
  }
595
595
  }
596
596
 
597
+ @media screen and (max-width: @ipad) {
598
+ .c-header-msg {
599
+ display: none;
600
+ }
601
+ }
602
+
597
603
  //操作面板
598
604
  .c-header-panel {
599
605
  float: left;
@@ -628,6 +634,12 @@ body {
628
634
  }
629
635
  }
630
636
 
637
+ @media screen and (max-width: @ipad) {
638
+ .c-header-panel {
639
+ display: none;
640
+ }
641
+ }
642
+
631
643
  // 用户资产
632
644
  .c-header-assets {
633
645
  float: left;
@@ -636,14 +648,14 @@ body {
636
648
 
637
649
  .u-coin {
638
650
  .db;
639
- .size(18px);
651
+ .size(16px);
640
652
  * {
641
653
  fill: #fff !important;
642
654
  }
643
655
  }
644
656
  .u-asset {
645
657
  .db;
646
- padding: (@header-height - 16px)/2 10px;
658
+ padding: (@header-height - 14px)/2 10px;
647
659
  &:hover {
648
660
  .tm(0.7);
649
661
  }
@@ -886,85 +898,101 @@ body {
886
898
  opacity: 0.7;
887
899
  }
888
900
  }
901
+ }
889
902
 
890
- .m-info {
891
- background-clip: padding-box;
892
- background-color: #fff;
893
- color: #3d454d;
894
- border: 1px solid rgba(27, 31, 35, 0.15);
895
- border-radius: 4px;
896
- box-shadow: 0 3px 12px rgb(27 31 35 / 35%);
897
- right: 0;
898
- list-style: none;
899
- position: absolute;
900
- z-index: 820;
901
- top: 100%;
902
- width: 400px;
903
- margin-top: 18px;
904
- margin-right: -10px;
903
+ .c-header-userdata {
904
+ background-clip: padding-box;
905
+ background-color: #fff;
906
+ color: #3d454d;
907
+ border: 1px solid rgba(27, 31, 35, 0.15);
908
+ border-radius: 4px;
909
+ box-shadow: 0 3px 12px rgba(0,0,0,.1);
910
+ right: 0;
911
+ list-style: none;
912
+ position: absolute;
913
+ z-index: 820;
914
+ top: 100%;
915
+ width: 400px;
916
+ margin-top: 18px;
917
+ margin-right: -10px;
918
+
919
+ .u-profile {
920
+ background-color: #f4f6f7;
921
+ padding: 10px;
922
+ }
905
923
 
906
- .u-profile {
907
- background-color: #f4f6f7;
908
- padding: 10px;
909
- }
924
+ .u-basic{
925
+ .flex;
926
+ align-items: center;
927
+ gap:3px;
928
+ }
910
929
 
911
- .u-id {
912
- font-size: 12px;
913
- color: #999;
914
- margin-top: 5px;
915
- }
916
- .u-copy {
917
- margin-left: 5px;
918
- .pointer;
930
+ .u-displayname{
931
+ .fz(15px);
932
+ .nobreak;
933
+ max-width: 200px;
934
+ color:@color;
935
+ .bold;
936
+ }
919
937
 
920
- &:hover {
921
- color: @primary;
922
- }
923
- }
924
- .m-vip {
925
- margin-top: 5px;
926
- }
927
- .u-vip {
928
- margin-left: 10px;
938
+ .u-id {
939
+ font-size: 12px;
940
+ color: #999;
941
+ margin-top: 6px;
942
+ b{color:@color;}
943
+ }
944
+ .u-copy {
945
+ margin-left: 5px;
946
+ .pointer;
947
+
948
+ &:hover {
949
+ color: @primary;
929
950
  }
951
+ }
930
952
 
931
- .u-actions {
932
- width: 100%;
933
- .flex;
953
+ .u-actions {
954
+ width: 100%;
955
+ .flex;
934
956
 
935
- .el-button {
936
- border-radius: 0;
937
- flex: 1;
957
+ .el-button {
958
+ border-radius: 0;
959
+ flex: 1;
938
960
 
939
- &:first-of-type {
940
- border-left-width: 0;
941
- }
942
- &:last-of-type {
943
- border-right-width: 0;
944
- }
961
+ &:first-of-type {
962
+ border-left-width: 0;
963
+ }
964
+ &:last-of-type {
965
+ border-right-width: 0;
945
966
  }
946
967
  }
968
+ }
947
969
 
948
- .m-other {
949
- .u-item {
950
- display: block;
951
- padding: 5px 10px;
952
- color: #454545;
970
+ .u-other {
971
+ padding:10px 5px;
972
+ .u-item {
973
+ display: block;
974
+ padding: 5px 10px;
975
+ color: #454545;
953
976
 
954
- &:hover {
955
- background: @primary;
956
- color: #fff;
957
- }
977
+ &:hover {
978
+ background: @primary;
979
+ color: #fff;
958
980
  }
959
- .u-logout {
960
- padding: 0 10px 10px 10px;
961
981
 
962
- .el-button {
963
- width: 100%;
964
- }
982
+ i{
983
+ .mr(5px);
965
984
  }
966
985
  }
967
986
  }
987
+
988
+ .u-logout {
989
+ padding: 0 10px 10px 10px;
990
+ .mt(10px);
991
+
992
+ .el-button {
993
+ width: 100%;
994
+ }
995
+ }
968
996
  }
969
997
 
970
998
  @media print {
package/assets/img/header/coin.svg CHANGED
@@ -1 +1,15 @@
1
- <svg fill="none" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m12 22c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10zm0-2c2.1217 0 4.1566-.8429 5.6569-2.3431 1.5002-1.5003 2.3431-3.5352 2.3431-5.6569 0-2.12173-.8429-4.15656-2.3431-5.65685-1.5003-1.5003-3.5352-2.34315-5.6569-2.34315-2.12173 0-4.15656.84285-5.65685 2.34315-1.5003 1.50029-2.34315 3.53512-2.34315 5.65685 0 2.1217.84285 4.1566 2.34315 5.6569 1.50029 1.5002 3.53512 2.3431 5.65685 2.3431zm0-12.95 4.95 4.95-4.95 4.95-4.95-4.95zm0 2.829-2.121 2.121 2.121 2.121 2.121-2.121z" fill="rgb(0,0,0)"/></svg>
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 27.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
+ viewBox="0 0 256 256" style="enable-background:new 0 0 256 256;" xml:space="preserve">
5
+ <g>
6
+ <g>
7
+ <path d="M127.9,256C56.9,256-0.8,198,0,126.5C0.8,56.2,58.5-0.9,129.7,0C200,0.9,256.9,58.6,256,129.8
8
+ C255,199.7,198,256.1,127.9,256z M14.4,128c0,62.7,50.7,113.5,113.4,113.7c62.8,0.2,113.8-50.8,113.9-113.5
9
+ c0-62.9-50.8-113.9-113.9-113.8C65.1,14.6,14.6,65.3,14.4,128z"/>
10
+ <path d="M127.9,191.1c-21-21-42-42-62.9-62.9c21-21,42.1-42.1,63.1-63.1C149,85.9,170.1,107,191,128
11
+ C170.1,149,149,170,127.9,191.1z M83.4,128c14.9,14.9,29.9,29.9,44.6,44.6c14.9-14.9,29.8-29.8,44.6-44.6
12
+ c-14.8-14.8-29.8-29.8-44.6-44.6C113.2,98.2,98.2,113.2,83.4,128z"/>
13
+ </g>
14
+ </g>
15
+ </svg>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jx3box/jx3box-common-ui",
3
- "version": "6.6.8",
3
+ "version": "6.7.0",
4
4
  "description": "JX3BOX UI",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -9,7 +9,7 @@
9
9
  "build": "vue-cli-service build",
10
10
  "lint": "vue-cli-service lint",
11
11
  "inspect": "vue inspect > output.js",
12
- "update": "npm --registry https://registry.npmjs.org install @jx3box/jx3box-common@latest @jx3box/jx3box-data@latest @jx3box/jx3box-editor@latest @jx3box/jx3box-comment-ui@latest",
12
+ "update": "npm --registry https://registry.npmjs.org install @jx3box/jx3box-common@latest @jx3box/jx3box-data@latest",
13
13
  "header": "vue-cli-service build --target lib --name newheader src/Header.vue && cp public/index.html dist/newheader.html"
14
14
  },
15
15
  "eslintConfig": {
@@ -30,10 +30,8 @@
30
30
  "last 2 versions"
31
31
  ],
32
32
  "dependencies": {
33
- "@jx3box/jx3box-comment-ui": "^1.7.8",
34
33
  "@jx3box/jx3box-common": "^7.6.2",
35
34
  "@jx3box/jx3box-data": "^3.0.3",
36
- "@jx3box/jx3box-editor": "^1.6.9",
37
35
  "axios": "^0.26.1",
38
36
  "dayjs": "^1.11.0",
39
37
  "element-ui": "^2.13.2",
package/src/App.vue CHANGED
@@ -30,9 +30,9 @@
30
30
  <Collection :id="59" :defaultVisible="true" />
31
31
  <UserPop title="添加用户" v-model="visible" @confirm="addUser" />
32
32
  <el-button @click="visible = true">用户POP</el-button>
33
- <Thx :postId="23865" postType="bbs" postTitle="bbs23865的标题" type="batchReward" :userId="7"
34
- :adminBoxcoinEnable="true" :userBoxcoinEnable="true"
35
- :items="[{ user_id: 10, article_id: '11111', article_type: '' }]" />
33
+ <!-- :postId="23865" -->
34
+ <Thx postType="bbs" postTitle="bbs23865的标题" type="batchReward" :userId="7" :adminBoxcoinEnable="true"
35
+ :userBoxcoinEnable="true" :postId="[{ user_id: 10, article_id: '11111', article_type: '' }]" />
36
36
  <hr />
37
37
  <Like mode="heart" :count="100" :showCount="true" />
38
38
  <Down :count="100" :showCount="true" />
package/src/header/gameSwitch.vue CHANGED
@@ -174,54 +174,65 @@ export default {
174
174
  background-color: @primary;
175
175
  .pointer;
176
176
  }
177
+
178
+ transition: 0.05s ease-in;
179
+ &:hover{
180
+ background-color: lighten(@primary,2%);
181
+ color:#eee;
182
+ }
183
+ }
184
+ }
185
+ @media screen and (max-width: @phone) {
186
+ .c-game-switch {
187
+ margin-left: 15px;
177
188
  }
178
189
  }
179
190
  .c-game-list {
180
- .arrow(t,5px,@bg-black,12%);
181
- position: absolute;
182
- top: calc(100% + 14px);
183
- left: -10px;
184
- width: 300px;
185
- background-color: #24292e;
186
- padding: 10px;
187
- border: 1px solid rgba(27, 31, 35, 0.15);
191
+ .arrow(t,5px,@bg-black,12%);
192
+ position: absolute;
193
+ top: calc(100% + 14px);
194
+ left: -10px;
195
+ width: 300px;
196
+ background-color: #24292e;
197
+ padding: 10px;
198
+ border: 1px solid rgba(27, 31, 35, 0.15);
199
+ border-radius: 4px;
200
+ box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15);
201
+ margin-top: 6px;
202
+ display: grid;
203
+ grid-template-columns: repeat(2, 1fr);
204
+ // gap:10px;
205
+ grid-row-gap: 8px;
206
+ grid-column-gap: 10px;
207
+ .u-game-item {
208
+ .flex;
209
+ align-items: center;
210
+ padding: 6px;
211
+ .pointer;
188
212
  border-radius: 4px;
189
- box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15);
190
- margin-top: 6px;
191
- display: grid;
192
- grid-template-columns: repeat(2, 1fr);
193
- // gap:10px;
194
- grid-row-gap: 8px;
195
- grid-column-gap: 10px;
196
- .u-game-item {
197
- .flex;
198
- align-items: center;
199
- padding: 6px;
200
- .pointer;
213
+ color: #fff;
214
+ font-size: 14px;
215
+ .u-img {
216
+ width: 24px;
217
+ height: 24px;
218
+ margin-right: 5px;
201
219
  border-radius: 4px;
220
+ }
221
+ &.active {
222
+ background-color: @primary;
202
223
  color: #fff;
203
- font-size: 14px;
204
- .u-img {
205
- width: 24px;
206
- height: 24px;
207
- margin-right: 5px;
208
- border-radius: 4px;
209
- }
210
- &.active {
224
+ }
225
+ &:not(.disabled) {
226
+ &:hover {
211
227
  background-color: @primary;
212
228
  color: #fff;
213
229
  }
214
- &:not(.disabled) {
215
- &:hover {
216
- background-color: @primary;
217
- color: #fff;
218
- }
219
- }
220
- &.disabled {
221
- filter: grayscale(100%);
222
- color: #c0c4cc;
223
- cursor: not-allowed;
224
- }
230
+ }
231
+ &.disabled {
232
+ filter: grayscale(100%);
233
+ color: #c0c4cc;
234
+ cursor: not-allowed;
225
235
  }
226
236
  }
237
+ }
227
238
  </style>
package/src/header/user.vue CHANGED
@@ -33,7 +33,7 @@
33
33
  <span class="u-item">
34
34
  <!-- <span class="u-item-primary>" -->
35
35
  <span class="u-label"><i class="el-icon-user"></i> 等级</span>
36
- <span class="u-value">Lv.{{ level }}</span>
36
+ <span class="u-value" :style="levelStyle">Lv.{{ level }}</span>
37
37
  <!-- </span> -->
38
38
  <!-- <span class="u-item-extend"><a href="/notice/28917" target="_blank">[权益]</a></span> -->
39
39
  </span>
@@ -111,53 +111,87 @@
111
111
  <div class="c-header-info">
112
112
  <div class="c-header-profile" id="c-header-profile" @click="showmenu">
113
113
  <img class="u-avatar" :src="user.avatar" />
114
- <div class="m-info" v-show="!fold">
115
- <div class="u-profile">
116
- <b :title="user.name">{{ showUserName(user.name) }}</b>
117
- <div class="u-id">
118
- <span>魔盒UID：{{ user.uid }}</span>
119
- <i class="el-icon-document-copy u-copy" @click.stop="copyText(user.uid)"></i>
120
- </div>
121
- <div class="m-vip">
122
- <a href="/dashboard/cooperation">
123
- <img
124
- :src="super_author_icon"
125
- class="u-superauthor-profile"
126
- alt="superauthor"
127
- title="签约作者"
128
- :class="{ off: !isSuperAuthor }"
129
- /></a>
130
-
131
- <a
132
- class="u-vip"
133
- href="/vip/premium?from=header_usermenu"
134
- target="_blank"
135
- title="专业版"
136
- >
137
- <i class="i-icon-vip" :class="{ on: isPRO }">{{ vipType }}</i>
138
- </a>
114
+ <template v-if="isPhone">
115
+ <ul class="u-menu" v-show="!fold">
116
+ <li>
117
+ <a href="/dashboard">个人中心</a>
118
+ </li>
119
+ <li>
120
+ <a :href="url.msg">消息中心</a>
121
+ </li>
122
+ <li>
123
+ <a :href="url.publish">发布中心</a>
124
+ </li>
125
+ <hr />
126
+ <li v-if="isAdmin">
127
+ <a href="/admin">站点配置</a>
128
+ </li>
129
+ <li v-if="isEditor">
130
+ <a href="https://os.jx3box.com/admin">管理平台</a>
131
+ </li>
132
+ <li>
133
+ <a @click="logout">退出登录</a>
134
+ </li>
135
+ </ul>
136
+ </template>
137
+ <template v-else>
138
+ <div class="c-header-userdata" v-show="!fold">
139
+ <div class="u-profile">
140
+ <div class="u-basic">
141
+ <a class="u-displayname" href="/dashboard" :title="user.name">{{
142
+ showUserName(user.name)
143
+ }}</a>
144
+ <a class="u-sign" href="/dashboard/cooperation">
145
+ <img
146
+ :src="super_author_icon"
147
+ class="u-superauthor-profile"
148
+ alt="superauthor"
149
+ title="签约作者"
150
+ :class="{ off: !isSuperAuthor }"
151
+ /></a>
152
+ <a
153
+ class="u-vip"
154
+ href="/vip/premium?from=header_usermenu"
155
+ target="_blank"
156
+ title="专业版账号"
157
+ >
158
+ <i class="i-icon-vip" :class="{ on: isPRO }">{{ vipType }}</i>
159
+ </a>
160
+ </div>
161
+ <div class="u-id">
162
+ <span
163
+ >魔盒UID：<b>{{ user.uid }}</b></span
164
+ >
165
+ <i class="el-icon-document-copy u-copy" @click.stop="copyText(user.uid)"></i>
166
+ </div>
139
167
  </div>
140
- </div>
141
168
 
142
- <el-button-group class="u-actions">
143
- <a class="el-button el-button--default" :href="url.profile">资料设置</a>
144
- <a class="el-button el-button--default" :href="url.homepage">个人主页</a>
145
- <a class="el-button el-button--default" href="/dashboard/frame">主题风格</a>
146
- </el-button-group>
169
+ <el-button-group class="u-actions">
170
+ <a class="el-button el-button--default" :href="url.profile">资料设置</a>
171
+ <a class="el-button el-button--default" :href="url.homepage">个人主页</a>
172
+ <a class="el-button el-button--default" href="/dashboard/frame">主题风格</a>
173
+ </el-button-group>
147
174
 
148
- <div class="m-other">
149
- <a href="/dashboard/fav" class="u-item"> 我的收藏 </a>
150
- <a href="/team/role/manage" class="u-item"> 我的角色 </a>
151
- <a href="/dashboard/purchases" class="u-item"> 付费购买的资源 </a>
152
- <a href="/vip/mall" class="u-item"> 积分商城兑好礼 </a>
153
- <hr />
154
- <a href="/dashboard/feedback" class="u-item"> 反馈中心 </a>
155
- <hr />
156
- <div class="u-logout">
157
- <el-button @click="logout">退出登录</el-button>
175
+ <div class="u-other">
176
+ <a href="/dashboard/fav" class="u-item"><i class="el-icon-star-off"></i>收藏订阅 </a>
177
+ <a href="/team/role/manage" class="u-item"><i class="el-icon-user"></i>角色管理 </a>
178
+ <a href="/dashboard/purchases" class="u-item"
179
+ ><i class="el-icon-shopping-cart-2"></i>已购资源
180
+ </a>
181
+ <a href="/dashboard/mall" class="u-item"
182
+ ><i class="el-icon-shopping-bag-1"></i>订单中心
183
+ </a>
184
+ <hr />
185
+ <a href="/dashboard/feedback" class="u-item"
186
+ ><i class="el-icon-phone-outline"></i>反馈帮助
187
+ </a>
188
+ <hr />
189
+ <div class="u-logout">
190
+ <el-button @click="logout" size="small">退出登录</el-button>
191
+ </div>
158
192
  </div>
159
193
  </div>
160
- </div>
194
+ </template>
161
195
  </div>
162
196
  </div>
163
197
  </template>
@@ -174,7 +208,7 @@
174
208
  <script>
175
209
  import User from "@jx3box/jx3box-common/js/user";
176
210
  import { showDate } from "@jx3box/jx3box-common/js/moment";
177
- import { __Links, __Root, __imgPath, __OriginRoot } from "@jx3box/jx3box-common/data/jx3box.json";
211
+ import { __Links, __Root, __imgPath, __OriginRoot, __userLevelColor } from "@jx3box/jx3box-common/data/jx3box.json";
178
212
  import panel from "../../assets/data/panel.json";
179
213
  import { getMsg, getMenu } from "../../service/header";
180
214
  import { getMyInfo, userSignIn } from "../../service/author";
@@ -189,6 +223,7 @@ export default {
189
223
  panel,
190
224
  isEditor: false,
191
225
  isAdmin: false,
226
+ isPhone: window.innerWidth < 768,
192
227
 
193
228
  // 是否有消息
194
229
  pop: false,
@@ -269,6 +304,11 @@ export default {
269
304
  level: function () {
270
305
  return User.getLevel(this.asset.experience);
271
306
  },
307
+ levelStyle: function () {
308
+ return {
309
+ color: __userLevelColor[this.level],
310
+ };
311
+ },
272
312
  },
273
313
  watch: {
274
314
  fold(val) {
package/src/single/Thx.vue CHANGED
@@ -2,7 +2,7 @@
2
2
  <div class="w-thx">
3
3
  <template v-if="type === 'batchReward'">
4
4
  <!-- 批量打赏 -->
5
- <BatchReward :postType="postType" :items="items" :boxcoin="boxcoin" :own="user_left" :points="user_points"
5
+ <batch-reward :postType="postType" :items="postId" :boxcoin="boxcoin" :own="user_left" :points="user_points"
6
6
  :authors="authors" :client="client" v-if="userBoxcoinEnable && boxcoin_enable"
7
7
  @updateRecord="updateRecord" />
8
8
  </template>
@@ -56,13 +56,12 @@ export default {
56
56
  "mode",
57
57
  "authors",
58
58
  "client",
59
- "items"
60
59
  ],
61
60
  components: {
62
61
  Like,
63
62
  Share,
64
63
  Fav,
65
- BatchReward,
64
+ "batch-reward": BatchReward,
66
65
  "boxcoin-records": BoxcoinRecords,
67
66
  "boxcoin-admin": BoxcoinAdmin,
68
67
  "boxcoin-user": BoxcoinUser,