zfc/guzhi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update: 移动端适配

Browse Source
This commit is contained in:
mizhexiaoxiao 2023-09-04 18:13:20 +08:00
parent d6f3aba1a1
commit 7ddcb4cfa6
11 changed files with 90 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/components/query-bar/QueryBar.vue
View File

@ -13,12 +13,11 @@
>
<n-space wrap :size="[35, 15]">
<slot />
<div>
<n-button secondary type="primary" @click="emit('reset')">重置</n-button>
<n-button ml-20 type="primary" @click="emit('search')">搜索</n-button>
</div>
</n-space>
<div flex-shrink-0>
<n-button secondary type="primary" @click="emit('reset')">重置</n-button>
<n-button ml-20 type="primary" @click="emit('search')">搜索</n-button>
</div>
</div>
</template>

2
web/src/components/query-bar/QueryBarItem.vue
View File

@ -8,7 +8,7 @@
>
{{ label }}
</label>
<div :style="{ width: contentWidth + 'px' }" flex-shrink-0>
<div>
<slot />
</div>
</div>

4
web/src/components/table/CrudTable.vue
View File

@ -8,6 +8,7 @@
:loading="loading"
:columns="columns"
:data="tableData"
:scroll-x="scrollX"
:row-key="(row) => row[rowKey]"
:pagination="isPagination ? pagination : false"
@update:checked-row-keys="onChecked"
@ -16,7 +17,6 @@
</template>
<script setup>
const props = defineProps({
/**
* @remote true: 后端分页 false： 前端分页
@ -34,7 +34,7 @@ const props = defineProps({
},
scrollX: {
type: Number,
default: 1200,
default: 450,
},
rowKey: {
type: String,

4
web/src/layout/components/header/components/FullScreen.vue
View File

@ -1,5 +1,5 @@
<template>
<n-icon mr20 size="18" style="cursor: pointer" @click="toggle">
<n-icon v-if="appStore.fullScreen" mr20 size="18" style="cursor: pointer" @click="toggle">
<icon-ant-design:fullscreen-exit-outlined v-if="isFullscreen" />
<icon-ant-design:fullscreen-outlined v-else />
</n-icon>
@ -7,6 +7,8 @@
<script setup>
import { useFullscreen } from '@vueuse/core'
import { useAppStore } from '@/store'
const appStore = useAppStore()
const { isFullscreen, toggle } = useFullscreen()
</script>

33
web/src/layout/index.vue
View File

@ -37,5 +37,38 @@ import AppTags from './components/tags/index.vue'
import { useAppStore } from '@/store'
import { header, tags } from '~/settings'
// 移动端适配
import { useBreakpoints } from '@vueuse/core'
const appStore = useAppStore()
const breakpointsEnum = {
xl: 1600,
lg: 1199,
md: 991,
sm: 666,
xs: 575,
}
const breakpoints = reactive(useBreakpoints(breakpointsEnum))
const isMobile = breakpoints.smaller('sm')
const isPad = breakpoints.between('sm', 'md')
const isPC = breakpoints.greater('md')
watchEffect(() => {
if (isMobile.value) {
// Mobile
appStore.setCollapsed(true)
appStore.setFullScreen(false)
}
if (isPad.value) {
// IPad
appStore.setCollapsed(true)
appStore.setFullScreen(false)
}
if (isPC.value) {
// PC
appStore.setCollapsed(false)
appStore.setFullScreen(true)
}
})
</script>

22
web/src/store/modules/app/index.js
View File

@ -7,6 +7,7 @@ export const useAppStore = defineStore('app', {
return {
reloadFlag: true,
collapsed: false,
fullScreen: true,
/** keepAlive路由的key，重新赋值可重置keepAlive */
aliveKeys: {},
isDark,
@ -30,18 +31,19 @@ export const useAppStore = defineStore('app', {
setCollapsed(collapsed) {
this.collapsed = collapsed
},
setFullScreen(fullScreen) {
this.fullScreen = fullScreen
},
setAliveKeys(key, val) {
this.aliveKeys[key] = val
},
/** 设置暗黑模式 */
setDark(isDark) {
this.isDark = isDark
},
/** 切换/关闭 暗黑模式 */
toggleDark() {
this.isDark = !this.isDark
},
/** 设置暗黑模式 */
setDark(isDark) {
this.isDark = isDark
},
/** 切换/关闭 暗黑模式 */
toggleDark() {
this.isDark = !this.isDark
},
},
})

11
web/src/views/system/api/index.vue
View File

@ -132,6 +132,7 @@ const columns = [
{
size: 'small',
type: 'primary',
style: 'margin-right: 8px;',
onClick: () => {
handleEdit(row)
modalForm.value.roles = row.roles.map((e) => (e = e.id))
@ -158,7 +159,6 @@ const columns = [
{
size: 'small',
type: 'error',
style: 'margin-left: 8px;',
},
{
default: () => '删除',
@ -181,13 +181,18 @@ const columns = [
<CommonPage show-footer title="API列表">
<template #action>
<div>
<NButton v-permission="'post/api/v1/api/create'" type="primary" @click="handleAdd">
<NButton
v-permission="'post/api/v1/api/create'"
class="float-right mr-15"
type="primary"
@click="handleAdd"
>
<TheIcon icon="material-symbols:add" :size="18" class="mr-5" />新建API
</NButton>
<NButton
v-permission="'post/api/v1/api/refresh'"
class="float-right mr-15"
type="warning"
class="ml-16"
@click="handleRefreshApi"
>
<TheIcon icon="material-symbols:refresh" :size="18" class="mr-5" />刷新API

14
web/src/views/system/menu/index.vue
View File

@ -77,13 +77,12 @@ const columns = [
},
{ title: '排序', key: 'order', width: 30, ellipsis: { tooltip: true } },
{ title: '访问路径', key: 'path', width: 60, ellipsis: { tooltip: true } },
{ title: '跳转路径', key: 'redirect', width: 80, ellipsis: { tooltip: true } },
{ title: '组件路径', key: 'component', width: 80, ellipsis: { tooltip: true } },
{ title: '跳转路径', key: 'redirect', width: 60, ellipsis: { tooltip: true } },
{ title: '组件路径', key: 'component', width: 60, ellipsis: { tooltip: true } },
{
title: 'KeepAlive',
title: '保活',
key: 'keepalive',
width: 30,
fixed: 'left',
width: 40,
render(row) {
return h(NSwitch, {
size: 'small',
@ -96,8 +95,7 @@ const columns = [
{
title: '隐藏',
key: 'is_hidden',
width: 30,
fixed: 'left',
width: 40,
render(row) {
return h(NSwitch, {
size: 'small',
@ -118,7 +116,7 @@ const columns = [
{
title: '操作',
key: 'actions',
width: 115,
width: 80,
align: 'center',
fixed: 'right',
render(row) {

6
web/src/views/system/role/index.vue
View File

@ -125,7 +125,7 @@ const columns = [
{
title: '操作',
key: 'actions',
width: 150,
width: 80,
align: 'center',
fixed: 'right',
render(row) {
@ -136,6 +136,7 @@ const columns = [
{
size: 'small',
type: 'primary',
style: 'margin-right: 8px;',
onClick: () => {
handleEdit(row)
},
@ -161,7 +162,7 @@ const columns = [
{
size: 'small',
type: 'error',
style: 'margin-left: 10px;',
style: 'margin-right: 8px;',
},
{
default: () => '删除',
@ -179,7 +180,6 @@ const columns = [
{
size: 'small',
type: 'primary',
style: 'margin-left: 10px;',
onClick: async () => {
active.value = true
role_id.value = row.id

14
web/src/views/system/user/index.vue
View File

@ -92,7 +92,7 @@ const columns = [
{
title: '用户角色',
key: 'role',
width: 80,
width: 60,
align: 'center',
render(row) {
const roles = row.roles ?? []
@ -108,7 +108,7 @@ const columns = [
title: '超级用户',
key: 'is_superuser',
align: 'center',
width: 70,
width: 40,
render(row) {
return h(
NTag,
@ -121,14 +121,15 @@ const columns = [
title: '上次登录时间',
key: 'last_login',
align: 'center',
width: 70,
width: 80,
ellipsis: { tooltip: true },
render(row) {
return h(
NButton,
{ size: 'small', type: 'text', ghost: true },
{
default: () => (row.last_login !== null ? formatDate(row.last_login) : null),
icon: renderIcon('mdi:update', { size: 18 }),
icon: renderIcon('mdi:update', { size: 16 }),
}
)
},
@ -136,9 +137,8 @@ const columns = [
{
title: '禁用',
key: 'is_active',
width: 30,
width: 50,
align: 'center',
fixed: 'left',
render(row) {
return h(NSwitch, {
size: 'small',
@ -165,6 +165,7 @@ const columns = [
{
size: 'small',
type: 'primary',
style: 'margin-right: 8px;',
onClick: () => {
// roles => role_ids
handleEdit(row)
@ -192,7 +193,6 @@ const columns = [
{
size: 'small',
type: 'error',
style: 'margin-left: 8px;',
},
{
default: () => '删除',

27
web/src/views/workbench/index.vue
View File

@ -2,22 +2,17 @@
<AppPage :show-footer="false">
<div flex-1>
<n-card rounded-10>
<div flex items-center>
<img rounded-full width="60" :src="userStore.avatar" />
<div ml-20>
<p text-20>Hello, {{ userStore.name }}</p>
<p mt-5 text-14 op-60>今天又是元气满满的一天!</p>
</div>
<div ml-auto flex items-center>
<n-space :size="24" :wrap="false">
<n-statistic
v-for="item in statisticData"
:key="item.id"
class="whitespace-nowrap"
v-bind="item"
></n-statistic>
</n-space>
<div flex items-center justify-between>
<div flex items-center>
<img rounded-full width="60" :src="userStore.avatar" />
<div ml-10>
<p text-20 font-semibold>hello, {{ userStore.name }}</p>
<p mt-5 text-14 op-60>今天又是元气满满的一天!</p>
</div>
</div>
<n-space :size="12" :wrap="false">
<n-statistic v-for="item in statisticData" :key="item.id" v-bind="item"></n-statistic>
</n-space>
</div>
</n-card>
@ -29,7 +24,7 @@
<n-card
v-for="i in 9"
:key="i"
class="mb-10 mt-10 w-300 flex-shrink-0 cursor-pointer"
class="mb-10 mt-10 w-300 cursor-pointer"
hover:card-shadow
title="Vue FastAPI Admin"
size="small"