登录页面，样式优化

xiangpei

2025-03-28 3c5470a29757afee973e652edddc35bfdd64d1ed

登录页面，样式优化

 src/App.vue

@@ -13,4 +13,7 @@
  font-size: 14px;
}

body {
  margin: 0;
}
</style>

 src/components/KnowledgeBase.vue

@@ -66,7 +66,12 @@
            </el-table-column>
            <el-table-column
                prop="loader"
                label="加载器"
                label="文档名"
                width="120">
            </el-table-column>
            <el-table-column
                prop="loader"
                label="文件加载器"
                width="120">
            </el-table-column>
            <el-table-column

 src/components/Login.vue

New file
@@ -0,0 +1,65 @@
<template>
  <div>
    <el-dialog
        title="登录"
        :visible.sync="open"
        width="400px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
        :center="true"
        :destroy-on-close="true"
        >
      <el-form ref="loginForm" :rules="loginFormRule" :model="loginForm" size="medium" :inline-message="true" style="width: 100%">
        <el-form-item prop="username">
          <el-input
              placeholder="账号"
              v-model="loginForm.username">
              <i slot="prefix" class="el-input__icon el-icon-user"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input
              placeholder="密码"
              show-password
              v-model="loginForm.pwd">
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="open = false" style="width: 100%;" size="medium">登录</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "LoginView",
  data() {
    return {
      open: false,
      loginForm: {
        username: '',
        pwd: ''
      },
      loginFormRule: {
        username: [
          { required: true, message: '请输入登录账号', trigger: 'blur' },
        ],
        pwd: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
        ]
      }
    }
  },
  methods: {

  }
}
</script>

<style scoped>

</style>

 src/components/SessionConfig.vue

@@ -51,7 +51,7 @@
        <el-checkbox v-model="config.returnMatchResult" @change="saveConfig">仅返回检索结果</el-checkbox>
      </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button @click="close" size="small">取 消</el-button>
        </span>
    </el-dialog>
  </div>

 src/views/Index.vue

@@ -1,5 +1,15 @@
<template>
  <div class="index">
    <div class="common-op">
      <el-dropdown @command="handleCommand" trigger="click">
        <span class="el-dropdown-link">
          张三<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="left">
      <div class="logo">
        <img style="width: 60px;height: 60px" src="@/assets/img/logo.png"/>
@@ -8,7 +18,7 @@
        <div class="add-chat">
          <i class="el-icon-plus"/>新建对话
        </div>
        <div :class="{tab: true, activeTab: activeTab === 2}" style="margin-top: 2px" @click="changeTab(2)">
        <div :class="{tab: true, activeTab: this.$router.currentRoute.path == '/knowledge'}" style="margin-top: 2px" @click="changeTab()">
          <svg t="1743057471863" class="icon" viewBox="0 0 1029 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3047" width="16" height="16">
            <path fill="grey" d="M32.2592 294.4l409.6 211.2c19.2 12.8 44.8 12.8 70.4 12.8s51.2-6.4 70.4-12.8l409.6-211.2c38.4-19.2 38.4-51.2 0-70.4l-409.6-211.2c-19.2-6.4-44.8-12.8-70.4-12.8s-51.2 6.4-70.4 12.8l-409.6 211.2c-38.4 19.2-38.4 51.2 0 70.4z m441.6-204.8c12.8-6.4 25.6-6.4 38.4-6.4s32 6.4 38.4 6.4l339.2 172.8-339.2 172.8c-6.4 6.4-19.2 6.4-38.4 6.4-12.8 0-32-6.4-38.4-6.4l-339.2-172.8 339.2-172.8z" p-id="3048"></path>
            <path fill="grey" d="M19.4592 550.4l403.2 204.8c25.6 12.8 57.6 19.2 89.6 19.2s64-6.4 89.6-19.2l403.2-204.8c12.8-6.4 25.6-32 12.8-51.2s-32-32-51.2-19.2l-403.2 204.8c-32 12.8-83.2 12.8-108.8 0l-403.2-204.8c-12.8-12.8-25.6-12.8-38.4 0-6.4 12.8-12.8 25.6-12.8 38.4 0 19.2 6.4 25.6 19.2 32z" p-id="3049"></path>
@@ -99,19 +109,21 @@
    >
        <el-input v-model="rename"/>
      <span slot="footer" class="dialog-footer">
          <el-button @click="renameSubmit">确定</el-button>
          <el-button @click="renameSubmit" size="medium">确定</el-button>
        </span>
    </el-dialog>
    <login/>
  </div>
</template>

<script>
import SessionConfig from "@/components/SessionConfig";
import Login from "@/components/Login";

export default {
  name: "IndexView",
  components: {
    SessionConfig
    SessionConfig, Login
  },
  data() {
    return {
@@ -138,7 +150,6 @@
        },
      ],
      fileList: [],
      activeTab: 0,
      activeSession: null,
      currentSession: null,
      activeSetting: 'util',
@@ -163,7 +174,7 @@
    }
  },
  mounted() {
    this.changeRoute(this.activeTab)

  },
  methods: {
    sessionChange(session, index) {
@@ -226,20 +237,11 @@
    tabSelect(tab, event) {
      console.log(tab, event)
    },
    changeTab(index) {
      if (index !== this.activeTab) {
        this.activeTab = index
        this.changeRoute(index)
      }
    },
    changeRoute(index) {
      console.log(this.$router.currentRoute.path, "路由")
      if ((index === 0 || index === 1) && this.$router.currentRoute.path !== "/chat") {
        this.$router.push("/chat")
      } else if (index === 2 && this.$router.currentRoute.path !== "/knowledge") {
    changeTab() {
      if (this.$router.currentRoute.path !== "/knowledge") {
        this.$router.push("/knowledge")
      }
    }
    },
  }
}
</script>
@@ -247,13 +249,16 @@
<style scoped>
.index {
  display: flex;
  position: relative;
}
.left {
  width: 250px;
  height: calc(100vh - 20px);
  min-height: 600px;
  min-height: calc(100vh - 20px);
  height: calc(100vh);
  background-color: #f3f3f3;
  padding: 0px 40px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.right {
  width: 1600px;
@@ -347,6 +352,11 @@
  cursor: pointer;
  background-color: #e8e8e8;
}
.common-op {
  position: absolute;
  top: 20px;
  right: 50px;
}
.setting {
  margin-top: 20px;
}
@@ -357,4 +367,7 @@
::v-deep(.el-upload-dragger) {
  width: 250px !important;
}
::v-deep(.el-dialog) {
  border-radius: 16px!important;
}
</style>