@deepstorm/cli 0.10.2 → 0.11.1

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

@@ -8,34 +8,35 @@ Vue 3 中不直接存在 Pipe 的概念，通过 computed 或工具函数实现
 <script setup lang="ts">
 // ✅ 方案1: 纯工具函数（无状态转换）
 function formatDate(date: string | Date, style: 'short' | 'long' = 'short'): string {
-  const d = typeof date === 'string' ? new Date(date) : date
+  const d = typeof date === 'string' ? new Date(date) : date;
   if (style === 'short') {
-    return d.toLocaleDateString('zh-CN')
+    return d.toLocaleDateString('zh-CN');
   }
   return d.toLocaleDateString('zh-CN', {
-    year: 'numeric', month: 'long', day: 'numeric',
-    hour: '2-digit', minute: '2-digit',
-  })
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
 }
 
 function formatCurrency(amount: number, currency = 'CNY'): string {
   return new Intl.NumberFormat('zh-CN', {
     style: 'currency',
     currency,
-  }).format(amount)
+  }).format(amount);
 }
 
 // ✅ 方案2: computed 属性（有状态转换 — 如搜索/过滤）
-const props = defineProps<{ users: User[] }>()
-const search = ref('')
+const props = defineProps<{ users: User[] }>();
+const search = ref('');
 
 const filteredUsers = computed(() => {
-  if (!search.value.trim()) return props.users
-  const q = search.value.toLowerCase()
-  return props.users.filter(
-    u => u.username.toLowerCase().includes(q) || u.email.toLowerCase().includes(q)
-  )
-})
+  if (!search.value.trim()) return props.users;
+  const q = search.value.toLowerCase();
+  return props.users.filter((u) => u.username.toLowerCase().includes(q) || u.email.toLowerCase().includes(q));
+});
 </script>
 
 <template>
@@ -76,12 +77,12 @@ const filteredUsers = computed(() => {
 <!-- components/DataList.vue -->
 <script setup lang="ts">
 interface Item {
-  id: number
-  name: string
-  email: string
+  id: number;
+  name: string;
+  email: string;
 }
 
-defineProps<{ items: Item[] }>()
+defineProps<{ items: Item[] }>();
 </script>
 
 <template>
@@ -110,16 +111,16 @@ defineProps<{ items: Item[] }>()
 
 ```vue
 <script setup lang="ts">
-import { shallowRef } from 'vue'
-import UserList from '@/views/UserList.vue'
-import UserDetail from '@/views/UserDetail.vue'
-import Settings from '@/views/Settings.vue'
+import { shallowRef } from 'vue';
+import UserList from '@/views/UserList.vue';
+import UserDetail from '@/views/UserDetail.vue';
+import Settings from '@/views/Settings.vue';
 
-const currentView = shallowRef(UserList)
+const currentView = shallowRef(UserList);
 
 function switchView(view: 'list' | 'detail' | 'settings') {
-  const views = { list: UserList, detail: UserDetail, settings: Settings }
-  currentView.value = views[view]
+  const views = { list: UserList, detail: UserDetail, settings: Settings };
+  currentView.value = views[view];
 }
 </script>
 
@@ -150,9 +151,7 @@ function switchView(view: 'list' | 'detail' | 'settings') {
   </a-button>
 
   <Transition name="fade" mode="out-in">
-    <div v-if="show" key="content">
-      内容区域
-    </div>
+    <div v-if="show" key="content">内容区域</div>
   </Transition>
 </template>
 
@@ -172,15 +171,15 @@ function switchView(view: 'list' | 'detail' | 'settings') {
 
 ```typescript
 // components/AsyncWidget.ts
-import { defineAsyncComponent } from 'vue'
-import { Spin } from 'ant-design-vue'
+import { defineAsyncComponent } from 'vue';
+import { Spin } from 'ant-design-vue';
 
 export default defineAsyncComponent({
   loader: () => import('./HeavyWidget.vue'),
   loadingComponent: Spin,
   delay: 200,
   timeout: 8000,
-})
+});
 
 // 路由中的异步组件 — 通过动态 import 实现
 // router/index.ts
