+
+ + 🤠关于 Memos +
+ +
+
+ 为何做这个？ +
+ 有何特点呢？ +
+ + 🤔 问题反馈 + +
+
+
+
+ );
+};
+
+export default function showAboutSiteDialog(): void {
+ showDialog(
+ {
+ className: "about-site-dialog",
+ },
+ AboutSiteDialog
+ );
+}
diff --git a/web/src/components/BindWxUserIdDialog.tsx b/web/src/components/BindWxUserIdDialog.tsx
new file mode 100644
index 00000000..e8c74374
--- /dev/null
+++ b/web/src/components/BindWxUserIdDialog.tsx
@@ -0,0 +1,79 @@
+import { useEffect, useState } from "react";
+import { userService } from "../services";
+import { showDialog } from "./Dialog";
+import toastHelper from "./Toast";
+import "../less/change-password-dialog.less";
+
+interface Props extends DialogProps {}
+
+const BindWxUserIdDialog: React.FC一个碎片化知识记录工具。
++ 为何做这个？ +
-
+
- + 实践 卢曼卡片盒笔记法； + +
- 用于记录：📅 每日/周计划、💡 突发奇想、📕 读后感... +
- 代替了我在微信上经常使用的“文件传输助手”； +
- 打造一个属于自己的轻量化“卡片”笔记簿； +
+ 有何特点呢？ +
-
+
- + ✨{" "} + + 开源项目 + + +
- 😋 精美且细节的视觉样式； +
- 📑 体验优良的交互逻辑； +
+ + 🤔 问题反馈 + +
+
Enjoy it and have fun~
++
+ Last updated on 2021/11/26 16:17:44 🎉 +
+
+
+ 绑定微信 OpenID
+ +
+
+
+ );
+};
+
+function showBindWxUserIdDialog() {
+ showDialog(
+ {
+ className: "bind-wxid-dialog",
+ },
+ BindWxUserIdDialog
+ );
+}
+
+export default showBindWxUserIdDialog;
diff --git a/web/src/components/ChangePasswordDialog.tsx b/web/src/components/ChangePasswordDialog.tsx
new file mode 100644
index 00000000..e29d8fd6
--- /dev/null
+++ b/web/src/components/ChangePasswordDialog.tsx
@@ -0,0 +1,123 @@
+import { useEffect, useState } from "react";
+import { validate, ValidatorConfig } from "../helpers/validator";
+import { userService } from "../services";
+import { showDialog } from "./Dialog";
+import toastHelper from "./Toast";
+import "../less/change-password-dialog.less";
+
+const validateConfig: ValidatorConfig = {
+ minLength: 4,
+ maxLength: 24,
+ noSpace: true,
+ noChinese: true,
+};
+
+interface Props extends DialogProps {}
+
+const ChangePasswordDialog: React.FC+ 关注微信公众号“小谈闲事”，主动发送任意消息，即可获取 OpenID 。 +
+ +
+
+ 取消
+
+
+ 保存
+
+
+
+
+ 修改密码
+ +
+
+
+
+
+
+ );
+};
+
+function showChangePasswordDialog() {
+ showDialog(
+ {
+ className: "change-password-dialog",
+ },
+ ChangePasswordDialog
+ );
+}
+
+export default showChangePasswordDialog;
diff --git a/web/src/components/CreateQueryDialog.tsx b/web/src/components/CreateQueryDialog.tsx
new file mode 100644
index 00000000..6c4e2909
--- /dev/null
+++ b/web/src/components/CreateQueryDialog.tsx
@@ -0,0 +1,307 @@
+import React, { memo, useCallback, useEffect, useState } from "react";
+import { memoService, queryService } from "../services";
+import { checkShouldShowMemoWithFilters, filterConsts, getDefaultFilter, relationConsts } from "../helpers/filter";
+import useLoading from "../hooks/useLoading";
+import { showDialog } from "./Dialog";
+import toastHelper from "./Toast";
+import Selector from "./common/Selector";
+import "../less/create-query-dialog.less";
+
+interface Props extends DialogProps {
+ queryId?: string;
+}
+
+const CreateQueryDialog: React.FC
+
+ 取消
+
+
+ 保存
+
+
+
+
+ + 🔖 + {queryId ? "编辑检索" : "创建检索"} +
+ +
+
+
+ 标题
+
+
+
+ 过滤器
+
+
+ {filters.map((f, index) => {
+ return (
+
+
+ 添加筛选条件
+
+
+
+
+
+ );
+};
+
+interface MemoFilterInputerProps {
+ index: number;
+ filter: Filter;
+ handleFilterChange: (index: number, filter: Filter) => void;
+ handleFilterRemove: (index: number) => void;
+}
+
+const MemoFilterInputer: React.FC
+
+ 符合条件的 Memo 有 {shownMemoLength} 条
+
+
+
+
+ {index > 0 ? (
+ 
+
+ );
+});
+
+export default function showCreateQueryDialog(queryId?: string): void {
+ showDialog(
+ {
+ className: "create-query-dialog",
+ },
+ CreateQueryDialog,
+ { queryId }
+ );
+}
diff --git a/web/src/components/DailyMemo.tsx b/web/src/components/DailyMemo.tsx
new file mode 100644
index 00000000..9fb8efed
--- /dev/null
+++ b/web/src/components/DailyMemo.tsx
@@ -0,0 +1,43 @@
+import { IMAGE_URL_REG } from "../helpers/consts";
+import utils from "../helpers/utils";
+import { formatMemoContent } from "./Memo";
+import Only from "./common/OnlyWhen";
+import "../less/daily-memo.less";
+
+interface DailyMemo extends FormattedMemo {
+ timeStr: string;
+}
+
+interface Props {
+ memo: Model.Memo;
+}
+
+const DailyMemo: React.FC
+
+
+ );
+};
+
+export default DailyMemo;
diff --git a/web/src/components/DailyMemoDiaryDialog.tsx b/web/src/components/DailyMemoDiaryDialog.tsx
new file mode 100644
index 00000000..78d140d4
--- /dev/null
+++ b/web/src/components/DailyMemoDiaryDialog.tsx
@@ -0,0 +1,135 @@
+import { useEffect, useRef, useState } from "react";
+import { memoService } from "../services";
+import toImage from "../labs/html2image";
+import useToggle from "../hooks/useToggle";
+import useLoading from "../hooks/useLoading";
+import { DAILY_TIMESTAMP } from "../helpers/consts";
+import utils from "../helpers/utils";
+import { showDialog } from "./Dialog";
+import showPreviewImageDialog from "./PreviewImageDialog";
+import DailyMemo from "./DailyMemo";
+import DatePicker from "./common/DatePicker";
+import "../less/daily-memo-diary-dialog.less";
+
+interface Props extends DialogProps {
+ currentDateStamp: DateStamp;
+}
+
+const monthChineseStrArray = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
+const weekdayChineseStrArray = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
+
+const DailyMemoDiaryDialog: React.FC
+ {memo.timeStr}
+
+
+
+ 0}>
+
+
+
+ {imageUrls.map((imgUrl, idx) => (
+ 
+ ))}
+
+
+ ))}
+
+
+
+
+ Daily Memos
+
+ setCurrentDateStamp(currentDateStamp - DAILY_TIMESTAMP)}>
+ 
+
+ setCurrentDateStamp(currentDateStamp + DAILY_TIMESTAMP)}>
+ 
+
+
+ 
+
+ props.destroy()}>
+
+
+
+
+
+ setCurrentDateStamp(currentDateStamp + DAILY_TIMESTAMP)}>
+
+
+
+
+
+ props.destroy()}>
+
+
+
+
+
+ );
+};
+
+export default function showDailyMemoDiaryDialog(datestamp: DateStamp = Date.now()): void {
+ showDialog(
+ {
+ className: "daily-memo-diary-dialog",
+ },
+ DailyMemoDiaryDialog,
+ { currentDateStamp: datestamp }
+ );
+}
diff --git a/web/src/components/DeletedMemo.tsx b/web/src/components/DeletedMemo.tsx
new file mode 100644
index 00000000..6d50f80a
--- /dev/null
+++ b/web/src/components/DeletedMemo.tsx
@@ -0,0 +1,87 @@
+import { IMAGE_URL_REG } from "../helpers/consts";
+import utils from "../helpers/utils";
+import useToggle from "../hooks/useToggle";
+import { memoService } from "../services";
+import Only from "./common/OnlyWhen";
+import Image from "./Image";
+import toastHelper from "./Toast";
+import { formatMemoContent } from "./Memo";
+import "../less/memo.less";
+
+interface Props {
+ memo: Model.Memo;
+ handleDeletedMemoAction: (memoId: string) => void;
+}
+
+const DeletedMemo: React.FC toggleShowDatePicker()}>
+
+ {currentDate.getFullYear()}
+
+
+ {monthChineseStrArray[currentDate.getMonth()]}
+ {currentDate.getDate()}
+ {weekdayChineseStrArray[currentDate.getDay()]}
+
+
+ ) : memos.length === 0 ? (
+ 努力加载中...
+
+
+ ) : (
+ 空空如也
+
+ {memos.map((memo) => (
+
+ )}
+
+ 0}>
+
+
+ );
+};
+
+export default DeletedMemo;
diff --git a/web/src/components/Dialog.tsx b/web/src/components/Dialog.tsx
new file mode 100644
index 00000000..d27d3fa5
--- /dev/null
+++ b/web/src/components/Dialog.tsx
@@ -0,0 +1,81 @@
+import ReactDOM from "react-dom";
+import appContext from "../stores/appContext";
+import Provider from "../labs/Provider";
+import appStore from "../stores/appStore";
+import { ANIMATION_DURATION } from "../helpers/consts";
+import "../less/dialog.less";
+
+interface DialogConfig {
+ className: string;
+ useAppContext?: boolean;
+ clickSpaceDestroy?: boolean;
+}
+
+interface Props extends DialogConfig, DialogProps {
+ children: React.ReactNode;
+}
+
+const BaseDialog: React.FC
+ 删除于 {memo.deletedAtStr}
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 恢复
+
+
+ {showConfirmDeleteBtn ? "确定删除！" : "完全删除"}
+
+
+
+ {imageUrls.map((imgUrl, idx) => (
+
+
+
+ );
+};
+
+export function showDialog e.stopPropagation()}>
+ {children}
+
+
+
+
+ );
+});
+
+export default Editor;
diff --git a/web/src/components/Image.tsx b/web/src/components/Image.tsx
new file mode 100644
index 00000000..16df3e48
--- /dev/null
+++ b/web/src/components/Image.tsx
@@ -0,0 +1,23 @@
+import showPreviewImageDialog from "./PreviewImageDialog";
+import "../less/image.less";
+
+interface Props {
+ imgUrl: string;
+ className?: string;
+}
+
+const Image: React.FC
+
+
+
+ {/* nth */}
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Image;
diff --git a/web/src/components/Memo.tsx b/web/src/components/Memo.tsx
new file mode 100644
index 00000000..65294137
--- /dev/null
+++ b/web/src/components/Memo.tsx
@@ -0,0 +1,176 @@
+import { memo } from "react";
+import { IMAGE_URL_REG, LINK_REG, MEMO_LINK_REG, TAG_REG } from "../helpers/consts";
+import { encodeHtml, parseMarkedToHtml, parseRawTextToHtml } from "../helpers/marked";
+import utils from "../helpers/utils";
+import useToggle from "../hooks/useToggle";
+import { globalStateService, memoService } from "../services";
+import Only from "./common/OnlyWhen";
+import Image from "./Image";
+import showMemoCardDialog from "./MemoCardDialog";
+import showShareMemoImageDialog from "./ShareMemoImageDialog";
+import toastHelper from "./Toast";
+import "../less/memo.less";
+
+interface Props {
+ memo: Model.Memo;
+}
+
+const Memo: React.FC
+
+ 0}>
+
+
+ );
+};
+
+export function formatMemoContent(content: string) {
+ content = encodeHtml(content);
+ content = parseRawTextToHtml(content)
+ .split("
+
+ {memo.createdAtStr}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 查看详情
+
+
+ Mark
+
+
+ 分享
+
+
+ 编辑
+
+
+ {showConfirmDeleteBtn ? "确定删除！" : "删除"}
+
+
+
+ {imageUrls.map((imgUrl, idx) => (
+
+ ") + .map((t) => { + return `
${t !== "" ? t : "
"}
+
+ {linkMemos.length > 0 ? (
+
+
+ {memo.createdAtStr}
+
+
+
+
+
+
+ 0}>
+
+
+
+ {linkMemos.map((_, idx) => {
+ if (idx < 4) {
+ return (
+
+ );
+ } else {
+ return null;
+ }
+ })}
+
+ {imageUrls.map((imgUrl, idx) => (
+
+
+
+ ) : null}
+ {linkedMemos.length > 0 ? (
+ 关联了 {linkMemos.length} 个 MEMO
+ {linkMemos.map((m) => { + const rawtext = parseHtmlToRawText(formatMemoContent(m.content)).replaceAll("\n", " "); + return ( + handleLinkedMemoClick(m)}>
+ {m.dateStr}
+ {rawtext}
+
+ );
+ })}
+
+
+ ) : null}
+
+ );
+};
+
+export default function showMemoCardDialog(memo: Model.Memo): void {
+ showDialog(
+ {
+ className: "memo-card-dialog",
+ },
+ MemoCardDialog,
+ { memo }
+ );
+}
diff --git a/web/src/components/MemoEditor.tsx b/web/src/components/MemoEditor.tsx
new file mode 100644
index 00000000..9986ad18
--- /dev/null
+++ b/web/src/components/MemoEditor.tsx
@@ -0,0 +1,120 @@
+import { useCallback, useContext, useEffect, useMemo, useRef } from "react";
+import appContext from "../stores/appContext";
+import { globalStateService, locationService, memoService } from "../services";
+import utils from "../helpers/utils";
+import { storage } from "../helpers/storage";
+import toastHelper from "./Toast";
+import Editor, { EditorRefActions } from "./Editor/Editor";
+import "../less/memo-editor.less";
+
+interface Props {
+ className?: string;
+ editMemoId?: string;
+}
+
+const MemoEditor: React.FC{linkedMemos.length} 个链接至此的 MEMO
+ {linkedMemos.map((m) => { + const rawtext = parseHtmlToRawText(formatMemoContent(m.content)).replaceAll("\n", " "); + return ( + handleLinkedMemoClick(m)}>
+ {m.dateStr}
+ {rawtext}
+
+ );
+ })}
+
+
+ );
+};
+
+function getEditorContentCache(): string {
+ return storage.get(["editorContentCache"]).editorContentCache ?? "";
+}
+
+function setEditorContentCache(content: string) {
+ storage.set({
+ editorContentCache: content,
+ });
+}
+
+export default MemoEditor;
diff --git a/web/src/components/MemoFilter.tsx b/web/src/components/MemoFilter.tsx
new file mode 100644
index 00000000..bc3c8916
--- /dev/null
+++ b/web/src/components/MemoFilter.tsx
@@ -0,0 +1,68 @@
+import { useContext } from "react";
+import appContext from "../stores/appContext";
+import { locationService, queryService } from "../services";
+import utils from "../helpers/utils";
+import { getTextWithMemoType } from "../helpers/filter";
+import "../less/memo-filter.less";
+
+interface FilterProps {}
+
+const MemoFilter: React.FC正在修改中...
+
+ 筛选：
+
+ );
+};
+
+export default MemoFilter;
diff --git a/web/src/components/MemoList.tsx b/web/src/components/MemoList.tsx
new file mode 100644
index 00000000..7021baf7
--- /dev/null
+++ b/web/src/components/MemoList.tsx
@@ -0,0 +1,114 @@
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import appContext from "../stores/appContext";
+import { locationService, memoService, queryService } from "../services";
+import { IMAGE_URL_REG, LINK_REG, MEMO_LINK_REG, TAG_REG } from "../helpers/consts";
+import utils from "../helpers/utils";
+import { checkShouldShowMemoWithFilters } from "../helpers/filter";
+import Memo from "./Memo";
+import toastHelper from "./Toast";
+import MemoEditor from "./MemoEditor";
+import "../less/memolist.less";
+
+interface Props {}
+
+const MemoList: React.FC {
+ locationService.setMemoFilter("");
+ }}
+ >
+ 🔖 {queryFilter?.title}
+
+ {
+ locationService.setTagQuery("");
+ }}
+ >
+ 🏷️ {tagQuery}
+
+ {
+ locationService.setMemoTypeQuery("");
+ }}
+ >
+ 📦 {getTextWithMemoType(memoType as MemoSpecType)}
+
+ {duration && duration.from < duration.to ? (
+ {
+ locationService.setFromAndToQuery(0, 0);
+ }}
+ >
+ 🗓️ {utils.getDateString(duration.from)} 至 {utils.getDateString(duration.to)}
+
+ ) : null}
+ {
+ locationService.setTextQuery("");
+ }}
+ >
+ 🔍 {textQuery}
+
+
+ {shownMemos.map((memo) =>
+ globalState.editMemoId === memo.id ? (
+
+ );
+};
+
+export default MemoList;
diff --git a/web/src/components/MemosHeader.tsx b/web/src/components/MemosHeader.tsx
new file mode 100644
index 00000000..e71b8f2b
--- /dev/null
+++ b/web/src/components/MemosHeader.tsx
@@ -0,0 +1,61 @@
+import { useCallback, useContext, useEffect, useState } from "react";
+import appContext from "../stores/appContext";
+import SearchBar from "./SearchBar";
+import { globalStateService, memoService, queryService } from "../services";
+import Only from "./common/OnlyWhen";
+import "../less/memos-header.less";
+
+let prevRequestTimestamp = Date.now();
+
+interface Props {}
+
+const MemosHeader: React.FC
+
+ + {isFetching ? "努力请求数据中..." : shownMemos.length === 0 ? "空空如也" : showMemoFilter ? "" : "所有数据加载完啦 🎉"} +
+
+
+ );
+};
+
+export default MemosHeader;
diff --git a/web/src/components/MenuBtnsPopup.tsx b/web/src/components/MenuBtnsPopup.tsx
new file mode 100644
index 00000000..383def72
--- /dev/null
+++ b/web/src/components/MenuBtnsPopup.tsx
@@ -0,0 +1,66 @@
+import { useEffect, useRef } from "react";
+import { locationService, userService } from "../services";
+import showAboutSiteDialog from "./AboutSiteDialog";
+import "../less/menu-btns-popup.less";
+
+interface Props {
+ shownStatus: boolean;
+ setShownStatus: (status: boolean) => void;
+}
+
+const MenuBtnsPopup: React.FC
+
+
+
+ {titleText}
+
+
+
+
+
+
+
+ );
+};
+
+export default MenuBtnsPopup;
diff --git a/web/src/components/MyAccountSection.tsx b/web/src/components/MyAccountSection.tsx
new file mode 100644
index 00000000..54f37a7e
--- /dev/null
+++ b/web/src/components/MyAccountSection.tsx
@@ -0,0 +1,218 @@
+import { useContext, useState } from "react";
+import appContext from "../stores/appContext";
+import { userService } from "../services";
+import utils from "../helpers/utils";
+import { validate, ValidatorConfig } from "../helpers/validator";
+import Only from "./common/OnlyWhen";
+import toastHelper from "./Toast";
+import showChangePasswordDialog from "./ChangePasswordDialog";
+import showBindWxUserIdDialog from "./BindWxUserIdDialog";
+import "../less/my-account-section.less";
+
+const validateConfig: ValidatorConfig = {
+ minLength: 4,
+ maxLength: 24,
+ noSpace: true,
+ noChinese: true,
+};
+
+interface Props {}
+
+const MyAccountSection: React.FC
+
+ {/* Account Binding Settings: only can use for domain: memos.justsven.top */}
+ 基本信息
+ + + + +
+
+ 关联账号
+ + +
+
+ Memo 显示相关
+ + + + +
+
+ 编辑器
+ +
+
+
+ );
+};
+
+export default PreferencesSection;
diff --git a/web/src/components/PreviewImageDialog.tsx b/web/src/components/PreviewImageDialog.tsx
new file mode 100644
index 00000000..190b7c20
--- /dev/null
+++ b/web/src/components/PreviewImageDialog.tsx
@@ -0,0 +1,73 @@
+import { useEffect, useRef, useState } from "react";
+import utils from "../helpers/utils";
+import { showDialog } from "./Dialog";
+import "../less/preview-image-dialog.less";
+
+interface Props extends DialogProps {
+ imgUrl: string;
+}
+
+const PreviewImageDialog: React.FC其他
+
+
+
+
+
+
+ 图片加载中...
+ 😟 图片加载失败，可能是无效的链接
+
+
+
+ 图片加载中...
+ 😟 图片加载失败，可能是无效的链接
+
+
+
+
+
+
+ );
+};
+
+export default function showPreviewImageDialog(imgUrl: string): void {
+ showDialog(
+ {
+ className: "preview-image-dialog",
+ },
+ PreviewImageDialog,
+ { imgUrl }
+ );
+}
diff --git a/web/src/components/QueryList.tsx b/web/src/components/QueryList.tsx
new file mode 100644
index 00000000..521f465f
--- /dev/null
+++ b/web/src/components/QueryList.tsx
@@ -0,0 +1,170 @@
+import React, { useContext, useEffect } from "react";
+import appContext from "../stores/appContext";
+import useToggle from "../hooks/useToggle";
+import useLoading from "../hooks/useLoading";
+import Only from "./common/OnlyWhen";
+import utils from "../helpers/utils";
+import toastHelper from "./Toast";
+import { locationService, queryService } from "../services";
+import showCreateQueryDialog from "./CreateQueryDialog";
+import "../less/query-list.less";
+
+interface Props {}
+
+const QueryList: React.FC
+
+
+
+ );
+};
+
+interface QueryItemContainerProps {
+ query: Model.Query;
+ isActive: boolean;
+}
+
+const QueryItemContainer: React.FC+ 快速检索 + showCreateQueryDialog()}> + + + +
+
+ showCreateQueryDialog()}>
+ 创建检索
+
+
+
+ {sortedQueries.map((q) => {
+ return
+
+
+
+ );
+};
+
+export default QueryList;
diff --git a/web/src/components/SearchBar.tsx b/web/src/components/SearchBar.tsx
new file mode 100644
index 00000000..9b631e69
--- /dev/null
+++ b/web/src/components/SearchBar.tsx
@@ -0,0 +1,64 @@
+import { useContext } from "react";
+import appContext from "../stores/appContext";
+import { locationService } from "../services";
+import { memoSpecialTypes } from "../helpers/filter";
+import "../less/search-bar.less";
+
+interface Props {}
+
+const SearchBar: React.FC
+ #
+ {query.title}
+
+
+
+ 
+
+
+
+
+
+
+ {query.pinnedAt ? "取消置顶" : "置顶"}
+
+
+ 编辑
+
+
+ {showConfirmDeleteBtn ? "确定删除！" : "删除"}
+
+
+
+
+ );
+};
+
+export default SearchBar;
diff --git a/web/src/components/ShareMemoImageDialog.tsx b/web/src/components/ShareMemoImageDialog.tsx
new file mode 100644
index 00000000..c4bf1d77
--- /dev/null
+++ b/web/src/components/ShareMemoImageDialog.tsx
@@ -0,0 +1,117 @@
+import { useEffect, useRef, useState } from "react";
+import { userService } from "../services";
+import toImage from "../labs/html2image";
+import { ANIMATION_DURATION, IMAGE_URL_REG } from "../helpers/consts";
+import utils from "../helpers/utils";
+import { showDialog } from "./Dialog";
+import { formatMemoContent } from "./Memo";
+import Only from "./common/OnlyWhen";
+import toastHelper from "./Toast";
+import "../less/share-memo-image-dialog.less";
+
+interface Props extends DialogProps {
+ memo: Model.Memo;
+}
+
+const ShareMemoImageDialog: React.FC
+ 
+
+
+
+
+
+
+
+
+ QUICKLY FILTER
+
+ 类型:
+
+
+ {memoSpecialTypes.map((t, idx) => {
+ return (
+
+
+ {
+ handleMemoTypeItemClick(t.value as MemoSpecType);
+ }}
+ >
+ {t.text}
+
+ {idx + 1 < memoSpecialTypes.length ? / : null}
+
+ );
+ })}
+
+
+ + 🥰分享 Memo 图片 +
+ +
+
+
+ );
+};
+
+export default function showShareMemoImageDialog(memo: Model.Memo): void {
+ showDialog(
+ {
+ className: "share-memo-image-dialog",
+ },
+ ShareMemoImageDialog,
+ { memo }
+ );
+}
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
new file mode 100644
index 00000000..58d06790
--- /dev/null
+++ b/web/src/components/Sidebar.tsx
@@ -0,0 +1,75 @@
+import { useContext, useEffect, useMemo, useRef } from "react";
+import appContext from "../stores/appContext";
+import { SHOW_SIDERBAR_MOBILE_CLASSNAME } from "../helpers/consts";
+import { globalStateService } from "../services";
+import UserBanner from "./UserBanner";
+import QueryList from "./QueryList";
+import TagList from "./TagList";
+import UsageHeatMap from "./UsageHeatMap";
+import "../less/siderbar.less";
+
+interface Props {}
+
+const Sidebar: React.FC
+
+ {shortcutImgUrl ? "右键或长按即可保存图片 👇" : "图片生成中..."}
+
+
+ 
+
+ {memo.createdAtStr}
+
+ 0}>
+
+
+
+
+ {memoImgUrls.map((imgUrl, idx) => (
+
+ ))}
+
+
+ ))}
+
+
+ ✍️ by {userinfo?.username}
+
+
+
+
+ );
+};
+
+interface TagItemContainerProps {
+ tag: Tag;
+ tagQuery: string;
+}
+
+const TagItemContainer: React.FC常用标签
+
+ {tags.map((t, idx) => (
+
+
+
+ + 输入# Tag 来创建标签吧~ +
+
+
+
+ {hasSubTags ? (
+
+ #
+ {tag.key}
+
+
+ {hasSubTags ? (
+
+
+
+ ) : null}
+
+
+
+ ) : null}
+
+ {tag.subTags.map((st, idx) => (
+
+ ) : null}
+
+ );
+};
+
+export default TagList;
diff --git a/web/src/components/Toast.tsx b/web/src/components/Toast.tsx
new file mode 100644
index 00000000..024240e4
--- /dev/null
+++ b/web/src/components/Toast.tsx
@@ -0,0 +1,104 @@
+import { useEffect } from "react";
+import ReactDOM from "react-dom";
+import { TOAST_ANIMATION_DURATION } from "../helpers/consts";
+import "../less/toast.less";
+
+type ToastType = "normal" | "success" | "info" | "error";
+
+type ToastConfig = {
+ type: ToastType;
+ content: string;
+ duration: number;
+};
+
+type ToastItemProps = {
+ type: ToastType;
+ content: string;
+ duration: number;
+ destory: FunctionType;
+};
+
+const Toast: React.FC
+
+ );
+};
+
+class ToastHelper {
+ private shownToastAmount = 0;
+ private toastWrapper: HTMLDivElement;
+ private shownToastContainers: HTMLDivElement[] = [];
+
+ constructor() {
+ const wrapperClassName = "toast-list-container";
+ const tempDiv = document.createElement("div");
+ tempDiv.className = wrapperClassName;
+ document.body.appendChild(tempDiv);
+ this.toastWrapper = tempDiv;
+ }
+
+ public info = (content: string, duration = 3000) => {
+ return this.showToast({ type: "normal", content, duration });
+ };
+
+ public success = (content: string, duration = 3000) => {
+ return this.showToast({ type: "success", content, duration });
+ };
+
+ public error = (content: string, duration = 3000) => {
+ return this.showToast({ type: "error", content, duration });
+ };
+
+ private showToast = (config: ToastConfig) => {
+ const tempDiv = document.createElement("div");
+ tempDiv.className = `toast-wrapper ${config.type}`;
+ this.toastWrapper.appendChild(tempDiv);
+ this.shownToastAmount++;
+ this.shownToastContainers.push(tempDiv);
+
+ setTimeout(() => {
+ tempDiv.classList.add("showup");
+ }, 0);
+
+ const cbs = {
+ destory: () => {
+ tempDiv.classList.add("destory");
+
+ setTimeout(() => {
+ if (!tempDiv.parentElement) {
+ return;
+ }
+
+ this.shownToastAmount--;
+ if (this.shownToastAmount === 0) {
+ for (const d of this.shownToastContainers) {
+ ReactDOM.unmountComponentAtNode(d);
+ d.remove();
+ }
+ this.shownToastContainers.splice(0, this.shownToastContainers.length);
+ }
+ }, TOAST_ANIMATION_DURATION);
+ },
+ };
+
+ ReactDOM.render({props.content}
+
+
+ );
+};
+
+export default UsageHeatMap;
diff --git a/web/src/components/UserBanner.tsx b/web/src/components/UserBanner.tsx
new file mode 100644
index 00000000..eebb7547
--- /dev/null
+++ b/web/src/components/UserBanner.tsx
@@ -0,0 +1,62 @@
+import { useCallback, useContext, useState } from "react";
+import appContext from "../stores/appContext";
+import { locationService } from "../services";
+import utils from "../helpers/utils";
+import MenuBtnsPopup from "./MenuBtnsPopup";
+import showDailyMemoDiaryDialog from "./DailyMemoDiaryDialog";
+import "../less/user-banner.less";
+
+interface Props {}
+
+const UserBanner: React.FC
+ Mon
+
+ Wed
+
+ Fri
+
+ Sun
+
+
+ {/* popup */}
+
+ {popupStat?.count} memos on {new Date(popupStat?.timestamp as number).toDateString()}
+
+
+
+ {allStat.map((v, i) => {
+ const count = v.count;
+ const colorLevel =
+ count <= 0
+ ? ""
+ : count <= 1
+ ? "stat-day-L1-bg"
+ : count <= 2
+ ? "stat-day-L2-bg"
+ : count <= 4
+ ? "stat-day-L3-bg"
+ : "stat-day-L4-bg";
+
+ return (
+ handleUsageStatItemMouseEnter(e, v)}
+ onMouseLeave={handleUsageStatItemMouseLeave}
+ onClick={() => handleUsageStatItemClick(v)}
+ >
+ );
+ })}
+ {nullCell.map((v, i) => (
+
+ ))}
+
+
+
+ );
+};
+
+export default UserBanner;
diff --git a/web/src/components/common/DatePicker.tsx b/web/src/components/common/DatePicker.tsx
new file mode 100644
index 00000000..3e336f8e
--- /dev/null
+++ b/web/src/components/common/DatePicker.tsx
@@ -0,0 +1,119 @@
+import { useEffect, useState } from "react";
+import { DAILY_TIMESTAMP } from "../../helpers/consts";
+import "../../less/common/date-picker.less";
+
+interface DatePickerProps {
+ className?: string;
+ datestamp: DateStamp;
+ handleDateStampChange: (datastamp: DateStamp) => void;
+}
+
+const DatePicker: React.FC
+
+
+
+ + {username} +
+ +
+
+
+
+
+ {memos.length}
+ MEMO
+
+
+ {tags.length}
+ TAG
+
+ showDailyMemoDiaryDialog()}>
+ {createdDays}
+ DAY
+
+
+
+ );
+};
+
+function getMonthDayAmount(datestamp: DateStamp): number {
+ const dateTemp = new Date(datestamp);
+ const currentDate = new Date(`${dateTemp.getFullYear()}/${dateTemp.getMonth() + 1}/1`);
+ const nextMonthDate =
+ currentDate.getMonth() === 11
+ ? new Date(`${currentDate.getFullYear() + 1}/1/1`)
+ : new Date(`${currentDate.getFullYear()}/${currentDate.getMonth() + 2}/1`);
+
+ return (nextMonthDate.getTime() - currentDate.getTime()) / DAILY_TIMESTAMP;
+}
+
+function getMonthFirstDayDateStamp(timestamp: TimeStamp): DateStamp {
+ const dateTemp = new Date(timestamp);
+ const currentDate = new Date(`${dateTemp.getFullYear()}/${dateTemp.getMonth() + 1}/1`);
+ return currentDate.getTime();
+}
+
+export default DatePicker;
diff --git a/web/src/components/common/OnlyWhen.tsx b/web/src/components/common/OnlyWhen.tsx
new file mode 100644
index 00000000..74ec8d19
--- /dev/null
+++ b/web/src/components/common/OnlyWhen.tsx
@@ -0,0 +1,13 @@
+interface OnlyWhenProps {
+ children: React.ReactElement;
+ when: boolean;
+}
+
+const OnlyWhen: React.FC
+ handleChangeMonthBtnClick(-1)}>
+
+
+
+ {firstDate.getFullYear()} 年 {firstDate.getMonth() + 1} 月
+
+ handleChangeMonthBtnClick(1)}>
+
+
+
+
+
+
+ {firstDate.getFullYear()} 年 {firstDate.getMonth() + 1} 月
+
+ handleChangeMonthBtnClick(1)}>
+
+
+
+
+
+ 周一
+ 周二
+ 周三
+ 周四
+ 周五
+ 周六
+ 周日
+
+
+ {dayList.map((d) => {
+ if (d.date === 0) {
+ return (
+
+ {""}
+
+ );
+ } else {
+ return (
+ handleDateItemClick(d.datestamp)}
+ >
+ {d.date}
+
+ );
+ }
+ })}
+
+
+ );
+};
+
+export default memo(Selector);
diff --git a/web/src/helpers/api.ts b/web/src/helpers/api.ts
new file mode 100644
index 00000000..d012294b
--- /dev/null
+++ b/web/src/helpers/api.ts
@@ -0,0 +1,144 @@
+type ResponseType
+ {currentItem.text}
+
+
+
+
+
+
+
+
+ {dataSource.map((d) => {
+ return (
+
+ {
+ handleItemClick(d);
+ }}
+ >
+ {d.text}
+
+ );
+ })}
+ /g, "")
+ .replace(/<\/p>/g, "\r\n")
+ .replace(/
/g, "\r\n")
+ .replace(/ /g, " ");
+
+ // 特定语言处理
+ switch (lang) {
+ case "html":
+ convertedStr = convertedStr.replace(/</g, "<").replace(/>/g, ">");
+ }
+
+ try {
+ const resultStr = Prism.highlight(convertedStr, Prism.languages[lang], lang);
+ return `
${resultStr}`;
+ } catch (error) {
+ // do nth
+ }
+
+ return `${codeStr}`;
+ });
+};
+
+const parseMarkedToHtml = (markedStr: string): string => {
+ const htmlText = parseCodeToPrism(markedStr)
+ .replace(DOT_LI_REG, "•")
+ .replace(NUM_LI_REG, "$1.")
+ .replace(TODO_BLOCK_REG, "⬜")
+ .replace(DONE_BLOCK_REG, "✅")
+ .replace(BOLD_TEXT_REG, "$1")
+ .replace(EM_TEXT_REG, "$1");
+
+ return htmlText;
+};
+
+const parseHtmlToRawText = (htmlStr: string): string => {
+ const tempEl = document.createElement("div");
+ tempEl.className = "memo-content-text";
+ tempEl.innerHTML = htmlStr;
+ const text = tempEl.innerText;
+ return text;
+};
+
+const parseRawTextToHtml = (rawTextStr: string): string => {
+ const htmlText = rawTextStr.replace(/\n/g, ""); + return htmlText; +}; + +const encodeHtml = (htmlStr: string): string => { + const t = document.createElement("div"); + t.textContent = htmlStr; + return t.innerHTML; +}; + +export { encodeHtml, parseMarkedToHtml, parseHtmlToRawText, parseRawTextToHtml }; diff --git a/web/src/helpers/polyfill.ts b/web/src/helpers/polyfill.ts new file mode 100644 index 00000000..1f9f53c2 --- /dev/null +++ b/web/src/helpers/polyfill.ts @@ -0,0 +1,15 @@ +(() => { + if (!String.prototype.replaceAll) { + String.prototype.replaceAll = function (str: any, newStr: any) { + // If a regex pattern + if (Object.prototype.toString.call(str).toLowerCase() === "[object regexp]") { + return this.replace(str, newStr); + } + + // If a string + return this.replace(new RegExp(str, "g"), newStr); + }; + } +})(); + +export default null; diff --git a/web/src/helpers/storage.ts b/web/src/helpers/storage.ts new file mode 100644 index 00000000..542c13c9 --- /dev/null +++ b/web/src/helpers/storage.ts @@ -0,0 +1,78 @@ +import { InputAction } from "tiny-undo"; + +/** + * Define storage data type + */ +interface StorageData { + // 编辑器输入缓存内容 + editorContentCache: string; + // 分词开关 + shouldSplitMemoWord: boolean; + // 是否隐藏图片链接地址 + shouldHideImageUrl: boolean; + // markdown 解析开关 + shouldUseMarkdownParser: boolean; + + // Editor setting + useTinyUndoHistoryCache: boolean; + + // tiny undo actions cache + tinyUndoActionsCache: InputAction[]; + // tiny undo index cache + tinyUndoIndexCache: number; +} + +type StorageKey = keyof StorageData; + +/** + * storage helper + */ +export namespace storage { + export function get(keys: StorageKey[]): Partial