create-fesd-app 1.0.14 → 1.0.16

package/package.json

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

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

@@ -100,6 +100,7 @@
       cursor: pointer
   +rwdmax(767)
     .cookie-main
+      padding: 50px 25px
       margin: auto auto 0 auto
     .cookie-container 
       flex-direction: column
@@ -114,6 +115,9 @@
     .cookie-container 
       .button-group
         flex-direction: column
+    .cookie-settingBtn
+      margin-top: 30px
+      margin-right: auto
 
 [data-step]
   opacity: 0
@@ -193,9 +197,19 @@
     align-items: center
     flex-shrink: 0
     .icon 
+      position: relative
       cursor: pointer
       opacity: .2
       transition: opacity .5s
+      &::after 
+        position: absolute
+        left: 50%
+        top: 50%
+        transform: translate3d(-50%,-50%,0)
+        width: 30px
+        height: 50px
+        z-index: 1
+        content: ""
       .icon-arrow
         font-size: px(10)
       +hover 
@@ -283,7 +297,7 @@
       border-radius: 500px
       background: #fff
       border: 1px solid rgba(0, 0, 0, .1)
-      transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1)
+      transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1)
       vertical-align: middle
       cursor: pointer
       &::after 
@@ -305,13 +319,16 @@
         height: 15px
         background: #808080
         border-radius: 50%
-        transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1)
+        transform: translateX(0)
+        will-change: transform
+        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1)
       &:active::before 
         box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(128,128,128,0.1)
     input:checked + .switch 
         background: #006FFF
     input:checked + .switch::before 
-      left: 23px
+      // left: 23px
+      transform: translateX(18px)
       background: #fff
     input:checked + .switch::after 
       content: "啟用"

package/src/assets/css/layouts/article4/_article4_setting.sass

@@ -77,10 +77,6 @@ $typeFull-padding_rwd: 30px 20px
 $typeFull-content-padding: 85px 75px 100px
 $typeFull-content-padding_rwd: 20px
 
-// swiper pagination
-$pagination-TB-gap: 20px
-$pagination-TB-gap_rwd: 10px
-
 // 表格與其他物件上下間的距離
 $table-TB-gap: 20px
 $table-TB-gap_rwd: 20px
@@ -341,28 +337,31 @@ $quote-TB-gap: 20px
   // @extend %table_border_rows
   // @extend %table_border_full
   @extend %table_solidSingle_borderColumn
+  
+  &[data-table-markdown="on"]
+    table p
+      white-space: pre-wrap 
+
   table
     th, td
       text-align: left
       background: #fff
+      span
+        display: block
+      ol,ul
+        &:not(:first-child)
+          margin-top: 10px
     thead
       th
         // 以下可修改
         font-size: 16px
         line-height: 1.2
         font-weight: 600
-        span
-          display: block
     tbody
       td
         // 以下可修改
         font-size: 16px
         line-height: 1.2
-        span
-          display: block
-        ol,ul
-          &:not(:first-child)
-            margin-top: 10px
 
 %table_tipText
   // 以下可修改
@@ -581,8 +580,6 @@ $quote-TB-gap: 20px
     line-height: 1.2
     &:not(:first-child)
       margin-top: 10px
-  p
-    white-space: pre-wrap 
   em
     font-style: italic
   a

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

