w-web-perm 1.0.26 → 1.0.28

package/docs/WWebPerm.html

@@ -925,7 +925,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jan 27 2025 12:59:51 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sat Feb 01 2025 23:22:16 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/WWebPerm.mjs.html

@@ -275,6 +275,8 @@ function WWebPerm(WOrm, url, db, getUserByToken, verifyBrowserUser, verifyAppUse
 
 
     //params
+    let showLanguage = get(opt, 'showLanguage', 'n')
+    let language = get(opt, 'language', 'eng')
     let showModeEditTargets = get(opt, 'showModeEditTargets', 'n')
     let showModeEditPemis = get(opt, 'showModeEditPemis', 'n')
     let showModeEditGrups = get(opt, 'showModeEditGrups', 'n')
@@ -283,6 +285,15 @@ function WWebPerm(WOrm, url, db, getUserByToken, verifyBrowserUser, verifyAppUse
     let modeEditPemis = get(opt, 'modeEditPemis', 'n')
     let modeEditGrups = get(opt, 'modeEditGrups', 'n')
     let modeEditUsers = get(opt, 'modeEditUsers', 'n')
+    let widthTargetId = get(opt, 'widthTargetId', '')
+    let widthTargetDescription = get(opt, 'widthTargetDescription', '')
+    let widthPemisName = get(opt, 'widthPemisName', '')
+    let widthPemisDescription = get(opt, 'widthPemisDescription', '')
+    let widthGrupsName = get(opt, 'widthGrupsName', '')
+    let widthGrupsDescription = get(opt, 'widthGrupsDescription', '')
+    let widthUsersName = get(opt, 'widthUsersName', '')
+    let widthUsersEmail = get(opt, 'widthUsersEmail', '')
+    let widthUsersDescription = get(opt, 'widthUsersDescription', '')
 
 
     //mappingBy
@@ -312,10 +323,15 @@ function WWebPerm(WOrm, url, db, getUserByToken, verifyBrowserUser, verifyAppUse
     //getWebInfor
     let getWebInfor = (userId) => {
         return {
+
             webName,
             webDescription,
             webLogo,
             // urlRedirect, //登入失敗就需要轉址, 故須通過html模板取代提供, 無法用api提供
+
+            showLanguage,
+            language,
+
             showModeEditTargets,
             showModeEditPemis,
             showModeEditGrups,
@@ -324,6 +340,17 @@ function WWebPerm(WOrm, url, db, getUserByToken, verifyBrowserUser, verifyAppUse
             modeEditPemis,
             modeEditGrups,
             modeEditUsers,
+
+            widthTargetId,
+            widthTargetDescription,
+            widthPemisName,
+            widthPemisDescription,
+            widthGrupsName,
+            widthGrupsDescription,
+            widthUsersName,
+            widthUsersEmail,
+            widthUsersDescription,
+
         }
     }
 
@@ -838,14 +865,7 @@ function WWebPerm(WOrm, url, db, getUserByToken, verifyBrowserUser, verifyAppUse
         c = replace(c, '/mperm/', '{sfd}/') //方法同genEntry
         c = replace(c, '{sfd}', subfolder)
         c = replace(c, '{urlRedirect}', urlRedirect)
-        c = replace(c, '{showModeEditTargets}', showModeEditTargets)
-        c = replace(c, '{showModeEditPemis}', showModeEditPemis)
-        c = replace(c, '{showModeEditGrups}', showModeEditGrups)
-        c = replace(c, '{showModeEditUsers}', showModeEditUsers)
-        c = replace(c, '{modeEditTargets}', modeEditTargets)
-        c = replace(c, '{modeEditPemis}', modeEditPemis)
-        c = replace(c, '{modeEditGrups}', modeEditGrups)
-        c = replace(c, '{modeEditUsers}', modeEditUsers)
+        c = replace(c, '{language}', language)
         fs.writeFileSync(fpEntryOut, c, 'utf8')
     }
     catch (err) {
@@ -1262,7 +1282,7 @@ export default WWebPerm
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jan 27 2025 12:59:51 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sat Feb 01 2025 23:22:16 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/index.html

@@ -71,7 +71,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jan 27 2025 12:59:51 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sat Feb 01 2025 23:22:16 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "w-web-perm",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "main": "dist/w-web-perm.umd.js",
   "dependencies": {
     "@mdi/js": "^7.4.47",

package/public/index.html

@@ -16,14 +16,7 @@
         <script>
             window.___pmwperm___={
                 urlRedirect: '{urlRedirect}',
-                showModeEditTargets: '{showModeEditTargets}',
-                showModeEditPemis:   '{showModeEditPemis}',
-                showModeEditGrups:   '{showModeEditGrups}',
-                showModeEditUsers:   '{showModeEditUsers}',
-                modeEditTargets: '{modeEditTargets}',
-                modeEditPemis:   '{modeEditPemis}',
-                modeEditGrups:   '{modeEditGrups}',
-                modeEditUsers:   '{modeEditUsers}',
+                language: '{language}',
             }
         </script>
 

package/server/WWebPerm.mjs

@@ -228,6 +228,8 @@ function WWebPerm(WOrm, url, db, getUserByToken, verifyBrowserUser, verifyAppUse
 
 
     //params
+    let showLanguage = get(opt, 'showLanguage', 'n')
+    let language = get(opt, 'language', 'eng')
     let showModeEditTargets = get(opt, 'showModeEditTargets', 'n')
     let showModeEditPemis = get(opt, 'showModeEditPemis', 'n')
     let showModeEditGrups = get(opt, 'showModeEditGrups', 'n')
@@ -236,6 +238,15 @@ function WWebPerm(WOrm, url, db, getUserByToken, verifyBrowserUser, verifyAppUse
     let modeEditPemis = get(opt, 'modeEditPemis', 'n')
     let modeEditGrups = get(opt, 'modeEditGrups', 'n')
     let modeEditUsers = get(opt, 'modeEditUsers', 'n')
+    let widthTargetId = get(opt, 'widthTargetId', '')
+    let widthTargetDescription = get(opt, 'widthTargetDescription', '')
+    let widthPemisName = get(opt, 'widthPemisName', '')
+    let widthPemisDescription = get(opt, 'widthPemisDescription', '')
+    let widthGrupsName = get(opt, 'widthGrupsName', '')
+    let widthGrupsDescription = get(opt, 'widthGrupsDescription', '')
+    let widthUsersName = get(opt, 'widthUsersName', '')
+    let widthUsersEmail = get(opt, 'widthUsersEmail', '')
+    let widthUsersDescription = get(opt, 'widthUsersDescription', '')
 
 
     //mappingBy
@@ -265,10 +276,15 @@ function WWebPerm(WOrm, url, db, getUserByToken, verifyBrowserUser, verifyAppUse
     //getWebInfor
     let getWebInfor = (userId) => {
         return {
+
             webName,
             webDescription,
             webLogo,
             // urlRedirect, //登入失敗就需要轉址, 故須通過html模板取代提供, 無法用api提供
+
+            showLanguage,
+            language,
+
             showModeEditTargets,
             showModeEditPemis,
             showModeEditGrups,
@@ -277,6 +293,17 @@ function WWebPerm(WOrm, url, db, getUserByToken, verifyBrowserUser, verifyAppUse
             modeEditPemis,
             modeEditGrups,
             modeEditUsers,
+
+            widthTargetId,
+            widthTargetDescription,
+            widthPemisName,
+            widthPemisDescription,
+            widthGrupsName,
+            widthGrupsDescription,
+            widthUsersName,
+            widthUsersEmail,
+            widthUsersDescription,
+
         }
     }
 
@@ -791,14 +818,7 @@ function WWebPerm(WOrm, url, db, getUserByToken, verifyBrowserUser, verifyAppUse
         c = replace(c, '/mperm/', '{sfd}/') //方法同genEntry
         c = replace(c, '{sfd}', subfolder)
         c = replace(c, '{urlRedirect}', urlRedirect)
-        c = replace(c, '{showModeEditTargets}', showModeEditTargets)
-        c = replace(c, '{showModeEditPemis}', showModeEditPemis)
-        c = replace(c, '{showModeEditGrups}', showModeEditGrups)
-        c = replace(c, '{showModeEditUsers}', showModeEditUsers)
-        c = replace(c, '{modeEditTargets}', modeEditTargets)
-        c = replace(c, '{modeEditPemis}', modeEditPemis)
-        c = replace(c, '{modeEditGrups}', modeEditGrups)
-        c = replace(c, '{modeEditUsers}', modeEditUsers)
+        c = replace(c, '{language}', language)
         fs.writeFileSync(fpEntryOut, c, 'utf8')
     }
     catch (err) {

package/src/App.vue

@@ -69,16 +69,21 @@ export default {
         //setVo, 更換ui內vo, 才能使用廣播技術, 更換語系才能用廣播通知全部組件forceUpdate
         vo.$ui.setVo(vo)
 
+        //setLang
+        let lang = get(window, '___pmwperm___.language', '')
+        vo.$ui.setLang(lang, 'app init') //初始化先讀取html內語系設定進行變更
+        // console.log('lang', lang)
+
         function loginSuccess(data) {
             console.log('login success', cloneDeep(data.user))
-            vo.$ui.updateConnState('已連線')
+            vo.$ui.updateConnState('csLogin')
             vo.$ui.updateUserToken(data.token)
             vo.$ui.updateUserSelf(data.user)
         }
 
         function loginError(data) {
             console.log('login error', cloneDeep(data))
-            vo.$ui.updateConnState(data.text)
+            vo.$ui.updateConnState('csErrLogin')
             vo.$ui.updateUserToken('')
             let urlRedirect = get(window, '___pmwperm___.urlRedirect', '')
             if (!isestr(urlRedirect)) {
@@ -121,11 +126,17 @@ export default {
     computed: {
 
         ready: function() {
-            let connState = get(this, `$store.state.connState`)
-            let webInfor = get(this, `$store.state.webInfor`)
-            let b1 = connState === '已連線'
+            //console.log('computed ready')
+
+            let vo = this
+
+            let connState = get(vo, `$store.state.connState`)
+            let webInfor = get(vo, `$store.state.webInfor`)
+
+            let b1 = connState === 'csLogin'
             let b2 = iseobj(webInfor)
             let b = b1 && b2
+
             return b
         },
 

package/src/components/Layout.vue

@@ -21,13 +21,23 @@
 
             <div style="width:100%;"></div>
 
-            <div style="padding-right:10px; white-space:nowrap">
+            <div
+                style="padding-right:10px; white-space:nowrap"
+                v-if="showLangSelect"
+            >
                 <WTextSelect
                     style="width:100px;"
-                    :items="tgLangs"
-                    v-model="tgLangSelect"
-                    @input="changeLang"
-                ></WTextSelect>
+                    :items="langKeys"
+                    :value="lang"
+                    @input="toggleLang"
+                >
+                    <template v-slot:select="props">
+                        {{getLangText(props.item)}}
+                    </template>
+                    <template v-slot:item="props">
+                        {{getLangText(props.item)}}
+                    </template>
+                </WTextSelect>
             </div>
 
         </div>
@@ -61,41 +71,49 @@ export default {
     },
     data: function() {
         return {
-
             mdiMenu,
-            // menuKey: 'blocks',
-            userName: 'tester',
-
-            tgLangs: [
-                {
-                    id: 'cht',
-                    text: '中文',
-                },
-                {
-                    id: 'eng',
-                    text: 'English',
-                },
+
+            firstSetting: true,
+
+            showLangSelect: false,
+
+            langKeys: [
+                'eng',
+                'cht',
             ],
-            tgLangSelect: {
-                id: 'cht',
-                text: '中文',
+            kpLang: {
+                'eng': 'English',
+                'cht': '中文',
             },
 
         }
     },
-    beforeMount: function() {
-        // console.log('beforeMount')
+    mounted: function() {
+        // console.log('mounted')
 
         let vo = this
 
-        //setLang
-        vo.$ui.setLang(vo.tgLangSelect.id)
+        //firstSetting
+        if (vo.firstSetting) {
+            // console.log('webInfor', vo.webInfor)
+            let showLanguage = get(vo, 'webInfor.showLanguage', '')
+            // console.log('showLanguage', showLanguage)
+            vo.showLangSelect = showLanguage === 'y'
+            let language = get(vo, 'webInfor.language', '')
+            // console.log('language', language)
+            vo.$ui.setLang(language, 'layout mounted')
+            vo.firstSetting = false
+        }
 
     },
     computed: {
 
         viewState: function() {
-            return get(this, `$store.state.viewState`, '')
+            //console.log('computed viewState')
+
+            let vo = this
+
+            return get(vo, `$store.state.viewState`, '')
         },
 
         heightToolbar: function() {
@@ -106,6 +124,11 @@ export default {
             return get(vo, `$store.state.heightToolbar`, 0)
         },
 
+        webInfor: function() {
+            let wi = get(this, `$store.state.webInfor`)
+            return wi
+        },
+
         webName: {
             get() {
                 let vo = this
@@ -113,8 +136,8 @@ export default {
                 // console.log('get webName1', c)
                 if (!isestr(c)) {
                     c = vo.$t('waitingData')
+                    // console.log('get webName2', c)
                 }
-                // console.log('get webName2', c)
                 document.title = c //更換網頁title
                 return c
             },
@@ -128,17 +151,38 @@ export default {
 
             let vo = this
 
-            return get(vo, `$store.state.webInfor.webLogo`, '')
+            return get(vo, `webInfor.webLogo`, '')
+        },
+
+        lang: function() {
+            //console.log('computed webLogo')
+
+            let vo = this
+
+            return get(vo, `$store.state.lang`, '')
         },
 
     },
     methods: {
 
-        changeLang: function(msg) {
-            // console.log('methods changeLang', msg)
+        getLangText: function(lang) {
+            // console.log('methods getLangText', lang)
+
+            let vo = this
+
+            let t = get(vo, `kpLang.${lang}`, '')
+
+            return t
+        },
+
+        toggleLang: function(lang) {
+            // console.log('methods toggleLang', lang)
+
             let vo = this
-            let lang = msg.id
-            vo.$ui.setLang(lang)
+
+            //setLang
+            vo.$ui.setLang(lang, 'toggle')
+
         },
 
     }

package/src/components/LayoutContentGrups.vue

@@ -229,6 +229,8 @@ import cloneDeep from 'lodash-es/cloneDeep.js'
 import haskey from 'wsemi/src/haskey.mjs'
 import isestr from 'wsemi/src/isestr.mjs'
 import iseobj from 'wsemi/src/iseobj.mjs'
+import isnum from 'wsemi/src/isnum.mjs'
+import cdbl from 'wsemi/src/cdbl.mjs'
 import cstr from 'wsemi/src/cstr.mjs'
 import arrPull from 'wsemi/src/arrPull.mjs'
 import WIcon from 'w-component-vue/src/components/WIcon.vue'
@@ -311,6 +313,9 @@ export default {
                 // 'timeUpdate',
             ],
 
+            widthGrupsName: null,
+            widthGrupsDescription: null,
+
             items: [],
             itemsCheck: [],
             opt: null,
@@ -329,10 +334,15 @@ export default {
         //firstSetting
         if (vo.firstSetting) {
             // console.log('webInfor', vo.webInfor)
+
             let showModeEditGrups = get(vo, 'webInfor.showModeEditGrups', '')
             vo.showIsEditable = showModeEditGrups === 'y'
             let modeEditGrups = get(vo, 'webInfor.modeEditGrups', '')
             vo.isEditable = modeEditGrups === 'y'
+
+            vo.widthGrupsName = get(vo, 'webInfor.widthGrupsName', '')
+            vo.widthGrupsDescription = get(vo, 'webInfor.widthGrupsDescription', '')
+
             vo.firstSetting = false
         }
 
@@ -665,8 +675,8 @@ export default {
                     },
                     defHeadMinWidth: 150,
                     kpHeadWidth: {
-                        'name': 300,
-                        'description': 300,
+                        'name': isnum(vo.widthGrupsName) ? cdbl(vo.widthGrupsName) : 300,
+                        'description': isnum(vo.widthGrupsDescription) ? cdbl(vo.widthGrupsDescription) : 300,
                         'belongUsers': 300,
                         'cpemis': 300,
                         'timeCreate': 220,

package/src/components/LayoutContentPemis.vue

@@ -229,6 +229,8 @@ import cloneDeep from 'lodash-es/cloneDeep.js'
 import haskey from 'wsemi/src/haskey.mjs'
 import isestr from 'wsemi/src/isestr.mjs'
 import iseobj from 'wsemi/src/iseobj.mjs'
+import isnum from 'wsemi/src/isnum.mjs'
+import cdbl from 'wsemi/src/cdbl.mjs'
 import cstr from 'wsemi/src/cstr.mjs'
 import arrPull from 'wsemi/src/arrPull.mjs'
 import WIcon from 'w-component-vue/src/components/WIcon.vue'
@@ -311,6 +313,9 @@ export default {
                 // 'timeUpdate',
             ],
 
+            widthPemisName: null,
+            widthPemisDescription: null,
+
             items: [],
             itemsCheck: [],
             opt: null,
@@ -329,10 +334,15 @@ export default {
         //firstSetting
         if (vo.firstSetting) {
             // console.log('webInfor', vo.webInfor)
+
             let showModeEditPemis = get(vo, 'webInfor.showModeEditPemis', '')
             vo.showIsEditable = showModeEditPemis === 'y'
             let modeEditPemis = get(vo, 'webInfor.modeEditPemis', '')
             vo.isEditable = modeEditPemis === 'y'
+
+            vo.widthPemisName = get(vo, 'webInfor.widthPemisName', '')
+            vo.widthPemisDescription = get(vo, 'webInfor.widthPemisDescription', '')
+
             vo.firstSetting = false
         }
 
@@ -665,8 +675,8 @@ export default {
                     },
                     defHeadMinWidth: 150,
                     kpHeadWidth: {
-                        'name': 300,
-                        'description': 300,
+                        'name': isnum(vo.widthPemisName) ? cdbl(vo.widthPemisName) : 300,
+                        'description': isnum(vo.widthPemisDescription) ? cdbl(vo.widthPemisDescription) : 300,
                         'belongGrups': 300,
                         'crules': 300,
                         'timeCreate': 220,

package/src/components/LayoutContentTargets.vue

@@ -226,6 +226,8 @@ import cloneDeep from 'lodash-es/cloneDeep.js'
 import haskey from 'wsemi/src/haskey.mjs'
 import isestr from 'wsemi/src/isestr.mjs'
 import iseobj from 'wsemi/src/iseobj.mjs'
+import isnum from 'wsemi/src/isnum.mjs'
+import cdbl from 'wsemi/src/cdbl.mjs'
 import cstr from 'wsemi/src/cstr.mjs'
 import arrPull from 'wsemi/src/arrPull.mjs'
 import WIcon from 'w-component-vue/src/components/WIcon.vue'
@@ -302,6 +304,9 @@ export default {
                 // 'timeUpdate',
             ],
 
+            widthTargetId: null,
+            widthTargetDescription: null,
+
             items: [],
             itemsCheck: [],
             opt: null,
@@ -316,10 +321,15 @@ export default {
         //firstSetting
         if (vo.firstSetting) {
             // console.log('webInfor', vo.webInfor)
+
             let showModeEditTargets = get(vo, 'webInfor.showModeEditTargets', '')
             vo.showIsEditable = showModeEditTargets === 'y'
             let modeEditTargets = get(vo, 'webInfor.modeEditTargets', '')
             vo.isEditable = modeEditTargets === 'y'
+
+            vo.widthTargetId = get(vo, 'webInfor.widthTargetId', '')
+            vo.widthTargetDescription = get(vo, 'webInfor.widthTargetDescription', '')
+
             vo.firstSetting = false
         }
 
@@ -571,8 +581,8 @@ export default {
                     },
                     defHeadMinWidth: 150,
                     kpHeadWidth: {
-                        'id': 300,
-                        'description': 300,
+                        'id': isnum(vo.widthTargetId) ? cdbl(vo.widthTargetId) : 600,
+                        'description': isnum(vo.widthTargetId) ? cdbl(vo.widthTargetId) : 600,
                         'timeCreate': 220,
                         'timeUpdate': 220,
                     },

package/src/components/LayoutContentUsers.vue

@@ -228,6 +228,8 @@ import cloneDeep from 'lodash-es/cloneDeep.js'
 import haskey from 'wsemi/src/haskey.mjs'
 import isestr from 'wsemi/src/isestr.mjs'
 import iseobj from 'wsemi/src/iseobj.mjs'
+import isnum from 'wsemi/src/isnum.mjs'
+import cdbl from 'wsemi/src/cdbl.mjs'
 import cstr from 'wsemi/src/cstr.mjs'
 import arrPull from 'wsemi/src/arrPull.mjs'
 import WIcon from 'w-component-vue/src/components/WIcon.vue'
@@ -316,6 +318,10 @@ export default {
                 // 'timeUpdate',
             ],
 
+            widthUsersName: null,
+            widthUsersEmail: null,
+            widthUsersDescription: null,
+
             items: [],
             itemsCheck: [],
             opt: null,
@@ -335,10 +341,16 @@ export default {
         //firstSetting
         if (vo.firstSetting) {
             // console.log('webInfor', vo.webInfor)
+
             let showModeEditUsers = get(vo, 'webInfor.showModeEditUsers', '')
             vo.showIsEditable = showModeEditUsers === 'y'
             let modeEditUsers = get(vo, 'webInfor.modeEditUsers', '')
             vo.isEditable = modeEditUsers === 'y'
+
+            vo.widthUsersName = get(vo, 'webInfor.widthUsersName', '')
+            vo.widthUsersEmail = get(vo, 'webInfor.widthUsersEmail', '')
+            vo.widthUsersDescription = get(vo, 'webInfor.widthUsersDescription', '')
+
             vo.firstSetting = false
         }
 
@@ -644,6 +656,9 @@ export default {
                     },
                     defHeadMinWidth: 150,
                     kpHeadWidth: {
+                        'name': isnum(vo.widthUsersName) ? cdbl(vo.widthUsersName) : 200,
+                        'email': isnum(vo.widthUsersEmail) ? cdbl(vo.widthUsersEmail) : 300,
+                        'description': isnum(vo.widthUsersDescription) ? cdbl(vo.widthUsersDescription) : 300,
                         'cgrups': 300,
                         'isAdmin': 100,
                         'isActive': 100,

package/src/components/LayoutState.vue

@@ -3,37 +3,49 @@
         :style="`position:absolute; top:0px; left:0px; width:100%; height:100%; transition:all 0.5s linear; display:flex; align-items:center; justify-content:center;`"
     >
 
-        <template v-if="connState==='已連線' || connState==='連線中...'">
+        <template v-if="connState==='csIng'">
 
             <img style="width:100px; height:100px;" :src="img_connection">
 
             <div style="margin-left:10px;">
                 <div style="color:#aaa;">
-                    {{connState}}
+                    {{$t('csIng')}}
                 </div>
             </div>
 
         </template>
 
-        <template v-else-if="connState==='已登出'">
+        <template v-else-if="connState==='csLogin'">
+
+            <img style="width:100px; height:100px;" :src="img_connection">
+
+            <div style="margin-left:10px;">
+                <div style="color:#aaa;">
+                    {{$t('csLogin')}}
+                </div>
+            </div>
+
+        </template>
+
+        <template v-else-if="connState==='csLogout'">
 
             <img style="width:75px; height:75px;" :src="img_logout">
 
             <div style="margin-left:10px;">
                 <div style="color:#aaa;">
-                    {{connState}}
+                    {{$t('csLogout')}}
                 </div>
             </div>
 
         </template>
 
-        <template v-else-if="connState==='無法連線'">
+        <template v-else-if="connState==='csErrConn'">
 
             <img style="width:75px; height:75px;" :src="img_dissconnection">
 
             <div style="margin-left:10px;">
                 <div style="color:#aaa;">
-                    {{connState}}
+                    {{$t('csErrConn')}}
                 </div>
             </div>
 
@@ -45,7 +57,7 @@
 
             <div style="margin-left:10px;">
                 <div style="color:#aaa;">
-                    {{connState}}
+                    {{$t('csErrLogin')}}
                 </div>
             </div>
 
@@ -55,7 +67,7 @@
 </template>
 
 <script>
-import get from 'lodash-es/get.js'
+import get from 'lodash-es/get.js'
 
 
 export default {