diff --git a/src/assets/css/devui.scss b/src/assets/css/devui.scss
index d9c2446..30966d4 100644
--- a/src/assets/css/devui.scss
+++ b/src/assets/css/devui.scss
@@ -310,3 +310,20 @@ circle.devui-radio__material-outer {
   padding: 16px 20px;
 }
 
+
+.tcode-login-modal {
+  width: 600px;
+  :deep(.devui-modal) {
+    width: 600px !important;
+  }
+  .devui-modal__header {
+    border-bottom: none;
+    padding: 0;
+  }
+  .devui-modal__body {
+    padding: 0; /* 移除默认内边距，由内部控制 */
+  }
+  .btn-close {
+    z-index: 10; /* 确保关闭按钮在最上层 */
+  }
+}
diff --git a/src/components/Header/index.vue b/src/components/Header/index.vue
index a221508..a5c80b8 100644
--- a/src/components/Header/index.vue
+++ b/src/components/Header/index.vue
@@ -1463,7 +1463,7 @@ const handleLogin = (type) => {
     justify-content: center;
     letter-spacing: 8px;
     padding: 10px;
-    margin: 0 16px;
+    margin: 0 16px 0 14px;
     text-align: center;
     /*width: 60px;*/
   }
diff --git a/src/components/LoginModal/index.vue b/src/components/LoginModal/index.vue
index dae3195..2a10acb 100644
--- a/src/components/LoginModal/index.vue
+++ b/src/components/LoginModal/index.vue
@@ -1,781 +1,5 @@
-<script setup lang="ts">
-import GForm, { type FormListProps } from '../Form';
-import GAuth from './widget/auth.vue';
-import GAgreement from './widget/agreement.vue';
-import GAgreements from './widget/agreements.vue';
-import GTitle from './widget/title.vue';
-import logo from '@/assets/imgs/logo.png'
-import { useModel } from '@/utils/hooks/useModel';
-import type { GLoginModalProps, GLogoProps } from './types';
-import { TransAssetsUrl } from '@/utils/asset';
-import {
-  computed,
-  ref,
-  watch,
-  reactive,
-  onBeforeUnmount,
-  nextTick,
-  watchEffect,
-  shallowRef,
-  getCurrentInstance,
-  type ComponentInternalInstance,
-  onMounted,
-  onUnmounted
-} from 'vue';
-import { Modal } from 'vue-devui/modal';
-import { Button } from 'vue-devui/button';
-import { Icon } from 'vue-devui/icon';
-import { Tooltip } from 'vue-devui/tooltip';
-import { Message } from 'vue-devui/message';
-import {
-  verifyRegisterCode,
-  getQuickLoginMsg,
-  getMobileEmailCode,
-  resetUserPassword,
-  checkUsername,
-  registerByMobile,
-  loginByMobile,
-  toLogin
-} from '@/api/user';
-import { FormRules, isMobileEmail } from './form';
-import { useAccountStore } from '@/stores/user';
-
-/**
- * TODO: 待集成入该hook
- * import { useFormInteraction } from '@/utils/hooks/useForm';
- */
-
-const instance = getCurrentInstance() as ComponentInternalInstance;
-instance.appContext.components['d-icon'] = Icon;
-// instance?.component('d-icon', Icon);
-
-const IconSource = (import.meta as any).glob('@/assets/imgs/icon/login-modal/*svg', { eager: true });
-const IconH = TransAssetsUrl(IconSource, 'logo-gitee');
-const IconC = TransAssetsUrl(IconSource, 'logo-csdn');
-const IconG = TransAssetsUrl(IconSource, 'logo-github');
-const IconB = TransAssetsUrl(IconSource, 'logo-back');
-
-// 表单验证结果
-const formErrors = reactive<Record<string, string>>({});
-// 额外验证参数
-const extraErrors = reactive<{ agreement: string; requestInfo: string }>({
-  agreement: '',
-  requestInfo: ''
-});
-// 协议是否抖动
-const AgreementWarn = ref(false);
-// 禁用提交
-const disabled = ref(true);
-const loading = ref(false);
-
-const isRegister = ref(false);
-const cacheForm = reactive<{
-  mobile: string;
-  verificationcode: string;
-  countdownSecond: number;
-  user_id: string;
-  mask: string;
-}>({
-  mobile: '',
-  verificationcode: '',
-  countdownSecond: 59,
-  user_id: '',
-  mask: ''
-});
-let timer: any = null;
-let interval: any = null;
-
-const logos = reactive<GLogoProps[]>([
-  {
-    src: IconC,
-    alt: 'csdn',
-    describe: 'csdn帐号登录'
-  },
-  {
-    src: IconH,
-    alt: 'gitee',
-    describe: 'gitee帐号登录'
-  },
-  {
-    src: IconG,
-    alt: 'github',
-    describe: 'github帐号登录'
-  }
-]);
-
-const props = withDefaults(defineProps<GLoginModalProps>(), {
-  showClose: true,
-  draggable: false,
-  title: 'Modal',
-  appendToBody: false,
-  defaultType: 'login',
-  triggerType: ''
-});
-const emits = defineEmits(['update:modelValue', 'login', 'close', 'link']);
-const { vModels } = useModel(props, emits);
-
-const VerifyForm = reactive<FormListProps[]>([
-  {
-    type: 'input',
-    key: 'mobile',
-    label: '手机号',
-    required: true,
-    rules: FormRules.mobile
-  },
-  {
-    type: 'inputButton',
-    key: 'code',
-    label: '手机验证码',
-    required: true,
-    rules: FormRules.codes,
-    props: {
-      autocomplete: true,
-      countdown: false,
-      second: 59,
-      aliasKey: 'mobile'
-    }
-  }
-]);
-
-const PasswordForm = reactive<FormListProps[]>([
-  {
-    type: 'input',
-    key: 'username',
-    label: '用户名/邮箱',
-    required: true
-  },
-  {
-    type: 'input',
-    key: 'password',
-    label: '密码',
-    required: true,
-    props: {
-      'show-password': true,
-      autocomplete: true,
-      maxlength: 30
-    }
-  }
-]);
-
-const VerifyPassword: FormListProps[] = [
-  {
-    type: 'input',
-    key: 'password',
-    label: '密码',
-    required: true,
-    rules: FormRules.password,
-    help: '密码最少包含一个大写字母、一个小写字母、一个数字, 长度为8~30之间',
-    props: {
-      'show-password': true,
-      autocomplete: true,
-      maxlength: 30
-    }
-  },
-  {
-    type: 'input',
-    key: 'pwd',
-    label: '确认密码',
-    required: true,
-    rules: [
-      {
-        trigger: 'change',
-        message: '验证密码与密码不一致',
-        validator: (_rule: any, value: string, cb: Function) => {
-          FormRef.value.ValidateFormKeys(['password']).then((fromData: any) => {
-            if (fromData.type === 'success') {
-              clearFormError('password');
-              if (FormRef.value.Data.password === value) {
-                clearFormError('pwd');
-                return cb();
-              } else {
-                setFormErrorKey({
-                  pwd: '验证密码与密码不一致'
-                });
-                return cb(new Error('验证密码与密码不一致'));
-              }
-            } else {
-              setFormErrorKey({
-                password: '密码最少包含一个大写字母、一个小写字母、一个数字'
-              });
-              return cb(new Error('密码最少包含一个大写字母、一个小写字母、一个数字'));
-            }
-          });
-        }
-      }
-    ],
-    props: {
-      'show-password': true,
-      autocomplete: true,
-      maxlength: 30
-    }
-  }
-];
-/** 检测用户是否存在 */
-const requestCheck = {
-  trigger: 'change',
-  validator: async (_: any, val: string, cb: Function) => {
-    const res = await checkUsername(val);
-    if (!res.error) {
-      if (res.data.data.result) {
-        setFormErrorKey({ name: '用户名已存在' });
-        return cb(new Error('用户名已存在'));
-      }
-    }
-    return cb();
-  }
-};
-
-const RegisterForm = reactive<FormListProps[]>([
-  {
-    type: 'input',
-    key: 'username',
-    label: '用户名',
-    required: true,
-    rules: [...FormRules.name, requestCheck],
-    help: '只允许字母、数字或者下划线（_）、中划线（-），3到20个字符，必须以字母开头，不能以特殊字符结尾'
-  },
-  // {
-  //   type: 'input',
-  //   key: 'nickname',
-  //   label: '昵称'
-  // },
-  {
-    type: 'input',
-    key: 'mobile',
-    label: '手机号码',
-    required: true,
-    rules: FormRules.mobile
-  },
-  {
-    type: 'inputButton',
-    key: 'verificationcode',
-    label: '手机验证码',
-    required: true,
-    rules: FormRules.codes,
-    props: {
-      autocomplete: true,
-      countdown: false,
-      second: 59,
-      aliasKey: 'mobile'
-    }
-  }
-  // ...VerifyPassword
-]);
-
-const ForgetPasswordForm = reactive<FormListProps[]>([
-  {
-    type: 'input',
-    key: 'mobile_email',
-    label: '手机/邮箱',
-    required: true,
-    rules: FormRules.mobile_email
-  },
-  {
-    type: 'inputButton',
-    key: 'code',
-    label: '验证码',
-    required: true,
-    rules: FormRules.codes,
-    props: {
-      countdown: false,
-      second: 59,
-      aliasKey: 'mobile_email'
-    }
-  },
-  ...VerifyPassword
-]);
-
-const status = ref(false);
-const hwStatus = ref(false);
-const FormRef = shallowRef<any>(null);
-const tabPanel = ref<'verifyCode' | 'password'>('password');
-const formType = ref<'login' | 'register' | 'forget'>(props.defaultType);
-
-const FormConfig = computed<{
-  dict: FormListProps[];
-  showLabel: boolean;
-  layout: 'horizontal' | 'vertical';
-  title: string;
-  showBack: boolean;
-  button?: string;
-}>(() => {
-  if (formType.value === 'register') {
-    return {
-      dict: RegisterForm.map((item) => {
-        return {
-          ...item,
-          defaultValue:
-            item.key === 'mobile' ? cacheForm.mobile : item.key === 'verificationcode' ? cacheForm.verificationcode : ''
-        };
-      }),
-      showLabel: true,
-      layout: 'horizontal',
-      title: '欢迎注册',
-      showBack: true
-    };
-  }
-  if (formType.value === 'forget') {
-    return {
-      dict: ForgetPasswordForm,
-      showLabel: true,
-      layout: 'horizontal',
-      title: '重置密码',
-      showBack: true
-    };
-  }
-  if (tabPanel.value === 'verifyCode') {
-    return {
-      dict: VerifyForm.map((item) => {
-        return {
-          ...item,
-          defaultValue: item.key === 'mobile' ? cacheForm.mobile : ''
-        };
-      }),
-      showLabel: false,
-      layout: 'vertical',
-      title: '欢迎登录你的GitCode账号1',
-      showBack: false
-    };
-  } else {
-    return {
-      dict: PasswordForm,
-      showLabel: false,
-      layout: 'vertical',
-      title: '欢迎登录你的GitCode账号',
-      showBack: false
-    };
-  }
-});
-
-const catchFormErrors = (conf: { errors: Record<string, any[]> }) => {
-  const { errors } = conf;
-  for (const key in errors) {
-    const obj: Record<string, string> = {};
-    obj[key] = errors[key][0].message as string;
-    setFormErrorKey(obj);
-  }
-};
-
-const handleResetPassword = async () => {
-  if (FormRef.value) {
-    const formData = await FormRef.value.ValidateForm();
-    if (formData.type === 'success') {
-      loading.value = true;
-      clearFormError();
-      const res = formData.forms;
-      const data = {
-        mobile_email: res.mobile_email,
-        password: res.password,
-        code: res.code
-      };
-      const result = await resetUserPassword(data);
-      if (!result.error) {
-        dealLog('修改密码成功, 正在为你跳转登录', 'success', 'login');
-      }
-      setTimeout(() => {
-        loading.value = false;
-      }, 500);
-    } else {
-      catchFormErrors(formData);
-    }
-  }
-};
-
-const handleConfirm = async () => {
-  let agreementFlag = false;
-  if (formType.value === 'forget') {
-    handleResetPassword();
-    return;
-  }
-  if (formType.value === 'register' && !hwStatus.value) {
-    extraErrors.agreement = '请阅读并同意华为云用户协议以及其隐私政策';
-    agreementFlag = true;
-  }
-  if (!status.value && !agreementFlag) {
-    extraErrors.agreement = `请阅读并同意${formType.value === 'login' ? '' : 'GitCode'}用户协议以及其隐私政策`;
-    agreementFlag = true;
-  }
-  if (agreementFlag) {
-    AgreementWarn.value = true;
-    setTimeout(() => {
-      AgreementWarn.value = false;
-    }, 500);
-    return;
-  }
-  extraErrors.agreement = '';
-  if (FormRef.value) {
-    const formData = await FormRef.value.ValidateForm();
-    if (formData.type === 'success') {
-      clearFormError();
-      loading.value = true;
-      const res = formData.forms;
-      if (formType.value === 'register') {
-        const data = {
-          username: res.username,
-          password: res.password,
-          nickname: res.nickname || res.username,
-          mobile: res.mobile,
-          verificationcode: res.verificationcode,
-          signup_type: props.triggerType
-        };
-        const result = await registerByMobile(data);
-        if (!result.error) {
-          extraErrors.requestInfo = '';
-          const { user_id, mask } = result.data.data;
-          cacheForm.user_id = user_id;
-          cacheForm.mask = mask;
-          cacheForm.mobile = res.mobile;
-          emits('login', result.data.data);
-          // formType.value = 'bind';
-        } else {
-          extraErrors.requestInfo = result.error.error_message;
-        }
-      } else {
-        const data =
-          tabPanel.value === 'password'
-            ? res
-            : {
-                mobile: res.mobile,
-                code: res.code
-              };
-        const result = tabPanel.value === 'password' ? await toLogin(res) : await loginByMobile(data);
-        if (!result.error) {
-          const { user_id, mask, mobile } = result.data.data;
-          extraErrors.requestInfo = '';
-          cacheForm.mobile = mobile || res?.mobile;
-          cacheForm.user_id = user_id;
-          cacheForm.mask = mask;
-          // formType.value = 'bind';
-          emits('login', result.data.data);
-        } else {
-          extraErrors.requestInfo = result.error.error_message;
-        }
-      }
-      setTimeout(() => {
-        loading.value = false;
-      }, 500);
-    } else {
-      catchFormErrors(formData);
-    }
-  }
-};
-/**
- * 绑定华为云
- * @deprecated at 精简单注册登录
- */
-// const handleBind = (res: any) => {
-//   if (!res.error) {
-//     emits('login', res.data.data);
-//   }
-// };
-
-const handleClose = (close: Function) => {
-  if (props.showClose) {
-    emits('close');
-    close();
-  }
-};
-/** 外链url */
-const links = {
-  agreement:
-    'https://gitcode.com/Gitcode-offical-team/GitCode-Docs/blob/main/%E7%94%A8%E6%88%B7%E5%8D%8F%E8%AE%AE%2F%E6%9C%8D%E5%8A%A1%E6%9D%A1%E6%AC%BE.md',
-  privacy:
-    'https://gitcode.com/Gitcode-offical-team/GitCode-Docs/blob/main/%E7%94%A8%E6%88%B7%E5%8D%8F%E8%AE%AE%2F%E9%9A%90%E7%A7%81%E6%94%BF%E7%AD%96.md'
-};
-
-const links_hw = {
-  agreement: 'https://www.huaweicloud.com/declaration/sa_cua.html',
-  privacy: 'https://www.huaweicloud.com/declaration/sa_prp.html'
-};
-
-/** 展示声明 */
-const handleDisplay = (type: 'agreement' | 'privacy', url: 'gitcode' | 'huawei' = 'gitcode') => {
-  const link = url === 'gitcode' ? links[type] : links_hw[type];
-  window.open(link);
-};
-
-/** 设置表单单个字段信息 */
-const setFormErrorKey = (conf: { errors: Record<string, any[]> } | Record<string, any>) => {
-  let message: string = '';
-  let key: string = '';
-  if (Object.prototype.hasOwnProperty.call(conf, 'errors')) {
-    const { errors } = conf;
-    key = Object.keys(errors)[0];
-    const formDict = errors[key];
-    message = formDict?.length ? formDict[0].message : '';
-  } else {
-    key = Object.keys(conf)[0];
-    message = (conf as Record<string, any>)[key];
-  }
-  formErrors[key] = message;
-};
-
-/** 清空表单错误信息 */
-const clearFormError = (key?: string) => {
-  if (key) {
-    formErrors[key] = '';
-  } else {
-    for (const key in formErrors) {
-      formErrors[key] = '';
-    }
-    for (const key in extraErrors) {
-      extraErrors[key as keyof typeof extraErrors] = '';
-    }
-  }
-};
-/** 发送短信相关 */
-const handleCountDown = async (conf: { key: string; value: any; sourceKey: string }) => {
-  const formData = await FormRef.value.ValidateFormKeys([conf.key]);
-  if (formData.type === 'success') {
-    clearFormError(conf.key);
-    if (tabPanel.value === 'verifyCode' || formType.value === 'register' || formType.value === 'forget') {
-      const res =
-        formType.value === 'login'
-          ? await getQuickLoginMsg({ mobile: conf.value })
-          : formType.value === 'forget'
-          ? await getMobileEmailCode(conf.value)
-          : await verifyRegisterCode({ mobile: conf.value, type: 'REGISTER' });
-      if (!res.error) {
-        const source =
-          formType.value === 'register' ? RegisterForm : formType.value === 'forget' ? ForgetPasswordForm : VerifyForm;
-        cacheForm.mobile = conf.value;
-        if (Number(res?.data.data.type === 1)) {
-          isRegister.value = true;
-          dealLog('该手机号尚未注册, 即将为你自动跳转到注册页面', 'success', 'register');
-        } else {
-          isRegister.value = false;
-          const message = isMobileEmail(conf.value);
-          dealLog(`验证码已发送到你的${message}, 请注意查收`, 'success');
-        }
-        source.forEach((item) => {
-          if (item.key === conf.sourceKey) {
-            if (item.props) {
-              item.props.countdown = true;
-            }
-          }
-        });
-        toCountDown();
-      }
-    }
-  } else {
-    setFormErrorKey(formData);
-  }
-};
-/** 跳转等相关交互 */
-const dealLog = (msg: string, type: 'success' | 'warning', status: 'login' | 'register' | '' = '') => {
-  Message({
-    message: msg,
-    duration: 3000,
-    type
-  });
-  if (timer) {
-    clearTimeout(timer);
-  }
-  timer = setTimeout(() => {
-    if (status === 'login') {
-      tabPanel.value = 'password';
-      formType.value = 'login';
-    } else if (status === 'register') {
-      formType.value = 'register';
-    }
-  }, 3000);
-};
-
-/** 缓存倒计时间 */
-const toCountDown = () => {
-  if (!interval) {
-    if (cacheForm.countdownSecond === 0) {
-      cacheForm.countdownSecond = 59;
-    }
-    interval = setInterval(() => {
-      if (cacheForm.countdownSecond >= 1) {
-        cacheForm.countdownSecond -= 1;
-      } else {
-        cacheForm.countdownSecond = 59;
-        interval && clearInterval(interval);
-        interval = null;
-        refreshCountDown(tabPanel.value, formType.value);
-      }
-    }, 1000);
-  }
-};
-/** 刷新倒计时的状态 */
-const refreshCountDown = (tab: string, menu: string) => {
-  const source =
-    menu === 'register'
-      ? RegisterForm
-      : formType.value === 'forget'
-      ? ForgetPasswordForm
-      : tab === 'verifyCode'
-      ? VerifyForm
-      : null;
-  if (source) {
-    const countdown = source.find((item) => item.props);
-    if (countdown?.props && Object.prototype.hasOwnProperty.call(countdown.props, 'countdown')) {
-      if (cacheForm.countdownSecond !== 59 && menu === 'register' && isRegister.value) {
-        countdown.props.second = cacheForm.countdownSecond;
-        countdown.props.countdown = true;
-      } else {
-        countdown.props.countdown = false;
-      }
-    }
-  }
-};
-/** 表单字段change事件 */
-const handleFormChange = (conf: { key: string; errors: Record<string, any> | null; source: Record<string, any> }) => {
-  const { key, errors } = conf;
-  if (errors) {
-    setFormErrorKey({ errors });
-  } else {
-    formErrors[key] = '';
-  }
-  nextTick(() => {
-    const keys = Object.keys(formErrors);
-    const currentForm = FormConfig.value.dict;
-    if (currentForm?.length) {
-      const obj = currentForm.find((item) => keys.includes(item.key) && formErrors[item.key]);
-      if (FormRef.value) {
-        const filterKeys = keys.filter((k) => k !== obj?.key && formErrors[k]);
-        if (filterKeys.length) {
-          FormRef.value?.ClearFormFields(filterKeys);
-        } else {
-          obj && !errors && FormRef.value?.ValidateFormKeys([obj.key]);
-        }
-      }
-      hackMsgError(obj?.key === 'verificationcode' || obj?.key === 'code');
-    }
-  });
-};
-/** 表单input事件 */
-const handleFormInput = (val: boolean) => {
-  disabled.value = val;
-};
-/** 当前表单错误信息 */
-const errorMsg = computed(() => {
-  const keys = Object.keys(formErrors);
-  const currentForm = FormConfig.value.dict;
-  if (currentForm?.length) {
-    const obj = currentForm.find((item) => keys.includes(item.key) && formErrors[item.key]);
-    if (FormRef.value) {
-      const filterKeys = keys.filter((key) => key !== obj?.key && formErrors[key]);
-      filterKeys.length && FormRef.value?.ClearFormFields(filterKeys);
-      hackMsgError(obj?.key === 'verificationcode' || obj?.key === 'code');
-    }
-    if (obj) {
-      return formErrors[obj.key];
-    }
-    return extraErrors.agreement || extraErrors.requestInfo || '';
-  } else {
-    return extraErrors.agreement || extraErrors.requestInfo || '';
-  }
-});
-
-/** hack短信弹窗错误样式 */
-const hackMsgError = (show_error: boolean) => {
-  const el = document.querySelector('.g-input-button');
-  if (el) {
-    if (show_error) {
-      (el as HTMLElement).style.borderColor = 'var(--devui-danger-line, #f66f6a)';
-    } else {
-      (el as HTMLElement).style.borderColor = 'rgba(230, 230, 232, 1)';
-    }
-  }
-};
-
-watch(
-  () => [tabPanel.value, formType.value],
-  (newVal, oldVal) => {
-    if (FormRef.value) {
-      FormRef.value.ClearForm();
-      clearFormError();
-      disabled.value = true;
-    }
-    const [tab, menu] = newVal;
-    const [_, prev_menu] = oldVal;
-    if (menu !== 'register') {
-      if (interval) {
-        clearInterval(interval);
-        interval = null;
-      }
-    }
-    if (prev_menu === 'register') {
-      isRegister.value = false;
-    }
-    refreshCountDown(tab, menu);
-  }
-);
-
-// 移除参数
-localStorage.removeItem('loginReturnUrl');
-const handleAuthLogin = (type: 'csdn' | 'gitee' | 'github') => {
-  if (localStorage.getItem('op_access_token')) {
-    emits('close', true);
-  } else {
-    if (!status.value) {
-      extraErrors.agreement = `请阅读并同意用户协议以及其隐私政策`;
-      AgreementWarn.value = true;
-      setTimeout(() => {
-        AgreementWarn.value = false;
-      }, 500);
-      return;
-    }
-    if (localStorage.getItem('utm_source')) {
-      localStorage.removeItem('utm_source');
-    }
-    // 保存注册上报类型和ref
-    sessionStorage.setItem('loginType', props.triggerType || '');
-    // window.open('http://localhost:5173/oauth/callback', '_blank', 'width=800, height=800, left=200, top=200');
-    const url = `${(import.meta as any).env.VITE_API_HOST}${
-      (import.meta as any).env.VITE_PASSPORT_PREFIX || ''
-    }/api/v1/oauth/login/${type}`;
-    window.open(url, '_blank', 'width=800, height=800, left=400, top=200');
-  }
-};
-
-watchEffect(() => {
-  if (formType.value === 'register') {
-    if (status.value && hwStatus.value && extraErrors.agreement) {
-      extraErrors.agreement = '';
-    }
-  } else if (status.value && extraErrors.agreement) {
-    extraErrors.agreement = '';
-  }
-});
-
-onBeforeUnmount(() => {
-  if (timer) {
-    clearTimeout(timer);
-  }
-  if (interval) {
-    clearInterval(interval);
-  }
-});
-
-onMounted(() => {
-  const orgin = 'https://gitcode.com';
-  window.addEventListener('message', async (event) => {
-    if (event.origin !== orgin) {
-      return; // 安全起见，检查消息来源
-    }
-    if (!event?.data?.access_token) return;
-    const { access_token, refresh_token } = event.data;
-    if (access_token && refresh_token) {
-      const account = useAccountStore();
-      await account.checkIsLogin(access_token, refresh_token);
-      Message.success('登录成功');
-      emits('close', true);
-    }
-  });
-});
-
-onUnmounted(() => {
-  window.removeEventListener('message', () => {});
-});
-</script>
-
 <template>
