Add i18n to most blocks

.gitignore

@@ -3,4 +3,5 @@ node_modules
 dist
 dist-ssr
 *.local
-package-lock.json
+pnpm-lock.yaml
+package-lock.json

package.json

@@ -7,21 +7,21 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@codemirror/lang-html": "^6.4.6",
-    "@codemirror/lang-javascript": "^6.2.1",
+    "@codemirror/lang-html": "^6.4.8",
+    "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-json": "^6.0.1",
-    "@heroicons/vue": "^2.0.18",
+    "@heroicons/vue": "^2.1.1",
     "codemirror": "^6.0.1",
-    "sortablejs": "^1.15.0",
-    "vue": "^3.3.4",
-    "vue-router": "^4.2.5"
+    "sortablejs": "^1.15.2",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.4.0",
-    "@vue-macros/reactivity-transform": "^0.3.23",
-    "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.31",
-    "tailwindcss": "^3.3.3",
-    "vite": "^4.4.11"
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue-macros/reactivity-transform": "^0.4.3",
+    "autoprefixer": "^10.4.18",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "vite": "^5.1.5"
   }
 }

src/blocks/HTML.vue

@@ -1,11 +1,11 @@
 <script setup>
-import { T } from '../utils/string.js'
+import { IT } from '../utils/string.js'
 const props = defineProps(['i', 'form', 'state'])
 let block = $computed(() => props.form[props.i])
 </script>
 
 <template>
-  <div v-html="T(block?.html, props.state)" />
+  <div v-html="IT(block?.html, props.state)" />
 </template>
 
 <style scoped>

src/blocks/Input.vue

@@ -1,12 +1,13 @@
 <script setup>
+import { I } from '../utils/string.js'
 const props = defineProps(['i', 'form', 'state'])
 let block = $computed(() => props.form[props.i])
 </script>
 
 <template>
   <label>
-    <span>{{ block.label }}</span>
-    <input class="mx-2 border rounded px-2 py-1" :type="block.type" :placeholder="block.placeholder" v-model="props.state[block.key]">
+    <span>{{ I(block.label) }}</span>
+    <input class="mx-2 border rounded px-2 py-1" :type="block.type" :placeholder="I(block.placeholder)" v-model="props.state[block.key]">
   </label>
-  <p class="text-xs text-gray-500">{{ block.hint }}</p>
+  <p class="text-xs text-gray-500">{{ I(block.hint) }}</p>
 </template>

src/blocks/Select.vue

@@ -1,14 +1,15 @@
 <script setup>
+import { I } from '../utils/string.js'
 const props = defineProps(['i', 'form', 'state'])
 let block = $computed(() => props.form[props.i])
 </script>
 
 <template>
   <label>
-    <span :class="block.multiple ? 'block' : 'inline'">{{ block.label }}</span>
+    <span :class="block.multiple ? 'block' : 'inline'">{{ I(block.label) }}</span>
     <select class="border rounded text-left" :class="block.multiple ? 'overflow-auto w-full my-2' : 'mx-2 px-2 py-1'" v-model="props.state[block.key]" :multiple="block.multiple" :size="block.multiple ? block.options.length : 1">
       <option v-for="item in block.options">{{ item }}</option>
     </select>
   </label>
-  <p class="text-xs text-gray-500">{{ block.hint }}</p>
-</template>
+  <p class="text-xs text-gray-500">{{ I(block.hint) }}</p>
+</template>

src/blocks/Table.vue

@@ -1,15 +1,16 @@
 <script setup>
+import { I } from '../utils/string.js'
 const props = defineProps(['i', 'form', 'state'])
 let block = $computed(() => props.form[props.i])
 </script>
 
 <template>
-  <label class="font-bold block p-2">{{ block.label }}</label>
+  <label class="font-bold block p-2">{{ I(block.label) }}</label>
   <div class="w-full overflow-x-auto">
     <table class="table-auto text-center border-collapse border border-slate-500">
       <thead class="font-bold bg-gray-200">
         <tr>
-          <th class="border border-slate-500 px-2" v-for="c in block.columns">{{ c.label }}</th>
+          <th class="border border-slate-500 px-2" v-for="c in block.columns">{{ I(c.label) }}</th>
         </tr>
       </thead>
       <tbody>
@@ -19,4 +20,4 @@ let block = $computed(() => props.form[props.i])
       </tbody>
     </table>
   </div>
-</template>
+</template>

src/blocks/Textarea.vue

@@ -1,12 +1,13 @@
 <script setup>
+import { I } from '../utils/string.js'
 const props = defineProps(['i', 'form', 'state'])
 let block = $computed(() => props.form[props.i])
 </script>
 
 <template>
   <label>
