u

code/link56/link56-frontend-new/src/App.vue

@@ -24,6 +24,7 @@ function handleInitData() {
     console.log(err)
     ElMessage.error('初始化失败，请刷新页面后重试')
   })
+
 }
 </script>
 

code/link56/link56-frontend-new/src/components/QueryCompany.vue

@@ -1,43 +1,19 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue'
-import type { Area, CompanyQuery, Industry } from '@/types/base'
-import { computed } from 'vue'
+import { useCommonStore } from '@/store/common'
 import AreaSelect from './AreaSelect.vue'
 import IndustrySelect from './IndustrySelect.vue'
 
-const props = defineProps({
-  modelValue: {
-    type: Object as PropType<CompanyQuery>,
-    required: true,
-  },
-  industries: {
-    type: Object as PropType<Industry[]>,
-    required: false,
-  },
-  areas: {
-    type: Object as PropType<Area[]>,
-    required: false,
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const query = computed({
-  get: () => props.modelValue,
-  set: (val: CompanyQuery) => {
-    emit('update:modelValue', val)
-  },
-})
+const commonStore = useCommonStore()
 </script>
 
 <template>
   <div class="query">
     <div class="query-item">
-      <IndustrySelect v-model="query.industries" />
+      <IndustrySelect v-model="commonStore.companyQuery.industries" />
     </div>
     <div class="query-item">
       <AreaSelect
-        v-model="query.areas"
+        v-model="commonStore.companyQuery.areas"
         multiple
         check-strictly
         collapse-tags
@@ -47,7 +23,7 @@ const query = computed({
     </div>
     <div class="query-item">
       <el-input
-        v-model="query.name"
+        v-model="commonStore.companyQuery.name"
         placeholder="请输入公司名称"
       />
     </div>
@@ -67,6 +43,8 @@ const query = computed({
   border-radius: 4px;
   border: 0;
   color: #000;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
   .query-item {
     flex: 1;
 
@@ -100,7 +78,7 @@ const query = computed({
       margin-left: 0px;
       font-size: 18px;
     }
-    :deep(.el-input__suffix){
+    :deep(.el-input__suffix) {
       padding-right: 12px;
     }
     &:first-child {

code/link56/link56-frontend-new/src/layout/components/header.vue

@@ -8,7 +8,7 @@ const userStore = useUserStore()
 
 const menuList = [
   { name: '首页', path: '/' },
-  { name: '企业名录', path: '/companies' },
+  { name: '企业名录', path: '/company' },
   { name: '论坛中心', path: '/forum' },
   { name: '关于我们', path: '/companies' },
   { name: '联系我们', path: '/forum' },
@@ -23,6 +23,13 @@ function exitLogin() {
 
   navigateTo('/auth/login')
 }
+
+function isActive(path: string) {
+  if (path === '/') {
+    return route.path === '/'
+  }
+  return route.path === path || route.path.startsWith(`${path}/`)
+}
 </script>
 
 <template>
@@ -33,8 +40,9 @@ function exitLogin() {
         <span
           v-for="item in menuList"
           :key="item.path"
-          :class="{ active: route.path.startsWith(item.path) }"
+          :class="{ active: isActive(item.path) }"
           class="menu-item"
+          @click="navigateTo(item.path)"
         >
           <span class="menu-item-name">
             {{ item.name }}

code/link56/link56-frontend-new/src/request/api/company/index.ts

@@ -0,0 +1,10 @@
+import type { RecommendCompany, RecommendHotCompany } from '@/types/company'
+import { httpGet } from '@/request/utils'
+
+export function getRecommendCompanyApi() {
+  return httpGet<RecommendCompany[]>('/company/recommend')
+}
+
+export function getRecommendHotCompanyApi() {
+  return httpGet<RecommendHotCompany[]>('/company/recommend/hot')
+}

code/link56/link56-frontend-new/src/router/index.ts

@@ -14,6 +14,10 @@ const router = createRouter({
           path: '/',
           component: () => import('@/views/home/index.vue'),
         },
+        {
+          path: '/company',
+          component: () => import('@/views/company/index.vue'),
+        },
       ],
     },
     {

code/link56/link56-frontend-new/src/types/company/index.ts

@@ -0,0 +1,14 @@
+export interface RecommendCompany {
+  shengName: string
+  shiName: string
+  companies: {
+    id: number
+    name: string
+    color: string
+  }[]
+}
+
+export interface RecommendHotCompany {
+  id: number
+  name: string
+}

code/link56/link56-frontend-new/src/views/company/index.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import QueryCompany from '@/components/QueryCompany.vue'
+</script>
+
+<template>
+  <div class="wrapper">
+    <div class="query">
+      <QueryCompany style="width: 1200px;" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.wrapper {
+  width: 100%;
+  .query {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20px;
+  }
+}
+</style>

code/link56/link56-frontend-new/src/views/home/components/recommend.vue

@@ -1,26 +1,15 @@
 <script lang="ts" setup>
-const tableData = [
-  {
-    date: '2016-05-03',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
+import type { PropType } from 'vue'
+import type { RecommendCompany, RecommendHotCompany } from '@/types/company'
+
+defineProps({
+  recommedCompanies: {
+    type: Object as PropType<RecommendCompany[]>,
   },
-  {
-    date: '2016-05-02',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
+  recommedHotCompanies: {
+    type: Object as PropType<RecommendHotCompany[]>,
   },
-  {
-    date: '2016-05-04',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-]
+})
 </script>
 
 <template>
@@ -29,12 +18,21 @@ const tableData = [
       <div class="recommend-title">
         企业名录
       </div>
-
-      <!-- <el-table :data="tableData" style="width: 100%" :show-header="false">
-        <el-table-column prop="date" label="地区" width="180" />
-        <el-table-column prop="name" label="公司" />
-      </el-table> -->
-      <el-empty description="暂无企业名录" style="background-color: #fff;" />
+      <div v-if="recommedCompanies && recommedCompanies.length > 0" class="area-list">
+        <div v-for="(item, index) in recommedCompanies" :key="index" class="area-row">
+          <div class="area-name">
+            {{ item.shengName }} {{ item.shiName }}
+          </div>
+          <div class="area-company-box">
+            <div class="area-company-list">
+              <div v-for="company in item.companies" :key="company.id" class="area-company-item" :style="{ color: company.color || '#000' }">
+                {{ company.name }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <el-empty v-else description="暂无企业名录" style="background-color: #fff;" />
     </div>
 
     <div class="right">
@@ -43,12 +41,18 @@ const tableData = [
           热门推荐
         </div>
         <div class="hot-card-list">
-          <el-empty description="暂无热门推荐" />
+          <template v-if="recommedHotCompanies && recommedHotCompanies.length > 0">
+            <div
+              v-for="(item, i) in recommedHotCompanies"
+              :key="item.id"
+              class="hot-card-item"
+            >
+              <span class="number">{{ i + 1 }}</span>
+              <span class="name">{{ item.name }}</span>
+            </div>
+          </template>
 
-          <!-- <div v-for="i in 10" :key="i" class="hot-card-item">
-            <span class="number">{{ i }}</span>
-            <span class="name">xxxxxxxxxx公司公司</span>
-          </div> -->
+          <el-empty v-else description="暂无热门推荐" />
         </div>
       </div>
     </div>
@@ -75,6 +79,7 @@ const tableData = [
         display: flex;
         flex-direction: column;
         background-color: #fff;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
         .hot-card-item {
           display: flex;
           align-items: center;
@@ -109,5 +114,63 @@ const tableData = [
     position: relative;
     margin-bottom: 12px;
   }
+  .area-list {
+    background-color: #fff;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+    overflow: hidden;
+
+    .area-row {
+      display: flex;
+      align-items: stretch;
+      border-bottom: 1px solid #e0e3e8;
+      transition: background-color 0.2s;
+    }
+
+    .area-row:hover {
+      background-color: #f9f9fb;
+    }
+
+    .area-row:last-child {
+      border-bottom: none;
+    }
+
+    .area-name {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 15%;
+      background-color: #f8f9fa;
+      color: #34495e;
+      font-weight: bold;
+      border-right: 1px solid #e0e3e8;
+      padding: 12px;
+      font-size: 15px;
+    }
+
+    .area-company-box {
+      flex: 1;
+      padding: 14px 20px;
+      background-color: #ffffff;
+    }
+
+    .area-company-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px 16px;
+    }
+
+    .area-company-item {
+      padding-left: 10px;
+      line-height: 1.8;
+      font-size: 14px;
+      color: #333;
+      cursor: pointer;
+    }
+
+    .area-company-item:hover {
+      color: #1e80ff;
+      text-decoration: underline;
+    }
+  }
 }
 </style>

code/link56/link56-frontend-new/src/views/home/index.vue

@@ -1,5 +1,8 @@
 <script lang="ts" setup>
+import type { RecommendCompany, RecommendHotCompany } from '@/types/company'
+import { onMounted, ref } from 'vue'
 import QueryCompany from '@/components/QueryCompany.vue'
+import { getRecommendCompanyApi, getRecommendHotCompanyApi } from '@/request/api/company'
 import { useCommonStore } from '@/store/common'
 import Recommend from './components/recommend.vue'
 
@@ -10,6 +13,22 @@ const carouselList = [
   { img: '/ship-8263464_1920.jpg', href: '' },
   { img: '/ship-8263464_1920.jpg', href: '' },
 ]
+
+const recommendCompanies = ref<RecommendCompany[]>([])
+const recommendHotCompanies = ref<RecommendHotCompany[]>([])
+
+onMounted(() => {
+  getRecommendCompanyApi().then((res) => {
+    if (res.isSuccess) {
+      recommendCompanies.value = res.data
+    }
+  })
+  getRecommendHotCompanyApi().then((res) => {
+    if (res.isSuccess) {
+      recommendHotCompanies.value = res.data
+    }
+  })
+})
 </script>
 
 <template>
@@ -32,7 +51,7 @@ const carouselList = [
       </div>
     </div>
 
-    <Recommend />
+    <Recommend :recommed-companies="recommendCompanies" :recommed-hot-companies="recommendHotCompanies" />
   </div>
 </template>