frontend/src/components/ChatNav/ChatNav.vue

<script setup lang="ts">

import { h, ref, onMounted, inject, defineComponent, render } from 'vue';

import { NDropdown, type DropdownOption, NModal, NInput, NInputNumber, NButton, NGrid, NGridItem, useMessage, NImage, NForm, NFormItem, NSwitch, NTag, NSelect, NSpin, NP, NA, NConfigProvider, NSpace, NRadio, NRadioGroup, NTooltip, NIcon, lightTheme, darkTheme, useOsTheme, type GlobalTheme } from 'naive-ui';

import conversationCssText from '@/assets/css/conversation.css?raw';

import settingSvgUrl from '@/assets/img/setting.svg?url';

import { usePromptStore } from '@/stores/modules/prompt';

import { storeToRefs } from 'pinia';

import ChatNavItem from './ChatNavItem.vue';

import type { Component } from 'vue';

import { isMobile } from '@/utils/utils';

import CreateImage from '@/components/CreateImage/CreateImage.vue';

import { useChatStore } from '@/stores/modules/chat';

import { useUserStore } from '@/stores/modules/user';



const isShowMore = ref(false);

const isShowSettingModal = ref(false);

const isShowAdvancedSettingModal = ref(false);

const isShowSetAboutModal = ref(false);

const isShowCookieModal = ref(false);

const isShowLoginModal = ref(false);

const isShowIframe = ref(false);

const userToken = ref('');

const userKievRPSSecAuth = ref('');

const userMUID = ref('');

const userRwBf = ref('');

const message = useMessage();

const promptStore = usePromptStore();

const { isShowPromptSotre } = storeToRefs(promptStore);

const isShowClearCacheModal = ref(false);

const isShowCreateImageModal = ref(false);

const chatStore = useChatStore();

const { isShowChatServiceSelectModal } = storeToRefs(chatStore);

const userStore = useUserStore();

const localVersion = __APP_INFO__.version;

const lastVersion = ref('加载中...');

const { historyEnable, themeMode, uiVersion, langRegion, autoReopenMic, fullCookiesEnable, cookiesStr, enterpriseEnable, copilotProEnable, customChatNum, gpt4tEnable, sydneyEnable, sydneyPrompt, passServer } = storeToRefs(userStore);



let cookiesEnable = ref(false);

let cookies = ref('');

let history = ref(true);

let themeModeSetting = ref('auto');

let uiVersionSetting = ref('v3');

let langRegionSetting = ref('CN');

let theme = ref(inject('theme'));

let autoReopenMicSetting = ref(true);



let settingIconStyle = ref({

  filter: 'invert(70%)',

})

let passingCFChallenge = ref(false);

const enterpriseSetting = ref(false);

const copilotProSetting = ref(false);

const customChatNumSetting = ref(0);

const gpt4tSetting = ref(true);

const sydneySetting = ref(false);

const sydneyPromptSetting = ref('');

const passServerSetting = ref('');

const getCookieTip = ref('获取 Cookie 中, 请稍后...');

const bingUrl = base58Decode('7RYHpA38gs3NAby2mkvoRMwjncBpS');



const oneKeyLogin = ref('false');

const loginTypeOptions = ref([

  {

    label: '账号登录',

    value: 'false',

  },

  {

    label: '一键登录',

    value: 'true',

  }

]);

const msLoginAccount = ref('');

const msLoginPassword = ref('');

const msLoginType = ref('passwd');

const msLoginCode = ref('');

const msLogining = ref(false);

const msContinueing = ref(false);

const msLoginTypeOptions = ref([

{

    label: '密码登录',

    value: 'passwd',

  },

  {

    label: '邮箱验证码登录',

    value: 'email',

  },

  {

    label: '2FA登录',

    value: 'device',

  }

])

const msLoginContext = ref({

  cookies: '',

  context: {}

});



const GetLastVersion = async () => {

  const res = await fetch('https://api.github.com/repos/Harry-zklcdc/go-proxy-bingai/releases/latest');

  const json = await res.json();

  lastVersion.value = json.tag_name;

};



const navType = {

  login: 'login',

  setting: 'setting',

  chat: 'chat',

  notebook: 'notebook',

  compose: 'compose',

  createImage: 'createImage',

  reset: 'reset',

  about: 'about',

};

let navConfigs = ref([

  {

    key: navType.setting,

    label: '设置',

  },

  {

    key: navType.notebook,

    label: '笔记本',

  },

  {

    key: navType.compose,

    label: '撰写文章',

    url: '/web/compose.html',

  },

  {

    key: navType.createImage,

    label: '图像创建',

  },

  {

    key: navType.reset,

    label: '一键重置',

  },

  {

    key: navType.about,

    label: '关于'

  },

]);



