Merge pull request #17 from worktile/w/#WIK-16166

feat: apply icon and width #WIK-16166
worktile · Jul 25, 2024 · deafb13 · deafb13
2 parents 0392723 + cf46f10
commit deafb13
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 17 deletions.
diff --git a/packages/grid/src/core/constants/field.ts b/packages/grid/src/core/constants/field.ts
@@ -5,32 +5,38 @@ export const BasicFields = [
     {
         type: AITableFieldType.Text,
         name: '文本',
-        icon: 'font'
+        icon: 'font',
+        width: 300
     },
     {
         type: AITableFieldType.SingleSelect,
         name: '单选',
-        icon: 'check-circle'
+        icon: 'check-circle',
+        width: 200
     },
     {
         type: AITableFieldType.Number,
         name: '数字',
-        icon: 'hashtag'
+        icon: 'hashtag',
+        width: 200
     },
     {
         type: AITableFieldType.DateTime,
         name: '日期',
-        icon: 'calendar'
+        icon: 'calendar',
+        width: 200
     },
     {
         type: AITableFieldType.Rating,
         name: '评分',
-        icon: 'star-circle'
+        icon: 'star-circle',
+        width: 200
     },
     {
         type: AITableFieldType.Link,
         name: '链接',
-        icon: 'link-insert'
+        icon: 'link-insert',
+        width: 300
     }
 ];
 

diff --git a/packages/grid/src/core/types/core.ts b/packages/grid/src/core/types/core.ts
@@ -49,7 +49,8 @@ export interface AITableField {
     id: string;
     name: string;
     type: AITableFieldType;
-    width?: string;
+    icon?: string;
+    width?: number;
     hidden?: boolean;
     frozen?: boolean;
     statType?: AITableStatType;
@@ -90,4 +91,5 @@ export interface AITableFieldInfo {
     type: AITableFieldType;
     name: string;
     icon: string;
+    width: number;
 }
diff --git a/packages/grid/src/grid.component.html b/packages/grid/src/grid.component.html
@@ -4,13 +4,17 @@
     </div>
     @for (field of gridData().fields; track field.id) {
         <div
-            class="grid-cell grid-column-field"
+            class="grid-cell grid-field"
             #fieldAction
             [attr.fieldId]="field.id"
             [ngClass]="{ highlight: aiTable.selection().selectedFields.has(field.id) }"
+            [ngStyle]="{ width: field.width + 'px' }"
         >
-            {{ field.name }}
-            <a thyAction thyActiveClass="active" thyIcon="more-vertical" [thyDropdown]="fieldMenu" href="javascript:;">
+            <span>
+                <thy-icon [thyIconName]="field.icon!" class="mr-2 text-muted"></thy-icon>
+                <span>{{ field.name }}</span>
+            </span>
+            <a class="grid-field-action" thyAction thyActiveClass="active" thyIcon="more-vertical" [thyDropdown]="fieldMenu" href="javascript:;">
                 <thy-dropdown-menu #fieldMenu>
                     <field-menu [origin]="fieldAction" [field]="field" [aiTable]="aiTable" [fieldMenus]="fieldMenus"></field-menu>
                 </thy-dropdown-menu>
@@ -44,6 +48,7 @@
                     [attr.type]="[field.type]"
                     [attr.fieldId]="[field.id]"
                     [attr.recordId]="[record.id]"
+                    [ngStyle]="{ width: field.width + 'px' }"
                     #cell
                 >
                     @switch (field.type) {
@@ -60,7 +65,7 @@
                         }
                         @case (AITableFieldType.Link) {
                             <a
-                                class="d-block pl-4 pr-4"
+                                class="d-block"
                                 thyStopPropagation
                                 thyFlexibleText
                                 [thyTooltipContent]="record.value[field.id]?.text"
@@ -70,7 +75,7 @@
                             >
                         }
                         @default {
-                            {{ record.value[field.id] }}
+                            <span class="text-truncate"> {{ record.value[field.id] }}</span>
                         }
                     }
                     <div class="autofill-container"></div>

diff --git a/packages/grid/src/services/event.service.ts b/packages/grid/src/services/event.service.ts
@@ -73,6 +73,7 @@ export class AITableGridEventService {
             height: height + 2 + 'px',
             placement: 'top',
             offset: -(height + 4),
+            minWidth: width,
             initialState: {
                 field: field,
                 record: record,

diff --git a/packages/grid/src/services/selection.servive.ts b/packages/grid/src/services/selection.servive.ts
@@ -54,7 +54,7 @@ export class AITableGridSelectionService {
     updateSelect(event: MouseEvent) {
         const target = event.target as HTMLElement;
         const cellDom = target.closest('.grid-cell');
-        const colDom = target.closest('.grid-column-field');
+        const colDom = target.closest('.grid-field');
         if (cellDom) {
             const fieldId = cellDom.getAttribute('fieldId');
             const recordId = cellDom.getAttribute('recordId');

diff --git a/packages/grid/src/styles/styles.scss b/packages/grid/src/styles/styles.scss
@@ -37,14 +37,14 @@
     .grid-cell {
         min-height: 44px;
         max-height: 148px;
-        overflow: auto;
         display: flex;
         align-items: center;
         width: 300px;
         border-left: 1px solid variables.$gray-200;
-        padding-left: 12px;
+        padding: 0 12px;
         position: relative;
         cursor: pointer;
+        justify-content: space-between;
         .autofill-container {
             position: absolute;
             width: 4px;
@@ -67,6 +67,18 @@
             }
         }
     }
+
+    .grid-field {
+        .grid-field-action {
+            visibility: hidden;
+        }
+        &:hover {
+            .grid-field-action {
+                visibility: visible;
+            }
+        }
+    }
+
     .grid-column-blank {
         flex: 1;
         min-width: 180px;

diff --git a/packages/grid/src/utils/build.ts b/packages/grid/src/utils/build.ts
@@ -1,10 +1,16 @@
-import { AITableFields, AITableRecords } from '../core';
+import { AITableFields, AITableRecords, FieldsMap } from '../core';
 import { AITableGridData, AITableSelection } from '../types';
 
 export const buildGridData = (recordValue: AITableRecords, fieldsValue: AITableFields, selection: AITableSelection): AITableGridData => {
     return {
         type: 'grid',
-        fields: fieldsValue,
+        fields: fieldsValue.map(item=>{
+            return {
+                ...item,
+                icon: item.icon || FieldsMap[item.type].icon,
+                width: item.width || FieldsMap[item.type].width
+            }
+        }),
         records: recordValue.map((item) => {
             return { ...item, checked: selection.selectedRecords.has(item.id) };
         })