Tcode平台改造升级-用户工作台页面样式优化及邀请你的团队功能开发

src/api/jyh/auth.ts

@@ -0,0 +1,37 @@
+import request from '@/utils/request';
+
+export const getCaptcha = (account: any, password: any) => {
+  return request({
+    url: `/u-auth/index/getCaptcha`,
+    method: 'POST',
+    data: {
+      account,
+      password,
+      loginCode: 'admin'
+    },
+    responseType: 'blob'
+  });
+};
+export const login = (account: any, code: any, password: any) => {
+  return request({
+    url: `/u-auth/index/login`,
+    method: 'POST',
+    data: {
+      account,
+      code,
+      password,
+      loginCode: 'admin'
+    }
+  });
+};
+export const sendSms = (account: any) => {
+  return request({
+    url: `/u-auth/index/send-sms`,
+    method: 'POST',
+    data: {
+      account,
+      action:'login',
+      loginCode: 'admin'
+    }
+  });
+};

src/assets/css/jyh.scss

@@ -537,3 +537,25 @@ img:hover {
   display: inline-block;
   height: 12px;
 }
+
+
+.TeamSetupModal {
+  width: 600px !important;
+  background: rgb(27, 25, 19);
+
+
+  .devui-modal__header {
+    text-align: center;
+    font-size: 24px;
+    font-weight: bold;
+    color: #ffffff;
+  }
+
+  .devui-modal__body {
+    padding: 4rem;
+  }
+
+  .modal-actions-footer {
+    padding: 0 4rem 2rem;
+  }
+}

src/components/Header/AIHeader.vue

@@ -53,13 +53,14 @@
             </div>
           </d-button>
 
-          <template v-if="!isLogin">
+<!--          <template v-if="!isLogin">-->
-            <d-button @click="handleLogin('register')" class="min-w-[64px]">注册</d-button>
+<!--            <d-button @click="handleLogin('register')" class="min-w-[64px]">注册</d-button>-->
-            <d-button variant="solid" color="primary" @click="handleLogin('login')">账号登录</d-button>
+<!--            <d-button variant="solid" color="primary" @click="handleLogin('login')">账号登录</d-button>-->
-          </template>
+<!--          </template>-->
-          <template v-else>
+<!--          <template v-else>-->
-            <UserAvatar />
+<!--            <UserAvatar />-->
-          </template>
+<!--          </template>-->
+          <UserAvatar />
 
         </div>
       </div>

src/components/LoginModal/index.vue

@@ -60,8 +60,8 @@
               size="lg"
               class="verify-input"
             />
-            <div class="captcha-box" @click="refreshCaptcha">
+            <div class="captcha-box">
-              <span>x j 7 2</span>
+              <img class="code" :src="codeDir" alt="验证码图片" @click="getCaptchaUrl" />
             </div>
           </div>
         </template>
@@ -123,7 +123,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue';
+import { ref, reactive,onMounted } from 'vue';
 import { useModel } from '@/utils/hooks/useModel';
 // 引入 DevUI 组件 (确保已安装)
 import { Modal as DModal } from 'vue-devui/modal';
@@ -132,6 +132,7 @@ import { Button as DButton } from 'vue-devui/button';
 import { Checkbox as DCheckbox } from 'vue-devui/checkbox';
 import { Message } from 'vue-devui/message';
 import {useRouter} from "vue-router";
