exploria-ui-mcp-server 2.0.0

package/dist/other/layout/flex/Grid.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const text = ref('123');
+</script>
+
+<template>
+    <div class="using">
+        <div class="header">
+            <input type="text" v-model="text" />
+        </div>
+
+        <div class="flex-box">
+            <div class="a">
+                我是a
+                <br />
+                {{ text }}
+            </div>
+            <div class="b">
+                我是b
+                <br />
+                flex: 1
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.using {
+    overflow: auto;
+
+    .flex-box {
+        height: 400px;
+        background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #65a596);
+        display: flex;
+        flex-direction: row;
+
+        .a {
+            flex-grow: 1;
+            background-color: rgba(80, 149, 86, 0.56);
+            display: grid;
+            place-items: center;
+        }
+
+        // 当 .a 的宽度 大于 .flex-box 的宽度的 1/2 时，.b 的宽度会被压缩
+        .b {
+            flex-grow: 1;
+            background-color: rgba(228, 168, 168, 0.46);
+            display: grid;
+            place-items: center;
+        }
+    }
+}
+</style>

package/dist/other/layout/flex/Height100.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div class="example">
+        <div class="zhan-wei" style="height: 150px" />
+        <div class="red">我被压缩了</div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.example {
+    height: 300px;
+    display: flex;
+    flex-direction: column;
+    background: linear-gradient(-45deg, #4d9eff, #ef58a9);
+    background-size: 200% 200%;
+    animation: background 3s linear infinite;
+
+    // 动画
+    @keyframes background {
+        0%,
+        100% {
+            background-position: 0 0;
+        }
+        50% {
+            background-position: 100% 100%;
+        }
+    }
+
+    .red {
+        height: 100%;
+        background-color: #ef7676;
+    }
+}
+</style>

package/dist/other/layout/flex/intro.md

@@ -0,0 +1 @@
+本页面将为你展示 Flex 布局的所有内容

package/dist/other/layout/grid/Base.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="using">
+        <div
+            class="item"
+            style="grid-column: 1/3; background-color: #ef7e7e"
+        ></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.using {
+    height: 300px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    gap: 8px;
+
+    .item {
+        border: solid;
+    }
+}
+</style>

package/dist/other/layout/grid/Document.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import BaseCode from './Base.vue?raw';
+import Base from './Base.vue';
+import GridCode from './Grid.vue?raw';
+import Grid from './Grid.vue';
+import PageLayout from '@/components/PageLayout.vue';
+import Height100 from './Height100.vue';
+import Height100Code from './Height100.vue?raw';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍"> </DemoBox>
+        <DemoBox :code="BaseCode" :libs="[]" title="左下方对齐">
+            <Base />
+            <template #description></template>
+        </DemoBox>
+
+        <DemoBox :code="Height100Code" :libs="[]" title="高度为父容器的100">
+            <Height100 />
+            <template #description></template>
+        </DemoBox>
+
+        <DemoBox
+            :code="GridCode"
+            :libs="['marked', 'xss']"
+            title="API接口流式返回的情况"
+        >
+            <Grid />
+            <template #description>
+                按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
+            </template>
+        </DemoBox>
+    </PageLayout>
+</template>
+
+<style scoped lang="scss">
+.time-picker-demo {
+    display: flex;
+    flex-direction: row;
+    overflow: auto;
+
+    .left {
+        flex: 1;
+        overflow: auto;
+        padding: 30px;
+    }
+
+    .right {
+        width: 260px;
+    }
+}
+</style>

package/dist/other/layout/grid/Grid.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts"></script>
+<template>
+    <div class="using" ref="using">
+        <input type="text" style="width: 100px" />
+        <input type="text" style="width: 50px" />
+        <input type="text" />
+        <input type="text" />
+        <input type="text" />
+
+        <div class="error">
+            哈哈哈哈哈哈哦i解耦i睡觉哦佛i时间都i放假哦i是哈哈哈哈你好
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.el-form-item__content:has(> .el-form-item__error) {
+    display: grid;
+    grid-template-rows: repeat(2, auto);
+    grid-template-columns: repeat(10, min-content);
+}
+
+.el-form-item__error {
+    grid-row: 2 / 3;
+    grid-column: 1 / 2;
+    position: static !important;
+}
+</style>

package/dist/other/layout/grid/Height100.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div class="example">
+        <div class="zhan-wei" style="height: 150px" />
+        <div class="red">我被压缩了</div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.example {
+    height: 300px;
+    display: flex;
+    flex-direction: column;
+    background: linear-gradient(-45deg, #4d9eff, #ef58a9);
+    background-size: 200% 200%;
+    animation: background 3s linear infinite;
+
+    // 动画
+    @keyframes background {
+        0%,
+        100% {
+            background-position: 0 0;
+        }
+        50% {
+            background-position: 100% 100%;
+        }
+    }
+
+    .red {
+        height: 100%;
+        background-color: #ef7676;
+    }
+}
+</style>

package/dist/other/layout/grid/intro.md

@@ -0,0 +1 @@
+本页面将为你展示 Flex 布局的所有内容

package/dist/other/navigation/new_tab_page/Document.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import DemoBox from '@/components/DemoBox/DemoBox.vue';
+import OpenNewTabPageCode from './OpenNewTabPage.vue?raw';
+import OpenNewTabPage from './OpenNewTabPage.vue';
+import PageLayout from '@/components/PageLayout.vue';
+import APITable from '@/components/APITable.vue';
+</script>
+
+<template>
+    <PageLayout>
+        <DemoBox title="介绍"> 本页面将为你呈现布局基础知识</DemoBox>
+        <DemoBox :code="OpenNewTabPageCode" :libs="[]" title="打开新的标签页">
+            <OpenNewTabPage />
+            <template #description></template>
+        </DemoBox>
+        <APITable :data="[]" />
+    </PageLayout>
+</template>

package/dist/other/navigation/new_tab_page/OpenNewTabPage.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const href = new URL('./new-tab-page-demo.html', import.meta.url).href;
+</script>
+
+<template>
+    <a :href="href" target="_blank"> 太空探索 - 星际之旅 </a>
+</template>