✨ feat: base done

package.json

@@ -60,6 +60,7 @@
     "husky": "^8",
     "lint-staged": "^13.2.0",
     "lodash-es": "^4.17.21",
+    "polished": "^4.2.2",
     "prettier": "^2",
     "prettier-plugin-organize-imports": "^3",
     "prettier-plugin-packagejson": "^2",

src/components/EditorComponent/ConfigProvider/AppContainer.tsx → src/components/ConfigProvider/AppContainer.tsx

@@ -1,16 +1,16 @@
-import { ThemeConfig } from 'antd/es/config-provider/context';
-import type { FC, PropsWithChildren } from 'react';
-import { GetAntdThemeConfig, STUDIO_UI_PREFIX } from '@/components/theme';
+import { GetAntdThemeConfig, STUDIO_UI_PREFIX } from '@/components/theme'
+import { ThemeConfig } from 'antd/es/config-provider/context'
+import type { FC, PropsWithChildren } from 'react'
 
-import { OverrideAntdGlobalStyles } from '../override';
 import {
   createStudioAntdTheme,
   getStudioStylish,
   getStudioToken,
   ThemeAppearance,
   ThemeMode,
   ThemeProvider,
-} from '@/components/theme';
+} from '@/components/theme'
+import { OverrideAntdGlobalStyles } from '../EditorComponent/override'
 
 /**
  * @title 应用容器属性
@@ -19,27 +19,22 @@ export interface AppContainerProps {
   /**
    * @title 主题外观
    */
-  appearance?: ThemeAppearance;
+  appearance?: ThemeAppearance
   /**
    * @title 主题模式
    * @enum ['light', 'dark']
    * @enumNames ['亮色', '暗色']
    * @default 'light'
    */
-  themeMode?: ThemeMode;
+  themeMode?: ThemeMode
   /**
    * @title 主题配置
    * @description 可以传入一个对象或者函数来生成主题配置
    */
-  theme?: ThemeConfig | GetAntdThemeConfig;
+  theme?: ThemeConfig | GetAntdThemeConfig
 }
 
