feat: 添加 Spring Boot API 服务和前端 uniapp 对接

- 新增 Spring Boot 主类 XuanApplication - 新增八字排盘 REST API 控制器 BaZiController - 更新 pom.xml 添加 Spring Boot 依赖 - 新增前端 API 请求工具类 api.js - 修改 bazi.vue 调用后端 API - 修改 result.vue 适配后端数据格式 - 新增 application.properties 配置文件
2026-03-06 03:23:04 +08:00
1 parent 3ed8e94723
commit 0ef15520fa
@@ -4,9 +4,17 @@
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

+    <parent>
+        <groupId>org.springframework.boot</groupId>
+        <artifactId>spring-boot-starter-parent</artifactId>
+        <version>2.7.18</version>
+        <relativePath/>
+    </parent>
+
    <groupId>xuan</groupId>
    <artifactId>xuan-utils-pro</artifactId>
    <version>2.0-SNAPSHOT</version>
+    <packaging>jar</packaging>

    <!-- 依赖版本 -->
    <properties>
@@ -34,23 +42,17 @@

    <!-- 依赖 -->
    <dependencies>
-        <!-- spring -->
+        <!-- spring boot web -->
        <dependency>
-            <groupId>org.springframework</groupId>
-            <artifactId>spring-core</artifactId>
-            <version>${spring.core.version}</version>
-        </dependency>
-        <!-- tomcat -->
-        <dependency>
-            <groupId>org.apache.tomcat.embed</groupId>
-            <artifactId>tomcat-embed-core</artifactId>
-            <version>${tomcat.embed.core.version}</version>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- junit -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>${junit.version}</version>
+            <scope>test</scope>
        </dependency>
        <!-- lombok -->
        <dependency>
@@ -98,12 +100,15 @@
            <artifactId>lunar</artifactId>
            <version>${lunar.version}</version>
        </dependency>
-        <!-- jackson -->
-        <dependency>
-            <groupId>com.fasterxml.jackson.core</groupId>
-            <artifactId>jackson-databind</artifactId>
-            <version>${jackson.databind.version}</version>
-        </dependency>
    </dependencies>

+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.springframework.boot</groupId>
+                <artifactId>spring-boot-maven-plugin</artifactId>
+            </plugin>
+        </plugins>
+    </build>
+
 </project>
