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/

package-lock.json

@@ -17,6 +17,7 @@
         "lodash-es": "^4.17.21",
         "log4js": "^6.9.1",
         "pinia": "^2.3.1",
+        "radix-vue": "^1.9.17",
         "vue": "^3.5.22",
         "vue-router": "^4.5.1"
       },
@@ -1440,6 +1441,42 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.7.4.tgz",
+      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "license": "MIT"
+    },
+    "node_modules/@floating-ui/vue": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/vue/-/vue-1.1.9.tgz",
+      "integrity": "sha512-BfNqNW6KA83Nexspgb9DZuz578R7HT8MZw1CfK9I6Ah4QReNWEJsXWHN+SdmOVLNGmTPDi+fDT535Df5PzMLbQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.4",
+        "@floating-ui/utils": "^0.2.10",
+        "vue-demi": ">=0.13.0"
+      }
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -1706,6 +1743,24 @@
         "node": ">=18"
       }
     },
+    "node_modules/@internationalized/date": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmmirror.com/@internationalized/date/-/date-3.10.0.tgz",
+      "integrity": "sha512-oxDR/NTEJ1k+UFVQElaNIk65E/Z83HK1z1WI3lQyhTtnNg4R5oVXaPzK3jcpKG8UHKDVuDQHzn+wsxSz8RP3aw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/number": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmmirror.com/@internationalized/number/-/number-3.6.5.tgz",
+      "integrity": "sha512-6hY4Kl4HPBvtfS62asS/R22JzNNy8vi/Ssev7x6EobfCp+9QIB2hKvI2EtbdJ0VSQacxVNtqhE/NmF/NZ0gm6g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -2222,6 +2277,21 @@
         "url": "https://github.com/sindresorhus/is?sponsor=1"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.17",
+      "resolved": "https://registry.npmmirror.com/@swc/helpers/-/helpers-0.5.17.tgz",
+      "integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@swc/helpers/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/@szmarczak/http-timer": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
@@ -2542,6 +2612,32 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.13.12",
+      "resolved": "https://registry.npmmirror.com/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz",
+      "integrity": "sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/vue-virtual": {
+      "version": "3.13.12",
+      "resolved": "https://registry.npmmirror.com/@tanstack/vue-virtual/-/vue-virtual-3.13.12.tgz",
+      "integrity": "sha512-vhF7kEU9EXWXh+HdAwKJ2m3xaOnTTmgcdXcF2pim8g4GvI7eRrk2YRuV5nUlZnd/NbCIX4/Ja2OZu5EjJL06Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.13.12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.0.0"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -2697,6 +2793,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
+      "license": "MIT"
+    },
     "node_modules/@types/wrap-ansi": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/wrap-ansi/-/wrap-ansi-3.0.0.tgz",
@@ -3045,6 +3147,42 @@
       "integrity": "sha512-AbOPdQQnAnzs58H2FrrDxYj/TJfmeS2jdfEEhgiKINy+bnOANmVizIEgq1r+C5zsbs6l1CCQxtcj71rwNQ4jWg==",
       "license": "MIT"
     },
+    "node_modules/@vueuse/core": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-10.11.1.tgz",
+      "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.11.1",
+        "@vueuse/shared": "10.11.1",
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-10.11.1.tgz",
+      "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-10.11.1.tgz",
+      "integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
@@ -3462,6 +3600,24 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmmirror.com/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/aria-hidden/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/array-buffer-byte-length": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
@@ -4632,6 +4788,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/defu": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmmirror.com/defu/-/defu-6.1.4.tgz",
+      "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
+      "license": "MIT"
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -6156,7 +6318,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-glob": {
@@ -9840,6 +10001,46 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/radix-vue": {
+      "version": "1.9.17",
+      "resolved": "https://registry.npmmirror.com/radix-vue/-/radix-vue-1.9.17.tgz",
+      "integrity": "sha512-mVCu7I2vXt1L2IUYHTt0sZMz7s1K2ZtqKeTIxG3yC5mMFfLBG4FtE1FDeRMpDd+Hhg/ybi9+iXmAP1ISREndoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.7",
+        "@floating-ui/vue": "^1.1.0",
+        "@internationalized/date": "^3.5.4",
+        "@internationalized/number": "^3.5.3",
+        "@tanstack/vue-virtual": "^3.8.1",
+        "@vueuse/core": "^10.11.0",
+        "@vueuse/shared": "^10.11.0",
+        "aria-hidden": "^1.2.4",
+        "defu": "^6.1.4",
+        "fast-deep-equal": "^3.1.3",
+        "nanoid": "^5.0.7"
+      },
+      "peerDependencies": {
+        "vue": ">= 3.2.0"
+      }
+    },
+    "node_modules/radix-vue/node_modules/nanoid": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-5.1.6.tgz",
+      "integrity": "sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",

package.json

@@ -57,6 +57,7 @@
     "lodash-es": "^4.17.21",
     "log4js": "^6.9.1",
     "pinia": "^2.3.1",
