修改证书

dev-dist/sw.js

@@ -13,31 +13,29 @@
 
 // If the loader is already loaded, just stop.
 if (!self.define) {
-  let registry = {};
+  const registry = {};
 
   // Used for `eval` and `importScripts` where we can't get script URL by other means.
   // In both cases, it's safe to use a global var because those functions are synchronous.
   let nextDefineUri;
 
   const singleRequire = (uri, parentUri) => {
-    uri = new URL(uri + ".js", parentUri).href;
-    return registry[uri] || (
-      
-        new Promise(resolve => {
-          if ("document" in self) {
-            const script = document.createElement("script");
-            script.src = uri;
-            script.onload = resolve;
-            document.head.appendChild(script);
-          } else {
-            nextDefineUri = uri;
-            importScripts(uri);
-            resolve();
-          }
-        })
-      
-      .then(() => {
-        let promise = registry[uri];
+    uri = new URL(uri + '.js', parentUri).href;
+    return (
+      registry[uri] ||
+      new Promise(resolve => {
+        if ('document' in self) {
+          const script = document.createElement('script');
+          script.src = uri;
+          script.onload = resolve;
+          document.head.appendChild(script);
+        } else {
+          nextDefineUri = uri;
+          importScripts(uri);
+          resolve();
+        }
+      }).then(() => {
+        const promise = registry[uri];
         if (!promise) {
           throw new Error(`Module ${uri} didn’t register its module`);
         }
@@ -47,27 +45,31 @@ if (!self.define) {
   };
 
   self.define = (depsNames, factory) => {
-    const uri = nextDefineUri || ("document" in self ? document.currentScript.src : "") || location.href;
+    const uri =
+      nextDefineUri ||
+      ('document' in self ? document.currentScript.src : '') ||
+      location.href;
     if (registry[uri]) {
       // Module is already loading or loaded.
       return;
     }
-    let exports = {};
+    const exports = {};
     const require = depUri => singleRequire(depUri, uri);
     const specialDeps = {
       module: { uri },
       exports,
       require
     };
-    registry[uri] = Promise.all(depsNames.map(
-      depName => specialDeps[depName] || require(depName)
-    )).then(deps => {
+    registry[uri] = Promise.all(
+      depsNames.map(depName => specialDeps[depName] || require(depName))
+    ).then(deps => {
       factory(...deps);
       return exports;
     });
   };
 }
-define(['./workbox-5357ef54'], (function (workbox) { 'use strict';
+define(['./workbox-5357ef54'], function (workbox) {
+  ('use strict');
 
   self.skipWaiting();
   workbox.clientsClaim();
@@ -77,16 +79,33 @@ define(['./workbox-5357ef54'], (function (workbox) { 'use strict';
    * requests for URLs in the manifest.
    * See https://goo.gl/S9QRab
    */
-  workbox.precacheAndRoute([{
-    "url": "registerSW.js",
-    "revision": "3ca0b8505b4bec776b69afdba2768812"
-  }, {
-    "url": "index.html",
-    "revision": "0.03e7uq64dqg"
-  }], {});
-  workbox.cleanupOutdatedCaches();
-  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
-    allowlist: [/^\/$/]
-  }));
+  workbox.precacheAndRoute(
+    [
+      {
+        url: 'registerSW.js',
+        revision: '3ca0b8505b4bec776b69afdba2768812'
+      },
+      {
+        url: 'index.html',
+        revision: '0.03e7uq64dqg'
+      }
+    ],
+    {}
+  );
 
-}));
+  /**
+   * https://juejin.cn/post/6844903881189621767
+   * 缓存策略 有5种
+   */
+  workbox.cleanupOutdatedCaches();
+  workbox.registerRoute(
+    new workbox.NavigationRoute(workbox.createHandlerBoundToURL('index.html'), {
+      allowlist: [/^\/$/]
+    }),
+    workbox.strategies.NetworkFirst()
+  );
+  workbox.routing.registerRoute(
+    new RegExp('.*.html|css|js'),
+    workbox.strategies.NetworkFirst()
+  );
+});

src/components/TheAuth/index.module.less

@@ -107,7 +107,7 @@
     align-items: flex-start;
     padding-top: 20px;
 
-    .m2,
+    .m6,
     .w2 {
       margin-left: 38px;
     }
@@ -133,8 +133,8 @@
   .w5,
   .w8 {
     margin-top: 20px;
-    width: 500px;
-    height: 515px;
+    width: 417px;
+    height: 429px;
   }
 
   .w6 {
@@ -153,8 +153,8 @@
     height: 118px;
   }
 
-  .m2 {
-    width: 560px
+  .m6 {
+    width: 224px
   }
 
   .m3 {
@@ -162,12 +162,17 @@
     width: 358px;
   }
 
+  .m2,
   .m4,
   .m5 {
     margin-top: 8px;
     width: 100%;
   }
 
+  .m2 {
+    width: 90%;
+  }
+
   .moreImg {
     display: flex;
     align-items: center;

src/components/TheAuth/index.tsx

@@ -15,6 +15,7 @@ import m2 from './images/mac/2.png';
 import m3 from './images/mac/3.png';
 import m4 from './images/mac/4.png';
 import m5 from './images/mac/5.png';
+import m6 from './images/mac/6.png';
 import { browser } from '/src/helpers/utils';
 
 export default defineComponent({
@@ -24,7 +25,7 @@ export default defineComponent({
     const scrollbarRef = ref();
     const state = reactive({
       step: 1,
-      maxStep: browser().ios ? 4 : 7
+      maxStep: browser().ios ? 5 : 7
     });
     // 下载证书
     const onDownload = () => {
@@ -54,7 +55,7 @@ export default defineComponent({
                         <div class={styles.stepNum}>01</div>
                         <div class={styles.stepContent}>
                           <p class={styles.txt}>
-                            点击下方下载按钮，下载数据安全证书安装包
+                            点击下方【下载按钮】，下载数据安全证书安装包
                           </p>
 
                           <div>
@@ -70,18 +71,22 @@ export default defineComponent({
                         <div class={styles.stepContent}>
                           <p class={styles.txt}>
                             双击<span>《安全证书.p12》</span>
-                            ，输入钥匙串密码：
+                            ，输入钥匙串密码，
                             <span
                               class={styles.red}
                               style={{ 'text-decoration': 'underline' }}>
                               dayaedu
                             </span>
                             ，点击
-                            <span>【好】</span>
+                            <span>【修改钥匙串】</span>
+                            <span
+                              style={{ 'font-weight': 400, color: '#777777' }}>
+                              （若无此步骤则忽略）
+                            </span>
                           </p>
                           <div class={[styles.imgs, styles.imgs2]}>
                             <img src={m1} class={styles.m1} />
-                            <img src={m2} class={styles.m2} />
+                            <img src={m6} class={styles.m6} />
                           </div>
                         </div>
                       </div>
@@ -93,6 +98,29 @@ export default defineComponent({
                       <div class={styles.stepNum}>03</div>
                       <div class={styles.stepContent}>
                         <p class={styles.txt}>
+                          双击<span>《安全证书.p12》</span>
+                          ，输入钥匙串密码：
+                          <span
+                            class={styles.red}
+                            style={{ 'text-decoration': 'underline' }}>
+                            dayaedu
+                          </span>
+                          ，点击
+                          <span>【好】</span>
+                        </p>
+
+                        <div class={styles.imgs}>
+                          <img src={m2} class={styles.m2} />
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
+                  {state.step === 3 && (
+                    <div class={styles.step}>
+                      <div class={styles.stepNum}>04</div>
+                      <div class={styles.stepContent}>
+                        <p class={styles.txt}>
                           <span class={styles.red}>重启浏览器</span>
                           （在电脑屏幕左上方选择当前浏览器并点击
                           <span>【退出】</span>），再重新打开音乐数字课堂网址
@@ -104,9 +132,9 @@ export default defineComponent({
                     </div>
                   )}
 
-                  {state.step === 3 && (
+                  {state.step === 4 && (
                     <div class={styles.step}>
-                      <div class={styles.stepNum}>04</div>
+                      <div class={styles.stepNum}>05</div>
                       <div class={styles.stepContent}>
                         <p class={styles.txt}>
                           在【选择证书】弹窗中点击<span>【确定】</span>按钮
@@ -118,13 +146,17 @@ export default defineComponent({
                     </div>
                   )}
 
-                  {state.step === 4 && (
+                  {state.step === 5 && (
                     <>
                       <div class={styles.step}>
-                        <div class={styles.stepNum}>05</div>
+                        <div class={styles.stepNum}>06</div>
                         <div class={styles.stepContent}>
                           <p class={styles.txt}>
                             输入您的电脑密码，点击<span>【始终允许】</span>
+                            <span
+                              style={{ 'font-weight': 400, color: '#777777' }}>
+                              （若无此步骤则忽略）
+                            </span>
                           </p>
                           <div class={styles.imgs}>
                             <img src={m5} class={styles.m5} />
@@ -132,7 +164,7 @@ export default defineComponent({
                         </div>
                       </div>
                       <div class={styles.step}>
-                        <div class={styles.stepNum}>06</div>
+                        <div class={styles.stepNum}>07</div>
                         <div class={styles.stepContent}>
                           <p class={styles.txt}>
                             证书安装完成，开始使用音乐数字课堂吧。
@@ -150,7 +182,7 @@ export default defineComponent({
                         <div class={styles.stepNum}>01</div>
                         <div class={styles.stepContent}>
                           <p class={styles.txt}>
-                            点击下方下载按钮，下载数据安全证书安装包
+                            点击下方【下载按钮】，下载数据安全证书安装包
                           </p>
                           <div>
                             <div
@@ -163,8 +195,8 @@ export default defineComponent({
                         <div class={styles.stepNum}>02</div>
                         <div class={styles.stepContent}>
                           <p class={styles.txt}>
-                            双击<span>《安全证书.pfx》</span>，一直点击
-                            <span>【下一步】</span>，直至<span>【完成】</span>
+                            双击<span>《安全证书.pfx》</span>，出现弹窗后点击
+                            <span>【下一步】</span>
                           </p>
                           <div class={[styles.imgs, styles.imgs2]}>
                             <img src={w1} class={styles.w1} />