初步完成了编辑器

2024-01-05 13:27:29 +08:00
parent 1474f796fc
commit 0d0421c8eb
13 changed files with 520 additions and 163 deletions
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref } 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'
+
+const props = defineProps<{
+  genericProgressStyleExtendParam: GenericProgressStyleExtendParam
+}>()
+
+// const emit = defineEmits<{
+//   (e: 'update:genericProgressStyleExtendParam', visible: ProgressStyle): void
+// }>()
+
+const data = ref(props.genericProgressStyleExtendParam)
+</script>
+
+<template>
+  <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"
+        >
+          <template #info>
+            <GenericProgress
+              :progress-color="data.progressColor"
+              :progress-rail-color="data.progressRailColor"
+              :percentage="50"
+              :progress-height="5"
+              info-card-left-text="DEMO"
+              info-card-right-text="TEXT"
+              :text-color="data.color"
+              :card-type-style="PanelPanelConfigStyleEnum.info"
+            />
+          </template>
+        </GenericMonitorCard>
+      </div>
+
+      <div class="w-[80px] ml-2">
+        <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"
+        >
+          <template #small>
+            <GenericProgress
+              :progress-color="data.progressColor"
+              :progress-rail-color="data.progressRailColor"
+              :percentage="50"
+              :text-color="data.color"
+              :card-type-style="PanelPanelConfigStyleEnum.icon"
+            />
+          </template>
+        </GenericMonitorCard>
+      </div>
+    </div>
+
+    <NForm ref="formRef">
+      <NFormItem label="主色">
+        <NColorPicker v-model:value="data.progressColor" :modes="['hex']" size="small" />
+      </NFormItem>
+      <NFormItem label="副色">
+        <NColorPicker v-model:value="data.progressRailColor" :modes="['hex']" size="small" />
+      </NFormItem>
+      <NFormItem label="文字图标颜色">
+        <NColorPicker v-model:value="data.color" :modes="['hex']" size="small" />
+      </NFormItem>
+      <NFormItem label="卡片背景色">
+        <NColorPicker v-model:value="data.backgroundColor" :modes="['hex']" size="small" />
+      </NFormItem>
+    </NForm>
+  </div>
+</template>
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { NColorPicker, NForm, NFormItem } from 'naive-ui'
+import type { ProgressStyle } from '../../typings'
+
+const props = defineProps<{
+  progressStyle: ProgressStyle
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:progressStyle', visible: ProgressStyle): void // 定义修改父组件（prop内）的值的事件
+}>()
+
+const data = computed({
+  get: () => props.progressStyle,
+  set() {
+    emit('update:progressStyle', data.value)
+  },
+})
+</script>
+
+<template>
+  <div>
+    <NForm ref="formRef" :model="data">
+      <NFormItem path="url" label="主色">
+        <!-- <NSelect :style="{ width: '100px' }" :options="urlProtocolOptions" /> -->
+        <NColorPicker v-model:value="data.color" size="small" />
+      </NFormItem>
+      <NFormItem path="url" label="背景色">
+        <!-- <NSelect :style="{ width: '100px' }" :options="urlProtocolOptions" /> -->
+        <NColorPicker v-model:value="data.railColor" size="small" />
+      </NFormItem>
+    </NForm>
+  </div>
+</template>
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, ref } from 'vue'
+import { NButton, NModal, NTabPane, NTabs, useMessage } from 'naive-ui'
+import type { GenericProgressStyleExtendParam, MonitorData } from '../typings'
+import GenericProgressStyleEditor from './GenericProgressStyleEditor/index.vue'
+
+interface Props {
+  visible: boolean
+  monitorData: MonitorData | null
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emit>()
+
+// 默认通用的进度扩展参数
+const defaultGenericProgressStyleExtendParam: GenericProgressStyleExtendParam = {
+  progressColor: 'white',
+  progressRailColor: 'white',
+  color: 'white',
+  backgroundColor: '#2a2a2a6b',
+}
+
+// const currentData = ref<MonitorData>(props.monitorData)
+
+const currentDataExterdParam = ref<GenericProgressStyleExtendParam>(defaultGenericProgressStyleExtendParam)
+
+const ms = useMessage()
+const submitLoading = ref(false)
+
+interface Emit {
+  (e: 'update:visible', visible: boolean): void
+  (e: 'done', item: MonitorData): void// 创建完成
+}
+
+// 更新值父组件传来的值
+const show = computed({
+  get: () => props.visible,
+  set: (visible: boolean) => {
+    emit('update:visible', visible)
+  },
+})
+</script>
+
+<template>
+  <NModal v-model:show="show" preset="card" size="small" style="width: 600px;border-radius: 1rem;" :title="monitorData ? '修改项目' : '添加项目'">
+    <!-- 选择监视器 -->
+    <div>
+      progressStyle值：{{ JSON.stringify(currentDataExterdParam) }}
+    </div>
+    <NTabs type="segment">
+      <NTabPane name="chap1" tab="CPU">
+        <GenericProgressStyleEditor v-model:genericProgressStyleExtendParam="currentDataExterdParam" />
+      </NTabPane>
+      <NTabPane name="chap2" tab="内存">
+        <!--  -->
+      </NTabPane>
+      <NTabPane name="chap3" tab="磁盘">
+        <!--  -->
+      </NTabPane>
+    </NTabs>
+
+    <template #footer>
+      <NButton type="success" :loading="submitLoading" style="float: right;" @click="handleValidateButtonClick">
+        确定
+      </NButton>
+    </template>
+  </NModal>
+</template>