@deepstorm/cli 0.1.0

package/dist/skills/reef-style-frontend/fragments/ts-config/strict/quick-reference.md

@@ -0,0 +1,112 @@
+# TypeScript 严格模式规范
+
+## 概述
+
+启用 TypeScript 严格模式 (`strict: true`)，提供更强的类型安全保障。
+
+## 配置
+
+```json
+// tsconfig.json
+{
+  "compilerOptions": {
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "exactOptionalPropertyTypes": false
+  }
+}
+```
+
+## 核心规则
+
+### strictNullChecks
+
+`null` 和 `undefined` 不可赋值给其他类型：
+
+```typescript
+// ❌ 错误
+const name: string = null;
+
+// ✅ 正确
+const name: string | null = null;
+const value = maybeUndefined(); // string | undefined
+```
+
+### noUncheckedIndexedAccess
+
+对象索引访问返回 `T | undefined`，不可直接使用：
+
+```typescript
+interface Dict {
+  [key: string]: string;
+}
+
+const dict: Dict = { a: "1" };
+
+// ❌ 错误 — dict["b"] 可能是 undefined
+console.log(dict["b"].toString());
+
+// ✅ 正确
+const b = dict["b"];
+if (b) {
+  console.log(b.toString());
+}
+
+// 或用可选链
+console.log(dict["b"]?.toString());
+```
+
+### noImplicitOverride
+
+重写父类方法必须显式标记 `override`：
+
+```typescript
+class Base {
+  save(): void { /* ... */ }
+}
+
+class Derived extends Base {
+  // ❌ 错误 — 缺少 override
+  save(): void { /* ... */ }
+
+  // ✅ 正确
+  override save(): void { /* ... */ }
+}
+```
+
+## 常见场景
+
+### 数组查找
+
+```typescript
+const items: string[] = ["a", "b", "c"];
+
+// ❌ 错误 — find 返回 T | undefined
+const item = items.find(x => x === "d");
+console.log(item.length);
+
+// ✅ 正确
+const item = items.find(x => x === "d");
+if (item) {
+  console.log(item.length);
+}
+```
+
+### 对象属性访问
+
+```typescript
+interface Config {
+  theme?: {
+    color?: string;
+  };
+}
+
+const config: Config = {};
+
+// ❌ 错误 — 深层可选链
+const color: string = config.theme.color;
+
+// ✅ 正确
+const color = config.theme?.color;
+```

package/dist/skills/reef-style-frontend/fragments/ui-lib/primeng/examples/ui-components.md

@@ -0,0 +1,134 @@
+# 前端 UI 组件示例
+
+---
+
+## 1. PrimeNG 使用原则
+
+### Boolean shorthand
+
+PrimeNG 的 boolean 属性传 `true` 时直接用属性名，不用 `[prop]="true"`：
+
+```html
+<!-- ✓ 正确 -->
+<p-dialog [(visible)]="visible" modal (onHide)="onHide()">
+<p-button severity="secondary" outlined loading disabled />
+
+<!-- ✗ 错误 -->
+<p-dialog [(visible)]="visible" [modal]="true">
+```
+
+### CSS Layer 顺序
+
+`styles.css` 中 CSS Layer 顺序：
+
+```css
+@layer theme, base, antd, primeui, primeicons, components, utilities;
+```
+
+### providePrimeNG 全局配置
+
+```typescript
+bootstrapApplication(App, {
+  providers: [
+    providePrimeNG({
+      overlayAppendTo: 'body',
+      zIndex: { modal: 1100, overlay: 1000, menu: 1000, tooltip: 1100 },
+      locale: zhHans(),
+      cssLayer: { name: 'primeui', order: 'theme, base, antd, primeui, primeicons, components, utilities' },
+      theme: { preset: Aura, options: { darkModeSelector: '.dark' } },
+    }),
+  ],
+});
+```
+
+---
+
+## 2. PrimeNG Table 懒加载
+
+```typescript
+@Component({
+  selector: 'app-user-list',
+  imports: [TableModule],
+  templateUrl: './user-list.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UserListComponent {
+  private readonly authService = inject(AuthService);
+
+  readonly users = signal<User[]>([]);
+  readonly totalUsers = signal(0);
+
+  loadUsers(event: TableLazyLoadEvent) {
+    this.authService.listUsers(toPageRequest(event))
+      .subscribe(({ items, totalItems }) => {
+        this.users.set(items);
+        this.totalUsers.set(totalItems);
+      });
+  }
+}
+```
+
+---
+
+## 3. 确认弹窗（删除操作）
+
+```typescript
+@Component({
+  imports: [ConfirmDialog],
+  providers: [ConfirmationService],
+  template: `
+    <p-confirmdialog />
+    <p-button label="删除" (onClick)="onDelete(item.id)" />
+  `,
+})
+export class MyComponent {
+  private readonly confirmationService = inject(ConfirmationService);
+
+  onDelete(id: number) {
+    this.confirmationService.confirm({
+      accept: () => this.itemService.delete(id).subscribe(
+        () => this.messageService.add({ severity: 'success', summary: '删除成功' }),
+      ),
+    });
+  }
+}
+```
+
+---
+
+## 4. Drawer 侧边栏
+
+```typescript
+@Component({
+  template: `
+    <p-drawer
+      styleClass="w-200"
+      [(visible)]="visible"
+      position="right"
+      (onHide)="onHide()"
+    >
+      <ng-template #header>
+        <div class="font-bold text-2xl">标题</div>
+      </ng-template>
+      <ng-template #footer>
+        <div class="flex justify-end items-center gap-2">
+          <p-button
+            severity="secondary"
+            outlined
+            label="取消"
+            (onClick)="onHide()"
+          />
+          <p-button type="submit" label="确定" />
+        </div>
+      </ng-template>
+    </p-drawer>
+  `,
+})
+export class DrawerComponent {
+  readonly visible = signal(false);
+
+  onHide() {
+    this.visible.set(false);
+  }
+}
+```

