@deepstorm/cli 0.10.2 → 0.11.1

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

@@ -5,37 +5,37 @@
 ```vue
 <!-- components/UserTable.vue -->
 <script setup lang="ts">
-import { ref, reactive, watch } from 'vue'
-import { message } from 'ant-design-vue'
-import type { User } from '@/shared/types/user'
+import { ref, reactive, watch } from 'vue';
+import { message } from 'ant-design-vue';
+import type { User } from '@/shared/types/user';
 
 interface Filters {
-  search: string
-  role: string | undefined
+  search: string;
+  role: string | undefined;
 }
 
 const props = defineProps<{
-  users: User[]
-  total: number
-  loading: boolean
-}>()
+  users: User[];
+  total: number;
+  loading: boolean;
+}>();
 
 const emit = defineEmits<{
-  search: [filters: Filters]
-  pageChange: [page: number, pageSize: number]
-  edit: [user: User]
-  delete: [userId: string]
-}>()
+  search: [filters: Filters];
+  pageChange: [page: number, pageSize: number];
+  edit: [user: User];
+  delete: [userId: string];
+}>();
 
 const filters = reactive<Filters>({
   search: '',
   role: undefined,
-})
+});
 
 const pagination = reactive({
   current: 1,
   pageSize: 20,
-})
+});
 
 // 列定义
 const columns = [
@@ -56,43 +56,43 @@ const columns = [
       </span>
     ),
   },
-]
+];
 
 // 搜索
-let searchTimer: ReturnType<typeof setTimeout>
+let searchTimer: ReturnType<typeof setTimeout>;
 function handleSearch(value: string) {
-  clearTimeout(searchTimer)
+  clearTimeout(searchTimer);
   searchTimer = setTimeout(() => {
-    filters.search = value
-    pagination.current = 1
-    emit('search', { ...filters })
-  }, 300)
+    filters.search = value;
+    pagination.current = 1;
+    emit('search', { ...filters });
+  }, 300);
 }
 
 // 分页变化
 function handleTableChange(pag: { current: number; pageSize: number }) {
-  pagination.current = pag.current
-  pagination.pageSize = pag.pageSize
-  emit('pageChange', pag.current, pag.pageSize)
+  pagination.current = pag.current;
+  pagination.pageSize = pag.pageSize;
+  emit('pageChange', pag.current, pag.pageSize);
 }
 
 // 批量删除
-const selectedRowKeys = ref<string[]>([])
+const selectedRowKeys = ref<string[]>([]);
 
 function handleBatchDelete() {
   if (selectedRowKeys.value.length === 0) {
-    message.warning('请先选择要删除的用户')
-    return
+    message.warning('请先选择要删除的用户');
+    return;
   }
   Modal.confirm({
     title: '批量删除',
     content: `确定要删除选中的 ${selectedRowKeys.value.length} 名用户吗？`,
     onOk: async () => {
       // 批量删除逻辑
-      message.success(`已删除 ${selectedRowKeys.value.length} 名用户`)
-      selectedRowKeys.value = []
+      message.success(`已删除 ${selectedRowKeys.value.length} 名用户`);
+      selectedRowKeys.value = [];
     },
-  })
+  });
 }
 </script>
 
@@ -100,19 +100,9 @@ function handleBatchDelete() {
   <div class="space-y-4">
     <!-- 搜索栏 -->
     <div class="flex justify-between items-center">
-      <a-input-search
-        placeholder="搜索用户名/邮箱"
-        style="width: 300px"
-        @search="handleSearch"
-      />
+      <a-input-search placeholder="搜索用户名/邮箱" style="width: 300px" @search="handleSearch" />
       <div class="flex gap-2">
-        <a-button
-          danger
-          :disabled="selectedRowKeys.length === 0"
-          @click="handleBatchDelete"
-        >
-          批量删除
-        </a-button>
+        <a-button danger :disabled="selectedRowKeys.length === 0" @click="handleBatchDelete"> 批量删除 </a-button>
         <a-button type="primary">新增用户</a-button>
       </div>
     </div>
@@ -130,7 +120,9 @@ function handleBatchDelete() {
       }"
       :row-selection="{
         selectedRowKeys,
-        onChange: (keys: string[]) => { selectedRowKeys = keys },
+        onChange: (keys: string[]) => {
+          selectedRowKeys = keys;
+        },
       }"
       row-key="id"
       :locale="{ emptyText: '暂无用户数据' }"
@@ -145,31 +137,31 @@ function handleBatchDelete() {
 ```vue
 <!-- components/UserFormModal.vue -->
 <script setup lang="ts">
