项目结构 #

src/
├── components/        # 可复用组件
│   ├── ui/           # 基础 UI 组件
│   │   ├── Button.tsx
│   │   ├── Input.tsx
│   │   └── Modal.tsx
│   └── layout/       # 布局组件
│       ├── Header.tsx
│       ├── Footer.tsx
│       └── Sidebar.tsx
├── pages/            # 页面组件
│   ├── Home.tsx
│   └── About.tsx
├── hooks/            # 自定义 Hooks
│   ├── useAuth.ts
│   └── useTheme.ts
├── stores/           # 状态管理
│   ├── userStore.ts
│   └── cartStore.ts
├── services/         # API 服务
│   ├── api.ts
│   └── auth.ts
├── utils/            # 工具函数
│   ├── format.ts
│   └── validation.ts
├── types/            # TypeScript 类型
│   └── index.ts
├── styles/           # 全局样式
│   └── global.css
├── App.tsx           # 根组件
└── index.tsx         # 入口文件

src/
├── routes/           # 路由页面
│   ├── index.tsx
│   ├── about.tsx
│   └── blog/
│       ├── index.tsx
│       └── [slug].tsx
├── components/       # 组件
├── server/           # 服务端代码
├── entry-client.tsx  # 客户端入口
├── entry-server.tsx  # 服务端入口
└── root.tsx          # 根组件

components/
├── Button/
│   ├── Button.tsx      # 组件实现
│   ├── Button.test.tsx # 测试文件
│   ├── Button.module.css # 样式
│   └── index.ts        # 导出

// components/Button/index.ts
export { Button } from './Button';
export type { ButtonProps } from './Button';

// stores/userStore.ts
import { createSignal } from 'solid-js';

const [user, setUser] = createSignal(null);

export const userStore = {
  user,
  login: async (credentials) => { /* ... */ },
  logout: () => setUser(null)
};