├── .editorconfig
├── .eslintrc.js
├── .github
    └── dependabot.yml
├── .gitignore
├── README.md
├── assets
    ├── global.css
    └── variables.scss
├── components
    ├── AppBar.vue
    ├── SnackBar.vue
    ├── account
    │   ├── ForgotForm.vue
    │   ├── LoginForm.vue
    │   └── RegisterForm.vue
    ├── container
    │   └── create
    │   │   ├── InstanceInfo.vue
    │   │   ├── InstanceOptions.vue
    │   │   └── OptionsConfirm.vue
    └── table
    │   ├── TableFund.vue
    │   ├── TableProducts.vue
    │   ├── TableProductsAll.vue
    │   ├── TableProductsRetention.vue
    │   ├── TableTabs.vue
    │   ├── TableTodo.vue
    │   └── TableViewall.vue
├── jsconfig.json
├── layouts
    ├── cdn.vue
    ├── container.vue
    ├── default.vue
    └── error.vue
├── nuxt.config.js
├── package.json
├── pages
    ├── account
    │   ├── forgot.vue
    │   ├── index.vue
    │   ├── login.vue
    │   ├── register.vue
    │   └── settings.vue
    ├── addfunds
    │   └── vme50.vue
    ├── cdn
    │   ├── detail
    │   │   └── _domainName.vue
    │   ├── domains.vue
    │   └── index.vue
    ├── container
    │   ├── create
    │   │   └── instance.vue
    │   ├── index.vue
    │   ├── overview.vue
    │   ├── productdetail
    │   │   └── _id.vue
    │   └── productlist.vue
    ├── index.vue
    ├── redirect
    │   └── index.vue
    └── table
    │   └── index.vue
├── static
    ├── favicon.ico
    └── incloudify-logo-large.png
├── store
    └── README.md