@@ -189,34 +188,34 @@ const routes = [
     path: '/dashboard',
     component: () => import('@/views/Dashboard.vue'),
   },
-]
+];
 ```
 
 ## Provide/Inject 模式
 
 ```typescript
 // injection-keys.ts
-import type { InjectionKey, Ref } from 'vue'
+import type { InjectionKey, Ref } from 'vue';
 
 export const ThemeKey: InjectionKey<{
-  theme: Ref<'light' | 'dark'>
-  toggleTheme: () => void
-}> = Symbol('theme')
+  theme: Ref<'light' | 'dark'>;
+  toggleTheme: () => void;
+}> = Symbol('theme');
 ```
 
 ```vue
 <!-- 祖先组件：provide -->
 <script setup lang="ts">
-import { provide, ref } from 'vue'
-import { ThemeKey } from '@/injection-keys'
+import { provide, ref } from 'vue';
+import { ThemeKey } from '@/injection-keys';
 
-const theme = ref<'light' | 'dark'>('light')
+const theme = ref<'light' | 'dark'>('light');
 
 function toggleTheme() {
-  theme.value = theme.value === 'light' ? 'dark' : 'light'
+  theme.value = theme.value === 'light' ? 'dark' : 'light';
 }
 
-provide(ThemeKey, { theme, toggleTheme })
+provide(ThemeKey, { theme, toggleTheme });
 </script>
 
 <template>
@@ -227,10 +226,10 @@ provide(ThemeKey, { theme, toggleTheme })
 ```vue
 <!-- 后代组件：inject -->
 <script setup lang="ts">
-import { inject } from 'vue'
-import { ThemeKey } from '@/injection-keys'
+import { inject } from 'vue';
+import { ThemeKey } from '@/injection-keys';
 
-const { theme, toggleTheme } = inject(ThemeKey)!
+const { theme, toggleTheme } = inject(ThemeKey)!;
 </script>
 
 <template>
@@ -246,14 +245,14 @@ const { theme, toggleTheme } = inject(ThemeKey)!
 ```vue
 <!-- components/AuthGuard.vue -->
 <script setup lang="ts">
-import { useAuthStore } from '@/stores/auth'
-import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth';
+import { useRouter } from 'vue-router';
 
-const auth = useAuthStore()
-const router = useRouter()
+const auth = useAuthStore();
+const router = useRouter();
 
 if (!auth.isAuthenticated) {
-  router.replace({ name: 'login', query: { redirect: router.currentRoute.value.fullPath } })
+  router.replace({ name: 'login', query: { redirect: router.currentRoute.value.fullPath } });
 }
 </script>
 

package/dist/skills/reef-style-frontend/variants/vue/examples/entity-types.md

@@ -5,22 +5,22 @@
 ```typescript
 // shared/types/entity.ts
 export interface ImmutableEntity {
-  readonly id: string
-  readonly createdAt: string
-  readonly updatedAt: string
+  readonly id: string;
+  readonly createdAt: string;
+  readonly updatedAt: string;
 }
 
 export interface Entity extends ImmutableEntity {
-  version: number
+  version: number;
 }
 
 export interface Auditable<T> extends Entity {
-  createdBy: T
-  updatedBy: T
+  createdBy: T;
+  updatedBy: T;
 }
 
 export interface ImmutableAuditable<T> extends ImmutableEntity {
-  createdBy: T
+  createdBy: T;
 }
 ```
 
