.1875084792839892:f044c0e9f6802e1724720eb4db542ba2_69a15362e787dc3830065443.69a157e9e787dc3830065479.69a157e8d6b614bfcda18d20:Trae CN.T(2026/2/27 16:38:01)

src/css/common/theme.css

@@ -0,0 +1,86 @@
+:root {
+  --primary-color: #677D7C;
+  --primary-light: #8a9e9d;
+  --primary-dark: #4a5c5b;
+  --bg-color: #f5f5f5;
+  --text-color: #333;
+  --text-light: #666;
+  --border-color: #ddd;
+  --shadow-color: rgba(0, 0, 0, 0.1);
+  --hover-bg: rgba(103, 125, 124, 0.1);
+  --active-bg: rgba(103, 125, 124, 0.2);
+}
+
+[data-theme="pink"] {
+  --primary-color: #e91e63;
+  --primary-light: #f48fb1;
+  --primary-dark: #c2185b;
+  --bg-color: #fce4ec;
+  --text-color: #880e4f;
+  --text-light: #ad1457;
+  --border-color: #f8bbd9;
+  --shadow-color: rgba(233, 30, 99, 0.2);
+  --hover-bg: rgba(233, 30, 99, 0.1);
+  --active-bg: rgba(233, 30, 99, 0.2);
+}
+
+[data-theme="blue"] {
+  --primary-color: #2196f3;
+  --primary-light: #64b5f6;
+  --primary-dark: #1565c0;
+  --bg-color: #e3f2fd;
+  --text-color: #0d47a1;
+  --text-light: #1976d2;
+  --border-color: #bbdefb;
+  --shadow-color: rgba(33, 150, 243, 0.2);
+  --hover-bg: rgba(33, 150, 243, 0.1);
+  --active-bg: rgba(33, 150, 243, 0.2);
+}
+
+[data-theme="yellow"] {
+  --primary-color: #ff9800;
+  --primary-light: #ffb74d;
+  --primary-dark: #e65100;
+  --bg-color: #fff3e0;
+  --text-color: #e65100;
+  --text-light: #f57c00;
+  --border-color: #ffe0b2;
+  --shadow-color: rgba(255, 152, 0, 0.2);
+  --hover-bg: rgba(255, 152, 0, 0.1);
+  --active-bg: rgba(255, 152, 0, 0.2);
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.theme-btn {
+  background-color: var(--primary-color);
+  color: #fff;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 4px var(--shadow-color);
+}
+
+.theme-btn:hover {
+  background-color: var(--primary-light);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px var(--shadow-color);
+}
+
+.theme-btn:active {
+  background-color: var(--primary-dark);
+  transform: translateY(0);
+  box-shadow: 0 1px 2px var(--shadow-color);
+}
+
+.theme-btn.active {
+  background-color: var(--primary-dark);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+}

src/css/page/index.less

@@ -1,20 +1,55 @@
-.text{
+.text {
   padding: 20px 0;
   font-size: 18px;
-  color:#f63;
+  color: var(--text-color);
+  transition: color 0.3s ease;
 }
-.btn{
+
+.btn {
   width: 120px;
   height: 36px;
   line-height: 36px;
-  background-color: #677D7C;
-  color:#fff;
+  background-color: var(--primary-color);
+  color: #fff;
   text-align: center;
-  border:none;
-  box-shadow: 0 1px 3px #999;
+  border: none;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px var(--shadow-color);
   font-size: 16px;
   cursor: pointer;
+  transition: all 0.3s ease;
 }
-.img{
+
+.btn:hover {
+  background-color: var(--primary-light);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px var(--shadow-color);
+}
+
+.btn:active {
+  background-color: var(--primary-dark);
+  transform: translateY(0);
+  box-shadow: 0 1px 2px var(--shadow-color);
+}
+
+.img {
   margin-top: 20px;
+
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px var(--shadow-color);
+  }
+}
+
+.g-bd {
+  padding: 40px;
+  min-height: 400px;
+}
+
+.g-hd, .g-ft {
+  background-color: var(--primary-color);
+  height: 60px;
+  transition: background-color 0.3s ease;
 }

src/js/components/dialog/css/dialog.css

@@ -1,27 +1,46 @@
-.v-dialog{
+.v-dialog {
   position: fixed;
   display: none;
-  left: 0;top:0;right:0;bottom:0;
-  background-color: rgba(0,0,0,.5);
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1500;
 }
-.v-dialog .close{
+
+.v-dialog .close {
   position: absolute;
-  top:20px;
+  top: 20px;
   right: 20px;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   text-align: center;
   line-height: 40px;
   font-size: 40px;
-  color:#666;
-  background-color: rgba(255,255,255,.8);
+  color: var(--text-color);
+  background-color: rgba(255, 255, 255, 0.9);
   cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px var(--shadow-color);
 }
-.v-dialog .img{
+
+.v-dialog .close:hover {
+  background-color: var(--primary-color);
+  color: #fff;
+  transform: rotate(90deg);
+}
+
+.v-dialog .img {
   position: absolute;
-  margin:auto;
-  top:0;right: 0;bottom:0;left: 0;
+  margin: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   max-width: 90%;
   max-height: 90%;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 }

src/js/components/dialog/index.js

@@ -3,9 +3,17 @@ require('./css/dialog.css')
 // 加载模板
 var html = require('./tmpl/dialog.html')
 
+// 默认弹窗图片
+var defaultDialogImage = require('./img/1.png')
+
 /* eslint-disable no-undef */
 module.exports = function () {
   var $dialog = $(html).clone()
+
+  // 使用自定义弹窗图片（如果存在），否则使用默认图片
+  var dialogImgSrc = window.dialogImagePath || defaultDialogImage
+  $dialog.find('.img').attr('src', dialogImgSrc)
+
   $dialog.find('.close').on('click', function () {
     $dialog.fadeOut(function () {
       $(this).remove()

src/js/components/dialog/tmpl/dialog.html

@@ -1,4 +1,4 @@
 <div class="v-dialog">
   <span class="close">&times;</span>
-  <img class="img" src="../img/1.png" />
+  <img class="img" src="" alt="弹窗图片" />
 </div>

src/js/components/page-editor/css/page-editor.css

@@ -0,0 +1,163 @@
+.page-editor-sidebar {
+  position: fixed;
+  left: -320px;
+  top: 0;
+  width: 320px;
+  height: 100vh;
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: 2px 0 10px var(--shadow-color);
+  z-index: 2000;
+  transition: left 0.3s ease;
+  overflow-y: auto;
+}
+
+.page-editor-sidebar.open {
+  left: 0;
+}
+
+.editor-toggle {
+  position: fixed;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 50px;
+  padding: 10px 5px;
+  background: var(--primary-color);
+  color: #fff;
+  border-radius: 0 8px 8px 0;
+  cursor: pointer;
+  text-align: center;
+  font-size: 12px;
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  box-shadow: 2px 2px 8px var(--shadow-color);
+  transition: all 0.3s ease;
+  z-index: 2001;
+}
+
+.page-editor-sidebar.open .editor-toggle {
+  left: 320px;
+}
+
+.editor-toggle:hover {
+  background: var(--primary-light);
+  width: 55px;
+}
+
+.editor-content {
+  padding: 20px;
+}
+
+.editor-section {
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.editor-section:last-child {
+  border-bottom: none;
+}
+
+.editor-section h4 {
+  margin-bottom: 10px;
+  color: var(--text-color);
+  font-size: 14px;
+}
+
+.text-input {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-size: 14px;
+  background: #fff;
+  color: var(--text-color);
+  transition: border-color 0.3s ease;
+}
+
+.text-input:focus {
+  outline: none;
+  border-color: var(--primary-color);
+}
+
+.file-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.file-input-wrapper input[type="file"] {
+  display: none;
+}
+
+.file-name {
+  font-size: 12px;
+  color: var(--text-light);
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.save-btn, .reset-btn {
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.reset-btn {
+  background-color: #999 !important;
+}
+
+.reset-btn:hover {
+  background-color: #777 !important;
+}
+
+.history-section {
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.no-history {
+  color: var(--text-light);
+  font-size: 12px;
+  text-align: center;
+  padding: 20px;
+}
+
+.history-item {
+  padding: 10px;
+  background: var(--bg-color);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+}
+
+.history-item:hover {
+  background: var(--hover-bg);
+  border-color: var(--primary-light);
+}
+
+.history-item.current {
+  border-color: var(--primary-color);
+  background: var(--hover-bg);
+}
+
+.history-item .version {
+  font-weight: bold;
+  color: var(--text-color);
+  display: block;
+  font-size: 13px;
+}
+
+.history-item .time {
+  font-size: 11px;
+  color: var(--text-light);
+}