Преглед на файлове

主添加:inputRestore.js 使用说明

shizhongqi преди 1 година
родител
ревизия
4538e00aeb

+ 23 - 0
Context Engineering/上下文工程笔记/单个控制器方法添加表单验证.md

@@ -0,0 +1,23 @@
+# 为这个控制器方法实现表单验证
+
+## 任务目标
+请帮助我对这个 action 方法添加规范的表单验证, 从而对所接收用户输入进行验证。
+
+## 技术要求与实现细节
+1. Yii2 框架最佳实践: 严格遵循 Yii2 框架的表单验证最佳实践,使用 yii\base\Model 和 yii\validators 组件。
+2. 专用表单模型: 为对应 action 创建独立的表单模型类。
+3. 模型存放位置: 所有新建的表单验证模型统一放置在 `app-hd/models/{控制器名}/` 目录下
+4. 模型命名规范: 表单模型命名应遵循 {动作名}Form 的规范 (例如,actionCreate 对应 CreateForm.php,actionUpdate 对应 UpdateForm.php)。
+5. 验证内容全面性:
+    - 基础验证: 确保所有用户输入经过适当验证,包括但不限于数据类型、字段长度限制、格式规范检查和必填项验证。
+    - 业务规则验证: 对于涉及特定业务逻辑的字段,创建方法实现额外验证。
+6. 遍历代码,寻找出对用户输入的数据进行验证的代码,把验证额外放入表单模型里(不修改原有的验证代码)
+7. 不破坏现有功能: 确保所有修改在添加验证的同时,不影响控制器对应方法现有功能的正常运行。
+
+## Yii2 框架表单验证文档
+- Yii2 官方文档1:https://www.yiiframework.com/doc/guide/2.0/zh-cn/input-validation
+- Yii2 官方文档2:https://www.yiiframework.com/doc/guide/2.0/zh-cn/tutorial-core-validators
+
+## 预期交付
+1. 新增的表单验证模型类,并继承 `app-hd/models/BaseForm`
+2. 确保所有修改不破坏现有功能

+ 2 - 1
Context Engineering/上下文工程笔记/控制器方法添加表单验证.md

@@ -34,7 +34,8 @@
 5. 实现适当的错误处理和用户友好的错误提示
 
 ## 参考资源
-- Yii2 官方文档:https://www.yiiframework.com/doc/guide/2.0/zh-cn/input-validation
+- Yii2 官方文档1:https://www.yiiframework.com/doc/guide/2.0/zh-cn/input-validation
+- Yii2 官方文档2:https://www.yiiframework.com/doc/guide/2.0/zh-cn/tutorial-core-validators
 
 ## 预期交付
 1. 新增的表单验证模型类

+ 169 - 0
front_end/项目文档/inputRestore.js 使用说明.md

