feat: 调整布局

2025-12-07 16:29:57 +08:00
parent 14d916187c
commit 84300791a0
19 changed files with 564 additions and 146 deletions
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -1,18 +1,5 @@
 <template>
-  <div id="app">
-    <router-view />
-  </div>
+  <router-view />
 </template>

-<script setup lang="ts">
-import { useCounterStore } from "@store/counter";
-
-// 使用 Pinia store
-const counterStore = useCounterStore();
-</script>
-
-<style scoped>
-#app {
-  @apply min-h-screen bg-gray-100;
-}
-</style>
+<script setup lang="ts"></script>
--- a/src/renderer/components/Menus/index.vue
+++ b/src/renderer/components/Menus/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="w-[80px] h-full box-border pt-[12px] pb-[12px] flex flex-col items-center justify-center">
+    <div class="w-[80px] h-full box-border flex flex-col items-center justify-center">
        <div :class="['flex flex-col gap-[16px]', { 'mt-auto mb-[8px] shrink-1': item.id === 7 }]"
            v-for="(item) in menus" :key="item.id">
            <div :class="['cursor-pointer flex flex-col items-center justify-center']" @click="handleClick(item)">
@@ -23,11 +23,13 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { menus } from '@constant/menus'
+import { useRouter } from "vue-router";

+const router = useRouter();
 const currentId = ref(1)
 const handleClick = async (item: any) => {
    currentId.value = item.id
-    await (window as any).ipcAPI.tabs.create(item.url)
+    router.push(item.url);
 }
 </script>

--- a/src/renderer/components/TaskList/index.vue
+++ b/src/renderer/components/TaskList/index.vue
@@ -1,9 +1,59 @@
 <template>
    <div class="task-list w-[392px] h-full rounded-[16px] bg-white">
-        <slot></slot>
+        <div class="task p-[12px]">
+            <div class="flex border border-[#BEDBFF] h-[48px] p-[4px] rounded-[10px] bg-[#EFF6FF] task-tab">
+                <div v-for="item in tabs" :key="item.value"
+                    class="flex-1 flex text-center items-center h-full align-middle text"
+                    :class="active === item.value && 'active'" @click="changeTab(item.value)">
+                    <div class="flex-1">{{ item.name }}<span v-if="item.total">{{ `（${item.total > 98 && item.total +
+                        '+'
+                        || item.total}）` }}</span></div>
+                </div>
+            </div>
+        </div>
    </div>
 </template>

-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, reactive } from "vue";

-<style></style>
+const tabs = reactive([{
+    name: '待处理',
+    value: 1,
+    total: 10,
+}, {
+    name: '已处理',
+    value: 2,
+    total: 99,
+}])
+const active = ref(1);
+const changeTab = (val: number) => {
+    active.value = val;
+};
+</script>
+
+<style scoped>
+.task-tab .text {
+    color: #525866;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.task-tab .active {
+    position: relative;
+    color: #2B7FFF;
+    background: #FFFFFF;
+    border-radius: 8px;
+}
+
+.task-tab .active::after {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    content: '';
+    border-radius: 8px;
+    border: 1px solid #2B7FFF;
+}
+</style>
--- a/src/renderer/constant/menus.ts
+++ b/src/renderer/constant/menus.ts
@@ -65,6 +65,6 @@ export const menus: MenuItem[] = [
        icon: RiSettingsLine,
        color: '#525866',
        activeColor: '#2B7FFF',
-        url: '/settings',
+        url: '/setting',
    },
 ]
--- a/src/renderer/layout/index.vue
+++ b/src/renderer/layout/index.vue
@@ -2,11 +2,16 @@
  <div class="bg box-border w-full h-screen flex pt-[8px] pb-[8px] pl-[8px] ">
    <div class="flex-1 flex gap-[8px]">
      <div class="flex-1 h-full">
-        <slot></slot>
+        <router-view v-slot="{ Component, route }">
+          <transition name="fade-transform" mode="out-in">
+            <keep-alive>
+              <component :is="Component" :key="route.path" />
+            </keep-alive>
+          </transition>
+        </router-view>
      </div>
