chore: update setting page styles (#1863)

* chore: update setting page styles * chore: update
2 years ago · 6b3748e2a3
parent 6a78887f1d
commit 6b3748e2a3
9 changed files with 62 additions and 143 deletions
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@ -134,10 +134,11 @@ const Header = () => {
              </NavLink>
              <div className="pr-3 pl-1 w-full">
                <button
-                  className="mt-2 w-full py-3 rounded-full flex flex-row justify-center items-center bg-green-600 font-medium text-white dark:opacity-80 hover:shadow hover:opacity-90"
+                  className="mt-2 w-full py-3 rounded-full flex flex-row justify-center items-center bg-green-600 text-white dark:opacity-80 hover:shadow hover:opacity-90"
                  onClick={() => showMemoEditorDialog()}
                >
-                  <Icon.Edit3 className="w-4 h-auto mr-1" /> New
+                  <Icon.Edit3 className="w-4 h-auto mr-1" />
+                  {t("common.new")}
                </button>
              </div>
              <UpgradeVersionView />
--- a/web/src/components/Settings/MyAccountSection.tsx
+++ b/web/src/components/Settings/MyAccountSection.tsx
@ -1,3 +1,4 @@
+import { Button, Input, Textarea } from "@mui/joy";
 import { useTranslation } from "react-i18next";
 import { useUserStore } from "@/store/module";
 import { showCommonDialog } from "../Dialog/CommonDialog";
@ -5,7 +6,6 @@ import showChangePasswordDialog from "../ChangePasswordDialog";
 import Icon from "../Icon";
 import showUpdateAccountDialog from "../UpdateAccountDialog";
 import UserAvatar from "../UserAvatar";
-import "@/less/settings/my-account-section.less";

 const MyAccountSection = () => {
  const { t } = useTranslation();
@ -47,18 +47,23 @@ const MyAccountSection = () => {
          </button>
        </div>
      </div>
-      <div className="section-container openapi-section-container">
+      <div className="section-container openapi-section-container mt-6">
        <p className="title-text">{t("setting.account-section.openapi-title")}</p>
-        <p className="value-text">{openAPIRoute}</p>
-        <span className="btn-danger mt-2" onClick={handleResetOpenIdBtnClick}>
+        <Input className="w-full mb-3" value={openAPIRoute} readOnly />
+        <Button color="warning" className="mb-4" onClick={handleResetOpenIdBtnClick}>
          {t("setting.account-section.reset-api")} <Icon.RefreshCw className="ml-2 h-4 w-4" />
-        </span>
-        <div className="usage-guide-container">
-          <pre>{`POST ${openAPIRoute}\nContent-type: application/json\n{\n  "content": "${t("setting.account-section.openapi-sample-post", {
-            url: window.location.origin,
-            interpolation: { escapeValue: false },
-          })}"\n}`}</pre>
-        </div>
+        </Button>
+        <Textarea
+          className="w-full !font-mono !text-sm mt-4"
+          value={`POST ${openAPIRoute}\nContent-type: application/json\n{\n  "content": "${t(
+            "setting.account-section.openapi-sample-post",
+            {
+              url: window.location.origin,
+              interpolation: { escapeValue: false },
+            }
+          )}"\n}`}
+          readOnly
+        />
      </div>
    </>
  );
--- a/web/src/components/Settings/SystemSection.tsx
+++ b/web/src/components/Settings/SystemSection.tsx
@ -33,10 +33,6 @@ const SystemSection = () => {
    memoDisplayWithUpdatedTs: systemStatus.memoDisplayWithUpdatedTs,
  });
  const [telegramBotToken, setTelegramBotToken] = useState<string>("");
-  const [openAIConfig, setOpenAIConfig] = useState<OpenAIConfig>({
-    key: "",
-    host: "",
-  });

  useEffect(() => {
    globalStore.fetchSystemStatus();
@ -44,11 +40,6 @@ const SystemSection = () => {

  useEffect(() => {
    api.getSystemSetting().then(({ data: { data: systemSettings } }) => {
-      const openAIConfigSetting = systemSettings.find((setting) => setting.name === "openai-config");
-      if (openAIConfigSetting) {
-        setOpenAIConfig(JSON.parse(openAIConfigSetting.value));
-      }
-
      const telegramBotSetting = systemSettings.find((setting) => setting.name === "telegram-bot-token");
      if (telegramBotSetting) {
        setTelegramBotToken(telegramBotSetting.value);
@ -96,33 +87,6 @@ const SystemSection = () => {
    toast.success(t("message.succeed-vacuum-database"));
  };

-  const handleOpenAIConfigKeyChanged = (value: string) => {
-    setOpenAIConfig({
-      ...openAIConfig,
-      key: value,
-    });
-  };
-
-  const handleOpenAIConfigHostChanged = (value: string) => {
-    setOpenAIConfig({
-      ...openAIConfig,
-      host: value,
-    });
-  };
-
-  const handleSaveOpenAIConfig = async () => {
-    try {
-      await api.upsertSystemSetting({
-        name: "openai-config",
-        value: JSON.stringify(openAIConfig),
-      });
-    } catch (error) {
-      console.error(error);
-      return;
-    }
-    toast.success("OpenAI Config updated");
-  };
-
  const handleTelegramBotTokenChanged = (value: string) => {
    setTelegramBotToken(value);
  };
@ -296,37 +260,6 @@ const SystemSection = () => {
        onChange={(event) => handleTelegramBotTokenChanged(event.target.value)}
      />
      <Divider className="!mt-3 !my-4" />
-      <div className="form-label">
-        <div className="flex flex-row items-center">
-          <span className="text-sm mr-1">{t("setting.system-section.openai-api-key")}</span>
-          <HelpButton hint={t("setting.system-section.openai-api-key-description")} url="https://platform.openai.com/account/api-keys" />
-        </div>
-        <Button onClick={handleSaveOpenAIConfig}>{t("common.save")}</Button>
-      </div>
-      <Input
-        className="w-full"
-        sx={{
-          fontFamily: "monospace",
-          fontSize: "14px",
-        }}
-        placeholder={t("setting.system-section.openai-api-key-placeholder")}
-        value={openAIConfig.key}
-        onChange={(event) => handleOpenAIConfigKeyChanged(event.target.value)}
-      />
-      <div className="form-label mt-2">
-        <span className="normal-text">{t("setting.system-section.openai-api-host")}</span>
-      </div>
-      <Input
-        className="w-full"
-        sx={{
-          fontFamily: "monospace",
-          fontSize: "14px",
-        }}
-        placeholder={t("setting.system-section.openai-api-host-placeholder")}
-        value={openAIConfig.host}
-        onChange={(event) => handleOpenAIConfigHostChanged(event.target.value)}
-      />
-      <Divider className="!mt-3 !my-4" />
      <div className="form-label">
        <span className="normal-text">{t("setting.system-section.additional-style")}</span>
        <Button onClick={handleSaveAdditionalStyle}>{t("common.save")}</Button>
--- a/web/src/components/UpdateLocalStorageDialog.tsx
+++ b/web/src/components/UpdateLocalStorageDialog.tsx
@ -51,9 +51,7 @@ const UpdateLocalStorageDialog: React.FC<Props> = (props: Props) => {
      <div className="dialog-content-container max-w-xs">
        <p className="text-sm break-words mb-1">{t("setting.storage-section.update-local-path-description")}</p>
        <div className="flex flex-row">
-          <p className="text-sm text-gray-400 mb-2 break-all">
-            {t("common.e.g")} {"assets/{publicid}"}
-          </p>
+          <p className="text-sm text-gray-400 mb-2 break-all">e.g. {"assets/{publicid}"}</p>
          <HelpButton hint={t("common.learn-more")} url="https://usememos.com/docs/local-storage" />
        </div>
        <Input
--- a/web/src/less/setting.less
+++ b/web/src/less/setting.less
@ -2,7 +2,7 @@
  @apply flex flex-row justify-start items-start relative w-full h-full p-4 rounded-lg bg-white dark:bg-zinc-700 dark:text-gray-200 sm:gap-x-4;

  > .section-selector-container {
-    @apply hidden sm:flex flex-col justify-start items-start sm:w-40 h-auto sm:h-full shrink-0;
+    @apply hidden sm:flex flex-col justify-start items-start sm:w-40 h-auto sm:h-full shrink-0 pb-2 border-r dark:border-r-zinc-600;

    > .section-title {
      @apply text-sm mt-2 sm:mt-4 first:mt-2 mb-1 font-mono text-gray-400;
@ -26,7 +26,7 @@
  }

  > .section-content-container {
-    @apply w-full sm:w-auto grow flex flex-col justify-start items-start h-full sm:h-128 overflow-y-scroll hide-scrollbar;
+    @apply w-full sm:w-auto pl-2 grow flex flex-col justify-start items-start h-full sm:h-128 overflow-y-scroll hide-scrollbar;

    > .section-container {
      @apply flex flex-col justify-start items-start w-full;
--- a/web/src/less/settings/my-account-section.less
+++ b/web/src/less/settings/my-account-section.less
@ -1,17 +0,0 @@
-.openapi-section-container {
-  > .value-text {
-    @apply w-full font-mono text-sm shadow-inner border dark:border-zinc-700 py-2 px-3 rounded leading-6 break-all whitespace-pre-wrap;
-  }
-
-  > .usage-guide-container {
-    @apply flex flex-col justify-start items-start mt-2 w-full;
-
-    > .title-text {
-      @apply my-2 text-sm;
-    }
-
-    > pre {
-      @apply w-full bg-gray-100 dark:bg-zinc-700 shadow-inner py-2 px-3 text-sm rounded font-mono break-all whitespace-pre-wrap;
-    }
-  }
-}
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@ -59,8 +59,8 @@
    "name": "Name",
    "visibility": "Visibility",
    "learn-more": "Learn more",
-    "e.g": "e.g.",
    "beta": "Beta",
+    "new": "New",
    "dialog": {
      "error": "Error",
      "help": "Help",
--- a/web/src/locales/zh-Hans.json
+++ b/web/src/locales/zh-Hans.json
@ -1,41 +1,4 @@
 {
-  "about": {
-    "about-memos": "关于Memos",
-    "memos-description": "Memos是一个基于网页的笔记应用程序，您可以使用它来编写、组织和共享笔记",
-    "no-server-description": "没有为此服务器配置描述。",
-    "other-projects": "其他的项目",
-    "powered-by": "Powered by"
-  },
-  "amount-text": {
-    "day_one": "DAY",
-    "day_other": "DAYS",
-    "memo_one": "MEMO",
-    "memo_other": "MEMOS",
-    "tag_one": "TAG",
-    "tag_other": "TAGS"
-  },
-  "archived": {
-    "archived-memos": "已归档的备忘录",
-    "fetching-data": "请求数据中...",
-    "no-archived-memos": "没有归档的备忘录"
-  },
-  "ask-ai": {
-    "go-to-settings": "前往设置",
-    "not-enabled": "您尚未设置 OpenAI API 密钥。",
-    "placeholder": "随便问",
-    "title": "问 AI",
-    "default-message-group-title": "默认会话",
-    "create-message-group-title": "新建会话",
-    "label-message-group-name-title": "会话名称"
-
-  },
-  "auth": {
-    "host-tip": "你正在注册为管理员用户账号。",
-    "new-password": "新密码",
-    "not-host-tip": "如果你没有账号，请联系站点管理员",
-    "repeat-new-password": "重复新密码",
-    "signup-as-host": "注册为管理员"
-  },
  "common": {
    "about": "关于",
    "admin": "管理",
@ -56,7 +19,6 @@
    "daily-review": "每日回顾",
    "database": "数据库",
    "delete": "删除",
-    "e.g": "例如",
    "edit": "编辑",
    "email": "邮箱",
    "expand": "展开",
@ -103,7 +65,44 @@
    "vacuum": "清理未使用资源",
    "version": "版本",
    "visibility": "可见性",
-    "yourself": "你自己"
+    "yourself": "你自己",
+    "new": "新建"
+  },
+  "about": {
+    "about-memos": "关于Memos",
+    "memos-description": "Memos是一个基于网页的笔记应用程序，您可以使用它来编写、组织和共享笔记",
+    "no-server-description": "没有为此服务器配置描述。",
+    "other-projects": "其他的项目",
+    "powered-by": "Powered by"
+  },
+  "amount-text": {
+    "day_one": "DAY",
+    "day_other": "DAYS",
+    "memo_one": "MEMO",
+    "memo_other": "MEMOS",
+    "tag_one": "TAG",
+    "tag_other": "TAGS"
+  },
+  "archived": {
+    "archived-memos": "已归档的备忘录",
+    "fetching-data": "请求数据中...",
+    "no-archived-memos": "没有归档的备忘录"
+  },
+  "ask-ai": {
+    "go-to-settings": "前往设置",
+    "not-enabled": "您尚未设置 OpenAI API 密钥。",
+    "placeholder": "随便问",
+    "title": "问 AI",
+    "default-message-group-title": "默认会话",
+    "create-message-group-title": "新建会话",
+    "label-message-group-name-title": "会话名称"
+  },
+  "auth": {
+    "host-tip": "你正在注册为管理员用户账号。",
+    "new-password": "新密码",
+    "not-host-tip": "如果你没有账号，请联系站点管理员",
+    "repeat-new-password": "重复新密码",
+    "signup-as-host": "注册为管理员"
  },
  "daily-review": {
    "no-memos": "哎呀，空无一物。",
--- a/web/src/pages/Setting.tsx
+++ b/web/src/pages/Setting.tsx
@ -96,7 +96,7 @@ const Setting = () => {
        </div>
        <div className="section-content-container">
          <Select
-            className="block sm:!hidden"
+            className="block mb-2 sm:!hidden"
            value={state.selectedSection}
            onChange={(_, value) => handleSectionSelectorItemClick(value as SettingSection)}
          >