5 |
46 |
47 |
4 |
48 |
22 |
25 |
26 |
27 |
28 |
29 |
30 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/app/modules/auth/auth.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/app/modules/auth/authController.js:
--------------------------------------------------------------------------------
1 | window.APP.controller("AuthCtrl", [
2 | "$rootScope",
3 | "$scope",
4 | "$state",
5 | "$timeout",
6 | "MessageService",
7 | "AuthService",
8 | ($rootScope, $scope, $state, $timeout, MessageService, AuthService) => {
9 |
10 | $scope.auth = () => {
11 | $scope.busy = true;
12 | AuthService.auth($scope.accessToken).then(data => {
13 | data.accessToken = $scope.accessToken;
14 | localStorage.setItem("user", JSON.stringify(data));
15 | $rootScope.user = data;
16 | ipc.send("login-success");
17 | $state.go("main.topicList");
18 | }).catch(error => {
19 | MessageService.error("登录出错，请输入正确的AccessToken");
20 | }).finally(() => {
21 | $timeout(() => {
22 | $scope.busy = false;
23 | }, 500);
24 | });
25 | };
26 | }]);
--------------------------------------------------------------------------------
/app/modules/auth/authService.js:
--------------------------------------------------------------------------------
1 | window.APP.factory("AuthService", ["RequestService", (RequestService) => {
2 | var service = {};
3 |
4 | service.auth = accessToken => {
5 | return RequestService.post(
6 | "https://cnodejs.org/api/v1/accesstoken",
7 | { accesstoken: accessToken }
8 | ).then(data => {
9 | return data;
10 | });
11 | };
12 |
13 | return service;
14 | }]);
--------------------------------------------------------------------------------
/app/modules/common/editor/editorDirective.js:
--------------------------------------------------------------------------------
1 | window.APP.directive("mEditor", [
2 | "$log",
3 | ($log) => {
4 |
5 | return {
6 | restrict: 'EA',
7 | require: '?ngModel',
8 | link: ($scope, $element, $attrs, ngModel) => {
9 | $element.append(``);
10 | let mditor = Mditor.fromTextarea($element.find("textarea")[0]);
11 | mditor.on("ready", () => {
12 | mditor.toolbar.removeItem("help");
13 | mditor.toolbar.removeItem("toggleSplit");
14 |
15 | if (!ngModel) {
16 | return ;
17 | }
18 |
19 | ngModel.$render = () => {
20 | mditor.value = ngModel.$viewValue || "";
21 | };
22 | ngModel.$render();
23 |
24 | // 直接监控元素，更加流畅
25 | let $textarea = $element.find(".textarea");
26 | $textarea.on("blur keydown keyup change", () => {
27 | $scope.$apply(() => {
28 | ngModel.$setViewValue($textarea.val());
29 | });
30 | });
31 | });
32 | }
33 | };
34 | }]);
--------------------------------------------------------------------------------
/app/modules/common/message/message.html:
--------------------------------------------------------------------------------
1 |
3 | 
4 |
6 |
4 | Welcome CNDOE Desktop
5 |
7 |
26 |
8 |
11 |
12 |
13 |
21 |
22 | 如何获取AccessToken?
23 |
24 |
25 |
27 | Desktop of CNODE
28 | By P-ppc
29 | Github 30 |
31 | 28 | By P-ppc
29 | Github 30 |
2 |
3 |
9 |
--------------------------------------------------------------------------------
/app/modules/common/message/messageDirective.js:
--------------------------------------------------------------------------------
1 | window.APP.directive("mMessage", [
2 | "$timeout",
3 | "$animate",
4 | ($timeout, $animate) => {
5 |
6 | return {
7 | restrict: 'EA',
8 | replace: true,
9 | scope: {
10 | mImgSrc: '@',
11 | mMessageContent: '@',
12 | mMessageClose: '@',
13 | mDuration: '@'
14 | },
15 | templateUrl: 'modules/common/message/message.html',
16 | link: ($scope, $element, $attrs, $transclude) => {
17 | let $body = $element.parent();
18 | $animate.enter($element, $body, $body.children(':last'));
19 |
20 | $scope.showClose = () => $scope.mMessageClose === "true";
21 | $scope.close = () => $animate.leave($element);
22 |
23 | let duration = parseInt($scope.mDuration);
24 | if (duration > 0) {
25 | $timeout(() => $scope.close(), duration);
26 | }
27 | }
28 | }
29 | }]);
--------------------------------------------------------------------------------
/app/modules/common/message/messageService.js:
--------------------------------------------------------------------------------
1 | window.APP.factory("MessageService", [
2 | "$rootScope",
3 | "$compile",
4 | ($rootScope, $compile) => {
5 |
6 | let service = {},
7 | $body = $('body'),
8 | imgs = {
9 | success: 'img/icon_success.svg',
10 | info: 'img/icon_info.svg',
11 | warning: 'img/icon_warning.svg',
12 | error: 'img/icon_error.svg'
13 | },
14 | defaultOptions = {
15 | showClose: false,
16 | message: '',
17 | duration: 3000,
18 | type: 'success'
19 | };
20 |
21 | service.message = (options) => {
22 | options = $.extend({}, defaultOptions, options);
23 | let imgSrc = imgs[options.type] || imgs.success,
24 | html = `
28 |
`;
29 | $body.append($compile(html)($rootScope));
30 | };
31 |
32 | service.success = (msg) => {
33 | return service.message({
34 | type: "success",
35 | message: msg
36 | });
37 | };
38 |
39 | service.error = (msg) => {
40 | return service.message({
41 | type: "error",
42 | message: msg
43 | });
44 | };
45 |
46 | return service;
47 | }]);
--------------------------------------------------------------------------------
/app/modules/common/requestService.js:
--------------------------------------------------------------------------------
1 | window.APP.factory("RequestService", ["$q", "$http", ($q, $http) => {
2 | var service = {};
3 |
4 | service.post = (url, data, timeout) => {
5 | var defer = $q.defer();
6 | $http.post(url, $.param(data), {
7 | timeout: timeout || 5000
8 | }).success(resp => {
9 | if (resp.success) {
10 | defer.resolve(resp);
11 | } else {
12 | defer.reject(resp);
13 | }
14 | }).error((msg, code) => {
15 | defer.reject(code);
16 | });
17 | return defer.promise;
18 | };
19 |
20 | service.get = (url, data, timeout) => {
21 | var defer = $q.defer();
22 | if (data && !angular.equals({}, data)) {
23 | url = url + "?" + $.param(data);
24 | }
25 | $http.get(url, {
26 | timeout: timeout || 5000
27 | }).success(resp => {
28 | if (resp.success) {
29 | defer.resolve(resp);
30 | } else {
31 | defer.reject(resp);
32 | }
33 | }).error((msg, code) => {
34 | defer.reject(code);
35 | });
36 | return defer.promise;
37 | };
38 |
39 | return service;
40 | }]);
--------------------------------------------------------------------------------
/app/modules/directives/autofocusDirective.js:
--------------------------------------------------------------------------------
1 | window.APP.directive('mAutofocus', [
2 | () => {
3 |
4 | return {
5 | restrict: 'A',
6 | scope: {
7 | mAutofocus: '=',
8 | mFocusTarget: '@'
9 | },
10 | link: ($scope, $element, $attrs) => {
11 | var $target = $element;
12 | if ($scope.mFocusTarget) {
13 | $target = $element.find($scope.mFocusTarget);
14 | }
15 | $scope.$watch('mAutofocus', (newValue, oldValue) => {
16 | if (newValue === true) $target.focus();
17 | });
18 | }
19 | };
20 | }]);
--------------------------------------------------------------------------------
/app/modules/directives/hoverPopupDirective.js:
--------------------------------------------------------------------------------
1 | window.APP.directive("mHoverPopup", [
2 | () => {
3 | /* 返回元素是否位于Body左侧 */
4 | function isAtLeft ($ele) {
5 | let bodyWidth = $("body").width();
6 | let offset = $ele.offset();
7 | return (offset.left <= bodyWidth / 2);
8 | };
9 | /* 对于位于Body左侧的指令 添加left类, 右侧的指令 添加right类 */
10 | return {
11 | restrict: 'A',
12 | scope: {
13 | mHoverPopup: '@'
14 | },
15 | link: ($scope, $element, $attrs) => {
16 | $element.prepend(``)
17 | .append(`${$scope.mHoverPopup}`);
18 | if (isAtLeft($element)) {
19 | $element.addClass("left");
20 | } else {
21 | $element.addClass("right");
22 | }
23 | let paddingBottom = $element.css("padding-bottom");
24 | $element.find(".after, .before").css("margin-top", "-" + paddingBottom);
25 |
26 | $scope.$watch("mHoverPopup", (newValue, oldValue) => {
27 | $element.find(".after").text(newValue);
28 | });
29 | }
30 | };
31 | }]);
--------------------------------------------------------------------------------
/app/modules/directives/loadingButtonDirective.js:
--------------------------------------------------------------------------------
1 | window.APP.directive("mButtonLoading", [
2 | () => {
3 |
4 | return {
5 | restrict: 'A',
6 | scope: {
7 | mLoading: '=',
8 | mNormalText: '@',
9 | mLoadingText: '@',
10 | mLoadingClass: '@'
11 | },
12 | link: ($scope, $element, $attrs) => {
13 | $scope.$watch("mLoading", (newValue, oldValue) => {
14 | if (newValue) {
15 | $element.text($scope.mLoadingText);
16 | $element.addClass($scope.mLoadingClass);
17 | } else {
18 | $element.text($scope.mNormalText);
19 | $element.removeClass($scope.mLoadingClass);
20 | }
21 | })
22 | }
23 | }
24 | }]);
--------------------------------------------------------------------------------
/app/modules/directives/replyTrangleDirective.js:
--------------------------------------------------------------------------------
1 | /* this directive is just for a css trangle for a textarea */
2 | window.APP.directive("mReplyTrangle", [
3 | () => {
4 |
5 | return {
6 | restrict: 'A',
7 | link: ($scope, $element, $attrs) => {
8 | let $parent = $element.parent();
9 | $element.hover(() => {
10 | if (!$element.is(':focus')) $parent.addClass('focused');
11 | }, () => {
12 | if (!$element.is(':focus')) $parent.removeClass('focused');
13 | }).focus(() => {
14 | $parent.addClass('focused');
15 | }).blur(() => {
16 | $parent.removeClass('focused');
17 | });
18 | }
19 | };
20 | }]);
--------------------------------------------------------------------------------
/app/modules/main/main.html:
--------------------------------------------------------------------------------
1 |
2 |
21 | there will load some content!
22 |
23 |
--------------------------------------------------------------------------------
/app/modules/main/mainController.js:
--------------------------------------------------------------------------------
1 | window.APP.controller("mainCtrl", [
2 | "$rootScope",
3 | "$state",
4 | ($rootScope, $state) => {
5 |
6 | $rootScope.logout = () => {
7 | $rootScope.user = undefined;
8 | localStorage.removeItem("user");
9 | ipc.send("logout");
10 | $state.go("auth");
11 | };
12 | }]);
--------------------------------------------------------------------------------
/app/modules/topicEdit/topicEdit.html:
--------------------------------------------------------------------------------
1 |
3 |
20 |
4 |
5 | ![]()
6 |
7 |
8 |
16 |
17 |
18 |
19 |
2 |
3 |
--------------------------------------------------------------------------------
/app/modules/topicEdit/topicEditController.js:
--------------------------------------------------------------------------------
1 | window.APP.controller("topicEditCtrl", [
2 | "$scope",
3 | "$state",
4 | "$stateParams",
5 | "TopicInfoService",
6 | "TopicEditService",
7 | "MessageService",
8 | ($scope, $state, $stateParams, TopicInfoService, TopicEditService, MessageService) => {
9 |
10 | let topicId = $stateParams.topicId;
11 |
12 | $scope.params = {
13 | topic_id: topicId,
14 | content: '',
15 | tab: 'ask',
16 | title: ''
17 | };
18 | $scope.enable = true;
19 |
20 | $scope.init = () => {
21 | if (!topicId) {
22 | return;
23 | }
24 | TopicInfoService.getInfo({
25 | id: topicId,
26 | mdrender: false
27 | }).then(resp => {
28 | $scope.params.content = resp.data.content;
29 | $scope.params.title = resp.data.title;
30 | $scope.params.tab = resp.data.tab;
31 | }).catch(error => {
32 | MessageService.error("主题详情加载失败，请稍后重试");
33 | $scope.enable = false;
34 | });
35 | };
36 | $scope.init();
37 |
38 | $scope.disableSubmit = () => {
39 | let params = $scope.params;
40 | return !($scope.enable && !!params.content && !!params.title && !!params.tab && params.title.length > 10 && params.title.length < 100);
41 | };
42 |
43 | $scope.submit = () => {
44 | $scope.busy = true;
45 | TopicEditService.save($scope.params).then(resp => {
46 | MessageService.success("话题发布成功");
47 | $state.go("main.topicList");
48 | }).catch(error => {
49 | MessageService.error("话题发布失败");
50 | }).finally(() => {
51 | $scope.busy = false;
52 | });
53 | };
54 | }]);
--------------------------------------------------------------------------------
/app/modules/topicEdit/topicEditService.js:
--------------------------------------------------------------------------------
1 | window.APP.factory("TopicEditService", [
2 | "$rootScope",
3 | "RequestService",
4 | ($rootScope, RequestService) => {
5 |
6 | let service = {},
7 | createUrl = 'https://cnodejs.org/api/v1/topics',
8 | updateUrl = 'https://cnodejs.org/api/v1/topics/update';
9 |
10 | service.save = (params) => {
11 | params.accesstoken = $rootScope.user.accessToken;
12 | if (params.topic_id) {
13 | return RequestService.post(updateUrl, params);
14 | } else {
15 | return RequestService.post(createUrl, params);
16 | }
17 | };
18 |
19 | return service;
20 | }]);
--------------------------------------------------------------------------------
/app/modules/topicInfo/topicInfo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/app/modules/topicInfo/topicInfoController.js:
--------------------------------------------------------------------------------
1 | window.APP.controller("topicInfoCtrl", [
2 | "$scope",
3 | "$stateParams",
4 | "MessageService",
5 | "TopicInfoService",
6 | ($scope, $stateParams, MessageService, TopicInfoService) => {
7 |
8 | let topicId = $stateParams.topicId;
9 |
10 | function getTopicInfo () {
11 | TopicInfoService.getInfo({ id: topicId }).then(resp => {
12 | $scope.topicInfo = resp.data;
13 | }).catch(error => {
14 | console.log(error);
15 | });
16 | }
17 |
18 | getTopicInfo();
19 |
20 | $scope.toggleCollect = () => {
21 | $scope.busy = true;
22 | let promise;
23 | if ($scope.topicInfo.is_collect) {
24 | promise = TopicInfoService.unCollect($scope.topicInfo.id);
25 | } else {
26 | promise = TopicInfoService.collect($scope.topicInfo.id);
27 | }
28 |
29 | promise.then(resp => {
30 | let msg = $scope.topicInfo.is_collect ? "取消收藏成功" : "收藏成功";
31 | MessageService.success(msg);
32 | $scope.topicInfo.is_collect = !$scope.topicInfo.is_collect;
33 | }).catch(error => {
34 | let msg = ($scope.topicInfo.is_collect ? "取消收藏失败，" : "收藏失败，") + "请稍后重试";
35 | MessageService.error(msg);
36 | }).finally(() => {
37 | $scope.busy = false;
38 | });
39 | };
40 |
41 | $scope.replyParams = {
42 | topic_id: topicId,
43 | content: '',
44 | reply_id: undefined
45 | };
46 |
47 | $scope.reply = () => {
48 | $scope.replyBusy = true;
49 | TopicInfoService.reply($scope.replyParams.topic_id, $scope.replyParams.content, $scope.replyParams.reply_id)
50 | .then(resp => {
51 | $scope.replyParams.content = "";
52 | $scope.replyParams.reply_id = undefined;
53 | // FIXME: 这里重新获取主题详情，采用更好的方法
54 | getTopicInfo();
55 | MessageService.success("回复成功");
56 | }).catch(error => {
57 | MessageService.error("回复失败，请稍后重试");
58 | }).finally(() => {
59 | $scope.replyBusy = false;
60 | });
61 | };
62 |
63 | $scope.toggleReplyUp = (reply) => {
64 | let message;
65 | TopicInfoService.toggleReplyUp(reply.id).then(resp => {
66 | if (reply.is_uped) {
67 | message = "取消点赞成功";
68 | _.remove(reply.ups, (n) => n == $scope.user.id);
69 | } else {
70 | message = "点赞成功";
71 | reply.ups.push($scope.user.id);
72 | }
73 | reply.is_uped = !reply.is_uped;
74 | MessageService.success(message);
75 | }).catch(error => {
76 | if (reply.is_uped) {
77 | message = "取消点赞失败";
78 | } else {
79 | message = "点赞失败";
80 | }
81 | MessageService.error(message);
82 | });
83 | };
84 |
85 | $scope.replyTarget = {};
86 | /* 切换回复评论表单显示 */
87 | $scope.toggleReplyForm = (reply) => {
88 | if ($scope.replyTarget.reply_id == reply.id) {
89 | $scope.replyTarget = {};
90 | } else {
91 | $scope.replyTarget.topic_id = topicId;
92 | $scope.replyTarget.reply_id = reply.id;
93 | $scope.replyTarget.authorname = reply.author.loginname;
94 | $scope.replyTarget.content = '@' + reply.author.loginname + ' ';
95 | }
96 | };
97 |
98 | /* 回复评论 */
99 | $scope.targetReply = () => {
100 | $scope.replyBusy = true;
101 | TopicInfoService.reply($scope.replyTarget.topic_id, $scope.replyTarget.content, $scope.replyTarget.reply_id)
102 | .then(resp => {
103 | $scope.replyTarget = {};
104 | // FIXME: 这里重新获取主题详情，采用更好的方法
105 | getTopicInfo();
106 | MessageService.success("回复成功");
107 | }).catch(error => {
108 | MessageService.error("回复失败，请稍后重试");
109 | }).finally(() => {
110 | $scope.replyBusy = false;
111 | });
112 | };
113 |
114 | /* 使用markdown编辑器 */
115 | $scope.useMarkdown = () => {
116 | $scope.replyParams.content = '@' + $scope.replyTarget.authorname + ' ';
117 | $scope.replyParams.reply_id = $scope.replyTarget.reply_id;
118 | $scope.replyTarget = {};
119 | $scope.isUseMarkdown = true;
120 | };
121 |
122 | $scope.$watch("replyParams.content", (newValue, oldValue) => {
123 | if (newValue === '') {
124 | $scope.replyParams.reply_id = undefined;
125 | }
126 | });
127 | }]);
--------------------------------------------------------------------------------
/app/modules/topicInfo/topicInfoService.js:
--------------------------------------------------------------------------------
1 | window.APP.factory('TopicInfoService', [
2 | "$rootScope",
3 | 'RequestService',
4 | ($rootScope, RequestService) => {
5 |
6 | let service = {},
7 | infoUrl = 'https://cnodejs.org/api/v1/topic/',
8 | collectUrl = 'https://cnodejs.org/api/v1/topic_collect/collect',
9 | unCollectUrl = 'https://cnodejs.org/api/v1/topic_collect/de_collect',
10 | replyUpUrl = 'https://cnodejs.org/api/v1/reply/';
11 |
12 | service.getInfo = params => {
13 | let url = infoUrl + params.id;
14 | return RequestService.get(url, {
15 | accesstoken: $rootScope.user.accessToken,
16 | mdrender: params.mdrender || true
17 | });
18 | };
19 |
20 | service.collect = topic_id => {
21 | return RequestService.post(collectUrl, {
22 | accesstoken: $rootScope.user.accessToken,
23 | topic_id: topic_id
24 | });
25 | };
26 |
27 | service.unCollect = topic_id => {
28 | return RequestService.post(unCollectUrl, {
29 | accesstoken: $rootScope.user.accessToken,
30 | topic_id: topic_id
31 | });
32 | };
33 |
34 | service.reply = (topic_id, content, reply_id) => {
35 | let url = infoUrl + topic_id + '/replies';
36 | return RequestService.post(url, {
37 | accesstoken: $rootScope.user.accessToken,
38 | content: content,
39 | reply_id: reply_id
40 | });
41 | };
42 |
43 | service.toggleReplyUp = (reply_id) => {
44 | let url = replyUpUrl + reply_id + '/ups';
45 | return RequestService.post(url, {
46 | accesstoken: $rootScope.user.accessToken
47 | });
48 | };
49 |
50 | return service;
51 | }]);
--------------------------------------------------------------------------------
/app/modules/topicList/topicList.html:
--------------------------------------------------------------------------------
1 |
4 |
119 |
5 |
118 |
6 |
46 |
7 |
8 |
9 |
15 |
16 |
42 |
43 |
10 |
11 | ![]()
12 |
13 |
14 |
44 |
45 |
47 |
50 |
101 |
51 |
100 |
52 |
53 |
99 |
54 |
85 |
97 |
98 |
102 |
105 |
107 |
116 |
117 |
2 |
13 |
--------------------------------------------------------------------------------
/app/modules/topicList/topicListController.js:
--------------------------------------------------------------------------------
1 | window.APP.controller("topicListCtrl", [
2 | "$scope",
3 | "TopicListService",
4 | ($scope, TopicListService) => {
5 |
6 | function TopicList () {
7 | this.tab = "";
8 | this.items = [];
9 | this.busy = false;
10 | this.page = 0;
11 | }
12 |
13 | TopicList.prototype.changeTab = function (tab) {
14 | if (this.tab == tab) return;
15 | this.tab = tab;
16 | this.page = 0;
17 | this.busy = false;
18 | this.items = [];
19 | if (tab != "collect") {
20 | this.nextPage();
21 | } else {
22 | this.getCollect();
23 | }
24 | };
25 |
26 | TopicList.prototype.nextPage = function () {
27 | let self = this;
28 | if (self.busy) return;
29 | if (self.tab == "collect") return;
30 | self.busy = true;
31 |
32 | TopicListService.goPage(self.page + 1, self.tab).then(function (data) {
33 | self.items = self.items.concat(data);
34 | self.page = self.page + 1;
35 | self.busy = false;
36 | }).catch(function (error) {
37 | // TODO 处理异常
38 | self.busy = false;
39 | });
40 | };
41 |
42 | TopicList.prototype.getCollect = function () {
43 | let self = this;
44 | if (self.busy) return;
45 | self.busy = true;
46 |
47 | TopicListService.getCollect().then(function (resp) {
48 | self.items = self.items.concat(resp.data);
49 | self.busy = false;
50 | }).catch(function (error) {
51 | // TODO 处理异常
52 | self.busy = false;
53 | });
54 | };
55 |
56 | $scope.topicList = new TopicList();
57 | $scope.topicList.changeTab("all");
58 | }]);
--------------------------------------------------------------------------------
/app/modules/topicList/topicListService.js:
--------------------------------------------------------------------------------
1 | window.APP.factory("TopicListService", [
2 | "$rootScope",
3 | "RequestService",
4 | ($rootScope, RequestService) => {
5 | var service = {};
6 |
7 | service.currentPage = 0;
8 |
9 | service.goPage = (pageNum, tab) => {
10 | pageNum = pageNum || 0;
11 | tab = tab || "all";
12 |
13 | return RequestService.get("https://cnodejs.org/api/v1/topics", {
14 | limit: 40,
15 | page: pageNum,
16 | tab: tab
17 | }).then((data) => {
18 | service.currentPage = pageNum;
19 | return data.data;
20 | });
21 | };
22 |
23 | service.nextPage = tab => {
24 | return service.goPage(service.currentPage + 1, tab);
25 | };
26 |
27 | service.getCollect = () => {
28 | return RequestService.get("https://cnodejs.org/api/v1/topic_collect/" + $rootScope.user.loginname);
29 | };
30 |
31 | return service;
32 | }]);
--------------------------------------------------------------------------------
/app/modules/userCard/userCard.html:
--------------------------------------------------------------------------------
1 |
14 |
58 |
15 |
57 |
20 |
56 |
21 |
55 |
22 |
23 |
24 |
25 | ![]()
26 |
27 |
28 |
29 |
30 |
54 |
2 |
3 |
35 |
--------------------------------------------------------------------------------
/app/modules/userCard/userCardDirective.js:
--------------------------------------------------------------------------------
1 | /*
2 | * 用户信息卡片实现:
3 | * 外部传入用户名
4 | * 外部容器hover时进行显示
5 | * 加载过程中显示loading
6 | * 支持跳转到用户界面
7 | * 根据用户传入的用户名获取用户详细信息
8 | */
9 |
10 | window.APP.directive('mUserCard', [
11 | '$rootScope',
12 | 'UserInfoService',
13 | ($rootScope, UserInfoService) => {
14 | return {
15 | restrict: 'EA',
16 | replace: true,
17 | scope: {
18 | mUserName: '='
19 | },
20 | transclude: {
21 | content: '?content'
22 | },
23 | templateUrl: 'modules/userCard/userCard.html',
24 | link: ($scope, $element, $attrs) => {
25 | $element.hover(() => {
26 | if ($scope.userInfo) return;
27 | let isSelf = $scope.mUserName === $rootScope.user.loginname;
28 | UserInfoService.getUserInfo($scope.mUserName, isSelf).then(userInfo => {
29 | $scope.userInfo = userInfo;
30 | $scope.userInfo.isSelf = isSelf;
31 | }).catch(error => {
32 | console.log(error);
33 | });
34 | }, angular.noop);
35 | }
36 | }
37 | }]);
--------------------------------------------------------------------------------
/app/modules/userInfo/userInfo.html:
--------------------------------------------------------------------------------
1 |
4 |
34 |
5 |
16 |
6 | ![]()
7 |
8 |
9 |
10 |
15 | 11 | 12 | @ 13 |
14 |-
17 |
-
18 |
19 |
最近创建
20 |
21 | -
22 |
5
23 |最近回复
24 |
25 | -
26 |
27 |
积分
28 |
29 |
2 |
3 |
--------------------------------------------------------------------------------
/app/modules/userInfo/userInfoController.js:
--------------------------------------------------------------------------------
1 | window.APP.controller("userInfoCtrl", [
2 | "$scope",
3 | "$stateParams",
4 | "$rootScope",
5 | "UserInfoService",
6 | ($scope, $stateParams, $rootScope, UserInfoService) => {
7 |
8 | let loginname = $stateParams.loginname,
9 | isSelf = $stateParams.loginname === $rootScope.user.loginname;
10 |
11 | function getUserInfo () {
12 | UserInfoService.getUserInfo(loginname, isSelf).then(userInfo => {
13 | $scope.userInfo = userInfo;
14 | $scope.userInfo.isSelf = isSelf;
15 | }).catch(error => {
16 | console.log(error);
17 | });
18 | }
19 |
20 | $scope.selectedTab = "CREATE";
21 | $scope.selectTab = tab => {
22 | $scope.selectedTab = tab;
23 | };
24 |
25 | getUserInfo();
26 | }]);
--------------------------------------------------------------------------------
/app/modules/userInfo/userInfoService.js:
--------------------------------------------------------------------------------
1 | window.APP.factory("UserInfoService", [
2 | "$q",
3 | "$rootScope",
4 | "RequestService",
5 | ($q, $rootScope, RequestService) => {
6 |
7 | let service = {},
8 | infoUrl = "https://cnodejs.org/api/v1/user/",
9 | messageUrl = "https://cnodejs.org/api/v1/messages";
10 |
11 | service.getUserInfo = (loginname, isSelf) => {
12 | let defer = $q.defer(),
13 | promises = [ RequestService.get(infoUrl + loginname) ];
14 |
15 | if (isSelf) {
16 | promises.push(RequestService.get(messageUrl, {
17 | accesstoken: $rootScope.user.accessToken,
18 | mdrender: false
19 | }));
20 | }
21 | $q.all(promises).then(([infoResp, messageResp]) => {
22 | let userInfo = infoResp.data;
23 | if (isSelf) {
24 | userInfo.unReadMessages = messageResp.data.hasnot_read_messages;
25 | userInfo.hasReadMessages = messageResp.data.has_read_messages;
26 | }
27 | defer.resolve(userInfo);
28 | });
29 | return defer.promise;
30 | };
31 |
32 | return service;
33 | }]);
--------------------------------------------------------------------------------
/app/style/css/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/P-ppc/cnodejs/433d4343e67f1aa30b8a8c29d185216177c0c09d/app/style/css/.gitkeep
--------------------------------------------------------------------------------
/app/style/sass/base.scss:
--------------------------------------------------------------------------------
1 | // 颜色变量
2 | // 主色
3 | $light-blue: #58B7FF;
4 | $blue: #20A0FF;
5 | $dark-blue: #1D8CE0;
6 | // 辅助色
7 | $success: #13CE66;
8 | $warning: #F7BA2A;
9 | $danger: #FF4949;
10 | // 中性色
11 | $black: #1F2D3D;
12 | $light-black: #324057;
13 | $extra-light-black: #475669;
14 |
15 | $silver: #8492A6;
16 | $light-silver: #99A9BF;
17 | $extra-light-silver: #C0CCDA;
18 |
19 | $gray: #D3DCE6;
20 | $light-gray: #E5E9F2;
21 | $extra-light-gray: #EFF2F7;
22 |
23 | $dark-white: #F9FAFC;
24 | $white: #FFFFFF;
25 |
26 | $rem: 10px;
27 |
28 | // reset
29 | * {
30 | margin: 0;
31 | padding: 0;
32 | }
33 |
34 | ul {
35 | list-style: none;
36 | }
37 |
38 | html {
39 | font-size: 12px;
40 | }
41 |
42 | body {
43 | font-size: 1.6 * $rem;
44 | font-family: Helvetica, Tahoma, Arial, STXihei, “华文细黑”, “Microsoft YaHei”, “微软雅黑”, sans-serif;
45 | color: #1f2d3d;
46 | }
47 |
48 | a {
49 | cursor: pointer;
50 | }
51 |
52 | ::-webkit-scrollbar {
53 | width: 5px;
54 | height: 5px;
55 | }
56 |
57 | ::-webkit-scrollbar-thumb {
58 | background: #ccc;
59 | }
60 |
61 | ::-webkit-scrollbar-corner {
62 | background: transparent;
63 | }
64 |
65 | ::-webkit-scrollbar-track {
66 | background: transparent;
67 | }
68 |
69 | // 文字大小
70 | .h1 {
71 | font-size: 2 * $rem;
72 | }
73 |
74 | .h2 {
75 | font-size: 1.8 * $rem;
76 | }
77 |
78 | .h3 {
79 | font-size: 1.6 * $rem;
80 | }
81 |
82 | .text-regular {
83 | font-size: 1.4 * $rem;
84 | }
85 |
86 | .text-small {
87 | font-size: 1.3 * $rem;
88 | }
89 |
90 | .text-smaller {
91 | font-size: 1.2 * $rem;
92 | }
93 |
94 | // TODO 文字组合
95 |
96 |
97 | // 按钮
98 | .btn {
99 | display: inline-block;
100 | line-height: 1;
101 | white-space: nowrap;
102 | cursor: pointer;
103 | background: $white;
104 | border: 1px solid #bfcbd9;
105 | color: $black;
106 | -webkit-appearance: none;
107 | text-align: center;
108 | box-sizing: border-box;
109 | outline: none;
110 | margin: 0;
111 | padding: 1 * $rem 1.5 * $rem;
112 | font-size: 1.4 * $rem;
113 | border-radius: .2 * $rem;
114 |
115 | box-shadow: .2 * $rem .2 * $rem .1 * $rem #dde;
116 |
117 | &.disabled,
118 | &[disabled],
119 | &:hover.disabled,
120 | &:hover[disabled] {
121 | color: #bfcbd9 !important;
122 | cursor: not-allowed !important;
123 | background-image: none !important;
124 | background-color: #eef1f6;
125 | border-color: #d1dbe5 !important;
126 | box-shadow: none !important;
127 | }
128 |
129 | .icon + span {
130 | margin-left: .5 * $rem;
131 | }
132 | }
133 |
134 | .btn + .btn {
135 | margin-left: 1 * $rem;
136 | }
137 |
138 | .btn-large {
139 | padding: 1.1 * $rem 1.9 * $rem;
140 | font-size: 1.6 * $rem;
141 | }
142 |
143 | .btn-small {
144 | padding: .7 * $rem .9 * $rem;
145 | font-size: 1.2 * $rem;
146 | }
147 |
148 | .btn-mini {
149 | padding: .4 * $rem;
150 | font-size: 1.2 * $rem;
151 | }
152 |
153 | .btn-default {
154 | &.disabled,
155 | &[disabled],
156 | &:hover.disabled,
157 | &:hover[disabled] {
158 | background-color: $white;
159 | border-color: #d1dbe5;
160 | color: #bfcbd9;
161 | }
162 |
163 | &:hover {
164 | color: $blue;
165 | border-color: $blue;
166 | }
167 |
168 | &:active {
169 | color: #1d90e6;
170 | border-color: #1d90e6;
171 | }
172 | }
173 |
174 | .btn-primary {
175 | color: $white;
176 | background: $blue;
177 | border-color: $blue;
178 |
179 | &:hover {
180 | background: #4db3ff;
181 | border-color: #4db3ff;
182 | }
183 |
184 | &:active {
185 | background: #1d90e6;
186 | border-color: #1d90e6;
187 | color: $white;
188 | }
189 |
190 | &.btn-loading {
191 | background: #4db3ff;
192 | border-color: #4db3ff;
193 | pointer-events: none;
194 | }
195 | }
196 |
197 | .btn-text {
198 | border: none;
199 | color: $blue;
200 | background: transparent;
201 | padding-left: 0;
202 | padding-right: 0;
203 |
204 | box-shadow: none;
205 |
206 | &.disabled,
207 | &[disabled],
208 | &:hover.disabled,
209 | &:hover[disabled] {
210 | background-color: transparent;
211 | }
212 |
213 | &:hover {
214 | color: #4db3ff;
215 | }
216 |
217 | &:active {
218 | color: #1d90e6;
219 | }
220 |
221 | &.normal,
222 | &:hover.normal {
223 | @extend .btn.disabled;
224 | cursor: pointer !important;
225 | background-color: transparent !important;
226 | }
227 | }
228 |
229 | .btn-success {
230 | color: $white;
231 | background-color: $success;
232 | border-color: $success;
233 |
234 | &:hover {
235 | background: #42d885;
236 | border-color: #42d885;
237 | }
238 |
239 | &:active {
240 | background: #11b95c;
241 | border-color: #11b95c;
242 | }
243 |
244 | &.btn-loading {
245 | background: #42d885;
246 | border-color: #42d885;
247 | pointer-events: none;
248 | }
249 | }
250 |
251 | .btn-warning {
252 | color: $white;
253 | background-color: $warning;
254 | border-color: $warning;
255 |
256 | &:hover {
257 | background: #f9c855;
258 | border-color: #f9c855;
259 | }
260 |
261 | &:active {
262 | background: #dea726;
263 | border-color: #dea726;
264 | }
265 | }
266 |
267 | .btn-danger {
268 | color: $white;
269 | background-color: $danger;
270 | border-color: $danger;
271 |
272 | &:hover {
273 | background: #ff6d6d;
274 | border-color: #ff6d6d;
275 | }
276 |
277 | &:active {
278 | background: #e64242;
279 | border-color: #e64242;
280 | }
281 | }
282 |
283 | .btn-info {
284 | color: $white;
285 | background-color: #50bfff;
286 | border-color: #50bfff;
287 |
288 | &:hover {
289 | background: #73ccff;
290 | border-color: #73ccff;
291 | }
292 |
293 | &:active {
294 | background: #48ace6;
295 | border-color: #48ace6;
296 | }
297 | }
298 |
299 | // 输入框
300 | input[type=text],
301 | input[type=password] {
302 | outline: none;
303 | -webkit-appearance: none;
304 | background-color: $white;
305 | background-image: none;
306 | border: 1px solid #bfcbd9;
307 | border-radius: .2 & $rem;
308 | box-sizing: border-box;
309 | color: #1f2d3d;
310 | display: block;
311 | font-size: inherit;
312 |
313 | height: 3.6 * $rem;
314 | line-height: 1;
315 | padding: .3 * $rem 1 * $rem;
316 |
317 | transition: border-color .2s cubic-bezier(.645,.045,.355,1);
318 |
319 | &:hover {
320 | border-color: #8391a5;
321 | }
322 |
323 | &:focus {
324 | border-color: #20a0ff;
325 | }
326 | }
327 |
328 | select {
329 | border: 1px solid #bfcbd9;
330 | border-radius: .2 & $rem;
331 | height: 3.6 * $rem;
332 | line-height: 1;
333 | padding: .3 * $rem 1 * $rem;
334 | font-size: inherit;
335 | }
336 |
337 | .no-shadow {
338 | box-shadow: none;
339 | }
340 |
341 | [m-hover-popup] {
342 | position: relative;
343 |
344 | & .after,
345 | & .before {
346 | display: none;
347 | z-index: 100000;
348 | }
349 |
350 | &:hover .after,
351 | &:hover .before {
352 | display: block;
353 | position: absolute;
354 | top: 100%;
355 | }
356 |
357 | &:hover .after {
358 | transform: translateY(4px);
359 | padding: 4px 8px;
360 | background: rgba(0, 0, 0, .7);
361 | border-radius: 2px;
362 | line-height: 12px;
363 | font-size: 12px;
364 | color: #fff;
365 | }
366 |
367 | &:hover .before {
368 | width: 0;
369 | height: 0;
370 | border-left: 4px solid transparent;
371 | border-right: 4px solid transparent;
372 | border-bottom: 4px solid rgba(0, 0, 0, .7);
373 | }
374 |
375 | &.left:hover {
376 | & .after {
377 | left: 0;
378 | }
379 |
380 | & .before {
381 | left: 5px;
382 | }
383 | }
384 |
385 | &.right:hover {
386 | & .after {
387 | right: 0;
388 | }
389 |
390 | & .before {
391 | right: 5px;
392 | }
393 | }
394 | }
--------------------------------------------------------------------------------
/app/style/sass/editor.scss:
--------------------------------------------------------------------------------
1 | .mditor {
2 | height: 280px !important;
3 |
4 | & .head {
5 | background: #fff;
6 | }
7 | }
--------------------------------------------------------------------------------
/app/style/sass/login.scss:
--------------------------------------------------------------------------------
1 | .login-container {
2 | height: 100%;
3 | width: 100%;
4 | position: relative;
5 | }
6 |
7 | .login-logo {
8 | text-align: center;
9 | }
10 |
11 | .login-logo img {
12 | margin: 50px 0 30px 0;
13 | height: 160px;
14 | width: 160px;
15 | border-radius: 50%;
16 | }
17 |
18 | .login-logo p {
19 | margin-bottom: 60px;
20 | font-size: 20px;
21 | color: #838383;
22 | }
23 |
24 | .login-form {
25 | margin: auto;
26 | width: 90%;
27 | }
28 |
29 | .login-form input[type=password] {
30 | width: 100%;
31 | margin-bottom: 20px;
32 | }
33 |
34 | .login-form button {
35 | width: 100%;
36 |
37 | font-size: 20px;
38 | padding: 13px;
39 | margin-bottom: 10px;
40 | }
41 |
42 | .login-desc {
43 | position: absolute;
44 | bottom: 20px;
45 | width: 100%;
46 |
47 | text-align: center;
48 | font-size: 14px;
49 | color: #aab9c7;
50 | line-height: 18px;
51 | }
52 |
53 | .login-form-input {
54 | position: relative;
55 | height: 40px;
56 |
57 | margin-bottom: 20px;
58 | }
59 |
60 | .login-form-input label {
61 | position: absolute;
62 | left: 0;
63 | top: 0;
64 |
65 | height: 40px;
66 | line-height: 40px;
67 | width: 20px;
68 |
69 | color: #aab9c7;
70 | font-size: 20px;
71 | }
72 |
73 | .login-form-input input {
74 | border: none;
75 | border-bottom: 1px solid #ccc;
76 | box-sizing: border-box;
77 | padding-left: 30px;
78 | }
79 |
80 | .login-form-help {
81 | font-size: 14px;
82 | }
83 |
84 | .login-form-help label {
85 | color: #838383;
86 | cursor: pointer;
87 | user-select: none;
88 | }
89 |
90 | .login-form-help label input[type=checkbox] {
91 | cursor: pointer;
92 | }
93 |
94 | .login-form-help a {
95 | color: #4f6aec;
96 | text-decoration: none;
97 | float: right;
98 | }
99 |
100 | input:-webkit-autofill {
101 | -webkit-box-shadow: 0 0 0px 1000px white inset;
102 | }
--------------------------------------------------------------------------------
/app/style/sass/main.scss:
--------------------------------------------------------------------------------
1 | html, body {
2 | height: 100%;
3 | width: 100%;
4 | }
5 |
6 | body {
7 | margin: 0 auto;
8 | display: flex;
9 |
10 | .sidebar {
11 | width: 50px;
12 | flex-shrink: 0;
13 | background: #7a8fdf;
14 | box-shadow: 5px 0 5px #bfc8ec;
15 | position: relative;
16 |
17 | .logo {
18 | height: 50px;
19 | background: #8194e0;
20 |
21 | img {
22 | height: 40px;
23 | width: 40px;
24 | margin-left: 5px;
25 | margin-top: 5px;
26 |
27 | border-radius: 50%;
28 | cursor: pointer;
29 | }
30 | }
31 |
32 | .menu-list {
33 | .menu-item {
34 | height: 40px;
35 | line-height: 40px;
36 | width: 100%;
37 |
38 | color: #fff;
39 | font-size: 20px;
40 | text-align: center;
41 | color: #b6c1ed;
42 | cursor: pointer;
43 | }
44 | }
45 |
46 | .setting {
47 | position: absolute;
48 | bottom: 0;
49 | left: 0;
50 | height: 40px;
51 | line-height: 40px;
52 | width: 100%;
53 |
54 | color: #fff;
55 | font-size: 20px;
56 | text-align: center;
57 | cursor: pointer;
58 | }
59 | }
60 |
61 | .container {
62 | flex-grow: 1;
63 | display: flex;
64 | background: #dde6ed;
65 | }
66 |
67 | .main {
68 | width: 100%;
69 | display: flex;
70 | flex-direction: column;
71 |
72 | > .top-navbar {
73 | flex-shrink: 0;
74 | height: 40px;
75 | background: #fff;
76 | box-shadow: 0 3px 3px #bfc8ec;
77 | position: relative;
78 | z-index: 1000;
79 |
80 | .tabs {
81 | position: absolute;
82 | top: 0;
83 | left: 0;
84 |
85 | height: 100%;
86 | line-height: 40px;
87 | margin-left: 15px;
88 | font-size: 14px;
89 | color: #909090;
90 | cursor: pointer;
91 | user-select: none;
92 |
93 | .tab-item {
94 | box-sizing: border-box;
95 | padding-right: 10px;
96 | border-right: 1px solid #eaeaea;
97 |
98 | &:not(:first-child) {
99 | margin-left: 8px;
100 | }
101 |
102 | &:last-child {
103 | border-right: none;
104 | }
105 |
106 | &.selected {
107 | color: #007fff;
108 | }
109 |
110 | &:hover {
111 | color: #007fff;
112 | }
113 | }
114 | }
115 |
116 | .options {
117 | position: absolute;
118 | right: 0;
119 | top: 0;
120 |
121 | height: 100%;
122 | line-height: 40px;
123 | margin-right: 15px;
124 | font-size: 24px;
125 |
126 | .option-item {
127 | color: #bddae0;
128 | display: inline-block;
129 | margin-right: 10px;
130 | cursor: pointer;
131 | }
132 | }
133 | }
134 |
135 | > .content {
136 | flex-grow: 1;
137 | overflow-y: auto;
138 | }
139 | }
140 | }
141 |
142 | .panel {
143 | width: 96%;
144 | margin: 10px auto;
145 | }
146 |
147 | .list {
148 | .item {
149 | background: #fff;
150 | margin-bottom: 5px;
151 | width: 100%;
152 | box-shadow: 1px 1px 1px #ccc;
153 |
154 | display: flex;
155 |
156 | &:hover {
157 | box-shadow: 2px 2px 2px #ccc;
158 | }
159 |
160 | > .item-left-part {
161 | width: 58px;
162 | flex-shrink: 0;
163 | box-sizing: border-box;
164 | padding-left: 15px;
165 | padding-top: 10px;
166 |
167 | img {
168 | height: 48px;
169 | width: 48px;
170 | border-radius: 50%;
171 | cursor: pointer;
172 | }
173 | }
174 |
175 | > .item-right-part {
176 | flex-grow: 1;
177 | position: relative;
178 | z-index: 999;
179 | box-sizing: border-box;
180 | padding-left: 15px;
181 | padding-top: 10px;
182 | padding-right: 15px;
183 | }
184 | }
185 | }
186 |
187 | .item-right-part {
188 | > .title {
189 | margin-bottom: 10px;
190 | font-size: 16px;
191 | font-weight: 600;
192 | color: #615b5b;
193 | cursor: pointer;
194 |
195 | a {
196 | text-decoration: none;
197 | color: inherit;
198 | font-size: inherit;
199 | font-weight: inherit;
200 | }
201 | }
202 |
203 | > .status {
204 | margin-bottom: 10px;
205 | font-size: 12px;
206 | color: #01aaea;
207 | font-weight: 300;
208 |
209 | .status-item {
210 | margin-right: 20px;
211 | cursor: pointer;
212 | }
213 |
214 | em {
215 | font-style: normal;
216 | }
217 | }
218 |
219 | .topic-list-active {
220 | margin-bottom: 10px;
221 | .date {
222 | position: absolute;
223 | right: 15px;
224 | bottom: 10px;
225 | font-size: 14px;
226 | color: #bec8d3;
227 | font-weight: 300;
228 | }
229 | }
230 | }
231 |
232 | .tags {
233 | .tag-item {
234 | font-size: 12px;
235 | font-weight: 500;
236 | color: #c8b383;
237 | display: inline-block;
238 | background: #fff4de;
239 | padding: 2px 4px;
240 | border: 1px solid #ffe9b2;
241 | border-radius: 2px;
242 | cursor: pointer;
243 | margin-right: 3px;
244 |
245 | &.special {
246 | background: #80bd01;
247 | color: #fff;
248 | border-color: #afd06b;
249 | }
250 | }
251 | }
--------------------------------------------------------------------------------
/app/style/sass/markdown.scss:
--------------------------------------------------------------------------------
1 | .markdown-text {
2 | * {
3 | word-break: break-all;
4 | }
5 |
6 | h1, h2, h3, h4, h5, h6 {
7 | margin: 10px 0;
8 | font-family: inherit;
9 | font-weight: 700;
10 | line-height: 20px;
11 | color: inherit;
12 | text-rendering: optimizelegibility;
13 | }
14 |
15 | h1, h2, h3 {
16 | line-height: 40px;
17 | }
18 |
19 | table {
20 | padding: 0;
21 | border-collapse: collapse;
22 | border-spacing: 0;
23 | font: inherit;
24 | max-width: 100%;
25 | background-color: transparent;
26 |
27 | tr {
28 | border-top: 1px solid #ccc;
29 | background-color: #fff;
30 | margin: 0;
31 | padding: 0;
32 |
33 | th, td {
34 | border: 1px solid #ccc;
35 | text-align: left;
36 | margin: 0;
37 | padding: 6px 13px;
38 | }
39 |
40 | &:nth-child(2n) {
41 | background-color: #f8f8f8;
42 | }
43 | }
44 | }
45 |
46 | img {
47 | width: auto\9;
48 | height: auto;
49 | max-width: 100%;
50 | vertical-align: middle;
51 | border: 0;
52 | -ms-interpolation-mode: bicubic;
53 | cursor: pointer;
54 | }
55 |
56 | a {
57 | text-decoration: none;
58 | color: #08c;
59 |
60 | &:hover {
61 | text-decoration: underline;
62 | color: #08c;
63 | }
64 | }
65 |
66 | ul, li {
67 | list-style: disc;
68 | font-size: 14px;
69 | line-height: 2em;
70 | }
71 |
72 | ol, ul {
73 | padding: 0;
74 | margin: 0 0 10px 25px;
75 | }
76 |
77 | p {
78 | white-space: pre-wrap;
79 | word-wrap: break-word;
80 | line-height: 2em;
81 | margin: 1em 0;
82 | overflow: auto;
83 | }
84 |
85 | small, address, blockquote {
86 | line-height: 20px;
87 | display: block;
88 | }
89 |
90 | address {
91 | margin-bottom: 20px;
92 | }
93 |
94 | blockquote {
95 | padding: 0 0 0 15px;
96 | margin: 0 0 20px;
97 | border-left: 5px solid #eee;
98 | }
99 |
100 | pre {
101 | display: block;
102 | line-height: 22px;
103 | padding: 9.5px;
104 | margin: 0 0 10px;
105 | font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
106 | font-size: 13px;
107 | color: #333;
108 | border-radius: 4px;
109 | word-break: break-all;
110 | word-wrap: break-word;
111 | white-space: pre;
112 | background: #fee9cc;
113 | border: 1px dashed #ccc;
114 |
115 | &.prettyprint {
116 | margin-bottom: 20px;
117 | border: 1px solid #888;
118 | padding: 0 15px;
119 | background: #f7f7f7;
120 | }
121 |
122 | code {
123 | padding: 0;
124 | border: 0;
125 | color: inherit;
126 | white-space: pre-wrap;
127 | background-color: transparent;
128 | }
129 | }
130 |
131 | code {
132 | font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
133 | font-size: 12px;
134 | border-radius: 3px;
135 | color: #d14;
136 | background: #f7f7f9;
137 | padding: 0;
138 | border: none;
139 | }
140 |
141 | dl, legend {
142 | margin-bottom: 20px;
143 | }
144 |
145 | fieldset, legend {
146 | padding: 0;
147 | border: 0;
148 | }
149 | }
--------------------------------------------------------------------------------
/app/style/sass/message.scss:
--------------------------------------------------------------------------------
1 | .message {
2 | background: #fff;
3 | min-width: 300px;
4 | padding: 10px 12px;
5 | box-sizing: border-box;
6 | border-radius: 1px;
7 | position: fixed;
8 | left: 50%;
9 | top: 0;
10 | opacity: 1;
11 | transform: translate(-50%, 60px);
12 | overflow: hidden;
13 | box-shadow: 2px 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
14 | }
15 |
16 | .message.ng-enter {
17 | transition: all .4s;
18 | transform: translate(-50%, 0);
19 | opacity: 0;
20 | }
21 |
22 | .message.ng-enter-active {
23 | transform: translate(-50%, 60px);
24 | opacity: 1;
25 | }
26 |
27 | .message.ng-leave {
28 | transition: all .4s;
29 | transform: translate(-50%, 60px);
30 | opacity: 1;
31 | }
32 |
33 | .message.ng-leave-active {
34 | transition: all .4s;
35 | transform: translate(-50%, 0);
36 | opacity: 0;
37 | }
38 |
39 | .message-img {
40 | width: 40px;
41 | height: 40px;
42 | position: absolute;
43 | left: 0;
44 | top: 0;
45 | }
46 |
47 | .message-group {
48 | margin-left: 38px;
49 | position: relative;
50 | height: 20px;
51 | }
52 |
53 | .message-group p {
54 | font-size: 14px;
55 | line-height: 20px;
56 | margin: 0 34px 0 0;
57 | white-space: nowrap;
58 | color: #8391a5;
59 | text-align: justify;
60 | vertical-align: middle;
61 | display: inline-block;
62 | }
63 |
64 | .message-close {
65 | top: 0;
66 | right: 0;
67 | position: absolute;
68 | cursor: pointer;
69 | color: #bfcbd9;
70 | font-size: 20px;
71 | }
--------------------------------------------------------------------------------
/app/style/sass/topic.scss:
--------------------------------------------------------------------------------
1 | .part {
2 | background: #fff;
3 | border-radius: 2px;
4 | box-shadow: 1px 1px 1px #ccc;
5 | padding: 20px 10px;
6 | margin-bottom: 10px;
7 | }
8 |
9 | .topic-header {
10 | display: flex;
11 | border-bottom: 1px dashed #ccc;
12 | margin-bottom: 10px;
13 |
14 | .user-avator {
15 | flex-basis: 60px;
16 | flex-grow: 0;
17 | flex-shrink: 0;
18 |
19 | img {
20 | height: 60px;
21 | width: 60px;
22 | border-radius: 50%;
23 | }
24 | }
25 |
26 | .topic-info {
27 | padding-left: 10px;
28 | width: 100%;
29 |
30 | .topic-info-title {
31 | margin-bottom: 10px;
32 | font-size: 18px;
33 | font-weight: 600;
34 | }
35 |
36 | .topic-info-state {
37 | font-size: 14px;
38 | color: #acb6b7;
39 | margin-bottom: 10px;
40 | font-weight: 300;
41 |
42 | a {
43 | color: #6ac5e6;
44 | text-decoration: none;
45 | }
46 | }
47 |
48 | .topic-info-active {
49 | position: relative;
50 | margin-bottom: 10px;
51 | .topic-info-tabs {
52 | span {
53 | font-size: 12px;
54 | font-weight: 500;
55 | color: #c8b383;
56 | display: inline-block;
57 | background: #fff4de;
58 | padding: 2px 4px;
59 | border: 1px solid #ffe9b2;
60 | border-radius: 2px;
61 | cursor: pointer;
62 | margin-right: 3px;
63 | }
64 | }
65 |
66 | .topic-info-opts {
67 | position: absolute;
68 | font-size: 14px;
69 | top: 0;
70 | right: 10px;
71 |
72 | color: #999;
73 |
74 | > span {
75 | margin-left: 10px;
76 | }
77 | }
78 | }
79 | }
80 | }
81 |
82 | .reply-header {
83 | padding-bottom: 10px;
84 | margin-bottom: 10px;
85 | border-bottom: 1px dashed #ccc;
86 | }
87 |
88 | .reply-list {
89 | .reply-item {
90 | padding-bottom: 10px;
91 | margin-bottom: 10px;
92 | border-bottom: 1px dashed #ccc;
93 |
94 | &:last-child {
95 | border-bottom: none;
96 | margin-bottom: 0;
97 | padding-bottom: 0;
98 | }
99 |
100 | .reply-item-content {
101 | margin-bottom: 10px;
102 | }
103 |
104 | .reply-item-bottom {
105 | font-size: 14px;
106 | color: #acb6b7;
107 |
108 | .reply-item-bottom-info {
109 | position: relative;
110 | * {
111 | vertical-align: middle;
112 | }
113 |
114 | img {
115 | height: 30px;
116 | width: 30px;
117 | border-radius: 50%;
118 | }
119 | }
120 |
121 | .reply-item-bottom-actions {
122 | position: absolute;
123 | right: 0;
124 | bottom: 0;
125 | top: 0;
126 |
127 | * {
128 | vertical-align: middle;
129 | }
130 |
131 | .reply-item-bottom-actions-item {
132 | margin-left: 5px;
133 | }
134 | }
135 |
136 | .reply-item-bottom-form {
137 | border-top: 1px solid #ccc;
138 | margin-top: 10px;
139 | padding: 10px 0 0 20px;
140 | text-align: right;
141 | position: relative;
142 |
143 | &::after,
144 | &::before {
145 | content: '';
146 | display: block;
147 | position: absolute;
148 |
149 | width: 0;
150 | height: 0;
151 | }
152 |
153 | &::after {
154 | border-left: 10px solid transparent;
155 | border-right: 10px solid transparent;
156 | border-bottom: 10px solid #ccc;
157 | top: 1px;
158 | right: 20px;
159 | z-index: 1000;
160 | }
161 |
162 | &.focused::after {
163 | border-bottom-color: #6ac5e6;
164 | }
165 |
166 | &::before {
167 | border-left: 8px solid transparent;
168 | border-right: 8px solid transparent;
169 | border-bottom: 8px solid #fff;
170 | top: 3px;
171 | right: 22px;
172 | z-index: 1001;
173 | }
174 |
175 | textarea {
176 | display: block;
177 | width: 100%;
178 | height: 50px;
179 | box-sizing: border-box;
180 | padding: 5px;
181 | margin-bottom: 5px;
182 |
183 | border-color: #ccc;
184 | border-radius: 2px;
185 | outline: none;
186 | resize: none;
187 | font-size: 12px;
188 |
189 | &:hover,
190 | &:focus {
191 | border-color: #6ac5e6;
192 | }
193 | }
194 |
195 | .use-markdown {
196 | position: absolute;
197 | left: 10px;
198 | bottom: 0;
199 | }
200 | }
201 | }
202 | }
203 | }
204 |
205 | .reply-bottom {
206 | margin-top: 10px;
207 | text-align: right;
208 | }
209 |
210 | .form-group {
211 | margin-bottom: 15px;
212 | .form-group-label {
213 | margin-bottom: 5px;
214 | font-size: 16px;
215 | color: #acb6b7;
216 |
217 | .require {
218 | color: red;
219 | }
220 | }
221 |
222 | .form-group-input {
223 |
224 | }
225 | }
--------------------------------------------------------------------------------
/app/style/sass/user.scss:
--------------------------------------------------------------------------------
1 | .user-info {
2 | text-align: center;
3 | margin-bottom: 20px;
4 |
5 | .user-info-avatar {
6 | box-sizing: border-box;
7 | padding: 10px 0;
8 |
9 | img {
10 | width: 170px;
11 | height: 170px;
12 | border-radius: 50%;
13 | border: 1px solid #ecf1f3;
14 | }
15 | }
16 |
17 | .title {
18 | color: #364149;
19 | font-size: 16px;
20 | font-weight: 500;
21 | }
22 |
23 | .sub-title {
24 | color: #aab9c7;
25 | font-size: 13px;
26 | margin-top: 5px;
27 | }
28 | }
29 |
30 | .user-tab {
31 | .user-tab-header {
32 | display: flex;
33 | height: 70px;
34 | border-top: 1px solid #e9e9e9;
35 | border-bottom: 1px solid #e9e9e9;
36 |
37 | padding: 10px 0;
38 | box-sizing: border-box;
39 |
40 | cursor: pointer;
41 | user-select: none;
42 |
43 | li {
44 | flex: auto;
45 | width: 1%;
46 | height: 100%;
47 | border-right: 1px solid #e9e9e9;
48 | text-align: center;
49 | padding: 0 8px;
50 |
51 | .value {
52 | font-size: 20px;
53 | font-weight: 500;
54 | line-height: 20px;
55 | margin-top: 5px;
56 | margin-bottom: 5px;
57 |
58 | max-width: 100%;
59 |
60 | white-space: nowrap;
61 | overflow: hidden;
62 | text-overflow: ellipsis;
63 | }
64 |
65 | .desc {
66 | font-size: 14px;
67 | color: #aab9c7;
68 | }
69 |
70 | &:nth-last-child(1) {
71 | border-right: none;
72 | &:hover .value {
73 | color: #1f2d3d;
74 | }
75 | }
76 |
77 | &.selected .value,
78 | &:hover .value {
79 | color: #317fff;
80 | }
81 | }
82 | }
83 |
84 | .user-tab-content-wrapper {
85 | background: #f6f6f6;
86 | position: relative;
87 |
88 | .user-tab-content {
89 | width: 100%;
90 |
91 | position: absolute;
92 | top: 0;
93 | left: 0;
94 |
95 | &.active {
96 | position: relative;
97 | }
98 | }
99 | }
100 |
101 | .user-tab-content {
102 | .topic-item {
103 | background: #fff;
104 | padding: 10px;
105 | margin-bottom: 3px;
106 | box-shadow: 1px 1px 1px #ccc;
107 |
108 | .title {
109 | font-size: 16px;
110 | font-weight: 600;
111 | margin-bottom: 8px;
112 | }
113 |
114 | .info {
115 | font-size: 14px;
116 | color: #aab9c7;
117 | }
118 |
119 | &.last {
120 | background: transparent;
121 | color: #aab9c7;
122 | position: relative;
123 |
124 | box-sizing: border-box;
125 | padding: 14px;
126 |
127 | .split {
128 | background: #aab9c7;
129 | height: 2px;
130 | border: none;
131 | }
132 |
133 | .desc {
134 | height: 20px;
135 | line-height: 20px;
136 | position: absolute;
137 | top: 50%;
138 | left: 50%;
139 | transform: translate(-50%, -50%);
140 |
141 | padding: 0 5px;
142 | background: #f6f6f6;
143 | }
144 | }
145 |
146 | &.flex {
147 | display: flex;
148 |
149 | .left-part {
150 | flex-basis: 40px;
151 |
152 | img {
153 | height: 38px;
154 | width: 38px;
155 | border-radius: 50%;
156 | }
157 | }
158 |
159 | .right-part {
160 | flex-grow: 1;
161 | padding-left: 10px;
162 | }
163 | }
164 | }
165 |
166 | .message-item {
167 | background: #fff;
168 | padding: 10px;
169 | margin-bottom: 3px;
170 | box-shadow: 1px 1px 1px #ccc;
171 |
172 | .user-info {
173 | display: flex;
174 | margin-bottom: 0;
175 |
176 | .left-part {
177 | flex-basis: 40px;
178 |
179 | img {
180 | height: 38px;
181 | width: 38px;
182 | border-radius: 50%;
183 | }
184 | }
185 |
186 | .right-part {
187 | flex-grow: 1;
188 | padding-left: 10px;
189 | text-align: left;
190 |
191 | .user-name {
192 | margin-bottom: 5px;
193 | font-size: 14px;
194 | font-weight: 500;
195 | }
196 |
197 | .topic-title {
198 | font-size: 14px;
199 | color: #aab9c7;
200 |
201 | width: 90%;
202 | display: -webkit-box;
203 | -webkit-line-clamp: 1;
204 | -webkit-box-orient: vertical;
205 | overflow: hidden;
206 | }
207 | }
208 | }
209 |
210 | .desc {
211 | margin: 10px 0;
212 | font-size: 14px;
213 | }
214 |
215 | .info {
216 | font-size: 14px;
217 | color: #aab9c7;
218 | }
219 | }
220 | }
221 | }
--------------------------------------------------------------------------------
/app/style/sass/userCard.scss:
--------------------------------------------------------------------------------
1 | .user-card-container {
2 | position: relative;
3 | display: inline-block;
4 | border-radius: 4px;
5 | .user-card {
6 | display: none;
7 | position: absolute;
8 | z-index: 1000;
9 | background: #fff;
10 | width: 300px;
11 | box-shadow: -1px 1px 1px #ccc,
12 | 1px -1px 1px #ccc,
13 | 1px 1px 1px #ccc,
14 | 1px 1px 1px #ccc;
15 | }
16 |
17 | &:hover .user-card {
18 | display: block;
19 | }
20 |
21 | .user-card-header {
22 | position: relative;
23 | }
24 |
25 | .user-card-header .img-container {
26 | position: absolute;
27 | top: -10px;
28 | left: 12px;
29 | height: 60px;
30 | width: 60px;
31 |
32 | > img {
33 | height: 100% !important;
34 | width: 100% !important;
35 | border-radius: 50% !important;
36 | }
37 | }
38 |
39 | .user-card-header .user-card-header-desc {
40 | margin-left: 80px;
41 | padding-top: 10px;
42 | margin-bottom: 8px;
43 | text-align: left;
44 |
45 | .title {
46 | color: #364149;
47 | font-size: 16px;
48 | font-weight: 500;
49 | }
50 |
51 | .sub-title {
52 | color: #aab9c7;
53 | font-size: 13px;
54 | margin-top: 5px;
55 | }
56 | }
57 |
58 | .user-card-content {
59 | display: flex;
60 | height: 50px;
61 | box-sizing: border-box;
62 | li {
63 | flex: auto;
64 | border-right: 1px solid #e9e9e9;
65 | text-align: center;
66 | padding: 0 8px;
67 |
68 | .value {
69 | font-size: 20px;
70 | font-weight: 500;
71 | line-height: 20px;
72 | margin-top: 5px;
73 | margin-bottom: 5px;
74 |
75 | max-width: 100%;
76 |
77 | white-space: nowrap;
78 | overflow: hidden;
79 | text-overflow: ellipsis;
80 | }
81 |
82 | .desc {
83 | font-size: 14px;
84 | color: #aab9c7;
85 | }
86 | }
87 | }
88 |
89 | .user-card-footer {
90 | text-align: center;
91 | padding: 8px;
92 | }
93 | }
--------------------------------------------------------------------------------
/dist/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/P-ppc/cnodejs/433d4343e67f1aa30b8a8c29d185216177c0c09d/dist/.gitkeep
--------------------------------------------------------------------------------
/icon.icns:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/P-ppc/cnodejs/433d4343e67f1aa30b8a8c29d185216177c0c09d/icon.icns
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | const electron = require("electron");
2 | const app = electron.app;
3 | const BrowserWindow = electron.BrowserWindow;
4 | const ipc = electron.ipcMain;
5 |
6 | let win;
7 |
8 | function createWindow () {
9 | win = new BrowserWindow({
10 | width: 400,
11 | height: 725,
12 | title: 'CNODE',
13 | resizable: false
14 | });
15 |
16 | win.loadURL(`file://${__dirname}/app/index.html`);
17 |
18 | win.on("closed", () => {
19 | win = null;
20 | });
21 |
22 | ipc.on("login-success", () => {
23 | win.setSize(600, 780, true);
24 | });
25 |
26 | ipc.on("logout", () => {
27 | win.setSize(400, 725, true);
28 | })
29 | }
30 |
31 | app.on("ready", createWindow);
--------------------------------------------------------------------------------
/menu.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | window.nodeRequire = require;
4 |
5 | const electron = nodeRequire('electron');
6 | const remote = electron.remote;
7 | const Menu = remote.Menu;
8 |
9 | var template = [
10 | {
11 | label: '编辑',
12 | submenu: [
13 | {
14 | label: '撤销',
15 | accelerator: 'CmdOrCtrl+Z',
16 | role: 'undo'
17 | },
18 | {
19 | label: '重做',
20 | accelerator: 'Shift+CmdOrCtrl+Z',
21 | role: 'redo'
22 | },
23 | {
24 | type: 'separator'
25 | },
26 | {
27 | label: '剪切',
28 | accelerator: 'CmdOrCtrl+X',
29 | role: 'cut'
30 | },
31 | {
32 | label: '复制',
33 | accelerator: 'CmdOrCtrl+C',
34 | role: 'copy'
35 | },
36 | {
37 | label: '粘贴',
38 | accelerator: 'CmdOrCtrl+V',
39 | role: 'paste'
40 | },
41 | {
42 | label: '全选',
43 | accelerator: 'CmdOrCtrl+A',
44 | role: 'selectall'
45 | }
46 | ]
47 | },
48 | {
49 | label: '窗口',
50 | role: 'window',
51 | submenu: [
52 | {
53 | label: '最小化',
54 | accelerator: 'CmdOrCtrl+M',
55 | role: 'minimize'
56 | },
57 | {
58 | label: '关闭窗口',
59 | accelerator: 'CmdOrCtrl+W',
60 | role: 'close'
61 | },
62 | {
63 | label: '调试模式',
64 | accelerator: 'Option+CmdOrCtrl+I',
65 | click: function () {
66 | remote.getCurrentWindow().webContents.toggleDevTools();
67 | }
68 | }
69 | ]
70 | },
71 | {
72 | label: '帮助',
73 | role: 'help',
74 | submenu: [
75 | {
76 | label: '建议 或 反馈…',
77 | click: function () {
78 | electron.shell.openExternal('https://github.com/P-ppc/cnodejs/issues');
79 | }
80 | }
81 | ]
82 | }
83 | ];
84 |
85 | if (process.platform === 'darwin') {
86 | var name = remote.app.getName();
87 | template.unshift({
88 | label: name,
89 | submenu: [
90 | {
91 | label: '隐藏 ' + name,
92 | accelerator: 'Command+H',
93 | role: 'hide'
94 | },
95 | {
96 | label: '隐藏其他应用',
97 | accelerator: 'Command+Alt+H',
98 | role: 'hideothers'
99 | },
100 | {
101 | label: '显示全部',
102 | role: 'unhide'
103 | },
104 | {
105 | type: 'separator'
106 | },
107 | {
108 | label: '退出',
109 | accelerator: 'Command+Q',
110 | click: function () {
111 | remote.app.quit();
112 | }
113 | }
114 | ]
115 | });
116 | } else if(process.platform === 'win32'){
117 | let helpItem = template[template.length-1];
118 | }
119 |
120 | var menu = Menu.buildFromTemplate(template);
121 | Menu.setApplicationMenu(menu);
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "cnodejs",
3 | "version": "2.0.0",
4 | "description": "基于electron的cnodejs社区桌面客户端",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "electron index.js",
8 | "build:mac": "electron-packager ./ cnodejs --platform=darwin --arch=x64 --icon=icon.icns --overwrite --out ./dist/$npm_package_version --version=0.37.8 --ignore='(.github|.git|.DS_Store|TODOS.md|imgPreview|node_modules)'"
9 | },
10 | "devDependencies": {
11 | "electron-packager": "^7.0.3",
12 | "electron-prebuilt": "^0.37.0",
13 | "rimraf": "^2.5.2"
14 | },
15 | "dependencies": {}
16 | }
17 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | ## 利用cnodejs网站提供的api实现一个桌面客户端([cnodejs社区](https://cnodejs.org/))
2 |
3 | ### 快速开始
4 | ```
5 | git clone git@github.com:P-ppc/cnodejs.git
6 | cd cnodejs
7 | npm install
8 | npm start
9 | ```
10 |
11 | ### mac打包
12 | ```
13 | npm run build:mac
14 | ```
15 | 打包目录在/dist下
16 |
--------------------------------------------------------------------------------
/uikit/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
4 |
145 |
5 |
144 |
6 |
18 |
7 | ![]()
8 |
9 |
17 |
19 |
143 | -
20 |
-
21 |
22 |
最近创建
23 |
24 | -
25 |
26 |
最近回复
27 |
28 | -
30 |
31 |
未读信息
32 |
33 | -
35 |
36 |
已读信息
37 |
38 | -
39 |
40 |
积分
41 |
42 |
44 |
58 |
142 |
59 |
83 |
60 |
78 |
61 |
62 |
63 |
64 | ![]()
65 |
66 |
67 |
68 |
69 |
77 |
79 |
80 |
82 | 80 |
没有更多了
81 |
84 |
112 |
85 |
107 |
86 |
102 |
103 |
87 |
88 |
89 |
90 | ![]()
91 |
92 |
93 |
94 |
95 |
101 |
104 | 回复于
105 |
106 |
108 |
109 |
111 | 109 |
没有更多了
110 |
113 |
141 |
114 |
136 |
115 |
131 |
132 |
116 |
117 |
118 |
119 | ![]()
120 |
121 |
122 |
123 |
124 |
130 |
133 | 回复于
134 |
135 |
137 |
138 |
140 | 138 |
没有更多了
139 |
12 |
96 |
97 |
98 |
--------------------------------------------------------------------------------
/uikit/lib/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "lib",
3 | "homepage": "https://github.com/P-ppc/cnodejs",
4 | "authors": [
5 | "P-ppc
13 |
16 |
17 | cnodejs项目基础ui规范
14 |包含基础样式以及一些基础组件样式
15 |
18 |
23 |
24 | 字体
19 |-
20 |
- 使用 Helvetica, Tahoma, Arial, STXihei, “华文细黑”, “Microsoft YaHei”, “微软雅黑”, sans-serif; 21 |
25 |
36 |
37 | 字体大小
26 |-
27 |
- 基础大小: 1.6 * $rem 即 16px 28 |
- 主标题: uikit基础规范 29 |
- 标题: uikit基础规范 30 |
- 小标题: uikit基础规范 31 |
- 正文: uikit基础规范 32 |
- 正文（小）: uikit基础规范 33 |
- 辅助文字: uikit基础规范 34 |
38 |
57 |
58 | 背景色
39 |light-blue
40 | blue
41 | dark-blue
42 | success
43 | warning
44 | danger
45 | black
46 | light-black
47 | extra-light-black
48 | silver
49 | light-silver
50 | extra-light-silve
51 | gray
52 | light-gray
53 | extra-light-gray
54 | dark-white
55 | white
56 |
59 |
61 |
62 | 文字组合: 如标题、副标题、连接等
60 |
63 |
68 | 69 | 70 | 71 | 72 |
73 | 74 | 75 | 76 |
77 | 81 | 84 |
85 | 86 | 87 | 88 | 89 |
90 |
91 | 按钮
64 | 65 | 66 | 67 |68 | 69 | 70 | 71 | 72 |
73 | 74 | 75 | 76 |
77 | 81 | 84 |
85 | 86 | 87 | 88 | 89 |
92 |
95 |