const themeModeOptions = ref([

  {

    label: '浅色',

    value: 'light',

  }, {

    label: '深色',

    value: 'dark',

  }, {

    label: '跟随系统',

    value: 'auto',

  }

]);



const uiVersionOptions = ref([

  {

    label: 'V1',

    value: 'v1',

  },

  {

    label: 'V2',

    value: 'v2',

  },

  {

    label: 'V3',

    value: 'v3',

  }

]);



const langRegionOptions = ref([

  {

    label: '中文优先',

    value: 'CN',

  },

  {

    label: '英文优先',

    value: 'US',

  }

]);



onMounted(() => {

  if (themeMode.value == 'light') {

    settingIconStyle.value = { filter: 'invert(0%)' }

  } else if (themeMode.value == 'dark') {

    settingIconStyle.value = { filter: 'invert(70%)' }

  } else if (themeMode.value == 'auto') {

    if (useOsTheme().value == 'dark') {

      settingIconStyle.value = { filter: 'invert(70%)' }

    } else {

      settingIconStyle.value = { filter: 'invert(0%)' }

    }

  }

})



const sleep = async (ms: number) => {

  return new Promise(resolve => setTimeout(resolve, ms));

}



const renderDropdownLabel = (option: DropdownOption) => {

  return h(ChatNavItem as Component, { navConfig: option });

};



const handleSelect = async (key: string) => {

  switch (key) {

    case navType.chat:

      {

        CIB.showConversation();

        navConfigs.value[1] = {

          key: navType.notebook,

          label: '笔记本',

        };

        const prjupyIndex = CIB.config.sydney.request.optionsSets.indexOf('prjupy');

        const galileoIndex = CIB.config.sydney.request.optionsSets.indexOf('clgalileo');

        CIB.config.sydney.request.optionsSets = CIB.config.sydney.request.optionsSets.slice(0, prjupyIndex);

        if (galileoIndex > -1) {

          CIB.config.sydney.request.optionsSets[galileoIndex] = 'galileo';

        }

        if (uiVersion.value == 'v3') {

          await sleep(25);

          await ChatHomeScreen.init('/turing/api/suggestions/v2/zeroinputstarter');

        }

        const serpEle = document.querySelector('cib-serp');

        const conversationEle = serpEle?.shadowRoot?.querySelector('cib-conversation') as HTMLElement;

        // todo 反馈暂时无法使用，先移除

        const welcomeEle = conversationEle?.shadowRoot?.querySelector('cib-welcome-container');

        const loginTip = welcomeEle?.shadowRoot?.querySelectorAll("div[class='muid-upsell']");

        if (loginTip?.length) {

          loginTip.forEach((ele) => {

            ele.remove();

          });

        }

        welcomeEle?.shadowRoot?.querySelector('.preview-container')?.remove();

        welcomeEle?.shadowRoot?.querySelector('.footer')?.remove();

        serpEle?.shadowRoot?.querySelector('cib-serp-feedback')?.remove();

        if (isMobile()) {

          welcomeEle?.shadowRoot?.querySelector('.container-item')?.remove();

          CIB.vm.actionBar.input.placeholder = '有问题尽管问我...（"/" 触发提示词）';

        }

        // 加入css

        const conversationStyleEle = document.createElement('style');

        conversationStyleEle.innerText = conversationCssText;

        conversationEle.shadowRoot?.append(conversationStyleEle);

      }

      break;

    case navType.notebook:

      {

        CIB.showNotebook();

        const galileoIndex = CIB.config.sydney.request.optionsSets.indexOf('galileo');

        if (galileoIndex > -1) {

          CIB.config.sydney.request.optionsSets[galileoIndex] = 'clgalileo';

        }

        CIB.config.sydney.request.optionsSets.push('prjupy', 'uprofdeuv1', 'uprofupdv2', 'gndlogcf');

        navConfigs.value[1] = {

          key: navType.chat,

          label: '聊天',

        };

        await sleep(25);

        const serpEle = document.querySelector('cib-serp');

        const notebook = serpEle?.shadowRoot?.querySelector('cib-notebook');

        const disclaimer = notebook?.shadowRoot?.querySelector('cib-ai-disclaimer');

        disclaimer?.shadowRoot?.querySelector('div')?.remove();

        disclaimer?.shadowRoot?.querySelector('div')?.remove();

      }

      break;

    case navType.setting:

      {

        isShowSettingModal.value = true;

      }

      break;

    case navType.createImage:

      {

        if (!userStore.sysConfig?.isSysCK && !userStore.getUserToken()) {

          message.warning('体验画图功能需先登录');

        }

        isShowCreateImageModal.value = true;

      }

      break;

    case navType.reset:

      {

        isShowClearCacheModal.value = true;

      }

      break;

    case navType.about:

      {

        isShowSetAboutModal.value = true;

        GetLastVersion();

        await sleep(25)

        const ele = document.createElement('div');

        render(h(NConfigProvider, { theme: theme.value as GlobalTheme }, [

          h(NForm, { 'label-placement': 'left', 'label-width': '82px', size: 'small', style: 'margin-top: 0px' }, authorEleRender())

        ]), ele);

        for (let i = 0; i < ele.childNodes.length; i++) {

          document.getElementById('latestVersion')?.parentNode?.appendChild(ele.childNodes[i]);

        }

      }

      break;

    default:

      break;

  }

};



