w-web-api 1.0.52 → 1.0.53

package/src/components/Common/LoadingWinBar.vue

@@ -0,0 +1,114 @@
+<template>
+    <WDialog
+        :show.sync="loading"
+        :maxWidth="dialogWidth"
+        @resize="resizeDialog"
+    >
+
+        <template v-slot:panel>
+
+            <div :style="`padding:${barPadding-5}px ${barPadding}px ${barPadding}px ${barPadding}px;`">
+
+                <div style="padding-bottom:3px; font-size:0.9rem; color:#666;">
+
+                    <span v-if="msg!==''">{{msg}}</span>
+
+                    <span v-else>{{$t('processing')}}</span>
+
+                </div>
+
+                <WProgressBar
+                    :style="`width:${barWidth}px;`"
+                    :height="3"
+                    :enableContinuous="true"
+                    :progColor="'deep-purple lighten-1'"
+                    :progBackgroundColor="'deep-purple lighten-4'"
+                ></WProgressBar>
+
+            </div>
+
+        </template>
+
+    </WDialog>
+</template>
+
+<script>
+import Vue from 'vue'
+import get from 'lodash-es/get.js'
+import WDialog from 'w-component-vue/src/components/WDialog.vue'
+import WProgressBar from 'w-component-vue/src/components/WProgressBar.vue'
+
+
+export default {
+    components: {
+        WDialog,
+        WProgressBar,
+    },
+    props: {
+    },
+    data: function() {
+        return {
+
+            dialogWidth: 0,
+            dialogWidthMax: 600,
+
+            barPadding: 20,
+            barWidth: 0,
+            msg: '',
+
+        }
+    },
+    mounted: function() {
+        //console.log('mounted')
+
+        let vo = this
+
+        //set
+        Vue.prototype.$dg.setLoadingWinBarMessage = vo.setMessage
+
+    },
+    computed: {
+
+        loading: function() {
+            let vo = this
+            let b = get(vo, `$store.state.loading`)
+            // console.log('loading', b)
+            return b
+        },
+
+    },
+    methods: {
+
+        setMessage: function(msg) {
+            this.msg = msg
+        },
+
+        resizeDialog: function(msg) {
+            // console.log('methods resizeDialog', msg)
+
+            let vo = this
+
+            let w = window.innerWidth
+            // console.log('window.innerWidth', window.innerWidth)
+
+            //dialogWidth
+            let dialogWidth = w - vo.barPadding * 2
+            dialogWidth = Math.max(dialogWidth, 0)
+            dialogWidth = Math.min(dialogWidth, vo.dialogWidthMax)
+            vo.dialogWidth = dialogWidth
+            // console.log('dialogWidth', dialogWidth)
+
+            //barWidth
+            let barWidth = dialogWidth - vo.barPadding * 2
+            barWidth = Math.max(barWidth, 0)
+            vo.barWidth = barWidth
+            // console.log('barWidth', barWidth)
+
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/Layout.vue

@@ -1,8 +1,8 @@
 <template>
-    <div style="height:100svh; background:#f5f5f5;">
+    <div style="height:100svh; background:var(--bg-2);">
 
         <!-- menu top, 因窄版導致名稱換行故須使用overflow-y:hidden -->
-        <div :style="`height:${heightToolbar}px; overflow-y:hidden; padding:0px 10px; background:#fff; border-bottom:1px solid #ccc; display:flex; align-items:center;`">
+        <div :style="`height:${heightToolbar}px; box-sizing:border-box; overflow-y:hidden; padding:0px 10px; background:var(--bg-1); border-bottom:1px solid var(--border); display:flex; align-items:center;`">
 
             <WButtonCircle
                 :icon="'mdi-menu'"
@@ -20,8 +20,8 @@
                     </div>
 
                     <div>
-                        <div style="font-size:1.2rem; color:#000;">{{webName}}</div>
-                        <div style="font-size:0.8rem; color:#666;">{{$t('webDescription')}}</div>
+                        <div style="font-size:var(--fs-h3); color:var(--c-1); font-weight:600;">{{webName}}</div>
+                        <div style="font-size:var(--fs-xs); color:var(--c-2);">{{$t('webDescription')}}</div>
                     </div>
 
                 </div>
@@ -106,9 +106,10 @@ export default {
             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')
+            //setLang(null)：改走 getLang 解析（URL ?lang= > store > window 注入之 server 語系），
+            //不再用 webInfor.language 明確覆蓋（否則會蓋掉 URL ?lang= 與使用者切換）。server 初始語系已由
+            //window.___pmwperm___.language（WWebApi 注入 index.html）提供，getLang 會取得。
+            vo.$ui.setLang(null, 'layout mounted')
             vo.firstSetting = false
         }