mirror of
https://github.com/silenty4ng/k5web
synced 2025-04-19 00:29:49 +00:00
update
This commit is contained in:
parent
384145e795
commit
44b79d3845
5 changed files with 209 additions and 20 deletions
src
|
|
@ -1,5 +1,75 @@
|
|||
<template>
|
||||
<a-layout class="layout" :class="{ mobile: appStore.hideMenu }">
|
||||
<t-dialog
|
||||
v-model:visible="userStore.showLogin"
|
||||
attach="body"
|
||||
header="登录"
|
||||
destroy-on-close
|
||||
:footer="false"
|
||||
>
|
||||
<template #body>
|
||||
<t-form ref="form" :data="formData" :colon="true" :label-width="0" @submit="onLogin">
|
||||
<t-form-item name="account">
|
||||
<t-input v-model="formData.account" clearable placeholder="请输入账户名">
|
||||
<template #prefix-icon>
|
||||
<desktop-icon />
|
||||
</template>
|
||||
</t-input>
|
||||
</t-form-item>
|
||||
|
||||
<t-form-item name="password">
|
||||
<t-input v-model="formData.password" type="password" clearable placeholder="请输入密码">
|
||||
<template #prefix-icon>
|
||||
<lock-on-icon />
|
||||
</template>
|
||||
</t-input>
|
||||
</t-form-item>
|
||||
|
||||
<t-form-item>
|
||||
<t-button theme="primary" type="submit" block>登录</t-button>
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
</template>
|
||||
</t-dialog>
|
||||
<t-dialog
|
||||
v-model:visible="userStore.showRegister"
|
||||
attach="body"
|
||||
header="注册"
|
||||
destroy-on-close
|
||||
:footer="false"
|
||||
>
|
||||
<template #body>
|
||||
<t-form ref="form" :data="formData" :colon="true" :label-width="0" @submit="onRegister">
|
||||
<t-form-item name="account">
|
||||
<t-input v-model="formData.account" clearable placeholder="请输入账户名">
|
||||
<template #prefix-icon>
|
||||
<desktop-icon />
|
||||
</template>
|
||||
</t-input>
|
||||
</t-form-item>
|
||||
|
||||
<t-form-item name="password">
|
||||
<t-input v-model="formData.password" type="password" clearable placeholder="请输入密码">
|
||||
<template #prefix-icon>
|
||||
<lock-on-icon />
|
||||
</template>
|
||||
</t-input>
|
||||
</t-form-item>
|
||||
|
||||
<t-form-item name="password2">
|
||||
<t-input v-model="formData.password2" type="password" clearable placeholder="请再次输入密码">
|
||||
<template #prefix-icon>
|
||||
<lock-on-icon />
|
||||
</template>
|
||||
</t-input>
|
||||
</t-form-item>
|
||||
|
||||
<t-form-item>
|
||||
<t-button theme="primary" type="submit" block>登录</t-button>
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
</template>
|
||||
</t-dialog>
|
||||
<div v-if="navbar" class="layout-navbar">
|
||||
<NavBar />
|
||||
</div>
|
||||
|
|
@ -46,7 +116,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, watch, provide, onMounted } from 'vue';
|
||||
import { ref, computed, watch, provide, onMounted, reactive } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { useAppStore, useUserStore } from '@/store';
|
||||
import NavBar from '@/components/navbar/index.vue';
|
||||
|
|
@ -57,6 +127,24 @@
|
|||
import useResponsive from '@/hooks/responsive';
|
||||
import PageLayout from './page-layout.vue';
|
||||
|
||||
const formData = reactive({
|
||||
account: '',
|
||||
password: '',
|
||||
password2: ''
|
||||
});
|
||||
|
||||
const onLogin = () => {
|
||||
console.log(formData)
|
||||
userStore.setInfo({
|
||||
showLogin: false,
|
||||
name: '开发中'
|
||||
})
|
||||
}
|
||||
|
||||
const onRegister = () => {
|
||||
console.log(formData)
|
||||
}
|
||||
|
||||
const isInit = ref(false);
|
||||
const appStore = useAppStore();
|
||||
const userStore = useUserStore();
|
||||
|
|
|
|||
|
|
@ -28,6 +28,8 @@ const useUserStore = defineStore('user', {
|
|||
accountId: undefined,
|
||||
certification: undefined,
|
||||
role: '',
|
||||
showLogin: false,
|
||||
showRegister: false
|
||||
}),
|
||||
|
||||
getters: {
|
||||
|
|
|
|||
|
|
@ -16,4 +16,6 @@ export interface UserState {
|
|||
accountId?: string;
|
||||
certification?: number;
|
||||
role: RoleType;
|
||||
showLogin: boolean;
|
||||
showRegister: boolean;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,14 +4,18 @@
|
|||
<a-row :gutter="20" align="stretch">
|
||||
<a-col :span="24">
|
||||
<a-card class="general-card" :title="$t('menu.firmware')">
|
||||
<!-- <template #extra>
|
||||
<template #extra>
|
||||
<div style="margin-right: 20px;">
|
||||
<a-link> 登录 </a-link>
|
||||
<a-link> 注册 </a-link>
|
||||
<a-link> 用户名 </a-link>
|
||||
<a-link> 退出 </a-link>
|
||||
<template v-if="userStore.name">
|
||||
<a-link @click="showPanel"> {{ userStore.name }} </a-link>
|
||||
<a-link @click="userStore.logout()"> 退出 </a-link>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-link @click="userStore.setInfo({ showLogin: true })"> 登录 </a-link>
|
||||
<a-link @click="userStore.setInfo({ showRegister: true })"> 注册 </a-link>
|
||||
</template>
|
||||
</div>
|
||||
</template> -->
|
||||
</template>
|
||||
<a-list>
|
||||
<a-list-item style="width: 100%;">
|
||||
<a-list-item-meta
|
||||
|
|
@ -68,24 +72,112 @@
|
|||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<t-drawer v-model:visible="state.showPanel" size="50%" header="我的固件" :footer="false">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between;">
|
||||
<t-button style="margin: 10px" @click="showUpload">上传新固件</t-button>
|
||||
<t-button :loading="state.refLoading" shape="circle" theme="outline" @click="refit">
|
||||
<template #icon> <RefreshIcon /> </template>
|
||||
</t-button>
|
||||
</div>
|
||||
<t-list :split="true">
|
||||
<t-list-item v-for="item in 20">
|
||||
<div style="display: flex; width: 100%;">
|
||||
<div style="width: 90%;">
|
||||
<t-tag theme="primary" variant="outline">审核中</t-tag>
|
||||
固件名称
|
||||
<br>
|
||||
固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述固件描述
|
||||
</div>
|
||||
<div style="width: 10%; margin: auto; text-align: center;">
|
||||
<t-link theme="primary" hover="color">删除</t-link>
|
||||
</div>
|
||||
</div>
|
||||
</t-list-item>
|
||||
</t-list>
|
||||
</t-drawer>
|
||||
<t-drawer v-model:visible="state.showUpload" size="25%" header="上传新固件" :footer="false">
|
||||
<t-form
|
||||
:data="formData"
|
||||
reset-type="initial"
|
||||
colon
|
||||
@submit="onUF"
|
||||
>
|
||||
<t-form-item label="固件名称" name="title" label-align="top">
|
||||
<t-input v-model="formData.title"></t-input>
|
||||
</t-form-item>
|
||||
<t-form-item label="固件描述" name="desc" label-align="top">
|
||||
<t-textarea :autosize="{ minRows: 5, maxRows: 10 }" v-model="formData.desc" placeholder="请输入" clearable />
|
||||
</t-form-item>
|
||||
<t-form-item label="固件文件" name="firmware" label-align="top">
|
||||
<t-upload
|
||||
v-model="formData.firmware"
|
||||
action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
|
||||
:abridge-name="[8, 6]"
|
||||
theme="file-input"
|
||||
placeholder="未选择文件"
|
||||
></t-upload>
|
||||
</t-form-item>
|
||||
<t-form-item label-align="top">
|
||||
<t-button theme="primary" type="submit" block>提交审核</t-button>
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
</t-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, nextTick } from 'vue';
|
||||
import { useAppStore } from '@/store';
|
||||
import { useAppStore, useUserStore } from '@/store';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { RefreshIcon } from 'tdesign-icons-vue-next';
|
||||
|
||||
const appStore = useAppStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const state : {
|
||||
binaryFile: any,
|
||||
loading: boolean
|
||||
loading: boolean,
|
||||
showPanel: boolean,
|
||||
showUpload: boolean,
|
||||
refLoading: boolean
|
||||
} = reactive({
|
||||
binaryFile: undefined,
|
||||
loading: false
|
||||
loading: false,
|
||||
showPanel: false,
|
||||
showUpload: false,
|
||||
refLoading: false
|
||||
})
|
||||
|
||||
const formData = reactive({
|
||||
title: '',
|
||||
desc: '',
|
||||
firmware: []
|
||||
})
|
||||
|
||||
const showPanel = () => {
|
||||
state.showPanel = true
|
||||
}
|
||||
|
||||
const showUpload = () => {
|
||||
formData.title = ''
|
||||
formData.desc = ''
|
||||
formData.firmware = []
|
||||
state.showUpload = true
|
||||
}
|
||||
|
||||
const onUF = () => {
|
||||
console.log(formData)
|
||||
state.showUpload = false;
|
||||
}
|
||||
|
||||
const refit = () => {
|
||||
state.refLoading = true;
|
||||
setTimeout(() => {
|
||||
state.refLoading = false;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
const useFirmware = (url: string) => {
|
||||
router.push({
|
||||
|
|
|
|||
|
|
@ -4,14 +4,18 @@
|
|||
<a-row :gutter="20" align="stretch">
|
||||
<a-col :span="24">
|
||||
<a-card class="general-card" :title="$t('menu.image')">
|
||||
<!-- <template #extra>
|
||||
<div style="margin-right: 20px;">
|
||||
<a-link> 登录 </a-link>
|
||||
<a-link> 注册 </a-link>
|
||||
<a-link> 用户名 </a-link>
|
||||
<a-link> 退出 </a-link>
|
||||
</div>
|
||||
</template> -->
|
||||
<template #extra>
|
||||
<div style="margin-right: 20px;">
|
||||
<template v-if="userStore.name">
|
||||
<a-link> {{ userStore.name }} </a-link>
|
||||
<a-link @click="userStore.logout()"> 退出 </a-link>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-link @click="userStore.setInfo({ showLogin: true })"> 登录 </a-link>
|
||||
<a-link @click="userStore.setInfo({ showRegister: true })"> 注册 </a-link>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<a-row :gutter="20">
|
||||
<a-col :span="4" v-for="i in [
|
||||
{ name: '罗狮虎', url: '/img1.png'},
|
||||
|
|
@ -52,10 +56,11 @@
|
|||
<script lang="ts" setup>
|
||||
import { ThumbUpIcon, CheckDoubleIcon } from 'tdesign-icons-vue-next';
|
||||
import { reactive, nextTick } from 'vue';
|
||||
import { useAppStore } from '@/store';
|
||||
import { useAppStore, useUserStore } from '@/store';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const appStore = useAppStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue