create-fesd-app 1.0.16 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fesd-app",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@tailwindcss/postcss": "^4.1.10",
     "@tailwindcss/vite": "^4.1.10",
-    "@xwadex/fesd": "0.0.38",
+    "@xwadex/fesd": "0.0.40",
     "ansi-colors": "^4.1.3",
     "chalk": "^5.3.0",
     "clsx": "^2.1.1",

package/src/assets/css/layouts/_cookiePolicy.sass

@@ -1,5 +1,5 @@
 .cookie-check,
-.cookie-settingBlock 
+.cookie-setting 
   .button-group
     display: flex
   .cookie-btn
@@ -92,7 +92,7 @@
       display: flex
       align-items: center
       gap: 10px
-    .cookie-settingBtn
+    .cookie-setting-btn
       margin-left: auto
       display: flex
       align-items: center
@@ -115,20 +115,20 @@
     .cookie-container 
       .button-group
         flex-direction: column
-    .cookie-settingBtn
+    .cookie-setting-btn
       margin-top: 30px
       margin-right: auto
 
-[data-step]
-  opacity: 0
-  display: none
-  transition: all .5s
-  &.show
-    opacity: 1
-  &.active
-    display: block
+// [t4-id]
+//   opacity: 0
+//   display: none
+//   transition: all .5s
+//   &.show
+//     opacity: 1
+//   &.active
+//     display: block
 
-.cookie-settingBlock 
+.cookie-setting 
   display: flex
   justify-content: center
   align-items: center
@@ -336,7 +336,7 @@
       box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(128,128,128,0.1)
 
 .setting-container
-  &[data-step="2"]
+  &[t4-id='step2']
     .back
       display: flex
       align-items: center

package/src/assets/js/commons/cookies/cookieData.js

@@ -1,10 +1,9 @@
 // 此處為 demo 資料, 後端會用相同資料結構洗資料在 #_wcookie 上
