Skip to content

Commit b1e9016

Browse files
whes1015whes1015
committed
docs: earthquake
1 parent 90bf7df commit b1e9016

File tree

3 files changed

+258
-0
lines changed

3 files changed

+258
-0
lines changed

‎docs/api/api/earthquake.mdx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ sidebar_position: 1
33
---
44

55
import ApiEndpoint from "@site/src/components/ApiEndpoint";
6+
import ApiFieldsTable from "@site/src/components/ApiFieldsTable";
67

78
# 地震報告
89

@@ -14,6 +15,8 @@ import ApiEndpoint from "@site/src/components/ApiEndpoint";
1415

1516
:::
1617

18+
### 請求
19+
1720
<ApiEndpoint
1821
method="GET"
1922
baseUrls={[
@@ -61,3 +64,55 @@ import ApiEndpoint from "@site/src/components/ApiEndpoint";
6164
},
6265
}}
6366
/>
67+
68+
### 說明
69+
70+
<ApiFieldsTable
71+
fields={[
72+
{
73+
name: "id",
74+
type: "String",
75+
description: "事件編號",
76+
},
77+
{
78+
name: "no",
79+
type: "Integer",
80+
description: "地震編號，小區域地震尾數為 000",
81+
},
82+
{
83+
name: "lat",
84+
type: "Float",
85+
description: "震央緯度座標，到小數點第 2 位",
86+
},
87+
{
88+
name: "lon",
89+
type: "Float",
90+
description: "震央經度座標，到小數點第 2 位",
91+
},
92+
{
93+
name: "depth",
94+
type: "Float",
95+
description: "震源深度，單位為公里",
96+
},
97+
{
98+
name: "loc",
99+
type: "String",
100+
description: "震央位置的文字描述",
101+
},
102+
{
103+
name: "mag",
104+
type: "Integer",
105+
description: "地震規模 (芮氏規模)",
106+
},
107+
{
108+
name: "time",
109+
type: "Long",
110+
description: "發震時間的 Unix timestamp (毫秒)",
111+
},
112+
{
113+
name: "list",
114+
type: "Object",
115+
description: "各縣市與鄉鎮市區的震度資料，包含震度與座標資訊",
116+
},
117+
]}
118+
/>

‎src/components/ApiFieldsTable/index.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { JSX } from "react";
2+
import styles from "./styles.module.css";
3+
4+
export interface ApiField {
5+
name: string;
6+
type: string;
7+
description: string;
8+
required?: boolean;
9+
defaultValue?: string;
10+
}
11+
12+
type ApiFieldsTableProps = {
13+
fields: ApiField[];
14+
}
15+
16+
export default function ApiFieldsTable({ fields }: ApiFieldsTableProps): JSX.Element {
17+
return (
18+
<div className={styles.table}>
19+
<table>
20+
<thead>
21+
<tr>
22+
<th>欄位</th>
23+
<th>類型</th>
24+
<th>說明</th>
25+
</tr>
26+
</thead>
27+
<tbody>
28+
{fields.map((field, index) => (
29+
<tr key={index}>
30+
<td>
31+
<div className={styles.fieldName}>
32+
<code>{field.name}</code>
33+
</div>
34+
</td>
35+
<td>
36+
<code className={styles.type}>{field.type}</code>
37+
</td>
38+
<td>
39+
<div>
40+
{field.description}
41+
{field.defaultValue && (
42+
<div className={styles.default}>
43+
預設: <code>{field.defaultValue}</code>
44+
</div>
45+
)}
46+
</div>
47+
</td>
48+
</tr>
49+
))}
50+
</tbody>
51+
</table>
52+
</div>
53+
);
54+
}