const settingMenu = (key: string) => {

  switch(key) {

    case 'autoPassCFChallenge':

      {

      autoPassCFChallenge()

      }

      break;

    case 'login':

      {

        isShowLoginModal.value = true;

        isShowIframe.value = false;

      }

      break;

    case 'chatService':

      {

        isShowChatServiceSelectModal.value = true;

        chatStore.checkAllSydneyConfig();

      }

      break;

    case 'cookieSetting':

      {

        userToken.value = userStore.getUserToken();

        userKievRPSSecAuth.value = userStore.getUserKievRPSSecAuth();

        userMUID.value = userStore.getUserMUID();

        userRwBf.value = userStore.getUserRwBf();

        history.value = historyEnable.value;

        cookiesEnable.value = fullCookiesEnable.value;

        cookies.value = cookiesStr.value;

        isShowCookieModal.value = true;

      }

      break;

    case 'promptStore':

      {

        isShowPromptSotre.value = true;

      }

      break;

    case 'advancedSetting':

      {

        history.value = historyEnable.value;

        themeModeSetting.value = themeMode.value;

        uiVersionSetting.value = uiVersion.value;

        langRegionSetting.value = langRegion.value;

        copilotProSetting.value = copilotProEnable.value;

        enterpriseSetting.value = enterpriseEnable.value;

        customChatNumSetting.value = customChatNum.value;

        gpt4tSetting.value = gpt4tEnable.value;

        autoReopenMicSetting.value = autoReopenMic.value;

        sydneySetting.value = sydneyEnable.value;

        sydneyPromptSetting.value = sydneyPrompt.value;

        passServerSetting.value = passServer.value;

        isShowAdvancedSettingModal.value = true;

      }

      break;

    default:

      return;

  }

}



const resetCache = async () => {

  isShowClearCacheModal.value = false;

  await userStore.resetCache();

  message.success('清理完成');

  window.location.href = '/';

};



const saveSetting = () => {

  if (cookiesEnable.value) {

    userStore.saveCookies(cookies.value);

    cookiesStr.value = cookies.value;

  } else {

    if (!userToken.value) {

      message.warning('请先填入用户 _U Cookie');

    } else {

      userStore.saveUserToken(userToken.value);

    }

    if (!userKievRPSSecAuth.value) {

      message.warning('请先填入用户 KievRPSSecAuth Cookie');

    } else {

      userStore.saveUserKievRPSSecAuth(userKievRPSSecAuth.value);

    }

    if (!userRwBf.value) {

      message.warning('请先填入用户 _RwBf Cookie');

    } else {

      userStore.saveUserRwBf(userRwBf.value);

    }

    if (!userMUID.value) {

      message.warning('请先填入用户 MUID Cookie');

    } else {

      userStore.saveUserMUID(userMUID.value);

    }

  }

  fullCookiesEnable.value = cookiesEnable.value;

  isShowCookieModal.value = false;

};