@@ -0,0 +1,13 @@
+package xuan;
+
+import org.springframework.boot.SpringApplication;
+import org.springframework.boot.autoconfigure.SpringBootApplication;
+
+@SpringBootApplication
+public class XuanApplication {
+
+    public static void main(String[] args) {
+        SpringApplication.run(XuanApplication.class, args);
+    }
+
+}
@@ -0,0 +1,130 @@
+package xuan.controller;
+
+import org.springframework.web.bind.annotation.*;
+import xuan.core.bazi.BaZi;
+import xuan.core.bazi.settings.BaZiJiChuSetting;
+import xuan.core.bazi.settings.BaZiShenShaSetting;
+import xuan.core.bazi.settings.BaZiGanZhiLiuYiSetting;
+
+import java.util.HashMap;
+import java.util.Map;
+
+@RestController
+@RequestMapping("/api/bazi")
+public class BaZiController {
+
+    @PostMapping("/paipan")
+    public Map<String, Object> paiPan(@RequestBody BaZiRequest request) {
+        Map<String, Object> result = new HashMap<>();
+        try {
+            BaZiJiChuSetting setting = new BaZiJiChuSetting();
+            setting.setName(request.getName() != null ? request.getName() : "某人");
+            setting.setOccupy(request.getOccupy() != null ? request.getOccupy() : "某事");
+            setting.setSex(request.getSex() != null ? request.getSex() : 1);
+            setting.setDate(request.getDate() != null ? request.getDate() : "2024-01-01 00:00:00");
+            setting.setDateType(request.getDateType() != null ? request.getDateType() : 0);
+            setting.setLeapMonthType(request.getLeapMonthType() != null ? request.getLeapMonthType() : 0);
+            setting.setXuShiSuiType(request.getXuShiSuiType() != null ? request.getXuShiSuiType() : 0);
+            setting.setJieQiType(request.getJieQiType() != null ? request.getJieQiType() : 1);
+            setting.setQiYunLiuPaiType(request.getQiYunLiuPaiType() != null ? request.getQiYunLiuPaiType() : 0);
+            setting.setRenYuanType(request.getRenYuanType() != null ? request.getRenYuanType() : 0);
+            setting.setDaYunLunShu(request.getDaYunLunShu() != null ? request.getDaYunLunShu() : 10);
+            setting.setYearGanZhiType(request.getYearGanZhiType() != null ? request.getYearGanZhiType() : 2);
+            setting.setMonthGanZhiType(request.getMonthGanZhiType() != null ? request.getMonthGanZhiType() : 1);
+            setting.setDayGanZhiType(request.getDayGanZhiType() != null ? request.getDayGanZhiType() : 0);
+
+            BaZi baZi = new BaZi(setting);
+            baZi.baZiShenShaSetting(new BaZiShenShaSetting());
+            baZi.baZiGanZhiLiuYiSetting(new BaZiGanZhiLiuYiSetting());
+
+            result.put("success", true);
+            result.put("data", buildBaZiData(baZi));
+        } catch (Exception e) {
+            result.put("success", false);
+            result.put("error", e.getMessage());
+        }
+        return result;
+    }
+
+    private Map<String, Object> buildBaZiData(BaZi baZi) {
+        Map<String, Object> data = new HashMap<>();
+        data.put("name", baZi.getName());
+        data.put("sex", baZi.getSex());
+        data.put("age", baZi.getAge());
+        data.put("solar", baZi.getSolarStr2());
+        data.put("lunar", baZi.getLunarStr2());
+        data.put("xingQi", baZi.getXingQi());
+        data.put("jiJie", baZi.getJiJie());
+        data.put("shengXiao", baZi.getShengXiao());
+        data.put("xingZuo", baZi.getXingZuo());
+        data.put("baZi", baZi.getBaZi());
+        data.put("baZiWuXing", baZi.getBaZiWuXing());
+        data.put("baZiNaYin", baZi.getBaZiNaYin());
+        data.put("baZiKongWang", baZi.getBaZiKongWang());
+        data.put("yearGanZhi", baZi.getYearGanZhi());
+        data.put("monthGanZhi", baZi.getMonthGanZhi());
+        data.put("dayGanZhi", baZi.getDayGanZhi());
+        data.put("hourGanZhi", baZi.getHourGanZhi());
+        data.put("taiYuanGanZhi", baZi.getTaiYuanGanZhi());
+        data.put("taiXiGanZhi", baZi.getTaiXiGanZhi());
+        data.put("mingGongGanZhi", baZi.getMingGongGanZhi());
+        data.put("shenGongGanZhi", baZi.getShenGongGanZhi());
+        data.put("wuXingWangShuai", baZi.getWuXingWangShuai());
+        data.put("wuXingQueShi", baZi.getWuXingQueShi());
+        data.put("xiYongShen", baZi.getXiYongShen());
+        data.put("tianGanLiuYi", baZi.getTianGanLiuYi());
+        data.put("diZhiLiuYi", baZi.getDiZhiLiuYi());
+        data.put("yearGanZhiShenSha", baZi.getYearGanZhiShenSha());
+        data.put("monthGanZhiShenSha", baZi.getMonthGanZhiShenSha());
+        data.put("dayGanZhiShenSha", baZi.getDayGanZhiShenSha());
+        data.put("hourGanZhiShenSha", baZi.getHourGanZhiShenSha());
+        return data;
+    }
+
+    public static class BaZiRequest {
+        private String name;
+        private String occupy;
+        private Integer sex;
+        private String date;
+        private Integer dateType;
+        private Integer leapMonthType;
+        private Integer xuShiSuiType;
+        private Integer jieQiType;
+        private Integer qiYunLiuPaiType;
+        private Integer renYuanType;
+        private Integer daYunLunShu;
+        private Integer yearGanZhiType;
+        private Integer monthGanZhiType;
+        private Integer dayGanZhiType;
+
+        public String getName() { return name; }
+        public void setName(String name) { this.name = name; }
+        public String getOccupy() { return occupy; }
+        public void setOccupy(String occupy) { this.occupy = occupy; }
+        public Integer getSex() { return sex; }
+        public void setSex(Integer sex) { this.sex = sex; }
+        public String getDate() { return date; }
+        public void setDate(String date) { this.date = date; }
+        public Integer getDateType() { return dateType; }
+        public void setDateType(Integer dateType) { this.dateType = dateType; }
+        public Integer getLeapMonthType() { return leapMonthType; }
+        public void setLeapMonthType(Integer leapMonthType) { this.leapMonthType = leapMonthType; }
+        public Integer getXuShiSuiType() { return xuShiSuiType; }
+        public void setXuShiSuiType(Integer xuShiSuiType) { this.xuShiSuiType = xuShiSuiType; }
+        public Integer getJieQiType() { return jieQiType; }
+        public void setJieQiType(Integer jieQiType) { this.jieQiType = jieQiType; }
+        public Integer getQiYunLiuPaiType() { return qiYunLiuPaiType; }
+        public void setQiYunLiuPaiType(Integer qiYunLiuPaiType) { this.qiYunLiuPaiType = qiYunLiuPaiType; }
+        public Integer getRenYuanType() { return renYuanType; }
+        public void setRenYuanType(Integer renYuanType) { this.renYuanType = renYuanType; }
+        public Integer getDaYunLunShu() { return daYunLunShu; }
+        public void setDaYunLunShu(Integer daYunLunShu) { this.daYunLunShu = daYunLunShu; }
+        public Integer getYearGanZhiType() { return yearGanZhiType; }
+        public void setYearGanZhiType(Integer yearGanZhiType) { this.yearGanZhiType = yearGanZhiType; }
+        public Integer getMonthGanZhiType() { return monthGanZhiType; }
+        public void setMonthGanZhiType(Integer monthGanZhiType) { this.monthGanZhiType = monthGanZhiType; }
+        public Integer getDayGanZhiType() { return dayGanZhiType; }
+        public void setDayGanZhiType(Integer dayGanZhiType) { this.dayGanZhiType = dayGanZhiType; }
+    }
+
+}
@@ -0,0 +1,2 @@
+server.port=8080
+spring.application.name=xuan-utils-pro
@@ -15,6 +15,13 @@
          <text class="section-title">出生信息</text>
        </view>
        
