feat: config 增加 template

visiky · Sep 29, 2022 · aad0337 · aad0337
1 parent 820107a
commit aad0337
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "cross-fetch": "^3.1.4",
     "gatsby-plugin-google-gtag": "^4.23.0",
     "lodash-es": "^4.17.21",
+    "query-string": "^7.1.1",
     "react": "^17.0.1",
     "react-color": "^2.19.3",
     "react-dnd": "^14.0.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useState, useEffect, useRef } from 'react';
 import { Button, Affix, Upload, Spin, message, Alert, Modal } from 'antd';
 import type { RcFile } from 'antd/lib/upload';
 import _ from 'lodash-es';
+import qs from 'query-string';
 import { getLanguage, getLocale } from '@/locale';
 import { useModeSwitcher } from '@/hooks/useModeSwitcher';
 import { getDefaultTitleNameMap } from '@/datas/constant';
@@ -28,24 +29,50 @@ export const Page: React.FC = () => {
   const query = getSearchObj();
   const [config, setConfig] = useState<ResumeConfig>();
   const [loading, updateLoading] = useState<boolean>(true);
-  const [template, updateTemplate] = useState<string>('template1');
   const [theme, setTheme] = useState<ThemeConfig>({
     color: '#2f5785',
     tagColor: '#8bc34a',
   });
 
+  useEffect(() => {
+    const {
+      pathname,
+      hash: currentHash,
+      search: currentSearch,
+    } = window.location;
+    const hash = currentHash === '#/' ? '' : currentHash;
+    const searchObj = qs.parse(currentSearch);
+    if (!searchObj.template) {
+      const search = qs.stringify({
+        template: config?.template || 'template1',
+        ...qs.parse(currentSearch),
+      });
+
+      window.location.href = `${pathname}?${search}${hash}`;
+    }
+  }, [config]);
+
+  const updateTemplate = (value: string) => {
+    const {
+      pathname,
+      hash: currentHash,
+      search: currentSearch,
+    } = window.location;
+    const hash = currentHash === '#/' ? '' : currentHash;
+    const search = qs.stringify({
+      ...qs.parse(currentSearch),
+      template: value,
+    });
+
+    window.location.href = `${pathname}?${search}${hash}`;
+  };
+
   const changeConfig = (v: Partial<ResumeConfig>) => {
     setConfig(
       _.assign({}, { titleNameMap: getDefaultTitleNameMap({ i18n }) }, v)
     );
   };
 
-  useEffect(() => {
-    if (query.template) {
-      updateTemplate(query.template as string);
-    }
-  }, []);
-
   useEffect(() => {
     const user = (query.user || '') as string;
     const branch = (query.branch || 'master') as string;
@@ -215,7 +242,11 @@ export const Page: React.FC = () => {
         )}
         <div className="page">
           {config && (
-            <Resume value={config} theme={theme} template={template} />
+            <Resume
+              value={config}
+              theme={theme}
+              template={query.template || 'template1'}
+            />
           )}
           {mode === 'edit' && (
             <React.Fragment>
@@ -226,7 +257,7 @@ export const Page: React.FC = () => {
                     onValueChange={onConfigChange}
                     theme={theme}
                     onThemeChange={onThemeChange}
-                    template={template}
+                    template={query.template || 'template1'}
                     onTemplateChange={updateTemplate}
                   />
                   <Button type="primary" onClick={copyConfig}>
@@ -244,6 +275,9 @@ export const Page: React.FC = () => {
                       {i18n.get('导入配置')}
                     </Button>
                   </Upload>
+                  <Button type="primary" onClick={() => window.print()}>
+                    {i18n.get('PDF 下载')}
+                  </Button>
                 </Button.Group>
               </Affix>
               <div

diff --git a/src/components/types.ts b/src/components/types.ts
@@ -105,6 +105,8 @@ export type ResumeConfig = {
   locales?: {
     [key: string]: ResumeConfig;
   };
+
+  template?: string;
 };
 
 /**