├── utils
    ├── HttpUtils.vue
    └── SessionUtils.vue
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true
 6 |   },
 7 |   parserOptions: {
 8 |     parser: '@babel/eslint-parser',
 9 |     requireConfigFile: false
10 |   },
11 |   extends: [
12 |     '@nuxtjs',
13 |     'plugin:nuxt/recommended'
14 |   ],
15 |   plugins: [
16 |   ],
17 |   // add your custom rules here
18 |   rules: {
19 |     'no-console': 'off'
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | updates:
 3 | # Fetch and update latest `npm` packages
 4 | - package-ecosystem: npm
 5 |   directory: '/'
 6 |   schedule:
 7 |     interval: daily
 8 |     time: '00:00'
 9 |   open-pull-requests-limit: 10
10 |   reviewers:
11 |     - dispure
12 |   assignees:
13 |     - dispure
14 |   commit-message:
15 |     prefix: fix
16 |     prefix-development: chore
17 |     include: scope
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | /logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 
86 | # macOS
87 | .DS_Store
88 | 
89 | # Vim swap files
90 | *.swp
91 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Consolify
 2 | 
 3 | ------
 4 | 
 5 | **一个基于Nuxt与Vuetify的云服务IDC控制台**
 6 | 
 7 | 此项目依然处于开发状态, 欢迎您成为本项目的贡献者。但在提交Pull Request前, 请先仔细阅读 [提交代码规范](https://www.bilibili.com/video/BV1GJ411x7h7)。
 8 | 
 9 | ### 当前已完成功能
10 | 
11 | ------
12 | 
13 | ***注:** 后端需自行适配接入*
14 | 
15 | - 概览页
16 | - 账户登录/注册/忘记密码页
17 | - 内容分发网络管理页
18 | - 容器云管理页
19 | 
20 | ### 快速开始
21 | 
22 | ------
23 | 
24 | ***注:** 若在操作过程中遇到困难, 可加入 [QQ群聊](https://jq.qq.com/?_wv=1027&k=ISEDwdTh) 寻求帮助*
25 | 
26 | #### 设备环境需求
27 | 
28 | - Yarn
29 | 
30 | #### 启动开发构建
31 | 
32 | `````
33 | # 安装依赖项
34 | $ yarn install
35 | # 启动开发构建
36 | $ yarn dev
37 | `````
38 | 
39 | #### 启动生产构建
40 | 
41 | ```
42 | # 安装依赖项
43 | $ yarn install
44 | # 构建所需文件
45 | $ yarn build
46 | # 启动生产构建
47 | $ yarn start
48 | ```
49 | 
50 | 在启动完成后, 你将可以在 [http://localhost:3000](http://localhost:3000) 看到页面
51 | 
52 | 如需更多相关帮助, 请查阅 [Wiki](https://github.com/Incloudify/consolify-frontend/wiki)
53 | 
54 | 


--------------------------------------------------------------------------------
/assets/global.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --primary-color: #2196F3;
 3 |   --blur: none;
 4 | }
 5 | 
 6 | a:not(.v-btn, .v-card, .v-chip, .v-list-item) {
 7 |   color: var(--primary-color);
 8 |   text-decoration: none;
 9 | }
10 | 
11 | a:hover:not(.v-btn, .v-card, .v-chip, .v-list-item),
12 | a:focus:not(.v-btn, .v-card, .v-chip, .v-list-item) {
13 |   text-decoration: none;
14 | }
15 | 
16 | a.text-color:hover {
17 |   color: var(--text) !important;
18 | }
19 | 


--------------------------------------------------------------------------------
/assets/variables.scss:
--------------------------------------------------------------------------------
1 | // Ref: https://github.com/nuxt-community/vuetify-module#customvariables
2 | //
3 | // The variables you want to modify
4 | // $font-size-root: 20px;
5 | 


--------------------------------------------------------------------------------
/components/AppBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app-bar
 3 |     color="white"
 4 |     elevation="0"
 5 |     app
 6 |   >
 7 |     <v-app-bar-nav-icon />
 8 |     <v-toolbar-title @click="replaceToHome">
 9 |       {{ siteName }}控制台
10 |     </v-toolbar-title>
11 |     <v-spacer />
12 |     <v-btn icon to="/account">
13 |       <v-icon>mdi-account-circle-outline</v-icon>
14 |     </v-btn>
15 |   </v-app-bar>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   data: () => ({
21 |     siteName: '玲行云端'
22 |   }),
23 |   methods: {
24 |     replaceToHome () {
25 |       this.$router.push('/table')
26 |     }
27 |   }
28 | }
29 | </script>
30 | <style>
31 | .v-toolbar__title {
32 |   margin-right: 5px;
33 | }
34 | 
35 | .v-btn {
36 |   margin-left: 10px;
37 | }
38 | </style>
39 | 


--------------------------------------------------------------------------------
/components/SnackBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-snackbar
 3 |     v-model="snackBarSeen"
 4 |     top
 5 |     right
 6 |     :color="notifyBgColor"
 7 |   >
 8 |     <v-icon size="22">
 9 |       {{ notifyIcon }}
10 |     </v-icon>
11 |     {{ notifyMsg }}
12 |     <v-btn
13 |       v-if="notifyClosable"
14 |       color="white"
15 |       class="snackbar-close-btn"
16 |       icon
17 |       @click="snackBarSeen = false"
18 |     >
19 |       <v-icon size="18">
20 |         mdi-close
21 |       </v-icon>
22 |     </v-btn>
23 |   </v-snackbar>
24 | </template>
25 | <script>
26 | export default {
27 |   name: 'SnackBar',
28 |   data: () => ({
29 |     notifyMsg: '',
30 |     snackBarSeen: false,
31 |     notifyIcon: '',
32 |     notifyBgColor: 'red accent-2',
33 |     notifyClosable: false
34 |   })
35 | }
36 | </script>
37 | 
38 | <style>
39 | .snackbar-close-btn {
40 |   position: absolute;
41 |   right: 3%;
42 |   top: 14%;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/components/account/ForgotForm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <v-scroll-x-transition>
  4 |       <v-form
  5 |         v-if="!isSubmitted"
  6 |         ref="infoForm"
  7 |         elevation="0"
  8 |         lazy-validation
  9 |       >
 10 |         <v-text-field
 11 |           v-model="usernameData"
 12 |           label="还记得你的名字吗"
 13 |           placeholder="填写用户名或注册邮箱"
 14 |           hint="你的名字仅包含大小写A-z, 数字0-9, 下划线_, @, ."
 15 |           maxlength="35"
 16 |           :rules="userNameRule"
 17 |           outlined
 18 |         />
 19 |         <v-btn
 20 |           ref="submitBtn"
 21 |           rounded
 22 |           block
 23 |           elevation="1"
 24 |           color="primary"
 25 |           :loading="isSubmitting"
 26 |           :disabled="isSubmitting"
 27 |           @click="submit"
 28 |         >
 29 |           开始唤醒
 30 |         </v-btn>
 31 |       </v-form>
 32 |     </v-scroll-x-transition>
 33 |     <v-scroll-x-transition>
 34 |       <v-form
 35 |         v-if="isSubmitted && transitionPlayed"
 36 |         ref="succeedForm"
 37 |         class="succeed-form"
 38 |         elevation="0"
 39 |       >
 40 |         <v-icon
 41 |           size="120"
 42 |           color="grey darken-2"
 43 |         >
 44 |           mdi-email-check-outline
 45 |         </v-icon>
 46 |         <p>邮件已发送</p>
 47 |         <v-btn
 48 |           ref="backLoginBtn"
 49 |           rounded
 50 |           block
 51 |           elevation="1"
 52 |           color="primary"
 53 |           to="/account/login"
 54 |         >
 55 |           返回登录
 56 |         </v-btn>
 57 |       </v-form>
 58 |     </v-scroll-x-transition>
 59 |   </div>
 60 | </template>
 61 | 
 62 | <script>
 63 | import HttpUtils from '~/utils/HttpUtils.vue'
 64 | export default {
 65 |   name: 'ForgotForm',
 66 |   mixins: [HttpUtils],
 67 |   data: () => ({
 68 |     isSubmitting: false,
 69 |     userNameRule: [
 70 |       value => !!value || '这下完了, 连自己名字也忘记了',
 71 |       (value) => {
 72 |         const emailPattern = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]/
 73 |         const userNamePattern = /\w([A-Za-z0-9][-A-Za-z0-9]*)/
 74 |         if (emailPattern.test(value)) {
 75 |           return true
 76 |         } else if (userNamePattern.test(value)) {
 77 |           return true
 78 |         } else {
 79 |           return false || '名字不是你想叫什么就叫什么的啊!'
 80 |         }
 81 |       }
 82 |     ],
 83 |     usernameData: '',
 84 |     isSubmitted: false,
 85 |     transitionPlayed: false
 86 |   }),
 87 |   methods: {
 88 |     submit () {
 89 |       const validateResult = this.$refs.infoForm.validate()
 90 |       this.$refs.submitBtn.$el.style = ''
 91 |       if (validateResult === true) {
 92 |         this.isSubmitting = !this.isSubmitting
 93 |       } else {
 94 |         this.$refs.submitBtn.$el.style = 'background-color: #EE6363 !important; border-color: #EE6363 !important;'
 95 |         setTimeout(() => {
 96 |           this.$refs.submitBtn.$el.style = ''
 97 |         }, 1500)
 98 |         return false
 99 |       }
100 |       const usernameData = this.$data.usernameData
101 |       const dataObj = {}
102 |       dataObj.username = usernameData
103 |       this.sendPostToApi('/account/forgot', dataObj, this.reqDataCallback, false)
104 |     },
105 |     reqDataCallback (requestDataReturn) {
106 |       if (requestDataReturn.code === 1000) {
107 |         this.$data.isSubmitted = true
108 |         setTimeout(() => {
109 |           this.$data.transitionPlayed = true
110 |         }, 500)
111 |         this.$emit('submitSucceed')
112 |       } else if (requestDataReturn.data !== undefined && requestDataReturn.data.code !== undefined) {
113 |         if (requestDataReturn.data.code === 1021 && requestDataReturn.code === 404) {
114 |           this.$data.usernameErr = true
115 |           this.$data.usrErrMsg = '用户名/邮箱不存在'
116 |           this.$data.usrErrCount = 1
117 |           this.$data.isSubmitting = false
118 |           this.$refs.submitBtn.$el.style = 'background-color: #EE6363 !important; border-color: #EE6363 !important;'
119 |           setTimeout(() => {
120 |             this.$refs.submitBtn.$el.style = ''
121 |           }, 1500)
122 |         } else if ((requestDataReturn.data.code === 1003 && requestDataReturn.code === 422) || requestDataReturn.code === 422) {
123 |           this.$parent.$parent.$parent.$emit('showSnackBar', 'error', '参数错误, 请联系系统管理员', '5000', true)
124 |           this.$data.usernameErr = true
125 |           this.$data.usrErrMsg = '参数错误'
126 |           this.$data.usrErrCount = 1
127 |           this.$data.isSubmitting = false
128 |           this.$refs.submitBtn.$el.style = 'background-color: #EE6363 !important; border-color: #EE6363 !important;'
129 |           setTimeout(() => {
130 |             this.$refs.submitBtn.$el.style = ''
131 |           }, 1500)
132 |         } else if (requestDataReturn.data.code !== undefined) {
133 |           this.$parent.$parent.$parent.$emit('showSnackBar', 'error', '未识别的错误, 请联系系统管理员', '5000', true)
134 |           this.$data.usernameErr = true
135 |           this.$data.usrErrMsg = '未识别的错误'
136 |           this.$data.usrErrCount = 1
137 |           this.$data.isSubmitting = false
138 |           this.$refs.submitBtn.$el.style = 'background-color: #EE6363 !important; border-color: #EE6363 !important;'
139 |           setTimeout(() => {
140 |             this.$refs.submitBtn.$el.style = ''
141 |           }, 1500)
142 |         } else {
143 |           this.$parent.$parent.$parent.$emit('showSnackBar', 'error', '发生未知错误, 请重试', '5000', true)
144 |           this.$data.usernameErr = true
145 |           this.$data.usrErrMsg = '发生未知错误, 请重试'
146 |           this.$data.usrErrCount = 1
147 |           this.$data.isSubmitting = false
148 |           this.$refs.submitBtn.$el.style = 'background-color: #EE6363 !important; border-color: #EE6363 !important;'
149 |           setTimeout(() => {
150 |             this.$refs.submitBtn.$el.style = ''
151 |           }, 1500)
152 |         }
153 |       } else if (requestDataReturn.code === -1) {
154 |         this.$parent.$parent.$parent.$emit('showSnackBar', 'error', '网络错误, 请重试', '5000', true)
155 |         this.$data.usernameErr = true
156 |         this.$data.passwordErr = true
157 |         this.$data.pwdErrMsg = '网络错误, 请重试'
158 |         this.$data.pwdErrCount = 1
159 |         this.$data.isSubmitting = false
160 |         this.$refs.submitBtn.$el.style = 'background-color: #EE6363 !important; border-color: #EE6363 !important;'
161 |         setTimeout(() => {
162 |           this.$refs.submitBtn.$el.style = ''
163 |         }, 1500)
164 |       } else {
165 |         this.$parent.$parent.$parent.$emit('showSnackBar', 'error', '发生未知错误, 请重试', '5000', true)
166 |         this.$data.usernameErr = true
167 |         this.$data.passwordErr = true
168 |         this.$data.pwdErrMsg = '发生未知错误, 请重试'
169 |         this.$data.pwdErrCount = 1
170 |         this.$data.isSubmitting = false
171 |         this.$refs.submitBtn.$el.style = 'background-color: #EE6363 !important; border-color: #EE6363 !important;'
172 |         setTimeout(() => {
173 |           this.$refs.submitBtn.$el.style = ''
174 |         }, 1500)
175 |       }
176 |     }
177 |   }
178 | }
179 | </script>
180 | 
181 | <style>
182 | .v-form {
183 |   margin: 5px auto;
184 |   max-width: 35%;
185 |   min-width: 300px;
186 | }
187 | 
188 | .v-btn {
189 |   margin: 0;
190 | }
191 | 
192 | .v-input {
193 |   margin-top: 5px;
194 | }
195 | </style>
196 | 


--------------------------------------------------------------------------------
/components/account/LoginForm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <v-scroll-x-transition>
  4 |       <v-form v-if="!isSubmitted" ref="infoForm" elevation="0" lazy-validation>
  5 |         <v-text-field
  6 |           ref="usrField"
  7 |           v-model="usernameData"
  8 |           label="用户名"
  9 |           hint="大小写A-z, 数字0-9, 下划线_, ."
 10 |           :rules="userNameRule"
 11 |           :error="usernameErr"
 12 |           :error-count="usrErrCount"
 13 |           :error-messages="usrErrMsg"
 14 |           maxlength="35"
 15 |           outlined
 16 |         />
 17 |         <v-text-field
 18 |           ref="pwdField"
 19 |           v-model="originPassword"
 20 |           label="密码"
 21 |           hint="注册时设置的密码"
 22 |           :type="passwdShow ? 'text' : 'password'"
 23 |           :append-icon="passwdShow ? 'mdi-eye' : 'mdi-eye-off'"
 24 |           :rules="passwordRule"
 25 |           :error="passwordErr"
 26 |           :error-count="pwdErrCount"
 27 |           :error-messages="pwdErrMsg"
 28 |           maxlength="128"
 29 |           outlined
 30 |           @click:append="passwdShow = !passwdShow"
 31 |         />
 32 |         <v-btn
 33 |           id="submitBtn"
 34 |           ref="submitBtn"
 35 |           rounded
 36 |           block
 37 |           elevation="1"
 38 |           color="primary"
 39 |           :loading="isSubmitting"
 40 |           :disabled="isSubmitting"
 41 |           @click="submit"
 42 |         >
 43 |           登录
 44 |         </v-btn>
 45 |       </v-form>
 46 |     </v-scroll-x-transition>
 47 |     <v-scroll-x-transition>
 48 |       <v-form v-if="isSubmitted && transitionPlayed" ref="succeedForm" class="succeed-form" elevation="0">
 49 |         <v-icon size="120" color="grey darken-2">
 50 |           mdi-check
 51 |         </v-icon>
 52 |         <p>登录成功</p>
 53 |         <v-btn
 54 |           ref="backHomeBtn"
 55 |           rounded
 56 |           block
 57 |           elevation="1"
 58 |           color="primary"
 59 |           to="/table"
 60 |         >
 61 |           返回首页
 62 |         </v-btn>
 63 |       </v-form>
 64 |     </v-scroll-x-transition>
 65 |   </div>
 66 | </template>
 67 | 
 68 | <script>
 69 | import SessionUtils from '~/utils/SessionUtils.vue'
 70 | import HttpUtils from '~/utils/HttpUtils.vue'
 71 | export default {
 72 |   name: 'LoginForm',
 73 |   mixins: [SessionUtils, HttpUtils],
 74 |   data: () => ({
 75 |     isSubmitting: false,
 76 |     isSubmitted: false,
 77 |     passwdShow: false,
 78 |     usernameData: '',
 79 |     originPassword: '',
 80 |     usernameErr: false,
 81 |     passwordErr: false,
 82 |     transitionPlayed: false,
 83 |     usrErrCount: 1,
 84 |     pwdErrCount: 1,
 85 |     usrErrMsg: '',
 86 |     pwdErrMsg: '',
 87 |     userNameRule: [
 88 |       value => !!value || '不可以空着',
 89 |       (value) => {
 90 |         const emailPattern = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]/
 91 |         const userNamePattern = /\w([A-Za-z0-9][-A-Za-z0-9]*)/
 92 |         if (emailPattern.test(value)) {
 93 |           return true
 94 |         } else if (userNamePattern.test(value)) {
 95 |           return true
 96 |         } else {
 97 |           return false || '好好填啊喂!'
 98 |         }
 99 |       }
100 |     ],
101 |     passwordRule: [
102 |       value => !!value || '这个更不可以空着了'
103 |     ]
104 |   }),
105 |   methods: {
106 |     submit () {
107 |       const cryptoInstance = require('crypto')
108 |       const validateResult = this.$refs.infoForm.validate()
109 |       this.$refs.submitBtn.$el.style = ''
110 |       if (validateResult === true) {
111 |         this.isSubmitting = !this.isSubmitting
112 |       } else {
113 |         this.$refs.submitBtn.$el.style = 'background-color: #EE6363 !important; border-color: #EE6363 !important;'
114 |         setTimeout(this.clearBtnStyle, 1500)
115 |         return false
116 |       }
117 |       const usernameData = this.$data.usernameData
118 |       const originPassword = this.$data.originPassword
119 |       const saltPassword = originPassword + '81262035b6d4babbcfd8fe71892edced'
120 |       const sha512 = cryptoInstance.createHash('sha512')
121 |       const saltPasswordSHA512 = sha512.update(saltPassword).digest('hex')
122 |       const dataObj = {}
123 |       dataObj.username = usernameData
124 |       dataObj.password = saltPasswordSHA512
125 |       this.sendPostToApi('/account/login', dataObj, this.reqDataCallback, false)
126 |     },
127 |     reqDataCallback (requestDataReturn) {
128 |       if (requestDataReturn.code === 1000) {
129 |         const sessionIdReturn = requestDataReturn.data.sessionId
130 |         if (sessionIdReturn !== null) {
131 |           this.editCookieValue('sessionId', sessionIdReturn)
132 |         }
133 |         this.$data.isSubmitted = true
134 |         setTimeout(() => {
135 |           this.$data.transitionPlayed = true
136 |         }, 500)
137 |         this.$emit('submitSucceed')
138 |       } else if (requestDataReturn.data !== undefined && requestDataReturn.data.code !== undefined) {
139 |         if (requestDataReturn.data.code === 3010 && requestDataReturn.code === 404) {
140 |           this.showResult(undefined, undefined, true, false, '用户名不存在')
141 |         } else if (requestDataReturn.data.code === 3011 && requestDataReturn.code === 403) {
142 |           this.showResult(undefined, undefined, false, true, '密码错误')
143 |         } else if ((requestDataReturn.data.code === 1003 && requestDataReturn.code === 422) || requestDataReturn.code === 422) {
144 |           this.showResult('error', '参数错误, 请联系系统管理员', true, true, '参数错误')
145 |         } else if ((requestDataReturn.data.code === undefined && requestDataReturn.code === 500) || requestDataReturn.code === 500) {
146 |           this.showResult('error', '服务器内部错误, 请重试', true, true, '服务器内部错误, 请重试')
147 |         } else if (requestDataReturn.data.code !== undefined) {
148 |           this.showResult('error', requestDataReturn.data.message, true, true, '未识别的错误')
149 |         } else {
150 |           this.showResult('error', '发生未知错误, 请重试', true, true, '发生未知错误, 请重试')
151 |         }
152 |       } else if (requestDataReturn.code === 500) {
153 |         this.showResult('error', '服务器内部错误, 请重试', true, true, '服务器内部错误, 请重试')
154 |       } else if (requestDataReturn.code === -1) {
155 |         this.showResult('error', '网络错误, 请重试', true, true, '网络错误, 请重试')
156 |       } else if (requestDataReturn.code === 0) {
157 |         this.showResult('error', '发生未知错误, 请重试', true, true, '发生未知错误, 请重试')
158 |       } else {
159 |         this.showResult('error', '发生未知错误, 请重试', true, true, '发生未知错误, 请重试')
160 |       }
161 |     },
162 |     clearBtnStyle () {
163 |       this.$refs.submitBtn.$el.style = ''
164 |     },
165 |     showResult (snackBarType, snackBarMsg, usrErr, pwdErr, errMsg) {
166 |       if (snackBarType !== undefined) {
167 |         this.$parent.$parent.$parent.$emit('showSnackBar', snackBarType, snackBarMsg, '5000', true)
168 |       }
169 |       this.$data.usernameErr = usrErr
170 |       this.$data.passwordErr = pwdErr
171 |       if (usrErr && pwdErr) {
172 |         this.$data.pwdErrMsg = errMsg
173 |         this.$data.usrErrCount = 1
174 |         this.$data.pwdErrCount = 1
175 |       } else if (usrErr && !pwdErr) {
176 |         this.$data.usrErrMsg = errMsg
177 |         this.$data.usrErrCount = 1
178 |         this.$data.pwdErrCount = 0
179 |       } else if (!usrErr && pwdErr) {
180 |         this.$data.pwdErrMsg = errMsg
181 |         this.$data.usrErrCount = 0
182 |         this.$data.pwdErrCount = 1
183 |       }
184 |       this.$data.isSubmitting = false
185 |       this.$refs.submitBtn.$el.style = 'background-color: #EE6363 !important; border-color: #EE6363 !important;'
186 |       setTimeout(this.clearBtnStyle, 1500)
187 |     }
188 |   }
189 | }
190 | </script>
191 | 
192 | <style>
193 | .v-form {
194 |   margin: 5px auto;
195 |   max-width: 35%;
196 |   min-width: 300px;
197 | }
198 | 
199 | .v-btn {
200 |   margin: 0;
201 |   transition: all 0.5s;
202 | }
203 | 
204 | .v-input {
205 |   margin-top: 5px;
206 | }
207 | 
208 | .succeed-form {
209 |   text-align: center;
210 | }
211 | 
212 | .succeed-form p {
213 |   font-size: 22px;
214 |   opacity: .5;
215 | }
216 | </style>
217 | 


--------------------------------------------------------------------------------
/components/account/RegisterForm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!-- u1s1, 这页面代码乱的要死 -->
  3 |   <!-- 但没精力重构了 -->
  4 |   <!-- 不纯, 写于2022/12/28 22:17 -->
  5 |   <div>
  6 |     <v-stepper v-model="e1" elevation="0">
  7 |       <v-stepper-header class="elevation-0 reg-stepper-header">
  8 |         <v-stepper-step :complete="e1 > 1" step="1">
  9 |           账户信息
 10 |         </v-stepper-step>
 11 |         <v-divider />
 12 |         <v-stepper-step :complete="e1 > 2" step="2">
 13 |           安全性
 14 |         </v-stepper-step>
 15 |         <v-divider />
 16 |         <v-stepper-step :complete="e1 > 3" step="3">
 17 |           个性化
 18 |         </v-stepper-step>
 19 |         <v-divider />
 20 |         <v-stepper-step :complete="e1 > 4" step="4">
 21 |           验证邮箱
 22 |         </v-stepper-step>
 23 |         <v-divider />
 24 |         <v-stepper-step step="5">
 25 |           完成注册
 26 |         </v-stepper-step>
 27 |       </v-stepper-header>
 28 |       <v-stepper-items>
 29 |         <v-stepper-content step="1">
 30 |           <v-form ref="infoForm" elevation="0" lazy-validation>
 31 |             <v-text-field
 32 |               ref="mailField"
 33 |               v-model="mailData"
 34 |               label="邮箱"
 35 |               hint="大小写A-z, 数字0-9, 下划线_, @, ."
 36 |               :rules="mailRule"
 37 |               :error="mailErr"
 38 |               :error-count="mailErrCount"
 39 |               :error-messages="mailErrMsg"
 40 |               maxlength="35"
 41 |               outlined
 42 |             />
 43 |             <v-col style="display: flex; padding: 0;">
 44 |               <v-spacer />
 45 |               <v-btn ref="nextStepBtn" rounded elevation="1" color="primary" @click="setPassword">
 46 |                 下一步
 47 |               </v-btn>
 48 |             </v-col>
 49 |           </v-form>
 50 |         </v-stepper-content>
 51 | 
 52 |         <v-stepper-content step="2">
 53 |           <v-form ref="passwdForm" class="passwd-form" elevation="0">
 54 |             <v-text-field
 55 |               ref="pwdField"
 56 |               v-model="originPassword"
 57 |               label="密码"
 58 |               hint="6-16个字符, 至少包含大写英文字母、小写英文字母、特殊符号、数字中的三种"
 59 |               :type="passwdShow ? 'text' : 'password'"
 60 |               :append-icon="passwdShow ? 'mdi-eye' : 'mdi-eye-off'"
 61 |               :rules="passwordRule"
 62 |               :error="passwordErr"
 63 |               :error-count="pwdErrCount"
 64 |               :error-messages="pwdErrMsg"
 65 |               maxlength="16"
 66 |               outlined
 67 |               @click:append="passwdShow = !passwdShow"
 68 |             />
 69 |             <v-col style="display: flex; padding: 0;">
 70 |               <v-btn
 71 |                 id="backwardBtn"
 72 |                 ref="backwardBtn"
 73 |                 rounded
 74 |                 elevation="1"
 75 |                 color="primary"
 76 |                 :disabled="isSubmitting"
 77 |                 @click="backwardToEmail"
 78 |               >
 79 |                 上一步
 80 |               </v-btn>
 81 |               <v-spacer />
 82 |               <v-btn ref="nextStepBtn" rounded elevation="1" color="primary" @click="passwordCheck">
 83 |                 下一步
 84 |               </v-btn>
 85 |             </v-col>
 86 |           </v-form>
 87 |         </v-stepper-content>
 88 | 
 89 |         <v-stepper-content step="3">
 90 |           <v-form ref="personForm" class="person-form" elevation="0">
 91 |             <v-text-field
 92 |               ref="nickNameField"
 93 |               v-model="nickName"
 94 |               label="用户名"
 95 |               hint="1-16个字符, 大小写A-z, 下划线_, 数字0-9, 中文字符, 横杠-"
 96 |               class="reg-nick-name-field"
 97 |               :rules="nickNameRule"
 98 |               :error="nickNameErr"
 99 |               :error-count="nickNameErrCount"
100 |               :error-messages="nickNameErrMsg"
101 |               maxlength="16"
102 |             />
103 |             <v-select
104 |               ref="sexSelector"
105 |               v-model="sex"
106 |               :items="sexSelect"
107 |               label="性别"
108 |               persistent-hint
109 |               hint="我们会根据您提供的性别选项（如果提供）来为您提供个性化称呼。"
110 |             />
111 |             <v-select
112 |               ref="respectSelector"
113 |               v-model="respectChoice"
114 |               :items="respectSelect"
115 |               label="尊称模式"
116 |               item-value="respectId"
117 |               item-text="des"
118 |               persistent-hint
119 |               hint="我们可能根据您选择的尊称模式，在相关消息中对您使用尊敬称呼。"
120 |             />
121 |             <br>
122 |             <v-col style="display: flex; padding: 0;">
123 |               <v-btn
124 |                 id="backwardBtn"
125 |                 ref="backwardBtn"
126 |                 rounded
127 |                 elevation="1"
128 |                 color="primary"
129 |                 :disabled="isSubmitting"
130 |                 @click="e1 = 2"
131 |               >
132 |                 上一步
133 |               </v-btn>
134 |               <v-spacer />
135 |               <v-btn
136 |                 id="nextStepBtn"
137 |                 ref="nextStepBtn"
138 |                 rounded
139 |                 right
140 |                 elevation="1"
141 |                 color="primary"
142 |                 :disabled="isSubmitting"
143 |                 @click="e1 = 4; sendVerifyCode()"
144 |               >
145 |                 下一步
146 |               </v-btn>
147 |             </v-col>
148 |           </v-form>
149 |         </v-stepper-content>
150 | 
151 |         <v-stepper-content step="4">
152 |           <v-form ref="captchaForm" class="captcha-form" elevation="0">
153 |             <v-icon size="98" color="grey" class="register-email-send-success-icon">
154 |               mdi-email-check-outline
155 |             </v-icon>
156 |             <p style="text-align: center;">
157 |               我们已向您的邮箱发送验证码, 请检查收件箱。
158 |             </p>
159 |             <v-otp-input
160 |               v-model="verifyCode"
161 |               length="6"
162 |               type="number"
163 |               class="register-verify-code-otp-input"
164 |               :rules="verifyCodeRule"
165 |               :error="captchaErr"
166 |               :error-count="captchaErrCount"
167 |               :error-message="captchaErrMessage"
168 |             />
169 |             <div style="width: 100%; text-align: center;">
170 |               <v-btn
171 |                 class="register-verify-code-resend-btn"
172 |                 elevation="0"
173 |                 color="primary"
174 |                 :loading="isSendingVerifyCode"
175 |                 :disabled="!isResendBtnAvailable || isSendingVerifyCode"
176 |                 @click="sendVerifyCode"
177 |               >
178 |                 没有收到? 尝试重新发送 <span v-if="remainSecs > 0">({{ remainSecs }})</span>
179 |               </v-btn>
180 |             </div>
181 |             <v-col style="display: flex; padding: 0;">
182 |               <v-btn
183 |                 id="backwardBtn"
184 |                 ref="backwardBtn"
185 |                 rounded
186 |                 elevation="1"
187 |                 color="primary"
188 |                 :disabled="isSubmitting"
189 |                 @click="e1 = 3"
190 |               >
191 |                 上一步
192 |               </v-btn>
193 |               <v-spacer />
194 |               <v-btn
195 |                 id="submitBtn"
196 |                 ref="submitBtn"
197 |                 rounded
198 |                 right
199 |                 elevation="1"
200 |                 color="primary"
201 |                 :loading="isSubmitting"
202 |                 :disabled="isSubmitting"
203 |                 @click="submit"
204 |               >
205 |                 注&nbsp;&nbsp;册
206 |               </v-btn>
207 |             </v-col>
208 |           </v-form>
209 |         </v-stepper-content>
210 | 
211 |         <v-stepper-content step="5">
212 |           <v-form ref="succeedForm" class="succeed-form" elevation="0">
213 |             <v-icon size="120" color="grey darken-2">
214 |               mdi-check
215 |             </v-icon>
216 |             <p>注册成功</p>
217 |             <v-btn rounded block elevation="1" color="primary" to="/account/login">
218 |               返回登录
219 |             </v-btn>
220 |           </v-form>
221 |         </v-stepper-content>
222 |       </v-stepper-items>
223 |     </v-stepper>
224 |   </div>
225 | </template>
226 | 
227 | <script>
228 | import SessionUtils from '~/utils/SessionUtils.vue'
229 | import HttpUtils from '~/utils/HttpUtils.vue'
230 | export default {
231 |   name: 'LoginForm',
232 |   mixins: [SessionUtils, HttpUtils],
233 |   data: () => ({
234 |     e1: 1,
235 |     sexSelect: ['保密', '男', '女', '武装直升机', '其他'],
236 |     respectSelect: [
237 |       { des: '请用标准尊称称呼我', hint: '1', respectId: 1 },
238 |       { des: '请以朋友的态度称呼我', hint: '2', respectId: 2 },
239 |       { des: '请以最好的伙伴的态度称呼我', hint: '3', respectId: 3 }
240 |     ],
241 |     respectGroupSelect: ['溜溜梅'],
242 |     canRespectGroupSelected: false,
243 |     passwdShow: false,
244 |     mailData: '',
245 |     nickName: '',
246 |     originPassword: '',
247 |     mailErr: false,
248 |     passwordErr: false,
249 |     mailErrCount: 1,
250 |     pwdErrCount: 1,
251 |     mailErrMsg: '',
252 |     pwdErrMsg: '',
253 |     nickNameErr: false,
254 |     nickNameErrCount: 1,
255 |     nickNameErrMsg: '',
256 |     captchaErr: false,
257 |     captchaErrCount: 1,
258 |     captchaErrMessage: '',
259 |     isSubmitting: false,
260 |     isResendBtnAvailable: true,
261 |     remainSecs: -1,
262 |     isSendingVerifyCode: false,
263 |     sex: 1,
264 |     respectChoice: 1,
265 |     verifyCode: '',
266 |     mailRule: [
267 |       value => !!value || '不可以空着',
268 |       (value) => {
269 |         const emailPattern = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]/
270 |         if (emailPattern.test(value)) {
271 |           return true
272 |         } else {
273 |           return false || '这真的是邮箱嘛...'
274 |         }
275 |       }
276 |     ],
277 |     passwordRule: [
278 |       value => !!value || '你的账户安全至极'
279 |     ],
280 |     nickNameRule: [
281 |       value => !!value || '会被认不出的',
282 |       (value) => {
283 |         const nickNamePattern = /[A-Za-z0-9_\-\u4E00-\u9FA5]+/
284 |         if (nickNamePattern.test(value)) {
285 |           return true
286 |         } else {
287 |           return false || '仔细看看Hint哦 (1-16个字符, 大小写A-z, 下划线_, 数字0-9, 中文字符, 横杠-)'
288 |         }
289 |       }
290 |     ],
291 |     verifyCodeRule: [
292 |       value => !!value || '你的验证码去哪儿了'
293 |     ]
294 |   }),
295 |   methods: {
296 |     setPassword () {
297 |       if (this.$refs.infoForm.validate()) {
298 |         this.$emit('processStarted')
299 |         setTimeout(() => {
300 |           this.$data.e1 = 2
301 |         }, 500)
302 |       } else {
303 |         this.$refs.nextStepBtn.$el.style = 'background-color: #EE6363 !important; border-color: #EE6363 !important;'
304 |         setTimeout(() => {
305 |           this.$refs.nextStepBtn.$el.style = ''
306 |         }, 1500)
307 |         return false
308 |       }
309 |     },
310 |     backwardToEmail () {
311 |       this.$emit('processBackward')
312 |       setTimeout(() => {
313 |         this.$data.e1 = 1
314 |       }, 500)
315 |     },
316 |     passwordCheck () {
317 |       const validateResult = this.$refs.passwdForm.validate()
318 |       this.$refs.submitBtn.$el.style = ''
319 |       if (validateResult === true) {
320 |         this.$data.e1 = 3
321 |       } else {
322 |         this.$refs.submitBtn.$el.style = 'background-color: #EE6363 !important; border-color: #EE6363 !important;'
323 |         setTimeout(() => {
324 |           this.$refs.submitBtn.$el.style = ''
325 |         }, 1500)
326 |         return false
327 |       }
328 |     },
329 |     sendVerifyCode () {
330 |       const postObject = {}
331 |       postObject.type = 'email'
332 |       postObject.id = this.$data.mailData
333 |       postObject.activity = '注册'
334 |       this.$data.isSendingVerifyCode = true
335 |       this.sendPostToApi('/account/sendVerifyCode', postObject, this.verifyCodeSendCallBack, false)
336 |     },
337 |     verifyCodeSendCallBack (requestDataReturn) {
338 |       if (requestDataReturn.isError !== true) {
339 |         if (requestDataReturn.code === 1000) {
340 |           this.$parent.$parent.$parent.$emit('showSnackBar', 'success', '验证码发送成功', '3000', true)
341 |           this.$data.isSendingVerifyCode = false
342 |           this.verifyCodeResendCountDown()
343 |         } else {
344 |           this.$parent.$parent.$parent.$emit('showSnackBar', 'error', '未知错误, 请稍后重试', '5000', false)
345 |         }
346 |       } else if (requestDataReturn.code === 422 && requestDataReturn.data.code === 3014) {
347 |         this.$parent.$parent.$parent.$emit('showSnackBar', 'warning', '发送频率过快, 请稍后再试', '7000', false)
348 |       } else if (requestDataReturn.code === 500 || requestDataReturn.data.code === 3015) {
349 |         this.$parent.$parent.$parent.$emit('showSnackBar', 'error', '验证码发送失败, 远端服务器异常', '10000', false)
350 |       } else if (requestDataReturn.code === 400 && requestDataReturn.data.code === 3016) {
351 |         this.$parent.$parent.$parent.$emit('showSnackBar', 'error', '验证码类型错误, 请联系系统管理员', '8000', false)
352 |       } else if (requestDataReturn.code === 422 && requestDataReturn.data.code === 1003) {
353 |         this.$parent.$parent.$parent.$emit('showSnackBar', 'error', '参数错误, 请联系系统管理员', '5000', false)
354 |       } else {
355 |         this.$parent.$parent.$parent.$emit('showSnackBar', 'error', '未知错误, 请稍后重试', '5000', false)
356 |       }
357 |     },
358 |     verifyCodeResendCountDown () {
359 |       this.$data.isResendBtnAvailable = false
360 |       this.$data.remainSecs = 60
361 |       const resendBtnCoundDownInterval = setInterval(() => {
362 |         if (this.$data.remainSecs <= 0) {
363 |           this.$data.isResendBtnAvailable = true
364 |           clearInterval(resendBtnCoundDownInterval)
365 |         } else {
366 |           this.$data.remainSecs -= 1
367 |         }
368 |       }, 1000)
369 |     },
370 |     submit () {
371 |       const cryptoInstance = require('crypto')
372 |       this.isSubmitting = !this.isSubmitting
373 |       const mailData = this.$data.mailData
374 |       const nickName = this.$data.nickName
375 |       const originPassword = this.$data.originPassword
376 |       const saltPassword = originPassword + '81262035b6d4babbcfd8fe71892edced'
377 |       const sha512 = cryptoInstance.createHash('sha512')
378 |       const saltPasswordSHA512 = sha512.update(saltPassword).digest('hex')
379 |       const sex = this.$data.sexSelect.indexOf(this.$data.sex)
380 |       const respectId = this.$data.respectChoice
381 |       const verifyCode = this.$data.verifyCode
382 |       const dataObj = {}
383 |       dataObj.email = mailData
384 |       dataObj.password = saltPasswordSHA512
385 |       dataObj.username = nickName
386 |       dataObj.sex = sex
387 |       dataObj.respectId = respectId
388 |       dataObj.captcha = verifyCode
389 |       this.sendPostToApi('/account/register', dataObj, this.reqDataCallback, false)
390 |     },
391 |     reqDataCallback (requestDataReturn) {
392 |       if (requestDataReturn.code === 1000) {
393 |         setTimeout(() => {
394 |           this.$data.e1 = 5
395 |         }, 500)
396 |         this.$emit('submitSucceed')
397 |       } else if (requestDataReturn.data !== undefined && requestDataReturn.data.code !== undefined) {
398 |         if ((requestDataReturn.data.code === 1002 && requestDataReturn.code === 500) || requestDataReturn.code === 500) {
399 |           this.$parent.$parent.$parent.$emit('showSnackBar', 'error', '服务器内部错误, 请重试', '5000', true)
400 |           this.$data.mailErr = true
401 |           this.$data.passwordErr = true
402 |           this.$data.pwdErrMsg = '服务器内部错误, 请重试'
403 |           this.$data.pwdErrCount = 1
404 |           this.$data.isSubmitting = false
405 |           this.$refs.submitBtn.$el.style = 'background-color: #EE6363 !important; border-color: #EE6363 !important;'
406 |           setTimeout(() => {
407 |             this.$refs.submitBtn.$el.style = ''
408 |           }, 1500)
409 |         } else if (requestDataReturn.data.code === 3012 && requestDataReturn.code === 409) {
410 |           this.$parent.$parent.$parent.$emit('showSnackBar', 'error', '邮箱已被注册', '5000', true)
411 |           this.$data.mailErr = true
412 |           this.$data.mailErrMsg = '用户名或邮箱已被注册'
413 |           this.$data.mailErrCount = 1
414 |           this.$data.isSubmitting = false
415 |           this.$refs.submitBtn.$el.style = 'background-color: #EE6363 !important; border-color: #EE6363 !important;'
416 |           setTimeout(() => {
417 |             this.$refs.submitBtn.$el.style = ''
418 |           }, 1500)
419 |         } else if ((requestDataReturn.data.code === 1003 && requestDataReturn.code === 422) || requestDataReturn.code === 422) {
420 |           this.$parent.$parent.$parent.$emit('showSnackBar', 'error', '参数错误, 请联系系统管理员', '5000', true)
421 |           this.$data.isSubmitting = false
422 |           this.$refs.submitBtn.$el.style = 'background-color: #EE6363 !important; border-color: #EE6363 !important;'
423 |           setTimeout(() => {
424 |             this.$refs.submitBtn.$el.style = ''
425 |           }, 1500)
426 |         } else if (requestDataReturn.code === 403 && requestDataReturn.data.code === 3017) {
427 |           this.$parent.$parent.$parent.$emit('showSnackBar', 'error', '验证码错误', '5000', true)
428 |           this.$data.isSubmitting = false
429 |           this.$data.verifyCode = ''
430 |           this.$data.captchaErr = true
431 |           this.$refs.submitBtn.$el.style = 'background-color: #EE6363 !important; border-color: #EE6363 !important;'
432 |           setTimeout(() => {
433 |             this.$refs.submitBtn.$el.style = ''
434 |           }, 1500)
435 |         } else if (requestDataReturn.data.code !== undefined) {
436 |           this.$parent.$parent.$parent.$emit('showSnackBar', 'error', '未识别的错误, 请联系系统管理员', '5000', true)
437 |           this.$data.mailErr = true
438 |           this.$data.passwordErr = true
439 |           this.$data.pwdErrMsg = '未识别的错误'
440 |           this.$data.pwdErrCount = 1
441 |           this.$data.isSubmitting = false
442 |           this.$refs.submitBtn.$el.style = 'background-color: #EE6363 !important; border-color: #EE6363 !important;'
443 |           setTimeout(() => {
444 |             this.$refs.submitBtn.$el.style = ''
445 |           }, 1500)
446 |         } else {
447 |           this.$parent.$parent.$parent.$emit('showSnackBar', 'error', '发生未知错误, 请重试', '5000', true)
448 |           this.$data.mailErr = true
449 |           this.$data.passwordErr = true
450 |           this.$data.pwdErrMsg = '发生未知错误, 请重试'
451 |           this.$data.pwdErrCount = 1
452 |           this.$data.isSubmitting = false
453 |           this.$refs.submitBtn.$el.style = 'background-color: #EE6363 !important; border-color: #EE6363 !important;'
454 |           setTimeout(() => {
455 |             this.$refs.submitBtn.$el.style = ''
456 |           }, 1500)
457 |         }
458 |       } else if (requestDataReturn.code === -1) {
459 |         this.$parent.$parent.$parent.$emit('showSnackBar', 'error', '网络错误, 请重试', '5000', true)
460 |         this.$data.mailErr = true
461 |         this.$data.passwordErr = true
462 |         this.$data.pwdErrMsg = '网络错误, 请重试'
463 |         this.$data.pwdErrCount = 1
464 |         this.$data.isSubmitting = false
465 |         this.$refs.submitBtn.$el.style = 'background-color: #EE6363 !important; border-color: #EE6363 !important;'
466 |         setTimeout(() => {
467 |           this.$refs.submitBtn.$el.style = ''
468 |         }, 1500)
469 |       } else {
470 |         this.$parent.$parent.$parent.$emit('showSnackBar', 'error', '发生未知错误, 请重试', '5000', true)
471 |         this.$data.mailErr = true
472 |         this.$data.passwordErr = true
473 |         this.$data.pwdErrMsg = '发生未知错误, 请重试'
474 |         this.$data.pwdErrCount = 1
475 |         this.$data.isSubmitting = false
476 |         this.$refs.submitBtn.$el.style = 'background-color: #EE6363 !important; border-color: #EE6363 !important;'
477 |         setTimeout(() => {
478 |           this.$refs.submitBtn.$el.style = ''
479 |         }, 1500)
480 |       }
481 |     }
482 |   }
483 | }
484 | </script>
485 | 
486 | <style>
487 | .v-form {
488 |   margin: 5px auto;
489 |   max-width: 35%;
490 |   min-width: 300px;
491 | }
492 | 
493 | .v-btn {
494 |   margin: 0;
495 |   transition: all 0.5s;
496 | }
497 | 
498 | .v-input {
499 |   margin-top: 5px;
500 | }
501 | 
502 | .succeed-form {
503 |   text-align: center;
504 | }
505 | 
506 | .succeed-form p {
507 |   font-size: 22px;
508 |   opacity: .5;
509 | }
510 | 
511 | .reg-stepper-header {
512 |   margin: 10px auto;
513 |   max-width: 50%;
514 | }
515 | 
516 | .reg-nick-name-field {
517 |   margin-top: 15px;
518 | }
519 | 
520 | .register-verify-code-otp-input .v-input .v-input__control .v-input__slot {
521 |   min-height: 80px;
522 |   font-size: 30px;
523 | }
524 | 
525 | .register-verify-code-resend-btn {
526 |   margin-top: 10px;
527 |   margin-bottom: 40px;
528 | }
529 | 
530 | .register-email-send-success-icon {
531 |   text-align: center;
532 |   min-width: 100%;
533 |   margin-bottom: 10px;
534 | }
535 | </style>
536 | 


--------------------------------------------------------------------------------
/components/container/create/InstanceInfo.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div />
3 | </template>
4 | <script>
5 | export default {
6 |   name: 'ContainerCreateInstanceInfo'
7 | }
8 | </script>
9 | 


--------------------------------------------------------------------------------
/components/container/create/InstanceOptions.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <v-form class="instance-options-main-form">
  4 |       <div>
  5 |         <p>实例名称</p>
  6 |         <!-- 下面这个Label是氧化叫我这么写的 -->
  7 |         <v-text-field
  8 |           v-model="instanceName"
  9 |           label="为你的实例谱写新的篇章"
 10 |           outlined
 11 |           clearable
 12 |           :rules="formElementErrorStats.validationRules.instanceNameRule"
 13 |           :error="formElementErrorStats.isError.instanceName"
 14 |           :error-count="formElementErrorStats.errorCount.instanceName"
 15 |           :error-messages="formElementErrorStats.errorMessage.instanceName"
 16 |           hint="实例显示名称, 4-24个字符, 允许中英文、横杠、数字与下划线"
 17 |           maxlength="24"
 18 |           class="instance-options-input"
 19 |         />
 20 |       </div>
 21 |       <div>
 22 |         <div style="display: flex;">
 23 |           <p>可用区</p>
 24 |           <v-scroll-x-transition>
 25 |             <div v-if="formElementErrorStats.isError.serverRegion" style="color: rgb(255, 82, 82);">
 26 |               <v-icon>mdi-alert-octagon-outline</v-icon>
 27 |               <span>{{ formElementErrorStats.errorMessage.serverRegion }}</span>
 28 |             </div>
 29 |           </v-scroll-x-transition>
 30 |         </div>
 31 |         <v-btn-toggle
 32 |           v-model="selectedInfo.selectedCountry"
 33 |           color="rgba(0, 163, 252)"
 34 |           mandatory
 35 |         >
 36 |           <v-btn
 37 |             v-for="country in availableCountry"
 38 |             :key="availableCountry.indexOf(country)"
 39 |             outlined
 40 |             @click="getRegionBuyInfo(true)"
 41 |           >
 42 |             {{ country }}
 43 |           </v-btn>
 44 |         </v-btn-toggle>
 45 |         <v-btn-toggle
 46 |           v-model="selectedInfo.selectedRegion"
 47 |           color="rgba(0, 163, 252)"
 48 |           mandatory
 49 |         >
 50 |           <v-btn
 51 |             v-for="region in availableRegion[selectedInfo.selectedCountry]"
 52 |             :key="availableRegion[selectedInfo.selectedCountry].indexOf(region)"
 53 |             outlined
 54 |             @click="getRegionBuyInfo(true)"
 55 |           >
 56 |             {{ region }}
 57 |           </v-btn>
 58 |         </v-btn-toggle>
 59 |         <v-btn-toggle
 60 |           v-model="selectedInfo.selectedSubRegion"
 61 |           color="rgba(0, 163, 252)"
 62 |           mandatory
 63 |         >
 64 |           <v-btn
 65 |             v-for="subRegion in availableSubRegion[selectedInfo.selectedCountry][selectedInfo.selectedRegion]"
 66 |             :key="subRegion.id"
 67 |             :disabled="!subRegion.isAvailable"
 68 |             outlined
 69 |             @click="getRegionBuyInfo(false)"
 70 |           >
 71 |             {{ subRegion.name }}
 72 |             <!-- 这个惠氧化要求要加(确信 -->
 73 |             <v-avatar v-if="subRegion.showLable" size="16" color="rgba(231, 64, 50, .8)" class="instance-options-subregion-lable" width="auto">
 74 |               {{ subRegion.lableContent }}
 75 |             </v-avatar>
 76 |           </v-btn>
 77 |         </v-btn-toggle>
 78 |       </div>
 79 |       <div class="instance-options-container-type-div">
 80 |         <p>容器类型</p>
 81 |         <v-btn-toggle
 82 |           v-model="selectedInfo.selectedContainerType"
 83 |           color="rgba(0, 163, 252)"
 84 |           mandatory
 85 |         >
 86 |           <v-btn
 87 |             v-for="containerDetail in containerType"
 88 |             :key="containerDetail.id"
 89 |             :disabled="!containerDetail.isAvailable"
 90 |             outlined
 91 |             @click="getContainerInfo(false)"
 92 |           >
 93 |             {{ containerDetail.name }}
 94 |           </v-btn>
 95 |         </v-btn-toggle>
 96 |       </div>
 97 |       <div>
 98 |         <p class="instance-options-main-form-slider-p">
 99 |           计算点数
100 |           <v-tooltip
101 |             right
102 |           >
103 |             <template #activator="{ on, attrs }">
104 |               <v-btn
105 |                 rounded
106 |                 icon
107 |                 style="margin-left: 5px;"
108 |                 v-bind="attrs"
109 |                 to="/redirect?url=blog.yang1120.com/archives/128"
110 |                 v-on="on"
111 |               >
112 |                 <v-icon size="20">
113 |                   mdi-help-circle-outline
114 |                 </v-icon>
115 |               </v-btn>
116 |             </template>
117 |             <span>计算点数的数值越大，意味着单位时间内，您的实例可分配的 vCPU 计算能力越强。更多信息可点击按钮查看</span>
118 |           </v-tooltip>
119 |         </p>
120 |         <div class="instance-options-slider-div">
121 |           <p>{{ subRegionInfo.calcPointAvailableSection[0] + ' 分' }}</p>
122 |           <v-slider
123 |             v-model="selectedInfo.selectedCalcPoint"
124 |             color="rgba(0, 163, 255)"
125 |             step="1"
126 |             thumb-label
127 |             ticks
128 |             :min="subRegionInfo.calcPointAvailableSection[0]"
129 |             :max="subRegionInfo.calcPointAvailableSection[1]"
130 |             class="instance-options-input instance-options-input-message-hidden"
131 |           />
132 |           <p>{{ subRegionInfo.calcPointAvailableSection[1] + ' 分' }}</p>
133 |         </div>
134 |       </div>
135 |       <div>
136 |         <p class="instance-options-main-form-slider-p">
137 |           运行内存
138 |           <v-tooltip
139 |             right
140 |           >
141 |             <template #activator="{ on, attrs }">
142 |               <v-btn
143 |                 rounded
144 |                 icon
145 |                 style="margin-left: 5px;"
146 |                 v-bind="attrs"
147 |                 to="/redirect?url=u5k.cn/8ynck"
148 |                 v-on="on"
149 |               >
150 |                 <v-icon size="20">
151 |                   mdi-help-circle-outline
152 |                 </v-icon>
153 |               </v-btn>
154 |             </template>
155 |             <span>运行内存是您的实例在运行过程中可被分配的最高RAM。有关RAM相关定义, 可点击按钮查看</span>
156 |           </v-tooltip>
157 |         </p>
158 |         <div class="instance-options-slider-div">
159 |           <p>{{ subRegionInfo.ramAvailableSection[0] + ' GB' }}</p>
160 |           <v-slider
161 |             v-model="selectedInfo.selectedRAM"
162 |             color="rgba(0, 163, 255)"
163 |             step="0.1"
164 |             thumb-label
165 |             ticks
166 |             :min="subRegionInfo.ramAvailableSection[0]"
167 |             :max="subRegionInfo.ramAvailableSection[1]"
168 |             class="instance-options-input instance-options-input-message-hidden"
169 |           />
170 |           <p>{{ subRegionInfo.ramAvailableSection[1] + ' GB' }}</p>
171 |         </div>
172 |       </div>
173 |       <div>
174 |         <p class="instance-options-main-form-slider-p">
175 |           存储空间
176 |           <v-tooltip
177 |             right
178 |           >
179 |             <template #activator="{ on, attrs }">
180 |               <v-btn
181 |                 rounded
182 |                 icon
183 |                 style="margin-left: 5px;"
184 |                 v-bind="attrs"
185 |                 v-on="on"
186 |               >
187 |                 <v-icon size="20">
188 |                   mdi-help-circle-outline
189 |                 </v-icon>
190 |               </v-btn>
191 |             </template>
192 |             <span>存储空间是您的实例中可供您存放文件的空间大小</span>
193 |           </v-tooltip>
194 |         </p>
195 |         <div class="instance-options-slider-div">
196 |           <p>{{ subRegionInfo.diskAvailableSection[0] + ' GB' }}</p>
197 |           <v-slider
198 |             v-model="selectedInfo.selectedDiskSize"
199 |             color="rgba(0, 163, 255)"
200 |             step="1"
201 |             thumb-label
202 |             ticks
203 |             :min="subRegionInfo.diskAvailableSection[0]"
204 |             :max="subRegionInfo.diskAvailableSection[1]"
205 |             class="instance-options-input instance-options-input-message-hidden"
206 |           />
207 |           <p>{{ subRegionInfo.diskAvailableSection[1] + ' GB' }}</p>
208 |         </div>
209 |       </div>
210 |       <div>
211 |         <p class="instance-options-main-selecters-p">
212 |           目标端口
213 |           <v-tooltip
214 |             right
215 |           >
216 |             <template #activator="{ on, attrs }">
217 |               <v-btn
218 |                 rounded
219 |                 icon
220 |                 style="margin-left: 5px;"
221 |                 v-bind="attrs"
222 |                 to="/redirect?url=faq.runyun.cc/container/port-settings"
223 |                 v-on="on"
224 |               >
225 |                 <v-icon size="20">
226 |                   mdi-help-circle-outline
227 |                 </v-icon>
228 |               </v-btn>
229 |             </template>
230 |             <span>目标端口是用于启动与访问您在实例上的网络服务的端口。在购买后可再次修改, 有关更多信息可点击按钮查看</span>
231 |           </v-tooltip>
232 |         </p>
233 |         <div class="instance-options-selecters-div">
234 |           <v-select
235 |             v-model="selectedInfo.selectedPort"
236 |             :items="subRegionInfo.portAvailableValue"
237 |             label="选择端口"
238 |             :error="formElementErrorStats.isError.targetPort"
239 |             :error-count="formElementErrorStats.errorCount.targetPort"
240 |             :error-messages="formElementErrorStats.errorMessage.targetPort"
241 |             :class="formElementErrorStats.isError.targetPort ? '' : 'instance-options-selecters-message-hidden'"
242 |             outlined
243 |           />
244 |         </div>
245 |       </div>
246 |       <v-slide-x-transition>
247 |         <div v-if="containerType[selectedInfo.selectedContainerType].withJava">
248 |           <p class="instance-options-main-selecters-p">
249 |             Java 版本
250 |           </p>
251 |           <div class="instance-options-selecters-div">
252 |             <v-select
253 |               v-model="selectedInfo.selectedJavaVersion"
254 |               :items="subRegionInfo.javaVersions"
255 |               label="选择Java版本"
256 |               :error="formElementErrorStats.isError.javaVersion"
257 |               :error-count="formElementErrorStats.errorCount.javaVersion"
258 |               :error-messages="formElementErrorStats.errorMessage.javaVersion"
259 |               :class="formElementErrorStats.isError.javaVersion ? '' : 'instance-options-selecters-message-hidden'"
260 |               outlined
261 |             />
262 |           </div>
263 |         </div>
264 |       </v-slide-x-transition>
265 |     </v-form>
266 |   </div>
267 | </template>
268 | <script>
269 | import { watch } from 'vue'
270 | import HttpUtils from '~/utils/HttpUtils.vue'
271 | export default {
272 |   name: 'ContainerCreateInstanceOptions',
273 |   mixins: [HttpUtils],
274 |   data: () => ({
275 |     availableCountry: ['中国', '提瓦特'],
276 |     availableRegion: [
277 |       ['武汉', '上海', '杭州'],
278 |       ['蒙德', '璃月', '须弥']
279 |     ],
280 |     availableSubRegion: [
281 |       [
282 |         [
283 |           {
284 |             id: 1,
285 |             name: '武汉一区',
286 |             isAvailable: true,
287 |             showLable: true,
288 |             lableContent: '惠'
289 |           }
290 |         ],
291 |         [
292 |           {
293 |             id: 1,
294 |             name: '上海一区',
295 |             isAvailable: true,
296 |             showLable: false,
297 |             lableContent: null
298 |           },
299 |           {
300 |             id: 2,
301 |             name: '上海二区',
302 |             isAvailable: true,
303 |             showLable: false,
304 |             lableContent: null
305 |           },
306 |           {
307 |             id: 3,
308 |             name: '上海三区',
309 |             isAvailable: true,
310 |             showLable: false,
311 |             lableContent: null
312 |           }
313 |         ],
314 |         [
315 |           {
316 |             id: 1,
317 |             name: '杭州一区',
318 |             isAvailable: true,
319 |             showLable: false,
320 |             lableContent: null
321 |           },
322 |           {
323 |             id: 2,
324 |             name: '杭州二区',
325 |             isAvailable: true,
326 |             showLable: false,
327 |             lableContent: null
328 |           }
329 |         ]
330 |       ],
331 |       [
332 |         [
333 |           {
334 |             id: 1,
335 |             name: '西风骑士团二楼',
336 |             isAvailable: true,
337 |             showLable: true,
338 |             lableContent: '可莉轰炸'
339 |           },
340 |           {
341 |             id: 2,
342 |             name: '无相之风边上',
343 |             isAvailable: true,
344 |             showLable: true,
345 |             lableContent: '超强散热'
346 |           },
347 |           {
348 |             id: 3,
349 |             name: '特瓦林背上',
350 |             isAvailable: true,
351 |             showLable: true,
352 |             lableContent: '漂移IP'
353 |           },
354 |           {
355 |             id: 4,
356 |             name: '风神像顶',
357 |             isAvailable: true,
358 |             showLable: true,
359 |             lableContent: '风神眷顾'
360 |           }
361 |         ],
362 |         [
363 |           {
364 |             id: 1,
365 |             name: '北国银行',
366 |             isAvailable: false,
367 |             showLable: true,
368 |             lableContent: '可以偷钱'
369 |           }
370 |         ],
371 |         [
372 |           {
373 |             id: 1,
374 |             name: '化城郭虚空子节点',
375 |             isAvailable: true,
376 |             showLable: false,
377 |             lableContent: null
378 |           },
379 |           {
380 |             id: 2,
381 |             name: '奥摩斯港虚空子节点',
382 |             isAvailable: false,
383 |             showLable: false,
384 |             lableContent: null
385 |           },
386 |           {
387 |             id: 3,
388 |             name: '教令院虚空主节点',
389 |             isAvailable: true,
390 |             showLable: true,
391 |             lableContent: '可以黑掉教令院'
392 |           }
393 |         ]
394 |       ]
395 |     ],
396 |     subRegionInfo: {
397 |       calcPointAvailableSection: [40, 100],
398 |       ramAvailableSection: [1, 4],
399 |       portAvailableValue: [25565, 25567, 25583, 25590],
400 |       diskAvailableSection: [20, 40],
401 |       price: {
402 |         perCalcPoint: 0.1,
403 |         perGigaByteRAM: 5,
404 |         perGigaByteROM: 1
405 |       },
406 |       javaVersions: ['JRE 8.0', 'JDK 16.0', 'JDK 17.0']
407 |     },
408 |     selectedInfo: {
409 |       selectedCountry: 0,
410 |       selectedRegion: 0,
411 |       selectedSubRegion: 0,
412 |       selectedCalcPoint: 40,
413 |       selectedRAM: 1.0,
414 |       selectedDiskSize: 20,
415 |       selectedPort: null,
416 |       selectedContainerType: 0,
417 |       selectedJavaVersion: null
418 |     },
419 |     instanceName: '',
420 |     containerType: [
421 |       {
422 |         id: 1,
423 |         name: 'MCSM面板服',
424 |         iconSrc: '~/static/container/icons/mcsm.png',
425 |         isAvailable: true,
426 |         withJava: true
427 |       },
428 |       {
429 |         id: 2,
430 |         name: 'Pterodactyl面板服',
431 |         iconSrc: '~/static/container/icons/ptero.png',
432 |         isAvailable: false,
433 |         withJava: true
434 |       },
435 |       {
436 |         id: 3,
437 |         name: 'Docker',
438 |         iconSrc: '~/static/container/icons/docker.png',
439 |         isAvailable: true,
440 |         withJava: false
441 |       }
442 |     ],
443 |     currentCost: 0.00,
444 |     formElementErrorStats: {
445 |       isError: {
446 |         instanceName: false,
447 |         serverRegion: false,
448 |         targetPort: false,
449 |         javaVersion: false
450 |       },
451 |       errorCount: {
452 |         instanceName: 1,
453 |         serverRegion: null,
454 |         targetPort: 1,
455 |         javaVersion: 1
456 |       },
457 |       errorMessage: {
458 |         instanceName: '',
459 |         serverRegion: '',
460 |         targetPort: '',
461 |         javaVersion: ''
462 |       },
463 |       validationRules: {
464 |         instanceNameRule: [
465 |           value => !!value || '世界, 遗忘我',
466 |           (value) => {
467 |             const instanceNamePattern = /\w([-A-Za-z0-9_][-A-Za-z0-9_][-A-Za-z0-9_][-A-Za-z0-9_]*)/
468 |             if (instanceNamePattern.test(value)) {
469 |               return true
470 |             } else {
471 |               return false || '需求4-24个字符, 仅允许中英文、横杠、数字与下划线'
472 |             }
473 |           }
474 |         ]
475 |       }
476 |     }
477 |   }),
478 |   mounted () {
479 |     this.getGlobalRegionInfo()
480 |     this.getRegionBuyInfo()
481 |     this.calcCurrentCost(this.$data.selectedInfo)
482 |     // this.$emit('updateCost', this.$data.currentCost)
483 |     watch(this.$data.selectedInfo, (nowSelectObj) => {
484 |       this.calcCurrentCost(nowSelectObj)
485 |       this.$emit('updateOptions', nowSelectObj)
486 |     })
487 |   },
488 |   methods: {
489 |     getGlobalRegionInfo () {
490 |       // To Be Done
491 |     },
492 |     getRegionBuyInfo (operation) {
493 |       if (operation === true) {
494 |         this.$data.selectedInfo.selectedSubRegion = 0
495 |       }
496 |       const currentSelectedRegionObject = this.availableSubRegion[this.$data.selectedInfo.selectedCountry][this.$data.selectedInfo.selectedRegion][this.$data.selectedInfo.selectedSubRegion]
497 |       if (currentSelectedRegionObject.name !== -1 && !(currentSelectedRegionObject.isAvailable === false)) {
498 |         // this.sendGetToApi('/contained/create/getSubRegionBuyInfo', 'regionname=' + currentSelectedRegionObject.name, this.showTargetRegionInfo)
499 |       }
500 |     },
501 |     showTargetRegionInfo () {
502 |       // To Be Done
503 |     },
504 |     getContainerInfo () {
505 |       // To Be Done
506 |     },
507 |     calcCurrentCost (newSelectObject) {
508 |       this.$data.currentCost = newSelectObject.selectedCalcPoint * this.$data.subRegionInfo.price.perCalcPoint + newSelectObject.selectedRAM * this.$data.subRegionInfo.price.perGigaByteRAM + newSelectObject.selectedDiskSize + this.$data.subRegionInfo.price.perGigaByteROM
509 |       this.$emit('updateCost', this.$data.currentCost)
510 |     },
511 |     validateForm () {
512 |       // To Be Done
513 |     }
514 |   }
515 | }
516 | </script>
517 | <style>
518 | .instance-options-main-form {
519 |   margin-left: 0;
520 |   max-width: 80%;
521 | }
522 | 
523 | .instance-options-main-form-slider-p {
524 |   margin-top: 25px;
525 |   margin-bottom: 5px !important;
526 | }
527 | 
528 | .instance-options-main-selecters-p {
529 |   margin-top: 25px;
530 |   margin-bottom: 5px !important;
531 | }
532 | 
533 | .instance-options-input {
534 |   max-width: 40%;
535 |   margin: 5px 0;
536 | }
537 | 
538 | .v-btn-toggle {
539 |   margin-bottom: 10px;
540 |   display: block;
541 | }
542 | 
543 | .instance-options-slider-div {
544 |   display: flex;
545 | }
546 | 
547 | .instance-options-selecters-message-hidden .v-input__control .v-text-field__details {
548 |   display: none !important;
549 | }
550 | 
551 | .instance-options-slider-div p {
552 |   margin-top: auto;
553 |   margin-bottom: auto;
554 |   margin-right: 5px;
555 |   margin-left: 5px;
556 |   opacity: .5;
557 | }
558 | 
559 | .instance-options-selecters-div {
560 |   max-width: 40%;
561 | }
562 | 
563 | .instance-options-input-message-hidden .v-input__control .v-input__slot {
564 |   margin-bottom: 0;
565 | }
566 | 
567 | .instance-options-input-message-hidden .v-input__control .v-messages {
568 |   display: none;
569 | }
570 | 
571 | .instance-options-subregion-lable {
572 |   position: absolute;
573 |   right: -30%;
574 |   top: -100%;
575 |   color: white;
576 |   font-size: 12px;
577 |   border-radius: 8px;
578 | }
579 | 
580 | .instance-options-container-type-div {
581 |   margin-top: 25px;
582 | }
583 | </style>
584 | 


--------------------------------------------------------------------------------
/components/container/create/OptionsConfirm.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div />
3 | </template>
4 | <script>
5 | export default {
6 |   name: 'ContainerCreateInstanceOptionsConfirm'
7 | }
8 | </script>
9 | 


--------------------------------------------------------------------------------
/components/table/TableFund.vue:
--------------------------------------------------------------------------------
 1 | <!-- 工作台概览 余额卡片 -->
 2 | <template>
 3 |   <div>
 4 |     <!-- 卡片是好文明 -->
 5 |     <v-card
 6 |       max-height="600px"
 7 |     >
 8 |       <v-card-title>
 9 |         爷的余额
10 |       </v-card-title>
11 |       <v-card-text>
12 |         <p class="display-1 text--primary">
13 |           {{ TableFundCurrent }}
14 |           元
15 |         </p>
16 |       </v-card-text>
17 |       <v-alert
18 |         v-if="TableFundCurrent < 0"
19 |         dense
20 |         type="error"
21 |         icon="mdi-alert-octagon-outline"
22 |         class="v-alert-arrearage"
23 |         style="background-color: rgba(255, 127, 127) !important;"
24 |       >
25 |         你的账户发生欠费, 请尽快补齐款项, 否则你的账户及名下资产将在 <strong>{{ deletionRemainDays }} 日后被删除</strong>
26 |       </v-alert>
27 |       <v-card-actions style="padding-bottom: 20px;">
28 |         <v-btn to="/addfunds/vme50" color="primary">
29 |           <v-icon>mdi-cash</v-icon>
30 |           氪金
31 |         </v-btn>
32 |         <v-btn to="/billing/history">
33 |           账单
34 |         </v-btn>
35 |       </v-card-actions>
36 |     </v-card>
37 |   </div>
38 | </template>
39 | 
40 | <script>
41 | export default {
42 |   data: () => ({
43 |     TableFundCurrent: -86837,
44 |     deletionRemainDays: 3
45 |   })
46 | }
47 | </script>
48 | <style>
49 | .v-alert-arrearage {
50 |   font-size: 7px;
51 |   margin: 0 4px;
52 | }
53 | </style>
54 | 


--------------------------------------------------------------------------------
/components/table/TableProducts.vue:
--------------------------------------------------------------------------------
 1 | <!-- 工作台概览 产品卡片 -->
 2 | <template>
 3 |   <div>
 4 |     <v-card
 5 |       height="600px"
 6 |       class="pa-4"
 7 |     >
 8 |       <v-card-title>
 9 |         产品导航
10 |       </v-card-title>
11 |       <v-card-text>
12 |         <TableProductsAll />
13 |       </v-card-text>
14 |       <v-card-text>
15 |         <TableProductsRetention />
16 |       </v-card-text>
17 |     </v-card>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | export default {
23 |   data: () => ({
24 |     tableFundCurrent: 0
25 |   })
26 | }
27 | </script>
28 | 


--------------------------------------------------------------------------------
/components/table/TableProductsAll.vue:
--------------------------------------------------------------------------------
 1 | <!-- 工作台概览 热门产品卡片 -->
 2 | <template>
 3 |   <div>
 4 |     <!-- 公告行 开始 -->
 5 |     <v-row>
 6 |       <v-col>
 7 |         <v-alert icon="mdi-bullhorn-outline" :type="announcementLevel">
 8 |           公告: {{ announcement }}
 9 |         </v-alert>
10 |       </v-col>
11 |     </v-row>
12 |     <!-- 公告行 结束 -->
13 |     <!-- 产品标题 开始 -->
14 |     <div
15 |       class="text-h6"
16 |     >
17 |       热门产品
18 |     </div>
19 |     <!-- 产品标题 结束 -->
20 |     <!-- 产品行 开始 -->
21 |     <v-row>
22 |       <div v-for="products in recommendProductsInfo.products" :key="products.key" class="products-div">
23 |         <v-col>
24 |           <v-btn class="productbtn" :to="products.link">
25 |             {{ products.productName }}
26 |           </v-btn>
27 |         </v-col>
28 |       </div>
29 |     </v-row>
30 |     <!-- 产品行 结束 -->
31 |   </div>
32 | </template>
33 | 
34 | <script>
35 | export default {
36 |   data: () => ({
37 |     tableFundCurrent: 0,
38 |     announcement: '近日行云因遭大流量攻击, 产品运行可能不稳定。',
39 |     announcementLevel: 'warning',
40 |     recommendProductsInfo: {
41 |       products: [
42 |         {
43 |           key: 1,
44 |           productName: '甜甜花酿鸡',
45 |           link: '/kfc/crazy/thurday/vme50'
46 |         },
47 |         {
48 |           key: 2,
49 |           productName: '容器云',
50 |           link: '/container'
51 |         },
52 |         {
53 |           key: 3,
54 |           productName: '轻量应用服务器',
55 |           link: '/lws'
56 |         },
57 |         {
58 |           key: 4,
59 |           productName: '云服务器',
60 |           link: '/ics'
61 |         },
62 |         {
63 |           key: 5,
64 |           productName: '提瓦特桌面',
65 |           link: '/tcd'
66 |         },
67 |         {
68 |           key: 6,
69 |           productName: '虚拟主机',
70 |           link: '/ivh'
71 |         },
72 |         {
73 |           key: 7,
74 |           productName: '蒙德土豆饼',
75 |           link: '/mondstadt/potato/pie'
76 |         }
77 |       ]
78 |     }
79 |   })
80 | }
81 | </script>
82 | 
83 | <style>
84 | .productbtn {
85 |   width: 140px;
86 | }
87 | 
88 | .text-h6 {
89 |   margin-bottom: 15px;
90 | }
91 | 
92 | .col {
93 |   padding-right: 2px;
94 | }
95 | </style>
96 | 


--------------------------------------------------------------------------------
/components/table/TableProductsRetention.vue:
--------------------------------------------------------------------------------
  1 | <!-- 工作台概览 保有产品卡片 -->
  2 | <template>
  3 |   <div>
  4 |     <!-- 产品标题 开始 -->
  5 |     <div
  6 |       class="text-h6"
  7 |     >
  8 |       保有产品
  9 |     </div>
 10 |     <!-- 产品标题 结束 -->
 11 |     <!-- 产品行 开始 -->
 12 |     <v-row>
 13 |       <div v-for="products in productsInfo.products" :key="products.key" class="products-div">
 14 |         <v-col v-if="products.retention">
 15 |           <v-btn class="productbtn" :to="products.link">
 16 |             {{ products.productName }} ({{ products.retentionCount }})
 17 |           </v-btn>
 18 |         </v-col>
 19 |       </div>
 20 |     </v-row>
 21 |     <!-- 产品行 结束 -->
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 | export default {
 27 |   data: () => ({
 28 |     tableFundCurrent: 0,
 29 |     announcement: '近日行云因遭大流量攻击, 产品运行可能不稳定。',
 30 |     announcementLevel: 'warning',
 31 |     productsInfo: {
 32 |       products: [
 33 |         {
 34 |           key: 1,
 35 |           productName: '云服务器',
 36 |           retention: true,
 37 |           retentionCount: 2,
 38 |           link: '/ics'
 39 |         },
 40 |         {
 41 |           key: 2,
 42 |           productName: 'MCSM面板服',
 43 |           retention: false,
 44 |           retentionCount: -1,
 45 |           link: '/container'
 46 |         },
 47 |         {
 48 |           key: 3,
 49 |           productName: '轻量应用服务器',
 50 |           retention: false,
 51 |           retentionCount: -1,
 52 |           link: '/lws'
 53 |         },
 54 |         {
 55 |           key: 4,
 56 |           productName: '虚拟主机',
 57 |           retention: true,
 58 |           retentionCount: 1,
 59 |           link: '/ivh'
 60 |         },
 61 |         {
 62 |           key: 5,
 63 |           productName: '提瓦特桌面',
 64 |           retention: true,
 65 |           retentionCount: 2,
 66 |           link: '/tcd'
 67 |         },
 68 |         {
 69 |           key: 6,
 70 |           productName: '甜甜花酿鸡',
 71 |           retention: true,
 72 |           retentionCount: 128,
 73 |           link: '/kfc/crazy/thursday/vme50'
 74 |         },
 75 |         {
 76 |           key: 7,
 77 |           productName: '蒙德土豆饼',
 78 |           retention: true,
 79 |           retentionCount: 4,
 80 |           link: '/mondstadt/potato/pie'
 81 |         },
 82 |         {
 83 |           key: 8,
 84 |           productName: '脆弱树脂',
 85 |           retention: true,
 86 |           retentionCount: 1,
 87 |           link: '/danfan/you/20/shuzhi'
 88 |         },
 89 |         {
 90 |           key: 9,
 91 |           productName: '内容分发网络',
 92 |           retention: true,
 93 |           retentionCount: 114,
 94 |           link: '/cdn'
 95 |         }
 96 |       ]
 97 |     }
 98 |   })
 99 | }
100 | </script>
101 | 
102 | <style>
103 | .productbtn {
104 |   width: 140px;
105 | }
106 | 
107 | .text-h6 {
108 |   margin-bottom: 15px;
109 | }
110 | 
111 | .col {
112 |   padding-right: 2px;
113 | }
114 | </style>
115 | 


--------------------------------------------------------------------------------
/components/table/TableTabs.vue:
--------------------------------------------------------------------------------
 1 | <!-- 工作台导航 -->
 2 | <template>
 3 |   <div>
 4 |     <v-toolbar elevation="0">
 5 |       <v-tabs>
 6 |         <!-- 概览导航头部 开始 -->
 7 |         <v-tab
 8 |           to="/table"
 9 |         >
10 |           <v-icon>mdi-home</v-icon>
11 |           概览
12 |         </v-tab>
13 |         <v-tab
14 |           to="/table/safecenter"
15 |         >
16 |           <v-icon>mdi-safe</v-icon>
17 |           安全中心
18 |         </v-tab>
19 |         <v-tab
20 |           disabled
21 |           to=""
22 |         >
23 |           <v-icon>mdi-monitor-dashboard</v-icon>
24 |           运维事件
25 |         </v-tab>
26 |       </v-tabs>
27 |     </v-toolbar>
28 |     <!-- 概览导航头部 结束 -->
29 |   </div>
30 | </template>
31 | 
32 | <script>
33 | export default {}
34 | </script>
35 | 


--------------------------------------------------------------------------------
/components/table/TableTodo.vue:
--------------------------------------------------------------------------------
 1 | <!-- 工作台概览 代办卡片 -->
 2 | <template>
 3 |   <div>
 4 |     <v-card
 5 |       max-height="600px"
 6 |     >
 7 |       <v-card-title>
 8 |         待办事项
 9 |       </v-card-title>
10 |       <v-card-text>
11 |         <v-row>
12 |           <v-col v-if="!(TicketsToSolve == 0)">
13 |             <v-btn text>
14 |               <v-icon size="20">
15 |                 mdi-bell-alert-outline
16 |               </v-icon>&nbsp;
17 |               待办工单({{ TicketsToSolve }})
18 |             </v-btn>
19 |           </v-col>
20 |           <v-col v-if="!(ProductsToRenew == 0)">
21 |             <v-btn text>
22 |               <v-icon size="20">
23 |                 mdi-database-alert-outline
24 |               </v-icon>&nbsp;
25 |               待续费产品({{ ProductsToRenew }})
26 |             </v-btn>
27 |           </v-col>
28 |           <v-col v-if="!(WarningToReview == 0)">
29 |             <v-btn text>
30 |               <v-icon size="20">
31 |                 mdi-email-alert-outline
32 |               </v-icon>&nbsp;
33 |               待处理告警({{ WarningToReview }})
34 |             </v-btn>
35 |           </v-col>
36 |         </v-row>
37 |         <div v-if="(TicketsToSolve == 0) && (ProductsToRenew == 0) && (WarningToReview == 0)" class="complete-div">
38 |           <v-row>
39 |             <v-icon size="100">
40 |               mdi-check
41 |             </v-icon>
42 |           </v-row>
43 |           <v-row>
44 |             <span>全部完成!</span>
45 |           </v-row>
46 |           <v-row>
47 |             <p>前面的区域, 以后再来探索吧</p>
48 |           </v-row>
49 |         </div>
50 |       </v-card-text>
51 |     </v-card>
52 |   </div>
53 | </template>
54 | 
55 | <script>
56 | export default {
57 |   data: () => ({
58 |     TicketsToSolve: 0,
59 |     ProductsToRenew: 0,
60 |     WarningToReview: 0
61 |   })
62 | }
63 | </script>
64 | <style>
65 | .complete-div span {
66 |   margin: 0 auto;
67 |   font-size: 18px;
68 |   margin-bottom: 10px;
69 | }
70 | 
71 | .complete-div p {
72 |   margin: 0 auto;
73 |   font-size: 7px;
74 |   margin-bottom: 10px;
75 | }
76 | 
77 | .complete-div .v-icon {
78 |   margin: 0 auto;
79 | }
80 | 
81 | </style>
82 | 


--------------------------------------------------------------------------------
/components/table/TableViewall.vue:
--------------------------------------------------------------------------------
 1 | <!-- 工作台概览分表 -->
 2 | <template>
 3 |   <v-container>
 4 |     <div>
 5 |       <v-row>
 6 |         <v-col>
 7 |           <TableProducts />
 8 |         </v-col>
 9 |         <v-col
10 |           sm="3"
11 |         >
12 |           <TableFund />
13 |           <br>
14 |           <TableTodo />
15 |         </v-col>
16 |       </v-row>
17 |     </div>
18 |   </v-container>
19 | </template>
20 | 
21 | <script>
22 | export default {}
23 | </script>
24 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "paths": {
 5 |       "~/*": ["./*"],
 6 |       "@/*": ["./*"],
 7 |       "~~/*": ["./*"],
 8 |       "@@/*": ["./*"]
 9 |     }
10 |   },
11 |   "exclude": ["node_modules", ".nuxt", "dist"]
12 | }
13 | 