+        <view class="form-item">
+          <view class="form-label-wrapper">
+            <text class="form-label">姓名</text>
+          </view>
+          <input class="form-input" v-model="name" placeholder="请输入姓名" />
+        </view>
+        
        <view class="form-item">
          <view class="form-label-wrapper">
            <text class="form-label">公历日期</text>
@@ -52,6 +59,20 @@
            </view>
          </view>
        </view>
+        
+        <view class="form-item">
+          <view class="form-label-wrapper">
+            <text class="form-label">日期类型</text>
+          </view>
+          <view class="gender-group">
+            <view class="gender-item" :class="{ active: dateType === 0 }" @click="dateType = 0">
+              <text class="gender-text">公历</text>
+            </view>
+            <view class="gender-item" :class="{ active: dateType === 1 }" @click="dateType = 1">
+              <text class="gender-text">农历</text>
+            </view>
+          </view>
+        </view>
      </view>
    </view>
    
@@ -61,22 +82,25 @@
    </view>
    
    <view class="btn-wrapper">
-      <button class="submit-btn" @click="calculate">
-        <text class="btn-text">开始排盘</text>
+      <button class="submit-btn" @click="calculate" :disabled="loading">
+        <text class="btn-text">{{ loading ? '排盘中...' : '开始排盘' }}</text>
      </button>
    </view>
  </view>
 </template>

 <script>
