diff --git a/backend/app/dto/app.go b/backend/app/dto/app.go index 1cfa4a69e..591672429 100644 --- a/backend/app/dto/app.go +++ b/backend/app/dto/app.go @@ -98,6 +98,7 @@ type AppConfigVersion struct { type Tag struct { Key string `json:"key"` Name string `json:"name"` + Sort int `json:"sort"` } type AppForm struct { diff --git a/backend/app/model/tag.go b/backend/app/model/tag.go index 97cf38223..adc8d6ec4 100644 --- a/backend/app/model/tag.go +++ b/backend/app/model/tag.go @@ -4,4 +4,5 @@ type Tag struct { BaseModel Key string `json:"key" gorm:"type:varchar(64);not null"` Name string `json:"name" gorm:"type:varchar(64);not null"` + Sort int `json:"sort" gorm:"type:int;not null;default:1"` } diff --git a/backend/app/repo/tag.go b/backend/app/repo/tag.go index 36da32193..122792c14 100644 --- a/backend/app/repo/tag.go +++ b/backend/app/repo/tag.go @@ -31,7 +31,7 @@ func (t TagRepo) DeleteAll(ctx context.Context) error { func (t TagRepo) All() ([]model.Tag, error) { var tags []model.Tag - if err := getDb().Where("1 = 1 ").Find(&tags).Error; err != nil { + if err := getDb().Where("1 = 1 ").Order("sort asc").Find(&tags).Error; err != nil { return nil, err } return tags, nil diff --git a/backend/app/service/app.go b/backend/app/service/app.go index 506373668..660cd2093 100644 --- a/backend/app/service/app.go +++ b/backend/app/service/app.go @@ -774,6 +774,7 @@ func (a AppService) SyncAppListFromRemote() (err error) { tags = append(tags, &model.Tag{ Key: t.Key, Name: t.Name, + Sort: t.Sort, }) } oldApps, err := appRepo.GetBy(appRepo.WithResource(constant.AppResourceRemote)) diff --git a/backend/init/migration/migrate.go b/backend/init/migration/migrate.go index c9a9530e8..4efa47320 100644 --- a/backend/init/migration/migrate.go +++ b/backend/init/migration/migrate.go @@ -46,6 +46,7 @@ func Init() { migrations.AddDefaultNetwork, migrations.UpdateRuntime, + migrations.UpdateTag, }) if err := m.Migrate(); err != nil { global.LOG.Error(err) diff --git a/backend/init/migration/migrations/v_1_7.go b/backend/init/migration/migrations/v_1_7.go index 223638397..a92ecdcd8 100644 --- a/backend/init/migration/migrations/v_1_7.go +++ b/backend/init/migration/migrations/v_1_7.go @@ -34,3 +34,13 @@ var UpdateRuntime = &gormigrate.Migration{ return nil }, } + +var UpdateTag = &gormigrate.Migration{ + ID: "20231008-update-tag", + Migrate: func(tx *gorm.DB) error { + if err := tx.AutoMigrate(&model.Tag{}); err != nil { + return err + } + return nil + }, +} diff --git a/frontend/src/api/interface/app.ts b/frontend/src/api/interface/app.ts index 6890babe1..657358479 100644 --- a/frontend/src/api/interface/app.ts +++ b/frontend/src/api/interface/app.ts @@ -23,6 +23,7 @@ export namespace App { export interface Tag { key: string; name: string; + sort: number; } export interface AppResPage { diff --git a/frontend/src/layout/components/Sidebar/index.scss b/frontend/src/layout/components/Sidebar/index.scss index 093bac8af..e09e3af33 100644 --- a/frontend/src/layout/components/Sidebar/index.scss +++ b/frontend/src/layout/components/Sidebar/index.scss @@ -82,3 +82,7 @@ .el-sub-menu__title { padding-right: 0; } + +.p-mr-5 { + margin-right: 5px; +} diff --git a/frontend/src/views/app-store/apps/index.vue b/frontend/src/views/app-store/apps/index.vue index 1e099a794..531bb72c9 100644 --- a/frontend/src/views/app-store/apps/index.vue +++ b/frontend/src/views/app-store/apps/index.vue @@ -12,7 +12,7 @@ > {{ $t('app.all') }} -
+
+
+ + + {{ moreTag == '' ? $t('tabs.more') : getTagValue(moreTag) }} + + + + + + +
@@ -103,12 +128,12 @@
- - + + {{ language == 'zh' || language == 'tw' ? tag.name : tag.key }} - + {{ $t('app.takeDown') }}
@@ -170,7 +195,6 @@ const req = reactive({ const apps = ref([]); const tags = ref([]); -const colorArr = ['#005eeb', '#008B45', '#BEBEBE', '#FFF68F', '#FFFF00', '#8B0000']; const loading = ref(false); const activeTag = ref('all'); const showDetail = ref(false); @@ -179,10 +203,7 @@ const syncing = ref(false); const detailRef = ref(); const installRef = ref(); const installKey = ref(''); - -const getColor = (index: number) => { - return colorArr[index]; -}; +const moreTag = ref(''); const search = async (req: App.AppReq) => { loading.value = true; @@ -244,9 +265,22 @@ const changeTag = (key: string) => { if (key !== 'all') { req.tags = [key]; } + const index = tags.value.findIndex((tag) => tag.key === key); + if (index > 5) { + moreTag.value = key; + } else { + moreTag.value = ''; + } search(req); }; +const getTagValue = (key: string) => { + const tag = tags.value.find((tag) => tag.key === key); + if (tag) { + return language == 'zh' || language == 'tw' ? tag.name : tag.key; + } +}; + const searchByName = (name: string) => { req.name = name; search(req); @@ -345,6 +379,7 @@ onMounted(() => { border: none; } } + @media only screen and (min-width: 768px) and (max-width: 1200px) { .app-col-12 { max-width: 50%; diff --git a/frontend/src/views/app-store/installed/index.vue b/frontend/src/views/app-store/installed/index.vue index d7b377d85..dcc21eeee 100644 --- a/frontend/src/views/app-store/installed/index.vue +++ b/frontend/src/views/app-store/installed/index.vue @@ -13,7 +13,7 @@ > {{ $t('app.all') }} -
+
+
+ + + {{ moreTag == '' ? $t('tabs.more') : getTagValue(moreTag) }} + + + + + + +
+
{ @@ -362,9 +388,22 @@ const changeTag = (key: string) => { if (key !== 'all') { searchReq.tags = [key]; } + const index = tags.value.findIndex((tag) => tag.key === key); + if (index > 5) { + moreTag.value = key; + } else { + moreTag.value = ''; + } search(); }; +const getTagValue = (key: string) => { + const tag = tags.value.find((tag) => tag.key === key); + if (tag) { + return language == 'zh' || language == 'tw' ? tag.name : tag.key; + } +}; + const search = () => { loading.value = true; searchReq.page = paginationConfig.currentPage;