chore: monrepo 改造

Author: Whbbit1999

.browserslistrc

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

README.md

@@ -1,4 +1,5 @@
 # sable
+
 [![code style](https://antfu.me/badge-code-style.svg)](https://github.com/antfu/eslint-config)
 
 ![cover](./public/sable_cover.png)
@@ -17,7 +18,7 @@
 - 工具函数：`lodash` & `vueuse`
 - 等
 
-  > 详细文档查看 https://www.whbbit.cn/wiki/sable/index.html 【正在编写中】
+  > 详细文档查看 <https://www.whbbit.cn/wiki/sable/index.html> 【正在编写中】
 
 ## 项目配置文件
 
@@ -73,7 +74,51 @@ export default {
 ```
 
 ## TODO
+
+灰色
+
+- #363433
+- #393733
+
 主题
 鹤 红、白、黑
+
+- #4a4035 #d42517
+
 虎 橙、白、黑
+
+- #eaad1a
+
 竹 绿、白、黑
+
+- #1ba784
+梅
+
+- #f1939c
+
+兰
+
+- #c08eaf
+菊
+
+- #e9ddb6
+
+---
+
+## 待办
+
+1. 自动引入本地svg图标
+2. 表格API优化
+3. tab栏实现
+4. keep-alive
+5. 全局菜单搜索
+6. 富文本编辑器集成
+7. 下载文件组件
+8. 上传文件组件
+9. 网络请求封装
+10. 地图API集成
+11. 页面切换动画 『可配置』
+12. 外链路由可配置为跳转至新窗口或iframe打开
+13. 权限控制
+14. 菜单icon
+15. 主题配置

package.json

@@ -14,65 +14,64 @@
     "preview": "pnpm run build && vite preview",
     "test": "vitest",
     "test:ui": "vitest --ui",
-    "release": "release-it"
+    "release": "release-it",
+    "start": "cross-env type=start node start.config.js"
   },
   "dependencies": {
-    "@sable/axios": "workspace:^",
-    "@sable/utils": "workspace:^",
-    "@vueuse/core": "^10.11.1",
-    "artplayer": "^5.1.6",
+    "@sable/api": "workspace:*",
+    "@sable/axios": "workspace:*",
+    "@sable/components": "workspace:*",
+    "@sable/enum": "workspace:*",
+    "@sable/store": "workspace:*",
+    "@sable/types": "workspace:*",
+    "@sable/utils": "workspace:*",
+    "@vueuse/core": "^11.0.0",
     "dayjs": "^1.11.12",
     "echarts": "^5.5.1",
     "lodash-es": "^4.17.21",
-    "md-editor-v3": "^4.18.0",
     "nprogress": "^0.2.0",
-    "pinia": "^2.2.1",
+    "pinia": "^2.2.2",
     "pinia-plugin-persistedstate": "^3.2.1",
-    "vue": "^3.4.37",
+    "vue": "^3.4.38",
     "vue-draggable-plus": "^0.5.3",
     "vue-router": "^4.4.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.25.0",
-    "@commitlint/cli": "^19.4.0",
-    "@commitlint/config-conventional": "^19.2.2",
+    "@antfu/eslint-config": "^2.25.2",
     "@iconify-json/carbon": "^1.1.37",
     "@iconify-json/svg-spinners": "^1.1.3",
     "@purge-icons/generated": "^0.10.0",
     "@release-it/conventional-changelog": "^8.0.1",
     "@types/lodash-es": "^4.17.12",
-    "@types/marked": "^6.0.0",
     "@types/mockjs": "^1.0.10",
-    "@types/node": "^20.14.14",
-    "@unocss/preset-attributify": "^0.61.9",
-    "@unocss/preset-icons": "^0.61.9",
-    "@unocss/preset-rem-to-px": "^0.61.9",
-    "@unocss/reset": "^0.61.9",
-    "@unocss/transformer-directives": "^0.61.9",
+    "@types/node": "^22.3.0",
+    "@unocss/preset-attributify": "^0.62.2",
+    "@unocss/preset-icons": "^0.62.2",
+    "@unocss/preset-rem-to-px": "^0.62.2",
+    "@unocss/reset": "^0.62.2",
+    "@unocss/transformer-directives": "^0.62.2",
     "@vicons/ionicons5": "^0.12.0",
     "@vicons/utils": "^0.1.4",
     "@vitejs/plugin-vue": "^5.1.2",
-    "@vitejs/plugin-vue-jsx": "^4.0.0",
-    "@vitest/coverage-c8": "^0.33.0",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
     "@vitest/ui": "^2.0.5",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.8.0",
-    "lint-staged": "^15.2.8",
+    "eslint": "^9.9.0",
+    "lint-staged": "^15.2.9",
     "mockjs": "^1.1.0",
     "naive-ui": "^2.39.0",
-    "path": "^0.12.7",
     "release-it": "^17.6.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.77.8",
     "simple-git-hooks": "^2.11.1",
     "typescript": "^5.5.4",
-    "unocss": "^0.61.9",
+    "unocss": "^0.62.2",
     "unplugin-auto-import": "^0.18.2",
     "unplugin-icons": "^0.19.2",
-    "unplugin-vue-components": "^0.27.3",
-    "vite": "^5.4.0",
+    "unplugin-vue-components": "^0.27.4",
+    "vite": "^5.4.1",
     "vite-plugin-mock": "^3.0.2",
-    "vite-plugin-vue-devtools": "7.3.5",
+    "vite-plugin-vue-devtools": "7.3.8",
     "vitest": "^2.0.5",
     "vue-tsc": "^2.0.29"
   },

packages/api/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@sable/api",
+  "version": "1.0.0",
+  "description": "",
+  "author": "",
+  "license": "ISC",
+  "keywords": [],
+  "main": "./src/index.ts",
+  "dependencies": {
+    "@sable/axios": "workspace:^",
+    "@sable/enum": "workspace:^"
+  }
+}

packages/api/src/http.ts

@@ -0,0 +1,13 @@
+import Axios from '@sable/axios'
+import { CacheEnum } from '@sable/enum'
+
+const http = new Axios({
+  baseURL: '/api',
+  timeout: 10000,
+  headers: {},
+}, {
+  authorizationPrefix: 'Bearer',
+  tokenKey: CacheEnum.TOKEN,
+})
+
+export default http

packages/api/src/index.ts

@@ -0,0 +1,3 @@
+export * from './notifyApi'
+export * from './uploadApi'
+export * from './userApi'

src/api/notifyApi.ts packages/api/src/notifyApi.ts

@@ -1,4 +1,4 @@
-import http from '@/plugins/axios'
+import http from './http'
 
 export async function getNotifies() {
   return http.post({ url: 'notify' })

src/api/uploadApi.ts packages/api/src/uploadApi.ts

@@ -1,4 +1,4 @@
-import http from '@/plugins/axios'
+import http from './http'
 
 // upload image
 export function uploadImage(data: FormData) {

src/api/userApi.ts packages/api/src/userApi.ts

@@ -1,4 +1,4 @@
-import http from '../plugins/axios'
+import http from './http'
 
 export async function getUserInfoApi() {
   return http.request<IUserModel>({

packages/axios/package.json

@@ -6,6 +6,8 @@
   "author": "",
   "main": "./src/index.ts",
   "dependencies": {
+    "@sable/enum": "workspace:^",
+    "@sable/types": "workspace:^",
     "axios": "^1.7.2",
     "axios-retry": "^4.4.2",
     "qs": "^6.12.3"

packages/axios/src/index.ts

@@ -1,10 +1,11 @@
 import axios from 'axios'
 import axiosRetry from 'axios-retry'
 import { stringify as qsStringify } from 'qs'
-
+import { HttpCodeEnum, RouteNameEnum } from '@sable/enum'
 import type { AxiosInstance, AxiosRequestConfig } from 'axios'
 import type { IAxiosRetryConfig } from 'axios-retry'
-import type { ErrorMessageMode, ResponseResult } from './type'
+import { useRouter } from 'vue-router'
+import type { ResponseResult } from '@sable/types'
 
 interface CustomConfig {
   axiosRetryConfig?: IAxiosRetryConfig
@@ -20,10 +21,7 @@ const defaultConfig: CustomConfig = {
 
 class Axios {
   private instance: AxiosInstance
-  constructor(
-    config: AxiosRequestConfig,
-    public customConfig: CustomConfig = defaultConfig,
-  ) {
+  constructor(config: AxiosRequestConfig, public customConfig: CustomConfig = defaultConfig) {
     this.instance = axios.create(config)
     this.setupAxiosRetry(this.customConfig?.axiosRetryConfig || defaultConfig.axiosRetryConfig)
     this.interceptors()
@@ -59,6 +57,18 @@ class Axios {
         return response
       },
       (error) => {
+        const {
+          response: { status },
+        } = error
+
+        const router = useRouter()
+
+        switch (status) {
+          case HttpCodeEnum.UNAUTHORIZED:
+            localStorage.removeItem(this.customConfig.tokenKey)
+            router.push({ name: RouteNameEnum.LOGIN })
+            return
+        }
         return Promise.reject(error)
       },
     )

packages/axios/src/type.ts

@@ -1,13 +1 @@
-export interface ResponseResult<T> {
-  code: number
-  message: string
-  type: 'success' | 'error'
-  data: T
-  meta: {
-    current_page: number // 当前页
-    page_size: number //
-    total: number // 总页数
-  }
-}
-
 export type ErrorMessageMode = 'none' | 'modal' | 'message' | undefined

packages/components/ECharts/Chart.vue

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import ResizeObserver from 'resize-observer-polyfill'
+import { onBeforeUnmount, onMounted, shallowRef, toRefs, unref, watch } from 'vue'
+import type { ECharts, EChartsInitOpts, EChartsOption } from 'echarts'
+import { useDebounceFn } from '@vueuse/core'
+import echarts from './echarts'
+
+interface Props {
+  option: EChartsOption
+  theme?: 'dark' | null
+  renderer?: EChartsInitOpts['renderer']
+}
+
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    theme: null,
+    option: undefined,
+    renderer: 'canvas',
+  },
+)
+
+const { option, theme, renderer } = toRefs(props)
+
+const container = shallowRef(null)
+let chart: ECharts | null = null
+const resizeObserver = new ResizeObserver(useDebounceFn(() => {
+  chart?.resize()
+}, 150))
+
+onMounted(() => {
+  chart = echarts.init(container.value, theme.value, {
+    locale: 'ZH',
+    renderer: unref(renderer),
+    ssr: false,
+  }) as any
+  chart?.setOption(unref(option))
+  resizeObserver.observe(container.value!)
+})
+
+onBeforeUnmount(() => {
+  if (chart)
+    chart?.dispose()
+
+  resizeObserver.unobserve(container.value!)
+})
+
+watch(
+  option,
+  (newOption) => {
+    chart?.setOption(newOption)
+  },
+  { deep: true },
+)
+</script>
+
+<template>
+  <div ref="container" h-full w-full />
+</template>
+
+<style scoped lang="scss"></style>

src/components/ECharts/echarts.ts packages/components/ECharts/echarts.ts

@@ -0,0 +1 @@
+export { default as Chart } from './Chart.vue'