# Common Rules for Professional TKE UI

These are frequently overlooked issues that make TKE UI look unprofessional. **When in doubt, search TKE standards using `scripts/search.py` with the provided keywords.**

## Colors & Variables

| ❌ Common Error | ✅ TKE Correct | 🔍 Search Keywords |
|----------------|---------------|-------------------|
| `background-color: #237c00` (hardcoded) | `var(--success)` or `bg-success` class | `"success color"`, `"color variable"` |
| `color: #000` (hardcoded) | `var(--gray-006)` or `text-gray` | `"text color variable"` |

**Always use TKE CSS variables instead of hardcoded color values.**

## Border Radius

| ❌ Common Error | ✅ TKE Correct | 🔍 Search Keywords |
|----------------|---------------|-------------------|
| `border-radius: 0.25rem` (custom) | `var(--border-radius)` | `"button border-radius"` |
| `border-radius: 4px` (custom) | `var(--border-radius)` | `"border-radius variable"` |
| `border-radius: 50%` (filter button) | `var(--border-radius-full)` | `"filter button border-radius"` |

**Never use custom border-radius values. Always use TKE variables.**

## Icons & Visual Elements

| Rule                             | Do                                          | Don't                                  | 🔍 Search Keywords |
| -------------------------------- | ------------------------------------------- | -------------------------------------- | ----------------- |
| **No emoji icons**         | Use TKE icon system (`tk-icon icon-tk-*`) | Use emojis like 🎨 🚀 ⚙️ as UI icons | `"icon emoji"` |
| **Stable hover states**    | Use color/opacity transitions on hover      | Use scale transforms that shift layout | `"hover feedback"` |
| **Consistent icon sizing** | Use fixed viewBox with fs-* classes         | Mix different icon sizes randomly      | `"icon sizing"` |
| **Download icons** | Use `icon-tk-file-excel` for Excel downloads | Generic download icons | `"download excel"` |

## Interaction & Cursor

| Rule                         | Do                                                         | Don't                                        | 🔍 Search Keywords |
| ---------------------------- | ---------------------------------------------------------- | -------------------------------------------- | ----------------- |
| **Cursor pointer**     | Add `cursor-pointer` to all clickable/hoverable elements | Leave default cursor on interactive elements | `"cursor pointer"` |
| **Hover feedback**     | Provide visual feedback (color, shadow, border)            | No indication element is interactive         | `"hover feedback"` |
| **Smooth transitions** | Use `transition-colors duration-200`                     | Instant state changes or too slow (>500ms)   | `"smooth transitions"` |

## Form Standards

| Rule                      | Do                                                                                   | Don't                           | 🔍 Search Keywords |
| ------------------------- | ------------------------------------------------------------------------------------ | ------------------------------- | ----------------- |
| **Required fields** | Always use `<span class="star_mark">*</span>`                                      | Forget to mark required fields  | `"required field"` |
| **Label linking**   | Use `for` attribute on labels, `id` on inputs                                    | Forget to link labels to inputs | `"form label"` |
| **Form layout**     | Use `col-lg-2` to `col-lg-4` for labels, `col-lg-8` to `col-lg-9` for inputs | Use incorrect column widths (e.g., `col-lg-3`) | `"form layout col-lg"` |
| **Form spacing** | Use `mb-2` between form rows | Missing spacing | `"form spacing mb-2"` |
| **Date picker** | Use `datepicker` with `icon-tk-calendar` | Native `<input type="date">` | `"datepicker"`, `"日期选择器"` |

## Layout & Spacing

| Rule                    | Do                                                              | Don't                                   | 🔍 Search Keywords |
| ----------------------- | --------------------------------------------------------------- | --------------------------------------- | ----------------- |
| **Form spacing**  | Use `mb-2` for spacing between form rows                      | Inconsistent spacing                    | `"form spacing"` |
| **Responsive**    | Always use responsive grid classes (`col-lg-*`, `col-md-*`) | Fixed widths without responsive classes | `"responsive"` |
| **Table wrapper** | Wrap tables in `.table-responsive`                            | Tables without responsive wrapper       | `"table responsive"` |
| **Table header** | Use `table-title` class for table headers | Missing `table-title` class | `"table table-title"` |
| **Table pagination** | Use DataTable `paging: true` or Bootstrap pagination | Missing pagination | `"table pagination"` |
| **Table sorting** | Use DataTable `ordering: true` | Missing column sorting | `"表头 排序"`, `"column sort"` |
| **Table action icons** | Use `<a class="a-icon">` OR `<button class="button-no">` for icon actions. Use `text-nowrap text-center` on td | Use `btn btn-primary` or other bordered button classes for icon actions | `"table actions"`, `"table operation icon"`, `"button-no"`, `"a-icon"` |

## Drag & Drop

| ❌ Common Error | ✅ TKE Correct | 🔍 Search Keywords |
|----------------|---------------|-------------------|
| Native HTML5 drag & drop | jQuery UI `sortable` with `icon-tk-move` | `"drag drop"`, `"拖拽"` |
| Missing initialization | Initialize in `$(function(){})` | `"sortable initialize"` |

## Card Blocking

| Rule | Do | Don't | 🔍 Search Keywords |
|------|----|----|-------------------|
| **Separate functional sections** | Use separate `card mb-3` for each functional section (search form, data table, timeline, etc.) | Put all content (search form, table, timeline) in a single card | `"card blocking"`, `"card grouping"`, `"separate sections"` |
| **Standard card styling** | Use `card border-0 shadow-sm mb-3` for standard cards | Use card without mb-3 spacing | `"card border-0 shadow-sm mb-3"` |
| **Each major feature = one card** | Each major feature (search form, data table, timeline, form edit) should be its own card | Combine multiple features into one card | `"card mb-3"` |

**Always use separate cards for different functional sections. Each major feature should be its own card with mb-3 spacing.**