fix: 修改图标和页面

src/plugins/icon.ts

@@ -12,10 +12,8 @@ import {
   Open as OpenIcon,
   Send as SendIcon,
   InformationCircleOutline as InformationCircleIcon,
-  Beer as BeerIcon,
   Grid as GridIcon,
   TvOutline as DesktopIcon,
-  LaptopOutline as LaptopOutlineIcon,
   DocumentText as DocumentTextIcon,
   Language as LanguageIcon,
   Moon as MoonIcon,
@@ -45,7 +43,10 @@ import {
   TableSplit as TableSplitIcon,
   Roadmap as RoadmapIcon,
   SpellCheck as SpellCheckIcon,
-  GraphicalDataFlow as GraphicalDataFlowIcon
+  GraphicalDataFlow as GraphicalDataFlowIcon,
+  Store as StoreIcon,
+  Devices as DevicesIcon,
+  ObjectStorage as ObjectStorageIcon
 } from '@vicons/carbon'
 
 const ionicons5 = {
@@ -97,14 +98,10 @@ const ionicons5 = {
   SendIcon,
   // 信息
   InformationCircleIcon,
-  // 物料（颜色混合）
-  BeerIcon,
   // 项目
   GridIcon,
   // 电脑1
   DesktopIcon,
-  // 电脑2
-  LaptopOutlineIcon,
   // 文档
   DocumentTextIcon,
   // 语言
@@ -139,7 +136,13 @@ const carbon = {
   // 表格
   TableSplitIcon,
   // 装饰
-  GraphicalDataFlowIcon
+  GraphicalDataFlowIcon,
+  // 项目
+  DevicesIcon,
+  // 模板市场
+  StoreIcon,
+  // 我的模板
+  ObjectStorageIcon
 }
 
 // https://www.xicons.org/#/ 还有很多

src/settings/designSetting.ts

@@ -41,7 +41,7 @@ export const dialogIconSize = '20'
 export const asideWidth = '270'
 
 // 侧边栏折叠后的宽度，支持全部折叠会覆盖为 0
-export const asideCollapsedWidth = '60'
+export const asideCollapsedWidth = 60
 
 // 弹窗是否可以通过点击遮罩关闭
 export const maskClosable = false

src/store/modules/settingStore/settingStore.ts

@@ -31,8 +31,8 @@ export const useSettingStore = defineStore({
     getAsideAllCollapsed(): boolean {
       return this.asideAllCollapsed
     },
-    getAsideCollapsedWidth(): string {
+    getAsideCollapsedWidth(): number {
-      return this.asideAllCollapsed ? '0' : asideCollapsedWidth
+      return this.asideAllCollapsed ? 0 : asideCollapsedWidth
     }
   },
   actions: {

src/styles/common/_dark.scss

@@ -23,9 +23,6 @@ $dark: (
       linear-gradient($--color-dark-bg-1 14px, transparent 0),
       linear-gradient(90deg, transparent 14px, $--color-text-2 0)
     ),
-  // 物料市场背景
-    items-top-bg:
-    linear-gradient(180deg, $--color-dark-bg-1, rgba(23, 23, 26, 0)),
   // hover 边框颜色
     hover-border-color: #55606e,
 );

src/views/project/layout/components/Sider/menu.ts

@@ -5,7 +5,8 @@ import { PageEnum } from '@/enums/pageEnum'
 import { MenuOption, MenuGroupOption } from 'naive-ui'
 import { icon } from '@/plugins'
 
-const { GridIcon, BeerIcon, DesktopIcon, LaptopOutlineIcon } = icon.ionicons5
+const { GridIcon, DesktopIcon } = icon.ionicons5
+const { StoreIcon, ObjectStorageIcon, DevicesIcon } = icon.carbon
 export const renderMenuLabel = (option: MenuOption | MenuGroupOption) => {
   return option.label
 }
@@ -18,12 +19,12 @@ export const menuOptionsInit = () => {
   return reactive([
     {
       key: 'divider-1',
-      type: 'divider'
+      type: 'divider',
     },
     {
       label: () => h('span', null, { default: () => t('project.project') }),
       key: 'all-project',
-      icon: renderIcon(GridIcon),
+      icon: renderIcon(DevicesIcon),
       children: [
         {
           type: 'group',
@@ -36,13 +37,13 @@ export const menuOptionsInit = () => {
                   RouterLink,
                   {
                     to: {
-                      name: PageEnum.BASE_HOME_ITEMS_NAME
+                      name: PageEnum.BASE_HOME_ITEMS_NAME,
-                    }
+                    },
                   },
                   { default: () => t('project.all_project') }
                 ),
               key: PageEnum.BASE_HOME_ITEMS_NAME,
-              icon: renderIcon(DesktopIcon)
+              icon: renderIcon(DesktopIcon),
             },
             {
               label: () =>
@@ -50,22 +51,22 @@ export const menuOptionsInit = () => {
                   RouterLink,
                   {
                     to: {
-                      name: PageEnum.BASE_HOME_TEMPLATE_NAME
+                      name: PageEnum.BASE_HOME_TEMPLATE_NAME,
-                    }
+                    },
                   },
                   { default: () => t('project.my_templete') }
                 ),
               key: PageEnum.BASE_HOME_TEMPLATE_NAME,
-              icon: renderIcon(LaptopOutlineIcon)
+              icon: renderIcon(ObjectStorageIcon),
-            }
+            },
-          ]
+          ],
-        }
+        },
-      ]
+      ],
     },
 
     {
       key: 'divider-2',
-      type: 'divider'
+      type: 'divider',
     },
     {
       label: () =>
@@ -73,13 +74,13 @@ export const menuOptionsInit = () => {
           RouterLink,
           {
             to: {
-              name: PageEnum.BASE_HOME_TEMPLATE_MARKET_NAME
+              name: PageEnum.BASE_HOME_TEMPLATE_MARKET_NAME,
-            }
+            },
           },
           { default: () => t('project.template_market') }
         ),
       key: PageEnum.BASE_HOME_TEMPLATE_MARKET_NAME,
