CI/CDDevOps【免费下载链接】woodpeckerWoodpecker is a simple, yet powerful CI/CD engine with great extensibility.项目地址https://gitcode.com/gh_mirrors/wo/woodpecker点击查看免费下载本篇技术指南以 Woodpecker 官方开发文档 docs/docs/92-development/03-ui.md 为核心骨架结合仓库内web/前端源码、vite.config.ts构建配置与cmd/server服务端实现完整讲解如何搭建 UI 开发环境、利用内置 Dev 代理实现免重建的热更新调试、对接远程服务器真实数据以及表单组件、国际化翻译等开发规范。读完本文你将掌握一套可直接落地的 Woodpecker UI 二次开发工作流。一、UI 技术栈与整体架构Woodpecker 的 Web 界面是一个基于 Vue 3 文件夹内。从 web/package.json 可以确认当前 UI 的核心依赖与版本框架vue^3.5、vue-router^5.0、pinia^4.0状态管理、vue-i18n^11.3国际化样式tailwindcss^4.2及tailwindcss/vite、tailwindcss/typography构建vite^8.0、vite-plugin-vue、vite-svg-loader、vite-plugin-prismjs质量typescript6.0、vue-tsc、eslint、prettier、vitest测试运行时要求Node.js20包管理器为pnpmpackageManager: pnpm12.4.1前端入口 web/src/main.ts 展示了应用的装配顺序创建 Vue 应用实例后依次挂载router路由、notifications通知、i18n国际化与createPinia()状态管理最后挂载到#app。路由定义集中在 web/src/router.ts采用懒加载import()方式按需加载各视图组件并通过RouteMeta如authentication、repoHeader、layout声明路由级权限与布局信息。生产构建go:embed 集成官方文档指出生产构建时生成的 UI 代码会通过 go-embed 中有直接体现//go:embed all:dist/* var webFiles embed.FS func HTTPFS() (http.FileSystem, error) { httpFS, err : fs.Sub(webFiles, dist) ... }即先执行pnpm buildvite build --base/BASE_PATH把产物输出到web/dist/再通过 Go 的embed指令把静态资源打包进 server 二进制用户无需单独部署静态文件。仓库中同目录的web_external.go对应external_web构建标签下的外部托管模式可作为了解 embed 与外部模式差异的切入点。二、本地开发环境搭建开始 UI 开发前需要先安装 Node.js 与 pnpm具体步骤见 docs/docs/92-development/01-getting-started.md 中的 “Install Node.js pnpm” 一节。文档同时建议使用 VS Code并配合仓库推荐的插件配置获得自动格式化、lint 与类型检查能力。依赖安装与基础命令cd web/ pnpm install之后即可使用 web/package.json 中定义的脚本命令作用pnpm start启动 Vite 开发服务器默认端口 8010支持热更新pnpm build生产构建vite build --base/BASE_PATHpnpm serve预览生产构建产物vite previewpnpm lintESLint 检查--max-warnings 0零警告容忍pnpm format/pnpm format:checkPrettier 格式化 / 检查pnpm typecheckvue-tsc --noEmit类型检查pnpm testVitest 单元测试三、Dev 代理免重建的热更新调试这是 UI 开发流程中最重要的机制。官方文档的核心痛点在于直接改代码测试 UI 需要每次pnpm build并重启 Woodpecker server成本极高。为此Woodpecker server 内置了一个dev-proxy它会把所有非 API 请求转发到一个独立的 HTTP 服务器由后者专门托管 UI 文件。整体工作流如下在web/目录启动带热更新的 UI 开发服务器pnpm startVite 默认监听127.0.0.1:8010见 web/vite.config.ts 的server.port配置。在项目根目录.env文件中启用服务端 Dev 代理WOODPECKER_DEV_WWW_PROXYhttp://localhost:8010按 docs/docs/92-development/01-getting-started.md 中的 “Debugging Woodpecker” 一节启动 Woodpecker server推荐用 VS Code 的 “Woodpecker CI” 调试配置同时启动 UI、server 与 agent然后访问http://localhost:8000。此时对 UI 代码的任何修改都会立即热更新到浏览器无需重建、无需重启 server。.env中一个常见的完整调试配置还包含WOODPECKER_OPENtrue、WOODPECKER_ADMIN、WOODPECKER_HOST、forge 的 OAuth 配置以及 agent 相关变量可参考 01-getting-started.md 的示例。源码级原理Dev 代理如何工作WOODPECKER_DEV_WWW_PROXY对应的 CLI 标志定义在 cmd/server/flags.gocli.StringFlag{ Sources: cli.EnvVars(WOODPECKER_DEV_WWW_PROXY), Name: www-proxy, Usage: serve the website by using a proxy (used for development), Hidden: true, },该标志属于隐藏的开发专用配置。在 cmd/server/server.go 中服务端会根据该值决定托管方式若为空则使用web.New()内嵌的静态资源引擎若配置了代理地址则创建一个httputil.ReverseProxy把请求原样转发到 Vite 开发服务器并附加X-Forwarded-Host与X-Origin-Host请求头保证代理链路上 Host 信息正确origin, _ : url.Parse(proxyWebUI) director : func(req *http.Request) { req.Header.Add(X-Forwarded-Host, req.Host) req.Header.Add(X-Origin-Host, origin.Host) req.URL.Scheme origin.Scheme req.URL.Host origin.Host } proxy : httputil.ReverseProxy{Director: director} webUIServe proxy.ServeHTTP如果希望在容器内运行 Vite 开发服务器文档补充说明需要设置VITE_DEV_SERVER_HOST0.0.0.0对应 vite.config.ts 中server.host的读取逻辑否则容器外无法访问。四、对接远程服务器在真实数据上调试本地测试实例的数据通常过于简单。官方文档提供了第二种调试方式让 UI 开发服务器直接代理到一台真实的 Woodpecker 服务器例如https://ci.woodpecker-ci.org从而在更复杂、更接近生产的数据库上验证界面。启动方式是在运行pnpm start前设置两个环境变量VITE_DEV_PROXYhttps://ci.woodpecker-ci.org \ VITE_DEV_USER_SESS_COOKIE浏览器中 user_sess cookie 的值 \ pnpm startVITE_DEV_PROXY远程 Woodpecker 服务器的地址VITE_DEV_USER_SESS_COOKIE浏览器中user_sesscookie 的取值用于在代理请求时带上认证信息。随后打开http://localhost:8010即可访问远程服务器的真实界面。该模式在 web/vite.config.ts 中有完整实现Vite 开发服务器端口 8010为/api与/web-config.js两个路径配置了指向远程服务器的代理并把user_sesscookie值写入代理请求的 Cookie 头/authorize路径同样被代理用于处理 forge 授权跳转。启动时woodpeckerInfoPlugin插件会根据是否配置VITE_DEV_PROXY打印对应的访问提示默认提示你配置WOODPECKER_DEV_WWW_PROXY并启动 server 后访问http://localhost:8000/。五、工具链与编码规范官方文档对 UI 开发中用到的工具与框架给出了明确的使用准则这也是贡献代码时必须遵守的约定Vue 3统一使用script setup与组合式 APIComposition API可复用的组件放在 web/src/components/页面视图位于 web/src/views/并必须在 web/src/router.ts 中注册对应路由。从 router.ts 可以看到视图按功能域组织如Repos.vue、RepoAdd.vue、repo/RepoPipelines.vue、repo/RepoBranches.vue等并通过RouteMeta控制认证与布局。Tailwind CSS优先使用 Tailwind 工具类而非手写 CSS确有需要时扩展 Tailwind 配置类名顺序遵循 prettier 的 tailwind 排序插件仓库通过prettier-plugin-tailwindcss落实。全局样式入口为 web/src/style.css 与 web/src/tailwind.css。Vite构建与开发服务器基础设施作用类似 Webpack。TypeScript禁止使用any与unknown——linter 会直接拦截这类写法保证类型安全。ESLint仓库采用antfu/eslint-config与intlify/eslint-plugin-vue-i18n等规则集pnpm lint以零警告为标准。Volar vue-tsc用于.vue文件的类型检查建议开启 Volar 的 take-over 模式以获得完整 TS 语言服务。六、可复用表单组件体系官方文档专门介绍了表单控件的组织方式所有可复用的表单控件位于 web/src/components/form/。这些控件都被设计为放置在一个InputField内由InputField统一渲染标签label、可选的描述description与文档链接docs link并把控件需要绑定的id通过插槽下发给内部输入元素。典型用法来自官方文档InputField :label$t(some.label) template #default{ id } TextField :idid v-modelvalue / /template template #description {{ $t(some.description) }} /template /InputField查看 web/src/components/form/InputField.vue 的源码可以验证其实现细节它通过Math.random()生成唯一id并通过作用域插槽slot :idid下发标签使用text-wp-text-100 font-bold等 Tailwind 类当传入docsUrl时还会渲染一个DocsLink组件位于web/src/components/atomic/DocsLink.vue把相关文档链接直接展示在表单标题旁。控件家族分为两类单值控件TextField文本、NumberField数字、Checkbox复选、SelectField下拉选择、RadioField单选集合编辑器ListEditor——字符串列表编辑例如插件镜像列表、用户名列表KeyValueEditor——Recordstring, string键值对编辑例如环境变量。这两类编辑器在 form 目录 下均有对应实现ListEditor.vue、KeyValueEditor.vueListEditor.test.ts还提供了单元测试并配有 web/src/components/form/form.types.ts 定义的选择项类型export interface SelectOption { value: string; text: string; description?: string; }七、国际化与翻译协作Woodpecker UI 使用 Vue I18n当前仓库包含en.json以及zh-Hans、zh-Hant、de、fr、ja、ru等数十种语言文件。官方文档明确的协作规范如下新增翻译必须写入英文源文件web/src/assets/locales/en.json英文源文件会被自动同步到 WeblateWoodpecker 使用的社区翻译平台其他语言由社区基于英文源翻译PR 中只允许提交英文翻译不得附带其他语言的译文——否则当社区翻译尚未合并进主干时Weblate 与 Git 容易产生冲突。构建侧web/vite.config.ts 通过VueI18nPlugin打包 locales 目录并注册了一个虚拟模块virtual:vue-i18n-supported-locales动态生成支持的语言列表供运行时切换语言使用。更完整的翻译流程说明见 docs/docs/92-development/08-translations.md。八、测试与质量保障虽然官方 UI 文档未展开测试细节但 web/package.json 与 web/vite.config.ts 明确配置了 UI 测试栈可作为开发的补充实践单元测试pnpm test运行 Vitest配置为globals: true、environment: jsdom配合vue/test-utils渲染与断言组件行为如ListEditor.test.ts类型检查pnpm typecheckvue-tsc --noEmit是 CI 与本地开发的双重保障静态检查pnpm lint与pnpm format:check保证代码风格与 i18n 规范一致。整体来看Woodpecker UI 的开发链路已经相当完备以 Vue 3 TypeScript Tailwind Vite 为基础通过内置 Dev 代理实现“改 UI 不重启 server”的高效迭代用统一的表单组件与国际化流程保证多语言社区的协作质量最后以 go:embed 将产物无缝集成进单一 server 二进制。对任何希望深度定制或贡献 Woodpecker 前端的开发者而言本文覆盖的链路足以支撑从零开始搭建到完成功能开发的全过程。赞分享CI/CDDevOps【免费下载链接】woodpeckerWoodpecker is a simple, yet powerful CI/CD engine with great extensibility.项目地址https://gitcode.com/gh_mirrors/wo/woodpecker点击查看免费下载相关推荐OptiScaler把游戏里的 DLSS 换成 FSR3 或 XeSS跨显卡超分与帧生成一步到位OptiScaler把游戏里的 DLSS 换成 FSR3 或 XeSS跨显卡超分与帧生成一步到位 打开一款只带 DLSS 的 DX12 游戏按 Inser图形学游戏开发JoyAI-Echo实战教程如何编写故事提示JSON生成连贯多镜头视频JoyAI Echo实战教程如何编写故事提示JSON生成连贯多镜头视频 想要体验AI视频生成的黑科技吗 JoyAI Echo作为一款革命性的分钟级多镜头人工智能大模型媒体生成多模态Pinpoint Web 前端 i18n 国际化开发规范i18next 架构、翻译键管理与多语言实现指南Pinpoint Web 前端 i18n 国际化开发规范i18next 架构、翻译键管理与多语言实现指南 导读 本文基于 Pinpoint 仓库中 Web 前后端可观测性APM链路追踪微服务创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Woodpecker UI 开发实战：Vue 3 前端架构、Dev 代理热更新与组件/国际化规范
CI/CDDevOps【免费下载链接】woodpeckerWoodpecker is a simple, yet powerful CI/CD engine with great extensibility.项目地址https://gitcode.com/gh_mirrors/wo/woodpecker点击查看免费下载本篇技术指南以 Woodpecker 官方开发文档 docs/docs/92-development/03-ui.md 为核心骨架结合仓库内web/前端源码、vite.config.ts构建配置与cmd/server服务端实现完整讲解如何搭建 UI 开发环境、利用内置 Dev 代理实现免重建的热更新调试、对接远程服务器真实数据以及表单组件、国际化翻译等开发规范。读完本文你将掌握一套可直接落地的 Woodpecker UI 二次开发工作流。一、UI 技术栈与整体架构Woodpecker 的 Web 界面是一个基于 Vue 3 文件夹内。从 web/package.json 可以确认当前 UI 的核心依赖与版本框架vue^3.5、vue-router^5.0、pinia^4.0状态管理、vue-i18n^11.3国际化样式tailwindcss^4.2及tailwindcss/vite、tailwindcss/typography构建vite^8.0、vite-plugin-vue、vite-svg-loader、vite-plugin-prismjs质量typescript6.0、vue-tsc、eslint、prettier、vitest测试运行时要求Node.js20包管理器为pnpmpackageManager: pnpm12.4.1前端入口 web/src/main.ts 展示了应用的装配顺序创建 Vue 应用实例后依次挂载router路由、notifications通知、i18n国际化与createPinia()状态管理最后挂载到#app。路由定义集中在 web/src/router.ts采用懒加载import()方式按需加载各视图组件并通过RouteMeta如authentication、repoHeader、layout声明路由级权限与布局信息。生产构建go:embed 集成官方文档指出生产构建时生成的 UI 代码会通过 go-embed 中有直接体现//go:embed all:dist/* var webFiles embed.FS func HTTPFS() (http.FileSystem, error) { httpFS, err : fs.Sub(webFiles, dist) ... }即先执行pnpm buildvite build --base/BASE_PATH把产物输出到web/dist/再通过 Go 的embed指令把静态资源打包进 server 二进制用户无需单独部署静态文件。仓库中同目录的web_external.go对应external_web构建标签下的外部托管模式可作为了解 embed 与外部模式差异的切入点。二、本地开发环境搭建开始 UI 开发前需要先安装 Node.js 与 pnpm具体步骤见 docs/docs/92-development/01-getting-started.md 中的 “Install Node.js pnpm” 一节。文档同时建议使用 VS Code并配合仓库推荐的插件配置获得自动格式化、lint 与类型检查能力。依赖安装与基础命令cd web/ pnpm install之后即可使用 web/package.json 中定义的脚本命令作用pnpm start启动 Vite 开发服务器默认端口 8010支持热更新pnpm build生产构建vite build --base/BASE_PATHpnpm serve预览生产构建产物vite previewpnpm lintESLint 检查--max-warnings 0零警告容忍pnpm format/pnpm format:checkPrettier 格式化 / 检查pnpm typecheckvue-tsc --noEmit类型检查pnpm testVitest 单元测试三、Dev 代理免重建的热更新调试这是 UI 开发流程中最重要的机制。官方文档的核心痛点在于直接改代码测试 UI 需要每次pnpm build并重启 Woodpecker server成本极高。为此Woodpecker server 内置了一个dev-proxy它会把所有非 API 请求转发到一个独立的 HTTP 服务器由后者专门托管 UI 文件。整体工作流如下在web/目录启动带热更新的 UI 开发服务器pnpm startVite 默认监听127.0.0.1:8010见 web/vite.config.ts 的server.port配置。在项目根目录.env文件中启用服务端 Dev 代理WOODPECKER_DEV_WWW_PROXYhttp://localhost:8010按 docs/docs/92-development/01-getting-started.md 中的 “Debugging Woodpecker” 一节启动 Woodpecker server推荐用 VS Code 的 “Woodpecker CI” 调试配置同时启动 UI、server 与 agent然后访问http://localhost:8000。此时对 UI 代码的任何修改都会立即热更新到浏览器无需重建、无需重启 server。.env中一个常见的完整调试配置还包含WOODPECKER_OPENtrue、WOODPECKER_ADMIN、WOODPECKER_HOST、forge 的 OAuth 配置以及 agent 相关变量可参考 01-getting-started.md 的示例。源码级原理Dev 代理如何工作WOODPECKER_DEV_WWW_PROXY对应的 CLI 标志定义在 cmd/server/flags.gocli.StringFlag{ Sources: cli.EnvVars(WOODPECKER_DEV_WWW_PROXY), Name: www-proxy, Usage: serve the website by using a proxy (used for development), Hidden: true, },该标志属于隐藏的开发专用配置。在 cmd/server/server.go 中服务端会根据该值决定托管方式若为空则使用web.New()内嵌的静态资源引擎若配置了代理地址则创建一个httputil.ReverseProxy把请求原样转发到 Vite 开发服务器并附加X-Forwarded-Host与X-Origin-Host请求头保证代理链路上 Host 信息正确origin, _ : url.Parse(proxyWebUI) director : func(req *http.Request) { req.Header.Add(X-Forwarded-Host, req.Host) req.Header.Add(X-Origin-Host, origin.Host) req.URL.Scheme origin.Scheme req.URL.Host origin.Host } proxy : httputil.ReverseProxy{Director: director} webUIServe proxy.ServeHTTP如果希望在容器内运行 Vite 开发服务器文档补充说明需要设置VITE_DEV_SERVER_HOST0.0.0.0对应 vite.config.ts 中server.host的读取逻辑否则容器外无法访问。四、对接远程服务器在真实数据上调试本地测试实例的数据通常过于简单。官方文档提供了第二种调试方式让 UI 开发服务器直接代理到一台真实的 Woodpecker 服务器例如https://ci.woodpecker-ci.org从而在更复杂、更接近生产的数据库上验证界面。启动方式是在运行pnpm start前设置两个环境变量VITE_DEV_PROXYhttps://ci.woodpecker-ci.org \ VITE_DEV_USER_SESS_COOKIE浏览器中 user_sess cookie 的值 \ pnpm startVITE_DEV_PROXY远程 Woodpecker 服务器的地址VITE_DEV_USER_SESS_COOKIE浏览器中user_sesscookie 的取值用于在代理请求时带上认证信息。随后打开http://localhost:8010即可访问远程服务器的真实界面。该模式在 web/vite.config.ts 中有完整实现Vite 开发服务器端口 8010为/api与/web-config.js两个路径配置了指向远程服务器的代理并把user_sesscookie值写入代理请求的 Cookie 头/authorize路径同样被代理用于处理 forge 授权跳转。启动时woodpeckerInfoPlugin插件会根据是否配置VITE_DEV_PROXY打印对应的访问提示默认提示你配置WOODPECKER_DEV_WWW_PROXY并启动 server 后访问http://localhost:8000/。五、工具链与编码规范官方文档对 UI 开发中用到的工具与框架给出了明确的使用准则这也是贡献代码时必须遵守的约定Vue 3统一使用script setup与组合式 APIComposition API可复用的组件放在 web/src/components/页面视图位于 web/src/views/并必须在 web/src/router.ts 中注册对应路由。从 router.ts 可以看到视图按功能域组织如Repos.vue、RepoAdd.vue、repo/RepoPipelines.vue、repo/RepoBranches.vue等并通过RouteMeta控制认证与布局。Tailwind CSS优先使用 Tailwind 工具类而非手写 CSS确有需要时扩展 Tailwind 配置类名顺序遵循 prettier 的 tailwind 排序插件仓库通过prettier-plugin-tailwindcss落实。全局样式入口为 web/src/style.css 与 web/src/tailwind.css。Vite构建与开发服务器基础设施作用类似 Webpack。TypeScript禁止使用any与unknown——linter 会直接拦截这类写法保证类型安全。ESLint仓库采用antfu/eslint-config与intlify/eslint-plugin-vue-i18n等规则集pnpm lint以零警告为标准。Volar vue-tsc用于.vue文件的类型检查建议开启 Volar 的 take-over 模式以获得完整 TS 语言服务。六、可复用表单组件体系官方文档专门介绍了表单控件的组织方式所有可复用的表单控件位于 web/src/components/form/。这些控件都被设计为放置在一个InputField内由InputField统一渲染标签label、可选的描述description与文档链接docs link并把控件需要绑定的id通过插槽下发给内部输入元素。典型用法来自官方文档InputField :label$t(some.label) template #default{ id } TextField :idid v-modelvalue / /template template #description {{ $t(some.description) }} /template /InputField查看 web/src/components/form/InputField.vue 的源码可以验证其实现细节它通过Math.random()生成唯一id并通过作用域插槽slot :idid下发标签使用text-wp-text-100 font-bold等 Tailwind 类当传入docsUrl时还会渲染一个DocsLink组件位于web/src/components/atomic/DocsLink.vue把相关文档链接直接展示在表单标题旁。控件家族分为两类单值控件TextField文本、NumberField数字、Checkbox复选、SelectField下拉选择、RadioField单选集合编辑器ListEditor——字符串列表编辑例如插件镜像列表、用户名列表KeyValueEditor——Recordstring, string键值对编辑例如环境变量。这两类编辑器在 form 目录 下均有对应实现ListEditor.vue、KeyValueEditor.vueListEditor.test.ts还提供了单元测试并配有 web/src/components/form/form.types.ts 定义的选择项类型export interface SelectOption { value: string; text: string; description?: string; }七、国际化与翻译协作Woodpecker UI 使用 Vue I18n当前仓库包含en.json以及zh-Hans、zh-Hant、de、fr、ja、ru等数十种语言文件。官方文档明确的协作规范如下新增翻译必须写入英文源文件web/src/assets/locales/en.json英文源文件会被自动同步到 WeblateWoodpecker 使用的社区翻译平台其他语言由社区基于英文源翻译PR 中只允许提交英文翻译不得附带其他语言的译文——否则当社区翻译尚未合并进主干时Weblate 与 Git 容易产生冲突。构建侧web/vite.config.ts 通过VueI18nPlugin打包 locales 目录并注册了一个虚拟模块virtual:vue-i18n-supported-locales动态生成支持的语言列表供运行时切换语言使用。更完整的翻译流程说明见 docs/docs/92-development/08-translations.md。八、测试与质量保障虽然官方 UI 文档未展开测试细节但 web/package.json 与 web/vite.config.ts 明确配置了 UI 测试栈可作为开发的补充实践单元测试pnpm test运行 Vitest配置为globals: true、environment: jsdom配合vue/test-utils渲染与断言组件行为如ListEditor.test.ts类型检查pnpm typecheckvue-tsc --noEmit是 CI 与本地开发的双重保障静态检查pnpm lint与pnpm format:check保证代码风格与 i18n 规范一致。整体来看Woodpecker UI 的开发链路已经相当完备以 Vue 3 TypeScript Tailwind Vite 为基础通过内置 Dev 代理实现“改 UI 不重启 server”的高效迭代用统一的表单组件与国际化流程保证多语言社区的协作质量最后以 go:embed 将产物无缝集成进单一 server 二进制。对任何希望深度定制或贡献 Woodpecker 前端的开发者而言本文覆盖的链路足以支撑从零开始搭建到完成功能开发的全过程。赞分享CI/CDDevOps【免费下载链接】woodpeckerWoodpecker is a simple, yet powerful CI/CD engine with great extensibility.项目地址https://gitcode.com/gh_mirrors/wo/woodpecker点击查看免费下载相关推荐OptiScaler把游戏里的 DLSS 换成 FSR3 或 XeSS跨显卡超分与帧生成一步到位OptiScaler把游戏里的 DLSS 换成 FSR3 或 XeSS跨显卡超分与帧生成一步到位 打开一款只带 DLSS 的 DX12 游戏按 Inser图形学游戏开发JoyAI-Echo实战教程如何编写故事提示JSON生成连贯多镜头视频JoyAI Echo实战教程如何编写故事提示JSON生成连贯多镜头视频 想要体验AI视频生成的黑科技吗 JoyAI Echo作为一款革命性的分钟级多镜头人工智能大模型媒体生成多模态Pinpoint Web 前端 i18n 国际化开发规范i18next 架构、翻译键管理与多语言实现指南Pinpoint Web 前端 i18n 国际化开发规范i18next 架构、翻译键管理与多语言实现指南 导读 本文基于 Pinpoint 仓库中 Web 前后端可观测性APM链路追踪微服务创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考