初始化仓库
This commit is contained in:
tao
10
src/App.vue
Normal file
10
src/App.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<a-config-provider :locale="zhCN">
|
||||
<router-view />
|
||||
</a-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import zhCN from 'ant-design-vue/es/locale/zh_CN';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
</script>
|
||||
8
src/api/common/model.d.ts
vendored
Normal file
8
src/api/common/model.d.ts
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
export interface ApiResponse<T = any> {
|
||||
code?: number;
|
||||
msg?: string;
|
||||
data?: T;
|
||||
rows?: T[];
|
||||
total?: number;
|
||||
token?: string;
|
||||
}
|
||||
83
src/api/request.ts
Normal file
83
src/api/request.ts
Normal file
@@ -0,0 +1,83 @@
|
||||
import axios from 'axios';
|
||||
import router from '@/router';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { Modal, notification } from 'ant-design-vue';
|
||||
import type { AxiosRequestConfig } from "axios";
|
||||
import type { ApiResponse } from "@/api/common/model";
|
||||
|
||||
const errCodeMap: { [key: string]: string } = {
|
||||
'403': '当前操作没有权限',
|
||||
'404': '访问资源不存在',
|
||||
'default': '系统未知错误，请反馈给管理员'
|
||||
};
|
||||
|
||||
// 创建axios实例
|
||||
const service = axios.create({
|
||||
baseURL: import.meta.env.VITE_APP_BASE_API,
|
||||
timeout: 10000,
|
||||
});
|
||||
|
||||
// 请求拦截器
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
config.headers = config.headers || {};
|
||||
config.headers['Accept-Language'] = 'zh-CN';
|
||||
|
||||
const token = getToken();
|
||||
if (token) {
|
||||
config.headers['Authorization'] = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
},
|
||||
error => {
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// 响应拦截器
|
||||
service.interceptors.response.use(
|
||||
response => {
|
||||
// console.log(response);
|
||||
const code = response.data.code || 200;
|
||||
const data = response.data;
|
||||
|
||||
switch (code) {
|
||||
case 200:
|
||||
return data ?? response;
|
||||
case 401:
|
||||
Modal.error({
|
||||
title: '系统提示',
|
||||
content: '登录状态已过期，请重新登录',
|
||||
onOk: () => {
|
||||
router.push('/login')
|
||||
}
|
||||
})
|
||||
return Promise.reject(data);
|
||||
default:
|
||||
const errMsg = errCodeMap[code] || data.msg || errCodeMap['default'];
|
||||
notification.error({
|
||||
message: '请求错误',
|
||||
description: errMsg,
|
||||
});
|
||||
return Promise.reject(data);
|
||||
}
|
||||
},
|
||||
error => {
|
||||
error.message = error.code === "ECONNABORTED" ? '请求超时，请稍后重试' : error.message;
|
||||
|
||||
// 网络/服务器错误统一处理
|
||||
notification.error({
|
||||
message: "网络错误",
|
||||
description: error.message,
|
||||
});
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// 类型检查
|
||||
function request<T = any>(config: AxiosRequestConfig): Promise<ApiResponse<T>> {
|
||||
return service(config) as unknown as Promise<ApiResponse<T>>;
|
||||
}
|
||||
|
||||
export default request;
|
||||
// export default service;
|
||||
19
src/api/system/index.ts
Normal file
19
src/api/system/index.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import request from '../request'
|
||||
import type { LoginInfo } from './model';
|
||||
|
||||
// 用户登录
|
||||
export function login(data: LoginInfo) {
|
||||
return request({
|
||||
url: '/login',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 获取验证码
|
||||
export function getCaptcha() {
|
||||
return request({
|
||||
url: '/captchaImage',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
6
src/api/system/model.d.ts
vendored
Normal file
6
src/api/system/model.d.ts
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
export interface LoginInfo {
|
||||
username: string
|
||||
password: string
|
||||
uuid: string
|
||||
code: string
|
||||
}
|
||||
9
src/assets/styles/_ant-design.scss
Normal file
9
src/assets/styles/_ant-design.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
@use './variables' as *;
|
||||
|
||||
// 解决外部图标无法居中问题
|
||||
.ant-btn:has(svg) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
14
src/assets/styles/_base.scss
Normal file
14
src/assets/styles/_base.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
/* 整个滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
// display: none;
|
||||
/* 对应纵向滚动条的宽度 */
|
||||
width: 10px;
|
||||
/* 对应横向滚动条的宽度 */
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
/* 滚动条上的滚动滑块 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #8B8B8B;
|
||||
border-radius: 32px;
|
||||
}
|
||||
110
src/assets/styles/_variables.scss
Normal file
110
src/assets/styles/_variables.scss
Normal file
@@ -0,0 +1,110 @@
|
||||
$title-font-size: clamp(1.5rem, 2vw, 2.4rem);
|
||||
$content-font-size: clamp(1rem, 1.5vw, 1.2rem);
|
||||
$log-font-size: 1.1rem;
|
||||
|
||||
|
||||
$primary-color: #4a90e2;
|
||||
$primary-light: #5ba0f2;
|
||||
$primary-dark: #3a7bd5;
|
||||
$success-color: #52c41a;
|
||||
$success-light: #73d13d;
|
||||
$success-bg: rgba(82, 196, 26, 0.2);
|
||||
$success-bg-hover: rgba(82, 196, 26, 0.4);
|
||||
$warning-color: #faad14;
|
||||
$warning-light: #ffc53d;
|
||||
$warning-bg: rgba(250, 173, 20, 0.2);
|
||||
$warning-bg-hover: rgba(250, 173, 20, 0.4);
|
||||
$error-color: #ff4d4f;
|
||||
$error-light: #ff7875;
|
||||
$error-bg: rgba(255, 77, 79, 0.2);
|
||||
$error-bg-hover: rgba(255, 77, 79, 0.4);
|
||||
|
||||
$white: #ffffff;
|
||||
$text-size: 14px;
|
||||
$text-light: #b8d4f0;
|
||||
$text-dark: #333333;
|
||||
$text-gray: #cccccc;
|
||||
$text-success: #b7eb8f;
|
||||
$text-warning: #ffd666;
|
||||
$text-error: #ffccc7;
|
||||
|
||||
$bg-primary: rgba(74, 144, 226, 0.2);
|
||||
$bg-primary-hover: rgba(74, 144, 226, 0.4);
|
||||
$bg-overlay: rgba(255, 255, 255, 0.1);
|
||||
$bg-overlay-hover: rgba(255, 255, 255, 0.2);
|
||||
$bg-light: rgba(255, 255, 255, 0.1);
|
||||
$bg-light-hover: rgba(255, 255, 255, 0.2);
|
||||
$bg-dark: rgba(0, 0, 0, 0.3);
|
||||
$bg-input: rgba(255, 255, 255, 0.1);
|
||||
$bg-input-focus: rgba(255, 255, 255, 0.15);
|
||||
|
||||
$border-primary: 1px solid $primary-color;
|
||||
$border-light: 1px solid rgba(255, 255, 255, 0.3);
|
||||
$border-light-hover: 1px solid rgba(255, 255, 255, 0.5);
|
||||
$border-transparent: 1px solid transparent;
|
||||
|
||||
$spacing-xs: 4px;
|
||||
$spacing-sm: 8px;
|
||||
$spacing-md: 12px;
|
||||
$spacing-lg: 15px;
|
||||
$spacing-xl: 20px;
|
||||
$spacing-xxl: 30px;
|
||||
|
||||
$border-radius: 4px;
|
||||
$border-radius-lg: 8px;
|
||||
|
||||
$transition: all 0.3s ease;
|
||||
$font-family: 'Microsoft YaHei', sans-serif;
|
||||
|
||||
// 混合器定义
|
||||
@mixin button-base {
|
||||
border-radius: $border-radius;
|
||||
cursor: pointer;
|
||||
transition: $transition;
|
||||
border: $border-transparent;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
@mixin button-hover($bg-color, $border-color, $text-color) {
|
||||
&:hover {
|
||||
background: $bg-color;
|
||||
border-color: $border-color;
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin status-button($bg, $bg-hover, $border, $border-hover, $text, $text-hover) {
|
||||
background: $bg;
|
||||
border-color: $border;
|
||||
color: $text;
|
||||
|
||||
&:hover {
|
||||
background: $bg-hover;
|
||||
border-color: $border-hover;
|
||||
color: $text-hover;
|
||||
box-shadow: 0 0 12px rgba($border, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@mixin flex-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@mixin transition-ease {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
@mixin icon-base($size) {
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
3
src/assets/styles/index.scss
Normal file
3
src/assets/styles/index.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
@forward './base';
|
||||
@forward './variables';
|
||||
@forward './ant-design';
|
||||
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
116
src/components/Header/index.vue
Normal file
116
src/components/Header/index.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<header class="header-container" :class="{ 'hide-shadow': hideShadow }"
|
||||
:style="{ height, zIndex, lineHeight: height }">
|
||||
<div class="opts left-opts" v-if="$slots['left-opts'] || title || $slots.title">
|
||||
<a-button v-if="showHome" class="header-btn" @click="backToHome">首页</a-button>
|
||||
<a-button v-if="showBack" class="header-btn" @click="back">返回</a-button>
|
||||
<slot name="left-opts" />
|
||||
</div>
|
||||
<div class="title" v-if="title || $slots.title">
|
||||
<slot name="title">
|
||||
{{ title }}
|
||||
</slot>
|
||||
</div>
|
||||
<div class="opts right-opts" v-if="$slots['right-opts'] || title || $slots.title">
|
||||
<slot name="right-opts" />
|
||||
</div>
|
||||
<slot />
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
defineProps({
|
||||
showHome: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showBack: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
hideShadow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '6vh',
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 999,
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['back']);
|
||||
const router = useRouter();
|
||||
|
||||
const back = () => {
|
||||
emit('back');
|
||||
defaultBack();
|
||||
};
|
||||
|
||||
const defaultBack = () => {
|
||||
router.go(-1);
|
||||
};
|
||||
|
||||
const backToHome = () => {
|
||||
router.push({ name: 'ipc' });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header-container {
|
||||
width: 100%;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
|
||||
|
||||
&.hide-shadow {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 14;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
font-size: clamp(16px, 2.5vw, 32px);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.opts {
|
||||
height: 100%;
|
||||
flex: 5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
gap: 8px;
|
||||
|
||||
&.left-opts {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&.right-opts {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.header-btn.ant-btn) {
|
||||
height: 80%;
|
||||
text-align: center;
|
||||
font-size: clamp(14px, 1vw, 18px);
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
394
src/components/common/ActionButtons/index.vue
Normal file
394
src/components/common/ActionButtons/index.vue
Normal file
@@ -0,0 +1,394 @@
|
||||
<template>
|
||||
<div class="bottom-actions">
|
||||
<div class="pagination-container">
|
||||
<div class="pagination-control left" v-if="showPagination">
|
||||
<div class="pagination-btn-wrapper">
|
||||
<a-button :disabled="currentPage === 1" @click="goToPrevPage" class="pagination-btn prev-btn">
|
||||
<template #icon>
|
||||
<LeftOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
<div class="page-tooltip" v-if="currentPage > 1">
|
||||
{{ currentPage - 1 }} / {{ totalPages }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="buttons-container">
|
||||
<a-row :gutter="16" justify="center">
|
||||
<a-col v-for="button in currentPageButtons" :key="button.label">
|
||||
<a-button :type="button.type" size="large" @click="executeButtonAction(button.handler)"
|
||||
:class="['action-button', getButtonStatusClass(button)]">
|
||||
<component :is="getButtonStatusIcon(button)" v-if="getButtonStatusIcon(button)"
|
||||
class="status-icon-btn" />
|
||||
{{ button.label }}
|
||||
</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<div class="pagination-control right" v-if="showPagination">
|
||||
<div class="pagination-btn-wrapper">
|
||||
<a-button :disabled="currentPage === totalPages" @click="goToNextPage" class="pagination-btn next-btn">
|
||||
<template #icon>
|
||||
<RightOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
<div class="page-tooltip" v-if="currentPage < totalPages">
|
||||
{{ currentPage + 1 }} / {{ totalPages }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, nextTick, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
type ButtonType = 'primary' | 'default' | 'dashed' | 'text' | 'link';
|
||||
|
||||
interface ActionButton {
|
||||
label: string;
|
||||
handler: string;
|
||||
type: ButtonType;
|
||||
status?: 'running' | 'paused' | 'idle';
|
||||
}
|
||||
|
||||
interface Props {
|
||||
buttons: ActionButton[];
|
||||
buttonsPerPage?: number;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'execute', handlerName: string): void;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
buttonsPerPage: 6
|
||||
});
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// 底部按钮分页控制
|
||||
const currentPage = ref(1);
|
||||
const buttonsPerPage = ref(props.buttonsPerPage);
|
||||
|
||||
// 获取按钮状态样式类
|
||||
const getButtonStatusClass = (button: ActionButton) => {
|
||||
const statusClasses = {
|
||||
running: 'status-running',
|
||||
paused: 'status-paused',
|
||||
idle: 'status-idle'
|
||||
};
|
||||
return statusClasses[button.status || 'idle'];
|
||||
};
|
||||
|
||||
// 获取按钮状态图标
|
||||
const getButtonStatusIcon = (button: ActionButton) => {
|
||||
const statusIcons = {
|
||||
running: 'i-play-circle',
|
||||
paused: 'i-pause-circle',
|
||||
idle: ''
|
||||
};
|
||||
return statusIcons[button.status || 'idle'];
|
||||
};
|
||||
|
||||
// 计算当前页显示的按钮
|
||||
const currentPageButtons = computed(() => {
|
||||
const start = (currentPage.value - 1) * buttonsPerPage.value;
|
||||
const end = start + buttonsPerPage.value;
|
||||
return props.buttons.slice(start, end);
|
||||
});
|
||||
|
||||
// 计算总页数
|
||||
const totalPages = computed(() => {
|
||||
return Math.ceil(props.buttons.length / buttonsPerPage.value);
|
||||
});
|
||||
|
||||
// 是否显示分页控制
|
||||
const showPagination = computed(() => {
|
||||
return totalPages.value > 1;
|
||||
});
|
||||
|
||||
// 分页控制函数
|
||||
const goToPrevPage = () => {
|
||||
if (currentPage.value > 1) {
|
||||
currentPage.value--;
|
||||
}
|
||||
};
|
||||
|
||||
const goToNextPage = () => {
|
||||
if (currentPage.value < totalPages.value) {
|
||||
currentPage.value++;
|
||||
}
|
||||
};
|
||||
|
||||
// 执行按钮操作
|
||||
const executeButtonAction = (handlerName: string) => {
|
||||
emit('execute', handlerName);
|
||||
};
|
||||
|
||||
// 响应式调整按钮数量
|
||||
const updateButtonsPerPage = () => {
|
||||
nextTick(() => {
|
||||
const buttonsContainer = document.querySelector('.buttons-container') as HTMLElement;
|
||||
if (!buttonsContainer) {
|
||||
buttonsPerPage.value = props.buttonsPerPage; // 默认值
|
||||
return;
|
||||
}
|
||||
|
||||
const containerWidth = buttonsContainer.offsetWidth;
|
||||
const buttonWidth = 100; // 单个操作按钮最小宽度
|
||||
const buttonGap = 16; // 按钮间距
|
||||
|
||||
// 计算可以放置的按钮数量
|
||||
const maxButtons = Math.floor((containerWidth + buttonGap) / (buttonWidth + buttonGap));
|
||||
|
||||
// 设置最小和最大按钮数量
|
||||
buttonsPerPage.value = Math.max(3, maxButtons);
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
// 初始化按钮数量
|
||||
updateButtonsPerPage();
|
||||
|
||||
// 监听窗口大小变化
|
||||
window.addEventListener('resize', updateButtonsPerPage);
|
||||
});
|
||||
|
||||
// 清理事件监听
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', updateButtonsPerPage);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 变量定义
|
||||
$primary-color: #4a90e2;
|
||||
$primary-light: #5ba0f2;
|
||||
$success-color: #52c41a;
|
||||
$success-light: #73d13d;
|
||||
$success-bg: rgba(82, 196, 26, 0.1);
|
||||
$success-bg-hover: rgba(82, 196, 26, 0.2);
|
||||
$warning-color: #faad14;
|
||||
$warning-light: #ffc53d;
|
||||
$warning-bg: rgba(250, 173, 20, 0.1);
|
||||
$warning-bg-hover: rgba(250, 173, 20, 0.2);
|
||||
$error-color: #ff4d4f;
|
||||
$error-light: #ff7875;
|
||||
$bg-dark: rgba(0, 0, 0, 0.4);
|
||||
$bg-overlay: rgba(255, 255, 255, 0.1);
|
||||
$bg-overlay-hover: rgba(255, 255, 255, 0.2);
|
||||
$text-light: #cccccc;
|
||||
$text-success: #52c41a;
|
||||
$text-warning: #faad14;
|
||||
$white: #ffffff;
|
||||
$spacing-xs: 4px;
|
||||
$spacing-sm: 8px;
|
||||
$spacing-md: 12px;
|
||||
$spacing-lg: 16px;
|
||||
$border-radius: 6px;
|
||||
$border-radius-lg: 8px;
|
||||
$transition: all 0.3s ease;
|
||||
|
||||
// 混合器
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@mixin button-base {
|
||||
border-radius: $border-radius;
|
||||
font-weight: 500;
|
||||
transition: $transition;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部操作按钮区域 */
|
||||
.bottom-actions {
|
||||
height: 80px;
|
||||
background: $bg-dark;
|
||||
border-top: 2px solid $primary-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $spacing-sm $spacing-lg;
|
||||
flex-shrink: 0;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
@include flex-center;
|
||||
width: 100%;
|
||||
gap: $spacing-lg;
|
||||
}
|
||||
|
||||
.pagination-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pagination-btn-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pagination-btn {
|
||||
width: 35px;
|
||||
height: 50px;
|
||||
border-radius: $border-radius-lg;
|
||||
@include flex-center;
|
||||
background: rgba(74, 144, 226, 0.1);
|
||||
border: 1px solid $primary-color;
|
||||
color: $text-light;
|
||||
transition: $transition;
|
||||
|
||||
&:hover {
|
||||
background: rgba(74, 144, 226, 0.2);
|
||||
border-color: $primary-light;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: $bg-overlay;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.page-tooltip {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: $white;
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
border-radius: $border-radius;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: 1000;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 4px solid transparent;
|
||||
border-top-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-btn-wrapper:hover .page-tooltip {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.buttons-container {
|
||||
flex: 1;
|
||||
@include flex-center;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
min-width: 100px;
|
||||
height: 36px;
|
||||
font-size: 14px;
|
||||
@include button-base;
|
||||
}
|
||||
|
||||
/* 按钮状态样式 */
|
||||
.action-button {
|
||||
&.status-running {
|
||||
background: $success-bg !important;
|
||||
border-color: $success-color !important;
|
||||
color: $text-success !important;
|
||||
box-shadow: 0 0 8px rgba(82, 196, 26, 0.3);
|
||||
|
||||
&:hover {
|
||||
background: $success-bg-hover !important;
|
||||
border-color: $success-light !important;
|
||||
color: $white !important;
|
||||
box-shadow: 0 0 12px rgba(82, 196, 26, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&.status-paused {
|
||||
background: $warning-bg !important;
|
||||
border-color: $warning-color !important;
|
||||
color: $text-warning !important;
|
||||
box-shadow: 0 0 8px rgba(250, 173, 20, 0.3);
|
||||
|
||||
&:hover {
|
||||
background: $warning-bg-hover !important;
|
||||
border-color: $warning-light !important;
|
||||
color: $white !important;
|
||||
box-shadow: 0 0 12px rgba(250, 173, 20, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&.status-idle {
|
||||
background: $bg-overlay;
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
color: $text-light;
|
||||
|
||||
&:hover {
|
||||
background: $bg-overlay-hover;
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-icon-btn {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1366px) {
|
||||
.bottom-actions .ant-btn {
|
||||
min-width: 90px;
|
||||
height: 36px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.bottom-actions {
|
||||
height: 70px;
|
||||
|
||||
.ant-row {
|
||||
flex-wrap: wrap;
|
||||
gap: $spacing-sm;
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
min-width: 80px;
|
||||
height: 32px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
20
src/components/common/Lucide/index.vue
Normal file
20
src/components/common/Lucide/index.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: 'Lucide',
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<component :is="props.name" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
16
src/main.ts
Normal file
16
src/main.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
|
||||
// Pinia 状态管理
|
||||
import { createPinia } from "pinia";
|
||||
const pinia = createPinia();
|
||||
|
||||
// Vue Router
|
||||
import router from "./router";
|
||||
|
||||
// 样式文件
|
||||
import "ant-design-vue/dist/reset.css";
|
||||
import "@/assets/styles/index.scss";
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(pinia).use(router).mount("#app");
|
||||
53
src/router/index.ts
Normal file
53
src/router/index.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
|
||||
const whiteList = ["/login"];
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Index',
|
||||
component: () => import('@/views/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: () => import('@/views/login.vue')
|
||||
},
|
||||
{
|
||||
path: '/pwoManage',
|
||||
name: 'PwoManage',
|
||||
component: () => import('@/views/pwoManage/index.vue')
|
||||
}
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes
|
||||
});
|
||||
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
const token = localStorage.getItem("token");
|
||||
|
||||
// 白名单放行
|
||||
if (whiteList.includes(to.path)) {
|
||||
return next();
|
||||
}
|
||||
|
||||
// 已登录，访问 login → 跳首页
|
||||
if (token && to.path === "/login") {
|
||||
return next("/");
|
||||
}
|
||||
|
||||
// 未登录，访问受保护路由
|
||||
if (!token) {
|
||||
return next({
|
||||
path: "/login",
|
||||
query: { redirect: to.fullPath },
|
||||
});
|
||||
}
|
||||
|
||||
// 已登录，正常访问
|
||||
next();
|
||||
});
|
||||
|
||||
export default router;
|
||||
5
src/shim-vue.d.ts
vendored
Normal file
5
src/shim-vue.d.ts
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
declare module "*.vue" {
|
||||
import type { DefineComponent } from "vue";
|
||||
const component: DefineComponent<{}, {}, any>;
|
||||
export default component;
|
||||
}
|
||||
66
src/store/auth.ts
Normal file
66
src/store/auth.ts
Normal file
@@ -0,0 +1,66 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import Cookies from 'js-cookie';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import { useUserStore } from './user';
|
||||
import { login } from '@/api/system';
|
||||
import type { LoginInfo } from '@/api/system/model';
|
||||
|
||||
const TOKEN_KEY = 'token';
|
||||
|
||||
export const useAuthStore = defineStore('auth', () => {
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const loginLoading = ref(false);
|
||||
const token = ref(Cookies.get(TOKEN_KEY) || null);
|
||||
|
||||
function setToken(newToken: string) {
|
||||
token.value = newToken;
|
||||
Cookies.set(TOKEN_KEY, newToken);
|
||||
}
|
||||
|
||||
function clearToken() {
|
||||
token.value = null;
|
||||
Cookies.remove(TOKEN_KEY);
|
||||
}
|
||||
|
||||
async function authLogin(params: LoginInfo) {
|
||||
try {
|
||||
loginLoading.value = true;
|
||||
const res = await login(params);
|
||||
if (res.code === 200) {
|
||||
setToken(res.token as string);
|
||||
await userStore.fetchUserInfo();
|
||||
message.success('登录成功');
|
||||
await router.push('/');
|
||||
return res;
|
||||
} else {
|
||||
// 抛出错误，让调用方处理
|
||||
throw new Error(res.msg || '登录失败');
|
||||
}
|
||||
} catch (error) {
|
||||
throw error;
|
||||
} finally {
|
||||
loginLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function logout() {
|
||||
// 在实际应用中，这里可以调用后端的退出登录接口
|
||||
// await doLogoutApi();
|
||||
clearToken();
|
||||
userStore.clearUserInfo();
|
||||
await router.push('/login');
|
||||
message.success('已成功退出');
|
||||
}
|
||||
|
||||
return {
|
||||
token,
|
||||
loginLoading,
|
||||
authLogin,
|
||||
logout,
|
||||
};
|
||||
});
|
||||
2
src/store/index.ts
Normal file
2
src/store/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export * from './auth';
|
||||
export * from './user';
|
||||
22
src/store/user.ts
Normal file
22
src/store/user.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import Cookies from 'js-cookie';
|
||||
|
||||
const USERNAME_KEY = 'username';
|
||||
|
||||
export const useUserStore = defineStore('user', {
|
||||
state: () => ({
|
||||
username: Cookies.get(USERNAME_KEY) || null,
|
||||
}),
|
||||
actions: {
|
||||
async fetchUserInfo() {
|
||||
// Simulate API call
|
||||
const fetchedUsername = 'mock_user';
|
||||
this.username = fetchedUsername;
|
||||
Cookies.set(USERNAME_KEY, fetchedUsername);
|
||||
},
|
||||
clearUserInfo() {
|
||||
this.username = null;
|
||||
Cookies.remove(USERNAME_KEY);
|
||||
},
|
||||
},
|
||||
});
|
||||
15
src/utils/auth.ts
Normal file
15
src/utils/auth.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import Cookies from 'js-cookie';
|
||||
|
||||
const TokenKey = 'Admin-Token'
|
||||
|
||||
export function getToken() {
|
||||
return Cookies.get(TokenKey)
|
||||
}
|
||||
|
||||
export function setToken(token: string) {
|
||||
return Cookies.set(TokenKey, token)
|
||||
}
|
||||
|
||||
export function removeToken() {
|
||||
return Cookies.remove(TokenKey)
|
||||
}
|
||||
71
src/utils/dateUtils.ts
Normal file
71
src/utils/dateUtils.ts
Normal file
@@ -0,0 +1,71 @@
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
|
||||
/**
|
||||
* 格式化日期时间
|
||||
* @param date 日期对象或时间戳
|
||||
* @param format 格式字符串，默认 'YYYY-MM-DD HH:mm:ss'
|
||||
* @returns 格式化后的时间字符串
|
||||
*/
|
||||
export function formatDateTime(date: Date | number | string, format = 'YYYY-MM-DD HH:mm:ss'): string {
|
||||
const d = new Date(date);
|
||||
|
||||
if (isNaN(d.getTime())) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const year = d.getFullYear();
|
||||
const month = String(d.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(d.getDate()).padStart(2, '0');
|
||||
const hours = String(d.getHours()).padStart(2, '0');
|
||||
const minutes = String(d.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(d.getSeconds()).padStart(2, '0');
|
||||
|
||||
return format
|
||||
.replace('YYYY', String(year))
|
||||
.replace('MM', month)
|
||||
.replace('DD', day)
|
||||
.replace('HH', hours)
|
||||
.replace('mm', minutes)
|
||||
.replace('ss', seconds);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前时间字符串
|
||||
* @param format 格式字符串
|
||||
* @returns 当前时间字符串
|
||||
*/
|
||||
export function getCurrentTime(format = 'YYYY-MM-DD HH:mm:ss'): string {
|
||||
return formatDateTime(new Date(), format);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取实时时间（用于显示）
|
||||
* @param format 格式字符串
|
||||
* @returns 响应式时间字符串
|
||||
*/
|
||||
export function useRealTime(format = 'YYYY-MM-DD HH:mm:ss') {
|
||||
const currentTime = ref(getCurrentTime(format));
|
||||
let timer: NodeJS.Timeout | null = null;
|
||||
|
||||
const startTimer = () => {
|
||||
timer = setInterval(() => {
|
||||
currentTime.value = getCurrentTime(format);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const stopTimer = () => {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(startTimer);
|
||||
onBeforeUnmount(stopTimer);
|
||||
|
||||
return {
|
||||
currentTime,
|
||||
startTimer,
|
||||
stopTimer
|
||||
};
|
||||
}
|
||||
33
src/utils/useDialog.ts
Normal file
33
src/utils/useDialog.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
/**
|
||||
* Dialog控制Hook
|
||||
* @returns visible（显隐状态）、show（显示）、hide（隐藏）、toggle（切换）
|
||||
*/
|
||||
export function useDialog(initialVisible:boolean = false): {
|
||||
visible: import('vue').Ref<boolean>,
|
||||
show: () => void,
|
||||
hide: () => void,
|
||||
toggle: () => void
|
||||
} {
|
||||
const visible = ref(initialVisible);
|
||||
|
||||
const show = () => {
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const hide = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
const toggle = () => {
|
||||
visible.value = !visible.value;
|
||||
};
|
||||
|
||||
return {
|
||||
visible,
|
||||
show,
|
||||
hide,
|
||||
toggle
|
||||
};
|
||||
}
|
||||
41
src/utils/useLoading.ts
Normal file
41
src/utils/useLoading.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
/**
|
||||
* Loading控制Hook
|
||||
* @returns loading（加载状态）、startLoading（开始加载）、stopLoading（停止加载）、withLoading（包装异步函数）
|
||||
*/
|
||||
export function useLoading(initialLoading = false) {
|
||||
const loading = ref(initialLoading);
|
||||
|
||||
const startLoading = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
const stopLoading = () => {
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
/**
|
||||
* 包装异步函数，自动控制loading状态
|
||||
* @param fn 异步函数
|
||||
* @returns 包装后的函数
|
||||
*/
|
||||
const withLoading = <T extends (...args: any[]) => Promise<any>>(fn: T): T => {
|
||||
return (async (...args: any[]) => {
|
||||
startLoading();
|
||||
try {
|
||||
const result = await fn(...args);
|
||||
return result;
|
||||
} finally {
|
||||
stopLoading();
|
||||
}
|
||||
}) as T;
|
||||
};
|
||||
|
||||
return {
|
||||
loading,
|
||||
startLoading,
|
||||
stopLoading,
|
||||
withLoading
|
||||
};
|
||||
}
|
||||
11
src/utils/uuidUtils.ts
Normal file
11
src/utils/uuidUtils.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* 生成一个随机的UUID v4
|
||||
* @returns 生成的UUID字符串
|
||||
*/
|
||||
export function generateUUID(): string {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||||
const r = Math.random() * 16 | 0;
|
||||
const v = c === 'x' ? r : (r & 0x3 | 0x8);
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
301
src/views/index.vue
Normal file
301
src/views/index.vue
Normal file
@@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<div class="ipc-dashboard">
|
||||
<Header title="过站工控机">
|
||||
<template #right>
|
||||
<a-button @click="handleLogout">退出登录</a-button>
|
||||
</template>
|
||||
</Header>
|
||||
|
||||
<div class="menu-grid">
|
||||
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/pwoManage')">
|
||||
<div class="icon-wrap">
|
||||
<i-lucide-building />
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="title">工单管理</div>
|
||||
<div class="desc">管理生产工单和进度</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/stationControl')">
|
||||
<div class="icon-wrap">
|
||||
<i-lucide-monitor />
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="title">游站控制</div>
|
||||
<div class="desc">设备状态监控和控制</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/dispatch')">
|
||||
<div class="icon-wrap">
|
||||
<i-lucide-package />
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="title">出站管理</div>
|
||||
<div class="desc">产品出站和质量检测</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/hold')">
|
||||
<div class="icon-wrap">
|
||||
<i-lucide-server />
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="title">Hold管理</div>
|
||||
<div class="desc">异常处理和Hold状态管理</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/dataAnalysis')">
|
||||
<div class="icon-wrap">
|
||||
<i-lucide-bar-chart-3 />
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="title">数据分析</div>
|
||||
<div class="desc">生产数据统计分析</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/maintenance')">
|
||||
<div class="icon-wrap">
|
||||
<i-lucide-wrench />
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="title">设备维护</div>
|
||||
<div class="desc">设备保养和维修记录</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/personnel')">
|
||||
<div class="icon-wrap">
|
||||
<i-lucide-users />
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="title">人员管理</div>
|
||||
<div class="desc">操作人员及权限管理</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/settings')">
|
||||
<div class="icon-wrap">
|
||||
<i-lucide-settings />
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="title">系统设置</div>
|
||||
<div class="desc">系统参数配置</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { useAuthStore, useUserStore } from '@/store';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
const authStore = useAuthStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const { username } = storeToRefs(userStore);
|
||||
const { token } = storeToRefs(authStore);
|
||||
const loggedIn = ref(Boolean(token.value));
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const handleLogout = () => {
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: `是否确认退出登录：${username.value}`,
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
message.success('已退出');
|
||||
},
|
||||
onCancel: () => {
|
||||
message.error('操作失败');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleJumpTo = (path) => {
|
||||
if (!loggedIn.value) {
|
||||
message.warning("尚未登录，请先登录");
|
||||
return;
|
||||
}
|
||||
router.push({ path });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ipc-dashboard {
|
||||
background: #f5f7fa;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.menu-grid {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 8vh 6vh;
|
||||
gap: 4%;
|
||||
row-gap: 6vh;
|
||||
|
||||
.menu-card {
|
||||
width: 22%;
|
||||
cursor: pointer;
|
||||
border-radius: 1vw;
|
||||
overflow: visible;
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 24px 16px;
|
||||
gap: 1vh;
|
||||
|
||||
.icon-wrap {
|
||||
width: 5vw;
|
||||
height: 5vw;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(180deg, #0c6bd1 0%, #1c6fb8 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
.text {
|
||||
text-align: center;
|
||||
|
||||
.title {
|
||||
font-size: 1.2vw;
|
||||
font-weight: 500;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #8b96a7;
|
||||
font-size: 0.9vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.login-dialog) {
|
||||
.ant-modal {
|
||||
width: 48vw;
|
||||
left: 26vw;
|
||||
border-radius: 16px !important;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ant-modal-header {
|
||||
background: linear-gradient(135deg, #0c6bd1 0%, #1c6fb8 100%);
|
||||
border-bottom: none;
|
||||
padding: 24px 20px !important;
|
||||
|
||||
.ant-modal-title {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ant-modal-close-x {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 20px;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
padding: 32px 28px !important;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
.ant-form-item {
|
||||
margin-bottom: 22px;
|
||||
|
||||
.ant-form-item-label > label {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.ant-input {
|
||||
font-size: 16px;
|
||||
height: 42px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e5e7eb;
|
||||
transition: all 0.3s ease;
|
||||
padding: 0 1rem;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: #0c6bd1;
|
||||
box-shadow: 0 0 0 3px rgba(12, 107, 209, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input-password-icon {
|
||||
color: #bfbfbf;
|
||||
|
||||
&:hover {
|
||||
color: #0c6bd1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
padding: 20px 28px !important;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
background: #fafafa;
|
||||
border-radius: 0 0 16px 16px;
|
||||
|
||||
.ant-btn {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
border-radius: 8px;
|
||||
padding: 10px 32px !important;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:not(.btn-primary) {
|
||||
border-color: #d9d9d9;
|
||||
color: #595959;
|
||||
|
||||
&:hover {
|
||||
border-color: #0c6bd1;
|
||||
color: #0c6bd1;
|
||||
background: #f0f7ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #0c6bd1 0%, #1c6fb8 100%);
|
||||
border: none;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 16px rgba(12, 107, 209, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
520
src/views/login.vue
Normal file
520
src/views/login.vue
Normal file
@@ -0,0 +1,520 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { getCaptcha } from '@/api/system'
|
||||
import type { LoginInfo } from '@/api/system/model'
|
||||
import type { Rule } from 'ant-design-vue/es/form';
|
||||
import { useAuthStore } from '@/store';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
const authStore = useAuthStore();
|
||||
const { loginLoading } = storeToRefs(authStore);
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive<LoginInfo>({
|
||||
username: '',
|
||||
password: '',
|
||||
uuid: '',
|
||||
code: ''
|
||||
})
|
||||
|
||||
// 验证码图片
|
||||
const captchaImg = ref('')
|
||||
const captchaLoading = ref(false)
|
||||
const loadCaptchaFail = ref(false)
|
||||
|
||||
// 表单验证规则
|
||||
const rules: Record<string, Rule[]> = {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'change' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'change' }
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: '请输入验证码', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
|
||||
// 获取验证码
|
||||
const refreshCaptcha = async () => {
|
||||
try {
|
||||
captchaImg.value = ''
|
||||
captchaLoading.value = true
|
||||
await getCaptcha().then((res: any) => {
|
||||
loadCaptchaFail.value = false;
|
||||
if (res.captchaOnOff) {
|
||||
captchaImg.value = "data:image/gif;base64," + res.img
|
||||
rules.code[0].required = true;
|
||||
} else {
|
||||
rules.code[0].required = false;
|
||||
}
|
||||
formData.uuid = res.uuid
|
||||
formData.code = '' // 清空验证码输入
|
||||
})
|
||||
} catch (error) {
|
||||
loadCaptchaFail.value = true;
|
||||
message.error('获取验证码失败')
|
||||
console.error('获取验证码失败:', error)
|
||||
} finally {
|
||||
captchaLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 登录处理
|
||||
const handleLogin = async () => {
|
||||
try {
|
||||
await authStore.authLogin(formData);
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '登录失败');
|
||||
await refreshCaptcha();
|
||||
}
|
||||
}
|
||||
|
||||
// 组件挂载时获取验证码
|
||||
refreshCaptcha()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<!-- 背景图 -->
|
||||
<div class="login-background"></div>
|
||||
|
||||
<!-- 登录框 -->
|
||||
<div class="login-box">
|
||||
<div class="login-header">
|
||||
<h2 class="login-title">
|
||||
<i-lucide-cpu class="title-icon" />
|
||||
工业控制系统 HMI
|
||||
</h2>
|
||||
<p class="login-subtitle">请登录您的账户</p>
|
||||
</div>
|
||||
|
||||
<a-form
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
@finish="handleLogin"
|
||||
class="login-form"
|
||||
layout="vertical"
|
||||
>
|
||||
<!-- 用户名 -->
|
||||
<a-form-item name="username" class="form-item">
|
||||
<a-input
|
||||
v-model:value="formData.username"
|
||||
placeholder="请输入用户名"
|
||||
size="large"
|
||||
class="login-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<i-lucide-user class="input-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 密码 -->
|
||||
<a-form-item name="password" class="form-item">
|
||||
<a-input-password
|
||||
v-model:value="formData.password"
|
||||
placeholder="请输入密码"
|
||||
size="large"
|
||||
class="login-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<i-lucide-lock class="input-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 验证码 -->
|
||||
<a-form-item name="code" class="form-item" v-if="rules.code[0].required">
|
||||
<div class="captcha-container">
|
||||
<a-input
|
||||
v-model:value="formData.code"
|
||||
placeholder="请输入验证码"
|
||||
size="large"
|
||||
class="login-input captcha-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<i-lucide-shield-check class="input-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
<div class="captcha-image-container" @click="refreshCaptcha">
|
||||
<img
|
||||
v-if="captchaImg"
|
||||
:src="captchaImg"
|
||||
alt="验证码"
|
||||
class="captcha-image"
|
||||
/>
|
||||
<div v-else-if="captchaLoading" class="captcha-loading">
|
||||
<i-lucide-loader class="loading-icon" />
|
||||
</div>
|
||||
<div v-else-if="!captchaLoading && loadCaptchaFail" class="captcha-loading">
|
||||
获取失败
|
||||
</div>
|
||||
<div class="captcha-refresh-hint">
|
||||
<i-lucide-refresh-cw class="refresh-icon" />
|
||||
点击刷新
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<a-form-item class="form-item">
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
size="large"
|
||||
:loading="loginLoading"
|
||||
class="login-button"
|
||||
block
|
||||
>
|
||||
{{ loginLoading ? '登录中...' : '登录' }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 变量定义
|
||||
$primary-color: #4a90e2;
|
||||
$primary-light: #5ba0f2;
|
||||
$primary-dark: #3a7bd5;
|
||||
$success-color: #52c41a;
|
||||
$warning-color: #faad14;
|
||||
$error-color: #ff4d4f;
|
||||
$white: #ffffff;
|
||||
$text-light: #b8d4f0;
|
||||
$text-dark: #333333;
|
||||
$bg-overlay: rgba(255, 255, 255, 0.1);
|
||||
$bg-glass: rgba(255, 255, 255, 0.15);
|
||||
$border-light: rgba(255, 255, 255, 0.3);
|
||||
$shadow-light: rgba(0, 0, 0, 0.1);
|
||||
$shadow-medium: rgba(0, 0, 0, 0.2);
|
||||
$border-radius: 8px;
|
||||
$border-radius-lg: 12px;
|
||||
$spacing-sm: 8px;
|
||||
$spacing-md: 16px;
|
||||
$spacing-lg: 24px;
|
||||
$spacing-xl: 32px;
|
||||
$transition: all 0.3s ease;
|
||||
|
||||
.login-container {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('/bg.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
filter: blur(2px);
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(74, 144, 226, 0.3) 0%,
|
||||
rgba(58, 123, 213, 0.4) 50%,
|
||||
rgba(91, 160, 242, 0.3) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.login-box {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 420px;
|
||||
padding: $spacing-xl;
|
||||
background: $bg-glass;
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid $border-light;
|
||||
border-radius: $border-radius-lg;
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.1),
|
||||
0 4px 16px rgba(0, 0, 0, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
animation: slideInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: $spacing-xl;
|
||||
|
||||
.login-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacing-sm;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: $white;
|
||||
margin: 0 0 $spacing-sm 0;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
|
||||
.title-icon {
|
||||
font-size: 28px;
|
||||
color: $primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
font-size: 14px;
|
||||
color: $text-light;
|
||||
margin: 0;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
.form-item {
|
||||
margin-bottom: $spacing-lg;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-input {
|
||||
height: 48px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: $border-radius;
|
||||
transition: $transition;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: $primary-light;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
|
||||
}
|
||||
|
||||
:deep(.ant-input) {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: $white;
|
||||
font-size: 14px;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-input-password-icon) {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.captcha-container {
|
||||
display: flex;
|
||||
gap: $spacing-md;
|
||||
align-items: stretch;
|
||||
|
||||
.captcha-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.captcha-image-container {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 48px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: $border-radius;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: $transition;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
|
||||
&:hover {
|
||||
border-color: $primary-light;
|
||||
|
||||
.captcha-refresh-hint {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.captcha-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.captcha-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
|
||||
.loading-icon {
|
||||
color: $white;
|
||||
font-size: 20px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.captcha-refresh-hint {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $white;
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
transition: $transition;
|
||||
|
||||
.refresh-icon {
|
||||
font-size: 16px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.login-button {
|
||||
height: 48px;
|
||||
background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%);
|
||||
border: none;
|
||||
border-radius: $border-radius;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
transition: $transition;
|
||||
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, $primary-light 0%, $primary-color 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
margin-right: $spacing-sm;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
:deep(.ant-btn-loading-icon) {
|
||||
margin-right: $spacing-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// 表单验证错误样式
|
||||
:deep(.ant-form-item-has-error) {
|
||||
.login-input {
|
||||
border-color: $error-color;
|
||||
|
||||
&:focus-within {
|
||||
box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.captcha-image-container {
|
||||
border-color: $error-color;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-form-item-explain-error) {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
background: rgba(255, 77, 79, 0.1);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.login-box {
|
||||
width: 90%;
|
||||
max-width: 380px;
|
||||
padding: $spacing-lg;
|
||||
}
|
||||
|
||||
.captcha-container {
|
||||
flex-direction: column;
|
||||
|
||||
.captcha-image-container {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.login-box {
|
||||
padding: $spacing-md;
|
||||
}
|
||||
|
||||
.login-header .login-title {
|
||||
font-size: 20px;
|
||||
|
||||
.title-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
0
src/views/pwoManage/index.vue
Normal file
0
src/views/pwoManage/index.vue
Normal file
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
Reference in New Issue
Block a user