1
---
2
import StaticContent from '../components/StaticContent.astro'
3
import InteractiveChart from '../components/InteractiveChart.vue'
4
import ShoppingCart from '../components/ShoppingCart.svelte'
5
---
6

7
<StaticContent />
8

9
<!-- 只有这些组件会被发送JavaScript到客户端 -->
10
<InteractiveChart client:load />
11
<ShoppingCart client:idle />

1
---
2
import { ref } from 'vue';
3
import VueCounter from '../components/VueCounter.vue';
4
---
5

6
<main>
7
  <h1>Vue.js + Astro 示例</h1>
8

9
  <!-- 静态内容，无 JavaScript -->
10
  <p>这是一个静态段落，不需要 JavaScript。</p>
11

12
  <!-- Vue 交互组件，按需 hydration -->
13
  <VueCounter
14
    client:visible
15
    :initialCount="10"
16
    title="点击计数器"
17
  />
18
</main>

1
<template>
2
  <div class="counter">
3
    <h3>{{ title }}</h3>
4
    <p>当前计数: {{ count }}</p>
5
    <button @click="increment">增加</button>
6
    <button @click="decrement">减少</button>
7
  </div>
8
</template>
9

10
<script setup>
11
import { ref } from 'vue';
12

13
const props = defineProps({
14
  initialCount: {
15
    type: Number,
16
    default: 0
17
  },
18
  title: String
19
});
20

21
const count = ref(props.initialCount);
22

23
const increment = () => count.value++;
24
const decrement = () => count.value--;
25
</script>

1
<template>
2
  <div>
3
    <h3>数据获取示例</h3>
4
    <div v-if="loading">加载中...</div>
5
    <div v-else>
6
      <ul>
7
        <li v-for="item in data" :key="item.id">
8
          {{ item.name }}
9
        </li>
10
      </ul>
11
    </div>
12
  </div>
13
</template>
14

15
<script setup>
16
import { ref, onMounted } from 'vue';
17

18
const data = ref([]);
19
const loading = ref(true);
20

21
onMounted(async () => {
22
  try {
23
    const response = await fetch('/api/data');
24
    data.value = await response.json();
25
  } catch (error) {
26
    console.error('获取数据失败:', error);
27
  } finally {
28
    loading.value = false;
29
  }
30
});
31
</script>

1
import { Component, Input } from '@angular/core';
2

3
@Component({
4
  selector: 'app-angular-counter',
5
  template: `
6
    <div class="angular-counter">
7
      <h3>{{ title }}</h3>
8
      <p>计数: {{ count }}</p>
9
      <button (click)="increment()">增加</button>
10
      <button (click)="decrement()">减少</button>
11
    </div>
12
  `,
13
  standalone: true,
14
})
15
export class AngularCounterComponent {
16
  @Input() count = 0;
17
  @Input() title = 'Angular 计数器';
18

19
  increment() {
20
    this.count++;
21
  }
22

23
  decrement() {
24
    this.count--;
25
  }
26
}

1
---
2
import { AngularCounterComponent } from '../angular-app/src/app/angular-counter.component';
3
---
4

5
<main>
6
  <h1>Angular + Astro 集成示例</h1>
7

8
  <p>这是一个包含 Angular 组件的 Astro 页面。</p>
9

10
  <AngularCounterComponent
11
    client:idle
12
    count={5}
13
    title="Angular 交互组件"
14
  />
15
</main>

1
import { Injectable } from '@angular/core';
2
import { HttpClient } from '@angular/common/http';
3
import { Observable } from 'rxjs';
4

5
@Injectable({
6
  providedIn: 'root'
7
})
8
export class DataService {
9
  constructor(private http: HttpClient) {}
10

11
  getItems(): Observable<any[]> {
12
    return this.http.get<any[]>('/api/items');
13
  }
14
}
15

16
// angular-app/src/app/angular-data.component.ts
17
import { Component, OnInit } from '@angular/core';
18
import { CommonModule } from '@angular/common';
19
import { DataService } from './data.service';
20
import { Observable } from 'rxjs';
21

22
@Component({
23
  selector: 'app-angular-data',
24
  standalone: true,
25
  imports: [CommonModule],
26
  template: `
27
    <div>
28
      <h3>Angular 数据组件</h3>
29
      <ul>
30
        <li *ngFor="let item of items$ | async">
31
          {{ item.name }}
32
        </li>
33
      </ul>
34
    </div>
35
  `
36
})
37
export class AngularDataComponent implements OnInit {
38
  items$: Observable<any[]>;
39

40
  constructor(private dataService: DataService) {
41
    this.items$ = this.dataService.getItems();
42
  }
43

44
  ngOnInit() {}
45
}

1
<!-- Vue 组件发射事件 -->
2
<template>
3
  <button @click="sendMessage">
4
    发送消息到 Angular 组件
5
  </button>
6
</template>
7

8
<script setup>
9
const emit = defineEmits(['message-sent']);
10

11
const sendMessage = () => {
12
  const event = new CustomEvent('vue-message', {
13
    detail: { message: '来自 Vue 的消息', timestamp: Date.now() }
14
  });
15
  window.dispatchEvent(event);
16
  emit('message-sent');
17
};
18
</script>

1
// Angular 组件监听事件
2
import { Component, HostListener, OnInit } from '@angular/core';
3

