前端代码格式化

2026-02-19 11:46:27 +08:00
parent d310a29c03
commit f0f0763ceb
101 changed files with 8952 additions and 13203 deletions
@@ -1,10 +1,5 @@
 <template>
-	<a-drawer
-		v-model:open="open"
-		title="布局配置"
-		placement="right"
-		:width="420"
-	>
+	<a-drawer v-model:open="open" title="布局配置" placement="right" :width="420">
 		<div class="setting-content">
 			<div class="setting-item">
 				<div class="setting-title">布局模式</div>
@@ -18,25 +13,16 @@
 						}"
 						@click="handleLayoutChange(mode.value)"
 					>
-						<div
-							class="layout-preview"
-							:class="`preview-${mode.value}`"
-						>
+						<div class="layout-preview" :class="`preview-${mode.value}`">
 							<div class="preview-sidebar"></div>
-							<div
-								v-if="mode.value === 'default'"
-								class="preview-sidebar-2"
-							></div>
+							<div v-if="mode.value === 'default'" class="preview-sidebar-2"></div>
 							<div class="preview-content">
 								<div class="preview-header"></div>
 								<div class="preview-body"></div>
 							</div>
 						</div>
 						<div class="layout-name">{{ mode.label }}</div>
-						<CheckOutlined
-							v-if="layoutStore.layoutMode === mode.value"
-							class="check-icon"
-						/>
+						<CheckOutlined v-if="layoutStore.layoutMode === mode.value" class="check-icon" />
 					</div>
 				</div>
 			</div>
@@ -44,14 +30,7 @@
 			<div class="setting-item">
 				<div class="setting-title">主题颜色</div>
 				<div class="color-list">
-					<div
-						v-for="color in themeColors"
-						:key="color"
-						class="color-item"
-						:class="{ active: themeColor === color }"
-						:style="{ backgroundColor: color }"
-						@click="changeThemeColor(color)"
-					>
+					<div v-for="color in themeColors" :key="color" class="color-item" :class="{ active: themeColor === color }" :style="{ backgroundColor: color }" @click="changeThemeColor(color)">
 						<CheckOutlined v-if="themeColor === color" />
 					</div>
 				</div>
@@ -62,17 +41,11 @@
 				<div class="toggle-list">
 					<div class="toggle-item">
 						<span>显示标签栏</span>
-						<a-switch
-							v-model:checked="showTags"
-							@change="handleShowTagsChange"
-						/>
+						<a-switch v-model:checked="showTags" @change="handleShowTagsChange" />
 					</div>
 					<div class="toggle-item">
 						<span>显示面包屑</span>
-						<a-switch
-							v-model:checked="showBreadcrumb"
-							@change="handleShowBreadcrumbChange"
-						/>
+						<a-switch v-model:checked="showBreadcrumb" @change="handleShowBreadcrumbChange" />
 					</div>
 				</div>
 			</div>
@@ -91,126 +64,108 @@
 </template>

 <script setup>
-import { ref, watch, onMounted } from "vue";
-import { message } from "ant-design-vue";
-import { useLayoutStore } from "@/stores/modules/layout";
-import { CheckOutlined, ReloadOutlined } from "@ant-design/icons-vue";
+import { ref, watch, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import { useLayoutStore } from '@/stores/modules/layout'
+import { CheckOutlined, ReloadOutlined } from '@ant-design/icons-vue'

 // 定义组件名称（多词命名）
 defineOptions({
-	name: "LayoutSetting",
-});
+	name: 'LayoutSetting',
+})

-const layoutStore = useLayoutStore();
+const layoutStore = useLayoutStore()

-const open = ref(false);
-const themeColor = ref("#1890ff");
-const showTags = ref(true);
-const showBreadcrumb = ref(true);
+const open = ref(false)
+const themeColor = ref('#1890ff')
+const showTags = ref(true)
+const showBreadcrumb = ref(true)

 const layoutModes = [
-	{ value: "default", label: "默认布局" },
-	{ value: "menu", label: "菜单布局" },
-	{ value: "top", label: "顶部布局" },
-];
+	{ value: 'default', label: '默认布局' },
+	{ value: 'menu', label: '菜单布局' },
+	{ value: 'top', label: '顶部布局' },
+]

