🎊 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'
-]