docs(projects): 添加书写规范文档
This commit is contained in:
Soybean
parent
e5d9962a5a
commit
d9fd91d137
@ -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:
|
||||
'填写更加详细的变更描述（可选）。使用 "|" 换行：\n',
|
||||
body: '填写更加详细的变更描述（可选）。使用 "|" 换行：\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
|
||||
// footerPrefix : 'ISSUES CLOSED:'
|
||||
// askForBreakingChangeFirst : true,
|
||||
breaklineChar: '|'
|
||||
}
|
||||
|
||||
@ -10,7 +10,5 @@ lib
|
||||
/mock/
|
||||
/public
|
||||
/docs
|
||||
# /build
|
||||
.vscode
|
||||
.local
|
||||
# vite.config.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;
|
||||
|
||||
3
build/plugins/windicss.ts
Normal file
3
build/plugins/windicss.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import windiCSS from 'vite-plugin-windicss';
|
||||
|
||||
export default windiCSS();
|
||||
20
doc/css书写规范.md
Normal file
20
doc/css书写规范.md
Normal file
@ -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>
|
||||
43
doc/vue+TS书写规范.md
Normal file
43
doc/vue+TS书写规范.md
Normal file
@ -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执行
|
||||
18
package.json
18
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/config-conventional": "^13.2.0",
|
||||
"@commitlint/cli": "^14.1.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/parser": "^5.2.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.3.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-vue-components": "^0.16.0",
|
||||
"unplugin-icons": "^0.12.17",
|
||||
"unplugin-vue-components": "^0.17.0",
|
||||
"vite": "^2.6.13",
|
||||
"vite-plugin-html": "^2.1.1",
|
||||
"vite-plugin-windicss": "^1.4.12",
|
||||
|
||||
903
pnpm-lock.yaml
903
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,5 @@
|
||||
<template>
|
||||
<span :style="{ color }">
|
||||
{{ value }}
|
||||
</span>
|
||||
<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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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" />
|
||||
|
||||
28
src/views/dashboard/workbench/components/GradientBg.vue
Normal file
28
src/views/dashboard/workbench/components/GradientBg.vue
Normal file
@ -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>
|
||||
3
src/views/dashboard/workbench/components/index.ts
Normal file
3
src/views/dashboard/workbench/components/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import GradientBg from './GradientBg.vue';
|
||||
|
||||
export { GradientBg };
|
||||
@ -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-item v-for="i in 4" :key="i">
|
||||
<shadow-card class="h-100px"></shadow-card>
|
||||
<n-grid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
|
||||
<n-grid-item v-for="item in cardData" :key="item.id">
|
||||
<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 { NGradientText, NSpace, NButton, NSpin, NTag, NSwitch, NCheckbox, NRadio, useDialog } from 'naive-ui';
|
||||
import { BarChartOutlined, MoneyCollectOutlined, TrademarkOutlined } from '@vicons/antd';
|
||||
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>
|
||||
|
||||
@ -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',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user