feat: 任务列表开发

.editorconfig

@@ -0,0 +1,17 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+tab_width = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+insert_final_newline = false

.npmrc

@@ -1,2 +1,3 @@
+registry=https://registry.npmmirror.com
 electron_mirror=https://npmmirror.com/mirrors/electron/
 electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

src/renderer/components/Menus/index.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="w-[80px] h-full box-border pt-[12px] pb-[12px] 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)">
+                <div :class="['box-border rounded-[16px] p-[8px]', {'bg-white': item.id === currentId}]">
+                    <component :is="item.icon" :color="item.id === currentId ? item.activeColor : item.color" :class="['w-[32px] h-[32px]']" />
+                </div>
+    
+                <div :class="['text-[14px] mt-[4px] mb-[8px]', item.id === currentId ? `text-[${item.activeColor}]` : item.color]">
+                    {{ item.name }}
+                </div>
+            </div>
+        </div>
+        <div class="w-[48px] h-[48px] rounded-full overflow-hidden">
+            <img class="w-full h-full object-cover" src="@assets/images/login/black_logo.png" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { menus } from '@constant/menus'
+
+const currentId = ref(null)
+const handleClick = (item: any) => {
+    currentId.value = item.id
+}
+</script>
+
+<style></style>

src/renderer/components/TaskList/index.vue

@@ -0,0 +1,9 @@
+<template>
+    <div class="task-list w-[392px] h-full rounded-[16px] bg-white">
+        <slot></slot>
+    </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style></style>

src/renderer/constant/menus.ts

@@ -0,0 +1,62 @@
+import { RiHomeLine, RiFileListLine, RiHotelLine, RiChatQuoteLine, RiBarChartBoxAiLine, RiMoreLine, RiSettingsLine } from '@remixicon/vue'
+
+// 菜单列表申明
+export interface MenuItem {
+    id: number
+    name: string
+    icon: any
+    color: string
+    activeColor: string
+}
+
+export const menus: MenuItem[] = [
+    {
+        id: 1,
+        name: '首页',
+        icon: RiHomeLine,
+        color: '#525866',
+        activeColor: '#2B7FFF',
+    },
+    {
+        id: 2,
+        name: '订单',
+        icon: RiFileListLine,
+        color: '#525866',
+        activeColor: '#2B7FFF',
+    },
+    {
+        id: 3,
+        name: '库存',
+        icon: RiHotelLine,
+        color: '#525866',
+        activeColor: '#2B7FFF',
+    },
+    {
+        id: 4,
+        name: '评价',
+        icon: RiChatQuoteLine,
+        color: '#525866',
+        activeColor: '#2B7FFF',
+    },
+    {
+        id: 5,
+        name: '数据看板',
+        icon: RiBarChartBoxAiLine,
+        color: '#525866',
+        activeColor: '#2B7FFF',
+    },
+    {
+        id: 6,
+        name: '更多',
+        icon: RiMoreLine,
+        color: '#525866',
+        activeColor: '#2B7FFF',
+    },
+    {
+        id: 7,
+        name: '设置',
+        icon: RiSettingsLine,
+        color: '#525866',
+        activeColor: '#2B7FFF',
+    },
+]

src/renderer/env.d.ts

@@ -1,2 +1,3 @@
 declare module "@store/counter";
 declare module "@utils/request";
+declare module "@constant/menus";

src/renderer/index.css

@@ -6,3 +6,7 @@ body {
   margin: 0;
   padding: 0;
 }
