duanshuwen/zn-ai
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: 新增任务中心页面|右侧菜单调整

Browse Source
This commit is contained in:
duanshuwen
2025-12-22 22:56:00 +08:00
parent 3396c35bbb
commit 5caa9a5a4b
12 changed files with 107 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
html/task.html Normal file
View File

@@ -0,0 +1,16 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>NIANXX</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' http://8.138.234.141; connect-src 'self' http://8.138.234.141 https://api.iconify.design"
/>
</head>
<body>
<div id="app"></div>
<script type="module" src="../src/renderer/views/task/index.ts"></script>
</body>
</html>

10
src/renderer/components/HeaderBar/index.vue
View File

@@ -8,23 +8,23 @@
<native-tooltip :content="t('window.minimize')"> <native-tooltip :content="t('window.minimize')">
<button v-show="isMinimizable" class="flex items-center justify-center cursor-pointer w-[40px] h-[40px]" <button v-show="isMinimizable" class="flex items-center justify-center cursor-pointer w-[40px] h-[40px]"
@click="minimizeWindow"> @click="minimizeWindow">
<iconify-icon icon="material-symbols:check-indeterminate-small" color="#ffffff" :width="btnSize" <iconify-icon icon="material-symbols:check-indeterminate-small" color="#525866" :width="btnSize"
:height="btnSize" /> :height="btnSize" />
</button> </button>
</native-tooltip> </native-tooltip>
<native-tooltip :content="isMaximized ? t('window.restore') : t('window.maximize')"> <native-tooltip :content="isMaximized ? t('window.restore') : t('window.maximize')">
<button v-show="isMaximizable" class="flex items-center justify-center cursor-pointer w-[40px] h-[40px]" <button v-show="isMaximizable" class="flex items-center justify-center cursor-pointer w-[40px] h-[40px]"
@click="maximizeWindow"> @click="maximizeWindow">
<iconify-icon icon="material-symbols:chrome-maximize-outline-sharp" color="#ffffff" :width="btnSize" <iconify-icon icon="material-symbols:chrome-maximize-outline-sharp" color="#525866" :width="btnSize"
:height="btnSize" v-show="!isMaximized" /> :height="btnSize" v-show="!isMaximized" />
<iconify-icon icon="material-symbols:chrome-restore-outline-sharp" color="#ffffff" :width="btnSize" <iconify-icon icon="material-symbols:chrome-restore-outline-sharp" color="#525866" :width="btnSize"
:height="btnSize" v-show="isMaximized" /> :height="btnSize" v-show="isMaximized" />
</button> </button>
</native-tooltip> </native-tooltip>
<native-tooltip :content="t('window.close')"> <native-tooltip :content="t('window.close')">
<button v-show="isClosable" class="flex items-center justify-center cursor-pointer w-[40px] h-[40px]" <button v-show="isClosable" class="flex items-center justify-center cursor-pointer w-[40px] h-[40px]"
@click="handleClose"> @click="handleClose">
<iconify-icon icon="material-symbols:close" color="#ffffff" :width="btnSize" :height="btnSize" /> <iconify-icon icon="material-symbols:close" color="#525866" :width="btnSize" :height="btnSize" />
</button> </button>
</native-tooltip> </native-tooltip>
</div> </div>
@@ -71,6 +71,6 @@ function handleClose() {
<style scoped> <style scoped>
.title-bar { .title-bar {
background-color: rgba(255, 255, 255, 0.2); background-color: rgba(239, 246, 255, 0.8);
} }
</style> </style>

18
src/renderer/components/Layout/index.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<main class="bg-white box-border w-full h-screen flex pt-[8px] pb-[8px] pl-[8px] ">
<div class="flex-1 flex gap-[8px]">
<div class="flex-1 h-full">
</div>
<TaskList />
</div>
<SideMenus />
</main>
</template>
<script setup lang="ts" name="Layout">
import TaskList from '@renderer/components/TaskList/index.vue'
import SideMenus from '@renderer/components/SideMenus/index.vue'
</script>

4
src/renderer/components/SideMenus/index.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="w-[80px] h-full box-border flex flex-col items-center justify-center"> <div class="w-[80px] h-full box-border flex flex-col items-center pb-[8px]">
<div :class="['flex flex-col gap-[16px]', { 'mt-auto mb-[8px] shrink-1': item.id === 7 }]" <div :class="['flex flex-col gap-[16px]', { 'mt-auto mb-[8px] shrink-1': item.id === 4 }]"
v-for="(item) in menus" :key="item.id"> v-for="(item) in menus" :key="item.id">
<div :class="['cursor-pointer flex flex-col items-center justify-center']" @click="handleClick(item)"> <div :class="['cursor-pointer flex flex-col items-center justify-center']" @click="handleClick(item)">
<div :class="['box-border rounded-[16px] p-[8px]', { 'bg-white': item.id === currentId }]"> <div :class="['box-border rounded-[16px] p-[8px]', { 'bg-white': item.id === currentId }]">

50
src/renderer/constant/menus.ts
View File

@@ -1,12 +1,4 @@
/* import { RiHomeLine, RiFileEditLine, RiApps2AiLine, RiSettingsLine } from '@remixicon/vue'
* @Author: kongbeiwu lishaohua-520@qq.com
* @Date: 2025-12-21 23:02:06
* @LastEditors: kongbeiwu lishaohua-520@qq.com
* @LastEditTime: 2025-12-22 00:42:49
* @FilePath: /project/zn-ai/src/renderer/constant/menus.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { RiHomeLine, RiFileEditLine, RiFileListLine, RiHotelLine, RiChatQuoteLine, RiBarChartBoxAiLine, RiMoreLine, RiSettingsLine } from '@remixicon/vue'
// 菜单列表申明 // 菜单列表申明
export interface MenuItem { export interface MenuItem {
@@ -27,56 +19,24 @@ export const menus: MenuItem[] = [
activeColor: '#2B7FFF', activeColor: '#2B7FFF',
url: '/home', url: '/home',
}, },
{ {
id: 8, id: 2,
name: '知识库', name: '知识库',
icon: RiFileEditLine, icon: RiFileEditLine,
color: '#525866', color: '#525866',
activeColor: '#2B7FFF', activeColor: '#2B7FFF',
url: '/knowledge', url: '/knowledge',
}, },
{
id: 2,
name: '订单',
icon: RiFileListLine,
color: '#525866',
activeColor: '#2B7FFF',
url: '/order',
},
{ {
id: 3, id: 3,
name: '库存', name: '任务中心',
icon: RiHotelLine, icon: RiApps2AiLine,
color: '#525866', color: '#525866',
activeColor: '#2B7FFF', activeColor: '#2B7FFF',
url: '/stock', url: '/stock',
}, },
{ {
id: 4, id: 4,
name: '评价',
icon: RiChatQuoteLine,
color: '#525866',
activeColor: '#2B7FFF',
url: '/rate',
},
{
id: 5,
name: '数据看板',
icon: RiBarChartBoxAiLine,
color: '#525866',
activeColor: '#2B7FFF',
url: '/dashboard',
},
{
id: 6,
name: '更多',
icon: RiMoreLine,
color: '#525866',
activeColor: '#2B7FFF',
url: '/more',
},
{
id: 7,
name: '设置', name: '设置',
icon: RiSettingsLine, icon: RiSettingsLine,
color: '#525866', color: '#525866',

24
src/renderer/layout/index.vue
View File

@@ -1,24 +0,0 @@
<template>
<div class="bg box-border w-full h-screen flex pt-[8px] pb-[8px] pl-[8px] ">
<div class="flex-1 flex gap-[8px]">
<div class="flex-1 h-full">
<router-view v-slot="{ Component, route }">
<transition name="fade-transform" mode="out-in">
<keep-alive>
<component :is="Component" :key="route.path" />
</keep-alive>
</transition>
</router-view>
</div>
<TaskList />
</div>
<SideMenus />
</div>
</template>
<script setup lang="ts" name="Layout">
import TaskList from '@renderer/components/TaskList/index.vue'
import SideMenus from '@renderer/components/SideMenus/index.vue'
</script>

2
src/renderer/views/home/index.ts
View File

@@ -17,10 +17,12 @@ import 'element-plus/dist/index.css'
// 引入全局组件 // 引入全局组件
import HeaderBar from '@components/HeaderBar/index.vue' import HeaderBar from '@components/HeaderBar/index.vue'
import DragRegion from '@components/DragRegion/index.vue' import DragRegion from '@components/DragRegion/index.vue'
import Layout from '@components/Layout/index.vue'
const components: Plugin = (app) => { const components: Plugin = (app) => {
app.component('HeaderBar', HeaderBar); app.component('HeaderBar', HeaderBar);
app.component('DragRegion', DragRegion); app.component('DragRegion', DragRegion);
app.component('Layout', Layout);
} }
// 创建 Vue 应用实例 // 创建 Vue 应用实例

6
src/renderer/views/home/index.vue
View File

@@ -1,12 +1,12 @@
<template> <template>
<div class="bg-gray-100 h-screen flex flex-col"> <div class="bg h-screen flex flex-col">
<header-bar> <header-bar>
<drag-region class="w-full" /> <drag-region class="w-full" />
</header-bar> </header-bar>
<main class="box-border rounded-[16px]"> <layout>
</main> </layout>
</div> </div>
</template> </template>

7
src/renderer/views/more/index.vue
View File

@@ -1,7 +0,0 @@
<template>
<div>更多</div>
</template>
<script setup lang="ts">
</script>

40
src/renderer/views/task/index.ts Normal file
View File

@@ -0,0 +1,40 @@
import { createApp, type Plugin } from "vue"
import errorHandler from '@utils/errorHandler'
// 引入 Element Plus 组件库
import ElementPlus from 'element-plus'
import locale from 'element-plus/es/locale/lang/zh-cn'
// 引入 i18n 插件
import i18n from '@renderer/i18n'
import Task from './index.vue'
// 样式文件隔离
import '@renderer/styles/index.css'
import 'element-plus/dist/index.css'
// 引入全局组件
import HeaderBar from '@components/HeaderBar/index.vue'
import DragRegion from '@components/DragRegion/index.vue'
import Layout from '@components/Layout/index.vue'
const components: Plugin = (app) => {
app.component('HeaderBar', HeaderBar);
app.component('DragRegion', DragRegion);
app.component('Layout', Layout);
}
// 创建 Vue 应用实例
const app = createApp(Task);
const pinia = createPinia();
// 使用 Pinia 状态管理
app.use(pinia);
app.use(ElementPlus, { locale })
app.use(components)
app.use(i18n)
app.use(errorHandler)
// 挂载应用到 DOM
app.mount("#app");

15
src/renderer/views/task/index.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div class="bg-gray-100 h-screen flex flex-col">
<header-bar>
<drag-region class="w-full" />
</header-bar>
<layout>
</layout>
</div>
</template>
<script setup lang="ts">
</script>

1
vite.renderer.config.ts
View File

@@ -26,6 +26,7 @@ export default defineConfig(async () => {
resolve(__dirname, 'html/dialog.html'), resolve(__dirname, 'html/dialog.html'),
resolve(__dirname, 'html/setting.html'), resolve(__dirname, 'html/setting.html'),
resolve(__dirname, 'html/login.html'), resolve(__dirname, 'html/login.html'),
resolve(__dirname, 'html/task.html'),
] ]
} }
}, },