├── public
    ├── favicon.ico
    └── index.html
├── vue.config.js
├── babel.config.js
├── src
    ├── main.js
    ├── bookmark
    │   ├── index.js
    │   └── Main.vue
    ├── components
    │   ├── abyss
    │   │   ├── RevealRankBox.vue
    │   │   ├── RankBox.vue
    │   │   ├── SummaryBox.vue
    │   │   └── FloorBox.vue
    │   ├── base
    │   │   ├── HomeBox.vue
    │   │   ├── ExplorationBox.vue
    │   │   ├── AvatarBox.vue
    │   │   └── SummaryBox.vue
    │   ├── BaseInfo.vue
    │   └── AbyssInfo.vue
    ├── utils
    │   └── DateUtils.js
    └── App.vue
├── README.md
├── .gitignore
├── package.json
├── .github
    └── workflows
    │   └── ci.yml
└── webpack.config.js


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/babalae/genshin-info/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     productionSourceMap: false,
3 |     publicPath: './'
4 | }
5 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import 'bulma/css/bulma.css'
 4 | import DateUtils from './utils/DateUtils.js'
 5 | 
 6 | Vue.config.productionTip = false
 7 | 
 8 | new Vue({
 9 |   render: h => h(App),
10 | }).$mount('#app')
11 | 
12 | Vue.use(DateUtils)


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 原神角色信息查询工具
 2 | 
 3 | 原神角色信息查询工具的前端代码，
 4 | 
 5 | 能查到的内容大概和米游社一致。
 6 | 
 7 | 地址：https://babalae.github.io/genshin-info/
 8 | 
 9 | ## 参考
