@taskon/widget-react 0.0.1-beta.3 → 0.0.1-beta.4

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 (27) hide show
  1. package/README.md +1 -1
  2. package/dist/CommunityTaskList.css +1222 -1174
  3. package/dist/EligibilityInfo.css +443 -263
  4. package/dist/LeaderboardWidget.css +355 -152
  5. package/dist/Quest.css +690 -408
  6. package/dist/TaskOnProvider.css +35 -16
  7. package/dist/UserCenterWidget.css +116 -71
  8. package/dist/UserCenterWidget2.css +1285 -748
  9. package/dist/chunks/{CommunityTaskList-C9mPl_31.js → CommunityTaskList-C9Gv8KOF.js} +65 -17
  10. package/dist/chunks/{EligibilityInfo-DGBffKN8.js → EligibilityInfo-D-Fuy9GE.js} +4 -4
  11. package/dist/chunks/{LeaderboardWidget-DPOQVXkT.js → LeaderboardWidget-BV2D2q1N.js} +2 -2
  12. package/dist/chunks/{PageBuilder-WCZvxL2j.js → PageBuilder-DQoU4Mwf.js} +5 -5
  13. package/dist/chunks/{Quest-DjGH_8bx.js → Quest-B5NyVr3o.js} +56 -15
  14. package/dist/chunks/{TaskOnProvider-iannERG1.js → TaskOnProvider-93UxARFo.js} +1 -1
  15. package/dist/chunks/{ThemeProvider-DNJqI2lD.js → ThemeProvider-CPI_roeh.js} +3 -3
  16. package/dist/chunks/{UserCenterWidget-CAhgp46j.js → UserCenterWidget-BRtigY_S.js} +6 -5
  17. package/dist/chunks/{UserCenterWidget-B0O-f_xl.js → UserCenterWidget-cADBSVg7.js} +21 -7
  18. package/dist/chunks/{dynamic-import-helper-B2j_dZ4V.js → dynamic-import-helper-DwXlQC0S.js} +1 -1
  19. package/dist/community-task.js +1 -1
  20. package/dist/core.js +2 -2
  21. package/dist/dynamic-import-helper.css +424 -303
  22. package/dist/index.js +9 -9
  23. package/dist/leaderboard.js +2 -2
  24. package/dist/page-builder.js +1 -1
  25. package/dist/quest.js +1 -1
  26. package/dist/user-center.js +5 -5
  27. package/package.json +4 -1
package/dist/TaskOnProvider.css CHANGED
@@ -3,16 +3,31 @@
3
3
  * 遵循 TaskOn Widget 命名规范
4
4
  */
5
5
 
6
+ /*
7
+ * Responsive base styles
8
+ *
9
+ * Keep mobile breakpoints and fallback patterns centralized here.
10
+ * Components should reuse these mixins instead of duplicating query logic.
11
+ */
12
+
13
+ /*
14
+ * Desktop-up mixin:
15
+ * 1) Enable desktop enhancement in wider containers
16
+ * 2) Keep viewport media query as fallback
17
+ */
18
+
6
19
  /* ==================== Viewport 容器 ==================== */
20
+
7
21
  .taskon-toast-viewport {
8
22
  position: fixed;
9
- top: 20px;
10
- right: 20px;
23
+ top: 10px;
24
+ right: 10px;
25
+ left: 10px;
11
26
  display: flex;
12
27
  flex-direction: column;
13
28
  gap: 10px;
14
- width: 320px;
15
- max-width: calc(100vw - 40px);
29
+ width: auto;
30
+ max-width: none;
16
31
  margin: 0;
17
32
  padding: 0;
18
33
  list-style: none;
@@ -21,6 +36,7 @@
21
36
  }
22
37
 
23
38
  /* ==================== Toast 基础样式 ==================== */
39
+
24
40
  .taskon-toast {
25
41
  display: flex;
26
42
  align-items: center;
@@ -35,6 +51,7 @@
35
51
  }
36
52
 
37
53
  /* 动画 */
54
+
38
55
  .taskon-toast[data-state="open"] {
39
56
  animation: taskon-toast-slide-in 200ms ease-out;
40
57
  }
@@ -86,6 +103,7 @@
86
103
  }
87
104
 
88
105
  /* ==================== Toast 图标 ==================== */
106
+
89
107
  .taskon-toast-icon {
90
108
  flex-shrink: 0;
91
109
  width: 20px;
@@ -99,6 +117,7 @@
99
117
  }
100
118
 
101
119
  /* ==================== Toast 消息 ==================== */
