🎊 feat: update langs i18n (#415)

Author: pdsuwwz

.stylelintrc.cjs

@@ -40,6 +40,7 @@ module.exports = {
       }
     ],
     'property-no-unknown': null,
+    'scss/at-rule-no-unknown': null,
     'at-rule-empty-line-before': [
       'always',
       {

.vscode/extensions.json

@@ -1,6 +1,7 @@
 {
   "recommendations": [
     "vue.volar",
+    "antfu.iconify",
     "dbaeumer.vscode-eslint",
     "stylelint.vscode-stylelint"
   ]

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
+  "css.customData": [".vscode/tailwind.json"],
   "editor.formatOnSave": false,
 
   // Auto fix

.vscode/tailwind.json

@@ -0,0 +1,55 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+        }
+      ]
+    },
+    {
+      "name": "@responsive",
+      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+        }
+      ]
+    },
+    {
+      "name": "@screen",
+      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+        }
+      ]
+    },
+    {
+      "name": "@variants",
+      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+        }
+      ]
+    }
+  ]
+}

src/components/Layout/LayoutView.vue

@@ -36,9 +36,9 @@ export default defineComponent({
         :title="_t('result.title')"
       >
         <ul>
-          <li>111</li>
-          <li>222</li>
-          <li>333</li>
+          <li>Test Menu 这里放菜单1</li>
+          <li>Test Menu 这里放菜单2</li>
+          <li>Test Menu 这里放菜单3</li>
         </ul>
       </LayoutSection>
     </template>

src/components/Navigation/Side/SideAction.vue

@@ -33,7 +33,7 @@ export default defineComponent({
         :key="item"
         class="action-item"
       >
-        Action {{ item }}
+        {{ _t('nav.action') }}{{ item }}
       </li>
     </ul>
   </div>

src/locales/lang/en.ts

@@ -7,7 +7,12 @@ export default {
     goback: 'Back to the previous page',
     empty: 'No data available',
     i18nTest: 'Test internationalization',
-    pleaseInput: 'Please Input'
+    pleaseInput: 'Please Input',
+    btnCancel: 'Cancel',
+    btnConfirm: 'Confirm'
+  },
+  nav: {
+    action: 'Action'
   },
   login: {
     hydl: 'Hi, Welcome',

src/locales/lang/zh-hans.ts

@@ -5,7 +5,12 @@ export default {
     goback: '返回',
     empty: '无可用数据',
     i18nTest: '测试国际化',
-    pleaseInput: '请输入'
+    pleaseInput: '请输入',
+    btnCancel: '取消',
+    btnConfirm: '确定'
+  },
+  nav: {
+    action: '操作'
   },
   login: {
     hydl: '欢迎登录',

src/modules/Project/components/ProjectItem.vue

@@ -188,8 +188,7 @@ async function handlePublish (projectId) {
     }
 
     .project-item__name-desc {
-      flex: 1;
-      overflow: hidden;
+      --at-apply: flex-1 overflow-hidden;
 
       .project-item__name-desc__corpname {
         display: flex;

src/modules/Project/data/index.ts

@@ -1,56 +1,39 @@
+const date = new Date()
+const [, id] = String(Math.random()).split('.')
+const today = `${ date.getFullYear() }-${ date.getMonth() + 1 }-${ date.getDate() }`
+
 export const projectDetail = {
-  id: Math.random(),
-  name: '测试项目',
-  corpName: '测试公司',
-  notes: '备注',
+  id,
+  name: 'This is Test Name 测试项目',
+  corpName: 'This is Test Company 测试公司',
+  notes: 'This is Test Remarks 备注',
   isPublished: false,
-  createTime: '2023.01.29'
+  createTime: today
 }
 
 export const projectList = [
   {
     id: '111',
-    name: '测试项目',
-    corpName: '测试公司',
-    notes: '备注备注',
+    name: 'Test Name 测试项目',
+    corpName: 'Test Company 测试公司',
+    notes: 'Test Remarks 备注',
     isPublished: false,
-    createTime: '2023.01.29'
+    createTime: today
   },
   {
     id: '222',
-    name: '测试项目测试项目测试项目测试项目测试项目测试项目测试项目测试项目测试项目测试项目测试项目测试项目测试项目',
-    corpName: '测试公司测试公司测试公司测试公司测试公司测试公司测试公司测试公司测试公司测试公司测试公司测试公司测试公司',
-    notes: '备注备注',
+    name: 'This is Test Test Test Test Name',
+    corpName: 'This is Test Test Test Company',
+    notes: 'Remarks.... 这是备注😄',
     isPublished: true,
-    createTime: '2023.03.29'
+    createTime: today
   },
   {
     id: '333',
-    name: '测试项目',
-    corpName: '测试公司',
-    notes: '',
+    name: 'This is Test Test Test Test Name',
+    corpName: 'This is Test Test Test 中文名称',
+    notes: '中文备注',
     isPublished: false,
-    createTime: '2023.02.29'
+    createTime: today
   }
 ]
-
-export const corporationList = [
-  'Alabama', 'Alaska', 'Arizona',
-  '测试', '测试1', '测试2', '测试3',
-  'Arkansas', 'California', 'Colorado',
-  'Connecticut', 'Delaware', 'Florida',
-  'Georgia', 'Hawaii', 'Idaho', 'Illinois',
-  'Indiana', 'Iowa', 'Kansas', 'Kentucky',
-  'Louisiana', 'Maine', 'Maryland',
-  'Massachusetts', 'Michigan', 'Minnesota',
-  'Mississippi', 'Missouri', 'Montana',
-  'Nebraska', 'Nevada', 'New Hampshire',
-  'New Jersey', 'New Mexico', 'New York',
-  'North Carolina', 'North Dakota', 'Ohio',
-  'Oklahoma', 'Oregon', 'Pennsylvania',
-  'Rhode Island', 'South Carolina',
-  'South Dakota', 'Tennessee', 'Texas',
-  'Utah', 'Vermont', 'Virginia',
-  'Washington', 'West Virginia', 'Wisconsin',
-  'Wyoming'
-]

src/modules/Project/pages/list.vue

@@ -109,6 +109,7 @@ export default defineComponent({
         >
           <IconFont
             icon="iconestablish"
+            class="mr-2"
           />
           {{ _t('project.create') }}
         </el-button>

src/modules/Project/store/index.ts

@@ -1,17 +1,9 @@
 
 import { sleep } from '@/utils/request'
-import {
-  createProject,
-  getProjectDetail,
-  getProjectList,
-  updateTogglePublishStatus
-} from '@/modules/Project/api'
+import * as ProjectApi from '@/modules/Project/api'
 import MUTATION from '@/modules/Project/store/mutations-type'
 import mixin from '@/store/utils/mixin'
-import {
-  projectDetail,
-  projectList
-} from '@/modules/Project/data'
+import * as ProjectData from '@/modules/Project/data'
 import type { Module } from 'vuex'
 import type { IGlobalState } from '@/store'
 
@@ -50,7 +42,7 @@ const ProjectModule: Module<IProjectModule, IGlobalState> = {
   actions: {
     async getSearchProjectByQuery ({ commit }, query) {
       await sleep(300)
-      const res = await getProjectList(query)
+      const res = await ProjectApi.getProjectList(query)
       return this.filterResponse(res, null, () => {})
     },
     async getProjectList ({ commit }, params) {
@@ -60,7 +52,7 @@ const ProjectModule: Module<IProjectModule, IGlobalState> = {
         msg: 'ok',
         error: 0,
         data: {
-          projectList
+          projectList: ProjectData.projectList
         }
       }
       return this.filterResponse(res, () => {
@@ -89,7 +81,7 @@ const ProjectModule: Module<IProjectModule, IGlobalState> = {
       })
     },
     async updateTogglePublishStatus ({ commit }, params) {
-      const res = await updateTogglePublishStatus(params)
+      const res = await ProjectApi.updateTogglePublishStatus(params)
       return this.filterResponse(res, null)
     }
   },

src/modules/Result/data/index.ts

@@ -1,4 +1,4 @@
 export const overviewMock = {
-  title: '测试标题总览',
-  content: '测试内容 overview'
+  title: 'Async Test title overview 测试异步标题',
+  content: 'Async Test content overview 测试异步内容'
 }

src/modules/UserAccount/components/ContainerLayout.vue

@@ -290,7 +290,7 @@ export default defineComponent({
   }
 }
 
-@media screen and (width <= 600px) {
+@screen lt-sm {
 
   .user-account-container-layout {
     width: 95%;

src/modules/UserAccount/pages/login.vue

@@ -90,6 +90,9 @@ export default defineComponent({
               text: localeInject.t('login.fgtpwd'),
               click () {
                 console.log(proxy, localeInject.t('login.fgtpwd'))
+                ElMessage.info({
+                  message: `😄 ${ localeInject.t('login.fgtpwd') }`
+                })
               }
             },
             type: 'password',
@@ -253,24 +256,10 @@ export default defineComponent({
   }
 
   .user-account-body {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
+    --at-apply: flex-1 flex items-center justify-end;
   }
 }
 
-@media screen and (width <= 600px) {
 
-  .user-account-container-layout {
-    justify-content: center;
-
-    .user-account-nav {
-      left: 0;
-      right: 0;
-      margin: auto;
-      justify-content: center;
-    }
-  }
-}
 </style>
+

src/widgets/ModalDialog/modal.vue

@@ -172,14 +172,14 @@ export default defineComponent({
           round
           @click="handleCancel()"
         >
-          取消
+          {{ _t('base.btnCancel') }}
         </el-button>
         <el-button
           type="primary"
           round
           @click="handleConfirm()"
         >
-          {{ confirmText || '确定' }}
+          {{ confirmText || _t('base.btnConfirm') }}
         </el-button>
       </div>
     </div>

uno.config.ts

@@ -18,8 +18,11 @@ export default defineConfig({
     transformerAttributifyJsx()
   ],
   theme: {
+    breakpoints: {
+      sm: '600px'
+    },
     colors: {
-      primary: 'rgba(32, 48, 98, %alpha)',
+      primary: '#3c40c6',
       success: 'rgba(82, 196, 26, %alpha)',
       warning: 'rgba(250, 173, 20, %alpha)',
       danger: 'rgba(250, 85, 85, %alpha)',