feat: 標準化全系統數值輸入欄位與擴充商品價格功能
1. UI 標準化: - 針對全系統數值輸入欄位統一加上 step='any' 以支援小數點。 - 表格形式 (Table) 的數值輸入欄位統一加上 text-right 靠右對齊。 - 修正 Components 與 Pages 中所有涉及金額與數量的輸入框。 2. 功能擴充與修正: - 擴充 Product 模型與相關 Dialog 以支援多種價格設定。 - 修正 Inventory/GoodsReceipt/Create.tsx 未使用的變數錯誤。 - 優化庫存相關頁面的 UI 一致性。 3. 其他: - 更新相關的 Type 定義與 Controller 邏輯。
This commit is contained in:
@@ -796,7 +796,42 @@ import { SearchableSelect } from "@/Components/ui/searchable-select";
|
||||
|
||||
```tsx
|
||||
import { Calendar } from "lucide-react";
|
||||
import { Input } from "@/Components/ui/input";
|
||||
|
||||
## 11.7 金額與數字輸入規範
|
||||
|
||||
所有涉及金額(單價、成本、總價)的輸入框,應遵循以下規範以確保操作體驗一致:
|
||||
|
||||
1. **HTML 屬性**:
|
||||
* `type="number"`
|
||||
* `min="0"` (除非業務邏輯允許負數)
|
||||
* `step="any"` (設置為 `any` 可允許任意小數,且瀏覽器預設按上下鍵時會增減 **1** 並保留小數部分,例如 37.2 -> 38.2)
|
||||
* **步進值 (Step)**: 金額與數量輸入框均應設定 `step="any"`,以支援小數點輸入(除非業務邏輯強制整數)。
|
||||
* `placeholder="0"`
|
||||
2. **樣式類別**:
|
||||
* 預設靠左對齊 (不需要 `text-right`),亦可依版面需求調整。
|
||||
|
||||
### 9.2 對齊方式 (Alignment)
|
||||
|
||||
依據欄位所在的情境區分對齊方式:
|
||||
|
||||
- **明細列表/表格 (Details/Table)**:金額與數量欄位一律 **靠右對齊 (text-right)**。
|
||||
- 包含:採購單明細、庫存盤點表、調撥單明細等 Table 內的輸入框。
|
||||
- **一般表單/新增欄位 (Form/Input)**:金額與數量欄位一律 **靠左對齊 (text-left)**。
|
||||
- 包含:商品資料設定、新增表單中的獨立欄位。亦可依版面需求調整。
|
||||
3. **行為邏輯**:
|
||||
* 輸入時允許輸入小數點。
|
||||
* 鍵盤上下鍵調整時,瀏覽器會預設增減 1 (搭配 `step="any"`)。
|
||||
|
||||
```tsx
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
step="any"
|
||||
value={price}
|
||||
onChange={(e) => setPrice(parseFloat(e.target.value) || 0)}
|
||||
placeholder="0"
|
||||
/>
|
||||
```
|
||||
|
||||
<div className="relative">
|
||||
<Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400 pointer-events-none" />
|
||||
|
||||
Reference in New Issue
Block a user