创新实训项目分析（十八）

2021SC@SDUSC

分析一下基础的UI页面

首先是最基础的index页面与load页面

index页面HTML：

<template>
  <div class="container">
    <div class="text-main mb-2">
      {{ main_text }}
    </div>
    <div class="text-sub my-5">
      {{ sub_text }}
    </div>
    <div class="button-group mt-1 mb-13">
      <v-chip class="ma-2" @click="goEditor">{{ texts.go_editor }}</v-chip>
    </div>
  </div>
</template>

效果：

在页面加载时，对进行着数据加载操作

 loading页面：

<template>
  <div class="container">
    <div class="loader-inner ball-beat">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="text-label mt-5 mb-2">
      {{ label_text }}
    </div>
    <div class="text-loading mt-1 mb-15">
      {{ process_text }}
    </div>
  </div>
</template>

<script>

效果

对应着进度条的相关操作，与数据加载操作 

都是使用了Vueify进行的UI整体绘制

 对于核心的editor页面

对于这部分效果

通过Vueify UI库进行绘制，

<template>
  <v-card class="container center">
    <div class="box row">
      <div class="main">
        <div class="left">

          <div class="tool_title">
            <v-img max-height="80" max-width="80" :src="require('@/assets/sdu.png')"/>
            <div class="mt-2 mr-1">
              SDUDOC<br/>山东大学数字古籍上传工具
            </div>
          </div>

          <div class="mt-2 mb-4">
            <v-chip label outlined class="tool_label">文档工具</v-chip>
            <v-btn-toggle class="tool_group">
              <v-tooltip bottom v-for="(tool, index) in tools['document']" :key="index">
                <template v-slot:activator="{ on, attrs }">
                  <v-btn x-small fab tile plain v-bind="attrs" v-on="on" @click=tool.callback>
                    <v-icon>{{tool.icon}}</v-icon>
                  </v-btn>
                </template>
                <span>{{tool.tooltip}}</span>
              </v-tooltip>
            </v-btn-toggle>
          </div>

          <div class="mt-3 mb-4">
            <v-chip label outlined class="tool_label">历史记录</v-chip>
            <v-btn-toggle class="tool_group">
              <v-tooltip bottom v-for="(tool, index) in tools['history']" :key="index">
                <template v-slot:activator="{ on, attrs }">
                  <v-btn x-small fab tile plain v-bind="attrs" v-on="on" @click=tool.callback>
                    <v-icon>{{tool.icon}}</v-icon>
                  </v-btn>
                </template>
                <span>{{tool.tooltip}}</span>
              </v-tooltip>
            </v-btn-toggle>
          </div>

          <div class="my-4">
            <v-chip label outlined class="tool_label">插件工具</v-chip>
            <v-btn-toggle mandatory class="tool_group">
              <v-tooltip bottom v-for="(tool, index) in tools['plugin']" :key="index">
                <template v-slot:activator="{ on, attrs }">
                  <v-btn x-small fab tile v-bind="attrs" v-on="on" @click=tool.callback(tool.id)>
                    <v-icon>{{tool.icon}}</v-icon>
                  </v-btn>
                </template>
                <span>{{tool.tooltip}}</span>
              </v-tooltip>
            </v-btn-toggle>
          </div>

          <div class="my-2">
            <v-btn class="tool_button" color="blue lighten-2" dark @click="upLoadDoc">
              上传
            </v-btn>
          </div>

          <v-dialog v-model="alert_dialog" max-width="400">
            <v-card>
              <v-card-title class="headline">
                <v-icon class="mr-2">mdi-alert-circle-outline</v-icon> 提示
              </v-card-title>
              <v-card-text>{{pop_title}}</v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="green darken-1" text @click="pop_callback">确认</v-btn>
                <v-btn color="red darken-1" text @click="alert_dialog = false">取消</v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>

          <v-dialog v-model="prompt_dialog" max-width="400">
            <v-card>
              <v-card-title class="headline">
                <v-icon class="mr-2">mdi-file-document-edit-outline</v-icon> {{pop_title}}
              </v-card-title>
              <v-container class="my-1" v-for="(prompt, index) in prompt_tooltip" :key="index">
                <v-text-field required :label="prompt_tooltip[index]" class="mx-6" v-model="prompt_text[index]"></v-text-field>
              </v-container>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="green darken-1" text @click="pop_callback">确认</v-btn>
                <v-btn color="red darken-1" text @click="prompt_dialog = false">取消</v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>

          <v-dialog scrollable v-model="course_dialog" max-width="1000">

            <template v-slot:activator="{ on, attrs }">
              <v-btn class="tool_button" color="red lighten-2" dark v-bind="attrs" v-on="on">
                使用教程
              </v-btn>
            </template>

            <v-card>
              <v-toolbar color="white">
                <v-icon class="ml-2 mr-5">mdi-book-open-page-variant</v-icon>
                <v-toolbar-title>山东大学文档上传系统使用教程</v-toolbar-title>
                <v-spacer/>
                <v-btn icon large class="mr-1" @click="course_dialog = false">
                  <v-icon>mdi-close</v-icon>
                </v-btn>
              </v-toolbar>
              <v-divider></v-divider>
              <v-card-text ><!--style="height: 300px;"-->
                <v-radio-group column>
                  <v-radio label="Bahamas, The" value="bahamas"></v-radio>
                </v-radio-group>
              </v-card-text>
              <v-divider></v-divider>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="blue darken-1" text @click="course_dialog = false">
                  了解
                </v-btn>
              </v-card-actions>

            </v-card>
          </v-dialog>

        </div>

        <div id="doc_view" ref="doc_view" class="middle">
          <canvas id="doc_canvas" ref="doc_canvas" class="doc" @contextmenu.prevent/>
        </div>

        <v-card tile outlined class="right" style="border: none">
          <div class="right-page" v-if="tab === 0">
            <div class="mt-5 mb-4">
              <v-chip label outlined class="tool_label">用户工具</v-chip>
              <v-btn-toggle class="tool_group">
                <v-tooltip bottom v-for="(tool, index) in tools['user']" :key="index">
                  <template v-slot:activator="{ on, attrs }">
                    <v-btn x-small fab tile plain v-bind="attrs" v-on="on" @click=tool.callback>
                      <v-icon>{{tool.icon}}</v-icon>
                    </v-btn>
                  </template>
                  <span>{{tool.tooltip}}</span>
                </v-tooltip>
              </v-btn-toggle>
            </div>
          </div>

          <div class="right-page" v-if="tab === 1">
            <div class="mt-5 mb-4">
              <v-chip label outlined class="tool_label">云功能工具</v-chip>
              <v-btn-toggle class="tool_group">
                <v-tooltip bottom v-for="(tool, index) in tools['cloud']" :key="index">
                  <template v-slot:activator="{ on, attrs }">
                    <v-btn x-small fab tile plain v-bind="attrs" v-on="on" @click=tool.callback>
                      <v-icon>{{tool.icon}}</v-icon>
                    </v-btn>
                  </template>
                  <span>{{tool.tooltip}}</span>
                </v-tooltip>
              </v-btn-toggle>
            </div>
          </div>

          <div class="right-page" v-if="tab === 2">
            <div class="mt-5 mb-4">
              <v-chip label outlined class="tool_label">页面工具</v-chip>
              <v-btn-toggle class="tool_group">
                <v-tooltip bottom v-for="(tool, index) in tools['page']" :key="index">
                  <template v-slot:activator="{ on, attrs }">
                    <v-btn x-small fab tile plain v-bind="attrs" v-on="on" @click=tool.callback>
                      <v-icon>{{tool.icon}}</v-icon>
                    </v-btn>
                  </template>
                  <span>{{tool.tooltip}}</span>
                </v-tooltip>
              </v-btn-toggle>
            </div>
            <div id="page_view" ref="page_view" class="mt-4 page_list">
              <v-list nav dense>
                <v-list-item-group mandatory color="primary" v-model="current_page">
                  <v-list-item v-for="(page, index) in page_list" :key="index" class="pa-2" @click="changePage(index)">
                    <v-img max-height="60" max-width="60" :src="page.src" class="mr-4"/>
                    <v-list-item-content>
                      {{page.id}}
                    </v-list-item-content>
                  </v-list-item>
                </v-list-item-group>
              </v-list>
            </div>
          </div>

          <div class="right-page" v-if="tab === 3">
            <div class="mt-5 mb-4">
              <v-chip label outlined class="tool_label">检查工具</v-chip>
              <v-btn-toggle class="tool_group">
                <v-tooltip bottom v-for="(tool, index) in tools['check']" :key="index">
                  <template v-slot:activator="{ on, attrs }">
                    <v-btn x-small fab tile plain v-bind="attrs" v-on="on" @click=tool.callback>
                      <v-icon>{{tool.icon}}</v-icon>
                    </v-btn>
                  </template>
                  <span>{{tool.tooltip}}</span>
                </v-tooltip>
              </v-btn-toggle>
            </div>
            <div id="check_view" ref="check_view" class="mt-4 check_list">
              <input v-model="check_id" class="check_input"/>
              <textarea v-model="check_info" class="check_textarea"/>
            </div>
          </div>

          <div class="right-page" v-if="tab === 4">
            <div class="mt-5 mb-4">
              <v-chip label outlined class="tool_label">设置工具</v-chip>
              <v-btn-toggle class="tool_group">
                <v-tooltip bottom v-for="(tool, index) in tools['option']" :key="index">
                  <template v-slot:activator="{ on, attrs }">
                    <v-btn x-small fab tile plain v-bind="attrs" v-on="on" @click=tool.callback>
                      <v-icon>{{tool.icon}}</v-icon>
                    </v-btn>
                  </template>
                  <span>{{tool.tooltip}}</span>
                </v-tooltip>
              </v-btn-toggle>
            </div>
          </div>

          <div class="right-page" v-if="tab === 5">
            <div class="mt-5 mb-4">
              <v-chip label outlined class="tool_label">实验性工具</v-chip>
              <v-btn-toggle class="tool_group">
                <v-tooltip bottom v-for="(tool, index) in tools['dev']" :key="index">
                  <template v-slot:activator="{ on, attrs }">
                    <v-btn x-small fab tile plain v-bind="attrs" v-on="on" @click=tool.callback>
                      <v-icon>{{tool.icon}}</v-icon>
                    </v-btn>
                  </template>
                  <span>{{tool.tooltip}}</span>
                </v-tooltip>
              </v-btn-toggle>
              <div class="mt-5" style="width: 80%;margin-left: 10%">
                实验性工具还在开发中，具有不稳定性，请谨慎使用。
              </div>
            </div>
          </div>

          <v-navigation-drawer :mini-variant.sync="tab_mini" floating absolute permanent
                               right class="navigator" style="background-color: antiquewhite">
            <v-list nav dense>
              <v-list-item v-for="(item, i) in tabs" :key="i" link @click="tab = !tab_mini ? changeTab(i) : tab"
                           @click.stop="tab_mini = !tab_mini">
                <v-list-item-icon>
                  <v-icon>{{ item.icon }}</v-icon>
                </v-list-item-icon>
                <v-list-item-title>{{ item.text }}</v-list-item-title>
              </v-list-item>
            </v-list>
          </v-navigation-drawer>
        </v-card>
      </div>
      <div class="todo">
        {{ todo_text }}
      </div>
    </div>
  </v-card>
</template>

 在页面渲染时，执行引擎加载，页面大小重绘，页面大小重绘监听器添加操作