修改示例

package.json

@@ -27,6 +27,7 @@
     "vite": "^3.1.8",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-eslint": "^1.8.0",
+    "vite-plugin-svg-icons": "^2.0.1",
     "vue-tsc": "^1.0.8"
   }
 }

src/assets/icons/add.svg

@@ -0,0 +1,6 @@
+<svg t="1699277626262" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5500"
+  width="200" height="200">
+  <path
+    d="M939.939489 459.072557 562.339502 459.072557 562.339502 83.519182 462.055494 83.519182 462.055494 459.072557 84.455507 459.072557 84.455507 559.356564 462.055494 559.356564 462.055494 939.003164 562.339502 939.003164 562.339502 559.356564 939.939489 559.356564Z"
+    fill="#1AB99B" p-id="5501"></path>
+</svg>

src/assets/naive-theme.json

@@ -1,70 +0,0 @@
-{
-  "common": {
-    "primaryColor": "#2791FEFF",
-    "primaryColorHover": "#67B2FEFF",
-    "primaryColorPressed": "#1F74CBFF",
-    "primaryColorSuppl": "#93C8FEFF",
-    "errorColorHover": "#EC787BFF",
-    "errorColor": "#E8575AFF",
-    "errorColorPressed": "#B94548FF",
-    "errorColorSuppl": "#EE898BFF",
-    "warningColor": "#FAAD38FF",
-    "warningColorPressed": "#C88A2CFF",
-    "textColorBase": "#17233EFF",
-    "textColor1": "rgba(80, 90, 110, 1)",
-    "textColor2": "rgba(128, 134, 148, 1)",
-    "textColor3": "rgba(196, 200, 206, 1)",
-    "placeholderColor": "rgba(196, 200, 206, 1)",
-    "iconColor": "rgba(196, 200, 206, 1)",
-    "iconColorHover": "rgba(103, 178, 254, 1)",
-    "iconColorPressed": "rgba(31, 116, 203, 1)",
-    "iconColorDisabled": "rgba(196, 200, 206, 1)",
-    "dividerColor": "rgba(220, 222, 226, 1)",
-    "borderColor": "rgba(196, 200, 206, 1)",
-    "closeIconColor": "rgba(80, 90, 110, 1)",
-    "closeIconColorHover": "rgba(103, 178, 254, 1)",
-    "closeIconColorPressed": "rgba(31, 116, 203, 1)",
-    "closeColorHover": "rgba(0, 0, 0, 0.1)",
-    "closeColorPressed": "rgba(0, 0, 0, 0.15)",
-    "scrollbarColor": "rgba(126, 133, 160, 1)",
-    "scrollbarColorHover": "rgba(103, 178, 254, 1)",
-    "tagColor": "#F5F5F5FF",
-    "inputColorDisabled": "rgba(233, 234, 236, 1)",
-    "fontSize": "0.14rem",
-    "fontSizeMini": "0.12rem",
-    "fontSizeTiny": "0.12rem",
-    "fontSizeSmall": "0.14rem",
-    "fontSizeMedium": "0.14rem",
-    "fontSizeLarge": "0.15rem",
-    "fontSizeHuge": "0.16rem"
-  },
-  "Icon": {
-    "color": "white"
-  },
-  "Menu": {
-    "itemColorActive": "rgba(39, 145, 254, 0.3)",
-    "itemTextColor": "white",
-    "itemTextColorActive": "white",
-    "itemTextColorActiveHoverHorizontal": "white",
-    "arrowColor": "white",
-    "itemHeight":"0.35rem",
-    "arrowColorChildActive":"none",
-    "itemIconColorHover": "white",
-    "itemTextColorHover": "none",
-    "itemColorHover": "none",
-    "itemTextColorChildActive": "#FFFFFFFF",
-    "itemTextColorHorizontal": "#FFFFFFFF",
-    "itemIconColorActive": "#FFFFFFFF",
-    "itemIconColorChildActive": "#FFFFFFFF",
-    "itemColorHoverInverted":"none",
-    "itemTextColorActiveHover":"none",
-    "itemIconColorActiveHorizontal":"none",
-    "itemTextColorChildActiveHover":"none",
-    "itemColorActiveHover":"rgba(39, 145, 254, 0.3)",
-    "itemIconColor":"white",
-    "itemIconColorActiveHover":"white"
-  },
-  "Tree": {
-    "nodeTextColor": "#505A6EFF"
-  }
-}

src/assets/naive-theme.ts