package/dist/skills/reef-style-frontend/fragments/ui-lib/primeng/quick-reference.md

@@ -0,0 +1,66 @@
+# PrimeNG UI 规范
+
+按需加载。仅当需要编写对应组件类型时阅读相关章节。
+
+> **完整示例代码见 `examples/ui-components.md`**。
+
+## 快速参考
+
+### PrimeNG 组件
+
+- 优先 PrimeNG 组件，不用原生 HTML（`<p-button>`、`<p-select>` 等）
+- `styleClass` 代替 `class` 传递样式
+- `pInvalid` 属性显示验证状态（不是 `invalid` 或 `class.ng-invalid`）
+- 样式定制优先 Pass Through（`pt`），不支持时用 Design Tokens（`dt`）
+- 禁止覆盖全局 CSS
+
+### 数据表格（p-table）
+
+- CRUD 列表页用 `<p-table>` 的 `lazy` 模式配合 `onLazyLoad` 事件实现服务端分页排序
+- 设置 `[rows]` 和 `[totalRecords]`，首屏加载时手动触发一次 `lazy` 加载
+- 空数据时设置 `emptyMessage="暂无数据"`（支持自定义 `ng-template pTemplate="emptymessage"`）
+- 大数据量（>1000 行）考虑虚拟滚动：`[virtualScroll]="true"` + `[virtualScrollItemSize]="行高"`
+
+### 下拉选择（p-select / p-dropdown）
+
+- 必须设置 `optionLabel` 指定显示字段，`optionValue` 指定值字段（默认 `value`）
+- 选项列表应从 Service 通过 httpResource 获取，不要硬编码在组件中
+- 需要多选时用 `[multiple]="true"`
+
+### 日期选择（p-datepicker）
+
+- 设置 `dateFormat="yy-mm-dd"` 匹配后端日期格式
+- 只选日期用 `[showTime]="false"`（默认），选日期时间用 `[showTime]="true"`
+
+### 按钮（p-button）
+
+- 写操作按钮设置 `[loading]="loading()"` 防止重复提交
+- 纯图标按钮必须加 `[pTooltip]="提示"` 和 `aria-label`
+- 危险操作（删除）用 `severity="danger"`
+
+### 弹窗/对话框
+
+- 关闭弹窗（`(onHide)`）后需重置表单状态：`form().reset()` + 错误提示清除
+- 新增/编辑共用弹窗时，打开前根据 `editingId` 初始化表单值
+- 提交完成后关闭弹窗并 reload 列表数据
+
+### 确认操作
+
+- 删除等危险操作使用确认弹窗：`p-confirmPopup` 或 ConfirmDialog
+- 批量操作建议使用 `p-confirmDialog`
+
+### 空状态与反馈
+
+- 所有列表页必须有空状态提示
+- 操作成功/失败后应有 Toast 反馈（通过 `MessageService`，拦截器已自动处理错误 toast）
+- 长时间操作建议显示加载指示器（`p-progressSpinner` 或骨架屏 `p-skeleton`）
+
+### 响应式
+
+- 移动端适配：PrimeNG 响应式 `col-12 md:col-6 lg:col-4` 或 Tailwind `sm:`/`md:` 断点
+- 表单在小屏上应单列显示
+
+### 页面标题
+
+- 每个功能页设置 `<title>页面名称 - 应用名</title>` 支持多 tab 导航
+- 使用 `Title` service（`inject(Title)`）在 Component 中动态设置

package/dist/skills/reef-style-frontend/variants/angular/examples/code-wrapping.md

