Add element counter

src/components/ElementCounter.tsx

@@ -0,0 +1,73 @@
+import { Col, Row, Statistic, Typography } from "antd";
+import { useAtomValue } from "jotai";
+import { groupingAtom, mappingAtom } from "~/atoms";
+
+interface Count {
+  笔画: number;
+  二笔: number;
+  字根: number;
+  结构: number;
+  拼音: number;
+}
+
+function countElementByCategory(elements: string[]): Count {
+  const count: Count = {
+    笔画: 0,
+    二笔: 0,
+    字根: 0,
+    结构: 0,
+    拼音: 0,
+  };
+  for (const element of elements) {
+    if (/^\d$/.test(element)) {
+      count.笔画++;
+    } else if (/^\d\d$/.test(element)) {
+      count.二笔++;
+    } else if (/^[\u2FF0-\u2FFF]$/.test(element)) {
+      count.结构++;
+    } else if (/^.$/.test(element)) {
+      count.字根++;
+    } else {
+      count.拼音++;
+    }
+  }
+  return count;
+}
+
+const ElementSubCounter = ({
+  title,
+  count,
+}: {
+  title: string;
+  count: Count;
+}) => {
+  return (
+    <>
+      <Typography.Title level={3}>{title}</Typography.Title>
+      <Row gutter={16} style={{ justifyContent: "center" }}>
+        {Object.entries(count).map(([key, value]) =>
+          value ? (
+            <Col key={key}>
+              <Statistic title={key} value={value} />
+            </Col>
+          ) : null,
+        )}
+      </Row>
+    </>
+  );
+};
+
+export default function ElementCounter() {
+  const mapping = useAtomValue(mappingAtom);
+  const grouping = useAtomValue(groupingAtom);
+  const mainElements = Object.keys(mapping);
+  const elements = mainElements.concat(Object.keys(grouping));
+  const mainCount = countElementByCategory(mainElements);
+  const count = countElementByCategory(elements);
+  return (
+    <>
+      <ElementSubCounter title="主要元素" count={mainCount} />
+      <ElementSubCounter title="全部元素" count={count} />
+    </>
+  );
+}

src/components/ElementPicker.tsx

@@ -15,6 +15,7 @@ import type { PronunciationElementTypes } from "~/lib";
 import { operators } from "~/lib";
 import { phonemeEnumerationAtom } from "~/atoms";
 import QuestionCircleOutlined from "@ant-design/icons/QuestionCircleOutlined";
+import ElementCounter from "./ElementCounter";
 
 const AlgebraEditor = function ({
   type,
@@ -163,6 +164,7 @@ export default function ElementPicker() {
         name={secondary}
       />
       <ElementAdder element={element} />
+      <ElementCounter />
     </Flex>
   );
 }

src/components/Mapping.tsx

@@ -76,10 +76,10 @@ const KeysEditor = ({
 }) => {
   const addMapping = useAddAtom(mappingAtom);
   const removeMapping = useRemoveAtom(mappingAtom);
-  const display = useAtomValue(displayAtom);
+  const glyphMap = useAtomValue(glyphAtom);
   return (
     <Flex justify="space-between" gap="large">
-      <Element>{display(name)}</Element>
+      <Element>{svgDisplay(name, glyphMap)}</Element>
       <Space>
         {keys.map((key, index) => {
           return (
@@ -218,7 +218,10 @@ export const ElementLabel = ({
       {
         /* 部分归并字根 */ partialAffiliates.length >= 1 &&
           partialAffiliates.map(([element, mapped], index) => (
-            <span style={{ fontSize: "0.7em" }} key={index}>
+            <span
+              style={{ fontSize: "0.7em", display: "inline-flex" }}
+              key={index}
+            >
               [{myDisplay(element)}
               &nbsp;
               {renderMapped(mapped.slice(1))}]
@@ -416,7 +419,12 @@ const MappingRow = memo(
           icon={<DeleteOutlined />}
         />
         <Char>{symbol}</Char>
-        <Flex gap="small" align="center" wrap="wrap">
+        <Flex
+          gap="small"
+          align="center"
+          wrap="wrap"
+          style={{ padding: "8px 0" }}
+        >
           {elements.map(({ name, code }) => (
             <AdjustableElement key={name} name={name} code={code} />
           ))}