-import { reactive, ref, watch } from 'vue'
-import { message, Modal } from 'ant-design-vue'
-import type { User } from '@/shared/types/user'
+import { reactive, ref, watch } from 'vue';
+import { message, Modal } from 'ant-design-vue';
+import type { User } from '@/shared/types/user';
 
 interface FormData {
-  username: string
-  email: string
-  displayName: string
-  role: string
-  active: boolean
+  username: string;
+  email: string;
+  displayName: string;
+  role: string;
+  active: boolean;
 }
 
 const props = defineProps<{
-  visible: boolean
-  user: User | null  // null 表示创建模式
-}>()
+  visible: boolean;
+  user: User | null; // null 表示创建模式
+}>();
 
 const emit = defineEmits<{
-  close: []
-  saved: []
-}>()
+  close: [];
+  saved: [];
+}>();
 
-const formRef = ref()
-const loading = ref(false)
-const isEdit = ref(false)
+const formRef = ref();
+const loading = ref(false);
+const isEdit = ref(false);
 
 const formData = reactive<FormData>({
   username: '',
@@ -177,25 +169,29 @@ const formData = reactive<FormData>({
   displayName: '',
   role: 'EDITOR',
   active: true,
-})
+});
 
 // 编辑模式填充数据
-watch(() => props.user, (user) => {
-  isEdit.value = !!user
-  if (user) {
-    formData.username = user.username
-    formData.email = user.email
-    formData.displayName = user.displayName
-    formData.role = user.role
-    formData.active = user.active
-  } else {
-    formData.username = ''
-    formData.email = ''
-    formData.displayName = ''
-    formData.role = 'EDITOR'
-    formData.active = true
-  }
-}, { immediate: true })
+watch(
+  () => props.user,
+  (user) => {
+    isEdit.value = !!user;
+    if (user) {
+      formData.username = user.username;
+      formData.email = user.email;
+      formData.displayName = user.displayName;
+      formData.role = user.role;
+      formData.active = user.active;
+    } else {
+      formData.username = '';
+      formData.email = '';
+      formData.displayName = '';
+      formData.role = 'EDITOR';
+      formData.active = true;
+    }
+  },
+  { immediate: true },
+);
 
 const rules = {
   username: [
@@ -206,43 +202,39 @@ const rules = {
     { required: true, message: '请输入邮箱', trigger: 'blur' },
     { type: 'email', message: '请输理有效的邮箱地址', trigger: 'blur' },
   ],
-  displayName: [
-    { required: true, message: '请输入显示名称', trigger: 'blur' },
-  ],
-  role: [
-    { required: true, message: '请选择角色', trigger: 'change' },
-  ],
-}
+  displayName: [{ required: true, message: '请输入显示名称', trigger: 'blur' }],
+  role: [{ required: true, message: '请选择角色', trigger: 'change' }],
+};
 
 async function handleOk() {
   try {
-    await formRef.value?.validate()
-    loading.value = true
+    await formRef.value?.validate();
+    loading.value = true;
 
-    const url = isEdit.value ? `/api/v1/users/${props.user!.id}` : '/api/v1/users'
-    const method = isEdit.value ? 'PUT' : 'POST'
+    const url = isEdit.value ? `/api/v1/users/${props.user!.id}` : '/api/v1/users';
+    const method = isEdit.value ? 'PUT' : 'POST';
 
     const res = await fetch(url, {
       method,
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(formData),
-    })
+    });
 