@@ -0,0 +1,169 @@
+## inputRestore.js - 输入框聚焦清空失焦还原 Mixin
+
+### 功能说明
+这个 mixin 提供了输入框聚焦时清空内容,失焦时如果没有输入则还原原值的功能。
+
+### 使用方法
+
+#### 1. 基本用法
+
+```javascript
+// 在组件中引入
+import inputRestore from '@/mixins/inputRestore'
+
+export default {
+  mixins: [inputRestore],
+  data() {
+    return {
+      form: {
+        price: '',
+        stock: '',
+        name: ''
+      }
+    }
+  },
+  // ...
+}
+```
+
+```vue
+<!-- 在模板中使用 -->
+<template>
+  <input 
+    v-model="form.price" 
+    @focus="onInputFocus('price')" 
+    @blur="onInputBlur('price')" 
+    placeholder="请输入价格" 
+  />
+  
+  <input 
+    v-model="form.stock" 
+    @focus="onInputFocus('stock')" 
+    @blur="onInputBlur('stock')" 
+    placeholder="请输入库存" 
+  />
+</template>
+```
+
+#### 2. 自定义表单对象
+
+如果表单字段不在 `this.form` 中,可以传入自定义的表单对象:
+
+```javascript
+data() {
+  return {
+    userInfo: {
+      name: '',
+      phone: ''
+    }
+  }
+},
+methods: {
+  onNameFocus() {
+    this.onInputFocus('name', this.userInfo);
+  },
+  onNameBlur() {
+    this.onInputBlur('name', this.userInfo);
+  }
+}
+```
+
+#### 3. 使用创建器函数(推荐)
+
+为了避免重复定义方法,可以使用创建器函数:
+
+```javascript
+computed: {
+  priceFocusHandler() {
+    return this.createFocusHandler('price');
+  },
+  priceBlurHandler() {
+    return this.createBlurHandler('price');
+  }
+}
+```
+
+```vue
+<template>
+  <input 
+    v-model="form.price" 
+    @focus="priceFocusHandler" 
+    @blur="priceBlurHandler" 
+    placeholder="请输入价格" 
+  />
+</template>
+```
+
+### API 说明
+
+#### Methods
+
+- `onInputFocus(field, formObj = this.form)` - 输入框聚焦处理
+- `onInputBlur(field, formObj = this.form)` - 输入框失焦处理
+- `createFocusHandler(field, formObj = this.form)` - 创建聚焦处理函数
+- `createBlurHandler(field, formObj = this.form)` - 创建失焦处理函数
+
+#### Parameters
+
+- `field` {string} - 表单字段名
+- `formObj` {object} - 表单对象,默认为 `this.form`
+
+### 注意事项
+
+1. 确保表单对象和字段存在,否则可能会报错
+2. 每个组件实例只有一个 `tempInputValue`,所以同时只能处理一个输入框
+3. 建议为每个输入框创建专门的处理方法,避免混乱
+
+### 完整示例
+
+```vue
+<template>
+  <view>
+    <input 
+      v-model="form.price" 
+      @focus="onPriceFocus" 
+      @blur="onPriceBlur" 
+      placeholder="请输入价格" 
+      type="digit"
+    />
+    
+    <input 
+      v-model="form.stock" 
+      @focus="onStockFocus" 
+      @blur="onStockBlur" 
+      placeholder="请输入库存" 
+      type="number"
+    />
+  </view>
+</template>
+
+<script>
+import inputRestore from '@/mixins/inputRestore'
+
+export default {
+  mixins: [inputRestore],
+  data() {
+    return {
+      form: {
+        price: '100',
+        stock: '50'
+      }
+    }
+  },
+  methods: {
+    onPriceFocus() {
+      this.onInputFocus('price');
+    },
+    onPriceBlur() {
+      this.onInputBlur('price');
+    },
+    onStockFocus() {
+      this.onInputFocus('stock');
+    },
+    onStockBlur() {
+      this.onInputBlur('stock');
+    }
+  }
+}
+</script>
+``` 

+ 47 - 0
任务小笔记/25-0714:新增花束.md

@@ -0,0 +1,47 @@
+![[新增花束.png|330x650]]
+
+给 cursor 上图后,给出下述需求:
+```
+此页面表单要按原型图修改或添加表单元素。下面对元素功能如何进行详细说明:  
+  
+1. 封面  
+修改花材时,如果没选,留空,不修改封面图片,添加花材时默认使用第1张图片  
+  
+2. 分类  
+这个本身支持多选,选的第一个“花束”的同时“花束”把放到名称里,第二个开始不再放。  
+  
+3. 名称  
+光标聚焦名称时自动清空输入框里内容  
+  
+4. 价格类型  
+选择的是无价格时,下面的价格栏隐藏,并且价格字段值设为0。选择的是有价格,则下边的价格正常显示  
+  
+5. 库存状态
+充足时,下面的库存不显示。自定义时,下面的库存表单项显示。
+
+6. 节日涨价
+按原型图实现
+
+7. 仅支持自取
+按原型图实现
+
+9. 免运费
+运费修改为免运费,样式按原型图实现
+
+10. 商城上
+状态修改为商城上,样式按原型图实现
+```
+
+### 后期可用到的 AI 需求对话
+- 现在的实现,在用户点击聚焦后会清空输入框。有一种情况,用户只是点击,但后继没有输入,这时要把原先的值还原,请实现这个需求。
+- 
+
+### SQL 更新
+```sql
+
+# ALTER TABLE `xhGoods` MODIFY COLUMN `stockSet` tinyint(4) NOT NULL DEFAULT '1' COMMENT '库存不足时 0不能下单 1可以下单';
+
+ALTER TABLE `xhGoods` MODIFY COLUMN `stockSet` tinyint(4) NOT NULL DEFAULT '0' COMMENT '库存状态:0充足  1自定义';
+
+ALTER TABLE xhGoods ADD COLUMN priceType tinyint(4) NOT NULL DEFAULT '0' COMMENT '价格类型:0无价格 1有价格' AFTER price;
+```

BIN
新增花束.png