chore: 更换主题色

.env.development

 VITE_APP_ENV = 'DEV'
 VITE_APP_NAME = 'POC'
 
-VITE_APP_THEME_COLOR = '#2468f2'
+VITE_APP_THEME_COLOR = '#000DFF'
 VITE_PORT = 8848
 VITE_PUBLIC_PATH = /fe
 VITE_ROUTER_MODE = 'h5'

.env.production

 VITE_APP_ENV = 'PROD'
 VITE_APP_NAME = 'POC'
 
-VITE_APP_THEME_COLOR = '#2468f2'
+VITE_APP_THEME_COLOR = '#000DFF'
 VITE_PUBLIC_PATH = /fe
 VITE_ROUTER_MODE = 'h5'
 

src/assets/svgs/star.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><defs><style>.cls-1{fill:#2468f2;}.cls-2{fill:none;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_4" data-name="图层 4"><path class="cls-1" d="M10.77,4.87l1.76,3.56a.85.85,0,0,0,.64.47l3.93.57a.86.86,0,0,1,.48,1.46L14.74,13.7a.84.84,0,0,0-.25.76l.67,3.91a.86.86,0,0,1-1.25.91L10.4,17.43a.87.87,0,0,0-.8,0L6.09,19.28a.86.86,0,0,1-1.25-.91l.67-3.91a.84.84,0,0,0-.25-.76L2.42,10.93A.86.86,0,0,1,2.9,9.47L6.83,8.9a.85.85,0,0,0,.64-.47L9.23,4.87A.86.86,0,0,1,10.77,4.87Z"/><rect class="cls-2" width="20" height="20"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><defs><style>.cls-1{fill:#000DFF;}.cls-2{fill:none;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_4" data-name="图层 4"><path class="cls-1" d="M10.77,4.87l1.76,3.56a.85.85,0,0,0,.64.47l3.93.57a.86.86,0,0,1,.48,1.46L14.74,13.7a.84.84,0,0,0-.25.76l.67,3.91a.86.86,0,0,1-1.25.91L10.4,17.43a.87.87,0,0,0-.8,0L6.09,19.28a.86.86,0,0,1-1.25-.91l.67-3.91a.84.84,0,0,0-.25-.76L2.42,10.93A.86.86,0,0,1,2.9,9.47L6.83,8.9a.85.85,0,0,0,.64-.47L9.23,4.87A.86.86,0,0,1,10.77,4.87Z"/><rect class="cls-2" width="20" height="20"/></g></g></svg>

src/config/theme-config.ts

@@ -2,12 +2,15 @@ import { GlobalThemeOverrides } from 'naive-ui'
 
 export const themeOverrides: GlobalThemeOverrides = {
   common: {
-    primaryColor: '#2468f2',
-    primaryColorHover: '#528eff',
-    primaryColorPressed: '#2468f2',
-    primaryColorSuppl: '#528eff',
+    primaryColor: '#000DFF',
+    primaryColorHover: '#575FFF',
+    primaryColorPressed: '#575FFF',
+    primaryColorSuppl: '#575FFF',
+    heightMedium: '32px',
+    borderRadius: '5px',
+    tableHeaderColor: '#F7F7FA',
   },
   LoadingBar: {
-    colorLoading: '#2468f2',
+    colorLoading: '#000DFF',
   },
 }

src/directives/loading.ts

@@ -23,7 +23,7 @@ function createMask(): HTMLElement {
 			<animateTransform attributeName="transform" dur="1s" from="0 12 12" repeatCount="indefinite" to="360 12 12" type="rotate" />
 		</path>
 	</svg>`
-  loadingIcon.style.color = '#2468f2'
+  loadingIcon.style.color = '#000DFF'
   loadingIcon.style.width = '44px'
   loadingIcon.style.height = '44px'
   mask.appendChild(loadingIcon)

src/layout/components/sidebar/sidebar.vue

 <script setup lang="ts">
 import { h, readonly, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { Plus } from '@icon-park/vue-next'
 import { sidebarMenus } from '@/router/index'
 import { type MenuOption } from '@/router/utils'
 import CustomIcon from '@/components/custom-icon/custom-icon.vue'
@@ -63,28 +64,28 @@ function handleToLogin() {
 </script>
 
 <template>
-  <div class="flex h-full flex-col justify-between px-3">
+  <div class="flex h-full flex-col justify-between">
     <div>
       <div
-        class="mx-auto my-[14px] flex h-[23px] w-[90px] bg-[url('@/assets/images/page-logo.png')] bg-contain bg-center bg-no-repeat"
+        class="mx-auto flex h-[50px] w-full bg-[url('@/assets/images/page-logo.png')] bg-contain bg-center bg-no-repeat"
       />
 
-      <div class="py-5">
+      <div class="px-3 py-5">
         <button
-          class="bg-theme-color flex h-[40px] w-[203px] items-center justify-center rounded-md text-white outline-none hover:opacity-80"
+          class="bg-theme-color hover:bg-hover-theme-color flex h-[40px] w-[203px] items-center justify-center rounded-md text-white outline-none"
           @click="handleToPersonAppSettingPage"
         >
-          <CustomIcon icon="ic:outline-add" class="mr-1 h-[18px] w-[18px]" />
-          <span>创建应用</span>
+          <Plus theme="outline" size="16" fill="#fff" :stroke-width="4" />
+          <span class="ml-[5px]">创建应用</span>
         </button>
       </div>
 
-      <ul>
+      <ul class="px-3">
         <li
           v-for="sidebarMenuItem in sidebarMenus"
           :key="sidebarMenuItem.key"
-          class="my-1 flex h-10 cursor-pointer items-center rounded-md pl-3 hover:bg-[#f2f5f9]"
-          :class="[menuValue === sidebarMenuItem.routeName ? 'bg-[#f2f5f9] text-[#151b26]' : 'text-[#5c5f66]']"
+          class="hover:bg-active-color my-1 flex h-10 cursor-pointer items-center rounded-md pl-3"
+          :class="[menuValue === sidebarMenuItem.routeName ? 'bg-active-color text-theme-color' : 'text-font-color']"
           @click="handleUpdateValue(sidebarMenuItem.routeName, sidebarMenuItem)"
         >
           <CustomIcon :icon="sidebarMenuItem.icon" class="mr-2 text-base" />
@@ -93,7 +94,7 @@ function handleToLogin() {
       </ul>
     </div>
 
-    <div class="mb-7">
+    <div class="mb-7 px-3">
       <NDropdown
         v-if="userStore.isLogin"
         trigger="click"

src/views/personal-space/personal-app-setting/columns.ts

@@ -24,7 +24,7 @@ export function createChannelPublishColumn(handleChannelPublishTableAction: (act
               h(CustomIcon, {
                 width: '24px',
                 icon: 'icon-park-solid:computer',
-                color: '#2468f2',
+                color: '#000DFF',
               }),
               h(
                 'div',
@@ -142,8 +142,8 @@ export function createChannelPublishColumn(handleChannelPublishTableAction: (act
                     fontSize: '14px',
                     padding: '4px 12px',
                     background: '#f7f7f9',
-                    borderColor: '#2468f2',
-                    color: '#2468f2',
+                    borderColor: '#000DFF',
+                    color: '#000DFF',
                   },
                   className: 'cursor-pointer rounded-md border hover:opacity-80',
                   onClick: () => handleChannelPublishTableAction('accessPage'),

src/views/personal-space/personal-app-setting/components/custom-loading.vue

@@ -14,16 +14,16 @@
 
 @keyframes l5 {
   0% {
-    background: #2468f2;
+    background: #000dff;
     box-shadow:
-      13px 0 #2468f2,
+      13px 0 #000dff,
       -13px 0 #0002;
   }
 
   33% {
     background: #0002;
     box-shadow:
-      13px 0 #2468f2,
+      13px 0 #000dff,
       -13px 0 #0002;
   }
 
@@ -31,14 +31,14 @@
     background: #0002;
     box-shadow:
       13px 0 #0002,
-      -13px 0 #2468f2;
+      -13px 0 #000dff;
   }
 
   100% {
-    background: #2468f2;
+    background: #000dff;
     box-shadow:
       13px 0 #0002,
-      -13px 0 #2468f2;
+      -13px 0 #000dff;
   }
 }
 </style>

src/views/personal-space/personal-app-setting/components/page-narbar.vue

@@ -38,7 +38,7 @@ const isUpdateAgentAppConfig = ref(false)
 
 const currentAgentAppTabKey = ref('config')
 
-const publishBtnloading = ref(false)
+const publishBtnLoading = ref(false)
 
 const agentAppOptionList = [
   {
@@ -140,9 +140,9 @@ async function handlePublishApplication() {
     return
   }
 
-  publishBtnloading.value = true
+  publishBtnLoading.value = true
 
-  const res = await fetchPublishApplication(personalAppConfig.value).finally(() => (publishBtnloading.value = false))
+  const res = await fetchPublishApplication(personalAppConfig.value).finally(() => (publishBtnLoading.value = false))
 
   if (res.code === 0) {
     window.$message.success('发布成功')
@@ -232,9 +232,10 @@ async function handlePublishApplication() {
       <NButton
         v-show="isShowPublishBtn"
         type="primary"
-        class="h-[32px]! min-w-20! rounded-md!"
+        class="min-w-20!"
+        :bordered="false"
         :disabled="!personalAppConfig.baseInfo.agentId"
-        :loading="publishBtnloading"
+        :loading="publishBtnLoading"
         @click="handlePublishApplication"
       >
         {{ publishBtnText }}

src/views/personal-space/personal-app/columns.ts

@@ -146,7 +146,7 @@ export function createPersonalAppColumn(handlePersonalAppTableAction: (actionTyp
                 icon: 'ion:copy-outline',
                 style: {
                   cursor: 'pointer',
-                  color: '#2468f2',
+                  color: '#000DFF',
                 },
                 onClick: () => handlePersonalAppTableAction('copyAgentId', row.baseInfo.agentId),
               }),
@@ -280,7 +280,7 @@ export function createPersonalAppColumn(handlePersonalAppTableAction: (actionTyp
                             style: {
                               fontSize: '16px',
                               cursor: 'pointer',
-                              color: '#2468f2',
+                              color: '#000DFF',
                             },
                           }),
                         ],
@@ -326,8 +326,8 @@ export function createPersonalAppColumn(handlePersonalAppTableAction: (actionTyp
           h(
             'span',
             {
-              style: { marginRight: '20px' },
-              className: 'text-theme-color cursor-pointer hover:opacity-80',
+              style: { marginRight: '20px', color: '#F25744' },
+              className: 'cursor-pointer hover:opacity-80',
               onClick: () => handlePersonalAppTableAction('delete', row.baseInfo.agentId),
             },
             { default: () => '删除' },

src/views/personal-space/personal-app/personal-app.vue

@@ -132,10 +132,6 @@ function handleDeletePersonalApp(agentId: string) {
   })
 }
 
-function handleToPersonAppSettingPage() {
-  router.push({ name: 'PersonalAppSetting' })
-}
-
 async function handleEnterKeypress(event: KeyboardEvent) {
   if (event.code === 'Enter' && !event.shiftKey) {
     event.preventDefault()
@@ -158,11 +154,11 @@ async function handleGetApplicationListUpdatePageSize(pageSize: number) {
 
 <template>
   <div ref="pageContentWrapRef" class="h-full">
-    <div class="mb-4 flex justify-between">
+    <div class="mb-4 flex justify-end">
       <NInput
         v-model:value="agentSearchInputValue"
         placeholder="请输入应用名称或描述"
-        class="w-[256px]! h-[32px]! rounded-md!"
+        class="w-[256px]! h-[32px]!"
         @keypress="handleEnterKeypress"
       >
         <template #suffix>
@@ -173,9 +169,6 @@ async function handleGetApplicationListUpdatePageSize(pageSize: number) {
           />
         </template>
       </NInput>
-      <NButton type="primary" class="h-[32px]! w-[100px]! rounded-md!" @click="handleToPersonAppSettingPage">
-        创建应用
-      </NButton>
     </div>
 
     <div class="mb-4" :style="{ height: tableContentY + 48 + 'px' }">

src/views/personal-space/personal-space.vue

 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { h, readonly, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { Plus, ApplicationTwo } from '@icon-park/vue-next'
 
 const currentRoute = useRoute()
 const router = useRouter()
@@ -12,8 +13,26 @@ const personalSpaceModuleList = [
     routeName: 'PersonalSpaceApp',
     label: '应用',
   },
+  // {
+  //   routeName: 'PersonalSpaceKnowledge',
+  //   label: '知识库',
+  // },
 ]
 
+const addPersonalSpaceOptions = readonly([
+  {
+    label: '应用',
+    key: 'addAgent',
+
+    icon: () => h(ApplicationTwo, { theme: 'outline', size: 16, fill: '#333' }),
+  },
+  // {
+  //   label: '知识库',
+  //   key: 'addKnowledge',
+  //   icon: () => h(NotebookOne, { theme: 'outline', size: 16, fill: '#333' }),
+  // },
+])
+
 watch(
   () => currentRoute.fullPath,
   () => {
@@ -24,23 +43,53 @@ watch(
 function handleChangeRoute(routeName: string) {
   router.replace({ name: routeName })
 }
+
+function handleSelectAddType(type: string) {
+  switch (type) {
+    case 'addAgent':
+      router.push({ name: 'PersonalAppSetting' })
+      break
+  }
+}
 </script>
 
 <template>
-  <div class="flex h-full flex-col">
-    <ul class="mb-4 flex">
-      <li
-        v-for="personalSpaceModuleItem in personalSpaceModuleList"
-        :key="personalSpaceModuleItem.routeName"
-        class="hover:text-theme-color ml-[32px] h-9 cursor-pointer select-none text-xl leading-9 first:ml-0"
-        :class="[routerNameValue === personalSpaceModuleItem.routeName ? 'text-theme-color' : '']"
-        @click="handleChangeRoute(personalSpaceModuleItem.routeName)"
-      >
-        {{ personalSpaceModuleItem.label }}
-      </li>
-    </ul>
+  <div class="flex h-full flex-col rounded-[20px] bg-white p-6 shadow-[0_2px_2px_#0000000a]">
+    <div class="flex justify-between">
+      <div class="flex flex-col">
+        <div class="mb-6 flex items-center">
+          <img src="@/assets/images/personal-icon.png" />
+          <p class="ml-[5px] text-lg">个人空间</p>
+        </div>
+
+        <ul class="mb-4 flex">
+          <li
+            v-for="personalSpaceModuleItem in personalSpaceModuleList"
+            :key="personalSpaceModuleItem.routeName"
+            class="rounded-theme hover:bg-active-color hover:text-font-color ml-2.5 h-8 cursor-pointer select-none px-[14px] leading-8 first:ml-0"
+            :class="[
+              routerNameValue === personalSpaceModuleItem.routeName
+                ? 'text-font-color bg-active-color'
+                : 'text-gray-font-color border-transparent',
+            ]"
+            @click="handleChangeRoute(personalSpaceModuleItem.routeName)"
+          >
+            {{ personalSpaceModuleItem.label }}
+          </li>
+        </ul>
+      </div>
+
+      <div>
+        <NDropdown trigger="hover" :options="addPersonalSpaceOptions" @select="handleSelectAddType">
+          <NButton type="primary" :bordered="false" :focusable="false" class="w-[75px]!">
+            <Plus theme="outline" size="16" fill="#fff" :stroke-width="4" />
+            <span class="ml-1 text-sm">新建</span>
+          </NButton>
+        </NDropdown>
+      </div>
+    </div>
 
-    <div class="h-full overflow-hidden rounded-2xl bg-white p-6 shadow-[0_2px_2px_#0000000a]">
+    <div class="h-full overflow-hidden">
       <RouterView v-slot="{ Component }">
         <Transition appear name="fade-slide" mode="out-in">
           <Component :is="Component" />

src/views/share/components/custom-loading.vue

@@ -14,16 +14,16 @@
 
 @keyframes l5 {
   0% {
-    background: #2468f2;
+    background: #000dff;
     box-shadow:
-      13px 0 #2468f2,
+      13px 0 #000dff,
       -13px 0 #0002;
   }
 
   33% {
     background: #0002;
     box-shadow:
-      13px 0 #2468f2,
+      13px 0 #000dff,
       -13px 0 #0002;
   }
 
@@ -31,14 +31,14 @@
     background: #0002;
     box-shadow:
       13px 0 #0002,
-      -13px 0 #2468f2;
+      -13px 0 #000dff;
   }
 
   100% {
-    background: #2468f2;
+    background: #000dff;
     box-shadow:
       13px 0 #0002,
-      -13px 0 #2468f2;
+      -13px 0 #000dff;
   }
 }
 </style>

uno.config.ts

@@ -16,12 +16,20 @@ export default defineConfig({
   ],
   theme: {
     colors: {
-      'theme-color': '#2468f2',
+      'theme-color': '#000DFF',
+      'hover-theme-color': '#575FFF',
+      'active-color': '#EFF0FF',
+      'font-color': '#333333',
+      'gray-font-color': '#999999',
+      'error-font-color': '#F25744',
     },
     height: {
       navbar: '56px',
       content: 'calc(100% - 56px)',
     },
+    borderRadius: {
+      theme: '5px',
+    },
     animation: {
       keyframes: {
         'card-reverse': `{ 0% { transform: rotateY(0deg); } 100% { transform: rotateY(1turn); } }`,