Skip to content

fix:update example code. #770

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix:update example code. #770

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
307 changes: 176 additions & 131 deletions cn/Zadig v4.0/21.开发者中心/02.idp-manual.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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';

// 导出插件配置和组件
Expand Down Expand Up @@ -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>
`
};
```

#### 样式管理
Expand Down Expand Up @@ -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. 数据持久化
Expand Down
Loading