update doc for multi lang support (#2)

Development/Frontend.md

@@ -21,12 +21,3 @@ To start the frontend server, use the following command:
 ```bash
 make next
 ```
-
-## Adding Language Support
-
-ZBook currently supports Simplified Chinese and English. To add support for a new language, you'll need to modify the following:
-
-- `zbook_frontend/messages`: Add the corresponding files and complete the content, such as `fr.json`.
-- `zbook_frontend/src/navigation.ts`: Add the new language to `locales`.
-- `zbook_frontend/global.d.ts`: Append the new language.
-- `zbook_frontend/src/components/navbars/NavTheme.tsx`: Append the new language to `localeMap`.

Development/LanguageSupport.md

@@ -2,7 +2,7 @@
 
 ## Frontend
 
-ZBook currently supports Simplified Chinese and English. To add support for new languages to the frontend part of ZBook, follow these steps:
+ZBook currently supports Simplified Chinese and English. To add support for new languages to the frontend of ZBook, follow these steps:
 
 ### 1. Add Language Files
 
@@ -21,7 +21,7 @@ Ensure that you provide translation content for each field that needs to be tran
 
 ### 2. Update Language Configuration
 
-In the `zbook_frontend/src/navigation.ts` file, add the new language to the `locales` configuration. For example, if you are adding support for French, do the following:
+In the `zbook_frontend/src/navigation.ts` file, add the new language to the `locales` configuration. For example, to add French support:
 
 ```typescript
 import frMessages from "../messages/fr.json";
@@ -62,15 +62,60 @@ const localeMap = {
 
 ### 5. Testing
 
-After completing the above steps, you should test the changes. Navigate to the `zbook_frontend` directory and run `npm run lint` and `npm run build`. If there are no errors, you can start the local server and check the results.
+After completing the above steps, test the changes by navigating to the `zbook_frontend` directory, running `npm run lint` and `npm run build`. If there are no errors, you can start the local server and check the results.
 
 ## Backend
 
-The dashboard can support geographic information in multiple languages. This is somewhat decoupled from the frontend. If the backend does not have corresponding language database information, it will return default language `en` information as shown in the image below:
+After updating the frontend, some modifications are also needed on the backend. First, add the new language in the `zbook_backend/util/lang.go` file:
+
+```go
+const (
+    LangZh = "zh"
+    LangEn = "en"
+    LangDe = "de" // Add new language
+)
+```
+
+Next, update the `ValidateLang` function in the `zbook_backend/val/validator.go` file to include the new language:
+
+```go
+func ValidateLang(value string) error {
+    if value != util.LangEn && value != util.LangZh && value != util.LangDe {
+      return fmt.Errorf("invalid language")
+    }
+    return nil
+}
+```
+
+!!! info Completed
+    After completing the above frontend and backend changes, ZBook will support the new language!
+
+## Database
+
+The dashboard can support geographic information in multiple languages, which is somewhat decoupled from the frontend. If the backend does not have corresponding language database information, it will return default language `en` information, as shown in the image below:
 
 ![lang_support](../开发/assets/lang_support.gif)
 
-If you need to add backend support for corresponding languages, you need to update both the backend and the database. For example:
+If you want the visitor information in the image above to support your language version, additional modifications are needed.
+
+### 1. Multilingual City Names
+
+```go
+type GeoData struct {
+    IPRangeCIDR  string
+    CityNameEn   *string
+    CityNameZhCn *string
+    Latitude     *float64
+    Longitude    *float64
+}
+
+type CityNames struct {
+    En   *string `maxminddb:"en"`
+    ZhCN *string `maxminddb:"zh-CN"`
+}
+```
+
+### 2. Retrieve City Name
 
 ```go
 func getCityName(record *util.GeoInfo, lang string) string {
@@ -85,5 +130,14 @@ func getCityName(record *util.GeoInfo, lang string) string {
 }
 ```
 
+### 3. Add New Column to Database
+
+```sql
+-- Add a new column city_name_de
+ALTER TABLE "geoip" ADD COLUMN city_name_de TEXT;
+```
+
+### 4. Data Conversion
+
 !!! warning TODO
-    Instructions for adding languages to the backend are incomplete. You can start by adding the frontend part only.
+    To be continued

开发/前端.md

@@ -23,11 +23,3 @@ npm run build
 ```bash
 make next
 ```
-
-## 添加语言支持
-
-ZBook 目前支持简体中文和英文，如果需要添加新的语言支持，前端需要修改如下内容：
-
-- `zbook_frontend/messages`,需要添加对应的文件,并完善对应内容，比如`fr.json`。
-- `zbook_frontend/src/navigation.ts`,需要添加对应语言到`locales`中。
-- `zbook_frontend/global.d.ts`,需要追加对应语言。

开发/语言支持.md

@@ -64,13 +64,59 @@ const localeMap = {
 
 执行完上述步骤后，您可以先测试一下，进入`zbook_frontend`目录，执行`npm run lint`,`npm run build`,如果没有报错，您可以启动本地服务器，查看下效果。
 
-## 后端
+## 后端部分
+
+在改完前端部分之后，后端也需要一些修改,首先在文件 `zbook_backend/util/lang.go` 中，添加新的语言
+
+```go
+const (
+    LangZh = "zh"
+    LangEn = "en"
+    LangDe = "de" // 添加新的语言
+)
+```
+
+之后在文件 `zbook_backend/val/validator.go` 的`ValidateLang`函数中，添加新的语言校验
+
+```go
+func ValidateLang(value string) error {
+    if value != util.LangEn && value != util.LangZh && value != util.LangDe {
+      return fmt.Errorf("invalid language")
+    }
+    return nil
+}
+```
+
+!!! info 完成
+    在完成上面的前端以及后端处理后，zbook就支持新的语言了！
+
+## 数据库
 
 仪表盘可以支持多种语言的地理信息，这里和前端一定程度上是解耦合的，若后端没有对应语言的数据库信息，则后端会返回默认语言`en`的信息，如下图所示
 
 ![lang_support](./assets/lang_support.gif)
 
-如果您需要添加对应语言的后端版本，您需要更新后端以及数据库
+如果您希望上图中访客信息支持您的语言版本，您需要额外做一些修改。
+
+### 1. 多语言城市名
+
+```go
+type GeoData struct {
+    IPRangeCIDR  string
+    CityNameEn   *string
+    CityNameZhCn *string
+    Latitude     *float64
+    Longitude    *float64
+}
+
+type CityNames struct {
+    En   *string `maxminddb:"en"`
+    ZhCN *string `maxminddb:"zh-CN"`
+}
+
+```
+
+### 2. 获取城市名
 
 ```go
 func getCityName(record *util.GeoInfo, lang string) string {
@@ -85,5 +131,14 @@ func getCityName(record *util.GeoInfo, lang string) string {
 }
 ```
 
+### 3. 数据库添加新列
+
+```sql
+-- 添加新的列 city_name_de
+ALTER TABLE "geoip" ADD COLUMN city_name_de TEXT;
+```
+
+### 4. 转换数据
+
 !!! warning TODO
-    后端添加语言的说明未完成，未完待续，您可以先（只）添加前端部分
+    未完待续