const saveAdvancedSetting = () => {

  historyEnable.value = history.value;

  const tmpEnterpris = enterpriseEnable.value;

  enterpriseEnable.value = enterpriseSetting.value;

  customChatNum.value = customChatNumSetting.value;

  const tmpGpt4t = gpt4tEnable.value, tmpSydney = sydneyEnable.value, tmpuiVersion = uiVersion.value, tmpCopilotPro = copilotProEnable.value;

  copilotProEnable.value = copilotProSetting.value;

  gpt4tEnable.value = gpt4tSetting.value;

  autoReopenMic.value = autoReopenMicSetting.value;

  sydneyEnable.value = sydneySetting.value;

  sydneyPrompt.value = sydneyPromptSetting.value;

  uiVersion.value = uiVersionSetting.value;

  if (passServerSetting.value && passServerSetting.value.startsWith('http')) {

    userStore.setPassServer(passServerSetting.value)

  }

  if (langRegion.value != langRegionSetting.value) {

    langRegion.value = langRegionSetting.value;

    _G.Region = langRegionSetting.value;

  }



  const serpEle = document.querySelector('cib-serp');

  const sidepanel = serpEle?.shadowRoot?.querySelector('cib-conversation')?.querySelector('cib-side-panel')?.shadowRoot?.querySelector('.main')

  const threadsHeader = sidepanel?.querySelector('.threads-header') as HTMLElement;

  const threadsContainer = sidepanel?.querySelector('.threads-container') as HTMLElement;

  if (!isMobile()) {

    if (history.value && userStore.getUserToken() && !enterpriseEnable.value) {

      if (tmpuiVersion === 'v1') {

        CIB.vm.sidePanel.panels = [

          { type: 'threads', label: '最近的活动' },

          { type: 'plugins', label: '插件' }

        ]

      } else {

        threadsHeader.style.display = 'flex'

        threadsContainer.style.display = 'block'

      }

    } else {

      if (tmpuiVersion === 'v2') {

        threadsHeader.style.display = 'none'

        threadsContainer.style.display = 'none'

      } else {

        CIB.vm.sidePanel.panels = [

          { type: 'plugins', label: '插件' }

        ]

        CIB.vm.sidePanel.selectedPanel = 'plugins'

      }

    }

  }



  themeMode.value = themeModeSetting.value;

  if (themeModeSetting.value == 'light') {

    CIB.changeColorScheme(0);

    theme.value = lightTheme;

    settingIconStyle.value = { filter: 'invert(0%)' }

  } else if (themeModeSetting.value == 'dark') {

    CIB.changeColorScheme(1);

    theme.value = darkTheme;

    settingIconStyle.value = { filter: 'invert(70%)' }

  } else if (themeModeSetting.value == 'auto') {

    if (useOsTheme().value == 'dark') {

      CIB.changeColorScheme(1);

      theme.value = darkTheme;

      settingIconStyle.value = { filter: 'invert(70%)' }

    } else {

      CIB.changeColorScheme(0);

      theme.value = lightTheme;

      settingIconStyle.value = { filter: 'invert(0%)' }

    }

  }

  isShowAdvancedSettingModal.value = false;

  if (tmpEnterpris != enterpriseSetting.value || tmpSydney != sydneySetting.value || tmpGpt4t != gpt4tSetting.value || tmpuiVersion != uiVersionSetting.value || tmpCopilotPro != copilotProSetting.value) {

    window.location.href = '/';

  }

}



const newWindow = () => {

  window.open("/fd/auth/signin?action=interactive&provider=windows_live_id&return_url=https%3a%2f%2fwww.bing.com%2fchat%3fq%3dBing%2bAI%26FORM%3dhpcodx%26wlsso%3d1%26wlexpsignin%3d1&src=EXPLICIT&sig=001DD71D5A386F753B1FC3055B306E8F", "_blank");

}



const loginHandel = async ()=> {

  isShowIframe.value = true;

  getCookieTip.value = '获取 Cookie 中, 请稍后...';

  window.addEventListener('message', function (e) {

    const d = e.data

    if (d.cookies != "" && d.cookies != null && d.cookies != undefined) {

      userStore.saveCookies(d.cookies);

      cookiesStr.value = d.cookies;

      message.success('登录成功');

      isShowLoginModal.value = false;

      window.location.href = '/';

    }

  })

  await sleep(1500);

  getCookieTimeoutHandel();

  const iframe = document.getElementById('login');

  const S = base58Decode(_G.S);

  let tmpA = [];

  for (let i = 0; i < _G.SP.length; i++) {

    tmpA.push(S[_G.SP[i]]);

  }

  const e = base58Decode(tmpA.join(''));

  (iframe as any).contentWindow.postMessage({

    IG: _G.IG,

    T: await aesEncrypt(e, _G.IG),

  }, '*');

}



