Home Explore Help
Sign In
util
/
web-template-vue3-js
5
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

修改

zs 1 year ago
parent
4070952d91
commit
8078b0a6ae
19 changed files with 6516 additions and 411 deletions
Split View Show Diff Stats
  1. 15 1
      index.html
  2. 6353 0
      package-lock.json
  3. 2 1
      package.json
  4. BIN
      src/assets/images/login-bg-dark.jpg
  5. BIN
      src/assets/images/login-bg.jpg
  6. 0 44
      src/components/HelloWorld.vue
  7. 0 88
      src/components/TheWelcome.vue
  8. 0 86
      src/components/WelcomeItem.vue
  9. 0 7
      src/components/icons/IconCommunity.vue
  10. 0 7
      src/components/icons/IconDocumentation.vue
  11. 0 7
      src/components/icons/IconEcosystem.vue
  12. 0 7
      src/components/icons/IconSupport.vue
  13. 0 19
      src/components/icons/IconTooling.vue
  14. 0 1
      src/layout/parts/Header.vue
  15. 0 2
      src/layout/parts/Sidebar.vue
  16. 1 1
      src/layout/site.js
  17. 45 0
      src/store/modules/settings.js
  18. 0 49
      src/views/login/index.js
  19. 100 91
      src/views/login/index.vue

+ 15 - 1
index.html
View File 

@@ -7,7 +7,21 @@
 
     <title>Vite App</title>
 
   </head>
 
   <body>
 
-    <div id="app"></div>
 
+    <div id="app" class="app"></div>
 
     <script type="module" src="/src/main.js"></script>
 
   </body>
 
 </html>
 
+<style>
 
+  html,
 
+  body,
 
+  #app {
 
+    position: relative;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+</style>
 
+</body>
 
+</html>

File diff suppressed because it is too large
+ 6353 - 0
package-lock.json


+ 2 - 1
package.json
View File 

@@ -13,6 +13,7 @@
 
   "dependencies": {
 
     "@element-plus/icons-vue": "^2.3.1",
 
     "@vueuse/core": "^10.7.2",
 
+    "axios": "^1.6.7",
 
     "element-plus": "^2.5.6",
 
     "lodash-es": "^4.17.21",
 
     "pinia": "^2.1.7",
 
@@ -34,4 +35,4 @@
 
     "vite": "^5.0.11",
 
     "vite-plugin-inspect": "^0.8.3"
 
   }
 
-}
 
+}

BIN
src/assets/images/login-bg-dark.jpg
View File


BIN
src/assets/images/login-bg.jpg
View File


+ 0 - 44
src/components/HelloWorld.vue
View File 

@@ -1,44 +0,0 @@
 
-<script setup>
 
-defineProps({
 
-  msg: {
 
-    type: String,
 
-    required: true
 
-  }
 
-})
 
-</script>
 
-
 
-<template>
 
-  <div class="greetings">
 
-    <h1 class="green">{{ msg }}</h1>
 
-    <h3>
 
-      You’ve successfully created a project with
 
-      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
 
-      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
 
-    </h3>
 
-  </div>
 
-</template>
 
-
 
-<style scoped>
 
-h1 {
 
-  font-weight: 500;
 
-  font-size: 2.6rem;
 
-  position: relative;
 
-  top: -10px;
 
-}
 
-
 
-h3 {
 
-  font-size: 1.2rem;
 
-}
 
-
 
-.greetings h1,
 
-.greetings h3 {
 
-  text-align: center;
 
-}
 
-
 
-@media (min-width: 1024px) {
 
-  .greetings h1,
 
-  .greetings h3 {
 
-    text-align: left;
 
-  }
 
-}
 
-</style>

+ 0 - 88
src/components/TheWelcome.vue
View File 

@@ -1,88 +0,0 @@
 
-<script setup>
 
-import WelcomeItem from './WelcomeItem.vue'
 
-import DocumentationIcon from './icons/IconDocumentation.vue'
 
-import ToolingIcon from './icons/IconTooling.vue'
 
-import EcosystemIcon from './icons/IconEcosystem.vue'
 
-import CommunityIcon from './icons/IconCommunity.vue'
 
-import SupportIcon from './icons/IconSupport.vue'
 
-</script>
 
-
 
-<template>
 
-  <WelcomeItem>
 
-    <template #icon>
 
