From 812a642aaa42ad63ac649a48b2eb030cced81b07 Mon Sep 17 00:00:00 2001 From: lanyuanxiaoyao Date: Wed, 11 Dec 2024 15:32:20 +0800 Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E4=B8=BAtypescript=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- package.json | 2 + pnpm-lock.yaml | 50 ++++-- src/App.vue | 11 +- src/components/ProjectList.vue | 276 +++++++++++++++++++------------ src/components/VirtualList.vue | 253 +++++++++++++++------------- src/env.d.ts | 7 + src/main.js | 4 - src/main.ts | 6 + src/types/index.ts | 53 ++++++ tsconfig.json | 37 +++++ tsconfig.node.json | 14 ++ vite.config.js => vite.config.ts | 7 +- 13 files changed, 477 insertions(+), 245 deletions(-) create mode 100644 src/env.d.ts delete mode 100644 src/main.js create mode 100644 src/main.ts create mode 100644 src/types/index.ts create mode 100644 tsconfig.json create mode 100644 tsconfig.node.json rename vite.config.js => vite.config.ts (54%) diff --git a/index.html b/index.html index 4095a00..3ee6049 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,6 @@
- + diff --git a/package.json b/package.json index da1da2a..ccb1793 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,8 @@ }, "devDependencies": { "@vitejs/plugin-vue": "^5.2.1", + "@types/node": "^22.10.1", + "typescript": "^5.0.2", "vite": "^6.0.1" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 57ab271..ba353b2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10,14 +10,20 @@ importers: dependencies: vue: specifier: ^3.5.13 - version: 3.5.13 + version: 3.5.13(typescript@5.7.2) devDependencies: + '@types/node': + specifier: ^22.10.1 + version: 22.10.1 '@vitejs/plugin-vue': specifier: ^5.2.1 - version: 5.2.1(vite@6.0.3)(vue@3.5.13) + version: 5.2.1(vite@6.0.3(@types/node@22.10.1))(vue@3.5.13(typescript@5.7.2)) + typescript: + specifier: ^5.0.2 + version: 5.7.2 vite: specifier: ^6.0.1 - version: 6.0.3 + version: 6.0.3(@types/node@22.10.1) packages: @@ -283,6 +289,9 @@ packages: '@types/estree@1.0.6': resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==, tarball: https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz} + '@types/node@22.10.1': + resolution: {integrity: sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==, tarball: https://registry.npmjs.org/@types/node/-/node-22.10.1.tgz} + '@vitejs/plugin-vue@5.2.1': resolution: {integrity: sha512-cxh314tzaWwOLqVes2gnnCtvBDcM1UMdn+iFR+UjAn411dPT3tOmqrJjbMd7koZpMAmBM/GqeV4n9ge7JSiJJQ==, tarball: https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.1.tgz} engines: {node: ^18.0.0 || >=20.0.0} @@ -363,6 +372,14 @@ packages: resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==, tarball: https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz} engines: {node: '>=0.10.0'} + typescript@5.7.2: + resolution: {integrity: sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==, tarball: https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz} + engines: {node: '>=14.17'} + hasBin: true + + undici-types@6.20.0: + resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==, tarball: https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz} + vite@6.0.3: resolution: {integrity: sha512-Cmuo5P0ENTN6HxLSo6IHsjCLn/81Vgrp81oaiFFMRa8gGDj5xEjIcEpf2ZymZtZR8oU0P2JX5WuUp/rlXcHkAw==, tarball: https://registry.npmjs.org/vite/-/vite-6.0.3.tgz} engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} @@ -559,10 +576,14 @@ snapshots: '@types/estree@1.0.6': {} - '@vitejs/plugin-vue@5.2.1(vite@6.0.3)(vue@3.5.13)': + '@types/node@22.10.1': dependencies: - vite: 6.0.3 - vue: 3.5.13 + undici-types: 6.20.0 + + '@vitejs/plugin-vue@5.2.1(vite@6.0.3(@types/node@22.10.1))(vue@3.5.13(typescript@5.7.2))': + dependencies: + vite: 6.0.3(@types/node@22.10.1) + vue: 3.5.13(typescript@5.7.2) '@vue/compiler-core@3.5.13': dependencies: @@ -610,11 +631,11 @@ snapshots: '@vue/shared': 3.5.13 csstype: 3.1.3 - '@vue/server-renderer@3.5.13(vue@3.5.13)': + '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.7.2))': dependencies: '@vue/compiler-ssr': 3.5.13 '@vue/shared': 3.5.13 - vue: 3.5.13 + vue: 3.5.13(typescript@5.7.2) '@vue/shared@3.5.13': {} @@ -695,18 +716,25 @@ snapshots: source-map-js@1.2.1: {} - vite@6.0.3: + typescript@5.7.2: {} + + undici-types@6.20.0: {} + + vite@6.0.3(@types/node@22.10.1): dependencies: esbuild: 0.24.0 postcss: 8.4.49 rollup: 4.28.1 optionalDependencies: + '@types/node': 22.10.1 fsevents: 2.3.3 - vue@3.5.13: + vue@3.5.13(typescript@5.7.2): dependencies: '@vue/compiler-dom': 3.5.13 '@vue/compiler-sfc': 3.5.13 '@vue/runtime-dom': 3.5.13 - '@vue/server-renderer': 3.5.13(vue@3.5.13) + '@vue/server-renderer': 3.5.13(vue@3.5.13(typescript@5.7.2)) '@vue/shared': 3.5.13 + optionalDependencies: + typescript: 5.7.2 diff --git a/src/App.vue b/src/App.vue index 1e2fd61..5361128 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,8 +1,9 @@ - diff --git a/src/components/ProjectList.vue b/src/components/ProjectList.vue index c18d648..54ae956 100644 --- a/src/components/ProjectList.vue +++ b/src/components/ProjectList.vue @@ -1,89 +1,86 @@ - \ No newline at end of file diff --git a/src/components/VirtualList.vue b/src/components/VirtualList.vue index 94a3bbd..ef55f04 100644 --- a/src/components/VirtualList.vue +++ b/src/components/VirtualList.vue @@ -1,63 +1,45 @@ - \ No newline at end of file diff --git a/src/env.d.ts b/src/env.d.ts new file mode 100644 index 0000000..9608656 --- /dev/null +++ b/src/env.d.ts @@ -0,0 +1,7 @@ +/// + +declare module '*.vue' { + import type { DefineComponent } from 'vue' + const component: DefineComponent<{}, {}, any> + export default component +} \ No newline at end of file diff --git a/src/main.js b/src/main.js deleted file mode 100644 index 01433bc..0000000 --- a/src/main.js +++ /dev/null @@ -1,4 +0,0 @@ -import { createApp } from 'vue' -import App from './App.vue' - -createApp(App).mount('#app') diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..526db72 --- /dev/null +++ b/src/main.ts @@ -0,0 +1,6 @@ +import { createApp } from 'vue' +import type { App as AppType } from 'vue' +import App from './App.vue' + +const app: AppType = createApp(App) +app.mount('#app') diff --git a/src/types/index.ts b/src/types/index.ts new file mode 100644 index 0000000..8bc9e87 --- /dev/null +++ b/src/types/index.ts @@ -0,0 +1,53 @@ +/** + * 标签信息接口 + */ +export interface Tag { + /** 标签唯一标识 */ + id: number + /** 标签名称 */ + name: string + /** 标签颜色（十六进制颜色值） */ + color: string +} + +/** + * 列表项数据接口 + */ +export interface ListItem { + /** 项目唯一标识 */ + id: number + /** 项目名称 */ + name: string + /** 项目路径 */ + path: string + /** 项目标签列表 */ + tags?: Tag[] + /** 在虚拟列表中的索引位置 */ + index?: number +} + +/** + * 菜单项接口 + */ +export interface MenuItem { + /** 菜单项唯一标识 */ + id: string + /** 菜单项显示文本 */ + label: string + /** 菜单项点击处理函数，接收当前选中的列表项作为参数 */ + action: (item: ListItem | null) => void +} + +/** + * 虚拟列表配置接口 + */ +export interface ListConfig { + /** 列表项基础高度（像素） */ + itemHeight: number + /** 列表项内边距总和（像素） */ + itemPadding: number + /** 上下缓冲区域的项目数量 */ + bufferCount: number + /** 滚动防抖时间（毫秒） */ + scrollDebounceTime: number +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..9cc810a --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,37 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "module": "ESNext", + "moduleResolution": "Node", + "strict": true, + "jsx": "preserve", + "sourceMap": true, + "resolveJsonModule": true, + "isolatedModules": true, + "esModuleInterop": true, + "lib": [ + "ESNext", + "DOM" + ], + "skipLibCheck": true, + "noEmit": true, + "baseUrl": ".", + "paths": { + "@/*": [ + "src/*" + ] + } + }, + "include": [ + "src/**/*.ts", + "src/**/*.d.ts", + "src/**/*.tsx", + "src/**/*.vue" + ], + "references": [ + { + "path": "./tsconfig.node.json" + } + ] +} \ No newline at end of file diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..f821541 --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Node", + "allowSyntheticDefaultImports": true, + "lib": [ + "ES2020" + ] + }, + "include": [ + "vite.config.ts" + ] +} \ No newline at end of file diff --git a/vite.config.js b/vite.config.ts similarity index 54% rename from vite.config.js rename to vite.config.ts index bbcf80c..176cf75 100644 --- a/vite.config.js +++ b/vite.config.ts @@ -1,7 +1,12 @@ import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' +import path from 'path' -// https://vite.dev/config/ export default defineConfig({ plugins: [vue()], + resolve: { + alias: { + '@': path.resolve(__dirname, './src'), + }, + }, })