--------------------------------------------------------------------------------
/layouts/cdn.vue:
--------------------------------------------------------------------------------
 1 | <!-- cdn布局 -->
 2 | <template>
 3 |   <v-app>
 4 |     <AppBar />
 5 |     <v-main>
 6 |       <v-container>
 7 |         <v-row>
 8 |           <v-col sm="2">
 9 |             <v-tabs vertical optional>
10 |               <v-tab
11 |                 to="/cdn"
12 |               >
13 |                 <v-icon>mdi-home</v-icon>
14 |                 产品概览
15 |               </v-tab>
16 |               <v-tab
17 |                 to="/cdn/domains"
18 |               >
19 |                 <v-icon>mdi-access-point</v-icon>
20 |                 域名列表
21 |               </v-tab>
22 |               <v-tab
23 |                 to="/cdn/alarm"
24 |               >
25 |                 <v-icon>mdi-alert-octagram</v-icon>
26 |                 告警管理
27 |               </v-tab>
28 |             </v-tabs>
29 |           </v-col>
30 |           <v-col>
31 |             <Nuxt />
32 |           </v-col>
33 |         </v-row>
34 |       </v-container>
35 |     </v-main>
36 |   </v-app>
37 | </template>
38 | 
39 | <script>
40 | export default {
41 |   name: 'CdnLayout',
42 |   theme: {
43 |     dark: false
44 |   }
45 | }
46 | </script>
47 | 


