From f820499376aef98df884c24244e4a7347651d662 Mon Sep 17 00:00:00 2001
From: TianyangZhang <zty18395607196@163.com>
Date: Thu, 26 Mar 2026 13:41:35 +0800
Subject: [PATCH] =?UTF-8?q?feat(portal):=20=E9=87=8D=E6=9E=84=E5=85=AC?=
 =?UTF-8?q?=E5=8F=B8=E4=BB=8B=E7=BB=8D=E9=A1=B5=E9=9D=A2=EF=BC=8C=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E6=80=BB=E9=99=A2Hero=E3=80=81=E7=BB=84=E7=BB=87?=
 =?UTF-8?q?=E6=9E=B6=E6=9E=84=E5=9B=BE=E5=92=8C=E6=88=90=E5=91=98=E5=8D=95?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=91=E6=A0=BC=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/views/portal/CompanyListView.vue      | 444 +++++++++++++++++-
 1 file changed, 433 insertions(+), 11 deletions(-)

diff --git a/offer_frontend/src/views/portal/CompanyListView.vue b/offer_frontend/src/views/portal/CompanyListView.vue
index dd6db1b..cffbe62 100644
--- a/offer_frontend/src/views/portal/CompanyListView.vue
+++ b/offer_frontend/src/views/portal/CompanyListView.vue
@@ -1,20 +1,442 @@
 <template>
-  <div style="max-width:1000px;margin:0 auto">
-    <h2>公司列表</h2>
-    <el-row :gutter="16">
-      <el-col v-for="org in orgs" :key="org.id" :span="8">
-        <CompanyCard :org="org" />
-      </el-col>
-    </el-row>
+  <div class="company-page" v-if="group">
+
+    <!-- ① 总院 Hero -->
+    <section class="hero-section">
+      <div class="hero-inner">
+        <div class="hero-logo">
+          <img v-if="group.logo" :src="group.logo" alt="logo" />
+          <div v-else class="logo-placeholder">{{ group.name?.charAt(0) }}</div>
+        </div>
+        <div class="hero-content">
+          <h1 class="hero-name">{{ group.name }}</h1>
+          <div class="hero-meta">
+            <span v-if="group.email">
+              <el-icon><Message /></el-icon> {{ group.email }}
+            </span>
+            <span>
+              <el-icon><Briefcase /></el-icon> 在招职位 {{ group.job_count }} 个
+            </span>
+            <span>
+              <el-icon><OfficeBuilding /></el-icon> 成员单位 {{ group.children?.length || 0 }} 家
+            </span>
+          </div>
+          <div class="hero-desc">{{ group.description }}</div>
+          <el-button
+            type="primary"
+            class="hero-btn"
+            @click="$router.push({ name: 'JobList', query: { org: group.id } })"
+          >
+            查看全部职位
+          </el-button>
+        </div>
+      </div>
+    </section>
+
+    <!-- ② 组织架构图 -->
+    <section class="org-section">
+      <div class="section-inner">
+        <div class="section-header">
+          <span class="section-bar"></span>
+          <span class="section-title">组织架构</span>
+        </div>
+        <div class="org-chart">
+          <!-- 根节点 -->
+          <div class="org-root">
+            <div class="org-node root-node">
+              <div class="node-name">{{ group.name }}</div>
+              <div class="node-sub">集团总院</div>
+            </div>
+          </div>
+          <!-- 连接线 -->
+          <div class="org-connector">
+            <div class="v-line"></div>
+            <div class="h-line"></div>
+          </div>
+          <!-- 子节点 -->
+          <div class="org-children">
+            <div
+              v-for="child in group.children"
+              :key="child.id"
+              class="org-child-wrap"
+            >
+              <div class="child-v-line"></div>
+              <div
+                class="org-node child-node"
+                @click="$router.push(`/companies/${child.id}`)"
+              >
+                <div class="node-name">{{ child.name }}</div>
+                <div class="node-jobs" v-if="child.job_count">在招 {{ child.job_count }} 岗</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- ③ 成员单位 -->
+    <section class="members-section">
+      <div class="section-inner">
+        <div class="section-header">
+          <span class="section-bar"></span>
+          <span class="section-title">成员单位</span>
+          <span class="section-count">共 {{ group.children?.length || 0 }} 家</span>
+        </div>
+        <div class="members-grid">
+          <div
+            v-for="child in group.children"
+            :key="child.id"
+            class="member-card"
+            @click="$router.push(`/companies/${child.id}`)"
+          >
+            <div class="member-header">
+              <div class="member-logo">
+                <img v-if="child.logo" :src="child.logo" alt="logo" />
+                <div v-else class="member-logo-placeholder">{{ child.name?.charAt(0) }}</div>
+              </div>
+              <div class="member-info">
+                <div class="member-name">{{ child.name }}</div>
+                <div class="member-jobs" v-if="child.job_count">
+                  <el-tag size="small" type="success">在招 {{ child.job_count }} 个职位</el-tag>
+                </div>
+              </div>
+            </div>
+            <div class="member-desc">{{ child.description?.slice(0, 120) }}{{ child.description?.length > 120 ? '...' : '' }}</div>
+            <div class="member-footer">
+              <span class="member-email" v-if="child.email">
+                <el-icon><Message /></el-icon> {{ child.email }}
+              </span>
+              <el-button type="primary" link size="small">查看详情 →</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
   </div>