-      <DocumentationIcon />
 
-    </template>
 
-    <template #heading>Documentation</template>
 
-
 
-    Vue’s
 
-    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
 
-    provides you with all information you need to get started.
 
-  </WelcomeItem>
 
-
 
-  <WelcomeItem>
 
-    <template #icon>
 
-      <ToolingIcon />
 
-    </template>
 
-    <template #heading>Tooling</template>
 
-
 
-    This project is served and bundled with
 
-    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
 
-    recommended IDE setup is
 
-    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
 
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
 
-    you need to test your components and web pages, check out
 
-    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
 
-    <a href="https://on.cypress.io/component" target="_blank" rel="noopener"
 
-      >Cypress Component Testing</a
 
-    >.
 
-
 
-    <br />
 
-
 
-    More instructions are available in <code>README.md</code>.
 
-  </WelcomeItem>
 
-
 
-  <WelcomeItem>
 
-    <template #icon>
 
-      <EcosystemIcon />
 
-    </template>
 
-    <template #heading>Ecosystem</template>
 
-
 
-    Get official tools and libraries for your project:
 
-    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
 
-    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
 
-    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
 
-    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
 
-    you need more resources, we suggest paying
 
-    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
 
-    a visit.
 
-  </WelcomeItem>
 
-
 
-  <WelcomeItem>
 
-    <template #icon>
 
-      <CommunityIcon />
 
-    </template>
 
-    <template #heading>Community</template>
 
-
 
-    Got stuck? Ask your question on
 
-    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
 
-    Discord server, or
 
-    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
 
-      >StackOverflow</a
 
-    >. You should also subscribe to
 
-    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
 
-    the official
 
-    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
 
-    twitter account for latest news in the Vue world.
 
-  </WelcomeItem>
 
-
 
-  <WelcomeItem>
 
-    <template #icon>
 
-      <SupportIcon />
 
-    </template>
 
-    <template #heading>Support Vue</template>
 
-
 
-    As an independent project, Vue relies on community backing for its sustainability. You can help
 
-    us by
 
-    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
 
-  </WelcomeItem>
 
-</template>

+ 0 - 86
src/components/WelcomeItem.vue
View File 

@@ -1,86 +0,0 @@
 
-<template>
 
-  <div class="item">
 
-    <i>
 
-      <slot name="icon"></slot>
 
-    </i>
 
-    <div class="details">
 
-      <h3>
 
-        <slot name="heading"></slot>
 
-      </h3>
 
-      <slot></slot>
 
-    </div>
 
-  </div>
 
-</template>
 
-
 
-<style scoped>
 
-.item {
 
-  margin-top: 2rem;
 
-  display: flex;
 
-  position: relative;
 
-}
 
-
 
-.details {
 
-  flex: 1;
 
-  margin-left: 1rem;
 
-}
 
-
 
-i {
 
-  display: flex;
 
-  place-items: center;
 
-  place-content: center;
 
-  width: 32px;
 
-  height: 32px;
 
-  color: var(--color-text);
 
-}
 
-
 
-h3 {
 
-  font-size: 1.2rem;
 
-  font-weight: 500;
 
-  margin-bottom: 0.4rem;
 
-  color: var(--color-heading);
 
-}
 
-
 
-@media (min-width: 1024px) {
 
-  .item {
 
-    margin-top: 0;
 
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
 
-  }
 
-
 
-  i {
 
-    top: calc(50% - 25px);
 
-    left: -26px;
 
-    position: absolute;
 
-    border: 1px solid var(--color-border);
 
-    background: var(--color-background);
 
-    border-radius: 8px;
 
-    width: 50px;
 
-    height: 50px;
 
-  }
 
-
 
-  .item:before {
 
-    content: ' ';
 
-    border-left: 1px solid var(--color-border);
 
-    position: absolute;
 
-    left: 0;
 
-    bottom: calc(50% + 25px);
 
-    height: calc(50% - 25px);
 
-  }
 
-
 
-  .item:after {
 
-    content: ' ';
 
-    border-left: 1px solid var(--color-border);
 
-    position: absolute;
 
-    left: 0;
 
-    top: calc(50% + 25px);
 
-    height: calc(50% - 25px);
 
-  }
 
-
 
-  .item:first-of-type:before {
 
-    display: none;
 
-  }
 
-
 
-  .item:last-of-type:after {
 
-    display: none;
 
-  }
 
-}
 
