review：【antd/ele】【iot】代码迁移的 review

apps/web-antd/src/views/iot/product/category/modules/form.vue

@@ -69,6 +69,7 @@ const [Modal, modalApi] = useVbenModal({
     const data = modalApi.getData<IotProductCategoryApi.ProductCategory>();
     if (!data || !data.id) {
       // 新增模式：设置默认值
+      // TODO @AI：可以参考部门，进一步简化代码；通过 defaultValue 在 schema 里设置默认值
       formData.value = undefined;
       await formApi.setValues({
         sort: 0,

apps/web-antd/src/views/iot/product/product/data.ts

@@ -21,6 +21,7 @@ async function loadCategoryData() {
 }
 
 // 初始化加载分类数据
+// TODO @haohao：可以参考 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/tenant/data.ts 简洁一点。
 loadCategoryData();
 
 /** 新增/修改产品的表单 */

apps/web-antd/src/views/iot/product/product/index.vue

@@ -7,13 +7,12 @@ import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
+import { ProductStatusEnum } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 import { downloadFileFromBlobPart } from '@vben/utils';
 
 import { Button, Card, Input, message, Space } from 'ant-design-vue';
 
-import { ProductStatusEnum } from '@vben/constants';
-
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSimpleProductCategoryList } from '#/api/iot/product/category';
 import {
@@ -33,7 +32,7 @@ const router = useRouter();
 const categoryList = ref<IotProductCategoryApi.ProductCategory[]>([]);
 const viewMode = ref<'card' | 'list'>('card');
 const cardViewRef = ref();
-const searchParams = ref({
+const queryParams = ref({
   name: '',
   productKey: '',
 }); // 搜索参数
@@ -51,17 +50,18 @@ async function loadCategories() {
 /** 搜索产品 */
 function handleSearch() {
   if (viewMode.value === 'list') {
-    gridApi.formApi.setValues(searchParams.value);
+    gridApi.formApi.setValues(queryParams.value);
     gridApi.query();
   } else {
-    cardViewRef.value?.search(searchParams.value);
+    // TODO @haohao：要不 search 也改成 query 方法，更统一一点哈。
+    cardViewRef.value?.search(queryParams.value);
   }
 }
 
 /** 重置搜索 */
 function handleReset() {
-  searchParams.value.name = '';
-  searchParams.value.productKey = '';
+  queryParams.value.name = '';
+  queryParams.value.productKey = '';
   handleSearch();
 }
 
@@ -76,7 +76,7 @@ function handleRefresh() {
 
 /** 导出表格 */
 async function handleExport() {
-  const data = await exportProduct(searchParams.value);
+  const data = await exportProduct(queryParams.value);
   downloadFileFromBlobPart({ fileName: '产品列表.xls', source: data });
 }
 
@@ -133,7 +133,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           return await getProductPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
-            ...searchParams.value,
+            ...queryParams.value,
           });
         },
       },
@@ -164,7 +164,7 @@ onMounted(() => {
       <!-- 搜索表单 -->
       <div class="mb-3 flex items-center gap-3">
         <Input
-          v-model:value="searchParams.name"
+          v-model:value="queryParams.name"
           placeholder="请输入产品名称"
           allow-clear
           class="w-[220px]"
@@ -175,7 +175,7 @@ onMounted(() => {
           </template>
         </Input>
         <Input
-          v-model:value="searchParams.productKey"
+          v-model:value="queryParams.productKey"
           placeholder="请输入产品标识"
           allow-clear
           class="w-[220px]"
@@ -230,7 +230,7 @@ onMounted(() => {
       </div>
     </Card>
 
-    <Grid v-show="viewMode === 'list'">
+    <Grid table-title="产品列表" v-show="viewMode === 'list'">
       <template #actions="{ row }">
         <TableAction
           :actions="[
@@ -271,14 +271,13 @@ onMounted(() => {
       v-show="viewMode === 'card'"
       ref="cardViewRef"
       :category-list="categoryList"
-      :search-params="searchParams"
+      :search-params="queryParams"
       @create="handleCreate"
       @edit="handleEdit"
       @delete="handleDelete"
       @detail="openProductDetail"
       @thing-model="openThingModel"
     />
-
   </Page>
 </template>
 <style scoped>

apps/web-antd/src/views/iot/product/product/modules/card-view.vue

@@ -137,6 +137,7 @@ onMounted(() => {
                 </div>
                 <div class="info-item">
                   <span class="info-label">产品类型</span>
+                  <!-- TODO @AI：这个要不完全用字典的 dict-tag？ -->
                   <Tag
                     :color="getDeviceTypeColor(item.deviceType)"
                     class="info-tag m-0"
@@ -231,7 +232,7 @@ onMounted(() => {
     </div>
 
     <!-- 分页 -->
-    <div v-if="list.length > 0" class="flex justify-end">
+    <div v-if="list.length > 0" class="mt-3 flex justify-end">
       <Pagination
         v-model:current="queryParams.pageNo"
         v-model:page-size="queryParams.pageSize"
@@ -266,6 +267,7 @@ onMounted(() => {
       width: 36px;
       height: 36px;
       color: white;
+      // TODO @haohao：这里的紫色，和下面的紫色按钮，看看能不能换下。嘿嘿，感觉 AI 比较喜欢用紫色，但是放现有的后台，有点突兀
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       border-radius: 8px;
     }

apps/web-antd/src/views/iot/product/product/modules/detail/index.vue

@@ -28,6 +28,7 @@ const activeTab = ref('info');
 provide('product', product); // 提供产品信息给子组件
 
 /** 获取产品详情 */
+// TODO @haohao：因为 detail 是独立界面，所以不放在 modules 里，应该放在 web-antd/src/views/iot/product/product/detail/index.vue 里，更合理一些哈。
 async function getProductData(productId: number) {
   loading.value = true;
   try {

apps/web-antd/src/views/iot/product/product/modules/detail/modules/header.vue

@@ -4,11 +4,10 @@ import type { IotProductApi } from '#/api/iot/product/product';
 import { useRouter } from 'vue-router';
 
 import { useVbenModal } from '@vben/common-ui';
+import { ProductStatusEnum } from '@vben/constants';
 
 import { Button, Card, Descriptions, message, Modal } from 'ant-design-vue';
 
-import { ProductStatusEnum } from '@vben/constants';
-
 import { updateProductStatus } from '#/api/iot/product/product';
 
 import Form from '../../form.vue';

apps/web-antd/src/views/iot/product/product/modules/form.vue

@@ -40,6 +40,7 @@ const [Form, formApi] = useVbenForm({
   wrapperClass: 'grid-cols-2',
 });
 
+// TODO @haohao：这个要不还是一行一个？这样样式好看点哈。
 const [AdvancedForm, advancedFormApi] = useVbenForm({
   commonConfig: {
     componentProps: { class: 'w-full' },
@@ -51,10 +52,10 @@ const [AdvancedForm, advancedFormApi] = useVbenForm({
 });
 
 /** 基础表单需要 formApi 引用，所以通过 setState 设置 schema */
+// TODO haohao：@haohao：要不要把 generateProductKey 拿到这个 vue 里，作为参数传递到 useBasicFormSchema 里？
 formApi.setState({ schema: useBasicFormSchema(formApi) });
 
 const [Modal, modalApi] = useVbenModal({
-  /** 提交表单 */
   async onConfirm() {
     const { valid } = await formApi.validate();
     if (!valid) {
@@ -63,6 +64,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     // 合并两个表单的值
     const basicValues = await formApi.getValues();
+    // TODO @haohao：有 linter 修复下；“formData.value?.id”；另外，这里直接两个表单合并，是不是就可以了呀？因为 2 个 schema 本身不同，字段就不同，不会冲突。
     const advancedValues = activeKey.value.includes('advanced')
       ? await advancedFormApi.getValues()
       : formData.value?.id
@@ -85,7 +87,6 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.unlock();
     }
   },
-  /** 弹窗打开/关闭 */
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
@@ -96,9 +97,11 @@ const [Modal, modalApi] = useVbenModal({
     const data = modalApi.getData<IotProductApi.Product>();
     if (!data || !data.id) {
       // 新增：设置默认值
+      // TODO @AI：
       await formApi.setValues({
+        // TODO @haohao：要不要把 generateProductKey 拿到这个 vue 里，作为参数传递到 useBasicFormSchema 里？
         productKey: generateProductKey(),
-        status: 0,
+        status: 0, // TODO @haohao：通过 defaultValue 即可；
       });
       return;
     }
@@ -108,12 +111,15 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = await getProduct(data.id);
       await formApi.setValues(formData.value);
       // 设置高级表单（不等待）
+      // TODO @haohao：直接把 formData 传过去？没关系的哈。因为会 filter 掉不存在的值，可以试试哈。
+      // TODO @haohao：这里是不是要 await 下呀？有黄色的告警；
       advancedFormApi.setValues({
         icon: formData.value.icon,
         picUrl: formData.value.picUrl,
         description: formData.value.description,
       });
       // 有高级字段时自动展开
+      // TODO @haohao：默认不用展开哈。
       if (
         formData.value.icon ||
         formData.value.picUrl ||