@jx3box/jx3box-common-ui 6.6.9 → 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 (5) hide show
  1. package/assets/css/header.less +80 -64
  2. package/assets/img/header/coin.svg +15 -1
  3. package/package.json +2 -4
  4. package/src/header/gameSwitch.vue +6 -0
  5. package/src/header/user.vue +28 -21
package/assets/css/header.less CHANGED
@@ -648,14 +648,14 @@ body {
648
648
 
649
649
  .u-coin {
650
650
  .db;
651
- .size(18px);
651
+ .size(16px);
652
652
  * {
653
653
  fill: #fff !important;
654
654
  }
655
655
  }
656
656
  .u-asset {
657
657
  .db;
658
- padding: (@header-height - 16px)/2 10px;
658
+ padding: (@header-height - 14px)/2 10px;
659
659
  &:hover {
660
660
  .tm(0.7);
661
661
  }
@@ -898,85 +898,101 @@ body {
898
898
  opacity: 0.7;
899
899
  }
900
900
  }
901
+ }
901
902
 
902
- .m-info {
903
- background-clip: padding-box;
904
- background-color: #fff;
905
- color: #3d454d;
906
- border: 1px solid rgba(27, 31, 35, 0.15);
907
- border-radius: 4px;
908
- box-shadow: 0 3px 12px rgb(27 31 35 / 35%);
909
- right: 0;
910
- list-style: none;
911
- position: absolute;
912
- z-index: 820;
913
- top: 100%;
914
- width: 400px;
915
- margin-top: 18px;
916
- 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
+ }
917
923
 
918
- .u-profile {
919
- background-color: #f4f6f7;
920
- padding: 10px;
921
- }
924
+ .u-basic{
925
+ .flex;
926
+ align-items: center;
927
+ gap:3px;
928
+ }
922
929
 
923
- .u-id {
924
- font-size: 12px;
925
- color: #999;
926
- margin-top: 5px;
927
- }
928
- .u-copy {
929
- margin-left: 5px;
930
- .pointer;
930
+ .u-displayname{
931
+ .fz(15px);
932
+ .nobreak;
933
+ max-width: 200px;
934
+ color:@color;
935
+ .bold;
936
+ }
931
937
 
932
- &:hover {
933
- color: @primary;
934
- }
935
- }
936
- .m-vip {
937
- margin-top: 5px;
938
- }
939
- .u-vip {
940
- 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;
941
950
  }
951
+ }
942
952
 