-    if (!res.ok) throw new Error(isEdit.value ? '更新失败' : '创建失败')
+    if (!res.ok) throw new Error(isEdit.value ? '更新失败' : '创建失败');
 
-    message.success(isEdit.value ? '更新成功' : '创建成功')
-    emit('saved')
+    message.success(isEdit.value ? '更新成功' : '创建成功');
+    emit('saved');
   } catch (e) {
     if (e instanceof Error) {
-      message.error(e.message)
+      message.error(e.message);
     }
   } finally {
-    loading.value = false
+    loading.value = false;
   }
 }
 
 function handleCancel() {
-  emit('close')
+  emit('close');
 }
 </script>
 
@@ -255,19 +247,9 @@ function handleCancel() {
     @ok="handleOk"
     @cancel="handleCancel"
   >
-    <a-form
-      ref="formRef"
-      :model="formData"
-      :rules="rules"
-      :label-col="{ span: 6 }"
-      :wrapper-col="{ span: 16 }"
-    >
+    <a-form ref="formRef" :model="formData" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
       <a-form-item label="用户名" name="username">
-        <a-input
-          v-model:value="formData.username"
-          :disabled="isEdit"
-          placeholder="请输入用户名"
-        />
+        <a-input v-model:value="formData.username" :disabled="isEdit" placeholder="请输入用户名" />
       </a-form-item>
 
       <a-form-item label="邮箱" name="email">
@@ -299,14 +281,14 @@ function handleCancel() {
 ```vue
 <!-- views/Dashboard.vue -->
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted } from 'vue';
 
 const stats = ref([
   { title: '用户总数', value: 1284, icon: 'users' },
   { title: '今日活跃', value: 356, icon: 'activity' },
   { title: '待处理工单', value: 23, icon: 'clock' },
   { title: '系统消息', value: 7, icon: 'message' },
-])
+]);
 </script>
 
 <template>

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

@@ -12,8 +12,8 @@
 
 ```typescript
 // vite.config.ts
-import Components from 'unplugin-vue-components/vite'
-import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
+import Components from 'unplugin-vue-components/vite';
+import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
 
 export default {
   plugins: [
@@ -21,12 +21,13 @@ export default {
       resolvers: [AntDesignVueResolver()],
     }),
   ],
-}
+};
 ```
 
 ## 常用组件规范
 
 ### Button（按钮）
+
 - 主要操作使用 `type="primary"`，次要操作默认
 - 危险操作使用 `danger` 属性
 - 异步操作必须设置 `:loading` 状态防重复提交
@@ -43,6 +44,7 @@ export default {
 ```
 
 ### Table（表格）
+
 - 始终指定 `row-key` 为唯一标识字段（如 `id`）
 - 列表格使用 `:pagination` 属性控制分页
 - 空数据使用 `:locale` 自定义空状态提示：`{ emptyText: '暂无数据' }`
