⚡️ 使用Set处理最近使用的排序 & ✨ 最常使用的工具

neila-a · Oct 22, 2023 · d4912a9 · d4912a9
1 parent 3948b0a
commit d4912a9
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "neila-tools",
  "version": "1.5.3",
- "devVersion": "693",
+ "devVersion": "697",
  "dev": true,
  "description": "Platform for Neila's something useless tools.",
  "private": true,

diff --git a/src/app/Menu.tsx b/src/app/Menu.tsx
@@ -51,6 +51,7 @@ export default function Menu() {
  fullScreen = useMediaQuery(theme.breakpoints.down('sm')),
  realTools = getTools(I18N), // 硬编码的分类
  [recentlyUsed, setRecentlyUsed] = useStoragedState<string>("recently-tools", "最近使用的工具", "[]"),
+ [mostUsed, setMostUsed] = useStoragedState<string>("most-tools", "最常使用的工具", "{}"),
  [viewMode, setViewMode] = useStoragedState<viewMode>("viewmode", "列表模式", "grid"),
  [editMode, setEditMode] = useState<boolean>(false),
  [sortingFor, setSortingFor] = useState<string>("__home__"),
@@ -114,7 +115,7 @@ export default function Menu() {
  }} onChange={event => {
  setSearchText(event.target.value);
  searchTools(event.target.value);
-  }} />
+ }} />
  <IconButton
  aria-label="close"
  onClick={event => {
@@ -154,6 +155,38 @@ export default function Menu() {
  })} />
  </Box>
  </Box>
+ <Box>
+ <Typography variant='h4'>
+ {I18N.get('最常使用')}
+ </Typography>
+ <Box sx={{
+ p: 1
+ }}>
+ <ToolsStack
+ viewMode={viewMode}
+ searchText=""
+ sortingFor={"__home__"}
+ setTools={tools => null}
+ editMode={false}
+ paramTool={Object.entries(JSON.parse(mostUsed)).toSorted((r, g) => {
+ if (r[1] < g[1]) {
+ return 1;
+ } if (r[1] > g[1]) {
+ return -1;
+ }
+ return 0;
+ }).slice(0, 3).map(item => {
+ const to = item[0];
+ var tool: tool;
+ realTools.forEach(single => {
+ if (single.to === to) {
+ tool = single;
+ }
+ });
+ return tool;
+ })} />
+ </Box>
+ </Box>
  <Box>
  <Typography variant='h4'>
  {I18N.get('分类')}

diff --git a/src/app/components/Recently.ts b/src/app/components/Recently.ts
@@ -0,0 +1,39 @@
+export default class Recently {
+ /**
+ * 创建时指定的最大个数
+ */
+ max = 0;
+ private set: Set<string>;
+ constructor(
+ /**
+ * 最大个数
+ */
+ max: number,
+
+ /**
+ * 之前的最近
+ */
+ old: Iterable<string>
+ ) {
+ this.max = max;
+ this.set = new Set<string>(old);
+ };
+ get() {
+ return [...this.set.entries()].map(item => item[1]);
+ }
+ add(name: string) {
+ this.set.add(name);
+ if (this.get()[this.set.size - 1] !== name) {
+ this.set.delete(name);
+ this.set.add(name);
+ }
+ if (this.set.size > this.max) {
+ this.get().forEach((item, index) => {
+ if (index === 0) {
+ this.set.delete(item);
+ }
+ })
+ this.set.delete(this.get()[0]);
+ }
+ }
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -75,6 +75,7 @@ export default function Index(props: {
  var realTools = getTools(I18N),
  showSidebar = useContext(showSidebarContext),
  [recentlyUsed, setRecentlyUsed] = useStoragedState<string>("recently-tools", "最近使用的工具", "[]"),
+ [mostUsed, setMostUsed] = useStoragedState<string>("most-tools", "最常使用的工具", "{}"),
  [sortedTools, setSortedTools] = useState(wrappedGetToolsList),
  [searchText, setSearchText] = useState<string>(""),
  [viewMode, setViewMode] = useStoragedState<viewMode>("viewmode", "列表模式", "grid"),
@@ -200,6 +201,38 @@ export default function Index(props: {
  return tool;
  })} />
  </Box>
+ <Box>
+ <Typography variant='h4'>
+ {I18N.get('最常使用')}
+ </Typography>
+ <Box sx={{
+ p: 1
+ }}>
+ <ToolsStack
+ viewMode={viewMode}
+ searchText=""
+ sortingFor={"__home__"}
+ setTools={setTools}
+ editMode={false}
+ paramTool={Object.entries(JSON.parse(mostUsed)).toSorted((r, g) => {
+ if (r[1] < g[1]) {
+ return 1;
+ } if (r[1] > g[1]) {
+ return -1;
+ }
+ return 0;
+ }).slice(0, 3).map(item => {
+ const to = item[0];
+ var tool: tool;
+ realTools.forEach(single => {
+ if (single.to === to) {
+ tool = single;
+ }
+ });
+ return tool;
+ })} />
+ </Box>
+ </Box>
  </Box>
  )}
  </div>