+
+.bg {
+    background: linear-gradient( 180deg, #EFF6FF 0%, #F5F7FA 40%);
+}

src/renderer/layout/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="bg box-border w-full h-screen flex pt-[8px] pb-[8px]">
+    <div class="w-[952px] h-full">
+      <slot></slot>
+    </div>
+
+    <TaskList>
+      <slot name="task"></slot>
+    </TaskList>
+
+    <Menus />
+  </div>
+</template>
+
+<script setup lang="ts">
+import TaskList from '@/components/TaskList/index.vue'
+import Menus from '@/components/Menus/index.vue'
+</script>
+

src/renderer/main.ts

@@ -3,6 +3,7 @@ import { createApp } from "vue";
 import { createPinia } from "pinia";
 import router from "./router";
 import App from "./App.vue";
+import Layout from "./layout/index.vue";
 
 // 创建 Vue 应用实例
 const app = createApp(App);
@@ -10,6 +11,9 @@ const app = createApp(App);
 // 使用 Pinia 状态管理
 app.use(createPinia());
 
+// 注册 Layout 组件
+app.component('Layout', Layout);
+
 // 使用 Vue Router
 app.use(router);
 

src/renderer/router/index.ts

@@ -12,6 +12,18 @@ const routes = [
     component: () => import("@/views/browser/BrowserLayout.vue"),
     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: "/about",
     name: "About",
@@ -30,10 +42,12 @@ router.beforeEach((to, _from, next) => {
     next({ path: "/login" });
     return;
   }
-  if (token && to.path !== "/browser") {
-    next({ path: "/browser" });
+
+  if (token && to.path !== "/home") {
+    next({ path: "/home" });
     return;
   }
+  
   next();
 });
 

src/renderer/views/components/Task/index.vue

@@ -0,0 +1,51 @@
+<template>
+    <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>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+
+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>

src/renderer/views/home/index.vue

@@ -1,18 +1,14 @@
 <template>
-  <div class="home">
-    <h2 class="text-2xl font-bold mb-4">欢迎使用智念科技 AI</h2>
-    <div class="bg-white p-6">
-      <button
-        class="bg-blue-300 hover:bg-blue-500 text-white px-4 py-2 rounded mr-2"
-        @click="openBaidu"
-      >
-        打开百度
-      </button>
-    </div>
-  </div>
+  <Layout>
+    <template #task>
+      <Task />
+    </template>
+  </Layout>
 </template>
 
 <script setup lang="ts">
+import Task from '../components/Task/index.vue'
+
 const openBaidu = () => {  
 (window as any).ipcAPI?.openBaidu()
 

src/renderer/views/login/index.vue

@@ -41,6 +41,19 @@
           />
         </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"
+          />
+          <img class="w-[80px] h-[40px]" src="" />
+        </div>
+        <p v-if="errors.code" class="mt-1 text-xs text-red-500">{{ errors.code }}</p>
 
         <!-- 记住密码|忘记密码 -->
         <div class="flex items-center justify-between mb-[24px] mt-[24px]">
@@ -79,7 +92,7 @@
 
       <!-- Copy Right -->
       <div class="text-[14px] text-gray-500 text-center mt-[24px] mt-auto">
-        © 2025 智能体智能科技有限公司 版权所有
+        © 2025 贵州智念科技服务有限公司 版权所有
       </div>
     </div>
 
@@ -94,8 +107,8 @@ import { login as apiLogin } from "@/renderer/api/login";
 import { RiUser3Fill , RiKey2Fill} from '@remixicon/vue'
 
 const router = useRouter();
-const form = reactive({ account: "", password: "", agreement: "" });
-const errors = reactive<{ account?: string; password?: string }>({});
+const form = reactive({ account: "", password: "", agreement: "", code: "" });
+const errors = reactive<{ account?: string; password?: string; code?: string }>({});
 const loading = ref(false);
 const showPwd = ref(false);
 
@@ -118,7 +131,7 @@ 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('/browser')
+    await (window as any).ipcAPI.app.setFrameless('/home')
   } finally {
     // loading.value = false;
   }

src/renderer/views/rate/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <Layout>
+    
+  </Layout>
+</template>
+
+<script setup lang="ts">
+
+const openBaidu = () => {  
+(window as any).ipcAPI?.openBaidu()
+
+// 发送日志
+(window as any).ipcAPI?.logToMain('info', '打开百度')
+}
+</script>
+

tsconfig.json

@@ -17,6 +17,7 @@
     "paths": {
       "@/*": ["./src/*"],
       "@store/*": ["src/renderer/store/*"],
+      "@constant/*": ["src/renderer/constant/*"],
       "@utils/*": ["src/renderer/utils/*"],
       "@api/*": ["src/renderer/api/*"],
       "@modules/*": ["src/electron/main/modules/*"],

vite.renderer.config.ts

@@ -16,6 +16,7 @@ export default defineConfig({
       "@": resolve(__dirname, "./src/renderer"),
       "@assets": resolve(__dirname, "./src/assets"),
       "@store": resolve(__dirname, "./src/renderer/store"),
+      "@constant": resolve(__dirname, "./src/renderer/constant"),
       "@utils": resolve(__dirname, "./src/renderer/utils"),
       "@api": resolve(__dirname, "./src/renderer/api"),
     },