fix: Merge branch 'dev' into dev-hub

.gitignore

@@ -11,6 +11,8 @@ node_modules
 dist
 dist-ssr
 *.local
+yarn.lock
+components.d.ts
 
 # Editor directories and files
 .vscode

components.d.ts

@@ -7,11 +7,9 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    ABadge: typeof import('ant-design-vue/es')['Badge']
     AButton: typeof import('ant-design-vue/es')['Button']
-    ACard: typeof import('ant-design-vue/es')['Card']
+    ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
-    ACol: typeof import('ant-design-vue/es')['Col']
+    ADivider: typeof import('ant-design-vue/es')['Divider']
-    ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
@@ -20,10 +18,12 @@ declare module '@vue/runtime-core' {
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     AModal: typeof import('ant-design-vue/es')['Modal']
     APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
+    ACard: typeof import('ant-design-vue/es')['Card']
+    ACol: typeof import('ant-design-vue/es')['Col']
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
+    ASpin: typeof import('ant-design-vue/es')['Spin']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
-    AUpload: typeof import('ant-design-vue/es')['Upload']
     BadgeStatus: typeof import('./src/components/BadgeStatus/index.vue')['default']
     CardBox: typeof import('./src/components/CardBox/index.vue')['default']
     GeoComponent: typeof import('./src/components/GeoComponent/index.vue')['default']

package.json

@@ -15,6 +15,7 @@
     "@vuemap/vue-amap": "^1.1.20",
     "ant-design-vue": "^3.2.15",
     "axios": "^1.2.1",
+    "js-cookie": "^3.0.1",
     "echarts": "^5.4.1",
     "less": "^4.1.3",
     "less-loader": "^11.1.0",

src/api/login.js

@@ -0,0 +1,15 @@
+import server from '@/utils/request'
+
+export const config = () => server.get(`/authorize/captcha/config`)
+
+export const code = () => server.get(`/authorize/captcha/image?width=130&height=30`)
+
+export const authLogin = (data) => server.post(`/authorize/login`, data)
+
+export const getInitSet = () => server.get(`/user/settings/init`)
+
+export const postInitSet = (data) => server.post(`/user/settings/init`, data)
+
+export const systemVersion = () => server.get(`/system/version`)
+
+export const bindInfo = () => server.get(`/application/sso/_all`)

src/components/Table/index.module.less

@@ -0,0 +1,45 @@
+.jtable-body {
+    width: 100%;
+    padding: 0 24px 24px;
+    background-color: white;
+    .jtable-body-header {
+        padding: 16px 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .jtable-body-header-right {
+            display: flex;
+            gap: 8px;
+            .jtable-setting-item {
+                color: rgba(0, 0, 0, 0.75);
+                font-size: 16px;
+                cursor: pointer;
+
+                &:hover {
+                    color: @primary-color-hover;
+                }
+
+                &.active {
+                    color: @primary-color-active;
+                }
+            }
+        }
+    }
+    .jtable-content {
+        .jtable-card {
+            .jtable-card-items {
+                display: grid;
+                grid-gap: 26px;
+                // grid-template-columns: repeat(4, 1fr);
+                .jtable-card-item {
+                    display: flex;
+                }
+            }
+        }
+    }
+    .jtable-pagination {
+        position: absolute;
+        right: 24px;
+        bottom: 24px;
+    }
+}   

src/components/Table/index.tsx

@@ -0,0 +1,163 @@
+import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
+import styles from './index.module.less'
+import { Space, Pagination, Table, Empty } from 'ant-design-vue'
+import type { TableProps } from 'ant-design-vue/es/table'
+enum ModelEnum {
+    TABLE = 'TABLE',
+    CARD = 'CARD',
+}
+
+export declare type RequestData = {
+    code: string;
+    result: {
+        data: any[] | undefined;
+        pageIndex: number;
+        pageSize: number;
+        total: number;
+    };
+    status: number;
+} & Record<string, any>;
+// interface ColumnType extends 
+
+interface JTableProps extends TableProps{
+    // columns?: ColumnsType<RecordType>;
+    request: (params: Record<string, any> & {
+        pageSize?: number;
+        pageIndex?: number;
+    }) => Promise<Partial<RequestData>>;
+    cardBodyClass?: string;
+}
+
+
+const JTable = defineComponent<JTableProps>({
+    name: 'JTable',
+    slots: [
+        'headerTitle', // 顶部左边插槽
+        'cardRender', // 卡片内容
+    ],
+    emits: [
+        'modelChange', // 切换卡片和表格
+    ],
+    setup(props: JTableProps, { slots, emit }){
+        const model = ref<keyof typeof ModelEnum>(ModelEnum.CARD); // 模式切换
+        const column = ref<number>(3);
+        console.log(props)
+        const dataSource = ref<any[]>([
+            {
+              key: '1',
+              name: '胡彦斌',
+              age: 32,
+              address: '西湖区湖底公园1号',
+            },
+            {
+              key: '2',
+              name: '胡彦祖1',
+              age: 42,
+              address: '西湖区湖底公园1号',
+            },
+            {
+                key: '3',
+                name: '胡彦斌',
+                age: 32,
+                address: '西湖区湖底公园1号',
+              },
+              {
+                key: '4',
+                name: '胡彦祖1',
+                age: 42,
+                address: '西湖区湖底公园1号',
+              },
+              {
+                key: '5',
+                name: '胡彦斌',
+                age: 32,
+                address: '西湖区湖底公园1号',
+              },
+              {
+                key: '6',
+                name: '胡彦祖1',
+                age: 42,
+                address: '西湖区湖底公园1号',
+              },
+        ])
+
+        onMounted(() => {
+
+        })
+        
+        return () => <div class={styles["jtable-body"]}>
+            <div class={styles["jtable-body-header"]}>
+                <div class={styles["jtable-body-header-left"]}>
+                    {/* 顶部左边插槽 */}
+                    {slots.headerTitle && slots.headerTitle()}
+                </div>
+                <div class={styles["jtable-body-header-right"]}>
+                    {/* <Space> */}
+                        <div class={[styles["jtable-setting-item"], ModelEnum.CARD === model.value ? styles['active'] : '']} onClick={() => {
+                            model.value = ModelEnum.CARD
+                        }}>
+                            <AppstoreOutlined />
+                        </div>
+                        <div class={[styles["jtable-setting-item"], ModelEnum.TABLE === model.value ? styles['active'] : '']} onClick={() => {
+                            model.value = ModelEnum.TABLE
+                        }}>
+                            <UnorderedListOutlined  />
+                        </div>
+                    {/* </Space> */}
+                </div>
+            </div>
+            {/* content */}
+            <div class={styles['jtable-content']}>
+            {
+                model.value === ModelEnum.CARD ?
+                <div class={styles['jtable-card']}>
+                    {
+                        dataSource.value.length ? 
+                        <div 
+                            class={styles['jtable-card-items']}
+                            style={{gridTemplateColumns: `repeat(${column.value}, 1fr)`}}
+                        >
+                            {
+                                dataSource.value.map(item => slots.cardRender ? 
+                                    <div class={[styles['jtable-card-item'], props.cardBodyClass]}>{slots.cardRender(item)}</div>
+                                    : null)
+                            }
+                        </div> : 
+                        <div><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></div>
+                    }
+                </div> :
+                <div>
+                    <Table
+                        dataSource={dataSource.value}
+                        columns={props.columns}
+                        pagination={false}
+                    />
+                </div>
+            }
+            </div>
+            {/* 分页 */}
+            {
+                dataSource.value.length && 
+                <div class={styles['jtable-pagination']}>
+                    <Pagination 
+                        size="small" 
+                        total={50}
+                        showTotal={(total) => {
+                            const min  = 1
+                            const max = 1
+                            return `第 ${min} - ${max} 条/总共 ${total} 条`
+                        }}
+                        onChange={() => {
+
+                        }}
+                        onShowSizeChange={() => {
+
+                        }}
+                    />
+                </div>
+            }
+        </div>
+    }
+})
+
+export default JTable

src/components/index.ts

@@ -1,12 +1,14 @@
 import type { App } from 'vue'
 import AIcon from './AIcon'
 import PermissionButton from './PermissionButton/index.vue'
+import JTable from './Table/index'
 import TitleComponent from "./TitleComponent/index.vue";
 
 export default  {
     install(app: App) {
         app.component('AIcon', AIcon)
         app.component('PermissionButton', PermissionButton)
+        app.component('JTable', JTable)
         app.component('TitleComponent', TitleComponent)
     }
 }

src/router/menu.ts

@@ -20,6 +20,10 @@ export default [
     // }
 
     // start: 测试用, 可删除
+    {
+        path: '/login',
+        component: () => import('@/views/user/Login/index.vue')
+    },
     {
         path: '/demo',
         component: () => import('@/views/demo/index.vue')
@@ -32,6 +36,10 @@ export default [
         path: '/iot/home',
         component: () => import('@/views/iot/home/index.vue')
     },
+    {
+        path: '/table',
+        component: () => import('@/views/table/index.vue')
+    },
     // end: 测试用, 可删除
 
     // link 运维管理

src/store/userInfo.ts

@@ -0,0 +1,42 @@
+import { defineStore } from 'pinia';
+import { authLogin } from '@/api/login';
+import { LocalStore } from '@/utils/comm';
+import { TOKEN_KEY } from '@/utils/variable';
+
+/**
+ * 用户信息
+ * @methods setUserInfos 设置用户信息
+ */
+export const useUserInfo = defineStore('userInfo', {
+    state: () => ({
+        userInfos: {
+            id: '',
+            username: '',
+            isAdmin: true,
+            currentAuthority: [],
+            expires: 0,
+            permissions: [],
+            roles: [],
+            token: '',
+            user: {},
+        },
+    }),
+    actions: {
+        login(userInfo: any) {
+            const username = userInfo.userName.trim();
+            const password = userInfo.password;
+            const verifyCode = userInfo.verifyCode;
+            return new Promise((resolve: any, reject: any) => {
+                authLogin({ username, password, verifyCode })
+                    .then((res: any) => {
+                        Object.assign(this.userInfos, res.result);
+                        LocalStore.set(TOKEN_KEY, res?.result.token);
+                        resolve(res);
+                    })
+                    .catch((error: any) => {
+                        reject(error);
+                    });
+            });
+        },
+    },
+});

src/utils/request.ts

@@ -162,7 +162,7 @@ request.interceptors.request.use(config => {
     // 让每个请求携带自定义 token 请根据实际情况自行修改
     const token = LocalStore.get(TOKEN_KEY)
     // const token = store.$state.tokenAlias
-    if (token) {
+    if (!token) {
         setTimeout(() => {
             router.replace({
                 path: LoginPath

src/utils/variable.ts

@@ -1,3 +1,5 @@
 export const BASE_API_PATH = import.meta.env.VITE_APP_BASE_API
 
-export const TOKEN_KEY = 'X-Access-Token'
+export const TOKEN_KEY = 'X-Access-Token'
+
+export const Version_Code = 'version_code'

src/views/account/Center/bind/index.vue

@@ -1,189 +1,259 @@
-<!-- 第三方账户绑定 -->
+<!-- 第三方账户绑定 -->
-<template>
+<template>
-    <div class="page-container">
+    <div class="page-container">
-        <div class="content">
+        <div class="content">
-            <div class="title">第三方账户绑定</div>
+            <div class="title">第三方账户绑定</div>
-            <!-- 已登录-绑定三方账号 -->
+            <!-- 已登录-绑定三方账号 -->
-            <template v-if="false">
+            <template v-if="false">
-                <div class="info">
+                <div class="info">
-                    <a-card style="width: 280px">
+                    <a-card style="width: 280px">
-                        <template #title>
+                        <template #title>
-                            <div class="info-head">
+                            <div class="info-head">
-                                <img :src="getImage('/bind/Rectangle.png')" />
+                                <img :src="getImage('/bind/Rectangle.png')" />
-                                <span>个人信息</span>
+                                <span>个人信息</span>
-                            </div>
+                            </div>
-                        </template>
+                        </template>
-                        <div class="info-body">
+                        <div class="info-body">
-                            <img :src="getImage('/bind/jetlinksLogo.png')" />
+                            <img :src="getImage('/bind/jetlinksLogo.png')" />
-                            <p>账号：admin</p>
+                            <p>账号：admin</p>
-                            <p>用户名：超级管理员</p>
+                            <p>用户名：超级管理员</p>
-                        </div>
+                        </div>
-                    </a-card>
+                    </a-card>
-                    <img :src="getImage('/bind/Vector.png')" />
+                    <img :src="getImage('/bind/Vector.png')" />
-                    <a-card style="width: 280px">
+                    <a-card style="width: 280px">
-                        <template #title>
+                        <template #title>
-                            <div class="info-head">
+                            <div class="info-head">
-                                <img :src="getImage('/bind/Rectangle.png')" />
+                                <img :src="getImage('/bind/Rectangle.png')" />
-                                <span>三方账户信息</span>
+                                <span>三方账户信息</span>
-                            </div>
+                            </div>
-                        </template>
+                        </template>
-                        <div class="info-body">
+                        <div class="info-body">
-                            <img :src="getImage('/bind/wechat-webapp.png')" />
+                            <img :src="getImage('/bind/wechat-webapp.png')" />
-                            <p>用户名：-</p>
+                            <p>用户名：-</p>
-                            <p>名称：微信昵称</p>
+                            <p>名称：微信昵称</p>
-                        </div>
+                        </div>
-                    </a-card>
+                    </a-card>
-                </div>
+                </div>
-                <div class="btn">
+                <div class="btn">
-                    <a-button type="primary">立即绑定</a-button>
+                    <a-button type="primary">立即绑定</a-button>
-                </div>
+                </div>
-            </template>
+            </template>
-            <!-- 未登录-绑定三方账号 -->
+            <!-- 未登录-绑定三方账号 -->
-            <template v-else>
+            <template v-else>
-                <div class="not-login">
+                <div class="not-login">
-                    <div class="logo">
+                    <div class="logo">
-                        <img :src="getImage('/bind/jetlinksLogo.png')" />
+                        <img :src="getImage('/bind/jetlinksLogo.png')" />
-                        <img
+                        <img
-                            class="arrow"
+                            class="arrow"
-                            :src="getImage('/bind/Vector.png')"
+                            :src="getImage('/bind/Vector.png')"
-                        />
+                        />
-                        <img :src="getImage('/bind/wechat-webapp.png')" />
+                        <img :src="getImage('/bind/wechat-webapp.png')" />
-                    </div>
+                    </div>
-                    <div class="desc">
+                    <div class="desc">
-                        你已通过微信授权,完善以下登录信息即可以完成绑定
+                        你已通过微信授权,完善以下登录信息即可以完成绑定
-                    </div>
+                    </div>
-                    <div class="login-form">
+                    <div class="login-form">
-                        <a-form layout="vertical" :model="formData">
+                        <a-form layout="vertical">
-                            <a-form-item label="账户">
+                            <a-form-item
-                                <a-input
+                                label="账户"
-                                    v-model:value="formData.username"
+                                v-bind="validateInfos.username"
-                                    placeholder="请输入账户"
+                            >
-                                />
+                                <a-input
-                            </a-form-item>
+                                    v-model:value="formData.username"
-                            <a-form-item label="密码">
+                                    placeholder="请输入账户"
-                                <a-input-password
+                                />
-                                    v-model:value="formData.password"
+                            </a-form-item>
-                                    placeholder="请输入密码"
+                            <a-form-item
-                                />
+                                label="密码"
-                            </a-form-item>
+                                v-bind="validateInfos.password"
-                            <a-form-item label="验证码">
+                            >
-                                <a-input
+                                <a-input-password
-                                    v-model:value="formData.captcha"
+                                    v-model:value="formData.password"
-                                    placeholder="请输入验证码"
+                                    placeholder="请输入密码"
-                                >
+                                />
-                                    <template #addonAfter>图形验证码</template>
+                            </a-form-item>
-                                </a-input>
+                            <a-form-item
-                            </a-form-item>
+                                label="验证码"
-                            <a-form-item>
+                                v-bind="validateInfos.captcha"
-                                <a-button type="primary" style="width: 100%">
+                            >
-                                    登录并绑定账户
+                                <a-input
-                                </a-button>
+                                    v-model:value="formData.captcha"
-                            </a-form-item>
+                                    placeholder="请输入验证码"
-                        </a-form>
+                                >
-                    </div>
+                                    <template #addonAfter>
-                </div>
+                                        <span style="cursor: pointer">
-            </template>
+                                            图形验证码
-        </div>
+                                        </span>
-    </div>
+                                    </template>
-</template>
+                                </a-input>
-
+                            </a-form-item>
-<script setup lang="ts">
+                            <a-form-item>
-import { getImage } from '@/utils/comm';
+                                <a-button
-
+                                    type="primary"
-interface formData {
+                                    @click="handleSubmit"
-    username: string;
+                                    style="width: 100%"
-    password: string;
+                                >
-    captcha: string;
+                                    登录并绑定账户
-}
+                                </a-button>
-const formData = ref<formData>({
+                            </a-form-item>
-    username: '',
+                        </a-form>
-    password: '',
+                    </div>
-    captcha: '',
+                </div>
-});
+            </template>
-</script>
+        </div>
-
+    </div>
-<style lang="less" scoped>
+</template>
-.page-container {
+
-    width: 100%;
+<script setup lang="ts">
-    height: 100vh;
+import { getImage } from '@/utils/comm';
-    background: url(/images/bind/bindPage.png) 0% 0% / 100% 100% no-repeat;
+import { Form } from 'ant-design-vue';
-    display: flex;
+
-    align-items: center;
+const useForm = Form.useForm;
-    justify-content: center;
+
-    .content {
+interface formData {
-        box-sizing: border-box;
+    username: string;
-        width: 850px;
+    password: string;
-        min-height: 510px;
+    captcha: string;
-        background: #fff;
+}
-        border: 1px solid #e0e4e8;
+const formData = ref<formData>({
-        border-radius: 2px;
+    username: '',
-        .title {
+    password: '',
-            margin: 30px 0;
+    captcha: '',
-            color: #0f1222;
+});
-            font-weight: 400;
+const formRules = ref({
-            font-size: 20px;
+    username: [
-            font-family: 'PingFang SC';
+        {
-            font-style: normal;
+            required: true,
-            line-height: 25px;
+            message: '请输入账户',
-            text-align: center;
+        },
-        }
+    ],
-        // 已登录-绑定三方账号
+    password: [
-        .info {
+        {
-            display: flex;
+            required: true,
-            align-items: center;
+            message: '请输入密码',
-            justify-content: center;
+        },
-            gap: 20px;
+    ],
-            &-head {
+    captcha: [
-                display: flex;
+        {
-                align-items: baseline;
+            required: true,
-                gap: 10px;
+            message: '请输入验证码',
-            }
+        },
-            &-body {
+    ],
-                display: flex;
+});
-                flex-direction: column;
+
-                align-items: center;
+const { resetFields, validate, validateInfos } = useForm(
-                gap: 10px;
+    formData.value,
-                img {
+    formRules.value,
-                    width: 70px;
+);
-                    height: 70px;
+
-                }
+/**
-            }
+ * 登录并绑定账户
-        }
+ */
-        .btn {
+const handleSubmit = () => {
-            display: flex;
+    validate()
-            justify-content: center;
+        .then(() => {
-            margin-top: 30px;
+            console.log('toRaw:', toRaw(formData.value));
-        }
+            console.log('formData.value:', formData.value);
-
+        })
-        // 未登录
+        .catch((err) => {
-        .not-login {
+            console.log('error', err);
-            display: flex;
+        });
-            flex-direction: column;
+};
-            align-items: center;
+</script>
-            .logo {
+
-                display: flex;
+<style lang="less" scoped>
-                align-items: center;
+:deep(
-                gap: 20px;
+        .ant-form-item-label
-                img {
+            > label.ant-form-item-required:not(
-                    width: 50px;
+                .ant-form-item-required-mark-optional
-                    height: 50px;
+            )::before
-                }
+    ) {
-                .arrow {
+    display: none;
-                    width: 15px;
+}
-                    height: 15px;
+:deep(.ant-form-item-label > label) {
-                }
+    font-weight: bold;
-            }
+}
-            .desc {
+.page-container {
-                margin-top: 30px;
+    width: 100%;
-                margin-bottom: 30px;
+    height: 100vh;
-                font-size: 14px;
+    background: url(/images/bind/bindPage.png) 0% 0% / 100% 100% no-repeat;
-                font-family: 'PingFang SC';
+    display: flex;
-                font-style: normal;
+    align-items: center;
-                line-height: 14px;
+    justify-content: center;
-                opacity: 0.75;
+    .content {
-                mix-blend-mode: normal;
+        box-sizing: border-box;
-            }
+        width: 850px;
-        }
+        min-height: 510px;
-    }
+        background: #fff;
-}
+        border: 1px solid #e0e4e8;
-</style>
+        border-radius: 2px;
+        .title {
+            margin: 30px 0;
+            color: #0f1222;
+            font-weight: 400;
+            font-size: 20px;
+            font-family: 'PingFang SC';
+            font-style: normal;
+            line-height: 25px;
+            text-align: center;
+        }
+        // 已登录-绑定三方账号
+        .info {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 20px;
+            &-head {
+                display: flex;
+                align-items: baseline;
+                gap: 10px;
+            }
+            &-body {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 10px;
+                img {
+                    width: 70px;
+                    height: 70px;
+                }
+            }
+        }
+        .btn {
+            display: flex;
+            justify-content: center;
+            margin-top: 30px;
+        }
+
+        // 未登录
+        .not-login {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            .logo {
+                display: flex;
+                align-items: center;
+                gap: 20px;
+                img {
+                    width: 50px;
+                    height: 50px;
+                }
+                .arrow {
+                    width: 15px;
+                    height: 15px;
+                }
+            }
+            .desc {
+                margin-top: 30px;
+                margin-bottom: 30px;
+                font-size: 14px;
+                font-family: 'PingFang SC';
+                font-style: normal;
+                line-height: 14px;
+                opacity: 0.75;
+                mix-blend-mode: normal;
+            }
+        }
+    }
+}
+</style>

src/views/table/index.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="box">
+        <JTable 
+            :columns="[
+                {
+                    title: '姓名',
+                    dataIndex: 'name',
+                    key: 'name',
+                },
+                {
+                    title: '年龄',
+                    dataIndex: 'age',
+                    key: 'age',
+                },
+                {
+                    title: '住址',
+                    dataIndex: 'address',
+                    key: 'address',
+                }
+            ]"
+        >
+            <template #headerTitle>
+                <a-button type="primary">新增</a-button>
+            </template>
+            <template #cardRender="slotProps">
+                {{slotProps.name}}
+            </template>
+        </JTable>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { post } from "@/utils/request";
+// :request="post('/device-product/_query', {})"
+</script>
+
+
+<style lang="less" scoped>
+.box {
+    padding: 20px;
+    background: #f0f2f5;
+}
+</style>
+

src/views/user/Login/index.vue

@@ -0,0 +1,491 @@
+<template>
+    <div>
+        <a-spin :spinning="loading" :delay="500">
+            <div class="container">
+                <div class="left">
+                    <img
+                        style="width: 100%; height: 100%"
+                        :src="getImage('/login.png')"
+                    />
+                </div>
+                <div class="right">
+                    <div class="lang" data-lang=""></div>
+                    <div class="content">
+                        <div class="top">
+                            <div class="header">
+                                <!-- <link to="/"> -->
+                                <img
+                                    alt="logo"
+                                    class="logo"
+                                    :src="getImage('/logo.png')"
+                                />
+                                <!-- </link> -->
+                            </div>
+                            <div class="desc">物联网平台</div>
+                            <div class="main">
+                                <a-form
+                                    layout="vertical"
+                                    :model="form"
+                                    class="login-form"
+                                    @finish="onFinish"
+                                >
+                                    <a-form-item
+                                        label="账号"
+                                        name="username"
+                                        :rules="[
+                                            {
+                                                required: true,
+                                                message: '请输入账号!',
+                                            },
+                                        ]"
+                                    >
+                                        <a-input
+                                            v-model:value="form.username"
+                                            placeholder="请输入账号"
+                                            :maxlength="64"
+                                        ></a-input>
+                                    </a-form-item>
+                                    <a-form-item
+                                        label="密码"
+                                        name="password"
+                                        :rules="[
+                                            {
+                                                required: true,
+                                                message: '请输入密码!',
+                                            },
+                                        ]"
+                                    >
+                                        <a-input-password
+                                            v-model:value="form.password"
+                                            placeholder="请输入密码"
+                                            :maxlength="64"
+                                        ></a-input-password>
+                                    </a-form-item>
+                                    <a-form-item
+                                        v-if="codeConfig"
+                                        class="verifyCode"
+                                        label="验证码"
+                                        name="verifyCode"
+                                        :rules="[
+                                            {
+                                                required: true,
+                                                message: '请输入验证码!',
+                                            },
+                                        ]"
+                                    >
+                                        <a-input
+                                            class="login-code-input"
+                                            v-model:value="form.verifyCode"
+                                            autocomplete="off"
+                                            :maxlength="64"
+                                            placeholder="请输入验证码"
+                                        ></a-input>
+                                        <div class="login-code">
+                                            <img
+                                                :src="codeUrl"
+                                                @click="getCode()"
+                                                class="login-code-img"
+                                            />
+                                        </div>
+                                    </a-form-item>
+                                    <a-form-item
+                                        name="remember"
+                                        style="text-align: left"
+                                    >
+                                        <a-checkbox
+                                            v-model:checked="form.remember"
+                                            >记住密码</a-checkbox
+                                        >
+                                    </a-form-item>
+                                    <a-form-item>
+                                        <a-button
+                                            :loading="loading"
+                                            type="primary"
+                                            html-type="submit"
+                                            class="login-form-button"
+                                            block
+                                        >
+                                            登录
+                                        </a-button>
+                                    </a-form-item>
+                                </a-form>
+                                <div style="margin-top: 20">
+                                    <a-divider plain style="height: 12">
+                                        <div
+                                            style="color: '#807676d9', fontSize: 12"
+                                        >
+                                            其他方式登录
+                                        </div>
+                                    </a-divider>
+                                    <div
+                                        style="position: 'relative', bottom: '10px'"
+                                        v-for="(item, index) in bindings"
+                                        :key="index"
+                                    >
+                                        <Button type="link" @Click="handle">
+                                            <img
+                                                style="width: 32, height: 33"
+                                                :alt="item.name"
+                                                :src="
+                                                    iconMap.get(
+                                                        item.provider,
+                                                    ) || defaultImg
+                                                "
+                                            />
+                                        </Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bottom">
+                        <div class="view">
+                            JETLINKS团队全新力作可视化大屏系统
+                        </div>
+                        <div class="url">
+                            <div style="height: 33px">
+                                <img :src="viewLogo" />
+                            </div>
+                            <a
+                                href="https://view.jetlinks.cn/"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                体验DEMO
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </a-spin>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { getImage } from '@/utils/comm';
+import {
+    config,
+    code,
+    authLogin,
+    getInitSet,
+    systemVersion,
+    bindInfo,
+} from '@/api/login';
+import Cookies from 'js-cookie';
+import { useUserInfo } from '@/store/userInfo';
+import { LocalStore } from '@/utils/comm';
+import { TOKEN_KEY, Version_Code } from '@/utils/variable';
+
+const store = useUserInfo();
+const router = useRouter();
+const bgImage = getImage('/logo.png');
+const viewLogo = getImage('/view-logo.png');
+
+const LoginWarpStyle = reactive({
+    backgroundImage: `url(${bgImage})`,
+});
+
+const screenWidth = ref(document.body.clientWidth);
+const screenHeight = ref(document.body.clientHeight);
+
+const form = reactive({
+    username: '',
+    password: '',
+    remember: false,
+    expires: 3600000,
+    verifyCode: '',
+    verifyKey: '',
+});
+
+const codeUrl = ref('');
+const codeConfig = ref(false);
+
+const loading = ref(false);
+const bindings = ref<any[]>();
+
+const onFinish = async () => {
+    form.remember
+        ? Cookies.set('user', encodeURIComponent(JSON.stringify(form)), {
+              expires: 7,
+          })
+        : Cookies.remove('user');
+    Cookies.set('username', form.username, { expires: 30 });
+    try {
+        loading.value = true;
+        const res: any = await authLogin(form);
+        if (res.status === 200) {
+            store.$patch({
+                ...res.result,
+                username: form.username,
+            });
+            LocalStore.set(TOKEN_KEY, res?.result.token);
+            const resp: any = await getInitSet();
+            if (resp.status === 200) {
+                router.push('/demo');
+            }
+        }
+    } catch (error) {
+        loading.value = false;
+    }
+};
+
+const getCode = async () => {
+    const configRes: any = await config();
+    if (!configRes.success || (configRes.success && !configRes.result.enabled))
+        return;
+
+    codeConfig.value = true;
+    const res: any = await code();
+    if (res.success) {
+        codeUrl.value = res.result.base64;
+        form.verifyKey = res.result.key;
+    }
+};
+
+const getCookie = () => {
+    // form.username = Cookies.get('username');
+    if (!Cookies.get('user')) return;
+    const user = JSON.parse(decodeURIComponent(Cookies.get('user')));
+    form.username = user.username;
+    form.password = user.password;
+    form.remember = user.remember || false;
+};
+
+const getOpen = () => {
+    systemVersion().then((res: any) => {
+        if (res.status === 200 && res.result) {
+            LocalStore.set(Version_Code, res.result.edition);
+            if (res.result.edition !== 'community') {
+                bindInfo().then((res: any) => {
+                    if (res.status === 200) {
+                        bindings.value = res.result;
+                    }
+                });
+            }
+        }
+    });
+};
+
+const screenRotation = (width: number, height: number) => {
+    LoginWarpStyle.backgroundImage = `url(${bgImage})`;
+};
+
+window.onresize = () => {
+    return (() => {
+        screenWidth.value = document.body.clientWidth;
+        screenHeight.value = document.body.clientHeight;
+    })();
+};
+
+watch(
+    [() => screenWidth.value, () => screenHeight.value],
+    (value) => {
+        screenRotation(value[0], value[1]);
+    },
+    { deep: true },
+);
+
+getOpen();
+getCode();
+getCookie();
+screenRotation(screenWidth.value, screenHeight.value);
+</script>
+
+<style scoped lang="less">
+@import 'ant-design-vue/es/style/themes/default.less';
+
+.container {
+    display: flex;
+    height: 100vh;
+    overflow: auto;
+    background: @layout-body-background;
+
+    .left {
+        width: 73%;
+        height: 100%;
+    }
+
+    .right {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        width: 27%;
+        background: #fff;
+
+        :deep(.ant-layout-footer) {
+            background: #fff;
+        }
+
+        .lang {
+            width: 100%;
+            height: 40px;
+            line-height: 44px;
+            text-align: right;
+
+            :global(.ant-dropdown-trigger) {
+                margin-right: 24px;
+            }
+        }
+
+        .content {
+            display: flex;
+            flex-direction: row-reverse;
+            justify-content: center;
+            padding: 0 0 15% 0;
+
+            .top {
+                width: 100%;
+                text-align: center;
+
+                .header {
+                    height: 44px;
+                    line-height: 44px;
+
+                    a {
+                        text-decoration: none;
+                    }
+
+                    .logo {
+                        height: 44px;
+                        margin-right: 16px;
+                        vertical-align: top;
+                    }
+
+                    .title {
+                        position: relative;
+                        top: 2px;
+                        color: @heading-color;
+                        font-weight: 600;
+                        font-size: 33px;
+                        font-family: Avenir, 'Helvetica Neue', Arial, Helvetica,
+                            sans-serif;
+                    }
+                }
+
+                .desc {
+                    margin-top: 12px;
+                    margin-bottom: 40px;
+                    // color: @heading-color;
+                    color: rgb(0 0 0 / 70%);
+                    font-weight: 600;
+                    font-size: 22px;
+                    font-family: Avenir, 'Helvetica Neue', Arial, Helvetica,
+                        sans-serif;
+                }
+
+                .main {
+                    width: 70%;
+                    margin: 60px auto 0;
+
+                    @media screen and (max-width: @screen-sm) {
+                        width: 95%;
+                        max-width: 328px;
+                    }
+
+                    // ::v-deep {
+                    //     .@{ant-prefix}-tabs-nav-list {
+                    //         margin: auto;
+                    //         font-size: 16px;
+                    //     }
+
+                    //     // .ant-formily-item-size-large .ant-formily-item-help {
+                    //     //     text-align: left;
+                    //     // }
+                    // }
+
+                    .icon {
+                        margin-left: 16px;
+                        color: rgba(0, 0, 0, 0.2);
+                        font-size: 24px;
+                        vertical-align: middle;
+                        cursor: pointer;
+                        transition: color 0.3s;
+
+                        &:hover {
+                            color: @primary-color;
+                        }
+                    }
+
+                    .other {
+                        margin-top: 24px;
+                        line-height: 22px;
+                        text-align: left;
+
+                        .register {
+                            float: right;
+                        }
+                    }
+
+                    .prefixIcon {
+                        color: @primary-color;
+                        font-size: @font-size-base;
+                    }
+
+                    .remember {
+                        display: flex;
+                        flex-direction: row;
+                        margin-bottom: 30px;
+                    }
+                }
+            }
+        }
+    }
+
+    .bottom {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 11%;
+        border-top: 1px solid #e0e4e8;
+
+        .view {
+            width: 247px;
+            height: 20px;
+            margin-right: 10%;
+            margin-bottom: 10px;
+            padding-top: 2px;
+            color: rgba(0, 0, 0, 0.65);
+            font-size: 14px;
+            font-family: 'PingFang SC';
+        }
+
+        .url {
+            display: flex;
+            align-items: center;
+            margin-right: 10%;
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+
+            a {
+                position: relative;
+                left: 60px;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+                padding: 2px 7px;
+                line-height: 20px;
+                border: 1px solid #2f54eb;
+                border-radius: 2px;
+            }
+        }
+    }
+}
+
+@media (min-width: @screen-md-min) {
+    .container {
+        //background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
+        background-repeat: no-repeat;
+        background-position: center 110px;
+        background-size: 100%;
+    }
+
+    .content {
+        padding: 32px 0 24px;
+    }
+}
+</style>

vite.config.ts

@@ -76,9 +76,10 @@ export default defineConfig(({ mode}) => {
               [env.VITE_APP_BASE_API]: {
                   // target: 'http://192.168.33.22:8800',
                   // target: 'http://192.168.32.244:8881',
-                  target: 'http://47.112.135.104:5096', // opcua
+                //   target: 'http://47.112.135.104:5096', // opcua
+                  target: 'http://47.108.63.174:8845', // 测试
                   changeOrigin: true,
-                  rewrite: (path) => path.replace('^'+env.VITE_APP_BASE_API, '')
+                  rewrite: (path) => path.replace(/^\/api/, '')
               }
           }
       },