diff --git a/pages/index/index.uvue b/pages/index/index.uvue
index ca4ac9d536991f7a61caa30fede4f5590d2a4b84..e03e4c1502e1f2f943af21d3eee76c4e25459191 100644
--- a/pages/index/index.uvue
+++ b/pages/index/index.uvue
@@ -607,6 +607,11 @@ export default {
                   name: 'shallowReactive',
                   url: 'shallow-reactive/shallow-reactive'
                 },
+                {
+                  id: 'shallow-readonly',
+                  name: 'shallowReadonly',
+                  url: 'shallow-readonly/shallow-readonly'
+                },
               ]
             }
           ] as Page[]
diff --git a/pages/reactivity/advanced/shallow-reactive/shallow-reactive.test.js b/pages/reactivity/advanced/shallow-reactive/shallow-reactive.test.js
index 88c775a6879205317ff05a3e6b9758d24cab6682..13b8b259bfde6fd4500e2e78217b21c28c2121ef 100644
--- a/pages/reactivity/advanced/shallow-reactive/shallow-reactive.test.js
+++ b/pages/reactivity/advanced/shallow-reactive/shallow-reactive.test.js
@@ -22,6 +22,7 @@ describe('shallowReactive', () => {
     await incrementStateCountBtn.tap()
 
     expect(await stateCount.text()).toBe('1')
+    // TODO: web 失败,获取到的还是 0
     expect(await stateNestedCount.text()).toBe('1')
   })
 })
\ No newline at end of file
diff --git a/pages/reactivity/advanced/shallow-readonly/shallow-readonly.test.js b/pages/reactivity/advanced/shallow-readonly/shallow-readonly.test.js
index 5e022f644d48d450b3165420e3db0a33071d38b6..f01ad2974202800d24eb2d09e867f941213ab4b4 100644
--- a/pages/reactivity/advanced/shallow-readonly/shallow-readonly.test.js
+++ b/pages/reactivity/advanced/shallow-readonly/shallow-readonly.test.js
@@ -1,4 +1,4 @@
-const PAGE_PATH = '/pages/composition-api/reactivity/shallow-readonly/shallow-readonly'
+const PAGE_PATH = '/pages/reactivity/advanced/shallow-readonly/shallow-readonly'
 
 describe('shallowReadonly', () => {
   let page = null
@@ -8,10 +8,10 @@ describe('shallowReadonly', () => {
   })
   it('basic', async () => {
     let stateCount = await page.$('#state-count')
-    expect(await stateCount.text()).toBe('state.count: 0')
+    expect(await stateCount.text()).toBe('0')
 
     let stateNestedCount = await page.$('#state-nested-count')
-    expect(await stateNestedCount.text()).toBe('state.nested.count: 0')
+    expect(await stateNestedCount.text()).toBe('0')
 
     if (process.env.uniTestPlatformInfo.startsWith('web')) {
       // web端操作readonly对象会直接编译失败,以下测试无法执行
@@ -24,15 +24,15 @@ describe('shallowReadonly', () => {
     const incrementStateNestedCountBtn = await page.$('#increment-state-nested-count-btn')
     await incrementStateNestedCountBtn.tap()
 
-    expect(await stateCount.text()).toBe('state.count: 0')
-    expect(await stateNestedCount.text()).toBe('state.nested.count: 0')
+    expect(await stateCount.text()).toBe('0')
+    expect(await stateNestedCount.text()).toBe('0')
 
     const updatePageRenderBtn = await page.$('#update-page-render-btn')
     await updatePageRenderBtn.tap()
 
     stateCount = await page.$('#state-count')
-    expect(await stateCount.text()).toBe('state.count: 0')
+    expect(await stateCount.text()).toBe('0')
     stateNestedCount = await page.$('#state-nested-count')
-    expect(await stateNestedCount.text()).toBe('state.nested.count: 1')
+    expect(await stateNestedCount.text()).toBe('1')
   })
 })
\ No newline at end of file
diff --git a/pages/reactivity/advanced/shallow-readonly/shallow-readonly.uvue b/pages/reactivity/advanced/shallow-readonly/shallow-readonly.uvue
index 100e85e88e302fd6f3a1a1027541c629552b32c2..9f4b6d4fe1820db31c8d13ef05c752d32280d938 100644
--- a/pages/reactivity/advanced/shallow-readonly/shallow-readonly.uvue
+++ b/pages/reactivity/advanced/shallow-readonly/shallow-readonly.uvue
@@ -1,45 +1,59 @@
 <template>
   <view :key="pageKey" class="page">
-    <text id="state-count" class="mb-10">state.count: {{ state.count }}</text>
-    <text id="state-nested-count" class="mb-10">state.nested.count: {{ state.nested.count }}</text>
-    <button id="increment-state-count-btn" class="mb-10" @click="incrementStateCount">
+    <view class="flex justify-between flex-row mb-10">
+      <text>state.count:</text>
+      <text id="state-count">{{ state.count }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>state.nested.count:</text>
+      <text id="state-nested-count">{{ state.nested.count }}</text>
+    </view>
+    <button
+      id="increment-state-count-btn"
+      class="mb-10"
+      @click="incrementStateCount">
       increment state.count
     </button>
-    <button id="increment-state-nested-count-btn" class="mb-10" @click="incrementStateNestedCount">
+    <button
+      id="increment-state-nested-count-btn"
+      class="mb-10"
+      @click="incrementStateNestedCount">
       increment state.nested.count
     </button>
-    <button id="update-page-render-btn" @click="updatePageRender">update page render</button>
+    <button id="update-page-render-btn" @click="updatePageRender">
+      update page render
+    </button>
   </view>
 </template>
 
-<script setup>
-  let pageKey = ref<number>(0)
+<script setup lang="uts">
+let pageKey = ref<number>(0)
 
-  type StateNested = {
-    count : number
-  }
-  type State = {
-    count : number,
-    nested : StateNested
-  }
-  const state = shallowReadonly({
-    count: 0,
-    nested: {
-      count: 0
-    } as StateNested
-  } as State)
+type StateNested = {
+  count : number
+}
+type State = {
+  count : number,
+  nested : StateNested
+}
+const state = shallowReadonly({
+  count: 0,
+  nested: {
+    count: 0
+  } as StateNested
+} as State)
 
-  // #ifdef APP
-  const incrementStateCount = () => {
-    state.count++
-  }
+// #ifdef APP
+const incrementStateCount = () => {
+  state.count++
+}
 
-  const incrementStateNestedCount = () => {
-    state.nested.count++
-  }
-  // #endif
+const incrementStateNestedCount = () => {
+  state.nested.count++
+}
+// #endif
 
-  const updatePageRender = () => {
-    pageKey.value = Date.now()
-  }
-</script>
\ No newline at end of file
+const updatePageRender = () => {
+  pageKey.value = Date.now()
+}
+</script>
diff --git a/refactor_options-API-composition-API-correspondence.md b/refactor_options-API-composition-API-correspondence.md
index f353ab735c29680767a3436307cec491867ef110..0aa8aa5fb97a0f34539dc979f1957ef7e5bda4b5 100644
--- a/refactor_options-API-composition-API-correspondence.md
+++ b/refactor_options-API-composition-API-correspondence.md
@@ -146,7 +146,7 @@ function transform(fileInfo, api) {
 - [x] markRaw
 - [x] onScopeDispose
 - [x] shallowReactive
-- [ ] shallowReadonly
+- [x] shallowReadonly
 - [ ] shallowRef
 - [ ] toRaw
 - [ ] triggerRef