@@ -29,19 +29,19 @@ export interface ImmutableAuditable<T> extends ImmutableEntity {
 ```typescript
 // shared/types/api.ts
 export interface PageResponse<T> {
-  content: T[]
-  totalElements: number
-  totalPages: number
-  number: number
-  size: number
-  first: boolean
-  last: boolean
+  content: T[];
+  totalElements: number;
+  totalPages: number;
+  number: number;
+  size: number;
+  first: boolean;
+  last: boolean;
 }
 
 export interface ApiError {
-  code: string
-  message: string
-  details?: Record<string, string[]>
+  code: string;
+  message: string;
+  details?: Record<string, string[]>;
 }
 ```
 
@@ -50,12 +50,12 @@ export interface ApiError {
 ```typescript
 // shared/types/user.ts
 export interface User extends Auditable<string> {
-  username: string
-  email: string
-  displayName: string
-  avatar?: string
-  role: UserRole
-  active: boolean
+  username: string;
+  email: string;
+  displayName: string;
+  avatar?: string;
+  role: UserRole;
+  active: boolean;
 }
 
 export enum UserRole {
@@ -65,16 +65,16 @@ export enum UserRole {
 }
 
 export interface CreateUserRequest {
-  username: string
-  email: string
-  displayName: string
-  role: UserRole
+  username: string;
+  email: string;
+  displayName: string;
+  role: UserRole;
 }
 
 export interface UpdateUserRequest {
-  email?: string
-  displayName?: string
-  role?: UserRole
+  email?: string;
+  displayName?: string;
+  role?: UserRole;
 }
 ```
 
@@ -83,25 +83,25 @@ export interface UpdateUserRequest {
 ```vue
 <!-- components/UserAvatar.vue -->
 <script setup lang="ts">
-import type { User } from '@/shared/types/user'
+import type { User } from '@/shared/types/user';
 
 interface UserAvatarProps {
-  user: Pick<User, 'username' | 'avatar'>
-  size?: 'sm' | 'md' | 'lg'
-  onClick?: () => void
+  user: Pick<User, 'username' | 'avatar'>;
+  size?: 'sm' | 'md' | 'lg';
+  onClick?: () => void;
 }
 
 const props = withDefaults(defineProps<UserAvatarProps>(), {
   size: 'md',
-})
+});
 
 const emit = defineEmits<{
-  click: [user: User]
-}>()
+  click: [user: User];
+}>();
 
 function handleClick() {
   if (props.onClick) {
-    props.onClick()
+    props.onClick();
   }
 }
 </script>
@@ -120,9 +120,9 @@ function handleClick() {
 ```vue
 <!-- views/UserListPage.vue — 页面组件：默认导出 -->
 <script setup lang="ts">
-import { useUsers } from '@/composables/useUsers'
+import { useUsers } from '@/composables/useUsers';
 
-const { users, loading } = useUsers()
+const { users, loading } = useUsers();
 </script>
 
 <template>
@@ -134,12 +134,12 @@ const { users, loading } = useUsers()
 
 ```typescript
 // 用于多状态组件
-export type NotificationType = 'success' | 'error' | 'warning' | 'info'
+export type NotificationType = 'success' | 'error' | 'warning' | 'info';
 
 export interface NotificationConfig {
-  type: NotificationType
-  title: string
-  message: string
-  duration?: number
+  type: NotificationType;
+  title: string;
+  message: string;
+  duration?: number;
 }
 ```

package/dist/skills/reef-style-frontend/variants/vue/examples/forms-layer.md

@@ -5,30 +5,30 @@
 ```vue
 <!-- components/CreateUserForm.vue -->
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
-import { message } from 'ant-design-vue'
-import type { UserRole } from '@/shared/types/user'
+import { reactive, ref } from 'vue';
+import { message } from 'ant-design-vue';
+import type { UserRole } from '@/shared/types/user';
 
 interface FormState {
-  username: string
-  email: string
-  displayName: string
-  role: UserRole | undefined
+  username: string;
+  email: string;
+  displayName: string;
+  role: UserRole | undefined;
 }
 
 const emit = defineEmits<{
-  success: [userId: string]
-}>()
+  success: [userId: string];
+}>();
 
 const formState = reactive<FormState>({
   username: '',
   email: '',
   displayName: '',
   role: undefined,
-})
+});
 
-const loading = ref(false)
-const formRef = ref()
+const loading = ref(false);
+const formRef = ref();
 
 // 校验规则
 const rules = {
@@ -40,42 +40,38 @@ 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 handleSubmit() {
   try {
-    await formRef.value?.validate()
-    loading.value = true
+    await formRef.value?.validate();
+    loading.value = true;
 
     const res = await fetch('/api/v1/users', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(formState),
-    })
+    });
 
-    if (!res.ok) throw new Error('创建失败')
-    const user = await res.json()
+    if (!res.ok) throw new Error('创建失败');
+    const user = await res.json();
 
-    message.success('用户创建成功')
-    emit('success', user.id)
-    formRef.value?.resetFields()
+    message.success('用户创建成功');
+    emit('success', user.id);
+    formRef.value?.resetFields();
   } catch (e) {
     if (e instanceof Error) {
-      message.error(e.message)
+      message.error(e.message);
     }
   } finally {
-    loading.value = false
+    loading.value = false;
   }
 }
 
 function handleReset() {
-  formRef.value?.resetFields()
+  formRef.value?.resetFields();
 }
 </script>
 
@@ -112,9 +108,7 @@ function handleReset() {
       <a-button type="primary" html-type="submit" :loading="loading">
         {{ loading ? '创建中...' : '创建' }}
       </a-button>
-      <a-button style="margin-left: 8px" @click="handleReset">
-        重置
-      </a-button>
+      <a-button style="margin-left: 8px" @click="handleReset"> 重置 </a-button>
     </a-form-item>
   </a-form>
 </template>
@@ -125,58 +119,60 @@ function handleReset() {
 ```vue
 <!-- components/EditUserModal.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 EditForm {
-  email: string
-  displayName: string
-  active: boolean
+  email: string;
+  displayName: string;
+  active: boolean;
 }
 
 const props = defineProps<{
-  visible: boolean
-  user: User | null
-}>()
+  visible: boolean;
+  user: User | null;
+}>();
 
 const emit = defineEmits<{
-  close: []
-  saved: []
-}>()
+  close: [];
+  saved: [];
+}>();
 
 const formState = reactive<EditForm>({
   email: '',
   displayName: '',
   active: true,
-})
+});
 
