@deepstorm/cli 0.1.0 → 0.2.0

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

@@ -0,0 +1,270 @@
+# Vue 组件模式示例
+
+Vue 3 中不直接存在 Pipe 的概念，通过 computed 或工具函数实现数据转换。
+
+## 数据转换（替代 Pipe）
+
+```vue
+<script setup lang="ts">
+// ✅ 方案1: 纯工具函数（无状态转换）
+function formatDate(date: string | Date, style: 'short' | 'long' = 'short'): string {
+  const d = typeof date === 'string' ? new Date(date) : date
+  if (style === 'short') {
+    return d.toLocaleDateString('zh-CN')
+  }
+  return d.toLocaleDateString('zh-CN', {
+    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)
+}
+
+// ✅ 方案2: computed 属性（有状态转换 — 如搜索/过滤）
+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)
+  )
+})
+</script>
+
+<template>
+  <a-table
+    :data-source="filteredUsers"
+    :columns="[
+      { title: '创建时间', dataIndex: 'createdAt', customRender: ({ text }) => formatDate(text) },
+      { title: '金额', dataIndex: 'amount', customRender: ({ text }) => formatCurrency(text) },
+    ]"
+  />
+</template>
+```
+
+## 插槽模式（Slots）
+
+### 命名插槽 + 默认内容
+
+```vue
+<!-- components/Card.vue -->
+<template>
+  <div class="card">
+    <header v-if="$slots.header">
+      <slot name="header" />
+    </header>
+    <main>
+      <slot />
+    </main>
+    <footer v-if="$slots.footer">
+      <slot name="footer" />
+    </footer>
+  </div>
+</template>
+```
+
+### 作用域插槽
+
+```vue
+<!-- components/DataList.vue -->
+<script setup lang="ts">
+interface Item {
+  id: number
+  name: string
+  email: string
+}
+
+defineProps<{ items: Item[] }>()
+</script>
+
+<template>
+  <ul>
+    <li v-for="item in items" :key="item.id">
+      <slot name="item" :item="item">
+        <!-- 默认内容：显示名称 -->
+        {{ item.name }}
+      </slot>
+    </li>
+  </ul>
+</template>
+```
+
+```vue
+<!-- 使用作用域插槽 -->
+<DataList :items="users">
+  <template #item="{ item }">
+    <strong>{{ item.name }}</strong>
+    <span class="text-gray-500">({{ item.email }})</span>
+  </template>
+</DataList>
+```
+
+## 动态组件
+
+```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'
+
+const currentView = shallowRef(UserList)
+
+function switchView(view: 'list' | 'detail' | 'settings') {
+  const views = { list: UserList, detail: UserDetail, settings: Settings }
+  currentView.value = views[view]
+}
+</script>
+
+<template>
+  <KeepAlive>
+    <component :is="currentView" />
+  </KeepAlive>
+</template>
+```
+
+## KeepAlive 缓存组件
+
+```vue
+<template>
+  <!-- 缓存已激活的视图，避免切换时重新渲染 -->
+  <KeepAlive :include="['UserList', 'Dashboard']" :max="10">
+    <RouterView />
+  </KeepAlive>
+</template>
+```
+
+## Transition 动画
+
+```vue
+<template>
+  <a-button @click="show = !show">
+    {{ show ? '隐藏' : '显示' }}
+  </a-button>
+
+  <Transition name="fade" mode="out-in">
+    <div v-if="show" key="content">
+      内容区域
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
+```
+
+## 异步组件
+
+```typescript
+// components/AsyncWidget.ts
+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
+const routes = [
+  {
+    path: '/dashboard',
+    component: () => import('@/views/Dashboard.vue'),
+  },
+]
+```
+
+## Provide/Inject 模式
+
+```typescript
+// injection-keys.ts
+import type { InjectionKey, Ref } from 'vue'
+
+export const ThemeKey: InjectionKey<{
+  theme: Ref<'light' | 'dark'>
+  toggleTheme: () => void
+}> = Symbol('theme')
+```
+
+```vue
+<!-- 祖先组件：provide -->
+<script setup lang="ts">
+import { provide, ref } from 'vue'
+import { ThemeKey } from '@/injection-keys'
+
+const theme = ref<'light' | 'dark'>('light')
+
+function toggleTheme() {
+  theme.value = theme.value === 'light' ? 'dark' : 'light'
+}
+
+provide(ThemeKey, { theme, toggleTheme })
+</script>
+
+<template>
+  <slot />
+</template>
+```
+
+```vue
+<!-- 后代组件：inject -->
+<script setup lang="ts">
+import { inject } from 'vue'
+import { ThemeKey } from '@/injection-keys'
+
+const { theme, toggleTheme } = inject(ThemeKey)!
+</script>
+
+<template>
+  <div :class="theme">
+    当前主题: {{ theme }}
+    <a-button @click="toggleTheme">切换主题</a-button>
+  </div>
+</template>
+```
+
+## 权限控制（导航守卫 + 组件封装）
+
+```vue
+<!-- components/AuthGuard.vue -->
+<script setup lang="ts">
+import { useAuthStore } from '@/stores/auth'
+import { useRouter } from 'vue-router'
+
+const auth = useAuthStore()
+const router = useRouter()
+
+if (!auth.isAuthenticated) {
+  router.replace({ name: 'login', query: { redirect: router.currentRoute.value.fullPath } })
+}
+</script>
+
+<template>
+  <slot v-if="auth.isAuthenticated" />
+</template>
+```
+
+```vue
+<!-- 使用 -->
+<AuthGuard>
+  <Dashboard />
+</AuthGuard>
+```

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

