galaxy-uniapp-mcp-server
Version:
Galaxy组件库到UniApp组件转换MCP服务器 - 支持跨平台组件转换、兼容性分析和项目集成
119 lines • 14.3 kB
JSON
{
"id": "MuhammadHasann_mean-bird-62",
"name": "mean-bird-62",
"category": "buttons",
"author": "MuhammadHasann",
"description": "mean-bird-62 组件 (simple, neumorphism, button, animation, gradient, interactive)",
"tags": [
"simple",
"neumorphism",
"button",
"animation",
"gradient",
"interactive"
],
"original": {
"html": "<button class=\"button\">\n <div class=\"dots_border\"></div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" class=\"sparkle\">\n <path class=\"path\" stroke-linejoin=\"round\" stroke-linecap=\"round\" stroke=\"black\" fill=\"black\" d=\"M14.187 8.096L15 5.25L15.813 8.096C16.0231 8.83114 16.4171 9.50062 16.9577 10.0413C17.4984 10.5819 18.1679 10.9759 18.903 11.186L21.75 12L18.904 12.813C18.1689 13.0231 17.4994 13.4171 16.9587 13.9577C16.4181 14.4984 16.0241 15.1679 15.814 15.903L15 18.75L14.187 15.904C13.9769 15.1689 13.5829 14.4994 13.0423 13.9587C12.5016 13.4181 11.8321 13.0241 11.097 12.814L8.25 12L11.096 11.187C11.8311 10.9769 12.5006 10.5829 13.0413 10.0423C13.5819 9.50162 13.9759 8.83214 14.186 8.097L14.187 8.096Z\"></path>\n <path class=\"path\" stroke-linejoin=\"round\" stroke-linecap=\"round\" stroke=\"black\" fill=\"black\" d=\"M6 14.25L5.741 15.285C5.59267 15.8785 5.28579 16.4206 4.85319 16.8532C4.42059 17.2858 3.87853 17.5927 3.285 17.741L2.25 18L3.285 18.259C3.87853 18.4073 4.42059 18.7142 4.85319 19.1468C5.28579 19.5794 5.59267 20.1215 5.741 20.715L6 21.75L6.259 20.715C6.40725 20.1216 6.71398 19.5796 7.14639 19.147C7.5788 18.7144 8.12065 18.4075 8.714 18.259L9.75 18L8.714 17.741C8.12065 17.5925 7.5788 17.2856 7.14639 16.853C6.71398 16.4204 6.40725 15.8784 6.259 15.285L6 14.25Z\"></path>\n <path class=\"path\" stroke-linejoin=\"round\" stroke-linecap=\"round\" stroke=\"black\" fill=\"black\" d=\"M6.5 4L6.303 4.5915C6.24777 4.75718 6.15472 4.90774 6.03123 5.03123C5.90774 5.15472 5.75718 5.24777 5.5915 5.303L5 5.5L5.5915 5.697C5.75718 5.75223 5.90774 5.84528 6.03123 5.96877C6.15472 6.09226 6.24777 6.24282 6.303 6.4085L6.5 7L6.697 6.4085C6.75223 6.24282 6.84528 6.09226 6.96877 5.96877C7.09226 5.84528 7.24282 5.75223 7.4085 5.697L8 5.5L7.4085 5.303C7.24282 5.24777 7.09226 5.15472 6.96877 5.03123C6.84528 4.90774 6.75223 4.75718 6.697 4.5915L6.5 4Z\"></path>\n </svg>\n <span class=\"text_button\">Generate Site</span>\n</button>",
"css": "/* From Uiverse.io by MuhammadHasann - Website: https://twitter.com/jh3yy/status/1639001228985225228 - Name: Jhey - Tags: simple, neumorphism, button */\n.button {\n --black-700: hsla(0 0% 12% / 1);\n --border_radius: 9999px;\n --transtion: 0.3s ease-in-out;\n --offset: 2px;\n\n cursor: pointer;\n position: relative;\n\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n transform-origin: center;\n\n padding: 1rem 2rem;\n background-color: transparent;\n\n border: none;\n border-radius: var(--border_radius);\n transform: scale(calc(1 + (var(--active, 0) * 0.1)));\n\n transition: transform var(--transtion);\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n width: 100%;\n height: 100%;\n background-color: var(--black-700);\n\n border-radius: var(--border_radius);\n box-shadow: inset 0 0.5px hsl(0, 0%, 100%), inset 0 -1px 2px 0 hsl(0, 0%, 0%),\n 0px 4px 10px -4px hsla(0 0% 0% / calc(1 - var(--active, 0))),\n 0 0 0 calc(var(--active, 0) * 0.375rem) hsl(260 97% 50% / 0.75);\n\n transition: all var(--transtion);\n z-index: 0;\n}\n\n.button::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n width: 100%;\n height: 100%;\n background-color: hsla(260 97% 61% / 0.75);\n background-image: radial-gradient(\n at 51% 89%,\n hsla(266, 45%, 74%, 1) 0px,\n transparent 50%\n ),\n radial-gradient(at 100% 100%, hsla(266, 36%, 60%, 1) 0px, transparent 50%),\n radial-gradient(at 22% 91%, hsla(266, 36%, 60%, 1) 0px, transparent 50%);\n background-position: top;\n\n opacity: var(--active, 0);\n border-radius: var(--border_radius);\n transition: opacity var(--transtion);\n z-index: 2;\n}\n\n.button:is(:hover, :focus-visible) {\n --active: 1;\n}\n.button:active {\n transform: scale(1);\n}\n\n.button .dots_border {\n --size_border: calc(100% + 2px);\n\n overflow: hidden;\n\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n width: var(--size_border);\n height: var(--size_border);\n background-color: transparent;\n\n border-radius: var(--border_radius);\n z-index: -10;\n}\n\n.button .dots_border::before {\n content: \"\";\n position: absolute;\n top: 30%;\n left: 50%;\n transform: translate(-50%, -50%);\n transform-origin: left;\n transform: rotate(0deg);\n\n width: 100%;\n height: 2rem;\n background-color: white;\n\n mask: linear-gradient(transparent 0%, white 120%);\n animation: rotate 2s linear infinite;\n}\n\n@keyframes rotate {\n to {\n transform: rotate(360deg);\n }\n}\n\n.button .sparkle {\n position: relative;\n z-index: 10;\n\n width: 1.75rem;\n}\n\n.button .sparkle .path {\n fill: currentColor;\n stroke: currentColor;\n\n transform-origin: center;\n\n color: hsl(0, 0%, 100%);\n}\n\n.button:is(:hover, :focus) .sparkle .path {\n animation: path 1.5s linear 0.5s infinite;\n}\n\n.button .sparkle .path:nth-child(1) {\n --scale_path_1: 1.2;\n}\n.button .sparkle .path:nth-child(2) {\n --scale_path_2: 1.2;\n}\n.button .sparkle .path:nth-child(3) {\n --scale_path_3: 1.2;\n}\n\n@keyframes path {\n 0%,\n 34%,\n 71%,\n 100% {\n transform: scale(1);\n }\n 17% {\n transform: scale(var(--scale_path_1, 1));\n }\n 49% {\n transform: scale(var(--scale_path_2, 1));\n }\n 83% {\n transform: scale(var(--scale_path_3, 1));\n }\n}\n\n.button .text_button {\n position: relative;\n z-index: 10;\n\n background-image: linear-gradient(\n 90deg,\n hsla(0 0% 100% / 1) 0%,\n hsla(0 0% 100% / var(--active, 0)) 120%\n );\n background-clip: text;\n\n font-size: 1rem;\n color: transparent;\n}",
"file_path": "/mnt/persist/workspace/Buttons/MuhammadHasann_mean-bird-62.html"
},
"uniapp": {
"template": "<button class=\"button\"></button>\n <view class=\"dots_border\"></view>\n <view xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" class=\"sparkle\"></view>\n <path class=\"path\" stroke-linejoin=\"round\" stroke-linecap=\"round\" stroke=\"black\" fill=\"black\" d=\"M14.187 8.096L15 5.25L15.813 8.096C16.0231 8.83114 16.4171 9.50062 16.9577 10.0413C17.4984 10.5819 18.1679 10.9759 18.903 11.186L21.75 12L18.904 12.813C18.1689 13.0231 17.4994 13.4171 16.9587 13.9577C16.4181 14.4984 16.0241 15.1679 15.814 15.903L15 18.75L14.187 15.904C13.9769 15.1689 13.5829 14.4994 13.0423 13.9587C12.5016 13.4181 11.8321 13.0241 11.097 12.814L8.25 12L11.096 11.187C11.8311 10.9769 12.5006 10.5829 13.0413 10.0423C13.5819 9.50162 13.9759 8.83214 14.186 8.097L14.187 8.096Z\"></path>\n <path class=\"path\" stroke-linejoin=\"round\" stroke-linecap=\"round\" stroke=\"black\" fill=\"black\" d=\"M6 14.25L5.741 15.285C5.59267 15.8785 5.28579 16.4206 4.85319 16.8532C4.42059 17.2858 3.87853 17.5927 3.285 17.741L2.25 18L3.285 18.259C3.87853 18.4073 4.42059 18.7142 4.85319 19.1468C5.28579 19.5794 5.59267 20.1215 5.741 20.715L6 21.75L6.259 20.715C6.40725 20.1216 6.71398 19.5796 7.14639 19.147C7.5788 18.7144 8.12065 18.4075 8.714 18.259L9.75 18L8.714 17.741C8.12065 17.5925 7.5788 17.2856 7.14639 16.853C6.71398 16.4204 6.40725 15.8784 6.259 15.285L6 14.25Z\"></path>\n <path class=\"path\" stroke-linejoin=\"round\" stroke-linecap=\"round\" stroke=\"black\" fill=\"black\" d=\"M6.5 4L6.303 4.5915C6.24777 4.75718 6.15472 4.90774 6.03123 5.03123C5.90774 5.15472 5.75718 5.24777 5.5915 5.303L5 5.5L5.5915 5.697C5.75718 5.75223 5.90774 5.84528 6.03123 5.96877C6.15472 6.09226 6.24777 6.24282 6.303 6.4085L6.5 7L6.697 6.4085C6.75223 6.24282 6.84528 6.09226 6.96877 5.96877C7.09226 5.84528 7.24282 5.75223 7.4085 5.697L8 5.5L7.4085 5.303C7.24282 5.24777 7.09226 5.15472 6.96877 5.03123C6.84528 4.90774 6.75223 4.75718 6.697 4.5915L6.5 4Z\"></path>\n </svg>\n <text class=\"text_button\">Generate Site</text>\n</button>",
"script": "export default {\n name: 'GalaxyMeanBird62',\n props: {\n // 根据组件类型动态生成props\n },\n data() {\n return {\n // 组件状态\n };\n },\n methods: {\n // 组件方法\n }\n}",
"style": "\n/* From Uiverse.io by MuhammadHasann - Website: https://twitter.com/jh3yy/status/1639001228985225228 - Name: Jhey - Tags: simple, neumorphism, button */\n.button {\n --black-700: hsla(0 0% 12% / 1);\n --border_radius: 19998rpx;\n --transtion: 0.3s ease-in-out;\n --offset: 4rpx;\n\n /* #ifdef H5 */\n cursor: pointer;\n /* #endif */\n position: relative;\n\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n transform-origin: center;\n\n padding: 1rem 2rem;\n background-color: transparent;\n\n border: none;\n border-radius: var(--border_radius);\n transform: scale(calc(1 + (var(--active, 0) * 0.1)));\n\n transition: transform var(--transtion);\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n width: 100%;\n height: 100%;\n background-color: var(--black-700);\n\n border-radius: var(--border_radius);\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset 0 1rpx hsl(0, 0%, 100%), inset 0 -2rpx 4rpx 0 hsl(0, 0%, 0%),\n 0rpx 8rpx 20rpx -8rpx hsla(0 0% 0% / calc(1 - var(--active, 0))),\n 0 0 0 calc(var(--active, 0) * 0.375rem) hsl(260 97% 50% / 0.75);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n\n transition: all var(--transtion);\n z-index: 0;\n}\n\n.button::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n width: 100%;\n height: 100%;\n background-color: hsla(260 97% 61% / 0.75);\n background-image: radial-gradient(\n at 51% 89%,\n hsla(266, 45%, 74%, 1) 0rpx,\n transparent 50%\n ),\n radial-gradient(at 100% 100%, hsla(266, 36%, 60%, 1) 0rpx, transparent 50%),\n radial-gradient(at 22% 91%, hsla(266, 36%, 60%, 1) 0rpx, transparent 50%);\n background-position: top;\n\n opacity: var(--active, 0);\n border-radius: var(--border_radius);\n transition: opacity var(--transtion);\n z-index: 2;\n}\n\n.button:is(:hover, :focus-visible) {\n --active: 1;\n}\n.button:active {\n transform: scale(1);\n}\n\n.button .dots_border {\n --size_border: calc(100% + 4rpx);\n\n overflow: hidden;\n\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n width: var(--size_border);\n height: var(--size_border);\n background-color: transparent;\n\n border-radius: var(--border_radius);\n z-index: -10;\n}\n\n.button .dots_border::before {\n content: \"\";\n position: absolute;\n top: 30%;\n left: 50%;\n transform: translate(-50%, -50%);\n transform-origin: left;\n transform: rotate(0deg);\n\n width: 100%;\n height: 2rem;\n background-color: white;\n\n \n animation: rotate 2s linear infinite;\n}\n\n@keyframes rotate {\n to {\n transform: rotate(360deg);\n }\n}\n\n.button .sparkle {\n position: relative;\n z-index: 10;\n\n width: 1.75rem;\n}\n\n.button .sparkle .path {\n fill: currentColor;\n stroke: currentColor;\n\n transform-origin: center;\n\n color: hsl(0, 0%, 100%);\n}\n\n.button:is(:hover, :focus) .sparkle .path {\n animation: path 1.5s linear 0.5s infinite;\n}\n\n.button .sparkle .path:nth-child(1) {\n --scale_path_1: 1.2;\n}\n.button .sparkle .path:nth-child(2) {\n --scale_path_2: 1.2;\n}\n.button .sparkle .path:nth-child(3) {\n --scale_path_3: 1.2;\n}\n\n@keyframes path {\n 0%,\n 34%,\n 71%,\n 100% {\n transform: scale(1);\n }\n 17% {\n transform: scale(var(--scale_path_1, 1));\n }\n 49% {\n transform: scale(var(--scale_path_2, 1));\n }\n 83% {\n transform: scale(var(--scale_path_3, 1));\n }\n}\n\n.button .text_button {\n position: relative;\n z-index: 10;\n\n background-image: linear-gradient(\n 90deg,\n hsla(0 0% 100% / 1) 0%,\n hsla(0 0% 100% / var(--active, 0)) 120%\n );\n background-clip: text;\n\n font-size: 1rem;\n color: transparent;\n}\n\n",
"component_name": "GalaxyMeanBird62"
},
"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 属性",
"不支持 mask 属性",
"不支持 cursor 属性"
],
"alternatives": []
},
"mp-alipay": {
"supported": true,
"issues": [
"不支持 box-shadow 属性",
"不支持 mask 属性",
"不支持 cursor 属性"
],
"alternatives": []
},
"app-plus": {
"supported": true,
"issues": [],
"alternatives": []
}
},
"performance": {
"complexity": "high",
"bundle_size": 5515,
"render_cost": "high",
"memory_usage": "high"
},
"dependencies": [],
"examples": [
{
"title": "",
"description": "",
"code": ""
}
],
"created_at": "2025-07-31T07:55:34.050Z",
"updated_at": "2025-07-31T07:55:34.050Z"
}