-  <Modal
-    :ti
+  <d-modal
     v-model="vModels"
     :show-close="showClose"
     :lock-scroll="lockScroll"
@@ -783,249 +7,435 @@ onUnmounted(() => {
     :escapable="escapable"
     :before-close="handleClose"
     :append-to-body="appendToBody"
-    :class="['login-modal', formType === 'login' ? 'login-modal-l' : 'login-modal-r']"
+    class="tcode-login-modal"
+    width="480px"
   >
     <template #header>
-      <div v-if="formType === 'login'" class="header-h1">
-        <img :src="logo" alt="头像">
-        <div class="headertitel">Tcode账号登录</div>
-      </div>
-      <div v-else class="header-h1">
-        <img :src="logo" alt="头像">
-        <div class="headertitel">Tcode账号注册</div>
+      <div class="login-header">
+        <img src="@/assets/imgs/logo2.png" alt="Tcode Logo" class="logo-img">
       </div>
     </template>
-    <template #default>
-<!--      <div v-if="formType === 'login'" class="header-h1">Tcode账号登录</div>-->
-      <iframe :src="`https://gitcode.com/${formType || 'login'}/?be_nested=1`"></iframe>
-    </template>
-  </Modal>
+
+    <div class="login-body">
+      <div class="login-tabs">
+        <div
+          class="tab-item"
+          :class="{ active: loginType === 'account' }"
+          @click="loginType = 'account'"
+        >
+          账户密码登录
+        </div>
+        <div
+          class="tab-item"
+          :class="{ active: loginType === 'mobile' }"
+          @click="loginType = 'mobile'"
+        >
+          手机号登录
+        </div>
+      </div>
+
+      <form class="login-form" @submit.prevent="handleLogin">
+
+        <template v-if="loginType === 'account'">
+          <div class="form-item">
+            <d-input
+              v-model="loginForm.account"
+              placeholder="账户（邮箱或手机号）"
+              size="lg"
+            />
+          </div>
+          <div class="form-item">
+            <d-input
+              v-model="loginForm.password"
+              type="password"
+              placeholder="请输入密码"
+              show-password
+              size="lg"
+            />
+          </div>
+          <div class="form-item verify-row">
+            <d-input
+              v-model="loginForm.verifyCode"
+              placeholder="请输入验证码"
+              size="lg"
+              class="verify-input"
+            />
+            <div class="captcha-box" @click="refreshCaptcha">
+              <span>x j 7 2</span>
+            </div>
+          </div>
+        </template>
+
+        <template v-else>
+          <div class="form-item">
+            <d-input
+              v-model="loginForm.mobile"
+              placeholder="请输入手机号"
+              size="lg"
+            />
+          </div>
+          <div class="form-item verify-row">
+            <d-input
+              v-model="loginForm.smsCode"
+              placeholder="请输入验证码"
+              size="lg"
+              class="verify-input"
+            />
+            <d-button
+              variant="text"
+              class="get-code-btn"
+              :disabled="isCounting"
+              @click="getSmsCode"
+            >
+              {{ isCounting ? `${count}s后重试` : '获取验证码' }}
+            </d-button>
+          </div>
+        </template>
+
+        <div class="extra-row">
+          <d-checkbox v-model="rememberMe">记住我</d-checkbox>
+          <div class="right-links">
+            <a href="#" class="link-btn">忘记密码</a>
+            <span class="divider">|</span>
+            <a href="#" class="link-btn" @click.prevent="switchToRegister">注册</a>
+          </div>
+        </div>
+
+        <d-button
+          class="submit-btn"
+          variant="solid"
+          size="lg"
+          style="width: 100%"
+          :loading="loading"
+          @click="handleLogin"
+        >
+          登录
+        </d-button>
+
+      </form>
+
+      <div class="footer-links">
+        <a href="#">隐私政策</a>
+        <a href="#">服务条款</a>
+      </div>
+    </div>
+  </d-modal>
 </template>
 
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import { useModel } from '@/utils/hooks/useModel';
+// 引入 DevUI 组件 (确保已安装)
+import { Modal as DModal } from 'vue-devui/modal';
+import { Input as DInput } from 'vue-devui/input';
+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";
+
+// 定义 Props 和 Emits
+const props = withDefaults(defineProps<{
+  modelValue: boolean;
+  showClose?: boolean;
+  lockScroll?: boolean;
+  draggable?: boolean;
+  escapable?: boolean;
+  appendToBody?: boolean;
+}>(), {
+  showClose: true,
+  draggable: false,
+  appendToBody: false
+});
+
+const emits = defineEmits(['update:modelValue', 'close', 'login-success', 'go-register']);
+const { vModels } = useModel(props, emits);
+const router = useRouter();
+
+// --- 状态管理 ---
+const loginType = ref<'account' | 'mobile'>('account'); // 当前登录方式
+const loading = ref(false);
+const rememberMe = ref(false);
+
+// 表单数据
+const loginForm = reactive({
+  account: '',
+  password: '',
+  verifyCode: '', // 图形验证码
+  mobile: '',
+  smsCode: ''     // 短信验证码
+});
+
+// 短信倒计时
+const count = ref(60);
+const isCounting = ref(false);
+let timer: any = null;
+
+// --- 方法 ---
+
+const handleClose = (close: Function) => {
+  emits('close');
+  close();
+};
+
+const refreshCaptcha = () => {
+  // TODO: 调用刷新图形验证码接口
+  console.log('刷新验证码');
+};
+
+const getSmsCode = async () => {
+  if (!loginForm.mobile) {
+    Message.warning('请输入手机号');
+    return;
+  }
+  // TODO: 调用发送短信接口
+  Message.success('验证码已发送');
+
+  // 开始倒计时
+  isCounting.value = true;
+  count.value = 60;
+  timer = setInterval(() => {
+    count.value--;
+    if (count.value <= 0) {
+      clearInterval(timer);
+      isCounting.value = false;
+    }
+  }, 1000);
+};
+
+const handleLogin = async () => {
+  // 简单校验
+  if (loginType.value === 'account') {
+    if (!loginForm.account || !loginForm.password) {
+      Message.warning('请输入账户和密码');
+      return;
+    }
+  } else {
+    if (!loginForm.mobile || !loginForm.smsCode) {
+      Message.warning('请输入手机号和验证码');
+      return;
+    }
+  }
+
+  loading.value = true;
+  try {
+    // TODO: 调用实际登录接口
+    // const res = await api.login(...)
+
+    // 模拟登录延迟
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    Message.success('登录成功');
+    // router.push({ name: `Pricing` });
+    window.open('/Dashboard', '_blank');
+    emits('close', true); // 关闭弹窗
+    emits('login-success', { user: 'test' });
+  } catch (error) {
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const switchToRegister = () => {
+  // 切换到注册模式或跳转
+  emits('go-register');
+};
+</script>
+
 <style lang="scss">
-$active-title: var(--color-CG900);
-$active-color: var(--color-CG800);
-$inactive-title: var(--color-CG500);
-$active-panel: var(--color-G800);
-.header-h1 {
-  padding-left: 16px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #EDEDED;
-  display: flex;
-  align-items: center;
-  img {
-    width: 32px;
-    margin-right: 10px;
+
+/* 使用全局样式或穿透样式覆盖 DevUI 默认 Modal 样式 */
+.tcode-login-modal {
+  :deep(.devui-modal) {
+    width: 600px !important;
   }
-  .headertitel {
-    letter-spacing: 0.5px;
-    line-height: 24px;
-    font-size: 20px;
-    color: #000000;
+  .devui-modal__header {
+    border-bottom: none;
+    padding: 0;
   }
-  *, :before, :after {
-    box-sizing: border-box;
-    border-width: 0;
-    border-style: solid;
-    border-color: #e5e7eb;
+  .devui-modal__body {
+    padding: 0; /* 移除默认内边距，由内部控制 */
+  }
+  .btn-close {
+    z-index: 10; /* 确保关闭按钮在最上层 */
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+/* --- 布局样式 --- */
+.login-header {
+  text-align: center;
+  padding: 40px 0 20px;
+
+  .logo-img {
+    height: 48px; /* 根据实际 Logo 调整 */
+    width: auto;
+    display: inline-block;
   }
 }
 
-.login-modal-l iframe {
-  border: 0;
-  width: 100%;
-  height: 400px;
+.login-body {
+  padding: 0 50px 40px; /* 两侧留白 */
 }
-.login-modal-r iframe {
-  border: 0;
-  width: 100%;
-  height: 580px;
-}
-.login-modal {
-  box-sizing: border-box;
-  padding: 24px 0;
-  width: 550px !important;
-  border-radius: 3px !important;
-  .btn-close {
-    width: 12px !important;
-    height: 12px !important;
-    right: 18px !important;
-    top: 18px !important;
-  }
-  .icon-close {
-    font-size: 14px !important;
-    color: var(--color-G400) !important;
-  }
-  .devui-input--error {
-    // border-color: inherit;
-    background-color: inherit;
-  }
-  .devui-input__wrapper {
-    padding: 0;
-  }
-  .devui-input__inner {
-    font-size: 14px;
-    padding: 0 8px;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  &-ellipsis {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 2; /* 设置文本最大行数为2行 */
-    -webkit-box-orient: vertical;
-    text-overflow: ellipsis;
-    white-space: normal; /* 在Safari中需要添加这一行来处理部分情况 */
-  }
-  &-title {
-    color: $active-title;
-  }
-  &-tab {
-    color: $active-title;
-    font-weight: bold;
+
+/* --- Tabs 样式 --- */
+.login-tabs {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 30px;
+  border-bottom: 1px solid #eee;
+
+  .tab-item {
     font-size: 16px;
-    box-sizing: border-box;
-    line-height: 36px;
-    position: relative;
+    color: #666;
+    padding: 10px 30px;
     cursor: pointer;
-    &-active {
+    position: relative;
+    transition: color 0.3s;
+
+    &.active {
+      color: #d12323; /* 红色高亮 */
+      font-weight: 500;
+
       &::after {
-        position: absolute;
         content: '';
-        top: 36px;
-        border-radius: 2px;
-        border-bottom: 2px solid $active-panel;
-        left: -4px;
-        right: -4px;
+        position: absolute;
+        bottom: -1px; /* 盖住底边框 */
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background-color: #d12323;
       }
     }
-    &-inactive {
-      color: $inactive-title;
+
+    &:hover {
+      color: #d12323;
     }
   }
-  &-info {
+}
+
+/* --- 表单样式 --- */
+.login-form {
+  .form-item {
+    margin-bottom: 20px;
+  }
+
+  /* 覆盖 DevUI Input 样式以匹配设计 */
+  :deep(.devui-input__wrapper) {
+    border-radius: 4px;
+    border-color: #ddd;
+    box-shadow: none;
+
+    //&:hover, &.is-focus {
+    //  border-color: #d12323; /* 聚焦时红色边框 */
+    //}
+  }
+
+  :deep(.devui-input__inner) {
+    height: 44px; /* 增加输入框高度 */
+    font-size: 14px;
+  }
+}
+
+/* 验证码行 */
+.verify-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+
+  .verify-input {
+    flex: 1;
+  }
+
+  /* 图形验证码 */
+  .captcha-box {
+    width: 100px;
+    height: 44px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    box-sizing: border-box;
-    padding: 0 2px;
-    div {
-      font-size: 14px;
-      line-height: 20px;
-      height: 20px;
+    justify-content: center;
+    cursor: pointer;
+    background-color: #f9f9f9;
+    font-size: 18px;
+    letter-spacing: 4px;
+    color: #333;
+    /* 实际使用 img 标签 */
+  }
+
+  /* 获取验证码按钮 */
+  .get-code-btn {
+    //color: #d12323 !important;
+    font-size: 14px;
+    padding: 0 10px;
+
+    &:disabled {
+      color: #999 !important;
     }
-    &-left {
-      color: #f2050d;
-      max-width: 240px;
-      min-width: 240px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    &-right {
+  }
+}
+
+/* --- 辅助功能行 --- */
+.extra-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30px;
+  font-size: 14px;
+  color: #666;
+
+  :deep(.devui-checkbox-label) {
+    color: #666;
+  }
+
+  .right-links {
+    .link-btn {
+      //color: #d12323;
+      text-decoration: none;
       cursor: pointer;
-      text-align: right;
-      color: var(--color-G700);
-    }
-  }
-  &-button {
-    width: 100%;
-    &-group {
-      display: flex;
-      justify-content: center;
-      .devui-button {
-        margin: 0 16px;
+
+      &:hover {
+        text-decoration: underline;
       }
     }
-  }
-  &-footer {
-    margin: 40px auto 0;
-    &-args {
-      span {
-        display: inline-block;
-        font-size: 12px;
-      }
+
+    .divider {
+      margin: 0 8px;
+      color: #ddd;
     }
   }
-  &-l {
-    .devui-form__label {
-      height: 0;
-    }
-    .devui-form__label--vertical {
-      padding: 0;
-    }
-    .devui-form__item--vertical {
-      margin-bottom: 12px;
-      &:nth-of-type(2) {
-        margin-bottom: 8px;
-      }
-    }
-    .devui-checkbox--sm {
-      margin: auto;
-    }
-  }
-  &-r {
-    .devui-form__label-span {
-      padding-left: 10px;
-    }
-    .devui-form__label--required {
-      padding-left: 0;
-    }
-    .devui-form__label--required:before {
-      display: inline-block;
-      margin-right: 3px;
-    }
-    .devui-form__control--horizontal {
-      margin-left: 10px;
-    }
-    .devui-form__label {
-      line-height: 40px;
-      height: 40px;
-      font-size: 14px;
-    }
-    .devui-form__label--sm {
-      flex: 0 0 90px;
-    }
-    .login-form-register-cell {
-      .devui-form__item--horizontal {
-        margin-bottom: 8px;
-        &:nth-last-child(1) {
-          margin-bottom: 6px;
-        }
-      }
-    }
-    .login-form-common-cell {
-      .devui-form__item--horizontal {
-        margin-bottom: 12px;
-        &:nth-last-child(1) {
-          margin-bottom: 8px;
-        }
-      }
-    }
-    .devui-checkbox--sm {
-      margin: 0;
-    }
-    .devui-form__label-help {
-      top: 1px;
-    }
-  }
-  .devui-modal__body {
-    padding: 0 20px;
-  }
-  .shaking-box {
-    animation: shaking 0.25s ease-in-out;
-  }
-  @keyframes shaking {
-    0%,
-    100% {
-      transform: translateX(0);
-    }
-    25% {
-      transform: translateX(-10px);
-    }
-    75% {
-      transform: translateX(10px);
+}
+
+///* --- 登录按钮 --- */
+//.submit-btn {
+//  background-color: #d12323 !important; /* 强制红色背景 */
+//  border-color: #d12323 !important;
+//  color: #fff !important;
+//  font-size: 16px;
+//  height: 48px;
+//  border-radius: 4px;
+//
+//  &:hover {
+//    background-color: #b01d1d !important;
+//    border-color: #b01d1d !important;
+//  }
+//}
+
+/* --- 底部链接 --- */
+.footer-links {
+  text-align: center;
+  margin-top: 40px;
+
+  a {
+    color: #999;
+    font-size: 14px;
+    text-decoration: none;
+    margin: 0 10px;
+
+    &:hover {
+      color: #666;
     }
   }
 }
diff --git a/src/components/LoginModal/indexOld.vue b/src/components/LoginModal/indexOld.vue
new file mode 100644
index 0000000..dae3195
--- /dev/null
+++ b/src/components/LoginModal/indexOld.vue
@@ -0,0 +1,1032 @@
+<script setup lang="ts">
+import GForm, { type FormListProps } from '../Form';
+import GAuth from './widget/auth.vue';
+import GAgreement from './widget/agreement.vue';
+import GAgreements from './widget/agreements.vue';
+import GTitle from './widget/title.vue';
+import logo from '@/assets/imgs/logo.png'
+import { useModel } from '@/utils/hooks/useModel';
+import type { GLoginModalProps, GLogoProps } from './types';
+import { TransAssetsUrl } from '@/utils/asset';
+import {
+  computed,
+  ref,
+  watch,
+  reactive,
+  onBeforeUnmount,
+  nextTick,
+  watchEffect,
+  shallowRef,
+  getCurrentInstance,
+  type ComponentInternalInstance,
+  onMounted,
+  onUnmounted
+} from 'vue';
+import { Modal } from 'vue-devui/modal';
+import { Button } from 'vue-devui/button';
+import { Icon } from 'vue-devui/icon';
+import { Tooltip } from 'vue-devui/tooltip';
+import { Message } from 'vue-devui/message';
+import {
+  verifyRegisterCode,
+  getQuickLoginMsg,
+  getMobileEmailCode,
+  resetUserPassword,
+  checkUsername,
+  registerByMobile,
+  loginByMobile,
+  toLogin
+} from '@/api/user';
+import { FormRules, isMobileEmail } from './form';
+import { useAccountStore } from '@/stores/user';
+
+/**
+ * TODO: 待集成入该hook
+ * import { useFormInteraction } from '@/utils/hooks/useForm';
+ */
+
+const instance = getCurrentInstance() as ComponentInternalInstance;
+instance.appContext.components['d-icon'] = Icon;
+// instance?.component('d-icon', Icon);
+
+const IconSource = (import.meta as any).glob('@/assets/imgs/icon/login-modal/*svg', { eager: true });
+const IconH = TransAssetsUrl(IconSource, 'logo-gitee');
+const IconC = TransAssetsUrl(IconSource, 'logo-csdn');
+const IconG = TransAssetsUrl(IconSource, 'logo-github');
+const IconB = TransAssetsUrl(IconSource, 'logo-back');
+
+// 表单验证结果
+const formErrors = reactive<Record<string, string>>({});
+// 额外验证参数
+const extraErrors = reactive<{ agreement: string; requestInfo: string }>({
+  agreement: '',
+  requestInfo: ''
+});
+// 协议是否抖动
+const AgreementWarn = ref(false);
+// 禁用提交
+const disabled = ref(true);
+const loading = ref(false);
+
+const isRegister = ref(false);
+const cacheForm = reactive<{
+  mobile: string;
+  verificationcode: string;
+  countdownSecond: number;
+  user_id: string;
+  mask: string;
+}>({
+  mobile: '',
+  verificationcode: '',
+  countdownSecond: 59,
+  user_id: '',
+  mask: ''
+});
+let timer: any = null;
+let interval: any = null;
+
+const logos = reactive<GLogoProps[]>([
+  {
+    src: IconC,
+    alt: 'csdn',
+    describe: 'csdn帐号登录'
+  },
+  {
+    src: IconH,
+    alt: 'gitee',
+    describe: 'gitee帐号登录'
+  },
+  {
+    src: IconG,
+    alt: 'github',
+    describe: 'github帐号登录'
+  }
+]);
+
+const props = withDefaults(defineProps<GLoginModalProps>(), {
+  showClose: true,
+  draggable: false,
+  title: 'Modal',
+  appendToBody: false,
+  defaultType: 'login',
+  triggerType: ''
+});
+const emits = defineEmits(['update:modelValue', 'login', 'close', 'link']);
+const { vModels } = useModel(props, emits);
+
+const VerifyForm = reactive<FormListProps[]>([
+  {
+    type: 'input',
+    key: 'mobile',
+    label: '手机号',
+    required: true,
+    rules: FormRules.mobile
+  },
+  {
+    type: 'inputButton',
+    key: 'code',
+    label: '手机验证码',
+    required: true,
+    rules: FormRules.codes,
+    props: {
+      autocomplete: true,
+      countdown: false,
+      second: 59,
+      aliasKey: 'mobile'
+    }
+  }
+]);
+
+const PasswordForm = reactive<FormListProps[]>([
+  {
+    type: 'input',
+    key: 'username',
+    label: '用户名/邮箱',
+    required: true
+  },
+  {
+    type: 'input',
+    key: 'password',
+    label: '密码',
+    required: true,
+    props: {
+      'show-password': true,
+      autocomplete: true,
+      maxlength: 30
+    }
+  }
+]);
+
+const VerifyPassword: FormListProps[] = [
+  {
+    type: 'input',
+    key: 'password',
+    label: '密码',
+    required: true,
+    rules: FormRules.password,
+    help: '密码最少包含一个大写字母、一个小写字母、一个数字, 长度为8~30之间',
+    props: {
+      'show-password': true,
+      autocomplete: true,
+      maxlength: 30
+    }
+  },
+  {
+    type: 'input',
+    key: 'pwd',
+    label: '确认密码',
+    required: true,
+    rules: [
+      {
+        trigger: 'change',
+        message: '验证密码与密码不一致',
+        validator: (_rule: any, value: string, cb: Function) => {
+          FormRef.value.ValidateFormKeys(['password']).then((fromData: any) => {
+            if (fromData.type === 'success') {
+              clearFormError('password');
+              if (FormRef.value.Data.password === value) {
+                clearFormError('pwd');
+                return cb();
+              } else {
+                setFormErrorKey({
+                  pwd: '验证密码与密码不一致'
+                });
+                return cb(new Error('验证密码与密码不一致'));
+              }
+            } else {
+              setFormErrorKey({
+                password: '密码最少包含一个大写字母、一个小写字母、一个数字'
+              });
+              return cb(new Error('密码最少包含一个大写字母、一个小写字母、一个数字'));
+            }
+          });
+        }
+      }
+    ],
+    props: {
+      'show-password': true,
+      autocomplete: true,
+      maxlength: 30
+    }
+  }
+];
+/** 检测用户是否存在 */
+const requestCheck = {
+  trigger: 'change',
+  validator: async (_: any, val: string, cb: Function) => {
+    const res = await checkUsername(val);
+    if (!res.error) {
+      if (res.data.data.result) {
+        setFormErrorKey({ name: '用户名已存在' });
+        return cb(new Error('用户名已存在'));
+      }
+    }
+    return cb();
+  }
+};
+
+const RegisterForm = reactive<FormListProps[]>([
+  {
+    type: 'input',
+    key: 'username',
+    label: '用户名',
+    required: true,
+    rules: [...FormRules.name, requestCheck],
+    help: '只允许字母、数字或者下划线（_）、中划线（-），3到20个字符，必须以字母开头，不能以特殊字符结尾'
+  },
+  // {
+  //   type: 'input',
+  //   key: 'nickname',
+  //   label: '昵称'
+  // },
+  {
+    type: 'input',
+    key: 'mobile',
+    label: '手机号码',
+    required: true,
+    rules: FormRules.mobile
+  },
+  {
+    type: 'inputButton',
+    key: 'verificationcode',
+    label: '手机验证码',
+    required: true,
+    rules: FormRules.codes,
+    props: {
+      autocomplete: true,
+      countdown: false,
+      second: 59,
+      aliasKey: 'mobile'
+    }
+  }
+  // ...VerifyPassword
+]);
+
+const ForgetPasswordForm = reactive<FormListProps[]>([
+  {
+    type: 'input',
+    key: 'mobile_email',
+    label: '手机/邮箱',
+    required: true,
+    rules: FormRules.mobile_email
+  },
+  {
+    type: 'inputButton',
+    key: 'code',
+    label: '验证码',
+    required: true,
+    rules: FormRules.codes,
+    props: {
+      countdown: false,
+      second: 59,
+      aliasKey: 'mobile_email'
+    }
+  },
+  ...VerifyPassword
+]);
+
+const status = ref(false);
+const hwStatus = ref(false);
+const FormRef = shallowRef<any>(null);
+const tabPanel = ref<'verifyCode' | 'password'>('password');
+const formType = ref<'login' | 'register' | 'forget'>(props.defaultType);
+
+const FormConfig = computed<{
+  dict: FormListProps[];
+  showLabel: boolean;
+  layout: 'horizontal' | 'vertical';
+  title: string;
+  showBack: boolean;
+  button?: string;
+}>(() => {
+  if (formType.value === 'register') {
+    return {
+      dict: RegisterForm.map((item) => {
+        return {
+          ...item,
+          defaultValue:
+            item.key === 'mobile' ? cacheForm.mobile : item.key === 'verificationcode' ? cacheForm.verificationcode : ''
+        };
+      }),
+      showLabel: true,
+      layout: 'horizontal',
+      title: '欢迎注册',
+      showBack: true
+    };
+  }
+  if (formType.value === 'forget') {
+    return {
+      dict: ForgetPasswordForm,
+      showLabel: true,
+      layout: 'horizontal',
+      title: '重置密码',
+      showBack: true
+    };
+  }
+  if (tabPanel.value === 'verifyCode') {
+    return {
+      dict: VerifyForm.map((item) => {
+        return {
+          ...item,
+          defaultValue: item.key === 'mobile' ? cacheForm.mobile : ''
+        };
+      }),
+      showLabel: false,
+      layout: 'vertical',
+      title: '欢迎登录你的GitCode账号1',
+      showBack: false
+    };
+  } else {
+    return {
+      dict: PasswordForm,
+      showLabel: false,
+      layout: 'vertical',
+      title: '欢迎登录你的GitCode账号',
+      showBack: false
+    };
+  }
+});
+
+const catchFormErrors = (conf: { errors: Record<string, any[]> }) => {
+  const { errors } = conf;
+  for (const key in errors) {
+    const obj: Record<string, string> = {};
+    obj[key] = errors[key][0].message as string;
+    setFormErrorKey(obj);
+  }
+};
+
+const handleResetPassword = async () => {
+  if (FormRef.value) {
+    const formData = await FormRef.value.ValidateForm();
+    if (formData.type === 'success') {
+      loading.value = true;
+      clearFormError();
+      const res = formData.forms;
+      const data = {
+        mobile_email: res.mobile_email,
+        password: res.password,
+        code: res.code
+      };
+      const result = await resetUserPassword(data);
+      if (!result.error) {
+        dealLog('修改密码成功, 正在为你跳转登录', 'success', 'login');
+      }
+      setTimeout(() => {
+        loading.value = false;
+      }, 500);
+    } else {
+      catchFormErrors(formData);
+    }
+  }
+};
+
+const handleConfirm = async () => {
+  let agreementFlag = false;
+  if (formType.value === 'forget') {
+    handleResetPassword();
+    return;
+  }
+  if (formType.value === 'register' && !hwStatus.value) {
+    extraErrors.agreement = '请阅读并同意华为云用户协议以及其隐私政策';
+    agreementFlag = true;
+  }
+  if (!status.value && !agreementFlag) {
+    extraErrors.agreement = `请阅读并同意${formType.value === 'login' ? '' : 'GitCode'}用户协议以及其隐私政策`;
+    agreementFlag = true;
+  }
+  if (agreementFlag) {
+    AgreementWarn.value = true;
+    setTimeout(() => {
+      AgreementWarn.value = false;
+    }, 500);
+    return;
+  }
+  extraErrors.agreement = '';
+  if (FormRef.value) {
+    const formData = await FormRef.value.ValidateForm();
+    if (formData.type === 'success') {
+      clearFormError();
+      loading.value = true;
+      const res = formData.forms;
+      if (formType.value === 'register') {
+        const data = {
+          username: res.username,
+          password: res.password,
+          nickname: res.nickname || res.username,
+          mobile: res.mobile,
+          verificationcode: res.verificationcode,
+          signup_type: props.triggerType
+        };
+        const result = await registerByMobile(data);
+        if (!result.error) {
+          extraErrors.requestInfo = '';
+          const { user_id, mask } = result.data.data;
+          cacheForm.user_id = user_id;
+          cacheForm.mask = mask;
+          cacheForm.mobile = res.mobile;
+          emits('login', result.data.data);
+          // formType.value = 'bind';
+        } else {
+          extraErrors.requestInfo = result.error.error_message;
+        }
+      } else {
+        const data =
+          tabPanel.value === 'password'
+            ? res
+            : {
+                mobile: res.mobile,
+                code: res.code
+              };
+        const result = tabPanel.value === 'password' ? await toLogin(res) : await loginByMobile(data);
+        if (!result.error) {
+          const { user_id, mask, mobile } = result.data.data;
+          extraErrors.requestInfo = '';
+          cacheForm.mobile = mobile || res?.mobile;
+          cacheForm.user_id = user_id;
+          cacheForm.mask = mask;
+          // formType.value = 'bind';
+          emits('login', result.data.data);
+        } else {
+          extraErrors.requestInfo = result.error.error_message;
+        }
+      }
+      setTimeout(() => {
+        loading.value = false;
+      }, 500);
+    } else {
+      catchFormErrors(formData);
+    }
+  }
+};
+/**
+ * 绑定华为云
+ * @deprecated at 精简单注册登录
+ */
+// const handleBind = (res: any) => {
+//   if (!res.error) {
+//     emits('login', res.data.data);
+//   }
+// };
+
+const handleClose = (close: Function) => {
+  if (props.showClose) {
+    emits('close');
+    close();
+  }
+};
+/** 外链url */
+const links = {
+  agreement:
+    'https://gitcode.com/Gitcode-offical-team/GitCode-Docs/blob/main/%E7%94%A8%E6%88%B7%E5%8D%8F%E8%AE%AE%2F%E6%9C%8D%E5%8A%A1%E6%9D%A1%E6%AC%BE.md',
+  privacy:
+    'https://gitcode.com/Gitcode-offical-team/GitCode-Docs/blob/main/%E7%94%A8%E6%88%B7%E5%8D%8F%E8%AE%AE%2F%E9%9A%90%E7%A7%81%E6%94%BF%E7%AD%96.md'
+};
+
+const links_hw = {
+  agreement: 'https://www.huaweicloud.com/declaration/sa_cua.html',
+  privacy: 'https://www.huaweicloud.com/declaration/sa_prp.html'
+};
+
+/** 展示声明 */
+const handleDisplay = (type: 'agreement' | 'privacy', url: 'gitcode' | 'huawei' = 'gitcode') => {
+  const link = url === 'gitcode' ? links[type] : links_hw[type];
+  window.open(link);
+};
+
+/** 设置表单单个字段信息 */
+const setFormErrorKey = (conf: { errors: Record<string, any[]> } | Record<string, any>) => {
+  let message: string = '';
+  let key: string = '';
+  if (Object.prototype.hasOwnProperty.call(conf, 'errors')) {
+    const { errors } = conf;
+    key = Object.keys(errors)[0];
+    const formDict = errors[key];
+    message = formDict?.length ? formDict[0].message : '';
+  } else {
+    key = Object.keys(conf)[0];
+    message = (conf as Record<string, any>)[key];
+  }
+  formErrors[key] = message;
+};
+
+/** 清空表单错误信息 */
+const clearFormError = (key?: string) => {
+  if (key) {
+    formErrors[key] = '';
+  } else {
+    for (const key in formErrors) {
+      formErrors[key] = '';
+    }
+    for (const key in extraErrors) {
+      extraErrors[key as keyof typeof extraErrors] = '';
+    }
+  }
+};
+/** 发送短信相关 */
+const handleCountDown = async (conf: { key: string; value: any; sourceKey: string }) => {
+  const formData = await FormRef.value.ValidateFormKeys([conf.key]);
+  if (formData.type === 'success') {
+    clearFormError(conf.key);
+    if (tabPanel.value === 'verifyCode' || formType.value === 'register' || formType.value === 'forget') {
+      const res =
+        formType.value === 'login'
+          ? await getQuickLoginMsg({ mobile: conf.value })
+          : formType.value === 'forget'
+          ? await getMobileEmailCode(conf.value)
+          : await verifyRegisterCode({ mobile: conf.value, type: 'REGISTER' });
+      if (!res.error) {
+        const source =
+          formType.value === 'register' ? RegisterForm : formType.value === 'forget' ? ForgetPasswordForm : VerifyForm;
+        cacheForm.mobile = conf.value;
+        if (Number(res?.data.data.type === 1)) {
+          isRegister.value = true;
+          dealLog('该手机号尚未注册, 即将为你自动跳转到注册页面', 'success', 'register');
+        } else {
+          isRegister.value = false;
+          const message = isMobileEmail(conf.value);
+          dealLog(`验证码已发送到你的${message}, 请注意查收`, 'success');
+        }
+        source.forEach((item) => {
+          if (item.key === conf.sourceKey) {
+            if (item.props) {
+              item.props.countdown = true;
+            }
+          }
+        });
+        toCountDown();
+      }
+    }
+  } else {
+    setFormErrorKey(formData);
+  }
+};
+/** 跳转等相关交互 */
+const dealLog = (msg: string, type: 'success' | 'warning', status: 'login' | 'register' | '' = '') => {
+  Message({
+    message: msg,
+    duration: 3000,
+    type
+  });
+  if (timer) {
+    clearTimeout(timer);
+  }
+  timer = setTimeout(() => {
+    if (status === 'login') {
+      tabPanel.value = 'password';
+      formType.value = 'login';
+    } else if (status === 'register') {
+      formType.value = 'register';
+    }
+  }, 3000);
+};
+
+/** 缓存倒计时间 */
+const toCountDown = () => {
+  if (!interval) {
+    if (cacheForm.countdownSecond === 0) {
+      cacheForm.countdownSecond = 59;
+    }
+    interval = setInterval(() => {
+      if (cacheForm.countdownSecond >= 1) {
+        cacheForm.countdownSecond -= 1;
+      } else {
+        cacheForm.countdownSecond = 59;
+        interval && clearInterval(interval);
+        interval = null;
+        refreshCountDown(tabPanel.value, formType.value);
+      }
+    }, 1000);
+  }
+};
+/** 刷新倒计时的状态 */
+const refreshCountDown = (tab: string, menu: string) => {
+  const source =
+    menu === 'register'
+      ? RegisterForm
+      : formType.value === 'forget'
+      ? ForgetPasswordForm
+      : tab === 'verifyCode'
+      ? VerifyForm
+      : null;
+  if (source) {
+    const countdown = source.find((item) => item.props);
+    if (countdown?.props && Object.prototype.hasOwnProperty.call(countdown.props, 'countdown')) {
+      if (cacheForm.countdownSecond !== 59 && menu === 'register' && isRegister.value) {
+        countdown.props.second = cacheForm.countdownSecond;
+        countdown.props.countdown = true;
+      } else {
+        countdown.props.countdown = false;
+      }
+    }
+  }
+};
+/** 表单字段change事件 */
+const handleFormChange = (conf: { key: string; errors: Record<string, any> | null; source: Record<string, any> }) => {
+  const { key, errors } = conf;
+  if (errors) {
+    setFormErrorKey({ errors });
+  } else {
+    formErrors[key] = '';
+  }
+  nextTick(() => {
+    const keys = Object.keys(formErrors);
+    const currentForm = FormConfig.value.dict;
+    if (currentForm?.length) {
+      const obj = currentForm.find((item) => keys.includes(item.key) && formErrors[item.key]);
+      if (FormRef.value) {
+        const filterKeys = keys.filter((k) => k !== obj?.key && formErrors[k]);
+        if (filterKeys.length) {
+          FormRef.value?.ClearFormFields(filterKeys);
+        } else {
+          obj && !errors && FormRef.value?.ValidateFormKeys([obj.key]);
+        }
+      }
+      hackMsgError(obj?.key === 'verificationcode' || obj?.key === 'code');
+    }
+  });
+};
+/** 表单input事件 */
+const handleFormInput = (val: boolean) => {
+  disabled.value = val;
+};
+/** 当前表单错误信息 */
+const errorMsg = computed(() => {
+  const keys = Object.keys(formErrors);
+  const currentForm = FormConfig.value.dict;
+  if (currentForm?.length) {
+    const obj = currentForm.find((item) => keys.includes(item.key) && formErrors[item.key]);
+    if (FormRef.value) {
+      const filterKeys = keys.filter((key) => key !== obj?.key && formErrors[key]);
+      filterKeys.length && FormRef.value?.ClearFormFields(filterKeys);
+      hackMsgError(obj?.key === 'verificationcode' || obj?.key === 'code');
+    }
+    if (obj) {
+      return formErrors[obj.key];
+    }
+    return extraErrors.agreement || extraErrors.requestInfo || '';
+  } else {
+    return extraErrors.agreement || extraErrors.requestInfo || '';
+  }
+});
+
+/** hack短信弹窗错误样式 */
+const hackMsgError = (show_error: boolean) => {
+  const el = document.querySelector('.g-input-button');
+  if (el) {
+    if (show_error) {
+      (el as HTMLElement).style.borderColor = 'var(--devui-danger-line, #f66f6a)';
+    } else {
+      (el as HTMLElement).style.borderColor = 'rgba(230, 230, 232, 1)';
+    }
+  }
+};
+
+watch(
+  () => [tabPanel.value, formType.value],
+  (newVal, oldVal) => {
+    if (FormRef.value) {
+      FormRef.value.ClearForm();
+      clearFormError();
+      disabled.value = true;
+    }
+    const [tab, menu] = newVal;
+    const [_, prev_menu] = oldVal;
+    if (menu !== 'register') {
+      if (interval) {
+        clearInterval(interval);
+        interval = null;
+      }
+    }
+    if (prev_menu === 'register') {
+      isRegister.value = false;
+    }
+    refreshCountDown(tab, menu);
+  }
+);
+
+// 移除参数
+localStorage.removeItem('loginReturnUrl');
+const handleAuthLogin = (type: 'csdn' | 'gitee' | 'github') => {
+  if (localStorage.getItem('op_access_token')) {
+    emits('close', true);
+  } else {
+    if (!status.value) {
+      extraErrors.agreement = `请阅读并同意用户协议以及其隐私政策`;
+      AgreementWarn.value = true;
+      setTimeout(() => {
+        AgreementWarn.value = false;
+      }, 500);
+      return;
+    }
+    if (localStorage.getItem('utm_source')) {
+      localStorage.removeItem('utm_source');
+    }
+    // 保存注册上报类型和ref
+    sessionStorage.setItem('loginType', props.triggerType || '');
+    // window.open('http://localhost:5173/oauth/callback', '_blank', 'width=800, height=800, left=200, top=200');
+    const url = `${(import.meta as any).env.VITE_API_HOST}${
+      (import.meta as any).env.VITE_PASSPORT_PREFIX || ''
+    }/api/v1/oauth/login/${type}`;
+    window.open(url, '_blank', 'width=800, height=800, left=400, top=200');
+  }
+};
+
+watchEffect(() => {
+  if (formType.value === 'register') {
+    if (status.value && hwStatus.value && extraErrors.agreement) {
+      extraErrors.agreement = '';
+    }
+  } else if (status.value && extraErrors.agreement) {
+    extraErrors.agreement = '';
+  }
+});
+
+onBeforeUnmount(() => {
+  if (timer) {
+    clearTimeout(timer);
+  }
+  if (interval) {
+    clearInterval(interval);
+  }
+});
+
+onMounted(() => {
+  const orgin = 'https://gitcode.com';
+  window.addEventListener('message', async (event) => {
+    if (event.origin !== orgin) {
+      return; // 安全起见，检查消息来源
+    }
+    if (!event?.data?.access_token) return;
+    const { access_token, refresh_token } = event.data;
+    if (access_token && refresh_token) {
+      const account = useAccountStore();
+      await account.checkIsLogin(access_token, refresh_token);
+      Message.success('登录成功');
+      emits('close', true);
+    }
+  });
+});
+
+onUnmounted(() => {
+  window.removeEventListener('message', () => {});
+});
+</script>
+
+<template>
+  <Modal
+    :ti
+    v-model="vModels"
+    :show-close="showClose"
+    :lock-scroll="lockScroll"
+    :draggable="draggable"
+    :escapable="escapable"
+    :before-close="handleClose"
+    :append-to-body="appendToBody"
+    :class="['login-modal', formType === 'login' ? 'login-modal-l' : 'login-modal-r']"
+  >
+    <template #header>
+      <div v-if="formType === 'login'" class="header-h1">
+        <img :src="logo" alt="头像">
+        <div class="headertitel">Tcode账号登录</div>
+      </div>
+      <div v-else class="header-h1">
+        <img :src="logo" alt="头像">
+        <div class="headertitel">Tcode账号注册</div>
+      </div>
+    </template>
+    <template #default>
+<!--      <div v-if="formType === 'login'" class="header-h1">Tcode账号登录</div>-->
+      <iframe :src="`https://gitcode.com/${formType || 'login'}/?be_nested=1`"></iframe>
+    </template>
+  </Modal>
+</template>
+
+<style lang="scss">
+$active-title: var(--color-CG900);
+$active-color: var(--color-CG800);
+$inactive-title: var(--color-CG500);
+$active-panel: var(--color-G800);
+.header-h1 {
+  padding-left: 16px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #EDEDED;
+  display: flex;
+  align-items: center;
+  img {
+    width: 32px;
+    margin-right: 10px;
+  }
+  .headertitel {
+    letter-spacing: 0.5px;
+    line-height: 24px;
+    font-size: 20px;
+    color: #000000;
+  }
+  *, :before, :after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: #e5e7eb;
+  }
+}
+
+.login-modal-l iframe {
+  border: 0;
+  width: 100%;
+  height: 400px;
+}
+.login-modal-r iframe {
+  border: 0;
+  width: 100%;
+  height: 580px;
+}
+.login-modal {
+  box-sizing: border-box;
+  padding: 24px 0;
+  width: 550px !important;
+  border-radius: 3px !important;
+  .btn-close {
+    width: 12px !important;
+    height: 12px !important;
+    right: 18px !important;
+    top: 18px !important;
+  }
+  .icon-close {
+    font-size: 14px !important;
+    color: var(--color-G400) !important;
+  }
+  .devui-input--error {
+    // border-color: inherit;
+    background-color: inherit;
+  }
+  .devui-input__wrapper {
+    padding: 0;
+  }
+  .devui-input__inner {
+    font-size: 14px;
+    padding: 0 8px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  &-ellipsis {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2; /* 设置文本最大行数为2行 */
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    white-space: normal; /* 在Safari中需要添加这一行来处理部分情况 */
+  }
+  &-title {
+    color: $active-title;
+  }
+  &-tab {
+    color: $active-title;
+    font-weight: bold;
+    font-size: 16px;
+    box-sizing: border-box;
+    line-height: 36px;
+    position: relative;
+    cursor: pointer;
+    &-active {
+      &::after {
+        position: absolute;
+        content: '';
+        top: 36px;
+        border-radius: 2px;
+        border-bottom: 2px solid $active-panel;
+        left: -4px;
+        right: -4px;
+      }
+    }
+    &-inactive {
+      color: $inactive-title;
+    }
+  }
+  &-info {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 2px;
+    div {
+      font-size: 14px;
+      line-height: 20px;
+      height: 20px;
+    }
+    &-left {
+      color: #f2050d;
+      max-width: 240px;
+      min-width: 240px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    &-right {
+      cursor: pointer;
+      text-align: right;
+      color: var(--color-G700);
+    }
+  }
+  &-button {
+    width: 100%;
+    &-group {
+      display: flex;
+      justify-content: center;
+      .devui-button {
+        margin: 0 16px;
+      }
+    }
+  }
+  &-footer {
+    margin: 40px auto 0;
+    &-args {
+      span {
+        display: inline-block;
+        font-size: 12px;
+      }
+    }
+  }
+  &-l {
+    .devui-form__label {
+      height: 0;
+    }
+    .devui-form__label--vertical {
+      padding: 0;
+    }
+    .devui-form__item--vertical {
+      margin-bottom: 12px;
+      &:nth-of-type(2) {
+        margin-bottom: 8px;
+      }
+    }
+    .devui-checkbox--sm {
+      margin: auto;
+    }
+  }
+  &-r {
+    .devui-form__label-span {
+      padding-left: 10px;
+    }
+    .devui-form__label--required {
+      padding-left: 0;
+    }
+    .devui-form__label--required:before {
+      display: inline-block;
+      margin-right: 3px;
+    }
+    .devui-form__control--horizontal {
+      margin-left: 10px;
+    }
+    .devui-form__label {
+      line-height: 40px;
+      height: 40px;
+      font-size: 14px;
+    }
+    .devui-form__label--sm {
+      flex: 0 0 90px;
+    }
+    .login-form-register-cell {
+      .devui-form__item--horizontal {
+        margin-bottom: 8px;
+        &:nth-last-child(1) {
+          margin-bottom: 6px;
+        }
+      }
+    }
+    .login-form-common-cell {
+      .devui-form__item--horizontal {
+        margin-bottom: 12px;
+        &:nth-last-child(1) {
+          margin-bottom: 8px;
+        }
+      }
+    }
+    .devui-checkbox--sm {
+      margin: 0;
+    }
+    .devui-form__label-help {
+      top: 1px;
+    }
+  }
+  .devui-modal__body {
+    padding: 0 20px;
+  }
+  .shaking-box {
+    animation: shaking 0.25s ease-in-out;
+  }
+  @keyframes shaking {
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+    25% {
+      transform: translateX(-10px);
+    }
+    75% {
+      transform: translateX(10px);
+    }
+  }
+}
+</style>
diff --git a/src/router/config/home.ts b/src/router/config/home.ts
index 1031c25..b07bc69 100644
--- a/src/router/config/home.ts
+++ b/src/router/config/home.ts
@@ -254,6 +254,19 @@ export default [
       },
     ]
   },
+  {
+    path: '/Dashboard',
+    name: 'Dashboard',
+    component: () => import('@/views/Jyh/Dashboard/index.vue'),
+    meta: {
+      title: 'Dashboard',
+      reportTitle: 'Dashboard',
+      className: 'w-full min-w-full',
+      hiddenFooter: true,
+      hasMobile: true,
+      asideMenu: 'drawer' // 左侧菜单抽屉模式
+    }
+  },
   {
     path: '/ai',
     redirect: '/ai/home',
diff --git a/src/views/Jyh/Dashboard/Integration.vue b/src/views/Jyh/Dashboard/Integration.vue
new file mode 100644
index 0000000..f28da09
--- /dev/null
+++ b/src/views/Jyh/Dashboard/Integration.vue
@@ -0,0 +1,260 @@
+<template>
+  <d-content class="content-area">
+    <div class="integration-container">
+
+      <div class="header">集成</div>
+
+      <div class="integration-list">
+
+        <div class="integration-item">
+          <div class="inte-icon github-icon">
+            <svg viewBox="0 0 16 16" width="24" height="24" fill="#EAEAEA"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
+          </div>
+          <div class="inte-info">
+            <div class="inte-name">GitHub</div>
+            <div class="inte-desc">连接 GitHub 以获取云代理、Bugbot和增强的代码库上下文</div>
+          </div>
+          <d-button class="connect-btn" variant="outline">连接 <i class="d-icon d-icon-link-external"></i></d-button>
+        </div>
+
+        <div class="integration-item">
+          <div class="inte-icon gitlab-icon">
+            <svg viewBox="0 0 24 24" width="24" height="24"><path fill="#FC6D26" d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.13-.94l2.03-6.26h17.5l2.03 6.26a.84.84 0 0 1-.13.94z"/><path fill="#E24329" d="M12 22.13l-5.84-17.96A.85.85 0 0 1 7.23 3h9.54a.85.85 0 0 1 1.07 1.17L12 22.13z"/><path fill="#FC6D26" d="M12 22.13L7.23 4.17 1.35 14.39a.84.84 0 0 0 .13.94L12 22.13z"/><path fill="#FC6D26" d="M12 22.13l4.77-17.96 5.88 10.22a.84.84 0 0 1 .13.94L12 22.13z"/></svg>
+          </div>
+          <div class="inte-info">
+            <div class="inte-name">GitLab</div>
+            <div class="inte-desc">连接 GitLab 以用于云代理、Bugbot和增强的代码库上下文</div>
+          </div>
+          <d-button class="connect-btn" variant="outline">连接 <i class="d-icon d-icon-link-external"></i></d-button>
+        </div>
+
+        <div class="integration-item">
+          <div class="inte-icon slack-icon">
+            <svg viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="12" r="10" fill="#4A154B"/></svg>
+          </div>
+          <div class="inte-info">
+            <div class="inte-name">松弛</div>
+            <div class="inte-desc">通过 Slack 与云代理协作</div>
+          </div>
+          <d-button class="connect-btn disabled-btn" disabled>连接 <i class="d-icon d-icon-link-external"></i></d-button>
+        </div>
+
+        <div class="integration-item">
+          <div class="inte-icon linear-icon">
+            <svg viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="12" r="10" fill="#5E6AD2"/></svg>
+          </div>
+          <div class="inte-info">
+            <div class="inte-name">线性</div>
+            <div class="inte-desc">连接 Linear 工作区，将问题委派给云代理</div>
+          </div>
+          <d-button class="connect-btn" variant="outline">连接 <i class="d-icon d-icon-link-external"></i></d-button>
+        </div>
+
+      </div>
+
+      <div class="api-section">
+        <div class="api-header">用户 API 密钥</div>
+        <p class="api-description">
+          用户 API 密钥提供对您的 **Cursor 账户**的安全、程序化访问权限，包括 **Cursor Agent CLI** 的无头版本和 **Cloud Agent API**。请像对待密码一样妥善保管它们：确保其安全，切勿公开分享。注意：<span class="highlight-text">Cloud Agent API 目前处于测试阶段。</span>
+        </p>
+
+        <div class="api-card">
+          <div class="api-status">
+            <div class="status-icon">🔑</div>
+            <div class="status-text">
+              <div class="status-title">暂无 API 密钥</div>
+              <div class="status-subtitle">尚未创建任何 API 密钥</div>
+            </div>
+          </div>
+          <d-button class="new-key-btn">
+            <i class="d-icon d-icon-add"></i> + 新 API 密钥
+          </d-button>
+        </div>
+      </div>
+
+    </div>
+  </d-content >
+</template>
+
+<script setup lang="ts">
+// 静态页面，无需特殊逻辑
+</script>
+
+<style lang="scss" scoped>
+/* 定义核心暗色变量 */
+$bg-primary: #1e1e1e;
+$bg-secondary: #141414;
+$text-primary: #eaeaea;
+$text-secondary: #aaaaaa;
+$border-color: #333333;
+$highlight-blue: #4a90e2; // 链接颜色
+$highlight-yellow: #f5a623; // 黄色提示
+
+
+.content-area {
+  background-color: #121212;
+  padding: 40px 60px;
+  overflow-y: auto;
+}
+
+
+
+.integration-page {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  background-color: $bg-secondary;
+  min-height: 100vh;
+  padding: 40px;
+}
+
+.integration-container {
+  //max-width: 800px;
+  margin: 0 auto;
+}
+
+.header {
+  font-size: 28px;
+  font-weight: 500;
+  color: $text-primary;
+  margin-bottom: 30px;
+}
+
+/* --- 集成列表样式 --- */
+.integration-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 40px;
+}
+
+.integration-item {
+  background-color: $bg-primary;
+  border-radius: 8px;
+  padding: 16px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.inte-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 16px;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.inte-info {
+  flex-grow: 1;
+  margin-right: 20px;
+}
+
+.inte-name {
+  font-size: 16px;
+  font-weight: 500;
+  color: $text-primary;
+  margin-bottom: 4px;
+}
+
+.inte-desc {
+  font-size: 13px;
+  color: $text-secondary;
+}
+
+.connect-btn {
+  height: 32px;
+  padding: 0 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: $text-secondary !important;
+  border-color: $border-color !important;
+  background: transparent !important;
+
+  &:hover {
+    border-color: #555555 !important;
+  }
+
+  .d-icon-link-external {
+    margin-left: 5px;
+  }
+}
+
+.disabled-btn {
+  /* 模拟松弛的灰色禁用按钮 */
+  background-color: #2b2b2b !important;
+  color: #666666 !important;
+  border: 1px solid #444444 !important;
+  cursor: not-allowed;
+}
+
+
+/* --- API 密钥部分样式 --- */
+.api-header {
+  font-size: 18px;
+  font-weight: 500;
+  color: $text-primary;
+  margin-bottom: 16px;
+}
+
+.api-description {
+  font-size: 13px;
+  color: $text-secondary;
+  line-height: 1.6;
+  margin-bottom: 20px;
+
+  .highlight-text {
+    color: $highlight-yellow;
+  }
+}
+
+.api-card {
+  background-color: $bg-primary;
+  border-radius: 8px;
+  border: 1px solid $border-color;
+  padding: 20px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.api-status {
+  display: flex;
+  align-items: center;
+}
+
+.status-icon {
+  font-size: 24px;
+  margin-right: 16px;
+}
+
+.status-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: $text-primary;
+}
+
+.status-subtitle {
+  font-size: 13px;
+  color: $text-secondary;
+}
+
+.new-key-btn {
+  background-color: $highlight-blue !important;
+  color: $text-primary !important;
+  border: none;
+  height: 36px;
+  padding: 0 18px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+
+  &:hover {
+    background-color: darken($highlight-blue, 5%) !important;
+  }
+
+  .d-icon-add {
+    margin-right: 4px;
+  }
+}
+</style>
diff --git a/src/views/Jyh/Dashboard/billing.vue b/src/views/Jyh/Dashboard/billing.vue
new file mode 100644
index 0000000..3f05a49
--- /dev/null
+++ b/src/views/Jyh/Dashboard/billing.vue
@@ -0,0 +1,259 @@
+<template>
+  <d-content class="content-area">
+    <div class="billing-container">
+
+      <div class="billing-header">
+        <span class="main-title">账单和发票</span>
+        <d-button class="manage-subscription-btn" variant="outline">
+          管理订阅 <i class="d-icon d-icon-link-external"></i>
+        </d-button>
+      </div>
+
+      <div class="section-card on-demand-section">
+
+        <div class="card-header">
+          <span class="card-title">按需使用</span>
+          <div class="cycle-selector">
+            <span class="cycle-text">Cycle Starting 2025年12月2日</span>
+            <i class="d-icon d-icon-arrow-down-filling"></i>
+          </div>
+        </div>
+
+        <div class="summary-area">
+          <div class="cycle-period">2025年12月2日 - 2026年1月2日</div>
+          <div class="total-amount">0.00 <span class="currency">美元</span></div>
+        </div>
+
+        <div class="table-header">
+          <span class="col-type">类型</span>
+          <span class="col-token">代币</span>
+          <span class="col-cost">成本</span>
+          <span class="col-quantity">数量</span>
+          <span class="col-total">全部的</span>
+        </div>
+
+        <div class="subtotal-row">
+          <span class="subtotal-label">小计:</span>
+          <span class="subtotal-value">0.00 <span class="currency">美元</span></span>
+        </div>
+
+      </div>
+
+      <div class="invoices-section">
+        <div class="section-title">发票</div>
+        <p class="invoice-status">
+          未找到发票。
+        </p>
+      </div>
+
+    </div>
+  </d-content>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style lang="scss" scoped>
+$bg-primary: #1e1e1e; // 卡片/区块背景
+$bg-secondary: #141414; // 页面背景
+$text-primary: #eaeaea; // 主要文本色
+$text-secondary: #aaaaaa; // 次要文本色，如日期
+$text-light-gray: #c9c9c9; // 浅灰色文本，如表格头部
+$border-color: #333333; // 分隔线颜色
+
+
+.content-area {
+  // 继承自父组件，作为页面容器
+  background-color: #121212; // 确保背景色足够深
+  padding: 40px 60px;
+  overflow-y: auto;
+}
+
+.billing-container {
+  //max-width: 900px;
+  margin: 0 auto;
+}
+
+/* --- 头部样式 --- */
+.billing-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30px;
+
+  .main-title {
+    font-size: 20px; /* 标题字体略小，与图片匹配 */
+    font-weight: 500;
+    color: $text-primary;
+  }
+
+  .manage-subscription-btn {
+    height: 32px;
+    padding: 0 16px;
+    border-radius: 6px;
+    font-size: 13px;
+    font-weight: 500;
+    color: $text-secondary !important;
+    border-color: $border-color !important;
+    background: transparent !important;
+
+    .d-icon-link-external {
+      margin-left: 5px;
+      font-size: 12px;
+    }
+  }
+}
+
+/* --- 按需使用卡片 --- */
+.section-card {
+  background-color: $bg-primary;
+  border-radius: 8px;
+  padding: 24px;
+}
+
+.on-demand-section {
+  padding-bottom: 0; /* 小计行在卡片内部，所以不需要底部额外内边距 */
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+
+  .card-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: $text-primary;
+  }
+}
+
+.cycle-selector {
+  display: flex;
+  align-items: center;
+  color: $text-secondary;
+  font-size: 13px;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+
+  // 模拟深色下拉菜单样式
+  &:hover {
+    background-color: #2a2a2a;
+  }
+
+  .d-icon-arrow-down-filling {
+    margin-left: 4px;
+    font-size: 10px;
+  }
+}
+
+.summary-area {
+  margin-bottom: 24px;
+}
+
+.cycle-period {
+  font-size: 13px;
+  color: $text-secondary;
+  margin-bottom: 4px;
+}
+
+.total-amount {
+  font-size: 32px;
+  font-weight: 400;
+  color: $text-primary;
+
+  .currency {
+    font-size: 16px;
+    margin-left: 4px;
+    color: $text-secondary;
+  }
+}
+
+
+/* --- 表格样式 (使用 Flex/Grid 模拟) --- */
+.table-header {
+  display: flex;
+  padding: 12px 0;
+  border-bottom: 1px solid $border-color;
+  font-size: 12px;
+  font-weight: 500;
+  color: $text-light-gray; /* 浅灰色字体 */
+}
+
+.col-type {
+  flex: 3; /* 类型占比较大 */
+}
+.col-token {
+  flex: 2;
+}
+.col-cost {
+  flex: 2;
+}
+.col-quantity {
+  flex: 2;
+}
+.col-total {
+  flex: 1; /* 总计靠右对齐，占位较小 */
+  text-align: right;
+  padding-right: 24px; // 留出空间给小计的右侧对齐
+}
+
+/* --- 小计行 --- */
+.subtotal-row {
+  display: flex;
+  justify-content: flex-end; /* 将小计行整体靠右 */
+  padding: 16px 0;
+  border-top: 1px solid $border-color;
+  background-color: #242424; /* 模拟小计行的背景颜色比卡片背景稍亮 */
+  margin-top: 1px; /* 避免表格与小计行的边框重叠 */
+
+  // 确保小计行和卡片圆角自然衔接
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+
+  // 调整外边距以覆盖卡片本身的内边距
+  margin: 0 -24px;
+  padding-right: 24px; // 保持右侧对齐的内边距
+}
+
+.subtotal-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: $text-primary;
+  margin-right: 40px; /* 标签与值的间距 */
+}
+
+.subtotal-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: $text-primary;
+  width: 10%; /* 保证与表格最后一列宽度大致对齐 */
+  min-width: 80px;
+  text-align: right;
+
+  .currency {
+    font-weight: 400;
+    color: $text-secondary;
+    margin-left: 4px;
+  }
+}
+
+/* --- 发票部分 --- */
+.invoices-section {
+  margin-top: 40px;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: $text-primary;
+  margin-bottom: 10px;
+}
+
+.invoice-status {
+  font-size: 14px;
+  color: $text-secondary; /* 浅绿色文字 */
+}
+
+</style>
diff --git a/src/views/Jyh/Dashboard/expense.vue b/src/views/Jyh/Dashboard/expense.vue
new file mode 100644
index 0000000..163ffd7
--- /dev/null
+++ b/src/views/Jyh/Dashboard/expense.vue
@@ -0,0 +1,102 @@
+<template>
+  <d-content class="content-area">
+    <div class="page-container">
+
+      <h2 class="title">按需使用</h2>
+
+      <div class="feature-card">
+        <div class="card-content">
+          <div class="text-area">
+            <h3 class="card-title">按需使用</h3>
+            <p class="card-description">启用按需使用功能，即可超出套餐包含的流量，此功能需要付费套餐。</p>
+          </div>
+
+          <button class="upgrade-button">
+            升级到专业版
+          </button>
+        </div>
+      </div>
+    </div>
+  </d-content>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.content-area {
+  background-color: #121212;
+  padding: 40px 60px;
+  /*overflow-y: auto;*/
+}
+
+
+.page-container {
+  /* 使用深色背景，模拟图片中的深黑/灰色 */
+  /*background-color: #1c1c1c;*/
+  min-height: 100vh; /* 保证至少覆盖整个视口高度 */
+  /*padding: 20px 40px; !* 内部留白 *!*/
+  color: #ffffff; /* 默认文本颜色为白色 */
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 20px; /* 标题与内容卡片的间距 */
+  color: #f0f0f0; /* 略微亮一点的白色 */
+}
+
+.feature-card {
+  background-color: #2a2a2a;
+  border-radius: 8px;
+  padding: 16px 20px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+}
+
+.card-content {
+  display: flex; /* 启用 Flex 布局 */
+  justify-content: space-between;
+  align-items: center; /* 垂直居中对齐 */
+}
+
+.text-area {
+  flex-grow: 1;
+  margin-right: 20px;
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+  margin-bottom: 4px;
+  color: #ffffff;
+}
+
+.card-description {
+  font-size: 14px;
+  margin: 0;
+  color: #c7a2e8;
+}
+
+.upgrade-button {
+  /* 按钮的通用样式 */
+  background-color: transparent; /* 背景透明 */
+  color: #f0f0f0; /* 按钮文字颜色 */
+  border: 1px solid #7c7c7c; /* 浅灰色边框，模拟图片中的效果 */
+  border-radius: 20px; /* 较大的圆角，看起来像药丸形状 */
+  padding: 6px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.3s, border-color 0.3s;
+  /* 保持按钮宽度不随内容变化 */
+  flex-shrink: 0;
+}
+
+/* 悬停效果 */
+.upgrade-button:hover {
+  background-color: #3b3b3b;
+  border-color: #a0a0a0;
+}
+</style>
diff --git a/src/views/Jyh/Dashboard/index.vue b/src/views/Jyh/Dashboard/index.vue
new file mode 100644
index 0000000..f3370f5
--- /dev/null
+++ b/src/views/Jyh/Dashboard/index.vue
@@ -0,0 +1,298 @@
+<template>
+  <div class="app-container">
+    <d-layout class="main-layout">
+      <d-aside class="sidebar">
+        <div class="user-profile">
+          <div class="avatar-area">
+            <span class="username">用户名</span>
+            <d-icon name="edit" size="14px" color="#666" />
+          </div>
+          <div class="user-email">免费计划 · 123456@gmail.com</div>
+        </div>
+
+        <div class="nav-menu">
+          <div
+            class="menu-item"
+            :class="{ active: activeMenu === 'overview' }"
+            @click="activeMenu = 'overview'"
+          >
+            <i class="icon-end-new"></i> 概述
+          </div>
+          <div
+            class="menu-item"
+            :class="{ active: activeMenu === 'setting' }"
+            @click="activeMenu = 'setting'"
+          >
+            <i class="icon-setting"></i> 设置
+          </div>
+        </div>
+
+        <div class="divider"></div>
+
+        <div class="nav-menu">
+          <div
+            class="menu-item"
+            :class="{ active: activeMenu === 'integration' }"
+            @click="activeMenu = 'integration'"
+          >
+            <i class="icon-assembly-new"></i> 集成
+          </div>
+          <div
+            class="menu-item"
+            :class="{ active: activeMenu === 'proxy' }"
+            @click="activeMenu = 'proxy'"
+          >
+            <i class="icon-cloud"></i> 云代理
+          </div>
+        </div>
+
+        <div class="spacer"></div>
+
+        <div class="nav-menu bottom-menu">
+          <div
+            class="menu-item"
+            :class="{ active: activeMenu === 'usage' }"
+            @click="activeMenu = 'usage'"
+          >
+            <i class="icon-chart"></i> 用法
+          </div>
+          <div
+            class="menu-item"
+            :class="{ active: activeMenu === 'expense' }"
+            @click="activeMenu = 'expense'"
+          >
+            <i class="icon-time"></i> 开支
+          </div>
+          <div
+            class="menu-item"
+            :class="{ active: activeMenu === 'billing' }"
+            @click="activeMenu = 'billing'"
+          >
+            <i class="icon-remove-member"></i> 账单和发票
+          </div>
+        </div>
+
+        <div class="divider"></div>
+
+        <div class="nav-menu">
+          <div
+            class="menu-item"
+            :class="{ active: activeMenu === 'docs' }"
+            @click="activeMenu = 'docs'"
+          >
+            <i class="icon-doc"></i> 文档
+          </div>
+          <div
+            class="menu-item"
+            :class="{ active: activeMenu === 'contact' }"
+            @click="activeMenu = 'contact'"
+          >
+            <i class="icon-mail"></i> 联系我们
+          </div>
+        </div>
+      </d-aside>
+
+      <!-- 动态内容区域 -->
+      <component :is="currentComponent" />
+
+    </d-layout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import OverView from './overview.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';
+
+// 定义菜单映射关系
+const menuComponents = {
+  overview: OverView,
+  setting: Setting,
+  integration: Integration,
+  proxy: Proxy,
+  usage: Usage,
+  expense: Expense,
+  billing: Billing,
+};
+
+// 选中的菜单
+const activeMenu = ref('overview');
+
+// 根据选中的菜单获取当前组件
+const currentComponent = computed(() => {
+  return menuComponents[activeMenu.value] || OverView;
+});
+</script>
+
+<style lang="scss" scoped>
+/* 全局暗黑重置 */
+.app-container {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  background-color: #0c0c0c;
+  color: #fff;
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+}
+
+.main-layout {
+  height: 100%;
+}
+
+/* --- 侧边栏样式 --- */
+.sidebar {
+  background-color: #121212; /* 比背景稍亮一点 */
+  width: 260px;
+  border-right: 1px solid #252525;
+  padding: 20px 16px;
+  display: flex;
+  flex-direction: column;
+}
+
+.user-profile {
+  margin-bottom: 24px;
+  .username {
+    font-size: 14px;
+    font-weight: 500;
+    margin-right: 8px;
+    color: #e5e5e5;
+  }
+  .user-email {
+    font-size: 12px;
+    color: #888;
+    margin-top: 4px;
+  }
+}
+
+.nav-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.menu-item {
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 14px;
+  color: #999;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  transition: all 0.2s;
+
+  &:hover {
+    background-color: #252525;
+    color: #fff;
+  }
+
+  &.active {
+    background-color: #252525;
+    color: #fff;
+    font-weight: 500;
+  }
+
+  i {
+    margin-right: 10px;
+    /* 简单的 CSS 图标模拟 */
+    width: 14px;
+    height: 14px;
+    border: 1px solid currentColor;
+    border-radius: 3px;
+    display: inline-block;
+  }
+}
+
+/* 不同图标的特殊样式 */
+.icon-overview {
+  border-radius: 2px;
+  background-color: currentColor;
+}
+
+.icon-setting {
+  border-radius: 50%;
+}
+
+.icon-cube {
+  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+}
+
+.icon-cloud {
+  border-radius: 50% 50% 0 0;
+}
+
+.icon-chart {
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: currentColor;
+  }
+}
+
+.icon-time {
+  border-radius: 50%;
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 40%;
+    height: 2px;
+    background-color: currentColor;
+    transform-origin: left center;
+  }
+}
+
+.icon-bill {
+  border-radius: 2px;
+}
+
+.icon-doc {
+  border-radius: 2px;
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    top: 3px;
+    right: 3px;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background-color: currentColor;
+  }
+}
+
+.icon-mail {
+  border-radius: 2px;
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 2px;
+    left: 2px;
+    width: 60%;
+    height: 2px;
+    background-color: currentColor;
+  }
+}
+
+.divider {
+  height: 1px;
+  background-color: #252525;
+  margin: 16px 0;
+}
+
+.spacer {
+  flex-grow: 1;
+}
+</style>
diff --git a/src/views/Jyh/Dashboard/overview.vue b/src/views/Jyh/Dashboard/overview.vue
new file mode 100644
index 0000000..0762ec9
--- /dev/null
+++ b/src/views/Jyh/Dashboard/overview.vue
@@ -0,0 +1,255 @@
+<template>
+  <d-content class="content-area">
+
+    <div class="plan-cards-container">
+      <d-card class="plan-card">
+        <div class="card-title">专业版 <span class="price">20美元/月</span></div>
+        <div class="card-desc">入门级套餐，可访问高级模型、无限次 Tab 键自动补全等功能。</div>
+        <d-button class="card-btn white-btn">免费试用7天</d-button>
+      </d-card>
+
+      <d-card class="plan-card">
+        <div class="card-title">专业+ <span class="price">60美元/月</span></div>
+        <div class="card-desc">使用量是专业版的 3 倍，解锁代理程序更高的限制等等。</div>
+        <d-button class="card-btn white-btn">升级到专业版+</d-button>
+      </d-card>
+
+      <d-card class="plan-card">
+        <div class="card-title">超级版 <span class="price">200美元/月</span></div>
+        <div class="card-desc">并行运行代理，享受 20 倍使用限制，并获得高级功能的优先使用权，从而获得最大价值。</div>
+        <d-button class="card-btn white-btn">升级到超级版</d-button>
+      </d-card>
+    </div>
+
+    <div class="invite-section">
+      <div class="invite-text">
+        <h3>邀请团队成员</h3>
+        <p>利用管理控制、分析和企业级安全功能，加速您的团队发展</p>
+      </div>
+      <d-button class="invite-btn" variant="outline">邀请您的团队</d-button>
+    </div>
+
+    <div class="integration-list">
+
+      <div class="integration-item">
+        <div class="inte-left">
+          <div class="inte-icon github-icon"><svg viewBox="0 0 16 16" width="24" height="24" fill="white"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>
+          <div class="inte-info">
+            <div class="inte-name">GitHub</div>
+            <div class="inte-desc">连接 GitHub 以获取云代理、Bugbot 和增强的代码库上下文</div>
+          </div>
+        </div>
+        <d-button class="connect-btn">连接 <i class="icon-link-external"></i></d-button>
+      </div>
+
+      <div class="integration-item">
+        <div class="inte-left">
+          <div class="inte-icon gitlab-icon"><svg viewBox="0 0 24 24" width="24" height="24"><path fill="#FC6D26" d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.13-.94l2.03-6.26h17.5l2.03 6.26a.84.84 0 0 1-.13.94z"/><path fill="#E24329" d="M12 22.13l-5.84-17.96A.85.85 0 0 1 7.23 3h9.54a.85.85 0 0 1 1.07 1.17L12 22.13z"/><path fill="#FC6D26" d="M12 22.13L7.23 4.17 1.35 14.39a.84.84 0 0 0 .13.94L12 22.13z"/><path fill="#FC6D26" d="M12 22.13l4.77-17.96 5.88 10.22a.84.84 0 0 1 .13.94L12 22.13z"/></svg></div>
+          <div class="inte-info">
+            <div class="inte-name">GitLab</div>
+            <div class="inte-desc">连接 GitLab 以用于云代理、Bugbot 和增强的代码库上下文</div>
+          </div>
+        </div>
+        <d-button class="connect-btn">连接 <i class="icon-link-external"></i></d-button>
+      </div>
+
+      <div class="integration-item">
+        <div class="inte-left">
+          <div class="inte-icon slack-icon"><svg viewBox="0 0 24 24" width="24" height="24" fill="white"><circle cx="12" cy="12" r="10" fill="#4A154B"/></svg></div> <div class="inte-info">
+          <div class="inte-name">松弛</div>
+          <div class="inte-desc">通过 Slack 与云代理协作</div>
+        </div>
+        </div>
+        <d-button class="connect-btn disabled" disabled>连接 <i class="icon-link-external"></i></d-button>
+      </div>
+
+      <div class="integration-item">
+        <div class="inte-left">
+          <div class="inte-icon linear-icon"><svg viewBox="0 0 24 24" width="24" height="24" fill="white"><circle cx="12" cy="12" r="10" fill="#5E6AD2"/></svg></div>
+          <div class="inte-info">
+            <div class="inte-name">线性</div>
+            <div class="inte-desc">连接 Linear 工作区，将问题委派给云代理</div>
+          </div>
+        </div>
+        <d-button class="connect-btn">连接 <i class="icon-link-external"></i></d-button>
+      </div>
+
+    </div>
+
+  </d-content>
+</template>
+
+<script>
+export default {
+name: "overview"
+}
+</script>
+
+<style lang="scss" scoped>
+/* --- 右侧内容样式 --- */
+.content-area {
+  background-color: #121212;
+  padding: 40px 60px;
+  overflow-y: auto;
+}
+
+/* 顶部卡片 */
+.plan-cards-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  margin-bottom: 40px;
+}
+
+.plan-card {
+  background-color: #161616 !important; /* 强制覆盖 DevUI 默认白底 */
+  border: 1px solid #252525 !important;
+  border-radius: 8px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 200px;
+  color: #fff;
+
+  :deep(.devui-card__header) {
+    padding: 0 0 12px 0;
+    border-bottom: none;
+  }
+
+  .card-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #fff;
+    .price {
+      font-size: 14px;
+      color: #666;
+      margin-left: 8px;
+      font-weight: normal;
+    }
+  }
+
+  .card-desc {
+    font-size: 13px;
+    color: #888;
+    line-height: 1.5;
+    margin-bottom: 20px;
+    flex-grow: 1;
+  }
+
+  .card-btn {
+    width: fit-content;
+    font-size: 12px;
+    font-weight: 600;
+    padding: 6px 12px;
+    border-radius: 4px;
+
+    &.white-btn {
+      background-color: #fff !important;
+      color: #000 !important;
+      border: none !important;
+      &:hover {
+        background-color: #e0e0e0 !important;
+      }
+    }
+  }
+}
+
+/* 中间邀请部分 */
+.invite-section {
+  background-color: #121212;
+  text-align: center;
+  padding: 40px 0;
+  margin-bottom: 20px;
+
+  .invite-text {
+    margin-bottom: 20px;
+    h3 {
+      font-size: 14px;
+      color: #666;
+      font-weight: normal;
+      margin-bottom: 8px;
+    }
+    p {
+      font-size: 14px;
+      color: #888;
+      max-width: 500px;
+      margin: 0 auto;
+    }
+  }
+
+  .invite-btn {
+    background: transparent;
+    border: 1px solid #444;
+    color: #fff;
+    &:hover {
+      border-color: #666;
+    }
+  }
+}
+
+/* 底部集成列表 */
+.integration-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.integration-item {
+  background-color: #161616;
+  border: 1px solid #252525;
+  border-radius: 8px;
+  padding: 16px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .inte-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .inte-icon {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .inte-info {
+    .inte-name {
+      font-size: 14px;
+      font-weight: 600;
+      color: #e5e5e5;
+      margin-bottom: 4px;
+    }
+    .inte-desc {
+      font-size: 12px;
+      color: #666;
+    }
+  }
+
+  .connect-btn {
+    background-color: #fff !important;
+    color: #000 !important;
+    border: none;
+    font-size: 12px;
+    height: 28px;
+    padding: 0 12px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    &.disabled {
+      background-color: #252525 !important;
+      color: #555 !important;
+    }
+
+    i {
+      font-style: normal;
+    }
+  }
+}
+</style>
diff --git a/src/views/Jyh/Dashboard/proxy.vue b/src/views/Jyh/Dashboard/proxy.vue
new file mode 100644
index 0000000..b981188
--- /dev/null
+++ b/src/views/Jyh/Dashboard/proxy.vue
@@ -0,0 +1,409 @@
+<template>
+  <d-content class="content-area">
+    <div class="agent-container">
+
+      <div class="header">
+        <span class="main-title">云代理</span>
+        <span class="subtitle">创建代理异步方式编辑和运行代码</span>
+      </div>
+
+      <div class="section-title">集成</div>
+      <div class="integration-list">
+
+        <div class="integration-item">
+          <div class="inte-icon github-icon">
+            <svg viewBox="0 0 16 16" width="24" height="24" fill="#EAEAEA"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
+          </div>
+          <div class="inte-info">
+            <div class="inte-name">GitHub</div>
+            <div class="inte-desc">连接 GitHub 以获取云代理、Bugbot和增强的代码库上下文</div>
+          </div>
+          <d-button class="connect-btn" variant="outline">连接 <i class="d-icon d-icon-link-external"></i></d-button>
+        </div>
+
+        <div class="integration-item">
+          <div class="inte-icon gitlab-icon">
+            <svg viewBox="0 0 24 24" width="24" height="24"><path fill="#FC6D26" d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.13-.94l2.03-6.26h17.5l2.03 6.26a.84.84 0 0 1-.13.94z"/><path fill="#E24329" d="M12 22.13l-5.84-17.96A.85.85 0 0 1 7.23 3h9.54a.85.85 0 0 1 1.07 1.17L12 22.13z"/><path fill="#FC6D26" d="M12 22.13L7.23 4.17 1.35 14.39a.84.84 0 0 0 .13.94L12 22.13z"/><path fill="#FC6D26" d="M12 22.13l4.77-17.96 5.88 10.22a.84.84 0 0 1 .13.94L12 22.13z"/></svg>
+          </div>
+          <div class="inte-info">
+            <div class="inte-name">GitLab</div>
+            <div class="inte-desc">连接 GitLab 以用于云代理、Bugbot和增强的代码库上下文</div>
+          </div>
+          <d-button class="connect-btn" variant="outline">连接 <i class="d-icon d-icon-link-external"></i></d-button>
+        </div>
+
+        <div class="integration-item">
+          <div class="inte-icon slack-icon">
+            <svg viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="12" r="10" fill="#4A154B"/></svg>
+          </div>
+          <div class="inte-info">
+            <div class="inte-name">松弛</div>
+            <div class="inte-desc">通过 Slack 与云代理协作</div>
+          </div>
+          <d-button class="connect-btn disabled-btn" disabled>连接 <i class="d-icon d-icon-link-external"></i></d-button>
+        </div>
+
+        <div class="integration-item">
+          <div class="inte-icon linear-icon">
+            <svg viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="12" r="10" fill="#5E6AD2"/></svg>
+          </div>
+          <div class="inte-info">
+            <div class="inte-name">线性</div>
+            <div class="inte-desc">连接 Linear 工作区，将问题委派给云代理</div>
+          </div>
+          <d-button class="connect-btn" variant="outline">连接 <i class="d-icon d-icon-link-external"></i></d-button>
+        </div>
+
+      </div>
+
+      <div class="upgrade-card">
+        <div class="upgrade-text">
+          <div class="upgrade-title">升级以解锁云代理</div>
+          <div class="upgrade-subtitle">升级至云代理，无限次完成、MAX模式等功能</div>
+        </div>
+        <d-button class="trial-btn">免费试用7天</d-button>
+      </div>
+
+      <div class="api-section">
+        <div class="section-title">用户 API 密钥</div>
+        <p class="api-description">
+          用户 API 密钥提供对您的 Cursor 账户的安全、程序化访问权限，包括 **Cursor Agent CLI** 的无头版本和 **Cloud Agent API**。请像对待密码一样妥善保管它们：确保其安全，切勿公开分享。注意：<span class="highlight-text">Cloud Agent API 目前处于测试阶段。</span>
+        </p>
+
+        <div class="api-card">
+          <div class="api-status">
+            <div class="status-icon">🔑</div>
+            <div class="status-text">
+              <div class="status-title">暂无 API 密钥</div>
+              <div class="status-subtitle">尚未创建任何 API 密钥</div>
+            </div>
+          </div>
+          <d-button class="new-key-btn">
+            <i class="d-icon d-icon-add"></i> + 新 API 密钥
+          </d-button>
+        </div>
+      </div>
+
+      <div class="env-section">
+        <div class="env-header">
+          <div class="section-title">全局环境变量</div>
+          <d-button class="reset-btn" variant="outline"><i class="d-icon d-icon-refresh"></i> 重置密钥</d-button>
+        </div>
+
+        <p class="env-description">
+          将密钥作为环境变量注入到后台云代理环境中。您的密钥将覆盖团队的密钥。
+        </p>
+
+        <div class="env-status-card">
+          <div class="status-left">
+            <div class="status-title">目前还没有任何秘钥</div>
+            <div class="status-subtitle">添加或导入 .env 文件，以用作后台代理远程的环境变量。</div>
+          </div>
+          <d-button class="add-env-btn">添加秘钥</d-button>
+        </div>
+      </div>
+
+    </div>
+  </d-content>
+</template>
+
+<script setup lang="ts">
+// 静态页面，无需特殊逻辑
+</script>
+
+<style lang="scss" scoped>
+/* 定义核心暗色变量 */
+$bg-primary: #1e1e1e;
+$bg-secondary: #141414;
+$text-primary: #eaeaea;
+$text-secondary: #aaaaaa;
+$border-color: #333333;
+$highlight-blue: #4a90e2; // 链接/主要按钮颜色
+$highlight-yellow: #f5a623; // 黄色提示
+$upgrade-bg: #222222; // 升级卡片背景色
+$button-bg: #444444; // 试用按钮背景色
+
+
+.content-area {
+  background-color: #121212;
+  padding: 40px 60px;
+  overflow-y: auto;
+}
+
+
+
+.cloud-agent-page {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  background-color: $bg-secondary;
+  min-height: 100vh;
+  padding: 40px;
+}
+
+.agent-container {
+  //max-width: 800px;
+  margin: 0 auto;
+}
+
+/* --- 基础结构样式 --- */
+.header {
+  margin-bottom: 30px;
+  .main-title {
+    font-size: 28px;
+    font-weight: 500;
+    color: $text-primary;
+    display: block;
+    margin-bottom: 4px;
+  }
+  .subtitle {
+    font-size: 13px;
+    color: $text-secondary;
+  }
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: $text-secondary;
+  margin-top: 30px;
+  margin-bottom: 8px;
+}
+
+
+/* --- 集成列表样式 (与上一个图相同) --- */
+.integration-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.integration-item {
+  background-color: $bg-primary;
+  border-radius: 8px;
+  padding: 16px 24px;
+  display: flex;
+  align-items: center;
+}
+
+.inte-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 16px;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.inte-info {
+  flex-grow: 1;
+  margin-right: 20px;
+}
+
+.inte-name {
+  font-size: 16px;
+  font-weight: 500;
+  color: $text-primary;
+  margin-bottom: 4px;
+}
+
+.inte-desc {
+  font-size: 13px;
+  color: $text-secondary;
+}
+
+.connect-btn {
+  height: 32px;
+  padding: 0 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: $text-secondary !important;
+  border-color: $border-color !important;
+  background: transparent !important;
+
+  .d-icon-link-external {
+    margin-left: 5px;
+  }
+}
+
+.disabled-btn {
+  background-color: #2b2b2b !important;
+  color: #666666 !important;
+  border: 1px solid #444444 !important;
+  cursor: not-allowed;
+}
+
+/* --- 升级卡片 --- */
+.upgrade-card {
+  background-color: $upgrade-bg;
+  border-radius: 8px;
+  padding: 20px 24px;
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid #383838;
+}
+
+.upgrade-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: $text-primary;
+  margin-bottom: 4px;
+}
+
+.upgrade-subtitle {
+  font-size: 13px;
+  color: $text-secondary;
+}
+
+.trial-btn {
+  background-color: $button-bg !important;
+  color: $text-primary !important;
+  border: none;
+  height: 36px;
+  padding: 0 18px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+
+  &:hover {
+    background-color: darken($button-bg, 5%) !important;
+  }
+}
+
+/* --- API 密钥部分 (与上一个图相同) --- */
+.api-section {
+  padding-top: 10px; /* 调整间距 */
+}
+
+.api-description {
+  font-size: 13px;
+  color: $text-secondary;
+  line-height: 1.6;
+  margin-bottom: 20px;
+
+  .highlight-text {
+    color: $highlight-yellow;
+  }
+}
+
+.api-card {
+  background-color: $bg-primary;
+  border-radius: 8px;
+  border: 1px solid $border-color;
+  padding: 20px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.api-status {
+  display: flex;
+  align-items: center;
+}
+
+.status-icon {
+  font-size: 24px;
+  margin-right: 16px;
+}
+
+.status-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: $text-primary;
+}
+
+.status-subtitle {
+  font-size: 13px;
+  color: $text-secondary;
+}
+
+.new-key-btn {
+  background-color: $highlight-blue !important;
+  color: $text-primary !important;
+  border: none;
+  height: 36px;
+  padding: 0 18px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+
+  .d-icon-add {
+    margin-right: 4px;
+  }
+}
+
+/* --- 环境变量部分 --- */
+.env-section {
+  padding-bottom: 40px;
+}
+
+.env-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+
+  .section-title {
+    margin-top: 40px;
+    margin-bottom: 0;
+  }
+}
+
+.reset-btn {
+  height: 32px;
+  padding: 0 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  color: $text-secondary !important;
+  border-color: $border-color !important;
+  background: transparent !important;
+
+  .d-icon-refresh {
+    margin-right: 4px;
+  }
+}
+
+.env-description {
+  font-size: 13px;
+  color: $text-secondary;
+  line-height: 1.6;
+  margin-top: 8px;
+  margin-bottom: 20px;
+}
+
+.env-status-card {
+  background-color: $bg-primary;
+  border-radius: 8px;
+  border: 1px solid $border-color;
+  padding: 20px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .status-left {
+    // 覆盖 API 密钥部分的样式，使其更贴合图片
+    .status-title {
+      font-size: 14px;
+      margin-bottom: 4px;
+    }
+    .status-subtitle {
+      font-size: 13px;
+    }
+  }
+}
+
+.add-env-btn {
+  background-color: #333333 !important;
+  color: $text-primary !important;
+  border: 1px solid #555 !important;
+  height: 36px;
+  padding: 0 18px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+
+  &:hover {
+    background-color: #444444 !important;
+  }
+}
+</style>
diff --git a/src/views/Jyh/Dashboard/setting.vue b/src/views/Jyh/Dashboard/setting.vue
new file mode 100644
index 0000000..774efdc
--- /dev/null
+++ b/src/views/Jyh/Dashboard/setting.vue
@@ -0,0 +1,268 @@
+<template>
+  <d-content class="content-area">
+    <div class="settings-container">
+
+      <div class="header">设置</div>
+
+      <div class="section-title">隐私</div>
+      <div class="setting-block">
+
+        <div class="setting-item">
+          <div class="item-content">
+            <div class="item-header">
+              <span class="item-title">共享数据</span>
+              <span class="status-tag">1小时后激活</span>
+            </div>
+            <p class="item-description">您的代码库、提示、编辑和其他使用数据将被 Cursor 存储和训练，以改进产品。</p>
+          </div>
+          <d-button class="action-btn edit-btn">编辑</d-button>
+        </div>
+
+        <div class="info-note">
+          <span class="highlight-text">首次使用时，数据共享功能将暂停，</span>共享功能将在1小时后激活。<a href="#" class="learn-more">了解更多</a>
+        </div>
+      </div>
+
+      <div class="section-title">学生验证</div>
+      <div class="setting-block">
+
+        <div class="setting-item">
+          <div class="item-content">
+            <div class="item-header">
+              <span class="item-title">学生身份</span>
+            </div>
+            <p class="item-description">只有 .edu 邮箱和特定教育领域人才可进行学生身份验证。</p>
+          </div>
+          <d-button class="action-btn disabled-btn" disabled>不符合条件</d-button>
+        </div>
+      </div>
+
+      <div class="section-title">活跃会话</div>
+      <div class="setting-block">
+
+        <div class="setting-item">
+          <div class="item-content session-content">
+            <div class="custom-checkbox"></div>
+            <div>
+              <div class="item-header">
+                <span class="item-title">网站</span>
+              </div>
+              <p class="item-description">创建于 6 天前</p>
+            </div>
+          </div>
+          <d-button class="action-btn revoke-btn">撤销</d-button>
+        </div>
+
+        <div class="session-note">
+          撤销会话可能需要最多 10 分钟才能完成。
+        </div>
+      </div>
+
+      <div class="section-title">更多的</div>
+      <div class="setting-block">
+
+        <div class="setting-item">
+          <div class="item-content">
+            <div class="item-header">
+              <span class="item-title">删除账户</span>
+            </div>
+          </div>
+          <d-button class="action-btn delete-btn">删除</d-button>
+        </div>
+      </div>
+
+    </div>
+  </d-content>
+</template>
+
+<script setup lang="ts">
+// 静态页面，无需特殊逻辑
+</script>
+
+<style lang="scss" scoped>
+/* 定义核心暗色变量 */
+$bg-primary: #1e1e1e;
+$bg-secondary: #141414;
+$text-primary: #ffffff;
+$text-secondary: #aaaaaa;
+$border-color: #333333;
+$highlight-orange: #f5a623;
+$delete-red: #a93b4d;
+
+.content-area {
+  background-color: #121212;
+  padding: 40px 60px;
+  overflow-y: auto;
+}
+
+
+.settings-page {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  background-color: $bg-secondary;
+  min-height: 100vh;
+  padding: 40px;
+}
+
+.settings-container {
+  //max-width: 800px;
+  margin: 0 auto;
+}
+
+/* --- 基础结构样式 --- */
+.header {
+  font-size: 28px;
+  font-weight: 500;
+  color: $text-primary;
+  margin-bottom: 30px;
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: $text-secondary;
+  margin-top: 24px;
+  margin-bottom: 8px;
+}
+
+.setting-block {
+  background-color: $bg-primary;
+  border-radius: 8px;
+  border: 1px solid $border-color;
+  overflow: hidden; /* 确保子元素的圆角生效 */
+}
+
+/* --- 列表项样式 --- */
+.setting-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  border-bottom: 1px solid $border-color;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.item-content {
+  flex-grow: 1;
+}
+
+.item-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 4px;
+}
+
+.item-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: $text-primary;
+  margin-right: 12px;
+}
+
+.status-tag {
+  background-color: #333333;
+  color: $text-secondary;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.item-description {
+  font-size: 13px;
+  color: $text-secondary;
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* --- 信息和提示样式 --- */
+.info-note, .session-note {
+  font-size: 13px;
+  color: $text-secondary;
+  padding: 12px 24px;
+  border-top: 1px solid $border-color;
+}
+
+.info-note {
+  border-top: none; /* 共享数据区域是连续的，原图没有上边框 */
+  background-color: darken($bg-primary, 2%); /* 略深的背景 */
+
+  .highlight-text {
+    color: $highlight-orange;
+  }
+
+  .learn-more {
+    color: #4a90e2; /* 链接蓝色 */
+    text-decoration: none;
+    margin-left: 4px;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.session-note {
+  border-top: 1px solid $border-color;
+}
+
+/* --- 按钮样式 --- */
+.action-btn {
+  height: 32px;
+  padding: 0 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+
+  /* 默认按钮 (编辑/撤销) - 灰色背景 */
+  &.edit-btn, &.revoke-btn {
+    background-color: #333333 !important;
+    color: $text-primary !important;
+    border: none;
+    &:hover {
+      background-color: #444444 !important;
+    }
+  }
+
+  /* 删除按钮 - 红色背景 */
+  &.delete-btn {
+    background-color: $delete-red !important;
+    color: $text-primary !important;
+    border: none;
+    &:hover {
+      background-color: darken($delete-red, 5%) !important;
+    }
+  }
+
+  /* 不符合条件 (Disabled) */
+  &.disabled-btn {
+    background-color: #333333 !important;
+    color: #666666 !important;
+    border: 1px solid #444444 !important;
+    cursor: not-allowed;
+
+    /* 增加原图中的图标，这里使用文本代替 */
+    &::before {
+      content: '🗋 '; /* 模拟图标 */
+      margin-right: 4px;
+      font-size: 16px;
+    }
+  }
+}
+
+/* --- 活跃会话区域定制 --- */
+.session-content {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.custom-checkbox {
+  width: 18px;
+  height: 18px;
+  border: 1px solid $border-color;
+  border-radius: 4px;
+  background-color: #222;
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/Jyh/Dashboard/usage.vue b/src/views/Jyh/Dashboard/usage.vue
new file mode 100644
index 0000000..4c5fc47
--- /dev/null
+++ b/src/views/Jyh/Dashboard/usage.vue
@@ -0,0 +1,281 @@
+<template>
+  <d-content class="content-area">
+    <div class="usage-container">
+
+      <div class="control-bar">
+
+        <d-range-date-picker-pro
+          v-model="rangeDatePickerProValue"
+          :maxDate="today"
+          :format="dateFormat"
+          :placeholder="['开始日期', '结束日期']"
+          class="dark-picker"
+        />
+
+        <div class="filter-tabs-container">
+
+          <d-tabs type="slider" v-model="activeDaysStr" class="custom-tabs-group time-tabs">
+            <d-tab id="1天" title="1天"></d-tab>
+            <d-tab id="7天" title="7天"></d-tab>
+            <d-tab id="30天" title="30天"></d-tab>
+          </d-tabs>
+
+        </div>
+
+        <d-button class="export-btn" variant="text">
+          <i class="d-icon icon-download"></i> 导出 CSV 文件
+        </d-button>
+      </div>
+
+      <div class="data-content">
+        <div class="no-events-found">
+          <p class="main-text">No Events Found</p>
+          <p class="sub-text">No usage events found for the selected filters</p>
+        </div>
+      </div>
+    </div>
+  </d-content>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+// 辅助函数：根据天数设置日期范围
+const today = new Date();
+today.setHours(23, 59, 59, 999); // 确保 maxDate 覆盖今天全天
+
+const getRangeByDays = (days: number): Date[] => {
+  const endDate = new Date(today); // 确保结束日期是今天
+  const startDate = new Date(today);
+  // 注意：如果是 1天，实际是今天这 24小时，所以减 1 天
+  startDate.setDate(today.getDate() - (days - 1));
+  startDate.setHours(0, 0, 0, 0); // 开始日期从当天 0点开始
+  return [startDate, endDate];
+};
+
+const dateFormat = 'MM月DD日';
+
+// 默认值：30天
+const rangeDatePickerProValue = ref<Date[]>(getRangeByDays(30));
+
+const activeTag = ref('Bug Bot');
+const activeDaysStr = ref('30天'); // 默认选中 30天
+
+watch(activeDaysStr, (newVal) => {
+  let days: number;
+
+  // 从字符串 'X天' 中提取天数
+  switch (newVal) {
+    case '1天':
+      days = 1;
+      break;
+    case '7天':
+      days = 7;
+      break;
+    case '30天':
+      days = 30;
+      break;
+    default:
+      return;
+  }
+
+  // 更新日期范围
+  rangeDatePickerProValue.value = getRangeByDays(days);
+});
+
+</script>
+
+<style lang="scss" scoped>
+/* 定义核心暗色变量 */
+$bg-secondary: #141414;
+$bg-card: #1e1e1e;
+$text-primary: #eaeaea;
+$text-secondary: #aaaaaa;
+$border-color: #333333;
+$active-tag-bg: #444444;
+
+
+.content-area {
+  background-color: #121212;
+  padding: 40px 60px;
+  overflow-y: auto;
+}
+
+
+.usage-page {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  background-color: $bg-secondary;
+  min-height: 100vh;
+  padding: 40px;
+}
+
+.usage-container {
+  //max-width: 1000px;
+  margin: 0 auto;
+}
+
+/* --- 顶部控制栏样式 --- */
+.control-bar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid $border-color;
+}
+
+/* 日期范围选择器样式重写 (d-range-date-picker-pro) */
+:deep(.d-range-date-picker-pro) {
+  width: 180px;
+
+  .devui-input-wrap, .devui-input-affix-wrapper {
+    background-color: $bg-card !important;
+    border: 1px solid $border-color !important;
+    border-radius: 6px !important;
+    height: 36px !important;
+    padding: 0 8px !important;
+
+    .devui-input {
+      color: $text-primary !important;
+      font-weight: 500 !important;
+      cursor: pointer !important;
+      padding: 0 4px !important;
+    }
+  }
+
+  .d-icon-calendar {
+    display: none !important;
+  }
+
+  .devui-separator {
+    color: $text-primary !important;
+    margin: 0 4px !important;
+  }
+}
+
+/* --- 筛选标签区域样式 (d-tabs) --- */
+.filter-tabs-container {
+  display: flex;
+  gap: 8px; /* 保持两个 Tab 组之间的间隔 */
+  flex-grow: 1; /* 占据中间空间 */
+}
+
+// 统一对 Tab 组进行样式覆盖，以实现标签的外观
+:deep(.custom-tabs-group) {
+  height: 36px; /* 保持与日期选择器高度一致 */
+
+  // 隐藏 Tab 的底部边框
+  .devui-nav-container {
+    border-bottom: none !important;
+    margin-bottom: 0 !important;
+  }
+
+  // 针对每个 Tab Item 进行样式覆盖
+  .devui-nav-item {
+    margin-right: 8px; /* 调整 Tab Item 之间的间距 */
+  }
+
+  // Tab 内容：实现卡片/标签样式
+  .devui-nav-item__link {
+    color: $text-primary !important;
+    background-color: $bg-card !important;
+    border: 1px solid $border-color !important;
+    border-radius: 6px !important;
+    padding: 6px 12px !important;
+    height: 36px;
+    line-height: 24px;
+    transition: none;
+
+    // 隐藏 slider 类型自带的底部滑块
+    &::after {
+      display: none !important;
+    }
+
+    // 鼠标悬停效果
+    &:hover {
+      border-color: #555555 !important;
+    }
+  }
+
+  // 选中 Tab 的样式
+  .devui-nav-item.active .devui-nav-item__link {
+    background-color: $active-tag-bg !important;
+    border-color: $active-tag-bg !important;
+    color: $text-primary !important;
+  }
+}
+
+
+/* 导出按钮样式 */
+.export-btn {
+  color: $text-secondary !important;
+  font-size: 14px;
+  padding: 0 8px !important;
+
+  &:hover {
+    color: $text-primary !important;
+  }
+
+  .d-icon-upload {
+    font-size: 16px;
+    margin-right: 4px;
+  }
+}
+
+
+/* --- 数据内容区样式 --- */
+.data-content {
+  background-color: $bg-card;
+  border-radius: 8px;
+  border: 1px solid $border-color;
+  margin-top: 20px;
+  height: 500px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.no-events-found {
+  text-align: center;
+  color: #666666;
+
+  .main-text {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 8px;
+  }
+
+  .sub-text {
+    font-size: 14px;
+  }
+}
+
+
+:deep(.devui-range-date-picker-pro__range-picker) {
+  background-color: black;
+
+  .devui-input__wrapper {
+    background-color: black;
+    color: white;
+    .devui-input__inner {
+      color: white;
+    }
+  }
+}
+
+:deep(.devui-tabs__nav) {
+  background-color: black;
+  border-color: black;
+}
+:deep(.devui-tabs__nav--slider) {
+  li:first-child {
+    border-left-width: 0;
+  }
+  span {
+    color: white;
+  }
+}
+:deep(.devui-tab__content) {
+  margin-top: 0;
+  padding: 0;
+}
+</style>