初步完成了增改查包括磁盘状态

src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue

@@ -31,7 +31,6 @@ function formatdiskToByte(v: number): number {
 }
 
 async function getData() {
-  console.log(props.path)
   try {
     const { data, code } = await getDiskStateByPath<SystemMonitor.DiskInfo>(props.path)
     if (code === 0)

src/components/deskModule/SystemMonitor/Edit/DiskEditor/index.vue

@@ -6,6 +6,7 @@ import GenericMonitorCard from '../../components/GenericMonitorCard/index.vue'
 import GenericProgress from '../../components/GenericProgress/index.vue'
 import { PanelPanelConfigStyleEnum } from '@/enums'
 import { getDiskMountpoints } from '@/api/system/systemMonitor'
+import { defautSwatchesBackground } from '@/utils/defaultData'
 
 interface Emit {
   (e: 'update:diskExtendParam', visible: DiskExtendParam): void
@@ -21,7 +22,7 @@ const mountPointList = ref<{
   value: string
 }[]>([])
 
-const data = computed({
+const extendParam = computed({
   get: () => props.diskExtendParam,
   set: (visible) => {
     emit('update:diskExtendParam', visible)
@@ -34,8 +35,11 @@ async function getMountPointList() {
     mountPointList.value = []
     for (let i = 0; i < data.length; i++) {
       const element = data[i]
+      if (i === 0 && !extendParam.value.path)
+        extendParam.value.path = element.mountpoint
+
       mountPointList.value.push({
-        label: element.device,
+        label: element.mountpoint,
         value: element.mountpoint,
       })
     }
@@ -52,26 +56,25 @@ onMounted(() => {
 
 <template>
   <div>
-    <!-- <div>{{ genericProgressStyleExtendParam }}</div>
+    <!-- <div>{{ diskExtendParam }}</div> -->
-    <div>{{ data }}</div> -->
+    <div class="flex mb-5 justify-center transparent-grid p-2 rounded-xl border">
-    <div class="flex mb-5 justify-center">
       <div class="w-[200px]">
         <GenericMonitorCard
           icon-text-icon-hide-title
           :card-type-style="PanelPanelConfigStyleEnum.info"
           icon="solar-cpu-bold"
-          :background-color="data.backgroundColor"
+          :background-color="extendParam.backgroundColor"
-          :text-color="data.color"
+          :text-color="extendParam.color"
         >
           <template #info>
             <GenericProgress
-              :progress-color="data.progressColor"
+              :progress-color="extendParam.progressColor"
-              :progress-rail-color="data.progressRailColor"
+              :progress-rail-color="extendParam.progressRailColor"
               :percentage="50"
               :progress-height="5"
               info-card-left-text="DEMO"
               info-card-right-text="TEXT"
-              :text-color="data.color"
+              :text-color="extendParam.color"
               :card-type-style="PanelPanelConfigStyleEnum.info"
             />
           </template>
@@ -83,15 +86,15 @@ onMounted(() => {
           icon-text-icon-hide-title
           :card-type-style="PanelPanelConfigStyleEnum.icon"
           icon="solar-cpu-bold"
-          :background-color="data.backgroundColor"
+          :background-color="extendParam.backgroundColor"
-          :icon-text-color="data.color"
+          :icon-text-color="extendParam.color"
         >
           <template #small>
             <GenericProgress
-              :progress-color="data.progressColor"
+              :progress-color="extendParam.progressColor"
-              :progress-rail-color="data.progressRailColor"
+              :progress-rail-color="extendParam.progressRailColor"
               :percentage="50"
-              :text-color="data.color"
+              :text-color="extendParam.color"
               :card-type-style="PanelPanelConfigStyleEnum.icon"
             />
           </template>
@@ -99,22 +102,32 @@ onMounted(() => {
       </div>
     </div>
 
-    <NForm ref="formRef" v-model="data">
+    <NForm ref="formRef" v-model="extendParam">
-      <NFormItem label="挂载点">
+      <NFormItem label="磁盘挂载点">
-        <NSelect v-model:value="data.path" size="small" :options="mountPointList" />
+        <NSelect v-model:value="extendParam.path" size="small" :options="mountPointList" />
       </NFormItem>
       <NFormItem label="主色">
-        <NColorPicker v-model:value="data.progressColor" :modes="['hex']" size="small" />
+        <NColorPicker v-model:value="extendParam.progressColor" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
       </NFormItem>
       <NFormItem label="副色">
-        <NColorPicker v-model:value="data.progressRailColor" :modes="['hex']" size="small" />
+        <NColorPicker v-model:value="extendParam.progressRailColor" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
       </NFormItem>
       <NFormItem label="文字图标颜色">
-        <NColorPicker v-model:value="data.color" :modes="['hex']" size="small" />
+        <NColorPicker v-model:value="extendParam.color" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
       </NFormItem>
       <NFormItem label="卡片背景色">
-        <NColorPicker v-model:value="data.backgroundColor" :modes="['hex']" size="small" />
+        <NColorPicker v-model:value="extendParam.backgroundColor" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
       </NFormItem>
     </NForm>
   </div>
 </template>
+
+<style>
+.transparent-grid {
+    background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%),
+                      linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%);
+    background-size: 16px 16px;
+    background-position: 0 0, 8px 8px;
+    background-color: #e2e8f0;
+}
+</style>

src/components/deskModule/SystemMonitor/Edit/GenericProgressStyleEditor/index.vue

@@ -5,6 +5,7 @@ import type { GenericProgressStyleExtendParam } from '../../typings'
 import GenericMonitorCard from '../../components/GenericMonitorCard/index.vue'
 import GenericProgress from '../../components/GenericProgress/index.vue'
 import { PanelPanelConfigStyleEnum } from '@/enums'
+import { defautSwatchesBackground } from '@/utils/defaultData'
 
 interface Emit {
   (e: 'update:genericProgressStyleExtendParam', visible: GenericProgressStyleExtendParam): void
@@ -27,7 +28,7 @@ const data = computed({
   <div>
     <!-- <div>{{ genericProgressStyleExtendParam }}</div>
     <div>{{ data }}</div> -->
-    <div class="flex mb-5 justify-center">
+    <div class="flex mb-5 justify-center transparent-grid p-2 rounded-xl border">
       <div class="w-[200px]">
         <GenericMonitorCard
           icon-text-icon-hide-title
@@ -74,17 +75,27 @@ const data = computed({
 
     <NForm ref="formRef" v-model="data">
       <NFormItem label="主色">
-        <NColorPicker v-model:value="data.progressColor" :modes="['hex']" size="small" />
+        <NColorPicker v-model:value="data.progressColor" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
       </NFormItem>
       <NFormItem label="副色">
-        <NColorPicker v-model:value="data.progressRailColor" :modes="['hex']" size="small" />
+        <NColorPicker v-model:value="data.progressRailColor" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
       </NFormItem>
       <NFormItem label="文字图标颜色">
-        <NColorPicker v-model:value="data.color" :modes="['hex']" size="small" />
+        <NColorPicker v-model:value="data.color" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
       </NFormItem>
       <NFormItem label="卡片背景色">
-        <NColorPicker v-model:value="data.backgroundColor" :modes="['hex']" size="small" />
+        <NColorPicker v-model:value="data.backgroundColor" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
       </NFormItem>
     </NForm>
   </div>
 </template>
+
+<style>
+.transparent-grid {
+    background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%),
+                      linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%);
+    background-size: 16px 16px;
+    background-position: 0 0, 8px 8px;
+    background-color: #e2e8f0;
+}
+</style>

src/components/deskModule/SystemMonitor/Edit/index.vue

@@ -63,13 +63,16 @@ watch(() => props.visible, (value) => {
   active.value = props.monitorData?.monitorType || MonitorType.cpu
   if (props.monitorData?.monitorType === MonitorType.cpu || props.monitorData?.monitorType === MonitorType.memory)
     currentGenericProgressStyleExtendParam.value = { ...props.monitorData?.extendParam }
+  else if (props.monitorData?.monitorType === MonitorType.disk)
+    currentDiskExtendParam.value = { ...props.monitorData?.extendParam }
 
   if (!value)
-    handleResetGenericProgressStyleExtendParam()
+    handleResetExtendParam()
 })
 
-function handleResetGenericProgressStyleExtendParam() {
+function handleResetExtendParam() {
   currentGenericProgressStyleExtendParam.value = { ...defaultGenericProgressStyleExtendParam }
+  currentDiskExtendParam.value = { ...defaultDiskExtendParam }
 }
 
 // 保存提交
@@ -109,25 +112,26 @@ async function handleSubmit() {
 <template>
   <NModal v-model:show="show" preset="card" size="small" style="width: 600px;border-radius: 1rem;" :title="monitorData ? '修改项目' : '添加项目'">
     <!-- 选择监视器 -->
-    <div>
+    <!-- <div>
-      <!-- progressStyle值：{{ JSON.stringify(currentGenericProgressStyleExtendParam) }} -->
+      {{ JSON.stringify(currentGenericProgressStyleExtendParam) }}
-    </div>
+      {{ JSON.stringify(currentDiskExtendParam) }}
+    </div> -->
     <NTabs v-model:value="active" type="segment">
       <NTabPane :name="MonitorType.cpu" tab="CPU状态">
         <GenericProgressStyleEditor v-model:genericProgressStyleExtendParam="currentGenericProgressStyleExtendParam" />
-        <NButton @click="handleResetGenericProgressStyleExtendParam">
+        <NButton @click="handleResetExtendParam">
           重置
         </NButton>
       </NTabPane>
       <NTabPane :name="MonitorType.memory" tab="内存状态">
         <GenericProgressStyleEditor v-model:genericProgressStyleExtendParam="currentGenericProgressStyleExtendParam" />
-        <NButton @click="handleResetGenericProgressStyleExtendParam">
+        <NButton @click="handleResetExtendParam">
           重置
         </NButton>
       </NTabPane>
       <NTabPane :name="MonitorType.disk" tab="磁盘状态">
         <DiskEditor v-model:disk-extend-param="currentDiskExtendParam" />
-        <NButton @click="handleResetGenericProgressStyleExtendParam">
+        <NButton @click="handleResetExtendParam">
           重置
         </NButton>
       </NTabPane>

src/components/deskModule/SystemMonitor/index.vue

@@ -62,8 +62,11 @@ const monitorDatas = ref<MonitorData[]>([])
 
 function handleClick(index: number, item: MonitorData) {
   editShowStatus.value = true
+
   editData.value = item
   editIndex.value = index
+
+  console.log(editData.value)
 }
 
 async function getData() {
@@ -77,6 +80,10 @@ onMounted(() => {
 function handleSaveDone() {
   getData()
 }
+
+function handleSaveSort() {
+
+}
 </script>
 
 <template>
@@ -118,7 +125,6 @@ function handleSaveDone() {
             v-for="item, index in monitorDatas" :key="index"
             :title="item.description"
             @click="handleClick(index, item)"
-            @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)"
           >
             <AppIconSystemMonitor
               :extend-param="item.extendParam"
@@ -145,7 +151,6 @@ function handleSaveDone() {
               v-for="item, index in monitorDatas" :key="index"
               :title="item.description"
               @click="handleClick(index, item)"
-              @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)"
             >
               <AppIconSystemMonitor
                 :extend-param="item.extendParam"
@@ -163,7 +168,7 @@ function handleSaveDone() {
       <!-- 编辑栏 -->
       <div v-if="monitorGroup.sortStatus" class="flex mt-[10px]">
         <div>
-          <NButton color="#2a2a2a6b" @click="handleSaveSort(monitorGroup)">
+          <NButton color="#2a2a2a6b" @click="handleSaveSort()">
             <template #icon>
               <SvgIcon class="text-white font-xl" icon="material-symbols:save" />
             </template>

src/utils/defaultData/index.ts

@@ -0,0 +1,10 @@
+export const defautSwatchesBackground = [
+  '#00000000',
+  '#000000',
+  '#ffffff',
+  '#18A058',
+  '#2080F0',
+  '#F0A020',
+  'rgba(208, 48, 80, 1)',
+  '#C418D1FF',
+]