feat: move workspace setting to homepage

Author: QIQI03

client/packages/openblocks-design/src/components/Dropdown.tsx

@@ -152,6 +152,7 @@ export function Dropdown<T extends OptionsType>(props: {
   allowClear?: boolean;
   itemNode?: (value: string) => JSX.Element;
   preNode?: () => JSX.Element;
+  showSearch?: boolean;
 }) {
   const { placement = "right" } = props;
   const valueInfoMap = _.fromPairs(props.options.map((option) => [option.value, option]));
@@ -168,7 +169,7 @@ export function Dropdown<T extends OptionsType>(props: {
           <DropdownContainer placement={placement}>
             <CustomSelect
               dropdownClassName="ob-dropdown-control-select"
-              showSearch={!props.border}
+              showSearch={props.showSearch}
               filterOption={(input, option) => {
                 if (!option?.value) {
                   return false;

client/packages/openblocks-design/src/icons/icon-home-settings-active.svg

@@ -204,3 +204,5 @@ export { ReactComponent as CollapsibleContainerCompIcon } from "./icon-collapsib
 export { ReactComponent as ToggleButtonCompIcon } from "./icon-toggle-button.svg";
 export { ReactComponent as GoogleSheetsIcon } from "./icon-query-GoogleSheets.svg";
 export { ReactComponent as imageEditorIcon } from "./icon-insert-imageEditor.svg";
+export { ReactComponent as HomeSettingsIcon } from "./icon-home-settings.svg";
+export { ReactComponent as HomeSettingsActiveIcon } from "./icon-home-settings-active.svg";

client/packages/openblocks-design/src/icons/icon-home-settings.svg

@@ -113,16 +113,12 @@ class AppIndex extends React.Component<AppIndexProps, any> {
                 FOLDERS_URL,
                 FOLDER_URL,
                 TRASH_URL,
+                SETTING,
               ]}
               // component={ApplicationListPage}
               component={ApplicationHome}
             />
             <LazyRoute path={USER_AUTH_URL} load={() => import("@openblocks-ee/pages/userAuth")} />
-            <LazyRoute
-              path={SETTING}
-              fallback="outAppLayout"
-              load={() => import("pages/setting")}
-            />
             <LazyRoute
               path={INVITE_LANDING_URL}
               load={() => import("pages/common/inviteLanding")}

client/packages/openblocks-design/src/icons/index.ts

@@ -40,6 +40,7 @@ export default function ApplicationSelect(props: IAppSelectProps) {
   }
   return (
     <Dropdown
+      showSearch={true}
       value={value}
       onChange={(id: string) => onChange?.(id)}
       options={applications.map((i) => {

client/packages/openblocks/src/app.tsx

@@ -48,8 +48,8 @@ export const Table = styled(AntdTable)`
   .ant-table-thead:after {
     content: "";
     position: absolute;
-    left: 8px;
-    right: 8px;
+    left: 12px;
+    right: 12px;
     bottom: 0;
     background: #e1e3eb;
     height: 1px;
@@ -59,8 +59,8 @@ export const Table = styled(AntdTable)`
   .ant-table-row:after {
     content: "";
     position: absolute;
-    left: 8px;
-    right: 8px;
+    left: 12px;
+    right: 12px;
     bottom: 0;
     background: #f0f0f0;
     height: 1px;
@@ -105,4 +105,7 @@ export const Table = styled(AntdTable)`
   .ant-table-ping-right:not(.ant-table-has-fix-right) .ant-table-container::after {
     box-shadow: none;
   }
+  .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
+    padding: 16px 12px;
+  }
 `;

client/packages/openblocks/src/components/ApplicationSelect.tsx

@@ -25,7 +25,7 @@ const Sider = styled(Layout.Sider)`
 export default function SideBar(props: SiderProps) {
   const { children, ...otherProps } = props;
   return (
-    <Sider theme="light" width={240} {...otherProps}>
+    <Sider theme="light" width={244} {...otherProps}>
       {props.children}
     </Sider>
   );

client/packages/openblocks/src/components/Table.tsx

@@ -2,22 +2,27 @@ import { PropsWithChildren } from "react";
 import styled from "styled-components";
 
 const Wrapper = styled.div`
-  min-width: 227px;
-  width: 227px;
+  min-width: 232px;
+  width: 232px;
   height: 100%;
   background: #ffffff;
   border-right: 1px solid #f0f0f0;
   box-sizing: border-box;
   border-radius: 2px;
-  padding: 32px 24px 0 24px;
+  padding: 32px 16px 0 16px;
 
   h2 {
     font-weight: 500;
-    font-size: 18px;
+    font-size: 20px;
     color: #222222;
-    line-height: 18px;
     margin: 0 0 20px 12px;
   }
+  .ant-menu-inline .ant-menu-item {
+    margin: 4px 0;
+  }
+  .ant-menu-item:hover, .ant-menu-item-selected {
+    border-radius: 4px;
+  }
 `;
 
 interface IProps {

client/packages/openblocks/src/components/layout/SideBar.tsx

@@ -48,6 +48,7 @@ function AppSelectorPropertyView(props: {
 
   return (
     <Dropdown
+      showSearch={true}
       value={appId}
       options={options}
       label={trans("aggregation.chooseApp")}