feat: add Frontend

9f2f72a3 · Kingcq · 9f2f72a3 · 9f2f72a3 · 9f2f72a3 · 9f2f72a3
Commit 9f2f72a3 authored 4 months ago by Kingcq
--- a/.editorconfig
+++ b/.editorconfig
+root = true
+[*.{js,vue}]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
\ No newline at end of file
--- a/.gitignore
+++ b/.gitignore
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+/cypress/videos/
+/cypress/screenshots/
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+*.tsbuildinfo
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint"
+  ]
+}
--- a/LICENSE
+++ b/LICENSE
--- a/README.md
+++ b/README.md
+# SQLDailyClockIn_Frontend
+This template should help get you started developing with Vue 3 in Vite.
+## Recommended IDE Setup
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+## Customize configuration
+See [Vite Configuration Reference](https://vite.dev/config/).
+## Project Setup
+```sh
+npm install
+```
+### Compile and Hot-Reload for Development
+```sh
+npm run dev
+```
+### Compile and Minify for Production
+```sh
+npm run build
+```
+### Lint with [ESLint](https://eslint.org/)
+```sh
+npm run lint
+```
--- a/eslint.config.js
+++ b/eslint.config.js
+import js from '@eslint/js'
+import pluginVue from 'eslint-plugin-vue'
+export default [
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{js,mjs,jsx,vue}'],
+  },
+  {
+    name: 'app/files-to-ignore',
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+  },
+  js.configs.recommended,
+  ...pluginVue.configs['flat/essential'],
+]
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/logo.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SQL 打卡 21 天</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/jsconfig.json
+++ b/jsconfig.json
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "sqldailyclockin-frontend",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --fix"
+  },
+  "dependencies": {
+    "axios": "^1.7.7",
+    "element-plus": "^2.8.6",
+    "md-editor-v3": "^4.21.0",
+    "vue": "^3.5.12",
+    "vue-router": "^4.4.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.12.0",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "eslint": "^9.12.0",
+    "eslint-plugin-vue": "^9.29.0",
+    "vite": "^5.4.8"
+  }
+}
--- a/public/logo.png
+++ b/public/logo.png
--- a/src/App.vue
+++ b/src/App.vue
+<script setup>
+import { RouterView } from 'vue-router'
+</script>
+<template>
+  <RouterView />
+</template>
--- a/src/assets/base.css
+++ b/src/assets/base.css
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+  --vt-c-indigo: #2c3e50;
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-black-soft);
+  --color-background-mute: var(--vt-c-black-mute);
+  --color-border: var(--vt-c-divider-dark-2);
+  --color-border-hover: var(--vt-c-divider-dark-1);
+  --color-heading: var(--vt-c-text-dark-1);
+  --color-text: var(--vt-c-text-dark-2);
+  --section-gap: 160px;
+}
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
--- a/src/assets/main.css
+++ b/src/assets/main.css
+@import './base.css';
+#app {
+  width: 100%;
+  max-width: 360px;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+  background-color: #181818;
+}
+body {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+}
+.el-form-item__label, .el-radio__label {
+  font-size: larger !important;
+  color: white;
+  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
+}
+.el-radio__inner {
+  height: 18px !important;
+  width: 18px !important;
+}
+.el-input, .el-input-number, .el-select, .el-button {
+  box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
+}
+.el-radio-button {
+  box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
+  margin-right: 2px;
+}
+.el-menu {
+  border-right: 1px solid #666666;
+}
+/* Ranking CSS design */
+.ranking-container {
+  display: flex;
+  flex-direction: column;
+}
+.ranking-main-container {
+  width: 100%;
+  min-height: calc(100vh - 120px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.ranking-title {
+  margin-top: 32px;
+  margin-bottom: 32px;
+  font-size: xx-large;
+  color: white;
+  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5)
+}
+.ranking-item {
+  width: 100%;
+  height: 64px;
+  flex: none;
+  align-items: center;
+  border-top: 1px solid rgba(255, 255, 255, 0.5);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+}
+.ranking-item-rank-container {
+  height: 100%;
+  flex: 3;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 24px;
+  text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
+}
+.ranking-item-userinfo {
+  height: 100%;
+  flex: 12;
+  flex-direction: column;
+  justify-content: center;
+  text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
+}
+.ranking-item-uname {
+  color: white;
+  font-size: 21px;
+}
+.ranking-item-team {
+  font-size: 12px;
+}
+.ranking-item-total-container {
+  height: 100%;
+  flex: 5;
+  align-items: center;
+  justify-content: end;
+  color: white;
+  font-size: 24px;
+  text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
+}
+.md-editor-preview {
+  padding-bottom: 30px !important;
+}
+.md-editor-preview,
+.md-editor-preview h1,
+.md-editor-preview h2,
+.md-editor-preview h3,
+.md-editor-preview h4,
+.md-editor-preview h5,
+.md-editor-preview h6,
+.md-editor-preview blockquote {
+  color: rgba(255, 255, 255, 0.85) !important;
+  text-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
+}
+.md-editor .arknights-theme,
+.md-editor-dark .arknights-theme {
+  --md-theme-code-inline-color: #f06;
+  --md-theme-code-inline-bg-color: var(--area);
+  --md-theme-code-block-color: var(--text);
+  --md-theme-code-block-bg-color: var(--area)
+}
+.arknights-theme code {
+  margin: 0 4px;
+  word-break: break-word;
+  overflow-x: auto;
+  position: relative;
+  font-size: .87em;
+  padding: .065em .4em
+}
+.arknights-theme .md-editor-code {
+  border: 1px solid var(--border)
+}
+.arknights-theme .md-editor-code:before {
+  top: -4px;
+  left: -4px;
+  width: 20px;
+  height: 20px;
+  content: "";
+  border-top: 8px solid var(--yellow);
+  border-left: 8px solid var(--yellow);
+  z-index: 10;
+  position: absolute
+}
+.arknights-theme .md-editor-code:after {
+  right: -4px;
+  bottom: -4px;
+  width: 20px;
+  height: 20px;
+  content: "";
+  z-index: 10;
+  border-right: 8px solid var(--blue);
+  border-bottom: 8px solid var(--blue);
+  position: absolute
+}
+.arknights-theme .md-editor-code pre {
+  margin: 0;
+  font-family: -apple-system,system-ui,Menlo,Monaco,Consolas,Courier New;
+  position: relative;
+  line-height: 1.75!important
+}
+.arknights-theme .md-editor-code pre code {
+  line-height: 1.75!important;
+  font-size: 14px;
+  padding: 26px 12px;
+  overflow-x: auto;
+  margin: 0;
+  word-break: normal;
+  display: block;
+  position: unset!important
+}
+.arknights-theme .md-editor-code pre:nth-child(odd):before {
+  border-top-color: var(--green);
+  border-left-color: var(--green)
+}
+.arknights-theme .md-editor-code pre:nth-child(odd):after {
+  border-right-color: var(--purple);
+  border-bottom-color: var(--purple)
+}
+.arknights-theme .code-tabs pre {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  border: none
+}
+.arknights-theme h2:before,
+.arknights-theme h4:before,
+.arknights-theme h5:before,
+.arknights-theme h6:before {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  background-image: url(data:image/png;base64,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);
+  animation: spin 2s linear 0s infinite
+}
+.arknights-theme h1,
+.arknights-theme h2,
+.arknights-theme h3,
+.arknights-theme h4,
+.arknights-theme h5,
+.arknights-theme h6 {
+  line-height: 1.5;
+  padding-bottom: 0;
+  margin-top: 35px;
+  margin-bottom: 10px;
+  letter-spacing: 1px;
+  color: var(--text);
+}
+.arknights-theme h2 {
+  position:relative;
+  font-size:24px;
+  padding:12px 36px;
+  margin:28px 0
+}
+.arknights-theme h2:before {
+  width:28px;
+  height:28px;
+  background-size:28px 28px
+}
+.arknights-theme h4 {
+  position:relative;
+  padding:4px 28px;
+  font-size:16px;
+  margin:22px 0
+}
+.arknights-theme h4:before {
+  width:20px;
+  height:20px;
+  background-size:20px 20px
+}
+.arknights-theme h5 {
+  position:relative;
+  padding:4px 26px;
+  font-size:15px;
+  margin:20px 0
+}
+.arknights-theme h5:before {
+  width:18px;
+  height:18px;
+  background-size:18px 18px
+}
+.arknights-theme h6 {
+  position:relative;
+  padding:4px 22px;
+  font-size:14px;
+  margin:16px 0
+}
+.arknights-theme h6:before {
+  width:16px;
+  height:16px;
+  background-size:16px 16px
+}
+.arknights-theme h1 {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
+  padding-bottom: 16px;
+}
+.arknights-theme h1,
+.arknights-theme h3 {
+  text-align: center;
+}
+.arknights-theme img {
+  max-width: 100%
+}
+.arknights-theme a {
+  margin: 0 4px;
+  text-decoration: none;
+  color: var(--blue);
+  transition: .3s;
+  display: inline-block;
+  vertical-align: bottom;
+  position: relative
+}
+.arknights-theme a:before {
+  content: "READ MORE +";
+  font-size: 15px;
+  font-family: -apple-system,system-ui,Menlo,Monaco,Consolas,Courier New;
+  font-weight: 400;
+  letter-spacing: 0px;
+  bottom: 90%;
+  width: 130px;
+  max-width: 0px;
+  color: #fff;
+  background-color: #1fb3ff;
+  position: absolute;
+  white-space: nowrap;
+  transition: .3s;
+  box-sizing: border-box;
+  pointer-events: none;
+  overflow: hidden
+}
+.arknights-theme a:after {
+  content: "";
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  border-bottom: 1px dashed var(--blue);
+  position: absolute
+}
+.arknights-theme a:hover:before,
+.arknights-theme a:active:before {
+  max-width: 130px;
+  padding-left: 14px
+}
+.arknights-theme ol,
+.arknights-theme ul {
+  padding-left: 28px
+}
+.arknights-theme ol li,
+.arknights-theme ul li {
+  line-height: 2em;
+  margin-bottom: 0;
+  list-style: inherit
+}
+.arknights-theme ol li .task-list-item,
+.arknights-theme ul li .task-list-item {
+  list-style: none
+}
+.arknights-theme ol li .task-list-item ul,
+.arknights-theme ol li .task-list-item ol,
+.arknights-theme ul li .task-list-item ul,
+.arknights-theme ul li .task-list-item ol {
+  margin-top: 0
+}
+.arknights-theme ol li::marker,
+.arknights-theme ul li::marker {
+  color: var(--blue)
+}
+.arknights-theme ol ul,
+.arknights-theme ol ol,
+.arknights-theme ul ul,
+.arknights-theme ul ol {
+  margin-top: 3px
+}
+.arknights-theme ol ul li,
+.arknights-theme ol ol li,
+.arknights-theme ul ul li,
+.arknights-theme ul ol li {
+  border-bottom: none
+}
+.arknights-theme ol li {
+  padding-left: 6px;
+  list-style: decimal-leading-zero
+}
+.arknights-theme p {
+  line-height: inherit;
+  margin-top: 22px;
+  margin-bottom: 22px
+}
+.arknights-theme blockquote {
+  padding: 12px 23px 2px;
+  border: 1px solid var(--border-blue);
+  background-color: var(--area);
+  margin: 22px 0;
+  position: relative
+}
+.arknights-theme blockquote>p {
+  margin: 10px 0
+}
+.arknights-theme blockquote:after {
+  content: "FROM";
+  top: 0;
+  left: 0;
+  width: 40px;
+  line-height: 1;
+  padding: 2px 0;
+  font-size: 12px;
+  color: #fff;
+  font-weight: lighter;
+  position: absolute;
+  background-color: var(--blue);
+  text-align: center;
+  pointer-events: none
+}
+.arknights-theme blockquote:before {
+  content: "CITATION";
+  top: 0;
+  left: 44px;
+  line-height: 1;
+  padding: 2px 0;
+  font-size: 12px;
+  color: var(--blue);
+  font-weight: lighter;
+  position: absolute;
+  pointer-events: none
+}
+.arknights-theme table {
+  width: 100%;
+  max-width: 100%;
+  font-size: 12px;
+  background-color: var(--table-bg-color);
+  overflow: auto;
+  border-collapse: collapse;
+  margin-bottom: 1em
+}
+.arknights-theme table tr:hover th,
+.arknights-theme table tr:hover td {
+  border-bottom: 1px solid var(--yellow)
+}
+.arknights-theme thead {
+  text-align: left
+}
+.arknights-theme tbody tr:nth-child(2n-1) {
+  background-color: #e0e0e01a
+}
+.arknights-theme th {
+  font-size: 1.2em;
+  border-bottom: 1px dashed var(--line)
+}
+.arknights-theme th,
+.arknights-theme td {
+  padding: 12px 7px;
+  line-height: 24px
+}
+.arknights-theme td {
+  min-width: 120px;
+  border-bottom: 1px solid var(--table-bg-color)
+}
+.md-editor .arknights-theme {
+  --bg-color: rgba(224, 224, 224, .1);
+  --blue: #37b2ff;
+  --yellow: #feea1e;
+  --orange: orange;
+  --purple: #e699e6;
+  --green: #a7ecad;
+  --text: #333;
+  --area: #f8f8f8;
+  --line: #adb0b8;
+  --border: rgb(245, 245, 247);
+  --border-blue: #37b2ff;
+  --table-bg-color: #fff
+}
+.md-editor-dark .arknights-theme {
+  --bg-color: rgba(224, 224, 224, .1);
+  --blue: #37b2ff;
+  --yellow: #feea1e;
+  --orange: orange;
+  --purple: #e699e6;
+  --green: #a7ecad;
+  --text: #c9d1d9;
+  --area: #1a1a1a;
+  --line: #75787e;
+  --border: rgb(78, 78, 78);
+  --border-blue: #2781b9;
+  --table-bg-color: var(--area)
+}
+.arknights-theme {
+  word-break: break-word;
+  line-height: 1.75;
+  font-weight: 400;
+  font-size: 15px;
+  overflow-x: hidden;
+  color: var(--text);
+  position: relative;
+  background-size: 20px 20px;
+  background-position: 50%
+}
+.arknights-theme hr {
+  height: 1px;
+  border: none;
+  margin-top: 32px;
+  margin-bottom: 32px;
+  background-size: 4px 1px;
+  background-image: linear-gradient(to left,var(--blue) 0%,var(--blue) 25%,transparent 50%)
+}
+.arknights-theme input[type=checkbox] {
+  position: relative
+}
+.arknights-theme input[type=checkbox]:before {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  content: "";
+  width: inherit;
+  height: inherit;
+  background: #f0f8ff;
+  border: 1px solid #add6ff;
+  border-radius: 2px;
+  box-sizing: border-box;
+  z-index: 1;
+  position: absolute
+}
+.arknights-theme input[type=checkbox]:checked:after {
+  content: "";
+  top: 10%;
+  left: 18%;
+  width: 90%;
+  height: 40%;
+  border-left: 2px solid var(--blue);
+  border-bottom: 2px solid var(--blue);
+  color: var(--blue);
+  z-index: 2;
+  transform: rotate(-45deg);
+  position: absolute
+}
+@media (max-width: 720px) {
+  .arknights-theme h1 {
+    font-size: 24px
+  }
+  .arknights-theme h2 {
+    font-size: 20px
+  }
+  .arknights-theme h3 {
+    font-size: 18px
+  }
+}
+[class*="arknights-theme md-editor-scrn"] span[rn-wrapper] {
+  top: 26px
+}
--- a/src/components/FootBar.vue
+++ b/src/components/FootBar.vue
+<template>
+  <el-footer class="footer-container">
+    <a href="https://www.nju.edu.cn/">
+      <img src="./icons/footer-logo.png" class="footer-img" />
+    </a>
+    <label class="footer-text">COPYRIGHT © KINGCQ</label>
+  </el-footer>
+</template>
+<style scoped>
+.footer-container {
+  height: 60px;
+  width: 100%;
+  background-color: #6f1066;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+.footer-text {
+  font-size: 16px;
+  color: white;
+  text-shadow: 0 0 12px white;
+  text-align: center;
+}
+.footer-img {
+  height: 45px;
+  width: auto;
+  margin-right: 16px;
+  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
+}
+</style>
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
+<script setup>
+import { getCurrentInstance } from 'vue'
+const { proxy } = getCurrentInstance()
+const jump = (route) => {
+  proxy.$router.push(route)
+}
+</script>
+<template>
+  <el-header class="navbar">
+    <a href="/" style="height: 37px; width: 37px;">
+      <img
+        src="./icons/nju-logo.png"
+        width="37px"
+        height="37px"
+        style="filter: drop-shadow(0 0 6px #6f106e)"
+      />
+    </a>
+    <el-button @click="jump('/register')" class="navbar-btn">即刻入榜</el-button>
+  </el-header>
+</template>
+<style scoped>
+.navbar {
+  height: 60px;
+  padding: 0 32px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #666666;
+  background-color: #181818;
+}
+.navbar-btn {
+  background-color: rgba(255, 255, 255, 0.3);
+  color: white;
+  border: none;
+  height: 3vh;
+  align-items: center;
+  border-radius: 5px;
+  height: 36px;
+  width: 85px;
+  padding: 0;
+  margin-left: auto;
+  margin-right: 0;
+  font-size: medium;
+  box-shadow: 0 0 16px rgba(255, 255, 255, 0.3);
+}
+</style>
--- a/src/components/icons/footer-logo.png
+++ b/src/components/icons/footer-logo.png
--- a/src/components/icons/nju-logo.png
+++ b/src/components/icons/nju-logo.png
--- a/src/main.js
+++ b/src/main.js
+import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
+import './assets/main.css'
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import ElementPlus from 'element-plus'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import axios from "@/utils/AxiosInstance"
+const app = createApp(App)
+app.use(ElementPlus, { size: "large", zIndex: 3000 });
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component);
+}
+app.use(router)
+app.mount('#app')
+app.config.globalProperties.$http = axios