10 | 
11 | https://github.com/Womsxd/YuanShen_User_Info
12 | 
13 | 感谢 [Steesha](https://github.com/Steesha) 提供DS的算法
14 | 
15 | 感谢 [Womsxd](https://github.com/Womsxd) 的后端代码
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/bookmark/index.js:
--------------------------------------------------------------------------------
 1 | import Main from './Main.vue'
 2 | import DateUtils from './../utils/DateUtils.js'
 3 | import html2canvas from 'html2canvas';
 4 | // import Vue from "vue";
 5 | 
 6 | Main.install = function (Vue) {
 7 |     Vue.component(Main.name, Main);
 8 | }
 9 | 
10 | const components = [
11 |     Main
12 | ]
13 | const install = function (Vue) {
14 |     components.forEach(component => {
15 |         Vue.component(component.name, component);
16 |     });
17 | }
18 | 
19 | if (typeof window !== 'undefined' && window.Vue) {
20 |     install(window.Vue);
21 |     Vue.use(DateUtils);
22 |     Vue.use(html2canvas);
23 | }
24 | 
25 | export default {
26 |     install,
27 |     Main
28 | };
29 | 
30 | 


--------------------------------------------------------------------------------
/src/components/abyss/RevealRankBox.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="columns is-multiline is-mobile is-centered">
 4 |       <div class="column is-narrow" v-for="(reocrd,i) in data" :key="i">
 5 |         <div :class="'avatar-card star-' + reocrd.rarity">
 6 |           <img :src="reocrd.avatar_icon" alt="">
 7 |           <div class="desc">
 8 |             {{ reocrd.value }} 次
 9 |           </div>
10 |         </div>
11 |       </div>
12 |     </div>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   name: "RevealRankBox",
19 |   props: ['data']
20 | }
21 | </script>
22 | 
23 | <style scoped>
24 | .avatar-card {
25 |   width: 100px;
26 |   border-radius: 0.25rem;
27 |   display: flex;
28 |   flex-direction: column;
29 |   box-shadow: 0 0.5em 1em -0.125em rgb(10 10 10 / 10%), 0 0px 0 1px rgb(10 10 10 / 2%);
30 | }
31 | 
32 | .avatar-card .desc {
33 |   background-color: #f1f1f1;
34 |   border-radius: 0 0 0.25rem 0.25rem;
35 |   text-align: center;
36 | }
37 | </style>


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>原神角色信息查询</title>
 9 |     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-80358493-3"></script>
10 |     <script>
11 |         window.dataLayer = window.dataLayer || [];
12 |         function gtag() {
13 |             dataLayer.push(arguments);
14 |         }
15 |         gtag('js', new Date());
16 |         gtag('config', 'UA-80358493-3');
17 |     </script>
18 | </head>
19 | <body>
20 | <noscript>
21 |     <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
22 |         Please enable it to continue.</strong>
23 | </noscript>
24 | <div id="app"></div>
25 | <!-- built files will be auto injected -->
26 | </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/src/components/base/HomeBox.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="exploration-box columns">
 3 |     <div class="exploration-content column" v-for="(home,i) in homeData" :key="i">
 4 |       <div class="box exploration-card" :style="'background-image: url(' + home.icon + ')'">
 5 |         <div>
 6 |           <p>
 7 |             <strong style="color: white">{{ home.name }}</strong>
 8 |             <br>
 9 |             信任等阶：{{ home.level }} 级
10 |             <br>
11 |             最高洞天仙力：{{ home.comfort_num }}
12 |             <br>
13 |             获得摆设数：{{ home.item_num }}
14 |             <br>
15 |             历史访客数：{{ home.visit_num }}
16 |             <br>
17 |           </p>
18 |         </div>
19 |       </div>
20 |     </div>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | export default {
26 |   name: "HomeBox",
27 |   props: ['homeData']
28 | }
29 | </script>
30 | 
31 | <style scoped>
32 | .exploration-card {
33 |   color: white;
34 |   height: 200px;
35 |   background-repeat: no-repeat;
36 |   background-size: 100% 100%;
37 | }
38 | 
39 | .exploration-card p {
40 |   background-color:rgba(0,0,0,0.5);
41 |   padding: 1.25rem 2.5rem;
42 |   margin: 0 -1.25rem;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/src/components/abyss/RankBox.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="column is-one-quarter" v-if="data.length > 0">
 3 |     <article class="message">
 4 |       <div class="message-header">
 5 |         <p>
 6 |           {{ tittle }}
 7 |         </p>
 8 |       </div>
 9 |       <div class="message-body">
10 |         <div class="exploration-content column" v-for="(record,i) in data" :key="i">
11 |           <article class="media">
12 |             <div class="media-left">
13 |               <figure class="image" style="width: 32px">
14 |                 <img :src="record.avatar_icon" :alt="record.avatar_id">
15 |               </figure>
16 |             </div>
17 |             <div class="media-content">
18 |               <div class="content">
19 |                 {{ record.value }}
20 |                 <progress class="progress is-small is-link" :value="record.value" :max="data[0].value"></progress>
21 |               </div>
22 |             </div>
23 |           </article>
24 |         </div>
25 |       </div>
26 |     </article>
27 |   </div>
28 | </template>
29 | 
30 | <script>
31 | export default {
32 |   name: "RankBox",
33 |   props: ['tittle','data']
34 | }
35 | </script>
36 | 
37 | <style scoped>
38 | 
39 | </style>


--------------------------------------------------------------------------------
/src/utils/DateUtils.js:
--------------------------------------------------------------------------------
 1 | exports.install = function (Vue) {
 2 |     Vue.prototype.dateFormat = function (timestamp, formats){
 3 |         // formats格式包括
 4 |         // 1. Y-m-d
 5 |         // 2. Y-m-d H:i:s
 6 |         // 3. Y年m月d日
 7 |         // 4. Y年m月d日 H时i分
 8 |         formats = formats || 'Y-m-d';
 9 | 
10 |         let zero = function (value) {
11 |             if (value < 10) {
12 |                 return '0' + value;
13 |             }
14 |             return value;
15 |         };
16 | 
17 |         let myDate = timestamp ? new Date(timestamp) : new Date();
18 | 
19 |         let year = myDate.getFullYear();
20 |         let month = zero(myDate.getMonth() + 1);
21 |         let day = zero(myDate.getDate());
22 | 
23 |         let hour = zero(myDate.getHours());
24 |         let minute = zero(myDate.getMinutes());
25 |         let second = zero(myDate.getSeconds());
26 | 
27 |         return formats.replace(/Y|m|d|H|i|s/ig, function (matches) {
28 |             return ({
29 |                 Y: year,
30 |                 m: month,
31 |                 d: day,
32 |                 H: hour,
33 |                 i: minute,
34 |                 s: second
35 |             })[matches];
36 |         });
37 |     };
38 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "genshin-info",
 3 |   "version": "0.1.2",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint",
 9 |     "bh": "webpack --progress"
10 |   },
11 |   "dependencies": {
12 |     "bulma": "^0.9.1",
13 |     "core-js": "^3.6.5",
14 |     "html2canvas": "^1.2.1",
15 |     "vue": "^2.6.11"
16 |   },
17 |   "devDependencies": {
18 |     "@vue/cli-plugin-babel": "~4.5.0",
19 |     "@vue/cli-plugin-eslint": "~4.5.0",
20 |     "@vue/cli-service": "~4.5.0",
21 |     "babel-eslint": "^10.1.0",
22 |     "css-loader": "^2.1.1",
23 |     "eslint": "^6.7.2",
24 |     "eslint-plugin-vue": "^6.2.2",
25 |     "style-loader": "^0.23.1",
26 |     "uglifyjs-webpack-plugin": "^2.2.0",
27 |     "vue-loader": "^15.7.0",
28 |     "vue-template-compiler": "^2.6.11",
29 |     "webpack": "^4.32.2",
30 |     "webpack-cli": "^3.3.2"
31 |   },
32 |   "eslintConfig": {
33 |     "root": true,
34 |     "env": {
35 |       "node": true
36 |     },
37 |     "extends": [
38 |       "plugin:vue/essential",
39 |       "eslint:recommended"
40 |     ],
41 |     "parserOptions": {
42 |       "parser": "babel-eslint"
43 |     },
44 |     "rules": {}
45 |   },
46 |   "browserslist": [
47 |     "> 1%",
48 |     "last 2 versions",
49 |     "not dead"
50 |   ]
51 | }
52 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | # 工作流名称，不设置的话默认取配置文件名
 2 | name: Build and Deploy
 3 | # 指定触发 workflow 的条件
 4 | # 指定触发事件时，可以限定分支或标签
 5 | # 当前是 只有 master分支上触发 push 事件时才执行工作流任务
 6 | on:
 7 |   push:
 8 |     branches:
 9 |       - master
10 | # 工作流执行的一个或多个任务
11 | jobs:
12 |   # 任务名称
13 |   build-and-deploy:
14 |     # 任务运行的容器类型（虚拟机环境）
15 |     runs-on: ubuntu-latest
16 |     # 任务执行的步骤
17 |     steps:
18 |       # 步骤名称
19 |       - name: Checkout
20 |         # 使用的操作 actions，可以使用公共仓库，本地仓库，别人的仓库的action
21 |         # 拉取代码
22 |         uses: actions/checkout@master
23 | 
24 |       - name: Build and Deploy
25 |         # 构建发布 Github pages
26 |         uses: JamesIves/github-pages-deploy-action@releases/v2
27 |         # 该步骤所需的环境变量
28 |         env:
29 |           ACCESS_TOKEN: ${{ secrets.MY_TOKEN }}
30 |           # 在部署前要checkout的基本分支，默认是master
31 |           BASE_BRANCH: master # The branch the action should deploy from.
32 |           # 指定部署的分支，默认是 gh-pages 分支
33 |           BRANCH: gh-pages # The branch the action should deploy to.
34 |           # 存储库中要部署的文件夹。
35 |           # 该步骤会将项目中 FOLDER 指定文件夹下的文件推送到 BRANCH 分支，作为Github Pages 部署的内容。
36 |           # Vue CLI默认打包到 dist 目录
37 |           FOLDER: dist # The folder the action should deploy.
38 |           # 在向 BRANCH 分支推送代码前，可以指定构建脚本
39 |           BUILD_SCRIPT: npm install && npm run build && npm run bh # The build script the action should run prior to deploying.
40 | 


--------------------------------------------------------------------------------
/src/components/base/ExplorationBox.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="exploration-box columns">
 3 |     <div class="exploration-content column" v-for="(world,i) in explorationData" :key="i">
 4 |       <div class="box">
 5 |         <article class="media">
 6 |           <div class="media-left">
 7 |             <figure class="image" style="width: 96px; background: #342ca2">
 8 |               <img :src="world.icon" alt="Image">
 9 |             </figure>
10 |           </div>
11 |           <div class="media-content">
12 |             <div class="content">
13 |               <p>
14 |                 <strong>{{ world.name }}</strong>
15 |                 <br>
16 |                 探索度：{{ world.exploration_percentage / 10 }}%
17 |                 <br>
18 |                 <span v-if="world.type === 'Reputation'">声望等级：{{ world.level }}<br></span>
19 |                 <span v-if="world.offerings !== undefined && world.offerings.length > 0 ">
20 |                     <span v-for="(offering,j) in world.offerings" :key="j">
21 |                       {{ offering.name }}：{{ offering.level }}<br>
22 |                     </span>
23 |                   </span>
24 |               </p>
25 |             </div>
26 | <!--            <div class="level is-mobile">
27 |               <progress class="progress is-small is-link" :value="world.exploration_percentage" max="1000"></progress>
28 |             </div>-->
29 |           </div>
30 |         </article>
31 |       </div>
32 |     </div>
33 |   </div>
34 | </template>
35 | 
36 | <script>
37 | export default {
38 |   name: "ExplorationBox",
39 |   props: ['explorationData']
40 | }
41 | </script>
42 | 
43 | <style scoped>
44 | 
45 | </style>


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const VueLoaderPlugin = require('vue-loader/lib/plugin');
 3 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 4 | 
 5 | 
 6 | module.exports = {
 7 |     mode: 'development',
 8 |     entry: "./src/bookmark/index.js",
 9 |     output: {
10 |         path: path.resolve(__dirname, './dist/js/'),
11 |         publicPath: '/dist/js/',
12 |         filename: 'bh-render.js',
13 |         library: 'bh-render',
14 |         libraryTarget: 'umd',
15 |         libraryExport: 'default',
16 |         umdNamedDefine: true,
17 |         globalObject: 'typeof self !== \'undefined\' ? self : this'
18 |     },
19 |     module: {
20 |         rules: [{
21 |             test: /\.vue$/,
22 |             loader: 'vue-loader'
23 |         }, {
24 |             test: /\.css$/,
25 |             use: ['style-loader', 'css-loader'],
26 |         }]
27 |     },
28 |     // devtool: "source-map",
29 |     resolve: {
30 |         alias: {
31 |             'vue': 'vue/dist/vue.js'
32 |         }
33 |     },
34 |     plugins: [
35 |         new VueLoaderPlugin(),
36 |         new UglifyJsPlugin({
37 |             sourceMap: false,
38 |             uglifyOptions: {
39 |                 compress: {
40 |                     // 删除所有的 `console` 语句
41 |                     drop_console: true,
42 |                 },
43 |                 output: {
44 |                     // 最紧凑的输出
45 |                     beautify: false,
46 |                     // 删除所有的注释
47 |                     comments: false,
48 |                 },
49 |             }
50 |         })
51 |     ],
52 |     // optimization: {
53 |     //     minimizer: []
54 |     // }
55 | }
56 | 


--------------------------------------------------------------------------------
/src/components/base/AvatarBox.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="avatars-box">
 3 |     <div class="avatar-content" v-for="(avatar,i) in avatarData" :key="i">
 4 |       <div class="box">
 5 |         <article class="media">
 6 |           <div class="media-left">
 7 |             <figure class="image" style="width: 96px">
 8 |               <img :src="avatar.image" alt="Image">
 9 |             </figure>
10 |           </div>
11 |           <div class="media-content">
12 |             <div class="content">
13 |               <p>
14 |                 <strong>{{ avatar.name }}</strong>
15 | <!--                <small> {{ avatar.element }} </small>-->
16 | <!--                <small>{{ avatar.rarity }}⭐</small>-->
17 |                 <br>
18 |                 等级：{{ avatar.level }}
19 |                 <br>
20 |                 好感：{{ avatar.fetter }}
21 |                 <br>
22 |                 命座：{{ avatar.actived_constellation_num }}
23 |                 <br>
24 |               </p>
25 |             </div>
26 |           </div>
27 |         </article>
28 |       </div>
29 | <!--      <div :class="'avatar-card star-' + avatar.rarity">
30 |         <img :src="avatar.image" alt="">
31 |         <div class="desc">
32 |           Lv.{{ avatar.level }} 🧡 {{ avatar.fetter }}
33 |         </div>
34 |       </div>-->
35 |     </div>
36 |   </div>
37 | </template>
38 | 
39 | <script>
40 | export default {
41 |   name: "AvatarBox",
42 |   props: ['avatarData']
43 | }
44 | </script>
45 | 
46 | <style scoped>
47 | .avatars-box {
48 |   display: flex;
49 |   flex-wrap: wrap;
50 | }
51 | 
52 | .avatar-content {
53 |   width: 100%;
54 |   padding: 0.5rem 1rem;
55 | }
56 | 
57 | @media screen and (min-width: 768px) {
58 |   .avatar-content {
59 |     width: 50%;
60 |     padding: 0.5rem 1rem;
61 |   }
62 | }
63 | 
64 | @media screen and (min-width: 1024px) {
65 |   .avatar-content {
66 |     width: 25%;
67 |     padding: 0.5rem 1rem;
68 |   }
69 | }
70 | </style>
71 | 


--------------------------------------------------------------------------------
/src/components/BaseInfo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <div class="card" v-if="baseInfoData.stats !== undefined">
 4 |       <header class="card-header">
 5 |         <p class="card-header-title">
 6 |           数据总览
 7 |         </p>
 8 |       </header>
 9 |       <div class="card-content">
10 |         <SummaryBox :stats-data="baseInfoData.stats"></SummaryBox>
11 |       </div>
12 |     </div>
13 |     <div class="card"
14 |          v-if="baseInfoData.world_explorations !== undefined && baseInfoData.world_explorations.length > 0">
15 |       <header class="card-header">
16 |         <p class="card-header-title">
17 |           世界探索
18 |         </p>
19 |       </header>
20 |       <div class="card-content">
21 |         <ExplorationBox :exploration-data="baseInfoData.world_explorations"></ExplorationBox>
22 |       </div>
23 |     </div>
24 |     <div class="card" v-if="baseInfoData.homes !== undefined&& baseInfoData.homes.length > 0">
25 |       <header class="card-header">
26 |         <p class="card-header-title">
27 |           尘歌壶
28 |         </p>
29 |       </header>
30 |       <div class="card-content">
31 |         <HomeBox :home-data="baseInfoData.homes"></HomeBox>
32 |       </div>
33 |     </div>
34 |     <div class="card" v-if="baseInfoData.avatars !== undefined">
35 |       <header class="card-header">
36 |         <p class="card-header-title">
37 |           角色列表
38 |         </p>
39 |       </header>
40 |       <div class="card-content">
41 |         <AvatarBox :avatar-data="baseInfoData.avatars"></AvatarBox>
42 |       </div>
43 |     </div>
44 |   </div>
45 | </template>
46 | 
47 | <script>
48 | import SummaryBox from './base/SummaryBox.vue'
49 | import ExplorationBox from './base/ExplorationBox.vue'
50 | import HomeBox from './base/HomeBox.vue'
51 | import AvatarBox from './base/AvatarBox.vue'
52 | 
53 | export default {
54 |   name: "BaseInfo",
55 |   components: {SummaryBox, ExplorationBox, HomeBox, AvatarBox},
56 |   props: ['baseInfoData']
57 | }
58 | </script>
59 | 
60 | <style scoped>
61 | 
62 | </style>


--------------------------------------------------------------------------------
/src/components/AbyssInfo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container" v-if="abyssInfoData.reveal_rank.length > 0">
 3 |     <div class="card">
 4 |       <header class="card-header">
 5 |         <p class="card-header-title">
 6 |           深境螺旋战绩
 7 |         </p>
 8 |       </header>
 9 |       <div class="card-content">
10 |         <SummaryBox :data="abyssInfoData"></SummaryBox>
11 |         <hr/>
12 |         <div class="columns">
13 |           <div class="column">
14 |             <strong>出战次数：</strong>
15 |           </div>
16 |         </div>
17 |         <RevealRankBox :data="abyssInfoData.reveal_rank"></RevealRankBox>
18 |       </div>
19 |     </div>
20 |     <div class="card">
21 |       <header class="card-header">
22 |         <p class="card-header-title">
23 |           详细数据
24 |         </p>
25 |       </header>
26 |       <div class="card-content">
27 |         <div class="columns is-multiline">
28 |           <RankBox :tittle="'最多击破数'" :data="abyssInfoData.defeat_rank"></RankBox>
29 |           <RankBox :tittle="'承受最多伤害'"  :data="abyssInfoData.take_damage_rank"></RankBox>
30 |           <RankBox :tittle="'元素爆发次数'"  :data="abyssInfoData.energy_skill_rank"></RankBox>
31 |           <RankBox :tittle="'元素战技释放数'"  :data="abyssInfoData.normal_skill_rank"></RankBox>
32 |         </div>
33 |       </div>
34 |     </div>
35 |     <div class="card" v-if="abyssInfoData.floors !== undefined">
36 |       <header class="card-header">
37 |         <p class="card-header-title">
38 |           阵容
39 |         </p>
40 |       </header>
41 |       <div class="card-content">
42 |         <FloorBox :floor-data="abyssInfoData.floors"></FloorBox>
43 |       </div>
44 |     </div>
45 |   </div>
46 | </template>
47 | 
48 | <script>
49 | import SummaryBox from './abyss/SummaryBox.vue'
50 | import RankBox from './abyss/RankBox.vue'
51 | import RevealRankBox from './abyss/RevealRankBox.vue'
52 | import FloorBox from './abyss/FloorBox.vue'
53 | 
54 | export default {
55 |   name: "AbyssInfo",
56 |   components: {SummaryBox, RankBox, RevealRankBox, FloorBox},
57 |   props: ['abyssInfoData'],
58 |   mounted() {
59 |     this.dealWithData()
60 |   },
61 | 
62 |   methods: {
63 |     dealWithData() {
64 |       this.abyssInfoData.start_time = this.dateFormat(this.abyssInfoData.start_time * 1000, "Y-m-d")
65 |       this.abyssInfoData.end_time = this.dateFormat(this.abyssInfoData.end_time * 1000, "Y-m-d")
66 |     }
67 |   }
68 | }
69 | </script>
70 | 
71 | <style scoped>
72 | 
73 | </style>
74 | 


--------------------------------------------------------------------------------
/src/components/abyss/SummaryBox.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="columns is-multiline">
 4 |       <div class="column is-half">
 5 |         <strong>统计周期：</strong>{{ data.start_time }} ~ {{ data.end_time }}
 6 |       </div>
 7 |       <div class="column is-half">
 8 |         <strong>最深抵达：</strong>{{ data.max_floor }}
 9 |       </div>
10 |       <div class="column is-half">
11 |         <strong>战斗次数：</strong>{{ data.total_battle_times }}
12 |       </div>
13 |       <div class="column is-half">
14 |         <strong>胜利次数：</strong>{{ data.total_win_times }}
15 |       </div>
16 |       <div class="column is-half">
17 |         <strong>渊星总数：</strong>{{ data.total_star }}⭐
18 |       </div>
19 |     </div>
20 |     <hr/>
21 |     <div class="columns is-multiline is-vcentered">
22 |       <div class="column is-half" v-if="data.defeat_rank.length > 0">
23 |         <div>
24 |           <strong>最多击破数：</strong>{{ data.defeat_rank[0].value }}
25 |           <img class="side-head" :src=" data.defeat_rank[0].avatar_icon" alt="">
26 |         </div>
27 |       </div>
28 |       <div class="column is-half" v-if="data.damage_rank.length > 0">
29 |         <div>
30 |           <strong>最强一击：</strong>{{ data.damage_rank[0].value }}
31 |           <img class="side-head" :src=" data.damage_rank[0].avatar_icon" alt="">
32 |         </div>
33 |       </div>
34 |       <div class="column is-half" v-if="data.take_damage_rank.length > 0">
35 |         <div>
36 |           <strong>承受最多伤害：</strong>{{ data.take_damage_rank[0].value }}
37 |           <img class="side-head" :src=" data.take_damage_rank[0].avatar_icon" alt="">
38 |         </div>
39 |       </div>
40 |       <div class="column is-half" v-if="data.energy_skill_rank.length > 0">
41 |         <div>
42 |           <strong>元素爆发次数：</strong>{{ data.energy_skill_rank[0].value }}
43 |           <img class="side-head" :src=" data.energy_skill_rank[0].avatar_icon" alt="">
44 |         </div>
45 |       </div>
46 |       <div class="column is-half" v-if="data.normal_skill_rank.length > 0">
47 |         <div>
48 |           <strong>元素战技释放数：</strong>{{ data.normal_skill_rank[0].value }}
49 |           <img class="side-head" :src=" data.normal_skill_rank[0].avatar_icon" alt="">
50 |         </div>
51 |       </div>
52 |     </div>
53 |   </div>
54 | </template>
55 | 
56 | <script>
57 | export default {
58 |   name: "SummaryBox",
59 |   props: ['data']
60 | }
61 | </script>
62 | 
63 | <style scoped>
64 | .side-head {
65 |   height: 36px;
66 | }
67 | </style>


--------------------------------------------------------------------------------
/src/bookmark/Main.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <nav class="navbar has-shadow" role="navigation" aria-label="main navigation">
 4 |       <div class="navbar-brand">
 5 |         <a class="navbar-item" href="">
 6 |           原神角色信息查询
 7 |         </a>
 8 |         <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
 9 |           <span aria-hidden="true"></span>
10 |           <span aria-hidden="true"></span>
11 |           <span aria-hidden="true"></span>
12 |         </a>
13 |       </div>
14 |     </nav>
15 |     <section class="section" ref="displayPanel">
16 |       <div class="container">
17 |         <div class="card">
18 |           <header class="card-header">
19 |             <p class="card-header-title">
20 |               🔍 查询栏
21 |             </p>
22 |             <div class="card-header-icon" aria-label="more options"
23 |                  v-if="baseInfo !== undefined || abyssInfo !== undefined">
24 |               <span class="icon" @click="toImage">📥</span>
25 |             </div>
26 |           </header>
27 |           <div class="card-content">
28 |             <article class="message">
29 |               <div class="message-body">
30 |                 {{ msg }}
31 |               </div>
32 |             </article>
33 |           </div>
34 |         </div>
35 |         <div v-if="baseInfo !== undefined">
36 |           <BaseInfo :base-info-data="baseInfo"></BaseInfo>
37 |         </div>
38 |         <div v-if="abyssInfo !== undefined">
39 |           <AbyssInfo :abyss-info-data="abyssInfo"></AbyssInfo>
40 |         </div>
41 |       </div>
42 |     </section>
43 |   </div>
44 | </template>
45 | 
46 | <script>
47 | import BaseInfo from './../components/BaseInfo.vue'
48 | import AbyssInfo from './../components/AbyssInfo.vue'
49 | import html2canvas from "html2canvas";
50 | export default {
51 |   name: "genshin-info-render",
52 |   components: {BaseInfo, AbyssInfo},
53 |   props: ['msg', 'baseInfo', 'abyssInfo'],
54 |   methods: {
55 |     toImage() {
56 |       html2canvas(this.$refs.displayPanel, {
57 |         useCORS: true
58 |       }).then(canvas => {
59 |         let dataURL = canvas.toDataURL("image/png");
60 |         this.imgUrl = dataURL;
61 |         if (this.imgUrl !== "") {
62 |           let alink = document.createElement('a')
63 |           alink.href = dataURL
64 |           alink.download = 'genshin-info-uid-' + this.uid + '.png'
65 |           alink.click()
66 |         }
67 |       });
68 |     }
69 |   }
70 | }
71 | </script>
72 | 
73 | <style>
74 | .star-5 {
75 |   background-color: #be844e;
76 | }
77 | 
78 | .star-4 {
79 |   background-color: #7968a2;
80 | }
81 | </style>
82 | 


--------------------------------------------------------------------------------
/src/components/abyss/FloorBox.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="columns is-multiline" v-if="floorData.length > 0">
 3 |     <div class="column is-half" v-for="(floor, i) in floorData" :key="i">
 4 |       <article class="message">
 5 |         <div class="message-header">
 6 |           <p>
 7 |             第{{ floor.index }}层
 8 |           </p>
 9 |           <span>
10 |             <span>⭐ {{ floor.star }} / {{ floor.max_star }}</span>
11 |           </span>
12 |         </div>
13 |         <div class="message-body">
14 |           <!-- 房间 -->
15 |           <div class="column" v-for="(level, j) in floor.levels" :key="j+100">
16 |             <span><strong>第{{ level.index }}间</strong>
17 |               <small style="margin-left: 10px">
18 |                 {{ dateFormat(level.battles[0].timestamp * 1000, 'Y-m-d H:i:s') }}
19 |               </small>
20 |             </span>
21 |             <div class="columns is-vcentered is-centered is-multiline is-mobile">
22 |               <!-- 上半 -->
23 |               <div class="column is-narrow avatar-column" v-for="(avatar,k1) in level.battles[0].avatars"
24 |                    :key="k1+1000">
25 |                 <div :class="'avatar-card star-' + avatar.rarity">
26 |                   <img :src="avatar.icon" alt="">
27 |                   <div class="desc">
28 |                     Lv.{{ avatar.level }}
29 |                   </div>
30 |                 </div>
31 |               </div>
32 |               <!-- 中间显示⭐ -->
33 |               <div class="column is-narrow">
34 |                 <div v-for="k2 of level.star" :key="k2+3000">
35 |                   ⭐
36 |                 </div>
37 |               </div>
38 |               <!-- 下半 -->
39 |               <div class="column is-narrow avatar-column" v-for="(avatar,k3) in level.battles[1].avatars"
40 |                    :key="k3+2000">
41 |                 <div :class="'avatar-card star-' + avatar.rarity">
42 |                   <img :src="avatar.icon" alt="">
43 |                   <div class="desc">
44 |                     Lv.{{ avatar.level }}
45 |                   </div>
46 |                 </div>
47 |               </div>
48 |             </div>
49 |           </div>
50 |         </div>
51 |       </article>
52 |     </div>
53 |   </div>
54 | 
55 | </template>
56 | 
57 | <script>
58 | export default {
59 |   name: "FloorBox",
60 |   props: ['floorData']
61 | }
62 | </script>
63 | 
64 | <style scoped>
65 | .avatar-card {
66 |   width: 38px;
67 |   border-radius: 0.25rem;
68 | }
69 | 
70 | .avatar-card .desc {
71 |   background-color: #cccccc;
72 |   border-radius: 0 0 0.25rem 0.25rem;
73 |   text-align: center;
74 |   font-size: 12px;
75 |   margin-top: -5px;
76 | }
77 | 
78 | .avatar-column {
79 |   padding: 10px 8px;
80 | }
81 | </style>
82 | 


--------------------------------------------------------------------------------
/src/components/base/SummaryBox.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="columns is-multiline is-mobile has-text-centered">
  4 |       <div class="column is-one-quarter">
  5 |         <div>
  6 |           <p class="heading heading-custom">活跃天数</p>
  7 |           <p class="title title-custom">{{ statsData.active_day_number }}</p>
  8 |         </div>
  9 |       </div>
 10 |       <div class="column is-one-quarter">
 11 |         <div>
 12 |           <p class="heading heading-custom">成就达成数</p>
 13 |           <p class="title title-custom">{{ statsData.achievement_number }}</p>
 14 |         </div>
 15 |       </div>
 16 |       <div class="column is-one-quarter">
 17 |         <div>
 18 |           <p class="heading heading-custom">获得角色数</p>
 19 |           <p class="title title-custom">{{ statsData.avatar_number }}</p>
 20 |         </div>
 21 |       </div>
 22 |       <div class="column is-one-quarter">
 23 |         <div>
 24 |           <p class="heading heading-custom">解锁传送点</p>
 25 |           <p class="title title-custom">{{ statsData.way_point_number }}</p>
 26 |         </div>
 27 |       </div>
 28 |     </div>
 29 |     <div class="columns is-multiline is-mobile has-text-centered">
 30 |       <div class="column is-one-quarter">
 31 |         <div>
 32 |           <p class="heading heading-custom">风神瞳</p>
 33 |           <p class="title title-custom">{{ statsData.anemoculus_number }}</p>
 34 |         </div>
 35 |       </div>
 36 |       <div class="column is-one-quarter">
 37 |         <div>
 38 |           <p class="heading heading-custom">岩神瞳</p>
 39 |           <p class="title title-custom">{{ statsData.geoculus_number }}</p>
 40 |         </div>
 41 |       </div>
 42 |       <div class="column is-one-quarter">
 43 |         <div>
 44 |           <p class="heading heading-custom">雷神瞳</p>
 45 |           <p class="title title-custom">{{ statsData.electroculus_number }}</p>
 46 |         </div>
 47 |       </div>
 48 |       <div class="column is-one-quarter">
 49 |         <div>
 50 |           <p class="heading heading-custom">解锁秘境</p>
 51 |           <p class="title title-custom">{{ statsData.domain_number }}</p>
 52 |         </div>
 53 |       </div>
 54 |     </div>
 55 |     <div class="columns is-multiline is-mobile has-text-centered">
 56 |       <div class="column is-one-quarter">
 57 |         <div>
 58 |           <p class="heading heading-custom">深境螺旋</p>
 59 |           <p class="title title-custom">{{ statsData.spiral_abyss }}</p>
 60 |         </div>
 61 |       </div>
 62 |       <div class="column is-one-quarter">
 63 |         <div>
 64 |           <p class="heading heading-custom">华丽宝箱数</p>
 65 |           <p class="title title-custom">{{ statsData.luxurious_chest_number }}</p>
 66 |         </div>
 67 |       </div>
 68 |       <div class="column is-one-quarter">
 69 |         <div>
 70 |           <p class="heading heading-custom">珍贵宝箱数</p>
 71 |           <p class="title title-custom">{{ statsData.precious_chest_number }}</p>
 72 |         </div>
 73 |       </div>
 74 |       <div class="column is-one-quarter">
 75 |         <div>
 76 |           <p class="heading heading-custom">精致宝箱数</p>
 77 |           <p class="title title-custom">{{ statsData.exquisite_chest_number }}</p>
 78 |         </div>
 79 |       </div>
 80 |     </div>
 81 |     <div class="columns is-multiline is-mobile has-text-centered">
 82 |       <div class="column is-one-quarter">
 83 |         <div>
 84 |           <p class="heading heading-custom">普通宝箱数</p>
 85 |           <p class="title title-custom">{{ statsData.common_chest_number }}</p>
 86 |         </div>
 87 |       </div>
 88 |       <div class="column is-one-quarter">
 89 |         <div>
 90 |           <p class="heading heading-custom">奇馈宝箱数</p>
 91 |           <p class="title title-custom">{{ statsData.magic_chest_number }}</p>
 92 |         </div>
 93 |       </div>
 94 |     </div>
 95 |   </div>
 96 | </template>
 97 | 
 98 | <script>
 99 | export default {
100 |   name: "SummaryBox",
101 |   props: ['statsData']
102 | }
103 | </script>
104 | 
105 | <style scoped>
106 | 
107 | </style>
108 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <nav class="navbar has-shadow" role="navigation" aria-label="main navigation">
  4 |       <div class="navbar-brand">
  5 |         <a class="navbar-item" href="">
  6 |           <strong>原神角色信息查询</strong>
  7 |         </a>
  8 | 
  9 |         <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
 10 |           <span aria-hidden="true"></span>
 11 |           <span aria-hidden="true"></span>
 12 |           <span aria-hidden="true"></span>
 13 |         </a>
 14 |       </div>
 15 |       <div id="navbarBasicExample" class="navbar-menu">
 16 |         <div class="navbar-start">
 17 |           <a class="navbar-item" href="https://github.com/babalae/genshin-info" target="_blank">
 18 |             Github
 19 |           </a>
 20 |           <a class="navbar-item" href="https://babalae.github.io/bookmarklet/" target="_blank">
 21 |             🔖小书签
 22 |           </a>
 23 |           <a class="navbar-item" href="https://github.com/babalae/genshin-fishing-toy" target="_blank">
 24 |             🐟自动钓鱼
 25 |           </a>
 26 |           <a class="navbar-item" href="https://github.com/babalae/genshin-account" target="_blank">
 27 |             🛠️多账号快速切换
 28 |           </a>
 29 |         </div>
 30 |       </div>
 31 |     </nav>
 32 |     <section class="section" ref="displayPanel">
 33 |       <div class="container">
 34 |         <article class="message is-danger">
 35 |           <div class="message-body">
 36 |             由于云函数的收费，当前项目已弃坑，有兴趣的话可以看看上方的其他原神相关的项目👆
 37 |           </div>
 38 |         </article>
 39 |         <article class="message is-warning">
 40 |           <div class="message-body">
 41 |             由于米游社的限制，一个 cookie 每天只能查询 30 位玩家的信息，当前的机器人账户完全不够使用的。<br/>
 42 |             如果提示 “查询次数已经耗尽” ，可以使用小书签方式（使用当前浏览器登录的 cookie）进行查询： <a href="https://babalae.github.io/bookmarklet/">https://babalae.github.io/bookmarklet/</a><br/>
 43 |             查询结果展示的信息是完全一样的，而且更加安全、快捷
 44 |           </div>
 45 |         </article>
 46 |         <div class="card">
 47 |           <header class="card-header">
 48 |             <p class="card-header-title">
 49 |               🔍 查询栏
 50 |             </p>
 51 |             <div class="card-header-icon" aria-label="more options"
 52 |                  v-if="baseInfo !== undefined || abyssInfo !== undefined">
 53 |               <span class="icon" @click="toImage">📥</span>
 54 |             </div>
 55 |           </header>
 56 |           <div class="card-content">
 57 |             <div class="field is-horizontal">
 58 |               <div class="field-body">
 59 |                 <div class="field has-addons is-narrow">
 60 |                   <p class="control">
 61 |                     <input id="uid" class="input" type="text" placeholder="请输入UID" maxlength="9" v-model="uid"
 62 |                            @keyup.enter="search">
 63 |                   </p>
 64 |                   <p class="control">
 65 |                     <a class="button is-info" :class="{'is-loading': searching}" @click="search">查询</a>
 66 |                   </p>
 67 |                 </div>
 68 |                 <div class="field is-narrow" v-if="baseInfo !== undefined || abyssInfo !== undefined">
 69 |                   <button class="button is-success" @click="toImage">下载图片</button>
 70 |                 </div>
 71 |               </div>
 72 |             </div>
 73 |             <article class="message" :class="tipsClass">
 74 |               <div class="message-body">
 75 |                 {{ tips }}
 76 |               </div>
 77 |             </article>
 78 |           </div>
 79 |         </div>
 80 |         <div v-if="baseInfo !== undefined">
 81 |           <BaseInfo :base-info-data="baseInfo"></BaseInfo>
 82 |         </div>
 83 |         <div v-if="abyssInfo !== undefined">
 84 |           <AbyssInfo :abyss-info-data="abyssInfo"></AbyssInfo>
 85 |         </div>
 86 |       </div>
 87 |     </section>
 88 | 
 89 |   </div>
 90 | </template>
 91 | 
 92 | <script>
 93 | import BaseInfo from './components/BaseInfo.vue'
 94 | import AbyssInfo from './components/AbyssInfo.vue'
 95 | import html2canvas from 'html2canvas';
 96 | 
 97 | export default {
 98 |   name: 'App',
 99 |   components: {BaseInfo, AbyssInfo},
100 |   data() {
101 |     return {
102 |       uid: '',
103 |       baseInfo: undefined,
104 |       abyssInfo: undefined,
105 | 
106 |       tips: '请输入UID点击查询',
107 |       tipsClass: '',
108 |       searching: false
109 |     }
110 |   },
111 |   mounted() {
112 |   },
113 |   methods: {
114 |     search() {
115 |       this.uid = document.querySelector('#uid').value
116 |       if (this.uid === null || this.uid === undefined || this.uid === '') {
117 |         this.tips = '👆 请输入UID'
118 |         this.tipsClass = 'is-warning'
119 |         return
120 |       }
121 |       this.searching = true
122 |       this.tips = '查询中，请耐心等待...'
123 | 
124 |       Promise.all([this.queryBaseInfo(), this.queryAbyssInfo()]).then(values => {
125 |         let baseInfoJson = values[0]
126 |         let abyssInfoJson = values[1]
127 |         if (baseInfoJson.retcode == 0) {
128 |           this.baseInfo = baseInfoJson.data
129 |           this.abyssInfo = abyssInfoJson.data
130 |           this.tips = 'UID: ' + this.uid + ' 查询成功'
131 |           this.tipsClass = 'is-success'
132 |         } else if (baseInfoJson.retcode == -1) {
133 |           this.tips = '查询无结果，可能造成这种情况的原因：1.UID不存在 2.没有在米游社同步并公开角色信息'
134 |           this.tipsClass = 'is-warning'
135 |         } else if (baseInfoJson.retcode == 10102) {
136 |           this.tips = '该UID没有在米游社公开角色信息。' + baseInfoJson.message
137 |           this.tipsClass = 'is-warning'
138 |         } else if (baseInfoJson.retcode == 10101) {
139 |           this.tips = '当天查询次数已经耗尽，请明天再来吧。' + baseInfoJson.message
140 |           this.tipsClass = 'is-warning'
141 |         } else {
142 |           this.tips = '查询失败！' + baseInfoJson.message
143 |           this.tipsClass = 'is-danger'
144 |         }
145 |         this.searching = false
146 |       }).catch(err => {
147 |         this.tips = '查询失败！' + err
148 |         this.tipsClass = 'is-danger'
149 |       });
150 |     },
151 |     queryBaseInfo() {
152 |       return new Promise((resolve, reject) => {
153 |         fetch('//service-joam13r8-1252025612.gz.apigw.tencentcs.com/uid/' + this.uid, {
154 |           method: 'GET',
155 |           mode: 'cors',
156 |         }).then(res => res.json()).then(json => {
157 |           resolve(json)
158 |         }).catch(function (e) {
159 |           reject(e)
160 |         })
161 |       })
162 |     },
163 |     queryAbyssInfo() {
164 |       return new Promise((resolve, reject) => {
165 |         fetch('//service-joam13r8-1252025612.gz.apigw.tencentcs.com/abyss/' + this.uid, {
166 |           method: 'GET',
167 |           mode: 'cors',
168 |         }).then(res => res.json()).then(json => {
169 |           resolve(json)
170 |         }).catch(function (e) {
171 |           reject(e)
172 |         })
173 |       })
174 |     },
175 |     toImage() {
176 |       html2canvas(this.$refs.displayPanel, {
177 |         useCORS: true
178 |       }).then(canvas => {
179 |         let dataURL = canvas.toDataURL("image/png");
180 |         this.imgUrl = dataURL;
181 |         if (this.imgUrl !== "") {
182 |           let alink = document.createElement('a')
183 |           alink.href = dataURL
184 |           alink.download = 'genshin-info-uid-' + this.uid + '.png'
185 |           alink.click()
186 |         }
187 |       });
188 |     }
189 |   }
190 | }
191 | </script>
192 | 
193 | <style>
194 | #app {
195 |   /*background-color: #e2e2e2;*/
196 | }
197 | 
198 | 
199 | .level-item-custom {
200 |   width: 25%;
201 | }
202 | 
203 | .heading-custom {
204 |   font-size: 16px !important;
205 | }
206 | 
207 | .title-custom {
208 |   font-size: 1.75rem !important;
209 |   font-weight: 470 !important;
210 |   line-height: 1 !important;
211 | }
212 | 
213 | .star-5 {
214 |   background-color: #be844e;
215 | }
216 | 
217 | .star-4 {
218 |   background-color: #7968a2;
219 | }
220 | </style>
221 | 


--------------------------------------------------------------------------------