Files
upage-git/upage/contributing/code-standards.html
2025-09-29 03:02:50 +00:00

121 lines
29 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="zh-Hans" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-contributing/code-standards" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v3.9.0">
<title data-rh="true">代码规范 | UPage 文档</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://halo-dev.github.io/upage/img/social-card.png"><meta data-rh="true" name="twitter:image" content="https://halo-dev.github.io/upage/img/social-card.png"><meta data-rh="true" property="og:url" content="https://halo-dev.github.io/upage/contributing/code-standards"><meta data-rh="true" property="og:locale" content="zh_Hans"><meta data-rh="true" name="docusaurus_locale" content="zh-Hans"><meta data-rh="true" name="docsearch:language" content="zh-Hans"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="代码规范 | UPage 文档"><meta data-rh="true" name="description" content="UPage 项目遵循严格的代码规范和最佳实践,以确保代码质量和一致性。本文档概述了这些规范,所有贡献者在提交代码前应确保遵循这些规范。"><meta data-rh="true" property="og:description" content="UPage 项目遵循严格的代码规范和最佳实践,以确保代码质量和一致性。本文档概述了这些规范,所有贡献者在提交代码前应确保遵循这些规范。"><link data-rh="true" rel="icon" href="/upage/../public/favicon.svg"><link data-rh="true" rel="canonical" href="https://halo-dev.github.io/upage/contributing/code-standards"><link data-rh="true" rel="alternate" href="https://halo-dev.github.io/upage/contributing/code-standards" hreflang="zh-Hans"><link data-rh="true" rel="alternate" href="https://halo-dev.github.io/upage/contributing/code-standards" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"贡献指南","item":"https://halo-dev.github.io/upage/contributing"},{"@type":"ListItem","position":2,"name":"代码规范","item":"https://halo-dev.github.io/upage/contributing/code-standards"}]}</script><link rel="stylesheet" href="/upage/assets/css/styles.8ea0c4aa.css">
<script src="/upage/assets/js/runtime~main.8350f77c.js" defer="defer"></script>
<script src="/upage/assets/js/main.648541e0.js" defer="defer"></script>
</head>
<body class="navigation-with-keyboard">
<svg style="display: none;"><defs>
<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
</defs></svg>
<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="跳到主要内容"><a class="skipToContent_SnWU" href="#__docusaurus_skipToContent_fallback">跳到主要内容</a></div><nav aria-label="主导航" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="切换导航栏" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/upage/"><div class="navbar__logo"><img src="/upage/img/logo.svg" alt="UPage Logo" class="themedComponent_PxYp themedComponent--light_BsnN"><img src="/upage/img/logo.svg" alt="UPage Logo" class="themedComponent_PxYp themedComponent--dark_P6BI"></div><b class="navbar__title text--truncate">UPage</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/upage/">使用文档</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/halo-dev/upage" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_xtnk"><use href="#theme-svg-external-link"></use></svg></a><div class="toggle_crTl colorModeToggle_eWi8"><button class="clean-btn toggleButton_BQDk toggleButtonDisabled_lECB" type="button" disabled="" title="system mode" aria-label="切换浅色/暗黑模式当前为system mode"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_KZAc lightToggleIcon_LT1z"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_KZAc darkToggleIcon_fJCx"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_KZAc systemToggleIcon_m6ZP"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer_GyVn"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_fO6_"><div class="docsWrapper_G3eT"><button aria-label="回到顶部" class="clean-btn theme-back-to-top-button backToTopButton_nMBz" type="button"></button><div class="docRoot_iPwj"><aside class="theme-doc-sidebar-container docSidebarContainer_Yovm"><div class="sidebarViewport_e1um"><div class="sidebar_xcav"><nav aria-label="文档侧边栏" class="menu thin-scrollbar menu_EjuG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/upage/"><span title="首页" class="linkLabel_fmgc">首页</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/upage/quick-start"><span title="快速开始" class="linkLabel_fmgc">快速开始</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink__DnE menu__link menu__link--sublist" href="/upage/deployment-guide"><span title="部署指南" class="categoryLinkLabel_rUKM">部署指南</span></a><button aria-label="展开侧边栏分类 &#x27;部署指南&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/upage/configuration"><span title="配置参考" class="linkLabel_fmgc">配置参考</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink__DnE menu__link menu__link--sublist" href="/upage/user-guide"><span title="用户指南" class="categoryLinkLabel_rUKM">用户指南</span></a><button aria-label="展开侧边栏分类 &#x27;用户指南&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink__DnE menu__link menu__link--sublist menu__link--active" href="/upage/contributing"><span title="贡献指南" class="categoryLinkLabel_rUKM">贡献指南</span></a><button aria-label="折叠侧边栏分类 &#x27;贡献指南&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/upage/contributing/code-of-conduct"><span title="行为准则" class="linkLabel_fmgc">行为准则</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/upage/contributing/ways-to-contribute"><span title="贡献方式" class="linkLabel_fmgc">贡献方式</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/upage/contributing/development-setup"><span title="开发环境设置" class="linkLabel_fmgc">开发环境设置</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/upage/contributing/code-standards"><span title="代码规范" class="linkLabel_fmgc">代码规范</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/upage/contributing/workflow"><span title="工作流程" class="linkLabel_fmgc">工作流程</span></a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/upage/faq"><span title="常见问题" class="linkLabel_fmgc">常见问题</span></a></li></ul></nav></div></div></aside><main class="docMainContainer_WqOS"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_s9lu"><div class="docItemContainer_Wij8"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_dPwh" aria-label="页面路径"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="主页面" class="breadcrumbs__link" href="/upage/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_xzA8"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/upage/contributing"><span>贡献指南</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">代码规范</span></li></ul></nav><div class="tocCollapsible_S5VF theme-doc-toc-mobile tocMobile_gigA"><button type="button" class="clean-btn tocCollapsibleButton_wmrO">本页总览</button></div><div class="theme-doc-markdown markdown"><header><h1>代码规范</h1></header>
<p>UPage 项目遵循严格的代码规范和最佳实践,以确保代码质量和一致性。本文档概述了这些规范,所有贡献者在提交代码前应确保遵循这些规范。</p>
<h2 class="anchor anchorWithStickyNavbar_hmm4" id="javascripttypescript-规范">JavaScript/TypeScript 规范<a href="#javascripttypescript-规范" class="hash-link" aria-label="JavaScript/TypeScript 规范的直接链接" title="JavaScript/TypeScript 规范的直接链接" translate="no"></a></h2>
<p>UPage 使用 <a href="https://biomejs.dev/" target="_blank" rel="noopener noreferrer">Biome</a> 进行代码格式化和 linting。Biome 是一个快速的代码格式化工具和 linter可以帮助我们保持代码风格的一致性。</p>
<h3 class="anchor anchorWithStickyNavbar_hmm4" id="代码检查">代码检查<a href="#代码检查" class="hash-link" aria-label="代码检查的直接链接" title="代码检查的直接链接" translate="no"></a></h3>
<p>在提交代码前,请确保您的代码符合项目的代码规范:</p>
<div class="language-bash codeBlockContainer_tLQ_ theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HMSW"><pre tabindex="0" class="prism-code language-bash codeBlock_HMKa thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tPUF"><span class="token-line" style="color:#393A34"><span class="token plain">pnpm check</span><br></span></code></pre></div></div>
<h3 class="anchor anchorWithStickyNavbar_hmm4" id="自动修复">自动修复<a href="#自动修复" class="hash-link" aria-label="自动修复的直接链接" title="自动修复的直接链接" translate="no"></a></h3>
<p>您也可以使用以下命令自动修复格式问题:</p>
<div class="language-bash codeBlockContainer_tLQ_ theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HMSW"><pre tabindex="0" class="prism-code language-bash codeBlock_HMKa thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tPUF"><span class="token-line" style="color:#393A34"><span class="token plain">pnpm check --write</span><br></span></code></pre></div></div>
<h3 class="anchor anchorWithStickyNavbar_hmm4" id="主要规范">主要规范<a href="#主要规范" class="hash-link" aria-label="主要规范的直接链接" title="主要规范的直接链接" translate="no"></a></h3>
<ul>
<li><strong>缩进</strong>: 使用 2 个空格</li>
<li><strong>分号</strong>: 必须使用分号</li>
<li><strong>引号</strong>: 使用单引号</li>
<li><strong>命名约定</strong>:<!-- -->
<ul>
<li>变量和函数使用 camelCase</li>
<li>类和接口使用 PascalCase</li>
<li>常量使用 UPPER_SNAKE_CASE</li>
</ul>
</li>
<li><strong>类型注解</strong>: 尽可能使用类型注解提高代码可读性和类型安全性</li>
<li><strong>注释</strong>: 对复杂逻辑和公共 API 添加适当的注释</li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_hmm4" id="git-提交规范">Git 提交规范<a href="#git-提交规范" class="hash-link" aria-label="Git 提交规范的直接链接" title="Git 提交规范的直接链接" translate="no"></a></h2>
<p>我们使用 <a href="https://www.conventionalcommits.org/" target="_blank" rel="noopener noreferrer">Conventional Commits</a> 规范来格式化 Git 提交信息。提交信息应遵循以下格式:</p>
<div class="language-text codeBlockContainer_tLQ_ theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HMSW"><pre tabindex="0" class="prism-code language-text codeBlock_HMKa thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tPUF"><span class="token-line" style="color:#393A34"><span class="token plain">&lt;type&gt;(&lt;scope&gt;): &lt;description&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">[optional body]</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">[optional footer(s)]</span><br></span></code></pre></div></div>
<h3 class="anchor anchorWithStickyNavbar_hmm4" id="类型-type">类型 (Type)<a href="#类型-type" class="hash-link" aria-label="类型 (Type)的直接链接" title="类型 (Type)的直接链接" translate="no"></a></h3>
<p>提交类型必须是以下之一:</p>
<ul>
<li><code>feat</code>: 新功能</li>
<li><code>fix</code>: 修复 bug</li>
<li><code>docs</code>: 文档更新</li>
<li><code>style</code>: 代码风格更改(不影响代码功能)</li>
<li><code>refactor</code>: 代码重构(既不是新功能,也不是修复 bug</li>
<li><code>perf</code>: 性能优化</li>
<li><code>test</code>: 添加或修改测试</li>
<li><code>chore</code>: 构建过程或辅助工具的变动</li>
<li><code>ci</code>: CI 配置文件和脚本的更改</li>
<li><code>revert</code>: 回滚之前的提交</li>
</ul>
<h3 class="anchor anchorWithStickyNavbar_hmm4" id="范围-scope">范围 (Scope)<a href="#范围-scope" class="hash-link" aria-label="范围 (Scope)的直接链接" title="范围 (Scope)的直接链接" translate="no"></a></h3>
<p>范围是可选的,用于指定更改的范围(例如组件或文件名)。</p>
<h3 class="anchor anchorWithStickyNavbar_hmm4" id="描述-description">描述 (Description)<a href="#描述-description" class="hash-link" aria-label="描述 (Description)的直接链接" title="描述 (Description)的直接链接" translate="no"></a></h3>
<p>描述是对更改的简短摘要:</p>
<ul>
<li>使用现在时态(&quot;change&quot;,而不是&quot;changed&quot;&quot;changes&quot;</li>
<li>不要首字母大写</li>
<li>不要以句号结尾</li>
</ul>
<h3 class="anchor anchorWithStickyNavbar_hmm4" id="示例">示例<a href="#示例" class="hash-link" aria-label="示例的直接链接" title="示例的直接链接" translate="no"></a></h3>
<div class="language-text codeBlockContainer_tLQ_ theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HMSW"><pre tabindex="0" class="prism-code language-text codeBlock_HMKa thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tPUF"><span class="token-line" style="color:#393A34"><span class="token plain">feat(editor): 添加拖拽调整组件大小功能</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">添加了一个新的拖拽句柄,允许用户直接调整组件的大小。</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">同时优化了调整过程中的性能。</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Closes #123</span><br></span></code></pre></div></div>
<div class="language-text codeBlockContainer_tLQ_ theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_HMSW"><pre tabindex="0" class="prism-code language-text codeBlock_HMKa thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_tPUF"><span class="token-line" style="color:#393A34"><span class="token plain">fix: 修复用户认证失败问题</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">修复了当用户凭证包含特殊字符时认证失败的问题。</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Fixes #456</span><br></span></code></pre></div></div>
<h2 class="anchor anchorWithStickyNavbar_hmm4" id="cssscss-规范">CSS/SCSS 规范<a href="#cssscss-规范" class="hash-link" aria-label="CSS/SCSS 规范的直接链接" title="CSS/SCSS 规范的直接链接" translate="no"></a></h2>
<p>UPage 使用 SCSS 和 CSS Modules 来组织样式代码。</p>
<h3 class="anchor anchorWithStickyNavbar_hmm4" id="命名约定">命名约定<a href="#命名约定" class="hash-link" aria-label="命名约定的直接链接" title="命名约定的直接链接" translate="no"></a></h3>
<ul>
<li>使用 kebab-case 命名 CSS 类和 ID</li>
<li>使用有意义的名称,避免过于简短或抽象的名称</li>
<li>使用 BEMBlock Element Modifier命名方法论</li>
</ul>
<h3 class="anchor anchorWithStickyNavbar_hmm4" id="组织结构">组织结构<a href="#组织结构" class="hash-link" aria-label="组织结构的直接链接" title="组织结构的直接链接" translate="no"></a></h3>
<ul>
<li>将全局样式放在 <code>app/styles</code> 目录下</li>
<li>将组件特定样式放在组件同级目录下的 <code>.scss</code><code>.module.scss</code> 文件中</li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_hmm4" id="可访问性标准">可访问性标准<a href="#可访问性标准" class="hash-link" aria-label="可访问性标准的直接链接" title="可访问性标准的直接链接" translate="no"></a></h2>
<p>UPage 致力于创建可访问的 Web 应用程序。所有贡献的代码应遵循 <a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">WCAG 2.1 AA</a> 标准。</p>
<ul>
<li>确保适当的颜色对比度</li>
<li>提供替代文本和 ARIA 标签</li>
<li>确保键盘导航功能</li>
<li>支持屏幕阅读器</li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_hmm4" id="测试规范">测试规范<a href="#测试规范" class="hash-link" aria-label="测试规范的直接链接" title="测试规范的直接链接" translate="no"></a></h2>
<p>所有新功能和 bug 修复应包含适当的测试:</p>
<ul>
<li><strong>单元测试</strong>: 测试单个函数和组件</li>
<li><strong>集成测试</strong>: 测试多个组件或功能的交互</li>
<li><strong>端到端测试</strong>: 测试完整的用户流程</li>
</ul>
<p>测试应该:</p>
<ul>
<li>覆盖正常和边缘情况</li>
<li>清晰描述测试的目的</li>
<li>保持独立性,不依赖于其他测试的状态</li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_hmm4" id="性能考虑">性能考虑<a href="#性能考虑" class="hash-link" aria-label="性能考虑的直接链接" title="性能考虑的直接链接" translate="no"></a></h2>
<p>贡献的代码应考虑性能影响:</p>
<ul>
<li>避免不必要的重新渲染</li>
<li>优化大型列表和表格</li>
<li>懒加载大型资源</li>
<li>减少网络请求</li>
<li>优化打包大小</li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_hmm4" id="安全最佳实践">安全最佳实践<a href="#安全最佳实践" class="hash-link" aria-label="安全最佳实践的直接链接" title="安全最佳实践的直接链接" translate="no"></a></h2>
<p>所有代码应遵循安全最佳实践:</p>
<ul>
<li>防止 XSS 攻击</li>
<li>避免 SQL 注入</li>
<li>正确处理用户输入</li>
<li>保护敏感数据</li>
<li>实施适当的访问控制</li>
</ul></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col"><a href="https://github.com/halo-dev/upage/edit/main/docs/content/content/contributing/code-standards.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit__ZHw" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>编辑此页</a></div><div class="col lastUpdated_CpfT"></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="文件选项卡"><a class="pagination-nav__link pagination-nav__link--prev" href="/upage/contributing/development-setup"><div class="pagination-nav__sublabel">上一页</div><div class="pagination-nav__label">开发环境设置</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/upage/contributing/workflow"><div class="pagination-nav__sublabel">下一页</div><div class="pagination-nav__label">工作流程</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_dKl6 thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#javascripttypescript-规范" class="table-of-contents__link toc-highlight">JavaScript/TypeScript 规范</a><ul><li><a href="#代码检查" class="table-of-contents__link toc-highlight">代码检查</a></li><li><a href="#自动修复" class="table-of-contents__link toc-highlight">自动修复</a></li><li><a href="#主要规范" class="table-of-contents__link toc-highlight">主要规范</a></li></ul></li><li><a href="#git-提交规范" class="table-of-contents__link toc-highlight">Git 提交规范</a><ul><li><a href="#类型-type" class="table-of-contents__link toc-highlight">类型 (Type)</a></li><li><a href="#范围-scope" class="table-of-contents__link toc-highlight">范围 (Scope)</a></li><li><a href="#描述-description" class="table-of-contents__link toc-highlight">描述 (Description)</a></li><li><a href="#示例" class="table-of-contents__link toc-highlight">示例</a></li></ul></li><li><a href="#cssscss-规范" class="table-of-contents__link toc-highlight">CSS/SCSS 规范</a><ul><li><a href="#命名约定" class="table-of-contents__link toc-highlight">命名约定</a></li><li><a href="#组织结构" class="table-of-contents__link toc-highlight">组织结构</a></li></ul></li><li><a href="#可访问性标准" class="table-of-contents__link toc-highlight">可访问性标准</a></li><li><a href="#测试规范" class="table-of-contents__link toc-highlight">测试规范</a></li><li><a href="#性能考虑" class="table-of-contents__link toc-highlight">性能考虑</a></li><li><a href="#安全最佳实践" class="table-of-contents__link toc-highlight">安全最佳实践</a></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class="footer__title">文档</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/upage/quick-start">快速开始</a></li><li class="footer__item"><a class="footer__link-item" href="/upage/category/deployment-guide">部署指南</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">社区</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/halo-dev/upage/issues" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub Issues<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_xtnk"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://github.com/halo-dev/upage/discussions" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub Discussions<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_xtnk"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">更多</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/halo-dev/upage" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_xtnk"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2025 凌霞软件. Built with Docusaurus.</div></div></div></footer></div>
</body>
</html>