feat: 前端搭建

2025-06-17 22:37:37 +08:00
parent 4830be6388
commit 0cd795f57a
1228 changed files with 23627 additions and 1 deletions
--- a/Yi.Ai.Vue3/src/layouts/components/Header/components/Avatar.vue
+++ b/Yi.Ai.Vue3/src/layouts/components/Header/components/Avatar.vue
@@ -0,0 +1,140 @@
+<!-- 头像 -->
+<script setup lang="ts">
+import Popover from '@/components/Popover/index.vue';
+import SvgIcon from '@/components/SvgIcon/index.vue';
+import { useUserStore } from '@/stores';
+import { useSessionStore } from '@/stores/modules/session';
+
+const userStore = useUserStore();
+const sessionStore = useSessionStore();
+const src = computed(
+  () => userStore.userInfo?.avatar ?? 'https://avatars.githubusercontent.com/u/76239030',
+);
+
+/* 弹出面板 开始 */
+const popoverStyle = ref({
+  width: '200px',
+  padding: '4px',
+  height: 'fit-content',
+});
+const popoverRef = ref();
+
+// 弹出面板内容
+const popoverList = ref([
+  {
+    key: '1',
+    title: '收藏夹',
+    icon: 'book-mark-fill',
+  },
+  {
+    key: '2',
+    title: '设置',
+    icon: 'settings-4-fill',
+  },
+  {
+    key: '3',
+    divider: true,
+  },
+  {
+    key: '4',
+    title: '退出登录',
+    icon: 'logout-box-r-line',
+  },
+]);
+
+// 点击
+function handleClick(item: any) {
+  switch (item.key) {
+    case '1':
+      ElMessage.warning('暂未开放');
+      console.log('点击了收藏夹');
+      break;
+    case '2':
+      ElMessage.warning('暂未开放');
+      console.log('点击了设置');
+      break;
+    case '4':
+      popoverRef.value?.hide?.();
+      ElMessageBox.confirm('退出登录不会丢失任何数据，你仍可以登录此账号。', '确认退出登录？', {
+        confirmButtonText: '确认退出',
+        cancelButtonText: '取消',
+        type: 'warning',
+        confirmButtonClass: 'el-button--danger',
+        cancelButtonClass: 'el-button--info',
+        roundButton: true,
+        autofocus: false,
+      })
+        .then(async () => {
+          // 在这里执行退出方法
+          await userStore.logout();
+          // 清空回话列表并回到默认页
+          await sessionStore.requestSessionList(1, true);
+          await sessionStore.createSessionBtn();
+          ElMessage({
+            type: 'success',
+            message: '退出成功',
+          });
+        })
+        .catch(() => {
+          // ElMessage({
+          //   type: 'info',
+          //   message: '取消',
+          // });
+        });
+      break;
+    default:
+      break;
+  }
+}
+
+/* 弹出面板 结束 */
+</script>
+
+<template>
+  <div class="avatar-container">
+    <Popover
+      ref="popoverRef"
+      placement="bottom-end"
+      trigger="clickTarget"
+      :trigger-style="{ cursor: 'pointer' }"
+      popover-class="popover-content"
+      :popover-style="popoverStyle"
+    >
+      <!-- 触发元素插槽 -->
+      <template #trigger>
+        <el-avatar :src="src" :size="28" fit="fit" shape="circle" />
+      </template>
+
+      <div class="popover-content-box shadow-lg">
+        <div v-for="item in popoverList" :key="item.key" class="popover-content-box-items h-full">
+          <div
+            v-if="!item.divider"
+            class="popover-content-box-item flex items-center h-full gap-8px p-8px pl-10px pr-12px rounded-lg hover:cursor-pointer hover:bg-[rgba(0,0,0,.04)]"
+            @click="handleClick(item)"
+          >
+            <SvgIcon :name="item.icon!" size="16" class-name="flex-none" />
+            <div class="popover-content-box-item-text font-size-14px text-overflow max-h-120px">
+              {{ item.title }}
+            </div>
+          </div>
+
+          <div v-if="item.divider" class="divder h-1px bg-gray-200 my-4px" />
+        </div>
+      </div>
+    </Popover>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.popover-content {
+  width: 520px;
+  height: 520px;
+}
+.popover-content-box {
+  padding: 8px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
+}
+</style>
--- a/Yi.Ai.Vue3/src/layouts/components/Header/components/Collapse.vue
+++ b/Yi.Ai.Vue3/src/layouts/components/Header/components/Collapse.vue
@@ -0,0 +1,39 @@
+<!-- 侧边栏折叠按钮 -->
+<script setup lang="ts">
+import SvgIcon from '@/components/SvgIcon/index.vue';
+import { SIDE_BAR_WIDTH } from '@/config/index';
+import { useCollapseToggle } from '@/hooks/useCollapseToggle';
+import { useDesignStore } from '@/stores';
+
+const { changeCollapse } = useCollapseToggle();
+const designStore = useDesignStore();
+
+function handleChangeCollapse() {
+  changeCollapse();
+  // 每次切换折叠状态，重置安全区状态
+  designStore.isSafeAreaHover = false;
+  // 重置首次激活悬停状态
+  designStore.hasActivatedHover = false;
+  if (!designStore.isCollapse) {
+    document.documentElement.style.setProperty(
+      `--sidebar-left-container-default-width`,
+      `${SIDE_BAR_WIDTH}px`,
+    );
+  }
+  else {
+    document.documentElement.style.setProperty(`--sidebar-left-container-default-width`, ``);
+  }
+}
+</script>
+
+<template>
+  <div class="collapse-container btn-icon-btn" @click="handleChangeCollapse">
+    <SvgIcon v-if="!designStore.isCollapse" name="ms-left-panel-close-outline" size="24" />
+    <SvgIcon v-if="designStore.isCollapse" name="ms-left-panel-open-outline" size="24" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// .collapse-container {
+// }
+</style>
--- a/Yi.Ai.Vue3/src/layouts/components/Header/components/CreateChat.vue
+++ b/Yi.Ai.Vue3/src/layouts/components/Header/components/CreateChat.vue
@@ -0,0 +1,45 @@
+<!-- 添加新会话按钮 -->
+<script setup lang="ts">
+import { useSessionStore } from '@/stores/modules/session';
+
+const sessionStore = useSessionStore();
+
+/* 创建会话 开始 */
+function handleCreatChat() {
+  if (!sessionStore.currentSession)
+    return;
+  // 创建会话, 跳转到默认聊天
+  sessionStore.createSessionBtn();
+}
+/* 创建会话 结束 */
+</script>
+
+<template>
+  <div
+    class="create-chat-container flex-center flex-none p-6px pl-8px pr-8px c-#0057ff b-#0057ff b-rounded-12px border-1px hover:bg-#0057ff hover:c-#fff hover:b-#fff hover:cursor-pointer border-solid select-none"
+    :class="{
+      'is-disabled': !sessionStore.currentSession,
+    }"
+    @click="handleCreatChat"
+  >
+    <el-icon size="12" class="flex-center flex-none w-14px h-14px">
+      <Plus />
+    </el-icon>
+    <span class="ml-4px font-size-14px font-700">新对话</span>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  &:hover {
+    color: #0057ff;
+    cursor: not-allowed;
+    background-color: transparent;
+    border-color: #0057ff;
+    border-style: solid;
+    transition: none;
+  }
+}
+</style>
--- a/Yi.Ai.Vue3/src/layouts/components/Header/components/LoginBtn.vue
+++ b/Yi.Ai.Vue3/src/layouts/components/Header/components/LoginBtn.vue
@@ -0,0 +1,29 @@
+<!-- LoginBtn 登录按钮 -->
+<script setup lang="ts">
+import LoginDialog from '@/components/LoginDialog/index.vue';
+import { useUserStore } from '@/stores';
+
+const userStore = useUserStore();
+const isLoginDialogVisible = computed(() => userStore.isLoginDialogVisible);
+
+// 点击登录按钮时调用Store方法打开弹框
+function handleClickLogin() {
+  userStore.openLoginDialog();
+}
+</script>
+
+<template>
+  <div class="login-btn-wrapper">
+    <div
+      class="login-btn bg-#191c1f c-#fff font-size-14px rounded-8px flex-center text-overflow p-10px pl-12px pr-12px min-w-49px h-16px cursor-pointer hover:bg-#232629 select-none"
+      @click="handleClickLogin"
+    >
+      登录
+    </div>
+
+    <!-- 登录弹框 -->
+    <LoginDialog v-model:visible="isLoginDialogVisible" />
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
--- a/Yi.Ai.Vue3/src/layouts/components/Header/components/TitleEditing.vue
+++ b/Yi.Ai.Vue3/src/layouts/components/Header/components/TitleEditing.vue
@@ -0,0 +1,87 @@
+<!-- 标题编辑 -->
+<script setup lang="ts">
+import SvgIcon from '@/components/SvgIcon/index.vue';
+import { useSessionStore } from '@/stores/modules/session';
+
+const sessionStore = useSessionStore();
+
+const currentSession = computed(() => sessionStore.currentSession);
+
+function handleClickTitle() {
+  ElMessageBox.prompt('', '编辑对话名称', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    inputErrorMessage: '请输入对话名称',
+    confirmButtonClass: 'el-button--primary',
+    cancelButtonClass: 'el-button--info',
+    roundButton: true,
+    inputValue: currentSession.value?.sessionTitle,
+    inputValidator: (value) => {
+      if (!value) {
+        return false;
+      }
+      return true;
+    },
+  })
+    .then(({ value }) => {
+      sessionStore
+        .updateSession({
+          id: currentSession.value!.id,
+          sessionTitle: value,
+          sessionContent: currentSession.value!.sessionContent,
+        })
+        .then(() => {
+          ElMessage({
+            type: 'success',
+            message: '修改成功',
+          });
+          nextTick(() => {
+            // 如果是当前会话，则更新当前选中会话信息
+            sessionStore.setCurrentSession({
+              ...currentSession.value,
+              sessionTitle: value,
+            });
+          });
+        });
+    })
+    .catch(() => {
+      // ElMessage({
+      //   type: 'info',
+      //   message: '取消修改',
+      // });
+    });
+}
+</script>
+
+<template>
+  <div v-if="currentSession" class="w-full h-full flex flex-col justify-center">
+    <div class="box-border mr-20px">
+      <div
+        class="title-editing-container p-4px w-fit max-w-full flex items-center justify-start cursor-pointer select-none hover:bg-[rgba(0,0,0,.04)] cursor-pointer rounded-md font-size-14px"
+        @click="handleClickTitle"
+      >
+        <div class="text-overflow select-none pr-8px">
+          {{ currentSession.sessionTitle }}
+        </div>
+        <SvgIcon name="draft-line" size="14" class="flex-none c-gray-500" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.title-editing-container {
+  transition: all 0.3s ease;
+  &:hover {
+    .svg-icon {
+      display: block;
+      opacity: 1;
+    }
+  }
+  .svg-icon {
+    display: none;
+    opacity: 0.5;
+    transition: all 0.3s ease;
+  }
+}
+</style>
--- a/Yi.Ai.Vue3/src/layouts/components/Header/index.vue
+++ b/Yi.Ai.Vue3/src/layouts/components/Header/index.vue
@@ -0,0 +1,100 @@
+<!-- Header 头部 -->
+<script setup lang="ts">
+import { onKeyStroke } from '@vueuse/core';
+import { SIDE_BAR_WIDTH } from '@/config/index';
+import { useDesignStore, useUserStore } from '@/stores';
+import { useSessionStore } from '@/stores/modules/session';
+import Avatar from './components/Avatar.vue';
+import Collapse from './components/Collapse.vue';
+import CreateChat from './components/CreateChat.vue';
+import LoginBtn from './components/LoginBtn.vue';
+import TitleEditing from './components/TitleEditing.vue';
+
+const userStore = useUserStore();
+const designStore = useDesignStore();
+const sessionStore = useSessionStore();
+
+const currentSession = computed(() => sessionStore.currentSession);
+
+onMounted(() => {
+  // 全局设置侧边栏默认宽度 (这个是不变的，一开始就设置)
+  document.documentElement.style.setProperty(`--sidebar-default-width`, `${SIDE_BAR_WIDTH}px`);
+  if (designStore.isCollapse) {
+    document.documentElement.style.setProperty(`--sidebar-left-container-default-width`, ``);
+  }
+  else {
+    document.documentElement.style.setProperty(
+      `--sidebar-left-container-default-width`,
+      `${SIDE_BAR_WIDTH}px`,
+    );
+  }
+});
+
+// 定义 Ctrl+K 的处理函数
+function handleCtrlK(event: KeyboardEvent) {
+  event.preventDefault(); // 防止默认行为
+  sessionStore.createSessionBtn();
+}
+
+// 设置全局的键盘按键监听
+onKeyStroke(event => event.ctrlKey && event.key.toLowerCase() === 'k', handleCtrlK, {
+  passive: false,
+});
+</script>
+
+<template>
+  <div class="header-container">
+    <div class="header-box relative z-10 top-0 left-0 right-0">
+      <div class="absolute left-0 right-0 top-0 bottom-0 flex items-center flex-row">
+        <div
+          class="overflow-hidden flex h-full items-center flex-row flex-1 w-fit flex-shrink-0 min-w-0"
+        >
+          <div class="w-full flex items-center flex-row">
+            <!-- 左边 -->
+            <div
+              v-if="designStore.isCollapse"
+              class="left-box flex h-full items-center pl-20px gap-12px flex-shrink-0 flex-row"
+            >
+              <Collapse />
+              <CreateChat />
+              <div v-if="currentSession" class="w-0.5px h-30px bg-[rgba(217,217,217)]" />
+            </div>
+
+            <!-- 中间 -->
+            <div class="middle-box flex-1 min-w-0 ml-12px">
+              <TitleEditing />
+            </div>
+          </div>
+        </div>
+
+        <!-- 右边 -->
+        <div class="right-box flex h-full items-center pr-20px flex-shrink-0 mr-auto flex-row">
+          <Avatar v-show="userStore.token" />
+          <LoginBtn v-show="!userStore.token" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.header-container {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  width: 100%;
+  height: fit-content;
+  .header-box {
+    width: 100%;
+    width: calc(
+      100% - var(--sidebar-left-container-default-width, 0px) - var(
+          --sidebar-right-container-default-width,
+          0px
+        )
+    );
+    height: var(--header-container-default-heigth);
+    margin: 0 var(--sidebar-right-container-default-width, 0) 0
+      var(--sidebar-left-container-default-width, 0);
+  }
+}
+</style>