943
- .u-actions {
944
- width: 100%;
945
- .flex;
953
+ .u-actions {
954
+ width: 100%;
955
+ .flex;
946
956
 
947
- .el-button {
948
- border-radius: 0;
949
- flex: 1;
957
+ .el-button {
958
+ border-radius: 0;
959
+ flex: 1;
950
960
 
951
- &:first-of-type {
952
- border-left-width: 0;
953
- }
954
- &:last-of-type {
955
- border-right-width: 0;
956
- }
961
+ &:first-of-type {
962
+ border-left-width: 0;
963
+ }
964
+ &:last-of-type {
965
+ border-right-width: 0;
957
966
  }
958
967
  }
968
+ }
959
969
 
960
- .m-other {
961
- .u-item {
962
- display: block;
963
- padding: 5px 10px;
964
- color: #454545;
970
+ .u-other {
971
+ padding:10px 5px;
972
+ .u-item {
973
+ display: block;
974
+ padding: 5px 10px;
975
+ color: #454545;
965
976
 
966
- &:hover {
967
- background: @primary;
968
- color: #fff;
969
- }
977
+ &:hover {
978
+ background: @primary;
979
+ color: #fff;
970
980
  }
971
- .u-logout {
972
- padding: 0 10px 10px 10px;
973
981
 
974
- .el-button {
975
- width: 100%;
976
- }
982
+ i{
983
+ .mr(5px);
977
984
  }
978
985
  }
979
986
  }
987
+
988
+ .u-logout {
989
+ padding: 0 10px 10px 10px;
990
+ .mt(10px);
991
+
992
+ .el-button {
993
+ width: 100%;
994
+ }
995
+ }
980
996
  }
981
997
 
982
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.9",
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/header/gameSwitch.vue CHANGED
@@ -174,6 +174,12 @@ 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
+ }
177
183
  }
178
184
  }
179
185
  @media screen and (max-width: @phone) {
package/src/header/user.vue CHANGED
@@ -122,28 +122,26 @@
122
122
  <li>
123
123
  <a :href="url.publish">发布中心</a>
124
124
  </li>
125
+ <hr />
125
126
  <li v-if="isAdmin">
126
127
  <a href="/admin">站点配置</a>
127
128
  </li>
128
129
  <li v-if="isEditor">
129
130
  <a href="https://os.jx3box.com/admin">管理平台</a>
130
131
  </li>
131
- <hr>
132
132
  <li>
133
133
  <a @click="logout">退出登录</a>
134
134
  </li>
135
135
  </ul>
136
136
  </template>
137
137
  <template v-else>
138
- <div class="m-info" v-show="!fold">
138
+ <div class="c-header-userdata" v-show="!fold">
139
139
  <div class="u-profile">
140
- <b :title="user.name">{{ showUserName(user.name) }}</b>
141
- <div class="u-id">
142
- <span>魔盒UID：{{ user.uid }}</span>
143
- <i class="el-icon-document-copy u-copy" @click.stop="copyText(user.uid)"></i>
144
- </div>
145
- <div class="m-vip">
146
- <a href="/dashboard/cooperation">
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">
147
145
  <img
148
146
  :src="super_author_icon"
149
147
  class="u-superauthor-profile"
@@ -151,16 +149,21 @@
151
149
  title="签约作者"
152
150
  :class="{ off: !isSuperAuthor }"
153
151
  /></a>
154
-
155
152
  <a
156
153
  class="u-vip"
157
154
  href="/vip/premium?from=header_usermenu"
158
155
  target="_blank"
159
- title="专业版"
156
+ title="专业版账号"
160
157
  >
161
158
  <i class="i-icon-vip" :class="{ on: isPRO }">{{ vipType }}</i>
162
159
  </a>
163
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>
164
167
  </div>
165
168
 
166
169
  <el-button-group class="u-actions">
@@ -169,16 +172,22 @@
169
172
  <a class="el-button el-button--default" href="/dashboard/frame">主题风格</a>
170
173
  </el-button-group>
171
174
 
172
- <div class="m-other">
173
- <a href="/dashboard/fav" class="u-item"> 我的收藏 </a>
174
- <a href="/team/role/manage" class="u-item"> 我的角色 </a>
175
- <a href="/dashboard/purchases" class="u-item"> 付费购买的资源 </a>
176
- <a href="/vip/mall" class="u-item"> 积分商城兑好礼 </a>
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>
177
184
  <hr />
178
- <a href="/dashboard/feedback" class="u-item"> 反馈中心 </a>
185
+ <a href="/dashboard/feedback" class="u-item"
186
+ ><i class="el-icon-phone-outline"></i>反馈帮助
187
+ </a>
179
188
  <hr />
180
189
  <div class="u-logout">
181
- <el-button @click="logout">退出登录</el-button>
190
+ <el-button @click="logout" size="small">退出登录</el-button>
182
191
  </div>
183
192
  </div>
184
193
  </div>
@@ -214,6 +223,7 @@ export default {
214
223
  panel,
215
224
  isEditor: false,
216
225
  isAdmin: false,
226
+ isPhone: window.innerWidth < 768,
217
227
 
218
228
  // 是否有消息
219
229
  pop: false,
@@ -299,9 +309,6 @@ export default {
299
309
  color: __userLevelColor[this.level],
300
310
  };
301
311
  },
302
- isPhone: function () {
303
- return window.innerWidth < 768;
304
- },
305
312
  },
306
313
  watch: {
307
314
  fold(val) {