feat: 应用详情页改为路由跳转

backend/app/api/v1/app.go

@@ -45,20 +45,20 @@ func (b *BaseApi) SyncApp(c *gin.Context) {
 }
 
 // @Tags App
-// @Summary Search app by id
+// @Summary Search app by key
-// @Description 通过 id 获取应用信息
+// @Description 通过 key 获取应用信息
 // @Accept json
-// @Param id path integer true "app id"
+// @Param key path string true "app key"
 // @Success 200 {object} response.AppDTO
 // @Security ApiKeyAuth
-// @Router /apps/:id [get]
+// @Router /apps/:key [get]
 func (b *BaseApi) GetApp(c *gin.Context) {
-	id, err := helper.GetParamID(c)
+	appKey, err := helper.GetStrParamByKey(c, "key")
 	if err != nil {
 		helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
 		return
 	}
-	appDTO, err := appService.GetApp(id)
+	appDTO, err := appService.GetApp(appKey)
 	if err != nil {
 		helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
 		return

backend/app/api/v1/helper/helper.go

@@ -111,6 +111,14 @@ func GetIntParamByKey(c *gin.Context, key string) (uint, error) {
 	return uint(intNum), nil
 }
 
+func GetStrParamByKey(c *gin.Context, key string) (string, error) {
+	idParam, ok := c.Params.Get(key)
+	if !ok {
+		return "", fmt.Errorf("error %s in path", key)
+	}
+	return idParam, nil
+}
+
 func GetTxAndContext() (tx *gorm.DB, ctx context.Context) {
 	tx = global.DB.Begin()
 	ctx = context.WithValue(context.Background(), constant.DB, tx)

backend/app/service/app.go

@@ -106,9 +106,9 @@ func (a AppService) GetAppTags() ([]response.TagDTO, error) {
 	return res, nil
 }
 
-func (a AppService) GetApp(id uint) (*response.AppDTO, error) {
+func (a AppService) GetApp(key string) (*response.AppDTO, error) {
 	var appDTO response.AppDTO
-	app, err := appRepo.GetFirst(commonRepo.WithByID(id))
+	app, err := appRepo.GetFirst(appRepo.WithKey(key))
 	if err != nil {
 		return nil, err
 	}

backend/router/ro_app.go

@@ -17,7 +17,7 @@ func (a *AppRouter) InitAppRouter(Router *gin.RouterGroup) {
 	{
 		appRouter.POST("/sync", baseApi.SyncApp)
 		appRouter.POST("/search", baseApi.SearchApp)
-		appRouter.GET("/:id", baseApi.GetApp)
+		appRouter.GET("/:key", baseApi.GetApp)
 		appRouter.GET("/detail/:appId/:version", baseApi.GetAppDetail)
 		appRouter.POST("/install", baseApi.InstallApp)
 		appRouter.GET("/tags", baseApi.GetAppTags)

frontend/src/api/modules/app.ts

@@ -10,8 +10,8 @@ export const SearchApp = (req: App.AppReq) => {
     return http.post<App.AppResPage>('apps/search', req);
 };
 
-export const GetApp = (id: number) => {
+export const GetApp = (key: string) => {
-    return http.get<App.AppDTO>('apps/' + id);
+    return http.get<App.AppDTO>('apps/' + key);
 };
 
 export const GetAppTags = () => {

frontend/src/routers/modules/app-store.ts

@@ -27,6 +27,16 @@ const appStoreRouter = {
                         activeMenu: '/apps',
                     },
                 },
+                {
+                    path: 'detail/:appKey',
+                    name: 'AppDetail',
+                    component: () => import('@/views/app-store/detail/index.vue'),
+                    props: true,
+                    hidden: true,
+                    meta: {
+                        activeMenu: '/apps',
+                    },
+                },
                 {
                     path: 'installed',
                     name: 'AppInstalled',

frontend/src/views/app-store/apps/index.vue

@@ -62,7 +62,7 @@
                                             plain
                                             round
                                             size="small"
-                                            @click="getAppDetail(app.id)"
+                                            @click="getAppDetail(app.key)"
                                         >
                                             {{ $t('app.install') }}
                                         </el-button>
@@ -97,6 +97,7 @@ import { GetAppTags, SearchApp, SyncApp } from '@/api/modules/app';
 import { ElMessage } from 'element-plus';
 import i18n from '@/lang';
 import Detail from '../detail/index.vue';
+import router from '@/routers';
 
 let req = reactive({
     name: '',
@@ -131,9 +132,8 @@ const search = async (req: App.AppReq) => {
     });
 };
 
-const getAppDetail = (id: number) => {
+const getAppDetail = (key: string) => {
-    showDetail.value = true;
+    router.push({ name: 'AppDetail', params: { appKey: key } });
-    appId.value = id;
 };
 
 const sync = () => {

frontend/src/views/app-store/detail/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <LayoutContent :title="$t('app.detail')" :reload="true" :v-loading="loadingDetail" :divider="true">
+    <LayoutContent :title="$t('app.detail')" :back-name="'App'" :v-loading="loadingDetail" :divider="true">
         <template #main>
             <div class="brief">
                 <el-row :gutter="20">
@@ -20,7 +20,7 @@
                             </div>
                             <div class="version">
                                 <el-form-item :label="$t('app.version')">
-                                    <el-select v-model="version" @change="getDetail(version)">
+                                    <el-select v-model="version" @change="getDetail(app.id, version)">
                                         <el-option
                                             v-for="(v, index) in app.versions"
                                             :key="index"
@@ -97,28 +97,32 @@ import { onMounted, ref } from 'vue';
 import Install from './install/index.vue';
 
 interface OperateProps {
-    id: number;
+    // id: number;
+    appKey: string;
 }
+
 const props = withDefaults(defineProps<OperateProps>(), {
-    id: 0,
+    // id: 0,
+    appKey: '',
 });
 let app = ref<any>({});
 let appDetail = ref<any>({});
 let version = ref('');
 let loadingDetail = ref(false);
+// let appKey = ref();
 const installRef = ref();
 
 const getApp = () => {
-    GetApp(props.id).then((res) => {
+    GetApp(props.appKey).then((res) => {
         app.value = res.data;
         version.value = app.value.versions[0];
-        getDetail(version.value);
+        getDetail(app.value.id, version.value);
     });
 };
 
-const getDetail = (version: string) => {
+const getDetail = (id: number, version: string) => {
     loadingDetail.value = true;
-    GetAppDetail(props.id, version)
+    GetAppDetail(id, version)
         .then((res) => {
             appDetail.value = res.data;
         })
@@ -146,8 +150,6 @@ onMounted(() => {
 
 <style lang="scss">
 .brief {
-    // height: 30vh;
-
     .name {
         span {
             font-weight: 500;

frontend/src/views/app-store/detail/params/index.vue

@@ -36,7 +36,7 @@
                 ></el-option>
             </el-select>
             <span v-if="p.type === 'service' && !p.services" style="margin-left: 5px">
-                <el-link type="primary" :underline="false" @click="toPage()">
+                <el-link type="primary" :underline="false" @click="toPage(p.key)">
                     {{ $t('app.toInstall') }}
                 </el-link>
             </span>
@@ -44,7 +44,7 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { computed, inject, onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, reactive, ref } from 'vue';
 import { getRandomStr } from '@/utils/util';
 import { GetAppService } from '@/api/modules/app';
 import { Rules } from '@/global/form-rules';
@@ -180,14 +180,8 @@ const getLabel = (row: ParamObj): string => {
     }
 };
 
-let reloadPage: Function = inject('reload');
+const toPage = (appKey: string) => {
-
+    router.push({ name: 'AppDetail', params: { appKey: appKey } });
-const toPage = () => {
-    router.push({ name: 'App' });
-    const nowPath = router.currentRoute.value.path;
-    if (nowPath && nowPath == '/apps/all') {
-        reloadPage();
-    }
 };
 
 onMounted(() => {

frontend/src/views/website/website/create/index.vue

@@ -16,20 +16,6 @@
                                 {{ item.label }}
                             </el-button>
                         </template>
-
-                        <!-- <el-button
-                            type="primary"
-                            :plain="website.type !== 'deployment'"
-                            @click="website.type = 'deployment'"
-                        >
-                            {{ $t('website.deployment') }}
-                        </el-button>
-                        <el-button type="primary" :plain="website.type !== 'static'" @click="website.type = 'static'">
-                            {{ $t('website.static') }}
-                        </el-button>
-                        <el-button type="primary" :plain="website.type !== 'proxy'" @click="website.type = 'proxy'">
-                            {{ $t('website.proxy') }}
-                        </el-button> -->
                     </span>
                 </template>
             </DrawerHeader>
@@ -227,6 +213,7 @@ const website = ref({
         appDetailId: 0,
         params: {},
         version: '',
+        appkey: '',
     },
 });
 let rules = reactive({
@@ -282,13 +269,14 @@ const searchApp = () => {
         apps.value = res.data.items;
         if (res.data.items.length > 0) {
             website.value.appinstall.appId = res.data.items[0].id;
+            website.value.appinstall.appkey = res.data.items[0].key;
             getApp();
         }
     });
 };
 
 const getApp = () => {
-    GetApp(website.value.appinstall.appId).then((res) => {
+    GetApp(website.value.appinstall.appkey).then((res) => {
         appVersions.value = res.data.versions;
         if (res.data.versions.length > 0) {
             website.value.appinstall.version = res.data.versions[0];