diff --git a/src/app/tools/template.tsx b/src/app/tools/template.tsx
@@ -7,41 +7,23 @@ import {
  useSelectedLayoutSegment
 } from "next/navigation";
 import setSetting from "../setting/setSetting";
+import Recently from "../components/Recently";
 // 每个3格最多显示
 export default function Template(props: {
  children: React.ReactNode
 }) {
  const thisTool = useSelectedLayoutSegment();
  useEffect(() => {
- var recentlyUsed: string[] = JSON.parse(checkOption<string>("recently-tools", "最近使用的工具", "[]"));
- console.log(recentlyUsed)
- if (recentlyUsed.length === 0) {
- recentlyUsed = [thisTool];
- } else if (recentlyUsed.length === 1) {
- if (recentlyUsed[0] !== thisTool) {
- recentlyUsed[1] = recentlyUsed[0];
- recentlyUsed[0] = thisTool;
- }
- } else if (recentlyUsed.length === 2) {
- if (recentlyUsed.includes(thisTool)) {
- recentlyUsed[1] = recentlyUsed[0];
- recentlyUsed[0] = thisTool;
- } else if (recentlyUsed.indexOf(thisTool) !== 0) {
- recentlyUsed[2] = recentlyUsed[1];
- recentlyUsed[1] = recentlyUsed[0];
- recentlyUsed[0] = thisTool;
- }
- } else if (recentlyUsed.length === 3) {
- if (recentlyUsed.indexOf(thisTool) === 2 || recentlyUsed.indexOf(thisTool) === -1) {
- recentlyUsed[2] = recentlyUsed[1];
- recentlyUsed[1] = recentlyUsed[0];
- recentlyUsed[0] = thisTool;
- } else if (recentlyUsed.indexOf(thisTool) !== 0) {
- recentlyUsed[1] = recentlyUsed[0];
- recentlyUsed[0] = thisTool;
- }
+ const set = new Recently(3, (JSON.parse(checkOption<string>("recently-tools", "最近使用的工具", "[]")) as string[]).reverse());
+ set.add(thisTool);
+ setSetting("recently-tools", "最近使用的工具", JSON.stringify(set.get().reverse()));
+ const mostUsed = JSON.parse(checkOption<string>("most-tools", "最常使用的工具", "{}"));
+ if (mostUsed.hasOwnProperty(thisTool)) {
+ mostUsed[thisTool] = mostUsed[thisTool] + 1;
+ } else {
+ mostUsed[thisTool] = 0;
  }
- setSetting("recently-tools", "最近使用的工具", JSON.stringify(recentlyUsed));
+ setSetting("most-tools", "最常使用的工具", JSON.stringify(mostUsed));
  }, []);
  return (
  <>