diff --git "a/cn/Zadig v4.0/21.\345\274\200\345\217\221\350\200\205\344\270\255\345\277\203/02.idp-manual.md" "b/cn/Zadig v4.0/21.\345\274\200\345\217\221\350\200\205\344\270\255\345\277\203/02.idp-manual.md"
index e488dc232..cbbca7b3c 100644
--- "a/cn/Zadig v4.0/21.\345\274\200\345\217\221\350\200\205\344\270\255\345\277\203/02.idp-manual.md"	
+++ "b/cn/Zadig v4.0/21.\345\274\200\345\217\221\350\200\205\344\270\255\345\277\203/02.idp-manual.md"	
@@ -210,42 +210,42 @@ export default {
 
 ```javascript
 // src/index.js
-import React, { useState, useEffect } from 'react';
 import './styles.css';
 
-function MyPluginPage() {
-  const [data, setData] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    fetchData();
-  }, []);
-
-  const fetchData = async () => {
-    try {
-      const response = await fetch('/api/data');
-      const result = await response.json();
-      setData(result);
-    } catch (error) {
-      console.error('Error fetching data:', error);
-    } finally {
-      setLoading(false);
+const MyPluginPage = {
+  name: 'MyPluginPage',
+  data() {
+    return {
+      data: [],
+      loading: true
+    };
+  },
+  async mounted() {
+    await this.fetchData();
+  },
+  methods: {
+    async fetchData() {
+      try {
+        const response = await fetch('/api/data');
+        const result = await response.json();
+        this.data = result;
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      } finally {
+        this.loading = false;
+      }
     }
-  };
-
-  return (
-    <div className="my-plugin-container">
+  },
+  template: `
+    <div class="my-plugin-container">
       <h1>我的插件</h1>
-      {loading ? (
-        <div>加载中...</div>
-      ) : (
-        <div className="content">
-          {/* 业务逻辑 */}
-        </div>
-      )}
+      <div v-if="loading">加载中...</div>
+      <div v-else class="content">
+        <!-- 业务逻辑 -->
+      </div>
     </div>
-  );
-}
+  `
+};
 
 export default {
   name: 'my-plugin',
@@ -274,44 +274,52 @@ export default {
 
 ```javascript
 // src/index.js
-import React, { useState, useEffect } from 'react';
 import './styles.css';
 
