feat(分页组件): 添加导航按钮和提交按钮的颜色配置

支持自定义导航按钮和提交按钮的背景色和文字颜色
在预览模式下也启用分页功能

 <!--
  * @Date: 2025-11-18 16:17:40
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-11-25 14:48:19
+ * @LastEditTime: 2025-11-26 17:17:14
  * @FilePath: /data-table/src/components/PaginationField/index.vue
  * @Description: 分页组件
 -->
@@ -15,15 +15,22 @@
           :disabled="prev_disabled_effective || current === 0"
           round
           type="primary"
+          :color="prevBtnColor"
           class="btn"
           @click="onPrev"
-        >{{ prev_label_effective }}</van-button>
+        >
+          <span :style="{ color: prevTextColor }">{{ prevLabel }}</span>
+        </van-button>
       </div>
       <div class="actionsCenter">
-        <van-button v-if="showSubmit" round type="primary" class="btn" @click="onSubmit">{{ submitButton.text }}</van-button>
+        <van-button v-if="showSubmit" round type="primary" :color="submitButton.btn_color" class="btn" @click="onSubmit">
+          <span :style="{ color: submitButton.text_color }">{{ submitButton.text }}</span>
+        </van-button>
       </div>
       <div class="actionsRight">
-        <van-button v-if="showNext" round type="primary" class="btn" @click="onNext">{{ nextLabel }}</van-button>
+        <van-button v-if="showNext" round type="primary" :color="nextBtnColor" class="btn" @click="onNext">
+          <span :style="{ color: nextTextColor }">{{ nextLabel }}</span>
+        </van-button>
       </div>
     </div>
   </div>
@@ -31,6 +38,7 @@
 
 <script setup>
 import { computed } from 'vue'
+import { styleColor } from "@/constant.js";
 
 const props = defineProps({
     current: { type: Number, default: 0 },
@@ -38,7 +46,11 @@ const props = defineProps({
     isLast: { type: Boolean, default: false },
     prevLabel: { type: String, default: '上一页' },
     nextLabel: { type: String, default: '下一页' },
-    submitButton: { type: Object, default: { text: '提交', back_title: '上一页', is_back: false } },
+    prevBtnColor: { type: String, default: styleColor.baseColor },
+    nextBtnColor: { type: String, default: styleColor.baseColor },
+    prevTextColor: { type: String, default: '#fff' },
+    nextTextColor: { type: String, default: '#fff' },
+    submitButton: { type: Object, default: { text: '提交', back_title: '上一页', is_back: false, btn_color: styleColor.baseColor, text_color: '#fff' } },
     prevDisabled: { type: Boolean, default: false },
 })
 

@@ -6,6 +6,7 @@
  */
 import { ref, computed, watch, nextTick } from 'vue'
 import { showToast } from 'vant'
+import { styleColor } from "@/constant.js";
 
 export function usePagination(formDataRef, options = {}) {
     const { myFormRef, validOther, afterSwitch } = options
@@ -53,15 +54,20 @@ export function usePagination(formDataRef, options = {}) {
     /**
      * 规范化分页符属性为导航配置
      * @param {Object} props 分页符的 component_props
-     * @returns {{prev_text: string, next_text: string, prev_disabled: boolean}} 导航配置
+     * @returns {{prev_text: string, next_text: string, prev_disabled: boolean, prev_btn_color: string, next_btn_color: string, prev_text_color: string, next_text_color: string}} 导航配置
      */
     const normalizePaginatorProps = (props = {}) => {
         // 中文文案默认值
-        const nav = { prev_text: '上一页', next_text: '下一页', prev_disabled: false }
+        const nav = { prev_text: '上一页', next_text: '下一页', prev_disabled: false, prev_btn_color: styleColor.baseColor, next_btn_color: styleColor.baseColor, prev_text_color: '#fff', next_text_color: '#fff' }
         if (props.back_title) nav.prev_text = props.back_title
         if (props.next_title) nav.next_text = props.next_title
         // 是否允许返回：true 允许，false 不允许
         if (typeof props.is_back === 'boolean') nav.prev_disabled = !props.is_back
+        // 导航颜色
+        if (props.back_background_color) nav.prev_btn_color = props.back_background_color
+        if (props.next_background_color) nav.next_btn_color = props.next_background_color
+        if (props.back_color) nav.prev_text_color = props.back_color
+        if (props.next_color) nav.next_text_color = props.next_color
         return nav
     }
 

 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-11-25 16:20:30
+ * @LastEditTime: 2025-11-26 19:52:55
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -40,6 +40,10 @@
           :is-last="current_page_index === filtered_pages.length - 1"
           :prev-label="page_nav.prev_text"
           :next-label="page_nav.next_text"
+          :prev-btn-color="page_nav.prev_btn_color"
+          :next-btn-color="page_nav.next_btn_color"
+          :prev-text-color="page_nav.prev_text_color"
+          :next-text-color="page_nav.next_text_color"
           :submit-button="PCommit"
           :prev-disabled="page_nav.prev_disabled"
           @prev="handlePrev"
@@ -48,8 +52,8 @@
         />
         <!-- 非流程版表单 -->
         <div v-if="formData.length && PCommit.visible && !formSetting.is_flow && !enable_pagination" style="margin: 16px">
-          <van-button round block type="primary" native-type="submit" :disabled="submitStatus">
-            {{ PCommit.text ? PCommit.text : '提交' }}
+          <van-button round block type="primary" :color="PCommit.btn_color" native-type="submit" :disabled="submitStatus">
+            <span :style="{ color: PCommit.text_color }">{{ PCommit.text ? PCommit.text : '提交' }}</span>
           </van-button>
         </div>
         <!-- 流程表单 -->
@@ -478,6 +482,8 @@ onMounted(async () => {
       visible: !page_commit.invisible,
       is_back: page_commit.is_back,
       back_title: page_commit.back_title,
+      btn_color: page_commit.background_color,
+      text_color: page_commit.color,
     };
   }
 
@@ -500,7 +506,7 @@ onMounted(async () => {
 
   formData.value = formatData(page_form);
   // TAG: 构建分页组件
-  if (page_type === 'add' || page_type === undefined) {
+  if (page_type === 'add' || page_type === undefined || model === 'preview') {
     buildPages();
     enable_pagination.value = filtered_pages.value.length > 1;
   }