Swift Logo
SwiftAstro + Alpine
About & Guidelines

关于项目与作者

探讨极简工程规范,回归 Web 开发的高效本质。这里包含 Swift 模板的架构设计指引与作者个人介绍。

P

Pony

Author

Passionate Self-taught Software Developer 👋🏼

Decentralized & Web3 Believer · Quant Trading · Crypto Enthusiast

去中心化信仰与 Crypto

坚定的去中心化信仰者(Decentralized Believer),热爱探索与构建 Crypto 生态,深信开放互联的去中心化技术力量。

当前业务:GameFi 与量化交易研究

目前主要深耕于 GameFi 赛道,专注于量化交易策略(Quant Trading Strategy)的建模与研究,探索数字资产市场的运行规律。

持续精进与探索领域

当下正在系统研习算法设计(Algorithm Design)及区块链底层系统架构,坚持自学驱动与实践沉淀。

联系方式与交流

欢迎通过 GitHub 创建 Issue 与我交流。请在 Issue 中清晰注明你的意图、反馈或合作想法,我会定期查阅并回复。

Brand Metaphor & Origin

为什么叫 Swift?—— 雨燕的隐喻

Apodidae · 纯粹速度与轻量

自然界中的雨燕(Swift)是地球上水平飞行速度最快的鸟类之一,冲刺时速可超 110 公里。它们体态极轻、骨骼致密,一生绝大部分时间都在天际自由穿梭,毫无冗余负担。这正是本项目命名的核心隐喻:摒弃庞大迟钝的重型框架运行时,保留最轻巧灵活的架构骨架,赋能开发者享受如雨燕般极速、轻盈与无拘无束的 Web 创造体验。

Swift Bird in Sky - 雨燕在天空中翱翔
展翼翱翔 · 极速突破Apodidae 01
Swift Bird in Nature - 自然界的雨燕
轻巧矫健 · 自由敏捷Apodidae 02
Architecture & Rules

项目设计哲学与开发规范

核心原则

简单的保持简单,复杂的合理拆分。Astro 负责页面渲染与内容架构,Alpine.js 负责动态交互。

01

Alpine.js 交互规范

  • 轻量简单交互:直接使用 HTML 内联 Alpine 指令(如 x-data, x-show, x-on:click),无须额外创建脚本。
  • 多状态与复杂交互:使用 Alpine.data() 抽离业务逻辑至独立 TS 文件,保持模板整洁。
02

状态作用域规范

  • 局部私有状态:仅在当前组件或区块内部起效的状态,优先使用 x-data 管理。
  • 跨页面/跨组件全局状态:使用 Alpine.store(),统一在 src/scripts/alpine.ts 入口中集中注册。
03

命名命名约定

  • Astro 组件与布局:遵循 PascalCase(大驼峰),例如 Navbar.astro、Toaster.astro。
  • TypeScript / JavaScript 模块:遵循 kebab-case(短横线连字符),例如 toaster.ts、api.ts。
04

代码组织与适度抽象

  • 代码归拢:所有 TS 业务代码统一存放于 src/scripts/ 下,按组件与页面分层。
  • 拒绝过度设计:简单组件不必机械式创建配套 TS 文件,按实际复杂度合理拆分。

标准目录结构一览

src/ tree
src/
├── components/          # Astro 页面组件 (Navbar, Footer, Toaster 等)
├── layouts/             # Astro 布局外层 (Layout.astro)
├── pages/               # 静态与路由页面 (index.astro, about.astro)
├── scripts/             # TypeScript 交互与业务逻辑
│   ├── components/      # 组件配套逻辑 (如 toaster.ts)
│   ├── pages/           # 页面专属复杂交互逻辑
│   ├── lib/             # 通用封装 (api.ts, utils.ts 等)
│   └── alpine.ts        # Alpine 全局插件与 Store 统一注册中心
├── icons/               # 本地自定义 SVG 图标
├── images/              # 图片静态资源
└── app.css              # Tailwind CSS v4 与 daisyUI 配置入口