npm - exploria-ui-mcp-server - Versions diffs - 2.0.0 - Mend

exploria-ui-mcp-server 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (608) hide show

package/dist/other/navigation/new_tab_page/new-tab-page-demo.html ADDED Viewed

@@ -0,0 +1,450 @@
+<!doctype html>
+<html lang="zh-CN">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>太空探索 - 星际之旅</title>
+        <style>
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
+            body {
+                font-family: 'Arial', sans-serif;
+                background: #000;
+                color: #fff;
+                overflow-x: hidden;
+                cursor: crosshair;
+            }
+            /* 星空背景 */
+            #stars {
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                z-index: -1;
+            }
+            .star {
+                position: absolute;
+                background: #fff;
+                border-radius: 50%;
+                animation: twinkle 3s infinite;
+            }
+            @keyframes twinkle {
+                0%,
+                100% {
+                    opacity: 0.3;
+                }
+                50% {
+                    opacity: 1;
+                }
+            }
+            /* 主容器 */
+            .container {
+                max-width: 1200px;
+                margin: 0 auto;
+                padding: 20px;
+                position: relative;
+                z-index: 1;
+            }
+            /* 标题 */
+            h1 {
+                text-align: center;
+                font-size: 3em;
+                margin: 30px 0;
+                background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                animation: glow 2s ease-in-out infinite alternate;
+            }
+            @keyframes glow {
+                from {
+                    filter: drop-shadow(0 0 20px rgba(255, 107, 107, 0.5));
+                }
+                to {
+                    filter: drop-shadow(0 0 30px rgba(69, 183, 209, 0.8));
+                }
+            }
+            /* 火箭 */
+            #rocket {
+                position: fixed;
+                bottom: -100px;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 60px;
+                height: 100px;
+                cursor: pointer;
+                transition: all 0.3s ease;
+            }
+            #rocket:hover {
+                transform: translateX(-50%) scale(1.1);
+            }
+            #rocket.flying {
+                animation: fly 3s ease-in-out;
+            }
+            @keyframes fly {
+                0% {
+                    bottom: -100px;
+                }
+                50% {
+                    bottom: 50vh;
+                }
+                100% {
+                    bottom: 110vh;
+                }
+            }
+            /* 控制面板 */
+            .control-panel {
+                background: rgba(255, 255, 255, 0.1);
+                border-radius: 20px;
+                padding: 30px;
+                margin: 30px auto;
+                max-width: 600px;
+                backdrop-filter: blur(10px);
+                border: 1px solid rgba(255, 255, 255, 0.2);
+            }
+            .button {
+                background: linear-gradient(45deg, #667eea, #764ba2);
+                border: none;
+                color: white;
+                padding: 15px 30px;
+                font-size: 1.2em;
+                border-radius: 50px;
+                cursor: pointer;
+                margin: 10px;
+                transition: all 0.3s ease;
+                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+            }
+            .button:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+            }
+            .button:active {
+                transform: translateY(0);
+            }
+            /* 信息卡片 */
+            .info-card {
+                background: rgba(255, 255, 255, 0.05);
+                border-radius: 15px;
+                padding: 20px;
+                margin: 20px 0;
+                border: 1px solid rgba(255, 255, 255, 0.1);
+                display: none;
+                animation: fadeIn 0.5s ease;
+            }
+            @keyframes fadeIn {
+                from {
+                    opacity: 0;
+                    transform: translateY(20px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+            /* 粒子效果 */
+            .particle {
+                position: fixed;
+                pointer-events: none;
+                opacity: 0;
+                animation: particle-float 3s ease-out forwards;
+            }
+            @keyframes particle-float {
+                0% {
+                    opacity: 1;
+                    transform: translate(0, 0) scale(0);
+                }
+                100% {
+                    opacity: 0;
+                    transform: translate(var(--x), var(--y)) scale(1);
+                }
+            }
+            /* 流星 */
+            .meteor {
+                position: fixed;
+                width: 2px;
+                height: 2px;
+                background: #fff;
+                box-shadow: 0 0 10px #fff;
+                animation: meteor-fall 3s linear infinite;
+            }
+            @keyframes meteor-fall {
+                0% {
+                    transform: translate(0, -100px) rotate(45deg);
+                    opacity: 1;
+                }
+                100% {
+                    transform: translate(-500px, 500px) rotate(45deg);
+                    opacity: 0;
+                }
+            }
+            /* 响应式设计 */
+            @media (max-width: 768px) {
+                h1 {
+                    font-size: 2em;
+                }
+                .control-panel {
+                    padding: 20px;
+                }
+                .button {
+                    padding: 10px 20px;
+                    font-size: 1em;
+                }
+            }
+        </style>
+    </head>
+    <body>
+        <div id="stars"></div>
+        <div class="container">
+            <h1>🚀 太空探索之旅 🌌</h1>
+            <div class="control-panel">
+                <h2>任务控制中心</h2>
+                <p>点击按钮开始你的太空冒险！</p>
+                <button class="button" onclick="launchRocket()">
+                    发射火箭 🚀
+                </button>
+                <button class="button" onclick="showPlanetInfo()">
+                    探索行星 🪐
+                </button>
+                <button class="button" onclick="createMeteorShower()">
+                    流星雨 ☄️
+                </button>
+                <button class="button" onclick="toggleStars()">
+                    闪烁星星 ✨
+                </button>
+            </div>
+            <div id="planetInfo" class="info-card">
+                <h3>太阳系行星</h3>
+                <p><strong>水星：</strong>距离太阳最近的行星，表面温度极高。</p>
+                <p>
+                    <strong>金星：</strong
+                    >被称为"晨星"或"昏星"，表面温度约462°C。
+                </p>
+                <p><strong>地球：</strong>我们的家园，唯一已知有生命的行星。</p>
+                <p><strong>火星：</strong>红色星球，可能曾经存在生命。</p>
+                <p><strong>木星：</strong>太阳系最大的行星，有大红斑风暴。</p>
+                <p><strong>土星：</strong>拥有美丽的光环系统。</p>
+                <p><strong>天王星：</strong>侧躺着自转的冰巨星。</p>
+                <p><strong>海王星：</strong>太阳系最远的行星，风速极快。</p>
+            </div>
+        </div>
+        <!-- 火箭 -->
+        <svg id="rocket" viewBox="0 0 60 100">
+            <defs>
+                <linearGradient
+                    id="rocketGradient"
+                    x1="0%"
+                    y1="0%"
+                    x2="0%"
+                    y2="100%"
+                >
+                    <stop
+                        offset="0%"
+                        style="stop-color: #ff6b6b; stop-opacity: 1"
+                    />
+                    <stop
+                        offset="100%"
+                        style="stop-color: #ee5a24; stop-opacity: 1"
+                    />
+                </linearGradient>
+                <linearGradient
+                    id="flameGradient"
+                    x1="0%"
+                    y1="0%"
+                    x2="0%"
+                    y2="100%"
+                >
+                    <stop
+                        offset="0%"
+                        style="stop-color: #ffe66d; stop-opacity: 1"
+                    />
+                    <stop
+                        offset="100%"
+                        style="stop-color: #ff6b6b; stop-opacity: 1"
+                    />
+                </linearGradient>
+            </defs>
+            <!-- 火箭主体 -->
+            <ellipse
+                cx="30"
+                cy="40"
+                rx="15"
+                ry="30"
+                fill="url(#rocketGradient)"
+            />
+            <!-- 火箭顶部 -->
+            <path
+                d="M15 20 Q30 5, 45 20"
+                fill="url(#rocketGradient)"
+                stroke="none"
+            />
+            <!-- 火箭翼 -->
+            <path d="M15 50 L5 65 L15 60" fill="#4834d4" />
+            <path d="M45 50 L55 65 L45 60" fill="#4834d4" />
+            <!-- 火焰 -->
+            <g id="flame">
+                <path
+                    d="M20 70 Q30 85, 40 70"
+                    fill="url(#flameGradient)"
+                    opacity="0.8"
+                />
+                <path d="M25 75 Q30 90, 35 75" fill="#ff9ff3" opacity="0.9" />
+            </g>
+            <!-- 窗口 -->
+            <circle cx="30" cy="35" r="5" fill="#74b9ff" opacity="0.8" />
+        </svg>
+        <script>
+            // 创建星空背景
+            function createStars() {
+                const starsContainer = document.getElementById('stars');
+                const starCount = 200;
+                for (let i = 0; i < starCount; i++) {
+                    const star = document.createElement('div');
+                    star.className = 'star';
+                    star.style.left = Math.random() * 100 + '%';
+                    star.style.top = Math.random() * 100 + '%';
+                    star.style.width = Math.random() * 3 + 'px';
+                    star.style.height = star.style.width + 'px';
+                    star.style.animationDelay = Math.random() * 3 + 's';
+                    starsContainer.appendChild(star);
+                }
+            }
+            // 发射火箭
+            function launchRocket() {
+                const rocket = document.getElementById('rocket');
+                rocket.classList.add('flying');
+                // 创建发射粒子效果
+                for (let i = 0; i < 20; i++) {
+                    createParticle(
+                        rocket.offsetLeft + 30,
+                        window.innerHeight - 100
+                    );
+                }
+                setTimeout(() => {
+                    rocket.classList.remove('flying');
+                }, 3000);
+            }
+            // 创建粒子效果
+            function createParticle(x, y) {
+                const particle = document.createElement('div');
+                particle.className = 'particle';
+                particle.style.left = x + 'px';
+                particle.style.top = y + 'px';
+                particle.style.width = '10px';
+                particle.style.height = '10px';
+                particle.style.background = `hsl(${Math.random() * 60 + 30}, 100%, 50%)`;
+                particle.style.borderRadius = '50%';
+                particle.style.setProperty(
+                    '--x',
+                    (Math.random() - 0.5) * 200 + 'px'
+                );
+                particle.style.setProperty(
+                    '--y',
+                    (Math.random() - 0.5) * 200 + 'px'
+                );
+                document.body.appendChild(particle);
+                setTimeout(() => {
+                    particle.remove();
+                }, 3000);
+            }
+            // 显示行星信息
+            function showPlanetInfo() {
+                const infoCard = document.getElementById('planetInfo');
+                infoCard.style.display =
+                    infoCard.style.display === 'none' ? 'block' : 'none';
+            }
+            // 创建流星雨
+            function createMeteorShower() {
+                for (let i = 0; i < 10; i++) {
+                    setTimeout(() => {
+                        const meteor = document.createElement('div');
+                        meteor.className = 'meteor';
+                        meteor.style.left =
+                            Math.random() * window.innerWidth + 'px';
+                        meteor.style.top = '-10px';
+                        document.body.appendChild(meteor);
+                        setTimeout(() => {
+                            meteor.remove();
+                        }, 3000);
+                    }, i * 200);
+                }
+            }
+            // 切换星星闪烁
+            let starsTwinkling = true;
+            function toggleStars() {
+                starsTwinkling = !starsTwinkling;
+                const stars = document.querySelectorAll('.star');
+                stars.forEach((star) => {
+                    star.style.animationPlayState = starsTwinkling
+                        ? 'running'
+                        : 'paused';
+                });
+            }
+            // 鼠标点击创建粒子
+            document.addEventListener('click', (e) => {
+                for (let i = 0; i < 5; i++) {
+                    createParticle(e.clientX, e.clientY);
+                }
+            });
+            // 初始化
+            createStars();
+            // 添加火焰动画
+            setInterval(() => {
+                const flame = document.getElementById('flame');
+                flame.style.transform = `scale(${0.9 + Math.random() * 0.2})`;
+            }, 100);
+        </script>
+    </body>
+</html>

package/dist/other/network/sse/Document.vue ADDED Viewed

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import src from './Using.vue?raw';
+import Using from './Using.vue';
+import PageLayout from '@/components/PageLayout.vue';
+const section = ['基本用法'];
+</script>
+<template>
+    <PageLayout :section="section">
+        <DemoBox
+            :code="src"
+            :libs="['koa', 'koa2-cors', 'koa-router']"
+            title="基本用法"
+        >
+            <Using />
+            <template #description> 几何</template>
+        </DemoBox>
+    </PageLayout>
+</template>

package/dist/other/network/sse/Using.vue ADDED Viewed

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// SSE
+import { ref } from 'vue';
+const sse = new EventSource('http://localhost:3000/sse');
+const chunkList = ref<string[]>([]);
+sse.onmessage = (e) => {
+    console.log(e.data);
+};
+sse.onerror = (e) => {
+    console.log(e);
+};
+sse.onopen = (e) => {
+    console.log(e);
+};
+</script>
+<template>
+    <div class="using">
+        <div class="chunk" v-for="chunk of chunkList" :key="chunk">
+            {{ chunk }}
+        </div>
+    </div>
+</template>

package/dist/other/network/sse/server/app.ts ADDED Viewed

@@ -0,0 +1,62 @@
+import Koa from 'koa';
+import Router from 'koa-router';
+import cors from 'koa2-cors';
+import text from './static/text.md?raw';
+import { sleep } from './utils/sleep.ts';
+/* ② 允许所有来源跨域，也可以按需配置 */
+const app = new Koa();
+const router = new Router();
+app.use(cors({ origin: '*' }));
+app.use(router.routes());
+app.use(router.allowedMethods());
+router.post('/api', async (ctx) => {
+    ctx.set({
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        Connection: 'keep-alive',
+    });
+    // 监听前端断开
+    let closed = false;
+    ctx.req.on('close', () => (closed = true));
+    let temp = '';
+    let count = 0;
+    for (const line of text.split('\n')) {
+        temp +=
+            'data:' +
+            JSON.stringify({
+                data: { from: 'restful_answer', content: line },
+            }) +
+            '\n\n';
+    }
+    let startIndex = 0;
+    let endIndex = 50;
+    while (startIndex < temp.length) {
+        if (closed) break;
+        ctx.res.write(temp.slice(startIndex, endIndex));
+        count++;
+        startIndex = endIndex;
+        endIndex += Math.ceil(Math.random() * 50);
+        if (count % 20 === 0) {
+            await sleep(1000);
+        }
+    }
+    // 推送结束标记（前端根据 err_msg 停止循环）
+    ctx.res.write(
+        'data:' +
+            JSON.stringify({ data: { from: 'err_msg', content: 'finish' } }) +
+            '\n\n'
+    );
+    ctx.res.end();
+});
+app.listen(8080, () => {
+    console.log('Server is running on port 8080.');
+});

package/dist/other/network/sse/server/static/text.md ADDED Viewed

@@ -0,0 +1,99 @@
+# ling-xi-zhi-jian-frontend
+一个基于 Vue 3.5 的现代化前端项目，集成了多种强大的框架和工具，适用于构建高效、可扩展的 Web 应用。
+## 项目介绍
+`ling-xi-zhi-jian-frontend` 是一个基于 Vue 3.5 的前端项目，使用了 Element Plus、Ant Design Vue 等流行的 UI 框架，以及 Pinia 状态管理库和 Vue Router 路由管理库。此外，项目还集成了 ECharts 和 Three.js 等可视化库，支持国际化（Vue I18n），并使用了 TypeScript 进行类型安全的开发。
+## 技术栈
+- **框架**：Vue 3.5
+- **UI 框架**：Element Plus、Ant Design Vue
+- **状态管理**：Pinia
+- **路由管理**：Vue Router
+- **国际化**：Vue I18n
+- **富文本编辑器**：WangEditor for Vue
+- **可视化库**：ECharts、Three.js
+- **构建工具**：Vite
+- **代码规范**：ESLint
+- **类型检查**：TypeScript、Vue-TSC
+## 项目结构
+```python
+ling-xi-zhi-jian-frontend/
+├── public/                   # 静态资源目录
+├── src/                      # 源代码目录
+│   ├── api/                  # API 接口
+│   ├── assets/               # 静态资源（如图片、样式文件等）
+│   ├── components/           # 全局组件（项目作者从0到1开发的UI组件库）
+│   ├── constants/            # 自定义常量
+│   ├── directives/           # 自定义指令
+│   ├── style/                # 全局样式
+│   ├── views/                # 页面组件
+│   ├── store/                # Pinia 状态管理
+│   ├── router/               # 路由配置
+│   ├── i18n/                 # 国际化配置
+│   ├── types/                # 类型定义
+│   ├── index/                # 工具函数
+│   ├── App.other               # 根组件
+│   └── main.ts               # 入口文件
+├── eslint.config.ts              # ESLint 配置文件
+├── .env.dev                  # 开发环境下的环境变量
+├── .env.prod                 # 生产环境下的环境变量
+├── .gitignore                # Git 忽略文件
+├── package.json              # 项目依赖配置
+├── tsconfig.json             # TypeScript 配置文件
+└── vite.config.ts            # Vite 配置文件
+```
+## 依赖说明
+- `other`: Vue 3.5 核心库
+- `@wangeditor/editor-for-other`: WangEditor 的 Vue 组件
+- `animate.css`: CSS 动画库
+- `ant-design-other`: Ant Design Vue 组件库
+- `element-plus`: Element Plus 组件库
+- `axios`: HTTP 客户端
+- `echarts`: 数据可视化库
+- `three`: 3D 图形库
+- `@types/three`: Three.js 的 TypeScript 类型定义
+- `marked`: Markdown 解析库
+- `pinia`: Vue 3 的状态管理库
+- `sass`: CSS 预处理器
+- `other-i18n`: Vue 的国际化插件
+- `other-router`: Vue 的路由管理库
+## 开发环境
+- Node.js: 20.x
+- pnpm: 10.x
+- TypeScript: 5.x
+- Vite: 5.x
+## pnpm指令
+### 项目初始化
+```sh
+pnpm i
+```
+### 项目启动
+```sh
+pnpm run dev
+```
+### 为生产进行类型检查、编译和最小化
+```sh
+pnpm run build
+```
+### 使用 [ESLint](https://eslint.org/) 进行Lint
+```sh
+pnpm run lint
+```

package/dist/other/network/sse/server/utils/sleep.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export const sleep = (ms: number): Promise<void> => {
+    return new Promise<void>((resolve) => {
+        setTimeout(resolve, ms);
+    });
+};

package/dist/other/observer/mutation_observer/Document.vue ADDED Viewed

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import src from './Using.vue?raw';
+import Using from './Using.vue';
+import PageLayout from '@/components/PageLayout.vue';
+</script>
+<template>
+    <PageLayout>
+        <DemoBox :code="src" title="基本用法">
+            <Using />
+            <template #description> 几何</template>
+        </DemoBox>
+    </PageLayout>
+</template>