Merge branch 'iteration-authentication' into jenkins

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} />