init: 初始化: ⏳ init

.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

.editorconfig

@@ -0,0 +1,14 @@
+# http://editorconfig.org
+root = true
+
+[*] # 表示所有文件适用
+charset = utf-8 # 设置文件字符集为 utf-8
+end_of_line = lf # 控制换行类型(lf | cr | crlf)
+insert_final_newline = false # 始终在文件末尾插入一个新行
+indent_style = tab # 缩进风格（tab | space）
+indent_size = 2 # 缩进大小
+max_line_length = 130 # 最大行长度
+
+[*.md] # 表示仅 md 文件适用以下规则
+max_line_length = off # 关闭最大行长度限制
+trim_trailing_whitespace = false # 关闭末尾空格修剪

.env

@@ -0,0 +1,3 @@
+# 请求api地址：process.env.VUE_APP_URL
+VUE_APP_URL=http://localhost:8088/xxx
+VUE_APP_FLAG = 'prod'

.env.development

@@ -0,0 +1,3 @@
+# 请求api地址：process.env.VUE_APP_URL
+VUE_APP_URL=http://localhost:8088/xxx
+VUE_APP_FLAG = 'dev'

.env.test

@@ -0,0 +1,4 @@
+NODE_ENV = 'production'
+# 请求api地址：process.env.VUE_APP_URL
+VUE_APP_URL=http://localhost:8088/xxx
+VUE_APP_FLAG = 'test'

.eslintignore

@@ -0,0 +1,5 @@
+vue.config.js
+list
+.prettierrc.js
+.stylelintrc.js
+src/utils/request.js

.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+	root: true,
+	env: {
+		node: true,
+	},
+	extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended', 'plugin:prettier/recommended'],
+	parserOptions: {
+		ecmaVersion: 2020,
+	},
+	rules: {
+		'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+		'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+		'vue/multi-word-component-names': 'off',
+		'@typescript-eslint/no-explicit-any': 'off',
+	},
+};

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit $1

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint:lint-staged

.prettierignore

@@ -0,0 +1 @@
+list

.prettierrc.js

@@ -0,0 +1,39 @@
+// @see: https://www.prettier.cn
+
+module.exports = {
+	// 超过最大值换行
+	printWidth: 130,
+	// 缩进字节数
+	tabWidth: 1,
+	// 使用制表符而不是空格缩进行
+	useTabs: true,
+	// 结尾不用分号(true有，false没有)
+	semi: true,
+	// 使用单引号(true单引号，false双引号)
+	singleQuote: true,
+	// 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
+	quoteProps: 'as-needed',
+	// 在对象，数组括号与文字之间加空格 "{ foo: bar }"
+	bracketSpacing: true,
+	// 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
+	trailingComma: 'all',
+	// 在JSX中使用单引号而不是双引号
+	jsxSingleQuote: true,
+	//  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号 ,always：不省略括号
+	arrowParens: 'avoid',
+	// 如果文件顶部已经有一个 doclock，这个选项将新建一行注释，并打上@format标记。
+	insertPragma: false,
+	// 指定要使用的解析器，不需要写文件开头的 @prettier
+	requirePragma: false,
+	// 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
+	proseWrap: 'preserve',
+	// 在html中空格是否是敏感的 "css" - 遵守CSS显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
+	htmlWhitespaceSensitivity: 'css',
+	// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
+	endOfLine: 'auto',
+	// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
+	rangeStart: 0,
+	rangeEnd: Infinity,
+
+	vueIndentScriptAndStyle: false, // Vue文件脚本和样式标签缩进
+};

.stylelintignore

@@ -0,0 +1 @@
+build

.stylelintrc.js

