galaxy-uniapp-mcp-server
Version:
Galaxy组件库到UniApp组件转换MCP服务器 - 支持跨平台组件转换、兼容性分析和项目集成
87 lines • 16.5 kB
JSON
{
"id": "VashonG_hard-sheep-18",
"name": "hard-sheep-18",
"category": "loaders",
"author": "VashonG",
"description": "hard-sheep-18 组件 (loader, orbit, animation, interactive)",
"tags": [
"loader",
"orbit",
"animation",
"interactive"
],
"original": {
"html": "<div class=\"orbit\">\n \n <ul class=\"orbit-wrap\">\n \n <li class=\"orbit-center\">\n <i class=\"orbit-center__icon fa fa-code\"></i>\n </li>\n\n <li>\n <ul class=\"ring-0\">\n <li><i class=\"orbit-icon fa fa-git\"></i></li>\n <li><i class=\"orbit-icon fa fa-free-code-camp\"></i></li>\n <li><i class=\"orbit-icon fa fa-meetup\"></i></li>\n <li><i class=\"orbit-icon fa fa-codepen\"></i></li>\n </ul>\n </li>\n\n <li>\n <ul class=\"ring-1\">\n <li><i class=\"orbit-icon fa fa-podcast\"></i></li>\n <li><i class=\"orbit-icon fa fa-css3\"></i></li>\n <li><i class=\"orbit-icon fa fa-html5\"></i></li>\n </ul>\n </li>\n <li>\n <ul class=\"ring-2\">\n <li><i class=\"orbit-icon fa fa-windows\"></i></li>\n <li><i class=\"orbit-icon fa fa-safari\"></i></li>\n <li><i class=\"orbit-icon fa fa-edge\"></i></li>\n <li><i class=\"orbit-icon fa fa-linux\"></i></li>\n <li><i class=\"orbit-icon fa fa-apple\"></i></li>\n <li><i class=\"orbit-icon fa fa-chrome\"></i></li>\n <li><i class=\"orbit-icon fa fa-android\"></i></li>\n <li><i class=\"orbit-icon fa fa-firefox\"></i></li>\n </ul>\n </li>\n <li>\n <ul class=\"ring-3\">\n <li><i class=\"orbit-icon fa fa-coffee\"></i></li>\n <li><i class=\"orbit-icon fa fa-terminal\"></i></li>\n <li><i class=\"orbit-icon fa fa-heart-o\"></i></li>\n </ul>\n </li>\n\n </ul>\n \n</div>",
"css": "/* From Uiverse.io by VashonG - Tags: loader, orbit */\n.orbit {\n float: left;\n width: 100%;\n min-width: 100px;\n min-height: 100px;\n}\n\n.orbit-icon {\n width: 1.6em;\n height: 1.6em;\n line-height: 1.6em;\n font-size: 1.2em;\n border-radius: 50%;\n background: #ccc;\n color: #fff;\n text-align: center;\n display: block;\n}\n\n.orbit-wrap {\n height: 40em;\n list-style: none;\n font-size: 1.3em;\n}\n\n.orbit-wrap > li {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n\n.orbit-wrap > li:hover ul {\n border-width: 2px;\n border-color: #fff;\n}\n\n.orbit-wrap > li:hover ~ li ul {\n border-color: rgba(255, 255, 255, 0.2);\n}\n\n.orbit-wrap > li:hover ~ li ul li {\n opacity: 0.4;\n}\n\nul[class^=ring] {\n transition: all 300ms ease-in-out;\n}\n\nul[class^=ring] li {\n transition: all 300ms ease-in-out;\n}\n\n.ring-0 {\n width: 25em;\n height: 25em;\n animation: clockwiseRotate 35s linear infinite;\n}\n\n.ring-0 i {\n animation: counterClockwiseRotate 35s linear infinite;\n}\n\n.ring-0 > *:nth-of-type(1) {\n transform: rotate(95deg) translate(12.5em) rotate(-95deg);\n}\n\n.ring-0 > *:nth-of-type(2) {\n transform: rotate(190deg) translate(12.5em) rotate(-190deg);\n}\n\n.ring-0 > *:nth-of-type(3) {\n transform: rotate(285deg) translate(12.5em) rotate(-285deg);\n}\n\n.ring-0 > *:nth-of-type(4) {\n transform: rotate(380deg) translate(12.5em) rotate(-380deg);\n}\n\n.ring-1 {\n width: 20em;\n height: 20em;\n animation: clockwiseRotate 30s linear infinite;\n}\n\n.ring-1 i {\n animation: counterClockwiseRotate 30s linear infinite;\n}\n\n.ring-1 > *:nth-of-type(1) {\n transform: rotate(126.6666666667deg) translate(10em) rotate(-126.6666666667deg);\n}\n\n.ring-1 > *:nth-of-type(2) {\n transform: rotate(253.3333333333deg) translate(10em) rotate(-253.3333333333deg);\n}\n\n.ring-1 > *:nth-of-type(3) {\n transform: rotate(380deg) translate(10em) rotate(-380deg);\n}\n\n.ring-2 {\n width: 15em;\n height: 15em;\n animation: clockwiseRotate 25s linear infinite;\n}\n\n.ring-2 i {\n animation: counterClockwiseRotate 25s linear infinite;\n}\n\n.ring-2 > *:nth-of-type(1) {\n transform: rotate(47.5deg) translate(7.5em) rotate(-47.5deg);\n}\n\n.ring-2 > *:nth-of-type(2) {\n transform: rotate(95deg) translate(7.5em) rotate(-95deg);\n}\n\n.ring-2 > *:nth-of-type(3) {\n transform: rotate(142.5deg) translate(7.5em) rotate(-142.5deg);\n}\n\n.ring-2 > *:nth-of-type(4) {\n transform: rotate(190deg) translate(7.5em) rotate(-190deg);\n}\n\n.ring-2 > *:nth-of-type(5) {\n transform: rotate(237.5deg) translate(7.5em) rotate(-237.5deg);\n}\n\n.ring-2 > *:nth-of-type(6) {\n transform: rotate(285deg) translate(7.5em) rotate(-285deg);\n}\n\n.ring-2 > *:nth-of-type(7) {\n transform: rotate(332.5deg) translate(7.5em) rotate(-332.5deg);\n}\n\n.ring-2 > *:nth-of-type(8) {\n transform: rotate(380deg) translate(7.5em) rotate(-380deg);\n}\n\n.ring-3 {\n width: 10em;\n height: 10em;\n animation: clockwiseRotate 20s linear infinite;\n}\n\n.ring-3 i {\n animation: counterClockwiseRotate 20s linear infinite;\n}\n\n.ring-3 > *:nth-of-type(1) {\n transform: rotate(126.6666666667deg) translate(5em) rotate(-126.6666666667deg);\n}\n\n.ring-3 > *:nth-of-type(2) {\n transform: rotate(253.3333333333deg) translate(5em) rotate(-253.3333333333deg);\n}\n\n.ring-3 > *:nth-of-type(3) {\n transform: rotate(380deg) translate(5em) rotate(-380deg);\n}\n\nul[class^=ring] {\n border: solid 1px rgba(33, 150, 243, 0.8);\n position: relative;\n padding: 0;\n border-radius: 50%;\n list-style: none;\n box-sizing: content-box;\n}\n\nul[class^=ring] li {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 1.6em;\n height: 1.6em;\n margin: -0.8em;\n}\n/*\n center;\n */\n.orbit-center {\n z-index: 5;\n font-size: 2em;\n width: 1.8em;\n height: 1.8em;\n line-height: 1.8em;\n text-align: center;\n background: hotpink;\n border-radius: 50%;\n}\n\n.orbit-center:hover .orbit-center__icon {\n transform: rotateZ(0deg);\n}\n\n.orbit-center__icon {\n transform: rotateZ(-360deg);\n transition: all 300ms ease-in-out;\n}\n\n.orbit-wrap > li.orbit-center:hover ~ li > ul {\n width: 0;\n height: 0;\n}\n\n.orbit-wrap > li.orbit-center:hover ~ li > ul * {\n transform: translate(0, 0);\n}\n/* \n animations \n */\n@keyframes clockwiseRotate {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes counterClockwiseRotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(-360deg);\n }\n}\n/* \n icons \n */\n.fa-heart-o {\n background: #b71c1c;\n color: white;\n}\n\n.fa-coffee {\n background: #4CAF50;\n color: #CDDC39;\n}\n\n.fa-safari {\n background: white;\n color: darkslateblue;\n}\n\n.fa-firefox {\n background: #1565c0;\n color: #ff8f00;\n}\n\n.fa-chrome {\n background: #fbc02d;\n color: #ef6c00;\n}\n\n.fa-edge {\n background: #03a9f4;\n color: white;\n}\n\n.fa-android {\n background: snow;\n color: limegreen;\n}\n\n.fa-apple {\n background: #444;\n color: white;\n}\n\n.fa-linux {\n background: white;\n color: #222;\n}\n\n.fa-windows {\n background: white;\n color: #03a9f4;\n}\n\n.fa-terminal {\n background: #222;\n color: #fff;\n}\n\n.fa-html5 {\n background: white;\n color: #e65100;\n}\n\n.fa-css3 {\n background: white;\n color: #2196f3;\n}\n\n.fa-git {\n background: #222;\n color: white;\n}\n\n.fa-free-code-camp {\n background: green;\n color: white;\n}\n\n.fa-meetup {\n background: red;\n color: white;\n}\n\n.fa-podcast {\n background: red;\n color: white;\n}\n\n.fa-codepen {\n background: #333;\n color: white;\n}",
"file_path": "/mnt/persist/workspace/loaders/VashonG_hard-sheep-18.html"
},
"uniapp": {
"template": "<view class=\"orbit\"></view>\n \n <view class=\"orbit-wrap\"></view>\n \n <view class=\"orbit-center\"></view>\n <i class=\"orbit-center__icon fa fa-code\"></i>\n </li>\n\n <view></view>\n <view class=\"ring-0\"></view>\n <view><i class=\"orbit-icon fa fa-git\"></i></view>\n <view><i class=\"orbit-icon fa fa-free-code-camp\"></i></view>\n <view><i class=\"orbit-icon fa fa-meetup\"></i></view>\n <view><i class=\"orbit-icon fa fa-codepen\"></i></view>\n </ul>\n </li>\n\n <view></view>\n <view class=\"ring-1\"></view>\n <view><i class=\"orbit-icon fa fa-podcast\"></i></view>\n <view><i class=\"orbit-icon fa fa-css3\"></i></view>\n <view><i class=\"orbit-icon fa fa-html5\"></i></view>\n </ul>\n </li>\n <view></view>\n <view class=\"ring-2\"></view>\n <view><i class=\"orbit-icon fa fa-windows\"></i></view>\n <view><i class=\"orbit-icon fa fa-safari\"></i></view>\n <view><i class=\"orbit-icon fa fa-edge\"></i></view>\n <view><i class=\"orbit-icon fa fa-linux\"></i></view>\n <view><i class=\"orbit-icon fa fa-apple\"></i></view>\n <view><i class=\"orbit-icon fa fa-chrome\"></i></view>\n <view><i class=\"orbit-icon fa fa-android\"></i></view>\n <view><i class=\"orbit-icon fa fa-firefox\"></i></view>\n </ul>\n </li>\n <view></view>\n <view class=\"ring-3\"></view>\n <view><i class=\"orbit-icon fa fa-coffee\"></i></view>\n <view><i class=\"orbit-icon fa fa-terminal\"></i></view>\n <view><i class=\"orbit-icon fa fa-heart-o\"></i></view>\n </ul>\n </li>\n\n </ul>\n \n</div>",
"script": "export default {\n name: 'GalaxyHardSheep18',\n props: {\n // 根据组件类型动态生成props\n },\n data() {\n return {\n // 组件状态\n };\n },\n methods: {\n // 组件方法\n }\n}",
"style": "\n/* From Uiverse.io by VashonG - Tags: loader, orbit */\n.orbit {\n float: left;\n width: 100%;\n min-width: 200rpx;\n min-height: 200rpx;\n}\n\n.orbit-icon {\n width: 1.6em;\n height: 1.6em;\n line-height: 1.6em;\n font-size: 1.2em;\n border-radius: 50%;\n background: #ccc;\n color: #fff;\n text-align: center;\n display: block;\n}\n\n.orbit-wrap {\n height: 40em;\n list-style: none;\n font-size: 1.3em;\n}\n\n.orbit-wrap > li {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n\n.orbit-wrap > li:hover ul {\n border-width: 4rpx;\n border-color: #fff;\n}\n\n.orbit-wrap > li:hover ~ li ul {\n border-color: rgba(255, 255, 255, 0.2);\n}\n\n.orbit-wrap > li:hover ~ li ul li {\n opacity: 0.4;\n}\n\nul[class^=ring] {\n transition: all 300ms ease-in-out;\n}\n\nul[class^=ring] li {\n transition: all 300ms ease-in-out;\n}\n\n.ring-0 {\n width: 25em;\n height: 25em;\n animation: clockwiseRotate 35s linear infinite;\n}\n\n.ring-0 i {\n animation: counterClockwiseRotate 35s linear infinite;\n}\n\n.ring-0 > *:nth-of-type(1) {\n transform: rotate(95deg) translate(12.5em) rotate(-95deg);\n}\n\n.ring-0 > *:nth-of-type(2) {\n transform: rotate(190deg) translate(12.5em) rotate(-190deg);\n}\n\n.ring-0 > *:nth-of-type(3) {\n transform: rotate(285deg) translate(12.5em) rotate(-285deg);\n}\n\n.ring-0 > *:nth-of-type(4) {\n transform: rotate(380deg) translate(12.5em) rotate(-380deg);\n}\n\n.ring-1 {\n width: 20em;\n height: 20em;\n animation: clockwiseRotate 30s linear infinite;\n}\n\n.ring-1 i {\n animation: counterClockwiseRotate 30s linear infinite;\n}\n\n.ring-1 > *:nth-of-type(1) {\n transform: rotate(126.6666666667deg) translate(10em) rotate(-126.6666666667deg);\n}\n\n.ring-1 > *:nth-of-type(2) {\n transform: rotate(253.3333333333deg) translate(10em) rotate(-253.3333333333deg);\n}\n\n.ring-1 > *:nth-of-type(3) {\n transform: rotate(380deg) translate(10em) rotate(-380deg);\n}\n\n.ring-2 {\n width: 15em;\n height: 15em;\n animation: clockwiseRotate 25s linear infinite;\n}\n\n.ring-2 i {\n animation: counterClockwiseRotate 25s linear infinite;\n}\n\n.ring-2 > *:nth-of-type(1) {\n transform: rotate(47.5deg) translate(7.5em) rotate(-47.5deg);\n}\n\n.ring-2 > *:nth-of-type(2) {\n transform: rotate(95deg) translate(7.5em) rotate(-95deg);\n}\n\n.ring-2 > *:nth-of-type(3) {\n transform: rotate(142.5deg) translate(7.5em) rotate(-142.5deg);\n}\n\n.ring-2 > *:nth-of-type(4) {\n transform: rotate(190deg) translate(7.5em) rotate(-190deg);\n}\n\n.ring-2 > *:nth-of-type(5) {\n transform: rotate(237.5deg) translate(7.5em) rotate(-237.5deg);\n}\n\n.ring-2 > *:nth-of-type(6) {\n transform: rotate(285deg) translate(7.5em) rotate(-285deg);\n}\n\n.ring-2 > *:nth-of-type(7) {\n transform: rotate(332.5deg) translate(7.5em) rotate(-332.5deg);\n}\n\n.ring-2 > *:nth-of-type(8) {\n transform: rotate(380deg) translate(7.5em) rotate(-380deg);\n}\n\n.ring-3 {\n width: 10em;\n height: 10em;\n animation: clockwiseRotate 20s linear infinite;\n}\n\n.ring-3 i {\n animation: counterClockwiseRotate 20s linear infinite;\n}\n\n.ring-3 > *:nth-of-type(1) {\n transform: rotate(126.6666666667deg) translate(5em) rotate(-126.6666666667deg);\n}\n\n.ring-3 > *:nth-of-type(2) {\n transform: rotate(253.3333333333deg) translate(5em) rotate(-253.3333333333deg);\n}\n\n.ring-3 > *:nth-of-type(3) {\n transform: rotate(380deg) translate(5em) rotate(-380deg);\n}\n\nul[class^=ring] {\n border: solid 2rpx rgba(33, 150, 243, 0.8);\n position: relative;\n padding: 0;\n border-radius: 50%;\n list-style: none;\n box-sizing: content-box;\n}\n\nul[class^=ring] li {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 1.6em;\n height: 1.6em;\n margin: -0.8em;\n}\n/*\n center;\n */\n.orbit-center {\n z-index: 5;\n font-size: 2em;\n width: 1.8em;\n height: 1.8em;\n line-height: 1.8em;\n text-align: center;\n background: hotpink;\n border-radius: 50%;\n}\n\n.orbit-center:hover .orbit-center__icon {\n transform: rotateZ(0deg);\n}\n\n.orbit-center__icon {\n transform: rotateZ(-360deg);\n transition: all 300ms ease-in-out;\n}\n\n.orbit-wrap > li.orbit-center:hover ~ li > ul {\n width: 0;\n height: 0;\n}\n\n.orbit-wrap > li.orbit-center:hover ~ li > ul * {\n transform: translate(0, 0);\n}\n/* \n animations \n */\n@keyframes clockwiseRotate {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes counterClockwiseRotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(-360deg);\n }\n}\n/* \n icons \n */\n.fa-heart-o {\n background: #b71c1c;\n color: white;\n}\n\n.fa-coffee {\n background: #4CAF50;\n color: #CDDC39;\n}\n\n.fa-safari {\n background: white;\n color: darkslateblue;\n}\n\n.fa-firefox {\n background: #1565c0;\n color: #ff8f00;\n}\n\n.fa-chrome {\n background: #fbc02d;\n color: #ef6c00;\n}\n\n.fa-edge {\n background: #03a9f4;\n color: white;\n}\n\n.fa-android {\n background: snow;\n color: limegreen;\n}\n\n.fa-apple {\n background: #444;\n color: white;\n}\n\n.fa-linux {\n background: white;\n color: #222;\n}\n\n.fa-windows {\n background: white;\n color: #03a9f4;\n}\n\n.fa-terminal {\n background: #222;\n color: #fff;\n}\n\n.fa-html5 {\n background: white;\n color: #e65100;\n}\n\n.fa-css3 {\n background: white;\n color: #2196f3;\n}\n\n.fa-git {\n background: #222;\n color: white;\n}\n\n.fa-free-code-camp {\n background: green;\n color: white;\n}\n\n.fa-meetup {\n background: red;\n color: white;\n}\n\n.fa-podcast {\n background: red;\n color: white;\n}\n\n.fa-codepen {\n background: #333;\n color: white;\n}\n\n\n\n",
"component_name": "GalaxyHardSheep18"
},
"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": "是否禁用"
}
],
"events": [],
"slots": [
{
"name": "",
"description": "",
"props": []
}
],
"compatibility": {
"h5": {
"supported": true,
"issues": [],
"alternatives": []
},
"mp-weixin": {
"supported": true,
"issues": [],
"alternatives": []
},
"mp-alipay": {
"supported": true,
"issues": [],
"alternatives": []
},
"app-plus": {
"supported": true,
"issues": [],
"alternatives": []
}
},
"performance": {
"complexity": "high",
"bundle_size": 6795,
"render_cost": "high",
"memory_usage": "high"
},
"dependencies": [],
"examples": [
{
"title": "",
"description": "",
"code": ""
}
],
"created_at": "2025-07-31T07:55:40.734Z",
"updated_at": "2025-07-31T07:55:40.734Z"
}