-import BaZi from '@/utils/core/BaZi.js'
+import api from '@/utils/api.js'

 export default {
  data() {
    return {
+      name: '',
      solarDate: '2000-01-01',
      birthTime: '12:00',
-      gender: '男'
+      gender: '男',
+      dateType: 0,
+      loading: false
    }
  },
  methods: {
@@ -86,36 +110,43 @@ export default {
    onTimeChange(e) {
      this.birthTime = e.detail.value
    },
-    calculate() {
-      const dateParts = this.solarDate.split('-')
-      const timeParts = this.birthTime.split(':')
+    async calculate() {
+      if (this.loading) return
      
-      const setting = {
-        year: parseInt(dateParts[0]),
-        month: parseInt(dateParts[1]),
-        day: parseInt(dateParts[2]),
-        hour: parseInt(timeParts[0]),
-        minute: parseInt(timeParts[1]),
-        gender: this.gender,
-        isLunar: false
-      }
+      this.loading = true
+      
+      uni.showLoading({
+        title: '排盘中...',
+        mask: true
+      })
      
      try {
-        const bazi = new BaZi(setting)
-        const result = bazi.getResult()
+        const dateStr = this.solarDate + ' ' + this.birthTime + ':00'
+        
+        const result = await api.baziApi.paiPan({
+          name: this.name || '某人',
+          sex: this.gender === '男' ? 1 : 0,
+          date: dateStr,
+          dateType: this.dateType
+        })
        
        getApp().globalData.baziResult = result
        
+        uni.hideLoading()
+        
        uni.navigateTo({
          url: '/pages/bazi/result'
        })
      } catch (e) {
+        uni.hideLoading()
        console.error('排盘错误:', e)
        uni.showToast({
          title: '排盘失败：' + (e.message || '未知错误'),
          icon: 'none',
          duration: 3000
        })
+      } finally {
+        this.loading = false
      }
    }
  }
@@ -227,6 +258,13 @@ page {
  font-weight: 500;
 }

+.form-input {
+  flex: 1;
+  font-size: 28rpx;
+  color: #1F2937;
+  text-align: right;
+}
+
 .form-picker {
  flex: 1;
 }
@@ -318,6 +356,10 @@ page {
  box-shadow: 0 8rpx 24rpx rgba(220, 38, 38, 0.4);
 }

+.submit-btn[disabled] {
+  opacity: 0.6;
+}
+
 .btn-text {
  font-size: 32rpx;
  color: #ffffff;
@@ -6,7 +6,7 @@
          <text class="icon-text">命</text>
        </view>
        <view class="header-info">
-          <text class="header-title">八字命盘</text>
+          <text class="header-title">{{ result.name || '八字命盘' }}</text>
          <text class="header-subtitle">{{ result.shengXiao }} · {{ result.xingZuo }}</text>
        </view>
      </view>
@@ -16,12 +16,12 @@
      <view class="info-row">
        <view class="info-item">
          <text class="info-label">公历</text>
-          <text class="info-value">{{ result.solarDate && result.solarDate.string || '-' }}</text>
+          <text class="info-value">{{ result.solar || '-' }}</text>
        </view>
        <view class="info-divider"></view>
        <view class="info-item">
          <text class="info-label">农历</text>
-          <text class="info-value">{{ result.lunarDate && result.lunarDate.string || '-' }}</text>
+          <text class="info-value">{{ result.lunar || '-' }}</text>
        </view>
      </view>
    </view>
@@ -42,31 +42,56 @@
        </view>
        <view class="bazi-row">
          <view class="bazi-cell label-cell">天干</view>
-          <view class="bazi-cell gan-cell">{{ result.bazi && result.bazi.year && result.bazi.year.gan }}</view>
-          <view class="bazi-cell gan-cell">{{ result.bazi && result.bazi.month && result.bazi.month.gan }}</view>
-          <view class="bazi-cell gan-cell primary">{{ result.bazi && result.bazi.day && result.bazi.day.gan }}</view>
-          <view class="bazi-cell gan-cell">{{ result.bazi && result.bazi.time && result.bazi.time.gan }}</view>
+          <view class="bazi-cell gan-cell">{{ getGan(0) }}</view>
+          <view class="bazi-cell gan-cell">{{ getGan(1) }}</view>
+          <view class="bazi-cell gan-cell primary">{{ getGan(2) }}</view>
+          <view class="bazi-cell gan-cell">{{ getGan(3) }}</view>
        </view>
        <view class="bazi-row">
          <view class="bazi-cell label-cell">地支</view>
-          <view class="bazi-cell zhi-cell">{{ result.bazi && result.bazi.year && result.bazi.year.zhi }}</view>
-          <view class="bazi-cell zhi-cell">{{ result.bazi && result.bazi.month && result.bazi.month.zhi }}</view>
-          <view class="bazi-cell zhi-cell">{{ result.bazi && result.bazi.day && result.bazi.day.zhi }}</view>
-          <view class="bazi-cell zhi-cell">{{ result.bazi && result.bazi.time && result.bazi.time.zhi }}</view>
-        </view>
-        <view class="bazi-row">
-          <view class="bazi-cell label-cell">十神</view>
-          <view class="bazi-cell small-cell">{{ result.bazi && result.bazi.year && result.bazi.year.shiShen }}</view>
-          <view class="bazi-cell small-cell">{{ result.bazi && result.bazi.month && result.bazi.month.shiShen }}</view>
-          <view class="bazi-cell small-cell primary">日主</view>
-          <view class="bazi-cell small-cell">{{ result.bazi && result.bazi.time && result.bazi.time.shiShen }}</view>
+          <view class="bazi-cell zhi-cell">{{ getZhi(0) }}</view>
+          <view class="bazi-cell zhi-cell">{{ getZhi(1) }}</view>
+          <view class="bazi-cell zhi-cell">{{ getZhi(2) }}</view>
+          <view class="bazi-cell zhi-cell">{{ getZhi(3) }}</view>
        </view>
        <view class="bazi-row">
          <view class="bazi-cell label-cell">纳音</view>
-          <view class="bazi-cell small-cell">{{ result.naYin && result.naYin.year }}</view>
-          <view class="bazi-cell small-cell">{{ result.naYin && result.naYin.month }}</view>
-          <view class="bazi-cell small-cell">{{ result.naYin && result.naYin.day }}</view>
-          <view class="bazi-cell small-cell">{{ result.naYin && result.naYin.time }}</view>
+          <view class="bazi-cell small-cell">{{ getNaYin(0) }}</view>
+          <view class="bazi-cell small-cell">{{ getNaYin(1) }}</view>
+          <view class="bazi-cell small-cell">{{ getNaYin(2) }}</view>
+          <view class="bazi-cell small-cell">{{ getNaYin(3) }}</view>
+        </view>
+        <view class="bazi-row">
+          <view class="bazi-cell label-cell">空亡</view>
+          <view class="bazi-cell small-cell">{{ getKongWang(0) }}</view>
+          <view class="bazi-cell small-cell">{{ getKongWang(1) }}</view>
+          <view class="bazi-cell small-cell">{{ getKongWang(2) }}</view>
+          <view class="bazi-cell small-cell">{{ getKongWang(3) }}</view>
+        </view>
+      </view>
+    </view>
+    
+    <view class="extra-card">
+      <view class="card-header">
+        <view class="card-dot cyan"></view>
+        <text class="card-title">命宫信息</text>
+      </view>
+      <view class="extra-grid">
+        <view class="extra-item">
+          <text class="extra-label">胎元</text>
+          <text class="extra-value">{{ result.taiYuanGanZhi || '-' }}</text>
+        </view>
+        <view class="extra-item">
+          <text class="extra-label">胎息</text>
+          <text class="extra-value">{{ result.taiXiGanZhi || '-' }}</text>
+        </view>
+        <view class="extra-item">
+          <text class="extra-label">命宫</text>
+          <text class="extra-value">{{ result.mingGongGanZhi || '-' }}</text>
+        </view>
+        <view class="extra-item">
+          <text class="extra-label">身宫</text>
+          <text class="extra-value">{{ result.shenGongGanZhi || '-' }}</text>
        </view>
      </view>
    </view>
@@ -74,14 +99,36 @@
    <view class="wuxing-card">
      <view class="card-header">
        <view class="card-dot gold"></view>
-        <text class="card-title">五行统计</text>
+        <text class="card-title">五行分析</text>
      </view>
-      <view class="wuxing-grid">
-        <view class="wuxing-item" v-for="(count, wx) in wuXingCount" :key="wx">
-          <view class="wuxing-circle" :class="'wx-' + getWuXingClass(wx)">
-            <text class="wuxing-name">{{ wx }}</text>
-          </view>
-          <text class="wuxing-count">{{ count }}</text>
+      <view class="wuxing-info">
+        <view class="wuxing-row">
+          <text class="wuxing-label">五行旺衰：</text>
+          <text class="wuxing-value">{{ result.wuXingWangShuai ? result.wuXingWangShuai.join('、') : '-' }}</text>
+        </view>
+        <view class="wuxing-row" v-if="result.wuXingQueShi && result.wuXingQueShi.length > 0">
+          <text class="wuxing-label">五行缺失：</text>
+          <text class="wuxing-value missing">{{ result.wuXingQueShi.join('、') }}</text>
+        </view>
+      </view>
+    </view>
+    
+    <view class="liuyi-card">
+      <view class="card-header">
+        <view class="card-dot orange"></view>
+        <text class="card-title">干支留意</text>
+      </view>
+      <view class="liuyi-info">
+        <view class="liuyi-row" v-if="result.tianGanLiuYi && result.tianGanLiuYi.length > 0">
+          <text class="liuyi-label">天干留意：</text>
+          <text class="liuyi-value">{{ result.tianGanLiuYi.join('、') }}</text>
+        </view>
+        <view class="liuyi-row" v-if="result.diZhiLiuYi && result.diZhiLiuYi.length > 0">
+          <text class="liuyi-label">地支留意：</text>
+          <text class="liuyi-value">{{ result.diZhiLiuYi.join('、') }}</text>
+        </view>
+        <view class="liuyi-row" v-if="(!result.tianGanLiuYi || result.tianGanLiuYi.length === 0) && (!result.diZhiLiuYi || result.diZhiLiuYi.length === 0)">
+          <text class="liuyi-value empty">暂无特殊留意</text>
        </view>
      </view>
    </view>
@@ -91,30 +138,17 @@
        <view class="card-dot purple"></view>
        <text class="card-title">神煞</text>
      </view>
-      <view class="shensha-list" v-if="shenShaList.length > 0">
-        <view class="shensha-tag" v-for="(ss, index) in shenShaList" :key="index">
-          <text class="shensha-text">{{ ss }}</text>
-        </view>
-      </view>
-      <view class="empty-text" v-else>
-        <text>暂无神煞</text>
-      </view>
-    </view>
-    
-    <view class="dayun-card">
-      <view class="card-header">
-        <view class="card-dot blue"></view>
-        <text class="card-title">大运</text>
-        <text class="dayun-info">起运年龄: {{ result.yun && result.yun.qiYunAge || 0 }}岁</text>
-      </view>
-      <scroll-view scroll-x class="dayun-scroll">
-        <view class="dayun-list">
-          <view class="dayun-item" v-for="(dy, index) in daYunList" :key="index">
-            <text class="dayun-gz">{{ dy.ganZhi }}</text>
-            <text class="dayun-age">{{ dy.ageRange }}</text>
+      <view class="shensha-section" v-for="(shenSha, column) in shenShaData" :key="column">
+        <text class="shensha-column-title">{{ column }}</text>
+        <view class="shensha-list" v-if="shenSha && shenSha.length > 0">
+          <view class="shensha-tag" v-for="(ss, index) in shenSha" :key="index">
+            <text class="shensha-text">{{ ss }}</text>
          </view>
        </view>
-      </scroll-view>
+        <view class="empty-text" v-else>
+          <text>暂无神煞</text>
+        </view>
+      </view>
    </view>
  </view>
 </template>
@@ -127,14 +161,13 @@ export default {
    }
  },
  computed: {
-    wuXingCount() {
-      return this.result.wuXing && this.result.wuXing.count || {}
-    },
-    shenShaList() {
-      return this.result.shenSha || []
-    },
-    daYunList() {
-      return this.result.yun && this.result.yun.daYun || []
+    shenShaData() {
+      return {
+        '年柱': this.result.yearGanZhiShenSha || [],
+        '月柱': this.result.monthGanZhiShenSha || [],
+        '日柱': this.result.dayGanZhiShenSha || [],
+        '时柱': this.result.hourGanZhiShenSha || []
+      }
    }
  },
  onLoad() {
@@ -149,15 +182,29 @@ export default {
    }
  },
  methods: {
-    getWuXingClass(wx) {
-      const map = {
-        '金': 'jin',
-        '木': 'mu',
-        '水': 'shui',
-        '火': 'huo',
-        '土': 'tu'
+    getGan(index) {
+      if (this.result.baZi && this.result.baZi[index]) {
+        return this.result.baZi[index].charAt(0)
      }
-      return map[wx] || ''
+      return '-'
+    },
+    getZhi(index) {
+      if (this.result.baZi && this.result.baZi[index]) {
+        return this.result.baZi[index].charAt(1)
+      }
+      return '-'
+    },
+    getNaYin(index) {
+      if (this.result.baZiNaYin && this.result.baZiNaYin[index]) {
+        return this.result.baZiNaYin[index]
+      }
+      return '-'
+    },
+    getKongWang(index) {
+      if (this.result.baZiKongWang && this.result.baZiKongWang[index]) {
+        return this.result.baZiKongWang[index]
+      }
+      return '-'
    }
  }
 }
@@ -247,7 +294,7 @@ page {
 }

 .info-value {
-  font-size: 26rpx;
+  font-size: 24rpx;
  color: #1F2937;
  font-weight: 500;
 }
@@ -258,7 +305,7 @@ page {
  background: #F3F4F6;
 }

-.bazi-card, .wuxing-card, .shensha-card, .dayun-card {
+.bazi-card, .wuxing-card, .shensha-card, .extra-card, .liuyi-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 24rpx;
  padding: 24rpx;
@@ -283,6 +330,8 @@ page {
 .card-dot.gold { background: #F59E0B; }
 .card-dot.purple { background: #8B5CF6; }
 .card-dot.blue { background: #3B82F6; }
+.card-dot.cyan { background: #06B6D4; }
+.card-dot.orange { background: #F97316; }

 .card-title {
  font-size: 28rpx;
@@ -291,11 +340,6 @@ page {
  flex: 1;
 }

-.dayun-info {
-  font-size: 22rpx;
-  color: #6B7280;
-}
-
 .bazi-table {
  border-radius: 16rpx;
  overflow: hidden;
@@ -360,104 +404,104 @@ page {
  color: #6B7280;
 }

-.wuxing-grid {
+.extra-grid {
  display: flex;
-  justify-content: space-around;
-  padding: 16rpx 0;
+  flex-wrap: wrap;
 }

-.wuxing-item {
+.extra-item {
+  width: 50%;
  display: flex;
  flex-direction: column;
-  align-items: center;
+  padding: 16rpx;
+  box-sizing: border-box;
 }

-.wuxing-circle {
-  width: 72rpx;
-  height: 72rpx;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 12rpx;
+.extra-label {
+  font-size: 24rpx;
+  color: #9CA3AF;
+  margin-bottom: 8rpx;
 }

-.wuxing-circle.wx-jin { background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%); }
-.wuxing-circle.wx-mu { background: linear-gradient(135deg, #34D399 0%, #10B981 100%); }
-.wuxing-circle.wx-shui { background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%); }
-.wuxing-circle.wx-huo { background: linear-gradient(135deg, #F87171 0%, #EF4444 100%); }
-.wuxing-circle.wx-tu { background: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 100%); }
-
-.wuxing-name {
+.extra-value {
  font-size: 28rpx;
-  color: #ffffff;
-  font-weight: 700;
+  color: #1F2937;
+  font-weight: 600;
 }

-.wuxing-count {
+.wuxing-info, .liuyi-info {
+  padding: 8rpx 0;
+}
+
+.wuxing-row, .liuyi-row {
+  display: flex;
+  align-items: flex-start;
+  padding: 12rpx 0;
+}
+
+.wuxing-label, .liuyi-label {
+  font-size: 26rpx;
+  color: #6B7280;
+  width: 160rpx;
+  flex-shrink: 0;
+}
+
+.wuxing-value, .liuyi-value {
+  font-size: 26rpx;
+  color: #1F2937;
+  flex: 1;
+}
+
+.wuxing-value.missing {
+  color: #DC2626;
+  font-weight: 600;
+}
+
+.liuyi-value.empty {
+  color: #9CA3AF;
+}
+
+.shensha-section {
+  margin-bottom: 20rpx;
+}
+
+.shensha-section:last-child {
+  margin-bottom: 0;
+}
+
+.shensha-column-title {
  font-size: 24rpx;
  color: #6B7280;
-  font-weight: 600;
+  margin-bottom: 12rpx;
+  display: block;
 }

 .shensha-list {
  display: flex;
  flex-wrap: wrap;
-  gap: 16rpx;
+  gap: 12rpx;
 }

 .shensha-tag {
  background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%);
-  padding: 12rpx 24rpx;
-  border-radius: 20rpx;
+  padding: 10rpx 20rpx;
+  border-radius: 16rpx;
  border: 2rpx solid #C4B5FD;
 }

 .shensha-text {
-  font-size: 24rpx;
+  font-size: 22rpx;
  color: #6D28D9;
  font-weight: 500;
 }

 .empty-text {
  text-align: center;
-  padding: 24rpx;
+  padding: 16rpx;
 }

 .empty-text text {
  font-size: 24rpx;
  color: #9CA3AF;
 }
-
-.dayun-scroll {
-  white-space: nowrap;
-}
-
-.dayun-list {
-  display: inline-flex;
-  gap: 16rpx;
-  padding: 8rpx 0;
-}
-
-.dayun-item {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  background: #FDF2F8;
-  padding: 16rpx 24rpx;
-  border-radius: 16rpx;
-  min-width: 80rpx;
-}
-
-.dayun-gz {
-  font-size: 28rpx;
-  font-weight: 700;
-  color: #1F2937;
-  margin-bottom: 4rpx;
-}
-
-.dayun-age {
-  font-size: 20rpx;
-  color: #9CA3AF;
-}
 </style>
@@ -0,0 +1,59 @@
+const BASE_URL = 'http://localhost:8080/api'
+
+const request = (options) => {
+  return new Promise((resolve, reject) => {
+    uni.request({
+      url: BASE_URL + options.url,
+      method: options.method || 'GET',
+      data: options.data || {},
+      header: {
+        'Content-Type': 'application/json',
+        ...options.header
+      },
+      timeout: 30000,
+      success: (res) => {
+        if (res.statusCode === 200) {
+          if (res.data.success) {
+            resolve(res.data.data)
+          } else {
+            reject(new Error(res.data.error || '请求失败'))
+          }
+        } else {
+          reject(new Error('网络请求失败: ' + res.statusCode))
+        }
+      },
+      fail: (err) => {
+        reject(new Error(err.errMsg || '网络连接失败'))
+      }
+    })
+  })
+}
+
+const baziApi = {
+  paiPan: (data) => {
+    return request({
+      url: '/bazi/paipan',
+      method: 'POST',
+      data: {
+        name: data.name || '某人',
+        sex: data.sex || 1,
+        date: data.date,
+        dateType: data.dateType || 0,
+        leapMonthType: data.leapMonthType || 0,
+        xuShiSuiType: data.xuShiSuiType || 0,
+        jieQiType: data.jieQiType || 1,
+        qiYunLiuPaiType: data.qiYunLiuPaiType || 0,
+        renYuanType: data.renYuanType || 0,
+        daYunLunShu: data.daYunLunShu || 10,
+        yearGanZhiType: data.yearGanZhiType || 2,
+        monthGanZhiType: data.monthGanZhiType || 1,
+        dayGanZhiType: data.dayGanZhiType || 0
+      }
+    })
+  }
+}
+
+export default {
+  baziApi,
+  request
+}