@@ -0,0 +1,40 @@
+module.exports = {
+	extends: [
+		'stylelint-config-standard',
+		'stylelint-config-html/vue',
+		'stylelint-config-standard-scss',
+		'stylelint-config-recommended-vue/scss',
+		'stylelint-config-recess-order',
+		'stylelint-config-prettier',
+	],
+	overrides: [
+		{
+			files: ['**/*.{vue,html}'],
+			customSyntax: 'postcss-html',
+		},
+	],
+	rules: {
+		'value-keyword-case': null,
+		'no-descending-specificity': null,
+		'function-url-quotes': 'always',
+		'string-quotes': 'double',
+		'unit-case': null,
+		'color-hex-case': 'lower',
+		'color-hex-length': 'long',
+		'rule-empty-line-before': 'never',
+		'font-family-no-missing-generic-family-keyword': null,
+		'block-opening-brace-space-before': 'always',
+		'property-no-unknown': null,
+		'no-empty-source': null,
+		'declaration-block-trailing-semicolon': null,
+		'selector-class-pattern': null,
+		'scss/at-import-partial-extension': null,
+		'value-no-vendor-prefix': null,
+		'selector-pseudo-class-no-unknown': [
+			true,
+			{
+				ignorePseudoClasses: ['global', 'v-deep', 'deep'],
+			},
+		],
+	},
+};

README.md

@@ -0,0 +1,18 @@
+# vue-pinia 看板 rem 布局
+
+欢迎使用 bunny-cli。
+
+这个项目模板只涉及 rem，不涉及其它内容。
+
+## 注意事项
+
+### 打包成 apk
+
+1. 如果需要打包成 apk，要将路由改为 hash 路由
+2. 打包成 apk 将公共路径改为`./`
+3. 打包成 apk，需要考虑跨域，跨域由于打包时没有 NGINX 做代理，所以无法完成，只能后端做跨域，否则接口访问不到。
+4. 要设置 APPID，因为 HBuilderX 必须要获取。
+
+### docker 配置
+
+默认配置中已经集成了 NGINX 和 dockfile 文件，后面自动化部署等直接用即可

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+	presets: ['@vue/cli-plugin-babel/preset'],
+};

commitlint.config.js