@@ -0,0 +1,252 @@
+# 前端代码折行示例（90 列限制）
+
+## 函数/方法签名
+
+参数 ≤ 2 个且行总长 ≤ 90 则一行。超过时每行一个参数，2 格缩进：
+
+```typescript
+private saveAllSuccessful(
+  appId: number,
+  form: Form,
+  answers: Map<number, Map<string, Answer>>,
+): void { ... }
+```
+
+## RxJS Pipe 链
+
+每个算子一行，行首 `.`，2 格缩进：
+
+```typescript
+this.service.getData(id).pipe(
+  switchMap(data => this.otherService.process(data)),
+  takeUntilDestroyed(this.destroyRef),
+  finalize(() => this.loading.set(false)),
+).subscribe(result => this.data.set(result));
+```
+
+## Signal / computed / httpResource
+
+简单用 `()` 直接返回，复杂用 `{}` 块。超过 90 列时换行：
+
+```typescript
+readonly name = computed(() => this.user().username);
+
+readonly columns = computed(() => {
+  if (this.visibleColumns().length === 0) { return [...]; }
+  return this.visibleColumns().map(mapColumn);
+});
+
+private readonly formRevision = httpResource<FormRevision>(() => {
+  const id = this.response()?.formRevisionId;
+  return this.appId() !== null && id !== undefined
+    ? `/api/v1/apps/${this.appId()}/forms/${this.formId()}/revisions/${id}`
+    : undefined;
+});
+```
+
+## Signal Forms 校验链
+
+每个 validator 一行，2 格缩进：
+
+```typescript
+readonly form = form(signal(EMPTY_ITEM), (path) => {
+  required(path.name, { message: '名称不能为空' });
+  disabled(path.code, () => this.mode() === 'edit');
+  hidden(path.db, ({ valueOf }) => valueOf(path.type) === 'http');
+  validate(path.url, ({ value }) => {
+    return URL.parse(value()) === null
+      ? { kind: 'url', message: 'URL 格式不正确' }
+      : null;
+  });
+}, {
+  submission: { action: async () => {
+    await lastValueFrom(this.service.create(this.form().value()));
+  }},
+});
+```
+
+## 条件/三元表达式
+
+```typescript
+if (
+  answer?.type === 'DateTimeAnswer'
+  && answer.value !== null
+) { ... }
+
+const redirect = this.appId() !== null && this.formId() !== null
+  ? `/api/v1/apps/${this.appId()}/forms/${this.formId()}/responses`
+  : undefined;
+```
+
+## 模板 HTML 属性
+
+整个标签（含所有属性）≤ 90 列则保持一行，超过 90 列才每行一个属性：
+
+```angular2html
+<!-- ≤ 90 列，一行 -->
+<p-button type="submit" label="提交" (onClick)="form.submit()" />
+
+<!-- > 90 列，每行一个属性 -->
+<p-dialog
+  [(visible)]="visible"
+  [header]="isEditing ? '编辑' : '新增'"
+  modal
+  (onHide)="handleHide()"
+>
+
+<!-- 含复杂表达式属性，超长拆行 -->
+<p-button
+  type="submit"
+  label="提交"
+  [disabled]="!form.form().valid"
+  (onClick)="form.submit()"
+/>
+
+<!-- 内容独占一行 -->
+<span class="text-red-600 font-medium">
+  {{ error() }}
+</span>
+```
+
+HTML 注释和纯文字内容不折行，即使超过 90 列也保持一行。
+
+## 长 class 三层规则（逐级尝试，选第一个满足 ≤ 90 列的）
+
+```angular2html
+<!-- 第 1 层：class="..." 一行能放下则一行 -->
+<div class="flex flex-col items-center gap-2 p-5 bg-blue-50">
+
+<!-- 第 2 层：一行放不下时，class=" 单独一行，所有 class 排在缩进行 -->
+<div
+  class="
+    flex flex-col md:flex-row md:justify-between md:items-start md:w-4xl w-full gap-8
+  "
+>
+
+<!-- 第 3 层：仍超过 90 列时按功能分组排版 -->
+<div
+  class="
+    flex flex-col items-center justify-between gap-3 p-4
+    bg-white border border-gray-200 rounded-lg shadow-sm
+    hover:shadow-md transition-shadow cursor-pointer
+  "
+>
+```
+
+## `@if` / `@for` / `@let` 结构指令
+
+```angular2html
+@if (data(); as items) {
+  <div class="text-gray-500">加载完成</div>
+} @else {
+  <div class="text-gray-500">加载中...</div>
+}
+
+<div class="flex flex-col gap-2">
+  @for (item of items(); track item.id) {
+    <div class="border p-2">{{ item.name }}</div>
+  } @empty {
+    <div class="text-gray-400">暂无数据</div>
+  }
+</div>
+```
+
+## `inject()` 声明
+
+每个 `inject()` 独立一行。同类依赖相邻，不同类之间空行：
+
+```typescript
+private readonly messageService = inject(MessageService);
+private readonly confirmationService = inject(ConfirmationService);
+
+private readonly formBuilder = inject(NonNullableFormBuilder);
+
+private readonly authService = inject(AuthService);
+private readonly dataSourceService = inject(DataSourceService);
+```
+
+## 数组/对象字面量
+
+`imports` 数组总是每项一行（项目约定），按字母序排列。其他数组/对象 ≤ 90 列一行，超过再拆行：
+
+```typescript
+imports: [
+  Button, ConfirmDialog, Dialog, ErrorMessages,
+  FormField, FormRoot, InputText, TableModule,
+],
+
+private readonly columns = ['name', 'age', 'email'];
+
+const longOption = {
+  label: '这是一个很长的文本标签',
+  value: 'long-value-key',
+};
+```
+
+## 泛型/类型标注
+
+长泛型约束提取 type 别名：
+
+```typescript
+type DialogState = 'a' | 'b' | 'c' | 'd' | 'e';
+readonly state = computed<DialogState>(() => { ... });
+```
+
+## `subscribe()` 回调
+
+```typescript
+this.service.list(toPageRequest(event))
+  .subscribe(({ items, totalItems }) => {
+    this.users.set(items);
+    this.totalUsers.set(totalItems);
+  });
+
+this.service.delete(id).subscribe(() => {
+  this.messageService.add({ severity: 'success', summary: '删除成功' });
+});
+```
+
+## `.find()` / `.filter()` 回调
+
+≤ 90 列则一行，超过时回调换行（2 格缩进），回调以 `,` 结尾，`)!` 单独一行：
+
+```typescript
+const page = this.pages().find(p => p.id === id)!;
+
+const selectedForm = this.formService.forms().find(
+  form => form.id === menuItem.formId!,
+)!;
+```
+
+## `messageService.add()` 等对象参数
+
+对象参数 ≤ 90 列一行，超过拆行：
+
+```typescript
+this.messageService.add({ severity: 'success', summary: '提交成功' });
+
+this.messageService.add({
+  severity: 'warn',
+  summary: '当前应用已被禁用，暂无法进行业务操作',
+});
+```
+
+## 路由 `loadComponent`
+
+```typescript
+loadComponent: () => import('./admin/user-list/user-list.component')
+  .then(m => m.UserListComponent),
+
+loadComponent: () =>
+  import('./page-not-found/page-not-found.component').then(m => m.PageNotFoundComponent),
+```
+
+## `async/await`
+
+await 右侧超过 90 列时换行（2 格缩进）：
+
+```typescript
+const user = await lastValueFrom(
+  this.authService.createUser(this.form().value())
+);
+```

