\u6295\u8cc7\u7d44\u5408\u518d\u5e73\u8861\u8a08\u7b97\u5de5\u5177<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.0\/dist\/chart.umd.min.js\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');\n body { font-family: 'Noto Sans TC', sans-serif; }\n <\/style>\n<\/head>\n<body class=\"bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen py-8 px-4\">\n <div class=\"max-w-6xl mx-auto\">\n \n <div class=\"text-center mb-8\">\n <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">\ud83d\udcca \u6295\u8cc7\u7d44\u5408\u518d\u5e73\u8861\u8a08\u7b97\u5de5\u5177<\/h1>\n <p class=\"text-gray-600\">\u8f15\u9b06\u7ba1\u7406\u60a8\u7684\u8cc7\u7522\u914d\u7f6e<\/p>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-2xl p-8 mb-6\">\n \n <div class=\"mb-6\">\n <label class=\"block text-lg font-semibold text-gray-700 mb-3\">\u8a08\u7b97\u6a21\u5f0f<\/label>\n <div class=\"flex gap-4\">\n <button id=\"normalMode\" class=\"mode-btn flex-1 py-3 px-6 rounded-lg font-medium transition-all bg-indigo-600 text-white shadow-lg\">\n \u4e00\u822c\u518d\u5e73\u8861\uff08\u53ef\u8cb7\u53ef\u8ce3\uff09\n <\/button>\n <button id=\"addOnlyMode\" class=\"mode-btn flex-1 py-3 px-6 rounded-lg font-medium transition-all bg-gray-200 text-gray-700 hover:bg-gray-300\">\n \u52a0\u78bc\u518d\u5e73\u8861\uff08\u53ea\u8cb7\u4e0d\u8ce3\uff09\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"mb-6\">\n <div class=\"flex justify-between items-center mb-3\">\n <label class=\"text-lg font-semibold text-gray-700\">\u8cc7\u7522\u914d\u7f6e<\/label>\n <button id=\"addAsset\" class=\"bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg font-medium transition-all\">\n \u2795 \u65b0\u589e\u8cc7\u7522\n <\/button>\n <\/div>\n \n <div id=\"assetList\" class=\"space-y-3\">\n \n <\/div>\n \n <div id=\"totalPercentage\" class=\"mt-3 text-right text-sm font-medium\">\n <span class=\"text-gray-600\">\u76ee\u6a19\u6bd4\u4f8b\u7e3d\u548c\uff1a<\/span>\n <span id=\"totalPercent\" class=\"text-lg font-bold text-indigo-600\">0%<\/span>\n <\/div>\n <\/div>\n\n \n <button id=\"calculateBtn\" class=\"w-full bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white py-4 rounded-xl font-bold text-lg shadow-lg transition-all transform hover:scale-105\">\n \ud83e\uddee \u958b\u59cb\u8a08\u7b97\n <\/button>\n <\/div>\n\n \n <div id=\"resultSection\" class=\"hidden\">\n \n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-4 mb-6\">\n <div class=\"bg-white rounded-xl shadow-lg p-6\">\n <div class=\"text-sm text-gray-600 mb-1\">\u7e3d\u8cc7\u7522<\/div>\n <div id=\"totalAsset\" class=\"text-2xl font-bold text-indigo-600\">$0<\/div>\n <\/div>\n <div class=\"bg-white rounded-xl shadow-lg p-6\">\n <div class=\"text-sm text-gray-600 mb-1\">\u6700\u5927\u504f\u5dee<\/div>\n <div id=\"maxDeviation\" class=\"text-2xl font-bold text-orange-600\">0%<\/div>\n <\/div>\n <div class=\"bg-white rounded-xl shadow-lg p-6\">\n <div class=\"text-sm text-gray-600 mb-1\">\u9700\u52a0\u78bc\u91d1\u984d<\/div>\n <div id=\"buyAmount\" class=\"text-2xl font-bold text-green-600\">$0<\/div>\n <\/div>\n <div class=\"bg-white rounded-xl shadow-lg p-6\">\n <div class=\"text-sm text-gray-600 mb-1\">\u53ef\u6e1b\u78bc\u91d1\u984d<\/div>\n <div id=\"sellAmount\" class=\"text-2xl font-bold text-red-600\">$0<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-2xl p-8 mb-6\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-6\">\u914d\u7f6e\u5c0d\u6bd4\u5716<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n <div>\n <h3 class=\"text-center font-semibold text-gray-700 mb-4\">\u518d\u5e73\u8861\u524d<\/h3>\n <canvas id=\"beforeChart\"><\/canvas>\n <\/div>\n <div>\n <h3 class=\"text-center font-semibold text-gray-700 mb-4\">\u518d\u5e73\u8861\u5f8c<\/h3>\n <canvas id=\"afterChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-2xl p-6\">\n <h2 class=\"text-xl font-bold text-gray-800 mb-4\">\u8a73\u7d30\u8abf\u6574\u660e\u7d30<\/h2>\n <div class=\"overflow-x-auto\">\n <table class=\"w-full text-sm\">\n <thead>\n <tr class=\"bg-gray-100\">\n <th class=\"px-3 py-2 text-left font-semibold text-gray-700\">\u8cc7\u7522\u540d\u7a31<\/th>\n <th class=\"px-3 py-2 text-right font-semibold text-gray-700\">\u73fe\u6709\u91d1\u984d<\/th>\n <th class=\"px-3 py-2 text-right font-semibold text-gray-700\">\u73fe\u6709\u6bd4\u4f8b<\/th>\n <th class=\"px-3 py-2 text-right font-semibold text-gray-700\">\u76ee\u6a19\u6bd4\u4f8b<\/th>\n <th class=\"px-3 py-2 text-right font-semibold text-gray-700\">\u504f\u5dee<\/th>\n <th class=\"px-3 py-2 text-right font-semibold text-gray-700\">\u76ee\u6a19\u91d1\u984d<\/th>\n <th class=\"px-3 py-2 text-right font-semibold text-gray-700\">\u8abf\u6574\u91d1\u984d<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"resultTable\">\n \n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n let mode = 'normal'; \/\/ 'normal' or 'addOnly'\n let assets = [];\n let assetIdCounter = 0;\n\n \/\/ \u521d\u59cb\u5316\n function init() {\n addAssetRow();\n addAssetRow();\n addAssetRow();\n updateTotalPercentage();\n }\n\n \/\/ \u6a21\u5f0f\u5207\u63db\n document.getElementById('normalMode').addEventListener('click', () => {\n mode = 'normal';\n document.getElementById('normalMode').className = 'mode-btn flex-1 py-3 px-6 rounded-lg font-medium transition-all bg-indigo-600 text-white shadow-lg';\n document.getElementById('addOnlyMode').className = 'mode-btn flex-1 py-3 px-6 rounded-lg font-medium transition-all bg-gray-200 text-gray-700 hover:bg-gray-300';\n });\n\n document.getElementById('addOnlyMode').addEventListener('click', () => {\n mode = 'addOnly';\n document.getElementById('addOnlyMode').className = 'mode-btn flex-1 py-3 px-6 rounded-lg font-medium transition-all bg-indigo-600 text-white shadow-lg';\n document.getElementById('normalMode').className = 'mode-btn flex-1 py-3 px-6 rounded-lg font-medium transition-all bg-gray-200 text-gray-700 hover:bg-gray-300';\n });\n\n \/\/ \u65b0\u589e\u8cc7\u7522\u884c\n document.getElementById('addAsset').addEventListener('click', addAssetRow);\n\n function addAssetRow() {\n const id = assetIdCounter++;\n const assetDiv = document.createElement('div');\n assetDiv.className = 'flex gap-3 items-center bg-gray-50 p-4 rounded-lg';\n assetDiv.dataset.id = id;\n \n assetDiv.innerHTML = `\n <input type=\"text\" placeholder=\"\u8cc7\u7522\u540d\u7a31\" class=\"asset-name w-28 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm\">\n <input type=\"number\" placeholder=\"\u73fe\u6709\u91d1\u984d\" class=\"asset-amount w-36 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm\" min=\"0\" step=\"0.01\">\n <div class=\"flex items-center gap-2 w-24\">\n <input type=\"number\" placeholder=\"\u6bd4\u4f8b\" class=\"asset-target w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm\" min=\"0\" max=\"100\" step=\"0.1\">\n <span class=\"text-gray-600 font-medium text-sm\">%<\/span>\n <\/div>\n <button class=\"delete-btn bg-red-500 hover:bg-red-600 text-white px-3 py-2 rounded-lg font-medium transition-all text-sm\" onclick=\"deleteAsset(${id})\">\n \ud83d\uddd1\ufe0f\n <\/button>\n `;\n \n document.getElementById('assetList').appendChild(assetDiv);\n \n \/\/ \u6dfb\u52a0\u8f38\u5165\u76e3\u807d\n assetDiv.querySelector('.asset-target').addEventListener('input', updateTotalPercentage);\n }\n\n function deleteAsset(id) {\n const assetDiv = document.querySelector(`[data-id=\"${id}\"]`);\n if (document.getElementById('assetList').children.length > 1) {\n assetDiv.remove();\n updateTotalPercentage();\n } else {\n alert('\u81f3\u5c11\u9700\u8981\u4fdd\u7559\u4e00\u9805\u8cc7\u7522\uff01');\n }\n }\n\n function updateTotalPercentage() {\n const targets = document.querySelectorAll('.asset-target');\n let total = 0;\n targets.forEach(input => {\n total += parseFloat(input.value) || 0;\n });\n const totalSpan = document.getElementById('totalPercent');\n totalSpan.textContent = total.toFixed(1) + '%';\n totalSpan.className = total === 100 ? 'text-lg font-bold text-green-600' : 'text-lg font-bold text-red-600';\n }\n\n \/\/ \u8a08\u7b97\u529f\u80fd\n document.getElementById('calculateBtn').addEventListener('click', calculate);\n\n function calculate() {\n \/\/ \u6536\u96c6\u8cc7\u7522\u6578\u64da\n assets = [];\n const assetDivs = document.querySelectorAll('#assetList > div');\n \n assetDivs.forEach(div => {\n const name = div.querySelector('.asset-name').value.trim();\n const amount = parseFloat(div.querySelector('.asset-amount').value) || 0;\n const target = parseFloat(div.querySelector('.asset-target').value) || 0;\n \n if (name && amount >= 0 && target >= 0) {\n assets.push({ name, amount, target });\n }\n });\n\n if (assets.length === 0) {\n alert('\u8acb\u81f3\u5c11\u8f38\u5165\u4e00\u9805\u6709\u6548\u8cc7\u7522\uff01');\n return;\n }\n\n const totalTarget = assets.reduce((sum, a) => sum + a.target, 0);\n if (Math.abs(totalTarget - 100) > 0.1) {\n alert('\u76ee\u6a19\u6bd4\u4f8b\u7e3d\u548c\u5fc5\u9808\u70ba 100%\uff01');\n return;\n }\n\n \/\/ \u8a08\u7b97\u7e3d\u8cc7\u7522\n const totalAsset = assets.reduce((sum, a) => sum + a.amount, 0);\n \n if (totalAsset === 0) {\n alert('\u7e3d\u8cc7\u7522\u4e0d\u80fd\u70ba 0\uff01');\n return;\n }\n\n \/\/ \u6839\u64da\u6a21\u5f0f\u8a08\u7b97\n let results;\n if (mode === 'normal') {\n results = calculateNormal(assets, totalAsset);\n } else {\n results = calculateAddOnly(assets, totalAsset);\n }\n\n \/\/ \u986f\u793a\u7d50\u679c\n displayResults(results);\n }\n\n function calculateNormal(assets, totalAsset) {\n const results = assets.map(asset => {\n const currentPercent = (asset.amount \/ totalAsset) * 100;\n const targetAmount = totalAsset * (asset.target \/ 100);\n const adjustment = targetAmount - asset.amount;\n const deviation = currentPercent - asset.target;\n \n return {\n name: asset.name,\n currentAmount: asset.amount,\n currentPercent: currentPercent,\n targetPercent: asset.target,\n targetAmount: targetAmount,\n adjustment: adjustment,\n deviation: deviation\n };\n });\n\n return {\n totalAsset: totalAsset,\n newTotalAsset: totalAsset,\n results: results\n };\n }\n\n function calculateAddOnly(assets, totalAsset) {\n \/\/ \u627e\u51fa\u8d85\u914d\u6700\u56b4\u91cd\u7684\u8cc7\u7522\n let maxOverweight = -Infinity;\n let maxOverweightAsset = null;\n \n assets.forEach(asset => {\n const currentPercent = (asset.amount \/ totalAsset) * 100;\n const overweight = currentPercent - asset.target;\n if (overweight > maxOverweight) {\n maxOverweight = overweight;\n maxOverweightAsset = asset;\n }\n });\n\n \/\/ \u4ee5\u8d85\u914d\u6700\u56b4\u91cd\u7684\u8cc7\u7522\u70ba\u57fa\u6e96\uff0c\u8a08\u7b97\u65b0\u7684\u7e3d\u8cc7\u7522\n const newTotalAsset = maxOverweightAsset.amount \/ (maxOverweightAsset.target \/ 100);\n\n const results = assets.map(asset => {\n const currentPercent = (asset.amount \/ totalAsset) * 100;\n const targetAmount = newTotalAsset * (asset.target \/ 100);\n const adjustment = Math.max(0, targetAmount - asset.amount); \/\/ \u53ea\u8cb7\u4e0d\u8ce3\n const deviation = currentPercent - asset.target;\n \n return {\n name: asset.name,\n currentAmount: asset.amount,\n currentPercent: currentPercent,\n targetPercent: asset.target,\n targetAmount: targetAmount,\n adjustment: adjustment,\n deviation: deviation\n };\n });\n\n return {\n totalAsset: totalAsset,\n newTotalAsset: newTotalAsset,\n results: results\n };\n }\n\n function displayResults(data) {\n const { totalAsset, newTotalAsset, results } = data;\n\n \/\/ \u66f4\u65b0\u6458\u8981\u5361\u7247\n document.getElementById('totalAsset').textContent = '$' + totalAsset.toLocaleString('zh-TW', {maximumFractionDigits: 0});\n \n const maxDev = Math.max(...results.map(r => Math.abs(r.deviation)));\n document.getElementById('maxDeviation').textContent = maxDev.toFixed(2) + '%';\n \n const totalBuy = results.reduce((sum, r) => sum + Math.max(0, r.adjustment), 0);\n const totalSell = results.reduce((sum, r) => sum + Math.abs(Math.min(0, r.adjustment)), 0);\n \n document.getElementById('buyAmount').textContent = '$' + totalBuy.toLocaleString('zh-TW', {maximumFractionDigits: 0});\n document.getElementById('sellAmount').textContent = mode === 'addOnly' ? '$0' : '$' + totalSell.toLocaleString('zh-TW', {maximumFractionDigits: 0});\n\n \/\/ \u66f4\u65b0\u8868\u683c\n const tbody = document.getElementById('resultTable');\n tbody.innerHTML = '';\n \n results.forEach(r => {\n const row = document.createElement('tr');\n row.className = 'border-b hover:bg-gray-50';\n \n const adjustmentClass = r.adjustment > 0 ? 'text-green-600' : r.adjustment < 0 ? 'text-red-600' : 'text-gray-600';\n const adjustmentText = r.adjustment > 0 ? '+' + r.adjustment.toLocaleString('zh-TW', {maximumFractionDigits: 0}) : r.adjustment.toLocaleString('zh-TW', {maximumFractionDigits: 0});\n \n const deviationClass = Math.abs(r.deviation) < 0.5 ? 'text-green-600' : Math.abs(r.deviation) < 2 ? 'text-orange-600' : 'text-red-600';\n \n row.innerHTML = `\n <td class=\"px-3 py-2 font-medium text-gray-800\">${r.name}<\/td>\n <td class=\"px-3 py-2 text-right text-gray-700\">$${r.currentAmount.toLocaleString('zh-TW', {maximumFractionDigits: 0})}<\/td>\n <td class=\"px-3 py-2 text-right text-gray-700\">${r.currentPercent.toFixed(2)}%<\/td>\n <td class=\"px-3 py-2 text-right text-gray-700\">${r.targetPercent.toFixed(2)}%<\/td>\n <td class=\"px-3 py-2 text-right font-medium ${deviationClass}\">${r.deviation > 0 ? '+' : ''}${r.deviation.toFixed(2)}%<\/td>\n <td class=\"px-3 py-2 text-right text-gray-700\">$${r.targetAmount.toLocaleString('zh-TW', {maximumFractionDigits: 0})}<\/td>\n <td class=\"px-3 py-2 text-right font-bold ${adjustmentClass}\">$${adjustmentText}<\/td>\n `;\n \n tbody.appendChild(row);\n });\n\n \/\/ \u7e6a\u88fd\u5716\u8868\n drawCharts(results, totalAsset, newTotalAsset);\n\n \/\/ \u986f\u793a\u7d50\u679c\u5340\u57df\n document.getElementById('resultSection').classList.remove('hidden');\n document.getElementById('resultSection').scrollIntoView({ behavior: 'smooth' });\n }\n\n let beforeChart, afterChart;\n\n function drawCharts(results, totalAsset, newTotalAsset) {\n const colors = [\n '#6366f1', '#ec4899', '#f59e0b', '#10b981', '#8b5cf6',\n '#ef4444', '#06b6d4', '#84cc16', '#f97316', '#14b8a6'\n ];\n\n \/\/ \u92b7\u6bc0\u820a\u5716\u8868\n if (beforeChart) beforeChart.destroy();\n if (afterChart) afterChart.destroy();\n\n \/\/ \u518d\u5e73\u8861\u524d\n const beforeCtx = document.getElementById('beforeChart').getContext('2d');\n beforeChart = new Chart(beforeCtx, {\n type: 'pie',\n data: {\n labels: results.map(r => r.name),\n datasets: [{\n data: results.map(r => r.currentAmount),\n backgroundColor: colors.slice(0, results.length)\n }]\n },\n options: {\n responsive: true,\n plugins: {\n legend: { position: 'bottom' },\n tooltip: {\n callbacks: {\n label: function(context) {\n const label = context.label || '';\n const value = context.parsed || 0;\n const percent = ((value \/ totalAsset) * 100).toFixed(2);\n return `${label}: $${value.toLocaleString('zh-TW', {maximumFractionDigits: 0})} (${percent}%)`;\n }\n }\n }\n }\n }\n });\n\n \/\/ \u518d\u5e73\u8861\u5f8c\n const afterCtx = document.getElementById('afterChart').getContext('2d');\n afterChart = new Chart(afterCtx, {\n type: 'pie',\n data: {\n labels: results.map(r => r.name),\n datasets: [{\n data: results.map(r => r.targetAmount),\n backgroundColor: colors.slice(0, results.length)\n }]\n },\n options: {\n responsive: true,\n plugins: {\n legend: { position: 'bottom' },\n tooltip: {\n callbacks: {\n label: function(context) {\n const label = context.label || '';\n const value = context.parsed || 0;\n const percent = ((value \/ newTotalAsset) * 100).toFixed(2);\n return `${label}: $${value.toLocaleString('zh-TW', {maximumFractionDigits: 0})} (${percent}%)`;\n }\n }\n }\n }\n }\n });\n }\n\n \/\/ \u521d\u59cb\u5316\n init();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u6295\u8cc7\u7d44\u5408\u518d\u5e73\u8861\u8a08\u7b97\u5de5\u5177 \ud83d\udcca \u6295\u8cc7\u7d44\u5408\u518d\u5e73\u8861\u8a08\u7b97\u5de5\u5177 \u8f15\u9b06\u7ba1\u7406\u60a8\u7684\u8cc7\u7522\u914d\u7f6e \u8a08\u7b97\u6a21 … <a href=\"https:\/\/hsiang.cc\/?page_id=747\">\u95b1\u8b80\u5168\u6587 <span class=\"meta-nav\">→<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-747","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hsiang.cc\/index.php?rest_route=\/wp\/v2\/pages\/747","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hsiang.cc\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hsiang.cc\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hsiang.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hsiang.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=747"}],"version-history":[{"count":1,"href":"https:\/\/hsiang.cc\/index.php?rest_route=\/wp\/v2\/pages\/747\/revisions"}],"predecessor-version":[{"id":748,"href":"https:\/\/hsiang.cc\/index.php?rest_route=\/wp\/v2\/pages\/747\/revisions\/748"}],"wp:attachment":[{"href":"https:\/\/hsiang.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":747,"date":"2026-01-02T16:59:26","date_gmt":"2026-01-02T08:59:26","guid":{"rendered":"https:\/\/hsiang.cc\/?page_id=747"},"modified":"2026-01-02T16:59:26","modified_gmt":"2026-01-02T08:59:26","slug":"%e6%8a%95%e8%b3%87%e7%b5%84%e5%90%88%e5%86%8d%e5%b9%b3%e8%a1%a1%e8%a8%88%e7%ae%97%e5%b7%a5%e5%85%b7","status":"publish","type":"page","link":"https:\/\/hsiang.cc\/?page_id=747","title":{"rendered":"\u6295\u8cc7\u7d44\u5408\u518d\u5e73\u8861\u8a08\u7b97\u5de5\u5177"},"content":{"rendered":"\n\n\n\n \n \n \u6295\u8cc7\u7d44\u5408\u518d\u5e73\u8861\u8a08\u7b97\u5de5\u5177<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.0\/dist\/chart.umd.min.js\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');\n body { font-family: 'Noto Sans TC', sans-serif; }\n <\/style>\n<\/head>\n<body class=\"bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen py-8 px-4\">\n <div class=\"max-w-6xl mx-auto\">\n \n <div class=\"text-center mb-8\">\n <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">\ud83d\udcca \u6295\u8cc7\u7d44\u5408\u518d\u5e73\u8861\u8a08\u7b97\u5de5\u5177<\/h1>\n <p class=\"text-gray-600\">\u8f15\u9b06\u7ba1\u7406\u60a8\u7684\u8cc7\u7522\u914d\u7f6e<\/p>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-2xl p-8 mb-6\">\n \n <div class=\"mb-6\">\n <label class=\"block text-lg font-semibold text-gray-700 mb-3\">\u8a08\u7b97\u6a21\u5f0f<\/label>\n <div class=\"flex gap-4\">\n <button id=\"normalMode\" class=\"mode-btn flex-1 py-3 px-6 rounded-lg font-medium transition-all bg-indigo-600 text-white shadow-lg\">\n \u4e00\u822c\u518d\u5e73\u8861\uff08\u53ef\u8cb7\u53ef\u8ce3\uff09\n <\/button>\n <button id=\"addOnlyMode\" class=\"mode-btn flex-1 py-3 px-6 rounded-lg font-medium transition-all bg-gray-200 text-gray-700 hover:bg-gray-300\">\n \u52a0\u78bc\u518d\u5e73\u8861\uff08\u53ea\u8cb7\u4e0d\u8ce3\uff09\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"mb-6\">\n <div class=\"flex justify-between items-center mb-3\">\n <label class=\"text-lg font-semibold text-gray-700\">\u8cc7\u7522\u914d\u7f6e<\/label>\n <button id=\"addAsset\" class=\"bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg font-medium transition-all\">\n \u2795 \u65b0\u589e\u8cc7\u7522\n <\/button>\n <\/div>\n \n <div id=\"assetList\" class=\"space-y-3\">\n \n <\/div>\n \n <div id=\"totalPercentage\" class=\"mt-3 text-right text-sm font-medium\">\n <span class=\"text-gray-600\">\u76ee\u6a19\u6bd4\u4f8b\u7e3d\u548c\uff1a<\/span>\n <span id=\"totalPercent\" class=\"text-lg font-bold text-indigo-600\">0%<\/span>\n <\/div>\n <\/div>\n\n \n <button id=\"calculateBtn\" class=\"w-full bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white py-4 rounded-xl font-bold text-lg shadow-lg transition-all transform hover:scale-105\">\n \ud83e\uddee \u958b\u59cb\u8a08\u7b97\n <\/button>\n <\/div>\n\n \n <div id=\"resultSection\" class=\"hidden\">\n \n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-4 mb-6\">\n <div class=\"bg-white rounded-xl shadow-lg p-6\">\n <div class=\"text-sm text-gray-600 mb-1\">\u7e3d\u8cc7\u7522<\/div>\n <div id=\"totalAsset\" class=\"text-2xl font-bold text-indigo-600\">$0<\/div>\n <\/div>\n <div class=\"bg-white rounded-xl shadow-lg p-6\">\n <div class=\"text-sm text-gray-600 mb-1\">\u6700\u5927\u504f\u5dee<\/div>\n <div id=\"maxDeviation\" class=\"text-2xl font-bold text-orange-600\">0%<\/div>\n <\/div>\n <div class=\"bg-white rounded-xl shadow-lg p-6\">\n <div class=\"text-sm text-gray-600 mb-1\">\u9700\u52a0\u78bc\u91d1\u984d<\/div>\n <div id=\"buyAmount\" class=\"text-2xl font-bold text-green-600\">$0<\/div>\n <\/div>\n <div class=\"bg-white rounded-xl shadow-lg p-6\">\n <div class=\"text-sm text-gray-600 mb-1\">\u53ef\u6e1b\u78bc\u91d1\u984d<\/div>\n <div id=\"sellAmount\" class=\"text-2xl font-bold text-red-600\">$0<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-2xl p-8 mb-6\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-6\">\u914d\u7f6e\u5c0d\u6bd4\u5716<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n <div>\n <h3 class=\"text-center font-semibold text-gray-700 mb-4\">\u518d\u5e73\u8861\u524d<\/h3>\n <canvas id=\"beforeChart\"><\/canvas>\n <\/div>\n <div>\n <h3 class=\"text-center font-semibold text-gray-700 mb-4\">\u518d\u5e73\u8861\u5f8c<\/h3>\n <canvas id=\"afterChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-2xl p-6\">\n <h2 class=\"text-xl font-bold text-gray-800 mb-4\">\u8a73\u7d30\u8abf\u6574\u660e\u7d30<\/h2>\n <div class=\"overflow-x-auto\">\n <table class=\"w-full text-sm\">\n <thead>\n <tr class=\"bg-gray-100\">\n <th class=\"px-3 py-2 text-left font-semibold text-gray-700\">\u8cc7\u7522\u540d\u7a31<\/th>\n <th class=\"px-3 py-2 text-right font-semibold text-gray-700\">\u73fe\u6709\u91d1\u984d<\/th>\n <th class=\"px-3 py-2 text-right font-semibold text-gray-700\">\u73fe\u6709\u6bd4\u4f8b<\/th>\n <th class=\"px-3 py-2 text-right font-semibold text-gray-700\">\u76ee\u6a19\u6bd4\u4f8b<\/th>\n <th class=\"px-3 py-2 text-right font-semibold text-gray-700\">\u504f\u5dee<\/th>\n <th class=\"px-3 py-2 text-right font-semibold text-gray-700\">\u76ee\u6a19\u91d1\u984d<\/th>\n <th class=\"px-3 py-2 text-right font-semibold text-gray-700\">\u8abf\u6574\u91d1\u984d<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"resultTable\">\n \n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n let mode = 'normal'; \/\/ 'normal' or 'addOnly'\n let assets = [];\n let assetIdCounter = 0;\n\n \/\/ \u521d\u59cb\u5316\n function init() {\n addAssetRow();\n addAssetRow();\n addAssetRow();\n updateTotalPercentage();\n }\n\n \/\/ \u6a21\u5f0f\u5207\u63db\n document.getElementById('normalMode').addEventListener('click', () => {\n mode = 'normal';\n document.getElementById('normalMode').className = 'mode-btn flex-1 py-3 px-6 rounded-lg font-medium transition-all bg-indigo-600 text-white shadow-lg';\n document.getElementById('addOnlyMode').className = 'mode-btn flex-1 py-3 px-6 rounded-lg font-medium transition-all bg-gray-200 text-gray-700 hover:bg-gray-300';\n });\n\n document.getElementById('addOnlyMode').addEventListener('click', () => {\n mode = 'addOnly';\n document.getElementById('addOnlyMode').className = 'mode-btn flex-1 py-3 px-6 rounded-lg font-medium transition-all bg-indigo-600 text-white shadow-lg';\n document.getElementById('normalMode').className = 'mode-btn flex-1 py-3 px-6 rounded-lg font-medium transition-all bg-gray-200 text-gray-700 hover:bg-gray-300';\n });\n\n \/\/ \u65b0\u589e\u8cc7\u7522\u884c\n document.getElementById('addAsset').addEventListener('click', addAssetRow);\n\n function addAssetRow() {\n const id = assetIdCounter++;\n const assetDiv = document.createElement('div');\n assetDiv.className = 'flex gap-3 items-center bg-gray-50 p-4 rounded-lg';\n assetDiv.dataset.id = id;\n \n assetDiv.innerHTML = `\n <input type=\"text\" placeholder=\"\u8cc7\u7522\u540d\u7a31\" class=\"asset-name w-28 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm\">\n <input type=\"number\" placeholder=\"\u73fe\u6709\u91d1\u984d\" class=\"asset-amount w-36 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm\" min=\"0\" step=\"0.01\">\n <div class=\"flex items-center gap-2 w-24\">\n <input type=\"number\" placeholder=\"\u6bd4\u4f8b\" class=\"asset-target w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm\" min=\"0\" max=\"100\" step=\"0.1\">\n <span class=\"text-gray-600 font-medium text-sm\">%<\/span>\n <\/div>\n <button class=\"delete-btn bg-red-500 hover:bg-red-600 text-white px-3 py-2 rounded-lg font-medium transition-all text-sm\" onclick=\"deleteAsset(${id})\">\n \ud83d\uddd1\ufe0f\n <\/button>\n `;\n \n document.getElementById('assetList').appendChild(assetDiv);\n \n \/\/ \u6dfb\u52a0\u8f38\u5165\u76e3\u807d\n assetDiv.querySelector('.asset-target').addEventListener('input', updateTotalPercentage);\n }\n\n function deleteAsset(id) {\n const assetDiv = document.querySelector(`[data-id=\"${id}\"]`);\n if (document.getElementById('assetList').children.length > 1) {\n assetDiv.remove();\n updateTotalPercentage();\n } else {\n alert('\u81f3\u5c11\u9700\u8981\u4fdd\u7559\u4e00\u9805\u8cc7\u7522\uff01');\n }\n }\n\n function updateTotalPercentage() {\n const targets = document.querySelectorAll('.asset-target');\n let total = 0;\n targets.forEach(input => {\n total += parseFloat(input.value) || 0;\n });\n const totalSpan = document.getElementById('totalPercent');\n totalSpan.textContent = total.toFixed(1) + '%';\n totalSpan.className = total === 100 ? 'text-lg font-bold text-green-600' : 'text-lg font-bold text-red-600';\n }\n\n \/\/ \u8a08\u7b97\u529f\u80fd\n document.getElementById('calculateBtn').addEventListener('click', calculate);\n\n function calculate() {\n \/\/ \u6536\u96c6\u8cc7\u7522\u6578\u64da\n assets = [];\n const assetDivs = document.querySelectorAll('#assetList > div');\n \n assetDivs.forEach(div => {\n const name = div.querySelector('.asset-name').value.trim();\n const amount = parseFloat(div.querySelector('.asset-amount').value) || 0;\n const target = parseFloat(div.querySelector('.asset-target').value) || 0;\n \n if (name && amount >= 0 && target >= 0) {\n assets.push({ name, amount, target });\n }\n });\n\n if (assets.length === 0) {\n alert('\u8acb\u81f3\u5c11\u8f38\u5165\u4e00\u9805\u6709\u6548\u8cc7\u7522\uff01');\n return;\n }\n\n const totalTarget = assets.reduce((sum, a) => sum + a.target, 0);\n if (Math.abs(totalTarget - 100) > 0.1) {\n alert('\u76ee\u6a19\u6bd4\u4f8b\u7e3d\u548c\u5fc5\u9808\u70ba 100%\uff01');\n return;\n }\n\n \/\/ \u8a08\u7b97\u7e3d\u8cc7\u7522\n const totalAsset = assets.reduce((sum, a) => sum + a.amount, 0);\n \n if (totalAsset === 0) {\n alert('\u7e3d\u8cc7\u7522\u4e0d\u80fd\u70ba 0\uff01');\n return;\n }\n\n \/\/ \u6839\u64da\u6a21\u5f0f\u8a08\u7b97\n let results;\n if (mode === 'normal') {\n results = calculateNormal(assets, totalAsset);\n } else {\n results = calculateAddOnly(assets, totalAsset);\n }\n\n \/\/ \u986f\u793a\u7d50\u679c\n displayResults(results);\n }\n\n function calculateNormal(assets, totalAsset) {\n const results = assets.map(asset => {\n const currentPercent = (asset.amount \/ totalAsset) * 100;\n const targetAmount = totalAsset * (asset.target \/ 100);\n const adjustment = targetAmount - asset.amount;\n const deviation = currentPercent - asset.target;\n \n return {\n name: asset.name,\n currentAmount: asset.amount,\n currentPercent: currentPercent,\n targetPercent: asset.target,\n targetAmount: targetAmount,\n adjustment: adjustment,\n deviation: deviation\n };\n });\n\n return {\n totalAsset: totalAsset,\n newTotalAsset: totalAsset,\n results: results\n };\n }\n\n function calculateAddOnly(assets, totalAsset) {\n \/\/ \u627e\u51fa\u8d85\u914d\u6700\u56b4\u91cd\u7684\u8cc7\u7522\n let maxOverweight = -Infinity;\n let maxOverweightAsset = null;\n \n assets.forEach(asset => {\n const currentPercent = (asset.amount \/ totalAsset) * 100;\n const overweight = currentPercent - asset.target;\n if (overweight > maxOverweight) {\n maxOverweight = overweight;\n maxOverweightAsset = asset;\n }\n });\n\n \/\/ \u4ee5\u8d85\u914d\u6700\u56b4\u91cd\u7684\u8cc7\u7522\u70ba\u57fa\u6e96\uff0c\u8a08\u7b97\u65b0\u7684\u7e3d\u8cc7\u7522\n const newTotalAsset = maxOverweightAsset.amount \/ (maxOverweightAsset.target \/ 100);\n\n const results = assets.map(asset => {\n const currentPercent = (asset.amount \/ totalAsset) * 100;\n const targetAmount = newTotalAsset * (asset.target \/ 100);\n const adjustment = Math.max(0, targetAmount - asset.amount); \/\/ \u53ea\u8cb7\u4e0d\u8ce3\n const deviation = currentPercent - asset.target;\n \n return {\n name: asset.name,\n currentAmount: asset.amount,\n currentPercent: currentPercent,\n targetPercent: asset.target,\n targetAmount: targetAmount,\n adjustment: adjustment,\n deviation: deviation\n };\n });\n\n return {\n totalAsset: totalAsset,\n newTotalAsset: newTotalAsset,\n results: results\n };\n }\n\n function displayResults(data) {\n const { totalAsset, newTotalAsset, results } = data;\n\n \/\/ \u66f4\u65b0\u6458\u8981\u5361\u7247\n document.getElementById('totalAsset').textContent = '$' + totalAsset.toLocaleString('zh-TW', {maximumFractionDigits: 0});\n \n const maxDev = Math.max(...results.map(r => Math.abs(r.deviation)));\n document.getElementById('maxDeviation').textContent = maxDev.toFixed(2) + '%';\n \n const totalBuy = results.reduce((sum, r) => sum + Math.max(0, r.adjustment), 0);\n const totalSell = results.reduce((sum, r) => sum + Math.abs(Math.min(0, r.adjustment)), 0);\n \n document.getElementById('buyAmount').textContent = '$' + totalBuy.toLocaleString('zh-TW', {maximumFractionDigits: 0});\n document.getElementById('sellAmount').textContent = mode === 'addOnly' ? '$0' : '$' + totalSell.toLocaleString('zh-TW', {maximumFractionDigits: 0});\n\n \/\/ \u66f4\u65b0\u8868\u683c\n const tbody = document.getElementById('resultTable');\n tbody.innerHTML = '';\n \n results.forEach(r => {\n const row = document.createElement('tr');\n row.className = 'border-b hover:bg-gray-50';\n \n const adjustmentClass = r.adjustment > 0 ? 'text-green-600' : r.adjustment < 0 ? 'text-red-600' : 'text-gray-600';\n const adjustmentText = r.adjustment > 0 ? '+' + r.adjustment.toLocaleString('zh-TW', {maximumFractionDigits: 0}) : r.adjustment.toLocaleString('zh-TW', {maximumFractionDigits: 0});\n \n const deviationClass = Math.abs(r.deviation) < 0.5 ? 'text-green-600' : Math.abs(r.deviation) < 2 ? 'text-orange-600' : 'text-red-600';\n \n row.innerHTML = `\n <td class=\"px-3 py-2 font-medium text-gray-800\">${r.name}<\/td>\n <td class=\"px-3 py-2 text-right text-gray-700\">$${r.currentAmount.toLocaleString('zh-TW', {maximumFractionDigits: 0})}<\/td>\n <td class=\"px-3 py-2 text-right text-gray-700\">${r.currentPercent.toFixed(2)}%<\/td>\n <td class=\"px-3 py-2 text-right text-gray-700\">${r.targetPercent.toFixed(2)}%<\/td>\n <td class=\"px-3 py-2 text-right font-medium ${deviationClass}\">${r.deviation > 0 ? '+' : ''}${r.deviation.toFixed(2)}%<\/td>\n <td class=\"px-3 py-2 text-right text-gray-700\">$${r.targetAmount.toLocaleString('zh-TW', {maximumFractionDigits: 0})}<\/td>\n <td class=\"px-3 py-2 text-right font-bold ${adjustmentClass}\">$${adjustmentText}<\/td>\n `;\n \n tbody.appendChild(row);\n });\n\n \/\/ \u7e6a\u88fd\u5716\u8868\n drawCharts(results, totalAsset, newTotalAsset);\n\n \/\/ \u986f\u793a\u7d50\u679c\u5340\u57df\n document.getElementById('resultSection').classList.remove('hidden');\n document.getElementById('resultSection').scrollIntoView({ behavior: 'smooth' });\n }\n\n let beforeChart, afterChart;\n\n function drawCharts(results, totalAsset, newTotalAsset) {\n const colors = [\n '#6366f1', '#ec4899', '#f59e0b', '#10b981', '#8b5cf6',\n '#ef4444', '#06b6d4', '#84cc16', '#f97316', '#14b8a6'\n ];\n\n \/\/ \u92b7\u6bc0\u820a\u5716\u8868\n if (beforeChart) beforeChart.destroy();\n if (afterChart) afterChart.destroy();\n\n \/\/ \u518d\u5e73\u8861\u524d\n const beforeCtx = document.getElementById('beforeChart').getContext('2d');\n beforeChart = new Chart(beforeCtx, {\n type: 'pie',\n data: {\n labels: results.map(r => r.name),\n datasets: [{\n data: results.map(r => r.currentAmount),\n backgroundColor: colors.slice(0, results.length)\n }]\n },\n options: {\n responsive: true,\n plugins: {\n legend: { position: 'bottom' },\n tooltip: {\n callbacks: {\n label: function(context) {\n const label = context.label || '';\n const value = context.parsed || 0;\n const percent = ((value \/ totalAsset) * 100).toFixed(2);\n return `${label}: $${value.toLocaleString('zh-TW', {maximumFractionDigits: 0})} (${percent}%)`;\n }\n }\n }\n }\n }\n });\n\n \/\/ \u518d\u5e73\u8861\u5f8c\n const afterCtx = document.getElementById('afterChart').getContext('2d');\n afterChart = new Chart(afterCtx, {\n type: 'pie',\n data: {\n labels: results.map(r => r.name),\n datasets: [{\n data: results.map(r => r.targetAmount),\n backgroundColor: colors.slice(0, results.length)\n }]\n },\n options: {\n responsive: true,\n plugins: {\n legend: { position: 'bottom' },\n tooltip: {\n callbacks: {\n label: function(context) {\n const label = context.label || '';\n const value = context.parsed || 0;\n const percent = ((value \/ newTotalAsset) * 100).toFixed(2);\n return `${label}: $${value.toLocaleString('zh-TW', {maximumFractionDigits: 0})} (${percent}%)`;\n }\n }\n }\n }\n }\n });\n }\n\n \/\/ \u521d\u59cb\u5316\n init();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u6295\u8cc7\u7d44\u5408\u518d\u5e73\u8861\u8a08\u7b97\u5de5\u5177 \ud83d\udcca \u6295\u8cc7\u7d44\u5408\u518d\u5e73\u8861\u8a08\u7b97\u5de5\u5177 \u8f15\u9b06\u7ba1\u7406\u60a8\u7684\u8cc7\u7522\u914d\u7f6e \u8a08\u7b97\u6a21 … <a href=\"https:\/\/hsiang.cc\/?page_id=747\">\u95b1\u8b80\u5168\u6587 <span class=\"meta-nav\">→<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-747","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hsiang.cc\/index.php?rest_route=\/wp\/v2\/pages\/747","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hsiang.cc\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hsiang.cc\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hsiang.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hsiang.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=747"}],"version-history":[{"count":1,"href":"https:\/\/hsiang.cc\/index.php?rest_route=\/wp\/v2\/pages\/747\/revisions"}],"predecessor-version":[{"id":748,"href":"https:\/\/hsiang.cc\/index.php?rest_route=\/wp\/v2\/pages\/747\/revisions\/748"}],"wp:attachment":[{"href":"https:\/\/hsiang.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}