galaxy-uniapp-mcp-server
Version:
Galaxy组件库到UniApp组件转换MCP服务器 - 支持跨平台组件转换、兼容性分析和项目集成
86 lines • 12.4 kB
JSON
{
"id": "gustavofusco_rare-pug-90",
"name": "rare-pug-90",
"category": "loaders",
"author": "gustavofusco",
"description": "rare-pug-90 组件 (loader, pen, animation)",
"tags": [
"loader",
"pen",
"animation"
],
"original": {
"html": "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"200px\" width=\"200px\" viewBox=\"0 0 200 200\" class=\"pencil\">\n\t<defs>\n\t\t<clipPath id=\"pencil-eraser\">\n\t\t\t<rect height=\"30\" width=\"30\" ry=\"5\" rx=\"5\"></rect>\n\t\t</clipPath>\n\t</defs>\n\t<circle transform=\"rotate(-113,100,100)\" stroke-linecap=\"round\" stroke-dashoffset=\"439.82\" stroke-dasharray=\"439.82 439.82\" stroke-width=\"2\" stroke=\"currentColor\" fill=\"none\" r=\"70\" class=\"pencil__stroke\"></circle>\n\t<g transform=\"translate(100,100)\" class=\"pencil__rotate\">\n\t\t<g fill=\"none\">\n\t\t\t<circle transform=\"rotate(-90)\" stroke-dashoffset=\"402\" stroke-dasharray=\"402.12 402.12\" stroke-width=\"30\" stroke=\"hsl(223,90%,50%)\" r=\"64\" class=\"pencil__body1\"></circle>\n\t\t\t<circle transform=\"rotate(-90)\" stroke-dashoffset=\"465\" stroke-dasharray=\"464.96 464.96\" stroke-width=\"10\" stroke=\"hsl(223,90%,60%)\" r=\"74\" class=\"pencil__body2\"></circle>\n\t\t\t<circle transform=\"rotate(-90)\" stroke-dashoffset=\"339\" stroke-dasharray=\"339.29 339.29\" stroke-width=\"10\" stroke=\"hsl(223,90%,40%)\" r=\"54\" class=\"pencil__body3\"></circle>\n\t\t</g>\n\t\t<g transform=\"rotate(-90) translate(49,0)\" class=\"pencil__eraser\">\n\t\t\t<g class=\"pencil__eraser-skew\">\n\t\t\t\t<rect height=\"30\" width=\"30\" ry=\"5\" rx=\"5\" fill=\"hsl(223,90%,70%)\"></rect>\n\t\t\t\t<rect clip-path=\"url(#pencil-eraser)\" height=\"30\" width=\"5\" fill=\"hsl(223,90%,60%)\"></rect>\n\t\t\t\t<rect height=\"20\" width=\"30\" fill=\"hsl(223,10%,90%)\"></rect>\n\t\t\t\t<rect height=\"20\" width=\"15\" fill=\"hsl(223,10%,70%)\"></rect>\n\t\t\t\t<rect height=\"20\" width=\"5\" fill=\"hsl(223,10%,80%)\"></rect>\n\t\t\t\t<rect height=\"2\" width=\"30\" y=\"6\" fill=\"hsla(223,10%,10%,0.2)\"></rect>\n\t\t\t\t<rect height=\"2\" width=\"30\" y=\"13\" fill=\"hsla(223,10%,10%,0.2)\"></rect>\n\t\t\t</g>\n\t\t</g>\n\t\t<g transform=\"rotate(-90) translate(49,-30)\" class=\"pencil__point\">\n\t\t\t<polygon points=\"15 0,30 30,0 30\" fill=\"hsl(33,90%,70%)\"></polygon>\n\t\t\t<polygon points=\"15 0,6 30,0 30\" fill=\"hsl(33,90%,50%)\"></polygon>\n\t\t\t<polygon points=\"15 0,20 10,10 10\" fill=\"hsl(223,10%,10%)\"></polygon>\n\t\t</g>\n\t</g>\n</svg>",
"css": "/* From Uiverse.io by gustavofusco - Tags: loader, pen */\n.pencil {\n display: block;\n width: 10em;\n height: 10em;\n}\n\n.pencil__body1,\n.pencil__body2,\n.pencil__body3,\n.pencil__eraser,\n.pencil__eraser-skew,\n.pencil__point,\n.pencil__rotate,\n.pencil__stroke {\n animation-duration: 3s;\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n}\n\n.pencil__body1,\n.pencil__body2,\n.pencil__body3 {\n transform: rotate(-90deg);\n}\n\n.pencil__body1 {\n animation-name: pencilBody1;\n}\n\n.pencil__body2 {\n animation-name: pencilBody2;\n}\n\n.pencil__body3 {\n animation-name: pencilBody3;\n}\n\n.pencil__eraser {\n animation-name: pencilEraser;\n transform: rotate(-90deg) translate(49px,0);\n}\n\n.pencil__eraser-skew {\n animation-name: pencilEraserSkew;\n animation-timing-function: ease-in-out;\n}\n\n.pencil__point {\n animation-name: pencilPoint;\n transform: rotate(-90deg) translate(49px,-30px);\n}\n\n.pencil__rotate {\n animation-name: pencilRotate;\n}\n\n.pencil__stroke {\n animation-name: pencilStroke;\n transform: translate(100px,100px) rotate(-113deg);\n}\n\n/* Animations */\n@keyframes pencilBody1 {\n from,\n\tto {\n stroke-dashoffset: 351.86;\n transform: rotate(-90deg);\n }\n\n 50% {\n stroke-dashoffset: 150.8;\n /* 3/8 of diameter */\n transform: rotate(-225deg);\n }\n}\n\n@keyframes pencilBody2 {\n from,\n\tto {\n stroke-dashoffset: 406.84;\n transform: rotate(-90deg);\n }\n\n 50% {\n stroke-dashoffset: 174.36;\n transform: rotate(-225deg);\n }\n}\n\n@keyframes pencilBody3 {\n from,\n\tto {\n stroke-dashoffset: 296.88;\n transform: rotate(-90deg);\n }\n\n 50% {\n stroke-dashoffset: 127.23;\n transform: rotate(-225deg);\n }\n}\n\n@keyframes pencilEraser {\n from,\n\tto {\n transform: rotate(-45deg) translate(49px,0);\n }\n\n 50% {\n transform: rotate(0deg) translate(49px,0);\n }\n}\n\n@keyframes pencilEraserSkew {\n from,\n\t32.5%,\n\t67.5%,\n\tto {\n transform: skewX(0);\n }\n\n 35%,\n\t65% {\n transform: skewX(-4deg);\n }\n\n 37.5%, \n\t62.5% {\n transform: skewX(8deg);\n }\n\n 40%,\n\t45%,\n\t50%,\n\t55%,\n\t60% {\n transform: skewX(-15deg);\n }\n\n 42.5%,\n\t47.5%,\n\t52.5%,\n\t57.5% {\n transform: skewX(15deg);\n }\n}\n\n@keyframes pencilPoint {\n from,\n\tto {\n transform: rotate(-90deg) translate(49px,-30px);\n }\n\n 50% {\n transform: rotate(-225deg) translate(49px,-30px);\n }\n}\n\n@keyframes pencilRotate {\n from {\n transform: translate(100px,100px) rotate(0);\n }\n\n to {\n transform: translate(100px,100px) rotate(720deg);\n }\n}\n\n@keyframes pencilStroke {\n from {\n stroke-dashoffset: 439.82;\n transform: translate(100px,100px) rotate(-113deg);\n }\n\n 50% {\n stroke-dashoffset: 164.93;\n transform: translate(100px,100px) rotate(-113deg);\n }\n\n 75%,\n\tto {\n stroke-dashoffset: 439.82;\n transform: translate(100px,100px) rotate(112deg);\n }\n}",
"file_path": "/mnt/persist/workspace/loaders/gustavofusco_rare-pug-90.html"
},
"uniapp": {
"template": "<view xmlns=\"http://www.w3.org/2000/svg\" height=\"200px\" width=\"200px\" viewBox=\"0 0 200 200\" class=\"pencil\"></view>\n\t<defs>\n\t\t<clipPath id=\"pencil-eraser\">\n\t\t\t<rect height=\"30\" width=\"30\" ry=\"5\" rx=\"5\"></rect>\n\t\t</clipPath>\n\t</defs>\n\t<circle transform=\"rotate(-113,100,100)\" stroke-linecap=\"round\" stroke-dashoffset=\"439.82\" stroke-dasharray=\"439.82 439.82\" stroke-width=\"2\" stroke=\"currentColor\" fill=\"none\" r=\"70\" class=\"pencil__stroke\"></circle>\n\t<g transform=\"translate(100,100)\" class=\"pencil__rotate\">\n\t\t<g fill=\"none\">\n\t\t\t<circle transform=\"rotate(-90)\" stroke-dashoffset=\"402\" stroke-dasharray=\"402.12 402.12\" stroke-width=\"30\" stroke=\"hsl(223,90%,50%)\" r=\"64\" class=\"pencil__body1\"></circle>\n\t\t\t<circle transform=\"rotate(-90)\" stroke-dashoffset=\"465\" stroke-dasharray=\"464.96 464.96\" stroke-width=\"10\" stroke=\"hsl(223,90%,60%)\" r=\"74\" class=\"pencil__body2\"></circle>\n\t\t\t<circle transform=\"rotate(-90)\" stroke-dashoffset=\"339\" stroke-dasharray=\"339.29 339.29\" stroke-width=\"10\" stroke=\"hsl(223,90%,40%)\" r=\"54\" class=\"pencil__body3\"></circle>\n\t\t</g>\n\t\t<g transform=\"rotate(-90) translate(49,0)\" class=\"pencil__eraser\">\n\t\t\t<g class=\"pencil__eraser-skew\">\n\t\t\t\t<rect height=\"30\" width=\"30\" ry=\"5\" rx=\"5\" fill=\"hsl(223,90%,70%)\"></rect>\n\t\t\t\t<rect clip-path=\"url(#pencil-eraser)\" height=\"30\" width=\"5\" fill=\"hsl(223,90%,60%)\"></rect>\n\t\t\t\t<rect height=\"20\" width=\"30\" fill=\"hsl(223,10%,90%)\"></rect>\n\t\t\t\t<rect height=\"20\" width=\"15\" fill=\"hsl(223,10%,70%)\"></rect>\n\t\t\t\t<rect height=\"20\" width=\"5\" fill=\"hsl(223,10%,80%)\"></rect>\n\t\t\t\t<rect height=\"2\" width=\"30\" y=\"6\" fill=\"hsla(223,10%,10%,0.2)\"></rect>\n\t\t\t\t<rect height=\"2\" width=\"30\" y=\"13\" fill=\"hsla(223,10%,10%,0.2)\"></rect>\n\t\t\t</g>\n\t\t</g>\n\t\t<g transform=\"rotate(-90) translate(49,-30)\" class=\"pencil__point\">\n\t\t\t<polygon points=\"15 0,30 30,0 30\" fill=\"hsl(33,90%,70%)\"></polygon>\n\t\t\t<polygon points=\"15 0,6 30,0 30\" fill=\"hsl(33,90%,50%)\"></polygon>\n\t\t\t<polygon points=\"15 0,20 10,10 10\" fill=\"hsl(223,10%,10%)\"></polygon>\n\t\t</g>\n\t</g>\n</svg>",
"script": "export default {\n name: 'GalaxyRarePug90',\n props: {\n // 根据组件类型动态生成props\n },\n data() {\n return {\n // 组件状态\n };\n },\n methods: {\n // 组件方法\n }\n}",
"style": "\n/* From Uiverse.io by gustavofusco - Tags: loader, pen */\n.pencil {\n display: block;\n width: 10em;\n height: 10em;\n}\n\n.pencil__body1,\n.pencil__body2,\n.pencil__body3,\n.pencil__eraser,\n.pencil__eraser-skew,\n.pencil__point,\n.pencil__rotate,\n.pencil__stroke {\n animation-duration: 3s;\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n}\n\n.pencil__body1,\n.pencil__body2,\n.pencil__body3 {\n transform: rotate(-90deg);\n}\n\n.pencil__body1 {\n animation-name: pencilBody1;\n}\n\n.pencil__body2 {\n animation-name: pencilBody2;\n}\n\n.pencil__body3 {\n animation-name: pencilBody3;\n}\n\n.pencil__eraser {\n animation-name: pencilEraser;\n transform: rotate(-90deg) translate(98rpx,0);\n}\n\n.pencil__eraser-skew {\n animation-name: pencilEraserSkew;\n animation-timing-function: ease-in-out;\n}\n\n.pencil__point {\n animation-name: pencilPoint;\n transform: rotate(-90deg) translate(98rpx,-60rpx);\n}\n\n.pencil__rotate {\n animation-name: pencilRotate;\n}\n\n.pencil__stroke {\n animation-name: pencilStroke;\n transform: translate(200rpx,200rpx) rotate(-113deg);\n}\n\n/* Animations */\n@keyframes pencilBody1 {\n from,\n\tto {\n stroke-dashoffset: 351.86;\n transform: rotate(-90deg);\n }\n\n 50% {\n stroke-dashoffset: 150.8;\n /* 3/8 of diameter */\n transform: rotate(-225deg);\n }\n}\n\n@keyframes pencilBody2 {\n from,\n\tto {\n stroke-dashoffset: 406.84;\n transform: rotate(-90deg);\n }\n\n 50% {\n stroke-dashoffset: 174.36;\n transform: rotate(-225deg);\n }\n}\n\n@keyframes pencilBody3 {\n from,\n\tto {\n stroke-dashoffset: 296.88;\n transform: rotate(-90deg);\n }\n\n 50% {\n stroke-dashoffset: 127.23;\n transform: rotate(-225deg);\n }\n}\n\n@keyframes pencilEraser {\n from,\n\tto {\n transform: rotate(-45deg) translate(98rpx,0);\n }\n\n 50% {\n transform: rotate(0deg) translate(98rpx,0);\n }\n}\n\n@keyframes pencilEraserSkew {\n from,\n\t32.5%,\n\t67.5%,\n\tto {\n transform: skewX(0);\n }\n\n 35%,\n\t65% {\n transform: skewX(-4deg);\n }\n\n 37.5%, \n\t62.5% {\n transform: skewX(8deg);\n }\n\n 40%,\n\t45%,\n\t50%,\n\t55%,\n\t60% {\n transform: skewX(-15deg);\n }\n\n 42.5%,\n\t47.5%,\n\t52.5%,\n\t57.5% {\n transform: skewX(15deg);\n }\n}\n\n@keyframes pencilPoint {\n from,\n\tto {\n transform: rotate(-90deg) translate(98rpx,-60rpx);\n }\n\n 50% {\n transform: rotate(-225deg) translate(98rpx,-60rpx);\n }\n}\n\n@keyframes pencilRotate {\n from {\n transform: translate(200rpx,200rpx) rotate(0);\n }\n\n to {\n transform: translate(200rpx,200rpx) rotate(720deg);\n }\n}\n\n@keyframes pencilStroke {\n from {\n stroke-dashoffset: 439.82;\n transform: translate(200rpx,200rpx) rotate(-113deg);\n }\n\n 50% {\n stroke-dashoffset: 164.93;\n transform: translate(200rpx,200rpx) rotate(-113deg);\n }\n\n 75%,\n\tto {\n stroke-dashoffset: 439.82;\n transform: translate(200rpx,200rpx) rotate(112deg);\n }\n}\n",
"component_name": "GalaxyRarePug90"
},
"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": 4782,
"render_cost": "high",
"memory_usage": "high"
},
"dependencies": [],
"examples": [
{
"title": "",
"description": "",
"code": ""
}
],
"created_at": "2025-07-31T07:55:42.188Z",
"updated_at": "2025-07-31T07:55:42.188Z"
}