feat(settings): ✨ support specify logseq api config in web [skip ci]

src/Agenda3/components/modals/SettingsModal/GeneralSettingsForm.tsx

@@ -1,12 +1,19 @@
-import { Checkbox, Select, Tooltip } from 'antd'
+import { useLocalStorageValue } from '@react-hookz/web'
+import { Checkbox, Input, Select, Tooltip } from 'antd'
 import { useTranslation } from 'react-i18next'
+import { FaRegCircleQuestion } from 'react-icons/fa6'
 
+import { DEFAULT_LOGSEQ_API_CONFIG, LOGSEQ_API_CONFIG_KEY } from '@/Agenda3/helpers/logseq'
 import useSettings from '@/Agenda3/hooks/useSettings'
 import type { Filter, Language } from '@/Agenda3/models/settings'
 
 const GeneralSettingsForm = () => {
  const { t, i18n } = useTranslation()
  const { settings, setSettings } = useSettings()
+ const { value: apiConfig, set: setApiConfig } = useLocalStorageValue(LOGSEQ_API_CONFIG_KEY, {
+ defaultValue: DEFAULT_LOGSEQ_API_CONFIG,
+ initializeWithValue: true,
+ })
 
  const onChange = (key: string, value: number | string | boolean | undefined | Filter[] | string[]) => {
  setSettings(key, value)
@@ -62,6 +69,44 @@ const GeneralSettingsForm = () => {
  ]}
  />
  </div>
+ {import.meta.env.VITE_MODE === 'web' ? (
+ <>
+ <div className="mt-4">
+ <div className="flex cursor-pointer items-center gap-2 text-gray-500">
+ Logseq API Server
+ <FaRegCircleQuestion title="This configuration requires reloading the page to take effect." />
+ </div>
+ <Input
+ className="w-[300px]"
+ placeholder={DEFAULT_LOGSEQ_API_CONFIG.apiServer}
+ value={apiConfig?.apiServer}
+ onChange={(e) =>
+ setApiConfig((config) => ({
+ ...config,
+ apiServer: e.target.value?.trim() || DEFAULT_LOGSEQ_API_CONFIG.apiServer,
+ }))
+ }
+ />
+ </div>
+ <div className="mt-4">
+ <div className="flex cursor-pointer items-center gap-2 text-gray-500">
+ Logseq API Token
+ <FaRegCircleQuestion title="This configuration requires reloading the page to take effect." />
+ </div>
+ <Input.Password
+ className="w-[300px]"
+ placeholder={DEFAULT_LOGSEQ_API_CONFIG.apiToken}
+ value={apiConfig?.apiToken}
+ onChange={(e) =>
+ setApiConfig((config) => ({
+ ...config,
+ apiToken: e.target.value?.trim() || DEFAULT_LOGSEQ_API_CONFIG.apiToken,
+ }))
+ }
+ />
+ </div>
+ </>
+ ) : null}
  </div>
  </>
  )

src/Agenda3/helpers/logseq.ts

@@ -11,3 +11,22 @@ export const navToLogseqBlock = (task: AgendaEntity, currentGraph?: { name: stri
  window.open(`logseq://graph/${currentGraph.name}?block-id=${uuid}`, '_blank')
  }
 }
+
+export const LOGSEQ_API_CONFIG_KEY = 'logseq-api-config'
+export const DEFAULT_LOGSEQ_API_CONFIG = {
+ apiServer: import.meta.env.VITE_LOGSEQ_API_SERVER,
+ apiToken: import.meta.env.VITE_LOGSEQ_API_TOKEN,
+}
+type LogseqApiConfig = { apiServer: string; apiToken: string }
+/**
+ * 获取 logseq api 配置
+ */
+export const getLogseqApiConfig = (): LogseqApiConfig => {
+ try {
+ const _config = JSON.parse(localStorage.getItem(LOGSEQ_API_CONFIG_KEY) || '{}') as LogseqApiConfig
+ return { ...DEFAULT_LOGSEQ_API_CONFIG, ..._config }
+ } catch (error) {
+ console.error('Failed to parse logseq api config', localStorage.getItem(LOGSEQ_API_CONFIG_KEY), error)
+ return DEFAULT_LOGSEQ_API_CONFIG
+ }
+}

src/Agenda3/locales/en/translation.json

@@ -49,5 +49,6 @@
  "month": "month",
  "Exit": "Exit",
  "Title cannot be empty": "Title cannot be empty",
- "Pleasse specify start or deadline": "Pleasse specify start or deadline"
+ "Pleasse specify start or deadline": "Pleasse specify start or deadline",
+ "This configuration requires reloading the page to take effect.": "This configuration requires reloading the page to take effect."
 }

src/Agenda3/locales/zh-CN/translation.json

@@ -49,5 +49,6 @@
  "month": "本月",
  "Exit": "退出",
  "Title cannot be empty": "标题不能为空",
- "Pleasse specify start or deadline": "请指定开始或截止日期"
+ "Pleasse specify start or deadline": "请指定开始或截止日期",
+ "This configuration requires reloading the page to take effect.": "此配置需要重新加载页面才能生效。"
 }

src/main.tsx

@@ -25,6 +25,7 @@ import initializeTodoist from '@/register/todoist'
 import { getInitialSettings, initializeSettings } from '@/util/baseInfo'
 import { listenEsc, log, managePluginTheme, setPluginTheme, toggleAppTransparent } from '@/util/util'
 
+import { getLogseqApiConfig } from './Agenda3/helpers/logseq'
 import { track } from './Agenda3/helpers/umami'
 import Agenda3App from './apps/Agenda3App'
 import TaskListApp from './apps/TaskListApp'
@@ -45,18 +46,15 @@ echarts.use([
  LegendComponent,
 ])
 
-const isDevelopment = import.meta.env.DEV
 let root: Root | null = null
 
 if (import.meta.env.VITE_MODE === 'web') {
  // run in browser
- console.log('[faiz:] === meta.env.VITE_LOGSEQ_API_SERVER', import.meta.env.VITE_LOGSEQ_API_SERVER)
+ const { apiServer, apiToken } = getLogseqApiConfig()
+ console.log('[faiz:] === LOGSEQ_API_SERVER', apiServer)
  console.log(`%c[version]: v${__APP_VERSION__}`, 'background-color: #60A5FA; color: white; padding: 4px;')
  proxyLogseq({
- config: {
- apiServer: import.meta.env.VITE_LOGSEQ_API_SERVER,
- apiToken: import.meta.env.VITE_LOGSEQ_API_TOKEN,
- },
+ config: { apiServer, apiToken },
  settings: window.mockSettings,
  })
  // logseq.provideStyle(`.drawer[data-drawer-name="agenda"] {display: none;}`)