skywalking 8.1.0 的ui页面 本地化改造

版本

Skywalking 8.1.0

背景

所在项目需要将skywalking 8.1.0 的ui页面 本地化改造,方便方便集成到公司的监控平台

1、要去除仪表盘、拓扑图等模块,只留追踪模块;

2、需要对页面样式做调整,保证风格一致

3、项目中有对端口做规划,需要修改默认端口

 

端口修改

 

1、原配置 skywalking/config/application.yml

core:
  selector: ${SW_CORE:default}
  default:
    # Mixed: Receive agent data, Level 1 aggregate, Level 2 aggregate
    # Receiver: Receive agent data, Level 1 aggregate
    # Aggregator: Level 2 aggregate
    role: ${SW_CORE_ROLE:Mixed} # Mixed/Receiver/Aggregator
    restHost: ${SW_CORE_REST_HOST:0.0.0.0}
    restPort: ${SW_CORE_REST_PORT:12800}
    restContextPath: ${SW_CORE_REST_CONTEXT_PATH:/}
    restMinThreads: ${SW_CORE_REST_JETTY_MIN_THREADS:1}
    restMaxThreads: ${SW_CORE_REST_JETTY_MAX_THREADS:200}
    restIdleTimeOut: ${SW_CORE_REST_JETTY_IDLE_TIMEOUT:30000}
    restAcceptorPriorityDelta: ${SW_CORE_REST_JETTY_DELTA:0}
    restAcceptQueueSize: ${SW_CORE_REST_JETTY_QUEUE_SIZE:0}
    gRPCHost: ${SW_CORE_GRPC_HOST:0.0.0.0}
    gRPCPort: ${SW_CORE_GRPC_PORT:11800}
    gRPCSslEnabled: ${SW_CORE_GRPC_SSL_ENABLED:false}
    gRPCSslKeyPath: ${SW_CORE_GRPC_SSL_KEY_PATH:""}
    gRPCSslCertChainPath: ${SW_CORE_GRPC_SSL_CERT_CHAIN_PATH:""}
    gRPCSslTrustedCAPath: ${SW_CORE_GRPC_SSL_TRUSTED_CA_PATH:""}

修改restPort: 12800 为 12002 ; 修改gRPCPort: 11800 为 12001;

 

2、原配置

server:
  port: 8080

collector:
  path: /graphql
  ribbon:
    ReadTimeout: 10000
    # Point to all backend's restHost:restPort, split by ,
    listOfServers: 127.0.0.1:12800

修改 server.port 8080 为12000

修改 127.0.0.1:12800 为 127.0.0.1:12002

下载skywalking 源码

https://github.com/apache/skywalking-rocketbot-ui/tree/v8.1.0

skywalking UI 项目为 skywalking-rocketbot-ui

 

下载后运行

npm install
npm run serve

页面修改

rk-header.vue

修改前

