修改页面

2025-07-14 17:59:02 +08:00
parent 812e3c4b0c
commit 22ae0e86c8
18 changed files with 543 additions and 531 deletions
@@ -1,6 +1,8 @@
@use '@styles/variables.scss' as *;

 .login {
+  background: url('@imgs/login/bgx.png');
+  background-size: 100% 100%;
  box-sizing: border-box;
  display: flex;
  width: 100%;
@@ -66,9 +68,11 @@

      .form {
        box-sizing: border-box;
-        height: 100%;
-        padding: 40px 0;
+        // height: 100%;
        widows: 100%;
+        padding: 40px 30px;
+        background: white;
+        border-radius: 18px;

        .title {
          margin-left: -2px;
@@ -103,7 +107,7 @@

        .drag-verify {
          position: relative;
-          padding-bottom: 20px;
+          // padding-bottom: 20px;
          margin-top: 25px;

          .drag-verify-content {
@@ -27,24 +27,6 @@
            </ElDropdownMenu>
          </template>
        </ElDropdown>
-        <ElDropdown @command="changeCompany" popper-class="langDropDownStyle">
-          <div class="btn language-btn">
-            <i class="iconfont-sys icon-language">&#xe8af;</i>公司
-          </div>
-          <template #dropdown>
-            <ElDropdownMenu>
-              <div v-for="cany in companyList" :key="cany.id" class="lang-btn-item">
-                <ElDropdownItem
-                  :command="cany.id"
-                  :class="{ 'is-selected': companyid === cany.value }"
-                >
-                  <span class="menu-txt">{{ cany.name }}</span>
-                  <i v-if="companyid === cany.id" class="iconfont-sys icon-check">&#xe621;</i>
-                </ElDropdownItem>
-              </div>
-            </ElDropdownMenu>
-          </template>
-        </ElDropdown>
      </div>
      <div class="header">
        <ArtLogo class="icon" />
@@ -58,9 +40,6 @@
            <span :class="{active: activeLoginType === 'qrcode'}" @click="activeLoginType = 'qrcode'">飞书登录</span>
          </div>
          <div v-if="activeLoginType === 'password'">
-            <!-- 原有账号密码登录表单内容 -->
-            <!-- <h3 class="title">{{ $t('login.title') }}</h3> -->
-            <!-- <p class="sub-title">{{ $t('login.subTitle') }}</p> -->
            <ElForm
              ref="formRef"
              :model="formData"
@@ -68,22 +47,10 @@
              @keyup.enter="handleSubmit"
              style="margin-top: 25px"
            >
-              <!-- <ElFormItem prop="account">
-                <ElSelect v-model="formData.account" @change="setupAccount" class="account-select">
-                  <ElOption
-                    v-for="account in accounts"
-                    :key="account.key"
-                    :label="account.label"
-                    :value="account.key"
-                  >
-                    <span>{{ account.label }}</span>
-                  </ElOption>
-                </ElSelect>
-              </ElFormItem> -->
-              <ElFormItem prop="username">
+              <ElFormItem prop="username" label="账号" >
                <ElInput :placeholder="$t('login.placeholder[0]')" v-model.trim="formData.username" />
              </ElFormItem>
-              <ElFormItem prop="password">
+              <ElFormItem prop="password" label="密码">
                <ElInput
                  :placeholder="$t('login.placeholder[1]')"
                  v-model.trim="formData.password"
@@ -93,12 +60,24 @@
                  show-password
                />
              </ElFormItem>
+              <ElFormItem prop="company" label="公司">
+                <ElSelect v-model="formData.company" class="account-select" @change="changeCompany">
+                  <ElOption
+                    v-for="account in companyList"
+                    :key="account.id"
+                    :label="account.name"
+                    :value="account.id"
+                  >
+                    <span>{{ account.name }}</span>
+                  </ElOption>
+                </ElSelect>
+              </ElFormItem> 
              <div class="drag-verify">
                <div class="drag-verify-content" :class="{ error: !isPassing && isClickPass }">
                  <ArtDragVerify
                    ref="dragVerify"
                    v-model:value="isPassing"
-                    :width="width < 500 ? 328 : 438"
+                    :width="width < 500 ? 260: 380"
                    :text="$t('login.sliderText')"
                    textColor="var(--art-gray-800)"
                    :successText="$t('login.sliderSuccessText')"
@@ -111,14 +90,13 @@
                  $t('login.placeholder[2]')
                }}</p>
              </div>
-
-              <div class="forget-password">
-                <ElCheckbox v-model="formData.rememberPassword">{{
-                  $t('login.rememberPwd')
-                }}</ElCheckbox>
-                <!-- <RouterLink :to="RoutesAlias.ForgetPassword">{{ $t('login.forgetPwd') }}</RouterLink> -->
+              <div class="login-bottom-row">
+                <p>
+                  {{ $t('login.noAccount') }}
+                  <RouterLink :to="RoutesAlias.Register" style="color:#5D87FF;">{{ $t('login.register') }}</RouterLink>
+                </p>
+                <ElCheckbox v-model="formData.rememberPassword">{{ $t('login.rememberPwd') }}</ElCheckbox>
              </div>
-
              <div style="margin-top: 30px">
                <ElButton
                  class="login-btn"
@@ -130,35 +108,30 @@
                  {{ $t('login.btnText') }}
                </ElButton>
              </div>
-
-              <div class="footer">
-                <p>
-                  {{ $t('login.noAccount') }}
-                  <RouterLink :to="RoutesAlias.Register">{{ $t('login.register') }}</RouterLink>
-                </p>
-              </div>
            </ElForm>
          </div>
          <div v-else>
-            <div  class="qrcode-login"  v-if="!iscompany">请先选择公司</div>
-            <div v-else>
-              <div  class="qrcode-login" v-if="isInFeishu" >
-              <img class="left-bg" src="@imgs/login/feishu.png" />
-              <ElButton
-                class="login-btn"
-                type="primary"
-                @click="feishuSubmit"
-                v-ripple
-              >
-              {{ $t('login.btnText') }}
-              </ElButton>
+            <ElForm
+              :model="formData"
+              style="margin-top: 25px"
+            >
+              <ElFormItem prop="company" label="公司">
+                <ElSelect v-model="formData.company" class="account-select" @change="changeCompany">
+                  <ElOption
+                    v-for="account in companyList"
+                    :key="account.id"
+                    :label="account.name"
+                    :value="account.id"
+                  >
+                    <span>{{ account.name }}</span>
+                  </ElOption>
+                </ElSelect>
+              </ElFormItem> 
+            </ElForm>
+            <div  class="qrcode-login" v-if="!isInFeishu">
+                <div id="login_container"></div>
+                <p class="qrcode-tip">请使用飞书App扫码登录</p>
            </div>
-            <div  class="qrcode-login" v-else>
-              <div id="login_container"></div>
-              <p class="qrcode-tip">请使用飞书App扫码登录</p>
-            </div>
-            </div>
-            
          </div>
        </div>
      </div>
@@ -178,6 +151,7 @@
  import { useI18n } from 'vue-i18n'
  import { HttpError } from '@/utils/http/error'
  import { onMounted, ref, watch, nextTick } from 'vue'
+  import { useRoute } from 'vue-router'

  defineOptions({ name: 'Login' })

@@ -185,40 +159,6 @@
  import { useSettingStore } from '@/store/modules/setting'
  import type { FormInstance, FormRules } from 'element-plus'

-  type AccountKey = 'super' | 'admin' | 'user'
-
-  export interface Account {
-    key: AccountKey
-    label: string
-    userName: string
-    password: string
-    roles: string[]
-  }
-
-  const accounts = computed<Account[]>(() => [
-    {
-      key: 'super',
-      label: t('login.roles.super'),
-      userName: 'Super',
-      password: '123456',
-      roles: ['R_SUPER']
-    },
-    {
-      key: 'admin',
-      label: t('login.roles.admin'),
-      userName: 'Admin',
-      password: '123456',
-      roles: ['R_ADMIN']
-    },
-    {
-      key: 'user',
-      label: t('login.roles.user'),
-      userName: 'User',
-      password: '123456',
-      roles: ['R_USER']
-    }
-  ])
-
  const settingStore = useSettingStore()
  const { isDark, systemThemeType } = storeToRefs(settingStore)

@@ -234,10 +174,15 @@
  const systemName = AppConfig.systemInfo.name
  const formRef = ref<FormInstance>()
  const companyid = ref('')
+  companyid.value = useUserStore().companyid
  const iscompany = ref(false)  
+  const { companyabbr } = useUserStore()
+   //获取公司 getCompanyList
+  const companyList = ref<any>()
  const feishuresponse=ref()
  const formData = reactive({
    account: '',
+    company: Number(useUserStore().companyid),
    username: '',
    password: '',
    rememberPassword: true
@@ -245,15 +190,57 @@

  const rules = computed<FormRules>(() => ({
    username: [{ required: true, message: t('login.placeholder[0]'), trigger: 'blur' }],
-    password: [{ required: true, message: t('login.placeholder[1]'), trigger: 'blur' }]
+    password: [{ required: true, message: t('login.placeholder[1]'), trigger: 'blur' }],
+    company: [{ required: true, message: t('login.placeholder[3]'), trigger: 'blur' }]
  }))

  const loading = ref(false)
  const { width } = useWindowSize()
+  const getcompanyList = async () => {
+    try {
+      // 这里调用获取品牌列表的接口
+      const response = await UserService.getCompanyList()
+      companyList.value = response || []
+    } catch (error) { }
+  }
+   // 切换语言
+   const { locale } = useI18n()
+
+  const changeLanguage = (lang: LanguageEnum) => {
+    if (locale.value === lang) return
+    locale.value = lang
+    userStore.setLanguage(lang)
+  }
+
+  const getfeishuAppList = async () => {
+    try {
+      // 这里调用获取品牌列表的接口
+      feishuresponse.value = await UserService.getfeishuAppList({ corp_id: companyid.value })
+      if(activeLoginType.value=='qrcode'){
+        feishulogin()
+      }
+      console.log(feishuresponse)
+    } catch (error) { }
+  }
+  //切换公司
+  
+  const changeCompany = (company: any) => {
+    // if (companyid.value === company) return
+    const companyt = companyList.value.find((c: any) => c.id === company)
+    companyid.value = company
+    iscompany.value = company
+    userStore.setCompany(company,companyt?.abbr)
+    getfeishuAppList()
+  }
+  if(companyabbr!=''){
+    iscompany.value = true
+    getfeishuAppList()
+  }
+ 
  const feishulogin = async () => {
    userStore.setLoginType('feishu')
    if (isInFeishu) {
-      
+      feishuSubmit()
      // 飞书特定的逻辑
    } else {
      // 普通浏览器的逻辑
@@ -392,46 +379,19 @@
      })
    }, 150)
  }
+  const route = useRoute()
+
  onMounted(() => {
    getcompanyList()
+    // 自动读取 query 参数并存入 userStore
+    const companyid = Array.isArray(route.query.corp_id) ? route.query.corp_id[0] : route.query.corp_id
+    const companyabbr = Array.isArray(route.query.corp_abbr) ? route.query.corp_abbr[0] : route.query.corp_abbr
+    if (companyid) {
+      userStore.setCompany(companyid as string, (companyabbr as string) || '')
+      formData.company = Number(companyid)
+    }
  })
-  // 切换语言
-  const { locale } = useI18n()
-
-  const changeLanguage = (lang: LanguageEnum) => {
-    if (locale.value === lang) return
-    locale.value = lang
-    userStore.setLanguage(lang)
-  }
-  //获取公司 getCompanyList
-  const companyList = ref<any>()
-  const getcompanyList = async () => {
-    try {
-      // 这里调用获取品牌列表的接口
-      const response = await UserService.getCompanyList()
-      companyList.value = response || []
-    } catch (error) { }
-  }
-  //切换公司
-  
-  const changeCompany = (company: any) => {
-    if (companyid.value === company) return
-    const companyt = companyList.value.find((c: any) => c.id === company)
-    companyid.value = company
-    iscompany.value = company
-    userStore.setCompany(company,companyt?.abbr)
-    getfeishuAppList()
-  }
-  const getfeishuAppList = async () => {
-    try {
-      // 这里调用获取品牌列表的接口
-      feishuresponse.value = await UserService.getfeishuAppList({ corp_id: companyid.value })
-      if(activeLoginType.value=='qrcode'){
-        feishulogin()
-      }
-      console.log(feishuresponse)
-    } catch (error) { }
-  }
+ 

  // 切换主题
  import { useTheme } from '@/composables/useTheme'
@@ -468,4 +428,11 @@
      color: #888;
    }
  }
+  .login-bottom-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14px;
+    // margin-top: 16px;
+  }
 </style>