PDF_Library/static_site
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

编写界面

Browse source
This commit is contained in:
zhbaor 2021-11-01 22:10:11 +08:00
parent 161b616b4e
commit 00418e1c02
7 changed files with 100 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -8,10 +8,13 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.6.1",
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"@types/bootstrap": "^5.1.6",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-babel": "~4.5.0",

14
public/index.html
View file

@ -1,17 +1,11 @@
<!DOCTYPE html>
<html lang="">
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>PDF Library</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

70
src/App.vue
View file

@ -1,26 +1,66 @@
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
<div class="container-fluid py-3 px-3">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-9 col-xl-10">
<div class="accordion" id="pdfList">
<div v-for="(category, i) in categories" :key="i" class="accordion-item">
<h2 class="accordion-header">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
:data-bs-target="`#collapse-category${i}`"
>
{{ category.name }}
</button>
</h2>
<div :id="`collapse-category${i}`" class="accordion-collapse collapse show">
<div class="accordion-body">
<div class="table-responsive">
<table class="table table-hover align-middle">
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col" colspan="2" class="text-center">Links</th>
</tr>
</thead>
<tbody>
<tr v-for="(file, j) in category.files" :key="j">
<td>{{ file }}</td>
<td class="text-center">
<a :href="`${url_root}${file}`"><i class="bi bi-book"></i></a>
</td>
<td class="text-center">
<a :href="`${url_root}${file}`"><i class="bi bi-cloud-download"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
export default defineComponent({
name: 'App',
components: {
HelloWorld,
data() {
return {
url_root: '/~lixiangyu/',
categories: [
{
name: 'Computer',
files: ['modern-full-stack.pdf', 'gdb.pdf'],
},
],
};
},
});
</script>
<style lang="stylus">
#app
font-family Avenir, Helvetica, Arial, sans-serif
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
text-align center
color #2c3e50
margin-top 60px
</style>

BIN
src/assets/logo.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.7 KiB

60
src/components/HelloWorld.vue
View file

@ -1,60 +0,0 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'HelloWorld',
props: {
msg: String,
},
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
h3
margin 40px 0 0
ul
list-style-type none
padding 0
li
display inline-block
margin 0 10px
a
color #42b983
</style>

3
src/main.ts
View file

@ -1,4 +1,7 @@
import { createApp } from 'vue';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-icons/font/bootstrap-icons.css';
import 'bootstrap';
import App from './App.vue';
createApp(App).mount('#app');

35
yarn.lock
View file

@ -986,6 +986,11 @@
"@nodelib/fs.scandir" "2.1.5"
fastq "^1.6.0"
"@popperjs/core@^2.9.2":
version "2.10.2"
resolved "https://registry.npmmirror.com/@popperjs/core/download/@popperjs/core-2.10.2.tgz?cache=0&sync_timestamp=1633001441229&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40popperjs%2Fcore%2Fdownload%2F%40popperjs%2Fcore-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590"
integrity sha1-B5jAM1Hw3qGlpMq93yalWny+5ZA=
"@soda/friendly-errors-webpack-plugin@^1.7.1":
version "1.8.0"
resolved "https://registry.npm.taobao.org/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.8.0.tgz#84751d82a93019d5c92c0cf0e45ac59087cd2240"
@ -1009,6 +1014,14 @@
"@types/connect" "*"
"@types/node" "*"
"@types/bootstrap@^5.1.6":
version "5.1.6"
resolved "https://registry.nlark.com/@types/bootstrap/download/@types/bootstrap-5.1.6.tgz#669a0cd7fb37bca12424e0d68f1f4704cfcdb780"
integrity sha1-ZpoM1/s3vKEkJODWjx9HBM/Nt4A=
dependencies:
"@popperjs/core" "^2.9.2"
"@types/jquery" "*"
"@types/connect-history-api-fallback@*":
version "1.3.5"
resolved "https://registry.nlark.com/@types/connect-history-api-fallback/download/@types/connect-history-api-fallback-1.3.5.tgz?cache=0&sync_timestamp=1629707001404&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fconnect-history-api-fallback%2Fdownload%2F%40types%2Fconnect-history-api-fallback-1.3.5.tgz#d1f7a8a09d0ed5a57aee5ae9c18ab9b803205dae"
@ -1058,6 +1071,13 @@
dependencies:
"@types/node" "*"
"@types/jquery@*":
version "3.5.8"
resolved "https://registry.npmmirror.com/@types/jquery/download/@types/jquery-3.5.8.tgz#83bfbcdf4e625c5471590f92703c06aadb052a09"
integrity sha1-g7+8305iXFRxWQ+ScDwGqtsFKgk=
dependencies:
"@types/sizzle" "*"
"@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.7":
version "7.0.9"
resolved "https://registry.nlark.com/@types/json-schema/download/@types/json-schema-7.0.9.tgz?cache=0&sync_timestamp=1629708189890&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fjson-schema%2Fdownload%2F%40types%2Fjson-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
@ -1121,6 +1141,11 @@
"@types/mime" "^1"
"@types/node" "*"
"@types/sizzle@*":
version "2.3.3"
resolved "https://registry.nlark.com/@types/sizzle/download/@types/sizzle-2.3.3.tgz#ff5e2f1902969d305225a047c8a0fd5c915cebef"
integrity sha1-/14vGQKWnTBSJaBHyKD9XJFc6+8=
"@types/source-list-map@*":
version "0.1.2"
resolved "https://registry.nlark.com/@types/source-list-map/download/@types/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
@ -2285,6 +2310,16 @@ boolbase@^1.0.0, boolbase@~1.0.0:
resolved "https://registry.nlark.com/boolbase/download/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
bootstrap-icons@^1.6.1:
version "1.6.1"
resolved "https://registry.npmmirror.com/bootstrap-icons/download/bootstrap-icons-1.6.1.tgz#66c87beff34840efa5f248b3091c82d9348864e8"
integrity sha1-Zsh77/NIQO+l8kizCRyC2TSIZOg=
bootstrap@^5.1.3:
version "5.1.3"
resolved "https://registry.npmmirror.com/bootstrap/download/bootstrap-5.1.3.tgz?cache=0&sync_timestamp=1635517548345&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fbootstrap%2Fdownload%2Fbootstrap-5.1.3.tgz#ba081b0c130f810fa70900acbc1c6d3c28fa8f34"
integrity sha1-uggbDBMPgQ+nCQCsvBxtPCj6jzQ=
brace-expansion@^1.1.7:
version "1.1.11"
resolved "https://registry.nlark.com/brace-expansion/download/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"