--------------------------------------------------------------------------------
/layouts/container.vue:
--------------------------------------------------------------------------------
  1 | <!-- 容器云布局 -->
  2 | <template>
  3 |   <v-app>
  4 |     <AppBar />
  5 |     <v-main>
  6 |       <SnackBar ref="SnackBar" />
  7 |       <v-row>
  8 |         <!-- 概览导航头部 开始 -->
  9 |         <v-tabs class="list-tab" vertical optional>
 10 |           <v-tab
 11 |             to="/container/overview"
 12 |           >
 13 |             <v-icon>mdi-home</v-icon>
 14 |             产品概览
 15 |           </v-tab>
 16 |           <v-tab
 17 |             to="/container/productlist"
 18 |           >
 19 |             <v-icon>mdi-server</v-icon>
 20 |             实例列表
 21 |           </v-tab>
 22 |           <v-tab
 23 |             to="/container/cedlist"
 24 |           >
 25 |             <v-icon>mdi-harddisk</v-icon>
 26 |             CED 列表
 27 |           </v-tab>
 28 |           <v-tab
 29 |             to="/container/snapshotlist"
 30 |           >
 31 |             <v-icon>mdi-content-save</v-icon>
 32 |             实例快照
 33 |           </v-tab>
 34 |         </v-tabs>
 35 |         <v-col class="main-col">
 36 |           <Nuxt />
 37 |         </v-col>
 38 |       </v-row>
 39 |     </v-main>
 40 |   </v-app>
 41 | </template>
 42 | 
 43 | <script>
 44 | import SessionUtils from '~/utils/SessionUtils.vue'
 45 | export default {
 46 |   name: 'ContainedLayout',
 47 |   mixins: [SessionUtils],
 48 |   transition: 'scroll-x-transition',
 49 |   theme: {
 50 |     dark: false
 51 |   },
 52 |   watch: {
 53 |     $route: {
 54 |       handler: function () {
 55 |         const sessionExist = this.checkIfSessionIdExist()
 56 |         this.pushRouter(sessionExist)
 57 |       }
 58 |     }
 59 |   },
 60 |   mounted () {
 61 |     const sessionExist = this.checkIfSessionIdExist()
 62 |     this.pushRouter(sessionExist)
 63 |   },
 64 |   methods: {
 65 |     showSnackBar (type, notifyMsg, timeOut, notifyClosable) {
 66 |       if (type === 'success') {
 67 |         this.$refs.SnackBar.$data.notifyIcon = 'mdi-check-circle-outline'
 68 |         this.$refs.SnackBar.$data.notifyBgColor = 'rgba(76, 175, 80)'
 69 |       } else if (type === 'warning') {
 70 |         this.$refs.SnackBar.$data.notifyIcon = 'mdi-alert-outline'
 71 |         this.$refs.SnackBar.$data.notifyBgColor = 'rgba(251, 140, 0)'
 72 |       } else if (type === 'error') {
 73 |         this.$refs.SnackBar.$data.notifyIcon = 'mdi-alert-octagon-outline'
 74 |         this.$refs.SnackBar.$data.notifyBgColor = 'rgba(255, 82, 82)'
 75 |       } else if (type === 'unknown') {
 76 |         this.$refs.SnackBar.$data.notifyIcon = 'mdi-help-circle-outline'
 77 |         this.$refs.SnackBar.$data.notifyBgColor = 'rgba(96, 125, 139)'
 78 |       }
 79 |       if (notifyClosable === undefined) {
 80 |         this.$refs.SnackBar.$data.notifyClosable = false
 81 |       } else {
 82 |         this.$refs.SnackBar.$data.notifyClosable = notifyClosable
 83 |       }
 84 |       this.$refs.SnackBar.$data.snackBarSeen = true
 85 |       this.$refs.SnackBar.$data.notifyMsg = notifyMsg
 86 |       setTimeout(() => {
 87 |         this.$refs.SnackBar.$data.snackBarSeen = false
 88 |       }, timeOut)
 89 |     },
 90 |     pushRouter (result) {
 91 |       if (result === true && (this.$route.path === '/container' || this.$route.path === '/container/')) {
 92 |         this.$router.push('/container/overview')
 93 |       }
 94 |     }
 95 |   }
 96 | }
 97 | </script>
 98 | <style>
 99 | .main-col{
100 |   margin-right: 20px !important;
101 | }
102 | .list-tab .v-icon{
103 |   margin-right: 20px;
104 | }
105 | .list-tab{
106 |   margin-top: 10px;
107 |   margin-left: 12px;
108 |   min-width: 120px;
109 |   max-width: 220px;
110 | }
111 | .scroll-x-transition-active,
112 | .scroll-x-transition-active {
113 |   transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
114 | }
115 | .scroll-x-transition-enter,
116 | .scroll-x-transition-to {
117 |   opacity: 0;
118 |   transform: translate3d(-15px, 0, 0);
119 | }
120 | </style>
121 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <AppBar />
 4 |     <v-main>
 5 |       <SnackBar ref="SnackBar" />
 6 |       <Nuxt @showSnackBar="showSnackBar" />
 7 |     </v-main>
 8 |   </v-app>
 9 | </template>