<!-- Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements.  See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<template>
  <header class="rk-header flex-h" >
    <div class="flex-h">
      <svg class="svg-logo icon" style="margin-right:35px;margin-top:-5px">
        <use xlink:href="#logo-sw"></use>
      </svg>
      <span class="grey rocketbot">Rocketbot</span>
      <router-link class="nav-link mr-20" to="/" exact>
        <svg class="icon sm vm">
          <use xlink:href="#chart"></use>
        </svg>
        <span class="vm hide-xs ml-5">{{ this.$t('dashboard') }}</span>
      </router-link>
      <router-link class="nav-link mr-20" to="/topology">
        <svg class="icon sm vm">
          <use xlink:href="#issues"></use>
        </svg>
        <span class="vm hide-xs ml-5">{{ this.$t('topology') }}</span>
      </router-link>
      <router-link class="nav-link mr-20" to="/trace">
        <svg class="icon sm vm">
          <use xlink:href="#merge"></use>
        </svg>
        <span class="vm hide-xs ml-5">{{ this.$t('trace') }}</span>
      </router-link>
      <router-link class="nav-link mr-20" to="/profile">
        <svg class="icon sm vm">
          <use xlink:href="#timeline"></use>
        </svg>
        <span class="vm hide-xs ml-5">{{ this.$t('profile') }}</span>
      </router-link>
      <router-link class="nav-link mr-20" to="/alarm">
        <svg class="icon sm vm">
          <use xlink:href="#spam"></use>
        </svg>
        <span class="vm hide-xs ml-5">{{ this.$t('alarm') }}</span>
      </router-link>
    </div>
    <div class="flex-h">
      <a class="rk-btn mr-5 sm" :class="auto ? 'blue' : 'ghost'" @click="handleAuto">
        <span class="vm">{{ this.$t('auto') }}</span>
      </a>
      <div class="auto-time">
        <span class="rk-auto-select">
          <input v-model="autoTime" type="number" @change="changeAutoTime" min="1" />
        </span>
        {{ this.$t('second') }}
      </div>
      <a class="rk-btn sm ghost" @click="handleReload">
        <svg class="icon mr-5 vm" :class="{ loading: auto }">
          <use xlink:href="#retry"></use>
        </svg>
        <span class="vm">{{ this.$t('reload') }}</span>
      </a>
    </div>
  </header>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator';
  import { Action, State, Getter } from 'vuex-class';
  import timeFormat from '@/utils/timeFormat';

  @Component
  export default class Header extends Vue {
    @Getter('duration') private duration: any;
    @Action('SET_DURATION') private SET_DURATION: any;
    private show: boolean = false;
    private auto: boolean = false;
    private autoTime: number = 6;
    private timer: any = null;
    private handleReload() {
      const gap = this.duration.end.getTime() - this.duration.start.getTime();
      const utcCopy: any = -(new Date().getTimezoneOffset() / 60);
      const time: Date[] = [new Date(new Date().getTime() - gap), new Date()];
      this.SET_DURATION(timeFormat(time));
    }
    private handleAuto() {
      this.auto = !this.auto;
      if (this.auto) {
        this.handleReload();
        this.timer = setInterval(this.handleReload, this.autoTime * 1000);
      } else {
        clearInterval(this.timer);
      }
    }
    private handleHide() {
      this.show = false;
    }
    private handleShow() {
      this.show = !this.show;
    }
    private handleSignout() {
      localStorage.removeItem('skywalking-authority');
      this.$router.push('/login');
    }
    private changeAutoTime() {
      clearInterval(this.timer);
      if (this.auto) {
        this.handleReload();
        this.timer = setInterval(this.handleReload, this.autoTime * 1000);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .rk-header {
    flex-shrink: 0;
    justify-content: space-between;
    height: 48px;
    padding-right: 15px;
    padding-left: 15px;
    font-size: 13px;
    color: #efefef;
    z-index: 9;
    background-color: #252a2f;
    box-shadow: 0 1px 2px 0 rgba(26, 24, 29, 0.24);
    .svg-logo {
      width: 90px;
      height: 22px;
    }
    .rocketbot {
      padding-top: 27px;
      position: absolute;
      font-size: 11px;
    }
    .logo {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      font-size: 18px;
      padding-top: 2px;
      margin-right: 50px;
    }
    .nav-link {
      padding: 4px 10px;
      border-radius: 4px;
      opacity: 0.8;
      color: #efeff1;
      will-change: opacity, background-color;
      transition: opacity 0.3s, background-color 0.3s;
    }
    .nav-link:hover,
    .nav-link.active {
      opacity: 1;
      background-color: #333844;
    }
  }
  .rk-header-user {
    display: none;
    position: relative;
  }
  .rk-header-user-menu {
    position: absolute;
    top: 35px;
    right: 0;
    background-color: #fff;
    overflow: hidden;
    border-radius: 4px;
    padding: 3px 0;
    color: #333844;
    width: 100px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.15);
  }
  .rk-header-user-menu-i {
    padding: 6px 10px;
    will-change: background-color;
    transition: background-color 0.3s;
    &:hover {
      background-color: #dededf;
    }
  }
</style>

 

修改后

<!-- Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements.  See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<template>
  <header class="rk-header flex-h" >
    <div class="flex-h">
      <svg class="svg-logo icon" style="margin-right:35px;margin-top:-5px">
        <use xlink:href="#merge"></use>
      </svg>
      <span class="grey rocketbot"></span>
      <router-link class="nav-link mr-20" style="display:none" to="/" exact>
        <svg class="icon sm vm">
          <use xlink:href="#chart"></use>
        </svg>
        <span class="vm hide-xs ml-5">{{ this.$t('dashboard') }}</span>
      </router-link>
      <router-link class="nav-link mr-20" style="display:none" to="/topology">
        <svg class="icon sm vm">
          <use xlink:href="#issues"></use>
        </svg>
        <span class="vm hide-xs ml-5" >{{ this.$t('topology') }}</span>
      </router-link>
      <router-link class="nav-link mr-20" style="display:none" to="/trace">
        <svg class="icon sm vm">
          <use xlink:href="#merge"></use>
        </svg>
        <span class="vm hide-xs ml-5">{{ this.$t('trace') }}</span>
      </router-link>
      <router-link class="nav-link mr-20" style="display:none" to="/profile">
        <svg class="icon sm vm">
          <use xlink:href="#timeline"></use>
        </svg>
        <span class="vm hide-xs ml-5">{{ this.$t('profile') }}</span>
      </router-link>
      <router-link class="nav-link mr-20" style="display:none" to="/alarm">
        <svg class="icon sm vm">
          <use xlink:href="#spam"></use>
        </svg>
        <span class="vm hide-xs ml-5">{{ this.$t('alarm') }}</span>
      </router-link>
    </div>
    <div class="flex-h">
      <a class="rk-btn mr-5 sm" :class="auto ? 'blue' : 'ghost'" @click="handleAuto">
        <span class="vm">{{ this.$t('auto') }}</span>
      </a>
      <div class="auto-time">
        <span class="rk-auto-select">
          <input v-model="autoTime" type="number" @change="changeAutoTime" min="1" />
        </span>
        {{ this.$t('second') }}
      </div>
      <a class="rk-btn sm ghost" @click="handleReload">
        <svg class="icon mr-5 vm" :class="{ loading: auto }">
          <use xlink:href="#retry"></use>
        </svg>
        <span class="vm">{{ this.$t('reload') }}</span>
      </a>
    </div>
  </header>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator';
  import { Action, State, Getter } from 'vuex-class';
  import timeFormat from '@/utils/timeFormat';

  @Component
  export default class Header extends Vue {
    @Getter('duration') private duration: any;
    @Action('SET_DURATION') private SET_DURATION: any;
    private show: boolean = false;
    private auto: boolean = false;
    private autoTime: number = 6;
    private timer: any = null;
    private handleReload() {
      const gap = this.duration.end.getTime() - this.duration.start.getTime();
      const utcCopy: any = -(new Date().getTimezoneOffset() / 60);
      const time: Date[] = [new Date(new Date().getTime() - gap), new Date()];
      this.SET_DURATION(timeFormat(time));
    }
    private handleAuto() {
      this.auto = !this.auto;
      if (this.auto) {
        this.handleReload();
        this.timer = setInterval(this.handleReload, this.autoTime * 1000);
      } else {
        clearInterval(this.timer);
      }
    }
    private handleHide() {
      this.show = false;
    }
    private handleShow() {
      this.show = !this.show;
    }
    private handleSignout() {
      localStorage.removeItem('skywalking-authority');
      this.$router.push('/login');
    }
    private changeAutoTime() {
      clearInterval(this.timer);
      if (this.auto) {
        this.handleReload();
        this.timer = setInterval(this.handleReload, this.autoTime * 1000);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .rk-header {
    flex-shrink: 0;
    justify-content: space-between;
    height: 48px;
    padding-right: 15px;
    padding-left: 15px;
    font-size: 13px;
    color: #666;
    z-index: 9;
    background-color: #d8e6fc;
    box-shadow: 0 1px 2px 0 rgba(26, 24, 29, 0.24);
    .svg-logo {
      width: 90px;
      height: 22px;
    }
    .rocketbot {
      padding-top: 27px;
      position: absolute;
      font-size: 11px;
    }
    .logo {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      font-size: 18px;
      padding-top: 2px;
      margin-right: 50px;
    }
    .nav-link {
      padding: 4px 10px;
      border-radius: 4px;
      opacity: 0.8;
      color: #efeff1;
      will-change: opacity, background-color;
      transition: opacity 0.3s, background-color 0.3s;
    }
    .nav-link:hover,
    .nav-link.active {
      opacity: 1;
      background-color: #333844;
    }
  }
  .rk-header-user {
    display: none;
    position: relative;
  }
  .rk-header-user-menu {
    position: absolute;
    top: 35px;
    right: 0;
    background-color: #fff;
    overflow: hidden;
    border-radius: 4px;
    padding: 3px 0;
    color: #333844;
    width: 100px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.15);
  }
  .rk-header-user-menu-i {
    padding: 6px 10px;
    will-change: background-color;
    transition: background-color 0.3s;
    &:hover {
      background-color: #dededf;
    }
  }
</style>

rk-button.vue

 

修改前

<!-- Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements.  See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<template>
  <a class="rk-btn" :class="{ size, ghost: ghost }" @click.stop="$emit('click')">
    <svg v-if="icon" class="icon"><use :xlink:href="`#${icon}`"></use></svg>
    <slot />
  </a>
</template>
<script lang="ts">
  import Vue from 'vue';
  import { Component, Prop } from 'vue-property-decorator';

  @Component
  export default class RkBtn extends Vue {
    @Prop({ default: '' }) private size!: string;
    @Prop({ default: '' }) private icon!: string;
    @Prop({ default: false }) private ghost!: boolean;
  }
</script>
<style lang="scss">
  .rk-btn {
    display: inline-block;
    line-height: 26px;
    padding: 0 7px;
    background-color: #448dfe;
    border-radius: 4px;
    color: #fff;
    transition: background-color 0.3s;
    .icon {
      margin-top: -2px;
    }
    &.sm {
      line-height: 24px;
    }
    &.lg {
      line-height: 30px;
    }
    &.ghost {
      background-color: transparent;
    }
    &:hover {
      background-color: #357de9;
    }
  }
</style>

修改后

<!-- Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements.  See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<template>
  <a class="rk-btn" :class="{ size, ghost: ghost }" @click.stop="$emit('click')">
    <svg v-if="icon" class="icon"><use :xlink:href="`#${icon}`"></use></svg>
    <slot />
  </a>
</template>
<script lang="ts">
  import Vue from 'vue';
  import { Component, Prop } from 'vue-property-decorator';

  @Component
  export default class RkBtn extends Vue {
    @Prop({ default: '' }) private size!: string;
    @Prop({ default: '' }) private icon!: string;
    @Prop({ default: false }) private ghost!: boolean;
  }
</script>
<style lang="scss">
  .rk-btn {
    display: inline-block;
    line-height: 26px;
    padding: 0 7px;
    background-color: #6fdcfe !important;
    border-radius: 4px;
    color: #fff;
    transition: background-color 0.3s;
    .icon {
      margin-top: -2px;
    }
    &.sm {
      line-height: 24px;
    }
    &.lg {
      line-height: 30px;
    }
    &.ghost {
      background-color: transparent;
    }
    &:hover {
      background-color: #357de9 !important;
    }
  }
</style>

 

trace-search.vue

<!-- Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements.  See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->

<template>
  <div class="rk-trace-search">
    <div>
      <a class="rk-trace-clear-btn r" @click="status = !status">
        <span class="mr-5 vm">{{ this.$t('more') }}</span>
        <svg class="icon trans vm" :style="`transform: rotate(${status ? 180 : 0}deg);`">
          <use xlink:href="#arrow-down"></use>
        </svg>
      </a>
      <a class="rk-trace-search-btn bg-blue r mr-10" @click="getTraceList">
        <svg class="icon mr-5 vm">
          <use xlink:href="#search"></use>
        </svg>
        <span class="vm">{{ this.$t('search') }}</span>
      </a>
      <a class="rk-trace-clear-btn r mr-10" @click="clearSearch">
        <svg class="icon mr-5 vm">
          <use xlink:href="#clear"></use>
        </svg>
        <span class="vm">{{ this.$t('clear') }}</span>
      </a>
      <div class="flex-h">
        <TraceSelect
          :hasSearch="true"
          :title="this.$t('service')"
          :value="service"
          @input="chooseService"
          :data="rocketTrace.services"
        />
        <TraceSelect :hasSearch="true" :title="this.$t('instance')" v-model="instance" :data="rocketTrace.instances" />
        <TraceSelect
          :title="this.$t('status')"
          :value="traceState"
          @input="chooseStatus"
          :data="[
            { label: 'All', key: 'ALL' },
            { label: 'Success', key: 'SUCCESS' },
            { label: 'Error', key: 'ERROR' },
          ]"
        />
        <div class="mr-10" style="padding: 3px 15px 0">
          <div class="sm grey">{{ this.$t('endpointName') }}</div>
          <input type="text" v-model="endpointName" class="rk-trace-search-input" />
        </div>
      </div>
    </div>
    <div class="rk-trace-search-more flex-h" v-show="status">
      <div class="mr-15">
        <span class="sm b grey mr-10">{{ this.$t('traceID') }}:</span>
        <input type="text" v-model="traceId" class="rk-trace-search-input dib" />
      </div>
      <div class="mr-15">
        <span class="sm b grey mr-10">{{ this.$t('duration') }}:</span>
        <div class="rk-trace-search-range dib">
          <input class="vm tc" v-model="minTraceDuration" />
          <span class="grey vm">-</span>
          <input class="vm tc" v-model="maxTraceDuration" />
        </div>
      </div>
      <div>
        <span class="sm b grey mr-5">{{ this.$t('timeRange') }}:</span>
        <RkDate class="sm" v-model="time" position="bottom" format="YYYY-MM-DD HH:mm:ss" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { Duration, Option } from '@/types/global';
  import { Component, Vue, Watch } from 'vue-property-decorator';
  import { Action, Getter, Mutation, State } from 'vuex-class';
  import TraceSelect from '../common/trace-select.vue';

  @Component({ components: { TraceSelect } })
  export default class TraceSearch extends Vue {
    @State('rocketbot') private rocketbotGlobal: any;
    @State('rocketTrace') private rocketTrace: any;
    @Getter('durationTime') private durationTime: any;
    @Getter('duration') private duration: any;
    @Action('RESET_DURATION') private RESET_DURATION: any;
    @Action('rocketTrace/GET_SERVICES') private GET_SERVICES: any;
    @Action('rocketTrace/GET_INSTANCES') private GET_INSTANCES: any;
    @Action('rocketTrace/GET_TRACELIST') private GET_TRACELIST: any;
    @Action('rocketTrace/SET_TRACE_FORM') private SET_TRACE_FORM: any;
    @Mutation('rocketTrace/SET_TRACE_FORM_ITEM')
    private SET_TRACE_FORM_ITEM: any;
    private service: Option = { label: 'All', key: '' };
    private time!: Date[];
    private status: boolean = true;
    private maxTraceDuration: string = localStorage.getItem('maxTraceDuration') || '';
    private minTraceDuration: string = localStorage.getItem('minTraceDuration') || '';
    private instance: Option = { label: 'All', key: '' };
    private endpointName: string = localStorage.getItem('endpointName') || '';
    private traceId: string = localStorage.getItem('traceId') || '';
    private traceState: Option = { label: 'All', key: 'ALL' };

    private dateFormat(date: Date, step: string) {
      const year = date.getFullYear();
      const monthTemp = date.getMonth() + 1;
      let month: string = `${monthTemp}`;
      if (monthTemp < 10) {
        month = `0${monthTemp}`;
      }

      const dayTemp = date.getDate();
      let day: string = `${dayTemp}`;
      if (dayTemp < 10) {
        day = `0${dayTemp}`;
      }
      if (step === 'DAY' || step === 'MONTH') {
        return `${year}-${month}-${day}`;
      }
      const hourTemp = date.getHours();
      let hour: string = `${hourTemp}`;
      if (hourTemp < 10) {
        hour = `0${hourTemp}`;
      }
      if (step === 'HOUR') {
        return `${year}-${month}-${day} ${hour}`;
      }
      const minuteTemp = date.getMinutes();
      let minute: string = `${minuteTemp}`;
      if (minuteTemp < 10) {
        minute = `0${minuteTemp}`;
      }
      if (step === 'MINUTE') {
        return `${year}-${month}-${day} ${hour}${minute}`;
      }
    }

    private globalTimeFormat(time: Date[]) {
      let step = 'MINUTE';
      const unix = Math.round(time[1].getTime()) - Math.round(time[0].getTime());
      if (unix <= 60 * 60 * 1000) {
        step = 'MINUTE';
      } else if (unix <= 24 * 60 * 60 * 1000) {
        step = 'HOUR';
      } else {
        step = 'DAY';
      }
      return {
        start: this.dateFormat(time[0], step),
        end: this.dateFormat(time[1], step),
        step,
      };
    }

    private chooseService(i: any) {
      if (this.service.key === i.key) {
        return;
      }
      this.instance = { label: 'All', key: '' };
      this.service = i;
      if (i.key === '') {
        return;
      }
      this.GET_INSTANCES({ duration: this.durationTime, serviceId: i.key });
    }

    private chooseStatus(i: any) {
      this.traceState = i;
    }

    private getTraceList() {
      this.GET_SERVICES({ duration: this.durationTime });
      const temp: any = {
        queryDuration: this.globalTimeFormat([
          new Date(
            this.time[0].getTime() +
              (parseInt(this.rocketbotGlobal.utc, 10) + new Date().getTimezoneOffset() / 60) * 3600000,
          ),
          new Date(
            this.time[1].getTime() +
              (parseInt(this.rocketbotGlobal.utc, 10) + new Date().getTimezoneOffset() / 60) * 3600000,
          ),
        ]),
        traceState: this.traceState.key,
        paging: { pageNum: 1, pageSize: 15, needTotal: true },
        queryOrder: this.rocketTrace.traceForm.queryOrder,
      };

      if (this.service.key) {
        temp.serviceId = this.service.key;
      }
      if (this.instance.key) {
        temp.serviceInstanceId = this.instance.key;
      }
      if (this.maxTraceDuration) {
        temp.maxTraceDuration = this.maxTraceDuration;
        localStorage.setItem('maxTraceDuration', this.maxTraceDuration);
      }
      if (this.minTraceDuration) {
        temp.minTraceDuration = this.minTraceDuration;
        localStorage.setItem('minTraceDuration', this.minTraceDuration);
      }
      if (this.endpointName) {
        temp.endpointName = this.endpointName;
        localStorage.setItem('endpointName', this.endpointName);
      }
      if (this.traceId) {
        temp.traceId = this.traceId;
        localStorage.setItem('traceId', this.traceId);
      }
      this.SET_TRACE_FORM(temp);

      this.$eventBus.$emit('SET_LOADING_TRUE', () => {
        this.GET_TRACELIST().then(() => {
          this.$eventBus.$emit('SET_LOADING_FALSE');
        });
      });
    }

    private clearSearch() {
      this.RESET_DURATION();
      this.status = true;
      this.maxTraceDuration = '';
      localStorage.removeItem('maxTraceDuration');
      this.minTraceDuration = '';
      localStorage.removeItem('minTraceDuration');
      this.service = { label: 'All', key: '' };
      this.instance = { label: 'All', key: '' };
      this.endpointName = '';
      localStorage.removeItem('endpointName');
      this.traceId = '';
      localStorage.removeItem('traceId');
      this.traceState = { label: 'All', key: 'ALL' };
      this.SET_TRACE_FORM_ITEM({ type: 'queryOrder', data: '' });
      this.getTraceList();
    }

    @Watch('rocketbotGlobal.durationRow')
    private durationRowWatch(value: Duration) {
      this.time = [value.start, value.end];
    }

    private created() {
      this.endpointName = this.$route.query.endpointname
        ? this.$route.query.endpointname.toString()
        : this.endpointName;
      this.traceId = this.$route.query.traceid ? this.$route.query.traceid.toString() : this.traceId;
      this.time = [this.rocketbotGlobal.durationRow.start, this.rocketbotGlobal.durationRow.end];
    }
    private mounted() {
      this.getTraceList();
      if (this.service && this.service.key) {
        this.GET_INSTANCES({
          duration: this.durationTime,
          serviceId: this.service.key,
        });
      }
    }
  }
</script>

<style lang="scss">
  .rk-trace-search {
    flex-shrink: 0;
    background-color: #333840;
    color: #eee;
    width: 100%;
    padding: 3px 15px 8px;
  }

  .rk-trace-search-input {
    border-style: unset;
    outline: 0;
    padding: 2px 5px;
    border-radius: 3px;
  }

  .rk-trace-search-range,
  .rk-auto-select {
    border-radius: 3px;
    background-color: #fff;
    padding: 1px;
    border-radius: 3px;

    input {
      width: 38px;
      border-style: unset;
      outline: 0;
    }
  }

  .rk-trace-search-btn {
    padding: 3px 9px;
    background-color: #484b55;
    border-radius: 4px;
    margin-top: 12px;

    &.bg-blue {
      background-color: #448dfe;
    }
  }

  .rk-trace-clear-btn {
    padding: 3px 9px;
    background-color: #484b55;
    border-radius: 4px;
    margin-top: 12px;

    &.bg-warning {
      background-color: #fbb03b;
    }
  }

  .rk-trace-search-more {
    background-color: #484b55;
    padding: 4px 10px;
    border-radius: 3px;
    margin-top: 8px;
    position: relative;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);

    &:after {
      bottom: 100%;
      right: 30px;
      border: solid transparent;
      content: ' ';
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-color: rgba(0, 0, 0, 0);
      border-bottom-color: #484b55;
      border-width: 8px;
      margin-right: 0px;
    }
  }
</style>

修改后

<!-- Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements.  See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->

<template>
  <div class="rk-trace-search">
    <div>
      <a class="rk-trace-clear-btn r" @click="status = !status">
        <span class="mr-5 vm">{{ this.$t('more') }}</span>
        <svg class="icon trans vm" :style="`transform: rotate(${status ? 180 : 0}deg);`">
          <use xlink:href="#arrow-down"></use>
        </svg>
      </a>
      <a class="rk-trace-search-btn bg-blue r mr-10" @click="getTraceList">
        <svg class="icon mr-5 vm">
          <use xlink:href="#search"></use>
        </svg>
        <span class="vm">{{ this.$t('search') }}</span>
      </a>
      <a class="rk-trace-clear-btn r mr-10" @click="clearSearch">
        <svg class="icon mr-5 vm">
          <use xlink:href="#clear"></use>
        </svg>
        <span class="vm">{{ this.$t('clear') }}</span>
      </a>
      <div class="flex-h">
        <TraceSelect
          :hasSearch="true"
          :title="this.$t('service')"
          :value="service"
          @input="chooseService"
          :data="rocketTrace.services"
        />
        <TraceSelect :hasSearch="true" :title="this.$t('instance')" v-model="instance" :data="rocketTrace.instances" />
        <TraceSelect
          :title="this.$t('status')"
          :value="traceState"
          @input="chooseStatus"
          :data="[
            { label: 'All', key: 'ALL' },
            { label: 'Success', key: 'SUCCESS' },
            { label: 'Error', key: 'ERROR' },
          ]"
        />
        <div class="mr-10" style="padding: 3px 15px 0">
          <div class="sm grey" style="color: #333333">{{ this.$t('endpointName') }}</div>
          <input type="text" v-model="endpointName" class="rk-trace-search-input" />
        </div>
      </div>
    </div>
    <div class="rk-trace-search-more flex-h" v-show="status">
      <div class="mr-15">
        <span class="sm b  mr-10">{{ this.$t('traceID') }}:</span>
        <input type="text" v-model="traceId" class="rk-trace-search-input dib" />
      </div>
      <div class="mr-15">
        <span class="sm b  mr-10">{{ this.$t('duration') }}:</span>
        <div class="rk-trace-search-range dib">
          <input class="vm tc" v-model="minTraceDuration" />
          <span class=" vm">-</span>
          <input class="vm tc" v-model="maxTraceDuration" />
        </div>
      </div>
      <div>
        <span class="sm b  mr-5">{{ this.$t('timeRange') }}:</span>
        <RkDate class="sm" v-model="time" position="bottom" format="YYYY-MM-DD HH:mm:ss" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { Duration, Option } from '@/types/global';
  import { Component, Vue, Watch } from 'vue-property-decorator';
  import { Action, Getter, Mutation, State } from 'vuex-class';
  import TraceSelect from '../common/trace-select.vue';

  @Component({ components: { TraceSelect } })
  export default class TraceSearch extends Vue {
    @State('rocketbot') private rocketbotGlobal: any;
    @State('rocketTrace') private rocketTrace: any;
    @Getter('durationTime') private durationTime: any;
    @Getter('duration') private duration: any;
    @Action('RESET_DURATION') private RESET_DURATION: any;
    @Action('rocketTrace/GET_SERVICES') private GET_SERVICES: any;
    @Action('rocketTrace/GET_INSTANCES') private GET_INSTANCES: any;
    @Action('rocketTrace/GET_TRACELIST') private GET_TRACELIST: any;
    @Action('rocketTrace/SET_TRACE_FORM') private SET_TRACE_FORM: any;
    @Mutation('rocketTrace/SET_TRACE_FORM_ITEM')
    private SET_TRACE_FORM_ITEM: any;
    private service: Option = { label: 'All', key: '' };
    private time!: Date[];
    private status: boolean = true;
    private maxTraceDuration: string = localStorage.getItem('maxTraceDuration') || '';
    private minTraceDuration: string = localStorage.getItem('minTraceDuration') || '';
    private instance: Option = { label: 'All', key: '' };
    private endpointName: string = localStorage.getItem('endpointName') || '';
    private traceId: string = localStorage.getItem('traceId') || '';
    private traceState: Option = { label: 'All', key: 'ALL' };

    private dateFormat(date: Date, step: string) {
      const year = date.getFullYear();
      const monthTemp = date.getMonth() + 1;
      let month: string = `${monthTemp}`;
      if (monthTemp < 10) {
        month = `0${monthTemp}`;
      }

      const dayTemp = date.getDate();
      let day: string = `${dayTemp}`;
      if (dayTemp < 10) {
        day = `0${dayTemp}`;
      }
      if (step === 'DAY' || step === 'MONTH') {
        return `${year}-${month}-${day}`;
      }
      const hourTemp = date.getHours();
      let hour: string = `${hourTemp}`;
      if (hourTemp < 10) {
        hour = `0${hourTemp}`;
      }
      if (step === 'HOUR') {
        return `${year}-${month}-${day} ${hour}`;
      }
      const minuteTemp = date.getMinutes();
      let minute: string = `${minuteTemp}`;
      if (minuteTemp < 10) {
        minute = `0${minuteTemp}`;
      }
      if (step === 'MINUTE') {
        return `${year}-${month}-${day} ${hour}${minute}`;
      }
    }

    private globalTimeFormat(time: Date[]) {
      let step = 'MINUTE';
      const unix = Math.round(time[1].getTime()) - Math.round(time[0].getTime());
      if (unix <= 60 * 60 * 1000) {
        step = 'MINUTE';
      } else if (unix <= 24 * 60 * 60 * 1000) {
        step = 'HOUR';
      } else {
        step = 'DAY';
      }
      return {
        start: this.dateFormat(time[0], step),
        end: this.dateFormat(time[1], step),
        step,
      };
    }

    private chooseService(i: any) {
      if (this.service.key === i.key) {
        return;
      }
      this.instance = { label: 'All', key: '' };
      this.service = i;
      if (i.key === '') {
        return;
      }
      this.GET_INSTANCES({ duration: this.durationTime, serviceId: i.key });
    }

    private chooseStatus(i: any) {
      this.traceState = i;
    }

    private getTraceList() {
      this.GET_SERVICES({ duration: this.durationTime });
      const temp: any = {
        queryDuration: this.globalTimeFormat([
          new Date(
            this.time[0].getTime() +
              (parseInt(this.rocketbotGlobal.utc, 10) + new Date().getTimezoneOffset() / 60) * 3600000,
          ),
          new Date(
            this.time[1].getTime() +
              (parseInt(this.rocketbotGlobal.utc, 10) + new Date().getTimezoneOffset() / 60) * 3600000,
          ),
        ]),
        traceState: this.traceState.key,
        paging: { pageNum: 1, pageSize: 15, needTotal: true },
        queryOrder: this.rocketTrace.traceForm.queryOrder,
      };

      if (this.service.key) {
        temp.serviceId = this.service.key;
      }
      if (this.instance.key) {
        temp.serviceInstanceId = this.instance.key;
      }
      if (this.maxTraceDuration) {
        temp.maxTraceDuration = this.maxTraceDuration;
        localStorage.setItem('maxTraceDuration', this.maxTraceDuration);
      }
      if (this.minTraceDuration) {
        temp.minTraceDuration = this.minTraceDuration;
        localStorage.setItem('minTraceDuration', this.minTraceDuration);
      }
      if (this.endpointName) {
        temp.endpointName = this.endpointName;
        localStorage.setItem('endpointName', this.endpointName);
      }
      if (this.traceId) {
        temp.traceId = this.traceId;
        localStorage.setItem('traceId', this.traceId);
      }
      this.SET_TRACE_FORM(temp);

      this.$eventBus.$emit('SET_LOADING_TRUE', () => {
        this.GET_TRACELIST().then(() => {
          this.$eventBus.$emit('SET_LOADING_FALSE');
        });
      });
    }

    private clearSearch() {
      this.RESET_DURATION();
      this.status = true;
      this.maxTraceDuration = '';
      localStorage.removeItem('maxTraceDuration');
      this.minTraceDuration = '';
      localStorage.removeItem('minTraceDuration');
      this.service = { label: 'All', key: '' };
      this.instance = { label: 'All', key: '' };
      this.endpointName = '';
      localStorage.removeItem('endpointName');
      this.traceId = '';
      localStorage.removeItem('traceId');
      this.traceState = { label: 'All', key: 'ALL' };
      this.SET_TRACE_FORM_ITEM({ type: 'queryOrder', data: '' });
      this.getTraceList();
    }

    @Watch('rocketbotGlobal.durationRow')
    private durationRowWatch(value: Duration) {
      this.time = [value.start, value.end];
    }

    private created() {
      this.endpointName = this.$route.query.endpointname
        ? this.$route.query.endpointname.toString()
        : this.endpointName;
      this.traceId = this.$route.query.traceid ? this.$route.query.traceid.toString() : this.traceId;
      this.time = [this.rocketbotGlobal.durationRow.start, this.rocketbotGlobal.durationRow.end];
    }
    private mounted() {
      this.getTraceList();
      if (this.service && this.service.key) {
        this.GET_INSTANCES({
          duration: this.durationTime,
          serviceId: this.service.key,
        });
      }
    }
  }
</script>

<style lang="scss">
  .rk-trace-search {
    flex-shrink: 0;
    background-color: #d8e6fc;
    color: #eee;
    width: 100%;
    padding: 3px 15px 8px;
  }

  .rk-trace-search-input {
    border-style: unset;
    outline: 0;
    padding: 2px 5px;
    border-radius: 3px;
  }

  .rk-trace-search-range,
  .rk-auto-select {
    border-radius: 3px;
    background-color: #fff;
    padding: 1px;
    border-radius: 3px;

    input {
      width: 38px;
      border-style: unset;
      outline: 0;
    }
  }

  .rk-trace-search-btn {
    padding: 3px 9px;
    background-color: #484b55;
    /*border-radius: 4px;
    margin-top: 12px;

    &.bg-blue {
      background-color: #448dfe;
    }*/
  }

  .rk-trace-clear-btn {
    padding: 3px 9px;
    background-color: #484b55;
    /*border-radius: 4px;*/
    /*margin-top: 12px;*/

    /*&.bg-warning {*/
    /*  background-color: #fbb03b;*/
    /*}*/
  }

  .rk-trace-search-more {
    background-color: #d8e6fc;
    padding: 4px 10px;
    border-radius: 3px;
    margin-top: 8px;
    position: relative;
    color: #333333;
    box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.1);

    &:after {
      bottom: 100%;
      right: 30px;
      border: solid transparent;
      content: ' ';
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-color: rgba(0, 0, 0, 0);
      border-bottom-color: #9eb8f1;
      border-width: 8px;
      margin-right: 0px;
    }
  }