‎src/components/ApiFieldsTable/styles.module.css‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
.table {
2+
margin: 1.5rem 0;
3+
border: 1px solid var(--ifm-color-emphasis-200);
4+
border-radius: 8px;
5+
overflow: hidden;
6+
width: 100% !important;
7+
max-width: 100% !important;
8+
}
9+
10+
[data-theme='dark'] .table {
11+
border-color: var(--ifm-color-emphasis-400);
12+
}
13+
14+
.table table {
15+
width: 100% !important;
16+
max-width: 100% !important;
17+
border-collapse: collapse;
18+
table-layout: fixed;
19+
margin: 0;
20+
display: table;
21+
}
22+
23+
.table thead tr {
24+
border-bottom: 1px solid var(--ifm-color-emphasis-200);
25+
background: var(--ifm-color-emphasis-50);
26+
}
27+
28+
[data-theme='dark'] .table thead tr {
29+
background: var(--ifm-color-emphasis-300);
30+
border-bottom-color: var(--ifm-color-emphasis-500);
31+
}
32+
33+
.table th {
34+
padding: 0.75rem 1rem;
35+
text-align: left;
36+
font-weight: 500;
37+
font-size: 0.875rem;
38+
color: var(--ifm-color-emphasis-800);
39+
}
40+
41+
.table th:first-child,
42+
.table td:first-child {
43+
width: 150px !important;
44+
min-width: 150px;
45+
max-width: 150px;
46+
}
47+
48+
.table th:nth-child(2),
49+
.table td:nth-child(2) {
50+
width: 120px !important;
51+
min-width: 120px;
52+
max-width: 120px;
53+
}
54+
55+
.table th:nth-child(3),
56+
.table td:nth-child(3) {
57+
width: auto !important;
58+
min-width: 0;
59+
}
60+
61+
[data-theme='dark'] .table th {
62+
color: var(--ifm-color-emphasis-000);
63+
}
64+
65+
.table td {
66+
padding: 0.75rem 1rem;
67+
border-bottom: 1px solid var(--ifm-color-emphasis-200);
68+
vertical-align: top;
69+
box-sizing: border-box;
70+
}
71+
72+
.table td:nth-child(3) {
73+
padding-right: 1rem !important;
74+
}
75+
76+
77+
[data-theme='dark'] .table td {
78+
border-bottom-color: var(--ifm-color-emphasis-400);
79+
color: var(--ifm-color-emphasis-000);
80+
}
81+
82+
.table tbody tr:last-child td {
83+
border-bottom: none;
84+
}
85+
86+
.table tbody tr:hover {
87+
background: var(--ifm-color-emphasis-50);
88+
}
89+
90+
[data-theme='dark'] .table tbody tr:hover {
91+
background: var(--ifm-color-emphasis-200);
92+
}
93+
94+
.fieldName {
95+
display: flex;
96+
align-items: center;
97+
gap: 0.5rem;
98+
}
99+
100+
.fieldName code {
101+
font-size: 0.875rem;
102+
font-weight: 500;
103+
color: var(--ifm-color-primary);
104+
}
105+
106+
.required {
107+
color: var(--ifm-color-danger);
108+
font-weight: 600;
109+
}
110+
111+
.type {
112+
font-size: 0.875rem;
113+
color: var(--ifm-color-emphasis-700);
114+
background: var(--ifm-color-emphasis-100);
115+
padding: 0.125rem 0.375rem;
116+
border-radius: 4px;
117+
white-space: nowrap;
118+
display: inline-block;
119+
}
120+
121+
[data-theme='dark'] .type {
122+
color: var(--ifm-color-emphasis-000);
123+
background: var(--ifm-color-emphasis-300);
124+
}
125+
126+
.default {
127+
margin-top: 0.5rem;
128+
font-size: 0.875rem;
129+
color: var(--ifm-color-emphasis-600);
130+
}
131+
132+
[data-theme='dark'] .default {
133+
color: var(--ifm-color-emphasis-200);
134+
}
135+
136+
.default code {
137+
font-size: 0.8rem;
138+
}
139+
140+
@media (max-width: 768px) {
141+
.table {
142+
font-size: 0.875rem;
143+
}
144+
145+
.table th,
146+
.table td {
147+
padding: 0.5rem;
148+
}
149+
}

0 commit comments

Comments
 (0)