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/

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/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/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

@@ -0,0 +1,9 @@
+<template>
+    <div class="task-list w-[392px] h-full rounded-[16px] bg-white">
+
+    </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/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,2 +1,7 @@
 declare module "@store/counter";
-declare module "@utils/request";
+declare module "@utils/request";
+declare module "@assets/images/*";
+declare module "@constant/rate";
+declare module "@constant/menus";
+declare module "@remixicon/vue";
+declare module "vue-router";

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,16 @@
+<template>
+  <div class="bg box-border w-full h-screen flex pt-[8px] pb-[8px] pl-[8px]">
+    <div class="flex-1 h-full">
+      <slot></slot>
+    </div>
+
+    <TaskList />
+
+    <Menus />
+  </div>
+</template>
+
+<script setup lang="ts" name="Layout">
+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",
@@ -24,16 +36,18 @@ 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 !== "/browser") {
-    next({ path: "/browser" });
+
+  if (token && to.path !== "/rate") {
+    next({ path: "/rate" });
     return;
   }
+  
   next();
 });
 

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/home/index.vue

@@ -1,18 +1,13 @@
 <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>
+    <div class="bg-white w-[952px] h-full rounded-[16px]">
+        454646
+      </div>
+  </Layout>
 </template>
 
 <script setup lang="ts">
+
 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/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

@@ -0,0 +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" name="Rate">
+import RateTitleSection from './components/RateTitleSection/index.vue'
+import RatePanelSection from './components/RatePanelSection/index.vue'
+import RateContentSection from './components/RateContentSection/index.vue'
+</script>
+

tsconfig.json

@@ -15,10 +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

@@ -16,8 +16,10 @@ 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"),
+      "@/types": resolve(__dirname, "./src/renderer/types"),
     },
   },
 });