-</style>

File diff suppressed because it is too large
+ 0 - 7
src/components/icons/IconCommunity.vue


File diff suppressed because it is too large
+ 0 - 7
src/components/icons/IconDocumentation.vue


File diff suppressed because it is too large
+ 0 - 7
src/components/icons/IconEcosystem.vue


+ 0 - 7
src/components/icons/IconSupport.vue
View File 

@@ -1,7 +0,0 @@
 
-<template>
 
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
 
-    <path
 
-      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
 
-    />
 
-  </svg>
 
-</template>

+ 0 - 19
src/components/icons/IconTooling.vue
View File 

@@ -1,19 +0,0 @@
 
-<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
 
-<template>
 
-  <svg
 
-    xmlns="http://www.w3.org/2000/svg"
 
-    xmlns:xlink="http://www.w3.org/1999/xlink"
 
-    aria-hidden="true"
 
-    role="img"
 
-    class="iconify iconify--mdi"
 
-    width="24"
 
-    height="24"
 
-    preserveAspectRatio="xMidYMid meet"
 
-    viewBox="0 0 24 24"
 
-  >
 
-    <path
 
-      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
 
-      fill="currentColor"
 
-    ></path>
 
-  </svg>
 
-</template>

+ 0 - 1
src/layout/parts/Header.vue
View File 

@@ -28,7 +28,6 @@
 
 <script setup>
 
 import { siteInfo } from '@/layout/site'
 
 import { UserStore } from '@/store/user'
 
-import { ref } from 'vue'
 
 const userStore = UserStore()
 
 const user = computed(() => userStore.user)
 
 let collapse = ref(false)

+ 0 - 2
src/layout/parts/Sidebar.vue
View File 

@@ -57,9 +57,7 @@
 
 
 <script setup>
 
 import { menuInfo } from '@/layout/site'
 
-import { ElMessage } from 'element-plus'
 
 import { UserStore } from '@/store/user'
 
-import { ref, watch } from 'vue'
 
 
 const route = useRoute()
 
 const userStore = UserStore()

+ 1 - 1
src/layout/site.js
View File 

@@ -1,7 +1,7 @@
 
 // 网站基本设置
 
 export const siteInfo = {
 
   display: false,
 
-  zhTitle: '食堂管理平台',
 
+  zhTitle: '新一代信息技术孵化平台',
 
   logo_url: '/src/assets/logo.png'
 
 }
 
 // 菜单设置

+ 45 - 0
src/store/modules/settings.js
View File 

@@ -0,0 +1,45 @@
 
+import { defineStore } from 'pinia'
 
+import defaultSettings from '@/settings'
 
+
 
+export const useSettingsStore = defineStore('setting', () => {
 
+  const title = defaultSettings.title
 
+  const version = defaultSettings.version
 
+  const tagsView = useStorage('tagsView', defaultSettings.tagsView)
 
+  const showSettings = ref(defaultSettings.showSettings)
 
+  const sidebarLogo = ref(defaultSettings.sidebarLogo)
 
+  const fixedHeader = useStorage('fixedHeader', defaultSettings.fixedHeader)
 
+  const layout = useStorage('layout', defaultSettings.layout)
 
+  const themeColor = useStorage('themeColor', defaultSettings.themeColor)
 
+  const theme = useStorage('theme', defaultSettings.theme)
 
+
 
+  // Whether to enable watermark
 
+  const watermark = useStorage('watermark', defaultSettings.watermark)
 
+
 
+  function changeSetting({ key, value }) {
 
+    const setting = key
 
+    if (setting !== undefined) {
 
+      setting.value = value
 
+      if (key === 'theme') {
 
+        if (value === 'dark') {
 
+          document.documentElement.classList.add('dark')
 
+        } else {
 
+          document.documentElement.classList.remove('dark')
 
+        }
 
+      }
 
+    }
 
+  }
 
+
 
+  return {
 
+    title,
 
+    version,
 
+    showSettings,
 
+    tagsView,
 
+    fixedHeader,
 
+    sidebarLogo,
 
+    layout,
 
+    themeColor,
 
+    changeSetting,
 
+    theme,
 
+    watermark
 
+  }
 
+})

+ 0 - 49
src/views/login/index.js
View File 

@@ -1,49 +0,0 @@
 