const msLoginHandel = async () => {

  msLogining.value = true;

  switch (msLoginType.value) {

    case 'passwd':

      {

        if (!msLoginAccount.value) {

          message.warning('请先填入账号');

          msLogining.value = false;

          break;

        } else if (!msLoginPassword.value) {

          message.warning('请先填入密码');

          msLogining.value = false;

          break;

        }

        const res = await fetch('/api/ms/login', {

          method: 'POST',

          headers: {

            'Content-Type': 'application/json',

          },

          body: JSON.stringify({

            account: msLoginAccount.value,

            password: msLoginPassword.value,

            type: msLoginType.value,

          })

        })

        if (!res.ok) {

          message.error('登录失败, 请重试');

          msLogining.value = false;

          break;

        }

        message.success('登录成功');

        isShowLoginModal.value = false;

        const resData = await res.json();

        userStore.saveCookies(resData.data.cookies);

        cookiesStr.value = resData.data.cookies;

        fullCookiesEnable.value = true;

        window.location.href = '/';

      }

      break;

    case 'email':

      {

        if (!msLoginAccount.value) {

          message.warning('请先填入账号');

          msLogining.value = false;

          break;

        }

        const res = await fetch('/api/ms/login', {

          method: 'PUT',

          headers: {

            'Content-Type': 'application/json',

          },

          body: JSON.stringify({

            account: msLoginAccount.value,

            type: msLoginType.value,

            verify_code: msLoginCode.value,

            cookies: msLoginContext.value.cookies,

            context: msLoginContext.value.context,

          }),

        })

        if (!res.ok) {

          message.error('登录失败, 请重试');

          msLogining.value = false;

          break;

        }

        message.success('登录成功');

        isShowLoginModal.value = false;

        const resData = await res.json();

        userStore.saveCookies(resData.data.cookies);

        cookiesStr.value = resData.data.cookies;

        fullCookiesEnable.value = true;

        window.location.href = '/';

      }

      break;

    case 'device':

      {

        if (!msLoginAccount.value) {

          message.warning('请先填入账号');

          msLogining.value = true;

          break;

        }

        const res = await fetch('/api/ms/login', {

          method: 'POST',

          headers: {

            'Content-Type': 'application/json',

          },

          body: JSON.stringify({

            account: msLoginAccount.value,

            type: msLoginType.value,

          })

        })

        const resData = await res.json();

        if (res.status != 201) {

          message.error('获取2FA失败, 请重试');

          msLogining.value = false;

          break;

        }

        message.success('获取2FA成功, 请在手机上查看并输入验证码');

        msLoginCode.value = resData.data.code;

        msLoginContext.value.cookies = resData.data.cookies;

        msLoginContext.value.context = resData.data.context;

        await msLoginContinueHandel();

      }

      break;

    default:

      msLogining.value = false;

      break;

  }

}



const msLoginContinueHandel = async () => {

  msContinueing.value = true;

  switch (msLoginType.value) {

    case 'email':

      {

        if (!msLoginAccount.value) {

          message.warning('请先填入账号');

          msLogining.value = true;

          break;

        }

        const res = await fetch('/api/ms/login', {

          method: 'POST',

          headers: {

            'Content-Type': 'application/json',

          },

          body: JSON.stringify({

            account: msLoginAccount.value,

            type: msLoginType.value,

          })

        })

        if (res.status != 201) {

          message.error('获取邮箱验证码失败, 请重试');

          msContinueing.value = false;

          break;

        }

        message.success('获取邮箱验证码成功, 请检查邮箱');

        msContinueing.value = false;

        const resData = await res.json();

        msLoginContext.value.cookies = resData.data.cookies;

        msLoginContext.value.context = resData.data.context;

      }

      break;

    case 'device':

      {

        if (!msLoginAccount.value) {

          message.warning('请先填入账号');

          msLogining.value = true;

          break;

        }

        const res = await fetch('/api/ms/login', {

          method: 'PUT',

          headers: {

            'Content-Type': 'application/json',

          },

          body: JSON.stringify({

            account: msLoginAccount.value,

            type: msLoginType.value,

            cookies: msLoginContext.value.cookies,

            context: msLoginContext.value.context,

          }),

        })

        if (!res.ok) {

          message.error('获取2FA失败, 请重试');

          msLogining.value = false;

          break;

        }

        message.success('登录成功');

        isShowLoginModal.value = false;

        const resData = await res.json();

        userStore.saveCookies(resData.data.cookies);

        cookiesStr.value = resData.data.cookies;

        fullCookiesEnable.value = true;

        window.location.href = '/';

      }

      break;

    default:

      msContinueing.value = false;

      break;

  }

}



const authorEleRender = () => {

  const data = JSON.parse(decodeURI(base58Decode(_G.TP)));

  let r = []

  for (let i = 0; i < data.length; i++) {

    r.push(renderHandler(data[i]))

  }

  return r;

}



const renderHandler = (ele: any) => {

  return h(eval(ele.type), ele.props, ele.children.map((child: any) => {

    if (child.type) {

      return renderHandler(child);

    } else {

      return child;

    }

  }));

}



const getCookieTimeoutHandel = async() => {

  await sleep(3000)

  getCookieTip.value = '获取 Cookie 时间过长, 请检查油猴插件及脚本是否安装正确';

}



