基础完成了增改查cpu和内存状态

src/components/common/ItemCard/index.vue

@@ -6,7 +6,7 @@ interface Prop {
   cardTypeStyle: PanelPanelConfigStyleEnum
   class?: string
   backgroundColor?: string
-  iconTextIconHideTitle: boolean // 隐藏小图标标题
+  iconTextIconHideTitle?: boolean // 隐藏小图标标题
   iconTextColor?: string // 小图标文字颜色
   iconText?: string // 小图标文字
 }

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

@@ -1,10 +1,5 @@
 <script setup lang="ts">
-// -------------------
+import { computed } from 'vue'
-// 系统监控图标临时使用（与 AppIcon/index.vue 一致）
-// 如果确定这种方案将 AppIcon/index.vue 封装成通用组件
-// -------------------
-
-import { ref } from 'vue'
 import { MonitorType } from '../typings'
 import type { CardStyle } from '../typings'
 import GenericMonitorCard from '../components/GenericMonitorCard/index.vue'
@@ -23,14 +18,20 @@ interface Prop {
   cardStyle: CardStyle
 }
 
-withDefaults(defineProps<Prop>(), {})
+const props = withDefaults(defineProps<Prop>(), {})
 
-const iconText = ref('自定义')
+const iconText = computed(() => {
-const refreshInterval = 5
+  switch (props.monitorType) {
-const svgStyle = {
+    case MonitorType.cpu:
-  width: '35px',
+      return 'CPU'
-  height: '35px',
+    case MonitorType.disk:
-}
+      return props.extendParam.path
+    case MonitorType.memory:
+      return 'RAM'
+  }
+  return ''
+})
+const refreshInterval = 50000
 </script>
 
 <template>