10 | <script>
11 | import SessionUtils from '~/utils/SessionUtils.vue'
12 | export default {
13 |   name: 'DefaultLayout',
14 |   mixins: [SessionUtils],
15 |   transition: 'scroll-x-transition',
16 |   theme: {
17 |     dark: false
18 |   },
19 |   data: () => ({
20 |     excludeList: ['/account/login', '/account/login/', '/account/register', '/account/register/', '/account/forgot', '/account/forgot/']
21 |   }),
22 |   watch: {
23 |     $route: {
24 |       handler: function () {
25 |         if (this.$data.excludeList.includes(this.$route.path)) {
26 |           const sessionExist = this.checkIfSessionIdExist()
27 |           if (sessionExist === true) {
28 |             this.$router.push('/account/settings')
29 |           }
30 |         } else {
31 |           const sessionExist = this.checkIfSessionIdExist()
32 |           this.pushRouter(sessionExist)
33 |         }
34 |       }
35 |     }
36 |   },
37 |   mounted () {
38 |     if (this.$data.excludeList.includes(this.$route.path)) {
39 |       const sessionExist = this.checkIfSessionIdExist(false)
40 |       if (sessionExist === true) {
41 |         this.$router.push('/account/settings')
42 |       }
43 |     } else {
44 |       const sessionExist = this.checkIfSessionIdExist()
45 |       this.pushRouter(sessionExist)
46 |     }
47 |   },
48 |   methods: {
49 |     showSnackBar (type, notifyMsg, timeOut, notifyClosable) {
50 |       if (type === 'success') {
51 |         this.$refs.SnackBar.$data.notifyIcon = 'mdi-check-circle-outline'
52 |         this.$refs.SnackBar.$data.notifyBgColor = 'rgba(76, 175, 80)'
53 |       } else if (type === 'warning') {
54 |         this.$refs.SnackBar.$data.notifyIcon = 'mdi-alert-outline'
55 |         this.$refs.SnackBar.$data.notifyBgColor = 'rgba(251, 140, 0)'
56 |       } else if (type === 'error') {
57 |         this.$refs.SnackBar.$data.notifyIcon = 'mdi-alert-octagon-outline'
58 |         this.$refs.SnackBar.$data.notifyBgColor = 'rgba(255, 82, 82)'
59 |       } else if (type === 'unknown') {
60 |         this.$refs.SnackBar.$data.notifyIcon = 'mdi-help-circle-outline'
61 |         this.$refs.SnackBar.$data.notifyBgColor = 'rgba(96, 125, 139)'
62 |       }
63 |       if (notifyClosable === undefined) {
64 |         this.$refs.SnackBar.$data.notifyClosable = false
65 |       } else {
66 |         this.$refs.SnackBar.$data.notifyClosable = notifyClosable
67 |       }
68 |       this.$refs.SnackBar.$data.snackBarSeen = true
69 |       this.$refs.SnackBar.$data.notifyMsg = notifyMsg
70 |       setTimeout(() => {
71 |         if (this.$refs.SnackBar.$data.snackBarSeen === true) {
72 |           this.$refs.SnackBar.$data.snackBarSeen = false
73 |         }
74 |       }, timeOut)
75 |     },
76 |     pushRouter (result) {
77 |       if (result === true && this.$route.path === '/') {
78 |         this.$router.push('/table')
79 |       } else if (result === true && (this.$route.path === '/account' || this.$route.path === '/account/')) {
80 |         this.$router.push('/account/settings')
81 |       }
82 |     }
83 |   }
84 | }
85 | </script>
86 | <style>
87 | .scroll-x-transition-active,
88 | .scroll-x-transition-active {
89 |   transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
90 | }
91 | .scroll-x-transition-enter,
92 | .scroll-x-transition-to {
93 |   opacity: 0;
94 |   transform: translate3d(-15px, 0, 0);
95 | }
96 | </style>
97 | 


--------------------------------------------------------------------------------
/layouts/error.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <v-icon class="err-icon" size="70">
 4 |       mdi-alert-octagon-outline
 5 |     </v-icon>
 6 |     <h1>
 7 |       {{ errorMessage }}
 8 |     </h1>
 9 |     <v-btn to="/" class="back-to-home" width="150" rounded text>
10 |       <v-icon>mdi-home-variant-outline</v-icon>返回首页
11 |     </v-btn>
12 |   </v-app>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   name: 'Error',
18 |   props: {
19 |     error: {
20 |       type: Object,
21 |       default: null
22 |     }
23 |   },
24 |   data () {
25 |     return {
26 |       errorMessage: '发生错误: 错误码为 ' + this.error.statusCode
27 |     }
28 |   },
29 |   head () {
30 |     return {
31 |       title: '发生错误'
32 |     }
33 |   }
34 | }
35 | </script>
36 | 
37 | <style>
38 | h1 {
39 |   font-size: 20px;
40 |   margin: 0 auto;
41 |   color: rgba(0, 0, 0, .6);
42 |   margin-top: 10px;
43 | }
44 | .err-icon {
45 |   color: rgba(0, 0, 0, .4);
46 |   margin-left: auto;
47 |   margin-right: auto;
48 |   margin-top: 20px;
49 | }
50 | .back-to-home{
51 |   margin: 10px auto !important;
52 | }
53 | </style>
54 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | import colors from 'vuetify/es5/util/colors'
 2 | 
 3 | export default {
 4 |   // Global page headers: https://go.nuxtjs.dev/config-head
 5 |   head: {
 6 |     titleTemplate: '%s - 玲行云端控制台',
 7 |     title: '玲行云端控制台',
 8 |     htmlAttrs: {
 9 |       lang: 'zh-CN'
10 |     },
11 |     meta: [
12 |       { charset: 'utf-8' },
13 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
14 |       { hid: 'description', name: 'description', content: '' },
15 |       { name: 'format-detection', content: 'telephone=no' }
16 |     ],
17 |     link: [
18 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
19 |     ]
20 |   },
21 | 
22 |   // Global CSS: https://go.nuxtjs.dev/config-css
23 |   css: [
24 |     '~/assets/global.css'
25 |   ],
26 | 
27 |   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
28 |   plugins: [
29 |   ],
30 | 
31 |   // Auto import components: https://go.nuxtjs.dev/config-components
32 |   components: true,
33 | 
34 |   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
35 |   buildModules: [
36 |     // https://go.nuxtjs.dev/eslint
37 |     '@nuxtjs/eslint-module',
38 |     // https://go.nuxtjs.dev/vuetify
39 |     '@nuxtjs/vuetify'
40 |   ],
41 | 
42 |   // Modules: https://go.nuxtjs.dev/config-modules
43 |   modules: [
44 |     '@nuxtjs/axios'
45 |   ],
46 | 
47 |   // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
48 |   vuetify: {
49 |     customVariables: ['~/assets/variables.scss'],
50 |     treeshake: true,
51 |     theme: {
52 |       dark: false,
53 |       themes: {
54 |         light: {
55 |           primary: colors.blue.base,
56 |           secondary: colors.blue.darken4,
57 |           accent: colors.blue.accent2,
58 |           grey_background: colors.grey.lighten2
59 |         },
60 |         dark: {
61 |           primary: colors.blue.darken2,
62 |           accent: colors.grey.darken3,
63 |           secondary: colors.amber.darken3,
64 |           info: colors.teal.lighten1,
65 |           warning: colors.amber.base,
66 |           error: colors.deepOrange.accent4,
67 |           success: colors.green.accent3
68 |         }
69 |       }
70 |     }
71 |   },
72 | 
73 |   // Build Configuration: https://go.nuxtjs.dev/config-build
74 |   build: {
75 |   },
76 |   loading: {
77 |     color: 'rgba(33, 150, 243)'
78 |   },
79 |   pageTransition: {
80 |     name: 'scroll-x-transition',
81 |     mode: 'out-in'
82 |   }
83 | }
84 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "consolify-frontend",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "nuxt",
 7 |     "build": "nuxt build",
 8 |     "start": "nuxt start",
 9 |     "generate": "nuxt generate",
10 |     "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
11 |     "lint": "yarn lint:js",
12 |     "lintfix": "yarn lint:js --fix"
13 |   },
14 |   "dependencies": {
15 |     "@nuxtjs/axios": "^5.13.6",
16 |     "core-js": "^3.31.1",
17 |     "lodash": "^4.17.21",
18 |     "nuxt": "^2.15.8",
19 |     "vue": "^2.6.14",
20 |     "vue-server-renderer": "^2.6.14",
21 |     "vue-template-compiler": "^2.6.14",
22 |     "vuetify": "^2.7.0",
23 |     "webpack": "^5.88.1"
24 |   },
25 |   "devDependencies": {
26 |     "@babel/eslint-parser": "^7.22.9",
27 |     "@nuxtjs/eslint-config": "^12.0.0",
28 |     "@nuxtjs/eslint-module": "^4.1.0",
29 |     "@nuxtjs/vuetify": "^1.12.3",
30 |     "eslint": "^8.44.0",
31 |     "eslint-plugin-nuxt": "^4.0.0",
32 |     "eslint-plugin-vue": "^9.15.1"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/pages/account/forgot.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <img src="~/static/incloudify-logo-large.png">
 4 |     <h1>忘记密码</h1>
 5 |     <p>「最后, 森林会记住一切」</p>
 6 |     <AccountForgotForm @submitSucceed="submitSucceed" @submit.native.prevent />
 7 |     <div ref="optionsTxt" class="options">
 8 |       <v-btn elevation="0" color="transparent" rounded max-width="200px" to="/account/login">
 9 |         我又双叒叕想起来了
10 |       </v-btn>
11 |       <p style="margin-top: 5px">
12 |         &nbsp;|&nbsp;
13 |       </p>
14 |       <v-btn elevation="0" color="transparent" rounded max-width="100px" to="/account/register">
15 |         注册账户
16 |       </v-btn>
17 |     </div>
18 |   </v-app>
19 | </template>
20 | 
21 | <script>
22 | export default {
23 |   name: 'PasswordResetPage',
24 |   head: () => ({
25 |     title: '密码重置'
26 |   }),
27 |   methods: {
28 |     submitSucceed () {
29 |       this.$refs.optionsTxt.style = 'opacity: 0;'
30 |       setTimeout(() => {
31 |         this.$refs.optionsTxt.style = 'opacity: 0; display: none;'
32 |         this.$parent.$emit('showSnackBar', 'success', '密码重置邮件已发送', 3000, true)
33 |       }, 500)
34 |     }
35 |   }
36 | }
37 | </script>
38 | <style>
39 | h1 {
40 |   font-weight: 200;
41 |   font-size: 25px;
42 |   margin-bottom: 15px;
43 |   margin-left: auto;
44 |   margin-right: auto;
45 | }
46 | 
47 | p {
48 |   font-weight: 200;
49 |   margin-left: auto;
50 |   margin-right: auto;
51 | }
52 | 
53 | img {
54 |   margin: 5px auto;
55 |   max-width: 150px;
56 |   max-height: 100px;
57 | }
58 | 
59 | .options {
60 |   display: flex;
61 |   margin: 10px auto;
62 |   transition: all 0.5s;
63 | }
64 | </style>
65 | 


--------------------------------------------------------------------------------
/pages/account/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app />
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: 'AccountPage',
 8 |   head: () => ({
 9 |     title: '账户'
10 |   })
11 | }
12 | </script>
13 | 