-      icon: renderIcon(BeerIcon)
+      icon: renderIcon(StoreIcon),
-    }
+    },
   ])
 }

src/views/project/templateMarket/components/TopCarousel/index.ts

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

src/views/project/templateMarket/components/TopCarousel/index.vue

@@ -1,12 +0,0 @@
-<template>
-  <div class="go-template-market-top-carousel">
-    <h1>轮播图</h1>
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style lang="scss" scoped>
-@include go('project-template-market-top-carousel') {
-}
-</style>

src/views/project/templateMarket/index.vue

@@ -1,74 +1,19 @@
 <template>
   <div class="go-project-template-market">
-    <header class="top-box">
+    <n-space vertical>
-      <div class="top-box-bg"></div>
+      <n-image object-fit="contain" height="300" preview-disabled :src="requireFallbackImg()" />
-      <div class="top-content">
+      <n-h3>暂时还没有东西呢</n-h3>
-        <n-carousel class="top-content-carousel" show-arrow>
-          <n-card title="模板1" hoverable>
-            <n-space>
-              <img
-                class="carousel-img"
-                src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
-              />
-              <n-text>这里是介绍拉巴拉巴拉巴拉</n-text>
     </n-space>
-          </n-card>
-          <n-card title="模板2" hoverable>
-            <n-space>
-              <img
-                class="carousel-img"
-                src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
-              />
-              <n-text>这里是介绍拉巴拉巴拉巴拉</n-text>
-            </n-space>
-          </n-card>
-          <n-card title="模板2" hoverable>
-            <n-space>
-              <img
-                class="carousel-img"
-                src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
-              />
-              <n-text>这里是介绍拉巴拉巴拉巴拉</n-text>
-            </n-space>
-          </n-card>
-          <n-card title="模板2" hoverable>
-            <n-space>
-              <img
-                class="carousel-img"
-                src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
-              />
-              <n-text>这里是介绍拉巴拉巴拉巴拉</n-text>
-            </n-space>
-          </n-card>
-        </n-carousel>
-      </div>
-      <n-divider />
-    </header>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { requireFallbackImg } from '@/utils'
+</script>
 
 <style lang="scss" scoped>
-@include go('project-template-market') {
+@include go("project-template-market") {
-  .top-box {
+  margin-top: 100px;
-    background: url('@/assets/images/project/project-top-bg.png');
+  @extend .go-flex-center;
-    background-position: top -185px left -1560px;
-    &-bg {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      @include background-image('items-top-bg');
-    }
-    .top-content {
-      display: flex;
-      justify-content: center;
-      position: relative;
-      padding-top: 30px;
-      &-carousel {
-        width: 70%;
-      }
-    }
-  }
 }
 </style>