🎉 init: 更新项目依赖

package.json

@@ -13,7 +13,12 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "echarts": "^5.5.0",
+    "mockjs": "^1.1.0",
     "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
+    "tdesign-vue-next": "^1.9.4",
+    "vite-plugin-mock": "^3.0.2",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
   },
@@ -28,6 +33,8 @@
     "@vue/tsconfig": "^0.5.1",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.23.0",
+    "less": "^4.2.0",
+    "less-loader": "^12.2.0",
     "npm-run-all2": "^6.1.2",
     "prettier": "^3.2.5",
     "typescript": "~5.4.0",

src/main.ts

@@ -1,14 +1,19 @@
-import './assets/main.css'
+import "./style/index.css";
 
-import { createApp } from 'vue'
+import { createApp } from "vue";
-import { createPinia } from 'pinia'
+import { createPinia } from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+import TDesign from "tdesign-vue-next";
 
-import App from './App.vue'
+import App from "./App.vue";
-import router from './router'
+import router from "./router";
 
-const app = createApp(App)
+const app = createApp(App);
 
-app.use(createPinia())
+const pinia = createPinia();
-app.use(router)
+pinia.use(piniaPluginPersistedstate);
+app.use(pinia);
+app.use(router);
+app.use(TDesign);
 
-app.mount('#app')
+app.mount("#app");

src/stores/counter.ts

@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})

src/stores/index.ts

@@ -0,0 +1,9 @@
+import { createPinia } from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+
+const store = createPinia();
+store.use(piniaPluginPersistedstate);
+
+export { store };
+
+export default store;

src/style/index.css