+    "radix-vue": "^1.9.17",
     "vue": "^3.5.22",
     "vue-router": "^4.5.1"
   }

src/renderer/components/Pagination/index.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="flex items-center justify-between pt-[20px]">
+    <div class="text-sm text-gray-600">共 {{ total }} 项数据</div>
+    <div class="flex items-center gap-2">
+      <SelectRoot v-model="selectedCount" v-model:open="open">
+        <SelectTrigger class="inline-flex items-center justify-between rounded-md border border-gray-200 bg-white px-3 py-1 text-sm text-gray-700 shadow-sm hover:bg-gray-50">
+          <span>{{ selectedCount }} 条/页</span>
+          <RiArrowDownSLine />
+        </SelectTrigger>
+
+        <SelectPortal :to="portalTarget">
+          <SelectContent position="popper" :side-offset="6" class="z-50 rounded-md border border-gray-200 bg-white shadow-lg" :style="{ minWidth: 'var(--radix-select-trigger-width)' }">
+            <SelectViewport class="p-1">
+              <SelectGroup>
+                <SelectItem v-for="(option, index) in pageSizes" :key="index" :value="String(option)" class="flex cursor-pointer select-none items-center rounded px-2 py-1 text-sm text-gray-700 hover:bg-gray-50">
+                  <SelectItemText>{{ option }} 条/页</SelectItemText>
+                </SelectItem>
+              </SelectGroup>
+            </SelectViewport>
+          </SelectContent>
+        </SelectPortal>
+      </SelectRoot>
+
+      <PaginationRoot
+        v-model:page="currentPage"
+        :total="total"
+        :items-per-page="Number(selectedCount)"
+        show-edges
+        :sibling-count="1"
+        :default-page="currentPage"
+      >
+        <PaginationList
+          v-slot="{ items }"
+          class="flex items-center gap-1 text-[#171717]"
+        >
+          <PaginationPrev aria-label="上一页" class="w-9 h-9 flex items-center justify-center mr-4 border rounded bg-white text-gray-700 disabled:opacity-50">
+            <RiArrowLeftLine size="18" />
+          </PaginationPrev>
+          <template v-for="(page, index) in items">
+            <PaginationListItem
+              v-if="page.type === 'page'"
+              :key="index"
+              class="w-9 h-9 border rounded transition data-[selected]:bg-blue-600 data-[selected]:text-white hover:bg-white/10"
+              :value="page.value"
+            >
+              {{ page.value }}
+            </PaginationListItem>
+            <PaginationEllipsis
+              v-else
+              :key="page.type"
+              :index="index"
+              class="w-9 h-9 flex items-center justify-center"
+            >
+              &#8230;
+            </PaginationEllipsis>
+          </template>
+          <PaginationNext aria-label="下一页" class="w-9 h-9 flex items-center justify-center ml-4 border rounded bg-white text-gray-700 disabled:opacity-50 focus-within:outline focus-within:outline-1 focus-within:outline-offset-1">
+            <RiArrowRightLine size="18" />
+          </PaginationNext>
+        </PaginationList>
+      </PaginationRoot>
+
+      <div class="ml-2 flex items-center gap-2 text-sm text-gray-700">
+        <span>跳至</span>
+        <input
+          class="w-[55px] rounded border border-gray-200 bg-white px-2 py-1 text-center outline-none focus:border-blue-500"
+          type="text"
+          :min="1"
+          :max="pageTotal"
+          v-model.number="jumpValue"
+          @keydown.enter="onJump"
+          @blur="onJump"
+        />
+        <span>/ {{ pageTotal }} 页</span>
+      </div>
+    </div>
+  </div>
+  
+</template>
+
+<script setup lang="ts" name="Pagination">
+import { ref, defineProps, defineEmits, watch, onMounted, computed } from 'vue'
+import { RiArrowLeftLine, RiArrowRightLine, RiArrowDownSLine } from '@remixicon/vue'
+import { SelectRoot, SelectTrigger, SelectPortal, SelectContent, SelectViewport, SelectGroup, SelectItem, SelectItemText, PaginationRoot, PaginationList, PaginationPrev, PaginationListItem, PaginationEllipsis, PaginationNext } from 'radix-vue'
+import { PaginationProps, EmitsProps } from '@/types'
+
+const props = defineProps<PaginationProps>()
+const emit = defineEmits<EmitsProps>()
+
+const pageSizes = ref(Array.isArray(props.pageSizes) && props.pageSizes.length ? props.pageSizes : [10, 20, 50, 100, 200])
+const selectedCount = ref(String(props.pageSize ?? pageSizes.value[0]))
+const open = ref(false)
+const portalTarget = typeof document !== 'undefined' ? document.body : undefined
+watch(() => props.pageSize, (val) => selectedCount.value = String(val))
+watch(selectedCount, (val) => emit('update:pageSize', val))
+watch(open, (val) => {
+  console.log('Select open state:', val)
+})
+
+onMounted(() => {
+  console.log('Select initial value:', selectedCount.value)
+})
+const pageTotal = computed(() => {
+  const t = Number(props.total || 0)
+  const s = Number(selectedCount.value || props.pageSize || 10)
+  const pages = s > 0 ? Math.ceil(t / s) : 1
+  return Math.max(1, pages)
+})
+watch(pageTotal, (val) => {
+  console.log('Pagination total pages:', val, 'from total items:', props.total, 'pageSize:', selectedCount.value)
+})
+
+// 跳转分页
+const jumpValue = ref()
+const onJump = () => {
+  const v = Number(jumpValue.value)
+  if (!Number.isFinite(v)) return
+  const clamped = Math.max(1, Math.min(pageTotal.value, v))
+  jumpValue.value = clamped
+  currentPage.value = clamped
+  emit('update:currentPage', clamped)
+  emit('currentChange', clamped)
+}
+
+const currentPage = ref(props.currentPage ?? 1)
+watch(() => props.currentPage, (val) => {
+  if (typeof val === 'number' && Number.isFinite(val)) currentPage.value = val
+})
+watch(currentPage, (p) => {
+  emit('update:currentPage', p)
+  emit('currentChange', p)
+})
+</script>
+
+<style></style>