-const formRef = ref()
-const loading = ref(false)
+const formRef = ref();
+const loading = ref(false);
 
 // 监听 user 变化填充表单
-watch(() => props.user, (user) => {
-  if (user) {
-    formState.email = user.email
-    formState.displayName = user.displayName
-    formState.active = user.active
-  }
-}, { immediate: true })
+watch(
+  () => props.user,
+  (user) => {
+    if (user) {
+      formState.email = user.email;
+      formState.displayName = user.displayName;
+      formState.active = user.active;
+    }
+  },
+  { immediate: true },
+);
 
 const rules = {
   email: [
     { required: true, message: '请输入邮箱', trigger: 'blur' },
     { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' },
   ],
-  displayName: [
-    { required: true, message: '请输入显示名称', trigger: 'blur' },
-  ],
-}
+  displayName: [{ required: true, message: '请输入显示名称', trigger: 'blur' }],
+};
 
 async function handleOk() {
   try {
-    await formRef.value?.validate()
-    loading.value = true
+    await formRef.value?.validate();
+    loading.value = true;
 
     const res = await fetch(`/api/v1/users/${props.user!.id}`, {
       method: 'PUT',
@@ -185,22 +181,22 @@ async function handleOk() {
         email: formState.email,
         displayName: formState.displayName,
       }),
-    })
+    });
 
-    if (!res.ok) throw new Error('更新失败')
-    message.success('更新成功')
-    emit('saved')
+    if (!res.ok) throw new Error('更新失败');
+    message.success('更新成功');
+    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>