</style>

 

trace-select.vue

修改前

<!-- Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements.  See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<template>
  <div
    class="rk-trace-sel-wrapper flex-h"
    v-clickout="
      () => {
        visible = false;
        search = '';
      }
    "
    :class="{ cp: !readonly, active: visible }"
  >
    <div class="rk-trace-bar-i flex-h" @click="visible = !visible && !readonly">
      <div class="mr-15 rk-trace-bar-i-text">
        <div class="sm grey">{{ title }}</div>
        <div class="ell" v-tooltip:right.ellipsis="value.label || ''">
          {{ value.label || '' }}
        </div>
      </div>
      <svg v-if="!readonly" class="icon lg trans" :style="`transform: rotate(${visible ? 180 : 0}deg)`">
        <use xlink:href="#arrow-down"></use>
      </svg>
    </div>
    <div class="rk-trace-sel" v-if="visible">
      <div v-if="hasSearch">
        <input type="text" class="rk-trace-sel-search" v-model="search" :placeholder="`${this.$t('search')}...`" />
        <svg class="icon sm close" @click="search = ''" v-if="search">
          <use xlink:href="#clear"></use>
        </svg>
      </div>
      <div class="rk-trace-opt-wrapper scroll_hide">
        <div
          class="rk-trace-opt ell"
          @click="handleSelect(i)"
          :class="{ active: i.key === value.key }"
          v-for="i in filterData"
          :key="i.key"
        >
          {{ i.label }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator';
  @Component
  export default class TraceSelect extends Vue {
    @Prop() public data!: any;
    @Prop() public value!: any;
    @Prop() public title!: string;
    @Prop({ default: false }) public hasSearch!: boolean;
    @Prop({ default: false })
    public readonly!: boolean;
    public search: string = '';
    public visible: boolean = false;
    get filterData() {
      return this.data.filter((i: any) => i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1);
    }
    public handleSelect(i: any) {
      this.$emit('input', i);
      this.visible = false;
    }
  }
</script>

<style lang="scss" scoped>
  .rk-trace-sel-wrapper {
    position: relative;
    z-index: 2;
    height: 100%;
    justify-content: space-between;
    .sm {
      line-height: 13px;
    }
    .icon {
      flex-shrink: 0;
    }
  }
  .rk-trace-bar-i-text {
    max-width: 150px;
    min-width: 80px;
  }
  .rk-trace-bar-i {
    height: 100%;
    padding: 0 15px;
    border-right: 2px solid #252a2f;
  }
  .rk-trace-sel {
    position: absolute;
    top: 44px;
    box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
    background-color: #252a2f;
    width: 100%;
    border-radius: 3px;
    overflow: hidden;
    .close {
      position: absolute;
      right: 10px;
      top: 12px;
      opacity: 0.6;
      &:hover {
        opacity: 1;
      }
    }
  }
  .rk-trace-opt {
    padding: 7px 15px;
    &.active,
    &:hover {
      background-color: #40454e;
    }
  }
  .rk-trace-sel-search {
    width: calc(100% - 4px);
    border: 0;
    background-color: #333840;
    color: #eee;
    outline: 0;
    padding: 7px 25px 7px 10px;
    margin: 2px;
  }
  .rk-trace-opt-wrapper {
    overflow: auto;
    max-height: 200px;
    padding-bottom: 2px;
  }
</style>

修改后

<!-- Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements.  See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<template>
  <div
    class="rk-trace-sel-wrapper flex-h"
    v-clickout="
      () => {
        visible = false;
        search = '';
      }
    "
    :class="{ cp: !readonly, active: visible }"
  >
    <div class="rk-trace-bar-i flex-h" @click="visible = !visible && !readonly">
      <div class="mr-15 rk-trace-bar-i-text">
        <div class="sm grey">{{ title }}</div>
        <div class="ell" v-tooltip:right.ellipsis="value.label || ''">
          {{ value.label || '' }}
        </div>
      </div>
      <svg v-if="!readonly" class="icon lg trans" :style="`transform: rotate(${visible ? 180 : 0}deg)`">
        <use xlink:href="#arrow-down"></use>
      </svg>
    </div>
    <div class="rk-trace-sel" v-if="visible">
      <div v-if="hasSearch">
        <input type="text" class="rk-trace-sel-search" v-model="search" :placeholder="`${this.$t('search')}...`" />
        <svg class="icon sm close" @click="search = ''" v-if="search">
          <use xlink:href="#clear"></use>
        </svg>
      </div>
      <div class="rk-trace-opt-wrapper scroll_hide">
        <div
          class="rk-trace-opt ell"
          @click="handleSelect(i)"
          :class="{ active: i.key === value.key }"
          v-for="i in filterData"
          :key="i.key"
        >
          {{ i.label }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator';
  @Component
  export default class TraceSelect extends Vue {
    @Prop() public data!: any;
    @Prop() public value!: any;
    @Prop() public title!: string;
    @Prop({ default: false }) public hasSearch!: boolean;
    @Prop({ default: false })
    public readonly!: boolean;
    public search: string = '';
    public visible: boolean = false;
    get filterData() {
      return this.data.filter((i: any) => i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1);
    }
    public handleSelect(i: any) {
      this.$emit('input', i);
      this.visible = false;
    }
  }
</script>

<style lang="scss" scoped>
  .rk-trace-sel-wrapper {
    position: relative;
    z-index: 2;
    height: 100%;
    color: #666;
    justify-content: space-between;
    .sm{
      line-height: 13px;
      color: #333;
    }
    .icon {
      flex-shrink: 0;
    }
  }
  .rk-trace-bar-i-text {
    max-width: 150px;
    min-width: 80px;
  }
  .rk-trace-bar-i {
    height: 100%;
    padding: 0 15px;
    border-right: 2px solid #aaaaaa;
  }
  .rk-trace-sel {
    position: absolute;
    top: 44px;
    box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
    background-color: #e8effC;
    width: 100%;
    border-radius: 3px;
    overflow: hidden;
    .close {
      position: absolute;
      right: 10px;
      top: 12px;
      opacity: 0.6;
      &:hover {
        opacity: 1;
      }
    }
  }
  .rk-trace-opt {
    padding: 7px 15px;
    &.active,
    &:hover {
      background-color: #91B0F0;
    }
  }
  .rk-trace-sel-search {
    width: calc(100% - 4px);
    border: 0;
    background-color: #ffffff;
    color: #666;
    outline: 0;
    padding: 7px 25px 7px 10px;
    margin: 2px;
  }
  .rk-trace-opt-wrapper {
    overflow: auto;
    max-height: 200px;
    padding-bottom: 2px;
  }
</style>

构建替换

npm run build

 

 

将生成的内容替换skywalking-webapp.jar 中的内容

skywalking-webapp.jar\BOOT-INF\classes\public

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 6
    收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:blogdevteam 返回首页
评论 3

打赏作者

chenshiying007

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值