feat: 完整重构易经占卜系统 - 专业化升级和界面修复

🎯 主要更新:
- 重构易经分析器:增加多种起卦方法、高级分析、象数理论
- 创建专业前端组件:CompleteYijingAnalysis,参考八字分析样式
- 修复表单验证逻辑:易经占卜只需问题,无需个人信息
- 优化后端API接口:适配新的参数格式和验证逻辑

🚀 功能增强:
- 多种起卦方法:时间、梅花易数、金钱卦、数字起卦
- 高级分析:互卦、错卦、综卦四卦综合分析
- 象数理论:八卦数理、时间共振、五行分析
- 动态分析:问题类型识别、时间因素、针对性指导
- 专业展示:卦象符号、爻辞象传、哲学洞察

🔧 技术优化:
- 前端表单条件渲染:根据分析类型显示不同表单
- 后端参数验证:易经占卜验证问题而非姓名
- API接口统一:标准化数据传递格式
- 数据库适配:易经记录使用合理默认值

 问题修复:
- 解决'缺少姓名'错误
- 修复按钮无法点击问题
- 优化用户体验和界面响应
This commit is contained in:
patdelphi
2025-08-19 09:05:25 +08:00
parent 07de78c4a8
commit af0d6cd019
8 changed files with 1690 additions and 142 deletions

Binary file not shown.

Binary file not shown.

View File