package/dist/skills/reef-style-frontend/variants/angular/examples/component-types-pipes.md

@@ -0,0 +1,56 @@
+# 前端组件模式、类型与 Pipe 示例
+
+## 1. Discriminated Union（多态类型）
+
+```typescript
+type FormControl = TextControl | NumberControl | ChoiceControl;
+interface TextControl { type: 'TextControl'; label: string; maxLength?: number; }
+interface NumberControl { type: 'NumberControl'; min?: number; max?: number; }
+interface ChoiceControl { type: 'ChoiceControl'; options: Option[]; }
+
+// Answer 多态（对应 Java 子类）
+type Answer = UuidAnswer | TextAnswer | ChoiceAnswer | TableAnswer;
+interface UuidAnswer { type: 'UuidAnswer'; value: string | null; }
+interface TextAnswer { type: 'TextAnswer'; value: string | null; }
+```
+
+## 2. 日期 Pipe
+
+```typescript
+@Pipe({ name: 'localDateTime' })
+export class LocalDateTimePipe implements PipeTransform {
+  transform(value: LocalDateTime, pattern = 'yyyy-MM-dd HH:mm:ss') {
+    return value.format(DateTimeFormatter.ofPattern(pattern));
+  }
+}
+```
+
+## 3. 组件 Host 动画
+
+```typescript
+@Component({
+  host: {
+    class: 'text-red-500 text-sm',
+    'animate.enter': `
+      starting:opacity-0 starting:-translate-y-1
+      transition-all duration-250 ease-out
+    `,
+    'animate.leave': `
+      opacity-0 -translate-y-1
+      transition-all duration-100 ease-in
+    `,
+  },
+})
+export class ErrorMessages {
+  readonly errors = input.required<ValidationError[]>();
+}
+```
+
+## 4. input() / model() / output() 模式
+
+```typescript
+readonly appId = input.required<number>();
+readonly config = input<Config>(DEFAULT_CONFIG);
+readonly visible = model(false);       // 双向绑定父组件 [(visible)]
+readonly delete = output<number>();    // 子传父事件
+```