galaxy-uniapp-mcp-server
Version:
Galaxy组件库到UniApp组件转换MCP服务器 - 支持跨平台组件转换、兼容性分析和项目集成
120 lines • 13 kB
JSON
{
"id": "Na3ar-17_fuzzy-penguin-47",
"name": "fuzzy-penguin-47",
"category": "buttons",
"author": "Na3ar-17",
"description": "fuzzy-penguin-47 组件 (icon, animation, white, button, hover, active, rounded, smooth, interactive)",
"tags": [
"icon",
"animation",
"white",
"button",
"hover",
"active",
"rounded",
"smooth",
"interactive"
],
"original": {
"html": "<div class=\"container\">\n <button class=\"button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" class=\"icon\">\n <g stroke-width=\"0\" id=\"SVGRepo_bgCarrier\"></g>\n <g stroke-linejoin=\"round\" stroke-linecap=\"round\" id=\"SVGRepo_tracerCarrier\"></g>\n <g id=\"SVGRepo_iconCarrier\">\n <path fill=\"#000000\" d=\"M14.2199 21.63C13.0399 21.63 11.3699 20.8 10.0499 16.83L9.32988 14.67L7.16988 13.95C3.20988 12.63 2.37988 10.96 2.37988 9.78001C2.37988 8.61001 3.20988 6.93001 7.16988 5.60001L15.6599 2.77001C17.7799 2.06001 19.5499 2.27001 20.6399 3.35001C21.7299 4.43001 21.9399 6.21001 21.2299 8.33001L18.3999 16.82C17.0699 20.8 15.3999 21.63 14.2199 21.63ZM7.63988 7.03001C4.85988 7.96001 3.86988 9.06001 3.86988 9.78001C3.86988 10.5 4.85988 11.6 7.63988 12.52L10.1599 13.36C10.3799 13.43 10.5599 13.61 10.6299 13.83L11.4699 16.35C12.3899 19.13 13.4999 20.12 14.2199 20.12C14.9399 20.12 16.0399 19.13 16.9699 16.35L19.7999 7.86001C20.3099 6.32001 20.2199 5.06001 19.5699 4.41001C18.9199 3.76001 17.6599 3.68001 16.1299 4.19001L7.63988 7.03001Z\"></path>\n <path fill=\"#000000\" d=\"M10.11 14.4C9.92005 14.4 9.73005 14.33 9.58005 14.18C9.29005 13.89 9.29005 13.41 9.58005 13.12L13.16 9.53C13.45 9.24 13.93 9.24 14.22 9.53C14.51 9.82 14.51 10.3 14.22 10.59L10.64 14.18C10.5 14.33 10.3 14.4 10.11 14.4Z\"></path>\n </g>\n </svg>\n <p class=\"text\">\n <span style=\"transition-duration: 100ms\">S</span>\n <span style=\"transition-duration: 150ms\">e</span>\n <span style=\"transition-duration: 200ms\">n</span>\n <span style=\"transition-duration: 250ms\">d</span>\n <span class=\"tab\"></span>\n <span style=\"transition-duration: 350ms\">M</span>\n <span style=\"transition-duration: 400ms\">e</span>\n <span style=\"transition-duration: 450ms\">s</span>\n <span style=\"transition-duration: 500ms\">s</span>\n <span style=\"transition-duration: 550ms\">a</span>\n <span style=\"transition-duration: 600ms\">g</span>\n <span style=\"transition-duration: 650ms\">e</span>\n </p>\n </button>\n</div>",
"css": "/* From Uiverse.io by Na3ar-17 - Tags: icon, animation, white, button, hover, active, rounded, smooth */\n.container {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.container * {\n border: none;\n outline: none;\n}\n\n.button {\n display: flex;\n align-items: center;\n position: relative;\n justify-content: end;\n cursor: pointer;\n width: 200px;\n height: 65px;\n border-radius: 13px;\n font-size: 18px;\n font-weight: 500;\n background-color: #f9fbf9;\n border: 3px solid #b7b8b7;\n -webkit-box-shadow: 0px 10px 24px 0px rgba(214, 215, 214, 1);\n -moz-box-shadow: 0px 10px 24px 0px rgba(214, 215, 214, 1);\n box-shadow: 0px 10px 24px 0px rgba(214, 215, 214, 1);\n overflow: hidden;\n padding: 0px 13px;\n border-top-color: #d3d3d3;\n border-bottom-color: #7e7f7e;\n transition: all 0.3s ease;\n}\n\n.button .icon {\n aspect-ratio: 1/1;\n width: 25px;\n z-index: 10;\n transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n left: 30px;\n}\n\n.button .text {\n z-index: 10;\n font-weight: 600;\n display: flex;\n align-items: center;\n}\n.button .text .tab {\n margin: 0px 2px;\n}\n.button .text span {\n transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 190px;\n height: 52px;\n background-color: #fff;\n border-radius: 50px;\n -webkit-box-shadow: inset 0px 10px 50px -40px rgba(66, 68, 90, 1);\n -moz-box-shadow: inset 0px 10px 50px -40px rgba(66, 68, 90, 1);\n box-shadow: inset 0px 10px 50px -40px rgba(66, 68, 90, 1);\n transition: all 0.3s ease;\n}\n\n.button:hover::before {\n width: 200px;\n height: 64px;\n border-radius: 13px;\n -webkit-box-shadow: inset 0px -10px 50px -40px rgba(66, 68, 90, 1);\n -moz-box-shadow: inset 0px -10px 50px -40px rgba(66, 68, 90, 1);\n box-shadow: inset 0px -10px 50px -40px rgba(66, 68, 90, 1);\n}\n\n.button:hover .text span {\n transform: translateY(80px);\n opacity: 0;\n}\n\n.button:hover .icon {\n width: 35px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(45deg);\n}\n\n.button:active {\n transform: translateY(5px);\n}",
"file_path": "/mnt/persist/workspace/Buttons/Na3ar-17_fuzzy-penguin-47.html"
},
"uniapp": {
"template": "<view class=\"container\"></view>\n <button class=\"button\"></button>\n <view xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" class=\"icon\"></view>\n <g stroke-width=\"0\" id=\"SVGRepo_bgCarrier\"></g>\n <g stroke-linejoin=\"round\" stroke-linecap=\"round\" id=\"SVGRepo_tracerCarrier\"></g>\n <g id=\"SVGRepo_iconCarrier\">\n <path fill=\"#000000\" d=\"M14.2199 21.63C13.0399 21.63 11.3699 20.8 10.0499 16.83L9.32988 14.67L7.16988 13.95C3.20988 12.63 2.37988 10.96 2.37988 9.78001C2.37988 8.61001 3.20988 6.93001 7.16988 5.60001L15.6599 2.77001C17.7799 2.06001 19.5499 2.27001 20.6399 3.35001C21.7299 4.43001 21.9399 6.21001 21.2299 8.33001L18.3999 16.82C17.0699 20.8 15.3999 21.63 14.2199 21.63ZM7.63988 7.03001C4.85988 7.96001 3.86988 9.06001 3.86988 9.78001C3.86988 10.5 4.85988 11.6 7.63988 12.52L10.1599 13.36C10.3799 13.43 10.5599 13.61 10.6299 13.83L11.4699 16.35C12.3899 19.13 13.4999 20.12 14.2199 20.12C14.9399 20.12 16.0399 19.13 16.9699 16.35L19.7999 7.86001C20.3099 6.32001 20.2199 5.06001 19.5699 4.41001C18.9199 3.76001 17.6599 3.68001 16.1299 4.19001L7.63988 7.03001Z\"></path>\n <path fill=\"#000000\" d=\"M10.11 14.4C9.92005 14.4 9.73005 14.33 9.58005 14.18C9.29005 13.89 9.29005 13.41 9.58005 13.12L13.16 9.53C13.45 9.24 13.93 9.24 14.22 9.53C14.51 9.82 14.51 10.3 14.22 10.59L10.64 14.18C10.5 14.33 10.3 14.4 10.11 14.4Z\"></path>\n </g>\n </svg>\n <text class=\"text\"></text>\n <text style=\"transition-duration: 100ms\">S</text>\n <text style=\"transition-duration: 150ms\">e</text>\n <text style=\"transition-duration: 200ms\">n</text>\n <text style=\"transition-duration: 250ms\">d</text>\n <text class=\"tab\"></text>\n <text style=\"transition-duration: 350ms\">M</text>\n <text style=\"transition-duration: 400ms\">e</text>\n <text style=\"transition-duration: 450ms\">s</text>\n <text style=\"transition-duration: 500ms\">s</text>\n <text style=\"transition-duration: 550ms\">a</text>\n <text style=\"transition-duration: 600ms\">g</text>\n <text style=\"transition-duration: 650ms\">e</text>\n </p>\n </button>\n</div>",
"script": "export default {\n name: 'GalaxyFuzzyPenguin47',\n props: {\n // 根据组件类型动态生成props\n },\n data() {\n return {\n // 组件状态\n };\n },\n methods: {\n // 组件方法\n }\n}",
"style": "\n/* From Uiverse.io by Na3ar-17 - Tags: icon, animation, white, button, hover, active, rounded, smooth */\n.container {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.container * {\n border: none;\n outline: none;\n}\n\n.button {\n display: flex;\n align-items: center;\n position: relative;\n justify-content: end;\n /* #ifdef H5 */\n cursor: pointer;\n /* #endif */\n width: 400rpx;\n height: 130rpx;\n border-radius: 26rpx;\n font-size: 36rpx;\n font-weight: 500;\n background-color: #f9fbf9;\n border: 6rpx solid #b7b8b7;\n -webkit-/* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0rpx 20rpx 48rpx 0rpx rgba(214, 215, 214, 1);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n -moz-/* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0rpx 20rpx 48rpx 0rpx rgba(214, 215, 214, 1);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0rpx 20rpx 48rpx 0rpx rgba(214, 215, 214, 1);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n overflow: hidden;\n padding: 0rpx 26rpx;\n border-top-color: #d3d3d3;\n border-bottom-color: #7e7f7e;\n transition: all 0.3s ease;\n}\n\n.button .icon {\n aspect-ratio: 1/1;\n width: 50rpx;\n z-index: 10;\n transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n left: 60rpx;\n}\n\n.button .text {\n z-index: 10;\n font-weight: 600;\n display: flex;\n align-items: center;\n}\n.button .text .tab {\n margin: 0rpx 4rpx;\n}\n.button .text span {\n transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 380rpx;\n height: 104rpx;\n background-color: #fff;\n border-radius: 100rpx;\n -webkit-/* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset 0rpx 20rpx 100rpx -80rpx rgba(66, 68, 90, 1);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n -moz-/* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset 0rpx 20rpx 100rpx -80rpx rgba(66, 68, 90, 1);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset 0rpx 20rpx 100rpx -80rpx rgba(66, 68, 90, 1);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n transition: all 0.3s ease;\n}\n\n.button:hover::before {\n width: 400rpx;\n height: 128rpx;\n border-radius: 26rpx;\n -webkit-/* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset 0rpx -20rpx 100rpx -80rpx rgba(66, 68, 90, 1);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n -moz-/* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset 0rpx -20rpx 100rpx -80rpx rgba(66, 68, 90, 1);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset 0rpx -20rpx 100rpx -80rpx rgba(66, 68, 90, 1);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n}\n\n.button:hover .text span {\n transform: translateY(160rpx);\n opacity: 0;\n}\n\n.button:hover .icon {\n width: 70rpx;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(45deg);\n}\n\n.button:active {\n transform: translateY(10rpx);\n}\n\n",
"component_name": "GalaxyFuzzyPenguin47"
},
"platforms": {
"h5": true,
"mp-weixin": true,
"mp-alipay": true,
"mp-baidu": true,
"mp-toutiao": true,
"app-plus": true
},
"props": [
{
"name": "disabled",
"type": "Boolean",
"default": false,
"required": false,
"description": "是否禁用"
},
{
"name": "text",
"type": "String",
"default": "按钮",
"required": false,
"description": "按钮文字"
},
{
"name": "type",
"type": "String",
"default": "primary",
"required": false,
"description": "按钮类型"
}
],
"events": [
{
"name": "click",
"description": "点击事件",
"parameters": [
"event"
]
}
],
"slots": [
{
"name": "",
"description": "",
"props": []
}
],
"compatibility": {
"h5": {
"supported": true,
"issues": [],
"alternatives": []
},
"mp-weixin": {
"supported": true,
"issues": [
"不支持 box-shadow 属性",
"不支持 cursor 属性"
],
"alternatives": []
},
"mp-alipay": {
"supported": true,
"issues": [
"不支持 box-shadow 属性",
"不支持 cursor 属性"
],
"alternatives": []
},
"app-plus": {
"supported": true,
"issues": [],
"alternatives": []
}
},
"performance": {
"complexity": "high",
"bundle_size": 4326,
"render_cost": "high",
"memory_usage": "high"
},
"dependencies": [],
"examples": [
{
"title": "",
"description": "",
"code": ""
}
],
"created_at": "2025-07-31T07:55:34.100Z",
"updated_at": "2025-07-31T07:55:34.100Z"
}