galaxy-uniapp-mcp-server
Version:
Galaxy组件库到UniApp组件转换MCP服务器 - 支持跨平台组件转换、兼容性分析和项目集成
122 lines • 11.8 kB
JSON
{
"id": "MRez321_tame-squid-31",
"name": "tame-squid-31",
"category": "buttons",
"author": "MRez321",
"description": "tame-squid-31 组件 (button, hover, animated, hover button, #button, button hover effect, animation, gradient, interactive)",
"tags": [
"button",
"hover",
"animated",
"hover button",
"#button",
"button hover effect",
"animation",
"gradient",
"interactive"
],
"original": {
"html": "<button class=\"button\">\n <svg viewBox=\"0 0 48 48\" height=\"100\" width=\"100\" y=\"0px\" x=\"0px\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M39.175,10.016c1.687,0,2.131,1.276,1.632,4.272c-0.571,3.426-2.216,14.769-3.528,21.83 c-0.502,2.702-1.407,3.867-2.724,3.867c-0.724,0-1.572-0.352-2.546-0.995c-1.32-0.872-7.984-5.279-9.431-6.314 c-1.32-0.943-3.141-2.078-0.857-4.312c0.813-0.796,6.14-5.883,10.29-9.842c0.443-0.423,0.072-1.068-0.42-1.068 c-0.112,0-0.231,0.034-0.347,0.111c-5.594,3.71-13.351,8.859-14.338,9.53c-0.987,0.67-1.949,1.1-3.231,1.1 c-0.655,0-1.394-0.112-2.263-0.362c-1.943-0.558-3.84-1.223-4.579-1.477c-2.845-0.976-2.17-2.241,0.593-3.457 c11.078-4.873,25.413-10.815,27.392-11.637C36.746,10.461,38.178,10.016,39.175,10.016 M39.175,7.016L39.175,7.016 c-1.368,0-3.015,0.441-5.506,1.474L33.37,8.614C22.735,13.03,13.092,17.128,6.218,20.152c-1.074,0.473-4.341,1.91-4.214,4.916 c0.054,1.297,0.768,3.065,3.856,4.124l0.228,0.078c0.862,0.297,2.657,0.916,4.497,1.445c1.12,0.322,2.132,0.478,3.091,0.478 c1.664,0,2.953-0.475,3.961-1.028c-0.005,0.168-0.001,0.337,0.012,0.507c0.182,2.312,1.97,3.58,3.038,4.338l0.149,0.106 c1.577,1.128,8.714,5.843,9.522,6.376c1.521,1.004,2.894,1.491,4.199,1.491c2.052,0,4.703-1.096,5.673-6.318 c0.921-4.953,1.985-11.872,2.762-16.924c0.331-2.156,0.603-3.924,0.776-4.961c0.349-2.094,0.509-4.466-0.948-6.185 C42.208,7.875,41.08,7.016,39.175,7.016L39.175,7.016z\"></path>\n </svg>\n\n Send Message\n</button>",
"css": "/* From Uiverse.io by MRez321 - Tags: button, hover, animated, hover button, #button, button hover effect */\n.button {\n position: relative;\n z-index: 5;\n isolation: isolate;\n cursor: pointer;\n transition: 0.4s;\n\n width: fit-content;\n height: 4.8rem;\n padding: 1rem;\n margin-inline: auto;\n border: solid 3px;\n border-color: #0000004d #0000004d #00000080 #00000080;\n border-radius: 0.8rem;\n\n font-family: cursive;\n font-size: 1.4rem;\n font-weight: 700;\n\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 0.5rem;\n\n animation: boxShadowRotation 2s linear infinite;\n}\n.button:hover,\n.button:active {\n scale: 0.96;\n border-color: #00000080 #00000080 #0000004d #0000004d;\n padding: 2rem;\n box-shadow: 0 0 4px 2px rgba(208, 212, 218, 0.979);\n background: #fbfdfc;\n}\n\n.button::before,\n.button::after {\n position: absolute;\n content: \"\";\n background: #f4f5f4;\n transition: 0.4s;\n}\n.button::before {\n z-index: -1;\n inset: 0.3rem;\n border-radius: 4rem;\n box-shadow: inset 0 0 4px 2px rgba(208, 212, 218, 0.979);\n}\n.button:hover::before {\n inset: 0.1rem;\n z-index: -1;\n margin-inline: auto;\n border: solid 1px;\n border-color: #00000080 #00000080 #0000004d #0000004d;\n border-radius: 0.8rem;\n animation: boxShadowRotation 2s linear infinite;\n background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);\n}\n.button::after {\n background: none;\n z-index: -2;\n border-radius: 1rem;\n}\n.button:hover::after {\n inset: -0.5rem;\n border: solid 1px #00000080;\n box-shadow: 0 0 10px 4px #a1c4fd;\n background: #c2e9fb;\n}\n\n.button svg {\n width: 2rem;\n height: 2rem;\n z-index: 10;\n}\n.button:hover svg {\n animation: rotation 0.8s linear;\n filter: drop-shadow(0 0 10px 10px rgb(170, 166, 166));\n}\n\n@keyframes rotation {\n 0% {\n transform: rotate(0deg) translate(0, 0) scale(1);\n }\n 50% {\n transform: rotate(180deg) translate(-4rem, -2rem) scale(1.4);\n }\n 100% {\n transform: rotate(360deg) translate(0, 0) scale(1);\n }\n}\n@keyframes boxShadowRotation {\n 0% {\n box-shadow: inset 10px 10px 20px rgba(29, 43, 83, 0.2);\n }\n 25% {\n box-shadow: inset -10px 10px 20px rgba(29, 43, 83, 0.2);\n }\n 50% {\n box-shadow: inset -10px -10px 20px rgba(29, 43, 83, 0.2);\n }\n 75% {\n box-shadow: inset 10px -10px 20px rgba(29, 43, 83, 0.2);\n }\n 100% {\n box-shadow: inset 10px 10px 20px rgba(29, 43, 83, 0.2);\n }\n}",
"file_path": "/mnt/persist/workspace/Buttons/MRez321_tame-squid-31.html"
},
"uniapp": {
"template": "<button class=\"button\"></button>\n <view viewBox=\"0 0 48 48\" height=\"100\" width=\"100\" y=\"0px\" x=\"0px\" xmlns=\"http://www.w3.org/2000/svg\"></view>\n <path d=\"M39.175,10.016c1.687,0,2.131,1.276,1.632,4.272c-0.571,3.426-2.216,14.769-3.528,21.83 c-0.502,2.702-1.407,3.867-2.724,3.867c-0.724,0-1.572-0.352-2.546-0.995c-1.32-0.872-7.984-5.279-9.431-6.314 c-1.32-0.943-3.141-2.078-0.857-4.312c0.813-0.796,6.14-5.883,10.29-9.842c0.443-0.423,0.072-1.068-0.42-1.068 c-0.112,0-0.231,0.034-0.347,0.111c-5.594,3.71-13.351,8.859-14.338,9.53c-0.987,0.67-1.949,1.1-3.231,1.1 c-0.655,0-1.394-0.112-2.263-0.362c-1.943-0.558-3.84-1.223-4.579-1.477c-2.845-0.976-2.17-2.241,0.593-3.457 c11.078-4.873,25.413-10.815,27.392-11.637C36.746,10.461,38.178,10.016,39.175,10.016 M39.175,7.016L39.175,7.016 c-1.368,0-3.015,0.441-5.506,1.474L33.37,8.614C22.735,13.03,13.092,17.128,6.218,20.152c-1.074,0.473-4.341,1.91-4.214,4.916 c0.054,1.297,0.768,3.065,3.856,4.124l0.228,0.078c0.862,0.297,2.657,0.916,4.497,1.445c1.12,0.322,2.132,0.478,3.091,0.478 c1.664,0,2.953-0.475,3.961-1.028c-0.005,0.168-0.001,0.337,0.012,0.507c0.182,2.312,1.97,3.58,3.038,4.338l0.149,0.106 c1.577,1.128,8.714,5.843,9.522,6.376c1.521,1.004,2.894,1.491,4.199,1.491c2.052,0,4.703-1.096,5.673-6.318 c0.921-4.953,1.985-11.872,2.762-16.924c0.331-2.156,0.603-3.924,0.776-4.961c0.349-2.094,0.509-4.466-0.948-6.185 C42.208,7.875,41.08,7.016,39.175,7.016L39.175,7.016z\"></path>\n </svg>\n\n Send Message\n</button>",
"script": "export default {\n name: 'GalaxyTameSquid31',\n props: {\n // 根据组件类型动态生成props\n },\n data() {\n return {\n // 组件状态\n };\n },\n methods: {\n // 组件方法\n }\n}",
"style": "\n/* From Uiverse.io by MRez321 - Tags: button, hover, animated, hover button, #button, button hover effect */\n.button {\n position: relative;\n z-index: 5;\n isolation: isolate;\n /* #ifdef H5 */\n cursor: pointer;\n /* #endif */\n transition: 0.4s;\n\n width: fit-content;\n height: 4.8rem;\n padding: 1rem;\n margin-inline: auto;\n border: solid 6rpx;\n border-color: #0000004d #0000004d #00000080 #00000080;\n border-radius: 0.8rem;\n\n font-family: cursive;\n font-size: 1.4rem;\n font-weight: 700;\n\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 0.5rem;\n\n animation: boxShadowRotation 2s linear infinite;\n}\n.button:hover,\n.button:active {\n scale: 0.96;\n border-color: #00000080 #00000080 #0000004d #0000004d;\n padding: 2rem;\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0 0 8rpx 4rpx rgba(208, 212, 218, 0.979);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n background: #fbfdfc;\n}\n\n.button::before,\n.button::after {\n position: absolute;\n content: \"\";\n background: #f4f5f4;\n transition: 0.4s;\n}\n.button::before {\n z-index: -1;\n inset: 0.3rem;\n border-radius: 4rem;\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset 0 0 8rpx 4rpx rgba(208, 212, 218, 0.979);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n}\n.button:hover::before {\n inset: 0.1rem;\n z-index: -1;\n margin-inline: auto;\n border: solid 2rpx;\n border-color: #00000080 #00000080 #0000004d #0000004d;\n border-radius: 0.8rem;\n animation: boxShadowRotation 2s linear infinite;\n background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);\n}\n.button::after {\n background: none;\n z-index: -2;\n border-radius: 1rem;\n}\n.button:hover::after {\n inset: -0.5rem;\n border: solid 2rpx #00000080;\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0 0 20rpx 8rpx #a1c4fd;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n background: #c2e9fb;\n}\n\n.button svg {\n width: 2rem;\n height: 2rem;\n z-index: 10;\n}\n.button:hover svg {\n animation: rotation 0.8s linear;\n \n}\n\n@keyframes rotation {\n 0% {\n transform: rotate(0deg) translate(0, 0) scale(1);\n }\n 50% {\n transform: rotate(180deg) translate(-4rem, -2rem) scale(1.4);\n }\n 100% {\n transform: rotate(360deg) translate(0, 0) scale(1);\n }\n}\n@keyframes boxShadowRotation {\n 0% {\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset 20rpx 20rpx 40rpx rgba(29, 43, 83, 0.2);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n 25% {\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset -20rpx 20rpx 40rpx rgba(29, 43, 83, 0.2);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n 50% {\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset -20rpx -20rpx 40rpx rgba(29, 43, 83, 0.2);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n 75% {\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset 20rpx -20rpx 40rpx rgba(29, 43, 83, 0.2);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n 100% {\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset 20rpx 20rpx 40rpx rgba(29, 43, 83, 0.2);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n}\n\n",
"component_name": "GalaxyTameSquid31"
},
"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 属性",
"不支持 filter 属性",
"不支持 cursor 属性"
],
"alternatives": []
},
"mp-alipay": {
"supported": true,
"issues": [
"不支持 box-shadow 属性",
"不支持 filter 属性",
"不支持 cursor 属性"
],
"alternatives": []
},
"app-plus": {
"supported": true,
"issues": [],
"alternatives": []
}
},
"performance": {
"complexity": "high",
"bundle_size": 3823,
"render_cost": "high",
"memory_usage": "high"
},
"dependencies": [],
"examples": [
{
"title": "",
"description": "",
"code": ""
}
],
"created_at": "2025-07-31T07:55:33.881Z",
"updated_at": "2025-07-31T07:55:33.881Z"
}