+import {getCaptcha} from "@/api/jyh/auth";
 
 // 定义 Props 和 Emits
 const props = withDefaults(defineProps<{
@@ -170,18 +171,22 @@ const count = ref(60);
 const isCounting = ref(false);
 let timer: any = null;
 
-// --- 方法 ---
+const codeDir = ref('');
+
+
+const getCaptchaUrl = () => {
+  getCaptcha().then((res) => {
+    const imageUrl = URL.createObjectURL(res.data);
+    codeDir.value = imageUrl;
+  });
+};
+
 
 const handleClose = (close: Function) => {
   emits('close');
   close();
 };
 
-const refreshCaptcha = () => {
-  // TODO: 调用刷新图形验证码接口
-  console.log('刷新验证码');
-};
-
 const getSmsCode = async () => {
   if (!loginForm.mobile) {
     Message.warning('请输入手机号');
@@ -240,6 +245,11 @@ const switchToRegister = () => {
   // 切换到注册模式或跳转
   emits('go-register');
 };
+
+
+onMounted(() => {
+  getCaptchaUrl();
+});
 </script>
 
 <style lang="scss">

src/views/Jyh/Dashboard/Header.vue

@@ -0,0 +1,236 @@
+<template>
+  <header class="app-header">
+    <div class="header-left">
+      <button class="logo-btn" aria-label="Home">
+        <a aria-current="page" href="/" class="router-link-active router-link-exact-active logo">
+          <img src="@/assets/imgs/logo3.png" alt="Tcode">
+        </a>
+      </button>
+    </div>
+
+    <div class="header-right">
+      <div class="agent-text"><router-link to="/ai/home">AI大模型</router-link></div>
+
+      <button class="user-avatar-btn" @click="toggleDropdown" aria-label="User Account">
+        用
+      </button>
+
+      <transition name="dropdown">
+        <div v-if="isDropdownOpen" class="user-dropdown-menu">
+          <div class="dropdown-header">
+            <div class="user-name">用户名</div>
+            <div class="user-email">123456@gmail.com</div>
+          </div>
+          <hr class="dropdown-divider">
+
+          <a href="#" class="dropdown-item download-link">
+            下载适用于 Windows 的版本
+          </a>
+          <hr class="dropdown-divider">
+
+          <button @click="logout" class="dropdown-item logout-btn">
+            退出登录
+            <span class="logout-icon">→</span>
+          </button>
+        </div>
+      </transition>
+    </div>
+  </header>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import {toLogout} from "@/api/user";
+import {reqCatch} from "@/utils/catch";
+import {devLogout} from "@/api/org/devIndex";
+import {useAccount} from "@/utils/hooks/useAccount";
+import {useRoute, useRouter} from "vue-router";
+
+// 控制下拉菜单的显示/隐藏状态
+const isDropdownOpen = ref(false);
+
+const toggleDropdown = () => {
+  isDropdownOpen.value = !isDropdownOpen.value;
+};
+
+// 点击外部关闭下拉菜单的逻辑
+const closeDropdown = (event) => {
+  // 检查点击事件是否发生在下拉菜单或其触发按钮之外
+  const header = document.querySelector('.app-header');
+  if (header && !header.contains(event.target)) {
+    isDropdownOpen.value = false;
+  }
+};
+const route = useRoute();
+const router = useRouter();
+const { accountInfo, RemoveInfo } = useAccount();
+const logout = async () => {
+  RemoveInfo(); // 目前先强制清除用户信息，后面接口通了再调
+  const res = await toLogout();
+  await reqCatch(devLogout, {}); // 清除社区登录
+  if (!res.error) {
+    RemoveInfo();
+    router.push('/');
+  }
+  // 退出系统刷新页面
+  setTimeout(() => {
+    location.reload();
+  }, 100);
+};
+
+
+onMounted(() => {
+  document.addEventListener('click', closeDropdown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', closeDropdown);
+});
+</script>
+
+<style scoped>
+.app-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 56px; /* 常见 Header 高度 */
+  padding: 0 16px;
+  background-color: rgb(20, 18, 11);
+  color: #fff;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+/* ------------------- 左侧 Logo ------------------- */
+.logo-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+
+.logo-btn svg circle {
+  fill: #fff;
+}
+
+/* ------------------- 右侧区域 ------------------- */
+.header-right {
+  display: flex;
+  align-items: center;
+  position: relative; /* 用于定位下拉菜单 */
+}
+
+.agent-text {
+  font-size: 14px;
+  margin-right: 12px;
+  color: #ccc; /* 略微浅灰色 */
+}
+
+/* 用户头像/首字母按钮 */
+.user-avatar-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: #333; /* 头像背景色 */
+  color: #fff;
+  font-weight: bold;
+  font-size: 14px;
+  border: 1px solid #666; /* 模仿图片的圆形边框 */
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+}
+
+/* ------------------- 下拉菜单样式 ------------------- */
+.user-dropdown-menu {
+  position: absolute;
+  top: 48px; /* 位于 header 底部下方 */
+  right: 0;
+  min-width: 250px;
+  background-color: #2b2b2b; /* 下拉菜单背景色 */
+  border: 1px solid #444;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  padding: 8px 0;
+  z-index: 1001;
+}
+
+/* 头部信息 (姓名和邮箱) */
+.dropdown-header {
+  padding: 8px 16px;
+  margin-bottom: 8px;
+}
+
+.user-name {
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.user-email {
+  font-size: 12px;
+  color: #aaa;
+}
+
+/* 分隔线 */
+.dropdown-divider {
+  border: none;
+  border-top: 1px solid #3c3c3c;
+  margin: 4px 0;
+}
+
+/* 菜单项基础样式 (链接和按钮) */
+.dropdown-item {
+  display: flex;
+  width: 100%;
+  padding: 10px 16px;
+  font-size: 14px;
+  color: #fff;
+  background: none;
+  border: none;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 0.15s;
+  box-sizing: border-box;
+  align-items: center;
+}
+
+.dropdown-item:hover {
+  background-color: #3c3c3c; /* 悬停背景色 */
+}
+
+/* 下载链接样式 */
+.download-link {
+  color: #58a6ff; /* 蓝色突出 */
+}
+
+/* 退出登录样式 */
+.logout-btn {
+  justify-content: space-between;
+}
+
+.logout-icon {
+  font-size: 16px;
+  margin-left: 10px;
+  line-height: 1;
+}
+
+/* Vue 过渡动画 */
+.dropdown-enter-active, .dropdown-leave-active {
+  transition: opacity 0.2s, transform 0.2s;
+}
+.dropdown-enter-from, .dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-5px);
+}
+
+.logo img {
+  display: block;
+  height: auto;
+  width: 86px
+}
+</style>

src/views/Jyh/Dashboard/Integration.vue

@@ -92,9 +92,9 @@ $highlight-yellow: #f5a623; // 黄色提示
 
 
 .content-area {
-  background-color: #121212;
+  background-color: rgb(20, 18, 11);
   padding: 40px 60px;
-  overflow-y: auto;
+  //overflow-y: auto;
 }
 
 

src/views/Jyh/Dashboard/billing.vue

@@ -63,10 +63,9 @@ $border-color: #333333; // 分隔线颜色
 
 
 .content-area {
-  // 继承自父组件，作为页面容器
+  background-color: rgb(20, 18, 11);
-  background-color: #121212; // 确保背景色足够深
   padding: 40px 60px;
-  overflow-y: auto;
+  //overflow-y: auto;
 }
 
 .billing-container {

src/views/Jyh/Dashboard/expense.vue

@@ -25,7 +25,7 @@
 
 <style scoped>
 .content-area {
-  background-color: #121212;
+  background-color: rgb(20, 18, 11);
   padding: 40px 60px;
   /*overflow-y: auto;*/
 }

src/views/Jyh/Dashboard/index.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="app-container">
+    <d-header class="dheader">
+      <Header />
+    </d-header>
     <d-layout class="main-layout">
       <d-aside class="sidebar">
         <div class="user-profile">
@@ -46,7 +49,7 @@
           </div>
         </div>
 
-        <div class="spacer"></div>
+<!--        <div class="spacer"></div>-->
 
         <div class="nav-menu bottom-menu">
           <div
@@ -101,13 +104,14 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import OverView from './overview.vue';
+import OverView from './overview/index.vue';
 import Setting from './setting.vue';
 import Integration from './Integration.vue';
 import Proxy from './proxy.vue';
 import Usage from './usage.vue';
 import Expense from './expense.vue';
 import Billing from './billing.vue';
+import Header from './Header.vue';
 
 // 定义菜单映射关系
 const menuComponents = {
@@ -133,20 +137,28 @@ const currentComponent = computed(() => {
 /* 全局暗黑重置 */
 .app-container {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  background-color: #0c0c0c;
+  background-color: rgb(20, 18, 11);
   color: #fff;
-  height: 100vh;
+  //min-height: 100vh;
+  height: 100%;
   width: 100%;
-  overflow: hidden;
+  overflow-y: auto;
 }
 
 .main-layout {
-  height: 100%;
+  min-height: calc(100% - 56px);
+
+
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  max-width: 1344px;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
 }
 
-/* --- 侧边栏样式 --- */
 .sidebar {
-  background-color: #121212; /* 比背景稍亮一点 */
+  background-color: rgb(20, 18, 11);
   width: 260px;
   border-right: 1px solid #252525;
   padding: 20px 16px;

src/views/Jyh/Dashboard/overview/InviteMemberModal.vue

@@ -0,0 +1,92 @@
+<template>
+  <d-modal
+    :modelValue="visible"
+    title="邀请团队成员"
+    :close-on-click-overlay="true"
+    :show-close="true"
+    @close="$emit('update:visible', false)"
+    class="TeamSetupModal"
+  >
+    <div class="invite-member-content">
+
+      <div class="form-group">
+        <label>输入成员的邮箱</label>
+        <input type="email" placeholder="member@example.com" v-model="inviteEmail">
+      </div>
+
+    </div>
+
+    <template #footer>
+      <div class="modal-actions-footer">
+        <button class="primary-btn" @click="sendInvite">邀请</button>
+      </div>
+    </template>
+  </d-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  }
+});
+const emit = defineEmits(['update:visible', 'invite-sent']);
+const inviteEmail = ref('');
+
+const sendInvite = () => {
+  if (inviteEmail.value) {
+    alert(`邀请已发送给: ${inviteEmail.value}`);
+    emit('invite-sent', inviteEmail.value);
+    emit('update:visible', false); // 关闭模态框
+  } else {
+    alert('请输入有效的邮箱地址');
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 14px;
+  color: #a0a0a0;
+  margin-bottom: 8px;
+}
+
+input[type="email"] {
+  width: 100%;
+  padding: 10px 12px;
+  background-color: #2b2b2b;
+  border: 1px solid #444;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+
+/* 底部按钮排版，使用 footer 插槽需要自定义样式 */
+.modal-actions-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%; /* 使按钮占满宽度 */
+}
+
+.primary-btn {
+  padding: 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  width: 100%;
+  font-weight: bold;
+  background-color: #fff;
+  color: #000;
+  border: none;
+}
+</style>

src/views/Jyh/Dashboard/overview/TeamSetupModal.vue

@@ -0,0 +1,254 @@
+<template>
+  <d-modal
+    class="TeamSetupModal"
+    :modelValue="visible"
+    title="组建团队"
+    :close-on-click-overlay="true"
+    :show-close="true"
+    @close="$emit('update:visible', false)"
+  >
+    <div class="team-setup-content">
+
+      <div class="form-group">
+        <label>您当前登录身份为:</label>
+        <input type="text" :value="userEmail" disabled class="disabled-input">
+      </div>
+
+      <div class="form-group">
+        <label>团队名称</label>
+        <input type="text" placeholder="请输入您的团队名称">
+      </div>
+
+      <div class="form-group seats-group">
+        <label>你们需要多少个座位?</label>
+        <div class="seat-controls">
+          <button @click="adjustSeats(-1)" :disabled="seats === 2">-</button>
+          <span>{{ seats }}</span>
+          <button @click="adjustSeats(1)">+</button>
+          <span class="seat-note">至少需要 2 个座位</span>
+        </div>
+        <p class="small-text">您可以根据需要稍后添加更多团队成员。</p>
+      </div>
+
+      <div class="checkbox-group">
+        <label>
+          <input type="checkbox" v-model="agreeToTerms">
+          我的团队的代码和使用数据将用于改进 Cursor。
+        </label>
+        <span class="link-text">改变</span>
+      </div>
+
+      <div class="plan-info">
+        团队计划 ({{ seats }}个席位) <span>每月{{ seats * 40 }}美元</span>
+      </div>
+
+      <div class="annual-billing">
+        年度结算
+        <div class="toggle-switch">
+          <input type="checkbox" id="annual" v-model="annualBilling">
+          <label for="annual"></label>
+        </div>
+      </div>
+
+    </div>
+
+    <template #footer>
+      <div class="modal-actions-footer">
+        <button class="primary-btn" @click="$emit('create-team'); $emit('update:visible', false);">创建团队</button>
+        <button class="secondary-btn">使用其他帐户登录</button>
+      </div>
+    </template>
+  </d-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+// 假设 DevUI 组件库已全局或局部注册，这里无需额外导入 d-modal
+
+const props = defineProps({
+  // 必须使用 modelValue 来匹配 v-model
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  userEmail: {
+    type: String,
+    default: 'fukang10032@gmail.com'
+  }
+});
+
+// 使用 update:visible 事件来实现 v-model 双向绑定
+const emit = defineEmits(['update:visible', 'create-team']);
+
+const seats = ref(2);
+const agreeToTerms = ref(false);
+const annualBilling = ref(false);
+
+const adjustSeats = (delta) => {
+  if (seats.value + delta >= 2) {
+    seats.value += delta;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 14px;
+  color: #a0a0a0;
+  margin-bottom: 8px;
+}
+
+input[type="text"], .disabled-input {
+  width: 100%;
+  padding: 10px 12px;
+  background-color: #2b2b2b;
+  border: 1px solid #444;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+
+.disabled-input {
+  cursor: not-allowed;
+  color: #888;
+}
+
+.seat-controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 5px;
+}
+
+.seat-controls button {
+  width: 30px;
+  height: 30px;
+  background-color: #3b3b3b;
+  border: 1px solid #555;
+  color: #fff;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.seat-controls button:disabled {
+  background-color: #2b2b2b;
+  color: #666;
+  cursor: not-allowed;
+}
+
+.seat-note {
+  font-size: 14px;
+  color: #a0a0a0;
+}
+
+.small-text {
+  font-size: 12px;
+  color: #888;
+  margin-top: 5px;
+}
+
+.checkbox-group {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  font-size: 14px;
+}
+
+.checkbox-group label {
+  color: #a0a0a0;
+}
+
+.link-text {
+  color: #58a6ff;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.plan-info {
+  font-size: 16px;
+  color: #fff;
+  margin-bottom: 15px;
+}
+
+.plan-info span {
+  font-weight: bold;
+  float: right;
+}
+
+.annual-billing {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30px;
+  color: #a0a0a0;
+}
+
+/* 简化开关样式 (Toggle Switch) */
+.toggle-switch input[type="checkbox"] {
+  display: none;
+}
+.toggle-switch label {
+  cursor: pointer;
+  width: 40px;
+  height: 20px;
+  background-color: #444;
+  border-radius: 10px;
+  position: relative;
+  display: block;
+}
+.toggle-switch label:after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  background-color: #ccc;
+  border-radius: 50%;
+  transition: 0.3s;
+}
+.toggle-switch input:checked + label {
+  background-color: #58a6ff;
+}
+.toggle-switch input:checked + label:after {
+  left: calc(100% - 18px);
+  background-color: white;
+}
+
+
+/* 底部按钮排版，使用 footer 插槽需要自定义样式 */
+.modal-actions-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%; /* 使按钮占满宽度 */
+}
+
+.primary-btn, .secondary-btn {
+  padding: 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  width: 100%;
+  font-weight: bold;
+}
+
+.primary-btn {
+  background-color: #fff;
+  color: #000;
+  border: none;
+}
+
+.secondary-btn {
+  background-color: transparent;
+  color: #fff;
+  border: 1px solid #444;
+}
+</style>

src/views/Jyh/Dashboard/overview/index.vue

@@ -26,9 +26,18 @@
         <h3>邀请团队成员</h3>
         <p>利用管理控制、分析和企业级安全功能，加速您的团队发展</p>
       </div>
-      <d-button class="invite-btn" variant="outline">邀请您的团队</d-button>
+      <d-button class="invite-btn" variant="outline" @click="handleInviteClick">邀请您的团队</d-button>
     </div>
 
+    <TeamSetupModal
+      v-model:visible="showSetupModal"
+      @create-team="handleTeamCreation"
+    />
+    <InviteMemberModal
+      v-model:visible="showInviteModal"
+      @invite-sent="handleInviteSent"
+    />
+
     <div class="integration-list">
 
       <div class="integration-item">
@@ -39,7 +48,7 @@
             <div class="inte-desc">连接 GitHub 以获取云代理、Bugbot 和增强的代码库上下文</div>
           </div>
         </div>
-        <d-button class="connect-btn">连接 <i class="icon-link-external"></i></d-button>
+        <d-button class="connect-btn">LINK <i class="icon-link-external"></i></d-button>
       </div>
 
       <div class="integration-item">
@@ -50,7 +59,7 @@
             <div class="inte-desc">连接 GitLab 以用于云代理、Bugbot 和增强的代码库上下文</div>
           </div>
         </div>
-        <d-button class="connect-btn">连接 <i class="icon-link-external"></i></d-button>
+        <d-button class="connect-btn">LINK <i class="icon-link-external"></i></d-button>
       </div>
 
       <div class="integration-item">
@@ -60,7 +69,7 @@
           <div class="inte-desc">通过 Slack 与云代理协作</div>
         </div>
         </div>
-        <d-button class="connect-btn disabled" disabled>连接 <i class="icon-link-external"></i></d-button>
+        <d-button class="connect-btn disabled" disabled>LINK <i class="icon-link-external"></i></d-button>
       </div>
 
       <div class="integration-item">
@@ -71,7 +80,7 @@
             <div class="inte-desc">连接 Linear 工作区，将问题委派给云代理</div>
           </div>
         </div>
-        <d-button class="connect-btn">连接 <i class="icon-link-external"></i></d-button>
+        <d-button class="connect-btn">LINK <i class="icon-link-external"></i></d-button>
       </div>
 
     </div>
@@ -79,18 +88,42 @@
   </d-content>
 </template>
 
-<script>
+<script setup>
-export default {
+import { ref } from 'vue';
-name: "overview"
+import TeamSetupModal from './TeamSetupModal.vue';
-}
+import InviteMemberModal from './InviteMemberModal.vue';
+
+// 状态管理
+const showSetupModal = ref(false);
+const showInviteModal = ref(false);
+
+// 模拟团队状态：true表示用户已经有团队，false表示没有
+const hasTeam = ref(false);
+
+// 处理邀请团队按钮点击
+const handleInviteClick = () => {
+  if (hasTeam.value) {
+    showInviteModal.value = true;
+  } else {
+    showSetupModal.value = true;
+  }
+};
+
+const handleTeamCreation = () => {
+  alert('团队创建成功！');
+  hasTeam.value = true;
+};
+
+const handleInviteSent = (email) => {
+  console.log(`邀请已发送给: ${email}`);
+};
 </script>
 
 <style lang="scss" scoped>
-/* --- 右侧内容样式 --- */
 .content-area {
-  background-color: #121212;
+  background-color: rgb(20, 18, 11);
   padding: 40px 60px;
-  overflow-y: auto;
+  //overflow-y: auto;
 }
 
 /* 顶部卡片 */

src/views/Jyh/Dashboard/proxy.vue

@@ -125,9 +125,9 @@ $button-bg: #444444; // 试用按钮背景色
 
 
 .content-area {
-  background-color: #121212;
+  background-color: rgb(20, 18, 11);
   padding: 40px 60px;
-  overflow-y: auto;
+  //overflow-y: auto;
 }
 
 

src/views/Jyh/Dashboard/setting.vue

@@ -90,9 +90,9 @@ $highlight-orange: #f5a623;
 $delete-red: #a93b4d;
 
 .content-area {
-  background-color: #121212;
+  background-color: rgb(20, 18, 11);
   padding: 40px 60px;
-  overflow-y: auto;
+  //overflow-y: auto;
 }
 
 

src/views/Jyh/Dashboard/usage.vue

@@ -96,9 +96,9 @@ $active-tag-bg: #444444;
 
 
 .content-area {
-  background-color: #121212;
+  background-color: rgb(20, 18, 11);
   padding: 40px 60px;
-  overflow-y: auto;
+  //overflow-y: auto;
 }
 
 

vite.config.ts

@@ -38,6 +38,12 @@ export default (config: any) => {
       },
       proxy: {
         // 配置跨域代理
+        '/gateway/official/u-auth': {
+          // target: 'http://223.76.236.155:20011', // 目标服务器地址
+          target: 'http://222.20.126.217:9700', // 目标服务器地址
+          changeOrigin: true, // 允许跨域
+          rewrite: (path) => path.replace('/gateway/official/u-auth', '/gateway/u-auth') // 重写路径
+        },
         '/gateway': {
           // target: 'http://223.76.236.155:20011', // 目标服务器地址
           target: 'http://222.20.126.217:10010', // 目标服务器地址