feat: add standard-chinese-characters tool.

jaywcjlove · Jun 5, 2022 · 2005967 · 2005967
1 parent 3aa17c2
commit 2005967
Show file tree

Hide file tree

Showing 13 changed files with 155 additions and 1 deletion.
diff --git a/packages/standard-chinese-characters/package.json b/packages/standard-chinese-characters/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@wcj/tools-react-standard-chinese-characters",
+  "version": "1.7.0",
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "scripts": {
+    "build": "tsbb build",
+    "watch": "tsbb watch"
+  },
+  "keywords": [],
+  "files": [
+    "cjs",
+    "esm",
+    "src"
+  ],
+  "author": "Kenny Wong <wowohoo@qq.com>",
+  "license": "MIT",
+  "dependencies": {
+    "@wcj/tools-react-components": "1.7.0",
+    "togscc": "^1.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.14.0",
+    "react-dom": ">=16.14.0"
+  }
+}
diff --git a/packages/standard-chinese-characters/src/Icon.tsx b/packages/standard-chinese-characters/src/Icon.tsx
@@ -0,0 +1,51 @@
+import { memo } from 'react';
+
+export const HansIcon = memo<React.PropsWithChildren<any>>(({ children }) => {
+  return (
+    <svg viewBox="0 0 46 46">
+      <g fill="none" fillRule="evenodd">
+        <line x1=".5" x2="45.5" y1="23" y2="23" stroke="var(--color-border-muted)" strokeLinecap="square" />
+        <line
+          x1="1"
+          x2="45"
+          y1="23.5"
+          y2="23.5"
+          stroke="var(--color-border-muted)"
+          strokeLinecap="square"
+          transform="rotate(90 23 23.5)"
+        />
+        <line
+          x1="-7.712"
+          x2="53.099"
+          y1="22.883"
+          y2="22.883"
+          stroke="var(--color-border-muted)"
+          strokeDasharray="2 4"
+          strokeLinecap="square"
+          transform="rotate(45 22.705 23.311)"
+        />
+        <line
+          x1="-7.88"
+          x2="52.922"
+          y1="22.835"
+          y2="21.774"
+          stroke="var(--color-border-muted)"
+          strokeDasharray="2 4"
+          strokeLinecap="square"
+          transform="rotate(136 22.62 22.749)"
+        />
+        <rect width="45" height="45" x=".5" y=".5" stroke="var(--color-border-muted)" rx="3" />
+        <text
+          fontFamily="-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif"
+          fontSize="23"
+          letterSpacing="-0.828571429"
+          fill="currentColor"
+        >
+          <tspan x="11.9142857" y="31">
+            {children}{' '}
+          </tspan>
+        </text>
+      </g>
+    </svg>
+  );
+});
diff --git a/packages/standard-chinese-characters/src/global.d.ts b/packages/standard-chinese-characters/src/global.d.ts
@@ -0,0 +1,3 @@
+declare module 'nzh/cn' {
+  export * from 'nzh';
+}
diff --git a/packages/standard-chinese-characters/src/index.tsx b/packages/standard-chinese-characters/src/index.tsx
@@ -0,0 +1,45 @@
+import { memo } from 'react';
+import { Wrapper, StyledLayout, Spacing } from '@wcj/tools-react-components';
+import styled from 'styled-components';
+import { useTranslation } from 'react-i18next';
+import characters from 'togscc';
+import { HansIcon } from './Icon';
+
+const HansWarpper = styled.div`
+  width: 42px;
+  height: 42px;
+  border-radius: 2px;
+`;
+
+const HansInner = styled.div`
+  height: 100%;
+  width: 100%;
+`;
+
+const Hans = memo<React.PropsWithChildren<any>>(({ children }) => {
+  return (
+    <HansWarpper>
+      <HansInner>{children}</HansInner>
+    </HansWarpper>
+  );
+});
+
+export default function AmountInRMB() {
+  const { t } = useTranslation(['standard-chinese-characters', 'common']);
+
+  return (
+    <Wrapper>
+      <StyledLayout overflow="initial" title={t('Table of General Standard Chinese Characters', {})}>
+        <Spacing style={{ paddingTop: 10, flexWrap: 'wrap', flexDirection: 'row' }}>
+          {Object.keys(characters).map((keyname, idx) => {
+            return (
+              <Hans key={idx}>
+                <HansIcon>{keyname}</HansIcon>
+              </Hans>
+            );
+          })}
+        </Spacing>
+      </StyledLayout>
+    </Wrapper>
+  );
+}
diff --git a/packages/standard-chinese-characters/tsconfig.json b/packages/standard-chinese-characters/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig",
+  "include": ["src"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "cjs",
+    "noEmit": false
+  }
+}
diff --git a/packages/svg-optimizer/src/index.tsx b/packages/svg-optimizer/src/index.tsx
@@ -150,7 +150,6 @@ export default function SVGOptimizer() {
       const data: ImageData[] = [];
       imageData.forEach((item) => {
         const d = compress(item.raw || '', options);
-        console.log('>w>>>', d.error);
         data.push({ ...item, dimensions: d.dimensions, tiny: d.data, error: d.error });
       });
       setImageData(data);

diff --git a/website/package.json b/website/package.json
@@ -44,6 +44,7 @@
     "@wcj/tools-react-qrcode-generator": "1.7.0",
     "@wcj/tools-react-simple-markdown-editor": "1.7.0",
     "@wcj/tools-react-svg-optimizer": "1.7.0",
+    "@wcj/tools-react-standard-chinese-characters": "1.7.0",
     "@wcj/tools-react-text-case": "1.7.0",
     "@wcj/tools-react-toml-to-json": "1.7.0",
     "@wcj/tools-react-url-encode": "1.7.0",

diff --git a/website/public/locales/cn/standard-chinese-characters.json b/website/public/locales/cn/standard-chinese-characters.json
@@ -0,0 +1,3 @@
+{
+  "Table of General Standard Chinese Characters": "通用规范汉字表"
+}
diff --git a/website/public/locales/cn/translation.json b/website/public/locales/cn/translation.json
@@ -85,6 +85,9 @@
     "/amount-in-rmb": {
       "label": "人民币大写转换"
     },
+    "/standard-chinese-characters": {
+      "label": "通用规范汉字表"
+    },
     "Badgen": {
       "about": "快速徽章生成服务",
       "label": "Badgen 徽章"

diff --git a/website/public/locales/en/standard-chinese-characters.json b/website/public/locales/en/standard-chinese-characters.json
@@ -0,0 +1 @@
+{}
diff --git a/website/public/locales/en/translation.json b/website/public/locales/en/translation.json
@@ -85,6 +85,9 @@
     "/amount-in-rmb": {
       "label": "Amount In RMB"
     },
+    "/standard-chinese-characters": {
+      "label": "Table of General Standard Chinese Characters"
+    },
     "Badgen": {
       "about": "Fast badge generating service",
       "label": "Badgen"

diff --git a/website/src/Router.tsx b/website/src/Router.tsx
@@ -60,6 +60,7 @@ const CSSFormatter = Loadable(lazy(() => import('@wcj/tools-react-css-formatter'
 const HTMLFormatter = Loadable(lazy(() => import('@wcj/tools-react-html-formatter')));
 const SVGOptimizer = Loadable(lazy(() => import('@wcj/tools-react-svg-optimizer')));
 const AmountInRMB = Loadable(lazy(() => import('@wcj/tools-react-amount-in-rmb')));
+const StandardChineseCharactersRMB = Loadable(lazy(() => import('@wcj/tools-react-standard-chinese-characters')));
 
 export let routes: RouteObject[] = [
   {
@@ -178,6 +179,10 @@ export let routes: RouteObject[] = [
         path: 'amount-in-rmb',
         element: <AmountInRMB title="Amount In RMB Tool - Web Tools" />,
       },
+      {
+        path: 'standard-chinese-characters',
+        element: <StandardChineseCharactersRMB title="Table of General Standard Chinese Characters - Web Tools" />,
+      },
       { path: '*', element: <NoMatch /> },
     ],
   },

diff --git a/website/src/menus.tsx b/website/src/menus.tsx
@@ -143,6 +143,11 @@ export function useMenus() {
       logo: 'rmb',
       label: t('menu./amount-in-rmb.label'),
     },
+    {
+      href: '/standard-chinese-characters',
+      logo: 'pinyin',
+      label: t('menu./standard-chinese-characters.label'),
+    },
     {
       divider: true,
     },