github.com/easysoft/zendata@v0.0.0-20240513203326-705bd5a7fd67/ui/src/layout/Header.vue (about) 1 <template> 2 <div class="header"> 3 <h2 class="left"> 4 <a href="https://www.zendata.cn" target="_blank" :title="$t('site.title')"> 5 <img :src="logoPath" :alt="$t('site.title')"> 6 </a> 7 </h2> 8 <div class="center"> 9 <Navbar /> 10 </div> 11 <div class="right"> 12 <div class="dir"> 13 <div> 14 <span> 15 <Icon type="folder-open" /> {{ $t('msg.workdir') }} | 16 </span> 17 <a-button @click="syncData" size="small" type="link" class="btn link"> 18 <Icon type="sync" :title="$t('msg.help')" /> 19 <span class="link">{{ $t('action.import.from.file') }}</span> 20 </a-button> 21 </div> 22 <code>{{ workDir }}</code> 23 </div> 24 <select-lang :prefixCls="'select-lang'" /> 25 <a href="https://www.zendata.cn/book/zendata/" target="_blank" class="link"> 26 <span class="link"> 27 <Icon type="question-circle" :title="$t('msg.help')" :style="{ fontSize: '18px' }" /> 28 </span> 29 </a> 30 <div v-if="isElectron" id="windowBtn"> 31 <span v-if="!fullScreenDef" @click="fullScreen" :title="$t('window.fullscreen')" class="window-btn"> 32 <Icon type="fullscreen" class="window-btn" :style="{ fontSize: '18px' }" /> 33 </span> 34 <span v-if="fullScreenDef" @click="fullScreen" :title="$t('window.exit_fullscreen')" class="window-btn"> 35 <Icon type="fullscreen-exit" class="window-btn" :style="{ fontSize: '18px' }" /> 36 </span> 37 38 <span :title="$t('window.minimize')" @click="minimize" class="window-btn"> 39 <Icon type="minus" class="window-btn" :style="{ fontSize: '18px' }" /> 40 </span> 41 42 <span v-if="maximizeDef" :title="$t('window.restore')" @click="maximize" class="window-btn"> 43 <Icon type="block" :style="{ fontSize: '18px' }" /> 44 </span> 45 <span v-if="!maximizeDef" :title="$t('window.maximize')" @click="maximize" class="window-btn"> 46 <Icon type="border" class="window-btn" :style="{ fontSize: '18px' }" /> 47 </span> 48 49 <span :title="$t('window.close')" @click="exit" class="window-btn"> 50 <Icon type="close" class="window-btn" :style="{ fontSize: '18px' }" /> 51 </span> 52 </div> 53 </div> 54 </div> 55 </template> 56 57 <script> 58 import { Icon } from 'ant-design-vue' 59 import { getWorkDir, syncData } from "../api/manage"; 60 import { config } from "../utils/vari"; 61 import SelectLang from '../components/SelectLang' 62 import Navbar from './Navbar'; 63 import { getPath } from "@/utils/dom"; 64 import { getElectron } from "@/utils/common"; 65 66 export default { 67 name: 'Header', 68 components: { 69 SelectLang, 70 Icon, 71 Navbar, 72 }, 73 data() { 74 return { 75 workDir: '', 76 logoPath: '', 77 maximizeDef: true, 78 fullScreenDef: false, 79 isElectron: getElectron(), 80 } 81 }, 82 created() { 83 this.logoPath = getPath() + 'logo.png' 84 85 getWorkDir().then(json => { 86 this.workDir = json.data 87 config.workDir = this.workDir 88 }) 89 }, 90 methods: { 91 syncData() { 92 syncData().then(json => { 93 if (json.code == 0) { 94 this.$router.go(0) 95 96 // this.$notification['success']({ 97 // message: this.$i18n.t('tips.success.to.import'), 98 // duration: 3, 99 // }); 100 } 101 }) 102 }, 103 fullScreen() { 104 console.log('fullScreen') 105 this.fullScreenDef = !this.fullScreenDef 106 107 const { ipcRenderer } = window.require('electron') 108 ipcRenderer.send('electronMsg', 'fullScreen') 109 }, 110 111 minimize() { 112 console.log('minimize') 113 114 const { ipcRenderer } = window.require('electron') 115 ipcRenderer.send('electronMsg', 'minimize') 116 }, 117 maximize() { 118 console.log('maximize') 119 120 const { ipcRenderer } = window.require('electron') 121 ipcRenderer.send('electronMsg', this.maximizeDef ? 'unmaximize' : 'maximize') 122 this.maximizeDef = !this.maximizeDef 123 }, 124 125 exit() { 126 console.log('exit') 127 const { ipcRenderer } = window.require('electron') 128 ipcRenderer.send('electronMsg', 'exit') 129 } 130 }, 131 } 132 </script> 133 134 <style lang="less" scoped> 135 .header { 136 display: flex; 137 height: 49px; 138 line-height: 49px; 139 140 a { 141 color: #fff; 142 } 143 144 .left { 145 margin: 0 15px; 146 flex: none; 147 148 >a { 149 display: block; 150 151 img { 152 height: 38px; 153 display: block; 154 margin-top: 5px; 155 } 156 } 157 } 158 159 .center { 160 flex: 1; 161 } 162 163 .right { 164 margin: 0 15px; 165 display: flex; 166 align-items: center; 167 168 .dir { 169 padding: 0 20px 3px 10px; 170 font-size: 12px; 171 line-height: 13px; 172 173 div>span { 174 opacity: .6; 175 } 176 177 .btn { 178 font-size: 12px; 179 color: #fff; 180 } 181 } 182 183 .window-btn { 184 margin-left: 8px; 185 cursor: pointer; 186 } 187 } 188 189 .select-lang { 190 padding-right: 15px; 191 cursor: pointer; 192 } 193 }</style>