--------------------------------------------------------------------------------
/pages/account/login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <img src="~/static/incloudify-logo-large.png">
 4 |     <h1>登录到玲行云端控制台</h1>
 5 |     <p ref="welcomeTxt">
 6 |       欢迎回来!
 7 |     </p>
 8 |     <AccountLoginForm @submitSucceed="submitSucceed" @submit.native.prevent />
 9 |     <div ref="optionsTxt" class="options">
10 |       <v-btn elevation="0" color="transparent" rounded max-width="100px" to="/account/forgot">
11 |         忘记密码
12 |       </v-btn>
13 |       <p style="margin-top: 5px">
14 |         &nbsp;|&nbsp;
15 |       </p>
16 |       <v-btn elevation="0" color="transparent" rounded max-width="100px" to="/account/register">
17 |         注册账户
18 |       </v-btn>
19 |     </div>
20 |   </v-app>
21 | </template>
22 | 
23 | <script>
24 | export default {
25 |   name: 'AccountLoginPage',
26 |   head: () => ({
27 |     title: '账户登录'
28 |   }),
29 |   methods: {
30 |     submitSucceed () {
31 |       this.$refs.welcomeTxt.style = 'opacity: 0;'
32 |       this.$refs.optionsTxt.style = 'opacity: 0;'
33 |       setTimeout(() => {
34 |         this.$refs.welcomeTxt.innerHTML = '&nbsp;'
35 |         this.$refs.optionsTxt.innerHTML = '&nbsp;'
36 |         this.$parent.$emit('showSnackBar', 'success', '登录成功', 3000, true)
37 |       }, 500)
38 |     }
39 |   }
40 | }
41 | </script>
42 | <style>
43 | h1 {
44 |   font-weight: 200;
45 |   font-size: 25px;
46 |   margin-bottom: 15px;
47 |   margin-left: auto;
48 |   margin-right: auto;
49 | }
50 | 
51 | p {
52 |   font-weight: 200;
53 |   margin-left: auto;
54 |   margin-right: auto;
55 |   transition: opacity 0.5s;
56 | }
57 | 
58 | img {
59 |   margin: 5px auto;
60 |   max-width: 150px;
61 |   max-height: 100px;
62 | }
63 | 
64 | .options {
65 |   display: flex;
66 |   margin: 10px auto;
67 |   transition: opacity 0.5s;
68 | }
69 | </style>
70 | 


--------------------------------------------------------------------------------
/pages/account/register.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <img src="~/static/incloudify-logo-large.png">
 4 |     <h1>注册玲行云端账户</h1>
 5 |     <p ref="welcomeTxt">
 6 |       你好, 世界。
 7 |     </p>
 8 |     <AccountRegisterForm @processBackward="processBackward" @processStarted="processStarted" @submitSucceed="submitSucceed" @submit.native.prevent />
 9 |     <div ref="optionsTxt" class="options">
10 |       <v-btn elevation="0" color="transparent" rounded max-width="250px" to="/account/login">
11 |         事实上我已经有账户了
12 |       </v-btn>
13 |       <p style="margin-top: 5px">
14 |         &nbsp;|&nbsp;
15 |       </p>
16 |       <v-btn elevation="0" color="transparent" rounded max-width="100px" to="/account/forgot">
17 |         忘记密码
18 |       </v-btn>
19 |     </div>
20 |   </v-app>
21 | </template>
22 | 
23 | <script>
24 | export default {
25 |   name: 'AccountRegisterPage',
26 |   head: () => ({
27 |     title: '账户注册'
28 |   }),
29 |   methods: {
30 |     processStarted () {
31 |       this.$refs.optionsTxt.style = 'opacity: 0;'
32 |       setTimeout(() => {
33 |         this.$refs.optionsTxt.style = 'opacity: 0; display: none;'
34 |       }, 500)
35 |     },
36 |     processBackward () {
37 |       setTimeout(() => {
38 |         this.$refs.optionsTxt.style = 'opacity: 0;'
39 |         setTimeout(() => {
40 |           this.$refs.optionsTxt.style = 'opacity: 1;'
41 |         }, 100)
42 |       }, 500)
43 |     },
44 |     submitSucceed () {
45 |       this.$refs.welcomeTxt.style = 'opacity: 0;'
46 |       setTimeout(() => {
47 |         this.$refs.welcomeTxt.style = 'opacity: 0; display: none;'
48 |         this.$parent.$emit('showSnackBar', 'success', '注册成功', 3000, true)
49 |       }, 500)
50 |     }
51 |   }
52 | }
53 | </script>
54 | <style>
55 | h1 {
56 |   font-weight: 200;
57 |   font-size: 25px;
58 |   margin-bottom: 15px;
59 |   margin-left: auto;
60 |   margin-right: auto;
61 | }
62 | 
63 | p {
64 |   font-weight: 200;
65 |   margin-left: auto;
66 |   margin-right: auto;
67 |   transition: opacity 0.5s;
68 | }
69 | 
70 | img {
71 |   margin: 5px auto;
72 |   max-width: 150px;
73 |   max-height: 100px;
74 | }
75 | 
76 | .options {
77 |   display: flex;
78 |   margin: 10px auto;
79 |   transition: opacity 0.5s;
80 | }
81 | </style>
82 | 


--------------------------------------------------------------------------------
/pages/account/settings.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <p>你知道吗, 这里我们还什么都没写。</p>
 4 |     <p>如果有什么需求, 可以直接联系后端改数据库。(确信</p>
 5 |   </v-app>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'AccountSettingsPage',
11 |   head: () => ({
12 |     title: '账户设置'
13 |   })
14 | }
15 | </script>
16 | 


--------------------------------------------------------------------------------
/pages/addfunds/vme50.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-app>
  3 |     <div class="add-funds-div">
  4 |       <v-card class="add-funds-main-card">
  5 |         <v-card-title>充值余额</v-card-title>
  6 |         <v-card-text>
  7 |           <div class="add-funds-card-content">
  8 |             <v-icon>mdi-account-cash-outline</v-icon>
  9 |             <p>当前余额</p>
 10 |             <p style="font-size: 25px;">
 11 |               <font :style="(currentRemainder < 0) ? 'color: rgb(255, 127, 127);' : ''">
 12 |                 {{ currentRemainder }}
 13 |               </font>
 14 |             </p>
 15 |             <p>元</p>
 16 |           </div>
 17 |           <div class="add-funds-card-content">
 18 |             <v-icon>mdi-credit-card-outline</v-icon>
 19 |             <p>支付方式</p>
 20 |             <v-btn-toggle
 21 |               v-model="selectedPaymentMethod"
 22 |               color="rgba(0, 163, 252)"
 23 |               style="margin: auto 5px;"
 24 |               mandatory
 25 |             >
 26 |               <v-btn
 27 |                 v-for="paymentMethod in availablePaymentMethods"
 28 |                 :key="paymentMethod.id"
 29 |                 :disabled="!paymentMethod.available"
 30 |                 outlined
 31 |               >
 32 |                 {{ paymentMethod.name }}
 33 |               </v-btn>
 34 |             </v-btn-toggle>
 35 |           </div>
 36 |           <div class="add-funds-card-content">
 37 |             <v-icon>mdi-hand-coin-outline</v-icon>
 38 |             <p>目标金额</p>
 39 |             <v-text-field
 40 |               v-model="targetFunds"
 41 |               class="add-funds-target-funds-input"
 42 |               maxlength="8"
 43 |               label="目标金额"
 44 |               type="number"
 45 |               :placeholder="'单位(' + availablePaymentMethods[selectedPaymentMethod].currencyUnit + ') ' + '请输入充值金额, 最低 0.01 ' + availablePaymentMethods[selectedPaymentMethod].currencyUnit"
 46 |               filled
 47 |             />
 48 |           </div>
 49 |         </v-card-text>
 50 |       </v-card>
 51 |       <v-card class="add-funds-detail-card">
 52 |         <v-card-title>账单详情</v-card-title>
 53 |         <v-card-text class="add-funds-detail-content">
 54 |           <p>支付方式: {{ availablePaymentMethods[selectedPaymentMethod].name }}</p>
 55 |           <p>购买项目: 充值余额</p>
 56 |           <p>所需金额: {{ ((targetFunds === null) || (targetFunds === undefined) || (targetFunds === '')) ? '0.00' : targetFunds }} {{ availablePaymentMethods[selectedPaymentMethod].currencyUnit }}</p>
 57 |           <hr>
 58 |           <v-btn class="add-funds-detail-content-submit-btn" color="primary" @click="submitPayment">
 59 |             <v-icon>mdi-cash-check</v-icon>
 60 |             提交订单
 61 |           </v-btn>
 62 |         </v-card-text>
 63 |       </v-card>
 64 |     </div>
 65 |   </v-app>
 66 | </template>
 67 | 
 68 | <script>
 69 | export default {
 70 |   name: 'AddFundsPage',
 71 |   data: () => ({
 72 |     currentRemainder: -86837,
 73 |     availablePaymentMethods: [
 74 |       {
 75 |         id: 1,
 76 |         name: '支付宝',
 77 |         available: true,
 78 |         currencyUnit: '元'
 79 |       },
 80 |       {
 81 |         id: 2,
 82 |         name: '微信支付',
 83 |         available: false,
 84 |         currencyUnit: '元'
 85 |       },
 86 |       {
 87 |         id: 3,
 88 |         name: 'PayPal',
 89 |         available: true,
 90 |         currencyUnit: '美元'
 91 |       },
 92 |       {
 93 |         id: 4,
 94 |         name: '银行卡',
 95 |         available: false,
 96 |         currencyUnit: '元'
 97 |       }
 98 |     ],
 99 |     selectedPaymentMethod: 0,
100 |     targetFunds: null
101 |   }),
102 |   head: () => ({
103 |     title: '账户充值'
104 |   }),
105 |   methods: {
106 |     submitPayment () {
107 |       // To Be Done Later
108 |     }
109 |   }
110 | }
111 | </script>
112 | 
113 | <style>
114 | .add-funds-div {
115 |   margin: 0 auto;
116 |   display: flex;
117 |   min-width: 80%;
118 | }
119 | 
120 | .add-funds-main-card {
121 |   margin-top: 20px;
122 |   max-width: 800px;
123 |   min-width: 65%;
124 | }
125 | 
126 | .add-funds-detail-card {
127 |   margin-top: 20px;
128 |   margin-left: 10px;
129 |   min-width: 30%;
130 | }
131 | 
132 | .add-funds-card-content {
133 |   display: flex;
134 |   margin: 15px 0;
135 | }
136 | 
137 | .add-funds-card-content p {
138 |   margin: auto 10px;
139 | }
140 | 
141 | .add-funds-target-funds-input {
142 |   max-width: 70%;
143 |   margin-left: 5px !important;
144 |   margin-top: auto;
145 |   margin-bottom: auto;
146 | }
147 | 
148 | .add-funds-target-funds-input .v-text-field__details {
149 |   display: none;
150 | }
151 | 
152 | .add-funds-detail-content p {
153 |   margin: auto 0;
154 | }
155 | 
156 | .add-funds-detail-content hr {
157 |   margin-top: 20px;
158 | }
159 | 
160 | .add-funds-detail-content-submit-btn {
161 |   margin-top: 20px;
162 | }
163 | </style>
164 | 


--------------------------------------------------------------------------------
/pages/cdn/detail/_domainName.vue:
--------------------------------------------------------------------------------
  1 | <!-- 实例详情页 传入域名 -->
  2 | <template>
  3 |   <div>
  4 |     <!-- 顶部工具条 开始 -->
  5 |     <v-toolbar dense>
  6 |       <v-btn icon>
  7 |         <v-icon>
  8 |           mdi-arrow-left
  9 |         </v-icon>
 10 |       </v-btn>
 11 |       <v-toolbar-title>
 12 |         域名： {{ $route.params.domainName }}
 13 |       </v-toolbar-title>
 14 |       <v-btn text>
 15 |         <v-icon color="grey">
 16 |           mdi-cloud-outline
 17 |         </v-icon>
 18 |         地域: 璃月
 19 |       </v-btn>
 20 |       <v-spacer />
 21 |       <!---->
 22 |       <v-tooltip bottom>
 23 |         <template #activator="{ on, attrs }">
 24 |           <v-btn
 25 |             icon
 26 |             v-bind="attrs"
 27 |             v-on="on"
 28 |           >
 29 |             <v-icon>
 30 |               mdi-restart
 31 |             </v-icon>
 32 |           </v-btn>
 33 |         </template>
 34 |         <span>
 35 |           手动同步
 36 |         </span>
 37 |       </v-tooltip>
 38 |       <!---->
 39 |       <v-menu offset-y>
 40 |         <template #activator="{ on, attrs }">
 41 |           <v-btn
 42 |             icon
 43 |             v-bind="attrs"
 44 |             v-on="on"
 45 |           >
 46 |             <v-icon>
 47 |               mdi-dots-horizontal
 48 |             </v-icon>
 49 |           </v-btn>
 50 |         </template>
 51 |         <v-list>
 52 |           <v-list-item
 53 |             to="/"
 54 |           >
 55 |             <v-list-item-icon>
 56 |               <v-icon>
 57 |                 mdi-autorenew
 58 |               </v-icon>
 59 |             </v-list-item-icon>
 60 |             <v-list-item-title>
 61 |               续费
 62 |             </v-list-item-title>
 63 |           </v-list-item>
 64 |           <!---->
 65 |           <v-list-item
 66 |             to="/"
 67 |           >
 68 |             <v-list-item-icon>
 69 |               <v-icon class="red--text">
 70 |                 mdi-truck-cargo-container
 71 |               </v-icon>
 72 |             </v-list-item-icon>
 73 |             <v-list-item-title class="red--text">
 74 |               迁移可用区
 75 |             </v-list-item-title>
 76 |           </v-list-item>
 77 |           <!---->
 78 |           <v-list-item
 79 |             to="/"
 80 |           >
 81 |             <v-list-item-icon>
 82 |               <v-icon class="red--text">
 83 |                 mdi-trash-can-outline
 84 |               </v-icon>
 85 |             </v-list-item-icon>
 86 |             <v-list-item-title class="red--text">
 87 |               退订实例
 88 |             </v-list-item-title>
 89 |           </v-list-item>
 90 |         </v-list>
 91 |       </v-menu>
 92 |     </v-toolbar>
 93 |     <!-- 顶部工具条 结束 -->
 94 |     <v-tabs>
 95 |       <!-- 标签页 开始 -->
 96 |       <v-tab
 97 |         href="#home"
 98 |       >
 99 |         <v-icon>
100 |           mdi-home-variant-outline
101 |         </v-icon>
102 |         概览
103 |       </v-tab>
104 |       <v-tab
105 |         href="#backsource"
106 |       >
107 |         <v-icon>
108 |           mdi-cloud-download
109 |         </v-icon>
110 |         回源设置
111 |       </v-tab>
112 |       <v-tab>
113 |         <v-icon>
114 |           mdi-account-multiple
115 |         </v-icon>
116 |         浏览者设置
117 |       </v-tab>
118 |       <v-tab>
119 |         <v-icon>
120 |           mdi-finance
121 |         </v-icon>
122 |         状态报表
123 |       </v-tab>
124 |       <!-- 标签页 结束 -->
125 |       <!-- 标签内容 开始 -->
126 |       <!-- 总览 -->
127 |       <v-tab-item
128 |         value="home"
129 |         class="ma-4"
130 |       >
131 |         <v-alert type="warning">
132 |           分发有误，源站可被查询。请手动更新。
133 |         </v-alert>
134 |         <v-row>
135 |           <v-col>
136 |             <v-card
137 |               class="pa-2"
138 |             >
139 |               <v-card-title>
140 |                 <v-icon>
141 |                   mdi-information-outline
142 |                 </v-icon>
143 |                 接入信息
144 |               </v-card-title>
145 |               <v-card-text>
146 |                 <p>域名：域名</p>
147 |                 <p>分发状态：<span class="green--text"><v-icon>mdi-play-circle-outline</v-icon>正在分发</span></p>
148 |               </v-card-text>
149 |             </v-card>
150 |           </v-col>
151 |           <v-col>
152 |             <v-card
153 |               class="pa-2"
154 |             >
155 |               <v-card-title>
156 |                 <v-icon>
157 |                   mdi-information-outline
158 |                 </v-icon>
159 |                 报表概览
160 |               </v-card-title>
161 |               <v-card-text>
162 |                 <p>节点并行：100% (1/1 节点)<v-progress-linear value="100" color="red" rounded /></p>
163 |                 <p>事件资源包使用：50% (50/100 事件)<v-progress-linear value="50" color="orange" rounded /></p>
164 |                 <p>周期流量使用：25% (25/100 GB)<v-progress-linear value="25" color="green" rounded /></p>
165 |               </v-card-text>
166 |             </v-card>
167 |           </v-col>
168 |         </v-row>
169 |       </v-tab-item>
170 |       <v-tab-item
171 |         value="backsource"
172 |         class="ma-4"
173 |       >
174 |         <v-row>
175 |           <v-col>
176 |             <v-card>
177 |               <v-card-title>
178 |                 <v-icon>
179 |                   mdi-information-outline
180 |                 </v-icon>
181 |                 回源协议
182 |               </v-card-title>
183 |               <v-card-text>
184 |                 <v-text-field
185 |                   label="回源端口"
186 |                   placeholder="80"
187 |                   hint="将向源站此端口请求数据"
188 |                   persistent-hint
189 |                 />
190 |                 <v-text-field
191 |                   label="回源 Host"
192 |                   placeholder="域名"
193 |                   hint="将向源站传入此 Host 于 Header"
194 |                   persistent-hint
195 |                 />
196 |               </v-card-text>
197 |             </v-card>
198 |           </v-col>
199 |         </v-row>
200 |         <v-row>
201 |           <v-col>
202 |             <v-card>
203 |               <v-card-title>
204 |                 <v-icon>
205 |                   mdi-information-outline
206 |                 </v-icon>
207 |                 忽略缓存
208 |               </v-card-title>
209 |               <v-card-text>
210 |                 <v-text-field
211 |                   label="忽略缓存"
212 |                   placeholder="*.zip"
213 |                   hint="回源时忽略文件"
214 |                   persistent-hint
215 |                 />
216 |               </v-card-text>
217 |             </v-card>
218 |           </v-col>
219 |         </v-row>
220 |       </v-tab-item>
221 |       <!-- 标签内容 结束 -->
222 |     </v-tabs>
223 |   </div>
224 | </template>
225 | 
226 | <script>
227 | export default {
228 |   data: () => ({})
229 | }
230 | </script>
231 | <style>
232 | .v-alert-arrearage {
233 |   font-size: 7px;
234 |   margin: 0 4px;
235 | }
236 | </style>
237 | 


