feat: add version in header

Author: zhzLuke96

package.json

@@ -1,7 +1,7 @@
 {
   "name": "CCEditor",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/App.tsx

@@ -58,6 +58,7 @@ import { createBlackImage } from "../tools/images";
 import { ToolTab } from "./tabs/ToolTab";
 import { useGlobalPaste } from "./useGlobalPaste";
 import { StartPanel } from "./StartPanel/StartPanel";
+import pkgJson from "../../package.json";
 
 function getDefaultFormData() {
   return {
@@ -352,7 +353,9 @@ export function App() {
           <Text weight="bold" size={500}>
             🎭
           </Text>
-          <Text className={styles.appName}>CC Editor</Text>
+          <Text className={styles.appName}>
+            CC Editor <small>v{pkgJson.version}</small>
+          </Text>
         </div>
         <div className={styles.headerRight}>
           <LangSwitch />

src/components/useStyles.ts

@@ -32,6 +32,11 @@ export const useStyles = makeStyles({
   appName: {
     fontSize: tokens.fontSizeHero700,
     fontWeight: tokens.fontWeightSemibold,
+
+    "& small": {
+      fontSize: tokens.fontSizeBase300,
+      fontWeight: tokens.fontWeightRegular,
+    },
   },
   mainContent: {
     padding: tokens.spacingHorizontalXXL,