-      <TaskList>
-        <slot name="task"></slot>
-      </TaskList>
+
+      <TaskList />
    </div>

    <Menus />
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@@ -3,7 +3,6 @@ import { createApp } from "vue";
 import { createPinia } from "pinia";
 import router from "./router";
 import App from "./App.vue";
-import Layout from "./layout/index.vue";
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import locale from 'element-plus/es/locale/lang/zh-cn'
@@ -14,8 +13,6 @@ const app = createApp(App);
 // 使用 Pinia 状态管理
 app.use(createPinia());

-// 注册 Layout 组件
-app.component('Layout', Layout);

 // 使用 Vue Router
 app.use(router);
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory } from "vue-router";
+import Layout from '@/layout/index.vue'

 const routes = [
  {
@@ -13,16 +14,52 @@ const routes = [
    meta: { requiresAuth: true },
  },
  {
-    path: "/home",
-    name: "Home",
-    component: () => import("@/views/home/index.vue"),
-    meta: { requiresAuth: true },
-  },
-  {
-    path: "/rate",
-    name: "Rate",
-    component: () => import("@/views/rate/index.vue"),
-    meta: { requiresAuth: true },
+    path: "/",
+    component: Layout,
+    children: [
+      {
+        path: "home",
+        component: () => import("@/views/home/index.vue"),
+        name: "Home",
+        meta: { requiresAuth: true },
+      },
+      {
+        path: "stock",
+        name: "Stock",
+        component: () => import("@/views/stock/index.vue"),
+        meta: { requiresAuth: true },
+      },
+      {
+        path: "rate",
+        name: "Rate",
+        component: () => import("@/views/rate/index.vue"),
+        meta: { requiresAuth: true },
+      },
+      {
+        path: "order",
+        name: "Order",
+        component: () => import("@/views/order/index.vue"),
+        meta: { requiresAuth: true },
+      },
+      {
+        path: "more",
+        name: "More",
+        component: () => import("@/views/more/index.vue"),
+        meta: { requiresAuth: true },
+      },
+      {
+        path: "setting",
+        name: "Setting",
+        component: () => import("@/views/setting/index.vue"),
+        meta: { requiresAuth: true },
+      },
+      {
+        path: "/dashboard",
+        name: "Dashboard",
+        component: () => import("@/views/dashboard/index.vue"),
+        meta: { requiresAuth: true },
+      },
+    ]
  },
  {
    path: "/about",
@@ -34,6 +71,13 @@ const routes = [
 const router = createRouter({
  history: createWebHistory(),
  routes,
+  scrollBehavior(to: any, from: any, savedPosition: any) {
+    if (savedPosition) {
+      return savedPosition
+    }
+    
+    return { top: 0 }
+  },
 });

 router.beforeEach((to: any, from: any, next: any) => {
--- a/src/renderer/views/dashboard/index.vue
+++ b/src/renderer/views/dashboard/index.vue
@@ -1,18 +1,7 @@
 <template>
-  <Layout>
-    <template #task>
-      <Task />
-    </template>
-  </Layout>
+  <div>看板</div>
 </template>

 <script setup lang="ts">
-import Task from '../components/Task/index.vue'

-const openBaidu = () => {
-  (window as any).ipcAPI?.openBaidu()
-
-    // 发送日志
-    (window as any).ipcAPI?.logToMain('info', '打开百度')
-}
 </script>
--- a/src/renderer/views/home/index.vue
+++ b/src/renderer/views/home/index.vue
@@ -1,18 +1,9 @@
 <template>
-  <Layout>
-    <template #task>
-      <Task />
-    </template>
-  </Layout>
+  <div>
+    首页
+  </div>
 </template>

 <script setup lang="ts">
-import Task from '../components/Task/index.vue'

-const openBaidu = () => {
-  (window as any).ipcAPI?.openBaidu()
-
-    // 发送日志
-    (window as any).ipcAPI?.logToMain('info', '打开百度')
-}
 </script>
--- a/src/renderer/views/login/index.vue
+++ b/src/renderer/views/login/index.vue
@@ -1,13 +1,12 @@
 <template>
-  <div
-    class="h-screen box-border p-[8px] login-bg flex items-center justify-center"
-  >
+  <div class="h-screen box-border p-[8px] login-bg flex items-center justify-center">
    <div class="w-[836px] h-full bg-white rounded-2xl p-[32px] flex flex-col">
      <div class="flex items-center">
        <img class="w-[48px] h-[48px]" src="@assets/images/login/blue_logo.png" />
-        
+
        <span class="ml-auto text-[14px] text-gray-600">没有账号？</span>
-        <button class="bg-sky-50 rounded-[8px] text-[14px] text-sky-600 px-[12px] py-[6px] focus-visible:outline-none">注册</button>
+        <button
+          class="bg-sky-50 rounded-[8px] text-[14px] text-sky-600 px-[12px] py-[6px] focus-visible:outline-none">注册</button>
      </div>

      <div class="flex flex-col items-center justify-center mb-[24px] box-border pt-[108px]">
@@ -18,39 +17,24 @@

      <div class="w-[392px] ml-auto mr-auto">
        <div class="font-[14px] text-gray-700 mb-2">账号</div>
-          <div class="border rounded-[10px] flex items-center gap-2 box-border px-[12px] py-[10px]">
-            <RiUser3Fill size="20px" color="#99A0AE"  />
-            <input
-              class="flex-1 focus-visible:outline-none"
-              type="text"
-              v-model.trim="form.account"
-              placeholder="请输入账号"
-              @keyup.enter="onSubmit"
-            />
-          </div>
-          <p v-if="errors.account" class="mt-1 text-xs text-red-500">{{ errors.account }}</p>
+        <div class="border rounded-[10px] flex items-center gap-2 box-border px-[12px] py-[10px]">
+          <RiUser3Fill size="20px" color="#99A0AE" />
+          <input class="flex-1 focus-visible:outline-none" type="text" v-model.trim="form.account" placeholder="请输入账号"
+            @keyup.enter="onSubmit" />
+        </div>
+        <p v-if="errors.account" class="mt-1 text-xs text-red-500">{{ errors.account }}</p>
        <div class="font-[14px] text-gray-700 mb-[8px] mt-[12px]">密码</div>
        <div class="flex items-center gap-2 border rounded-[10px] box-border px-[12px] py-[10px]">
          <RiKey2Fill size="20px" color="#99A0AE" />
-          <input
-            class="flex-1 focus-visible:outline-none"
-            :type="showPwd ? 'text' : 'password'"
-            v-model.trim="form.password"
-            placeholder="请输入密码"
-            @keyup.enter="onSubmit"
-          />
+          <input class="flex-1 focus-visible:outline-none" :type="showPwd ? 'text' : 'password'"
+            v-model.trim="form.password" placeholder="请输入密码" @keyup.enter="onSubmit" />
        </div>
        <p v-if="errors.password" class="mt-1 text-xs text-red-500">{{ errors.password }}</p>
        <!-- 验证码 -->
        <div class="font-[14px] text-gray-700 mb-[8px] mt-[12px]">验证码</div>
        <div class="flex items-center gap-2 border rounded-[10px] box-border px-[12px] py-[10px]">
-          <input
-            class="flex-1 focus-visible:outline-none"
-            type="text"
-            v-model.trim="form.code"
-            placeholder="请输入验证码"
-            @keyup.enter="onSubmit"
-          />
+          <input class="flex-1 focus-visible:outline-none" type="text" v-model.trim="form.code" placeholder="请输入验证码"
+            @keyup.enter="onSubmit" />
          <img class="w-[80px] h-[40px]" src="" />
        </div>
        <p v-if="errors.code" class="mt-1 text-xs text-red-500">{{ errors.code }}</p>
@@ -58,31 +42,21 @@
        <!-- 记住密码|忘记密码 -->
        <div class="flex items-center justify-between mb-[24px] mt-[24px]">
          <div class="flex items-center gap-2">
-            <input
-              type="checkbox"
-              v-model="showPwd"
-              class="w-[14px] h-[14px] rounded-[4px]"
-            />
+            <input type="checkbox" v-model="showPwd" class="w-[14px] h-[14px] rounded-[4px]" />
            <span class="text-[14px] text-gray-600">记住密码</span>
          </div>
          <span class="text-[14px] text-sky-600">忘记密码？</span>
        </div>

        <!-- 登录按钮 -->
-        <button
-          class="w-full py-2 bg-blue-600 text-white rounded-[8px] hover:bg-blue-700 disabled:bg-blue-300"
-          @click="onSubmit"
-        >
+        <button class="w-full py-2 bg-blue-600 text-white rounded-[8px] hover:bg-blue-700 disabled:bg-blue-300"
+          @click="onSubmit">
          {{ loading ? '登录中…' : '登录' }}
        </button>

        <!-- 同意协议 -->
        <div class="flex items-center justify-center gap-2 mt-[24px]">
-          <input
-            type="checkbox"
-            v-model="form.agreement"
-            class="w-[14px] h-[14px] rounded-[4px]"
-          />
+          <input type="checkbox" v-model="form.agreement" class="w-[14px] h-[14px] rounded-[4px]" />
          <span class="text-[14px] text-gray-600">我已同意</span>
          <span class="text-[14px] text-sky-600">《使用协议》</span>
          <span class="text-[14px] text-gray-600">和</span>
@@ -103,8 +77,8 @@
 <script setup lang="ts">
 import { ref, reactive } from "vue";
 import { useRouter } from "vue-router";
-import { login as apiLogin } from "@/renderer/api/login";
-import { RiUser3Fill , RiKey2Fill} from '@remixicon/vue'
+// import { login as apiLogin } from "@/renderer/api/login";
+import { RiUser3Fill, RiKey2Fill } from '@remixicon/vue'

 const router = useRouter();
 const form = reactive({ account: "", password: "", agreement: "", code: "" });
@@ -131,7 +105,8 @@ const onSubmit = async () => {
    // const token = res && (res.token || res.data?.token || res.access_token);
    // if (!token) throw new Error("登录失败");
    // localStorage.setItem("token", token);
-    await (window as any).ipcAPI.app.setFrameless('/home')
+    // await (window as any).ipcAPI.app.setFrameless('/home')
+    router.push('/home');
  } finally {
    // loading.value = false;
  }
--- a/src/renderer/views/more/index.vue
+++ b/src/renderer/views/more/index.vue
@@ -1,18 +1,7 @@
 <template>
-  <Layout>
-    <template #task>
-      <Task />
-    </template>
-  </Layout>
+  <div>更多</div>
 </template>

 <script setup lang="ts">
-import Task from '../components/Task/index.vue'

-const openBaidu = () => {
-  (window as any).ipcAPI?.openBaidu()
-
-    // 发送日志
-    (window as any).ipcAPI?.logToMain('info', '打开百度')
-}
 </script>
--- a/src/renderer/views/order/index.vue
+++ b/src/renderer/views/order/index.vue
@@ -1,18 +1,7 @@
 <template>
-  <Layout>
-    <template #task>
-      <Task />
-    </template>
-  </Layout>
+  <div>订单</div>
 </template>

 <script setup lang="ts">
-import Task from '../components/Task/index.vue'

-const openBaidu = () => {
-  (window as any).ipcAPI?.openBaidu()
-
-    // 发送日志
-    (window as any).ipcAPI?.logToMain('info', '打开百度')
-}
 </script>
--- a/src/renderer/views/settings/index.vue
+++ b/src/renderer/views/settings/index.vue
--- a/src/renderer/views/stock/index.vue
+++ b/src/renderer/views/stock/index.vue
@@ -1,18 +1,7 @@
 <template>
-  <Layout>
-    <template #task>
-      <Task />
-    </template>
-  </Layout>
+  <div>订单</div>
 </template>

 <script setup lang="ts">
-import Task from '../components/Task/index.vue'

-const openBaidu = () => {
-  (window as any).ipcAPI?.openBaidu()
-
-    // 发送日志
-    (window as any).ipcAPI?.logToMain('info', '打开百度')
-}
 </script>