= {
+ alchemy: T.alchemy,
+ enchanting: T.enchanting,
+ smithing: T.smithing,
+ };
+ const accentColor = tabColors[this.selectedRecipe.type as CraftingTab];
+
+ switch (this.selectedRecipe.type) {
+ case 'alchemy': {
+ const recipe = this.selectedRecipe.data as AlchemyRecipe;
+ details.innerHTML = `
+
+
${recipe.name}
+
类型: ${recipe.result.type === 'potion' ? '药水' : '毒药'}
+
+
效果
+ ${recipe.result.effects.map((e) => `
+
+ ${e.type}
+ ${e.magnitude}
+
+ `).join('')}
+
价值: ${recipe.result.value} 金币
+
+ `;
+
+ document.getElementById('craft-btn')?.addEventListener('click', () => {
+ const potion = alchemySystem.brew(recipe.id, playerEntity);
+ if (potion) {
+ eventBus.emit('item:pickup', { entity: playerEntity, itemId: potion.id, quantity: 1 });
+ this.showNotification(`制作了 ${potion.name}`);
+ this.renderRecipeList();
+ }
+ });
+ break;
+ }
+ case 'enchanting': {
+ const enc = this.selectedRecipe.data as Enchantment;
+ details.innerHTML = `
+
+
${enc.name}
+
类型: ${enc.type}
+
+
效果
+ ${enc.effects.map((e) => `
+
+ ${e.type}
+ ${e.magnitude}${e.duration ? ` (${e.duration / 1000}秒)` : ''}
+
+ `).join('')}
+
需要: 灵魂石 + 装备
+ `;
+ break;
+ }
+ case 'smithing': {
+ const recipe = this.selectedRecipe.data as SmithingRecipe;
+ const skills = entityManager.getComponent<{ smithing: number }>(playerEntity.id, 'skills');
+ const smithingLevel = skills?.smithing || 0;
+ const canCraft = smithingSystem.canForge(recipe.id, playerEntity);
+
+ details.innerHTML = `
+
+
${recipe.name}
+
类型: ${recipe.type} | 材质: ${recipe.tier}
+
+ 需要技能:
+ ${recipe.skillRequired}
+ (你有: ${smithingLevel})
+
+
+
材料
+ ${recipe.materials.map((m) => {
+ const inventory = entityManager.getComponent<{ items: any[] }>(playerEntity.id, 'inventory');
+ const owned = inventory?.items.find((i) => i.id === m.id);
+ const count = owned?.quantity || 0;
+ const enough = count >= m.quantity;
+ return `
+
+ ${m.id} x${m.quantity}
+ 你有: ${count} ${enough ? '✓' : '✗'}
+
+ `;
+ }).join('')}
+
+
属性
+ ${recipe.result.damage ? `
伤害: ${recipe.result.damage}
` : ''}
+ ${recipe.result.armor ? `
护甲: ${recipe.result.armor}
` : ''}
+
重量: ${recipe.result.weight} | 价值: ${recipe.result.value}
+
+
+
+
+
${speaker}
+
+
+
+
+
+
+ ${text}
+
+
+
+
+ ${options.map((opt, i) => {
+ let disabled = false;
+ let tooltip = '';
+
+ if (opt.conditions) {
+ for (const cond of opt.conditions) {
+ if (cond.type === 'level' && playerLevel && playerLevel.level < cond.value) {
+ disabled = true;
+ tooltip = `需要等级 ${cond.value}`;
+ }
+ if (cond.type === 'gold') {
+ const inventory = entityManager.getComponent<{ gold: number }>(playerEntity?.id || '', 'inventory');
+ if (!inventory || inventory.gold < cond.value) {
+ disabled = true;
+ tooltip = `需要 ${cond.value} 金币`;
+ }
+ }
+ }
+ }
+
+ if (opt.skillCheck) {
+ const skills = entityManager.getComponent
>(playerEntity?.id || '', 'skills');
+ const skillValue = skills?.[opt.skillCheck.skill] || 0;
+ tooltip = `${opt.skillCheck.skill} 检定 (需要 ${opt.skillCheck.difficulty}, 你有 ${skillValue})`;
+ }
+
+ return `
+
+ `;
+ }).join('')}
+
+
Mod 管理器
+
+
+
+
+ `;
+ this.container.appendChild(header);
+
+ /* ── Validation errors (from last load) ───── */
+ const issues = modLoader.getLastIssues();
+ if (issues.length > 0) {
+ const errorAlert = document.createElement('div');
+ errorAlert.style.cssText = `
+ padding: 14px 16px;
+ background: rgba(200,48,48,0.12);
+ border: 1px solid #8a3030;
+ border-left: 3px solid ${T.danger};
+ border-radius: 3px;
+ margin-bottom: 16px;
+ `;
+ errorAlert.innerHTML = `
+ 校验错误
+
+ ${issues.map((issue) => `
+ -
+ [${issue.severity}]
+ ${issue.code}: ${issue.message}
+
+ `).join('')}
+
+ `;
+ this.container.appendChild(errorAlert);
+ }
+
+ /* ── Conflict detection ───────────────────── */
+ const conflicts = modManager.getConflicts();
+ if (conflicts.length > 0) {
+ const conflictAlert = document.createElement('div');
+ conflictAlert.style.cssText = `
+ padding: 14px 16px;
+ background: rgba(200,160,48,0.1);
+ border: 1px solid #8a7030;
+ border-left: 3px solid ${T.textGold};
+ border-radius: 3px;
+ margin-bottom: 16px;
+ `;
+ conflictAlert.innerHTML = `
+ 冲突检测
+
+ ${conflicts.map((c) => `
+ - ${c}
+ `).join('')}
+
+ `;
+ this.container.appendChild(conflictAlert);
+ }
+
+ /* ── Mod list ─────────────────────────────── */
+ const modList = document.createElement('div');
+ modList.id = 'mod-list';
+ modList.style.cssText = `
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ max-height: calc(100vh - 220px);
+ overflow-y: auto;
+ `;
+
+ const mods = modManager.getModList();
+
+ if (mods.length === 0) {
+ modList.innerHTML = `
+
+
没有已安装的 Mod
+
点击"导入 Mod"按钮添加 .json 格式的 Mod 文件
+
+ ${statusDot}
+ ${mod.manifest.name}
+ v${mod.manifest.version}
+ by ${mod.manifest.author}
+
+ ${mod.manifest.description}
+
+ 优先级: ${mod.manifest.priority} · ID: ${mod.manifest.id}
+ ${mod.manifest.dependencies.length > 0 ? ` · 依赖: ${mod.manifest.dependencies.join(', ')}` : ''}
+
+ ${mod.warnings.length > 0 ? `
+
+ ${mod.warnings.map((w) => `
⚠ ${w.message}
`).join('')}
+
技能树
+
+ `;
+ this.container.appendChild(header);
+
+ /* ── Content ──────────────────────────────── */
+ const content = document.createElement('div');
+ content.style.cssText = `display: flex; height: calc(100% - 70px);`;
+
+ /* Sidebar */
+ const sidebar = document.createElement('div');
+ sidebar.style.cssText = `
+ width: 180px;
+ padding: 16px 12px;
+ border-right: 1px solid ${T.borderDark};
+ overflow-y: auto;
+ background: rgba(0,0,0,0.2);
+ `;
+
+ const categories = [
+ { name: '战斗', skills: ['oneHanded', 'twoHanded', 'archery', 'block', 'heavyArmor', 'smithing'] },
+ { name: '魔法', skills: ['destruction', 'conjuration', 'illusion', 'restoration', 'alteration', 'enchanting'] },
+ { name: '潜行', skills: ['sneak', 'lightArmor', 'lockpicking', 'pickpocket', 'speech', 'alchemy'] },
+ ];
+
+ const skillNames: Record = {
+ oneHanded: '单手武器', twoHanded: '双手武器', archery: '弓箭',
+ block: '格挡', heavyArmor: '重甲', smithing: '锻造',
+ destruction: '毁灭', conjuration: '召唤', illusion: '幻术',
+ restoration: '恢复', alteration: '变化', enchanting: '附魔',
+ sneak: '潜行', lightArmor: '轻甲', lockpicking: '开锁',
+ pickpocket: '扒窃', speech: '口才', alchemy: '炼金',
+ };
+
+ categories.forEach((cat) => {
+ const catTitle = document.createElement('div');
+ catTitle.textContent = cat.name;
+ catTitle.style.cssText = `
+ color: ${T.textGold};
+ font-weight: 600;
+ margin: 14px 0 8px;
+ font-size: 12px;
+ letter-spacing: 2px;
+ text-transform: uppercase;
+ font-family: ${FONT.title};
+ `;
+ sidebar.appendChild(catTitle);
+
+ cat.skills.forEach((skillId) => {
+ const skillBtn = document.createElement('button');
+ skillBtn.textContent = skillNames[skillId] || skillId;
+ skillBtn.style.cssText = `
+ display: block;
+ width: 100%;
+ padding: 7px 10px;
+ margin: 2px 0;
+ background: transparent;
+ border: 1px solid transparent;
+ border-radius: 3px;
+ color: ${T.textMuted};
+ cursor: pointer;
+ text-align: left;
+ font-size: 13px;
+ font-family: ${FONT.body};
+ transition: all 0.15s;
+ `;
+ skillBtn.addEventListener('mouseenter', () => {
+ skillBtn.style.background = 'rgba(255,255,255,0.04)';
+ skillBtn.style.color = T.textLight;
+ skillBtn.style.borderColor = T.borderDark;
+ });
+ skillBtn.addEventListener('mouseleave', () => {
+ skillBtn.style.background = 'transparent';
+ skillBtn.style.color = T.textMuted;
+ skillBtn.style.borderColor = 'transparent';
+ });
+ skillBtn.addEventListener('click', () => this.selectSkill(skillId));
+ sidebar.appendChild(skillBtn);
+ });
+ });
+ content.appendChild(sidebar);
+
+ /* Tree panel */
+ const treePanel = document.createElement('div');
+ treePanel.id = 'tree-panel';
+ treePanel.style.cssText = `
+ flex: 1;
+ padding: 30px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ `;
+ treePanel.innerHTML = `选择一个技能查看天赋树
`;
+ content.appendChild(treePanel);
+
+ this.container.appendChild(content);
+ this.updatePerkPoints();
+ }
+
+ private selectSkill(skillId: string): void {
+ this.currentSkill = skillId;
+ const treePanel = document.getElementById('tree-panel');
+ if (!treePanel) return;
+
+ const treeData = dataRegistry.getPerkTree(skillId);
+ if (!treeData) {
+ treePanel.innerHTML = `该技能天赋树尚未实现
`;
+ return;
+ }
+
+ treePanel.innerHTML = `
+ ${treeData.name}
+
+ `;
+
+ const perkGrid = document.getElementById('perk-grid');
+ if (!perkGrid) return;
+
+ treeData.perks.forEach((perk) => {
+ perkGrid.appendChild(this.createPerkNode(perk));
+ });
+ }
+
+ private createPerkNode(perk: PerkData): HTMLDivElement {
+ const node = document.createElement('div');
+ node.style.cssText = `
+ padding: 14px 24px;
+ background: rgba(255,255,255,0.04);
+ border: 1px solid ${T.borderIron};
+ border-radius: 3px;
+ cursor: pointer;
+ transition: all 0.15s;
+ min-width: 220px;
+ text-align: center;
+ `;
+
+ node.innerHTML = `
+ ${perk.name}
+ ${perk.description}
+ 等级: ${perk.rank}/${perk.maxRank}
+ `;
+
+ node.addEventListener('mouseenter', () => {
+ node.style.borderColor = T.borderGold;
+ node.style.background = 'rgba(212,168,67,0.06)';
+ });
+ node.addEventListener('mouseleave', () => {
+ node.style.borderColor = T.borderIron;
+ node.style.background = 'rgba(255,255,255,0.04)';
+ });
+ node.addEventListener('click', () => this.unlockPerk(perk));
+
+ return node;
+ }
+
+ private unlockPerk(perk: PerkData): void {
+ const player = entityManager.getEntitiesByType('player')[0];
+ if (!player) return;
+
+ const level = entityManager.getComponent<{ level: number; perkPoints: number }>(player.id, 'level');
+ if (!level || level.perkPoints <= 0) {
+ alert('没有可用的天赋点！');
+ return;
+ }
+
+ level.perkPoints -= 1;
+ eventBus.emit('perk:unlocked', { entityId: player.id, perkId: perk.id });
+ this.updatePerkPoints();
+
+ if (this.currentSkill) {
+ this.selectSkill(this.currentSkill);
+ }
+ }
+
+ private updatePerkPoints(): void {
+ const player = entityManager.getEntitiesByType('player')[0];
+ const pointsEl = document.getElementById('perk-points');
+ if (!player || !pointsEl) return;
+
+ const level = entityManager.getComponent<{ perkPoints: number }>(player.id, 'level');
+ pointsEl.textContent = `天赋点: ${level?.perkPoints || 0}`;
+ }
+}
+
+export const skillTreeUI = new SkillTreeUI();
diff --git a/src/ui/components/WorldMapUI.ts b/src/ui/components/WorldMapUI.ts
new file mode 100644
index 0000000..dee044d
--- /dev/null
+++ b/src/ui/components/WorldMapUI.ts
@@ -0,0 +1,313 @@
+import { eventBus } from '../../core/EventBus';
+import { T, FONT, goldTitleStyle, panelStyle } from '../theme';
+
+export interface MapLocation {
+ id: string;
+ name: string;
+ description: string;
+ x: number;
+ y: number;
+ discovered: boolean;
+ type: 'city' | 'town' | 'village' | 'dungeon' | 'camp' | 'landmark';
+}
+
+export class WorldMapUI {
+ private static instance: WorldMapUI;
+ private container: HTMLDivElement;
+ private isOpen: boolean = false;
+ private locations: MapLocation[] = [];
+ private selectedLocation: MapLocation | null = null;
+
+ static getInstance(): WorldMapUI {
+ if (!WorldMapUI.instance) {
+ WorldMapUI.instance = new WorldMapUI();
+ }
+ return WorldMapUI.instance;
+ }
+
+ constructor() {
+ this.container = document.createElement('div');
+ this.container.id = 'world-map';
+ this.container.style.cssText = `
+ position: fixed;
+ inset: 0;
+ background: ${T.bgOverlay};
+ display: none;
+ z-index: 500;
+ font-family: ${FONT.body};
+ color: ${T.textLight};
+ `;
+ this.initializeLocations();
+ }
+
+ private initializeLocations(): void {
+ this.locations = [
+ { id: 'whiterun', name: '雪漫城', description: '天际省的首府', x: 400, y: 300, discovered: true, type: 'city' },
+ { id: 'whiterun_exterior', name: '雪漫城外', description: '雪漫城周围的平原', x: 400, y: 350, discovered: true, type: 'landmark' },
+ { id: 'bleakfalls_barrow', name: '荒瀑古坟', description: '古老的诺德遗迹', x: 500, y: 250, discovered: false, type: 'dungeon' },
+ { id: 'riverwood', name: '河木镇', description: '宁静的河边小镇', x: 300, y: 400, discovered: false, type: 'town' },
+ { id: 'windhelm', name: '风盔城', description: '古老的诺德城市', x: 600, y: 200, discovered: false, type: 'city' },
+ { id: 'solitude', name: '独孤城', description: '帝国在天际的首都', x: 200, y: 150, discovered: false, type: 'city' },
+ { id: 'riften', name: '裂谷城', description: '盗贼公会的据点', x: 550, y: 450, discovered: false, type: 'city' },
+ { id: 'markarth', name: '马卡斯城', description: '古老的矮人城市', x: 150, y: 350, discovered: false, type: 'city' },
+ { id: 'dark_brotherhood', name: '黑暗兄弟会', description: '暗杀组织的藏身处', x: 350, y: 200, discovered: false, type: 'dungeon' },
+ { id: 'college_of_winterhold', name: '冬堡学院', description: '魔法学院', x: 550, y: 100, discovered: false, type: 'landmark' },
+ { id: 'thieves_guild', name: '盗贼公会', description: '盗贼的地下总部', x: 560, y: 440, discovered: false, type: 'dungeon' },
+ ];
+ }
+
+ show(): void {
+ this.isOpen = true;
+ this.container.style.display = 'block';
+ this.render();
+ document.body.appendChild(this.container);
+ }
+
+ hide(): void {
+ this.isOpen = false;
+ this.container.style.display = 'none';
+ }
+
+ toggle(): void {
+ if (this.isOpen) {
+ this.hide();
+ } else {
+ this.show();
+ }
+ }
+
+ discoverLocation(locationId: string): void {
+ const location = this.locations.find((l) => l.id === locationId);
+ if (location) {
+ location.discovered = true;
+ }
+ }
+
+ private render(): void {
+ this.container.innerHTML = `
+
+ `;
+
+ this.renderMap();
+ this.renderLocationList();
+
+ document.getElementById('close-map')?.addEventListener('click', () => this.hide());
+ }
+
+ private renderMap(): void {
+ const canvas = document.getElementById('map-canvas') as HTMLCanvasElement;
+ if (!canvas) return;
+
+ const ctx = canvas.getContext('2d');
+ if (!ctx) return;
+
+ /* Background */
+ const grad = ctx.createRadialGradient(350, 250, 50, 350, 250, 400);
+ grad.addColorStop(0, '#1a1828');
+ grad.addColorStop(1, '#0e0c16');
+ ctx.fillStyle = grad;
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ /* Grid */
+ ctx.strokeStyle = 'rgba(74,106,30,0.08)';
+ ctx.lineWidth = 1;
+ for (let x = 0; x < canvas.width; x += 50) {
+ ctx.beginPath();
+ ctx.moveTo(x, 0);
+ ctx.lineTo(x, canvas.height);
+ ctx.stroke();
+ }
+ for (let y = 0; y < canvas.height; y += 50) {
+ ctx.beginPath();
+ ctx.moveTo(0, y);
+ ctx.lineTo(canvas.width, y);
+ ctx.stroke();
+ }
+
+ /* Roads */
+ const roads = [
+ { from: 'whiterun', to: 'whiterun_exterior' },
+ { from: 'whiterun_exterior', to: 'bleakfalls_barrow' },
+ { from: 'whiterun', to: 'riverwood' },
+ { from: 'whiterun', to: 'windhelm' },
+ { from: 'whiterun', to: 'solitude' },
+ { from: 'whiterun', to: 'riften' },
+ { from: 'whiterun', to: 'markarth' },
+ ];
+
+ ctx.strokeStyle = 'rgba(138,128,112,0.3)';
+ ctx.lineWidth = 2;
+ ctx.setLineDash([6, 4]);
+ for (const road of roads) {
+ const from = this.locations.find((l) => l.id === road.from);
+ const to = this.locations.find((l) => l.id === road.to);
+ if (from && to && from.discovered && to.discovered) {
+ ctx.beginPath();
+ ctx.moveTo(from.x, from.y);
+ ctx.lineTo(to.x, to.y);
+ ctx.stroke();
+ }
+ }
+ ctx.setLineDash([]);
+
+ /* Locations */
+ for (const location of this.locations) {
+ if (!location.discovered) continue;
+
+ const color = this.getLocationColor(location.type);
+ const isSelected = this.selectedLocation?.id === location.id;
+
+ /* Glow for selected */
+ if (isSelected) {
+ ctx.fillStyle = color + '30';
+ ctx.beginPath();
+ ctx.arc(location.x, location.y, 16, 0, Math.PI * 2);
+ ctx.fill();
+ }
+
+ /* Dot */
+ ctx.fillStyle = color;
+ ctx.beginPath();
+ ctx.arc(location.x, location.y, isSelected ? 7 : 5, 0, Math.PI * 2);
+ ctx.fill();
+
+ ctx.strokeStyle = '#f0e8d8';
+ ctx.lineWidth = isSelected ? 2 : 1;
+ ctx.stroke();
+
+ /* Label */
+ ctx.fillStyle = isSelected ? '#f0e8d8' : '#a09888';
+ ctx.font = `${isSelected ? 'bold ' : ''}11px "${FONT.body}"`;
+ ctx.textAlign = 'center';
+ ctx.fillText(location.name, location.x, location.y + 18);
+ }
+
+ /* Click handler */
+ canvas.onclick = (e) => {
+ const rect = canvas.getBoundingClientRect();
+ const x = e.clientX - rect.left;
+ const y = e.clientY - rect.top;
+
+ for (const location of this.locations) {
+ if (!location.discovered) continue;
+ const dx = x - location.x;
+ const dy = y - location.y;
+ if (Math.sqrt(dx * dx + dy * dy) <= 15) {
+ this.selectedLocation = location;
+ this.renderMap();
+ this.renderLocationDetails();
+ break;
+ }
+ }
+ };
+ }
+
+ private getLocationColor(type: MapLocation['type']): string {
+ const colors: Record = {
+ city: T.textGold,
+ town: T.enchanting,
+ village: T.success,
+ dungeon: T.danger,
+ camp: T.smithing,
+ landmark: '#8060c0',
+ };
+ return colors[type] || '#ffffff';
+ }
+
+ private renderLocationList(): void {
+ const list = document.getElementById('location-list');
+ if (!list) return;
+
+ list.innerHTML = '';
+
+ const discovered = this.locations.filter((l) => l.discovered);
+ for (const location of discovered) {
+ const item = document.createElement('div');
+ const isSelected = this.selectedLocation?.id === location.id;
+ item.style.cssText = `
+ padding: 8px 10px;
+ background: ${isSelected ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.02)'};
+ border: 1px solid ${isSelected ? T.borderBronze : T.borderDark};
+ border-radius: 3px;
+ cursor: pointer;
+ transition: all 0.15s;
+ `;
+ item.innerHTML = `
+ ${location.name}
+ ${location.description}
+ `;
+ item.addEventListener('mouseenter', () => {
+ if (!isSelected) item.style.borderColor = T.borderBronze;
+ });
+ item.addEventListener('mouseleave', () => {
+ if (!isSelected) item.style.borderColor = T.borderDark;
+ });
+ item.addEventListener('click', () => {
+ this.selectedLocation = location;
+ this.renderLocationList();
+ this.renderLocationDetails();
+ this.renderMap();
+ });
+ list.appendChild(item);
+ }
+ }
+
+ private renderLocationDetails(): void {
+ const details = document.getElementById('location-details');
+ if (!details || !this.selectedLocation) {
+ if (details) details.innerHTML = `点击地图或列表选择地点
`;
+ return;
+ }
+
+ const loc = this.selectedLocation;
+ details.innerHTML = `
+
+
${loc.name}
+
${loc.description}
+
类型: ${loc.type}
+