非feature-based- 示例
错误的目录结构
这是大量前端后台项目的默认写法
src/
├── api/
│ ├── user.ts
│ ├── order.ts
│ └── product.ts
│
├── views/
│ ├── UserList.vue
│ ├── UserDetail.vue
│ ├── OrderList.vue
│ └── ProductList.vue
│
├── components/
│ ├── UserTable.vue
│ ├── UserForm.vue
│ ├── OrderTable.vue
│ └── ProductCard.vue
│
├── store/
│ ├── user.ts
│ ├── order.ts
│ └── product.ts
│
├── hooks/
│ ├── useUser.ts
│ ├── useOrder.ts
│ └── useProduct.ts
│
└── router/└── index.ts
看起来:
- 分层清楚
- components / hooks / api
- 很规范
但这是一个典型的 “坏边界” 的结构
Page代码
<template><div class="order-page"><OrderFilter:filters="filters"@change="onFilterChange"/><OrderActions:selected-orders="selectedOrders":permission="permission"@export="handleExport"@change-status="handleChangeStatus"/><OrderList:data="orderList":loading="loading"@select="onSelect"@row-click="openDetail"/><OrderDetailDialogv-if="showDetail":order-id="currentOrderId"@close="showDetail = false"/></div>
</template><script setup lang="ts">
import OrderFilter from './components/OrderFilter.vue'
import OrderActions from './components/OrderActions.vue'
import OrderList from './components/OrderList.vue'
import OrderDetailDialog from './components/OrderDetailDialog.vue'import { useOrder } from '@/hooks/useOrder'
import { usePermission } from '@/hooks/usePermission'const permission = usePermission()const {orderList,filters,loading,selectedOrders,fetchOrders,onFilterChange,onSelect,handleExport,handleChangeStatus,showDetail,currentOrderId,openDetail
} = useOrder()
</script>
OrderList.vue - 核心问题
<template><BaseTable:data="data"@row-click="handleRowClick"><template #actions="{ row }"><buttonv-if="permission.canEdit && row.status !== 'completed'"@click.stop="changeStatus(row)">修改状态</button></template></BaseTable>
</template><script setup lang="ts">
import { computed } from 'vue'
import BaseTable from '@/components/Table/BaseTable.vue'
import { usePermission } from '@/hooks/usePermission'
import { changeOrderStatus } from '@/api/order'defineProps<{data: any[]
}>()const emit = defineEmits(['row-click'])const permission = usePermission()function handleRowClick(row: any) {emit('row-click', row.id)
}function changeStatus(row: any) {if (permission.canEdit) {changeOrderStatus(row.id)}
}
</script>
useOrder.ts - 上帝hook
export function useOrder() {const orderList = ref([])const filters = ref({})const loading = ref(false)const selectedOrders = ref([])const showDetail = ref(false)const currentOrderId = ref<string | null>(null)async function fetchOrders() {loading.value = trueorderList.value = await fetchOrderList(filters.value)loading.value = false}function handleExport() {// 导出逻辑}function handleChangeStatus() {// 状态变更}function openDetail(id: string) {currentOrderId.value = idshowDetail.value = true}return {orderList,filters,loading,selectedOrders,fetchOrders,handleExport,handleChangeStatus,openDetail,showDetail,currentOrderId}
}