refactor: simplify the setting form (#184)

简化设置表单的部分选项，并提供旧数据的兼容。

before:

<img width="627" alt="image" src="https://github.com/user-attachments/assets/511da020-faed-43bb-95b7-2dcc17dfe90d">
<img width="562" alt="image" src="https://github.com/user-attachments/assets/08f7cd4b-ec85-4157-9c2a-5aa7384aa1ab">

after:

<img width="562" alt="image" src="https://github.com/user-attachments/assets/360462e2-35b7-4de6-8435-05a324dbb5d3">
<img width="561" alt="image" src="https://github.com/user-attachments/assets/e4fc8876-9152-424c-b49c-c438f20a0403">


```release-note
简化设置表单的部分选项
```

settings.yaml

@@ -81,7 +81,7 @@ spec:
     - group: style
       label: 样式
       formSchema:
-        - $formkit: radio
+        - $formkit: select
           name: color_scheme
           label: 默认配色
           value: system
@@ -119,12 +119,57 @@ spec:
           id: show_share_button
           label: 显示分享按钮
           value: true
-        - $formkit: repeater
+        - $formkit: select
           if: $get(show_share_button).value
+          name: share_item_ids
+          key: share_item_ids
+          id: share_item_ids
+          multiple: true
+          sortable: true
+          label: 分享平台
+          value:
+            - wechat
+            - x
+            - telegram
+            - facebook
+            - qq
+            - qzone
+            - weibo
+            - douban
+            - native
+          options:
+            - label: 微信
+              value: wechat
+            - label: X
+              value: x
+            - label: Telegram
+              value: telegram
+            - label: Facebook
+              value: facebook
+            - label: QQ
+              value: qq
+            - label: QQ 空间
+              value: qzone
+            - label: 微博
+              value: weibo
+            - label: 豆瓣
+              value: douban
+            - label: 系统分享
+              value: native
+        - $formkit: checkbox
+          name: show_deprecated_items
+          key: show_deprecated_items
+          id: show_deprecated_items
+          label: 显示已过时选项
+          value: false
+          help: 这些选项将在未来的版本移除，请尽快使用替代方案
+        - $formkit: repeater
+          if: $get(show_deprecated_items).value
           name: share_items
           key: share_items
           id: share_items
           label: 分享按钮
+          help: 此选项已过时，请使用上方新提供的分享平台设置项
           value:
             - id: wechat
             - id: x
@@ -247,7 +292,7 @@ spec:
               name: url
               label: 链接
               validation: "required"
-            - $formkit: radio
+            - $formkit: select
               name: url_type
               label: 链接类型
               value: normal
@@ -291,25 +336,32 @@ spec:
           if: "$get(style).value === style_2"
           label: 标语
 
-        - $formkit: menuRadio
+        - $formkit: select
           if: "$get(style).value === style_1"
-          name: menu
-          id: menu
-          key: menu
+          name: right_menu
+          id: right_menu
+          key: right_menu
           label: 右侧菜单
+          action: "/api/v1alpha1/menus"
+          autoSelect: false
+          clearable: true
+          requestOption:
+            labelField: "spec.displayName"
+            valueField: "metadata.name"
 
-        - $formkit: repeater
+        - $formkit: select
           if: "$get(style).value === style_2"
-          name: menus
-          id: menus
-          key: menus
+          name: menu_names
+          id: menu_names
+          key: menu_names
           label: 菜单组
           value: []
-          children:
-            - $formkit: menuRadio
-              name: name
-              label: 菜单
-              validation: "required"
+          multiple: true
+          sortable: true
+          action: "/api/v1alpha1/menus"
+          requestOption:
+            labelField: "spec.displayName"
+            valueField: "metadata.name"
 
         - $formkit: repeater
           name: social_media
@@ -367,7 +419,7 @@ spec:
               name: url
               label: 链接
               validation: "required"
-            - $formkit: radio
+            - $formkit: select
               name: url_type
               label: 链接类型
               value: normal
@@ -378,6 +430,35 @@ spec:
                 - label: 图片
                   value: image
 
+        - $formkit: checkbox
+          name: show_deprecated_items
+          key: show_deprecated_items
+          id: show_deprecated_items
+          label: 显示已过时选项
+          value: false
+          help: 这些选项将在未来的版本移除，请尽快使用替代方案
+
+        - $formkit: menuRadio
+          if: "$get(show_deprecated_items).value"
+          name: menu
+          id: menu
+          key: menu
+          label: 右侧菜单
+          help: 此选项已过时，请使用上方新提供的右侧菜单设置项
+
+        - $formkit: repeater
+          if: "$get(show_deprecated_items).value"
+          name: menus
+          id: menus
+          key: menus
+          label: 菜单组
+          value: []
+          help: 此选项已过时，请使用上方新提供的菜单组设置项
+          children:
+            - $formkit: menuRadio
+              name: name
+              label: 菜单
+              validation: "required"
     - group: beian
       label: 备案设置
       formSchema:

src/alpine-data/share.ts

@@ -1,6 +1,6 @@
 import pupa from "pupa";
 
-export default (shareIds: { id: string }[]) => ({
+export default (deprecatedShareIds: { id: string }[], shareIds: string[]) => ({
   permalink: window.location.href,
   title: document.title,
   shareModal: false,
@@ -69,9 +69,15 @@ export default (shareIds: { id: string }[]) => ({
       type: "native",
     },
   ],
+  get getShareIds() {
+    if (shareIds?.length) {
+      return shareIds;
+    }
+    return deprecatedShareIds.map((item) => item.id);
+  },
   get activeShareItems() {
     return shareIds
-      .map((id) => this.presetShareItems.find((item) => item.id === id.id))
+      .map((id) => this.presetShareItems.find((item) => item.id === id))
       .filter(Boolean)
       .filter((item) => item?.type !== "native" || navigator.canShare?.({ title: this.title, url: this.permalink }));
   },

templates/links.html

@@ -36,11 +36,7 @@
       </div>
       <hr th:if="${haloCommentEnabled}" class="my-10 dark:border-slate-700" />
       <div th:if="${haloCommentEnabled}">
-          <halo:comment
-              group="plugin.halo.run"
-              kind="Plugin"
-              th:attr="name=${pluginName}"
-          />
+        <halo:comment group="plugin.halo.run" kind="Plugin" th:attr="name=${pluginName}" />
       </div>
     </div>
   </th:block>

templates/modules/footer-social.html

@@ -1,20 +1,22 @@
-<div th:with="social_medias = ${theme.config.footer.social_media}" class="mt-4 flex justify-center space-x-6 sm:mt-0">
-  <th:block th:each="social_media : ${social_medias}">
-    <a
-      th:if="${social_media.url_type == 'normal'}"
-      th:href="${social_media.url}"
-      class="text-gray-500 hover:text-gray-900 dark:hover:text-white"
-      th:title="${social_media.name}"
-    >
-      <div th:classappend="${social_media.icon}" class="size-5"></div>
-    </a>
-    <span
-      th:if="${social_media.url_type == 'image'}"
-      th:attr="x-data=|{openImageModal:false,image: '${social_media.url}', alt: '${social_media.name}'}|"
-      class="cursor-pointer text-gray-500 hover:text-gray-900 dark:hover:text-white"
-    >
-      <div th:classappend="${social_media.icon}" class="size-5" @click="openImageModal = true"></div>
-      <th:block th:replace="~{modules/image-view-modal}" />
-    </span>
-  </th:block>
-</div>
+<th:block th:with="social_media = ${theme.config.footer.social_media}">
+  <div th:unless="${#lists.isEmpty(social_media)}" class="mt-4 flex justify-center space-x-6 sm:mt-0">
+    <th:block th:each="item : ${social_media}">
+      <a
+        th:if="${item.url_type == 'normal'}"
+        th:href="${item.url}"
+        class="text-gray-500 hover:text-gray-900 dark:hover:text-white"
+        th:title="${item.name}"
+      >
+        <div th:classappend="${item.icon}" class="size-5"></div>
+      </a>
+      <span
+        th:if="${item.url_type == 'image'}"
+        th:attr="x-data=|{openImageModal:false,image: '${item.url}', alt: '${item.name}'}|"
+        class="cursor-pointer text-gray-500 hover:text-gray-900 dark:hover:text-white"
+      >
+        <div th:classappend="${item.icon}" class="size-5" @click="openImageModal = true"></div>
+        <th:block th:replace="~{modules/image-view-modal}" />
+      </span>
+    </th:block>
+  </div>
+</th:block>

templates/modules/footer.html

@@ -13,15 +13,17 @@
       >
       </span>
     </a>
-    <th:block th:if="${not #strings.isEmpty(theme.config.footer.menu)}">
+    <th:block
+      th:unless="${#strings.isEmpty(theme.config.footer.right_menu)} and ${#strings.isEmpty(theme.config.footer.menu)}"
+    >
       <ul
-        th:with="menu = ${menuFinder.getByName(theme.config.footer.menu)}"
-        class="mb-6 flex flex-wrap items-center justify-center text-sm text-gray-500 dark:text-slate-200 sm:mb-0 sm:justify-start"
+        th:with="menu = ${menuFinder.getByName(theme.config.footer.right_menu ?: theme.config.footer.menu)}"
+        class="mb-6 flex flex-wrap items-center justify-center space-x-4 text-sm text-gray-500 dark:text-slate-200 sm:mb-0 sm:justify-start md:space-x-6"
       >
         <li th:each="menuItem : ${menu.menuItems}">
           <a
             th:href="@{${menuItem.status.href}}"
-            class="mr-4 transition-all hover:text-gray-900 hover:underline dark:hover:text-white md:mr-6"
+            class="transition-all hover:text-gray-900 hover:underline dark:hover:text-white"
             th:text="${menuItem.status.displayName}"
           ></a>
         </li>
@@ -32,8 +34,10 @@
   </div>
   <hr class="my-6 border-gray-100 dark:border-slate-700 sm:mx-auto lg:my-8" />
   <div class="space-y-1">
-    <span class="mx-auto block max-w-7xl px-4 text-center text-sm text-gray-500 dark:text-slate-300 lg:px-6"
-      th:if="${not #strings.isEmpty(theme.config.beian.gongan_text)}">
+    <span
+      class="mx-auto block max-w-7xl px-4 text-center text-sm text-gray-500 dark:text-slate-300 lg:px-6"
+      th:if="${not #strings.isEmpty(theme.config.beian.gongan_text)}"
+    >
       <a
         href="https://beian.miit.gov.cn/"
         class="hover:underline"
@@ -92,7 +96,31 @@
       </span>
     </div>
     <div
-      th:if="${not #lists.isEmpty(theme.config.footer.menus)}"
+      th:unless="${#lists.isEmpty(theme.config.footer.menu_names)}"
+      class="grid grid-cols-2 gap-8 sm:grid-cols-4 sm:gap-12"
+    >
+      <th:block th:each="name : ${theme.config.footer.menu_names}">
+        <div th:with="menu = ${menuFinder.getByName(name)}">
+          <h2
+            class="mb-6 text-sm font-semibold text-gray-900 dark:text-slate-50"
+            th:text="${menu.spec.displayName}"
+          ></h2>
+          <ul th:with="menuItems = ${menu.menuItems}" class="text-sm text-gray-500 dark:text-slate-200">
+            <li th:each="menuItem : ${menuItems}" class="mb-4">
+              <a
+                th:href="@{${menuItem.status.href}}"
+                class="transition-all hover:text-gray-900 hover:underline dark:hover:text-white"
+                th:text="${menuItem.status.displayName}"
+              ></a>
+            </li>
+          </ul>
+        </div>
+      </th:block>
+    </div>
+
+    <!--/*Compatibility solution, will be removed in the future*/-->
+    <div
+      th:if="${#lists.isEmpty(theme.config.footer.menu_names)} and ${not #lists.isEmpty(theme.config.footer.menus)}"
       class="grid grid-cols-2 gap-8 sm:grid-cols-4 sm:gap-12"
     >
       <th:block th:each="menuName : ${theme.config.footer.menus}">
@@ -125,8 +153,10 @@
       </span>
 
       <div class="flex flex-col gap-1 sm:flex-row">
-        <span class="block text-center text-sm text-gray-500 sm:text-left"
-          th:if="${not #strings.isEmpty(theme.config.beian.gongan_text)}">
+        <span
+          class="block text-center text-sm text-gray-500 sm:text-left"
+          th:if="${not #strings.isEmpty(theme.config.beian.gongan_text)}"
+        >
           <a
             href="https://beian.miit.gov.cn/"
             class="hover:underline"

templates/post.html

@@ -115,7 +115,7 @@
 
           <div
             th:if="${theme.config.post.show_share_button}"
-            th:attr="x-data=|share(${theme.config.post.share_items})|"
+            th:attr="x-data=|share(${theme.config.post.share_items},${theme.config.post.share_item_ids})|"
             class="group inline-flex cursor-pointer items-center gap-0.5 rounded-lg"
             @click="shareModal = true"
           >