src/renderer/components/TaskList/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="task-list w-[392px] h-full rounded-[16px] bg-white">
-        <slot></slot>
+
     </div>
 </template>
 

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,19 +1,16 @@
 <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>
 
-    <TaskList>
+    <TaskList />
-      <slot name="task"></slot>
-    </TaskList>
 
     <Menus />
   </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/types/PaginationProps.ts

@@ -0,0 +1,12 @@
+export interface PaginationProps {
+  currentPage?: number
+  total: number
+  pageSize: number
+  pageSizes?: number[]
+}
+
+export interface EmitsProps {
+  (e: 'update:currentPage', value: number): void
+  (e: 'update:pageSize', value: string): void
+  (e: 'currentChange', value: number): void
+}

src/renderer/types/index.ts

@@ -0,0 +1,3 @@
+import { PaginationProps, EmitsProps } from './PaginationProps'
+
+export { PaginationProps, EmitsProps }

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

@@ -1,51 +0,0 @@
-<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,13 +1,12 @@
 <template>
   <Layout>
-    <template #task>
+    <div class="bg-white w-[952px] h-full rounded-[16px]">
-      <Task />
+        454646
-    </template>
+      </div>
   </Layout>
 </template>
 
 <script setup lang="ts">
-import Task from '../components/Task/index.vue'
 
 const openBaidu = () => {  
 (window as any).ipcAPI?.openBaidu()

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

@@ -0,0 +1,28 @@
+<template>
+    <div class="box-border border-[1px] border-[#E5E8EE] rounded-[16px] p-[20px]">
+        <Pagination v-model:current-page="queryParams.pageIndex" :page-size="queryParams.pageSize" :total="total" @update:pageSize="updatePageSize" @update:currentPage="updatePageIndex" />
+    </div>
+</template>
+
+<script setup lang="ts" name="RateContentSection">
+import { ref } from 'vue'
+import Pagination from '@/components/Pagination/index.vue'
+
+const total = ref(200)
+const queryParams = ref({
+  pageIndex: 1,
+  pageSize: 10,
+})
+
+const updatePageSize = (val: string) => {
+  console.log("🚀 ~ updatePageSize ~ val:", val)
+  queryParams.value.pageSize = Number(val)
+}
+
+const updatePageIndex = (val: number) => {
+  console.log("🚀 ~ updatePageIndex ~ val:", val)
+  queryParams.value.pageIndex = val
+}
+</script>
+
+<style></style>

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

@@ -0,0 +1,26 @@
+<template>
+  <div class="grid grid-cols-5 gap-[15px] mb-[20px]">
+    <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" name="RatePanelSection">
+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,16 @@
 <template>
   <Layout>
-    
+    <div class="bg-white box-border w-[936px] h-full rounded-[16px] p-[20px]">
+        <RateTitleSection />
+        <RatePanelSection />
+        <RateContentSection />
+      </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()
+import RateContentSection from './components/RateContentSection/index.vue'
-
-// 发送日志
-(window as any).ipcAPI?.logToMain('info', '打开百度')
-}
 </script>
 

tsconfig.json

@@ -15,11 +15,13 @@
     "strict": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"],
+      "@/*": ["src/renderer/*"],
+      "@assets/*": ["src/assets/*"],
       "@store/*": ["src/renderer/store/*"],
       "@constant/*": ["src/renderer/constant/*"],
       "@utils/*": ["src/renderer/utils/*"],
       "@api/*": ["src/renderer/api/*"],
+      "@/types": ["src/renderer/types/index.ts"],
       "@modules/*": ["src/electron/main/modules/*"],
     },
     "outDir": "dist",

vite.renderer.config.ts

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