feat: 评价页面搭建

.npmrc

@@ -1,3 +1,3 @@
-registry=https://registry.npmmirror.com
+# 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/constant/rate.ts

@@ -0,0 +1,52 @@
+import xc from '@assets/images/rate/xc.png'
+import qne from '@assets/images/rate/qne.png'
+import fz from '@assets/images/rate/fz.png'
+import mt from '@assets/images/rate/mt.png'
+import dy from '@assets/images/rate/dy.png'
+
+// 菜单列表申明
+interface Item {
+    id: number
+    name: string
+    icon: any
+    total: number,
+    score: number
+}
+
+export const channels: Item[] = [
+    {
+        id: 1,
+        name: '携程',
+        icon: xc,
+        total: 110,
+        score: 4.5
+    },
+    {
+        id: 2,
+        name: '去哪儿',
+        icon: qne,
+        total: 100,
+        score: 4.5
+    },
+    {
+        id: 3,
+        name: '飞猪',
+        icon: fz,
+        total: 90,
+        score: 4.5
+    },
+    {
+        id: 4,
+        name: '美团',
+        icon: mt,
+        total: 80,
+        score: 4.5
+    },
+    {
+        id: 5,
+        name: '抖音',
+        icon: dy,
+        total: 70,
+        score: 4.5
+    }
+]

src/renderer/env.d.ts

@@ -1,3 +1,7 @@
 declare module "@store/counter";
 declare module "@utils/request";
-declare module "@constant/menus";
+declare module "@assets/images/*";
+declare module "@constant/rate";
+declare module "@constant/menus";
+declare module "@remixicon/vue";
+declare module "vue-router";

src/renderer/layout/index.vue

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

src/renderer/router/index.ts

@@ -36,15 +36,15 @@ const router = createRouter({
   routes,
 });
 
-router.beforeEach((to, _from, next) => {
+router.beforeEach((to: any, from: any, next: any) => {
   const token = localStorage.getItem("token");
   if (to.meta && (to.meta as any).requiresAuth && !token) {
     next({ path: "/login" });
     return;
   }
 
-  if (token && to.path !== "/home") {
+  if (token && to.path !== "/rate") {
-    next({ path: "/home" });
+    next({ path: "/rate" });
     return;
   }
   

src/renderer/views/home/index.vue

@@ -1,6 +1,8 @@
 <template>
   <Layout>
-    
+    <div class="bg-white w-[952px] h-full rounded-[16px]">
+        454646
+      </div>
   </Layout>
 </template>
 

src/renderer/views/rate/components/RatePanelSection/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="grid grid-cols-5 gap-[15px]">
+    <div class="bg-[#F5F7FA] box-border flex flex-col p-[16px] rounded-[12px]" v-for="item in channels" :key="item.id">
+      <div class="flex items-center mb-[8px]">
+        <img :src="item.icon" class="w-[24px] h-[24px] mr-[8px]">
+        <span class="text-[16px] font-400 text-[#171717] leading-[24px]">
+          {{ item.name }}
+        </span>
+      </div>
+      <div class="text-[14px] font-400 text-[#171717] leading-[20px] mb-[4px]">
+        {{ item.total }}条
+      </div>
+      <div class="flex items-center">
+        <RiStarFill :color="i <= item.score ? '#FA7319' : '#CACFD8'" class="w-[20px] h-[20px] mr-[2px]" v-for="i in 5" :key="i" />
+        <span class="text-[14px] text-[#525866] leading-[20px] pl-[2px]">
+          {{ item.score }}
+        </span>
+      </div>
+    </div>
+  </div>  
+</template>
+
+<script setup lang="ts">
+import { channels } from '@constant/rate'
+import { RiStarFill } from '@remixicon/vue'
+
+</script>

src/renderer/views/rate/components/RateTitleSection/index.vue

@@ -0,0 +1,14 @@
+<template>
+    <div class="box-border border-b-[1px] border-b-[#E5E8EE] mb-[20px] pb-[20px]">
+        <span class="text-[24px] font-500 text-[#171717] leading-[32px] mr-[8px]">
+        评价
+        </span>
+        <span class="text-[12px] font-400 text-[#99A0AE] leading-[16px]">
+        评价数据智能整理，精准优化服务
+        </span>
+    </div>
+</template>
+
+<script></script>
+
+<style></style>

src/renderer/views/rate/index.vue

@@ -1,16 +1,14 @@
 <template>
   <Layout>
-    
+    <div class="bg-white box-border w-[936px] h-full rounded-[16px] p-[20px]">
+        <RateTitleSection />
+        <RatePanelSection />
+      </div>
   </Layout>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="Rate">
-
+import RateTitleSection from './components/RateTitleSection/index.vue'
-const openBaidu = () => {  
+import RatePanelSection from './components/RatePanelSection/index.vue'
-(window as any).ipcAPI?.openBaidu()
-
-// 发送日志
-(window as any).ipcAPI?.logToMain('info', '打开百度')
-}
 </script>