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>