--------------------------------------------------------------------------------
/pages/cdn/domains.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <p class="display-1 text--primary">
  4 |       域名列表
  5 |     </p>
  6 |     <!-- 总览卡片 开始 -->
  7 |     <v-row>
  8 |       <v-col>
  9 |         <v-card>
 10 |           <v-card-title>
 11 |             <v-icon>
 12 |               mdi-access-point-network
 13 |             </v-icon>
 14 |             已添加域名数
 15 |           </v-card-title>
 16 |           <v-card-text>
 17 |             <div class="display-1">
 18 |               114
 19 |             </div>
 20 |           </v-card-text>
 21 |         </v-card>
 22 |       </v-col>
 23 |       <v-col>
 24 |         <v-card>
 25 |           <v-card-title>
 26 |             <v-icon>
 27 |               mdi-access-point-check
 28 |             </v-icon>
 29 |             已开始分发数
 30 |           </v-card-title>
 31 |           <v-card-text>
 32 |             <div class="display-1">
 33 |               114
 34 |             </div>
 35 |           </v-card-text>
 36 |         </v-card>
 37 |       </v-col>
 38 |       <v-col>
 39 |         <v-card>
 40 |           <v-card-title>
 41 |             <v-icon>
 42 |               mdi-alarm-light
 43 |             </v-icon>
 44 |             告警中域名数
 45 |           </v-card-title>
 46 |           <v-card-text>
 47 |             <div class="display-1" style="color: red;">
 48 |               114
 49 |             </div>
 50 |           </v-card-text>
 51 |         </v-card>
 52 |       </v-col>
 53 |     </v-row>
 54 |     <!-- 总览卡片 结束 -->
 55 |     <br>
 56 |     <v-card>
 57 |       <v-data-table
 58 |         :headers="dtHeaders"
 59 |         :items="dtDomains"
 60 |       >
 61 |         <template #[`item.actions`]="{ item }">
 62 |           <v-btn
 63 |             text
 64 |             :to="'/cdn/detail/' + item.name"
 65 |           >
 66 |             管理
 67 |           </v-btn>
 68 |         </template>
 69 |       </v-data-table>
 70 |     </v-card>
 71 |   </div>
 72 | </template>
 73 | 
 74 | <script>
 75 | export default {
 76 |   name: 'CdnDomains',
 77 |   layout: 'cdn',
 78 |   data: () => ({
 79 |     dtHeaders: [{
 80 |       text: '域名名称',
 81 |       align: 'start',
 82 |       sortable: false,
 83 |       value: 'name'
 84 |     },
 85 |     { text: '可用性', value: 'usable' },
 86 |     { text: '接入点', value: 'area' },
 87 |     { text: '流量', value: 'flow' },
 88 |     { text: '操作', value: 'actions' }
 89 |     ],
 90 |     dtDomains: [{
 91 |       name: 'www.incloudify.com',
 92 |       usable: '否',
 93 |       area: 'Liyue',
 94 |       flow: '114GB'
 95 |     }]
 96 |   }),
 97 |   head: () => ({
 98 |     title: '域名列表 -  内容分发网络'
 99 |   })
100 | }
101 | </script>
102 | 


--------------------------------------------------------------------------------
/pages/cdn/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <p class="display-1 text--primary">
 4 |       内容分发网络
 5 |     </p>
 6 |     <!-- 总览卡片 开始 -->
 7 |     <v-row>
 8 |       <v-col>
 9 |         <v-card>
10 |           <v-card-title>
11 |             <v-icon>
12 |               mdi-access-point-network
13 |             </v-icon>
14 |             已添加域名数
15 |           </v-card-title>
16 |           <v-card-text>
17 |             <div class="display-1">
18 |               114
19 |             </div>
20 |           </v-card-text>
21 |         </v-card>
22 |       </v-col>
23 |       <v-col>
24 |         <v-card>
25 |           <v-card-title>
26 |             <v-icon>
27 |               mdi-access-point-check
28 |             </v-icon>
29 |             已开始分发数
30 |           </v-card-title>
31 |           <v-card-text>
32 |             <div class="display-1">
33 |               114
34 |             </div>
35 |           </v-card-text>
36 |         </v-card>
37 |       </v-col>
38 |       <v-col>
39 |         <v-card>
40 |           <v-card-title>
41 |             <v-icon>
42 |               mdi-alarm-light
43 |             </v-icon>
44 |             告警中域名数
45 |           </v-card-title>
46 |           <v-card-text>
47 |             <div class="display-1" style="color: red;">
48 |               114
49 |             </div>
50 |           </v-card-text>
51 |         </v-card>
52 |       </v-col>
53 |     </v-row>
54 |     <!-- 总览卡片 结束 -->
55 |   </div>
56 | </template>
57 | 
58 | <script>
59 | export default {
60 |   name: 'CdnIndex',
61 |   layout: 'cdn',
62 |   data: () => ({
63 |   }),
64 |   head: () => ({
65 |     title: '概览 - 内容分发网络'
66 |   })
67 | }
68 | </script>
69 | 


--------------------------------------------------------------------------------
/pages/container/create/instance.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-app>
  3 |     <v-toolbar
  4 |       max-height="64px"
  5 |       elevation="0"
  6 |     >
  7 |       <v-btn
  8 |         icon
  9 |         @click="$router.back()"
 10 |       >
 11 |         <v-icon>mdi-arrow-left</v-icon>
 12 |       </v-btn>
 13 |       <p class="sub-bar-title">
 14 |         创建容器云实例
 15 |       </p>
 16 |     </v-toolbar>
 17 |     <v-col class="step-col">
 18 |       <v-row class="step-row">
 19 |         <!--Step 1-->
 20 |         <v-avatar
 21 |           :color="(stepNum === 1) ? 'rgba(0, 163, 255)': 'rgba(187, 187, 187)'"
 22 |           size="32"
 23 |         >
 24 |           <span class="white--text">1</span>
 25 |         </v-avatar>
 26 |         <p>
 27 |           <font :color="(stepNum === 1) ? 'rgba(33, 33, 33)' : 'grey'">
 28 |             选择配置
 29 |           </font>
 30 |         </p>
 31 |         <v-icon>mdi-chevron-right</v-icon>
 32 |         <!--Step 2-->
 33 |         <v-avatar
 34 |           :color="(stepNum === 2) ? 'rgba(0, 163, 255)': 'rgba(187, 187, 187)'"
 35 |           size="32"
 36 |         >
 37 |           <span class="white--text">2</span>
 38 |         </v-avatar>
 39 |         <p>
 40 |           <font :color="(stepNum === 2) ? 'rgba(33, 33, 33)' : 'grey'">
 41 |             信息确认
 42 |           </font>
 43 |         </p>
 44 |         <v-icon>mdi-chevron-right</v-icon>
 45 |         <!--Step 3-->
 46 |         <v-avatar
 47 |           :color="(stepNum === 3) ? 'rgba(0, 163, 255)': 'rgba(187, 187, 187)'"
 48 |           size="32"
 49 |         >
 50 |           <span class="white--text">3</span>
 51 |         </v-avatar>
 52 |         <p>
 53 |           <font :color="(stepNum === 3) ? 'rgba(33, 33, 33)' : 'grey'">
 54 |             进行支付
 55 |           </font>
 56 |         </p>
 57 |         <v-icon>mdi-chevron-right</v-icon>
 58 |         <!--Success-->
 59 |         <v-avatar
 60 |           :color="(stepNum === 4) ? 'rgba(0, 163, 255)': 'rgba(187, 187, 187)'"
 61 |           size="32"
 62 |         >
 63 |           <v-icon class="white--text">
 64 |             mdi-check
 65 |           </v-icon>
 66 |         </v-avatar>
 67 |         <p>
 68 |           <font :color="(stepNum === 4) ? 'rgba(33, 33, 33)' : 'grey'">
 69 |             支付成功
 70 |           </font>
 71 |         </p>
 72 |       </v-row>
 73 |     </v-col>
 74 |     <v-col class="main-col">
 75 |       <v-slide-x-reverse-transition>
 76 |         <ContainerCreateInstanceOptions v-if="stepNum === 1" ref="createInstanceOptionsComponent" @updateCost="updateCost" @updateOptions="updateOptions" @receiveValidateStatus="receiveValidateStatus" />
 77 |       </v-slide-x-reverse-transition>
 78 |       <v-slide-x-reverse-transition>
 79 |         <ContainerCreateInstanceInfo v-if="stepNum === 2" />
 80 |       </v-slide-x-reverse-transition>
 81 |       <v-slide-x-reverse-transition>
 82 |         <ContainerCreateOptionsConfirm v-if="stepNum === 3" />
 83 |       </v-slide-x-reverse-transition>
 84 |     </v-col>
 85 |     <v-slide-y-reverse-transition>
 86 |       <v-col v-if="stepNum !== 4" class="container-create-instance-footer">
 87 |         <!-- 有些人总说我直接在元素上写style不文明, 那我很好奇这个style功能是用来干什么的 -->
 88 |         <!-- 还全叫我写CSS里, 一个元素一个class名, 6 -->
 89 |         <!-- 你高清, 你1080P -->
 90 |         <!-- 但反正不是行云团队里的人, 总之是往事了 -->
 91 |         <!-- 我就要用style -->
 92 |         <!-- 现在是第一次实践 -->
 93 |         <!-- 我突然想起来改天得给这个仓库装个StyleLint -->
 94 |         <!-- 现在这个CSS的格式烂的跟s**t一样 -->
 95 |         <!-- 如果你只是一个用户, 碰巧看到了这些, 很高兴能与你分享我的故事 -->
 96 |         <!-- 当然如果这些影响了你的心情那我是很抱歉的 -->
 97 |         <!-- 如果你是氧化, 我觉得还是别把这些删掉, 当点有意思的东西看看 -->
 98 |         <!-- 不纯, 写于2022/12/27 08:56, 上网课化学课时 -->
 99 |         <!-- 突然想起来基于Vue的特性用户好像看不到这些东西 -->
100 |         <!-- 删不删呢... -->
101 |         <!-- 讲个笑话, 上面提到的那个实践我现在又想改到class去了 -->
102 |         <!-- 好了, 改了 -->
103 |         <div style="display: block;">
104 |           <p class="container-create-instance-cost-hint-content">
105 |             总计费用
106 |           </p>
107 |           <font class="container-create-instance-cost-value-content">
108 |             <h2 ref="currentCost">
109 |               --.-
110 |             </h2><p>元</p>
111 |           </font>
112 |         </div>
113 |         <div class="container-create-instance-footer-step-manage-area-div">
114 |           <v-fade-transition>
115 |             <v-checkbox v-if="stepNum === 2" v-model="agreementIsAgreed" label="我已阅读并同意《用户协议》和《隐私政策》" />
116 |           </v-fade-transition>
117 |           <v-fade-transition>
118 |             <v-btn v-if="stepNum !== 1" elevation="0" @click="stepNum -= 1">
119 |               上一步
120 |             </v-btn>
121 |           </v-fade-transition>
122 |           <v-btn elevation="0" :disabled="stepNum === 2 && agreementIsAgreed === false" color="primary" @click="stepNum === 1 ? validateForm : stepNum += 1">
123 |             下一步
124 |           </v-btn>
125 |         </div>
126 |       </v-col>
127 |     </v-slide-y-reverse-transition>
128 |   </v-app>
129 | </template>
130 | <script>
131 | export default {
132 |   name: 'CreateContainerCloudInstancePage',
133 |   layout: 'default',
134 |   data: () => ({
135 |     stepNum: 1,
136 |     agreementIsAgreed: false,
137 |     optionsData: {}
138 |   }),
139 |   head: () => ({
140 |     title: '创建容器云实例'
141 |   }),
142 |   methods: {
143 |     updateCost (data) {
144 |       this.$refs.currentCost.textContent = data
145 |     },
146 |     updateOptions (optionsObj) {
147 |       this.$data.optionsData = optionsObj
148 |     },
149 |     validateForm () {
150 |       this.$refs.createInstanceComponent.validateForm()
151 |     },
152 |     receiveValidateStatus (validationStatus) {
153 |       // To Be Done
154 |       this.$data.stepNum += 1
155 |     }
156 |   }
157 | }
158 | </script>
159 | <style>
160 | .sub-bar-title{
161 |   font-size: 18px;
162 |   margin-top: auto;
163 |   margin-bottom: auto !important;
164 |   margin-left: 10px;
165 | }
166 | .step-col{
167 |   margin-top: 10px;
168 |   max-height: 64px;
169 | }
170 | .step-row{
171 |   margin-left: 5px;
172 | }
173 | .step-row p{
174 |   margin: auto 10px;
175 |   font-weight: 600;
176 |   transition: all 0.5s;
177 | }
178 | .step-row .v-avatar{
179 |   margin-right: 5px;
180 |   margin-left: 10px;
181 |   transition: all 0.5s;
182 | }
183 | .step-row font{
184 |   transition: color 0.5s;
185 | }
186 | .main-col{
187 |   margin-left: 15px;
188 |   margin-right: 15px;
189 |   margin-bottom: 85px;
190 | }
191 | .container-create-instance-footer{
192 |   position: fixed;
193 |   bottom: 0;
194 |   width: 100%;
195 |   background-color: white;
196 |   height: 80px;
197 |   box-shadow: 0px -4px 12px 2px rgba(0, 0, 0, .1);
198 |   display: flex;
199 | }
200 | .container-create-instance-cost-value-content{
201 |   display: flex;
202 |   color: rgb(255, 115, 0);
203 | }
204 | .container-create-instance-cost-value-content p{
205 |   font-size: 8px;
206 |   margin-top: 12.5px;
207 | }
208 | .container-create-instance-cost-hint-content{
209 |   margin-top: 5px;
210 |   font-weight: 100;
211 |   margin-bottom: 0 !important;
212 |   font-size: 14px;
213 | }
214 | .container-create-instance-footer-step-manage-area-div{
215 |   position: absolute;
216 |   display: flex;
217 |   right: 0;
218 | }
219 | .container-create-instance-footer-step-manage-area-div .v-btn{
220 |   margin: 10px 20px;
221 | }
222 | .container-create-instance-footer-step-manage-area-div .v-input--checkbox{
223 |   margin: 12px 20px;
224 | }
225 | </style>
226 | 


--------------------------------------------------------------------------------
/pages/container/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div />
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: 'ContainerIndex',
 8 |   layout: 'container',
 9 |   data: () => ({
10 |     OwnedProductsMessage: '14',
11 |     OwnedProductsRunningMessage: '54',
12 |     OwnedDisksMessage: '19',
13 |     OwnedSnapshotMessage: '8'
14 |   }),
15 |   head: () => ({
16 |     title: '概览 - 容器云'
17 |   })
18 | }
19 | </script>
20 | 


--------------------------------------------------------------------------------
/pages/container/overview.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <p class="display-1 text--primary">
  4 |       容器云
  5 |     </p>
  6 |     <!-- 总览卡片 开始 -->
  7 |     <v-card>
  8 |       <v-card-title>
  9 |         <span>
 10 |           总览
 11 |         </span>
 12 |       </v-card-title>
 13 |       <v-card-subtitle>
 14 |         <span>
 15 |           您的玲行云端容器云实例总览
 16 |         </span>
 17 |       </v-card-subtitle>
 18 |       <v-card-text>
 19 |         <v-row>
 20 |           <!-- 卡片左列 -->
 21 |           <v-col
 22 |             cols="5"
 23 |           >
 24 |             <v-row>
 25 |               <v-btn text to="./productlist">
 26 |                 <v-icon>
 27 |                   mdi-server
 28 |                 </v-icon>
 29 |                 已开通实例({{ OwnedProductsMessage }})/运行中实例({{ OwnedProductsRunningMessage }})
 30 |               </v-btn>
 31 |             </v-row>
 32 |             <v-row>
 33 |               <v-btn text to="./cedlist">
 34 |                 <v-icon>
 35 |                   mdi-harddisk
 36 |                 </v-icon>
 37 |                 数据盘列表({{ OwnedDisksMessage }} 单位ATE)
 38 |               </v-btn>
 39 |             </v-row>
 40 |             <v-row>
 41 |               <v-btn text to="./snapshotlist">
 42 |                 <v-icon>
 43 |                   mdi-content-save
 44 |                 </v-icon>
 45 |                 我的快照({{ OwnedSnapshotMessage }} 个)
 46 |               </v-btn>
 47 |             </v-row>
 48 |             <v-row>
 49 |               <v-btn class="new-instance-btn" color="primary" to="./create/instance">
 50 |                 <v-icon>
 51 |                   mdi-plus-circle-outline
 52 |                 </v-icon>
 53 |                 &nbsp;新建实例
 54 |               </v-btn>
 55 |               &nbsp;&nbsp;&nbsp;
 56 |               <v-btn to="./productlist">
 57 |                 管理实例
 58 |               </v-btn>
 59 |             </v-row>
 60 |           </v-col>
 61 |           <!-- 卡片右列 -->
 62 |           <v-col>
 63 |             <v-row>
 64 |               <v-col>
 65 |                 <v-progress-circular rotate="-90" :value="(OwnedProductsRunningMessage / OwnedProductsMessage) * 100" size="150" width="10">
 66 |                   实例运行状态
 67 |                   <p><strong style="font-size: 24px;">{{ OwnedProductsRunningMessage }}</strong>/{{ OwnedProductsMessage }}</p>
 68 |                 </v-progress-circular>
 69 |               </v-col>
 70 |               <v-col>
 71 |                 <v-progress-circular rotate="-90" value="0" size="150" width="10">
 72 |                   数据用量
 73 |                   <p><strong style="font-size: 24px;">暂不支持</strong></p>
 74 |                 </v-progress-circular>
 75 |               </v-col>
 76 |             </v-row>
 77 |           </v-col>
 78 |         </v-row>
 79 |       </v-card-text>
 80 |     </v-card>
 81 |     <!-- 总览卡片 结束 -->
 82 |   </div>
 83 | </template>
 84 | 
 85 | <script>
 86 | export default {
 87 |   name: 'ContainerOverview',
 88 |   layout: 'container',
 89 |   data: () => ({
 90 |     OwnedProductsMessage: 54,
 91 |     OwnedProductsRunningMessage: 14,
 92 |     OwnedDisksMessage: 19,
 93 |     OwnedSnapshotMessage: 8
 94 |   }),
 95 |   head: () => ({
 96 |     title: '概览 - 容器云'
 97 |   })
 98 | }
 99 | </script>
100 | <style>
101 | .new-instance-btn {
102 |   margin-left: 10px;
103 | }
104 | 
105 | .v-progress-circular__info {
106 |   display: unset;
107 |   text-align: center;
108 | }
109 | </style>
110 | 


--------------------------------------------------------------------------------
/pages/container/productdetail/_id.vue:
--------------------------------------------------------------------------------
  1 | <!-- 实例详情页 传入id -->
  2 | <template>
  3 |   <div>
  4 |     <!-- 顶部工具条 开始 -->
  5 |     <v-toolbar dense>
  6 |       <v-btn icon>
  7 |         <v-icon>
  8 |           mdi-arrow-left
  9 |         </v-icon>
 10 |       </v-btn>
 11 |       <v-toolbar-title>
 12 |         {{ $route.params.id }}
 13 |       </v-toolbar-title>
 14 |       <v-btn text>
 15 |         <v-icon color="grey">
 16 |           mdi-cloud-outline
 17 |         </v-icon>
 18 |         地域: 璃月
 19 |       </v-btn>
 20 |       <v-btn text>
 21 |         <v-icon color="grey">
 22 |           mdi-earth
 23 |         </v-icon>
 24 |         IP: 0.0.0.0(共享型公网)
 25 |       </v-btn>
 26 |       <v-btn text>
 27 |         <v-icon color="grey">
 28 |           mdi-inbox
 29 |         </v-icon>
 30 |         实例类型：无双大黄瓜
 31 |       </v-btn>
 32 |       <v-spacer />
 33 |       <v-tooltip bottom>
 34 |         <template #activator="{ on, attrs }">
 35 |           <v-btn
 36 |             icon
 37 |             v-bind="attrs"
 38 |             v-on="on"
 39 |           >
 40 |             <v-icon color="green">
 41 |               mdi-power
 42 |             </v-icon>
 43 |           </v-btn>
 44 |         </template>
 45 |         <span>
 46 |           关机<br>(实例运行中)
 47 |         </span>
 48 |       </v-tooltip>
 49 |       <!---->
 50 |       <v-tooltip bottom>
 51 |         <template #activator="{ on, attrs }">
 52 |           <v-btn
 53 |             icon
 54 |             v-bind="attrs"
 55 |             v-on="on"
 56 |           >
 57 |             <v-icon>
 58 |               mdi-restart
 59 |             </v-icon>
 60 |           </v-btn>
 61 |         </template>
 62 |         <span>
 63 |           重载实例
 64 |         </span>
 65 |       </v-tooltip>
 66 |       <!---->
 67 |       <v-tooltip bottom>
 68 |         <template #activator="{ on, attrs }">
 69 |           <v-btn
 70 |             icon
 71 |             v-bind="attrs"
 72 |             v-on="on"
 73 |           >
 74 |             <v-icon>
 75 |               mdi-camera-plus
 76 |             </v-icon>
 77 |           </v-btn>
 78 |         </template>
 79 |         <span>
 80 |           快照实例
 81 |         </span>
 82 |       </v-tooltip>
 83 |       <!---->
 84 |       <v-menu offset-y>
 85 |         <template #activator="{ on, attrs }">
 86 |           <v-btn
 87 |             icon
 88 |             v-bind="attrs"
 89 |             v-on="on"
 90 |           >
 91 |             <v-icon>
 92 |               mdi-dots-horizontal
 93 |             </v-icon>
 94 |           </v-btn>
 95 |         </template>
 96 |         <v-list>
 97 |           <v-list-item
 98 |             to="/"
 99 |           >
