refactor: 优化代码结构和样式

- 移除无用代码和重复的导入
- 使用更可靠的URL验证方法
- 优化echarts图表导入方式
- 调整登录页面和模态框样式
- 简化组件间通信方式

src/utils/validate.ts

@@ -10,25 +10,18 @@ export function isPathMatch(pattern: string, path: string): boolean {
   return regex.test(path)
 }
 
-/**
- * 判断value字符串是否为空 
- * @param value 要检查的值
- * @returns 是否为空
- */
-export function isEmpty(value: any): boolean {
-  if (value == null || value === "" || value === "undefined") {
-    return true
-  }
-  return false
-}
-
 /**
  * 判断url是否是http或https 
  * @param url URL字符串
  * @returns 是否为http或https
  */
 export function isHttp(url: string): boolean {
-  return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
+  try {
+    const parsedUrl = new URL(url)
+    return parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:'
+  } catch {
+    return false
+  }
 }
 
 /**
@@ -101,23 +94,4 @@ export function validEmail(email: string): boolean {
   return reg.test(email)
 }
 
-/**
- * 判断是否为字符串
- * @param str 要检查的值
- * @returns 是否为字符串
- */
-export function isString(str: any): boolean {
-  return typeof str === 'string' || str instanceof String
-}
 
-/**
- * 判断是否为数组
- * @param arg 要检查的值
- * @returns 是否为数组
- */
-export function isArray<T>(arg: T | T[]): arg is T[] {
-  if (typeof Array.isArray === 'undefined') {
-    return Object.prototype.toString.call(arg) === '[object Array]'
-  }
-  return Array.isArray(arg)
-}

src/views/auth/components/login.vue

@@ -164,7 +164,6 @@ function handleForgot() {
 
 <style lang="scss" scoped>
 .login-page {
-  margin-top: 242px;
   width: 400px;
   display: flex;
   flex-direction: column;

src/views/auth/index.vue

@@ -41,6 +41,7 @@ function handleSwitch(component: AuthComponent) {
     backdrop-filter: blur(40px);
     display: flex;
     justify-content: center;
+    align-items: center;
   }
 }
 </style>

src/views/sdk/components/SDKModal.vue

@@ -109,7 +109,6 @@ const dialogVisible = defineModel<boolean>('visible', {
   default: false
 })
 const formRef = ref<FormInstance>()
-const emit = defineEmits(['update:visible'])
 
 const formData = reactive({
   instanceId: '',
@@ -136,11 +135,11 @@ const rules = reactive<FormRules>({
 
 
 const close = () => {
-  emit('update:visible', false)
+  dialogVisible.value = false
 }
 
 const confirm = () => {
-  emit('update:visible', false)
+  dialogVisible.value = false
 }
 
 const handleSubmit = async () => {

src/views/sdk/components/UsageAnalysis.vue

@@ -53,8 +53,7 @@
 
 <script setup lang="ts">
 import { User } from '@element-plus/icons-vue'
-import { use } from 'echarts/core'
-import * as echarts from 'echarts/core'
+import { use, graphic } from 'echarts/core'
 import { LineChart } from 'echarts/charts'
 import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -157,7 +156,7 @@ const bandwidthInOutOption = computed(() => createBaseChartOption({
       lineStyle: { color: '#C9AAFF' },
       itemStyle: { color: '#C9AAFF' },
       areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        color: new graphic.LinearGradient(0, 0, 0, 1, [
           { offset: 0, color: 'rgba(155,89,182,0.3)' },
           { offset: 1, color: 'rgba(155,89,182,0)' },
         ]),
@@ -171,7 +170,7 @@ const bandwidthInOutOption = computed(() => createBaseChartOption({
       lineStyle: { color: '#60CFFF' },
       itemStyle: { color: '#60CFFF' },
       areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        color: new graphic.LinearGradient(0, 0, 0, 1, [
           { offset: 0, color: 'rgba(52,152,219,0.3)' },
           { offset: 1, color: 'rgba(52,152,219,0)' },
         ]),
@@ -191,7 +190,7 @@ const connectionsOption = computed(() => createBaseChartOption({
       lineStyle: { color: '#FFBB5C' },
       itemStyle: { color: '#FFBB5C' },
       areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        color: new graphic.LinearGradient(0, 0, 0, 1, [
           { offset: 0, color: 'rgba(243,156,18,0.3)' },
           { offset: 1, color: 'rgba(243,156,18,0)' },
         ]),
@@ -211,7 +210,7 @@ const newUsersOption = computed(() => createBaseChartOption({
       lineStyle: { color: '#60FFC7' },
       itemStyle: { color: '#60FFC7' },
       areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        color: new graphic.LinearGradient(0, 0, 0, 1, [
           { offset: 0, color: 'rgba(96,255,199,0.3)' },
           { offset: 1, color: 'rgba(96,255,199,0)' },
         ]),
@@ -225,7 +224,7 @@ const newUsersOption = computed(() => createBaseChartOption({
       lineStyle: { color: '#FFFAC3' },
       itemStyle: { color: '#FFFAC3' },
       areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        color: new graphic.LinearGradient(0, 0, 0, 1, [
           { offset: 0, color: 'rgba(255,250,195,0.3)' },
           { offset: 1, color: 'rgba(255,250,195,0)' },
         ]),
@@ -239,7 +238,7 @@ const newUsersOption = computed(() => createBaseChartOption({
       lineStyle: { color: '#FF611D' },
       itemStyle: { color: '#FF611D' },
       areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        color: new graphic.LinearGradient(0, 0, 0, 1, [
           { offset: 0, color: 'rgba(255,97,29,0.3)' },
           { offset: 1, color: 'rgba(255,97,29,0)' },
         ]),
@@ -253,7 +252,7 @@ const newUsersOption = computed(() => createBaseChartOption({
       lineStyle: { color: '#E084FF' },
       itemStyle: { color: '#E084FF' },
       areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        color: new graphic.LinearGradient(0, 0, 0, 1, [
           { offset: 0, color: 'rgba(224,132,255,0.3)' },
           { offset: 1, color: 'rgba(224,132,255,0)' },
         ]),
@@ -267,7 +266,7 @@ const newUsersOption = computed(() => createBaseChartOption({
       lineStyle: { color: '#6863FF' },
       itemStyle: { color: '#6863FF' },
       areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        color: new graphic.LinearGradient(0, 0, 0, 1, [
           { offset: 0, color: 'rgba(104,99,255,0.3)' },
           { offset: 1, color: 'rgba(104,99,255,0)' },
         ]),
@@ -287,7 +286,7 @@ const activeUsersOption = computed(() => createBaseChartOption({
       lineStyle: { color: '#2980b9' },
       itemStyle: { color: '#2980b9' },
       areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        color: new graphic.LinearGradient(0, 0, 0, 1, [
           { offset: 0, color: 'rgba(41,128,185,0.3)' },
           { offset: 1, color: 'rgba(41,128,185,0)' },
         ]),