@@ -78,21 +78,19 @@ router.post('/bazi', authenticate, asyncHandler(async (req, res) => {
// 易经分析接口
router.post('/yijing', authenticate, asyncHandler(async (req, res) => {
const { birth_data, question } = req.body;
const { question, user_id, divination_method } = req.body;
// 输入验证
if (!birth_data || !birth_data.name) {
throw new AppError('缺少必要参数:姓名', 400, 'MISSING_BIRTH_DATA');
if (!question) {
throw new AppError('缺少必要参数:占卜问题', 400, 'MISSING_QUESTION');
}
const finalQuestion = question || '人生运势综合占卜';
try {
// 执行易经分析
const analysisResult = yijingAnalyzer.performYijingAnalysis({
question: finalQuestion,
user_id: req.user.id,
birth_data: birth_data
question: question,
user_id: user_id || req.user.id,
divination_method: divination_method || 'time'
});
// 保存到数据库
@@ -107,12 +105,12 @@ router.post('/yijing', authenticate, asyncHandler(async (req, res) => {
const result = insertReading.run(
req.user.id,
'yijing',
birth_data.name,
birth_data.birth_date || null,
birth_data.birth_time || null,
birth_data.birth_place || null,
birth_data.gender || null,
JSON.stringify({ question: finalQuestion, birth_data }),
'易经占卜用户', // 易经占卜不需要真实姓名
null, // 不需要出生日期
null, // 不需要出生时间
null, // 不需要出生地点
null, // 不需要性别
JSON.stringify({ question, divination_method }),
JSON.stringify(analysisResult),
'completed'
);

View File

@@ -1,20 +1,60 @@
// 易经分析服务模块
// 完全基于logic/yijing.txt的原始逻辑实现
// 专业易经分析服务模块
// 基于传统易学理论的完整实现
class YijingAnalyzer {
constructor() {
this.initializeHexagrams();
this.initializeTrigramData();
this.initializeNumerology();
}
// 易经分析主函数
// 初始化八卦基础数据
initializeTrigramData() {
this.TRIGRAMS = {
'乾': { binary: '111', nature: '天', attribute: '刚健', direction: '西北', season: '秋冬之交', family: '父', body: '头', animal: '马', element: '金' },
'坤': { binary: '000', nature: '地', attribute: '柔顺', direction: '西南', season: '夏秋之交', family: '母', body: '腹', animal: '牛', element: '土' },
'震': { binary: '001', nature: '雷', attribute: '动', direction: '东', season: '春', family: '长男', body: '足', animal: '龙', element: '木' },
'巽': { binary: '011', nature: '风', attribute: '入', direction: '东南', season: '春夏之交', family: '长女', body: '股', animal: '鸡', element: '木' },
'坎': { binary: '010', nature: '水', attribute: '陷', direction: '北', season: '冬', family: '中男', body: '耳', animal: '豕', element: '水' },
'离': { binary: '101', nature: '火', attribute: '丽', direction: '南', season: '夏', family: '中女', body: '目', animal: '雉', element: '火' },
'艮': { binary: '100', nature: '山', attribute: '止', direction: '东北', season: '冬春之交', family: '少男', body: '手', animal: '狗', element: '土' },
'兑': { binary: '110', nature: '泽', attribute: '悦', direction: '西', season: '秋', family: '少女', body: '口', animal: '羊', element: '金' }
};
}
// 初始化象数理论
initializeNumerology() {
this.NUMBERS = {
1: { trigram: '乾', meaning: '天,创始,领导' },
2: { trigram: '兑', meaning: '泽,喜悦,交流' },
3: { trigram: '离', meaning: '火,光明,智慧' },
4: { trigram: '震', meaning: '雷,震动,行动' },
5: { trigram: '巽', meaning: '风,渗透,顺从' },
6: { trigram: '坎', meaning: '水,险难,智慧' },
7: { trigram: '艮', meaning: '山,静止,稳定' },
8: { trigram: '坤', meaning: '地,承载,包容' }
};
}
// 专业易经分析主函数
performYijingAnalysis(inputData) {
try {
const { question, user_id, birth_data } = inputData;
const { question, user_id, birth_data, divination_method = 'time' } = inputData;
const currentTime = new Date();
const hexagramData = this.generateHexagram(currentTime, user_id);
// 根据不同方法起卦
const hexagramData = this.generateHexagramByMethod(divination_method, currentTime, user_id, question);
const mainHexagramInfo = this.getHexagramInfo(hexagramData.mainHex);
const changingHexagramInfo = this.getChangingHexagram(mainHexagramInfo, hexagramData.changingLines);
const changingLineAnalysis = this.analyzeChangingLines(mainHexagramInfo, hexagramData.changingLines);
// 高级分析:互卦、错卦、综卦
const advancedAnalysis = this.performAdvancedAnalysis(mainHexagramInfo, changingHexagramInfo);
// 动态分析:基于问题类型和时间因素
const dynamicAnalysis = this.generateDynamicAnalysis(mainHexagramInfo, changingHexagramInfo, question, currentTime);
// 象数分析
const numerologyAnalysis = this.performNumerologyAnalysis(hexagramData, currentTime);
return {
analysis_type: 'yijing',
@@ -23,44 +63,40 @@ class YijingAnalyzer {
divination_data: {
question: question,
divination_time: currentTime.toISOString(),
method: '梅花易数时间起卦法'
method: this.getMethodName(divination_method),
lunar_info: this.calculateLunarInfo(currentTime)
},
hexagram_info: {
main_hexagram: mainHexagramInfo.name,
main_hexagram_symbol: mainHexagramInfo.symbol,
main_hexagram_number: mainHexagramInfo.number,
upper_trigram: mainHexagramInfo.upperTrigram,
lower_trigram: mainHexagramInfo.lowerTrigram,
changing_hexagram: changingHexagramInfo ? changingHexagramInfo.name : '无',
changing_hexagram_symbol: changingHexagramInfo ? changingHexagramInfo.symbol : '无',
changing_lines: hexagramData.changingLines,
detailed_interpretation: `您得到的本卦是【${mainHexagramInfo.name}】,${mainHexagramInfo.judgment}`
hexagram_structure: this.analyzeHexagramStructure(mainHexagramInfo)
}
},
detailed_analysis: {
hexagram_analysis: {
primary_meaning: `${mainHexagramInfo.name}卦】 - ${mainHexagramInfo.meaning}`,
primary_meaning: `${mainHexagramInfo.name}卦】${mainHexagramInfo.number} - ${mainHexagramInfo.meaning}`,
judgment: `【彖传】曰:${mainHexagramInfo.judgment}`,
image: `【象传】曰:${mainHexagramInfo.image}`
image: `【象传】曰:${mainHexagramInfo.image}`,
trigram_analysis: this.analyzeTrigramCombination(mainHexagramInfo.upperTrigram, mainHexagramInfo.lowerTrigram),
five_elements: this.analyzeFiveElements(mainHexagramInfo)
},
changing_lines_analysis: changingLineAnalysis,
changing_hexagram_analysis: changingHexagramInfo ? {
name: `变卦为【${changingHexagramInfo.name}`,
meaning: changingHexagramInfo.meaning,
transformation_insight: `从【${mainHexagramInfo.name}】到【${changingHexagramInfo.name}】的变化,预示着:${changingHexagramInfo.transformation || '事态将发生转变'}`
} : {
name: '无变卦',
meaning: '事态稳定,应以本卦为主要参考。',
transformation_insight: '没有动爻,表示当前状况将持续一段时间,应专注于当下。'
}
},
life_guidance: {
overall_fortune: this.generateOverallFortune(mainHexagramInfo, changingHexagramInfo, question),
career_guidance: this.generateCareerAdvice(mainHexagramInfo, changingHexagramInfo),
relationship_guidance: this.generateRelationshipAdvice(mainHexagramInfo, changingHexagramInfo)
changing_lines_analysis: this.analyzeChangingLines(mainHexagramInfo, hexagramData.changingLines),
changing_hexagram_analysis: this.analyzeChangingHexagram(mainHexagramInfo, changingHexagramInfo),
advanced_analysis: advancedAnalysis,
numerology_analysis: numerologyAnalysis
},
dynamic_guidance: dynamicAnalysis,
divination_wisdom: {
key_message: mainHexagramInfo.keyMessage || '保持平常心,顺势而为',
action_advice: mainHexagramInfo.actionAdvice || '谨慎行事,稳步前进',
warning: mainHexagramInfo.warning || '无特别警示',
philosophical_insight: `《易经》${mainHexagramInfo.name}卦的核心智慧在于:${mainHexagramInfo.philosophy || '顺应自然,把握时机'}`
key_message: this.generateKeyMessage(mainHexagramInfo, changingHexagramInfo, question),
action_advice: this.generateActionAdvice(mainHexagramInfo, changingHexagramInfo, currentTime),
timing_guidance: this.generateTimingGuidance(mainHexagramInfo, currentTime),
philosophical_insight: this.generatePhilosophicalInsight(mainHexagramInfo, changingHexagramInfo)
}
};
} catch (error) {
@@ -69,8 +105,24 @@ class YijingAnalyzer {
}
}
// 生成卦象
generateHexagram(currentTime, userId) {
// 根据不同方法生成卦象
generateHexagramByMethod(method, currentTime, userId, question) {
switch (method) {
case 'time':
return this.generateHexagramByTime(currentTime, userId);
case 'plum_blossom':
return this.generateHexagramByPlumBlossom(currentTime, question);
case 'coin':
return this.generateHexagramByCoin();
case 'number':
return this.generateHexagramByNumber(currentTime, userId);
default:
return this.generateHexagramByTime(currentTime, userId);
}
}
// 梅花易数时间起卦法
generateHexagramByTime(currentTime, userId) {
const year = currentTime.getFullYear();
const month = currentTime.getMonth() + 1;
const day = currentTime.getDate();
@@ -87,10 +139,99 @@ class YijingAnalyzer {
return {
mainHex: mainHexNumber,
changingLines: [changingLinePos]
changingLines: [changingLinePos],
method: '梅花易数时间起卦法',
upperTrigram: upperTrigramNum,
lowerTrigram: lowerTrigramNum
};
}
// 梅花易数外应起卦法
generateHexagramByPlumBlossom(currentTime, question) {
const questionLength = question ? question.length : 8;
const timeSum = currentTime.getHours() + currentTime.getMinutes();
const upperTrigramNum = (questionLength + timeSum) % 8 || 8;
const lowerTrigramNum = (questionLength * 2 + timeSum) % 8 || 8;
const changingLinePos = (questionLength + timeSum) % 6 + 1;
const mainHexNumber = this.getHexagramNumber(upperTrigramNum, lowerTrigramNum);
return {
mainHex: mainHexNumber,
changingLines: [changingLinePos],
method: '梅花易数外应起卦法',
upperTrigram: upperTrigramNum,
lowerTrigram: lowerTrigramNum
};
}
// 金钱卦起卦法(模拟)
generateHexagramByCoin() {
const lines = [];
const changingLines = [];
for (let i = 0; i < 6; i++) {
// 模拟投掷三枚硬币
const coin1 = Math.random() > 0.5 ? 3 : 2; // 正面3反面2
const coin2 = Math.random() > 0.5 ? 3 : 2;
const coin3 = Math.random() > 0.5 ? 3 : 2;
const sum = coin1 + coin2 + coin3;
if (sum === 6) { // 老阴,变阳
lines.push(0);
changingLines.push(i + 1);
} else if (sum === 7) { // 少阳
lines.push(1);
} else if (sum === 8) { // 少阴
lines.push(0);
} else if (sum === 9) { // 老阳,变阴
lines.push(1);
changingLines.push(i + 1);
}
}
const binary = lines.join('');
const mainHexNumber = this.getHexagramByBinary(binary);
return {
mainHex: mainHexNumber,
changingLines: changingLines,
method: '金钱卦起卦法',
binary: binary
};
}
// 数字起卦法
generateHexagramByNumber(currentTime, userId) {
const timeNum = currentTime.getTime();
const userNum = userId ? parseInt(String(userId).slice(-3)) || 123 : 123;
const upperTrigramNum = (Math.floor(timeNum / 1000) + userNum) % 8 || 8;
const lowerTrigramNum = (Math.floor(timeNum / 100) + userNum * 2) % 8 || 8;
const changingLinePos = (timeNum + userNum) % 6 + 1;
const mainHexNumber = this.getHexagramNumber(upperTrigramNum, lowerTrigramNum);
return {
mainHex: mainHexNumber,
changingLines: [changingLinePos],
method: '数字起卦法',
upperTrigram: upperTrigramNum,
lowerTrigram: lowerTrigramNum
};
}
// 根据二进制获取卦象
getHexagramByBinary(binary) {
for (const hexNum in this.ALL_HEXAGRAMS) {
if (this.ALL_HEXAGRAMS[hexNum].binary === binary) {
return parseInt(hexNum);
}
}
return 1;
}
// 获取卦象编号
getHexagramNumber(upper, lower) {
const trigramMap = {
@@ -115,39 +256,86 @@ class YijingAnalyzer {
return this.ALL_HEXAGRAMS[hexNumber] || this.ALL_HEXAGRAMS[1];
}
// 分析动爻
// 专业动爻分析
analyzeChangingLines(hexagramInfo, changingLines) {
if (!changingLines || changingLines.length === 0) {
return {
method: '以本卦卦辞为断',
analysis: `无动爻,应以【${hexagramInfo.name}】的整体卦辞为主要判断依据。`,
guidance: hexagramInfo.judgment
guidance: hexagramInfo.judgment,
interpretation: '静卦主静,事态稳定,当前状况将持续一段时间。应专注于当下,不宜有大的变动。'
};
}
const linePos = changingLines[0];
const lineIndex = linePos - 1;
const lineData = hexagramInfo.lines[lineIndex];
const analyses = [];
if (!lineData) {
return {
method: '动爻分析异常',
analysis: '无法找到对应的爻辞信息。',
guidance: ''
};
}
const lineName = ['初', '二', '三', '四', '五', '上'][lineIndex] + (lineData.type === 'yang' ? '九' : '六');
changingLines.forEach(linePos => {
const lineIndex = linePos - 1;
const lineData = hexagramInfo.lines[lineIndex];
if (lineData) {
const lineName = ['初', '二', '三', '四', '五', '上'][lineIndex] + (lineData.type === 'yang' ? '九' : '六');
const linePosition = this.getLinePosition(lineIndex);
analyses.push({
line_position: `${lineName}(第${linePos}爻)`,
line_nature: lineData.type === 'yang' ? '阳爻' : '阴爻',
position_meaning: linePosition.meaning,
line_text: `【爻辞】曰:${lineData.text}`,
line_image: `【象传】曰:${lineData.image}`,
practical_guidance: this.generateLineGuidance(lineData, lineIndex, hexagramInfo)
});
}
});
return {
method: '以动爻爻辞为断',
changing_line_position: `${lineName}(第${linePos}爻)`,
line_meaning: `【爻辞】曰:${lineData.text}`,
line_image_meaning: `【象传】对该爻的解释:${lineData.image}`,
guidance: `当前阶段的关键点在于理解和应对"${lineData.text}"所揭示的情况。`
method: changingLines.length === 1 ? '以动爻爻辞为断' : '以多爻变化综合判断',
changing_lines_count: changingLines.length,
detailed_analysis: analyses,
overall_guidance: this.generateChangingLinesGuidance(analyses, changingLines.length)
};
}
// 获取爻位含义
getLinePosition(lineIndex) {
const positions = [
{ name: '初爻', meaning: '事物的开始阶段,基础地位,需要谨慎起步' },
{ name: '二爻', meaning: '臣位,中正之位,适合辅助和配合' },
{ name: '三爻', meaning: '人位,多忧之位,需要特别小心' },
{ name: '四爻', meaning: '近君之位,接近成功,但需谨慎' },
{ name: '五爻', meaning: '君位,最尊贵的位置,主导地位' },
{ name: '上爻', meaning: '事物的终结阶段,物极必反' }
];
return positions[lineIndex] || { name: '未知', meaning: '位置不明' };
}
// 生成爻辞指导
generateLineGuidance(lineData, lineIndex, hexagramInfo) {
const position = this.getLinePosition(lineIndex);
const baseGuidance = `${position.name}的位置上,${lineData.text}的含义是:`;
// 根据爻的阴阳和位置生成具体指导
if (lineData.type === 'yang' && lineIndex % 2 === 0) {
return baseGuidance + '阳爻居阳位,得正,行动力强,但需要把握分寸。';
} else if (lineData.type === 'yin' && lineIndex % 2 === 1) {
return baseGuidance + '阴爻居阴位,得正,柔顺有利,适合守静待时。';
} else {
return baseGuidance + '爻位不正,需要调整策略,避免过于激进或消极。';
}
}
// 生成动爻综合指导
generateChangingLinesGuidance(analyses, count) {
if (count === 1) {
return '单爻发动,变化明确,应重点关注该爻的指示。';
} else if (count === 2) {
return '两爻发动,变化复杂,需要综合考虑两个方面的因素。';
} else if (count >= 3) {
return '多爻发动,变化剧烈,事态复杂多变,需要格外谨慎。';
}
return '变化情况需要仔细分析。';
}
// 获取变卦
getChangingHexagram(originalHexInfo, changingLines) {
if (!changingLines || changingLines.length === 0) {
@@ -172,17 +360,537 @@ class YijingAnalyzer {
return null;
}
// 生成整体运势分析
generateOverallFortune(mainHex, changeHex, question) {
let fortune = `针对您的问题"${question}",本卦为【${mainHex.name}】,指示了当前的基本状况:${mainHex.guidance}`;
// 高级分析:互卦、错卦、综卦
performAdvancedAnalysis(mainHex, changeHex) {
const interHex = this.getInterHexagram(mainHex);
const oppositeHex = this.getOppositeHexagram(mainHex);
const reverseHex = this.getReverseHexagram(mainHex);
if (changeHex) {
fortune += ` 动爻预示着变化,未来趋势可参考变卦【${changeHex.name}】:${changeHex.guidance}`;
return {
inter_hexagram: {
name: interHex.name,
symbol: interHex.symbol,
meaning: interHex.meaning,
analysis: `互卦【${interHex.name}】揭示了事物的内在发展趋势和隐藏因素。${interHex.guidance}`
},
opposite_hexagram: {
name: oppositeHex.name,
symbol: oppositeHex.symbol,
meaning: oppositeHex.meaning,
analysis: `错卦【${oppositeHex.name}】代表了相对立的状态和需要避免的方向。${oppositeHex.guidance}`
},
reverse_hexagram: {
name: reverseHex.name,
symbol: reverseHex.symbol,
meaning: reverseHex.meaning,
analysis: `综卦【${reverseHex.name}】显示了事物的另一面和可能的转化方向。${reverseHex.guidance}`
},
comprehensive_insight: this.generateComprehensiveInsight(mainHex, interHex, oppositeHex, reverseHex)
};
}
// 获取互卦
getInterHexagram(hexInfo) {
const binary = hexInfo.binary;
// 互卦取2、3、4爻为下卦3、4、5爻为上卦
const lowerInter = binary.substring(3, 6); // 2、3、4爻
const upperInter = binary.substring(2, 5); // 3、4、5爻
const interBinary = upperInter + lowerInter;
for (const hexNum in this.ALL_HEXAGRAMS) {
if (this.ALL_HEXAGRAMS[hexNum].binary === interBinary) {
return this.ALL_HEXAGRAMS[hexNum];
}
}
return this.ALL_HEXAGRAMS[1]; // 默认返回乾卦
}
// 获取错卦(阴阳相反)
getOppositeHexagram(hexInfo) {
const binary = hexInfo.binary;
const oppositeBinary = binary.split('').map(bit => bit === '1' ? '0' : '1').join('');
for (const hexNum in this.ALL_HEXAGRAMS) {
if (this.ALL_HEXAGRAMS[hexNum].binary === oppositeBinary) {
return this.ALL_HEXAGRAMS[hexNum];
}
}
return this.ALL_HEXAGRAMS[2]; // 默认返回坤卦
}
// 获取综卦(上下颠倒)
getReverseHexagram(hexInfo) {
const binary = hexInfo.binary;
const reverseBinary = binary.split('').reverse().join('');
for (const hexNum in this.ALL_HEXAGRAMS) {
if (this.ALL_HEXAGRAMS[hexNum].binary === reverseBinary) {
return this.ALL_HEXAGRAMS[hexNum];
}
}
return hexInfo; // 如果没找到,返回原卦
}
// 生成综合洞察
generateComprehensiveInsight(mainHex, interHex, oppositeHex, reverseHex) {
return `通过四卦分析:本卦【${mainHex.name}】显示当前状态,互卦【${interHex.name}】揭示内在动力,错卦【${oppositeHex.name}】提醒对立面,综卦【${reverseHex.name}】指示转化方向。综合来看,需要在${mainHex.meaning}的基础上,注意${interHex.meaning}的内在发展,避免${oppositeHex.meaning}的极端,向${reverseHex.meaning}的方向转化。`;
}
// 动态分析:基于问题类型和时间因素
generateDynamicAnalysis(mainHex, changeHex, question, currentTime) {
const questionType = this.analyzeQuestionType(question);
const timeFactors = this.analyzeTimeFactors(currentTime);
return {
question_analysis: {
type: questionType.type,
focus: questionType.focus,
approach: questionType.approach
},
time_analysis: timeFactors,
targeted_guidance: this.generateTargetedGuidance(mainHex, changeHex, questionType, timeFactors),
practical_advice: this.generatePracticalAdvice(mainHex, changeHex, questionType)
};
}
// 分析问题类型
analyzeQuestionType(question) {
const lowerQuestion = question.toLowerCase();
if (lowerQuestion.includes('事业') || lowerQuestion.includes('工作') || lowerQuestion.includes('职业')) {
return {
type: '事业发展',
focus: '职场发展、事业规划、工作机会',
approach: '重点关注事业宫位和变化趋势'
};
} else if (lowerQuestion.includes('感情') || lowerQuestion.includes('爱情') || lowerQuestion.includes('婚姻')) {
return {
type: '感情婚姻',
focus: '情感关系、婚姻状况、人际和谐',
approach: '重点关注感情因素和人际关系'
};
} else if (lowerQuestion.includes('财运') || lowerQuestion.includes('投资') || lowerQuestion.includes('金钱')) {
return {
type: '财运投资',
focus: '财富积累、投资机会、经济状况',
approach: '重点关注财运变化和投资时机'
};
} else if (lowerQuestion.includes('健康') || lowerQuestion.includes('身体')) {
return {
type: '健康养生',
focus: '身体状况、健康维护、疾病预防',
approach: '重点关注身体状态和养生方法'
};
} else {
fortune += ` 事态稳定,应专注于当前状况。`;
return {
type: '综合运势',
focus: '整体发展、综合状况、全面分析',
approach: '全面分析各个方面的发展趋势'
};
}
}
// 分析时间因素
analyzeTimeFactors(currentTime) {
const month = currentTime.getMonth() + 1;
const season = this.getSeason(month);
const hour = currentTime.getHours();
const timeOfDay = this.getTimeOfDay(hour);
return {
season: season,
time_of_day: timeOfDay,
lunar_phase: this.getLunarPhase(currentTime),
energy_state: this.getEnergyState(season, timeOfDay)
};
}
// 获取季节
getSeason(month) {
if (month >= 3 && month <= 5) return { name: '春季', energy: '生发之气', advice: '适合开始新事物' };
if (month >= 6 && month <= 8) return { name: '夏季', energy: '旺盛之气', advice: '适合积极行动' };
if (month >= 9 && month <= 11) return { name: '秋季', energy: '收敛之气', advice: '适合收获总结' };
return { name: '冬季', energy: '潜藏之气', advice: '适合休养生息' };
}
// 获取时辰
getTimeOfDay(hour) {
if (hour >= 5 && hour < 7) return { name: '卯时', energy: '日出东方', advice: '新的开始' };
if (hour >= 7 && hour < 9) return { name: '辰时', energy: '朝阳初升', advice: '积极进取' };
if (hour >= 9 && hour < 11) return { name: '巳时', energy: '阳气渐盛', advice: '努力工作' };
if (hour >= 11 && hour < 13) return { name: '午时', energy: '阳气最盛', advice: '把握机会' };
if (hour >= 13 && hour < 15) return { name: '未时', energy: '阳气渐衰', advice: '稳步前进' };
if (hour >= 15 && hour < 17) return { name: '申时', energy: '阳气转阴', advice: '谨慎行事' };
if (hour >= 17 && hour < 19) return { name: '酉时', energy: '日落西山', advice: '收敛锋芒' };
if (hour >= 19 && hour < 21) return { name: '戌时', energy: '阴气渐盛', advice: '休息调整' };
if (hour >= 21 && hour < 23) return { name: '亥时', energy: '夜深人静', advice: '内省思考' };
if (hour >= 23 || hour < 1) return { name: '子时', energy: '阴极阳生', advice: '蓄势待发' };
if (hour >= 1 && hour < 3) return { name: '丑时', energy: '阴气深重', advice: '静心养神' };
return { name: '寅时', energy: '阳气初动', advice: '准备行动' };
}
// 象数分析
performNumerologyAnalysis(hexagramData, currentTime) {
const upperNum = hexagramData.upperTrigram || 1;
const lowerNum = hexagramData.lowerTrigram || 1;
const totalNum = upperNum + lowerNum;
return {
upper_trigram_number: {
number: upperNum,
meaning: this.NUMBERS[upperNum]?.meaning || '未知',
influence: '代表外在环境和表面现象'
},
lower_trigram_number: {
number: lowerNum,
meaning: this.NUMBERS[lowerNum]?.meaning || '未知',
influence: '代表内在动机和根本原因'
},
combined_energy: {
total: totalNum,
interpretation: this.interpretCombinedNumber(totalNum),
harmony: this.analyzeNumberHarmony(upperNum, lowerNum)
},
time_resonance: this.analyzeTimeResonance(totalNum, currentTime)
};
}
// 解释组合数字
interpretCombinedNumber(num) {
const interpretations = {
2: '极简之数,需要积累',
3: '生发之数,开始行动',
4: '稳定之数,循序渐进',
5: '变化之数,灵活应对',
6: '和谐之数,平衡发展',
7: '完善之数,精益求精',
8: '丰盛之数,收获时机',
9: '圆满之数,功德圆满',
10: '完成之数,新的开始',
11: '突破之数,创新变革',
12: '循环之数,周而复始',
13: '转化之数,质的飞跃',
14: '调和之数,协调统一',
15: '圆融之数,和谐共生',
16: '极盛之数,物极必反'
};
return interpretations[num] || '特殊之数,需要特别关注';
}
// 分析数字和谐度
analyzeNumberHarmony(upper, lower) {
const diff = Math.abs(upper - lower);
if (diff === 0) return '完全和谐,内外一致';
if (diff === 1) return '基本和谐,略有差异';
if (diff === 2) return '适度张力,需要平衡';
if (diff >= 3) return '较大差异,需要调和';
return '需要进一步分析';
}
// 添加更多专业分析方法
// 获取起卦方法名称
getMethodName(method) {
const methods = {
'time': '梅花易数时间起卦法',
'plum_blossom': '梅花易数外应起卦法',
'coin': '金钱卦起卦法',
'number': '数字起卦法'
};
return methods[method] || '传统起卦法';
}
// 计算农历信息
calculateLunarInfo(currentTime) {
// 简化的农历计算,实际应用中需要更精确的算法
const year = currentTime.getFullYear();
const month = currentTime.getMonth() + 1;
const day = currentTime.getDate();
return {
year: `${year}`,
month: `${month}`,
day: `${day}`,
note: '农历信息需要专业历法计算'
};
}
// 分析卦象结构
analyzeHexagramStructure(hexInfo) {
const upperTrigram = this.TRIGRAMS[hexInfo.upperTrigram];
const lowerTrigram = this.TRIGRAMS[hexInfo.lowerTrigram];
return {
upper_trigram: {
name: hexInfo.upperTrigram,
nature: upperTrigram?.nature || '未知',
attribute: upperTrigram?.attribute || '未知',
element: upperTrigram?.element || '未知'
},
lower_trigram: {
name: hexInfo.lowerTrigram,
nature: lowerTrigram?.nature || '未知',
attribute: lowerTrigram?.attribute || '未知',
element: lowerTrigram?.element || '未知'
},
interaction: this.analyzeTrigramInteraction(upperTrigram, lowerTrigram)
};
}
// 分析八卦组合
analyzeTrigramCombination(upperName, lowerName) {
const upper = this.TRIGRAMS[upperName];
const lower = this.TRIGRAMS[lowerName];
if (!upper || !lower) {
return '八卦信息不完整,无法分析';
}
return fortune;
return `上卦${upperName}${upper.nature})代表${upper.attribute},下卦${lowerName}${lower.nature})代表${lower.attribute}${upper.nature}在上,${lower.nature}在下,形成${upperName}${lowerName}的组合,象征着${this.getTrigramCombinationMeaning(upperName, lowerName)}`;
}
// 获取八卦组合含义
getTrigramCombinationMeaning(upper, lower) {
const combinations = {
'乾乾': '天行健,自强不息的力量',
'坤坤': '地势坤,厚德载物的包容',
'乾坤': '天地定位,阴阳和谐',
'坤乾': '地天泰,通达顺畅',
'震巽': '雷风相薄,变化迅速',
'巽震': '风雷益,增益发展',
'坎离': '水火既济,阴阳调和',
'离坎': '火水未济,尚需努力'
};
return combinations[upper + lower] || '特殊的能量组合,需要深入分析';
}
// 分析八卦相互作用
analyzeTrigramInteraction(upper, lower) {
if (!upper || !lower) return '无法分析八卦相互作用';
const upperElement = upper.element;
const lowerElement = lower.element;
return this.analyzeFiveElementsInteraction(upperElement, lowerElement);
}
// 分析五行关系
analyzeFiveElements(hexInfo) {
const upperTrigram = this.TRIGRAMS[hexInfo.upperTrigram];
const lowerTrigram = this.TRIGRAMS[hexInfo.lowerTrigram];
if (!upperTrigram || !lowerTrigram) {
return '五行信息不完整';
}
const upperElement = upperTrigram.element;
const lowerElement = lowerTrigram.element;
return {
upper_element: upperElement,
lower_element: lowerElement,
relationship: this.analyzeFiveElementsInteraction(upperElement, lowerElement),
balance: this.analyzeFiveElementsBalance(upperElement, lowerElement)
};
}
// 分析五行相互作用
analyzeFiveElementsInteraction(element1, element2) {
const interactions = {
'金金': '同气相求,力量集中',
'金木': '金克木,需要调和',
'金水': '金生水,相生有利',
'金火': '火克金,存在冲突',
'金土': '土生金,得到支持',
'木木': '同气相求,生机勃勃',
'木水': '水生木,滋养成长',
'木火': '木生火,能量转化',
'木土': '木克土,需要平衡',
'水水': '同气相求,流动不息',
'水火': '水火不容,需要调和',
'水土': '土克水,存在阻碍',
'火火': '同气相求,热情高涨',
'火土': '火生土,稳固发展',
'土土': '同气相求,稳重厚实'
};
return interactions[element1 + element2] || interactions[element2 + element1] || '五行关系复杂,需要综合分析';
}
// 分析五行平衡
analyzeFiveElementsBalance(element1, element2) {
if (element1 === element2) {
return '五行同类,力量集中,但可能缺乏变化';
}
const generative = ['金水', '水木', '木火', '火土', '土金'];
const destructive = ['金木', '木土', '土水', '水火', '火金'];
const combination = element1 + element2;
const reverseCombination = element2 + element1;
if (generative.includes(combination) || generative.includes(reverseCombination)) {
return '五行相生,和谐发展,有利于事物的成长';
} else if (destructive.includes(combination) || destructive.includes(reverseCombination)) {
return '五行相克,存在冲突,需要化解或利用这种张力';
}
return '五行关系中性,需要根据具体情况分析';
}
// 分析变卦
analyzeChangingHexagram(mainHex, changeHex) {
if (!changeHex) {
return {
name: '无变卦',
meaning: '事态稳定,应以本卦为主要参考',
transformation_insight: '没有动爻,表示当前状况将持续一段时间,应专注于当下,不宜有大的变动。',
guidance: '保持现状,稳步发展,等待时机成熟再做改变。'
};
}
return {
name: `变卦为【${changeHex.name}`,
meaning: changeHex.meaning,
transformation_insight: `从【${mainHex.name}】到【${changeHex.name}】的变化,预示着${this.generateTransformationInsight(mainHex, changeHex)}`,
guidance: `变卦指示:${changeHex.guidance}`,
timing: this.analyzeTransformationTiming(mainHex, changeHex)
};
}
// 生成转化洞察
generateTransformationInsight(mainHex, changeHex) {
const mainMeaning = mainHex.meaning;
const changeMeaning = changeHex.meaning;
return `事态将从${mainMeaning}转向${changeMeaning},这是一个重要的转折点。需要适应这种变化,调整策略和心态。`;
}
// 分析转化时机
analyzeTransformationTiming(mainHex, changeHex) {
// 根据卦象的性质分析转化的快慢
const fastChangingHexagrams = [1, 4, 16, 25, 34, 51]; // 乾、蒙、豫、无妄、大壮、震等
const slowChangingHexagrams = [2, 15, 23, 52]; // 坤、谦、剥、艮等
if (fastChangingHexagrams.includes(changeHex.number)) {
return '变化将会比较迅速,需要及时应对';
} else if (slowChangingHexagrams.includes(changeHex.number)) {
return '变化将会比较缓慢,有充分的准备时间';
}
return '变化的速度适中,需要保持关注';
}
// 生成关键信息
generateKeyMessage(mainHex, changeHex, question) {
const baseMessage = mainHex.keyMessage || '顺应自然,把握时机';
if (changeHex) {
return `${baseMessage}。变化在即,${changeHex.keyMessage || '需要适应新的形势'}`;
}
return baseMessage;
}
// 生成行动建议
generateActionAdvice(mainHex, changeHex, currentTime) {
const season = this.getSeason(currentTime.getMonth() + 1);
const timeOfDay = this.getTimeOfDay(currentTime.getHours());
let advice = mainHex.actionAdvice || '谨慎行事,稳步前进';
// 结合时间因素
advice += ` 当前正值${season.name}${season.advice}`;
advice += ` 现在是${timeOfDay.name}${timeOfDay.advice}`;
if (changeHex) {
advice += ` 考虑到即将到来的变化,建议:${changeHex.actionAdvice || '做好准备,迎接转变'}`;
}
return advice;
}
// 生成时机指导
generateTimingGuidance(mainHex, currentTime) {
const hour = currentTime.getHours();
const month = currentTime.getMonth() + 1;
let guidance = '时机分析:';
// 根据时辰分析
if (hour >= 5 && hour < 11) {
guidance += '上午时光,阳气上升,适合开始新的行动。';
} else if (hour >= 11 && hour < 17) {
guidance += '下午时光,阳气鼎盛,适合推进重要事务。';
} else {
guidance += '晚间时光,阴气渐盛,适合思考和规划。';
}
// 根据季节分析
const season = this.getSeason(month);
guidance += ` ${season.name}${season.advice}`;
return guidance;
}
// 生成哲学洞察
generatePhilosophicalInsight(mainHex, changeHex) {
let insight = `《易经》${mainHex.name}卦的核心智慧在于:${mainHex.philosophy || '顺应自然规律,把握变化时机'}`;
if (changeHex) {
insight += ` 而变卦${changeHex.name}则提醒我们:${changeHex.philosophy || '变化是永恒的,适应是智慧的'}`;
}
insight += ' 《易经》告诉我们,万事万物都在变化之中,智者应该顺应这种变化,在变化中寻找机遇,在稳定中积蓄力量。';
return insight;
}
// 获取月相(简化版)
getLunarPhase(currentTime) {
const day = currentTime.getDate();
if (day <= 7) return { name: '新月', energy: '新的开始', advice: '适合播种和规划' };
if (day <= 14) return { name: '上弦月', energy: '成长发展', advice: '适合努力和进取' };
if (day <= 21) return { name: '满月', energy: '圆满充实', advice: '适合收获和庆祝' };
return { name: '下弦月', energy: '反思总结', advice: '适合整理和准备' };
}
// 获取能量状态
getEnergyState(season, timeOfDay) {
const seasonEnergy = season.energy;
const timeEnergy = timeOfDay.energy;
return {
overall: `${seasonEnergy}${timeEnergy}相结合`,
recommendation: `${season.name}${timeOfDay.name}${season.advice},同时${timeOfDay.advice}`
};
}
// 生成针对性指导
generateTargetedGuidance(mainHex, changeHex, questionType, timeFactors) {
let guidance = `针对您关于${questionType.type}的问题,`;
guidance += `本卦【${mainHex.name}】在${questionType.focus}方面的指示是:${mainHex.guidance}`;
if (changeHex) {
guidance += ` 变卦【${changeHex.name}】预示着在${questionType.focus}方面将会有所转变。`;
}
guidance += ` 结合当前的时间因素(${timeFactors.season.name}${timeFactors.time_of_day.name}),建议您${timeFactors.season.advice}`;
return guidance;
}
// 生成实用建议
generatePracticalAdvice(mainHex, changeHex, questionType) {
const adviceMap = {
'事业发展': this.generateCareerAdvice(mainHex, changeHex),
'感情婚姻': this.generateRelationshipAdvice(mainHex, changeHex),
'财运投资': this.generateFinancialAdvice(mainHex, changeHex),
'健康养生': this.generateHealthAdvice(mainHex, changeHex),
'综合运势': this.generateGeneralAdvice(mainHex, changeHex)
};
return adviceMap[questionType.type] || this.generateGeneralAdvice(mainHex, changeHex);
}
// 生成事业建议
@@ -207,6 +915,52 @@ class YijingAnalyzer {
return advice;
}
// 生成财运建议
generateFinancialAdvice(mainHex, changeHex) {
let advice = `财运方面,本卦【${mainHex.name}】显示:"${mainHex.wealth || mainHex.guidance}"。`;
if (changeHex) {
advice += ` 变卦【${changeHex.name}】预示财运可能向"${changeHex.wealth || changeHex.guidance}"的方向发展。`;
}
return advice;
}
// 生成健康建议
generateHealthAdvice(mainHex, changeHex) {
let advice = `健康方面,本卦【${mainHex.name}】提醒:"${mainHex.health || mainHex.guidance}"。`;
if (changeHex) {
advice += ` 变卦【${changeHex.name}】暗示健康状况可能朝"${changeHex.health || changeHex.guidance}"的方向变化。`;
}
return advice;
}
// 生成综合建议
generateGeneralAdvice(mainHex, changeHex) {
let advice = `综合来看,本卦【${mainHex.name}】的总体指导是:"${mainHex.guidance}"。`;
if (changeHex) {
advice += ` 变卦【${changeHex.name}】提示未来趋势:"${changeHex.guidance}"。`;
}
return advice;
}
// 分析时间共振
analyzeTimeResonance(totalNum, currentTime) {
const hour = currentTime.getHours();
const day = currentTime.getDate();
const resonance = (totalNum + hour + day) % 8 + 1;
return {
resonance_number: resonance,
meaning: this.NUMBERS[resonance]?.meaning || '未知',
interpretation: `当前时间与卦象数字的共振显示:${this.NUMBERS[resonance]?.meaning || '特殊的能量状态'}`
};
}
// 初始化64卦数据
initializeHexagrams() {
this.ALL_HEXAGRAMS = {

View File

@@ -1,6 +1,7 @@
import React from 'react';
import CompleteBaziAnalysis from './CompleteBaziAnalysis';
import CompleteZiweiAnalysis from './CompleteZiweiAnalysis';
import CompleteYijingAnalysis from './CompleteYijingAnalysis';
import BaziAnalysisDisplay from './BaziAnalysisDisplay';
interface AnalysisResultDisplayProps {
@@ -10,9 +11,19 @@ interface AnalysisResultDisplayProps {
date: string;
time: string;
};
question?: string;
userId?: string;
divinationMethod?: string;
}
const AnalysisResultDisplay: React.FC<AnalysisResultDisplayProps> = ({ analysisResult, analysisType, birthDate }) => {
const AnalysisResultDisplay: React.FC<AnalysisResultDisplayProps> = ({
analysisResult,
analysisType,
birthDate,
question,
userId,
divinationMethod
}) => {
// 安全地获取数据的辅助函数
const safeGet = (obj: any, path: string, defaultValue: any = '暂无数据') => {
const keys = path.split('.');
@@ -238,7 +249,32 @@ const AnalysisResultDisplay: React.FC<AnalysisResultDisplayProps> = ({ analysisR
// 渲染易经占卜分析
const renderYijingAnalysis = () => {
// 处理新的数据结构: { type: 'yijing', data: analysisResult }
// 如果有问题参数,使用新的 CompleteYijingAnalysis 组件
if (question) {
return (
<CompleteYijingAnalysis
question={question}
userId={userId}
divinationMethod={divinationMethod}
/>
);
}
// 如果有分析结果但没有问题参数,尝试从结果中提取问题信息
if (analysisResult && analysisResult.data) {
const basicInfo = analysisResult.data.basic_info;
if (basicInfo && basicInfo.divination_data) {
return (
<CompleteYijingAnalysis
question={basicInfo.divination_data.question || '综合运势如何?'}
userId={userId || 'user123'}
divinationMethod={divinationMethod || 'time'}
/>
);
}
}
// 回退到旧的渲染方式(向后兼容)
const data = analysisResult?.data || analysisResult;
return (

View File

@@ -0,0 +1,736 @@
import React, { useState, useEffect } from 'react';
import { Calendar, Star, BookOpen, Sparkles, User, BarChart3, Zap, TrendingUp, Loader2, Clock, Target, Heart, DollarSign, Activity, Crown, Compass, Moon, Sun, Hexagon, Layers, Eye, Shuffle } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from './ui/Card';
import { localApi } from '../lib/localApi';
interface CompleteYijingAnalysisProps {
question: string;
userId?: string;
divinationMethod?: string;
}
const CompleteYijingAnalysis: React.FC<CompleteYijingAnalysisProps> = ({
question,
userId = 'user123',
divinationMethod = 'time'
}) => {
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [analysisData, setAnalysisData] = useState<any>(null);
// 卦象颜色配置
const hexagramColors: { [key: string]: string } = {
'乾': 'bg-yellow-100 text-yellow-800 border-yellow-300',
'坤': 'bg-brown-100 text-brown-800 border-brown-300',
'震': 'bg-green-100 text-green-800 border-green-300',
'巽': 'bg-blue-100 text-blue-800 border-blue-300',
'坎': 'bg-indigo-100 text-indigo-800 border-indigo-300',
'离': 'bg-red-100 text-red-800 border-red-300',
'艮': 'bg-gray-100 text-gray-800 border-gray-300',
'兑': 'bg-purple-100 text-purple-800 border-purple-300'
};
// 五行颜色配置
const elementColors: { [key: string]: string } = {
'金': '#fbbf24', // 金色
'木': '#22c55e', // 绿色
'水': '#3b82f6', // 蓝色
'火': '#ef4444', // 红色
'土': '#a3a3a3' // 灰色
};
// 问题类型颜色配置
const questionTypeColors: { [key: string]: string } = {
'事业发展': 'bg-blue-100 text-blue-800 border-blue-300',
'感情婚姻': 'bg-pink-100 text-pink-800 border-pink-300',
'财运投资': 'bg-green-100 text-green-800 border-green-300',
'健康养生': 'bg-orange-100 text-orange-800 border-orange-300',
'综合运势': 'bg-purple-100 text-purple-800 border-purple-300'
};
useEffect(() => {
const fetchAnalysisData = async () => {
try {
setIsLoading(true);
setError(null);
const yijingData = {
question: question,
user_id: userId,
divination_method: divinationMethod
};
const yijingResponse = await localApi.analysis.yijing(yijingData);
if (yijingResponse.error) {
throw new Error(yijingResponse.error.message || '易经分析失败');
}
const analysisResult = yijingResponse.data?.analysis;
if (!analysisResult) {
throw new Error('分析结果为空');
}
setAnalysisData(analysisResult);
} catch (err) {
console.error('获取分析数据出错:', err);
setError(err instanceof Error ? err.message : '分析数据获取失败,请稍后重试');
} finally {
setIsLoading(false);
}
};
if (question) {
fetchAnalysisData();
}
}, [question, userId, divinationMethod]);
// 渲染加载状态
if (isLoading) {
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-50 to-purple-50">
<Card className="chinese-card-decoration border-2 border-indigo-400 p-8">
<CardContent className="text-center">
<Loader2 className="h-12 w-12 animate-spin text-indigo-600 mx-auto mb-4" />
<h3 className="text-xl font-bold text-indigo-800 mb-2"></h3>
<p className="text-indigo-600">...</p>
</CardContent>
</Card>
</div>
);
}
// 渲染错误状态
if (error) {
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-50 to-purple-50">
<Card className="chinese-card-decoration border-2 border-red-400 p-8">
<CardContent className="text-center">
<div className="text-6xl mb-4"></div>
<h3 className="text-xl font-bold text-red-800 mb-2"></h3>
<p className="text-red-600 mb-4">{error}</p>
<button
onClick={() => window.location.reload()}
className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
>
</button>
</CardContent>
</Card>
</div>
);
}
if (!analysisData) {
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-50 to-purple-50">
<Card className="chinese-card-decoration border-2 border-indigo-400 p-8">
<CardContent className="text-center">
<div className="text-6xl mb-4"></div>
<h3 className="text-xl font-bold text-indigo-800 mb-2"></h3>
<p className="text-indigo-600"></p>
</CardContent>
</Card>
</div>
);
}
// 渲染卦象卡片
const renderHexagramCard = (hexagram: any, title: string, isMain: boolean = false) => {
if (!hexagram) return null;
return (
<Card className={`chinese-card-decoration hover:shadow-xl transition-all duration-300 border-2 ${
isMain ? 'border-indigo-400 bg-indigo-50' : 'border-purple-400'
}`}>
<CardHeader className="text-center pb-2">
<CardTitle className={`text-lg font-bold chinese-text-shadow ${
isMain ? 'text-indigo-800' : 'text-purple-800'
}`}>
{title}
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="text-center">
<div className="text-6xl mb-2">{hexagram.symbol || hexagram}</div>
<div className="text-2xl font-bold text-gray-800 mb-2">
{hexagram.name || hexagram}
</div>
{hexagram.number && (
<div className="text-sm text-gray-600 mb-2">{hexagram.number}</div>
)}
<div className="text-sm text-gray-700 mb-3">
{hexagram.meaning || '卦象含义'}
</div>
</div>
</CardContent>
</Card>
);
};
// 渲染八卦信息
const renderTrigramInfo = (trigram: any, position: string) => {
if (!trigram) return null;
return (
<div className="bg-white p-4 rounded-lg border border-gray-200">
<h4 className="font-bold text-gray-800 mb-2">{position}</h4>
<div className="space-y-2">
<div className="flex justify-between">
<span className="text-gray-600"></span>
<span className="font-medium">{trigram.name}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600"></span>
<span className="font-medium">{trigram.nature}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600"></span>
<span className="font-medium">{trigram.attribute}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600"></span>
<span
className="font-medium px-2 py-1 rounded text-xs"
style={{
backgroundColor: elementColors[trigram.element] + '20',
color: elementColors[trigram.element]
}}
>
{trigram.element}
</span>
</div>
</div>
</div>
);
};
// 渲染动爻分析
const renderChangingLinesAnalysis = (analysis: any) => {
if (!analysis || !analysis.detailed_analysis) return null;
return (
<div className="space-y-4">
<div className="bg-yellow-50 p-4 rounded-lg border border-yellow-200">
<h4 className="font-bold text-yellow-800 mb-2"></h4>
<p className="text-yellow-700">{analysis.method}</p>
<p className="text-yellow-600 text-sm mt-1">{analysis.overall_guidance}</p>
</div>
{analysis.detailed_analysis.map((line: any, index: number) => (
<div key={index} className="bg-white p-4 rounded-lg border border-gray-200">
<div className="flex justify-between items-center mb-3">
<h5 className="font-bold text-gray-800">{line.line_position}</h5>
<span className={`px-2 py-1 rounded text-xs font-medium ${
line.line_nature === '阳爻' ? 'bg-red-100 text-red-800' : 'bg-blue-100 text-blue-800'
}`}>
{line.line_nature}
</span>
</div>
<div className="space-y-2 text-sm">
<div>
<span className="font-medium text-gray-700"></span>
<span className="text-gray-600">{line.position_meaning}</span>
</div>
<div>
<span className="font-medium text-gray-700"></span>
<span className="text-gray-600">{line.line_text}</span>
</div>
<div>
<span className="font-medium text-gray-700"></span>
<span className="text-gray-600">{line.line_image}</span>
</div>
<div className="bg-blue-50 p-2 rounded">
<span className="font-medium text-blue-800"></span>
<span className="text-blue-700">{line.practical_guidance}</span>
</div>
</div>
</div>
))}
</div>
);
};
return (
<div className="min-h-screen bg-gradient-to-br from-indigo-50 to-purple-50 py-8">
<div className="max-w-7xl mx-auto px-4 space-y-8">
{/* 标题和基本信息 */}
<Card className="chinese-card-decoration dragon-corner border-2 border-indigo-400">
<CardHeader className="text-center">
<CardTitle className="text-indigo-800 text-3xl font-bold chinese-text-shadow flex items-center justify-center space-x-2">
<Hexagon className="h-8 w-8" />
<span></span>
<Hexagon className="h-8 w-8" />
</CardTitle>
<div className="flex justify-center space-x-6 mt-4 text-indigo-700">
<div className="flex items-center space-x-2">
<Calendar className="h-5 w-5" />
<span>{analysisData.analysis_date}</span>
</div>
<div className="flex items-center space-x-2">
<Clock className="h-5 w-5" />
<span>{new Date(analysisData.basic_info.divination_data.divination_time).toLocaleString('zh-CN')}</span>
</div>
</div>
</CardHeader>
<CardContent>
<div className="text-center space-y-4">
{/* 占卜信息 */}
<div className="bg-white p-4 rounded-lg border-l-4 border-indigo-500">
<h4 className="font-bold text-indigo-800 mb-2"></h4>
<div className="grid md:grid-cols-2 gap-4">
<div>
<p className="text-indigo-700"><span className="font-medium"></span>{analysisData.basic_info.divination_data.question}</p>
<p className="text-indigo-700"><span className="font-medium"></span>{analysisData.basic_info.divination_data.method}</p>
</div>
<div>
<p className="text-indigo-700"><span className="font-medium"></span>
<span className={`ml-2 px-2 py-1 rounded text-xs font-medium ${
questionTypeColors[analysisData.dynamic_guidance.question_analysis.type] || 'bg-gray-100 text-gray-800'
}`}>
{analysisData.dynamic_guidance.question_analysis.type}
</span>
</p>
<p className="text-indigo-700"><span className="font-medium"></span>{analysisData.dynamic_guidance.question_analysis.focus}</p>
</div>
</div>
</div>
</div>
</CardContent>
</Card>
{/* 卦象信息 */}
<div className="grid lg:grid-cols-2 gap-8">
{/* 本卦 */}
<div className="space-y-4">
<h3 className="text-2xl font-bold text-indigo-800 chinese-text-shadow flex items-center space-x-2">
<Star className="h-6 w-6" />
<span></span>
</h3>
{renderHexagramCard({
name: analysisData.basic_info.hexagram_info.main_hexagram,
symbol: analysisData.basic_info.hexagram_info.main_hexagram_symbol,
number: analysisData.basic_info.hexagram_info.main_hexagram_number,
meaning: analysisData.detailed_analysis.hexagram_analysis.primary_meaning.split(' - ')[1]
}, '本卦', true)}
{/* 八卦结构 */}
<Card className="chinese-card-decoration border-2 border-indigo-400">
<CardHeader>
<CardTitle className="text-indigo-800 text-lg font-bold chinese-text-shadow flex items-center space-x-2">
<Layers className="h-5 w-5" />
<span></span>
</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 gap-4">
{renderTrigramInfo(analysisData.basic_info.hexagram_info.hexagram_structure.upper_trigram, '上卦')}
{renderTrigramInfo(analysisData.basic_info.hexagram_info.hexagram_structure.lower_trigram, '下卦')}
</div>
<div className="mt-4 bg-indigo-50 p-3 rounded-lg">
<h5 className="font-bold text-indigo-800 mb-2"></h5>
<p className="text-indigo-700 text-sm">{analysisData.detailed_analysis.hexagram_analysis.trigram_analysis}</p>
</div>
</CardContent>
</Card>
</div>
{/* 变卦 */}
<div className="space-y-4">
<h3 className="text-2xl font-bold text-purple-800 chinese-text-shadow flex items-center space-x-2">
<Shuffle className="h-6 w-6" />
<span></span>
</h3>
{analysisData.basic_info.hexagram_info.changing_hexagram !== '无' ? (
renderHexagramCard({
name: analysisData.basic_info.hexagram_info.changing_hexagram,
symbol: analysisData.basic_info.hexagram_info.changing_hexagram_symbol,
meaning: analysisData.detailed_analysis.changing_hexagram_analysis.meaning
}, '变卦')
) : (
<Card className="chinese-card-decoration border-2 border-gray-400">
<CardContent className="text-center py-8">
<div className="text-4xl mb-4">🔒</div>
<h4 className="text-gray-800 font-bold mb-2"></h4>
<p className="text-gray-600"></p>
</CardContent>
</Card>
)}
{/* 变化分析 */}
<Card className="chinese-card-decoration border-2 border-purple-400">
<CardHeader>
<CardTitle className="text-purple-800 text-lg font-bold chinese-text-shadow flex items-center space-x-2">
<TrendingUp className="h-5 w-5" />
<span></span>
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-3">
<div>
<h5 className="font-bold text-purple-800 mb-2"></h5>
<p className="text-purple-700 text-sm">{analysisData.detailed_analysis.changing_hexagram_analysis.transformation_insight}</p>
</div>
<div>
<h5 className="font-bold text-purple-800 mb-2"></h5>
<p className="text-purple-700 text-sm">{analysisData.detailed_analysis.changing_hexagram_analysis.guidance}</p>
</div>
<div>
<h5 className="font-bold text-purple-800 mb-2"></h5>
<p className="text-purple-700 text-sm">{analysisData.detailed_analysis.changing_hexagram_analysis.timing}</p>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
{/* 卦辞象传 */}
<Card className="chinese-card-decoration border-2 border-indigo-400">
<CardHeader>
<CardTitle className="text-indigo-800 text-2xl font-bold chinese-text-shadow flex items-center space-x-2">
<BookOpen className="h-6 w-6" />
<span></span>
</CardTitle>
</CardHeader>
<CardContent>
<div className="grid md:grid-cols-2 gap-6">
<div className="bg-yellow-50 p-4 rounded-lg border border-yellow-200">
<h4 className="font-bold text-yellow-800 mb-2"></h4>
<p className="text-yellow-700 leading-relaxed">{analysisData.detailed_analysis.hexagram_analysis.judgment}</p>
</div>
<div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
<h4 className="font-bold text-blue-800 mb-2"></h4>
<p className="text-blue-700 leading-relaxed">{analysisData.detailed_analysis.hexagram_analysis.image}</p>
</div>
</div>
</CardContent>
</Card>
{/* 动爻分析 */}
{analysisData.detailed_analysis.changing_lines_analysis && (
<Card className="chinese-card-decoration border-2 border-orange-400">
<CardHeader>
<CardTitle className="text-orange-800 text-2xl font-bold chinese-text-shadow flex items-center space-x-2">
<Zap className="h-6 w-6" />
<span></span>
</CardTitle>
<p className="text-orange-600 mt-2">{analysisData.detailed_analysis.changing_lines_analysis.changing_lines_count}</p>
</CardHeader>
<CardContent>
{renderChangingLinesAnalysis(analysisData.detailed_analysis.changing_lines_analysis)}
</CardContent>
</Card>
)}
{/* 高级分析 */}
{analysisData.detailed_analysis.advanced_analysis && (
<Card className="chinese-card-decoration border-2 border-green-400">
<CardHeader>
<CardTitle className="text-green-800 text-2xl font-bold chinese-text-shadow flex items-center space-x-2">
<Eye className="h-6 w-6" />
<span></span>
</CardTitle>
<p className="text-green-600 mt-2"></p>
</CardHeader>
<CardContent>
<div className="grid lg:grid-cols-3 gap-6">
{/* 互卦 */}
<div className="bg-green-50 p-4 rounded-lg border border-green-200">
<h4 className="font-bold text-green-800 mb-2 flex items-center space-x-2">
<span>🔄</span>
<span> - {analysisData.detailed_analysis.advanced_analysis.inter_hexagram.name}</span>
</h4>
<div className="text-center mb-3">
<div className="text-3xl mb-1">{analysisData.detailed_analysis.advanced_analysis.inter_hexagram.symbol}</div>
<div className="text-sm text-green-600">{analysisData.detailed_analysis.advanced_analysis.inter_hexagram.meaning}</div>
</div>
<p className="text-green-700 text-sm">{analysisData.detailed_analysis.advanced_analysis.inter_hexagram.analysis}</p>
</div>
{/* 错卦 */}
<div className="bg-red-50 p-4 rounded-lg border border-red-200">
<h4 className="font-bold text-red-800 mb-2 flex items-center space-x-2">
<span></span>
<span> - {analysisData.detailed_analysis.advanced_analysis.opposite_hexagram.name}</span>
</h4>
<div className="text-center mb-3">
<div className="text-3xl mb-1">{analysisData.detailed_analysis.advanced_analysis.opposite_hexagram.symbol}</div>
<div className="text-sm text-red-600">{analysisData.detailed_analysis.advanced_analysis.opposite_hexagram.meaning}</div>
</div>
<p className="text-red-700 text-sm">{analysisData.detailed_analysis.advanced_analysis.opposite_hexagram.analysis}</p>
</div>
{/* 综卦 */}
<div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
<h4 className="font-bold text-blue-800 mb-2 flex items-center space-x-2">
<span>🔀</span>
<span> - {analysisData.detailed_analysis.advanced_analysis.reverse_hexagram.name}</span>
</h4>
<div className="text-center mb-3">
<div className="text-3xl mb-1">{analysisData.detailed_analysis.advanced_analysis.reverse_hexagram.symbol}</div>
<div className="text-sm text-blue-600">{analysisData.detailed_analysis.advanced_analysis.reverse_hexagram.meaning}</div>
</div>
<p className="text-blue-700 text-sm">{analysisData.detailed_analysis.advanced_analysis.reverse_hexagram.analysis}</p>
</div>
</div>
{/* 综合洞察 */}
<div className="mt-6 bg-purple-50 p-4 rounded-lg border border-purple-200">
<h4 className="font-bold text-purple-800 mb-2"></h4>
<p className="text-purple-700 text-sm leading-relaxed">{analysisData.detailed_analysis.advanced_analysis.comprehensive_insight}</p>
</div>
</CardContent>
</Card>
)}
{/* 象数分析 */}
{analysisData.detailed_analysis.numerology_analysis && (
<Card className="chinese-card-decoration border-2 border-yellow-400">
<CardHeader>
<CardTitle className="text-yellow-800 text-2xl font-bold chinese-text-shadow flex items-center space-x-2">
<BarChart3 className="h-6 w-6" />
<span></span>
</CardTitle>
<p className="text-yellow-600 mt-2"></p>
</CardHeader>
<CardContent>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
<div className="bg-yellow-50 p-4 rounded-lg border border-yellow-200">
<h4 className="font-bold text-yellow-800 mb-2"></h4>
<div className="text-2xl font-bold text-yellow-700 mb-1">{analysisData.detailed_analysis.numerology_analysis.upper_trigram_number.number}</div>
<div className="text-sm text-yellow-600">{analysisData.detailed_analysis.numerology_analysis.upper_trigram_number.meaning}</div>
<div className="text-xs text-yellow-500 mt-1">{analysisData.detailed_analysis.numerology_analysis.upper_trigram_number.influence}</div>
</div>
<div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
<h4 className="font-bold text-blue-800 mb-2"></h4>
<div className="text-2xl font-bold text-blue-700 mb-1">{analysisData.detailed_analysis.numerology_analysis.lower_trigram_number.number}</div>
<div className="text-sm text-blue-600">{analysisData.detailed_analysis.numerology_analysis.lower_trigram_number.meaning}</div>
<div className="text-xs text-blue-500 mt-1">{analysisData.detailed_analysis.numerology_analysis.lower_trigram_number.influence}</div>
</div>
<div className="bg-green-50 p-4 rounded-lg border border-green-200">
<h4 className="font-bold text-green-800 mb-2"></h4>
<div className="text-2xl font-bold text-green-700 mb-1">{analysisData.detailed_analysis.numerology_analysis.combined_energy.total}</div>
<div className="text-sm text-green-600">{analysisData.detailed_analysis.numerology_analysis.combined_energy.interpretation}</div>
<div className="text-xs text-green-500 mt-1">{analysisData.detailed_analysis.numerology_analysis.combined_energy.harmony}</div>
</div>
<div className="bg-purple-50 p-4 rounded-lg border border-purple-200">
<h4 className="font-bold text-purple-800 mb-2"></h4>
<div className="text-2xl font-bold text-purple-700 mb-1">{analysisData.detailed_analysis.numerology_analysis.time_resonance.resonance_number}</div>
<div className="text-sm text-purple-600">{analysisData.detailed_analysis.numerology_analysis.time_resonance.meaning}</div>
<div className="text-xs text-purple-500 mt-1">{analysisData.detailed_analysis.numerology_analysis.time_resonance.interpretation}</div>
</div>
</div>
</CardContent>
</Card>
)}
{/* 五行分析 */}
{analysisData.detailed_analysis.hexagram_analysis.five_elements && (
<Card className="chinese-card-decoration border-2 border-gray-400">
<CardHeader>
<CardTitle className="text-gray-800 text-2xl font-bold chinese-text-shadow flex items-center space-x-2">
<Compass className="h-6 w-6" />
<span></span>
</CardTitle>
</CardHeader>
<CardContent>
<div className="grid md:grid-cols-2 gap-6">
<div className="space-y-4">
<div className="bg-white p-4 rounded-lg border border-gray-200">
<h4 className="font-bold text-gray-800 mb-3"></h4>
<div className="space-y-2">
<div className="flex justify-between items-center">
<span className="text-gray-600"></span>
<span
className="px-3 py-1 rounded font-medium"
style={{
backgroundColor: elementColors[analysisData.detailed_analysis.hexagram_analysis.five_elements.upper_element] + '20',
color: elementColors[analysisData.detailed_analysis.hexagram_analysis.five_elements.upper_element]
}}
>
{analysisData.detailed_analysis.hexagram_analysis.five_elements.upper_element}
</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-600"></span>
<span
className="px-3 py-1 rounded font-medium"
style={{
backgroundColor: elementColors[analysisData.detailed_analysis.hexagram_analysis.five_elements.lower_element] + '20',
color: elementColors[analysisData.detailed_analysis.hexagram_analysis.five_elements.lower_element]
}}
>
{analysisData.detailed_analysis.hexagram_analysis.five_elements.lower_element}
</span>
</div>
</div>
</div>
</div>
<div className="space-y-4">
<div className="bg-white p-4 rounded-lg border border-gray-200">
<h4 className="font-bold text-gray-800 mb-3"></h4>
<div className="space-y-2">
<div>
<span className="font-medium text-gray-700"></span>
<p className="text-gray-600 text-sm">{analysisData.detailed_analysis.hexagram_analysis.five_elements.relationship}</p>
</div>
<div>
<span className="font-medium text-gray-700"></span>
<p className="text-gray-600 text-sm">{analysisData.detailed_analysis.hexagram_analysis.five_elements.balance}</p>
</div>
</div>
</div>
</div>
</div>
</CardContent>
</Card>
)}
{/* 时间分析 */}
{analysisData.dynamic_guidance.time_analysis && (
<Card className="chinese-card-decoration border-2 border-blue-400">
<CardHeader>
<CardTitle className="text-blue-800 text-2xl font-bold chinese-text-shadow flex items-center space-x-2">
<Clock className="h-6 w-6" />
<span></span>
</CardTitle>
<p className="text-blue-600 mt-2"></p>
</CardHeader>
<CardContent>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
<div className="bg-green-50 p-4 rounded-lg border border-green-200">
<h4 className="font-bold text-green-800 mb-2 flex items-center space-x-2">
<span>🌸</span>
<span></span>
</h4>
<div className="text-lg font-bold text-green-700 mb-1">{analysisData.dynamic_guidance.time_analysis.season.name}</div>
<div className="text-sm text-green-600 mb-2">{analysisData.dynamic_guidance.time_analysis.season.energy}</div>
<div className="text-xs text-green-500">{analysisData.dynamic_guidance.time_analysis.season.advice}</div>
</div>
<div className="bg-orange-50 p-4 rounded-lg border border-orange-200">
<h4 className="font-bold text-orange-800 mb-2 flex items-center space-x-2">
<span></span>
<span></span>
</h4>
<div className="text-lg font-bold text-orange-700 mb-1">{analysisData.dynamic_guidance.time_analysis.time_of_day.name}</div>
<div className="text-sm text-orange-600 mb-2">{analysisData.dynamic_guidance.time_analysis.time_of_day.energy}</div>
<div className="text-xs text-orange-500">{analysisData.dynamic_guidance.time_analysis.time_of_day.advice}</div>
</div>
<div className="bg-purple-50 p-4 rounded-lg border border-purple-200">
<h4 className="font-bold text-purple-800 mb-2 flex items-center space-x-2">
<Moon className="h-4 w-4" />
<span></span>
</h4>
<div className="text-lg font-bold text-purple-700 mb-1">{analysisData.dynamic_guidance.time_analysis.lunar_phase.name}</div>
<div className="text-sm text-purple-600 mb-2">{analysisData.dynamic_guidance.time_analysis.lunar_phase.energy}</div>
<div className="text-xs text-purple-500">{analysisData.dynamic_guidance.time_analysis.lunar_phase.advice}</div>
</div>
<div className="bg-yellow-50 p-4 rounded-lg border border-yellow-200">
<h4 className="font-bold text-yellow-800 mb-2 flex items-center space-x-2">
<Sun className="h-4 w-4" />
<span></span>
</h4>
<div className="text-sm text-yellow-600 mb-2">{analysisData.dynamic_guidance.time_analysis.energy_state.overall}</div>
<div className="text-xs text-yellow-500">{analysisData.dynamic_guidance.time_analysis.energy_state.recommendation}</div>
</div>
</div>
</CardContent>
</Card>
)}
{/* 专业指导 */}
<div className="grid lg:grid-cols-2 gap-8">
{/* 针对性指导 */}
<Card className="chinese-card-decoration border-2 border-indigo-400">
<CardHeader>
<CardTitle className="text-indigo-800 text-xl font-bold chinese-text-shadow flex items-center space-x-2">
<Target className="h-5 w-5" />
<span></span>
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="bg-indigo-50 p-4 rounded-lg">
<h4 className="font-bold text-indigo-800 mb-2"></h4>
<p className="text-indigo-700 text-sm leading-relaxed">{analysisData.dynamic_guidance.targeted_guidance}</p>
</div>
<div className="bg-blue-50 p-4 rounded-lg">
<h4 className="font-bold text-blue-800 mb-2"></h4>
<p className="text-blue-700 text-sm leading-relaxed">{analysisData.dynamic_guidance.practical_advice}</p>
</div>
</div>
</CardContent>
</Card>
{/* 易经智慧 */}
<Card className="chinese-card-decoration border-2 border-purple-400">
<CardHeader>
<CardTitle className="text-purple-800 text-xl font-bold chinese-text-shadow flex items-center space-x-2">
<Sparkles className="h-5 w-5" />
<span></span>
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="bg-purple-50 p-4 rounded-lg">
<h4 className="font-bold text-purple-800 mb-2"></h4>
<p className="text-purple-700 font-medium">{analysisData.divination_wisdom.key_message}</p>
</div>
<div className="bg-green-50 p-4 rounded-lg">
<h4 className="font-bold text-green-800 mb-2"></h4>
<p className="text-green-700 text-sm leading-relaxed">{analysisData.divination_wisdom.action_advice}</p>
</div>
<div className="bg-yellow-50 p-4 rounded-lg">
<h4 className="font-bold text-yellow-800 mb-2"></h4>
<p className="text-yellow-700 text-sm leading-relaxed">{analysisData.divination_wisdom.timing_guidance}</p>
</div>
</div>
</CardContent>
</Card>
</div>
{/* 哲学洞察 */}
<Card className="chinese-card-decoration border-2 border-gray-400">
<CardHeader>
<CardTitle className="text-gray-800 text-2xl font-bold chinese-text-shadow flex items-center space-x-2">
<BookOpen className="h-6 w-6" />
<span></span>
</CardTitle>
</CardHeader>
<CardContent>
<div className="bg-gray-50 p-6 rounded-lg">
<p className="text-gray-700 leading-relaxed text-center italic">
{analysisData.divination_wisdom.philosophical_insight}
</p>
</div>
</CardContent>
</Card>
{/* 免责声明 */}
<Card className="chinese-card-decoration border-2 border-gray-300">
<CardContent className="text-center py-6">
<p className="text-gray-600 text-sm">
</p>
<div className="mt-4 text-xs text-gray-500">
{new Date().toLocaleString('zh-CN')}
</div>
</CardContent>
</Card>
</div>
</div>
);
};
export default CompleteYijingAnalysis;

View File

@@ -195,10 +195,10 @@ class LocalApiClient {
},
// 易经分析
yijing: async (birthData: any, question?: string): Promise<ApiResponse<{ record_id: number; analysis: any }>> => {
yijing: async (yijingData: any): Promise<ApiResponse<{ record_id: number; analysis: any }>> => {
return this.request<{ record_id: number; analysis: any }>('/analysis/yijing', {
method: 'POST',
body: JSON.stringify({ birth_data: birthData, question }),
body: JSON.stringify(yijingData),
});
},

View File

@@ -56,9 +56,17 @@ const AnalysisPage: React.FC = () => {
const handleAnalysis = async () => {
if (!user) return;
if (!formData.name || !formData.birth_date) {
toast.error('请填写姓名和出生日期');
return;
// 根据分析类型验证必要参数
if (analysisType === 'yijing') {
if (!formData.question) {
toast.error('请填写占卜问题');
return;
}
} else {
if (!formData.name || !formData.birth_date) {
toast.error('请填写姓名和出生日期');
return;
}
}
setLoading(true);
@@ -84,7 +92,12 @@ const AnalysisPage: React.FC = () => {
response = await localApi.analysis.ziwei(birthData);
break;
case 'yijing':
response = await localApi.analysis.yijing(birthData, formData.question);
const yijingData = {
question: formData.question,
user_id: user.id,
divination_method: 'time'
};
response = await localApi.analysis.yijing(yijingData);
break;
default:
throw new Error(`不支持的分析类型: ${analysisType}`);
@@ -190,79 +203,87 @@ const AnalysisPage: React.FC = () => {
</p>
</CardHeader>
<CardContent>
<div className="grid md:grid-cols-2 gap-4 mb-6">
<div className="relative">
<Input
label="姓名 *"
value={formData.name}
onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
required
placeholder="请输入真实姓名"
/>
<User className="absolute right-3 top-8 h-4 w-4 text-gray-400 pointer-events-none" />
</div>
<Select
label="性别 *"
value={formData.gender}
onChange={(e) => setFormData(prev => ({ ...prev, gender: e.target.value as 'male' | 'female' }))}
options={[
{ value: 'male', label: '男性' },
{ value: 'female', label: '女性' }
]}
required
/>
</div>
<div className="grid md:grid-cols-2 gap-4 mb-6">
<div className="relative">
<Input
type="date"
label="出生日期 *"
value={formData.birth_date}
onChange={(e) => setFormData(prev => ({ ...prev, birth_date: e.target.value }))}
required
/>
<Calendar className="absolute right-3 top-8 h-4 w-4 text-gray-400 pointer-events-none" />
</div>
<Input
type="time"
label="出生时间"
value={formData.birth_time}
onChange={(e) => setFormData(prev => ({ ...prev, birth_time: e.target.value }))}
placeholder="选填,但强烈建议填写"
/>
</div>
{analysisType === 'yijing' && (
{analysisType === 'yijing' ? (
// 易经占卜表单
<div className="mb-6">
<Input
label="占卜问题"
label="占卜问题 *"
value={formData.question}
onChange={(e) => setFormData(prev => ({ ...prev, question: e.target.value }))}
placeholder="请输入您希望占卜的具体问题(可选)"
placeholder="请输入您希望占卜的具体问题,如:我的事业发展如何?"
required
/>
<p className="text-sm text-gray-500 mt-2">
💡
</p>
</div>
)}
{analysisType !== 'ziwei' && analysisType !== 'yijing' && (
<div className="mb-6">
<div className="relative">
<Input
label="出生地点"
value={formData.birth_place}
onChange={(e) => setFormData(prev => ({ ...prev, birth_place: e.target.value }))}
placeholder="如:北京市朝阳区(选填)"
) : (
// 八字和紫微表单
<>
<div className="grid md:grid-cols-2 gap-4 mb-6">
<div className="relative">
<Input
label="姓名 *"
value={formData.name}
onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
required
placeholder="请输入真实姓名"
/>
<User className="absolute right-3 top-8 h-4 w-4 text-gray-400 pointer-events-none" />
</div>
<Select
label="性别 *"
value={formData.gender}
onChange={(e) => setFormData(prev => ({ ...prev, gender: e.target.value as 'male' | 'female' }))}
options={[
{ value: 'male', label: '男性' },
{ value: 'female', label: '女性' }
]}
required
/>
<MapPin className="absolute right-3 top-8 h-4 w-4 text-gray-400 pointer-events-none" />
</div>
</div>
<div className="grid md:grid-cols-2 gap-4 mb-6">
<div className="relative">
<Input
type="date"
label="出生日期 *"
value={formData.birth_date}
onChange={(e) => setFormData(prev => ({ ...prev, birth_date: e.target.value }))}
required
/>
<Calendar className="absolute right-3 top-8 h-4 w-4 text-gray-400 pointer-events-none" />
</div>
<Input
type="time"
label="出生时间"
value={formData.birth_time}
onChange={(e) => setFormData(prev => ({ ...prev, birth_time: e.target.value }))}
placeholder="选填,但强烈建议填写"
/>
</div>
{analysisType !== 'ziwei' && (
<div className="mb-6">
<div className="relative">
<Input
label="出生地点"
value={formData.birth_place}
onChange={(e) => setFormData(prev => ({ ...prev, birth_place: e.target.value }))}
placeholder="如:北京市朝阳区(选填)"
/>
<MapPin className="absolute right-3 top-8 h-4 w-4 text-gray-400 pointer-events-none" />
</div>
</div>
)}
</>
)}
<Button
onClick={handleAnalysis}
disabled={loading || !formData.name || !formData.birth_date}
disabled={loading || (analysisType === 'yijing' ? !formData.question : (!formData.name || !formData.birth_date))}
className="w-full"
size="lg"
>
@@ -286,10 +307,13 @@ const AnalysisPage: React.FC = () => {
<AnalysisResultDisplay
analysisResult={analysisResult}
analysisType={analysisType}
birthDate={analysisResult.type === 'bazi' ? {
birthDate={(analysisType === 'bazi' || analysisType === 'ziwei') ? {
date: formData.birth_date,
time: formData.birth_time
} : undefined}
question={analysisType === 'yijing' ? formData.question : undefined}
userId={user?.id}
divinationMethod="time"
/>
)}
</div>