UNPKG

galaxy-uniapp-mcp-server

Version:

Galaxy组件库到UniApp组件转换MCP服务器 - 支持跨平台组件转换、兼容性分析和项目集成

86 lines 12.4 kB
{ "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" }