From f588ccff720d40224abc75ca28325bba3e96db0c Mon Sep 17 00:00:00 2001 From: KVOJJJin Date: Fri, 7 Mar 2025 11:56:20 +0800 Subject: [PATCH] Feat: settings dark mode (#15184) --- .../components/billing/billing-page/index.tsx | 18 +- web/app/components/billing/plan/index.tsx | 127 ++++------- web/app/components/billing/pricing/index.tsx | 1 - .../components/billing/progress-bar/index.tsx | 8 +- .../components/billing/upgrade-btn/index.tsx | 27 +-- .../billing/usage-info/apps-info.tsx | 6 +- .../components/billing/usage-info/index.tsx | 55 ++--- .../billing/usage-info/vector-space-info.tsx | 6 +- .../components/custom/custom-page/index.tsx | 44 ++-- .../custom/custom-web-app-brand/index.tsx | 214 ++++++++++++------ .../datasets/create/website/base/field.tsx | 2 +- .../api-based-extension-page/empty.tsx | 18 +- .../api-based-extension-page/index.tsx | 10 +- .../api-based-extension-page/item.tsx | 25 +- .../api-based-extension-page/modal.tsx | 4 +- .../data-source-notion/operate/index.tsx | 42 ++-- .../config-firecrawl-modal.tsx | 16 +- .../config-jina-reader-modal.tsx | 16 +- .../data-source-website/index.tsx | 4 +- .../data-source-page/panel/config-item.tsx | 4 +- .../data-source-page/panel/index.tsx | 20 +- .../header/account-setting/index.tsx | 12 +- .../account-setting/members-page/index.tsx | 38 ++-- .../members-page/invite-modal/index.tsx | 17 +- .../invite-modal/role-selector.tsx | 40 ++-- .../invited-modal/index.module.css | 2 +- .../members-page/invited-modal/index.tsx | 12 +- .../invited-modal/invitation-link.tsx | 12 +- .../members-page/operation/index.module.css | 3 - .../members-page/operation/index.tsx | 54 ++--- web/i18n/en-US/billing.ts | 8 +- web/i18n/en-US/custom.ts | 2 + web/i18n/zh-Hans/billing.ts | 8 +- web/i18n/zh-Hans/custom.ts | 2 + 34 files changed, 450 insertions(+), 427 deletions(-) delete mode 100644 web/app/components/header/account-setting/members-page/operation/index.module.css diff --git a/web/app/components/billing/billing-page/index.tsx b/web/app/components/billing/billing-page/index.tsx index 41068d516e..d892811e5b 100644 --- a/web/app/components/billing/billing-page/index.tsx +++ b/web/app/components/billing/billing-page/index.tsx @@ -4,10 +4,10 @@ import React from 'react' import { useTranslation } from 'react-i18next' import useSWR from 'swr' import { - RiExternalLinkLine, + RiArrowRightUpLine, } from '@remixicon/react' import PlanComp from '../plan' -import { ReceiptList } from '../../base/icons/src/vender/line/financeAndECommerce' +import Divider from '@/app/components/base/divider' import { fetchBillingUrl } from '@/service/billing' import { useAppContext } from '@/context/app-context' import { useProviderContext } from '@/context/provider-context' @@ -25,13 +25,13 @@ const Billing: FC = () => {
{enableBilling && isCurrentWorkspaceManager && billingUrl && ( - -
- -
{t('billing.viewBilling')}
-
- - + <> + + + {t('billing.viewBilling')} + + + )}
) diff --git a/web/app/components/billing/plan/index.tsx b/web/app/components/billing/plan/index.tsx index 63493eefa7..034c999b9c 100644 --- a/web/app/components/billing/plan/index.tsx +++ b/web/app/components/billing/plan/index.tsx @@ -2,36 +2,21 @@ import type { FC } from 'react' import React from 'react' import { useTranslation } from 'react-i18next' +import { + RiBook2Line, + RiBox3Line, + RiFileEditLine, + RiGroup3Line, + RiGroupLine, + RiSquareLine, +} from '@remixicon/react' import { Plan, SelfHostedPlan } from '../type' import VectorSpaceInfo from '../usage-info/vector-space-info' import AppsInfo from '../usage-info/apps-info' import UpgradeBtn from '../upgrade-btn' -import { User01 } from '../../base/icons/src/vender/line/users' -import { MessageFastPlus } from '../../base/icons/src/vender/line/communication' -import { FileUpload } from '../../base/icons/src/vender/line/files' -import cn from '@/utils/classnames' import { useProviderContext } from '@/context/provider-context' import UsageInfo from '@/app/components/billing/usage-info' -const typeStyle = { - [Plan.sandbox]: { - textClassNames: 'text-gray-900', - bg: 'linear-gradient(113deg, rgba(255, 255, 255, 0.51) 3.51%, rgba(255, 255, 255, 0.00) 111.71%), #EAECF0', - }, - [Plan.professional]: { - textClassNames: 'text-[#026AA2]', - bg: 'linear-gradient(113deg, rgba(255, 255, 255, 0.51) 3.51%, rgba(255, 255, 255, 0.00) 111.71%), #E0F2FE', - }, - [Plan.team]: { - textClassNames: 'text-[#3538CD]', - bg: 'linear-gradient(113deg, rgba(255, 255, 255, 0.51) 3.51%, rgba(255, 255, 255, 0.00) 111.71%), #E0EAFF', - }, - [SelfHostedPlan.enterprise]: { - textClassNames: 'text-[#DC6803]', - bg: 'linear-gradient(113deg, rgba(255, 255, 255, 0.51) 3.51%, rgba(255, 255, 255, 0.00) 111.71%), #FFEED3', - }, -} - type Props = { loc: string } @@ -50,74 +35,62 @@ const PlanComp: FC = ({ total, } = plan - const isInHeader = loc === 'header' - return ( -
-
-
-
- {t('billing.currentPlan')} -
-
- {t(`billing.plans.${type}.name`)} -
-
- {(!isInHeader || (isInHeader && type !== Plan.sandbox)) && ( - +
+
+ {plan.type === Plan.sandbox && ( + )} + {plan.type === Plan.professional && ( + + )} + {plan.type === Plan.team && ( + + )} + {(plan.type as any) === SelfHostedPlan.enterprise && ( + + )} +
+
+
+
{t(`billing.plans.${type}.name`)}
+
{t('billing.currentPlan')}
+
+
{t(`billing.plans.${type}.for`)}
+
+ {(plan.type as any) !== SelfHostedPlan.enterprise && ( + + )} +
- {/* Plan detail */} -
- +
+ - - - - {isInHeader && type === Plan.sandbox && ( - - )} + + +
) diff --git a/web/app/components/billing/pricing/index.tsx b/web/app/components/billing/pricing/index.tsx index 28f5ce7122..f8b7242d5e 100644 --- a/web/app/components/billing/pricing/index.tsx +++ b/web/app/components/billing/pricing/index.tsx @@ -60,7 +60,6 @@ const Pricing: FC = ({
{ return ( -
+
diff --git a/web/app/components/billing/upgrade-btn/index.tsx b/web/app/components/billing/upgrade-btn/index.tsx index f080e6bbc4..49b45a8aa0 100644 --- a/web/app/components/billing/upgrade-btn/index.tsx +++ b/web/app/components/billing/upgrade-btn/index.tsx @@ -3,8 +3,8 @@ import type { FC } from 'react' import React from 'react' import { useTranslation } from 'react-i18next' import PremiumBadge from '../../base/premium-badge' +import Button from '@/app/components/base/button' import { SparklesSoft } from '@/app/components/base/icons/src/public/common' -import cn from '@/utils/classnames' import { useModalContext } from '@/context/modal-context' type Props = { @@ -17,23 +17,7 @@ type Props = { loc?: string } -const PlainBtn = ({ className, onClick }: { className?: string; onClick: () => void }) => { - const { t } = useTranslation() - - return ( -
-
- {t('billing.upgradeBtn.plain')} -
-
- ) -} - const UpgradeBtn: FC = ({ - className, isPlain = false, isShort = false, onClick: _onClick, @@ -56,8 +40,13 @@ const UpgradeBtn: FC = ({ } } - if (isPlain) - return + if (isPlain) { + return ( + + ) + } return ( = ({ return ( = ({ const percent = usage / total * 100 const color = (() => { if (percent < LOW) - return '#155EEF' + return 'bg-components-progress-bar-progress-solid' if (percent < MIDDLE) - return '#F79009' + return 'bg-components-progress-warning-progress' - return '#F04438' + return 'bg-components-progress-error-progress' })() return ( -
-
-
- -
{name}
- {tooltip && ( - - {tooltip} -
- } - /> - )} -
-
-
{usage}{unit}
-
/
-
{total === NUM_INFINITE ? t('billing.plansCommon.unlimited') : `${total}${unit}`}
-
+
+ +
+
{name}
+ {tooltip && ( + + {tooltip} +
+ } + /> + )}
-
- +
+ {usage} +
/
+
{total === NUM_INFINITE ? t('billing.plansCommon.unlimited') : `${total}${unit}`}
+
) } diff --git a/web/app/components/billing/usage-info/vector-space-info.tsx b/web/app/components/billing/usage-info/vector-space-info.tsx index bb434c27a2..e578280681 100644 --- a/web/app/components/billing/usage-info/vector-space-info.tsx +++ b/web/app/components/billing/usage-info/vector-space-info.tsx @@ -1,8 +1,10 @@ 'use client' import type { FC } from 'react' import React from 'react' +import { + RiHardDrive3Line, +} from '@remixicon/react' import { useTranslation } from 'react-i18next' -import { ArtificialBrain } from '../../base/icons/src/vender/line/development' import UsageInfo from '../usage-info' import { useProviderContext } from '@/context/provider-context' @@ -22,7 +24,7 @@ const VectorSpaceInfo: FC = ({ return ( { const { t } = useTranslation() const { plan, enableBilling } = useProviderContext() - + const { setShowPricingModal } = useModalContext() const showBillingTip = enableBilling && plan.type === Plan.sandbox const showContact = enableBilling && (plan.type === Plan.professional || plan.type === Plan.team) return (
- { - showBillingTip && ( - -
-
-
{t('custom.upgradeTip.prefix')}
-
{t('custom.upgradeTip.suffix')}
-
- -
- - ) - } - - { - showContact && ( -
- {t('custom.customize.prefix')} - {t('custom.customize.contactUs')} - {t('custom.customize.suffix')} + {showBillingTip && ( +
+
+
{t('custom.upgradeTip.title')}
+
{t('custom.upgradeTip.des')}
- ) - } +
setShowPricingModal()}>{t('billing.upgradeBtn.encourageShort')}
+
+ )} + + {showContact && ( +
+ {t('custom.customize.prefix')} + {t('custom.customize.contactUs')} + {t('custom.customize.suffix')} +
+ )}
) } diff --git a/web/app/components/custom/custom-web-app-brand/index.tsx b/web/app/components/custom/custom-web-app-brand/index.tsx index 0804f2f425..84967bff78 100644 --- a/web/app/components/custom/custom-web-app-brand/index.tsx +++ b/web/app/components/custom/custom-web-app-brand/index.tsx @@ -2,22 +2,28 @@ import type { ChangeEvent } from 'react' import { useState } from 'react' import { useTranslation } from 'react-i18next' import { + RiEditBoxLine, + RiEqualizer2Line, + RiExchange2Fill, + RiImageAddLine, + RiLayoutLeft2Line, RiLoader2Line, + RiPlayLargeLine, } from '@remixicon/react' -import s from './style.module.css' import LogoSite from '@/app/components/base/logo/logo-site' import Switch from '@/app/components/base/switch' import Button from '@/app/components/base/button' -import { MessageDotsCircle } from '@/app/components/base/icons/src/vender/solid/communication' -import { ImagePlus } from '@/app/components/base/icons/src/vender/line/images' +import Divider from '@/app/components/base/divider' import { useProviderContext } from '@/context/provider-context' import { Plan } from '@/app/components/billing/type' import { imageUpload } from '@/app/components/base/image-uploader/utils' import { useToastContext } from '@/app/components/base/toast' +import { BubbleTextMod } from '@/app/components/base/icons/src/vender/solid/communication' import { updateCurrentWorkspace, } from '@/service/common' import { useAppContext } from '@/context/app-context' +import cn from '@/utils/classnames' const ALLOW_FILE_EXTENSIONS = ['svg', 'png'] @@ -107,32 +113,7 @@ const CustomWebAppBrand = () => { return (
-
{t('custom.webapp.title')}
-
-
-
-
- -
-
-
-
-
- { - !webappBrandRemoved && ( -
- POWERED BY - { - webappLogo - ? logo - : - } -
- ) - } -
-
-
+
{t('custom.webapp.removeBrand')} { onChange={handleSwitch} />
-
+
-
{t('custom.webapp.changeLogo')}
-
{t('custom.webapp.changeLogoTip')}
+
{t('custom.webapp.changeLogo')}
+
{t('custom.webapp.changeLogoTip')}
+ {(uploadDisabled || (!webappLogo && !webappBrandRemoved)) && ( + <> + +
+ + )} { !uploading && ( ) @@ -192,6 +177,13 @@ const CustomWebAppBrand = () => { { fileId && ( <> + - ) } -
-
- { - uploadProgress === -1 && ( -
{t('custom.uploadedFail')}
- ) - } + {uploadProgress === -1 && ( +
{t('custom.uploadedFail')}
+ )} +
+
{t('appOverview.overview.appInfo.preview')}
+ +
+
+ {/* chat card */} +
+
+
+
+ +
+
Chatflow App
+
+ +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ {!webappBrandRemoved && ( + <> +
POWERED BY
+ {webappLogo + ? logo + : + } + + )} +
+
+
+
+
+
+
Hello! How can I assist you today?
+ +
+
Talk to Dify
+
+
+
+ {/* workflow card */} +
+
+
+
+ +
+
Workflow App
+
+ +
+
+
+
RUN ONCE
+
RUN BATCH
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+ {!webappBrandRemoved && ( + <> +
POWERED BY
+ {webappLogo + ? logo + : + } + + )} +
+
+
) } diff --git a/web/app/components/datasets/create/website/base/field.tsx b/web/app/components/datasets/create/website/base/field.tsx index 5b5ca90c5d..79cf87497f 100644 --- a/web/app/components/datasets/create/website/base/field.tsx +++ b/web/app/components/datasets/create/website/base/field.tsx @@ -31,7 +31,7 @@ const Field: FC = ({ return (
-
{label}
+
{label}
{isRequired && *} {tooltip && ( { const { t } = useTranslation() return ( -
-
- +
+
+
-
{t('common.apiBasedExtension.title')}
+
{t('common.apiBasedExtension.title')}
- {t('common.apiBasedExtension.link')} +
) diff --git a/web/app/components/header/account-setting/api-based-extension-page/index.tsx b/web/app/components/header/account-setting/api-based-extension-page/index.tsx index 4a0a54079b..832296f77b 100644 --- a/web/app/components/header/account-setting/api-based-extension-page/index.tsx +++ b/web/app/components/header/account-setting/api-based-extension-page/index.tsx @@ -5,6 +5,7 @@ import { } from '@remixicon/react' import Item from './item' import Empty from './empty' +import Button from '@/app/components/base/button' import { useModalContext } from '@/context/modal-context' import { fetchApiBasedExtensionList } from '@/service/common' @@ -41,13 +42,14 @@ const ApiBasedExtensionPage = () => { )) ) } -
- + {t('common.apiBasedExtension.add')} -
+
) } diff --git a/web/app/components/header/account-setting/api-based-extension-page/item.tsx b/web/app/components/header/account-setting/api-based-extension-page/item.tsx index 6d716c638e..a218a23160 100644 --- a/web/app/components/header/account-setting/api-based-extension-page/item.tsx +++ b/web/app/components/header/account-setting/api-based-extension-page/item.tsx @@ -3,8 +3,9 @@ import { useState } from 'react' import { useTranslation } from 'react-i18next' import { RiDeleteBinLine, + RiEditLine, } from '@remixicon/react' -import { Edit02 } from '@/app/components/base/icons/src/vender/line/general' +import Button from '@/app/components/base/button' import type { ApiBasedExtension } from '@/models/common' import { useModalContext } from '@/context/modal-context' import { deleteApiBasedExtension } from '@/service/common' @@ -36,25 +37,25 @@ const Item: FC = ({ } return ( -
+
-
{data.name}
-
{data.api_endpoint}
+
{data.name}
+
{data.api_endpoint}
-
- + {t('common.operation.edit')} -
-
+
+ + {t('common.operation.delete')} +
{ showDeleteConfirm diff --git a/web/app/components/header/account-setting/api-based-extension-page/modal.tsx b/web/app/components/header/account-setting/api-based-extension-page/modal.tsx index ebe5386388..c890be75c6 100644 --- a/web/app/components/header/account-setting/api-based-extension-page/modal.tsx +++ b/web/app/components/header/account-setting/api-based-extension-page/modal.tsx @@ -101,9 +101,9 @@ const ApiBasedExtensionModal: FC = ({ - + {t('common.apiBasedExtension.link')}
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..1e82d80a55 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 @@ -11,6 +11,7 @@ import { import { Menu, Transition } from '@headlessui/react' import { syncDataSourceNotion, updateDataSourceNotionAction } from '@/service/common' import Toast from '@/app/components/base/toast' +import cn from '@/utils/classnames' type OperateProps = { payload: { @@ -23,13 +24,6 @@ export default function Operate({ payload, onAuthAgain, }: OperateProps) { - const itemClassName = ` - flex px-3 py-2 hover:bg-gray-50 text-sm text-gray-700 - cursor-pointer - ` - const itemIconClassName = ` - mr-2 mt-[2px] w-4 h-4 text-gray-500 - ` const { t } = useTranslation() const { mutate } = useSWRConfig() @@ -54,8 +48,8 @@ export default function Operate({ { ({ open }) => ( <> - - + + - +
- +
-
{t('common.dataSource.notion.changeAuthorizedPages')}
-
+
{t('common.dataSource.notion.changeAuthorizedPages')}
+
{payload.total} {t('common.dataSource.notion.pagesAuthorized')}
-
- -
{t('common.dataSource.notion.sync')}
+
+ +
{t('common.dataSource.notion.sync')}
-
-
- -
{t('common.dataSource.notion.remove')}
+
+
+ +
{t('common.dataSource.notion.remove')}
diff --git a/web/app/components/header/account-setting/data-source-page/data-source-website/config-firecrawl-modal.tsx b/web/app/components/header/account-setting/data-source-page/data-source-website/config-firecrawl-modal.tsx index a4a8b9b637..17148ce648 100644 --- a/web/app/components/header/account-setting/data-source-page/data-source-website/config-firecrawl-modal.tsx +++ b/web/app/components/header/account-setting/data-source-page/data-source-website/config-firecrawl-modal.tsx @@ -89,11 +89,11 @@ const ConfigFirecrawlModal: FC = ({ return ( -
-
+
+
-
{t(`${I18N_PREFIX}.configFirecrawl`)}
+
{t(`${I18N_PREFIX}.configFirecrawl`)}
@@ -114,7 +114,7 @@ const ConfigFirecrawlModal: FC = ({ />
- + {t(`${I18N_PREFIX}.getApiKeyLinkText`)} @@ -138,12 +138,12 @@ const ConfigFirecrawlModal: FC = ({
-
-
- +
+
+ {t('common.modelProvider.encrypted.front')} diff --git a/web/app/components/header/account-setting/data-source-page/data-source-website/config-jina-reader-modal.tsx b/web/app/components/header/account-setting/data-source-page/data-source-website/config-jina-reader-modal.tsx index c6d6ad0256..4ddc348a84 100644 --- a/web/app/components/header/account-setting/data-source-page/data-source-website/config-jina-reader-modal.tsx +++ b/web/app/components/header/account-setting/data-source-page/data-source-website/config-jina-reader-modal.tsx @@ -75,11 +75,11 @@ const ConfigJinaReaderModal: FC = ({ return ( -
-
+
+
-
-
- +
+
+ {t('common.modelProvider.encrypted.front')} diff --git a/web/app/components/header/account-setting/data-source-page/data-source-website/index.tsx b/web/app/components/header/account-setting/data-source-page/data-source-website/index.tsx index 628510c5dd..d87fd4396e 100644 --- a/web/app/components/header/account-setting/data-source-page/data-source-website/index.tsx +++ b/web/app/components/header/account-setting/data-source-page/data-source-website/index.tsx @@ -85,10 +85,10 @@ const DataSourceWebsite: FC = ({ provider }) => { logo: ({ className }: { className: string }) => ( item.provider === DataSourceProvider.fireCrawl ? ( -
🔥
+
🔥
) : ( -
+
) diff --git a/web/app/components/header/account-setting/data-source-page/panel/config-item.tsx b/web/app/components/header/account-setting/data-source-page/panel/config-item.tsx index b7fd8193e2..5606297afc 100644 --- a/web/app/components/header/account-setting/data-source-page/panel/config-item.tsx +++ b/web/app/components/header/account-setting/data-source-page/panel/config-item.tsx @@ -52,7 +52,7 @@ const ConfigItem: FC = ({ ? : } -
+
{ payload.isActive ? t(isNotion ? 'common.dataSource.notion.connected' : 'common.dataSource.website.active') @@ -70,7 +70,7 @@ const ConfigItem: FC = ({ { isWebsite && !readOnly && ( -
+
) diff --git a/web/app/components/header/account-setting/data-source-page/panel/index.tsx b/web/app/components/header/account-setting/data-source-page/panel/index.tsx index 8d2ec0a8ca..0cd2d26029 100644 --- a/web/app/components/header/account-setting/data-source-page/panel/index.tsx +++ b/web/app/components/header/account-setting/data-source-page/panel/index.tsx @@ -8,12 +8,13 @@ import ConfigItem from './config-item' import s from './style.module.css' import { DataSourceType } from './types' +import Button from '@/app/components/base/button' import { DataSourceProvider } from '@/models/common' import cn from '@/utils/classnames' type Props = { type: DataSourceType - provider: DataSourceProvider + provider?: DataSourceProvider isConfigured: boolean onConfigure: () => void readOnly: boolean @@ -43,13 +44,13 @@ const Panel: FC = ({ return (
-
+
{t(`common.dataSource.${type}.title`)}
{isWebsite && ( -
- {t('common.dataSource.website.with')} { provider === DataSourceProvider.fireCrawl ? '🔥 Firecrawl' : 'Jina Reader'} +
+ {t('common.dataSource.website.with')} { provider === DataSourceProvider.fireCrawl ? '🔥 Firecrawl' : 'Jina Reader'}
)}
@@ -66,16 +67,13 @@ const Panel: FC = ({ { isConfigured ? ( -
{t('common.dataSource.configure')} -
+ ) : ( <> diff --git a/web/app/components/header/account-setting/index.tsx b/web/app/components/header/account-setting/index.tsx index b3409c226a..7c7f0baa98 100644 --- a/web/app/components/header/account-setting/index.tsx +++ b/web/app/components/header/account-setting/index.tsx @@ -194,12 +194,12 @@ export default function AccountSetting({
-
{activeItem?.name}
- { - activeItem?.description && ( -
{activeItem?.description}
- ) - } +
+ {activeItem?.name} + {activeItem?.description && ( +
{activeItem?.description}
+ )} +
{activeItem?.key === 'provider' && (
{ @@ -35,7 +37,13 @@ const MembersPage = () => { const { locale } = useContext(I18n) const { userProfile, currentWorkspace, isCurrentWorkspaceOwner, isCurrentWorkspaceManager, systemFeatures } = useAppContext() - const { data, mutate } = useSWR({ url: '/workspaces/current/members' }, fetchMembers) + const { data, mutate } = useSWR( + { + url: '/workspaces/current/members', + params: {}, + }, + fetchMembers, + ) const [inviteModalVisible, setInviteModalVisible] = useState(false) const [invitationResults, setInvitationResults] = useState([]) const [invitedModalVisible, setInvitedModalVisible] = useState(false) @@ -47,17 +55,17 @@ const MembersPage = () => { return ( <>
-
- -
-
{currentWorkspace?.name}
+
+ +
+
{currentWorkspace?.name}
{enableBilling && ( -
+
{isNotUnlimitedMemberPlan ? (
{t('billing.plansCommon.member')}{locale !== LanguagesSupported[1] && accounts.length > 1 && 's'}
-
{accounts.length}
+
{accounts.length}
/
{plan.total.teamMembers === NUM_INFINITE ? t('billing.plansCommon.unlimited') : plan.total.teamMembers}
@@ -75,14 +83,10 @@ const MembersPage = () => { {isMemberFull && ( )} -
(isCurrentWorkspaceManager && !isMemberFull) && setInviteModalVisible(true)}> - +
+
@@ -99,18 +103,18 @@ const MembersPage = () => {
{account.name} - {account.status === 'pending' && {t('common.members.pending')}} + {account.status === 'pending' && {t('common.members.pending')}} {userProfile.email === account.email && {t('common.members.you')}}
{account.email}
-
{dayjs(Number((account.last_active_at || account.created_at)) * 1000).locale(locale === 'zh-Hans' ? 'zh-cn' : 'en').fromNow()}
+
{dayjs(Number((account.last_active_at || account.created_at)) * 1000).locale(locale === 'zh-Hans' ? 'zh-cn' : 'en').fromNow()}
{ ((isCurrentWorkspaceOwner && account.role !== 'owner') || (isCurrentWorkspaceManager && !['owner', 'admin'].includes(account.role))) ? - :
{RoleMap[account.role] || RoleMap.normal}
+ :
{RoleMap[account.role] || RoleMap.normal}
}
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx index 197e3ee867..b0bd638475 100644 --- a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx +++ b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx @@ -1,7 +1,7 @@ 'use client' import { useCallback, useState } from 'react' import { useContext } from 'use-context-selector' -import { XMarkIcon } from '@heroicons/react/24/outline' +import { RiCloseLine } from '@remixicon/react' import { useTranslation } from 'react-i18next' import { ReactMultiEmail } from 'react-multi-email' import { RiErrorWarningFill } from '@remixicon/react' @@ -59,10 +59,10 @@ const InviteModal = ({
{ }} className={cn(s.modal)}>
-
{t('common.members.inviteTeamMember')}
- +
{t('common.members.inviteTeamMember')}
+
-
{t('common.members.inviteTeamMemberTip')}
+
{t('common.members.inviteTeamMemberTip')}
{!isEmailSetup && (
@@ -80,19 +80,18 @@ const InviteModal = ({ )}
-
{t('common.members.email')}
+
{t('common.members.email')}
-
+
{email}
removeEmail(index)}> × diff --git a/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx b/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx index d3bbc60cae..3fceb41937 100644 --- a/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx +++ b/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx @@ -34,53 +34,53 @@ const RoleSelector = ({ value, onChange }: RoleSelectorProps) => { onClick={() => setOpen(v => !v)} className='block' > -
-
{t('common.members.invitedAsRole', { role: t(`common.members.${toHump(value)}`) })}
- +
+
{t('common.members.invitedAsRole', { role: t(`common.members.${toHump(value)}`) })}
+
-
+
-
{ +
{ onChange('normal') setOpen(false) }}>
-
{t('common.members.normal')}
-
{t('common.members.normalTip')}
- {value === 'normal' && } +
{t('common.members.normal')}
+
{t('common.members.normalTip')}
+ {value === 'normal' && }
-
{ +
{ onChange('editor') setOpen(false) }}>
-
{t('common.members.editor')}
-
{t('common.members.editorTip')}
- {value === 'editor' && } +
{t('common.members.editor')}
+
{t('common.members.editorTip')}
+ {value === 'editor' && }
-
{ +
{ onChange('admin') setOpen(false) }}>
-
{t('common.members.admin')}
-
{t('common.members.adminTip')}
- {value === 'admin' && } +
{t('common.members.admin')}
+
{t('common.members.adminTip')}
+ {value === 'admin' && }
{datasetOperatorEnabled && ( -
{ +
{ onChange('dataset_operator') setOpen(false) }}>
-
{t('common.members.datasetOperator')}
-
{t('common.members.datasetOperatorTip')}
- {value === 'dataset_operator' && } +
{t('common.members.datasetOperator')}
+
{t('common.members.datasetOperatorTip')}
+ {value === 'dataset_operator' && }
)} diff --git a/web/app/components/header/account-setting/members-page/invited-modal/index.module.css b/web/app/components/header/account-setting/members-page/invited-modal/index.module.css index 4ab9eca574..506b6a0c89 100644 --- a/web/app/components/header/account-setting/members-page/invited-modal/index.module.css +++ b/web/app/components/header/account-setting/members-page/invited-modal/index.module.css @@ -1,7 +1,7 @@ .modal { padding: 32px !important; width: 480px !important; - background: linear-gradient(180deg, rgba(3, 152, 85, 0.05) 0%, rgba(3, 152, 85, 0) 22.44%), #F9FAFB !important; + /* background: linear-gradient(180deg, rgba(3, 152, 85, 0.05) 0%, rgba(3, 152, 85, 0) 22.44%), #F9FAFB !important; */ } .copyIcon { diff --git a/web/app/components/header/account-setting/members-page/invited-modal/index.tsx b/web/app/components/header/account-setting/members-page/invited-modal/index.tsx index fc64d46b06..e4078d10a9 100644 --- a/web/app/components/header/account-setting/members-page/invited-modal/index.tsx +++ b/web/app/components/header/account-setting/members-page/invited-modal/index.tsx @@ -33,25 +33,25 @@ const InvitedModal = ({
-
{t('common.members.invitationSent')}
+
{t('common.members.invitationSent')}
{!IS_CE_EDITION && ( -
{t('common.members.invitationSentTip')}
+
{t('common.members.invitationSentTip')}
)} {IS_CE_EDITION && ( <> -
{t('common.members.invitationSentTip')}
+
{t('common.members.invitationSentTip')}
{ !!successInvitationResults.length && <> -
{t('common.members.invitationLink')}
+
{t('common.members.invitationLink')}
{successInvitationResults.map(item => )} @@ -59,7 +59,7 @@ const InvitedModal = ({ { !!failedInvitationResults.length && <> -
{t('common.members.failedInvitationEmails')}
+
{t('common.members.failedInvitationEmails')}
{ failedInvitationResults.map(item => diff --git a/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx b/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx index fc0ffdd740..86c2a4426e 100644 --- a/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx +++ b/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx @@ -35,21 +35,21 @@ const InvitationLink = ({ }, [isCopied]) return ( -
-
-
+
+
+
{value.url}
-
+
-
-
+
+
diff --git a/web/app/components/header/account-setting/members-page/operation/index.module.css b/web/app/components/header/account-setting/members-page/operation/index.module.css deleted file mode 100644 index 0189b046a3..0000000000 --- a/web/app/components/header/account-setting/members-page/operation/index.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.popup { - box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03); -} \ No newline at end of file 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..1f15888dd6 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 @@ -4,26 +4,12 @@ import { Fragment, useMemo } from 'react' import { useContext } from 'use-context-selector' import { Menu, Transition } from '@headlessui/react' import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/outline' -import s from './index.module.css' import { useProviderContext } from '@/context/provider-context' import cn from '@/utils/classnames' import type { Member } from '@/models/common' import { deleteMemberOrCancelInvitation, updateMemberRole } from '@/service/common' import { ToastContext } from '@/app/components/base/toast' -const itemClassName = ` - flex px-3 py-2 cursor-pointer hover:bg-gray-50 rounded-lg -` -const itemIconClassName = ` - w-4 h-4 mt-[2px] mr-1 text-primary-600 -` -const itemTitleClassName = ` - leading-[20px] text-sm text-gray-700 whitespace-nowrap -` -const itemDescClassName = ` - leading-[18px] text-xs text-gray-500 whitespace-nowrap -` - type IOperationProps = { member: Member operatorRole: string @@ -90,15 +76,9 @@ const Operation = ({ { ({ open }) => ( <> - + {RoleMap[member.role] || RoleMap.normal} - + -
+
{ roleList.map(role => ( -
handleUpdateMemberRole(role)}> +
handleUpdateMemberRole(role)}> { role === member.role - ? - :
+ ? + :
}
-
{t(`common.members.${toHump(role)}`)}
-
{t(`common.members.${toHump(role)}Tip`)}
+
{t(`common.members.${toHump(role)}`)}
+
{t(`common.members.${toHump(role)}Tip`)}
@@ -138,12 +112,12 @@ const Operation = ({ }
-
-
-
+
+
+
-
{t('common.members.removeFromTeam')}
-
{t('common.members.removeFromTeamTip')}
+
{t('common.members.removeFromTeam')}
+
{t('common.members.removeFromTeamTip')}
diff --git a/web/i18n/en-US/billing.ts b/web/i18n/en-US/billing.ts index c39e9c7744..98ee8ac3b6 100644 --- a/web/i18n/en-US/billing.ts +++ b/web/i18n/en-US/billing.ts @@ -10,7 +10,7 @@ const translation = { }, teamMembers: 'Team Members', upgradeBtn: { - plain: 'Upgrade Plan', + plain: 'View Plan', encourage: 'Upgrade Now', encourageShort: 'Upgrade', }, @@ -101,18 +101,22 @@ const translation = { plans: { sandbox: { name: 'Sandbox', + for: 'Free Trial of Core Capabilities', description: 'Free Trial of Core Capabilities', }, professional: { name: 'Professional', + for: 'For Independent Developers/Small Teams', description: 'For Independent Developers/Small Teams', }, team: { name: 'Team', + for: 'For Medium-sized Teams', description: 'For Medium-sized Teams', }, community: { name: 'Community', + for: 'For Individual Users, Small Teams, or Non-commercial Projects', description: 'For Individual Users, Small Teams, or Non-commercial Projects', price: 'Free', btnText: 'Get Started with Community', @@ -125,6 +129,7 @@ const translation = { }, premium: { name: 'Premium', + for: 'For Mid-sized Organizations and Teams', description: 'For Mid-sized Organizations and Teams', price: 'Scalable', priceTip: 'Based on Cloud Marketplace', @@ -140,6 +145,7 @@ const translation = { }, enterprise: { name: 'Enterprise', + for: 'For large-sized Teams', description: 'For Enterprise Require Organization-wide Security, Compliance, Scalability, Control and More Advanced Features', price: 'Custom', priceTip: 'Annual Billing Only', diff --git a/web/i18n/en-US/custom.ts b/web/i18n/en-US/custom.ts index 2d931a8da2..408d4c55e4 100644 --- a/web/i18n/en-US/custom.ts +++ b/web/i18n/en-US/custom.ts @@ -1,6 +1,8 @@ const translation = { custom: 'Customization', upgradeTip: { + title: 'Upgrade your plan', + des: 'Upgrade your plan to customize your brand', prefix: 'Upgrade your plan to', suffix: 'customize your brand.', }, diff --git a/web/i18n/zh-Hans/billing.ts b/web/i18n/zh-Hans/billing.ts index 957f99bed4..a6c676a2a8 100644 --- a/web/i18n/zh-Hans/billing.ts +++ b/web/i18n/zh-Hans/billing.ts @@ -9,7 +9,7 @@ const translation = { vectorSpaceTooltip: '采用高质量索引模式的文档会消耗知识数据存储资源。当知识数据存储达到限制时，将不会上传新文档。', }, upgradeBtn: { - plain: '升级套餐', + plain: '查看套餐', encourage: '立即升级', encourageShort: '升级', }, @@ -100,18 +100,22 @@ const translation = { plans: { sandbox: { name: 'Sandbox', + for: '核心能力的免费试用', description: '核心功能免费试用', }, professional: { name: 'Professional', + for: '适合独立开发者或小团队', description: '对于独立开发者/小团队', }, team: { name: 'Team', + for: '适合中等规模的团队', description: '对于中型团队', }, community: { name: 'Community', + for: '适用于个人用户、小型团队或非商业项目', description: '适用于个人用户、小型团队或非商业项目', price: '免费', btnText: '开始使用', @@ -124,6 +128,7 @@ const translation = { }, premium: { name: 'Premium', + for: '对于中型组织和团队', description: '对于中型组织和团队', price: '可扩展', priceTip: '基于云市场', @@ -139,6 +144,7 @@ const translation = { }, enterprise: { name: 'Enterprise', + for: '适合大人员规模的团队', description: '对于需要组织范围内的安全性、合规性、可扩展性、控制和更高级功能的企业', price: '定制', priceTip: '仅按年计费', diff --git a/web/i18n/zh-Hans/custom.ts b/web/i18n/zh-Hans/custom.ts index f8813831a3..4bec191a60 100644 --- a/web/i18n/zh-Hans/custom.ts +++ b/web/i18n/zh-Hans/custom.ts @@ -1,6 +1,8 @@ const translation = { custom: '定制', upgradeTip: { + title: '升级您的计划', + des: '升级您的计划来定制您的品牌。', prefix: '升级您的计划以', suffix: '定制您的品牌。', },