docs(projects): 添加书写规范文档

.cz-config.js

@@ -1,5 +1,4 @@
 module.exports = {
-  // type 类型（定义之后，可通过上下键选择）
   types: [
     { value: 'feat', name: 'feat:     新增功能' },
     { value: 'fix', name: 'fix:      修复bug' },
@@ -13,8 +12,6 @@ module.exports = {
     { value: 'chore', name: 'chore:    对构建过程或辅助工具和库的更改（不影响源文件、测试用例）' },
     { value: 'revert', name: 'revert:   回滚 commit' }
   ],
-
-  // scope 类型（定义之后，可通过上下键选择）
   scopes: [
 		['projects', '项目搭建'],
     ['components', '组件相关'],
@@ -25,7 +22,6 @@ module.exports = {
     ['deps', '项目依赖'],
     ['auth', '对 auth 修改'],
     ['other', '其他修改'],
-    // 如果选择 custom，后面会让你再输入一个自定义的 scope。也可以不设置此项，把后面的 allowCustomScopes 设置为 true
     ['custom', '以上都不是？我要自定义']
   ].map(([value, description]) => {
     return {
@@ -33,30 +29,17 @@ module.exports = {
       name: `${value.padEnd(30)} (${description})`
     }
   }),
-
-  // 交互提示信息
   messages: {
     type: '确保本次提交遵循 Angular 规范！\n选择你要提交的类型：',
     scope: '\n选择一个 scope（可选）：',
-    // 选择 scope: custom 时会出下面的提示
     customScope: '请输入自定义的 scope：',
     subject: '填写简短精炼的变更描述：\n',
-    body:
+    body: '填写更加详细的变更描述（可选）。使用 "|" 换行：\n',
-      '填写更加详细的变更描述（可选）。使用 "|" 换行：\n',
     breaking: '列举非兼容性重大的变更（可选）：\n',
     footer: '列举出所有变更的 ISSUES CLOSED（可选）。 例如: #31, #34：\n',
     confirmCommit: '确认提交？'
   },
-
-  // 设置只有 type 选择了 feat 或 fix，才询问 breaking message
   allowBreakingChanges: ['feat', 'fix'],
-
-  // 跳过要询问的步骤
-  // skipQuestions: ['body', 'footer'],
-
-  // subject 限制长度
   subjectLimit: 100,
-  breaklineChar: '|', // 支持 body 和 footer
+  breaklineChar: '|'
-  // footerPrefix : 'ISSUES CLOSED:'
-  // askForBreakingChangeFirst : true,
 }

.eslintignore

@@ -10,7 +10,5 @@ lib
 /mock/
 /public
 /docs
-# /build
 .vscode
 .local
-# vite.config.ts

build/plugins/index.ts

@@ -1,9 +1,9 @@
-import WindiCSS from 'vite-plugin-windicss';
 import vue from './vue';
 import html from './html';
 import iconify from './iconify';
+import windicss from './windicss';
 import visualizer from './visualizer';
 
-const plugins = [vue, ...html, ...iconify, WindiCSS(), visualizer];
+const plugins = [vue, ...html, ...iconify, windicss, visualizer];
 
 export default plugins;

build/plugins/windicss.ts

@@ -0,0 +1,3 @@
+import windiCSS from 'vite-plugin-windicss';
+
+export default windiCSS();

doc/css书写规范.md

@@ -0,0 +1,20 @@
+css书写顺序
+
+1.定位属性：position display float left top right bottom overflow clear z-index
+2.自身属性：width height padding border margin background
+3.文字样式：font-family font-size font-style font-weight font-varient color
+4.文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
+5.css3中新增属性：content box-shadow border-radius transform……
+
+class类名的顺序：
+1.自定义的class类名(遵循BEM命名法)
+2.css插件提供的类名按照以上的css属性对应的顺序
+
+例如：自定义类名结合tailwind css
+
+<div class="demo-container absolute flex justify-center items-center left-10px top-12px overflow-hidden w-full h-full p-10px border-1px border-[#f00] m-24px bg-[#fff] text-32px text-[#0f0]"></div>
+<style>
+	.demo-container {
+		box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+	}
+</style>

doc/vue+TS书写规范.md

@@ -0,0 +1,43 @@
+推荐script-setup写法
+
+第一部分书写
+template
+
+第二部分
+script
+
+一、import的顺序
+
+1.vue模块
+2.vue相关类型
+3.vue-router模块
+4.vue-router相关类型
+5.UI框架模块
+6.UI框架相关类型
+7.第三方依赖
+8.第三方依赖相关类型
+9.@/enum
+10.@/setting
+11.@/plugins
+12.@/layouts
+13.@/views
+14.@/components
+15.@/hooks
+16.@/store
+17.@/context
+18.@/router
+19.@/service
+20.@/utils
+21.@/interface
+22.@/assets
+23.相对路径依赖
+
+二、TS类型声明
+
+三、defineProps、defineEmits、defineExpose、withDefaults
+
+四、响应式use函数
+
+五、变量、函数声明
+
+六、vue生命周期函数、nextTick执行

package.json

@@ -25,21 +25,21 @@
     "clipboard": "^2.0.8",
     "dayjs": "^1.10.7",
     "form-data": "^4.0.0",
-    "naive-ui": "^2.20.0",
+    "naive-ui": "^2.20.1",
     "pinia": "^2.0.0",
     "qs": "^6.10.1",
     "vue": "^3.2.20",
     "vue-router": "^4.0.11"
   },
   "devDependencies": {
-    "@commitlint/cli": "^13.2.1",
+    "@commitlint/cli": "^14.1.0",
-    "@commitlint/config-conventional": "^13.2.0",
+    "@commitlint/config-conventional": "^14.1.0",
     "@iconify/json": "^1.1.417",
     "@iconify/vue": "^3.0.0",
     "@types/chroma-js": "^2.1.3",
     "@types/qs": "^6.9.7",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "@vicons/antd": "^0.11.0",
     "@vicons/carbon": "^0.11.0",
     "@vicons/fa": "^0.11.0",
@@ -49,9 +49,9 @@
     "@vicons/material": "^0.11.0",
     "@vicons/tabler": "^0.11.0",
     "@vitejs/plugin-vue": "^1.9.4",
-    "@vue/compiler-sfc": "^3.2.20",
+    "@vue/compiler-sfc": "^3.2.21",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^8.0.0",
+    "@vue/eslint-config-typescript": "^9.0.0",
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "^3.3.0",
     "cz-customizable": "^6.3.0",
@@ -70,8 +70,8 @@
     "rollup-plugin-visualizer": "^5.5.2",
     "sass": "^1.43.4",
     "typescript": "^4.4.4",
-    "unplugin-icons": "^0.12.16",
+    "unplugin-icons": "^0.12.17",
-    "unplugin-vue-components": "^0.16.0",
+    "unplugin-vue-components": "^0.17.0",
     "vite": "^2.6.13",
     "vite-plugin-html": "^2.1.1",
     "vite-plugin-windicss": "^1.4.12",

src/components/custom/CountTo/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <span :style="{ color }">
+  <span>{{ value }}</span>
-    {{ value }}
-  </span>
 </template>
 <script lang="ts" setup>
 import { ref, computed, onMounted, watch, watchEffect } from 'vue';
@@ -48,10 +46,6 @@ const props = defineProps({
     type: String,
     default: '.'
   },
-  color: {
-    type: String,
-    default: '#666'
-  },
   useEasing: {
     type: Boolean,
     default: true

src/components/custom/ShadowCard/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-light dark:bg-dark rounded-16px shadow-sm">
+  <div class="overflow-hidden shadow-sm rounded-16px bg-light dark:bg-dark">
     <slot></slot>
   </div>
 </template>

src/views/dashboard/analysis/components/DataCard.vue

@@ -7,7 +7,7 @@
         </template>
         <div class="flex justify-between py-4px px-4px">
           <n-skeleton v-if="loading" :width="100" size="medium" />
-          <count-to v-else prefix="$" :start-value="1" :end-value="item.value" class="text-30px" />
+          <count-to v-else prefix="$" :start-value="1" :end-value="item.value" class="text-30px text-[#666]" />
         </div>
         <div class="flex justify-between p-8px px-16px">
           <n-skeleton v-if="loading" :width="100" size="medium" />

src/views/dashboard/workbench/components/GradientBg.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="bg-gradient w-full h-full p-16px text-white">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  /** 渐变开始的颜色 */
+  startColor: string;
+  /** 渐变结束的颜色 */
+  endColor: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  startColor: '#56cdf3',
+  endColor: '#719de3'
+});
+
+const gradientStyle = computed(() => `linear-gradient(to bottom right, ${props.startColor}, ${props.endColor})`);
+</script>
+<style scoped>
+.bg-gradient {
+  background-image: v-bind(gradientStyle);
+}
+</style>

src/views/dashboard/workbench/components/index.ts

@@ -0,0 +1,3 @@
+import GradientBg from './GradientBg.vue';
+
+export { GradientBg };

src/views/dashboard/workbench/index.vue

@@ -8,9 +8,22 @@
         <shadow-card class="h-360px"></shadow-card>
       </n-grid-item>
     </n-grid>
-    <n-grid cols="s:2 m:4" responsive="screen" :x-gap="16" :y-gap="16">
+    <n-grid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
-      <n-grid-item v-for="i in 4" :key="i">
+      <n-grid-item v-for="item in cardData" :key="item.id">
-        <shadow-card class="h-100px"></shadow-card>
+        <shadow-card class="h-100px">
+          <gradient-bg :start-color="item.colors[0]" :end-color="item.colors[1]">
+            <h3 class="text-16px">{{ item.title }}</h3>
+            <div class="flex justify-between pt-12px">
+              <component :is="item.icon" class="text-32px" />
+              <count-to
+                :prefix="item.unit"
+                :start-value="1"
+                :end-value="item.value"
+                class="text-30px text-white dark:text-dark"
+              />
+            </div>
+          </gradient-bg>
+        </shadow-card>
       </n-grid-item>
     </n-grid>
     <n-grid :x-gap="16" :y-gap="16" :item-responsive="true" responsive="screen">
@@ -25,8 +38,56 @@
 </template>
 
 <script lang="ts" setup>
+import type { VNodeChild } from 'vue';
 import { NSpace, NGrid, NGridItem } from 'naive-ui';
-import { ShadowCard } from '@/components';
+import { BarChartOutlined, MoneyCollectOutlined, TrademarkOutlined } from '@vicons/antd';
-// import { NGradientText, NSpace, NButton, NSpin, NTag, NSwitch, NCheckbox, NRadio, useDialog } from 'naive-ui';
+import { DocumentDownload } from '@vicons/carbon';
+import { ShadowCard, CountTo } from '@/components';
+import { dynamicIconRender } from '@/utils';
+import { GradientBg } from './components';
+
+interface CardData {
+  id: string;
+  title: string;
+  value: number;
+  unit: string;
+  colors: [string, string];
+  icon: () => VNodeChild;
+}
+
+const cardData: CardData[] = [
+  {
+    id: 'visit',
+    title: '访问量',
+    value: 1000000,
+    unit: '',
+    colors: ['#ec4786', '#b955a4'],
+    icon: dynamicIconRender(BarChartOutlined)
+  },
+  {
+    id: 'amount',
+    title: '成交额',
+    value: 234567.89,
+    unit: '$',
+    colors: ['#865ec0', '#5144b4'],
+    icon: dynamicIconRender(MoneyCollectOutlined)
+  },
+  {
+    id: 'download',
+    title: '下载数',
+    value: 666666,
+    unit: '',
+    colors: ['#56cdf3', '#719de3'],
+    icon: dynamicIconRender(DocumentDownload)
+  },
+  {
+    id: 'trade',
+    title: '成交数',
+    value: 999999,
+    unit: '',
+    colors: ['#fcbc25', '#f68057'],
+    icon: dynamicIconRender(TrademarkOutlined)
+  }
+];
 </script>
 <style scoped></style>

windi.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
     include: ['src/**/*.{vue,html,jsx,tsx}', 'public/**/*.{html}', './*.html'],
     exclude: ['node_modules', '.git']
   },
-  darkMode: 'class', // or 'media'
+  darkMode: 'class',
   shortcuts: {
     'center-layout': 'w-1280px mx-auto px-15px',
     'flex-center': 'flex justify-center items-center',