Merge pull request #477 from easyops-cn/steve/sidebar

Steve/sidebar

Author: weareoutman

bricks/advanced/src/next-table/Table.tsx

@@ -69,6 +69,7 @@ export interface NextTableComponentProps extends NextTableProps {
   onPageChange?: (detail: { page: number; pageSize: number }) => void;
   onPageSizeChange?: (detail: { page: number; pageSize: number }) => void;
   onSort?: (detail?: Sort | Sort[]) => void;
+  onRowClick?: (detail: RecordType) => void;
   onRowSelect?: (detail: {
     keys: (string | number)[];
     rows: RecordType[];
@@ -106,6 +107,7 @@ export const NextTableComponent = forwardRef(function LegacyNextTableComponent(
     expandable,
     childrenColumnName,
     rowDraggable,
+    rowClickable,
     searchFields,
     size,
     showHeader,
@@ -116,6 +118,7 @@ export const NextTableComponent = forwardRef(function LegacyNextTableComponent(
     onPageChange,
     onPageSizeChange,
     onSort,
+    onRowClick,
     onRowSelect,
     onRowExpand,
     onExpandedRowsChange,
@@ -618,6 +621,15 @@ export const NextTableComponent = forwardRef(function LegacyNextTableComponent(
                       },
                     }
               }
+              onRow={
+                rowClickable
+                  ? (record) => ({
+                      onClick: () => {
+                        onRowClick?.(record);
+                      },
+                    })
+                  : undefined
+              }
               onChange={(pagination, _filters, sorter, extra) => {
                 switch (extra.action) {
                   case "paginate": {
@@ -661,7 +673,9 @@ export const NextTableComponent = forwardRef(function LegacyNextTableComponent(
                   }
                 }
               }}
-              className="next-table"
+              className={classNames("next-table", {
+                "row-clickable": rowClickable,
+              })}
             />
           </SortableContext>
         </DndContext>

bricks/advanced/src/next-table/index.tsx

@@ -159,6 +159,14 @@ class EoNextTable extends ReactNextElement implements NextTableProps {
   })
   accessor rowDraggable: boolean | undefined;
 
+  /**
+   * 表格行可点击（激活鼠标手势）
+   */
+  @property({
+    type: Boolean,
+  })
+  accessor rowClickable: boolean | undefined;
+
   /**
    * 进行前端搜索的字段，支持嵌套的写法。不配置的时候默认为对所有 column.dataIndex 进行前端搜索
    */
@@ -260,6 +268,17 @@ class EoNextTable extends ReactNextElement implements NextTableProps {
     this.#sortChangeEvent.emit(detail);
   };
 
+  /**
+   * 行点击时的回调
+   * @detail 被点击的行数据
+   */
+  @event({ type: "row.click" })
+  accessor #rowClickEvent!: EventEmitter<RecordType>;
+
+  #handleRowClick = (detail: RecordType): void => {
+    this.#rowClickEvent.emit(detail);
+  };
+
   /**
    * 行选中项发生变化时的回调
    * @detail 改变后的 rowKey 及行数据
@@ -356,6 +375,7 @@ class EoNextTable extends ReactNextElement implements NextTableProps {
           expandedRowKeys={this.expandedRowKeys}
           childrenColumnName={this.childrenColumnName}
           rowDraggable={this.rowDraggable}
+          rowClickable={this.rowClickable}
           searchFields={this.searchFields}
           size={this.size}
           showHeader={this.showHeader}
@@ -366,6 +386,7 @@ class EoNextTable extends ReactNextElement implements NextTableProps {
           onPageChange={this.#handlePageChange}
           onPageSizeChange={this.#handlePageSizeChange}
           onSort={this.#handleSort}
+          onRowClick={this.#handleRowClick}
           onRowSelect={this.#handleRowSelect}
           onRowExpand={this.#handleRowExpand}
           onExpandedRowsChange={this.#handleExpandedRowsChange}

bricks/advanced/src/next-table/interface.ts

@@ -25,6 +25,7 @@ export interface NextTableProps {
   expandedRowKeys?: (string | number)[];
   childrenColumnName?: string;
   rowDraggable?: boolean;
+  rowClickable?: boolean;
   searchFields?: (string | string[])[];
   size?: TableProps<RecordType>["size"];
   showHeader?: boolean;

bricks/advanced/src/next-table/styles.shadow.css

@@ -207,6 +207,10 @@
   border-inline-end: none;
 }
 
+.next-table.row-clickable .ant-table-tbody > tr {
+  cursor: pointer;
+}
+
 :host([theme-variant="elevo"]) {
   --eo-next-table-header-border-radius: var(--elevo-border-radius);
   --eo-table-head-cell-height: 41px;

bricks/ai-portal/src/elevo-sidebar/SpaceNav.tsx

@@ -63,7 +63,7 @@ export function SpaceNav({
               <WrappedIconButton
                 icon={MODEL_ICON}
                 variant="mini-light"
-                tooltip={t(K.BUSINESS_OBJECTS_SETTINGS)}
+                tooltip={t(K.BUSINESS_OBJECT_MODELS)}
                 tooltipHoist={true}
                 className="button"
                 active={introActive}

bricks/ai-portal/src/elevo-sidebar/i18n.ts

@@ -16,10 +16,10 @@ export enum K {
   UNTITLED = "UNTITLED",
   UNNAMED = "UNNAMED",
   BUSINESS_OBJECTS = "BUSINESS_OBJECTS",
+  BUSINESS_OBJECT_MODELS = "BUSINESS_OBJECT_MODELS",
   SERVICEFLOWS = "SERVICEFLOWS",
   COLLABORATION_SPACES = "COLLABORATION_SPACES",
   CREATE_SERVICEFLOW = "CREATE_SERVICEFLOW",
-  BUSINESS_OBJECTS_SETTINGS = "BUSINESS_OBJECTS_SETTINGS",
 }
 
 const en: Locale = {
@@ -41,7 +41,7 @@ const en: Locale = {
   [K.SERVICEFLOWS]: "Serviceflows",
   [K.COLLABORATION_SPACES]: "Collaboration spaces",
   [K.CREATE_SERVICEFLOW]: "Create serviceflow",
-  [K.BUSINESS_OBJECTS_SETTINGS]: "Business objects settings",
+  [K.BUSINESS_OBJECT_MODELS]: "Business object models",
 };
 
 const zh: Locale = {
@@ -63,7 +63,7 @@ const zh: Locale = {
   [K.SERVICEFLOWS]: "业务流",
   [K.COLLABORATION_SPACES]: "协作空间",
   [K.CREATE_SERVICEFLOW]: "创建业务流",
-  [K.BUSINESS_OBJECTS_SETTINGS]: "业务对象设置",
+  [K.BUSINESS_OBJECT_MODELS]: "业务对象模型",
 };
 
 export const NS = "bricks/ai-portal/elevo-sidebar";