@@ -0,0 +1,106 @@
+// @see: https://cz-git.qbenben.com/zh/guide
+/** @type {import('cz-git').UserConfig} */
+
+module.exports = {
+	ignores: [commit => commit === 'init'],
+	extends: ['@commitlint/config-conventional'],
+	rules: {
+		// @see: https://commitlint.js.org/#/reference-rules
+		'body-leading-blank': [2, 'always'],
+		'footer-leading-blank': [1, 'always'],
+		'header-max-length': [2, 'always', 108],
+		'subject-empty': [2, 'never'],
+		'type-empty': [2, 'never'],
+		'subject-case': [0],
+		'type-enum': [
+			2,
+			'always',
+			[
+				'init',
+				'feat',
+				'page',
+				'completepage',
+				'fix',
+				'fixbug',
+				'docs',
+				'style',
+				'refactor',
+				'perf',
+				'test',
+				'build',
+				'ci',
+				'chore',
+				'revert',
+				'wip',
+				'workflow',
+				'types',
+				'release',
+				'optimize',
+			],
+		],
+	},
+	prompt: {
+		messages: {
+			type: '选择你要提交的类型 :',
+			scope: '选择一个提交范围（可选）:',
+			customScope: '请输入自定义的提交范围 :',
+			subject: '填写简短精炼的变更描述 :\n',
+			body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
+			breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
+			footerPrefixsSelect: '选择关联issue前缀（可选）:',
+			customFooterPrefixs: '输入自定义issue前缀 :',
+			footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
+			confirmCommit: '是否提交或修改commit ?',
+		},
+		types: [
+			{ value: 'init: 初始化', name: '初始化:   ⏳  初始化项目', emoji: '⏳' },
+			{ value: 'optimize: 优化代码', name: '优化代码:   ♻️  优化项目代码', emoji: '♻️' },
+			{ value: 'feat: 新增功能', name: '新增:   🚀  新增功能', emoji: '🚀' },
+			{ value: 'page: 新增页面', name: '页面:   📄  新增页面', emoji: '📄' },
+			{ value: 'completepage: 完成页面', name: '完成页面:   🍻  完成页面', emoji: '🍻' },
+			{ value: 'fixbug: 修改bug', name: 'bug:   🐛  修改bug', emoji: '🐛' },
+			{ value: 'fix: 修复', name: '修复:   🧩  修复缺陷', emoji: '🧩' },
+			{ value: 'docs: 文档', name: '文档:   📚  文档变更', emoji: '📚' },
+			{ value: 'style: 格式', name: '格式:   🎨  代码格式（不影响功能，例如空格、分号等格式修正）', emoji: '🎨' },
+			{ value: 'refactor: 重构', name: '重构:   〽️  代码重构（不包括 bug 修复、功能新增）', emoji: '〽️' },
+			{ value: 'perf: 性能', name: '性能:   ⚡️  性能优化', emoji: '⚡️' },
+			{ value: 'test: 测试', name: '测试:   ✅  添加疏漏测试或已有测试改动', emoji: '✅' },
+			{
+				value: 'chore: 构建',
+				name: '构建:   📦️  构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）',
+				emoji: '📦️',
+			},
+			{ value: 'ci: 集成', name: '集成:   🎡  修改 CI 配置、脚本', emoji: '🎡' },
+			{ value: 'revert: 回退', name: '回退:   ⏪️  回滚 commit', emoji: '⏪️' },
+			{ value: 'build: 打包', name: '打包:   🔨  项目打包发布', emoji: '🔨' },
+		],
+		useEmoji: true,
+		themeColorCode: '',
+		scopes: [],
+		allowCustomScopes: true,
+		allowEmptyScopes: true,
+		customScopesAlign: 'bottom',
+		customScopesAlias: 'custom',
+		emptyScopesAlias: 'empty',
+		upperCaseSubject: false,
+		allowBreakingChanges: ['feat', 'fix'],
+		breaklineNumber: 100,
+		breaklineChar: '|',
+		skipQuestions: [],
+		issuePrefixs: [{ value: 'closed', name: 'closed:   ISSUES has been processed' }],
+		customIssuePrefixsAlign: 'top',
+		emptyIssuePrefixsAlias: 'skip',
+		customIssuePrefixsAlias: 'custom',
+		allowCustomIssuePrefixs: true,
+		allowEmptyIssuePrefixs: true,
+		confirmColorize: true,
+		maxHeaderLength: Infinity,
+		maxSubjectLength: Infinity,
+		minSubjectLength: 0,
+		scopeOverrides: undefined,
+		defaultBody: '',
+		defaultIssues: '',
+		defaultScope: '',
+		defaultSubject: '',
+	},
+};

docker/dockerfile

@@ -0,0 +1,23 @@
+# 使用官方的 Nginx 镜像作为基础镜像
+FROM nginx
+
+# 删除默认的 Nginx 配置文件
+RUN rm /etc/nginx/conf.d/default.conf
+
+# 将自定义的 Nginx 配置文件复制到容器中
+COPY nginx.conf /etc/nginx/conf.d/
+
+# 创建一个目录来存放前端项目文件
+WORKDIR /usr/share/nginx/html
+
+# 将前端项目打包文件复制到 Nginx 的默认静态文件目录
+COPY dist/ /usr/share/nginx/html
+# 复制到nginx目录下
+COPY dist/ /etc/nginx/html
+
+# 暴露 Nginx 的默认端口
+EXPOSE 80
+
+# 自动启动 Nginx
+CMD ["nginx", "-g", "daemon off;"]
+

docker/nginx.conf

@@ -0,0 +1,22 @@
+server {
+    listen       80;
+    listen       [::]:80;
+    server_name  localhost;
+
+    location / {
+        root   /etc/nginx/html;
+        index  index.html index.htm;
+        try_files $uri /index.html;
+    }
+
+		# 后端跨域请求
+    location ~/api/ {
+        proxy_pass http://192.168.3.98:1001;
+    }
+
+    error_page  404              404.html;
+
+    location = /50x.html {
+        root   html;
+    }
+}

lint-staged.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+	'*.{js,jsx,ts,tsx,vue}': ['eslint --fix', 'prettier --write'],
+	'{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'],
+	'package.json': ['prettier --write'],
+	'*.{scss,less,styl,html,vue}': ['prettier --write'],
+	'*.md': ['prettier --write'],
+};

