+import { computed } from "vue";
+// 导入图片资源
+import heroBgWhite from "@/assets/images/home/next-sdk-home/banner-bg.svg";
+import heroBgPc from "@/assets/images/home/next-sdk-home/banner-img.svg";
+
+// 使用 computed 确保 Vite 在构建时能正确追踪背景图片资源
+const heroBackgroundImageUrl = computed(() => {
+ return `url(${heroBgWhite})`;
+});
+
+
+
+
+
+
+ NEXT-SDKs
前端智能应用开发工具包
+
+
让你的前端应用变成智能应用
+
只需四步,即可接入 AI 能力,让应用智能化开发更简单高效
+
+
+
+
![NEXT-SDKs]()
+
+
+
+
+
diff --git a/packages/home/src/views/next-sdks-home/components/StepItem.vue b/packages/home/src/views/next-sdks-home/components/StepItem.vue
index 6088d0a8..c0810e58 100644
--- a/packages/home/src/views/next-sdks-home/components/StepItem.vue
+++ b/packages/home/src/views/next-sdks-home/components/StepItem.vue
@@ -19,9 +19,9 @@
:class="`language-${codeBlock.lang}`"
>
{
let body = lines.slice(1).join("\n");
const codeBlocks = [];
+ const codeBlockRanges = []; // 存储代码块的位置范围,用于后续移除
+
+ // 先提取所有代码块:```lang\n ... \n```
+ let searchStart = 0;
+ while (true) {
+ const fenceStart = body.indexOf("```", searchStart);
+ if (fenceStart === -1) break;
- // 仅处理第一个代码块:```lang\n ... \n```
- const fenceStart = body.indexOf("```");
- if (fenceStart !== -1) {
const langLineEnd = body.indexOf("\n", fenceStart + 3);
+ if (langLineEnd === -1) break;
+
const fenceHeader = body.slice(fenceStart + 3, langLineEnd).trim();
// 简单判断语言:首个和最后一个步骤是 bash,其余默认为 ts
const lang =
@@ -122,26 +128,35 @@ const parseMarkdown = () => {
(props.stepIndex === 0 || props.stepIndex === 3 ? "bash" : "typescript");
const fenceEnd = body.indexOf("```", langLineEnd + 1);
- if (fenceEnd !== -1) {
- const code = body.slice(langLineEnd + 1, fenceEnd).trim();
- if (code) {
- try {
- const language = Prism.languages[lang] || Prism.languages.markup || {};
- const highlightedCode = Prism.highlight(code, language, lang);
- codeBlocks.push({ lang, code, highlightedCode });
- } catch {
- const escapedCode = code
- .replace(/&/g, "&")
- .replace(//g, ">")
- .replace(/"/g, """)
- .replace(/'/g, "'");
- codeBlocks.push({ lang, code, highlightedCode: escapedCode });
- }
+ if (fenceEnd === -1) break;
+
+ const code = body.slice(langLineEnd + 1, fenceEnd).trim();
+ if (code) {
+ try {
+ const language = Prism.languages[lang] || Prism.languages.markup || {};
+ const highlightedCode = Prism.highlight(code, language, lang);
+ codeBlocks.push({ lang, code, highlightedCode });
+ } catch {
+ const escapedCode = code
+ .replace(/&/g, "&")
+ .replace(//g, ">")
+ .replace(/"/g, """)
+ .replace(/'/g, "'");
+ codeBlocks.push({ lang, code, highlightedCode: escapedCode });
}
- // 去掉代码块部分,保留其余内容用于 markdown 渲染
- body = body.slice(0, fenceStart) + body.slice(fenceEnd + 3);
+ // 记录代码块的位置范围
+ codeBlockRanges.push({ start: fenceStart, end: fenceEnd + 3 });
}
+
+ // 更新搜索起始位置
+ searchStart = fenceEnd + 3;
+ }
+
+ // 从后往前移除代码块,避免索引变化
+ for (let i = codeBlockRanges.length - 1; i >= 0; i--) {
+ const range = codeBlockRanges[i];
+ body = body.slice(0, range.start) + body.slice(range.end);
}
const processedContent = body.trim();
@@ -156,8 +171,8 @@ const parseMarkdown = () => {
const step = ref(parseMarkdown());
-// 跟踪每个代码块的复制状态
-const copiedStates = ref(false);
+// 跟踪每个代码块的复制状态,使用对象存储每个代码块的独立状态
+const copiedStates = ref({});
// 监听 markdownContent 或 stepIndex 变化,重新解析
watch([() => props.markdownContent, () => props.stepIndex], () => {
@@ -198,10 +213,10 @@ const copyCode = async (code, index, codeIndex) => {
document.body.removeChild(textArea);
}
- // 显示复制成功提示
- copiedStates.value = true;
+ // 显示复制成功提示(针对当前代码块)
+ copiedStates.value[key] = true;
setTimeout(() => {
- copiedStates.value = false;
+ copiedStates.value[key] = false;
}, 2000);
} catch (err) {
console.error("复制失败:", err);
@@ -210,6 +225,10 @@ const copyCode = async (code, index, codeIndex) => {
+
+
+
+
+
+
+
diff --git a/packages/home/src/views/next-sdks-home/next-sdk.md b/packages/home/src/views/next-sdks-home/next-sdk.md
index a85cc5bc..ea081c79 100644
--- a/packages/home/src/views/next-sdks-home/next-sdk.md
+++ b/packages/home/src/views/next-sdks-home/next-sdk.md
@@ -76,10 +76,12 @@ await server.connect(serverTransport)
安装并使用遥控器组件
-```typescript
-// 安装依赖
+```bash
npm install @opentiny/next-remoter
+```
+
+```typescript
// 在 Vue 中使用
@@ -93,3 +95,4 @@ const show = ref(false)
```
+
diff --git a/packages/home/src/views/tiny-vue-home/common.less b/packages/home/src/views/tiny-vue-home/common.less
index 9335c19b..89973b60 100644
--- a/packages/home/src/views/tiny-vue-home/common.less
+++ b/packages/home/src/views/tiny-vue-home/common.less
@@ -19,6 +19,7 @@
position: relative;
overflow: hidden;
display: flex;
+ padding: 30px;
justify-content: center;
align-items: center;
}
@@ -107,17 +108,20 @@
/* ==================== 公共文本样式 ==================== */
.title {
- font-size: 50px;
+ font-size: 52px;
font-weight: 700;
color: #191919;
- letter-spacing: 5px;
- line-height: 1.2;
- padding-bottom: 20px;
+ letter-spacing: 2px;
+ line-height: 1.5;
+ padding-bottom: 32px;
+ .title-us {
+ font-size: 56px;
+ }
}
.subtitle {
- font-size: 44px;
- padding-bottom: 20px;
+ font-size: 50px;
+ padding-bottom: 48px;
line-height: 1.5;
background: linear-gradient(90deg, #cb43a8 10%, #2c5fef 50%);
-webkit-background-clip: text;
@@ -128,8 +132,8 @@
}
.description {
- font-size: 20px;
- padding-bottom: 30px;
+ font-size: 18px;
+ padding-bottom: 48px;
line-height: 2;
color: #a0a0a0;
letter-spacing: 2px;
@@ -143,10 +147,11 @@
}
.btn {
- padding: 16px 40px;
+ padding: 12px 44px;
+ line-height: 24px;
border-radius: 30px;
font-size: 16px;
- font-weight: 600;
+ font-weight: 400;
text-decoration: none;
cursor: pointer;
letter-spacing: 1px;
@@ -168,24 +173,17 @@
}
.btn.secondary {
- background: rgba(255, 255, 255, 0.8);
color: #191919;
border: 1px solid #191919;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.btn.secondary:hover {
- background: white;
transform: translateY(-3px);
border-color: #191919;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
- /* ==================== Feature 相关样式 ==================== */
- .feature-title {
- font-size: 36px;
- }
-
.feature-sub-title {
font-size: 20px;
letter-spacing: 2px;
@@ -205,7 +203,7 @@
position: relative;
z-index: 1;
display: flex;
- align-items: center;
+ align-items: baseline;
justify-content: space-between;
max-width: 1400px;
width: 100%;
@@ -214,14 +212,7 @@
.feature-text {
flex: 1;
- color: var(--text-primary);
- padding: 0 30px;
-
- .description {
- font-size: 16px;
- letter-spacing: 2px;
- color: #808080;
- }
+ padding: 0 20px;
}
.feature-visual {
@@ -278,22 +269,18 @@
}
.title {
- font-size: 24px;
+ font-size: 28px;
letter-spacing: 3px;
}
.subtitle {
- font-size: 32px;
+ font-size: 26px;
letter-spacing: 3px;
}
.description {
font-size: 16px;
}
-
- .feature-title {
- font-size: 30px;
- }
}
@media (max-width: 768px) {
@@ -307,7 +294,7 @@
}
.title {
- font-size: 32px;
+ font-size: 28px;
letter-spacing: 2px;
padding-bottom: 15px;
}
@@ -333,10 +320,6 @@
font-size: 14px;
}
- .feature-title {
- font-size: 28px;
- }
-
.feature-sub-title {
font-size: 18px;
padding-bottom: 0px;
@@ -349,30 +332,47 @@
}
.title {
- font-size: 28px;
+ font-size: 22px;
letter-spacing: 1px;
+ .title-us {
+ font-size: 24px;
+ }
+ }
+
+ .floating-img {
+ width: 100%;
+ animation: none;
+ transition: none;
}
.subtitle {
- font-size: 22px;
+ font-size: 20px;
letter-spacing: 1px;
}
.description {
- font-size: 14px;
+ font-size: 16px;
letter-spacing: 0px;
+ padding-left: 15px;
+ padding-right: 15px;
}
.feature-title {
- font-size: 24px;
+ font-size: 20px;
}
.feature-sub-title {
font-size: 16px;
}
+ .feature-text-description {
+ font-size: 14px;
+ }
+
.btn {
- padding: 12px 25px;
+ padding: 12px 24px;
+ font-size: 14px;
+ line-height: 1;
}
}
}
diff --git a/packages/home/src/views/tiny-vue-home/components/CrossPlatformFeature.vue b/packages/home/src/views/tiny-vue-home/components/CrossPlatformFeature.vue
index 964cf856..5e910c9b 100644
--- a/packages/home/src/views/tiny-vue-home/components/CrossPlatformFeature.vue
+++ b/packages/home/src/views/tiny-vue-home/components/CrossPlatformFeature.vue
@@ -2,16 +2,19 @@
import { onMounted, ref, inject, nextTick } from "vue";
// 导入图片资源
import featureCrossPlatform from "@/assets/images/home/tinyvue-home/web/framework.svg";
-
+import img1 from "@/assets/images/home/tinyvue-home/web/img1.svg";
+import img2 from "@/assets/images/home/tinyvue-home/web/img2.svg";
// 跨端跨框架特性数据
const features = [
{
title: "一套代码同时支持PC和移动端",
+ icon: img1,
description:
"我们支持PC和移动端,同一个组件在不同终端表现不同在多端场景下组件的使用方式完全相同。",
},
{
- title: "一套代码同时支持Vue 2 / Vue 3",
+ title: "一套代码同时支持 Vue 2 / Vue 3",
+ icon: img2,
description:
"针对Vue2 和 Vue3 实现了相应的版本适配器,抹平Vue2 和 Vue3 的差异,实现了一套代码同时支持Vue2 和 Vue3。",
},
@@ -24,16 +27,17 @@ const features = [
+
{{ item.title }}
-
{{ item.description }}
+
{{ item.description }}
diff --git a/packages/home/src/views/tiny-vue-home/components/HeroSection.vue b/packages/home/src/views/tiny-vue-home/components/HeroSection.vue
index baee1c9c..f743f953 100644
--- a/packages/home/src/views/tiny-vue-home/components/HeroSection.vue
+++ b/packages/home/src/views/tiny-vue-home/components/HeroSection.vue
@@ -1,5 +1,5 @@
-
+
-
TinyVue 智能组件库
-
跨端、跨框架、智能化
-
- 一款跨端、跨框架的企业级 UI 组件库,支持 Vue 2 和 Vue 3,支持 PC 端和移动端
-
+
TinyVue 智能组件库
+
轻量 高性能 智能化
+
一款支持主流前端框架、AI对话框、MCP Host 和智能体搭建平台
-
![TinyVue 智能组件库]()
+
@@ -59,7 +67,7 @@ onMounted(() => {
align-items: center;
background-repeat: no-repeat;
background-size: cover;
- padding: 0 75px;
+ gap: 60px;
}
.hero-content {
@@ -79,8 +87,7 @@ onMounted(() => {
align-items: center;
img {
- width: 90%;
- max-width: 1000px;
+ width: 1000px;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
border-radius: 20px;
}
@@ -107,6 +114,7 @@ onMounted(() => {
flex-direction: column;
text-align: center;
justify-content: center;
+ gap: 0px;
}
.hero-content {
diff --git a/packages/home/src/views/tiny-vue-home/components/McpSection.vue b/packages/home/src/views/tiny-vue-home/components/McpSection.vue
new file mode 100644
index 00000000..ac48f822
--- /dev/null
+++ b/packages/home/src/views/tiny-vue-home/components/McpSection.vue
@@ -0,0 +1,366 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ item.title }}
+
{{ item.description }}
+
+
+
+
+
+
TinyVue 智能组件库
+
让你的Web 随心所动 无需手动
+
+
+
+
+
+
diff --git a/packages/home/src/views/tiny-vue-home/index.vue b/packages/home/src/views/tiny-vue-home/index.vue
index 1e37f05b..5f31cfff 100644
--- a/packages/home/src/views/tiny-vue-home/index.vue
+++ b/packages/home/src/views/tiny-vue-home/index.vue
@@ -1,11 +1,21 @@