@leeguoo/pwtk-network-debugger 1.2.49-beta.4 → 1.2.49-beta.5
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.cjs.js +1 -1
- package/dist/index.esm.js +11 -28
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/types/ui/styles.d.ts +1 -1
- package/types/ui/styles.d.ts.map +1 -1
package/package.json
CHANGED
package/types/ui/styles.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const styles = "\n/* iOS 26 Liquid Glass NetworkDebugger \u6837\u5F0F */\n:root {\n --liquid-glass-primary: rgba(255, 255, 255, 0.15);\n --liquid-glass-secondary: rgba(255, 255, 255, 0.08);\n --liquid-glass-border: rgba(255, 255, 255, 0.18);\n --liquid-glass-shadow: rgba(31, 38, 135, 0.37);\n --liquid-glass-highlight: rgba(255, 255, 255, 0.25);\n --liquid-glass-dark: rgba(13, 17, 23, 0.75);\n}\n\n#network-debugger-panel {\n position: fixed;\n z-index: 999999;\n \n /* \u5F3A\u5236 GPU \u52A0\u901F\u548C 3D \u53D8\u6362 */\n transform: translate3d(0, 0, 0);\n will-change: transform, backdrop-filter;\n \n /* iOS 26 Liquid Glass \u6838\u5FC3\u6548\u679C - \u589E\u5F3A\u7248 */\n backdrop-filter: blur(25px) saturate(200%) brightness(1.05) !important;\n -webkit-backdrop-filter: blur(25px) saturate(200%) brightness(1.05) !important;\n \n /* iOS \u6D45\u8272\u6BDB\u73BB\u7483\u80CC\u666F */\n background: rgba(245, 245, 247, 0.8);\n background-image: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.5) 0%,\n rgba(255, 255, 255, 0.25) 100%\n );\n \n /* \u73BB\u7483\u8FB9\u6846 */\n border: 1px solid rgba(255, 255, 255, 0.25);\n \n /* \u591A\u5C42\u9634\u5F71\u521B\u5EFA\u6DF1\u5EA6 */\n box-shadow: \n 0 10px 40px rgba(31, 38, 135, 0.4),\n inset 0 2px 4px rgba(255, 255, 255, 0.3),\n inset 0 -2px 4px rgba(0, 0, 0, 0.12);\n \n border-radius: 20px;\n color: #ffffff;\n font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Monaco', 'Menlo', monospace;\n font-size: 12px;\n overflow: hidden;\n max-width: 90vw;\n max-height: 80vh;\n \n /* \u6027\u80FD\u4F18\u5316 */\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* \u4E3B\u9762\u677F\u7684\u955C\u9762\u53CD\u5C04\u6548\u679C */\n#network-debugger-panel::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.3) 0%,\n rgba(255, 255, 255, 0.05) 50%,\n transparent 100%\n );\n pointer-events: none;\n z-index: 1;\n}\n\n/* \u955C\u9762\u9AD8\u5149\u6548\u679C */\n#network-debugger-panel::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background: radial-gradient(\n circle at 30% 30%,\n rgba(255, 255, 255, 0.2),\n transparent 70%\n );\n pointer-events: none;\n z-index: 1;\n}\n\n#network-debugger-panel.minimized {\n /* iOS \u63A7\u5236\u4E2D\u5FC3\u98CE\u683C\u7684\u5706\u89D2\u77E9\u5F62 */\n height: 48px !important;\n width: 220px !important;\n max-width: 220px !important;\n border-radius: 24px !important;\n overflow: hidden;\n \n /* \u5F3A\u5236 GPU \u52A0\u901F\u548C 3D \u53D8\u6362 */\n transform: translate3d(0, 0, 0) !important;\n will-change: transform, backdrop-filter !important;\n \n /* \u771F\u6B63\u7684 iOS Liquid Glass \u6548\u679C - \u52A0\u5F3A\u7248 */\n background: \n /* \u9876\u90E8\u9AD8\u5149 */\n linear-gradient(180deg, \n rgba(255, 255, 255, 0.5) 0%, \n rgba(255, 255, 255, 0.1) 35%),\n /* \u4E3B\u73BB\u7483\u5C42 */\n radial-gradient(ellipse at top, \n rgba(255, 255, 255, 0.35), \n rgba(255, 255, 255, 0.12)),\n /* iOS \u6D45\u8272\u57FA\u5E95 */\n rgba(245, 245, 247, 0.85) !important;\n \n /* \u589E\u5F3A\u6BDB\u73BB\u7483\u6548\u679C */\n backdrop-filter: blur(40px) saturate(220%) brightness(1.1) !important;\n -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(1.1) !important;\n \n /* iOS \u98CE\u683C\u8FB9\u7F18\u5149\u6548 - \u589E\u5F3A\u7248 */\n box-shadow: \n /* \u5916\u53D1\u5149 */\n 0 0 0 0.5px rgba(255, 255, 255, 0.7) !important,\n /* \u5185\u9634\u5F71\u521B\u5EFA\u73BB\u7483\u539A\u5EA6 */\n inset 0 1px 0 0 rgba(255, 255, 255, 0.7) !important,\n inset 0 -1px 0 0 rgba(0, 0, 0, 0.2) !important,\n /* \u6DF1\u5EA6\u9634\u5F71 */\n 0 15px 40px rgba(0, 0, 0, 0.3) !important,\n 0 4px 10px rgba(0, 0, 0, 0.2) !important;\n \n /* \u5E73\u6ED1\u8FC7\u6E21 */\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\n}\n\n#network-debugger-panel.minimized .debugger-content {\n display: none;\n}\n\n#network-debugger-panel.minimized .resize-handle {\n display: none;\n}\n\n#network-debugger-panel.fullscreen .resize-handle {\n display: none;\n}\n\n#network-debugger-panel.fullscreen {\n backdrop-filter: blur(25px) saturate(200%);\n -webkit-backdrop-filter: blur(25px) saturate(200%);\n}\n\n#network-debugger-panel.bottom-right {\n bottom: 20px;\n right: 20px;\n width: 600px;\n height: 500px;\n}\n\n#network-debugger-panel.bottom-left {\n bottom: 20px;\n left: 20px;\n width: 600px;\n height: 500px;\n}\n\n#network-debugger-panel.top-right {\n top: 20px;\n right: 20px;\n width: 600px;\n height: 500px;\n}\n\n#network-debugger-panel.top-left {\n top: 20px;\n left: 20px;\n width: 600px;\n height: 500px;\n}\n\n#network-debugger-panel.fullscreen {\n top: 0;\n left: 0;\n width: 100vw !important;\n height: 100vh !important;\n border-radius: 0;\n}\n\n.debugger-header {\n /* \u5934\u90E8 Liquid Glass \u6548\u679C */\n backdrop-filter: blur(15px) brightness(1.1);\n -webkit-backdrop-filter: blur(15px) brightness(1.1);\n \n /* \u591A\u5C42\u80CC\u666F\u6548\u679C */\n background: \n /* \u9876\u90E8\u9AD8\u5149 */\n linear-gradient(180deg, \n rgba(255, 255, 255, 0.8) 0%, \n rgba(255, 255, 255, 0.4) 60%),\n /* \u57FA\u7840\u73BB\u7483\u5C42 */\n linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.6),\n rgba(255, 255, 255, 0.4)\n );\n \n border: 1px solid rgba(255, 255, 255, 0.2);\n border-bottom: 1px solid rgba(255, 255, 255, 0.15);\n \n padding: 12px 16px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: move;\n user-select: none;\n position: relative;\n z-index: 2;\n \n /* iOS \u98CE\u683C\u5706\u89D2 */\n border-radius: 20px 20px 0 0;\n \n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.debugger-header:hover {\n backdrop-filter: blur(18px) brightness(1.15);\n -webkit-backdrop-filter: blur(18px) brightness(1.15);\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.15),\n rgba(255, 255, 255, 0.08)\n );\n}\n\n.debugger-title {\n font-weight: 600;\n color: rgba(60, 60, 67, 0.9);\n font-size: 15px;\n text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);\n}\n\n.debugger-controls {\n display: flex;\n gap: 10px;\n position: relative;\n z-index: 3;\n}\n\n/* \u641C\u7D22\u680F\u6837\u5F0F */\n.debugger-search-bar {\n padding: 8px 15px;\n backdrop-filter: blur(10px) brightness(1.08);\n -webkit-backdrop-filter: blur(10px) brightness(1.08);\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.5),\n rgba(255, 255, 255, 0.3)\n );\n border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n display: flex;\n align-items: center;\n gap: 10px;\n position: relative;\n z-index: 5;\n}\n\n.search-input-wrapper {\n flex: 1;\n position: relative;\n display: flex;\n align-items: center;\n background: rgba(255, 255, 255, 0.7);\n border: 1px solid rgba(0, 0, 0, 0.08);\n border-radius: 12px;\n padding: 6px 12px;\n transition: all 0.2s ease;\n box-shadow: \n inset 0 1px 3px rgba(0, 0, 0, 0.08),\n 0 1px 1px rgba(255, 255, 255, 0.5);\n}\n\n.search-input-wrapper:focus-within {\n background: rgba(255, 255, 255, 0.9);\n border-color: rgba(0, 122, 255, 0.3);\n box-shadow: \n inset 0 1px 3px rgba(0, 0, 0, 0.1),\n 0 0 0 3px rgba(0, 122, 255, 0.1);\n}\n\n.search-icon {\n margin-right: 6px;\n opacity: 0.5;\n flex-shrink: 0;\n}\n\n.search-input {\n flex: 1;\n border: none;\n background: transparent;\n color: rgba(60, 60, 67, 0.9);\n font-size: 13px;\n outline: none;\n font-family: inherit;\n}\n\n.search-input::placeholder {\n color: rgba(60, 60, 67, 0.5);\n}\n\n.search-clear-btn {\n background: rgba(0, 0, 0, 0.05);\n border: none;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n color: rgba(60, 60, 67, 0.7);\n font-size: 16px;\n line-height: 1;\n padding: 0;\n margin-left: 4px;\n flex-shrink: 0;\n transition: all 0.2s ease;\n}\n\n.search-clear-btn:hover {\n background: rgba(0, 0, 0, 0.1);\n color: rgba(60, 60, 67, 0.9);\n}\n\n.search-stats {\n color: rgba(60, 60, 67, 0.7);\n font-size: 12px;\n white-space: nowrap;\n display: none;\n}\n\n/* \u7A7A\u641C\u7D22\u7ED3\u679C\u6837\u5F0F */\n.empty-search-result {\n padding: 20px;\n}\n\n.empty-search-result svg {\n display: block;\n margin: 0 auto;\n}\n\n.debugger-btn {\n /* \u6309\u94AE\u6BDB\u73BB\u7483\u6548\u679C\u4F46\u4FDD\u8BC1\u53EF\u89C1\u6027 */\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.7),\n rgba(255, 255, 255, 0.5)\n );\n border: 1px solid rgba(0, 0, 0, 0.08);\n color: rgba(60, 60, 67, 0.9);\n text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);\n padding: 6px 12px;\n border-radius: 12px;\n cursor: pointer;\n font-size: 11px;\n font-weight: 600;\n \n /* \u6309\u94AE\u9634\u5F71 */\n box-shadow: \n 0 2px 8px rgba(0, 0, 0, 0.1),\n inset 0 1px 0 rgba(255, 255, 255, 0.25);\n \n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n transform: translateZ(0);\n}\n\n.debugger-btn:hover {\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.2),\n rgba(255, 255, 255, 0.12)\n );\n transform: scale(1.05) translateZ(5px);\n box-shadow: \n 0 4px 16px rgba(0, 0, 0, 0.15),\n inset 0 1px 0 rgba(255, 255, 255, 0.3);\n}\n\n.debugger-btn:active {\n transform: scale(0.98);\n transition: transform 0.1s;\n}\n\n.debugger-btn.active {\n background: linear-gradient(135deg, #007AFF, #5856D6);\n color: #ffffff;\n box-shadow: \n 0 4px 16px rgba(0, 122, 255, 0.25),\n inset 0 1px 0 rgba(255, 255, 255, 0.3);\n backdrop-filter: blur(12px);\n}\n\n.debugger-icon {\n width: 16px;\n height: 16px;\n vertical-align: middle;\n filter: \n brightness(0.8) \n drop-shadow(0 1px 2px rgba(255, 255, 255, 0.8));\n color: rgba(60, 60, 67, 0.8);\n}\n\n.debugger-content {\n height: calc(100% - 60px);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n/* \u79FB\u9664\u6807\u7B7E\u9875\u76F8\u5173\u6837\u5F0F - \u53EA\u4FDD\u7559\u7F51\u7EDC\u9762\u677F */\n\n.debugger-panel-content {\n flex: 1;\n overflow: auto;\n padding: 12px;\n}\n\n.request-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 16px;\n position: relative;\n z-index: 2;\n}\n\n.request-item {\n /* \u8BF7\u6C42\u9879\u6BDB\u73BB\u7483\u6548\u679C\u52A0\u52A8\u6001\u5149\u6548 */\n position: relative;\n backdrop-filter: blur(10px) brightness(1.1);\n -webkit-backdrop-filter: blur(10px) brightness(1.1);\n \n /* \u591A\u5C42\u80CC\u666F - \u6A21\u62DF Liquid Glass */\n background: \n /* \u52A8\u6001\u5149\u6548\u5C42 */\n linear-gradient(\n 105deg,\n transparent 35%,\n rgba(255, 255, 255, 0.25) 45%,\n rgba(255, 255, 255, 0.35) 50%,\n rgba(255, 255, 255, 0.25) 55%,\n transparent 65%\n ),\n /* \u57FA\u7840\u73BB\u7483\u5C42 */\n linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.8),\n rgba(255, 255, 255, 0.6)\n );\n \n background-size: 300% 100%, 100% 100%;\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 16px;\n padding: 16px;\n cursor: default;\n \n /* \u6DF1\u5EA6\u9634\u5F71\u548C\u73BB\u7483\u6548\u679C */\n box-shadow: \n 0 4px 16px rgba(31, 38, 135, 0.2),\n inset 0 1px 2px rgba(255, 255, 255, 0.15),\n inset 0 -1px 1px rgba(0, 0, 0, 0.05);\n \n /* \u6D41\u4F53\u52A8\u753B\u548C\u5149\u6548 */\n transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;\n transform: translateZ(0);\n animation: none;\n}\n\n/* \u6A21\u62DF\u6298\u5C04\u6548\u679C\u7684\u4F2A\u5143\u7D20 */\n.request-item::before {\n content: '';\n position: absolute;\n inset: -1px;\n border-radius: inherit;\n background: radial-gradient(\n circle at var(--mouse-x, 30%) var(--mouse-y, 30%),\n rgba(255, 255, 255, 0.4) 0%,\n rgba(255, 255, 255, 0.1) 30%,\n transparent 70%\n );\n opacity: 0;\n transition: opacity 0.4s ease;\n pointer-events: none;\n mix-blend-mode: overlay;\n z-index: 1;\n}\n\n/* \u9AD8\u5149\u6548\u679C\u4F2A\u5143\u7D20 */\n.request-item::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 40%;\n border-radius: 16px 16px 0 0;\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.2) 0%,\n transparent 100%\n );\n pointer-events: none;\n z-index: 1;\n}\n\n.request-item:hover {\n backdrop-filter: blur(15px) brightness(1.2);\n -webkit-backdrop-filter: blur(15px) brightness(1.2);\n \n /* \u589E\u5F3A hover \u65F6\u7684\u5149\u6548 - \u79FB\u9664\u4F1A\u5BFC\u81F4\u6296\u52A8\u7684\u6548\u679C */\n background: \n linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.2),\n rgba(255, 255, 255, 0.12)\n );\n \n /* \u79FB\u9664 transform \u548C animation \u907F\u514D\u6296\u52A8 */\n transition: background 0.2s ease, box-shadow 0.2s ease, backdrop-filter 0.2s ease;\n \n box-shadow: \n 0 8px 24px rgba(31, 38, 135, 0.25),\n inset 0 2px 4px rgba(255, 255, 255, 0.25),\n inset 0 -2px 2px rgba(0, 0, 0, 0.08);\n}\n\n/* \u6FC0\u6D3B\u6298\u5C04\u6548\u679C */\n.request-item:hover::before {\n opacity: 1;\n}\n\n.request-item.expanded {\n backdrop-filter: blur(18px) brightness(1.2);\n -webkit-backdrop-filter: blur(18px) brightness(1.2);\n background: linear-gradient(\n 135deg,\n rgba(0, 122, 255, 0.08),\n rgba(255, 255, 255, 0.05)\n );\n border-color: rgba(0, 122, 255, 0.2);\n box-shadow: \n 0 8px 32px rgba(0, 0, 0, 0.15),\n inset 0 2px 4px rgba(255, 255, 255, 0.15);\n}\n\n.request-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 4px;\n cursor: pointer;\n}\n\n.request-method {\n /* \u65B9\u6CD5\u6807\u7B7E\u6BDB\u73BB\u7483\u6548\u679C */\n backdrop-filter: blur(6px);\n -webkit-backdrop-filter: blur(6px);\n padding: 4px 10px;\n border-radius: 10px;\n font-weight: 600;\n font-size: 10px;\n text-transform: uppercase;\n min-width: 45px;\n text-align: center;\n border: 1px solid rgba(255, 255, 255, 0.2);\n box-shadow: \n 0 2px 8px rgba(0, 0, 0, 0.1),\n inset 0 1px 0 rgba(255, 255, 255, 0.25);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.method-get { \n background: linear-gradient(135deg, #4CAF50, #45a049);\n color: #ffffff;\n box-shadow: 0 0 15px rgba(76, 175, 80, 0.4);\n}\n.method-post { \n background: linear-gradient(135deg, #2196F3, #1976D2);\n color: #ffffff;\n box-shadow: 0 0 15px rgba(33, 150, 243, 0.4);\n}\n.method-put { \n background: linear-gradient(135deg, #FF9800, #F57C00);\n color: #ffffff;\n box-shadow: 0 0 15px rgba(255, 152, 0, 0.4);\n}\n.method-delete { \n background: linear-gradient(135deg, #F44336, #D32F2F);\n color: #ffffff;\n box-shadow: 0 0 15px rgba(244, 67, 54, 0.4);\n}\n.method-patch { \n background: linear-gradient(135deg, #9C27B0, #7B1FA2);\n color: #ffffff;\n box-shadow: 0 0 15px rgba(156, 39, 176, 0.4);\n}\n\n.request-url {\n flex: 1;\n margin: 0 8px;\n word-break: break-all;\n white-space: normal;\n color: rgba(60, 60, 67, 0.9);\n font-size: 11px;\n line-height: 1.3;\n}\n\n.request-status {\n /* \u72B6\u6001\u7801\u6807\u7B7E\u6BDB\u73BB\u7483\u6548\u679C */\n backdrop-filter: blur(6px);\n -webkit-backdrop-filter: blur(6px);\n padding: 4px 10px;\n border-radius: 10px;\n font-size: 10px;\n font-weight: 600;\n min-width: 40px;\n text-align: center;\n border: 1px solid rgba(255, 255, 255, 0.2);\n box-shadow: \n 0 2px 8px rgba(0, 0, 0, 0.1),\n inset 0 1px 0 rgba(255, 255, 255, 0.25);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.status-2xx { \n background: linear-gradient(135deg, #4CAF50, #45a049);\n color: #ffffff;\n box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);\n}\n.status-3xx { \n background: linear-gradient(135deg, #FF9800, #F57C00);\n color: #ffffff;\n box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);\n}\n.status-4xx { \n background: linear-gradient(135deg, #F44336, #D32F2F);\n color: #ffffff;\n box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);\n}\n.status-5xx { \n background: linear-gradient(135deg, #9C27B0, #7B1FA2);\n color: #ffffff;\n box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);\n}\n.status-error { \n background: linear-gradient(135deg, #F44336, #D32F2F);\n color: #ffffff;\n box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);\n}\n\n.request-info {\n display: flex;\n justify-content: space-between;\n font-size: 10px;\n color: rgba(60, 60, 67, 0.7);\n}\n\n.request-details {\n margin-top: 12px;\n border-top: 1px solid rgba(60, 60, 67, 0.2);\n padding-top: 12px;\n display: none;\n}\n\n/* \u9ED8\u8BA4\u6298\u53E0headers */\n.request-details .detail-section.collapsible {\n /* \u9ED8\u8BA4\u6298\u53E0\u72B6\u6001 */\n}\n\n.request-details .detail-section.collapsible:not(.expanded) .detail-content {\n display: none;\n}\n\n.request-details .detail-section.collapsible:not(.expanded) .collapse-icon {\n transform: rotate(-90deg);\n}\n\n.request-item.expanded .request-details {\n display: block;\n}\n\n.detail-section {\n margin-bottom: 16px;\n}\n\n.detail-title {\n font-weight: bold;\n color: #4CAF50;\n margin-bottom: 8px;\n font-size: 11px;\n text-transform: uppercase;\n border-bottom: 1px solid rgba(60, 60, 67, 0.2);\n padding-bottom: 4px;\n}\n\n.detail-title.highlight {\n color: #FFD700;\n font-size: 12px;\n background: rgba(255, 215, 0, 0.1);\n padding: 6px 8px;\n border-radius: 4px;\n border-bottom: 2px solid #FFD700;\n}\n\n.detail-title.clickable {\n cursor: pointer;\n user-select: none;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.detail-title.clickable:hover {\n background: rgba(76, 175, 80, 0.1);\n}\n\n.collapse-icon {\n display: inline-block;\n transition: transform 0.2s;\n font-size: 10px;\n}\n\n.detail-section.collapsible {\n position: relative;\n}\n\n.detail-section.collapsible.collapsed .detail-content {\n display: none;\n}\n\n.detail-section.collapsible.collapsed .collapse-icon {\n transform: rotate(-90deg);\n}\n\n.detail-content {\n /* \u8BE6\u60C5\u5185\u5BB9\u6BDB\u73BB\u7483\u6548\u679C - \u6D45\u8272\u4E3B\u9898 */\n backdrop-filter: blur(8px) brightness(1.1);\n -webkit-backdrop-filter: blur(8px) brightness(1.1);\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.6),\n rgba(255, 255, 255, 0.4)\n );\n border: 1px solid rgba(60, 60, 67, 0.2);\n padding: 16px;\n border-radius: 12px;\n max-height: 400px;\n min-height: 300px;\n overflow: auto;\n user-select: text;\n \n /* \u5185\u90E8\u9634\u5F71 */\n box-shadow: \n inset 0 2px 4px rgba(0, 0, 0, 0.05),\n inset 0 -1px 2px rgba(255, 255, 255, 0.15);\n \n /* \u5E73\u6ED1\u6EDA\u52A8 */\n scroll-behavior: smooth;\n}\n\n.json-content {\n white-space: pre-wrap;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 11px;\n line-height: 1.4;\n color: rgba(60, 60, 67, 0.9);\n}\n\n.headers-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 10px;\n}\n\n.headers-table th,\n.headers-table td {\n padding: 4px 8px;\n text-align: left;\n border-bottom: 1px solid rgba(60, 60, 67, 0.2);\n}\n\n.headers-table th {\n background: rgba(255, 255, 255, 0.3);\n color: #4CAF50;\n font-weight: bold;\n}\n\n.headers-table td {\n color: rgba(60, 60, 67, 0.8);\n}\n\n.decrypted-badge {\n background: #4CAF50;\n color: #000;\n padding: 2px 6px;\n border-radius: 3px;\n font-size: 9px;\n margin-left: 8px;\n font-weight: bold;\n}\n\n.error-badge {\n background: #F44336;\n color: #fff;\n padding: 2px 6px;\n border-radius: 3px;\n font-size: 9px;\n margin-left: 8px;\n font-weight: bold;\n}\n\n.share-btn {\n /* \u5206\u4EAB\u6309\u94AE\u6BDB\u73BB\u7483\u6548\u679C */\n backdrop-filter: blur(6px);\n -webkit-backdrop-filter: blur(6px);\n background: linear-gradient(135deg, #2196F3, #1976D2);\n color: #ffffff;\n border: 1px solid rgba(33, 150, 243, 0.3);\n padding: 6px 12px;\n border-radius: 10px;\n font-size: 10px;\n font-weight: 500;\n margin-left: 8px;\n cursor: pointer;\n white-space: nowrap;\n \n box-shadow: \n 0 2px 8px rgba(33, 150, 243, 0.3),\n inset 0 1px 0 rgba(255, 255, 255, 0.2);\n \n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n transform: translateZ(0);\n}\n\n.share-btn:hover {\n background: linear-gradient(135deg, #1976D2, #1565C0);\n transform: scale(1.05) translateZ(5px);\n box-shadow: \n 0 4px 16px rgba(33, 150, 243, 0.4),\n inset 0 1px 0 rgba(255, 255, 255, 0.3);\n}\n\n.share-btn:active {\n transform: scale(0.98);\n transition: transform 0.1s;\n}\n\n.api-curl-btn {\n /* API Curl \u6309\u94AE\u6BDB\u73BB\u7483\u6548\u679C */\n backdrop-filter: blur(6px);\n -webkit-backdrop-filter: blur(6px);\n background: linear-gradient(135deg, #4CAF50, #45a049);\n color: #ffffff;\n border: 1px solid rgba(76, 175, 80, 0.3);\n padding: 6px 12px;\n border-radius: 10px;\n font-size: 10px;\n font-weight: 500;\n margin-left: 8px;\n cursor: pointer;\n white-space: nowrap;\n \n box-shadow: \n 0 2px 8px rgba(76, 175, 80, 0.3),\n inset 0 1px 0 rgba(255, 255, 255, 0.2);\n \n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n transform: translateZ(0);\n}\n\n.api-curl-btn:hover {\n background: linear-gradient(135deg, #45a049, #388E3C);\n transform: scale(1.05) translateZ(5px);\n box-shadow: \n 0 4px 16px rgba(76, 175, 80, 0.4),\n inset 0 1px 0 rgba(255, 255, 255, 0.3);\n}\n\n.api-curl-btn:active {\n transform: scale(0.98);\n transition: transform 0.1s;\n}\n\n.console-content {\n background: #000;\n color: #0f0;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 11px;\n line-height: 1.4;\n height: 100%;\n overflow: auto;\n padding: 8px;\n}\n\n.console-input {\n display: flex;\n align-items: center;\n background: #333;\n padding: 8px;\n border-top: 1px solid #444;\n}\n\n.console-prompt {\n color: #4CAF50;\n margin-right: 8px;\n font-weight: bold;\n}\n\n.console-cmd {\n flex: 1;\n background: none;\n border: none;\n color: #fff;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 12px;\n outline: none;\n}\n\n.tools-section {\n padding: 12px;\n background: #2a2a2a;\n border-bottom: 1px solid #444;\n}\n\n.tool-buttons {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.tool-btn {\n padding: 6px 12px;\n background: #4CAF50;\n color: #000;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 11px;\n font-weight: bold;\n transition: background-color 0.2s;\n}\n\n.tool-btn:hover {\n background: #45a049;\n}\n\n.tool-btn:disabled {\n background: #666;\n color: #999;\n cursor: not-allowed;\n}\n\n/* \u52A8\u6001\u5149\u6548\u52A8\u753B - \u6A21\u62DF Shader \u6548\u679C */\n@keyframes liquid-shimmer {\n 0% {\n background-position: -300% center;\n transform: translateX(-10px);\n }\n 50% {\n transform: translateX(0);\n }\n 100% {\n background-position: 300% center;\n transform: translateX(10px);\n }\n}\n\n@keyframes liquid-refraction {\n 0%, 100% {\n transform: scale(1) perspective(1000px) rotateY(0deg);\n filter: blur(0px);\n }\n 25% {\n transform: scale(1.01) perspective(1000px) rotateY(0.5deg);\n filter: blur(0.5px);\n }\n 75% {\n transform: scale(0.99) perspective(1000px) rotateY(-0.5deg);\n filter: blur(0.3px);\n }\n}\n\n@keyframes liquid-expand {\n 0% { \n opacity: 0;\n transform: scale(0.95) translateY(-10px);\n backdrop-filter: blur(5px);\n }\n 50% { \n opacity: 0.7;\n transform: scale(1.02) translateY(-2px);\n backdrop-filter: blur(12px);\n }\n 100% { \n opacity: 1;\n transform: scale(1) translateY(0);\n backdrop-filter: blur(8px);\n }\n}\n\n@keyframes liquid-glow {\n 0%, 100% { \n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n }\n 50% { \n box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);\n }\n}\n\n.expanding {\n animation: liquid-expand 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.request-item.expanded {\n animation: liquid-glow 2s ease-in-out infinite;\n}\n\n/* \u79FB\u52A8\u7AEF\u54CD\u5E94\u5F0F */\n@media (max-width: 768px) {\n #network-debugger-panel.bottom-right,\n #network-debugger-panel.bottom-left,\n #network-debugger-panel.top-right,\n #network-debugger-panel.top-left {\n width: calc(100vw - 20px) !important;\n left: 10px !important;\n right: auto !important;\n /* \u79FB\u52A8\u7AEF\u6E05\u6670\u6BDB\u73BB\u7483 */\n backdrop-filter: blur(15px) saturate(150%);\n -webkit-backdrop-filter: blur(15px) saturate(150%);\n }\n \n .request-item {\n padding: 12px;\n border-radius: 12px;\n }\n \n .debugger-header {\n padding: 10px 12px;\n }\n \n .debugger-controls {\n gap: 6px;\n }\n \n .debugger-btn {\n padding: 4px 8px;\n font-size: 10px;\n }\n \n /* \u6700\u5C0F\u5316\u65F6\u4E0D\u5E94\u7528\u5168\u5BBD\uFF0C\u4FDD\u6301\u5C0F\u5C3A\u5BF8 */\n #network-debugger-panel.minimized {\n width: 180px !important;\n max-width: 180px !important;\n height: 40px !important;\n }\n}\n\n@media (max-width: 480px) {\n .request-header {\n flex-direction: column;\n gap: 8px;\n align-items: stretch;\n }\n \n .request-method,\n .request-status {\n align-self: flex-start;\n }\n \n .share-btn,\n .api-curl-btn {\n margin-left: 0;\n margin-top: 4px;\n }\n}\n\n/* iOS 26 \u98CE\u683C\u6EDA\u52A8\u6761 */\n#network-debugger-panel ::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n#network-debugger-panel ::-webkit-scrollbar-track {\n background: rgba(255, 255, 255, 0.05);\n border-radius: 4px;\n backdrop-filter: blur(5px);\n}\n\n#network-debugger-panel ::-webkit-scrollbar-thumb {\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.2),\n rgba(255, 255, 255, 0.1)\n );\n border-radius: 4px;\n border: 1px solid rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n transition: all 0.3s ease;\n}\n\n#network-debugger-panel ::-webkit-scrollbar-thumb:hover {\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.3),\n rgba(255, 255, 255, 0.15)\n );\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n}\n\n.resize-handle {\n position: absolute;\n background: transparent;\n}\n\n.resize-handle.n {\n top: -3px;\n left: 0;\n right: 0;\n height: 6px;\n cursor: ns-resize;\n}\n\n.resize-handle.s {\n bottom: -3px;\n left: 0;\n right: 0;\n height: 6px;\n cursor: ns-resize;\n}\n\n.resize-handle.e {\n top: 0;\n right: -3px;\n bottom: 0;\n width: 6px;\n cursor: ew-resize;\n}\n\n.resize-handle.w {\n top: 0;\n left: -3px;\n bottom: 0;\n width: 6px;\n cursor: ew-resize;\n}\n\n.resize-handle.ne {\n top: -3px;\n right: -3px;\n width: 12px;\n height: 12px;\n cursor: ne-resize;\n}\n\n.resize-handle.nw {\n top: -3px;\n left: -3px;\n width: 12px;\n height: 12px;\n cursor: nw-resize;\n}\n\n.resize-handle.se {\n bottom: -3px;\n right: -3px;\n width: 12px;\n height: 12px;\n cursor: se-resize;\n}\n\n.resize-handle.sw {\n bottom: -3px;\n left: -3px;\n width: 12px;\n height: 12px;\n cursor: sw-resize;\n}\n\n.debugger-reopen-btn {\n position: fixed;\n z-index: 999999;\n background: #4CAF50;\n color: #000;\n border: none;\n padding: 8px 10px;\n border-radius: 16px;\n font-weight: bold;\n font-size: 12px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.25);\n cursor: pointer;\n}\n\n.debugger-reopen-btn:hover {\n filter: brightness(0.95);\n}\n";
|
|
1
|
+
export declare const styles = "\n/* iOS 26 Liquid Glass NetworkDebugger \u6837\u5F0F */\n:root {\n --liquid-glass-primary: rgba(255, 255, 255, 0.15);\n --liquid-glass-secondary: rgba(255, 255, 255, 0.08);\n --liquid-glass-border: rgba(255, 255, 255, 0.18);\n --liquid-glass-shadow: rgba(31, 38, 135, 0.37);\n --liquid-glass-highlight: rgba(255, 255, 255, 0.25);\n --liquid-glass-dark: rgba(13, 17, 23, 0.75);\n}\n\n#network-debugger-panel {\n position: fixed;\n z-index: 999999;\n \n /* \u5F3A\u5236 GPU \u52A0\u901F\u548C 3D \u53D8\u6362 */\n transform: translate3d(0, 0, 0);\n will-change: transform, backdrop-filter;\n \n /* iOS 26 Liquid Glass \u6838\u5FC3\u6548\u679C - \u589E\u5F3A\u7248 */\n backdrop-filter: blur(25px) saturate(200%) brightness(1.05) !important;\n -webkit-backdrop-filter: blur(25px) saturate(200%) brightness(1.05) !important;\n \n /* iOS \u6D45\u8272\u6BDB\u73BB\u7483\u80CC\u666F */\n background: rgba(245, 245, 247, 0.8);\n background-image: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.5) 0%,\n rgba(255, 255, 255, 0.25) 100%\n );\n \n /* \u73BB\u7483\u8FB9\u6846 */\n border: 1px solid rgba(255, 255, 255, 0.25);\n \n /* \u591A\u5C42\u9634\u5F71\u521B\u5EFA\u6DF1\u5EA6 */\n box-shadow: \n 0 10px 40px rgba(31, 38, 135, 0.4),\n inset 0 2px 4px rgba(255, 255, 255, 0.3),\n inset 0 -2px 4px rgba(0, 0, 0, 0.12);\n \n border-radius: 20px;\n color: #ffffff;\n font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Monaco', 'Menlo', monospace;\n font-size: 12px;\n overflow: hidden;\n max-width: 90vw;\n max-height: 80vh;\n \n /* \u6027\u80FD\u4F18\u5316 */\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* \u4E3B\u9762\u677F\u7684\u955C\u9762\u53CD\u5C04\u6548\u679C */\n#network-debugger-panel::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.3) 0%,\n rgba(255, 255, 255, 0.05) 50%,\n transparent 100%\n );\n pointer-events: none;\n z-index: 1;\n}\n\n/* \u955C\u9762\u9AD8\u5149\u6548\u679C */\n#network-debugger-panel::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background: radial-gradient(\n circle at 30% 30%,\n rgba(255, 255, 255, 0.2),\n transparent 70%\n );\n pointer-events: none;\n z-index: 1;\n}\n\n#network-debugger-panel.minimized {\n /* iOS \u63A7\u5236\u4E2D\u5FC3\u98CE\u683C\u7684\u5706\u89D2\u77E9\u5F62 */\n height: 48px !important;\n width: 220px !important;\n max-width: 220px !important;\n border-radius: 24px !important;\n overflow: hidden;\n \n /* \u5F3A\u5236 GPU \u52A0\u901F\u548C 3D \u53D8\u6362 */\n transform: translate3d(0, 0, 0) !important;\n will-change: transform, backdrop-filter !important;\n \n /* \u771F\u6B63\u7684 iOS Liquid Glass \u6548\u679C - \u52A0\u5F3A\u7248 */\n background: \n /* \u9876\u90E8\u9AD8\u5149 */\n linear-gradient(180deg, \n rgba(255, 255, 255, 0.5) 0%, \n rgba(255, 255, 255, 0.1) 35%),\n /* \u4E3B\u73BB\u7483\u5C42 */\n radial-gradient(ellipse at top, \n rgba(255, 255, 255, 0.35), \n rgba(255, 255, 255, 0.12)),\n /* iOS \u6D45\u8272\u57FA\u5E95 */\n rgba(245, 245, 247, 0.85) !important;\n \n /* \u589E\u5F3A\u6BDB\u73BB\u7483\u6548\u679C */\n backdrop-filter: blur(40px) saturate(220%) brightness(1.1) !important;\n -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(1.1) !important;\n \n /* iOS \u98CE\u683C\u8FB9\u7F18\u5149\u6548 - \u589E\u5F3A\u7248 */\n box-shadow: \n /* \u5916\u53D1\u5149 */\n 0 0 0 0.5px rgba(255, 255, 255, 0.7) !important,\n /* \u5185\u9634\u5F71\u521B\u5EFA\u73BB\u7483\u539A\u5EA6 */\n inset 0 1px 0 0 rgba(255, 255, 255, 0.7) !important,\n inset 0 -1px 0 0 rgba(0, 0, 0, 0.2) !important,\n /* \u6DF1\u5EA6\u9634\u5F71 */\n 0 15px 40px rgba(0, 0, 0, 0.3) !important,\n 0 4px 10px rgba(0, 0, 0, 0.2) !important;\n \n /* \u5E73\u6ED1\u8FC7\u6E21 */\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\n}\n\n#network-debugger-panel.minimized .debugger-content {\n display: none;\n}\n\n#network-debugger-panel.minimized .resize-handle {\n display: none;\n}\n\n#network-debugger-panel.fullscreen .resize-handle {\n display: none;\n}\n\n#network-debugger-panel.fullscreen {\n backdrop-filter: blur(25px) saturate(200%);\n -webkit-backdrop-filter: blur(25px) saturate(200%);\n}\n\n#network-debugger-panel.bottom-right {\n bottom: 20px;\n right: 20px;\n width: 600px;\n height: 500px;\n}\n\n#network-debugger-panel.bottom-left {\n bottom: 20px;\n left: 20px;\n width: 600px;\n height: 500px;\n}\n\n#network-debugger-panel.top-right {\n top: 20px;\n right: 20px;\n width: 600px;\n height: 500px;\n}\n\n#network-debugger-panel.top-left {\n top: 20px;\n left: 20px;\n width: 600px;\n height: 500px;\n}\n\n#network-debugger-panel.fullscreen {\n top: 0;\n left: 0;\n width: 100vw !important;\n height: 100vh !important;\n border-radius: 0;\n}\n\n.debugger-header {\n /* \u5934\u90E8 Liquid Glass \u6548\u679C */\n backdrop-filter: blur(15px) brightness(1.1);\n -webkit-backdrop-filter: blur(15px) brightness(1.1);\n \n /* \u591A\u5C42\u80CC\u666F\u6548\u679C */\n background: \n /* \u9876\u90E8\u9AD8\u5149 */\n linear-gradient(180deg, \n rgba(255, 255, 255, 0.8) 0%, \n rgba(255, 255, 255, 0.4) 60%),\n /* \u57FA\u7840\u73BB\u7483\u5C42 */\n linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.6),\n rgba(255, 255, 255, 0.4)\n );\n \n border: 1px solid rgba(255, 255, 255, 0.2);\n border-bottom: 1px solid rgba(255, 255, 255, 0.15);\n \n padding: 12px 16px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: move;\n user-select: none;\n position: relative;\n z-index: 2;\n \n /* iOS \u98CE\u683C\u5706\u89D2 */\n border-radius: 20px 20px 0 0;\n \n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.debugger-header:hover {\n backdrop-filter: blur(18px) brightness(1.15);\n -webkit-backdrop-filter: blur(18px) brightness(1.15);\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.15),\n rgba(255, 255, 255, 0.08)\n );\n}\n\n.debugger-title {\n font-weight: 600;\n color: rgba(60, 60, 67, 0.9);\n font-size: 15px;\n text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);\n}\n\n.debugger-controls {\n display: flex;\n gap: 10px;\n position: relative;\n z-index: 3;\n}\n\n/* \u641C\u7D22\u680F\u6837\u5F0F */\n.debugger-search-bar {\n padding: 8px 15px;\n backdrop-filter: blur(10px) brightness(1.08);\n -webkit-backdrop-filter: blur(10px) brightness(1.08);\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.5),\n rgba(255, 255, 255, 0.3)\n );\n border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n display: flex;\n align-items: center;\n gap: 10px;\n position: relative;\n z-index: 5;\n}\n\n.search-input-wrapper {\n flex: 1;\n position: relative;\n display: flex;\n align-items: center;\n background: rgba(255, 255, 255, 0.7);\n border: 1px solid rgba(0, 0, 0, 0.08);\n border-radius: 12px;\n padding: 6px 12px;\n transition: all 0.2s ease;\n box-shadow: \n inset 0 1px 3px rgba(0, 0, 0, 0.08),\n 0 1px 1px rgba(255, 255, 255, 0.5);\n}\n\n.search-input-wrapper:focus-within {\n background: rgba(255, 255, 255, 0.9);\n border-color: rgba(0, 122, 255, 0.3);\n box-shadow: \n inset 0 1px 3px rgba(0, 0, 0, 0.1),\n 0 0 0 3px rgba(0, 122, 255, 0.1);\n}\n\n.search-icon {\n margin-right: 6px;\n opacity: 0.5;\n flex-shrink: 0;\n}\n\n.search-input {\n flex: 1;\n border: none;\n background: transparent;\n color: rgba(60, 60, 67, 0.9);\n font-size: 13px;\n outline: none;\n font-family: inherit;\n}\n\n.search-input::placeholder {\n color: rgba(60, 60, 67, 0.5);\n}\n\n.search-clear-btn {\n background: rgba(0, 0, 0, 0.05);\n border: none;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n color: rgba(60, 60, 67, 0.7);\n font-size: 16px;\n line-height: 1;\n padding: 0;\n margin-left: 4px;\n flex-shrink: 0;\n transition: all 0.2s ease;\n}\n\n.search-clear-btn:hover {\n background: rgba(0, 0, 0, 0.1);\n color: rgba(60, 60, 67, 0.9);\n}\n\n.search-stats {\n color: rgba(60, 60, 67, 0.7);\n font-size: 12px;\n white-space: nowrap;\n display: none;\n}\n\n/* \u7A7A\u641C\u7D22\u7ED3\u679C\u6837\u5F0F */\n.empty-search-result {\n padding: 20px;\n}\n\n.empty-search-result svg {\n display: block;\n margin: 0 auto;\n}\n\n.debugger-btn {\n /* \u6309\u94AE\u6BDB\u73BB\u7483\u6548\u679C\u4F46\u4FDD\u8BC1\u53EF\u89C1\u6027 */\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.7),\n rgba(255, 255, 255, 0.5)\n );\n border: 1px solid rgba(0, 0, 0, 0.08);\n color: rgba(60, 60, 67, 0.9);\n text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);\n padding: 6px 12px;\n border-radius: 12px;\n cursor: pointer;\n font-size: 11px;\n font-weight: 600;\n \n /* \u6309\u94AE\u9634\u5F71 */\n box-shadow: \n 0 2px 8px rgba(0, 0, 0, 0.1),\n inset 0 1px 0 rgba(255, 255, 255, 0.25);\n \n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n transform: translateZ(0);\n}\n\n.debugger-btn:hover {\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.2),\n rgba(255, 255, 255, 0.12)\n );\n transform: scale(1.05) translateZ(5px);\n box-shadow: \n 0 4px 16px rgba(0, 0, 0, 0.15),\n inset 0 1px 0 rgba(255, 255, 255, 0.3);\n}\n\n.debugger-btn:active {\n transform: scale(0.98);\n transition: transform 0.1s;\n}\n\n.debugger-btn.active {\n background: linear-gradient(135deg, #007AFF, #5856D6);\n color: #ffffff;\n box-shadow: \n 0 4px 16px rgba(0, 122, 255, 0.25),\n inset 0 1px 0 rgba(255, 255, 255, 0.3);\n backdrop-filter: blur(12px);\n}\n\n.debugger-icon {\n width: 16px;\n height: 16px;\n vertical-align: middle;\n filter: \n brightness(0.8) \n drop-shadow(0 1px 2px rgba(255, 255, 255, 0.8));\n color: rgba(60, 60, 67, 0.8);\n}\n\n.debugger-content {\n height: calc(100% - 60px);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n/* \u79FB\u9664\u6807\u7B7E\u9875\u76F8\u5173\u6837\u5F0F - \u53EA\u4FDD\u7559\u7F51\u7EDC\u9762\u677F */\n\n.debugger-panel-content {\n flex: 1;\n overflow: auto;\n padding: 12px;\n}\n\n.request-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 16px;\n position: relative;\n z-index: 2;\n}\n\n.request-item {\n /* \u8BF7\u6C42\u9879\u6BDB\u73BB\u7483\u6548\u679C\u52A0\u52A8\u6001\u5149\u6548 */\n position: relative;\n backdrop-filter: blur(10px) brightness(1.1);\n -webkit-backdrop-filter: blur(10px) brightness(1.1);\n \n /* \u80CC\u666F\u6781\u7B80\u5316\uFF0C\u907F\u514D\u906E\u6321\u6587\u672C */\n background: rgba(255, 255, 255, 0.35);\n border: 1px solid rgba(255, 255, 255, 0.28);\n border-radius: 16px;\n padding: 16px;\n cursor: default;\n \n /* \u6DF1\u5EA6\u9634\u5F71\u548C\u73BB\u7483\u6548\u679C */\n box-shadow: \n 0 4px 16px rgba(31, 38, 135, 0.2),\n inset 0 1px 2px rgba(255, 255, 255, 0.15),\n inset 0 -1px 1px rgba(0, 0, 0, 0.05);\n \n /* \u6D41\u4F53\u52A8\u753B\u548C\u5149\u6548 */\n transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;\n transform: translateZ(0);\n animation: none;\n}\n\n/* \u6A21\u62DF\u6298\u5C04\u6548\u679C\u7684\u4F2A\u5143\u7D20 */\n.request-item::before {\n content: '';\n position: absolute;\n inset: -1px;\n border-radius: inherit;\n background: radial-gradient(\n circle at var(--mouse-x, 30%) var(--mouse-y, 30%),\n rgba(255, 255, 255, 0.4) 0%,\n rgba(255, 255, 255, 0.1) 30%,\n transparent 70%\n );\n opacity: 0;\n transition: opacity 0.4s ease;\n pointer-events: none;\n mix-blend-mode: overlay;\n z-index: 1;\n}\n\n/* \u9AD8\u5149\u6548\u679C\u4F2A\u5143\u7D20 */\n.request-item::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 40%;\n border-radius: 16px 16px 0 0;\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.2) 0%,\n transparent 100%\n );\n pointer-events: none;\n z-index: 1;\n}\n\n.request-item:hover {\n backdrop-filter: blur(15px) brightness(1.2);\n -webkit-backdrop-filter: blur(15px) brightness(1.2);\n \n /* \u589E\u5F3A hover \u65F6\u7684\u5149\u6548 - \u79FB\u9664\u4F1A\u5BFC\u81F4\u6296\u52A8\u7684\u6548\u679C */\n background: \n linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.2),\n rgba(255, 255, 255, 0.12)\n );\n \n /* \u79FB\u9664 transform \u548C animation \u907F\u514D\u6296\u52A8 */\n transition: background 0.2s ease, box-shadow 0.2s ease, backdrop-filter 0.2s ease;\n \n box-shadow: \n 0 8px 24px rgba(31, 38, 135, 0.25),\n inset 0 2px 4px rgba(255, 255, 255, 0.25),\n inset 0 -2px 2px rgba(0, 0, 0, 0.08);\n}\n\n/* \u6FC0\u6D3B\u6298\u5C04\u6548\u679C */\n.request-item:hover::before {\n opacity: 1;\n}\n\n.request-item.expanded {\n backdrop-filter: blur(18px) brightness(1.2);\n -webkit-backdrop-filter: blur(18px) brightness(1.2);\n background: linear-gradient(\n 135deg,\n rgba(0, 122, 255, 0.08),\n rgba(255, 255, 255, 0.05)\n );\n border-color: rgba(0, 122, 255, 0.2);\n box-shadow: \n 0 8px 32px rgba(0, 0, 0, 0.15),\n inset 0 2px 4px rgba(255, 255, 255, 0.15);\n}\n\n.request-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 4px;\n cursor: pointer;\n}\n\n.request-method {\n /* \u65B9\u6CD5\u6807\u7B7E\u6BDB\u73BB\u7483\u6548\u679C */\n backdrop-filter: blur(6px);\n -webkit-backdrop-filter: blur(6px);\n padding: 4px 10px;\n border-radius: 10px;\n font-weight: 600;\n font-size: 10px;\n text-transform: uppercase;\n min-width: 45px;\n text-align: center;\n border: 1px solid rgba(255, 255, 255, 0.2);\n box-shadow: \n 0 2px 8px rgba(0, 0, 0, 0.1),\n inset 0 1px 0 rgba(255, 255, 255, 0.25);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.method-get { \n background: linear-gradient(135deg, #4CAF50, #45a049);\n color: #ffffff;\n box-shadow: 0 0 15px rgba(76, 175, 80, 0.4);\n}\n.method-post { \n background: linear-gradient(135deg, #2196F3, #1976D2);\n color: #ffffff;\n box-shadow: 0 0 15px rgba(33, 150, 243, 0.4);\n}\n.method-put { \n background: linear-gradient(135deg, #FF9800, #F57C00);\n color: #ffffff;\n box-shadow: 0 0 15px rgba(255, 152, 0, 0.4);\n}\n.method-delete { \n background: linear-gradient(135deg, #F44336, #D32F2F);\n color: #ffffff;\n box-shadow: 0 0 15px rgba(244, 67, 54, 0.4);\n}\n.method-patch { \n background: linear-gradient(135deg, #9C27B0, #7B1FA2);\n color: #ffffff;\n box-shadow: 0 0 15px rgba(156, 39, 176, 0.4);\n}\n\n.request-url {\n flex: 1;\n margin: 0 8px;\n word-break: break-all;\n white-space: normal;\n color: rgba(20, 20, 33, 0.98);\n font-size: 11px;\n line-height: 1.3;\n}\n\n.request-status {\n /* \u72B6\u6001\u7801\u6807\u7B7E\u6BDB\u73BB\u7483\u6548\u679C */\n backdrop-filter: blur(6px);\n -webkit-backdrop-filter: blur(6px);\n padding: 4px 10px;\n border-radius: 10px;\n font-size: 10px;\n font-weight: 600;\n min-width: 40px;\n text-align: center;\n border: 1px solid rgba(255, 255, 255, 0.2);\n box-shadow: \n 0 2px 8px rgba(0, 0, 0, 0.1),\n inset 0 1px 0 rgba(255, 255, 255, 0.25);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.status-2xx { \n background: linear-gradient(135deg, #4CAF50, #45a049);\n color: #ffffff;\n box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);\n}\n.status-3xx { \n background: linear-gradient(135deg, #FF9800, #F57C00);\n color: #ffffff;\n box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);\n}\n.status-4xx { \n background: linear-gradient(135deg, #F44336, #D32F2F);\n color: #ffffff;\n box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);\n}\n.status-5xx { \n background: linear-gradient(135deg, #9C27B0, #7B1FA2);\n color: #ffffff;\n box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);\n}\n.status-error { \n background: linear-gradient(135deg, #F44336, #D32F2F);\n color: #ffffff;\n box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);\n}\n\n.request-info {\n display: flex;\n justify-content: space-between;\n font-size: 10px;\n color: rgba(60, 60, 67, 0.7);\n}\n\n.request-details {\n margin-top: 12px;\n border-top: 1px solid rgba(60, 60, 67, 0.2);\n padding-top: 12px;\n display: none;\n}\n\n/* \u9ED8\u8BA4\u6298\u53E0headers */\n.request-details .detail-section.collapsible {\n /* \u9ED8\u8BA4\u6298\u53E0\u72B6\u6001 */\n}\n\n.request-details .detail-section.collapsible:not(.expanded) .detail-content {\n display: none;\n}\n\n.request-details .detail-section.collapsible:not(.expanded) .collapse-icon {\n transform: rotate(-90deg);\n}\n\n.request-item.expanded .request-details {\n display: block;\n}\n\n.detail-section {\n margin-bottom: 16px;\n}\n\n.detail-title {\n font-weight: bold;\n color: #4CAF50;\n margin-bottom: 8px;\n font-size: 11px;\n text-transform: uppercase;\n border-bottom: 1px solid rgba(60, 60, 67, 0.2);\n padding-bottom: 4px;\n}\n\n.detail-title.highlight {\n color: #FFD700;\n font-size: 12px;\n background: rgba(255, 215, 0, 0.1);\n padding: 6px 8px;\n border-radius: 4px;\n border-bottom: 2px solid #FFD700;\n}\n\n.detail-title.clickable {\n cursor: pointer;\n user-select: none;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.detail-title.clickable:hover {\n background: rgba(76, 175, 80, 0.1);\n}\n\n.collapse-icon {\n display: inline-block;\n transition: transform 0.2s;\n font-size: 10px;\n}\n\n.detail-section.collapsible {\n position: relative;\n}\n\n.detail-section.collapsible.collapsed .detail-content {\n display: none;\n}\n\n.detail-section.collapsible.collapsed .collapse-icon {\n transform: rotate(-90deg);\n}\n\n.detail-content {\n /* \u8BE6\u60C5\u5185\u5BB9\u6BDB\u73BB\u7483\u6548\u679C - \u6D45\u8272\u4E3B\u9898 */\n backdrop-filter: blur(8px) brightness(1.1);\n -webkit-backdrop-filter: blur(8px) brightness(1.1);\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.6),\n rgba(255, 255, 255, 0.4)\n );\n border: 1px solid rgba(60, 60, 67, 0.2);\n padding: 16px;\n border-radius: 12px;\n max-height: 400px;\n min-height: 300px;\n overflow: auto;\n user-select: text;\n \n /* \u5185\u90E8\u9634\u5F71 */\n box-shadow: \n inset 0 2px 4px rgba(0, 0, 0, 0.05),\n inset 0 -1px 2px rgba(255, 255, 255, 0.15);\n \n /* \u5E73\u6ED1\u6EDA\u52A8 */\n scroll-behavior: smooth;\n}\n\n.json-content {\n white-space: pre-wrap;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 11px;\n line-height: 1.4;\n color: rgba(60, 60, 67, 0.9);\n}\n\n.headers-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 10px;\n}\n\n.headers-table th,\n.headers-table td {\n padding: 4px 8px;\n text-align: left;\n border-bottom: 1px solid rgba(60, 60, 67, 0.2);\n}\n\n.headers-table th {\n background: rgba(255, 255, 255, 0.3);\n color: #4CAF50;\n font-weight: bold;\n}\n\n.headers-table td {\n color: rgba(20, 20, 33, 0.85);\n}\n\n.decrypted-badge {\n background: #4CAF50;\n color: #000;\n padding: 2px 6px;\n border-radius: 3px;\n font-size: 9px;\n margin-left: 8px;\n font-weight: bold;\n}\n\n.error-badge {\n background: #F44336;\n color: #fff;\n padding: 2px 6px;\n border-radius: 3px;\n font-size: 9px;\n margin-left: 8px;\n font-weight: bold;\n}\n\n.share-btn {\n /* \u5206\u4EAB\u6309\u94AE\u6BDB\u73BB\u7483\u6548\u679C */\n backdrop-filter: blur(6px);\n -webkit-backdrop-filter: blur(6px);\n background: linear-gradient(135deg, #2196F3, #1976D2);\n color: #ffffff;\n border: 1px solid rgba(33, 150, 243, 0.3);\n padding: 6px 12px;\n border-radius: 10px;\n font-size: 10px;\n font-weight: 500;\n margin-left: 8px;\n cursor: pointer;\n white-space: nowrap;\n \n box-shadow: \n 0 2px 8px rgba(33, 150, 243, 0.3),\n inset 0 1px 0 rgba(255, 255, 255, 0.2);\n \n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n transform: translateZ(0);\n}\n\n.share-btn:hover {\n background: linear-gradient(135deg, #1976D2, #1565C0);\n transform: scale(1.05) translateZ(5px);\n box-shadow: \n 0 4px 16px rgba(33, 150, 243, 0.4),\n inset 0 1px 0 rgba(255, 255, 255, 0.3);\n}\n\n.share-btn:active {\n transform: scale(0.98);\n transition: transform 0.1s;\n}\n\n.api-curl-btn {\n /* API Curl \u6309\u94AE\u6BDB\u73BB\u7483\u6548\u679C */\n backdrop-filter: blur(6px);\n -webkit-backdrop-filter: blur(6px);\n background: linear-gradient(135deg, #4CAF50, #45a049);\n color: #ffffff;\n border: 1px solid rgba(76, 175, 80, 0.3);\n padding: 6px 12px;\n border-radius: 10px;\n font-size: 10px;\n font-weight: 500;\n margin-left: 8px;\n cursor: pointer;\n white-space: nowrap;\n \n box-shadow: \n 0 2px 8px rgba(76, 175, 80, 0.3),\n inset 0 1px 0 rgba(255, 255, 255, 0.2);\n \n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n transform: translateZ(0);\n}\n\n.api-curl-btn:hover {\n background: linear-gradient(135deg, #45a049, #388E3C);\n transform: scale(1.05) translateZ(5px);\n box-shadow: \n 0 4px 16px rgba(76, 175, 80, 0.4),\n inset 0 1px 0 rgba(255, 255, 255, 0.3);\n}\n\n.api-curl-btn:active {\n transform: scale(0.98);\n transition: transform 0.1s;\n}\n\n.console-content {\n background: #000;\n color: #0f0;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 11px;\n line-height: 1.4;\n height: 100%;\n overflow: auto;\n padding: 8px;\n}\n\n.console-input {\n display: flex;\n align-items: center;\n background: #333;\n padding: 8px;\n border-top: 1px solid #444;\n}\n\n.console-prompt {\n color: #4CAF50;\n margin-right: 8px;\n font-weight: bold;\n}\n\n.console-cmd {\n flex: 1;\n background: none;\n border: none;\n color: #fff;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 12px;\n outline: none;\n}\n\n.tools-section {\n padding: 12px;\n background: #2a2a2a;\n border-bottom: 1px solid #444;\n}\n\n.tool-buttons {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.tool-btn {\n padding: 6px 12px;\n background: #4CAF50;\n color: #000;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 11px;\n font-weight: bold;\n transition: background-color 0.2s;\n}\n\n.tool-btn:hover {\n background: #45a049;\n}\n\n.tool-btn:disabled {\n background: #666;\n color: #999;\n cursor: not-allowed;\n}\n\n/* \u52A8\u6001\u5149\u6548\u52A8\u753B - \u6A21\u62DF Shader \u6548\u679C */\n@keyframes liquid-shimmer {\n 0% {\n background-position: -300% center;\n transform: translateX(-10px);\n }\n 50% {\n transform: translateX(0);\n }\n 100% {\n background-position: 300% center;\n transform: translateX(10px);\n }\n}\n\n@keyframes liquid-refraction {\n 0%, 100% {\n transform: scale(1) perspective(1000px) rotateY(0deg);\n filter: blur(0px);\n }\n 25% {\n transform: scale(1.01) perspective(1000px) rotateY(0.5deg);\n filter: blur(0.5px);\n }\n 75% {\n transform: scale(0.99) perspective(1000px) rotateY(-0.5deg);\n filter: blur(0.3px);\n }\n}\n\n@keyframes liquid-expand {\n 0% { \n opacity: 0;\n transform: scale(0.95) translateY(-10px);\n backdrop-filter: blur(5px);\n }\n 50% { \n opacity: 0.7;\n transform: scale(1.02) translateY(-2px);\n backdrop-filter: blur(12px);\n }\n 100% { \n opacity: 1;\n transform: scale(1) translateY(0);\n backdrop-filter: blur(8px);\n }\n}\n\n@keyframes liquid-glow {\n 0%, 100% { \n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n }\n 50% { \n box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);\n }\n}\n\n.expanding {\n animation: liquid-expand 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.request-item.expanded {\n animation: liquid-glow 2s ease-in-out infinite;\n}\n\n/* \u79FB\u52A8\u7AEF\u54CD\u5E94\u5F0F */\n@media (max-width: 768px) {\n #network-debugger-panel.bottom-right,\n #network-debugger-panel.bottom-left,\n #network-debugger-panel.top-right,\n #network-debugger-panel.top-left {\n width: calc(100vw - 20px) !important;\n left: 10px !important;\n right: auto !important;\n /* \u79FB\u52A8\u7AEF\u6E05\u6670\u6BDB\u73BB\u7483 */\n backdrop-filter: blur(15px) saturate(150%);\n -webkit-backdrop-filter: blur(15px) saturate(150%);\n }\n \n .request-item {\n padding: 12px;\n border-radius: 12px;\n }\n \n .debugger-header {\n padding: 10px 12px;\n }\n \n .debugger-controls {\n gap: 6px;\n }\n \n .debugger-btn {\n padding: 4px 8px;\n font-size: 10px;\n }\n \n /* \u6700\u5C0F\u5316\u65F6\u4E0D\u5E94\u7528\u5168\u5BBD\uFF0C\u4FDD\u6301\u5C0F\u5C3A\u5BF8 */\n #network-debugger-panel.minimized {\n width: 180px !important;\n max-width: 180px !important;\n height: 40px !important;\n }\n}\n\n@media (max-width: 480px) {\n .request-header {\n flex-direction: column;\n gap: 8px;\n align-items: stretch;\n }\n \n .request-method,\n .request-status {\n align-self: flex-start;\n }\n \n .share-btn,\n .api-curl-btn {\n margin-left: 0;\n margin-top: 4px;\n }\n}\n\n/* iOS 26 \u98CE\u683C\u6EDA\u52A8\u6761 */\n#network-debugger-panel ::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n#network-debugger-panel ::-webkit-scrollbar-track {\n background: rgba(255, 255, 255, 0.05);\n border-radius: 4px;\n backdrop-filter: blur(5px);\n}\n\n#network-debugger-panel ::-webkit-scrollbar-thumb {\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.2),\n rgba(255, 255, 255, 0.1)\n );\n border-radius: 4px;\n border: 1px solid rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n transition: all 0.3s ease;\n}\n\n#network-debugger-panel ::-webkit-scrollbar-thumb:hover {\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.3),\n rgba(255, 255, 255, 0.15)\n );\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n}\n\n.resize-handle {\n position: absolute;\n background: transparent;\n}\n\n.resize-handle.n {\n top: -3px;\n left: 0;\n right: 0;\n height: 6px;\n cursor: ns-resize;\n}\n\n.resize-handle.s {\n bottom: -3px;\n left: 0;\n right: 0;\n height: 6px;\n cursor: ns-resize;\n}\n\n.resize-handle.e {\n top: 0;\n right: -3px;\n bottom: 0;\n width: 6px;\n cursor: ew-resize;\n}\n\n.resize-handle.w {\n top: 0;\n left: -3px;\n bottom: 0;\n width: 6px;\n cursor: ew-resize;\n}\n\n.resize-handle.ne {\n top: -3px;\n right: -3px;\n width: 12px;\n height: 12px;\n cursor: ne-resize;\n}\n\n.resize-handle.nw {\n top: -3px;\n left: -3px;\n width: 12px;\n height: 12px;\n cursor: nw-resize;\n}\n\n.resize-handle.se {\n bottom: -3px;\n right: -3px;\n width: 12px;\n height: 12px;\n cursor: se-resize;\n}\n\n.resize-handle.sw {\n bottom: -3px;\n left: -3px;\n width: 12px;\n height: 12px;\n cursor: sw-resize;\n}\n\n.debugger-reopen-btn {\n position: fixed;\n z-index: 999999;\n background: #4CAF50;\n color: #000;\n border: none;\n padding: 8px 10px;\n border-radius: 16px;\n font-weight: bold;\n font-size: 12px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.25);\n cursor: pointer;\n}\n\n.debugger-reopen-btn:hover {\n filter: brightness(0.95);\n}\n";
|
|
2
2
|
//# sourceMappingURL=styles.d.ts.map
|
package/types/ui/styles.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,MAAM,mz1BA+pClB,CAAA"}
|