telws-common-frontend/src/views/Home.vue

<template>
  <v-container>
    <v-row
      align="center"
      justify="center"
    >
      <v-col
        class="text-center"
        cols="12"
      >
        <h1 class="display-1 font-weight-bold mb-4">{{ getProjectName() }}</h1>
        <h4 class="subheading">Web Console</h4>
      </v-col>
    </v-row>
    <v-row justify="center">
      <v-col cols="8">
        <v-card>
          <v-card-title class="headline">About {{ getProjectName() }}</v-card-title>
          <v-card-text>
            <p>{{ getProjectDescription() }}</p>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
    <v-row justify="center">
      <v-col cols="8">
        <v-card>
          <v-card-title class="headline">Getting Start</v-card-title>
          <v-card-text>
            <v-list-item>
              <v-list-item-icon>
                <h3>1</h3>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>Select <v-chip>
                    <v-icon>mdi-console</v-icon> Console
                  </v-chip> on the left navigator drawer.</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-icon>
                <h3>2</h3>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>Click <v-chip>
                    <v-icon>mdi-lan-connect</v-icon>
                  </v-chip> to connect to CLI server.</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-icon>
                <h3>3</h3>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>Just do with the console.</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
    <v-row justify="center">
      <v-col cols="8">
        <v-card>
          <v-card-title class="headline">About This Web Console</v-card-title>
          <v-card-text>
            <p>This web console is powered by the framework <a
                href="https://git.swzry.com/zry/telws-common-frontend"
                target="_blank"
              >Telws-Common-Frontend</a> (By <a
                href="http://www.swzry.com/"
                target="_blank"
              >ZRY</a>). </p>
            <p>
              Telws-Common-Frontend is powered by these packages by ZRY: <br /> 
              <a href="https://git.swzry.com/zry/satori-telws" target="_blank">satori-telws</a>
              &nbsp;,&nbsp;
              <a href="https://git.swzry.com/zry/xterm-vue" target="_blank">xterm-vue</a>
              &nbsp;,&nbsp;
              <a href="https://git.swzry.com/zry/go-hhc-cli" target="_blank">go-hhc-cli</a>
              &nbsp;,&nbsp;
              <a href="https://git.swzry.com/zry/gorillaws2netconn" target="_blank">gorillaws2netconn</a>
              &nbsp;,&nbsp;......
            </p>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["getProjectName", "getProjectDescription"])
  }
};
</script>