feat(directory): header title will only contain operator name, instead of full name

Version

@@ -1 +1 @@
-3.6.4
+3.6.5

changelogs.yaml

@@ -42,6 +42,8 @@ showcase:
   2021/05/26:
     - First commit
 directory:
+  2023/05/05:
+    - Header title will only contain operator name, instead of full name (skin name + operator name)
   2023/05/04:
     - Added Start animation for supported operator
   2023/05/01:

directory/Version

@@ -1 +1 @@
-1.2.7
+1.2.8

directory/src/component/char_icon.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 export default function CharIcon(props) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox={props.viewBox}>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox={props.viewBox} style={props.style}>
       {
         props.type === 'operator' ?
           <g><path d="M89 17.5 30.4 57 24.3 71.4 82.9 32.6Z"></path><path d="M0 17.5 58.6 57 64.7 71.4 6.1 32.7Z"> </path><path d="M89 0 30.4 39.5 24.3 53.9 82.9 15.1Z"> </path><path d="M0 0 58.6 39.5 64.7 53.9 6.1 15.2Z"> </path></g>

directory/src/routes/Root.jsx

@@ -118,6 +118,9 @@ export default function Root() {
                   viewBox={
                     headerIcon === 'operator' ? '0 0 88.969 71.469' : '0 0 94.563 67.437'
                   }
+                  style={{
+                    height: "2.5rem"
+                  }}
                 />
               </section>
             )}

directory/src/routes/path/Operator.jsx

@@ -36,11 +36,26 @@ const getVoiceFoler = (lang) => {
 const defaultSpineAnimation = 'Idle'
 const backgroundAtom = atom(null)
 
+const getPartialName = (type, input) => {
+  let part;
+  switch (type) {
+    case "name":
+      part = 5
+      break;
+    case "skin":
+      part = 1
+      break;
+    default:
+      return input
+  }
+  return input.replace(/^(.+)( )(·|\/)( )(.+)$/, `$${part}`)
+}
+
 const getTabName = (item, language) => {
   if (item.type === 'operator') {
     return 'operator'
   } else {
-    return item.codename[language].replace(/^(.+)( )(·|\/)()(.+)$/, '$1')
+    return getPartialName("skin", item.codename[language])
   }
 }
 
@@ -155,7 +170,7 @@ export default function Operator() {
 
   useEffect(() => {
     if (config) {
-      setTitle(config.codename[language])
+      setTitle(getPartialName("name", config.codename[language]))
     }
   }, [config, language, key, setTitle])
 

directory/src/scss/root/Root.module.scss

@@ -16,8 +16,7 @@
       line-height: 1.2em;
 
       .icon {
-        width: 3.88rem;
+        margin-right: 1.5rem;
-        margin-right: 1.88rem;
         fill: var(--text-color);
         display: inline-block;
         vertical-align: middle;