-import { ref, reactive } from 'vue'
 
-import { ElMessage } from 'element-plus'
 
-import router from '@/router'
 
-// 接口
 
-import { LoginStore } from '@/stores/login'
 
-const loginStore = LoginStore()
 
-
 
-// 表单
 
-/**
 
- * 表单对象
 
- */
 
-const formRef = ref()
 
-/**
 
- * 表单model
 
- */
 
-const form = ref({ type: 'Admin' })
 
-/**
 
- * 输入规则
 
- */
 
-const rules = reactive({
 
-  account: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
 
-  password: [{ required: true, message: '请输入账号密码', trigger: 'blur' }]
 
-})
 
-
 
-/**
 
- * 提交登录
 
- */
 
-const toSave = async (formEl) => {
 
-  if (!formEl) return
 
-  await formEl.validate((valid) => {
 
-    if (valid) {
 
-      toLogin(form.value)
 
-    } else {
 
-      console.log('error submit!')
 
-    }
 
-  })
 
-}
 
-const toLogin = async (data) => {
 
-  const res = await loginStore.login(data)
 
-  if (res.errcode == '0') {
 
-    ElMessage({ message: `登录成功`, type: 'success' })
 
-    localStorage.setItem('token', `${res.data}`)
 
-    // 路由
 
-    router.push({ path: '/' })
 
-  } else {
 
-    ElMessage({ message: `${res.errmsg}`, type: 'error' })
 
-  }
 
-}
 
-export { toSave, formRef, form, rules }

+ 100 - 91
src/views/login/index.vue
View File 

@@ -1,109 +1,118 @@
 
 <template>
 
-  <div id="index">
 
-    <el-row>
 
-      <el-col :span="24" class="main animate__animated animate__backInRight">
 
-        <el-col :span="24" class="one w_1200">
 
-          <el-col :span="24" class="one_1">{{ siteInfo.zhTitle }}</el-col>
 
-          <el-col :span="24" class="one_2">
 
-            <div class="login">
 
-              <el-col :span="24" class="login_1"> 管理登录 </el-col>
 
-              <el-col :span="24" class="login_2">
 
-                <el-col :span="24" class="form">
 
-                  <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
 
-                    <!-- <el-form-item>
 
-                      <el-radio-group v-model="form.type" style="padding-left: 15px">
 
-                        <el-radio label="SelfUser">个人用户</el-radio>
 
-                        <el-radio label="Unit">企业用户</el-radio>
 
-                        <el-radio label="Research">科研单位</el-radio>
 
-                        <el-radio label="Admin">管理员</el-radio>
 
-                      </el-radio-group>
 
-                    </el-form-item> -->
 
-                    <el-form-item label="" prop="account">
 
-                      <el-input v-model="form.account" placeholder="请输入登录账号">
 
-                        <template #prefix>
 
-                          <el-icon>
 
-                            <User />
 
-                          </el-icon>
 
-                        </template>
 
-                      </el-input>
 
-                    </el-form-item>
 
-                    <el-form-item label="" prop="password">
 
-                      <el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码">
 
-                        <template #prefix>
 
-                          <el-icon>
 
-                            <Unlock />
 
-                          </el-icon>
 
-                        </template>
 
-                      </el-input>
 
-                    </el-form-item>
 
-                    <el-col :span="24" class="btn">
 
-                      <el-button type="primary" @click="toSave(formRef)">提交登录</el-button>
 
-                    </el-col>
 
-                  </el-form>
 
-                </el-col>
 
-              </el-col>
 
-            </div>
 
-          </el-col>
 
-        </el-col>
 
-      </el-col>
 
-    </el-row>
 
+  <div class="login-container">
 
+    <!-- 登录表单 -->
 
+    <el-card class="card">
 
+      <div class="text">
 
+        <h2>{{ siteInfo.zhTitle }}</h2>
 
+      </div>
 
+      <el-form ref="loginFormRef" :model="loginData" :rules="loginRules" class="login-form">
 
+        <!-- 用户名 -->
 
+        <el-form-item prop="username">
 
+          <el-input v-model="loginData.username" size="large" placeholder="请输入登录账号">
 
+            <template #prefix>
 
+              <el-icon>
 
+                <User />
 
+              </el-icon>
 
+            </template>
 
+          </el-input>
 
+        </el-form-item>
 