-export const AppContainer: FC<PropsWithChildren<AppContainerProps>> = ({
-  children,
-  theme,
-  appearance,
-  themeMode,
-}) => (
+export const AppContainer: FC<PropsWithChildren<AppContainerProps>> = ({ children, theme, appearance, themeMode }) => (
   <ThemeProvider
     prefixCls={STUDIO_UI_PREFIX}
     appearance={appearance}
@@ -52,4 +47,4 @@ export const AppContainer: FC<PropsWithChildren<AppContainerProps>> = ({
     <OverrideAntdGlobalStyles />
     {children}
   </ThemeProvider>
-);
+)

src/components/ConfigProvider/ConfigProvider.tsx

@@ -0,0 +1,53 @@
+import { createStudioAntdTheme } from '@/components/theme'
+import { useStore } from '@/layouts/useStore'
+import { AntdToken, ThemeAppearance, ThemeProvider, setupStyled, useAntdToken, useThemeMode } from 'antd-style'
+import type { OverrideToken } from 'antd/es/theme/interface'
+import type { FC, ReactNode } from 'react'
+import { ThemeContext } from 'styled-components'
+
+export const useStudioAntdTheme = (appearance: ThemeAppearance) => {
+  const token = useAntdToken()
+  const themeConfig = createStudioAntdTheme(appearance)
+
+  const controlToken: Partial<AntdToken> = {
+    colorBgContainer: token?.colorFillQuaternary,
+    colorBorder: 'transparent',
+    controlHeightSM: 24,
+    controlOutline: 'transparent',
+  }
+
+  themeConfig.components = {
+    Input: controlToken,
+    InputNumber: controlToken,
+    Select: controlToken,
+    Tree: {
+      colorBgContainer: undefined,
+      controlHeightSM: 24,
+    },
+    TreeSelect: controlToken,
+  }
+
+  return themeConfig
+}
+
+export interface ConfigProviderProps {
+  componentToken?: OverrideToken
+  children: ReactNode
+}
+
+export const ConfigProvider: FC<ConfigProviderProps> = ({ children, componentToken }) => {
+  setupStyled({ ThemeContext })
+  const themeMode = useStore()
+  const { appearance } = useThemeMode()
+  const studioTheme = useStudioAntdTheme(appearance)
+
+  if (componentToken) {
+    studioTheme.components = { ...studioTheme.components, ...componentToken }
+  }
+
+  return (
+    <ThemeProvider theme={studioTheme} themeMode={themeMode}>
+      {children}
+    </ThemeProvider>
+  )
+}

src/components/Containers/FlowContainer.tsx

@@ -1,7 +1,7 @@
-import { ImageViewContainer, NODE_IDENTIFIER, NodeContainer } from '@/components'
+import { NODE_IDENTIFIER, NodeContainer } from '@/components'
 import { useAppStore } from '@/store'
 import React from 'react'
-import ReactFlow, { Background, BackgroundVariant, Controls, Panel } from 'reactflow'
+import ReactFlow, { Background, BackgroundVariant, Controls } from 'reactflow'
 import 'reactflow/dist/style.css'
 import { shallow } from 'zustand/shallow'
 
@@ -37,9 +37,6 @@ const FlowContainer: React.FC = () => {
     >
       <Background variant={BackgroundVariant.Dots} />
       <Controls />
-      <Panel position="bottom-center">
-        <ImageViewContainer />
-      </Panel>
     </ReactFlow>
   )
 }

src/components/Containers/index.tsx

@@ -1,7 +1,6 @@
 export { default as ControlPanelContainer } from './ControlPanelContainer'
 export { default as FlowContainer } from './FlowContainer'
 export { default as GalleryContainer } from './GalleryContainer'
-export { default as ImageViewContainer } from './ImageViewContainer'
 export { default as InputContainer } from './InputContainer'
 export { default as NodeContainer } from './NodeContainer'
 export { default as NodePickerContainer } from './NodePickerContainer'

src/components/ControlPanelComponent/GalleryComponent.tsx

@@ -0,0 +1,42 @@
+import { getBackendUrl } from '@/config'
+import { type GalleryItem } from '@/types'
+import { Empty, Image } from 'antd'
+import queryString from 'query-string'
+import React from 'react'
+import styled from 'styled-components'
+
+const ImgList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`
+
+interface Props {
+  gallery: GalleryItem[]
+}
+
+const GalleryComponent: React.FC<Props> = ({ gallery }) => {
+  return gallery.length === 0 ? (
+    <Empty
+      style={{ marginTop: '40vh' }}
+      image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
+      description="Nothing here yet!"
+    />
+  ) : (
+    <Image.PreviewGroup>
+      <ImgList>
+        {gallery
+          .map(({ image }) => (
+            <Image
+              width={125}
+              height={125}
+              key={image.filename}
+              src={getBackendUrl(queryString.stringifyUrl({ url: `/view`, query: image }))}
+            />
+          ))
+          .reverse()}
+      </ImgList>
+    </Image.PreviewGroup>
+  )
+}
+
+export default React.memo(GalleryComponent)

src/components/ControlPanelComponent/Label.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+interface LabelProps {
+  label: string
+  value: string
+}
+const Label: React.FC<LabelProps> = ({ label, value }) => {
+  return (
+    <div>
+      {label}: {value}
+    </div>
+  )
+}
+export default React.memo(Label)

src/components/NodePickerComponent.tsx → src/components/ControlPanelComponent/NodePickerComponent.tsx

@@ -1,5 +1,7 @@
+import { CollapseTitle } from '@/components'
 import type { NodeItem, Widget, WidgetKey } from '@/types'
-import { PlusIcon } from '@radix-ui/react-icons'
+import { Button, Space } from 'antd'
+import { startCase } from 'lodash-es'
 import React from 'react'
 
 interface NodePickerComponentProps {
@@ -18,23 +20,17 @@ const NodePickerComponent: React.FC<NodePickerComponentProps> = ({ widgets, onAd
   }
 
   return (
-    <div className="flex flex-row p-1 h-full w-full overflow-x-scroll">
+    <div>
       {Object.entries(byCategory).map(([cat, items]) => (
-        <div key={cat} className="flex flex-col px-1">
-          <h3 className="text-md font-bold mx-auto">{cat}</h3>
-          <div className="overflow-y-scroll">
+        <CollapseTitle title={startCase(cat)} key={cat}>
+          <Space wrap>
             {items.map((i) => (
-              <div
-                key={i.name}
-                className="text-xs p-1 my-1 bg-stone-800 hover:bg-stone-700 rounded-md cursor-pointer whitespace-nowrap"
-                onClick={() => onAddNode({ widget: i })}
-              >
-                <PlusIcon className="h-4 w-4 inline" />
-                <span className="align-middle px-0.5">{i.name}</span>
-              </div>
+              <Button key={i.name} onClick={() => onAddNode({ widget: i })}>
+                <span className="align-middle px-0.5">{startCase(i.name)}</span>
+              </Button>
             ))}
-          </div>
-        </div>
+          </Space>
+        </CollapseTitle>
       ))}
     </div>
   )