@@ -39,15 +40,17 @@ const svgStyle = {
       :icon-text-icon-hide-title="false"
       :card-type-style="cardTypeStyle"
       :icon-text="iconText"
+      :icon-text-color="iconTextColor"
+      :background-color="extendParam.backgroundColor"
       class="hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]"
     >
       <template #icon>
         <!-- 图标 -->
         <div class="w-[60px] h-[70px]">
           <div class="w-[60px] h-full flex items-center justify-center text-white">
-            <SvgIcon v-if="monitorType === MonitorType.cpu" icon="solar-cpu-bold" :style="svgStyle" />
+            <SvgIcon v-if="monitorType === MonitorType.cpu" icon="solar-cpu-bold" :style="{ color: extendParam.color }" style="width:35px;height:35px" />
-            <SvgIcon v-if="monitorType === MonitorType.memory" icon="material-symbols-memory-alt-rounded" :style="svgStyle" />
+            <SvgIcon v-if="monitorType === MonitorType.memory" icon="material-symbols-memory-alt-rounded" :style="{ color: extendParam.color }" style="width:35px;height:35px" />
-            <SvgIcon v-if="monitorType === MonitorType.disk" icon="clarity-hard-disk-solid" :style="svgStyle" />
+            <SvgIcon v-if="monitorType === MonitorType.disk" icon="clarity-hard-disk-solid" :style="{ color: extendParam.color }" style="width:35px;height:35px" />
           </div>
         </div>
       </template>
@@ -61,7 +64,7 @@ const svgStyle = {
             :card-type-style="PanelPanelConfigStyleEnum.info"
             :progress-color="extendParam?.progressColor"
             :progress-rail-color="extendParam?.progressRailColor"
-            :text-color="extendParam?.textColor"
+            :text-color="extendParam?.color"
             :refresh-interval="refreshInterval"
           />
           <Memory
@@ -69,7 +72,7 @@ const svgStyle = {
             :card-type-style="PanelPanelConfigStyleEnum.info"
             :progress-color="extendParam?.progressColor"
             :progress-rail-color="extendParam?.progressRailColor"
-            :text-color="extendParam?.textColor"
+            :text-color="extendParam?.color"
             :refresh-interval="refreshInterval"
           />
           <Disk
@@ -77,7 +80,7 @@ const svgStyle = {
             :card-type-style="PanelPanelConfigStyleEnum.info"
             :progress-color="extendParam?.progressColor"
             :progress-rail-color="extendParam?.progressRailColor"
-            :text-color="extendParam?.textColor"
+            :text-color="extendParam?.color"
             :path="extendParam?.path"
             :refresh-interval="refreshInterval"
           />
@@ -89,7 +92,7 @@ const svgStyle = {
           :card-type-style="PanelPanelConfigStyleEnum.icon"
           :progress-color="extendParam?.progressColor"
           :progress-rail-color="extendParam?.progressRailColor"
-          :text-color="extendParam?.textColor"
+          :text-color="extendParam?.color"
           :refresh-interval="refreshInterval"
         />
         <Memory
@@ -97,7 +100,7 @@ const svgStyle = {
           :card-type-style="PanelPanelConfigStyleEnum.icon"
           :progress-color="extendParam?.progressColor"
           :progress-rail-color="extendParam?.progressRailColor"
-          :text-color="extendParam?.textColor"
+          :text-color="extendParam?.color"
           :refresh-interval="refreshInterval"
         />
         <Disk
@@ -105,7 +108,7 @@ const svgStyle = {
           :card-type-style="PanelPanelConfigStyleEnum.icon"
           :progress-color="extendParam?.progressColor"
           :progress-rail-color="extendParam?.progressRailColor"
-          :text-color="extendParam?.textColor"
+          :text-color="extendParam?.color"
           :path="extendParam?.path"
           :refresh-interval="refreshInterval"
         />

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

@@ -1,30 +1,37 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed } from 'vue'
 import { NColorPicker, NForm, NFormItem } from 'naive-ui'
 import type { GenericProgressStyleExtendParam } from '../../typings'
 import GenericMonitorCard from '../../components/GenericMonitorCard/index.vue'
 import GenericProgress from '../../components/GenericProgress/index.vue'
 import { PanelPanelConfigStyleEnum } from '@/enums'
 
+interface Emit {
+  (e: 'update:genericProgressStyleExtendParam', visible: GenericProgressStyleExtendParam): void
+}
+
 const props = defineProps<{
   genericProgressStyleExtendParam: GenericProgressStyleExtendParam
 }>()
+const emit = defineEmits<Emit>()
 
-// const emit = defineEmits<{
+const data = computed({
-//   (e: 'update:genericProgressStyleExtendParam', visible: ProgressStyle): void
+  get: () => props.genericProgressStyleExtendParam,
-// }>()
+  set: (visible) => {
-
+    emit('update:genericProgressStyleExtendParam', visible)
-const data = ref(props.genericProgressStyleExtendParam)
+  },
+})
 </script>
 
 <template>
   <div>
+    <!-- <div>{{ genericProgressStyleExtendParam }}</div>
+    <div>{{ data }}</div> -->
     <div class="flex mb-5 justify-center">
       <div class="w-[200px]">
         <GenericMonitorCard
           icon-text-icon-hide-title
           :card-type-style="PanelPanelConfigStyleEnum.info"
-          class="hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]"
           icon="solar-cpu-bold"
           :background-color="data.backgroundColor"
           :text-color="data.color"
@@ -48,7 +55,6 @@ const data = ref(props.genericProgressStyleExtendParam)
         <GenericMonitorCard
           icon-text-icon-hide-title
           :card-type-style="PanelPanelConfigStyleEnum.icon"
-          class="hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]"
           icon="solar-cpu-bold"
           :background-color="data.backgroundColor"
           :icon-text-color="data.color"
@@ -66,7 +72,7 @@ const data = ref(props.genericProgressStyleExtendParam)
       </div>
     </div>
 
-    <NForm ref="formRef">
+    <NForm ref="formRef" v-model="data">
       <NFormItem label="主色">
         <NColorPicker v-model:value="data.progressColor" :modes="['hex']" size="small" />
       </NFormItem>

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

@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { computed, defineEmits, defineProps, ref } from 'vue'
+import { computed, defineEmits, defineProps, ref, watch } from 'vue'
 import { NButton, NModal, NTabPane, NTabs, useMessage } from 'naive-ui'
+import { MonitorType } from '../typings'
 import type { GenericProgressStyleExtendParam, MonitorData } from '../typings'
+import { add, saveByIndex } from '../common'
+
 import GenericProgressStyleEditor from './GenericProgressStyleEditor/index.vue'
 
 interface Props {
   visible: boolean
   monitorData: MonitorData | null
+  index: number | null
 }
 
 const props = defineProps<Props>()
@@ -14,22 +18,27 @@ const emit = defineEmits<Emit>()
 
 // 默认通用的进度扩展参数
 const defaultGenericProgressStyleExtendParam: GenericProgressStyleExtendParam = {
-  progressColor: 'white',
+  progressColor: '#fff',
-  progressRailColor: 'white',
+  progressRailColor: '#CFCFCFA8',
-  color: 'white',
+  color: '#fff',
   backgroundColor: '#2a2a2a6b',
 }
 
-// const currentData = ref<MonitorData>(props.monitorData)
+const defaultMonitorData: MonitorData = {
+  extendParam: defaultGenericProgressStyleExtendParam,
+  monitorType: MonitorType.cpu,
+}
 
-const currentDataExterdParam = ref<GenericProgressStyleExtendParam>(defaultGenericProgressStyleExtendParam)
+const active = ref<string>(MonitorType.cpu)
+const currentMonitorData = ref<MonitorData>(props.monitorData || { ...defaultMonitorData })
+const currentGenericProgressStyleExtendParam = ref<GenericProgressStyleExtendParam>({ ...defaultGenericProgressStyleExtendParam })
 
 const ms = useMessage()
 const submitLoading = ref(false)
 
 interface Emit {
   (e: 'update:visible', visible: boolean): void
-  (e: 'done', item: MonitorData): void// 创建完成
+  (e: 'done', item: boolean): void
 }
 
 // 更新值父组件传来的值
@@ -39,28 +48,78 @@ const show = computed({
     emit('update:visible', visible)
   },
 })
+
+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 }
+
+  if (!value)
+    handleResetGenericProgressStyleExtendParam()
+})
+
+function handleResetGenericProgressStyleExtendParam() {
+  currentGenericProgressStyleExtendParam.value = { ...defaultGenericProgressStyleExtendParam }
+}
+
+// 保存提交
+async function handleSubmit() {
+  if (currentMonitorData.value.monitorType === MonitorType.cpu || currentMonitorData.value.monitorType === MonitorType.memory) {
+    currentMonitorData.value.monitorType = active.value as MonitorType
+    currentMonitorData.value.extendParam = currentGenericProgressStyleExtendParam
+
+    console.log('保存', currentMonitorData.value.extendParam)
+  }
+
+  if (props.index !== null) {
+    const res = await saveByIndex(props.index, currentMonitorData.value)
+    if (res) {
+      show.value = false
+      emit('done', true)
+    }
+    else {
+      ms.error('保存失败')
+    }
+  }
+  else {
+    const res = await add(currentMonitorData.value)
+    if (res) {
+      show.value = false
+      emit('done', true)
+    }
+    else {
+      ms.error('保存失败')
+    }
+  }
+}
 </script>
 
 <template>
   <NModal v-model:show="show" preset="card" size="small" style="width: 600px;border-radius: 1rem;" :title="monitorData ? '修改项目' : '添加项目'">
     <!-- 选择监视器 -->
     <div>
-      progressStyle值：{{ JSON.stringify(currentDataExterdParam) }}
+      <!-- progressStyle值：{{ JSON.stringify(currentGenericProgressStyleExtendParam) }} -->
     </div>
-    <NTabs type="segment">
+    <NTabs v-model:value="active" type="segment">
-      <NTabPane name="chap1" tab="CPU">
+      <NTabPane :name="MonitorType.cpu" tab="CPU状态">
-        <GenericProgressStyleEditor v-model:genericProgressStyleExtendParam="currentDataExterdParam" />
+        <GenericProgressStyleEditor v-model:genericProgressStyleExtendParam="currentGenericProgressStyleExtendParam" />
+        <NButton @click="handleResetGenericProgressStyleExtendParam">
+          重置
+        </NButton>
       </NTabPane>
-      <NTabPane name="chap2" tab="内存">
+      <NTabPane :name="MonitorType.memory" tab="内存状态">
-        <!--  -->
+        <GenericProgressStyleEditor v-model:genericProgressStyleExtendParam="currentGenericProgressStyleExtendParam" />
+        <NButton @click="handleResetGenericProgressStyleExtendParam">
+          重置
+        </NButton>
       </NTabPane>
-      <NTabPane name="chap3" tab="磁盘">
+      <NTabPane :name="MonitorType.disk" tab="磁盘状态">
         <!--  -->
       </NTabPane>
     </NTabs>
 
     <template #footer>
-      <NButton type="success" :loading="submitLoading" style="float: right;" @click="handleValidateButtonClick">
+      <NButton type="success" :loading="submitLoading" style="float: right;" @click="handleSubmit">
         确定
       </NButton>
     </template>

src/components/deskModule/SystemMonitor/common.ts

@@ -0,0 +1,87 @@
+import type { MonitorData } from './typings'
+import { useModuleConfig } from '@/store/modules'
+
+const modelName = 'systemMonitor'
+const moduleConfig = useModuleConfig()
+
+export async function saveAll(value: MonitorData[]) {
+  return await moduleConfig.saveToCloud(modelName, { list: value })
+}
+
+export async function getAll(): Promise< MonitorData[]> {
+  const res = await moduleConfig.getValueByNameFromCloud<{ list: MonitorData[] }>(modelName)
+  if (res.code === 0 && res.data && res.data.list)
+    return res.data.list
+  return []
+}
+
+export async function add(value: MonitorData): Promise<boolean> {
+  let success = true
+  let newData: MonitorData[] = []
+  try {
+    const data = await getAll()
+    if (data)
+      newData = data
+
+    newData.push(value)
+    const res = await saveAll(newData)
+    if (res.code !== 0)
+      console.log('save failed', res)
+  }
+  catch (error) {
+    console.error(error)
+    success = false
+  }
+  return success
+}
+
+export async function saveByIndex(index: number | undefined, value: MonitorData): Promise<boolean> {
+  if (!index)
+    index = 0
+
+  let success = true
+  let newData: MonitorData[] = []
+  try {
+    const data = await getAll()
+    if (data)
+      newData = data
+
+    newData[index] = value
+    const res = await saveAll(newData)
+    if (res.code !== 0)
+      console.log('save failed', res)
+  }
+  catch (error) {
+    console.error(error)
+    success = false
+  }
+  return success
+}
+
+export async function getByIndex(index: number): Promise<MonitorData | null> {
+  try {
+    const data = await getAll()
+    if (data[index])
+      return data[index]
+  }
+  catch (error) {
+
+  }
+
+  return null
+}
+
+export async function deleteByIndex(index: number): Promise<boolean> {
+  let success = true
+  try {
+    const data = await getAll()
+    if (data[index])
+      data.splice(index, 1)
+    saveAll(data)
+  }
+  catch (error) {
+    success = false
+  }
+
+  return success
+}

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

@@ -12,7 +12,7 @@ interface Prop {
 //   size?: number // 默认70
   extendParam?: any
   iconTextColor?: string
-  iconTextIconHideTitle: boolean
+  iconTextIconHideTitle?: boolean
   iconText?: string
   textColor?: string
   cardTypeStyle: PanelPanelConfigStyleEnum
@@ -29,11 +29,12 @@ const propClass = ref(props.class)
 <template>
   <div class="w-full">
     <ItemCard
-      icon-text-icon-hide-title
       :card-type-style="cardTypeStyle"
       :icon-text="iconText"
+      :icon-text-color="iconTextColor"
       :class="propClass"
       :background-color="backgroundColor"
+      :icon-text-icon-hide-title="iconTextIconHideTitle"
     >
       <template #info>
         <!-- 图标 -->

src/components/deskModule/SystemMonitor/index.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { VueDraggable } from 'vue-draggable-plus'
 import { NButton } from 'naive-ui'
 import AppIconSystemMonitor from './AppIconSystemMonitor/index.vue'
-import { MonitorType } from './typings'
+import type { CardStyle, MonitorData } from './typings'
-import type { CardStyle, MonitorData, ProgressStyle } from './typings'
 import Edit from './Edit/index.vue'
+import { getAll } from './common'
 import { useAuthStore, usePanelState } from '@/store'
 import { PanelPanelConfigStyleEnum } from '@/enums'
 import { VisitMode } from '@/enums/auth'
@@ -18,21 +18,25 @@ interface MonitorGroup extends Panel.ItemIconGroup {
 }
 const panelState = usePanelState()
 const authStore = useAuthStore()
-const systemMonitorData = ref<SystemMonitor.GetAllRes | null>(null)
+// const systemMonitorData = ref<SystemMonitor.GetAllRes | null>(null)
 const monitorGroup = ref<MonitorGroup>({
   hoverStatus: false,
   sortStatus: false,
 })
-const progressStyle = ref<ProgressStyle>({
+// const progressStyle = ref<ProgressStyle>({
-  color: 'white',
+//   color: 'white',
-  railColor: 'rgba(0, 0, 0, 0.2)',
+//   railColor: 'rgba(0, 0, 0, 0.2)',
-  height: 5,
+//   height: 5,
-})
+// })
 
-const EditShowStatus = ref<boolean>(true)
+const editShowStatus = ref<boolean>(false)
+const editData = ref<MonitorData | null>(null)
+const editIndex = ref<number | null>(null)
 
 function handleAddItem() {
-  EditShowStatus.value = true
+  editShowStatus.value = true
+  editData.value = null
+  editIndex.value = null
 }
 
 function handleSetSortStatus(sortStatus: boolean) {
@@ -54,31 +58,25 @@ const cardStyle: CardStyle = {
   background: '#2a2a2a6b',
 }
 
-const monitorDatas = ref<MonitorData[]>([
+const monitorDatas = ref<MonitorData[]>([])
-  {
+
-    monitorType: MonitorType.cpu,
+function handleClick(index: number, item: MonitorData) {
-    extendParam: {
+  editShowStatus.value = true
-      progressStyle,
+  editData.value = item
-    },
+  editIndex.value = index
-    description: 'CPU状态',
+}
-    cardStyle,
+
-  },
+async function getData() {
-  {
+  monitorDatas.value = await getAll()
-    monitorType: MonitorType.memory,
+}
-    cardStyle,
+
-    extendParam: {
+onMounted(() => {
-      progressStyle,
+  getData()
-    },
+})
-  },
+
-  {
+function handleSaveDone() {
-    monitorType: MonitorType.disk,
+  getData()
-    extendParam: {
+}
-      progressStyle,
-      path: 'C:',
-    },
-    cardStyle,
-  },
-])
 </script>
 
 <template>
@@ -109,7 +107,6 @@ const monitorDatas = ref<MonitorData[]>([
       </div>
 
       <!-- 详情图标 -->
-      <!-- <div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info"> -->
       <div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info">
         <VueDraggable
           v-model="monitorDatas" item-key="sort" :animation="300"
@@ -117,7 +114,12 @@ const monitorDatas = ref<MonitorData[]>([
           filter=".not-drag"
           :disabled="!monitorGroup.sortStatus"
         >
-          <div v-for="item, index in monitorDatas" :key="index" :title="item.description" @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)">
+          <div
+            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"
               :icon-text-icon-hide-title="false"
@@ -139,7 +141,12 @@ const monitorDatas = ref<MonitorData[]>([
             filter=".not-drag"
             :disabled="!monitorGroup.sortStatus"
           >
-            <div v-for="item, index in monitorDatas" :key="index" :title="item.description" @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)">
+            <div
+              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"
                 :icon-text-icon-hide-title="false"
@@ -168,7 +175,7 @@ const monitorDatas = ref<MonitorData[]>([
       </div>
     </div>
 
-    <Edit v-model:visible="EditShowStatus" />
+    <Edit v-model:visible="editShowStatus" :monitor-data="editData" :index="editIndex" @done="handleSaveDone" />
   </div>
 </template>
 

src/components/deskModule/SystemMonitor/typings.ts

@@ -12,7 +12,7 @@ export interface MonitorData {
   monitorType: MonitorType
   extendParam?: { [key: string]: [value:any] } | any
   description?: string
-  cardStyle: CardStyle
+  // cardStyle: CardStyle
 }
 
 export interface ProgressStyle {

src/store/modules/moduleConfig/index.ts

@@ -33,10 +33,10 @@ export const useModuleConfig = defineStore('module-config-store', {
     },
 
     // 保存到网络
-    saveToCloud(name: string, value: any) {
+    async saveToCloud(name: string, value: any) {
       const moduleName = `module-${name}`
       // 保存至网络
-      save(moduleName, value)
+      return save(moduleName, value)
     },
 
     // 从网络同步