@@ -1,13 +1,19 @@
+// 此處為 demo 資料, 後端會用相同資料結構洗資料在 #_wcookie 上
+// 給後端 :
+// 基本上進階版細項開關不開, 有需求才開; 若開啟進階版細項, 大分類的 close 開關預設會無效, 會以判斷細項是否有開啟 or 全關為主
+// close: 0 -> 開啟; close: 1 -> 關閉
 export const cookieData = [
   {
+    multiType: true, // 是否開啟個別選項設定
     title: "您的 Cookie 偏好設定",
     text: "我們使用不同類型的 Cookies 來優化您在我們的網站上的體驗，點擊下面類別以了解其目的與更多訊息。<br>您可以選擇允許的 Cookies 類型，也可以隨時更改您的偏好設定。<br>提醒您，停用 Cookies 可能會影響您在網站上的體驗，您可以瀏覽我們的隱私權政策，進一步了解我們如何使用 Cookie。",
     options: [
       {
         key: "required",
+        close: 0,
+        disabled: true,
         title: "必要",
         text: "這些 Cookies 對於支持核心網站功能（例如提供安全登錄）至關重要。",
-        disabled: true,
         data: {
           items: [
             {
@@ -15,18 +21,26 @@ export const cookieData = [
               text: "第一方 cookies 由用戶訪問的網站（即主機域名）設置。網站通常使用第一方 cookies 用於跟踪訪客在網站上的行為並個性化他們在網站上的瀏覽體驗以及個性化他們的瀏覽體驗。",
               list: [
                 {
+                  key: "PHPSESSID",
+                  close: 0,
                   title: "PHPSESSID",
                   text: "php用來辨識用戶的session id",
                 },
                 {
+                  key: "XSRF",
+                  close: 0,
                   title: "XSRF-TOKEN",
                   text: "網站防止 CSRF（Cross-Site Request Forgery，跨站請求偽造）攻擊 的 token",
                 },
                 {
+                  key: "web_session",
+                  close: 0,
                   title: "web_session",
                   text: "網站用來辨識用戶的session id",
                 },
                 {
+                  key: "hubspot",
+                  close: 0,
                   title: "hubspot",
                   text: "hubspot 使用了Cloudflare服務，區分真人訪客與惡意機器人",
                 },
@@ -37,12 +51,12 @@ export const cookieData = [
       },
       {
         key: "analytics",
+        close: 1,
+        disabled: false,
         title: "分析與自訂",
         text: "這些 Cookies 分析網站優化的使用情況。",
         notice: "我們將無法分析您的網站使用情況，以提供自定義內容",
-        disabled: false,
         data: {
-          // notice: "",
           items: [
             {
               main: "第一方 Cookie 提供商",
@@ -50,9 +64,13 @@ export const cookieData = [
               list: [
                 {
                   title: "gtm",
+                  key: "gtm",
+                  close: 1,
                 },
                 {
                   title: "ga",
+                  key: "ga",
+                  close: 1,
                   detail: [
                     {
                       title: "_ga",
@@ -76,10 +94,14 @@ export const cookieData = [
               list: [
                 {
                   title: "googlefont",
+                  key: "googlefont",
+                  close: 1,
                 },
                 {
                   title: "Youtube",
                   text: "https://www.youtube.com/",
+                  key: "Youtube",
+                  close: 1,
                   detail: [
                     {
                       title: "YSC",
@@ -121,6 +143,8 @@ export const cookieData = [
                 {
                   title: "Vimeo",
                   text: "https://vimeo.com/",
+                  key: "Vimeo",
+                  close: 1,
                   detail: [
                     {
                       title: "_cf_bm",
@@ -139,6 +163,8 @@ export const cookieData = [
                 {
                   title: "Tiktok",
                   text: "https://www.tiktok.com/zh-Hant-TW/",
+                  key: "Tiktok",
+                  close: 1,
                   detail: [
                     {
                       title: "_ttp",
@@ -169,6 +195,8 @@ export const cookieData = [
                 {
                   title: "instagram",
                   text: "https://www.instagram.com/",
+                  key: "instagram",
+                  close: 1,
                   detail: [
                     {
                       title: "mid",
@@ -181,6 +209,8 @@ export const cookieData = [
                 {
                   title: "meta",
                   text: "https://www.facebook.com/privacy/policy",
+                  key: "meta",
+                  close: 1,
                   detail: [
                     {
                       title: "_fbp",
@@ -197,15 +227,17 @@ export const cookieData = [
       },
       {
         key: "functionality",
+        close: 1,
+        disabled: false,
         title: "性能與功能",
         text: "這些 Cookies 有助於測量和分析，以改善瀏覽體驗",
-        disabled: false,
       },
       {
         key: "advertising",
+        close: 1,
+        disabled: false,
         title: "廣告",
         text: "這些 Cookies 有助於提供與您相關的廣告內容",
-        disabled: false,
       },
     ],
   },

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

@@ -0,0 +1,157 @@
+// 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("")
+}
+
+export const cookieStep1El = (opt, index, isDisabled, isChecked) => {
+  return `
+    <div class="item" data-index="${index}">
+      <div class="left">
+        <div class="checkbox ${isDisabled}">
+          <div class="input-wrap">
+            <input type="checkbox" 
+              id="s1-check-${index}" 
+              ${isChecked()} 
+              data-name="${opt.key}"
+            >
+            <div class="fake-checkbox">
+              <i class="icon-check"></i>
+            </div>
+          </div>
+          <label for="s1-check-${index}">
+            <span>${opt.title}</span>
+          </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="right">
+        <div class="switch-box ${isDisabled}">
+          <input type="checkbox" hidden 
+            id="s1-switch-${index}" 
+            ${isChecked()} 
+            data-name="${opt.key}"
+          >
+          <label class="switch" for="s1-switch-${index}"></label>
+        </div>
+        <div class="icon" data-open>
+          <i class="icon-arrow"></i>
+        </div>
+      </div>
+    </div>
+  `
+}
+
+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()} 
+              data-name="${opt.key}"
+            >
+            <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 type="checkbox" hidden 
+            id="s2-switch-${index}" 
+            ${isChecked()} 
+            data-name="${opt.key}"
+          >
+          <label class="switch" for="s2-switch-${index}"></label>
+        </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) => {
+  return `
+    <div class="list collapseItem" data-collapse>
+      <div class="title collapseTitle" data-collapse-click>
+        <div class="icon">
+          <i class="icon-arrow"></i>
+        </div>
+        <span>${li.title || ""}</span>
+        ${data.multiType ? 
+          `<div class="switch-box ${isDisabled}">
+            <input 
+              type="checkbox" 
+              hidden
+              id="s2-content-${num}-${index}" 
+              ${isListChecked} 
+              data-name="${li.key}" 
+              data-parent="${parentKey || ""}"
+            >
+            <label 
+              class="switch" 
+              for="s2-content-${num}-${index}">
+            </label>
+          </div>` 
+          : ""
+        }
+      </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 ? 
+              generateHtmlString(li.detail, (i) => {
+                return `
+                  <div class="li">
+                    <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>
+                  </div>
+                `
+              }) 
+              : ""
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  `
+}

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

@@ -5,15 +5,24 @@ import {
   scrollLock,
   scrollUnlock
 } from '@xwadex/fesd/tools';
-import Cookies from "js-cookie"
-import { OverlayScrollbars } from 'overlayscrollbars'
-import { cookieData } from "./cookieData"
-
+import Cookies from "js-cookie";
+import { OverlayScrollbars } from 'overlayscrollbars';
+import { cookieData } from "./cookieData";
+import { cookieStep1El, cookieStep2TittleEl, cookieStep2DetailEl } from "./cookieElement"
+
+// 基礎版 cookie
+const cookieBasic = {}
+// 進階版 cookie
+const cookieAdvanced = {}
+// 存方法工具
 const cookieSetting = {}
+// 存結構
 const cookieElements = {}
+// 存一個空物件
+let cookieNewObj = {};
 
 // 簡易版 cookie 設定
-cookieSetting.basicCookiePolicy = () => {
+cookieBasic.basicCookiePolicy = () => {
   const $cookiePolicy = $(".cookie-check"); 
   if (!$cookiePolicy.length) return;
   
@@ -38,12 +47,30 @@ cookieSetting.basicCookiePolicy = () => {
     $agreeBtn.on("click", () => {
       $cookiePolicy.addClass("agree");
       localStorage.setItem("frameworkCookie-agree", "true");
+      // 執行後端方法
+      if (typeof window._wdSetting === 'function') {
+        window._wdSetting()
+      }
     });
   
     $closeBtn.on("click", () => {
       $cookiePolicy.addClass("hidden");
       sessionStorage.setItem("frameworkCookie-agree", "false");
+      if (typeof window._wdSetting === 'function') {
+        window._wdSetting()
+      }
     });
+
+    // ⚠️ 以下可斟酌移除 
+    // 開啟 cookie 視窗按鈕
+    $("[data-cookie-open]").on("click", function() {
+      $cookiePolicy.addClass("first-enter");
+      $cookiePolicy.removeClass("agree");
+      $cookiePolicy.removeClass("hidden");
+      setTimeout(() => {
+        $cookiePolicy.addClass("show");
+      }, 800);
+    })
   };
 
   // 執行事件
@@ -51,33 +78,90 @@ cookieSetting.basicCookiePolicy = () => {
   clickEvent();
 };
 
-// cookie 開啟方法
-cookieSetting.openEvent = (el) => {
-  $(el).addClass("active")
-  setTimeout(() => {
-    $(el).addClass("show")
-    scrollLock();
-    const scrollers = $(".cookie-settingBlock").find('.scroller')[0]
-    OverlayScrollbars(scrollers, {})
-  }, 500);
+// ⚠️ ** --- 結構這邊修改 --- ** ⚠️ 
+// 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)
 }
 
-// cookie 關閉方法
-cookieSetting.closeEvent = (el) => {
-  $(el).removeClass("show")
-  setTimeout(() => {
-    $(el).removeClass("active")
-    scrollUnlock();
-  }, 500);
+// 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)
 }
 
-// 打開進階版 cookie 介面
-cookieSetting.clickEvent = () => {
-  const $settingBtn = $("[data-cookie-open]")
-  const $settingBlock = $(".cookie-settingBlock")
-  $settingBtn.on("click", () => {
-    cookieSetting.openEvent($settingBlock)
-  });
+// 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) {
+    const cloudDdata = JSON.parse(Cookies.get('_wd'))
+    cookieNewObj = { ...cloudDdata }
+  } else {
+    const data = $("#_wcookie").val() ? JSON.parse($("#_wcookie").val())[0] : cookieData[0]
+    const options = data?.options;
+    if (options) {
+      // 判斷是否全開 or 全關 (排除 required)
+      const nonRequiredOptions = options.filter(opt => opt.key !== 'required');
+      const allNonRequiredAreFalse = nonRequiredOptions.every(opt => opt.close === 1);
+      const globalCloseValue = allNonRequiredAreFalse == 1 ? 1 : 0;
+      
+      cookieNewObj.close = globalCloseValue;
+
+      const categoriesObject = options.reduce((acc, option) => {
+        const topLevelKey = option.key;
+        const dataItems = option.data?.items;
+
+        acc[topLevelKey] = { close: option.close };
+
+        if (data.multiType && dataItems !== undefined && dataItems.length > 0) {
+          acc[topLevelKey].list = {};
+
+          dataItems.forEach(item => {
+            item.list?.forEach(listItem => {
+              if (listItem.key) {
+                acc[topLevelKey].list[listItem.key] = {
+                  close: listItem.close
+                };
+              }
+            });
+          });
+        }
+        return acc;
+      }, {});
+      // 若無 cookie 紀錄可抓, 直接新建一個新的物件預存
+      Object.assign(cookieNewObj, categoriesObject);
+    }
+  }
 }
 
 // js 產 cookie 結構方法
@@ -90,42 +174,53 @@ cookieElements.generateHtmlString = (target, fn) => {
 }
 
 // 產資料結構
-cookieSetting.dataAppend = () => {
+cookieAdvanced.dataAppend = () => {
   const $block = $(".cookie-settingBlock")
   if (!$block.length) return
 
-  const data = cookieData[0]
+  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']")
 
-  // step1
+  // 產 step1 結構
   $step1.find(".content-block").html(cookieElements.generateHtmlString(data.options, cookieElements.getStep1Element))
 
-  // step2：點擊打開
+  // step2 點擊打開
   $("[data-open]").on("click", function () {
     const index = $(this).closest(".item").data("index")
     const opt = data.options[index]
     const items = opt.data?.items || []
-    const currentVal = $(`input[type="checkbox"][data-name="${opt.key}"]`).first().prop('checked') ?? false
 
-    // Step2 上方
-    $step2.find(".top-block").html(cookieElements.getStep2TopElement(opt, index))
-
-    // Step2 下方
+    // ⚠️ ** --- 結構這邊修改 --- ** ⚠️ 
+    // 產 step2 下方結構
     const htmlStep2bottom = items.length > 0
-      ? items.map(i => `
+      ? items.map((item,num) => `
         <div class="item">
           <div class="list">
-            <div class="main">${i.main}</div>
-            <div class="text">${i.text}</div>
+            <div class="main">${item.main}</div>
+            <div class="text">${item.text}</div>
           </div>
           ${
-            (i.list || []).map(li =>
-              (li.detail && li.detail.length > 0)
-                ? cookieElements.getStep2BottomElement(li)
+            (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">${li.title || ""}</div>
+                    <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>
                 `
@@ -135,192 +230,240 @@ cookieSetting.dataAppend = () => {
       `).join("")
       : `<div class="item"><div class="text">此分類目前沒有詳細資料。</div></div>`
 
+    // 產 step2 上方結構
+    $step2.find(".top-block").html(cookieElements.getStep2TopElement(opt, index))
+    // 產 step2 下方結構
     $step2.find(".content-block").html(htmlStep2bottom)
-    $step2.find(`input[type="checkbox"][data-name="${opt.key}"]`).prop('checked', currentVal)
 
+    // 換頁
     methods.pageChange(true)
-    methods.collapseEvent('[data-collapse-click]', '[data-collapse]', false, true)
+    // 重綁收合
+    methods.collapseEvent('[data-collapse-click]', '[data-collapse]', '[data-collapse-content]', false, true)
   })
+}
+
+// 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)`
+
+  let isSyncing = false 
+
+  // 開關同步連動控制
+  // ⚠️ 若只有一顆控制按鈕, 可關閉
+  $(document).on('change', 'input[type="checkbox"][data-name]:not(:disabled)', function () { 
+    const key = $(this).data('name') 
+    const val = $(this).prop('checked') 
+    if (isSyncing) return
+    isSyncing = true
 
-  // 開關同步
-  $(document).on('change', 'input[type="checkbox"][data-name]:not(:disabled)', function () {
-    const key = $(this).data('name')
-    const val = $(this).prop('checked')
+    $(`input[type="checkbox"][data-name="${key}"]`).not(this).prop('checked', val)
 
-    $(`input[type="checkbox"][data-name="${key}"]`).prop('checked', val)
+    isSyncing = false
   })
-}
 
-// 存 cookie
-cookieSetting.cookieSaveFn = (el) => {
-  const $container = $(".cookie-settingBlock")
-  const mainCookies = ['required', 'analytics', 'functionality', 'advertising']
+  // 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;
+            }
+          });
+        } 
+      }
 
-  cookieSetting.save = () => {
-    let allOpen = true;
-    const mainCookies = ['required', 'analytics', 'functionality', 'advertising'];
-    const obj = {};
+      isSyncing = false
+    })
 
-    mainCookies.forEach((key) => {
-      const isOpen = $(`input[type="checkbox"][data-name="${key}"]`)
-        .first()
-        .prop('checked');
+  $(document)
+    .off("change.step2content")
+    .on("change.step2content", $step2contentSwitch, function () {
 
-      obj[key] = { close: isOpen ? 0 : 1 };
-    });
+      if (isSyncing) return
+      isSyncing = true
 
-    for (let i = 0; i < mainCookies.length; i++) {
-      const key = mainCookies[i];
+      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
 
-      if (key === 'required') continue;
+      // 改變 cookieNewObj 的值
+      cookieNewObj[parent].list[key].close = val
 
-      if (obj[key].close !== 1) {
-        allOpen = false;
-        break; 
+      // 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)
       }
-    }
-
-    obj.close = allOpen ? 1 : 0;
 
-    Cookies.set('_wd', JSON.stringify(obj), {
-      expires: 180, // 180 天
-      path: '/',
-      sameSite: true,
-    });
-  }
+      isSyncing = false
+    })
 
-  // 重整後重抓 cookie 設定
-  cookieSetting.restore = () => {
-    const raw = Cookies.get('_wd')
-    if (!raw) return
-    let mystore
-    try { 
-      mystore = JSON.parse(raw) 
-    } catch { 
-      return 
-    }
-    mainCookies.forEach((key) => {
-      if (!mystore[key]) return
-      const checked = mystore[key].close === 0
-      $(`input[type="checkbox"][data-name="${key}"]`).prop('checked', checked).trigger('change')
+  $(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
+          })
+        }
+      }
+      isSyncing = false
     })
-  }
+}
+
+// 存 cookie
+cookieAdvanced.cookieSaveFn = () => {
+  const nonRequiredValues = Object.entries(cookieNewObj)
+    .filter(([key]) => key !== 'required' && key !== 'close')
+    .map(([, value]) => value);
+
+  const allNonRequiredAreClosed = nonRequiredValues.every(opt => opt.close === 1);
+  const globalCloseValue = allNonRequiredAreClosed ? 1 : 0;
+
+  // 判斷設定第一層的 close 值
+  cookieNewObj.close = globalCloseValue;
+
+  // 存入 cookie
+  Cookies.set('_wd', JSON.stringify(cookieNewObj), {
+    expires: 180,
+    path: '/',
+    sameSite: true,
+  });
+}
+
+// 點擊方法
+cookieAdvanced.clickEvent = () => {
+  const $settingBtn = $(".cookie-settingBtn")
+  const $settingBlock = $(".cookie-settingBlock")
+  
+  // 打開進階版 cookie 介面
+  $settingBtn.on("click", () => {
+    cookieSetting.openEvent($settingBlock)
+  });
 
   // 一鍵全開
   cookieSetting.enableAll = () => {
-    $(`input[type="checkbox"][data-name]:not(:disabled)`).prop('checked', true).trigger('change')
+    $(`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
+    })
   }
-
   // 綁定按鈕
-  $("[data-cookie-all]").on('click', cookieSetting.enableAll)
+  $("[data-cookie-all]").on('click', function(){
+    cookieSetting.enableAll()
+  })
+  // 儲存
   $("[data-cookie-save]").on('click', function(){
-    cookieSetting.save()
-    cookieSetting.closeEvent($container)
+    cookieAdvanced.cookieSaveFn()
+  })
+  // 關閉視窗
+  $("[data-cookie-close]").on('click', function(){
+    cookieSetting.closeEvent($settingBlock)
+  })
+  $("[data-cookie-reject]").on('click', function() {
+    cookieSetting.rejectAll()
+    cookieAdvanced.cookieSaveFn()
   })
-
-  // 頁面載入時先還原一次
-  $(cookieSetting.restore)
 }
 
-// step 1 結構
-cookieElements.getStep1Element = (opt, index) => {
-  return `
-    <div class="item" data-index="${index}">
-      <div class="left">
-        <div class="checkbox ${opt.disabled ? " disabled" : ""}">
-          <div class="input-wrap">
-            <input type="checkbox" id="s1-check-${index}" ${opt.disabled ? "checked" : ""} data-name="${opt.key}">
-            <div class="fake-checkbox"><i class="icon-check"></i></div>
-          </div>
-          <label for="s1-check-${index}"><span>${opt.title}</span></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="right">
-        <div class="switch-box ${opt.disabled ? " disabled" : ""}">
-          <input type="checkbox" hidden id="s1-switch-${index}" ${opt.disabled ? "checked" : ""} data-name="${opt.key}">
-          <label class="switch" for="s1-switch-${index}"></label>
-        </div>
-        <div class="icon" data-open><i class="icon-arrow"></i></div>
-      </div>
-    </div>
-  `
+// ** --- 工具們 --- **
+// cookie 開啟方法
+cookieSetting.openEvent = (el) => {
+  $(el).addClass("active")
+  setTimeout(() => {
+    $(el).addClass("show")
+    scrollLock();
+    const scrollers = $(".cookie-settingBlock").find('.scroller')[0]
+    OverlayScrollbars(scrollers, {})
+  }, 500);
 }
-
-// step 2 上面結構
-cookieElements.getStep2TopElement = (opt, index) => {
-  return `
-    <div class="box">
-      <div class="left">
-        <div class="checkbox ${opt.disabled ? " disabled" : ""}">
-          <div class="input-wrap">
-            <input type="checkbox" id="s2-check-${index}" ${opt.disabled ? "checked" : ""} data-name="${opt.key}">
-            <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 ${opt.disabled ? " disabled" : ""}">
-          <input type="checkbox" hidden id="s2-switch-${index}" ${opt.disabled ? "checked" : ""} data-name="${opt.key}">
-          <label class="switch" for="s2-switch-${index}"></label>
-        </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>
-  `
+// cookie 關閉方法
+cookieSetting.closeEvent = (el) => {
+  $(el).removeClass("show")
+  setTimeout(() => {
+    $(el).removeClass("active")
+    scrollUnlock();
+  }, 500);
 }
+// 判斷該分類底下細項按鈕狀態
+cookieSetting.hasAnyListItemsOpen = (key) => {
+  const targetList = cookieNewObj[key]?.list;
+  if (!targetList) {
+    if (cookieNewObj[key].close == 0) {
+      return true;
+    } else {
+      return false; 
+    }
+  }
+  const childKeys = Object.keys(targetList);
+  const isOpen = childKeys.some(childKey => {
+    return targetList[childKey]?.close === 0;
+  });
+  return isOpen;
+};
 
-// step 2 底下結構
-cookieElements.getStep2BottomElement = (opt) => {
-  return `
-    <div class="list collapseItem" data-collapse>
-      <div class="title collapseTitle" data-collapse-click>
-        <div class="icon"><i class="icon-arrow"></i></div>
-        <span>${opt.title || ""}</span>
-      </div>
-      ${opt.text ? `<div class="text">${opt.text}</div>` : ""}
-      <div class="list-detail collapseBox" data-collapse-content>
-        <div class="innerBox">
-          <div class="content">
-            ${
-              opt.detail?.length > 0 ? cookieElements.generateHtmlString(opt.detail, (i) => {
-                return `
-                  <div class="li">
-                    <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>
-                  </div>
-                `
-              }) : ""
-            }
-          </div>
-        </div>
-      </div>
-    </div>
-  `
+cookieAdvanced.init = () => {
+  cookieAdvanced.newObj();
+  cookieAdvanced.dataAppend();
+  // cookieAdvanced.initialState();
+  cookieAdvanced.clickEvent();
+  cookieAdvanced.cookieSaveFn();
+  cookieAdvanced.switchState();
 }
 
 methods.toBackend({ getCookieValue: (el) => Cookies.get(el) });
 
-export const init = () => {
+export const init = (isOpenAdvanced = false) => {
   // cookie 基本版
-  cookieSetting.basicCookiePolicy()
+  cookieBasic.basicCookiePolicy();
+  if (!isOpenAdvanced) return
   // cookie 進階版
-  cookieSetting.clickEvent();
-  cookieSetting.cookieSaveFn();
-  cookieSetting.dataAppend();
-}
+  cookieAdvanced.init();
+}

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

@@ -52,7 +52,7 @@ export const inits = () => {
   new ImageValidate();
   // uiInit
   navbar.init();
-  cookie.init();
+  cookie.init(true);
   // coding...
   firstEntryHandler.init();
 }

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

@@ -1,7 +1,5 @@
 // plugins
-import {
-  Anchor4,
-} from '@xwadex/fesd';
+import { Anchor4 } from '@xwadex/fesd';
 
 export const toBackend = (contents) => {
   if (!contents) return
@@ -16,7 +14,7 @@ export const toBackend = (contents) => {
 }
 
 // collapse
-export function collapseEvent(clickTarget, parentBox, anchor = false, single = false) {
+export function collapseEvent(clickTarget, parentBox, contentBox, anchor = false, single = false) {
   if (!clickTarget || !parentBox) return;
 
   const $clickTarget = $(clickTarget);
@@ -25,14 +23,16 @@ export function collapseEvent(clickTarget, parentBox, anchor = false, single = f
 
   $clickTarget.on('click', function () {
     const $parent = $(this).closest(parentBox);
-    if (!$parent.length) return;
+    const $content = $parent.find(contentBox);
+
+    if (!$parent.length || !$content.length) return;
     if ($parent.hasClass('open')) return $parent.removeClass('open');
 
     $parent.addClass('open');
     if (single) $parentBoxes.not($parent).removeClass('open');
     if (anchor) setTimeout(() => Anchor4.run({ target: $parent[0] }), 500);
   });
-}
+};
 
 export function noContentCheck() {
   const params = new URLSearchParams(document.location.search);
@@ -61,7 +61,7 @@ export const pageChange = (type = true) => {
   // 移除 show class
   $('[data-step]').removeClass('show');
   // data-step 監聽 transitionend
-  $('[data-step]').off('transitionend webkitTransitionEnd oTransitionEnd').on('transitionend webkitTransitionEnd oTransitionEnd', function() {
+  $('[data-step]').off('transitionend webkitTransitionEnd oTransitionEnd').on('transitionend webkitTransitionEnd oTransitionEnd', function () {
     const $this = $(this);
 
     if (!$this.hasClass('show')) {

package/src/layouts/_template.pug

@@ -48,7 +48,7 @@ html(lang="zh-Hant-TW" data-overlayscrollbars-initialize)
       // cookie
       block cookie
         include ./components/_cookiePolicy.pug
-
+      
       modern-modal(data-modal-id="my-modal" data-modal-animate="clip-right")
         .close-btn(data-modal-close)
-        .title Modal4
+        .title Modal4

package/src/layouts/components/_cookiePolicy.pug

@@ -6,9 +6,9 @@
         p.title Cookie 
         p.text 關於本網站使用瀏覽器紀錄 Cookie 來提供您最好的使用體驗，我們使用的 Cookie 也包括了第三方 Cookie 。<br>相關資訊請訪問我們的隱私權與 Cookie 政策。如果您選擇繼續瀏覽或關閉這個提示，便表示您已接受我們的網站使用條款。
       .button-group
-        .cookie-btn.close Reject 我拒絕
-        .cookie-btn.agree OK 我接受
-        .cookie-settingBtn(data-cookie-open)
+        .cookie-btn.close(data-cookie-reject) Reject 我拒絕
+        .cookie-btn.agree(data-cookie-save) OK 我接受
+        .cookie-settingBtn
           span Cookie 偏好設定
           .icon 
             i.icon-arrow
@@ -25,7 +25,7 @@
           // JS append 結構
         .button-group
           .cookie-btn.open(data-cookie-all) 啟用所有 Cookie
-          .cookie-btn.save(data-cookie-save) SAVE 儲存本次變更
+          .cookie-btn.save(data-cookie-close) SAVE 儲存本次變更
       .setting-container(data-step="2")
         .back(onclick="document.body.fesd.pageChange(false)")
           .icon 
@@ -35,3 +35,6 @@
           // JS append 結構
         .content-block
           // JS append 結構
+
+// 後端 cookie 資料放這兒
+input(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="5bMdjkfvONE" video-type="youtube")
+          .photo-box(video-target video-id="" 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")