feat: add widget header

src/views/dashboard/Edit.vue

@@ -17,6 +17,7 @@ limitations under the License. -->
     <el-button size="mini" @click="dashboardStore.addWidget">
       Add Widget
     </el-button>
+    <el-button size="mini">Dashboard Settings</el-button>
     <el-button size="mini">Save As</el-button>
     <el-button size="mini">Discard</el-button>
     <el-button size="mini" type="primary">Apply</el-button>

src/views/dashboard/panel/Widget.vue

@@ -13,15 +13,51 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="header">title</div>
-  <div class="body">chart</div>
+  <div class="widget">
+    <div class="header flex-h">
+      <div>title</div>
+      <div class="operations">
+        <Icon class="mr-5" size="sm" iconName="createmode_editedit" />
+        <Icon size="sm" iconName="clearclose" @click="removeWidget" />
+      </div>
+    </div>
+    <div class="body">chart</div>
+  </div>
 </template>
 <script lang="ts" setup>
 import { defineProps } from "vue";
 import type { PropType } from "vue";
 import { GridItemData } from "@/types/dashboard";
+import { useDashboardStore } from "@/store/modules/dashboard";
 
 const props = defineProps({
   item: { type: Object as PropType<GridItemData> },
 });
+const dashboardStore = useDashboardStore();
+function removeWidget() {
+  dashboardStore.removeWidget(props.item);
+}
 </script>
+<style lang="scss" scoped>
+.widget {
+  font-size: 12px;
+  // position: relative;
+}
+
+.header {
+  height: 30px;
+  padding: 5px;
+  width: 100%;
+  border-bottom: 1px solid #eee;
+  justify-content: space-between;
+}
+
+.operations {
+  color: #aaa;
+  cursor: pointer;
+}
+
+.body {
+  padding: 5px;
+}
+</style>