From 416973ee441fbd4cfcb04c27b276832220f604c4 Mon Sep 17 00:00:00 2001
From: truthhun <1272881215@qq.com>
Date: Fri, 26 May 2023 12:56:00 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=AF=BC=E8=88=AA=E6=A0=8F?=
=?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
model/navigation.go | 18 ++++-
web/components/FormNavigation.vue | 32 ++++----
web/components/NavigationLink.vue | 51 ++++++++++++
web/layouts/default.vue | 125 +++++++++++++++++++++++++-----
web/pages/admin/navigation.vue | 13 +++-
5 files changed, 195 insertions(+), 44 deletions(-)
create mode 100644 web/components/NavigationLink.vue
diff --git a/model/navigation.go b/model/navigation.go
index 42cca3b..6a00b17 100644
--- a/model/navigation.go
+++ b/model/navigation.go
@@ -12,7 +12,7 @@ type Navigation struct {
Title string `form:"title" json:"title,omitempty" gorm:"column:title;type:varchar(255);size:255;comment:链接名称;"`
Href string `form:"href" json:"href,omitempty" gorm:"column:href;type:varchar(255);size:255;comment:跳转链接;"`
Target string `form:"target" json:"target,omitempty" gorm:"column:target;type:varchar(16);size:16;comment:打开方式;"`
- Color string `form:"color" json:"color,omitempty" gorm:"column:color;type:varchar(16);size:16;comment:链接颜色;"`
+ Color string `form:"color" json:"color,omitempty" gorm:"column:color;type:varchar(32);size:32;comment:链接颜色;"`
Sort int `form:"sort" json:"sort,omitempty" gorm:"column:sort;type:int(11);size:11;default:0;comment:排序，值越大越靠前;"`
Enable *bool `form:"enable" json:"enable,omitempty" gorm:"column:enable;type:int(11);size:11;default:0;comment:是否启用;"`
ParentId int64 `form:"parent_id" json:"parent_id,omitempty" gorm:"column:parent_id;type:int(11);size:11;default:0;comment:上级id;"`
@@ -123,10 +123,26 @@ func (m *DBModel) GetNavigationList(opt *OptionGetNavigationList) (navigationLis
}
// DeleteNavigation 删除数据
+// 连同子数据一起删除
func (m *DBModel) DeleteNavigation(ids []int64) (err error) {
err = m.db.Where("id in (?)", ids).Delete(&Navigation{}).Error
if err != nil {
m.logger.Error("DeleteNavigation", zap.Error(err))
+ return
+ }
+
+ var children []Navigation
+ m.db.Select("id").Where("parent_id in (?)", ids).Find(&children)
+ if len(children) > 0 {
+ var childrenIds []int64
+ for _, child := range children {
+ childrenIds = append(childrenIds, child.Id)
+ }
+ err = m.DeleteNavigation(childrenIds)
+ if err != nil {
+ m.logger.Error("DeleteNavigation", zap.Error(err))
+ return
+ }
}
return
}
diff --git a/web/components/FormNavigation.vue b/web/components/FormNavigation.vue
index d32fb7e..cf46d52 100644
--- a/web/components/FormNavigation.vue
+++ b/web/components/FormNavigation.vue
@@ -6,20 +6,21 @@
label-width="80px"
:model="navigation"
>
+
-
+ :clearable="true"
+ placeholder="请选择上级导航"
+ >
+
+
+
+
+
+
+ {{ navigation.title }}
+
+ {{ navigation.title }}
+
+
+ {{ navigation.title }}
+
+
+
+
diff --git a/web/layouts/default.vue b/web/layouts/default.vue
index 6bf085d..6191e94 100644
--- a/web/layouts/default.vue
+++ b/web/layouts/default.vue
@@ -17,19 +17,10 @@
首页
-
- {{ item.title }}
-
频道分类
+
+
+ {{
+ item.title
+ }}
+
+
+
+
+
+ {{ item.title }}
+
+
+
+
+
+
@@ -367,6 +413,7 @@ import { mapGetters, mapActions } from 'vuex'
import UserAvatar from '~/components/UserAvatar.vue'
import FormUserinfo from '~/components/FormUserinfo.vue'
import { listFriendlink } from '~/api/friendlink'
+import { listNavigation } from '~/api/navigation'
import { categoryToTrees, requireLogin } from '~/utils/utils'
import { getSignedToday, signToday } from '~/api/user'
@@ -386,6 +433,7 @@ export default {
sign: { id: 0 },
activeCollapse: 'categories',
loading: false,
+ navigations: [],
}
},
head() {
@@ -411,21 +459,17 @@ export default {
},
async created() {
this.loading = true
- const [res] = await Promise.all([
- listFriendlink({
- enable: true,
- field: ['id', 'title', 'link'],
- }),
+ await Promise.all([
this.getCategories(),
this.getSettings(),
+ this.listNavigation(),
+ this.listFriendlink(),
])
- if (res.status === 200) {
- this.friendlinks = res.data.friendlink
- }
this.categoryTrees = categoryToTrees(this.categories).filter(
(item) => item.enable
)
+
this.loopUpdate()
this.loading = false
if (requireLogin(this.settings, this.user, this.$route, this.permissions)) {
@@ -451,6 +495,15 @@ export default {
this.sign = res.data || this.sign
}
},
+ async listFriendlink() {
+ const res = await listFriendlink({
+ enable: true,
+ field: ['id', 'title', 'link'],
+ })
+ if (res.status === 200) {
+ this.friendlinks = res.data.friendlink
+ }
+ },
async signToday() {
const res = await signToday()
if (res.status === 200) {
@@ -466,6 +519,14 @@ export default {
this.$message.error(res.message || res.data.message)
}
},
+ async listNavigation() {
+ const res = await listNavigation({ page: 1, size: 10000 })
+ if (res.status === 200) {
+ let navigations = res.data.navigation || []
+ navigations = categoryToTrees(navigations).filter((item) => item.enable)
+ this.navigations = navigations
+ }
+ },
onSearch() {
if (!this.search.wd) return
this.menuDrawerVisible = false
@@ -610,11 +671,16 @@ export default {
.nav-searchbox {
padding: 0 25px !important;
top: -2px;
+ &.nav-searchbox-large {
+ .el-input {
+ width: 300px;
+ }
+ }
&.is-active {
border-color: transparent;
}
.el-input {
- width: 360px;
+ width: 200px;
}
}
a {
@@ -622,7 +688,8 @@ export default {
height: 60px;
line-height: 60px;
display: inline-block;
- padding: 0 20px;
+ // padding: 0 20px;
+ padding: 0 15px;
}
.el-menu-item {
padding: 0;
@@ -732,6 +799,24 @@ export default {
padding: 1px 20px;
}
+.el-menu-mobile {
+ margin-top: 15px;
+ margin-left: -15px;
+ border-right: 0;
+ & > li {
+ padding-left: 0;
+ }
+ .el-submenu__title {
+ height: 32px;
+ line-height: 32px;
+ font-size: 15px;
+ }
+ .el-menu-item {
+ height: 32px;
+ line-height: 32px;
+ }
+}
+
// =======================
// 移动端样式
// =======================
diff --git a/web/pages/admin/navigation.vue b/web/pages/admin/navigation.vue
index 79d6eda..d0d4b88 100644
--- a/web/pages/admin/navigation.vue
+++ b/web/pages/admin/navigation.vue
@@ -127,10 +127,15 @@ export default {
let navigations = res.data.navigation || []
navigations.map((item) => {
item.title_html = genLinkHTML(item.title, item.href)
+ if (item.color) {
+ // 增加链接颜色
+ item.title_html = item.title_html.replace(
+ '