package.json

@@ -0,0 +1,76 @@
+{
+	"name": "vue_ts_pina",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"serve": "vue-cli-service serve",
+		"build": "vue-cli-service build",
+		"testbuild": "vue-cli-service build --mode test",
+		"lint": "vue-cli-service lint",
+		"lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
+		"lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
+		"lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
+		"lint:lint-staged": "lint-staged",
+		"prepare": "husky install",
+		"release": "standard-version",
+		"commit": "git status && git add -A && git-cz"
+	},
+	"dependencies": {
+		"axios": "^1.6.2",
+		"core-js": "^3.8.3",
+		"dayjs": "^1.11.10",
+		"echarts": "^5.5.0",
+		"loadsh": "^0.0.4",
+		"pinia": "^2.1.7",
+		"postcss-pxtorem": "^6.1.0",
+		"stylelint-config-recess-order": "^4.6.0",
+		"stylelint-config-recommended-vue": "^1.5.0",
+		"stylelint-config-standard": "^36.0.0",
+		"stylelint-config-standard-scss": "^13.0.0",
+		"uuid": "^9.0.1",
+		"vue": "^3.2.13",
+		"vue-cookies": "^1.8.3",
+		"vue-echarts": "^6.6.9",
+		"vue-lazyload": "^3.0.0",
+		"vue-router": "^4.0.3",
+		"vue3-scale-box": "^0.1.9",
+		"webpackbar": "^6.0.0"
+	},
+	"devDependencies": {
+		"@commitlint/cli": "^18.4.3",
+		"@commitlint/config-conventional": "^18.4.3",
+		"@typescript-eslint/eslint-plugin": "^5.4.0",
+		"@typescript-eslint/parser": "^5.4.0",
+		"@vue/cli-plugin-babel": "~5.0.0",
+		"@vue/cli-plugin-eslint": "~5.0.0",
+		"@vue/cli-plugin-router": "~5.0.0",
+		"@vue/cli-plugin-typescript": "~5.0.0",
+		"@vue/cli-service": "~5.0.0",
+		"@vue/eslint-config-typescript": "^9.1.0",
+		"commitizen": "^4.3.0",
+		"cz-git": "^1.8.0",
+		"eslint": "^7.32.0",
+		"eslint-config-prettier": "^8.3.0",
+		"eslint-plugin-prettier": "^4.0.0",
+		"eslint-plugin-vue": "^8.0.3",
+		"husky": "^8.0.3",
+		"lint-staged": "^11.2.6",
+		"postcss": "^8.4.32",
+		"postcss-html": "^1.5.0",
+		"prettier": "^2.4.1",
+		"sass": "^1.71.0",
+		"sass-loader": "^12.0.0",
+		"stylelint": "^14.16.1",
+		"stylelint-config-html": "^1.1.0",
+		"stylelint-config-prettier": "^9.0.5",
+		"typescript": "~4.5.5"
+	},
+	"gitHooks": {
+		"pre-commit": "lint-staged"
+	},
+	"config": {
+		"commitizen": {
+			"path": "node_modules/cz-git"
+		}
+	}
+}

postcss.config.js

@@ -0,0 +1,6 @@
+const autoprefixer = require('autoprefixer');
+const px2rem = require('postcss-pxtorem');
+
+module.exports = {
+	plugins: [autoprefixer(), px2rem({ rootValue: 80, unitPrecision: 5, propList: ['*'] })],
+};

public/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="">
+	<head>
+		<meta charset="utf-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
+		<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+		<title><%= htmlWebpackPlugin.options.title %></title>
+	</head>
+
+	<body>
+		<noscript>
+			<strong
+				>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to
+				continue.</strong
+			>
+		</noscript>
+		<div id="app"></div>
+		<!-- built files will be auto injected -->
+	</body>
+</html>

src/App.vue