-// 給後端 :
-// 基本上進階版細項開關不開, 有需求才開; 若開啟進階版細項, 大分類的 close 開關預設會無效, 會以判斷細項是否有開啟 or 全關為主
+// 給後端: 基本上進階版細項開關不開, 有需求才開; 若開啟進階版細項, 大分類的 close 開關預設會無效, 會以判斷細項是否有開啟 or 全關為主
 // close: 0 -> 開啟; close: 1 -> 關閉
 export const cookieData = [
   {
-    multiType: true, // 是否開啟個別選項設定
+    multiType: true, // 進階版是否開啟個別選項設定
     title: "您的 Cookie 偏好設定",
     text: "我們使用不同類型的 Cookies 來優化您在我們的網站上的體驗，點擊下面類別以了解其目的與更多訊息。<br>您可以選擇允許的 Cookies 類型，也可以隨時更改您的偏好設定。<br>提醒您，停用 Cookies 可能會影響您在網站上的體驗，您可以瀏覽我們的隱私權政策，進一步了解我們如何使用 Cookie。",
     options: [
@@ -27,7 +26,7 @@ export const cookieData = [
                   text: "php用來辨識用戶的session id",
                 },
                 {
-                  key: "XSRF",
+                  key: "XSRF-TOKEN",
                   close: 0,
                   title: "XSRF-TOKEN",
                   text: "網站防止 CSRF（Cross-Site Request Forgery，跨站請求偽造）攻擊 的 token",
@@ -63,14 +62,14 @@ export const cookieData = [
               text: "第一方 cookies 由用戶訪問的網站（即主機域名）設置。網站通常使用第一方 cookies 用於跟踪訪客在網站上的行為並個性化他們在網站上的瀏覽體驗以及個性化他們的瀏覽體驗。",
               list: [
                 {
-                  title: "gtm",
                   key: "gtm",
                   close: 1,
+                  title: "gtm",
                 },
                 {
-                  title: "ga",
                   key: "ga",
                   close: 1,
+                  title: "ga",
                   detail: [
                     {
                       title: "_ga",
@@ -93,15 +92,15 @@ export const cookieData = [
               text: "第三方 cookies 是由其他第三方實體放置在網站上，而不是網站本身，即使用者在地址欄中看到的網域以外的域名。第三方 cookies 通常跟踪訪客在網站之間的行為，通常用於針對性廣告目的。",
               list: [
                 {
-                  title: "googlefont",
                   key: "googlefont",
                   close: 1,
+                  title: "googlefont",
                 },
                 {
-                  title: "Youtube",
-                  text: "https://www.youtube.com/",
                   key: "Youtube",
                   close: 1,
+                  title: "Youtube",
+                  text: "https://www.youtube.com/",
                   detail: [
                     {
                       title: "YSC",
@@ -141,10 +140,10 @@ export const cookieData = [
                   ],
                 },
                 {
-                  title: "Vimeo",
-                  text: "https://vimeo.com/",
                   key: "Vimeo",
                   close: 1,
+                  title: "Vimeo",
+                  text: "https://vimeo.com/",
                   detail: [
                     {
                       title: "_cf_bm",
@@ -161,10 +160,10 @@ export const cookieData = [
                   ],
                 },
                 {
-                  title: "Tiktok",
-                  text: "https://www.tiktok.com/zh-Hant-TW/",
                   key: "Tiktok",
                   close: 1,
+                  title: "Tiktok",
+                  text: "https://www.tiktok.com/zh-Hant-TW/",
                   detail: [
                     {
                       title: "_ttp",
@@ -193,10 +192,10 @@ export const cookieData = [
                   ],
                 },
                 {
-                  title: "instagram",
-                  text: "https://www.instagram.com/",
                   key: "instagram",
                   close: 1,
+                  title: "instagram",
+                  text: "https://www.instagram.com/",
                   detail: [
                     {
                       title: "mid",
@@ -207,10 +206,10 @@ export const cookieData = [
                   ],
                 },
                 {
-                  title: "meta",
-                  text: "https://www.facebook.com/privacy/policy",
                   key: "meta",
                   close: 1,
+                  title: "meta",
+                  text: "https://www.facebook.com/privacy/policy",
                   detail: [
                     {
                       title: "_fbp",

package/src/assets/js/commons/cookies/cookieElement.js

@@ -1,22 +1,23 @@
-// js 產 cookie 結構方法
-/**
- * @param {Array} target
- * @param {(opt: cookieData[0], index: number) => string} fn
- */
-const generateHtmlString = (target, fn) => {
-  return target.map((data, index) => fn(data, index)).join("")
-}
+import { generateHtmlString } from "./cookiePolicy"
 
-export const cookieStep1El = (opt, index, isDisabled, isChecked) => {
+// 若 input 開關按鈕使用相同 data-name, 會同步 checked
+// 第一步驟
+export const cookieStep1El = (
+  opt, 
+  index, 
+  isDisabled, 
+  isChecked
+) => {
   return `
-    <div class="item" data-index="${index}">
+    <div class="item main-option ${isChecked()}" data-index="${index}">
       <div class="left">
         <div class="checkbox ${isDisabled}">
           <div class="input-wrap">
-            <input type="checkbox" 
+            <input 
+              type="checkbox" 
               id="s1-check-${index}" 
-              ${isChecked()} 
               data-name="${opt.key}"
+              ${isChecked()} 
             >
             <div class="fake-checkbox">
               <i class="icon-check"></i>
@@ -34,17 +35,23 @@ export const cookieStep1El = (opt, index, isDisabled, isChecked) => {
                 <i class="icon-notice"></i>
               </div>
               <span>${opt.notice}</span>
-            </div>` : ""}
+            </div>` : ""
+          }
         </div>
       </div>
       <div class="right">
         <div class="switch-box ${isDisabled}">
-          <input type="checkbox" hidden 
+          <input
+            hidden 
+            type="checkbox"
             id="s1-switch-${index}" 
-            ${isChecked()} 
             data-name="${opt.key}"
+            ${isChecked()} 
           >
-          <label class="switch" for="s1-switch-${index}"></label>
+          <label 
+            class="switch" 
+            for="s1-switch-${index}"
+          ></label>
         </div>
         <div class="icon" data-open>
           <i class="icon-arrow"></i>
@@ -54,104 +61,197 @@ export const cookieStep1El = (opt, index, isDisabled, isChecked) => {
   `
 }
 
-export const cookieStep2TittleEl = (opt, index, isDisabled, isChecked) => {
+// 第二步驟標題
+export const cookieStep2TittleEl = (
+  opt, 
+  index,
+  isDisabled, 
+  isChecked
+) => {
   return `
-    <div class="box">
-      <div class="left">
-        <div class="checkbox ${isDisabled}">
-          <div class="input-wrap">
-            <input type="checkbox" 
-              id="s2-check-${index}" 
-              ${isChecked()} 
+    <div class="main-option ${isChecked()}">
+      <div class="box">
+        <div class="left">
+          <div class="checkbox ${isDisabled}">
+            <div class="input-wrap">
+              <input 
+                type="checkbox" 
+                id="s2-check-${index}" 
+                data-name="${opt.key}"
+                ${isChecked()} 
+              >
+              <div class="fake-checkbox">
+                <i class="icon-check"></i>
+              </div>
+            </div>
+            <label for="s2-check-${index}">
+              <span>${opt.title}</span>
+            </label>
+          </div>
+        </div>
+        <div class="right">
+          <div class="switch-box ${isDisabled}">
+            <input 
+              hidden 
+              type="checkbox" 
+              id="s2-switch-${index}" 
               data-name="${opt.key}"
+              ${isChecked()} 
             >
-            <div class="fake-checkbox">
-              <i class="icon-check"></i>
-            </div>
+            <label 
+              class="switch" 
+              for="s2-switch-${index}"
+            >
+            </label>
           </div>
-          <label for="s2-check-${index}">
-            <span>${opt.title}</span>
-          </label>
         </div>
       </div>
-      <div class="right">
-        <div class="switch-box ${isDisabled}">
-          <input type="checkbox" hidden 
-            id="s2-switch-${index}" 
-            ${isChecked()} 
-            data-name="${opt.key}"
-          >
-          <label class="switch" for="s2-switch-${index}"></label>
-        </div>
+      <div class="desc">
+        <div class="text">${opt.text || ""}</div>
+        ${opt.notice ? 
+          `<div class="notice">
+            <div class="icon">
+              <i class="icon-notice"></i>
+            </div>
+            <span>${opt.notice}</span>
+          </div> ` : ""
+        }
       </div>
     </div>
-    <div class="desc">
-      <div class="text">${opt.text || ""}</div>
-      ${opt.notice ? 
-        `<div class="notice">
-          <div class="icon">
-            <i class="icon-notice"></i>
-          </div>
-          <span>${opt.notice}</span>
-        </div> ` : ""}
-    </div>
   `
 }
 
-export const cookieStep2DetailEl = (data, li, index, parentKey, num, isDisabled, isListChecked) => {
+// 第二步驟內容大區塊
+export const cookieStep2ContentEl = (
+  items,
+  cookieNewObj,
+  data,
+  opt
+) => {
+  if (!items.length > 0) return
+  const parentKey = opt.key
   return `
-    <div class="list collapseItem" data-collapse>
+    ${items.map((item,num) => 
+      `
+      <div class="item">
+        <div class="list">
+          <div class="main">${item.main}</div>
+          <div class="text">${item.text}</div>
+        </div>
+        ${(item.list || []).map((li, index) =>
+          (li.detail && li.detail.length > 0) ? 
+            cookieStep2ListCollapseEl(cookieNewObj,data, li, index, parentKey, num)
+            : `${cookieStep2ListNormalEl(cookieNewObj,data, opt,num,li, index,parentKey)}`
+        ).join("")}
+      </div>
+      `
+    ).join("")}
+  `
+}
+
+// 第二步驟細項目: 1. 有細項收合結構
+export const cookieStep2ListCollapseEl = (
+  cookieNewObj,
+  data, 
+  li, 
+  index, 
+  parentKey,
+  num
+)=> {
+  const isDisabled = li.disabled ? " disabled" : ""
+  const isListChecked = cookieNewObj[parentKey].list[li.key].close == 0 ? "checked" : ""
+  return `
+    <div class="list collapseItem list-option ${isListChecked}" data-collapse>
       <div class="title collapseTitle" data-collapse-click>
         <div class="icon">
           <i class="icon-arrow"></i>
         </div>
         <span>${li.title || ""}</span>
-        ${data.multiType ? 
+        ${data.multiType ?
           `<div class="switch-box ${isDisabled}">
             <input 
               type="checkbox" 
               hidden
-              id="s2-content-${num}-${index}" 
-              ${isListChecked} 
+              id="s2-check-${num}-${index}" 
               data-name="${li.key}" 
               data-parent="${parentKey || ""}"
+              ${isListChecked} 
             >
             <label 
               class="switch" 
-              for="s2-content-${num}-${index}">
+              for="s2-check-${num}-${index}">
             </label>
-          </div>` 
-          : ""
+          </div>` : ""
         }
       </div>
-      ${li.text ? 
-        `<div class="text">${li.text}</div>` 
-        : ""
+      ${li.text ?
+        `<div class="text">${li.text}</div>` : ""
       }
       <div class="list-detail collapseBox" data-collapse-content>
         <div class="innerBox">
           <div class="content">
-            ${li.detail?.length > 0 ? 
+            ${li.detail?.length > 0 ?
               generateHtmlString(li.detail, (i) => {
                 return `
                   <div class="li">
-                    <div class="title">${i.title || ""}</div>
-                    ${i.text ? 
-                      `<div class="text">${i.text}</div>` 
-                      : ""
+                    <div class="title">${i.title}</div>
+                    ${i.text ?
+                      `<div class="text">${i.text}</div>` : ""
                     }
                     <div class="flex">
-                      <div class="text bold">${i.typeTitle || ""}</div>
-                      <div class="text">${i.typeDesc || ""}</div>
+                      <div class="text bold">${i.typeTitle}</div>
+                      <div class="text">${i.typeDesc}</div>
                     </div>
                   </div>
-                `
-              }) 
-              : ""
+                ` 
+              }) : ""
             }
           </div>
         </div>
       </div>
     </div>
   `
+}
+
+// 第二步驟細項目: 2. 無細項收合結構
+export const cookieStep2ListNormalEl = (
+  cookieNewObj,
+  data, 
+  opt,
+  num,
+  li, 
+  index,
+  parentKey
+) => {
+  const isListChecked = cookieNewObj[parentKey].list[li.key].close == 0 ? "checked" : ""
+  return `
+    <div class="list list-option ${isListChecked}">
+      <div class="title">
+        ${li.title ?
+          `<span>${li.title}</span>` : ""
+        }
+        ${data.multiType && li.key.length > 0 ? 
+          `<div class="switch-box ${opt.disabled ? "disabled" : ""}">
+            <input 
+              hidden
+              type="checkbox"
+              id="s2-check-${num}-${index}" 
+              data-name="${li.key}" 
+              data-parent="${opt.key}"
+              ${cookieNewObj[opt.key]?.list[li.key]?.close == 0 ? "checked" : ""} 
+            >
+            <label 
+              class="switch" 
+              for="s2-check-${num}-${index}"
+            >
+            </label>
+          </div>` 
+          : ""
+        }
+      </div>
+      ${li.text ?
+        `<div class="text">${li.text}</div>` : ""
+      }
+    </div>
+  `
 }

package/src/assets/js/commons/cookies/cookiePolicy.js

@@ -8,17 +8,15 @@ import {
 import Cookies from "js-cookie";
 import { OverlayScrollbars } from 'overlayscrollbars';
 import { cookieData } from "./cookieData";
-import { cookieStep1El, cookieStep2TittleEl, cookieStep2DetailEl } from "./cookieElement"
+import { cookieStep1El, cookieStep2TittleEl, cookieStep2ContentEl } from "./cookieElement"
 
 // 基礎版 cookie
 const cookieBasic = {}
 // 進階版 cookie
 const cookieAdvanced = {}
-// 存方法工具
 const cookieSetting = {}
-// 存結構
 const cookieElements = {}
-// 存一個空物件
+// 設定一個預存空間
 let cookieNewObj = {};
 
 // 簡易版 cookie 設定
@@ -61,7 +59,6 @@ cookieBasic.basicCookiePolicy = () => {
       }
     });
 
-    // ⚠️ 以下可斟酌移除 
     // 開啟 cookie 視窗按鈕
     $("[data-cookie-open]").on("click", function() {
       $cookiePolicy.addClass("first-enter");
@@ -78,49 +75,6 @@ cookieBasic.basicCookiePolicy = () => {
   clickEvent();
 };
 
-// ⚠️ ** --- 結構這邊修改 --- ** ⚠️ 
-// step 1 結構
-cookieElements.getStep1Element = (opt, index) => {
-  const isDisabled = opt.disabled ? "disabled" : ""
-  const isChecked = () => {
-    if (opt.key == "required") {
-      return "checked"
-    } else {
-      if (cookieSetting.hasAnyListItemsOpen(opt.key)) {
-        return "checked"
-      } else {
-        return ""
-      }
-    }
-  }
-  return cookieStep1El(opt, index, isDisabled, isChecked)
-}
-
-// step 2 上面結構
-cookieElements.getStep2TopElement = (opt, index) => {
-  const isDisabled = opt.disabled ? "disabled" : ""
-  const isChecked = () => {
-    if (opt.key == "required") {
-      return "checked"
-    } else {
-      if (cookieSetting.hasAnyListItemsOpen(opt.key)) {
-        return "checked"
-      } else {
-        return ""
-      }
-    }
-  }
-  return cookieStep2TittleEl(opt, index, isDisabled, isChecked)
-}
-
-// step 2 下面細項結構
-cookieElements.getStep2BottomElement = (data, li, index, parentKey, num) => {
-  const isDisabled = li.disabled ? " disabled" : ""
-  const isListChecked = cookieNewObj[parentKey].list[li.key].close == 0 ? "checked" : ""
-
-  return cookieStep2DetailEl(data, li, index, parentKey, num, isDisabled, isListChecked)
-}
-
 // 產生新物件
 cookieAdvanced.newObj = () => {
   if (Cookies.get('_wd') !== undefined) {
@@ -169,184 +123,164 @@ cookieAdvanced.newObj = () => {
  * @param {Array} target
  * @param {(opt: cookieData[0], index: number) => string} fn
  */
-cookieElements.generateHtmlString = (target, fn) => {
+export const generateHtmlString = (target, fn) => {
   return target.map((data, index) => fn(data, index)).join("")
 }
 
 // 產資料結構
 cookieAdvanced.dataAppend = () => {
-  const $block = $(".cookie-settingBlock")
+  const $block = $(".cookie-setting")
   if (!$block.length) return
 
-  const data = $("#_wcookie").val() ? JSON.parse($("#_wcookie").val())[0] : cookieData[0]
-  const $step1 = $(".setting-container[data-step='1']")
-  const $step2 = $(".setting-container[data-step='2']")
+  const val = $("#_wcookie").val()
+  const data = val ? JSON.parse(val)[0] : cookieData[0]
+  const $step1 = $(".setting-container[t4-id='step1']")
+  const $step2 = $(".setting-container[t4-id='step2']")
 
   // 產 step1 結構
-  $step1.find(".content-block").html(cookieElements.generateHtmlString(data.options, cookieElements.getStep1Element))
+  $step1.find(".content-block").html(
+    generateHtmlString(data.options, cookieElements.getStep1Element)
+  )
 
-  // step2 點擊打開
-  $("[data-open]").on("click", function () {
+  const step2OpenClick = function() {
     const index = $(this).closest(".item").data("index")
     const opt = data.options[index]
     const items = opt.data?.items || []
 
-    // ⚠️ ** --- 結構這邊修改 --- ** ⚠️ 
-    // 產 step2 下方結構
-    const htmlStep2bottom = items.length > 0
-      ? items.map((item,num) => `
-        <div class="item">
-          <div class="list">
-            <div class="main">${item.main}</div>
-            <div class="text">${item.text}</div>
-          </div>
-          ${
-            (item.list || []).map((li, index) =>
-              (li.detail && li.detail.length > 0) ? 
-                cookieElements.getStep2BottomElement(data, li, index, opt.key, num)
-                : `
-                  <div class="list">
-                    <div class="title">
-                      <span>${li.title || ""}</span>
-                      ${data.multiType && li.key.length > 0 ? 
-                      `<div class="switch-box ${opt.disabled ? "disabled" : ""}">
-                        <input type="checkbox" hidden 
-                          id="s2-content-${num}-${index}" 
-                          ${cookieNewObj[opt.key].list[li.key].close == 0 ? "checked" : ""} 
-                          data-name="${li.key}" 
-                          data-parent="${opt.key || ""}"
-                        >
-                        <label class="switch" for="s2-content-${num}-${index}"></label>
-                      </div>` 
-                      : ""
-                      }
-                    </div>
-                    <div class="text">${li.text || ""}</div>
-                  </div>
-                `
-            ).join("")
-          }
-        </div>
-      `).join("")
-      : `<div class="item"><div class="text">此分類目前沒有詳細資料。</div></div>`
-
     // 產 step2 上方結構
-    $step2.find(".top-block").html(cookieElements.getStep2TopElement(opt, index))
+    $step2.find(".top-block").html(
+      cookieElements.getStep2TopElement(opt, index)
+    )
     // 產 step2 下方結構
-    $step2.find(".content-block").html(htmlStep2bottom)
-
+    $step2.find(".content-block").html(
+      cookieStep2ContentEl(items,cookieNewObj,data,opt)
+    )
     // 換頁
-    methods.pageChange(true)
+    document.body.fesd.cookieGoToNext();
     // 重綁收合
-    methods.collapseEvent('[data-collapse-click]', '[data-collapse]', '[data-collapse-content]', false, true)
-  })
+    methods.collapseEvent(
+      '[data-collapse-click]', 
+      '[data-collapse]', 
+      '[data-collapse-content]', 
+      false, 
+      true
+    )
+  }
+  // step2 點擊打開
+  $step1.off('click.step2Open', '[data-open]').on('click.step2Open', '[data-open]', step2OpenClick)
 }
 
 // switch 的一些狀態
 cookieAdvanced.switchState = () => {
-  const $step2contentSwitch = `[data-step="2"] .content-block input[type="checkbox"][data-parent][data-name]:not(.disabled)`
-  const $step2topSwitch = `[data-step="2"] .top-block input[type="checkbox"][data-name]:not(.disabled)`
+  const $step2 = $(".setting-container[t4-id='step2']")
+  const $step2contentSwitch = `[t4-id='step2'] .content-block input[type="checkbox"][data-parent][data-name]:not(.disabled)`
+  const $step2topSwitch = `[t4-id='step2'] .top-block input[type="checkbox"][data-name]:not(.disabled)`
 
   let isSyncing = false 
 
   // 開關同步連動控制
-  // ⚠️ 若只有一顆控制按鈕, 可關閉
-  $(document).on('change', 'input[type="checkbox"][data-name]:not(:disabled)', function () { 
-    const key = $(this).data('name') 
-    const val = $(this).prop('checked') 
+  $(document).off('change.switch').on('change.switch', 'input[type="checkbox"][data-name]:not(:disabled)', function () { 
     if (isSyncing) return
     isSyncing = true
 
+    const $this = $(this)
+    const key = $this.data('name') 
+    const val = $this.prop('checked') 
+    
     $(`input[type="checkbox"][data-name="${key}"]`).not(this).prop('checked', val)
-
+    if (!val) {
+      $($this).parents(".main-option,.list-option").removeClass("checked")
+    } else {
+      $($this).parents(".main-option,.list-option").addClass("checked")
+    }
     isSyncing = false
   })
 
   // step1 變動 → 更新 cookieNewObj
-  $(document)
-    .off('change.cookieStep1')
-    .on('change.cookieStep1', `[data-step="1"] input[type="checkbox"][data-name]`, function () {
-      if (isSyncing) return
-      isSyncing = true
-
-      const key = $(this).data("name")
-      const val = $(this).prop('checked') ? 0 : 1
-      if (cookieNewObj[key]) {
-        cookieNewObj[key].close = val
-        const targetList = cookieNewObj[key].list;
-        if (targetList && typeof targetList === 'object') {
-          Object.keys(targetList).forEach(childKey => {
-            if (targetList[childKey].close !== undefined) {
-              targetList[childKey].close = val;
-            }
-          });
-        } 
-      }
-
-      isSyncing = false
-    })
+  $(document).off('change.cookieStep1').on('change.cookieStep1', `[t4-id='step1'] input[type="checkbox"][data-name]`, function () {
+    if (isSyncing) return
+    isSyncing = true
 
-  $(document)
-    .off("change.step2content")
-    .on("change.step2content", $step2contentSwitch, function () {
+    const $this = $(this)
+    const key = $this.data("name")
+    const val = $this.prop('checked') ? 0 : 1
+
+    if (cookieNewObj[key]) {
+      cookieNewObj[key].close = val
+      const targetList = cookieNewObj[key].list;
+      if (targetList && typeof targetList === 'object') {
+        Object.keys(targetList).forEach(childKey => {
+          if (targetList[childKey].close !== undefined) {
+            targetList[childKey].close = val;
+          }
+        });
+      } 
+    }
+    isSyncing = false
+  })
 
-      if (isSyncing) return
-      isSyncing = true
+  $(document).off("change.step2content").on("change.step2content", $step2contentSwitch, function () {
+    if (isSyncing) return
+    isSyncing = true
 
-      const key = $(this).data("name")
-      const parent = $(this).data("parent")
-      const val = $(this).prop('checked') ? 0 : 1
-      const $step1Switch = $(`[data-step="1"] input[type="checkbox"][data-name='${parent}']:not(.disabled)`)
-      const total = $($step2contentSwitch).length
-      const checked = $($step2contentSwitch).filter(':checked').length
+    const $step1Switch = $(`[t4-id='step1'] input[type="checkbox"][data-name='${parent}']:not(.disabled)`)
+    const key = $(this).data("name")
+    const parent = $(this).data("parent")
+    const val = $(this).prop('checked') ? 0 : 1
+    const total = $($step2contentSwitch).length
+    const checked = $($step2contentSwitch).filter(':checked').length
+    
+    // 改變 cookieNewObj 的值
+    cookieNewObj[parent].list[key].close = val
+
+    // Step2 子項全部打開
+    if (checked === total || checked > 0) {
+      cookieNewObj[parent].close = 0
+      $($step2topSwitch).prop("checked", true)
+      $step1Switch.prop("checked", true)
+      $step2.find(".main-option").addClass("checked")
+    }
+    
+    // Step2 子項全部關閉
+    else if (checked === 0) {
+      cookieNewObj[parent].close = 1
+      $($step2topSwitch).prop("checked", false)
+      $step1Switch.prop("checked", false)
+      $step2.find(".main-option").removeClass("checked")
+    }
 
-      // 改變 cookieNewObj 的值
-      cookieNewObj[parent].list[key].close = val
+    isSyncing = false
+  })
 
-      // Step2 子項全部打開
-      if (checked === total || checked > 0) {
-        cookieNewObj[parent].close = 0
-        $($step2topSwitch).prop("checked", true)
-        $step1Switch.prop("checked", true)
-      }
-      
-      // Step2 子項全部關閉
-      else if (checked === 0) {
-        cookieNewObj[parent].close = 1
-        $($step2topSwitch).prop("checked", false)
-        $step1Switch.prop("checked", false)
-      }
+  $(document).off("change.step2top").on("change.step2top", $step2topSwitch, function () {
+    if (isSyncing) return
+    isSyncing = true
 
-      isSyncing = false
-    })
+    const $this = $(this)
+    const key = $this.data("name")
+    const isChecked = $this.prop("checked")
+    const detectVal = $this.prop('checked') 
+    const val = isChecked ? 0 : 1
 
-  $(document)
-    .off("change.step2top")
-    .on("change.step2top", $step2topSwitch, function () {
-
-      if (isSyncing) return
-      isSyncing = true
-
-      const key = $(this).data("name")
-      const isChecked = $(this).prop("checked")
-      const val = isChecked ? 0 : 1
-
-      // 改所有子項
-      $($step2contentSwitch)
-        .prop('checked', isChecked)
-
-      // 改 cookie main
-      if (cookieNewObj[key]) {
-        const list = cookieNewObj[key].list
-        cookieNewObj[key].close = val
-        if (list) {
-          Object.keys(list).forEach(childKey => {
-            list[childKey].close = val
-          })
-        }
+    // 改所有子項
+    $($step2contentSwitch).prop('checked', isChecked)
+    if (!detectVal) {
+      $step2.find(".list-option").removeClass("checked")
+    } else {
+      $step2.find(".list-option").addClass("checked")
+    }
+    // 改 cookie main
+    if (cookieNewObj[key]) {
+      const list = cookieNewObj[key].list
+      cookieNewObj[key].close = val
+      if (list) {
+        Object.keys(list).forEach(childKey => {
+          list[childKey].close = val
+        })
       }
-      isSyncing = false
-    })
+    }
+    isSyncing = false
+  })
 }
 
 // 存 cookie
@@ -371,42 +305,18 @@ cookieAdvanced.cookieSaveFn = () => {
 
 // 點擊方法
 cookieAdvanced.clickEvent = () => {
-  const $settingBtn = $(".cookie-settingBtn")
-  const $settingBlock = $(".cookie-settingBlock")
-  
-  // 打開進階版 cookie 介面
-  $settingBtn.on("click", () => {
-    cookieSetting.openEvent($settingBlock)
-  });
+  const $settingBtn = $(".cookie-setting-btn")
+  const $settingBlock = $(".cookie-setting")
 
-  // 一鍵全開
-  cookieSetting.enableAll = () => {
-    $(`input[type="checkbox"][data-name]:not(.disabled)`).prop('checked', true).trigger('change')
-    cookieNewObj.close = 0
-    Object.keys(cookieNewObj).forEach(data => {
-      cookieNewObj[data].close == 0
-    })
-  }
-  // 一鍵全關
-  cookieSetting.rejectAll = () => {
-    $(`input[type="checkbox"][data-name]:not([data-name="required"])`).prop('checked', false).trigger('change')
-    cookieNewObj.close = 1
-    Object.keys(cookieNewObj).forEach(data => {
-      cookieNewObj[data].close == 1
-    })
-  }
+  // 打開進階版 cookie 介面
+  $settingBtn.on("click", () => cookieSetting.openEvent($settingBlock));
   // 綁定按鈕
-  $("[data-cookie-all]").on('click', function(){
-    cookieSetting.enableAll()
-  })
+  $("[data-cookie-all]").on('click', cookieSetting.enableAll)
   // 儲存
-  $("[data-cookie-save]").on('click', function(){
-    cookieAdvanced.cookieSaveFn()
-  })
+  $("[data-cookie-save]").on('click', cookieAdvanced.cookieSaveFn)
   // 關閉視窗
-  $("[data-cookie-close]").on('click', function(){
-    cookieSetting.closeEvent($settingBlock)
-  })
+  $("[data-cookie-close]").on('click', () => cookieSetting.closeEvent($settingBlock))
+  // 我拒絕
   $("[data-cookie-reject]").on('click', function() {
     cookieSetting.rejectAll()
     cookieAdvanced.cookieSaveFn()
@@ -420,10 +330,11 @@ cookieSetting.openEvent = (el) => {
   setTimeout(() => {
     $(el).addClass("show")
     scrollLock();
-    const scrollers = $(".cookie-settingBlock").find('.scroller')[0]
+    const scrollers = $(".cookie-setting").find('.scroller')[0]
     OverlayScrollbars(scrollers, {})
   }, 500);
 }
+
 // cookie 關閉方法
 cookieSetting.closeEvent = (el) => {
   $(el).removeClass("show")
@@ -432,6 +343,27 @@ cookieSetting.closeEvent = (el) => {
     scrollUnlock();
   }, 500);
 }
+
+// 全部打開
+cookieSetting.enableAll = () => {
+  $(`input[type="checkbox"][data-name]:not(.disabled)`).prop('checked', true).trigger('change')
+  $('.main-option:not([data-name="required"]),.list-option:not([data-name="required"])').addClass("checked")
+  cookieNewObj.close == 0
+  Object.keys(cookieNewObj).forEach(data => {
+    cookieNewObj[data].close == 0
+  })
+}
+
+// 一鍵全關
+cookieSetting.rejectAll = () => {
+  $(`input[type="checkbox"][data-name]:not([data-name="required"])`).prop('checked', false).trigger('change')
+  $('.main-option:not([data-name="required"]),.list-option:not([data-name="required"])').removeClass("checked")
+  cookieNewObj.close = 1
+  Object.keys(cookieNewObj).forEach(data => {
+    cookieNewObj[data].close = 1
+  })
+}
+
 // 判斷該分類底下細項按鈕狀態
 cookieSetting.hasAnyListItemsOpen = (key) => {
   const targetList = cookieNewObj[key]?.list;
@@ -449,6 +381,57 @@ cookieSetting.hasAnyListItemsOpen = (key) => {
   return isOpen;
 };
 
+// step 1 結構
+cookieElements.getStep1Element = (opt, index) => {
+  const isDisabled = opt.disabled ? "disabled" : ""
+  const isChecked = () => {
+    if (opt.key == "required") {
+      return "checked"
+    } else {
+      if (cookieSetting.hasAnyListItemsOpen(opt.key)) {
+        return "checked"
+      } else {
+        return ""
+      }
+    }
+  }
+  return cookieStep1El(opt, index, isDisabled, isChecked)
+}
+// step 2 上面結構
+cookieElements.getStep2TopElement = (opt, index) => {
+  const isDisabled = opt.disabled ? "disabled" : ""
+  const isChecked = () => {
+    if (opt.key == "required") {
+      return "checked"
+    } else {
+      if (cookieSetting.hasAnyListItemsOpen(opt.key)) {
+        return "checked"
+      } else {
+        return ""
+      }
+    }
+  }
+  return cookieStep2TittleEl(opt, index, isDisabled, isChecked)
+}
+
+// 頁籤
+cookieSetting.goToTab = (el = true) => {
+  const tab = $('tab-el[t4-name="cookie-tab"]')
+  const $step2 = $(".setting-container[t4-id='step2']")
+  if (el) {
+    tab[0].goNext();
+  } else {
+    tab[0].goPrev();
+    $step2.find(".top-block, .content-block").empty();
+  }
+}
+
+methods.toBackend({ 
+  getCookieValue: (el) => Cookies.get(el),
+  cookieGoToNext: (el) => cookieSetting.goToTab(el),
+});
+
+// init
 cookieAdvanced.init = () => {
   cookieAdvanced.newObj();
   cookieAdvanced.dataAppend();
@@ -458,8 +441,7 @@ cookieAdvanced.init = () => {
   cookieAdvanced.switchState();
 }
 
-methods.toBackend({ getCookieValue: (el) => Cookies.get(el) });
-
+// 預設為 false -> 基礎版, true -> 進階版
 export const init = (isOpenAdvanced = false) => {
   // cookie 基本版
   cookieBasic.basicCookiePolicy();

package/src/assets/js/commons/inits.js

@@ -11,7 +11,7 @@ import {
   scrollLock,
   scrollUnlock
 } from '@xwadex/fesd/tools';
-import { toBackend, pageChange } from "@/commons/methods";
+import { toBackend } from "@/commons/methods";
 import { cookie } from "@/commons";
 import { lazyLoadImg } from '@/plugins';
 import { navbar } from '@/ui';
@@ -39,19 +39,22 @@ firstEntryHandler.init = () => {
     firstEntryHandler.active()
 }
 
-toBackend({ scrollLock, scrollUnlock, pageChange: (el) => pageChange(el) });
+toBackend({ scrollLock, scrollUnlock });
 
 export const inits = () => {
   // commonInit
   bodyScrollbarInit();
   appleDebug();
   fixMobile100vh();
-  cgpagechange();
+  // 預設為 true -> 無幽靈區塊（以 href-link 為主）, false -> 整區塊可觸發點擊（click-block 功能啟動）
+  // 詳情可見 a & hover 規範文件
+  cgpagechange(true);
   // pluginInit
   lazyLoadImg();
   new ImageValidate();
   // uiInit
   navbar.init();
+  // 預設為 false -> 基礎版, true -> 進階版
   cookie.init(true);
   // coding...
   firstEntryHandler.init();

package/src/assets/js/commons/methods.js

@@ -45,32 +45,3 @@ export function noContentCheck() {
     noContentBox.show();
   }
 }
-
-export const pageChange = (type = true) => {
-  const $step = $('[step-active]')
-  let step = Number($step.attr('step-active'));
-
-  if (type) step += 1
-  else step -= 1
-
-  step = step < 1 ? 1 : step > 3 ? 3 : step
-  // step = Math.max(1, Math.min(3, step));
-
-  $step.attr('step-active', step);
-
-  // 移除 show class
-  $('[data-step]').removeClass('show');
-  // data-step 監聽 transitionend
-  $('[data-step]').off('transitionend webkitTransitionEnd oTransitionEnd').on('transitionend webkitTransitionEnd oTransitionEnd', function () {
-    const $this = $(this);
-
-    if (!$this.hasClass('show')) {
-      $this.removeClass('active');
-
-      $(`[data-step="${step}"]`).addClass('active');
-      setTimeout(() => {
-        $(`[data-step="${step}"]`).addClass('show');
-      }, 100)
-    }
-  });
-}

package/src/layouts/_template.pug

@@ -17,9 +17,9 @@ html(lang="zh-Hant-TW" data-overlayscrollbars-initialize)
     block fontSheet
       link(rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&family=Jost:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&family=Noto+Sans+TC:wght@100..900&display=swap")
     // 共用樣式
+    link(rel="stylesheet", href="/src/assets/css/tailwind.css")
     link(rel="stylesheet", href="/assets/fonts/icomoon/style.css")
     link(rel="stylesheet", href="/src/assets/css/style.sass")
-    link(rel="stylesheet", href="/src/assets/css/tailwind.css")
     // 個別頁面 CSS
     block stylesheet
     // 主頁面 CSS

package/src/layouts/components/_cookiePolicy.pug

@@ -6,35 +6,41 @@
         p.title Cookie 
         p.text 關於本網站使用瀏覽器紀錄 Cookie 來提供您最好的使用體驗，我們使用的 Cookie 也包括了第三方 Cookie 。<br>相關資訊請訪問我們的隱私權與 Cookie 政策。如果您選擇繼續瀏覽或關閉這個提示，便表示您已接受我們的網站使用條款。
       .button-group
+        // [data-cookie-reject] -> 全部關閉; [data-cookie-save] -> 儲存 cookie
         .cookie-btn.close(data-cookie-reject) Reject 我拒絕
         .cookie-btn.agree(data-cookie-save) OK 我接受
-        .cookie-settingBtn
+        // 若此專案無開進階版 cookie, 請移除以下結構！
+        .cookie-setting-btn
           span Cookie 偏好設定
           .icon 
             i.icon-arrow
 
 // 進階版 cookie
-.cookie-settingBlock
+// 若此專案無開進階版 cookie, 請移除以下結構！
+.cookie-setting
   .scroller 
-    .setting-main(step-active="1")
-      .setting-container.show.active(data-step="1") 
-        .title-block
-          .title 您的 Cookie 偏好設定
-          .text 我們使用不同類型的 Cookies 來優化您在我們的網站上的體驗，點擊下面類別以了解其目的與更多訊息。<br>您可以選擇允許的 Cookies 類型，也可以隨時更改您的偏好設定。<br>提醒您，停用 Cookies 可能會影響您在網站上的體驗，您可以瀏覽我們的隱私權政策，進一步了解我們如何使用 Cookie。
-        .content-block
-          // JS append 結構
-        .button-group
-          .cookie-btn.open(data-cookie-all) 啟用所有 Cookie
-          .cookie-btn.save(data-cookie-close) SAVE 儲存本次變更
-      .setting-container(data-step="2")
-        .back(onclick="document.body.fesd.pageChange(false)")
-          .icon 
-            i.icon-arrow
-          span BACK
-        .top-block
-          // JS append 結構
-        .content-block
-          // JS append 結構
-
-// 後端 cookie 資料放這兒
-input(input type="hidden" id="_wcookie" value='')
+    .setting-main
+      tab-el(t4-name="cookie-tab" t4-type="process" t4-group='false')
+        // 步驟 1
+        .setting-container(t4-role="tabPanel" t4-id='step1') 
+          .title-block
+            .title 您的 Cookie 偏好設定
+            .text 我們使用不同類型的 Cookies 來優化您在我們的網站上的體驗，點擊下面類別以了解其目的與更多訊息。<br>您可以選擇允許的 Cookies 類型，也可以隨時更改您的偏好設定。<br>提醒您，停用 Cookies 可能會影響您在網站上的體驗，您可以瀏覽我們的隱私權政策，進一步了解我們如何使用 Cookie。
+          .content-block
+            // JS append 結構 (cookieStep1El)
+          .button-group
+            .cookie-btn.open(data-cookie-all) 啟用所有 Cookie
+            .cookie-btn.save(data-cookie-close) SAVE 儲存本次變更
+        // 步驟 2
+        .setting-container(t4-role="tabPanel" t4-id='step2')
+          .back(onClick=`document.body.fesd.cookieGoToNext(false)`)
+            .icon 
+              i.icon-arrow
+            span BACK
+          .top-block
+            // JS append 結構 (cookieStep2TittleEl)
+          .content-block
+            // JS append 結構 (cookieStep2ContentEl)
+  // 後端 cookie 資料放這兒, 先放假結構
+  // 若此專案無開進階版 cookie, 請移除以下結構！
+  input(type="hidden" id="_wcookie" value='')

package/src/pages/index.pug

@@ -79,7 +79,7 @@ block content
       h3 Video4 👇
       .row
         .grid
-          .photo-box(video-target video-id="" video-type="youtube")
+          .photo-box(video-target video-id="5bMdjkfvONE" video-type="youtube")
             picture
               source(srcset="https://cdn.wdd.idv.tw/image/video-cover01.webp" type="image/webp")
               source(srcset="https://cdn.wdd.idv.tw/image/video-cover01.jpg" type="image/jpeg")