+
+  <div v-else-if="loading" v-loading="true" style="height: 400px"></div>
 </template>
+
 <script setup>
 import { ref, onMounted } from 'vue'
-import CompanyCard from '@/components/CompanyCard.vue'
+import { useRouter } from 'vue-router'
 import { getOrganizations } from '@/api/organizations'
-const orgs = ref([])
+import { Message, OfficeBuilding, Briefcase } from '@element-plus/icons-vue'
+
+const router = useRouter()
+const group = ref(null)
+const loading = ref(true)
+
 onMounted(async () => {
-  const { data } = await getOrganizations()
-  orgs.value = data.results
+  try {
+    const { data } = await getOrganizations()
+    // 取第一个顶级组织作为集团总院
+    group.value = data.results?.[0] ?? data[0] ?? null
+  } finally {
+    loading.value = false
+  }
 })
 </script>
+
+<style scoped>
+.company-page {
+  background: #f5f6fa;
+  min-height: calc(100vh - 120px);
+}
+
+/* ========== Hero ========== */
+.hero-section {
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
+  padding: 56px 0 48px;
+  color: #fff;
+}
+.hero-inner {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0 24px;
+  display: flex;
+  gap: 36px;
+  align-items: flex-start;
+}
+.hero-logo {
+  flex-shrink: 0;
+  width: 96px;
+  height: 96px;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 2px solid rgba(255,255,255,0.2);
+  background: rgba(255,255,255,0.05);
+}
+.hero-logo img { width: 100%; height: 100%; object-fit: cover; }
+.logo-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 36px;
+  font-weight: 700;
+  color: #c9a84c;
+}
+.hero-name {
+  font-size: 26px;
+  font-weight: 700;
+  margin: 0 0 12px;
+  color: #fff;
+}
+.hero-meta {
+  display: flex;
+  gap: 20px;
+  font-size: 13px;
+  color: rgba(255,255,255,0.65);
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+.hero-meta span {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.hero-desc {
+  font-size: 13px;
+  line-height: 1.9;
+  color: rgba(255,255,255,0.8);
+  max-height: 120px;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  margin-bottom: 20px;
+}
+.hero-btn {
+  background: #c9a84c !important;
+  border-color: #c9a84c !important;
+  color: #1a1a2e !important;
+  font-weight: 600;
+}
+.hero-btn:hover {
+  background: #e0bc5a !important;
+  border-color: #e0bc5a !important;
+}
+
+/* ========== 通用 Section ========== */
+.org-section,
+.members-section {
+  padding: 40px 0;
+}
+.members-section {
+  padding-bottom: 56px;
+}
+.section-inner {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 28px;
+}
+.section-bar {
+  display: inline-block;
+  width: 4px;
+  height: 20px;
+  background: #c9a84c;
+  border-radius: 2px;
+}
+.section-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1a1a2e;
+}
+.section-count {
+  font-size: 13px;
+  color: #999;
+  margin-left: 4px;
+}
+
+/* ========== 组织架构图 ========== */
+.org-chart {
+  background: #fff;
+  border-radius: 12px;
+  padding: 32px 24px 28px;
+  box-shadow: 0 1px 6px rgba(0,0,0,.06);
+  overflow-x: auto;
+}
+.org-root {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0;
+}
+.org-node {
+  border-radius: 8px;
+  padding: 10px 16px;
+  text-align: center;
+  min-width: 100px;
+}
+.root-node {
+  background: linear-gradient(135deg, #1a1a2e, #0f3460);
+  color: #fff;
+  padding: 14px 28px;
+  border-radius: 10px;
+  min-width: 220px;
+}
+.root-node .node-name {
+  font-size: 15px;
+  font-weight: 700;
+  color: #fff;
+  line-height: 1.4;
+}
+.root-node .node-sub {
+  font-size: 11px;
+  color: #c9a84c;
+  margin-top: 4px;
+}
+.org-connector {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.v-line {
+  width: 2px;
+  height: 24px;
+  background: #d0d0d0;
+}
+.h-line {
+  width: calc(100% - 40px);
+  height: 2px;
+  background: #d0d0d0;
+  min-width: 600px;
+}
+.org-children {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 900px;
+}
+.org-child-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+.child-v-line {
+  width: 2px;
+  height: 20px;
+  background: #d0d0d0;
+}
+.child-node {
+  background: #f0f4ff;
+  border: 1px solid #d0d9f0;
+  cursor: pointer;
+  transition: all 0.2s;
+  width: 100%;
+  box-sizing: border-box;
+}
+.child-node:hover {
+  background: #1a1a2e;
+  border-color: #1a1a2e;
+}
+.child-node:hover .node-name {
+  color: #fff;
+}
+.child-node:hover .node-jobs {
+  color: #c9a84c;
+}
+.child-node .node-name {
+  font-size: 11px;
+  font-weight: 600;
+  color: #1a1a2e;
+  line-height: 1.4;
+}
+.child-node .node-jobs {
+  font-size: 10px;
+  color: #888;
+  margin-top: 3px;
+}
+
+/* ========== 成员单位网格 ========== */
+.members-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+}
+@media (max-width: 900px) {
+  .members-grid { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 600px) {
+  .members-grid { grid-template-columns: 1fr; }
+}
+.member-card {
+  background: #fff;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 1px 4px rgba(0,0,0,.06);
+  cursor: pointer;
+  transition: box-shadow 0.2s, transform 0.2s;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.member-card:hover {
+  box-shadow: 0 4px 16px rgba(0,0,0,.12);
+  transform: translateY(-2px);
+}
+.member-header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+.member-logo {
+  width: 44px;
+  height: 44px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #eee;
+  flex-shrink: 0;
+}
+.member-logo img { width: 100%; height: 100%; object-fit: cover; }
+.member-logo-placeholder {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #1a1a2e, #0f3460);
+  color: #c9a84c;
+  font-size: 18px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.member-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1a1a2e;
+  line-height: 1.4;
+  margin-bottom: 4px;
+}
+.member-desc {
+  font-size: 12px;
+  color: #666;
+  line-height: 1.8;
+  flex: 1;
+}
+.member-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-top: 1px solid #f0f0f0;
+  padding-top: 10px;
+  font-size: 12px;
+  color: #999;
+}
+.member-email {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 60%;
+}
+</style>