chore: update setting i18n items

This commit is contained in:
Steven
2023-04-07 19:20:13 +08:00
parent eafe130842
commit 8ca20535ef
7 changed files with 50 additions and 17 deletions

View File

@ -191,7 +191,7 @@ const ConnectionSidebar = () => {
</div>
)}
{databaseList.length > 0 && (
<div className="w-full sticky top-0 z-1 mb-4 mt-2">
<div className="w-full sticky top-0 z-1 my-4">
<Select
className="w-full bg-white px-4 py-3"
value={currentConnectionCtx?.database?.name}

View File

@ -26,7 +26,7 @@ const LocaleSelector = () => {
settingStore.setLocale(locale);
};
return <Select className="w-24" value={locale} itemList={localeItemList} onValueChange={handleLocaleChange} />;
return <Select className="w-28" value={locale} itemList={localeItemList} onValueChange={handleLocaleChange} />;
};
export default LocaleSelector;

View File

@ -1,9 +1,11 @@
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useDebounce } from "react-use";
import { useSettingStore } from "@/store";
import { OpenAIApiConfig } from "@/types";
const OpenAIApiConfigView = () => {
const { t } = useTranslation();
const settingStore = useSettingStore();
const [openAIApiConfig, setOpenAIApiConfig] = useState(settingStore.setting.openAIApiConfig);
@ -24,7 +26,7 @@ const OpenAIApiConfigView = () => {
return (
<>
<h3>OpenAI API configuration</h3>
<h3 className="pl-4 text-sm text-gray-500">{t("setting.openai-api-configuration.self")}</h3>
<div className="w-full border border-gray-200 p-4 rounded-lg">
<div className="flex flex-col">
<label htmlFor="openai-api-key">Key</label>

View File

@ -17,7 +17,7 @@ const SettingModal = (props: Props) => {
return (
<div className={`modal modal-middle ${show && "modal-open"}`}>
<div className="modal-box relative">
<h3 className="font-bold text-lg">Setting</h3>
<h3 className="font-bold text-lg">{t("setting.self")}</h3>
<button className="btn btn-sm btn-circle absolute right-4 top-4" onClick={close}>
<Icon.IoMdClose className="w-5 h-auto" />
</button>
@ -34,19 +34,20 @@ const SettingModal = (props: Props) => {
<WeChatQRCodeView />
</div>
<h3 className="pl-4 text-sm text-gray-500">{t("setting.basic.self")}</h3>
<div className="w-full border border-gray-200 p-4 rounded-lg">
<div className="w-full flex flex-row justify-between items-center gap-2">
<span>Language</span>
<span>{t("setting.basic.language")}</span>
<LocaleSelector />
</div>
</div>
<OpenAIApiConfigView />
<h3>Danger Zone</h3>
<h3 className="pl-4 text-sm text-gray-500">{t("setting.data.self")}</h3>
<div className="w-full border border-red-200 p-4 rounded-lg">
<div className="w-full flex flex-row justify-between items-center gap-2">
<span>Clear all data</span>
<span>{t("setting.data.clear-all-data")}</span>
<ClearDataButton />
</div>
</div>

View File

@ -18,10 +18,10 @@ const Select = (props: Props) => {
return (
<SelectUI.Root value={value} onValueChange={onValueChange}>
<SelectUI.Trigger className={`${className || ""} flex flex-row justify-between items-center border px-2 py-1 rounded-lg`}>
<SelectUI.Trigger className={`${className || ""} flex flex-row justify-between items-center border px-3 py-2 rounded-lg`}>
<SelectUI.Value placeholder={placeholder} />
<SelectUI.Icon className="w-5 h-auto">
<Icon.BiChevronRight className="w-full h-auto opacity-60" />
<SelectUI.Icon className="ml-1 w-5 h-auto shrink-0">
<Icon.BiChevronDown className="w-full h-auto opacity-60" />
</SelectUI.Icon>
</SelectUI.Trigger>
<SelectUI.Portal>
@ -34,7 +34,7 @@ const Select = (props: Props) => {
>
<SelectUI.Viewport className="bg-white border shadow p-1 rounded-lg">
<SelectUI.Group>
{placeholder && <SelectUI.Label className="w-full px-2 py-1 text-sm text-gray-400">{placeholder}</SelectUI.Label>}
{placeholder && <SelectUI.Label className="w-full px-3 mt-2 mb-1 text-sm text-gray-400">{placeholder}</SelectUI.Label>}
{itemList.map((item) => (
<SelectItem key={item.label} value={item.value}>
{item.label}
@ -50,15 +50,17 @@ const Select = (props: Props) => {
interface SelectItemProps {
value: string;
children: ReactNode;
disabled?: boolean;
children?: ReactNode;
className?: string;
}
export type Ref = HTMLDivElement;
const SelectItem = forwardRef<Ref, SelectItemProps>(({ children, ...props }, forwardedRef) => {
const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(({ children, className, ...props }, forwardedRef) => {
return (
<SelectUI.Item
className="w-full px-2 py-1 rounded-lg flex flex-row justify-between items-center cursor-pointer hover:bg-gray-100"
className={`${
className || ""
} w-full px-3 py-2 rounded-lg flex flex-row justify-between items-center cursor-pointer hover:bg-gray-100`}
{...props}
ref={forwardedRef}
>

View File

@ -17,7 +17,7 @@
"connection": {
"self": "Connection",
"new": "Create Connection",
"select-database": "Select your database:"
"select-database": "Select your database"
},
"execution": {
"title": "Execute query",
@ -30,6 +30,20 @@
"editor": {
"placeholder": "Enter your question here..."
},
"setting": {
"self": "Setting",
"basic": {
"self": "Basic",
"language": "Language"
},
"openai-api-configuration": {
"self": "OpenAI API configuration"
},
"data": {
"self": "Data",
"clear-all-data": "Clear all data"
}
},
"social": {
"join-discord-channel": "Join Discord Channel",
"join-wechat-group": "Join WeChat Group"

View File

@ -17,7 +17,7 @@
"connection": {
"self": "连接",
"new": "创建连接",
"select-database": "选择您的数据库"
"select-database": "选择数据库"
},
"execution": {
"title": "执行查询",
@ -30,6 +30,20 @@
"editor": {
"placeholder": "在此输入您的问题..."
},
"setting": {
"self": "设置",
"basic": {
"self": "基础",
"language": "语言"
},
"openai-api-configuration": {
"self": "OpenAI API 配置"
},
"data": {
"self": "数据",
"clear-all-data": "清除所有数据"
}
},
"social": {
"join-discord-channel": "加入 Discord 频道",
"join-wechat-group": "加入微信群"