第三方登录

package.json

@@ -55,6 +55,7 @@
     "unplugin-svg-component": "0.12.1",
     "unplugin-vue-components": "28.4.1",
     "vite": "6.2.3",
+    "vite-plugin-svg-icons": "2.0.1",
     "vite-svg-loader": "5.1.0",
     "vitest": "3.0.9",
     "vue-tsc": "2.2.8"

src/common/assets/iconfont/iconfont.css

@@ -0,0 +1,29 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4963823 */
+  /* Color fonts */
+  src:
+       url('//at.alicdn.com/t/c/font_4963823_az9ar7pc4xi.woff2?t=1751352287411') format('woff2'),
+       url('//at.alicdn.com/t/c/font_4963823_az9ar7pc4xi.woff?t=1751352287411') format('woff'),
+       url('//at.alicdn.com/t/c/font_4963823_az9ar7pc4xi.ttf?t=1751352287411') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-weibo1:before {
+  content: "\e636";
+}
+
+.icon-qq:before {
+  content: "\e66a";
+}
+
+
+.icon-weixin:before {
+  content: "\e607";
+}

src/main.ts

@@ -11,6 +11,7 @@ import "nprogress/nprogress.css";
 import "element-plus/theme-chalk/dark/css-vars.css";
 import "vxe-table/lib/style.css";
 import "@@/assets/styles/index.scss";
+import "@@/assets/iconfont/iconfont.css";
 import "virtual:uno.css";
 import md5 from 'js-md5';
 

src/pages/login/index.vue

@@ -12,8 +12,8 @@ import { Lock, User, Iphone, Promotion, Check } from "@element-plus/icons-vue";
 import { loginApi } from "./apis";
 import Owl from "./components/Owl.vue";
 import { useFocus } from "./composables/useFocus";
-import { reactive, ref ,inject } from "vue";
-const $md5 = inject('md5')
+import { reactive, ref, inject } from "vue";
+const $md5 = inject("md5");
 
 const router = useRouter();
 
@@ -156,7 +156,7 @@ async function handleUserLogin(formEl) {
   await formEl.validate((valid, fields) => {
     if (valid) {
       loading.value = true;
-      loginFormData.password = $md5(loginFormData.password)
+      loginFormData.password = $md5(loginFormData.password);
       loginApi(loginFormData)
         .then(({ data }) => {
           userStore.setToken(data.token);
@@ -355,6 +355,23 @@ watch(isDisabled, (newVal, oldVal) => {
           >
           <el-link type="primary" @click="forgetPwd()">忘记密码？ </el-link>
         </div>
+
+        <div class="login-thirdprty">
+          <div class="css-1vli2z"></div>
+          <div class="css-wna3id">其他方式登录</div>
+          <div class="css-1vli2z"></div>
+        </div>
+        <div class="iconAll">
+          <button>
+            <i class="iconfont icon-weixin"></i>
+          </button>
+          <button>
+            <i class="iconfont icon-qq"></i>
+          </button>
+          <button>
+            <i class="iconfont icon-weibo1"></i>
+          </button>
+        </div>
         <el-form
           v-if="isForgetPwd"
           ref="forgetFormRef"
@@ -537,6 +554,36 @@ watch(isDisabled, (newVal, oldVal) => {
           border-radius: 5px;
         }
       }
+      .login-thirdprty {
+        font-size: 14px;
+        margin-top: 20px;
+        display: flex;
+        color: #9196a1;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        .css-1vli2z {
+          width: 128px;
+          height: 0;
+          border-top: 1px solid #ebeced;
+        }
+        .css-wna3id {
+          margin: 0 20px;
+        }
+      }
+      .iconAll {
+        display: flex;
+        justify-content: space-evenly;
+        margin-top: 20px;
+        button {
+          border: none;
+          background-color: #fff;
+          cursor: pointer;
+          i {
+            font-size: 30px;
+          }
+        }
+      }
     }
   }
 }

types/auto/components.d.ts

@@ -18,6 +18,7 @@ declare module 'vue' {
     ElCard: typeof import('element-plus/es')['ElCard']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -38,6 +39,8 @@ declare module 'vue' {
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']

vite.config.ts

@@ -10,7 +10,8 @@ import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
 import Components from "unplugin-vue-components/vite"
 import { defineConfig, loadEnv } from "vite"
 import svgLoader from "vite-svg-loader"
-
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+import path from 'path'
 // Configuring Vite: https://cn.vite.dev/config
 export default defineConfig(({ mode }) => {
   const { VITE_PUBLIC_PATH } = loadEnv(mode, process.cwd(), "") as ImportMetaEnv
@@ -83,13 +84,13 @@ export default defineConfig(({ mode }) => {
       mode === "development"
         ? undefined
         : {
-            // 打包构建时移除 console.log
-            pure: ["console.log"],
-            // 打包构建时移除 debugger
-            drop: ["debugger"],
-            // 打包构建时移除所有注释
-            legalComments: "none"
-          },
+          // 打包构建时移除 console.log
+          pure: ["console.log"],
+          // 打包构建时移除 debugger
+          drop: ["debugger"],
+          // 打包构建时移除所有注释
+          legalComments: "none"
+        },
     // 插件配置
     plugins: [
       vue(),
@@ -131,7 +132,13 @@ export default defineConfig(({ mode }) => {
       Components({
         dts: "types/auto/components.d.ts",
         resolvers: [ElementPlusResolver()]
-      })
+      }),
+      // iconfont
+      createSvgIconsPlugin({
+        iconDirs: [path.resolve(process.cwd(), 'src/common/assets/icons')],
+        symbolId: 'icon-[dir]-[name]',
+      }),
+
     ],
     // Configuring Vitest: https://cn.vitest.dev/config
     test: {