+        <!-- 密码 -->
 
+        <el-form-item prop="password">
 
+          <el-input v-model="loginData.password" size="large" type="password" show-password placeholder="请输入登录密码">
 
+            <template #prefix>
 
+              <el-icon>
 
+                <Unlock />
 
+              </el-icon>
 
+            </template>
 
+          </el-input>
 
+        </el-form-item>
 
+        <!-- 登录按钮 -->
 
+        <el-button :loading="loading" type="primary" size="large" class="button" @click.prevent="handleLogin">{{ $t('login.login') }} </el-button>
 
+      </el-form>
 
+    </el-card>
 
   </div>
 
 </template>
 
 
-<script setup lang="ts">
 
-import { toSave, formRef, form, rules } from './index';
 
-import { siteInfo } from '@/layout/site';
 
+<script setup>
 
+import { siteInfo } from '@/layout/site'
 
+// 接口
 
+import { LoginStore } from '@/store/api/login'
 
+import { useRoute } from 'vue-router'
 
+
 
+const route = useRoute()
 
+const loginStore = LoginStore()
 
+const loading = ref(false) // 按钮loading
 
+const loginFormRef = ref({}) // 登录表单ref
 
+const loginData = ref({
 
+  username: 'admin',
 
+  password: '123456'
 
+})
 
+const loginRules = computed(() => {})
 
+/**
 
+ * 登录
 
+ */
 
+function handleLogin() {
 
+  loginFormRef.value.validate((valid) => {
 
+    if (valid) {
 
+      loading.value = true
 
+    }
 
+  })
 
+}
 
 </script>
 
 <style scoped lang="scss">
 
-.main {
 
+.login-container {
 
+  overflow-y: auto;
 
+  width: 100%;
 
+  height: 100%;
 
   display: flex;
 
-  flex-direction: column;
 
-  width: 100vw;
 
-  height: 100vh;
 
-  overflow: hidden;
 
-  background: url('@/assets/bglogin.jpg');
 
-  background-repeat: no-repeat;
 
-  background-size: 100% 100%;
 
+  align-items: center;
 
+  justify-content: center;
 
+  background: url('@/assets/images/login-bg.jpg') no-repeat center right;
 
+
 
+  .login-form {
 
+    padding: 30px 10px 0 10px;
 
+  }
 
+
 
+  .card {
 
+    width: 20%;
 
+    height: 50%;
 
+    border-radius: 15px;
 
+    padding: 20px;
 
+    box-shadow: var(--el-box-shadow-light);
 
 
-  .one {
 
-    .one_1 {
 
+    .text {
 
       text-align: center;
 
-      color: #ffffff;
 
-      font-size: 30px;
 
-      margin: 5% 0 40px 0;
 
     }
 
 
-    .one_2 {
 
-      text-align: center;
 
-      display: flex;
 
-      justify-content: center;
 
+    .button {
 
+      width: 100%;
 
+    }
 
+  }
 
+}
 
+
 
+.el-form-item {
 
+  background: var(--el-input-bg-color);
 
+  border: 1px solid var(--el-border-color);
 
+  border-radius: 5px;
 
+}
 
 
-      .login {
 
-        width: 500px;
 
-        height: 500px;
 
-        background-color: #ffffff;
 
-        border-radius: 5px;
 
-        padding: 10px;
 
+:deep(.el-input) {
 
+  padding: 5px;
 
 
-        .login_1 {
 
-          text-align: center;
 
-          margin: 30px 0;
 
-          font-size: 25px;
 
-          color: #409eff;
 
-          font-weight: 700;
 
-        }
 
+  .el-input__wrapper {
 
+    padding: 0;
 
+    background-color: transparent;
 
+    box-shadow: none;
 
 
-        .login_2 {
 
-          .type {
 
-            margin: 0 0 10px 0;
 
-          }
 
-        }
 
-      }
 
+    &.is-focus,
 
+    &:hover {
 
+      box-shadow: none !important;
 
     }
 
-  }
 
-}
 
 
-:deep(.el-input-group__append, .el-input-group__prepend) {
 
-  padding: 0;
 
+    input:-webkit-autofill {
 
+      /* 通过延时渲染背景色变相去除背景颜色 */
 
+      transition: background-color 1000s ease-in-out 0s;
 
+    }
 
+  }
 
 }
 
 </style>