100 |             <v-list-item-icon>
101 |               <v-icon>
102 |                 mdi-autorenew
103 |               </v-icon>
104 |             </v-list-item-icon>
105 |             <v-list-item-title>
106 |               续费
107 |             </v-list-item-title>
108 |           </v-list-item>
109 |           <!---->
110 |           <v-list-item
111 |             to="/"
112 |           >
113 |             <v-list-item-icon>
114 |               <v-icon class="red--text">
115 |                 mdi-database-refresh
116 |               </v-icon>
117 |             </v-list-item-icon>
118 |             <v-list-item-title class="red--text">
119 |               重装环境
120 |             </v-list-item-title>
121 |           </v-list-item>
122 |           <!---->
123 |           <v-list-item
124 |             to="/"
125 |           >
126 |             <v-list-item-icon>
127 |               <v-icon>
128 |                 mdi-archive-arrow-up
129 |               </v-icon>
130 |             </v-list-item-icon>
131 |             <v-list-item-title>
132 |               升配
133 |             </v-list-item-title>
134 |           </v-list-item>
135 |           <!---->
136 |           <v-list-item
137 |             to="/"
138 |           >
139 |             <v-list-item-icon>
140 |               <v-icon class="red--text">
141 |                 mdi-truck-cargo-container
142 |               </v-icon>
143 |             </v-list-item-icon>
144 |             <v-list-item-title class="red--text">
145 |               迁移可用区/更换IP
146 |             </v-list-item-title>
147 |           </v-list-item>
148 |           <!---->
149 |           <v-list-item
150 |             to="/"
151 |           >
152 |             <v-list-item-icon>
153 |               <v-icon class="red--text">
154 |                 mdi-trash-can-outline
155 |               </v-icon>
156 |             </v-list-item-icon>
157 |             <v-list-item-title class="red--text">
158 |               退订实例
159 |             </v-list-item-title>
160 |           </v-list-item>
161 |         </v-list>
162 |       </v-menu>
163 |     </v-toolbar>
164 |     <!-- 顶部工具条 结束 -->
165 |     <v-tabs>
166 |       <!-- 标签页 开始 -->
167 |       <v-tab
168 |         href="#home"
169 |       >
170 |         <v-icon>
171 |           mdi-home-variant-outline
172 |         </v-icon>
173 |         概览
174 |       </v-tab>
175 |       <v-tab>
176 |         <v-icon>
177 |           mdi-shield-alert-outline
178 |         </v-icon>
179 |         防水墙
180 |       </v-tab>
181 |       <v-tab>
182 |         <v-icon>
183 |           mdi-camera-outline
184 |         </v-icon>
185 |         快照
186 |       </v-tab>
187 |       <v-tab>
188 |         <v-icon>
189 |           mdi-finance
190 |         </v-icon>
191 |         状态
192 |       </v-tab>
193 |       <!-- 标签页 结束 -->
194 |       <!-- 标签内容 开始 -->
195 |       <!-- 总览 -->
196 |       <v-tab-item
197 |         value="home"
198 |         class="ma-2"
199 |       >
200 |         <v-row>
201 |           <v-col>
202 |             <v-card class="ma-2">
203 |               <v-card-title>
204 |                 <v-icon>
205 |                   mdi-information-outline
206 |                 </v-icon>
207 |                 主机信息
208 |               </v-card-title>
209 |               <v-card-text>
210 |                 <p>实例备注：我是一个一个一个测试文本</p>
211 |                 <p>外网地址：</p>
212 |               </v-card-text>
213 |             </v-card>
214 |           </v-col>
215 |           <v-col>
216 |             <v-card class="ma-2">
217 |               <v-card-title>
218 |                 <v-icon>
219 |                   mdi-chip
220 |                 </v-icon>
221 |                 计算资源
222 |               </v-card-title>
223 |               <v-card-text>
224 |                 <p>核心使用率：51% (51/100 性能点数)<v-progress-linear color="green" rounded value="51" /></p>
225 |                 <p>辅助核心使用率：0% (0/10 性能点数)<v-progress-linear color="green" rounded stream value="0" buffer-value="10" /></p>
226 |                 <p>您可开启辅助核心以在必要时增强实例计算能力。可能会产生额外费用。</p>
227 |               </v-card-text>
228 |             </v-card>
229 |             <v-card class="ma-2">
230 |               <v-card-title>
231 |                 <v-icon>
232 |                   mdi-memory
233 |                 </v-icon>
234 |                 内存资源
235 |               </v-card-title>
236 |               <v-card-text>
237 |                 <p>物理内存使用率：99% (113MB/114MB)<v-progress-linear color="red" rounded value="99" /></p>
238 |                 <p>辅助内存使用率：未启用<v-progress-linear color="grey" rounded stream value="0" buffer-value="0" /></p>
239 |                 <p>您可启用辅助内存允许突发内存占用。可能会产生额外费用。</p>
240 |               </v-card-text>
241 |             </v-card>
242 |             <v-card class="ma-2">
243 |               <v-card-title>
244 |                 <v-icon>
245 |                   mdi-harddisk
246 |                 </v-icon>
247 |                 存储资源
248 |               </v-card-title>
249 |               <v-card-text>
250 |                 <p>主硬盘使用率：1% (1GB/114TB ESSD)<v-progress-linear color="green" rounded value="1" /></p>
251 |               </v-card-text>
252 |             </v-card>
253 |           </v-col>
254 |         </v-row>
255 |       </v-tab-item>
256 |       <!-- 标签内容 结束 -->
257 |     </v-tabs>
258 |   </div>
259 | </template>
260 | 
261 | <script>
262 | export default {
263 |   data: () => ({})
264 | }
265 | </script>
266 | <style>
267 | .v-alert-arrearage {
268 |   font-size: 7px;
269 |   margin: 0 4px;
270 | }
271 | </style>
272 | 


--------------------------------------------------------------------------------
/pages/container/productlist.vue:
--------------------------------------------------------------------------------
 1 | <!-- 实例列表 -->
 2 | <template>
 3 |   <div>
 4 |     <p class="display-1 text--primary">
 5 |       我的实例
 6 |     </p>
 7 |     <!-- 工具栏 -->
 8 |     <v-toolbar>
 9 |       <v-toolbar-title>
10 |         轻松管理容器云
11 |       </v-toolbar-title>
12 |       <v-spacer />
13 |       <v-btn>
14 |         产品文档
15 |       </v-btn>
16 |       &nbsp;&nbsp;
17 |       <v-btn color="primary" to="./create/instance">
18 |         创建实例
19 |       </v-btn>
20 |     </v-toolbar>
21 |     <br>
22 |     <!-- 卡片组 开始 -->
23 |     <div>
24 |       <v-card width="40%">
25 |         <v-card-title>
26 |           <span>
27 |             实例名称
28 |           </span>
29 |           <v-chip
30 |             class="ma-2"
31 |             color="secondary"
32 |           >
33 |             MCSM 面板服
34 |           </v-chip>
35 |         </v-card-title>
36 |         <v-card-text>
37 |           <span>
38 |             1核心 1GB内存 5M宽带 20GB ECD
39 |           </span>
40 |         </v-card-text>
41 |         <v-card-actions>
42 |           <v-btn text color="primary">
43 |             管理实例
44 |           </v-btn>
45 |         </v-card-actions>
46 |       </v-card>
47 |     </div>
48 |     <!-- 卡片组 结束 -->
49 |   </div>
50 | </template>
51 | 
52 | <script>
53 | export default {
54 |   name: 'ContainerList',
55 |   title: '实例列表',
56 |   layout: 'container',
57 |   data: () => ({
58 |     OwnedProductsMessage: '14',
59 |     OwnedProductsRunningMessage: '54',
60 |     OwnedDisksMessage: '19',
61 |     OwnedSnapshotMessage: '8'
62 |   }),
63 |   head: () => ({
64 |     title: '实例列表 - MineCraft 服务器'
65 |   })
66 | }
67 | </script>
68 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app />
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: 'IndexPage',
 8 |   head: () => ({
 9 |     title: '首页'
10 |   })
11 | }
12 | </script>
13 | 


--------------------------------------------------------------------------------
/pages/redirect/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app />
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: 'RedirectPage',
 8 |   head: () => ({
 9 |     title: '正在跳转'
10 |   }),
11 |   mounted () {
12 |     const targetUrl = window.location.href.split('?')[1].split('=')[1]
13 |     const splitedUrlPatternLs = targetUrl.split('%2F')
14 |     let targetUrlFixed = ''
15 |     for (let i = 0; i < splitedUrlPatternLs.length; i++) {
16 |       targetUrlFixed += splitedUrlPatternLs[i] + '/'
17 |     }
18 |     window.location.href = 'https://' + targetUrlFixed
19 |   }
20 | }
21 | </script>
22 | 


--------------------------------------------------------------------------------
/pages/table/index.vue:
--------------------------------------------------------------------------------
 1 | <!-- 工作台首页 概览页 -->
 2 | <template>
 3 |   <div>
 4 |     <TableTabs />
 5 |     <!-- 比较硬核的空行 -->
 6 |     <br>
 7 |     <TableViewall />
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: 'IndexPage',
14 |   head: () => ({
15 |     title: '概览 - 工作台'
16 |   })
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Incloudify/consolify-frontend/68a2e034f0e503010a1b25553afbefab0df45eaf/static/favicon.ico


--------------------------------------------------------------------------------
/static/incloudify-logo-large.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Incloudify/consolify-frontend/68a2e034f0e503010a1b25553afbefab0df45eaf/static/incloudify-logo-large.png


--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your Vuex Store files.
 6 | Vuex Store option is implemented in the Nuxt.js framework.
 7 | 
 8 | Creating a file in this directory automatically activates the option in the framework.
 9 | 
10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
11 | 


--------------------------------------------------------------------------------
/utils/HttpUtils.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import SessionUtils from '~/utils/SessionUtils.vue'
  3 | export default {
  4 |   name: 'HttpUtils',
  5 |   mixins: [SessionUtils],
  6 |   methods: {
  7 |     sendPostToApi (requestApiURI, objectData, callbackFunc, checkCookie) {
  8 |       const postData = {}
  9 |       postData.data = objectData
 10 |       this.$axios.post('https://api.incloudify.com' + requestApiURI, postData)
 11 |         .then((data) => {
 12 |           const result = data.data
 13 |           result.isError = false
 14 |           if (checkCookie === undefined || checkCookie === true) {
 15 |             if (result.code === 3013) {
 16 |               this.deleteCookieValue('sessionId')
 17 |               this.checkIfSessionIdExist()
 18 |             } else {
 19 |               callbackFunc(result)
 20 |               return true
 21 |             }
 22 |           } else {
 23 |             callbackFunc(result)
 24 |             return true
 25 |           }
 26 |         }).catch((error) => {
 27 |           const errorObj = {}
 28 |           errorObj.isError = true
 29 |           if (error.message === 'Network Error') {
 30 |             errorObj.code = -1
 31 |             errorObj.message = '网络异常, 请稍后再试'
 32 |           } else if (error.response !== undefined) {
 33 |             if (error.response.status === 404) {
 34 |               errorObj.code = 404
 35 |               errorObj.message = '页面未找到'
 36 |               errorObj.data = error.response.data
 37 |             } else if (error.response.status === 403) {
 38 |               errorObj.code = 403
 39 |               errorObj.message = '您没有权限访问目标页面'
 40 |               errorObj.data = error.response.data
 41 |             } else if (error.response.status === 500) {
 42 |               errorObj.code = 500
 43 |               errorObj.message = '服务器内部错误, 请稍后再试'
 44 |               errorObj.data = error.response.data
 45 |             } else if (error.response.status === 502) {
 46 |               errorObj.code = 502
 47 |               errorObj.message = '网关错误, 请稍后再试'
 48 |               errorObj.data = error.response.data
 49 |             } else if (error.response.status === 503) {
 50 |               errorObj.code = 503
 51 |               errorObj.message = '服务不可用, 请稍后再试'
 52 |               errorObj.data = error.response.data
 53 |             } else if (error.response.status === 422) {
 54 |               errorObj.code = 422
 55 |               errorObj.message = '参数错误'
 56 |               errorObj.data = error.response.data
 57 |             } else {
 58 |               if (error.response.status !== undefined) {
 59 |                 errorObj.code = error.response.status
 60 |               } else {
 61 |                 errorObj.code = 0
 62 |                 errorObj.message = '网络异常, 请稍后再试'
 63 |               }
 64 |               errorObj.data = error.response.data
 65 |             }
 66 |           } else {
 67 |             errorObj.code = 0
 68 |             errorObj.message = '发生未知错误'
 69 |           }
 70 |           callbackFunc(errorObj)
 71 |           return false
 72 |         })
 73 |     },
 74 |     sendGetToApi (requestApiURI, extParam, callbackFunc, checkCookie) {
 75 |       this.$axios.get('https://api.incloudify.com' + requestApiURI + '?' + extParam)
 76 |         .then((data) => {
 77 |           const result = data.data
 78 |           if (checkCookie === undefined || checkCookie === true) {
 79 |             if (result.code === 3013) {
 80 |               this.deleteCookieValue('sessionId')
 81 |               this.checkIfSessionIdExist()
 82 |             } else {
 83 |               callbackFunc(result)
 84 |               return true
 85 |             }
 86 |           } else {
 87 |             callbackFunc(result)
 88 |             return true
 89 |           }
 90 |         }).catch((error) => {
 91 |           const errorObj = {}
 92 |           if (error.response.status === 500) {
 93 |             errorObj.code = 500
 94 |             errorObj.message = '服务器内部错误, 请稍后再试'
 95 |             errorObj.data = error.response.data
 96 |           }
 97 |           callbackFunc(errorObj)
 98 |           return false
 99 |         })
100 |     }
101 |   }
102 | }
103 | </script>
104 | 


--------------------------------------------------------------------------------
/utils/SessionUtils.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | export default {
  3 |   name: 'SessionUtils',
  4 |   methods: {
  5 |     getCookieValue (cookie, cookieName) {
  6 |       for (let i = 0; i < cookie.length; i++) {
  7 |         const splitedData = cookie[i].split('=')
  8 |         if (splitedData[0] === cookieName) {
  9 |           return splitedData[1]
 10 |         }
 11 |       }
 12 |       return null
 13 |     },
 14 |     editCookieValue (cookieName, targetValue, expiresTime) {
 15 |       if (expiresTime === undefined) {
 16 |         document.cookie = cookieName + '=' + targetValue + ';max-age=' + String(24 * 60 * 60) + ';path=/;'
 17 |       } else {
 18 |         document.cookie = cookieName + '=' + targetValue + ';max-age=' + String(expiresTime) + ';path=/;'
 19 |       }
 20 |       return true
 21 |     },
 22 |     deleteCookieValue (cookieName) {
 23 |       document.cookie = cookieName + '=;max-age=0;path=/;'
 24 |       return true
 25 |     },
 26 |     checkIfSessionIdExist (showSnackBar) {
 27 |       const cookie = document.cookie.split(';')
 28 |       const sessionId = this.getCookieValue(cookie, 'sessionId')
 29 |       const excludeList = ['/account/login', '/account/login/', '/account/register', '/account/register/', '/account/forgot', '/account/forgot/']
 30 |       if (sessionId === null) {
 31 |         if (!excludeList.includes(this.$route.path)) {
 32 |           this.$router.push('/account/login')
 33 |           if (showSnackBar === true || showSnackBar === undefined) {
 34 |             this.showSnackBar('warning', '请登录后继续', 2500, false)
 35 |           }
 36 |         }
 37 |         return false
 38 |       } else {
 39 |         return true
 40 |       }
 41 |     }
 42 |     /*
 43 |     validateSession (targetURI, callbackFunc) {
 44 |       const cookie = document.cookie.split(';')
 45 |       const sessionId = this.getCookieValue(cookie, 'sessionId')
 46 |       if (sessionId !== null) {
 47 |         let validateResult = false
 48 |         this.$axios.post('https://mock.apifox.cn/m1/1340156-0-c34c0a47/account/validateSession', '{"data": {"sessionId": "' + sessionId + '"}, "time": ' + String(Date.now()) + '}')
 49 |           .then((data) => {
 50 |             validateResult = data.data.code
 51 |             if (validateResult === -1000) {
 52 |               if (callbackFunc !== undefined) {
 53 |                 callbackFunc(true)
 54 |               }
 55 |               return true
 56 |             }
 57 |           }).catch((error) => {
 58 |             const errorObj = {}
 59 |             if (error.message === 'Network Error') {
 60 |               errorObj.code = -1
 61 |               this.showSnackBar('error', '网络连接超时, 请检查网络状态', 10000, false)
 62 |             } else if (error.response !== undefined) {
 63 |               if (error.response.status === 403) {
 64 |                 if (error.response.data.code === -1001) {
 65 |                   this.$router.push(targetURI)
 66 |                   this.showSnackBar('error', 'SessionID已过期, 请重新登录', 2500, true)
 67 |                   this.deleteCookieValue('sessionId')
 68 |                   return false
 69 |                 } else {
 70 |                   this.showSnackBar('error', '您的请求被拒绝', 3000, false)
 71 |                 }
 72 |               } else if (error.response.status === 500) {
 73 |                 this.showSnackBar('error', '服务器内部错误, 请稍后重试', 5000, true)
 74 |               } else {
 75 |                 this.showSnackBar('error', '发生未知错误 (' + error.response.status + ')', 7000, false)
 76 |               }
 77 |             } else {
 78 |               this.showSnackBar('error', '发生未知错误', 7000, false)
 79 |             }
 80 |             return errorObj
 81 |           })
 82 |       } else if (sessionId === null || sessionId === undefined) {
 83 |         window.location.replace(targetURI)
 84 |         return false
 85 |       }
 86 |     },
 87 |     reverseValidateSession (targetURI) {
 88 |       const cookie = document.cookie.split(';')
 89 |       const sessionId = this.getCookieValue(cookie, 'sessionId')
 90 |       if (sessionId !== null) {
 91 |         let validateResult = false
 92 |         this.$axios.post('https://mock.apifox.cn/m1/1340156-0-c34c0a47/account/validateSession', '{"data": {"sessionId": "' + sessionId + '"}, "time": ' + String(Date.now()) + '}')
 93 |           .then((data) => {
 94 |             validateResult = data.data.code
 95 |             if (validateResult === -1000) {
 96 |               window.location.replace(targetURI)
 97 |               return true
 98 |             }
 99 |           }).catch((error) => {
100 |             const errorObj = {}
101 |             if (error.message === 'Network Error') {
102 |               errorObj.code = -1
103 |               this.showSnackBar('error', '网络连接超时, 请检查网络状态', 10000, false)
104 |             } else if (error.response !== undefined) {
105 |               if (error.response.status === 403) {
106 |                 if (error.response.data.code === -1001) {
107 |                   return false
108 |                 } else {
109 |                   this.showSnackBar('error', '您的请求被拒绝', 3000, false)
110 |                 }
111 |               } else if (error.response.status === 500) {
112 |                 this.showSnackBar('error', '服务器内部错误, 请稍后重试', 5000, true)
113 |               } else {
114 |                 this.showSnackBar('error', '发生未知错误 (' + error.response.status + ')', 7000, false)
115 |               }
116 |             } else {
117 |               this.showSnackBar('error', '发生未知错误', 7000, false)
118 |             }
119 |             return errorObj
120 |           })
121 |       }
122 |     }
123 |     */
124 |   }
125 | }
126 | </script>
127 | 


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