From b1145b89e70287bf77383a325f0890be593be166 Mon Sep 17 00:00:00 2001 From: ycy <2861518472@qq.com> Date: Mon, 22 Apr 2024 10:42:37 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=20init:=20=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E4=BE=9D=E8=B5=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 7 ++ src/main.ts | 23 +++-- src/stores/counter.ts | 12 --- src/stores/index.ts | 9 ++ src/style/index.css | 211 +++++++++++++++++++++++++++++++++++++++ src/style/index.less | 60 +++++++++++ src/style/reset.css | 170 +++++++++++++++++++++++++++++++ src/style/reset.less | 188 ++++++++++++++++++++++++++++++++++ src/style/variables.css | 0 src/style/variables.less | 14 +++ 10 files changed, 673 insertions(+), 21 deletions(-) delete mode 100644 src/stores/counter.ts create mode 100644 src/stores/index.ts create mode 100644 src/style/index.css create mode 100644 src/style/index.less create mode 100644 src/style/reset.css create mode 100644 src/style/reset.less create mode 100644 src/style/variables.css create mode 100644 src/style/variables.less diff --git a/package.json b/package.json index a6dc853..1c89e0c 100644 --- a/package.json +++ b/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", diff --git a/src/main.ts b/src/main.ts index 5dcad83..90cd15a 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,14 +1,19 @@ -import './assets/main.css' +import "./style/index.css"; -import { createApp } from 'vue' -import { createPinia } from 'pinia' +import { createApp } from "vue"; +import { createPinia } from "pinia"; +import piniaPluginPersistedstate from "pinia-plugin-persistedstate"; +import TDesign from "tdesign-vue-next"; -import App from './App.vue' -import router from './router' +import App from "./App.vue"; +import router from "./router"; -const app = createApp(App) +const app = createApp(App); -app.use(createPinia()) -app.use(router) +const pinia = createPinia(); +pinia.use(piniaPluginPersistedstate); +app.use(pinia); +app.use(router); +app.use(TDesign); -app.mount('#app') +app.mount("#app"); diff --git a/src/stores/counter.ts b/src/stores/counter.ts deleted file mode 100644 index b6757ba..0000000 --- a/src/stores/counter.ts +++ /dev/null @@ -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 } -}) diff --git a/src/stores/index.ts b/src/stores/index.ts new file mode 100644 index 0000000..1550f9e --- /dev/null +++ b/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; diff --git a/src/style/index.css b/src/style/index.css new file mode 100644 index 0000000..6d6cc16 --- /dev/null +++ b/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%; +} diff --git a/src/style/index.less b/src/style/index.less new file mode 100644 index 0000000..3673e20 --- /dev/null +++ b/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%; +} \ No newline at end of file diff --git a/src/style/reset.css b/src/style/reset.css new file mode 100644 index 0000000..bd1f592 --- /dev/null +++ b/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; +} diff --git a/src/style/reset.less b/src/style/reset.less new file mode 100644 index 0000000..aabb129 --- /dev/null +++ b/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; + } \ No newline at end of file diff --git a/src/style/variables.css b/src/style/variables.css new file mode 100644 index 0000000..e69de29 diff --git a/src/style/variables.less b/src/style/variables.less new file mode 100644 index 0000000..51be775 --- /dev/null +++ b/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); \ No newline at end of file