-    <span class="block">{{ block.label }}</span>
-    <p class="text-xs text-gray-500">{{ block.hint }}</p>
-    <textarea class="my-2 border rounded px-2 py-1 w-full" :rows="block.rows" :placeholder="block.placeholder" v-model="props.state[block.key]"></textarea>
+    <span class="block">{{ I(block.label) }}</span>
+    <p class="text-xs text-gray-500">{{ I(block.hint) }}</p>
+    <textarea class="my-2 border rounded px-2 py-1 w-full" :rows="block.rows" :placeholder="I(block.placeholder)" v-model="props.state[block.key]"></textarea>
   </label>
 </template>

src/components/NodeSelector.vue

@@ -48,12 +48,15 @@ function select (nid, name) {
   </Transition>
   <div class="all-transition fixed z-50 w-11/12 md:w-1/3 bg-white h-screen top-0 overflow-y-auto" :class="show ? 'right-0' : '-right-full'">
     <h4 class="text-lg font-bold text-center my-2">{{ I(titles[show]) }}</h4>
-    <input class="w-full block py-1 px-2 text-sm font-mono border" :placeholder="I('[[Enter to Search ID|回车搜索ID]]')" @change="searchResult = null; searchTip = ''" v-model="keyword" @keyup.enter="search">
-    <p class="text-xs text-gray-400 px-2">{{ searchTip }}</p>
+    <div class="mx-4">
+      <input class="block py-1 px-2 w-full text-sm font-mono border focus:border-blue-500" :placeholder="I('[[Enter to Search ID|回车搜索ID]]')" @change="searchResult = null; searchTip = ''" v-model="keyword" @keyup.enter="search">
+    </div>
+    <p class="text-xs text-gray-400 px-2 mx-4">{{ searchTip }}</p>
     <div class="p-2 mt-2">
       <hr>
       <div v-for="(name, id) in list" class="p-1 cursor-pointer all-transition flex items-center border-b border-gray-200 hover:bg-gray-100" @click="select(id, name)">
         <SquaresPlusIcon v-if="show === 'F'" class="w-6 mr-2" />
+        <CircleStackIcon v-if="show === 'D'" class="w-6 mr-2" />
         <UserIcon v-if="show === 'U'" class="w-6 mr-2" />
         <div class="flex flex-col items-start">
           {{ name }}
@@ -62,4 +65,4 @@ function select (nid, name) {
       </div>
     </div>
   </div>
-</template>
+</template>

src/state.js

@@ -9,10 +9,27 @@ if (typeof LS.locale === 'undefined') LS.locale = navigator.language.indexOf('zh
 export const state = reactive({
   locale: Number(LS.locale || 0),
   loading: false,
-  user: SS.user ? JSON.parse(SS.user) : null,
+  user: null,
   nodes: JSON.parse(LS.nodes || '{}')
 })
 
+export function login (token) {
+  SS.removeItem('token')
+  let input = token?.split('.')?.[1]
+  if (!input) return false
+  input = input.replace(/-/g, '+').replace(/_/g, '/')
+  const pad = input.length % 4
+  if (pad) input += new Array(5 - pad).join('=')
+  const payload = JSON.parse(decodeURIComponent(atob(input).split('').map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join('')))
+  if (payload.iat + 86400e3 < Date.now()) return false
+  payload.token = token
+  SS.token = token
+  state.user = payload
+  return payload
+}
+
+if (SS.token) login(SS.token)
+
 watch(() => state.nodes, v => { LS.nodes = JSON.stringify(v) }, { deep: true })
 
 export default state

src/utils/string.js

@@ -20,7 +20,7 @@ export function I (template, choice = state.locale) {
   return res
 }
 
-export function IT (template, data, choice = locale) {
+export function IT (template, data, choice = state.locale) {
   return I(T(template, data), choice)
 }
 

src/views/Login.vue

@@ -1,21 +1,13 @@
 <script setup>
 import { useRoute, useRouter } from 'vue-router'
-import { decodeJSON } from '../utils/crypto.js'
-import { state, SS } from '../state'
+import { state, login } from '../state'
 const route = useRoute(), router = useRouter()
 const token = route.query.token
 
-state.loading = true
-
-if (token) {
-  state.user = decodeJSON(token.split('.')[1])
-  state.user.token = token
-  SS.user = JSON.stringify(state.user)
-  state.loading = false
-}
-
-router.push('/')
+if (login(token)) router.push('/home')
+else window.location.href = 'https://auth.njsc.ltd/#/launch/atool'
 </script>
 
 <template>
+  <p class="p-3">Loading...</p>
 </template>