@@ -0,0 +1,28 @@
+<template>
+	<ScaleBox :width="1920" :height="1080">
+		<router-view />
+	</ScaleBox>
+</template>
+<script lang="ts" setup>
+import ScaleBox from 'vue3-scale-box';
+
+const debounce = (callback: (...args: any[]) => void, delay: number) => {
+	let tid: any;
+	return function (...args: any[]) {
+		const ctx = self;
+		tid && clearTimeout(tid);
+		tid = setTimeout(() => {
+			callback.apply(ctx, args);
+		}, delay);
+	};
+};
+
+const _ = (window as any).ResizeObserver;
+(window as any).ResizeObserver = class ResizeObserver extends _ {
+	constructor(callback: (...args: any[]) => void) {
+		callback = debounce(callback, 20);
+		super(callback);
+	}
+};
+</script>
+<style lang="scss"></style>

src/api/test.ts

@@ -0,0 +1,8 @@
+import Request from '@/utils/request';
+
+export const reqGetLoadBoard = () => {
+	return Request({
+		url: '/board/loadBoard',
+		method: 'GET',
+	});
+};

src/assets/css/reset.css

@@ -0,0 +1,92 @@
+/* 选中文字颜色 */
+*::selection {
+	color: #1f1f1f;
+	background: #b3d4fc;
+}
+
+/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/
+::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+	background-color: #f5f5f5;
+}
+/*定义滚动条轨道内阴影+圆角*/
+::-webkit-scrollbar-track {
+	-webkit-box-shadow: inset 0 0 6px #ccc;
+	border-radius: 5px;
+	background-color: #f5f5f5;
+}
+/*定义滑块内阴影+圆角*/
+::-webkit-scrollbar-thumb {
+	border-radius: 5px;
+	-webkit-box-shadow: inset 0 0 6px #ccc;
+	background-color: #ccc;
+}
+
+html,body{width: 100%;height:100%;}
+html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
+header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
+table{border-collapse:collapse;border-spacing:0;}
+caption,th{text-align:left;font-weight:normal;}
+html,body,fieldset,img,iframe,abbr{border:0;}
+i,cite,em,var,address,dfn{font-style:normal;}
+[hidefocus],summary{outline:0;}
+li{list-style:none;}
+h1,h2,h3,h4,h5,h6,small{font-size:100%;}
+sup,sub{font-size:83%;}
+pre,code,kbd,samp{font-family:inherit;}
+q:before,q:after{content:none;}
+textarea{overflow:auto;resize:none;}
+label,summary{cursor:default;}
+a,button{cursor:pointer;}
+h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
+del,ins,u,s,a,a:hover{text-decoration:none;}
+body,textarea,input,button,select,keygen,legend{font: Microsoft YaHei,arial,\5b8b\4f53;color:#333;outline:0;}
+body{background:#fff;}
+a,a:hover{color:#333;}
+*{box-sizing: border-box;}
+
+/* 去除input默认填充的背景颜色 */
+input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0px 1000px white inset;
+}
+
+/* 清除input[type=number]的默认样式 */
+input[type=number] {
+	-moz-appearance:textfield;
+}
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
+/* 清除移动端 a 标签等点击区域变色 */
+*{
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+}
+
+/* 清除移动端 input 样式 */
+input{
+	border: none;
+	-moz-appearance:none;
+	-webkit-appearance : none ; /*解决ios上按钮的圆角问题*/
+	border-radius: 0; /*解决ios上输入框圆角问题*/
+	outline:medium; /*去掉鼠标点击的默认黄色边框*/
+	background-color: transparent;
+}
+
+/* 避免ios滑动滚动条卡顿 */
+*{
+  -webkit-overflow-scrolling : touch
+}
+
+
+body {
+	position: relative;
+	width: 1920px;
+	height: 1080px;
+	box-sizing: border-box;
+
+	transform-origin: left top;
+}

src/component/table/table-plus.vue

@@ -0,0 +1,29 @@
+<template>
+	<el-table :data="tableData" size="large" v-bind="$attrs">
+		<el-table-column v-for="item in column" :key="item.prop" v-bind="item">
+			<template v-if="$slots[item.prop]" #default="scope">
+				<slot :name="item.prop" v-bind="scope"></slot>
+			</template>
+		</el-table-column>
+	</el-table>
+</template>
+
+<script lang="ts" setup>
+import { defineProps } from 'vue';
+
+interface TableData {
+	[propName: string]: any;
+}
+
+interface Column {
+	prop: string;
+	label: string;
+
+	[propName: string]: any;
+}
+
+defineProps<{
+	tableData: TableData[];
+	column: Column[];
+}>();
+</script>

src/component/table/table.vue

@@ -0,0 +1,90 @@
+<template>
+	<div ref="refContainer" class="table-container">
+		<table ref="refTable">
+			<thead>
+				<tr>
+					<th scope="col">序号</th>
+					<th scope="col">工厂</th>
+					<th scope="col">产量</th>
+					<th scope="col">库存</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="(item, index) in data" :key="index">
+					<td>{{ index + 1 }}</td>
+					<td>{{ item.name }}</td>
+					<td>{{ item.hobby }}</td>
+					<td>{{ item.address }}</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+const data = new Array(100).fill(0).map(() => ({ name: '工厂1', date: '711', hobby: '133', address: '0.333' }));
+const refContainer = ref<HTMLTableElement | null>(null);
+const refTable = ref<HTMLTableElement | null>(null);
+const scrollSpeed = ref(1); // 滚动速度，可以根据需要调整
+const scrollInterval = 16; // 滚动间隔，单位为毫秒
+
+const scrollTable = () => {
+	if (refTable.value != null && refContainer.value != null) {
+		refContainer.value.scrollTop += scrollSpeed.value;
+		if (
+			refContainer.value.scrollTop + 1 >= refTable.value.clientHeight - refContainer.value.clientHeight ||
+			refContainer.value.scrollTop <= 0
+		) {
+			scrollSpeed.value = -scrollSpeed.value;
+		}
+	}
+};
+
+onMounted(() => {
+	// 开始滚动
+	setInterval(scrollTable, scrollInterval);
+});
+</script>
+
+<style lang="scss" scoped>
+.table-container {
+	position: relative;
+	width: 100%;
+	height: calc(100vh - 810px);
+	margin: 15px 0 0 0;
+	overflow: hidden;
+
+	table {
+		width: 100%;
+		height: 100%;
+		font-size: 15px;
+		color: #fff;
+	}
+
+	thead {
+		position: sticky;
+		top: 0;
+		background-color: #002134;
+		z-index: 999;
+
+		th {
+			height: 30px;
+			text-align: center;
+		}
+	}
+
+	tbody {
+		td,
+		th {
+			height: 30px;
+			text-align: center;
+		}
+
+		tr:nth-child(2n) {
+			background-color: #001a27;
+		}
+	}
+}
+</style>

src/main.ts

@@ -0,0 +1,13 @@
+import 'echarts';
+import { createPinia } from 'pinia';
+import { createApp } from 'vue';
+import ECharts from 'vue-echarts';
+import App from './App.vue';
+import './assets/css/index.scss';
+import './assets/css/reset.css';
+import router from './router';
+
+const app = createApp(App);
+app.component('VChart', ECharts);
+
+app.use(router).use(createPinia()).mount('#app');

src/router/index.ts

@@ -0,0 +1,21 @@
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
+
+const routes: Array<RouteRecordRaw> = [
+	{
+		path: '/',
+		name: 'layout',
+		component: () => import(/* webpackChunkName: "layout" */ '@/views/layout.vue'),
+	},
+];
+
+/**
+ * 如果需要打包成app，则要将路由改为Hash路由，createWebHashHistory
+ * 如果不需要 createWebHistory
+ */
+const router = createRouter({
+	history:
+		process.env.NODE_ENV === 'production' ? createWebHashHistory(process.env.BASE_URL) : createWebHashHistory(process.env.BASE_URL),
+	routes,
+});
+
+export default router;

src/shims-vue.d.ts

@@ -0,0 +1,7 @@
+/* eslint-disable */
+declare module '*.vue' {
+	import type { DefineComponent } from 'vue';
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
+}
+declare module 'vue3-scale-box';

src/store/test.ts

@@ -0,0 +1,11 @@
+import { defineStore } from 'pinia';
+
+export const testStore = defineStore('testStore', {
+	state: () => {
+		return {
+			count: 0,
+		};
+	},
+	getters: {},
+	actions: {},
+});

src/utils/request.ts

@@ -0,0 +1,23 @@
+import axios from 'axios';
+
+const request = axios.create({
+	baseURL: '/api',
+	timeout: 10000,
+});
+
+// 请求拦截器
+request.interceptors.request.use(config => {
+	return config;
+});
+
+// 响应拦截器
+request.interceptors.response.use(
+	response => {
+		return response.data;
+	},
+	error => {
+		return Promise.reject(new Error('网络错误'));
+	},
+);
+
+export default request;

src/views/layout.vue

@@ -0,0 +1,89 @@
+<template>
+	<h1>成功</h1>
+	<div class="box"></div>
+	<div class="charts">
+		<ECharts :option="option" autoresize theme="dark" />
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue';
+import ECharts from 'vue-echarts';
+const option = reactive({
+	title: {
+		text: 'Rainfall vs Evaporation',
+		subtext: 'Fake Data',
+	},
+	tooltip: {
+		trigger: 'axis',
+	},
+	legend: {
+		data: ['Rainfall', 'Evaporation'],
+	},
+	toolbox: {
+		show: true,
+		feature: {
+			dataView: { show: true, readOnly: false },
+			magicType: { show: true, type: ['line', 'bar'] },
+			restore: { show: true },
+			saveAsImage: { show: true },
+		},
+	},
+	calculable: true,
+	xAxis: [
+		{
+			type: 'category',
+			// prettier-ignore
+			data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+		},
+	],
+	yAxis: [
+		{
+			type: 'value',
+		},
+	],
+	series: [
+		{
+			name: 'Rainfall',
+			type: 'bar',
+			data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
+			markPoint: {
+				data: [
+					{ type: 'max', name: 'Max' },
+					{ type: 'min', name: 'Min' },
+				],
+			},
+			markLine: {
+				data: [{ type: 'average', name: 'Avg' }],
+			},
+		},
+		{
+			name: 'Evaporation',
+			type: 'bar',
+			data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
+			markPoint: {
+				data: [
+					{ name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
+					{ name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 },
+				],
+			},
+			markLine: {
+				data: [{ type: 'average', name: 'Avg' }],
+			},
+		},
+	],
+});
+</script>
+<style scoped lang="scss">
+.box {
+	width: 100px;
+	height: 100px;
+	background-color: #e54;
+}
+
+.charts {
+	margin: 0 auto;
+	width: 800px;
+	height: 500px;
+}
+</style>

tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

vue.config.js

@@ -0,0 +1,37 @@
+const { defineConfig } = require('@vue/cli-service');
+const WebpackBar = require('webpackbar');
+module.exports = defineConfig({
+	transpileDependencies: true,
+	productionSourceMap: false, // 不生成map文件-优化打包
+	// 生产环境，开启js\css压缩--- 打包优化
+	chainWebpack: config => {
+		if (process.env.NODE_ENV === 'production') {
+			config.plugin('compressionPlugin').use(
+				new CompressionPlugin({
+					test: /\.(js|css|less|map)$/, // 匹配文件名
+					threshold: 1024, // 对超过10k的数据压缩
+					minRatio: 0.8,
+				}),
+			);
+		}
+	},
+	// 代理设置
+	devServer: {
+		port: 6367,
+		open: true,
+		https: false,
+		proxy: {
+			'/api': {
+				target: process.env.VUE_APP_URL,
+				changeOrigin: true,
+			},
+		},
+	},
+	configureWebpack: {
+		plugins: [
+			// 设置进度条颜色
+			new WebpackBar({ color: '#F6DCE0', profile: true }),
+		],
+	},
+	publicPath: process.env.NODE_ENV === 'production' ? './' : './',
+});