-const themeColors = [
-	"#1890ff",
-	"#f5222d",
-	"#fa541c",
-	"#faad14",
-	"#13c2c2",
-	"#52c41a",
-	"#2f54eb",
-	"#722ed1",
-];
+const themeColors = ['#1890ff', '#f5222d', '#fa541c', '#faad14', '#13c2c2', '#52c41a', '#2f54eb', '#722ed1']

 const openDrawer = () => {
-	open.value = true;
-};
+	open.value = true
+}

 const closeDrawer = () => {
-	open.value = false;
-};
+	open.value = false
+}

 defineExpose({
 	openDrawer,
 	closeDrawer,
-});
+})

 // 切换布局
 const handleLayoutChange = (mode) => {
-	layoutStore.setLayoutMode(mode);
-	const modeLabel = layoutModes.find((m) => m.value === mode)?.label || mode;
-	message.success(`已切换到${modeLabel}`);
-};
+	layoutStore.setLayoutMode(mode)
+	const modeLabel = layoutModes.find((m) => m.value === mode)?.label || mode
+	message.success(`已切换到${modeLabel}`)
+}

 // 切换主题颜色
 const changeThemeColor = (color) => {
-	themeColor.value = color;
+	themeColor.value = color
 	// 更新 CSS 变量
-	document.documentElement.style.setProperty("--primary-color", color);
-	message.success("主题颜色已更新");
-};
+	document.documentElement.style.setProperty('--primary-color', color)
+	message.success('主题颜色已更新')
+}

 // 切换标签栏显示
 const handleShowTagsChange = (checked) => {
-	showTags.value = checked;
+	showTags.value = checked
 	// 触发自定义事件或更新状态
-	document.documentElement.style.setProperty(
-		"--show-tags",
-		checked ? "block" : "none",
-	);
-	message.success(checked ? "标签栏已显示" : "标签栏已隐藏");
-};
+	document.documentElement.style.setProperty('--show-tags', checked ? 'block' : 'none')
+	message.success(checked ? '标签栏已显示' : '标签栏已隐藏')
+}

 // 切换面包屑显示
 const handleShowBreadcrumbChange = (checked) => {
-	showBreadcrumb.value = checked;
-	message.success(checked ? "面包屑已显示" : "面包屑已隐藏");
-};
+	showBreadcrumb.value = checked
+	message.success(checked ? '面包屑已显示' : '面包屑已隐藏')
+}

 // 重置设置
 const handleResetSettings = () => {
-	themeColor.value = "#1890ff";
-	showTags.value = true;
-	showBreadcrumb.value = true;
-	layoutStore.setLayoutMode("default");
-	document.documentElement.style.setProperty("--primary-color", "#1890ff");
-	document.documentElement.style.setProperty("--show-tags", "block");
-	message.success("设置已重置");
-};
+	themeColor.value = '#1890ff'
+	showTags.value = true
+	showBreadcrumb.value = true
+	layoutStore.setLayoutMode('default')
+	document.documentElement.style.setProperty('--primary-color', '#1890ff')
+	document.documentElement.style.setProperty('--show-tags', 'block')
+	message.success('设置已重置')
+}

 // 初始化
 onMounted(() => {
 	// 从本地存储或其他地方恢复设置
-	const savedThemeColor = localStorage.getItem("themeColor");
+	const savedThemeColor = localStorage.getItem('themeColor')
 	if (savedThemeColor) {
-		themeColor.value = savedThemeColor;
-		document.documentElement.style.setProperty(
-			"--primary-color",
-			savedThemeColor,
-		);
+		themeColor.value = savedThemeColor
+		document.documentElement.style.setProperty('--primary-color', savedThemeColor)
 	}

-	const savedShowTags = localStorage.getItem("showTags");
+	const savedShowTags = localStorage.getItem('showTags')
 	if (savedShowTags !== null) {
-		showTags.value = savedShowTags === "true";
-		document.documentElement.style.setProperty(
-			"--show-tags",
-			savedShowTags === "true" ? "block" : "none",
-		);
+		showTags.value = savedShowTags === 'true'
+		document.documentElement.style.setProperty('--show-tags', savedShowTags === 'true' ? 'block' : 'none')
 	}
-});
+})

 // 监听设置变化并保存到本地存储
 watch(themeColor, (newVal) => {
-	localStorage.setItem("themeColor", newVal);
-});
+	localStorage.setItem('themeColor', newVal)
+})

 watch(showTags, (newVal) => {
-	localStorage.setItem("showTags", String(newVal));
-});
+	localStorage.setItem('showTags', String(newVal))
+})
 </script>

 <style scoped lang="scss">