@@ -0,0 +1,185 @@
+import { GlobalThemeOverrides } from 'naive-ui'
+const themeOverrides: GlobalThemeOverrides = {
+  common: {
+    primaryColor: '#2791FEFF',
+    primaryColorHover: '#67B2FEFF',
+    primaryColorPressed: '#1F74CBFF',
+    primaryColorSuppl: '#93C8FEFF',
+    errorColorHover: '#EC787BFF',
+    errorColor: '#E8575AFF',
+    errorColorPressed: '#B94548FF',
+    errorColorSuppl: '#EE898BFF',
+    warningColor: '#FAAD38FF',
+    warningColorPressed: '#C88A2CFF',
+    textColorBase: '#17233EFF',
+    textColor1: 'rgba(80, 90, 110, 1)',
+    textColor2: 'rgba(128, 134, 148, 1)',
+    textColor3: 'rgba(196, 200, 206, 1)',
+    placeholderColor: 'rgba(196, 200, 206, 1)',
+    iconColor: 'rgba(196, 200, 206, 1)',
+    iconColorHover: 'rgba(103, 178, 254, 1)',
+    iconColorPressed: 'rgba(31, 116, 203, 1)',
+    iconColorDisabled: 'rgba(196, 200, 206, 1)',
+    dividerColor: 'rgba(220, 222, 226, 1)',
+    borderColor: 'rgba(196, 200, 206, 1)',
+    closeIconColor: 'rgba(80, 90, 110, 1)',
+    closeIconColorHover: 'rgba(103, 178, 254, 1)',
+    closeIconColorPressed: 'rgba(31, 116, 203, 1)',
+    closeColorHover: 'rgba(0, 0, 0, 0.1)',
+    closeColorPressed: 'rgba(0, 0, 0, 0.15)',
+    scrollbarColor: 'rgba(126, 133, 160, 1)',
+    scrollbarColorHover: 'rgba(103, 178, 254, 1)',
+    tagColor: '#F5F5F5FF',
+    inputColorDisabled: 'rgba(233, 234, 236, 1)',
+    fontSize: '14px',
+    fontSizeMini: '12px',
+    fontSizeTiny: '12px',
+    fontSizeSmall: '14px',
+    fontSizeMedium: '14px',
+    fontSizeLarge: '15px',
+    fontSizeHuge: '16px'
+  },
+  Icon: {
+    color: 'white'
+  },
+  Tree: {
+    nodeTextColor: '#fff',
+    nodeColorHover: 'transparent',
+    nodeColorPressed: 'transparent',
+    nodeColorActive: 'transparent'
+  },
+  Dropdown: {
+    optionTextColor: '#fff',
+    color: '#1AB99B',
+    optionTextColorHover: '#1AB99B',
+    optionColorHover: 'rgba(26,65,78,0.85)',
+    optionPrefixWidthHuge: '20px'
+
+  },
+  Input: {
+    textColor: '#fff',
+    placeholderColor: '#639694',
+    border: '1px solid #639694',
+    borderFocus: '1px solid #639694'
+
+  },
+  Tabs: {
+    tabTextColorLine: '#fff',
+    tabTextColorActiveLine: '#1AB99B',
+    tabTextColorHoverLine: '#1AB99B',
+    tabTextColorBar: '#000',
+    barColor: '#1AB99B',
+    tabBorderColor: ' rgba(243,243,243,0.1)',
+    paneTextColor: '#fff',
+    tabPaddingMediumLine: '10px 15px'
+  },
+  Button: {
+    textColor: '#fff',
+    border: '1px solid #1AB99B',
+    colorPrimary: '#1E867E',
+    colorHoverPrimary: '#1E867EFF',
+    colorPressedPrimary: '#0C7A43FF',
+    colorDisabledPrimary: '#18A058FF',
+    colorFocusPrimary: '#1E867EFF',
+    borderPrimary: '1px solid #1E867E',
+    borderHoverPrimary: '1px solid #1E867EFF',
+    borderPressedPrimary: '1px solid #0C7A43FF',
+    borderDisabledPrimary: '1px solid #18A058FF',
+    borderFocusPrimary: '1px solid #1E867EFF'
+  },
+  Collapse: {
+    itemMargin: '0px 0 0 0',
+    titlePadding: '0px 0 0 0',
+    dividerColor: 'transparent',
+    titleTextColor: '#FFFFFF',
+    arrowColor: '#FFFFFF',
+    textColor: '#FFFFFF'
+  },
+  Slider: {
+    fillColor: '#1AB99B',
+    fillColorHover: '#1AB99B'
+  },
+  Dialog: {
+    color: '#143A4D',
+    closeIconColor: '#B3B3B3',
+    titleTextColor: '#FFFFFF',
+    textColor: '#FFFFFF',
+    titleFontSize: '16px',
+    iconSize: '16px',
+    closeMargin: '10px 26px 0 0',
+    border: '1px solid #1AB99B'
+  },
+  Form: {
+    labelTextColor: '#ffffff'
+  },
+  DataTable: {
+    borderColor: 'rgba(99, 150, 148, 0.4)',
+    thColor: 'rgba(21,84,107,0.4)',
+    thColorHover: 'rgba(21,84,107,0.4)',
+    thTextColor: 'rgba(26, 185, 155, 1)',
+    tdColor: 'rgba(10, 29, 36, 0.6)',
+    tdColorHover: 'rgba(10, 29, 36, 0.6)',
+    tdTextColor: '#FFFFFF'
+  },
+  Pagination: {
+    buttonColor: 'rgba(21,84,107,0.4)',
+    buttonColorHover: 'rgba(21,84,107,0.4)',
+    buttonColorPressed: 'rgba(21,84,107,0.4)',
+    buttonBorder: '1px solid rgba(21,84,107,0.4)',
+    buttonBorderHover: '1px solid rgba(21,84,107,0.4)',
+    buttonBorderPressed: '1px solid rgba(21,84,107,0.4)',
+    buttonIconColor: '#fff',
+    buttonIconColorHover: '#fff',
+    buttonIconColorPressed: '#fff',
+    itemTextColor: '#fff',
+    itemTextColorHover: '#fff',
+    itemTextColorPressed: '#fff',
+    itemTextColorActive: '#fff',
+    itemColorDisabled: 'rgba(21,84,107,0.8)',
+    itemBorderActive: '1px solid rgba(21,84,107,1)',
+    itemBorderDisabled: '1px solid rgba(21,84,107,1)',
+    itemTextColorDisabled: 'rgba(26, 223, 180, 0.1)',
+    jumperTextColor: '#fff'
+  },
+  Scrollbar: {
+    color: '#1AB99B',
+    colorHover: '#1AB99B'
+  },
+  TreeSelect: {
+    menuColor: 'rgba(3, 20, 26, 0.95)',
+    menuBoxShadow: '0px 2px 6px 0px rgba(0,0,0,0.5), inset 0px 0px 8px 0px rgba(200,255,239,0.37);'
+  },
+  DatePicker: {
+    panelColor: 'rgba(3,20,26,0.95)',
+    panelTextColor: 'rgba(255,255,255,0.8)',
+    calendarDaysTextColor: 'rgba(255,255,255,0.8)',
+    calendarTitleTextColor: 'rgba(255,255,255,0.8)',
+    calendarTitleColorHover: '#183742',
+    panelHeaderDividerColor: '#164352',
+    calendarDaysDividerColor: '#164352',
+    panelActionDividerColor: '#164352',
+    itemColorActive: '#1AB99B',
+    itemColorHover: '#146371'
+  },
+  TimePicker: {
+    panelColor: 'rgba(3, 20, 26, 0.95)',
+    panelDividerColor: 'rgb(239, 239, 245)',
+    itemTextColor: 'rgba(255, 255, 255, 0.8)',
+    itemTextColorActive: '#1AB99B',
+    itemColorHover: '#146371'
+  },
+  Checkbox: {
+    colorChecked: '#1ab99bFF',
+    textColor: '#fff'
+  },
+  Notification: {
+    iconColorSuccess: '#1AB99BFF',
+    iconColorError: '#E8575AFF',
+    color: '#12363FFF',
+    textColor: 'rgba(255, 255, 255, 1)',
+    descriptionTextColor: 'rgba(255, 255, 255, 1)',
+    closeIconColor: 'rgba(255, 255, 255, 1)',
+    borderRadius: '0'
+  }
+}
+export default themeOverrides

src/pages/App.vue

@@ -17,7 +17,7 @@ import loading from '@/components/loading.vue'
 import useStore from './store/index'
 import { computed } from 'vue'
 import { zhCN, dateZhCN } from 'naive-ui'
-import Theme from '@/assets/naive-theme.json'
+import Theme from '@/assets/naive-theme'
 
 const store = useStore()
 const show = computed(() => store.loading)

src/pages/views/home/index.vue

@@ -17,5 +17,6 @@ function sendAudio() {
     >
       我不是全局组件
     </n-button>
+    <icon name="add" :size="20"/>
   </div>
 </template>