@@ -0,0 +1,211 @@
+/**
+ * ENGINE
+ * v0.2 | 20150615
+ * License: none (public domain)
+ */
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+  outline: none;
+}
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  font: inherit;
+  font-size: 100%;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+  border: 0;
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+q:before,
+blockquote:after,
+q:after {
+  content: '';
+  content: none;
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+input,
+textarea,
+button {
+  font-family: inhert;
+  font-size: inherit;
+  color: inherit;
+}
+select {
+  text-indent: 0.01px;
+  text-overflow: '';
+  border: 0;
+  border-radius: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+select::-ms-expand {
+  display: none;
+}
+code,
+pre {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+::-webkit-scrollbar {
+  width: 10px;
+}
+::-webkit-scrollbar-track {
+  width: 10px;
+  border-radius: 10px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: #e5e5e5;
+}
+.t-default-menu__inner .t-menu--scroll {
+  background-image: linear-gradient(#fff, rgba(146, 146, 255, 0.2));
+}
+.back-color {
+  background-color: #f5f7fb;
+  padding: 16px 24px;
+  height: calc(96vh - 64px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+a,
+a:link,
+a:visited,
+a:hover,
+a:active {
+  text-decoration: none;
+}
+.t-button--variant-text .t-button__text {
+  color: #0052d9;
+}
+.t-button--variant-text .t-button__text:hover {
+  color: #8799a3;
+}
+.t-is-disabled .t-button__text {
+  color: #d3d3d3 !important;
+}
+.form-item-width {
+  width: 100%;
+}

src/style/index.less

@@ -0,0 +1,60 @@
+// 引入清除模式样式
+@import './reset.less';
+@import './variables.less';
+
+// 滚动条外观样式
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-track {
+    width: 10px;
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: @base-scrollbar-color;
+}
+
+.t-default-menu__inner .t-menu--scroll {
+    background-image: linear-gradient(#fff, rgba(146, 146, 255, 0.2));
+}
+
+// 主体背景颜色以及大小
+.back-color {
+    background-color: #f5f7fb;
+    padding: 16px 24px;
+    height: calc(96vh - 64px);
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+// 去除a标签默认样式
+a,
+a:link,
+a:visited,
+a:hover,
+a:active {
+    text-decoration: none;
+}
+
+// 改变文字按钮的颜色
+.t-button--variant-text .t-button__text {
+    color: @base-text-color;
+}
+
+// 改变文字按钮移入的颜色
+.t-button--variant-text .t-button__text:hover {
+    color: #8799a3;
+}
+// 禁用的颜色
+ .t-is-disabled .t-button__text{
+    color: #d3d3d3 !important;
+}
+
+// 查询框宽度
+.form-item-width {
+    width: 100%;
+}

src/style/reset.css

@@ -0,0 +1,170 @@
+/**
+ * ENGINE
+ * v0.2 | 20150615
+ * License: none (public domain)
+ */
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+  outline: none;
+}
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  font: inherit;
+  font-size: 100%;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+  border: 0;
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+q:before,
+blockquote:after,
+q:after {
+  content: '';
+  content: none;
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+input,
+textarea,
+button {
+  font-family: inhert;
+  font-size: inherit;
+  color: inherit;
+}
+select {
+  text-indent: 0.01px;
+  text-overflow: '';
+  border: 0;
+  border-radius: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+select::-ms-expand {
+  display: none;
+}
+code,
+pre {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}

src/style/reset.less

@@ -0,0 +1,188 @@
+/**
+ * ENGINE
+ * v0.2 | 20150615
+ * License: none (public domain)
+ */
+
+ *,
+ *:after,
+ *:before {
+     box-sizing: border-box;
+ 
+     outline: none;
+ }
+ 
+ html,
+ body,
+ div,
+ span,
+ applet,
+ object,
+ iframe,
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ p,
+ blockquote,
+ pre,
+ a,
+ abbr,
+ acronym,
+ address,
+ big,
+ cite,
+ code,
+ del,
+ dfn,
+ em,
+ img,
+ ins,
+ kbd,
+ q,
+ s,
+ samp,
+ small,
+ strike,
+ strong,
+ sub,
+ sup,
+ tt,
+ var,
+ b,
+ u,
+ i,
+ center,
+ dl,
+ dt,
+ dd,
+ ol,
+ ul,
+ li,
+ fieldset,
+ form,
+ label,
+ legend,
+ table,
+ caption,
+ tbody,
+ tfoot,
+ thead,
+ tr,
+ th,
+ td,
+ article,
+ aside,
+ canvas,
+ details,
+ embed,
+ figure,
+ figcaption,
+ footer,
+ header,
+ hgroup,
+ menu,
+ nav,
+ output,
+ ruby,
+ section,
+ summary,
+ time,
+ mark,
+ audio,
+ video {
+     font: inherit;
+     font-size: 100%;
+ 
+     margin: 0;
+     padding: 0;
+ 
+     vertical-align: baseline;
+ 
+     border: 0;
+ }
+ 
+ article,
+ aside,
+ details,
+ figcaption,
+ figure,
+ footer,
+ header,
+ hgroup,
+ menu,
+ nav,
+ section {
+     display: block;
+ }
+ 
+ body {
+     line-height: 1;
+ }
+ 
+ ol,
+ ul {
+     list-style: none;
+ }
+ 
+ blockquote,
+ q {
+     quotes: none;
+     &:before,
+     &:after {
+         content: '';
+         content: none;
+     }
+ }
+ 
+ sub,
+ sup {
+     font-size: 75%;
+     line-height: 0;
+ 
+     position: relative;
+ 
+     vertical-align: baseline;
+ }
+ sup {
+     top: -.5em;
+ }
+ sub {
+     bottom: -.25em;
+ }
+ 
+ table {
+     border-spacing: 0;
+     border-collapse: collapse;
+ }
+ 
+ input,
+ textarea,
+ button {
+     font-family: inhert;
+     font-size: inherit;
+ 
+     color: inherit;
+ }
+ 
+ select {
+     text-indent: .01px;
+     text-overflow: '';
+ 
+     border: 0;
+     border-radius: 0;
+ 
+     -webkit-appearance: none;
+        -moz-appearance: none;
+ }
+ select::-ms-expand {
+     display: none;
+ }
+ 
+ code,
+ pre {
+     font-family: monospace, monospace;
+     font-size: 1em;
+ }

src/style/variables.less

@@ -0,0 +1,14 @@
+// 设置less全局变量
+
+// 左侧的菜单的宽度
+@base-menu-width: 260px;
+// 左侧菜单的背景颜色
+@base-menu-background: rgb(229, 229, 229);
+// 顶部导航高度b
+@base-tabbar-height: 50px;
+// 公用颜色
+@base-white-color: #fff;
+// text按钮的颜色
+@base-text-color: #0052d9;
+// 滚动条的颜色
+@base-scrollbar-color: rgb(229, 229, 229);