4
@Component({
5
  selector: 'app-angular-listener',
6
  template: `
7
    <div>
8
      <h3>收到的消息:</h3>
9
      <p>{{ message }}</p>
10
      <p>时间: {{ timestamp | date:'medium' }}</p>
11
    </div>
12
  `,
13
  standalone: true,
14
})
15
export class AngularListenerComponent implements OnInit {
16
  message = '';
17
  timestamp = 0;
18

19
  @HostListener('window:vue-message', ['$event'])
20
  onVueMessage(event: CustomEvent) {
21
    this.message = event.detail.message;
22
    this.timestamp = event.detail.timestamp;
23
  }
24

25
  ngOnInit() {}
26
}

1
---
2
import VueEmitter from '../components/VueEmitter.vue';
3
import { AngularListenerComponent } from '../angular-app/src/app/angular-listener.component';
4
---
5

6
<main>
7
  <h1>多框架通信示例</h1>
8

9
  <div class="component-grid">
10
    <VueEmitter client:load />
11
    <AngularListenerComponent client:load />
12
  </div>
13
</main>
14

15
<style>
16
.component-grid {
17
  display: grid;
18
  grid-template-columns: 1fr 1fr;
19
  gap: 2rem;
20
  margin-top: 2rem;
21
}
22
</style>

1
// 使用 Nano Stores（轻量级状态管理，框架无关）
2
import { atom } from 'nanostores';
3

4
export const counter = atom(0);
5

6
export function increment() {
7
  counter.set(counter.get() + 1);
8
}
9

10
export function decrement() {
11
  counter.set(counter.get() - 1);
12
}

1
<!-- Vue 组件使用共享状态 -->
2
<template>
3
  <div>
4
    <h3>Vue 计数器</h3>
5
    <p>共享计数: {{ count }}</p>
6
    <button @click="increment">Vue 增加</button>
7
  </div>
8
</template>
9

10
<script setup>
11
import { useStore } from '@nanostores/vue';
12
import { counter, increment } from '../../stores/counterStore';
13

14
const count = useStore(counter);
15
</script>

1
// Angular 组件使用共享状态
2
import { Component } from '@angular/core';
3
import { counter, decrement } from '../../../stores/counterStore';
4
import { toSignal } from '@angular/core/rxjs-interop';
5
import { from } from 'rxjs';
6

7
@Component({
8
  selector: 'app-angular-shared-counter',
9
  template: `
10
    <div>
11
      <h3>Angular 计数器</h3>
12
      <p>共享计数: {{ count() }}</p>
13
      <button (click)="decrement()">Angular 减少</button>
14
    </div>
15
  `,
16
  standalone: true,
17
})
18
export class AngularSharedCounterComponent {
19
  // 将 Nano Store 转换为 Angular Signal
20
  count = toSignal(from(counter), { initialValue: 0 });
21

22
  decrement() {
23
    decrement();
24
  }
25
}

1
---
2
import { getProduct, getRelatedProducts } from '../../api/products';
3
import ProductGallery from '../../components/ProductGallery.astro';
4
import ProductInfo from '../../components/ProductInfo.astro';
5
import AddToCart from '../../components/vue/AddToCart.vue';
6
import ProductReviews from '../../components/vue/ProductReviews.vue';
7
import RelatedProducts from '../../components/RelatedProducts.astro';
8

9
const product = await getProduct(Astro.params.id);
10
const relatedProducts = await getRelatedProducts(product.category);
11

12
// 静态生成所有产品页面
13
export async function getStaticPaths() {
14
  const products = await getAllProductIds();
15
  return products.map(product => ({
16
    params: { id: product.id }
17
  }));
18
}
19
---
20

21
<Layout>
22
  <!-- 静态内容 - 快速加载 -->
23
  <ProductGallery images={product.images} />
24
  <ProductInfo
25
    name={product.name}
26
    price={product.price}
27
    description={product.description}
28
    specs={product.specifications}
29
  />
30

31
  <!-- 交互组件 - 按需加载 -->
32
  <AddToCart
33
    client:load
34
    productId={product.id}
35
    stock={product.stock}
36
  />
37

38
  <ProductReviews
39
    client:visible
40
    productId={product.id}
41
  />
42

43
  <!-- 更多静态内容 -->
44
  <RelatedProducts products={relatedProducts} />
45
</Layout>

1
---
2
import { getCollection } from 'astro:content';
3
import DocsLayout from '../../layouts/DocsLayout.astro';
4
import CodePlayground from '../../components/vue/CodePlayground.vue';
5
import InteractiveDiagram from '../../components/angular/InteractiveDiagram.component';
6
import TableOfContents from '../../components/TableOfContents.astro';
7

8
const { Content } = await getEntry();
9
---
10

11
<DocsLayout>
12
  <div class="docs-container">
13
    <aside class="sidebar">
14
      <TableOfContents headings={Content.headings} />
15
    </aside>
16

17
    <main class="content">
18
      <Content />
19

20
      <!-- 交互式代码示例 -->
21
      <CodePlayground
22
        client:visible
23
        code={frontmatter.exampleCode}
24
        language="javascript"
25
      />
26

27
      <!-- 交互式架构图 -->
28
      <InteractiveDiagram
29
        client:idle
30
        diagramType="architecture"
31
        data={frontmatter.diagramData}
32
      />
33
    </main>
34
  </div>
35
</DocsLayout>
36

37
<style>
38
.docs-container {
39
  display: grid;
40
  grid-template-columns: 250px 1fr;
41
  gap: 2rem;
42
  max-width: 1200px;
43
  margin: 0 auto;
44
}
45

46
@media (max-width: 768px) {
47
  .docs-container {
48
    grid-template-columns: 1fr;
49
  }
50
}
51
</style>