@@ -0,0 +1,145 @@
+# Vue 实体类型定义示例
+
+## 基础实体层次
+
+```typescript
+// shared/types/entity.ts
+export interface ImmutableEntity {
+  readonly id: string
+  readonly createdAt: string
+  readonly updatedAt: string
+}
+
+export interface Entity extends ImmutableEntity {
+  version: number
+}
+
+export interface Auditable<T> extends Entity {
+  createdBy: T
+  updatedBy: T
+}
+
+export interface ImmutableAuditable<T> extends ImmutableEntity {
+  createdBy: T
+}
+```
+
+## API 响应类型
+
+```typescript
+// shared/types/api.ts
+export interface PageResponse<T> {
+  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[]>
+}
+```
+
+## 业务实体示例
+
+```typescript
+// shared/types/user.ts
+export interface User extends Auditable<string> {
+  username: string
+  email: string
+  displayName: string
+  avatar?: string
+  role: UserRole
+  active: boolean
+}
+
+export enum UserRole {
+  Admin = 'ADMIN',
+  Editor = 'EDITOR',
+  Viewer = 'VIEWER',
+}
+
+export interface CreateUserRequest {
+  username: string
+  email: string
+  displayName: string
+  role: UserRole
+}
+
+export interface UpdateUserRequest {
+  email?: string
+  displayName?: string
+  role?: UserRole
+}
+```
+
+## 组件 Props 类型（Vue 方式）
+
+```vue
+<!-- components/UserAvatar.vue -->
+<script setup lang="ts">
+import type { User } from '@/shared/types/user'
+
+interface UserAvatarProps {
+  user: Pick<User, 'username' | 'avatar'>
+  size?: 'sm' | 'md' | 'lg'
+  onClick?: () => void
+}
+
+const props = withDefaults(defineProps<UserAvatarProps>(), {
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  click: [user: User]
+}>()
+
+function handleClick() {
+  if (props.onClick) {
+    props.onClick()
+  }
+}
+</script>
+
+<template>
+  <a-avatar
+    :src="user.avatar"
+    :alt="user.username"
+    :size="size === 'sm' ? 24 : size === 'md' ? 32 : 48"
+    :style="{ cursor: onClick ? 'pointer' : 'default' }"
+    @click="handleClick"
+  />
+</template>
+```
+
+```vue
+<!-- views/UserListPage.vue — 页面组件：默认导出 -->
+<script setup lang="ts">
+import { useUsers } from '@/composables/useUsers'
+
+const { users, loading } = useUsers()
+</script>
+
+<template>
+  <UserTable :users="users" :loading="loading" />
+</template>
+```
+
+## Discriminated Union 类型
+
+```typescript
+// 用于多状态组件
+export type NotificationType = 'success' | 'error' | 'warning' | 'info'
+
+export interface NotificationConfig {
+  type: NotificationType
+  title: string
+  message: string
+  duration?: number
+}
+```

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

