refactor: locale

src/app/app.component.ts

@@ -4,6 +4,8 @@
 import { Component } from '@angular/core'
 import { Router, ActivatedRoute } from '@angular/router'
 import { queryString, setLocation } from '../utils'
+import { en_US, NzI18nService, zh_CN } from 'ng-zorro-antd/i18n'
+import { getLocale } from 'src/locale'
 
 @Component({
   selector: 'app-xiejiahe',
@@ -11,11 +13,17 @@ import { queryString, setLocation } from '../utils'
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  constructor (private router: Router, private activatedRoute: ActivatedRoute) {}
+  constructor (private router: Router, private activatedRoute: ActivatedRoute, private i18n: NzI18nService) {}
 
   ngOnInit() {
     this.goRoute()
     this.activatedRoute.queryParams.subscribe(setLocation)
+
+    if (getLocale() === 'zh-CN') {
+      this.i18n.setLocale(zh_CN);
+    } else {
+      this.i18n.setLocale(en_US);
+    }
   }
 
   goRoute() {

src/app/app.module.ts

@@ -54,17 +54,11 @@ import { ToolbarTitleWebComponent } from '../components/toolbar-title/index.comp
 import { WebListComponent } from '../components/web-list/index.component';
 import { NZ_I18N } from 'ng-zorro-antd/i18n';
 import { zh_CN } from 'ng-zorro-antd/i18n';
-import { registerLocaleData } from '@angular/common';
-import zh from '@angular/common/locales/zh';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { LogoComponent } from '../components/logo/logo.component';
 import { CardComponent } from '../components/card/index.component'
 
-if (config.language === 'zh-CN') {
-  registerLocaleData(zh);
-}
-
 const appRoutes: Routes = [
   { 
     path: 'sim',

src/components/create-web/index.component.html

 <nz-modal
   [nzWidth]="560"
   [(nzVisible)]="visible"
-  [nzTitle]="detail ? '编辑' : '新增'"
+  [nzTitle]="detail ? $t('_edit') : $t('_add')"
   (nzOnCancel)="handleCancel()"
   (nzOnOk)="handleOk()"
   [nzOkLoading]="uploading"
@@ -9,15 +9,15 @@
   <ng-container *nzModalContent>
     <form nz-form [formGroup]="validateForm">
       <nz-form-item>
-        <nz-form-label [nzSpan]="4" nzRequired>网站名称</nz-form-label>
-        <nz-form-control [nzSpan]="20" nzErrorTip="请输入名称">
-          <input formControlName="title" nz-input placeholder="发现导航" />
+        <nz-form-label [nzSpan]="4" nzRequired>{{ $t('_webName') }}</nz-form-label>
+        <nz-form-control [nzSpan]="20" [nzErrorTip]="$t('_requiredName')">
+          <input formControlName="title" nz-input [placeholder]="$t('_webTitle')" />
         </nz-form-control>
       </nz-form-item>
 
       <nz-form-item>
-        <nz-form-label [nzSpan]="4" nzRequired>网站链接</nz-form-label>
-        <nz-form-control [nzSpan]="20" nzErrorTip="请输入网站链接">
+        <nz-form-label [nzSpan]="4" nzRequired>{{ $t('_webLink') }}</nz-form-label>
+        <nz-form-control [nzSpan]="20" [nzErrorTip]="$t('_requiredLink')">
           <input formControlName="url" nz-input placeholder="https://nav3.cn" (blur)="onUrlBlur($event)" />
         </nz-form-control>
       </nz-form-item>
@@ -25,7 +25,7 @@
       <div class="row">
         <div class="col">
           <nz-form-item>
-            <nz-form-label [nzSpan]="15" nzRequired>快捷方式</nz-form-label>
+            <nz-form-label [nzSpan]="15" nzRequired>{{ $t('_shortcut') }}</nz-form-label>
             <nz-form-control [nzSpan]="9">
               <nz-switch formControlName="top"></nz-switch>
             </nz-form-control>
@@ -33,7 +33,7 @@
         </div>
         <div class="col">
           <nz-form-item>
-            <nz-form-label [nzSpan]="15" nzRequired>仅自己可见</nz-form-label>
+            <nz-form-label [nzSpan]="15" nzRequired>{{ $t('_onlyOwnVisible') }}</nz-form-label>
             <nz-form-control [nzSpan]="9">
               <nz-switch formControlName="ownVisible"></nz-switch>
             </nz-form-control>
@@ -41,7 +41,7 @@
         </div>
         <div class="col">
           <nz-form-item>
-            <nz-form-label [nzSpan]="8">推荐指数</nz-form-label>
+            <nz-form-label [nzSpan]="8">{{ $t('_recommend') }}</nz-form-label>
             <nz-form-control [nzSpan]="24">
               <nz-rate formControlName="rate" nzAllowHalf></nz-rate>
             </nz-form-control>
@@ -50,13 +50,13 @@
       </div>
 
       <nz-form-item>
-        <nz-form-label [nzSpan]="4">图标地址</nz-form-label>
+        <nz-form-label [nzSpan]="4">{{ $t('_iconAddr') }}</nz-form-label>
         <nz-form-control [nzSpan]="20">
           <nz-input-group [nzPrefix]="prefixIcon" [nzSuffix]="suffixIconSearch">
             <input
               formControlName="icon"
               nz-input
-              placeholder="支持将截图或复制图片粘贴此处上传"
+              [placeholder]="$t('_copyUpload')"
               (blur)="onIconBlur($event)"
               (focus)="onIconFocus($event)"
             />
@@ -69,7 +69,7 @@
             <i nz-icon nzType="loading" nzTheme="outline" *ngIf="uploading; else loading"></i>
             <ng-template #loading>
               <label id="file">
-                <i nz-icon nzType="upload" nzTheme="outline" class="cursor-pointer" title="上传"></i>
+                <i nz-icon nzType="upload" nzTheme="outline" class="cursor-pointer" [title]="$t('_upload')"></i>
                 <input
                   type="file"
                   name="file"
@@ -84,7 +84,7 @@
       </nz-form-item>
 
       <nz-form-item>
-        <nz-form-label [nzSpan]="4">网站描述</nz-form-label>
+        <nz-form-label [nzSpan]="4">{{ $t('_webDesc') }}</nz-form-label>
         <nz-form-control [nzSpan]="20">
           <textarea
             formControlName="desc"
@@ -132,7 +132,7 @@
         <nz-form-label [nzSpan]="4" [nzNoColon]="true"></nz-form-label>
         <nz-form-control [nzSpan]="20">
           <button nz-button nzType="default" nzBlock (click)="addMoreUrl()">
-            <i nz-icon nzType="plus"></i>继续添加关联链接
+            <i nz-icon nzType="plus"></i>{{ $t('_continueAdd') }}
           </button>
         </nz-form-control>
       </nz-form-item>

src/components/create-web/index.component.ts

@@ -9,6 +9,7 @@ import { NzMessageService } from 'ng-zorro-antd/message'
 import { NzNotificationService } from 'ng-zorro-antd/notification'
 import * as __tag from '../../../data/tag.json'
 import { createFile } from '../../services'
+import { $t } from 'src/locale'
 
 const tagMap: ITagProp = (__tag as any).default
 const tagKeys = Object.keys(tagMap)
@@ -24,6 +25,7 @@ export class CreateWebComponent implements OnInit {
   @Output() onCancel = new EventEmitter()
   @Output() onOk = new EventEmitter()
 
+  $t = $t
   validateForm!: FormGroup;
   iconUrl = ''
   urlArr = []
@@ -146,11 +148,11 @@ export class CreateWebComponent implements OnInit {
         path
       }).then(() => {
         that.validateForm.get('icon')!.setValue(path)
-        that.message.success('上传成功')
+        that.message.success($t('_uploadSuccess'))
       }).catch(res => {
         that.notification.error(
-          `错误: ${res?.response?.status ?? 401}`,
-          '上传失败，请重试！'
+          `${$t('_error')}: ${res?.response?.status ?? 401}`,
+          $t('_uploadFail')
         )
       }).finally(() => {
         that.uploading = false
@@ -164,7 +166,7 @@ export class CreateWebComponent implements OnInit {
     const file = files[0]
 
     if (!file.type.startsWith('image')) {
-      return this.message.error('请不要上传非法图片')
+      return this.message.error($t('_notUpload'))
     }
     this.handleUploadImage(file)
   }

src/locale/english.ts

@@ -33,7 +33,7 @@ export default {
   _unknow: 'Unknow',
   _repeatOper: 'Please do not operate frequently',
   _syncDataOut: 'Synchronize data to remote',
-  _confirmSync: '确定同步',
+  _confirmSync: 'OK to sync',
   _confirmSyncTip: 'Are you sure to synchronize all data to the remote end?',
   _syncSuccessTip: 'The synchronization is successful. It takes about 5 minutes to build',
   _error: 'Error',
@@ -75,7 +75,7 @@ export default {
   _allContentMsg2: '2. Website classification needs to be maintained manually,',
   _updateLogo: 'Replace logo, only PNG is supported',
   _tagName: 'Classification name',
-  _onlyOwnVisible: 'Visible only to yourself',
+  _onlyOwnVisible: 'Only Self',
   _createAt: 'Create At',
   _action: 'Action',
   _delWarn: 'This will delete all data under the category. Are you sure you want to delete it?',
@@ -83,8 +83,19 @@ export default {
   _mgr2: 'Management level 2 Classification',
   _mgr3: 'Management level 3 Classification',
   _mgrWeb: 'Manage website',
-  _webName: 'Website name',
+  _webName: 'Name',
   _webTag: 'Website classification',
-  _webDesc: 'Website description',
-  _requiredName: 'Please enter a name'
+  _webDesc: 'Description',
+  _webLink: 'Link',
+  _requiredName: 'Please enter a name',
+  _requiredLink: 'Please enter the website link',
+  _uploadSuccess: 'Uploaded successfully',
+  _uploadFail: 'Upload failed, please try again!',
+  _notUpload: 'Please do not upload illegal pictures',
+  _shortcut: 'Shortcut',
+  _recommend: 'Recommended',
+  _iconAddr: 'Icon Link',
+  _copyUpload: 'Support to paste screenshots or copy pictures here to upload',
+  _upload: 'Upload',
+  _continueAdd: 'Continue to add affiliate links'
 }

src/locale/zh_CN.ts

@@ -86,5 +86,16 @@ export default {
   _webName: '网站名称',
   _webTag: '网站分类',
   _webDesc: '网站描述',
-  _requiredName: '请输入名称'
+  _webLink: '网站链接',
+  _requiredName: '请输入名称',
+  _requiredLink: '请输入网站链接',
+  _uploadSuccess: '上传成功',
+  _uploadFail: '上传失败，请重试！',
+  _notUpload: '请不要上传非法图片',
+  _shortcut: '快捷方式',
+  _recommend: '推荐指数',
+  _iconAddr: '图标地址',
+  _copyUpload: '支持将截图或复制图片粘贴此处上传',
+  _upload: '上传',
+  _continueAdd: '继续添加关联链接'
 }

src/view/admin/index.component.scss

@@ -8,7 +8,7 @@
   .logo-wrapper {
     position: absolute;
     top: -45px;
-    left: 480px;
+    left: 580px;
     width: 180px;
     text-align: center;
     cursor: pointer;
@@ -26,7 +26,7 @@
   .book-wrapper {
     position: absolute;
     top: -45px;
-    left: 650px;
+    left: 830px;
     width: 180px;
     text-align: center;
     cursor: pointer;