docs: improve document of useViewer

src/core/composables/useViewer/index-zh.md

@@ -15,7 +15,18 @@
 
 对于父组件，使用 `useViewerProvider` 注入viewer。useViewerProvider接受一个返回viewer实例的回调函数，这个函数可以是异步的:
 
-`useViewerProvider(() => new Cesium.Viewer(container.value))`
+```ts
+useViewerProvider(() => new Cesium.Viewer(container.value))
+```
+
+```ts
+useViewerProvider(async () => {
+  await fetch('/some/data')
+  const viewer = new Cesium.Viewer(container.value)
+  // ...
+  return viewer
+})
+```
 
 该回调函数会在 `onMounted` 钩子中调用，因此可以放心的在回调函数中使用DOM引用。
 
@@ -24,10 +35,10 @@
 
 ```vue
 <script setup>
-const container = ref(null)
+const container = useTemplateRef('container')
 
 const { isMounted } = useViewerProvider(() => {
-  const viewer = new Cesium.Viewer(container)
+  const viewer = new Cesium.Viewer(container.value)
   // ...
   return viewer
 })

src/core/composables/useViewer/index.md

@@ -15,7 +15,18 @@ For more details about `provide / inject`, please refer to [vue document](https:
 
 For parent component, use `useViewerProvider` to inject `Viewer`. `useViewerProvider` receives a callback returned a viewer instance, which can also be async function:
 
-`useViewerProvider(() => new Cesium.Viewer(container.value))`
+```ts
+useViewerProvider(() => new Cesium.Viewer(container.value))
+```
+
+```ts
+useViewerProvider(async () => {
+  await fetch('/some/data')
+  const viewer = new Cesium.Viewer(container.value)
+  // ...
+  return viewer
+})
+```
 
 The callback function will be called in `onMounted` hook, therefore, you can safely use DOM references in callback functions.
 
@@ -24,18 +35,18 @@ The callback function will be called in `onMounted` hook, therefore, you can saf
 
 ```vue
 <script setup>
-const container = ref(null)
+const container = useTemplateRef('container')
 
 const { isMounted } = useViewerProvider(() => {
-  const viewer = new Cesium.Viewer(container)
+  const viewer = new Cesium.Viewer(container.value)
   // ...
   return viewer
 })
 </script>
 
 <template>
   <div ref="container" />
-  <!-- Confirm when the child component is created, viewer has been initialized -->
+  <!-- 确保子组件创建时，viewer已经完成初始化 -->
   <slot v-if="isMounted" />
 </template>
 ```