refactor: update import prefix with alias (#1433)

web/src/components/AboutSiteDialog.tsx

 import { useTranslation } from "react-i18next";
-import { useGlobalStore } from "../store/module";
+import { useGlobalStore } from "@/store/module";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 import GitHubBadge from "./GitHubBadge";

web/src/components/ArchivedMemo.tsx

 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useMemoStore } from "../store/module";
-import * as utils from "../helpers/utils";
-import useToggle from "../hooks/useToggle";
+import { useMemoStore } from "@/store/module";
+import * as utils from "@/helpers/utils";
+import useToggle from "@/hooks/useToggle";
 import MemoContent from "./MemoContent";
 import MemoResources from "./MemoResources";
-import "../less/memo.less";
+import "@/less/memo.less";
 
 interface Props {
   memo: Memo;

web/src/components/ArchivedMemoDialog.tsx

 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useMemoStore } from "../store/module";
-import useLoading from "../hooks/useLoading";
+import { useMemoStore } from "@/store/module";
+import useLoading from "@/hooks/useLoading";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 import ArchivedMemo from "./ArchivedMemo";
-import "../less/archived-memo-dialog.less";
+import "@/less/archived-memo-dialog.less";
 
 type Props = DialogProps;
 

web/src/components/AskAIDialog.tsx

 import { Button, Textarea } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import * as api from "../helpers/api";
-import useLoading from "../hooks/useLoading";
-import { marked } from "../labs/marked";
-import { useMessageStore } from "../store/zustand/message";
+import { useTranslation } from "react-i18next";
+import * as api from "@/helpers/api";
+import useLoading from "@/hooks/useLoading";
+import { marked } from "@/labs/marked";
+import { useMessageStore } from "@/store/zustand/message";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 import showSettingDialog from "./SettingDialog";
-import { useTranslation } from "react-i18next";
 
 type Props = DialogProps;
 

web/src/components/ChangeMemberPasswordDialog.tsx

 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useUserStore } from "../store/module";
+import { useUserStore } from "@/store/module";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 

web/src/components/ChangeMemoCreatedTsDialog.tsx

@@ -2,7 +2,7 @@ import dayjs from "dayjs";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useMemoStore } from "../store/module";
+import { useMemoStore } from "@/store/module";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 

web/src/components/ChangePasswordDialog.tsx

 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useUserStore } from "../store/module";
+import { useUserStore } from "@/store/module";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 

web/src/components/ChangeResourceFilenameDialog.tsx

 import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useResourceStore } from "../store/module";