-function MyTabComponent({ context }) {
-  // context 包含父页面的上下文信息
-  // 如：项目名称、环境信息等
-  const { projectName, envName } = context || {};
-  const [info, setInfo] = useState(null);
-
-  useEffect(() => {
-    if (projectName) {
-      loadProjectInfo(projectName);
+const MyTabComponent = {
+  name: 'MyTabComponent',
+  props: {
+    context: {
+      type: Object,
+      default: () => ({})
     }
-  }, [projectName]);
-
-  const loadProjectInfo = async (name) => {
-    try {
-      const response = await fetch(`/api/project/${name}`);
-      const data = await response.json();
-      setInfo(data);
-    } catch (error) {
-      console.error('Error:', error);
+  },
+  data() {
+    return {
+      info: null
+    };
+  },
+  watch: {
+    'context.projectName': {
+      handler(newProjectName) {
+        if (newProjectName) {
+          this.loadProjectInfo(newProjectName);
+        }
+      },
+      immediate: true
     }
-  };
-
-  return (
-    <div className="my-tab-container">
+  },
+  methods: {
+    async loadProjectInfo(name) {
+      try {
+        const response = await fetch(`/api/project/${name}`);
+        const data = await response.json();
+        this.info = data;
+      } catch (error) {
+        console.error('Error:', error);
+      }
+    }
+  },
+  template: `
+    <div class="my-tab-container">
       <h3>项目信息</h3>
-      {info ? (
-        <div className="info-content">
-          {/* 展示项目相关信息 */}
-        </div>
-      ) : (
-        <div>暂无数据</div>
-      )}
+      <div v-if="info" class="info-content">
+        <!-- 展示项目相关信息 -->
+      </div>
+      <div v-else>暂无数据</div>
     </div>
-  );
-}
+  `
+};
 
 export default {
   name: 'my-tab-plugin',
@@ -367,8 +375,8 @@ module.exports = {
 `src/index.js` 是插件的入口文件：
 
 ```javascript
-import React from 'react';
-import App from './App';
+import Vue from 'vue';
+import App from './App.vue';
 import './styles/index.css';
 
 // 导出插件配置和组件
@@ -397,21 +405,29 @@ export default {
 
 #### 组件开发
 ```javascript
-// 使用函数组件和 Hooks
-import React, { useState, useEffect } from 'react';
-
-function MyComponent() {
-  const [data, setData] = useState([]);
-  
-  useEffect(() => {
+// 使用Vue2组件和Options API
+export default {
+  name: 'MyComponent',
+  data() {
+    return {
+      data: []
+    };
+  },
+  async mounted() {
     // 数据加载逻辑
-    fetchData();
-  }, []);
-  
-  return <div>{/* 组件内容 */}</div>;
-}
-
-export default MyComponent;
+    await this.fetchData();
+  },
+  methods: {
+    async fetchData() {
+      // 数据获取逻辑
+    }
+  },
+  template: `
+    <div>
+      <!-- 组件内容 -->
+    </div>
+  `
+};
 ```
 
 #### 样式管理
@@ -472,80 +488,109 @@ async function fetchData() {
 
 #### 懒加载
 ```javascript
-// 使用 React.lazy 进行组件懒加载
-const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
-
-function App() {
-  return (
-    <React.Suspense fallback={<div>加载中...</div>}>
+// 使用Vue异步组件进行懒加载
+export default {
+  name: 'App',
+  components: {
+    HeavyComponent: () => import('./HeavyComponent.vue')
+  },
+  template: `
+    <div>
       <HeavyComponent />
-    </React.Suspense>
-  );
-}
+    </div>
+  `
+};
 ```
 
 #### 防抖与节流
 ```javascript
-import { useState, useCallback } from 'react';
-
 // 使用 debounce 优化搜索输入
-function SearchInput() {
-  const [query, setQuery] = useState('');
-  
-  const handleSearch = useCallback(
-    debounce((value) => {
-      // 执行搜索
-      performSearch(value);
-    }, 300),
-    []
-  );
-  
-  return (
+export default {
+  name: 'SearchInput',
+  data() {
+    return {
+      query: '',
+      timer: null
+    };
+  },
+  methods: {
+    handleSearch(value) {
+      // 清除上一次的定时器
+      if (this.timer) {
+        clearTimeout(this.timer);
+      }
+      // 设置新的定时器
+      this.timer = setTimeout(() => {
+        this.performSearch(value);
+      }, 300);
+    },
+    performSearch(value) {
+      // 执行搜索逻辑
+      console.log('搜索:', value);
+    }
+  },
+  template: `
     <input
-      value={query}
-      onChange={(e) => {
-        setQuery(e.target.value);
-        handleSearch(e.target.value);
-      }}
+      v-model="query"
+      @input="handleSearch(query)"
+      placeholder="输入搜索关键词"
     />
-  );
-}
+  `
+};
 ```
 
 ### 5. 用户体验
 
 #### 加载状态
 ```javascript
-function DataList() {
-  const [loading, setLoading] = useState(true);
-  const [data, setData] = useState([]);
-  
-  return (
+export default {
+  name: 'DataList',
+  data() {
+    return {
+      loading: true,
+      data: []
+    };
+  },
+  template: `
     <div>
-      {loading ? (
-        <div className="loading-spinner">加载中...</div>
-      ) : (
-        <div>{/* 数据展示 */}</div>
-      )}
+      <div v-if="loading" class="loading-spinner">
+        加载中...
+      </div>
+      <div v-else>
+        <!-- 数据展示 -->
+      </div>
     </div>
-  );
-}
+  `
+};
 ```
 
 #### 空状态提示
 ```javascript
-function DataList({ data }) {
-  if (data.length === 0) {
-    return (
-      <div className="empty-state">
+export default {
+  name: 'DataList',
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    handleRefresh() {
+      this.$emit('refresh');
+    }
+  },
+  template: `
+    <div>
+      <div v-if="data.length === 0" class="empty-state">
         <p>暂无数据</p>
-        <button onClick={handleRefresh}>刷新</button>
+        <button @click="handleRefresh">刷新</button>
       </div>
-    );
-  }
-  
-  return <div>{/* 数据列表 */}</div>;
-}
+      <div v-else>
+        <!-- 数据列表 -->
+      </div>
+    </div>
+  `
+};
 ```
 
 ### 6. 数据持久化
diff --git a/en/Zadig v4.0/21.Developer Guide/02.idp-manual.md b/en/Zadig v4.0/21.Developer Guide/02.idp-manual.md
index 5b1cb64b5..f9114674a 100644
--- a/en/Zadig v4.0/21.Developer Guide/02.idp-manual.md	
+++ b/en/Zadig v4.0/21.Developer Guide/02.idp-manual.md	
@@ -210,42 +210,42 @@ export default {
 
 ```javascript
 // src/index.js
-import React, { useState, useEffect } from 'react';
 import './styles.css';
 
-function MyPluginPage() {
-  const [data, setData] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    fetchData();
-  }, []);
-
-  const fetchData = async () => {
-    try {
-      const response = await fetch('/api/data');
-      const result = await response.json();
-      setData(result);
-    } catch (error) {
-      console.error('Error fetching data:', error);
-    } finally {
-      setLoading(false);
+const MyPluginPage = {
+  name: 'MyPluginPage',
+  data() {
+    return {
+      data: [],
+      loading: true
+    };
+  },
+  async mounted() {
+    await this.fetchData();
+  },
+  methods: {
+    async fetchData() {
+      try {
+        const response = await fetch('/api/data');
+        const result = await response.json();
+        this.data = result;
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      } finally {
+        this.loading = false;
+      }
     }
-  };
-
-  return (
-    <div className="my-plugin-container">
+  },
+  template: `
+    <div class="my-plugin-container">
       <h1>My Plugin</h1>
-      {loading ? (
-        <div>Loading...</div>
-      ) : (
-        <div className="content">
-          {/* Business logic */}
-        </div>
-      )}
+      <div v-if="loading">Loading...</div>
+      <div v-else class="content">
+        <!-- Business logic -->
+      </div>
     </div>
-  );
-}
+  `
+};
 
 export default {
   name: 'my-plugin',
@@ -274,44 +274,52 @@ export default {
 
 ```javascript
 // src/index.js
-import React, { useState, useEffect } from 'react';
 import './styles.css';
 
-function MyTabComponent({ context }) {
-  // context contains parent page context information
-  // Such as: project name, environment info, etc.
-  const { projectName, envName } = context || {};
-  const [info, setInfo] = useState(null);
-
-  useEffect(() => {
-    if (projectName) {
-      loadProjectInfo(projectName);
+const MyTabComponent = {
+  name: 'MyTabComponent',
+  props: {
+    context: {
+      type: Object,
+      default: () => ({})
     }
-  }, [projectName]);
-
-  const loadProjectInfo = async (name) => {
-    try {
-      const response = await fetch(`/api/project/${name}`);
-      const data = await response.json();
-      setInfo(data);
-    } catch (error) {
-      console.error('Error:', error);
+  },
+  data() {
+    return {
+      info: null
+    };
+  },
+  watch: {
+    'context.projectName': {
+      handler(newProjectName) {
+        if (newProjectName) {
+          this.loadProjectInfo(newProjectName);
+        }
+      },
+      immediate: true
     }
-  };
-
-  return (
-    <div className="my-tab-container">
+  },
+  methods: {
+    async loadProjectInfo(name) {
+      try {
+        const response = await fetch(`/api/project/${name}`);
+        const data = await response.json();
+        this.info = data;
+      } catch (error) {
+        console.error('Error:', error);
+      }
+    }
+  },
+  template: `
+    <div class="my-tab-container">
       <h3>Project Information</h3>
-      {info ? (
-        <div className="info-content">
-          {/* Display project related information */}
-        </div>
-      ) : (
-        <div>No data available</div>
-      )}
+      <div v-if="info" class="info-content">
+        <!-- Display project related information -->
+      </div>
+      <div v-else>No data available</div>
     </div>
-  );
-}
+  `
+};
 
 export default {
   name: 'my-tab-plugin',
@@ -367,8 +375,8 @@ module.exports = {
 `src/index.js` is the plugin's entry file:
 
 ```javascript
-import React from 'react';
-import App from './App';
+import Vue from 'vue';
+import App from './App.vue';
 import './styles/index.css';
 
 // Export plugin configuration and component
@@ -397,21 +405,29 @@ export default {
 
 #### Component Development
 ```javascript
-// Use functional components and Hooks
-import React, { useState, useEffect } from 'react';
-
-function MyComponent() {
-  const [data, setData] = useState([]);
-  
-  useEffect(() => {
+// Use Vue2 components and Options API
+export default {
+  name: 'MyComponent',
+  data() {
+    return {
+      data: []
+    };
+  },
+  async mounted() {
     // Data loading logic
-    fetchData();
-  }, []);
-  
-  return <div>{/* Component content */}</div>;
-}
-
-export default MyComponent;
+    await this.fetchData();
+  },
+  methods: {
+    async fetchData() {
+      // Data fetching logic
+    }
+  },
+  template: `
+    <div>
+      <!-- Component content -->
+    </div>
+  `
+};
 ```
 
 #### Style Management
@@ -472,80 +488,109 @@ async function fetchData() {
 
 #### Lazy Loading
 ```javascript
-// Use React.lazy for component lazy loading
-const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
-
-function App() {
-  return (
-    <React.Suspense fallback={<div>Loading...</div>}>
+// Use Vue async components for lazy loading
+export default {
+  name: 'App',
+  components: {
+    HeavyComponent: () => import('./HeavyComponent.vue')
+  },
+  template: `
+    <div>
       <HeavyComponent />
-    </React.Suspense>
-  );
-}
+    </div>
+  `
+};
 ```
 
 #### Debounce and Throttle
 ```javascript
-import { useState, useCallback } from 'react';
-
 // Use debounce to optimize search input
-function SearchInput() {
-  const [query, setQuery] = useState('');
-  
-  const handleSearch = useCallback(
-    debounce((value) => {
-      // Perform search
-      performSearch(value);
-    }, 300),
-    []
-  );
-  
-  return (
+export default {
+  name: 'SearchInput',
+  data() {
+    return {
+      query: '',
+      timer: null
+    };
+  },
+  methods: {
+    handleSearch(value) {
+      // Clear previous timer
+      if (this.timer) {
+        clearTimeout(this.timer);
+      }
+      // Set new timer
+      this.timer = setTimeout(() => {
+        this.performSearch(value);
+      }, 300);
+    },
+    performSearch(value) {
+      // Search logic
+      console.log('Searching:', value);
+    }
+  },
+  template: `
     <input
-      value={query}
-      onChange={(e) => {
-        setQuery(e.target.value);
-        handleSearch(e.target.value);
-      }}
+      v-model="query"
+      @input="handleSearch(query)"
+      placeholder="Enter search keywords"
     />
-  );
-}
+  `
+};
 ```
 
 ### 5. User Experience
 
 #### Loading State
 ```javascript
-function DataList() {
-  const [loading, setLoading] = useState(true);
-  const [data, setData] = useState([]);
-  
-  return (
+export default {
+  name: 'DataList',
+  data() {
+    return {
+      loading: true,
+      data: []
+    };
+  },
+  template: `
     <div>
-      {loading ? (
-        <div className="loading-spinner">Loading...</div>
-      ) : (
-        <div>{/* Data display */}</div>
-      )}
+      <div v-if="loading" class="loading-spinner">
+        Loading...
+      </div>
+      <div v-else>
+        <!-- Data display -->
+      </div>
     </div>
-  );
-}
+  `
+};
 ```
 
 #### Empty State
 ```javascript
-function DataList({ data }) {
-  if (data.length === 0) {
-    return (
-      <div className="empty-state">
+export default {
+  name: 'DataList',
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    handleRefresh() {
+      this.$emit('refresh');
+    }
+  },
+  template: `
+    <div>
+      <div v-if="data.length === 0" class="empty-state">
         <p>No data available</p>
-        <button onClick={handleRefresh}>Refresh</button>
+        <button @click="handleRefresh">Refresh</button>
       </div>
-    );
-  }
-  
-  return <div>{/* Data list */}</div>;
-}
+      <div v-else>
+        <!-- Data list -->
+      </div>
+    </div>
+  `
+};
 ```
 
 ### 6. Data Persistence