From d384ca9d23dca0c12bac456d5efbcee2e47a7a57 Mon Sep 17 00:00:00 2001
From: untunt <unt_tianjin@163.com>
Date: Mon, 25 Nov 2024 11:58:34 +0800
Subject: [PATCH] Styles for `desc` and multi-field languages

---
 src/routes/+page.svelte     |  9 ++---
 src/routes/DataTable.svelte | 68 +++++++++++++++++++++++++++++--------
 2 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ddd59d6..919793a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -18,13 +18,14 @@
 
 <style>
 .page {
+	font-size: 16px;
 	text-align: center;
 }
 
 input {
 	background-color: inherit;
 	color: inherit;
-
+    font-size: 1em;
 }
 
 input[type="text"] {
@@ -46,10 +47,6 @@ form {
 form > * {
 	vertical-align: middle;
 }
-
-footer {
-	font-size: 90%;
-}
 </style>
 
 <div class="page">
@@ -63,6 +60,6 @@ footer {
 	<DataTable results={results}/>
 
 	<footer>
-		<p>網站作者：<a href="https://github.com/nk2028/hdqt">nk2028</a> - 資料來源：漢字音典（眾專家）</p>
+		<p>網站作者：<a href="https://github.com/nk2028/hdqt">nk2028</a> - 資料來源：<a href="https://github.com/osfans/MCPDict">漢字音典（眾專家）</a></p>
 	</footer>
 </div>
diff --git a/src/routes/DataTable.svelte b/src/routes/DataTable.svelte
index d45ecd7..937c589 100644
--- a/src/routes/DataTable.svelte
+++ b/src/routes/DataTable.svelte
@@ -1,5 +1,44 @@
 <script lang="ts">
 	export let results: string[][];
+	const headers: { [key: string]: string[] } = {
+		'廣韻': [
+			'切拼r', '白一平r', '古韻r', '有女r',
+			'髙本漢', '王力{1957}', '王力{1985}', '李榮', '邵榮芬', '蒲立本', '鄭張尙芳', '潘悟雲{2000}', '潘悟雲{2013}', '潘悟雲{2023}', 'unt{2020}', 'unt{2022}', 'unt{通俗}', 'msoeg',
+			'切韻音系描述', 'null', '方音字彙描述',
+			'廣韻韻目原貌', '折合平水韻目',
+			'反切',
+		],
+		'中原音韻': ['楊耐思', '寧繼福', '薛鳳生{音位形式}', 'unt{音位形式}', 'unt'],
+		'東干語': ['西里爾字母r', '音標'],
+	};
+	const romanizations = ['普通話', '香港', '臺灣', '越南', '朝鮮', '日語吳音', '日語漢音'];
+	function process字音(字音: string, 簡稱: string) {
+		字音 = 字音.replace(/\{.*?\}/g, s => s.replace(/ /g, ''));
+		if (romanizations.includes(簡稱)) 字音 = `<em>${字音}</em>`;
+		else if (headers[簡稱]) {
+			字音 = 字音
+				.split(' ')
+				.map(s => s
+					.split('/')
+					.map((s, i) => {
+						let header = headers[簡稱][i];
+						if (header === 'null') return '';
+						if (header?.endsWith('r')) {
+							header = header.slice(0, -1);
+							s = `<em>${s}</em>`;
+						}
+						return header ? header + '：' + s : s;
+					})
+					.join('<br>')
+					.replace(/(<br>)+/g, '<br>'))
+				.join(headers[簡稱].length > 1 ? '<br><br>' : ' ');
+		}
+		字音 = 字音
+			.replace(/\*(.*?)\*/g, '<strong>$1</strong>')
+			.replace(/\|(.*?)\|/g, '<span style="opacity: 0.5;">$1</span>')
+			.replace(/\{(.*?)\}/g, '<span class="desc">$1</span>');
+		return 字音;
+	}
 </script>
 
 <style>
@@ -7,31 +46,30 @@ table {
 	border-collapse: collapse;
 	margin: 0 auto;
 	overflow-x: auto;
+	line-height: 1.5;
 }
 
 th, td {
-	border: 1px solid;
-	padding: 4px 6px;
+	padding: 0.25em;
+	width: 12em;
+	text-align: start;
+	vertical-align: top;
 }
 
-td:first-child {
-	white-space: nowrap;
-}
-
-td:not(:first-child) {
-	width: 6em;
-	word-break: break-all;
+th:first-child, td:first-child {
+	width: auto;
+	text-align: end;
 }
 
 .name-tag {
-	border-radius: 10px;
+	border-radius: 0.5em;
 	color: white;
-	font-size: 0.8em;
-	padding: 3px 5px;
+	padding: 0.15em 0.2em;
+	white-space: nowrap;
 }
 
-.text {
-	font-size: 90%;
+.desc {
+	font-size: 0.75em;
 }
 </style>
 
@@ -49,7 +87,7 @@ td:not(:first-child) {
 				<tr>
 					<td><span class="name-tag" style="background-color: {顏色};" title="{分區}">{簡稱}</span></td>
 					{#each 字音們 as 字音}
-						<td lang="zh-x-fonipa" class="text">{字音}</td>
+						<td lang="zh-x-fonipa" class="text">{@html process字音(字音, 簡稱)}</td>
 					{/each}
 				</tr>
 			{/each}