120
+
102
121
  .taskon-toast-message {
103
122
  flex: 1;
104
123
  margin: 0;
@@ -107,6 +126,7 @@
107
126
  /* ==================== Toast 类型变体 ==================== */
108
127
 
109
128
  /* Success */
129
+
110
130
  .taskon-toast--success {
111
131
  border-left: 3px solid var(--taskon-color-success);
112
132
  }
@@ -117,6 +137,7 @@
117
137
  }
118
138
 
119
139
  /* Error */
140
+
120
141
  .taskon-toast--error {
121
142
  border-left: 3px solid var(--taskon-color-error);
122
143
  }
@@ -127,6 +148,7 @@
127
148
  }
128
149
 
129
150
  /* Warning */
151
+
130
152
  .taskon-toast--warning {
131
153
  border-left: 3px solid var(--taskon-color-warning);
132
154
  }
@@ -137,6 +159,7 @@
137
159
  }
138
160
 
139
161
  /* Info */
162
+
140
163
  .taskon-toast--info {
141
164
  border-left: 3px solid var(--taskon-color-link);
142
165
  }
@@ -146,18 +169,14 @@
146
169
  color: var(--taskon-color-link);
147
170
  }
148
171
 
149
- /* ==================== 响应式 ==================== */
150
- @media (max-width: 750px) {
151
- .taskon-toast-viewport {
152
- top: 10px;
153
- right: 10px;
154
- left: 10px;
155
- width: auto;
156
- max-width: none;
157
- }
172
+ /* ==================== Desktop 增强 ==================== */
158
173
 
159
- .taskon-toast {
160
- padding: 12px 14px;
161
- font-size: 13px;
174
+ @media (min-width: 751px) {
175
+ .taskon-toast-viewport {
176
+ top: 20px;
177
+ right: 20px;
178
+ left: auto;
179
+ width: 320px;
180
+ max-width: calc(100vw - 40px);
162
181
  }
163
182
  }
package/dist/UserCenterWidget.css CHANGED
@@ -1,72 +1,116 @@
1
- /**
2
- * Tabs 组件样式
3
- *
4
- * 命名规范: .taskon-tabs-[element]--[modifier]
5
- * 基于 Figma UserCenter 设计规范
6
- */
7
-
8
- /* ========== 容器 ========== */
9
- .taskon-tabs {
10
- position: relative;
11
- display: inline-flex;
12
- flex-direction: column;
13
- gap: 0;
14
- }
15
-
16
- /* ========== Tab 列表 ========== */
17
- .taskon-tabs__list {
18
- display: inline-flex;
19
- align-items: center;
20
- gap: var(--taskon-tabs-gap, 40px);
21
- }
22
-
23
- /* ========== Tab 项 ========== */
24
- .taskon-tabs__tab {
25
- position: relative;
26
- padding: 0;
27
- padding-bottom: 9px;
28
- background: transparent;
29
- border: none;
30
- cursor: pointer;
31
- transition: color 0.2s ease;
32
-
33
- /* Typography: 16px Medium */
34
- font-size: 16px;
35
- font-weight: 500;
36
- line-height: 24px;
37
- white-space: nowrap;
38
-
39
- /* 默认颜色: text-light (60% 白色) */
40
- color: var(--taskon-color-text-secondary, rgba(255, 255, 255, 0.6));
41
- }
42
-
43
- .taskon-tabs__tab:hover:not(.taskon-tabs__tab--disabled) {
44
- color: var(--taskon-color-text-light-hover, rgba(255, 255, 255, 0.8));
45
- }
46
-
47
- /* 激活状态: 更粗字体 + 白色 */
48
- .taskon-tabs__tab--active {
49
- font-weight: 600;
50
- color: var(--taskon-color-text, white);
51
- }
52
-
53
- /* 禁用状态 */
54
- .taskon-tabs__tab--disabled {
55
- color: var(--taskon-color-text-disabled, rgba(255, 255, 255, 0.3));
56
- cursor: not-allowed;
57
- }
58
-
59
- /* ========== 下划线指示器 ========== */
60
- .taskon-tabs__indicator {
61
- position: absolute;
62
- bottom: 0;
63
- left: 0;
64
- height: 2px;
65
- /* 渐变色：蓝色 -> 绿色（基于 Figma 设计 Brand/primary -> Brand/secondary） */
66
- background: linear-gradient(90deg, #2771ff 0%, #1fcbaf 100%);
67
- border-radius: 1px;
68
- transition: transform 0.25s ease, width 0.25s ease;
69
- }
1
+ /**
2
+ * Tabs 组件样式
3
+ *
4
+ * 命名规范: .taskon-tabs-[element]--[modifier]
5
+ * 基于 Figma UserCenter 设计规范
6
+ */
7
+ /*
8
+ * Responsive base styles
9
+ *
10
+ * Keep mobile breakpoints and fallback patterns centralized here.
11
+ * Components should reuse these mixins instead of duplicating query logic.
12
+ */
13
+ /*
14
+ * Desktop-up mixin:
15
+ * 1) Enable desktop enhancement in wider containers
16
+ * 2) Keep viewport media query as fallback
17
+ */
18
+ /* ========== 容器 ========== */
19
+ .taskon-tabs {
20
+ position: relative;
21
+ container-type: inline-size;
22
+ display: flex;
23
+ flex-direction: column;
24
+ width: 100%;
25
+ gap: 0;
26
+ overflow-x: auto;
27
+ scrollbar-width: none;
28
+ }
29
+ .taskon-tabs::-webkit-scrollbar {
30
+ display: none;
31
+ }
32
+ /* ========== Tab 列表 ========== */
33
+ .taskon-tabs__list {
34
+ display: inline-flex;
35
+ align-items: center;
36
+ width: max-content;
37
+ min-width: 100%;
38
+ gap: var(--taskon-tabs-gap-mobile, 16px);
39
+ }
40
+ /* ========== Tab 项 ========== */
41
+ .taskon-tabs__tab {
42
+ position: relative;
43
+ flex-shrink: 0;
44
+ padding: 0;
45
+ padding-bottom: 9px;
46
+ background: transparent;
47
+ border: none;
48
+ cursor: pointer;
49
+ transition: color 0.2s ease;
50
+
51
+ /* Typography: 16px Medium */
52
+ font-size: 16px;
53
+ font-weight: 500;
54
+ line-height: 24px;
55
+ white-space: nowrap;
56
+
57
+ color: var(--taskon-color-text-secondary);
58
+ }
59
+ .taskon-tabs__tab:hover:not(.taskon-tabs__tab--disabled) {
60
+ color: var(--taskon-color-text);
61
+ }
62
+ /* 激活状态: 更粗字体 + 主文本色 */
63
+ .taskon-tabs__tab--active {
64
+ font-weight: 600;
65
+ color: var(--taskon-color-text);
66
+ }
67
+ /* 禁用状态 */
68
+ .taskon-tabs__tab--disabled {
69
+ color: var(--taskon-color-text-disabled);
70
+ cursor: not-allowed;
71
+ }
72
+ /* ========== 下划线指示器 ========== */
73
+ .taskon-tabs__indicator {
74
+ position: absolute;
75
+ bottom: 0;
76
+ left: 0;
77
+ height: 2px;
78
+ background: linear-gradient(
79
+ 90deg,
80
+ var(--taskon-color-link) 0%,
81
+ var(--taskon-color-secondary) 100%
82
+ );
83
+ border-radius: 1px;
84
+ transition: transform 0.25s ease, width 0.25s ease;
85
+ }
86
+ @supports (container-type: inline-size) {
87
+ @container (min-width: 751px) {
88
+ .taskon-tabs {
89
+ width: auto;
90
+ overflow-x: visible;
91
+ }
92
+
93
+ .taskon-tabs__list {
94
+ width: auto;
95
+ min-width: 0;
96
+ gap: var(--taskon-tabs-gap, 40px);
97
+ }
98
+ }
99
+ }
100
+ @supports not (container-type: inline-size) {
101
+ @media (min-width: 751px) {
102
+ .taskon-tabs {
103
+ width: auto;
104
+ overflow-x: visible;
105
+ }
106
+
107
+ .taskon-tabs__list {
108
+ width: auto;
109
+ min-width: 0;
110
+ gap: var(--taskon-tabs-gap, 40px);
111
+ }
112
+ }
113
+ }
70
114
  /**
71
115
  * EmailBindDialog 样式
72
116
  */
@@ -79,7 +123,7 @@
79
123
  font-size: 20px;
80
124
  font-weight: 600;
81
125
  line-height: 28px;
82
- color: var(--taskon-color-text, #fff);
126
+ color: var(--taskon-color-text);
83
127
  margin: 0 0 24px 0;
84
128
  }
85
129
 
@@ -92,7 +136,7 @@
92
136
  font-size: 14px;
93
137
  font-weight: 500;
94
138
  line-height: 20px;
95
- color: var(--taskon-color-text, #fff);
139
+ color: var(--taskon-color-text);
96
140
  margin-bottom: 8px;
97
141
  }
98
142
 
@@ -101,6 +145,7 @@
101
145
  }
102
146
 
103
147
  /* 响应式 - 移动端 */
148
+
104
149
  @media (max-width: 750px) {
105
150
  .taskon-email-bind-dialog__title {
106
151
  font-size: 18px;