From 333aae67957232e6bb191bdc4792e5d2332d6d97 Mon Sep 17 00:00:00 2001 From: Joel Date: Thu, 23 Jan 2025 15:11:05 +0800 Subject: [PATCH] fix: others headless change --- .../text-to-speech/param-config-content.tsx | 32 ++++++------ .../workspace-selector/index.tsx | 14 +++--- web/app/components/base/popover/index.tsx | 10 ++-- web/app/components/base/select/index.tsx | 34 ++++++------- web/app/components/base/select/locale.tsx | 33 ++++++------ web/app/components/develop/code.tsx | 16 +++--- .../header/account-dropdown/index.tsx | 50 +++++++++---------- .../workplace-selector/index.tsx | 14 +++--- .../data-source-notion/operate/index.tsx | 22 ++++---- .../members-page/operation/index.tsx | 18 +++---- .../provider-added-card/priority-selector.tsx | 14 +++--- .../components/header/app-selector/index.tsx | 20 ++++---- .../header/nav/nav-selector/index.tsx | 28 +++++------ 13 files changed, 152 insertions(+), 153 deletions(-) diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx index 360ea8a72a..94775172c4 100644 --- a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx +++ b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx @@ -5,7 +5,7 @@ import React, { Fragment } from 'react' import { usePathname } from 'next/navigation' import { useTranslation } from 'react-i18next' import { RiCloseLine } from '@remixicon/react' -import { Listbox, Transition } from '@headlessui/react' +import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react' import { CheckIcon, ChevronDownIcon } from '@heroicons/react/20/solid' import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks' import type { Item } from '@/app/components/base/select' @@ -67,7 +67,7 @@ const VoiceParamConfig = ({ <>
{t('appDebug.voice.voiceSettings.title')}
-
+
@@ -92,7 +92,7 @@ const VoiceParamConfig = ({ }} >
- {languageItem?.name ? t(`common.voice.language.${languageItem?.value.replace('-', '')}`) : localLanguagePlaceholder} @@ -103,7 +103,7 @@ const VoiceParamConfig = ({ aria-hidden="true" /> - + - {languages.map((item: Item) => ( - `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : '' @@ -133,14 +133,14 @@ const VoiceParamConfig = ({ 'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700', )} > - + ))} - +
@@ -160,7 +160,7 @@ const VoiceParamConfig = ({ }} >
- {voiceItem?.name ?? localVoicePlaceholder} @@ -170,7 +170,7 @@ const VoiceParamConfig = ({ aria-hidden="true" /> - + - {voiceItems?.map((item: Item) => ( - `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : '' @@ -199,14 +199,14 @@ const VoiceParamConfig = ({ 'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700', )} > - + ))} - +
diff --git a/web/app/components/base/notion-page-selector/workspace-selector/index.tsx b/web/app/components/base/notion-page-selector/workspace-selector/index.tsx index 66227d4f4d..39171a02c6 100644 --- a/web/app/components/base/notion-page-selector/workspace-selector/index.tsx +++ b/web/app/components/base/notion-page-selector/workspace-selector/index.tsx @@ -1,7 +1,7 @@ 'use client' import { useTranslation } from 'react-i18next' import { Fragment } from 'react' -import { Menu, Transition } from '@headlessui/react' +import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react' import NotionIcon from '../../notion-icon' import s from './index.module.css' import cn from '@/utils/classnames' @@ -25,7 +25,7 @@ export default function WorkspaceSelector({ { ({ open }) => ( <> - + {currentWorkspace?.workspace_name}
{currentWorkspace?.pages.length}
- + - { items.map(item => ( - +
onSelect(item.workspace_id)} @@ -70,11 +70,11 @@ export default function WorkspaceSelector({ {item.pages.length} {t('common.dataSource.notion.selector.pageSelected')}
- + )) }
- + ) diff --git a/web/app/components/base/popover/index.tsx b/web/app/components/base/popover/index.tsx index 8fd9906a2b..3e5a2285e2 100644 --- a/web/app/components/base/popover/index.tsx +++ b/web/app/components/base/popover/index.tsx @@ -1,4 +1,4 @@ -import { Popover, Transition } from '@headlessui/react' +import { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react' import { Fragment, cloneElement, useRef } from 'react' import cn from '@/utils/classnames' @@ -59,7 +59,7 @@ export default function CustomPopover({ onMouseEnter: () => onMouseEnter(open), })} > - {btnElement} - + - )} - + diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx index 221d70355f..c7e656fe4f 100644 --- a/web/app/components/base/select/index.tsx +++ b/web/app/components/base/select/index.tsx @@ -1,7 +1,7 @@ 'use client' import type { FC } from 'react' import React, { Fragment, useEffect, useState } from 'react' -import { Combobox, Listbox, Transition } from '@headlessui/react' +import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions, Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react' import { ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/react/20/solid' import { RiCheckLine } from '@remixicon/react' import { useTranslation } from 'react-i18next' @@ -100,7 +100,7 @@ const Select: FC = ({
{allowSearch - ? { if (!disabled) @@ -108,28 +108,28 @@ const Select: FC = ({ }} displayValue={(item: Item) => item?.name} /> - : { if (!disabled) setOpen(!open) } } className={classNames(`flex items-center h-9 w-full rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200`, optionClassName)}>
{selectedItem?.name}
- } - } + { if (!disabled) setOpen(!open) } }> {open ? : } - +
{(filteredItems.length > 0 && open) && ( - + {filteredItems.map((item: Item) => ( - @@ -160,9 +160,9 @@ const Select: FC = ({ )} )} - + ))} - + )}
@@ -209,9 +209,9 @@ const SimpleSelect: FC = ({ }} >
- {renderTrigger && {renderTrigger(selectedItem)}} + {renderTrigger && {renderTrigger(selectedItem)}} {!renderTrigger && ( - + {selectedItem?.name ?? localPlaceholder} {(selectedItem && !notClearable) @@ -233,7 +233,7 @@ const SimpleSelect: FC = ({ /> )} - + )} {!disabled && ( @@ -244,9 +244,9 @@ const SimpleSelect: FC = ({ leaveTo="opacity-0" > - + {items.map((item: Item) => ( - classNames( @@ -275,9 +275,9 @@ const SimpleSelect: FC = ({ )} )} - + ))} - + )}
diff --git a/web/app/components/base/select/locale.tsx b/web/app/components/base/select/locale.tsx index 8b89c66950..69b8b48be2 100644 --- a/web/app/components/base/select/locale.tsx +++ b/web/app/components/base/select/locale.tsx @@ -1,7 +1,8 @@ 'use client' -import { Menu, Transition } from '@headlessui/react' +import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react' import { Fragment } from 'react' import { GlobeAltIcon } from '@heroicons/react/24/outline' +import cn from '@/utils/classnames' type ISelectProps = { items: Array<{ value: string; name: string }> @@ -21,14 +22,14 @@ export default function Select({
- +
- +
{items.map((item) => { - return + return {({ active }) => ( )} - + })}
- +
@@ -77,9 +77,9 @@ export function InputSelect({
- + {item?.name} - +
- +
{items.map((item) => { - return + return {({ active }) => ( )} - + })}
- +
diff --git a/web/app/components/develop/code.tsx b/web/app/components/develop/code.tsx index c1fbaa1cf8..9d015064ab 100644 --- a/web/app/components/develop/code.tsx +++ b/web/app/components/develop/code.tsx @@ -7,7 +7,7 @@ import { useRef, useState, } from 'react' -import { Tab } from '@headlessui/react' +import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react' import { Tag } from './tag' import classNames from '@/utils/classnames' @@ -161,7 +161,7 @@ function CodeGroupHeader({ title, children, selectedIndex }: IChildrenProps) { )} {hasTabs && ( - + {Children.map(children, (child, childIndex) => ( ))} - + )} ) @@ -189,13 +189,13 @@ function CodeGroupPanels({ children, targetCode, ...props }: ICodeGroupPanelsPro if (hasTabs) { return ( - + {Children.map(children, child => ( - + {child} - + ))} - + ) } @@ -260,7 +260,7 @@ export function CodeGroup({ children, title, inputs, targetCode, ...props }: ICh ) const tabGroupProps = useTabGroupProps(languages) const hasTabs = Children.count(children) > 1 - const Container = hasTabs ? Tab.Group : 'div' + const Container = hasTabs ? TabGroup : 'div' const containerProps = hasTabs ? tabGroupProps : {} const headerProps = hasTabs ? { selectedIndex: tabGroupProps.selectedIndex } diff --git a/web/app/components/header/account-dropdown/index.tsx b/web/app/components/header/account-dropdown/index.tsx index e92b16fd67..4ce93469c9 100644 --- a/web/app/components/header/account-dropdown/index.tsx +++ b/web/app/components/header/account-dropdown/index.tsx @@ -5,7 +5,7 @@ import { useRouter } from 'next/navigation' import { useContext } from 'use-context-selector' import { RiArrowDownSLine, RiLogoutBoxRLine } from '@remixicon/react' import Link from 'next/link' -import { Menu, Transition } from '@headlessui/react' +import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react' import Indicator from '../indicator' import AccountAbout from '../account-about' import { mailToSupport } from '../utils/util' @@ -59,7 +59,7 @@ export default function AppSelector({ isMobile }: IAppSelector) { { ({ open }) => ( <> - } - + - - +
@@ -98,13 +98,13 @@ export default function AppSelector({ isMobile }: IAppSelector) {
{userProfile.email}
- +
{t('common.userProfile.workspace')}
- + {({ active }) => {t('common.account.account')}
} - - + + {({ active }) =>
setShowAccountSettingModal({ payload: 'members' })}>
{t('common.userProfile.settings')}
} - - {canEmailSupport && + + {canEmailSupport && {({ active }) => {t('common.userProfile.emailSupport')} } - } - + } + {({ active }) => {t('common.userProfile.communityFeedback')} } - - + + {({ active }) => {t('common.userProfile.community')} } - - + + {({ active }) => {t('common.userProfile.helpCenter')} } - - + + {({ active }) => {t('common.userProfile.roadmap')} } - + { document?.body?.getAttribute('data-public-site-about') !== 'hide' && ( - + {({ active }) =>
setAboutVisible(true)}> @@ -191,11 +191,11 @@ export default function AppSelector({ isMobile }: IAppSelector) {
} - + ) } - + {({ active }) =>
handleLogout()}>
} - - + + ) diff --git a/web/app/components/header/account-dropdown/workplace-selector/index.tsx b/web/app/components/header/account-dropdown/workplace-selector/index.tsx index bcc72a7bb3..08860db614 100644 --- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx +++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx @@ -1,7 +1,7 @@ import { Fragment } from 'react' import { useContext } from 'use-context-selector' import { useTranslation } from 'react-i18next' -import { Menu, Transition } from '@headlessui/react' +import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react' import s from './index.module.css' import cn from '@/utils/classnames' import { switchWorkspace } from '@/service/common' @@ -48,7 +48,7 @@ const WorkplaceSelector = () => { { ({ open }) => ( <> - {
{currentWorkspace?.name[0].toLocaleUpperCase()}
{currentWorkspace?.name}
- + { leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95" > - {
{ workspaces.map(workspace => ( - + {({ active }) =>
handleSwitchWorkspace(workspace.id)}> @@ -88,11 +88,11 @@ const WorkplaceSelector = () => { {workspace.current && }
} - + )) }
- + ) diff --git a/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx b/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx index c6c8b9ec39..f4790e52e2 100644 --- a/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx +++ b/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx @@ -8,7 +8,7 @@ import { RiMoreFill, RiStickyNoteAddLine, } from '@remixicon/react' -import { Menu, Transition } from '@headlessui/react' +import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react' import { syncDataSourceNotion, updateDataSourceNotionAction } from '@/service/common' import Toast from '@/app/components/base/toast' @@ -54,9 +54,9 @@ export default function Operate({ { ({ open }) => ( <> - + - + -
- +
- - + +
{t('common.dataSource.notion.sync')}
- + - +
{t('common.dataSource.notion.remove')}
- - + + ) diff --git a/web/app/components/header/account-setting/members-page/operation/index.tsx b/web/app/components/header/account-setting/members-page/operation/index.tsx index 82867ec522..232c30776d 100644 --- a/web/app/components/header/account-setting/members-page/operation/index.tsx +++ b/web/app/components/header/account-setting/members-page/operation/index.tsx @@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next' import { Fragment, useMemo } from 'react' import { useContext } from 'use-context-selector' -import { Menu, Transition } from '@headlessui/react' +import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react' import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/outline' import s from './index.module.css' import { useProviderContext } from '@/context/provider-context' @@ -90,7 +90,7 @@ const Operation = ({ { ({ open }) => ( <> - {RoleMap[member.role] || RoleMap.normal} - + - { roleList.map(role => ( - +
handleUpdateMemberRole(role)}> { role === member.role @@ -133,11 +133,11 @@ const Operation = ({
{t(`common.members.${toHump(role)}Tip`)}
- + )) } - +
@@ -147,8 +147,8 @@ const Operation = ({
- - + + ) diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx index 7e44011ead..388cf8a1a8 100644 --- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx +++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx @@ -1,6 +1,6 @@ import { Fragment } from 'react' import type { FC } from 'react' -import { Popover, Transition } from '@headlessui/react' +import { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react' import { useTranslation } from 'react-i18next' import { RiCheckLine, @@ -31,7 +31,7 @@ const Selector: FC = ({ return ( - + { ({ open }) => ( ) } - + - +
{t('common.modelProvider.card.priorityUse')}
{ options.map(option => ( - +
onSelect(option.key)} @@ -62,11 +62,11 @@ const Selector: FC = ({
{option.text}
{value === option.key && }
- + )) }
- + ) diff --git a/web/app/components/header/app-selector/index.tsx b/web/app/components/header/app-selector/index.tsx index 38451f2605..9e5e902cde 100644 --- a/web/app/components/header/app-selector/index.tsx +++ b/web/app/components/header/app-selector/index.tsx @@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next' import { Fragment, useState } from 'react' import { ChevronDownIcon, PlusIcon } from '@heroicons/react/24/solid' -import { Menu, Transition } from '@headlessui/react' +import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react' import { useRouter } from 'next/navigation' import Indicator from '../indicator' import type { AppDetailResponse } from '@/models/app' @@ -30,7 +30,7 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
- +
- { appItems.map((app: AppDetailResponse) => ( - +
router.push(`/app/${app.id}/${isCurrentWorkspaceEditor ? 'configuration' : 'overview'}`) }> @@ -75,11 +75,11 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
{app.name}
- + )) } )} - {isCurrentWorkspaceEditor && + {isCurrentWorkspaceEditor &&
setShowNewAppDialog(true)}>
{t('common.menus.newApp')}
- + } - + setShowNewAppDialog(false)} - onSuccess={() => {}} + onSuccess={() => { }} /> ) diff --git a/web/app/components/header/nav/nav-selector/index.tsx b/web/app/components/header/nav/nav-selector/index.tsx index ba9c58fadb..a0b97da76b 100644 --- a/web/app/components/header/nav/nav-selector/index.tsx +++ b/web/app/components/header/nav/nav-selector/index.tsx @@ -6,7 +6,7 @@ import { RiArrowDownSLine, RiArrowRightSLine, } from '@remixicon/react' -import { Menu, Transition } from '@headlessui/react' +import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react' import { useRouter } from 'next/navigation' import { debounce } from 'lodash-es' import cn from '@/utils/classnames' @@ -57,7 +57,7 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }: {({ open }) => ( <> - @@ -66,8 +66,8 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }: className={cn('shrink-0 w-3 h-3 ml-1 opacity-50 group-hover:opacity-100', open && '!opacity-100')} aria-hidden="true" /> - - + { navs.map(nav => ( - +
{ if (curNav?.id === nav.id) return @@ -85,7 +85,7 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }: router.push(nav.link) }} title={nav.name}>
- + {!!nav.mode && (
- + )) }
{!isApp && isCurrentWorkspaceEditor && ( - +
onCreate('')} className={cn( 'flex items-center gap-2 px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100', )}> @@ -126,13 +126,13 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
{createText}
- + )} {isApp && isCurrentWorkspaceEditor && ( {({ open }) => ( <> - +
{createText}
- + -
@@ -172,13 +172,13 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }: {t('app.importDSL')}
- + )} )} - + )}