@@ -70,6 +72,7 @@ export default {
 ```
 
 ### Form（表单）
+
 - 使用 `layout="vertical"` 默认垂直布局
 - 所有校验规则集中在 `:rules` 中定义，避免使用自定义 validator（除非复杂业务）
 - `<a-form-item>` 的 `name` 必须与提交数据结构的字段名一致
@@ -79,27 +82,25 @@ export default {
 
 ```vue
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { reactive, ref } from 'vue';
 
 const formState = reactive({
   email: '',
   name: '',
-})
-const formRef = ref()
+});
+const formRef = ref();
 
 const rules = {
   email: [
     { required: true, message: '请输入邮箱', trigger: 'blur' },
     { type: 'email', message: '邮箱格式不正确', trigger: 'blur' },
   ],
-  name: [
-    { required: true, message: '请输入姓名', trigger: 'blur' },
-  ],
-}
+  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+};
 
 async function handleSubmit() {
   try {
-    await formRef.value?.validate()
+    await formRef.value?.validate();
     // 提交逻辑
   } catch (e) {
     // 校验失败
@@ -108,13 +109,7 @@ async function handleSubmit() {
 </script>
 
 <template>
-  <a-form
-    ref="formRef"
-    :model="formState"
-    :rules="rules"
-    layout="vertical"
-    @finish="handleSubmit"
-  >
+  <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical" @finish="handleSubmit">
     <a-form-item name="email" label="邮箱">
       <a-input v-model:value="formState.email" placeholder="请输入邮箱" />
     </a-form-item>
@@ -123,6 +118,7 @@ async function handleSubmit() {
 ```
 
 ### Modal（弹窗）
+
 - 表单弹窗用 `destroy-on-close` 确保关闭后重置状态
 - `@cancel` 用于关闭回调
 - 确认弹窗用 `Modal.confirm()` 快捷方法
@@ -141,7 +137,7 @@ async function handleSubmit() {
 
 <!-- 程序化确认弹窗 -->
 <script setup lang="ts">
-import { Modal } from 'ant-design-vue'
+import { Modal } from 'ant-design-vue';
 
 Modal.confirm({
   title: '确认删除',
@@ -149,11 +145,12 @@ Modal.confirm({
   okText: '确认删除',
   okType: 'danger',
   onOk: () => deleteUser(id),
-})
+});
 </script>
 ```
 
 ### Select（选择器）
+
 - 选项少时直接写 `<a-select-option>`；选项多时使用 `:options` 数组属性
 - 远程搜索使用 `show-search` + `@search` + `:filter-option` 自定义
 - 多选用 `mode="multiple"`
@@ -166,12 +163,7 @@ Modal.confirm({
 </a-select>
 
 <!-- 远程搜索 -->
-<a-select
-  v-model:value="selectedUser"
-  show-search
-  :filter-option="false"
-  @search="handleSearch"
->
+<a-select v-model:value="selectedUser" show-search :filter-option="false" @search="handleSearch">
   <a-select-option v-for="u in users" :key="u.id" :value="u.id">
     {{ u.username }}
   </a-select-option>
@@ -179,6 +171,7 @@ Modal.confirm({
 ```
 
 ### DatePicker（日期选择器）
+
 - 使用 `format` 指定显示格式
 - 表单中配合 `<a-form-item>` 使用，值类型为 `dayjs` 对象
 - 使用 `v-model:value` 双向绑定
@@ -190,29 +183,32 @@ Modal.confirm({
 ```
 
 ### Space（间距）
+
 - 组件间间距优先使用 `<a-space>` 包裹，避免手动 `margin`
 - 默认间距为 `size="small"`（8px），可根据上下文调整
 
 ### message / notification（消息提示）
+
 - 需从 `ant-design-vue` 包手动导入
 - 操作反馈使用 `message.success()` / `message.error()` 轻量提示
 - 重要通知使用 `notification.open()` / `notification.info()`
 
 ```vue
 <script setup lang="ts">
-import { message } from 'ant-design-vue'
+import { message } from 'ant-design-vue';
 
 function handleSuccess() {
-  message.success('操作成功')
+  message.success('操作成功');
 }
 
 function handleError() {
-  message.error('操作失败')
+  message.error('操作失败');
 }
 </script>
 ```
 
 ### Spin（加载中）
+
 - 页面级加载使用 `<a-spin>` 包裹内容区域
 - 组件级加载使用 Spin 组件的 `:spinning` 属性
 
@@ -246,11 +242,11 @@ function handleError() {
 </template>
 
 <script setup lang="ts">
-import zhCN from 'ant-design-vue/es/locale/zh_CN'
-import dayjs from 'dayjs'
-import 'dayjs/locale/zh-cn'
+import zhCN from 'ant-design-vue/es/locale/zh_CN';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
 
-dayjs.locale('zh-cn')
+dayjs.locale('zh-cn');
 </script>
 ```
 

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

@@ -11,10 +11,11 @@ PrimeNG 的 boolean 属性传 `true` 时直接用属性名，不用 `[prop]="tru
 ```html
 <!-- ✓ 正确 -->
 <p-dialog [(visible)]="visible" modal (onHide)="onHide()">
-<p-button severity="secondary" outlined loading disabled />
+  <p-button severity="secondary" outlined loading disabled />
 
-<!-- ✗ 错误 -->
-<p-dialog [(visible)]="visible" [modal]="true">
+  <!-- ✗ 错误 -->
+  <p-dialog [(visible)]="visible" [modal]="true"></p-dialog
+></p-dialog>
 ```
 
 ### CSS Layer 顺序
@@ -59,11 +60,10 @@ export class UserListComponent {
   readonly totalUsers = signal(0);
 
   loadUsers(event: TableLazyLoadEvent) {
-    this.authService.listUsers(toPageRequest(event))
-      .subscribe(({ items, totalItems }) => {
-        this.users.set(items);
-        this.totalUsers.set(totalItems);
-      });
+    this.authService.listUsers(toPageRequest(event)).subscribe(({ items, totalItems }) => {
+      this.users.set(items);
+      this.totalUsers.set(totalItems);
+    });
   }
 }
 ```
@@ -86,9 +86,10 @@ export class MyComponent {
 
   onDelete(id: number) {
     this.confirmationService.confirm({
-      accept: () => this.itemService.delete(id).subscribe(
-        () => this.messageService.add({ severity: 'success', summary: '删除成功' }),
-      ),
+      accept: () =>
+        this.itemService
+          .delete(id)
+          .subscribe(() => this.messageService.add({ severity: 'success', summary: '删除成功' })),
     });
   }
 }
@@ -101,23 +102,13 @@ export class MyComponent {
 ```typescript
 @Component({
   template: `
-    <p-drawer
-      styleClass="w-200"
-      [(visible)]="visible"
-      position="right"
-      (onHide)="onHide()"
-    >
+    <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 severity="secondary" outlined label="取消" (onClick)="onHide()" />
           <p-button type="submit" label="确定" />
         </div>
       </ng-template>

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

@@ -17,11 +17,14 @@ private saveAllSuccessful(
 每个算子一行，行首 `.`，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));
+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
@@ -195,11 +198,10 @@ readonly state = computed<DialogState>(() => { ... });
 ## `subscribe()` 回调
 
 ```typescript
-this.service.list(toPageRequest(event))
-  .subscribe(({ items, totalItems }) => {
-    this.users.set(items);
-    this.totalUsers.set(totalItems);
-  });
+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: '删除成功' });
@@ -211,11 +213,9 @@ this.service.delete(id).subscribe(() => {
 ≤ 90 列则一行，超过时回调换行（2 格缩进），回调以 `,` 结尾，`)!` 单独一行：
 
 ```typescript
-const page = this.pages().find(p => p.id === id)!;
+const page = this.pages().find((p) => p.id === id)!;
 
-const selectedForm = this.formService.forms().find(
-  form => form.id === menuItem.formId!,
-)!;
+const selectedForm = this.formService.forms().find((form) => form.id === menuItem.formId!)!;
 ```
 
 ## `messageService.add()` 等对象参数
@@ -246,7 +246,5 @@ loadComponent: () =>
 await 右侧超过 90 列时换行（2 格缩进）：
 
 ```typescript
-const user = await lastValueFrom(
-  this.authService.createUser(this.form().value())
-);
+const user = await lastValueFrom(this.authService.createUser(this.form().value()));
 ```