@lmy54321/design-system 1.0.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.
- package/dist/index.d.mts +388 -0
- package/dist/index.d.ts +388 -0
- package/dist/index.js +3368 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +3315 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +60 -0
- package/styles/.gitkeep +0 -0
- package/styles/globals.css +233 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,3368 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var clsx = require('clsx');
|
|
4
|
+
var tailwindMerge = require('tailwind-merge');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var react = require('motion/react');
|
|
7
|
+
var classVarianceAuthority = require('class-variance-authority');
|
|
8
|
+
var React = require('react');
|
|
9
|
+
|
|
10
|
+
function _interopNamespace(e) {
|
|
11
|
+
if (e && e.__esModule) return e;
|
|
12
|
+
var n = Object.create(null);
|
|
13
|
+
if (e) {
|
|
14
|
+
Object.keys(e).forEach(function (k) {
|
|
15
|
+
if (k !== 'default') {
|
|
16
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
17
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: function () { return e[k]; }
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
n.default = e;
|
|
25
|
+
return Object.freeze(n);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
29
|
+
|
|
30
|
+
// components/ui/utils.ts
|
|
31
|
+
function cn(...inputs) {
|
|
32
|
+
return tailwindMerge.twMerge(clsx.clsx(inputs));
|
|
33
|
+
}
|
|
34
|
+
var ICON_HOME_SMALL = "M12.6667 12.6649V6.53093L8 2.8496L3.33333 6.53093V12.6649H12.6667ZM14 13.3316C14 13.5084 13.9298 13.678 13.8047 13.803C13.6797 13.928 13.5101 13.9983 13.3333 13.9983H2.66667C2.48986 13.9983 2.32029 13.928 2.19526 13.803C2.07024 13.678 2 13.5084 2 13.3316V6.2076C1.99996 6.1069 2.02273 6.0075 2.06661 5.91686C2.11048 5.82622 2.17432 5.7467 2.25333 5.68427L7.58667 1.47693C7.70436 1.38393 7.84999 1.33333 8 1.33333C8.15001 1.33333 8.29564 1.38393 8.41333 1.47693L13.7467 5.6836C13.8258 5.7461 13.8897 5.82573 13.9335 5.91649C13.9774 6.00726 14.0001 6.10679 14 6.2076V13.3316V13.3316ZM4.66667 7.99827H6C6 8.5287 6.21071 9.03741 6.58579 9.41248C6.96086 9.78755 7.46957 9.99827 8 9.99827C8.53043 9.99827 9.03914 9.78755 9.41421 9.41248C9.78929 9.03741 10 8.5287 10 7.99827H11.3333C11.3333 8.88232 10.9821 9.73017 10.357 10.3553C9.7319 10.9804 8.88406 11.3316 8 11.3316C7.11595 11.3316 6.2681 10.9804 5.64298 10.3553C5.01786 9.73017 4.66667 8.88232 4.66667 7.99827V7.99827Z";
|
|
35
|
+
var ICON_CHEVRON = "M8.24267 9.76571L12.876 5.13237L13.8187 6.07504L8.24267 11.651L2.66667 6.07504L3.60933 5.13238L8.24267 9.76571Z";
|
|
36
|
+
var ICON_HOME_LARGE = "M15.8333 15.8312V8.16366L10 3.562L4.16667 8.16366V15.8312H15.8333ZM17.5 16.6645C17.5 16.8855 17.4122 17.0975 17.2559 17.2538C17.0996 17.41 16.8877 17.4978 16.6667 17.4978H3.33333C3.11232 17.4978 2.90036 17.41 2.74408 17.2538C2.5878 17.0975 2.5 16.8855 2.5 16.6645V7.7595C2.49995 7.63362 2.52842 7.50937 2.58326 7.39607C2.63811 7.28278 2.71791 7.18337 2.81667 7.10533L9.48333 1.84617C9.63046 1.72991 9.81249 1.66667 10 1.66667C10.1875 1.66667 10.3695 1.72991 10.5167 1.84617L17.1833 7.1045C17.2822 7.18263 17.3621 7.28216 17.4169 7.39562C17.4718 7.50907 17.5002 7.63348 17.5 7.7595V16.6645V16.6645ZM5.83333 9.99783H7.5C7.5 10.6609 7.76339 11.2968 8.23223 11.7656C8.70107 12.2344 9.33696 12.4978 10 12.4978C10.663 12.4978 11.2989 12.2344 11.7678 11.7656C12.2366 11.2968 12.5 10.6609 12.5 9.99783H14.1667C14.1667 11.1029 13.7277 12.1627 12.9463 12.9441C12.1649 13.7255 11.1051 14.1645 10 14.1645C8.89493 14.1645 7.83512 13.7255 7.05372 12.9441C6.27232 12.1627 5.83333 11.1029 5.83333 9.99783V9.99783Z";
|
|
37
|
+
var SIZE_CONFIG = {
|
|
38
|
+
xsmall: {
|
|
39
|
+
height: "h-[28px]",
|
|
40
|
+
radius: "rounded-[18px]",
|
|
41
|
+
padding: {
|
|
42
|
+
left: "px-[12px]",
|
|
43
|
+
right: "pl-[12px] pr-[8px]"
|
|
44
|
+
},
|
|
45
|
+
text: "text-[12px] leading-[16px]",
|
|
46
|
+
iconSize: "size-[16px]",
|
|
47
|
+
defaultIconPath: ICON_HOME_SMALL,
|
|
48
|
+
defaultIconViewBox: "0 0 16 16"
|
|
49
|
+
},
|
|
50
|
+
small: {
|
|
51
|
+
height: "h-[32px]",
|
|
52
|
+
radius: "rounded-[18px]",
|
|
53
|
+
padding: {
|
|
54
|
+
left: "px-[12px]",
|
|
55
|
+
right: "pl-[12px] pr-[8px]"
|
|
56
|
+
},
|
|
57
|
+
text: "text-[12px] leading-[16px]",
|
|
58
|
+
iconSize: "size-[16px]",
|
|
59
|
+
defaultIconPath: ICON_HOME_SMALL,
|
|
60
|
+
defaultIconViewBox: "0 0 16 16"
|
|
61
|
+
},
|
|
62
|
+
middle: {
|
|
63
|
+
height: "h-[40px]",
|
|
64
|
+
radius: "rounded-[22px]",
|
|
65
|
+
padding: {
|
|
66
|
+
left: "px-[16px]",
|
|
67
|
+
right: "pl-[16px] pr-[12px]"
|
|
68
|
+
},
|
|
69
|
+
text: "text-[14px] leading-[20px]",
|
|
70
|
+
iconSize: "size-[16px]",
|
|
71
|
+
defaultIconPath: ICON_CHEVRON,
|
|
72
|
+
defaultIconViewBox: "0 0 16 16"
|
|
73
|
+
},
|
|
74
|
+
large: {
|
|
75
|
+
height: "h-[48px]",
|
|
76
|
+
radius: "rounded-[50px]",
|
|
77
|
+
padding: {
|
|
78
|
+
left: "px-[16px]",
|
|
79
|
+
right: "pl-[16px] pr-[12px]"
|
|
80
|
+
},
|
|
81
|
+
text: "text-[16px] leading-[24px]",
|
|
82
|
+
iconSize: "size-[20px]",
|
|
83
|
+
defaultIconPath: ICON_HOME_LARGE,
|
|
84
|
+
defaultIconViewBox: "0 0 20 20"
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
function DefaultIcon({
|
|
88
|
+
path,
|
|
89
|
+
viewBox,
|
|
90
|
+
className,
|
|
91
|
+
color
|
|
92
|
+
}) {
|
|
93
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative shrink-0", className), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
94
|
+
"svg",
|
|
95
|
+
{
|
|
96
|
+
className: "block size-full",
|
|
97
|
+
fill: "none",
|
|
98
|
+
preserveAspectRatio: "none",
|
|
99
|
+
viewBox,
|
|
100
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: path, fill: color || "currentColor" })
|
|
101
|
+
}
|
|
102
|
+
) });
|
|
103
|
+
}
|
|
104
|
+
function Btn({
|
|
105
|
+
size = "middle",
|
|
106
|
+
// Default to middle if not specified
|
|
107
|
+
variant = "primary",
|
|
108
|
+
label = "\u64CD\u4F5C\u9879",
|
|
109
|
+
icon,
|
|
110
|
+
iconPosition = "left",
|
|
111
|
+
onClick,
|
|
112
|
+
className
|
|
113
|
+
}) {
|
|
114
|
+
const config = SIZE_CONFIG[size];
|
|
115
|
+
const displayLabel = size === "xsmall" && variant === "ghost" && label ? label.slice(0, 3) : label;
|
|
116
|
+
const paddingClass = iconPosition === "right" ? config.padding.right : config.padding.left;
|
|
117
|
+
const iconColor = "currentColor";
|
|
118
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
119
|
+
"button",
|
|
120
|
+
{
|
|
121
|
+
type: "button",
|
|
122
|
+
onClick,
|
|
123
|
+
className: cn(
|
|
124
|
+
"group relative flex items-center justify-center max-w-[300px] transition-all outline-none",
|
|
125
|
+
config.height,
|
|
126
|
+
config.radius,
|
|
127
|
+
paddingClass,
|
|
128
|
+
// Base Overlay Logic for Active State
|
|
129
|
+
"overflow-hidden active:after:absolute active:after:inset-0 active:after:bg-black/8 dark:active:after:bg-white/10 active:after:content-[''] active:after:rounded-[inherit]",
|
|
130
|
+
// Variants
|
|
131
|
+
variant === "primary" && "bg-primary text-primary-foreground",
|
|
132
|
+
variant === "secondary" && "bg-secondary text-secondary-foreground",
|
|
133
|
+
variant === "outline" && "bg-secondary text-secondary-foreground",
|
|
134
|
+
variant === "ghost" && "bg-transparent text-secondary-foreground",
|
|
135
|
+
className
|
|
136
|
+
),
|
|
137
|
+
children: [
|
|
138
|
+
variant === "outline" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
139
|
+
"div",
|
|
140
|
+
{
|
|
141
|
+
"aria-hidden": "true",
|
|
142
|
+
className: cn(
|
|
143
|
+
"absolute inset-0 border-[1.5px] border-solid border-primary pointer-events-none",
|
|
144
|
+
config.radius
|
|
145
|
+
)
|
|
146
|
+
}
|
|
147
|
+
),
|
|
148
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
149
|
+
"div",
|
|
150
|
+
{
|
|
151
|
+
className: cn(
|
|
152
|
+
"flex items-center justify-center min-w-0",
|
|
153
|
+
// Large Gap is 4px, others 2px.
|
|
154
|
+
size === "large" ? "gap-[4px]" : "gap-[2px]",
|
|
155
|
+
iconPosition === "right" ? "flex-row" : "flex-row-reverse"
|
|
156
|
+
),
|
|
157
|
+
children: [
|
|
158
|
+
displayLabel && /* @__PURE__ */ jsxRuntime.jsx(
|
|
159
|
+
"span",
|
|
160
|
+
{
|
|
161
|
+
className: cn(
|
|
162
|
+
"font-['PingFang_SC:Medium',sans-serif] whitespace-pre truncate",
|
|
163
|
+
config.text
|
|
164
|
+
),
|
|
165
|
+
children: displayLabel
|
|
166
|
+
}
|
|
167
|
+
),
|
|
168
|
+
icon !== void 0 ? icon : /* @__PURE__ */ jsxRuntime.jsx(
|
|
169
|
+
DefaultIcon,
|
|
170
|
+
{
|
|
171
|
+
path: config.defaultIconPath,
|
|
172
|
+
viewBox: config.defaultIconViewBox,
|
|
173
|
+
className: config.iconSize,
|
|
174
|
+
color: iconColor
|
|
175
|
+
}
|
|
176
|
+
)
|
|
177
|
+
]
|
|
178
|
+
}
|
|
179
|
+
)
|
|
180
|
+
]
|
|
181
|
+
}
|
|
182
|
+
);
|
|
183
|
+
}
|
|
184
|
+
function Switch({
|
|
185
|
+
checked,
|
|
186
|
+
onCheckedChange,
|
|
187
|
+
disabled = false,
|
|
188
|
+
className
|
|
189
|
+
}) {
|
|
190
|
+
const trackColor = disabled || !checked ? "rgba(75, 82, 107, 0.08)" : "#4B526B";
|
|
191
|
+
const thumbColor = disabled ? "rgba(0,0,0,0.08)" : "white";
|
|
192
|
+
const thumbShadow = disabled ? "none" : checked ? "0px 2px 8px 0px rgba(0,0,0,0.06)" : "0px 2px 10px 0px rgba(0,0,0,0.05)";
|
|
193
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
194
|
+
"button",
|
|
195
|
+
{
|
|
196
|
+
type: "button",
|
|
197
|
+
role: "switch",
|
|
198
|
+
"aria-checked": checked,
|
|
199
|
+
disabled,
|
|
200
|
+
className: cn(
|
|
201
|
+
"relative inline-flex h-[32px] w-[56px] shrink-0 cursor-pointer items-center rounded-full transition-colors border-none outline-none",
|
|
202
|
+
disabled && "cursor-not-allowed opacity-100",
|
|
203
|
+
// Ensure opacity isn't auto-reduced by tailwind disabled
|
|
204
|
+
className
|
|
205
|
+
),
|
|
206
|
+
onClick: () => !disabled && onCheckedChange?.(!checked),
|
|
207
|
+
style: { backgroundColor: trackColor },
|
|
208
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
209
|
+
react.motion.div,
|
|
210
|
+
{
|
|
211
|
+
className: "block h-[24px] w-[24px] rounded-full",
|
|
212
|
+
style: {
|
|
213
|
+
backgroundColor: thumbColor,
|
|
214
|
+
boxShadow: thumbShadow
|
|
215
|
+
},
|
|
216
|
+
initial: false,
|
|
217
|
+
animate: {
|
|
218
|
+
x: checked ? 28 : 4
|
|
219
|
+
// Left: 4px, Right: 56-24-4 = 28px
|
|
220
|
+
},
|
|
221
|
+
transition: {
|
|
222
|
+
type: "spring",
|
|
223
|
+
stiffness: 500,
|
|
224
|
+
damping: 30
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
)
|
|
228
|
+
}
|
|
229
|
+
);
|
|
230
|
+
}
|
|
231
|
+
var svgPaths = {
|
|
232
|
+
p11a45140: "M8.66667 11.3333H5.33333V10H8.66667V11.3333Z",
|
|
233
|
+
p32556180: "M10.6667 8.66667H5.33333V7.33333H10.6667V8.66667Z",
|
|
234
|
+
p374e1cf0: "M6.182 7.325L9.657 3.85L10.364 4.557L6.182 8.739L2 4.557L2.707 3.85L6.182 7.325Z",
|
|
235
|
+
p5488400: "M6 3.33333H10V2H11.3333V3.33333H13.1999C13.6417 3.33333 14 3.69164 14 4.13346V13.1999C14 13.6417 13.6417 14 13.1999 14H2.80013L2.7181 13.9961C2.31473 13.9551 2 13.6141 2 13.1999V4.13346C2 3.71928 2.31473 3.37825 2.7181 3.33724L2.80013 3.33333H4.66667V2H6V3.33333ZM3.33333 12.6667H12.6667V4.66667H11.3333V6H10V4.66667H6V6H4.66667V4.66667H3.33333V12.6667Z"
|
|
236
|
+
};
|
|
237
|
+
function IcPlan({ className }) {
|
|
238
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: cn("block", className), fill: "currentColor", viewBox: "0 0 16 16", children: [
|
|
239
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgPaths.p11a45140 }),
|
|
240
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgPaths.p32556180 }),
|
|
241
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { clipRule: "evenodd", d: svgPaths.p5488400, fillRule: "evenodd" })
|
|
242
|
+
] });
|
|
243
|
+
}
|
|
244
|
+
function IcExpand({ className }) {
|
|
245
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { className: cn("block", className), fill: "currentColor", viewBox: "0 0 12 12", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgPaths.p374e1cf0 }) });
|
|
246
|
+
}
|
|
247
|
+
var tagVariants = classVarianceAuthority.cva(
|
|
248
|
+
"inline-flex items-center justify-center whitespace-nowrap transition-all box-border border font-sans shrink-0 gap-1 relative overflow-hidden active:after:absolute active:after:inset-0 active:after:bg-black/8 active:after:content-[''] active:after:rounded-[inherit]",
|
|
249
|
+
{
|
|
250
|
+
variants: {
|
|
251
|
+
variant: {
|
|
252
|
+
filled: "border-transparent",
|
|
253
|
+
outlined: "bg-transparent"
|
|
254
|
+
},
|
|
255
|
+
size: {
|
|
256
|
+
lg: "h-[28px] px-[8px] text-[14px] rounded-[4px]",
|
|
257
|
+
md: "h-[24px] px-[6px] text-[12px] rounded-[4px]",
|
|
258
|
+
sm: "h-[20px] px-[4px] text-[12px] rounded-[2px]",
|
|
259
|
+
xs: "h-[16px] px-[2px] text-[10px] rounded-[2px]"
|
|
260
|
+
}
|
|
261
|
+
},
|
|
262
|
+
defaultVariants: {
|
|
263
|
+
variant: "filled",
|
|
264
|
+
size: "lg"
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
);
|
|
268
|
+
function Tag({
|
|
269
|
+
className,
|
|
270
|
+
variant,
|
|
271
|
+
size,
|
|
272
|
+
label,
|
|
273
|
+
icon,
|
|
274
|
+
showArrow = false,
|
|
275
|
+
onClick,
|
|
276
|
+
...props
|
|
277
|
+
}) {
|
|
278
|
+
const defaultColorClass = variant === "outlined" ? "border-[#367bf6] text-[#367bf6]" : "bg-[#dbe9fe] text-[#367bf6]";
|
|
279
|
+
const iconSizeClass = {
|
|
280
|
+
lg: "size-[16px]",
|
|
281
|
+
md: "size-[14px]",
|
|
282
|
+
sm: "size-[12px]",
|
|
283
|
+
xs: "size-[10px]"
|
|
284
|
+
};
|
|
285
|
+
const arrowSizeClass = {
|
|
286
|
+
lg: "size-[12px]",
|
|
287
|
+
md: "size-[10px]",
|
|
288
|
+
sm: "size-[9px]",
|
|
289
|
+
xs: "size-[8px]"
|
|
290
|
+
};
|
|
291
|
+
const currentIconSize = iconSizeClass[size || "lg"];
|
|
292
|
+
const currentArrowSize = arrowSizeClass[size || "lg"];
|
|
293
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
294
|
+
"div",
|
|
295
|
+
{
|
|
296
|
+
className: cn(
|
|
297
|
+
tagVariants({ variant, size }),
|
|
298
|
+
defaultColorClass,
|
|
299
|
+
onClick ? "cursor-pointer" : "cursor-default",
|
|
300
|
+
className
|
|
301
|
+
),
|
|
302
|
+
onClick,
|
|
303
|
+
...props,
|
|
304
|
+
children: [
|
|
305
|
+
icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex items-center justify-center shrink-0", currentIconSize), children: icon }),
|
|
306
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "leading-none pb-[1px]", children: label }),
|
|
307
|
+
showArrow && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex items-center justify-center shrink-0", currentArrowSize), children: /* @__PURE__ */ jsxRuntime.jsx(IcExpand, { className: "size-full" }) })
|
|
308
|
+
]
|
|
309
|
+
}
|
|
310
|
+
);
|
|
311
|
+
}
|
|
312
|
+
var imgLoading = "";
|
|
313
|
+
var svgPaths2 = {
|
|
314
|
+
p39080300: "M6.9665 7.90931L2.19526 12.6805C1.93491 12.9409 1.93491 13.363 2.19526 13.6234C2.45561 13.8837 2.87772 13.8837 3.13807 13.6234L7.90931 8.85212L12.6805 13.6234C12.9409 13.8837 13.363 13.8837 13.6234 13.6234C13.8837 13.363 13.8837 12.9409 13.6234 12.6805L8.85212 7.90931L13.6234 3.13807C13.8837 2.87772 13.8837 2.45561 13.6234 2.19526C13.363 1.93491 12.9409 1.93491 12.6805 2.19526L7.90931 6.9665L3.13807 2.19526C2.87772 1.93491 2.45561 1.93491 2.19526 2.19526C1.93491 2.45561 1.93491 2.87772 2.19526 3.13807L6.9665 7.90931Z"
|
|
315
|
+
};
|
|
316
|
+
function IcClose({ onClick }) {
|
|
317
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
318
|
+
"div",
|
|
319
|
+
{
|
|
320
|
+
className: "relative shrink-0 size-[16px] cursor-pointer hover:opacity-70 transition-opacity",
|
|
321
|
+
"data-name": "ic_close",
|
|
322
|
+
onClick,
|
|
323
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsxRuntime.jsx("g", { id: "ic_close", opacity: "0.7", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgPaths2.p39080300, fill: "currentColor", id: "Union" }) }) })
|
|
324
|
+
}
|
|
325
|
+
);
|
|
326
|
+
}
|
|
327
|
+
function Loading({ showClose = true, onClose, className }) {
|
|
328
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("bg-white relative rounded-[12px] shadow-[0px_0px_20px_0px_rgba(0,0,0,0.1)] inline-flex items-center justify-center h-[44px]", className), "data-name": "Loading", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "box-border content-stretch flex items-center justify-center pl-[10px] pr-[10px] py-[10px] relative h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "content-stretch flex gap-[4px] items-center relative shrink-0 mr-[-2px]", children: [
|
|
329
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative shrink-0 size-[24px]", "data-name": "\u6837\u5F0F 8_bmp_00000 1", children: /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "", className: "absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none size-full animate-pulse", src: imgLoading }) }),
|
|
330
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-['PingFang_SC:Medium',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-[rgba(0,0,0,0.9)] text-nowrap whitespace-pre pr-[4px]", children: "\u52AA\u529B\u52A0\u8F7D\u4E2D" }),
|
|
331
|
+
showClose && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center self-stretch gap-[8px] ml-[4px]", children: [
|
|
332
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[rgba(0,0,0,0.2)] h-[16px] shrink-0 w-[1px]" }),
|
|
333
|
+
/* @__PURE__ */ jsxRuntime.jsx(IcClose, { onClick: onClose })
|
|
334
|
+
] })
|
|
335
|
+
] }) }) });
|
|
336
|
+
}
|
|
337
|
+
function SegmentedControl({
|
|
338
|
+
value,
|
|
339
|
+
options,
|
|
340
|
+
onChange,
|
|
341
|
+
size = "large",
|
|
342
|
+
className
|
|
343
|
+
}) {
|
|
344
|
+
const config = {
|
|
345
|
+
large: {
|
|
346
|
+
container: "h-[48px] rounded-[24px] p-[4px]",
|
|
347
|
+
button: "h-[40px] rounded-[22px] text-[14px]",
|
|
348
|
+
activeRadius: 22
|
|
349
|
+
},
|
|
350
|
+
middle: {
|
|
351
|
+
container: "h-[40px] rounded-[20px] p-[4px]",
|
|
352
|
+
button: "h-[32px] rounded-[18px] text-[12px]",
|
|
353
|
+
activeRadius: 18
|
|
354
|
+
},
|
|
355
|
+
small: {
|
|
356
|
+
container: "h-[32px] rounded-[20px] p-[2px]",
|
|
357
|
+
button: "h-[28px] rounded-[18px] text-[12px]",
|
|
358
|
+
activeRadius: 18
|
|
359
|
+
}
|
|
360
|
+
};
|
|
361
|
+
const currentConfig = config[size];
|
|
362
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
|
|
363
|
+
"bg-[rgba(75,82,107,0.04)] flex items-center relative w-fit",
|
|
364
|
+
currentConfig.container,
|
|
365
|
+
className
|
|
366
|
+
), children: options.map((option) => {
|
|
367
|
+
const isActive = value === option;
|
|
368
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
369
|
+
"button",
|
|
370
|
+
{
|
|
371
|
+
onClick: () => onChange(option),
|
|
372
|
+
className: cn(
|
|
373
|
+
"relative flex items-center justify-center px-[16px] font-medium font-sans transition-colors z-10 min-w-[60px] overflow-hidden",
|
|
374
|
+
currentConfig.button,
|
|
375
|
+
isActive ? "text-white" : "text-[rgba(0,0,0,0.9)] hover:text-black/70",
|
|
376
|
+
// Press state: 8% black overlay
|
|
377
|
+
"active:after:absolute active:after:inset-0 active:after:bg-black/8 active:after:content-[''] active:after:rounded-[inherit]"
|
|
378
|
+
),
|
|
379
|
+
children: [
|
|
380
|
+
isActive && /* @__PURE__ */ jsxRuntime.jsx(
|
|
381
|
+
react.motion.div,
|
|
382
|
+
{
|
|
383
|
+
layoutId: `active-segmented-control-bg-${size}`,
|
|
384
|
+
className: "absolute inset-0 bg-[#4b526b] shadow-sm -z-10",
|
|
385
|
+
style: { borderRadius: currentConfig.activeRadius },
|
|
386
|
+
transition: { type: "spring", bounce: 0.2, duration: 0.3 }
|
|
387
|
+
}
|
|
388
|
+
),
|
|
389
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 whitespace-nowrap", children: option })
|
|
390
|
+
]
|
|
391
|
+
},
|
|
392
|
+
option
|
|
393
|
+
);
|
|
394
|
+
}) });
|
|
395
|
+
}
|
|
396
|
+
function StatGrid({ items, className }) {
|
|
397
|
+
const variantStyles = {
|
|
398
|
+
primary: "text-primary",
|
|
399
|
+
accent: "text-accent",
|
|
400
|
+
default: "text-foreground"
|
|
401
|
+
};
|
|
402
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-3 gap-[var(--spacing-sm)]", className), children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card-muted rounded-[var(--radius-base)] p-[var(--spacing-sm)] text-center", children: [
|
|
403
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-1 font-medium text-lg", variantStyles[item.variant || "default"]), children: item.value }),
|
|
404
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: item.label })
|
|
405
|
+
] }, idx)) });
|
|
406
|
+
}
|
|
407
|
+
var imgHeader = "";
|
|
408
|
+
function Dialog({
|
|
409
|
+
open,
|
|
410
|
+
onOpenChange,
|
|
411
|
+
variant = "default",
|
|
412
|
+
title = "\u6807\u9898\u6700\u597D\u662F\u7B80\u77ED\u7684",
|
|
413
|
+
description = "\u8BF7\u6C42\u6388\u6743\u786E\u8BA4\u6587\u6848\u8981\u7B80\u77ED\uFF0C\u53EF\u4EE5\u5C45\u4E2D",
|
|
414
|
+
mainActionText = "\u4E3B\u64CD\u4F5C",
|
|
415
|
+
secondaryActionText = "\u526F\u64CD\u4F5C",
|
|
416
|
+
imageSrc,
|
|
417
|
+
onMainAction,
|
|
418
|
+
onSecondaryAction,
|
|
419
|
+
demoMode = false
|
|
420
|
+
}) {
|
|
421
|
+
if (!open) return null;
|
|
422
|
+
const isImageVariant = variant === "image";
|
|
423
|
+
const isWarningVariant = variant === "warning";
|
|
424
|
+
const positionClass = demoMode ? "absolute" : "fixed";
|
|
425
|
+
const primaryBtnBg = isWarningVariant ? "bg-[rgba(75,82,107,0.08)]" : "bg-[#4b526b]";
|
|
426
|
+
const primaryBtnText = isWarningVariant ? "text-[#ff293b]" : "text-white";
|
|
427
|
+
const defaultImage = imgHeader;
|
|
428
|
+
const activeImage = imageSrc || defaultImage;
|
|
429
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${positionClass} inset-0 z-50 flex items-center justify-center`, "data-name": "DialogOverlay", children: [
|
|
430
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
431
|
+
"div",
|
|
432
|
+
{
|
|
433
|
+
className: "absolute inset-0 bg-black/60",
|
|
434
|
+
onClick: () => onOpenChange(false)
|
|
435
|
+
}
|
|
436
|
+
),
|
|
437
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
|
|
438
|
+
"bg-white relative rounded-[32px] overflow-hidden flex flex-col items-center shadow-lg",
|
|
439
|
+
"w-[320px] md:w-[340px]",
|
|
440
|
+
// Responsive width, matching standard mobile dialogs
|
|
441
|
+
isImageVariant ? "" : "p-[20px]"
|
|
442
|
+
// Standard padding for non-image variants
|
|
443
|
+
), children: [
|
|
444
|
+
isImageVariant && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[148px] relative shrink-0 w-full mb-[20px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden bg-[#d9d9d9]", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
445
|
+
"img",
|
|
446
|
+
{
|
|
447
|
+
alt: "Dialog Header",
|
|
448
|
+
className: "absolute w-full h-full object-cover",
|
|
449
|
+
src: activeImage
|
|
450
|
+
}
|
|
451
|
+
) }) }),
|
|
452
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
|
|
453
|
+
"flex flex-col gap-[6px] items-center text-center w-full",
|
|
454
|
+
isImageVariant ? "px-[20px] mb-[20px]" : "mb-[20px]"
|
|
455
|
+
), children: [
|
|
456
|
+
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-['PingFang_SC:Medium',sans-serif] text-[20px] leading-[28px] text-[rgba(0,0,0,0.9)]", children: title }),
|
|
457
|
+
description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-['PingFang_SC:Regular',sans-serif] text-[14px] leading-[20px] text-[rgba(0,0,0,0.9)] opacity-60", children: description })
|
|
458
|
+
] }),
|
|
459
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
|
|
460
|
+
"flex flex-row gap-[12px] w-full",
|
|
461
|
+
isImageVariant ? "px-[20px] pb-[20px]" : ""
|
|
462
|
+
), children: [
|
|
463
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
464
|
+
"button",
|
|
465
|
+
{
|
|
466
|
+
onClick: onSecondaryAction,
|
|
467
|
+
className: "basis-0 grow h-[48px] rounded-[50px] bg-[rgba(75,82,107,0.08)] flex items-center justify-center relative overflow-hidden active:after:content-[''] active:after:absolute active:after:inset-0 active:after:bg-black/8 active:after:rounded-[inherit] transition-colors",
|
|
468
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-['PingFang_SC:Medium',sans-serif] text-[16px] leading-[24px] text-[rgba(0,0,0,0.9)]", children: secondaryActionText })
|
|
469
|
+
}
|
|
470
|
+
),
|
|
471
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
472
|
+
"button",
|
|
473
|
+
{
|
|
474
|
+
onClick: onMainAction,
|
|
475
|
+
className: cn(
|
|
476
|
+
"basis-0 grow h-[48px] rounded-[50px] flex items-center justify-center relative overflow-hidden active:after:content-[''] active:after:absolute active:after:inset-0 active:after:bg-black/8 active:after:rounded-[inherit] transition-colors",
|
|
477
|
+
primaryBtnBg
|
|
478
|
+
),
|
|
479
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
|
|
480
|
+
"font-['PingFang_SC:Medium',sans-serif] text-[16px] leading-[24px]",
|
|
481
|
+
primaryBtnText
|
|
482
|
+
), children: mainActionText })
|
|
483
|
+
}
|
|
484
|
+
)
|
|
485
|
+
] })
|
|
486
|
+
] })
|
|
487
|
+
] });
|
|
488
|
+
}
|
|
489
|
+
var ICONS = {
|
|
490
|
+
check: "M10 18.3333C5.3975 18.3333 1.66667 14.6025 1.66667 10C1.66667 5.3975 5.3975 1.66667 10 1.66667C14.6025 1.66667 18.3333 5.3975 18.3333 10C18.3333 14.6025 14.6025 18.3333 10 18.3333ZM10 16.6667C11.7681 16.6667 13.4638 15.9643 14.714 14.714C15.9643 13.4638 16.6667 11.7681 16.6667 10C16.6667 8.23189 15.9643 6.5362 14.714 5.28595C13.4638 4.03571 11.7681 3.33333 10 3.33333C8.23189 3.33333 6.5362 4.03571 5.28595 5.28595C4.03571 6.5362 3.33333 8.23189 3.33333 10C3.33333 11.7681 4.03571 13.4638 5.28595 14.714C6.5362 15.9643 8.23189 16.6667 10 16.6667ZM8.62 13.4805L5.08417 9.94465L6.2625 8.76632L8.62 11.1238L13.3333 6.40965L14.5125 7.58798L8.62 13.4805Z",
|
|
491
|
+
close: "M8.00048 7.05781L12.6338 2.42448L13.5765 3.36715L8.94315 8.00048L13.5765 12.6338L12.6338 13.5765L8.00048 8.94315L3.36715 13.5765L2.42448 12.6338L7.05781 8.00048L2.42448 3.36715L3.36715 2.42448L8.00048 7.05781Z",
|
|
492
|
+
chevronRight: "M9.96668 8.00048L5.33334 12.6338L6.27601 13.5765L11.852 8.00048L6.27601 2.42448L5.33334 3.36715L9.96668 8.00048Z"
|
|
493
|
+
};
|
|
494
|
+
function Toast({
|
|
495
|
+
lines,
|
|
496
|
+
showIcon = true,
|
|
497
|
+
showClose = true,
|
|
498
|
+
onClose,
|
|
499
|
+
variant = "default",
|
|
500
|
+
actionText,
|
|
501
|
+
onAction
|
|
502
|
+
}) {
|
|
503
|
+
const isAction = variant === "action";
|
|
504
|
+
const isPureText = !showIcon && !showClose && !isAction;
|
|
505
|
+
const isDoubleLine = lines.length > 1;
|
|
506
|
+
const paddingClass = isPureText ? "px-[12px] py-[8px]" : "px-[8px] py-[10px]";
|
|
507
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
508
|
+
react.motion.div,
|
|
509
|
+
{
|
|
510
|
+
layout: true,
|
|
511
|
+
initial: false,
|
|
512
|
+
className: cn(
|
|
513
|
+
"relative rounded-[12px] overflow-hidden",
|
|
514
|
+
"bg-primary/90 backdrop-blur-sm",
|
|
515
|
+
"text-primary-foreground font-sans",
|
|
516
|
+
"flex items-center",
|
|
517
|
+
isAction ? "w-full h-[40px]" : "w-fit max-w-full justify-center",
|
|
518
|
+
"shadow-lg"
|
|
519
|
+
),
|
|
520
|
+
transition: {
|
|
521
|
+
type: "spring",
|
|
522
|
+
stiffness: 500,
|
|
523
|
+
damping: 30,
|
|
524
|
+
mass: 0.5
|
|
525
|
+
},
|
|
526
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
527
|
+
react.motion.div,
|
|
528
|
+
{
|
|
529
|
+
layout: true,
|
|
530
|
+
className: cn(
|
|
531
|
+
"flex items-center box-border relative w-full",
|
|
532
|
+
paddingClass,
|
|
533
|
+
isAction ? "justify-between" : isPureText ? "justify-center" : "gap-2"
|
|
534
|
+
),
|
|
535
|
+
children: [
|
|
536
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center", isAction ? "gap-2" : "gap-2"), children: [
|
|
537
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "popLayout", initial: false, children: showIcon && /* @__PURE__ */ jsxRuntime.jsx(
|
|
538
|
+
react.motion.div,
|
|
539
|
+
{
|
|
540
|
+
layout: true,
|
|
541
|
+
initial: { opacity: 0, scale: 0.8, width: 0 },
|
|
542
|
+
animate: { opacity: 1, scale: 1, width: "auto" },
|
|
543
|
+
exit: { opacity: 0, scale: 0.8, width: 0 },
|
|
544
|
+
transition: { duration: 0.2 },
|
|
545
|
+
className: "flex items-center justify-center shrink-0",
|
|
546
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative size-[20px]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: ICONS.check, fill: "currentColor" }) }) })
|
|
547
|
+
},
|
|
548
|
+
"icon"
|
|
549
|
+
) }),
|
|
550
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
551
|
+
react.motion.div,
|
|
552
|
+
{
|
|
553
|
+
layout: true,
|
|
554
|
+
className: cn(
|
|
555
|
+
"flex flex-col justify-center text-[14px] leading-[20px] text-nowrap",
|
|
556
|
+
isPureText ? "text-center" : "text-left",
|
|
557
|
+
"px-[4px]"
|
|
558
|
+
),
|
|
559
|
+
children: lines.map((line, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
560
|
+
react.motion.p,
|
|
561
|
+
{
|
|
562
|
+
layout: true,
|
|
563
|
+
initial: { opacity: 0, y: 5 },
|
|
564
|
+
animate: { opacity: 1, y: 0 },
|
|
565
|
+
exit: { opacity: 0, y: -5 },
|
|
566
|
+
className: cn(
|
|
567
|
+
"whitespace-pre",
|
|
568
|
+
index === 0 && isDoubleLine && !isPureText ? "mb-0" : ""
|
|
569
|
+
),
|
|
570
|
+
children: line
|
|
571
|
+
},
|
|
572
|
+
index
|
|
573
|
+
))
|
|
574
|
+
}
|
|
575
|
+
)
|
|
576
|
+
] }),
|
|
577
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center shrink-0", children: [
|
|
578
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "popLayout", initial: false, children: isAction && actionText && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
579
|
+
react.motion.div,
|
|
580
|
+
{
|
|
581
|
+
layout: true,
|
|
582
|
+
initial: { opacity: 0, x: 10 },
|
|
583
|
+
animate: { opacity: 1, x: 0 },
|
|
584
|
+
exit: { opacity: 0, x: 10 },
|
|
585
|
+
className: "flex items-center pl-[8px] h-full",
|
|
586
|
+
children: [
|
|
587
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-current/20 w-[0.5px] h-[12px] shrink-0 mr-[12px]" }),
|
|
588
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
589
|
+
"button",
|
|
590
|
+
{
|
|
591
|
+
onClick: onAction,
|
|
592
|
+
className: cn(
|
|
593
|
+
"flex items-center gap-[2px] hover:opacity-80 transition-opacity relative rounded overflow-hidden px-1 -mx-1",
|
|
594
|
+
"active:after:absolute active:after:inset-0 active:after:bg-current/10 active:after:content-[''] active:after:rounded-[inherit]"
|
|
595
|
+
),
|
|
596
|
+
children: [
|
|
597
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[14px] font-medium leading-[20px] text-current whitespace-pre", children: actionText }),
|
|
598
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-[16px]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: ICONS.chevronRight, fill: "currentColor" }) }) })
|
|
599
|
+
]
|
|
600
|
+
}
|
|
601
|
+
)
|
|
602
|
+
]
|
|
603
|
+
},
|
|
604
|
+
"action"
|
|
605
|
+
) }),
|
|
606
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "popLayout", initial: false, children: !isAction && showClose && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
607
|
+
react.motion.div,
|
|
608
|
+
{
|
|
609
|
+
layout: true,
|
|
610
|
+
initial: { opacity: 0, scale: 0.8, width: 0 },
|
|
611
|
+
animate: { opacity: 1, scale: 1, width: "auto" },
|
|
612
|
+
exit: { opacity: 0, scale: 0.8, width: 0 },
|
|
613
|
+
transition: { duration: 0.2 },
|
|
614
|
+
className: "flex items-center h-full shrink-0 pl-[4px]",
|
|
615
|
+
children: [
|
|
616
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
|
|
617
|
+
"bg-current/20 w-[0.5px] shrink-0 mr-[8px]",
|
|
618
|
+
isDoubleLine ? "h-[32px]" : "h-[12px]"
|
|
619
|
+
) }),
|
|
620
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
621
|
+
"button",
|
|
622
|
+
{
|
|
623
|
+
onClick: onClose,
|
|
624
|
+
className: cn(
|
|
625
|
+
"relative size-[16px] cursor-pointer hover:opacity-70 transition-opacity flex items-center justify-center rounded-full overflow-hidden",
|
|
626
|
+
"active:after:absolute active:after:inset-0 active:after:bg-current/10 active:after:content-[''] active:after:rounded-full"
|
|
627
|
+
),
|
|
628
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: ICONS.close, fill: "currentColor" }) })
|
|
629
|
+
}
|
|
630
|
+
)
|
|
631
|
+
]
|
|
632
|
+
},
|
|
633
|
+
"close"
|
|
634
|
+
) })
|
|
635
|
+
] })
|
|
636
|
+
]
|
|
637
|
+
}
|
|
638
|
+
)
|
|
639
|
+
}
|
|
640
|
+
);
|
|
641
|
+
}
|
|
642
|
+
var ICONS2 = {
|
|
643
|
+
home: "M15.8333 15.8344V8.16692L10 3.56525L4.16667 8.16692V15.8344H15.8333ZM17.5 16.6678C17.5 16.8888 17.4122 17.1007 17.2559 17.257C17.0996 17.4133 16.8877 17.5011 16.6667 17.5011H3.33333C3.11232 17.5011 2.90036 17.4133 2.74408 17.257C2.5878 17.1007 2.5 16.8888 2.5 16.6678V7.76275C2.49995 7.63688 2.52842 7.51263 2.58326 7.39933C2.63811 7.28603 2.71791 7.18663 2.81667 7.10859L9.48333 1.84942C9.63046 1.73316 9.81249 1.66992 10 1.66992C10.1875 1.66992 10.3695 1.73316 10.5167 1.84942L17.1833 7.10775C17.2822 7.18588 17.3621 7.28542 17.4169 7.39887C17.4718 7.51232 17.5002 7.63674 17.5 7.76275V16.6678V16.6678ZM5.83333 10.0011H7.5C7.5 10.6641 7.76339 11.3 8.23223 11.7689C8.70107 12.2377 9.33696 12.5011 10 12.5011C10.663 12.5011 11.2989 12.2377 11.7678 11.7689C12.2366 11.3 12.5 10.6641 12.5 10.0011H14.1667C14.1667 11.1062 13.7277 12.166 12.9463 12.9474C12.1649 13.7288 11.1051 14.1678 10 14.1678C8.89493 14.1678 7.83512 13.7288 7.05372 12.9474C6.27232 12.166 5.83333 11.1062 5.83333 10.0011V10.0011Z",
|
|
644
|
+
bus: "M5.36035 0.0981727C7.06211 -0.0327168 8.77188 -0.0327317 10.4736 0.0981727L13.333 0.317899C13.7749 0.317899 14.1992 0.493758 14.5117 0.80618C14.8242 1.1187 15 1.54292 15 1.98489V4.48489H15.417C15.6469 4.48509 15.833 4.67189 15.833 4.90188V7.14407C15.833 7.30189 15.7437 7.44654 15.6025 7.51712L15 7.8179V14.0679C15 14.298 14.8131 14.4849 14.583 14.4849H14.167V15.3179C14.167 15.5389 14.0791 15.7515 13.9229 15.9077C13.7666 16.064 13.554 16.1519 13.333 16.1519H12.5C12.2791 16.1519 12.0674 16.0639 11.9111 15.9077C11.7549 15.7515 11.667 15.5389 11.667 15.3179V14.4849H4.16699V15.3179C4.16699 15.5389 4.07907 15.7515 3.92285 15.9077C3.76657 16.064 3.55402 16.1519 3.33301 16.1519H2.5C2.27911 16.1519 2.06739 16.0639 1.91113 15.9077C1.75485 15.7515 1.66699 15.5389 1.66699 15.3179V14.4849H1.25C1.01988 14.4849 0.833008 14.298 0.833008 14.0679V7.8179L0.230469 7.51712C0.0893087 7.44654 0 7.30189 0 7.14407V4.90188C0 4.67176 0.186874 4.48489 0.416992 4.48489H0.833008V1.98489C0.83305 1.54292 1.00877 1.1187 1.32129 0.80618C1.63384 0.493682 2.05802 0.317899 2.5 0.317899L5.36035 0.0981727ZM2.96289 10.7866C2.71607 10.7592 2.5 10.9524 2.5 11.2007V12.4019C2.50009 12.6319 2.68693 12.8179 2.91699 12.8179H5.50781C5.69901 12.8179 5.86574 12.688 5.91211 12.5025L6.13477 11.6138C6.19557 11.3693 6.0268 11.1271 5.77637 11.0991L2.96289 10.7866ZM10.0576 11.0991C9.80699 11.127 9.63828 11.3692 9.69922 11.6138L9.9209 12.5025C9.96726 12.6879 10.134 12.8179 10.3252 12.8179H12.917C13.1469 12.8177 13.3329 12.6318 13.333 12.4019V11.2007C13.333 10.9525 13.1177 10.7595 12.8711 10.7866L10.0576 11.0991ZM3.33301 3.23489C2.87306 3.23504 2.50026 3.60798 2.5 4.0679V8.71341C2.50003 9.14883 2.83538 9.51107 3.26953 9.54446L5.36035 9.70462C7.06213 9.83551 8.77186 9.83552 10.4736 9.70462L12.5635 9.54446C12.9976 9.51107 13.333 9.14883 13.333 8.71341V4.0679C13.3327 3.6079 12.9601 3.23491 12.5 3.23489H3.33301ZM4.24219 1.15188C4.20057 1.15199 4.16721 1.18549 4.16699 1.22708C4.16699 1.64535 4.5056 1.98469 4.92383 1.98489H10.9092C11.3275 1.98482 11.667 1.64543 11.667 1.22708C11.6668 1.18542 11.6325 1.15188 11.5908 1.15188H4.24219Z",
|
|
645
|
+
check: "M8.33393 12.6446L15.9939 4.98372L17.1731 6.16206L8.33393 15.0012L3.0306 9.69789L4.20893 8.51956L8.33393 12.6446Z"
|
|
646
|
+
};
|
|
647
|
+
function Icon({ path, className, fill = "black", fillOpacity = 0.9 }) {
|
|
648
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative shrink-0 size-[20px]", className), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", viewBox: path === ICONS2.bus ? "0 0 16 17" : "0 0 20 20", preserveAspectRatio: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: path, fill, fillOpacity }) }) });
|
|
649
|
+
}
|
|
650
|
+
function Frame() {
|
|
651
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[10px] h-[12px] items-start justify-center shrink-0 w-full pl-[8px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-0 relative shrink-0 w-full opacity-12", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-black w-full" }) }) });
|
|
652
|
+
}
|
|
653
|
+
function ActionItem({ text, icon = "home", isWarning, isSelected, isTitle, onClick }) {
|
|
654
|
+
if (isTitle) {
|
|
655
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-[4px] h-[32px] items-center justify-center relative shrink-0 w-full rounded-[50px]", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-['PingFang_SC:Medium',sans-serif] leading-[20px] text-[14px] text-[rgba(0,0,0,0.42)] whitespace-pre z-10", children: text }) });
|
|
656
|
+
}
|
|
657
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
658
|
+
react.motion.button,
|
|
659
|
+
{
|
|
660
|
+
className: cn(
|
|
661
|
+
"flex gap-[4px] h-[40px] items-center relative shrink-0 w-full text-left outline-none px-0",
|
|
662
|
+
isSelected ? "justify-between" : "justify-start",
|
|
663
|
+
"rounded-[8px]"
|
|
664
|
+
),
|
|
665
|
+
onClick,
|
|
666
|
+
initial: "idle",
|
|
667
|
+
whileTap: "active",
|
|
668
|
+
style: { WebkitTapHighlightColor: "transparent" },
|
|
669
|
+
children: [
|
|
670
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
671
|
+
react.motion.div,
|
|
672
|
+
{
|
|
673
|
+
className: "absolute inset-0 bg-black rounded-[inherit]",
|
|
674
|
+
variants: {
|
|
675
|
+
idle: { opacity: 0 },
|
|
676
|
+
active: { opacity: 0.08 }
|
|
677
|
+
},
|
|
678
|
+
transition: { duration: 0.1 }
|
|
679
|
+
}
|
|
680
|
+
),
|
|
681
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[4px] relative z-10", children: [
|
|
682
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
683
|
+
Icon,
|
|
684
|
+
{
|
|
685
|
+
path: icon === "bus" ? ICONS2.bus : ICONS2.home,
|
|
686
|
+
fill: isWarning ? "#FF293B" : "black",
|
|
687
|
+
fillOpacity: isWarning ? 1 : 0.9
|
|
688
|
+
}
|
|
689
|
+
),
|
|
690
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
|
|
691
|
+
"font-['PingFang_SC:Medium',sans-serif] leading-[24px] text-[16px] whitespace-pre",
|
|
692
|
+
isWarning ? "text-[#ff293b]" : "text-[rgba(0,0,0,0.9)]"
|
|
693
|
+
), children: text })
|
|
694
|
+
] }),
|
|
695
|
+
isSelected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { path: ICONS2.check }) })
|
|
696
|
+
]
|
|
697
|
+
}
|
|
698
|
+
);
|
|
699
|
+
}
|
|
700
|
+
function ActionSheet({ isOpen = true, onClose, demoMode, variant = "default", className }) {
|
|
701
|
+
const renderContent = () => {
|
|
702
|
+
switch (variant) {
|
|
703
|
+
case "edit":
|
|
704
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
705
|
+
/* @__PURE__ */ jsxRuntime.jsx(ActionItem, { text: "\u64CD\u4F5C\u9879" }),
|
|
706
|
+
/* @__PURE__ */ jsxRuntime.jsx(ActionItem, { text: "\u64CD\u4F5C\u9879" }),
|
|
707
|
+
/* @__PURE__ */ jsxRuntime.jsx(Frame, {}),
|
|
708
|
+
/* @__PURE__ */ jsxRuntime.jsx(ActionItem, { text: "\u64CD\u4F5C\u9879 01" }),
|
|
709
|
+
/* @__PURE__ */ jsxRuntime.jsx(ActionItem, { text: "\u64CD\u4F5C\u9879 02" }),
|
|
710
|
+
/* @__PURE__ */ jsxRuntime.jsx(ActionItem, { text: "\u64CD\u4F5C\u9879 03" }),
|
|
711
|
+
/* @__PURE__ */ jsxRuntime.jsx(Frame, {}),
|
|
712
|
+
/* @__PURE__ */ jsxRuntime.jsx(ActionItem, { text: "\u8B66\u793A\u9879", isWarning: true })
|
|
713
|
+
] });
|
|
714
|
+
case "title":
|
|
715
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
716
|
+
/* @__PURE__ */ jsxRuntime.jsx(ActionItem, { text: "\u64CD\u4F5C\u6807\u9898", isTitle: true }),
|
|
717
|
+
/* @__PURE__ */ jsxRuntime.jsx(ActionItem, { text: "\u64CD\u4F5C\u9879 01" }),
|
|
718
|
+
/* @__PURE__ */ jsxRuntime.jsx(ActionItem, { text: "\u64CD\u4F5C\u9879 02" }),
|
|
719
|
+
/* @__PURE__ */ jsxRuntime.jsx(Frame, {}),
|
|
720
|
+
/* @__PURE__ */ jsxRuntime.jsx(ActionItem, { text: "\u64CD\u4F5C\u9879 03" })
|
|
721
|
+
] });
|
|
722
|
+
case "selectable":
|
|
723
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
724
|
+
/* @__PURE__ */ jsxRuntime.jsx(ActionItem, { text: "\u516C\u5171\u4EA4\u901A", icon: "bus", isSelected: true }),
|
|
725
|
+
/* @__PURE__ */ jsxRuntime.jsx(Frame, {}),
|
|
726
|
+
/* @__PURE__ */ jsxRuntime.jsx(ActionItem, { text: "\u64CD\u4F5C\u9879 01" }),
|
|
727
|
+
/* @__PURE__ */ jsxRuntime.jsx(ActionItem, { text: "\u64CD\u4F5C\u9879 02" }),
|
|
728
|
+
/* @__PURE__ */ jsxRuntime.jsx(ActionItem, { text: "\u64CD\u4F5C\u9879 02" }),
|
|
729
|
+
/* @__PURE__ */ jsxRuntime.jsx(ActionItem, { text: "\u64CD\u4F5C\u9879 03" })
|
|
730
|
+
] });
|
|
731
|
+
case "default":
|
|
732
|
+
default:
|
|
733
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
734
|
+
/* @__PURE__ */ jsxRuntime.jsx(ActionItem, { text: "\u64CD\u4F5C\u9879" }),
|
|
735
|
+
/* @__PURE__ */ jsxRuntime.jsx(ActionItem, { text: "\u64CD\u4F5C\u9879" }),
|
|
736
|
+
/* @__PURE__ */ jsxRuntime.jsx(Frame, {}),
|
|
737
|
+
/* @__PURE__ */ jsxRuntime.jsx(ActionItem, { text: "\u64CD\u4F5C\u9879 01" }),
|
|
738
|
+
/* @__PURE__ */ jsxRuntime.jsx(ActionItem, { text: "\u64CD\u4F5C\u9879 02" }),
|
|
739
|
+
/* @__PURE__ */ jsxRuntime.jsx(ActionItem, { text: "\u64CD\u4F5C\u9879 03" }),
|
|
740
|
+
/* @__PURE__ */ jsxRuntime.jsx(Frame, {}),
|
|
741
|
+
/* @__PURE__ */ jsxRuntime.jsx(ActionItem, { text: "\u8FD9\u662F\u6700\u5927\u957F\u5EA6" })
|
|
742
|
+
] });
|
|
743
|
+
}
|
|
744
|
+
};
|
|
745
|
+
const Content = /* @__PURE__ */ jsxRuntime.jsx(
|
|
746
|
+
"div",
|
|
747
|
+
{
|
|
748
|
+
className: "bg-[rgba(255,255,255,0.6)] backdrop-blur-xl relative rounded-bl-[24px] rounded-br-[24px] rounded-tl-[24px] rounded-tr-[20px] shadow-[0px_4px_16px_0px_rgba(0,0,0,0.12)] w-[160px] overflow-hidden",
|
|
749
|
+
onClick: (e) => e.stopPropagation(),
|
|
750
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col justify-end size-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "box-border flex flex-col gap-[4px] items-start justify-end px-[16px] py-[8px] relative size-full", children: renderContent() }) })
|
|
751
|
+
}
|
|
752
|
+
);
|
|
753
|
+
if (demoMode) {
|
|
754
|
+
if (!isOpen) return null;
|
|
755
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
|
|
756
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/60", onClick: onClose }),
|
|
757
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10", children: Content })
|
|
758
|
+
] });
|
|
759
|
+
}
|
|
760
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
|
|
761
|
+
react.motion.div,
|
|
762
|
+
{
|
|
763
|
+
initial: { opacity: 0, scaleY: 0.8, y: 10 },
|
|
764
|
+
animate: { opacity: 1, scaleY: 1, y: 0 },
|
|
765
|
+
exit: { opacity: 0, scaleY: 0.8, y: 10 },
|
|
766
|
+
transition: { type: "spring", stiffness: 300, damping: 30 },
|
|
767
|
+
className: cn("absolute z-50 origin-bottom-left", className),
|
|
768
|
+
children: Content
|
|
769
|
+
}
|
|
770
|
+
) });
|
|
771
|
+
}
|
|
772
|
+
var ICONS3 = {
|
|
773
|
+
volume: "M6.66667 4.81335L4.402 6.66668H2V9.33335H4.402L6.66667 11.1867V4.81335ZM3.926 10.6667H1.33333C1.15652 10.6667 0.986953 10.5964 0.861929 10.4714C0.736905 10.3464 0.666667 10.1768 0.666667 10V6.00001C0.666667 5.8232 0.736905 5.65363 0.861929 5.52861C0.986953 5.40359 1.15652 5.33335 1.33333 5.33335H3.926L7.45533 2.44535C7.50417 2.40531 7.56337 2.37997 7.62604 2.37228C7.68872 2.36458 7.75229 2.37485 7.80936 2.40188C7.86643 2.42891 7.91465 2.4716 7.9484 2.52497C7.98215 2.57834 8.00004 2.6402 8 2.70335V13.2967C8.00004 13.3598 7.98215 13.4217 7.9484 13.4751C7.91465 13.5284 7.86643 13.5711 7.80936 13.5981C7.75229 13.6252 7.68872 13.6354 7.62604 13.6278C7.56337 13.6201 7.50417 13.5947 7.45533 13.5547L3.926 10.6667ZM12.9373 13.4227L11.9933 12.4787C12.6253 11.9164 13.1309 11.2265 13.4768 10.4545C13.8227 9.68249 14.001 8.84595 14 8.00001C14.0008 7.11074 13.8036 6.23245 13.4226 5.42893C13.0416 4.62541 12.4864 3.91684 11.7973 3.35468L12.744 2.40801C13.5563 3.09571 14.2088 3.95234 14.656 4.91814C15.1033 5.88395 15.3344 6.93569 15.3333 8.00001C15.3333 10.1487 14.4093 12.0813 12.9373 13.4227ZM10.5753 11.0607L9.62733 10.1127C9.95098 9.86381 10.2131 9.54384 10.3933 9.1775C10.5735 8.81116 10.667 8.40828 10.6667 8.00001C10.6667 7.04668 10.1667 6.21001 9.41333 5.73868L10.3727 4.77935C10.8776 5.15081 11.2881 5.63592 11.5708 6.19543C11.8535 6.75494 12.0005 7.37314 12 8.00001C12 9.22801 11.4467 10.3267 10.5753 11.0607Z",
|
|
774
|
+
close: "M6.00036 5.29336L9.47536 1.81836L10.1824 2.52536L6.70736 6.00036L10.1824 9.47536L9.47536 10.1824L6.00036 6.70736L2.52536 10.1824L1.81836 9.47536L5.29336 6.00036L1.81836 2.52536L2.52536 1.81836L6.00036 5.29336Z",
|
|
775
|
+
home: "M12.6667 12.6675V6.53354L8 2.8522L3.33333 6.53354V12.6675H12.6667ZM14 13.3342C14 13.511 13.9298 13.6806 13.8047 13.8056C13.6797 13.9306 13.5101 14.0009 13.3333 14.0009H2.66667C2.48986 14.0009 2.32029 13.9306 2.19526 13.8056C2.07024 13.6806 2 13.511 2 13.3342V6.2102C1.99996 6.1095 2.02273 6.0101 2.06661 5.91946C2.11048 5.82883 2.17432 5.7493 2.25333 5.68687L7.58667 1.47954C7.70436 1.38653 7.84999 1.33594 8 1.33594C8.15001 1.33594 8.29564 1.38653 8.41333 1.47954L13.7467 5.6862C13.8258 5.74871 13.8897 5.82834 13.9335 5.9191C13.9774 6.00986 14.0001 6.10939 14 6.2102V13.3342V13.3342ZM4.66667 8.00087H6C6 8.5313 6.21071 9.04001 6.58579 9.41508C6.96086 9.79016 7.46957 10.0009 8 10.0009C8.53043 10.0009 9.03914 9.79016 9.41421 9.41508C9.78929 9.04001 10 8.5313 10 8.00087H11.3333C11.3333 8.88492 10.9821 9.73277 10.357 10.3579C9.7319 10.983 8.88406 11.3342 8 11.3342C7.11595 11.3342 6.2681 10.983 5.64298 10.3579C5.01786 9.73277 4.66667 8.88492 4.66667 8.00087V8.00087Z"
|
|
776
|
+
};
|
|
777
|
+
function NotificationBar({
|
|
778
|
+
variant = "info",
|
|
779
|
+
message,
|
|
780
|
+
onClose,
|
|
781
|
+
actions,
|
|
782
|
+
className
|
|
783
|
+
}) {
|
|
784
|
+
const styles = {
|
|
785
|
+
success: {
|
|
786
|
+
text: "#0E8A39",
|
|
787
|
+
icon: "#0E8A39"
|
|
788
|
+
},
|
|
789
|
+
warning: {
|
|
790
|
+
text: "#f55a4f",
|
|
791
|
+
icon: "#FF293B"
|
|
792
|
+
},
|
|
793
|
+
attention: {
|
|
794
|
+
text: "#ff8b00",
|
|
795
|
+
icon: "#FA6800"
|
|
796
|
+
},
|
|
797
|
+
info: {
|
|
798
|
+
text: "#1d73fb",
|
|
799
|
+
icon: "#367BF6"
|
|
800
|
+
}
|
|
801
|
+
};
|
|
802
|
+
const colors = styles[variant];
|
|
803
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
804
|
+
"div",
|
|
805
|
+
{
|
|
806
|
+
className: cn(
|
|
807
|
+
"relative flex items-center w-full min-h-[40px]",
|
|
808
|
+
"bg-[rgba(255,255,255,0.7)] rounded-[32px]",
|
|
809
|
+
"shadow-[0px_4px_16px_0px_rgba(0,0,0,0.12)]",
|
|
810
|
+
"px-[12px] py-[10px]",
|
|
811
|
+
"backdrop-blur-sm",
|
|
812
|
+
// Added for better glass effect
|
|
813
|
+
className
|
|
814
|
+
),
|
|
815
|
+
"data-name": `Notification Bar/${variant}`,
|
|
816
|
+
children: [
|
|
817
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center gap-[10px] min-w-0", children: [
|
|
818
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative shrink-0 size-[16px]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: ICONS3.volume, fill: colors.icon }) }) }),
|
|
819
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
820
|
+
"div",
|
|
821
|
+
{
|
|
822
|
+
className: "font-['PingFang_SC:Medium',sans-serif] text-[14px] leading-[20px] break-words whitespace-pre-wrap",
|
|
823
|
+
style: { color: colors.text },
|
|
824
|
+
children: message
|
|
825
|
+
}
|
|
826
|
+
)
|
|
827
|
+
] }),
|
|
828
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center shrink-0", children: [
|
|
829
|
+
actions && actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: actions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(React__namespace.default.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
|
|
830
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
831
|
+
"button",
|
|
832
|
+
{
|
|
833
|
+
onClick: action.onClick,
|
|
834
|
+
className: "flex items-center justify-center gap-[2px] h-[28px] min-w-[28px] rounded-[18px] hover:bg-black/5 transition-colors px-1",
|
|
835
|
+
children: [
|
|
836
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative shrink-0 size-[16px]", children: action.icon ? action.icon : /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: ICONS3.home, fill: colors.text }) }) }),
|
|
837
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
838
|
+
"span",
|
|
839
|
+
{
|
|
840
|
+
className: "font-['PingFang_SC:Medium',sans-serif] text-[12px] leading-[16px] whitespace-nowrap",
|
|
841
|
+
style: { color: colors.text },
|
|
842
|
+
children: action.label
|
|
843
|
+
}
|
|
844
|
+
)
|
|
845
|
+
]
|
|
846
|
+
}
|
|
847
|
+
),
|
|
848
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center w-[17px]", children: [
|
|
849
|
+
" ",
|
|
850
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[0.5px] h-[12px] bg-[rgba(0,0,0,0.12)]" })
|
|
851
|
+
] })
|
|
852
|
+
] }) }, idx)) }),
|
|
853
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("shrink-0", (!actions || actions.length === 0) && "ml-[12px]"), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
854
|
+
"button",
|
|
855
|
+
{
|
|
856
|
+
onClick: onClose,
|
|
857
|
+
className: "flex items-center justify-center size-[12px] opacity-40 hover:opacity-100 transition-opacity",
|
|
858
|
+
"aria-label": "Close notification",
|
|
859
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", viewBox: "0 0 12 12", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: ICONS3.close, fill: "black", fillOpacity: "1" }) })
|
|
860
|
+
}
|
|
861
|
+
) })
|
|
862
|
+
] })
|
|
863
|
+
]
|
|
864
|
+
}
|
|
865
|
+
);
|
|
866
|
+
}
|
|
867
|
+
|
|
868
|
+
// imports/svg-bot5vgf2as.ts
|
|
869
|
+
var svg_bot5vgf2as_default = {
|
|
870
|
+
p19a8e000: "M10 18.3333C5.3975 18.3333 1.66667 14.6025 1.66667 10C1.66667 5.3975 5.3975 1.66667 10 1.66667C14.6025 1.66667 18.3333 5.3975 18.3333 10C18.3333 14.6025 14.6025 18.3333 10 18.3333ZM10 16.6667C11.7681 16.6667 13.4638 15.9643 14.714 14.714C15.9643 13.4638 16.6667 11.7681 16.6667 10C16.6667 8.23189 15.9643 6.5362 14.714 5.28595C13.4638 4.03571 11.7681 3.33333 10 3.33333C8.23189 3.33333 6.5362 4.03571 5.28595 5.28595C4.03571 6.5362 3.33333 8.23189 3.33333 10C3.33333 11.7681 4.03571 13.4638 5.28595 14.714C6.5362 15.9643 8.23189 16.6667 10 16.6667ZM8.62 13.4805L5.08417 9.94465L6.2625 8.76632L8.62 11.1238L13.3333 6.40965L14.5125 7.58798L8.62 13.4805Z",
|
|
871
|
+
p2ee0a700: "M23.6 2.13333C22.8 1.06667 21.2 1.06667 20.4 2.13333L16 8L28 8L23.6 2.13333Z",
|
|
872
|
+
p3e545500: "M8.00048 7.05781L12.6338 2.42448L13.5765 3.36715L8.94315 8.00048L13.5765 12.6338L12.6338 13.5765L8.00048 8.94315L3.36715 13.5765L2.42448 12.6338L7.05781 8.00048L2.42448 3.36715L3.36715 2.42448L8.00048 7.05781Z"
|
|
873
|
+
};
|
|
874
|
+
var ICONS4 = {
|
|
875
|
+
selected: svg_bot5vgf2as_default.p19a8e000,
|
|
876
|
+
arrow: svg_bot5vgf2as_default.p2ee0a700,
|
|
877
|
+
close: svg_bot5vgf2as_default.p3e545500
|
|
878
|
+
};
|
|
879
|
+
function BubbleTip({
|
|
880
|
+
message = "\u6C14\u6CE1\u63D0\u793A",
|
|
881
|
+
placement = "top",
|
|
882
|
+
alignment = "center",
|
|
883
|
+
showIcon = true,
|
|
884
|
+
closable = true,
|
|
885
|
+
onClose,
|
|
886
|
+
className
|
|
887
|
+
}) {
|
|
888
|
+
const ARROW_COLOR = "#4B526B";
|
|
889
|
+
let containerClasses = "flex flex-col";
|
|
890
|
+
let arrowClasses = "";
|
|
891
|
+
let arrowContainerClasses = "flex w-full";
|
|
892
|
+
switch (placement) {
|
|
893
|
+
case "top":
|
|
894
|
+
containerClasses = "flex flex-col items-center";
|
|
895
|
+
arrowClasses = "rotate-180";
|
|
896
|
+
break;
|
|
897
|
+
case "bottom":
|
|
898
|
+
containerClasses = "flex flex-col-reverse items-center";
|
|
899
|
+
arrowClasses = "";
|
|
900
|
+
break;
|
|
901
|
+
case "left":
|
|
902
|
+
containerClasses = "flex flex-row items-center";
|
|
903
|
+
arrowContainerClasses = "flex h-full flex-col w-[8px] items-center justify-center";
|
|
904
|
+
arrowClasses = "rotate-90";
|
|
905
|
+
break;
|
|
906
|
+
case "right":
|
|
907
|
+
containerClasses = "flex flex-row-reverse items-center";
|
|
908
|
+
arrowContainerClasses = "flex h-full flex-col w-[8px] items-center justify-center";
|
|
909
|
+
arrowClasses = "-rotate-90";
|
|
910
|
+
break;
|
|
911
|
+
}
|
|
912
|
+
let alignmentClass = "justify-center";
|
|
913
|
+
if (placement === "top" || placement === "bottom") {
|
|
914
|
+
if (alignment === "start") alignmentClass = "justify-start pl-[12px]";
|
|
915
|
+
if (alignment === "center") alignmentClass = "justify-center";
|
|
916
|
+
if (alignment === "end") alignmentClass = "justify-end pr-[12px]";
|
|
917
|
+
} else {
|
|
918
|
+
alignmentClass = "justify-center items-center";
|
|
919
|
+
}
|
|
920
|
+
const renderArrow = () => {
|
|
921
|
+
if (placement === "left" || placement === "right") {
|
|
922
|
+
return (
|
|
923
|
+
// Wrapper: 8x44
|
|
924
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-[8px] h-[44px] items-center justify-center relative shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-none", arrowClasses), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[8px] relative w-[44px]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 44 8", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: ICONS4.arrow, fill: ARROW_COLOR, fillOpacity: "0.9" }) }) }) }) })
|
|
925
|
+
);
|
|
926
|
+
}
|
|
927
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-[44px] h-[8px] flex items-center justify-center", arrowClasses), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
928
|
+
"svg",
|
|
929
|
+
{
|
|
930
|
+
className: "block size-full",
|
|
931
|
+
width: "44",
|
|
932
|
+
height: "8",
|
|
933
|
+
viewBox: "0 0 44 8",
|
|
934
|
+
fill: "none",
|
|
935
|
+
preserveAspectRatio: "none",
|
|
936
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: ICONS4.arrow, fill: ARROW_COLOR, fillOpacity: "0.9" })
|
|
937
|
+
}
|
|
938
|
+
) });
|
|
939
|
+
};
|
|
940
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("inline-flex relative filter drop-shadow-sm", containerClasses, className), "data-name": `BubbleTip/${placement}/${alignment}`, children: [
|
|
941
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-[rgba(75,82,107,0.9)] backdrop-blur-sm text-white rounded-[12px] px-[12px] py-[10px] flex items-center max-w-[300px] z-20", children: [
|
|
942
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[4px]", children: [
|
|
943
|
+
showIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative shrink-0 size-[20px]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: ICONS4.selected, fill: "white" }) }) }),
|
|
944
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-['PingFang_SC:Medium',sans-serif] text-[14px] leading-normal whitespace-pre flex flex-col justify-center text-white", children: message })
|
|
945
|
+
] }),
|
|
946
|
+
closable && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[8px] pl-[8px]", children: [
|
|
947
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[0.5px] h-[12px] bg-[rgba(255,255,255,0.2)] shrink-0" }),
|
|
948
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
949
|
+
"button",
|
|
950
|
+
{
|
|
951
|
+
onClick: onClose,
|
|
952
|
+
className: "flex items-center justify-center size-[16px] opacity-80 hover:opacity-100 transition-opacity",
|
|
953
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: ICONS4.close, fill: "white" }) })
|
|
954
|
+
}
|
|
955
|
+
)
|
|
956
|
+
] })
|
|
957
|
+
] }),
|
|
958
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("shrink-0 relative z-10", arrowContainerClasses, alignmentClass), children: renderArrow() })
|
|
959
|
+
] });
|
|
960
|
+
}
|
|
961
|
+
var imgIcon = "";
|
|
962
|
+
function Push({
|
|
963
|
+
icon = imgIcon,
|
|
964
|
+
title,
|
|
965
|
+
description,
|
|
966
|
+
actionText,
|
|
967
|
+
onAction,
|
|
968
|
+
className
|
|
969
|
+
}) {
|
|
970
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
971
|
+
"div",
|
|
972
|
+
{
|
|
973
|
+
className: cn(
|
|
974
|
+
"relative h-[64px] w-full rounded-[24px] overflow-hidden",
|
|
975
|
+
"backdrop-blur-[30px] backdrop-filter bg-[rgba(255,255,255,0.54)]",
|
|
976
|
+
"shadow-[0px_2px_4px_0px_rgba(0,0,0,0.02),0px_4px_16px_1px_rgba(0,0,0,0.06)]",
|
|
977
|
+
className
|
|
978
|
+
),
|
|
979
|
+
"data-name": "push",
|
|
980
|
+
children: [
|
|
981
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
982
|
+
"div",
|
|
983
|
+
{
|
|
984
|
+
"aria-hidden": "true",
|
|
985
|
+
className: "absolute inset-0 border border-[rgba(255,255,255,0.35)] rounded-[24px] pointer-events-none"
|
|
986
|
+
}
|
|
987
|
+
),
|
|
988
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center px-[12px] h-full w-full box-border", children: [
|
|
989
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[12px] flex-1 min-w-0 mr-[10px]", children: [
|
|
990
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative shrink-0 size-[40px]", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
991
|
+
"img",
|
|
992
|
+
{
|
|
993
|
+
src: icon,
|
|
994
|
+
alt: "",
|
|
995
|
+
className: "size-full object-cover pointer-events-none"
|
|
996
|
+
}
|
|
997
|
+
) }),
|
|
998
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center min-w-0 flex-1", children: [
|
|
999
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-['PingFang_SC:Medium',sans-serif] text-[16px] leading-[24px] text-[rgba(0,0,0,0.9)] truncate w-full text-left", children: title }),
|
|
1000
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-['PingFang_SC:Regular',sans-serif] text-[14px] leading-[20px] text-[rgba(0,0,0,0.7)] truncate w-full text-left", children: description })
|
|
1001
|
+
] })
|
|
1002
|
+
] }),
|
|
1003
|
+
actionText && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1004
|
+
"button",
|
|
1005
|
+
{
|
|
1006
|
+
onClick: onAction,
|
|
1007
|
+
className: "shrink-0 bg-[rgba(75,82,107,0.08)] h-[32px] px-[12px] rounded-[18px] flex items-center justify-center relative overflow-hidden active:after:content-[''] active:after:absolute active:after:inset-0 active:after:bg-black/8 active:after:rounded-[inherit] transition-colors",
|
|
1008
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-['PingFang_SC:Medium',sans-serif] text-[12px] text-[rgba(0,0,0,0.9)] whitespace-nowrap leading-[16px] text-center", children: actionText })
|
|
1009
|
+
}
|
|
1010
|
+
)
|
|
1011
|
+
] })
|
|
1012
|
+
]
|
|
1013
|
+
}
|
|
1014
|
+
);
|
|
1015
|
+
}
|
|
1016
|
+
var imgNotLoggedIn = "";
|
|
1017
|
+
var svgNotLoggedIn = {
|
|
1018
|
+
p22057700: "M1.25033 1.25033L10.315 5.01618",
|
|
1019
|
+
p2e691e00: "M1.25015 1.25015L6.37527 1.96206",
|
|
1020
|
+
p375bc00: "M12.3095 6.62025C12.5748 9.0696 10.7846 12.7557 9.70501 14.9703C8.73017 16.9701 10.9925 19.8014 10.9925 19.8014L8.55611 20.4507C8.55611 20.4507 6.5254 20.8607 7.5521 19.1277C8.90242 16.8485 1.83046 12.5754 0.848111 10.2716C-3.64015 -0.254204 11.0887 -4.65223 12.3095 6.62025Z",
|
|
1021
|
+
p952fc80: "M0.357212 5.80561L9.69063 0.750005L5.6906 15.9168L17.6907 10.8612",
|
|
1022
|
+
p9a5c900: "M0.357212 3.08334L4.6649 0.750005L2.81875 7.75L8.35721 5.41667"
|
|
1023
|
+
};
|
|
1024
|
+
var imgNetwork1 = "";
|
|
1025
|
+
var imgNetwork2 = "";
|
|
1026
|
+
var svgNetwork = {
|
|
1027
|
+
p1214e8f0: "M35.9729 13.862L29.5224 11.4579L30.6893 16.4137L25.9892 21.4434L27.0102 25.7797L28.7588 22.0989L35.1355 18.6359L35.9729 13.862Z",
|
|
1028
|
+
p137e7700: "M1.25034 1.25034L8.17922 3.83772L2.02019 9.08062",
|
|
1029
|
+
p1db48f00: "M28.2508 28.0668C28.6536 29.7775 27.5933 31.4907 25.8827 31.8935C24.1721 32.2963 22.4588 31.2361 22.056 29.5255C21.6532 27.8148 22.7134 26.1015 24.4241 25.6987C26.1347 25.2959 27.848 26.3562 28.2508 28.0668Z",
|
|
1030
|
+
p24da3e80: "M4.32648 9.01306H1.80284L0 0H5.16747L4.32648 9.01306Z",
|
|
1031
|
+
p26c007c0: "M47.6144 33.2635L27.5643 36.7829L12.4342 40.2538L16.7945 31.1377L6.68339 17.538L16.1406 5.96466L46.2894 12.2154L47.6144 33.2635Z",
|
|
1032
|
+
p28dc7e00: "M1.61966 1.30115C3.35431 15.6124 -7.05373 39.0307 24.6044 39.0307",
|
|
1033
|
+
p2d57ae00: "M22.1814 23.8984L20.2013 20.6358C21.4891 19.8544 22.9431 19.3881 24.4452 19.2764C25.9475 19.1648 27.4554 19.4101 28.8446 19.9925C30.2339 20.5751 31.466 21.4787 32.4394 22.6285C33.4127 23.7783 34.1002 25.1426 34.4455 26.609L30.7286 27.4842C30.5215 26.6045 30.1091 25.7859 29.5253 25.0961C28.9412 24.4062 28.2013 23.8645 27.3677 23.5149C26.5343 23.1655 25.6301 23.0171 24.7288 23.084C23.8276 23.151 22.9541 23.4296 22.1814 23.8984Z",
|
|
1034
|
+
p32471600: "M5.21994 9.93656L3.39158 10.4896L0 1.99084L5.04466 0L5.21994 9.93656Z",
|
|
1035
|
+
p3261a780: "M3.71598 2.5899H9.42252C12.5412 2.30237 18.8848 1.70077 19.3094 1.5946C19.8403 1.46189 27.8693 -0.0642537 28.4665 0.00210145C29.0637 0.0684566 32.9786 1.72734 33.7749 2.5899C34.5711 3.45246 35.5665 5.90772 35.4338 6.63762C35.3276 7.22155 33.4873 11.0392 32.5805 12.875L12.4749 15.861H2.72064L0 13.3395C0.0442325 10.9286 0.185782 6.06697 0.398118 5.90772C0.610455 5.74846 2.6985 3.62948 3.71598 2.5899Z",
|
|
1036
|
+
p91e2fc0: "M4.80733 1.30133C0.904269 9.54112 -6.13316 25.587 25.6814 25.587",
|
|
1037
|
+
pd470e00: "M16.9 15.1943C19.0463 13.892 21.4703 13.1158 23.9739 12.9297C26.4778 12.7436 28.9911 13.1526 31.3066 14.1236C33.6219 15.0945 35.6746 16.5997 37.2968 18.5158C38.9191 20.4322 40.065 22.7064 40.6405 25.1504L36.9236 26.0256C36.4862 24.1682 35.6157 22.4398 34.3827 20.9834C33.1498 19.527 31.5892 18.3827 29.8294 17.6448C28.0698 16.9069 26.1603 16.596 24.2575 16.7373C22.3546 16.8787 20.5117 17.4683 18.8804 18.4581L16.9 15.1943Z"
|
|
1038
|
+
};
|
|
1039
|
+
var imgGeneric = "";
|
|
1040
|
+
var svgGeneric = {
|
|
1041
|
+
p1b9b8400: "M0 9.08801L41.3639 0L38.6365 27.2725L0.000109239 38.179L0 9.08801Z",
|
|
1042
|
+
p2b0e2af0: "M5 26.3633L0 9.09056L41.3636 0L48.1818 14.0909L5 26.3633Z",
|
|
1043
|
+
p3182d400: "M7.27273 0L40 7.27273L33.6364 24.0909L0 15.4545L7.27273 0Z",
|
|
1044
|
+
p3435b100: "M51.9243 24.5455L3.63636 11.1992L50.1523 3.63636L90.9091 13.6587L51.9243 24.5455Z",
|
|
1045
|
+
p36984100: "M0 0L32.7272 7.27262V36.3636L2.72727 25.4544L0 0Z",
|
|
1046
|
+
p387fd0f1: "M2.27273 29.9997L0 9.09056L41.3636 0L38.1818 19.5455L2.27273 29.9997Z",
|
|
1047
|
+
p3921f100: "M2.72727 32.2727L0 6.81813L40.9091 0L74.0909 4.99994L71.3636 32.2726L32.7272 43.1818L2.72727 32.2727Z",
|
|
1048
|
+
pe91a400: "M0 0L32.7273 7.27273L27.7273 25.9091L2.27273 17.7273L0 0Z",
|
|
1049
|
+
peb6ca00: "M24.5459 0C29.5664 0.000241199 33.6367 4.07024 33.6367 9.09082C33.6367 14.1114 29.5665 18.1814 24.5459 18.1816H9.74414L4.32324 20.6689C3.52666 21.0339 2.72553 20.171 3.14844 19.4033L4.50488 16.9395C1.81061 15.3617 0 12.4385 0 9.09082C4.7932e-05 4.07012 4.07012 4.79334e-05 9.09082 0H24.5459ZM10.9092 7.27246C9.90509 7.27246 9.09092 8.08675 9.09082 9.09082C9.09082 10.095 9.90503 10.9092 10.9092 10.9092C11.9133 10.9091 12.7275 10.0949 12.7275 9.09082C12.7274 8.08681 11.9132 7.27256 10.9092 7.27246ZM17.2725 7.27246C16.2684 7.2725 15.4542 8.08678 15.4541 9.09082C15.4541 10.095 16.2683 10.9091 17.2725 10.9092C18.2766 10.9092 19.0908 10.095 19.0908 9.09082C19.0907 8.08675 18.2766 7.27246 17.2725 7.27246ZM23.6367 7.27246C22.6326 7.27246 21.8185 8.08675 21.8184 9.09082C21.8184 10.095 22.6326 10.9092 23.6367 10.9092C24.6407 10.9090 25.4541 10.0948 25.4541 9.09082C25.454 8.08689 24.6406 7.27269 23.6367 7.27246Z"
|
|
1050
|
+
};
|
|
1051
|
+
var imgNoPlan = "";
|
|
1052
|
+
var svgNoPlan = {
|
|
1053
|
+
pf17a1b0: "M14.4591 16.1091C12.193 14.8474 11.1358 11.4576 11.459 9.42774C12.4224 3.37755 1.1858 6.44949 4.16405 9.42773C5.16405 10.4277 18.3153 7.5299 14.4591 2.57466C12.3274 -0.164506 3.09311 0.83532 0.837723 4.29513"
|
|
1054
|
+
};
|
|
1055
|
+
var imgNoComment = "";
|
|
1056
|
+
var svgNoComment = {
|
|
1057
|
+
p198508c0: "M0.196953 15.411C4.74767 14.1725 15.1793 9.43237 20.5 0.380045",
|
|
1058
|
+
p1f020300: "M0.343501 0L10.3435 0.314658C10.3435 0.314658 9.64265 2.52038 10.3435 3.49265C11.428 4.99714 11.1562 7.13916 10.3435 8.80626C9.60966 10.3117 10.3435 11.5312 10.3435 11.5312H0.343501C0.343501 11.5312 -0.429376 9.74012 0.343501 8.43554C1.36 6.71974 1.42874 5.32266 0.343501 3.78098C-0.323074 2.83405 0.343501 0 0.343501 0Z",
|
|
1059
|
+
p1f0f3180: "M32.5992 0.447391C23.8589 12.2071 2.88233 16.6568 8.28535 11.5715C13.6884 6.48618 21.3162 17.1335 0.180614 22.3776",
|
|
1060
|
+
p200381c0: "M0.203594 11.9026C3.57269 10.9523 11.2957 7.31547 15.2349 0.370002",
|
|
1061
|
+
p2dd0a400: "M0.309106 0.407716L10.3091 0C10.3091 0 9.46313 2.051 10.3091 3.206C11.4304 4.73685 11.2952 6.47188 10.3091 8.06499C9.60531 9.20201 10.3091 11.4891 10.3091 11.4891H0.309106C0.309106 11.4891 -0.386383 9.2071 0.309106 8.06499C1.49751 6.11343 1.22782 4.99778 0.309106 3.44497C-0.37425 2.28996 0.309106 0.407716 0.309106 0.407716Z"
|
|
1062
|
+
};
|
|
1063
|
+
var imgLocationMap = "";
|
|
1064
|
+
var imgLocationAvatar = "";
|
|
1065
|
+
var svgLocation = {
|
|
1066
|
+
p191f4380: "M3.02692 0C3.84431 0 4.50845 0.217121 5.01932 0.676906C5.53019 1.12392 5.78563 1.73697 5.78563 2.50327C5.78563 3.12909 5.61959 3.65274 5.3003 4.06143C5.18535 4.20192 4.82774 4.53399 4.22747 5.05763C3.9848 5.26198 3.806 5.49188 3.69105 5.72177C3.55056 5.9772 3.4867 6.25818 3.4867 6.56471V6.78183H2.12012V6.56471C2.12012 6.09215 2.19675 5.68345 2.37556 5.35139C2.54159 4.99377 3.02692 4.47013 3.81877 3.76768L4.03589 3.52502C4.26578 3.23127 4.3935 2.92474 4.3935 2.59268C4.3935 2.14566 4.26578 1.80082 4.02312 1.54539C3.76768 1.28995 3.3973 1.16223 2.93751 1.16223C2.36278 1.16223 1.94131 1.34104 1.68588 1.71142C1.45599 2.01794 1.34104 2.45219 1.34104 3.01415H0C0 2.0818 0.268208 1.35381 0.804624 0.817395C1.34104 0.268208 2.0818 0 3.02692 0ZM2.79702 7.4715C3.06523 7.4715 3.29513 7.54814 3.47393 7.72694C3.65274 7.89297 3.74214 8.11009 3.74214 8.3783C3.74214 8.64651 3.63996 8.86363 3.46116 9.04244C3.28235 9.20847 3.05246 9.29787 2.79702 9.29787C2.54159 9.29787 2.3117 9.20847 2.13289 9.02966C1.95409 8.85086 1.86468 8.63374 1.86468 8.3783C1.86468 8.11009 1.95409 7.89297 2.13289 7.72694C2.3117 7.54814 2.54159 7.4715 2.79702 7.4715Z",
|
|
1067
|
+
p1ef03a80: "M37.2335 0L0 1.36763L2.51532e-05 1.84821L11.1151 3.88717H45.9426C45.9426 3.88717 43.655 2.00441 41.9069 1.27064C40.1984 0.553488 37.2335 0 37.2335 0Z",
|
|
1068
|
+
p1f0a8b80: "M12.384 16.5131L13.5919 19.7804L5.53628 15.0475L0 9.80712L4.68839 0L16.2136 2.46672L18.1372 12.4882L12.384 16.5131Z",
|
|
1069
|
+
pc8c3800: "M20.1765 0.253607C33.012 -1.61351 44.8948 7.02998 46.7175 19.5593C48.4249 31.2966 42.5453 43.4451 30.5232 52.3239C28.9507 53.4853 26.9161 53.8349 25.0603 53.2204C11.723 48.8038 1.93587 38.006 0.236102 26.321C-1.58649 13.7916 7.341 2.12077 20.1765 0.253607ZM31.7039 22.4479C31.0509 17.9594 26.8828 14.8497 22.3943 15.5026C17.906 16.1558 14.7971 20.3238 15.45 24.8122C16.1029 29.3007 20.271 32.4104 24.7595 31.7575C29.2479 31.1045 32.3567 26.9363 31.7039 22.4479Z"
|
|
1070
|
+
};
|
|
1071
|
+
var svgMaskLocation = "data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20viewBox%3D%220%200%20141%2034%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20id%3D%22Vector%2015474%22%20d%3D%22M63.0162%201.59199L33.3322%2011.1174C26.5004%2018.6125%201.41069%2012.2574%200.137186%2015.1228C-1.13631%2017.9882%206.77002%2028.5211%2010.8824%2033.4294L96.0699%2020.2936L135.174%206.05353L140.421%203.78071L117.14%200L85.5016%203.78071L63.0162%201.59199Z%22%20fill%3D%22var(--fill-0%2C%20%23D9D9D9)%22%20style%3D%22fill%3A%23D9D9D9%3Bfill%3Acolor(display-p3%200.8510%200.8510%200.8510)%3Bfill-opacity%3A1%3B%22%2F%3E%0A%3C%2Fsvg%3E%0A";
|
|
1072
|
+
function IllustrationNotLoggedIn() {
|
|
1073
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-[-20px] overflow-clip relative shrink-0 size-[160px]", children: [
|
|
1074
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[101.642px] left-[calc(20%-10.08px)] top-[calc(20%-0.28px)] w-[116.162px]", children: /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "", className: "absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none size-full", src: imgNotLoggedIn }) }),
|
|
1075
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex h-[calc(1px*((var(--transform-inner-width)*0.34325677156448364)+(var(--transform-inner-height)*0.9392415881156921)))] items-center justify-center left-[calc(40%+12.24px)] top-[calc(40%+3.06px)] w-[calc(1px*((var(--transform-inner-height)*0.34325677156448364)+(var(--transform-inner-width)*0.9392415881156921)))]", style: { "--transform-inner-width": "9.0625", "--transform-inner-height": "3.765625" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none rotate-[339.925deg]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[3.766px] relative w-[9.065px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-[-33.2%_-13.79%]", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 12 7", children: [
|
|
1076
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNotLoggedIn.p22057700, id: "Vector 15467", stroke: "url(#paint0_linear_80_22445)", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5" }),
|
|
1077
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_80_22445", x1: "1.55301", x2: "4.48867", y1: "-1.01401", y2: "10.0419", children: [
|
|
1078
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#111E42", style: { stopColor: "color(display-p3 0.0667 0.1176 0.2588)", stopOpacity: "1" } }),
|
|
1079
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#808CB6", style: { stopColor: "color(display-p3 0.5020 0.5490 0.7137)", stopOpacity: "1" } })
|
|
1080
|
+
] }) })
|
|
1081
|
+
] }) }) }) }) }),
|
|
1082
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex h-[calc(1px*((var(--transform-inner-width)*0.10811964422464371)+(var(--transform-inner-height)*0.9941378831863403)))] items-center justify-center left-[calc(40%-3.15px)] top-[calc(40%+5.69px)] w-[calc(1px*((var(--transform-inner-height)*0.10811964422464371)+(var(--transform-inner-width)*0.9941378831863403)))]", style: { "--transform-inner-width": "5.125", "--transform-inner-height": "0.703125" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none rotate-[186.207deg] scale-y-[-100%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[0.712px] relative w-[5.125px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-[-175.61%_-24.39%]", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 8 4", children: [
|
|
1083
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNotLoggedIn.p2e691e00, id: "Vector 15468", stroke: "url(#paint0_linear_80_22451)", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5" }),
|
|
1084
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_80_22451", x1: "1.42129", x2: "1.61837", y1: "0.822095", y2: "3.042", children: [
|
|
1085
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#111E42", style: { stopColor: "color(display-p3 0.0667 0.1176 0.2588)", stopOpacity: "1" } }),
|
|
1086
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#808CB6", style: { stopColor: "color(display-p3 0.5020 0.5490 0.7137)", stopOpacity: "1" } })
|
|
1087
|
+
] }) })
|
|
1088
|
+
] }) }) }) }) }),
|
|
1089
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex h-[calc(1px*((var(--transform-inner-width)*0.99418705701828)+(var(--transform-inner-height)*0.10766687989234924)))] items-center justify-center left-[calc(40%-11.43px)] top-[calc(40%+6.77px)] w-[calc(1px*((var(--transform-inner-height)*0.99418705701828)+(var(--transform-inner-width)*0.10766687989234924)))]", style: { "--transform-inner-width": "12.328125", "--transform-inner-height": "20.484375" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none rotate-[276.181deg]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[20.493px] relative w-[12.336px]", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 13 21", children: [
|
|
1090
|
+
/* @__PURE__ */ jsxRuntime.jsxs("g", { id: "Rectangle 1329138158", children: [
|
|
1091
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNotLoggedIn.p375bc00, fill: "url(#paint0_linear_80_22449)" }),
|
|
1092
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNotLoggedIn.p375bc00, fill: "url(#paint1_radial_80_22449)" })
|
|
1093
|
+
] }),
|
|
1094
|
+
/* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
|
|
1095
|
+
/* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_80_22449", x1: "5.91568", x2: "5.91568", y1: "2.70749", y2: "18.1353", children: [
|
|
1096
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#C5F1FF", style: { stopColor: "color(display-p3 0.7736 0.9434 1.0000)", stopOpacity: "1" } }),
|
|
1097
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0.539494", stopColor: "#65D9FF", style: { stopColor: "color(display-p3 0.3980 0.8495 1.0000)", stopOpacity: "1" } }),
|
|
1098
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#DEF7FF", stopOpacity: "0", style: { stopColor: "none", stopOpacity: "0" } })
|
|
1099
|
+
] }),
|
|
1100
|
+
/* @__PURE__ */ jsxRuntime.jsxs("radialGradient", { cx: "0", cy: "0", gradientTransform: "translate(8.66006 2.98688) rotate(131.772) scale(1.49904 2.72021)", gradientUnits: "userSpaceOnUse", id: "paint1_radial_80_22449", r: "1", children: [
|
|
1101
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "white", stopOpacity: "0.93", style: { stopColor: "white", stopOpacity: "0.93" } }),
|
|
1102
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "white", stopOpacity: "0", style: { stopColor: "none", stopOpacity: "0" } })
|
|
1103
|
+
] })
|
|
1104
|
+
] })
|
|
1105
|
+
] }) }) }) }),
|
|
1106
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[7px] left-[calc(20%+10.49px)] top-[calc(40%-7.03px)] w-[8px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-[-10.71%_-3.64%_-10.71%_-4.47%]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 9 9", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNotLoggedIn.p9a5c900, id: "Vector 15081", stroke: "var(--stroke-0, #6B6B6B)", strokeLinejoin: "round", strokeWidth: "1.5", style: { stroke: "color(display-p3 0.4181 0.4181 0.4181)", strokeOpacity: "1" } }) }) }) }),
|
|
1107
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[15.167px] left-[calc(20%-6.85px)] top-[calc(20%+8.05px)] w-[17.333px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-[-4.95%_-1.68%_-4.95%_-2.06%]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 18 17", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNotLoggedIn.p952fc80, id: "Vector 15082", stroke: "var(--stroke-0, #6B6B6B)", strokeLinejoin: "round", strokeWidth: "1.5", style: { stroke: "color(display-p3 0.4181 0.4181 0.4181)", strokeOpacity: "1" } }) }) }) })
|
|
1108
|
+
] });
|
|
1109
|
+
}
|
|
1110
|
+
function IllustrationNetworkError() {
|
|
1111
|
+
const Group = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[50.834px] relative w-[54.286px]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 55 51", children: /* @__PURE__ */ jsxRuntime.jsxs("g", { id: "Group 2147224758", children: [
|
|
1112
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNetwork.p26c007c0, fill: "var(--fill-0, #00CCFF)", id: "Subtract", style: { fill: "color(display-p3 0.0000 0.8000 1.0000)", fillOpacity: "1" } }),
|
|
1113
|
+
/* @__PURE__ */ jsxRuntime.jsxs("g", { id: "Vector", children: [
|
|
1114
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNetwork.p1db48f00, fill: "var(--fill-0, white)", style: { fill: "white", fillOpacity: "1" } }),
|
|
1115
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNetwork.p2d57ae00, fill: "var(--fill-0, white)", style: { fill: "white", fillOpacity: "1" } }),
|
|
1116
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNetwork.pd470e00, fill: "var(--fill-0, white)", style: { fill: "white", fillOpacity: "1" } })
|
|
1117
|
+
] }),
|
|
1118
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNetwork.p1214e8f0, fill: "var(--fill-0, #00CCFF)", id: "Vector 15453", style: { fill: "color(display-p3 0.0000 0.8000 1.0000)", fillOpacity: "1" } })
|
|
1119
|
+
] }) }) });
|
|
1120
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-[-20px] overflow-clip relative shrink-0 size-[160px]", children: [
|
|
1121
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[85px] left-[calc(20%-0.28px)] top-[calc(20%+5px)] w-[97.143px]", children: /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "", className: "absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none size-full", src: imgNetwork1 }) }),
|
|
1122
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[15.861px] left-[calc(40%+0.13px)] top-[calc(40%+5.6px)] w-[35.446px]", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 36 16", children: [
|
|
1123
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNetwork.p3261a780, fill: "url(#paint0_linear_80_22551)", id: "Vector 15466" }),
|
|
1124
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_80_22551", x1: "17.7229", x2: "17.7229", y1: "1.91361e-10", y2: "15.861", children: [
|
|
1125
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#FBFCFF", style: { stopColor: "color(display-p3 0.9843 0.9882 1.0000)", stopOpacity: "1" } }),
|
|
1126
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#F9F9FE", style: { stopColor: "color(display-p3 0.9765 0.9765 0.9961)", stopOpacity: "1" } })
|
|
1127
|
+
] }) })
|
|
1128
|
+
] }) }),
|
|
1129
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex h-[calc(1px*((var(--transform-inner-width)*0.14709778130054474)+(var(--transform-inner-height)*0.9891219735145569)))] items-center justify-center left-[calc(40%+3.33px)] top-[calc(40%+11.94px)] w-[calc(1px*((var(--transform-inner-height)*0.14709778130054474)+(var(--transform-inner-width)*0.9891219735145569)))]", style: { "--transform-inner-width": "6.921875", "--transform-inner-height": "7.828125" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none rotate-[351.541deg]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[7.83px] relative w-[6.929px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-[-15.97%_-18.04%_-15.96%_-18.05%]", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 10 11", children: [
|
|
1130
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNetwork.p137e7700, id: "Vector 15467", stroke: "url(#paint0_linear_80_22547)", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5" }),
|
|
1131
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_80_22547", x1: "4.71478", x2: "4.71478", y1: "1.25034", y2: "9.08062", children: [
|
|
1132
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#111E42", style: { stopColor: "color(display-p3 0.0667 0.1176 0.2588)", stopOpacity: "1" } }),
|
|
1133
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#808CB6", style: { stopColor: "color(display-p3 0.5020 0.5490 0.7137)", stopOpacity: "1" } })
|
|
1134
|
+
] }) })
|
|
1135
|
+
] }) }) }) }) }),
|
|
1136
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex h-[calc(1px*((var(--transform-inner-width)*0.26151159405708313)+(var(--transform-inner-height)*0.9652003049850464)))] items-center justify-center left-[calc(40%+23.29px)] top-[calc(40%+8.44px)] w-[calc(1px*((var(--transform-inner-height)*0.26151159405708313)+(var(--transform-inner-width)*0.9652003049850464)))]", style: { "--transform-inner-width": "6.921875", "--transform-inner-height": "7.828125" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none rotate-[164.84deg] scale-y-[-100%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[7.83px] relative w-[6.929px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-[-15.97%_-18.04%_-15.96%_-18.05%]", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 10 11", children: [
|
|
1137
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNetwork.p137e7700, id: "Vector 15468", stroke: "url(#paint0_linear_80_22527)", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5" }),
|
|
1138
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_80_22527", x1: "4.71478", x2: "4.71478", y1: "1.25034", y2: "9.08062", children: [
|
|
1139
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#111E42", style: { stopColor: "color(display-p3 0.0667 0.1176 0.2588)", stopOpacity: "1" } }),
|
|
1140
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#808CB6", style: { stopColor: "color(display-p3 0.5020 0.5490 0.7137)", stopOpacity: "1" } })
|
|
1141
|
+
] }) })
|
|
1142
|
+
] }) }) }) }) }),
|
|
1143
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[37.73px] left-[calc(60%+17.8px)] top-[calc(40%+8.99px)] w-[23.303px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-[-3.45%_-5.58%]", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 26 41", children: [
|
|
1144
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNetwork.p28dc7e00, id: "Vector 15454", stroke: "url(#paint0_linear_80_22545)", strokeLinecap: "round", strokeWidth: "2.60204" }),
|
|
1145
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_80_22545", x1: "1.30114", x2: "24.6044", y1: "28.8709", y2: "39.0307", children: [
|
|
1146
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#5E7A8E", style: { stopColor: "color(display-p3 0.3696 0.4765 0.5582)", stopOpacity: "1" } }),
|
|
1147
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#5E7A8E", stopOpacity: "0", style: { stopColor: "none", stopOpacity: "0" } })
|
|
1148
|
+
] }) })
|
|
1149
|
+
] }) }) }),
|
|
1150
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex h-[24.286px] items-center justify-center left-[calc(20%-4.67px)] top-[calc(40%+22.44px)] w-[24.38px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none rotate-[180deg] scale-y-[-100%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[24.286px] relative w-[24.38px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-[-5.36%_-5.34%]", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 27 27", children: [
|
|
1151
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNetwork.p91e2fc0, id: "Vector 15455", stroke: "url(#paint0_linear_80_22543)", strokeLinecap: "round", strokeWidth: "2.60204" }),
|
|
1152
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_80_22543", x1: "3.12903", x2: "21.0963", y1: "19.846", y2: "32.236", children: [
|
|
1153
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#5E7A8E", style: { stopColor: "color(display-p3 0.3696 0.4765 0.5582)", stopOpacity: "1" } }),
|
|
1154
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#5E7A8E", stopOpacity: "0", style: { stopColor: "none", stopOpacity: "0" } })
|
|
1155
|
+
] }) })
|
|
1156
|
+
] }) }) }) }) }),
|
|
1157
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[12.449px] left-[calc(20%-13px)] opacity-[0.45] top-[calc(60%+12.1px)] w-[122px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "", className: "absolute h-[980%] left-0 max-w-none top-[-705%] w-full", src: imgNetwork2 }) }) }),
|
|
1158
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex h-[calc(1px*((var(--transform-inner-width)*0.16029761731624603)+(var(--transform-inner-height)*0.9870687127113342)))] items-center justify-center left-[calc(20%-1.31px)] top-[7.26px] w-[calc(1px*((var(--transform-inner-height)*0.16029761731624603)+(var(--transform-inner-width)*0.9870687127113342)))]", style: { "--transform-inner-width": "54.28125", "--transform-inner-height": "50.828125" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none rotate-[189.224deg] scale-y-[-100%]", children: /* @__PURE__ */ jsxRuntime.jsx(Group, {}) }) }),
|
|
1159
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[9.013px] left-[calc(20%+10.94px)] top-[calc(40%+3.94px)] w-[5.167px]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 6 10", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNetwork.p24da3e80, fill: "var(--fill-0, #00CCFF)", id: "Vector 15456", style: { fill: "color(display-p3 0.0000 0.8000 1.0000)", fillOpacity: "1" } }) }) }),
|
|
1160
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex h-[calc(1px*((var(--transform-inner-width)*0.6759710907936096)+(var(--transform-inner-height)*0.7369280457496643)))] items-center justify-center left-[calc(20%+0.29px)] top-[calc(40%+6.69px)] w-[calc(1px*((var(--transform-inner-height)*0.6759710907936096)+(var(--transform-inner-width)*0.7369280457496643)))]", style: { "--transform-inner-width": "5.21875", "--transform-inner-height": "10.484375" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none rotate-[317.47deg]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[10.49px] relative w-[5.22px]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 6 11", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNetwork.p32471600, fill: "var(--fill-0, #00CCFF)", id: "Vector 15457", style: { fill: "color(display-p3 0.0000 0.8000 1.0000)", fillOpacity: "1" } }) }) }) }) }),
|
|
1161
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex h-[calc(1px*((var(--transform-inner-width)*0.08017818629741669)+(var(--transform-inner-height)*0.9967805743217468)))] items-center justify-center left-[calc(60%+14.91px)] top-[calc(40%-1.95px)] w-[calc(1px*((var(--transform-inner-height)*0.08017818629741669)+(var(--transform-inner-width)*0.9967805743217468)))]", style: { "--transform-inner-width": "1.015625", "--transform-inner-height": "3.796875" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none rotate-[355.401deg]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[#b1b1b1] h-[3.812px] rounded-[5px] w-[1.029px]" }) }) }),
|
|
1162
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex h-[calc(1px*((var(--transform-inner-width)*0.08017818629741669)+(var(--transform-inner-height)*0.9967805743217468)))] items-center justify-center left-[calc(60%+18.47px)] top-[calc(40%-2.24px)] w-[calc(1px*((var(--transform-inner-height)*0.08017818629741669)+(var(--transform-inner-width)*0.9967805743217468)))]", style: { "--transform-inner-width": "1.015625", "--transform-inner-height": "3.796875" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none rotate-[355.401deg]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[#b1b1b1] h-[3.812px] rounded-[5px] w-[1.029px]" }) }) }),
|
|
1163
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex h-[calc(1px*((var(--transform-inner-width)*0.08017818629741669)+(var(--transform-inner-height)*0.9967805743217468)))] items-center justify-center left-[calc(60%+12.83px)] top-[calc(40%+0.36px)] w-[calc(1px*((var(--transform-inner-height)*0.08017818629741669)+(var(--transform-inner-width)*0.9967805743217468)))]", style: { "--transform-inner-width": "9.15625", "--transform-inner-height": "8.078125" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none rotate-[355.401deg]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[#d7d7d7] h-[8.082px] rounded-bl-[5px] rounded-br-[5px] rounded-tl-[1px] rounded-tr-[1px] w-[9.17px]" }) }) }),
|
|
1164
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex h-[calc(1px*((var(--transform-inner-width)*0.4104115962982178)+(var(--transform-inner-height)*0.9119004607200623)))] items-center justify-center left-[calc(20%+9.03px)] top-[calc(40%+14.41px)] w-[calc(1px*((var(--transform-inner-height)*0.4104115962982178)+(var(--transform-inner-width)*0.9119004607200623)))]", style: { "--transform-inner-width": "9.15625", "--transform-inner-height": "5.640625" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none rotate-[335.769deg]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[#d7d7d7] h-[5.651px] rounded-bl-[5px] rounded-br-[5px] rounded-tl-[1px] rounded-tr-[1px] w-[9.17px]" }) }) }),
|
|
1165
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex h-[calc(1px*((var(--transform-inner-width)*0.08017818629741669)+(var(--transform-inner-height)*0.9967805743217468)))] items-center justify-center left-[calc(60%+15.23px)] top-[calc(40%+7.54px)] w-[calc(1px*((var(--transform-inner-height)*0.08017818629741669)+(var(--transform-inner-width)*0.9967805743217468)))]", style: { "--transform-inner-width": "5.328125", "--transform-inner-height": "2" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none rotate-[355.401deg]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[#c3c3c3] h-[2px] rounded-[5px] w-[5.331px]" }) }) }),
|
|
1166
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex h-[calc(1px*((var(--transform-inner-width)*0.4104115962982178)+(var(--transform-inner-height)*0.9119004607200623)))] items-center justify-center left-[calc(20%+12.6px)] top-[calc(40%+19.44px)] w-[calc(1px*((var(--transform-inner-height)*0.4104115962982178)+(var(--transform-inner-width)*0.9119004607200623)))]", style: { "--transform-inner-width": "5.328125", "--transform-inner-height": "2" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none rotate-[335.769deg]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[#c3c3c3] h-[2px] rounded-[5px] w-[5.331px]" }) }) })
|
|
1167
|
+
] });
|
|
1168
|
+
}
|
|
1169
|
+
function IllustrationGeneric() {
|
|
1170
|
+
const Group = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[20.755px] left-[63.64px] top-[4.55px] w-[33.637px]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 34 21", children: /* @__PURE__ */ jsxRuntime.jsx("g", { id: "Group 2147224756", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgGeneric.peb6ca00, fill: "var(--fill-0, #CCCCCC)", id: "Subtract", opacity: "0.5", style: { fill: "color(display-p3 0.8013 0.8013 0.8013)", fillOpacity: "1" } }) }) }) });
|
|
1171
|
+
const Group1 = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute contents left-[-10px] top-[-4.55px]", children: [
|
|
1172
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[20.909px] left-[-3.64px] top-[67.27px] w-[87.273px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-[-17.39%_-4.17%]", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 95 29", children: [
|
|
1173
|
+
/* @__PURE__ */ jsxRuntime.jsx("g", { filter: "url(#filter0_f_80_22721)", id: "Vector 15443", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgGeneric.p3435b100, fill: "url(#paint0_linear_80_22721)" }) }),
|
|
1174
|
+
/* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
|
|
1175
|
+
/* @__PURE__ */ jsxRuntime.jsxs("filter", { colorInterpolationFilters: "sRGB", filterUnits: "userSpaceOnUse", height: "28.1818", id: "filter0_f_80_22721", width: "94.5455", x: "0", y: "0", children: [
|
|
1176
|
+
/* @__PURE__ */ jsxRuntime.jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
|
|
1177
|
+
/* @__PURE__ */ jsxRuntime.jsx("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", mode: "normal", result: "shape" }),
|
|
1178
|
+
/* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { result: "effect1_foregroundBlur_80_22721", stdDeviation: "1.81818" })
|
|
1179
|
+
] }),
|
|
1180
|
+
/* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_80_22721", x1: "4.52238", x2: "54.1726", y1: "4.52611", y2: "19.0938", children: [
|
|
1181
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#C3C3C3", stopOpacity: "0", style: { stopColor: "none", stopOpacity: "0" } }),
|
|
1182
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0.426356", stopColor: "#8A8A8A", stopOpacity: "0.542102", style: { stopColor: "color(display-p3 0.5411 0.5411 0.5411)", stopOpacity: "0.542102" } }),
|
|
1183
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#CCCCCC", style: { stopColor: "color(display-p3 0.8014 0.8014 0.8014)", stopOpacity: "1" } })
|
|
1184
|
+
] })
|
|
1185
|
+
] })
|
|
1186
|
+
] }) }) }),
|
|
1187
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[43.182px] left-[11.82px] top-[44.55px] w-[74.091px]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 75 44", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgGeneric.p3921f100, fill: "var(--fill-0, #BBBBBB)", id: "Vector 15450", style: { fill: "color(display-p3 0.7333 0.7333 0.7333)", fillOpacity: "1" } }) }) }),
|
|
1188
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[100.227px] left-[-10px] top-[-4.55px] w-[114.545px]", children: /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "", className: "absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none size-full", src: imgGeneric }) }),
|
|
1189
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[38.179px] left-[44.55px] top-[49.55px] w-[41.364px]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 42 39", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgGeneric.p1b9b8400, fill: "var(--fill-0, #EAEAEA)", id: "Vector 15444", style: { fill: "color(display-p3 0.9188 0.9188 0.9188)", fillOpacity: "1" } }) }) }),
|
|
1190
|
+
/* @__PURE__ */ jsxRuntime.jsx(Group, {}),
|
|
1191
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[36.364px] left-[11.82px] top-[51.36px] w-[32.727px]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 33 37", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgGeneric.p36984100, fill: "var(--fill-0, #D9D9D9)", id: "Vector 15445", style: { fill: "color(display-p3 0.8510 0.8510 0.8510)", fillOpacity: "1" } }) }) }),
|
|
1192
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[30px] left-[44.55px] top-[49.55px] w-[41.364px]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 42 30", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgGeneric.p387fd0f1, fill: "var(--fill-0, #D5D5D5)", id: "Vector 15448", style: { fill: "color(display-p3 0.8341 0.8341 0.8341)", fillOpacity: "1" } }) }) }),
|
|
1193
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[26.363px] left-[44.55px] top-[49.55px] w-[48.182px]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 49 27", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgGeneric.p2b0e2af0, fill: "var(--fill-0, #EAEAEA)", id: "Vector 15446", style: { fill: "color(display-p3 0.9188 0.9188 0.9188)", fillOpacity: "1" } }) }) }),
|
|
1194
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[25.909px] left-[11.82px] top-[51.36px] w-[32.727px]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 33 26", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgGeneric.pe91a400, fill: "var(--fill-0, #BFBFBF)", id: "Vector 15447", style: { fill: "color(display-p3 0.7490 0.7490 0.7490)", fillOpacity: "1" } }) }) }),
|
|
1195
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[24.091px] left-[4.55px] top-[51.36px] w-[40px]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 40 25", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgGeneric.p3182d400, fill: "var(--fill-0, #D9D9D9)", id: "Vector 15449", style: { fill: "color(display-p3 0.8510 0.8510 0.8510)", fillOpacity: "1" } }) }) })
|
|
1196
|
+
] });
|
|
1197
|
+
const Frame2 = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 size-[100px] top-1/2 translate-x-[-50%] translate-y-[-50%]", children: /* @__PURE__ */ jsxRuntime.jsx(Group1, {}) });
|
|
1198
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-[-20px] overflow-clip relative shrink-0 size-[160px]", children: /* @__PURE__ */ jsxRuntime.jsx(Frame2, {}) });
|
|
1199
|
+
}
|
|
1200
|
+
function IllustrationNoPlan() {
|
|
1201
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-[-20px] overflow-clip relative shrink-0 size-[160px]", children: [
|
|
1202
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[79.673px] left-[calc(20%-13px)] top-[calc(20%-8.55px)] w-[122px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "", className: "absolute h-[153.13%] left-0 max-w-none top-[-10.16%] w-full", src: imgNoPlan }) }) }),
|
|
1203
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[15.109px] left-[calc(20%+14.88px)] top-[calc(20%-0.44px)] w-[14.327px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-[-6.62%_-6.98%_-5.78%_-5.85%]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 17 17", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNoPlan.pf17a1b0, id: "Vector 15080", stroke: "var(--stroke-0, #6B6B6B)", strokeWidth: "2", style: { stroke: "color(display-p3 0.4181 0.4181 0.4181)", strokeOpacity: "1" } }) }) }) }),
|
|
1204
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[12.449px] left-[calc(20%-13px)] opacity-[0.45] top-[calc(60%+12.1px)] w-[122px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "", className: "absolute h-[980%] left-0 max-w-none top-[-705%] w-full", src: imgNoPlan }) }) })
|
|
1205
|
+
] });
|
|
1206
|
+
}
|
|
1207
|
+
function IllustrationNoComment() {
|
|
1208
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-[-20px] overflow-clip relative shrink-0 size-[160px]", children: [
|
|
1209
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[101.642px] left-[calc(20%-9.79px)] top-[calc(20%+9.68px)] w-[116.162px]", children: /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "", className: "absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none size-full", src: imgNoComment }) }),
|
|
1210
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[11.489px] left-[calc(40%-1.69px)] top-[calc(60%-5.12px)] w-[11.1px]", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 12 12", children: [
|
|
1211
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNoComment.p2dd0a400, fill: "url(#paint0_linear_80_22873)", id: "Rectangle 1329138157" }),
|
|
1212
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_80_22873", x1: "5.30908", x2: "5.30908", y1: "-0.124756", y2: "11.489", children: [
|
|
1213
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#95E4FF", style: { stopColor: "color(display-p3 0.5829 0.8957 1.0000)", stopOpacity: "1" } }),
|
|
1214
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#DEF7FF", style: { stopColor: "color(display-p3 0.8691 0.9673 1.0000)", stopOpacity: "1" } })
|
|
1215
|
+
] }) })
|
|
1216
|
+
] }) }),
|
|
1217
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[11.531px] left-[calc(40%+23.97px)] top-[calc(60%-5.16px)] w-[11.059px]", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 12 12", children: [
|
|
1218
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNoComment.p1f020300, fill: "url(#paint0_linear_80_22861)", id: "Rectangle 1329138158" }),
|
|
1219
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_80_22861", x1: "5.34351", x2: "5.34351", y1: "-0.0825195", y2: "11.5313", children: [
|
|
1220
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#95E4FF", style: { stopColor: "color(display-p3 0.5829 0.8957 1.0000)", stopOpacity: "1" } }),
|
|
1221
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#DEF7FF", style: { stopColor: "color(display-p3 0.8691 0.9673 1.0000)", stopOpacity: "1" } })
|
|
1222
|
+
] }) })
|
|
1223
|
+
] }) }),
|
|
1224
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex h-[calc(1px*((var(--transform-inner-width)*0.12505891919136047)+(var(--transform-inner-height)*0.992149293422699)))] items-center justify-center left-[calc(40%+13.18px)] top-[calc(20%-1.42px)] w-[calc(1px*((var(--transform-inner-height)*0.12505891919136047)+(var(--transform-inner-width)*0.992149293422699)))]", style: { "--transform-inner-width": "32.40625", "--transform-inner-height": "21.921875" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none rotate-[352.816deg]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[21.93px] relative w-[32.419px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-[-2.04%_-1.86%_-3.32%_-0.56%]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 34 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNoComment.p1f0f3180, id: "Vector 15464", stroke: "var(--stroke-0, #6B6B6B)", strokeWidth: "1.5", style: { stroke: "color(display-p3 0.4181 0.4181 0.4181)", strokeOpacity: "1" } }) }) }) }) }) }),
|
|
1225
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex h-[calc(1px*((var(--transform-inner-width)*0.12505891919136047)+(var(--transform-inner-height)*0.992149293422699)))] items-center justify-center left-[calc(60%+1.47px)] top-[calc(20%+0.53px)] w-[calc(1px*((var(--transform-inner-height)*0.12505891919136047)+(var(--transform-inner-width)*0.992149293422699)))]", style: { "--transform-inner-width": "15.015625", "--transform-inner-height": "11.53125" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none rotate-[352.816deg]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[11.533px] relative w-[15.031px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-[-3.21%_-4.34%_-6.26%_-1.35%]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 16 13", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNoComment.p200381c0, id: "Vector 15465", stroke: "var(--stroke-0, #6B6B6B)", strokeWidth: "1.5", style: { stroke: "color(display-p3 0.4181 0.4181 0.4181)", strokeOpacity: "1" } }) }) }) }) }) }),
|
|
1226
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex h-[calc(1px*((var(--transform-inner-width)*0.5137559771537781)+(var(--transform-inner-height)*0.8579363226890564)))] items-center justify-center left-[calc(20%+11.11px)] top-[calc(20%+19.14px)] w-[calc(1px*((var(--transform-inner-height)*0.5137559771537781)+(var(--transform-inner-width)*0.8579363226890564)))]", style: { "--transform-inner-width": "20.296875", "--transform-inner-height": "15.015625" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none rotate-[30.914deg]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[15.031px] relative w-[20.303px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-[-2.53%_-3.18%_-4.81%_-0.97%]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 22 17", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgNoComment.p198508c0, id: "Vector 15466", stroke: "var(--stroke-0, #6B6B6B)", strokeWidth: "1.5", style: { stroke: "color(display-p3 0.4181 0.4181 0.4181)", strokeOpacity: "1" } }) }) }) }) }) })
|
|
1227
|
+
] });
|
|
1228
|
+
}
|
|
1229
|
+
function IllustrationLocation() {
|
|
1230
|
+
const MaskGroup = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute contents left-[4.23px] top-[calc(60%+2.52px)]", "data-name": "Mask group", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[168.216px] left-[calc(50%-3.87px)] mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-position-[8.097px_95.504px] mask-size-[140.421px_33.429px] top-[3.02px] translate-x-[-50%] w-[160px]", "data-name": "2 5", style: { maskImage: `url('${svgMaskLocation}')` }, children: /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "", className: "absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none size-full", src: imgLocationMap }) }) });
|
|
1231
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-[-20px] overflow-clip relative shrink-0 size-[160px]", children: [
|
|
1232
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex h-[calc(1px*((var(--transform-inner-width)*0.05882693827152252)+(var(--transform-inner-height)*0.9982682466506958)))] items-center justify-center left-[calc(40%+8.62px)] top-[calc(40%-0.98px)] w-[calc(1px*((var(--transform-inner-height)*0.05882693827152252)+(var(--transform-inner-width)*0.9982682466506958)))]", style: { "--transform-inner-width": "52.90625", "--transform-inner-height": "52.90625" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none rotate-[3.372deg]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative size-[52.909px]", "data-name": "73 1 1", children: /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "", className: "absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none size-full", src: imgLocationAvatar }) }) }) }),
|
|
1233
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[3.887px] left-[calc(40%+16.58px)] top-[calc(60%+8.79px)] w-[45.943px]", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 46 4", children: [
|
|
1234
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgLocation.p1ef03a80, fill: "url(#paint0_linear_80_22939)", id: "Vector 15475" }),
|
|
1235
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_80_22939", x1: "22.9713", x2: "22.9713", y1: "0.000161142", y2: "3.88717", children: [
|
|
1236
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#7C7C7C", style: { stopColor: "color(display-p3 0.4874 0.4874 0.4874)", stopOpacity: "1" } }),
|
|
1237
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#A5AEAE", stopOpacity: "0", style: { stopColor: "none", stopOpacity: "0" } })
|
|
1238
|
+
] }) })
|
|
1239
|
+
] }) }),
|
|
1240
|
+
/* @__PURE__ */ jsxRuntime.jsx(MaskGroup, {}),
|
|
1241
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[53.519px] left-[calc(20%+11.24px)] top-[calc(20%+19.7px)] w-[47.009px]", "data-name": "Subtract", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 47 54", children: [
|
|
1242
|
+
/* @__PURE__ */ jsxRuntime.jsx("g", { filter: "url(#filter0_i_80_22931)", id: "Subtract", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgLocation.pc8c3800, fill: "url(#paint0_linear_80_22931)" }) }),
|
|
1243
|
+
/* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
|
|
1244
|
+
/* @__PURE__ */ jsxRuntime.jsxs("filter", { colorInterpolationFilters: "sRGB", filterUnits: "userSpaceOnUse", height: "55.5193", id: "filter0_i_80_22931", width: "48.0078", x: "-1", y: "-2", children: [
|
|
1245
|
+
/* @__PURE__ */ jsxRuntime.jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
|
|
1246
|
+
/* @__PURE__ */ jsxRuntime.jsx("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", mode: "normal", result: "shape" }),
|
|
1247
|
+
/* @__PURE__ */ jsxRuntime.jsx("feColorMatrix", { in: "SourceAlpha", result: "hardAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" }),
|
|
1248
|
+
/* @__PURE__ */ jsxRuntime.jsx("feOffset", { dx: "-1", dy: "-2" }),
|
|
1249
|
+
/* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "1.9" }),
|
|
1250
|
+
/* @__PURE__ */ jsxRuntime.jsx("feComposite", { in2: "hardAlpha", k2: "-1", k3: "1", operator: "arithmetic" }),
|
|
1251
|
+
/* @__PURE__ */ jsxRuntime.jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" }),
|
|
1252
|
+
/* @__PURE__ */ jsxRuntime.jsx("feBlend", { in2: "shape", mode: "normal", result: "effect1_innerShadow_80_22931" })
|
|
1253
|
+
] }),
|
|
1254
|
+
/* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_80_22931", x1: "20.1764", x2: "28.0058", y1: "0.253481", y2: "54.0753", children: [
|
|
1255
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#EAEAEA", style: { stopColor: "color(display-p3 0.9176 0.9176 0.9176)", stopOpacity: "1" } }),
|
|
1256
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#CACACA", style: { stopColor: "color(display-p3 0.7935 0.7935 0.7935)", stopOpacity: "1" } })
|
|
1257
|
+
] })
|
|
1258
|
+
] })
|
|
1259
|
+
] }) }),
|
|
1260
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex h-[calc(1px*((var(--transform-inner-width)*0.2092834711074829)+(var(--transform-inner-height)*0.9778549671173096)))] items-center justify-center left-[calc(60%+12.09px)] top-[calc(40%-9.34px)] w-[calc(1px*((var(--transform-inner-height)*0.2092834711074829)+(var(--transform-inner-width)*0.9778549671173096)))]", style: { "--transform-inner-width": "18.125", "--transform-inner-height": "19.765625" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none rotate-[192.08deg] scale-y-[-100%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[19.78px] relative w-[18.137px]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 19 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgLocation.p1f0a8b80, fill: "var(--fill-0, #00CCFF)", id: "Vector 15453", style: { fill: "color(display-p3 0.0000 0.8000 1.0000)", fillOpacity: "1" } }) }) }) }) }),
|
|
1261
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute h-[9.298px] left-[calc(60%+19.75px)] top-[calc(40%-3.69px)] w-[5.786px]", "data-name": "\uFF1F", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 6 10", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgLocation.p191f4380, fill: "var(--fill-0, white)", id: "\xEF\xBC\x9F", style: { fill: "white", fillOpacity: "1" } }) }) })
|
|
1262
|
+
] });
|
|
1263
|
+
}
|
|
1264
|
+
function EmptyState({
|
|
1265
|
+
variant = "generic",
|
|
1266
|
+
title,
|
|
1267
|
+
description,
|
|
1268
|
+
className
|
|
1269
|
+
}) {
|
|
1270
|
+
let defaultTitle = "\u901A\u7528\u7A7A\u72B6\u6001";
|
|
1271
|
+
let defaultDesc = "\u4F60\u53EF\u4EE5\u53BB\u770B\u5468\u8FB9\u70ED\u95E8";
|
|
1272
|
+
let Illustration = IllustrationGeneric;
|
|
1273
|
+
switch (variant) {
|
|
1274
|
+
case "not-logged-in":
|
|
1275
|
+
defaultTitle = "\u672A\u767B\u5F55";
|
|
1276
|
+
defaultDesc = "\u4F60\u53EF\u4EE5\u53BB\u770B\u5468\u8FB9\u70ED\u95E8";
|
|
1277
|
+
Illustration = IllustrationNotLoggedIn;
|
|
1278
|
+
break;
|
|
1279
|
+
case "network-error":
|
|
1280
|
+
defaultTitle = "\u7F51\u7EDC\u597D\u50CF\u6709\u70B9\u95EE\u9898";
|
|
1281
|
+
defaultDesc = "\u6211\u662F\u526F\u6807\u9898";
|
|
1282
|
+
Illustration = IllustrationNetworkError;
|
|
1283
|
+
break;
|
|
1284
|
+
case "no-plan":
|
|
1285
|
+
defaultTitle = "\u6682\u65E0\u8BA1\u5212";
|
|
1286
|
+
defaultDesc = "\u4F60\u53EF\u4EE5\u53BB\u770B\u5468\u8FB9\u70ED\u95E8";
|
|
1287
|
+
Illustration = IllustrationNoPlan;
|
|
1288
|
+
break;
|
|
1289
|
+
case "no-comment":
|
|
1290
|
+
defaultTitle = "\u6682\u65E0\u8BC4\u8BBA";
|
|
1291
|
+
defaultDesc = "\u6211\u662F\u526F\u6807\u9898";
|
|
1292
|
+
Illustration = IllustrationNoComment;
|
|
1293
|
+
break;
|
|
1294
|
+
case "location-related":
|
|
1295
|
+
defaultTitle = "\u4F4D\u7F6E\u76F8\u5173";
|
|
1296
|
+
defaultDesc = "\u4F60\u53EF\u4EE5\u53BB\u770B\u5468\u8FB9\u70ED\u95E8";
|
|
1297
|
+
Illustration = IllustrationLocation;
|
|
1298
|
+
break;
|
|
1299
|
+
case "generic":
|
|
1300
|
+
default:
|
|
1301
|
+
defaultTitle = "\u901A\u7528\u7A7A\u72B6\u6001";
|
|
1302
|
+
defaultDesc = "\u4F60\u53EF\u4EE5\u53BB\u770B\u5468\u8FB9\u70ED\u95E8";
|
|
1303
|
+
Illustration = IllustrationGeneric;
|
|
1304
|
+
break;
|
|
1305
|
+
}
|
|
1306
|
+
const displayTitle = title ?? defaultTitle;
|
|
1307
|
+
const displayDesc = description ?? defaultDesc;
|
|
1308
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("content-stretch flex flex-col items-center relative w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "box-border content-stretch flex flex-col items-center pb-[20px] pt-0 px-0 relative shrink-0 w-full", children: [
|
|
1309
|
+
/* @__PURE__ */ jsxRuntime.jsx(Illustration, {}),
|
|
1310
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "box-border content-stretch flex flex-col gap-[4px] items-start leading-[0] mb-[-20px] not-italic relative shrink-0 text-center w-full", children: [
|
|
1311
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col font-['PingFang_SC:Medium',sans-serif] justify-center relative shrink-0 text-[16px] text-black w-full", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "leading-[24px]", children: displayTitle }) }),
|
|
1312
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col font-['PingFang_SC:Regular',sans-serif] justify-center relative shrink-0 text-[14px] text-[rgba(60,60,67,0.6)] w-full", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "leading-[20px]", children: displayDesc }) })
|
|
1313
|
+
] })
|
|
1314
|
+
] }) });
|
|
1315
|
+
}
|
|
1316
|
+
var svgPaths3 = {
|
|
1317
|
+
compass: "M11.9999 2C17.5227 2 21.9999 6.47715 21.9999 12C21.9999 17.5228 17.5227 22 11.9999 22C6.47703 22 1.99988 17.5228 1.99988 12C1.99988 6.47715 6.47703 2 11.9999 2ZM16.5067 7.01465C16.3898 6.98914 16.2674 6.9976 16.1552 7.03906L16.1493 7.04102V7.04199L16.1464 7.04297C16.144 7.04388 16.1399 7.04517 16.1356 7.04688C16.1262 7.05063 16.1115 7.05633 16.0936 7.06348C16.057 7.0781 16.0028 7.10031 15.9344 7.12793C15.7969 7.18352 15.5982 7.26446 15.3583 7.36426C14.8781 7.564 14.2259 7.84171 13.5419 8.15234C12.8583 8.4628 12.1383 8.80775 11.5233 9.14258C10.9197 9.47126 10.3886 9.80516 10.1005 10.0977C9.80022 10.3922 9.46148 10.9289 9.12976 11.5371C8.79351 12.1537 8.44911 12.8729 8.1405 13.5547C7.83172 14.2369 7.55665 14.8855 7.35925 15.3633C7.26055 15.6022 7.18069 15.7997 7.12585 15.9365C7.09858 16.0046 7.07774 16.0584 7.06335 16.0947C7.0562 16.1128 7.05045 16.1273 7.04675 16.1367C7.04498 16.1412 7.04278 16.1451 7.04187 16.1475L7.04089 16.1494V16.1504L7.03992 16.1533C6.99764 16.2657 6.98849 16.3885 7.01355 16.5059C7.03871 16.6234 7.09686 16.7321 7.18152 16.8174C7.26658 16.9028 7.37523 16.962 7.49304 16.9873C7.6108 17.0125 7.73403 17.0028 7.84656 16.96L7.84949 16.959L7.85046 16.958L7.85339 16.957C7.85574 16.9561 7.85984 16.9548 7.86414 16.9531C7.87356 16.9494 7.88813 16.9437 7.90613 16.9365C7.94274 16.9219 7.99685 16.8997 8.06531 16.8721C8.20283 16.8165 8.40059 16.7355 8.6405 16.6357C9.12073 16.436 9.77263 16.1584 10.4569 15.8477C11.1407 15.5372 11.8612 15.1923 12.4764 14.8574C13.0826 14.5274 13.6158 14.1918 13.9032 13.8984L13.9022 13.8975C14.2015 13.6023 14.5396 13.0686 14.87 12.4629C15.2062 11.8465 15.5506 11.1279 15.8593 10.4463C16.1681 9.76404 16.443 9.11464 16.6405 8.63672C16.7392 8.39785 16.819 8.20033 16.8739 8.06348C16.9012 7.99543 16.923 7.9417 16.9374 7.90527C16.9445 7.88736 16.9503 7.87271 16.954 7.86328C16.9557 7.85903 16.957 7.85491 16.9579 7.85254L16.9589 7.85059V7.84961L16.7264 7.75781L16.9598 7.84961L16.9608 7.84473C17.0022 7.73234 17.0109 7.61015 16.9852 7.49316C16.9595 7.37611 16.9011 7.2683 16.8163 7.18359C16.7315 7.09895 16.6238 7.04026 16.5067 7.01465Z",
|
|
1318
|
+
explore: "M11.9994 4C14.0369 4 15.8955 4.76341 17.308 6.01758C19.9238 5.19935 21.8562 5.13402 22.3656 6.01562L22.4047 6.09082C22.8173 6.98841 21.7964 8.58774 19.8373 10.3916C19.9434 10.9112 19.9994 11.449 19.9994 12C19.9994 16.4183 16.4177 20 11.9994 20C9.96142 19.9999 8.10238 19.2363 6.68985 17.9814C4.07604 18.7985 2.1453 18.8656 1.63614 17.9844C1.12758 17.1032 2.1484 15.4636 4.16153 13.6094C4.05536 13.0895 3.99942 12.5512 3.99942 12C3.99942 7.58191 7.5814 4.0003 11.9994 4ZM19.1733 8.53516C17.7335 9.97992 15.4789 11.6877 12.7358 13.2715C9.98663 14.8586 7.37437 15.9593 5.40177 16.4824C5.77361 17.0335 6.21337 17.5352 6.70841 17.9766C8.58008 17.3897 10.8017 16.4196 13.1 15.1348L13.6352 14.8301C16.1241 13.393 18.2694 11.8332 19.8256 10.4023C19.6859 9.74635 19.4645 9.12037 19.1733 8.53516ZM4.79532 15.4971C4.29212 16.0051 3.92644 16.4456 3.67911 16.8037C4.11306 16.7686 4.67756 16.6731 5.36954 16.4912C5.37179 16.4906 5.37414 16.4889 5.37638 16.4883C5.16133 16.1715 4.96878 15.8382 4.8002 15.4912C4.79854 15.4929 4.797 15.4954 4.79532 15.4971ZM20.3217 7.19531C19.8879 7.23051 19.3234 7.32612 18.6322 7.50781C18.6284 7.50881 18.6243 7.50974 18.6205 7.51074C18.8362 7.82821 19.0297 8.16189 19.1986 8.50977C19.201 8.50736 19.2041 8.50532 19.2065 8.50293C19.7097 7.99491 20.0743 7.5535 20.3217 7.19531Z",
|
|
1319
|
+
plan: "M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM11.0078 6.18262C10.8974 6.18262 10.8076 6.27236 10.8076 6.38281V12.9824C10.8077 13.0928 10.8974 13.1826 11.0078 13.1826H17.6074C17.7178 13.1826 17.8075 13.0928 17.8076 12.9824V11.0488C17.8074 10.9386 17.7177 10.8496 17.6074 10.8496H13.3408C13.2304 10.8496 13.1406 10.7599 13.1406 10.6494V6.38281C13.1406 6.27251 13.0517 6.18286 12.9414 6.18262H11.0078Z",
|
|
1320
|
+
// Simulated User icon path that matches the weight and style
|
|
1321
|
+
me: "M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11ZM12 21C15.866 21 19 19.2091 19 17C19 14.7909 15.866 13 12 13C8.13401 13 5 14.7909 5 17C5 19.2091 8.13401 21 12 21"
|
|
1322
|
+
};
|
|
1323
|
+
function IconCompass({ className }) {
|
|
1324
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", children: [
|
|
1325
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgPaths3.compass, fill: "url(#paint_compass)" }),
|
|
1326
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "paint_compass", x1: "10.037", y1: "15.1811", x2: "19.636", y2: "7.4102", gradientUnits: "userSpaceOnUse", children: [
|
|
1327
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#1D1F2B" }),
|
|
1328
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#626991" })
|
|
1329
|
+
] }) })
|
|
1330
|
+
] });
|
|
1331
|
+
}
|
|
1332
|
+
function IconExplore({ className }) {
|
|
1333
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", children: [
|
|
1334
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgPaths3.explore, fill: "url(#paint_explore)" }),
|
|
1335
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "paint_explore", x1: "9.94163", y1: "14.5449", x2: "17.7787", y2: "6.22223", gradientUnits: "userSpaceOnUse", children: [
|
|
1336
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#1D1F2B" }),
|
|
1337
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#626991" })
|
|
1338
|
+
] }) })
|
|
1339
|
+
] });
|
|
1340
|
+
}
|
|
1341
|
+
function IconPlan({ className }) {
|
|
1342
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", children: [
|
|
1343
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgPaths3.plan, fill: "url(#paint_plan)" }),
|
|
1344
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "paint_plan", x1: "4.77778", y1: "18.6667", x2: "19.2222", y2: "4.77778", gradientUnits: "userSpaceOnUse", children: [
|
|
1345
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#1D1F2B" }),
|
|
1346
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#626991" })
|
|
1347
|
+
] }) })
|
|
1348
|
+
] });
|
|
1349
|
+
}
|
|
1350
|
+
function IconMe({ className }) {
|
|
1351
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", children: [
|
|
1352
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgPaths3.me, fill: "url(#paint_me)" }),
|
|
1353
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "paint_me", x1: "5", y1: "21", x2: "19", y2: "3", gradientUnits: "userSpaceOnUse", children: [
|
|
1354
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#1D1F2B" }),
|
|
1355
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#626991" })
|
|
1356
|
+
] }) })
|
|
1357
|
+
] });
|
|
1358
|
+
}
|
|
1359
|
+
function BottomNavigationBar({
|
|
1360
|
+
activeTab = "home",
|
|
1361
|
+
onTabChange,
|
|
1362
|
+
className
|
|
1363
|
+
}) {
|
|
1364
|
+
const tabs = [
|
|
1365
|
+
{ id: "home", label: "\u9996\u9875", icon: IconCompass },
|
|
1366
|
+
{ id: "explore", label: "\u63A2\u7D22", icon: IconExplore },
|
|
1367
|
+
{ id: "plan", label: "\u8BA1\u5212", icon: IconPlan },
|
|
1368
|
+
{ id: "me", label: "\u6211\u7684", icon: IconMe }
|
|
1369
|
+
];
|
|
1370
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1371
|
+
"div",
|
|
1372
|
+
{
|
|
1373
|
+
className: cn(
|
|
1374
|
+
"relative flex items-center justify-center p-[4px] gap-[4px]",
|
|
1375
|
+
"bg-card/40 backdrop-blur-xl saturate-150",
|
|
1376
|
+
"rounded-[68px]",
|
|
1377
|
+
"shadow-[0px_8px_24px_0px_rgba(0,0,0,0.08),0px_24px_80px_0px_rgba(104,106,113,0.2)]",
|
|
1378
|
+
className
|
|
1379
|
+
),
|
|
1380
|
+
style: {
|
|
1381
|
+
// Fallback for older browsers, though backdrop-blur is widely supported
|
|
1382
|
+
WebkitBackdropFilter: "blur(20px) saturate(150%)"
|
|
1383
|
+
},
|
|
1384
|
+
children: tabs.map((tab) => {
|
|
1385
|
+
const isActive = activeTab === tab.id;
|
|
1386
|
+
const Icon2 = tab.icon;
|
|
1387
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1388
|
+
"button",
|
|
1389
|
+
{
|
|
1390
|
+
onClick: () => onTabChange?.(tab.id),
|
|
1391
|
+
className: cn(
|
|
1392
|
+
"relative flex items-center justify-center rounded-[24px] cursor-pointer",
|
|
1393
|
+
"outline-none select-none touch-manipulation overflow-hidden",
|
|
1394
|
+
// Base padding for unselected state
|
|
1395
|
+
isActive ? "pl-[12px] pr-[14px] py-[10px]" : "px-[18px] py-[11px]",
|
|
1396
|
+
// Press overlay
|
|
1397
|
+
"active:after:absolute active:after:inset-0 active:after:bg-foreground/10 active:after:content-[''] active:after:rounded-[inherit]"
|
|
1398
|
+
),
|
|
1399
|
+
style: {
|
|
1400
|
+
WebkitTapHighlightColor: "transparent"
|
|
1401
|
+
},
|
|
1402
|
+
children: [
|
|
1403
|
+
isActive && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1404
|
+
react.motion.div,
|
|
1405
|
+
{
|
|
1406
|
+
layoutId: "active-pill",
|
|
1407
|
+
className: "absolute inset-0 bg-secondary/50 rounded-[24px]",
|
|
1408
|
+
transition: {
|
|
1409
|
+
type: "spring",
|
|
1410
|
+
bounce: 0.2,
|
|
1411
|
+
duration: 0.5
|
|
1412
|
+
}
|
|
1413
|
+
}
|
|
1414
|
+
),
|
|
1415
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1416
|
+
react.motion.div,
|
|
1417
|
+
{
|
|
1418
|
+
className: "relative z-10 flex items-center justify-center gap-[2px]",
|
|
1419
|
+
layout: true,
|
|
1420
|
+
transition: {
|
|
1421
|
+
type: "spring",
|
|
1422
|
+
bounce: 0.2,
|
|
1423
|
+
duration: 0.5
|
|
1424
|
+
},
|
|
1425
|
+
children: [
|
|
1426
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "popLayout", children: isActive && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1427
|
+
react.motion.div,
|
|
1428
|
+
{
|
|
1429
|
+
initial: { opacity: 0, scale: 0.5, width: 0 },
|
|
1430
|
+
animate: { opacity: 1, scale: 1, width: "auto" },
|
|
1431
|
+
exit: { opacity: 0, scale: 0.5, width: 0 },
|
|
1432
|
+
transition: {
|
|
1433
|
+
type: "spring",
|
|
1434
|
+
bounce: 0.2,
|
|
1435
|
+
duration: 0.4
|
|
1436
|
+
},
|
|
1437
|
+
className: "flex items-center justify-center overflow-hidden",
|
|
1438
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "size-[24px] text-primary" })
|
|
1439
|
+
}
|
|
1440
|
+
) }),
|
|
1441
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1442
|
+
react.motion.span,
|
|
1443
|
+
{
|
|
1444
|
+
layout: true,
|
|
1445
|
+
className: cn(
|
|
1446
|
+
"font-medium text-[16px] leading-[24px] whitespace-nowrap font-sans",
|
|
1447
|
+
"text-foreground"
|
|
1448
|
+
),
|
|
1449
|
+
children: tab.label
|
|
1450
|
+
}
|
|
1451
|
+
)
|
|
1452
|
+
]
|
|
1453
|
+
}
|
|
1454
|
+
)
|
|
1455
|
+
]
|
|
1456
|
+
},
|
|
1457
|
+
tab.id
|
|
1458
|
+
);
|
|
1459
|
+
})
|
|
1460
|
+
}
|
|
1461
|
+
);
|
|
1462
|
+
}
|
|
1463
|
+
var SVG_PATHS = {
|
|
1464
|
+
back: "M7.35667 10.0006L13.1483 15.7923L11.97 16.9706L5 10.0006L11.97 3.0306L13.1483 4.20893L7.35667 10.0006Z",
|
|
1465
|
+
more: "M3.75 8.75C3.0625 8.75 2.5 9.3125 2.5 10C2.5 10.6875 3.0625 11.25 3.75 11.25C4.4375 11.25 5 10.6875 5 10C5 9.3125 4.4375 8.75 3.75 8.75ZM16.25 8.75C15.5625 8.75 15 9.3125 15 10C15 10.6875 15.5625 11.25 16.25 11.25C16.9375 11.25 17.5 10.6875 17.5 10C17.5 9.3125 16.9375 8.75 16.25 8.75ZM10 8.75C9.3125 8.75 8.75 9.3125 8.75 10C8.75 10.6875 9.3125 11.25 10 11.25C10.6875 11.25 11.25 10.6875 11.25 10C11.25 9.3125 10.6875 8.75 10 8.75Z"};
|
|
1466
|
+
function IconBack() {
|
|
1467
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-[20px] text-foreground", fill: "none", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: SVG_PATHS.back, fill: "currentColor" }) });
|
|
1468
|
+
}
|
|
1469
|
+
function IconMore() {
|
|
1470
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-[20px] text-foreground", fill: "none", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: SVG_PATHS.more, fill: "currentColor" }) });
|
|
1471
|
+
}
|
|
1472
|
+
function RoundBtn({ children, className, appearance = "glass", ...props }) {
|
|
1473
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1474
|
+
"button",
|
|
1475
|
+
{
|
|
1476
|
+
type: "button",
|
|
1477
|
+
className: cn(
|
|
1478
|
+
"relative flex flex-col items-center justify-center shrink-0 size-[40px] rounded-[22px]",
|
|
1479
|
+
"bg-card/50",
|
|
1480
|
+
// Common background base
|
|
1481
|
+
// Glass Appearance: White 54% + Shadow + Blur -> Converted to card/50 + blur
|
|
1482
|
+
appearance === "glass" && "bg-card/80 shadow-[0px_4px_16px_0px_rgba(0,0,0,0.12)] backdrop-blur-md border border-border/20",
|
|
1483
|
+
// Gray Appearance: No Blur, No Shadow (Flat Gray) -> bg-muted
|
|
1484
|
+
appearance === "gray" && "bg-secondary backdrop-blur-none shadow-none",
|
|
1485
|
+
// Active state
|
|
1486
|
+
"active:after:absolute active:after:inset-0 active:after:bg-foreground/10 active:after:content-[''] active:after:rounded-[inherit]",
|
|
1487
|
+
className
|
|
1488
|
+
),
|
|
1489
|
+
...props,
|
|
1490
|
+
children
|
|
1491
|
+
}
|
|
1492
|
+
);
|
|
1493
|
+
}
|
|
1494
|
+
function TabItem({ active, label, onClick }) {
|
|
1495
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1496
|
+
"button",
|
|
1497
|
+
{
|
|
1498
|
+
type: "button",
|
|
1499
|
+
onClick,
|
|
1500
|
+
className: cn(
|
|
1501
|
+
"box-border flex flex-col items-center relative cursor-pointer",
|
|
1502
|
+
// Replaced min-w-[78px] and shrink-0 with flex-1 to distribute width evenly
|
|
1503
|
+
"flex-1 min-w-0 px-2",
|
|
1504
|
+
active ? "pt-[8px] pb-0 gap-[4px]" : "py-[8px] gap-[4px]"
|
|
1505
|
+
),
|
|
1506
|
+
children: [
|
|
1507
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1508
|
+
"span",
|
|
1509
|
+
{
|
|
1510
|
+
className: cn(
|
|
1511
|
+
"text-[18px] text-center whitespace-nowrap leading-[18px] transition-colors w-full truncate",
|
|
1512
|
+
active ? "text-foreground font-medium" : "text-muted-foreground font-normal"
|
|
1513
|
+
),
|
|
1514
|
+
children: label
|
|
1515
|
+
}
|
|
1516
|
+
),
|
|
1517
|
+
active && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[4px] relative shrink-0 w-[16px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bg-primary h-[3px] left-0 rounded-[10px] top-0 w-[16px]" }) })
|
|
1518
|
+
]
|
|
1519
|
+
}
|
|
1520
|
+
);
|
|
1521
|
+
}
|
|
1522
|
+
function TopToolbar({
|
|
1523
|
+
mode = "left-title",
|
|
1524
|
+
appearance = "glass",
|
|
1525
|
+
title = "\u9875\u9762\u4E3B\u6807\u9898",
|
|
1526
|
+
showTitle = true,
|
|
1527
|
+
showBack = true,
|
|
1528
|
+
rightActionCount = 2,
|
|
1529
|
+
onBack,
|
|
1530
|
+
onAction,
|
|
1531
|
+
tabs = ["\u6807\u7B7E", "\u6807\u7B7E", "\u6807\u7B7E"],
|
|
1532
|
+
activeTabIndex = 0,
|
|
1533
|
+
onTabChange,
|
|
1534
|
+
className
|
|
1535
|
+
}) {
|
|
1536
|
+
const maxActions = mode === "left-title" ? 3 : 2;
|
|
1537
|
+
const safeActionCount = Math.min(Math.max(0, rightActionCount), maxActions);
|
|
1538
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative w-full h-[48px] flex items-center px-[12px]", className), children: [
|
|
1539
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center gap-[12px] shrink-0 z-20", mode === "left-title" ? "mr-4" : ""), children: showBack && /* @__PURE__ */ jsxRuntime.jsx(RoundBtn, { onClick: onBack, appearance, children: /* @__PURE__ */ jsxRuntime.jsx(IconBack, {}) }) }),
|
|
1540
|
+
mode === "left-title" && (showTitle ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0 mr-[26px]", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1541
|
+
"h1",
|
|
1542
|
+
{
|
|
1543
|
+
className: "truncate",
|
|
1544
|
+
title,
|
|
1545
|
+
children: title
|
|
1546
|
+
}
|
|
1547
|
+
) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" })),
|
|
1548
|
+
mode === "center-title" && showTitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col justify-center items-center z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1549
|
+
"h3",
|
|
1550
|
+
{
|
|
1551
|
+
className: "text-center whitespace-nowrap",
|
|
1552
|
+
title,
|
|
1553
|
+
children: title.length > 7 ? title.slice(0, 7) + "..." : title
|
|
1554
|
+
}
|
|
1555
|
+
) }),
|
|
1556
|
+
mode === "tabs" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-between h-[34px] px-2 min-w-0 z-10", children: tabs.map((tab, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1557
|
+
TabItem,
|
|
1558
|
+
{
|
|
1559
|
+
label: tab,
|
|
1560
|
+
active: index === activeTabIndex,
|
|
1561
|
+
onClick: () => onTabChange?.(index)
|
|
1562
|
+
},
|
|
1563
|
+
index
|
|
1564
|
+
)) }),
|
|
1565
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center gap-[8px] shrink-0 z-20", mode !== "left-title" && mode !== "tabs" ? "ml-auto" : ""), children: Array.from({ length: safeActionCount }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(RoundBtn, { onClick: () => onAction?.(i), appearance, children: /* @__PURE__ */ jsxRuntime.jsx(IconMore, {}) }, i)) })
|
|
1566
|
+
] });
|
|
1567
|
+
}
|
|
1568
|
+
var imgHeader2 = "";
|
|
1569
|
+
var svgPaths4 = {
|
|
1570
|
+
close: "M10.0006 8.82227L15.7923 3.0306L16.9706 4.20893L11.1789 10.0006L16.9706 15.7923L15.7923 16.9706L10.0006 11.1789L4.20893 16.9706L3.0306 15.7923L8.82227 10.0006L3.0306 4.20893L4.20893 3.0306L10.0006 8.82227Z",
|
|
1571
|
+
check: "M5.54808 8.91506C5.68517 8.7731 5.911 8.76798 6.05439 8.90357L8.91511 11.6087L14.0259 6.3385C14.1641 6.19598 14.3916 6.19224 14.5344 6.33015L15.2401 7.01168C15.3833 7.15 15.3871 7.37832 15.2485 7.52126L10.1388 12.7904L9.09587 13.877C8.95862 14.02 8.73162 14.0251 8.58802 13.8885L4.76317 10.25C4.61835 10.1122 4.61349 9.88287 4.75233 9.73909L5.54808 8.91506Z",
|
|
1572
|
+
// Share Icons
|
|
1573
|
+
wechat: "M29.2621 19.4686C29.6005 19.4686 29.9389 19.4999 30.2755 19.5294C29.37 15.3272 24.8274 12.1875 19.6529 12.1875C13.8665 12.2078 9.12506 16.1186 9.12506 21.0846C9.12506 23.9475 10.7056 26.3088 13.331 28.1369L12.2712 31.273L15.9564 29.4467C17.2766 29.705 18.3364 29.9632 19.6398 29.9632C19.9782 29.9632 20.3 29.9485 20.6216 29.9189C20.4126 29.2057 20.3043 28.4669 20.3 27.7238C20.3149 23.171 24.2603 19.4705 29.264 19.4705L29.2622 19.4686H29.2621ZM23.5985 16.6388C24.398 16.6388 24.9186 17.1553 24.9186 17.9485C24.9186 18.7233 24.398 19.2583 23.5985 19.2583C22.8156 19.2583 22.0179 18.74 22.0179 17.9485C22.0179 17.1553 22.8156 16.6388 23.5985 16.6388V16.6388ZM16.2297 19.2583C15.4488 19.2583 14.6493 18.74 14.6493 17.9485C14.6493 17.1553 15.4488 16.6388 16.2297 16.6388C17.0126 16.6388 17.5499 17.1553 17.5499 17.9485C17.5499 18.7233 17.0293 19.2583 16.2297 19.2583ZM38.8751 27.6149C38.8751 23.4421 34.6692 20.0313 29.924 20.0313C24.9204 20.0313 20.9748 23.4421 20.9748 27.6149C20.9748 31.8024 24.9204 35.2003 29.924 35.2003C30.969 35.2003 32.0288 34.9421 33.0868 34.682L35.9725 36.25L35.1749 33.6452C37.2946 32.0477 38.8751 29.9595 38.8751 27.6149V27.6149ZM27.0234 26.305C26.5028 26.305 25.9636 25.7885 25.9636 25.2536C25.9636 24.7371 26.5028 24.2022 27.0234 24.2022C27.8229 24.2022 28.3436 24.7205 28.3436 25.2536C28.3436 25.7886 27.8229 26.3051 27.0234 26.3051V26.305ZM32.8116 26.305C32.2892 26.305 31.7666 25.7885 31.7666 25.2536C31.7666 24.7371 32.2873 24.2022 32.8116 24.2022C33.6093 24.2022 34.1317 24.7205 34.1317 25.2536C34.1317 25.7886 33.6093 26.3051 32.8116 26.3051V26.305Z",
|
|
1574
|
+
moments: "M23.8771 14.0267V4.44716C23.8771 4.44716 19.1894 1.93416 13.7173 3.8718L23.8771 14.0267ZM24.7646 19.6624V4.84271C24.7646 4.84271 30.3063 7.35406 31.868 13.4547L24.7646 19.6624ZM21.7833 23.9699L32.0134 14.3495C32.0134 14.3495 33.8236 17.2924 31.1242 23.9699H21.7833ZM16.5596 25.1897H30.3765C30.3765 25.1897 28.7086 29.7106 22.7387 31.5772L16.5596 25.1897ZM12.0493 22.1377V31.1441C12.0493 31.1441 15.6378 33.4421 21.7833 31.8991L12.0493 22.1377ZM4.05598 22.6036L11.0547 16.324V30.6047C11.0547 30.6046 6.82639 29.1369 4.05598 22.6036ZM3.87862 21.5992C3.87862 21.5992 2.27767 16.4335 4.51686 11.9469H14.143L3.87862 21.5992ZM5.12165 10.94C5.12165 10.94 7.14675 6.34883 12.6525 4.19461L19.2229 10.94H5.12165Z",
|
|
1575
|
+
qq_bg: "M35.1721 27.6044C34.6014 25.7733 33.9452 24.2344 32.9359 21.7158C33.0928 15.1006 30.3396 9.75 23.9985 9.75C17.5861 9.75 14.8934 15.2075 15.0646 21.7158C14.0517 24.238 13.3991 25.7662 12.8284 27.6044C11.6159 31.5051 12.0082 33.1189 12.3078 33.1545C12.9497 33.2328 14.8078 30.2191 14.8078 30.2191C14.8078 31.9647 15.7065 34.241 17.6538 35.8832C16.7123 36.1718 14.5974 36.9484 15.1003 37.7997C15.5068 38.4873 22.0976 38.2379 23.9985 38.0242C25.8994 38.2379 32.4901 38.4873 32.8967 37.7997C33.3995 36.9519 31.2811 36.1718 30.3431 35.8832C32.2904 34.2374 33.1891 31.9611 33.1891 30.2191C33.1891 30.2191 35.0472 33.2328 35.6892 33.1545C35.9923 33.1153 36.3846 31.5016 35.1721 27.6044Z",
|
|
1576
|
+
weibo_1: "M0 16.3909C0.000120501 9.90626 9.76945 2.21591 13.5586 3.79621C15.6014 4.64828 14.2267 7.71723 14.5146 8.03254C14.9769 8.53659 19.0829 5.70166 21.499 7.67414C22.9158 8.83096 21.6073 10.9817 21.7139 11.3402C21.879 11.894 24.4902 12.0756 25.5195 14.1429C27.1334 17.3854 22.4545 24.0001 12.7354 24.0003C4.80129 24.0003 0 20.1873 0 16.3909ZM20.8018 15.6409C20.491 12.4675 16.2646 10.2754 11.3613 10.7444C6.45793 11.2137 2.73382 14.1665 3.04395 17.3402C3.35443 20.5139 7.58174 22.7068 12.4854 22.2376C17.3889 21.7684 21.1122 18.8147 20.8018 15.6409Z",
|
|
1577
|
+
weibo_2: "M15.8174 15.8046C16.4177 17.9258 14.8583 20.2117 12.3346 20.9102C9.81081 21.6087 7.27831 20.4554 6.67808 18.3342C6.07785 16.213 7.63718 13.9271 10.1609 13.2286C12.6847 12.5301 15.2172 13.6834 15.8174 15.8046ZM11.3283 17.1713C11.662 17.8811 11.2504 18.7702 10.409 19.1571C9.5676 19.544 8.61501 19.2821 8.28133 18.5723C7.94765 17.8624 8.35924 16.9733 9.20065 16.5865C10.0421 16.1996 10.9947 16.4614 11.3283 17.1713ZM12.4319 16.8021C12.7597 16.6514 12.9201 16.3049 12.7901 16.0283C12.6601 15.7517 12.2889 15.6497 11.961 15.8005C11.6332 15.9512 11.4728 16.2976 11.6028 16.5742C11.7328 16.8508 12.104 16.9528 12.4319 16.8021Z",
|
|
1578
|
+
weibo_3: "M20.1584 2.28677C20.6078 2.17677 21.0788 2.11813 21.565 2.11813C24.7859 2.11813 27.397 4.70049 27.397 7.88598C27.397 8.58955 27.2701 9.26142 27.0386 9.882C26.834 10.4308 27.1178 11.0397 27.6727 11.2421C28.2276 11.4446 28.8433 11.1638 29.048 10.615C29.3656 9.76323 29.5386 8.84339 29.5386 7.88598C29.5386 3.53067 25.9687 0 21.565 0C20.904 0 20.2603 0.0797899 19.6439 0.230671C19.0698 0.371191 18.7196 0.945379 18.8617 1.51316C19.0037 2.08093 19.5843 2.42729 20.1584 2.28677Z",
|
|
1579
|
+
weibo_4: "M21.1046 5.98384C21.2513 5.94931 21.4053 5.93078 21.565 5.93078C22.6569 5.93078 23.542 6.80615 23.542 7.88598C23.542 8.12168 23.5003 8.3454 23.4247 8.55184C23.2233 9.10179 23.5108 9.70907 24.0669 9.90824C24.623 10.1074 25.237 9.82303 25.4384 9.27308C25.5974 8.83874 25.6836 8.37115 25.6836 7.88598C25.6836 5.63634 23.8397 3.81264 21.565 3.81264C21.237 3.81264 20.9166 3.85078 20.6087 3.92328C20.0333 4.05872 19.678 4.62979 19.8149 5.1988C19.9519 5.76781 20.5293 6.11928 21.1046 5.98384Z",
|
|
1580
|
+
qr: "M16 17V16H13V13H16V15H18V17H17V19H15V21H13V18H15V17H16ZM21 21H17V19H19V17H21V21ZM3 3H11V11H3V3ZM5 5V9H9V5H5ZM13 3H21V11H13V3ZM15 5V9H19V5H5ZM15 5V9H19V5H15ZM3 13H11V21H3V13ZM5 15V19H9V15H5ZM18 13H21V15H18V13ZM6 6H8V8H6V6ZM6 16H8V18H6V16ZM16 6H18V8H16V6Z",
|
|
1581
|
+
tap: "M14.3022 6.01416H10.8706V7.66455H12.9985C13.5885 7.66459 14.0666 8.14298 14.0669 8.73291L14.0679 17.6343H17.3042V8.64404H19.3354V18.5034C19.3354 19.0933 18.8559 19.5714 18.2661 19.5718H14.0679V20.8618C14.0679 21.452 13.5887 21.9312 12.9985 21.9312H4.64111C4.05105 21.9311 3.57277 21.4519 3.57275 20.8618V8.73291C3.57296 8.14293 4.05108 7.66455 4.64111 7.66455H8.84033V5.14404C8.84055 4.55415 9.31877 4.0758 9.90869 4.07568H14.3022V6.01416ZM5.60303 19.9927H12.0366V9.60303H11.064V9.89795C11.064 10.252 10.7774 10.5395 10.4233 10.5396H7.46436C7.11028 10.5395 6.82373 10.252 6.82373 9.89795V9.60303H5.60303V19.9927ZM15.8306 5.17041C16.318 5.17056 16.7856 5.38839 17.1304 5.77588C17.4752 6.16364 17.6694 6.6904 17.6694 7.23877H15.8306V5.17041ZM15.8306 2.06885C17.0497 2.06899 18.2185 2.61423 19.0806 3.5835C19.9427 4.55288 20.4272 5.86786 20.4272 7.23877H18.5884C18.5884 6.41631 18.2979 5.62703 17.7808 5.04541C17.2636 4.4639 16.562 4.13735 15.8306 4.13721V2.06885Z",
|
|
1582
|
+
addDesk_1: "M13 11H17V13H13V17H11V13H7V11H11V7H13V11Z",
|
|
1583
|
+
addDesk_2: "M20 2C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20ZM5 20H19V4H5V20Z",
|
|
1584
|
+
more: "M4.5 10.5C3.675 10.5 3 11.175 3 12C3 12.825 3.675 13.5 4.5 13.5C5.325 13.5 6 12.825 6 12C6 11.175 5.325 10.5 4.5 10.5ZM19.5 10.5C18.675 10.5 18 11.175 18 12C18 12.825 18.675 13.5 19.5 13.5C20.325 13.5 21 12.825 21 12C21 11.175 20.325 10.5 19.5 10.5ZM12 10.5C11.175 10.5 10.5 11.175 10.5 12C10.5 12.825 11.175 13.5 12 13.5C12.825 13.5 13.5 12.825 13.5 12C13.5 11.175 12.825 10.5 12 10.5Z"
|
|
1585
|
+
};
|
|
1586
|
+
function BottomSheet({
|
|
1587
|
+
open,
|
|
1588
|
+
onOpenChange,
|
|
1589
|
+
title = "\u6807\u9898",
|
|
1590
|
+
headerDescription,
|
|
1591
|
+
description,
|
|
1592
|
+
mainActionText = "\u4E3B\u64CD\u4F5C",
|
|
1593
|
+
secondaryActionText = "\u526F\u64CD\u4F5C",
|
|
1594
|
+
onMainAction,
|
|
1595
|
+
onSecondaryAction,
|
|
1596
|
+
children,
|
|
1597
|
+
className,
|
|
1598
|
+
demoMode = false,
|
|
1599
|
+
imageSrc
|
|
1600
|
+
}) {
|
|
1601
|
+
const positionClass = demoMode ? "absolute" : "fixed";
|
|
1602
|
+
const activeImage = imageSrc || imgHeader2;
|
|
1603
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1604
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1605
|
+
react.motion.div,
|
|
1606
|
+
{
|
|
1607
|
+
initial: { opacity: 0 },
|
|
1608
|
+
animate: { opacity: 1 },
|
|
1609
|
+
exit: { opacity: 0 },
|
|
1610
|
+
transition: { duration: 0.3 },
|
|
1611
|
+
className: `${positionClass} inset-0 bg-black/60 z-50`,
|
|
1612
|
+
onClick: () => onOpenChange(false)
|
|
1613
|
+
}
|
|
1614
|
+
),
|
|
1615
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1616
|
+
react.motion.div,
|
|
1617
|
+
{
|
|
1618
|
+
initial: { y: "100%" },
|
|
1619
|
+
animate: { y: 0 },
|
|
1620
|
+
exit: { y: "100%" },
|
|
1621
|
+
transition: { type: "spring", damping: 25, stiffness: 300 },
|
|
1622
|
+
className: cn(
|
|
1623
|
+
`${positionClass} bottom-0 left-0 right-0 z-50 bg-white rounded-t-[32px] overflow-hidden shadow-xl max-h-[90vh] flex flex-col`,
|
|
1624
|
+
className
|
|
1625
|
+
),
|
|
1626
|
+
children: [
|
|
1627
|
+
imageSrc ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative shrink-0 w-full h-[195px]", children: [
|
|
1628
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: activeImage, alt: "Header", className: "w-full h-full object-cover" }) }),
|
|
1629
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-[rgba(183,183,183,0.2)]" }),
|
|
1630
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1631
|
+
"button",
|
|
1632
|
+
{
|
|
1633
|
+
onClick: () => onOpenChange(false),
|
|
1634
|
+
className: "absolute top-[12px] right-[12px] size-[40px] rounded-[22px] bg-white/50 backdrop-blur-sm flex items-center justify-center active:opacity-70 transition-opacity shadow-sm",
|
|
1635
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "size-[20px]", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgPaths4.close, fill: "rgba(0,0,0,0.9)" }) })
|
|
1636
|
+
}
|
|
1637
|
+
)
|
|
1638
|
+
] }) : (
|
|
1639
|
+
/* Standard Header Container */
|
|
1640
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col pt-[12px] px-[20px] pb-0 shrink-0", children: [
|
|
1641
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
|
|
1642
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 mr-[12px]", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-['PingFang_SC:Semibold',sans-serif] text-[20px] leading-[28px] text-[rgba(0,0,0,0.9)] text-left break-words", children: title }) }),
|
|
1643
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1644
|
+
"button",
|
|
1645
|
+
{
|
|
1646
|
+
onClick: () => onOpenChange(false),
|
|
1647
|
+
className: "shrink-0 size-[40px] rounded-[22px] bg-[rgba(75,82,107,0.08)] flex items-center justify-center active:opacity-70 transition-opacity",
|
|
1648
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "size-[20px]", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgPaths4.close, fill: "rgba(0,0,0,0.9)" }) })
|
|
1649
|
+
}
|
|
1650
|
+
)
|
|
1651
|
+
] }),
|
|
1652
|
+
headerDescription && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[4px]", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-['PingFang_SC:Regular',sans-serif] text-[14px] leading-[20px] text-[rgba(0,0,0,0.42)] text-left", children: headerDescription }) })
|
|
1653
|
+
] })
|
|
1654
|
+
),
|
|
1655
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
|
|
1656
|
+
"px-[20px] overflow-y-auto",
|
|
1657
|
+
imageSrc ? "pt-[20px]" : "pt-[16px]"
|
|
1658
|
+
), children: [
|
|
1659
|
+
imageSrc && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-[8px]", children: [
|
|
1660
|
+
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-['PingFang_SC:Semibold',sans-serif] text-[20px] leading-[28px] text-[rgba(0,0,0,0.9)] text-left break-words", children: title }),
|
|
1661
|
+
headerDescription && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[4px]", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-['PingFang_SC:Regular',sans-serif] text-[14px] leading-[20px] text-[rgba(0,0,0,0.42)] text-left", children: headerDescription }) })
|
|
1662
|
+
] }),
|
|
1663
|
+
description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-['PingFang_SC:Regular',sans-serif] text-[14px] leading-[20px] text-[rgba(0,0,0,0.9)] mb-[16px]", children: typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-pre-wrap", children: description }) : description }),
|
|
1664
|
+
children
|
|
1665
|
+
] }),
|
|
1666
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-[20px] pt-[24px] pb-[32px] flex gap-[12px] shrink-0 bg-white mt-auto", children: [
|
|
1667
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1668
|
+
"button",
|
|
1669
|
+
{
|
|
1670
|
+
onClick: onSecondaryAction,
|
|
1671
|
+
className: "basis-0 grow h-[48px] rounded-[50px] bg-[rgba(75,82,107,0.08)] flex items-center justify-center relative overflow-hidden active:after:content-[''] active:after:absolute active:after:inset-0 active:after:bg-black/8 active:after:rounded-[inherit] transition-colors",
|
|
1672
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-['PingFang_SC:Medium',sans-serif] text-[16px] leading-[24px] text-[rgba(0,0,0,0.9)]", children: secondaryActionText })
|
|
1673
|
+
}
|
|
1674
|
+
),
|
|
1675
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1676
|
+
"button",
|
|
1677
|
+
{
|
|
1678
|
+
onClick: onMainAction,
|
|
1679
|
+
className: "basis-0 grow h-[48px] rounded-[50px] bg-[#4b526b] flex items-center justify-center relative overflow-hidden active:after:content-[''] active:after:absolute active:after:inset-0 active:after:bg-black/8 active:after:rounded-[inherit] transition-colors",
|
|
1680
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-['PingFang_SC:Medium',sans-serif] text-[16px] leading-[24px] text-white", children: mainActionText })
|
|
1681
|
+
}
|
|
1682
|
+
)
|
|
1683
|
+
] }),
|
|
1684
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[10px] w-full bg-white" })
|
|
1685
|
+
]
|
|
1686
|
+
}
|
|
1687
|
+
)
|
|
1688
|
+
] }) });
|
|
1689
|
+
}
|
|
1690
|
+
function BottomSheetOption({ label, selected, onClick, hasDivider = true }) {
|
|
1691
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full", onClick, children: [
|
|
1692
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-[44px] flex items-center justify-between w-full cursor-pointer active:bg-gray-50 transition-colors -mx-[20px] px-[20px]", children: [
|
|
1693
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-['PingFang_SC:Medium',sans-serif] text-[16px] leading-[24px] text-[rgba(0,0,0,0.9)]", children: label }),
|
|
1694
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-[20px] flex items-center justify-center", children: selected ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "size-full", viewBox: "0 0 20 20", fill: "none", children: [
|
|
1695
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "9", fill: "#4B526B" }),
|
|
1696
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: svgPaths4.check, fill: "white" })
|
|
1697
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "size-full", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "8.25", stroke: "black", strokeOpacity: "0.12", strokeWidth: "1.5" }) }) })
|
|
1698
|
+
] }),
|
|
1699
|
+
hasDivider && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[1px] w-full bg-black/5 my-[4px]" })
|
|
1700
|
+
] });
|
|
1701
|
+
}
|
|
1702
|
+
function BottomSheetShareItem({ type, label, onClick }) {
|
|
1703
|
+
const renderIcon = () => {
|
|
1704
|
+
switch (type) {
|
|
1705
|
+
case "wechat":
|
|
1706
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "size-[48px]", viewBox: "0 0 48 48", fill: "none", children: [
|
|
1707
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "24", cy: "24", r: "24", fill: "#09BB07" }),
|
|
1708
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgPaths4.wechat, fill: "white" })
|
|
1709
|
+
] });
|
|
1710
|
+
case "moments":
|
|
1711
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "size-[48px]", viewBox: "0 0 48 48", fill: "none", children: [
|
|
1712
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "24", cy: "24", r: "24", fill: "#09BB07" }),
|
|
1713
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { transform: "translate(6, 6) scale(0.75)", d: svgPaths4.moments, fill: "white" })
|
|
1714
|
+
] });
|
|
1715
|
+
case "qq":
|
|
1716
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "size-[48px]", viewBox: "0 0 48 48", fill: "none", children: [
|
|
1717
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "24", cy: "24", r: "24", fill: "#00A9FF" }),
|
|
1718
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgPaths4.qq_bg, fill: "white" })
|
|
1719
|
+
] });
|
|
1720
|
+
case "weibo":
|
|
1721
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "size-[48px]", viewBox: "0 0 48 48", fill: "none", children: [
|
|
1722
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "24", cy: "24", r: "24", fill: "#E31C34" }),
|
|
1723
|
+
/* @__PURE__ */ jsxRuntime.jsxs("g", { transform: "translate(9, 12) scale(1)", children: [
|
|
1724
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgPaths4.weibo_1, fill: "white" }),
|
|
1725
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: svgPaths4.weibo_2, fill: "white" }),
|
|
1726
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgPaths4.weibo_3, fill: "white" }),
|
|
1727
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgPaths4.weibo_4, fill: "white" })
|
|
1728
|
+
] })
|
|
1729
|
+
] });
|
|
1730
|
+
case "qr":
|
|
1731
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-[48px] rounded-[24px] border-[0.5px] border-black/10 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "size-[24px]", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgPaths4.qr, fill: "black", fillOpacity: "0.9" }) }) });
|
|
1732
|
+
case "tap":
|
|
1733
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-[48px] rounded-[24px] border-[0.5px] border-black/10 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "size-[24px]", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgPaths4.tap, fill: "black", fillOpacity: "0.9" }) }) });
|
|
1734
|
+
case "add_desk":
|
|
1735
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-[48px] rounded-[24px] border-[0.5px] border-black/10 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "size-[24px]", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
|
|
1736
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svgPaths4.addDesk_1, fill: "black", fillOpacity: "0.9" }),
|
|
1737
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: svgPaths4.addDesk_2, fill: "black", fillOpacity: "0.9" })
|
|
1738
|
+
] }) }) });
|
|
1739
|
+
case "more":
|
|
1740
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-[48px] rounded-[24px] border-[0.5px] border-black/10 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "size-[24px]", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svgPaths4.more, fill: "black", fillOpacity: "0.9" }) }) });
|
|
1741
|
+
}
|
|
1742
|
+
};
|
|
1743
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[4px] items-center w-[64px] cursor-pointer", onClick, children: [
|
|
1744
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 relative", children: renderIcon() }),
|
|
1745
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-['PingFang_SC:Regular',sans-serif] text-[12px] leading-[18px] text-[rgba(0,0,0,0.9)] text-center whitespace-nowrap", children: label })
|
|
1746
|
+
] });
|
|
1747
|
+
}
|
|
1748
|
+
var DRAWER_STATES = {
|
|
1749
|
+
SMALL: 0,
|
|
1750
|
+
MEDIUM: 1,
|
|
1751
|
+
LARGE: 2,
|
|
1752
|
+
FULL: 3
|
|
1753
|
+
};
|
|
1754
|
+
function DraggablePanel({
|
|
1755
|
+
children,
|
|
1756
|
+
className,
|
|
1757
|
+
state: controlledState,
|
|
1758
|
+
onStateChange,
|
|
1759
|
+
fullScreenContent,
|
|
1760
|
+
fullScreenTrigger,
|
|
1761
|
+
topToolbar,
|
|
1762
|
+
showTopToolbarInStates,
|
|
1763
|
+
bottomBar
|
|
1764
|
+
}) {
|
|
1765
|
+
const [internalState, setInternalState] = React.useState(DRAWER_STATES.SMALL);
|
|
1766
|
+
const [previousState, setPreviousState] = React.useState(DRAWER_STATES.MEDIUM);
|
|
1767
|
+
const state = controlledState !== void 0 ? controlledState : internalState;
|
|
1768
|
+
const setState = (newState) => {
|
|
1769
|
+
if (controlledState === void 0) {
|
|
1770
|
+
setInternalState(newState);
|
|
1771
|
+
}
|
|
1772
|
+
onStateChange?.(newState);
|
|
1773
|
+
};
|
|
1774
|
+
const goToFullScreen = () => {
|
|
1775
|
+
setPreviousState(state);
|
|
1776
|
+
setState(DRAWER_STATES.FULL);
|
|
1777
|
+
};
|
|
1778
|
+
const smallHeight = 160;
|
|
1779
|
+
const mediumHeight = 400;
|
|
1780
|
+
const onDragEnd = (event, info) => {
|
|
1781
|
+
if (state === DRAWER_STATES.FULL) return;
|
|
1782
|
+
const offset = info.offset.y;
|
|
1783
|
+
const velocity = info.velocity.y;
|
|
1784
|
+
if (offset < -20 || velocity < -500) {
|
|
1785
|
+
if (state === DRAWER_STATES.SMALL) setState(DRAWER_STATES.MEDIUM);
|
|
1786
|
+
else if (state === DRAWER_STATES.MEDIUM) setState(DRAWER_STATES.LARGE);
|
|
1787
|
+
} else if (offset > 20 || velocity > 500) {
|
|
1788
|
+
if (state === DRAWER_STATES.LARGE) setState(DRAWER_STATES.MEDIUM);
|
|
1789
|
+
else if (state === DRAWER_STATES.MEDIUM) setState(DRAWER_STATES.SMALL);
|
|
1790
|
+
}
|
|
1791
|
+
};
|
|
1792
|
+
const getBackgroundStyle = () => {
|
|
1793
|
+
switch (state) {
|
|
1794
|
+
case DRAWER_STATES.SMALL:
|
|
1795
|
+
return "bg-gradient-to-b from-card/48 to-card/84 backdrop-blur-[30px]";
|
|
1796
|
+
case DRAWER_STATES.MEDIUM:
|
|
1797
|
+
return "bg-card/90 backdrop-blur-[30px]";
|
|
1798
|
+
case DRAWER_STATES.LARGE:
|
|
1799
|
+
return "bg-card";
|
|
1800
|
+
case DRAWER_STATES.FULL:
|
|
1801
|
+
return "bg-card";
|
|
1802
|
+
default:
|
|
1803
|
+
return "bg-card";
|
|
1804
|
+
}
|
|
1805
|
+
};
|
|
1806
|
+
const getHeight = () => {
|
|
1807
|
+
switch (state) {
|
|
1808
|
+
case DRAWER_STATES.SMALL:
|
|
1809
|
+
return smallHeight;
|
|
1810
|
+
case DRAWER_STATES.MEDIUM:
|
|
1811
|
+
return mediumHeight;
|
|
1812
|
+
case DRAWER_STATES.LARGE:
|
|
1813
|
+
return "calc(100% - 51px)";
|
|
1814
|
+
case DRAWER_STATES.FULL:
|
|
1815
|
+
return "100%";
|
|
1816
|
+
}
|
|
1817
|
+
};
|
|
1818
|
+
const getMargins = () => {
|
|
1819
|
+
if (state === DRAWER_STATES.FULL) return 0;
|
|
1820
|
+
return state === DRAWER_STATES.LARGE ? 0 : 8;
|
|
1821
|
+
};
|
|
1822
|
+
const isFullScreen = state === DRAWER_STATES.FULL;
|
|
1823
|
+
const shouldShowTopToolbar = topToolbar && (!showTopToolbarInStates || showTopToolbarInStates.includes(state));
|
|
1824
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1825
|
+
shouldShowTopToolbar && !isFullScreen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[63px] left-0 w-full z-[1000] pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1826
|
+
TopToolbar,
|
|
1827
|
+
{
|
|
1828
|
+
...topToolbar,
|
|
1829
|
+
appearance: state === DRAWER_STATES.LARGE ? "gray" : "glass"
|
|
1830
|
+
}
|
|
1831
|
+
) }) }),
|
|
1832
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: state === DRAWER_STATES.LARGE && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1833
|
+
react.motion.div,
|
|
1834
|
+
{
|
|
1835
|
+
initial: { opacity: 0 },
|
|
1836
|
+
animate: { opacity: 1 },
|
|
1837
|
+
exit: { opacity: 0 },
|
|
1838
|
+
transition: { duration: 0.2 },
|
|
1839
|
+
className: "absolute inset-0 bg-black/60",
|
|
1840
|
+
onClick: () => setState(DRAWER_STATES.MEDIUM)
|
|
1841
|
+
}
|
|
1842
|
+
) }),
|
|
1843
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1844
|
+
react.motion.div,
|
|
1845
|
+
{
|
|
1846
|
+
className: cn(
|
|
1847
|
+
"absolute z-[999] overflow-hidden shadow-[0px_2px_4px_0px_rgba(0,0,0,0.02),0px_4px_16px_1px_rgba(0,0,0,0.06)]",
|
|
1848
|
+
!isFullScreen && "touch-none",
|
|
1849
|
+
getBackgroundStyle(),
|
|
1850
|
+
className
|
|
1851
|
+
),
|
|
1852
|
+
initial: {
|
|
1853
|
+
height: smallHeight,
|
|
1854
|
+
left: 8,
|
|
1855
|
+
right: 8,
|
|
1856
|
+
bottom: 8,
|
|
1857
|
+
borderTopLeftRadius: 32,
|
|
1858
|
+
borderTopRightRadius: 32,
|
|
1859
|
+
borderBottomLeftRadius: 44,
|
|
1860
|
+
borderBottomRightRadius: 44
|
|
1861
|
+
},
|
|
1862
|
+
onClick: (e) => e.stopPropagation(),
|
|
1863
|
+
onPointerDown: (e) => e.stopPropagation(),
|
|
1864
|
+
onMouseDown: (e) => e.stopPropagation(),
|
|
1865
|
+
onTouchStart: (e) => e.stopPropagation(),
|
|
1866
|
+
animate: {
|
|
1867
|
+
height: getHeight(),
|
|
1868
|
+
left: getMargins(),
|
|
1869
|
+
right: getMargins(),
|
|
1870
|
+
bottom: getMargins(),
|
|
1871
|
+
top: isFullScreen ? 0 : "auto",
|
|
1872
|
+
borderTopLeftRadius: isFullScreen ? 0 : 32,
|
|
1873
|
+
borderTopRightRadius: isFullScreen ? 0 : 32,
|
|
1874
|
+
borderBottomLeftRadius: state === DRAWER_STATES.LARGE || isFullScreen ? 0 : 44,
|
|
1875
|
+
borderBottomRightRadius: state === DRAWER_STATES.LARGE || isFullScreen ? 0 : 44
|
|
1876
|
+
},
|
|
1877
|
+
transition: { type: "spring", damping: 25, stiffness: 200 },
|
|
1878
|
+
drag: isFullScreen ? false : "y",
|
|
1879
|
+
dragConstraints: { top: 0, bottom: 0 },
|
|
1880
|
+
dragElastic: 0.2,
|
|
1881
|
+
onDragEnd,
|
|
1882
|
+
children: [
|
|
1883
|
+
state !== DRAWER_STATES.LARGE && state !== DRAWER_STATES.FULL && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 pointer-events-none border border-border rounded-[inherit]" }),
|
|
1884
|
+
isFullScreen ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col size-full h-full relative", children: [
|
|
1885
|
+
shouldShowTopToolbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full shrink-0 pointer-events-auto bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1886
|
+
TopToolbar,
|
|
1887
|
+
{
|
|
1888
|
+
...topToolbar,
|
|
1889
|
+
appearance: "gray"
|
|
1890
|
+
}
|
|
1891
|
+
) }),
|
|
1892
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-1 overflow-auto relative", children: fullScreenContent || children })
|
|
1893
|
+
] }) : (
|
|
1894
|
+
/* Normal Mode - Content Wrapper */
|
|
1895
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center size-full h-full relative", children: [
|
|
1896
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex flex-col items-center pt-[12px] pb-[8px] cursor-grab active:cursor-grabbing touch-none shrink-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-input h-[4px] rounded-[2px] w-[36px]" }) }),
|
|
1897
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
|
|
1898
|
+
"w-full flex-1 overflow-auto relative",
|
|
1899
|
+
// If Large state and Toolbar is visible, we need to push content down so it clears the fixed toolbar
|
|
1900
|
+
state === DRAWER_STATES.LARGE && shouldShowTopToolbar ? "pt-12" : ""
|
|
1901
|
+
), children: [
|
|
1902
|
+
children,
|
|
1903
|
+
fullScreenTrigger && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: fullScreenTrigger(goToFullScreen) })
|
|
1904
|
+
] }),
|
|
1905
|
+
bottomBar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full shrink-0 z-20 bg-transparent", children: bottomBar })
|
|
1906
|
+
] })
|
|
1907
|
+
)
|
|
1908
|
+
]
|
|
1909
|
+
}
|
|
1910
|
+
)
|
|
1911
|
+
] });
|
|
1912
|
+
}
|
|
1913
|
+
var SVG_PATHS2 = {
|
|
1914
|
+
back: "M7.35667 10.0006L13.1483 15.7923L11.97 16.9706L5 10.0006L11.97 3.0306L13.1483 4.20893L7.35667 10.0006Z",
|
|
1915
|
+
mic1: "M9.99951 2.5C9.33646 2.5 8.70058 2.76339 8.23174 3.23223C7.7629 3.70107 7.49951 4.33696 7.49951 5V10C7.49951 10.663 7.7629 11.2989 8.23174 11.7678C8.70058 12.2366 9.33646 12.5 9.99951 12.5C10.6625 12.5 11.2984 12.2366 11.7673 11.7678C12.2361 11.2989 12.4995 10.663 12.4995 10V5C12.4995 4.33696 12.2361 3.70107 11.7673 3.23223C11.2984 2.76339 10.6625 2.5 9.99951 2.5ZM9.99951 0.833333C10.5467 0.833333 11.0885 0.941107 11.594 1.1505C12.0995 1.3599 12.5589 1.66681 12.9458 2.05372C13.3327 2.44063 13.6396 2.89996 13.849 3.40549C14.0584 3.91101 14.1662 4.45283 14.1662 5V10C14.1662 11.1051 13.7272 12.1649 12.9458 12.9463C12.1644 13.7277 11.1046 14.1667 9.99951 14.1667C8.89444 14.1667 7.83463 13.7277 7.05323 12.9463C6.27183 12.1649 5.83284 11.1051 5.83284 10V5C5.83284 3.89493 6.27183 2.83512 7.05323 2.05372C7.83463 1.27232 8.89444 0.833333 9.99951 0.833333ZM1.82617 11.635L3.46117 11.3075C3.76483 12.8179 4.58203 14.1765 5.77393 15.1527C6.96583 16.1288 8.45891 16.6621 9.99951 16.6621C11.5401 16.6621 13.0332 16.1288 14.2251 15.1527C14.5861 14.857 14.9128 14.5262 15.2013 14.1667L16.6068 15.0786C15.0829 17.0578 12.6896 18.3333 9.99951 18.3333C5.95784 18.3333 2.58617 15.4542 1.82617 11.635Z",
|
|
1916
|
+
mic2: "M16.9276 9.56153C16.9833 9.42022 17.1833 9.42022 17.2391 9.56153L17.8816 11.1907C17.8986 11.2339 17.9328 11.268 17.9759 11.2851L19.6051 11.9276C19.7465 11.9833 19.7465 12.1833 19.6051 12.2391L17.9759 12.8816C17.9328 12.8986 17.8986 12.9328 17.8816 12.9759L17.2391 14.6051C17.1833 14.7465 16.9833 14.7465 16.9276 14.6051L16.2851 12.9759C16.268 12.9328 16.2339 12.8986 16.1907 12.8816L14.5615 12.2391C14.4202 12.1833 14.4202 11.9833 14.5615 11.9276L16.1907 11.2851C16.2339 11.268 16.268 11.2339 16.2851 11.1907L16.9276 9.56153Z",
|
|
1917
|
+
close1: "M10 18.3333C5.3975 18.3333 1.66667 14.6025 1.66667 10C1.66667 5.3975 5.3975 1.66667 10 1.66667C14.6025 1.66667 18.3333 5.3975 18.3333 10C18.3333 14.6025 14.6025 18.3333 10 18.3333Z",
|
|
1918
|
+
close2: "M7.64328 6.46416L9.99994 8.82166L12.3566 6.46416L13.5358 7.64332L11.1783 9.99999L13.5358 12.3567L12.3566 13.5358L9.99994 11.1783L7.64328 13.5358L6.46411 12.3567L8.82161 9.99999L6.46411 7.64332L7.64328 6.46416Z",
|
|
1919
|
+
expand: "M6.182 7.325L9.657 3.85L10.364 4.557L6.182 8.739L2 4.557L2.707 3.85L6.182 7.325Z"
|
|
1920
|
+
};
|
|
1921
|
+
function IconBack2() {
|
|
1922
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-[20px] text-foreground", fill: "none", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: SVG_PATHS2.back, fill: "currentColor" }) });
|
|
1923
|
+
}
|
|
1924
|
+
function IconMic() {
|
|
1925
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "block size-[20px] text-foreground", fill: "none", viewBox: "0 0 20 20", children: [
|
|
1926
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: SVG_PATHS2.mic1, fill: "currentColor" }),
|
|
1927
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: SVG_PATHS2.mic2, fill: "currentColor" })
|
|
1928
|
+
] });
|
|
1929
|
+
}
|
|
1930
|
+
function IconClose() {
|
|
1931
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "block size-[20px]", fill: "none", viewBox: "0 0 20 20", children: [
|
|
1932
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: SVG_PATHS2.close1, fill: "currentColor", className: "text-muted" }),
|
|
1933
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: SVG_PATHS2.close2, fill: "currentColor", className: "text-muted-foreground" })
|
|
1934
|
+
] });
|
|
1935
|
+
}
|
|
1936
|
+
function IconExpand() {
|
|
1937
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-[12px] text-muted-foreground", fill: "none", viewBox: "0 0 12 12", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: SVG_PATHS2.expand, fill: "currentColor" }) });
|
|
1938
|
+
}
|
|
1939
|
+
function SearchBox({
|
|
1940
|
+
value = "",
|
|
1941
|
+
onChange,
|
|
1942
|
+
placeholder = "\u5E95\u7EB9\u8BCD",
|
|
1943
|
+
variant = "card",
|
|
1944
|
+
mode = "default",
|
|
1945
|
+
// Default to standard behavior
|
|
1946
|
+
locationLabel = "\u5317\u4EAC\u5E02",
|
|
1947
|
+
dateRange,
|
|
1948
|
+
onBack,
|
|
1949
|
+
onSearch,
|
|
1950
|
+
onMic,
|
|
1951
|
+
onClear,
|
|
1952
|
+
className
|
|
1953
|
+
}) {
|
|
1954
|
+
const [isFocused, setIsFocused] = React__namespace.useState(false);
|
|
1955
|
+
const hasValue = value.length > 0;
|
|
1956
|
+
let interactionState = "default";
|
|
1957
|
+
if (isFocused) {
|
|
1958
|
+
interactionState = "inputting";
|
|
1959
|
+
} else if (hasValue) {
|
|
1960
|
+
interactionState = "result";
|
|
1961
|
+
}
|
|
1962
|
+
let btnLabel = "\u641C\u7D22";
|
|
1963
|
+
if (interactionState === "result" || mode.startsWith("scenic")) btnLabel = "\u53D6\u6D88";
|
|
1964
|
+
let btnVariant = "secondary";
|
|
1965
|
+
if (interactionState === "inputting") btnVariant = "primary";
|
|
1966
|
+
if (interactionState === "result" || mode.startsWith("scenic")) btnVariant = "secondary";
|
|
1967
|
+
const renderRightIcon = () => {
|
|
1968
|
+
if (interactionState === "inputting") {
|
|
1969
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1970
|
+
"button",
|
|
1971
|
+
{
|
|
1972
|
+
type: "button",
|
|
1973
|
+
onClick: () => {
|
|
1974
|
+
onChange?.("");
|
|
1975
|
+
onClear?.();
|
|
1976
|
+
},
|
|
1977
|
+
className: "shrink-0 p-1 rounded-full active:bg-black/5",
|
|
1978
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(IconClose, {})
|
|
1979
|
+
}
|
|
1980
|
+
);
|
|
1981
|
+
}
|
|
1982
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1983
|
+
"button",
|
|
1984
|
+
{
|
|
1985
|
+
type: "button",
|
|
1986
|
+
onClick: onMic,
|
|
1987
|
+
className: "shrink-0 p-1 rounded-full active:bg-black/5",
|
|
1988
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(IconMic, {})
|
|
1989
|
+
}
|
|
1990
|
+
);
|
|
1991
|
+
};
|
|
1992
|
+
const handleBtnClick = () => {
|
|
1993
|
+
if (interactionState === "result" || mode.startsWith("scenic")) {
|
|
1994
|
+
onChange?.("");
|
|
1995
|
+
onClear?.();
|
|
1996
|
+
} else {
|
|
1997
|
+
onSearch?.();
|
|
1998
|
+
}
|
|
1999
|
+
};
|
|
2000
|
+
const renderScenicPrefix = () => {
|
|
2001
|
+
if (mode === "default") return null;
|
|
2002
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[6px] mr-2 shrink-0", children: [
|
|
2003
|
+
mode === "scenic-date" && dateRange && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2004
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center rounded-[8px] px-[4px] backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start justify-center text-[12px] leading-[12px] text-muted-foreground font-sans gap-[4px]", children: [
|
|
2005
|
+
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: "whitespace-nowrap", children: [
|
|
2006
|
+
"\u4F4F ",
|
|
2007
|
+
dateRange.start
|
|
2008
|
+
] }),
|
|
2009
|
+
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: "whitespace-nowrap", children: [
|
|
2010
|
+
"\u79BB ",
|
|
2011
|
+
dateRange.end
|
|
2012
|
+
] })
|
|
2013
|
+
] }) }),
|
|
2014
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[26px] w-px bg-border mx-[2px]" })
|
|
2015
|
+
] }),
|
|
2016
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[2px] h-[28px] px-[4px] rounded-[8px] backdrop-blur-sm cursor-pointer active:bg-black/5 transition-colors", children: [
|
|
2017
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[14px] leading-[20px] text-muted-foreground font-sans whitespace-nowrap", children: locationLabel }),
|
|
2018
|
+
/* @__PURE__ */ jsxRuntime.jsx(IconExpand, {})
|
|
2019
|
+
] })
|
|
2020
|
+
] });
|
|
2021
|
+
};
|
|
2022
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
|
|
2023
|
+
"relative w-full h-[48px] rounded-[24px] flex items-center overflow-hidden transition-colors duration-200",
|
|
2024
|
+
// Map variant uses specific shadow from design
|
|
2025
|
+
variant === "card" ? "bg-card/50" : "bg-card shadow-[0px_2px_4px_0px_rgba(0,0,0,0.02),0px_4px_16px_1px_rgba(0,0,0,0.06)]",
|
|
2026
|
+
className
|
|
2027
|
+
), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center w-full h-full pl-[12px] pr-[4px] py-[4px] gap-[8px]", children: [
|
|
2028
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2029
|
+
"button",
|
|
2030
|
+
{
|
|
2031
|
+
type: "button",
|
|
2032
|
+
onClick: onBack,
|
|
2033
|
+
className: cn(
|
|
2034
|
+
"shrink-0 size-[20px] flex items-center justify-center active:opacity-70 transition-opacity"
|
|
2035
|
+
),
|
|
2036
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(IconBack2, {})
|
|
2037
|
+
}
|
|
2038
|
+
),
|
|
2039
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex items-center relative h-full min-w-0", children: [
|
|
2040
|
+
renderScenicPrefix(),
|
|
2041
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2042
|
+
"input",
|
|
2043
|
+
{
|
|
2044
|
+
type: "text",
|
|
2045
|
+
value,
|
|
2046
|
+
onChange: (e) => onChange?.(e.target.value),
|
|
2047
|
+
onFocus: () => setIsFocused(true),
|
|
2048
|
+
onBlur: () => setIsFocused(false),
|
|
2049
|
+
onKeyDown: (e) => {
|
|
2050
|
+
if (e.key === "Enter") {
|
|
2051
|
+
onSearch?.();
|
|
2052
|
+
e.target.blur();
|
|
2053
|
+
}
|
|
2054
|
+
},
|
|
2055
|
+
placeholder: mode.startsWith("scenic") ? "\u666F\u70B9" : placeholder,
|
|
2056
|
+
className: cn(
|
|
2057
|
+
"w-full bg-transparent border-none outline-none text-[16px] font-sans placeholder:font-medium",
|
|
2058
|
+
// Note: Scenic mode placeholder is actually darker/bolder in design
|
|
2059
|
+
// Colors
|
|
2060
|
+
interactionState === "default" && !mode.startsWith("scenic") ? "text-muted-foreground placeholder:text-muted-foreground placeholder:font-normal" : "text-foreground placeholder:text-foreground",
|
|
2061
|
+
// Alignment
|
|
2062
|
+
"text-left"
|
|
2063
|
+
)
|
|
2064
|
+
}
|
|
2065
|
+
),
|
|
2066
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 ml-2 flex items-center justify-center", children: renderRightIcon() })
|
|
2067
|
+
] }),
|
|
2068
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2069
|
+
Btn,
|
|
2070
|
+
{
|
|
2071
|
+
size: "middle",
|
|
2072
|
+
variant: btnVariant,
|
|
2073
|
+
label: btnLabel,
|
|
2074
|
+
onClick: handleBtnClick,
|
|
2075
|
+
icon: null
|
|
2076
|
+
}
|
|
2077
|
+
)
|
|
2078
|
+
] }) });
|
|
2079
|
+
}
|
|
2080
|
+
var ERROR_IMG_SRC = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg==";
|
|
2081
|
+
function ImageWithFallback(props) {
|
|
2082
|
+
const [didError, setDidError] = React.useState(false);
|
|
2083
|
+
const handleError = () => {
|
|
2084
|
+
setDidError(true);
|
|
2085
|
+
};
|
|
2086
|
+
const { src, alt, style, className, ...rest } = props;
|
|
2087
|
+
return didError ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
2088
|
+
"div",
|
|
2089
|
+
{
|
|
2090
|
+
className: `inline-block bg-gray-100 text-center align-middle ${className ?? ""}`,
|
|
2091
|
+
style,
|
|
2092
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-full h-full", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: ERROR_IMG_SRC, alt: "Error loading image", ...rest, "data-original-url": src }) })
|
|
2093
|
+
}
|
|
2094
|
+
) : /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, className, style, ...rest, onError: handleError });
|
|
2095
|
+
}
|
|
2096
|
+
|
|
2097
|
+
// imports/svg-51gau6u5ee.ts
|
|
2098
|
+
var svg_51gau6u5ee_default = {
|
|
2099
|
+
p19ad01c0: "M5.12969 0.157127C5.03047 0.104737 4.91719 0.0914458 4.80973 0.119583C4.71989 0.141109 4.63825 0.191325 4.5756 0.263601C4.28445 0.609616 4.11309 0.972956 4.06214 1.3546C3.94771 2.21299 3.99058 2.53978 4.07232 2.89608C4.14902 3.19779 4.25179 3.49118 4.37929 3.77246C4.84558 3.29774 5.16401 2.69848 5.33354 1.97806C5.44475 1.50796 5.45069 1.01635 5.35087 0.543331L5.31771 0.397238C5.30382 0.345332 5.27991 0.297133 5.24752 0.255767C5.21513 0.214402 5.17499 0.180795 5.12969 0.157127Z",
|
|
2100
|
+
p1b043080: "M9.04914 9.98438L8.18976 11.502C8.07026 11.7132 7.76898 11.7222 7.63703 11.5186L4.16925 6.16504C4.03002 5.95013 4.18378 5.66625 4.43976 5.66602H6.08332L9.04914 9.98438ZM11.1263 5.66602C11.3835 5.66623 11.5374 5.9523 11.3958 6.16699L10.1878 7.99414L8.64875 5.66602H11.1263Z",
|
|
2101
|
+
p28b79500: "M6.94224 3.12768C6.99532 2.82715 6.97349 2.48916 6.63612 2.53996C6.29777 2.59091 5.777 2.86381 5.13143 3.77485C4.70064 4.38299 4.46978 5.16194 4.43919 6.11433C5.08899 5.7577 5.61398 5.37219 6.01438 4.95936C6.61466 4.33963 6.88964 3.42813 6.94224 3.12768Z",
|
|
2102
|
+
p295c2000: "M5.15316 5.75933H8.67112V4.59029H9.74274V5.75933H10.9659V6.76601H9.74274V9.78604C9.74274 10.5221 9.38553 10.901 8.69277 10.901H7.43713L7.19899 9.86181C7.58867 9.90511 7.9567 9.93758 8.32474 9.93758C8.55205 9.93758 8.67112 9.78604 8.67112 9.5046V7.09074C7.87011 8.38968 6.83096 9.42883 5.55367 10.2082L4.94749 9.20152C6.18149 8.59535 7.16651 7.78351 7.90258 6.76601H5.15316V5.75933ZM12.5246 3.17228V12.8277H11.4422V12.4489H4.55781V12.8277H3.47536V3.17228H12.5246ZM4.55781 11.4314H11.4422V4.18978H4.55781V11.4314Z",
|
|
2103
|
+
p36cc0c80: "M6.34691 7.57726C7.11147 6.86797 7.30164 6.05711 7.30642 5.75046C7.31155 5.44269 6.84038 5.47989 6.44256 5.63409C6.04523 5.78821 5.5685 5.93929 4.73464 6.73778C3.89938 7.53702 3.38463 8.57249 3.24595 8.97912C3.10727 9.38576 3.65184 9.11517 4.23602 8.88737C5.00968 8.59536 5.7256 8.15104 6.34691 7.57726Z",
|
|
2104
|
+
p3ea31fd2: "M4.70848 2.11136C4.99195 1.59366 5.5974 1.34288 6.16391 1.5085L7.64745 1.94222C7.8778 2.00957 8.12262 2.00957 8.35298 1.94222L9.83652 1.5085C10.403 1.34288 11.0085 1.59366 11.2919 2.11136L12.0343 3.46707C12.1495 3.67757 12.3227 3.85069 12.5332 3.96595L13.8889 4.70829C14.4066 4.99176 14.6574 5.59721 14.4917 6.16372L14.058 7.64726C13.9907 7.87761 13.9907 8.12243 14.058 8.35279L14.4917 9.83633C14.6574 10.4028 14.4066 11.0083 13.8889 11.2918L12.5332 12.0341C12.3227 12.1494 12.1495 12.3225 12.0343 12.533L11.2919 13.8887C11.0085 14.4064 10.403 14.6572 9.83652 14.4915L8.35298 14.0578C8.12262 13.9905 7.8778 13.9905 7.64745 14.0578L6.1639 14.4915C5.5974 14.6572 4.99195 14.4064 4.70848 13.8887L3.96614 12.533C3.85088 12.3225 3.67776 12.1494 3.46726 12.0341L2.11155 11.2918C1.59385 11.0083 1.34307 10.4028 1.50869 9.83633L1.94241 8.35279C2.00976 8.12243 2.00976 7.87761 1.94241 7.64726L1.50869 6.16371C1.34307 5.59721 1.59385 4.99176 2.11155 4.70829L3.46726 3.96595C3.67776 3.85069 3.85088 3.67757 3.96614 3.46707L4.70848 2.11136Z",
|
|
2105
|
+
pfcaf500: "M5.37721 9.32883C6.03218 9.27468 6.3788 9.58413 6.31905 9.85672C6.25874 10.1289 5.68192 10.8779 4.59238 11.2177C3.50395 11.5584 2.39323 11.6453 1.97298 11.7086C1.55323 11.7718 1.04955 11.7823 1.27422 11.509C1.80113 10.9003 2.42492 10.3969 3.11643 10.0223C4.0458 9.52878 4.72281 9.38344 5.37721 9.32883Z"
|
|
2106
|
+
};
|
|
2107
|
+
function VipIcon() {
|
|
2108
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative shrink-0 size-[16px]", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 16 16", children: [
|
|
2109
|
+
/* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
|
|
2110
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svg_51gau6u5ee_default.p3ea31fd2, fill: "#FFCD81" }),
|
|
2111
|
+
/* @__PURE__ */ jsxRuntime.jsx("g", { filter: "url(#filter0_d_vip)", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svg_51gau6u5ee_default.p1b043080, fill: "white" }) })
|
|
2112
|
+
] }),
|
|
2113
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("filter", { colorInterpolationFilters: "sRGB", filterUnits: "userSpaceOnUse", height: "9.32367", id: "filter0_d_vip", width: "10.6567", x: "2.45487", y: "4.83509", children: [
|
|
2114
|
+
/* @__PURE__ */ jsxRuntime.jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
|
|
2115
|
+
/* @__PURE__ */ jsxRuntime.jsx("feColorMatrix", { in: "SourceAlpha", result: "hardAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" }),
|
|
2116
|
+
/* @__PURE__ */ jsxRuntime.jsx("feOffset", { dy: "0.830926" }),
|
|
2117
|
+
/* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "0.830926" }),
|
|
2118
|
+
/* @__PURE__ */ jsxRuntime.jsx("feComposite", { in2: "hardAlpha", operator: "out" }),
|
|
2119
|
+
/* @__PURE__ */ jsxRuntime.jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 1 0 0 0 0 0.432 0 0 0 0 0.1125 0 0 0 0.1 0" }),
|
|
2120
|
+
/* @__PURE__ */ jsxRuntime.jsx("feBlend", { in2: "BackgroundImageFix", mode: "normal", result: "effect1_dropShadow_vip" }),
|
|
2121
|
+
/* @__PURE__ */ jsxRuntime.jsx("feBlend", { in: "SourceGraphic", in2: "effect1_dropShadow_vip", mode: "normal", result: "shape" })
|
|
2122
|
+
] }) })
|
|
2123
|
+
] }) });
|
|
2124
|
+
}
|
|
2125
|
+
function WheatIcon() {
|
|
2126
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[12px] relative shrink-0 w-[8px]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 8 12", children: /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
|
|
2127
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svg_51gau6u5ee_default.pfcaf500, fill: "#A87B00" }),
|
|
2128
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svg_51gau6u5ee_default.p19ad01c0, fill: "#A87B00", opacity: "0.6" }),
|
|
2129
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svg_51gau6u5ee_default.p28b79500, fill: "#A87B00", opacity: "0.7" }),
|
|
2130
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svg_51gau6u5ee_default.p36cc0c80, fill: "#A87B00", opacity: "0.8" })
|
|
2131
|
+
] }) }) });
|
|
2132
|
+
}
|
|
2133
|
+
function RankBadge({ text }) {
|
|
2134
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-[#fff9e0] box-border flex items-center h-[20px] px-[4px] rounded-[4px]", children: [
|
|
2135
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none rotate-[180deg] scale-y-[-100%]", children: /* @__PURE__ */ jsxRuntime.jsx(WheatIcon, {}) }),
|
|
2136
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-sans text-[#a87b00] text-[12px] leading-[12px] whitespace-pre", children: text }),
|
|
2137
|
+
/* @__PURE__ */ jsxRuntime.jsx(WheatIcon, {})
|
|
2138
|
+
] });
|
|
2139
|
+
}
|
|
2140
|
+
function Tag2({ text }) {
|
|
2141
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "backdrop-blur-sm bg-secondary h-[20px] px-[4px] flex items-center justify-center rounded-[4px]", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-sans text-[12px] leading-[12px] text-muted-foreground whitespace-pre", children: text }) });
|
|
2142
|
+
}
|
|
2143
|
+
function Divider() {
|
|
2144
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[10px] w-0 relative shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 1 10", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0.25 0V10", stroke: "rgba(178, 183, 198, 1)", strokeWidth: "0.5" }) }) }) });
|
|
2145
|
+
}
|
|
2146
|
+
function POIListItem({ poi, onClick, highlighted }) {
|
|
2147
|
+
const highlightText = (text, query) => {
|
|
2148
|
+
if (!query) return text;
|
|
2149
|
+
const parts = text.split(new RegExp(`(${query})`, "gi"));
|
|
2150
|
+
return parts.map(
|
|
2151
|
+
(part, i) => part.toLowerCase() === query.toLowerCase() ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: part }, i) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: part }, i)
|
|
2152
|
+
);
|
|
2153
|
+
};
|
|
2154
|
+
const rating = (4.5 + Math.random() * 0.8).toFixed(1);
|
|
2155
|
+
const pricePerPerson = Math.floor(30 + Math.random() * 100);
|
|
2156
|
+
const categoryName = poi.category?.split(":")[1] || poi.category || "\u9910\u5385";
|
|
2157
|
+
const distance = poi._distance ? `${Math.floor(poi._distance)}\u7C73` : "901\u7C73";
|
|
2158
|
+
const isTopRanked = Math.random() > 0.6;
|
|
2159
|
+
const rankText = isTopRanked ? "\u5317\u4EAC\u7F8E\u98DF\u699C \u7B2C2\u540D" : null;
|
|
2160
|
+
const fallbackImages = [
|
|
2161
|
+
"photo-1546069901-ba9599a7e63c",
|
|
2162
|
+
// ramen bowl
|
|
2163
|
+
"photo-1504674900247-0877df9cc836",
|
|
2164
|
+
// food dish
|
|
2165
|
+
"photo-1555939594-58d7cb561ad1",
|
|
2166
|
+
// burger
|
|
2167
|
+
"photo-1565299624946-b28f40a0ae38",
|
|
2168
|
+
// pizza
|
|
2169
|
+
"photo-1540189549336-e6e99c3679fe",
|
|
2170
|
+
// salad
|
|
2171
|
+
"photo-1567620905732-2d1ec7ab7445",
|
|
2172
|
+
// pancakes
|
|
2173
|
+
"photo-1512621776951-a57141f2eefd",
|
|
2174
|
+
// sushi
|
|
2175
|
+
"photo-1529042410759-befb1204b468"
|
|
2176
|
+
// dessert
|
|
2177
|
+
];
|
|
2178
|
+
const imageIndex = Math.abs(poi.id.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0)) % fallbackImages.length;
|
|
2179
|
+
const fallbackImage = `https://images.unsplash.com/${fallbackImages[imageIndex]}?w=200&h=200&fit=crop`;
|
|
2180
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2181
|
+
"div",
|
|
2182
|
+
{
|
|
2183
|
+
className: "flex gap-[8px] py-[12px] border-b border-border cursor-pointer active:bg-muted/20 transition-colors",
|
|
2184
|
+
onClick,
|
|
2185
|
+
children: [
|
|
2186
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 w-[91px] h-[91px] rounded-[8px] overflow-hidden bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2187
|
+
ImageWithFallback,
|
|
2188
|
+
{
|
|
2189
|
+
src: poi.photo || fallbackImage,
|
|
2190
|
+
alt: poi.title,
|
|
2191
|
+
className: "w-full h-full object-cover"
|
|
2192
|
+
}
|
|
2193
|
+
) }),
|
|
2194
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex flex-col gap-[8px]", children: [
|
|
2195
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[6px]", children: [
|
|
2196
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[4px] items-center", children: [
|
|
2197
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-sans text-[16px] leading-[16px] text-foreground overflow-ellipsis overflow-hidden whitespace-nowrap", children: highlighted ? highlightText(poi.title, highlighted) : poi.title }),
|
|
2198
|
+
Math.random() > 0.7 && /* @__PURE__ */ jsxRuntime.jsx(VipIcon, {})
|
|
2199
|
+
] }),
|
|
2200
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[4px] items-center h-[20px] overflow-x-auto no-scrollbar", children: [
|
|
2201
|
+
rankText && /* @__PURE__ */ jsxRuntime.jsx(RankBadge, { text: rankText }),
|
|
2202
|
+
/* @__PURE__ */ jsxRuntime.jsx(Tag2, { text: "\u7EBF\u4E0A\u6392\u961F" }),
|
|
2203
|
+
/* @__PURE__ */ jsxRuntime.jsx(Tag2, { text: "\u83DC\u54C1\u5065\u5EB7" })
|
|
2204
|
+
] })
|
|
2205
|
+
] }),
|
|
2206
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[4px]", children: [
|
|
2207
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[6px] items-center text-[12px] leading-[16px] text-muted-foreground font-sans overflow-x-auto no-scrollbar", children: [
|
|
2208
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "whitespace-nowrap", children: [
|
|
2209
|
+
rating,
|
|
2210
|
+
"\u5206"
|
|
2211
|
+
] }),
|
|
2212
|
+
/* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
|
|
2213
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "whitespace-nowrap", children: [
|
|
2214
|
+
"\xA5",
|
|
2215
|
+
pricePerPerson,
|
|
2216
|
+
"/\u4EBA"
|
|
2217
|
+
] }),
|
|
2218
|
+
/* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
|
|
2219
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: categoryName }),
|
|
2220
|
+
/* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
|
|
2221
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: "5\u5206\u949F\u524D\u6709\u4EBA\u6765\u8FC7" })
|
|
2222
|
+
] }),
|
|
2223
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[8px] items-center text-[12px] leading-[16px] text-muted-foreground font-sans", children: [
|
|
2224
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: distance }),
|
|
2225
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "overflow-ellipsis overflow-hidden truncate flex-1", children: poi.address })
|
|
2226
|
+
] }),
|
|
2227
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[4px] items-center rounded-[2px] overflow-hidden", children: [
|
|
2228
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative shrink-0 size-[16px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
|
|
2229
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { fill: "#FFEFE5", height: "16", rx: "2", width: "16" }),
|
|
2230
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: svg_51gau6u5ee_default.p295c2000, fill: "#FA6800" })
|
|
2231
|
+
] }) }) }) }),
|
|
2232
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex gap-[3px] items-center", children: [
|
|
2233
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-sans text-[#fa6800] text-[12px] leading-[16px] whitespace-nowrap", children: "\xA520.8" }),
|
|
2234
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-sans text-[12px] leading-[16px] text-muted-foreground whitespace-nowrap", children: "6.1\u6298" }),
|
|
2235
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 font-sans text-[12px] leading-[16px] text-muted-foreground overflow-ellipsis overflow-hidden whitespace-nowrap", children: "(\u65E5\u843D\u5FAE\u91BA)\u72EE\u738B\u7CBE\u917F\u8309\u8389\u767D\u5564 \u5468\u4E00\u81F3\u5468\u65E5\u514D" })
|
|
2236
|
+
] })
|
|
2237
|
+
] })
|
|
2238
|
+
] })
|
|
2239
|
+
] })
|
|
2240
|
+
]
|
|
2241
|
+
}
|
|
2242
|
+
);
|
|
2243
|
+
}
|
|
2244
|
+
function PoiItem({
|
|
2245
|
+
imageUrl,
|
|
2246
|
+
title,
|
|
2247
|
+
rating,
|
|
2248
|
+
distance,
|
|
2249
|
+
description,
|
|
2250
|
+
className
|
|
2251
|
+
}) {
|
|
2252
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
|
|
2253
|
+
"flex gap-[var(--spacing-xs)] py-[var(--spacing-sm)] px-[var(--spacing-base)] border-b border-border last:border-0",
|
|
2254
|
+
className
|
|
2255
|
+
), children: [
|
|
2256
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 w-[91px] h-[91px]", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2257
|
+
ImageWithFallback,
|
|
2258
|
+
{
|
|
2259
|
+
src: imageUrl,
|
|
2260
|
+
alt: title,
|
|
2261
|
+
className: "w-full h-full rounded-[var(--radius-sm)] object-cover"
|
|
2262
|
+
}
|
|
2263
|
+
) }),
|
|
2264
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex flex-col gap-[var(--spacing-xxs)]", children: [
|
|
2265
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground font-medium text-base truncate", children: title }),
|
|
2266
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--spacing-xs)] text-xs text-muted-foreground", children: [
|
|
2267
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
2268
|
+
rating,
|
|
2269
|
+
"\u5206"
|
|
2270
|
+
] }),
|
|
2271
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u2022" }),
|
|
2272
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: distance })
|
|
2273
|
+
] }),
|
|
2274
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground line-clamp-2", children: description })
|
|
2275
|
+
] })
|
|
2276
|
+
] });
|
|
2277
|
+
}
|
|
2278
|
+
function NewsItem({
|
|
2279
|
+
title,
|
|
2280
|
+
source,
|
|
2281
|
+
time,
|
|
2282
|
+
category,
|
|
2283
|
+
variant = "default",
|
|
2284
|
+
className
|
|
2285
|
+
}) {
|
|
2286
|
+
const categoryStyles = {
|
|
2287
|
+
primary: "bg-primary/10 text-primary",
|
|
2288
|
+
accent: "bg-accent/10 text-accent",
|
|
2289
|
+
default: "bg-muted text-muted-foreground"
|
|
2290
|
+
};
|
|
2291
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-12 gap-[var(--spacing-xs)] py-[var(--spacing-sm)]", className), children: [
|
|
2292
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-8 flex flex-col gap-[var(--spacing-xxs)]", children: [
|
|
2293
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground text-sm font-medium line-clamp-2", children: title }),
|
|
2294
|
+
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
|
|
2295
|
+
time,
|
|
2296
|
+
" \xB7 ",
|
|
2297
|
+
source
|
|
2298
|
+
] })
|
|
2299
|
+
] }),
|
|
2300
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
|
|
2301
|
+
"col-span-4 rounded-[var(--radius-sm)] h-20 flex items-center justify-center text-xs font-medium",
|
|
2302
|
+
categoryStyles[variant]
|
|
2303
|
+
), children: category })
|
|
2304
|
+
] });
|
|
2305
|
+
}
|
|
2306
|
+
function Capsule({ more = false }) {
|
|
2307
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center h-[48px] bg-card rounded-[24px] px-4 shadow-sm border border-border shrink-0", children: [
|
|
2308
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center mr-3", children: [
|
|
2309
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground leading-none mb-1", children: "\u8DDD\u79BB" }),
|
|
2310
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[14px] font-semibold leading-none", children: "2.5 km" })
|
|
2311
|
+
] }),
|
|
2312
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-6 bg-border mx-2" }),
|
|
2313
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center", children: [
|
|
2314
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground leading-none mb-1", children: "\u9884\u8BA1" }),
|
|
2315
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[14px] font-semibold leading-none", children: "15 min" })
|
|
2316
|
+
] }),
|
|
2317
|
+
more && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2318
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-6 bg-border mx-3" }),
|
|
2319
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { className: "p-1 hover:bg-secondary/50 rounded-full transition-colors", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "text-foreground", children: [
|
|
2320
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 3C8.55228 3 9 2.55228 9 2C9 1.44772 8.55228 1 8 1C7.44772 1 7 1.44772 7 2C7 2.55228 7.44772 3 8 3Z", fill: "currentColor" }),
|
|
2321
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 9C8.55228 9 9 8.55228 9 8C9 7.44772 8.55228 7 8 7C7.44772 7 7 7.44772 7 8C7 8.55228 7.44772 9 8 9Z", fill: "currentColor" }),
|
|
2322
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 15C8.55228 15 9 14.55228 9 14C9 13.44772 8.55228 13 8 13C7.44772 13 7 13.44772 7 14C7 14.55228 7.44772 15 8 15Z", fill: "currentColor" })
|
|
2323
|
+
] }) })
|
|
2324
|
+
] })
|
|
2325
|
+
] });
|
|
2326
|
+
}
|
|
2327
|
+
function BottomActionButtons({
|
|
2328
|
+
mode,
|
|
2329
|
+
leftContent = "none",
|
|
2330
|
+
mainText = "\u4E3B\u64CD\u4F5C",
|
|
2331
|
+
secondaryText = "\u526F\u64CD\u4F5C",
|
|
2332
|
+
hasShadow = false,
|
|
2333
|
+
onMainClick,
|
|
2334
|
+
onSecondaryClick,
|
|
2335
|
+
className
|
|
2336
|
+
}) {
|
|
2337
|
+
const shadowClass = hasShadow ? "shadow-[0px_7px_24px_0px_rgba(0,0,0,0.06),0px_16px_29px_0px_rgba(0,0,0,0.04)]" : "";
|
|
2338
|
+
const baseButtonClass = cn(
|
|
2339
|
+
"h-[48px] rounded-[50px] flex items-center justify-center px-[16px] whitespace-nowrap text-[16px] font-medium font-sans transition-opacity hover:opacity-90 relative overflow-hidden",
|
|
2340
|
+
"active:after:absolute active:after:inset-0 active:after:bg-foreground/10 active:after:content-[''] active:after:rounded-[inherit]"
|
|
2341
|
+
);
|
|
2342
|
+
const mainButtonClass = cn(baseButtonClass, "bg-primary text-primary-foreground", shadowClass);
|
|
2343
|
+
const secondaryButtonClass = cn(baseButtonClass, "bg-secondary text-secondary-foreground", shadowClass);
|
|
2344
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
|
|
2345
|
+
"w-full px-[16px] py-[12px] bg-background/0 pointer-events-auto",
|
|
2346
|
+
// Removed bg-background to allow transparency if parent handles it, but parent usually sets it. Changed to transparent/0 for flexibility as parent container has styles.
|
|
2347
|
+
className
|
|
2348
|
+
), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center w-full gap-[12px]", children: [
|
|
2349
|
+
leftContent === "search" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2350
|
+
SearchBox,
|
|
2351
|
+
{
|
|
2352
|
+
className: "h-[48px]",
|
|
2353
|
+
variant: "card",
|
|
2354
|
+
placeholder: "\u641C\u5730\u70B9\u3001\u67E5\u516C\u4EA4\u3001\u627E\u8DEF\u7EBF"
|
|
2355
|
+
}
|
|
2356
|
+
) }),
|
|
2357
|
+
leftContent === "capsule" && /* @__PURE__ */ jsxRuntime.jsx(Capsule, {}),
|
|
2358
|
+
leftContent === "capsule-more" && /* @__PURE__ */ jsxRuntime.jsx(Capsule, { more: true }),
|
|
2359
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
|
|
2360
|
+
"flex items-center",
|
|
2361
|
+
leftContent === "search" ? "shrink-0" : mode === "single" ? "flex-1 justify-center" : "flex-1 gap-[12px]",
|
|
2362
|
+
// If capsule is present, it's fixed width, so buttons take remaining space
|
|
2363
|
+
(leftContent === "capsule" || leftContent === "capsule-more") && "flex-1"
|
|
2364
|
+
), children: /* @__PURE__ */ jsxRuntime.jsxs(react.AnimatePresence, { mode: "popLayout", initial: false, children: [
|
|
2365
|
+
mode !== "single" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2366
|
+
react.motion.button,
|
|
2367
|
+
{
|
|
2368
|
+
layout: true,
|
|
2369
|
+
initial: { opacity: 0, width: 0, scale: 0.8 },
|
|
2370
|
+
animate: {
|
|
2371
|
+
opacity: 1,
|
|
2372
|
+
scale: 1,
|
|
2373
|
+
width: "auto",
|
|
2374
|
+
flex: mode === "weighted" ? 1 : 1
|
|
2375
|
+
},
|
|
2376
|
+
exit: { opacity: 0, width: 0, scale: 0.8 },
|
|
2377
|
+
transition: { type: "spring", bounce: 0.2, duration: 0.4 },
|
|
2378
|
+
className: cn(secondaryButtonClass),
|
|
2379
|
+
onClick: onSecondaryClick,
|
|
2380
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-full text-center overflow-hidden text-ellipsis", children: secondaryText })
|
|
2381
|
+
},
|
|
2382
|
+
"secondary"
|
|
2383
|
+
),
|
|
2384
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2385
|
+
react.motion.button,
|
|
2386
|
+
{
|
|
2387
|
+
layout: true,
|
|
2388
|
+
initial: { flex: 1 },
|
|
2389
|
+
animate: {
|
|
2390
|
+
flex: mode === "weighted" ? 2 : 1
|
|
2391
|
+
},
|
|
2392
|
+
transition: { type: "spring", bounce: 0.2, duration: 0.4 },
|
|
2393
|
+
className: cn(mainButtonClass),
|
|
2394
|
+
onClick: onMainClick,
|
|
2395
|
+
children: mainText
|
|
2396
|
+
},
|
|
2397
|
+
"main"
|
|
2398
|
+
)
|
|
2399
|
+
] }) })
|
|
2400
|
+
] }) });
|
|
2401
|
+
}
|
|
2402
|
+
|
|
2403
|
+
// imports/svg-xnzljasnkm.ts
|
|
2404
|
+
var svg_xnzljasnkm_default = {
|
|
2405
|
+
p2b6d0380: "M15.0258 13.8475L18.595 17.4158L17.4158 18.595L13.8475 15.0258C12.5198 16.0902 10.8683 16.6691 9.16667 16.6667C5.02667 16.6667 1.66667 13.3067 1.66667 9.16667C1.66667 5.02667 5.02667 1.66667 9.16667 1.66667C13.3067 1.66667 16.6667 5.02667 16.6667 9.16667C16.6691 10.8683 16.0902 12.5198 15.0258 13.8475ZM13.3542 13.2292C14.4118 12.1416 15.0024 10.6837 15 9.16667C15 5.94333 12.3892 3.33333 9.16667 3.33333C5.94333 3.33333 3.33333 5.94333 3.33333 9.16667C3.33333 12.3892 5.94333 15 9.16667 15C10.6837 15.0024 12.1416 14.4118 13.2292 13.3542L13.3542 13.2292V13.2292Z",
|
|
2406
|
+
p3edcb700: "M15.8333 15.8344V8.16692L10 3.56525L4.16667 8.16692V15.8344H15.8333ZM17.5 16.6678C17.5 16.8888 17.4122 17.1007 17.2559 17.257C17.0996 17.4133 16.8877 17.5011 16.6667 17.5011H3.33333C3.11232 17.5011 2.90036 17.4133 2.74408 17.257C2.5878 17.1007 2.5 16.8888 2.5 16.6678V7.76275C2.49995 7.63688 2.52842 7.51263 2.58326 7.39933C2.63811 7.28603 2.71791 7.18663 2.81667 7.10859L9.48333 1.84942C9.63046 1.73316 9.81249 1.66992 10 1.66992C10.1875 1.66992 10.3695 1.73316 10.5167 1.84942L17.1833 7.10775C17.2822 7.18588 17.3621 7.28542 17.4169 7.39887C17.4718 7.51232 17.5002 7.63674 17.5 7.76275V16.6678V16.6678ZM5.83333 10.0011H7.5C7.5 10.6641 7.76339 11.3 8.23223 11.7689C8.70107 12.2377 9.33696 12.5011 10 12.5011C10.663 12.5011 11.2989 12.2377 11.7678 11.7689C12.2366 11.3 12.5 10.6641 12.5 10.0011H14.1667C14.1667 11.1062 13.7277 12.166 12.9463 12.9474C12.1649 13.7288 11.1051 14.1678 10 14.1678C8.89493 14.1678 7.83512 13.7288 7.05372 12.9474C6.27232 12.166 5.83333 11.1062 5.83333 10.0011V10.0011Z",
|
|
2407
|
+
p64ccaf0: "M4.16667 8.33333C3.25 8.33333 2.5 9.08333 2.5 10C2.5 10.9167 3.25 11.6667 4.16667 11.6667C5.08333 11.6667 5.83333 10.9167 5.83333 10C5.83333 9.08333 5.08333 8.33333 4.16667 8.33333ZM15.8333 8.33333C14.9167 8.33333 14.1667 9.08333 14.1667 10C14.1667 10.9167 14.9167 11.6667 15.8333 11.6667C16.75 11.6667 17.5 10.9167 17.5 10C17.5 9.08333 16.75 8.33333 15.8333 8.33333ZM10 8.33333C9.08333 8.33333 8.33333 9.08333 8.33333 10C8.33333 10.9167 9.08333 11.6667 10 11.6667C10.9167 11.6667 11.6667 10.9167 11.6667 10C11.6667 9.08333 10.9167 8.33333 10 8.33333Z"
|
|
2408
|
+
};
|
|
2409
|
+
function IconSearch() {
|
|
2410
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative shrink-0 size-[20px]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svg_xnzljasnkm_default.p2b6d0380, fill: "currentColor", className: "text-foreground" }) }) });
|
|
2411
|
+
}
|
|
2412
|
+
function IconHome() {
|
|
2413
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative shrink-0 size-[20px]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svg_xnzljasnkm_default.p3edcb700, fill: "currentColor", className: "text-foreground" }) }) });
|
|
2414
|
+
}
|
|
2415
|
+
function IconMore2() {
|
|
2416
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative shrink-0 size-[20px]", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "block size-full", fill: "none", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: svg_xnzljasnkm_default.p64ccaf0, fill: "currentColor", className: "text-foreground" }) }) });
|
|
2417
|
+
}
|
|
2418
|
+
function SearchPill({ text = "\u6587\u6848" }) {
|
|
2419
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "box-border flex gap-[4px] h-full items-center justify-center px-[12px] py-0 relative rounded-[50px] shrink-0 bg-card/50 hover:bg-card/80 transition-colors cursor-pointer", children: [
|
|
2420
|
+
/* @__PURE__ */ jsxRuntime.jsx(IconSearch, {}),
|
|
2421
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "leading-[24px] text-[16px] text-foreground whitespace-pre", children: text })
|
|
2422
|
+
] });
|
|
2423
|
+
}
|
|
2424
|
+
function IconButton({ children, onClick, active }) {
|
|
2425
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2426
|
+
"div",
|
|
2427
|
+
{
|
|
2428
|
+
className: cn(
|
|
2429
|
+
"box-border flex flex-col gap-[4px] h-full items-center justify-center px-[14px] py-[11px] relative rounded-[50px] shrink-0 w-[48px] cursor-pointer transition-colors",
|
|
2430
|
+
active ? "bg-black/5" : "hover:bg-black/5"
|
|
2431
|
+
),
|
|
2432
|
+
onClick,
|
|
2433
|
+
children
|
|
2434
|
+
}
|
|
2435
|
+
);
|
|
2436
|
+
}
|
|
2437
|
+
function Separator() {
|
|
2438
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[16px] items-center justify-center relative shrink-0 w-[1px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[1px] h-[16px] bg-black/10" }) });
|
|
2439
|
+
}
|
|
2440
|
+
function BottomToolbar({
|
|
2441
|
+
leftMode = "search",
|
|
2442
|
+
rightMode = "dual",
|
|
2443
|
+
actionSheetVariant = "default",
|
|
2444
|
+
rightData = { primaryLabel: "\u64CD\u4F5C", secondaryLabel: "\u64CD\u4F5C" },
|
|
2445
|
+
leftData = { searchText: "\u6587\u6848" }
|
|
2446
|
+
}) {
|
|
2447
|
+
const [showActionSheet, setShowActionSheet] = React.useState(false);
|
|
2448
|
+
const toolbarRef = React.useRef(null);
|
|
2449
|
+
const [containerWidth, setContainerWidth] = React.useState(390);
|
|
2450
|
+
React.useEffect(() => {
|
|
2451
|
+
if (toolbarRef.current) {
|
|
2452
|
+
const updateWidth = () => {
|
|
2453
|
+
const width = toolbarRef.current?.offsetWidth || 390;
|
|
2454
|
+
setContainerWidth(width);
|
|
2455
|
+
};
|
|
2456
|
+
updateWidth();
|
|
2457
|
+
const resizeObserver = new ResizeObserver(updateWidth);
|
|
2458
|
+
resizeObserver.observe(toolbarRef.current);
|
|
2459
|
+
return () => resizeObserver.disconnect();
|
|
2460
|
+
}
|
|
2461
|
+
}, []);
|
|
2462
|
+
React.useEffect(() => {
|
|
2463
|
+
const handleClickOutside = (event) => {
|
|
2464
|
+
if (toolbarRef.current && !toolbarRef.current.contains(event.target) && showActionSheet) {
|
|
2465
|
+
setShowActionSheet(false);
|
|
2466
|
+
}
|
|
2467
|
+
};
|
|
2468
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
2469
|
+
return () => {
|
|
2470
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
2471
|
+
};
|
|
2472
|
+
}, [showActionSheet]);
|
|
2473
|
+
const isSmall = containerWidth < 360;
|
|
2474
|
+
const isMedium = containerWidth >= 360 && containerWidth < 416;
|
|
2475
|
+
const isLarge = containerWidth >= 416;
|
|
2476
|
+
const groupGap = isSmall ? "gap-[8px]" : isMedium ? "gap-[16px]" : "";
|
|
2477
|
+
const buttonPaddingX = isSmall ? "px-[18px]" : isMedium && containerWidth < 390 ? "px-[18px]" : isMedium ? "px-[20px]" : "px-[28px]";
|
|
2478
|
+
const renderLeftGroup = () => {
|
|
2479
|
+
if (leftMode === "empty") return /* @__PURE__ */ jsxRuntime.jsx("div", {});
|
|
2480
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2481
|
+
react.motion.div,
|
|
2482
|
+
{
|
|
2483
|
+
initial: { opacity: 0, scale: 0.9 },
|
|
2484
|
+
animate: { opacity: 1, scale: 1 },
|
|
2485
|
+
exit: { opacity: 0, scale: 0.9 },
|
|
2486
|
+
transition: { duration: 0.2 },
|
|
2487
|
+
className: "bg-card box-border flex h-[48px] items-center justify-center relative rounded-[24px] shadow-[0px_7px_24px_0px_rgba(0,0,0,0.06),0px_16px_29px_0px_rgba(0,0,0,0.04)] shrink-0 z-20",
|
|
2488
|
+
children: [
|
|
2489
|
+
leftMode === "search" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2490
|
+
/* @__PURE__ */ jsxRuntime.jsx(SearchPill, { text: leftData.searchText }),
|
|
2491
|
+
/* @__PURE__ */ jsxRuntime.jsx(Separator, {})
|
|
2492
|
+
] }),
|
|
2493
|
+
/* @__PURE__ */ jsxRuntime.jsx(IconButton, { children: /* @__PURE__ */ jsxRuntime.jsx(IconHome, {}) }),
|
|
2494
|
+
(leftMode === "search" || leftMode === "capsule-more") && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2495
|
+
/* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
|
|
2496
|
+
/* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: () => setShowActionSheet(true), active: showActionSheet, children: /* @__PURE__ */ jsxRuntime.jsx(IconMore2, {}) })
|
|
2497
|
+
] })
|
|
2498
|
+
]
|
|
2499
|
+
}
|
|
2500
|
+
);
|
|
2501
|
+
};
|
|
2502
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: toolbarRef, className: "relative w-full mx-auto", children: [
|
|
2503
|
+
showActionSheet && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-10", onClick: () => setShowActionSheet(false) }),
|
|
2504
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative rounded-[26px] w-full pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-end w-full pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
|
|
2505
|
+
"box-border flex items-end pb-[28px] pt-[24px] px-[12px] relative w-full",
|
|
2506
|
+
isLarge ? "justify-between" : groupGap
|
|
2507
|
+
), children: [
|
|
2508
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-[48px] flex items-end justify-start shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", children: !showActionSheet ? renderLeftGroup() : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 z-30 w-max", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2509
|
+
ActionSheet,
|
|
2510
|
+
{
|
|
2511
|
+
isOpen: true,
|
|
2512
|
+
variant: actionSheetVariant,
|
|
2513
|
+
className: "bottom-0 left-0 shadow-none origin-bottom-left"
|
|
2514
|
+
}
|
|
2515
|
+
) }) }) }),
|
|
2516
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
|
|
2517
|
+
"flex gap-[8px] items-center justify-end relative",
|
|
2518
|
+
!isLarge && "basis-0 grow shrink-0 min-h-px min-w-px"
|
|
2519
|
+
), children: [
|
|
2520
|
+
rightMode === "dual" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
|
|
2521
|
+
"bg-card box-border flex gap-[4px] h-[48px] items-center justify-center min-w-[64px] max-w-[88px] py-[10px] relative rounded-[50px] shadow-[0px_7px_24px_0px_rgba(0,0,0,0.06),0px_16px_29px_0px_rgba(0,0,0,0.04)] cursor-pointer transition-colors overflow-hidden",
|
|
2522
|
+
"active:after:absolute active:after:inset-0 active:after:bg-black/8 dark:active:after:bg-white/10 active:after:content-[''] active:after:rounded-[inherit]",
|
|
2523
|
+
buttonPaddingX,
|
|
2524
|
+
!isLarge && "basis-0 grow shrink-0"
|
|
2525
|
+
), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "leading-[24px] text-[16px] text-foreground whitespace-pre", children: rightData.secondaryLabel || "\u64CD\u4F5C" }) }),
|
|
2526
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
|
|
2527
|
+
"bg-primary box-border flex gap-[4px] h-[48px] items-center justify-center min-w-[64px] max-w-[88px] py-[10px] relative rounded-[50px] shadow-[0px_7px_24px_0px_rgba(0,0,0,0.06),0px_16px_29px_0px_rgba(0,0,0,0.04)] cursor-pointer transition-colors overflow-hidden",
|
|
2528
|
+
"active:after:absolute active:after:inset-0 active:after:bg-black/8 dark:active:after:bg-white/10 active:after:content-[''] active:after:rounded-[inherit]",
|
|
2529
|
+
buttonPaddingX,
|
|
2530
|
+
!isLarge && "basis-0 grow shrink-0"
|
|
2531
|
+
), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "leading-[24px] text-[16px] text-primary-foreground whitespace-pre", children: rightData.primaryLabel || "\u64CD\u4F5C" }) })
|
|
2532
|
+
] })
|
|
2533
|
+
] }) }) })
|
|
2534
|
+
] });
|
|
2535
|
+
}
|
|
2536
|
+
function TencentMap({
|
|
2537
|
+
className,
|
|
2538
|
+
center = { lat: 39.98412, lng: 116.307484 },
|
|
2539
|
+
zoom = 17,
|
|
2540
|
+
pitch = 60,
|
|
2541
|
+
rotation = 0,
|
|
2542
|
+
showPois = true,
|
|
2543
|
+
showText = true,
|
|
2544
|
+
roamMode = "none",
|
|
2545
|
+
demoMode = "none",
|
|
2546
|
+
markers = []
|
|
2547
|
+
}) {
|
|
2548
|
+
const mapRef = React.useRef(null);
|
|
2549
|
+
const mapInstance = React.useRef(null);
|
|
2550
|
+
const animationRef = React.useRef();
|
|
2551
|
+
const routeLayerRef = React.useRef(null);
|
|
2552
|
+
const markerLayerRef = React.useRef(null);
|
|
2553
|
+
const selectLayerRef = React.useRef(null);
|
|
2554
|
+
const customMarkersLayerRef = React.useRef(null);
|
|
2555
|
+
const moveAnimationRef = React.useRef();
|
|
2556
|
+
React.useEffect(() => {
|
|
2557
|
+
const initMap = () => {
|
|
2558
|
+
if (window.TMap && mapRef.current && !mapInstance.current) {
|
|
2559
|
+
const features = ["base", "building3d"];
|
|
2560
|
+
if (showPois) features.push("point");
|
|
2561
|
+
if (showText) features.push("label");
|
|
2562
|
+
mapInstance.current = new window.TMap.Map(mapRef.current, {
|
|
2563
|
+
center: new window.TMap.LatLng(center.lat, center.lng),
|
|
2564
|
+
zoom,
|
|
2565
|
+
pitch,
|
|
2566
|
+
rotation,
|
|
2567
|
+
viewMode: "3D",
|
|
2568
|
+
baseMap: {
|
|
2569
|
+
type: "vector",
|
|
2570
|
+
features
|
|
2571
|
+
},
|
|
2572
|
+
// Disable all default controls for a pure map view
|
|
2573
|
+
zoomControl: false,
|
|
2574
|
+
scaleControl: false,
|
|
2575
|
+
rotationControl: false,
|
|
2576
|
+
pitchControl: false,
|
|
2577
|
+
// Explicitly disable pitch control (often the 3D ring)
|
|
2578
|
+
navigationControl: false,
|
|
2579
|
+
mapTypeControl: false
|
|
2580
|
+
});
|
|
2581
|
+
mapInstance.current.on("click", (evt) => {
|
|
2582
|
+
if (evt.poi && evt.poi.latLng) {
|
|
2583
|
+
handlePoiSelect(evt.poi.latLng);
|
|
2584
|
+
} else {
|
|
2585
|
+
clearSelection();
|
|
2586
|
+
}
|
|
2587
|
+
});
|
|
2588
|
+
}
|
|
2589
|
+
};
|
|
2590
|
+
if (!window.TMap) {
|
|
2591
|
+
const script = document.createElement("script");
|
|
2592
|
+
script.src = `https://map.qq.com/api/gljs?v=1.exp&key=QK3BZ-YUJLG-MG5Q3-QHI2I-LRFM3-2MBHJ`;
|
|
2593
|
+
script.async = true;
|
|
2594
|
+
script.onload = () => {
|
|
2595
|
+
initMap();
|
|
2596
|
+
};
|
|
2597
|
+
document.body.appendChild(script);
|
|
2598
|
+
} else {
|
|
2599
|
+
initMap();
|
|
2600
|
+
}
|
|
2601
|
+
return () => {
|
|
2602
|
+
};
|
|
2603
|
+
}, []);
|
|
2604
|
+
const clearSelection = () => {
|
|
2605
|
+
if (selectLayerRef.current) {
|
|
2606
|
+
selectLayerRef.current.setMap(null);
|
|
2607
|
+
selectLayerRef.current = null;
|
|
2608
|
+
}
|
|
2609
|
+
};
|
|
2610
|
+
const handlePoiSelect = (latLng) => {
|
|
2611
|
+
if (!mapInstance.current || !window.TMap) return;
|
|
2612
|
+
if (!selectLayerRef.current) {
|
|
2613
|
+
selectLayerRef.current = new window.TMap.MultiMarker({
|
|
2614
|
+
map: mapInstance.current,
|
|
2615
|
+
styles: {
|
|
2616
|
+
// Large "Water Drop" style marker (using default TMap pin image or similar)
|
|
2617
|
+
"selected": new window.TMap.MarkerStyle({
|
|
2618
|
+
width: 30,
|
|
2619
|
+
height: 45,
|
|
2620
|
+
anchor: { x: 15, y: 45 },
|
|
2621
|
+
src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png"
|
|
2622
|
+
})
|
|
2623
|
+
},
|
|
2624
|
+
geometries: []
|
|
2625
|
+
});
|
|
2626
|
+
} else {
|
|
2627
|
+
selectLayerRef.current.setMap(mapInstance.current);
|
|
2628
|
+
}
|
|
2629
|
+
selectLayerRef.current.setGeometries([{
|
|
2630
|
+
id: "poi-selected",
|
|
2631
|
+
styleId: "selected",
|
|
2632
|
+
position: latLng
|
|
2633
|
+
}]);
|
|
2634
|
+
};
|
|
2635
|
+
const createRouteDemo = () => {
|
|
2636
|
+
if (!mapInstance.current || !window.TMap) return;
|
|
2637
|
+
const map = mapInstance.current;
|
|
2638
|
+
const center2 = map.getCenter();
|
|
2639
|
+
const startLat = center2.getLat() - 1e-3;
|
|
2640
|
+
const startLng = center2.getLng() - 1e-3;
|
|
2641
|
+
const endLat = center2.getLat() + 1e-3;
|
|
2642
|
+
const endLng = center2.getLng() + 1e-3;
|
|
2643
|
+
const path = [
|
|
2644
|
+
new window.TMap.LatLng(startLat, startLng),
|
|
2645
|
+
new window.TMap.LatLng(startLat, endLng),
|
|
2646
|
+
// Go East
|
|
2647
|
+
new window.TMap.LatLng(endLat, endLng)
|
|
2648
|
+
// Go North
|
|
2649
|
+
];
|
|
2650
|
+
if (routeLayerRef.current) routeLayerRef.current.setMap(null);
|
|
2651
|
+
routeLayerRef.current = new window.TMap.MultiPolyline({
|
|
2652
|
+
map,
|
|
2653
|
+
styles: {
|
|
2654
|
+
"route": new window.TMap.PolylineStyle({
|
|
2655
|
+
color: "#3777FF",
|
|
2656
|
+
width: 6,
|
|
2657
|
+
borderWidth: 2,
|
|
2658
|
+
borderColor: "#FFF",
|
|
2659
|
+
lineCap: "round"
|
|
2660
|
+
})
|
|
2661
|
+
},
|
|
2662
|
+
geometries: [{
|
|
2663
|
+
id: "demo-route",
|
|
2664
|
+
styleId: "route",
|
|
2665
|
+
paths: path
|
|
2666
|
+
}]
|
|
2667
|
+
});
|
|
2668
|
+
if (markerLayerRef.current) markerLayerRef.current.setMap(null);
|
|
2669
|
+
markerLayerRef.current = new window.TMap.MultiMarker({
|
|
2670
|
+
map,
|
|
2671
|
+
styles: {
|
|
2672
|
+
"start": new window.TMap.MarkerStyle({
|
|
2673
|
+
width: 24,
|
|
2674
|
+
height: 36,
|
|
2675
|
+
anchor: { x: 12, y: 36 },
|
|
2676
|
+
src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png"
|
|
2677
|
+
}),
|
|
2678
|
+
"end": new window.TMap.MarkerStyle({
|
|
2679
|
+
width: 24,
|
|
2680
|
+
height: 36,
|
|
2681
|
+
anchor: { x: 12, y: 36 },
|
|
2682
|
+
src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png"
|
|
2683
|
+
}),
|
|
2684
|
+
"car": new window.TMap.MarkerStyle({
|
|
2685
|
+
width: 48,
|
|
2686
|
+
height: 24,
|
|
2687
|
+
anchor: { x: 24, y: 12 },
|
|
2688
|
+
src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png",
|
|
2689
|
+
faceTo: "map"
|
|
2690
|
+
})
|
|
2691
|
+
},
|
|
2692
|
+
geometries: [
|
|
2693
|
+
{ id: "start", styleId: "start", position: path[0] },
|
|
2694
|
+
{ id: "end", styleId: "end", position: path[path.length - 1] },
|
|
2695
|
+
{ id: "car", styleId: "car", position: path[0] }
|
|
2696
|
+
// Initial car pos
|
|
2697
|
+
]
|
|
2698
|
+
});
|
|
2699
|
+
if (moveAnimationRef.current) cancelAnimationFrame(moveAnimationRef.current);
|
|
2700
|
+
let progress = 0;
|
|
2701
|
+
const speed = 2e-3;
|
|
2702
|
+
const animateCar = () => {
|
|
2703
|
+
if (!markerLayerRef.current) return;
|
|
2704
|
+
progress += speed;
|
|
2705
|
+
if (progress > 1) progress = 0;
|
|
2706
|
+
let currentPos;
|
|
2707
|
+
if (progress < 0.5) {
|
|
2708
|
+
const p = progress * 2;
|
|
2709
|
+
const lat = path[0].lat + (path[1].lat - path[0].lat) * p;
|
|
2710
|
+
const lng = path[0].lng + (path[1].lng - path[0].lng) * p;
|
|
2711
|
+
currentPos = new window.TMap.LatLng(lat, lng);
|
|
2712
|
+
} else {
|
|
2713
|
+
const p = (progress - 0.5) * 2;
|
|
2714
|
+
const lat = path[1].lat + (path[2].lat - path[1].lat) * p;
|
|
2715
|
+
const lng = path[1].lng + (path[2].lng - path[1].lng) * p;
|
|
2716
|
+
currentPos = new window.TMap.LatLng(lat, lng);
|
|
2717
|
+
}
|
|
2718
|
+
markerLayerRef.current.updateGeometries([{
|
|
2719
|
+
id: "car",
|
|
2720
|
+
position: currentPos
|
|
2721
|
+
}]);
|
|
2722
|
+
moveAnimationRef.current = requestAnimationFrame(animateCar);
|
|
2723
|
+
};
|
|
2724
|
+
moveAnimationRef.current = requestAnimationFrame(animateCar);
|
|
2725
|
+
};
|
|
2726
|
+
const clearDemos = () => {
|
|
2727
|
+
if (routeLayerRef.current) {
|
|
2728
|
+
routeLayerRef.current.setMap(null);
|
|
2729
|
+
routeLayerRef.current = null;
|
|
2730
|
+
}
|
|
2731
|
+
if (markerLayerRef.current) {
|
|
2732
|
+
markerLayerRef.current.setMap(null);
|
|
2733
|
+
markerLayerRef.current = null;
|
|
2734
|
+
}
|
|
2735
|
+
if (selectLayerRef.current) {
|
|
2736
|
+
selectLayerRef.current.setMap(null);
|
|
2737
|
+
selectLayerRef.current = null;
|
|
2738
|
+
}
|
|
2739
|
+
if (moveAnimationRef.current) {
|
|
2740
|
+
cancelAnimationFrame(moveAnimationRef.current);
|
|
2741
|
+
}
|
|
2742
|
+
};
|
|
2743
|
+
React.useEffect(() => {
|
|
2744
|
+
if (!mapInstance.current) return;
|
|
2745
|
+
mapInstance.current["__demoMode"] = demoMode;
|
|
2746
|
+
clearDemos();
|
|
2747
|
+
if (demoMode === "route") {
|
|
2748
|
+
createRouteDemo();
|
|
2749
|
+
}
|
|
2750
|
+
return () => {
|
|
2751
|
+
};
|
|
2752
|
+
}, [demoMode]);
|
|
2753
|
+
React.useEffect(() => {
|
|
2754
|
+
if (mapInstance.current && window.TMap) {
|
|
2755
|
+
const features = ["base", "building3d"];
|
|
2756
|
+
if (showPois) features.push("point");
|
|
2757
|
+
if (showText) features.push("label");
|
|
2758
|
+
if (mapInstance.current.setBaseMap) {
|
|
2759
|
+
mapInstance.current.setBaseMap({
|
|
2760
|
+
type: "vector",
|
|
2761
|
+
features
|
|
2762
|
+
});
|
|
2763
|
+
}
|
|
2764
|
+
}
|
|
2765
|
+
}, [showPois, showText]);
|
|
2766
|
+
React.useEffect(() => {
|
|
2767
|
+
if (!mapInstance.current) return;
|
|
2768
|
+
const animate = () => {
|
|
2769
|
+
if (roamMode === "orbit") {
|
|
2770
|
+
const map = mapInstance.current;
|
|
2771
|
+
const newRotation = (map.getRotation() + 0.2) % 360;
|
|
2772
|
+
map.setRotation(newRotation);
|
|
2773
|
+
animationRef.current = requestAnimationFrame(animate);
|
|
2774
|
+
}
|
|
2775
|
+
};
|
|
2776
|
+
if (roamMode === "orbit") {
|
|
2777
|
+
cancelAnimationFrame(animationRef.current);
|
|
2778
|
+
animationRef.current = requestAnimationFrame(animate);
|
|
2779
|
+
} else {
|
|
2780
|
+
cancelAnimationFrame(animationRef.current);
|
|
2781
|
+
}
|
|
2782
|
+
return () => {
|
|
2783
|
+
if (animationRef.current) cancelAnimationFrame(animationRef.current);
|
|
2784
|
+
};
|
|
2785
|
+
}, [roamMode]);
|
|
2786
|
+
React.useEffect(() => {
|
|
2787
|
+
if (!mapInstance.current || !window.TMap) return;
|
|
2788
|
+
if (!customMarkersLayerRef.current) {
|
|
2789
|
+
customMarkersLayerRef.current = new window.TMap.MultiMarker({
|
|
2790
|
+
map: mapInstance.current,
|
|
2791
|
+
styles: {
|
|
2792
|
+
"default-marker": new window.TMap.MarkerStyle({
|
|
2793
|
+
width: 24,
|
|
2794
|
+
height: 36,
|
|
2795
|
+
anchor: { x: 12, y: 36 },
|
|
2796
|
+
src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png"
|
|
2797
|
+
})
|
|
2798
|
+
},
|
|
2799
|
+
geometries: []
|
|
2800
|
+
});
|
|
2801
|
+
}
|
|
2802
|
+
if (markers && markers.length > 0) {
|
|
2803
|
+
const geometries = markers.map((m) => ({
|
|
2804
|
+
id: m.id,
|
|
2805
|
+
styleId: "default-marker",
|
|
2806
|
+
position: new window.TMap.LatLng(m.lat, m.lng),
|
|
2807
|
+
properties: { title: m.name }
|
|
2808
|
+
}));
|
|
2809
|
+
customMarkersLayerRef.current.setGeometries(geometries);
|
|
2810
|
+
} else {
|
|
2811
|
+
customMarkersLayerRef.current.setGeometries([]);
|
|
2812
|
+
}
|
|
2813
|
+
}, [markers]);
|
|
2814
|
+
React.useEffect(() => {
|
|
2815
|
+
if (mapInstance.current && window.TMap) {
|
|
2816
|
+
const targetStatus = {
|
|
2817
|
+
center: new window.TMap.LatLng(center.lat, center.lng),
|
|
2818
|
+
zoom,
|
|
2819
|
+
pitch,
|
|
2820
|
+
rotation
|
|
2821
|
+
};
|
|
2822
|
+
mapInstance.current.easeTo(targetStatus, { duration: 1200, ease: "cubic-in-out" });
|
|
2823
|
+
}
|
|
2824
|
+
}, [center.lat, center.lng, zoom, pitch, rotation]);
|
|
2825
|
+
React.useEffect(() => {
|
|
2826
|
+
const nukeControls = () => {
|
|
2827
|
+
if (!mapRef.current) return;
|
|
2828
|
+
const mapRect = mapRef.current.getBoundingClientRect();
|
|
2829
|
+
if (mapRect.width === 0 || mapRect.height === 0) return;
|
|
2830
|
+
const children = Array.from(mapRef.current.children);
|
|
2831
|
+
children.forEach((child) => {
|
|
2832
|
+
const element = child;
|
|
2833
|
+
if (element.tagName === "STYLE") return;
|
|
2834
|
+
if (element.querySelector("canvas") || element.tagName === "CANVAS") {
|
|
2835
|
+
return;
|
|
2836
|
+
}
|
|
2837
|
+
const innerHTML = element.innerHTML.toLowerCase();
|
|
2838
|
+
if (innerHTML.includes("rotate") || innerHTML.includes("compass") || innerHTML.includes("control")) {
|
|
2839
|
+
element.style.display = "none";
|
|
2840
|
+
return;
|
|
2841
|
+
}
|
|
2842
|
+
const style = window.getComputedStyle(element);
|
|
2843
|
+
const position = style.position;
|
|
2844
|
+
if (position === "absolute" || position === "fixed") {
|
|
2845
|
+
const rect = element.getBoundingClientRect();
|
|
2846
|
+
mapRect.right;
|
|
2847
|
+
mapRect.top;
|
|
2848
|
+
const elCenterX = rect.left + rect.width / 2;
|
|
2849
|
+
const elCenterY = rect.top + rect.height / 2;
|
|
2850
|
+
const relativeX = elCenterX - mapRect.left;
|
|
2851
|
+
const relativeY = elCenterY - mapRect.top;
|
|
2852
|
+
const isRight = relativeX > mapRect.width * 0.7;
|
|
2853
|
+
const isTop = relativeY < mapRect.height * 0.3;
|
|
2854
|
+
if (isRight && isTop) {
|
|
2855
|
+
element.style.display = "none";
|
|
2856
|
+
element.style.opacity = "0";
|
|
2857
|
+
element.style.pointerEvents = "none";
|
|
2858
|
+
}
|
|
2859
|
+
}
|
|
2860
|
+
});
|
|
2861
|
+
const potentials = mapRef.current.querySelectorAll('div[title], img, div[class*="control"]');
|
|
2862
|
+
potentials.forEach((el) => {
|
|
2863
|
+
const title = el.getAttribute("title");
|
|
2864
|
+
if (title && ["\u65CB\u8F6C", "\u900F\u89C6", "\u4FEF\u4EF0", "\u6307\u5357\u9488", "Rotation", "Compass", "Pitch"].includes(title)) {
|
|
2865
|
+
el.style.display = "none";
|
|
2866
|
+
}
|
|
2867
|
+
});
|
|
2868
|
+
};
|
|
2869
|
+
const intervalId = setInterval(nukeControls, 100);
|
|
2870
|
+
return () => {
|
|
2871
|
+
clearInterval(intervalId);
|
|
2872
|
+
};
|
|
2873
|
+
}, []);
|
|
2874
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: mapRef, className: `tencent-map-container-custom ${className || ""}`, style: { width: "100%", height: "100%", position: "relative", overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
|
|
2875
|
+
/* 1. Standard API Class Hiding */
|
|
2876
|
+
.tmap-zoom-control,
|
|
2877
|
+
.tmap-scale-control,
|
|
2878
|
+
.tmap-rotation-control,
|
|
2879
|
+
.tmap-control,
|
|
2880
|
+
.tmap-control-container,
|
|
2881
|
+
|
|
2882
|
+
/* 2. Title-based Hiding (Chinese & English) */
|
|
2883
|
+
div[title="\u65CB\u8F6C"],
|
|
2884
|
+
div[title="\u900F\u89C6"],
|
|
2885
|
+
div[title="\u4FEF\u4EF0"],
|
|
2886
|
+
div[title="\u590D\u4F4D"],
|
|
2887
|
+
div[title="\u6307\u5357\u9488"],
|
|
2888
|
+
div[title="Rotation"],
|
|
2889
|
+
div[title="Compass"],
|
|
2890
|
+
div[title="Pitch"],
|
|
2891
|
+
div[title="Reset"],
|
|
2892
|
+
|
|
2893
|
+
/* 3. Internal Class Hiding */
|
|
2894
|
+
.tmap-compass-control,
|
|
2895
|
+
.tmap-rotate-control,
|
|
2896
|
+
.tmap-pitch-control,
|
|
2897
|
+
|
|
2898
|
+
/* 4. Logo & Attribution */
|
|
2899
|
+
.logo-text,
|
|
2900
|
+
.tmap-logo,
|
|
2901
|
+
a[href*="map.qq.com"],
|
|
2902
|
+
img[src*="logo"] {
|
|
2903
|
+
display: none !important;
|
|
2904
|
+
}
|
|
2905
|
+
|
|
2906
|
+
/* 5. AGGRESSIVE POSITION-BASED HIDING */
|
|
2907
|
+
/* Target absolute positioned divs in the top-right corner. */
|
|
2908
|
+
|
|
2909
|
+
/* Any div that is absolutely positioned, pinned to the right, and pinned to the top */
|
|
2910
|
+
.tencent-map-container-custom div[style*="position: absolute"][style*="right"][style*="top"] {
|
|
2911
|
+
display: none !important;
|
|
2912
|
+
filter: grayscale(100%) !important; /* Fallback */
|
|
2913
|
+
opacity: 0 !important;
|
|
2914
|
+
pointer-events: none !important;
|
|
2915
|
+
}
|
|
2916
|
+
` }) });
|
|
2917
|
+
}
|
|
2918
|
+
function TypographyDocs() {
|
|
2919
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-8 p-6 rounded-2xl bg-background", children: [
|
|
2920
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
|
|
2921
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-foreground", children: "Typography \u5B57\u4F53\u7CFB\u7EDF" }),
|
|
2922
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "\u8BBE\u8BA1\u7CFB\u7EDF\u91C7\u7528 PingFang SC \u4F5C\u4E3A\u4E3B\u5B57\u4F53\uFF0C\u63D0\u4F9B6\u4E2A\u6807\u51C6\u5B57\u53F7\u5C42\u7EA7\u3002\u5927\u5B57\u53F7\uFF0824/20/18px\uFF09\u652F\u6301 Bold (800)\u3001Medium (600)\u3001Regular (400) \u4E09\u79CD\u5B57\u91CD\uFF0C\u4E2D\u5C0F\u5B57\u53F7\uFF0816/14/12px\uFF09\u652F\u6301 Medium (600)\u3001Regular (400) \u4E24\u79CD\u5B57\u91CD\u3002\u6240\u6709\u5B57\u4F53\u6837\u5F0F\u5DF2\u5728 /styles/globals.css \u4E2D\u5B9A\u4E49\uFF0C\u901A\u8FC7\u8BED\u4E49\u5316HTML\u6807\u7B7E\u81EA\u52A8\u5E94\u7528\u3002" })
|
|
2923
|
+
] }),
|
|
2924
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
|
|
2925
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-card-muted p-4 rounded-[16px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-8", children: [
|
|
2926
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
|
|
2927
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground mb-2", children: "\u9875\u9762\u5927\u6807\u9898 / Page Title" }),
|
|
2928
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 text-sm text-muted-foreground", children: [
|
|
2929
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Font Size: 24px" }),
|
|
2930
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Line Height: 32px" }),
|
|
2931
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Font Weight: Bold (800) / Medium (600) / Regular (400)" })
|
|
2932
|
+
] })
|
|
2933
|
+
] }),
|
|
2934
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-2", children: [
|
|
2935
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "24px", lineHeight: "32px", fontWeight: 800, fontFamily: "PingFang SC, -apple-system, sans-serif" }, className: "text-foreground", children: "\u7528\u6237\u4F53\u9A8C\u8BBE\u8BA1\u4E2D\u5FC3" }),
|
|
2936
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "24px", lineHeight: "32px", fontWeight: 600, fontFamily: "PingFang SC, -apple-system, sans-serif" }, className: "text-foreground", children: "\u7528\u6237\u4F53\u9A8C\u8BBE\u8BA1\u4E2D\u5FC3" }),
|
|
2937
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "24px", lineHeight: "32px", fontWeight: 400, fontFamily: "PingFang SC, -apple-system, sans-serif" }, className: "text-foreground", children: "\u7528\u6237\u4F53\u9A8C\u8BBE\u8BA1\u4E2D\u5FC3" })
|
|
2938
|
+
] })
|
|
2939
|
+
] }) }) }),
|
|
2940
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-card-muted p-4 rounded-[16px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-8", children: [
|
|
2941
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
|
|
2942
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground mb-2", children: "\u5927\u6807\u9898 / Large Title" }),
|
|
2943
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 text-sm text-muted-foreground", children: [
|
|
2944
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Font Size: 20px" }),
|
|
2945
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Line Height: 28px" }),
|
|
2946
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Font Weight: Bold (800) / Medium (600) / Regular (400)" })
|
|
2947
|
+
] })
|
|
2948
|
+
] }),
|
|
2949
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-2", children: [
|
|
2950
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "20px", lineHeight: "28px", fontWeight: 800, fontFamily: "PingFang SC, -apple-system, sans-serif" }, className: "text-foreground", children: "\u7528\u6237\u4F53\u9A8C\u8BBE\u8BA1\u4E2D\u5FC3" }),
|
|
2951
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "20px", lineHeight: "28px", fontWeight: 600, fontFamily: "PingFang SC, -apple-system, sans-serif" }, className: "text-foreground", children: "\u7528\u6237\u4F53\u9A8C\u8BBE\u8BA1\u4E2D\u5FC3" }),
|
|
2952
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "20px", lineHeight: "28px", fontWeight: 400, fontFamily: "PingFang SC, -apple-system, sans-serif" }, className: "text-foreground", children: "\u7528\u6237\u4F53\u9A8C\u8BBE\u8BA1\u4E2D\u5FC3" })
|
|
2953
|
+
] })
|
|
2954
|
+
] }) }) }),
|
|
2955
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-card-muted p-4 rounded-[16px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-8", children: [
|
|
2956
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
|
|
2957
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground mb-2", children: "\u5206\u7C7B\u6807\u9898 / Section Title" }),
|
|
2958
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 text-sm text-muted-foreground", children: [
|
|
2959
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Font Size: 18px" }),
|
|
2960
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Line Height: 24px" }),
|
|
2961
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Font Weight: Bold (800) / Medium (600) / Regular (400)" })
|
|
2962
|
+
] })
|
|
2963
|
+
] }),
|
|
2964
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-2", children: [
|
|
2965
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "18px", lineHeight: "24px", fontWeight: 800, fontFamily: "PingFang SC, -apple-system, sans-serif" }, className: "text-foreground", children: "\u7528\u6237\u4F53\u9A8C\u8BBE\u8BA1\u4E2D\u5FC3" }),
|
|
2966
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "18px", lineHeight: "24px", fontWeight: 600, fontFamily: "PingFang SC, -apple-system, sans-serif" }, className: "text-foreground", children: "\u7528\u6237\u4F53\u9A8C\u8BBE\u8BA1\u4E2D\u5FC3" }),
|
|
2967
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "18px", lineHeight: "24px", fontWeight: 400, fontFamily: "PingFang SC, -apple-system, sans-serif" }, className: "text-foreground", children: "\u7528\u6237\u4F53\u9A8C\u8BBE\u8BA1\u4E2D\u5FC3" })
|
|
2968
|
+
] })
|
|
2969
|
+
] }) }) }),
|
|
2970
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-card-muted p-4 rounded-[16px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-8", children: [
|
|
2971
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
|
|
2972
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground mb-2", children: "\u5F3A\u8C03\u5B57 / Emphasis" }),
|
|
2973
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 text-sm text-muted-foreground", children: [
|
|
2974
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Font Size: 16px" }),
|
|
2975
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Line Height: 24px" }),
|
|
2976
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Font Weight: Medium (600) / Regular (400)" })
|
|
2977
|
+
] })
|
|
2978
|
+
] }),
|
|
2979
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-2", children: [
|
|
2980
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "16px", lineHeight: "24px", fontWeight: 600, fontFamily: "PingFang SC, -apple-system, sans-serif" }, className: "text-foreground", children: "\u7528\u6237\u4F53\u9A8C\u8BBE\u8BA1\u4E2D\u5FC3" }),
|
|
2981
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "16px", lineHeight: "24px", fontWeight: 400, fontFamily: "PingFang SC, -apple-system, sans-serif" }, className: "text-muted-foreground", children: "\u7528\u6237\u4F53\u9A8C\u8BBE\u8BA1\u4E2D\u5FC3" })
|
|
2982
|
+
] })
|
|
2983
|
+
] }) }) }),
|
|
2984
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-card-muted p-4 rounded-[16px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-8", children: [
|
|
2985
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
|
|
2986
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground mb-2", children: "\u6587\u672C / Body Text" }),
|
|
2987
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 text-sm text-muted-foreground", children: [
|
|
2988
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Font Size: 14px" }),
|
|
2989
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Line Height: 20px" }),
|
|
2990
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Font Weight: Medium (600) / Regular (400)" })
|
|
2991
|
+
] })
|
|
2992
|
+
] }),
|
|
2993
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-2", children: [
|
|
2994
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", lineHeight: "20px", fontWeight: 600, fontFamily: "PingFang SC, -apple-system, sans-serif" }, className: "text-foreground", children: "\u7528\u6237\u4F53\u9A8C\u8BBE\u8BA1\u4E2D\u5FC3" }),
|
|
2995
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", lineHeight: "20px", fontWeight: 400, fontFamily: "PingFang SC, -apple-system, sans-serif" }, className: "text-muted-foreground", children: "\u7528\u6237\u4F53\u9A8C\u8BBE\u8BA1\u4E2D\u5FC3" })
|
|
2996
|
+
] })
|
|
2997
|
+
] }) }) }),
|
|
2998
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-card-muted p-4 rounded-[16px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-8", children: [
|
|
2999
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
|
|
3000
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground mb-2", children: "\u6CE8\u91CA / Caption" }),
|
|
3001
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 text-sm text-muted-foreground", children: [
|
|
3002
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Font Size: 12px" }),
|
|
3003
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Line Height: 16px" }),
|
|
3004
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Font Weight: Medium (600) / Regular (400)" })
|
|
3005
|
+
] })
|
|
3006
|
+
] }),
|
|
3007
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-2", children: [
|
|
3008
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "12px", lineHeight: "16px", fontWeight: 600, fontFamily: "PingFang SC, -apple-system, sans-serif" }, className: "text-foreground", children: "\u7528\u6237\u4F53\u9A8C\u8BBE\u8BA1\u4E2D\u5FC3" }),
|
|
3009
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "12px", lineHeight: "16px", fontWeight: 400, fontFamily: "PingFang SC, -apple-system, sans-serif" }, className: "text-muted-foreground", children: "\u7528\u6237\u4F53\u9A8C\u8BBE\u8BA1\u4E2D\u5FC3" })
|
|
3010
|
+
] })
|
|
3011
|
+
] }) }) })
|
|
3012
|
+
] }),
|
|
3013
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card border-[0.5px] border-card-border rounded-[16px] shadow-[var(--elevation-sm)] p-4", children: [
|
|
3014
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground mb-3", children: "\u4F7F\u7528\u6307\u5357 / Usage Guidelines" }),
|
|
3015
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 text-sm text-muted-foreground", children: [
|
|
3016
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { children: "\u2022 \u4F18\u5148\u4F7F\u7528\u8BED\u4E49\u5316HTML\u6807\u7B7E\uFF08h1-h6, p\u7B49\uFF09\uFF0C\u7531\u5168\u5C40\u6837\u5F0F\u81EA\u52A8\u5E94\u7528\u5B57\u4F53\u8BBE\u7F6E" }),
|
|
3017
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { children: "\u2022 \u7981\u6B62\u4F7F\u7528Tailwind\u5B57\u4F53\u7C7B\uFF08text-xl, font-bold\u7B49\uFF09\uFF0C\u9664\u975E\u7528\u6237\u660E\u786E\u8981\u6C42" }),
|
|
3018
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { children: "\u2022 \u6240\u6709\u5B57\u4F53\u6837\u5F0F\u5DF2\u5728 /styles/globals.css \u4E2D\u5B9A\u4E49\uFF0C\u786E\u4FDDDark Mode\u81EA\u52A8\u9002\u914D" }),
|
|
3019
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { children: "\u2022 \u5B57\u4F53\u5BB6\u65CF\uFF1APingFang SC, -apple-system, BlinkMacSystemFont, sans-serif" })
|
|
3020
|
+
] })
|
|
3021
|
+
] })
|
|
3022
|
+
] });
|
|
3023
|
+
}
|
|
3024
|
+
function GridSystemDocs() {
|
|
3025
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-8 p-6 rounded-2xl bg-background", children: [
|
|
3026
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
|
|
3027
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-foreground", children: "Grid System \u6805\u683C\u7CFB\u7EDF" }),
|
|
3028
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "\u79FB\u52A8\u7AEF\u6805\u683C\u7CFB\u7EDF\u57FA\u4E8E12\u5217\u7F51\u683C\uFF0C\u901A\u8FC7\u6807\u51C6\u5316\u7684\u8FB9\u8DDD\u3001\u95F4\u8DDD\u548C\u5217\u5BBD\uFF0C\u786E\u4FDD\u5E03\u5C40\u7684\u4E00\u81F4\u6027\u3002\u9002\u7528\u4E8E390px\u57FA\u51C6\u5BBD\u5EA6\u7684\u79FB\u52A8\u7AEF\u8BBE\u8BA1\u3002" })
|
|
3029
|
+
] }),
|
|
3030
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card-muted p-4 rounded-[16px]", children: [
|
|
3031
|
+
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-foreground mb-4", children: "\u9875\u9762\u8FB9\u8DDD\u89C4\u8303 / Page Margins" }),
|
|
3032
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
|
|
3033
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card p-4 rounded-lg border border-border", children: [
|
|
3034
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
|
|
3035
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground", children: "\u6807\u51C6\u9875\u9762\u8FB9\u8DDD" }),
|
|
3036
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground font-mono", children: "px-4 (16px)" })
|
|
3037
|
+
] }),
|
|
3038
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-muted/30 p-4 relative", children: [
|
|
3039
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-0 bottom-0 w-4 bg-primary/20 border-r-2 border-primary", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[10px] text-primary rotate-90 whitespace-nowrap", children: "16px" }) }),
|
|
3040
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-0 bottom-0 w-4 bg-primary/20 border-l-2 border-primary", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[10px] text-primary rotate-90 whitespace-nowrap", children: "16px" }) }),
|
|
3041
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-card p-3 text-center text-sm text-muted-foreground", children: "\u9875\u9762\u4E3B\u5185\u5BB9\u533A\u57DF" })
|
|
3042
|
+
] })
|
|
3043
|
+
] }),
|
|
3044
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card p-4 rounded-lg border border-border", children: [
|
|
3045
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
|
|
3046
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground", children: "\u63A8\u9001\u901A\u77E5\u8FB9\u8DDD" }),
|
|
3047
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground font-mono", children: "px-3 (12px)" })
|
|
3048
|
+
] }),
|
|
3049
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-muted/30 p-3 relative", children: [
|
|
3050
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-0 bottom-0 w-3 bg-accent/20 border-r-2 border-accent", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[10px] text-accent rotate-90 whitespace-nowrap", children: "12px" }) }),
|
|
3051
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-0 bottom-0 w-3 bg-accent/20 border-l-2 border-accent", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[10px] text-accent rotate-90 whitespace-nowrap", children: "12px" }) }),
|
|
3052
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-card p-3 text-center text-sm text-muted-foreground", children: "\u63A8\u9001\u901A\u77E5\u5185\u5BB9" })
|
|
3053
|
+
] })
|
|
3054
|
+
] })
|
|
3055
|
+
] })
|
|
3056
|
+
] }),
|
|
3057
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card-muted p-4 rounded-[16px]", children: [
|
|
3058
|
+
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-foreground mb-4", children: "\u5782\u76F4\u95F4\u8DDD\u89C4\u8303 / Vertical Spacing" }),
|
|
3059
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card p-4 rounded-lg border border-border space-y-6", children: [
|
|
3060
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
3061
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
|
|
3062
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground", children: "\u5927\u6A21\u5757\u95F4\u8DDD" }),
|
|
3063
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground font-mono", children: "space-y-6 (24px)" })
|
|
3064
|
+
] }),
|
|
3065
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
|
|
3066
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-primary/10 h-12 rounded flex items-center justify-center text-sm text-primary", children: "\u6A21\u5757 A" }),
|
|
3067
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-primary/10 h-12 rounded flex items-center justify-center text-sm text-primary", children: "\u6A21\u5757 B" })
|
|
3068
|
+
] })
|
|
3069
|
+
] }),
|
|
3070
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
3071
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
|
|
3072
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground", children: "\u4E2D\u7B49\u6A21\u5757\u95F4\u8DDD" }),
|
|
3073
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground font-mono", children: "space-y-4 (16px)" })
|
|
3074
|
+
] }),
|
|
3075
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
|
|
3076
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-accent/10 h-10 rounded flex items-center justify-center text-sm text-accent", children: "\u533A\u5757 A" }),
|
|
3077
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-accent/10 h-10 rounded flex items-center justify-center text-sm text-accent", children: "\u533A\u5757 B" })
|
|
3078
|
+
] })
|
|
3079
|
+
] }),
|
|
3080
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
3081
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
|
|
3082
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground", children: "\u5C0F\u6A21\u5757\u95F4\u8DDD" }),
|
|
3083
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground font-mono", children: "space-y-3 (12px)" })
|
|
3084
|
+
] }),
|
|
3085
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
|
|
3086
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted h-8 rounded flex items-center justify-center text-xs text-muted-foreground", children: "\u5185\u5BB9 A" }),
|
|
3087
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted h-8 rounded flex items-center justify-center text-xs text-muted-foreground", children: "\u5185\u5BB9 B" })
|
|
3088
|
+
] })
|
|
3089
|
+
] })
|
|
3090
|
+
] })
|
|
3091
|
+
] }),
|
|
3092
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card-muted p-4 rounded-[16px]", children: [
|
|
3093
|
+
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-foreground mb-4", children: "12\u5217\u6805\u683C\u5E03\u5C40 / 12-Column Grid" }),
|
|
3094
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
|
|
3095
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card p-4 rounded-lg border border-border", children: [
|
|
3096
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground mb-3", children: "\u7B49\u5206\u5E03\u5C40" }),
|
|
3097
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
|
|
3098
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mb-2", children: "2\u5217\u5E03\u5C40 (grid-cols-2)" }),
|
|
3099
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
|
|
3100
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-primary/10 h-20 rounded flex items-center justify-center text-sm text-primary", children: "col-1" }),
|
|
3101
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-primary/10 h-20 rounded flex items-center justify-center text-sm text-primary", children: "col-2" })
|
|
3102
|
+
] })
|
|
3103
|
+
] }),
|
|
3104
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
|
|
3105
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mb-2", children: "3\u5217\u5E03\u5C40 (grid-cols-3)" }),
|
|
3106
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-3", children: [
|
|
3107
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-accent/10 h-16 rounded flex items-center justify-center text-xs text-accent", children: "1" }),
|
|
3108
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-accent/10 h-16 rounded flex items-center justify-center text-xs text-accent", children: "2" }),
|
|
3109
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-accent/10 h-16 rounded flex items-center justify-center text-xs text-accent", children: "3" })
|
|
3110
|
+
] })
|
|
3111
|
+
] }),
|
|
3112
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
3113
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mb-2", children: "4\u5217\u5E03\u5C40 (grid-cols-4)" }),
|
|
3114
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-4 gap-2", children: [
|
|
3115
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted h-12 rounded flex items-center justify-center text-xs text-muted-foreground", children: "1" }),
|
|
3116
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted h-12 rounded flex items-center justify-center text-xs text-muted-foreground", children: "2" }),
|
|
3117
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted h-12 rounded flex items-center justify-center text-xs text-muted-foreground", children: "3" }),
|
|
3118
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted h-12 rounded flex items-center justify-center text-xs text-muted-foreground", children: "4" })
|
|
3119
|
+
] })
|
|
3120
|
+
] })
|
|
3121
|
+
] }),
|
|
3122
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card p-4 rounded-lg border border-border", children: [
|
|
3123
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground mb-3", children: "\u4E0D\u7B49\u5206\u5E03\u5C40\uFF08\u57FA\u4E8E12\u5217\uFF09" }),
|
|
3124
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
|
|
3125
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mb-2", children: "1:2 \u5E03\u5C40 (col-span-4 + col-span-8)" }),
|
|
3126
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-2", children: [
|
|
3127
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-4 bg-primary/10 h-20 rounded flex items-center justify-center text-sm text-primary", children: "4\u5217" }),
|
|
3128
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-8 bg-primary/10 h-20 rounded flex items-center justify-center text-sm text-primary", children: "8\u5217" })
|
|
3129
|
+
] })
|
|
3130
|
+
] }),
|
|
3131
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
|
|
3132
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mb-2", children: "2:1 \u5E03\u5C40 (col-span-8 + col-span-4)" }),
|
|
3133
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-2", children: [
|
|
3134
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-8 bg-accent/10 h-20 rounded flex items-center justify-center text-sm text-accent", children: "8\u5217" }),
|
|
3135
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-4 bg-accent/10 h-20 rounded flex items-center justify-center text-sm text-accent", children: "4\u5217" })
|
|
3136
|
+
] })
|
|
3137
|
+
] }),
|
|
3138
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
3139
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mb-2", children: "1:1:1 \u5E03\u5C40 (col-span-4 \xD7 3)" }),
|
|
3140
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-2", children: [
|
|
3141
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-4 bg-muted h-16 rounded flex items-center justify-center text-xs text-muted-foreground", children: "4\u5217" }),
|
|
3142
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-4 bg-muted h-16 rounded flex items-center justify-center text-xs text-muted-foreground", children: "4\u5217" }),
|
|
3143
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-4 bg-muted h-16 rounded flex items-center justify-center text-xs text-muted-foreground", children: "4\u5217" })
|
|
3144
|
+
] })
|
|
3145
|
+
] })
|
|
3146
|
+
] })
|
|
3147
|
+
] })
|
|
3148
|
+
] }),
|
|
3149
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card-muted p-4 rounded-[16px]", children: [
|
|
3150
|
+
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-foreground mb-4", children: "Flexbox \u5E03\u5C40\u6A21\u5F0F / Flex Layouts" }),
|
|
3151
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
|
|
3152
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card p-4 rounded-lg border border-border", children: [
|
|
3153
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground mb-2", children: "\u5DE6\u56FA\u5B9A + \u53F3\u81EA\u9002\u5E94" }),
|
|
3154
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mb-3", children: "\u9002\u7528\u573A\u666F\uFF1A\u5217\u8868\u9879\u3001\u5546\u54C1\u5361\u7247" }),
|
|
3155
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
|
|
3156
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 w-[91px] h-[91px] bg-primary/10 rounded-lg flex items-center justify-center text-xs text-primary", children: [
|
|
3157
|
+
"91\xD791px",
|
|
3158
|
+
/* @__PURE__ */ jsxRuntime.jsx("br", {}),
|
|
3159
|
+
"\u56FE\u7247"
|
|
3160
|
+
] }),
|
|
3161
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 bg-accent/10 rounded-lg p-3 flex flex-col gap-2", children: [
|
|
3162
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-foreground", children: "\u6807\u9898\u5185\u5BB9\uFF08\u81EA\u9002\u5E94\u5BBD\u5EA6\uFF09" }),
|
|
3163
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: "\u63CF\u8FF0\u6587\u5B57..." })
|
|
3164
|
+
] })
|
|
3165
|
+
] })
|
|
3166
|
+
] }),
|
|
3167
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card p-4 rounded-lg border border-border", children: [
|
|
3168
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground mb-2", children: "\u4E24\u7AEF\u5BF9\u9F50\u5E03\u5C40" }),
|
|
3169
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mb-3", children: "\u9002\u7528\u573A\u666F\uFF1A\u5BFC\u822A\u680F\u3001\u5DE5\u5177\u680F" }),
|
|
3170
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between bg-muted/30 p-3 rounded-lg", children: [
|
|
3171
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-primary/10 px-4 py-2 rounded text-sm text-primary", children: "\u5DE6\u4FA7\u5185\u5BB9" }),
|
|
3172
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-accent/10 px-4 py-2 rounded text-sm text-accent", children: "\u53F3\u4FA7\u64CD\u4F5C" })
|
|
3173
|
+
] })
|
|
3174
|
+
] }),
|
|
3175
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card p-4 rounded-lg border border-border", children: [
|
|
3176
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground mb-2", children: "\u5C45\u4E2D\u5BF9\u9F50\u5E03\u5C40" }),
|
|
3177
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mb-3", children: "\u9002\u7528\u573A\u666F\uFF1A\u7A7A\u72B6\u6001\u3001\u52A0\u8F7D\u4E2D" }),
|
|
3178
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center bg-muted/30 p-8 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-primary/10 px-6 py-3 rounded text-sm text-primary", children: "\u5C45\u4E2D\u5185\u5BB9" }) })
|
|
3179
|
+
] })
|
|
3180
|
+
] })
|
|
3181
|
+
] }),
|
|
3182
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card-muted p-4 rounded-[16px]", children: [
|
|
3183
|
+
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-foreground mb-4", children: "\u5217\u8868\u9879\u5E03\u5C40\u89C4\u8303 / List Item Layout" }),
|
|
3184
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card rounded-lg border border-border overflow-hidden", children: [
|
|
3185
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 py-3 px-4 border-b border-border", children: [
|
|
3186
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 w-[91px] h-[91px] bg-primary/10 rounded-lg flex items-center justify-center text-xs text-primary", children: "91\xD791px" }),
|
|
3187
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex flex-col gap-2", children: [
|
|
3188
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground", children: "\u5217\u8868\u9879\u6807\u9898" }),
|
|
3189
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center text-xs text-muted-foreground", children: [
|
|
3190
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u6807\u7B7E1" }),
|
|
3191
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u2022" }),
|
|
3192
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u6807\u7B7E2" })
|
|
3193
|
+
] }),
|
|
3194
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground truncate", children: "\u8FD9\u662F\u4E00\u6BB5\u63CF\u8FF0\u6587\u5B57\uFF0C\u8D85\u51FA\u5BBD\u5EA6\u4F1A\u88AB\u622A\u65AD..." })
|
|
3195
|
+
] })
|
|
3196
|
+
] }),
|
|
3197
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 py-2 px-4 border-b border-border", children: [
|
|
3198
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center text-xs text-accent", children: "48px" }),
|
|
3199
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex flex-col justify-center", children: [
|
|
3200
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground text-sm", children: "\u7D27\u51D1\u5217\u8868\u9879" }),
|
|
3201
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "\u6B21\u8981\u4FE1\u606F" })
|
|
3202
|
+
] })
|
|
3203
|
+
] }),
|
|
3204
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 py-3 px-4 items-center", children: [
|
|
3205
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center text-xs text-primary", children: "\u56FE\u6807" }),
|
|
3206
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground text-sm", children: "\u5217\u8868\u9879\u6807\u9898" }) }),
|
|
3207
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 bg-accent/10 px-3 py-1.5 rounded text-xs text-accent", children: "\u64CD\u4F5C" })
|
|
3208
|
+
] })
|
|
3209
|
+
] })
|
|
3210
|
+
] }),
|
|
3211
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card-muted p-4 rounded-[16px]", children: [
|
|
3212
|
+
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-foreground mb-4", children: "\u5B9E\u9645\u5E94\u7528\u793A\u4F8B / Real-world Examples" }),
|
|
3213
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
|
|
3214
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card p-4 rounded-lg border border-border", children: [
|
|
3215
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground mb-2", children: "\u6570\u636E\u7EDF\u8BA1\u5361\u7247" }),
|
|
3216
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mb-3", children: "3\u5217\u7B49\u5206 + 12px \u95F4\u8DDD" }),
|
|
3217
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3218
|
+
StatGrid,
|
|
3219
|
+
{
|
|
3220
|
+
items: [
|
|
3221
|
+
{ value: "1,248", label: "\u4ECA\u65E5\u8BBF\u95EE", variant: "primary" },
|
|
3222
|
+
{ value: "356", label: "\u65B0\u589E\u7528\u6237", variant: "accent" },
|
|
3223
|
+
{ value: "96.8%", label: "\u8F6C\u5316\u7387", variant: "default" }
|
|
3224
|
+
]
|
|
3225
|
+
}
|
|
3226
|
+
)
|
|
3227
|
+
] }),
|
|
3228
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card p-4 rounded-lg border border-border", children: [
|
|
3229
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground mb-2", children: "POI \u5730\u70B9\u5217\u8868" }),
|
|
3230
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mb-3", children: "\u5DE6\u56FA\u5B9A\u56FE\u7247 (91px) + \u53F3\u4FA7\u81EA\u9002\u5E94\u5185\u5BB9" }),
|
|
3231
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
|
|
3232
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3233
|
+
PoiItem,
|
|
3234
|
+
{
|
|
3235
|
+
imageUrl: "https://images.unsplash.com/photo-1763924636913-02c404a937f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjaGluZXNlJTIwYW5jaWVudCUyMHRlbXBsZSUyMHNjZW5pY3xlbnwxfHx8fDE3NjQ0MjY5MjJ8MA&ixlib=rb-4.1.0&q=80&w=1080",
|
|
3236
|
+
title: "\u6545\u5BAB\u535A\u7269\u9662",
|
|
3237
|
+
rating: "4.8\u5206",
|
|
3238
|
+
distance: "1.2km",
|
|
3239
|
+
description: "\u4E2D\u56FD\u660E\u6E05\u4E24\u4EE3\u7684\u7687\u5BB6\u5BAB\u6BBF\uFF0C\u65E7\u79F0\u7D2B\u7981\u57CE\uFF0C\u4F4D\u4E8E\u5317\u4EAC\u4E2D\u8F74\u7EBF\u7684\u4E2D\u5FC3\uFF0C\u662F\u4E2D\u56FD\u53E4\u4EE3\u5BAB\u5EF7\u5EFA\u7B51\u4E4B\u7CBE\u534E"
|
|
3240
|
+
}
|
|
3241
|
+
),
|
|
3242
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3243
|
+
PoiItem,
|
|
3244
|
+
{
|
|
3245
|
+
imageUrl: "https://images.unsplash.com/photo-1597434429739-2574d7e06807?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtb3VudGFpbiUyMGxhbmRzY2FwZSUyMG5hdHVyZXxlbnwxfHx8fDE3NjQzNjA3OTd8MA&ixlib=rb-4.1.0&q=80&w=1080",
|
|
3246
|
+
title: "\u9EC4\u5C71\u98CE\u666F\u533A",
|
|
3247
|
+
rating: "4.9\u5206",
|
|
3248
|
+
distance: "320km",
|
|
3249
|
+
description: "\u4EE5\u5947\u677E\u3001\u602A\u77F3\u3001\u4E91\u6D77\u3001\u6E29\u6CC9\u3001\u51AC\u96EA\u201C\u4E94\u7EDD\u201D\u8457\u79F0\u4E8E\u4E16\uFF0C\u7D20\u6709\u201C\u5929\u4E0B\u7B2C\u4E00\u5947\u5C71\u201D\u4E4B\u7F8E\u8A89"
|
|
3250
|
+
}
|
|
3251
|
+
)
|
|
3252
|
+
] })
|
|
3253
|
+
] }),
|
|
3254
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card p-4 rounded-lg border border-border", children: [
|
|
3255
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground mb-2", children: "\u65B0\u95FB\u6587\u7AE0\u5217\u8868" }),
|
|
3256
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mb-3", children: "2:1 \u4E0D\u7B49\u5206\u5E03\u5C40 (\u5185\u5BB9 8\u5217 + \u56FE\u7247 4\u5217)" }),
|
|
3257
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
|
|
3258
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3259
|
+
NewsItem,
|
|
3260
|
+
{
|
|
3261
|
+
title: "\u4EBA\u5DE5\u667A\u80FD\u52A9\u529B\u533B\u7597\u8BCA\u65AD\u51C6\u786E\u7387\u63D0\u5347\u81F398%\uFF0C\u591A\u5BB6\u533B\u9662\u5F00\u59CB\u8BD5\u70B9\u5E94\u7528",
|
|
3262
|
+
time: "2\u5C0F\u65F6\u524D",
|
|
3263
|
+
source: "\u79D1\u6280\u65E5\u62A5",
|
|
3264
|
+
category: "AI\u533B\u7597",
|
|
3265
|
+
variant: "primary"
|
|
3266
|
+
}
|
|
3267
|
+
),
|
|
3268
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3269
|
+
NewsItem,
|
|
3270
|
+
{
|
|
3271
|
+
title: "\u65B0\u80FD\u6E90\u6C7D\u8F66\u9500\u91CF\u6301\u7EED\u589E\u957F\uFF0C\u7B2C\u4E09\u5B63\u5EA6\u540C\u6BD4\u4E0A\u6DA845%\u521B\u5386\u53F2\u65B0\u9AD8",
|
|
3272
|
+
time: "5\u5C0F\u65F6\u524D",
|
|
3273
|
+
source: "\u8D22\u7ECF\u89C2\u5BDF",
|
|
3274
|
+
category: "\u6C7D\u8F66\u4EA7\u4E1A",
|
|
3275
|
+
variant: "accent"
|
|
3276
|
+
}
|
|
3277
|
+
)
|
|
3278
|
+
] })
|
|
3279
|
+
] }),
|
|
3280
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card p-4 rounded-lg border border-border", children: [
|
|
3281
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground mb-2", children: "\u5FEB\u6377\u529F\u80FD\u5165\u53E3" }),
|
|
3282
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mb-3", children: "4\u5217\u7B49\u5206 + 8px \u95F4\u8DDD" }),
|
|
3283
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-2", children: ["\u626B\u4E00\u626B", "\u4ED8\u6B3E", "\u6536\u6B3E", "\u5361\u5305"].map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
|
|
3284
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center text-xs text-primary", children: "\u56FE\u6807" }),
|
|
3285
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: item })
|
|
3286
|
+
] }, idx)) })
|
|
3287
|
+
] }),
|
|
3288
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card p-4 rounded-lg border border-border", children: [
|
|
3289
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground mb-2", children: "\u5B8C\u6574\u9875\u9762\u5E03\u5C40" }),
|
|
3290
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mb-3", children: "\u9876\u90E8\u56FA\u5B9A + \u4E2D\u95F4\u6EDA\u52A8 + \u5E95\u90E8\u56FA\u5B9A" }),
|
|
3291
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-muted/30 rounded-lg overflow-hidden", style: { height: "320px" }, children: [
|
|
3292
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-card border-b border-border px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-foreground", children: "\u6211\u7684\u8BA2\u5355" }) }),
|
|
3293
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-4 space-y-3 overflow-y-auto", style: { height: "228px" }, children: [
|
|
3294
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card-muted rounded-lg p-3", children: [
|
|
3295
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground text-sm mb-2", children: "\u5F85\u4ED8\u6B3E\u8BA2\u5355 (3)" }),
|
|
3296
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "\u5171\u8BA1 \xA51,286.00\uFF0C\u8BF7\u5C3D\u5FEB\u5B8C\u6210\u652F\u4ED8" })
|
|
3297
|
+
] }),
|
|
3298
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card-muted rounded-lg p-3", children: [
|
|
3299
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground text-sm mb-2", children: "\u5F85\u6536\u8D27\u8BA2\u5355 (2)" }),
|
|
3300
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "\u9884\u8BA1\u660E\u5929\u9001\u8FBE\uFF0C\u8BF7\u4FDD\u6301\u624B\u673A\u7545\u901A" })
|
|
3301
|
+
] }),
|
|
3302
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card-muted rounded-lg p-3", children: [
|
|
3303
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground text-sm mb-2", children: "\u5F85\u8BC4\u4EF7\u8BA2\u5355 (5)" }),
|
|
3304
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "\u5206\u4EAB\u60A8\u7684\u8D2D\u7269\u4F53\u9A8C\uFF0C\u5E2E\u52A9\u5176\u4ED6\u4E70\u5BB6" })
|
|
3305
|
+
] }),
|
|
3306
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card-muted rounded-lg p-3", children: [
|
|
3307
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground text-sm mb-2", children: "\u552E\u540E\u8BA2\u5355 (1)" }),
|
|
3308
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "\u9000\u6B3E\u7533\u8BF7\u5904\u7406\u4E2D\uFF0C\u9884\u8BA13\u4E2A\u5DE5\u4F5C\u65E5" })
|
|
3309
|
+
] })
|
|
3310
|
+
] }),
|
|
3311
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-card border-t border-border px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
|
|
3312
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 bg-secondary rounded-lg py-2 text-center text-sm text-foreground", children: "\u7B5B\u9009\u8BA2\u5355" }),
|
|
3313
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 bg-primary rounded-lg py-2 text-center text-sm text-primary-foreground", children: "\u7EE7\u7EED\u8D2D\u7269" })
|
|
3314
|
+
] }) })
|
|
3315
|
+
] })
|
|
3316
|
+
] })
|
|
3317
|
+
] })
|
|
3318
|
+
] }),
|
|
3319
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card border-[0.5px] border-card-border rounded-[16px] shadow-[var(--elevation-sm)] p-4", children: [
|
|
3320
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-foreground mb-3", children: "\u4F7F\u7528\u5EFA\u8BAE / Best Practices" }),
|
|
3321
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 text-sm text-muted-foreground", children: [
|
|
3322
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { children: "\u2705 \u4F18\u5148\u4F7F\u7528 Flexbox \u8FDB\u884C\u4E00\u7EF4\u5E03\u5C40\uFF08\u884C\u6216\u5217\uFF09" }),
|
|
3323
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { children: "\u2705 \u4F7F\u7528 Grid \u5904\u7406\u590D\u6742\u7684\u4E8C\u7EF4\u5E03\u5C40\uFF08\u884C+\u5217\uFF09" }),
|
|
3324
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { children: "\u2705 \u79FB\u52A8\u7AEF\u4F18\u5148\uFF0C\u5148\u8BBE\u8BA1\u5C0F\u5C4F\u5E03\u5C40\u518D\u6269\u5C55" }),
|
|
3325
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { children: "\u2705 \u4FDD\u6301\u95F4\u8DDD\u4E00\u81F4\u6027\uFF0C\u4F7F\u7528\u6807\u51C6\u95F4\u8DDD\u503C" }),
|
|
3326
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { children: "\u274C \u907F\u514D\u56FA\u5B9A\u5BBD\u5EA6\uFF0C\u4F7F\u7528 flex-1\u3001col-span \u7B49\u54CD\u5E94\u5F0F\u5355\u4F4D" }),
|
|
3327
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { children: "\u274C \u907F\u514D\u8FC7\u5EA6\u5D4C\u5957\u6805\u683C\uFF0C\u4E0D\u8D85\u8FC72\u5C42" }),
|
|
3328
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { children: "\u274C \u5E95\u90E8\u56FA\u5B9A\u5143\u7D20\u5FC5\u987B\u9002\u914D iOS \u5B89\u5168\u533A\u57DF\uFF08pb-safe\uFF09" })
|
|
3329
|
+
] })
|
|
3330
|
+
] })
|
|
3331
|
+
] });
|
|
3332
|
+
}
|
|
3333
|
+
|
|
3334
|
+
exports.ActionSheet = ActionSheet;
|
|
3335
|
+
exports.BottomActionButtons = BottomActionButtons;
|
|
3336
|
+
exports.BottomNavigationBar = BottomNavigationBar;
|
|
3337
|
+
exports.BottomSheet = BottomSheet;
|
|
3338
|
+
exports.BottomSheetOption = BottomSheetOption;
|
|
3339
|
+
exports.BottomSheetShareItem = BottomSheetShareItem;
|
|
3340
|
+
exports.BottomToolbar = BottomToolbar;
|
|
3341
|
+
exports.Btn = Btn;
|
|
3342
|
+
exports.BubbleTip = BubbleTip;
|
|
3343
|
+
exports.DRAWER_STATES = DRAWER_STATES;
|
|
3344
|
+
exports.Dialog = Dialog;
|
|
3345
|
+
exports.DraggablePanel = DraggablePanel;
|
|
3346
|
+
exports.EmptyState = EmptyState;
|
|
3347
|
+
exports.GridSystemDocs = GridSystemDocs;
|
|
3348
|
+
exports.IcExpand = IcExpand;
|
|
3349
|
+
exports.IcPlan = IcPlan;
|
|
3350
|
+
exports.ImageWithFallback = ImageWithFallback;
|
|
3351
|
+
exports.Loading = Loading;
|
|
3352
|
+
exports.NewsItem = NewsItem;
|
|
3353
|
+
exports.NotificationBar = NotificationBar;
|
|
3354
|
+
exports.POIListItem = POIListItem;
|
|
3355
|
+
exports.PoiItem = PoiItem;
|
|
3356
|
+
exports.Push = Push;
|
|
3357
|
+
exports.SearchBox = SearchBox;
|
|
3358
|
+
exports.SegmentedControl = SegmentedControl;
|
|
3359
|
+
exports.StatGrid = StatGrid;
|
|
3360
|
+
exports.Switch = Switch;
|
|
3361
|
+
exports.Tag = Tag;
|
|
3362
|
+
exports.TencentMap = TencentMap;
|
|
3363
|
+
exports.Toast = Toast;
|
|
3364
|
+
exports.TopToolbar = TopToolbar;
|
|
3365
|
+
exports.TypographyDocs = TypographyDocs;
|
|
3366
|
+
exports.cn = cn;
|
|
3367
|
+
//# sourceMappingURL=index.js.map
|
|
3368
|
+
//# sourceMappingURL=index.js.map
|