const autoPassCFChallenge = async () => {

  let resq = await fetch('/pass', {

    credentials: 'include',

    method: 'POST', // *GET, POST, PUT, DELETE, etc.

    mode: 'cors', // no-cors, *cors, same-origin

    headers: {

      'Content-Type': 'application/json',

    },

    body: JSON.stringify({

      'IG': _G.IG,

      'T': await aesEncrypt(_G.AT, _G.IG),

    }),

  }).then((res) => res.json())

  .catch(() => {

    message.error('人机验证失败, 请重试');

    passingCFChallenge.value = false;

  })

  if (resq['result'] != null && resq['result'] != undefined) {

    userStore.saveCookies(resq['result']['cookies']);

    cookiesStr.value = resq['result']['cookies'];

    message.success('自动通过人机验证成功');

    passingCFChallenge.value = false;

    window.location.href = '/';

  } else {

    message.error('人机验证失败, 请重试');

    passingCFChallenge.value = false;

  }

}

</script>



<template>

  <NDropdown v-if="isMobile()" class="select-none" :show="isShowMore" :options="navConfigs" :render-label="renderDropdownLabel" @select="handleSelect">

    <NImage class="fixed top-6 right-4 cursor-pointer z-50" :src="settingSvgUrl" alt="设置菜单" :preview-disabled="true" @click="isShowMore = !isShowMore" :style="settingIconStyle"></NImage>

  </NDropdown>

  <NDropdown v-else class="select-none" trigger="hover" :options="navConfigs" :render-label="renderDropdownLabel" @select="handleSelect">

    <NImage class="fixed top-6 right-6 cursor-pointer z-50" :src="settingSvgUrl" alt="设置菜单" :preview-disabled="true" :style="settingIconStyle"></NImage>

  </NDropdown>

  <NModal v-model:show="isShowLoginModal" preset="dialog" :show-icon="false">

    <template #header>

      <div class="text-3xl py-2">账号登录</div>

    </template>

    <NSelect v-model:value="oneKeyLogin" :options="loginTypeOptions" size="large" placeholder="选择登录方式" />

    <div v-if="oneKeyLogin == 'true'">

      <div v-if="!isShowIframe" style="margin-top:12px; margin-bottom:24px">

        <NP>

          使用此功能前, 请先安装<NA href="https://www.tampermonkey.net/">油猴插件</NA>, 并安装<NA href="https://greasyfork.org/zh-CN/scripts/487409-go-proxy-bingai">此脚本</NA>

          <br>

          请点击下面「打开登录页面」按钮, 在新打开登录页面中登录账号, 登录成功后点击确定

        </NP>

      </div>

      <div v-else>

        <NSpin size="large" :description="getCookieTip" style="margin: 0 auto; width: 100%" />

        <iframe id="login" :src="bingUrl" style="border: none; width: 0; height: 0" />

      </div>

    </div>

    <div v-else>

      <NForm ref="formRef" label-placement="left" label-width="auto" require-mark-placement="right-hanging" style="margin-top: 16px;">

        <NFormItem path="cookiesEnable" label="登录方式">

          <NRadioGroup v-model:value="msLoginType">

            <NSpace vertical>

              <NRadio v-for="item in msLoginTypeOptions" size="large" :key="item.value" :value="item.value">{{ item.label }}</NRadio>

            </NSpace>

          </NRadioGroup>

        </NFormItem>

        <NFormItem path="account" label="账号">

          <NInput size="large" v-model:value="msLoginAccount" type="text" placeholder="账号" />

        </NFormItem>

        <NFormItem v-show="msLoginType === 'passwd'" path="password" label=" 密码">

          <NInput size="large" v-model:value="msLoginPassword" type="password" show-password-on="click" placeholder="密码" />

        </NFormItem>

        <NFormItem v-show="msLoginType !== 'passwd'" path="verify_code" label="验证码">

          <NInput size="large" v-model:value="msLoginCode" type="text" placeholder="验证码" :disabled="msLoginType === 'device'" />

        </NFormItem>

      </NForm>

    </div>

    <template #action>

      <NButton v-show="oneKeyLogin == 'true'" size="large" type="info" @click="newWindow">打开登录页面</NButton>

      <NButton v-show="oneKeyLogin == 'true'" size="large" @click="isShowLoginModal = false">取消</NButton>

      <NButton v-show="oneKeyLogin == 'true'" ghost size="large" type="info" @click="loginHandel">确定</NButton>

      <NButton v-show="oneKeyLogin != 'true' && msLoginType === 'email'" size="large" type="info" :loading="msContinueing" @click="msLoginContinueHandel">获取邮箱验证码</NButton>

      <NButton v-show="oneKeyLogin != 'true'" ghost size="large" type="info" :loading="msLogining" @click="msLoginHandel">确定</NButton>

    </template>

  </NModal>

  <NModal v-model:show="isShowSettingModal" preset="dialog" :show-icon="false">

    <template #header>

      <div class="text-3xl py-2">设置</div>

    </template>

    <NForm ref="formRef" label-placement="left" label-width="auto" require-mark-placement="right-hanging" style="margin-top: 16px;">

      <NGrid x-gap="0" :cols="2">

        <NGridItem>

          <NFormItem path="cookiesEnable" label="自动人机验证">

            <NTooltip>

              <template #trigger>

                <NButton type="info" :loading="passingCFChallenge" @click="settingMenu('autoPassCFChallenge')">启动</NButton>

              </template>

              旧版本的人机验证, 现已完全自动代理通过

            </NTooltip>

          </NFormItem>

        </NGridItem>

        <NGridItem>

          <NFormItem path="cookiesEnable" label="账号登录">

            <NButton type="info" @click="settingMenu('login')">打开</NButton>

          </NFormItem>

        </NGridItem>

        <NGridItem>

          <NFormItem path="cookiesEnable" label="服务选择">

            <NButton type="info" @click="settingMenu('chatService')">打开</NButton>

          </NFormItem>

        </NGridItem>

        <NGridItem>

          <NFormItem path="cookiesEnable" label="Cookie 设置">

            <NButton type="info" @click="settingMenu('cookieSetting')">打开</NButton>

          </NFormItem>

        </NGridItem>

        <NGridItem>

          <NFormItem path="cookiesEnable" label="提示词库">

            <NButton type="info" @click="settingMenu('promptStore')">打开</NButton>

          </NFormItem>

        </NGridItem>

        <NGridItem>

          <NFormItem path="cookiesEnable" label="高级设置">

            <NButton type="info" @click="settingMenu('advancedSetting')">打开</NButton>

          </NFormItem>

        </NGridItem>

      </NGrid>

    </NForm>

    <template #action>

      <NButton ghost size="large" type="info" @click="isShowSettingModal = false">确定</NButton>

    </template>

  </NModal>

  <NModal v-model:show="isShowCookieModal" preset="dialog" :show-icon="false">

    <template #header>

      <div class="text-3xl py-2">Cookie 设置</div>

    </template>

    <NForm ref="formRef" label-placement="left" label-width="auto" require-mark-placement="right-hanging" style="margin-top: 16px;">

      <NFormItem path="cookiesEnable" label="完整 Cookie">

        <NSwitch v-model:value="cookiesEnable" />

      </NFormItem>

      <NFormItem v-show="!cookiesEnable" path="token" label="Token">

        <NInput size="large" v-model:value="userToken" type="text" placeholder="用户 Cookie ,仅需要 _U 的值" />

      </NFormItem>

      <NFormItem v-show="!cookiesEnable" path="token" label="KievRPSSecAuth">

        <NInput size="large" v-model:value="userKievRPSSecAuth" type="text" placeholder="用户 Cookie ,仅需要 KievRPSSecAuth 的值" />

      </NFormItem>

      <NFormItem v-show="!cookiesEnable" path="token" label="_RwBf">

        <NInput size="large" v-model:value="userRwBf" type="text" placeholder="用户 Cookie ,仅需要 _RwBf 的值" />

      </NFormItem>

      <NFormItem v-show="!cookiesEnable" path="token" label="MUID">

        <NInput size="large" v-model:value="userMUID" type="text" placeholder="用户 Cookie ,仅需要 MUID 的值" />

      </NFormItem>

      <NFormItem v-show="cookiesEnable" path="token" label="Cookies">

        <NInput size="large" v-model:value="cookies" type="text" placeholder="完整用户 Cookie" />

      </NFormItem>

    </NForm>

    <template #action>

      <NButton size="large" @click="isShowCookieModal = false">取消</NButton>

      <NButton ghost size="large" type="info" @click="saveSetting">保存</NButton>

    </template>

  </NModal>

  <NModal v-model:show="isShowAdvancedSettingModal" preset="dialog" :show-icon="false">

    <template #header>

      <div class="text-3xl py-2">高级设置</div>

    </template>

    <NForm ref="formRef" label-placement="left" label-width="auto" require-mark-placement="right-hanging"

      style="margin-top: 16px;">

      <NGrid x-gap="0" :cols="2">

        <NGridItem>

          <NFormItem path="history" label="历史记录">

            <NSwitch v-model:value="history" />

          </NFormItem>

        </NGridItem>

        <NGridItem>

          <NFormItem path="enterpriseEnable" label="企业版">

            <NSwitch v-model:value="enterpriseSetting" />

          </NFormItem>

        </NGridItem>

        <NGridItem>

          <NFormItem path="copilotProEnable">

            <template #label>

              Copilot Pro

              <NTooltip trigger="hover">

                <template #trigger>

                  <NIcon size="14" style="top: 2px;">

                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><path d="M256 56C145.72 56 56 145.72 56 256s89.72 200 200 200s200-89.72 200-200S366.28 56 256 56zm0 82a26 26 0 1 1-26 26a26 26 0 0 1 26-26zm64 226H200v-32h44v-88h-32v-32h64v120h44z" fill="currentColor"></path></svg>

                  </NIcon>

                </template>

                如果有 Copilot Pro 的账号, 可开启此选项

              </NTooltip>

            </template>

            <NSwitch v-model:value="copilotProSetting" />

          </NFormItem>

        </NGridItem>

        <NGridItem>

          <NFormItem path="sydneyEnable" label="连续语音对话">

            <NSwitch v-model:value="autoReopenMicSetting" />

          </NFormItem>

        </NGridItem>

        <NGridItem>

          <NFormItem path="gpt4tEnable">

            <template #label>

              Copilot 增强

              <NTooltip trigger="hover" :style="{ maxWidth: '240px' }">

                <template #trigger>

                  <NIcon size="14" style="top: 2px;">

                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><path d="M256 56C145.72 56 56 145.72 56 256s89.72 200 200 200s200-89.72 200-200S366.28 56 256 56zm0 82a26 26 0 1 1-26 26a26 26 0 0 1 26-26zm64 226H200v-32h44v-88h-32v-32h64v120h44z" fill="currentColor"></path></svg>

                  </NIcon>

                </template>

                增强 Microsoft Copilot 的能力, 有可能会导致一些问题

              </NTooltip>

            </template>

            <NSwitch v-model:value="gpt4tSetting" />

          </NFormItem>

        </NGridItem>

        <NGridItem>

          <NFormItem path="sydneyEnable" label="越狱模式">

            <NSwitch v-model:value="sydneySetting" />

          </NFormItem>

        </NGridItem>

      </NGrid>

      <NFormItem path="langRegion" label="语言理解能力">

        <NSelect v-model:value="langRegionSetting" :options="langRegionOptions" size="large" placeholder="语言理解能力" />

      </NFormItem>

      <NFormItem path="sydneyPrompt" label="人机验证服务器">

        <NInput size="large" v-model:value="passServerSetting" type="text" placeholder="人机验证服务器" />

      </NFormItem>

      <NFormItem path="sydneyPrompt" label="提示词">

        <NInput size="large" v-model:value="sydneyPromptSetting" type="text" placeholder="越狱模式提示词" />

      </NFormItem>

      <NFormItem path="themeMode" label="UI 版本">

        <NSelect v-model:value="uiVersionSetting" :options="uiVersionOptions" size="large" placeholder="请选择 UI 版本" />

      </NFormItem>

      <NFormItem path="themeMode" label="主题模式">

        <NSelect v-model:value="themeModeSetting" :options="themeModeOptions" size="large" placeholder="请选择主题模式" />

      </NFormItem>

      <NFormItem v-show="!cookiesEnable" path="customChatNum" label="聊天次数">

        <NInputNumber size="large" v-model:value="customChatNumSetting" min="0" style="width: 100%;"/>

      </NFormItem>

    </NForm>

    <template #action>

      <NButton size="large" @click="isShowAdvancedSettingModal = false">取消</NButton>

      <NButton ghost size="large" type="info" @click="saveAdvancedSetting">保存</NButton>

    </template>

  </NModal>

  <NModal v-model:show="isShowClearCacheModal" preset="dialog" :show-icon="false">

    <template #header>

      <div class="text-xl py-2">将删除包括 Cookie 等的所有缓存？</div>

    </template>

    <template #action>

      <NButton size="large" @click="isShowClearCacheModal = false">取消</NButton>

      <NButton ghost size="large" type="error" @click="resetCache">确定</NButton>

    </template>

  </NModal>

  <NModal v-model:show="isShowSetAboutModal" preset="dialog" :show-icon="false">

    <template #header>

      <div class="text-3xl py-2">关于</div>

    </template>

    <NForm ref="formRef" label-placement="left" label-width="82px" size="small" style="margin-top: 16px;">

      <NFormItem path="version" label="版本号">

        <NTag type="info" size="small" round>{{ 'v' + localVersion }}</NTag>

      </NFormItem>

      <NFormItem path="latestVersion" label="最新版本" id="latestVersion" ref="latestVersion">

        <NTag type="info" size="small" round>{{ lastVersion }}</NTag>

      </NFormItem>

    </NForm>

    <template #action>

      <NButton ghost size="large" @click="isShowSetAboutModal = false" type="info">确定</NButton>

    </template>

  </NModal>

  <CreateImage v-model:show="isShowCreateImageModal" />

</template>