+import { useResourceStore } from "@/store/module";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
-import "../less/change-resource-filename-dialog.less";
+import "@/less/change-resource-filename-dialog.less";
 
 interface Props extends DialogProps {
   resourceId: ResourceId;

web/src/components/CreateIdentityProviderDialog.tsx

 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { Button, Divider, Input, Radio, RadioGroup, Typography } from "@mui/joy";
-import * as api from "../helpers/api";
-import { UNKNOWN_ID } from "../helpers/consts";
-import { absolutifyLink } from "../helpers/utils";
+import * as api from "@/helpers/api";
+import { UNKNOWN_ID } from "@/helpers/consts";
+import { absolutifyLink } from "@/helpers/utils";
 import { generateDialog } from "./Dialog";
 import Icon from "./Icon";
 

web/src/components/CreateResourceDialog.tsx

 import { Button, Input, Select, Option, Typography, List, ListItem, Autocomplete, Tooltip } from "@mui/joy";
 import React, { useRef, useState } from "react";
 import { toast } from "react-hot-toast";
+import { useTranslation } from "react-i18next";
 import { useResourceStore } from "../store/module";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
-import { useTranslation } from "react-i18next";
 
 const fileTypeAutocompleteOptions = ["image/*", "text/*", "audio/*", "video/*", "application/*"];
 

web/src/components/CreateShortcutDialog.tsx

@@ -2,13 +2,13 @@ import dayjs from "dayjs";
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useShortcutStore, useTagStore } from "../store/module";
-import { filterConsts, getDefaultFilter, relationConsts } from "../helpers/filter";
-import useLoading from "../hooks/useLoading";
+import { useShortcutStore, useTagStore } from "@/store/module";
+import { filterConsts, getDefaultFilter, relationConsts } from "@/helpers/filter";
+import useLoading from "@/hooks/useLoading";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 import Selector from "./base/Selector";
-import "../less/create-shortcut-dialog.less";
+import "@/less/create-shortcut-dialog.less";
 
 interface Props extends DialogProps {
   shortcutId?: ShortcutId;

web/src/components/CreateStorageServiceDialog.tsx

+import { Button, Input, Typography } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { Button, Input, Typography } from "@mui/joy";
-import * as api from "../helpers/api";
+import * as api from "@/helpers/api";
 import { generateDialog } from "./Dialog";
 import Icon from "./Icon";
 import RequiredBadge from "./RequiredBadge";

web/src/components/CreateTagDialog.tsx

@@ -2,10 +2,10 @@ import { Input } from "@mui/joy";
 import React, { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useTagStore } from "../store/module";
-import { getTagSuggestionList } from "../helpers/api";
-import { matcher } from "../labs/marked/matcher";
-import Tag from "../labs/marked/parser/Tag";
+import { useTagStore } from "@/store/module";
+import { getTagSuggestionList } from "@/helpers/api";
+import { matcher } from "@/labs/marked/matcher";
+import Tag from "@/labs/marked/parser/Tag";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 

web/src/components/DailyMemo.tsx

-import * as utils from "../helpers/utils";
+import * as utils from "@/helpers/utils";
 import MemoContent from "./MemoContent";
 import MemoResources from "./MemoResources";
-import "../less/daily-memo.less";
+import "@/less/daily-memo.less";
 
 interface Props {
   memo: Memo;

web/src/components/Dialog/BaseDialog.tsx

+import { CssVarsProvider } from "@mui/joy";
 import { useEffect, useRef } from "react";
 import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
-import { ANIMATION_DURATION } from "../../helpers/consts";
-import store from "../../store";
-import { useDialogStore } from "../../store/module";
-import { CssVarsProvider } from "@mui/joy";
-import theme from "../../theme";
-import "../../less/base-dialog.less";
+import { ANIMATION_DURATION } from "@/helpers/consts";
+import store from "@/store";
+import { useDialogStore } from "@/store/module";
+import theme from "@/theme";
+import "@/less/base-dialog.less";
 
 interface DialogConfig {
   dialogName: string;

web/src/components/Dialog/CommonDialog.tsx

 import { useTranslation } from "react-i18next";
 import Icon from "../Icon";
 import { generateDialog } from "./BaseDialog";
-import "../../less/common-dialog.less";
+import "@/less/common-dialog.less";
 
 type DialogStyle = "info" | "warning";
 

web/src/components/Editor/Editor.tsx

 import { forwardRef, ReactNode, useCallback, useEffect, useImperativeHandle, useRef } from "react";
-import "../../less/editor.less";
+import "@/less/editor.less";
 
 export interface EditorRefActions {
   focus: FunctionType;

web/src/components/EmbedMemoDialog.tsx

+import copy from "copy-to-clipboard";
 import React from "react";
 import { toast } from "react-hot-toast";
-import copy from "copy-to-clipboard";
+import { useTranslation } from "react-i18next";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
-import { useTranslation } from "react-i18next";
 
 interface Props extends DialogProps {
   memoId: MemoId;

web/src/components/GitHubBadge.tsx

 import { useEffect, useState } from "react";
-import * as api from "../helpers/api";
+import * as api from "@/helpers/api";
 import Icon from "./Icon";
 
 const GitHubBadge = () => {

web/src/components/Header.tsx

 import { useEffect } from "react";
 import { NavLink, useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { useLayoutStore, useUserStore } from "../store/module";
-import { resolution } from "../utils/layout";
+import { useLayoutStore, useUserStore } from "@/store/module";
+import { resolution } from "@/utils/layout";
 import Icon from "./Icon";
 import showSettingDialog from "./SettingDialog";
 import showAskAIDialog from "./AskAIDialog";

web/src/components/Image.tsx

 import showPreviewImageDialog from "./PreviewImageDialog";
-import "../less/image.less";
+import "@/less/image.less";
 
 interface Props {
   imgUrls: string[];

web/src/components/Memo.tsx

@@ -4,7 +4,7 @@ import { memo, useEffect, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
-import { useEditorStore, useFilterStore, useMemoStore, useUserStore } from "../store/module";
+import { useEditorStore, useFilterStore, useMemoStore, useUserStore } from "@/store/module";
 import Icon from "./Icon";
 import MemoContent from "./MemoContent";
 import MemoResources from "./MemoResources";
@@ -12,7 +12,7 @@ import showShareMemo from "./ShareMemoDialog";
 import showPreviewImageDialog from "./PreviewImageDialog";
 import showEmbedMemoDialog from "./EmbedMemoDialog";
 import showChangeMemoCreatedTsDialog from "./ChangeMemoCreatedTsDialog";
-import "../less/memo.less";
+import "@/less/memo.less";
 
 interface Props {
   memo: Memo;

web/src/components/MemoContent.tsx

 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { marked } from "../labs/marked";
+import { marked } from "@/labs/marked";
 import Icon from "./Icon";
-import "../less/memo-content.less";
+import "@/less/memo-content.less";
 
 const MAX_EXPAND_HEIGHT = 384;
 

web/src/components/MemoEditor.tsx

@@ -2,18 +2,18 @@ import { isNumber, last, toLower, uniq } from "lodash-es";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { getMatchedNodes } from "../labs/marked";
-import { deleteMemoResource, upsertMemoResource } from "../helpers/api";
-import { TAB_SPACE_WIDTH, UNKNOWN_ID, VISIBILITY_SELECTOR_ITEMS } from "../helpers/consts";
-import { useEditorStore, useGlobalStore, useFilterStore, useMemoStore, useResourceStore, useTagStore, useUserStore } from "../store/module";
-import * as storage from "../helpers/storage";
+import { getMatchedNodes } from "@/labs/marked";
+import { deleteMemoResource, upsertMemoResource } from "@/helpers/api";
+import { TAB_SPACE_WIDTH, UNKNOWN_ID, VISIBILITY_SELECTOR_ITEMS } from "@/helpers/consts";
+import { useEditorStore, useGlobalStore, useFilterStore, useMemoStore, useResourceStore, useTagStore, useUserStore } from "@/store/module";
+import * as storage from "@/helpers/storage";
 import Icon from "./Icon";
 import Selector from "./base/Selector";
 import Editor, { EditorRefActions } from "./Editor/Editor";
 import ResourceIcon from "./ResourceIcon";
 import showResourcesSelectorDialog from "./ResourcesSelectorDialog";
 import showCreateResourceDialog from "./CreateResourceDialog";
-import "../less/memo-editor.less";
+import "@/less/memo-editor.less";
 
 const listItemSymbolList = ["- [ ] ", "- [x] ", "- [X] ", "* ", "- "];
 const emptyOlReg = /^(\d+)\. $/;

web/src/components/MemoFilter.tsx

 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
-import { useFilterStore, useShortcutStore } from "../store/module";
-import * as utils from "../helpers/utils";
-import { getTextWithMemoType } from "../helpers/filter";
+import { useFilterStore, useShortcutStore } from "@/store/module";
+import * as utils from "@/helpers/utils";
+import { getTextWithMemoType } from "@/helpers/filter";
 import Icon from "./Icon";
-import "../less/memo-filter.less";
+import "@/less/memo-filter.less";
 
 const MemoFilter = () => {
   const { t } = useTranslation();

web/src/components/MemoList.tsx

 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useFilterStore, useMemoStore, useShortcutStore, useUserStore } from "../store/module";
-import { TAG_REG, LINK_REG } from "../labs/marked/parser";
-import * as utils from "../helpers/utils";
-import { DEFAULT_MEMO_LIMIT } from "../helpers/consts";
-import { checkShouldShowMemoWithFilters } from "../helpers/filter";
+import { useFilterStore, useMemoStore, useShortcutStore, useUserStore } from "@/store/module";
+import { TAG_REG, LINK_REG } from "@/labs/marked/parser";
+import * as utils from "@/helpers/utils";
+import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
+import { checkShouldShowMemoWithFilters } from "@/helpers/filter";
 import Memo from "./Memo";
-import "../less/memo-list.less";
+import "@/less/memo-list.less";
 
 const MemoList = () => {
   const { t } = useTranslation();

web/src/components/MemoResource.tsx

-import { getResourceUrl } from "../utils/resource";
+import { getResourceUrl } from "@/utils/resource";
 import Icon from "./Icon";
 
 interface Props {

web/src/components/MemoResources.tsx

-import { absolutifyLink } from "../helpers/utils";
-import { getResourceUrl } from "../utils/resource";
+import { absolutifyLink } from "@/helpers/utils";
+import { getResourceUrl } from "@/utils/resource";
 import SquareDiv from "./base/SquareDiv";
 import showPreviewImageDialog from "./PreviewImageDialog";
 import MemoResource from "./MemoResource";
-import "../less/memo-resources.less";
+import "@/less/memo-resources.less";
 
 interface Props {
   resourceList: Resource[];

web/src/components/MobileHeader.tsx

 import { useEffect, useState } from "react";
-import { useLayoutStore, useFilterStore, useShortcutStore } from "../store/module";
+import { useLayoutStore, useFilterStore, useShortcutStore } from "@/store/module";
 import Icon from "./Icon";
 
 interface Props {

web/src/components/PreviewImageDialog.tsx

 import React, { useState } from "react";
-import * as utils from "../helpers/utils";
+import * as utils from "@/helpers/utils";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
-import "../less/preview-image-dialog.less";
+import "@/less/preview-image-dialog.less";
 
 const MIN_SCALE = 0.5;
 const MAX_SCALE = 5;

web/src/components/ResourceCard.tsx

@@ -2,8 +2,8 @@ import dayjs from "dayjs";
 import { useState } from "react";
 import Icon from "./Icon";
 import ResourceCover from "./ResourceCover";
-import "../less/resource-card.less";
 import ResourceItemDropdown from "./ResourceItemDropdown";
+import "@/less/resource-card.less";
 
 const ResourceCard = ({
   resource,

web/src/components/ResourceCover.tsx

 import React from "react";
 import Icon from "./Icon";
-import "../less/resource-cover.less";
+import "@/less/resource-cover.less";
 
 interface ResourceCoverProps {
   resource: Resource;

web/src/components/ResourceSearchBar.tsx

 import { useState, useRef } from "react";
-import Icon from "./Icon";
-import useDebounce from "../hooks/useDebounce";
 import { useTranslation } from "react-i18next";
+import Icon from "./Icon";
+import useDebounce from "@/hooks/useDebounce";
 
 interface ResourceSearchBarProps {
   setQuery: (queryText: string) => void;

web/src/components/ResourcesSelectorDialog.tsx

@@ -2,13 +2,13 @@ import { Button, Checkbox } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import useLoading from "../hooks/useLoading";
-import { useEditorStore, useResourceStore } from "../store/module";
-import { getResourceUrl } from "../utils/resource";
+import useLoading from "@/hooks/useLoading";
+import { useEditorStore, useResourceStore } from "@/store/module";
+import { getResourceUrl } from "@/utils/resource";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 import showPreviewImageDialog from "./PreviewImageDialog";
-import "../less/resources-selector-dialog.less";
+import "@/less/resources-selector-dialog.less";
 
 type Props = DialogProps;
 

web/src/components/SearchBar.tsx

 import { useEffect, useState, useRef } from "react";
-import useDebounce from "../hooks/useDebounce";
-import { useFilterStore, useDialogStore, useLayoutStore } from "../store/module";
-import { resolution } from "../utils/layout";
-import Icon from "./Icon";
 import { useTranslation } from "react-i18next";
+import useDebounce from "@/hooks/useDebounce";
+import { useFilterStore, useDialogStore, useLayoutStore } from "@/store/module";
+import { resolution } from "@/utils/layout";
+import Icon from "./Icon";
 
 const SearchBar = () => {
   const { t } = useTranslation();

web/src/components/SettingDialog.tsx

 import { Option, Select } from "@mui/joy";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useUserStore } from "../store/module";
+import { useUserStore } from "@/store/module";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 import BetaBadge from "./BetaBadge";
@@ -11,7 +11,7 @@ import MemberSection from "./Settings/MemberSection";
 import SystemSection from "./Settings/SystemSection";
 import StorageSection from "./Settings/StorageSection";
 import SSOSection from "./Settings/SSOSection";
-import "../less/setting-dialog.less";
+import "@/less/setting-dialog.less";
 
 type SettingSection = "my-account" | "preference" | "member" | "system" | "storage" | "sso";
 

web/src/components/Settings/MemberSection.tsx

 import React, { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useUserStore } from "../../store/module";
-import * as api from "../../helpers/api";
+import { useUserStore } from "@/store/module";
+import * as api from "@/helpers/api";
 import Dropdown from "../base/Dropdown";
 import { showCommonDialog } from "../Dialog/CommonDialog";
 import showChangeMemberPasswordDialog from "../ChangeMemberPasswordDialog";
-import "../../less/settings/member-section.less";
+import "@/less/settings/member-section.less";
 
 interface State {
   createUserUsername: string;

web/src/components/Settings/MyAccountSection.tsx

 import { useTranslation } from "react-i18next";
-import { useUserStore } from "../../store/module";
+import { useUserStore } from "@/store/module";
 import { showCommonDialog } from "../Dialog/CommonDialog";
 import showChangePasswordDialog from "../ChangePasswordDialog";
 import showUpdateAccountDialog from "../UpdateAccountDialog";
 import UserAvatar from "../UserAvatar";
-import "../../less/settings/my-account-section.less";
+import "@/less/settings/my-account-section.less";
 
 const MyAccountSection = () => {
   const { t } = useTranslation();

web/src/components/Settings/PreferencesSection.tsx

 import { Select, Switch, Option } from "@mui/joy";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { useGlobalStore, useUserStore } from "../../store/module";
-import { VISIBILITY_SELECTOR_ITEMS } from "../../helpers/consts";
+import { useGlobalStore, useUserStore } from "@/store/module";
+import { VISIBILITY_SELECTOR_ITEMS } from "@/helpers/consts";
 import AppearanceSelect from "../AppearanceSelect";
 import LocaleSelect from "../LocaleSelect";
-import "../../less/settings/preferences-section.less";
+import "@/less/settings/preferences-section.less";
 
 const PreferencesSection = () => {
   const { t } = useTranslation();

web/src/components/Settings/SSOSection.tsx

 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import * as api from "../../helpers/api";
+import * as api from "@/helpers/api";
 import showCreateIdentityProviderDialog from "../CreateIdentityProviderDialog";
 import Dropdown from "../base/Dropdown";
 import { showCommonDialog } from "../Dialog/CommonDialog";

web/src/components/Settings/StorageSection.tsx

@@ -2,8 +2,8 @@ import { Divider, Select, Option } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useGlobalStore } from "../../store/module";
-import * as api from "../../helpers/api";
+import { useGlobalStore } from "@/store/module";
+import * as api from "@/helpers/api";
 import showCreateStorageServiceDialog from "../CreateStorageServiceDialog";
 import showUpdateLocalStorageDialog from "../UpdateLocalStorageDialog";
 import Dropdown from "../base/Dropdown";

web/src/components/Settings/SystemSection.tsx

@@ -2,8 +2,8 @@ import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { Button, Divider, Input, Switch, Textarea } from "@mui/joy";
-import { useGlobalStore } from "../../store/module";
-import * as api from "../../helpers/api";
+import { useGlobalStore } from "@/store/module";
+import * as api from "@/helpers/api";
 import showUpdateCustomizedProfileDialog from "../UpdateCustomizedProfileDialog";
 import "@/less/settings/system-section.less";
 

web/src/components/ShareMemoDialog.tsx

@@ -5,17 +5,17 @@ import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import copy from "copy-to-clipboard";
 import { toLower } from "lodash-es";
-import toImage from "../labs/html2image";
-import { useGlobalStore, useMemoStore, useUserStore } from "../store/module";
-import { VISIBILITY_SELECTOR_ITEMS } from "../helpers/consts";
-import * as utils from "../helpers/utils";
-import { getMemoStats } from "../helpers/api";
-import useLoading from "../hooks/useLoading";
+import toImage from "@/labs/html2image";
+import { useGlobalStore, useMemoStore, useUserStore } from "@/store/module";
+import { VISIBILITY_SELECTOR_ITEMS } from "@/helpers/consts";
+import * as utils from "@/helpers/utils";
+import { getMemoStats } from "@/helpers/api";
+import useLoading from "@/hooks/useLoading";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 import MemoContent from "./MemoContent";
 import MemoResources from "./MemoResources";
-import "../less/share-memo-dialog.less";
+import "@/less/share-memo-dialog.less";
 
 interface Props extends DialogProps {
   memo: Memo;

web/src/components/ShortcutList.tsx

 import { useEffect } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useFilterStore, useShortcutStore } from "../store/module";
-import * as utils from "../helpers/utils";
-import useToggle from "../hooks/useToggle";
-import useLoading from "../hooks/useLoading";
+import { useFilterStore, useShortcutStore } from "@/store/module";
+import * as utils from "@/helpers/utils";
+import useToggle from "@/hooks/useToggle";
+import useLoading from "@/hooks/useLoading";
 import Icon from "./Icon";
 import showCreateShortcutDialog from "./CreateShortcutDialog";
 

web/src/components/TagList.tsx

 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useFilterStore, useTagStore } from "../store/module";
-import useToggle from "../hooks/useToggle";
+import { useFilterStore, useTagStore } from "@/store/module";
+import useToggle from "@/hooks/useToggle";
 import Icon from "./Icon";
 import showCreateTagDialog from "./CreateTagDialog";
 

web/src/components/UpdateAccountDialog.tsx

@@ -2,8 +2,8 @@ import { isEqual } from "lodash-es";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useUserStore } from "../store/module";
-import { convertFileToBase64 } from "../helpers/utils";
+import { useUserStore } from "@/store/module";
+import { convertFileToBase64 } from "@/helpers/utils";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 import UserAvatar from "./UserAvatar";

web/src/components/UpdateCustomizedProfileDialog.tsx

 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "react-hot-toast";
-import { useGlobalStore } from "../store/module";
-import * as api from "../helpers/api";
+import { useGlobalStore } from "@/store/module";
+import * as api from "@/helpers/api";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 import LocaleSelect from "./LocaleSelect";

web/src/components/UpdateLocalStorageDialog.tsx

-import { useState } from "react";
 import { Button, Input, Typography } from "@mui/joy";
+import { useState } from "react";
 import { toast } from "react-hot-toast";
-import * as api from "../helpers/api";
+import { useGlobalStore } from "@/store/module";
+import * as api from "@/helpers/api";
 import { generateDialog } from "./Dialog";
 import Icon from "./Icon";
-import { useGlobalStore } from "../store/module";
 
 interface Props extends DialogProps {
   localStoragePath?: string;

web/src/components/UpdateVersionBanner.tsx

 import { useEffect, useState } from "react";
 import { compare } from "semver";
-import * as api from "../helpers/api";
-import * as storage from "../helpers/storage";
-import { useGlobalStore } from "../store/module";
+import * as api from "@/helpers/api";
+import * as storage from "@/helpers/storage";
+import { useGlobalStore } from "@/store/module";
 import Icon from "./Icon";
 
 interface State {

web/src/components/UsageHeatMap.tsx

 import { useCallback, useEffect, useRef, useState } from "react";
 import { useFilterStore, useMemoStore, useUserStore } from "../store/module";
 import { useTranslation } from "react-i18next";
-import { getMemoStats } from "../helpers/api";
-import { DAILY_TIMESTAMP } from "../helpers/consts";
-import * as utils from "../helpers/utils";
-import "../less/usage-heat-map.less";
+import { getMemoStats } from "@/helpers/api";
+import { DAILY_TIMESTAMP } from "@/helpers/consts";
+import * as utils from "@/helpers/utils";
+import "@/less/usage-heat-map.less";
 
 const tableConfig = {
   width: 10,

web/src/components/UserBanner.tsx

 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useUserStore } from "../store/module";
+import { useUserStore } from "@/store/module";
 import Dropdown from "./base/Dropdown";
-import showAboutSiteDialog from "./AboutSiteDialog";
+import Icon from "./Icon";
 import UserAvatar from "./UserAvatar";
+import showAboutSiteDialog from "./AboutSiteDialog";
 import showSettingDialog from "./SettingDialog";
-import Icon from "./Icon";
 
 const UserBanner = () => {
   const { t } = useTranslation();

web/src/components/base/DatePicker.tsx

 import { useEffect, useState } from "react";
-import { DAILY_TIMESTAMP } from "../../helpers/consts";
-import Icon from "../Icon";
-import "../../less/common/date-picker.less";
 import { useTranslation } from "react-i18next";
+import { DAILY_TIMESTAMP } from "@/helpers/consts";
+import Icon from "../Icon";
+import "@/less/common/date-picker.less";
 
 interface DatePickerProps {
   className?: string;

web/src/components/base/Dropdown.tsx

 import { ReactNode, useEffect, useRef } from "react";
-import useToggle from "../../hooks/useToggle";
+import useToggle from "@/hooks/useToggle";
 import Icon from "../Icon";
 
 interface Props {

web/src/components/base/Selector.tsx

+import { Tooltip } from "@mui/joy";
 import { memo, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import useToggle from "../../hooks/useToggle";
+import useToggle from "@/hooks/useToggle";
 import Icon from "../Icon";
-import { Tooltip } from "@mui/joy";
-import "../../less/common/selector.less";
+import "@/less/common/selector.less";
 
 interface SelectorItem {
   text: string;

web/src/helpers/filter.ts

-import { TAG_REG, LINK_REG } from "../labs/marked/parser";
 import dayjs from "dayjs";
+import { TAG_REG, LINK_REG } from "@/labs/marked/parser";
 
 export const relationConsts = [
   { text: "And", value: "AND" },

web/src/hooks/index.ts

+export * from "./useDebounce";
+export * from "./useListStyle";
+export * from "./useLoading";
+export * from "./useTimeoutFn";
+export * from "./useToggle";

web/src/layouts/Root.tsx

 import { Outlet } from "react-router-dom";
-import UpdateVersionBanner from "../components/UpdateVersionBanner";
-import Header from "../components/Header";
+import Header from "@/components/Header";
+import UpdateVersionBanner from "@/components/UpdateVersionBanner";
 
 function Root() {
   return (

web/src/main.tsx

@@ -8,13 +8,14 @@ import App from "./App";
 import theme from "./theme";
 import "./helpers/polyfill";
 import "./i18n";
+import "./less/code-highlight.less";
+import "./css/global.css";
+import "./css/tailwind.css";
+
 import "dayjs/locale/zh";
 import "dayjs/locale/fr";
 import "dayjs/locale/vi";
 import "dayjs/locale/ru";
-import "./less/code-highlight.less";
-import "./css/global.css";
-import "./css/tailwind.css";
 
 dayjs.extend(relativeTime);
 

web/src/pages/Auth.tsx

@@ -2,14 +2,14 @@ import { Button, Divider } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useGlobalStore, useUserStore } from "../store/module";
-import * as api from "../helpers/api";
-import { absolutifyLink } from "../helpers/utils";
-import useLoading from "../hooks/useLoading";
-import Icon from "../components/Icon";
-import AppearanceSelect from "../components/AppearanceSelect";
-import LocaleSelect from "../components/LocaleSelect";
-import "../less/auth.less";
+import { useGlobalStore, useUserStore } from "@/store/module";
+import * as api from "@/helpers/api";
+import { absolutifyLink } from "@/helpers/utils";
+import useLoading from "@/hooks/useLoading";
+import Icon from "@/components/Icon";
+import AppearanceSelect from "@/components/AppearanceSelect";
+import LocaleSelect from "@/components/LocaleSelect";
+import "@/less/auth.less";
 
 const Auth = () => {
   const { t } = useTranslation();

web/src/pages/AuthCallback.tsx

@@ -3,10 +3,10 @@ import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useSearchParams } from "react-router-dom";
-import * as api from "../helpers/api";
-import { absolutifyLink } from "../helpers/utils";
-import { useUserStore } from "../store/module";
-import Icon from "../components/Icon";
+import * as api from "@/helpers/api";
+import { absolutifyLink } from "@/helpers/utils";
+import { useUserStore } from "@/store/module";
+import Icon from "@/components/Icon";
 
 interface State {
   loading: boolean;

web/src/pages/DailyReview.tsx

+import dayjs from "dayjs";
 import { last } from "lodash-es";
 import { useEffect, useRef, useState } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useMemoStore, useUserStore } from "../store/module";
-import { DAILY_TIMESTAMP, DEFAULT_MEMO_LIMIT } from "../helpers/consts";
-import * as utils from "../helpers/utils";
-import MobileHeader from "../components/MobileHeader";
-import useToggle from "../hooks/useToggle";
-import toImage from "../labs/html2image";
-import showPreviewImageDialog from "../components/PreviewImageDialog";
-import Icon from "../components/Icon";
-import DatePicker from "../components/base/DatePicker";
-import DailyMemo from "../components/DailyMemo";
-import dayjs from "dayjs";
+import { useMemoStore, useUserStore } from "@/store/module";
+import { DAILY_TIMESTAMP, DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
+import * as utils from "@/helpers/utils";
+import MobileHeader from "@/components/MobileHeader";
+import useToggle from "@/hooks/useToggle";
+import toImage from "@/labs/html2image";
+import showPreviewImageDialog from "@/components/PreviewImageDialog";
+import Icon from "@/components/Icon";
+import DatePicker from "@/components/base/DatePicker";
+import DailyMemo from "@/components/DailyMemo";
 
 const DailyReview = () => {
   const { t } = useTranslation();

web/src/pages/EmbedMemo.tsx

@@ -3,11 +3,11 @@ import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
-import { UNKNOWN_ID } from "../helpers/consts";
-import { useMemoStore } from "../store/module";
-import useLoading from "../hooks/useLoading";
-import MemoContent from "../components/MemoContent";
-import MemoResources from "../components/MemoResources";
+import { UNKNOWN_ID } from "@/helpers/consts";
+import { useMemoStore } from "@/store/module";
+import useLoading from "@/hooks/useLoading";
+import MemoContent from "@/components/MemoContent";
+import MemoResources from "@/components/MemoResources";
 
 interface State {
   memo: Memo;

web/src/pages/Explore.tsx

 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useFilterStore, useMemoStore } from "../store/module";
-import { TAG_REG } from "../labs/marked/parser";
-import { DEFAULT_MEMO_LIMIT } from "../helpers/consts";
-import useLoading from "../hooks/useLoading";
-import MemoFilter from "../components/MemoFilter";
-import Memo from "../components/Memo";
-import MobileHeader from "../components/MobileHeader";
 import { useLocation } from "react-router-dom";
+import { useFilterStore, useMemoStore } from "@/store/module";
+import { TAG_REG } from "@/labs/marked/parser";
+import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
+import useLoading from "@/hooks/useLoading";
+import MemoFilter from "@/components/MemoFilter";
+import Memo from "@/components/Memo";
+import MobileHeader from "@/components/MobileHeader";
 
 interface State {
   memos: Memo[];

web/src/pages/Home.tsx

 import { useEffect } from "react";
-import { useTranslation } from "react-i18next";
 import { toast } from "react-hot-toast";
-import { useGlobalStore, useUserStore } from "../store/module";
-import MemoEditor from "../components/MemoEditor";
-import MemoFilter from "../components/MemoFilter";
-import MemoList from "../components/MemoList";
-import MobileHeader from "../components/MobileHeader";
-import HomeSidebar from "../components/HomeSidebar";
+import { useTranslation } from "react-i18next";
+import { useGlobalStore, useUserStore } from "@/store/module";
+import MemoEditor from "@/components/MemoEditor";
+import MemoFilter from "@/components/MemoFilter";
+import MemoList from "@/components/MemoList";
+import MobileHeader from "@/components/MobileHeader";
+import HomeSidebar from "@/components/HomeSidebar";
 
 function Home() {
   const { t } = useTranslation();

web/src/pages/Loading.tsx

-import Icon from "../components/Icon";
+import Icon from "@/components/Icon";
 
 function Loading() {
   return (

web/src/pages/MemoDetail.tsx

@@ -3,12 +3,12 @@ import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { Link, useLocation, useParams } from "react-router-dom";
-import { UNKNOWN_ID } from "../helpers/consts";
-import { useGlobalStore, useMemoStore, useUserStore } from "../store/module";
-import useLoading from "../hooks/useLoading";
-import MemoContent from "../components/MemoContent";
-import MemoResources from "../components/MemoResources";
-import "../less/memo-detail.less";
+import { UNKNOWN_ID } from "@/helpers/consts";
+import { useGlobalStore, useMemoStore, useUserStore } from "@/store/module";
+import useLoading from "@/hooks/useLoading";
+import MemoContent from "@/components/MemoContent";
+import MemoResources from "@/components/MemoResources";
+import "@/less/memo-detail.less";
 
 interface State {
   memo: Memo;

web/src/pages/NotFound.tsx

 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-import "../less/not-found.less";
+import "@/less/not-found.less";
 
 const NotFound = () => {
   const { t } = useTranslation();

web/src/pages/ResourcesDashboard.tsx

 import { Button } from "@mui/joy";
+import copy from "copy-to-clipboard";
 import { useEffect, useMemo, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import useLoading from "../hooks/useLoading";
-import { useResourceStore } from "../store/module";
-import Icon from "../components/Icon";
-import ResourceCard from "../components/ResourceCard";
-import ResourceSearchBar from "../components/ResourceSearchBar";
-import MobileHeader from "../components/MobileHeader";
-import Dropdown from "../components/base/Dropdown";
-import ResourceItem from "../components/ResourceItem";
-import { showCommonDialog } from "../components/Dialog/CommonDialog";
-import showChangeResourceFilenameDialog from "../components/ChangeResourceFilenameDialog";
-import copy from "copy-to-clipboard";
-import { getResourceUrl } from "../utils/resource";
-import showPreviewImageDialog from "../components/PreviewImageDialog";
-import showCreateResourceDialog from "../components/CreateResourceDialog";
-import useListStyle from "../hooks/useListStyle";
+import useLoading from "@/hooks/useLoading";
+import useListStyle from "@/hooks/useListStyle";
+import { useResourceStore } from "@/store/module";
+import { getResourceUrl } from "@/utils/resource";
+import Icon from "@/components/Icon";
+import ResourceCard from "@/components/ResourceCard";
+import ResourceSearchBar from "@/components/ResourceSearchBar";
+import MobileHeader from "@/components/MobileHeader";
+import Dropdown from "@/components/base/Dropdown";
+import ResourceItem from "@/components/ResourceItem";
+import { showCommonDialog } from "@/components/Dialog/CommonDialog";
+import showChangeResourceFilenameDialog from "@/components/ChangeResourceFilenameDialog";
+import showPreviewImageDialog from "@/components/PreviewImageDialog";
+import showCreateResourceDialog from "@/components/CreateResourceDialog";
 
 const ResourcesDashboard = () => {
   const { t } = useTranslation();

web/src/router/index.tsx

 import { createBrowserRouter, redirect } from "react-router-dom";
 import { lazy } from "react";
-import { isNullorUndefined } from "../helpers/utils";
-import store from "../store";
-import { initialGlobalState, initialUserState } from "../store/module";
-import DailyReview from "../pages/DailyReview";
-import ResourcesDashboard from "../pages/ResourcesDashboard";
-
-const Root = lazy(() => import("../layouts/Root"));
-const Auth = lazy(() => import("../pages/Auth"));
-const AuthCallback = lazy(() => import("../pages/AuthCallback"));
-const Explore = lazy(() => import("../pages/Explore"));
-const Home = lazy(() => import("../pages/Home"));
-const MemoDetail = lazy(() => import("../pages/MemoDetail"));
-const EmbedMemo = lazy(() => import("../pages/EmbedMemo"));
-const NotFound = lazy(() => import("../pages/NotFound"));
+import { isNullorUndefined } from "@/helpers/utils";
+import store from "@/store";
+import { initialGlobalState, initialUserState } from "@/store/module";
+import DailyReview from "@/pages/DailyReview";
+import ResourcesDashboard from "@/pages/ResourcesDashboard";
+
+const Root = lazy(() => import("@/layouts/Root"));
+const Auth = lazy(() => import("@/pages/Auth"));
+const AuthCallback = lazy(() => import("@/pages/AuthCallback"));
+const Explore = lazy(() => import("@/pages/Explore"));
+const Home = lazy(() => import("@/pages/Home"));
+const MemoDetail = lazy(() => import("@/pages/MemoDetail"));
+const EmbedMemo = lazy(() => import("@/pages/EmbedMemo"));
+const NotFound = lazy(() => import("@/pages/NotFound"));
 
 const initialGlobalStateLoader = (() => {
   let done = false;

web/tsconfig.json

@@ -14,7 +14,10 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["./src"]
 }

web/yarn.lock

@@ -553,6 +553,11 @@
     "@swc/core-win32-ia32-msvc" "1.3.28"
     "@swc/core-win32-x64-msvc" "1.3.28"
 
+"@tailwindcss/line-clamp@^0.4.2":
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz#767cf8e5d528a5d90c9740ca66eb079f5e87d423"
+  integrity sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==
+
 "@types/hoist-non-react-statics@^3.3.1":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"