@@ -0,0 +1,231 @@
+# Vue 表单处理示例（Ant Design Vue）
+
+## 创建用户表单
+
+```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'
+
+interface FormState {
+  username: string
+  email: string
+  displayName: string
+  role: UserRole | undefined
+}
+
+const emit = defineEmits<{
+  success: [userId: string]
+}>()
+
+const formState = reactive<FormState>({
+  username: '',
+  email: '',
+  displayName: '',
+  role: undefined,
+})
+
+const loading = ref(false)
+const formRef = ref()
+
+// 校验规则
+const rules = {
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { min: 3, max: 20, message: '用户名长度 3-20 个字符', trigger: 'blur' },
+  ],
+  email: [
+    { required: true, message: '请输入邮箱', trigger: 'blur' },
+    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' },
+  ],
+  displayName: [
+    { required: true, message: '请输入显示名称', trigger: 'blur' },
+  ],
+  role: [
+    { required: true, message: '请选择角色', trigger: 'change' },
+  ],
+}
+
+async function handleSubmit() {
+  try {
+    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()
+
+    message.success('用户创建成功')
+    emit('success', user.id)
+    formRef.value?.resetFields()
+  } catch (e) {
+    if (e instanceof Error) {
+      message.error(e.message)
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleReset() {
+  formRef.value?.resetFields()
+}
+</script>
+
+<template>
+  <a-form
+    ref="formRef"
+    :model="formState"
+    :rules="rules"
+    :label-col="{ span: 6 }"
+    :wrapper-col="{ span: 16 }"
+    @finish="handleSubmit"
+  >
+    <a-form-item label="用户名" name="username">
+      <a-input v-model:value="formState.username" placeholder="请输入用户名" />
+    </a-form-item>
+
+    <a-form-item label="邮箱" name="email">
+      <a-input v-model:value="formState.email" placeholder="请输入邮箱" />
+    </a-form-item>
+
+    <a-form-item label="显示名称" name="displayName">
+      <a-input v-model:value="formState.displayName" placeholder="请输入显示名称" />
+    </a-form-item>
+
+    <a-form-item label="角色" name="role">
+      <a-select v-model:value="formState.role" placeholder="请选择角色">
+        <a-select-option value="ADMIN">管理员</a-select-option>
+        <a-select-option value="EDITOR">编辑</a-select-option>
+        <a-select-option value="VIEWER">查看者</a-select-option>
+      </a-select>
+    </a-form-item>
+
+    <a-form-item :wrapper-col="{ offset: 6, span: 16 }">
+      <a-button type="primary" html-type="submit" :loading="loading">
+        {{ loading ? '创建中...' : '创建' }}
+      </a-button>
+      <a-button style="margin-left: 8px" @click="handleReset">
+        重置
+      </a-button>
+    </a-form-item>
+  </a-form>
+</template>
+```
+
+## 编辑用户信息 Modal
+
+```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'
+
+interface EditForm {
+  email: string
+  displayName: string
+  active: boolean
+}
+
+const props = defineProps<{
+  visible: boolean
+  user: User | null
+}>()
+
+const emit = defineEmits<{
+  close: []
+  saved: []
+}>()
+
+const formState = reactive<EditForm>({
+  email: '',
+  displayName: '',
+  active: true,
+})
+
+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 })
+
+const rules = {
+  email: [
+    { required: true, message: '请输入邮箱', trigger: 'blur' },
+    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' },
+  ],
+  displayName: [
+    { required: true, message: '请输入显示名称', trigger: 'blur' },
+  ],
+}
+
+async function handleOk() {
+  try {
+    await formRef.value?.validate()
+    loading.value = true
+
+    const res = await fetch(`/api/v1/users/${props.user!.id}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        email: formState.email,
+        displayName: formState.displayName,
+      }),
+    })
+
+    if (!res.ok) throw new Error('更新失败')
+    message.success('更新成功')
+    emit('saved')
+  } catch (e) {
+    if (e instanceof Error) {
+      message.error(e.message)
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleCancel() {
+  emit('close')
+}
+</script>
+
+<template>
+  <a-modal
+    :visible="visible"
+    title="编辑用户"
+    :confirm-loading="loading"
+    destroy-on-close
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <a-form ref="formRef" :model="formState" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
+      <a-form-item label="邮箱" name="email">
+        <a-input v-model:value="formState.email" />
+      </a-form-item>
+
+      <a-form-item label="显示名称" name="displayName">
+        <a-input v-model:value="formState.displayName" />
+      </a-form-item>
+
+      <a-form-item label="状态" name="active">
+        <a-switch v-model:checked="formState.active" />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+```