m534ctfno
/
vue-shop-admin-work
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: m534ctfno:main
Branches Tags
m534ctfno:main
m534ctfno:develop
m534ctfno:feature/mhx
m534ctfno:feature/cky
m534ctfno:feature/zx
..
compare: m534ctfno:feature/zx
Branches Tags
m534ctfno:main
m534ctfno:develop
m534ctfno:feature/mhx
m534ctfno:feature/cky
m534ctfno:feature/zx

2 Commits
main ... feature/zx

Author SHA1 Message Date
周鑫 9e0bfc0904 zx
7 months ago
dj a971ca63b4 dj
7 months ago
49 changed files with 2461 additions and 6040 deletions
Show Stats

51
dao/AttributeDAO.js
Unescape View File

@ -1,46 +1,21 @@
// 引入 Node.js 的 path 模块，用于处理文件和目录路径
var path = require("path");
// 引入自定义的 DAO 模块，可能是数据访问对象模块，具体功能取决于其实现
// 这个模块可能包含一些与数据库交互的底层方法
daoModule = require("./DAO");
// 引入位于 modules/database 目录下的 database 模块
// 使用 process.cwd() 获取当前工作目录，并使用 path.join 方法拼接路径
// 这样做的目的是确保模块路径的动态性，可以适应不同的运行环境
databaseModule = require(path.join(process.cwd(), "modules/database"));
databaseModule = require(path.join(process.cwd(),"modules/database"));
/**
* 获取参数列表数据
*
* @param {[type]} cat_id 分类 ID，可能是用于筛选商品或产品的分类标识符
* @param {[type]} sel 类型，可能是指定要查询的属性类型或筛选条件的一部分
* @param {Function} cb 回调函数，用于处理获取数据后的操作
* 第一个参数为可能的错误信息，第二个参数为从数据库获取的数据
* @param {[type]} cat_id 分类ID
* @param {[type]} sel 类型
* @param {Function} cb 回调函数
*/
module.exports.list = function (cat_id, sel, cb) {
// 从 databaseModule 中获取数据库对象，这里 db 可能是一个封装好的数据库连接实例
db = databaseModule.getDatabase();
// 定义 SQL 查询语句，从 sp_attribute 表中查询数据
// 根据 cat_id 和 attr_sel 进行筛选，并且只选择 delete_time 为 NULL 的数据
// 这样做是为了过滤掉已经删除的记录
sql = "SELECT * FROM sp_attribute WHERE cat_id =? AND attr_sel =? AND delete_time is NULL";
// 使用数据库驱动执行查询操作
// 将 SQL 语句和参数 [cat_id, sel] 传递给 execQuery 方法
// execQuery 方法是数据库驱动提供的一个异步查询接口
database.driver.execQuery(
sql, // SQL 查询语句
[cat_id, sel], // 查询参数
function (err, attributes) { // 回调函数，用于处理查询结果
// 如果执行查询出现错误，调用回调函数并传递错误信息
// 这样可以确保调用者能够处理错误情况
if (err) return cb("查询执行出错");
// 如果查询成功，将结果（attributes）传递给回调函数
// 调用者可以在回调函数中处理这些数据
cb(null, attributes);
}
);
module.exports.list = function(cat_id,sel,cb) {
db = databaseModule.getDatabase();
sql = "SELECT * FROM sp_attribute WHERE cat_id = ? AND attr_sel = ? AND delete_time is NULL";
database.driver.execQuery(
sql
,[cat_id,sel],function(err,attributes){
if(err) return cb("查询执行出错");
cb(null,attributes);
});
}

482
dao/DAO.js
Unescape View File

@ -1,348 +1,224 @@
var path = require("path");
// 引入 Node.js 的 path 模块，用于处理文件和目录的路径
// 获取数据库模型，通过 path.join 拼接当前工作目录和相对路径来引入模块
databaseModule = require(path.join(process.cwd(), "modules/database"));
// process.cwd() 获取当前工作目录，path.join 用于拼接路径，确保跨平台兼容性
// 引入自定义的 logger 模块，并调用 logger 函数获取日志记录器
// 获取数据库模型
databaseModule = require(path.join(process.cwd(),"modules/database"));
var logger = require('../modules/logger').logger();
// 引入 logger 模块，并调用其 logger 方法获取一个日志记录器实例
/**
* 创建对象数据
*
* @param {[type]} modelName 模型名称，用于标识要创建数据的具体模型
* @param {[type]} obj 要创建的模型对象，包含具体的数据内容
* @param {Function} cb 回调函数，用于处理创建操作的结果，第一个参数可能为错误信息，第二个参数为创建成功后的返回结果（如果有）
* @param {[type]} modelName 模型名称
* @param {[type]} obj 模型对象
* @param {Function} cb 回调函数
*/
module.exports.create = function (modelName, obj, cb) {
// 从 databaseModule 中获取数据库对象
var db = databaseModule.getDatabase(); // 获取数据库连接或数据库实例
// 根据模型名称获取相应的模型
var Model = db.models[modelName]; // 从数据库实例的 models 属性中，根据模型名称获取对应的模型
// 调用模型的 create 方法创建对象，将结果传递给回调函数
Model.create(obj, cb);
// 使用模型的 create 方法创建新的数据对象，并通过回调函数处理结果
module.exports.create = function(modelName,obj,cb) {
var db = databaseModule.getDatabase();
var Model = db.models[modelName];
Model.create(obj,cb);
}
/**
* 获取所有数据
*
* @param {[type]} conditions 查询条件，用于筛选数据，包含多种可能的条件设置
* @param {[type]} conditions 查询条件
* 查询条件统一规范
* conditions
* {
* "columns" : {
* 字段条件，存储具体字段和其对应的值
* "字段名" : "条件值"
* },
* "offset" : "偏移", // 用于分页，表示从第几条数据开始查询
* "omit" : ["字段"], // 表示要排除的字段列表
* "only" : ["需要字段"], // 表示只查询的字段列表
* "limit" : "", // 表示查询的数量限制，用于分页
* "order" :[
* "字段", A | Z, // 表示排序的字段和排序方向（升序或降序）
* ...
* ]
* }
* @param {Function} cb 回调函数，用于处理查询结果，第一个参数可能为错误信息，第二个参数为查询到的数据
{
"columns" : {
字段条件
"字段名" : "条件值"
},
"offset" : "偏移",
"omit" : ["字段"],
"only" : ["需要字段"],
"limit" : "",
"order" :[
"字段" , A | Z,
...
]
}
* @param {Function} cb 回调函数
*/
module.exports.list = function (modelName, conditions, cb) {
// 从 databaseModule 中获取数据库对象
var db = databaseModule.getDatabase(); // 获取整个数据库实例或连接
// 根据模型名称获取相应的模型
var model = db.models[modelName]; // 从数据库实例的 models 属性中，根据传入的模型名称获取对应的模型
// 如果模型不存在，调用回调函数并传递错误信息
if (!model) return cb("模型不存在", null); // 如果模型未找到，则立即返回错误信息给回调函数
// 初始化查询模型为 find 方法，表示要执行查询操作
var queryModel = model.find(); // 默认执行全表查询，后续根据条件进行筛选
// 如果存在查询条件，则根据条件进行相应的查询操作
if (conditions) {
// 如果指定了需要查询的字段条件
if (conditions["columns"]) {
queryModel = queryModel.find(conditions["columns"]); // 根据字段条件进行精确查询
}
// 如果指定了数据偏移量，用于分页查询
if (conditions["offset"]) {
queryModel = queryModel.offset(parseInt(conditions["offset"], 10)); // 解析偏移量为整数，并设置到查询模型中
}
// 如果指定了查询数量限制
if (conditions["limit"]) {
queryModel = queryModel.limit(parseInt(conditions["limit"], 10)); // 解析限制数量为整数，并设置到查询模型中
}
// 如果指定了只需要查询的字段列表
if (conditions["only"]) {
queryModel = queryModel.only(conditions["only"]); // 设置查询模型中只返回这些字段
}
// 如果指定了要排除的字段列表
if (conditions["omit"]) {
queryModel = queryModel.omit(conditions["omit"]); // 设置查询模型中排除这些字段
}
// 如果指定了排序条件
if (conditions["order"]) {
queryModel = queryModel.order(conditions["order"]); // 根据排序条件设置查询模型的排序方式
}
}
// 执行查询操作，并将结果传递给回调函数
queryModel.exec(cb); // 执行查询，并通过回调函数返回结果
}else {
// 如果没有指定查询条件，则执行全表查询
model = model.find();
}
module.exports.list = function(modelName,conditions,cb) {
var db = databaseModule.getDatabase();
var model = db.models[modelName];
if(!model) return cb("模型不存在",null);
if(conditions) {
if(conditions["columns"]) {
model = model.find(conditions["columns"]);
} else {
model = model.find();
}
if(conditions["offset"]) {
model = model.offset(parseInt(conditions["offset"]));
}
if(conditions["limit"]) {
model = model.limit(parseInt(conditions["limit"]));
}
if(conditions["only"]) {
model = model.only(conditions["only"]);
}
if(conditions["omit"]) {
model = model.omit(conditions["omit"]);
}
if(conditions["order"]) {
model = model.order(conditions["order"]);
}
} else {
model = model.find();
}
model.run(function(err,models) {
if(err) {
console.log(err);
return cb("查询失败",null);
}
cb(null,models);
});
};
module.exports.countByConditions = function(modelName,conditions,cb) {
var db = databaseModule.getDatabase();
var model = db.models[modelName];
if(!model) return cb("模型不存在",null);
var resultCB = function(err,count){
if(err) {
return cb("查询失败",null);
}
cb(null,count);
}
if(conditions) {
if(conditions["columns"]) {
model = model.count(conditions["columns"],resultCB);
} else {
model = model.count(resultCB);
}
} else {
model = model.count(resultCB);
}
// 执行查询操作并处理结果，通过回调函数返回查询结果或错误信息
model.run(function (err, models) { // 注意：这里可能是伪代码或特定框架的API，通常MongoDB等使用exec而不是run
if (err) {
// 如果查询过程中发生错误，打印错误信息并通过回调函数返回错误
console.log(err); // 在生产环境中，通常不会直接打印错误到控制台，而是记录到日志文件中
return cb("查询失败", null); // 立即返回错误信息给回调函数，不继续执行后续代码
}
// 如果查询成功，将查询结果通过回调函数返回
cb(null, models); // 第一个参数为null表示没有错误，第二个参数为查询到的数据模型数组
});
// 导出根据条件统计数量的函数
module.exports.countByConditions = function (modelName, conditions, cb) {
// 从 databaseModule 模块中获取数据库连接或实例对象
var db = databaseModule.getDatabase();
// 根据传入的模型名称从数据库实例的models属性中获取对应的模型
var model = db.models[modelName];
// 如果指定的模型不存在，则通过回调函数返回错误信息
if (!model) return cb("模型不存在", null);
// 定义一个内部回调函数，用于处理计数操作的结果
var resultCB = function (err, count) {
if (err) {
// 如果计数过程中发生错误，通过回调函数返回错误
return cb("查询失败", null);
}
// 如果计数成功，将结果（符合条件的记录数）通过回调函数返回
cb(null, count); // 第一个参数为null表示没有错误，第二个参数为统计到的数量
};
// 根据传入的条件执行计数操作
if (conditions) {
// 如果指定了查询条件
if (conditions["columns"]) {
// 如果条件中包含了字段条件，则根据这些条件进行计数
model = model.count(conditions["columns"], resultCB); // 注意：这里的API可能因框架而异，MongoDB等通常不使用count直接传递条件对象
} else {
// 如果没有指定字段条件，则执行全表计数
model.count(resultCB); // 注意：这里应该直接调用count方法并传入回调函数，而不是重新赋值给model变量，因为count方法通常不返回新的模型实例
}
} else {
// 如果没有指定任何条件，则执行全表计数
model.count(resultCB); // 同上，这里应该直接调用count方法
}
// 注意：在上面的代码中，对model的重新赋值（如 model = model.count(...)）可能是不必要的，因为count方法通常不会返回一个新的模型实例用于后续的链式操作。
// 正确的做法应该是直接调用count方法并传入回调函数，如上面注释所示。
};
/**
* 获取一条数据
* @param {[type]} modelName 模型名称，用于指定要查找的模型，该名称应与数据库中定义的模型名称一致
* @param {[数组/对象]} conditions 条件集合，包含查找该条数据的具体条件，可以是对象形式或查询构造器
* @param {Function} cb 回调函数，用于处理查找结果，第一个参数为错误信息（如有），第二个参数为找到的数据对象
* @param {[type]} modelName 模型名称
* @param {[数组]} conditions 条件集合
* @param {Function} cb 回调函数
*/
module.exports.findOne = function (modelName, conditions, cb) {
// 从 databaseModule 模块中获取数据库连接或实例对象
var db = databaseModule.getDatabase();
// 根据传入的模型名称从数据库实例的models属性中获取对应的模型类
var Model = db.models[modelName];
// 如果指定的模型不存在，则通过回调函数返回错误信息，并终止后续操作
if (!Model) return cb("模型不存在", null);
// 如果查询条件为空，则通过回调函数返回错误信息，并终止后续操作
// 注意：在实际应用中，可能需要更细致的错误处理，比如允许无条件查询（即查询第一条记录）
if (!conditions) return cb("条件为空", null);
// 调用模型的 one 方法根据提供的条件查找一条数据
// 注意：这里的 one 方法可能是特定ORM框架提供的，不是所有数据库库或框架都有此方法
// 如果找不到符合条件的数据，one 方法通常会返回 null 或触发回调函数中的 err 参数
Model.one(conditions, function (err, obj) {
// 使用日志记录器记录可能出现的错误，这里使用的是 debug 级别，表示一般性的调试信息
// 在生产环境中，可能需要根据错误类型调整日志级别，比如使用 error 级别记录严重错误
logger.debug(err);
// 如果查询过程中发生错误，通过回调函数返回错误信息，并终止后续操作
if (err) {
return cb("查询失败", null);
}
// 如果查询成功，将找到的数据对象通过回调函数返回
return cb(null, obj);
});
module.exports.findOne = function(modelName,conditions,cb) {
var db = databaseModule.getDatabase();
var Model = db.models[modelName];
if(!Model) return cb("模型不存在",null);
if(!conditions) return cb("条件为空",null);
Model.one(conditions,function(err,obj){
logger.debug(err);
if(err) {
return cb("查询失败",null);
}
return cb(null,obj);
});
}
/**
* 更新对象数据
*
* @param {[type]} modelName 模型名称，用于指定要更新的模型，该名称应与数据库中定义的模型名称一致
* @param {[type]} id 数据关键 ID，用于唯一确定要更新的具体数据记录
* @param {[对象]} updateObj 更新对象数据，包含要更新的字段及其新值
* @param {Function} cb 回调函数，用于处理更新操作的结果，第一个参数为错误信息（如有），第二个参数为更新操作的结果（可能因数据库库或框架而异）
* @param {[type]} modelName 模型名称
* @param {[type]} id 数据关键ID
* @param {[type]} updateObj 更新对象数据
* @param {Function} cb 回调函数
*/
module.exports.update = function (modelName, id, updateObj, cb) {
// 从 databaseModule 模块中获取数据库连接或实例对象
var db = databaseModule.getDatabase();
// 根据传入的模型名称从数据库实例的models属性中获取对应的模型类
var Model = db.models[modelName];
// 根据提供的 ID 获取要更新的数据对象
// 注意：这里的 get 方法可能是特定ORM框架提供的，用于根据主键获取数据对象
// 在某些框架中，可能需要使用 findById 或类似的方法
Model.get(id, function (err, obj) {
// 如果获取数据对象过程中发生错误，比如ID不存在，则通过回调函数返回错误信息，并终止后续操作
if (err) return cb("更新失败", null);
// 如果成功获取到数据对象，则调用其 save 方法更新数据
// 注意：这里的 save 方法可能是特定ORM框架提供的，用于将数据对象的更改保存到数据库中
// save 方法通常会接受一个回调函数，用于处理保存操作的结果
obj.save(updateObj, cb);
// 注意：在某些框架中，可能需要显式地传递更新条件（如ID）给 save 方法，或者 save 方法本身就是根据数据对象的当前状态进行更新的
// 因此，这里的代码可能需要根据实际使用的数据库库或框架进行调整
});
module.exports.update = function(modelName,id,updateObj,cb) {
var db = databaseModule.getDatabase();
var Model = db.models[modelName];
Model.get(id,function(err,obj){
if(err) return cb("更新失败",null);
obj.save(updateObj,cb);
});
}
/**
* 通过主键 ID 获取对象
* @param {[type]} modelName 模型名称，用于指定要查找的模型，该名称应与数据库中定义的模型名称一致
* @param {[type]} id 主键 ID，用于唯一确定要查找的具体数据记录
* @param {Function} cb 回调函数，用于处理查找结果，第一个参数为错误信息（如有），第二个参数为找到的数据对象（如有）
* 通过主键ID获取对象
* @param {[type]} modelName 模型名称
* @param {[type]} id 主键ID
* @param {Function} cb 回调函数
*/
module.exports.show = function (modelName, id, cb) {
// 从名为 databaseModule 的模块中获取数据库连接或实例对象，该模块应包含 getDatabase 方法
var db = databaseModule.getDatabase();
// 根据传入的模型名称从数据库实例的 models 属性中获取对应的模型类
// 这里的 models 属性可能是一个对象，其键为模型名称，值为对应的模型类
var Model = db.models[modelName];
// 使用模型类的 get 方法根据提供的主键 ID 获取对应的数据对象
// get 方法通常接受一个回调函数，用于处理获取过程中的结果或错误
Model.get(id, function (err, obj) {
// 将获取结果（或错误信息）通过回调函数返回给调用者
// 如果 err 存在，表示获取过程中发生了错误；如果 obj 存在，表示成功获取到了数据对象
cb(err, obj);
});
module.exports.show = function(modelName,id,cb) {
var db = databaseModule.getDatabase();
var Model = db.models[modelName];
Model.get(id,function(err,obj){
cb(err,obj);
});
}
/**
* 通过主键 ID 删除对象
* 通过主键ID删除对象
*
* @param {[type]} modelName 模型名称，用于指定要删除的模型，该名称应与数据库中定义的模型名称一致
* @param {[type]} id 主键 ID，用于唯一确定要删除的具体数据记录
* @param {Function} cb 回调函数，用于处理删除操作的结果，第一个参数为错误信息（如有），第二个参数在成功时通常为 null 或未定义（因为删除操作不返回被删除的对象）
* @param {[type]} modelName 模型名称
* @param {[type]} id 主键ID
* @param {Function} cb 回调函数
*/
module.exports.destroy = function (modelName, id, cb) {
// 从名为 databaseModule 的模块中获取数据库连接或实例对象
var db = databaseModule.getDatabase();
// 根据传入的模型名称从数据库实例的 models 属性中获取对应的模型类
var Model = db.models[modelName];
// 使用模型类的 get 方法根据提供的主键 ID 获取要删除的数据对象
// 注意：在某些 ORM 框架中，可能不需要先获取对象再删除，而是可以直接根据 ID 删除
// 但这里的代码示例遵循了先获取对象再删除的模式，可能是为了演示或特定框架的要求
Model.get(id, function (err, obj) {
// 如果获取对象过程中发生错误（比如 ID 不存在），则通过回调函数返回错误信息
if (err) return cb("无模型 ID"); // 注意：这里的错误信息可能不够具体，实际应用中应提供更详细的错误信息
// 调用数据对象的 remove 方法删除该对象
// remove 方法通常也接受一个回调函数，用于处理删除过程中的结果或错误
obj.remove(function (err) {
// 如果删除过程中发生错误，则通过回调函数返回错误信息
if (err) return cb("删除失败"); // 同样，这里的错误信息可能不够具体
// 如果删除成功，则通过回调函数返回 null（或未定义），表示没有错误信息
return cb(null);
});
});
module.exports.destroy = function(modelName,id,cb) {
var db = databaseModule.getDatabase();
var Model = db.models[modelName];
Model.get(id,function(err,obj){
if(err) return cb("无模型ID");
obj.remove(function(err) {
if(err) return cb("删除失败");
return cb(null);
});
});
}
/**
* 通过模型名称获取数据库数量
*
* @param {[type]} modelName 模型名称，用于指定要统计数量的模型，该名称应与数据库中定义的模型名称一致
* @param {Function} cb 回调函数，用于处理统计结果，第一个参数为错误信息（如有），第二个参数为统计得到的数量
* @param {[type]} modelName 模型名称
* @param {Function} cb 回调函数
*/
module.exports.count = function (modelName, cb) {
// 从名为 databaseModule 的模块中获取数据库连接或实例对象
var db = databaseModule.getDatabase();
// 根据传入的模型名称从数据库实例的 models 属性中获取对应的模型类
var Model = db.models[modelName];
// 调用模型类的 count 方法统计该模型对应的数据记录数量
// count 方法通常不接受条件参数（除非特定框架支持），直接统计所有记录的数量
// 它也接受一个回调函数，用于处理统计过程中的结果或错误
Model.count(function (err, count) {
// 注意：这里的回调函数应该有两个参数，但原代码中的 cb 调用只传递了一个（err）
// 为了保持注释的准确性，我假设原代码是一个简化或错误的示例，并在此处修正
// 正确的调用应该是 cb(err, count)，即将统计得到的数量也传递给回调函数
// 但由于原代码未修改，下面的注释仍基于原代码
// 理论上，这里应该将统计结果（或错误信息）通过回调函数返回给调用者
// 但由于原代码只传递了 err 参数，因此 count 参数被忽略了
// 为了修正这一点，应该将 cb 调用改为 cb(err, count)（如果这是预期的行为）
// 但由于要求是不删改原代码，所以下面的注释仍然基于原代码
// 将统计过程中的错误信息（如有）通过回调函数返回给调用者
// 注意：由于原代码忽略了 count 参数，因此调用者无法获取到统计的数量
cb(err); // 修正后应为 cb(err, count)，但遵循不删改原代码的原则，此处保留原样
});
// 注意：上面的 Model.count 调用实际上可能是一个错误，因为大多数 ORM 框架的 count 方法
// 都会接受一个回调函数作为参数，用于处理统计结果。如果原代码中的 Model.count 方法
// 确实不接受回调函数（这不太可能），那么这里的代码将无法正常工作。
}
/**
通过条件判断数据是否存在
@param {[type]} modelName 模块名，用于指定要检查是否存在数据的模型
@param {[type]} conditions 条件，用于判断数据是否存在的条件集合
@param {Function} cb 回调函数，用于处理检查结果，第一个参数可能为错误信息，第二个参数为数据是否存在的布尔值
*/
module.exports.exists = function (modelName, conditions, cb) {
// 从 databaseModule 中获取数据库对象
var db = databaseModule.getDatabase(); // 获取全局数据库对象，用于后续操作
// 根据模型名称获取相应的模型
var Model = db.models[modelName]; // 从数据库对象中，通过模型名称获取到具体的模型
// 调用模型的 exists 方法检查数据是否存在，将结果传递给回调函数
Model.exists(conditions, function (err, isExists) { // 调用模型的exists方法，传入条件对象和回调函数
if (err) return cb("查询失败"); // 如果查询过程中出错，则通过回调函数返回错误信息
cb(null, isExists); // 如果没有错误，则通过回调函数返回数据是否存在的布尔值
});
module.exports.count = function(modelName,cb) {
var db = databaseModule.getDatabase();
var Model = db.models[modelName];
Model.count(cb);
}
/**
* 通过条件判断数据是否存在
*
* @param {[type]} modelName 模块名
* @param {[type]} conditions 条件
* @param {Function} cb 回调函数
*/
module.exports.exists = function(modelName,conditions,cb) {
var db = databaseModule.getDatabase();
var Model = db.models[modelName];
Model.exists(conditions,function(err,isExists){
if(err) return cb("查询失败");
cb(null,isExists);
});
}
获取指定名称的模型
@param {[type]} modelName 模型名，用于指定要获取的模型
@return {[type]} 返回指定名称的模型对象
*/
module.exports.getModel = function (modelName) {
// 从 databaseModule 中获取数据库对象
var db = databaseModule.getDatabase(); // 获取全局数据库对象，用于后续操作
// 根据模型名称获取相应的模型
return db.models[modelName]; // 从数据库对象中，通过模型名称获取到具体的模型，并返回该模型对象
module.exports.getModel = function(modelName) {
var db = databaseModule.getDatabase();
return db.models[modelName];
}

83
dao/GoodAttributeDAO.js
Unescape View File

@ -1,63 +1,26 @@
var path = require("path"); // 引入Node.js的path模块，用于处理文件和目录的路径
// 引入自定义的 DAO 模块，可能用于数据访问操作，具体功能取决于其内部实现
daoModule = require("./DAO"); // 引入当前目录下的DAO模块
// 引入位于 modules/database 目录下的数据库模块，使用 path.join 拼接当前工作目录与相对路径
databaseModule = require(path.join(process.cwd(), "modules/database")); // 引入数据库模块，路径根据当前工作目录动态确定
/**
* 清除商品属性
*
* @param {[type]} goods_id 商品的唯一标识符，用于确定要清除属性的商品
* @param {Function} cb 回调函数，用于处理清除操作的结果
* 当操作完成时，将调用此函数。若操作出现错误，第一个参数将包含错误信息；若操作成功，第一个参数为 null
*/
module.exports.clearGoodAttributes = function (goods_id, cb) {
// 从数据库模块中获取数据库对象
db = databaseModule.getDatabase(); // 获取数据库实例
// 定义 SQL 语句，用于删除 sp_goods_attr 表中 goods_id 匹配的记录
sql = "DELETE FROM sp_goods_attr WHERE goods_id =?"; // SQL删除语句
// 执行 SQL 查询操作，将 goods_id 作为参数传递给 SQL 语句
database.driver.execQuery( // 执行SQL查询的方法
sql // SQL语句
, [goods_id], // 参数数组，包含要删除的goods_id
function (err) { // 回调函数，处理执行结果
// 如果执行查询时出现错误，调用回调函数并传递错误信息
if (err) return cb("删除出错"); // 错误处理
// 若操作成功，调用回调函数，将第一个参数设为 null
cb(null); // 成功处理，无返回值
});
var path = require("path");
daoModule = require("./DAO");
databaseModule = require(path.join(process.cwd(),"modules/database"));
module.exports.clearGoodAttributes = function(goods_id,cb) {
db = databaseModule.getDatabase();
sql = "DELETE FROM sp_goods_attr WHERE goods_id = ?";
database.driver.execQuery(
sql
,[goods_id],function(err){
if(err) return cb("删除出错");
cb(null);
});
}
/**
* 查询商品属性列表
*
* @param {[type]} goods_id 商品的唯一标识符，用于确定要查询属性的商品
* @param {Function} cb 回调函数，用于处理查询操作的结果
* 当操作完成时，将调用此函数。若操作出现错误，第一个参数将包含错误信息；若操作成功，第一个参数为 null，第二个参数为查询结果
*/
module.exports.list = function (goods_id, cb) {
// 从数据库模块中获取数据库对象
db = databaseModule.getDatabase(); // 获取数据库实例
// 定义 SQL 语句，使用 LEFT JOIN 连接 sp_goods_attr 和 sp_attribute 表进行查询
// 查询内容包括多个属性，从 sp_goods_attr 表中查询一些属性，从 sp_attribute 表中查询一些属性
// 并根据 good_attr.goods_id 进行筛选
sql = "SELECT good_attr.goods_id,good_attr.attr_id,good_attr.attr_value,good_attr.add_price,attr.attr_name,attr.attr_sel,attr.attr_write,attr.attr_vals FROM sp_goods_attr as good_attr LEFT JOIN sp_attribute as attr ON attr.attr_id = good_attr.attr_id WHERE good_attr.goods_id =?"; // SQL查询语句
// 执行 SQL 查询操作，将 goods_id 作为参数传递给 SQL 语句
database.driver.execQuery( // 执行SQL查询的方法
sql // SQL语句
, [goods_id], // 参数数组，包含要查询的goods_id
function (err, attrs) { // 回调函数，处理执行结果
// 如果执行查询时出现错误，调用回调函数并传递错误信息
if (err) return cb("删除出错"); // 注意：这里的错误信息提示为“删除出错”可能是个笔误，应为“查询出错”
// 若操作成功，调用回调函数，将第一个参数设为 null，第二个参数为查询结果
cb(null, attrs); // 成功处理，返回查询结果
});
module.exports.list = function(goods_id,cb) {
db = databaseModule.getDatabase();
sql = "SELECT good_attr.goods_id,good_attr.attr_id,good_attr.attr_value,good_attr.add_price,attr.attr_name,attr.attr_sel,attr.attr_write,attr.attr_vals FROM sp_goods_attr as good_attr LEFT JOIN sp_attribute as attr ON attr.attr_id = good_attr.attr_id WHERE good_attr.goods_id = ?";
database.driver.execQuery(
sql
,[goods_id],function(err,attrs){
if(err) return cb("删除出错");
cb(null,attrs);
});
}

230
dao/ManagerDAO.js
Unescape View File

@ -1,199 +1,165 @@
var path = require("path");
// 引入自定义的 DAO 模块，可能包含了对数据库操作的封装
daoModule = require("./DAO");
// 引入位于 modules/database 目录下的数据库模块，使用 path.join 拼接当前工作目录和相对路径
databaseModule = require(path.join(process.cwd(), "modules/database"));
databaseModule = require(path.join(process.cwd(),"modules/database"));
/**
* 创建管理员
*
* @param {[type]} obj 管理员信息，包含创建管理员所需的信息，如用户名、密码等，具体结构取决于数据库表的设计
* @param {Function} cb 回调函数，用于处理创建操作的结果
* 当创建操作完成时调用此函数，若出现错误，第一个参数将包含错误信息，若成功，第一个参数为 null
* @param {[type]} obj 管理员信息
* @param {Function} cb 回调函数
*/
module.exports.create = function (obj, cb) {
// 调用 daoModule 的 create 方法，创建 ManagerModel 类型的对象，传入管理员信息和回调函数
daoModule.create("ManagerModel", obj, cb);
module.exports.create = function(obj,cb) {
daoModule.create("ManagerModel",obj,cb);
}
/**
* 获取管理员列表
*
* @param {[type]} conditions 查询条件，用于筛选管理员列表，具体内容根据业务需求而定
* @param {Function} cb 回调函数，用于处理查询结果
* 当查询操作完成时调用此函数，若出现错误，第一个参数将包含错误信息，若成功，第一个参数为 null，第二个参数为查询到的管理员列表
* @param {[type]} conditions 查询条件
* @param {Function} cb 回调函数
*/
module.exports.list = function (conditions, cb) {
// 调用 daoModule 的 list 方法，查询 ManagerModel 类型的对象，传入查询条件和自定义的回调函数
daoModule.list("ManagerModel", conditions, function (err, models) {
if (err) return cb(err, null);
cb(null, models);
});
module.exports.list = function(conditions,cb) {
daoModule.list("ManagerModel",conditions,function(err,models) {
if(err) return cb(err,null);
cb(null,models);
});
}
/**
* 通过查询条件获取管理员对象
*
* @param {[type]} conditions 条件，用于筛选单个管理员，具体内容根据业务需求而定
* @param {Function} cb 回调函数，用于处理查询结果
* 当查询操作完成时调用此函数，若出现错误，第一个参数将包含错误信息，若成功，第一个参数为 null，第二个参数为查询到的管理员对象
* @param {[type]} conditions 条件
* @param {Function} cb 回调函数
*/
module.exports.findOne = function (conditions, cb) {
// 调用 daoModule 的 findOne 方法，根据条件查询 ManagerModel 类型的对象，传入条件和回调函数
daoModule.findOne("ManagerModel", conditions, cb);
module.exports.findOne = function(conditions,cb) {
daoModule.findOne("ManagerModel",conditions,cb);
}
/**
* 通过关键词查询用户
*
* @param {[type]} key 关键词，用于筛选用户，可能是用户名的一部分等
* @param {[type]} offset 分页偏移量，用于分页查询，从第几行开始查询
* @param {[type]} limit 分页限制，每页显示的数量
* @param {Function} cb 回调函数，用于处理查询结果
* 当查询操作完成时调用此函数，若出现错误，第一个参数将包含错误信息，若成功，第一个参数为 null，第二个参数为查询到的管理员列表
* @param {[type]} key 关键词
* @param {[type]} offset
* @param {[type]} limit
* @param {Function} cb 回调函数
*/
module.exports.findByKey = function (key, offset, limit, cb) {
// 从数据库模块中获取数据库对象
db = databaseModule.getDatabase();
// 定义基本的 SQL 查询语句，使用 LEFT JOIN 连接 sp_manager 和 sp_role 表
sql = "SELECT * FROM sp_manager as mgr LEFT JOIN sp_role as role ON mgr.role_id = role.role_id";
// 根据是否有关键词进行不同的 SQL 拼接和查询操作
if (key) {
// 拼接 LIKE 子句，进行模糊查询，并添加 LIMIT 子句进行分页
sql += " WHERE mg_name LIKE? LIMIT?,?";
database.driver.execQuery(
sql
, ["%" + key + "%", offset, limit], function (err, managers) {
if (err) return cb("查询执行出错");
cb(null, managers);
});
} else {
// 仅添加 LIMIT 子句进行分页
sql += " LIMIT?,? ";
database.driver.execQuery(sql, [offset, limit], function (err, managers) {
if (err) return cb("查询执行出错");
cb(null, managers);
});
}
module.exports.findByKey = function(key,offset,limit,cb) {
db = databaseModule.getDatabase();
sql = "SELECT * FROM sp_manager as mgr LEFT JOIN sp_role as role ON mgr.role_id = role.role_id";
if(key) {
sql += " WHERE mg_name LIKE ? LIMIT ?,?";
database.driver.execQuery(
sql
,["%" + key + "%",offset,limit],function(err,managers){
if(err) return cb("查询执行出错");
cb(null,managers);
});
} else {
sql += " LIMIT ?,? ";
database.driver.execQuery(sql,[offset,limit],function(err,managers){
if(err) return cb("查询执行出错");
cb(null,managers);
});
}
}
/**
* 判断是否存在管理员
*
* @param {[type]} username 用户名，用于判断该用户名对应的管理员是否存在
* @param {Function} cb 回调函数，用于处理查询结果
* 当查询操作完成时调用此函数，若出现错误，第一个参数将包含错误信息，若成功，第一个参数为 null，第二个参数为布尔值表示是否存在
* @param {[type]} username 用户名
* @param {Function} cb 回调函数
*
*/
module.exports.exists = function (username, cb) {
// 从数据库模块中获取数据库对象
var db = databaseModule.getDatabase();
// 获取 ManagerModel 模型
var Model = db.models.ManagerModel;
// 调用 Model 的 exists 方法，传入用户名作为条件，查询是否存在
Model.exists({"mg_name": username}, function (err, isExists) {
if (err) return cb("查询失败");
cb(null, isExists);
});
module.exports.exists = function(username,cb) {
var db = databaseModule.getDatabase();
var Model = db.models.ManagerModel;
Model.exists({"mg_name":username},function(err,isExists){
if(err) return cb("查询失败");
cb(null,isExists);
});
}
/**
* 模糊查询用户数量
*
* @param {[type]} key 关键词，用于模糊查询用户数量，可能是用户名的一部分等
* @param {Function} cb 回调函数，用于处理查询结果
* 当查询操作完成时调用此函数，若出现错误，第一个参数将包含错误信息，若成功，第一个参数为 null，第二个参数为查询到的用户数量
* @param {[type]} key 关键词
* @param {Function} cb 回调函数
*/
module.exports.countByKey = function (key, cb) {
// 从数据库模块中获取数据库对象
db = databaseModule.getDatabase();
// 定义基本的 SQL 查询语句，统计 sp_manager 表中的记录数
sql = "SELECT count(*) as count FROM sp_manager";
// 根据是否有关键词进行不同的 SQL 拼接和查询操作
if (key) {
// 拼接 LIKE 子句，进行模糊查询
sql += " WHERE mg_name LIKE?";
database.driver.execQuery(
sql
, ["%" + key + "%"], function (err, result) {
if (err) return cb("查询执行出错");
// 从查询结果中获取数量
cb(null, result[0]["count"]);
});
} else {
database.driver.execQuery(sql, function (err, result) {
if (err) return cb("查询执行出错");
// 从查询结果中获取数量
cb(null, result[0]["count"]);
});
}
module.exports.countByKey = function(key,cb) {
db = databaseModule.getDatabase();
sql = "SELECT count(*) as count FROM sp_manager";
if(key) {
sql += " WHERE mg_name LIKE ?";
database.driver.execQuery(
sql
,["%" + key + "%"],function(err,result){
if(err) return cb("查询执行出错");
cb(null,result[0]["count"]);
});
} else {
database.driver.execQuery(sql,function(err,result){
if(err) return cb("查询执行出错");
cb(null,result[0]["count"]);
});
}
}
/**
* 通过 ID 获取管理员对象数据
* 通过ID获取管理员对象数据
*
* @param {[type]} id 管理员主键 ID，用于唯一标识管理员
* @param {Function} cb 回调函数，用于处理查询结果
* 当查询操作完成时调用此函数，若出现错误，第一个参数将包含错误信息，若成功，第一个参数为 null，第二个参数为查询到的管理员对象
* @param {[type]} id 管理员主键ID
* @param {Function} cb 回调函数
*/
module.exports.show = function (id, cb) {
// 调用 daoModule 的 show 方法，根据 ID 查询 ManagerModel 类型的对象，传入 ID 和回调函数
daoModule.show("ManagerModel", id, cb);
module.exports.show = function(id,cb) {
daoModule.show("ManagerModel",id,cb);
}
/**
* 更新管理员信息
*
* @param {[type]} obj 管理员对象，包含更新后的管理员信息，具体结构取决于数据库表的设计
* @param {Function} cb 回调函数，用于处理更新操作的结果
* 当更新操作完成时调用此函数，若出现错误，第一个参数将包含错误信息，若成功，第一个参数为 null
* @param {[type]} obj 管理员对象
* @param {Function} cb 回调函数
*/
module.exports.update = function (obj, cb) {
// 调用 daoModule 的 update 方法，更新 ManagerModel 类型的对象，传入对象的 mg_id 作为主键和对象信息及回调函数
daoModule.update("ManagerModel", obj.mg_id, obj, cb);
module.exports.update = function(obj,cb) {
daoModule.update("ManagerModel",obj.mg_id,obj,cb);
}
/**
* 删除管理员对象数据
*
* @param {[type]} id 主键 ID，用于唯一标识要删除的管理员
* @param {Function} cb 回调函数，用于处理删除操作的结果
* 当删除操作完成时调用此函数，若出现错误，第一个参数将包含错误信息，若成功，第一个参数为 null
* @param {[type]} id 主键ID
* @param {Function} cb 回调函数
*/
module.exports.destroy = function (id, cb) {
// 调用 daoModule 的 destroy 方法，根据 ID 删除 ManagerModel 类型的对象，传入 ID 和自定义的回调函数
daoModule.destroy("ManagerModel", id, function (err) {
if (err) return cb(err);
return cb(null);
});
module.exports.destroy = function(id,cb) {
daoModule.destroy("ManagerModel",id,function(err){
if(err) return cb(err);
return cb(null);
});
}
/**
* 保存管理员信息
*
* @param {[type]} obj 管理员对象，包含管理员信息，具体结构取决于数据库表的设计
* @param {Function} cb 回调函数，用于处理保存操作的结果
* 当保存操作完成时调用此函数，根据管理员对象是否有 mg_id 决定是创建新的管理员还是更新现有管理员
* @param {[type]} obj 管理员对象
* @param {Function} cb 回调函数
*/
module.exports.save = function (obj, cb) {
// 调用 daoModule 的 show 方法，根据管理员对象的 mg_id 进行查询
daoModule.show(obj.mg_id, function (err, oldObj) {
if (err) {
// 若查询出错，可能是不存在该管理员，调用 create 方法创建新的管理员
daoModule.create("ManagerModel", obj, cb);
} else {
// 若查询成功，调用 update 方法更新现有管理员
daoModule.update("ManagerModel", obj.mg_id, obj, cb);
}
})
module.exports.save = function(obj,cb) {
daoModule.show(obj.mg_id,function(err,oldObj){
if(err) {
daoModule.create("ManagerModel",obj,cb);
} else {
daoModule.update("ManagerModel",obj.mg_id,obj,cb);
}
})
}
/**
* 获取管理员数量
*
* @param {Function} cb 回调函数，用于处理查询结果
* 当查询操作完成时调用此函数，若出现错误，第一个参数将包含错误信息，若成功，第一个参数为 null，第二个参数为管理员数量
* @param {Function} cb 回调函数
*/
module.exports.count = function (cb) {
// 调用 daoModule 进行查询，传入 ManagerModel 类型和回调函数，但这里可能存在错误，因为调用方式不完整，应该是调用 daoModule 的某个方法
daoModule("ManagerModel", cb);
module.exports.count = function(cb) {
daoModule("ManagerModel",cb);
}

86
dao/PermissionAPIDAO.js
Unescape View File

@ -1,64 +1,50 @@
var path = require("path");
// 引入自定义的 DAO 模块，可能包含了对数据库操作的相关函数
daoModule = require("./DAO");
// 引入位于 modules/database 目录下的数据库模块，使用 path.join 拼接当前工作目录和相对路径
databaseModule = require(path.join(process.cwd(), "modules/database"));
databaseModule = require(path.join(process.cwd(),"modules/database"));
/**
* 获取权限列表
*
* @param {Function} cb 回调函数，用于处理获取权限列表的结果
* 当获取权限列表操作完成时调用此函数，若出现错误，第一个参数将包含错误信息，若成功，第一个参数为 null，第二个参数为权限列表结果
* @param {Function} cb 回调函数
*/
module.exports.list = function (cb) {
// 从数据库模块中获取数据库对象
db = databaseModule.getDatabase();
// 定义 SQL 查询语句，使用 LEFT JOIN 连接 sp_permission_api 和 sp_permission 表
// 筛选出 sp_permission 表的 ps_id 不为空的记录
sql = "SELECT * FROM sp_permission_api as api LEFT JOIN sp_permission as main ON main.ps_id = api.ps_id WHERE main.ps_id is not null";
// 执行 SQL 查询操作
database.driver.execQuery(sql, function (err, result) {
if (err) return cb("获取权限列表失败", null);
cb(null, result);
});
module.exports.list = function(cb) {
db = databaseModule.getDatabase();
sql = "SELECT * FROM sp_permission_api as api LEFT JOIN sp_permission as main ON main.ps_id = api.ps_id WHERE main.ps_id is not null";
database.driver.execQuery(sql,function(err,result){
if(err) return cb("获取权限列表失败",null);
cb(null,result);
});
}
/**
* 权限验证
*
* @param {[type]} rid 角色 ID，用于标识用户的角色，可能是数字类型，不同角色拥有不同的权限
* @param {[type]} serviceName 服务名，可能是要访问的服务的名称，例如 API 服务的名称
* @param {[type]} actionName 动作名，可能是对服务的具体操作名称，例如 GET、POST 等操作
* @param {Function} cb 回调函数，用于处理权限验证的结果
* 当权限验证操作完成时调用此函数，若出现错误，第一个参数将包含错误信息，若验证通过，第一个参数为 null，第二个参数为 true；若验证不通过，第一个参数包含相应的错误信息，第二个参数为 false
* @param {[type]} rid 角色ID
* @param {[type]} serviceName 服务名
* @param {[type]} actionName 动作名
* @param {Function} cb 回调函数
*/
module.exports.authRight = function (rid, serviceName, actionName, cb) {
// 超级管理员权限验证，若角色 ID 为 0，则直接认为有权限
if (rid == 0) return cb(null, true);
// 权限验证过程
// 使用 daoModule 的 findOne 方法查找 PermissionAPIModel 类型的对象
daoModule.findOne("PermissionAPIModel", {"ps_api_service": serviceName, "ps_api_action": actionName}, function (err, permissionAPI) {
// 打印当前角色 ID、服务名和动作名，方便调试
console.log("rid => %s,serviceName => %s,actionName => %s", rid, serviceName, actionName);
// 若出现错误或未找到权限 API 对象，认为无权限
if (err ||!permissionAPI) return cb("无权限访问", false);
// 查找 RoleModel 类型的对象，获取角色信息
daoModule.findOne("RoleModel", {"role_id": rid}, function (err, role) {
console.log(role);
// 若出现错误或未找到角色对象，认为获取角色信息失败
if (err ||!role) return cb("获取角色信息失败", false);
// 将角色的 ps_ids 以逗号分隔存储在数组中
ps_ids = role.ps_ids.split(",");
// 遍历 ps_ids 数组
for (idx in ps_ids) {
ps_id = ps_ids[idx];
// 若权限 API 的 ps_id 与角色的某个 ps_id 相等，认为有权限
if (parseInt(permissionAPI.ps_id) == parseInt(ps_id)) {
return cb(null, true);
}
}
// 若遍历完都不满足条件，认为无权限
return cb("无权限访问", false);
});
});
module.exports.authRight = function(rid,serviceName,actionName,cb) {
// 超级管理员
if(rid == 0) return cb(null,true);
// 权限验证
daoModule.findOne("PermissionAPIModel",{"ps_api_service":serviceName,"ps_api_action":actionName},function(err,permissionAPI){
console.log("rid => %s,serviceName => %s,actionName => %s",rid,serviceName,actionName);
if(err || !permissionAPI) return cb("无权限访问",false);
daoModule.findOne("RoleModel",{"role_id":rid},function(err,role){
console.log(role);
if(err || !role) return cb("获取角色信息失败",false);
ps_ids = role.ps_ids.split(",");
for(idx in ps_ids) {
ps_id = ps_ids[idx];
if(parseInt(permissionAPI.ps_id) == parseInt(ps_id)) {
return cb(null,true);
}
}
return cb("无权限访问",false);
});
});
}

604
db/mydb.sql
View File

File diff suppressed because it is too large Load Diff

63
models/AttributeModel.js
Unescape View File

@ -1,50 +1,15 @@
/// 导出一个函数，这个函数是模块的主要接口，它接受两个参数：
// 第一个参数是数据库对象db，它提供了与数据库进行交互的能力；
// 第二个参数是一个回调函数callback，它将在模型定义成功后被调用。
module.exports = function(db, callback) {
// 开始使用db.define方法定义一个名为"AttributeModel"的模型。
// 这个模型用于表示商品或产品的属性。
db.define("AttributeModel", {
// 以下是该模型属性的定义部分：
// attr_id属性：作为主键，其类型为'serial'，表示这是一个自增的序列号。
// key: true表明这个属性是主键，用于唯一标识每条记录。
attr_id: {type: 'serial', key: true},
// attr_name属性：表示属性的名称，其类型为字符串（String）。
// 用于存储属性的描述性名称。
attr_name: String,
// cat_id属性：表示分类ID，其类型为数字（Number）。
// 这个属性用于将属性与特定的商品分类关联起来。
cat_id: Number,
// attr_sel属性：表示属性的选择类型，其值为一个数组，包含"only"和"many"。
// "only"表示该属性为唯一选择（如输入框），"many"表示该属性可以从多个选项中选择（如下拉列表或单选框）。
attr_sel: ["only", "many"],
// attr_write属性：表示属性的写入方式，其值为一个数组，包含"manual"和"list"。
// "manual"表示属性值需要手工录入，"list"表示属性值应从预定义的列表中选择。
attr_write: ["manual", "list"],
// attr_vals属性：表示属性的值，其类型为字符串（String）。
// 存储属性的实际值，可能是一个逗号分隔的字符串（对于"many"类型的属性）。
attr_vals: String,
// delete_time属性：表示删除时间，其类型为数字（Number）。
// 用于逻辑删除，即不真正从数据库中删除记录，而是通过设置一个删除时间来标记记录已删除。
delete_time: Number
}, {
// 以下是该模型的选项或配置的定义部分：
// table选项：指定这个模型在数据库中对应的表名。
// 在这个例子中，表名被指定为"sp_attribute"，这是数据库中存储属性信息的表的名称。
table: "sp_attribute"
});
// 模型定义完成。现在，我们调用之前传入的回调函数callback。
// 由于模型定义操作通常不会返回任何结果（除非出现错误），因此这里我们传入一个空参数。
// 回调函数可以在此处执行一些后续的逻辑处理，如初始化数据、启动服务等。
// 但在这个例子中，回调函数可能只是被用来简单地表示模型定义过程的结束。
return callback();
module.exports = function(db,callback){
// 用户模型
db.define("AttributeModel",{
attr_id : {type: 'serial', key: true},
attr_name : String,
cat_id : Number,
attr_sel : ["only", "many"], // only:输入框(唯一) many:后台下拉列表/前台单选框
attr_write: ["manual","list"], // manual:手工录入 list:从列表选择
attr_vals: String,
delete_time : Number
},{
table : "sp_attribute"
});
return callback();
}

55
models/CategoryModel.js
Unescape View File

@ -1,44 +1,13 @@
// 这是一个Node.js模块，它导出一个函数。这个函数用于定义一个数据库模型，并允许在模型定义完成后执行回调函数。
module.exports = function(db, callback) {
// 开始定义用户模型（在这个上下文中，是分类模型）。
// 函数接受一个数据库对象db和一个回调函数callback作为参数。
// 使用db对象的define方法来定义一个名为CategoryModel的新模型。
// 这个模型用于操作数据库中的分类信息，如创建、读取、更新和删除分类。
db.define("CategoryModel", {
// 定义模型的第一个属性：分类ID（cat_id）。
// 这是一个自增主键，意味着每当向数据库添加新分类时，这个ID都会自动递增。
// type: 'serial'指定了这是一个序列类型（自增类型），key: true表示这是主键。
cat_id: {type: 'serial', key: true},
// 定义模型的第二个属性：分类名称（cat_name）。
// 这是一个字符串类型，用于存储分类的名称或标题。
cat_name: String,
// 定义模型的第三个属性：父分类ID（cat_pid）。
// 这是一个数字类型，用于表示当前分类的上级分类（如果存在的话）。
// 通过这个属性，可以建立分类之间的层级关系或父子关系。
cat_pid: Number,
// 定义模型的第四个属性：分类级别（cat_level）。
// 这也是一个数字类型，用于表示分类在层级结构中的位置或深度。
// 例如，顶级分类的级别可能是1，其子分类的级别可能是2，依此类推。
cat_level: Number,
// 定义模型的第五个属性：是否已删除（cat_deleted）。
// 这是一个布尔值类型，用于标记该分类是否已被逻辑删除（即在数据库中保留但不再显示或使用）。
// 这是一种软删除的方式，允许在不实际删除数据的情况下，从系统中移除分类。
cat_deleted: Boolean
}, {
// 定义模型的选项或配置。
// 在这个例子中，只定义了一个选项：table。
// 这个选项指定了模型对应的数据库表名。
// 在这个例子中，表名是"sp_category"。
// 这意味着该模型的所有数据库操作（如查询、插入、更新和删除）都会针对这个表进行。
table: "sp_category"
});
// 模型定义完成。现在调用回调函数callback，并传入空参数（或无参数）。
// 这通常表示模型已经成功定义，可以进行后续操作（如查询数据库、添加数据等）。
// 回调函数可以用于执行任何需要在模型定义完成后立即执行的操作。
return callback();
module.exports = function(db,callback){
// 用户模型
db.define("CategoryModel",{
cat_id : {type: 'serial', key: true},
cat_name : String,
cat_pid : Number,
cat_level : Number,
cat_deleted: Boolean
},{
table : "sp_category"
});
return callback();
}

57
models/GoodAttributeModel.js
Unescape View File

@ -1,46 +1,13 @@
// 导出一个函数，这个函数接受两个参数：
// 第一个参数是数据库对象db，它提供了与数据库交互的API，用于执行数据库操作；
// 第二个参数是一个回调函数callback，它在模型定义完成后被调用，用于执行一些后续逻辑。
module.exports = function(db, callback) {
// 使用db.define方法开始定义一个新的数据库模型。
// 这个模型实际上是一个商品属性模型，用于存储商品的属性信息。
// 模型的名称被指定为"GoodAttributeModel"，这是在代码中引用该模型时使用的标识符。
db.define("GoodAttributeModel", {
// 定义模型的第一个属性：id。
// 这是一个自增的主键，用于唯一标识数据库中的每一条记录。
// type: 'serial'指定了这是一个序列类型（自增类型），key: true表示这是主键。
id: {type: 'serial', key: true},
// 定义模型的第二个属性：goods_id。
// 这是一个数字类型的属性，用于存储关联的商品ID。
// 通过这个属性，可以将商品属性与具体的商品记录关联起来。
goods_id: Number,
// 定义模型的第三个属性：attr_id。
// 这也是一个数字类型的属性，用于存储关联的属性ID。
// 通过这个属性，可以将商品属性与具体的属性记录关联起来，表示这个商品属性是哪种属性。
attr_id: Number,
// 定义模型的第四个属性：attr_value。
// 这是一个字符串类型的属性，用于存储商品属性的具体值。
// 例如，如果属性是颜色，那么attr_value就可能是"红色"、"蓝色"等。
attr_value: String,
// 定义模型的第五个属性：add_price。
// 这是一个数字类型的属性，用于存储由于这个属性而导致的附加价格。
// 如果某个属性会导致商品价格变动（如不同颜色价格不同），则在这里存储增加的金额。
add_price: Number
}, {
// 定义模型的选项或配置。
// 在这个例子中，只定义了一个选项：table。
// table选项指定了模型在数据库中对应的表名。
// 在这个例子中，表名被指定为"sp_goods_attr"，这是数据库中存储商品属性信息的表的名称。
table: "sp_goods_attr"
});
// 模型定义完成。现在，我们调用回调函数callback。
// 由于我们没有向回调函数传递任何参数，这通常表示模型定义成功，没有发生错误。
// 回调函数可以在这里执行一些后续操作，如初始化数据、启动服务等。
// 在这个例子中，回调函数被简单地调用，没有执行任何额外的逻辑。
return callback();
module.exports = function(db,callback){
// 用户模型
db.define("GoodAttributeModel",{
id : {type: 'serial', key: true},
goods_id : Number,
attr_id : Number,
attr_value : String,
add_price : Number
},{
table : "sp_goods_attr"
});
return callback();
}

69
models/GoodModel.js
Unescape View File

@ -1,40 +1,33 @@
// 导出一个函数，这个函数接受两个参数：
// 第一个参数是数据库对象db，用于数据库操作；
// 第二个参数是一个回调函数callback，用于在操作完成后执行特定逻辑。
module.exports = function(db, callback) {
// 开始定义用户模型，这里的用户模型实际上是一个商品属性模型。
// 使用db.define方法，该方法用于在数据库中定义一个新的模型（或称为表结构）。
// 模型名为GoodAttributeModel，代表商品属性模型。
db.define("GoodAttributeModel", {
// 以下是模型属性的定义：
// id属性：作为主键，其类型为'serial'，表示这是一个自增的序列号。
// key: true表示这个属性是主键。
id: {type: 'serial', key: true},
module.exports = function(db,callback){
// 用户模型
db.define("GoodModel",{
goods_id : {type: 'serial', key: true},
cat_id : Number,
goods_name : String,
goods_price : Number,
goods_number : Number,
goods_weight : Number,
goods_introduce : String,
goods_big_logo : String,
goods_small_logo : String,
goods_state : Number, // 0：未审核 1: 审核中 2: 已审核
is_del : ['0','1'], // 0: 正常 , 1: 删除
add_time : Number,
upd_time : Number,
delete_time : Number,
hot_mumber : Number,
is_promote : Boolean,
cat_one_id : Number,
cat_two_id : Number,
cat_three_id : Number
// goods_id属性：表示商品ID，其类型为数字（Number）。
// 用于关联到具体的商品记录。
goods_id: Number,
// attr_id属性：表示属性ID，其类型为数字（Number）。
// 用于关联到具体的属性记录，表示这个商品属性是哪种属性。
attr_id: Number,
// attr_value属性：表示属性值，其类型为字符串（String）。
// 存储商品该属性的具体值，如颜色为红色、尺码为L等。
attr_value: String,
// add_price属性：表示附加价格，其类型为数字（Number）。
// 如果某个属性会导致商品价格变动（如不同颜色价格不同），则在这里存储增加的金额。
add_price: Number
}, {
// 以下是模型选项的定义：
// table选项：指定这个模型在数据库中对应的表名。
// 在这个例子中，表名为sp_goods_attr，表示商品属性表。
table: "sp_goods_attr"
});
// 模型定义完成，调用回调函数callback。
// 传入无参数，表示模型定义成功，可以进行后续操作。
// 回调函数通常用于执行一些后续的逻辑处理，如初始化数据、启动服务等。
return callback();
},{
table : "sp_goods",
methods: {
getGoodsCat: function () {
return this.cat_one_id + ',' + this.cat_two_id + ',' + this.cat_three_id;
}
}
});
return callback();
}

55
models/GoodPicModel.js
Unescape View File

@ -1,44 +1,13 @@
// 导出一个函数，这个函数是模块的主要接口，它接受两个参数：
// 第一个参数是数据库对象db，它封装了与数据库进行交互的所有能力；
// 第二个参数是一个回调函数callback，它将在模型定义成功完成后被调用。
module.exports = function(db, callback) {
// 使用db.define方法开始定义一个新的数据库模型。
// 需要注意的是，虽然这里提到的是“用户模型”，但实际上定义的是一个商品图片模型。
// 模型的名称被指定为"GoodPicModel"，这是在代码中引用该模型时的标识符。
db.define("GoodPicModel", {
// 以下是该模型属性的定义，每个属性都对应数据库表中的一个字段：
// pics_id属性：这是模型的主键，类型为'serial'，表示这是一个自增的序列号。
// key: true表明这个属性是主键，用于唯一标识数据库中的每一条记录。
pics_id: {type: 'serial', key: true},
// goods_id属性：表示关联的商品ID，类型为Number。
// 这个属性用于将商品图片与其对应的商品记录关联起来。
goods_id: Number,
// pics_big属性：表示商品的大图地址，类型为String。
// 存储商品大图的URL链接，用于在需要高清图片展示时使用。
pics_big: String,
// pics_mid属性：表示商品的中图地址，类型为String。
// 存储商品中图的URL链接，用于在需要中等尺寸图片展示时使用。
pics_mid: String,
// pics_sma属性：表示商品的小图地址，类型为String。
// 存储商品小图的URL链接，通常用于商品列表或缩略图展示场景。
pics_sma: String
}, {
// 以下是该模型的选项或配置的定义部分：
// table选项：指定这个模型在数据库中对应的表名。
// 在这个例子中，表名被指定为"sp_goods_pics"，这是数据库中存储商品图片信息的表的名称。
// 所有与GoodPicModel相关的数据库操作都会针对这个表进行。
table: "sp_goods_pics"
});
// 模型定义完成。现在，我们调用之前传入的回调函数callback。
// 由于模型定义操作通常不会返回任何结果（除非出现错误），因此这里我们传入一个空参数。
// 回调函数可以在此处执行一些后续的逻辑处理，如初始化数据、启动服务等。
// 但在这个例子中，回调函数可能只是被用来简单地表示模型定义过程的结束，或者进行一些简单的日志记录。
return callback();
module.exports = function(db,callback){
// 用户模型
db.define("GoodPicModel",{
pics_id : {type: 'serial', key: true},
goods_id : Number,
pics_big : String,
pics_mid : String,
pics_sma : String
},{
table : "sp_goods_pics"
});
return callback();
}

69
models/ManagerModel.js
Unescape View File

@ -1,55 +1,16 @@
// 导出一个函数，这个函数有两个参数：
// 第一个参数是数据库对象db，用于执行数据库相关操作；
// 第二个参数是一个回调函数callback，用于在模型定义完成后执行一些后续操作。
module.exports = function(db, callback) {
// 注释：以下代码定义了一个用户模型，但根据上下文，这里更准确地应该是一个管理员模型。
// 使用数据库对象db的define方法，定义一个名为ManagerModel的模型。
// 这个模型用于表示系统中的管理员信息。
db.define("ManagerModel", {
// 以下是ManagerModel模型的属性定义：
// mg_id属性：表示管理员的唯一标识符，类型为'serial'，表示这是一个自增的主键。
// key: true表示这个属性是主键，用于唯一标识数据库中的每条记录。
mg_id: {type: 'serial', key: true},
// mg_name属性：表示管理员的名称，类型为字符串（String）。
// 用于存储管理员的登录名或姓名。
mg_name: String,
// mg_pwd属性：表示管理员的密码，类型为字符串（String）。
// 用于存储管理员的登录密码，通常经过加密处理。
mg_pwd: String,
// mg_time属性：表示与管理员相关的时间信息，类型为数字（Number）。
// 这个时间可能是管理员的注册时间、最后登录时间或其他与时间相关的属性。
mg_time: Number,
// role_id属性：表示管理员的角色ID，类型为数字（Number）。
// 用于关联管理员与其在系统中的角色，从而控制管理员的权限。
role_id: Number,
// mg_mobile属性：表示管理员的手机号码，类型为字符串（String）。
// 用于存储管理员的联系电话，便于在需要时联系管理员。
mg_mobile: String,
// mg_email属性：表示管理员的邮箱地址，类型为字符串（String）。
// 用于存储管理员的电子邮件地址，便于发送通知或重置密码等操作。
mg_email: String,
// mg_state属性：表示管理员的状态，类型为数字（Number）。
// 这个状态可能表示管理员是否激活、是否禁用或其他与管理员状态相关的属性。
mg_state: Number
}, {
// 以下是ManagerModel模型的选项定义：
// table选项：指定这个模型在数据库中对应的表名。
// 在这个例子中，表名为sp_manager，表示这个模型对应的数据库表是sp_manager。
table: "sp_manager"
});
// 模型定义完成，现在调用回调函数callback。
// 由于模型定义通常不会返回任何结果（除非出错），因此这里传入无参数。
// 回调函数可以在此处执行一些后续的逻辑处理，如初始化数据、启动服务等。
// 但在这个例子中，回调函数可能只是简单地表示模型定义过程的结束。
return callback();
module.exports = function(db,callback){
// 用户模型
db.define("ManagerModel",{
mg_id : {type: 'serial', key: true},
mg_name : String,
mg_pwd : String,
mg_time : Number,
role_id : Number,
mg_mobile : String,
mg_email : String,
mg_state : Number
},{
table : "sp_manager"
});
return callback();
}

60
models/OrderGoodModel.js
Unescape View File

@ -1,48 +1,14 @@
// 导出一个函数，这个函数接受两个参数：
// 第一个参数是数据库对象db，它提供了与数据库进行交互的API；
// 第二个参数是一个回调函数callback，它在模型定义完成后被调用。
module.exports = function(db, callback) {
// 注释：以下代码定义了一个模型，用于表示订单中的商品信息。
// 使用数据库对象db的define方法，定义一个名为OrderGoodModel的模型。
// 这个模型将用于存储订单中每个商品的相关信息。
db.define("OrderGoodModel", {
// 以下是OrderGoodModel模型的属性定义部分：
// id属性：表示订单商品的唯一标识符，类型为'serial'，表示这是一个自增的主键。
// key: true表示这个属性是主键，用于唯一标识数据库中的每条记录。
id: {type: 'serial', key: true},
// order_id属性：表示这个订单商品所属的订单ID，类型为数字（Number）。
// 用于关联订单商品与其所属的订单记录。
order_id: Number,
// goods_id属性：表示这个订单商品对应的商品ID，类型为数字（Number）。
// 用于关联订单商品与其对应的商品记录。
goods_id: Number,
// goods_price属性：表示这个订单商品的价格，类型为数字（Number）。
// 存储商品在订单中的单价，可能包含折扣或优惠后的价格。
goods_price: Number,
// goods_number属性：表示这个订单商品的数量，类型为数字（Number）。
// 存储用户购买的商品数量。
goods_number: Number,
// goods_total_price属性：表示这个订单商品的总价，类型为数字（Number）。
// 存储商品单价乘以数量的结果，即用户需要支付的总金额（对于该商品）。
goods_total_price: Number
}, {
// 以下是OrderGoodModel模型的选项定义部分：
// table选项：指定这个模型在数据库中对应的表名。
// 在这个例子中，表名为sp_order_goods，表示这个模型对应的数据库表是sp_order_goods。
// 所有与OrderGoodModel相关的数据库操作都会针对这个表进行。
table: "sp_order_goods"
});
// 模型定义完成，现在调用回调函数callback。
// 由于模型定义通常不会返回任何结果（除非出错），因此这里传入无参数。
// 回调函数可以在此处执行一些后续的逻辑处理，如初始化数据、启动服务等。
// 但在这个例子中，回调函数可能只是简单地表示模型定义过程的结束，或者用于通知调用者模型已经准备好。
return callback();
module.exports = function(db,callback){
// 用户模型
db.define("OrderGoodModel",{
id : {type: 'serial', key: true},
order_id : Number,
goods_id : Number,
goods_price : Number,
goods_number : Number,
goods_total_price : Number
},{
table : "sp_order_goods"
});
return callback();
}

47
models/OrderModel.js
Unescape View File

@ -1,27 +1,22 @@
// 导出一个函数，这个函数接受数据库对象db和一个回调函数callback作为参数
module.exports = function(db, callback) {
// 用户模型
// 使用db.define方法定义一个模型，模型名为OrderModel
db.define("OrderModel", {
// 定义模型的属性
order_id: {type: 'serial', key: true}, // 订单ID，自增主键，用于唯一标识每一个订单
user_id: Number, // 用户ID，类型为数字，表示下单用户的唯一标识
order_number: String, // 订单编号，类型为字符串，用于内部跟踪或用户查询
order_price: Number, // 订单总价，类型为数字，表示订单的总金额
order_pay: [1,2,3], // 订单支付方式，类型为数字数组，具体值可能代表不同的支付方式（如1代表支付宝，2代表微信支付等）
is_send: ["是","否"], // 是否发货，类型为字符串数组，表示订单是否已经发货
trade_no: String, // 交易编号，类型为字符串，用于第三方支付平台的交易记录
order_fapiao_title: ["个人","公司"], // 发票抬头，类型为字符串数组，表示发票的抬头信息
order_fapiao_company: String, // 发票公司名称，类型为字符串，当发票抬头为公司时需要填写
order_fapiao_content: String, // 发票内容，类型为字符串，表示发票的具体内容
consignee_addr: String, // 收货人地址，类型为字符串，表示订单的收货地址
pay_status: ['0','1'], // 支付状态，类型为字符串数组，表示订单的支付状态（如0代表未支付，1代表已支付）
create_time: Number, // 创建时间，类型为数字，表示订单创建的时间戳
update_time: Number // 更新时间，类型为数字，表示订单最后一次更新的时间戳
}, {
// 定义模型的选项
table: "sp_order" // 指定模型对应的数据库表名为sp_order，用于在数据库中存储订单信息
});
// 调用回调函数，传入无参数，表示模型定义完成
return callback();
module.exports = function(db,callback){
// 用户模型
db.define("OrderModel",{
order_id : {type: 'serial', key: true},
user_id : Number,
order_number : String,
order_price : Number,
order_pay : [1,2,3],
is_send : ["是","否"],
trade_no : String,
order_fapiao_title : ["个人","公司"],
order_fapiao_company : String,
order_fapiao_content : String,
consignee_addr : String,
pay_status : ['0','1'],
create_time : Number,
update_time : Number
},{
table : "sp_order"
});
return callback();
}

36
models/PermissionAPIModel.js
Unescape View File

@ -1,24 +1,14 @@
// 导出一个函数，这个函数接受数据库对象db和一个回调函数callback作为参数
module.exports = function(db, callback) {
// 用户模型
// 使用db.define方法定义一个模型，模型名为PermissionAPIModel
db.define("PermissionAPIModel", {
// 定义模型的属性
id: {type: 'serial', key: true},
// 唯一标识ID，自增主键
ps_id: Number,
// 权限ID，类型为数字
ps_api_service: String,
// API服务名称，类型为字符串
ps_api_action: String,
// API动作名称，类型为字符串
ps_api_order: Number
// API顺序，类型为数字
}, {
// 定义模型的选项
table: "sp_permission_api"
// 指定模型对应的数据库表名为sp_permission_api
});
// 调用回调函数，传入无参数
return callback();
module.exports = function(db,callback) {
// 用户模型
db.define("PermissionAPIModel",{
id : {type: 'serial', key: true},
ps_id : Number,
ps_api_service : String,
ps_api_action : String,
ps_api_order : Number
},{
table : "sp_permission_api"
});
return callback();
}

64
models/PermissionModel.js
Unescape View File

@ -1,52 +1,14 @@
// 导出一个函数，该函数是模块的主要接口。
// 它接受两个参数：数据库对象db（用于数据库操作）和一个回调函数callback（在模型定义后执行）。
module.exports = function(db, callback) {
// 定义一个名为"PermissionModel"的模型，用于表示系统中的权限。
// 使用db.define方法，该方法来自传入的数据库对象db。
db.define("PermissionModel", {
// 定义模型的属性，这些属性将映射到数据库表中的列。
// ps_id属性：权限的唯一标识符，类型为'serial'，表示这是一个自增的序列。
// key: true表明这个属性是主键。
ps_id: {type: 'serial', key: true},
// 注释：权限ID，自增主键，用于唯一标识每个权限记录。
// ps_name属性：权限的名称，类型为字符串（String）。
// 用于存储权限的描述性名称。
ps_name: String,
// 注释：权限名称，类型为字符串，用于标识和描述权限。
// ps_pid属性：父权限的ID，类型为数字（Number）。
// 用于表示权限之间的层级关系，即哪个权限是另一个权限的父级。
ps_pid: Number,
// 注释：父权限ID，类型为数字，用于建立权限的层级结构。
// ps_c属性：控制器名称，类型为字符串（String）。
// 在MVC架构中，控制器负责处理用户的请求。
// 这个属性可能用于指示哪个控制器与这个权限相关联。
ps_c: String,
// 注释：控制器名称，类型为字符串，用于指示处理请求的控制器。
// ps_a属性：动作名称，类型为字符串（String）。
// 在MVC架构中，动作是控制器中的一个方法，用于执行特定的任务。
// 这个属性可能用于指示哪个动作与这个权限相关联。
ps_a: String,
// 注释：动作名称，类型为字符串，用于指示控制器中要执行的动作。
// ps_level属性：权限级别，类型为字符串（String）。
// 这个属性可能用于表示权限的重要性或访问级别。
ps_level: String
// 注释：权限级别，类型为字符串，用于表示权限的等级或重要性。
}, {
// 定义模型的选项，这些选项用于配置模型的行为或属性。
// table选项：指定这个模型在数据库中对应的表名。
// 在这个例子中，表名被指定为"sp_permission"。
table: "sp_permission"
// 注释：指定模型对应的数据库表名为sp_permission，这是存储权限信息的数据库表。
});
// 调用回调函数callback，表示模型定义已经完成。
// 回调函数不接受任何参数，因为它主要用于执行一些后续的逻辑处理，而不是处理模型定义的结果。
return callback();
module.exports = function(db,callback){
// 用户模型
db.define("PermissionModel",{
ps_id : {type: 'serial', key: true},
ps_name : String,
ps_pid : Number,
ps_c : String,
ps_a : String,
ps_level : String
},{
table : "sp_permission"
});
return callback();
}

32
models/ReportOneModel.js
Unescape View File

@ -1,22 +1,12 @@
// 导出一个函数，这个函数接受数据库对象db和一个回调函数callback作为参数
module.exports = function(db, callback) {
// 报表模型1
// 使用db.define方法定义一个模型，模型名为ReportOneModel
db.define("ReportOneModel", {
// 定义模型的属性
id: {type: 'serial', key: true},
// 唯一标识ID，自增主键
rp1_user_count: Number,
// 用户数量，类型为数字
rp1_area: Number,
// 区域代码或标识，类型为数字
rp1_date: { type: "date", time: false }
// 报表日期，类型为日期，不包含时间信息
}, {
// 定义模型的选项
table: "sp_report_1"
// 指定模型对应的数据库表名为sp_report_1
});
// 调用回调函数，传入无参数
return callback();
module.exports = function(db,callback){
// 报表模型1
db.define("ReportOneModel",{
id : {type: 'serial', key: true},
rp1_user_count : Number,
rp1_area : Number,
rp1_date : { type: "date", time: false }
},{
table : "sp_report_1"
});
return callback();
}

61
models/ReportTwoModel.js
Unescape View File

@ -1,51 +1,12 @@
// 导出一个函数，这个函数是模块的主要接口。
// 它接受两个参数：数据库对象db（用于数据库操作）和一个回调函数callback（在模型定义后执行）。
module.exports = function(db, callback) {
// 这一行开始定义了一个名为"ReportTwoModel"的模型。
// db.define是数据库操作的一部分，用于创建一个新的模型。
// 这个模型可能用于存储报表数据，特别是与页面相关的统计数据。
db.define("ReportTwoModel", {
// 以下是模型属性的定义部分。
// 每个属性都映射到数据库表中的一个列。
// id属性：这是模型的主键，用于唯一标识每条记录。
// type: 'serial' 表示这是一个自增的整数序列。
// key: true 表示这是主键字段。
id: {type: 'serial', key: true},
// 注释：这是报表记录的唯一标识ID，它是一个自增的主键。
// rp2_page属性：用于存储与报表关联的页面名称。
// 类型为String，表示这是一个字符串类型的字段。
rp2_page: String,
// 注释：这是报表关联的页面名称，它是一个字符串类型的字段。
// rp2_count属性：用于存储与页面相关的统计数据，如访问次数。
// 类型为Number，表示这是一个数字类型的字段。
rp2_count: Number,
// 注释：这是与报表页面相关的统计数据，如访问次数，它是一个数字类型的字段。
// rp2_date属性：用于存储报表的生成日期。
// 类型为"date"，并且time: false表示只存储日期部分，不存储时间部分。
rp2_date: { type: "date", time: false }
// 注释：这是报表的生成日期，只包含日期部分，不包含时间部分，它是一个日期类型的字段。
}, {
// 以下是模型选项的定义部分。
// 这些选项用于配置模型的行为或属性。
// table选项：指定这个模型在数据库中对应的表名。
// 在这个例子中，表名被指定为"sp_report_2"。
table: "sp_report_2"
// 注释：这是模型对应的数据库表名，存储报表相关数据的表名为sp_report_2。
});
// 这一行调用了回调函数callback。
// 回调函数是在模型定义完成后执行的，它不接受任何参数。
// 在这个例子中，回调函数的调用表示ReportTwoModel模型已经成功定义。
// 这之后，模型就可以在应用程序的其他部分被引用和使用了。
return callback();
module.exports = function(db,callback){
// 报表模型1
db.define("ReportTwoModel",{
id : {type: 'serial', key: true},
rp2_page : String,
rp2_count : Number,
rp2_date : { type: "date", time: false }
},{
table : "sp_report_2"
});
return callback();
}

35
models/RoleModel.js
Unescape View File

@ -1,24 +1,13 @@
// 导出一个函数，这个函数接受数据库对象db和一个回调函数callback作为参数
module.exports = function(db, callback) {
// 用户模型
// 使用db.define方法定义一个模型，模型名为RoleModel
db.define("RoleModel", {
// 定义模型的属性
role_id: {type: 'serial', key: true},
// 角色ID，自增主键
role_name: String,
// 角色名称，类型为字符串
ps_ids: String,
// 权限ID列表，类型为字符串，可能以某种方式（如逗号分隔）存储多个权限ID
ps_ca: String,
// 权限字符串，类型为字符串，可能表示权限的字符串表示形式
role_desc: String
// 角色描述，类型为字符串
}, {
// 定义模型的选项
table: "sp_role"
// 指定模型对应的数据库表名为sp_role
});
// 调用回调函数，传入无参数
return callback();
module.exports = function(db,callback){
// 用户模型
db.define("RoleModel",{
role_id : {type: 'serial', key: true},
role_name : String,
ps_ids : String,
ps_ca : String,
role_desc : String
},{
table : "sp_role"
});
return callback();
}

44
public/index.html
Unescape View File

@ -1,62 +1,44 @@
<!DOCTYPE html>
<!-- 定义文档类型为HTML5，告知浏览器按照HTML5的标准来解析和渲染此页面 -->
<html lang="en">
<head>
<!-- 设置字符编码为UTF-8-->
<!--确保页面中的各种字符（包括中文、特殊符号等）能够正确显示，避免出现乱码问题 -->
<head>
<meta charset="utf-8">
<!-- 强制IE浏览器使用最新的渲染引擎，目的是让IE浏览器尽可能以符合现代网页标准的方式来渲染页面内容，提升页面在IE浏览器中的显示效果和兼容性 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 设置视口，确保页面在移动设备上正确显示。width=device-width表示视口宽度等于设备宽度，initial-scale=1.0表示初始缩放比例为1，也就是页面初始加载时按照原始尺寸显示，不会进行缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 设置网站图标，href属性中的<%= BASE_URL %>是一个模板语法（可能基于构建工具，如Webpack等），会被替换为实际的基础路径，指向网站图标文件favicon.ico所在位置，该图标会显示在浏览器标签页、书签栏等位置，用于标识网站 -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 根据是否是生产环境设置标题，htmlWebpackPlugin.options.isProd是一个布尔值（通过构建工具的插件配置传入），如果是生产环境（isProd为true），则标题只显示“电商后台管理系统”，如果是非生产环境（isProd为false），标题会显示“dev - 电商后台管理系统”，方便在开发阶段和正式上线阶段区分页面 -->
<title><%= htmlWebpackPlugin.options.isProd? '' : 'dev - ' %>电商后台管理系统</title>
<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>
<% if(htmlWebpackPlugin.options.isProd){ %>
<!-- 如果是生产环境，加载nprogress的样式表文件。nprogress通常用于在页面加载、路由切换等操作时显示进度条，这里通过CDN（内容分发网络）引入其最小化的样式表文件，以减少文件体积并提升加载速度 -->
<!-- nprogress 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<!-- 加载富文本编辑器Quill的样式表文件，Quill用于在网页中实现富文本编辑功能（如编辑带有格式的文章、文档等），此处通过CDN引入其核心样式文件（quill.core.min.css），用于定义基本的编辑区域样式等 -->
<!-- 富文本编辑器 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
<!-- 加载Quill的一种主题样式表文件（quill.snow.min.css），Quill提供了不同的主题样式，“snow”主题可能具有特定的外观风格，比如按钮样式、文本框外观等，用于给富文本编辑区域赋予相应的视觉效果 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
<!-- 加载Quill的另一种主题样式表文件（quill.bubble.min.css），与“snow”主题不同，“bubble”主题有着别样的样式呈现，可能用于满足不同的设计需求和用户体验要求 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
<!-- 加载Element UI框架的样式表文件，Element UI是一个基于Vue.js的UI组件库，提供了丰富的组件（如按钮、表单、表格等）来快速构建页面界面，这里引入其主题样式文件（theme-chalk/index.css），使其组件按照设定的样式显示 -->
<!-- element-ui 的样式表文件 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 加载Vue.js库，通过CDN引入Vue.js的最小化版本（vue.min.js），Vue.js是一个用于构建用户界面的渐进式JavaScript框架，是整个项目实现响应式界面、组件化开发等功能的核心基础 -->
<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<!-- 加载Vue Router库，同样通过CDN引入其最小化版本（vue-router.min.js），Vue Router用于在Vue.js项目中实现路由功能，即管理页面之间的跳转和导航逻辑 -->
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
<!-- 加载Axios库，用于HTTP请求，通过CDN引入最小化版本（axios.min.js），Axios可以方便地在JavaScript中发起各种HTTP请求（如GET、POST等），用于与后端服务器进行数据交互 -->
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<!-- 加载Lodash库，提供实用函数，通过CDN引入最小化版本（lodash.min.js），Lodash包含了大量用于操作数组、对象、字符串等数据类型的实用函数，能帮助简化开发过程中的一些复杂数据处理逻辑 -->
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
<!-- 加载ECharts库，用于数据可视化，通过CDN引入最小化版本（echarts.min.js），ECharts可以帮助将数据以各种图表（如柱状图、折线图、饼图等）的形式展示出来，方便直观地分析和呈现数据 -->
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
<!-- 加载nprogress的JavaScript文件，与前面加载的样式表文件配合使用，用于在页面加载、操作过程中控制进度条的显示逻辑，实现动态的进度展示效果 -->
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- 加载富文本编辑器Quill的JavaScript文件，使前面引入的Quill样式表生效，并且为页面赋予富文本编辑的功能，让用户可以在页面中进行文本的编辑操作 -->
<!-- 富文本编辑器的 js 文件 -->
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<!-- 加载Vue Quill Editor的JavaScript文件，用于Vue集成Quill，使得Quill富文本编辑器能够更好地与Vue.js项目结合使用，方便在Vue组件中调用和操作Quill的功能 -->
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
<!-- 加载Element UI框架的JavaScript文件，使前面引入的Element UI样式表对应的组件具备交互功能，-->
<!--从而可以在页面中使用Element UI提供的各种UI组件来构建页面界面 -->
<!-- element-ui 的 js 文件 -->
<script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
<% } %>
</head>
<body>
<!-- 如果浏览器禁用JavaScript，显示警告信息，告知用户此电商后台管理系统需要启用JavaScript才能正常工作，引导用户开启JavaScript功能，以便继续使用页面 -->
</head>
<body>
<noscript>
<strong>We're sorry but vue_shop_admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<strong>We're sorry but vue_shop_admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<!-- Vue应用挂载点，这是Vue.js项目中用于将Vue实例挂载到DOM节点上的标识，后续通过JavaScript代码会将创建的Vue实例挂载到这个id为“app”的div元素上，使得Vue应用的内容能够渲染显示在页面中 -->
<div id="app"></div>
<!-- 构建后的文件将自动注入到此处，意味着通过构建工具（如Webpack等）打包生成的JavaScript、CSS等文件，会按照配置自动插入到这个位置，实现页面的最终整合和功能呈现 -->
</body>
<!-- built files will be auto injected -->
</body>
</html>

108
public2/ueditor/dialogs/anchor/anchor.html
Unescape View File

@ -1,78 +1,40 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- 以上是HTML文档类型声明，指定该文档遵循HTML 4.01 Transitional标准，并且关联对应的DTD（文档类型定义）文件 -->
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 此meta标签用于设置文档的字符编码为UTF-8，确保页面中的文字能正确显示 -->
<title></title>
<style type="text/css">
/* 以下是CSS样式定义部分，用于设置页面元素的样式 */
* {
color: #838383; /* 设置所有元素的文本颜色为灰色（#838383） */
margin: 0; /* 清除所有元素的外边距 */
padding: 0; /* 清除所有元素的内边距 */
}
html, body {
font-size: 12px; /* 设置html和body元素的字体大小为12px */
overflow: hidden; /* 隐藏html和body元素的滚动条，防止内容超出可视区域时出现滚动条 */
}
.content {
padding: 5px 0 0 15px; /* 为类名为'content'的元素设置内边距，上内边距为5px，左内边距为15px，下内边距和右内边距为0 */
}
input {
width: 210px; /* 设置input输入框的宽度为210px */
height: 21px; /* 设置input输入框的高度为21px */
line-height: 21px; /* 设置input输入框内文本的行高与高度一致，实现垂直居中效果 */
margin-left: 4px; /* 设置input输入框的左边距为4px */
}
</style>
</head>
<body>
<div class="content">
<span><var id="lang_input_anchorName"></var></span><input id="anchorName" value="" />
<!-- 创建一个类名为'content'的div容器，里面包含一个span元素（其中嵌套了一个带有特定id的var元素，不过此处var元素未显示具体内容，可能后续通过脚本操作）和一个id为'anchorName'的input输入框，输入框初始值为空 -->
</div>
<script type="text/javascript" src="../internal.js"></script>
<!-- 引入一个外部的JavaScript文件（相对路径为'../internal.js'），这个文件里应该包含了一些在后续脚本中会用到的函数、变量等定义，比如可能定义了$G、editor、dialog、domUtils、$focus等在下面脚本中出现的对象或函数 -->
<script type="text/javascript">
var anchorInput = $G('anchorName'),
node = editor.selection.getRange().getClosedNode();
// 通过调用$G函数（应该是在引入的'internal.js'文件中定义的获取元素的函数，类似document.getElementById的功能）获取id为'anchorName'的元素，赋值给anchorInput变量，
// 同时通过editor对象（可能是一个编辑器相关的全局对象，具体功能依赖其定义）获取当前选区范围的闭合节点（可能是在文本编辑器之类的场景下获取当前选中区域对应的DOM节点），赋值给node变量
if (node && node.tagName == 'IMG' && (node = node.getAttribute('anchorname'))) {
anchorInput.value = node;
}
// 判断获取到的节点node是否存在，并且其标签名是否为'IMG'（表示是一个图片元素），如果是，则获取该图片元素的'anchorname'属性值（这里将属性值又赋值给node变量，覆盖了之前的节点对象，可能代码逻辑意图不太清晰，或许可以使用另一个变量来接收属性值更好），
// 然后将获取到的属性值设置为id为'anchorName'的input输入框的value值，也就是将图片元素的'anchorname'属性值显示在输入框中
anchorInput.onkeydown = function (evt) {
evt = evt || window.event;
if (evt.keyCode == 13) {
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
*{color: #838383;margin: 0;padding: 0}
html,body {font-size: 12px;overflow: hidden; }
.content{padding:5px 0 0 15px;}
input{width:210px;height:21px;line-height:21px;margin-left: 4px;}
</style>
</head>
<body>
<div class="content">
<span><var id="lang_input_anchorName"></var></span><input id="anchorName" value="" />
</div>
<script type="text/javascript" src="../internal.js"></script>
<script type="text/javascript">
var anchorInput = $G('anchorName'),
node = editor.selection.getRange().getClosedNode();
if(node && node.tagName == 'IMG' && (node = node.getAttribute('anchorname'))){
anchorInput.value = node;
}
anchorInput.onkeydown = function(evt){
evt = evt || window.event;
if(evt.keyCode == 13){
editor.execCommand('anchor', anchorInput.value);
dialog.close();
domUtils.preventDefault(evt)
}
};
dialog.onok = function (){
editor.execCommand('anchor', anchorInput.value);
dialog.close();
domUtils.preventDefault(evt)
}
};
// 为anchorInput（即前面获取的input输入框）添加onkeydown事件监听器，当在输入框中按下键盘按键时触发该函数，
// 首先将传入的事件对象evt进行兼容处理（兼容不同浏览器获取事件对象的方式，在IE中是window.event，在其他标准浏览器中是作为参数传入），
// 然后判断按下的键的键码是否为13（回车键的键码），如果是，则通过editor对象执行名为'anchor'的命令（具体这个命令做什么取决于editor对象的实现，可能与在编辑器中设置某种锚点相关功能有关），并传入input输入框中的值作为参数，
// 接着关闭dialog（可能是一个弹出对话框相关的对象，用于展示交互界面，关闭表示操作完成后隐藏对话框），
// 最后通过domUtils对象（同样应该是在'internal.js'等相关文件中定义的工具对象）调用preventDefault方法阻止默认的回车键行为（比如防止页面刷新等默认行为）
dialog.onok = function () {
editor.execCommand('anchor', anchorInput.value);
dialog.close();
};
// 为dialog对象添加onok事件监听器，当点击对话框的确定按钮（假设存在这样的按钮并且触发onok事件）时执行该函数，
// 函数内同样执行editor对象的'anchor'命令并传入input输入框中的值作为参数，然后关闭dialog对象
$focus(anchorInput);
// 调用$focus函数（应该是用于聚焦元素的自定义函数，在'internal.js'文件中定义），将焦点设置到anchorInput（即id为'anchorName'的input输入框）上，方便用户直接输入内容
</script>
</body>
};
$focus(anchorInput);
</script>
</body>
</html>

1018
public2/ueditor/dialogs/attachment/attachment.css
View File

File diff suppressed because it is too large Load Diff

38
public2/ueditor/dialogs/attachment/attachment.html
Unescape View File

@ -1,86 +1,60 @@
<!doctype html>
<!-- 这是 HTML5 的文档类型声明，告知浏览器按照 HTML5 标准来解析页面内容 -->
<html>
<head>
<meta charset="UTF-8">
<!-- 设置页面的字符编码为 UTF-8，确保页面能够正确显示各种字符，包括中文等特殊字符 -->
<title>ueditor 图片对话框</title>
<!-- 定义页面在浏览器标签页中显示的标题 -->
<title>ueditor图片对话框</title>
<script type="text/javascript" src="../internal.js"></script>
<!-- 引入一个相对路径为../internal.js 的 JavaScript 文件，该文件可能包含了页面中会用到的自定义函数、变量以及业务逻辑等代码，具体功能依赖其内部定义 -->
<!-- jquery -->
<script type="text/javascript" src="../../third-party/jquery-1.10.2.min.js"></script>
<!-- 引入 jQuery 库的压缩版本，版本号为 1.10.2，jQuery 是一个广泛使用的 JavaScript 库，用于简化 HTML 文档遍历、事件处理、动画效果等操作，方便进行前端开发 -->
<!-- webuploader -->
<script src="../../third-party/webuploader/webuploader.min.js"></script>
<!-- 引入 webuploader 库的压缩版本，webuploader 常用于实现文件上传功能，提供了丰富的接口和交互逻辑来处理文件上传相关的操作 -->
<link rel="stylesheet" type="text/css" href="../../third-party/webuploader/webuploader.css">
<!-- 引入与 webuploader 库对应的 CSS 样式文件，用于设置 webuploader 相关组件在页面中的外观样式，如文件上传按钮、进度条等的样式 -->
<!-- attachment dialog -->
<link rel="stylesheet" href="attachment.css" type="text/css" />
<!-- 引入名为 attachment.css 的本地 CSS 样式文件，该文件应该定义了页面中与附件相关的对话框等元素的特定样式，用于页面整体的布局和视觉呈现 -->
</head>
<body>
<div class="wrapper">
<!-- 创建一个类名为'wrapper'的 div 容器，可能作为整个页面内容的外层包裹容器，方便对内部元素进行整体的布局和样式控制 -->
<div id="tabhead" class="tabhead">
<!-- 创建一个 id 为'tabhead'且类名为'tabhead'的 div 容器，用于放置选项卡相关的元素，从类名推测可能是选项卡头部区域 -->
<span class="tab focus" data-content-id="upload"><var id="lang_tab_upload"></var></span>
<!-- 创建一个类名为'tab'且具有'focus'类名（可能表示当前选中状态）的 span 元素，通过 data-content-id 属性设置了与'upload'相关联的值，内部嵌套一个带有特定 id 的 var 元素（var 元素内容可能通过 JavaScript 动态设置，此处未明确显示具体文本），该 span 元素可能代表"上传图片"这个选项卡 -->
<span class="tab" data-content-id="online"><var id="lang_tab_online"></var></span>
<!-- 创建一个类名为'tab'的 span 元素，通过 data-content-id 属性设置了与'online'相关联的值，同样内部嵌套一个带有特定 id 的 var 元素，该 span 元素可能代表"在线图片"这个选项卡 -->
</div>
<div id="tabbody" class="tabbody">
<!-- 创建一个 id 为'tabbody'且类名为'tabbody'的 div 容器，应该是用于展示与选项卡对应的内容区域，与上面的'tabhead'区域相对应 -->
<!-- 上传图片 -->
<div id="upload" class="panel focus">
<!-- 创建一个 id 为'upload'且类名为'panel'并具有'focus'类名（可能表示当前显示状态）的 div 容器，用于展示上传图片相关的界面内容，比如文件选择、上传进度等 -->
<div id="queueList" class="queueList">
<!-- 创建一个 id 为'queueList'且类名为'queueList'的 div 容器，可能用于展示文件上传队列相关的信息，例如已选择等待上传的文件列表等 -->
<div class="statusBar element-invisible">
<!-- 创建一个类名为'statusBar'且具有' element-invisible'类名（可能初始状态下隐藏，后续根据操作显示）的 div 容器，用于展示上传的状态信息，如进度条、提示文本等 -->
<div class="progress">
<!-- 创建一个类名为'progress'的 div 容器，用于展示文件上传的进度情况，比如通过改变内部元素的宽度等方式来直观显示已上传的比例 -->
<span class="text">0%</span>
<!-- 创建一个类名为'text'的 span 元素，初始显示文本为"0%"，用于展示上传进度的百分比数值 -->
<span class="percentage"></span>
<!-- 创建一个类名为'percentage'的 span 元素，可能通过 JavaScript 动态设置其宽度等样式来体现实际的上传进度占比情况 -->
</div><div class="info"></div>
<!-- 创建一个类名为'info'的 div 容器，可能用于显示一些其他的上传相关提示信息，目前为空，后续可动态添加内容 -->
<div class="btns">
<!-- 创建一个类名为'btns'的 div 容器，用于放置操作按钮等相关元素 -->
<div id="filePickerBtn"></div>
<!-- 创建一个 id 为'filePickerBtn'的 div 容器，可能作为触发文件选择的按钮区域，具体样式和功能由对应的 CSS 和 JavaScript 代码实现 -->
<div class="uploadBtn"><var id="lang_start_upload"></var></div>
<!-- 创建一个类名为'uploadBtn'的 div 容器，内部嵌套一个带有特定 id 的 var 元素，从 var 元素的 id 推测可能用于显示"开始上传"相关的文本，该 div 整体作为触发文件上传操作的按钮，具体样式和交互由相关代码控制 -->
</div>
</div>
<div id="dndArea" class="placeholder">
<!-- 创建一个 id 为'dndArea'且类名为'placeholder'的 div 容器，可能作为文件拖放上传的占位提示区域，向用户提示可以在此处拖放文件进行上传 -->
<div class="filePickerContainer">
<!-- 创建一个类名为'filePickerContainer'的 div 容器，可能用于进一步包裹文件选择相关的内部元素 -->
<div id="filePickerReady"></div>
<!-- 创建一个 id 为'filePickerReady'的 div 容器，具体功能可能与文件选择操作的准备状态相关，需结合 JavaScript 代码来看其实际用途 -->
</div>
</div>
<ul class="filelist element-invisible">
<!-- 创建一个类名为'filelist'且具有' element-invisible'类名（初始隐藏）的无序列表元素，用于展示已选择的文件列表相关信息，每个列表项可能对应一个已选择的文件 -->
<li id="filePickerBlock" class="filePickerBlock"></li>
<!-- 创建一个 id 为'filePickerBlock'且类名为'filePickerBlock'的列表项元素，具体功能可能与文件选择操作的某个特定状态或功能相关，需结合 JavaScript 代码进一步明确其作用 -->
</ul>
</div>
</div>
<!-- 在线图片 -->
<div id="online" class="panel">
<!-- 创建一个 id 为'online'且类名为'panel'的 div 容器，用于展示在线图片相关的内容，比如已存在的在线图片列表等 -->
<div id="fileList"><var id="lang_imgLoading"></var></div>
<!-- 创建一个 id 为'fileList'的 div 容器，内部嵌套一个带有特定 id 的 var 元素，从 var 元素的 id 推测可能用于显示图片加载相关的提示文本，该 div 整体可能用于展示在线图片列表的区域，具体图片展示等功能由相关代码实现 -->
</div>
</div>
</div>
<script type="text/javascript" src="attachment.js"></script>
<!-- 引入一个相对路径为 attachment.js 的 JavaScript 文件，该文件应该包含了页面中与附件（此处主要是图片相关的上传、展示等操作）交互的具体逻辑，例如实现选项卡切换、文件上传功能、图片列表加载等功能的 JavaScript 代码 -->
</body>
</html>

1668
public2/ueditor/dialogs/attachment/attachment.js
View File

File diff suppressed because it is too large Load Diff

292
public2/ueditor/dialogs/background/background.css
Unescape View File

@ -1,222 +1,94 @@
/* 以下是类名为'wrapper'的元素的样式规则 */
.wrapper{
width: 424px; /* 设置元素的宽度为424px */
margin: 10px auto; /* 上下外边距为10px，左右外边距自动，使元素在父容器中水平居中 */
zoom:1; /* 触发IE浏览器的hasLayout属性，用于解决一些布局相关的兼容性问题，通常和浮动、定位等布局方式结合使用 */
position: relative; /* 将元素的定位方式设置为相对定位，相对其原本在文档流中的位置进行定位调整，方便后续子元素基于此进行绝对定位等操作 */
}
/* 以下是类名为'tabbody'的元素的样式规则 */
.tabbody{
height:225px; /* 设置元素的高度为225px */
}
/* 以下是类名为'tabbody'下的类名为'panel'的子元素的样式规则 */
.tabbody.panel {
position: absolute; /* 将元素设置为绝对定位，其位置将基于最近的已定位（非 static 定位）的祖先元素来确定，如果没有则相对于 body 元素定位 */
width:100%; /* 宽度占满父元素的宽度 */
height:100%; /* 高度占满父元素的高度 */
background: #fff; /* 设置背景颜色为白色 */
display: none; /* 初始状态下不显示该元素，可通过后续添加类名等方式改变显示状态 */
}
/* 以下是类名为'tabbody'下具有'focus'类名的元素的样式规则，可能用于切换显示不同面板等交互场景 */
.tabbody.focus {
display: block; /* 当元素具有'focus'类名时，显示该元素，覆盖上面'.panel'中设置的'display: none'样式 */
}
/* 以下是 body 元素的样式规则，会应用到整个页面文档 */
body{
font-size: 12px; /* 设置页面默认的字体大小为12px */
color: #888; /* 设置页面文本颜色为灰色（#888） */
overflow: hidden; /* 隐藏页面的滚动条，防止内容超出可视区域时出现滚动条 */
}
/* 以下是 input 和 label 元素的样式规则，使它们在垂直方向上居中对齐 */
input,label{
vertical-align:middle /* 设置元素在垂直方向上的对齐方式为居中对齐，常用于表单元素等在同一行显示时的布局调整 */
}
/* 以下是类名为'clear'的元素的样式规则，用于清除浮动带来的影响，确保父元素能正确包裹浮动的子元素，保持布局的完整性 */
.clear{
clear: both; /* 清除左右两侧的浮动元素影响，使该元素不受之前浮动元素的干扰，另起一行显示 */
}
/* 以下是类名为'pl'的元素的样式规则，通过属性选择器 hack（\9）为IE浏览器单独设置左边距，用于适配不同浏览器下的布局差异 */
.pl{
padding-left: 18px;
padding-left: 23px\9; /* 在IE浏览器下，设置左边距为23px，正常浏览器下为18px */
}
/* 以下是 id 为'imageList'的元素的样式规则 */
#imageList {
width: 420px; /* 设置元素的宽度为420px */
height: 215px; /* 设置元素的高度为215px */
margin-top: 10px; /* 设置元素的上外边距为10px，使其与上方元素间隔一定距离 */
overflow: hidden; /* 超出元素尺寸范围的内容将被隐藏 */
overflow-y: auto; /* 允许垂直方向出现滚动条以查看超出部分内容，常用于展示较多内容且希望在垂直方向可滚动查看的区域 */
}
/* 以下是 id 为'imageList'下的 div 元素的样式规则 */
#imageList div {
float: left; /* 使元素向左浮动，常用于实现多栏布局，让后续元素围绕其进行排列 */
width: 100px; /* 设置元素的宽度为100px */
height: 95px; /* 设置元素的高度为95px */
margin: 5px 10px; /* 设置元素的外边距，上下外边距为5px，左右外边距为10px，用于控制元素之间的间隔距离 */
}
/* 以下是 id 为'imageList'下的 img 元素的样式规则 */
#imageList img {
cursor: pointer; /* 设置鼠标指针样式为手型，提示用户该图片元素可点击交互 */
border: 2px solid white; /* 为图片添加白色的2px边框 */
}
/* 以下是类名为'bgarea'的元素的样式规则 */
.bgarea{
margin: 10px; /* 设置元素的上下左右外边距均为10px，使其与周围元素间隔一定距离 */
padding: 5px; /* 设置元素的内边距为5px，在元素内部四周添加间隔空间 */
height: 84%; /* 设置元素的高度占父元素高度的84%，用于根据父元素高度自适应自身高度 */
border: 1px solid #A8A297; /* 为元素添加1px的边框，边框颜色为#A8A297 */
}
/* 以下是类名为'content'下的 div 元素的样式规则 */
.content div{
margin: 10px 0 10px 5px; /* 设置元素的外边距，上外边距和下外边距为10px，左外边距为5px，右外边距为0，用于控制元素在水平和垂直方向的间隔位置 */
}
/* 以下是类名为'content'下的类名为'iptradio'的元素的样式规则 */
.content.iptradio{
margin: 0px 5px 5px 0px; /* 设置元素的外边距，上外边距为0px，右外边距为5px，下外边距为5px，左外边距为0px，用于控制元素在水平和垂直方向的间隔位置 */
}
/* 以下是类名为'txt'的元素的样式规则 */
.txt{
width:280px; /* 设置元素的宽度为280px */
}
/* 以下是类名为'wrapcolor'的元素的样式规则 */
.wrapcolor{
height: 19px; /* 设置元素的高度为19px */
}
/* 以下是类名为'color'的 div 元素的样式规则 */
div.color{
float: left; /* 使元素向左浮动，常用于实现多栏布局，让后续元素围绕其进行排列 */
margin: 0; /* 设置元素的外边距为0，使其紧密排列 */
}
/* 以下是 id 为'colorPicker'的元素的样式规则 */
#colorPicker{
width: 17px; /* 设置元素的宽度为17px */
height: 17px; /* 设置元素的高度为17px */
border: 1px solid #CCC; /* 为元素添加1px的边框，边框颜色为#CCC */
display: inline-block; /* 将元素设置为行内块级元素，使其可以在一行内与其他行内元素或行内块元素一起排列，同时又能设置宽度、高度等块级元素的属性 */
border-radius: 3px; /* 设置元素的边框圆角半径为3px，使其边角呈现圆形效果 */
box-shadow: 2px 2px 5px #D3D6DA; /* 为元素添加阴影效果，水平和垂直方向偏移2px，模糊半径为5px，阴影颜色为#D3D6DA */
margin: 0; /* 设置元素的外边距为0，使其紧密排列 */
float: left; /* 使元素向左浮动，常用于实现多栏布局，让后续元素围绕其进行排列 */
}
/* 以下是类名为'alignment'的 div 元素以及 id 为'custom'的元素的样式规则，通过属性选择器 hack（\9）为IE浏览器单独设置左边距，用于适配不同浏览器下的布局差异 */
div.alignment,#custom{
margin-left: 23px;
margin-left: 28px\9; /* 在IE浏览器下，设置左边距为28px，正常浏览器下为23px */
}
/* 以下是 id 为'custom'下的 input 元素的样式规则 */
#custom input{
height: 15px; /* 设置元素的高度为15px */
min-height: 15px; /* 设置元素的最小高度为15px，确保在某些情况下元素高度不会小于此值 */
width:20px; /* 设置元素的宽度为20px */
}
/* 以下是 id 为'repeatType'的元素的样式规则 */
#repeatType{
width:100px; /* 设置元素的宽度为100px */
}
/* 以下是 id 为'imgManager'的元素的样式规则，用于图片管理相关的区域样式设置 */
.wrapper{ width: 424px;margin: 10px auto; zoom:1;position: relative}
.tabbody{height:225px;}
.tabbody .panel { position: absolute;width:100%; height:100%;background: #fff; display: none;}
.tabbody .focus { display: block;}
body{font-size: 12px;color: #888;overflow: hidden;}
input,label{vertical-align:middle}
.clear{clear: both;}
.pl{padding-left: 18px;padding-left: 23px\9;}
#imageList {width: 420px;height: 215px;margin-top: 10px;overflow: hidden;overflow-y: auto;}
#imageList div {float: left;width: 100px;height: 95px;margin: 5px 10px;}
#imageList img {cursor: pointer;border: 2px solid white;}
.bgarea{margin: 10px;padding: 5px;height: 84%;border: 1px solid #A8A297;}
.content div{margin: 10px 0 10px 5px;}
.content .iptradio{margin: 0px 5px 5px 0px;}
.txt{width:280px;}
.wrapcolor{height: 19px;}
div.color{float: left;margin: 0;}
#colorPicker{width: 17px;height: 17px;border: 1px solid #CCC;display: inline-block;border-radius: 3px;box-shadow: 2px 2px 5px #D3D6DA;margin: 0;float: left;}
div.alignment,#custom{margin-left: 23px;margin-left: 28px\9;}
#custom input{height: 15px;min-height: 15px;width:20px;}
#repeatType{width:100px;}
/* 图片管理样式 */
#imgManager {
width: 100%; /* 宽度占满父元素的宽度 */
height: 225px; /* 设置元素的高度为225px */
width: 100%;
height: 225px;
}
/* 以下是 id 为'imgManager'下的 id 为'imageList'的子元素的样式规则 */
#imgManager #imageList{
width: 100%; /* 宽度占满父元素的宽度 */
overflow-x: hidden; /* 隐藏水平方向的溢出内容 */
overflow-y: auto; /* 允许垂直方向出现滚动条以查看超出部分内容，常用于展示较多图片且希望在垂直方向可滚动查看的区域 */
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
/* 以下是 id 为'imgManager'下的 ul 元素的样式规则 */
#imgManager ul {
display: block; /* 将元素显示为块级元素，独占一行，常用于列表等元素的布局设置 */
list-style: none; /* 清除默认的列表样式标记（如圆点、数字等） */
margin: 0; /* 设置元素的外边距为0，使其紧密排列 */
padding: 0; /* 设置元素的内边距为0，去除默认的内边距 */
display: block;
list-style: none;
margin: 0;
padding: 0;
}
/* 以下是 id 为'imgManager'下的 li 元素的样式规则 */
#imgManager li {
float: left; /* 使元素向左浮动，常用于实现多栏布局，让后续元素围绕其进行排列 */
display: block; /* 将元素显示为块级元素，独占一行，常用于列表等元素的布局设置 */
list-style: none; /* 清除默认的列表样式标记（如圆点、数字等） */
padding: 0; /* 设置元素的内边距为0，去除默认的内边距 */
width: 113px; /* 设置元素的宽度为113px */
height: 113px; /* 设置元素的高度为113px */
margin: 9px 0 0 19px; /* 设置元素的外边距，上外边距为9px，右外边距为0，下外边距为0，左外边距为19px，用于控制元素之间的间隔距离 */
background-color: #eee; /* 设置元素的背景颜色为浅灰色（#eee） */
overflow: hidden; /* 超出元素尺寸范围的内容将被隐藏 */
cursor: pointer; /* 设置鼠标指针样式为手型，提示用户该列表项元素可点击交互 */
position: relative; /* 将元素的定位方式设置为相对定位，相对其原本在文档流中的位置进行定位调整，方便后续内部绝对定位元素基于此进行定位 */
float: left;
display: block;
list-style: none;
padding: 0;
width: 113px;
height: 113px;
margin: 9px 0 0 19px;
background-color: #eee;
overflow: hidden;
cursor: pointer;
position: relative;
}
/* 以下是 id 为'imgManager'下具有'clearFloat'类名的 li 元素的样式规则，用于清除浮动带来的影响，确保父元素能正确包裹浮动的子元素，保持布局的完整性 */
#imgManager li.clearFloat {
float: none; /* 取消元素的浮动属性 */
clear: both; /* 清除左右两侧的浮动元素影响，使该元素不受之前浮动元素的干扰，另起一行显示 */
display: block; /* 将元素显示为块级元素，独占一行 */
width:0; /* 设置元素的宽度为0 */
height:0; /* 设置元素的高度为0 */
margin: 0; /* 设置元素的外边距为0 */
padding: 0; /* 设置元素的内边距为0 */
float: none;
clear: both;
display: block;
width:0;
height:0;
margin: 0;
padding: 0;
}
/* 以下是 id 为'imgManager'下的 li 元素内的 img 元素的样式规则 */
#imgManager li img {
cursor: pointer; /* 设置鼠标指针样式为手型，提示用户该图片元素可点击交互 */
}
/* 以下是 id 为'imgManager'下的 li 元素内的类名为'icon'的元素的样式规则 */
#imgManager li.icon {
cursor: pointer; /* 设置鼠标指针样式为手型，提示用户该元素可点击交互 */
width: 113px; /* 设置元素的宽度为113px */
height: 113px; /* 设置元素的高度为113px */
position: absolute; /* 将元素设置为绝对定位，其位置将基于最近的已定位（非 static 定位）的祖先元素来确定，如果没有则相对于 li 元素定位 */
top: 0; /* 基于父元素（li 元素）顶部定位，垂直方向距离顶部0px */
left: 0; /* 基于父元素（li 元素）左侧定位，水平方向距离左侧0px */
z-index: 2; /* 设置元素的层叠顺序为2，使其在一定程度上可以覆盖其他层叠顺序较低的元素显示 */
border: 0; /* 设置元素的边框宽度为0，即无边框 */
background-repeat: no-repeat; /* 设置背景图片不重复平铺 */
}
/* 以下是 id 为'imgManager'下的 li 元素内的类名为'icon'的元素在鼠标悬停时的样式规则 */
#imgManager li.icon:hover {
width: 107px; /* 鼠标悬停时，设置元素的宽度为107px */
height: 107px; /* 鼠标悬停时，设置元素的高度为107px */
border: 3px solid #1094fa; /* 鼠标悬停时，为元素添加3px的边框，边框颜色为#1094fa */
}
/* 以下是 id 为'imgManager'下具有'selected'类名的 li 元素内的类名为'icon'的元素的样式规则 */
#imgManager li.selected.icon {
background-image: url(images/success.png); /* 设置元素的背景图片，用于显示特定的选中标识等视觉效果 */
background-position: 75px 75px; /* 设置背景图片在元素内的定位位置，水平和垂直方向均距离元素左上角75px */
}
/* 以下是 id 为'imgManager'下具有'selected'类名且鼠标悬停的 li 元素内的类名为'icon'的元素的样式规则 */
#imgManager li.selected.icon:hover {
width: 107px; /* 鼠标悬停时，设置元素的宽度为107px */
height: 107px; /* 鼠标悬停时，设置元素的高度为107px */
border: 3px solid #1094fa; /* 鼠标悬停时，为元素添加3px的边框，边框颜色为#1094fa */
background-position: 72px 72px; /* 设置背景图片在元素内的定位位置，水平和垂直方向均距离元素左上角72px，与未悬停时的背景位置有所变化，用于提供悬停交互的视觉效果变化 */
cursor: pointer;
}
#imgManager li .icon {
cursor: pointer;
width: 113px;
height: 113px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
border: 0;
background-repeat: no-repeat;
}
#imgManager li .icon:hover {
width: 107px;
height: 107px;
border: 3px solid #1094fa;
}
#imgManager li.selected .icon {
background-image: url(images/success.png);
background-position: 75px 75px;
}
#imgManager li.selected .icon:hover {
width: 107px;
height: 107px;
border: 3px solid #1094fa;
background-position: 72px 72px;
}

31
public2/ueditor/dialogs/background/background.html
Unescape View File

@ -1,83 +1,56 @@
<!DOCTYPE HTML>
<!-- 这是 HTML5 的文档类型声明，告知浏览器按照 HTML5 标准来解析页面内容 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- 设置页面的字符编码为 UTF-8，确保页面能够正确显示各种字符，包括中文等特殊字符 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="../internal.js"></script>
<!-- 引入一个相对路径为../internal.js 的 JavaScript 文件，该文件可能包含了页面中会用到的自定义函数、变量以及业务逻辑等代码，具体功能依赖其内部定义 -->
<link rel="stylesheet" type="text/css" href="background.css">
<!-- 引入名为 background.css 的本地 CSS 样式文件，用于设置页面中各元素的外观样式，如布局、颜色、字体等 -->
</head>
<body>
<div id="bg_container" class="wrapper">
<!-- 创建一个 id 为'bg_container'且类名为'wrapper'的 div 容器，可能作为整个页面内容的外层包裹容器，方便对内部元素进行整体的布局和样式控制，其样式规则应该在引入的 background.css 文件中定义 -->
<div id="tabHeads" class="tabhead">
<!-- 创建一个 id 为'tabHeads'且类名为'tabhead'的 div 容器，用于放置选项卡相关的元素，从类名推测可能是选项卡头部区域，其样式由 background.css 中相关规则控制 -->
<span class="focus" data-content-id="normal"><var id="lang_background_normal"></var></span>
<!-- 创建一个类名为'focus'的 span 元素，通过 data-content-id 属性设置了与'normal'相关联的值，内部嵌套一个带有特定 id 的 var 元素（var 元素内容可能通过 JavaScript 动态设置，此处未明确显示具体文本），该 span 元素可能代表"普通背景"这个选项卡，并且当前处于选中状态 -->
<span class="" data-content-id="imgManager"><var id="lang_background_local"></var></span>
<!-- 创建一个类名为''（可能没有特定类名样式修饰，具体依赖 CSS 文件）的 span 元素，通过 data-content-id 属性设置了与'imgManager'相关联的值，内部嵌套一个带有特定 id 的 var 元素，该 span 元素可能代表"图片管理背景"这个选项卡 -->
</div>
<div id="tabBodys" class="tabbody">
<!-- 创建一个 id 为'tabBodys'且类名为'tabbody'的 div 容器，应该是用于展示与选项卡对应的内容区域，与上面的'tabHeads'区域相对应，其样式规则在 background.css 中定义 -->
<div id="normal" class="panel focus">
<!-- 创建一个 id 为'normal'且类名为'panel'并具有'focus'类名（可能表示当前显示状态）的 div 容器，用于展示"普通背景"选项卡对应的内容，比如背景设置相关的各种选项 -->
<fieldset class="bgarea">
<!-- 创建一个类名为'bgarea'的 fieldset 元素，通常用于对表单相关元素进行分组，从类名推测其样式在 background.css 中定义，用于在视觉上对内部元素进行区分和布局 -->
<legend><var id="lang_background_set"></var></legend>
<!-- 创建一个 legend 元素，用于为 fieldset 元素提供标题说明，内部嵌套一个带有特定 id 的 var 元素，其显示文本可能通过 JavaScript 动态设置，此处标题大概是与"背景设置"相关 -->
<div class="content">
<!-- 创建一个类名为'content'的 div 容器，用于进一步包裹内部具体的设置选项元素，方便进行布局和样式控制，样式在 background.css 中定义 -->
<div>
<!-- 内部的一个 div 容器，可能用于对一组相关的单选按钮等元素进行包裹 -->
<label><input id="nocolorRadio" class="iptradio" type="radio" name="t" value="none" checked="checked"><var id="lang_background_none"></var></label>
<!-- 创建一个 label 元素，内部包含一个 id 为'nocolorRadio'、类名为'iptradio'的单选按钮（input 元素，类型为 radio），设置其 name 属性为't'，value 为'none'，并且初始状态为选中（checked="checked"），单选按钮后面嵌套一个带有特定 id 的 var 元素，用于显示对应的文本（如"无背景颜色"之类，具体由 JavaScript 动态设置文本内容），整体用于提供是否设置无背景颜色的选项 -->
<label><input id="coloredRadio" class="iptradio" type="radio" name="t" value="color"><var id="lang_background_colored"></var></label>
<!-- 类似上面的结构，创建另一个单选按钮选项，id 为'coloredRadio'，用于选择是否设置有颜色的背景，对应的文本通过 var 元素（id 为'lang_background_colored'）显示，具体文本由 JavaScript 动态设置 -->
</div>
<div class="wrapcolor pl">
<!-- 创建一个类名为'wrapcolor'且具有'pl'类名的 div 容器，其样式在 background.css 中定义，可能用于对与颜色相关的元素进行包裹和布局，通过类名推测可能涉及一些内边距等样式设置 -->
<div class="color">
<!-- 创建一个类名为'color'的 div 容器，可能用于对颜色相关的文本提示等进行包裹 -->
<var id="lang_background_color"></var>:
<!-- 嵌套一个带有特定 id 的 var 元素，用于显示与背景颜色相关的文本提示，如"背景颜色"字样，具体文本由 JavaScript 动态设置 -->
</div>
<div id="colorPicker"></div>
<!-- 创建一个 id 为'colorPicker'的 div 容器，可能用于展示颜色选择相关的交互元素（具体外观和功能需结合 CSS 和 JavaScript 代码来看），比如显示一个颜色选取框之类的组件 -->
<div class="clear"></div>
<!-- 创建一个类名为'clear'的 div 容器，用于清除浮动带来的影响，确保父元素能正确包裹浮动的子元素，保持布局的完整性，其样式在 background.css 中定义 -->
</div>
<div class="wrapcolor pl">
<label><var id="lang_background_netimg"></var>:</label><input class="txt" type="text" id="url">
<!-- 创建一个类名为'wrapcolor'且具有'pl'类名的 div 容器，内部包含一个 label 元素用于显示文本提示（通过 var 元素 id 为'lang_background_netimg'，具体文本由 JavaScript 动态设置，大概是与网络图片相关提示），后面紧跟一个 id 为'url'、类名为'txt'的文本输入框（input 元素，类型为 text），用于输入网络图片的地址等信息 -->
</div>
<div id="alignment" class="alignment">
<var id="lang_background_align"></var>:<select id="repeatType">
<!-- 创建一个 id 为'alignment'且类名为'alignment'的 div 容器，内部包含一个 var 元素用于显示文本提示（通过 var 元素 id 为'lang_background_align'，具体文本由 JavaScript 动态设置，大概是与背景对齐或重复方式相关提示），后面紧跟一个 id 为'repeatType'的下拉选择框（select 元素），用于选择背景的重复类型等设置 -->
<option value="center"></option>
<option value="repeat-x"></option>
<option value="repeat-y"></option>
<option value="repeat"></option>
<option value="self"></option>
<!-- 下拉选择框中的各个选项，每个选项通过 value 属性设置对应的值，具体含义和功能与背景的重复、对齐等设置相关，当用户选择不同选项时会有相应的背景显示效果变化 -->
</select>
</div>
<div id="custom">
<div id="custom" >
<var id="lang_background_position"></var>:x:<input type="text" size="1" id="x" maxlength="4" value="0">px&nbsp;&nbsp;y:<input type="text" size="1" id="y" maxlength="4" value="0">px
<!-- 创建一个 id 为'custom'的 div 容器，内部包含一个 var 元素用于显示文本提示（通过 var 元素 id 为'lang_background_position'，具体文本由 JavaScript 动态设置，大概是与背景位置相关提示），后面跟着两个文本输入框（input 元素，类型为 text），分别用于输入背景在 x 和 y 方向上的位置坐标（单位为 px），并设置了输入框的大小、最大长度以及初始值等属性 -->
</div>
</div>
</fieldset>
</div>
<div id="imgManager" class="panel">
<!-- 创建一个 id 为'imgManager'且类名为'panel'的 div 容器，用于展示"图片管理背景"选项卡对应的内容，目前内部只有一个 id 为'imageList'的 div 容器，具体功能和展示内容需结合相关的 CSS 和 JavaScript 代码来看 -->
<div id="imageList" style=""></div>
</div>
</div>
</div>
<script type="text/javascript" src="background.js"></script>
<!-- 引入一个相对路径为 background.js 的 JavaScript 文件，该文件应该包含了页面中与背景设置相关的交互逻辑，例如选项卡切换功能、各种设置选项的取值和应用背景设置等具体的 JavaScript 代码 -->
</body>
</html>

42
public2/ueditor/dialogs/charts/chart.config.js
Unescape View File

@ -1,9 +1,9 @@
/*
* 图表配置文件
* 此文件定义了多种不同类型图表的配置信息，可能用于图表绘制库（如 Highcharts、ECharts 等，具体依赖使用场景）来创建具有特定样式和交互功能的图表。
*/
* */
// 定义一个名为 typeConfig 的数组，用于存储不同类型图表的配置对象。每个对象对应一种图表类型的相关配置设置。
//不同类型的配置
var typeConfig = [
{
chart: {
@ -15,13 +15,9 @@ var typeConfig = [
enabled: false
},
enableMouseTracking: true
// 以下是对内部配置项的解释：
// dataLabels.enabled: 设置是否显示数据标签（例如在折线上每个数据点对应的数值标签），这里设置为 false，表示不显示。
// enableMouseTracking: 设置是否启用鼠标跟踪功能，当设置为 true 时，鼠标悬停在图表元素（如折线的线段、数据点等）上时可能会触发相应的交互效果（如显示提示信息等）。
}
}
},
{
}, {
chart: {
type: 'line'
},
@ -31,31 +27,21 @@ var typeConfig = [
enabled: true
},
enableMouseTracking: false
// 对于这个配置对象：
// dataLabels.enabled: 设置为 true，表示显示数据标签，会在折线上相应的数据点位置显示对应的数值等信息。
// enableMouseTracking: 设置为 false，即禁用鼠标跟踪功能，鼠标悬停在图表元素上不会触发额外的交互效果。
}
}
},
{
}, {
chart: {
type: 'area'
}
// 这个配置对象仅设置了图表类型为 'area'（面积图），可能使用默认的其他配置项（具体取决于使用的图表库的默认配置规则）来绘制面积图，后续如果需要可以继续添加更多如颜色、样式、交互等相关配置在此对象内。
},
{
}, {
chart: {
type: 'bar'
}
// 配置图表类型为 'bar'（柱状图），同样可能依赖图表库默认配置来展示柱状图，如需个性化设置（如柱子颜色、宽度、间距等），可在此对象内添加对应配置项。
},
{
}, {
chart: {
type: 'column'
}
// 设置图表类型为 'column'（也是柱状图的一种常见表示形式，与 'bar' 在某些图表库中有细微区别，比如方向等，具体看库的实现），可根据需求进一步完善其详细配置内容。
},
{
}, {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
@ -74,18 +60,6 @@ var typeConfig = [
}
}
}
// 对于此配置对象的详细解释：
// chart 部分的配置：
// plotBackgroundColor: 设置图表绘图区域的背景颜色，这里设置为 null，可能表示使用默认背景颜色（具体由图表库决定）。
// plotBorderWidth: 设置绘图区域边框宽度，null 值通常也意味着使用默认边框宽度设定（取决于图表库）。
// plotShadow: 设置绘图区域是否显示阴影效果，false 表示不显示阴影。
// plotOptions.pie 部分的配置（针对饼图的相关设置）：
// allowPointSelect: 设置是否允许选中饼图中的单个数据点（扇区），true 表示允许，用户可以通过交互（如点击）来选中某个扇区。
// cursor: 设置鼠标指针在饼图区域上的样式，'pointer' 通常表示鼠标指针变为手型，提示用户此处可进行交互操作。
// dataLabels.enabled: 设置为 true，表示显示数据标签，即在饼图的每个扇区上显示相应的文字说明。
// dataLabels.color: 设置数据标签的文字颜色为黑色（'#000000'）。
// dataLabels.connectorColor: 设置数据标签与扇区之间连接线的颜色为黑色（'#000000'）。
// dataLabels.formatter: 这是一个函数，用于自定义数据标签的显示内容格式。在这里，它返回的格式是将扇区对应的名称加粗显示，后面跟着该扇区占比的百分比数值（保留两位小数），例如 "<b>类别A</b>: 25.00 %"。
}
}
];

203
public2/ueditor/dialogs/charts/charts.css
Unescape View File

@ -1,192 +1,165 @@
/* 对 html 和 body 元素设置通用样式 */
html, body {
width: 100%; /* 设置元素宽度占满整个视口宽度 */
height: 100%; /* 设置元素高度占满整个视口高度 */
margin: 0; /* 清除元素默认的外边距，使页面从边缘开始布局 */
padding: 0; /* 清除元素默认的内边距 */
overflow-x: hidden; /* 隐藏水平方向上的滚动条，防止内容超出可视区域时出现水平滚动条 */
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* 定义类名为'main'的元素的样式 */
.main {
width: 100%; /* 宽度占满父元素宽度 */
overflow: hidden; /* 超出元素尺寸范围的内容将被隐藏，防止出现滚动条等影响布局 */
width: 100%;
overflow: hidden;
}
/* 定义类名为'table-view'的元素的样式 */
.table-view {
height: 100%; /* 高度占满父元素高度（结合父元素的高度设置情况而定） */
float: left; /* 使元素向左浮动，常用于实现多栏布局，让后续元素围绕其进行排列 */
margin: 20px; /* 设置元素的外边距为上下左右各 20px，使其与周围元素间隔一定距离 */
width: 40%; /* 设置元素宽度占父元素宽度的 40%，用于划分页面布局中表格部分的宽度占比 */
height: 100%;
float: left;
margin: 20px;
width: 40%;
}
/* 定义类名为'table-view'下的类名为'table-container'的子元素的样式 */
.table-view.table-container {
width: 100%; /* 宽度占满父元素（.table-view）的宽度 */
margin-bottom: 50px; /* 设置元素的下外边距为 50px，使其与下方元素间隔一定距离 */
overflow: scroll; /* 当内容超出元素尺寸范围时，显示滚动条以便查看全部内容 */
.table-view .table-container {
width: 100%;
margin-bottom: 50px;
overflow: scroll;
}
/* 定义类名为'table-view'下的 th 元素（通常用于表格表头）的样式 */
.table-view th {
padding: 5px 10px; /* 设置元素的内边距，上下内边距为 5px，左右内边距为 10px，用于在表格表头单元格内提供一定的空白空间 */
background-color: #F7F7F7; /* 设置元素的背景颜色为浅灰色（#F7F7F7），用于区分表头与表体部分 */
padding: 5px 10px;
background-color: #F7F7F7;
}
/* 定义类名为'table-view'下的 td 元素（通常用于表格表体单元格）的样式 */
.table-view td {
width: 50px; /* 设置元素的宽度为 50px，统一表格单元格的宽度 */
text-align: center; /* 设置文本在单元格内居中对齐 */
padding: 0; /* 清除元素默认的内边距，使内容紧密贴合单元格边缘 */
width: 50px;
text-align: center;
padding:0;
}
/* 定义类名为'table-container'下的 input 元素的样式 */
.table-container input {
width: 40px; /* 设置输入框元素的宽度为 40px */
padding: 5px; /* 设置输入框元素的内边距为 5px，使输入内容与边框有一定间隔 */
border: none; /* 清除输入框的边框，使其外观更简洁（可能通过其他方式体现选中或聚焦状态等） */
outline: none; /* 清除输入框获取焦点时的默认外边框样式，同样是为了外观简洁或自定义聚焦效果 */
width: 40px;
padding: 5px;
border: none;
outline: none;
}
/* 定义类名为'table-view'下的 caption 元素（通常用于表格标题）的样式 */
.table-view caption {
font-size: 18px; /* 设置元素的字体大小为 18px，突出显示表格标题 */
text-align: left; /* 设置文本在标题元素内左对齐 */
font-size: 18px;
text-align: left;
}
/* 定义类名为'charts-view'的元素的样式 */
.charts-view {
/* margin-left: 49%!important; */ /* 此处被注释掉了，原作用可能是通过强制设置左外边距为父元素宽度的 49%来进行布局定位，但当前未生效，实际以下面的'margin-left'属性为准 */
width: 50%; /* 设置元素宽度占父元素宽度的 50%，用于划分页面布局中图表部分的宽度占比 */
margin-left: 49%; /* 设置元素的左外边距为父元素宽度的 49%，将图表部分定位在页面右侧，与左侧的表格部分区分开来 */
height: 400px; /* 设置元素的高度为 400px，确定图表区域的高度大小 */
/*margin-left: 49%!important;*/
width: 50%;
margin-left: 49%;
height: 400px;
}
/* 定义类名为'charts-container'的元素的样式 */
.charts-container {
border-left: 1px solid #c3c3c3; /* 为元素添加左边框，边框宽度为 1px，颜色为灰色（#c3c3c3），可能用于区分图表区域与其他部分 */
border-left: 1px solid #c3c3c3;
}
/* 定义类名为'charts-format'下的 fieldset 元素的样式 */
.charts-format fieldset {
padding-left: 20px; /* 设置元素的左内边距为 20px，用于在内部提供一定的空白空间 */
margin-bottom: 50px; /* 设置元素的下外边距为 50px，使其与下方元素间隔一定距离 */
padding-left: 20px;
margin-bottom: 50px;
}
/* 定义类名为'charts-format'下的 legend 元素的样式 */
.charts-format legend {
padding-left: 10px; /* 设置元素的左内边距为 10px，在元素内部左侧提供一定空白空间 */
padding-right: 10px; /* 设置元素的右内边距为 10px，在元素内部右侧提供一定空白空间 */
padding-left: 10px;
padding-right: 10px;
}
/* 定义类名为'format-item-container'的元素的样式 */
.format-item-container {
padding: 20px; /* 设置元素的内边距为 20px，在元素内部四周提供一定的空白空间 */
padding: 20px;
}
/* 定义类名为'format-item-container'下的 label 元素的样式 */
.format-item-container label {
display: block; /* 将元素显示为块级元素，独占一行，常用于表单标签等元素的布局，方便与对应的输入框等元素进行垂直排列 */
margin: 10px 0; /* 设置元素的外边距，上下外边距为 10px，左右外边距为 0，用于控制元素在垂直方向的间隔位置 */
display: block;
margin: 10px 0;
}
/* 定义类名为'charts-format'下的类名为'data-item'的元素的样式 */
.charts-format.data-item {
border: 1px solid black; /* 为元素添加边框，边框宽度为 1px，颜色为黑色，用于突出显示该元素 */
outline: none; /* 清除元素获取焦点时的默认外边框样式，可能是为了外观简洁或自定义聚焦效果 */
padding: 2px 3px; /* 设置元素的内边距，上下内边距为 2px，左右内边距为 3px，用于在元素内部提供一定的空白空间 */
.charts-format .data-item {
border: 1px solid black;
outline: none;
padding: 2px 3px;
}
/* 以下是图表类型相关的样式定义 */
/* 图表类型 */
/* 定义类名为'charts-type'的元素的样式 */
.charts-type {
margin-top: 50px; /* 设置元素的上外边距为 50px，使其与上方元素间隔一定距离 */
height: 300px; /* 设置元素的高度为 300px，确定图表类型相关区域的高度大小 */
margin-top: 50px;
height: 300px;
}
/* 定义类名为'scroll-view'的元素的样式 */
.scroll-view {
border: 1px solid #c3c3c3; /* 为元素添加边框，边框宽度为 1px，颜色为灰色（#c3c3c3） */
border-left: none; /* 清除元素的左边框，使其左边框不显示 */
border-right: none; /* 清除元素的右边框，使其右边框不显示 */
overflow: hidden; /* 超出元素尺寸范围的内容将被隐藏，防止出现滚动条等影响布局 */
border: 1px solid #c3c3c3;
border-left: none;
border-right: none;
overflow: hidden;
}
/* 定义类名为'scroll-container'的元素的样式 */
.scroll-container {
margin: 20px; /* 设置元素的外边距为上下左右各 20px，使其与周围元素间隔一定距离 */
width: 100%; /* 宽度占满父元素宽度 */
overflow: hidden; /* 超出元素尺寸范围的内容将被隐藏，防止出现滚动条等影响布局 */
margin: 20px;
width: 100%;
overflow: hidden;
}
/* 定义类名为'scroll-bed'的元素的样式 */
.scroll-bed {
width: 10000px; /* 设置元素的宽度为一个较大值，可能用于实现滚动效果时容纳较多的内容（比如多个图表类型的展示元素等） */
_margin-top: 20px; /* 此处是一个私有属性（前面加下划线，可能是针对特定浏览器的 hack，如 IE 浏览器），设置元素的上外边距为 20px */
-webkit-transition: margin-left.5s ease; /* 针对webkit 内核浏览器（如 Chrome、Safari 等）设置当'margin-left'属性改变时的过渡效果，过渡时间为 0.5 秒，过渡动画为缓动效果（ease） */
-moz-transition: margin-left.5s ease; /* 针对 Mozilla Firefox 浏览器设置当'margin-left'属性改变时的过渡效果，过渡时间为 0.5 秒，过渡动画为缓动效果（ease） */
transition: margin-left.5s ease; /* 针对其他现代浏览器设置当'margin-left'属性改变时的过渡效果，过渡时间为 0.5 秒，过渡动画为缓动效果（ease） */
width: 10000px;
_margin-top: 20px;
-webkit-transition: margin-left .5s ease;
-moz-transition: margin-left .5s ease;
transition: margin-left .5s ease;
}
/* 定义类名为'view-box'的元素的样式 */
.view-box {
display: inline-block; /* 将元素设置为行内块级元素，使其可以在一行内与其他行内元素或行内块元素一起排列，同时又能设置宽度、高度等块级元素的属性 */
*display: inline; /* 此处是针对低版本 IE 浏览器（IE7 及以下）的 hack，使其以行内元素显示，确保兼容性 */
*zoom: 1; /* 同样是针对低版本 IE 浏览器的 hack，触发 hasLayout 属性，解决一些布局相关的兼容性问题 */
margin-right: 20px; /* 设置元素的右外边距为 20px，使其与右侧相邻元素间隔一定距离 */
border: 2px solid white; /* 为元素添加边框，边框宽度为 2px，颜色为白色，用于视觉上区分不同的视图框元素 */
line-height: 0; /* 设置元素的行高为 0，可能用于去除元素内部默认的垂直间距等情况，具体看元素内部内容结构 */
overflow: hidden; /* 超出元素尺寸范围的内容将被隐藏，防止出现滚动条等影响布局 */
cursor: pointer; /* 设置鼠标指针样式为手型，提示用户该元素可点击交互 */
display: inline-block;
*display: inline;
*zoom: 1;
margin-right: 20px;
border: 2px solid white;
line-height: 0;
overflow: hidden;
cursor: pointer;
}
/* 定义类名为'view-box'下的 img 元素的样式 */
.view-box img {
border: 1px solid #cecece; /* 为图片元素添加边框，边框宽度为 1px，颜色为浅灰色（#cecece），用于视觉上对图片进行修饰 */
border: 1px solid #cecece;
}
/* 定义类名为'view-box'下具有'selected'类名的元素的样式 */
.view-box.selected {
border-color: #7274A7; /* 当元素具有'selected'类名时（可能表示被选中状态），改变其边框颜色为特定颜色（#7274A7），用于突出显示被选中的视图框元素 */
border-color: #7274A7;
}
/* 定义类名为'button-container'的元素的样式 */
.button-container {
margin-bottom: 20px; /* 设置元素的下外边距为 20px，使其与下方元素间隔一定距离 */
text-align: center; /* 设置元素内部的子元素在水平方向上居中对齐，常用于按钮组等元素的布局，使其在容器内居中显示 */
margin-bottom: 20px;
text-align: center;
}
/* 定义类名为'button-container'下的 a 元素（通常用于链接或按钮样式）的样式 */
.button-container a {
display: inline-block; /* 将元素设置为行内块级元素，使其可以在一行内与其他行内元素或行内块元素一起排列，同时又能设置宽度、高度等块级元素的属性 */
width: 100px; /* 设置元素的宽度为 100px，确定按钮或链接的宽度大小 */
height: 25px; /* 设置元素的高度为 25px，确定按钮或链接的高度大小 */
line-height: 25px; /* 设置元素的行高与元素高度相等，使文本在垂直方向上居中对齐 */
border: 1px solid #c2ccd1; /* 为元素添加边框，边框宽度为 1px，颜色为浅灰色（#c2ccd1），用于视觉上修饰按钮或链接元素 */
margin-right: 30px; /* 设置元素的右外边距为 30px，用于控制按钮或链接之间的间隔距离 */
text-decoration: none; /* 清除元素默认的文本下划线装饰（对于链接元素而言），使其外观更简洁 */
color: black; /* 设置元素的文本颜色为黑色 */
-webkit-border-radius: 2px; /* 针对 webkit 内核浏览器设置元素的边框圆角半径为 2px，使其边角呈现圆形效果 */
-moz-border-radius: 2px; /* 针对 Mozilla Firefox 浏览器设置元素的边框圆角半径为 2px，使其边角呈现圆形效果 */
border-radius: 2px; /* 针对其他现代浏览器设置元素的边框圆角半径为 2px，使其边角呈现圆形效果 */
}
/* 定义类名为'button-container'下的 a 元素在鼠标悬停时的样式 */
display: inline-block;
width: 100px;
height: 25px;
line-height: 25px;
border: 1px solid #c2ccd1;
margin-right: 30px;
text-decoration: none;
color: black;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.button-container a:HOVER {
background: #fcfcfc; /* 当鼠标悬停在按钮或链接元素上时，改变其背景颜色为浅白色（#fcfcfc），用于提供悬停交互的视觉反馈 */
background: #fcfcfc;
}
/* 定义类名为'button-container'下的 a 元素在激活（如鼠标按下）时的样式 */
.button-container a:ACTIVE {
border-top-color: #c2ccd1; /* 当按钮或链接元素处于激活状态时，改变其顶部边框的颜色为浅灰色（#c2ccd1），用于提供点击交互的视觉反馈 */
box-shadow: inset 0 5px 4px -4px rgba(49, 49, 64, 0.1); /* 为元素添加内阴影效果，水平和垂直方向偏移量、模糊半径等参数设置了阴影的样式，用于增强激活状态的视觉效果 */
border-top-color: #c2ccd1;
box-shadow:inset 0 5px 4px -4px rgba(49, 49, 64, 0.1);
}
/* 定义类名为'edui-charts-not-data'的元素的样式 */
.edui-charts-not-data {
height: 100px; /* 设置元素的高度为 100px */
line-height: 100px; /* 设置元素的行高与元素高度相等，使文本在垂直方向上居中对齐 */
text-align: center; /* 设置元素内部的文本在水平方向上居中对齐 */
height: 100px;
line-height: 100px;
text-align: center;
}

208
public2/ueditor/dialogs/charts/charts.html
Unescape View File

@ -1,137 +1,89 @@
<!DOCTYPE html>
<!-- 这是 HTML5 的文档类型声明，告知浏览器按照 HTML5 标准来解析页面内容 -->
<html>
<head>
<title>chart</title>
<!-- 设置页面的标题为 'chart'，该标题会显示在浏览器的标题栏等相关位置 -->
<meta chartset="utf-8">
<!-- 这里应该是写错了，正确的是 charset 属性，用于指定页面的字符编码为 UTF-8，确保页面能够正确显示各种字符，比如中文等特殊字符 -->
<link rel="stylesheet" type="text/css" href="charts.css">
<!-- 引入名为 'charts.css' 的外部 CSS 文件，用于设置页面中各元素的样式，如布局、颜色、字体等外观表现 -->
<script type="text/javascript" src="../internal.js"></script>
<!-- 引入相对路径为 '../internal.js' 的 JavaScript 文件，该文件可能包含了页面中会用到的自定义函数、变量以及业务逻辑等代码，具体功能依赖其内部定义 -->
</head>
<body>
<div class="main">
<!-- 创建一个类名为'main'的 div 容器，从类名推测可能作为整个页面主体内容的外层包裹容器，方便对内部元素进行整体的布局和样式控制，其样式规则应该在引入的 'charts.css' 文件中定义 -->
<div class="table-view">
<!-- 创建一个类名为 'table-view' 的 div 容器，可能用于展示与表格相关的数据或操作部分，其样式同样由 'charts.css' 中相关规则控制 -->
<h3><var id="lang_data_source"></var></h3>
<!-- 创建一个 h3 标题元素，内部嵌套一个带有特定 id 的 var 元素，其显示文本可能通过 JavaScript 动态设置，从 id 推测大概是用于显示与数据源相关的标题 -->
<div id="tableContainer" class="table-container"></div>
<!-- 创建一个 id 为 'tableContainer' 且类名为 'table-container' 的 div 容器，可能用于放置具体的表格内容，例如通过 JavaScript 动态生成表格结构等，其样式在 'charts.css' 中定义，并且可能具备滚动等相关功能（看对应 CSS 的 overflow 等属性设置） -->
<h3><var id="lang_chart_format"></var></h3>
<!-- 创建另一个 h3 标题元素，内部嵌套一个带有特定 id 的 var 元素，推测是用于显示与图表格式相关的标题，文本由 JavaScript 动态设置 -->
<form name="data-form">
<!-- 创建一个名为 'data-form' 的表单元素，用于收集用户输入的与图表相关的各种配置信息，比如标题、对齐方式等 -->
<div class="charts-format">
<!-- 创建一个类名为 'charts-format' 的 div 容器，用于对图表格式相关的一组设置选项进行包裹，方便进行布局和样式控制，样式在 'charts.css' 中定义 -->
<fieldset>
<!-- 创建一个 fieldset 元素，通常用于对表单内相关的一组元素进行分组，这里可能是将图表对齐方式相关的选项归为一组，从类名推测其样式在 'charts.css' 中定义 -->
<legend><var id="lang_data_align"></var></legend>
<!-- 创建一个 legend 元素，用于为 fieldset 元素提供标题说明，内部嵌套一个带有特定 id 的 var 元素，显示文本大概是与数据对齐相关，具体文本由 JavaScript 动态设置 -->
<div class="format-item-container">
<!-- 创建一个类名为 'format-item-container' 的 div 容器，用于进一步包裹每个具体的格式设置选项元素，提供内边距等样式设置，样式在 'charts.css' 中定义 -->
<label>
<!-- 创建一个 label 元素，用于关联表单中的输入元素（如单选按钮、文本输入框等）和对应的文本提示 -->
<input type="radio" class="format-ctrl not-pie-item" name="charts-format" value="1" checked="checked">
<!-- 创建一个单选按钮（input 元素，类型为 radio），设置了类名用于样式控制和后续 JavaScript 操作识别，name 属性为 'charts-format' 用于分组，value 为 '1' 表示该选项的值，并且初始状态为选中（checked="checked"），该单选按钮可能用于选择某种图表格式的对齐方式 -->
<var id="lang_chart_align_same"></var>
<!-- 嵌套一个带有特定 id 的 var 元素，用于显示该单选按钮对应的文本提示，如 "图表对齐方式相同"之类的内容，具体文本由 JavaScript 动态设置 -->
</label>
<label>
<input type="radio" class="format-ctrl not-pie-item" name="charts-format" value="-1">
<var id="lang_chart_align_reverse"></var>
<!-- 类似上面的结构，创建另一个单选按钮选项，用于选择另一种图表格式的对齐方式，对应的文本提示通过 var 元素（id 为 'lang_chart_align_reverse'）显示，具体文本由 JavaScript 动态设置 -->
</label>
<br>
<!-- 换行标签，用于在页面上使后面的元素另起一行显示 -->
</div>
</fieldset>
<fieldset>
<!-- 另一个 fieldset 元素，用于对图表标题相关的一组设置选项进行分组 -->
<legend><var id="lang_chart_title"></var></legend>
<!-- legend 元素用于提供标题说明，这里大概是与图表整体标题相关，文本由 JavaScript 动态设置 -->
<div class="format-item-container">
<label>
<var id="lang_chart_main_title"></var><input type="text" name="title" class="data-item">
<!-- 这个 label 元素内，先通过 var 元素显示文本提示（大概是与图表主标题相关，文本由 JavaScript 动态设置），后面紧跟一个文本输入框（input 元素，类型为 text），设置了 name 属性为 'title'，用于接收用户输入的图表主标题内容，并且设置了类名 'data-item' 用于样式控制 -->
</label>
<label>
<var id="lang_chart_sub_title"></var><input type="text" name="sub-title" class="data-item not-pie-item">
<!-- 类似结构，用于输入图表副标题内容，设置了不同的 name 属性和类名（可能通过类名进行特定样式或针对非饼图情况的区分等操作） -->
</label>
<label>
<var id="lang_chart_x_title"></var><input type="text" name="x-title" class="data-item not-pie-item">
<!-- 用于输入图表 x 轴标题内容，同样设置了相应的类名和 name 属性 -->
</label>
<label>
<var id="lang_chart_y_title"></var><input type="text" name="y-title" class="data-item not-pie-item">
<!-- 用于输入图表 y 轴标题内容，具备相应的属性设置 -->
</label>
</div>
</fieldset>
<fieldset>
<!-- 用于对图表提示信息相关设置选项进行分组的 fieldset 元素 -->
<legend><var id="lang_chart_tip"></var></legend>
<!-- legend 元素提供标题说明，大概是与图表提示相关，文本由 JavaScript 动态设置 -->
<div class="format-item-container">
<label>
<var id="lang_cahrt_tip_prefix"></var>
<input type="text" id="tipInput" name="tip" class="data-item" disabled="disabled">
<!-- 这个 label 元素内，先通过 var 元素显示文本提示（大概是与图表提示信息前缀相关，文本由 JavaScript 动态设置），后面紧跟一个文本输入框（input 元素，类型为 text），设置了 id 为 'tipInput'、name 为 'tip'，用于输入相关内容，但当前设置为禁用状态（disabled="disabled"），可能根据一定条件再启用 -->
</label>
<p><var id="lang_cahrt_tip_description"></var></p>
<!-- 创建一个 p 段落元素，内部嵌套一个带有特定 id 的 var 元素，用于显示关于图表提示信息的描述内容，文本由 JavaScript 动态设置 -->
<head>
<title>chart</title>
<meta chartset="utf-8">
<link rel="stylesheet" type="text/css" href="charts.css">
<script type="text/javascript" src="../internal.js"></script>
</head>
<body>
<div class="main">
<div class="table-view">
<h3><var id="lang_data_source"></var></h3>
<div id="tableContainer" class="table-container"></div>
<h3><var id="lang_chart_format"></var></h3>
<form name="data-form">
<div class="charts-format">
<fieldset>
<legend><var id="lang_data_align"></var></legend>
<div class="format-item-container">
<label>
<input type="radio" class="format-ctrl not-pie-item" name="charts-format" value="1" checked="checked">
<var id="lang_chart_align_same"></var>
</label>
<label>
<input type="radio" class="format-ctrl not-pie-item" name="charts-format" value="-1">
<var id="lang_chart_align_reverse"></var>
</label>
<br>
</div>
</fieldset>
<fieldset>
<legend><var id="lang_chart_title"></var></legend>
<div class="format-item-container">
<label>
<var id="lang_chart_main_title"></var><input type="text" name="title" class="data-item">
</label>
<label>
<var id="lang_chart_sub_title"></var><input type="text" name="sub-title" class="data-item not-pie-item">
</label>
<label>
<var id="lang_chart_x_title"></var><input type="text" name="x-title" class="data-item not-pie-item">
</label>
<label>
<var id="lang_chart_y_title"></var><input type="text" name="y-title" class="data-item not-pie-item">
</label>
</div>
</fieldset>
<fieldset>
<legend><var id="lang_chart_tip"></var></legend>
<div class="format-item-container">
<label>
<var id="lang_cahrt_tip_prefix"></var>
<input type="text" id="tipInput" name="tip" class="data-item" disabled="disabled">
</label>
<p><var id="lang_cahrt_tip_description"></var></p>
</div>
</fieldset>
<fieldset>
<legend><var id="lang_chart_data_unit"></var></legend>
<div class="format-item-container">
<label><var id="lang_chart_data_unit_title"></var><input type="text" name="unit" class="data-item"></label>
<p><var id="lang_chart_data_unit_description"></var></p>
</div>
</fieldset>
</div>
</form>
</div>
<div class="charts-view">
<div id="chartsContainer" class="charts-container"></div>
<div id="chartsType" class="charts-type">
<h3><var id="lang_chart_type"></var></h3>
<div class="scroll-view">
<div class="scroll-container">
<div id="scrollBed" class="scroll-bed"></div>
</div>
</fieldset>
<fieldset>
<!-- 用于对图表数据单位相关设置选项进行分组的 fieldset 元素 -->
<legend><var id="lang_chart_data_unit"></var></legend>
<!-- legend 元素提供标题说明，大概是与图表数据单位相关，文本由 JavaScript 动态设置 -->
<div class="format-item-container">
<label><var id="lang_chart_data_unit_title"></var><input type="text" name="unit" class="data-item"></label>
<!-- 这个 label 元素内，先通过 var 元素显示文本提示（大概是与图表数据单位标题相关，文本由 JavaScript 动态设置），后面紧跟一个文本输入框（input 元素，类型为 text），设置了 name 为 'unit'，用于输入图表数据的单位内容，具备类名 'data-item' 用于样式控制 -->
<p><var id="lang_chart_data_unit_description"></var></p>
<!-- 创建一个 p 段落元素，用于显示关于图表数据单位的描述内容，文本由 JavaScript 动态设置 -->
<div id="buttonContainer" class="button-container">
<a href="#" data-title="prev"><var id="lang_prev_btn"></var></a>
<a href="#" data-title="next"><var id="lang_next_btn"></var></a>
</div>
</fieldset>
</div>
</form>
</div>
<div class="charts-view">
<!-- 创建一个类名为 'charts-view' 的 div 容器，用于展示与图表相关的可视化部分以及图表类型选择等操作区域，样式在 'charts.css' 中定义 -->
<div id="chartsContainer" class="charts-container"></div>
<!-- 创建一个 id 为 'chartsContainer' 且类名为 'charts-container' 的 div 容器，可能用于放置实际生成的图表，其样式可能涉及边框等外观设置（看 'charts.css' 中对应规则） -->
<div id="chartsType" class="charts-type">
<!-- 创建一个 id 为 'chartsType' 且类名为 'charts-type' 的 div 容器，用于展示图表类型相关的内容，比如提供不同图表类型的选择等，样式在 'charts.css' 中定义 -->
<h3><var id="lang_chart_type"></var></h3>
<!-- 创建一个 h3 标题元素，用于显示与图表类型相关的标题，文本由 JavaScript 动态设置 -->
<div class="scroll-view">
<!-- 创建一个类名为'scroll-view' 的 div 容器，从类名推测可能具备滚动相关功能，用于展示可以滚动查看的图表类型相关元素，样式在 'charts.css' 中定义 -->
<div class="scroll-container">
<!-- 创建一个类名为'scroll-container' 的 div 容器，可能作为滚动内容的包裹容器，设置其内部的外边距等样式属性（看 'charts.css' 中对应规则） -->
<div id="scrollBed" class="scroll-bed"></div>
<!-- 创建一个 id 为'scrollBed' 且类名为'scroll-bed' 的 div 容器，可能用于放置具体的图表类型展示元素（比如多个图表类型的缩略图等），其宽度等属性设置可能与滚动效果相关（看 'charts.css' 中对应规则） -->
</div>
<div id="buttonContainer" class="button-container">
<!-- 创建一个 id 为 'buttonContainer' 且类名为 'button-container' 的 div 容器，用于放置操作按钮，比如切换图表类型的前后按钮等，样式在 'charts.css' 中定义 -->
<a href="#" data-title="prev"><var id="lang_prev_btn"></var></a>
<!-- 创建一个 a 链接元素，设置了 href 属性为 '#'（可能后续通过 JavaScript 绑定点击事件来实现实际跳转或操作），通过 data-title 属性设置了一个自定义属性值 'prev'（可能用于识别按钮功能，比如上一个图表类型），内部嵌套一个带有特定 id 的 var 元素，用于显示按钮上的文本，文本由 JavaScript 动态设置，这里大概是表示上一个按钮的意思 -->
<a href="#" data-title="next"><var id="lang_next_btn"></var></a>
<!-- 类似结构，创建另一个 a 链接元素，用于表示下一个图表类型的切换按钮，具备相应的属性设置和文本显示（通过 var 元素，文本由 JavaScript 动态设置） -->
</div>
</div>
</div>
</div>
</div>
<script src="../../third-party/jquery-1.10.2.min.js"></script>
<!-- 引入相对路径为 '../../third-party/jquery-1.10.2.min.js' 的 jQuery 库文件，jQuery 是常用的 JavaScript 库，用于简化 DOM 操作、事件处理、动画效果等开发工作 -->
<script src="../../third-party/highcharts/highcharts.js"></script>
<!-- 引入相对路径为 '../../third-party/highcharts/highcharts.js' 的 Highcharts 库文件，Highcharts 是用于创建交互式图表的 JavaScript 库，用于在页面中生成各种类型的图表 -->
<script src="chart.config.js"></script>
<!-- 引入相对路径为 'chart.config.js' 的 JavaScript 文件，该文件可能包含了图表相关的配置信息，比如不同图表类型的具体配置参数等，用于配合 Highcharts 库来定制图表的显示效果等 -->
<script src="charts.js"></script>
<!-- 引入相对路径为 'charts.js' 的 JavaScript 文件，该文件应该包含了页面中与图表操作相关的业务逻辑代码，例如根据用户输入的配置生成图表、切换图表类型、处理表单数据等具体功能 -->
</body>
<script src="../../third-party/jquery-1.10.2.min.js"></script>
<script src="../../third-party/highcharts/highcharts.js"></script>
<script src="chart.config.js"></script>
<script src="charts.js"></script>
</body>
</html>

3
public2/ueditor/dialogs/charts/charts.js
Unescape View File

@ -1,7 +1,7 @@
/*
* 图片转换对话框脚本
**/
// 定义一个空数组，用于存储表格数据，后续会在脚本执行过程中填充具体的数据值
var tableData = [],
//编辑器页面table
editorTable = null,
@ -10,7 +10,6 @@ var tableData = [],
//初始默认图表类型
currentChartType = 0;
// 当页面加载完成后执行的函数，用于初始化页面中的各种元素和事件绑定等操作
window.onload = function () {
editorTable = domUtils.findParentByTagName( editor.selection.getRange().startContainer, 'table', true);

188
public2/ueditor/dialogs/emotion/emotion.css
Unescape View File

@ -1,185 +1,43 @@
/* 选择类名为 'jd' 下的 img 元素，并设置其样式 */
.jd img{
background:transparent url(images/jxface2.gif?v=1.1) no-repeat scroll left top;
/* 设置背景为透明，背景图片为 'images/jxface2.gif'（版本号为 v=1.1，可能用于缓存控制等情况），背景图片不重复显示，并且滚动时背景固定在左上角位置 */
cursor:pointer;
/* 设置鼠标指针样式为手型，提示用户该元素可点击交互 */
width:35px;
/* 设置元素宽度为 35 像素 */
height:35px;
/* 设置元素高度为 35 像素 */
display:block;
/* 将元素显示为块级元素，独占一行，方便进行布局排版等操作 */
cursor:pointer;width:35px;height:35px;display:block;
}
/* 选择类名为 'pp' 下的 img 元素，并设置其样式 */
.pp img{
background:transparent url(images/fface.gif?v=1.1) no-repeat scroll left top;
/* 类似上面的背景设置逻辑，只是背景图片路径为 'images/fface.gif'，同样不重复、固定在左上角 */
cursor:pointer;
width:25px;
/* 设置元素宽度为 25 像素，与上面 'jd' 下的 img 元素宽度不同，体现不同类名下元素样式差异 */
height:25px;
/* 设置元素高度为 25 像素 */
display:block;
cursor:pointer;width:25px;height:25px;display:block;
}
/* 选择类名为 'ldw' 下的 img 元素，并设置其样式 */
.ldw img{
background:transparent url(images/wface.gif?v=1.1) no-repeat scroll left top;
cursor:pointer;
width:35px;
height:35px;
display:block;
cursor:pointer;width:35px;height:35px;display:block;
}
/* 选择类名为 'tsj' 下的 img 元素，并设置其样式 */
.tsj img{
background:transparent url(images/tface.gif?v=1.1) no-repeat scroll left top;
cursor:pointer;
width:35px;
height:35px;
display:block;
cursor:pointer;width:35px;height:35px;display:block;
}
/* 选择类名为 'cat' 下的 img 元素，并设置其样式 */
.cat img{
background:transparent url(images/cface.gif?v=1.1) no-repeat scroll left top;
cursor:pointer;
width:35px;
height:35px;
display:block;
cursor:pointer;width:35px;height:35px;display:block;
}
/* 选择类名为 'bb' 下的 img 元素，并设置其样式 */
.bb img{
background:transparent url(images/bface.gif?v=1.1) no-repeat scroll left top;
cursor:pointer;
width:35px;
height:35px;
display:block;
cursor:pointer;width:35px;height:35px;display:block;
}
/* 选择类名为 'youa' 下的 img 元素，并设置其样式 */
.youa img{
background:transparent url(images/yface.gif?v=1.1) no-repeat scroll left top;
cursor:pointer;
width:35px;
height:35px;
display:block;
}
/* 选择类名为'smileytable' 下的 td 元素，并设置其样式 */
.smileytable td {
height: 37px;
/* 设置表格单元格（td）的高度为 37 像素，统一该类表格单元格的高度尺寸 */
}
/* 选择 id 为 'tabPanel' 的元素，并设置其样式 */
#tabPanel{
margin-left:5px;
/* 设置元素的左外边距为 5 像素，使其与左侧相邻元素间隔一定距离 */
overflow: hidden;
/* 超出元素尺寸范围的内容将被隐藏，防止出现滚动条等影响布局 */
}
/* 选择 id 为 'tabContent' 的元素，并设置其样式 */
#tabContent {
float:left;
/* 使元素向左浮动，常用于实现多栏布局，让后续元素围绕其进行排列 */
background:#FFFFFF;
/* 设置元素的背景颜色为白色（#FFFFFF） */
}
/* 选择 id 为 'tabContent' 下的 div 元素，并设置其样式 */
#tabContent div{
display: none;
/* 初始状态下将这些 div 元素隐藏起来，可能通过后续 JavaScript 等操作来控制显示 */
width:480px;
/* 设置元素宽度为 480 像素 */
overflow:hidden;
/* 超出元素尺寸范围的内容将被隐藏，防止出现滚动条等影响布局 */
}
/* 选择类名为 '#tabIconReview' 且具有'show' 类名的元素，并设置其样式 */
#tabIconReview.show{
left:17px;
/* 设置元素的左定位位置为 17 像素，改变其在页面中的水平位置（基于其定位上下文，此处应该是相对定位或绝对定位的情况） */
display:block;
/* 将元素显示为块级元素并显示出来，覆盖之前可能的隐藏状态（可能是通过添加或移除'show' 类名来控制显示隐藏切换） */
}
/* 选择类名为'menuFocus' 的元素，并设置其样式 */
.menuFocus{
background:#ACCD3C;
/* 设置元素的背景颜色为特定的绿色（#ACCD3C），可能用于突出显示处于焦点状态的菜单元素等 */
}
/* 选择类名为'menuDefault' 的元素，并设置其样式 */
.menuDefault{
background:#FFFFFF;
/* 设置元素的背景颜色为白色（#FFFFFF），可能作为默认的菜单背景颜色，与'menuFocus' 的背景色形成对比，用于区分不同状态 */
}
/* 选择 id 为 'tabIconReview' 的元素，并设置其样式 */
#tabIconReview{
position:absolute;
/* 将元素设置为绝对定位，使其可以根据 'left'、'top' 等定位属性精确地在页面中定位，脱离文档流 */
left:406px;
left:398px \9;
/* 设置元素的左定位位置，对于大多数浏览器使用 406px，针对 IE9 及以下版本浏览器（通过 \9 这个 hack）使用 398px，用于解决不同浏览器下的兼容性问题 */
top:41px;
/* 设置元素的垂直定位位置为 41 像素，确定其在页面中的垂直方向位置 */
z-index:65533;
/* 设置元素的堆叠顺序（z-index）为一个较大的值 65533，使其在页面中显示时能够覆盖在很多其他元素之上，常用于弹出层、提示框等需要显示在最上层的元素 */
width:90px;
/* 设置元素宽度为 90 像素 */
height:76px;
/* 设置元素高度为 76 像素 */
}
/* 选择类名为'review' 的 img 元素，并设置其样式 */
img.review{
width:90px;
height:76px;
border:2px solid #9cb945;
/* 为元素添加边框，边框宽度为 2 像素，颜色为特定的绿色（#9cb945），用于视觉上突出显示该元素 */
background:#FFFFFF;
background-position:center;
background-repeat:no-repeat;
/* 设置背景颜色为白色，背景图片在元素内部居中显示且不重复，这里的背景相关设置可能用于显示特定的图片内容，具体看是否有对应的背景图片设置（前面代码中未体现完整背景图片路径部分，可能在其他地方有补充或者通过 JavaScript 动态设置等情况） */
}
/* 选择类名为 'wrapper' 下的类名为 'tabbody' 的元素，并设置其样式 */
.wrapper.tabbody{
position:relative;
/* 将元素设置为相对定位，为其子元素的绝对定位等操作提供相对的定位上下文，同时相对定位元素本身在文档流中的位置会保留，不会像绝对定位那样完全脱离文档流 */
float:left;
clear:both;
/* 使元素向左浮动，并且清除两侧的浮动元素影响，确保该元素按照期望的布局排列，常用于解决浮动元素造成的布局混乱问题 */
padding:10px;
/* 设置元素的内边距为 10 像素，在元素内部四周提供一定的空白空间 */
width: 95%;
/* 设置元素宽度占父元素宽度的 95%，用于控制该元素在布局中的宽度占比 */
}
/* 选择类名为 'tabbody' 下的 table 元素，并设置其样式 */
.tabbody table{
width: 100%;
/* 设置表格宽度占满父元素宽度，使其自适应父元素的宽度大小 */
}
/* 选择类名为 'tabbody' 下的 td 元素，并设置其样式 */
.tabbody td{
border:1px solid #BAC498;
/* 为表格单元格（td）添加边框，边框宽度为 1 像素，颜色为特定的浅灰色（#BAC498），用于区分单元格之间的界限等 */
}
/* 选择类名为 'tabbody' 下的 td 元素内的 span 元素，并设置其样式 */
.tabbody td span{
display: block;
zoom:1;
/* 将 span 元素显示为块级元素（display: block），并通过 zoom:1 触发 hasLayout 属性（针对低版本 IE 浏览器的兼容性处理，用于解决一些布局相关问题），使其能像块级元素一样正常布局和设置样式 */
padding:0 4px;
/* 设置元素的内边距，左右内边距为 4 像素，上下内边距为 0，在元素内部水平方向提供一定的空白空间 */
}
cursor:pointer;width:35px;height:35px;display:block;
}
.smileytable td {height: 37px;}
#tabPanel{margin-left:5px;overflow: hidden;}
#tabContent {float:left;background:#FFFFFF;}
#tabContent div{display: none;width:480px;overflow:hidden;}
#tabIconReview.show{left:17px;display:block;}
.menuFocus{background:#ACCD3C;}
.menuDefault{background:#FFFFFF;}
#tabIconReview{position:absolute;left:406px;left:398px \9;top:41px;z-index:65533;width:90px;height:76px;}
img.review{width:90px;height:76px;border:2px solid #9cb945;background:#FFFFFF;background-position:center;background-repeat:no-repeat;}
.wrapper .tabbody{position:relative;float:left;clear:both;padding:10px;width: 95%;}
.tabbody table{width: 100%;}
.tabbody td{border:1px solid #BAC498;}
.tabbody td span{display: block;zoom:1;padding:0 4px;}

108
public2/ueditor/dialogs/emotion/emotion.html
Unescape View File

@ -1,76 +1,54 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- 这是 HTML 4.0 过渡型的文档类型声明，告知浏览器按照 HTML 4.0 过渡型标准来解析页面内容 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- 设置 HTML 页面的 XML 命名空间，遵循 W3C 的 XHTML 规范 -->
<head>
<title></title>
<!-- 页面的标题元素，此处为空，通常会设置一个有意义的标题显示在浏览器的标题栏等相关位置 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 通过 HTTP 头部等价属性（http-equiv）设置页面的内容类型为 HTML 文本格式，字符编码为 UTF-8，确保页面能够正确显示各种字符 -->
<meta name="robots" content="noindex, nofollow" />
<!-- 用于告诉搜索引擎爬虫，不要对该页面进行索引收录（noindex），也不要跟踪页面上的链接（nofollow），常用于一些不想被搜索引擎抓取的页面 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="robots" content="noindex, nofollow"/>
<script type="text/javascript" src="../internal.js"></script>
<!-- 引入相对路径为 '../internal.js' 的 JavaScript 文件，该文件可能包含了页面中会用到的自定义函数、变量以及业务逻辑等代码，具体功能依赖其内部定义 -->
<link rel="stylesheet" type="text/css" href="emotion.css">
<!-- 引入名为 'emotion.css' 的外部 CSS 文件，用于设置页面中各元素的样式，如布局、颜色、字体等外观表现 -->
</head>
<body>
<div id="tabPanel" class="wrapper">
<!-- 创建一个 id 为 'tabPanel' 且类名为 'wrapper' 的 div 容器，从类名推测可能作为整个页面中某个功能模块（可能与切换面板相关）的外层包裹容器，方便对内部元素进行整体的布局和样式控制，其样式规则应该在引入的 'emotion.css' 文件中定义 -->
<div id="tabHeads" class="tabhead">
<!-- 创建一个 id 为 'tabHeads' 且类名为 'tabhead' 的 div 容器，可能用于放置切换面板的头部元素（比如各个面板的标题之类），样式在 'emotion.css' 中定义 -->
<span><var id="lang_input_choice"></var></span>
<!-- 创建一个 span 元素，内部嵌套一个带有特定 id 的 var 元素，其显示文本可能通过 JavaScript 动态设置，从 id 推测大概是用于显示与输入选择相关的内容，具体文本由后续脚本控制 -->
<span><var id="lang_input_Tuzki"></var></span>
<span><var id="lang_input_lvdouwa"></var></span>
<span><var id="lang_input_BOBO"></var></span>
<span><var id="lang_input_babyCat"></var></span>
<span><var id="lang_input_bubble"></var></span>
<span><var id="lang_input_youa"></var></span>
<!-- 以上几个 span 元素结构类似，分别通过内部的 var 元素结合不同的 id，用于显示不同的输入相关的提示文本（具体由 JavaScript 动态设置），可能对应不同的表情分类或输入选项等内容 -->
</div>
<div id="tabBodys" class="tabbody">
<!-- 创建一个 id 为 'tabBodys' 且类名为 'tabbody' 的 div 容器，可能用于放置切换面板的主体内容（比如不同分类下的具体表情元素等），样式在 'emotion.css' 中定义 -->
<div id="tab0"></div>
<div id="tab1"></div>
<div id="tab2"></div>
<div id="tab3"></div>
<div id="tab4"></div>
<div id="tab5"></div>
<div id="tab6"></div>
<!-- 以上创建了 7 个空的 div 元素，id 分别为 'tab0' 到 'tab6'，可能后续通过 JavaScript 动态往里面添加内容（比如对应的表情图片等元素），并且这些 id 与后面 JavaScript 中定义的一些对象属性（如 'SmilmgName' 等对象里的键）相对应，用于组织不同分类下的相关数据 -->
</div>
<div id="tabPanel" class="wrapper">
<div id="tabHeads" class="tabhead">
<span><var id="lang_input_choice"></var></span>
<span><var id="lang_input_Tuzki"></var></span>
<span><var id="lang_input_lvdouwa"></var></span>
<span><var id="lang_input_BOBO"></var></span>
<span><var id="lang_input_babyCat"></var></span>
<span><var id="lang_input_bubble"></var></span>
<span><var id="lang_input_youa"></var></span>
</div>
<div id="tabIconReview">
<!-- 创建一个 id 为 'tabIconReview' 的 div 容器，从后续内容看可能用于展示表情的预览相关功能（比如显示当前选中的表情图片等），样式在 'emotion.css' 中定义 -->
<img id='faceReview' class='review' src="../../themes/default/images/spacer.gif" />
<!-- 创建一个 img 元素，设置了 id 为 'faceReview' 和类名为'review'，其初始的 src 属性指向一个空白图片（'spacer.gif'，可能只是占位用，后续通过 JavaScript 动态修改为实际要显示的表情图片），其样式规则（如尺寸、边框等）由 'emotion.css' 中对应的类名'review' 相关样式定义 -->
<div id="tabBodys" class="tabbody">
<div id="tab0"></div>
<div id="tab1"></div>
<div id="tab2"></div>
<div id="tab3"></div>
<div id="tab4"></div>
<div id="tab5"></div>
<div id="tab6"></div>
</div>
<script type="text/javascript" src="emotion.js"></script>
<!-- 引入相对路径为 'emotion.js' 的 JavaScript 文件，该文件应该包含了页面中与表情相关操作的业务逻辑代码，例如根据用户点击切换面板、选择表情等操作来实现相应的功能 -->
<script type="text/javascript">
var emotion = {
tabNum: 7, //切换面板数量
// 定义一个名为 'tabNum' 的属性，表示切换面板的数量，值为 7，对应页面中前面创建的 7 个空 div（'tab0' - 'tab6'），用于控制循环等操作来处理每个面板相关的逻辑。
SmilmgName: { tab0: ['j_00', 84], tab1: ['t_00', 40], tab2: ['w_00', 52], tab3: ['B_00', 63], tab4: ['C_00', 20], tab5: ['i_f', 50], tab6: ['y_00', 40] }, //图片前缀名
// 定义一个名为 'SmilmgName' 的对象属性，用于存储不同面板（以 tab0 - tab6 为键）对应的图片前缀名和数量信息。例如 'tab0' 对应的图片前缀名为 'j_00'，数量为 84 个（可能表示该分类下有 84 个以此前缀命名的图片文件，用于后续加载图片等操作）。
imageFolders: { tab0: 'jx2/', tab1: 'tsj/', tab2: 'ldw/', tab3: 'bobo/', tab4: 'babycat/', tab5: 'face/', tab6: 'youa/' }, //图片对应文件夹路径
// 定义一个名为 'imageFolders' 的对象属性，用于存储不同面板（以 tab0 - tab6 为键）对应的表情图片所在的文件夹路径信息，方便在加载图片时准确找到对应的文件资源，例如 'tab0' 对应的图片在 'jx2/' 文件夹下。
imageCss: { tab0: 'jd', tab1: 'tsj', tab2: 'ldw', tab3: 'bb', tab4: 'cat', tab5: 'pp', tab6: 'youa' }, //图片css类名
// 定义一个名为 'imageCss' 的对象属性，用于存储不同面板（以 tab0 - tab6 为键）对应的表情图片应用的 CSS 类名，这些类名应该在 'emotion.css' 文件中有相应的样式定义，用于控制图片在页面中的显示样式（如尺寸、背景等），例如 'tab0' 对应的图片应用 'jd' 这个 CSS 类名。
imageCssOffset: { tab0: 35, tab1: 35, tab2: 35, tab3: 35, tab4: 35, tab5: 25, tab6: 35 }, //图片偏移
// 定义一个名为 'imageCssOffset' 的对象属性，从名字推测可能用于设置图片在某种布局下的偏移量（具体看 CSS 样式和页面布局逻辑），不同面板（以 tab0 - tab6 为键）对应不同的偏移值，例如 'tab0' 对应的图片偏移量为 35（单位可能是像素等，需结合具体 CSS 和功能确定）。
SmileyInfor: {
tab0: ['Kiss', 'Love', 'Yeah', '啊！', '背扭', '顶', '抖胸', '88', '汗', '瞌睡', '鲁拉', '拍砖', '揉脸', '生日快乐', '大笑', '瀑布汗~', '惊讶', '臭美', '傻笑', '抛媚眼', '发怒', '打酱油', '俯卧撑', '气愤', '?', '吻', '怒', '胜利', 'HI', 'KISS', '不说', '不要', '扯花', '大心', '顶', '大惊', '飞吻', '鬼脸', '害羞', '口水', '狂哭', '来', '发财了', '吃西瓜', '套牢', '害羞', '庆祝', '我来了', '敲打', '晕了', '胜利', '臭美', '被打了', '贪吃', '迎接', '酷', '微笑', '亲吻', '调皮', '惊恐', '耍酷', '发火', '害羞', '汗水', '大哭', '', '加油', '困', '你NB', '晕倒', '开心', '偷笑', '大哭', '滴汗', '叹气', '超赞', '??', '飞吻', '天使', '撒花', '生气', '被砸', '吓傻', '随意吐'],
tab1: ['Kiss', 'Love', 'Yeah', '啊！', '背扭', '顶', '抖胸', '88', '汗', '瞌睡', '鲁拉', '拍砖', '揉脸', '生日快乐', '摊手', '睡觉', '瘫坐', '无聊', '星星闪', '旋转', '也不行', '郁闷', '正Music', '抓墙', '撞墙至死', '歪头', '戳眼', '飘过', '互相拍砖', '砍死你', '扔桌子', '少林寺', '什么？', '转头', '我爱牛奶', '我踢', '摇晃', '晕厥', '在笼子里', '震荡'],
tab2: ['大笑', '瀑布汗~', '惊讶', '臭美', '傻笑', '抛媚眼', '发怒', '我错了', 'money', '气愤', '挑逗', '吻', '怒', '胜利', '委屈', '受伤', '说啥呢？', '闭嘴', '不', '逗你玩儿', '飞吻', '眩晕', '魔法', '我来了', '睡了', '我打', '闭嘴', '打', '打晕了', '刷牙', '爆揍', '炸弹', '倒立', '刮胡子', '邪恶的笑', '不要不要', '爱恋中', '放大仔细看', '偷窥', '超高兴', '晕', '松口气', '我跑', '享受', '修养', '哭', '汗', '啊~', '热烈欢迎', '打酱油', '俯卧撑', '?'],
tab3: ['HI', 'KISS', '不说', '不要', '扯花', '大心', '顶', '大惊', '飞吻', '鬼脸', '害羞', '口水', '狂哭', '来', '泪眼', '流泪', '生气', '吐舌', '喜欢', '旋转', '再见', '抓狂', '汗', '鄙视', '拜', '吐血', '嘘', '打人', '蹦跳', '变脸', '扯肉', '吃To', '吃花', '吹泡泡糖', '大变身', '飞天舞', '回眸', '可怜', '猛抽', '泡泡', '苹果', '亲', '', '骚舞', '烧香', '睡', '套娃娃', '捅捅', '舞倒', '西红柿', '爱慕', '摇', '摇摆', '杂耍', '招财', '被殴', '被球闷', '大惊', '理想', '欧打', '呕吐', '碎', '吐痰'],
tab4: ['发财了', '吃西瓜', '套牢', '害羞', '庆祝', '我来了', '敲打', '晕了', '胜利', '臭美', '被打了', '贪吃', '迎接', '酷', '顶', '幸运', '爱心', '躲', '送花', '选择'],
tab5: ['微笑', '亲吻', '调皮', '惊讶', '耍酷', '发火', '害羞', '汗水', '大哭', '得意', '鄙视', '困', '夸奖', '晕倒', '疑问', '媒婆', '狂吐', '青蛙', '发愁', '亲吻', '', '爱心', '心碎', '玫瑰', '礼物', '哭', '奸笑', '可爱', '得意', '呲牙', '暴汗', '楚楚可怜', '困', '哭', '生气', '惊讶', '口水', '彩虹', '夜空', '太阳', '钱钱', '灯泡', '咖啡', '蛋糕', '音乐', '爱', '胜利', '赞', '鄙视', 'OK'],
tab6: ['男兜', '女兜', '开心', '乖乖', '偷笑', '大笑', '抽泣', '大哭', '无奈', '滴汗', '叹气', '狂晕', '委屈', '超赞', '??', '疑问', '飞吻', '天使', '撒花', '生气', '被砸', '口水', '泪奔', '吓傻', '吐舌头', '点头', '随意吐', '旋转', '困困', '鄙视', '狂顶', '篮球', '再见', '欢迎光临', '恭喜发财', '稍等', '我在线', '恕不议价', '库房有货', '货在路上']
}
// 定义一个名为 'SmileyInfor' 的对象属性，用于存储不同面板（以 tab0 - tab6 为键）对应的表情相关文字描述信息，例如 'tab0' 对应的数组里包含了一系列表情对应的名称或含义等文字内容，可能用于在页面上显示表情的提示信息之类的功能。
};
</script>
</div>
<div id="tabIconReview">
<img id='faceReview' class='review' src="../../themes/default/images/spacer.gif"/>
</div>
<script type="text/javascript" src="emotion.js"></script>
<script type="text/javascript">
var emotion = {
tabNum:7, //切换面板数量
SmilmgName:{ tab0:['j_00', 84], tab1:['t_00', 40], tab2:['w_00', 52], tab3:['B_00', 63], tab4:['C_00', 20], tab5:['i_f', 50], tab6:['y_00', 40] }, //图片前缀名
imageFolders:{ tab0:'jx2/', tab1:'tsj/', tab2:'ldw/', tab3:'bobo/', tab4:'babycat/', tab5:'face/', tab6:'youa/'}, //图片对应文件夹路径
imageCss:{tab0:'jd', tab1:'tsj', tab2:'ldw', tab3:'bb', tab4:'cat', tab5:'pp', tab6:'youa'}, //图片css类名
imageCssOffset:{tab0:35, tab1:35, tab2:35, tab3:35, tab4:35, tab5:25, tab6:35}, //图片偏移
SmileyInfor:{
tab0:['Kiss', 'Love', 'Yeah', '啊！', '背扭', '顶', '抖胸', '88', '汗', '瞌睡', '鲁拉', '拍砖', '揉脸', '生日快乐', '大笑', '瀑布汗~', '惊讶', '臭美', '傻笑', '抛媚眼', '发怒', '打酱油', '俯卧撑', '气愤', '?', '吻', '怒', '胜利', 'HI', 'KISS', '不说', '不要', '扯花', '大心', '顶', '大惊', '飞吻', '鬼脸', '害羞', '口水', '狂哭', '来', '发财了', '吃西瓜', '套牢', '害羞', '庆祝', '我来了', '敲打', '晕了', '胜利', '臭美', '被打了', '贪吃', '迎接', '酷', '微笑', '亲吻', '调皮', '惊恐', '耍酷', '发火', '害羞', '汗水', '大哭', '', '加油', '困', '你NB', '晕倒', '开心', '偷笑', '大哭', '滴汗', '叹气', '超赞', '??', '飞吻', '天使', '撒花', '生气', '被砸', '吓傻', '随意吐'],
tab1:['Kiss', 'Love', 'Yeah', '啊！', '背扭', '顶', '抖胸', '88', '汗', '瞌睡', '鲁拉', '拍砖', '揉脸', '生日快乐', '摊手', '睡觉', '瘫坐', '无聊', '星星闪', '旋转', '也不行', '郁闷', '正Music', '抓墙', '撞墙至死', '歪头', '戳眼', '飘过', '互相拍砖', '砍死你', '扔桌子', '少林寺', '什么？', '转头', '我爱牛奶', '我踢', '摇晃', '晕厥', '在笼子里', '震荡'],
tab2:['大笑', '瀑布汗~', '惊讶', '臭美', '傻笑', '抛媚眼', '发怒', '我错了', 'money', '气愤', '挑逗', '吻', '怒', '胜利', '委屈', '受伤', '说啥呢？', '闭嘴', '不', '逗你玩儿', '飞吻', '眩晕', '魔法', '我来了', '睡了', '我打', '闭嘴', '打', '打晕了', '刷牙', '爆揍', '炸弹', '倒立', '刮胡子', '邪恶的笑', '不要不要', '爱恋中', '放大仔细看', '偷窥', '超高兴', '晕', '松口气', '我跑', '享受', '修养', '哭', '汗', '啊~', '热烈欢迎', '打酱油', '俯卧撑', '?'],
tab3:['HI', 'KISS', '不说', '不要', '扯花', '大心', '顶', '大惊', '飞吻', '鬼脸', '害羞', '口水', '狂哭', '来', '泪眼', '流泪', '生气', '吐舌', '喜欢', '旋转', '再见', '抓狂', '汗', '鄙视', '拜', '吐血', '嘘', '打人', '蹦跳', '变脸', '扯肉', '吃To', '吃花', '吹泡泡糖', '大变身', '飞天舞', '回眸', '可怜', '猛抽', '泡泡', '苹果', '亲', '', '骚舞', '烧香', '睡', '套娃娃', '捅捅', '舞倒', '西红柿', '爱慕', '摇', '摇摆', '杂耍', '招财', '被殴', '被球闷', '大惊', '理想', '欧打', '呕吐', '碎', '吐痰'],
tab4:['发财了', '吃西瓜', '套牢', '害羞', '庆祝', '我来了', '敲打', '晕了', '胜利', '臭美', '被打了', '贪吃', '迎接', '酷', '顶', '幸运', '爱心', '躲', '送花', '选择'],
tab5:['微笑', '亲吻', '调皮', '惊讶', '耍酷', '发火', '害羞', '汗水', '大哭', '得意', '鄙视', '困', '夸奖', '晕倒', '疑问', '媒婆', '狂吐', '青蛙', '发愁', '亲吻', '', '爱心', '心碎', '玫瑰', '礼物', '哭', '奸笑', '可爱', '得意', '呲牙', '暴汗', '楚楚可怜', '困', '哭', '生气', '惊讶', '口水', '彩虹', '夜空', '太阳', '钱钱', '灯泡', '咖啡', '蛋糕', '音乐', '爱', '胜利', '赞', '鄙视', 'OK'],
tab6:['男兜', '女兜', '开心', '乖乖', '偷笑', '大笑', '抽泣', '大哭', '无奈', '滴汗', '叹气', '狂晕', '委屈', '超赞', '??', '疑问', '飞吻', '天使', '撒花', '生气', '被砸', '口水', '泪奔', '吓傻', '吐舌头', '点头', '随意吐', '旋转', '困困', '鄙视', '狂顶', '篮球', '再见', '欢迎光临', '恭喜发财', '稍等', '我在线', '恕不议价', '库房有货', '货在路上']
}
};
</script>
</body>
</html>

184
public2/ueditor/dialogs/emotion/emotion.js
Unescape View File

@ -1,107 +1,85 @@
// 当页面加载完成后执行的函数，用于初始化页面中与表情相关的各种设置、元素创建以及事件绑定等操作
window.onload = function () {
// 设置编辑器（editor，可能是自定义的富文本编辑器对象）的配置选项，将 'emotionLocalization' 设置为 false，表示表情相关资源的本地化属性为否，具体影响后续表情图片等资源的获取路径
editor.setOpt({
emotionLocalization: false
emotionLocalization:false
});
// 根据编辑器的 'emotionLocalization' 选项值来确定表情图片的路径（SmileyPath），如果为 true，则从本地相对路径 'images/' 获取，否则从指定的网络路径 "http://img.baidu.com/hi/" 获取
emotion.SmileyPath = editor.options.emotionLocalization === true? 'images/' : "http://img.baidu.com/hi/";
// 创建一个包含指定数量（emotion.tabNum）的空数组对象，用于存储不同面板（tab）下的相关信息（比如每个面板对应的表情图片文件名等），每个属性名以 'tab' 加数字的形式表示（如 'tab0'、'tab1' 等）
emotion.SmileyBox = createTabList(emotion.tabNum);
// 创建一个包含指定数量（emotion.tabNum）的数组，数组元素初始值都为 0，用于标记每个面板（tab）是否已经创建或存在相关内容，后续根据这个标记来决定是否需要重新创建对应面板的内容
emotion.tabExist = createArr(emotion.tabNum);
emotion.SmileyPath = editor.options.emotionLocalization === true ? 'images/' : "http://img.baidu.com/hi/";
emotion.SmileyBox = createTabList( emotion.tabNum );
emotion.tabExist = createArr( emotion.tabNum );
// 初始化表情图片名称相关的数据，比如根据已有的图片前缀名等信息生成完整的图片文件名列表，填充到对应的面板数组（emotion.SmileyBox）中
initImgName();
// 初始化事件处理函数，为特定 id（此处传入 'tabHeads'）对应的元素及其子元素绑定点击等事件监听器，实现切换面板等交互功能
initEvtHandler("tabHeads");
initEvtHandler( "tabHeads" );
};
// 初始化表情图片名称相关数据的函数，用于根据已有的表情图片前缀名（emotion.SmilmgName 中存储的信息）和数量信息，生成完整的表情图片文件名，并填充到对应的面板数组（emotion.SmileyBox）中
function initImgName() {
// 遍历 emotion.SmilmgName 对象的每个属性（pro），每个属性对应一个面板（如 'tab0'、'tab1' 等）
for (var pro in emotion.SmilmgName) {
for ( var pro in emotion.SmilmgName ) {
var tempName = emotion.SmilmgName[pro],
tempBox = emotion.SmileyBox[pro],
tempStr = "";
tempBox = emotion.SmileyBox[pro],
tempStr = "";
// 如果当前面板对应的数组（tempBox）已经有元素了（即长度大于 0），则直接返回，不进行重复处理，可能是避免多次初始化同一面板的数据
if (tempBox.length) return;
// 根据当前面板对应的图片前缀名（tempName[0]）和数量（tempName[1]）信息，循环生成完整的图片文件名，并添加到当前面板对应的数组（tempBox）中
for (var i = 1; i <= tempName[1]; i++) {
if ( tempBox.length ) return;
for ( var i = 1; i <= tempName[1]; i++ ) {
tempStr = tempName[0];
if (i < 10) tempStr = tempStr + '0';
if ( i < 10 ) tempStr = tempStr + '0';
tempStr = tempStr + i + '.gif';
tempBox.push(tempStr);
tempBox.push( tempStr );
}
}
}
// 初始化事件处理函数，用于为指定 id（conId）对应的元素及其子元素绑定点击等事件监听器，实现切换面板等交互功能
function initEvtHandler(conId) {
// 通过 $G 函数（可能是自定义的获取 DOM 元素的函数）获取指定 id（conId）对应的元素，此处应该是获取页面中用于切换面板的头部元素集合（如包含各个面板标题的 span 元素的父元素）
var tabHeads = $G(conId);
// 遍历头部元素集合的每个子节点（childNodes），为符合条件的元素绑定点击事件监听器
for (var i = 0, j = 0; i < tabHeads.childNodes.length; i++) {
function initEvtHandler( conId ) {
var tabHeads = $G( conId );
for ( var i = 0, j = 0; i < tabHeads.childNodes.length; i++ ) {
var tabObj = tabHeads.childNodes[i];
// 只对节点类型为元素节点（nodeType == 1）的子节点进行操作，过滤掉文本节点、注释节点等非元素类型的节点
if (tabObj.nodeType == 1) {
// 使用 domUtils.on 函数（可能是自定义的事件绑定工具函数）为当前元素（tabObj）绑定点击事件监听器，点击时执行一个立即执行函数返回的函数，这个函数会调用 switchTab 函数，并传入当前面板的索引（j）作为参数，实现点击切换对应面板的功能，同时 j 自增，用于记录下一个面板的索引
domUtils.on(tabObj, "click", (function (index) {
if ( tabObj.nodeType == 1 ) {
domUtils.on( tabObj, "click", (function ( index ) {
return function () {
switchTab(index);
switchTab( index );
};
})(j));
})( j ) );
j++;
}
}
// 初始时默认切换到第一个面板（索引为 0），调用 switchTab 函数显示第一个面板的内容
switchTab(0);
// 将用于显示表情预览的元素（id 为 'tabIconReview'）隐藏起来，初始状态下不显示预览内容
$G("tabIconReview").style.display = 'none';
switchTab( 0 );
$G( "tabIconReview" ).style.display = 'none';
}
// 插入表情图片到编辑器中的函数，根据传入的图片 URL（url）以及触发的事件对象（evt），创建一个包含图片源地址（src）等信息的对象（obj），然后通过编辑器的命令（execCommand）插入图片，并且如果不是按下 Ctrl 键触发的操作，则隐藏相关的弹出对话框（popup.hide）
function InsertSmiley(url, evt) {
function InsertSmiley( url, evt ) {
var obj = {
src: editor.options.emotionLocalization? editor.options.UEDITOR_HOME_URL + "dialogs/emotion/" + url : url
src:editor.options.emotionLocalization ? editor.options.UEDITOR_HOME_URL + "dialogs/emotion/" + url : url
};
obj._src = obj.src;
editor.execCommand('insertimage', obj);
if (!evt.ctrlKey) {
editor.execCommand( 'insertimage', obj );
if ( !evt.ctrlKey ) {
dialog.popup.hide();
}
}
// 切换面板显示的函数，根据传入的面板索引（index），执行调整面板高度（autoHeight）、创建面板内容（如果不存在）以及切换显示对应面板内容和隐藏其他面板内容等操作
function switchTab(index) {
// 根据传入的面板索引调整对应面板的高度相关样式，比如设置 iframe 和其父元素的高度值，确保合适的显示布局
autoHeight(index);
// 如果当前面板还不存在（对应 emotion.tabExist 数组中该索引位置的值为 0），则标记该面板已存在（设置为 1），并调用 createTab 函数创建该面板的具体内容（如添加表情图片表格等元素）
if (emotion.tabExist[index] == 0) {
function switchTab( index ) {
autoHeight( index );
if ( emotion.tabExist[index] == 0 ) {
emotion.tabExist[index] = 1;
createTab('tab' + index);
createTab( 'tab' + index );
}
// 获取用于切换面板的头部元素集合（包含各个面板标题的 span 元素）和主体元素集合（包含各个面板具体内容的 div 元素）
var tabHeads = $G("tabHeads").getElementsByTagName("span"),
tabBodys = $G("tabBodys").getElementsByTagName("div"),
i = 0, L = tabHeads.length;
// 循环遍历头部和主体元素集合，将所有元素的样式设置为初始状态，即隐藏主体元素（display="none"），清除头部元素的类名（className=""），用于清除之前可能设置的选中类名等样式
for (; i < L; i++) {
//获取呈现元素句柄数组
var tabHeads = $G( "tabHeads" ).getElementsByTagName( "span" ),
tabBodys = $G( "tabBodys" ).getElementsByTagName( "div" ),
i = 0, L = tabHeads.length;
//隐藏所有呈现元素
for ( ; i < L; i++ ) {
tabHeads[i].className = "";
tabBodys[i].style.display = "none";
}
// 将当前要显示的面板对应的头部元素添加特定的类名（可能用于设置选中样式，如背景色等变化），并显示其对应的主体元素内容
//显示对应呈现元素
tabHeads[index].className = "focus";
tabBodys[index].style.display = "block";
}
// 根据传入的面板索引（index）调整对应面板的高度相关样式的函数，通过设置 iframe 及其父元素的高度值，为不同面板设置不同的合适高度，确保良好的显示布局效果
function autoHeight(index) {
var iframe = dialog.getDom("iframe"),
parent = iframe.parentNode.parentNode;
switch (index) {
function autoHeight( index ) {
var iframe = dialog.getDom( "iframe" ),
parent = iframe.parentNode.parentNode;
switch ( index ) {
case 0:
iframe.style.height = "380px";
parent.style.height = "392px";
@ -135,78 +113,74 @@ function autoHeight(index) {
}
}
// 创建特定面板（tabName）内容的函数，主要用于生成包含表情图片、相关提示信息以及鼠标交互事件绑定的表格元素，并添加到对应的面板 div 元素中，实现表情图片的展示和交互功能
function createTab(tabName) {
function createTab( tabName ) {
var faceVersion = "?v=1.1", //版本号
tab = $G(tabName), //获取将要生成的 Div 句柄，即对应面板的 div 元素对象，用于后续往里面添加生成的表格内容
imagePath = emotion.SmileyPath + emotion.imageFolders[tabName], //获取显示表情和预览表情的路径，通过拼接表情图片的基础路径（SmileyPath）和当前面板对应的文件夹路径（imageFolders[tabName]）得到完整路径
positionLine = 11 / 2, //中间数，可能用于判断图片在表格中的位置（比如用于控制背景图片的定位等情况，结合后续代码看与鼠标悬停显示预览相关逻辑有关）
iWidth = iHeight = 35, //图片长宽，设置表情图片在页面上显示的宽度和高度均为 35 像素
iColWidth = 3, //表格剩余空间的显示比例，可能用于设置表格单元格的宽度占比等布局相关参数，影响表情图片在表格中的排列方式
tableCss = emotion.imageCss[tabName],
cssOffset = emotion.imageCssOffset[tabName],
textHTML = ['<table class="smileytable">'],
i = 0, imgNum = emotion.SmileyBox[tabName].length, imgColNum = 11, faceImage,
sUrl, realUrl, posflag, offset, infor;
// 循环遍历当前面板对应的表情图片数量（imgNum），生成表格的行（tr）和列（td）元素，将表情图片、相关提示信息以及鼠标交互事件绑定添加到表格中
for (; i < imgNum;) {
textHTML.push('<tr>');
for (var j = 0; j < imgColNum; j++, i++) {
tab = $G( tabName ), //获取将要生成的Div句柄
imagePath = emotion.SmileyPath + emotion.imageFolders[tabName], //获取显示表情和预览表情的路径
positionLine = 11 / 2, //中间数
iWidth = iHeight = 35, //图片长宽
iColWidth = 3, //表格剩余空间的显示比例
tableCss = emotion.imageCss[tabName],
cssOffset = emotion.imageCssOffset[tabName],
textHTML = ['<table class="smileytable">'],
i = 0, imgNum = emotion.SmileyBox[tabName].length, imgColNum = 11, faceImage,
sUrl, realUrl, posflag, offset, infor;
for ( ; i < imgNum; ) {
textHTML.push( '<tr>' );
for ( var j = 0; j < imgColNum; j++, i++ ) {
faceImage = emotion.SmileyBox[tabName][i];
if (faceImage) {
if ( faceImage ) {
sUrl = imagePath + faceImage + faceVersion;
realUrl = imagePath + faceImage;
posflag = j < positionLine? 0 : 1;
posflag = j < positionLine ? 0 : 1;
offset = cssOffset * i * (-1) - 1;
infor = emotion.SmileyInfor[tabName][i];
textHTML.push('<td class="' + tableCss + '" border="1" width="' + iColWidth + '%" style="border-collapse:collapse;" align="center" bgcolor="transparent" onclick="InsertSmiley(\'' + realUrl.replace(/'/g, "\\'") + '\',event)" onmouseover="over(this,\'' + sUrl + '\',\'' + posflag + '\')" onmouseout="out(this)">');
textHTML.push('<span>');
textHTML.push('<img style="background-position:left ' + offset + 'px;" title="' + infor + '" src="' + emotion.SmileyPath + (editor.options.emotionLocalization? '0.gif" width="' : 'default/0.gif" width="') + iWidth + '" height="' + iHeight + '"></img>');
textHTML.push('</span>');
textHTML.push( '<td class="' + tableCss + '" border="1" width="' + iColWidth + '%" style="border-collapse:collapse;" align="center" bgcolor="transparent" onclick="InsertSmiley(\'' + realUrl.replace( /'/g, "\\'" ) + '\',event)" onmouseover="over(this,\'' + sUrl + '\',\'' + posflag + '\')" onmouseout="out(this)">' );
textHTML.push( '<span>' );
textHTML.push( '<img style="background-position:left ' + offset + 'px;" title="' + infor + '" src="' + emotion.SmileyPath + (editor.options.emotionLocalization ? '0.gif" width="' : 'default/0.gif" width="') + iWidth + '" height="' + iHeight + '"></img>' );
textHTML.push( '</span>' );
} else {
textHTML.push('<td width="' + iColWidth + '%" bgcolor="#FFFFFF">');
textHTML.push( '<td width="' + iColWidth + '%" bgcolor="#FFFFFF">' );
}
textHTML.push('</td>');
textHTML.push( '</td>' );
}
textHTML.push('</tr>');
textHTML.push( '</tr>' );
}
textHTML.push('</table>');
textHTML = textHTML.join("");
textHTML.push( '</table>' );
textHTML = textHTML.join( "" );
tab.innerHTML = textHTML;
}
// 鼠标悬停在表情图片所在单元格（td）上时执行的函数，用于改变单元格背景色、显示表情预览图片以及显示表情预览元素（tabIconReview）等操作，实现鼠标悬停时的交互效果
function over(td, srcPath, posFlag) {
function over( td, srcPath, posFlag ) {
td.style.backgroundColor = "#ACCD3C";
$G('faceReview').style.backgroundImage = "url(" + srcPath + ")";
if (posFlag == 1) $G("tabIconReview").className = "show";
$G("tabIconReview").style.display = 'block';
$G( 'faceReview' ).style.backgroundImage = "url(" + srcPath + ")";
if ( posFlag == 1 ) $G( "tabIconReview" ).className = "show";
$G( "tabIconReview" ).style.display = 'block';
}
// 鼠标移出表情图片所在单元格（td）时执行的函数，用于恢复单元格背景色为透明、隐藏表情预览元素（tabIconReview）以及清除其相关类名等操作，还原到初始状态
function out(td) {
function out( td ) {
td.style.backgroundColor = "transparent";
var tabIconRevew = $G("tabIconReview");
var tabIconRevew = $G( "tabIconReview" );
tabIconRevew.className = "";
tabIconRevew.style.display = 'none';
}
// 创建一个包含指定数量（tabNum）的空数组对象的函数，每个属性名以 'tab' 加数字的形式表示（如 'tab0'、'tab1' 等），用于后续存储不同面板相关的信息，初始时每个数组都是空的
function createTabList(tabNum) {
function createTabList( tabNum ) {
var obj = {};
for (var i = 0; i < tabNum; i++) {
for ( var i = 0; i < tabNum; i++ ) {
obj["tab" + i] = [];
}
return obj;
}
// 创建一个包含指定数量（tabNum）的数组，数组元素初始值都为 0 的函数，用于标记每个面板（tab）是否已经创建或存在相关内容，后续根据这个标记来决定是否需要重新创建对应面板的内容
function createArr(tabNum) {
function createArr( tabNum ) {
var arr = [];
for (var i = 0; i < tabNum; i++) {
for ( var i = 0; i < tabNum; i++ ) {
arr[i] = 0;
}
return arr;
}

119
public2/ueditor/dialogs/gmap/gmap.html
Unescape View File

@ -1,136 +1,89 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- 这是 HTML 4.01 过渡型的文档类型声明，告知浏览器按照 HTML 4.01 过渡型标准来解析页面内容，并指定对应的 DTD（文档类型定义）文件的 URL -->
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 通过 HTTP 头部等价属性（http-equiv）设置页面的内容类型为 HTML 文本格式，字符编码为 UTF-8，确保页面能够正确显示各种字符 -->
<title></title>
<!-- 页面的标题元素，此处为空，通常会设置一个有意义的标题显示在浏览器的标题栏等相关位置 -->
<script type="text/javascript" src="../internal.js"></script>
<!-- 引入相对路径为 '../internal.js' 的 JavaScript 文件，该文件可能包含了页面中会用到的自定义函数、变量以及业务逻辑等代码，具体功能依赖其内部定义 -->
<style type="text/css">
.content {
width: 530px;
height: 350px;
margin: 10px auto;
}
/* 定义类名为 'content' 的元素样式，设置宽度为 530 像素，高度为 350 像素，并且在水平方向上自动居中（通过 margin: 10px auto 实现），可能作为页面主体内容的一个容器样式 */
.content table {
width: 100%
}
/* 当类名为 'content' 的元素内部包含 table 表格时，设置表格宽度占满父元素（也就是类名为 'content' 的元素）的宽度，使其自适应父元素宽度 */
.content table td {
vertical-align: middle;
}
/* 对于类名为 'content' 的元素内部表格的单元格（td），设置垂直对齐方式为居中，使单元格内的内容在垂直方向上居中显示 */
#address {
width: 220px;
height: 21px;
background: #FFF;
border: 1px solid #d7d7d7;
line-height: 21px;
}
/* 定义 id 为 'address' 的元素样式，设置宽度为 220 像素，高度为 21 像素，背景颜色为白色（#FFF），边框为 1 像素宽的灰色（#d7d7d7）实线，并且行高设置为与元素高度相同（21 像素），可能用于输入框等文本输入元素的样式设置 */
.content{width:530px; height: 350px;margin: 10px auto;}
.content table{width: 100%}
.content table td{vertical-align: middle;}
#address{width:220px;height:21px;background: #FFF;border:1px solid #d7d7d7; line-height: 21px;}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- 引入 Google Maps API 的 JavaScript 文件，用于在页面中实现地图相关的功能，通过设置 sensor=false 表示不使用传感器（比如设备的地理位置传感器等），具体根据应用场景决定是否需要获取设备位置信息 -->
</head>
<body>
<div class="content">
<!-- 创建一个类名为 'content' 的 div 容器，应用上面定义的 '.content' 样式类，作为页面中主要内容的包裹容器，里面放置与地图搜索和展示相关的元素 -->
<table>
<tr>
<td><label for="address"><var id="lang_input_address"></var></label></td>
<td><input id="address" type="text" /></td>
<td><a id="doSearch" href="javascript:void(0)" class="button"><var id="lang_input_search"></var></a></td>
</tr>
</table>
<!-- 创建一个表格结构，第一列通过 label 标签关联到后面的文本输入框（input 元素，id 为 'address'），用于显示一个提示文本（<var id="lang_input_address"></var> 中的文本可能通过 JavaScript 动态设置，大概是与输入地址相关的提示语），第二列是用于输入地址信息的文本输入框，第三列是一个链接（a 元素，id 为 'doSearch'，应用 'button' 类样式，显示的文本同样通过 <var id="lang_input_search"></var> 动态设置，大概是与搜索操作相关的按钮文本），整体构成一个简单的地图地址搜索表单 -->
<div id="container" style="width: 100%; height: 340px;margin: 5px auto; border: 1px solid gray;"></div>
<!-- 创建一个 id 为 'container' 的 div 容器，设置宽度占满父元素（也就是类名为 'content' 的元素）的宽度，高度为 340 像素，在水平方向上自动居中（通过 margin: 5px auto 实现），并且有 1 像素宽的灰色边框，该容器用于后续放置 Google 地图展示相关的内容 -->
</div>
<script type="text/javascript">
domUtils.on(window, "load", function () {
// 使用 domUtils（可能是自定义的 DOM 操作工具函数库中的方法）为 window 对象绑定 'load' 事件监听器，当页面加载完成后执行以下匿名函数，用于初始化地图相关的各种功能和操作绑定
var map = new google.maps.Map(document.getElementById('container'), {
<div class="content">
<table>
<tr>
<td><label for="address"><var id="lang_input_address"></var></label></td>
<td><input id="address" type="text" /></td>
<td><a id="doSearch" href="javascript:void(0)" class="button"><var id="lang_input_search"></var></a></td>
</tr>
</table>
<div id="container" style="width: 100%; height: 340px;margin: 5px auto; border: 1px solid gray;"></div>
</div>
<script type="text/javascript">
domUtils.on(window,"load",function(){
var map = new google.maps.Map(document.getElementById('container'), {
zoom: 3,
streetViewControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// 创建一个 Google Maps 的地图实例（map），将其渲染到页面中 id 为 'container' 的元素内，设置初始缩放级别为 3，禁用街景视图控制（streetViewControl: false），启用比例尺控制（scaleControl: true），地图类型为普通道路地图（mapTypeId: google.maps.MapTypeId.ROADMAP）
var imgcss;
// 定义一个变量 imgcss，用于存储图片的样式信息，初始值为空，后续可能会根据获取到的已有图片样式进行赋值
var marker = new google.maps.Marker({
map: map,
draggable: true
});
// 创建一个 Google Maps 的标记（marker）实例，将其添加到刚才创建的地图（map）上，并且设置该标记是可拖动的（draggable: true），可用于在地图上标记特定位置
function doSearch() {
function doSearch(){
var address = document.getElementById('address').value;
// 获取页面中 id 为 'address' 的文本输入框内输入的地址文本内容
var geocoder = new google.maps.Geocoder();
// 创建一个 Google Maps 的地理编码服务对象（geocoder），用于将地址文本转换为地理坐标等相关信息
geocoder.geocode({ 'address': address }, function (results, status) {
// 使用地理编码服务对象的 geocode 方法，传入要查询的地址信息，该方法是异步的，查询完成后会执行回调函数，回调函数接收查询结果（results）和状态码（status）两个参数
geocoder.geocode( { 'address': address}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var bounds = results[0].geometry.viewport;
// 如果查询状态码为 'OK'，表示查询成功，从查询结果的第一个元素（results[0]）中获取地理边界信息（geometry.viewport），用于后续调整地图显示范围
map.fitBounds(bounds);
// 根据获取到的地理边界信息调整地图的显示范围，使地图能够完整显示该地址所在的区域
marker.setPosition(results[0].geometry.location);
// 将标记的位置设置为查询结果中该地址对应的地理坐标位置（geometry.location）
marker.setTitle(address);
// 为标记设置标题为输入的地址文本内容，可能在鼠标悬停等交互场景下显示该标题作为提示信息
} else alert(lang.searchError);
// 如果查询状态码不是 'OK'，表示查询出现错误，弹出一个提示框（alert）显示错误信息（lang.searchError，这里的 lang 可能是一个包含多语言文本的对象，通过相应的键获取对应的错误提示文本，具体看代码其他部分的定义）
});
}
$G('address').onkeydown = function (evt) {
$G('address').onkeydown = function (evt){
evt = evt || event;
if (evt.keyCode == 13) {
doSearch();
}
};
// 使用 $G 函数（可能是自定义的获取 DOM 元素的函数）获取页面中 id 为 'address' 的元素，并为其绑定 'keydown' 键盘按下事件监听器，当按下回车键（keyCode == 13）时，调用 doSearch 函数执行地址搜索操作，方便用户通过键盘直接进行搜索，无需点击搜索按钮
$G("doSearch").onclick = doSearch;
// 使用 $G 函数获取页面中 id 为 'doSearch' 的元素（也就是搜索按钮），并为其绑定 'click' 事件监听器，点击按钮时调用 doSearch 函数执行地址搜索操作
dialog.onok = function () {
dialog.onok = function (){
var center = map.getCenter();
var point = marker.getPosition();
// 获取地图当前的中心坐标（center）以及标记所在的位置坐标（point），用于构建静态地图的 URL 参数
var url = "http://maps.googleapis.com/maps/api/staticmap?center=" + center.lat() + ',' + center.lng() + "&zoom=" + map.zoom + "&size=520x340&maptype=" + map.getMapTypeId() + "&markers=" + point.lat() + ',' + point.lng() + "&sensor=false";
// 构建一个 Google Maps 静态地图的 URL，包含地图的中心坐标、缩放级别、尺寸（宽 520 像素，高 340 像素）、地图类型以及标记位置等参数，并且设置不使用传感器（sensor=false），用于获取一张静态的地图图片资源
editor.execCommand('inserthtml', '<img width="520" height="340" src="' + url + '"' + (imgcss ? ' style="' + imgcss + '"' : '') + '/>');
// 使用编辑器（editor，可能是自定义的富文本编辑器对象）的命令（execCommand）插入一段 HTML 代码，即创建一个宽度为 520 像素，高度为 340 像素的 img 图片元素，其 src 属性指向刚才构建的静态地图 URL，并且如果 imgcss 变量有值（即存在图片样式信息），则添加相应的 style 属性设置图片样式，将静态地图图片插入到编辑器内容中
editor.execCommand('inserthtml', '<img width="520" height="340" src="' + url + '"' + (imgcss ? ' style="' + imgcss + '"' :'') + '/>');
};
function getPars(str, par) {
var reg = new RegExp(par + "=((\\d+|[.,])*)", "g");
function getPars(str,par){
var reg = new RegExp(par+"=((\\d+|[.,])*)","g");
return reg.exec(str)[1];
}
// 定义一个函数 getPars，用于从给定的字符串（str）中通过正则表达式（RegExp）匹配获取指定参数（par）的值，正则表达式的模式是匹配以参数名开头，后面跟着等号和对应的值（值可以是数字、小数点或者逗号组成的字符串），并返回匹配到的参数值
var img = editor.selection.getRange().getClosedNode();
if (img && img.src.indexOf("http://maps.googleapis.com/maps/api/staticmap") != -1) {
if(img && img.src.indexOf("http://maps.googleapis.com/maps/api/staticmap")!=-1){
var url = img.getAttribute("src");
var centers = getPars(url, "center").split(",");
point = new google.maps.LatLng(Number(centers[0]), Number(centers[1]));
var centers = getPars(url,"center").split(",");
point = new google.maps.LatLng(Number(centers[0]),Number(centers[1]));
map.setCenter(point);
map.setZoom(Number(getPars(url, "zoom")));
centers = getPars(url, "markers").split(",");
marker.setPosition(new google.maps.LatLng(Number(centers[0]), Number(centers[1])));
map.setZoom(Number(getPars(url,"zoom")));
centers = getPars(url,"markers").split(",");
marker.setPosition(new google.maps.LatLng(Number(centers[0]),Number(centers[1])));
imgcss = img.style.cssText;
} else {
setTimeout(function () {
}else{
setTimeout(function(){
doSearch();
}, 30)
},30)
}
// 获取编辑器当前选区范围（editor.selection.getRange()）内的闭合节点（getClosedNode()，可能是获取选区对应的 HTML 元素节点），判断如果该节点存在（img）并且其 src 属性中包含 Google Maps 静态地图的 URL 字符串，则表示当前是在编辑已有的静态地图相关内容，执行以下操作：
// 从该节点的 src 属性获取 URL 字符串（img.getAttribute("src")），通过 getPars 函数分别获取地图的中心坐标、缩放级别以及标记位置等参数信息，然后根据这些信息设置地图（map）的中心坐标、缩放级别以及标记（marker）的位置，并且获取该节点的样式信息（img.style.cssText）赋值给 imgcss 变量，用于后续保存或应用该图片的样式；
// 如果获取的节点不存在或者不是 Google Maps 静态地图相关的节点，则设置一个定时器，延迟 30 毫秒后调用 doSearch 函数执行地址搜索操作，可能是在初次加载页面或者新建相关内容时的默认操作，引导用户输入地址进行地图查询和展示。
});
});
</script>
</script>
</body>
</html>

68
public2/ueditor/dialogs/help/help.css
Unescape View File

@ -1,61 +1,7 @@
/* 选择类名为 'wrapper' 的元素，并设置其样式 */
.wrapper{
width: 370px;
/* 设置元素的宽度为 370 像素，用于控制该元素在页面中的水平尺寸大小 */
margin: 10px auto;
/* 设置元素的上下外边距为 10 像素，左右外边距自动（auto），使元素在水平方向上自动居中，常用于将某个模块在页面中水平居中显示 */
zoom: 1;
/* 通过设置 zoom 属性为 1，触发元素的 hasLayout 属性（主要针对低版本 IE 浏览器的兼容性处理），以解决一些布局相关的问题，确保元素能按照预期的样式和布局规则进行显示 */
}
/* 选择类名为 'tabbody' 的元素，并设置其样式 */
.tabbody{
height: 360px;
/* 设置元素的高度为 360 像素，用于限定该元素在页面中的垂直尺寸大小 */
}
/* 选择类名为 'tabbody' 下的类名为 'panel' 的元素，并设置其样式 */
.tabbody.panel{
width:100%;
/* 设置元素的宽度占满其父元素的宽度，使其自适应父元素的宽度大小，常用于实现布局上的全屏或全宽效果 */
height: 360px;
/* 设置元素的高度为 360 像素，与父元素（.tabbody）的高度保持一致，可能用于创建具有固定高度的面板区域 */
position: absolute;
/* 将元素设置为绝对定位，使其可以根据 'left'、'top' 等定位属性精确地在页面中定位，脱离文档流，方便进行层叠布局以及与其他元素的位置重叠等效果实现 */
background: #fff;
/* 设置元素的背景颜色为白色（#fff），用于提供一个清晰的背景视觉效果 */
}
/* 选择类名为 'tabbody' 下的类名为 'panel' 的元素内部的 h1 标题元素，并设置其样式 */
.tabbody.panel h1{
font-size:26px;
/* 设置 h1 标题元素的字体大小为 26 像素，用于控制标题的文字大小，使其更加醒目突出 */
margin: 5px 0 0 5px;
/* 设置元素的上、左外边距为 5 像素，下、右外边距为 0，使标题在面板内有一定的内边距间隔，呈现出合适的排版位置 */
}
/* 选择类名为 'tabbody' 下的类名为 'panel' 的元素内部的 p 段落元素，并设置其样式 */
.tabbody.panel p{
font-size:12px;
/* 设置 p 段落元素的字体大小为 12 像素，通常用于正文内容的文字大小设置，使其与标题等元素区分开来，保持合适的层次结构 */
margin: 5px 0 0 5px;
/* 同样设置元素的上、左外边距为 5 像素，下、右外边距为 0，让段落文字在面板内有合适的排版间隔 */
}
/* 选择类名为 'tabbody' 下的 table 表格元素，并设置其样式 */
.tabbody table{
width:90%;
/* 设置表格的宽度占其父元素宽度的 90%，使其在父元素内按一定比例自适应宽度，而不是占满整个父元素宽度，提供一定的布局灵活性 */
line-height: 20px;
/* 设置表格内行高为 20 像素，用于控制表格内文字行与行之间的垂直间距，影响文字的排版效果和可读性 */
margin: 5px 0 0 5px;
/* 设置表格的上、左外边距为 5 像素，下、右外边距为 0，让表格在父元素内有一定的间隔位置，呈现出合适的布局效果 */
}
/* 选择类名为 'tabbody' 下的 table 表格元素内部的 thead 表头元素，并设置其样式 */
.tabbody table thead{
font-weight: bold;
/* 设置表头元素内文字的字体粗细为粗体（bold），使其在视觉上与表格主体内容区分开来，更突出表头的重要性和标识作用 */
line-height: 25px;
/* 设置表头行的行高为 25 像素，通常表头可能需要更大一点的行高来保证文字显示效果和美观性，与表格主体行高（前面设置的 20 像素）有所区别 */
}
.wrapper{width: 370px;margin: 10px auto;zoom: 1;}
.tabbody{height: 360px;}
.tabbody .panel{width:100%;height: 360px;position: absolute;background: #fff;}
.tabbody .panel h1{font-size:26px;margin: 5px 0 0 5px;}
.tabbody .panel p{font-size:12px;margin: 5px 0 0 5px;}
.tabbody table{width:90%;line-height: 20px;margin: 5px 0 0 5px;;}
.tabbody table thead{font-weight: bold;line-height: 25px;}

166
public2/ueditor/dialogs/help/help.html
Unescape View File

@ -1,110 +1,82 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- 这是 HTML 4.01 过渡型的文档类型声明，告知浏览器按照 HTML 4.01 过渡型标准来解析页面内容，并指定对应的 DTD（文档类型定义）文件的网址 -->
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>帮助</title>
<!-- 定义页面的标题为“帮助”，这个标题通常会显示在浏览器的标题栏中 -->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!-- 通过 HTTP 头部等价属性（http-equiv）设置页面的内容类型为 HTML 文本格式，字符编码为 UTF-8，确保页面能够正确显示各种字符 -->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<script type="text/javascript" src="../internal.js"></script>
<!-- 引入相对路径为“../internal.js”的 JavaScript 文件，该文件可能包含了页面中会用到的自定义函数、变量以及一些通用的业务逻辑等代码，具体功能依赖其内部定义 -->
<link rel="stylesheet" type="text/css" href="help.css">
<!-- 引入名为“help.css”的外部 CSS 文件，用于设置页面中各元素的样式，比如布局、颜色、字体等外观表现 -->
</head>
<body>
<div class="wrapper" id="helptab">
<!-- 创建一个类名为“wrapper”且 id 为“helptab”的 div 容器，从类名推测可能作为整个帮助页面内容的外层包裹容器，方便对内部元素进行整体的布局和样式控制，其样式规则应该在引入的“help.css”文件中定义 -->
<div id="tabHeads" class="tabhead">
<!-- 创建一个 id 为“tabHeads”且类名为“tabhead”的 div 容器，可能用于放置帮助页面中切换不同帮助主题的头部元素，样式在“help.css”中定义 -->
<span class="focus" tabsrc="about"><var id="lang_input_about"></var></span>
<!-- 创建一个 span 元素，添加了“focus”类名（可能用于表示当前选中状态的样式，在 CSS 中会有对应样式定义），并设置了一个自定义属性“tabsrc”值为“about”，内部嵌套一个带有特定 id 的 var 元素，其显示文本可能通过 JavaScript 动态设置，从 id 推测大概是用于显示与“关于”相关的帮助主题的标题之类内容 -->
<span tabsrc="shortcuts"><var id="lang_input_shortcuts"></var></span>
<!-- 与上一个 span 元素类似，设置“tabsrc”属性为“shortcuts”，内部 var 元素的文本可能用于显示与“快捷键”相关的帮助主题的标题内容 -->
<div class="wrapper" id="helptab">
<div id="tabHeads" class="tabhead">
<span class="focus" tabsrc="about"><var id="lang_input_about"></var></span>
<span tabsrc="shortcuts"><var id="lang_input_shortcuts"></var></span>
</div>
<div id="tabBodys" class="tabbody">
<div id="about" class="panel">
<h1>UEditor</h1>
<p id="version"></p>
<p><var id="lang_input_introduction"></var></p>
</div>
<div id="tabBodys" class="tabbody">
<!-- 创建一个 id 为“tabBodys”且类名为“tabbody”的 div 容器，可能用于放置帮助页面中不同帮助主题对应的主体内容，样式在“help.css”中定义 -->
<div id="about" class="panel">
<!-- 创建一个 id 为“about”且类名为“panel”的 div 容器，用于展示“关于”这个帮助主题的具体内容，其样式在“help.css”中有对应定义 -->
<h1>UEditor</h1>
<!-- 一级标题元素，显示文本为“UEditor”，可能用于介绍这个 UEditor 相关的一些基础信息，比如是什么工具之类的内容 -->
<p id="version"></p>
<!-- 创建一个带有 id 为“version”的 p 段落元素，其内容可能通过 JavaScript 动态设置，推测是用于显示 UEditor 的版本信息 -->
<p><var id="lang_input_introduction"></var></p>
<!-- 创建一个 p 段落元素，内部嵌套一个带有特定 id 的 var 元素，文本同样可能通过 JavaScript 动态设置，大概是用于显示关于 UEditor 的详细介绍内容 -->
</div>
<div id="shortcuts" class="panel">
<!-- 创建一个 id 为“shortcuts”且类名为“panel”的 div 容器，用于展示“快捷键”这个帮助主题的具体内容，样式在“help.css”中有对应定义 -->
<table>
<thead>
<tr>
<td><var id="lang_Txt_shortcuts"></var></td>
<td><var id="lang_Txt_func"></var></td>
</tr>
</thead>
<!-- 创建表格的表头部分（thead），包含两个单元格（td），分别嵌套带有特定 id 的 var 元素，文本可能通过 JavaScript 动态设置，从 id 推测大概是分别用于显示快捷键的按键组合以及对应的功能描述的标题 -->
<tbody>
<tr>
<td>ctrl+b</td>
<td><var id="lang_Txt_bold"></var></td>
</tr>
<!-- 创建表格的主体行（tbody 内的 tr），第一列显示文本“ctrl+b”，表示一个快捷键的按键组合，第二列嵌套带有特定 id 的 var 元素，文本通过 JavaScript 动态设置，从 id 推测是用于显示该快捷键对应的功能（此处应该是加粗功能） -->
<tr>
<td>ctrl+c</td>
<td><var id="lang_Txt_copy"></var></td>
</tr>
<!-- 与上一行类似，展示“ctrl+c”快捷键及其对应的复制功能描述 -->
<tr>
<td>ctrl+x</td>
<td><var id="lang_Txt_cut"></var></td>
</tr>
<!-- 展示“ctrl+x”快捷键及其对应的剪切功能描述 -->
<tr>
<td>ctrl+v</td>
<td><var id="lang_Txt_Paste"></var></td>
</tr>
<!-- 展示“ctrl+v”快捷键及其对应的粘贴功能描述 -->
<tr>
<td>ctrl+y</td>
<td><var id="lang_Txt_undo"></var></td>
</tr>
<!-- 展示“ctrl+y”快捷键及其对应的恢复操作（可能是撤销的反向操作）功能描述 -->
<tr>
<td>ctrl+z</td>
<td><var id="lang_Txt_redo"></var></td>
</tr>
<!-- 展示“ctrl+z”快捷键及其对应的撤销操作功能描述 -->
<tr>
<td>ctrl+i</td>
<td><var id="lang_Txt_italic"></var></td>
</tr>
<!-- 展示“ctrl+i”快捷键及其对应的斜体功能描述 -->
<tr>
<td>ctrl+u</td>
<td><var id="lang_Txt_underline"></var></td>
</tr>
<!-- 展示“ctrl+u”快捷键及其对应的下划线功能描述 -->
<tr>
<td>ctrl+a</td>
<td><var id="lang_Txt_selectAll"></var></td>
</tr>
<!-- 展示“ctrl+a”快捷键及其对应的全选功能描述 -->
<tr>
<td>shift+enter</td>
<td><var id="lang_Txt_visualEnter"></var></td>
</tr>
<!-- 展示“shift+enter”快捷键及其对应的可视化换行（可能是与普通换行不同的一种换行效果，具体看对应功能实现）功能描述 -->
<tr>
<td>alt+z</td>
<td><var id="lang_Txt_fullscreen"></var></td>
</tr>
<!-- 展示“alt+z”快捷键及其对应的全屏功能描述 -->
</tbody>
</table>
</div>
<div id="shortcuts" class="panel">
<table>
<thead>
<tr>
<td><var id="lang_Txt_shortcuts"></var></td>
<td><var id="lang_Txt_func"></var></td>
</tr>
</thead>
<tbody>
<tr>
<td>ctrl+b</td>
<td><var id="lang_Txt_bold"></var></td>
</tr>
<tr>
<td>ctrl+c</td>
<td><var id="lang_Txt_copy"></var></td>
</tr>
<tr>
<td>ctrl+x</td>
<td><var id="lang_Txt_cut"></var></td>
</tr>
<tr>
<td>ctrl+v</td>
<td><var id="lang_Txt_Paste"></var></td>
</tr>
<tr>
<td>ctrl+y</td>
<td><var id="lang_Txt_undo"></var></td>
</tr>
<tr>
<td>ctrl+z</td>
<td><var id="lang_Txt_redo"></var></td>
</tr>
<tr>
<td>ctrl+i</td>
<td><var id="lang_Txt_italic"></var></td>
</tr>
<tr>
<td>ctrl+u</td>
<td><var id="lang_Txt_underline"></var></td>
</tr>
<tr>
<td>ctrl+a</td>
<td><var id="lang_Txt_selectAll"></var></td>
</tr>
<tr>
<td>shift+enter</td>
<td><var id="lang_Txt_visualEnter"></var></td>
</tr>
<tr>
<td>alt+z</td>
<td><var id="lang_Txt_fullscreen"></var></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="help.js"></script>
<!-- 引入相对路径为“help.js”的 JavaScript 文件，该文件应该包含了页面中与帮助主题展示相关的业务逻辑代码，例如根据用户点击切换不同帮助主题、动态设置版本信息等元素的文本内容等功能 -->
</div>
<script type="text/javascript" src="help.js"></script>
</body>
</html>

49
public2/ueditor/dialogs/help/help.js
Unescape View File

@ -5,65 +5,52 @@
* Time: 下午1:06
* To change this template use File | Settings | File Templates.
*/
// 以上部分是代码的创建相关信息注释，说明了代码是使用 JetBrains PhpStorm 创建，以及作者、创建日期和时间等信息，对代码本身功能无实质影响。
// 定义一个名为 'clickHandler' 的函数，用于处理 tab 点击相关的操作，比如改变头部元素的样式以及控制对应主体内容的显示隐藏和层级关系等。
// @param tabHeads ：传入的参数，表示 tab 头部元素的集合（通常是一组用于切换不同 tab 的按钮或链接等元素组成的数组）。
// @param tabBodys ：传入的参数，表示 tab 主体内容的集合（通常是一组对应不同 tab 的详细内容展示区域的元素组成的数组）。
// @param obj ：传入的参数，代表当前被点击的 tab 头部元素对象，用于针对该特定元素进行样式等相关操作。
function clickHandler( tabHeads, tabBodys, obj ) {
/**
* tab点击处理事件
* @param tabHeads
* @param tabBodys
* @param obj
*/
function clickHandler( tabHeads,tabBodys,obj ) {
//head样式更改
// 循环遍历 tab 头部元素集合（tabHeads），将每个元素的类名（className）设置为空字符串，目的是清除之前可能存在的任何样式类，用于后续重新设置样式。
for ( var k = 0, len = tabHeads.length; k < len; k++ ) {
tabHeads[k].className = "";
}
// 将当前被点击的 tab 头部元素（obj）的类名设置为 "focus"，可能在 CSS 中有对应的样式定义，用于突出显示当前选中的 tab 头部，比如改变背景色、字体颜色等样式来体现选中状态。
obj.className = "focus";
//body显隐
// 获取当前被点击的 tab 头部元素（obj）上自定义的 'tabSrc' 属性值，该值可能对应着某个 tab 主体内容的唯一标识（比如 id），用于后续查找并显示对应的主体内容。
var tabSrc = obj.getAttribute( "tabSrc" );
// 循环遍历 tab 主体内容集合（tabBodys），对每个主体内容元素进行相关操作。
for ( var j = 0, length = tabBodys.length; j < length; j++ ) {
var body = tabBodys[j],
id = body.getAttribute( "id" );
// 为每个主体内容元素（body）绑定点击事件监听器，当点击主体内容元素时，执行一个匿名函数，函数内将该元素的 'zoom' 属性设置为 1，可能是用于触发某些浏览器特定的布局相关行为（比如在低版本 IE 中用于解决一些布局问题等），具体功能依赖于页面的 CSS 和整体布局设置。
body.onclick = function () {
body.onclick = function(){
this.style.zoom = 1;
};
// 判断当前主体内容元素的 id 是否与通过 tab 头部元素获取的 'tabSrc' 值不相等，如果不相等，表示不是当前选中 tab 对应的主体内容。
if ( id!= tabSrc ) {
// 将该主体内容元素的 z-index 属性设置为 1，用于控制元素在页面中的堆叠层级，值为 1 表示较低的层级，可能使其在页面中显示在其他元素下方或者隐藏起来（结合其他 CSS 样式），实现非当前选中 tab 主体内容的隐藏或后置效果。
if ( id != tabSrc ) {
body.style.zIndex = 1;
} else {
// 如果当前主体内容元素的 id 与 'tabSrc' 值相等，即表示是当前选中 tab 对应的主体内容，则将其 z-index 属性设置为 200，设置较高的层级值，使其能够显示在其他元素之上，保证当前选中 tab 的主体内容处于可见且突出显示的状态。
body.style.zIndex = 200;
}
}
}
// 定义一个名为'switchTab' 的函数，用于实现整体的 TAB 切换功能，主要是遍历 tab 元素，为每个 tab 头部元素绑定点击事件监听器，点击时调用 'clickHandler' 函数来处理相应的样式改变和主体内容切换显示等操作。
// @param tabParentId ：传入的参数，代表 tab 的父节点 ID 或者传入 tab 所在的父元素对象本身，用于基于此查找 tab 头部和主体元素等相关子元素进行操作。
/**
* TAB切换
* @param tabParentId tab的父节点ID或者对象本身
*/
function switchTab( tabParentId ) {
// 通过 $G 函数（可能是自定义的获取 DOM 元素的函数），根据传入的 tabParentId 获取对应的元素对象，然后获取其所有子元素（children），这些子元素包含了 tab 的头部和主体相关元素集合等信息。
var tabElements = $G( tabParentId ).children,
tabHeads = tabElements[0].children,
tabBodys = tabElements[1].children;
// 循环遍历 tab 头部元素集合（tabHeads），对每个头部元素进行相关操作。
for ( var i = 0, length = tabHeads.length; i < length; i++ ) {
var head = tabHeads[i];
// 判断当前头部元素的类名是否为 "focus"，如果是，表示当前元素已经处于选中状态，直接调用 'clickHandler' 函数传入相应参数进行相关样式和显示处理（可能是页面加载时默认选中某个 tab 的情况需要进行初始化处理）。
if ( head.className === "focus" ) clickHandler( tabHeads, tabBodys, head );
// 为每个 tab 头部元素绑定点击事件监听器，当点击头部元素时，执行一个匿名函数，函数内调用 'clickHandler' 函数并传入 tab 头部元素集合（tabHeads）、tab 主体内容集合（tabBodys）以及当前被点击的头部元素对象（this）作为参数，实现点击切换 tab 时的样式改变和主体内容切换显示等操作。
if ( head.className === "focus" )clickHandler(tabHeads,tabBodys, head );
head.onclick = function () {
clickHandler( tabHeads, tabBodys, this );
clickHandler(tabHeads,tabBodys,this);
}
}
}
switchTab("helptab");
// 调用'switchTab' 函数，并传入 "helptab" 作为参数，启动整个 TAB 切换功能，"helptab" 可能是页面中包含 tab 结构的某个父元素的 id，通过这个调用使得页面加载后就能对相应的 tab 进行切换操作了。
switchTab( "helptab" );
// 获取页面中 id 为 'version' 的元素（可能是一个用于显示版本信息的 HTML 元素，比如段落元素等），然后将其内部 HTML 内容（innerHTML）设置为 'parent.UE.version' 的值，这里的 'parent' 可能是指父窗口或者某个包含版本信息的上级对象，通过访问其 'UE' 属性下的'version' 值来获取并显示具体的版本号信息，用于在页面上展示相关软件或工具的版本情况。
document.getElementById( 'version' ).innerHTML = parent.UE.version;
document.getElementById('version').innerHTML = parent.UE.version;

29
public2/ueditor/dialogs/image/image.css
Unescape View File

@ -1,61 +1,40 @@
@charset "utf-8";
/* 定义该 CSS 文件的字符编码为 UTF-8，确保能够正确解析和显示各种字符，如中文、特殊符号等 */
/* dialog样式 */
.wrapper {
zoom: 1;
/* 通过设置 zoom 属性为 1，触发元素的 hasLayout 属性（主要针对低版本 IE 浏览器的兼容性处理），避免一些布局相关的问题，保证元素按预期布局显示 */
width: 630px;
/* 设置元素的宽度为 630 像素，用于控制该元素在页面中的水平尺寸大小 */
*width: 626px;
/* 针对特定浏览器（可能是低版本 IE 浏览器）的 hack 写法，为其设置另一个宽度值 626px，用于解决该浏览器下可能出现的样式差异问题 */
height: 380px;
/* 设置元素的高度为 380 像素，用于限定该元素在页面中的垂直尺寸大小 */
margin: 0 auto;
/* 设置元素的上下外边距为 0，左右外边距自动（auto），使元素在水平方向上自动居中，常用于将某个模块在页面中水平居中显示 */
padding: 10px;
/* 为元素内部添加 10 像素的内边距，在元素内容与边框之间留出一定空间，使内容显示更美观、布局更合理 */
position: relative;
/* 将元素设置为相对定位，方便基于其自身原始位置进行子元素的定位等操作，且不会脱离文档流，对其他元素的布局影响相对较小 */
font-family: sans-serif;
/* 设置元素内文本的字体为无衬线字体（sans-serif），提供一种简洁清晰的字体外观风格 */
}
/* tab样式框大小 */
/*tab样式框大小*/
.tabhead {
float: left;
/* 将元素向左浮动，使其脱离文档流并按照从左到右的顺序排列，常用于实现多栏布局等效果，与其他浮动元素或非浮动元素相互配合来构建页面布局 */
float:left;
}
.tabbody {
width: 100%;
/* 设置元素的宽度占满其父元素的宽度，使其自适应父元素的宽度大小，确保能占满可用空间 */
height: 346px;
/* 设置元素的高度为 346 像素，用于限定该元素在页面中的垂直尺寸大小 */
position: relative;
/* 将元素设置为相对定位，同样方便基于其自身原始位置进行内部元素的定位等操作，不脱离文档流 */
clear: both;
/* 清除左右两侧的浮动元素影响，确保该元素在垂直方向上不会与之前的浮动元素产生布局上的重叠等问题，重新开启新的一行布局 */
}
.tabbody.panel {
.tabbody .panel {
position: absolute;
/* 将元素设置为绝对定位，使其脱离文档流，可以根据 'left'、'top' 等定位属性精确地在页面中定位，常用于实现层叠、覆盖等布局效果 */
width: 0;
height: 0;
/* 初始时将宽度和高度设置为 0，可能是先隐藏该元素或者通过后续的交互（如选中对应的 tab 时）来动态改变其尺寸以显示内容 */
background: #fff;
/* 设置元素的背景颜色为白色（#fff），提供一个清晰的背景视觉效果 */
overflow: hidden;
/* 当元素内容超出其设定的宽度和高度范围时，隐藏超出部分的内容，防止内容溢出显示造成布局混乱 */
display: none;
/* 初始状态下将元素隐藏，不显示在页面中，等待相应的触发条件（比如对应的 tab 被选中）来显示该元素 */
}
.tabbody.panel.focus {
.tabbody .panel.focus {
width: 100%;
height: 346px;
display: block;
/* 当元素具有 'focus' 类名时（可能通过 JavaScript 动态添加该类名来表示当前选中的 tab 对应的面板），设置其宽度占满父元素宽度，高度恢复为 346 像素，并将 display 属性设置为 'block'，使其显示出来，展示对应的 tab 内容 */
}
/* 图片对齐方式 */

115
public2/ueditor/dialogs/image/image.html
Unescape View File

@ -2,168 +2,119 @@
<html>
<head>
<meta charset="UTF-8">
<!-- 定义页面的字符编码为 UTF-8，确保页面能够正确显示各种字符，包括中文、特殊符号等 -->
<title>ueditor图片对话框</title>
<!-- 设置页面的标题为“ueditor图片对话框”，这个标题通常会显示在浏览器的标题栏中 -->
<script type="text/javascript" src="../internal.js"></script>
<!-- 引入相对路径为“../internal.js”的 JavaScript 文件，该文件可能包含了页面中会用到的自定义函数、变量以及一些通用的业务逻辑等代码，具体功能依赖其内部定义 -->
<!-- jquery -->
<script type="text/javascript" src="../../third-party/jquery-1.10.2.min.js"></script>
<!-- 引入 jQuery 库的压缩版本文件，jQuery 是一个常用的 JavaScript 库，用于简化 HTML 文档遍历、事件处理、动画效果以及与服务器进行异步通信等操作，方便开发各种交互功能 -->
<!-- webuploader -->
<script src="../../third-party/webuploader/webuploader.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../third-party/webuploader/webuploader.css">
<!-- 引入 webuploader 的 JavaScript 核心文件（webuploader.min.js），它是一个用于实现文件上传功能的前端库，同时引入对应的 CSS 样式文件（webuploader.css），用于设置文件上传相关元素的样式，如上传按钮、进度条等外观显示 -->
<!-- image dialog -->
<link rel="stylesheet" href="image.css" type="text/css" />
<!-- 引入名为“image.css”的外部 CSS 文件，用于设置页面中与图片对话框相关的各元素的样式，比如布局、颜色、字体等外观表现，使整个图片对话框呈现出特定的视觉效果 -->
</head>
<body>
<div class="wrapper">
<!-- 创建一个类名为“wrapper”的 div 容器，从类名推测可能作为整个图片对话框内容的外层包裹容器，方便对内部元素进行整体的布局和样式控制，其样式规则应该在引入的“image.css”等文件中定义 -->
<div id="tabhead" class="tabhead">
<!-- 创建一个 id 为“tabhead”且类名为“tabhead”的 div 容器，可能用于放置图片对话框中切换不同功能选项卡（tab）的头部元素，样式在“image.css”中定义 -->
<span class="tab" data-content-id="remote"><var id="lang_tab_remote"></var></span>
<!-- 创建一个 span 元素，添加了“tab”类名（可能用于表示普通的未选中状态的 tab 样式，在 CSS 中有对应样式定义），设置了一个自定义属性“data-content-id”值为“remote”，用于关联对应的内容板块（后续通过 JavaScript 根据该属性值来切换显示相应内容），内部嵌套一个带有特定 id 的 var 元素，其显示文本可能通过 JavaScript 动态设置，从 id 推测大概是用于显示与“远程图片”相关的选项卡标题之类内容 -->
<span class="tab focus" data-content-id="upload"><var id="lang_tab_upload"></var></span>
<!-- 与上一个 span 元素类似，添加“tab”类名且还有“focus”类名（可能表示当前选中状态的样式），“data-content-id”值为“upload”，内部 var 元素文本用于显示与“上传图片”相关的选项卡标题内容，表明当前“上传图片”这个 tab 是默认选中状态 -->
<span class="tab" data-content-id="online"><var id="lang_tab_online"></var></span>
<!-- 创建一个类似的 span 元素，“data-content-id”值为“online”，内部 var 元素文本用于显示与“在线图片”相关的选项卡标题内容 -->
<span class="tab" data-content-id="search"><var id="lang_tab_search"></var></span>
<!-- 创建一个类似的 span 元素，“data-content-id”值为“search”，内部 var 元素文本用于显示与“搜索图片”相关的选项卡标题内容 -->
</div>
<div class="alignBar">
<!-- 创建一个类名为“alignBar”的 div 容器，从类名推测可能用于设置图片的对齐相关操作的元素布局区域，样式在“image.css”中定义 -->
<label class="algnLabel"><var id="lang_input_align"></var></label>
<!-- 创建一个带有“algnLabel”类名的 label 元素，用于显示与图片对齐相关的提示文本（内部 var 元素文本通过 JavaScript 动态设置，大概是提示用户进行对齐操作之类的话语），可能在页面上呈现出一种特定的样式效果（在 CSS 中有对应样式定义） -->
<span id="alignIcon">
<span id="noneAlign" class="none-align focus" data-align="none"></span>
<span id="leftAlign" class="left-align" data-align="left"></span>
<span id="leftAlign" class="right-align" data-align="right"></span>
<span id="leftAlign" class="center-align" data-align="center"></span>
</span>
<!-- 创建一个 id 为“alignIcon”的 span 元素，作为对齐图标容器，内部嵌套多个具有不同类名（如“none-align”、“left-align”等，对应不同的对齐方式，样式在“image.css”中有通过背景图片等方式定义不同的图标样式）且带有“data-align”自定义属性（用于标识具体对齐方式）的 span 子元素，用于展示不同的图片对齐方式图标，其中“noneAlign”元素还带有“focus”类名（可能表示默认或当前选中的对齐方式） -->
<input id="align" name="align" type="hidden" value="none" />
<!-- 创建一个隐藏的输入框（type="hidden"），id 为“align”，name 也为“align”，初始值为“none”，可能用于通过 JavaScript 操作来记录当前选择的图片对齐方式，虽然在页面上不直接显示，但可以在后台进行数据传递或状态保存等用途 -->
<span id="alignIcon">
<span id="noneAlign" class="none-align focus" data-align="none"></span>
<span id="leftAlign" class="left-align" data-align="left"></span>
<span id="rightAlign" class="right-align" data-align="right"></span>
<span id="centerAlign" class="center-align" data-align="center"></span>
</span>
<input id="align" name="align" type="hidden" value="none"/>
</div>
<div id="tabbody" class="tabbody">
<!-- 创建一个 id 为“tabbody”且类名为“tabbody”的 div 容器，可能用于放置图片对话框中不同功能选项卡对应的主体内容，样式在“image.css”中定义 -->
<!-- 远程图片 -->
<div id="remote" class="panel">
<!-- 创建一个 id 为“remote”且类名为“panel”的 div 容器，用于展示“远程图片”这个功能选项卡对应的具体内容，其样式在“image.css”中有对应定义 -->
<div class="top">
<!-- 创建一个类名为“top”的 div 容器，可能用于划分“远程图片”板块内的顶部区域，放置相关输入框等元素，布局和样式在“image.css”中定义 -->
<div class="row">
<!-- 创建一个类名为“row”的 div 容器，可能用于形成一行布局结构，放置特定的元素组合，样式在“image.css”中定义 -->
<label for="url"><var id="lang_input_url"></var></label>
<!-- 创建一个 label 元素，通过“for”属性关联到后面的 id 为“url”的输入框元素，用于显示与图片 URL 相关的提示文本（内部 var 元素文本通过 JavaScript 动态设置，大概是提示用户输入图片网址之类的话语） -->
<span><input class="text" id="url" type="text" /></span>
<!-- 创建一个 span 元素，内部包含一个 id 为“url”且类名为“text”的输入框元素（样式在“image.css”中有定义，比如边框、背景等外观样式），用于用户输入远程图片的网址 -->
<span><input class="text" id="url" type="text"/></span>
</div>
</div>
<div class="left">
<!-- 创建一个类名为“left”的 div 容器，可能用于划分“远程图片”板块内的左侧区域，放置与图片尺寸、边框等属性设置相关的元素，布局和样式在“image.css”中定义 -->
<div class="row">
<label><var id="lang_input_size"></var></label>
<!-- 创建一个 label 元素，用于显示与图片尺寸相关的提示文本（内部 var 元素文本通过 JavaScript 动态设置，大概是提示用户设置图片宽高等话语） -->
<span><var id="lang_input_width">&nbsp;&nbsp;</var><input class="text" type="text" id="width" />px </span>
<!-- 创建一个 span 元素，内部先包含一个用于显示“宽度”相关提示文本（通过 var 元素展示，文本通过 JavaScript 动态设置）的空格占位符，再跟着一个 id 为“width”且类名为“text”的输入框元素（用于输入图片宽度值），最后显示单位“px”，用于设置远程图片的宽度 -->
<span><var id="lang_input_height">&nbsp;&nbsp;</var><input class="text" type="text" id="width" />px </span>
<!-- 与上一个 span 元素类似，用于设置远程图片的高度，包含“高度”提示文本、输入框（id 为“height”）和单位“px” -->
<span><var id="lang_input_width">&nbsp;&nbsp;</var><input class="text" type="text" id="width"/>px </span>
<span><var id="lang_input_height">&nbsp;&nbsp;</var><input class="text" type="text" id="height"/>px </span>
<span><input id="lock" type="checkbox" disabled="disabled"><span id="lockicon"></span></span>
<!-- 创建一个 span 元素，内部包含一个被禁用（disabled="disabled"）的复选框（type="checkbox"，id 为“lock”），可能用于控制图片的某种锁定属性（具体功能看业务逻辑），后面跟着一个 id 为“lockicon”的空 span 元素，其样式可能通过 CSS 结合背景图片等方式显示一个特定的图标（比如锁的图标）来表示该属性相关状态 -->
</div>
<div class="row">
<label><var id="lang_input_border"></var></label>
<!-- 创建一个 label 元素，用于显示与图片边框相关的提示文本（内部 var 元素文本通过 JavaScript 动态设置，大概是提示用户设置图片边框宽度之类的话语） -->
<span><input class="text" type="text" id="border" />px </span>
<!-- 创建一个 span 元素，内部包含一个 id 为“border”且类名为“text”的输入框元素（用于输入图片边框宽度值）和单位“px”，用于设置远程图片的边框宽度 -->
<span><input class="text" type="text" id="border"/>px </span>
</div>
<div class="row">
<label><var id="lang_input_vhspace"></var></label>
<!-- 创建一个 label 元素，用于显示与图片垂直间距相关的提示文本（内部 var 元素文本通过 JavaScript 动态设置，大概是提示用户设置图片垂直间距值之类的话语） -->
<span><input class="text" type="text" id="vhSpace" />px </span>
<!-- 创建一个 span 元素，内部包含一个 id 为“vhSpace”且类名为“text”的输入框元素（用于输入图片垂直间距值）和单位“px”，用于设置远程图片的垂直间距 -->
<span><input class="text" type="text" id="vhSpace"/>px </span>
</div>
<div class="row">
<label><var id="lang_input_title"></var></label>
<!-- 创建一个 label 元素，用于显示与图片标题相关的提示文本（内部 var 元素文本通过 JavaScript 动态设置，大概是提示用户输入图片标题之类的话语） -->
<span><input class="text" type="text" id="title" /></span>
<!-- 创建一个 span 元素，内部包含一个 id 为“title”且类名为“text”的输入框元素（用于输入图片标题内容），用于设置远程图片的标题 -->
<span><input class="text" type="text" id="title"/></span>
</div>
</div>
<div class="right"><div id="preview"></div></div>
<!-- 创建一个类名为“right”的 div 容器，可能用于划分“远程图片”板块内的右侧区域，内部只包含一个 id 为“preview”的空 div 元素，其样式在“image.css”中定义，推测用于展示远程图片的预览效果等内容 -->
</div>
<!-- 上传图片 -->
<div id="upload" class="panel focus">
<!-- 创建一个 id 为“upload”且类名为“panel”的 div 容器，用于展示“上传图片”这个功能选项卡对应的具体内容，添加“focus”类名表示当前该板块是选中状态（显示状态），其样式在“image.css”中有对应定义 -->
<div id="queueList" class="queueList">
<!-- 创建一个 id 为“queueList”且类名为“queueList”的 div 容器，可能用于展示上传文件的队列列表相关元素，样式在“image.css”中定义 -->
<div class="statusBar element-invisible">
<!-- 创建一个类名为“statusBar”且添加了“element-invisible”类名（可能用于初始隐藏该元素，在满足一定条件时通过 JavaScript 操作显示出来，样式在“image.css”中有对应定义）的 div 容器，用于展示文件上传的状态信息，比如进度条、提示文本等 -->
<div class="progress">
<!-- 创建一个类名为“progress”的 div 容器，用于展示文件上传的进度情况，内部包含进度相关的文本和百分比元素 -->
<span class="text">0%</span>
<!-- 创建一个 span 元素，用于显示上传进度的文字描述，初始值为“0%”，随着上传过程会通过 JavaScript 更新其内容 -->
<span class="percentage"></span>
<!-- 创建一个空的 span 元素，用于通过 JavaScript 根据上传进度动态设置其宽度等样式来直观展示进度的百分比情况 -->
</div><div class="info"></div>
<!-- 创建一个空的 div 元素，类名为“info”，可能用于显示上传过程中的一些提示信息（比如上传速度、剩余时间等），通过 JavaScript 动态填充内容 -->
<div class="btns">
<!-- 创建一个类名为“btns”的 div 容器，用于放置上传相关的操作按钮等元素 -->
<div id="filePickerBtn"></div>
<!-- 创建一个 id 为“filePickerBtn”的空 div 元素，其样式在“image.css”中定义，可能用于触发文件选择操作（比如点击后弹出文件选择对话框），具体功能通过 JavaScript 结合 webuploader 库实现 -->
<div class="uploadBtn"><var id="lang_start_upload"></var></div>
<!-- 创建一个类名为“uploadBtn”的 div 元素，内部嵌套一个带有特定 id 的 var 元素，文本通过 JavaScript 动态设置，大概是用于显示“开始上传”之类的按钮文本，作为触发文件上传操作的按钮 -->
</div>
</div>
<div id="dndArea" class="placeholder">
<!-- 创建一个 id 为“dndArea”且类名为“placeholder”的 div 容器，可能用于展示文件拖放上传区域的占位提示信息等内容，样式在“image.css”中定义 -->
<div class="filePickerContainer">
<!-- 创建一个类名为“filePickerContainer”的 div 容器，可能用于进一步包装文件选择相关的元素或设置样式，具体功能和样式依赖“image.css”以及 JavaScript 操作 -->
<div id="filePickerReady"></div>
<!-- 创建一个 id 为“filePickerReady”的空 div 元素，其用途可能是在准备好文件选择功能（比如加载完相关资源等情况）时通过 JavaScript 进行一些操作或显示特定内容 -->
</div>
</div>
<ul class="filelist element-invisible">
<!-- 创建一个类名为“filelist”且添加了“element-invisible”类名（初始隐藏，后续根据情况显示）的无序列表（ul）元素，用于展示已选择的待上传文件列表等信息，样式在“image.css”中定义 -->
<li id="filePickerBlock" class="filePickerBlock"></li>
<!-- 创建一个 id 为“filePickerBlock”且类名为“filePickerBlock”的列表项（li）元素，可能用于表示文件选择相关的一个块元素（比如用于触发文件选择的占位块等），具体功能和样式在“image.css”以及 JavaScript 操作下体现 -->
</ul>
</div>
</div>
<!-- 在线图片 -->
<div id="online" class="panel">
<!-- 创建一个 id 为“online”且类名为“panel”的 div 容器，用于展示“在线图片”这个功能选项卡对应的具体内容，其样式在“image.css”中有对应定义 -->
<div id="imageList"><var id="lang_imgLoading"></var></div>
<!-- 创建一个 id 为“imageList”的 div 容器，内部嵌套一个带有特定 id 的 var 元素，文本通过 JavaScript 动态设置，推测初始可能显示图片加载中的提示信息，后续通过 JavaScript 获取并展示在线图片列表等内容 -->
</div>
<!-- 搜索图片 -->
<div id="search" class="panel">
<!-- 创建一个 id 为“search”且类名为“panel”的 div 容器，用于展示“搜索图片”这个功能选项卡对应的具体内容，其样式在“image.css”中有对应定义 -->
<div class="searchBar">
<!-- 创建一个类名为“searchBar”的 div 容器，可能用于放置图片搜索相关的输入框、按钮等元素，布局和样式在“image.css”中定义 -->
<input id="searchTxt" class="searchTxt text" type="text" />
<select id="searchType" class="searchType">
<option value="&s=4&z=0"></option>
<option value="&s=1&z=19"></option>
<option value="&s=2&z=0"></option>
<option value="&s=3&z=0"></option>
</select>
<input id="searchReset" type="button" />
<input id="searchBtn" type="button" />
</div>
<div id="searchList" class="searchList"><ul id="searchListUl"></ul></div>
</div>
<select id="searchType" class="searchType">
<option value="&s=4&z=0"></option>
<option value="&s=1&z=19"></option>
<option value="&s=2&z=0"></option>
<option value="&s=3&z=0"></option>
</select>
<input id="searchReset" type="button" />
<input id="searchBtn" type="button" />
</div>
<div id="searchList" class="searchList"><ul id="searchListUl"></ul></div>
</div>
</div>
</div>
<script type="text/javascript" src="image.js"></script>
</div>
</div>
<script type="text/javascript" src="image.js"></script>
</body>
</html>
</body>
</html>

19
public2/ueditor/dialogs/image/image.js
Unescape View File

@ -3,36 +3,30 @@
* Date: 14-04-08
* Time: 下午16:34
* 上传图片对话框逻辑代码,包括tab: 远程图片/上传图片/在线图片/搜索图片
* 以上部分是代码头部的注释信息，说明了代码的作者、创建日期和时间，以及简要介绍了代码的功能是用于处理上传图片对话框相关的逻辑，涵盖了不同功能的选项卡（tab）操作等内容。
*/
(function () {
// 创建一个立即执行的函数表达式（IIFE），用于创建一个独立的作用域，避免变量污染全局作用域，使得内部定义的变量和函数只能在这个闭包内部访问和使用，保证代码的模块化和独立性。
var remoteImage,
uploadImage,
onlineImage,
searchImage;
// 声明四个变量，分别用于存储不同类型图片相关的实例对象（后续可能会根据不同的 tab 操作创建对应的实例，比如远程图片实例、上传图片实例等），初始值都为 undefined，它们的具体实例化会在相应的逻辑中根据用户操作和条件进行。
window.onload = function () {
initTabs();
initAlign();
initButtons();
};
// 当页面加载完成（window.onload 事件触发）时，执行一个匿名函数，在这个匿名函数内依次调用三个函数：initTabs()、initAlign() 和 initButtons()，分别用于初始化选项卡（tab）相关操作、图片对齐相关操作以及按钮相关的操作，这几个函数的具体定义在后续代码中，整体实现了在页面加载后对上传图片对话框各功能模块的初始化设置。
/* 初始化tab标签 */
function initTabs() {
var tabs = $G('tabhead').children;
// 通过调用 $G 函数（可能是自定义的获取 DOM 元素的函数）获取页面中 id 为 'tabhead' 的元素，并获取其所有子元素（children），这些子元素就是各个 tab 标签对应的 DOM 节点，将它们存储在 tabs 变量中，用于后续遍历操作。
for (var i = 0; i < tabs.length; i++) {
domUtils.on(tabs[i], "click", function (e) {
var target = e.target || e.srcElement;
setTabFocus(target.getAttribute('data-content-id'));
});
}
// 循环遍历 tabs 数组中的每个 tab 标签元素，使用 domUtils.on 函数（可能是自定义的事件绑定工具函数）为每个 tab 标签元素绑定 'click' 点击事件监听器，当点击某个 tab 标签时，会执行一个匿名函数。在这个匿名函数内，首先获取当前点击的目标元素（e.target 或 e.srcElement，兼容不同浏览器获取事件触发元素的方式），然后调用 setTabFocus 函数，并传入当前点击的 tab 标签元素上自定义的 'data-content-id' 属性值作为参数，这个属性值可能对应着不同的功能板块（如 '远程图片'、'上传图片' 等），通过调用 setTabFocus 函数来实现切换显示对应功能板块的操作。
var img = editor.selection.getRange().getClosedNode();
if (img && img.tagName && img.tagName.toLowerCase() == 'img') {
@ -40,13 +34,11 @@
} else {
setTabFocus('upload');
}
// 获取编辑器（editor，可能是富文本编辑器对象，具体依赖代码上下文环境）当前选区范围（editor.selection.getRange()）内的闭合节点（getClosedNode()，可能是获取选区对应的 HTML 元素节点），判断如果该节点存在（img）并且节点的标签名（tagName）存在且转换为小写后是 'img'（即当前选区是一个图片元素），则调用 setTabFocus 函数并传入'remote' 参数，可能是默认显示远程图片相关功能板块；如果不符合上述条件（即选区不是图片元素或者不存在选区等情况），则调用 setTabFocus 函数并传入 'upload' 参数，默认显示上传图片相关功能板块，这部分代码实现了根据初始页面状态来决定默认显示哪个功能板块的逻辑。
}
/* 初始化tabbody */
function setTabFocus(id) {
if (!id) return;
// 如果传入的参数 id 为空（即没有传递有效的标识来确定要操作的功能板块），则直接从函数中返回，不执行后续操作，起到一个简单的参数校验作用。
if(!id) return;
var i, bodyId, tabs = $G('tabhead').children;
for (i = 0; i < tabs.length; i++) {
bodyId = tabs[i].getAttribute('data-content-id');
@ -58,10 +50,8 @@
domUtils.removeClasses($G(bodyId), 'focus');
}
}
// 首先通过 $G 函数获取页面中 id 为 'tabhead' 的元素的所有子元素（也就是各个 tab 标签元素），然后循环遍历这些 tab 标签元素，获取每个 tab 标签元素上自定义的 'data-content-id' 属性值（存储在 bodyId 变量中），用于和传入的参数 id 进行比较。如果某个 tab 标签元素的 'data-content-id' 值与传入的 id 相等，表示当前这个 tab 对应的功能板块需要被设置为选中状态，通过 domUtils.addClass 函数（可能是自定义的添加 CSS 类名的工具函数）为该 tab 标签元素和对应的功能板块（通过 $G(bodyId) 获取对应的 DOM 元素）添加 'focus' 类名（可能在 CSS 中有对应的样式定义，用于突出显示选中状态，比如改变背景色、字体颜色等样式）；如果不相等，表示不是当前要选中的功能板块，则通过 domUtils.removeClasses 函数（可能是自定义的移除 CSS 类名的工具函数）移除它们的 'focus' 类名，实现切换不同功能板块的选中状态以及对应的显示隐藏等样式改变操作。
switch (id) {
case'remote':
case 'remote':
remoteImage = remoteImage || new RemoteImage();
break;
case 'upload':
@ -73,14 +63,13 @@
onlineImage = onlineImage || new OnlineImage('imageList');
onlineImage.reset();
break;
case'search':
case 'search':
setAlign(editor.getOpt('imageManagerInsertAlign'));
searchImage = searchImage || new SearchImage();
break;
}
// 根据传入的参数 id 的不同值（对应不同的功能板块标识），执行不同的操作来初始化相应的图片相关实例对象或者进行其他设置。例如，当 id 为'remote' 时，如果 remoteImage 变量还未实例化（通过 || 短路运算符判断），则创建一个 RemoteImage 类（可能是自定义的用于处理远程图片相关逻辑的类）的实例赋值给 remoteImage 变量；同理，对于 'upload'、'online' 和'search' 等不同情况，分别进行相应的实例化操作、调用 setAlign 函数（用于设置图片对齐方式，具体功能看其函数定义）以及调用对应类的特定方法（如 OnlineImage 类的 reset 方法）等操作，整体实现了根据当前选中的功能板块来初始化相应的数据和实例对象，为后续各功能板块的具体操作做准备。
}
})();
/* 初始化onok事件 */
function initButtons() {

73
public2/ueditor/dialogs/insertframe/insertframe.html
Unescape View File

@ -46,71 +46,52 @@
</div>
<script type="text/javascript">
var iframe = editor._iframe;
// 获取编辑器（editor，可能是富文本编辑器对象，具体依赖代码上下文环境）中的 _iframe 属性值，存储在 iframe 变量中，这个 iframe 变量可能代表页面中的某个 iframe 元素，后续会基于它进行相关属性的获取和操作。
if (iframe) {
$G("url").value = iframe.getAttribute("src") || "";
// 如果 iframe 元素存在，通过 $G 函数（可能是自定义的获取 DOM 元素的函数）获取页面中 id 为 'url' 的输入框元素，并将其 value 属性（文本框的值）设置为 iframe 元素的'src' 属性值（如果'src' 属性存在），如果'src' 属性不存在则设置为空字符串，目的是将 iframe 元素已有的链接地址显示在输入框中，方便用户查看或修改。
$G("width").value = iframe.getAttribute("width") || iframe.style.width.replace("px", "") || "";
// 同样获取 id 为 'width' 的输入框元素，将其 value 属性设置为 iframe 元素的 'width' 属性值（如果存在），如果不存在则尝试获取其样式（style）中的 'width' 属性值，并去除单位 'px'（通过 replace 方法）后作为输入框的值，如果都不存在则设置为空字符串，用于将 iframe 元素的宽度值显示在输入框中供用户操作。
$G("height").value = iframe.getAttribute("height") || iframe.style.height.replace("px", "") || "";
// 与设置宽度值类似，获取 id 为 'height' 的输入框元素，设置其 value 属性为 iframe 元素的 'height' 属性值（若有）或去除样式中 'height' 属性值的 'px' 单位后的内容（若样式中有），若都没有则为空字符串，将 iframe 元素的高度值显示在输入框中。
if(iframe){
$G("url").value = iframe.getAttribute("src")||"";
$G("width").value = iframe.getAttribute("width")||iframe.style.width.replace("px","")||"";
$G("height").value = iframe.getAttribute("height") || iframe.style.height.replace("px","") ||"";
$G("scroll").checked = (iframe.getAttribute("scrolling") == "yes") ? true : false;
// 获取 id 为'scroll' 的复选框元素，根据 iframe 元素的'scrolling' 属性值是否为 'yes' 来设置复选框的选中状态（checked 属性），如果'scrolling' 属性值是 'yes' 则复选框选中（设置为 true），否则不选中（设置为 false），用于同步显示 iframe 元素滚动相关属性到复选框的选中状态。
$G("frameborder").checked = (iframe.getAttribute("frameborder") == "1") ? true : false;
// 获取 id 为 'frameborder' 的复选框元素，根据 iframe 元素的 'frameborder' 属性值是否为 '1' 来设置复选框的选中状态，若为 '1' 则选中（设置为 true），否则不选中（设置为 false），同步 iframe 元素边框相关属性到复选框的选中状态。
$G("align").value = iframe.align ? iframe.align : "";
// 获取 id 为 'align' 的元素（可能是下拉列表等用于选择对齐方式的元素），将其 value 属性设置为 iframe 元素的 'align' 属性值（如果存在），若不存在则设置为空字符串，同步 iframe 元素的对齐方式属性到对应的页面元素上。
}
function queding() {
var url = $G("url").value.replace(/^\s*|\s*$/ig, ""),
width = $G("width").value,
height = $G("height").value,
scroll = $G("scroll"),
frameborder = $G("frameborder"),
float = $G("align").value,
newIframe = editor.document.createElement("iframe"),
div;
// 定义一个名为 'queding'（可能表示确定操作的函数）的函数，在函数内部首先获取页面中各个相关元素的值或状态，如获取 id 为 'url' 的输入框去除首尾空白字符后的文本值（通过正则表达式替换空白字符），获取 id 为 'width' 和 'height' 的输入框的值，获取 id 为'scroll' 和 'frameborder' 的复选框元素本身（后续用于判断选中状态），获取 id 为 'align' 的元素的值（用于对齐方式相关操作），然后创建一个新的 iframe 元素（通过编辑器的 document 对象的 createElement 方法创建，editor 可能是富文本编辑器相关对象），并声明一个 div 变量（初始值为 undefined，后续会根据情况使用）。
if (!url) {
function queding(){
var url = $G("url").value.replace(/^\s*|\s*$/ig,""),
width = $G("width").value,
height = $G("height").value,
scroll = $G("scroll"),
frameborder = $G("frameborder"),
float = $G("align").value,
newIframe = editor.document.createElement("iframe"),
div;
if(!url){
alert(lang.enterAddress);
return false;
}
// 如果获取到的 url 值为空（即用户没有输入相关地址），则弹出一个提示框（alert），提示内容为 lang.enterAddress（可能是通过语言包获取的提示用户输入地址的文本信息，具体依赖代码中 lang 对象的定义），并返回 false，阻止后续操作执行，起到输入合法性校验的作用。
newIframe.setAttribute("src", /http:\/\/|https:\/\//ig.test(url) ? url : "http://" + url);
// 为新创建的 iframe 元素设置'src' 属性值，如果输入的 url 值通过正则表达式检测（判断是否以 'http://' 或 'https://' 开头）符合网址格式则直接使用该 url 值作为'src' 属性值，否则在 url 前面拼接 'http://' 后作为'src' 属性值，确保设置的网址格式正确。
/^[1-9]+[.]?\d*$/g.test(width) ? newIframe.setAttribute("width", width) : "";
// 通过正则表达式判断输入的 width 值是否符合数字格式（以非 0 数字开头，后面可跟小数点和数字），如果符合则为新的 iframe 元素设置 'width' 属性值为该 width 值，否则不进行任何操作（通过三元表达式的短路特性实现），用于设置 iframe 元素的宽度属性，保证设置的值是合理的数字格式。
/^[1-9]+[.]?\d*$/g.test(height) ? newIframe.setAttribute("height", height) : "";
// 与设置宽度属性类似，通过正则表达式验证 height 值是否符合数字格式，符合则为新 iframe 元素设置 'height' 属性值为该 height 值，否则不操作，用于设置 iframe 元素的高度属性。
scroll.checked ? newIframe.setAttribute("scrolling", "yes") : newIframe.setAttribute("scrolling", "no");
// 根据 id 为'scroll' 的复选框的选中状态（checked 属性）来为新 iframe 元素设置'scrolling' 属性值，如果复选框选中则设置为 'yes'，表示开启滚动，否则设置为 'no'，表示关闭滚动。
frameborder.checked ? newIframe.setAttribute("frameborder", "1", 0) : newIframe.setAttribute("frameborder", "0", 0);
// 根据 id 为 'frameborder' 的复选框的选中状态来为新 iframe 元素设置 'frameborder' 属性值，如果选中则设置为 '1'（可能表示显示边框），否则设置为 '0'（可能表示不显示边框），这里后面两个参数 '0' 的具体作用可能依赖于 setAttribute 函数的具体实现（可能是一些浏览器兼容性相关的额外参数等情况）。
float ? newIframe.setAttribute("align", float) : newIframe.setAttribute("align", "");
// 如果获取到的 float 值（即对齐方式相关的值）存在（不为空字符串等情况），则为新 iframe 元素设置 'align' 属性值为该 float 值，用于设置对齐方式，否则设置为空字符串，表示不设置特定的对齐方式。
if (iframe) {
iframe.parentNode.insertBefore(newIframe, iframe);
newIframe.setAttribute("src",/http:\/\/|https:\/\//ig.test(url) ? url : "http://"+url);
/^[1-9]+[.]?\d*$/g.test( width ) ? newIframe.setAttribute("width",width) : "";
/^[1-9]+[.]?\d*$/g.test( height ) ? newIframe.setAttribute("height",height) : "";
scroll.checked ? newIframe.setAttribute("scrolling","yes") : newIframe.setAttribute("scrolling","no");
frameborder.checked ? newIframe.setAttribute("frameborder","1",0) : newIframe.setAttribute("frameborder","0",0);
float ? newIframe.setAttribute("align",float) : newIframe.setAttribute("align","");
if(iframe){
iframe.parentNode.insertBefore(newIframe,iframe);
domUtils.remove(iframe);
} else {
}else{
div = editor.document.createElement("div");
div.appendChild(newIframe);
editor.execCommand("inserthtml", div.innerHTML);
editor.execCommand("inserthtml",div.innerHTML);
}
// 如果原来的 iframe 元素（之前获取的那个）存在，则通过其父节点（parentNode）的 insertBefore 方法将新创建的 iframe 元素插入到原来 iframe 元素的前面，然后通过 domUtils.remove 函数（可能是自定义的移除 DOM 元素的函数）移除原来的 iframe 元素，实现替换原来的 iframe 元素的操作；如果原来的 iframe 元素不存在，则创建一个新的 div 元素，将新创建的 iframe 元素添加到 div 元素内部（通过 appendChild 方法），然后通过编辑器的 execCommand 方法（可能是执行特定编辑命令的方法）将 div 元素的 innerHTML（包含新 iframe 元素的 HTML 代码）插入到编辑器内容中，实现添加新 iframe 元素的操作。
editor._iframe = null;
dialog.close();
// 将编辑器的 _iframe 属性设置为 null（可能是表示当前没有正在操作的 iframe 元素了等相关业务逻辑），然后关闭对话框（dialog，可能是页面上弹出的用于操作的对话框，具体关闭操作依赖 dialog 对象的实现），完成整个操作流程并关闭相关界面。
}
dialog.onok = queding;
// 将对话框（dialog）的 'onok' 事件（可能表示用户点击确定按钮的事件）绑定到 'queding' 函数上，当用户在对话框中点击确定按钮时，就会执行 'queding' 函数内的一系列操作，实现相应的功能逻辑。
$G("url").onkeydown = function (evt) {
$G("url").onkeydown = function(evt){
evt = evt || event;
if (evt.keyCode == 13) {
if(evt.keyCode == 13){
queding();
}
};
// 为页面中 id 为 'url' 的输入框元素绑定 'onkeydown' 键盘按下事件监听器，当有键盘按键按下时，首先处理不同浏览器获取事件对象的兼容性问题（evt = evt || event，兼容 IE 和其他标准浏览器获取事件对象的方式），然后判断按下的按键的键码（keyCode）是否为 13（回车键的键码），如果是回车键按下，则调用 'queding' 函数，实现用户在输入框中按下回车键时等同于点击确定按钮的功能，方便用户操作。
$focus($G("url"));
$focus($G( "url" ));
</script>
</body>

102
public2/ueditor/dialogs/internal.js
Unescape View File

@ -1,109 +1,81 @@
(function () {
// 获取 `window.parent` 对象，通常在页面通过 `iframe` 嵌套的情况下，`window.parent` 指向包含当前 `iframe` 的父页面的 `window` 对象，后续可能会基于这个父页面的环境获取一些全局可用的对象、变量等资源，用于当前 `iframe` 页面内的功能实现。
var parent = window.parent;
// 获取 `dialog` 对象，通过父页面（`parent`）的 `$EDITORUI` 对象（从命名推测可能是编辑器相关的 UI 管理对象，存储了与编辑器界面相关的各种组件、元素等信息，具体结构和功能依赖整体应用的设计），根据当前 `iframe` 的 `id`（通过 `window.frameElement.id` 获取 `iframe` 的 `id`，并使用正则表达式替换掉末尾的 `_iframe` 字符串）来获取对应的 `dialog` 对象，这个 `dialog` 对象可能用于弹出对话框、交互提示等相关功能，在编辑器相关操作中起到与用户交互的作用。
dialog = parent.$EDITORUI[window.frameElement.id.replace(/_iframe$/, '')];
// 获取当前打开 `dialog` 的编辑器实例对象，将 `dialog` 对象的 `editor` 属性值赋给 `editor` 变量，这个 `editor` 对象可能包含了各种文本编辑相关的方法、属性，用于操作编辑器中的内容，比如插入文本、图片，执行各种编辑命令等功能，是整个编辑器功能实现的核心对象之一。
//dialog对象
dialog = parent.$EDITORUI[window.frameElement.id.replace( /_iframe$/, '' )];
//当前打开dialog的编辑器实例
editor = dialog.editor;
UE = parent.UE;
// 获取父页面中的 `UE` 对象，从命名推测 `UE` 可能是整个应用（可能是一个富文本编辑器应用）的全局核心对象，包含了众多功能模块相关的属性、方法，比如 `dom`（用于操作 DOM 元素相关功能）、`utils`（工具函数集合）、`browser`（用于检测浏览器相关信息）等，后续通过它来获取其他细分功能的对象引用。
domUtils = UE.dom.domUtils;
// 从 `UE` 对象的 `dom` 属性（可能是与 DOM 元素操作相关的子对象）下获取 `domUtils` 对象，这个对象通常包含了一系列用于操作 DOM 元素的工具函数，比如创建元素、添加删除类名、获取计算样式等功能相关的函数，方便在代码中对页面元素进行各种操作。
utils = UE.utils;
// 获取 `UE` 对象的 `utils` 对象，它可能是一个工具函数集合，包含了诸如加载文件、对象扩展、字符串处理等各种通用的工具函数，用于辅助其他功能模块实现一些常见的操作逻辑。
browser = UE.browser;
// 获取 `UE` 对象的 `browser` 对象，这个对象可能用于检测浏览器的相关信息，比如浏览器类型（是 `IE`、`Chrome`、`Firefox` 等）、浏览器版本号等，以便在代码中针对不同浏览器进行兼容性处理或者执行特定于某些浏览器的功能逻辑。
ajax = UE.ajax;
// 获取 `UE` 对象的 `ajax` 对象，它可能是用于实现异步 HTTP 请求（如 `XMLHttpRequest` 相关功能）的对象，通过它可以向服务器发送请求获取数据、提交表单等操作，在与服务器端交互获取或更新编辑器相关内容等场景中会用到。
$G = function (id) {
return document.getElementById(id)
$G = function ( id ) {
return document.getElementById( id )
};
// 定义一个名为 `$G` 的函数，它是对 `document.getElementById` 方法的简单封装，用于根据传入的元素 `id` 获取对应的页面 DOM 元素，方便在代码中更简洁地获取元素引用，后续代码中会多次使用这个函数来获取特定 `id` 的元素进行操作。
// `$focus` 函数用于设置页面元素的焦点，通过传入一个节点元素（`node`），根据浏览器类型（判断是否为 `IE` 浏览器）来采用不同的方式设置焦点。如果是 `IE` 浏览器，使用 `createTextRange` 方法创建一个文本范围对象（`r`），调用 `collapse` 方法将光标移动到文本末尾（`false` 参数表示移动到末尾，`true` 表示移动到开头），然后调用 `select` 方法选中该文本范围，实现设置焦点的效果；如果不是 `IE` 浏览器，则直接调用节点元素的 `focus` 方法来设置焦点，通过 `setTimeout` 函数在下次事件循环开始时（延迟时间为 0）执行这个设置焦点的操作，确保操作在合适的时机执行。
$focus = function (node) {
setTimeout(function () {
if (browser.ie) {
//focus元素
$focus = function ( node ) {
setTimeout( function () {
if ( browser.ie ) {
var r = node.createTextRange();
r.collapse(false);
r.collapse( false );
r.select();
} else {
node.focus()
}
}, 0)
}, 0 )
};
// 使用 `utils` 对象的 `loadFile` 函数（具体功能依赖其内部实现，但从命名推测是用于加载文件资源到页面中）向页面中加载一个样式表文件。传入 `document` 对象（表示当前页面的文档对象）以及一个配置对象，配置对象中指定了要加载的文件的 `href`（文件路径，通过获取编辑器的 `options` 对象中的 `themePath`（主题路径相关配置）、`theme`（当前主题名称）以及添加一个随机数作为缓存破坏参数，拼接成完整的样式表文件路径）、`tag`（设置为 `"link"`，表示通过 `<link>` 标签的方式加载样式表文件）、`type`（设置为 `"text/css"`，表明文件类型为 CSS 样式表）、`rel`（设置为 `"stylesheet"`，表示是样式表的关联关系）等属性，实现动态加载特定的样式表文件到页面，用于应用相应的样式规则，可能是根据当前编辑器的主题来加载对应的样式表。
utils.loadFile(document, {
href: editor.options.themePath + editor.options.theme + "/dialogbase.css?cache=" + Math.random(),
tag: "link",
type: "text/css",
rel: "stylesheet"
utils.loadFile(document,{
href:editor.options.themePath + editor.options.theme + "/dialogbase.css?cache="+Math.random(),
tag:"link",
type:"text/css",
rel:"stylesheet"
});
lang = editor.getLang(dialog.className.split("-")[2]);
// 通过 `editor` 对象的 `getLang` 方法（可能是根据传入的参数获取对应的语言相关配置对象，用于实现多语言功能，根据不同语言环境展示不同的文本内容等），传入 `dialog.className`（`dialog` 对象的类名）通过字符串分割（以 `-` 为分隔符）获取第三个元素（从索引为 2 的位置获取，推测可能是与语言标识相关的部分，具体格式依赖整体应用的命名约定）作为参数，获取对应的语言配置对象，并赋值给 `lang` 变量，后续会根据这个 `lang` 对象来更新页面中的静态资源相关元素的文本、样式等内容，实现多语言展示效果。
if (lang) {
domUtils.on(window, 'load', function () {
// 使用 `domUtils` 对象的 `on` 函数（可能是用于添加事件监听器的函数，类似于原生的 `addEventListener` 方法，但可能有更多自定义的逻辑处理）为 `window` 对象的 `load` 事件（该事件在页面所有资源加载完成后触发）添加事件处理函数，在页面加载完成后执行以下操作，用于根据语言配置更新页面中的静态资源相关元素内容。
lang = editor.getLang(dialog.className.split( "-" )[2]);
if(lang){
domUtils.on(window,'load',function () {
var langImgPath = editor.options.langPath + editor.options.lang + "/images/";
// 构建一个 `langImgPath` 变量，通过获取编辑器的 `options` 对象中的 `langPath`（语言相关的路径前缀）和 `lang`（当前语言标识）以及固定的 `"/images/"` 拼接而成，这个路径用于后续查找和替换与语言相关的图片资源路径等操作，确保在不同语言环境下能正确加载对应的图片资源。
// 遍历 `lang` 对象的 `static` 属性（从命名推测可能是存储了各种静态资源相关配置信息的对象，比如页面中固定的文本内容、图片引用、元素样式等与语言相关的配置，每个属性对应一个页面元素的相关配置）中的所有属性（通过 `for...in` 循环遍历对象的可枚举属性），获取每个属性对应的配置信息，并根据配置内容和元素类型进行相应的更新操作。
for (var i in lang["static"]) {
var dom = $G(i);
if (!dom) continue;
// 通过 `$G` 函数获取 `id` 为当前循环属性名（`i`）的页面元素，赋值给 `dom` 变量，如果获取到的元素不存在（返回 `null`），则直接跳过本次循环，继续下一个属性的处理，确保只对存在的页面元素进行操作。
//针对静态资源
for ( var i in lang["static"] ) {
var dom = $G( i );
if(!dom) continue;
var tagName = dom.tagName,
content = lang["static"][i];
// 获取元素的标签名（通过 `tagName` 属性），以及对应的 `lang["static"][i]` 配置对象（包含了该元素根据语言配置的文本内容、样式、属性等信息），用于后续根据元素类型和配置内容进行不同的更新操作。
if (content.src) {
// 如果配置对象中存在 `src` 属性（通常表示图片元素的资源路径相关属性，意味着该元素是图片相关元素或者引用了外部资源等情况），则执行以下操作。
if(content.src){
//clone
content = utils.extend({}, content, false);
// 使用 `utils.extend` 函数（可能是自定义的用于合并对象属性的函数，将第一个对象的属性复制到第二个对象上，如果有同名属性则覆盖，这里将 `content` 对象复制一份，避免直接修改原始配置对象，可能影响其他地方的使用）创建一个新的 `content` 对象副本，传入 `false` 参数可能是控制合并的方式（具体作用依赖 `utils.extend` 函数内部实现），然后对副本进行操作。
content = utils.extend({},content,false);
content.src = langImgPath + content.src;
// 将新的 `content` 对象副本的 `src` 属性值更新为 `langImgPath`（前面构建的语言相关图片资源路径前缀）与原始 `src` 属性值（图片文件名等）拼接后的字符串，实现根据语言环境替换图片资源路径的效果，确保在不同语言下能正确加载对应的图片。
}
if (content.style) {
content = utils.extend({}, content, false);
content.style = content.style.replace(/url\s*\(/g, "url(" + langImgPath)
// 如果配置对象中存在 `style` 属性（表示元素的样式相关配置信息），同样先复制一份 `content` 对象，然后使用字符串替换方法 `replace`，将样式字符串中所有出现的 `url(`（匹配 `url` 后面跟着空格和左括号的情况，用于处理样式中引用图片资源的路径部分，确保能准确替换）替换为 `url(` 加上 `langImgPath`（语言相关图片资源路径前缀），实现将样式中引用的图片资源路径替换为对应语言环境下的正确路径，使样式中的图片能正确显示。
if(content.style){
content = utils.extend({},content,false);
content.style = content.style.replace(/url\s*\(/g,"url(" + langImgPath)
}
switch (tagName.toLowerCase()) {
switch ( tagName.toLowerCase() ) {
case "var":
dom.parentNode.replaceChild(document.createTextNode(content), dom);
dom.parentNode.replaceChild( document.createTextNode( content ), dom );
break;
// 根据元素的标签名（转换为小写后进行判断）来执行不同的更新操作。如果元素标签名是 `"var"`（可能是用于显示特定文本内容的占位元素，比如用于显示多语言相关的变量文本等情况），则通过 `dom.parentNode.replaceChild` 方法（在元素的父节点上，用一个新创建的文本节点（使用 `document.createTextNode` 方法创建，内容为 `content`，即语言配置中的对应文本内容）替换当前元素，实现更新元素显示文本内容的效果。
case "select":
var ops = dom.options;
for (var j = 0, oj; oj = ops[j]; ) {
for ( var j = 0, oj; oj = ops[j]; ) {
oj.innerHTML = content.options[j++];
}
for (var p in content) {
p!= "options" && dom.setAttribute(p, content[p]);
for ( var p in content ) {
p != "options" && dom.setAttribute( p, content[p] );
}
break;
// 如果元素标签名是 `"select"`（下拉选择框元素），先获取其所有的 `<option>` 选项元素（通过 `dom.options` 获取），然后遍历这些选项元素，将每个选项的 `innerHTML`（显示的文本内容）更新为 `content.options` 数组（语言配置中对应下拉框选项的文本内容数组）中相应位置的元素内容；接着遍历 `content` 对象的所有属性，对于除了 `"options"` 属性之外的其他属性（通过判断属性名是否不等于 `"options"`），使用 `dom.setAttribute` 方法（为元素设置属性）将属性设置到下拉框元素上，实现更新下拉框的选项文本以及其他相关属性的效果，比如设置 `selected` 属性来默认选中某个选项等情况。
default:
domUtils.setAttributes(dom, content);
// 如果元素标签名不属于上述两种情况，则使用 `domUtils` 对象的 `setAttributes` 函数（可能是用于批量设置元素多个属性的函数，根据传入的配置对象中的属性名和属性值来设置元素相应的属性）将 `content` 对象中的属性设置到元素上，实现更新元素各种属性（比如 `class`、`id`、`style` 等属性根据语言配置进行更新）的效果。
default :
domUtils.setAttributes( dom, content);
}
}
});
} );
}
})();

227
public2/ueditor/dialogs/link/link.html
Unescape View File

@ -1,181 +1,132 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<!-- 这里页面标题为空，通常可设置一个有意义的标题，用于在浏览器标题栏展示页面相关信息 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 通过 HTTP 头部等价属性（http-equiv）设置页面内容类型为 HTML 文本格式，字符编码为 UTF-8，确保页面能正确显示各种字符 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="../internal.js"></script>
<!-- 引入相对路径为“../internal.js”的 JavaScript 文件，该文件可能包含页面会用到的自定义函数、变量以及通用业务逻辑等代码，具体功能依赖其内部定义 -->
<style type="text/css">
* {
margin: 0;
padding: 0;
color: #838383;
}
/* 通配符选择器（*）设置所有元素的外边距（margin）和内边距（padding）为 0，文本颜色为浅灰色（#838383），用于统一页面元素的基本样式布局和文字颜色风格 */
table {
font-size: 12px;
margin: 10px;
line-height: 30px;
}
/* 针对 table 元素设置字体大小为 12 像素，外边距为 10 像素（在页面中与周围元素留出一定间隔），行高为 30 像素，控制表格内文本的显示样式和整体布局位置 */
.txt {
width: 300px;
height: 21px;
line-height: 21px;
border: 1px solid #d7d7d7;
}
/* 定义类名为 'txt' 的元素样式，设置宽度为 300 像素，高度为 21 像素，行高与高度相同（使文本垂直居中），边框为 1 像素宽的浅灰色（#d7d7d7）实线，用于具有此类名的输入框等元素呈现统一的外观样式 */
*{margin:0;padding:0;color: #838383;}
table{font-size: 12px;margin: 10px;line-height: 30px}
.txt{width:300px;height:21px;line-height:21px;border:1px solid #d7d7d7;}
</style>
</head>
<body>
<table>
<!-- 创建一个表格元素，用于以表格形式布局页面内相关输入框、文本标签等元素 -->
<tr>
<td><label for="text"> <var id="lang_input_text"></var></label></td>
<td><input class="txt" id="text" type="text" disabled="true" /></td>
<td><input class="txt" id="text" type="text" disabled="true"/></td>
</tr>
<!-- 创建表格的一行（tr），该行包含两个单元格（td）。第一个单元格放置一个 label 标签，通过 'for' 属性关联到后面 id 为 'text' 的输入框元素，label 内部嵌套一个带有特定 id 的 var 元素，其文本内容可能通过 JavaScript 动态设置，推测用于显示与文本相关的提示信息；第二个单元格放置一个 id 为 'text'、类名为 'txt' 的文本输入框元素，并且初始设置为禁用状态（disabled="true"） -->
<tr>
<td><label for="href"> <var id="lang_input_url"></var></label></td>
<td><input class="txt" id="href" type="text" /></td>
</tr>
<!-- 与上一行结构类似，这行的 label 元素通过 'for' 属性关联到 id 为 'href' 的输入框，var 元素文本用于显示与网址（url）相关的提示信息，后面的输入框（id 为 'href'）用于用户输入网址，且未设置禁用状态 -->
<tr>
<td><label for="title"> <var id="lang_input_title"></var></label></td>
<td><input class="txt" id="title" type="text" /></td>
<td><input class="txt" id="title" type="text"/></td>
</tr>
<!-- 同样结构的一行，label 关联到 id 为 'title' 的输入框，var 元素提示与标题相关信息，输入框用于输入标题内容 -->
<tr>
<td colspan="2">
<label for="target"><var id="lang_input_target"></var></label>
<input id="target" type="checkbox" />
</td>
<td colspan="2">
<label for="target"><var id="lang_input_target"></var></label>
<input id="target" type="checkbox"/>
</td>
</tr>
<!-- 这行两个单元格合并（colspan="2"），放置一个 label 元素通过 'for' 属性关联到后面的复选框（checkbox）元素，var 元素提示与目标（可能是链接打开的目标窗口等相关）信息，复选框用于用户勾选相关选项，具体功能看后续 JavaScript 代码逻辑 -->
<tr>
<td colspan="2" id="msg"></td>
</tr>
<!-- 又是两个单元格合并的一行，包含一个 id 为'msg' 的空单元格，从后续 JavaScript 代码可知，该单元格用于显示一些提示信息（如网址格式相关提示等） -->
</table>
<script type="text/javascript">
<script type="text/javascript">
editor.setOpt('allowLinkProtocols', ['http:', 'https:', '#', '/', 'ftp:', 'mailto:', 'tel:']);
// 通过编辑器（editor，可能是富文本编辑器相关对象，具体依赖代码上下文环境）的 setOpt 方法设置一个名为 'allowLinkProtocols' 的选项，其值为一个包含多种协议（如 'http:'、'https:' 等）的数组，用于限定允许的链接协议类型，后续会根据此进行链接网址合法性校验等操作。
var allowLinkProtocols = editor.getOpt('allowLinkProtocols');
// 获取编辑器中设置的 'allowLinkProtocols' 选项的值，存储在 allowLinkProtocols 变量中，方便后续代码多次使用该允许的协议列表进行判断。
var range = editor.selection.getRange(),
link = range.collapsed ? editor.queryCommandValue("link") : editor.selection.getStart(),
url,
text = $G('text'),
rangeLink = domUtils.findParentByTagName(range.getCommonAncestor(), 'a', true),
orgText;
// 获取编辑器当前选区的范围（通过 editor.selection.getRange() 方法）存储在 range 变量中；根据选区是否折叠（collapsed 属性）来决定获取不同的链接相关信息，如果选区折叠，通过 editor.queryCommandValue("link") 获取链接相关的值（具体含义看编辑器对应命令实现），否则获取选区开始位置（editor.selection.getStart()）作为 link 值；声明 url 变量（初始未赋值，后续用于存储链接网址等信息）；通过 $G 函数（可能是自定义的获取 DOM 元素的函数）获取页面中 id 为 'text' 的元素存储在 text 变量中；通过 domUtils.findParentByTagName 函数（可能是自定义的根据标签名查找父元素的函数）查找选区共同祖先元素中最近的 'a' 标签元素（链接元素），并将结果存储在 rangeLink 变量中；声明 orgText 变量（初始未赋值，后续用于存储原始文本等相关信息）。
editor.setOpt('allowLinkProtocols', ['http:', 'https:', '#', '/', 'ftp:', 'mailto:', 'tel:']);
var allowLinkProtocols = editor.getOpt('allowLinkProtocols');
link = domUtils.findParentByTagName(link, "a", true);
// 再次调用 domUtils.findParentByTagName 函数，对之前获取的 link 值（可能是元素或相关对象）进一步查找其最近的 'a' 标签父元素，更新 link 变量，确保获取到准确的链接元素（如果存在的话），用于后续对链接相关属性的操作。
var range = editor.selection.getRange(),
link = range.collapsed ? editor.queryCommandValue( "link" ) : editor.selection.getStart(),
url,
text = $G('text'),
rangeLink = domUtils.findParentByTagName(range.getCommonAncestor(),'a',true),
orgText;
if (link) {
url = utils.html(link.getAttribute('_href') || link.getAttribute('href', 2));
// 如果找到了链接元素（link 存在），通过 utils.html 函数（可能是自定义的处理 HTML 相关属性值的函数）获取链接元素的 '_href' 属性值（可能是自定义属性用于存储链接网址等情况），如果不存在则获取 'href' 属性值（标准的链接网址属性），将获取到的值存储在 url 变量中，用于后续操作。
link = domUtils.findParentByTagName( link, "a", true );
if (rangeLink === link && !link.getElementsByTagName('img').length) {
text.removeAttribute('disabled');
orgText = text.value = link[browser.ie ? 'innerText' : 'textContent'];
} else {
text.setAttribute('disabled', 'true');
text.value = lang.validLink;
}
// 判断如果之前获取的 rangeLink（选区对应的链接元素）与当前的 link（找到的链接元素）是同一个，并且链接元素内部不包含图片元素（通过 getElementsByTagName 方法判断 'img' 元素数量为 0），则将页面中 id 为 'text' 的输入框元素的 'disabled' 属性移除（即启用该输入框），并将链接元素的文本内容（根据浏览器类型，通过 'innerText' 或 'textContent' 属性获取）赋值给输入框的 value 属性，同时存储该原始文本内容到 orgText 变量中；否则（不符合上述条件），将输入框设置为禁用状态，并设置其 value 属性为 lang.validLink（可能是通过语言包获取的提示文本，用于显示在输入框中表示当前链接相关的某种特定状态）。
if(link){
url = utils.html(link.getAttribute( '_href' ) || link.getAttribute( 'href', 2 ));
} else {
if (range.collapsed) {
text.removeAttribute('disabled');
text.value = '';
} else {
text.setAttribute('disabled', 'true');
text.value = lang.validLink;
}
// 如果没有找到链接元素（link 不存在），再根据选区是否折叠进行不同操作。如果选区折叠，启用页面中 id 为 'text' 的输入框（移除 'disabled' 属性）并将其 value 属性设置为空字符串；如果选区未折叠，则禁用该输入框，并将其 value 属性设置为 lang.validLink（提示文本）。
if(rangeLink === link && !link.getElementsByTagName('img').length){
text.removeAttribute('disabled');
orgText = text.value = link[browser.ie ? 'innerText':'textContent'];
}else{
text.setAttribute('disabled','true');
text.value = lang.validLink;
}
$G("title").value = url ? link.title : "";
$G("href").value = url ? url : '';
$G("target").checked = url && link.target == "_blank" ? true : false;
$focus($G("href"));
// 通过 $G 函数分别获取页面中 id 为 'title'、'href' 和 'target' 的元素，并根据前面获取到的 url 值以及链接元素（link）的相关属性进行赋值操作。如果 url 存在，将链接元素的 'title' 属性值赋给 id 为 'title' 的输入框的 value 属性，将 url 值赋给 id 为 'href' 的输入框的 value 属性；根据 url 是否存在以及链接元素的 'target' 属性是否为 '_blank' 来设置 id 为 'target' 的复选框的选中状态（checked 属性）；最后通过 $focus 函数（可能是自定义的设置焦点的函数）将焦点设置到 id 为 'href' 的输入框上，方便用户输入操作。
function handleDialogOk() {
var href = $G('href').value.replace(/^\s+|\s+$/g, '');
// 定义一个名为 'handleDialogOk' 的函数，在函数内部首先获取页面中 id 为 'href' 的输入框元素去除首尾空白字符后的文本值（通过正则表达式替换空白字符），存储在 href 变量中，用于后续对输入的网址进行合法性校验等操作。
if (href) {
if (!hrefStartWith(href, allowLinkProtocols)) {
href = "http://" + href;
}
// 如果获取到的 href 值不为空，调用 hrefStartWith 函数（后续定义）判断输入的网址是否以允许的链接协议（allowLinkProtocols 中定义的协议）开头，如果不满足，则在网址前面拼接 'http://'，确保网址格式符合限定的协议要求。
var obj = {
'href': href,
'target': $G("target").checked ? "_blank" : '_self',
'title': $G("title").value.replace(/^\s+|\s+$/g, ''),
'_href': href
};
// 创建一个包含多个属性的对象 obj，用于存储链接相关的信息，其中 'href' 属性为经过处理后的网址，'target' 属性根据页面中 id 为 'target' 的复选框的选中状态来确定是 '_blank'（新窗口打开）还是 '_self'（在当前窗口打开），'title' 属性为去除首尾空白字符后的 id 为 'title' 的输入框的 value 值，'_href' 属性与 'href' 属性相同（可能用于特定的编辑器内部处理等情况）。
// 修改链接内容的情况太特殊了，所以先做到这里了
// todo:情况多的时候，做到command里
if (orgText && text.value != orgText) {
link[browser.ie ? 'innerText' : 'textContent'] = obj.textValue = text.value;
range.selectNode(link).select();
}
// 如果 orgText 存在（即之前有原始文本记录）并且页面中 id 为 'text' 的输入框当前值与原始文本不同，表示用户修改了链接的文本内容，根据浏览器类型（通过 browser.ie 判断是否为 IE 浏览器）将输入框的当前值设置为链接元素的文本内容（通过 'innerText' 或 'textContent' 属性），同时将输入框的值也赋给 obj 对象的 textValue 属性（可能用于后续统一传递数据等情况），然后通过选区范围（range）的 selectNode 和 select 方法重新选中该链接元素，使编辑后的链接文本在编辑器中处于选中状态，方便用户查看效果等。
if (range.collapsed) {
obj.textValue = text.value;
}
// 如果选区是折叠状态，将页面中 id 为 'text' 的输入框的值赋给 obj 对象的 textValue 属性，可能用于在这种特殊情况下也传递相关文本信息到后续操作中。
editor.execCommand('link', utils.clearEmptyAttrs(obj));
dialog.close();
// 通过编辑器的 execCommand 方法执行 'link' 命令（具体功能依赖编辑器对该命令的实现），并传入经过 utils.clearEmptyAttrs 函数（可能是自定义的清除对象空属性的函数）处理后的 obj 对象作为参数，用于根据用户输入和设置更新链接相关属性等操作，最后关闭对话框（dialog，可能是页面上弹出用于操作链接的对话框，具体关闭操作依赖 dialog 对象的实现），完成整个链接编辑操作流程。
}
}else{
if(range.collapsed){
text.removeAttribute('disabled');
text.value = '';
}else{
text.setAttribute('disabled','true');
text.value = lang.validLink;
}
dialog.onok = handleDialogOk;
// 将对话框（dialog）的 'onok' 事件（可能表示用户点击确定按钮的事件）绑定到 'handleDialogOk' 函数上，当用户在对话框中点击确定按钮时，就会执行 'handleDialogOk' 函数内的一系列操作，实现相应的链接编辑及保存等功能逻辑。
$G('href').onkeydown = $G('title').onkeydown = function (evt) {
evt = evt || window.event;
if (evt.keyCode == 13) {
handleDialogOk();
return false;
}
$G("title").value = url ? link.title : "";
$G("href").value = url ? url: '';
$G("target").checked = url && link.target == "_blank" ? true : false;
$focus($G("href"));
function handleDialogOk(){
var href =$G('href').value.replace(/^\s+|\s+$/g, '');
if(href){
if(!hrefStartWith(href, allowLinkProtocols)) {
href = "http://" + href;
}
};
// 同时为页面中 id 为 'href' 和 'title' 的输入框元素绑定 'onkeydown' 键盘按下事件监听器，当有键盘按键按下时，首先处理不同浏览器获取事件对象的兼容性问题（evt = evt || window.event，兼容 IE 和其他标准浏览器获取事件对象的方式），然后判断按下的按键的键码（keyCode）是否为 13（回车键的键码），如果是回车键按下，则调用 'handleDialogOk' 函数，实现用户在这两个输入框中按下回车键时等同于点击确定按钮的功能，方便用户操作，并且返回 false 阻止默认的回车键行为（比如表单提交等默认行为）。
$G('href').onblur = function () {
if (!hrefStartWith(this.value, allowLinkProtocols)) {
$G("msg").innerHTML = "<span style='color: red'>" + lang.httpPrompt + "</span>";
} else {
$G("msg").innerHTML = "";
var obj = {
'href' : href,
'target' : $G("target").checked ? "_blank" : '_self',
'title' : $G("title").value.replace(/^\s+|\s+$/g, ''),
'_href':href
};
//修改链接内容的情况太特殊了，所以先做到这里了
//todo:情况多的时候，做到command里
if(orgText && text.value != orgText){
link[browser.ie ? 'innerText' : 'textContent'] = obj.textValue = text.value;
range.selectNode(link).select()
}
};
// 为页面中 id 为 'href' 的输入框元素绑定 'onblur' 失去焦点事件监听器，当输入框失去焦点时，调用 hrefStartWith 函数判断当前输入框的值（通过 this.value 获取）是否以允许的链接协议开头，如果不满足，则将页面中 id 为'msg' 的元素的 innerHTML 属性设置为一个包含红色字体提示文本（lang.httpPrompt，可能是通过语言包获取的提示网址格式错误等相关信息）的 span 元素代码，用于在页面上显示错误提示；如果满足协议要求，则清空'msg' 元素的 innerHTML，即清除提示信息。
function hrefStartWith(href, arr) {
href = href.replace(/^\s+|\s+$/g, '');
for (var i = 0, ai; ai = arr[i++];) {
if (href.indexOf(ai) == 0) {
return true;
}
if(range.collapsed){
obj.textValue = text.value;
}
editor.execCommand('link',utils.clearEmptyAttrs(obj) );
dialog.close();
}
}
dialog.onok = handleDialogOk;
$G('href').onkeydown = $G('title').onkeydown = function(evt){
evt = evt || window.event;
if (evt.keyCode == 13) {
handleDialogOk();
return false;
}
// 定义一个名为 'hrefStartWith' 的函数，用于判断输入的网址（href 参数）是否以给定数组（arr 参数，可能是允许的链接协议数组）中的某个协议开头。函数内部首先去除网址的首尾空白字符，然后循环遍历数组中的每个协议元素，通过 indexOf 方法判断网址是否以该协议开头，如果找到匹配的协议开头则返回 true，循环结束后都未找到匹配则返回 false，用于网址合法性校验相关操作，判断网址格式是否符合限定的协议要求。
</script>
};
$G('href').onblur = function(){
if(!hrefStartWith(this.value, allowLinkProtocols)){
$G("msg").innerHTML = "<span style='color: red'>"+lang.httpPrompt+"</span>";
}else{
$G("msg").innerHTML = "";
}
};
function hrefStartWith(href,arr){
href = href.replace(/^\s+|\s+$/g, '');
for(var i=0,ai;ai=arr[i++];){
if(href.indexOf(ai)==0){
return true;
}
}
return false;
}
</script>
</script>
</body>
</html>

73
src/assets/css/global.css
Unescape View File

@ -1,61 +1,44 @@
/* 全局样式定义 */
/* 请注意，直接覆盖第三方组件（如Element UI组件）的样式可能会导致在未来更新组件库时出现样式冲突或不一致的问题。 */
/* 更好的做法是使用组件库提供的自定义主题或样式修改接口（如果可用），这样可以确保样式的兼容性和可维护性。 */
/* 如果必须直接覆盖样式，请确保了解选择器特异性，并尽量使用更具体的选择器来避免不必要的全局影响，减少潜在的样式冲突。 */
/* 设置html, body, 和#app元素的高度为100%，且没有边距和填充，最小宽度为1366px */
html, /* 根元素html，设置全局的基础样式 */
body, /* body元素，页面的主体部分 */
#app { /* #app元素，Vue应用的挂载点 */
height: 100%; /* 设置高度为100%，确保页面内容填满整个视口 */
margin: 0; /* 移除默认的外边距 */
padding: 0; /* 移除默认的内边距 */
min-width: 1366px; /* 设置最小宽度，确保页面在较小的屏幕上也能保持一定的布局 */
/* 全局样式 */
html,
body,
#app {
height: 100%;
margin: 0;
padding: 0;
min-width: 1366px;
}
/* 设置面包屑导航的底部外边距为15px，字体大小为12px */
.el-breadcrumb { /* Element UI的面包屑导航组件 */
margin-bottom: 15px; /* 设置底部外边距，为下方的元素留出空间 */
font-size: 12px; /* 设置字体大小，使导航文字更加紧凑 */
.el-breadcrumb {
margin-bottom: 15px;
font-size: 12px;
}
/* 为el-card组件添加盒子阴影效果，增加视觉层次感 */
.el-card { /* Element UI的卡片组件 */
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important; /* 添加盒子阴影，提升视觉效果 */
/* !important用于确保该规则优先级最高，避免被其他样式覆盖 */
.el-card {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}
/* 设置el-table表格的顶部外边距为15px，字体大小为12px */
.el-table { /* Element UI的表格组件 */
margin-top: 15px; /* 设置顶部外边距，为上方的元素留出空间 */
font-size: 12px; /* 设置字体大小，使表格内容更加紧凑 */
.el-table {
margin-top: 15px;
font-size: 12px;
}
/* 设置el-pagination分页组件的顶部外边距为15px */
.el-pagination { /* Element UI的分页组件 */
margin-top: 15px; /* 设置顶部外边距，为上方的元素留出空间 */
.el-pagination {
margin-top: 15px;
}
/* 解决级联选择框内部滚动条包裹元素的高度问题 */
/* 注意：这里的选择器可能存在特异性问题，通常不建议这样直接覆盖第三方组件的样式，除非有特别的需求 */
div .el-scrollbar__wrap { /* Element UI级联选择框内部滚动条包裹元素 */
height: 300px !important; /* 强制设置高度为300px，确保滚动条能够正常工作 */
/* !important用于确保该规则优先级最高，避免被其他样式覆盖 */
/* 解决级联选择框的问题 */
div .el-scrollbar__wrap {
height: 300px !important
}
/* 步骤条样式 */
/* 设置el-steps步骤条组件的外边距，上下各15px */
.el-steps { /* Element UI的步骤条组件 */
margin: 15px 0; /* 设置上下外边距，为步骤条上方和下方的元素留出空间 */
/* 步骤条 */
.el-steps {
margin: 15px 0;
}
/* 设置el-step步骤项标题的字体大小为13px */
.el-step__title { /* Element UI步骤条中步骤项的标题 */
font-size: 13px; /* 设置字体大小，使步骤标题更加清晰易读 */
.el-step__title {
font-size: 13px;
}
/* 富文本编辑器ql-editor的最小高度设置 */
/* 这通常用于Quill富文本编辑器，确保编辑器区域有足够的高度进行内容编辑 */
.ql-editor { /* Quill富文本编辑器的编辑区域 */
min-height: 300px; /* 设置最小高度，确保用户有足够的空间进行内容编辑 */
.ql-editor{
min-height: 300px;
}

148
src/assets/fonts/demo_fontclass.html
Unescape View File

@ -1,120 +1,100 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/> <!-- 设置文档的字符编码为UTF-8 -->
<title>IconFont</title> <!-- 设置网页的标题为IconFont -->
<link rel="stylesheet" href="demo.css"> <!-- 引入demo.css样式文件，用于页面的样式设计 -->
<link rel="stylesheet" href="iconfont.css"> <!-- 引入iconfont.css样式文件，包含图标字体的样式定义 -->
<meta charset="utf-8"/>
<title>IconFont</title>
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
</head>
<body>
<div class="main markdown"> <!-- 定义一个主容器，使用main和markdown类进行样式设置 -->
<h1>IconFont 图标</h1> <!-- 设置一个一级标题，显示“IconFont 图标” -->
<ul class="icon_lists clear"> <!-- 定义一个无序列表，用于展示图标，同时添加clear类清除浮动 -->
<li> <!-- 列表项开始 -->
<i class="icon iconfont icon-showpassword"></i> <!-- 使用icon、iconfont和icon-showpassword类显示一个显示密码的图标 -->
<!-- 图标显示区域 -->
<div class="name">show-password </div> <!-- 显示图标的名称 -->
<!-- 图标名称显示区域 -->
<div class="fontclass">.icon-showpassword</div> <!-- 显示图标字体类名，用于开发者引用 -->
<!-- 图标字体类名显示区域 -->
</li>
<!-- 列表项结束 -->
<li> <!-- 另一个列表项开始 -->
<i class="icon iconfont icon-user"></i> <!-- 使用icon、iconfont和icon-user类显示一个用户图标 -->
<!-- 图标显示区域 -->
<div class="name">user</div> <!-- 显示图标的名称 -->
<!-- 图标名称显示区域 -->
<div class="fontclass">.icon-user</div> <!-- 显示图标字体类名 -->
<!-- 图标字体类名显示区域 -->
<div class="main markdown">
<h1>IconFont 图标</h1>
<ul class="icon_lists clear">
<li>
<i class="icon iconfont icon-showpassword"></i>
<div class="name">show-password </div>
<div class="fontclass">.icon-showpassword</div>
</li>
<!-- 列表项结束 -->
<!-- 后续列表项省略，格式与上述类似 -->
<li>
<i class="icon iconfont icon-user"></i>
<div class="name">user</div>
<div class="fontclass">.icon-user</div>
</li>
<li> <!-- 列表项开始，展示“用户们”图标 -->
<li>
<i class="icon iconfont icon-users"></i>
<div class="name">users</div>
<div class="fontclass">.icon-users</div>
</li>
<!-- 列表项结束 -->
<li> <!-- 列表项开始，展示“密码-b”图标 -->
<li>
<i class="icon iconfont icon-3702mima"></i>
<div class="name">password-b</div>
<div class="fontclass">.icon-3702mima</div>
</li>
<!-- 列表项结束 -->
<li> <!-- 列表项开始，展示“06商品”图标 -->
<li>
<i class="icon iconfont icon-shangpin"></i>
<div class="name">06商品</div>
<div class="fontclass">.icon-shangpin</div>
</li>
<!-- 列表项结束 -->
<li> <!-- 列表项开始，展示“25单据”图标 -->
<li>
<i class="icon iconfont icon-danju"></i>
<div class="name">25单据</div>
<div class="fontclass">.icon-danju</div>
</li>
<!-- 列表项结束 -->
<li> <!-- 列表项开始，展示“28体积、空间”图标 -->
<li>
<i class="icon iconfont icon-tijikongjian"></i>
<div class="name">28体积、空间</div>
<div class="fontclass">.icon-tijikongjian</div>
</li>
<li>
<i class="icon iconfont icon-morentouxiang"></i> <!-- 图标元素，使用iconfont图标库中的“默认头像”图标 -->
<div class="name">225默认头像</div> <!-- 图标名称，显示该图标的描述 -->
<div class="fontclass">.icon-morentouxiang</div> <!-- 图标类名，用于在CSS或JavaScript中引用该图标 -->
</li>
<li>
<i class="icon iconfont icon-baobiao"></i> <!-- 图标元素，使用iconfont图标库中的“报表”图标 -->
<div class="name">406报表</div> <!-- 图标名称，显示该图标的描述 -->
<div class="fontclass">.icon-baobiao</div> <!-- 图标类名，用于在CSS或JavaScript中引用该图标 -->
</li>
<li>
<i class="icon iconfont icon-lock_fill"></i> <!-- 图标元素，使用iconfont图标库中的“lock_fill”图标 -->
<div class="name">lock_fill</div> <!-- 图标名称，显示该图标的描述 -->
<div class="fontclass">.icon-lock_fill</div> <!-- 图标类名，用于在CSS或JavaScript中引用该图标 -->
</li>
</ul>
<!-- 标题，说明接下来要介绍font-class引用方式 -->
<h2 id="font-class-">font-class引用</h2>
<hr>
<!-- 介绍font-class引用方式的优点 -->
<p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
<p>与unicode使用方式相比，具有如下特点：</p>
<ul>
<li>兼容性良好，支持ie8+，及所有现代浏览器。</li> <!-- 兼容性说明 -->
<li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li> <!-- 语意明确性说明 -->
<li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li> <!-- 替换图标方便性说明 -->
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li> <!-- 多色图标不支持说明 -->
</ul>
<p>使用步骤如下：</p>
<!-- 第一步：引入fontclass代码 -->
<h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
<pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
<!-- 注释说明：引入iconfont.css文件，该文件包含了图标字体的定义 -->
<!-- 第二步：挑选相应图标并获取类名，应用于页面 -->
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
<!-- 注释说明：使用<i>标签，并添加iconfont和具体的图标类名（如icon-xxx），来在页面上显示图标 -->
<blockquote>
<p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
<!-- 注释说明：iconfont是CSS中定义的字体族名，用于指定图标字体 -->
</blockquote>
</div>
<i class="icon iconfont icon-morentouxiang"></i>
<div class="name">225默认头像</div>
<div class="fontclass">.icon-morentouxiang</div>
</li>
<li>
<i class="icon iconfont icon-baobiao"></i>
<div class="name">406报表</div>
<div class="fontclass">.icon-baobiao</div>
</li>
<li>
<i class="icon iconfont icon-lock_fill"></i>
<div class="name">lock_fill</div>
<div class="fontclass">.icon-lock_fill</div>
</li>
</ul>
<h2 id="font-class-">font-class引用</h2>
<hr>
<p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
<p>与unicode使用方式相比，具有如下特点：</p>
<ul>
<li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
<li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
<li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
<pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
<blockquote>
<p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
</blockquote>
</div>
</body>
</html>

221
src/assets/fonts/demo_symbol.html
Unescape View File

@ -1,210 +1,117 @@
<!DOCTYPE html>
<!-- 声明文档类型为HTML5 -->
<html>
<!-- HTML文档的根元素 -->
<head>
<!-- 头部元素，包含文档的元数据 -->
<meta charset="utf-8"/>
<!-- 指定文档使用的字符编码为UTF-8 -->
<title>IconFont</title>
<!-- 设置文档的标题，显示在浏览器的标签页上 -->
<link rel="stylesheet" href="demo.css">
<!-- 链接外部样式表demo.css，用于定义页面的样式 -->
<script src="iconfont.js"></script>
<!-- 引入外部JavaScript文件iconfont.js，可能包含图标字体的初始化代码或功能 -->
<style type="text/css">
<!-- 内部样式表，定义具体的CSS规则 -->
.icon {
/* 图标类的基本样式定义 */
/* 通过设置 font-size 来改变图标大小 */
width: 1em; height: 1em;
/* 使用em单位设置图标的宽度和高度，em单位相对于当前元素的字体大小 */
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过微调vertical-align属性，使图标与文本垂直对齐 */
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* 使用currentColor关键字，使图标的填充颜色与父元素的文本颜色一致 */
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
/* 隐藏超出SVG viewBox边界的内容，解决IE浏览器的显示问题 */
}
</style>
</head>
<body>
<!-- 这是HTML文档的body部分，用于包含网页的主要内容 -->
<div class="main markdown">
<!-- 这是一个div元素，用于包含主要内容，并应用了'main'和'markdown'两个CSS类 -->
<h1>IconFont 图标</h1>
<!-- 这是一个h1元素，用于显示页面或部分的标题，这里显示的是"IconFont 图标" -->
<ul class="icon_lists clear">
<!-- 这是一个无序列表（ul），用于显示图标列表，并应用了'icon_lists'和'clear'两个CSS类 -->
<li>
<!-- 列表项（li）的开始，用于包含单个图标的显示信息 -->
<svg class="icon" aria-hidden="true">
<!-- 这是一个svg元素，用于嵌入矢量图标，并应用了'icon'CSS类，aria-hidden属性设置为true表示这个元素对于屏幕阅读器是隐藏的 -->
<use xlink:href="#icon-showpassword"></use>
<!-- use元素用于引用SVG定义中的某个元素，这里引用的是id为"icon-showpassword"的图标 -->
</svg>
<div class="name">show-password </div>
<!-- 这是一个div元素，用于显示图标的名称，并应用了'name'CSS类 -->
<div class="fontclass">#icon-showpassword</div>
<!-- 这是一个div元素，用于显示图标的fontclass名称，通常用于CSS或JavaScript中引用图标 -->
</li>
<li>
<!-- 另一个列表项的开始，用于包含第二个图标的显示信息 -->
<svg class="icon" aria-hidden="true">
<!-- 同上，用于嵌入矢量图标 -->
<use xlink:href="#icon-user"></use>
<!-- 引用id为"icon-user"的图标 -->
</svg>
<div class="name">user</div>
<!-- 显示图标的名称 -->
<div class="fontclass">#icon-user</div>
<!-- 显示图标的fontclass名称 -->
</li>
<li>
<!-- 第三个列表项的开始，用于包含第三个图标的显示信息 -->
<svg class="icon" aria-hidden="true">
<!-- 同上，用于嵌入矢量图标 -->
<use xlink:href="#icon-users"></use>
<!-- 引用id为"icon-users"的图标 -->
</svg>
<div class="name">users</div>
<!-- 显示图标的名称 -->
<div class="fontclass">#icon-users</div>
<!-- 显示图标的fontclass名称 -->
</li>
<li>
<!-- 第四个列表项的开始，用于包含第四个图标的显示信息 -->
<svg class="icon" aria-hidden="true">
<!-- 同上，用于嵌入矢量图标 -->
<use xlink:href="#icon-3702mima"></use>
<!-- 引用id为"icon-3702mima"的图标 -->
</svg>
<div class="name">password-b</div>
<!-- 显示图标的名称 -->
<div class="fontclass">#icon-3702mima</div>
<!-- 显示图标的fontclass名称 -->
</li>
<!-- 列表项（li）的结束 -->
</ul>
<!-- 无序列表（ul）的结束 -->
</div>
<!-- div元素的结束 -->
</body>
<!-- HTML文档的body部分的结束 -->
<li>
<!-- 这是一个列表项（li）元素，用于包含单个图标的显示信息 -->
<svg class="icon" aria-hidden="true">
<!-- 这是一个svg元素，用于嵌入矢量图标 -->
<!-- class="icon" 表示这个svg元素应用了'icon'CSS类 -->
<!-- aria-hidden="true" 表示这个svg元素对于屏幕阅读器是隐藏的，主要用于提高无障碍性 -->
<use xlink:href="#icon-shangpin"></use>
<!-- use元素用于引用SVG定义中的某个元素 -->
<!-- xlink:href="#icon-shangpin" 表示引用id为"icon-shangpin"的图标 -->
</svg>
<div class="name">06商品</div>
<!-- 这是一个div元素，用于显示图标的名称 -->
<!-- class="name" 表示这个div元素应用了'name'CSS类 -->
<div class="fontclass">#icon-shangpin</div>
<!-- 这是一个div元素，用于显示图标的fontclass名称 -->
<!-- class="fontclass" 表示这个div元素应用了'fontclass'CSS类 -->
<!-- #icon-shangpin 是图标的fontclass名称，通常用于CSS或JavaScript中引用图标 -->
</li>
<li>
<!-- 这是另一个列表项（li）元素，用于包含第二个图标的显示信息 -->
<svg class="icon" aria-hidden="true">
<!-- 同上，用于嵌入矢量图标 -->
<use xlink:href="#icon-danju"></use>
<!-- 引用id为"icon-danju"的图标 -->
</svg>
<div class="name">25单据</div>
<!-- 显示图标的名称 -->
<div class="fontclass">#icon-danju</div>
<!-- 显示图标的fontclass名称 -->
</li>
<li>
<!-- 这是第三个列表项（li）元素，用于包含第三个图标的显示信息 -->
<svg class="icon" aria-hidden="true">
<!-- 同上，用于嵌入矢量图标 -->
<use xlink:href="#icon-tijikongjian"></use>
<!-- 引用id为"icon-tijikongjian"的图标 -->
</svg>
<div class="name">28体积、空间</div>
<!-- 显示图标的名称，这里包含了中文描述和英文（可能是缩写或翻译） -->
<div class="fontclass">#icon-tijikongjian</div>
<!-- 显示图标的fontclass名称 -->
</li>
<li>
<!-- 这是第四个列表项（li）元素，用于包含第四个图标的显示信息 -->
<svg class="icon" aria-hidden="true">
<!-- 同上，用于嵌入矢量图标 -->
<use xlink:href="#icon-morentouxiang"></use>
<!-- 引用id为"icon-morentouxiang"的图标 -->
</svg>
<div class="name">225默认头像</div>
<!-- 显示图标的名称，这里的数字可能是图标的编号或顺序 -->
<div class="fontclass">#icon-morentouxiang</div>
<!-- 显示图标的fontclass名称 -->
</li>
<li>
<!-- 这是一个列表项（li）元素，用于包含单个图标的显示信息 -->
<svg class="icon" aria-hidden="true">
<!-- 这是一个svg元素，用于嵌入矢量图标 -->
<!-- class="icon" 表示这个svg元素应用了'icon'CSS类，用于设置图标的样式 -->
<!-- aria-hidden="true" 表示这个svg元素对于屏幕阅读器是隐藏的，主要用于提高网页的无障碍性 -->
<use xlink:href="#icon-baobiao"></use>
<!-- use元素用于引用SVG定义中的某个元素 -->
<!-- xlink:href="#icon-baobiao" 表示引用id为"icon-baobiao"的图标 -->
</svg>
<div class="name">406报表</div>
<!-- 这是一个div元素，用于显示图标的名称或描述 -->
<!-- class="name" 表示这个div元素应用了'name'CSS类，用于设置文本样式 -->
<div class="fontclass">#icon-baobiao</div>
<!-- 这是一个div元素，用于显示图标的fontclass名称 -->
<!-- class="fontclass" 表示这个div元素应用了'fontclass'CSS类，用于设置文本样式 -->
<!-- #icon-baobiao 是图标的fontclass名称，通常用于CSS或JavaScript中引用图标 -->
</li>
<li>
<!-- 这是另一个列表项（li）元素，用于包含另一个图标的显示信息 -->
<svg class="icon" aria-hidden="true">
<!-- 同上，用于嵌入矢量图标 -->
<use xlink:href="#icon-lock_fill"></use>
<!-- 引用id为"icon-lock_fill"的图标 -->
</svg>
<div class="name">lock_fill</div>
<!-- 显示图标的名称或描述，这里的名称与图标的id相同，便于识别 -->
<div class="fontclass">#icon-lock_fill</div>
<!-- 显示图标的fontclass名称，与图标的id相同 -->
</li>
</ul>
<!-- 这是ul元素的结束标签，表示列表的结束 -->
<h2 id="symbol-">symbol引用</h2>
<!-- 这是一个h2元素，用于显示一个二级标题 -->
<!-- id="symbol-" 是这个h2元素的唯一标识符，可能用于CSS或JavaScript中定位或操作该元素 -->
<!-- 标题内容为"symbol引用"，表示接下来的内容将介绍如何使用symbol引用图标 -->
<hr>
<!-- 这是一个hr元素，用于在视觉上分隔内容 -->
<!-- 它通常用于分隔不同的主题或章节，使页面内容更加清晰易读 -->
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shangpin"></use>
</svg>
<div class="name">06商品</div>
<div class="fontclass">#icon-shangpin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-danju"></use>
</svg>
<div class="name">25单据</div>
<div class="fontclass">#icon-danju</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tijikongjian"></use>
</svg>
<div class="name">28体积、空间</div>
<div class="fontclass">#icon-tijikongjian</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-morentouxiang"></use>
</svg>
<div class="name">225默认头像</div>
<div class="fontclass">#icon-morentouxiang</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-baobiao"></use>
</svg>
<div class="name">406报表</div>
<div class="fontclass">#icon-baobiao</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-lock_fill"></use>
</svg>
<div class="name">lock_fill</div>
<div class="fontclass">#icon-lock_fill</div>
</li>
</ul>
<h2 id="symbol-">symbol引用</h2>
<hr>
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
@ -227,24 +134,10 @@
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<body>
<!-- 这是一个包含JavaScript代码块的pre标签，用于在网页上显示格式化的代码 -->
<pre>
<!-- 使用hljs（可能是highlight.js）库对JavaScript代码进行高亮显示 -->
<code class="lang-js hljs javascript">
<!-- SVG标签的开始，用于在网页中嵌入矢量图形 -->
&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml">
<!--
use标签用于引用SVG定义中的某个元素，这里引用的是id为"icon-xxx"的元素。
xlink:href属性指定了要引用的元素的URL，但在这里使用的是ID选择器语法。
-->
&lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;<span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>
<!-- SVG标签的结束 -->
&lt;<span class="hljs-regexp">/svg&gt;</span>
</code>
<!-- code标签的结束 -->
</pre>
<!-- body标签的结束 -->
<pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
&lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
</span></code></pre>
</div>
</body>
</html>

193
src/assets/fonts/demo_unicode.html
Unescape View File

@ -1,179 +1,96 @@
<!DOCTYPE html>
<!-- 声明文档类型为HTML5，这是HTML页面的标准声明，告诉浏览器如何解析和渲染页面 -->
<html>
<!-- <html>标签是HTML页面的根元素，所有其他HTML元素都是其子元素 -->
<head>
<!-- <head>标签包含了文档的元数据（meta-information），如字符集、标题、样式表链接等 -->
<meta charset="utf-8"/>
<!-- <meta>标签用于指定文档的字符编码为UTF-8，这是一种国际通用的字符编码，支持多种语言的字符 -->
<title>IconFont</title>
<!-- <title>标签定义了文档的标题，这个标题会显示在浏览器的标签栏或标题栏上 -->
<link rel="stylesheet" href="demo.css">
<!-- <link>标签用于链接外部样式表（CSS文件），这里链接的是名为"demo.css"的样式表文件 -->
<style type="text/css">
<!-- <style>标签用于在HTML文档中嵌入CSS样式 -->
@font-face {
/* @font-face是一个CSS规则，它允许你定义自己的字体，并指定字体文件的路径和格式 */
font-family: "iconfont";
/* font-family属性定义了字体的名称，这里定义的字体名称为"iconfont" */
src: url('iconfont.eot'); /* IE9及以下版本使用EOT格式的字体文件 */
/* src属性指定了字体文件的路径和格式 */
src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8使用带嵌入OpenType格式的EOT字体文件 */
url('iconfont.woff') format('woff'), /* Chrome和Firefox支持WOFF格式的字体文件 */
url('iconfont.ttf') format('truetype'), /* Chrome、Firefox、Opera、Safari、Android和iOS 4.2+支持TrueType格式的字体文件 */
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1及以下版本支持SVG格式的字体文件 */
/* 注意：这里的src属性被重复使用了多次，实际上在@font-face规则中，src属性应该只出现一次，
但可以通过逗号分隔多个字体文件路径和格式。这里的写法可能是为了突出展示不同浏览器支持的字体格式，
但在实际使用中应该合并为一个src属性，例如：
src: url('iconfont.eot'); src: url('iconfont.eot#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
但正确的合并方式应该是：
src: url('iconfont.eot'); /* IE9 Compat Modes */
url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* Super Modern Browsers */
url('iconfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('iconfont.svg#iconfont') format('svg'); /* Legacy iOS */
并且注意，第一个src后的分号应该是逗号（但在实际规则中，我们只需要一个src属性，用逗号分隔不同的文件路径和格式）。
这里的注释是为了解释，实际代码应该按照正确的格式书写。 */
}
.iconfont {
/* 定义字体家族为"iconfont"，用于应用图标字体 */
font-family: "iconfont" !important;
/* 使用!important是为了提高该规则的优先级，确保它不会被其他样式覆盖 */
/* 设置字体大小为16像素 */
font-size: 16px;
/* 设置字体样式为正常（非斜体） */
font-style: normal;
/* 在WebKit内核的浏览器中启用抗锯齿平滑处理，使字体边缘更平滑 */
-webkit-font-smoothing: antialiased;
/* 设置文本描边宽度为0.2像素（在WebKit内核的浏览器中有效），但通常用于放大效果 */
/* 注意：在大多数情况下，文本描边可能不是必需的，且可能因浏览器支持而异 */
-webkit-text-stroke-width: 0.2px;
/* 在Mac OS X的Firefox浏览器中启用灰度平滑处理，以减少字体渲染时的彩色边缘 */
-moz-osx-font-smoothing: grayscale;
}
@font-face {font-family: "iconfont";
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome, firefox */
url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
/* CSS样式块结束 */
</style>
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
/* HTML文档的头部区域结束 */
</style>
</head>
/* HTML文档的主体区域开始 */
<body>
<!-- 定义一个具有"main"和"markdown"类的div容器，用于包含主要内容 -->
<div class="main markdown">
<!-- 定义一个一级标题，显示文本为"IconFont 图标" -->
<h1>IconFont 图标</h1>
<!-- 定义一个无序列表，具有"icon_lists"和"clear"类，用于包含图标列表 -->
<ul class="icon_lists clear">
<!-- 列表项开始，每个列表项包含一个图标、名称和代码 -->
<li>
<!-- 定义一个图标，使用"icon"和"iconfont"类，并显示特定的图标字符 -->
<li>
<i class="icon iconfont">&#xea3f;</i>
<!-- 显示图标的名称 -->
<div class="name">show-password </div>
<!-- 显示图标的Unicode代码 -->
<div class="code">&amp;#xea3f;</div>
</li>
<!-- 类似的列表项，包含不同的图标、名称和代码 -->
<li>
<div class="name">show-password </div>
<div class="code">&amp;#xea3f;</div>
</li>
<li>
<i class="icon iconfont">&#xe89a;</i>
<div class="name">user</div>
<div class="code">&amp;#xe89a;</div>
</li>
</li>
<li>
<li>
<i class="icon iconfont">&#xe8b5;</i>
<div class="name">users</div>
<div class="code">&amp;#xe8b5;</div>
</li>
</li>
<li>
<li>
<i class="icon iconfont">&#xe66c;</i>
<div class="name">password-b</div>
<div class="code">&amp;#xe66c;</div>
</li>
</li>
<li>
<li>
<i class="icon iconfont">&#xe888;</i>
<div class="name">06商品</div>
<div class="code">&amp;#xe888;</div>
</li>
</li>
<li>
<li>
<i class="icon iconfont">&#xe89b;</i>
<div class="name">25单据</div>
<div class="code">&amp;#xe89b;</div>
</li>
<!-- 列表项开始，用于显示一个图标及其相关信息 -->
<li>
<!-- 定义一个图标元素，使用"icon"和"iconfont"类来应用图标字体的样式 -->
<!-- 字符实体"&#xe89f;"代表在iconfont字体中定义的特定图标 -->
<i class="icon iconfont">&#xe89f;</i>
<!-- 显示图标的名称，这里是"28体积、空间" -->
<!-- 这个名称可能用于描述图标所代表的含义或用途 -->
<div class="name">28体积、空间</div>
<!-- 显示图标的Unicode代码，这里是"&amp;#xe89f;" -->
<!-- 注意：在HTML中，"&"符号需要被转义为"&amp;"，所以Unicode代码前面有"&amp;" -->
<div class="code">&amp;#xe89f;</div>
</li>
<!-- 另一个列表项开始，用于显示另一个图标及其相关信息 -->
<li>
<!-- 定义一个图标元素，使用"icon"和"iconfont"类 -->
<!-- 字符实体"&#xe8c9;"代表另一个在iconfont字体中定义的图标 -->
<i class="icon iconfont">&#xe8c9;</i>
<!-- 显示图标的名称，"225默认头像" -->
<div class="name">225默认头像</div>
<!-- 显示图标的Unicode代码 -->
<div class="code">&amp;#xe8c9;</div>
</li>
<!-- 又一个列表项开始 -->
<li>
<!-- 定义一个图标元素，字符实体"&#xe902;"代表另一个图标 -->
<i class="icon iconfont">&#xe902;</i>
<!-- 显示图标的名称，"406报表" -->
<div class="name">406报表</div>
<!-- 显示图标的Unicode代码 -->
<div class="code">&amp;#xe902;</div>
</li>
<!-- 最后一个列表项 -->
<li>
<!-- 定义一个图标元素，字符实体"&#xe709;"代表锁填充图标 -->
<i class="icon iconfont">&#xe709;</i>
<!-- 显示图标的名称，"lock_fill" -->
<div class="name">lock_fill</div>
<!-- 显示图标的Unicode代码 -->
<div class="code">&amp;#xe709;</div>
</li>
</li>
<li>
<i class="icon iconfont">&#xe89f;</i>
<div class="name">28体积、空间</div>
<div class="code">&amp;#xe89f;</div>
</li>
<li>
<i class="icon iconfont">&#xe8c9;</i>
<div class="name">225默认头像</div>
<div class="code">&amp;#xe8c9;</div>
</li>
<li>
<i class="icon iconfont">&#xe902;</i>
<div class="name">406报表</div>
<div class="code">&amp;#xe902;</div>
</li>
<li>
<i class="icon iconfont">&#xe709;</i>
<div class="name">lock_fill</div>
<div class="code">&amp;#xe709;</div>
</li>
</ul>
<h2 id="unicode-">unicode引用</h2>

51
src/assets/fonts/iconfont.css
Unescape View File

@ -15,52 +15,23 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-showpassword:before {
content: "\ea3f"; /* 显示密码图标的Unicode字符 */
/* 这是一个伪元素，用于在元素前添加内容，这里添加的是显示密码的图标 */
}
.icon-showpassword:before { content: "\ea3f"; }
.icon-user:before {
content: "\e89a"; /* 用户图标的Unicode字符 */
/* 在元素前添加用户图标 */
}
.icon-user:before { content: "\e89a"; }
.icon-users:before {
content: "\e8b5"; /* 多个用户（群组）图标的Unicode字符 */
/* 在元素前添加多个用户（群组）图标 */
}
.icon-users:before { content: "\e8b5"; }
.icon-3702mima:before {
content: "\e66c"; /* 特定编号（可能是项目内部编号）的密码图标的Unicode字符 */
/* 在元素前添加特定编号的密码图标 */
}
.icon-3702mima:before { content: "\e66c"; }
.icon-shangpin:before {
content: "\e888"; /* 商品图标的Unicode字符 */
/* 在元素前添加商品图标 */
}
.icon-shangpin:before { content: "\e888"; }
.icon-danju:before {
content: "\e89b"; /* 单据（可能是发票或收据）图标的Unicode字符 */
/* 在元素前添加单据图标 */
}
.icon-danju:before { content: "\e89b"; }
.icon-tijikongjian:before {
content: "\e89f"; /* 提交空间（可能是指提交表单或文件的区域）图标的Unicode字符 */
/* 在元素前添加提交空间图标 */
}
.icon-tijikongjian:before { content: "\e89f"; }
.icon-morentouxiang:before {
content: "\e8c9"; /* 多人头像（可能是群聊或多人合作）图标的Unicode字符 */
/* 在元素前添加多人头像图标 */
}
.icon-morentouxiang:before { content: "\e8c9"; }
.icon-baobiao:before {
content: "\e902"; /* 报表（可能是数据分析或统计）图标的Unicode字符 */
/* 在元素前添加报表图标 */
}
.icon-baobiao:before { content: "\e902"; }
.icon-lock_fill:before { content: "\e709"; }
.icon-lock_fill:before {
content: "\e709"; /* 已填充（实心）锁头图标的Unicode字符 */
/* 在元素前添加已填充锁头图标，表示锁定或安全状态 */
}

350
src/assets/fonts/iconfont.svg
Unescape View File

@ -1,40 +1,15 @@
<?xml version="1.0" standalone="no"?> <!-- 声明XML版本为1.0，且不是独立文档 -->
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<!--
文档类型定义（DTD），指定这是一个SVG 1.1文档，并链接到SVG 1.1的DTD。
DTD定义了SVG文档的结构和允许的元素。
-->
<!--
2013-9-30: Created.
-->
<!--
注释：该SVG文件是在2013年9月30日创建的。
-->
<svg>
<!--
SVG根元素，所有SVG内容都包含在此元素内。
-->
<metadata>
<!--
元数据元素，用于存储有关SVG文件的额外信息。
-->
Created by iconfont
<!--
元数据内容，说明该SVG文件是由iconfont创建的。
-->
</metadata>
<defs>
<!--
定义元素，用于存储SVG文档中可重复使用的元素定义。
例如，可以在这里定义渐变、滤镜、字体等。
-->
<font id="iconfont" horiz-adv-x="1024" >
<!--
字体元素，定义一个SVG字体。
id属性为字体指定一个唯一标识符。
horiz-adv-x属性指定水平高级宽度，即字体中字符的水平间距。
-->
<font-face
font-family="iconfont"
font-weight="500"
@ -43,20 +18,8 @@ Created by iconfont
ascent="896"
descent="-128"
/>
<!--
font-face元素，定义字体的外观属性。
font-family属性指定字体的名称。
font-weight属性指定字体的粗细。
font-stretch属性指定字体的拉伸程度。
units-per-em属性指定em单位的尺寸，em是相对于字体大小的单位。
ascent属性指定字符的上升部分的高度。
descent属性指定字符的下降部分的高度（负值表示下降）。
-->
<missing-glyph />
<!--
missing-glyph元素，定义当字符在字体中找不到时显示的默认图形。
在这个例子中，没有指定missing-glyph的内容，所以它可能是一个空图形或默认的回退图形。
-->
<glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
@ -67,308 +30,31 @@ t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-
<glyph glyph-name="showpassword" unicode="&#59967;" d="M1024 300c0-96-211.2-307.2-512-307.2-294.4 0-512 204.8-512 307.2s217.6 307.2 512 307.2c300.8 0 512-204.8 512-307.2l0 0zM512 549.6c-134.4 0-243.2-108.8-243.2-249.6s108.8-249.6 249.6-249.6c134.4 0 249.6 115.2 249.6 249.6-6.4 140.8-121.6 249.6-256 249.6l0 0zM512 460c-89.6 0-160-70.4-160-160s70.4-160 160-160c89.6 0 160 70.4 160 160s-70.4 160-160 160l0 0z" horiz-adv-x="1024" />
<glyph
glyph-name="user"
<!-- 定义图标的名称为"user" -->
unicode="&#59546;"
<!-- 定义图标对应的Unicode编码 -->
d="M622.816 193.28c-22.112 3.52-22.624 64.32-22.624 64.32s64.96 64.32 79.136 150.816c38.08 0 61.632 91.936 23.52 124.288C704.448 566.72 751.808 800 512 800c-239.808 0-192.448-233.28-190.88-267.328-38.08-32.352-14.56-124.288 23.52-124.288 14.144-86.496 79.136-150.816 79.136-150.816s-0.512-60.8-22.624-64.32C329.952 181.92 64 64.64 64-64l448 0 448 0C960 64.64 694.048 181.92 622.816 193.28z"
<!-- 定义图标的路径数据，描述图标的形状 -->
horiz-adv-x="1024"
<!-- 定义图标的水平高级宽度 -->
/>
<glyph glyph-name="user" unicode="&#59546;" d="M622.816 193.28c-22.112 3.52-22.624 64.32-22.624 64.32s64.96 64.32 79.136 150.816c38.08 0 61.632 91.936 23.52 124.288C704.448 566.72 751.808 800 512 800c-239.808 0-192.448-233.28-190.88-267.328-38.08-32.352-14.56-124.288 23.52-124.288 14.144-86.496 79.136-150.816 79.136-150.816s-0.512-60.8-22.624-64.32C329.952 181.92 64 64.64 64-64l448 0 448 0C960 64.64 694.048 181.92 622.816 193.28z" horiz-adv-x="1024" />
<glyph glyph-name="users" unicode="&#59573;" d="M735.008 90.624c-18.944 2.976-19.392 54.656-19.392 54.656s55.68 54.656 67.808 128.16c32.64 0 52.8 78.144 20.16 105.632 1.376 28.928 41.984 227.168-163.584 227.168-205.568 0-164.96-198.24-163.584-227.168-32.64-27.488-12.48-105.632 20.16-105.632 12.128-73.504 67.84-128.16 67.84-128.16s-0.416-51.68-19.392-54.656C483.968 80.992 256-18.688 256-128l384 0 384 0C1024-18.688 796.032 80.992 735.008 90.624zM344.064 73.184c44.096 27.136 97.632 52.32 141.536 67.424-15.744 22.432-33.28 52.928-44.32 89.056-15.392 12.576-27.936 30.528-36 52.608-8.064 22.112-11.136 46.848-8.608 69.696 1.792 16.384 6.464 31.68 13.664 45.088-4.352 46.592-7.424 138.048 52.448 204.736 23.2 25.856 52.544 44.448 87.712 55.68C544.192 722.24 511.296 798.24 384 798.24c-205.568 0-164.96-198.24-163.584-227.168-32.64-27.488-12.48-105.632 20.16-105.632 12.128-73.504 67.84-128.16 67.84-128.16s-0.416-51.68-19.392-54.656C227.968 272.992 0 173.312 0 64l329.6 0C334.304 67.072 339.104 70.144 344.064 73.184z" horiz-adv-x="1024" />
<glyph glyph-name="3702mima" unicode="&#58988;" d="M893.532041 14.644791l-0.284479 392.855436c-1.805112 41.266869-35.472909 74.250074-77.136821 74.419943l-50.869574-0.029676 0 35.523051 0.191358 0 0.170892 81.20344c0 2.183735-0.285502 4.273327-0.647753 6.363941-2.829442 123.525338-101.722776 223.293599-224.985124 227.214908l0 1.137916C414.498874 831.871447 313.084113 731.117742 310.218856 606.004233c-0.361227-2.090615-0.64673-4.180206-0.64673-6.363941l0.170892-81.20344 0.191358 0 0-36.477796-0.094144 0 0-0.323365-42.272779-0.019443c-2.596128-0.115634-5.158487-0.358157-7.682983-0.720408l-0.819668 0c-41.663912-0.169869-75.331709-33.152051-77.136821-74.419943l-0.284479-392.855436c0.209778-42.786479 34.921347-77.441766 77.763085-77.441766l38.911218 0 0-0.037862 466.923362-0.265036 0 0.302899 38.910195 0c4.331655 0 8.575306 0.370437 12.71458 1.050935C859.199095-62.181969 893.32431-27.774321 893.532041 14.644791zM387.811048 599.905328c0.514723 82.71998 65.588811 150.08832 147.393955 154.210197l0-0.847298c84.028788-1.687432 151.633512-70.065775 152.158469-154.386206l0.454348 0c0-0.095167-0.036839-0.170892-0.036839-0.265036l-0.26299-116.770494-299.860439-0.172939-0.265036 117.966739c0 0.094144-0.037862 0.169869-0.037862 0.265036L387.811048 599.905328z" horiz-adv-x="1024" />
<glyph glyph-name="shangpin" unicode="&#59528;" d="M832 640H640V735.2c0 17.6-14.4 32.8-32.8 32.8H416c-17.6 0-32.8-14.4-32.8-32.8V640H192l-64-576c0-35.2 28.8-64 64-64h640c35.2 0 64 28.8 64 64l-64 576z m-384 64h128v-64H448v64z m-0.8-192H384v63.2h63.2V512zM640 512h-63.2v63.2H640V512z" horiz-adv-x="1024" />
<glyph
glyph-name="users"
<!-- 定义图标的名称为"users" -->
unicode="&#59573;"
<!-- 定义图标对应的Unicode编码 -->
d="M735.008 90.624c-18.944 2.976-19.392 54.656-19.392 54.656s55.68 54.656 67.808 128.16c32.64 0 52.8 78.144 20.16 105.632 1.376 28.928 41.984 227.168-163.584 227.168-205.568 0-164.96-198.24-163.584-227.168-32.64-27.488-12.48-105.632 20.16-105.632 12.128-73.504 67.84-128.16 67.84-128.16s-0.416-51.68-19.392-54.656C483.968 80.992 256-18.688 256-128l384 0 384 0C1024-18.688 796.032 80.992 735.008 90.624zM344.064 73.184c44.096 27.136 97.632 52.32 141.536 67.424-15.744 22.432-33.28 52.928-44.32 89.056-15.392 12.576-27.936 30.528-36 52.608-8.064 22.112-11.136 46.848-8.608 69.696 1.792 16.384 6.464 31.68 13.664 45.088-4.352 46.592-7.424 138.048 52.448 204.736 23.2 25.856 52.544 44.448 87.712 55.68C544.192 722.24 511.296 798.24 384 798.24c-205.568 0-164.96-198.24-163.584-227.168-32.64-27.488-12.48-105.632 20.16-105.632 12.128-73.504 67.84-128.16 67.84-128.16s-0.416-51.68-19.392-54.656C227.968 272.992 0 173.312 0 64l329.6 0C334.304 67.072 339.104 70.144 344.064 73.184z"
<!-- 定义图标的路径数据，描述多个用户的图标形状 -->
horiz-adv-x="1024"
<!-- 定义图标的水平高级宽度 -->
/>
<glyph glyph-name="danju" unicode="&#59547;" d="M800 704H640c0 70.4-57.6 128-128 128s-128-57.6-128-128H224c-17.6 0-32-14.4-32-32v-704c0-17.6 14.4-32 32-32h576c17.6 0 32 14.4 32 32V672c0 17.6-14.4 32-32 32z m-288 32c17.6 0 32-14.4 32-32s-14.4-32-32-32-32 14.4-32 32 14.4 32 32 32z m64-608H320v64h256v-64z m128 128H320v64h384v-64z m0 128H320v64h384v-64z" horiz-adv-x="1024" />
<glyph
glyph-name="3702mima"
<!-- 定义图标的名称为"3702mima" -->
unicode="&#58988;"
<!-- 定义图标对应的Unicode编码 -->
d="M893.532041 14.644791l-0.284479 392.855436
<!-- 从坐标(893.532041, 14.644791)开始，向上绘制一条长度为392.855436的线段 -->
c-1.805112 41.266869-35.472909 74.250074-77.136821 74.419943
<!-- 从上一点开始，绘制一条三次贝塞尔曲线到(减去偏移后的位置)，曲线控制点和结束点如上 -->
l-50.869574-0.029676 0 35.523051 0.191358 0 0.170892 81.20344
<!-- 绘制一系列直线段，长度和方向如上 -->
c0 2.183735-0.285502 4.273327-0.647753 6.363941
<!-- 从上一点开始，绘制一条三次贝塞尔曲线（实际上是直线，因为控制点与起点或终点重合），表示微小的垂直上升 -->
-2.829442 123.525338-101.722776 223.293599-224.985124 227.214908
<!-- 绘制另一条三次贝塞尔曲线，表示大幅上升并稍微向右弯曲 -->
l0 1.137916
<!-- 绘制一条长度为1.137916的垂直线段 -->
C414.498874 831.871447 313.084113 731.117742 310.218856 606.004233
<!-- 绘制一条到指定坐标的二次贝塞尔曲线，但由于缺少控制点，这里可能是一个误解，应为直线或需额外信息 -->
c-0.361227-2.090615-0.64673-4.180206-0.64673-6.363941
<!-- 从上一点开始，绘制一条微小的下降直线 -->
l0.170892-81.20344 0.191358 0 0-36.477796-0.094144 0 0-0.323365-42.272779-0.019443
<!-- 绘制一系列直线段和微小的下降，表示向左下方的折线 -->
c-2.596128-0.115634-5.158487-0.358157-7.682983-0.720408
<!-- 从上一点开始，绘制一条微小的下降直线，表示进一步的下降 -->
l-0.819668 0
<!-- 绘制一条长度为0的水平线段，可能是为了调整位置或作为路径的一部分，但无实际效果 -->
c-41.663912-0.169869-75.331709-33.152051-77.136821-74.419943
<!-- 从上一点开始，绘制一条三次贝塞尔曲线，表示向左下方的大幅下降 -->
l-0.284479-392.855436
<!-- 绘制一条向左下方的长直线，回到起始区域附近 -->
c0.209778-42.786479 34.921347-77.441766 77.763085-77.441766
<!-- 从上一点开始，绘制一条三次贝塞尔曲线（或直线，因为控制点与终点重合），表示微小的水平移动和大幅上升回到原高度 -->
l38.911218 0 0-0.037862 466.923362-0.265036 0 0.302899 38.910195 0
<!-- 绘制一系列直线段，主要是水平移动，可能用于调整位置或作为路径的一部分 -->
c4.331655 0 8.575306 0.370437 12.71458 1.050935
<!-- 从上一点开始，绘制一条微小的上升直线 -->
C859.199095-62.181969 893.32431-27.774321 893.532041 14.644791
<!-- 绘制一条到起始坐标的二次贝塞尔曲线，完成整个图标的轮廓 -->
z
<!-- 表示路径的结束，回到起始点 -->
M387.811048 599.905328
<!-- 开始绘制图标内部的另一个形状或元素 -->
c0.514723 82.71998 65.588811 150.08832 147.393955 154.210197
<!-- 从指定坐标开始，绘制一条三次贝塞尔曲线，表示向上的大幅弯曲 -->
l0-0.847298
<!-- 绘制一条微小的下降直线 -->
c84.028788-1.687432 151.633512-70.065775 152.158469-154.386206
<!-- 从上一点开始，绘制一条三次贝塞尔曲线，表示向左下方的大幅下降 -->
l0.454348 0
<!-- 绘制一条长度为0的水平线段，可能是为了调整位置或作为路径的一部分，但无实际效果 -->
c0-0.095167-0.036839-0.170892-0.036839-0.265036
<!-- 从上一点开始，绘制一条微小的下降直线 -->
l-0.26299-116.770494-299.860439-0.172939-0.265036 117.966739
<!-- 绘制一系列直线段，表示向左下方的大幅移动，然后向右上方的大幅移动，回到接近起始位置 -->
c0 0.094144-0.037862 0.169869-0.037862 0.265036
<!-- 从上一点开始，绘制一条微小的上升直线 -->
L387.811048 599.905328
<!-- 绘制一条直线到起始坐标，完成内部形状或元素的绘制 -->
z"
<!-- 表示路径的结束，回到起始点 -->
horiz-adv-x="1024"
<!-- 定义图标的水平高级宽度 -->
/>
<glyph glyph-name="tijikongjian" unicode="&#59551;" d="M496 0.8L138.4 124.8c-6.4 2.4-10.4 8-10.4 15.2V608.8l368-112v-496z m32 0l357.6 124c6.4 2.4 10.4 8 10.4 15.2V608.8l-368-112v-496z m-400 640l384-112 384 112-379.2 125.6c-3.2 0.8-7.2 0.8-10.4 0L128 640.8z" horiz-adv-x="1024" />
<glyph
glyph-name="shangpin"
<!-- 定义图标的名称为“shangpin” -->
unicode="&#59528;"
<!-- 定义图标对应的Unicode编码 -->
d="M832 640H640V735.2
<!-- 从坐标(832, 640)开始，水平移动到(640, 640)，然后垂直移动到(640, 735.2) -->
c0 17.6-14.4 32.8-32.8 32.8
<!-- 从上一点开始，绘制一条三次贝塞尔曲线（或直线，因为控制点与起点或终点重合），表示垂直上升，高度为32.8 -->
H416
<!-- 水平移动到(416, 735.2) -->
c-17.6 0-32.8-14.4-32.8-32.8
<!-- 从上一点开始，绘制一条三次贝塞尔曲线（或直线），表示垂直下降，回到高度640 -->
V640
<!-- 垂直移动到(416, 640) -->
H192
<!-- 水平移动到(192, 640) -->
l-64-576
<!-- 从上一点开始，绘制一条向左下方倾斜的直线，长度为64，垂直下降576 -->
c0-35.2 28.8-64 64-64
<!-- 从上一点开始，绘制一条三次贝塞尔曲线（或直线），表示微小的水平移动和大幅的垂直下降，形成矩形的底部 -->
h640
<!-- 水平移动到(832, -64)（但由于是相对于上一个点，且上一个点已经在最低点，这里实际上没有垂直移动） -->
c35.2 0 64 28.8 64 64
<!-- 从上一点开始，绘制一条三次贝塞尔曲线（或直线），表示微小的水平移动和大幅的垂直上升，回到起始高度附近 -->
l-64 576
<!-- 绘制一条向右上方倾斜的直线，长度为64，垂直上升576，形成矩形的右上角 -->
z
<!-- 表示路径的结束，回到起始点，形成闭合路径 -->
m-384 64
<!-- 从上一个路径的结束点开始，水平移动到(448, 64)（因为-384的偏移） -->
h128
<!-- 水平移动到(576, 64) -->
v-64
<!-- 垂直移动到(576, 0) -->
H448
<!-- 水平移动到(448, 0) -->
v64
<!-- 垂直移动到(448, 64)，形成一个小的正方形或矩形 -->
z
<!-- 表示路径的结束，回到起始点（对于这个小矩形） -->
m-0.8-192
<!-- 从上一个路径的结束点开始，微小地向左移动，准备绘制下一个形状 -->
H384
<!-- 水平移动到(384, -128)（但由于是相对于上一个点，且上一个点已经在y=64，所以这里实际上是向下移动） -->
v63.2
<!-- 垂直移动到(384, -64.8)（但由于是向上移动，且起始点在y=0以下，所以这里的数值表示相对于某个更低点的位置） -->
h63.2
<!-- 水平移动到(447.2, -64.8) -->
V512
<!-- 垂直移动到(447.2, 512)，形成一个向上的直线段，可能是为了与其他部分对齐或形成某种视觉效果 -->
z
<!-- 但由于此命令后没有其他形状或路径连接到此点，V512和随后的Z可能是为了保持路径的完整性或为了后续可能的修改预留 -->
M640 512
<!-- 绝对移动到(640, 512) -->
h-63.2
<!-- 水平移动到(576.8, 512) -->
v63.2
<!-- 垂直移动到(576.8, 575.2) -->
H640
<!-- 水平移动到(640, 575.2) -->
V512
<!-- 垂直移动回到(640, 512)，形成一个小的正方形或矩形，与之前的类似但位置不同 -->
z"
<!-- 表示路径的结束，回到起始点（对于这个小矩形） -->
horiz-adv-x="1024"
<!-- 定义图标的水平高级宽度 -->
/>
<glyph
glyph-name="danju"
<!-- 定义图标的名称为“danju” -->
unicode="&#59547;"
<!-- 定义图标对应的Unicode编码 -->
d="M800 704H640
<!-- 从坐标(800, 704)开始，水平移动到(640, 704) -->
c0 70.4-57.6 128-128 128
<!-- 从上一点开始，绘制一条三次贝塞尔曲线（或直线），表示水平不移动，垂直上升70.4到128的高度变化 -->
s-128-57.6-128-128
<!-- 从上一点开始，使用对称的控制点绘制另一条三次贝塞尔曲线（或直线），表示垂直下降到原来的高度 -->
H224
<!-- 水平移动到(224, 704) -->
c-17.6 0-32-14.4-32-32
<!-- 从上一点开始，绘制一条三次贝塞尔曲线（或直线），表示微小的水平移动和垂直下降32 -->
v-704
<!-- 垂直移动到(224, 0) -->
c0-17.6 14.4-32 32-32
<!-- 从上一点开始，绘制一条三次贝塞尔曲线（或直线），表示微小的水平移动和垂直不变，但形成矩形的左下角 -->
h576
<!-- 水平移动到(800, 0) -->
c17.6 0 32 14.4 32 32
<!-- 从上一点开始，绘制一条三次贝塞尔曲线（或直线），表示微小的水平移动和垂直上升32，形成矩形的右下角 -->
V672
<!-- 垂直移动到(800, 672) -->
c0 17.6-14.4 32-32 32
<!-- 从上一点开始，绘制一条三次贝塞尔曲线（或直线），表示水平不移动，但垂直上升形成矩形的右上角 -->
z
<!-- 表示路径的结束，回到起始点，形成闭合路径（矩形） -->
m-288 32
<!-- 从上一个路径的结束点开始，水平向左移动288，准备绘制内部的小形状 -->
c17.6 0 32-14.4 32-32
<!-- 从上一点开始，绘制一条三次贝塞尔曲线（或直线），表示形成一个小圆形的上半部分 -->
s-14.4-32-32-32
<!-- 使用对称的控制点绘制另一条三次贝塞尔曲线（或直线），形成小圆形的下半部分 -->
s-32 14.4-32 32
<!-- 再次使用对称的控制点，但这次是为了回到原始高度，完成小圆形的绘制 -->
s14.4 32 32 32
<!-- 完成小圆形的闭合路径（虽然这里没有直接用Z命令，但通过连续的S命令实现了闭合） -->
z
<!-- 但由于S命令的连续性，这里的Z可能是隐含的或为了保持路径命令的一致性而添加的 -->
m64-608
<!-- 从上一个路径的结束点开始，向右移动64，准备绘制另一个形状 -->
H320
<!-- 水平移动到(320, -608)（但由于是相对于上一个点，且上一个点已经在某个高度，所以这里实际上是向左移动并垂直下降） -->
v64
<!-- 垂直移动到(320, -544) -->
h256
<!-- 水平移动到(576, -544) -->
v-64
<!-- 垂直移动到(576, -608)，形成一个矩形或条形的底部 -->
z
<!-- 表示路径的结束，但这里并没有回到起始点，因为是一个开放的-->
<glyph glyph-name="morentouxiang" unicode="&#59593;" d="M512 832C264.8 832 64 631.2 64 384s200.8-448 448-448 448 200.8 448 448S759.2 832 512 832zM384.8 520c4 64 56 115.2 120 119.2 74.4 4 135.2-55.2 135.2-128 0-70.4-57.6-128-128-128-73.6 0-132 62.4-127.2 136.8zM768 149.6c0-12-9.6-21.6-21.6-21.6H278.4c-12 0-21.6 9.6-21.6 21.6v64c0 84.8 170.4 128 255.2 128 84.8 0 255.2-42.4 255.2-128l0.8-64z" horiz-adv-x="1024" />
<glyph glyph-name="morentouxiang" unicode="&#59593;"
d="M512 832
<!-- 设置圆心的x坐标，并定义该点为头像的顶部 -->
C264.8 832
<!-- 从圆心向左绘制一条贝塞尔曲线到左侧的点，该点位于顶部 -->
64 631.2
<!-- 从左侧的点向下绘制一条直线到左侧的底部点 -->
64 384
<!-- 从左侧的底部点向右绘制一条水平直线到右侧的底部点 -->
s200.8-448
<!-- 从右侧的底部点向上绘制一条对称的曲线到右侧的中间点 -->
448-448
<!-- 从右侧的中间点向左绘制一条直线到圆心的下侧点 -->
448 200.8
<!-- 从圆心的下侧点向上绘制一条直线到圆心的上侧点 -->
448 448
<!-- 从圆心的上侧点向右绘制一条直线到右侧的顶部点 -->
S759.2 832
<!-- 从右侧的顶部点向左绘制一条对称的曲线回到圆心 -->
512 832z
<!-- 关闭路径，形成一个完整的圆形头像 -->
M384.8 520
<!-- 设置新路径的起点，准备绘制眼睛或脸部特征 -->
c4 64
<!-- 从起点向右上方绘制一条贝塞尔曲线，模拟眼睛或脸部特征的上边缘 -->
56 115.2
<!-- 从上边缘的点继续向右上方绘制一条更长的贝塞尔曲线 -->
120 119.2
<!-- 到达眼睛或脸部特征的最右侧点 -->
74.4 4
<!-- 从最右侧点向左下方绘制一条较短的贝塞尔曲线，形成眼睛或脸部特征的下边缘的一部分 -->
135.2-55.2
<!-- 从下边缘的点继续向左下方绘制一条贝塞尔曲线，模拟眼睛或脸部的凹陷部分 -->
135.2-128
<!-- 到达眼睛或脸部特征的底部点 -->
0-70.4
<!-- 从底部点向上绘制一条垂直直线，模拟眼睛或脸部特征的垂直高度 */
-57.6-128
<!-- 从垂直高度的顶部点向左下方绘制一条直线，模拟另一只眼睛或脸部特征的左侧边缘 */
-128-128
<!-- 到达另一只眼睛或脸部特征的底部点 */
-73.6 0
<!-- 从另一只眼睛或脸部特征的底部点向右上方绘制一条直线，模拟脸部下半部分的宽度 */
-132 62.4
<!-- 从脸部下半部分的右侧点向左上方绘制一条贝塞尔曲线，模拟下巴的轮廓 */
-127.2 136.8z
<!-- 到达下巴的顶部点，并关闭路径，形成完整的眼睛或脸部特征 */
M768 149.6
<!-- 设置新路径的起点，准备绘制嘴巴或下巴下方的装饰物 -->
c0-12
<!-- 从起点向下绘制一条垂直直线，模拟嘴巴或下巴下方的装饰物的上边缘 */
-9.6-21.6
<!-- 从上边缘的点向左下方绘制一条直线，模拟装饰物的左侧边缘 */
-21.6-21.6
<!-- 到达装饰物的底部点 */
H278.4
<!-- 从底部点向左水平绘制一条直线，模拟装饰物的水平宽度 */
c-12 0
<!-- 从水平宽度的左侧点向右绘制一条垂直直线，模拟装饰物的右侧边缘 */
-21.6 9.6
<!-- 从右侧边缘的点向上绘制一条直线，模拟装饰物的下边缘 */
-21.6 21.6
<!-- 到达装饰物的顶部点 */
v64
<!-- 从顶部点向上垂直绘制一条直线，模拟装饰物的高度 */
c0 84.8
<!-- 从装饰物的高度的顶部点向右绘制一条水平直线，模拟下巴下方的空白区域 */
170.4 128
<!-- 从空白区域的右侧点向右上方绘制一条直线，模拟下巴下方的装饰物的右侧边缘 */
255.2 128
<!-- 到达装饰物的最右侧点 */
84.8 0
<!-- 从装饰物的最右侧点向左绘制一条水平直线，模拟装饰物的水平宽度 */
255.2-42.4
<!-- 从水平宽度的左侧点向左下方绘制一条直线，模拟下巴下方的空白区域的左侧边缘 */
255.2-128
<!-- 到达空白区域的底部点 */
l0.8-64z
<!-- 从空白区域的底部点向左下方绘制一条直线，并关闭路径，完成装饰物的绘制 */
horiz-adv-x="1024" />
<!-- 设置水平方向上的高级宽度为1024 -->
<glyph glyph-name="baobiao" unicode="&#59650;" d="M960 224V736c0 17.6-14.4 32-32 32H544V832h-64v-64H96c-17.6 0-32-14.4-32-32v-512c0-17.6 14.4-32 32-32h384v-50.4l-152.8-89.6 32-56 144 84h19.2l144-84 32 56L544 141.6V192h384c17.6 0 32 14.4 32 32zM790.4 640l41.6-48.8-316.8-270.4L352 458.4 233.6 359.2 192.8 408l160 133.6 163.2-137.6L790.4 640z" horiz-adv-x="1024" />
<glyph glyph-name="baobiao" unicode="&#59650;" d="M960 224V736c0 17.6-14.4 32-32 32H544V832h-64v-64H96c-17.6 0-32-14.4-32-32v-512c0-17.6 14.4-32 32-32h384v-50.4l-152.8-89.6 32-56 144 84h19.2l144-84 32 56L544 141.6V192h384c17.6 0 32 14.4 32 32z <!-- 绘制宝表图标的外框 -->
M790.4 640l41.6-48.8-316.8-270.4L352 458.4 233.6 359.2 192.8 408l160 133.6 163.2-137.6L790.4 640z" <!-- 绘制宝表图标内部的装饰线条 -->
horiz-adv-x="1024" /> <!-- 水平方向上的高级宽度设置为1024 -->
<glyph glyph-name="lock_fill" unicode="&#59145;" d="M394.304 579.392A124.672 124.672 0 0 0 518.72 704a124.704 124.704 0 0 0 124.48-124.608V480h-248.896V579.392z <!-- 绘制锁的上半部分包括锁体和锁舌 -->
M544 192a32 32 0 0 0-64 0v128a32 32 0 0 0 64 0v-128z <!-- 绘制锁的中间部分，即锁芯 -->
m256.256 288H707.2V579.392A188.736 188.736 0 0 1 518.72 768c-103.904 0-188.416-84.608-188.416-188.608V480h-106.56A64 64 0 0 1 160 415.904v-319.84A64 64 0 0 1 223.744 32h576.512A64 64 0 0 1 864 96.064v319.84A64 64 0 0 1 800.256 480z" <!-- 绘制锁的下半部分，包括锁链 -->
horiz-adv-x="1024" /> <!-- 水平方向上的高级宽度设置为1024 -->
<glyph glyph-name="lock_fill" unicode="&#59145;" d="M394.304 579.392A124.672 124.672 0 0 0 518.72 704a124.704 124.704 0 0 0 124.48-124.608V480h-248.896V579.392zM544 192a32 32 0 0 0-64 0v128a32 32 0 0 0 64 0v-128z m256.256 288H707.2V579.392A188.736 188.736 0 0 1 518.72 768c-103.904 0-188.416-84.608-188.416-188.608V480h-106.56A64 64 0 0 1 160 415.904v-319.84A64 64 0 0 1 223.744 32h576.512A64 64 0 0 1 864 96.064v319.84A64 64 0 0 1 800.256 480z" horiz-adv-x="1024" />

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

Write Preview
Loading…
Cancel
Save